Báo cáo đồ án 2: Xây dựng website học lập trình - ĐH Công nghệ Thông tin

Báo cáo đồ án xây dựng website học lập trình chi tiết. Tài liệu tham khảo cho sinh viên CNTT về phân tích, thiết kế hệ thống bằng ReactJs, NodeJs.

• Tác giả: Nguyễn Trung Hiếu
• Người hướng dẫn: Ths. Huỳnh Tuấn Anh
• Trường học: Đại học Công nghệ Thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ Phần mềm
• Đề tài: Xây dựng Website Học Lập Trình
• Loại tài liệu: Đồ án
• Năm xuất bản: 2022
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Giới Thiệu Về Đồ Án Website Học Lập Trình

Đồ án website học lập trình là một dự án phát triển nền tảng học trực tuyến toàn diện, được xây dựng nhằm giải quyết vấn đề tiếp cận tài liệu học tập lập trình chất lượng cao. Dự án này được thực hiện bởi các sinh viên Khoa Công nghệ Phần mềm, Trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM. Mục tiêu chính là cung cấp nguồn tài nguyên học lập trình miễn phí hoặc chi phí thấp cho mọi đối tượng, từ học sinh phổ thông đến những người muốn chuyển sang ngành công nghệ. Website cung cấp các khóa học theo hình thức video hướng dẫn, bài tập lý thuyết trắc nghiệm và bài tập thực hành coding. Đây là nền tảng học tập hiện đại, kết hợp giữa lý thuyết và thực hành để giúp người học nắm vững kiến thức lập trình một cách hiệu quả.

1.1. Lý Do Chọn Đề Tài

Công nghệ thông tin hiện nay là một trong những ngành hot được giới trẻ yêu thích. Nhu cầu học lập trình ngày càng tăng cao, nhưng vấn đề về chi phí và tài liệu học tập chất lượng là rào cản lớn. Đặc biệt, những người trái ngành muốn học công nghệ thông tin gặp khó khăn trong việc tìm kiếm tài liệu đầy đủ và bổ ích. Nhóm sinh viên quyết định xây dựng website học lập trình để cung cấp tài liệu học tập toàn diện với chi phí thấp, giúp mọi người có cơ hội tiếp cận kiến thức lập trình chất lượng cao.

1.2. Đối Tượng Và Phạm Vi Nghiên Cứu

Đối tượng nghiên cứu của đề tài bao gồm sinh viên, học sinh có nhu cầu học lập trình, cũng như các doanh nghiệp công nghệ. Phạm vi của website được phát triển trên nền tảng ReactJs, NodeJs trong môi trường web đa nền tảng. Dự án tập trung vào việc xây dựng hệ thống quản lý khóa học, cung cấp bài giảng video, bài tập thực hành và hệ thống quản lý người dùng hoàn chỉnh.

II. Công Nghệ Và Công Cụ Ứng Dụng

Để xây dựng website học lập trình hiệu quả, dự án sử dụng các công nghệ modern và mạnh mẽ. Stack công nghệ chính bao gồm ReactJs cho front-end, NodeJs và ExpressJs cho back-end, cùng với MySQL để quản lý cơ sở dữ liệu. JavaScript được sử dụng làm ngôn ngữ chính, cho phép phát triển ứng dụng full-stack trên một ngôn ngữ duy nhất. Các công cụ hỗ trợ phát triển bao gồm Visual Studio Code để lập trình, Figma để thiết kế giao diện, và Rest API để xây dựng các endpoint backend. Lựa chọn công nghệ này nhằm đảm bảo hiệu suất cao, bảo mật tốt và khả năng mở rộng của hệ thống.

2.1. Frontend Với ReactJs

ReactJs là một thư viện JavaScript mạnh mẽ dùng để xây dựng giao diện người dùng. ReactJs cung cấp component-based architecture, cho phép chia nhỏ giao diện thành các thành phần tái sử dụng. Với React Hooks và state management, website có thể quản lý dữ liệu một cách hiệu quả. Virtual DOM của ReactJs giúp cập nhật giao diện nhanh chóng mà không ảnh hưởng đến hiệu suất. Công nghệ này giúp tạo ra giao diện responsive và trải nghiệm người dùng mượt mà trên các thiết bị khác nhau.

