Actor Giáo viên, Sinh viên Description Là người dùng, tôi muốn đăng nhập vào trang web Trigger Người dùng muốn đăng nhập hệ thống Pre-conditions Người dùng đã có tài khoản email Post-con
LÝ DO XÂY DỰNG WEBSITE
Trong bối cảnh công nghệ và internet phát triển mạnh mẽ, môi trường học trực tuyến ngày càng trở nên quan trọng, giúp mở rộng khả năng đào tạo và tăng cường sự tương tác giữa học viên và giảng viên Việc xây dựng một website quản lý học online không chỉ mang lại sự linh hoạt trong học tập mà còn giảm thiểu chi phí và thời gian di chuyển Nó cung cấp một phương tiện hiệu quả để truy cập và chia sẻ kiến thức, đồng thời thúc đẩy sự phát triển của giáo dục trong xã hội.
Việc xây dựng một trang web quản lý học trực tuyến mang lại nhiều lợi ích, bao gồm tạo ra môi trường học tập không giới hạn địa lý, cho phép học viên và giảng viên tham gia khóa học từ bất kỳ đâu Hệ thống này tối ưu hóa quản lý tài nguyên và dữ liệu học tập thông qua tự động hóa quy trình như ghi nhận điểm số và tạo bài tập, giúp giảm gánh nặng cho giảng viên và cung cấp thông tin chính xác cho học viên Ngoài ra, việc sử dụng công nghệ thông tin trong giảng dạy và học tập cũng thúc đẩy phát triển kỹ năng số hóa cho cả học viên và giảng viên, nâng cao khả năng sử dụng công nghệ trong thế giới hiện đại.
Hệ thống quản lý học trực tuyến tạo ra môi trường học tập linh hoạt và cá nhân hóa, cho phép học viên tùy chỉnh nội dung, giao diện và phương pháp đánh giá Điều này giúp họ trải nghiệm quá trình học theo cách phù hợp nhất với nhu cầu và phong cách học của mình, từ đó tăng cường sự thú vị và động lực trong việc học.
Việc xây dựng một trang web quản lý học trực tuyến không chỉ nâng cao hiệu quả học tập mà còn thúc đẩy sự phát triển cá nhân và tiến bộ giáo dục trong kỷ nguyên số hóa.
PHÂN TÍCH YÊU CẦU
Đơn vị sở hữu và người sử dụng website
● Đơn vị sở hữu: Toàn bộ thành viên nhóm 3
- Admin (các thành viên của nhóm): Là người có thể đăng bài viết mới và có quyền sửa, xóa bài viết, quản lý người dùng
Khách hàng của website bao gồm cả khách hàng hiện tại và tiềm năng, chủ yếu là trường học, giáo viên, học sinh và sinh viên có nhu cầu học tập và giảng dạy trực tuyến Người dùng sẽ được cung cấp các chức năng quản lý xác thực, quản lý lớp học, thông báo và quản lý bài tập để hỗ trợ tốt nhất cho quá trình học tập và giảng dạy.
Đặc tả yêu cầu
Mô tả chung: Website gồm những chức năng sau a Quản lý xác thực
● (Đã có tài khoản) Đăng nhập bằng email
● (Chưa có tài khoản) Đăng ký
- Tạo tài khoản: Nhập tên đăng nhập, Nhập mật khẩu, Xác thực mật khẩu, Đăng ký bằng email
- Quên mật khẩu: Nhập email, Nhập mã xác thực, Tạo mật khẩu mới b Quản lý lớp
- Tham gia lớp học: Nhập mã lớp
- Tìm kiếm lớp học: Nhập mã lớp
- Tạo lớp: Thêm mã lớp, Thêm tên lớp, Thêm ghi chú, Thêm link phòng học
- Xóa lớp: Chọn lớp cần xóa, Xác nhận xóa
- Đổi tên lớp: Nhập mã lớp, Nhập tên mới, Xác nhận đổi
- Giao bài tập: Tải lên tài liệu học tham khảo, Tải file đề bài, Lên lịch hết hạn bài tập
- Chấm bài: Xem bài, Cho điểm, Nhận xét bài
● Sinh viên: Học bài, Tải file nộp bài, Hủy nộp bài
- Thông báo bài tập và lịch hết hạn
- Thông báo một nội dung
Cụ thể a Chức năng quản lý xác thực
Actor Giáo viên, Sinh viên
Description Là người dùng, tôi muốn đăng nhập vào trang web
Trigger Người dùng muốn đăng nhập hệ thống
Pre-condition(s) Người dùng đã có tài khoản email
Post-condition(s) Trang web hiển thị giao diện sau khi đăng nhập
Basic Flow 1 Người dùng truy cập trang chủ của trang web
2 Người dùng nhấn vào nút “Đăng nhập”
3 Người dùng nhập tên đăng nhập và mật khẩu
4 Trang web ghi nhận đăng nhập và hiển thị giao diện
5 Kết thúc ca sử dụng
Exception Flow 3a Người dùng chọn hủy đăng nhập
Người dùng có thể gặp phải vấn đề khi nhập sai tên đăng nhập hoặc mật khẩu Để khắc phục, họ cần nhập lại thông tin đăng nhập một cách chính xác Nếu vẫn không thành công, trang web sẽ hiển thị thông báo cho biết email hoặc mật khẩu đã nhập không đúng.
Actor Giáo viên, Sinh viên
Description Là người dùng, tôi muốn đăng ký tài khoản
Trigger Người dùng muốn đăng nhập hệ thống
Pre-condition(s) Người dùng chưa có tài khoản
Post-condition(s) Trang web hiển thị giao diện sau khi đăng ký và đăng nhập
Basic Flow 1 Người dùng truy cập trang chủ của trang web
2 Người dùng nhấn vào nút “Đăng ký”
3 Người dùng nhập form đăng ký tài khoản
4 Trang web ghi nhận thông tin và hiển thị giao diện đăng nhập
6 Kết thúc ca sử dụng Alternative Flow
Exception Flow 3a Người dùng chọn hủy đăng ký
3b Người dùng nhập email đã đăng ký tài khoản 4b Hệ thống thông báo email đã đăng ký tài khoản
Actor Giáo viên, Sinh viên
Description Là người dùng, tôi muốn tạo lại mật khẩu
Trigger Người dùng muốn tạo lại mật khẩu
Pre-condition(s) Người dùng có sẵn tài khoản
Post-condition(s) Trang web hiển thị giao diện đăng nhập tài khoản
Basic Flow 1 Người dùng truy cập trang chủ của trang web
2 Người dùng nhấn vào nút “Quên mật khẩu”
3 Người dùng nhập email và mã xác thực để tạo lại mật khẩu
4 Trang web ghi nhận thông tin và hiển thị ô nhập mật khẩu mới
5 Người dùng nhập mật khẩu mới
6 Trang web ghi nhận thông tin và hiển thị trang chủ Alternative Flow
Exception Flow 3a Người dùng nhập sai email hoặc mã xác thực
3a1 Người dùng nhập lại email hoặc mã xác thực 4a Hệ thống thông báo sai email hoặc mã xác thực b Chức năng quản lý lớp
Name Tham gia lớp học
Actor Giáo viên, Sinh viên
Description Là người dùng, tôi muốn tham gia lớp học
Trigger Người dùng muốn tham gia lớp học
Pre-condition(s) Người dùng đã có sẵn tài khoản
Post-condition(s) Trang web hiển thị thông tin lớp học
Basic Flow Người dùng truy cập trang chủ của trang web
Người dùng nhấn nút “Tham gia lớp học”
Người dùng nhập mã lớp học Trang web ghi nhận thông tin và hiển thị thông tin lớp học đó Kết thúc ca sử dụng
Exception Flow 3a Người dùng nhập nhập sai mã lớp
4a Hệ thống thông báo sai mã lớp, vui lòng nhập lại
Name Tìm kiếm lớp học
Actor Giáo viên, Sinh viên
Description Là người dùng, tôi muốn tìm kiếm lớp học
Trigger Người dùng muốn tìm kiếm lớp học
Pre-condition(s) Người dùng đã tham gia lớp học
Post-condition(s) Trang web hiển thị thông tin lớp học tương ứng
Basic Flow 1 Người dùng truy cập trang chủ của trang web, nhấn vào thanh tìm kiếm
2 Người dùng nhập mã lớp học cần tìm
3 Trang web hiển thị thông tin lớp học tương ứng
4 Kết thúc ca sử dụng Alternative Flow
Exception Flow 2a Người dùng nhập sai mã lớp học cần tìm
3a Trang web hiển thị thông báo sai mã lớp học
Description Là người dùng, tôi muốn tạo lớp
Trigger Người dùng muốn tạo lớp
Pre-condition(s) Người dùng đã có sẵn tài khoản
Post-condition(s) Trang web hiển thị thông tin lớp học
Basic Flow 1 Người dùng truy cập trang chủ của trang web
2 Người dùng nhấn nút “Tạo lớp”
3 Người dùng nhập form tạo lớp học
4 Trang web ghi nhận thông tin và hiển thị thông tin lớp học
5 Kết thúc ca sử dụng Alternative Flow
Exception Flow 2a Người dùng hủy tạo lớp
Description Là người dùng, tôi muốn xóa lớp
Trigger Người dùng muốn xóa lớp
Pre-condition(s) Người dùng đã có sẵn tài khoản
Post-condition(s) Trang web hiển thị yêu cầu thông tin lớp học
Basic Flow 1 Người dùng truy cập trang lớp học đã đăng ký
2 Người dùng chọn “Xóa lớp” tương ứng
3 Trang web hiển thị thông báo xác nhận
4 Người dùng xác nhận xóa
5 Trang web ghi nhận thông tin và xóa lớp học
6 Kết thúc ca sử dụng Alternative Flow
Exception Flow 3a Người dùng hủy xác nhận xóa lớp
4a Trang web ghi nhận thông tin và hủy xóa lớp học
Description Là người dùng, tôi muốn đổi tên lớp học
Trigger Người dùng muốn đổi tên lớp học
Pre-condition(s) Người dùng đã có sẵn tài khoản
Post-condition(s) Trang web hiển thị thông tin lớp học học sau khi đổi tên
Basic Flow 1 Người dùng truy cập lớp học đã đăng ký
2 Người dùng nhấn nút “Đổi tên lớp”
3 Người dùng nhập tên mới và nhấn nút “Xác nhận”
4 Trang web ghi nhận thông tin và hiển thị tên lớp sau khi đổi tên
5 Kết thúc ca sử dụng Alternative Flow
Exception Flow 3a Người dùng hủy đổi tên lớp học
Description Là người dùng, tôi muốn giao bài tập
Trigger Người dùng muốn giao bài tập
Pre-condition(s) Người dùng đã có sẵn tài khoản
Post-condition(s) Trang web hiển thị giao diện thêm bài tập
Basic Flow 1 Người dùng truy cập trang chủ của trang web
2 Người dùng nhấn chọn “Tạo bài tập”
3 Trang web hiển thị thông tin và yêu cầu về bài tập được giao
4 Người dùng đăng tải bài tập
5 Trang web ghi nhận thông tin bài tập và xác nhận đăng tải bài tập
6 Kết thúc ca sử dụng Alternative Flow
Exception Flow 2a Người dùng hủy chọn giao bài tập
Description Là người dùng, tôi muốn chấm bài tập
Trigger Người dùng muốn giao bài tập
Pre-condition(s) Người dùng đã có sẵn tài khoản
Post-condition(s) Trang web hiển thị giao diện bài tập
Basic Flow 1 Người dùng truy cập trang chủ của trang web
2 Người dùng nhấn chọn “Bài tập”
3 Trang web hiển thị thông tin và yêu cầu nhập điểm cho học sinh
5 Trang web ghi nhận thông tin bài tập và xác nhận điểm đã nhập
6 Kết thúc ca sử dụng Alternative Flow
Exception Flow 4a Người dùng hủy nhập điểm
Description Là người dùng, tôi muốn nộp bài tập
Trigger Người dùng muốn nộp bài tập
Pre-condition(s) Người dùng đã có sẵn tài khoản
Post-condition(s) Trang web hiển thị giao diện đăng tải file bài làm hoặc dán tệp liên kết bài tập
Basic Flow 1 Người dùng truy cập phần “Bài tập” trên trang chủ trang web
2 Trang web hiện ra bài tập đã được giao
3 Người dùng nhấn chọn “Tải lên”
4 Trang web ghi nhận bài làm
5 Người dùng chọn “Nộp bài”
6 Trang web ghi nhận thông tin
7 Kết thúc ca sử dụng Alternative Flow 3a Người dùng chọn thêm “Đường liên kết” tới bài làm
Exception Flow 6a Người dùng chọn “Hủy nộp bài”
Actor Giáo viên, sinh viên
Description Là người dùng, tôi muốn thông báo đến các thành viên trong lớp Trigger Người dùng muốn thông báo đến các thành viên trong lớp
Pre-condition(s) Người dùng đã có sẵn tài khoản
Post-condition(s) Trang web hiển thị nội dung thông báo tới thành viên
Basic Flow 1 Người dùng truy cập trang chủ của trang web
2 Người dùng nhấn nút “Thông báo ”
3 Người dùng nhập form thông báo
4 Trang web ghi nhận thông tin và hiển thị thông tin thông báo đến các thành viên trong lớp
5 Kết thúc ca sử dụng
Alternative Flow 3a Người dùng chọn thêm “Đường liên kết” tới thông báo
Exception Flow 3a Người dùng hủy thông báo
2.2.2 Yêu cầu phi chức năng a Yêu cầu giao diện
Giao diện website được thiết kế đẹp mắt và đơn giản, hiển thị tốt trên các thiết bị khác nhau Nó cân đối giữa chức năng đầy đủ và bố cục hợp lý, với màu sắc chủ đạo là lam xanh dương kết hợp trắng, giúp nổi bật thông tin và phù hợp với nội dung của website Sự thống nhất trong thiết kế giữa các trang web trong cùng một website cũng được đảm bảo.
Giao diện website cần được thiết kế một cách đầy đủ và dễ theo dõi, với các trang web có cấu trúc đơn giản, thân thiện và dễ dàng truy cập Nội dung cần được bố trí một cách logic, giúp người dùng dễ dàng thao tác và tìm kiếm thông tin cần thiết.
- Kiểu bố cục của website: Gồm 3 phần(header, content và danh mục)
Header trang web bao gồm logo, tên trang và thanh điều hướng, giúp người dùng dễ dàng tìm kiếm các chuyên mục như Trang chủ, Khóa học, Bài tập, Lớp học và Cài đặt.
Danh mục sẽ bao gồm thanh menu, giúp người dùng dễ dàng tìm kiếm các chuyên mục như trang chủ, lớp đã đăng ký, lớp đang giảng dạy và cài đặt.
+ Phần content chứa các nội dung tương ứng với phần danh mục tác giúp người dùng hiểu hơn về phần danh mục đó và dễ dàng thao tác
Để cải thiện tốc độ tải trang, website cần được thiết kế với hình ảnh và nội dung tối ưu hóa, đồng thời các đoạn script và CSS nên được lưu trữ trong các file riêng biệt Điều này sẽ giúp tăng cường tốc độ truy cập, mang lại trải nghiệm mượt mà cho người dùng.
- Trang web cho phép mọi đối tượng có thể truy cập vào trang web thông qua đường dẫn của trang web b Phạm vi áp dụng
Trang web quản lý học online có thể sử dụng trên nhiều thiết bị như máy tính để bàn, laptop, máy tính bảng và điện thoại thông minh, miễn là có kết nối internet Điều này giúp người dùng dễ dàng truy cập và quản lý việc học của mình mọi lúc, mọi nơi.
- Sử dụng hệ thống có thể giảm bớt cả về thời gian cũng như công sức cho người sử dụng thông qua tìm kiếm
- Hệ thống sẵn sàng phục vụ cho 500 - 1000 người dùng cùng một lúc
- Thời gian kết nối đến máy chủ không quá 5 giây
- Trên 70 - 80% các yêu cầu không thực hiện quá 5 giây d Bảo mật thông tin
- Thông tin về số điện thoại và email của người dùng chỉ hiển thị với chính người dùng đó
- Thông tin lớp học chỉ được hiển thị sau khi người dùng tham gia lớp học
- Chỉ người dùng tạo lớp mới có quyền thêm, sửa, xóa bài tập cũng như quản lý thành viên lớp
Mỗi trang web trên một website mang nội dung độc đáo, thể hiện sự đa dạng thông tin Nội dung của từng trang cần phải phù hợp và tương thích với tiêu đề của trang đó.
Khối nội dung của website bao gồm ba phần, trong đó Header là phần quan trọng nhất Header nằm ở đầu mỗi trang web và thường chứa nhiều thông tin thiết yếu.
- Tạo lớp hoặc tham gia lớp
● Nút ảnh đại diện người dùng
Trong thiết kế web, "Body" là phần chính của một trang web, bao gồm toàn bộ nội dung hiển thị sau phần Header Đây là nơi chứa thông tin quan trọng và nội dung mà người dùng mong muốn xem hoặc tương tác.
- Tham gia lớp học: Tham gia lớp học thông qua mã lớp học
- Tạo lớp học: Tạo lớp học thông qua Tên lớp, mã lớp, tên giáo viên và link phòng học
● Trang lớp đã đăng ký
Học viên có thể xem danh sách các lớp học đã đăng ký, truy cập vào từng lớp học và thực hiện các thao tác như xóa lớp hoặc đổi tên lớp Trong lớp học, sinh viên sẽ nhận thông báo, xem bài tập, nộp bài tập và tài liệu, cũng như tương tác với các thành viên khác trong lớp.
● Trang lớp đang giảng dạy
- Thông báo: Hiển thị các thông báo và thao tác với các thông báo như: Tạo thông báo, Chỉnh sửa thông báo và Xóa thông báo
Giao diện tạo bài tập cho sinh viên cho phép giáo viên lên lịch và quản lý các bài tập được giao Giáo viên có thể xem bài làm của sinh viên, chấm điểm và đưa ra nhận xét để hỗ trợ quá trình học tập hiệu quả hơn.
- Tài liệu: Đăng tải tài liệu học cho sinh viên
- Mọi người: Thêm thành viên vào lớp học và thao tác với các thành viên
● Trang cài đặt: Thao tác với hồ sơ: Thay ảnh đại diện và cài đặt thông báo
Thiết kế cơ sở dữ liệu
User (IdUser, Email, Name, Pass, Image)
Exercise (IdExercise, AssignmentDate, Link, Deadline, Delivered, Submitted, Graded) Document (IdDocument, DateSubmitted,)
2.3.2 Xây dựng ràng buộc và các mối liên kết cho các thực tập thể a Quan hệ 1-n
- Class - Exercise: Một lớp học (Class) có thể có nhiều bài tập (Exercise)
Thêm thuộc tính IdClass của quan hệ Class vào quan hệ Exercise làm khóa ngoại:
Exercise (IdExercise, IdClass, IdTeacher, AssignmentDate, Link, Deadline, Delivered, Submitted, Graded)
- Class - Document: Một lớp học (Class) có thể có nhiều tài liệu (Document)
Thêm thuộc tính IdClass của quan hệ Class vào quan hệ Document làm khóa ngoại:
Document (IdDocument, IdClass, DateSubmitted, IdTeacher)
- Class - Notification: Một lớp học (Class) có thể có nhiều thông báo (Notification)
Thêm thuộc tính IdClass của quan hệ Class vào quan hệ Notification làm khóa ngoại: Notification (IdNotification, IdClass, DateSubmitted)
- User - Exercise: Một người dùng (User) (có thể là giáo viên) có thể tạo nhiều bài tập (Exercise)
Thêm thuộc tính IdTeacher của quan hệ User vào quan hệ Exercise làm khóa ngoại:
Exercise (IdExercise, IdClass, IdTeacher, AssignmentDate, Link, Deadline, Delivered, Submitted, Graded)
- User - Document: Một người dùng (User) (có thể là giáo viên) có thể tải lên nhiều tài liệu (Document)
Thêm thuộc tính IdTeacher của quan hệ User vào quan hệ Document làm khóa ngoại: Document (IdDocument,, DateSubmitted, IdTeacher)
Thêm thuộc tính IdClass của quan hệ Class vào quan hệ Document làm khóa ngoại:
Document (IdDocument, IdClass, DateSubmitted, IdTeacher) b Quan hệ n-n
Một người dùng (User ), bao gồm cả giáo viên và học sinh, có thể tham gia nhiều lớp học (Class), trong khi một lớp học (Class) có thể có nhiều người dùng (User ) tham gia.
Tạo thêm quan hệ: Noti(Idclass,IdUser, Style) c Kết quả
User (IdUser, Email, Name, Pass, Image)
Exercise (IdExercise, IdClass, IdTeacher, AssignmentDate, Link, Deadline, Delivered, Submitted, Graded)
Document (IdDocument, IdClass, DateSubmitted, IdTeacher)
2.3.3 Bảng dữ liệu a Class (lớp học)
Tên Mô tả Kiểu Kiểu dữ liệu
IdClass Mã lớp học Khóa chính varchar(255)
Name Tên lớp học Thuộc tính nvarchar(255)
LinkOnline Đường link online của lớp học Thuộc tính text b User (người dùng)
Tên Mô tả Kiểu Kiểu dữ liệu
IdUser Mã người dùng Khóa chính int
Email Địa chỉ email của người dùng Thuộc tính nvarchar(255)
Name Tên người dùng Thuộc tính nvarchar(255)
Pass Mật khẩu đăng nhập của người dùng Thuộc tính nvarchar(50)
Image Hình ảnh Thuộc tính text c ClassTeacher
Tên Mô tả Kiểu Kiểu dữ liệu
IdClass Mã lớp học Khóa ngoại varchar(255)
IdTeacher Mã giáo viên Khóa ngoại int d ClassStudent
Tên Mô tả Kiểu Kiểu dữ liệu
IdClass Mã lớp học Khóa ngoại varchar(255)
IStudent Mã sinh viên Khóa ngoại int e Exercise (bài tập)
Tên Mô tả Kiểu Kiểu dữ liệu
IdExercise Mã bài tập Khóa chính int
IdClass Mã lớp học Khóa ngoại varchar(255)
Idteacher Mã giáo viên Khóa ngoại int
AssignmentDate Ngày giao bài tập Thuộc tính timestamp
Link Link bài tập Thuộc tính varchar(255)
Deadline Hạn nộp bài tập Thuộc tính datetime
Delivered Bài tập đã giao Thuộc tính int
Submitted Bài tập đã nộp Thuộc tính int
Graded Bài tập đã chấm điểm Thuộc tính int f ExcerciseStudents
Tên Mô tả Kiểu Kiểu dữ liệu
IdExercise Mã bài tập Khóa ngoại int
IdStudent Mã sinh viên Khóa ngoại int
Status Tình trạng hoàn thành bài tập Thuộc tính enum
Comment Nhận xét của giáo viên Thuộc tính text
Link Link bài tập Thuộc tính varchar(255)
Grade Điểm của bài tập Thuộc tính decimal(3,2) g Document (tài liệu)
Tên Mô tả Kiểu Kiểu dũ liệu
IdDocument Mã tài liệu Khóa chính int
IdClass Mã lớp học Khóa ngoại varchar(255)
DateSubmitted Ngày gửi tài liệu Thuộc tính timestamp
IdTeacher Mã giáo viên Khóa ngoại int h Notification (thông báo)
Tên Mô tả Kiểu Kiểu dữ liệu
IdNotification Mã thông báo Khóa chính int
IdClass Mã lớp học Khóa ngoại varchar(255)
DateSubmitted Ngày gửi thông báo Thuộc tính timestamp i Noti
Tên Mô tả Kiểu Kiểu dữ liệu
IdClass Mã lớp học Khóa ngoại varchar(255)
IdUser Mã người dùng Khóa ngoại int
Style Kiểu nhận xét Thuộc tính enum
Tên Mô tả Kiểu Kiểu dữ liệu
IdClass Mã lớp học null varchar(255)
IdUser Mã người dùng null int(11)
Position Vị trí null varchar(10)
Tên Mô tả Kiểu Kiểu dữ liệu
IdEx Mã bài tập null varchar(50)
Title Tiêu đề bài tập null text
Date Ngày giao Current_timestamp datetime
Deadline Hạn nộp null datetime
Content Nội dung null text
Tên Mô tả Kiểu Kiểu dữ liệu
IdEx Mã bài tập null varchar(50)
IdStudent Mã sinh viên null int(11)
File Tệp bài tập null text
Name Tên bài tập null varchar(255)
Image Hình ảnh null longtext
Time Thời gian nộp Current_timestamp datetime
Tên Mô tả Kiểu Kiểu dữ liệu
IdEx Mã bài tập null varchar(50)
File Tệp bài tập null longtext
Title Tiêu đề bài tập null text
Date Ngày giao current_timestamp datetime
Deadline Hạn nộp null datetime
Content Nội dung null text
Tên Mô tả Kiểu Kiểu dữ liệu
Email Địa chỉ email null varchar(255)
Vercode Mã xác thực null char(4)
LẬP TRÌNH
Asset
@media only screen and (max-width: 700px) { div{padding:1px;}
*{box-sizing: inherit;} html{ font-size: 62.5%; line-height: 1.6rem; font-family: "Roboto", sans-serif; box-sizing: border-box;
.grid_row{ display: flex; flex-wrap: wrap; margin: 0 -12px; padding: 0;
.grid column_2{ padding-left: 12px; width: 16.6667%; min-height: 85vh;
.grid column_10{ background: url('View/asset/img/background.png'); background-attachment: fixed; padding-left: 12px; padding-right: 12px; width: 83.3334%; padding-bottom: 10px;
.grid column_class{ padding-left: 12px; padding-right: 12px; width: 20%;
.select-input{ min-width: 120px; height: 50px; padding: 0 12px; border-radius: 2px; background-color: var( white_color);
The button design features a borderless style with a background color defined by a main color variable It includes text colored according to a specified text color variable, measuring 100px in width and 40px in height The button has rounded corners with a border-radius of 10px, a font size of 15px, and is enhanced with a subtle box shadow effect of 5px by 2px, creating a visually appealing and interactive element that encourages user engagement.
.btn:hover{ background-color: var( white_color); border: 1px solid var( main_color); color: var( main_color);
The navbar icons, including user, create, and bell icons, are styled with a font size of 20px and a text color defined by the variable text_color These elements are designed without text decoration, borders, or backgrounds, ensuring a clean appearance with a white background color defined by the variable white-color The icons are also interactive, featuring a cursor change to pointer when hovered over.
The hover effect for various icons in the navbar, including the user, create, bell, and menu icons, is set to reduce their opacity to 0.8 when hovered over, enhancing user interaction and visual feedback.
.app_wrap header { height: 60px; margin-top: 0px; border-bottom: solid 2px var( main_color);
.app_wrap header navbar { display: flex; justify-content: space-between; padding: 10px 0px;
.app_wrap header navbar header navbar-list-left { width: 200px; list-style: none; display: flex; padding-left: 0px;
.app_wrap header navbar header navbar-list-left header navbar logo img { width: 70%; margin: -5px 5px;
.app_wrap header navbar header navbar-list-left :hover { opacity: 0.8; cursor: pointer;
.app_wrap header navbar header navbar-list-right { list-style: none; display: flex;
.app_wrap header navbar header navbar-list-right header navbar bel { display: inline-block; position: relative;
.app_wrap header navbar header navbar-list-right header navbar bel header navbar-bell-icon { margin-right: 20px;
The notification menu in the header's right navbar is designed to be hidden by default and appears as an absolute element positioned at the top right, just below the navbar It features a width of 200 pixels, includes 5 pixels of padding, and has a z-index of 1 to ensure it overlays other elements The menu is styled with a white background color and rounded corners for a modern look.
.app_wrap header navbar header navbar-list-right header navbar bel header navbar bel-noti header navbar bel-noti_select { list-style: none; align-items: center; padding: 5px;
The navigation bar in the app features a notification section that is designed for easy access, with links that are styled without text decoration The font size is set to 15px, ensuring readability, and the color is defined by a variable for consistent text appearance.
.app_wrap header navbar header navbar-list-right header navbar bel header navbar bel-noti header navbar bel-noti_select :hover { cursor: pointer; opacity: 0.8;
.app_wrap header navbar header navbar-list-right header navbar create { display: inline-block; position: relative;
.app_wrap header navbar header navbar-list-right header navbar create header navbar-create-icon { margin-right: 20px;
The CSS code snippet defines a notification element within a navigation bar, setting its display to none by default When activated, it appears as an absolute positioned box on the right side, below the navbar The notification has a width of 130 pixels, includes 5 pixels of padding, and is layered above other elements due to a z-index of 1 It features a white background color and rounded corners with a border-radius of 10 pixels.
.app_wrap header navbar header navbar-list-right header navbar create header navbar create-noti header navbar create-noti_select { list-style: none; align-items: center; padding: 5px;
The CSS code snippet defines the styling for various elements in a navigation bar, including the create notification link It specifies that the link should have no text decoration, a color based on a variable for text color, and a font size of 15 pixels.
.app_wrap header navbar header navbar-list-right header navbar create header navbar create-noti header navbar create-noti_select :hover { cursor: pointer; opacity: 0.8;
.app_wrap header navbar header navbar-list-right header navbar user { display: inline-block; position: relative;
.app_wrap header navbar header navbar-list-right header navbar user header navbar-user-icon { margin-right: 20px;
The user notification menu is hidden by default and appears as an absolute element positioned to the right and below the navbar It features a width of 150px, includes padding for spacing, and is layered above other content with a z-index of 1 The menu has a white background and rounded corners, enhancing its visual appeal.
.app_wrap header navbar header navbar-list-right header navbar user header navbar user-noti header navbar user-noti_select { list-style: none; align-items: center; padding: 5px;
The user notification section of the app's header navbar features links that are styled with no text decoration, utilizing the designated text color and a font size of 15px for optimal readability.
.app_wrap header navbar header navbar-list-right header navbar user header navbar user-noti header navbar user-noti_select :hover { cursor: pointer; opacity: 0.8;
.app_wrap container { background-color: var( main_color);
.app_wrap container grid grid_row grid column_2 { overflow-x: hidden; overflow-y: scroll; background-color: white; margin-left: -12px;
.app_wrap container grid grid_row grid column_2 menu_list { padding-left: 15px; list-style: none;
.app_wrap container grid grid_row grid column_2 menu_list menu-main { display: flex; justify-content: center; align-items: center;
The menu main icon within the app's container features a borderless design, with a font size of 20px and a background color set to white It occupies the full width of its container and is aligned to the left, with a height of 40px, ensuring a clean and user-friendly interface.
.app_wrap container grid grid_row grid column_2 menu_list menu-main menu- main icon:hover { background-color: var( gray_color); cursor: pointer;
The menu for students features a clean design with no border, a font size of 20px, and a background color of white It is designed to be fully responsive, occupying 100% width and ensuring left-aligned text, all while maintaining a height of 40px.
.app_wrap container grid grid_row grid column_2 menu_list menu-student menu- student icon:hover { background-color: var( gray_color); cursor: pointer;
.app_wrap container grid grid_row grid column_2 menu_list menu-student menu- student item { display: none; list-style: none; padding: 10px 3px; white-space: nowrap;
The menu items for students are designed with a sleek, modern aesthetic, featuring a clean text decoration and a color scheme that utilizes black for readability Each item is set at a font size of 13px, ensuring clarity, and is arranged in a flexible layout that promotes easy navigation The items are spaced with a margin of 5px and are aligned centrally, both vertically and horizontally, to enhance user experience.
The menu items for students feature images that are styled with a width of 20% and a height of 100%, ensuring a uniform appearance Each image has a border-radius of 50% to create a circular shape, and they are spaced with a margin of 5 pixels for a clean layout.
-o-object-fit: cover; object-fit: cover;
The provided CSS code snippet is designed to control the appearance of text within specific elements of a student menu in a web application It ensures that any overflowing text is hidden and replaced with an ellipsis, maintaining a clean and organized layout This approach enhances user experience by preventing text overflow in designated sections of the menu.
.app_wrap container grid grid_row grid column_2 menu_list menu-student menu- student item :hover { background-color: var( gray_color); cursor: pointer; color: var( black_color);
The menu for teachers features a clean design with no border, a font size of 20px, and a background color defined by the variable white-color It is 100% width, aligns text to the left, and has a height of 40px.
.app_wrap container grid grid_row grid column_2 menu_list menu-teacher menu- teacher icon:hover { background-color: var( gray_color); cursor: pointer;
.app_wrap container grid grid_row grid column_2 menu_list menu-teacher menu- teacher item { display: none; list-style: none; padding: 10px 3px; white-space: nowrap;
Controller
