Spring Boot Ajax jQuery Crud Application

This Spring boot Ajax jQuery Crud tutorial will teach you how to do basic database functions that are CREATE, RETIEVE, UPDATE ,DELETE data using MySQL Database. The main purpose of we have use Ajax is without refresh the page.this project we covered all the crud operations.

The package structure, you must following the standard package structure of spring boot and spring framework.for the example i have created the project name SpringCrud

com.example.student
-------------------->studentApplication.java 
// This is the main class of the programme where the programming runs.
 
Spring Boot MVC Structure
|
-------------------->Studentservice.java
com.example.student.service
|
--------------------->StudentController
com.example.student.controller
|
----------------------> Studentrepository.java
com.example.student.repository
|
-----------------------> Student.java
com.example.student.Entity

First you must Create the package com.example.student.Entity. inside the package you have to create the class.

Entity annotation @Entity indicate as Entity of class.

Student.java

@Entity
public class Student {
    @Id
    @GeneratedValue(strategy= GenerationType.IDENTITY)
    private Long id;
    private String studentname;
    private String course;
    private int fee;
    public Student() {

    }
    public Student(Long id, String studentname, String course, int fee) {
    
        this.id = id;
        this.studentname = studentname;
        this.course = course;
        this.fee = fee;
    }
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getStudentname() {
        return studentname;
    }
    public void setStudentname(String studentname) {
        this.studentname = studentname;
    }
    public String getCourse() {
        return course;
    }
    public void setCourse(String course) {
        this.course = course;
    }
    public int getFee() {
        return fee;
    }
    public void setFee(int fee) {
        this.fee = fee;
    }

}

after that you have to Create the package com.example.student.controller . inside the package you have to create the class

StudentController.java

package com.example.emp.controller;

import java.util.List;

import com.example.emp.repository.StudentRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;


import com.example.emp.domain.Student;
import com.example.emp.service.StudentService;

@RestController
@RequestMapping("Student")
public class StudentController {

     @Autowired
        private StudentService service;

    private StudentRepository studentRepository;

        @RequestMapping(value = "/save", method = RequestMethod.POST)
        public String saveStudent(@ModelAttribute("student") Student std) {
            service.save(std);
            return "{\"status\":\"success\"}";
        }

        @RequestMapping(value = "/list", method = RequestMethod.GET)
        public List<Student> listStudents() {
            List<Student> liststudent = service.listAll();
            return liststudent;
        }


    @RequestMapping(value = "/get/{id}")
    public Student getStudentPage(@PathVariable(name = "id") int id) {
        Student stdd = service.getid(id);
        return stdd;
    }


    @PostMapping(value = "/edit/{id}")
    public String updateStudent(@PathVariable("id") long id,  Student student)
    {
        student.setId(id);
        service.save(student);
        return "{\"status\":\"success\"}";

    }

        @RequestMapping("/delete/{id}")
        public String deletestudent(@PathVariable(name = "id") int id) {
            service.delete(id);
            return "{\"status\":\"success\"}";
        }

}

First you must Create the package com.example.student.service . inside the package you have to create the class

Studentservice.java

@Service
public class StudentService {
    
    @Autowired
    private StudentRepository repo;
    
    public List<Student> listAll() {
        return repo.findAll();
    }
     
    public void save(Student std) {
        repo.save(std);
    }



    public Student getid(long id) {
        return repo.findById(id).get();
    }



    public Student get(long id) {
        return repo.findById(id).get();
    }
     
    public void delete(long id) {
        repo.deleteById(id);
    }

}

StudentRepository.java

First you must Create the package com.example.Student.repository inside the package you have to create the Interface here.

@Repository
public interface StudentRepository extends JpaRepository<Student, Long> {

}

After that you must set database path and project configuration in application.properties file.

spring.application.name=crudnew
server.port=8084
spring.jpa.hibernate.ddl-auto=update
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/ajaxschool?createDatabaseIfNotExist=true
spring.datasource.username=root
spring.datasource.password=root123
#jpa vendor adapter configuration
spring.jpa.database-platform=org.hibernate.dialect.MySQL57Dialect
spring.jpa.generate-ddl=true
spring.jpa.show-sql=true

Create the Page of Front End as index.html

index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/cosmo/bootstrap.min.css" />
    <script src="component/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" ></script>
    <link href="component/DataTables/datatables.min.css" rel="stylesheet" type="text/css"/>

</head>
<body>
<nav class="navbar navbar-dark bg-dark">
    <h3 style="color:white;">Student Management Crud Ajax</h3>
</nav>

</br>


<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <form id="frmStudent" name="frmStuent">

                <div class="form-group" align="left">
                    <label>Student Name</label>
                    <input type="text" id="studentname" name="studentname" placeholder="Student Name" class="form-control" required>
                </div>

                <div class="form-group" align="left">
                    <label>Course</label>
                    <input type="text" id="course" name="course" placeholder="Course" class="form-control" required>
                </div>

                <div class="form-group" align="left">
                    <label>Fee</label>
                    <input type="text" id="fee" name="fee" placeholder="Fee" class="form-control" required>
                </div>

                <div class="form-group" align="left">
                    <button type="button" class="btn btn-success" id="save" >
Buy the Source Code Here
i have attached the video link below. which will do this tutorials step by step.

admin