Skip to main content

[Tutorial] Series hướng dẫn phát triển ứng dụng Java Spring trên Heroku (P3) : Phát triển web app quản lý nhân viên đơn giản

phần 1phần 2, mình đã giới thiệu với các bạn cách đăng kí tài khoản Heroku, tạo một repository trên GitHub, cài đặt các công cụ cần thiết và tạo một ứng dụng Hello World! Hôm nay chúng ta sẽ viết web app quản lý nhân viên đơn giản gồm các chức năng đăng nhập, đăng xuất và xem / thêm / xoá / sửa nhân viên sử dụng Spring MVC

I. Thêm database vào ứng dụng Heroku

Trên Heroku hỗ trợ rất nhiều CSDL như MySQL, Oracle, MariaDB, PostgreSQL. Tất cả các dịch vụ CSDL này đều có gói miễn phí, tuy nhiên cần có thẻ tín dụng. Tuy nhiên Heroku Postgres lại có bản miễn phí không cần thẻ tín dụng

Để cài đặt Heroku Postgres, truy cập vào địa chỉ https://elements.heroku.com/addons/heroku-postgresql và nhấn Install Heroku Postgres

 

Một hộp thoại nhỏ xuất hiện, chọn gói Hobby Dev – Free, sau đó nhấn Provision

Điền tên app muốn cài đặt Heroku Postgres, sau đo nhấn Continue

 

Sau đó Heroku sẽ dẫn đến trang Resources, ở phần Add-ons, nhấn vào Heroku Postgres :: Database để truy cập trang Dashboard của database

 

Kéo xuống đến phần Administration, nhấn View Credential

 

Thông tin kết nối đến CSDL được hiển thị trong phần này

Tiếp theo, chúng ta sẽ cài PostgreSQL vào máy tính

 

II. Download, cài đặt và cấu hình kết nối PostgreSQL

Rất tiếc rằng phiên bản mới nhất của PostgreSQL (9.6.2) bị lỗi khi tạo table bằng giao diện người dùng (GUI) nên mình đã sử dụng bản 9.6.1 (hiện tại không còn link tải chính thức) . Các bạn có thể download tại đây

Sau khi download thành công, cài đặt PostgreSQL như phần mềm bình thường

Chạy pgAdmin – trình quản lý CSDL PostgreSQL

Lưu ý: Nếu bạn bị lỗi như hình dưới

 

Hãy tắt cửa sổ pgAdmin và chạy lại

Giao diện pgAdmin như hình dưới

 

Nhấn chuột phải vào Servers -> Create -> Server…

 

Màn hình thêm server sẽ xuất hiện, ở tab General, đặt tên cho server trong field Name, sau đó chuyển qua tab Connection

 

Ở tab Connection, điền các thông số tương ứng với trang Dashboard của Heroku Data. Sau đó nhấn Save

 

Sau khi kết nối xong, nhấn đúp vào server -> databases. Danh sách các database trong server của Heroku Postgres xuất hiện như hình dưới

 

 

III. Tạo table và dữ liệu mẫu

Ta sẽ có 2 table: USERS và EMPLOYEES

  • USERS chứa account đăng nhập vào web
  • EMPLOYEES chứa thông tin các nhân viên

Để tạo table USERS, tìm đến tên database được khai báo ở phần Administration (database không có dấu X) . Mở Schemas -> public -> Tables, nhấn chuột phải vào Tables chọn Create -> Table…

 

Cửa sổ tạo table xuất hiện, ở tab General, điền tên table vào field Name, sau đó chuyển sang tab Columns

Ở tab Comlumns, điền thông tin cấu trúc các cột như hình dưới. Sau đó nhấn nút Save

 

Tương tự cho table EMPLOYEES

 

 

 

 

Để tạo dữ liệu mẫu cho 2 table. Nhấn đúp vào Tables, chọn bảng USERS, nhấn chuột phải chọn Query Tool…

 

Màn hình nhập query xuất hiện ở phần tab bên phải màn hình. Nhập vào 2 record cho table USERS
INSERT INTO public."USERS" ("USERNAME", "PASSWORD")
VALUES
('admin', 'admin'),
('sakadream', 'sakadream')

Nhấn F5 trên bàn phím hoặc nút   trên thanh công cụ

 

Nếu tab Messages, hiện Query returned successfully tức là đã thực thi query thành công

Tương tự cho bảng EMPLOYEES

 

