Thiết kế website quản lí sự kiện event hubs

MO DAU Kính thưa quý thầy cô, Trong thời đại số hóa và phát triển công nghệ hiện nay, việc sử dụng internet và các ứng dụng công nghệ thông tin đã trở thành một phần không thê thiếu tron

DAI HOC DA NANG TRUONG DAI HQC CONG NGHE THONG TIN

VA TRUYEN THONG VIET —- HAN KHOA KHOA HOC MAY TINH

MO DAU

Kính thưa quý thầy cô,

Trong thời đại số hóa và phát triển công nghệ hiện nay, việc sử dụng internet và các

ứng dụng công nghệ thông tin đã trở thành một phần không thê thiếu trong cuộc sống hàng

ngày của chúng ta Cùng với sự tiến bộ của công nghệ, người dùng ngày cảng trở nên khá

cấp bách và tìm kiếm những giải pháp tiện ích, đơn giản và hiệu quả để đáp ứng nhu cầu

cua minh

Dường như ai cũng nhận ra, cuộc sống hiện đại ngày cảng bận rộn và phức tạp hơn

Chúng ta phải đối mặt với nhiều thách thức và áp lực từ công việc, gia đình, bạn bè và các

hoạt động khác Vì vậy, việc quản lý thời gian trở thành một yếu tô quan trọng để giúp

chúng ta có thể hoàn thành công việc một cách hiệu quả và đạt được mục tiêu cua minh

Trong quá trình quan ly thời gian, lịch trình cá nhân là một công cụ quan trọng để giúp

chúng ta sắp xếp thời gian một cách hợp lý và tiết kiệm thời gian Tuy nhiên, việc quản lý

lịch trình cá nhân trên giấy tờ có thế gặp nhiều khó khăn và bắt tiện Vì vậy, các website

quản lý lịch trình cá nhân đã được phát triển để giúp chúng ta quản lý thời gian một cách

thông minh và tiện lợi hơn

LOI CAM ON

Chúng em xin chân thành cảm ơn quý thầy cô Trường đại học Công nghệ thông

tin và Truyền thông Việt Hàn đã giảng dạy, truyền đạt những kiến thức quý báu vả tạo điều kiện cho chúng em thực hiện đồ an nay

Đặc biệt em xin chân thành gtr lời cảm ơn sâu sắc đến thầy giáo Th.S Trần Thanh Liêm, người đã tận tình hướng dẫn, trực tiếp chỉ bảo vả tạo mọi điều kiện giúp đỡ chúng em trong suốt quá trình thực hiện đồ án

Mac du da co gang no lye hét minh, song do án chắc chan còn nhiều thiêu sót Em rất mong nhận được sự thông cảm va chỉ bảo tận tình của của quý thây cô

Em xin chân thành cảm ơn Ì

Sinh viên

Trần Hữu Phi

Tran Quoc Tuan

NHAN XET CUA GIANG VIEN HUONG DAN

Đà Nẵng, ngày tháng năm 2024

Giảng viên

LL T6ng quate ccccccccccceccssescssesscseesesssssessesessecssesuesiesessessesseseeseesessesseseeseeees 9

1.1.1 Bối cảnh thye hign dé tai ccc ccccescceesscstesecsesseseessesisseseseseesetseseees 9 Bốc n ăẽ 10 1.1.3 Vấn để cần giải quyết - 5c 1S 1121111211211 12221221221 ng He re 10 1.1.4 Đề xuất nội dung thực hiện 5 5+ S191 12E1E1121121211111212112121 1 yeu 10

1.2 Phương pháp, kết quả 5- 52221 1212121111211 1111122 1 11221 rag 11 1.2.1 Phương pháp triển trai thực hiện - 5-5 S2 1 S282 571211 122127211 xe 11

1.2.2 Két qua dat due cccsccccesscssessssessecseseeseessesissecsesesicsesesessesesseeesstees 11 1.3 Cấu trúc d6 atic cccccccccccessececseseessesssssesessessessesscsisssesicsnseesseseseesesseees 12 CHƯƠNG 2 : NGHIÊN CỨU TÔNG QUAN 5 2122 2212212T1E1 21111 102 re 13

2.1.1 Trinh bay cdc phuong phap trién khai thye hién dé tai eee 13

QAN2 Da MGM cece secs ceesecseesecssseesesseseeseesssessessessesiesceevecteseesseseseesen 13

