Xây dựng hệ thống đặt vé xe khách giường nằm

LỜI CẢM ƠN
Sau một thời gian học tập, nghiên cứu và triển khai đề tài: “Xây dựng hệ
thống đặt vé xe khách giường nằm”, đến nay chúng tôi đã hoàn thành xong đề tài
nghiên cứu của mình.
Chúng tôi xin bày tỏ tấm lòng biết ơn sâu sắc nhất tới thầy giáo – Thạc sỹ
Nguyễn Duy Hiếu đã trực tiếp hướng dẫn, giúp đỡ chúng tôi trong suốt quá trình
chúng tôi thực hiện đề tài nghiên cứu khoa học này.
Đồng thời chúng tôi cũng chân thành cảm ơn tới lãnh đạo Nhà trường, Ban
chủ nhiệm Khoa cùng các thầy cô giáo đã giúp đỡ, tạo điều kiện để chúng tôi có
cơ hội nghiên cứu, học tập và hoàn thành đề tài nghiên cứu khoa học này.
Tuy nhiên điều kiện về trình độ chuyên môn và thời gian thực hiện đề tài
còn hạn chế nên đề tài của chúng tôi không tránh khỏi những thiếu sót, chúng tôi
rất mong nhận được sự góp ý của thầy cô để có thể hoàn thành tốt đề tài nghiên
cứu này.
Chúng tôi xin chân thành cảm ơn!
Sơn La, tháng 5 năm 2018
Sinh viên
Nguyễn Văn Thương
Hồ Đức Anh
Vũ Thế Anh
Tống Ngọc Anh
Lò Văn Công


MỤC LỤC
PHẦN MỞ ĐẦU .................................................................................................. 1
1. Lý do chọn đề tài ............................................................................................... 1
2. Mục đích nghiên cứu ......................................................................................... 1
3. Đối tượng nghiên cứu........................................................................................ 1
4. Phạm vi nghiên cứu ........................................................................................... 1
5. Phương pháp nghiên cứu ................................................................................... 1

6. Bố cục đề tài ...................................................................................................... 2
CHƯƠNG 1: TỔNG QUAN VỀ THIẾT KẾ WEB ......................................... 3
1.1. Lịch sử hình thành của thiết kế web............................................................... 3
1.2. Xu hướng phát triển của thiết kế web ............................................................ 5
1.2.1. Mobile-first ............................................................................................. 5
1.2.2. Thiết kế website tương thích với mọi kích thước của thiết bị ................ 5
1.2.3. Sử dụng các framework của CSS và JavaScript ..................................... 6
1.3. Căn bản về HTML.......................................................................................... 6
1.3.1. HTML là gì? ............................................................................................ 6
1.3.2. Tập tin HTML là gì? ............................................................................... 7
1.3.3. Thẻ trong HTML ..................................................................................... 7
1.3.4. Cấu trúc của một tài liệu HTML ............................................................. 7
1.3.5. Các phiên bản HTML.............................................................................. 7
1.4. Căn bản về CSS .............................................................................................. 8
1.4.1. CSS là gì? ................................................................................................ 8
1.4.2. Lịch sử CSS............................................................................................. 8
1.4.3. Lợi thế của CSS....................................................................................... 8
1.5. Căn bản về JavaScript .................................................................................... 9
1.5.1. JavaScript là gì? ...................................................................................... 9
1.5.2. Các lợi thế của JavaScript ....................................................................... 9
1.5.3. Hạn chế của JavaScript ......................................................................... 10
CHƯƠNG 2: TÌM HIỂU VỀ LARAVEL ....................................................... 11
2.1. Tổng quan về Laravel................................................................................... 11


2.1.1. Giới thiệu về Laravel............................................................................. 11
2.1.2. Các tính năng cơ bản của Laravel ......................................................... 11
2.1.3. Lịch sử phát triển của Laravel............................................................... 12
2.2. Mô hình MVC .............................................................................................. 13
2.2.1. Giới thiệu về mô hình MVC ................................................................. 13

2.2.2. Các thành phần của mô hình MVC ....................................................... 14
2.2.3. Quy trình hoạt động mô hình MVC trong website ............................... 15
2.3. Các thành phần của Laravel (phiên bản 5.4 trở lên) .................................... 16
2.3.1. Router .................................................................................................... 16
2.3.2. Tham số của Router .............................................................................. 17
2.3.3. Tên Router ............................................................................................. 18
2.3.4. Nhóm Router ......................................................................................... 18
2.3.5. Route Model Binding ............................................................................ 19
2.3.6. Form Method Spoofing ......................................................................... 20
2.3.7. Truy cập vào tuyến hiện tại ................................................................... 20
2.4. Middleware................................................................................................... 21
2.4.1. Xác định Middleware ............................................................................ 21
2.4.2. Đăng ký Middleware ............................................................................. 21
2.4.3. Tham số Middleware............................................................................. 22
2.4.4. Phần mềm trung gian có thể chạy được ................................................ 22
2.5. Controllers (Bộ điều khiển).......................................................................... 22
2.5.1. Bộ điều khiển cơ bản............................................................................. 22
2.5.2. Điều khiển Middleware ......................................................................... 23
2.5.3. Bộ điều khiển tài nguyên ...................................................................... 23
2.5.4. Phụ thuộc Injection và Controllers........................................................ 25
2.5.5. Lọc đường đi ......................................................................................... 26
2.6. Blade Templates ........................................................................................... 26
2.6.1. Kế thừa mẫu .......................................................................................... 26
2.6.2. Hiển thị dữ liệu...................................................................................... 27
2.6.3. Cấu trúc điều kiện ................................................................................. 28


