39
ĐỒ ÁN CƠ SỞ 2 ĐỀ TÀI : WEBSITE VỀ DU LỊCH, ẨM THỰC VÀ VĂN HÓA TÂY BẮC Sinh viên thực hiện : VÕ ĐỨC HIẾU NGUYỄN HOÀNG TUẤN LONG Giảng viên hướng dẫn : TS. HOÀNG HỮU ĐỨC Lớp : 19IT1 ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT - HÀN KHOA KHOA HỌC MÁY TÍNH

daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

ĐỒ ÁN CƠ SỞ 2 ĐỀ TÀI : WEBSITE VỀ DU LỊCH, ẨM THỰC

VÀ VĂN HÓA TÂY BẮC

Sinh viên thực hiện : VÕ ĐỨC HIẾU NGUYỄN HOÀNG TUẤN LONG Giảng viên hướng dẫn : TS. HOÀNG HỮU ĐỨC Lớp : 19IT1

Đà Nẵng, tháng … năm …

ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT - HÀN

KHOA KHOA HỌC MÁY TÍNH

Page 2: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT - HÀN KHOA KHOA HỌC MÁY TÍNH

ĐỒ ÁN CƠ SỞ 2

ĐỀ TÀI : WEBSITE VỀ DU LỊCH, ẨM THỰC VÀ VĂN HÓA TÂY BẮC

Đà Nẵng, tháng ….. năm ..…

Page 3: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

MỞ ĐẦUHiện nay, với thời đại công nghệ 4.0 và sự phát triển mạnh mẽ của ngành du lịch, để

thúc đẩy du khách tới tham quan, nghỉ ngơi,… nhiều khách sạn, địa điểm đã đưa ra rất

nhiều chiến lược marketing để thu hút khách, một trong những chiến lược đó không thể

thiếu website.

Tây Bắc là một trong những địa điểm nổi tiếng ở Việt Nam, với rừng núi hùng vĩ,

khung cảnh đơn sơ mộc mạc đậm chất vùng quê, cùng với đó là văn hóa ẩm thực độc đáo

đã thu hút rất nhiều du khách tới đây. Nhận thấy đây là địa điểm giàu tiềm năng du lịch, ý

tưởng về một website du lịch giúp du khách có thể tra cứu thông tin, book chỗ nghỉ, tra

cứu cẩm nang du lịch… đã được ra đời để khai thác địa điểm nổi tiếng này!

“TinhhoaTayBac.com” không đơn thuần chỉ là kinh doanh các sản vật Tây Bắc, mà

còn mong muốn gắn kết, giới thiệu văn hóa, ẩm thực và cuộc sống đơn giản của bà con

đồng bào Tây Bắc, cuộc sống đơn giản, nhưng thật, thật giàu tình cảm từ các bản làng xa

tới tất cả anh chị em cô chú ở mọi miền Tổ Quốc dành mến thương cho Tây Bắc xa xôi

Tây Bắc!

Page 4: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

LỜI CẢM ƠN Lời đầu tiên, chúng em xin gửi lời cảm ơn chân thành đến các thầy cô Khoa

Khoa học máy tính – Trường Đại học Công nghệ thông tin và Truyền thông Việt - Hàn

đã dạy chúng em những kiến thức hay, và các thầy cô trong bộ môn Công nghệ Web đã

truyền đạt những kiến thức chuyên ngành bổ ích cũng như các kỹ năng trong cuộc sống.

Đặc biệt, chúng em xin cảm ơn sâu sắc tới giáo viên hướng dẫn TS. Hoàng Hữu

Đức – Giảng viên Khoa Khoa Khoa học máy tính – Trường Đại học Công nghệ thông tin

và Truyền thông Việt – Hàn đã tận tình hướng dẫn, góp ý theo sát giúp em có thể hoàn

thành đồ án tốt nhất.

Chúng em xin cảm ơn tới gia đình đã luôn động viên tinh thần, tạo động lực cho

em trong quá trình thực hiện đồ án. Cảm ơn tất cả bạn bè, tập thể lớp 19IT1 đã cùng chia

sẻ, góp ý trong quá trình thực hiện.

Xin chân thành cảm ơn!

Page 5: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

NHẬN XÉT (Của giảng viên hướng dẫn)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Chữ ký GVHD

Page 6: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

