En este artículo, trabajaremos con formularios utilizando ExpressJS en NodeJS.
Usando la programación del lado del servidor en Node.js, podemos crear formularios donde podemos poner ciertos parámetros que, al completarse, se almacenan en la base de datos.
Entorno de configuración:
Puede consultar este sitio web para descargar Node.js. Junto con eso, también debemos tener en cuenta que estamos trabajando con algo que implica el almacenamiento de datos . Para eso necesitamos algo que pueda almacenar la información que se envía desde el extremo del usuario.
Usaremos MongoDB para almacenar nuestros datos enviados desde el formulario. Deberíamos tener MongoDB preinstalado en nuestro dispositivo antes de continuar.
Puede consultar este sitio web para descargar MongoDB.
Después de descargar MongoDB, debemos seguir algunos pasos antes de pasar a la implementación anterior:
Run "mongod" command at first. Press 'ctrl+c' and write 'echo "mongod --nojournal" > mongod' Write 'chmod a+x mongod'
Ahora, configure el paquete npm:
npm init -y
Instalación de dependencias:
Use el siguiente comando en la terminal para instalar los paquetes a la vez:
npm install express body-parser mongoose ejs --save
Estructura de carpetas:
Ahora pasemos a la sección de código.
App.js
//importing dependencies
const express = require("express")
const app=express();
var mongoose=require("mongoose");
var bodyParser=require("body-parser");
// Calling form.js from models
var Form=require("./models/form");
// Connecting to database
mongoose.connect("mongodb://localhost/form",{
useNewUrlParser: true,
useUnifiedTopology: true
});
//middlewares
app.set('view engine','ejs');
app.use(bodyParser.urlencoded({extended:true}));
//rendering form.ejs
app.get("/",function(req,res){
res.render("form");
});
// form submission
app.get('/result',(req,res)=>{
res.render('result');
});
//creating form
app.post("/",function(req,res){
var username=req.body.username;
var email=req.body.email;
var f={username: username,email:email};
Form.create(f,function(err,newlyCreatedForm){
if(err)
{
console.log(err);
}else{
res.redirect("/result");
}
});
});
// Starting the server at port 3000
app.listen(3000, function() {
console.log('Server running on port 3000');
});
Form.js
//Requiring mongoose package
var mongoose=require("mongoose");
// Schema
var formSchema=new mongoose.Schema({
username : String,
email : String
});
module.exports=mongoose.model("Form",formSchema);
header.ejs
<!DOCTYPE html> <!-- Opening HTML Tags--> <html> <!-- Opening head Tags--> <head> <!-- Opening head Tags--> <title>Form</title> </head> <!-- Opening body Tag --> <body>
form.ejs
<!--Opening the ejs tags for including header file-->
<%- include("./partials/header") %>
<!-- Creating a form where action will
be on "/" and the method will be "POST" -->
<form action="/" method="POST">
<!-- Creating the parameter Username as type= "text"-->
<label>Username: </label>
<input type="text" placeholder="Name" name="username"><br><br>
<!-- Creating the parameter Email as type= "text"-->
<label>Email: </label>
<input type="email" placeholder="Email" name="email"><br><br>
<!-- Creating the submit button -->
<button>Submit</button>
</form>
<!--Opening the ejs tags for including footer file-->
<%- include("./partials/footer") %>
Producción:
Al llenar el formulario:
Al hacer clic en el botón Enviar, somos redirigidos a la ruta /resultado.
Concha Mongo:
Podemos ver que la información enviada por el formulario se almacena en la base de datos. Así es como funcionan los formularios en el Node js.