Prepara el entorno

Node.js

Lo primero que debes hacer para iniciar con Node.js es descargar e Instalarlo en tu computadora, en este caso tenemos Windows 8.1

Consulta cómo Iniciar con Node.js

MongoDB

¿Qué es MongoDB?

MongoDB es un gestor de Bases de Datos como MySQL, MSSQL Server pero este gestor es para Bases de Datos no relacionales, las cuales operan con documentos y colecciones en lugar de tablas y registros como tradicionalmente lo hacen MySQL o MSSQL Server por ejemplo.

Su estructura de datos es similar a JSON lo que hace que la integración con las aplicaciones sea mucho más rápida, aunque es importante evaluar el tipo de aplicaciones en las cuales se puede utilizar, ya que esto sacrifica la estructuración e integridad de los datos de un sistema relacional.

MongoDB se puede obtener de forma gratuita bajo la licencia pública general

Lo siguiente es instalar MongoDB, en nuestro caso tenemos Windows 8.1 y la versión compatible es la versión MongoDB 4.2, debemos ingresar al sitio oficial y descargar el instalador.

Crear el CRUD

En informática, CRUD es el acrónimo de "Crear, Leer, Actualizar y Borrar", que se usa para referirse a las funciones básicas en bases de datos en un software.

Lo primero que haremos es instalar los paquetes de express, morgan y mongoose, este último para poder usar una Base de Datos de MongoDB. Abre una terminal y ejecuta el siguiente comando

npm install express, morgan, mongoose

1. Creando el servidor en Node.js usando Express.js

Crea el archivo llamado app.js en el directorio principal, este tendrá todas las configuraciones del servidor de Node.js

app.js


const express = require('express');
const path = require('path');
const engine = require('ejs-blocks');
const app = express();
const morgan = require('morgan');
const mongoose = require('mongoose');

//conectando la base de datos
mongoose.connect('mongodb://localhost/mongodb')
.then(db => console.log('Db Connected'))
.catch(err => console.log(err));

//importing routes
const indexRoutes = require('./routes/index');


//settings
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.engine('ejs', engine);
app.set('view engine', 'ejs');