2.6.4. Including Sub-Views ............................................................................. 30
2.6.5. Service Injection.................................................................................... 31
2.6.6. Mở rộng Blade ...................................................................................... 31

2.7. Eloquent: Relationships ............................................................................... 32
2.7.1. Định nghĩa mối quan hệ ........................................................................ 32
2.7.2. Truy vấn quan hệ ................................................................................... 37
2.7.3. Eager Loading ....................................................................................... 39
2.7.4. Chèn và cập nhật các mô hình liên quan............................................... 40
2.8. Ưu điểm của Laravel .................................................................................... 42
CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG ĐẶT VÉ XE
KHÁCH GIƯỜNG NẰM ................................................................................. 43
3.1. Phân tích ....................................................................................................... 43
3.1.1. Mô tả thực trạng hệ thống quản lý đặt vé xe khách hiện nay ............... 43
3.1.2. Đề xuất ứng dụng đặt vé xe khách giường nằm ................................... 43
3.1.3. Phân tích yêu cầu .................................................................................. 44
3.2. Liệt kê tác nhân và Usecase ......................................................................... 44
3.2.1. Các tác nhân .......................................................................................... 44
3.2.2. Các Usecase........................................................................................... 44
3.3. Đặc tả việc đặt vé trên hệ thống ................................................................... 46
3.3.1. Mô tả quá trình hành khách tạo tài khoản trên hệ thống....................... 46
3.3.2. Mô tả quá trình đặt vé ........................................................................... 46
3.3.3. Mô tả quá trình duyệt ghế từ nhà xe ..................................................... 46
3.3.4. Mô tả quá trình đánh giá nhà xe ............................................................ 47
3.3.5. Quản trị tiếp nhận phản hồi của hành khách ......................................... 47
3.4. Mô hình lớp, quan hệ giữa các lớp............................................................... 47
3.4.1. Biểu đồ trình tự hoạt động .................................................................... 47
3.4.2. Biểu đồ lớp thực thể liên kết ................................................................. 49
3.5. Thiết kế giao diện ......................................................................................... 51
3.5.1. Giao diện của người quản trị ................................................................. 51
3.5.2. Giao diện của hành khách ..................................................................... 56


KẾT LUẬN VÀ KIẾN NGHỊ .......................................................................... 65

1. Kết luận ........................................................................................................... 65
2. Kiến nghị ......................................................................................................... 65
TÀI LIỆU THAM KHẢO ................................................................................ 66


DANH SÁCH HÌNH ẢNH
Hình 1.1 Thiết kế phù hợp với kích thước màn hình của thiết bị....................................6
Hình 1.2 Cấu trúc cơ bản 1 tài liệu ..................................................................................7
Hình 2.1 Các thành phần của mô hình MVC ................................................................ 14
Hình 2.2 Quy trình hoạt động mô hình MVC trong website .........................................15
Bảng 2.1 Các thao tác được xử lý bởi bộ điều khiển tài nguyên ...................................24
Bảng 2.2 Một số thuộc tính của biến $loop ...................................................................29
Bảng 2.3 Mô tả quan hệ has-many-through ..................................................................35
Bảng 2.4 Mô tả quan hệ đa hình ....................................................................................36
Hình 3.1 Biểu đồ usecase của tác nhân Hành khách .....................................................44
Hình 3.2 Biểu đồ usecase của tác nhân Nhà xe ............................................................. 45
Hình 3.3 Biểu đồ usecase của tác nhân người Quản trị .................................................46
Hình 3.4 Trình tự đăng ký tài khoản .............................................................................47
Hình 3.5 Trình tự hành khách đặt vé .............................................................................48
Hình 3.6 Trình tự nhà xe xác nhận ghế đặt từ hành khách ............................................48
Hình 3.7 Trình tự người quản trị ...................................................................................49
Hình 3.8 Biểu đồ lớp thực thể liên kết ..........................................................................49
Hình 3.9 Màn hình đăng nhập vào trang quản trị ..........................................................51
Hình 3.10 Màn hình sau khi đăng nhập thành công ......................................................52
Hình 3.11 Màn hình giao diện danh sách xe khách.......................................................52
Hình 3.12 Màn hình giao diện khi hệ thống chưa đủ dữ liệu ........................................53
Hình 3.13 Màn hình giao diện sửa chuyến đi ................................................................ 53
Hình 3.14 Màn hình giao diện sửa xe khách .................................................................54
Hình 3.15 Màn hình giao diện thêm chuyến đi ............................................................. 54
Hình 3.16 Màn hình giao diện thêm xe khách .............................................................. 55

Hình 3.17 Giao diện xác nhận xóa ................................................................................55
Hình 3.18 Màn hình giao diện đăng ký .........................................................................56
Hình 3.19 Màn hình giao diện đăng nhập .....................................................................57
Hình 3.20 Màn hình giao diện tìm chuyến ....................................................................58
Hình 3.21 Màn hình giao diện tìm chuyến thành công .................................................59
Hình 3.22 Màn hình giao diện khi chọn xe muốn đặt ghế ............................................60
Hình 3.23 Màn hình giao diện đặt ghế ..........................................................................61


Hình 3.24 Màn hình giao diện xác nhận đặt ghế hoặc hủy chuyến ............................... 62
Hình 3.25 Màn hình giao diện nhập sai điểm đi, điểm đến ...........................................63
Hình 3.26 Màn hình giao diện khi hệ thống chưa đủ dữ liệu ........................................64


DANH SÁCH THUẬT NGỮ VIẾT TẮT
Tên viết tắt

Ý nghĩa

CSDL

Cơ Sở Dữ Liệu

CSS

Cascading Style Sheets

CNTT

Công nghệ thông tin

HTML

HyperText Markup Language

MVC