2.1.3 Chức nắng L1 2011211211121 1 12 110111 0111111111 11111111 11111111211 k HH cay 13

2.1.4 Ưu điểm - S1 2121111211211 111222122121 12111 1 12 11g eo 13

” ` CŨ 14 2.2 Các ngôn ngữ, công nghệ sử dụng ce cece 12112212211 2211 1211111111 k2 14 2.2.1 Hyper Text Markup Languages (HTML) 2: 22 2222112222222 sx+2 14 2.2.2 Cascading Style Sheet (CSS) Q.21 112111 12112111211011 1011211201111 1 1 se, 15

P N ` na 4 15

„2n na 16 P5 N pc 18 2.2.6 MOnQodb cccccccccccccccessceeceeenscenseseessessseesseeseceeceeessestseesssescneeeeneeeesees 19

CHUONG 3 : PHAN TICH THIET KE HE THÓNG -.2:-5222+22222zz 20

3.1 M6 ta hé thong website ccccccccccsescessessessessesessessessesscseeseceessteeseeseesees 20

3.2 So dG Use-CASC ec cccccecce cess cssessessessseseteesiesctiesietisesistiessetitsiistisiestteseetes 20 3.2.1 Sơ đỗ use-case tông quát 5c S22 1211211211 111211151111 1211 re 20

3.3 Sơ đồ lớp 2n HH HH 1221211 2 tt ng tre 21 3.4 Biểu đỗ hoạt động 5s ST T2 2121111212121 1 1212111 sn nu 21

3.4.1 Hoạt động tìm kiếm sự kiện 2 SH ng T111 1H HT Hee 21 3.4.2 Hoạt động đăng nhập thành viên - - 22 22 122212112211 33231 1352115 2xe2 22 3.4.3 Hoạt động đăng kí thành viên 0 22 22122211211 121 1121151111121 11 xe, 23 3.4.4 Hoạt động Quản lí sự kiện 5 c1 2 122122211211 121 122112 111511111181 11 e2 24

CHUONG 5 : KET LUAN Lees cescssssssssssssecesssseseecsrneseecsinssisinnssneesniceenssseesnesannneeees 32

5.1 Kết ua dat QUOC .-ễÝỶÝ 32 5.2 Hướng nghiên ctu cece ccceseceseesceneccnecnssesseessesseeeseeseensesetieeeeeees 32

TAI LIEU THAM KHAO cccssssessssseeseecssseseecsseeesntuisecesninseccareseecsunescaninnseessneseee 33

DANH MUC HINH ANH

Hinh 1 Giao dién website ccc ceeeecesseseeeseeeeeetetnctseceseccseccesecesseesesseeeeeneceseueens 13 Hình 2 Sơ đồ usecase tông quát - 2-21 1 121 111511211211E1 211 12111211118 rêu 21

Hình 3 Sơ đồ lớp - 5s 2 121211211211 211122 1211212112211 121221 ng tru 22

Hình 4 Biểu đề hoạt dong tim Kid Sur Ki@t occ ccccccccccccccccecececscsescesvevecsvecssseseescsteeeeees 23 Hình 5 Biéu đồ hoạt động đăng nhập thành viên 52 S2 S9 E1 £E22221712222e2 24 Hình 6 Biểu đỗ hoạt động đăng kí thành viên 2 2S S2 221212 E111 11521 xce 25

Hình 7 Biểu đỗ hoạt động Quản lí sự kiện 52-5 2212111512112 21212811 re 26 Hình 8 Biéu đồ trạng thái đăng nhập 121912211 11111 121111212 1121 mg 26

Hình 9 Biểu đồ trạng thái tìm kiếm sự kiện 22 S2 H121 51 5111111112121 5 8E serre 27 Hình 10 Biểu đồ trạng thái thêm mới sự kiện :- 22 22 2212221221221 25522, 27 Hình 11 Biểu đồ tuần tự hoạt động đăng nhập 2 222 2212221121222 28

Hình 12 Biểu đỗ tuần tự thêm mới sự kiỆn - 2252:2222 222 221122112 28

DANH MUC CUM TU VIET TAT

STT Cum tir Viet tat

CHUONG 1 : GIOI THIEU 1.1 Tổng quan

1.1.1 Bối cảnh thực hiện đề tài

Trong thời đại công nghệ số hiện đại, quản lý sự kiện đã trở thành một lĩnh vực quan trọng và phát triển mạnh mẽ Với sự tăng trưởng của ngành công nghiệp sự kiện

