#inde.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF - 8"> <meta name="viewport" content="width=device - width, initial - scale=1.0"> <title>node.js mysql crud app</title> <style> body{font - family:arial ,sans - serif;margin:50px;} form{ margin - bottom: 20px;} input,button{padding:10px;margin:5px;} table{width:50%;border - collapse: collapse;margin - top: 20px;} table,th,td{border:1px solid black;padding:10px;text - align: left;} </style> </head> <body> <h1>User Management</h1> <h2>Add User</h2> <form id="adduserform"> <input type="text" id="name" placeholder="name" required> <input type="email" id="email" placeholder="email" required> <button t ype="submit">add user</button> </form> <h2>Update user</h2> <form id="updateuserform"> <input type="number" id="updateid" placeholder="userid" required> <input type="text" id="updatename" placeholder="newname"> <input type="email" id="updateemail" placeholder="newemail"> <button type="submit">update user</button> </form> <h2>delete user</h2> <form id="deleteuserform"> <input type="number" id="deleteid" placeholder="userid" required > <button type="submit">delete user</button> </form> <h2>All users</h2> <button id="getuserbtn">get all users</button> <table id="studentdb"> <thead> <tr> <th>id</th> <th>name</th> <th>email</th> </tr> </thead> <tbody></tbody> </table> <script> const API_URL='http://localhost:3000'; document.getElementById('adduserform').addEventListener('submit',function( e){ e.preventDefault(); var name=document.getElementById('name').value; var email=document.getElementById('email').value; fetch(API_URL+'/student',{ method:'POST', headers:{' content - type':'application/json'}, body:JSON.stringify({name:name,email:email}) }).then(function(){ alert('user added successfully!'); }); }); document.getElementById('updateuserform').add EventListener('submit',functi on(e){ e.preventDefault(); var id=document.getElementById('updateid').value; var name=document.getElementById('updatename').value; var email=document.getElementById('updateemail') .value; fetch(API_URL+'/student/'+id,{ method:'PUT', headers:{'content - type':'application/json'}, body:JSON.stringify({name:name,email:email}) }).then(function(){ alert ('user updated successfully!'); }); }); document.getElementById('deleteuserform').addEventListener('submit',functio n(e){ e.preventDefault(); var id=document.getElementById('deleteid').value; fetch(API_URL+'/student/'+id,{ method:'DELETE' }).then(function(){ alert('user Deleted successfully!'); }); }); document.getElementById ('getuserbtn').addEventListener('click',function(e){ fetch(API_URL+'/student') .then(function(response){ return response.json(); }) .then(function(student){ var tbody= document.querySelector('#studentdb tbody'); tbody.innerHTML=''; student.forEach(function(student){ var row='<tr><td>'+student.id+'</td><td>'+student.name+'</td><td>'+student.em ail+'</td></tr>'; tbody.innerHTML+=row; }); }); }); </script> </body> </html> Javascript const express=require('express'); const mysql=require('mysql2'); const cors=require('cors'); const app=express(); const port=3000; app.use(express.json()); app.use(cors()); const db=mysql.createConnection({ host:'localhost', user:'root', password:'', database:'student', port:'3306' }); db.connect(function(err){ if(err){ console.log('erro r connecting to mysql:',err); return; } console.log('connected to mysql'); }); app.post('/student',function(req,res){ const{name,email}=req.body; const query='INSERT INTO studentdb(name,email) VALUES(?,?)'; db.query (query,[name,email],function(err,result){ if(err){ console.log('error inserting user:',err); res.status(500).send('error inserting user'); }else{ res.send({ message:'user added successfull y', }); } }); }); app.get('/student', function(req, res) { const query = 'SELECT * FROM studentdb'; db.query(query, function(err, results) { if (err) { console.log('Error retrieving users:', err); res.status(500).send( 'Error retrieving users'); } else { res.json(results); } }); }); app.put('/student/:id', function(req, res) { const { id } = req.params; const { name, email } = req.body; const query = 'UPDATE studentdb SET name = ?, email = ? WHERE id = ?'; db.query (query, [name, email, id], function(err) { if (err) { console.log('Error updating user:', err); res.status(500).send('Error updating user'); } else { res.send('User updated successfully'); } }); }); app.delete('/student/:id', function(req, res) { const { i d } = req.params; const query = 'DELETE FROM studentdb WHERE id = ?'; // fixed table name db.query(query, [id], function(err) { if (err) { console.log('Error deleting user:', err); res.status(500).send('Error deleting user'); } else { res.send('User delete d successfully'); } }); }); app.listen(port, function() { console.log(`Server running on http://localhost:${port}`); });