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 }
]
}