Model - View – Controller

ORM

Object Relation Mapping

W3C

World Wide Web Consortium


PHẦN MỞ ĐẦU
1. Lý do chọn đề tài
Trong những năm gần đây, sự phát triển của công nghệ thông tin đặc biệt trong
lĩnh vực thiết kế web đạt nhiều thành tựu to lớn và thay đổi cách thức làm việc, sinh
hoạt, giao tiếp của con người. Công nghệ thông tin đã giúp phát triển, tạo ra những trang
web có tính tương tác với người dùng, giúp người dùng dễ dàng sử dụng và quản lý ví
dụ như các kênh mua bán online, đặt vé máy bay online, …
Hiện này, đã có nhiều trang web cung cấp thông tin xe khách nhưng chưa có trang
web cho đặt ghế, xem chi tiết thông tin xe khách, lịch trình… thuận tiện.
Việc mua vé xe khách thường thông qua bến xe hoặc gọi điện thoại nhưng hành
khách rất khó lựa chọn được chỗ ưng ý.
Chúng tôi mong muốn xây dựng hệ thống đặt vé qua môi trường Internet và việc

nhắm đến là xây dựng trang web nhằm giúp hành khách thuận tiện và dễ dàng chọn
được chuyến và chỗ ưng ý. Đồng thời, cũng giúp nhà xe có thêm một kênh bán vé đắc
lực. Với những lý do trên, chúng tôi chọn nghiên cứu đề tài: “Xây dựng hệ thống đặt
vé xe khách giường nằm”.
2. Mục đích nghiên cứu
 Nghiên cứu về xây dựng website.
 Nghiên cứu phát triển trang web đặt vé xe khách giường nằm.
 Tìm hiểu và xây dựng hệ thống đặt vé xe khách giường nằm.
3. Đối tượng nghiên cứu
 Hệ thống đặt vé xe khách qua website.
4. Phạm vi nghiên cứu
 Phân tích, thiết kế và cài đặt thử nghiệm hệ thống.
5. Phương pháp nghiên cứu
 Tổng hợp tài liệu.
 Nghiên cứu tài liệu.
 Khảo sát thực tế.
 Phân tích, thiết kế và lập trình trên máy tính.
1


6. Bố cục đề tài
Ngoài phần mở đầu và kết luận, đề tài gồm 3 chương:
Chương 1: Tổng quan về thiết kế web
Chương 2: Tìm hiểu về Laravel
Chương 3: Phân tích và thiết kế hệ thống đặt vé xe khách giường nằm

2


CHƯƠNG 1: TỔNG QUAN VỀ THIẾT KẾ WEB

1.1. Lịch sử hình thành của thiết kế web
Internet có lịch sử phát triển chưa thực sự lâu nhưng hiện nay nó có vai trò quan
trọng trong lĩnh vực CNTT. Những tiện ích mà Internet mang lại giúp con người ngày
càng thuận tiện hơn trong công việc, học tập, kết nối và giải trí.
Có thể nói rằng: Internet có vai trò to lớn như ngày nay một phần lớn là nhờ sự
phát triển của công nghệ website. Nhờ các hệ thống website, con người có thể tìm kiếm,
truyền tải, quảng bá, trao đổi thông tin một cách dễ dàng và thuận tiện. Hiện nay, công
nghệ web phát triển mạnh mẽ không chỉ dừng lại ở việc phát triển các trang web thông
thường, mà còn là phát triển các ứng dụng trên thiết bị di động nền web (web-based
applications).
Sự hình thành của thiết kế web:
Năm 1989, khi làm việc tại CERN, Tim Berners-Lee đã đề xuất để tạo ra một dự
án siêu văn bản toàn cầu mà sau này được gọi là World Wide Web. Trong thời gian
1991-1993 World Wide Web đã ra đời. Trang văn bản chỉ có thể được xem bằng cách
sử dụng một trình duyệt line-chế độ đơn giản. Năm 1993, Marc Andreessen và Eric Bina
tạo ra các trình duyệt Mosaic. Vào thời điểm đó có nhiều trình duyệt, tuy nhiên phần lớn
trong số họ là dựa trên Unix và không có sự tích hợp với các yếu tố thiết kế đồ họa như
hình ảnh; âm thanh. Các trình duyệt Mosaic đã phá vỡ mốc này. W3C đã được thành lập
trong tháng 10 năm 1994 để dẫn World Wide Web phát triển các giao thức phổ biến mà
thúc đẩy sự phát triển của nó và đảm bảo khả năng tương tác. W3C tiếp tục thiết lập các
tiêu chuẩn mà nay có thể thấy như HTML, CSS, JavaScript.
Năm 1994, Andreessen thành lập Communications Corp sau này được biết đến
như Netscape Communications, trình duyệt Netscape 0.9. Netscape tạo ra các thẻ HTML
riêng của mình mà không quan tâm đến quá trình chuẩn mực truyền thống. Ví dụ,
Netscape 1.1 bao gồm các thẻ cho việc thay đổi màu nền và định dạng văn bản với bảng
trên các trang web.
Trong suốt năm 1996-1999 các cuộc chiến trình duyệt bắt đầu, như Microsoft và
Netscape đã đấu tranh cho sự thống trị bằng cách ra mắt nhiều cải tiến trong các phiên
bản của mình. Trong thời gian đó có rất nhiều công nghệ mới trong lĩnh vực này, đặc
biệt là Cascading Style Sheets, JavaScript, và Dynamic HTML. Trên toàn bộ, “cuộc

3


