BÁO CÁO THỰC TẬP CÔNG NHÂN PHẦN THIẾT KẾ WEBSITE

TRƯỜNG ĐẠI HỌC BÁCH KHOA

KHOA CÔNG NGHỆ THÔNG TIN
Tel. (84-236) 3736949, Fax. (84-236) 3842771
Website: E-mail:

BÁO CÁO THỰC TẬP CÔNG NHÂN
PHẦN THIẾT KẾ WEBSITE

ĐỀ TÀI:

43Drinks – Uống gì và Ở đâu tại Đà Nẵng?

Đà Nẵng, 12/2018


MỤC LỤC
MỞ ĐẦU 1
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT LIÊN QUAN ............................................... 4
Giới thiệu về HTML và CSS ..................................................................... 4
1.1.1. HTML .............................................................................................. 4
1.1.2. CSS .................................................................................................. 5
1.2. Giới thiệu về JavaScript ............................................................................ 6
1.2.1. Giới thiệu ReactJS ............................................................................ 6
1.2.2. Giới thiệu về Redux – Redux Saga ................................................... 7
1.2.3. Tổng quan về NodeJS ....................................................................... 9
1.3. Giới thiệu về PosgreSQL........................................................................... 9
1.4. Giới thiệu một số thư viện, module, frame-work... khác có sử dụng ........ 11
1.4.1. Ant.Design UI ................................................................................ 11
1.4.2. React-admin Framework................................................................. 11
1.4.3. Babel .............................................................................................. 11

1.4.4. Bcrypt ............................................................................................. 11
1.4.5. JSON Web Token ........................................................................... 12
1.4.6. Formidable, Fs-Extra, ..................................................................... 12
1.4.7. Sequelize ........................................................................................ 12
1.1.

CHƯƠNG 2: PHÂN TÍCH & THIẾT KẾ HỆ THỐNG ................................... 13
Phân tích bài toán .................................................................................... 13
2.1.1. Phân tích yêu cầu đề ra ................................................................... 13
2.1.2. Phân tích chức năng ........................................................................ 13
2.1.3. Phân tích hiện trạng ........................................................................ 14
2.2. Thiết kế hệ thống..................................................................................... 14
2.2.1. Biểu đồ Use-case ............................................................................ 14
2.2.2. Biểu đồ Activity ............................................................................. 16
2.2.3. Sơ đồ Class ..................................................................................... 24
2.1.

CHƯƠNG 3: TRIỂN KHAI & ĐÁNH GIÁ KẾT QUẢ .................................... 25
3.1.
3.2.
3.3.

Môi trường triển khai .............................................................................. 25
Hình ảnh demo chương trình ................................................................... 25
Kết quả thu được và đánh giá .................................................................. 30

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN........................................................... 32
TÀI LIỆU THAM KHẢO ................................................................................... 33

DANH SÁCH HÌNH ẢNH
Hình 1. Cấu trúc trang HTML ................................................................................. 5
Hình 2. Mô tả Virtual DOM .................................................................................... 7
Hình 3. Mô tả One-way data pending ...................................................................... 7
Hình 4. Cấu trúc Redux ........................................................................................... 8
Hình 5. Redux data flow .......................................................................................... 8
Hình 6. Bảng điều khiển Admin – Quản lí thành viên ............................................ 25
Hình 7. Bảng điều khiển Admin– Thêm mới thành viên ........................................ 26
Hình 8. Bảng điều khiển Admin – Chỉnh sửa thành viên........................................ 26
Hình 9. Bảng điều khiển Admin – Quản lí địa điểm............................................... 27
Hình 10. Bảng điều khiển Admin – Chỉnh sửa địa điểm ........................................ 27
Hình 11. Trang Đăng nhập cho thành viên............................................................. 28
Hình 12. Giao diện trang chủ ................................................................................. 28
Hình 13. Danh sách các địa điểm ở trang chủ ........................................................ 29
Hình 14. Trang chi tiết địa điểm ............................................................................ 29
Hình 15. Trang kết quả tìm kiếm theo địa chỉ ........................................................ 30
Hình 16. Trang thêm địa điểm cho thành viên ....................................................... 30


DANH SÁCH TỪ VIẾT TẮT

Từ viết tắt

Diễn giải

IP

Internet Protocol

MD5

Message-Degist Algorithm 5

SHA

Secure Hash Algorithm

API

Application Programming Interface

URL

Uniform Resource Locator

HTML

Hypertext Markup Language

CSS

Cascading Style Sheets

SQL

Structured Query Language

UI

User Interface

