đồ án tốt nghiệp xây dựng website tra cứu và chia sẻ thông tin địa điểm du lịch trong nước Việt Nam

TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI
KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

ĐỀ TÀI:
XÂY DỰNG WEBSITE TRA CỨU VÀ CHIA SẺ THÔNG TIN
ĐỊA ĐIỂM DU LỊCH TRONG NƯỚC VIỆT NAM

Giảng viên hướng dẫn:

TS. Nguyễn Đình Dương

Sinh viên:

Nguyễn Nam Khánh

Lớp:

CNTT1-K60

Mã sinh viên:

191210564


MỤC LỤC
LỜI CẢM ƠN ...................................................................................................... 3
DANH MỤC CÁC TỪ VIẾT TẮT .................................................................... 4
DANH MỤC BẢNG BIỂU ................................................................................. 5
DANH MỤC HÌNH ẢNH ................................................................................... 6

GIỚI THIỆU ........................................................................................................ 7
CHƯƠNG 1. TỔNG QUAN ............................................................................... 8
1.1. Tình hình ngành Du lịch ở Việt Nam ...................................................... 8
1.2. Các website về Du lịch hiện nay ............................................................... 9
1.2.1. Mytour.vn ............................................................................................ 9
1.2.2. Khamphadisan.com (Khám phá di sản) ............................................ 10
1.3. Tính cấp thiết của đề tài .......................................................................... 10
1.4. Nhiệm vụ của đồ án ................................................................................ 11
1.4.1. Mục đích ............................................................................................ 11
1.4.2. Yêu cầu .............................................................................................. 11
1.4.3. Môi trường phát triển........................................................................ 11
1.5. Giới thiệu công nghệ ............................................................................... 12
1.5.1. VueJS ................................................................................................. 12
1.5.2. Firebase............................................................................................. 14
1.5.3. SASS/SCSS......................................................................................... 16
CHƯƠNG 2. PHÂN TÍCH ............................................................................... 19
2.1. Xác định yêu cầu ..................................................................................... 19
2.1.1. Yêu cầu chức năng ............................................................................ 19
2.1.2. Yêu cầu phi chức năng ...................................................................... 19
2.2. Đặc tả phần mềm..................................................................................... 20
2.2.1. Phát biểu bài tốn ............................................................................. 20
2.2.2. Mơ hình use-case............................................................................... 21
2.2.3. Bảng danh sách nghiệp vụ (Use Case List) ...................................... 25
2.2.4. Sơ đồ tuần tự ..................................................................................... 26
CHƯƠNG 3. THIẾT KẾ CƠ SỞ DỮ LIỆU ................................................... 28
3.1. Cấu trúc cơ sở dữ liệu ............................................................................. 28
3.2. Chi tiết các bảng ...................................................................................... 29


CHƯƠNG 4. HIỆN THỰC HĨA CHƯƠNG TRÌNH ................................... 34

KẾT LUẬN VÀ KIẾN NGHỊ .......................................................................... 38
TÀI LIỆU THAM KHẢO ................................................................................ 39


3

LỜI CẢM ƠN
Trong suốt thời gian học tập, rèn luyện tại trường Đại học Giao Thông Vận Tải,
em xin chân thành cảm ơn tới các thầy/cô giáo trong nhà trường vì đã tạo điều kiện
thuận lợi nhất cho chúng em trong việc học tập và nghiên cứu.
Em cũng xin gửi lời cảm ơn chân thành tới tất cả các thầy cô giáo trong Khoa
CNTT và các thầy cô bộ môn liên quan đã giảng dạy và truyền đạt lại những kiến thức
bổ ích cho chúng em trong suốt thời gian bốn năm học tập tại trường, giúp em có thêm
nhiều kiến thức để có được nền tảng vững chắc, sẵn sàng bước tiếp trong con đường
sau này
Đặc biệt em xin gửi lời chân thành cảm ơn thầy Nguyễn Đình Dương, trong suốt
thời gian làm đồ án tốt nghiệp vừa qua, thầy đã dành nhiều thời gian để theo sát,
hướng dẫn em đi đúng hướng để hoàn thành đề tài.
Mặc dù đã cố gắng hoàn thành đồ án trong những phạm vi và khả năng cho phép,
nhưng cũng không thể tránh khỏi các thiếu sót. Rất mong nhận được sự cảm thơng
cũng như sự đóng góp, chỉ dẫn của q Thầy Cô và các bạn.

