How to create a Student Management Crud Operation

How to create a Student Management Crud Operation with Jquery

The Student Management CRUD (Add, Read, Update, Delete) Project using jQuery and local storage is a simple yet effective web-based application that allows users to manage student data dynamically. This project demonstrates the power of jQuery, a popular JavaScript library, in creating a responsive and interactive user interface, combined with the ability to store data persistently using the browser's local storage mechanism. It also showcases the integration of basic HTML forms and tables to interact with and display data in a user-friendly manner.

Project Overview

At its core, this project aims to streamline the management of student data. Users can input a student's name and age through a simple form, which is designed with basic HTML input fields for capturing these details. A unique feature of this form is its dual functionality: it can both add new student entries and update existing ones. This dynamic form enhances the user experience by automatically adjusting based on the user's actions—when editing a student, for example, the form changes to indicate that an update is taking place.

The project employs jQuery for handling user interactions and DOM manipulations. jQuery simplifies the process of capturing form submissions, updating the displayed student data, and dynamically interacting with HTML elements like buttons and tables. With just a few lines of code, jQuery can efficiently handle events such as adding, editing, and deleting students, making the project lightweight and responsive.

Data Persistence with Local Storage

One of the most valuable features of this project is the integration of local storage. Local storage is a built-in browser feature that allows for data storage on the client side without requiring a backend or database. This makes the project accessible and easy to deploy, as it does not depend on server-side technologies. By utilizing local storage, the student data is saved directly to the user's browser, meaning it persists across page reloads, browser closures, and sessions until explicitly removed by the user.

Whenever a student is added, updated, or deleted, the updated data is immediately stored in local storage. This is done by converting the students array into a JSON string and saving it using the localStorage.setItem() method. On the flip side, when the page loads, the application checks local storage for any existing student data and automatically repopulates the table with that data. This ensures that users do not lose their entries even if they refresh the page or close and reopen their browser.

User Interface and Design

The interface of the project is clean and simple, focusing on usability. The form to add or update student data is placed at the top, with the student table directly below it. The table uses basic HTML for structure, but CSS styles are applied to improve readability and layout. Padding, margins, and hover effects give the form elements and buttons a polished look. Color-coded buttons for adding, editing, and deleting students ensure that users can quickly understand what actions they can take. For instance, the "Add Student" button is green, the "Edit" button is blue, and the "Delete" button is red. These color choices help reinforce the different actions, enhancing the user experience.

Real-World Applications

While the project is a simplified CRUD application, it serves as a foundation for more complex systems. Student management systems are frequently used in educational institutions to keep track of student information, grades, attendance, and more. This project simulates a small part of such systems by focusing on adding and managing basic details like names and ages. However, the same structure could be extended to handle more comprehensive data, such as course enrollments, contact information, or academic performance.

By incorporating local storage, the project eliminates the need for a back-end server, making it ideal for small-scale applications, personal projects, or offline tools. It demonstrates how modern web technologies can be leveraged to create practical and efficient solutions without needing complex infrastructure.

Source Code

Copy and paste this code in your index.html

<!DOCTYPE html>

<head>

<title>Student Crud Table</title>

<style>

form {

margin-bottom: 20px;

}

input[type="text"], input[type="number"] {

padding: 5px;

margin: 5px 0;

width: 200px;

}

button {

padding: 5px 10px;

margin: 5px 0;

cursor: pointer;

color: white;

}

table {

width: 100%;

border-collapse: collapse;

}

table, th, td {

border: 1px solid #ccc;

}

th, td {

padding: 10px;

text-align: left;

}

.action-buttons {

display: flex;

gap: 10px;

}

.action-buttons button {

padding: 5px 10px;

}

/* Button Colors */

#save-student {

background-color: #28a745; /* Green */

}

.edit-student {

background-color: #007bff; /* Blue */

}

.delete-student {

background-color: #dc3545; /* Red */

}

/* Hover Effects */

#save-student:hover {

background-color: #218838;

}

.edit-student:hover {

background-color: #0069d9;

}

.delete-student:hover {

background-color: #c82333;

}

</style>

</head>

<body>

<h1>Student Management CRUD with jQuery</h1>

<button type="submit" id="save-student">Add Student</button>

</form>

<thead>

<tr>

<th>Actions</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

$(document).ready(function() {

let students = JSON.parse(localStorage.getItem('students')) || [];

let editIndex = -1;

// Render the student table on page load

renderTable();

// Add or update student

$('#student-form').submit(function(event) {

event.preventDefault();

const name = $('#student-name').val();

const age = $('#student-age').val();

if (editIndex === -1) {

// Add new student

students.push({ name, age });

} else {

// Update existing student

students[editIndex] = { name, age };

editIndex = -1;

}

// Save the updated students array to localStorage

localStorage.setItem('students', JSON.stringify(students));

$('#student-form')[0].reset();

$('#save-student').text('Add Student');

renderTable();

});

// Render the student table

function renderTable() {

const $tableBody = $('#student-table tbody');

$tableBody.empty();

students.forEach((student, index) => {

const $row = $(`

<tr>

<td>${student.name}</td>

<td>${student.age}</td>

<td>

<button class="delete-student" data-index="${index}">Delete</button>

</div>

</td>

</tr>

`);

$tableBody.append($row);

});

}

// Edit student

$(document).on('click', '.edit-student', function() {

editIndex = $(this).data('index');

const student = students[editIndex];

$('#student-name').val(student.name);

$('#student-age').val(student.age);

$('#save-student').text('Update Student');

});

// Delete student

$(document).on('click', '.delete-student', function() {

const index = $(this).data('index');

students.splice(index, 1);

// Save the updated students array to localStorage

localStorage.setItem('students', JSON.stringify(students));

renderTable();

});

</script>

</body>

</html>

Vintagtech

How to create a Student Management Crud Operation - Free source code