2.2. Backend Với NodeJs Và ExpressJs

NodeJs là runtime JavaScript cho phía server, cho phép chạy JavaScript ngoài trình duyệt. ExpressJs là framework lightweight giúp xây dựng Rest API một cách nhanh chóng và dễ dàng. Kết hợp NodeJs và ExpressJs, website có thể xử lý yêu cầu từ client, quản lý authentication và authorization, và tương tác với cơ sở dữ liệu. Stack này cung cấp performance cao và scalability tốt cho các ứng dụng web hiện đại.

2.3. Cơ Sở Dữ Liệu MySQL

MySQL là hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở, được chọn để lưu trữ dữ liệu của website. MySQL cung cấp độ bảo mật cao, hiệu suất tốt và độ tin cậy cho các ứng dụng web. Cơ sở dữ liệu lưu trữ thông tin người dùng, khóa học, bài giảng, bài tập và các dữ liệu liên quan khác.

III. Kiến Trúc Và Thiết Kế Hệ Thống

Kiến trúc website học lập trình được xây dựng theo mô hình MVC (Model-View-Controller), giúp tách biệt logic, giao diện và dữ liệu. Hệ thống bao gồm nhiều module chính: module quản lý người dùng, module quản lý khóa học, module bài giảng và bài tập, và module blog. Thiết kế giao diện được thực hiện sử dụng Figma, đảm bảo UI/UX hiện đại và user-friendly. Website hỗ trợ các chức năng như xem thông tin cá nhân, chỉnh sửa tài khoản, duyệt khóa học, tham gia khóa học, làm bài tập, và xem blog. Kiến trúc này đảm bảo tính dễ bảo trì, dễ mở rộng và hiệu suất tối ưu.

3.1. Use Case Diagram

Use case diagram mô tả các chức năng chính của website từ góc nhìn người dùng. Các actor chính bao gồm học sinh/sinh viên và quản trị viên. Use case chính bao gồm: xem thông tin cá nhân, chỉnh sửa tài khoản, duyệt khóa học, xem chi tiết khóa học, tham gia khóa học, chọn bài giảng, làm bài tập, xem chi tiết blog, và quản lý nội dung.

3.2. Thiết Kế Cơ Sở Dữ Liệu

Database schema bao gồm các bảng chính: Users (lưu thông tin người dùng), Courses (thông tin khóa học), Lessons (chi tiết bài giảng), Exercises (bài tập thực hành), Enrollments (đơn đăng ký), Blogs (bài viết blog). Mỗi bảng có primary key, foreign key để đảm bảo tính toàn vẹn dữ liệu.

3.3. Giao Diện Người Dùng

Giao diện website được thiết kế responsive, hỗ trợ cả máy tính và thiết bị di động. Các trang chính bao gồm: trang chủ (hiển thị khóa học nổi bật), trang danh sách khóa học (tìm kiếm và lọc), trang chi tiết khóa học (thông tin chi tiết và nút đăng ký), trang học tập (xem bài giảng và làm bài tập), trang hồ sơ cá nhân (quản lý tài khoản), và trang blog (đọc bài viết).

IV. Kết Luận Và Hướng Phát Triển Tương Lai

Đồ án website học lập trình đã hoàn thành thành công với các chức năng cơ bản, cung cấp nền tảng học tập toàn diện cho người dùng. Thành quả đạt được bao gồm hệ thống quản lý người dùng, quản lý khóa học, hệ thống bài giảng video, bài tập thực hành và hệ thống blog. Ưu điểm của website là giao diện hiện đại, dễ sử dụng, cập nhật kiến thức lập trình mới nhất. Tuy nhiên, vẫn có những nhược điểm cần cải thiện như chức năng phát triển còn hạn chế, cần thêm nhiều khóa học khác. Trong tương lai, dự án sẽ phát triển thêm các tính năng mới như livestream lớp học, tính năng networking giữa người dùng, chat hỗ trợ trực tiếp, cấp chứng chỉ sau hoàn thành khóa học.

4.1. Các Thành Quả Đạt Được

Website học lập trình đã thành công trong việc xây dựng nền tảng học tập hoàn chỉnh. Các chức năng chính đã được triển khai đầy đủ, bao gồm hệ thống đăng ký và xác thực, quản lý khóa học, cung cấp bài giảng video, bài tập lý thuyết, bài tập thực hành coding. Website đã được test và deploy thành công, sẵn sàng phục vụ người dùng. Dự án cũng nhận được phản hồi tích cực từ giảng viên hướng dẫn và người dùng thử nghiệm.

