Đồ án cơ sở 1 đề tài xây dựng website bán laptop

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT – HÀN Khoa Khoa Học Máy Tính ĐỒ ÁN CƠ SỞ ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN LAPTOP Sinh viên thực hiện: LÊ ĐỨC THIỆN - 21AD056 HOÀNG HỮU TIẾN ĐẠT - 21AD011 Giảng viên hướng dẫn: ThS NGUYỄN ĐỖ CÔNG PHÁP Đà Nẵng, tháng năm 2022 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT – HÀN Khoa Khoa Học Máy Tính ĐỒ ÁN CƠ SỞ ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN LAPTOP Sinh viên thực hiện: LÊ ĐỨC THIỆN - 21AD056 HOÀNG HỮU TIẾN ĐẠT - 21AD011 Giảng viên hướng dẫn: ThS NGUYỄN ĐỖ CÔNG PHÁP 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 Ths Nguyễn Đỗ Cơng Pháp 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 tất bạn Sinh viên, Hoàng Hữu Tiến Đạt Lê Đức Thiện Em xin chân thành cảm ơn! MỞ ĐẦU Ngày nay, khoa học cơng nghệ có bước phát triển mạnh mẽ chiều rộng lẫn chiều sâu Máy tính điện tử không coi phương tiện quý mà trở thành công cụ làm việc, giải trí thơng dụng người khơng cơng sở mà chí cịn gia đình Trong thời buổi nay, mà công nghệ phát triển, công nghệ thông tin phát triển giới Việt Nam dần khẳng định vị nghành kinh tế thị trường Cùng với đời ngơn ngữ lập trình cho phép thiết kế xây dựng ứng dụng thương mại điện tử nhiều hình thức khác Và ứng dụng thương mại diện tử phổ biến nước ta kinh doanh bán hàng qua mạng internet Dịch vụ cho phép người dùng tìm kiếm lựa chọn sản phẩm cần mua mà không cần phải đến trực tiếp hàng mua nhà, mà cần sử dụng thiết bị máy tính điện thoại có kết nối internet để truy cập website Tuy nhiên dịch vụ nhiều người, đặc biệt người khơng có kiến thức cơng nghệ thơng tin Nên đối tượng trang web chủ yếu tầng lớp tri thức học sinh, sinh viên Là người sinh viên, có chút kiến thức tin học tiếp xúc nhiều dịch vụ kinh doanh bán hàng mạng Hiểu vấn đề mong muốn đưa website bán máy tính xách tay đến với nhiều người tiêu dùng Vì chúng em định thực đề tài: “Thiết kế website bán máy tính xách tay” Đồ án cở em gồm ba chương: - Chương 1: Tổng quan đề tài - Chương 2: Cơ sở lý thuyết Chương 3: Xây dựng Website Những kiến thức, lực đạt trình học tập em năm qua đánh giá qua đợt bảo vệ đồ án cuối kỳ Sản phẩm kết đạt kiến thức tích luỹ trình học tập nghiên cứu Đây sản phẩm nhóm chúng em năm học thứ trường NHẬN XÉT MỤC LỤC LỜI CẢM ƠN MỞ ĐẦU NHẬN XÉT .5 MỤC LỤC 1.1 Tổng quan đề tài 1.1.1 Tên đề tài: Website bán máy tính xách tay 1.1.2 Lý chọn đề tài: 1.1.3 Mục tiêu đề tài .8 1.1.4 Đối tượng phạm vi đề tài: .9 1.1.5 Tiêu chí chức đề tài: 1.1.6 Đề xuất nội dung thực hiện: 10 1.2 Phương pháp , kết quả: .11 1.2.1 Phương pháp .11 1.2.2 Kết 11 CHƯƠNG - CƠ SỞ LÝ THUYẾT 12 1.1 Sơ lược ngơn ngử lập trình HTML 12 1.2 Sơ lược ngơn ngữ lập trình Web Bootstrap 12 1.3 Giới thiệu phần mềm Visual Studio Code 12 1.3.1 Visual Code gì? 12 1.3.2 Những tính mạnh mẽ Visual Code .13 1.4 Giới thiệu môi trường hoạt động Chrome 14 1.4.1 Thu thập liệu 15 1.4.2 Lập mục 15 1.4.3 Phân phát (và xếp hạng) .15 CHƯƠNG 3- XÂY DỰNG WEBSTIE 1.1 Giao diện Website 1.2 Kết luận định hướng phát triển DANH MỤC HÌNH ẢNH Hình 1: Hình ảnh logo Website Hình 2: Giao diện trang chủ 16 Hình 3: Giao diện thơng tin sản phẩm 17 Hình 4: Giao diện giỏ hàng .17 Hình 5: Giao diện đăng nhập 18 Hình 6: Giao diện đăng ký 18 Hình 7: Giao diện tốn 19 Hình 8: Thơng báo tốn .19 DANH MỤC TỪ VIẾT TẮT STT Ký hiệu chữ viết tắt Chữ viết đầy đủ HTML HyperText Markup Language CSS Cascading Style Sheet VSCode Visual Studio Code IDE Integrated Development Environment AI Artificial Intelligence CHƯƠNG – TỔNG QUAN VỀ ĐỀ TÀI 1.1 Tổng quan đề tài 1.1.1 Tên đề tài: Website bán Laptop Hình Hình ảnh logo website 1.1.2 Lý chọn đề tài: Kể từ đại dịch Covid-19 diễn ra, xu hướng làm việc nhà (work from home) dần trở nên phổ biến có khả thay kiểu làm việc truyền thống văn phòng Dịch Covid-19 ảnh hưởng đến tất thứ, khiến môi trường làm việc thay đổi, yêu cầu cải tiến giải pháp trực tuyến Làm việc nhà hay đâu trở nên bình thường hóa thời điểm Tuy nhiên, nhiều người làm việc theo hướng truyền thống văn phòng nên việc trang bị thiết bị làm việc, học tập trực tuyến chưa đầy đủ Nhận thức nhu cầu lớn người dùng thị trường máy tính nói chung thiết bị di dộng laptop nói riêng, nhóm chúng em định xây dựng trang web cung cấp cho người dùng mẫu laptop với giá phù hợp với túi tiền tất người 1.1.3 Mục tiêu đề tài Có mục tiêu thực nghiên cứu đề tài: - Học tập nghiên cứu kiến thức sau: Phân tích hệ thống thơng tin, cách xây dựng trang web thương mại điện tử, HTML/CSS, JavaScript - Xây dựng sản phẩm trang “Website bán laptop” cung cấp số chức để đáp ứng nhu cầu mua sắm trực tuyến khách hàng 1.1.4 Đối tượng phạm vi đề tài: - Đối tượng nghiên cứu: + Quy trình thực thiết kế website bán laptop trực tuyến HTML/CSS Javascript đảm bảo chức cho khách hàng - Phạm vi đề tài: + Website bán laptop áp dụng cho cá nhân hay tổ chức muốn sử dụng, kinh doanh máy tính xách tay hình thức trực tuyến nhằm tiết kiệm chi phí mặt bằng, nguồn nhân lực, thời gian quản lý + Ngồi website mở rộng đáp ứng cho công ty muốn mua lượng lớn máy tính xách tay cho nhân viên 1.1.5 Tiêu chí chức đề tài: - Sản phẩm website “Bán laptop” với chức cho hai đối tượng khách hàng - Một số tiêu chí chức năng: + Khách hàng: * Giao diện web dễ sử dụng có tính thẩm mĩ cao * Giao diện web phải thiết kế cho nội dung hiển thị phải xác đầy đủ thơng tin để đáp ứng nhu cầu khách hàng * Để thuận tiện cho việc mua bán giao dịch, hệ thống cần phải cho phép người dùng đăng kí tài khoản, thơng tin đăng kí phải bảo mật an tồn, xác, tránh sai sót * Để thuận tiện cho việc lựa chon sản phẩm hệ thống cung cấp chức cho phép khách hàng tìm kiếm sản phẩm theo yêu cầu * Để thuận tiện cho việc chọn mua sản phẩm hệ thống cho phép người truy cập người dùng xem chi tiết mặt hàng * Để tiến hành mua hàng hệ thống cho phép người truy cập người dùng phép thêm sản phẩm bắt kì vào giỏ hàng * Để thuận tiện cho khách hàng việc tính tốn giá mặt hàng hệ thống cho phép người truy cập người dùng xem chi tiết giỏ hàng họ * Để thuận tiện cho mua hàng hệ thống cho phép người truy cập người dùng cập nhật số lượng, thêm, xóa sản phẩm giỏ hàng họ - Nếu người dùng đăng nhập tốn tiến hành giao hàng - Hình thức tốn phải dễ sử dụng bảo mật 1.1.6 Đề xuất nội dung thực hiện: Thiết kế giao diện Website bán laptop nhằm để cung cấp cho tất người 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 10 1.2 Phương pháp, kết quả: 1.2.1 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 1.2.2 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 Ngoài trang web thiết kế dễ dàng sử dụng tiện nâng cấp tương lai Nhưng bên cạnh đó, trang web cịn số chức chưa hoàn thiện chưa khai thác nhiều nội dung Nhóm cố gắng cải tiến khắc phục thời gian sớm CHƯƠNG - CƠ SỞ LÝ THUYẾT 1.1 Sơ lược ngơn ngữ lập trình 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… trình soạn thảo chuyên dụng visual studio, sublime text 3… Một file HTML có hai định dạng mở rộng html htm 11 1.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 1.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 1.4 Giới thiệu phần mềm Visual Studio Code 1.4.1 Visual Code gì? 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 2.4.1 Những tính mạnh mẽ Visual Code 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 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 12 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ầu hết Code Editor đại có IntelliSense, phần mềm chuyên 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 13 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 1.5 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 1.5.1 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, nhóm 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 14 1.5.2 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 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 1.5.3 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) CHƯƠNG - XÂY DỰNG WEBSITE 15 1.1 Giao diện Website: Hình 2: Giao diện trang chủ (bao gồm phần slide giới thiệu sản phẩm danh mục sản phẩm) Hình : Giao diện thông tin sản phẩm (bao gồm giá thông tin sản phẩm) Hình 4: Giao diện giỏ hàng (bao gồm tên sản phẩm, giá sản phẩm, mục ghi khách hàng) Hình 5: Giao diện đăng nhập (người dùng cần nhập tên đăng nhập/email mật để đăng nhập) 17 Hình 6: Giao diện đăng ký (người dùng cần nhập họ tên, email mật để đăng ký) Hình 7: Giao diện tốn (người dùng cần nhập thông tin cá nhân họ tên, địa chỉ, số điện thoại chọn phương thức tốn) 18 Hình 8: Thơng báo tốn (khi người dùng nhập thơng tin bấm nút Hồn tất đơn hàng thơng báo tốn thành cơng) 1.2 Kết luận định hướng phát triển 1.2.1 Kết luận: - Qua trình thực đồ án, em tổng hợp lại kiến thức thời gian học Trường Đồng thời, em tìm hiểu nắm quy trình xây dựng website bản, chủ động việc tìm kiếm thông tin để phục vụ công việc Đồ án có gần đầy đủ phần website bán hàng - Trong suốt trình làm đồ án mặt lý thuyết em tìm hiểu sâu về: + Ngôn ngữ HTML + CSS + Javascript + Bootstraps - Vì thời gian có hạn, vốn kiến thức chưa đủ kinh nghiệm thực tế chưa nhiều nên việc xây dựng website thiếu sót nhiều Tuy nhiên, xây dựng 19 hệ thống với chức chính, có chức chưa đầy đủ, nhiều chức có chưa tiện dụng đơn giản: + Cho phép khách hàng truy cập xem thông tin sản phẩm + Hiển thị đầy đủ sản phẩm mức giá sản phẩm + Có phần giỏ hàng trang toán cho người dùng - Tuy nhiên trang web hồn thiện tương lai cần phải có chức như: + Mục tìm kiếm, u thích + Cải thiện thêm sản phẩm vào giỏ hàng giỏ hàng + Hiển thị thêm banner quảng cáo, sản phẩm khuyến + Thêm chức nhập mã giảm giá cho khách hàng 1.2.2 Hướng phát triển tương lai: - Hướng phát triển đồ án nhóm hồn thiện thành phần cần thiết bổ sung thêm chức Nhóm hoàn thiện đồ án cách chỉnh chu sau học hồn thiện mơn Thiết kế Website cách để kết nối với sở liệu để đưa sản phẩm hoàn chỉnh TÀI LIỆU THAM KHẢO [1] https://www.w3schools.com/bootstrap/ [2] https://www.w3schools.com/js/default.asp [3] https://overapi.com/html [4] https://stackoverflow.com/ [5] https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/ [6] Nguồn ảnh tham khảo: https://gearvn.com/ https://hacom.vn/ https://sp-one.vn/ 20