Node.js & Express & MongoDB Leve1

1. Download node.js
2. Install expressjs
3. npm install -g nodemon
4. To show file
   res.sendFile("./views/home.html", {root: __dirname});

Download files

👉 npm i mongoose

const mongoose = require('mongoose');

mongoose.connect("YOUR LINK").then(() => {
  app.listen(port, () => {
    console.log(`http://localhost:${port}`);
  });
 })
 .catch((err) => {
   console.log(err);
 });

👉 mongodb.com

👉 Download files

1 Make a post request by using the <form> </form> element with action & method attributes

⚠ <input> must have name attribute

<form action="/all-articles" method="post">
    <label for="title">Article title:</label>
    <input type="text" id="title" name="title" required>
 
 
    <label for="summary">Article summary:</label>
    <input type="text" id="summary" name="summary" required>
 
 
    <label for="body">Article body:</label>
    <textarea id="body" name="body" required></textarea>
 
 
    <button class="create">Create</button>
</form>

2 in app.js :
app.use(express.urlencoded({ extended: true }));

3Defining schema & Creating a model

Create a folder called "models" and inside it create a file; for example articleSchema.js

inside this file :

 
const mongoose = require("mongoose");
const Schema = mongoose.Schema;
 
// define the Schema (the structure of the article)
const articleSchema = new Schema({
  title: String,
  summary: String,
  body: String,
});
 
 
// Create a model based on that schema
const Article = mongoose.model("Article", articleSchema);
 
 
// export the model
module.exports = Article;

4in app.js using .save()

  
const Article = require("./models/articleSchema");
 
app.post("/all-articles", (req, res) => {
  const article = new Article(req.body);

  article
    .save()
    .then( result => {
      res.redirect("/");
    })
    .catch( err => {
      console.log(err);
    });
});

ORUsing Model.create()

  
const Article = require("./models/articleSchema");
 
app.post("/all-articles", (req, res) => {
  Article
    .create(req.body)
    .then( result => {
      res.redirect("/");
    })
    .catch( err => {
      console.log(err);
    });
});

Download files

👉 npm i ejs

👉 in app.js file app.set('view engine', 'ejs')

👉 You should put your .ejs files in views folder

👉 install VS code extension : EJS Language Support

👉 res.render('index', { } )

⚠ إتعامل ويك أنك بداخل الــ views فولدر ⚠

👉 modelName.find()

المصدر

Download files

 
const path = require("path");
const livereload = require("livereload");
const liveReloadServer = livereload.createServer();
liveReloadServer.watch(path.join(__dirname, 'public'));
 
 
const connectLivereload = require("connect-livereload");
app.use(connectLivereload());
 
liveReloadServer.server.once("connection", () => {
  setTimeout(() => {
    liveReloadServer.refresh("/");
  }, 100);
});

"scripts": {
  "start": "node app.js",
  "watch": "nodemon --ext *"
}

Download files

Best Practices for Naming Files & Folders :

👉 - app.js

👉 - public (css files & images)

👉 - views (partials folder & .ejs files)

👉 - models (modelSchema.js)

👉 - routes

👉 - controllers

👉 - package.json

👉 - package-lock.json

Download files

ejs.co

Download files

Download files

Download files

المصدر

Download files

⚠ ترتيب الأكواد مهم جداً فى ملف app.js ⚠

1in Schema file:

2npm i moment& docs

Download files

1npm install method-override

2in app.js

3in ejs file:

<form action="/edit/<%= item._id %>?_method=DELETE" method="post">
    <button>Delete</button>
</form>

4Create a delete request in app.js :

 
app.delete("/edit/:id", (req, res) => {
  User.deleteOne({ _id: req.params.id }).then((result) => {
  res.redirect("/");
  });
}); 

Download files

Download files

⚠ نفس خطوات حذف الdata مع بعض التعديلات : ⚠

1?_method=PUT

<form action="/edit/<%= item._id %>?_method=PUT" method="post">
    <button>Update</button>
</form>

2usingModel.findByIdAndUpdate()OR Model.updateOne()

 
app.put("/edit/:id", (req, res) => {
  User.updateOne({_id: req.params.id}, req.body)
    .then(() => {
      res.redirect("/");
  });
}); 

المصدر

Download files

👉 Age = 24 User.find({ age: 24 })

👉 Age > 24 User.find({ age: {$gt: 24} })

👉 Age >= 24 User.find({ age: {$gte: 24} })

👉$or User.find({ $or: [{fireName: "ali"}, {lastName: "ali"}] })

المصدر

Download files

Download files

Download files

MVC :هى طريقة لتنظيم وترتيب ملفات المشروع لكى تُسهل عملية تعديل المشروع فى المُستقبل وتقسيم المشروع الى أجزاء صغيرة وبالتالى التحكم فى كل جزء من أجزاء الموقع بسهولة.

1in app.js : 👉 const port = process.env.PORT || 3001;

2in package.json :

 
"scripts": {
  "start": "node app.js",
  "watch": "nodemon --ext *"
},

3 render.com 👉 Build Command:npm install

👉 YouTube video: https://www.youtube.com