Báo cáo cuối kỳ môn Kỹ thuật phát triển hệ thống web: Hệ thống vận tải hàng hoá

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

BÁO CÁO CUỐI KỲ
MÔN: KỸ THUẬT PHÁT TRIỂN HỆ THỐNG WEB

ĐỀ TÀI: HỆ THỐNG VẬN TẢI HÀNG HOÁ
FAST DELIVERY
GIẢNG VIÊN HƯỚNG DẪN: ThS. VÕ NGỌC TÂN

ĐẶNG NGỌC LIÊM

18520981

TRƯƠNG QUỐC BẢO

18520501

NGUYỄN MINH KHƠI

18520944

NGUYỄN LƯƠNG TỒN

18521510

TP.HỒ CHÍ MINH, 2021


IE213.L21 – Kỹ thuật phát triển hệ thống web

BẢNG PHÂN CƠNG CƠNG VIỆC
MSSV

HỌ TÊN

NHIỆM VỤ

HỒN THÀNH

Xử lý backend, thiết
18520981

Đặng Ngọc Liêm

kế và hiện thực dữ
liệu, làm báo cáo,

100%

slide
Xử lý tạo đơn, hiển
18520501

Trương Quốc Bảo

thị đơn hàng,đăng
nhập, đăng kí, làm

100%

báo cáo, slide
Các chức năng phía
18520944

Nguyễn Minh Khơi

Admin, làm báo cáo,

100%

làm slide
Tra cứu đơn hàng, tra
18521510

Nguyễn Lương Toàn

cứu kho hàng, đăng
nhập đăng kí, làm báo
cáo, slide

100%


IE213.L21 – Kỹ thuật phát triển hệ thống web

MỤC LỤC
CHƯƠNG 1 TỔNG QUAN VỀ TRANG WEB ................................................................................ 3
1.1

Khảo sát thị trường .................................................................................................. 3

1.2

Công nghệ sử dụng ................................................................................................. 4

1.3

Kiến trúc .................................................................................................................. 4

1.4

Dữ Liệu.................................................................................................................... 4

CHƯƠNG 2 CÁC CHỨC NĂNG CHÍNH ........................................................................................ 6
2.1

Đăng nhập, đăng ký................................................................................................. 6

2.1.1

Đăng nhập ......................................................................................................... 6

2.1.2

Đăng kí .............................................................................................................. 7

2.2

Tra cứu đơn hàng .................................................................................................... 8

2.3

Ước tính cước phí ................................................................................................... 8

2.4

Tạo đơn ................................................................................................................... 9

2.5

Hiển thị đơn hàng .................................................................................................. 13

2.6

Cập nhật thông tin người dùng .............................................................................. 14

2.7

Tra cứu bưu cục .................................................................................................... 15

2.8

Các chức năng phía quản lý .................................................................................. 16

2.8.1

Quản lý đơn hàng ............................................................................................ 16

2.8.2

Quản lý khách hàng ......................................................................................... 19

2.8.3

Quản lý kho hàng ............................................................................................. 20

CHƯƠNG 3: KẾT LUẬN .................................................................................................................. 21
3.1

Ưu điểm ................................................................................................................. 21

3.2

Nhược điểm ........................................................................................................... 21

3.3

So sánh với Viettel Post ......................................................................................... 21

CHƯƠNG 4: HƯỚNG PHÁT TRIỂN .............................................................................................. 23
TÀI LIỆU THAM KHẢO .................................................................................................................. 24


IE213.L21 – Kỹ thuật phát triển hệ thống web

DANH MỤC HÌNH ẢNH
Hình 1: Sơ đồ dữ liệu của trang web .......................................................................................... 5
Hình 2: Form đăng nhập ............................................................................................................. 6
Hình 3: Form đăng ký ................................................................................................................. 7
Hình 4: Màn hình tra cứu đơn hàng............................................................................................ 8