MỤC LỤCCHƯƠNG 1 - GIỚI THIỆU...................................................................1 1.1. Lý do chọn đề tài :....................................................................................................1 1.2 Mục tiêu của đề tài:..................................................................................................1 1.3 Nội dung chính:.........................................................................................................2 1.4 Kết quả:....................................................................................................................2CHƯƠNG 2 - NGHIÊN CỨU TỔNG QUAN......................................3 2.1. Tìm hiểu về ngôn ngữ lập trình..............................................................................3 2.1.1. Ngôn ngữ HTML................................................................................................3 2.1.2. Ngôn ngữ CSS.....................................................................................................4 2.1.3. Ngôn ngữ lập trình PHP....................................................................................4 2.2. Một số thư viện hỗ trợ.............................................................................................5 2.2.1. Thư viện Javascript...........................................................................................5 2.2.2. Thư viện BOOSTRAP.......................................................................................6 2.2.3. Thư viện JQUERY.............................................................................................6 2.3. Google Map API.......................................................................................................7 2.4. Cơ sở dữ liệu My SQL.............................................................................................8 2.5. Mô hình MVC..........................................................................................................8CHƯƠNG 3 - PHÂN TÍCH THIẾT KẾ HỆ THỐNG......................10 3.1 .Giới thiệu và các yêu cầu hệ thống quản lý:.......................................................10 3.1.1. Giới thiệu hệ thống:.........................................................................................10 3.1.2. Các yêu cầu của Website và hệ thống quản lí...............................................10 3.2. Phân tích thiết kế hệ thống:..................................................................................10 3.2.1. Các chức năng:.................................................................................................10 3.2.1.1. Khách hàng.................................................................................................10 3.2.1.2. Người quản lý.............................................................................................11 3.2.1.3. Người đóng góp bài viết (Blogger)............................................................11 3.2.1.4. Đối tác.........................................................................................................11 3.2.1.5. Khách vãng lai (Guest)..............................................................................12 3.2.2 Mô hình hóa yêu cầu:.......................................................................................12 3.2.2.1 Xác định các tác nhân(Actors):.................................................................12 3.2.2.2 Xác định các ca sử dụng (Usecase):...........................................................12 3.2.2.3 Biểu đồ ca sử dụng......................................................................................13CHƯƠNG 4 - TRIỂN KHAI XÂY DỰNG.........................................15 4.1 Trang chủ.................................................................................................................15 4.2 Trang đăng nhập.....................................................................................................15 4.3 Trang đăng ký.........................................................................................................16 4.4 Trang về chúng tôi..................................................................................................16 4.5 Trang địa điểm........................................................................................................17 4.6 Trang Blog...............................................................................................................17

Page 7: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

4.7. Trang liên hệ..........................................................................................................18 4.8. Trang Admin..........................................................................................................18KẾT LUẬN............................................................................................19TÀI LIỆU THAM KHẢO....................................................................20

Page 8: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

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

STT Cụm từ Viết tắt

1 Cơ sở dữ liệu CSDL

2 Hypertext Markup Language HTML

3 Cascading Style Sheets CSS

4 Hypertext Preprocessor PHP

5 Model - View - Controller MVC

6 Structured Query Language SQL

7 Base Transceiver Station BTS

8 User Experience UX

9 Document Object Model DOM

10 Application Programming Interface API

Page 9: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

DANH MỤC HÌNH

Hình 4.1 Trang chủ...........................................................................................................15

Hình 4.2 Trang đăng nhập.................................................................................................15

Hình 4.3 Trang đăng ký....................................................................................................16

Hình 4.4 Về chúng tôi.......................................................................................................16

Hình 4.5 Địa điểm.............................................................................................................17

Hình 4.6 Blog....................................................................................................................17

Hình 4.7 Liên Hệ...............................................................................................................18

Hình 4.8 Admin.................................................................................................................18

Page 10: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

CHƯƠNG 1 - GIỚI THIỆU1.1. Lý do chọn đề tài :

Tây Bắc là một trong những địa điểm nổi tiếng nhất ở Việt Nam, với cảnh quan

thiên nhiên kỳ vĩ, được tạo nên bởi những dãy núi hào hùng với lịch sử hình thành lâu

đời. Nơi đây được cho là cái nôi của nhà nước đầu tiên tại Việt Nam – Văn Lang, bởi vậy

nền văn hóa nơi đây cũng vô cùng đặc sắc và thú vị. Trải qua hàng nghìn năm lịch sử,

cùng truyền thống dựng nước và giữ nước, Tây Bắc luôn là điểm tựa cho quân và dân ta

trước mỗi trận đánh lớn, là mái nhà che chở cho những năm tháng hoạt động cách mạng

gian khổ,…Khí hậu Tây Bắc quanh năm ôn hòa, mát mẻ, những cảnh quan du lịch ngoạn