MỞ ĐẦU
1. Tổng quan về đề tài
Với xu thế xã hội phát triển như thời điểm hiện tại, ẩm thực nói chung và các
loại đồ uống nói riêng, tất cả đều đang gia tăng một cách chóng mặt cả về số lượng
và chất lượng. Và như một hệ quả trước xu thế đó, lần lượt các quán Caffe/Dessert
đang ngày một mọc lên ngày càng nhiều, mà mỗi cá nhân chúng ta thì không thể biết
hết tất cả các địa điểm đang xuất hiện ngày càng nhiều, từ đó 43Drinks xuất hiện để
mọi người cùng chia sẻ những nơi mình biết, cũng như là tạo một nơi để cho mọi
người dễ dàng tìm kiếm thấy địa điểm phù hợp nhu cầu trong thời điểm hiện nay.
43Drinks cần đưa ra gợi ý địa điểm cho mọi người, đồng thời tạo ra nơi cho mọi
người chia sẻ các địa điểm mới, cũng như hỗ trợ tìm kiếm các địa điểm phù hợp người
dùng theo từng nhu cầu cụ thể.
2. Mục đích và ý nghĩa của đề tài
2.1. Mục đích
Hỗ trợ mọi người dễ dàng tìm thấy các địa điểm mới hoặc các điểm điểm sao
cho có điều kiện phù hợp với mong muốn, nhu cầu của mình.
Tạo nơi để mọi người chia sẻ các địa điểm tốt, ngon và mới lạ.
2.2. Ý nghĩa
Tối giản hóa thời gian cần thiết khi muốn tìm một địa điểm thưởng thức đồ
uống phù hợp cho mọi người.
3. Phương pháp thực hiện
Phương pháp phân tích thiết kế hệ thống: sử dụng các sơ đồ để mô tả các yêu
cầu đối với hệ thống (use case, activity, class).
Phương pháp thử nghiệm, đánh giá kết quả.

1

4. Bố cục của đề tài
Báo cáo đề tài bao gồm các nội dung sau:
Mở đầu
Chương 1: Cơ sở lí thuyết liên quan
Chương 2: Phân tích & thiết kế hệ thống
Chương 3: Triển khai và đánh giá kết quả
Kết luận và hướng phát triển.
5. Phân công tổ chức công việc
Các công việc được phân công theo từng Task trên Trello. Mã nguồn của hệ
thống được cập nhật và đồng bộ trên GitHub.
Các thành viên họp theo định kì để kiểm tra tiến độ và thảo luận các vấn đề nảy
sinh. Bảng phân công công việc cụ thể ở bảng dưới:
STT

Tên Thành Viên

Công Việc
1) Phân tích yêu cầu và thiết kế giao diện,
hệ thống, cơ sở dữ liệu

1

Đào Hữu Minh

2) Hỗ trợ nghiên cứu, triển khai và giải
quyết các vấn đề, sự cố mà thành viên
khác gặp phải
3) Viết báo cáo
1) Nghiên cứu các modules, framework,
thư viện liên quan đến lập trình giao

diện và ứng dụng vào hệ thống

2

Nguyễn Văn Hoàng
2) Xây dựng giao diện cho các trang: Trang
chủ, Xem chi tiết, Thêm địa điểm, Đăng
nhập, Bảng điều khiển của Quản Trị Viên

2


1) Xây dựng cơ sở dữ liệu dựa theo đặc
tả ban đầu
2) Nghiên cứu các modules, framework,
3

Trần Quốc Lâm

thư viện liên quan đến lập trình
Backend và ứng dụng vào hệ thống
3) Lập trình Backend
4) Chỉnh sửa báo cáo
Xây dựng dữ liệu ban đầu, triển khai

4

Cả nhóm

hệ thống lên máy chủ, kiểm thử các

tính năng.

3