Em xin chân thành cảm ơn!
Hà Nội, ngày… tháng … năm 2023
Sinh viên thực hiện

Nguyễn Nam Khánh


4

DANH MỤC CÁC TỪ VIẾT TẮT
STT

Từ viết tắt

Diễn giải

1

SASS

Syntactically Awesome StyleSheets

2

SCSS

Sassy Cascading Style Sheets

3

DOM

Document Object Model


5

DANH MỤC BẢNG BIỂU

Bảng 2.1. Bảng danh sách nghiệp vụ .................................................................. 25
Bảng 3.1. Bảng bài đăng ..................................................................................... 29
Bảng 3.2. Bảng tài khoản .................................................................................... 30
Bảng 3.3. Bảng quyền ......................................................................................... 31
Bảng 3.4. Bảng địa chỉ ........................................................................................ 31
Bảng 3.5. Bảng bình luận .................................................................................... 32
Bảng 3.6. Bảng địa điểm du lịch ......................................................................... 32
Bảng 3.7. Bảng ảnh ............................................................................................. 33


6

DANH MỤC HÌNH ẢNH
Hình 1.1. Lượng khách du lịch từ 2015 đến 2022 ................................................ 8
Hình 1.2. Vuejs.................................................................................................... 12
Hình 1.3. Mơ hình mvvm. ................................................................................... 13
Hình 1.4. Firebase ............................................................................................... 14
Hình 1.5. Sass ...................................................................................................... 16
Hình 2.1. Biểu đồ Use Case Tổng Quát .............................................................. 21
Hình 2.2. Biểu đồ Use Case xác thực người dùng .............................................. 22
Hình 2.3. Biểu đồ Use Case xác thực Quản Trị Viên ......................................... 22
Hình 2.4. Biểu đồ Use Case Người Dùng ........................................................... 23
Hình 2.5. Biểu đồ Use Case Quản Trị Viên ........................................................ 24
Hình 2.2. Sơ đồ tuần tự Đăng Nhập .................................................................... 26
Hình 2.3. Sơ đồ tuần tự đăng ký.......................................................................... 26
Hình 2.4. Sơ đồ tuần tự đăng bài ......................................................................... 27
Hình 2.5. Sơ đồ tuần tự thêm sửa xóa địa điểm du lịch ...................................... 27
Hình 3.1. Sơ đồ cấu trúc cơ sở dữ liệu ................................................................ 28
Hình 4.1. Trang đăng nhập user .......................................................................... 34
Hình 4.2. Trang đăng ký tài khoản user .............................................................. 34

Hình 4.3. Trang hiển thị bài viết mới nhất .......................................................... 35
Hình 4.4. Giao diện đăng bài .............................................................................. 35
Hình 4.5. Giao diện đăng nhập trang admin ....................................................... 36
Hình 4.6. Giao diện quản lý danh sách tài khoản người dùng ............................ 36
Hình 4.7. Giao diện quản lý danh sách bài viết giới thiệu địa điểm của admin . 37
Hình 4.8. Giao diện quản lý danh sách bài đăng của người dùng ...................... 37


7

