Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Priya.18737@sscbs.du.ac.in
- password123!
- --------------------------------------------------------------------------------------------------------------
- apt update
- apt upgrade
- apt install nodejs
- apt install npm
- mkdir code
- cd code
- npm install express-generator -g --save
- express -v hbs
- npm install
- npm install nodemon -g --save
- npm install mysql --save
- npm start
- --------------------------------------------------------------------------------------------------
- apt install mysql-server
- service mysql start
- GRANT ALL PRIVILEGES ON *.* TO 'nitasha'@'localhost' IDENTIFIED BY 'Qwerty@1234';
- create database node;
- create table users(ID int AUTO_INCREMENT, Username varchar(20) not null, Password varchar(20) not null, PRIMARY KEY(ID));
- insert into users(Username, Password) values ('admin', 'admin');
- -------------------------------------------------------------------------------------------------------------------
- pscp -r -i "D:\aws\abhishek.ppk" D:\aws\code ubuntu@18.224.153.73:
- ----------------------------------------------------------------------------------------------------------------------------------------
- https://datatables.net/download/
- ----------------------------------------------------------------------------------------------------------------------------------------
- code/config/database.js
- var DataBase = {
- host : 'localhost' ,
- database : 'node',
- user : 'nitasha',
- password : 'Qwerty@1234'
- }module.exports=DataBase;
- ----------------------------------------------------------------------------------------------------------------------------------------
- code/routes/index.js
- var express = require('express');
- var router = express.Router();
- var DataBase = require('../config/database.js');
- var mysql = require('mysql');
- var con = mysql.createConnection(DataBase);
- /* GET home page. */
- router.get('/', function(req, res, next) {
- res.render('login');
- });
- router.post('/userValid', function(req, res, next) {
- console.log(req.body)
- data=req.body;
- username=data["uname"]; //xss //SQL
- password=data["psw"]
- con.connect(function(err){
- sql ="select * from users where username=\""+username+"\" and password=\""+password+"\"";
- con.query(sql,function(err,result){
- if (err) throw err;
- if (result.length > 0) {
- console.log(result)
- final1=[]
- // res.send(result)
- for (let index = 0; index < result.length; index++) {
- temp=[]
- temp.push(result[index]["FirstName"])
- temp.push(result[index]["LastName"])
- temp.push(result[index]["Occupation"])
- final1.push(temp)
- }
- res.render('dashboard',{ final1})
- console.log(final1)
- }
- else
- {
- res.render('login');
- }
- })
- })
- // res.send("Page Working")
- });
- module.exports = router;
- -----------------------------------------------------------------------------------------------------------------------------
- code/views/dashboard.hbs
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Page</title>
- <link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" type="text/css" >
- <link href= "https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" >
- <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.3.1.js"></script>
- <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
- <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
- </head>
- <body>
- <div id="test" class="container-fluid">
- <h1 class="text-danger" >
- Welcome to dashboard
- <small class="text-muted">{{App}}</small>
- </h1>
- <div id="Fail" >
- <table id="example" class="table table-striped table-bordered" style="width:100%">
- <thead>
- <tr>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Occupation Type</th>
- </tr>
- </thead>
- <tbody>
- {{#each final1}}
- <tr>
- {{#each this}}
- <td>{{this}}</td>
- {{/each}}
- </tr>
- {{/each}}
- </tbody>
- </table>
- </div>
- </div>
- </body>
- <script type="text/javascript">
- $(document).ready(function() {
- $('#enter').DataTable();
- } );
- </html>
- ---------------------------------------------------------------------------------------------------------------------------
- code/views/login.hbs
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style>
- body {font-family: Arial, Helvetica, sans-serif;}
- /* Full-width input fields */
- input[type=text], input[type=password] {
- width: 100%;
- padding: 12px 20px;
- margin: 8px 0;
- display: inline-block;
- border: 1px solid #ccc;
- box-sizing: border-box;
- }
- /* Set a style for all buttons */
- button {
- background-color: #4CAF50;
- color: white;
- padding: 14px 20px;
- margin: 8px 0;
- border: none;
- cursor: pointer;
- width: 100%;
- }
- button:hover {
- opacity: 0.8;
- }
- /* Extra styles for the cancel button */
- .cancelbtn {
- width: auto;
- padding: 10px 18px;
- background-color: #f44336;
- }
- /* Center the image and position the close button */
- .imgcontainer {
- text-align: center;
- margin: 24px 0 12px 0;
- position: relative;
- }
- img.avatar {
- width: 40%;
- border-radius: 50%;
- }
- .container {
- padding: 16px;
- }
- span.psw {
- float: right;
- padding-top: 16px;
- }
- /* The Modal (background) */
- .modal {
- display: none; /* Hidden by default */
- position: fixed; /* Stay in place */
- z-index: 1; /* Sit on top */
- left: 0;
- top: 0;
- width: 100%; /* Full width */
- height: 100%; /* Full height */
- overflow: auto; /* Enable scroll if needed */
- background-color: rgb(0,0,0); /* Fallback color */
- background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
- padding-top: 60px;
- }
- /* Modal Content/Box */
- .modal-content {
- background-color: #fefefe;
- margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
- border: 1px solid #888;
- width: 80%; /* Could be more or less, depending on screen size */
- }
- /* The Close Button (x) */
- .close {
- position: absolute;
- right: 25px;
- top: 0;
- color: #000;
- font-size: 35px;
- font-weight: bold;
- }
- .close:hover,
- .close:focus {
- color: red;
- cursor: pointer;
- }
- /* Add Zoom Animation */
- .animate {
- -webkit-animation: animatezoom 0.6s;
- animation: animatezoom 0.6s
- }
- @-webkit-keyframes animatezoom {
- from {-webkit-transform: scale(0)}
- to {-webkit-transform: scale(1)}
- }
- @keyframes animatezoom {
- from {transform: scale(0)}
- to {transform: scale(1)}
- }
- /* Change styles for span and cancel button on extra small screens */
- @media screen and (max-width: 300px) {
- span.psw {
- display: block;
- float: none;
- }
- .cancelbtn {
- width: 100%;
- }
- }
- </style>
- </head>
- <body>
- <h2>Modal Login Form</h2>
- <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
- <div id="id01" class="modal">
- <form class="modal-content animate" action="/test/userValid" method="POST">
- <div class="imgcontainer">
- <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
- <img src="img_avatar2.png" alt="Avatar" class="avatar">
- </div>
- <div class="container">
- <label for="uname"><b>Username</b></label>
- <input type="text" placeholder="Enter Username" name="uname" required>
- <label for="psw"><b>Password</b></label>
- <input type="password" placeholder="Enter Password" name="psw" required>
- <button type="submit">Login</button>
- <label>
- <input type="checkbox" checked="checked" name="remember"> Remember me
- </label>
- </div>
- <div class="container" style="background-color:#f1f1f1">
- <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
- <span class="psw">Forgot <a href="#">password?</a></span>
- </div>
- </form>
- </div>
- <script>
- // Get the modal
- var modal = document.getElementById('id01');
- // When the user clicks anywhere outside of the modal, close it
- window.onclick = function(event) {
- if (event.target == modal) {
- modal.style.display = "none";
- }
- }
- </script>
- </body>
- </html>
- --------------------------------------------------------------------------------------------------------------------------------------
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement