Chuyên đề thực tập: Xây dựng website kết nối các công ty du lịch theo hướng Single Page Application

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (7.38 MB, 44 trang )

Trang 1<div class="page_container" data-page="1">

TRƯỜNG ĐẠI HỌC KINH TE QUOC DAN

VIEN CÔNG NGHỆ THONG TIN VÀ KINH TE SO

x\NH TẾ S¿

XAY DUNG WEBSITE KET NOI CAC CONG TY DU LICH THEO

HUONG SINGLE PAGE APPLICATION

Giang vién huéng dan: TS. Pham Minh Hoan

Sinh viên thực hiện: Nguyễn Tiến Dũng

Mã sinh viên: 11171002

Chuyên ngành: Công Nghệ Thông Tin

Lớp: Công Nghệ Thông Tin 59B

Hệ đào tạo: Chính Quy

HÀ NỘI, 4/2021

</div>Trang 2<div class="page_container" data-page="2">

MỤC LỤC

\ 18900 9 ... 1TOM TAT NOI DUNG CHUYEN DE TOT NGHIEP...seeesssseessssseeessseeeesneeeenees |

Nội dung 46 án: ... -5c- 25s SE EE2121127171121121111112112111111211 1111111. 1N01... ... 2

Mục tiêu của chuyên đề tốt nghiỆp...---- 2222 E+E+EE2EE2EEeEEerEzEerrkrrxee 2Các nhiệm vụ cụ thể của CĐTN...---c::-222vt2Extttttrrrtrtrrrtrrrirrrrrirrrrree 2

CHƯƠNG I: TONG QUAN VE DE TÀI...- 2-52 52+S2‡E‡2EeEEeEEEEEEEEEErrxrreree 31.1. Tổng quan tình hình nghiên cứu thuộc lĩnh vực của đề tài ... 3

1.2. Thực tiễn của bài toán ...----++ttthErgrng gu 3

1.3. Đối tượng và phạm Vi bài toán...--- ¿22+ s+ExeEE2E2EEeEEerkerrkrrkerxee 4

1.3.1. Đối tượng:...--2-2-27k2E2 E221 2112211221211 211 11erree 4

In. an... ... 41.4. M6 ta no na n...:'"'... 41.4.1. Khảo sát nghiỆp VỤ... ..- Ăn ngư 5

1.4.2. Quy trình nghiỆp VỤ...- -- Gv. HHH HH HH nh Hy 51.4.3. Các yêu cầu về hệ thống...---¿-¿ 2+k+£E2E2EE+Exerkrrerrserkees 6

Chương II: CO SỞ LÝ THUYÊTT...- 2-2 2 E£2E£2EE+EE+EEtEEEEEESEEeEEerEerrerrkrred 8

