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

Show


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: http://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 = 'http://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

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", "http://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";
    }// 

}