báo cáo bài tập lớn môn thiết kế web 2 thiết kế website giới thiệu khách sạn và đặt phòng trực tuyến

MO DAU Chúng ta đang sống trong một thê giời mà công nghệ chiếm một vị trí thiết yếu trong cuộc sống, từ những thứ nhỏ nhất đến những cỗ máy hiện đại đều có sự xuất hiện của công nghệ..

Trang 1

TRƯỜNG ĐẠI HỌC ĐẠI NAM

KHOA CÔNG NGHỆ THÔNG TIN

ĐẠI NAM

BAO CAO BAI TAP LON

MON THIET KE WEB 2

DE TAI Thiét ké website gidi thiéu khach san va

dat phong truc tuyén

Giảng viên hướng dẫn: ThS Phạm Văn Tiệp

Hà Nội, thủng 6 năm 2021

Trang 2

TRƯỜNG ĐẠI HỌC ĐẠI NAM

KHOA CÔNG NGHỆ THÔNG TIN

ĐẠI NAM

BAO CAO BAI TAP LON

MON THIET KE WEB 2

DE TAI Thiét ké website gidi thiéu khach san va

dat phong truc tuyén

Giảng viên hướng dẫn: ThS Phạm Văn Tiệp

Hà Nội, thủng 6 năm 2021

Trang 3

MO DAU

Chúng ta đang sống trong một thê giời mà công nghệ chiếm một vị trí thiết yếu trong cuộc sống, từ những thứ nhỏ nhất đến những cỗ máy hiện

đại đều có sự xuất hiện của công nghệ Thật thiếu nếu như không nhắc đến

một thứ mà mọi chúng ta đều sử dụng hằng ngày Đó là website

Một trang web là tập tin ITML hoặc XHTML có thê truy nhập dùng

giao thức HTITP Trang mạng có thể được xây dựng từ các tệp tin HTML

(trang mạng tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ (trang

mạng động)

Website có thể được xây dựng bằng nhiều ngôn ngữ lâp trình khác nhau (PHP, ASP.NET, Java, Ruby on Rails, Perl, )

Website được giao tiếp và hiển thị cho người dùng truy cập bằng

các phần mềm được gọi là trình duyệt website Một số trình duyệt website nỗi tiếng có thê kế đến như Internet Explorer được cài đặt mặc định vào mỗi máy

tính cài hệ điều hành windows va duoc thay thé boi Edge trén Windows

10 hay Chrome được phát triển béi Google va Firefox duoc phat triển

boi Mozilla

Trang 4

LOI CAM ON

Loi dau tién, em xin tran trong cam on Thay Ths Pham Văn Tiệp đã tan tinh hướng dẫn tôi trong quá trình học tập cũng em như trong việc hoàn thành BTL Em xin

chân thành cảm ơn các Thay, Cô thuộc khoa CNTTT trường Đại Học Đại Nam đã tận

tình giảng dạy cho em trong thời gian học tập

Xin cảm ơn công cụ tìm kiếm google đã trợ giúp trong suốt quá trình làm BTL

Và cuỗi cùng, xin gửi lời cảm ơn đến gia đình, bạn bè, tập thê lớp CNTT 13-02,

những người luôn sẵn sảng sẻ chia và giúp đỡ trong học tập và cuộc sống Mong rằng, chúng ta sẽ mãi mãi gắn bó với nhau Xin chúc những điều tốt đẹp nhất sẽ luôn đồng hành cùng mọi người.”

Trang 5

NHAN XET (Của giảng viên hướng dẫn)

Trang 6

¡0900 M.U

)7:79 9 1 TT

DANH MỤC CÁC BÁNG, SƠ ĐỎ, HÌNH ST E1 2221 re 8

HINH 1.1 Giao dién trang CHủ c2 2112111121111 112 2255151111115 ke 8 HINH 1.2 Giao dién trang đặt phòng khách san ccc 22 2222 22212212 sec 8