va nhu cau ngay càng cao của khách hàng, việc quản lý sự kiện hiệu quả và dễ đảng trở thành một ưu tiên hàng đầu Công nghệ và internet đã cung cấp nền tảng và cơ hội tuyệt vời cho việc tạo ra các ứng dụng và website quản lý sự kiện trực tuyến :

1 Tang cường sự chuyên nghiệp trong quản lý sự kiện: Với sự phát triển và đa dạng hóa của các sự kiện, việc có một website quản lý sự kiện chuyên nghiệp

đã trở thành một yếu tố quan trong Sw cần thiết của việc quản lý thông tin, đăng ký, shi danh, và theo dõi tiến độ sự kiện đã đây mục tiêu phát triển một website quản lý sự kiện hiệu quả

2 Tính tiện lợi và tối ưu hóa quy trình quản lý sự kiện: Trong quá trình tô chức sự kiện, việc sử dụng một website quản lý sự kiện ø1úp tối ưu hóa quy trình quản

lý thông tin và tương tác với khách hàng Nó cung cấp tính tiện lợi cho người dùng khi đăng ký, cập nhật thông tin, và nhận thông báo về sự kiện Việc sử dụng công nghệ và tự động hóa giúp tiết kiệm thời gian và công sức cho tô chức sự kiện

3 Tạo trải nohiệm sự kiện tốt hơn cho khách hàng: Một website quản lý sự kiện được thiết kế tốt mang lại trải nghiệm tốt hơn cho khách hàng Khách hàng có thể dễ dàng tìm hiểu thông tin về sự kiện, đăng ký tham gia, và nhận thông báo cập nhật Các tính năng như lịch trình sự kiện, thông tin chi tiết về chương trình

và diễn giả, cũng như khả năng tạo phiếu khảo sát và đánh giá giúp nâng cao tương tác và tham ø1a của khách hàng

Vì vậy, mô hình dịch vụ quản lí sự kiện đang trở nên ngày cảng phát triển ở Việt Nam Nắm bắt cơ hội nảy, chúng em đã tiến hành nghiên cứu thị trường nhằm

đáp ứng và cải thiện các vấn đề của khách hàng gặp phải khi quản lí thời gian, sự kiện,

10

giúp cho người dùng có thê quản lí thời gian cua minh mét cach co hiéu qua Qua đó,

người dùng có thé tự tin tham 1a sự kiện mà không sợ bỏ sót bất kỳ sự kiện nào

Thiết kế một website quan lý sự kiện mang lại tiện ích va giup tiết kiệm thời gian cho tô chức sự kiện Việc sử dụng công nghệ giúp tối ưu hóa công việc và giảm thiểu công sức cần thiết

Quản lý lịch trình cá nhân giup chung ta quản lý thời gian mét cách thông minh

và tiện lợi Chúng ta có thể tạo lịch trình cho các hoạt dong hang ngay, tuần hoặc tháng và đặt nhắc nhở đề không quên các hoạt động quan trọng, giúp chúng ta hoàn thành công việc một cách hiệu quả và đạt được mục tiêu của minh

1.1.3 Van đề cần giải quyết

- Tiếp cận được khách hàng tiềm năng

- Cung cấp khả năng tùy chỉnh lịch trình để phù hợp với nhu cầu đa dạng của người dùng, bao gồm thêm/sửa/xóa sự kiện, lặp lại các sự kiện, và thời p1an linh hoạt cho các sự kiện khác nhau

- Website đáp ứng được khả năng truy cập cập nhanh, thông tin tin cậy, chính xác

- Nội dung và cách trình bày của website phải rõ rang, mach lac va dé sử dụng

- Bảo vệ thông tin cá nhân và lịch trình của người dùng thông qua các biện pháp bảo mật như mã hóa dữ liệu và chứng nhận an toản

1.1.4 Đề xuất nội dung thực hiện

- Xây dựng Website quản lí sự kiện có giao diện thân thiện, dễ sử dụng

- Xây dựng Website có tốc độ tải trang nhanh chóng và hạn chế các thủ tục

11

rườm rà tốn thời gian

- Website đảm bảo bảo mật thông tin cá nhân của khách hàng

- Xây dựng Website công khai và minh bạch nhằm đem lại sự tin cậy cho khách hàng

1.2 Phương pháp, kết quả

