MẪU ĐỒ ÁN KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CNTT TT VIỆT HÀN ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI THIẾT KẾ WEBSITE BÁN LAPTOP 1 MỞ ĐẦU 2 1 Lí do chọn đề tài Trong thời đại ngày nay, đất nước ta đang[.]
ĐẠ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 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 MỞ ĐẦU 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! MỤC LỤC MỞ ĐẦU LỜI CẢM ƠN NHẬN XÉT MỤC LỤC CHƯƠNG 1: CƠ SỞ LÍ THUYẾT .9 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 .9 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG .12 2.1 Mô tả chức 12 2.2 Yêu cầu đặt .12 CHƯƠNG WESITE BÁN LAPTOPVIET 13 3.1 Giao diện Menu 13 3.2 Giao diện trang đăng nhập 14 3.4 Giao diện Main Content 16 3.5 Giao diện Footer 19 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .20 4.1 Kết đạt 20 4.2 Hạn chế 20 4.3 Hướng phát triển 20 TÀI LIỆU THAM KHẢO 21 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 CascadingStyleSheets 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 cịn 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 chun 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 4.Tích hợp Terminal Teminal 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 5.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 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.3 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 Tuy nhiên, trang tập trung vào trang web Google thực ba bước để tạo kết từ trang web 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, 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 2.Lập mục Sau tìm thấy trang, Google cố gắng tìm hiểu nội dung trang Quá 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 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 q trình đặt mua Đồng thời trang Web phải ln đổi mới, hấp dẫn 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 10 -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 1.1 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.2 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 11 -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 12 3.4 Giao diện Main Content -Đây phần trang web chứa hãng Laptop nhiều khung -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 13 -Khi kích vào Mua Ngay nhiều thơng tin chi tiết thông số kỹ thuật loại laptop 14 -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 đủ bấm nút Mua Ngay trang thông báo cảm ơn bạn mua hàng 15 -Ngoài hãng laptop cịn có phụ kiện sau : 16 +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 17 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 1.2 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 1.3 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 khơng thể 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 cịn lủng củng, cịn 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 1.4 Hướng phát triển - Mở rộng mơ hình qua năm - 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 18 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-thieu-ve-bootstrapDzVkpLbDknW - Tác giả: Pham Thi Ngoc Mai [4] https://www.marketenterprise.vn/blog/gioi-thieu-ve-visual-studio-code-kyi.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/how-search-works?hl=vi [6] https://tailieu.vn/doc/bao-cao-xay-dung-website-ban-hang-qua-mang426706.html - Tác giả: Nguyen Thi Thanh Huyen [7] https://tailieumienphi.vn/doc/do-an-tot-nghiep-xay-dung-website-ban-hangtruc-tuyen-l3e8tq.html - Tác giả: Truong Cong Tra 19