Node js

How to Display MySQL Data in HTML Page using Node js

Hey Everyone today i am gone tell you How to Display MySQL Data in HTML Page 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  Read.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>Document</title>
</head>
<body>

 

    <table class=“table table-hover”>
        <tr>
          <th>S.N</th>
          <th>Name</th>
          <th>Email</th>
          <th>Message</th>
          <th>Edit</th>
          <th>Delete</th>
        </tr>

 

        <% if(userData.length!=0){ var i=1; userData.forEach(function(data){
        %>
        <tr>
          <td><%=data.id %></td>
          <td><%=data.name %></td>
          <td><%=data.email %></td>
          <td><%=data.message %></td>

 

          <td><a href=“/Update/<%=data.id%>”>Edit</a></td>
          <td><a href=“/Delete/<%=data.id%>” >Delete</a></td>
        </tr>
        <% i++; }) %> <% } else{ %>
        <tr>
          <td colspan=“7”>No Data Found</td>
        </tr>
        <% } %>
      </table>

 

</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’ });
    });
    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..