use ajax and api

Author: robertsource

5.rest-api-express/public/css/app.css renamed to 6.rest-api-express-ajax/public/css/app.css

@@ -0,0 +1,22 @@
+{
+    "user1" : {
+       "name" : "mahesh",
+       "password" : "password1",
+       "profession" : "teacher",
+       "id": 1
+    },
+    
+    "user2" : {
+       "name" : "suresh",
+       "password" : "password2",
+       "profession" : "librarian",
+       "id": 2
+    },
+    
+    "user3" : {
+       "name" : "ramesh",
+       "password" : "password3",
+       "profession" : "clerk",
+       "id": 3
+    }  
+ }

5.rest-api-express/public/js/app.js renamed to 6.rest-api-express-ajax/public/js/app.js

@@ -0,0 +1,55 @@
+var appRoot = require('app-root-path');
+const path = require('path');
+
+var express=require('express');
+var app = express();
+var fs = require("fs");
+
+
+var db = require('./service/database');
+
+
+
+var user = {
+   "user4" : {
+      "name" : "adil",
+      "password" : "123456",
+      "profession" : "teacher",
+      "id": 4
+   }
+}
+
+// public permisssion
+app.use('/public', express.static('public'));
+//app.use('/resource', express.static('resource'));
+
+app.get('/',(req,res)=>{ 
+   // res.end( 'server on working!');
+   res.sendFile(__dirname + "/views/" + "index.html");
+ });
+
+
+app.post('/addUser', function (req, res) {
+   // First read existing users.
+   fs.readFile( __dirname + "/" + "resource/data/users.json", 'utf8', function (err, data) {
+    console.log('-----------------');
+      console.log(data);
+      temp = JSON.parse( data );
+
+      temp["user4"] = user["user4"];
+      console.log('/////////////////');
+      console.log( temp );
+      res.end( JSON.stringify(temp));
+   });
+})
+
+app.get('/students',(req,res)=>{
+   db.queryall().then( result =>{
+   res.send(result);
+   console.log(result);
+   })
+});
+
+
+
+app.listen(8000);

5.rest-api-express/public/js/jquery-3.6.3.min.js renamed to 6.rest-api-express-ajax/public/js/jquery-3.6.3.min.js

@@ -0,0 +1,138 @@
+const sql = require('mssql/msnodesqlv8')
+
+
+
+const config = {
+    user: 'sa',
+    password: 'Sql132',
+    database: 'School',
+    server: 'localhost',
+    pool: {
+        max: 10,
+        min: 0,
+        idleTimeoutMillis: 30000
+    },
+    options: {
+        encrypt: false, // for azure
+        trustServerCertificate: true, // change to true for local dev / self-signed certs
+        trustedConnection: true,
+        useUTC: true
+    }
+}
+
+sql.on('error', function (err) {
+    // ... error handler
+    console.log('sql error on show : ' + err);
+
+})
+
+
+
+
+
+// query
+
+async function query(id) {
+  //  console.log('/** query start **/');
+ try{
+    var pool= await sql.connect(config);
+    var result=await pool.request().input('id', sql.Int, id).query('select * from dbo.Student where id = @id');
+    // console.log('/** query end **/'); 
+     return result.recordset;
+ }
+ catch(error)
+ {console.log(`query error : ${error}`);  }
+  
+}
+
+async function queryall() {
+    //  console.log('/** query start **/');
+   try{
+      var pool= await sql.connect(config);
+      var result=await pool.request().query('select * from dbo.Student');
+      // console.log('/** query end **/'); 
+       return result.recordset;
+   }
+   catch(error)
+   {console.log(`query error : ${error}`);  }
+    
+  }
+
+
+
+//insert
+
+function insert(name, department) {
+    console.log('/** insert start **/');
+    sql.connect(config).then(connection => {
+        // Query
+        console.log('connect show : ');
+        var poolrec = connection.request();
+        var q = poolrec.query(`insert into Student (student_name,department) values ('${name}','${department}')`)
+        return q;
+
+    }).then(result => {
+        console.log('inserted rows count: ' + result.rowsAffected);
+    }).catch(err => {
+        // ... error checks
+        console.log('catch show : ' + err);
+    });
+
+    console.log('/** insert end **/');
+}
+
+
+// insert using transaction
+
+function insert_trans(id, department) {
+    const pool = new sql.ConnectionPool(config);
+    const transaction = new sql.Transaction(pool)
+    transaction.begin(err => {
+        // ... error checks
+
+        const request = new sql.Request(transaction)
+        request.query('insert into Student (department) values (' + department + ') where id=' + id, (err, result) => {
+            // ... error checks
+            
+            transaction.commit(err => {
+                // ... error checks
+
+                console.log("Transaction committed.")
+            })
+        })
+    })
+}
+
+
+// update
+
+function update(id, department) {
+    console.log('/** update start **/');
+
+    sql.connect(config).then(connection => {
+        // Query
+        var count = 0;
+        const request = new sql.Request()
+        request.stream = true
+        return request.input('id', sql.Int, id).query(`update Student set department='${department}' where id=@id`);
+
+    }).then(result => {
+        console.log('update result rows count : ' + result.rowsAffected);
+
+    }).catch(err => {
+        // ... error checks
+        console.log('catch show : ' + err);
+    });
+    console.log('/** update end **/');
+}
+
+
+
+//insert('jack','biology');
+//update(3,'oop');
+//query(2).then(result=>{console.log(result) ;});
+
+
+
+module.exports = { query, queryall , insert, update };
+ 