GIỚI THIỆU
Công nghệ thông tin đã và đang giữ vai trò quan trọng ở mọi quốc gia trên thế
giới, trong đó có Việt Nam. Đặc biệt, trong bối cảnh thời đại công nghệ số như hiện
tại, công nghệ thông tin ngày càng khẳng định rõ ràng vai trò và sức ảnh hưởng đến
mọi mặt của đời sống xã hội. Hầu hết các ngành nghề hiện nay đều có sự góp mặt của
các ứng dụng cơng nghệ thơng tin, ví dụ: ngành giáo dục, an ninh mạng, …
Song song với những lĩnh vực đó, trong cơng cuộc đổi mới đất nước, ngành Du
lịch cũng là một trong những ngành rất quan trọng trong xu thế của xã hội hiện nay.
Đây là một ngành kinh tế tổng hợp, có vị trí quan trọng với sự phát triển kinh tế – xã
hội. Đối với cá nhân, Du lịch giúp con người nâng cao hiểu biết, mở rộng các mối
quan hệ xã hội. Đối với quốc gia, Du lịch giúp tăng cường quảng bá nét đẹp văn hóa
của đất nước, dân tộc đó tới các quốc gia khác trên thế giới. Từ đó, đưa nước ta tới gần
quốc gia khác. Nhờ vậy, giúp mang lại cuộc sống hạnh phúc hơn.
Trong kỳ làm đồ án tốt nghiệp, được TS. Nguyễn Đình Dương hướng dẫn trong
việc xây dựng chương trình “Tra cứu, chia sẻ thơng tin địa điểm du lịch trong nước
Việt Nam” là một cơ hội để em tìm hiểu sâu về tầm quan trọng của Du lịch. Do hạn
chế về mặt thời gian cũng như kiến thức và kinh nghiệm quản lý nên em khơng thể
tránh khỏi những sai sót. Em rất mong được sự giúp đỡ và ý kiến đóng góp của thầy cơ
và các bạn để em tiếp tục hồn thành đề tài này được hoàn thiện hơn.

8

CHƯƠNG 1. TỔNG QUAN
1.1. Tình hình ngành Du lịch ở Việt Nam
Ở nhiều Quốc gia, du lịch đóng góp một phần đáng kể trong tổng thu nhập hàng
năm. Đặc biệt tại Việt Nam, du lịch được đánh giá là một trong 3 ngành kinh tế mũi
nhọn được nhà nước chú trọng đầu tư cơ sở hạ tầng, không ngừng phát triển và đóng
góp rất lớn và nền kinh tế đất nước.
Trong những năm qua, du lịch Việt Nam đang trên đà phát triển, lượng khách
quốc tế đến cũng như khách du lịch nội địa ngày càng tăng. Du lịch Việt Nam ngày
càng được biết đến nhiều hơn trên thế giới, nhiều điểm đến trong nước được bình chọn
là địa chỉ yêu thích của du khách quốc tế. Du lịch đang ngày càng nhận được sự quan
tâm của toàn xã hội. Đặc biệt, năm 2022 – năm bùng nổ của du lịch nội địa ở Việt
Nam đã ghi nhận sự tăng trưởng mạnh của khách nội địa 2022 khi đạt 101,3 triệu lượt,
tăng 168,3% so với kế hoạch, vượt mức trước dịch.
Theo số liệu thống kê từ Tổng cục Du lịch, trước Covid-19, lượng khách nội địa
tăng đều qua các năm và đạt đỉnh vào 2019 với 85 triệu lượt. Năm 2022, sau khi gỡ bỏ
mọi hạn chế đi lại, lượng khách nội địa cả năm đã đạt 101,3 triệu lượt, tăng 168,3% so
với mục tiêu 60 triệu và vượt con số của 2019. Riêng ba tháng hè, lượng khách đạt hơn
35 triệu. Doanh thu đạt 495.000 tỷ đồng, vượt 23% kế hoạch. Nhiều chuyên gia khẳng
định, đây là năm hồi sinh của du lịch nội địa.

Hình 1.1. Lượng khách du lịch từ 2015 đến 2022. Nguồn: VnExpress.net.


9
Sang đến tháng 1/2023, theo thông tin do Tổng cục Du lịch cơng bố, Việt Nam
đón lượng khách nội địa ước đạt 13 triệu lượt, gấp gần 1,6 lần so với cùng kỳ năm
ngối. Trong đó, 4,5 triệu lượt khách lưu trú. Đây là lượng khách nội địa cao nhất

trong 5 năm trở lại, tính từ 2018 khi Tổng cục Du lịch cung cấp số liệu thống kê lượt
khách từng tháng.
Cùng với đó, lượng khách quốc tế đến Việt Nam trong tháng 1/2023 là gần
872.000 lượt, tăng 23,2% so với tháng 12/2022 và gấp 44,2 lần cùng kỳ năm 2022.
Doanh thu du lịch lữ hành tháng 1/2023 ước đạt 2.200 tỷ đồng, tăng 113,4% so với
cùng kỳ năm trước.
Có thể nói, từ những số liệu đã được đề cập, ta có thể thấy rằng ngành Du lịch
đóng một vai khơng thể thiếu trong đời sống của con người ở Việt Nam nói riêng và
các quốc gia khác trên thế giới nói chung, góp phần vào việc tăng trưởng, phục hồi nền
kinh tế đất nước.

