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

ĐẠI HỌC ĐÀ NẴ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Ở ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN LINH KIỆN ĐIỆN TỬ Sinh viên thực : ĐINH TRẦN HOÀNG LONG NGUYỄN TẤN TỊNH Giảng viên hướng dẫn : ThS NGUYỄN THANH CẨM Lớp : 22IT1B Đà Nẵng, tháng 06 năm 2023 ĐẠI HỌC ĐÀ NẴ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Ở XÂY DỰNG WEBSITE BÁN LINH KIỆN ĐIỆN TỬ Đà nẵng, tháng 06 năm 2023 LỜI NÓI ĐẦU Ngày nay, ứng dụng công nghệ thông tin việc tin học hóa xem yếu tố mang tính định hoạt động phủ, tổ chức, cơng ty, đóng vai trị quan trọng, tạo bước đột phá mạnh mẽ Cùng với phát triển khơng ngừng kỹ thuật máy tính mạng điện tử, công nghệ thông tin cơng nghệ có đẳng cấp cao chinh phục hết đỉnh cao đến đỉnh cao khác Mạng Internet sản phẩm có giá trị lớn lao ngày trở nên cơng cụ khơng thể thiếu, tảng cho truyền tải, trao đổi thơng tin tồn cầu Giờ đây, việc liên quan đến thông tin trở nên thật dễ dàng cho người sử dụng: cần có máy tính kết nối internet dịng liệu truy tìm gần lập tức… giới vấn đề mà bạn quan tâm ra, có đầy đủ thơng tin, hình ảnh chí đơi lúc có âm bạn cần… Bằng internet, thực nhiều công việc với tốc độ nhanh chi phí thấp nhiều so với cách thức truyền thống Chính điều này, thúc đẩy khai sinh phát triển thương mại điện tử phủ điện tử khắp giới, làm biến đổi đáng kể mặt văn hóa, nâng cao chất lượng sống người Trong hoạt động sản xuất, kinh doanh, đây, thương mại điện tử khẳng định vai trò xúc tiến thúc đẩy phát triển doanh nghiệp Đối với cửa hàng hay shop, việc quảng bá giới thiệu đến khách hàng sản phẩm đáp ứng nhu cầu khác hàng cần thiết Vậy phải quảng bá xây dựng Website cho cửa hàng quảng bá tất sản phẩm bán Vì vậy, chúng em thực đồ án “XÂY DỰNG WEBSITE BÁN LINH KIỆN ĐIỆN TỬ” LỜI CẢM ƠN Chúng em xin gửi lời cảm ơn chân thành tới nhà trường, khoa Khoa học máy tính tận tình bảo, góp ý tạo điều kiện cho chúng em hoàn thành đề tài nghiên cứu Đồ án sở cách tốt Chúng em xin cảm ơn ThS Nguyễn Thanh Cẩm – giảng viên hướng dẫn Đồ án sở 1, trường Đại học Công Nghệ Thông Tin & Truyền Thông Việt – Hàn Thầy giành thời gian quý báu tận tình hướng dẫn chúng em suốt trình thực báo cáo Trong trình thực đề tài nghiên cứu, chúng em cố gắng nỗ lực, nhiên khơng tránh khỏi sai sót Chúng em mong nhận góp ý thầy giáo, từ phía hội đồng để đề tài nghiên cứu chúng em hoàn thiện Chúng em xin chân thành cảm ơn! Đà nẵng, tháng 06 năm 2023 NHẬN XÉT (Của giảng viên hướng dẫn) ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… MỤC LỤC Nội dung Phần mở đầu 1 Tổng quan 1.1 Chiến lược dự án 1.2 Vấn đề cần giải 1.3 Nội dung cần thực Phương pháp nghiên cứu 2.1 Phương pháp .2 2.2 Phương pháp .2 2.3 Phương pháp .2 2.4 Kết luận .3 Chương Cơ sở lý thuyết 1.1 Cơ sở lý luận thực tiễn 1.1.1 Website gì? 1.1.2 Lợi ích Website 1.1.3 Tổng quan HTML 1.1.4 Tổng quan CSS 1.1.4 Tổng quan ngơn ngữ lập trình JavaScript .6 1.1.5 Giới thiệu thư viện hình ảnh Font Awesome .7 1.1.6 Tổng quan cửa hàng sách .7 1.2 Giới thiệu đồ án 1.2.1 Công nghệ sử dụng 1.2.2 Bố cục Website 1.2.3 Quy mô Website .10 Chương Phân tích thiết kế hệ thống 11 2.1 Mơ hình tổng quan hệ thống nghiên cứu 11 2.1.1 Phân tích thiết kế hướng đối tượng 11 2.1.2 Mô tả hệ thống 11 2.2 Thiết kế chi tiết 11 Chương Cài đặt xây dựng demo 13 3.1 Giao diện người dùng (User) 13 3.1.1 Phần đầu trang (Header) 13 3.1.2 Phần chân trang (Footer) 13 3.1.3 Trang chủ (Home) 14 3.1.4 Trang đăng ký/đăng nhập (Sign up/Login) .17 3.1.5 Trang giới thiệu 18 3.1.6 Trang hỗ trợ 19 3.2 Giao diện người quản trị (Admin) 20 3.2.1 Trang quản trị 20 3.2.2 Trang quản trị tài khoản người dùng .21 Kết luận hướng phát triển 21 Kết luận 21 Hướng phát triển 22 Danh sách tài liệu tham khảo 23 DANH MỤC CÁC BẢN Bảng – So sánh phương pháp nghiên cứu DANH MỤC HÌ Hình 1 – Logo HTML Hình – Logo CSS .6 Hình – Logo JavaScript Hình – Logo Font Awesome .7 Hình – Sự cạnh tranh thương hiệu linh kiện điện tử Hình – Giao diện đẹp nhờ công nghệ đại Hình 7– Bố cục hợp lý 9Y Hình – Thanh điều hướng trang giao diện người dùng 11 Hình 2 – Tính thêm sản phẩm vào cửa hàng 12 Hình - Mã màu chủ đạo: Trắng Xám đậm Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình – Phần header 13 – Phần footer 13 - Banner cửa hàng 14 – Các sản phẩm bật 15 – Các sản phẩm hot hè 2023 15 – Demo sản phẩm 16 – Danh mục phân loại sản phẩm .16 – Form đăng nhập 17 – Form đăng ký .18 10 – Hình ảnh giới thiệu 18 11 - Thành viên 19 12 - Giao diện hỗ trợ khách hàng cửa hàng 19 13 – Thông tin tổng quan website 20 14 - Chức chỉnh sửa sản phẩm 20 15 - Chức xóa sản phẩm 21 16 – Danh sách tài khoản người dùng 21 Phần mở đầu Tổng quan 1.1 Chiến lược dự án - Khảo sát nhu cầu thị trường -Trên thị trường có số dự án triển khai thành công lĩnh vực bán linh kiện điện tử như: Bán linh kiện, NShop, Dientu4u, - Xác định chiến lược ý tưởng, phát triển chuyên nghiệp, giá phải phù hợp với mức sống - Chọn mơ hình đầu tư - Kiểm sốt chi phí đầu tư, vận hành phát triển thời điểm cụ thể, thời điểm phải xác định thời điểm thời gian hoàn vốn - Đặc biệt lưu ý đến rủi ro đầu tư, rủi ro lựa chọn sai phân khúc trình phát triển, trình độ quản lý hạn chế, quản lý không tốt khoản tiền nhà đầu tư… Phải ln có phương án dự phòng, chuẩn bị cách giải rủi ro cách triển để 1.2 Vấn đề cần giải - Chưa quảng bá thương hiệu cửa hàng tới vùng xa, ngoại tỉnh, khách du lịch, - Chưa thực nhiều khách hàng biết đến Hiện nhiều người chưa biết rõ loại linh kiện, giá tiền nên việc xây dựng trang web vừa bán vừa giới thiệu sản phẩm để phục vụ khách hàng mảng linh kiện điện tử cần phải thời gian để làm hài lịng khách hàng 1.3 Nội dung cần thực - Thiết kế Website giúp dễ dàng mua bán linh kiện điện tử hãng linh kiện - Thiết kế Website giúp cung cấp thông tin cho khách hàng loại linh kiện, tính năng, cách sử dụng,… Phương pháp nghiên cứu 2.1 Phương pháp - Tên phương pháp: Nghiên cứu thực tế - Cách thực hiện: Đề xuất thành viên nhóm khảo sát, thăm hỏi cửa hàng bán linh kiện thành phố 2.2 Phương pháp - Tên phương pháp: Nghiên cứu qua sách báo - Cách thực hiện: Mượn từ thư viện nghiên cứu 2.3 Phương pháp - Tên phương pháp: Nghiên cứu qua internet - Cách thực hiện: Thực đọc thông tin, xem mã nguồn trình duyệt Tên Phương Pháp Ưu điểm Hạn chế Kết luận Nghiên cứu thực tế - Khách quan, trung thực - Tốn kém, nhiều thời gian - Kém ưu việt Nghiên cứu qua sách báo - Thông tin cô đọng, dễ tiếp thu - Nguồn thông tin chưa nhiều, không cập nhập - Kém ưu việt Nghiên cứu qua Internet - Dễ dàng thực - Không biết chọn - Ưu việt lọc thông tin gây - Thông tin rộng lớn rối thông tin - Thông tin cập nhật thường xuyên Bảng – So sánh phương pháp nghiên cứu 1.2 Giới thiệu đồ án - Tên đồ án: Xây dựng website bán linh kiện điện tử – TechNaw 1.2.1 Công nghệ sử dụng - Thiết kế giao diện Website dựa tảng: HTML, CSS, thư viện hình ảnh Font Awesome ngơn ngữ lập trình JavaScript - Trình biên dịch: Nopad, VS code, Sublime Text - Trình duyệt: Google Chrome, Cốc Cốc Microsoft Edge Hình – Giao diện đẹp nhờ cơng nghệ đại 1.2.2 Bố cục Website - Bố cục đơn giản, đại giúp mang đến cảm giác dễ chịu cho người dùng - Thanh Navigation Bar để vị trí dễ quan sát, phân loại danh mục rõ ràng hợp lý tương ứng với tên lập Hình 7– Bố cục hợp lý 1.2.3 Quy mô Website - Gồm giao diện Người dùng Quản trị: + Người dùng: gồm trang + Quản trị: gồm chức quản trị - Mỗi trang có bố cục khác dựa phong cách chung, xuyên suốt toàn trang web 10 Chương Phân tích thiết kế hệ thống 2.1 Mơ hình tổng quan hệ thống nghiên cứu 2.1.1 Phân tích thiết kế hướng đối tượng - Người dùng (user) - Quản trị (admin) 2.1.2 Mô tả hệ thống - Người dùng (user):     Đăng nhập / đăng kí tài khoản: tên đăng nhập, mật khẩu, họ tên, số điện thoại(email) Truy cập trang website Xem thông tin sản phẩm, cửa hàng Mua sắm mặt hàng, thêm sản phẩm vào giỏ hàng - Quản trị (admin):  Truy cập, chỉnh sửa, thêm mới, xóa bớt, cập nhật, nội dung website  Xem đánh giá khách hàng 2.2 Thiết kế chi tiết * Giao diện người dùng (User): - Trang chủ: giao diện tổng quan Website - Trang Đăng ký/Đăng nhập: đăng nhập tạo tài khoản - Trang Giới thiệu: giao diện thông tin website, người xây dựng website - Trang Hỗ trợ: hỗ trợ người dùng gặp vấn đề trình mua hàng, sử dụng dịch vụ - Trang Sản phẩm: giao diện hiển thị danh mục sản phẩm có cửa hàng Hình – Thanh điều hướng trang giao diện người dùng 11 * Giao diện người quản trị (Admin): gồm trang tính quản trị trang,thêm, chỉnh sửa, xóa thơng tin sản phẩm, quản lý tài khoản khách hàng Hình 2 – Tính thêm sản phẩm vào cửa hàng 12 Chương Cài đặt xây dựng demo 3.1 Giao diện người dùng (User) 3.1.1 Phần đầu trang (Header) Hình – Phần header - Phần header gồm: + Thanh điều hướng (Navigation): giúp truy cập vào trang khác 3.1.2 Phần chân trang (Footer) - Phần footer chia làm phần gồm:  Cột nhận thơng báo qua email có khuyến  Cột thông tin hỗ trợ, bao gồm: Yêu cầu báo giá, Mua hàng tốn, Chính sách đổi trả, Chính sách bảo mật thơng tin, Quy định bảo hành  Cột thông tin liên hệ, bao gồm: số hotline liên hệ mua hàng, số hotline email trung tâm bảo hành, email liên hệ cần hợp tác  Cột thơng tin tốn, gồm: STK ngân hàng tốn Hình – Phần footer 13 3.1.3 Trang chủ (Home) - Toàn trang web sử dụng nhiều màu sắc giúp trang web trở nên đặc sắc mà màu chủ đạo trắng xám đậm Hình - Mã màu chủ đạo: trắng xám đậm - Giao diện tập hợp tất loại linh kiện cửa hàng - Trang chủ thiết kế với nội dung chính: + Phần banner cửa hàng Hình 3 - Banner cửa hàng 14 + Giao diện sản phẩm bật Hình – Các sản phẩm bật + Giao diện sản phẩm hot hè 2023 Hình – Các sản phẩm hot hè 2023 15 - Demo giới thiệu sản phẩm cửa hàng Hình – Demo sản phẩm + Giao diện phân loại sách Hình – Danh mục phân loại sách 16 3.1.4 Trang đăng ký/đăng nhập (Sign up/Login) - Trang giúp người dùng cũ đăng nhập để sử dụng đầy đủ tính trang web giúp người dùng tạo tài khoản - Trang gồm lựa chọn: + Lựa chọn form đăng nhập: người dùng sử dụng tên đăng nhập mật đăng ký từ trước để tiến hành đăng nhập Trang web hỗ trợ người dùng đăng nhập số tài khoản mạng xã hội khác Facebook, Google, Instagram Hình – Form đăng nhập + Lựa chọn thứ hai form đăng ký: để đăng ký cần điền số thông tin số điện thoại, tên đăng nhập password dùng số tài khoản mạng xã hội khác để đăng ký nhanh Facebook, Google, Instagram 17 Hình – Form đăng ký 3.1.5 Trang giới thiệu - Giới thiệu thông tin liên quan đến cửa hàng, thành viên thực Hình 10 – Hình ảnh giới thiệu 18 Hình 11 - Thành viên 3.1.6 Trang hỗ trợ - Cung cấp cho khách hàng dịch vụ chăm sóc, hỗ trợ cửa hàng Hình 13 – Giao diện hỗ trợ khách hàng cửa hàng 19 3.2 Giao diện người quản trị (Admin) 3.2.1 Trang quản trị - Cung cấp phần tổng quan thơng tin trang web: + Số khách hàng truy cập (Happy Customer) Hình 14 – Thơng tin tổng quan website - Các tính quản trị tích trang: + Quản trị sản phẩm (Thêm, Chỉnh sửa-xóa) + Quản trị khách hàng Hình 15 - Chức chỉnh sửa sản phẩm 20 Hình 16 - Chức xóa sản phẩm 3.2.2 Trang quản trị tài khoản người dùng - Cung cấp tính xem thơng tin tài khoản người dùng, xóa người dùng khỏi trang web phát tình trạng spam trang web Hình 17 – Danh sách tài khoản người dùng Kết luận hướng phát triển Kết luận - Website dễ sử dụng, đáp ứng nhu cầu khách quan khách hàng - Giao diện đẹp mắt thu hút người dùng, khơng gây nhàm chán q trình sử dụng, thao tác - Thực thành công phần giao diện cho Website HTML, CSS JavaScript - Về thân, em học nhiều qua trình làm đồ án sở lần kĩ làm việc, kĩ soạn thảo văn bản, thiết kế website, thiết kế powerpoint, … 21 Hướng phát triển - Tiếp tục phát triển phần giao diện thêm thẩm mỹ - Thêm chức trao đổi, mua bán sách - Bổ sung sở liệu - Hồn thành website hồn chỉnh ngơn ngữ lập trình học kì tới 22 Danh sách tài liệu tham khảo - HTML W3school Nguồn: https://www.w3schools.com/html/default.asp - CSS W3school Nguồn: https://www.w3schools.com/css/default.asp - JAVASCRIPT W3school Nguồn: https://www.w3schools.com/js/default.asp - BOOTSTRAP Nguồn: https://fontawesome.com/v5/search?m=free&s=brands%2Csolid - Tổng quan mơ hình kinh doanh sách - Tâm Trần - Kiến thức Marketing, Bán hàng online, Bán hàng Fanpage, Kinh doanh - Khởi nghiệp Nguồn: https://atpsoftware.vn/kinh-nghiem-kinh-doanh-sach-online-mo-hinh-kinh-doanh-sachonline.html - Kiến thức website Nguồn: https://carly.com.vn/blog/website-la-gi/ 23