mục, hấp dẫn. Nền ẩm thực Tây Bắc phong phú, đa dạng với những món ăn dân dã, “độc

nhất vô nhị” sẽ khiến cho mọi con tim yêu ẩm thực phải xiêu lòng… Với những yếu tố

trên, Tây Bắc đã và đang đã thu hút rất nhiều du khách tới đây tham quan, nghỉ dưỡng.

Nhận thấy đây là địa điểm giàu tiềm năng du lịch, ý tưởng về một website du lịch

giúp du khách có thể tra cứu thông tin, tìm chỗ nghỉ, tra cứu cẩm nang du lịch… đã được

ra đời để khai thác địa điểm nổi tiếng này.

Website “Tinhhoataybac.com” giúp những du khách hoặc người muốn tìm hiểu về

văn hóa, ẩm thực và phong cảnh Tây Bắc dễ dàng hơn, cũng vừa là trang đặt khách sạn,

nhà nghỉ… giúp quảng bá những cơ sở này.

1.2 Mục tiêu của đề tài: - Quảng bá Tây Bắc tới mọi người trong nước và bạn bè quốc tế, thúc đẩy du lịch

và tìm hiểu văn hóa, cải thiện và nâng cao cuộc sống cho đồng bào nơi đây.

- Giúp người dùng có những cái nhìn tổng quan chính xác về Tây Bắc.

- Giúp cho những doanh nghiệp dịch vụ du lịch Tây Bắc tiếp cận thêm với nhiều

khách hàng.

- Là trang booking uy tín, tiết kiệm và thân thiện với người sử dụng.

- Đảm bảo quyền lợi cho người sử dụng, an toàn thông tin tuyệt đối.

9

Page 11: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

1.3 Nội dung chính:

- Tìm hiểu, ứng dụng các ngôn ngữ lập trình vào thiết kế website (PHP, MYSQL).

- Thiết kế đặc tả hệ thống.

- Xây dựng cơ sở dữ liệu trên MySQL.

- Xây dựng các module quản lý.

- Tìm hiểu về PHP, MySQL, Laravel, phục vụ trong quá trình xây dựng trang web.

- Website nhanh và hiệu quả hơn trong việc tìm kiếm và trải nghiệm dịch vụ du

lịch.

1.4 Kết quả:

- Xây dựng thành công website du lịch và khám phá Tây Bắc.

- Tìm hiểu nắm bắt được các kiến thức về HTML, CSS, JQUERY, PHP.

- Ứng dụng, phát triển được công nghệ thiết kế web bằng Laravel.

- Với quy mô trang web vừa và nhỏ, cộng thêm thời gian không cho phép nên đề

tài “Xây dựng website TinhhoaTayBac - Website về du lịch, ẩm thực và văn hóa

Tây Bắc” có thể chưa có đầy đủ các chức năng hoàn thiện của một trang web du

lịch. Trong quá trình làm còn nhều sai sót, do kiến thức có hạn lên website còn ít

nhiều thiếu sót về việc hiển thị cũng như tối ưu thuật toán, thời gian thực hiện.

Nhóm chúng em sẽ cố gắng khắc phục những sai sót này.

10

Page 12: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

CHƯƠNG 2 - NGHIÊN CỨU TỔNG QUAN2.1. Tìm hiểu về ngôn ngữ lập trình

2.1.1. Ngôn ngữ HTML

HTML (HyperText Markup Language) – Ngôn ngữ đánh dấu siêu văn bản

được sử dụng để tạo các tài liệu có thể truy cập trên mạng. Tài liệu HTML được tạo nhờ

dùng các thẻ và các phần tử của HTML. File được lưu trên máy chủ dịch vụ web với

phần mở rộng “.htm” hoặc “.html”. Các trình duyệt sẽ đọc tập tin HTML và hiển thị

chúng dưới dạng trang web. Các thẻ HTML sẽ được ẩn đi, chỉ hiển thị nội dung văn bản

và các đối tượng khác: hình ảnh, media. Với các trình duyệt khác nhau đều hiển thị một

tập HTML với một kết quả nhất định. Các trang HTML được gửi đi qua mạng internet

theo giao thức HTTP. HTML không những cho phép nhúng thêm các đối tượng hình ảnh,

âm thanh mà còn cho phép nhúng các kịch bản vào trong đó như các ngôn ngữ kịch bản

như Javascript để tạo hiệu ứng động cho trang web. Để trình bày trang web hiệu quả hơn

thì HTML cho phép sử dụng kết hợp với CSS. HTML không những cho phép nhúng