Hình 5: Màn hình component ước tính chi phí........................................................................... 8
Hình 6: Màn hình ước tính chi phí ............................................................................................. 9
Hình 7: Form tạo đơn ............................................................................................................... 11
Hình 8: Chi tiết form tạo đơn ................................................................................................... 11
Hình 9: Form tạo đơn với đầy đủ thông tin .............................................................................. 12
Hình 10: Kết quả sau khi tạo đơn thành công .......................................................................... 13
Hình 11: Chi tiết đơn hàng đã tạo ............................................................................................. 14
Hình 12: Chỉnh sửa form tạo đơn ............................................................................................. 14
Hình 13: Màn hình tra cứu bưu cục .......................................................................................... 15
Hình 14: Màn hình tra cứu bưu cục .......................................................................................... 15
Hình 15: Giao diện đăng nhập admin ....................................................................................... 16
Hình 16: Giao diện trang admin ............................................................................................... 16
Hình 17: Trang quản lý đơn hàng ............................................................................................. 17
Hình 18: Quản lý thông tin đơn hàng ....................................................................................... 17
Hình 19: Chỉnh sửa trạng thái đơn hàng ................................................................................... 18
Hình 20: Trạng thái đơn hàng sau khi chỉnh sửa ...................................................................... 18
Hình 21: Quản lý khách hàng ................................................................................................... 19
Hình 22: Tìm khách hàng tên Khơi .......................................................................................... 19
Hình 23: Quản lý kho hàng ...................................................................................................... 20


IE213.L21 – Kỹ thuật phát triển hệ thống web

DANH MỤC BẢNG
Bảng 1: Khảo sát 3 loại hình dịch vụ: Viettel Post, GHN và GHTK ......................................... 3
Bảng 2: Thông tin cần cung cấp khi tạo đơn ............................................................................ 10
Bảng 3: Thông tin về một đơn hàng ......................................................................................... 13
Bảng 4: So sánh với Viettel Post .............................................................................................. 22

IE213.L21 – Kỹ thuật phát triển hệ thống web

LỜI MỞ ĐẦU
Ngày nay, khi mà trên nhu cầu vận chuyển hàng hố của con người khơng ngừng
tăng lên, thì cuộc chạy đua giữa những thương hiệu vận chuyển hàng hoá ngày một trở
nên khốc liệt. Những công nghệ mới liên tục được áp dụng, những thuật toán ra đời mỗi
ngày để đẩy nhanh tốc độ trao đổi hàng hoá, nhằm đổi lại sự trung thành của khách hàng.
Tuy vậy ở Việt Nam cuộc cạnh tranh này còn chưa thật sự bùng nổ như mong đợi, lý do
một phần nằm ở việc các cơng ty vận tải cịn chưa đáp ứng đủ số lượng và chất lượng
giao dịch theo các tiêu chuẩn quốc tế. Hạ tầng còn yếu kém, khâu quản lý thiếu chặt chẽ
cùng với đó là hệ thống cơng nghệ thơng tin chưa được hồn thiện đã khiến khách hàng
chưa tin tưởng tuyệt đối nơi các dịch vụ vận tải. Nắm bắt được lý do đó, nhóm đã triển
khai một hệ thống vận tải hàng hố – được kì vọng sẽ dẫn đầu, tạo ra bước đi đột phá về
khái niệm vận tải hàng hoá ở Việt Nam, phục vụ niềm tin của khách hàng cả nước.
Đồ án này gồm 4 phần:
Chương 1: Tổng quan về trang web.
Chương 2: Các chức năng chính.
Chương 3: Kết luận.
Chươgn 4: Hướng phát triển

Trong quá trình thực hiện đồ án, do kiến thức chuyên ngành cịn hạn chế nên nhóm
chúng em vẫn cịn nhiều thiếu sót. Rất mong nhận được sự quan tâm, đóng góp của thầy
để đồ án của chúng em được đầy đủ và hồn chỉnh hơn.
Cuối cùng xin kính chúc thầy dồi dào sức khỏe và thành công trong sự nghiệp cao
q.
Thành phố Hồ Chí Minh, tháng 7 năm 2021
Nhóm sinh viên thực hiện

1

IE213.L21 – Kỹ thuật phát triển hệ thống web

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………

……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………

2


IE213.L21 – Kỹ thuật phát triển hệ thống web

CHƯƠNG 1 TỔNG QUAN VỀ TRANG WEB
1.1 Khảo sát thị trường
Hiện nay, thị trường vận chuyển hàng hóa đang cực kì sơi động, trong bối cảnh
Việt Nam đang dần tiến vào con đường hội nhập với các cường quốc trên thế giới. Bên
cạnh đó, tình hình kinh tế và đời sống của nhân dân Việt Nam đang dần được nâng cao.
Với nhu cầu ngày mua hàng trực tuyến và giao hàng tận nhà ngày càng tăng, dẫn đến
thị trường vận tải hàng hóa khơng cịn gói gọn trong các thành phố lớn, mà dần mở rộng
khắp các tỉnh thành trên toàn quốc.
Trên thị trường Việt Nam hiện nay có khá nhiều các cơng ty cung cấp hệ thống
vận tải hàng hóa khắp trên các tỉnh thành. Trong đó, quen thuộc nhất là các công ty như
Viettel Post, Giao Hàng Nhanh, Giao Hàng Tiết Kiệm, Chuyển Phát Nhanh… Các công
ty này thường cung cấp cho các khách hàng – thường là các đại lý hoặc các sàn thương
mại điện tử, các chức năng cơ bản của một hệ thống vận tải, như:

