cinema MONGODB ROOT practice

app.js

@@ -15,6 +15,12 @@ const hbs = require('hbs');
 
 const app = express();
 
+
+
+//use styles
+app.use(express.static('public'));
+
+
 // ℹ️ This function is getting exported from the config folder. It runs most middlewares
 require('./config')(app);
 
@@ -28,6 +34,11 @@ app.locals.title = `${capitalized(projectName)}- Generated with Ironlauncher`;
 const index = require('./routes/index');
 app.use('/', index);
 
+// Import the movies route
+const movies = require('./routes/movies');
+app.use('/', movies);
+
+
 // ❗ To handle errors. Routes that don't exist or errors that you handle in specific routes
 require('./error-handling')(app);
 

db/index.js

@@ -5,7 +5,8 @@ const mongoose = require("mongoose");
 // ℹ️ 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
 
-const MONGO_URI = process.env.MONGODB_URI || "mongodb://localhost/lab-express-cinema";
+const MONGO_URI = process.env.MONGODB_URI || "mongodb://127.0.0.1:27017/lab-express-cinema";
+
 
 mongoose
   .connect(MONGO_URI)
@@ -15,3 +16,5 @@ mongoose
   .catch((err) => {
     console.error("Error connecting to mongo: ", err);
   });
+
+

models/Movie.model.js

@@ -0,0 +1,17 @@
+// models/Movie.model.js
+const mongoose = require('mongoose');
+const Schema = mongoose.Schema;
+
+const movieSchema = new Schema({
+  title: String,
+  id: String,
+  director: String,
+  stars: [String],
+  image: String,
+  description: String,
+  showtimes: [String]
+});
+
+const Movie = mongoose.model('Movie', movieSchema);
+
+module.exports = Movie;

public/stylesheets/style.css

@@ -1,8 +1,123 @@
 body {
-  padding: 50px;
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
 }
 
 a {
   color: #00B7FF;
 }