thêm các đối tượng hình ảnh, âm thanh mà còn cho phép nhúng các kịch bản vào trong đó

như các ngôn ngữ kịch bản như Javascript để tạo hiệu ứng động cho trang web.

HTML là một chuẩn ngôn ngữ internet được tạo ra và phát triển bởi tổ chức   World

Wide Web Consortium còn được viết tắc là W3C. Trước đó thì HTML xuất bản theo

chuẩn của RFC. HTML được tương thích với mọi hệ điều hành cùng các trình duyệt của

nó. Khả năng dễ học, dễ viết là một ưu điểm của HTML không những vậy việc soạn thảo

đòi hỏi hết sức đơn giản, chúng ta có thể dùng word, notepad hay bất cứ một trình soạn

thảo văn bản nào để viết và chỉ cần lưu với định dạng “.html “ hoặc “.htm” là đã có thể

tạo ra một file chứa HTML. Hiện nay, phiên bản mới nhất của HTML là HTML5 với

nhiều tính năng ưu việt so với các phiên bản cũ HTML cải tiến khá nhiều đặc biệt hỗ trợ

mạnh mẽ các phần tử multimedia mà không cần các plugin. Một tập tin HTML bao gồm

trong đó là các đoạn văn bản HTML, được tạo lên bởi các thẻ HTML. HTML5 nói chung

mạnh mẽ hơn nhiều không chỉ về tốc độ và độ thích ứng cao mà chính là khả năng hỗ trợ

11

Page 13: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

API (Application Programming Interface - giao diện lập trình ứng dụng) và DOM

(Document Object Model – các đối tượng thao tác văn bản).

2.1.2. Ngôn ngữ CSS

CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày

cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…CSS quy định cách

hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của các thẻ đó (font chữ,

kích thước, màu sắc...).

CSS có cấu trúc đơn giản và sử dụng các từ tiếng anh để đặt tên cho các thuộc tính.

CSS khi sử dụng có thể viết trực tiếp xen lẫn vào mã HTML hoặc tham chiếu từ một file

css riêng biệt. Hiện nay CSS thường được viết riêng thành một tập tin với mở rộng là

“.css”. Chính vì vậy mà các trang web có sử dụng CSS thì mã HTML sẽ trở nên ngắn gọn

hơn. Ngoài ra có thể sử dụng một tập tin CSS đó cho nhiều website tiết kiệm rất nhiều

thời gian và công sức. Một đặc điểm quan trọng đó là tính kế thừa của CSS do đó sẽ giảm

được số lượng dòng code mà vẫn đạt được yêu cầu.

Tuy nhiên, đối với CSS thì các trình duyệt hiểu theo kiểu riêng của nó. Do vậy,

việc trình bày một nội dung trên các trình duyệt khác nhau là không thống nhất. CSS

cung cấp hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong

kết hợp các thuộc tính giúp mang lại hiệu quả.

2.1.3. Ngôn ngữ lập trình PHP

PHP (Hypertext Preprocessor) là một ngôn ngữ lập trình kịch bản hay một loại mã

lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn mở,

dùng cho mục đích tổng quát. Nó rất thích hợp với web và có thể dễ dàng nhúng vào

trang HTML. Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp

giống ngôn ngữ lập trình C và ngôn ngữ lập trình Java, dễ học và thời gian xây dựng sản

phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã nhanh chóng trở thành

một ngôn ngữ lập trình web phổ biến nhất thế giới. Một tập tin PHP có phần mở rộng

*.php, nó có thể chứa các văn bản, mã nguồn HTML, CSS, Javascript, Jquery... và đương

nhiên có thể chứa mã nguồn PHP.12

Page 14: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

Đối với các trang PHP khi có yêu cầu xem trang web thì Server sẽ tiến hành phát

sinh trang web đó từ mã nguồn PHP sang mã nguồn HTML, sau đó mới chuyển mã

nguồn đó về trình duyệt web để người dùng xem. Vì các trình duyệt web không thể đọc

được các mã nguồn PHP mà chỉ đọc được các mã nguồn HTML.

Laravel là một PHP framework  mã nguồn mở và miễn phí, được phát triển bởi

Taylor Otwell và nhắm vào mục tiêu hỗ trợ phát triển các ứng dụng web theo kiếm trúc

model-view-controller (MVC). Những tính năng nổi bật của Laravel bao gồm cú pháp dễ

hiểu – rõ ràng , một hệ thống đóng gói modular và quản lý gói phụ thuộc, nhiều cách

khác nhau để truy cập vào các cơ sở dữ liệu quan hệ, nhiều tiện ích khác nhau hỗ trợ việc

triển khai vào bảo trì ứng dụng.

Dưới đây là một số tính năng nổi bật của Laravel:

- Viết trên mô hình MVC PHP.

- Đầy đủ các lớp Database giúp hỗ trợ tốt cho các nền tảng khác nhau.

- Dễ dàng đọc hiểu, sử dụng: Các tính năng dựng sẵn: Cung cấp cho người dùng rất

nhiều các nhóm tính năng giúp quá trình phát triển trở nên nhanh chóng hơn rất

nhiều.

- Các tính năng bảo mật.

- Cung cấp Blade Templade.

- Thư viện hỗ trợ lớn.

- Cộng đồng mạnh mẽ

Trong dự án này, chúng em sử dụng phiên bản Laravel 7 được ra mắt tháng 3/2020.

2.2. Một số thư viện hỗ trợ

2.2.1. Thư viện Javascript

JavaScript là một ngôn ngữ dạng script thường được sử dụng cho việc lập trình

web ở phía client, nó tuân theo chuẩn ECMAScript. Là một ngôn ngữ linh động, cú pháp

dễ sử dụng như các ngôn ngữ khác và dễ dàng lập trình. JavaScript không hề liên quan

tới ngôn ngữ lập trình java, được hầu hết các trình duyệt ngày nay hỗ trợ. Với javascript, 13

Page 15: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

ứng dụng web của bạn sẽ trở nên vô cùng sinh động, mang tính trực quan và tương tác

cao. JavaScript theo phiên bản hiện hành là một ngôn ngữ lập trình kịch bản dựa trên đối

tượng được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho

các trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng

nằm sẵn trong các ứng dụng. Giống Java, JavaScript có cú pháp tương tự ngôn ngữ lập

trình C. “.js” là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript.

2.2.2. Thư viện BOOSTRAP

Bootstrap là một Framework có chứa HTML, CSS, JAVASCRIPT, Framework

trong tiếng việt có nghĩa là “khuôn khổ” giúp tiết kiệm được thời gian, công sức hơn nữa

việc xây dựng hai teamplate cho giao diện Desktop và Mobile đã lỗi thời thay vào đó là

Responsive. Responsive sẽ giúp website của bạn hiển thị tương thích với mọi kích thước

màn hình nhờ đó bạn sẽ tùy chỉnh hiện thị được nhiều hơn trên các màn hình khác nhau.

Ưu điểm của Bootstrap:

- Tiết kiệm thời gian: Boostrap giúp người thiết kế giao diện website tiết kiệm

rất nhiều thời gian. Các thư viện Bootstrap có những đoạn mã sẵn sàng cho bạn áp dùng

vào website của mình. Bạn không phải tốn quá nhiều thời gian để tự viết code cho giao

diện của mình.

- Tùy biến cao: Bạn hoàn toàn có thể dựa vào Bootstrap và phát triển nền tảng

giao diện của chính mình. Bootstrap cung cấp cho bạn hệ thống Grid System mặc định

bao gồm 12 bột và độ rộng 940px. Bạn có thể thay đổi, nâng cấp và phát triển dựa trên

nền tảng này.

- Responsive Web Design: Với Bootstrap, việc phát triển giao diện website để

phù hợp với đa thiết bị trở nên dễ dàng hơn bao giờ hết. Đây là xu hướng phát triển giao

diện website đang rất được ưu chuộng trên thế giới. 

2.2.3. Thư viện JQUERY

JQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm

2006 với một phương châm tuyệt vời: Write less, do more - Viết ít hơn, làm nhiều hơn.

14

Page 16: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

JQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứng động

và tương tác Ajax. Với jQuery, khái niệm Rapid Web Development đã không còn quá xa

lạ.

JQuery là một bộ công cụ tiện ích JavaScript làm đơn giản hóa các tác vụ đa dạng

với việc viết ít code hơn. Dưới đây liệt kê một số tính năng tối quan trọng được hỗ trợ bởi

jQuery:

- Thao tác DOM − jQuery giúp dễ dàng lựa chọn các phần tử DOM để traverse

(duyệt) một cách dễ dàng như sử dụng CSS, và chỉnh sửa nội dung của chúng bởi sử

dụng phương tiện Selector mã nguồn mở, mà được gọi là Sizzle.

- Xử lý sự kiện − jQuery giúp tương tác với người dùng tốt hơn bằng việc xử lý

các sự kiện đa dạng mà không làm cho HTML code rối tung lên với các Event Handler.

- Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một site giàu tính năng

