My app is not inserting form data into database | NodeJS | Express | Javascript already have the body-parser module

Question

Using MVC design pattern, I cant make my app insert the form info into his respective table inside the database. How may I inserti the data form the form into the database? I installed with npm the body-parser package but im not getting the form working, any advice or topic i should read so i can resolve this please? This the final work of my college, well part of.

Please I will be very glad if someone can give get me back on the tack, im very lost.

This is my Model code:

module.exports={
obtener: function(conexion, funcion){
    conexion.query('SELECT * FROM usuarios',funcion);
},
insertar:function(conexion,datos,funcion){
    conexion.query('INSERT INTO usuarios (nombre,apellidos,email,password) VALUES (?,?,?,?)',
    [datos.nombreUsuario,datos.apellidosUsuario,datos.emailUsuario,datos.password]);
}}

This the controller code:

var connection = require('../config/connection');
var usuario = require('../model/usuario');

// exporta todo lo que esta aca
module.exports={
index:(req,res)=>{
    usuario.obtener(connection,function(err,datos){
        console.log(datos);
        res.render('aplicacionweb/usuarios',{usuarios:datos});
    });
},
crear:(req,res)=>{
    res.render('aplicacionweb/crearusuario');
},
guardar:(req,res)=>{
    console.log(req.body);
    usuario.insertar(connection,req.body,function(err){
        res.redirect('/usuarios');
    })
}}

This is my connection:

var mysql = require('mysql');
var connection = mysql.createConnection(
{
host:'localhost',
user:'root',
password:'',
database:'plataformacateringeventos'});

connection.connect(
    (err)=>{
        if(!err){
            console.log('Conexion exitosa!!');
        }else{
            console.log('Error de conexion');
        }});

module.exports = connection;

This is my route or router:

var express = require('express');
var router = express.Router();
const usuariosController = require('../controller/usuariosController');

/* GET home page. */
router.get('/', usuariosController.index);
router.get('/crearusuario', usuariosController.crear);
router.post('/',usuariosController.guardar);

module.exports = router;

This is the form I want to use to insert the data into the database:

Form i want to use the data to insert into database

And this is the code im using in the form:

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
rel="stylesheet" integrity="sha384- 
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<title>Crear Usuario</title>
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <div class="col">
      <!-- Post para que interactue con la abse de datos y actions
      ususarios para que sea la ruta usuarios las que recepciones la informacion-->
      <form method="post" action="/usuarios">
        <div class="mb-3">
          <label for="nombreUsuario" class="form-label">Nombre</label>
          <input type="text" class="form-control" id="nombreUsuario" aria- 
describedby="nombreHelp">
          <div id="nombreHelp" class="form-text"></div>
        </div>
        <div class="mb-3">
          <label for="apellidosUsuario" class="form-label">Apellidos</label>
          <input type="text" class="form-control" id="apellidosUsuario" aria- 
describedby="apellidoHelp">
          <div id="apellidoHelp" class="form-text">Apellido paterno y materno</div>
        </div>
        <div class="mb-3">
          <label for="emailUsuario" class="form-label">Email</label>
          <input type="email" class="form-control" id="emailUsuario" aria- 
describedby="emailHelp">
          <div id="emailHelp" class="form-text">Informacion de caracter confidencial</div>
        </div>
        <div class="mb-3">
          <label for="passwordUsuario" class="form-label">Contraseña</label>
          <input type="password" class="form-control" id="passwordUsuario" aria- 
describedby="passwordHelp">
          <div id="passwordHelp" class="form-text">10 digitos</div>
        </div>
        <button type="submit" class="btn btn-dark">Crear Usuario</button>
      </form>
    </div>
  </div>
</div>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" 
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" 
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" 
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 
crossorigin="anonymous"></script>
-->
</body>
</html>

score 0 · Answer 1 · answered May 25 '22 at 14:35

0

You need to use a middleware for parsing data received from form app.use(express.urlencoded());

Add this line before the routes

answered May 25 '22 at 14:35

Alexandru DuDu

998
1
7
19

I even have it with extended:true, I have something like app.use(express.urlencoded({extended:true})); I have it with the bodyparser and express – Kevin Aguilar May 25 '22 at 14:53

My app is not inserting form data into database | NodeJS | Express | Javascript already have the body-parser module

1 Answers1