2. Nội dung ChiNh... eee eeeecsseeceneecseeescecececeeeesaecesaecescecsneeseaeeesaeseneeeeaees 82.1. Phương pháp phân tích và thiết kế hướng đối tượng UML... 82.1.1. Hướng đối tượng là gì?...--2¿©-+¿©2++2x2EESEECEEerkrerkrrrkerrree 82.1.2. Khái niệm phân tích hướng đối tượng (object Oriented Analysis —2.2.1. Khai niệm mơ hình M C... ..- (ch k* 9H 92.2.2. Ưu nhược điểm của mơ hình MVC...-¿- ccx+ccxvEzxerzrerxee 10

</div>Trang 3<div class="page_container" data-page="3">

2.4.1. VueJs framework là gÌ”... -- --c- s vn HHnHn ngư, 112.4.2. Tại sao lại Chon Vue ?...cccccccccssscccceesssseceeceeenssceeccesessseeeeeeesssaees 112.4.3. Xamp... HH TH HH HH HH HH tr 11Chương III: PHAN TÍCH VÀ THIET KE HE THĨNG...--.----:- 12

SN (0i: —... 123.1. Biểu đồ USerCase...cc St St E211 111151 111151111151E111151 E11 sxe 123.1.1. Usercase tổng quất...--- - + k+Ek‡EkEE2EEEEEEEEEEEEEEEEkErkrrkrree 12

3.1.2. Biểu đồ usercase phân rã...--- -c++cx2E2EEEEEEEerErrrrrkerreee 13

3.1.3. Đặc tả chức năng...-- -- Gà HH HH key 153.2. Biểu đồ tuần tự...---- ¿22k k2 2112212121121 112121. 19

3.2.1. Biểu đồ tuần tự đăng ký tài khoản...---¿cs¿©ccccecrxesree 193.2.2. Biểu đồ tuần tự đăng nhập...---¿-+¿©c++2x++rxrsrxrrrxerxesred 193.2.3. Biểu đồ tuần tự đăng xuất...----©5¿22+c2cxcckerksrkrrrrerkrrree 203.2.4. Biểu đồ tuần tự tìm kiẾm...- ¿2 + ©x+x+E+Exerkerrrrerrkerrees 203.2.5. Biểu đồ tuần tự quan tâm tour của cÔng ty...--- 5 s2 213.2.6. Biểu đồ tuần tự cập nhật thông tin (thêm, sửa, xóa)...-.-- 213.2.7. Biểu đồ tuần tự lưu tour công ty...--- 22+ +xe+xerxsrserxrrssree 223.3. Biểu đồ thành phẩn...---¿- 2-52 £+E£+E£EESEEEEEEEEEEE2E121121 21212. xe. 22

3.4. Biểu đồ hoạt động...---©2¿+2s+EE‡EEEE2E12212711211211 2111111211 xe 233.4.1. Biểu đồ hoạt động đăng nhập ...--- 2 s+c++cxezzzrrrserxeee 233.4.2. Biểu đồ hoạt động đăng ký...---©5¿+c2+ccEerkerrrrerkerreee 23

3.4.3. Biểu đồ hoạt động tìm kiếm...---¿- 2¿©c++2x++cx++rxrrrxerresred 243.4.4. Biểu dồ hoạt động đăng bài ...---¿--2¿©2+2c++cxccrxrrrxerresree 243.4.5. Biểu đồ hoạt động cập nhật thơng tin ( thêm, sửa, xóa) ... 253.5. Phân tích hệ thống về dữ liệu ...---¿---¿©s+++x++zx+zx+erxezrxrsrxez 253.5.1. _ Các thực thé và thuộc tính ...- - - c x+x+x+Ek+k+EeEEksEerertsxereresxee 253.5.2. Xác định mối quan hệ giữa các thực thê...--- 2 s+cs+cz+s+2 26

3.5.3. Thiết kế cơ sở đữ liệu...----:-©-¿+2++2EEc2EEEEEEEkrrrkrrrrerkerred 263.5.4. Thiết kế giao diện website ...--- ¿+22 EEEerkerrrrkrrkerreee 28CHƯƠNG IV: CÀI ĐẶT VÀ GIỚI THIỆU SAN PHÂM...---- -- 33

4. Các bước chạy chương trình va gia0 điỆn... ..- --sc + ssessersrrs 334.1. Các bước chạy chương trÌnh...- --- --- +s + ksxSvnnnHnHnHngg nệ, 33

4.1.1. BackEnd...2- 2kcckc2 2 E21 211211221 2121111 ctkcrei 334.1.2. FronfEnd...---ĂĂc S S111 901 1 1 xxx ve 33

4.2. Giao diện của trang We€b... ...----c kg kg rr, 334.2.1. Màn hình đăng nhập ...-- - -- 5 cv kg 33

</div>Trang 4<div class="page_container" data-page="4">

4.2.2. Man hinh dang kyo... ... 34

4.2.3. Trang Chủ... LG SH HH HH HH kh 35

4.2.4. Trang thơng tin cá nhân...- ..- <+« + + kSvk vn ng ngư 35

4.2.5. Trang đăng thông tin... --- Ăn HH gi, 364.2.6. Trang hiển thị danh sách tour và công ty...--.:---:--s:-s+¿ 364.2.7. Trang hiển thị chi tiết thông tin tOur...--- 2 25c + s+£sz£zxzez 37KET LUẬN VA HƯỚNG PHAT TRIEN ...---c¿cs+2cc+vrsvrxvererrrrree 38TAI LIEU THAM KHẢO... 2-2: S2 St+E+EEE+E+E5EEEESEEEEEESEEEEEESEEEEEEEEEEEEErkrrrreree 39

</div>Trang 5<div class="page_container" data-page="5">

MỤC LUC HÌNH ANH

Hình 1: Mơ tả về mơ hình MVC...--2- 2£ ©£©+++££+Ex++EEvrxeerxrrxeerxee 9 Hình 2: biểu đồ usercase tổng qt...-..-- 2-2-2 ©++E£+£2+E++E+Ex+rxersezes 13

Hình 3: Biểu đồ usercase phân rã cập nhật hồ sơ...--.---- 2-5: 14 Hình 4: Biểu đồ usercase phân rã cập nhật tOur...-- 2-2 2 s2 s2 +: 15 Hình 5: Biểu đồ tuần tự đăng ký tài khoản...-- 2 2©5s+cs+cxcrxcred 19

Hình 6: Biéu đồ tuần tự đăng nhập ...--- 2-2522 22Ez+£crxerxerxered 19 Hình 7: Biểu đồ tuần tự đăng xuất ...-- 2-52-5222 2 2Eerxerkerrrrei 20 Hình 8: Biểu đồ tuần tự tìm kiếm...-- 2-22 5©5£+xc£x+vExezzeerxeerxees 20 Hình 9: Biéu đồ tuần tự quan tâm tour của CONG ty ...---««--<<« 21 Hình 10: Biéu đồ tuần tự cập nhật thông tin...-- 2-2 2 s2 21 Hình 11: Biểu đồ tuần tự lưu tour cơng ty...----2- 2 2 s+zs+zxerxezed 22 Hình 12: Biểu đồ thành phan ...- 2-2 2 <+E+EE+EE£+E£2EE+EE+Exsrxerxered 22

Hình 13: Biểu đồ hoạt động đăng nhập...-- 2-2-2 2 2 2+Ez£x+rszcxez 23 Hình 14: Biểu đồ hoạt động đăng ky ...-- 2-2 + + s+++E+Eerxsrszreee 23 Hình 15: Biểu đồ hoạt động tim kiếm...-- 2-2-5 s2 s2 +2£+Ez£xsrxzcxez 24 Hình 16: Biểu đồ hoạt động đăng bài ...----2- 22522 2+£+rxsrxerseres 24 Hình 17: Biéu đồ hoạt động cập nhật thông tin... -.-- 55555 «<5+<+ 25 Hình 18: Biéu đồ thực thé liên KẾ ...--- - ¿6 + EE+E+EeEEEzEeEerxzverers 26 Hình 19: Màn hình thiết kế giao diện đăng nhâp...--- 5:52 28 Hình 20: Màn hình thiết kế giao diện đăng ký I...---¿-5z=5¿ 29 Hình 21: Màn hình thiết kế giao diện đăng ký 2...--- s52 29 Hình 22: Màn hình thiết kế giao điện trang chủ ...--- 2-5-2 5+: 30

Hình 23: Màn hình thiết kê giao diện đăng thơng tin ...--- 30

Hình 24: Mà hình thiết kế giao diện thơng tin cá nhân...--- 31

Hình 25: Màn hình thiết kế danh sách tour và cơng ty...--- 31

Hình 26: Màn hình thiết kế chi tiết thơng tin tour ...---5z-52 32

Hình 27: Màn hình giao diện đăng nhập...-- - 5 255555 *++sc+sessess 33Hình 28: Màn hình giao diện đăng ký Ï... 5555555 ++scc+sessess 34Hình 29: Màn hình giao diện đăng ký 2...----2¿- + ©cz+cxezzzvrxecrxeee 34Hình 30: Màn hình giao diện trang chủ ...- s6 55s ++*+ssecsseessees 35Hình 31: Màn hình giao diện trang thơng tin cá nhân ...-- -- ---- 35

Hình 32: Màn hình giao diện trang đăng thong tin... .-- --‹- «+ 36

Hình 33: Màn hình trang hién thị danh sách tour và cơng ty... 36

Hình 34: Màn hình giao diện trang hiển thị chỉ tiết thông tin tour... 37

</div>Trang 6<div class="page_container" data-page="6">

TOM TAT NOI DUNG CHUYEN ĐÈ TOT NGHIỆP

Nội dung đồ án bao gồm việc tìm hiểu những lý thuyết về ngơn ngữ PHP, Javarscript dé lập trình webisite kết nối cơng ty du lịch. Dau tiên là

tìm hiểu về phần BackEnd có PHP va framework Laravel, cơ sở dit liệu Mysql, ngơn ngữ mơ hình hóa UML phân tích thiết kế hệ thống. Về phần FrontEnd có Javascript và framework Vuejs, Boostrap. Tiếp theo là quá trình xây dựng website kết nối các công ty du lịch của bản thân qua các

bước: Khảo sát, nắm bắt yêu cầu, phân tích thiết kế hệ thống, lập trình, cài

đặt thử nghiệm, đề xuất phương hướng trong tương lai.

Nội dung đồ án:

Tồn bộ nơi dung báo cáo của đô án gôm những nội dung chính sau:

- MỞ ĐẦU

- CHƯƠNG I: Tổng quan về dé tài - CHƯƠNG II: Cơ sở lý thuyết

- CHƯƠNG III: Phân tích thiết kế hệ thống

- CHƯƠNG IV: Cai đặt và giới thiệu sản pham

- KÉT LUẬN VÀ HƯỚNG PHÁT TRIÊN

</div>Trang 7<div class="page_container" data-page="7">

MỞ ĐẦU

Mục tiêu của chuyên đề tốt nghiệp

Mục tiêu của CHUYEN DE TOT nghiệp này là nhăm xây dựng một website theo chuân SPA kết nối các cơng ty du lịch thơng qua đó:

- C4 nhân, cơng ty có thé tìm được một tour hoặc cơng ty phù hợp cho chuyến du lịch của minh.

- _ Cơng ty có thé đăng tai các thơng tin về tour du lịch cũng như của

cơng ty đó

- C4 nhân, cơng ty có thể lưu lại các tour hoặc cơng ty minh quan tâm.

- Ca nhân, công ty đánh giá phản hôi đối tác qua việc trải nghiệm

thông qua website.

- _ Cá nhân, cơng ty có thé đăng ký nhận các email thơng báo khi cótour hoặc khách hàng có nhu cầu đi du lịch phù hợp với hồ sơ trên

trang web.

Các nhiệm vụ cụ thể của CĐTN

Nhiệm vụ cụ thể của CHUN ĐỀ TĨT nghiệp là:

- Tìm hiểu các khái niệm, nghiệp vụ liên quan đến việc đăng tin,

tìm kiếm một tour du lịch.

- Lắng nghe yêu cầu thực tế từ khách hàng nằm rõ quy trình của

web cơng thơng tin du lịch.

- Tìm hiểu phân tích thiết kế hệ thống website công thông tin du

lịch làm theo hướng đối tượng sử dụng ngôn ngữ UML.

- Thực hiện đồ án theo công nghệ VueJS framework, Laravel framework theo mơ hình MVC dap ứng được các u cầu chính của hệ thông công thông tin du lịch.

</div>Trang 8<div class="page_container" data-page="8">

CHƯƠNG I: TONG QUAN VE DE TÀI

1.1. Tổng quan tinh hình nghiên cứu thuộc lĩnh vực của đề tài

Hiện nay, nền công nghiệp 4.0 đang ngày càng phát triển, thúc đây các hoạt động phát triển theo, đặc biệt là các thông tin, tin tức về các ngành nghề, lĩnh vực. Và ngành du lịch cũng không phải là một ngoại lệ, vậy làm

thế nào để thông tin đến với mọi người, dễ dàng tìm kiếm, trao đổi hay

thương lượng về giá cả. Nhu cầu tìm kiếm đi du lịch cao vì vậy một website đăng tin giới thiệu về từng công ty là rất cần thiết dé cả khách hàng

lẫn cơng ty đều có thé tìm đến nhau một cách dễ dàng.

Với nhu cầu tìm kiếm cũng như di du lịch tăng làm sao dé một cá

nhân, công ty muốn tìm những tour du lịch phù hợp hay lưu lại thơng tin

cơng ty mà mình quan tâm, để việc quản lý các thơng tin đó trở nên dễ dàng tiện lợi nhất. Book tour từ xa, chào giá tour trở nên thuận lợi và tiết kiệm nhất.

Các công ty đăng tin du lịch dé dàng quản ly được tour du lịch mình

đã đăng, xem các hồ sơ khách đã đặt tour một cách nhanh chóng và thuận

tiện. Việc quan lý lưu trữ hay quan tâm tới các khách hàng tiềm năng phù

hợp với yêu cầu của công ty trở nên dé dàng. Hay việc quản lý hạn đăng tin tuyển dụng sẽ được tự động hóa.

Hiện nay có khá nhiều trang website du lịch nhưng chủ yếu dành cho riêng một công ty lữ hành và đa số là sẽ lớn. Đối với các công ty nhỏ

hơn việc có một website giới thiệu cũng như quảng bá các tour du lịch của

cơng ty ra điều rất cần. Vì vậy với website tìm kiếm du lịch này sẽ chú trọng vào đối tượng là tất các cơng ty có nhu cầu đăng tin và tìm kiếm

khách hàng. Website sẽ giúp các cơng ty, dễ dàng tìm được các khách hàng

phụ hợp với mình để có thể đem lại cho họ những phút giây du lịch tuyệt

vời nhất.

1.2. Thực tiễn của bài tốn

Trong q trình khảo sát em thấy đa số sang web chỉ dành riêng cho

một công ty lữ hành nhất định. Rat ít trang web đứng ra dé bao qt và tập

hợp tồn bộ các cơng ty lại để người dùng có thé dé dàng lựa chọn hơn. Vì

vậy việc tham khảo giá cũng sẽ khá bắt tiện. Vì vậy các cơng ty lữ hành sẽ

cần đến một trang web đề có thé đăng tải các gói du lịch mà mình đang cần

tìm khách hàng, đồng thời có thể chăm sóc được khách hàng qua mỗi lần

trải nghiệm. Việc phát triển website đăng tin về công ty du lịch sẽ giúp các

</div>Trang 9<div class="page_container" data-page="9">

công ty lữ hành, các cá nhân:

- Dễ dàng quản lý công việc, khách hàng.

- Dé dàng đánh giá công ty qua mỗi lần trải nghiệm.

- Dễ dang tìm kiếm, quan tâm đến công ty, tour du lịch phù hợp. - Tạo nên một cộng đồng chia sẻ, cùng hợp tác và phát triển.

Do vậy, em hy vọng sẽ tạo nên một website hồn chỉnh nhất có

thê dé đáp ứng được u câu đặt ra cũng như ky vọng, nhiệt tình giúpđỡ từ thây cơ.

1.3. Đối tượng và phạm vi bài tốn

1.3.1. Đối tượng:

Hệ thống website kết nối du lịch được xây dựng trên mục đích phục

vụ cho việc tìm kiếm những tour du lịch của các cơng ty khác nhau, từ đó

có thể đưa ra những quyết định phù hợp cho chuyến đi của mình. Và các cơng ty du lịch cũng có thể đăng tin quảng bá về tour du lịch của mình trên

trang web I cách đơn giản nhất, và cũng có thể thêm sửa xóa bat cứ thơng tin gì về tour du lịch của cơng ty minh 1 cách dé dàng.

1.3.2. Pham vi:

Pham vi được sử dung trên website đối với quan trị viên, người dùng là công ty du lịch hoặc khách du lịch.

1.4. Mô tả bài toán

Một blog website về kết nối du lịch. Đây là trang web giới thiệu về tat cả những gi liên quan đến lĩnh vực du lịch của Việt Nam đến khách

hàng tham quan website, nhằm thu hút khách hàng tham quan website lần sau. Chủ đạo của website là giới thiệu các điểm du lịch trong nước, các chương trình về tour, các công ty lữ hành.

Tại đây người dùng có thế tìm kiếm và xem tất cả các tour du lịch mà mình quan tâm của tất cả những công ty lữ hành đã đăng ký và đăng tải

trên trang blog này. Qua đó người dùng có cái nhìn tổng quan về giá, dịch vụ của các tour,... nói chung là các tiêu chí để có thể đưa ra những quyết

định phù hợp rằng là có chọn cơng ty này với dịch vụ và giá cả như thế này hay không hay là chọn công ty du lịch kia với giá thấp (cao) hơn. Điều này

còn giúp người dùng khơng phải so sánh 1 cách bất tiện đó là tìm kiếm

từng website của từng cơng ty rồi phải qua từng trang dé nhìn giá.

Người dùng có thé tìm kiếm bang việc tìm qua tên cơng ty du lịch.

</div>Trang 10<div class="page_container" data-page="10">

Ví dụ người này đã từng trải nghiệm dịch vụ tour của cơng ty A thì sẽ

muốn quan tâm đến nhiều tour hơn của họ và muốn so sánh với dịch vụ

công ty B chăng hạn... Hay việc các cơng ty có thé nhìn vào dich vụ của đối thủ mà muốn có thêm nhiều chiến lược thu hút khách hàng hơn. Ngồi

ra cịn có thé tìm theo chi nhánh của từng công ty tại điểm du lịch bạn sẽ

đến hoặc địa điểm xuất phát.

Sau khi đã tìm được tour phù hợp người dùng có thể liên hệ cho

công ty qua số điện thoại đã được đăng ký hoặc truy cập thăng đến website

của cơng ty đó dé đặt tour.

Đối với người quản lý: Cần năm bắt được các thông tin về các công

ty du lịch đã đăng ký tour và xác nhận với cơng ty đó qua mail hoặc số điện

thoại đã được đăng ký. Xác nhận các thơng tin mà người đại diện cơng ty

đó đã đăng ký.

1.4.1. Khảo sát nghiệp vụ

1.411. Uu điểm

Hiện nay trên internet có rất nhiều website book tour du lịch như: mytour.vn, saigontourist.net, travel.com.vn... đã triển khai tốt các nghiệp

vụ đăng tin, tìm kiếm tour vì vậy day cũng là một nguồn tham khảo các nghiệp vụ tốt để em có thé áp dụng vao dé tài kết hợp với yêu cau bài toán.

Song với đặc thù bài toán đặt ra là một trang web tìm kiếm cơng ty du lịch nên nó sẽ bao qt hơn chứ khơng chỉ giới thiệu về tour của 1 công ty. Các

trang web book tour du lịch hiện có trên internet đã triển khai tốt các nội

dung như:

- _ Đăng tin về tour cho từng địa điểm. - Tim kiếm tour.

- Gợi ý về tour.

- Gửi email thơng báo khi có tour du lịch phù hợp. 1.4.12. Nhược điển

Sẽ chỉ có thé biết đến dịch vụ của một công ty duy nhất. Muốn xem cơng ty khác chúng ta sẽ phải tìm kiếm ở 1 trang web khác và việc này khá

là bất tiện và mắt thời gian. Các cơng ty khơng có mối liên hệ với nhau qua việc trao đôi tour hay cùng giúp đỡ nhau.

1.4.2. Quy trình nghiệp vụ1.4.2.1. Đăng ky

</div>Trang 11<div class="page_container" data-page="11">

Mỗi cá nhân người dùng muốn đăng nhập cần có một tài

khoản đẻ có thê truy cập và tương tác với trang web.1.4.2.2. Đăng nhập

Khi người dùng đăng nhập thành cơng thơng tin đã đăng ký thì sẽ

được truy cập và sẽ được cấp quyền tương tác trên trang web ứng với phân

loại của mỗi người.

1.4.2.3. Xác thực thông tin

Sẽ gửi mail đến địa chỉ của công ty hoặc người quản lý có thé gọi điện

để xác nhận thông tin mà công ty đã đăng ký. Nếu k đúng hoặc khơng chính xác có thé xóa bài va tài khoản

1.4.2.4. Quản ly bài đăng

Bài đăng sẽ được đăng lên nếu như người dùng là công ty du lịch. Sẽ được đăng bài về từng tour của công ty và không được đăng đưới tên một

công ty khác tránh tình trạng mạo danh hay làm mắt uy tín của nhau. Sẽ có

quyền thêm, sửa, xóa bai đăng của mình nhưng khơng được quyền thêm

sửa xóa của người khác

1.4.2.5. Xem bai dang

Moi người dùng đã đăng ký và đăng nhập thành cơng được vào hệ

thống có thể xem danh sách bài đăng của bất cứ công ty nào được đăng tảitrên trang chính. Ngồi ra có thé vào và xem chỉ tiết cụ thé từng bài đăngmột như về: mô tả, giá cả, địa điểm xuất phát,...

1.4.2.6. Quản ly người dùng

Người dùng sẽ được phân loại là người dùng bình thường với người

dùng là cơng ty du lịch. Người dùng bình thương sẽ chỉ có quyền đăng

nhập, xem bài đăng, và bình luận. Người dùng là cơng ty du lịch sẽ có thêm

quyền được đăng bài sửa bài, nhưng chỉ trong phạm vi là bai đăng của

chính cơng ty đó.

1.4.2.7. Quản lý đăng xuất

Người dùng khơng cịn cơng việc cần thiết tại trang web nữa có thể

đăng xuất ra. Hệ thống sẽ nhận biết và thoát quyền hoạt động của người

dùng đó trên trang web. Và chờ lần truy cập tiếp theo dé có thé sử dụng

1.4.3. Các yêu cầu về hệ thống

1.4.3.1. Yêu cau về chức năng

Sau khi tìm hiểu vào khảo sát thì em thấy nên có nhưng chức

năng thiệt yêu như sau:

</div>Trang 12<div class="page_container" data-page="12">

e Đăng ký, đăng nhập.

e Xem danh sách bai đăng.

e Xem chỉ tiết mỗi bai đăng mà minh quan tâm . e_ Chức năng tìm kiếm bộ lọc kết quả.

e Chức năng đăng ký nhận thông tin qua mail.

e Cập nhật chi tiết hồ sơ người dùng.

e_ Cập nhật chi tiết hồ sơ của từng bài đăng trên web.

e Đăng tin quảng cáo về công ty.

e Đánh giá công ty sau khi trải nghiệm dịch vụ.

e Thiết lập hồ sơ cho công ty.

1.4.3.2. Yêu câu về giao điện

e Vệ giao diện cân có những yêu câu như sau:

e Trang chủ giao diện đơn giản, thân thiện.

e Trang tìm kiếm, kết quả làm nổi bật các trường quan

trọng như: tên công ty, các gói du lịch, địa diém,...

e Bơ cục hài hịa, màu sac dé nhìn.

1.4.3.3. Yêu cau về hệ thong

e Hoạt động nhanh chính xác.

© Có thé cập nhật, bảo trì dé dàng.

</div>Trang 13<div class="page_container" data-page="13">

Chương II: CƠ SỞ LÝ THUYET

2. Noi dung chính

Nội dung chính của chương 1 là giới thiệu các cơ sở lý thuyết, cách thức hoạt động áp dụng vào đồ án xây dựng website tìm kiếm công ty du lịch. Kết thúc chương 1 sẽ xác định đúng cơ sở lý thuyết để giải quyết u

cầu đồ án xây dựng website tìm kiếm cơng ty du lịch.

2.1. Phương pháp phân tích và thiết kế hướng đối tượng UML 2.1.1. Hướng đối tượng là gì?

Đối tượng là những sự vật, sự việc mà có những tính chất, đặc tính,

hành động giống nhau và ta gom góp lại thành đối tượng.

Ví dụ: Sinh viên là một đối tượng vì sinh viên có các đặc tính như tên, mã sinh viên, giới tính... và những hành động như đi học, điểm

danh.... Mỗi sinh viên là thể hiện của đối tượng sinh viên.

2.1.2. Khái niệm phân tích hướng đối tượng (object Oriented

Analysis — OOA)

Phân tích hướng đối tượng là gia đoạn phát triển một mơ hình chính

xác và súc tích của van dé, có thành phần là các đối tượng và khái niệm đời thự, deex hiểu đối với người sử dụng. Sử dụng phương pháp đối tượng

chúng ta có thé mơ hình hóa các thực thé thuộc một van dé có thực mà van

giữ được cấu trúc, quan hệ cũng như hành vi của chúng.

2.1.3. Khái niệm thiết kế hướng đối tượng (Object Oriented Design

Thiết kế hướng đối tượng là giai đoạn tổ chức chương trình thành các

tập hợp đối tượng cộng tác, mỗi đối tượng trong đó là thực thể của một lớp. Các lớp là thành viên của một cây cấu trúc với mối quan hệ thừa kế.

Mục đích của giai đoạn OOD là tạo thiết kế dựa trên kết quả cua giai

đoạn OOA, dựa trên những quy định phi chức năng, những yêu cầu về môi trường, những yêu cầu về khả năng thực thi.

Trong giai đoạn OOD, nhà thiết kế định nghĩa các chức năng, thủ

tục, thuộc tính cũng như mối quan hệ của một hay nhiều lớp.

2.1.4. Khái niệm UML

</div>Trang 14<div class="page_container" data-page="14">

Ngơn ngữ mơ hình hóa thống nhất (Unifield Modeling Language -UML) là một ngơn ngữ mơ hình hóa thống nhất, có phần chính bao gồmnhững ký hiệu hình học, được các phương pháp hướng đối tượng sử dụng

dé thê hiện và miêu tả các thiết kế của một hệ thống. UML là một ngôn ngữ dé đặc tả, trực quan hóa, xây dựng, UML có thể được sử dụng làm công cụ giao tiếp giữa người dùng, nhà phân tích, nhà thiết kế và nhà phát triển

phần mềm.

eUML được xây dung với chủ dich là:

e Mơ hình hóa các hệ thống sử dụng các khái niệm đối tượng.

e Thiêt lập một kêt nôi từ nhận thức cua con người đên các sự kiện can

mơ hình hóa.

e Giải quyết van đề về mức độ kế thừa trong các hệ thống phức tạp, có

nhiều ràng buộc khác nhau.

e Tạo một ngơn ngữ mơ hình hóa có thé sử dụng bởi người và máy.

2.2. Mơ hình MVC

2.2.1. Khái niệm mơ hình MVC

MVC là chữ viết tắt của Model — View — Controller, đây là một mơ

hình kiến trúc phần mềm được tạo ra với mục đích quản lý và xây dựng dự án phần mềm có hệ thống hon. Mơ hình này được dùng khá rộng rãi và đặc

</div>Trang 15<div class="page_container" data-page="15">

biệt là trong các ngơn ngữ lập trình web.

Trong mơ hình này thì:

eModel: có nhiệm vụ thao tác với co sở dit liệu, nghĩa là nó sẽ chứa

tat cả các hàm, các phương thức truy vấn trực tiếp với dir liệu và controller sẽ thơng qua hàm, phương thức đó dé lay dữ liệu rồi gửi qua view.

eView: có nhiệm vụ tiệp nhận dữ liệu từ controller và hiên thị nội

dung qua giao diện website.

e Controller: dong vai trò trung gian giữa model và view, có nhiệm vụ

tiếp nhận yêu cầu từ client sau đó xử lý request, load model tương ứng và gửi data qua view tương ứng rồi gửi trả kết quả về cho client.

2.2.2. Ưu nhược điểm của mơ hình MVC Uu điểm:

eHé thống phân ra từng phần nên dé dàng phát trién.

e Chia thành nhiêu modun nhỏ nên nhiều người có thể làm dự án.

e Vẫn dé bảo trì nâng cấp dé dàng hon.

e Dễ dàng debug trong quá trình xây dựng.

e Nhược điểm:

e Xây dựng cầu kì và mat thời gian dé xây dựng thư viện.

2.3. Laravel Framework

2.3.1. Framework 1a gi ?

Framework là một thư viên các hàm xây dựng có sẵn, chuyên phục vụ cho việc lập trình. Việc sử dụng các framework hỗ trợ cơng việc lập trình

nhanh hơn, tiết kiệm thời gian và đảm bảo tính bảo mật của hệ thống.

2.3.2. Laravel là gì ?

Laravel là một framework của ngơn ngữ PHP, được phát hành vào

6/2011, gồm những đặc điểm nổi bật như Eloquent ORM, localization,

models and relationship, routing, views,...được tạo ra dé khac phục những van dé còn vướng mắc và thiếu sót của codeigniter cịn gặp phải.

Tại thời điểm hiện tại Laravel đã nâng cấp đến phiên bản 8.x, trong đồ án lần này thì em sẽ dùng Laravel 7.x.

10

</div>Trang 16<div class="page_container" data-page="16">

2.3.3. Tai sao nên lựa chọn Laravel ?

= Được thừa hưởng những thế mạnh của các framework khác

= Có số lượng người dùng nhiều đồng nghĩa có nhiều thư viện hỗ trợ

= Document rõ rang, dé doc

= Các lệnh tương tác với co sở dữ liệu ngắn ngọn

= Route rat mạnh tiện lời cho việc điêu hướng2.4. VueJs framework

2.4.1. Vuejs framework là gi?

Nếu như Laravel là framework của PHP thi Vue là framework của Javascipt sẽ được em dùng để thiết kế phần FrontEnd. Là framework sinh sau dé muộn nhất nếu so với các AngularJs hay ReactJs. Những framework

như vừa kể trên có thể giúp việc tạo ra một trang web theo chuẩn SPA (Single Page Application) .

2.4.2. Tai sao lai chon Vue ?

= Dễ dàng xây dựng lên một Project mà ko cần quá nhiều bước

= Dễ dàng tạo cấu trúc source Project với Vue-CLI( em dùng trong đồ

án )

= Có nhiều các thư viện hỗ trợ lập trình viên

= Hệ sinh thái vững chắc với các add-on: vue-router, vuex,

2.4.3. Xampp

Xampp là phần mềm tạo máy chủ web server trên máy tính cá nhân

hiệu quả và thơng dụng tích hợp nhiều cơng cụ hữu ích. Nó tương thích với với nhiều hệ điều hành như: Windows, Linux, MacOS, Cross-platform và

Solaris. Hồn tồn miễn phí và dùng mã nguồn mở, cấu hình web server

nhẹ.

Phiên ban trong đồ án là Xampp version 7.3.27 / PHP 7.3.27 dé tương

thích với phiên bản PHP 7.x.

11

</div>Trang 17<div class="page_container" data-page="17">

Chương III: PHAN TÍCH VÀ THIET KE HE THONG

3. Noi dung chương

Trong chương nay: Phân tích thiết kế hệ thống, trình bày các quy trình nghiệp vụ, phân tích, thiết kế (dữ liệu, chức năng) của phần mềm, có các user case, biểu đồ luồng dữ liệu, mơ hình thực thé liên kết, bảng thiết kế chi

tiết cơ sở dữ liệu. Đây là chương quan trọng nhằm xác định được các tác

nhân, chức năng cụ thể của hệ thống một cách chi tiết nhằm phục vụ cho việc bắt tay vào viết chương trình.

3.1.Biêu đơ Usercase

3.1.1. Usercase tổng qt

Bảng kí hiệu:

Là một tác nhân trong hệ thơng, có thê là người

dùng hoặc người quan tri viên có một vai trịActor ¬ . : .

nhât định trong hệ thơng, có thê thực hiện được

nhiều UseCase.

: —<—— La thành phan co ban nhất của so đồ UseCase. UseCase ( Usercase ) Được biéu diễn bằng hình elip. Mỗi UseCase

>> | hiển thị một chức năng trong hệ thống.

¬ =... Được dùng dé miêu tả mối quan hệ giữa các đối

Accociation tượng trong so đồ.

Dependency; - > Miêu tả su phụ thuộc giữa các đối tượng.

12

</div>Trang 18<div class="page_container" data-page="18">

Gang ký nhân Đăng nhập bằng

Hình 2: biểu đồ usercase tổng quát 3.1.2. Biểu đồ usercase phân rã

3.1.2.1. Biểu đô usercase phân rã cập nhật hồ sơ

Người dùng có thé vào trang cá nhân dé xem thông tin, sửa thông tin hoặc đổi mật khẩu

13

</div>Trang 19<div class="page_container" data-page="19">

Hình 3: Biéu đồ usercase phân rã cập nhật hồ sơ 3.1.2.2. Biểu đô usercase phân rã cập nhật tour

Công ty du lịch có thé vào phan thơng tin tour và có thé sửa thơng tin, hoặc xóa thơng tin của tour

</div>Trang 20<div class="page_container" data-page="20">

Hình 4: Biéu đồ usercase phân rã cập nhật tour 3.1.3. Đặc ta chức năng

3.1.3.1. Đăng ky

Điều kiện: người dùng đã truy cập website và chưa có tài khoản hoặc muốn đăng ký tài khoản mới

Luéng su kién chinh:

BI. Người dùng chon mục đăng ký.

B2. Nhập day đủ thông tin bắt buộc và click vào nút đăng ký.

B3. Website đưa ra thông báo đăng ký thành công và đưa tới trang

BI. Người dùng chọn chức năng đăng nhập.

B2. Người dùng nhập tên đăng nhập và mật khâu, click nút đăng nhập. B3. Website thông báo đăng nhập thành công và tiếp tục truy cập website.

B4. Kết thúc usecase.

Luông sự kiện phụ

B2.1. Người dùng không điền day đủ thông tin đăng nhập, website đưa ra thông báo yêu cầu điền đầy đủ thông tin và quay lại B2.

B2.2. người dùng nhập sai thông tin đăng nhập, website đưa ra thông

báo yêu cầu nhập lại và quay lại B2.

B2.3. người dùng chọn đăng nhập bằng facebook, website yêu cầu

đăng nhập facebook và kiểm tra nếu có quyền đăng nhập facebook đưa rathông báo đăng nhập thành công và tiếp tục B3, ngược lại khơng có quyền

đăng nhập quay lại BI.

3.1.3.3. Đăng xuất

15

</div>Trang 21<div class="page_container" data-page="21">

Điều kiện: người dùng đã truy cập vào website và đăng nhập hệ

BI. Người dùng chọn chức năng đăng xuất.

B2. Website xác nhận lại yêu cầu đăng xuất.

B3. Website xóa thơng tin đăng nhập và trở về trang chủ. B4. Kết thúc usecase.

3.1.3.4. Tìm kiếm

Điều kiện: người dùng đã truy cập vào website và đăng nhập hệ

BI. Người dùng bắm vào xem tour.

B2. Nhập từ khóa vào | hoặc nhiều ơ tìm kiếm tương ứng: tên công ty, chi nhánh, điểm bat dau.

B3. Bam vào nút tìm kiếm.

B4. Website trả về kết quả tìm kiếm. B5. Kết thúc usecase

3.1.3.5. Lưu quan tâm tour, công ty

Điều kiện: người dùng đã truy cập vào website và đăng nhập hệ

BI. Người dùng bắm vào xem tour.

B2. Nhập từ khóa vào 1 hoặc nhiều 6 tìm kiếm tương ứng: tên công ty,

chi nhánh, điểm bat dau.

B3. Bam vào nút tìm kiếm.

B4. Website trả về kết quả tìm kiếm.

BS. Người dùng bam vào nút quan tâm công ty.

3.1.3.6. Cập nhật hô sơ cá nhân

Điều kiện: người dùng đã truy cập vào website và đăng nhập hệ thông.

BI. Người dùng chọn chức năng xem hồ sơ (tên của người dùng gan nút đăng xuất).

16

</div>Trang 22<div class="page_container" data-page="22">

B2. Người dùng click vào nút sửa thông tin.

B3. Người dùng điền đầy đủ thông tin hồ sơ và click vào nút cập nhật

hồ sơ.

B4. Website đưa ra thông báo cập nhật thành công.

B5. Kết thúc usecase.

3.1.3.7. Đăng thông tin vé tour

Điều kiện: người dùng đã truy cập vào website va đăng nhập vào hệ thông.

BI. Chọn chức năng đăng tin về công ty.

B2. Người dùng nhập đầy đủ thông tin yêu cầu và nhắn vào nút đăng tin.

B3. Website đưa ra thông đăng tin thành công và chuyển đến trang

xem danh sách tour đã đăng.

B4. Kết thúc usecase.

3.1.3.8. Cáp nhật thông tin tour

BI. Người dùng chọn chức năng xem chỉ tiết bài đăng.

B2. Người dùng click vào nút sửa thông tin.

B3. Người dùng điền đầy đủ thông tin hồ sơ và click vào nút cập nhật

hồ sơ.

B4. Website đưa ra thông báo cập nhật thành cơng.

B5. Kết thúc usecase.

3.1.3.9. Bình luận đánh giả công ty

Điều kiện: người dùng đã truy cập website, đã đăng nhập vào hệ thống, đã tham gia và kết thúc dịch vụ của cơng ty đó.

BI. Người dùng bam nút xem chi tiết của bai đăng cơng ty đó. B2. Bam vào mục bình luận.

B3. Điền các thơng tin đánh giá và nhắn nút đánh giá.

B4. Website đưa ra thông báo đánh giá thành công.

B5. Kết thúc usecase.

17

</div>