Framework Version

Front End React Js 18.3.1

Java Spring Boot Spring boot 3.x, 21
Back-End Express JS ?
Data SQL Server 2022
Suport Folder in Update

Tailwind, AntDesign, React Router Dom, Icon: https://iconify.design/ Front End

Lombok, OAuth2, Map Struct, JPA , Hibernate,... Back End
Back End
Back End
IDE

VS code 1.91.1
Intellij

SQL Server Management Studio 22

Mock Project - React Coding Convention
File and Folder Sử dụng React bản mới nhất

Tên File và Folder

Tên file, folder, component viết

hoa mỗi chữa cái đầu của từ

Mỗi trang Page thì đặt name+page

Với mỗi trang page nên đặt tên là tên

của page + chữ page phía sau

Các Page sẽ được bỏ trong folder Page và trong folder Page sẽ có các folder của từng page lớn thí dụ Home, Acc

Những Page Sẽ được tạo ở Folder Page và

trong folder page sẽ chia thành 2 folder
AdminPages và ClientPages tự bỏ vào đúng
phần của giao diện -> Trong 2 folder vừa đề
cập tạo 1 folder là tên của page đang làm
trong folder tiếp theo đặt tên giao diện phải
có chữ page

Các tài nguyên file có định dạng khác sẽ bỏ trong folder Assets thí dụ file png, .doc,..

Các tài nguyên như logo, tài liệu đọc

hay nhưng gì không phải file js sẽ bỏ
vào folder Assets
 Các tài nguyên như logo, tài liệu đọc
hay nhưng gì không phải file js sẽ bỏ
vào folder Assets

Folder Components sẽ chưa các components của từng page

Trong folder components sẽ tạo ra

folder trùng với tên folder bên phía
page để xác định components nào
của page nào và nhưng components
dùng chung sẽ bỏ trong folder
SharedComponents

Folder Routes sẽ chứa các đường dẫn của từng page tương ứng với từng folder bên trong folder Pages
Layout sẽ được bỏ trong folder layout

Layout của các page sẽ bỏ trong

folder Layout và tạo folder tương
ứng với layout, component của
layout sẽ được bỏ trong
SharedComponents

Unltis sẽ là folder chứa các hàm mà sử dụng để thực hiện chức năng nào đó chung

Cấu hình Redux sẽ được bỏ trong folder Redux

File css và scss

Trong mỗi Folder của page thì

tạo thêm 1 folder css nếu
dùng css trong đó sẽ chứa
các file css của các page con
 Trong mỗi Folder của page thì
tạo thêm 1 folder css nếu
dùng css trong đó sẽ chứa
các file css của các page con

Biến và Hàm
Các biến sử dụng chung sẽ được để ở bên trong redux
Sử dụng lowCamelCase khi đặt tên
currentUser biến bình thường, hàm, hằng số hằng, biến và hàm, UpperCamelCas
CurrentUser đặt cho class (cả chữ cái đầu tiên viết hoa) khi đặ
CURRENT_USER Biến tĩnh và toàn cục tên lớp và UPPER_SNAKE_CASE
khi đặt tên biến toàn cục hoặc biến
tĩnh. Điều này sẽ giúp bạn dễ dàng
phân biệt giữa các biến đơn giản,
hàm, lớp yêu cầu khởi tạo và các
biến được khai báo ở phạm vi mô-
đun toàn cục.

Công cụ hỗ trợ
Css: Tailwind, AntDesign
Icon: React Icon, AntDesign, https://iconify.design/
Modal: AntDesign, React Modal
Lấy Api: axios
IDE: Visua Studio Code
g React bản mới nhất
Cấu Hình Tổng quát

được tạo ở Folder Page và

age sẽ chia thành 2 folder
ClientPages tự bỏ vào đúng
ện -> Trong 2 folder vừa đề
là tên của page đang làm
theo đặt tên giao diện phải
ó chữ page
 Trong Folder Route chứa các file route
tương ứng với mỗi folder trong pages hình
1-> trong mỗi file route cấu hình theo mảng
và export hình 2 -> sau khi có mảng thì gọi
nó bên file index trong folder routes hình 3 -
> gọi route cấu hình ở file app.js hình 4
ng lowCamelCase khi đặt tên
iến và hàm, UpperCamelCase
ữ cái đầu tiên viết hoa) khi đặt
p và UPPER_SNAKE_CASE
t tên biến toàn cục hoặc biến
Điều này sẽ giúp bạn dễ dàng
biệt giữa các biến đơn giản,
lớp yêu cầu khởi tạo và các
ược khai báo ở phạm vi mô-
đun toàn cục.
ng Folder Route chứa các file route
ứng với mỗi folder trong pages hình
ng mỗi file route cấu hình theo mảng
ort hình 2 -> sau khi có mảng thì gọi
file index trong folder routes hình 3 -
i route cấu hình ở file app.js hình 4
Mock Project - NodeJs Coding Convention
File and Folder Cấu Hình Tổng
Tên File và Folder

