Giới thiệu
“THIẾT KẾ WEBSITE HỖ TRỢ HỌC TẬP”
Trong bối cảnh thế giới ngày càng hiện đại, nhu cầu tiếp thu kiến thức của con người gia tăng đáng kể Tuy nhiên, thực trạng hiện nay cho thấy nhiều người thường mất nhiều thời gian để tìm kiếm tài liệu học tập và phải ngồi hàng giờ trên máy tính để tìm kiếm những trung tâm gia sư uy tín, nhưng không phải lúc nào cũng đạt được chất lượng mong muốn.
• Vấn đề cần giải quyết: Tạo ra một trang web chất lượng, uy tín để mọi người có thể tiếp thu kiến thức một cách dễ dàng
Website hỗ trợ học tập là giải pháp toàn diện, cung cấp đầy đủ tính năng cần thiết, giúp giải quyết mọi lo lắng của học sinh và phụ huynh Điều này không chỉ mang lại sự yên tâm trong việc tiếp thu kiến thức mà còn tối ưu hóa thời gian học tập hiệu quả.
• Thiết kế trang web hỗ trợ học tập với giao diện website bắt mắt, thân thiện với người dùng.
Ứng dụng này cung cấp đầy đủ tính năng và dễ sử dụng, giúp người dùng, đặc biệt là trẻ nhỏ, tìm kiếm tài liệu học tập một cách dễ dàng mà không cần nhờ sự trợ giúp của cha mẹ.
• Hỗ trợ bảo mật nhiều lớp, đảm bảo toàn bộ thông tin của người dùng đều được bảo mật
• Các bài học luôn được cập nhật thường xuyên, đảm bảo chất lượng tốt nhất cho các bạn học viên
• Được tích hợp các công nghệ thiết kế web mới nhất hiện nay như:HTML5, CSS3
Thời gian Nội dung thực hiện
Gặp giảng viên hướng dẫn và duyệt đề cương
Hoàn thành để cương chi tiết và nộp đề cương Lên kế hoạch thực hiền đồ án
Tìm hiểu về đối thủ cạnh tranh, các trang web đang được quan tâm nhất hiện nay.
Các điểm mạnh, điểm yếu của họ.
Xây dựng kế hoạch chi tiết, các chức năng cơ bản của trang web.
Cân nhắc trong quá trình chuẩn bị, tránh sự trùng lặp với các ý tưởng trước đó.
Từ 14/4 đến 25/4 Thiết kế trang chủ website.
Thiết kế các modun của trang web, thiết kế trang web đảm bảo các yếu tố được đặt ra ban đầu.
Chỉnh sửa, hoàn thiện lại trang web, tránh các sai sót không đáng có.
Hoàn thành bản word, powerpoint.
• Phương pháp: Sử dụng CSS, HTML, JavaScrip, Bootstrap và một vài ngôn ngữ lập trình khác để hoàn thành nên giao diện website
Website đã được hoàn thiện với đầy đủ tính năng và giao diện rõ ràng, dễ sử dụng Điều này giúp người dùng, đặc biệt là trẻ em, dễ dàng tìm kiếm tài liệu học tập mà không cần sự trợ giúp từ cha mẹ.
Nội dung chính của luận văn gồm có 4 chương:
• Chương 1: Tổng quan: Tổng quan vấn đề, giới thiệu, mục tiêu, các vấn đề cần giải quyết và phương pháp nghiên cứu
• Chương 2: Tìm hiểu công cụ thực hiện: Cách sử dụng công cụ
Chương 3 trình bày nội dung và kết quả nghiên cứu, bao gồm việc phân tích và thiết kế hệ thống, xây dựng các mô hình, thiết kế giao diện và hoàn thiện chương trình Những vấn đề được nêu ra trong bài toán sẽ được giải quyết qua từng bước trong quá trình nghiên cứu, từ đó đảm bảo tính khả thi và hiệu quả của hệ thống.
Chương 4: Kết luận và hướng phát triển tổng kết những thành tựu đã đạt được và những điểm còn hạn chế trong nghiên cứu Dựa trên những kết quả này, bài viết đề xuất các hướng phát triển tương lai cho đề tài, nhằm nâng cao hiệu quả và mở rộng ứng dụng của nghiên cứu.
Tìm hiểu công cụ
HTML, viết tắt của Hypertext Markup Language, là ngôn ngữ giúp người dùng tạo ra và cấu trúc các thành phần trong trang web hoặc ứng dụng, bao gồm việc phân chia đoạn văn, tiêu đề, liên kết, và các đoạn trích.
HTML không phải là ngôn ngữ lập trình, vì vậy nó không thể tạo ra các chức năng động Thay vào đó, HTML giống như Microsoft Word, được sử dụng để bố cục và định dạng trang web.
HTML là ngôn ngữ đánh dấu siêu văn bản cơ bản, đóng vai trò quan trọng trong việc cấu trúc và tổ chức các thành phần của một Website Nó không chỉ giúp tạo ra bố cục cho trang Web mà còn hỗ trợ khai báo các loại File kỹ thuật số như nhạc, video và hình ảnh, tạo nên một hệ thống hoàn chỉnh và tương tác.
Để có một website với cấu trúc tốt và sử dụng đa dạng yếu tố trong văn bản, HTML là yếu tố cần thiết HTML cung cấp các thành phần cơ bản cho mọi loại website, giúp hiển thị nội dung cho người dùng Điều này áp dụng cho bất kỳ nền tảng nào và tương tác với mọi ngôn ngữ lập trình xử lý dữ liệu.
HTML cung cấp nhiều thẻ định dạng, giúp bạn trình bày trang web một cách dễ dàng và hiệu quả Đây là một ngôn ngữ đánh dấu đơn giản và dễ sử dụng, cho phép thiết kế trang web linh hoạt kết hợp với văn bản.
HTML cho phép liên kết đến các trang web khác, đồng thời hỗ trợ thêm video, hình ảnh và âm thanh, giúp website trở nên hấp dẫn và dễ tương tác Đặc biệt, HTML có thể hiển thị trên mọi nền tảng như Linux, Windows và Mac, nhờ tính độc lập của nó.
2.1.4 Cấu trúc cơ bản trang HTML
Tiêu đề trang web
HTML được phát minh bởi Tim Berners-Lee, một nhà vật lý tại CERN, Thụy Sĩ, người đã sáng tạo ra khái niệm hệ thống hypertext trên nền tảng Internet.
Hypertext là văn bản chứa các liên kết cho phép người dùng truy cập ngay lập tức Năm 1991, Anh đã phát hành phiên bản đầu tiên của HTML với 18 thẻ HTML Kể từ đó, mỗi phiên bản mới của HTML đều bổ sung thêm các thẻ và thuộc tính mới.
According to the Mozilla Developer Network's HTML Element Reference, there are currently over 140 HTML tags, although some of them have been deprecated and are no longer supported by modern browsers.
HTML đã trở thành chuẩn mực thiết yếu cho các website, với sự phát triển và quản lý từ Tổ chức W3C Bạn có thể dễ dàng kiểm tra thông tin cập nhật về ngôn ngữ này trên trang web của W3C.
Năm 2014, chuẩn HTML5 đã được ra mắt với nhiều nâng cấp mới, bao gồm việc bổ sung các thẻ như , , và để xác định rõ ràng hơn nội dung của trang web.
CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để tạo phong cách và định dạng cho các yếu tố được mã hóa bằng ngôn ngữ đánh dấu như HTML Nó cho phép điều chỉnh định dạng cho nhiều trang web cùng lúc, giúp tiết kiệm thời gian và công sức cho các nhà phát triển web.
CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm
Vào năm 1996, HTML không được phát triển với chức năng gắn tag để định dạng trang web, mà chỉ được sử dụng để "đánh dấu" nội dung trên trang.
Hạn chế việc làm rối mã HTML trên trang Web bằng cách sử dụng các thẻ quy định kiểu dáng như chữ đậm, chữ in nghiêng, và chữ có gạch chân để làm cho mã nguồn gọn gàng hơn Điều này giúp tách biệt nội dung và định dạng hiển thị, dễ dàng cho việc cập nhật Ngoài ra, việc tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web sẽ giúp tránh lặp lại định dạng cho các trang giống nhau.
Một đoạn CSS có cấu trúc 4 phần như sau:
+ selector : tên thẻ html hoặc class hoặc Id
+ { } : Cặp thẻ mở đóng, các thuộc tính của selector sẽ nằm trong cặp ngoặc nhọn này.
+ Thuộc tính: Thuộc tính của css qui định về cách bố trí, màu sắc,
+ Giá trị thuộc tính: Nằm bên phải dấu " : " chỉ ra giá trị của thuộc tính đó. VD: selector { thuộc tính 1 : giá trị 1; thuộc tính 2 : giá trị 2;
CSS được đề xuất lần đầu tiờn vào ngày 10/10/1994 bởi Hồkon Wium Lie.
Kể từ khi ra đời, CSS đã trải qua nhiều phiên bản khác nhau, mỗi phiên bản mới không chỉ khắc phục các lỗi của phiên bản trước mà còn mang đến nhiều cải tiến đáng kể.
Phân tích thiết kế hệ thống
3.1 Phân tích và thiết kế hệ thống
Xây dựng một hệ thống trực tuyến giúp học viên dễ dàng truy cập và tìm kiếm tài liệu học tập, đồng thời cho phép phụ huynh nhanh chóng tìm gia sư phù hợp cho con em mình.
Hệ thống hỗ trợ học sinh thêm khóa học vào mục “Nhà của tôi”, giúp quản lý bài học hiệu quả Ngoài ra, hệ thống còn tích hợp thanh tiến trình theo dõi tiến độ học tập, giúp học viên nắm bắt tình hình học tập hiện tại và phân chia thời gian học tập hợp lý.
Hệ thống của chúng tôi kết nối phụ huynh với trung tâm hỗ trợ tìm kiếm gia sư, giúp họ dễ dàng tìm ra gia sư phù hợp cho con em mình dựa trên các tiêu chí như giá cả, trình độ và thời gian giảng dạy.
Triển khai xây dựng
Website này được thiết kế để hỗ trợ học sinh trong việc tiếp cận kiến thức một cách dễ dàng và nâng cao khả năng tự học Đồng thời, nó cũng giới thiệu các gia sư từ những trung tâm uy tín tại Đà Nẵng, giúp phụ huynh thuận tiện trong việc tìm kiếm và đăng ký gia sư Trang web bao gồm nhiều chức năng hữu ích để phục vụ nhu cầu học tập của người dùng.
• Hiển thị danh sách các bài học
• Hiển thị danh sách gia sư
Thông tin đăng ký gia sư
• Lý thuyết + video bài giảng
Trang giới thiệu là trang đầu tiên xuất hiện khi truy cập vào trang chủ Người dùng cần đăng nhập hoặc đăng ký tài khoản để vào trang chính Khi nhấn vào nút đăng ký, giao diện đăng ký sẽ được hiển thị.
Hình 2: Trang đăng ký Điền thông tin: Tên đăng nhập
Email SDT Mật khẩu Nhập lại mật khẩu Rồi nhấn đăng ký để vào Trang chủ.
Hoặc chọn Đăng nhập để vào Trang chủ
Hình 4: Trang chủ Trong trang chủ sẽ gồm có: Nhà của tôi
Hình 5: Trang nhà của tôi
Trang nhà của tôi cung cấp cái nhìn tổng quan về thông tin người dùng, bao gồm các khóa học mà học viên đã tham gia và lịch sử học tập của họ.
Trang tìm kiếm gia sư cung cấp thông tin chi tiết về giáo viên, giúp phụ huynh dễ dàng tìm kiếm và lựa chọn Sau khi tìm được giáo viên phù hợp, phụ huynh chỉ cần đăng ký và điền đầy đủ thông tin để hoàn tất quá trình đăng ký gia sư.
Hình 7: Trang đăng ký gia sư
Hình 8: Trang tư vấn Trang tư vấn bao gồm một số câu hỏi thường gặp và các giải pháp, các điều kiện cần chuẩn bị khi học tập Online
Hình 9: Trang thư việnTrang thư viện bao gồm các môn học từ lớp 9 đến lớp 12 Giúp người dùng dễ dàng tìm kiếm tài liệu học tập
Trang web này cung cấp thông tin lý thuyết ngắn gọn và dễ hiểu cho học sinh, kèm theo video hỗ trợ để nâng cao sự hiểu biết về bài học Cuối trang, học sinh có thể tìm thấy bài tập tự kiểm tra, giúp đánh giá kiến thức của mình Khi chọn tính năng Tự kiểm tra, giao diện sẽ hiển thị kết quả ngay lập tức.
Hình 10: Trang tự kiểm tra Ở cuối bài sẽ có link đáp án, trong đó có đáp án và lời giải chi tiết Khi chọn vào đáp án sẽ hiện:
Link demo sản phẩm: http://studywiths4s.epizy.com/index1.html
