xây dựng phần mềm quản lý công việc cá nhân giúp tập trung hơn bằng phương pháp podomoro trên nền web

TRƯỜNG ĐẠI HỌC TÀI NGUYÊN VÀ MÔI TRƯỜNG HÀ NỘIKHOA CÔNG NGHỆ THÔNG TIN

NGUYỄN MINH QUÂN

XÂY DỰNG PHẦN MỀM QUẢN LÝ CÔNG VIỆC CÁ NHÂN GIÚP TẬPTRUNG HƠN BẰNG PHƯƠNG PHÁP PODOMORO TRÊN NỀN WEB

Chuyên ngành: Công nghệ thông tinMã ngành: 7480210

NGƯỜI HƯỚNG DẪN: ThS Trương Mạnh Đạt

Hà Nội – Năm 2024

LỜI CAM ĐOAN

Những nội dung trong đồ án tốt nghiệp này là thành quả từ sự nghiên cứu vàđược thực hiện dưới sự trực tiếp hướng dẫn của giảng viên hướng dẫn ThS TrươngMạnh Đạt

Khóa luận tốt nghiệp được thực hiện hoàn toàn mới, là thành quả của riêng em,không sao chép theo bất cứ đồ án tương tự nào Mọi sự tham khảo sử dụng trong đồ ánđều được trích dẫn các nguồn tài liệu trong báo cáo và danh mục tài liệu tham khảo.

Mọi sao chép không hợp lệ, vi phạm quy chế của nhà trường, em xin hoàn toànchịu trách nhiệm

Giảng viên hướng dẫn Sinh viên thực hiện

LỜI CẢM ƠN

Để hoàn thành được đề tài đồ án tốt nghiệp này, trước hết em xin gửi lời cảm ơnchân thành nhất đến các Cán bộ Giảng viên Khoa Công nghệ Thông tin, các cán bộgiảng viên trong Trường Đại học Tài nguyên Môi trường Hà Nội đã tận tình giảng dạyvà truyền đạt kiến thức cho em Đồng thời em xin gửi lời cảm ơn đặc biệt về sự chỉdạy, hướng dẫn tận tình của ThS Trương Mạnh Đạt đã luôn tận tình hướng dẫn, giúpđỡ em trong suốt thời gian thực hiện đồ án.

Em cũng xin gửi lời cảm ơn tới Khoa Công nghệ Thông tin – Trường Đại HọcTài nguyên Môi trường Hà Nội đã luôn quan tâm và tạo điều kiện giúp em hoàn thànhđề tài khóa luận tốt nghiệp này Ngoài ra, em xin cảm ơn những người bạn đã giúp đỡvà trao đổi thêm nhiều thông tin về đề tài trong quá trình thực hiện đề tài này.

Cuối cùng em vô cùng biết ơn gia đình và bạn bè, những người đã luôn luôn ở bêncạnh em, động viên, chia sẻ với em trong suốt thời gian thực đề tài luận án tốt nghiệp “

XÂY DỰNG PHẦN MỀM QUẢN LÝ CÔNG VIỆC CÁ NHÂN GIÚP TẬPTRUNG HƠN BẰNG PHƯƠNG PHÁ PODOMORO TRÊN NỀN WEB”.

Do kiến thức còn hạn chế, bài báo cáo của em không tránh khỏi những sai sót.Rất mong nhận được những lời góp ý từ quý Thầy cô để đồ án tốt nghiệp của em đượchoàn thiện và giúp em có thêm những kinh nghiệm quý báu.

Cuối cùng, em xin kính chúc các thầy cô giảng viên trường Đại học Tài nguyênvà Môi trường Hà Nội nói chung, các thầy cô khoa công nghệ thông tin nói riêng dồidào sức khỏe và thành công trong sự nghiệp cao quý

1.1 Mục tiêu của đề tài 2

1.2 Phương pháp nghiên cứu đề tài 3

1.3 Công nghệ sử dụng 4

1.4 Kết quả đạt được (dự kiến) 18

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ 20

2.1 PHÂN TÍCH BIỂU ĐỒ USECASE TỔNG QUÁT CỦA HỆ THỐNG 20

2.2 ĐẶC TẢ USECASE 21

2.3 TRÌNHBÀYCHỨCNĂNG 48

2.4 CƠSỞDỮLIỆU MYSQL 48

CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG 51

3.1 GIAODIỆNKHÁCHVÃNGLAI 51

3.2 GIAODIỆNNGƯỜIDÙNG (ĐÃĐĂNGNHẬP) 52

3.3 GIAO DIỆN RESPONSIVE TRÊN MOBILE 63

DANH MỤC CÁC CHỮ VIẾT TẮT

PHP Personal Home Page(Hypertext Preprocessor)

Bộ tiền xử lý siêu văn bản

HTML Hyper Text Markup Language Ngôn ngữ Đánh dấu Siêu Vănbản

CSS Cascading Style Sheets Tập tin Định kiểu Xếp chồng

JS JavaScript Ngôn ngữ lập trình JavaScript

MVC Model-View-Controller Mô hình – giao diện – điềukhiển

ORM Object Relational Mapping Ánh xạ Đối tượng-Quan hệ

IDE Integrated DevelopmentEnvironment

Môi trường Phát triển Tích hợp

DOM Document Object Model Mô hình Đối tượng Tài liệu"

ERD Entity Relationship Diagram Sơ đồ Quan hệ Thực thể

AJAX Asynchronous JavaScript andXML

JavaScript và XML

2.1 1 BIỂU ĐỒ TỔNG QUÁT USECASE TỔNG QUÁT 20

2.1 2 BIỂU ĐỒ PHÂN RÃ QUẢN LÝ TASKS 20

2.1 3 BIỂU ĐỒ PHÂN RÃ THỐNG KÊ TASKS 21