4.2. Ưu Điểm Và Nhược Điểm Hiện Tại

Ưu điểm của website bao gồm: giao diện đẹp mắt và dễ sử dụng, tính năng quản lý học tập hiệu quả, support responsive design, hiệu suất loading nhanh. Nhược điểm hiện tại bao gồm: số lượng khóa học còn hạn chế, chưa có tính năng tương tác real-time, chưa tích hợp thanh toán online, cần cải thiện hệ thống recommendation.

4.3. Hướng Phát Triển Tương Lai

Trong tương lai, đồ án sẽ phát triển thêm nhiều tính năng nâng cao như: livestream lớp học trực tiếp với giáo viên hướng dẫn, hệ thống forum cộng đồng để giao lưu giữa học viên, chat support 24/7 từ team hỗ trợ, cấp chứng chỉ hoàn thành khóa học, hệ thống AI recommendation để đề xuất khóa học phù hợp, và tích hợp thanh toán online để có thêm khóa học premium.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: GIỚI THIỆU CHUNG 1. Đề tài - Tên đề tài: Xây dựng hệ thống web học lập trình - Công nghệ sử dụng: - Front-end: - Back-end: - Cơ sở dữ liệu: MySQL 2. Lý do chọn đề tài Công nghệ thông tin đang là một trong những ngành hot và được giới trẻ quan tâm rất nhiều, kéo theo đó là nhu cầu học công nghệ thông tin ngày càng cao. Các bạn học sinh và người trái ngành học công nghệ thông tin rất nhiều, nhưng vì vấn đề về chi phí, về nguồn tài liệu học tập được cung cấp một cách đầy đủ và toàn diện thì rất khó.Hiểu được nỗi đau này, là một trong những sinh viên học công nghệ thông tin, chúng em đã quyết định xây dựng một trang web học lập trình thông qua những video và bài tập lí thuyết theo hình thức trắc nghiệm, thực hành theo hình thức coding để đem đến nguồn tài nguyên học tập bổ ích cho mọi người.

Đối tượng nghiên cứu ● Người làm đề tài: ○ Sinh viên đang học tập và nghiên cứu tại trường Đại học Công nghệ Thông tin – ĐHQG Tp. Hồ Chí Minh. ● Công nghệ, công cụ phát triển: ○ Visual Studio Code ○ Rest API ○ MySQL ● Thiết kế giao diện: ○ Phác thảo và thiết kế giao diện sử dụng công cụ Figma ● Đối tượng trong phạm vi đề tài hướng đến: SE122.PMCL Trang 1 ○ Sinh viên, học sinh có nhu cầu học lập trình ○ Những doanh nghiệp phân phối hàng hóa trong và ngoài nước. ○ Người tiêu dùng trong nước và (có thể) ngoài nước.

Phạm vi nghiên cứu ● Website được nhóm xây dựng và phát triển bằng ReactJs, NodeJs trên môi trường web. ● Tìm hiểu ReactJs, NodeJs để áp dụng vào phần mềm hỗ trợ người dùng có cái nhìn tổng quan về sản phẩm trước khi lựa chọn mua hàng. Phương pháp nghiên cứu ● Cách tiếp cận: Website được xây dựng dựa trên mô hình MVC trên môi trường đa nền tảng. ● Phương pháp nghiên cứu: ○ Phương pháp đọc tài liệu.

○ Phương pháp phân tích các website hiện nay đã xây dựng bằng cách sử dụng ReactJs,NodeJs (SERN stack). ○ Phương pháp thực nghiệm.PMCL Trang 2 CHƯƠNG 2: TÌM HIỂU CÁC CÔNG NGHỆ ỨNG DỤNG TRONG ĐỀ TÀI 1. Tổng quan về JavaScript 1. Tổng quan JavaScript là ngôn ngữ lập trình website phổ biến hiện nay, nó được tích hợp và nhúng vào HTML giúp website trở nên sống động hơn.