Đặt theo kiểu camelCase.

Các Thư Mục trong Source Code

src/: Chứa mã nguồn chính của dự án.
controllers/: Chứa các controller.
models/: Chứa các model.
routes/: Chứa các file định tuyến.
services/: Chứa các service.
middlewares/: Chứa các middleware.
config/: Chứa các cấu hình.
utils/: Chứa các tiện ích chung.
tests/: Chứa các test case.

Tên Biến, Tên Method

Biến: Đặt theo camelCase. Ví dụ: userName.
Method: Đặt theo camelCase. Ví dụ: getUserName().
Tạo một thư mục common/ chứa các file định nghĩa hằng số và biến môi trường

Viết Comment
Line Comment: Đặt trên dòng cần chú thích, bắt đầu bằng '//'
Khối try catch
Block Comment: Đặt trên khối code cần chú thích, bắt đầu và kết thúc bằng '/* */'

Method Comment: Sử dụng JSDoc để mô tả function/method.

Framework và Thư Viện

Framework chính: Express.js
Thư viện:
Database: mssql
Authentication: JWT

IDE
IDE: Visual Studio Code (VSCode)
Phiên bản: Sử dụng phiên bản mới nhất
u Hình Tổng quát
Mock Project - Java Coding Convention
package model.dao; Tên package phải viết bằng chữ thường

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
Phần import các class của java
import util.Constant; được đặt ở cùng nhóm với nhau
import util.Util; và đặt ngay sau khai báo package

import model.bean.Departments;
import model.bean.Designation;
import model.bean.EmpStatus;
import model.bean.EmployeeDetails;
import model.bean.Establishment;
import model.bean.Functions; Phần import các class của mình tự viết thì
import model.form.EmployeeDetailsForm; để ở sau cùng trong vùng import