2.1 4 BIỂU ĐỒ PHÂN RÃ QUẢN LÝ TÀI KHOẢN 21

2.1 5 BIỂU ĐỒ PHÂN RÃ QUẢN LÝ DANH MỤC TASKS 21

2.2 1 ĐẶC TẢ USECASE ĐĂNG KÝ 24

2.2 2 ĐẶC TẢ USECASE “ĐĂNG NHẬP” 27

2.2 3 ĐẶC TẢ USERCASE “THÊM TASK” 28

2.2 4 ĐẶC TẢ USECASE “SỬA TASK” 30

2.2 5 ĐẶC TẢ USECASE “HOÀN THÀNH TASK” 31

2.2 6 ĐẶC TẢ USECASE “XÓA TASK” 32

2.2 7 ĐẶC TẢ USECASE “HIỂN THỊ THÔNG TIN THỐNG KÊ” 33

2.2 8 ĐẶC TẢ USECASE “ĐĂNG XUẤT” 34

2.2 9 ĐẶC TẢ USECASE “ĐỔI TÊN TÀI KHOẢN” 36

2.2 10 ĐẶC TẢ USECASE “ĐỔI MẬT KHẨU” 38

2.2 11 ĐẶC TẢ USECASE “HIỂN THỊ TASKS NGÀY HÔM NAY” 39

2.2 12 ĐẶC TẢ USECASE “HIỂN THỊ TASKS TRONG NGÀY MAI” 40

2.2 13 ĐẶC TẢ USECASE “HIỂN THỊ TASKS TRONG TUẦN NÀY” 41

2.2 14 ĐẶC TẢ USECASE “HIỂN THỊ TASKS TRONG THÁNG” 42

2.2 15 ĐẶC TẢ USECASE “HIỂN THỊ TASKS ĐÃ HOÀN THÀNH” 43

2.2 16 ĐẶC TẢ USECASE “HIỂN THỊ TASKS THEO FOLDER” 44

2.2 17 ĐẶC TẢ USECASE “TẠO FOLDER” 45

2.2 18 ĐẶC TẢ USECASE “THÊM PROJECT” 47

2.2 19 ĐẶC TẢ USECASE “THÊM TAG” 48

2.4 1 CƠ SỞ DỮ LIỆU TỔNG QUÁT 49

2.4 2 CƠ SỞ DỮ LIỆU BẢNG TASKS 50

2.4 3 CƠ SỞ DỮ LIỆU BẢNG USERS 50

2.4 4 CƠ SỞ DỮ LIỆU BẢNG FOLDERS 50

2.4 5 CƠ SỞ DỮ LIỆU BẢNG PROJECTS 51

2.4 6 CƠ SỞ DỮ LIỆU BẢNG TAGS 51

2.4 7 CƠ SỞ DỮ LIỆU BẢNG TAGS_TASKS 52

3.1 1 GIAO DIỆN KHÁCH VÃNG LAI ĐĂNG NHẬP, ĐĂNG KÝ 52

3.1 2 GIAO DIỆN KHÁCH VÃNG LAI ĐĂNG NHẬP 53

3.1 3 GIAO DIỆN KHÁCH VÃNG LAI ĐĂNG KÝ 53

3.1 4 GIAO DIỆN TRANG HOME 54

3.1 5 GIAO DIỆN TRANG TODAY 54

3.1 6 GIAO DIỆN TOMORROW 55

3.1 7 GIAO DIỆN THISWEEK 55

3.1 8 GIAO DIỆN PLANNED 56

3.1 9 GIAO DIỆN TASKCOMPLETED 56

3.1 10 GIAO DIỆN FOLDER 57

3.1 11 GIAO DIỆN PROJECT 57

3.1 12 GIAO DIỆN PROJECT 58

3.1 13 GIAO DIỆN SỬA TASK 58

3.1 14 GIAO DIỆN SỬA FOLDER 59

3.1 15 GIAO DIỆN THÊM FOLDER 59

3.1 16 GIAO DIỆN THÊM PROJECT 60

3.1 17 GIAO DIỆN THÊM TAG 60

3.1 18 GIAO DIỆN SỬA NGƯỜI DÙNG 61

3.1 19 GIAO DIỆN CHƯA BẮT ĐẦU PODOMORO 61

3.1 20 GIAO DIỆN ĐÃ BẮT ĐẦU PODOMORO 62

3.1 21 GIAO DIỆN TẠM DỪNG PODOMORO 62

3.1 22 GIAO DIỆN PODOMORO NGHỈ 63

3.1 23 THÔNG BÁO PHIÊN NGHỈ 63

LỜI MỞ ĐẦU

Trong bối cảnh cuộc sống hiện đại đầy bận rộn và áp lực công việc ngày càng gia tăng,việc quản lý thời gian hiệu quả trở thành một thách thức lớn đối với nhiều người.Chính vì vậy, các phương pháp quản lý thời gian và tăng cường sự tập trung đã nhậnđược sự quan tâm đặc biệt Một trong những phương pháp nổi bật và được nhiều ngườisử dụng là phương pháp Pomodoro, một kỹ thuật quản lý thời gian đơn giản nhưngmang lại hiệu quả cao trong việc nâng cao hiệu suất làm việc và giảm thiểu căng thẳng.Phần mềm quản lý công việc cá nhân bằng phương pháp Pomodoro trên nền web rađời nhằm mục đích hỗ trợ người dùng tối ưu hóa thời gian làm việc, nâng cao khả năngtập trung và cải thiện hiệu suất công việc Với giao diện thân thiện, dễ sử dụng và tíchhợp các tính năng thông minh, phần mềm này không chỉ giúp người dùng lập kế hoạchcông việc một cách khoa học mà còn tạo điều kiện thuận lợi cho việc theo dõi tiến độvà đánh giá hiệu quả làm việc

