19

CHAPTER 4
SAMPLE CODE

Home.jsx

import React, { useState } from 'react';

import { Link } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';

const Home = () => {

const navigate = useNavigate();
const [showPopup, setShowPopup] = useState(false);
const [adults, setAdults] = useState(1);
const [children, setChildren] = useState(0);
const [childAges, setChildAges] = useState(Array(children).fill(0));
const [rooms, setRooms] = useState(1);

const handlePopupToggle = () => {

setShowPopup(!showPopup);
};

const handleAdultsIncrement = () => {

setAdults(adults + 1);
};

const handleAdultsDecrement = () => {

if (adults > 1) {
setAdults(adults - 1);
}
};
 20

const handleChildrenIncrement = () => {

setChildren(children + 1);
setChildAges([...childAges, 0]);
};

const handleChildrenDecrement = () => {

if (children > 0) {
setChildren(children - 1);
setChildAges(childAges.slice(0, -1));
}
};
const handleChildAgeChange = (index, age) => {
const updatedAges = [...childAges];
updatedAges[index] = age;
setChildAges(updatedAges);
};
const handleRoomsIncrement = () => {
setRooms(rooms + 1);
};
const handleRoomsDecrement = () => {
if (rooms > 1) {
setRooms(rooms - 1);
}
};
const handleDone = () => {
setShowPopup(false);
};
return (
<div>
<section className="bg-gray-100 py-16">
<div className="container mx-auto">
 21

<h2 className="text-3xl md:text-4xl font-bold mb-8 text-center">Book

Your Stay</h2>
<div className="relative">
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -
translate-y-1/2 p-5 bg-white py-8 rounded-md w-full md:w-[80rem] h-[8rem]">
<div className="flex justify-around items-center space-x-8">
<div className="flex flex-col">
<label htmlFor="from" className="text-sm mb-1 text-
left">From</label>
<input type="text" id="from" placeholder="From"
className="px-3 py-2 border border-gray-300 rounded-md flex-grow font-bold" />
</div>
<div className="flex flex-col border-l pl-4">
<label htmlFor="checkIn" className="text-sm mb-1 text-
left">Check In</label>
<input type="date" id="checkIn" placeholder="Check In"
className="px-3 py-2 border border-gray-300 rounded-md flex-grow font-bold" />
</div>
<div className="flex flex-col border-l pl-4">
<label htmlFor="checkOut" className="text-sm mb-1 text-
left">Check Out</label>
<input type="date" id="checkOut" placeholder="Check Out"
className="px-3 py-2 border border-gray-300 rounded-md flex-grow font-bold" />
</div>
<div className="flex flex-col border-l pl-4">
<label htmlFor="guests" className="text-sm mb-1 text-
left">Guests and Rooms</label>
<div className="relative">
<input
type="text"
id="guests"
 22

placeholder={`${adults} Adult${adults !== 1 ? 's' : ''}, $

{children} Child${children !== 1 ? 'ren' : ''}, ${rooms} Room${rooms !== 1 ? 's' : ''}`}
className="px-3 py-2 border border-gray-300 rounded-md
flex-grow cursor-pointer bg-gray-100 font-bold"
onClick={handlePopupToggle}/>
{showPopup && (
<div className="absolute bg-white border border-gray-300
mt-2 py-2 px-4 rounded shadow-lg z-10 w-60">
<div className="flex justify-between mb-2">
<span>Adults</span>
<div className="flex items-center">
<button onClick={handleAdultsDecrement}
className="px-3 py-1 bg-blue-500 text-white rounded-full
focus:outline-none">-</button>
<span className="px-3 py-1">{adults}</span>
<button onClick={handleAdultsIncrement}
className="px-3 py-1 bg-blue-500 text-white rounded-full
focus:outline-none">+</button>
</div>
</div>
<div className="flex justify-between mb-2">
<span>Children</span>
<div className="flex items-center">
<button onClick={handleChildrenDecrement}
className="px-3 py-1 bg-blue-500 text-white rounded-full
focus:outline-none">-</button>
<span className="px-3 py-1">{children}</span>
<button onClick={handleChildrenIncrement}
className="px-3 py-1 bg-blue-500 text-white rounded-full
focus:outline-none">+</button>
</div>
 23

</div>
{children > 0 && (
<div className="mb-2">
<span>Children Ages</span>
<div className="flex flex-wrap">
{childAges.map((age, index) => (
<select key={index} value={age} onChange={e
=> handleChildAgeChange(index, parseInt(e.target.value))} className="px-2 py-1
border border-gray-300 rounded-md mr-2 mt-1">
{Array.from({ length: 12 }, (_, i) => i +
1).map(age => (
<option key={age}
value={age}>{age}</option>
))}
</select>
))}
</div>
</div>
)}
<div className="flex justify-between mb-2">
<span>Rooms</span>
<div className="flex items-center">
<button onClick={handleRoomsDecrement}
className="px-3 py-1 bg-blue-500 text-white rounded-full
focus:outline-none">-</button>
<span className="px-3 py-1">{rooms}</span>
<button onClick={handleRoomsIncrement}
className="px-3 py-1 bg-blue-500 text-white rounded -full
focus:outline-none">+</button>
</div>
</div>
 24

<button onClick={handleDone} className="bg-blue-500

text-white px-6 py-3 rounded-md text-lg font-semibold hover:bg-blue-600 transition
duration-300">Done</button>
</div>
)}
</div>
</div>
<button className="bg-blue-500 text-white px-6 py-3 rounded-md
text-lg font-semibold hover:bg-blue-600 transition duration-300">Search</button>
</div>
</div>
</div>
</div>
</section>
<section className="bg-cover bg-center h-screen" style={{ backgroundImage:
'url("https://res.cloudinary.com/dfrc94azr/image/upload/v1710569243/
wallpaperflare.com_wallpaper_9_y9x0ma.jpg")' }}>
<div className="h-full flex flex-col justify-center items-center text-white">
<h1 className="text-4xl md:text-6xl font-bold mb-4 text-center">Welcome to
Boating Voyager</h1>
<h1 className="text-4xl md:text-6xl font-bold mb-4 text-center">A Perfect
Weekend Getaway</h1>
<p className="text-lg md:text-xl text-center max-w-lg mb-8">Experience the
serenity of the open water. Explore, relax, and enjoy unforgettable moments on our
luxurious boats.</p>
<Link to="/login" className="bg-blue-500 hover:bg-blue-600 text-white font-
bold py-3 px-6 rounded-full transition duration-300">Book Now</Link>
</div>
</section>
<section className="bg-gray-100 py-16">
<div className="container mx-auto">
 25

<h2 className="text-3xl md:text-4xl font-bold mb-8 text-center">About

Us</h2>
<div className="flex flex-col md:flex-row items-center justify-center">
<div className="md:w-1/2 md:mr-8 mb-8 md:mb-0">
<img src="https://res.cloudinary.com/dfrc94azr/image/upload/v1710566094/
wallpaperflare.com_wallpaper_8_owqp4x.jpg" alt="About" className="w-full h-auto
rounded-lg" />
</div>
<div className="md:w-1/1">
<p className="text-lg mb-4">At Boating Paradise, we're passionate about
providing you with the best boating experience. Whether you're a seasoned sailor or
new to the water, we have the perfect vessel for your adventure.</p>
<p className="text-lg">Our fleet consists of top-of-the-line boats equipped
with modern amenities and safety features. Join us and embark on a journey you'll
never forget.</p>
</div>
</div>
</div>
</section>
<section className="py-16">
<div className="container mx-auto">
<h2 className="text-3xl md:text-4xl font-bold mb-8 text-center">Our
Services</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="bg-white rounded-lg shadow-md p-6">
<h3 className="text-xl font-bold mb-4">Boat Rentals</h3>
<p className="text-lg">Choose from our diverse range of boats for rent,
suitable for any occasion or preference.</p>
</div>
<div className="bg-white rounded-lg shadow-md p-6">
<h3 className="text-xl font-bold mb-4">Guided Tours</h3>
 26

<p className="text-lg">Explore the wonders of the water with our

experienced guides leading the way.</p>
</div>
<div className="bg-white rounded-lg shadow-md p-6">
<h3 className="text-xl font-bold mb-4">Events & Charters</h3>
<p className="text-lg">Host your special events or celebrations aboard our
luxurious charter boats.</p>
</div>
</div>
</div>
</section>
<section className="bg-gray-100 py-16">
<div className="container mx-auto">
<h2 className="text-3xl md:text-4xl font-bold mb-8 text-center">What Our
Customers Say</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="bg-white rounded-lg shadow-md p-6">
<blockquote className="text-lg">"An unforgettable experience! The boat
was in impeccable condition, and the staff were friendly and accommodating. Highly
recommended!"</blockquote>
<cite className="block mt-4 text-gray-500">- Mohamed Haaris</cite>
</div>
<div className="bg-white rounded-lg shadow-md p-6">
<blockquote className="text-lg">"I booked a guided tour with Boating
Paradise, and it exceeded all my expectations. The scenery was breathtaking, and the
captain was knowledgeable. Will definitely come back!"</blockquote>
<cite className="block mt-4 text-gray-500">- Mohamed Hajith</cite>
</div>
</div>
</div>
</section>
 27

<section className="py-16">
<div className="container mx-auto">
<h2 className="text-3xl md:text-4xl font-bold mb-8 text-center">Contact
Us</h2>
<p className="text-lg text-center mb-8">Have questions or ready to book your
next adventure? Reach out to us today!</p>
<div className="flex justify-center">
<p className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6
rounded-full transition duration-300" onClick={()=>navigate('/contact')}>Contact
Us</p>
</div>
</div></section></div>);};export default Home;

Boat Controller.java
package com.boat.boathouse.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.boat.boathouse.constant.Api;
 28

import com.boat.boathouse.model.Boat;
import com.boat.boathouse.model.Passenger;
import com.boat.boathouse.service.BoatService;
@RequestMapping(Api.AUTH)
@RestController
@CrossOrigin("*")
public class BoatController {
@Autowired
private BoatService boatService;
@PostMapping(value="/saveboat")
public Boat saveBoat(@RequestBody Boat boat) {
System.out.println("Boat details saved successfully");
Boat savedBoat = boatService.saveBoat(boat);
List<Passenger> passengers = savedBoat.getPassengers();
if (passengers != null) {
for (Passenger passenger : passengers) {
passenger.setBoat(savedBoat);
}
}
savedBoat.setPassengers(passengers);
return boatService.saveBoat(savedBoat);
}
@GetMapping(value="/getboats")
public List<Boat> getAllBoats() {
return boatService.getAllBoats();
}
@GetMapping(value="/getboat/{id}")
public Boat getBoatById(@PathVariable int id) {
return boatService.findById(id);
}
@GetMapping(value="/getboatwithpass/{id}")
 29

public ResponseEntity<Boat> getBoatWithPassengersById(@PathVariable int id) {

Boat boat = boatService.getBoatWithPassengersById(id);
if (boat != null) {
return new ResponseEntity<>(boat, HttpStatus.OK);
} else {
return new ResponseEntity<>(HttpStatus.NOT_FOUND);
}
}
@PutMapping("/updateboat/{id}")
public Boat updateBoat(@PathVariable int id, @RequestBody Boat boat) {
return boatService.updateBoat(id, boat);
}
@DeleteMapping("/deleteboat")
public String deleteBoat(@RequestParam int id) {
boatService.deleteBoat(id);
return "Boat deleted successfully";
}
@GetMapping("/getboat/{from}/{checkIn}/{checkOut}/{rooms}")
public List<Boat> findByFromAndCheckAndCheckOutAndRooms(
@PathVariable String from,
@PathVariable String checkIn,
@PathVariable String checkOut,
@PathVariable int rooms) {
return boatService.findByFromAndCheckAndCheckOutAndRooms(from,
checkIn, checkOut, rooms);
}
@GetMapping("/boats/{minFare}/{maxFare}")
public List<Boat> findBoatsInFareRange(@PathVariable double minFare,
@PathVariable double maxFare) {
return boatService.findBoatsInFareRange(minFare, maxFare);
}
 30

@GetMapping("/boats/lowtohigh")
public List<Boat> findBoatsByLowToHighFare() {
return boatService.findBoatsByLowToHighFare();
}
@GetMapping("/boats/hightolow")
public List<Boat> findBoatsByHighToLowFare() {
return boatService.findBoatsByHighToLowFare();
}
@GetMapping("/boats/class/{boatClass}")
public List<Boat> findBoatsByClass(@PathVariable String boatClass) {
return boatService.findBoatsByClass(boatClass);
}
}