The Crud Operations In JavaScript is also known as (Create, Read, Update, and Delete). This is commonly used when you’re working with a small-to-large scale system which is connected to a SQL database.
In addition to this CRUD Operation this is a simple project which stores only various employee data.
Lastly, this crud operation is mostly used for management system such as content management system, school management system, office management system and soon.
What is Crud Operations?
In JavaScript, the crud operations is a backbone of almost developed systems that we used right now. This CRUD Operations stands for (Create, Read, Update, and Delete).
Furthermore, once you are starting to learn a new programming language, every web page has a set of operations that you need to perform.
CRUD (Create, Read, and Update) is almost used in a management system for me as a developer. I didn’t prefer to use the (Delete) because all the stored data in the database is important.
To easily understand this topic I will provide a complete source code so that you can copy and paste it manually the file contains HTML, CSS and JS, But if you want to download it I also provide just scroll down and click the download button.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Crud operation in javascript</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body style="background-color: #416F45;">
<table>
<tr>
<td>
<!--HTML file form for crud operation-->
<!--form div, tbody table, html table, all of them can update by a update button-->
<form autocomplete="off" onsubmit="onFormSubmit()">
<div>
<label for="fullName">Full Name</label>
<input type="text" name="fullName" id="fullName" >
</div>
<div>
<label for="empCode">EMP Code</label>
<input type="text" name="empCode" id="empCode" >
</div>
<div>
<label for="salary">Salary</label>
<input type="text" name="salary" id="salary">
</div>
<div>
<label for="city">City</label>
<input type="text" name="city" id="city">
</div>
<div class="form_action--button">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</div>
</form>
</td>
<td>
<table class="list" id="employeeList">
<thead>
<tr>
<th>Full Name</th>
<th>EMP Code</th>
<th>Salary</th>
<th>City</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</td>
</tr>
</table>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>style.css
style.css
body > table{
width: 80%;
margin: 40px auto;
background-color: #AEA8A9;
}
table{
border-collapse: collapse;
}
table.list{
width: 100%;
}
td, th{
border: 1px solid #ddd;
text-align: left;
padding: 8px 15px;
}
tr:nth-child(even),table.list thead>tr{
background-color: #ddd;
}
input[type="text"], input[type="number"]{
width: 91%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"],input[type="reset"]{
background: #eee;
padding: 6px 12px;
font-size: 1rem;
cursor: pointer;
border-radius: 30px;
border: none;
margin: 15px 0 10px;
outline: none;
}
input[type="submit"]:hover{
background: #f3f3f3;
}script.js
var selectedRow = null;
function onFormSubmit(e){
event.preventDefault();
var formData = readFormData();
if(selectedRow === null){
insertNewRecord(formData);
}else{
updateRecord(formData)
}
resetForm();
}
// Read operation using this function
function readFormData(){
var formData = {};
formData["fullName"] = document.getElementById("fullName").value;
formData["empCode"] = document.getElementById("empCode").value;
formData["salary"] = document.getElementById("salary").value;
formData["city"] = document.getElementById("city").value;
return formData;
}
// Create operation
function insertNewRecord(data){
var table = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.length);
var cell1 = newRow.insertCell(0);
cell1.innerHTML = data.fullName;
var cell2 = newRow.insertCell(1);
cell2.innerHTML = data.empCode;
var cell3 = newRow.insertCell(2);
cell3.innerHTML = data.salary;
var cell4 = newRow.insertCell(3);
cell4.innerHTML = data.city;
var cell5 = newRow.insertCell(4);
cell5.innerHTML = `<a href="#" onClick='onEdit(this)'>Edit</a>
<a href="#" onClick='onDelete(this)'>Delete</a>`;
}
// To Reset the data of fill input
function resetForm(){
document.getElementById('fullName').value = '';
document.getElementById('empCode').value = '';
document.getElementById('salary').value = '';
document.getElementById('city').value = '';
selectedRow = null;
}
// For Edit operation
function onEdit(td){
selectedRow = td.parentElement.parentElement;
document.getElementById('fullName').value = selectedRow.cells[0].innerHTML;
document.getElementById('empCode').value = selectedRow.cells[1].innerHTML;
document.getElementById('salary').value = selectedRow.cells[2].innerHTML;
document.getElementById('city').value = selectedRow.cells[3].innerHTML;
}
function updateRecord(formData){
selectedRow.cells[0].innerHTML = formData.fullName;
selectedRow.cells[1].innerHTML = formData.empCode;
selectedRow.cells[2].innerHTML = formData.salary;
selectedRow.cells[3].innerHTML = formData.city;
}
function onDelete(td){
if(confirm('Are you sure you want to delete this record?')){
row = td.parentElement.parentElement;
document.getElementById('employeeList').deleteRow(row.rowIndex);
resetForm();
}
}Why CRUD is important?
Crud is really important to learn in the development of a system these is always used in (SQL databases) and for (database design cases). In addition without CRUD almost of software developers can create a system which is really beneficial.
Advantages of CRUD Operations
The advantages of CRUD application is they streamlines the security control by meeting a variety of access conditions, among other things.
It simplifies and facilitates application design, making it easier and more scalable. It performs better when compared to ad-hoc SQL statements.
How does Crud Operation work?
The CRUD work simple by creating, reading, updating, and deleting data from the database. These are the four most fundamental operations that most traditional database systems can execute, and they provide the foundation for interacting with any database.
About the Project
A CRUD allows a user to add many employee records, each with their own name, code, salary, and address.
The user can add data, delete data at any time, and amend the record details if they need to update certain information.
Project Details and Technology
| Project Name: | Crud Operation in JavaScript With Source Code |
| Abstract | This CRUD Operation In JavaScript Example uses a lot of JavaScript to perform validations on different portions of the project. |
| Language/s Used: | JavaScript |
| JavaScript version (Recommended): | ES2015 |
| Database: | MYSQL |
| Type: | Web Application |
| Developer: | Source Code Hero |
| Updates: | 0 |
To begin writing a CRUD, make sure you have a platform for writing JavaScript, CSS, bootstrap, and HTML installed on your machine; in my instance, I’ll use Sublime Text.
Steps how to run the project
Time needed: 3 minutes
- Step 1: Download Source Code
To get started, find the downloaded source code file below and click to start downloading it.
- Step 2: Extract File
Navigate to the file’s location when you’ve finished downloading it and right-click it to extract it.
- Step 3: Run the project
click the index.html inside the folder to start executing the project.
Download Source Code below
Summary
For those Web developers interested in learning more about web apps, this system is a fully functional project.
Related Articles
- CRUD Operation In PHP With Source Code
- CRUD Operation in ASP.net with Source Code
- CRUD Operations In Python With Source Code
- CRUD Operation In Django With Source Code
- CRUD Operations In Java With Source Code
Inquiries
If you have any questions or comments on the project, please leave a comment below.