Crud Operations In JavaScript With Source Code

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
AbstractThis 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.

    Crud Operation in Javascript download

  • Step 2: Extract File

    Navigate to the file’s location when you’ve finished downloading it and right-click it to extract it.

    Crud Operation in Javascript extract

  • Step 3: Run the project

    click the index.html inside the folder to start executing the project.
    Crud Operation in Javascript index

Download Source Code below

Summary

For those Web developers interested in learning more about web apps, this system is a fully functional project.

Inquiries

If you have any questions or comments on the project, please leave a comment below.

Leave a Comment