Viettel Post
Giao hàng nhanh,
Giao hàng

giao hàng tiết kiệm,
giao hàng hoả tốc

Giao hàng nhanh

Giao hàng tiết kiệm

Giao hàng nhanh,

Giao hàng tiết kiệm,

giao hàng tiết kiệm

giao hàng hoả tốc

App

Có

Có

Có

Thu hộ

Có

Có

Có

Có

Có

Có

Tra cứu kho hàng

Có

Có

Khơng

Thống kế tài chính

Có

Khơng

Khơng

Tra cứu hành trình
đơn hàng

Bảng 1: Khảo sát 3 loại hình dịch vụ: Viettel Post, GHN và GHTK

3


IE213.L21 – Kỹ thuật phát triển hệ thống web

Dựa trên những chức năng này, nhóm chúng em đã triển khai một trang web với
các chức năng cơ bản như: Đăng nhập, đăng kí, tạo đơn hàng, quản lí, tra cứu đơn hàng,
tra cứu kho lưu trữ.
1.2 Công nghệ sử dụng
Ứng dụng được phát triển sử dụng ReactJS và Redux để thiết kế giao diện, khi
mà cả hai đang nổi lên là những framework có tính linh hoạt cao, dễ dàng tiếp cận và
xử lý.
Trong khi đó, nhóm chọn MySQL làm cơ sở dữ liệu để phù hợp với quy mô của
đồ án mơn học. Ngồi ra, NodeJS cũng được nhóm sử dụng để thao tác với dữ liệu từ
back-end nhằm tải dữ liệu lên giao diện của trang web.
1.3 Kiến trúc
Ứng dụng được tổ chức theo kiến trúc Model – View – Controller (MVC) trong
ứng dụng Android. Khi View được tác động từ người sử dụng, một Event sẽ được trigger
đến Controller. Controller chịu trách nhiệm tính tốn, nếu cần thiết sẽ truy xuất dữ liệu
trên Model. Model chịu trách nhiệm tương tác với dữ liệu trả về, ở đây là dữ liệu từ API
trả về, sau đó chuyển dữ liệu đó cho Controller. Controller sau khi xử lí dữ liệu sẽ kết
xuất dữ liệu chuyển đến View.
1.4 Dữ Liệu
Dữ liệu của hệ thống được lưu vào MySQL – một hệ quản trị cơ sở dữ liệu mã
nguồn mở, bao gồm một số bản chính như:
Khachhang(makh,tenkh,sdt, diachi): Lưu thơng tin của khách hàng
User(madn, username, password, makh, refeshtoken): Lưu thông tin đăng nhập của user
đăng ký thường
Userbygoogle(logincode,username,makh,refeshtoken):Lưu thông tin đăng nhập của
user đăng nhập bằng Google
Order(madonhang,

makh,phi,trangthai,nguoinhan,diachinhan,image,diachidi):

thông tin cơ bản của một đơn hàng

4

Lưu


IE213.L21 – Kỹ thuật phát triển hệ thống web

Orderdetail(mact, madonhang, chieucao, cannang, loaidonhang, loaigiaohang, tensp,
soluong):Lưu thông tin chi tiết của các mặt hàng trong đơn hàng
Kho(makho, tenkho, diachi, tinh, vido, kinhdo): Lưu thơng tin của một kho
Và cịn các bảng phụ dùng để bổ sung thông tin cho các bảng chính.
Sơ đồ giao diện:

Hình 1: Sơ đồ dữ liệu của trang web

5


IE213.L21 – Kỹ thuật phát triển hệ thống web

CHƯƠNG 2 CÁC CHỨC NĂNG CHÍNH
2.1 Đăng nhập, đăng ký
2.1.1 Đăng nhập

Hình 2: Form đăng nhập

Người dùng đăng nhập bằng tài khoản đã đăng kí trên Fast Delivery, bao gồm email và
mật khẩu.

6


IE213.L21 – Kỹ thuật phát triển hệ thống web

2.1.2 Đăng kí