chiến” trình duyệt đã dẫn đến nhiều sáng tạo tích cực và giúp thiết kế web phát triển với
một tốc độ nhanh chóng
Sự phát triển của thiết kế website:
Năm 1996, Microsoft phát hành bản trình duyệt đầu tiên của mình, trong đó đã
hoàn thành với các tính năng và các thẻ riêng. Nó cũng là trình duyệt đầu tiên hỗ trợ
phong cách trang, mà lúc đó được xem như là một kỹ thuật tối ưu. Các đoạn mã HTML
cho bảng ban đầu được dành cho việc hiển thị dữ liệu dạng bảng. Tuy nhiên các nhà
thiết kế nhanh chóng nhận ra tiềm năng của việc sử dụng bảng HTML cho các công việc
phức tạp, bố trí nhiều cột đó mà không thể thực hiện. Tại thời điểm này, thiết kế và thẩm
mỹ tốt dường như được ưu tiên hơn cấu trúc đánh dấu tốt, ít chú ý đến ngữ nghĩa và
cách tiếp cận. Trang web HTML được giới hạn trong các tùy chọn thiết kế của họ, thậm
chí nhiều hơn như vậy với các phiên bản trước của HTML. Để tạo ra các thiết kế phức
tạp, nhiều nhà thiết kế web có sử dụng các cấu trúc bảng phức tạp.
CSS được giới thiệu vào tháng 12 năm 1996 bởi W3C để hỗ trợ trình bày và bố trí.
Điều này cho phép mã HTML đơn giản và ngữ nghĩa hơn, cải thiện khả năng tiếp cận
web.
Năm 1996, flash (ban đầu được biết đến như là FutureSplash) đã được phát triển.
Vào thời điểm đó, các công cụ phát triển nội dung Flash tương đối đơn giản so với hiện
nay, sử dụng bố trí cơ bản và các công cụ vẽ, ActionScript, và một thời gian sau nó cho
phép các nhà thiết kế web vượt qua các nhược điểm của HTML, GIF và JavaScript. Tuy
nhiên, vì Flash yêu cầu một plug-in, nhiều nhà phát triển web tránh sử dụng nó vì sợ hạn
chế thị phần của mình do thiếu khả năng tương thích. Thay vào đó, các nhà thiết kế web
dùng hình ảnh động gif (nếu họ không từ bỏ sử dụng đồ họa chuyển động hoàn toàn) và
JavaScript cho các widget. Nhưng những lợi ích của Flash đã làm cho nó phổ biến trên
thị trường để cuối cùng làm việc theo cách của mình cho đại đa số các trình duyệt, và
đủ mạnh để được sử dụng phát triển toàn bộ trang.
Kết thúc cuộc chiến trình duyệt đầu tiên:

Trong năm 1998 Netscape công bố mã Netscape Communicator dưới một giấy
phép mã nguồn mở, cho phép các lập trình viên tham gia vào việc cải thiện các phần
mềm. Các dự án Web tiêu chuẩn đã được hình thành và phát huy tuân thủ trình duyệt
với HTML và CSS tiêu chuẩn bằng cách tạo ra Acid1, Acid2 và Acid3.

4


Năm 2000 là một năm quan trọng đối với Microsoft. Internet Explorer đã được
phát hành cho Mac, điều này quan trọng vì nó là trình duyệt đầu tiên hỗ trợ đầy đủ
HTML 4.01 và CSS 1, nâng cao về việc tuân thủ các tiêu chuẩn. Nó cũng là trình duyệt
đầu tiên hỗ trợ đầy đủ các định dạng PNG định dạng hình ảnh. Trong thời gian này
Netscape đã được bán cho AOL.
Giai đoạn 1988 – nay:
Kể từ đầu thế kỷ 21 các trang web đã trở nên ngày càng phổ biến trong cuộc sống.
Khi điều này xảy ra kéo theo các công nghệ của web cũng phát triển. Cũng đã có những
thay đổi đáng kể trong cách mọi người sử dụng và truy cập website
Trình duyệt hiện đại: Kể từ khi kết thúc cuộc chiến trình duyệt đã có nhiều trình
duyệt mới đưa vào thị trường. Nhiều trong số này là mã nguồn mở có nghĩa là họ có xu
hướng phát triển nhanh hơn và hỗ trợ nhiều hơn các tiêu chuẩn mới. Những tùy chọn
mới được nhiều người xem tốt hơn so với Microsoft Internet Explorer. Các trình duyệt
phổ biến có thể kể tới như: Google Chrome, Mozilla Firefox, Apple Safari, Opera…
Tiêu chuẩn mới: W3C đã phát hành tiêu chuẩn mới cho HTML (HTML5) và CSS
(CSS3), cũng như phiên bản JavaScript API (từng là một tiêu chuẩn). Trong những năm
trở lại đây, HTML5, CSS3, JavaScript đặc biệt là JQuery đã được sử dụng rộng rãi, giải
quyết nhiều bài toán về ứng dụng nền web: trò chơi, phần mềm quản lý, web services...
1.2. Xu hướng phát triển của thiết kế web
1.2.1. Mobile-first
Là một quy trình thực hiện thiết kế đi từ giao diện cho mobile đầu tiên sau đó
mới tới những thiết bị khác như ipad, laptop, desktop… Các trang web thiết kế thân

thiện với thiết bị di động cũng dần trở thành một xu hướng tất yếu, một tiêu chuẩn web
không thể thiếu ngày nay.
1.2.2. Thiết kế website tương thích với mọi kích thước của thiết bị
Thiết kế responsive là website tự động biết được kích thước màn hình của thiết
bị khách truy cập như thế nào để hiển thị cho phù hợp trên màn hình đó. Vì vậy, thiết kế
web responsive cũng trở nên rất phổ biến trong những năm gần đây nhờ vào sự gia tăng
của việc sử dụng Internet trên thiết bị di động. Thiết kế responsive được sử dụng phổ
biến và an toàn vì nó đại diện cho một cách tương đối đơn giản và giá rẻ cho các doanh
nghiệp để xây dựng một trang web điện thoại di động thân thiện với đầy đủ chức năng.