/**
* EmploymentDetailsDAO
*
* Version 1.0
* Tạo comment cho phần mô tả class tương tự
* Date: 12-11-2013 như thế này
*
* Copyright Lưu ý: Date ở đây được định dạng theo format
* là DD-MM-YYYY
* Modification Logs:
* DATE AUTHOR DESCRIPTION
* -----------------------------------------------------------------------
* 12-11-2013 HuyNT2 Create
*/
public class EmploymentDetailsDAO extends BaseDAO {
Connection con;
PreparedStatement preState; Tên class phải bắt đầu bằng chữ Hoa, các
ResultSet rs; từ nối cũng viết hoa chữ cái đầu
 Tên class phải bắt đầu bằng chữ Hoa, các
từ nối cũng viết hoa chữ cái đầu

/**
* get data for Job Details page
* @param establishmentCode
* @return
* @throws DAOException
*/
public EmployeeDetailsForm getDataForUpdateJobDetails(String establishmentCode) throws DAOException {
con = connectDb(Constant.DRIVER, Constant.CONNECT_STRING, Constant.USER, Constant.PASSWORD);
EmployeeDetailsForm form = new EmployeeDetailsForm();

try {
//select data form EmployeeDetails Tạo comment cho hàm tương tự như thế
này
preState = con.prepareStatement("SELECT establishmentCode, jdEmpStatus, jdDoj, jdFunctions, "+
preState.setString(1, establishmentCode);
rs = preState.executeQuery(); "get data for Job Details page" là ví dụ về
nội dung mô tả nhiệm vụ của hàm
while(rs.next()) {
form.setEstablishmentCode(rs.getString(1));
form.setJdEmpStatus(rs.getString(2));
}

//select data from EmpStatus

ArrayList<EmpStatus> arrayEmpStatus = new ArrayList<EmpStatus>(); Comment cho 1 đoạn code thì có 2 dấu /
EmpStatus empStatus = null; ở trước và đặt ngay phía trên dòng code
preState = con.prepareStatement("SELECT empStatusId, empStatusNameđầuFROM
tiên EmpStatus");
của đoạn code cần comment
rs = preState.executeQuery();

while(rs.next()) {
empStatus = new EmpStatus();
empStatus.setEmpStatusId(rs.getInt(1));
empStatus.setEmpStatusName(rs.getString(2));
arrayEmpStatus.add(empStatus);
}

} catch (SQLException e) {
throw new DAOException("Method getDataForUpdateJobDetails error.");
Đối với khối try catch thì tuân thủ theo convention:
} finally { try {
closeConnect(con); // TODO
} } catch (ABCException e) {
return form; // TODO
} } finally {
// TODO
}

Ví dụ như sau là KHÔNG ĐÚNG:

try
 // TODO
} catch (ABCException e) {
// TODO
} finally {
// TODO
/** }
* check existence of employee
* @param establishmentCode Ví dụ như sau là KHÔNG ĐÚNG:
* @return try
* @throws DAOException {
*/ // TODO
public boolean checkEmployeeDetailsIsExist(String establishmentCode) throws DAOException
} catch (ABCException e) {
con = connectDb(Constant.DRIVER, Constant.CONNECT_STRING,
{ Constant.USER, Constant.PASSWORD);
// TODO
try {
}
preState = con.prepareStatement("SELECT establishmentCode FROM EmployeeDetails " +
finally {
WHERE establishmentCode = ?);
// TODO
}
preState.setString(1, establishmentCode);
rs = preState.executeQuery();

if(rs.next()) {
return true;
}

} catch (SQLException e) {
throw new DAOException("Method checkEmployeeDetailsIsExist error.");
} finally {
closeConnect(con);
}
return false;
}
Tên hàm phải bắt đầu bằng chữ thường,
/** các từ nối tiếp theo sẽ viết hoa chữ cái
* insert data for employee đầu
* @param employee
* @throws DAOException
*/
public void insertJobDetails(EmployeeDetails employee) throws DAOException {
con = connectDb(Constant.DRIVER, Constant.CONNECT_STRING, Constant.USER, Constant.PASSWORD);

try {
preState = con.prepareStatement("INSERT INTO EmployeeDetails VALUES(?, ?, ?, ?, ?, ?, NULL, ?, ?) ");
Tên biến phải bắt đầu bằng chữ thường,
preState.setInt(1, employee.getEstablishmentCode()); các từ nối tiếp theo sẽ viết hoa chữ cái
preState.setInt(2, employee.getJdEmpStatus()); đầu
preState.setDate(3, employee.getJdDoj());
 Tên biến phải bắt đầu bằng chữ thường,
các từ nối tiếp theo sẽ viết hoa chữ cái
đầu

preState.setInt(4, employee.getJdFunctions());
preState.setInt(5, employee.getJdDept());
preState.setInt(6, employee.getJdDesignation());
preState.setString(7, employee.getNdPFnum());
preState.setString(8, employee.getNdEPSnum());
preState.executeUpdate();

} catch (SQLException e) { Không được dùng tab để canh biên mà

throw new DAOException("Method insertJobDetails error."); phải thay thế 1 tab bằng 4 space
} finally {
closeConnect(con);
}
}

/**
* get data for Update to Details page
* @param establishmentCode
* @return
* @throws DAOException Khối lệnh while có convention như sau:
*/
while throws
public EmployeeDetailsForm getDataForUpdateReportToDetails(String establishmentCode) (điều kiện) {
DAOException {
// TODO Constant.PASSWORD);
con = connectDb(Constant.DRIVER, Constant.CONNECT_STRING, Constant.USER,
EmployeeDetailsForm form = new EmployeeDetailsForm(); }

try { Ví dụ như sau là KHÔNG ĐÚNG:

preState = con.prepareStatement("SELECT rdEmpCode FROM EmployeeDetails
while (điều kiện)WHERE establishmentCode = ?"
preState.setInt(1, Integer.parseInt(establishmentCode)); {
rs = preState.executeQuery(); // TODO
while(rs.next()) { }
form.setRdEmpCode(rs.getString(1));
}

ArrayList<Establishment> arrayEstablishment = new ArrayList<Establishment>();

Establishment establishment = null;
preState = con.prepareStatement("SELECT establishmentCode, firstName FROM Establishment");
rs = preState.executeQuery();
while(rs.next()) {
establishment = new Establishment();
establishment.setEstablishmentCode(rs.getInt(1));
establishment.setFirstName(rs.getString(2));
establishment.setDisplayName(rs.getString(2) + " - " + rs.getInt(1));
arrayEstablishment.add(establishment);
Comment như thế này là KHÔNG Đ
về nguyên tắc comment phải có tác
cho 1 hay nhiều dòng code đứng ng
dòng Comment.
 } Comment như thế này là KHÔNG Đ
form.setArrayEstablishment(arrayEstablishment); về nguyên tắc comment phải có tác
cho 1 hay nhiều dòng code đứng ng
} catch (SQLException e) { dòng Comment.
throw new DAOException("Method getDataForUpdateReportToDetails error.");
} finally { Do đó, trong trường hợp này dấu }
closeConnect(con); dòng trên không được dính với com
}
ở dòng dưới. Tức là phải có 1 dòng
giữa dấu } (ở dòng trên) với dòng
return form;
}
/**
* insert data of salary for employee
* @param fr
* @throws DAOException
*/
public void insertSalaryDetails(EmployeeDetailsForm fr) throws DAOException {
con = connectDb(Constant.DRIVER, Constant.CONNECT_STRING, Constant.USER, Constant.PASSWORD);

try {
preState = con.prepareStatement("INSERT INTO Salary VALUES(?, ?, ?, ?)");

preState.setString(1, fr.getEstablishmentCode());
preState.setDate(2, Util.convertStringToSqlDate(fr.getSdDate()));

if("".equals(fr.getSdFixedCTC())) {
preState.setString(3, null);

} else {
preState.setInt(3, Integer.parseInt(fr.getSdFixedCTC()));
} Khối lệnh if có convention như sau:

if (điều kiện) {
preState.executeUpdate(); // TODO
} else {
} catch (SQLException e) { // TODO
throw new DAOException("Method insertSalaryDetails error."); }
} finally {
closeConnect(con); Ví dụ như sau là KHÔNG ĐÚNG:
} if (điều kiện)
} {
} // TODO
}
else {
// TODO
}
 Ví dụ như sau là KHÔNG ĐÚNG:
if (điều kiện)
{
// TODO
}
else {
// TODO
}

Variable : userAddress
Method: getUserAddress
File and folder: userController

framework: spring boot 3.3.2

jdk phiên bản 21
ide inteliji phiên bản 2014.1.4
phiên bản java 11

maven https://drive.google.com/drive/folders/1t_ipYM4IfxSUe2xtSCCwWMH8NPc5pLkN?usp=
yaml

Biến common: SCREAMING_SNAKE_CASE

tên bảng + tên cột : snake_case

response entity để trả về frontend

Cấu trúc folder dự án

Folder Controller sẽ chứa những file controller của từng service.

Folder entity sẽ dùng để chứa các class được ánh xạ với các table trong sql

Folder repository chứa các interface được kế thừa lại JpaRepository để tương tác trực tiếp vớ
Mỗi repository sẽ tương ứng với 1 entity
 Folder service để chứa các folder của từng service riêng
Từng folder service sẽ chứa 1 interface để định nghĩa các phương thức và 1 cla

Folder dto sẽ chứa 2 folder con là request

Trong mỗi folder request, response thì sẽ chứa các lớp tương ứng với đối tượng được

Folder commons dùng để lưu các enum để lưu trữ hằn

Folder configuration để chứa các class cấu hình chung

Folder base_exception chứa các lỗi trong hệ

Folder mapper để chứa các interface để chu

hì

class tương tự

ạng theo format

Y

a, các
u
a, các
u

m tương tự như thế

y

ails page" là ví dụ về
iệm vụ của hàm

ạn code thì có 2 dấu /

y phía trên dòng code
n code cần comment
mentCode = ?);

thường,
chữ cái

NULL, ?, ?) ");
chữ thường,
hoa chữ cái
 chữ thường,
hoa chữ cái

để canh biên mà
ằng 4 space

ntion như sau:

ĐÚNG:
stablishmentCode = ?");

ư thế này là KHÔNG ĐÚNG,

c comment phải có tác dụng
ều dòng code đứng ngay sau
dòng Comment.
ư thế này là KHÔNG ĐÚNG,
c comment phải có tác dụng
ều dòng code đứng ngay sau
dòng Comment.

g trường hợp này dấu } của

ông được dính với comment
Tức là phải có 1 dòng trắng
(ở dòng trên) với dòng /**

n như sau:

G ĐÚNG:
G ĐÚNG:

MH8NPc5pLkN?usp=sharing
để tương tác trực tiếp với cơ sở dữ liệu
entity
 service riêng
các phương thức và 1 class implement lại interface và hiện thực các phương thức đó

ứa 2 folder con là request và response

ứng với đối tượng được gửi từ frontend lên hoặc hệ thống trả về đổi với response

các enum để lưu trữ hằng số

 các class cấu hình chung cho hệ thống

ption chứa các lỗi trong hệ thống có thể bắt được.

hứa các interface để chuyển đổi giữa dto và entity