1.2.1 Phương pháp triển trai thực hiện

Phương pháp nghiên cứu đề tài : Tìm hiểu về nhu cầu sử đụng các phần mềm

hỗ trợ quản lí lịch trình,sự kiện của khách hàng , từ đó làm cầu nối đến khách hàng

giúp khách hàng hiểu thêm về cách quản lí thời gian và sự kiện quan trọng

Cái mới của đề tài : Xây dựng được một website dễ đàng truy cập, thiết kế giao diện có tính thấm mĩ cao hơn, đễ nhìn, sử đụng hình ảnh thật và giá cả hợp lí giúp người dùng dễ nhìn nhận cũng như lựa chọn dịch vụ và nhà ở phủ hợp

Kết quả của đề tài : Hoàn thành được một website hoàn chỉnh có đầy đủ các chức năng p1úp cho mọi người dễ đàng tạo ra các lịch trình sự kiện, thời khóa biểu để quản lí Hướng đến một website được nhiều người biết đến Hệ thống của website đảm bảo được bảo mật trong các thông tin đăng kí, đăng nhập,

1.2.2 Kết quả đạt được

Bước đầu em đã xây dựng được một website quản lí sự kiện, người dùng có thé

tạo sự kiện mới vả xem sự kiện gần đây, đồng thời có thê đăng kí và đăng nhập trên

website

12

31 @vents on Reoc:

(GÀ eS alle ) '

Recently added events

Hinh I Giao dién website

1.3 Cấu trúc đồ án

v Chương l1: Giới thiệu

Giới thiệu chung về đề tài, ý nghĩa và các mục tiêu của đề tải

v_ Chương 2: Nghiên cứu tổng quan

Giới thiệu tổng quan về hệ thống sẽ xây dựng, các nhiệm vụ mà hệ thống sẽ thực hiện, và các giải pháp liên quan

* Chương 3: Phân tích thiết kế hệ thông

Bao gồm các chức năng cần có, các bước đề xây dựng một trang web

v_ Chương 4: Triển khai xây dựng

Xây dựng các trang đã đề ra bằng các công cụ hỗ trợ

* Chương 5: Kết luận và hướng phát triển

Trình bày tóm tắt các kết quả đạt được và đề xuất các hướng mở rộng, phát triển trong tương lai

13

CHUONG 2 : NGHIEN CUU TONG QUAN

2.1.Cac phuong phap

2.1.1 Trình bày các phương pháp triển khai thực hiện đề tài

- Xây dụng website dựa trên kiến thức đã học là ngôn ngữ HTML, CS§, JavaScript

- _ Công nphệ sử dụng : ReactJs, TallwindCSS, NodeJs và các thư viện khác

- _ Phần mềm thiết kế website : Visual Studio Code

- _ Tham khảo, tiếp thu ý kiến, dữ kiện từ giáo viên hướng dẫn

- Tim hiểu các website tương tự để rút ra lĩnh vực còn thiếu sót để bỗổ sung

cũng như khắc phục các điểm còn hạn chế của website khác

2.1.2 Đặc điểm

- Hướng dẫn rõ ràng : Menu điều hướng

-_ Nội dung trực quan

- Đánh giá của khách hàng

- Thiết kế website đa dụng

2.1.3 Chức năng

- Đăng kí, đăng nhập

- Thông tin về các địch vụ và nhà ở bao gồm gia ca

- Khuyến mãi, giảm giá

- Thuê nhà, đánh giá, chia sẻ

- Giới thiệu về không gian nhà ở

- Tốc độ tải trang nhanh

- Website tương thích mọi thiết bị phổ biến trên thị trường

- Website được thiết kế đễ sử dụng, tiện nâng cấp trong tương lai

2.2.1 Hyper Text Markup Languages (HTML)

HTML (Hyper Text Markup Laneuages) hay còn gọi là “Ngôn ngữ đánh dấu siêu văn bản” Nó được sử đụng để tạo nên các trang web thông qua các thẻ đánh dấu

Do vậy HTML không phải là một ngôn ngữ lập trình mà nó chỉ là ngôn ngữ đánh dấu Phần mở rộng của tập tin HTML thường là html hoặc htm Cac trình duyệt sẽ đọc tập