5


Nhưng thiết kế web đáp ứng không đi kèm với một số vấn đề nếu không được thực hiện
đúng cách, yếu tố hướng tới người dùng luôn được chú trọng nhiều nhất.

Hình 1.1 Thiết kế phù hợp với kích thước màn hình của thiết bị
1.2.3. Sử dụng các framework của CSS và JavaScript
Các Framework như Bootstrap, Jquery... đã tồn tại trong nhiều năm và tiếp tục
chứng minh sự hữu ích trên các dự án cả cá nhân và chuyên nghiệp. Việc sử dụng các
framework này giúp cho lập trình viên dễ dàng hơn trong việc tạo ra các website và cả
những ứng dụng nền web.
Hiện nay, các framework của JavaScript như AngularJS, NodeJS... đang tiến một
bước dài trong sự phát triển của website cũng như ứng dụng nền web. Việc tạo ra các
ứng dụng nền web theo đó cũng phát triển nhanh chóng và trở thành một trong những
hướng mũi nhọn của công nghệ phần mềm hiện đại.
1.3. Căn bản về HTML
1.3.1. HTML là gì?
- HTML là một ngôn ngữ đánh dấu dùng để miêu tả tài liệu web (các trang web).
- HTML viết tắt của Hyper Text Markup Language (ngôn ngữ đánh dấu siêu văn

bản).
- Một ngôn ngữ đánh dấu bao gồm một tập các thẻ đánh dấu nội dung.
- Tài liệu HTML được đánh dấu bằng các thẻ HTML.
- Mỗi thẻ HTML dùng để mô tả một nội dung nào đó trên trang web.
- HTML do Tim Berner-Lee giới thiệu năm 1990 và hiện đang được World Wide
Web Consortium (W3C) tiếp tục duy trì.

6


1.3.2. Tập tin HTML là gì?
- Tập tin HTML là một tập tin text có chứa các thẻ HTML (tập tin có phần mở
rộng là .html hoặc .htm)
- Tập tin HTML còn được gọi là một trang web.
- Nếu cú pháp có bị sai thì trình duyệt vẫn không báo lỗi, nó chỉ hiển thị không
như ý muốn.
1.3.3. Thẻ trong HTML
- Thẻ HTML là những từ khoá được định nghĩa trước nằm trong cặp dấu <...>
<tên_thẻ>nội dung</tên_thẻ>

1.3.4. Cấu trúc của một tài liệu HTML
Hình ảnh dưới đây mô tả cấu trúc cơ bản của một tài liệu HTML (một trang web).

Hình 1.2 Cấu trúc cơ bản 1 tài liệu
1.3.5. Các phiên bản HTML
Phiên bản

Năm

HTML

1991

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999

XHTML

2000
7


HTML5

2014
Bảng 1.1. Các phiên bản của HTML

1.4. Căn bản về CSS
1.4.1. CSS là gì?
CSS (Cascading Style Sheets) là một ngôn ngữ dùng để định dạng cho các phần tử
HTML (Ví dụ: Chỉnh kích cỡ chữ, chỉnh font chữ, màu chữ, màu nền, hình nền, đường

viền,....) dựa trên các cặp thuộc tính: giá trị thuộc tính.
Với việc sử dụng CSS, ta có thể định dạng ra các phần tử HTML đặc biệt và chuyên
nghiệp.
1.4.2. Lịch sử CSS
CSS được phát triển bởi Håkon Wium Lie vào 10/10/1994 và được duy trì bởi một
nhóm CSS Working Group của W3C. Nhóm này duy trì và công bố các tài liệu mới nhất
về CSS.
- Lịch sử các phiên bản của CSS:
CSS1 (Cascading Style Sheets 1) được công bố bởi W3C vào 12/1996. Phiên bản
này miêu tả ngôn ngữ CSS cũng như mô hình định dạng đơn giản đầu tiên cho tất cả các
thẻ HTML.
CSS2 được công bố vào 5/1998, được phát triển dựa trên CSS1. Phiên bản này bổ
sung sự hỗ trợ tới một số thiết bị (như máy in, …), các thiết bị về âm thanh, các bảng.
CSS3 được công bố vào 6/1999. Tại phiên bản này, CSS được phân chia thành các
Module nhỏ và từng Module chịu trách nhiệm cho một tính năng cụ thể nào đó.
1.4.3. Lợi thế của CSS
CSS tiết kiệm thời gian và công sức: Nếu đã học qua về HTML, sẽ thấy một điều
rằng: HTML không chứa bất cứ một thẻ nào để định dạng một trang web. HTML được
tạo để miêu tả nội dung của một trang web, còn CSS được dùng để định dạng chúng.
Bắt đầu từ HTML 3.2, các thẻ như <font> và các thuộc tính như color được thêm
vào. Việc thiết kế các trang web lớn, với thông tin về font và color trải dài qua nhiều
trang đơn, thì việc xác định font và thêm thuộc tính color vào các trang này tốn rất nhiều
thời gian và công sức.
Để xử lý vấn đề này, World Wide Web Consortium (W3C) đã tạo ra CSS. Và từ
đó, với CSS, lập trình viên tiết kiệm khá nhiều thời gian và công sức. Thay vì phải thêm
8


font và color cho từng trang web một, giờ đây, họ chỉ cần tạo một tệp .css ở ngoài, và
sau đó thêm vào từng trang web. Khi đó, có thể thay đổi giao diện của cả một website