CHƯƠNG 1: CƠ SỞ LÝ THUYẾT LIÊN QUAN
1.1. Giới thiệu về HTML và CSS
1.1.1. HTML
HTML là từ viết tắt cho HyperText Markup Language là một ngôn đánh dấu
siêu văn bản, dùng để định dạng bố cục, cách sắp xếp các phần tử trên trang web.
Theo đó thì mỗi trang web đều gồm các phần chính như sau:
Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên
kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm, ...
Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những
trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết
con (sub navigation).
Phần thân của trang: page body, phần này chứa phần nội dung chính (content)
và phần nội dung phụ (sidebar).
Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho
người dùng xem.
Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang
(local navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa
các liên kết quảng cáo, ...
Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công
ty, địa chỉ, số điện thoại, mail liên hệ, ... và đặc biệt là copyright, hoặc có thể chứa
các liên kết toàn trang, các banner liên kết, ...

4

Hình 1. Cấu trúc trang HTML

1.1.2. CSS
CSS là chữ viết tắt của Cascading Style Sheet, chỉ đơn thuẩn là một file text với
phần mở rộng là .css. Nếu như HTML cho phép thiết kế cấu trúc của một trang web
thì css giúp thiết phần định dạng (style) cho trang web đó.
Các loại css thông dụng mà trang web nào cũng có:
 Background: định dạng hình nên cho html
 Text, Font: định dạng cách hiển thị của đoạn text, kiểu chữ

5


1.2. Giới thiệu về JavaScript
Javascript là ngôn ngữ lập trình dùng để giúp các trang web có tính tương tác.
Các slideshow, pop-up quảng cáo và tính năng autocomplete của Google đều được
viết bằng Javascript.
Được phát triển từ năm 1995, ban đầu Javascript không được coi trọng và chỉ
được sử dụng để trang trí các website (front-end). Nhưng ngôn ngữ này ngày vẫn tiếp
tục được phát triển và trở thành một trong những ngôn ngữ lập trình phổ biến nhất
thế giới. Các thư viện xây dựng giao diện người dùng viết bằng Javascript có thể kể
đến như AngularJs của Google và ReactJs của Facebook. Ngoài ra, với sự xuất hiện
của framework Nodejs, Javascript đã được sử dụng để lập trình phía máy chủ (backend).
1.2.1. Giới thiệu ReactJS
ReactJs là một thư viện UI của Javascript, được phát triển bởi Facebook để xây
dựng những trang web có tính tương tác cao. Một trong những điểm hấp dẫn của thư
viện này chính là thư viện này có thể tự động cập nhật HTML, giảm bớt khối lượng
công việc cho server
Một số khái niệm cơ bản của ReactJs
Virtual DOM : Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái

cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần,
điều này sẽ ảnh hưởng đến tốc độ xử lý. React JS sử dụng Virtual DOM (DOM ảo)
để cải thiện vấn đề này. Virtual DOM là một object Javascript, mỗi object chứa đầy
đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay
đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật.

6


Hình 2. Mô tả Virtual DOM

One-way data pending: Dữ liệu được truyền từ parents đến child thông qua
props. Luồng dữ liệu này đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi

Hình 3. Mô tả One-way data pending

1.2.2. Giới thiệu về Redux – Redux Saga
Redux là một thư viện Javascript giúp tạo ra thành một lớp quản lý trạng thái
của ứng dụng. Được dựa trên nền tảng tư tưởng của kiến trúc Flux do Facebook giới
thiệu, do vậy Redux thường là bộ đôi kết hợp hoàn hảo với React (React Js và React
Native).
Cấu trúc Redux:

7


Hình 4. Cấu trúc Redux

Tất cả trạng thái được lưu trong store, được tạo ra bởi Redux.createStore, nó
kết nối cả 3 nguyên lý của Redux. Nó lưu trạng thái hiện tại của ứng dụng, cho phép

gửi đi một action. Khi tạo ra nó, phải xác định reducer để biết được rằng state được
thay đổi như thế nào cùng với các action.
Redux data flow:

Hình 5. Redux data flow

Redux-Saga là một thư viện redux middleware, giúp quản lý những side effect
trong ứng dụng redux trở nên đơn giản hơn. Bằng việc sử dụng tối đa tính năng
8


Generators (function*) của ES6, nó cho phép ta viết async code nhìn giống như là
synchronos.

Saga không chỉ tồn tại trong thế giới javascript, nó còn được coi là 1 pattern.
Một cách nhìn nhanh chóng thì Saga pattern là cách để quản lý những long
transaction với những side effect hoặc các nguy cơ tiềm ẩn. Với mỗi transaction thành
công, chúng ta đều cần có counter-transaction để revert transaction đó về trạng thái
ban đầu nếu gặp trục trặc.
1.2.3. Tổng quan về NodeJS
NodeJs là platform mã nguồn mở được xây dựng trên nền tảng Javascript V8
Engine, chạy được trên nhiều hệ điều hành khác nhau từ Windows cho đến Linux.
NodeJs có những tính năng vượt trội sau:
 Bất đồng bộ và phát sinh sự kiện: Tất cả các phần trong NodeJs đều bất
đồng bộ. Nghĩa là một hàm có thể chạy mà không cần chờ các hàm trước
nó kết thúc. Điều này giúp cho NodeJs không bao giờ phải chờ đợi bất
kì API nào. Các API sau khi kết thúc sẽ có cơ chế thông báo sự kiện để
cho server xử lý.
 Đơn luồng và khả năng mở rộng cao: NodeJs sử dụng một mô hình luồng
duy nhất với cơ chế phát sinh sự kiện, điều này giúp cho server đáp ứng

được nhiều yêu cầu một lúc mà không bị chặn như các server truyền
thống.
 Chạy rất nhanh: Dựa vào nền tảng V8 Javascript Engine.
 Không đệm: NodeJs không lưu trữ các dữ liệu đệm.
 Có giấy phép: NodeJs được cấp giấy phép bởi MIT License
1.3. Giới thiệu về PosgreSQL
PostgreSQL là một hệ quản trị cơ sở dữ liệu quan hệ và đối tượng dựa trên
POSTGRES, bản 4.2, được khoa điện toán của đại học California tại Berkeley phát

9


triển. POSTGRES mở đường cho nhiều khái niệm quan trọng mà các hệ quản trị dữ
liệu thương mại rất lâu sau mới có.

PostgreSQL là một chương trình mã nguồn mở xây dựng trên mã nguồn ban
đầu của đại học Berkeley. Nó theo chuẩn SQL99 và có nhiều đặc điểm hiện đại:
 Câu truy vấn phức hợp (complex query)
 Khóa ngoại (foreign key)
 Thủ tục sự kiện (trigger)
 Các khung nhìn (view)
 Tính toàn vẹn của các giao dịch (integrity transactions)
 Việc kiểm tra truy cập đồng thời đa phiên bản (multiversion concurrency
control)
Hơn nữa, PostgreSQL có thể dùng trong nhiều trường hợp khác, chẳng hạn như
tạo ra các khả năng mới như:
 Kiểu dữ liệu
 Hàm
 Toán tử
 Hàm tập hợp

 Phương pháp liệt kê
 Ngôn ngữ theo thủ tục
 Truy vấn xử lý song song (parallel query)
 Sao chép dữ liệu dạng luồng (Streaming replication)
PostgreSQL được phổ biến bằng giấy phép BSD cổ điển. Nó không quy định
những hạn chế trong việc sử dụng mã nguồn của phần mềm. Bởi vậy PostgreSQL có
thể được dùng, sửa đổi và phổ biến bởi bất kỳ ai cho bất kỳ mục đích nào.

10


PostgreSQL cũng là hệ quản trị cơ sở dữ liệu hỗ trợ mạnh trong việc lưu trữ dữ
liệu không gian. PostgreSQL kết hợp với module Postgis cho phép người dùng lưu
trữ các lớp dữ liệu không gian. Khi sử dụng PostgreSQL, Postgis kết hợp với các
phần mềm GIS hỗ trợ hiển thị, truy vấn, thống kê hoặc xử lý dữ liệu không gian.
1.4. Giới thiệu một số thư viện, module, frame-work... khác có sử dụng
1.4.1. Ant.Design UI
Một thư viện UI đến từ Trung Quốc, Ant là tập hợp các components của React
được xây dựng theo chuẩn thiết kế của Ant UED Team. Tương tự như chuẩn Material
Design, Ant cung cấp hầu hết các component thông dụng trong ứng dụng web hiện
đại, như Layout, Button, Icon, DatePicket, v.v…Bên cạnh đó Ant cũng có những
component riêng thú vị, như LocaleProvider cho phép bạn thay đổi ngôn ngữ trên
toàn ứng dụng.
1.4.2. React-admin Framework
Là một Frontend Framework dành cho việc xây dựng chương trình quản lí
Admin, sử dụng ES6, React và Material Design.
1.4.3. Babel
Babel là một công cụ chuyển đổi mã lệnh JavaScript hay JavaScript transpiler,
được dùng với mục đích chuyển đổi mã lệnh JavaScript được viết dựa trên tiêu chuẩn
ECMAScript phiên bản mới về phiên bản cũ hơn trước đó.

1.4.4. Bcrypt
Bcrypt là một chức năng mã hóa mật khẩu thiết kế bởi Niels Provos và David
Mazières, dựa trên các thuật toán mã hóa Blowfish, và trình bày tại USENIX trong
năm 1999.Bcrypt là một nền tảng tập tin tiện ích mã hóa chéo. File mã hóa trên tất
cả các hệ điều hành hỗ trợ và xử lý. Passphrase phải từ 8 đến 56 ký tự và được mã
hóa trong nội bộ một khóa 448 bit.Bcrypt là một thuật toán mã hóa một chiều. Bạn
không thể lấy lại mật khẩu khi đã biết chuỗi mật khẩu trong dữ liệu databse trước đó
mà bạn hay bất kỳ ai tấn công vào để đánh cắp.

11


1.4.5. JSON Web Token
JSON Web Token (JWT) là 1 tiêu chuẩn mở (RFC 7519) định nghĩa cách thức
truyền tin an toàn giữa các thành viên bằng 1 đối tượng JSON. Thông tin này có thể
được xác thực và đánh dấu tin cậy nhờ vào "chữ ký" của nó. Phần chữ ký của JWT
sẽ được mã hóa lại bằng HMAC hoặc RSA.
1.4.6. Formidable, Fs-Extra,
Formidable là một module của NodeJS hỗ trợ việc upload file.
Fs-extra là một module hỗ trợ việc quản lí và thao tác với file.
1.4.7. Sequelize
Sequelize là một ORM dành cho Node.js và io.js. Nó hỗ trợ bạn truy cập một
cách dễ dàng đến PostgreSQL, MySQL, MariaDB, SQLite và MSSQL cùng với các
tính năng như là relations, transaction, replication ...

12


CHƯƠNG 2: PHÂN TÍCH & THIẾT KẾ HỆ THỐNG
2.1. Phân tích bài toán

2.1.1. Phân tích yêu cầu đề ra
43Drinks là trang web dành cho tất cả mọi người sử dụng ngay cả khi không
phải là thành viên, khách có thể tìm kiếm, xem xét các địa điểm trên trang chủ, lọc
các địa điểm theo yêu cầu đưa ra, nhưng nếu để có thể chia sẻ các địa điểm mới, hệ
thống yêu cầu người dùng phải đăng nhập mới có thể sử dụng để dễ dàng quản lí.
Quản trị viên cần đăng nhập riêng vào bảng điều khiển để quản lí thành viên cũng
như các địa điểm đã được đăng.
Phân tích sơ lược yêu cầu:
-

Mọi đối tượng đều có thể truy cập và sử dụng được

-

Thành viên sau khi đăng kí có thể chia sẻ được các địa điểm

-

Quản trị viên có bảng điều khiển riêng gồm các chức năng quản lí người
dùng và địa điểm

-

Giao diện phải thân thiện với người dùng, dễ sử dụng, nhanh chóng làm
quen.

2.1.2. Phân tích chức năng
Dựa trên các yêu cầu mà bài toán đề ra, các chức năng mà 43Drinks cần đáp
ứng được đó là:
-

Hệ thống có các chức năng cơ bản như Xem danh sách, Xem chi tiết địa
điểm, Tìm kiếm, Lọc theo yêu cầu, Chia sẻ địa điểm, … Đăng xuất.

-

Khi truy cập vào hệ thống, người dùng phải Đăng nhập để có thể sử dụng
toàn bộ chức năng. Khi chưa Đăng nhập thì sẽ bị hạn chế chức năng: Chia
sẻ…

-

Quản trị viên có thể quản lí được thành viên (Thay đổi thông tin, tạo, chỉnh
sửa….) và địa điểm (Chỉnh sửa, tạo mới…).

13


2.1.3. Phân tích hiện trạng
Phạm vi ứng dụng:
-

Dành cho mọi đối tượng nếu có nhu cầu tìm kiếm hoặc chia sẻ các địa điểm

-

Tất cả đều được thực hiện trên Internet, nhanh chóng, thuận lợi dù ở bất kì
đâu

Đối tượng sử dụng hệ thống:

-

Người dùng: bao gồm cả Khách vãng lai lẫn Thành viên đã đăng kí, các hoạt
động chính là những chức năng của 43Drinks đề ra.

-

Quản tị viên: các hoạt động chính là quản lí hệ thống (bao gồm thành viên
và địa điểm).

2.2. Thiết kế hệ thống
2.2.1. Biểu đồ Use-case
Bước 1. Xác định các Actor cho hệ thống
Các đối tượng sử dụng hệ thống sẽ là: Khách, Thành Viên và Quản Trị
Viên.
Bước 2. Xác định các hoạt động của từng Actor
Khách: Xem trang chủ, Tìm kiếm, Xem chi tiết địa điểm, Đăng kí
Thành Viên: Kế thừa các hoạt động từ Khách nhưng có thêm các hoạt
động: Thay đổi thông tin cá nhân, Đăng nhập, Đăng xuất, Chia sẻ địa điểm.
Quản Trị Viên: Kế thừa các hoạt động từ Thành Viên, nhưng có thêm
các hoạt động: Thêm thành viên mới, Chỉnh sửa thông tin thành viên, Xóa thành viên,
Khóa thành viên, Chỉnh sửa địa điểm, Xóa địa điểm.
Bước 3. Xác định các mối quan hệ

14


15

2.2.2. Biểu đồ Activity

16


17


18


19


20


21