HINH 1.3 Giao diện đăng nhập 5-5 s1 1E 1112112112111 2.2111 treo 9

II Cấu Trúc Mã Nguồn: -.- ST HE HH HH nh ng run gườn 9

KÍ HIỆU CÁC CỤM TỪ VIẾT TẮTT - 5+ S21 E1 EE21121 E221 px tre ll

Chương 1: Cau trite Tramg Chto c.cccccccccccccccscescescssessessescssesecsvssvesesevevssesevecsevevecees 12 Chương 2: Câu trúc trang Đặt Phòng - 5+ T1 E122 11 1E tr Hang nườn 15 Chương 3: Giao diện trang đăng nhập - Q00 0222222112211 1222 122 1E re 19 Chương 4: Nhận xét cá nhân Q0 02011211121 221111 1155118111011 11 8118k kh 21

DANH MỤC TÀI LIEU THAM KHÁO 5 1 SE EEE1EE22111 1x 11x EtEerrr 22

Trang 7

DANH MUC CAC BANG, SO DO, HINH

L Giao Diện Trang Web

HINH 1.1 Giao diện trang chu

Rất nhiều tựa chọn hấp dẫn các can hộ

‘va biet thy tren idulich

Trang 8

HINH 1.3 Giao dién dang nhap

- sig-in.html: Dang ky thanh vién

- intro.html: Trang giới thiệu

- Bietthu.html: Trang dat phong

Trang 9

6 Folder Js:

Chua cac file javascripts dé lam menu slide cho Top 5 sites, cuộn trang, cập nhật lượt visit

10

Trang 10

KI HIEU CAC CUMTU VIET TAT

Ghi chủ:

Cụm từ viết viết tắt là các chữ cái và các ký hiệu thay chữ được viết liền nhau, để

thay cho một cụm từ có nghĩa thường được lặp nhiều lần trong văn bản hoặc được mọi người mặc nhiên châp nhận

lãi

Trang 11

Trình bày mỗi trang của bài tập lớn

- Website logo: Ảnh đại diện của Website

- Nav-item: Dẫn đến các trang người dùng muốn

- Login dropdown: Người dùng đăng nhập để có thể thực hiện những

chức năng cao hơn

Giao diện khi click vào nút login:

2 Carousel slider:

12

Trang 12

Demo:

a A — SS đe + a

Đến sân bay không còn mệt moi -

Biến chuyến đi đến và từ sân bay đi trở nên tiện lợi nhất có thế! Với nhiều lựa chọn phương tiện phù hợp với nhu cầu của bạn, ấy đặt ngay xe đưa đón sân bay hôm nay đế bớt đi

-Carousel- indicator: Cho phép chuyên slider bằng cách nhắn vào từng nút tương ứng

-Carousel inner: Hién thị ảnh và nội dung trên slider Người dùng có thể sử dụng button

trên slider đề thực hiện chức năng mong muốn

-Carousel prev-next: Cho phép chuyên qua chuyên lại giữa cac slider

3 Main I:

Demo:

