Xây dựng website tìm đồ thất lạc tại trường đại học sư phạm kỹ thuật đà nẵng

Từ đó đề tài "Xây dựng website tìm đồ thất lạc tại trường Đại học Sư phạm KỹThuật Đà Nẵng" được chọn.. Nội dung chính của đồ án: Xây dựng website Tìm đồ thất lại tại trường Đại học Sư ph

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

Đà Nẵng, tháng 06/2022

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC

NGÀNH: CÔNG NGHỆ THÔNG TIN

CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

Đà Nẵng, tháng 06/2022

NHẬN XÉT CỦA NGƯỜI HƯỚNG DẪN

NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN

xe, điện thoại, balo, thường xuyên xảy ra đối với sinh viên

Nhưng để tìm lại được vật dụng của mình thì rất là khó khăn vì không biết ai làngười nhặt được vật rơi của mình cũng như người nhặt được không biết phải trả cho

ai Từ đó đề tài "Xây dựng website tìm đồ thất lạc tại trường Đại học Sư phạm KỹThuật Đà Nẵng" được chọn

Xuất phát từ những nhu cầu thực tế trên, đề tài đã phần nào giải quyết đượcnhững vấn đề như giúp người làm mất đồ có thể đăng bài lên đó, người nhặt được cóthể lên website để tìm người làm rơi để trả lại

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

Giảng viên hướng dẫn: Th.s Đỗ Phú Huy

Sinh viên thực hiện: Đỗ Lê Huy Mã SV: 1811505310115

- Công nghệ ASP.NET, HTML5, AJAX.

3 Nội dung chính của đồ án:

Xây dựng website Tìm đồ thất lại tại trường Đại học Sư phạm Kỹ Thuật ĐàNẵng, cho phép người làm rơi đồ có thể đăng bài tìm lại vật đánh rơi Cho phép ngườinhặt được có thể trả lại đúng chủ nhân của nó một cách nhanh nhất

4 Các sản phẩm dự kiến

- Website tìm đồ thất lạc tại trường Đại học Sư Phạm Kỹ Thuật Đà Nẵng.

- File báo cáo hoàn chỉnh.

LỜI NÓI ĐẦU

Ngày nay, công nghệ thông tin đã có những bước phát triển mạnh mẽ theo cảchiều rộng và sâu Máy tính điện tử không còn là phương tiện quý hiểm mà đang ngàycàng trở thành một công cụ làm việc và giải trí thông dụng của con người, không chỉ ởcông sở mà còn ngay cả trong gia đình

Đứng trước vai trò giúp sinh viên tìm lại vật rơi của mình nhanh chóng vàngười nhặt được trả lại đúng chủ nhân của nó một cách chính xác

Để giải quyết vấn đề trên, em đã nghiên cứu và tiến hành cài đặt “Website tìm

đồ thất lạc tại trường Đại học Sư Phạm Kỹ Thuật Đà Nẵng”

Với sự hướng dẫn tận tình của Thầy Đỗ Phú Huy em đã hoàn thành đồ án tốtnghiệp này

Em xin chân thành cảm ơn thầy cô bộ môn đã tận tình giảng dạy, truyền đạtkiến thức cho em trong các học kỳ vừa qua

Xin chân thành cảm ơn tất cả bạn bè đã động viên, giúp đỡ em trong thời gianhọc tập và hoàn thành đồ án

Tuy đã cố gắng hết sức tìm hiểu, phân tích thiết kết và cài đặt hệ thống nhưngchắc rằng không tránh khỏi những thiếu sót Em rất mong nhận được sự thông cảm vàgóp ý của quí Thầy Cô

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

Sinh viên thực hiện

i

CAM ĐOAN

Em xin cam đoan đồ án này là sự đúc kết, tổng quát lại quá trình tìm tòi, học hỏi

và xây dựng website của em Các số liệu, hình ảnh, thông tin trong đồ án đề trungthực, do em tự tìm hiểu, tham khảo từ nhiều nguồn tư liệu khác nhau Đồ án này khôngsao chép từ các đồ án có trước

Nếu phát hiện có bất kì gian lận nào em xin chịu hoàn toàn trách nhiệm về nộdung đề tài của mình Trường Đại học Sư phạm Kỹ Thuật – Đại học Đà Nẵng khôngliên quan đến những vi phạm tác quyền, bản quyền do chúng em gây ra trong quátrình thực hiện (nếu có)

Sinh viên thực hiện

ii

MỤC LỤC

nhận xét của người phản biện ii

MỤC LỤC iii

DANH MỤC CÁC BẢNG vii