JavaScript đóng vai trò như là một phần của trang web, thực thi cho phép Client-side script từ phía người dùng cũng như phía máy chủ (Nodejs) tạo ra các trang web động. JavaScript là một ngôn ngữ lập trình thông dịch với khả năng hướng đến đối tượng. Là một trong 3 ngôn ngữ chính trong lập trình web và có mối liên hệ lẫn nhau để xây dựng một website sống động, chuyên nghiệp: HTML: Hỗ trợ trong việc xây dựng layout, thêm nội dung dễ dàng trên website. CSS: Hỗ trợ việc định dạng thiết kế, bố cục, style, màu sắc,… JavaScript: Tạo nên những nội dung “động” trên website.

Cùng tìm hiểu rõ hơn ở phần dưới đây. JS là viết tắt của JavaScript, khi có JS bạn sẽ hiểu đó đang nói đến JavaScript. Nhiệm vụ của Javascript là xử lý những đối tượng HTML trên trình duyệt. Nó có thể can thiệp với các hành động như thêm / xóa / sửa các thuộc tính CSS và các thẻ HTML một cách dễ dàng.

Hay nói cách khác, Javascript là một ngôn ngữ lập trình trên trình duyệt ở phía client. Tuy nhiên, hiện nay với sự xuất hiện của NodeJS đã giúp cho Javascript có thể làm việc ở backend. Bạn thử truy cập vào một số website trên internet thì sẽ thấy có những hiệu ứng slide, menu xổ xuống, các hình ảnh chạy qua chạy lại rất đẹp. tất cả các chức năng này đều được xử lý bằng Javascript đấy các bạn ạ.

Trong những năm gần đây, sự xuất hiện của các framework như NodeJS (chuyên code backend), ExpressJS (NodeJS framework), và nhiều thư viện frontend khác như Angular, jQuery, ReactJS ra đời, giúp tạo ra một cơn sốt với từ khóa Javascript Fullstack. Ưu điểm Một số ưu điểm nổi bật của ngôn ngữ lập trình JS như sau: ● Chương trình rất dễ học. ● Những lỗi Javascript rất dễ để phát hiện, từ đó giúp bạn sửa lỗi một cách nhanh chóng hơn. ● Những trình duyệt web có thể dịch thông qua HTML mà không cần sử dụng đến một compiler.

● JS có thể hoạt động ở trên nhiều nền tảng và các trình duyệt web khác nhau. ● Được các chuyên gia đánh giá là một loại ngôn ngữ lập trình nhẹ và nhanh hơn nhiều so với các ngôn ngữ lập trình khác. ● JS còn có thể được gắn trên một số các element hoặc những events của các trang web. ● Những website có sử dụng JS thì chúng sẽ giúp cho trang web đó có sự tương tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng.

● Người dùng cũng có thể tận dụng JS với mục đích là để kiểm tra những input thay vì cách kiểm tra thủ công thông qua hoạt động truy xuất database. ● Giao diện của ứng dụng phong phú với nhiều thành phần như Drag and Drop, Slider để cung cấp đến cho người dùng một Rich Interface (giao diện giàu tính năng). ● Giúp thao tác với người dùng phía Client và tách biệt giữa các Client với nhau. Nhược điểm Bên cạnh những ưu điểm kể trên thì JS vẫn có những nhược điểm riêng tương tự như các ngôn ngữ lập trình khác hiện nay.

Cụ thể: ● JS Code Snippet khá lớn. ● JS dễ bị các hacker và scammer khai thác hơn. ● JS cũng không có khả năng đa luồng hoặc đa dạng xử lý. ● Có thể được dùng để thực thi những mã độc ở trên máy tính của người sử dụng.PMCL Trang 4 ● Những thiết bị khác nhau có thể sẽ thực hiện JS khác nhau, từ đó dẫn đến sự không đồng nhất.

● Vì tính bảo mật và an toàn nên các Client-Side Javascript sẽ không cho phép đọc hoặc ghi các file. ● JS không được hỗ trợ khi bạn sử dụng ở trong tình trạng thiết bị được kết nối mạng. Tổng quan về ReactJs 2. Tổng quan ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook, ra mắt vào năm 2013 với mục đích để xây dựng giao diện người dùng.