1.2. Các website về Du lịch hiện nay
1.2.1. Mytour.vn
Mytour Việt Nam chuyên cung cấp các dịch vụ đặt phòng khách sạn, đặt vé máy
bay, đặt tour du lịch với mức giá hấp dẫn cùng các phương thức thanh toán dễ dàng,
linh hoạt... Mytour giúp khách hàng lên kế hoạch cho chuyến đi của mình một cách
thuận tiện và nhanh chóng nhất.
Ưu điểm:
- Đầy đủ các tính năng đáp ứng nhu cầu của khách hàng như đặt phòng khách
sạn, đặt vé máy bay, cho phép khách hàng đánh giá về các địa điểm, các dịch vụ đó.
- Cho phép theo dõi trạng thái đơn hàng của khách
Nhược điểm:
- Các đánh giá của khách hàng chỉ là đánh giá một chiều, khơng có phản hồi từ
những khách hàng khác.
- Website chưa có chức năng cho phép người dùng tự đăng bài viết cá nhân về
những địa điểm du lịch đã đến.


10
1.2.2. Khamphadisan.com (Khám phá di sản)

Khamphadisan.com là trang website nhằm cung cấp các thơng tin hữu ích, liên
quan đến các địa điểm, kinh nghiệm du lịch trong nước và ở nước ngồi cho các bạn
đang có nhu cầu đi du lịch tham khảo.
Ưu điểm:

- Giới thiệu về các địa điểm rất đầy đủ chi tiết.
- Số lượng địa điểm da dạng
Nhược điểm:

- Khơng có phần bình luận của người dùng

1.3. Tính cấp thiết của đề tài
Hiện nay, hầu hết những du khách khi muốn đi tới những địa điểm xa lạ, chưa
từng đặt chân tới từ trước đến giờ, họ sẽ cần phải có một sự chuẩn bị kỹ càng. Để làm
được điều đó thì sẽ có rất nhiều thứ cần bàn tới, nhưng một trong những điều kiện tiên
quyết để có được sự chuẩn bị tốt nhất đó là thông tin về địa điểm mà họ đang muốn
đến. Không những thế, khách hàng cịn cần biết thêm nhiều thơng tin về địa danh, ví
dụ: đánh giá của những du khách đã từng đến đó.
Các website liên quan đến du lịch hiện nay hầu như chỉ đáp ứng được nhu cầu cơ
bản, ví dụ: Đặt phịng, đặt vé máy bay, …. Nếu khách hàng muốn tìm hiểu, trao đổi
thơng tin với nhau về một vấn đề, họ sẽ cần phải sử dụng một ứng dụng khác như
Facebook, Twitter, Zalo, …. Việc xây dựng website “Tra cứu và chia sẻ thông tin địa
điểm du lịch trong nước Việt Nam” với mục đích nhằm tạo một cơng cụ hiệu quả giúp
cho việc tra cứu, chia sẻ địa điểm du lịch, tạo ra một mơi trường giúp người dùng có
thể trực tiếp trao đổi với nhau tại chính website mà họ đang sử dụng mà không phải sử
dụng những nền tảng nêu trên để tìm kiếm thơng tin thơng qua mơi trường Internet là
một giải pháp cần thiết giúp khách hàng có cảm giác dễ dàng, thuận lợi và tạo cảm
giác tin cậy với website họ đang dùng.

11

1.4. Nhiệm vụ của đồ án
1.4.1. Mục đích
Xây dựng website cho phép khách hàng có thể đăng tải các bài viết chia sẻ địa
điểm du lịch, tìm kiếm, tra cứu địa điểm du lịch trên phạm vi toàn quốc, quản lý các
bài viết, các tài khoản của mỗi cá nhân.
Tìm hiểu về kỹ thuật lập trình webite với VueJS, sử dụng Firebase để xây dựng
Back-end và cách thức tổ chức mã nguồn trong Dự án.

1.4.2. Yêu cầu
Xây dựng được website gồm các chức năng:

a) Người dùng:
- Đăng ký / Đăng nhập
- Tạo và chia sẻ bài viết cá nhân, cho phép mọi người vào bình luận, chia sẻ
cảm xúc. Giúp tăng tính tương tác giữa người dùng với nhau.

- Tra cứu địa điểm du lịch theo tên địa điểm, tên thành phố
- Xem thơng tin, sửa, xóa thơng tin của tài khoản cá nhân
b) Quản trị viên:
- Quản lý, duyệt các bài viết do người dùng đăng tải.
- Quản lý danh sách tài khoản đã tạo của người dùng
- Thêm, sửa, xóa địa điểm du lịch
1.4.3. Mơi trường phát triển
Trong quá trình tìm hiểu và xây dựng đồ án, em đã chọn thực hiện website trên
nền tảng ứng dụng mã nguồn mở với JS, cơ sở dữ liệu Firebase. Với ưu điểm mã
nguồn được tổ chức rất tốt không những giúp em có thể tìm hiểu và phát triển website
của mình trên đó mà cịn là một trong những tài liệu tuyệt vời giúp cho việc ôn lại
những kiến thức trên lớp và áp dụng những kiến thức đó vào đề tài của mình.

12
Mơi trường phát triển: Visual Studio Code
Ngơn ngữ lập trình: VueJS
Hệ quản trị CSDL: Firestore database
Nền tảng hỗ trợ: Website

1.5. Giới thiệu cơng nghệ
1.5.1. VueJS (Xem mục [5])

Hình 1.2. VuejS. Nguồn: google.com.
a) Tổng quan về VueJS?
Vue (phiên âm /vjuː/, đọc giống như từ view) là một framework Javascript tiên
tiến trong xây dựng giao diện người dùng, không giống như các framework khác, Vue
được xây dựng từ những dòng code cơ bản nhất nhằm tối ưu tốc độ. Thư viện của Vue
chỉ tập trung vào lớp hiển thị, rất đơn giản để tiếp cận và dễ dàng tích hợp vào các hệ
thống khác. Vue cũng có khả năng cung cấp các ứng dụng web đơn trang Single Page
Application (SPA) cho phép kết hợp với nhiều các công cụ hiện đại như Laravel chẳng
hạn.
Vue.js mới chỉ ra mắt năm 2015, nhưng đã sớm khẳng định mình và sớm trở
thành người thay thế Angular và React.


13
b) Mơ hình MVVM
MVVM là viết tắt của Model-View-ViewModel là một mơ hình được áp dụng
trong framework Vue.js.

Hình 1.3. Mơ hình MVVM. Nguồn: Viblo.Asia.

Trong mơ hình này, dữ liệu mỗi khi được "gán" vào View hoặc Model sẽ đều
được Vue.js tự động gắn cho phần còn lại. Tức là khi dữ liệu thay đổi ở Model nó sẽ
tự động được "cập nhật" sang View và khi người dùng thay đổi dữ liệu trên View (ví
dụ nhập liệu vào ơ địa chỉ email chẳng hạn) thì dữ liệu cũng được tự động cập nhật
ngược lại Model. Trong cộng đồng Vue.js thường gọi mơ hình này với một thuật ngữ
khác là two-way data binding, tạm gọi là gán dữ liệu hai chiều.

c) Kiến thức cần thiết cho Vue.js
Sử dụng Vue.js nói riêng hay phát triển các ứng dụng web nói chung địi hỏi
khá nhiều các kiến thức cơ bản khác nhau, dưới đây là các kiến thức bạn nên có khi
làm việc với Vue.js nên tìm hiểu: HTML, CSS, JS, JQUERY

d) So sánh Vue.js với các framework cùng dạng
Hiện nay có rất nhiều các framework Javascript mạnh mẽ, kể đến có React (hậu
thuẫn bởi Facebook), Angular (hậu thuẫn bởi Google), Ember, Riot, Polymer... tuy