+
+.container-index {
+  margin: 0;
+  background-image: url("../images/cinema.jpg");
+  background-repeat: no-repeat;
+  height: 140vh;
+  background-size: cover;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+align-items: flex-end;
+text-align: left;
+}
+
+.group{
+  margin-top: 10rem ;
+}
+
+.group> h1{
+margin-right: 10rem;
+  color: white;
+  font-size: 6rem;
+  margin-bottom: 1rem;
+  font-weight: bolder;
+
+}
+.group> .btn-index{
+  background-color: white;
+  color: black;
+  padding: 10px 40px;
+  font-size: 1rem;
+  border-radius:30px ;
+  font-weight: bolder;
+  margin-top: 2rem;
+}
+
+.group-movies{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+margin: 2rem 0;
+}
+
+.movie-card{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  padding: 20px 0;}
+
+.movie-card>h2{
+  font-size: 1.3rem;
+  font-weight: bold;
+}
+
+.movie-img {
+  max-height: 300px;
+  object-fit: cover;
+  width: 100%;
+}
+
+.movie-details {
+  margin-bottom: 30px;
+}
+
+.btn {
+  margin-top: 10px;
+}
+
+.group-details{
+  display: flex;
+  justify-content: center;
+  align-items: left;
+  align-items: flex-start;
+ margin: 1rem;
+ padding: 2rem;
+ width: 70rem;
+ background-color: rgba(128, 128, 128, 0.162);
+ box-shadow: 2px 2px  10px 2px gray;
+}
+.group-details>img{
+  width: 20rem;
+  height: auto;
+}
+.text-details{
+padding: 0 0 2rem 2rem;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+.text-details>*{
+  padding: 0.7rem;
+}
+.text-details>p{
+  width: 30rem;
+  font-size: larger;
+}
+.text-details>h5{
+  margin-bottom: 1rem;
+}
+
+.btndetails{
+  margin: 2rem 0 0 0.7rem;
+  padding: 10px;
+  background-color: black;
+  color: white;
+  font-size: 1.2rem;
+}
+
+.btndetails:hover {
+  text-decoration: none;
+  background-color: white;
+  color: black;
+  box-shadow: 2px 2px 10px 2px gray;
+}

routes/movies.js

@@ -0,0 +1,31 @@
+const express = require('express');
+const router = express.Router();
+const Movie = require('../models/Movie.model'); 
+
+// List all movies
+router.get('/movies', (req, res, next) => {
+  Movie.find()
+    .then(movies => {
+      res.render('movies', { movies });
+    })
+    .catch(err => next(err));
+});
+
+// View movie details
+router.get('/movies/:id', (req, res, next) => {
+  const { id } = req.params;  // Extract ID from URL
+  console.log('Fetching movie with ID:', id); 
+  Movie.findById(id)          // Searching for the movie by ID
+    .then(movie => {
+      if (!movie) {
+        return res.status(404).render('not-found'); // Render not found if movie doesn't exist
+      }
+      res.render('movieDetails', { movie }); // Render movie details
+    })
+    .catch(err => {
+      console.error('Error finding movie:', err);
+      next(err); 
+    });
+});
+
+module.exports = router;

seeds/movies.seed.js

@@ -1,3 +1,10 @@
+// seeds/movies.seed.js
+const mongoose = require('mongoose');
+const Movie = require('../models/Movie.model');
+
+const MONGODB_URI = 'mongodb://127.0.0.1:27017/lab-express-cinema';
+
+
 const movies = [
     {
       title: "A Wrinkle in Time",
@@ -81,9 +88,16 @@ const movies = [
     }
   ];
 
-
-// Add here the script that will be run to actually seed the database (feel free to refer to the previous lesson)
-
-
-
-// ... your code here
+   mongoose
+  .connect(MONGODB_URI)
+  .then(() => {
+    console.log('Connected to MongoDB');
+    return Movie.insertMany(movies);
+  })
+  .then((insertedMovies) => {
+    console.log(`Inserted ${insertedMovies.length} movies`);
+    mongoose.connection.close();
+  })
+  .catch((err) => {
+    console.error('Error connecting to MongoDB', err);
+  });

views/index.hbs

@@ -1,2 +1,19 @@
-<h1>{{title}}</h1>
-<p>Welcome to {{title}}</p>
+<!-- views/index.hbs -->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Movies Home</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/stylesheets/style.css">
+
+</head>
+<body>
+  <div class="container-index">
+    <div class="group">
+   <h1>Cinema<br /> Root Learn</h1>
+    <a href="/movies" class="btn-index">CHECK MOVIES</a>
+    </div>
+
+  </div>
+</body>
+</html>

views/layout.hbs

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>{{title}}</title>
-  <link rel="stylesheet" href="/stylesheets/style.css" />
+    <link rel="stylesheet" href="/stylesheets/style.css">
 </head>
 <body>
 

views/movieDetails.hbs

@@ -0,0 +1,27 @@
+<!-- views/movieDetails.hbs -->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>{{movie.title}}</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/stylesheets/style.css">
+
+</head>
+<body>
+  <div class="container">
+    <div class="group-details">
+    <img src="{{movie.image}}" class="img-fluid" alt="{{movie.title}}">
+    <div class="text-details">
+ <h1>{{movie.title}}</h1>
+    <h3>Directed by: {{movie.director}}</h3>
+    <h4>Stars: {{movie.stars}}</h4>
+    <p>{{movie.description}}</p>
+    <h5>Showtimes: {{movie.showtimes}}</h5>
+    <a href="/movies" class="btndetails ">Back to movies</a>
+    </div>
+
+    </div>
+
+  </div>
+</body>
+</html>

views/movies.hbs

@@ -0,0 +1,26 @@
+<!-- views/movies.hbs -->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Movies List</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/stylesheets/style.css">
+
+</head>
+<body>
+  <div class="container">
+    <div class="group-movies">
+    <div class="row">
+      {{#each movies}}
+        <div class="movie-card col-md-4">
+          <h2>{{this.title}}</h2>
+          <img src="{{this.image}}" class="img-fluid" alt="{{this.title}}">
+          <a href="/movies/{{this._id}}" class="btn btn-info">See More</a>
+        </div>
+      {{/each}}
+    </div>
+    </div>
+
+  </div>
+</body>
+</html>