INSERT INTO public."EMPLOYEES" ("FULLNAME", "ADDRESS", "EMAIL", "PHONE", "SALARY")
VALUES
('Phan Bá Hải', 'TP.HCM', 'admin@sakadream.me', 5000000),
('Nguyễn Văn A', 'Bình Dương', 'anv@sakadream.me', 3500000)

 

 

IV. Viết ứng dụng

Chúng ta sẽ nâng cấp ứng dụng Hello World! ở phần 2 thành ứng dụng quản lý nhân viên đơn giản. Cấu trúc ứng dụng sau khi hoàn thành như sau

 

Lưu ý: thư mục com/sakadream/test/* có thể thay đổi theo các đặt của mỗi người

Ở đây tôi sẽ chia việc phát triển ra thành nhiều phần nhỏ để các bạn tiện theo dõi

1. Cấu hình ứng dụng

Ta thêm các thư viện cần thiết gồm JSTL, Servlet API, pgjdbc, Jackson Core

Copy các tag dependency dưới đây và bỏ vào bên trong tag dependencies của file pom.xml

Tiếp theo, ta cấu hình web.xml (src/main/webapp/WEB-INF/web.xml)

Cấu hình mvc-dispatcher-servlet.xml (src/main/webapp/WEB-INF/mvc-dispatcher-servlet.xml)

Sau khi hoàn tất việc cấu hình xml, ta chuyển sang viết các view cho ứng dụng

2. Tạo các view, thêm Bootstrap và Font Awesome

Đầu tiên hãy tải resources tại đây, giải nén ra và chép thư mục resources vào src/main/webapp

Sau đó viết lại file index.jsp (src/main/webapp/WEB-INF/pages/index.jsp) . Đây là trang đăng nhập

File employees.jsp (src/main/webapp/WEB-INF/pages/employees.jsp) . Đây là trang quản lý nhân viên

File add.jsp (src/main/webapp/WEB-INF/pages/add.jsp) . Đây là trang thêm nhân viên

File edit.jsp (src/main/webapp/WEB-INF/pages/edit.jsp) . Đây là trang chỉnh sửa thông tin nhân viên

Tiếp theo, ta sẽ viết file bean, model và nâng cấp controller

3. Tạo bean Employee, model truy cập CSDL và Controller

Tạo file Employee.java (src/main/java/com/sakadream/test/bean/Employee.java)

Tạo file Functions.java (src/main/java/com/sakadream/test/model/Functions.java)

Nâng cấp file HomeController.java (src/main/java/com/sakadream/test/controller/HomeController.java)

 

IV. Commit thay đổi lên GitHub và chạy thử ứng dụng

Nếu bạn có Visual Studio Code thì bạn có thể commit như hướng dẫn bên dưới

Nhấn vào dấu 3 chấm -> Push…

Lưu ý: Nếu bạn không có VS Code, bạn vẫn có thể sử dụng cmd để commit và push lên GitHub. Mở thư mục project bạn đang làm, sau đó gõ cmd vào thanh địa chỉ của File Explorer

Gõ các lệnh sau:
git add .
git commit -m "Ung Dung Quan Ly Nhan Vien Don Gian"
git push origin master

Bạn có thể thay đổi message Ung Dung Quan Ly Nhan Vien Don Gian bằng message do bạn tự đặt. Nhớ message phải đặt trong dấu nháy kép

Vào trang https://heroku.com, đăng nhập tài khoản Heroku, chọn app đang làm việc, chọn tab Deploy, kéo xuống dưới phần Manual deploy, nhấn Deploy Branch

Sau khi deploy thành công, nhấn View

Ứng dụng chạy như hình dưới

Trang Đăng Nhập
Danh sách nhân viên
Thêm nhân viên mới
Nhân viên đã được thêm
Sửa thông tin nhân viên
Nhân viên đã được sửa
Xoá nhân viên
Xoá nhân viên thành công

IV. Kết

Qua series hướng dẫn phát triển web app Java Spring và triển khai lên Heroku. Mình hi vọng các bạn đã biết cách triển khai ứng dụng của mình ra bên ngoài. Ngoài ra Heroku còn cho phép triển khai các công nghệ web khác, các plugin rất mạnh mẽ và phong phú. Các bạn có thể tự tìm hiểu và tự triển khai các project của mình lên Heroku.

Chúc các bạn thành công!

2 thoughts to “[Tutorial] Series hướng dẫn phát triển ứng dụng Java Spring trên Heroku (P3) : Phát triển web app quản lý nhân viên đơn giản”

Leave a Reply

%d bloggers like this: