Hướng dẫn javascript front end examples - ví dụ về giao diện người dùng javascript

Phân tích

Học cách viết API  JSP/Servlet

Chương trình quản lý sinh viên: Hiển thị danh sách, thêm, sửa, xoá
Trường thông tin cần quản lý với 1 sinh viên: rollno, fullname, email, address, birthday

Backend: [Server : JSP/Servlet]
	- Chức năng

Frontend: [HTML/CSS/JS + Bootstrap]
	- Hiển thị => Tạo giao diện của web.

=================================================
Các bước phát triển
=================================================
B1. Định Nghĩa API

Base URL: //localhost:8080/StudentManagement

API_1: Lấy danh sách sinh viên
	Tên API : /api/student/list
	Method: GET
	Request: NONE
	Response: [
		{
			'rollno': 'R001',
			'fullname': 'Tran Van A',
			'email': '',
			'address': 'Nam Dinh',
			'birthday': '1999-02-06'
		},{
			'rollno': 'R002',
			'fullname': 'Tran Van B',
			'email': '',
			'address': 'Nam Dinh',
			'birthday': '1999-06-06'
		}
	]

API_2: Them sinh vien
	Ten API: /api/student/add
	Method: POST
	Request: 'data': {
		'rollno': 'R003',
		'fullname': 'Tran Van C',
		'email': '',
		'address': 'Nam Dinh',
		'birthday': '1999-08-06'
	}
	Response: {
		'status': 'success', //error, succes
		'message': 'Them sinh vien thanh cong'
	}

API_3: Sua thong tin sinh vien
	Ten API: /api/student/update
	Method: POST
	Request: 'data': {
		'rollno': 'R003',
		'fullname': 'Tran Van C',
		'email': '',
		'address': 'Nam Dinh',
		'birthday': '1999-08-06'
	}
	Response: {
		'status': 'success', //error, succes
		'message': 'Them sinh vien thanh cong'
	}
API_4: Xoa sinh vien
	Ten API: /api/student/delete
	Method: POST
	Request: 'data': {
		'rollno': 'R003'
	}
	Response: {
		'status': 'success', //error, succes
		'message': 'Them sinh vien thanh cong'
	}

B2. Phat trien Backend
Thiet ke database : StudentManagement
create table student [
	rollno varchar[20] primary key,
	fullname varchar[50],
	email varchar[150],
	address varchar[200],
	birthday date
]

Ket noi CSDL  Project
ORM [Entity] => Project

const BASE_URL = '//localhost:8080/StudentMgr'

// Sinh Vien
const API_STUDENT_LIST = '/api/student/list'
const API_STUDENT_ADD = '/api/student/add'
const API_STUDENT_UPDATE = '/api/student/update'
const API_STUDENT_DELETE = '/api/student/delete'

	Danh Sách Sinh Viên
	
	

	
	

	
	

	
	

	


	

		

			

				
Danh Sách Sinh Viên
			
			

				
							RollNo
							FullName
							Email
							Birthday
							Address
						
			
		
	

	
		$[function[] {
			$.get[BASE_URL + API_STUDENT_LIST, function[data] {
				var studentList = data//JSON.parse[data]
				for [var i = studentList.length - 1; i >= 0; i--] {
					$['#studentList'].append[`
							${studentList[i].rollno}
							${studentList[i].fullname}
							${studentList[i].email}
							${studentList[i].birthday}
							${studentList[i].address}
						`]
				}
			}]
		}]
	

Backend

  
    org.eclipse.persistence.jpa.PersistenceProvider
    entities.Student
    
      
      
      
      
    
  

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package servlet;

import com.google.gson.Gson;
import entities.Student;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.persistence.EntityManager;
import javax.persistence.EntityManagerFactory;
import javax.persistence.Persistence;
import javax.persistence.Query;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 *
 * @author Diep
 */
public class APIStudentListServlet extends HttpServlet {

    /**
     * Processes requests for both HTTP GET and POST
     * methods.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void processRequest[HttpServletRequest request, HttpServletResponse response, String json]
            throws ServletException, IOException {
        response.setContentType["application/json;charset=UTF-8"];
        response.setHeader["Access-Control-Allow-Origin", "//localhost:82"];
        response.setHeader["Access-Control-Allow-Methods", "GET"];
        try [PrintWriter out = response.getWriter[]] {
            /* TODO output your page here. You may use following sample code. */
            out.println[json];
        }
    }

    // 
    /**
     * Handles the HTTP GET method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doGet[HttpServletRequest request, HttpServletResponse response]
            throws ServletException, IOException {
        EntityManagerFactory factory = Persistence.createEntityManagerFactory["StudentMgrPU"];
        EntityManager em = factory.createEntityManager[];
        
        Query q = em.createNamedQuery["Student.findAll", Student.class];
        
        List list = q.getResultList[];
        
        //convert string => object hoac nguoc lai => lib gson
        Gson gson = new Gson[];
        String json = gson.toJson[list];
        
        processRequest[request, response, json];
    }

    /**
     * Handles the HTTP POST method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doPost[HttpServletRequest request, HttpServletResponse response]
            throws ServletException, IOException {
    }

    /**
     * Returns a short description of the servlet.
     *
     * @return a String containing servlet description
     */
    @Override
    public String getServletInfo[] {
        return "Short description";
    }// 

}