14
nhiên Vue.js đang là sự lựa chọn lý tưởng cho các ứng dụng web ở mức vừa và lớn.
Có các lý do như sau:
Hiệu năng Vue.js là thực sự đáng nể so với các đối thủ khác.
Vue.js có dung lượng tải cực bé do đã tách một số phần ra khỏi core như
Vuex, vue-router... nó giúp cải thiện tốc độ tải của tồn trang.
Một lý do mà nhiều người tìm đến với Vue.js là tính đơn giản, dễ học, dễ
áp dụng đặc biệt cho những người chưa có nhiều kiến thức nền.
Vue.js ln học hỏi và tích hợp những gì tốt nhất từ các framework khác,
nó cũng giống như framework Laravel nổi tiếng, luôn thay đổi và luôn tốt hơn.

1.5.2. Firebase (xem mục [2])

Hình 1.4. Firebase. Nguồn: wiki.matbao.net
a) Tổng quan về Firebase
Firebase là dịch vụ cơ sở dữ liệu hoạt động trên nền tảng đám mây – cloud. Kèm
theo đó là hệ thống máy chủ cực kỳ mạnh mẽ của Google. Chức năng chính là giúp
người dùng lập trình ứng dụng bằng cách đơn giản hóa các thao tác với cơ sở dữ liệu.
Cụ thể là những giao diện lập trình ứng dụng API đơn giản. Mục đích nhằm tăng
số lượng người dùng và thu lại nhiều lợi nhuận hơn.
Đặc biệt, còn là dịch vụ đa năng và bảo mật cực tốt. Firebase hỗ trợ cả hai nền
tảng Android và IOS. Khơng có gì khó hiểu khi nhiều lập trình viên chọn Firebase làm
nền tảng đầu tiên để xây dựng ứng dụng cho hàng triệu người dùng trên toàn thế giới.


15
b) Tổng quan về công nghệ Cloud Firestore
Cloud Firestore là cơ sở dữ liệu mới của Firebase phát triển dành cho ứng dụng di
động. Nó là sự kế thừa của Realtime Database với mơ hình dữ liệu mới và trực quan
hơn. Cloud Firestore phong phú hơn, nhanh hơn và có khả năng mở rộng siêu việt hơn
so với Realtime Database.
Giống như Firebase Realtime Database, nó giúp dữ liệu của bạn đồng bộ hóa trên
các ứng dụng client thơng qua việc đăng ký realtime và cung cấp hỗ trợ ngoại tuyến
cho thiết bị di động và web. Cloud Firestore cũng cung cấp tích hợp với các sản phẩm
khác của Firebase và Google Cloud Platform, bao gồm cả Cloud Functions.

c) Lịch sử ra đời của Firebase
Gần một thập niên trước, Firebase ra đời với tiền thân là Envolve. Đây là một nền
tảng đơn giản chuyên cung cấp những API cần thiết để tích hợp tính năng chat vào
trang web. Bên cạnh ứng dụng nhắn tin trực tuyến, Envolve còn được người dùng sử
dụng để truyền và đồng bộ hóa dữ liệu cho những ứng dụng khác như các trò chơi trực
tuyến, …. Do đó, các nhà sáng lập đã tách biệt hệ thống nhắn tin trực tuyến và đồng bộ
dữ liệu thời gian thực thành hai phần riêng biệt.

Trên cơ sở đó, năm 2012, Firebase ra đời với sản phẩm cung cấp là dịch vụ
Backend-as-a-Service. Tiếp đến, vào năm 2014, Google mua lại Firebase và phát triển
nó thành một dịch vụ đa chức năng được hàng triệu người sử dụng cho đến hiện nay.


16
1.5.3. SASS/SCSS (Xem mục [8])

Hình 1.5. SASS. Nguồn: google.com
a) Giới thiệu về CSS Preprocessor
CSS Preprocessors là ngôn ngữ tiền xử lý CSS. Là một ngôn ngữ kịch bản mở
rộng của CSS và được biên dịch thành cú pháp CSS giúp bạn viết CSS nhanh hơn và
có cấu trúc rõ ràng hơn. CSS Preprocessor có thể giúp bạn tiết kiệm thời gian viết
CSS, dễ dàng bảo trì và phát triển CSS.