Khóa luận này sẽ trình bày chi tiết về quá trình phát triển, các tính năng chính và lợi ích của phần mềm quản lý công việc cá nhân bằng phương pháp Pomodoro trên nền web Qua đó, chúng tôi hy vọng sẽ mang đến cho người dùng một công cụ hữu ích, góp phần nâng cao chất lượng công việc và cuộc sống.

CHƯƠNG 1: TỔNG QUAN DỰ ÁN1.Lý do chọn đề tài

Trong thời đại hiện đại, với cuộc sống đầy bận rộn và các yêu cầu công việcngày càng tăng, việc quản lý thời gian và tập trung vào công việc trở thành một tháchthức lớn đối với nhiều người Dưới đây là một lý do để chọn đề tài này:

Tối ưu hóa hiệu suất làm việc:

Phương pháp Pomodoro đã được chứng minh là một phương pháp hiệu quảgiúp người dùng tập trung vào công việc trong thời gian ngắn và nghỉ ngơi đúng cáchđể duy trì sự tập trung và hiệu quả công việc

Xây dựng một phần mềm quản lý công việc cá nhân dựa trên phương pháp Pomodorotrên nền web sẽ cung cấp cho người dùng một công cụ để tự quản lý thời gian và tăngcường hiệu suất làm việc cá nhân

Bằng cách tích hợp các tính năng như đặt mục tiêu công việc, theo dõi thời gianlàm việc và thời gian nghỉ, phần mềm này sẽ giúp người dùng phân chia thời gian mộtcách hợp lý và tối ưu hóa quá trình làm việc của họ

Với đề tài này, không chỉ đáp ứng nhu cầu cá nhân mà còn cung cấp một giải pháp hữuích và hiệu quả cho mọi người trong việc quản lý công việc và thời gian trong một môitrường công nghệ 4.0

Từ những lý do trên, em quyết định chọn đề tài “Xây dựng phần mềm quản lýcông việc cá nhân giúp tập trung hơn bằng phương pháp Podomoro trên nềnweb” để làm đồ án tốt nghiệp với mong muốn dùng những kiến thức đã học trong quá

trình học tập tại trường để xây dựng một sản phẩm có thể được ứng dụng và phát triểntrong công việc sau này.

1.1 Mục tiêu của đề tài

- Mục tiêu chung: Tạo ra một ứng dụng web đơn giản và hiệu quả, tích hợp các tínhnăng cơ bản và hiệu quả

- Mục tiêu cụ thế: xây dựng một phần mềm quản lý công việc cá nhân trên nền web,tập trung vào việc sử dụng phương pháp Pomodoro để tăng cường khả năng tập trungvà hiệu suất làm việc của người dùng

Phần mềm sẽ được thiết kế với giao diện thân thiện, dễ sử dụng và tối ưu hóa để ngườidùng có thể tập trung vào công việc mà không gặp phải các rắc rối về giao diện Xâydựng các tính năng cần thiết để người dùng có thể đặt mục tiêu, theo dõi thời gian làmviệc và nghỉ ngơi theo chu kỳ Pomodoro.

1.2 Phương pháp nghiên cứu đề tài

- Phương pháp nghiên cứu lý thuyết: Nghiên cứu các tài liệu về lập trình PHP, HTML,CSS, Javascript,

Nghiên cứu hệ quản trị cơ sở dữ liệu “MySQL”

Nghiên cứu các Framework: Laravel, Jquery, Bootstrap, Ajax

- Phương pháp tổng hợp: Chia thời gian thành các khoảnh khắc Pomodoro: Mỗikhoảnh khắc Pomodoro thường kéo dài khoảng 25 phút Trong thời gian này, bạn tậptrung hoàn toàn vào một công việc cụ thể mà không được gián đoạn

Ngắt nghỉ sau mỗi Pomodoro: Sau mỗi khoảnh làm việc, bạn nên nghỉ ngơi trong 5-10phút Điều này giúp làm sảng khoái tinh thần và chuẩn bị cho Pomodoro tiếp theo Sau mỗi bốn Pomodoro, nghỉ dài hơn: Sau khi đã hoàn thành bốn Pomodoro liên tục,nghỉ ngơi lâu hơn, từ 15-30 phút

Phương pháp Pomodoro giúp cải thiện sự tập trung và hiệu suất làm việc bằng cáchphân chia thời gian thành các khoảnh khắc nhỏ và tập trung hoàn toàn vào công việctrong thời gian đó Đồng thời, nó cũng giúp giảm căng thẳng và mệt mỏi thông qua cáckhoảng thời gian nghỉ ngơi định kỳ

Nắm vững các nguyên tắc và quy trình của phương pháp Pomodoro Hiểu rõ lợi ích vàcách áp dụng Pomodoro để tăng hiệu suất làm việc, từ đó xây dựng các quy trình củahệ thống cần triển khai

- Phương pháp thực nghiệm: lập trình, chạy thử website để kiểm tra kết quả.

1.3 Công nghệ sử dụng

1.3.1 Giới thiệu phương pháp pomodoro

Phương pháp Pomodoro là một kỹ thuật quản lý thời gian được phát triển bởiFrancesco Cirillo vào cuối những năm 1980 Tên gọi "Pomodoro" xuất phát từ tiếng Ý,nghĩa là "cà chua," và được đặt tên như vậy vì Cirillo đã sử dụng một chiếc đồng hồbếp hình quả cà chua khi phát triển phương pháp này

- Phương pháp Pomodoro hoạt động như sau:

1 Chọn một công việc cụ thể: Chọn một nhiệm vụ mà bạn muốn hoàn thành

2 Đặt hẹn giờ Pomodoro: Đặt hẹn giờ trong 25 phút Đây được gọi là một"Pomodoro"

3 Làm việc trong suốt Pomodoro: Tập trung hoàn toàn vào công việc trong 25 phútđó Không được gián đoạn

4 Nghỉ ngắn: Khi hẹn giờ kêu, bạn nghỉ ngắn khoảng 5 phút