DANH MỤC CÁC HÌNH VẼ viii

DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT ix

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH x

MỞ ĐẦU 1

1 Mục tiêu đề tài 1

2 Đối tượng nghiên cứu và phạm vi nghiên cứu 1

a Đối tượng nghiên cứu 1

b Phạm vi nghiên cứu 1

3 Phương pháp nghiên cứu 1

4 Giải pháp công nghệ 1

5 Cấu trúc đồ án 1

Chương 1 CƠ SỞ LÝ THUYẾT 3

1.1 Phần mềm 3

1.1.1 Visual Studio 3

1.2 Công nghệ 4

1.2.1 ASP.NET 4

1.2.2 HTML5 5

1.2.3 AJAX 6

1.2.4 jQuery 7

1.2.5 SQL Server 8

iii

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 9

2.1 Phân tích chức năng 9

2.1.1 Đăng ký 9

2.1.2 Đăng nhập 9

2.1.3 Tìm kiếm bài đăng 9

2.1.4 Cập nhật bài đăng 9

2.1.5 Cập nhật thông tin cá nhân 10

2.1.6 Duyệt bài đăng 10

2.1.7 Quản lý tài khoản 10

2.2 Phân tích chức năng 10

2.2.1 Đăng ký 10

2.2.2 Đăng nhập 10

2.2.3 Tìm kiếm bài đăng 11

2.2.4 Cập nhật bài đăng 11

2.2.5 Cập nhật thông tin cá nhân 11

2.2.6 Duyệt bài đăng 11

2.2.7 Quản lý tài khoản 11

2.3 Sơ đồ USECASE 12

2.3.1 Danh sách các Actor và hành động từng Actor 12

2.3.2 Sơ đồ USECASE của hệ thống 13

2.3.3 Mô tả các USECASE chính 13

2.3.3.1 Usecase cập nhật bài đăng 13

2.3.3.2 Usecase duyệt bài đăng 14

2.3.3.3 Quản lý tài khoản 14

2.4 Sơ đồ hệ thống tuần tự 15

iv

2.4.1 Usecase cập nhật bài đăng 15

2.4.2 Usecase duyệt bài đăng 16

2.5 Sơ đồ quan hệ 17

2.6 Thiết kế cơ sở dữ liệu 17

2.6.1 Bảng AnhDinhKem (Ảnh Đính Kèm) 17

2.6.2 Bảng BaiDang (Bài Đăng) 17

2.6.3 Bảng DangKyNhanLai (Đăng Ký Nhận Lại) 18

2.6.4 Bảng DanhGia (Đánh Giá) 18

2.6.5 Bảng DanhMuc (Danh Mục) 18

2.6.6 Bảng Quyen (Quyền) 19

2.6.7 Bảng TaiKhoan (Tài Khoản) 19

2.6.8 Bảng TheoDoi (Theo Dõi) 20

2.6.9 Bảng TrangThaiBaiDang (Trạng Thái Bài Đăng) 20

2.7 Kết luận chương 2 20

Chương 3 XÂY DỰNG CHƯƠNG TRÌNH 21

3.1 Công cụ xây dựng chương trình 21

3.2 Giao diện chương trình 21

3.2.1 Giao diện đăng ký 21

3.2.2 Giao diện đăng nhập 22

3.2.3 Giao diện Admin 23

3.2.4 Giao diện Danh Mục – Admin 23

3.2.5 Giao diện Tạo Danh Mục – Admin 24

3.2.6 Giao diện Người Dùng – Admin 24

3.2.7 Giao diện Thêm Người Dùng – Admin 25

3.2.8 Giao diện Chi Tiết Tài Khoản – Admin 25

v

3.2.9 Giao diện Chỉnh Sửa Tài Khoản – Admin 26

3.2.10 Giao diện Danh Sách Bài Đăng – Admin 26

3.2.11 Giao diện Chi Tiết Bài Đăng - Admin 27

3.2.12 Giao diện Chỉnh Sửa Bài Đăng – Admin 27

3.2.13 Giao diện Trang Chủ - Người dùng 28

3.2.14 Giao diện Tìm Đồ - Người dùng 29

3.2.15 Giao diện Chi Tiết Bài Đăng – Người dùng 30

3.2.16 Giao diện Đăng Bài – Người dùng 31

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 32

3.3 Kết luận 32

3.3.1 Về mặt lý thuyết 32

3.3.2 Về mặt ứng dụng 32

3.3.3 Thiếu sót 32

3.4 Hướng phát triển 32

TÀI LIỆU THAM KHẢO 33

