Formulario de comentarios usando Pugjs, Node.js, MongoDB, Express

Podemos crear un formulario de comentarios usando PugJs, NodeJS, MongoDB, Express con los siguientes pasos. Un formulario de comentarios toma la entrada del usuario y envía los datos al servidor para procesarlos y almacenarlos en la base de datos.

Paso 1: cree una carpeta con el nombre feedback_form en cualquier directorio. Puedes tomar cualquier nombre.

Paso 2: Inicialice el proyecto NodeJS usando el siguiente comando.

npm init  –y

Paso 3: Instale los módulos requeridos usando el siguiente comando desde su terminal/cmd.

// Express middleware
npm install express  --save 

// Database setup
npm install mongoose  --save 

// pugjs for client site rendering
npm install pug  --save 

// OR you can install all command
// using single command
npm install express pug mongoose

Paso 4: La estructura del directorio se verá como la siguiente.

Estructura de directorios

node_modules: Contiene todos nuestros módulos de Node instalados.
estático: contiene los archivos estáticos para su servidor.
vistas: contiene archivos PugJS para representar en el sitio del cliente.
app.js: contiene el código del servidor para ejecutar esta aplicación.

Paso 5: después de instalar los módulos, anote los siguientes códigos para crear un formulario de comentarios.

Nombre de archivo: app.js

Javascript

// Require express to make easy
// routing on server side.
const express = require("express");
  
// Creating express object
const app = express();
  
// Require path module
const path = require('path');
  
// Require pug template engine
const pug = require("pug");
  
// Require mongoose to use mongoDb
// in a easier way
const mongoose = require("mongoose");
  
// Define a port number
const port = 3000;
  
// Make a static route to use your
// static files in client side
app.use('/static', express.static('static'));
  
// Middleware for parsing
app.use(express.urlencoded());
  
// Define and use pug engine so also
// declare path on rendering
app.set('view engine', 'pug');
app.set('views', path.join(__dirname, 'views'));
  
// Database Connection 
mongoose.connect(
    "mongodb://localhost:27017/feedback",
    { useUnifiedTopology: true }
);
  
// Create schema
const feedSchecma = mongoose.Schema({
    name: String,
    email: String,
    feed: String
});
  
// Making a modal on our already
// defined schema
const feedModal = mongoose
    .model('feeds', feedSchecma);
  
// Handling get request
app.get('/', function (req, res) {
    // Rendering your form
    res.render('feedback_form');
});
  
// Handling data after submission of form
app.post("/feedback_form", function (req, res) {
    const feedData = new feedModal({
        name: req.body.name,
        email: req.body.email,
        feed: req.body.feedback
    });
    feedData.save()
        .then(data => {
            res.render('feedback_form',
{ msg: "Your feedback successfully saved." });
        })
        .catch(err => {
            res.render('feedback_form', 
                { msg: "Check Details." });
        });
})
  
// Server setup
app.listen(port, () => {
    console.log("server is running");
});

Nombre de archivo: feedback_form.pug

html

<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content=
            "width=device-width, initial-scale=1.0")
  
        title Feedback Form
        //- we are directly use static files because
        // already use static serve
        link(rel="stylesheet", href="/static/style.css")
    body
        .form
            h2 Feedback Form
            if(msg)
                small=msg
            //- feedback_form POST route
            form(action="/feedback_form",method="POST")
                label(for="name") Enter Your Name
                input#name(type="text", name="name")
                label(for="email") Enter Your Email
                input#email(type="email", name="email")
                label(for="feedback") Enter Your Feedback
                textarea#feedback(
                    name="feedback", 
                    cols="30", rows="5"
                )
                button(type="submit") Submit

Nombre de archivo: estilo.css

CSS

* {
    margin: 0;
    padding:0;
    font-family: system-ui;
}
  
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
  
.form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: white;
    padding: 1rem;
    box-shadow: 0px 0px 6px 0px #808080b3;
    border-radius: 10px;
}
  
.form form {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
  
.form form input, .form form textarea {
    border: 1px solid gray;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 20px;
    outline: none;
}
  
.form form label {
    margin-top: 7px;
}
  
.form button {
    margin-top: 10px;
    padding: 4px 10px;
    font-size: 1rem;
    border: 1px solid gray;
    border-radius: 7px;
    outline: none;
    cursor: pointer;
}

Paso 6: Ejecute el archivo app.js con el siguiente comando:

node app.js

Vista previa del diseño:

Diseño de nuestro formulario

Formas completas:

Formas completas

Después de enviar:

Formulario enviado correctamente

Comandos de MongoDB: use estos comandos para ver los registros de su base de datos:

mongo // Start mongo shell
show dbs // See database cluster
use feedback // Use table name
show collections // See collections in cluster 
db.feeds.find() // See records with table name

Producción:

Registros de datos

Publicación traducida automáticamente

Artículo escrito por mrsuryapratap y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Javascript

html

CSS

Deja una respuesta Cancelar la respuesta