5 Lặp lại: Sau bốn lần Pomodoro (khoảng 100 phút làm việc), bạn nên nghỉ dài hơn từ15-30 phút để thư giãn

- Lợi ích của phương pháp Pomodoro:

1 Tăng cường sự tập trung: Kỹ thuật này khuyến khích bạn tập trung hoàn toàn vàocông việc mà không bị gián đoạn, giúp tăng hiệu suất làm việc.

2 Quản lý thời gian tốt hơn: Pomodoro giúp bạn nhận biết rõ ràng về thời gian bạndành cho mỗi nhiệm vụ, từ đó có thể điều chỉnh kế hoạch công việc một cách hợp lýhơn

3 Giảm căng thẳng và mệt mỏi: Việc chia nhỏ thời gian làm việc và nghỉ ngơi định kỳgiúp ngăn ngừa mệt mỏi và giữ tinh thần luôn tỉnh táo.

4 Khuyến khích hoàn thành công việc: Việc chia nhỏ nhiệm vụ thành các Pomodorogiúp bạn cảm thấy việc hoàn thành công việc dễ dàng và đạt được những thành tựunhỏ trong suốt quá trình làm việc

- Ứng dụng Pomodoro trong quản lý công việc cá nhân:

1 Lập kế hoạch công việc: Bạn có thể chia nhỏ các nhiệm vụ lớn thành các Pomodoronhỏ để dễ quản lý và thực hiện

2 Ưu tiên công việc: Dựa trên số lượng Pomodoro cần thiết cho mỗi nhiệm vụ, bạn cóthể xác định được mức độ ưu tiên của từng công việc

3 Theo dõi tiến độ: Ghi chép lại số lượng Pomodoro mà bạn đã hoàn thành giúp bạn

Phương pháp Pomodoro là một công cụ hiệu quả để cải thiện khả năng quản lý côngviệc cá nhân, giúp bạn tập trung và nâng cao năng suất làm việc.

-Model (Mô hình): Model là thành phần chịu trách nhiệm về xử lý dữ liệu, baogồm các hoạt động như truy vấn cơ sở dữ liệu, xác thực dữ liệu và thực hiện các logickinh doanh Trong Laravel, các model thường tương ứng với các bảng trong cơ sở dữliệu và được sử dụng để tương tác với dữ liệu trong các bảng đó thông qua các truy vấnEloquent ORM

-View (Giao diện người dùng): View là phần giao diện người dùng mà ngườidùng thấy và tương tác Trong Laravel, các view thường là các file blade template,

chứa mã HTML và các biểu thức blade (blade expressions) để hiển thị dữ liệu từcontroller hoặc model

-Controller (Bộ điều khiển): Controller là nơi chứa logic điều khiển và chịutrách nhiệm nhận các yêu cầu từ người dùng thông qua các route và sau đó quyết địnhcách xử lý yêu cầu đó Controller sẽ tương tác với model để lấy hoặc lưu trữ dữ liệu vàtrả về view tương ứng cho người dùng.

Trong Laravel, các thành phần này được tổ chức theo cấu trúc mặc định củaframework, với các model được đặt trong thư mục app/Models, các view được đặttrong thư mục resources/views, và các controller được đặt trong thư mụcapp/Http/Controllers

Cấu trúc thư mục và các tập tin này giúp dễ dàng quản lý mã nguồn và làm cho việcphát triển ứng dụng Laravel trở nên cấu trúc hơn và dễ bảo trì hơn.

Dưới đây là một số ưu và nhược điểm của việc sử dụng mô hình MVC trongLaravel:

- Ưu điểm:

1 Tổ chức mã nguồn rõ ràng: Mô hình MVC tách biệt logic dữ liệu, giao diện và

điều khiển, giúp tổ chức mã nguồn trở nên rõ ràng và dễ bảo trì

2 Tính tái sử dụng cao: Các thành phần của mô hình MVC có thể được tái sử dụng

dễ dàng Ví dụ, một model có thể được sử dụng trong nhiều controller hoặc một viewcó thể được sử dụng trong nhiều controller

3 Phân chia trách nhiệm: Mô hình này phân chia các trách nhiệm của ứng dụng một

cách rõ ràng, giúp làm cho mã nguồn dễ đọc và dễ hiểu hơn

4 Hiệu suất: Bằng cách phân tách các phần khác nhau của ứng dụng, mô hình MVC

có thể giúp tăng hiệu suất phát triển và làm cho quá trình kiểm thử và bảo trì dễ dànghơn

-Nhược điểm:

1 Độ phức tạp: Mô hình MVC có thể tạo ra một cấu trúc phức tạp đối với các ứng

dụng nhỏ hoặc đơn giản Việc tạo ra các thành phần riêng biệt có thể tăng độ phức tạpcủa mã nguồn.

2 Khả năng phát triển: Đôi khi việc phát triển với mô hình MVC có thể mất thời

gian hơn so với các phương pháp phát triển không phân chia rõ ràng trách nhiệm.

3 Khó khăn trong việc theo dõi luồng điều khiển: Trong một ứng dụng lớn, có thể

khó khăn để theo dõi các luồng điều khiển giữa các controller và các hành động(actions) của chúng

Tuy nhiên, với sự phát triển của framework và sự hiểu biết về các nguyên tắc thiết kế,việc sử dụng mô hình MVC trong Laravel thường mang lại nhiều lợi ích hơn là nhượcđiểm.

1.3.3 Php Storm (IDE)

Hình 1.3.2 PHP Storm

PhpStorm là một Integrated Development Environment (IDE) được phát triển bởiJetBrains, được thiết kế đặc biệt cho việc phát triển ứng dụng PHP Đây là một côngcụ mạnh mẽ và linh hoạt cho các nhà phát triển PHP, cung cấp một loạt các tính năng