PHỤ LỤC 34

vi

DANH MỤC CÁC BẢNG

Bảng 2.1: Bảng mô tả usecase 12

Bảng 2.2: Bảng mô tả usecase cập nhật bài đăng 14

Bảng 2.3: Bảng mô tả usecase duyệt bài đăng 14

Bảng 2.4: Bảng mô tả usecase quản lý tài khoản 15

Bảng 2.5: Bảng AnhDinhKem 17

Bảng 2.6: Bảng BaiDang 18

Bảng 2.7: Bảng DangKyNhanLai 18

Bảng 2.8: Bảng DanhGia 18

Bảng 2.9: Bảng DanhMuc 19

Bảng 2.10: Bảng Quyen 19

Bảng 2.11: Bảng TaiKhoan 19

Bảng 2.12: Bảng TheoDoi 20

Bảng 2.13: Bảng TrangThaiBaiDang 20

vii

DANH MỤC CÁC HÌNH VẼ

Hình 1.1: Giao diện Visual Studio 3

Hình 1.2: Hình minh họa ASP.NET 5

Hình 1.3: Hình minh họa HTML5 5

Hình 1.4: Hình minh họa AJAX 6

Hình 1.5: Hình minh họa jQuery 7

Hình 1.6: Hình minh họa SQL Server 8

Hình 2.1: Sơ đồ USECASE hệ thống 13

Hình 2.2: Sơ đồ hệ thống tuần tự Cập nhật bài đăng 16

Hình 2.3: Sơ đồ hệ thống tuần thự Duyệt bài đăng 16

Hình 2.4: Sơ đồ quan hệ dữ liệu 17

Hình 3.1: Giao diện đăng ký 22

Hình 3.2: Giao diện đăng nhập 23

Hình 3.3: Giao diện Admin 24

Hình 3.4: Giao diện Danh Mục – Admin 24

Hình 3.5: Giao diện Tạo Danh Mục – Admin 25

Hình 3.6: Giao diện Người Dùng – Admin 25

Hình 3.7: Giao diện Thêm Người Dùng - Admin 26

Hình 3.8: Giao diện Chi Tiết Tài Khoản – Admin 26

Hình 3.9: Giao diện Chỉnh Sửa Tài Khoản – Admin 27

Hình 3.10: Giao diện Danh Sách Bài Đăng – Admin 27

Hình 3.11: Giao diện Chi Tiết Bài Đăng – Admin 28

Hình 3.12: Giao diện Chỉnh Sửa Bài Đăng – Admin 28

Hình 3.13: Giao diện Trang Chủ - Người dùng 29

Hình 3.14: Giao diện Tìm Đồ - Người dùng 31

Hình 3.15: Giao diện Chi Tiết Bài Đăng – Người dùng 31

Hình 3.16: Giao diện Đăng Bài – Người dùng 32

viii

DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT

Stt Chữ viết tắt Giải nghĩa

1 CNTT Công nghệ thông tin

ix

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH

1 HTML Hyper Text Markup

Language Ngôn ngữ đánh dấu siêu văn bản

2 ERD Entity Relationship Diagram Sơ đồ thực thể quan hệ

x

Xây dựng Website tìm đồ thất lạc tại trường Đại học Sư Phạm Kỹ Thuật Đà Nẵng

MỞ ĐẦU

Tìm đồ thất lạc tại trường Đại học Sư Phạm Kỹ Thuật Đà Nẵng là Website ứngdụng công nghệ thông tin vào mục đích tìm đồ thất lạc, thay thế cách tìm đồ thất lạcthông thường như trước như: Đăng lên Mạng xã hội, báo mất vật cho phòng Công TácSinh Viên,

Tìm đồ thất lạc tại trường Đại học Sư Phạm Kỹ Thuật Đà Nẵng là Website chophép người làm rơi vật có thể đăng bài để tìm lại vật đánh rơi và có thể tìm lại vậtnhanh chóng, người nhặt được có thể tìm lại chính xác chủ nhân để trả lại

1 Mục tiêu đề tài

Xây dựng website tìm đồ thất lại tại trường Đại học Sư phạm Kỹ Thuật Đà Nẵng,cho phép người làm rơi đồ có thể đăng bài tìm lại vật đánh rơi Cho phép người nhặtđược có thể trả lại đúng chủ nhân của nó một cách nhanh nhất

2 Đối tượng nghiên cứu và phạm vi nghiên cứu

a Đối tượng nghiên cứu

Đối tượng của đề tài là cán bộ, nhân viên, giáo viên, sinh viên trong trường Đạihọc Sư Phạm Kỹ Thuật Đà Nẵng