Hình 3: Form đăng ký

Người dùng đăng kí tài khoản Fast Delivery bằng email và mật khẩu, mật khẩu
cần nhập hai lần và trùng khớp với nhau. Mỗi email chỉ đăng kí được một lần duy nhất.

7


IE213.L21 – Kỹ thuật phát triển hệ thống web

2.2 Tra cứu đơn hàng

Hình 4: Màn hình tra cứu đơn hàng

Khi gửi hàng thành công, người dùng sẽ được cung cấp một mã vận đơn.
Có thể tra cứu thơng tin và tình trạng đơn hàng một cách nhanh chóng bằng cách nhập
mã này vào ô “Mã phiếu gửi” và nhấn nút “Tra cứu”.
Thông tin chi tiết về đơn hàng như: Chi phí, người nhận, địa chỉ, trạng thái... sẽ được
hiển thị ngay bên dưới.
2.3 Ước tính cước phí

Hình 5: Màn hình component ước tính chi phí

8


IE213.L21 – Kỹ thuật phát triển hệ thống web

Hình 6: Màn hình ước tính chi phí

Người dùng có thể ước tính chi phí gửi hàng bằng cách chọn tỉnh thành gửi, tỉnh
thành nhận và trọng lượng hàng hóa vào form ở trang chủ hoặc trong trang ước tính.
Máy tính sẽ tính tốn dựa trên khoảng cách giữa hai tỉnh thành và khối lượng của
hàng hóa rồi trả về cho người dùng chi phí và thời gian ước tính của cả hai dịch vụ
(chuyển phát nhanh và chuyển phát thường).
2.4 Tạo đơn
Fast Delivery tổ chức tạo mới các đơn hàng nhằm gửi đi yêu cầu của khách hàng
về các mặt hàng có nhu cầu và mong muốn gửi đến các điểm đến xa xơi, nằm ngồi vị
trí địa lý có thể gửi hàng cho người nhận của khách hàng. Khi khách hàng tạo mới một
đơn hàng, ứng dụng sẽ ngay lập tức ghi nhận tồn bộ thơng tin mà khách hàng đã cung
cấp có liên quan đến đơn hàng. Tất cả những thơng tin đó đều được bắt buộc phải cung
cấp nhằm đảm bảo tính chính xác tuyệt đối với đơn hàng được khách hàng giao ký gửi,
cũng như đảm bảo thông tin giao dịch giữa khách hàng (người gửi), người tiếp nhận và
đơn vị thứ ba như Fast Delivery được minh bạch và công khai rõ ràng.
Cụ thể, khi tạo mới một đơn hàng bất kì, khách hàng cần cung cấp các thông tin
bắt buộc như sau:

9


IE213.L21 – Kỹ thuật phát triển hệ thống web

STT Thông tin cung cấp
1

2

3

4

5

Đơn vị tính

Ghi chú
Bao gồm họ tên người gửi, SĐT

Thông tin người gửi

và địa chỉ liên lạc.

Thông tin người

Bao gồm họ tên người nhận, SĐT

nhận

và địa chỉ liên lạc.
Mơ tả loại/tên cụ thể của hàng hố

Tên hàng hố

được gửi.

Trọng lượng hàng
hoá
Số lượng hàng hoá

Tổng trọng lượng của hàng hoá

kg

được gửi đi.

Chiếc

Số lượng hàng hoá của một loại
hàng hoá có trong một đơn hàng.
Dịch vụ chuyển hàng, gồm có:

6

Dịch vụ hàng hoá

Giao hàng nhanh, Giao hàng tiết
kiệm và Giao hàng hoả tốc.

7

Ảnh chụp mơ tả về hàng hố bên

Ảnh chụp hàng hố

cạnh các thơng tin trong mục (3)

Bảng 2: Thông tin cần cung cấp khi tạo đơn

10


IE213.L21 – Kỹ thuật phát triển hệ thống web

Dưới đây là hình ảnh về giao diện của danh mục tạo đơn hàng mới:

Hình 7: Form tạo đơn

Form thêm mới hàng hóa:

Hình 8: Chi tiết form tạo đơn

11


IE213.L21 – Kỹ thuật phát triển hệ thống web

Sau khi điền thông tin:

Hình 9: Form tạo đơn với đầy đủ thông tin

12

IE213.L21 – Kỹ thuật phát triển hệ thống web