và công cụ để tăng hiệu suất và chất lượng của quy trình phát triển phần mềm Ưuđiểm của PhpStorm:

1.Hỗ trợ PHP toàn diện: PhpStorm cung cấp hỗ trợ toàn diện cho PHP, bao gồm cả

các phiên bản mới nhất của ngôn ngữ và các framework phổ biến như Laravel,Symfony, Zend, và Yii

2.Tích hợp với các công cụ quản lý phiên bản: PhpStorm tích hợp sẵn với các hệ

thống quản lý phiên bản phổ biến như Git, SVN, và Mercurial, giúp cho quá trình làmviệc nhóm trở nên dễ dàng hơn

3.Tích hợp với các công cụ phát triển Frontend: Ngoài việc hỗ trợ PHP, PhpStorm

còn cung cấp các tính năng và công cụ cho phát triển frontend, bao gồm HTML, CSS,và JavaScript

4.Refactoring và debugging mạnh mẽ: PhpStorm cung cấp các công cụ mạnh mẽ cho

việc tái cấu trúc mã và gỡ lỗi, giúp cho việc duy trì mã nguồn trở nên dễ dàng hơn

5 Cộng đồng lớn: PhpStorm có một cộng đồng người dùng lớn, điều này có nghĩa là

bạn có thể dễ dàng tìm thấy tài liệu, hướng dẫn và plugin để mở rộng khả năng củaPhpStorm

Nhược điểm của PhpStorm:

1 Giá cả: PhpStorm là một sản phẩm thương mại, vì vậy giá của nó có thể là một rào

cản đối với các nhà phát triển cá nhân hoặc các dự án nhỏ

2 Tài nguyên hệ thống: PhpStorm yêu cầu một số tài nguyên hệ thống khá cao, đặc

biệt là khi làm việc trên các dự án lớn

3 Thời gian học: Do có nhiều tính năng và công cụ, việc học và làm quen với

PhpStorm có thể mất một thời gian đáng kể, đặc biệt là đối với người mới bắt đầu Tuy nhiên, mặc dù có nhược điểm như trên, PhpStorm vẫn được xem là một trongnhững IDE hàng đầu cho việc phát triển PHP, nhờ vào sự linh hoạt, mạnh mẽ và hỗ trợtốt từ cộng đồng người dùng.

1.3.4 Giới thiệu về HTML, HTML5

Hình 1.3.2 HTML,HTML5

HTML (Hypertext Markup Language) là một ngôn ngữ đánh dấu được sử dụng đểxây dựng và hiển thị các trang web trên Internet HTML định nghĩa cấu trúc cơ bảncủa một trang web bằng cách sử dụng các thẻ (tags) để đánh dấu các phần khác nhaucủa nội dung, chẳng hạn như tiêu đề, đoạn văn bản, hình ảnh, liên kết, và nhiều phầnkhác.

HTML5 là một phiên bản cập nhật của HTML, được thiết kế để mang lại nhiềutính năng mới và cải thiện hiệu suất so với các phiên bản trước đó Dưới đây là một sốđiểm nổi bật của HTML5:

Hỗ trợ đa phương tiện: HTML5 giới thiệu các phần tử như <audio> và <video> đểhỗ trợ chơi audio và video trực tiếp trên trình duyệt mà không cần sử dụng các pluginbổ sung.

Canvas và SVG: HTML5 mang đến hai định dạng đồ họa mới là <canvas> và<svg> <canvas> cho phép vẽ đồ họa và thực hiện các hiệu ứng đồ họa thông quaJavaScript, trong khi <svg> là một ngôn ngữ XML để mô tả đồ họa vector.

Hỗ trợ Local Storage: HTML5 cung cấp khả năng lưu trữ dữ liệu trên máy ngườidùng thông qua local storage, giúp tăng cường khả năng làm việc offline của ứng dụngweb.

Hỗ trợ các API mới: HTML5 đi kèm với nhiều API mới như Geolocation API đểxác định vị trí của người dùng, WebSockets để tạo kết nối thời gian thực, và nhiều APIkhác nữa.

Semantic Markup: HTML5 giới thiệu các thẻ mới như <header>, <footer>,<article>, <section>,… để tạo ra mã nguồn HTML có ý nghĩa hơn và giúp công cụ tìmkiếm và đọc hiểu nội dung trang web tốt hơn.

HTML5 đã trở thành một tiêu chuẩn cho phát triển web và được hỗ trợ rộng rãi trêncác trình duyệt hiện đại, mang lại trải nghiệm người dùng đa dạng và mạnh mẽ.

1.3.5 Giới thiệu về Css3

Hình 1.3.3 Css

CSS (Cascading Style Sheets) là một ngôn ngữ được sử dụng để mô tả cách mà cácphần tử HTML sẽ được hiển thị trên màn hình, giúp kiểm soát định dạng và trang trícho trang web CSS3 là phiên bản cập nhật của CSS, mang lại nhiều tính năng và khảnăng mới so với các phiên bản trước đó Dưới đây là một số điểm nổi bật của CSS3:

Border-radius và Box-shadow: CSS3 giới thiệu khả năng làm tròn góc cho cácphần tử với thuộc tính border-radius và thêm đổ bóng cho các phần tử bằng cách sửdụng box-shadow Điều này giúp tạo ra giao diện trang web với các yếu tố thiết kếhiện đại.

Gradient: CSS3 cho phép sử dụng gradient màu cho nền của các phần tử, thay vìchỉ sử dụng một màu đơn Điều này tạo ra hiệu ứng màu sắc đẹp mắt và đa dạng hơn.

Transitions và Animations: CSS3 cung cấp các thuộc tính như transition vàanimation để tạo hiệu ứng chuyển động và thay đổi trạng thái một cách mượt mà Điềunày giúp tăng cường trải nghiệm người dùng và làm cho trang web trở nên sống độnghơn.

