ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI: THIẾT KẾ WEBSITE BÁN LAPTOP. Giảng viên hướng dẫn : THS. NINH KHÁNH CHI

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CNTT - TT VIỆT HÀN ĐỒ ÁN CƠ SỞ ĐỀ TÀI: THIẾT KẾ WEBSITE BÁN LAPTOP Sinh viên thực : NGUYỄN THỊ TRANG TRẦN HỮU TƯỜNG VY Giảng viên hướng dẫn : THS NINH KHÁNH CHI Lớp : 20IT8 20IT2 Đà nẵng, tháng 05 năm 2021 ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CNTT - TT VIỆT HÀN ĐỒ ÁN CƠ SỞ ĐỀ TÀI: THIẾT KẾ WEBSITE BÁN LAPTOP Đà Nẵng, tháng 05, năm 2021 MỞ ĐẦU 1.Lí chọn đề tài - Trong thời đại ngày nay, đất nước ta hội nhập vào công nghệ 4.0 với phát triển nhanh chóng cơng nghệ thông tin áp dụng lĩnh vực sống kinh tế, trị, ăn hóa xã hội,… tất cần có cơng nghệ thơng tin - Để khách hàng internet biết đến doanh nghiệp nhiều hơn, theo quy luật tất yếu có cung có cầu từ website thương mại điện tử đời nhằm đáp ứng nhu cầu giao dịch khách hàng doanh nghiệp ngược lại Chính nhu cầu có website thương mại điện tử để giao dịch mạng doanh nghiệp tang cao - Trong trình khảo sát tìm hiểu, nắm bắt nhu cầu doanh nghiệp cần website thương mại điện tử Vì em dã chọn đề tài “thiết kế website bán laptop” 2.Mục tiêu đề tài - Mục đích em xây dựng phần mềm ứng dụng kết nối đường dây internet vụ phụ nhu cầu mua bán hàng hóa trực tuyến Người mua hàng cần tốn thời gian để dăng kí trực tuyến thơng tin sau tìm hiểu đẩy thơng tin cần thiết đặt hàng Khách hàng chấp nhận mua hàng, hệ thống báo cho khách hàng biết mua thành công Và công ty giao hàng đến địa khách hàng cung cấp - Xây dựng hệ thống hỗ trợ cho việc bán hàng trực tuyến internet: + Nhanh chóng, hiệu + Đảm bảo xác, tiện lợi dễ dàng sử dụng ccho khách hàng + Thuận tiện việc bán mua hàng Chương LỜI CẢM ƠN Lời cho phép chúng em gửi lời cảm ơn tới thầy cô giáo cán công tác Trường ĐH Công Nghệ Thông Tin 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 chúng em xin bày tỏ lịng biết ơn sâu sắc tới giáo Ninh Khánh Chi người tận tình giúp đỡ, bảo nghiệp vụ trực tiếp hướng dẫn 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, em nỗ lực xong đồ án chúng em 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! Đà Nẵng, tháng 05 năm 2021 NHẬN XÉT NHẬN XÉT (Của giảng viên hướng dẫn) MỤC LỤC MỞ ĐẦU Chương LỜI CẢM ƠN NHẬN XÉT MỤC LỤC CHƯƠNG 1: CƠ SỞ LÍ THUYẾT 1.1.Giới thiệu ngôn ngữ HTML, CSS, BOOTSTRAP 1.1.1 HTML gì? 1.1.2 CSS gì? 1.1.3.BOOTSTRAP gì? 1.2.Giới thiệu phần mềm Visual Studio Code 3.2 Giao diện trang đăng nhập -Phía Banner cịn có nút LỌC tìm kiếm 16 3.4 Giao diện Main Content 3.5 Giao diện Footer CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 4.1 Kết đạt 4.2 Hạn chế 4.3 Hướng phát triển DANH MỤC CỤM TỪ VIẾT TẮT STT Cụm từ Công nghệ phần mềm Công nghệ thông tin Hyper Text Markup Language Cascading Style Sheets JavaScript Viết tắt CNPM CNTT HTML CSS JS CHƯƠNG 1: CƠ SỞ LÍ THUYẾT 1.1.Giới thiệu ngơn ngữ HTML, CSS, BOOTSTRAP 1.1.1 HTML gì? HTML (viết tắt từ Hypertext Markup Language, "Ngôn ngữ Đánh dấu Siêu văn bản") ngôn ngữ đánh dấu thiết kế để tạo nên trang web World Wide Web 1.1.2 CSS gì? CSS ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language Nó dung để tạo phong cách định kiểu cho yếu tố viết dạng ngơn ngữ đánh dấu 1.1.3.BOOTSTRAP gì? Bootstrap framework HTML, CSS, JavaScript cho phép người dùng dễ dàng thiết kế website theo chuẩn định, tạo website thân thiện với thiết bị cầm tay mobile, ipad, tablet, 1.2.Giới thiệu phần mềm Visual Studio Code VisualCode 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 nhiều Đúng vậy, nhìn chung VSCode Code Editor độ hữu ích khơng cạnh IDE 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 số tính kể đến như: 1.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ầ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! 2.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à phiên việc hỗ trợ Git đầy đủ 3.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 10 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 Ngoài ra, 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 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 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) Ví dụ: dù tìm kiếm "cửa hàng sửa xe đạp" người dùng Paris người dùng Hong Kong nhận kết khác Google không nhận tiền để xếp hạng trang cao quy trình xếp hạng thực theo chương trình CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 12 2.1 Mô tả chức Đây website bán giới thiệu sản phẩm cửa hàng, công ty đến người tiêu dùng với chi tiết mặt hàng với giá xác Có chức sau: - Hiển thị danh sách mặt hàng theo loại - Hiển thị hàng hóa khách hàng chọn mua - Quản lý đơn đặt hàng - Cập nhật hàng hóa, nhà sản xuất, loại hàng, tin tức - Xử lý đơn hàng 2.2Yêu cầu đặt Thứ nhất: Dành cho khách hàng: Khách hàng người có nhu cầu mua sắm hàng hóa, họ tìm kiếm mặt hàng cần thiết từ hệ thống đặt mua mặt hàng Vì phải có chức sau: - Hiển thị danh sách mặt hàng cửa hàng để khách hàng xem, lựa chọn mua - Khách hàng xem thông tin tin tức mới, khuyến trang web - Sau khách hàng chọn đặt hàng trực tiếp phải lên đơn hàng để khách hàng nhập thơng tin mua hàng xem hóa đơn mua hàng Thứ hai: Dành cho người quản trị: Người làm chủ ứng dụng có quyền kiểm sốt hoạt động hệ thống Người cấp username passwword để đăng nhập hệ thống thực chức mình: -Chức cập nhật, sửa, xóa mặt hàng, loại hàng, nhà sản xuất, tin tức Nó địi hỏi xác -Tiếp nhận kiểm tra đơn đặt hàng khách hàng Hiển thị đơn đặt hàng -Thống kê theo ngày, khoảng thời gian Điều quan trọng phải đảm bảo an tồn tuyệt đối thơng tin khách hàng trình đặt mua Đồng thời trang Web phải đổi mới, hấp dẫn 13 CHƯƠNG WESITE BÁN LAPTOPVIET 3.1 Giao diện Menu Thanh Menu bao gồm: +Tên hãng laptop +Laptop +Phụ kiện +Trả góp +Hỏi đáp +Khuyến +Đăng Nhập/Đăng ký -Khi ta kích vào LAPTOP dropdown nhiều hãng laptop, PHỤ KIỆN tương tự Ngồi cịn chọn hãng sổ xuống di chuyển tới xuống trang -Kích vào TRẢ GĨP HỎI ĐÁP thơng báo tính hồn thiện 14 -Kích vào ĐĂNG NHẬP/ĐĂNG KÝ bảng để đăng nhập cho người có tài khoản, đăng ký dành cho người chưa có tài khoản 3.2 Giao diện trang đăng nhập - Trang dùng để đăng nhập tài khoản đăng kí tài khoản cấp lại mật -Sau đăng nhập đầy đủ thông tin chọn đăng nhập tới trang chủ trang LapTopViet -Tạo tài khoản quên mật chưa hoàn thiện nên chưa thể dùng 3.3 Giao diện Banner -Có ba hình ảnh dùng để quảng cáo, cách vài giây tự sang hình ảnh khác kích vào dấu mũi tên để nhảy sang ảnh khác nhanh mà khơng chờ đợi 15 -Phía Banner cịn có nút LỌC tìm kiếm -Nút LỌC gồm có: +Các hãng latop +Các giá tiền +Các phụ kiện 16 3.4 Giao diện Main Content -Đây phần trang web chứa hãng Laptop nhiều khung 17 -Góc trái khung có tên hãng Laptop Mỗi khung có nhiều nhỏ, chứa hình ảnh thơng tin loại laptop sau: +TÊN LAPTOP + RAM +CPU +DISK +LCD 18 -Khi kích vào Mua Ngay nhiều thông tin chi tiết thông số kỹ thuật loại laptop 19 -Khi khách hàng chọn sản phẩm vừa ý bấm nút Mua Ngay phía xuất bảng Thơng Tin Khách Hàng, điền thông tin đầy đủ 20 bấm nút Mua Ngay trang thông báo cảm ơn bạn mua hàng -Ngồi hãng laptop cịn có phụ kiện sau : 21 +Hàng đầu phụ kiện loa gồm có hình ảnh, giá tiền tên sản phẩm +Hàng thứ phụ kiện tai nghe gồm có hình ảnh, giá tiền tên loại tai nghe +Hàng phụ kiện dây sạc kèm thiếu cho laptop gồm hình ảnh, giá tiền tên hãng laptop khác -Cách xem thông tin mua hàng giống laptop 3.5 Giao diện Footer -Phần cuối trang web chân trang thường chứa thông tin thông báo quyền thông tin liên lạc +Phía góc trái quyền:@Coppy Right +Ở thông tin liên lạc: Email Phone +Phía góc phải năm quyền: 2021 22 23 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 4.1 Kết đạt -Nắm bắt số khái niệm phục vụ cho việc viết báo cáo -Trình bày báo cáo cách khoa học có hệ thống kiến thức hiểu biết thân, có tham khảo tài liệu vấn đề có liên quan đến nội dung tìm hiểu, nghiên cứu -Trong thời gian làm đề tài hoàn thiện thêm kiến thức học trường suốt học kì -Tăng khả tư logic, nghiên cứu độc lập vấn đề mà trước chúng em khơng quan tâm -Về cài đặt chương trình: +Giới thiệu mặt hàng kinh doanh đến với khách hàng +Cho phép tra cứu mặt hàng khách hàng có nhu cầu tìm hiểu đặt mua hàng +Cập nhật: Mặt hàng, khách hàng, đơn đặt hàng +Thống kê: Chủng loại mặt hàng, tin tức -Về tính chương trình: +Thơng tin mặt hàng cập nhật kịp thời, xác +Giao diện thân thiện với người dùng 4.2 Hạn chế -Mặc dù có nhiều cố gắng, tìm hiểu kiến thức học, kết hợp tra cứu tài liệu chuyên ngành hạn chế khả kinh nghiệm nên tránh khỏi thiếu sót định -Báo cáo chưa giải trọn vẹn vấn đề phát sinh trình quản lý -Báo cáo chưa đạt tính thẩm mĩ cao, phong cách hành văn lủng củng, nhiều vấn đề chưa xác cần khắc phục trình phát triển, nâng cấp phần mềm giai đoạn sau 4.3 Hướng phát triển - Mở rộng mơ hình qua năm 24 - Tiếp cận đến nhiều đối tượng nơi khó khăn - Xây dựng chiến lược kinh doanh, phát triển mơ hình bền vững - Mở rộng thị trường hướng đến quốc tế -Tìm hiểu thêm số ngôn ngữ, phần mềm ứng dụng để nâng cao giao diện đồ họa đẹp mắt, sinh động - Xây dựng trang Web quy mô lớn với nhiều ứng dụng 25 TÀI LIỆU THAM KHẢO [1] https://vi.wikipedia.org/wiki/HTML [2] https://www.hostinger.vn/huong-dan/css-la-gi Tác giả: Hai G [3] https://viblo.asia/p/bai-1-bootstrap-la-gi-gioi-thieuve-bootstrap-DzVkpLbDknW - Tác giả: Pham Thi Ngoc Mai [4] https://www.marketenterprise.vn/blog/gioi-thieuve-visual-studio-code-ky-i.html#:~:text=VSCode%20l %C3%A0%20m%E1%BB%99t%20c%C3%B4ng %20c%E1%BB%A5,n%C3%B3%20ho%C3%A0n %20to%C3%A0n%20mi%E1%BB%85n%20ph %C3%AD – Tác giả: Trung Dang [5] https://developers.google.com/search/docs/beginner/h ow-search-works?hl=vi [6] https://tailieu.vn/doc/bao-cao-xay-dung-websiteban-hang-qua-mang-426706.html - Tác giả: Nguyen Thi Thanh Huyen [7] https://tailieumienphi.vn/doc/do-an-tot-nghiepxay-dung-website-ban-hang-truc-tuyen-l3e8tq.html Tác giả: Truong Cong Tra 26