//middlewares   
app.use(morgan('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));


//routes
app.use('/', indexRoutes);
app.use(express.urlencoded({extended: false}));


//starting the server

app.listen(app.get('port'), () => {
    console.log(`Server on port ${app.get('port')}`);
})

2. Crea los siguientes directorios en tu proyecto: models, views y routes

3. Crea la base de datos en MongoDB

Puedes crear una base de datos usando la terminal con los comandos de Mongo pero también podemos hacerlo colocando la conexión en el archivo app.js. La sección de código


//conectando la base de datos
mongoose.connect('mongodb://localhost/mongodb')
.then(db => console.log('Db Connected'))
.catch(err => console.log(err));

en el archivo app.js de una vez también crea la base de datos, nuestra base de datos se llama en este caso mongodb

Crear una tabla

Para crear una tabla (pero en este caso es un documento) podemos hacerlo creando un archivo de JavaScript donde se defina su estructura, para este ejemplo dentro del directorio models vamos a crear el archivo llamado task.js

task.js



const mongoose = require('mongoose');

const Schema = mongoose.Schema;

const TaskSchema = new Schema({
    title: String,
    description: String,
    status: {
        type: Boolean,
        default : false
    }
})

//Se puede decir que comparando con una base de datos relacional tenemos una tabla llamada task con los campos title, description y status
module.exports = mongoose.model('task', TaskSchema);

Aunque MongoDB no trabaja con tablas sino que con documentos y archivos se puede decir que el ejemplo anterior es como haber creado una Tabla llamada task y que esta contiene los campos title de tipo string, description de tipo string y status de tipo booleano con un valor por defecto de false.

4. Creando las vistas con EJS

EJS es uno de los varios motores de plantilla para JavaScript, una plantilla te permite trabajar basado en un diseño principal, permitiendo crear nuevos archivos bajo el mismo diseño, solo cambiando su contenido principal. Sitio oficial de EJS https://ejs.co/. Es muy sencillo de utilizar y te ahorra mucho trabajo.

Con la configuracion

app.engine('ejs', engine);
app.set('view engine', 'ejs');

Estamos diciendo que el motor de plantillas para este proyecto es de EJS. Si has trabajado con el framework Laravel de PHP la función de esta plantilla es similiar a la de las plantillas Blade donde creas un layout principal del cual dependerán las demás vistas.

Vamos a crear la vista principal, el archivo layout.ejs

layout.ejs



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD Node.js MongoDB</title>
    <!--bootstrap CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar navbar-dark bg-dark mb-4">
        <a href="/" class="navbar-brand">Task (Node.js MongoDB)</a>
    </nav>

    <div class="container">
        <%- body %>
    </div>
    
</body>
</html>

La sección

<%- body %>

indica que ese contenido va a cambiar dentro del diseño

Dentro del directorio Views tambien vamos a crear los siguientes archivos

index.ejs


<% layout('layout') -%>

<div class="container">
  <div class="row">
    
    <div class="col-md-5">
      <div class="card">
        <div class="card-body">
          <form action="/add" method="POST">
            <div class="form-group">
              <input
                type="text"
                placeholder="Insert a Title"
                class="form-control"
                name="title"
              />
            </div>
            <br />
            <div class="form-group">
              <textarea
                cols="80"
                rows="3"
                class="form-control"
                placeholder="Insert a Description"
                name="description"
              ></textarea>
            </div>
            <br />
            <button type="submit" class="btn btn-primary">Add</button>
          </form>
        </div>
      </div>
    </div>

    
    <div class="col-md-7">
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>No</th>
            <th>Title</th>
            <th>Description</th>
            <th>Operations</th>
          </tr>
        </thead>
        <tbody>
          <% for(var i = 0; i < tasks.length; i++){ %>
          <tr>
            <td><%= i + 1 %></td>
            <td><%= tasks[i].title %></td>
            <td><%= tasks[i].description %></td>
            <td><a href="/done/<%= tasks[i]._id %>" class="btn <%= tasks[i].status ? 'btn-success' : 'btn-dark' %>">Done</a>
                <a href="/delete/<%= tasks[i]._id %>" class="btn btn-danger">Delete</a>
                <a href="/edit/<%= tasks[i]._id %>" class="btn btn-info">Edit</a></td>
          </tr>
          <% } %>
        </tbody>
      </table>
    </div>
  </div>
</div>

En la primera linea de este arhivo aparece <% layout('layout') -%> que indica el nombre del dise;o que se est[a utilizando, esta vista recibe los datos mediante la variable llamada tasks

edit.ejs



<% layout('layout') -%>
<div class="container">
    <div class="row">
        <!--FORM-->
 <div class="col-md-5">
    <div class="card">
      <div class="card-body">
        <form action="/edit/<%= task._id %>" method="POST">
          <div class="form-group">
            <input
              type="text"
              placeholder="Insert a Title"
              class="form-control"

              value="<%= task.title %>"
              name="title"
            />
          </div>
          <br />
          <div class="form-group">
            <textarea
              cols="80"
              rows="3"
              class="form-control"
              placeholder="Insert a Description"
              name="description"
            ><%= task.description %></textarea>
          </div>
          <br />
          <button type="submit" class="btn btn-primary">Update</button>
        </form>
      </div>
    </div>
</div>

4. Creando las rutas

Las rutas en express.js son las que permiten poder enviar y recibir la informacion entre las vistas, usando los m[etodos GET para obtener y POST para enviar.

Dentro del directorio routes crea un archivo llamado index.js y pega este contenido:

routes/index.js

const express = require('express');
const router = express.Router();

const Task = require('../models/task');

router.get('/', async (req, res)=>{
    const tasks = await Task.find();
    console.log(tasks);
    res.render("index", {
        tasks
    });
});

router.post('/add', async (req, res) => {
    const task = new Task(req.body);
    await task.save();
    // console.log(new Task)
    console.log(req.body);
    res.redirect('/');

});

router.get('/done/:id', async (req, res) => {
    const { id } = req.params;
    const task = await Task.findById(id);
    task.status = !task.status;
    await task.save();
    res.redirect('/');
});

router.get('/edit/:id', async (req, res) => {
    const { id } = req.params;
    const task = await Task.findById(id);
    res.render('edit', {task});
})

router.post('/edit/:id', async (req, res) => {
    const { id } = req.params;
    const task = await Task.update({_id : id}, req.body);
    res.redirect('/');
});

router.get('/delete/:id', async (req, res) => {
    const { id } = req.params;
    await Task.remove({_id : id});
    res.redirect('/');
})

module.exports = router;

Para este ejemplo necesita importar el archivo del modelo de la base de datos para poder realizar las operaciones de consultar, crear, eliminar y modificar que se disparan al llamar a una ruta o url desde las vistas

Listo, ahora debes ejecutar el proyecto usando el comando