b) Giới thiệu về SASS/SCSS
SASS/SCSS là một chương trình tiền xử lý CSS (CSS preprocessor). Nó giúp bạn
viết CSS theo cách của một ngơn ngữ lập trình, có cấu trúc rõ ràng, rành mạch, dễ phát
triển và bảo trì code hơn.
SASS và SCSS về bản chất vấn đề là giống nhau, chỉ khác nhau cách viết
SASS là chữ viết tắt của Syntactically Awesome Style Sheets, chương trình tiền
xử lý bằng ngơn ngữ kịch bản (Preprocessor Scripting Language), sẽ được biên dịch
thành CSS. Nghĩa là, mình sẽ làm style bằng SASS, rồi SASS sẽ render việc mình làm
thành file CSS.
SASS bản thân có hai kiểu viết khác nhau, một kiểu như là HAML, Pug – Sử dụng
indent (cách thụt đầu dòng) để phân tách các khối code, sử dụng xuống dòng để phân
biệt rules , có phần mở rộng là .sass.
SCSS sử dụng cú pháp giống với Ruby (vì đơn giản nó được thiết kế bởi các lập
trình viên Ruby). Có phần mở rộng là .scss , SCSS ra đời sau SASS và có cú pháp viết

17
tương tự như cách viết CSS. Cú pháp này được tạo ra nhằm thu hẹp khoảng cách giữa
SASS và CSS bằng cách mang lại một thứ gì đó thân thiện với CSS.

c) Các tính năng cơ bản của SCSS
Xếp chồng (Nested Rules)

- Đây chính là một tính năng được đánh giá cao của SCSS. Tính năng này được sử
dụng rất thường xun trong việc lập trình. Các bạn có thể tham khảo những đoạn code
có dùng tính năng này để nhận ra sự khác biệt.
Biến (Variable):

- Sử dụng biến với SCSS vô cùng đơn giản và dễ hiểu. Các bạn chỉ cần đặt tên cho
biến và bắt đầu bằng $. Biến chứa đựng các giá trị mà người dùng sử dụng nhiều lần.
Ví dụ như các mã màu, font chữ, kiểu chữ, …
Quy tắc Mixin – SCSS

- Mixin là một trong những tính năng phải nói đến khi giải đáp SCSS là gì. Điều
này giúp cho người dùng tạo ra các hàm sử dụng được trong nền tảng này. Từ đó người
dùng có thể truyền các tham số vào bên trong nó để sử dụng. Mixin được biết đến là
một cơ chế khá phổ biến trong SASS. Công dụng mà Mixin đem lại chính là mang
nhiều thuộc tính đã quy ước vào một thành phần bất kỳ.


18
Kế thừa (Extends):

- Khi nhắc đến tính năng này, người dùng sẽ nghĩ ngay đến OOP. Lập trình hướng
đối tượng với các class được lập sắn. Những tag cần thì người dùng chỉ việc @extend

class vào là hồn chỉnh.
Import:

- Tính năng này của SCSS cũng có trên cả SASS. Cú pháp này vô cùng hữu dụng
và thường xuyên được dùng trong các project. Nó giống như việc bạn require hay
include file vào các file khác.


19

CHƯƠNG 2. PHÂN TÍCH
2.1. Xác định yêu cầu
2.1.1. Yêu cầu chức năng
a) Đối với quản trị viên
- Theo dõi được các tài khoản người dùng đã đăng ký dưới dạng danh sách
- Có quyền duyệt hoặc xóa bài viết do người dùng đăng tải.
- Thêm, sửa, xóa địa điểm những bài viết giới thiệu địa điểm du lịch
b) Đối với người dùng
- Tạo và đăng nhập tài khoản bằng email
- Đăng tải bài viết về những địa điểm du lịch, giúp tăng sự tương tác giữa người
dùng với nhau

- Bày tỏ cảm xúc bằng nút like
- Thêm, sửa, xóa bình luận trong bài viết. Những bình luận này sẽ là những thơng
tin hữu ích để người dùng có nhu cầu tham khảo ý kiến của mọi người về địa điểm.

- Tra cứu các bài viết theo tên thành phố của địa điểm du lịch
- Xem, chỉnh sửa thông tin cá nhân.
2.1.2. Yêu cầu phi chức năng
a) Yêu cầu về hệ thống

Quản trị viên:

- Quyền quản trị / Duyệt bài viết / Thêm sửa xóa nội dung
Người dùng:

- Thêm, sửa, xóa bài viết / bình luận / Bày tỏ cảm xúc / Chỉnh sửa thông tin cá
nhân.