lớn chỉ trong một thời gian rất ngắn bằng cách tạo các thay đổi trong tệp .css.
Sử dụng CSS giúp trang web tải nhanh hơn: Sử dụng CSS, không cần phải viết
từng thuộc tính cho từng thẻ HTML mỗi khi cần đến. Chỉ cần viết một định dạng (style)
CSS trong tệp .css và áp dụng cho tất cả các thẻ đó. Ít code hơn tức là sẽ giúp trang web
tải nhanh hơn.
Sử dụng CSS giúp dễ dàng bảo trì và nâng cấp trang web hơn.
CSS có nhiều thuộc tính hơn HTML. Do đó, sử dụng CSS giúp tạo các trang web
đẹp hơn nhiều khi so sánh với việc sử dụng các thẻ và thuộc tính HTML thuần.
Sử dụng CSS là phù hợp với chuẩn quốc tế. Hiện tại, rất nhiều thuộc tính của
HTML đã trở thành cũ và nhiều trình duyệt không còn hỗ trợ chúng nữa. Do đó, để
tương thích với các trình duyệt trong tương lai, nên sử dụng CSS.
1.5. Căn bản về JavaScript
1.5.1. JavaScript là gì?
JavaScript (JS) là một ngôn ngữ lập trình phía client: mã được thực thi bởi trình
duyệt của người dùng, sau khi trang web gửi về từ server.
JavaScript được sử dụng để tạo ra các trang web có tính tương tác:
- Chèn nội dung động vào trang web.
- Đáp ứng lại các thao tác của người dung.
- Lấy thông tin từ máy tính người sử dụng.
- Thực hiện tính toán trên máy tính người sử dụng.
- Tạo các ứng dụng, chức năng tương tác cho trang web.
JavaScript là ngôn ngữ lập trình phổ biến bậc nhất thế giới, và là một trong ba ngôn
ngữ (HTML, CSS, JavaScript) mà tất cả lập trình viên web nhất định phải học.
JavaScript được nhúng vào trang web để kết hợp với HTML/CSS.
1.5.2. Các lợi thế của JavaScript
Sự tương tác server ít hơn: Có thể kiểm tra đầu vào (input) của người sử dụng trước
khi gửi trang tới server. Điều này làm tiết kiệm lưu lượng tải ở server, nghĩa là server
hoạt động ít hơn.
Phản hồi ngay lập tức tới khách truy cập: Họ không phải chờ cho một trang web
tải lại để thấy xem nếu họ đã quên nhập cái gì đó.

9


Khả năng tương tác tăng lên: Có thể tạo các giao diện mà phản ứng lại khi người
sử dụng rê chuột qua chúng hoặc kích hoạt chúng thông qua bàn phím.
Giao diện phong phú hơn: Có thể sử dụng JavaScript để bao gồm những mục như
các thành phần Drag và Drop (DnD), các con trượt (Slider), cung cấp một Rich Interface
(giao diện giàu tính năng) tới website khách truy cập.
1.5.3. Hạn chế của JavaScript
Chúng ta không thể xem JavaScript như là một ngôn ngữ chương trình chính thức
(full-fledged). Nó thiếu các tính năng quan trọng sau:
Client-side JavaScript không cho phép đọc và ghi các file, bởi vì lý do bảo mật.
JavaScript không được sử dụng cho việc kết nối mạng các ứng dụng bởi vì không
có những hỗ trợ có sẵn.
JavaScript không có bất kỳ khả năng đa luồng hoặc đa xử lý.
JavaScript là một ngôn ngữ chương trình thông dịch, nhẹ mà cho phép xây dựng
khả năng tương tác trong các trang HTML tĩnh.
Kết luận
Qua chương 1, chúng tôi đã giới thiệu tổng quan về thiết kế web. Lịch sử hình
thành và xu hướng phát triển của thiết kế web, HTML, CSS, JavaScript. Chương 2 chúng
tôi sẽ giới thiệu về Laravel.

10


CHƯƠNG 2: TÌM HIỂU VỀ LARAVEL
2.1. Tổng quan về Laravel
2.1.1. Giới thiệu về Laravel
Laravel là một PHP Framework mã nguồn mở và miễn phí. Laravel được tạo ra
bởi Taylor Otwell xây dựng bởi một Framework khác là Symfony nên sử dụng rất

nhiều thành phần được xây dựng từ Symfony. Laravel được ra mắt phiên bản beta đầu
tiên vào ngày (9/6/2011) với mục đích ra đời nhằm phát triển ứng dụng từ đơn giản đến
phức tạp theo mô hình Model - View - Controller (MVC). Mã nguồn được đặt
trên Github và cấp phép theo các điều khoản của MIT License.
2.1.2. Các tính năng cơ bản của Laravel
- Bundles: Laravel phiên bản 3.x, cung cấp một hệ thống đóng gói các module,
với nhiều tính năng đi kèm.
- Composer: Laravel phiên bản 4.x, được sử dụng như một công cụ quản lý với
tính năng như thêm các gói cài đặt, các chức năng PHP phụ trợ cho Laravel có trong
kho Packagist.
- Eloquent ORM (object relation mapping): Ánh xạ các đối tượng và quan hệ cơ
sở dữ liệu, cung cấp các phương thức nội bộ để thực thi, đồng thời cũng bổ sung các
tính năng hạn chế về mối quan hệ giữa các đối tượng cơ sở dữ liệu. Eloquent ORM trình
bày các bảng trong cơ sở dữ liệu dưới dạng các lớp, cung cấp thêm lựa chọn truy cập cơ
sở dữ liệu trực tiếp mới mẻ, chuyên nghiệp.
- Application logic: Là một phần của phát triển ứng dụng, được sử dụng bởi bộ
điều khiển controllers.
- Routes: Định nghĩa mối quan hệ giữa các đường dẫn (url), các liên kết (link).
Khi một liên kết được tạo ra bằng cách sử dụng tên của routes thì một định danh liên kết
thống nhất sẽ được tạo ra bởi laravel.
- Restful Controller: Cung cấp các tùy chọn để tách các logic phía sau các request
HTTP POST, GET.
- Class auto loading: Cung cấp việc tải tự động các class trong PHP mà không
cần include các class vào. Tùy thuộc vào yêu cầu các class cần thiết sẽ được nạp vào,
hạn chế các class không cần thiết.
- View: Chứa các mã html, hiển thị dữ liệu được chỉ định bởi controller.
11