b Phạm vi nghiên cứu

Phạm vi nghiên cứu tại trường Đại học Sư Phạm Kỹ Thuật Đà Nẵng

3 Phương pháp nghiên cứu

- Phương pháp nghiên cứu lý thuyết: thu thập thông tin qua sách, các tài liệu,website để tìm được các cơ sở lý thuyết liên quan vấn đề mình nghiên cứu

- Phương pháp triển khai thực nghiệp: xây dựng website

4 Giải pháp công nghệ

- Ngôn ngữ lập trình: ASP.NET MVC

- Hệ quản trị cơ sở dữ liệu: SQL Server

5 Cấu trúc đồ án

Bài báo cáo ngoài các nội dung gồm phần mở đầu và kết thì có bố cục 3 chương:

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

Xây dựng Website tìm đồ thất lạc tại trường Đại học Sư Phạm Kỹ Thuật Đà Nẵng

Chương ngày trình bày tổng quan về việc sử dụng các phần mềm hỗ trợ xâydựng ứng dụng, các công cụ thương xuyên sử dụng để xây dựng nền tảng cho bài toán

Mô tả một số công nghệ mới hỗ trợ phát triển website

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Chương này trình bày một hướng tiếp cận trong việc phân tích hệ thống Trìnhbày những hướng chức năng cơ bản cho người dùng, sơ đồ cơ sở dữ liệu,…

CHƯƠNG 3: TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ

Trên cơ sở tìm hiểu và phân tích bài toàn liên quan, đặc biệt là các chức năng hệthống từ các phân tích hệ thống và dữ liệu có được, website được hoàn thành

Xây dựng Website tìm đồ thất lạc tại trường Đại học Sư Phạm Kỹ Thuật Đà Nẵng

Chương 1

CƠ SỞ LÝ THUYẾT

1.1 Phần mềm

1.1.1 Visual Studio

Hình 1.1.1.1.1.1: Giao diện Visual Studio

Visual studio là một trong những công cụ hỗ trợ lập trình website rất nổi tiếngnhất hiện nay của Mcrosoft và chưa có một phần mềm nào có thể thay thế được nó.Visual Studio được viết bằng 2 ngôn ngữ đó chính là C# và VB+ Đây là 2 ngôn ngữlập trình giúp người dùng có thể lập trình được hệ thống một các dễ dàng và nhanhchóng nhất thông qua Visual Studio

Visual Studio là một phần mềm lập trình hệ thống được sản xuất trực tiếp từMicrosoft Từ khi ra đời đến nay, Visual Studio đã có rất nhiều các phiên bản sử dụngkhác nhau Điều đó, giúp cho người dùng có thể lựa chọn được phiên bản tương thíchvới dòng máy của mình cũng như cấu hình sử dụng phù hợp nhất

Bên cạnh đó, Visual Studio còn cho phép người dùng có thể tự chọn lựa giao diệnchính cho máy của mình tùy thuộc vào nhu cầu sử dụng

Xây dựng Website tìm đồ thất lạc tại trường Đại học Sư Phạm Kỹ Thuật Đà Nẵng

1.2 Công nghệ

1.2.1 ASP.NET

ASP.NET.là nền tảng ứng dụng Web do Microsoft phát triển cho phép ngườidùng có thể thiết kế các trang web động, ứng dụng web Vè bản chất, ASP.NET là tậpcon của NET Framework, sở hữu mã nguồn mở và kế thừa những tính năng, ưu điểmcủa ASP cổ điển

Nền tảng ASP.NET được xây dựng dựa trên CLR, cho phép nhà phát triển tạolập, thực thi các mã bằng mọi ngôn ngữ NET Nền tảng này được tạo ra nhằm làmviệc với HTML, CSS và JavaScrip, giúp hỗ trợ lập trình viên tạo các website động vàứng dụng web

Không giống NET, ASP.NET chỉ hỗ trợ thiết kế tạo lập các dịch vụ web hoặcứng dụng web Đây cũng là nguyên nhân khiên nó được coi như một tập con của NETFramework

Ưu điểm:

- Có bộ thư viện cực kỳ đa dạng và phong phú, được cung cấp bởi NETFramework nên có nhiều ưu điểm nổi bật Hỗ trợ rất tốt về XML và khả năngtruy cập cơ sở dữ liệu qua ADO.net

- Hoạt động tốt trên nhiều ứng dụng để đảm bảo hiệu suất tốt nhất, cao nhất chowebsite