tin HTML va hién thi ching dudi dang trang web Cac the HTML sé duoc ấn đi, chỉ hiển thị nội dung văn bản và các đối tượng khác như hình ảnh, media Với các trình duyệt khác nhau đều hiển thị một tap tin HTML voi mot két qua nhat dinh Cac trang HTML được gửi di qua mang internet theo giao thire 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 đó (ví dụ các ngôn ngữ kịch bản như JavaScript) dé 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 chính thức là chuẩn của W3C

từ tháng 1 năm 1997 với phiên bản HTML 3.2 Trước đó thì HTML xuất bản theo tiêu

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 HTLM không có yêu cầu quá phức tạp, thông thường chỉ cần sử dung Notepad la

đã đủ HTML vẫn tiếp tục được phát triển Phiên bản hiện tại của HTML là HTML5 —

một phiên bản nâng cấp của XHTML HTMLS 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 HTML5 nói chung mạnh

15

mẽ hon nhiều không chỉ về tốc độ và độ thích ứng cao mà chính là khả năng hỗ trợ API (Application Programming Interface — giao diện lập trình ứng dụng) và DOM (Document Object Model - mô hình đối tượng tài liệu hay cây cấu trúc đữ liệu)

2.2.2 Cascading Style Sheet (CSS)

CSS — Cascading Style Sheet ding dé trinh bày các tài liệu viết bằng HTML hoặc XHTML Ngoài ra ngôn ngữ định kiểu theo tầng cũng có thế dùng cho XML,

SVG, XUL Các đặc điểm kĩ thuật của CSS được duy trì bởi tô chức W3C

CSS có cấu trúc đơn gian va 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úng ta có thể sử dụng I tập tin CSS đó cho nhiều website, giúp 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, lam giam duoc số lượng dòng code mà van đạt được yêu cầu

Tuy nhiên đôi với CS5 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 1 nội dung trên các trình duyệt khác nhau là không thống nhất

JavaScript có cú pháp linh hoạt và dễ tiếp cận, giúp nhà phát triển xây dựng các ứng đụng web mạnh mẽ và tương tác Một số khái niệm cơ bản trong JavaScript bao

3 Toan tu: JavaScript hỗ trợ các toán tử số học, chuỗi, so sánh và logic để thực

hiện các phép tính và kiếm tra điều kiện

4 Câu trúc điều khiển: JavaScript cho phép sử dụng các cấu trúc điều khiển nhw if-else, switch-case, vong lap for va while dé diéu khién luéng thực hiện của chương trình

5 Hàm: JavaScript cho phép định nghĩa và sử dụng các hàm Hàm là một khối

mã có thể được sọI lại và thực hiện một tác vụ cụ thê J avaScript cing hỗ trợ các hàm nặc danh (anonymous functions) va ham bat déng b6 (asynchronous functions)

6 Đối tượng: JavaScript là một ngôn ngữ hướng đối tượng, cho phép định nghia va str dung cac đối tượng Đối tượng trong JavaScript có thể chứa các thuộc tính

và phương thức

7 Sự xử lý sự kiện (Event handling): JavaScript cho phép xử lý các sự kiện như nhấp chuột, nhắn phím, hoặc gửi yêu cầu từ phía người dùng Sự kiện có thể được gán cho các phần tử HTML hoặc các đối tượng JavaScript đề thực hiện các hành động tương ứng

§ AJAX: JavaScript hỗ trợ giao tiếp với máy chủ qua AJAX (Asynchronous JavaScript and XML) Điều này cho phép tải đữ liệu từ máy chủ mả không cần phải tải lại toàn bộ trang web, tạo ra các ứng dụng web tương tác và đáp ứng nhanh chóng JavaScript là một công cụ mạnh mẽ để tạo ra các ứng dụng web đa dạng và tương tác Việc hiểu cơ sở lý thuyết của ngôn ngữ nảy sẽ giúp chúng ta phát triển và tối ưu hóa các ứng dụng web, cung cấp trải nghiệm tốt hơn cho người dùng cuối

2.2.4 ReactJs

ReactJS là một thư viện JavaScript phô biến và mạnh mẽ được sử dụng rộng rãi trong

phát triển ứng dụng web Được phát triển bởi Facebook, ReactJS giúp xây dựng giao diện người dùng động và linh hoạt, mang lại trải nghiệm tốt hơn cho người dùng

ReactJS dya trén m6 hinh component, trong dé mdi thanh phan (component) dai diện cho mét phan tur giao diện có thé tai sử dụng Một số khái niệm cơ bản trong ReactJS bao g6m:

17