- Migrations: Cung cấp một hệ thống kiểm soát các phiên bản lược đồ cơ sở dữ

liệu (database cheme), làm cho web ứng dụng có khả năng tương tác phù hợp những
thay đổi logic, các đoạn mã code của ứng dụng và những thay đổi cần thiết trong việc bố
trí cơ sở dữ liệu, triển khai nới lỏng và cập nhật các ứng dụng.
- Unit Testing: Unit testting chứa rất nhiều các hệ thống unit testing, giúp phát
hiện và ngăn chặn lỗi trong khuôn khổ nhất định. Unit Testing có thể được chạy thông
qua tiện ích command-line.
- Automatic pagination: Tính năng tự động phân trang được tích hợp
vào Laravel giúp đơn giản hóa các nhiệm vụ thực hiện phân trang so với các phương
pháp thông thường.
2.1.3. Lịch sử phát triển của Laravel
- Laravel beta đầu tiên được phát hành vào ngày 9/6/2011, tiếp đó Laravel 1 phát
hành trong cùng tháng. Laravel 1 bao gồm các tính năng như authentication,
localisation, model, view, session, routing and other mechanisms, nhưng vẫn còn thiếu
controller, điều này khiến nó chưa thật sự là một MVC framework đúng nghĩa.
- Laravel 2 được phát hành vào tháng 9 năm 2011, thêm tính năng mới hỗ trợ
controller, điều này biến Laravel 2 thành một MVC framework hoàn chỉnh, hỗ
trợ Inversion of Control (IoC), hệ thống template Blade. Nhược điểm là hỗ trợ cho các
gói của nhà phát triển bên thứ 3 bị gỡ bỏ.
- Laravel 3 được phát hành vào tháng 2 năm 2012 với một loạt các tính năng mới
bao gồm giao diện dòng lệnh (CLI) tên “Artisan”, hỗ trợ nhiều hơn cho hệ thống quản
trị cơ sở dữ liệu, chức năng ánh xạ cơ sở dữ liệu Migration, hỗ trợ “bắt sự kiện” trong
ứng dụng và hệ thống đóng gói gọi là “Bundles”.
- Laravel 4 có tên mã là Illuminate, được phát hành vào tháng 5 năm 2013. Nó
được phân phối thông qua Composer, một chương trình quản lý gói thư viện phụ thuộc
độc lập của PHP. Các tính năng trong Laravel 4 bao gồm tạo và thêm dữ liệu mẫu
(database seeding), hỗ trợ hàng đợi, các kiểu gửi mail và hỗ trợ “xóa mềm” (soft-delete:
record bị lọc khỏi các truy vấn từ Eloquent mà không thực sự xóa hẳn khỏi database).
- Laravel 5 được phát hành trong tháng 2 năm 2015, những tính năng mới của
Laravel 5 bao gồm hỗ trợ lập lịch định kỳ thực hiện nhiệm vụ thông qua một gói tên là
“Scheduler”, một lớp trừu tượng gọi là “Flysystem” cho phép điều khiển việc lưu trữ

12


từ xa đơn giản như lưu trữ trên máy local, cải tiến quản lý assets thông qua “Elixir”,
đơn giản hóa quản lý xác thực với các dịch vụ bên ngoài bằng gói “Socialite”.
- Laravel 5.1 phát hành vào tháng 6 năm 2015, là phiên bản đầu tiên của Laravel
nhận được hỗ trợ dài hạn (LTS), với kế hoạch sửa lỗi trong hai năm và các bản vá bảo
mật trong ba năm.
- Laravel 5.3 được phát hành vào ngày 23 tháng 8 năm 2016. Các tính năng mới
trong bản 5.3 được tập trung vào việc cải thiện tốc độ phát triển bằng cách bổ sung thêm
những cải tiến cho các tác vụ phổ biến.
- Laravel 5.4 được phát hành vào ngày 24 tháng 1 năm 2017. Phiên bản này có
nhiều tính năng mới như Laravel Dusk, Laravel Mix, Blade Components and Slots,
Email Markdown, Automatic Facades, Higher Order Messaging for Collections, và
nhiều thứ khác.
- Laravel 5.5 được phát hành vào ngày 30 tháng 8 năm 2017.
- Laravel 5.6 được phát hành vào ngày 7 tháng 2 năm 2018.
2.2. Mô hình MVC
2.2.1. Giới thiệu về mô hình MVC
Mô hình MVC (Model - View - Controller) là một kiến trúc phần mềm hay mô
hình thiết kế được sử dụng trong kỹ thuật phần mềm. Nó giúp cho các lập trình viên tách
ứng dụng của họ ra 3 thành phần khác nhau Model, View và Controller. Mỗi thành phần
có một nhiệm vụ riêng biệt và độc lập với các thành phần khác.

13


2.2.2. Các thành phần của mô hình MVC