G6m 2 phan chinh: Menu chon (#cssmenu) va Search-button (#search-button)

- Menu: Người dùng có thể chọn điểm xuất phát, điểm đến là những thành phố có sẵn trong menu, ngoài ra người dùng còn có thé chọn loại phương tiện mà mình mong muốn

- Search-button: Tìm Kiếm dựa trên thành phố và phương tiện khách hàng đã chọn

13

Trang 13

4, Main 2:

Demo:

Thêm không gian cho gia

đình và bạn bè

Rất nhiều lựa chọn hấp dẫn các căn hộ

và biệt thự trên Idutich

Trang 14

G6m 2 phan chinh: Menu Thanh Phé (#city-menu) va Buynow-button (#buynow-button) -Menu Thành Phố: Người dùng có thê chọn thành phố mà mình muốn đến

-Buynow-button: Khi đã chọn được thành phố ưng i, người dùng có thể nhân đặt ngay đề

tiếp tục

6 Footer:

Demo:

15

Trang 15

G6m 2 phan co ban:

-Khung két néi mạng xã hội (#social media) — Hiền thị biểu tượng kết nối với những nền

tảng mạng xã hội

-Chứa những liên kết và liên hệ của trang web (#link) — List những liên kết và liên hệ của

trang web như ảnh

Chương 2: Cấu trúc trang Đặt Phòng

‡®*$ Tài Khoản Y “ Hà Nội „#1900 2045

Trang 16

2 Carousel slider:

Demo:

LẠ aA = —— =— Ss = +

Đến sân bay không còn mệt moi

Biến chuyến đi đến và từ sân bay đi trớ nên tiện lợi nhất có thế! Với nhiều lựa chọn phương tiện phù hợp với nhu cầu của bạn, ấy đặt ngay xe đưa đón sân bay hôm nay để bớt đi

-Carousel- indicator: Cho phép chuyên slider bằng cách nhắn vào từng nút tương ứng

-Carousel inner: Hién thị ảnh và nội dung trên slider Người dùng có thể sử dụng button

trên slider đề thực hiện chức năng mong muôn

-Carousel prev-next: Cho phép chuyên qua chuyên lại giữa cac slider

3 Main:

Demo:

17

Trang 17

G6m 2 phan chinh: Menu Thanh Phé (#city-menu) va Buynow-button (#buynow-button) -Menu Thành Phố: Người dùng có thê chọn thành phố mà mình muốn đến

-Buynow-button: Khi đã chọn được thành phố ưng i, người dùng có thể nhân đặt ngay đề

tiếp tục

4, Footer:

Demo:

18

Trang 18

G6m 2 phan co ban:

-Khung két néi mạng xã hội (#social media) — Hiền thị biểu tượng kết nối với những nền

tảng mạng xã hội

19

Trang 19

Chương 3: Cấu trúc trang đăng nhập

2® Tài Khoản Y “ Hà Nội „#1900 2045

2 Login site:

Demo:

20

Trang 20

IDDLICH

Vui lòng đảng nhập tài khoản

ài Khoản Tài Khoản hoặc SDT hoặc email

Mật Khẩu Tạo Tài Khoản Miễn Phí

à sẽ luôn như vậy

Đăng Nhập Quên Mật Khấu:

Gồm 2 phần chính:

Phan đăng nhập: bao gồm logo (#logo) và Phần Đăng Nhập Đăng Ký: Người dùng có thể

sử dụng để đăng nhập hoặc đăng ký tài khoản Nút đăng nhập và phần quên mật khẩu đề người dùng dễ thao tác Nút Đăng Ký Ngay, Người dùng có thê sử dung dé dang ky tai khoản

Phần text: Chứa khẩu hiệu của trang web

Trang 21

Chương 4: Nhận xét cá nhân

1 Ưu điểm:

- Lập được một website directories với các chức năng cơ bản

- Website chạy ôn định, giao diện khá thân thiện

2 Nhược điểm:

- Chưa có một số chức năng quan trọng như chỉnh sửa thông tin cá nhân, đối password

- Chưa tránh được các lỗi bảo mật căn bản

3 Khó khăn:

- Các kiến thức mới học nên chưa sử dụng thành thạo

DANH MUC TAI LIEU THAM KHAO

Trang 22

Danh mục tải liệu tham khảo xếp cuối cùng, sau các trang phụ lục

23

Tiêu đề	Thiết kế website giới thiệu khách sạn và đặt phòng trực tuyến
Tác giả	Bach Dang Bao
Người hướng dẫn	ThS. Phạm Văn Tiệp
Trường học	Trường Đại Học Đại Nam
Chuyên ngành	Thiết Kế Web 2
Thể loại	Bài tập lớn
Năm xuất bản	2021
Thành phố	Hà Nội

Định dạng
Số trang	22
Dung lượng	4,38 MB