và phản hồi tốt bởi sử dụng công nghệ AJAX.

- Hiệu ứng − jQuery đi kèm với rất nhiều các hiệu ứng đa dạng và đẹp mắt mà bạn

có thể sử dụng trong các Website của mình.

- Gọn nhẹ − jQuery là thư viện gọn nhẹ - nó chỉ có kích cỡ khoảng 19KB

(gzipped).

- Cập nhật và hỗ trợ các công nghệ mới nhất − jQuery hỗ trợ CSS3 Selector và cú

pháp XPath cơ bản.

2.3. Google Map API

Google Map API là dịch vụ ứng dụng và công nghệ bản đồ trực tuyến trên web

miễn phí được cung cấp bởi Google và hỗ trợ nhiều dịch vụ dựa vào bản đồ như Google

Ride Finder và một số có thể dùng để nhúng vào các trang web của bên thứ ba thông qua

Google Map API. Nó cho phép thấy bản đồ đường xá khắp nơi trên thế giới.

Google Map cung cấp một dịch vụ xác định vị trí giống như GPS nhưng nó vẫn

hoạt động nếu như thành phần GPS trong phần cứng không hoạt động. Chỉ bắt được vị trí

hiện tại nếu thành phần GPS hoạt động. Tính năng định vụ không cần thành phần GPS

dựa vào phần mềm xác định trạm phát sóng không dây và Trạm thu phát sóng di động

15

Page 17: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

(BTS) gần nhất. Sau đó phần mềm sẽ tìm trong cơ sở dữ liệu của nó vị trí các điểm phát

sóng Wifi và các trạm BTS mà nó biết được. Bằng các xác định cường độ tín hiệu từ

nhiều trạm phát sóng wifi và BTS đã biết vị trí, phần mềm sẽ tính toán được vị trí hiện tại

của người dùng.

Việc sử dụng Google Map API được áp dụng vào đồ án để xác định vị trí người

dùng và hiển thị bản đồ địa điểm.

2.4. Cơ sở dữ liệu My SQL

MySQL là hệ quản trị dữ liệu miễn phí, được tích hợp sử dụng chung với Apache,

PHP. Chính yếu tố phát triển trong cộng đồng mã nguồn mở nên MySQL đã qua rất

nhiều sự hỗ trợ của những lập trình viên yêu thích mã nguồn mở. MySQL cũng có

cùng một cách truy xuất và mã lệnh tương tự với ngôn ngữ SQL. Nhưng MySQL

không bao quát toàn bộ những câu truy vấn cao cấp như SQL

MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, hoạt động trên nhiều hệ

điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh. MySQL là một trong

những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan hệ sử dụng ngôn ngữ truy

vấn có cấu trúc (SQL). MySQL đang được sử dụng cho nhiều công việc kinh doanh

từ nhỏ tới lớn.

- MySQL hỗ trợ các cơ sở dữ liệu lớn, lên tới 50 triệu hàng hoặc nhiều hơn nữa

trong một bảng. Kích cỡ file mặc định được giới hạn cho một bảng là 4 GB, nhưng

bạn có thể tăng kích cỡ này để đạt tới giới hạn lý thuyết là 8 TB ( Terabyte ).

- MySQL là có thể điều chỉnh. Giấy phép GPL mã nguồn mở cho phép lập trình

viên sửa đổi phần mềm MySQL để phù hợp với môi trường cụ thể của họ.

2.5. Mô hình MVC

 MVC là từ viết tắt bởi 3 từ Model – View – Controller. Đây là mô hình thiết kế sử

dụng trong kỹ thuật phần mềm. Mô hình source code thành 3 phần, tương ứng mỗi từ.

Mỗi từ tương ứng với một hoạt động tách biệt trong một mô hình.

16

Page 18: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

Để hiểu rõ hơn, sau đây chúng ta sẽ cùng đi phân tích từng thành phần:

Model (M): Là bộ phận có chức năng lưu trữ toàn bộ dữ liệu của ứng dụng. Bộ

phận này là một cầu nối giữa 2 thành phần bên dưới là View và Controller. Model thể

hiện dưới hình thức là một cơ sở dữ liệu hoặc có khi chỉ đơn giản là một file XML bình

thường. Model thể hiện rõ các thao tác với cơ sở dữ liệu như cho phép xem, truy xuất, xử

lý dữ liệu,…

View (V): Đây là phần giao diện (theme) dành cho người sử dụng. Nơi mà người

dùng có thể lấy được thông tin dữ liệu của MVC thông qua các thao tác truy vấn như tìm