6.rest-api-express-ajax/resource/data/users.json

@@ -13,17 +13,22 @@
 
   <style type="text/css">
     .main {
-      width: 800px;
-      margin: 100px auto;
-      padding-bottom: 200px;
-      ;
+      width: 80%;
+    margin: 100px auto;
+    /* padding-bottom: 200px; */
+    /* background-color: #f7f7f7; */
+    padding: 15px;
     }
+    .title{font-size: 17pt;
+    /* font-style: italic; */
+    font-weight: 600;
+    font-family: arial;}
 
     .result {
       color: white;
       display: none;
       padding: 30px;
-
+margin: 0;
       background-color: #71cfa4;
     }
 
@@ -33,13 +38,28 @@
     }
 
     form {
-      background-color: aqua;
-      padding: 30px;
+      background-color: #f5f5f5;
+    padding: 30px;
+    /* border: 1px solid red; */
+    border-radius: 8px;
     }
 
+    .continer{display: flex;}
+    .item-same-width{flex:1;margin: 5px;}
+
+ .table-header{
+  border-radius: 8px;
+    background-color: #529576;
+    color: white;
+    font-weight: 600;
+ }
+
     table {
       font-family: arial, sans-serif;
-      border-collapse: collapse;
+      border-collapse: collapse; 
+        border-radius: 8px;
+        border-style: hidden; /* hide standard table (collapsed) border */
+        box-shadow: 0 0 0 1px #71cfa4; /* this draws the table border  */ 
       width: 100%;
     }
 
@@ -63,41 +83,36 @@
 <body>
   <div class="main">
 
-    <p>Form action</p>
+    <p class="title">Form action</p>
+    <hr/>
     <form action="/addUser" method="POST">
 
       <input type="submit" value="Submit">
     </form>
 
     <div>
-      <p>Ajax action</p>
+      <p class="title">Ajax action</p>
+      <hr/>
       <input type="submit" id="btn_adduser" value="Submit Ajax">
       <p>Result</p>
+    </div>
+    <div class="continer">
+     
 
-      <pre id="result" class="result">
+      <div class="item-same-width">
+          <pre id="result" class="result">
 
       </pre>
+      </div>
+      <div class="item-same-width">
+         
 
-      <table style="width:100%">
-        <tr class="table-header">
-          <td>name</td>
-          <td>password</td>
-          <td>professional</td>
-          <td>id</td>
-        </tr>
-
-        <tr>
-          <td>1</td>
-          <td>2</td>
-          <td>3</td>
-          <td>4</td>
-        </tr>
-
-
-      </table>
-      </br></br></br>
 
       <div id="test"></div>
+      </div>
+    
+
+     
 
     </div>