Nó được sử dụng rộng rãi để xây dựng các trang web SPA (Single Page Application) và các ứng dụng trên nền tảng di động. Nó rất dễ sử dụng và cho phép người dùng có thể tạo các component UI có thể tái sử dụng. ReactJS có các tính năng hết sức nổi bật bao gồm: ● JSX: viết tắt của JavaScript extension, nó là React extension , giúp cho việc thay đổi cây DOM dễ dàng hơn bằng HTML-style code đơn giản. Nó là một trong những tính năng tốt và dễ sử dụng.

● Components: Một trang web được xây dựng bằng ReactJS là một sự kết hợp nhiều component lại với nhau chứ không phải chung một Template như bình thường. Các component cũng như các hàm JavaScript bình thường, giúp tạo ra các code dễ dàng bằng cách tách các logic ra thành các đoạn code độc lập có thể tái sử dụng. Chúng ta có thể sử dụng component dưới dạng function hoặc class, ngoài ra các component còn có state và props. ● Virtual DOM: ReactJS tạo một thứ gọi là Virtual DOM (DOM ảo).

Đúng như tên gọi, nó là một copy của DOM thật trên trang web đó. ReactJS dùng những DOM ảo đó để tìm đúng những DOM thật cần được cập nhật khi có bất kỳ sự kiện nào làm các thành phần bên trong nó thay đổi. ● Javascript Expressions: Biểu thức JS có thể sử dụng trong file .js bằng cách sử dụng cặp dấu ngoặc nhọn “{}”.PMCL Trang 5 ● Vì ReactJS sử dụng DOM ảo để cache cấu trúc dữ liệu trong bộ nhớ và chỉ những thay đổi cuối cùng mới được cập nhật vào trong DOM trình duyệt. Điều này làm cho ứng dụng trở nên nhanh hơn.

● Bạn có thể tạo các component theo từng chức năng mà bạn muốn bằng cách sử dụng tính năng react component. Các component này có thể tái sử dụng theo nhu cầu của bạn, đồng thời việc tạo các component theo từng chức năng cũng giúp cho việc bảo trì sau này trở nên dễ dàng hơn. ● ReactJS là một opensource, vì vậy cũng rất dễ cho những bạn mới bắt đầu tìm hiểu nó. ● Trong những năm gần đây, ReactJS đang trở nên phổ biến hơn và được duy trì bởi Facebook và Instagram.

Ngoài ra nó cũng được sử dụng bởi các công ty nổi tiếng như Apple, Netflix, … ● Facebook vẫn đang duy trì, phát triển, và cho ra những thay đổi mới. Vì thế bạn cứ yên tâm sử dụng ReactJS cho những dự án của bạn hoặc những dự án dành do doanh nghiệp. ● ReactJS có thể được sử dụng để xây dựng giao diện người dùng cho cả các ứng dụng dành cho máy tính và các ứng dụng di động. ● Dễ dàng cho việc test và debug, vì hầu hết các code đều được thực hiện bằng JavaScript chứ không phải bằng HTML.

Nhược điểm ● Vì hầu hết code được viết dưới dạng JSX, tức là HTML và CSS là một phần của JavaScript, nó không giống như những framework khác vẫn tách biệt giữa HTML và CSS nên những bạn mới làm quen với ReactJS sẽ hơi lúng túng và dễ nhầm lẫn giữa JSX và HTML. Tuy nhiên bạn sẽ nhanh chóng quen với cách kết hợp này của React mà thôi. ● Một nhược điểm nữa của ReactJS đó là dung lượng các file của nó hơi lớn. Tổng quan về NodeJs 3.

Tổng quan Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng trên V8 JavaScript Engine – trình thông dịch thực thi mã JavaScript giúp chúng ta có thể SE122.PMCL Trang 6 xây dựng được các ứng dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội phạm vi hẹp một cách nhanh chóng và dễ dàng mở rộng. NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới Linux, OS X nên đó cũng là một lợi thế. NodeJS cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất. Ý tưởng chính của Node js là sử dụng non-blocking, hướng sự vào ra dữ liệu thông qua các tác vụ thời gian thực một cách nhanh chóng.

Bởi vì, Node js có khả năng mở rộng nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng thông lượng cao. Nếu như các ứng dụng web truyền thống, các request tạo ra một luồng xử lý yêu cầu mới và chiếm RAM của hệ thống thì việc tài nguyên của hệ thống sẽ được sử dụng không hiệu quả.