Hình 2.1 Các thành phần của mô hình MVC
- Model: Là nơi chứa những nghiệp vụ tương tác với dữ liệu hoặc hệ quản trị cơ
sở dữ liệu (mysql, mssql…); nó bao gồm các class/function xử lý nhiều nghiệp vụ như
kết nối database, truy vấn dữ liệu, thêm – xóa – sửa dữ liệu…
- View: Là nới chứa những giao diện như một nút bấm, khung nhập, menu, hình
ảnh… Nó đảm nhiệm nhiệm vụ hiển thị dữ liệu và giúp người dùng tương tác với hệ
thống.
- Controller: Là nới tiếp nhận những yêu cầu xử lý được gửi từ người dùng, bao
gồm những class/function xử lý nhiều nghiệp vụ logic giúp lấy đúng dữ liệu thông tin
cần thiết nhờ các nghiệp vụ lớp Model cung cấp và hiển thị dữ liệu đó ra cho người
dùng nhờ lớp View.

14


2.2.3. Quy trình hoạt động mô hình MVC trong website

Hình 2.2 Quy trình hoạt động mô hình MVC trong website
Người dùng sử dụng một trình duyệt web bất kỳ (Firefox, Chrome, IE, …) để có
thể gửi những yêu cầu (HTTP Request) có thể kèm theo những dữ liệu nhập tới những
Controller xử lý tương ứng. Việc xác định Controller xử lý sẽ dựa vào một bộ Routing
điều hướng.
Khi Controller nhận được yêu cầu gửi tới, nó sẽ chịu trách nhiệm kiểm tra yêu
cầu đó có cần dữ liệu từ Model hay không. Nếu có, nó sẽ sử dụng các class/function
cần thiết trong Model và nó sẽ trả ra kết quả (Resulting Arrays), khi đó Controller sẽ
xử lý giá trị đó và trả ra View để hiển thị. Controller sẽ xác định các View tương ứng
để hiển thị đúng với yêu cầu.
Khi nhận được dữ liệu từ Controller, View sẽ chịu trách nhiệm xây dựng các
thành phẩn hiển thị như hình ảnh, thông tin dữ liệu… và trả về GUI Content để
Controller đưa ra kết quả lên màn hình trình duyệt.

Trình duyệt sẽ nhận giá trị trả về (HTTP Response) và sẽ hiển thị với người dùng.
Kết thúc một quy trình hoạt động.

15


2.3. Các thành phần của Laravel (phiên bản 5.4 trở lên)
2.3.1. Router
- Cơ về bản router
Hầu hết các route của laravel cơ bản là nhận một URI và một Closure, nó cung
cấp 1 cách rất đơn giản để định nghĩa một route:
Route::get('foo', function () {
return 'Hello World';
});

Các tệp đường dẫn mặc định
Tất cả các tuyến Laravel được định nghĩa trong các tệp tuyến đường, nằm trong
thư mục router. Các tệp này được tự động nạp bởi khung công tác. Router/web.php
xác định các tuyến đường cho giao diện web. Các tuyến đường này được chỉ định cho
nhóm middleware web, cung cấp các tính năng như trạng thái phiên và bảo vệ CSRF.
Các tuyến đường trong các router/api.php là không xác định và được chỉ định cho
nhóm middleware api.
Route::get('/user', 'UserController@index');

Các tuyến đường được xác định trong tệp router/api.php được lồng nhau trong
một nhóm tuyến đường bởi RouteServiceProvider. Trong nhóm này, tiền tố URI / api
được tự động áp dụng nên không cần phải áp dụng nó cho mọi đường dẫn trong tệp tin.
Có thể sửa đổi tiền tố và các tùy chọn nhóm tuyến đường khác bằng cách sửa đổi lớp
RouteServiceProvider.
- Các phương thức Router có sẵn.

Bộ định tuyến cho phép ta đăng ký các tuyến đường đáp ứng với bất kỳ động từ
nào từ HTTP:
Route::get($uri, $callback);
Route::post($uri, $callback);
Route::put($uri, $callback);
Route::patch($uri, $callback);
Route::delete($uri, $callback);
Route::options($uri, $callback);

Đôi khi cần phải đăng ký một tuyến đường đáp lại nhiều các động từ từ HTTP. Có
thể làm như vậy bằng cách sử dụng phương pháp đối sánh. Hoặc thậm chí đăng ký một
tuyến đường đáp lại tất cả các động từ HTTP sử dụng bất kỳ phương pháp nào:
Route::match(['get', 'post'], '/', function () {

16


//
});
Route::any('foo', function () {
//
});

- Bảo vệ CSRF
Bất kỳ biểu mẫu HTML nào trỏ đến các tuyến POST, PUT, hoặc DELETE được
định nghĩa trong tệp tuyến đường trang web phải bao gồm một trường mã thông báo
CSRF. Nếu không, yêu cầu sẽ bị từ chối.
<form method="POST" action="/profile">
@csrf
...

</form>

2.3.2. Tham số của Router
- Tham số bắt buộc
Khi cần nắm bắt các segments trong URI bên trong route. Ví dụ, cần phải lấy ID
của người dùng từ các URL
Route::get('user/{id}', function ($id) {
return 'User '.$id;
});

Có thể định nghĩa nhiều tham số theo yêu cầu:
Route::get('posts/{post}/comments/{comment}', function ($postId,
$commentId) {
//
});

- Tham số tùy chọn
Khi cần phải định nghĩa một route đặc biệt chứa tham số, nhưng sự hiện diện của
tham số đấy có thể có hoặc không, có thể dùng cách đặt dấu “?” sau tên tham số, và gán
cho nó một giá trị mặc định:
Route::get('user/{name?}', function ($name = null) {
return $name;
});
Route::get('user/{name?}', function ($name = 'John') {
return $name;
});

17