2.5 Hiển thị đơn hàng
Sau khi tạo đơn thành công, thông tin các đơn gửi cũng như đơn nhận sẽ được ứng
dụng lưu lại và hiển thị trong màn hình đơn hàng. Bên đơn gửi, mỗi mục sẽ hiển thị mã
đơn hàng, tên, số điện thoại, địa chỉ người nhận và trạng thái hiện tại của đơn. Tương tự
đối với bên đơn nhận, chỉ thay chỗ hiển thị thông tin người nhận bằng thông tin người
gửi.

Hình 10: Kết quả sau khi tạo đơn thành công

Khi ấn vào mũi tên mỗi đơn hàng thì chi tiết của đơn hàng đó sẽ xuất hiện bên
dưới. Chi tiết đơn gồm có các thơng tin như sau:
STT

Thông tin cung cấp

1

Thông tin người gửi

Ghi chú
Bao gồm họ tên, số điện thoại, địa
chỉ

2

Danh sách hàng hóa

3

Hình ảnh hàng hóa

Tên hàng hóa, trọng lượng, số lượng

Bảng 3: Thơng tin về một đơn hàng

13


IE213.L21 – Kỹ thuật phát triển hệ thống web

Hình 11: Chi tiết đơn hàng đã tạo

2.6 Cập nhật thông tin người dùng
Người dùng có thể chỉnh sửa hoặc cập nhật những thơng tin cá nhân cịn thiếu để
phục vụ cho việc tạo đơn.

Hình 12: Chỉnh sửa form tạo đơn

14


IE213.L21 – Kỹ thuật phát triển hệ thống web

2.7 Tra cứu bưu cục

Hình 13: Màn hình tra cứu bưu cục

Tính năng tra cứu bưu cục gợi ý một vài bưu cục tiêu biểu (thanh bên trái hình 2.4)
và bản đồ đường đi.

Hình 14: Màn hình tra cứu bưu cục

Người dùng có thể nhập tên tỉnh thành muốn tra cứu vào thanh search và nhấn
tìm kiếm, danh sách tên bưu cục kèm địa chỉ và số điện thoại của các bưu cục trong
tỉnh thành đó sẽ được hiển thị ở thanh bên trái.
Ngồi ra, người dùng có thể định vị đến vị trí hiện tại bằng cách nhấn vào icon định vị
(mũi tên màu xanh chỉ đến), các bưu cục xung quanh vị trí của người dùng sẽ hiển thị
trên bản đồ và từ đó người dùng có thể xem đường đi đến bưu cục.

15


IE213.L21 – Kỹ thuật phát triển hệ thống web

2.8 Các chức năng phía quản lý
Để sử dụng những chức năng phía quản lý, người dùng cần có tài khoản được
phân quyền quản lý.

Hình 15: Giao diện đăng nhập admin

Sau khi đăng nhập thành công, người dùng sẽ được điều hướng đến trang dashboard:

Hình 16: Giao diện trang admin

2.8.1 Quản lý đơn hàng
Với chức năng quản lý đơn hàng, người quản lý có thể thể nắm bắt được tình hình các
đơn hàng được tạo trên hệ thống, như các trạng thái đơn hàng. Người quản lý cũng có

thể thay đổi trạng thái đơn hàng, hoặc xóa đơn hàng khỏi hệ thống.

16


IE213.L21 – Kỹ thuật phát triển hệ thống web

Hình 17: Trang quản lý đơn hàng

Hình 18: Quản lý thông tin đơn hàng

17


IE213.L21 – Kỹ thuật phát triển hệ thống web

Hình 19: Chỉnh sửa trạng thái đơn hàng

Hình 20: Trạng thái đơn hàng sau khi chỉnh sửa

Ngoài ra, khi bấm vào nút Delete, đơn hàng sẽ bị xóa khỏi hệ thống.

18


IE213.L21 – Kỹ thuật phát triển hệ thống web

2.8.2 Quản lý khách hàng

Hình 21: Quản lý khách hàng

Với chức năng quản lý khách hàng, người quản lý có thể dùng các bộ lọc để hỗ trợ
tìm kiếm như tìm kiếm theo số điện thoại, tìm theo họ tên hay mã khách hàng:

Hình 22: Tìm khách hàng tên Khơi

Người quản lý có thể xóa khách hàng khỏi hệ thống bằng cách bấm vào nút xóa.

19


IE213.L21 – Kỹ thuật phát triển hệ thống web

2.8.3 Quản lý kho hàng

Hình 23: Quản lý kho hàng

Người quản lý có thể quản lý thơng tin thêm xóa sửa các kho hàng trong hệ thống

20