- Website được lập trình bời ASP.NET hoạt động ổn định hơn, mượt mà hơn, cótốc độ tải trang tốt hơn so với một số loại ngôn ngữ khác

- Khả năng tùy biến của ASP.NET là khá cao, giúp website dễ dàng tương thíchvới các kích thước màn hình, thiết bị truy cập khác nhau

- Cho phép tạo ra các mã HTML một cách tự động cho các server để tạo điềukiện cho website hoạt động tốt trên bất kỳ trình duyệt nào

- Độ bảo mật cao do kế thừa từ Java

- Độ truy xuất dữ liệu cực nhanh, hỗ trợ lưu trữ dung lượng lớn

- Hỗ trợ SEO tốt

Nhược điểm:

- Không hỗ trợ cho các thiết bị sử dụng hệ điều hành Linux

- Không hỗ trợ Visual Studio trong quá trình viết code

Chi phí sử dụng khá cao, không phù hợp cho các doanh nghiệp nhỏ hay cá nhân

Xây dựng Website tìm đồ thất lạc tại trường Đại học Sư Phạm Kỹ Thuật Đà Nẵng

Hình 1.2.1.1.1.1: Hình minh họa ASP.NET

1.2.2 HTML5

HTML5 là một ngôn ngữ lập trình được phát triển trên nền tảng HTML và quantrọng nhất của Word Wide Web (WWW) HTML5 được sử dụng thiết kế và cấu trúccác website, hỗ trợ đa cho các ứng dụng đa phương tiện trên website

Hình 1.2.2.1.1.1: Hình minh họa HTML5Đồng thời, chúng vẫn có những cải tiến hỗ trợ và giúp cho website thân thiện vớingười dụng, thiết bị, các chương trình máy tính, và các trình duyệt web,

Lợi ích của HTML5:

Xây dựng Website tìm đồ thất lạc tại trường Đại học Sư Phạm Kỹ Thuật Đà Nẵng

- Sự tương tích với các trang web đang tồn tại

- Chuẩn hóa các kỹ thuật không chính thức

- Tăng khả năng phục hồi đa phương tiện

Ưu thế của HTML5:

- Đối với lập trình viên:

o Không cần tạo cookies

o Có thể tùy chỉnh Data Attributes

o Menu Element

o Thuận tiện khi thiết kế web mobile

o Tăng tương thích cho ứng dụng web

- Đối với người dùng:

o Nâng cao trải nghiệm trên di động

Thân thiện hơn với người dùng

1.2.3 AJAX

AJAX là viết tắt của tụm từ Asynchronous Javascript and XML AJAX làphương thức trao đổi dữ liệu với máy chủ và cập nhật một hay nhiều phần của trangweb, hoàn toàn không reload lại toàn bộ trang

Ajax được viết bằng Javascript chạy trên client, tức là mỗi browser sẽ chạy độclập hoàn toàn không ảnh hưởng lẫn nhau Về mặt kỹ thuật, nó sẽ đề cập đến việc sửdụng các đối tượng XmlHttpRequest để tương tác với một máy chủ web thông quaJavascript

Xây dựng Website tìm đồ thất lạc tại trường Đại học Sư Phạm Kỹ Thuật Đà Nẵng

Hình 1.2.3.1.1.1: Hình minh họa AJAXLợi ích mà AJAX mang lại:

- AJAX được sử dụng để thực hiện một callback Được dùng để thực hiện việctruy xuất dữ liệu hoặc lưu trữ dữ liệu mà không cần phải reload lại toàn bộtrang web Với những server nhỏ thì việc này cũng tiết kiệm được băng thôngcho chúng ta hơn

- Cần gì thì chỉ gửi dữ liệu phần đó, load lại 1 phần nhỏ để cập nhật thông tin chứkhông load cả trang Bằng cách này thì có thể giảm thiểu được tốc độ tải tranggiúp người dùng có trải nghiệm tốt hơn

- Trang web tạo ra cũng sẽ đa dạng và động hơn

Xây dựng Website tìm đồ thất lạc tại trường Đại học Sư Phạm Kỹ Thuật Đà Nẵng

Hình 1.2.4.1.1.1: Hình minh họa jQuery

jQuery cung cấp API giúp duyệt tài liệu HTML, hoạt ảnh, sự kiện và thao tácAJAX đơn giản hơn jQuery hoạt động tốt trên nhiều loại trình duyệt khác nhau Mộttrong những đối thủ năng ký của jQuery đó là JS Framework

1.2.5 SQL Server

Hình 1.2.5.1.1.1: Hình minh họa SQL Server