BÁO CÁO ĐỒ ÁN CƠ SỞ 1ĐỀ TÀI: THIẾT KẾ WEBSITEHỌC LẬP TRÌNH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH BÁO CÁO ĐỒ ÁN CƠ SỞ ĐỀ TÀI: THIẾT KẾ WEBSITE HỌC LẬP TRÌNH Sinh viên thực : VÕ THỊ THẢO VY BÙI THỊ HÀ TIÊN Giảng viên hướng dẫn: TS PHẠM NGUYỄN MINH NHỰT Lớp : 20IT4 Đà nẵng, tháng năm 2021 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH ĐỒ ÁN CƠ SỞ THIẾT KẾ WEBSITE HỌC LẬP TRÌNH Sinh viên thực : VÕ THỊ THẢO VY BÙI THỊ HÀ TIÊN Giảng viên hướng dẫn: TS PHẠM NGUYỄN MINH NHỰT Lớp : 20IT4 Đà Nẵng, tháng năm 2021 LỜI MỞ ĐẦU Tự học lập trình ln nhu cầu cần thiết Lập trình viên Chẳng tự học, tự tìm hiểu, tự nghiên cứu tự cải thiện thân Nhưng vơ vàn nguồn tài liệu mạng, chọn lấy nơi thực hiệu tiết kiệm chi phí lại chẳng dễ dàng Wincode giúp bạn bỏ túi vài tên cực chất lượng nhé! Đề tài nhằm mục tiêu hỗ trợ cho tất người học hỏi có thêm kiến thức loại ngơn ngữ lập trình, trao đổi góp ý dạng tập, diễn đàn thảo luận, có thêm nhiều lựa chọn hợp lí Vì vậy, chúng em chọn đề tài “Thiết kế website học lập trình” LỜI CẢM ƠN Lời cho phép em gửi lời cảm ơn tới Thầy Cô giáo, cán công tác Khoa Khoa Học Máy Tính, Trường ĐH Cơng Nghệ Thơng Tin Và Truyền Thông Việt - Hàn tạo điều kiện giúp đỡ chúng em thời gian xây dựng hoàn thành đồ án Đặc biệt em xin bày tỏ lòng biết ơn sâu sắc tới thầy TS Phạm Nguyễn Minh Nhựt người tận tình giúp đỡ, bảo nghiệp vụ trực tiếp hướng dẫn nhóm chúng em suốt q trình hồn thành đồ án Tuy nhiên thời gian có hạn với nhiều nguyên nhân khác, chúng em nổ lực xong đồ án nhóm, cịn mắc phải thiếu sót hạn chế Em mong nhận thông cảm bảo Thầy Cô tất bạn Em xin chân thành cảm ơn ! NHẬN XÉT (Của giảng viên hướng dẫn) ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… …………………………………………………………………………… ………………………………………………………………………………… ……………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… … ………………………………………………………………………………… ……………………………………………………………………………… ………………………………………………………………………………… MỤC LỤC DANH MỤC CỤM TỪ VIẾT TẮT .8 CHƯƠNG 1: GIỚI THIỆU 1.1.Tổng quan Bối cảnh thực đề tài: 2.1.Vấn đề cần giải quyết: 2.2 Đề xuất nội dung thực hiện: 1.2.Phương pháp, kết quả: Phương pháp: Kết quả: 1.3.Cấu trúc đồ án Chương CHƯƠNG 2: CƠ SỞ LÝ THUYẾT .11 2.1.Sơ lược ngôn ngữ lập trình web HTML 2.2.Sơ lược ngơn ngữ lập trình web CSS 2.3.Sơ lược ngơn ngữ lập trình web Bootstrap 2.4.Giới thiệu phần mềm Visual Studio Code Giới thiệu môi trường hoạt động Chrome: CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 15 3.1.Mơ hình tổng quan hệ thống nghiên cứu Phương pháp 1: Phương pháp tiếp cận thị trường Phương pháp 2: Phương pháp chuyên môn 3.2.Thiết kế chi tiết Đối tượng website Đặc điểm CHƯƠNG 4: TRIỂN KHAI XÂY DỰNG 18 4.2.Trang chủ 4.3.Trang đăng nhập, đăng ký 20 Kết luận Hướng phát triển .21 DANH MỤC HÌNH ẢNH DANH MỤC CỤM TỪ VIẾT TẮT STT Cụm từ HyperText Markup Language Cascading Style Sheet Viết tắt HTML CSS … CHƯƠNG 1: GIỚI THIỆU 1.1 Tổng quan Bối cảnh thực đề tài: Học lập trình phát triển nhanh chóng năm qua, từ sở thích cá nhân trở thành nghiệp biết người Tuy nhiên, khơng phải cso thể tìm thấy trang web học lập trình hiệu nhue hợp lí cho thân Vì vậy, chúng em chọn đề tài “thiết kế website học lập trình” để giúp tất người học hỏi, có thêm nhiều kiến thức, giảng ngôn ngữ lập trình 2.1 Vấn đề cần giải quyết: - Website học lập trình nhằm giúp cho người muốn học lập trình tự học cách hiệu nhất, đưa lời khuyên, giải đáp để hướng dẫn bạn tiến - Website giải vấn đề chi phí thắc mắc trình học 2.2 Tiết kiệm chi phí, học đâu Đề xuất nội dung thực hiện: - Thiết kế giao diện website giới thiệu loại ngôn ngữ lập trình có nhằm giúp người dùng dễ dàng xem thông tin - Thiết kế giao diện website cho phép dùng truy cập vào trang web cách nhanh chóng mà khơng thủ tục phức tạp - Website công khai, minh bạch cung cấp thơng tin xác nhằm đem lại tin cậy cho người dùng 1.2 Phương pháp, kết quả: Phương pháp: - Trước tiên ta phải phân tích thiết kế giao diện, hệ thống website phần mềm - Dựa kiến thức học, sử dụng ngôn ngữ HTML, CSS, Bootstrap số công cụ lập trình Sublime Text để thiết kế website tĩnh - Tham khảo, tiếp thu ý kiến, thông tin từ giảng viên hướng dẫn để hoàn thiện website tốt phần mềm ngôn ngữ sử dụng Kết quả: - Giao diện hội tụ đủ ba yếu tố độc đáo, tinh tế đại Hình ảnh sắc nét sống động Tiện lợi cho việc người dùng tìm hiểu rõ loại ngơn ngữ lập trình Tốc độ tải trang web nhanh Website tương thích với thiết bị di động hay máy tính thị trường Ngồi trang web thiết kế dễ dàng sử dụng tiện nâng cấp tương lai - Ngồi ra, trang web cịn số chức chưa hòan thiện chưa khai thác nhiều nội dung 1.3 Cấu trúc đồ án - Chương 2: Nghiên cứu thiết kế Đây chương nêu cụ thể lý thuyết ngôn ngữ lập trình webiste Do giúp ta hiểu cụ thể ngôn ngữ lập trình ngơn ngữ siêu văn - Chương 3: Phân tích thiết kế hệ thống Chương tập trung vào cách thức hoạt động website miêu tả chi tiết chức để giúp cho khách hàng tiếp cận dễ dàng với trang web - Chương 4: Kết đạt Ở chương trình bày số kết đạt được, thư viện sử dụng sau thiết kế giao diện website Cuối phần kết luận hướng phát triển đề tài 10 Chương 2.1 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT Sơ lược ngơn ngữ lập trình web HTML HTML chữ viết tắt HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản) HTML sinh để tạo nên trang web với mẫu thơng tin trình bày World Wide Web HTML viết lên phần mềm, trình soạn thảo văn thơng thường notepad++, editplus, …hoặc trình soạn thảo chuyên dụng visual studio, sublime text 3, … Một file HTML có hai địng dạng mở rộng html htm 2.2 Sơ lược ngơn ngữ lập trình web CSS CSS (Cascading Style Sheet) Web cấu tạo từ thẻ html với thẻ html thể khung website Để chỉnh, trình bày cho đẹp mắt ta cần sử dụng ngơn ngữ CSS Đây ngôn ngữ dùng nhiều ngôn ngữ website, thường ngôn ngữ html 2.3 Sơ lược ngơn ngữ lập trình web Bootstrap Bootstrap xây dựng dựa tảng HTML templates, CSS templates Javascript để hình thành nên mẫu thiết kế có sẵn typography, forms, buttons (nút bấm), tables(bảng), navigation, modals, image carousels nhiều thành phần khác Với mục đích giúp cho nhà phát triển thiết kế reponsive cho website dễ dàng nhanh hơn, plugin Javascript tích hợp Bootstrap 2.4 Giới thiệu phần mềm Visual Studio Code 4.1 Khái niệm Visual Code VisualCode công cụ soạn thảo mã nguồn Microsoft phát triển, giới thiệu lần đầu vào năm 2015 thức phát hành năm 2016 VSCode cài đặt sử dụng Windows, MacOS Linux VSCode mã nguồn mở hồn tồn miễn phí Có thể nói VisualCode kết hợp tuyệt vời tính đơn giản editor công cụ hỗ trợ mạnh mẽ dành cho lập trình viên Debugger, Git, Terminal cịn nhiều Đúng vậy, nhìn chung VSCode Code Editor độ hữu ích khơng cạnh IDE 4.2 Những tính mạnh mẽ VisualCode Nói đến tính hỗ trợ lập trình viên từ lúc bắt đầu, VSCode cho thấy vượt trội so với Code Editor khác Tiêu biểu 11 số tính kể đến như: • IntelliSense: IntelliSense kết hợp code auto-complete trí tuệ nhân tạo (AI) Tính cung cấp loạt đề nghị với gợi ý mô tả ngắn ta viết code Những gợi ý tính tốn dựa theo nhân tố bối cảnh ngơn ngữ lập trình, cú pháp, biến, hàm, code file hết Code Editor đại có IntelliSense, phần mềm chun nghiệp VisualCode Đây tính nâng cao hiệu suất lập trình khơng thể thiếu lập trình viên chuyên nghiệp VisualCode cung cấp sẵn IntelliSense cho ngơn ngữ lập trình JavaScript, CSS, HTML, TypeScript Ngồi bạn cài thêm IntelliSense cho ngơn ngữ khác thơng qua extension, bạn tự custom tính cho phù hợp với mình, tiện q khơng nào! • Tích hợp sẵn Git: Nhu cầu làm việc nhóm lưu trữ khơng thể thiếu, tích hợp Git vào Code Editor tính lựa chọn đắn Git VisualCode cung cấp cho bạn git action commit code, pull, push, … Và qua phiên việc hỗ trợ Git đầy đủ • Debugger: Một tính VisualCode khả hỗ trợ debug tuyệt vời Theo mặc định, VisualCode kèm theo trình Debug hỗ trợ NodeJS Nhưng tất nhiên, lần nữa, bạn cài thêm extension để debug cho ngơn ngữ khác • Tích hợp Terminal: Terminal chương trình giao diện cửa sổ dịng lệnh (command line interface) Cũng Git, nhu cầu sử dụng terminal lập trình viên vơ quan trọng Trên VisualCode, bạn mở nhiều tab terminal thư mục làm việc tại, điều làm tăng hiệu suất công việc lên nhiều • Khả tùy chỉnh mở rộng: VisualCode cung cấp khả tùy chỉnh tuyệt vời dành cho người dùng, từ theme, font chữ, kích thước đến tùy chỉnh tính năng, keyboard 12 shortcut, snippets, coding style, … vơ linh hoạt Ngồi bạn cịn tùy chỉnh workspace tiện lợi cho loại dự án Cũng Code Editor/IDE khác, VisualCode có khả mở rộng thơng qua việc cài thêm extension Giới thiệu môi trường hoạt động Chrome: Google lấy thông tin từ nhiều nguồn khác nhau, bao gồm: - Trang web - Nội dung người dùng gửi, chẳng hạn nội dung người dùng gửi Google Doanh nghiệp Maps - Nội dung quét từ sách - Cơ sở liệu công khai Internet - Và nhiều nguồn khác Google thực ba bước để tạo kết từ trang web: • Thu thập liệu: - Bước tìm trang tồn web Google không lưu giữ danh mục trung tâm trang web, đó, chúng tơi phải liên tục tìm kiếm trang thêm trang vào danh sách trang biết Google biết đến số trang chúng tơi truy cập trang từ trước Google tìm thấy trang khác theo đường liên kết từ trang biết đến trang Ngồi ra, chúng tơi phát số trang khác chủ sở hữu trang web gửi danh sách trang để Google thu thập liệu Nếu bạn sử dụng nhà cung cấp dịch vụ lưu trữ web quản lý, họ u cầu Google thu thập liệu trang bạn tạo cập nhật - Khi phát URL trang, Google truy cập thu thập liệu trang để tìm hiểu nội dung trang Google hiển thị trang phân tích nội dung văn lẫn nội dung văn bố cục hiển thị tổng thể để định vị trí trang kết Tìm kiếm Càng hiểu rõ trang web bạn Google hiển thị trang cho người tìm kiếm nội dung bạn cách phù hợp nhiêu • Lập mục: Sau tìm thấy trang, Google cố gắng tìm hiểu nội dung trang Q trình gọi lập mục Google phân tích nội dung 13 trang, lập danh mục hình ảnh tệp video nhúng trang cố gắng tìm hiểu trang theo cách khác Thơng tin lưu trữ mục Google – sở liệu khổng lồ lưu trữ nhiều máy tính • Phân phát (và xếp hạng): Khi người dùng nhập cụm từ tìm kiếm, Google cố gắng tìm câu trả lời phù hợp mục dựa nhiều yếu tố Google cố gắng xác định câu trả lời có chất lượng cao xem xét yếu tố cung cấp trải nghiệm người dùng tốt câu trả lời phù hợp nhất, vị trí, ngơn ngữ thiết bị người dùng (máy tính điện thoại) 14 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 3.1 Mơ hình tổng quan hệ thống nghiên cứu Phương pháp 1: Phương pháp tiếp cận thị trường - Bằng cách đáp ứng nhu cầu người dùng: có nhiều website học lập trình, nhiên hầu hết website có tính phí cho số khóa học, cịn website hồn tồn miễn phí khơng có đầy đủ khóa học mà người học cần Đồng thời, số lượng tập, dạng tập thực hành chưa thực phong phú - Trang web đặt mục tiêu rõ ràng, nâng cao tính cạnh tranh, tạo khác biệt trang web khác Phương pháp 2: Phương pháp chuyên mơn - Sử dụng ngơn ngữ lập trình web thơng dụng như: CSS, Bootstrap, HTML, … - Tạo bố cục giao diện cách khoa học hợp lý, màu săc hài hòa bắt mắt - Đưa nội dung, chất lượng website cách xác - Phương án tổ chức chuyên môn cao Luôn cập nhật kiện mới, kiến thức để thu hút người học truy cập trang web - Tư vấn nội dung với lĩnh vực cho người học dễ đánh bắt, tiếp thu phù hợp với tính cách học hỏi người 3.2 Thiết kế chi tiết Đối tượng website Website xây dựng để phục vụ hai đối tượng Admin User với chức sau: • Admin - Đăng nhập website - Xem, cập nhật, xố thơng tin học - Xem, trả lời ý kiến, góp ý phản hồi người học - Xem, xố thơng tin người học không quyền thay đổi thông tin 15 • User - Đã có tài khoản - Có quyền đăng nhập, đăng xuất, đổi mật - Học khóa học website hồn tồn miễn phí - Được tham gia thi, nhận thông báo, cập nhật website Đặc điểm  Các module • Module đăng ký thành viên đăng nhập hệ thống Mỗi người dùng truy cập website quyền đăng ký môt tài khoản riêng Sau đăng nhập người học học khóa học hồn tồn miễn phí mà khơng giới hạn Một tài khoản khách hàng đăng ký lưu trữ thơng tin cá nhân khách hàng • Module tìm kiếm khóa học, học Người học cung cấp chức tìm kiếm website • Trang giới thiệu: Giới thiệu thông tin khóa học website, slogan website, giá trị mà website mang đến cho người học • Trang liên hệ: Khách hàng liên hệ với admin để gửi thắc mắc, ý kiến đóng góp để website ngày hồn thiện • Module quản lý khóa học, học Người quản trị thêm, sửa, xóa, cập nhật thơng tin học, khóa học • Module khác 16 17 CHƯƠNG 4: TRIỂN KHAI XÂY DỰNG 4.2 Trang chủ Hình Giao diện trang chủ Trang chủ thiết kế với giao diện đơn giản, dễ nhìn thân thiện với người học Trang chủ giúp cho người học có nhìn tổng quan trang web Đồng thời giới thiệu cho người học chức chính, giá trị mà website WINCODE mang lại cho người học Trên menu chức website như: cung cấp khóa học hồn tồn miễn phí, trang diễn đàn thảo luận trực tuyến, tìm kiếm khóa học, đăng nhập, đăng ký… Hình Giao diện trang chủ (tiếp theo) 18 Trên trang chủ có banner giới thiệu website, banner thông báo cho người học thi lập trình diễn tới hệ thống Những thi tổ chức hàng tháng để ngày nâng cao trình độ code người học Hình Giao diện trang chủ (tiếp theo) Trên trang chủ website cịn giưới thiệu cho người học khóa học phổ biến hệ thống Và đồng thời giới thiệu tổng quan cho người học lợi ích, kiến thức, kỹ mà người học có sau hồn thành khóa học Hình Giao diện trang chủ (tiếp theo) 19 Cuối website thông tin liên lạc, trang địa nơi học viên trao đổi để trở thành cộng tác viên website WINCODE, đồng thời để nhận thắc mắc, đóng góp ý kiến người học để website ngày hoàn thiện 4.3 Trang đăng nhập, đăng ký Hình Trang đăng ký Hình Trang đăng nhập Trang đăng ký có chức cho phép người dùng tạo tài khoản để thuận tiện việc học tập Sau đăng nhập vào hệ thống, người dùng học tập mà khơng bị khơng giới hạn, hệ thống sễ dàng lưu lịch sử, tiến độ học tập người dùng Đồng thời, giúp cho người học trao đổi, bình luận học để việc học trở nên hiệu 20 Kết luận Hướng phát triển Lý thuyết - Cơ nắm lý thuyết, bước xây dựng website, thực quy trình Thực hành - Xây dựng bố cục trang web hợp lý, bước đầu thực nghiệp vụ hệ thống Ưu điểm - Website có bố cục hợp lý, màu sắc hài hòa, bắt mắt - Thực số chức dự kiến Tồn - Website nhỏ, mang tính chất mô - Cơ sở liệu nhỏ, chức phân quyền chưa tối ưu - Chưa thực nhiều chức dự kiến Hướng phát triển - Xây dựng website sử dụng được, đáp ứng đầy đủ yêu cầu nghiệp vụ hệ thống - Phân quyền quản trị tối ưu - Cơ sở liệu phong phú - Xây dựng thêm chức năng: tích hợp thêm nhiều mini game lập trình hệ thống để tăng khả tư duy, củng cố kiến thức học người dùng Kết luận Website đời với mục đích hướng tới cộng đồng người có niềm đam mê với lập trình, nên mong cho website ln phát triển cách tốt có ích Mặc dù cố gắng hoàn chỉnh yêu cầu báo cáo cịn nhiều thiếu sót, mong nhận bảo hướng dẫn thầy cô để website hồn chỉnh Em xin chân thành cảm ơn quý thầy cô 21 size 13, …………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… ………………………………………………………………………… 22