Flexbox và Grid Layout: CSS3 cung cấp các công cụ mạnh mẽ như Flexbox vàGrid Layout để dễ dàng quản lý và tổ chức bố cục trang web Cả hai đều giúp xâydựng giao diện đáp ứng và linh hoạt hơn.

Media Queries: Được sử dụng chủ yếu trong responsive web design, CSS3 giúpthiết lập điều kiện để điều chỉnh kiểu dáng của trang web dựa trên các đặc điểm củathiết bị hoặc màn hình, như kích thước màn hình hay loại thiết bị.

Custom Fonts: CSS3 cho phép sử dụng các font tùy chỉnh từ các nguồn bên ngoài,giúp tăng khả năng sáng tạo trong thiết kế typographic.

CSS3 đã trở thành một tiêu chuẩn quan trọng trong phát triển web hiện đại và cungcấp cho nhà phát triển nhiều công cụ và tính năng để tạo ra giao diện trang web đẹpmắt và linh hoạt.

1.3.6 Giới thiệu về PHP

Hình 1.3.4 PHP

PHP là một ngôn ngữ lập trình mã nguồn mở, phổ biến được sử dụng chủ yếu chophát triển ứng dụng web Được tạo ra bởi Rasmus Lerdorf và phát triển từ năm 1994,PHP ban đầu là viết tắt của “Personal Home Page,” sau đó là "PHP: HypertextPreprocessor." PHP được thiết kế với mục đích chính là xây dựng các trang web độngvà mạng lưới

Một trong những điểm mạnh của PHP là tích hợp dễ dàng với HTML, giúp nhàphát triển tạo ra các trang web động và tương tác một cách hiệu quả Nó hỗ trợ nhiềucơ sở dữ liệu phổ biến, như MySQL, và có thể tích hợp linh hoạt với nhiều loại máychủ web.

PHP cũng tập trung vào việc tách biệt các thành phần của ứng dụng để dễ dàng quảnlý và bảo trì Nó cung cấp khả năng tương tác mạnh mẽ với cơ sở dữ liệu, cho phép xửlý dữ liệu và tạo ra trang web động dựa trên yêu cầu của người dùng Với PHP, nhữngtính năng như tích hợp dễ dàng, khả năng kết hợp với HTML, và sự linh hoạt trong xửlý dữ liệu, giúp người phát triển xây dựng ứng dụng web một cách thuận tiện và hiệuquả.

1.3.7 Giới thiệu về Javascript

Hình 1.3.5 JavaScript

JavaScript là một ngôn ngữ lập trình đa năng, dùng để xây dựng ứng dụng webtương tác, giúp thêm động lực và tính năng đặc biệt cho trang web Dưới đây là mộttổng quan về ngôn ngữ lập trình JavaScript:

Back-end Development: Với sự xuất hiện của Node.js, JavaScript cũng được sửdụng để xây dựng phần server của ứng dụng web.

Thực thi trên trình duyệt:

JavaScript chủ yếu thực thi trên trình duyệt web, cho phép tương tác với DOM(Document Object Model) để thay đổi nội dung và cấu trúc của trang web mà khôngcần phải tải lại trang.

MySQL, MySQL Workbench cung cấp một loạt các tính năng mạnh mẽ để làm việcvới cơ sở dữ liệu

Dưới đây là một số tính năng chính của MySQL Workbench:

1 Thiết kế và quản lý cơ sở dữ liệu: MySQL Workbench cung cấp một giao diện đồ

họa để thiết kế và quản lý cơ sở dữ liệu MySQL Người dùng có thể tạo, chỉnh sửa vàxóa các bảng, chỉ mục, khóa ngoại và các đối tượng cơ sở dữ liệu khác một cách dễdàng

2 Truy vấn dữ liệu: MySQL Workbench cung cấp một trình truy vấn SQL tích hợp,

cho phép người dùng thực hiện các truy vấn phức tạp và xem kết quả trong một giaodiện người dùng đồ họa

3 Tối ưu hóa và xử lý dữ liệu: MySQL Workbench cung cấp các công cụ để tối ưu

hóa cơ sở dữ liệu, bao gồm kiểm tra và sửa chữa bảng, phân tích hiệu suất và xem cácthống kê về cơ sở dữ liệu

4 Sao lưu và khôi phục dữ liệu: MySQL Workbench cho phép người dùng tạo sao

lưu và khôi phục dữ liệu một cách dễ dàng, bao gồm cả sao lưu toàn bộ cơ sở dữ liệuhoặc chỉ một phần

5 Quản lý người dùng và quyền truy cập: MySQL Workbench cho phép người

quản trị quản lý người dùng, vai trò và quyền truy cập của họ vào cơ sở dữ liệu

6 Đồ họa ERD (Entity-Relationship Diagrams): MySQL Workbench cung cấp công

cụ để tạo và quản lý biểu đồ mối quan hệ thực thể (ERD), giúp người dùng hiểu vàquản lý cấu trúc của cơ sở dữ liệu một cách trực quan

MySQL Workbench là một công cụ mạnh mẽ và linh hoạt cho việc quản lý cơ sở dữliệu MySQL, giúp người dùng tăng cường hiệu suất và năng suất trong quá trình pháttriển và quản lý cơ sở dữ liệu.

1.3.9 Giới thiệu về Bootstrap

Hình 1.3.7 Bootsrap

Bootstrap là một framework front-end mã nguồn mở phổ biến được sử dụng để pháttriển các trang web và ứng dụng web responsive và hiện đại Nó được tạo ra và duy trìbởi nhóm phát triển của Twitter và đã trở thành một công cụ quan trọng cho các nhàphát triển web trên khắp thế giới

Dưới đây là một số điểm nổi bật về Bootstrap:

1 Grid System: Bootstrap cung cấp một hệ thống lưới linh hoạt, dựa trên cơ sở của 12

