Node js

How to Update Html form data using node js

Hey Everyone today i am gone tell you How to Update Html form data using node js

We are Covering hole Crud operation in node js..

1) How to create node js project

2) How to Insert Html form data into Mysql using node js

3) How to Display MySQL Data in HTML Page using Node js

4) How to Delete HTML form data using node js

5) How to Update Html form data using node js

 

What i Use in my Crud Project..

  • express.js    — this is for node framework to reduce node.js code
  • nodemon     — This is for auto Refresh
  • mysql           — to use MySQL database
  • ejs                — ejs use for templating

You need to download all this packages in your project…

  • npm i express
  • npm i nodemon
  • npm i mysql
  • npm i ejs

 

————————————————————————————————————————-

  Warning: I change the name index page to Create.ejs      

————————————————————————————————————————-

Folder Structure…

————————————————————————————————————————-

Database Name: nodecrud  and table name student

    CREATE TABLE `student` (
    `id` int(11NOT NULL,
    `name` varchar(55NOT NULL,
    `email` varchar(55NOT NULL,
    `message` varchar(55NOT NULL
  ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

 

 

————————————————————————————————————————-

Step 1) Create file config.js

  var mysql = require(“mysql”);
  var connection = mysql.createConnection({
    host: “localhost”// Replace with your host name
    user: “root”// Replace with your database username
    password: “”// Replace with your database password
    database: “nodecurd”// // Replace with your database Name
  });
  connection.connect(function (err) {
    if (errthrow err;
    console.log(“Database is connected successfully !”);
  });
  module.exports = connection;

 

 

————————————————————————————————————————-

Step 2) Create file  Update.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>Update Data</title>
  </head>
  <body>
  
      
        <form action=“” method=“POST”>
                Get Id
                <input type=“text” class=“form-control” name=“id” 
                value=<%=(typeof editData!=’undefined’)? editData.id:”%>” disabled>
                 Name
                  <input type=“text” class=“form-control” name=“name” 
                    value=<%=(typeof editData!=’undefined’)? editData.name:”%>”>
                
                Email
                  <input type=“text” class=“form-control” 
                name=“email” value=<%=(typeof editData!=’undefined’)? editData.email:”%>”>
                
                 Message
                  <input type=“text” class=“form-control” 
            name=“message” value=<%=(typeof editData!=’undefined’)? editData.message:”%>”>
                
                <button type=“submit” class=“btn btn-primary”>Update</button>
        </form>   
   
  

 

</body>
</html>
——————————————————————————————————————–———————————————————————
 

Step 3) Create file app.js

    var express = require(‘express’);
    var app = express();

 

    //ejs templete
    app.set(‘view engine’‘ejs’);

 

    //Database connection file config.js..
    var connection = require(‘./config’);

 

    // this is for read POST data
    app.use(express.json());
    app.use(express.urlencoded({
    extended: true
    }));

 

    //All routing start here.. 

 

    // index page
    app.get(‘/’function(reqres){
    res.render(“Create”);
    });
    //Read Page Show all data 
    app.get(‘/Read’function(reqres){
        connection.query(“SELECT * FROM student”function (errresult) {
            if (errthrow err;
            //console.log(result);
            res.render(‘Read’, { title: ‘pizza’userData: result});
        });

 

    });
    // when user  insert data in databse…
    app.post(‘/’function(reqres){
    var a = req.body.name;
    var b = req.body.email;
    var c = req.body.message;
                var sql = “INSERT INTO `student`(`name`,`email`,message) VALUES (‘”+a+“‘,'”+b+“‘,'”+c+“‘)”;
                connection.query(sqlfunction (errresult) {
                if (errthrow err;
                console.log(“1 record inserted”);
                });
                return res.render(‘Create’, { errormessage: ‘insert data successfully’ });
    });

 

        // Delete page…. delete data by id
        app.get(‘/delete/:id’function(reqres) {
            var idreq.params.id;
            var sql = ‘DELETE FROM student WHERE id = ?’;
            connection.query(sql, [id], function (errdata) {
            if (errthrow err;
            console.log(id);
            console.log(” record deleted”+id);
            });
            return res.redirect(‘/Read’);

 

        });

 

    // Update page get data by id… 
    app.get(‘/Update/:id’function(reqres) {
        var idreq.params.id;
        var sql = ‘SELECT * FROM student WHERE id = ?’;
    connection.query(sql, [id], function (errdata) {
    if (errthrow err;
    console.log(data);
    res.render(‘Update’, { title: ‘User List’editData: data[0]});
    });
    });
    //update page sned post request to update data into database…
    app.post(‘/Update/:id’function(reqres) {
    var idreq.params.id;
    var updateData=req.body;
    var sql = `UPDATE student SET ? WHERE id= ?`;
    connection.query(sql, [updateDataid], function (errdata) {
    if (errthrow err;
    console.log(data.affectedRows + ” record(s) updated”);
    return res.redirect(‘/Read’);
    });

 

    });
    app.listen(3000);

 

————————————————————————————————————————-——————————

 

 

 

Run: Nodemon app 
Go to Browser open url: http://localhost:3000/Read
I hope this Post help you….
if you get any errror comment or message me.. i will help you..