web-dev-open · alwaysahad · Jan 20, 2024 · Jan 20, 2024
diff --git a/db/index.js b/db/index.js
@@ -1,6 +1,8 @@
 // ℹ️ package responsible to make the connection with mongodb
 // https://www.npmjs.com/package/mongoose
 const mongoose = require("mongoose");
+const Movie = require("../models/Movie.model");
+const MovieData = require("../seeds/movies.seed")
 
 // ℹ️ Sets the MongoDB URI for our app to have access to it.
 // If no env has been set, we dynamically set it to whatever the folder name was upon the creation of the app
@@ -15,3 +17,11 @@ mongoose
   .catch((err) => {
     console.error("Error connecting to mongo: ", err);
   });
+
+// Movie.create(MovieData)
+// .then(MoviesFromDb=>{
+//  MoviesFromDb.forEach(movie=>{
+//   console.log(`Movie Name : ${movie.title}`)
+//  })
+// })
+// .catch(err=>console.log("error ",err))
diff --git a/models/Movie.model.js b/models/Movie.model.js
@@ -0,0 +1,16 @@
+const {Schema,model, } = require('mongoose');
+
+const MovieSchema = new Schema({
+    title:String,
+    director:String,
+    stars:[String],
+    image:String,
+    description:String,
+    showTimes:[String]
+})
+
+
+const Movie = model('Movie',MovieSchema);
+
+
+module.exports = Movie;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "hbs": "^4.1.1",
-    "mongoose": "^6.1.2",
+    "mongoose": "^6.12.5",
     "morgan": "^1.10.0",
     "serve-favicon": "^2.5.0"
   },

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -1,8 +1,34 @@
-body {
-  padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+body{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.bg{
+  width: 100vw;
+  height: 100vh;
+  background: url('/images/cinema.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;
+}
+
+.text {
+  position: absolute;
+  right: 10%;
+  top: 25%;
+}
+
+.text h1 {
+  font-size: 5rem;
+  color: antiquewhite;
 }
 
-a {
-  color: #00B7FF;
+.text a{
+  text-decoration: none;
+  padding: 1rem;
+  font-size: 2rem;
+  color: black;
+  background-color: aliceblue;
+  font-family: sans-serif;
+  border-radius: 1rem;
 }
diff --git a/routes/index.js b/routes/index.js
@@ -1,7 +1,32 @@
 const express = require('express');
 const router = express.Router();
+const Movies = require("../models/Movie.model")
 
 /* GET home page */
 router.get('/', (req, res, next) => res.render('index'));
 
-module.exports = router;
+router.get('/allmovies',(req,res)=>{
+
+    Movies.find()
+    .then(movieFromDB=>{
+        res.render('movie/movies-list.hbs',{movies:movieFromDB})
+    })
+    .catch(err=>console.log("error ",err))
+
+})
+
+
+router.get('/movie/:movieId', (req, res, next) => {
+    const { movieId } = req.params;
+    console.log("Movie id ",movieId)
+
+    Movies.findById(movieId)
+    .then(movie=>res.render("movie/details.hbs",{movie}))
+    .catch(err=>next(err))
+
+});
+
+
+
+
+module.exports = router;
diff --git a/seeds/movies.seed.js b/seeds/movies.seed.js
@@ -86,4 +86,7 @@ const movies = [
 
 
 
-// ... your code here
+// ... your code here
+
+
+module.exports   =  movies
diff --git a/views/index.hbs b/views/index.hbs
@@ -1,2 +1,20 @@
-<h1>{{title}}</h1>
-<p>Welcome to {{title}}</p>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Homepage</title>
+    <link rel="stylesheet" href="/stylesheets/style.css">
+</head>
+<body>
+    <div class="bg">
+<div class="text">
+        <h1>Cinema <br>
+        ROOT LEARN</h1>
+        <a href="/allmovies">Movies</a>
+       </div>
+    </div>
+
+
+</body>
+</html>
diff --git a/views/movie/details.hbs b/views/movie/details.hbs
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{movie.title}} Details</title>
+    <!-- Include Bootstrap CSS -->
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        /* Add custom styles if needed */
+        body {
+            padding: 20px; /* Adjust as needed */
+        }
+    </style>
+</head>
+<body>
+
+  <h1 class="mt-4">{{movie.title}} Details</h1>
+  <img src="{{movie.image}}" alt="{{movie.title}}" class="img-fluid mt-3">
+
+  <p class="mt-3"><strong>Director:</strong> {{movie.director}}</p>
+  <ul>
+    {{#each movie.stars}}
+      <li>{{this}}</li>
+    {{/each}}
+  </ul>
+  <p><strong>Description:</strong> {{movie.description}}</p>
+
+  <h2 class="mt-4">Showtimes</h2>
+   <div class="showtime">
+            {{#each movie.showtimes}}
+            <span>{{this}} |</span>
+            {{/each }}
+        </div>
+</ul>
+
+  <a href="/allmovies" class="btn btn-primary mt-3">Back to Movies</a>
+
+  <!-- Include Bootstrap JS and Popper.js if needed -->
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</html>
diff --git a/views/movie/movies-list.hbs b/views/movie/movies-list.hbs
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Movies</title>
+    <!-- Include Bootstrap CSS -->
+   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <style>
+        /* Add custom styles if needed */
+    </style>
+</head>
+<body>
+
+  <h1>Click on the movies to check showtimes</h1>
+  <a href="/">Back</a>
+  <div class="container">
+    <div class="row">
+
+    {{#each movies}}
+      <div class="card col-md-3 mb-5  " >
+        <h3>{{title}}</h3>
+        <a href="/movie/{{this._id}}"><img src="{{this.image}}" alt="{{title}}"  class="img-fluid m-2 h-100 p-3"/></a>
+        <a href="/movie/{{_id}}" class="btn btn-primary mt-2">See More</a>
+      </div>
+    {{/each}}
+  </div>
+    </div>
+
+  <!-- Include Bootstrap JS and Popper.js if needed -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+</body>
+</html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -86,4 +86,7 @@ const movies = [



		// ... your code here
		// ... your code here


		module.exports = movies