cột, giúp người phát triển dễ dàng tạo ra các trang web có cấu trúc đồng nhất vàresponsive trên nhiều loại thiết bị và kích thước màn hình khác nhau

2 CSS và Components: Bootstrap cung cấp một bộ CSS và các thành phần giao diện

người dùng sẵn có, bao gồm nút, biểu mẫu, thanh điều hướng, tiện ích, tooltip, popovervà nhiều hơn nữa Điều này giúp người phát triển tiết kiệm thời gian và công sức trongviệc tạo ra giao diện trực quan và chuyên nghiệp

3 JavaScript Plugins: Bootstrap đi kèm với các plugin JavaScript như modal,

carousel, dropdown, và scrollspy, giúp tạo ra các tính năng tương tác và hiệu ứng độngmột cách dễ dàng

4 Responsive Design: Bootstrap được thiết kế để hỗ trợ responsive design từ đầu, tức

là các trang web và ứng dụng xây dựng bằng Bootstrap tự động thích ứng với kíchthước màn hình của người dùng, từ desktop đến điện thoại di động

5 Tùy chỉnh dễ dàng: Bootstrap cho phép người phát triển tùy chỉnh và mở rộng

framework theo nhu cầu cụ thể của dự án bằng cách sử dụng Sass và Less, hoặc chỉđơn giản là ghi đè các CSS và JavaScript mặc định

6 Hỗ trợ cộng đồng lớn: Với một cộng đồng lớn và tích cực, Bootstrap có sẵn nhiều

tài liệu, ví dụ, và plugin bổ sung từ cộng đồng phát triển web

Tóm lại, Bootstrap là một framework front-end mạnh mẽ và linh hoạt, giúp người pháttriển web xây dựng các trang web và ứng dụng web đẹp và responsive một cách nhanhchóng và dễ dàng.

1.3.10 Giới thiệu về Laravel

Hình 1.3.8 Laravel

Laravel là một framework phát triển ứng dụng web mã nguồn mở và miễn phí, đượcxây dựng bằng ngôn ngữ lập trình PHP Nó ra đời vào năm 2011 bởi Taylor Otwell vànhanh chóng trở thành một trong những framework PHP phổ biến nhất trên thị trườnghiện nay Laravel được thiết kế để giúp nhà phát triển xây dựng các ứng dụng web mộtcách nhanh chóng, dễ dàng và mạnh mẽ

Dưới đây là một số điểm nổi bật về Laravel:

1 Cú pháp đơn giản và mạch lạc: Laravel được thiết kế với cú pháp đơn giản và dễ

hiểu, giúp người phát triển tập trung vào việc xây dựng các tính năng chính của ứngdụng mà không phải lo lắng về các chi tiết kỹ thuật phức tạp

2 MVC Architecture: Laravel áp dụng mô hình MVC (Model-View-Controller) để

phân tách logic ứng dụng và giao diện người dùng, giúp cho mã nguồn trở nên dễ bảotrì và mở rộng

3 Tính năng mạnh mẽ: Laravel cung cấp một loạt các tính năng mạnh mẽ như hệ

thống định tuyến (routing), middleware, Eloquent ORM, Blade template engine,authentication và authorization, queue, và nhiều hơn nữa

4 Hỗ trợ tốt cho database: Laravel hỗ trợ nhiều loại cơ sở dữ liệu phổ biến như

MySQL, PostgreSQL, SQLite và SQL Server, và cung cấp một cú pháp dễ sử dụng đểtương tác với cơ sở dữ liệu

5 Community lớn và sôi động: Laravel có một cộng đồng phát triển lớn và tích cực,

với nhiều tài liệu, ví dụ và các gói mở rộng (packages) được cung cấp bởi cộng đồng

6 Đơn giản hóa việc triển khai và bảo trì: Laravel cung cấp các công cụ và quy

trình đơn giản hóa để triển khai và bảo trì ứng dụng, giúp người phát triển tiết kiệmthời gian và công sức.

Tóm lại, Laravel là một framework PHP mạnh mẽ và linh hoạt, được sử dụng rộng rãitrong cộng đồng phát triển web để xây dựng các ứng dụng web hiện đại, mạnh mẽ vàdễ bảo trì.

1.4 Kết quả đạt được (dự kiến)

Hoàn thành báo cáo tốt nghiệp và sản phẩm phần mềm đúng thời hạn.

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ

2.1 Phân tích biểu đồ usecase tổng quát của hệ thống

-Còn khách vãng lai chỉ có thể đăng ký và dùng podomoro

2.1 0 Biểu đồ tổng quát usecase tổng quát

2.1 0 biểu đồ phân rã quản lý tasks

2.1 0 biểu đồ phân rã thống kê tasks

2.1 0 biểu đồ phân rã quản lý tài khoản

2.1 0 biểu đồ phân rã quản lý danh mục tasks

2.2 Đặc tả usecase

Đặc tả usecase “đăng ký”

Tên usecase Đăng ký

Mô tả Usecase cho phép khách hàng đăng ký tài khoản tại website

Điều kiện kích hoạt Người dùng chọn chức năng đăng ký từ hệ thống

Tiền điều kiện Người dùng chưa có tài khoản trên hệ thống

Hậu điều kiện Đăng ký thành công

Luồng sự kiện chính

STT Tác nhân Hành động

1 Khách hàng Chọn chức năng đăng ký2 Hệ thống Hiển thị form đăng ký3 Khách hàng Nhập thông tin đăng ký4 Khách hàng Nhấn nút đăng ký

5 Hệ thống Kiểm tra tính hợp lệ và đầy đủ của các trường khách hàng nhập

6 Hệ thống Kiểm tra email, tên đăng nhập tồn tại hay không

7 Hệ thống Chuyển đến trang chủ

Luồng sự kiện thay

