ASSIGNMENT-5

1) Design web for hotel listing and hotel room booking

functionality using routing concept.

Ans =
server.js
const express = require('express');
const mongoose = require('mongoose');
const hotelRoutes = require('./routes/hotelRoutes');
const bookingRoutes = require('./routes/bookingRoutes');
const app = express();
const PORT = 3000;

app.use(express.json());

mongoose.connect('mongodb://localhost/hotel_booking', { useNewUrlParser: true,

useUnifiedTopology: true })
.then(() => console.log('MongoDB connected'))
.catch(err => console.error(err));
app.use('/api/hotels', hotelRoutes);
app.use('/api/bookings', bookingRoutes);

app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});

hotel.js
const mongoose = require('mongoose');

const hotelSchema = new mongoose.Schema({

name: String,
location: String,
rooms: Number,
 price: Number,
description: String,
imageUrl: String
});

module.exports = mongoose.model('Hotel', hotelSchema);

booking.js

const mongoose = require('mongoose');

const bookingSchema = new mongoose.Schema({

hotelId: { type: mongoose.Schema.Types.ObjectId, ref: 'Hotel' },
customerName: String,
checkInDate: Date,
checkOutDate: Date,
roomType: String,
status: { type: String, default: 'Pending' }
});

module.exports = mongoose.model('Booking', bookingSchema);

contorlleer.js
const Booking = require('../models/Booking');

exports.getBookings = async (req, res) => {

try {
const bookings = await Booking.find().populate('hotelId');
res.json(bookings);
} catch (err) {
res.status(500).json({ message: err.message });
}
};

exports.createBooking = async (req, res) => {

const booking = new Booking(req.body);
 try {
const newBooking = await booking.save();
res.status(201).json(newBooking);
} catch (err) {
res.status(400).json({ message: err.message });
}
};

app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { HotelListComponent } from
'./components/hotel-list/hotel-list.component';
import { HotelDetailsComponent } from
'./components/hotel-details/hotel-details.component';
import { BookingComponent } from './components/booking/booking.component';

@NgModule({
declarations: [
AppComponent,
HomeComponent,
HotelListComponent,
HotelDetailsComponent,
BookingComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule
 ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

hotellist.component.ts
import { Component, OnInit } from '@angular/core';
import { HotelService } from '../../services/hotel.service';

@Component({
selector: 'app-hotel-list',
templateUrl: './hotel-list.component.html'
})
export class HotelListComponent implements OnInit {
hotels: any[] = [];

constructor(private hotelService: HotelService) { }

ngOnInit(): void {
this.hotelService.getHotels().subscribe(data => {
this.hotels = data;
});
}
}

hotel-details.ts
<h2>{{ hotel?.name }}</h2>
<p>{{ hotel?.description }}</p>
<p>Location: {{ hotel?.location }}</p>
<p>Rooms: {{ hotel?.rooms }}</p>
<p>Price: ${{ hotel?.price }}</p>
<a routerLink="/booking" [queryParams]="{ hotelId: hotel?._id }">Book Now</a>

Booking.html
<h2>Book a Room</h2>
<form (submit)="bookRoom()">
<div>
<label>Customer Name:</label>
<input type="text" [(ngModel)]="booking.customerName" name="customerName"
required>
</div>
<div>
<label>Check-in Date:</label>
<input type="date" [(ngModel)]="booking.checkInDate" name="checkInDate"
required>
</div>
<div>
<label>Check-out Date:</label>
<input type="date" [(ngModel)]="booking.checkOutDate" name="checkOutDate"
required>
</div>
<div>
<label>Room Type:</label>
<input type="text" [(ngModel)]="booking.roomType" name="roomType" required>
</div>
<div>
<input type="hidden" [(ngModel)]="booking.hotelId" name="hotelId">
</div>
<button type="submit">Book</button>
</form>

hotel-servive.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class HotelService {
private apiUrl = 'http://localhost:3000/api/hotels';
 constructor(private http: HttpClient) { }

getHotels(): Observable<any[]> {
return this.http.get<any[]>(this.apiUrl);
}

getHotelById(id: string): Observable<any> {

return this.http.get<any>(`${this.apiUrl}/${id}`);
}
}

2) Design web page to implement page navigation for books listing using
routing concepts.
Ans =
book.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class BookService {
private apiUrl = 'http://localhost:3000/api/books'; // Assuming you have a
backend API

constructor(private http: HttpClient) { }

getBooks(): Observable<any[]> {
return this.http.get<any[]>(this.apiUrl);
}

getBookById(id: string): Observable<any> {

return this.http.get<any>(`${this.apiUrl}/${id}`);
}
}

app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BookListComponent } from
'./components/book-list/book-list.component';
import { BookDetailsComponent } from
'./components/book-details/book-details.component';

const routes: Routes = [

{ path: '', component: BookListComponent },
{ path: 'book/:id', component: BookDetailsComponent }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Book-list.html
<h2>Book List</h2>
<ul>
<li *ngFor="let book of books">
<a [routerLink]="['/book', book.id]">{{ book.title }}</a>
</li>
</ul>

bookdetails.components.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BookService } from '../../services/book.service';

@Component({
selector: 'app-book-details',
 templateUrl: './book-details.component.html'
})
export class BookDetailsComponent implements OnInit {
book: any;

constructor(private route: ActivatedRoute, private bookService: BookService) { }

ngOnInit(): void {
const id = this.route.snapshot.paramMap.get('id');
this.bookService.getBookById(id).subscribe(data => {
this.book = data;
});
}
}

app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { BookListComponent } from
'./components/book-list/book-list.component';
import { BookDetailsComponent } from
'./components/book-details/book-details.component';

@NgModule({
declarations: [
AppComponent,
BookListComponent,
BookDetailsComponent
],
imports: [
BrowserModule,
 AppRoutingModule,
HttpClientModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

App.component.html
<router-outlet></router-outlet>

Db.json
{
"books": [
{ "id": "1", "title": "Book One", "description": "Description of Book One", "author":
"Author One", "price": 10 },
{ "id": "2", "title": "Book Two", "description": "Description of Book Two", "author":
"Author Two", "price": 15 }
]
}