Description
*Phase 1 – Analysis and Design:*
1. *Problem Statement and Business Logic:*
– Define the problem statement, which is to create an online hotel booking system.
– Specify the business logic, including user registration, room reservation, payment processing, and user feedback.
2. *Operations (CRUD):*
– Create, Read, Update, and Delete operations.
– Create, Update, and Delete for user profiles, hotel room listings, reservations, and customer feedback.
3. *Required Tables and Relationships:*
– Identify database tables such as Users, Hotels, Rooms, Reservations, and Feedback.
– Establish relationships, like a one-to-many relationship between Hotels and Rooms, and between Users and Reservations.
4. *Technologies:*
– Backend: Use a technology stack like Node.js with Express for server-side development, and a relational database system (e.g., MySQL or PostgreSQL) for data storage.
– Frontend: Employ a JavaScript framework like React or Angular for the user interface.
– Database: Utilize an Object-Relational Mapping (ORM) tool like Sequelize to interact with the database.
– Payment Processing: Integrate a payment gateway like Stripe or PayPal.
5. *Sequence Diagrams:*
– Create sequence diagrams to illustrate how different user actions, like making a reservation or leaving feedback, interact with the system.
*Phase 2 – Creating Required Tables:*
– Implement the database schema by creating tables for Users, Hotels, Rooms, Reservations, Feedback, etc.
– Populate these tables with test data to simulate real-world usage.
*Phase 3 – Developing Backend Application:*
– Develop the backend application, including routes and controllers, to handle user registration, room listing, reservation, payment processing, and feedback submission.
– Implement authentication and authorization to secure user data.
*Phase 4 – Writing JUnit Test Cases:*
– Create JUnit test cases to ensure the backend functions correctly. Test key functionalities, such as user registration, reservation creation, and payment processing.
*Phase 5 – Developing Frontend Application:*
– Develop the user interface for the hotel booking system using a frontend framework.
– Create screens for users to browse hotels, select rooms, make reservations, and provide feedback.
*Phase 6 – Establishing Communication:*
– Set up APIs for communication between the frontend and backend. These APIs will allow the frontend to retrieve hotel listings, manage reservations, and submit user feedback.
*Phase 7 – Writing Test Cases for Frontend Application (using Jest, for example):*
– Write test cases for the frontend application to ensure that user interfaces are functioning correctly.
– Test various user interactions, such as searching for hotels, making reservations, and viewing feedback forms.
Throughout the development process, it’s important to iterate and refine your application based on user feedback and evolving requirements. Collaboration and communication among team members are key to successfully implementing the hotel booking system.
Unformatted Attachment Preview
Any End to End applica on has two layers
1. Front Applica on
2. Back-end applica on
Applica on Name : Maintaining the Employee Details
Developing the back end applica on
Create table in MySQL
CREATE TABLE `employee10` (
`id` int NOT NULL AUTO_INCREMENT,
`first_name` varchar(10) NOT NULL,
`last_name` varchar(20) NOT NULL,
`email` varchar(20) NOT NULL,
PRIMARY KEY (`id`)
)
Sample Data in Table
Steps to develop backend applica on using Spring boot with MySQL Database
Open Eclipse
File New Spring Starter Project
Click On Next
List of dependencies
1. Spring boot starter data JPA
2. Spring boot starter web
3. My SQL Connector
Open POM.xml replace the existed MySQL dependency with the below dependency
mysql
mysql-connector-java
8.0.33
Applica on.proper es
server.port=8081
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/javaonline
spring.datasource.username=root
spring.datasource.password=root
spring.jpa.show-sql=true
spring.jpa.database-platform=org.hibernate.dialect.MySQL8Dialect
spring.jpa.hibernate.ddl-auto=update
We are using Spring Data JPA to create a repository
EmployeeRepository.java
import org.springframework.data.jpa.repository.JpaRepository;
public interface EmployeeRepository extends JpaRepository {
// all crud database methods
}
Employee En ty – this is replica of the table defini on available in MySQL
Various annota ons used in the below java are:
@En ty this is an en ty class ( replica of the table)
@Table used to provide the name of the table in MySQL
@Id says the this property is referring the primary key column in database
@GeneratedValue explains that the value to this property should be auto generated
@Column used to map the property name with the column name in the table.
package com.online.e2e.entity;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
@Table(name = “employee10”)
@Entity
public class Employee {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private long id;
@Column(name = “first_name”)
private String firstName;
@Column(name = “last_name”)
private String lastName;
@Column(name = “email”)
private String email;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getFirstName() {
return firstName;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
@Override
public String toString() {
return “Employee [id=” + id + “, firstName=” + firstName + “,
lastName=” + lastName + “, email=” + email + “]”;
}
}
Employee DTO – Data Transfer Object – used to transfer the data from one layer to another layer
package com.online.e2e.dto;
public class EmployeeDto {
private long id;
private String firstName;
private String lastName;
private String email;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getFirstName() {
return firstName;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
@Override
public String toString() {
return “Employee [id=” + id + “, firstName=” + firstName + “,
lastName=” + lastName + “, email=” + email + “]”;
}
}
EmployeeService
package com.online.e2e.service;
import java.util.List;
import com.online.e2e.dto.EmployeeDto;
public interface EmployeeService {
List getAllEmployees();
EmployeeDto createEmployee(EmployeeDto employee);
EmployeeDto getEmployeeById(Long employeeId);
EmployeeDto updateEmployee(Long employeeId, EmployeeDto employeeDto);
void deleteEmployee(Long employeeId);
}
EmployeeServiceImpl contains the implementa on(Business Logic) to all the methods defined in
Employee Service interface.
package com.online.e2e.service;
import java.util.List;
import java.util.stream.Collectors;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.online.e2e.dto.EmployeeDto;
import com.online.e2e.entity.Employee;
import com.online.e2e.exception.ResourceNotFoundException;
import com.online.e2e.repository.EmployeeRepository;
import com.online.e2e.util.EmployeeMapper;
@Service
public class EmployeeServiceImpl implements EmployeeService {
@Autowired
private EmployeeRepository employeeRepository;
@Override
public List getAllEmployees() {
List employees = employeeRepository.findAll();
List employeeDtos = employees.stream()
.map((employee) -> EmployeeMapper.mapToEmployeeDto(employee))
.collect(Collectors.toList());
return employeeDtos;
}
@Override
public EmployeeDto createEmployee(EmployeeDto employeeDto) {
Employee employee = EmployeeMapper.mapToEmployee(employeeDto);
Employee savedEmployee = employeeRepository.save(employee);
return EmployeeMapper.mapToEmployeeDto(savedEmployee);
}
@Override
public EmployeeDto getEmployeeById(Long employeeId) {
Employee employee = employeeRepository.findById(employeeId)
.orElseThrow(() ->
new ResourceNotFoundException(“Employee not exist with
id: ” + employeeId));
EmployeeDto employeeDto = EmployeeMapper.mapToEmployeeDto(employee);
return employeeDto;
}
@Override
public EmployeeDto updateEmployee(Long employeeId, EmployeeDto
employeeDto) {
Employee existingEmployee =
employeeRepository.findById(employeeId).get();
existingEmployee.setFirstName(employeeDto.getFirstName());
existingEmployee.setLastName(employeeDto.getLastName());
existingEmployee.setEmail(employeeDto.getEmail());
employeeRepository.save(existingEmployee);
return EmployeeMapper.mapToEmployeeDto(existingEmployee);
}
public void deleteEmployee(Long employeeId) {
employeeRepository.deleteById(employeeId);
}
}
EmployeeController – entry point to any rest applica on
@CrossOrigin explain to the spring container that allow the request from any port number
@RequestMapping used to define the URL that explains about when this method should execute
package com.online.e2e.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.RestController;
import com.online.e2e.service.EmployeeService;
import com.online.e2e.dto.EmployeeDto;
@CrossOrigin(“*”)
@RestController
@RequestMapping(“/api/v1/employees”)
public class EmployeeController {
@Autowired
private EmployeeService employeeService;
@GetMapping
public ResponseEntity getAllEmployees(){
List employees = employeeService.getAllEmployees();
return ResponseEntity.ok(employees);
}
// build create employee REST API
@PostMapping
public ResponseEntity createEmployee(@RequestBody EmployeeDto
employee) {
EmployeeDto employeeDto = employeeService.createEmployee(employee);
return new ResponseEntity(employeeDto, HttpStatus.CREATED);
}
// build get employee by id REST API
@GetMapping(“{id}”)
public ResponseEntity getEmployeeById(@PathVariable(“id”)
Long employeeId){
EmployeeDto employee = employeeService.getEmployeeById(employeeId);
return ResponseEntity.ok(employee);
}
// build update employee REST API
@PutMapping(“{id}”)
public ResponseEntity updateEmployee(@PathVariable(“id”) Long
employeeId,
@RequestBody EmployeeDto
employeeDetails) {
EmployeeDto updateEmployee =
employeeService.updateEmployee(employeeId, employeeDetails);
return ResponseEntity.ok(updateEmployee);
}
// build delete employee REST API
@DeleteMapping(“{id}”)
public ResponseEntity deleteEmployee(@PathVariable(“id”) Long
employeeId){
employeeService.deleteEmployee(employeeId);
return ResponseEntity.ok(“Employee deleted successfully!”);
}
}
EmployeeMapper.java
package com.online.e2e.util;
import com.online.e2e.dto.EmployeeDto;
import com.online.e2e.entity.Employee;
public class EmployeeMapper {
public static EmployeeDto mapToEmployeeDto(Employee e) {
EmployeeDto dto = new EmployeeDto();
dto.setId(e.getId());
dto.setFirstName(e.getFirstName());
dto.setLastName(e.getLastName());
dto.setEmail(e.getEmail());
return dto;
}
public static Employee mapToEmployee(EmployeeDto e) {
Employee dto = new Employee();
dto.setId(e.getId());
dto.setFirstName(e.getFirstName());
dto.setLastName(e.getLastName());
dto.setEmail(e.getEmail());
return dto;
}
}
Front End using React, Axios, BootStrap
Technologies or dependencies:
1.
2.
3.
4.
React JS
Bootstrap
Rou ng
Axios
Steps to create a front end applica on:
Step 1: npx create-react-app ems-frontend
Step 2: npm install bootstrap –save
Step 3: import ‘bootstrap/dist/css/bootstrap.min.css’;
Step 4: npm add axios –save
Step 5: npm install react-router-dom –save
Create React Applica on
Install bootstrap dependency
Add bootstrap minified css file to index.js
Install axios dependency
Install react router dom dependency
Open the Project in Visual studio code and the below code in App.js
App.js
import ‘./App.css’;
import {BrowserRouter, Routes, Route } from ‘react-router-dom’;
import ListEmployeeComponent from ‘./component/ListEmployeeComponent’;
import EmployeeComponent from ‘./component/EmployeeComponent’;
function App() {
return (
);
}
export default App;
create a folder called service and then create a file called EmployeeService.js and copy the below
code.
EmployeeService.js
import axios from ‘axios’
const EMPLOYEE_BASE_REST_API_URL = ‘http://localhost:8080/api/v1/employees’;
export const listEmployees = () => {
return axios.get(EMPLOYEE_BASE_REST_API_URL)
};
export const createEmployee = (employee) => {
return axios.post(EMPLOYEE_BASE_REST_API_URL, employee)
}
export const getEmployeeById = (employeeId) => {
return axios.get(EMPLOYEE_BASE_REST_API_URL + ‘/’ + employeeId);
}
export const updateEmployee = (employeeId, employee) => {
return axios.put(EMPLOYEE_BASE_REST_API_URL + ‘/’ +employeeId, employee);
}
export const deleteEmployee = (employeeId) => {
return axios.delete(EMPLOYEE_BASE_REST_API_URL + ‘/’ + employeeId);
}
Create a folder called component and create a file called EmployeeComponent.js and copy the below
code.
EmployeeComponent.js
This component is responsible for performing below func onality
Add new employee
Update the existed employee
import React, {useState, useEffect} from ‘react’
import {useNavigate, useParams } from ‘react-router-dom’;
import { updateEmployee, createEmployee, getEmployeeById} from
‘../service/EmployeeService’;
const EmployeeComponent = () => {
const [firstName, setFirstName] = useState(”)
const [lastName, setLastName] = useState(”)
const [email, setEmail] = useState(”)
const navigate = useNavigate();
const {id} = useParams();
const saveOrUpdateEmployee = (e) => {
e.preventDefault();
const employee = {firstName, lastName, email}
console.log(employee);
if(id){
updateEmployee(id, employee).then((response) => {
navigate(‘/employees’)
}).catch(error => {
console.log(error)
})
}else{
createEmployee(employee).then((response) =>{
console.log(response.data)
navigate(‘/employees’);
}).catch(error => {
console.log(error)
})
}
}
useEffect(() => {
if(id){
getEmployeeById(id).then((response) =>{
setFirstName(response.data.firstName)
setLastName(response.data.lastName)
setEmail(response.data.email)
}).catch(error => {
console.log(error)
})
}
}, [id])
const pageTitle = () => {
if(id){
return Update Employee
}else{
return Add Employee
}
}
return (
{
pageTitle()
}
First
Name :
setFirstName(e.target.value)}
>
Last Name
:
setLastName(e.target.value)}
>
Email Id
:
setEmail(e.target.value)}
>
saveOrUpdateEmployee(e)} >Submit
{/* Cancel */}
)
}
export default EmployeeComponent
Create a file called ListEmployeeComponent.js under component folder and copy the below code.
ListEmployeeComponent.js
import React, {useState, useEffect} from ‘react’
import { useNavigate } from ‘react-router-dom’
import {listEmployees, deleteEmployee} from ‘../service/EmployeeService’
const ListEmployeeComponent = () => {
const [employees, setEmployees] = useState([])
const navigate = useNavigate()
useEffect(() => {
getAllEmployees();
}, [])
const getAllEmployees = () => {
listEmployees().then((response) => {
setEmployees(response.data)
console.log(response.data);
}).catch(error =>{
console.log(error);
})
}
const removeEmployee = (employeeId) => {
deleteEmployee(employeeId).then((response) =>{
getAllEmployees();
}).catch(error =>{
console.log(error);
})
}
function addNewEmployee() {
navigate(‘/add-employee’)
}
const updateEmployee = (id) => {
navigate(`/edit-employee/${id}`)
}
return (
List Employees
{/* Add Employee */}
Add Employee
{/* */}
Employee Id
Employee First Name
Employee Last Name
Employee Email Id
Actions
{
employees.map(
employee =>
{employee.id}
{employee.firstName}
{employee.lastName}
{employee.email}
updateEmployee(employee.id)} >Update
removeEmployee(employee.id)}
style = {{marginLeft:”10px”}}>
Delete
)
}
)
}
export default ListEmployeeComponent
Steps to run the applica on:
Step 1: Run the spring boot applica on in 8081 port number
Right click on Applica on Run As Java Applica on
Step 2: Run the react applica on runs in default port number 3000
Open Terminal in Visual studio code using Ctrl + ~ and start the react applica on using npm start
Please find the below screens shows output – Home screen
Click On AddEmployee Bu on
Click on submit bu on
We are able to see the new record in the list
Click on Update bu on
Change some value and click on submit bu on
We are able to see the updated value in the list
Click on Delete bu on
we won’t get the removed record in the list
Purchase answer to see full
attachment
