Node js

How to Insert Html form Data Using Node js

Hey Everyone today i am gone tell you How to Insert Html form data into Mysql 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

 

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

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 index.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” />
        <link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=“stylesheet”>
        <title>Document</title>
    </head>
    <body>
        <div class=“container pt-4” style=width: :40%;>
        <h1>Insert Data using node js</h1>
        <form action=“” method=“POST”>
            <div class=“mb-3”>
            <label for=“exampleInputEmail1” class=“form-label”>Name</label>
            <input type=“text” class=“form-control” name=“name” />
            </div>
            <div class=“mb-3”>
            <label for=“exampleInputEmail1” class=“form-label”>Email</label>
            <input type=“text” class=“form-control” name=“email” />
            </div>
            <div class=“mb-3”>
            <label for=“exampleInputEmail1” class=“form-label”>Message</label>
            <input type=“text” class=“form-control” name=“message” />
            </div>
            <button type=“submit” class=“btn btn-primary”>Submit</button>
        </form>
        </div>
    </body>
    </html>

 

 

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

 
 
4) 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 show
    app.get(‘/’function(reqres){
    res.render(“index”);
    });

 

    // index page 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.redirect(‘/’);
    });
    app.listen(3000);

 

Run: Nodemon app 
I hope this Post help you….
if you get any errror comment or message me.. i will help you..