This tutorial will teach you how to make Crud Application using Node JS with React Frontend application with Mysql Database using Api access Crudapplication.
Create the Node Js Project Type on type command prompt
npm init
and press enter key.after that you have the fill configation of project.after done stuff you
will get the package.json file.
after that you have to install the following dependencies
Express
body-parser
Mysql
you have to create the database and tables in mysql database.
After done the stuff you have to create the file server.js
Server.js
const express = require('express')
const bodyParser = require('body-parser')
const mysql = require("mysql");
const server = express();
server.use(bodyParser.json());
//Establish the database connection
const db = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "dbsmschool",
});
db.connect(function (error) {
if (error) {
console.log("Error Connecting to DB");
} else {
console.log("successfully Connected to DB");
}
});
//Establish the Port
server.listen(8085,function check(error) {
if (error)
{
console.log("Error....dddd!!!!");
}
else
{
console.log("Started....!!!! 8085");
}
});
//Create the Records
server.post("/api/student/add", (req, res) => {
let details = {
stname: req.body.stname,
course: req.body.course,
fee: req.body.fee,
};
let sql = "INSERT INTO student SET ?";
db.query(sql, details, (error) => {
if (error) {
res.send({ status: false, message: "Student created Failed" });
} else {
res.send({ status: true, message: "Student created successfully" });
}
});
});
//view the Records
server.get("/api/student", (req, res) => {
var sql = "SELECT * FROM student";
db.query(sql, function (error, result) {
if (error) {
console.log("Error Connecting to DB");
} else {
res.send({ status: true, data: result });
}
});
});
//Search the Records
server.get("/api/student/:id", (req, res) => {
var studentid = req.params.id;
var sql = "SELECT * FROM student WHERE id=" + studentid;
db.query(sql, function (error, result) {
if (error) {
console.log("Error Connecting to DB");
} else {
res.send({ status: true, data: result });
}
});
});
//Update the Records
server.put("/api/student/update/:id", (req, res) => {
let sql =
"UPDATE student SET stname='" +
req.body.stname +
"', course='" +
req.body.course +
"',fee='" +
req.body.fee +
"' WHERE id=" +
req.params.id;
let a = db.query(sql, (error, result) => {
if (error) {
res.send({ status: false, message: "Student Updated Failed" });
} else {
res.send({ status: true, message: "Student Updated successfully" });
}
});
});
//Delete the Records
server.delete("/api/student/delete/:id", (req, res) => {
let sql = "DELETE FROM student WHERE id=" + req.params.id + "";
let query = db.query(sql, (error) => {
if (error) {
res.send({ status: false, message: "Student Deleted Failed" });
} else {
res.send({ status: true, message: "Student Deleted successfully" });
}
});
}); Installing React
npx create-react-app frontend-app After complete the installation and run the project using following command.
npm start run Now you see the React Welcome Page.
After that open the React project into VS code editor.
After that install the Bootstrap by typing the following command
npm i bootstrap After that install the axios by typing the following command
npm i axios Creating a new Component Student.js
import axios from 'axios';
import {useEffect, useState } from "react";
function Student()
{
const [id, setId] = useState('');
const [stname, setName] = useState("");
const [course, setCourse] = useState("");
const [fee, setFee] = useState("");
const [students, setUsers] = useState([]);
useEffect(() => {
(async () => await Load())();
}, []);
async function Load()
{
const result = await axios.get(
"http://localhost:9002/api/student/");
setUsers(result.data.data);
console.log(result.data);
}
async function save(event)
{
event.preventDefault();
try
{
await axios.post("http://localhost:9002/api/student/add",
{
stname: stname,
course: course,
fee: fee
});
alert("Student Registation Successfully");
Load();
}
catch(err)
{
alert("User Registation Failed");
}
}
async function editStudent(students)
{
setName(students.stname);
setCourse(students.course);
setFee(students.fee);
setId(students.id);
}
async function DeleteStudent(id)
{
await axios.delete("http://localhost:9002/api/student/delete/" + id);
alert("Student deleted Successfully");
Load();
}
async function update(event)
{
event.preventDefault();
try
{
await axios.put("http://localhost:9002/api/student/update/"+ students.find(u => u.id === id).id || id,
{
id: id,
stname: stname,
course: course,
fee: fee
});
alert("Registation Updateddddd");
}
catch(err)
{
alert(" Registation Failed");
}
}
return (
<div>
<h1>Student Details</h1>
<div class="container mt-4" >
<form>
<div class="form-group">
<input type="text" class="form-control" id="student_id" hidden
value={id}
onChange={(event) =>
{
setId(event.target.value);
}}
/>
<label>Student Name</label>
<input type="text" class="form-control" id="name"
value={stname}
onChange={(event) =>
{
setName(event.target.value);
}}
/>
</div>
<div class="form-group">
<label>Course</label>
<input type="text" class="form-control" id="course"
value={course}
onChange={(event) =>
{
setCourse(event.target.value);
}}
/>
</div>
<div class="form-group">
<label>Fee</label>
<input type="text" class="form-control" id="fee"
value={fee}
onChange={(event) =>
{
setFee(event.target.value);
}}
/>
</div>
<div>
<button class="btn btn-primary mt-4" onClick={save}>Register</button>
<button class="btn btn-warning mt-4" onClick={update}>Update</button>
</div>
</form>
</div>
<table class="table table-dark" align="center">
<thead>
<tr>
<th scope="col">Student Id</th>
<th scope="col">Student Name</th>
<th scope="col">Course</th>
<th scope="col">Fee</th>
<th scope="col">Option</th>
</tr>
</thead>
{students.map(function fn(student)
{
return(
<tbody>
<tr>
<th scope="row">{student.id} </th>
<td>{student.stname}</td>
<td>{student.course}</td>
<td>{student.fee}</td>
<td>
<button type="button" class="btn btn-warning" onClick={() => editStudent(student)} >Edit</button>
<button type="button" class="btn btn-danger" onClick={() => DeleteStudent(student.id)}>Delete</button>
</td>
</tr>
</tbody>
);
})}
</table>
</div>
);
}
export default Student; Load the Component from the App.js
import Student from './Student/Student';
function App() {
return (
<div className="App">
<Student/>
</div>
);
}
export default App; In this tutorial will teach Laravel 11 Api MVC with Repository Pattern Crud Application step…
In this tutorial will teach Laravel 11 CRUD Application step by step. Laravel 11 CRUD…
in this tutorials we will be talk about how to make a times table in…
In this tutorials will teach How to add two numbers in Laravel 10. (more…)
In this tutorial, we will teach the process of building a full-stack application using Node.js,…
In this tutorial, we will explin you through the process of building a Hospital Management…