kiếm hoặc sử dụng thông qua các website.

Thông thường, các ứng dụng web sử dụng MVC View như một phần của  hệ thống, nơi

các thành phần HTML được tạo ra. Bên cạnh đó, View cũng có chức năng ghi nhận hoạt

động của  người dùng để tương tác với Controller. Tuy nhiên, View không có mối quan

hệ trực tiếp với Controller, cũng không được lấy dữ liệu từ Controller mà chỉ hiển thị yêu

cầu chuyển cho Controller mà thôi.

Ví dụ: Nút “delete” được tạo bởi View khi người dùng nhấn vào nút đó sẽ có một hành

động trong Controller.

Controller (C): Bộ phận có nhiệm vụ xử lý các yêu cầu người dùng đưa đến

thông qua view. Từ đó, C đưa ra dữ liệu phù hợp với người dùng. Bên cạnh đó,

Controller còn có chức năng kết nối với model.

17

Page 19: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

CHƯƠNG 3 - PHÂN TÍCH THIẾT KẾ HỆ THỐNG3.1 .Giới thiệu và các yêu cầu hệ thống quản lý:

3.1.1. Giới thiệu hệ thống:

Website bao gồm:

- Khách hàng: là người truy cập Website để khám phá, tìm hiểu thông tin về Tây

Bắc. Ngoài ra còn có thể đăng ký để đặt phòng khách sạn, nhà hàng và các dịch

vụ khác trên Website

- Người quản lý Website: Admin được quyền thêm, sửa xóa, các địa điểm du

lịch, quản lý các tài khoản đối tác quảng cáo trên Website.

- Đối tác: Là các doanh nghiệp, cửa hàng, nhà hàng, khách sạn hợp tác với

Website để mang dịch vụ đến với khách hàng.

- Người đóng góp bài viết (Blogger): là người truy cập Website để đóng góp các

cảm nghĩ, cẩm nang, kinh nghiệm cá nhân khi du lịch Tây Bắc.

3.1.2. Các yêu cầu của Website và hệ thống quản lí

- Giao diện website đơn giản, không cầu kỳ.

- Tối ưu website để có thể tải nhanh hơn.

- Có thông tin liên hệ quảng cáo.

- Thiết kế website gọn gàng nhưng có điểm nhấn, thu hút người xem.

- Làm nổi bật được các địa điểm, khách sạn nhà hàng.

- Đảm bảo cho khách hàng và đối tác có những trải nghiệm phù hợp và tốt nhất.

3.2. Phân tích thiết kế hệ thống:

3.2.1. Các chức năng:

3.2.1.1. Khách hàng

- Đăng nhập (bằng Facebook hoặc Gmail.).

- Đăng xuất.

- Đọc blog, địa điểm, khách sạn, nhà hàng.

- Bình luận bài viết.

18

Page 20: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

- Đánh giá nhà hàng, khách sạn.

- Tìm kiếm.

- Đặt khách sạn, nhà hàng.

- Xem chi tiết đơn.

- Xóa đơn đã đặt.

- Thanh toán

3.2.1.2. Người quản lý

- Đăng nhập

- Đăng xuất.

- Xem blog, địa điểm, khách sạn, nhà hàng.

- Thêm, sửa, xóa blog, địa điểm, khách sạn, nhà hàng.

- Bình luận bài viết.

- Đánh giá nhà hàng, khách sạn.

- Theo dõi, phân quyền người dùng.

- Theo dõi phản hồi của khách hàng.

- Theo dõi, kích hoạt đơn hàng, blog.

3.2.1.3. Người đóng góp bài viết (Blogger)

- Đăng nhập (bằng Facebook hoặc Gmail.).

- Đăng xuất.

- Bình luận bài viết

- Đánh giá nhà hàng, khách sạn.

- Thêm bài viết.

- Chỉnh sửa bài viết

- Xóa bài viết của mình.

3.2.1.4. Đối tác

- Đăng nhập (bằng Facebook hoặc Gmail.).

- Đăng xuất.

- Bình luận bài viết.

19

Page 21: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

- Đánh giá nhà hàng, khách sạn.

- Thêm, sửa, xóa dịch vụ đặt phòng, đặt bàn.

- Theo dõi dịch vụ đặt phòng, đặt bàn.

3.2.1.5. Khách vãng lai (Guest)

- Đăng ký (trở thành khách hàng, đối tác, blogger).

- Xem blog.

- Xem địa điểm, khách sạn, nhà hàng.

- Xem bình luận, đánh giá của người dùng.

- Tìm kiếm.

3.2.2 Mô hình hóa yêu cầu:

3.2.2.1 Xác định các tác nhân(Actors):

- Khách hàng.

- Blogger

- Đối tác.

- Người quản lý.

- Khách vãng lai (Guest).

3.2.2.2 Xác định các ca sử dụng (Usecase):

- Đăng ký tài khoản.

- Đăng nhập.

- Đăng xuất.

- Tìm kiếm.

- Bình luận bài viết.

- Đánh giá nhà hàng, khách sạn.

- Xem blog, địa điểm, khách sạn, nhà hàng.

- Đặt khách sạn, nhà hàng.

- Hủy đơn đặt khách sạn, nhà hàng.

- Thanh toán.

- Thêm dịch vụ đặt phòng, đặt bàn.

20

Page 22: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

- Thêm blog.

- Theo dõi dịch vụ đặt phòng, đặt bàn.

- Theo dõi blog.

- Chỉnh sửa dịch vụ đặt phòng, đặt bàn.

- Chinh sửa blog.

- Xóa dịch vụ đặt phòng, đặt bàn.

- Xóa bài viết blog.

3.2.2.3 Biểu đồ ca sử dụng

21

Page 23: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

Hình 3.2.2.3: Biểu đồ ca sử dụng

22

Page 24: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

CHƯƠNG 4 - TRIỂN KHAI XÂY DỰNG4.1 Trang chủ

Hình 4.1: Trang chủ

4.2 Trang đăng nhập

Hình 4.2: Trang đăng nhập

23

Page 25: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

4.3 Trang đăng ký

Hình 4.3: Trang đăng ký

4.4 Trang về chúng tôi

Hình 4.4: Về chúng tôi

24

Page 26: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

4.5 Trang địa điểm

Hình 4.5: Địa điểm

4.6 Trang Blog

Hình 4.6: Blog

25

Page 27: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

2.3.4.

4.4.4.5.4.6.4.7. Trang liên hệ

Hình 4.7: Liên hệ

4.8. Trang Admin

Hình 4.8: Admin

26

Page 28: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

KẾT LUẬNVề ưu điểm:

- Bản thân tích lũy được kinh nghiệm trong việc phân tích và thiết kế hệ thống

- Xây dựng được 1 website sử dụng Bootstrap, Responsive.

- Cho phép người quản trị, nhân viên, Blogger và, đối tác có thể truy cập với quyền

hạn của mình trong hệ thống.

Về hạn chế:

- Vẫn còn thiếu một số tính năng để hoàn thiện 1 website du lịch

- Chương trình chưa kiểm tra hết các trường hợp có thể xảy ra

- Chưa thiết lập chuyển đổi ngôn ngữ

Hướng phát triển:

- Xây dựng được giao diện thân thiện hơn với người dùng

- Kiểm tra các trường hợp còn thiếu sót

- Tận dụng thế mạnh của các công cụ hỗ trợ để website được nhanh nhạy, chính xác

hơn

- Xây dựng thêm nhiều chức năng để hệ thống đầy đủ và toàn vẹn hơn

- Tìm hiểu xu hướng của người dùng để chỉnh sửa, bổ sung hệ thống phù hợp theo

yêu cầu

- Cập nhật tính năng khác để nâng cấp hệ thống của mình

- Phát triển thêm module chuyển đổi ngôn ngữ giúp cho những người nước ngoài

cũng có thể tìm hiểu và khám phá du lịch Tây Bắc dễ dàng hơn.

27

Page 29: daotao.vku.udn.vndaotao.vku.udn.vn/uploads/2020/12/1609339095-doancos…  · Web view2020. 12. 30. · cÔng nghỆ thÔng tin vÀ truyỀn thÔng viỆt - hÀn. khoa . khoa hỌc

TÀI LIỆU THAM KHẢO

1. Taylor Otwell (2011). MVC [online], viewed 29 July 2020, from:< https://mvcx.com/ >.

2. Marijn Haverbeke (2011). Eloquent JavaScript:[online], viewed 29 July 2020, from:< https://github.com/getify/You-Dont-Know-JS/ >.

3. Kyle Simpson (2014). You don’t know Js:[online], viewed 29 July 2020, from:< https://eloquentjavascript.net/ >.

4. Refsnes Data (1998). https://developer.mozilla.org/ [online], viewed 29 July 2020, from:< https://developer.mozilla.org/ >.

5. Refsnes Data (1998). W3Schools.com [online], viewed 29 July 2020, from:< https://www.w3schools.com/ >.

6. AdminLTE [online], viewed 29 July 2020, from:< https://adminlte.io/>.

28