mercredi 3 avril 2019

DIsplay MySQL Table in html using Node.js

I am trying to find a way to display my SQL database into a html page. I only want to use node.js and html and no PHP. Does anyone know how to do so.

The three approaches i attempted are the ones commented. In my JavaScript file.

Login.js
var mysql = require('mysql');
var express = require('express');
var session = require('express-session');
var bodyParser = require('body-parser');
var path = require('path');
const http = require('http');


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

var app = express();
app.use(session({
    secret: 'secret',
    resave: true,
    saveUninitialized: true
}));
app.use(bodyParser.urlencoded({extended : true}));
app.use(bodyParser.json());

app.use(express.static('public'))

app.get('/' , function(request , response) {
    response.sendFile(path.join(__dirname + '/signin.html'));
});

app.get('/auth', function(request, response) {
    response.sendFile(path.join(__dirname + '/login.html'));
});


app.get('/admin', function(request, response) {
    response.sendFile(path.join(__dirname + '/administrator.html'));
});

app.post('/auth', function(request, response) {
    var username = request.body.username;
    var password = request.body.password;
    if (username && password) {
        connection.query('SELECT * FROM accounts WHERE username = ? AND password = ?', [username, password], function(error, results, fields) {
            if (results.length > 0) {
                request.session.loggedin = true;
                request.session.username = username;
                response.redirect('/home');
            } else {
                response.send('Incorrect Username and/or Password!');
            }           
            response.end();
        });
    } else {
        response.send('Please enter Username and Password!');
        response.end();
    }
});

app.post('/signinCheck' , function(request,response){
    var username = request.body.username;
    var password = request.body.password;
    var email = request.body.email; 

    if (username && password && email) {
        var sql = `INSERT INTO accounts 
            (
                username, password, email
            )
            VALUES
            (
                ?, ?, ?
            )`;

            connection.query(sql, [username, password, email], function(error, results, fields) {
            response.send('Please sign in to view this page!')
            connection.end();
        });
    }
});


app.get('/home', function(request, response) {
    if (request.session.loggedin) {
        response.send('Welcome back, ' + request.session.username + '!');
    } else {
        response.send('Please login to view this page!');
    }
    response.end();
});



// // app.get('/adminview',(request, result) => {
// //     connection.connect(function(err) {
// //     if(err) throw err;
// //         else {
// //             connection.query("SELECT * FROM accounts",(err, result) => {
// //               var table = '';
// //               for(var i=0; i<result.length; i++){
// //                   table += '<tr><td>' + (i+1) + '</td><td>' + 
// //               }
// //               if(err) {
// //                     console.log(err); 
// //                     res.json({"error":true});
// //                 }
// //                 else { 
// //                     console.log(result); 
// //                     res.json(result); 
// //                 }
// //             });
// //         }
// //     });
// // });

// // app.get('/table', function(request, response) {
// //   connection.connect(function(error){
// //       if(error) throw error;
// //       else {
// //           connection.query("SELECT * FROM accounts",(error, result) => {
// //                               var table = '';
// //                               for(var i=0; i<result.length; i++){
// //                                   table += '<tr><td>' + (i+1) + '</td><td>' + result[i].username + '</td><td>' + result[i].password + '</td><td>' + result[i].email + '</td><td>';

// //                               }               
// //             connection.end();
// //           });
// //       }  
// //       });
// //   });


// // app.get('/rows', function (req, res) {
// //   connection.connect();  

// //   connection.query('SELECT * FROM accounts', function(err, rows, fields)   
// //   {  
// //       connection.end();

// //       if (err) throw err;  

// //       res.json(rows); 

// //   });
// //   });



app.listen(3000) ;






administrator.html 

<!DOCTYPE html>
<html>
    <head>
        <title>My db rows</title>
    </head>

    <body>
        <div id="table"></div>

        <script type="text/javascript">
             var opts = {
                 url: 'http://localhost:3000/rows/'
             };

             fetch(opts)
                 .then((res) => {
                     if (res.ok) {
                         return res.json();
                     }
                  })
                  .then((rows) => {
                      for (let row of rows) {
                          // row will be a mysql row -- you can loop over these and do what you want with them
                      }
                   })
                   .catch(console.log);
        </script>
    </body> 
</html>


<!-- <html>
<body>
    <form action="/table" method="get" style="background-color:#999da3; padding:14px 16px;">
    </form>
</body>
</html> -->

https://marplo.net/addons/javascript/nodejs/mysql_select_table.png

The link of the photo is what I would like.




Aucun commentaire:

Enregistrer un commentaire