5.1 Hệ thống Thông báo lỗi: “The email fieldmust be a valid email address.” Sai kiểu, khác với kiểu email5.2 Hệ thống Thông báo lỗi: “The name field

must be at least 3 characters.” Nếu tên ít hơn 3 ký tự

5.3 Hệ thống Thông báo lỗi: “The name fieldmust not be greater than 255 characters Nếu tên nhiều hơn 255 ký tự

5.4 Hệ thống Thông báo lỗi: “The email fieldmust be at least 3 characters.” Nếu email ít hơn 3 ký tự

5.5 Hệ thống Thông báo lỗi: “The email fieldmust not be greater than 255 characters Nếu email nhiều hơn 255 ký tự

5.6 Hệ thống Thông báo lỗi: “The password field must be at least 8

characters.” Nếu password ít hơn 8 ký tự

5.7 Hệ thống Thông báo lỗi: “The password field must not be greater than 255 characters Nếu password nhiều hơn 255 ký tự

5.8 Hệ thống Thông báo lỗi: “The name fieldis required.” Nếu tên để trống

5.9 Hệ thống Thông báo lỗi: “The email fieldis required.” Nếu email để trống

5.10 Hệ thống Thông báo lỗi: “The password field is required.” Nếu

password để trống

6a Hệ thống Thông báo lỗi: “The email has already been taken.” nếu email này đã được đăng ký tài khoản

2.2 0 đặc tả usecase đăng ký

Tên usecase Đăng nhập

Mô tả Usecase cho phép người dùng đăng nhập vào hệ thống để có thể quản lý tasks của khách hàng

Điều kiện kích hoạt Người dùng chọn chức năng đăng nhập từ hệ thống

Tiền điều kiện Người dùng đã đăng ký tài khoản

Hậu điều kiện Đăng nhập thành công

Luồng sự kiện chính

STT Tác nhân Hành động

1 Khách hàng Chọn chức năng đăng nhập

2 Hệ thống Hiển thị form đăng nhập3 Khách hàng Nhập tên email và mật khẩu4 Khách hàng Nhấn nút đăng nhập

5 Hệ thống Kiểm tra tính hợp lệ và đầy đủ của các trường khách hàng6 Hệ thống Kiểm tra tên email và mật khẩu

tồn tại và trùng nhau hay không

5.2 Hệ thống Thông báo lỗi: “The password field is required.” Nếu

password để trống

5.3 Hệ thống Thông báo lỗi: “The email fieldmust be at least 3 characters.” Nếu tên ít hơn 3 ký tự

5.4 Hệ thống Thông báo lỗi: “The email fieldmust not be greater than 255 characters Nếu tên nhiều hơn 255 ký tự

5.5 Hệ thống Thông báo lỗi: “The password field must be at least 8

characters.” Nếu tên ít hơn 8 kýtự

5.6 Hệ thống Thông báo lỗi: “The password field must not be greater than 255 characters Nếu tên nhiều hơn 255 ký tự

6.1 Hệ thống Thông báo lỗi “The provided credentials do not match our records.” Nếu email và mật khẩu không trùng trong dữ liệu

2.2 0 Đặc tả usecase “đăng nhập”

Tên usecase Thêm task

Mô tả Usecase cho phép người dùng thêm task

Điều kiện kích hoạt Người dùng chọn thêm task

Tiền điều kiện Người dùng phải đăng nhập và nhập tên task , số podomoro, due_date

Hậu điều kiện Người dùng tạo task thành công

Luồng sự kiện chính

Luồng sự kiện thay thế

STT Tác nhân Hành động

3.1 Hệ thống Thông báo lỗi: “The select datefield must be a date after or equal to today.” Nếu due date là những ngày trước ngày hôm nay

3.2 Hệ thống Thông báo lỗi: “The taskname field is required.” Nếu task name để trống

3.3 Hệ thống Thông báo lỗi: “The taskname field must not be greater than 255 characters.” Nếu task namenhiều hơn 255 ký tự

2.2 0 Đặc tả usercase “Thêm task”

Tên usecase Sửa task

Mô tả Usecase cho phép người dùng sửa task

Điều kiện kích hoạt Người dùng chọn chức năng sửa task

Tiền điều kiện Người dùng phải đăng nhập và đã có task cần sửa

Hậu điều kiện Người dùng sửa task thành công

3 Người dùng Nhập, sửa thông tin cũ bao gồm taskname, số podomoro, duedate, ấn icon nút Edit task 4 Hệ thống Kiểm tra thông tin bao gồm tên

4.1 Hệ thống Thông báo lỗi: “The select datefield must be a date after or equal to today.” Nếu due date là những ngày trước ngày hôm nay

4.2 Hệ thống Thông báo lỗi: “The taskname field is required.” Nếu task name để trống

4.3 Hệ thống Thông báo lỗi: “The taskname field must not be greater than 255 characters.” Nếu task namenhiều hơn 255 ký tự

2.2 0 Đặc tả usecase “sửa task”

Tên usecase Hoàn thành task

Mô tả Usecase cho phép người dùng hoàn thành task

Điều kiện kích hoạt Người dùng chọn checkbox hoàn thành task

Tiền điều kiện Người dùng phải đăng nhập và đã có task cần hoàn thành

Hậu điều kiện Người dùng hoàn thành task thành công

Luồng sự kiện chính

STT Tác nhân Hành động

1 Người dùng Nhấn chức năng có checkbox hoàn thành task

2 Hệ Thống Hiển thị task đã hoàn thành

Luồng sự kiện thay thế

Không có

2.2 0 Đặc tả usecase “Hoàn thành task”

Tên usecase Xóa task

Mô tả Usecase cho phép người dùng xóa task

Điều kiện kích hoạt Người dùng chọn icon thùng rác xóa task

Tiền điều kiện Người dùng phải đăng nhập và task đó đã hoàn thành

Hậu điều kiện Người dùng xóa task thành công

Luồng sự kiện chính