Thiết kế giao diện Website bán thiết bị chơi game

ong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức, cũng như của các công ty, nó đóng vai trò hết sức quan trọng, có thể tạo ra những bước đột phá mạnh mẽ. Cùng với sự phát triển không ngừng về kỹ thuật máy tính và mạng điện tử, công nghệ thông tin cũng có được những công nghệ có đẳng cấp và lần lượt chinh phục hết đỉnh cao này đến đỉnh cao khác. Mạng internet là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng trở thành một công cụ không thể thiếu, là nền tảng chính cho sự truyển tải, trao đổi thông tin trên toàn cầu. Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàng cho người sử dụng, chỉ cần có một máy tính kết nối Internet và một dòng dữ liệu truy tìm thì gần như lập tức cả thế giới về vấn đề mà bạn đang quan tâm sẽ hiện ra, có đầy đủ thông tin, hình ảnh và thậm chí đôi lúc có cả những âm thanh nếu bạn cần. Bằng Internet, chúng ta đã thực hiện được nhiều công việc với tốc độ nhanh hơn và chi phí thấp hơn nhiều so với cách thức truyền thống. Chính điều này, đã thúc đẩy sự khai sinh và phát triển của thương mại điện tử và chính phủ điện tử trên khắp thể giới, làm biến đổi đáng kể bộ mặt văn hóa, nâng cao chất lượng cuộc sống con người. Trong hoạt động sản xuất, kinh doanh, giờ đây, thương mại điện tử đã khẳng định được vai trò xúc tiến và thúc đẩy sự phát triển của doanh nghiệp. Đối với một cửa hàng hay shop, việc quảng bá và giới thiệu đến khách hàng các sản phẩm mới đáp ứng được nhu cầu của khách hàng sẽ là cần thiết. Vậy phải quảng bá thế nào? Đó là xây dựng được một Website cho cửa hàng của mình quảng bá tất cả các sản phẩm của mình . Vì vậy em chọn đề tài:” Xây Dựng Giao Diện Website Bán Thiết Bị Chơi Game”.

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN CƠ SỞ LẬP TRÌNH WEB ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE BÁN THIẾT BỊ CHƠI GAME Sinh viên thực : TRẦN ĐĂNG QUANG NGUYỄN HOÀI NAM NGUYỄN HUY KIÊN Giảng viên hướng dẫn : CÙ VIỆT DŨNG Ngành : CÔNG NGHỆ THÔNG TIN Lớp : D13CNPM5 Khóa : 2018-2023 Hà Nội, tháng năm 2020 PHIẾU CHẤM ĐIỂM STT Họ tên sinh viên TRẦN ĐĂNG QUANG Mã SV: 18810320721 NGUYỄN HOÀI NAM Mã SV: NGUYỄN HUY KIÊN Mã SV: Họ tên giảng viên Giảng viên chấm 1: Giảng viên chấm 2: Nội dung thực Điểm Thiết kế bố cục layout, lên ý tưởng, Viết báo cáo, Code giao diện trang chủ (trước sau đăng nhập), đăng nhập, đăng ký, người dùng, giỏ hàng Code trang đơn hàng, thông báo, chi tiết sản phẩm, trợ giúp, tải ứng dụng, chỉnh sửa báo cáo Code trang ngân hàng, địa chỉ, đổi mật khẩu, ví voucher, shopeexu Chữ ký Ghi Chữ ký MỤC LỤC DANH MỤC HÌNH ẢNH .1 LỜI NÓI ĐẦU CHƯƠNG : TỔNG QUAN VỀ WEBSITE 1.1 WEB TĨNH LÀ GÌ? 1.2 WEB ĐỘNG LÀ GÌ ? .4 1.3 NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN HTML 1.3.1 Khái niệm 1.3.2 Đặc điểm 1.3.3 Bố cục HTML 1.5 NGÔN NGỮ ĐIỀU KHIỂN JAVASCRIPT 1.6 THƯ VIỆN JQUERY CHƯƠNG GIỚI THIỆU VỀ WEBSITE BÁN THIẾT BỊ CHƠI GAME 11 2.1 MÔ TẢ YÊU CẦU 11 2.2 CÁC HỆ THỐNG NGHIỆP VỤ .11 2.2.1 Trang chủ .11 2.2.2 Trang thông tin chi tiết sản phẩm 11 2.2.3 Trang đăng ký tài khoản 12 2.2.4 Trang đăng nhập 12 2.2.5 Trang giỏ hàng .12 2.2.6 Trang user profile 13 2.2.7 Trang trợ giúp………………………………………………………… 13 2.2.8 Trang thông báo .13 2.2.9 Trang đơn mua .13 2.2.10 Trang ứng dụng 13 2.2.11 Trang ngân hàng……………………………………………………….13 2.2.12 Trang địa chỉ………………………………………………………… 13 2.2.13 Trang mật khẩu……………………………………………………… 13 2.2.14 Trang ví voucher………………………………………………………13 2.2.15 Trang shopee xu……………………………………………………….14 2.3 MỤC TIÊU XÂY DỰNG TRANG WEB BÁN THIẾT BỊ CHƠI GAME 14 CHƯƠNG THIẾT KẾ BỐ CỤC 15 3.1 PHẦN HEADER TRANG WEB 15 3.2 PHẦN CONTENT TRANG WEB Trang Chủ 15 3.2.1 Banner 15 3.2.2 Danh Mục Các Sản Phẩm 16 3.2.3 Menu trái trang web .17 3.3 PHẦN FOOTER TRANG WEB .17 Chương 4: KẾT QUẢ THỰC HIỆN .18 4.1 GIAO DIỆN TRANG CHỦ .18 4.2 GIAO DIỆN TRANG CHỦ SAU KHI ĐĂNG NHẬP 19 4.3 GIAO DIỆN TRANG ĐĂNG NHẬP 19 4.4 GIAO DIỆN TRANG ĐĂNG KÝ 20 4.5 GIAO DIỆN TRANG HỒ SƠ CÁ NHÂN 20 4.6 GIAO DIỆN TRANG GIỎ HÀNG 21 4.7 GIAO DIỆN TRANG ĐƠN MUA 22 4.8 GIAO DIỆN TRANG THÔNG BÁO .22 4.9 GIAO DIỆN TRANG THÔNG TIN CHI TIẾT SẢN PHẢM 23 4.10 GIAO DIỆN TRANG TRỢ GIÚP 24 4.11 GIAO DIỆN TRANG ỨNG DUNG ….……………………………… …… 25 4.12 GIAO DIỆN TRANG NGÂN HÀNG…………………………………… 26 4.13 GIAO DIỆN TRANG ĐỊA CHỈ………………………………………… 27 4.14 GIAO DIỆN TRANG MẬT KHẨU………………………………………28 4.15 GIAO DIỆN TRANG VÍ VOUCHER…………………………………….29 4.16 GIAO DIỆN TRANG SHOPEE XU………………………………………30 4.17.SOURCE CODE JQUERY KẾT HỢP CSS3 TẠO HIỆU ỨNG SIÊU MƯỢT CHO TRANGWEB…………………………………………………………………… 31 4.17.1 Nút Back To Top 31 4.17.2 Hiệu ứng chờ tải trang tạo cảm giác dễ chịu cho khách hàng .31 4.17.3 Sự Kiện onclick nút Tìm Kiếm menu .31 4.17.4.Sự kiện onclick nút đăng nhập trang đăng nhập 32 4.17.5.Hiệu ứng thay đổi arrow hover trang chủ……………………….32 4.17.6.Hiệu ứng ẩn password trang đăng nhập……………………… 32 4.17.7.Hiệu ứng dropdown trang hồ sơ cá nhân……………………………33 4.17.8.Sự kiện onclick button Đăng nhập……………………………… 33 4.17.9.Sự kiện download tang ứng dụng…………….………………… 33 4.17.10 Sự kiện collapsibles trang trơ giúp…………………………… 34 4.17.11 Sự kiện hover thay đổi mũi tên trang chủ …………………………34 4.17.12 Sự kiện button mở form đánh giá trang đơn mua………………… 34 4.17.13 Sự kiện keypress Thanh tìm kiếm…………………………………34 4.17.14 Sự kiện onbeforeunload…………………………………………… 35 KẾT LUẬN 36 DANH MỤC TÀI LIỆU THAM KHẢO 37 DANH MỤC HÌNH ẢNH Hình 1.1 Ngơn ngữ HTML .5 Hình 1.2 Ngôn ngữ CSS Hình 1.3 Ngơn ngữ JavaScript .8 Hình 3.1 Header trang web 15 Hình 3.2.1 Filter 15 Hình 3.2.2 Danh mục sản phẩm 16 Hình 3.2.3 Menu trái trang web .16 Hình 3.3 Footer trang web 17 Hình 4.1 Giao diện Trang chủ 18 Hình 4.2 Trang chủ sau đăng nhập 19 Hình 4.3 Trang đăng nhập 19 Hình 4.4 Trang đăng ký 20 Hình 4.4 Trang hồ sơ cá nhân 20 Hình 4.6 Trang Giỏ hàng 21 Hình 4.7 Trang đơn mua .22 Hình 4.8 Trang thơng báo .22 Hình 4.9 Trang Thơng tin chi tiết sản phẩm 23 Hình 4.10 Trang trợ giúp 24 Hình 4.11 Trang ứng dụng 25 Hình 4.12 Trang ngân hàng 26 Hình 4.13 Trang địa 27 Hình 4.14 Trang đổi mật 28 Hình 4.15 Trang ví voucher 29 Hình 4.16 Trang shopee xu 30 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ó cơng nghệ có đẳng cấp 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ở thành công cụ 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 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 thể 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ách hàng cần thiết Vậy phải quảng bá nào? Đó xây dựng Website cho cửa hàng quảng bá tất sản phẩm Vì em chọn đề tài:” Xây Dựng Giao Diện Website Bán Thiết Bị Chơi Game” CHƯƠNG 1: TỔNG QUAN VỀ WEBSITE 1.1 WEB TĨNH LÀ GÌ? Về kiến thức web tĩnh thường xây dựng từ CSS, HTML, JAVASCRIPT có thêm cơng nghệ HTML5 & CSS3 Có thể bạn nhìn web nhìn lung lay, đẹp nội dung thay đổi chưa web động người ta sử dụng DHTML để thay đổi nội dung (tại client) Nếu bạn chạy máy tính bạn với web tĩnh bạn đặt đâu chạy chất file bình thường Ưu điểm web tĩnh:  Về giao diện Designer thiết kế theo kiểu lạ  Tốc độ truy cập nhanh file HTML  Chi phí đầu tư thấp bạn khơng phải trả tiền nhiều cho Coder  Thân thiện với máy tìm kiếm bạn đặt tên file tùy ý (tenfile.html, tieu-de-tin-tuc.html) Nhược điểm web tĩnh:  Khó quản lý nội dung  Khó nâng cấp bảo trì  Mỗi thay đổi phải vào file HTML, CSS JAVASCRIPT để chỉnh sửa Khi nên sử dụng web tĩnh?  Nếu bạn doanh nghiệp muốn tự làm website bạn học kiến thức tự làm Web tĩnh cho  Nội dung website cập nhật nên bạn muốn tiết kiệm chi phí  Website bạn nhỏ bạn thuê người chuyên web để quản trị Trên thực tế thấy có cơng ty thiết kế web họ làm web tĩnh họ có khả chỉnh sửa khách hàng họ khơng có khả Hiện có trang web ONE PAGE có hiệu ứng slide độc nên họ sử dụng web tĩnh tĩnh phần 1.2 WEB ĐỘNG LÀ GÌ ? Ngược lại với web tĩnh, web động website có hệ thống quản lý nội dung người dùng chỉnh sửa nội dung Ví dụ trang vnexpress.net hay 24h.com.vn web động họ đăng tin mới, chỉnh sửa tin chỉnh sửa danh mục menu, Web động làm từ gì? Web động sử dụng công nghệ HTML, CSS, HTML5, CSS3, JAVASCRIPT, điều đặc biệt có sử dụng ngơn ngữ lập trình server PHP, C#, JAVA, PYTHON hệ quản trị sở liệu MySQL, SQL SEVER , web động phải chạy máy chủ Nếu đặt máy tính bạn bạn phải cài Web server ảo vertrigo, Xampp, wampp, Ưu điểm web động:  Dễ dàng quản lý nội dung  Dễ dàng nâng cấp bảo trì  Có thể xây dụng web lớn  Thường sử dụng tương tác với người dùng cao  Hiện SEO tốt ta sử dụng chức Rewrite URL để chuyên URL thân thiện Hiện tại, web động thiết kế mã nguồn mở ưa chuộng thịnh hành Mã nguồn mở trở thành xu hướng mới, người khơng biết lập trình thiết kế website động với đầy đủ chức thông qua mã nguồn mở Nhược điểm web động:  Chi phí xây dựng cao  Nếu web lớn cần thêm nhân chuyên ngành Khi nên sử dụng web động?  Bạn làm website thương mại điện tử bán hàng  Bạn làm web giới thiệu sản phảm công ty  Bạn làm web tin tức, blog cá nhân  Web bạn tầm cỡ lớn 1.3 NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN HTML 1.3.1 Khái niệm Hình 1.1 Ngôn ngữ HTML Ngôn ngữ đánh dấu siêu văn tiếng Anh Hypertext Markup Language, viết tắt HTML Ngôn ngữ đánh dấu siêu văn (HTML) tập hợp kí hiệu mã đánh dấu chèn vào tệp hiển thị Internet Đánh dấu giúp trình duyệt web biết cách hiển thị từ hình ảnh trang web Mỗi mã đánh dấu riêng lẻ gọi "yếu tố" (element) , đơi cịn gọi "thẻ" (tag) Một số yếu tố dạng cặp cho biết bắt đầu kết thúc hiển thị số hiệu ứng 1.3.2 Đặc điểm Ngôn ngữ đánh dấu siêu văn ngơn ngữ máy tính tạo điều kiện cho việc lập trang web Ngơn ngữ này, có từ mã cú pháp giống ngôn ngữ khác, tương đối dễ hiểu qua thời gian trở nên ngày mạnh mẽ lập trình HTML tiếp tục phát triển để đáp ứng yêu cầu Internet vỏ bọc World Wide Web Consortium, tổ chức thiết kế trì ngơn ngữ Siêu văn (Hypertext) phương thức mà người dùng Internet sử dụng để điều hướng trang web Bằng cách click vào văn đặc biệt gọi siêu liên kết (hyperlink), người dùng đưa đến trang Việc sử dụng thuật ngữ 4.9 GIAO DIỆN TRANG THƠNG TIN CHI TIẾT SẢN PHẨM Hình 4.9 Trang Thông tin chi tiết sản phẩm 4.10 GIAO DIỆN TRANG TRỢ GIÚP Hình 4.10 Trang trợ giúp 4.11 GIAO DIỆN TRANG ỨNG DỤNG Hình 4.11 Trang ứng dụng 4.12 GIAO DIỆN TRANG NGÂN HÀNG Hình 4.12 Giao diện trang ngân hàng 4.13 GIAO DIỆN TRANG ĐỊA CHỈ Hình 4.13 Giao diện địa 4.14 GIAO DIỆN ĐỔI MẬT KHẨU Hình 4.14 Giao diện đổi mật 4.15 GIAO DIỆN TRANG VÍ VOUCHER Hình 4.15 Giao diện ví voucher 4.16 GIAO DIỆN SHOPEE XU Hình 4.16 Giao diện shopee xu 4.17 SOURCE CODE THUẦN JAVA SCRIPT VÀ JQUERY KẾT HỢP CSS3 TẠO HIỆU ỨNG SIÊU MƯỢT CHO TRANG WEB 4.17.1 Nút Back To Top document.addEventListener("DOMContentLoaded", function (event) { let myBtn = document.getElementById("returnToTop"); window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { myBtn.style.display = "block"; } else { myBtn.style.display = "none"; } } document.getElementById("returnToTop").addEventListener("click", function() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; }); }); 4.17.2 Hiệu ứng chờ tải trang (Preload) tạo cảm giác dễ chịu cho khách hàng setTimeout(function(){ $('body').removeClass('preloading'); $ ('.pre loader').fadeToggle();}, 700) 4.17.3 Sự Kiện onclick nút Tìm Kiếm menu document.addEventListener("DOMContentLoaded", function (event) { let searchBtn = document.getElementById("searchBtn"); let searchTxt = document.getElementById("searchTxt"); searchBtn.addEventListener("click", function(e){ if(searchTxt.value == ""){ e.preventDefault(); alert("Bạn phải nhập thơng tin tìm !"); } });}); 4.17.4 Sự Kiện onclick Button Sửa trang Hồ sơ cá nhân update.addEventListener('click', function(){ modal.style.display = "block"; overflow.classList.add("over-flow"); setTimeout(function(){ modal.style.display = "none"; overflow.classList.remove("over-flow"); }, 3000); }) window.addEventListener('click', function(event){ if(event.target == modal) { modal.style.display = "none"; overflow.classList.remove("over-flow"); } }) 4.17.5 Hiệu ứng thay đổi arrow hover trang chủ $(document).ready(function(){ $('.sort-price').hover( function(){ $('.sort-price-icon').addClass('fa-chevron-up'); $('.sort-price-icon').removeClass('fa-chevron-down'); },function(){ $('.sort-price-icon').addClass('fa-chevron-down'); $('.sort-price-icon').removeClass('fa-chevron-up'); } ); }); let cartBtn = document.getElementById('cartBtn'); 4.17.6 Hiệu ứng ẩn password trang đăng nhập toggleIcon.addEventListener("click", function () { if (inputPassword.type == "password") { toggleIcon.classList = "show fas fa-eye-slash"; inputPassword.type = "text"; } else { toggleIcon.classList = "show fas fa-eye"; inputPassword.type = "password"; }}); 4.17.7 Hiệu ứng collapsibles trang hồ sơ cá nhân for (let i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { var subProfile = this.nextElementSibling; if (subProfile.style.maxHeight){ subProfile.style.maxHeight = null; } else { subProfile.style.maxHeight = subProfile.scrollHeight + "px"; } }); } 4.17.8 Sự kiện onclick btn Đăng nhập loginButton.addEventListener ("click", function (e) { If (inputUserName.value == "" || inputPassword.value == "") { e.preventDefault(); alert("Bạn Chưa Nhập Đủ Thông Tin !"); } Else { loginForm.action = "/html/Quang/indexafterlogin.html"; } }); 4.17.9 Sự kiện download trang ứng dụng function show(){ var r = confirm("Tải ứng dụng"); if (r == true) { download("stretched-1366-768-883500.png","img"); } } function download(filename, text) { var element = document.createElement('a'); element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); element.setAttribute('download', filename); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); } 4.17.10 Sự kiện collapsibles trang trơ giúp var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } 4.17.11 Sự kiện hover thay đổi mũi tên trang chủ $(document).ready(function(){ $('.sort-price').hover( function(){ $('.sort-price-icon').addClass('fa-chevron-up'); $('.sort-price-icon').removeClass('fa-chevron-down'); },function(){ $('.sort-price-icon').addClass('fa-chevron-down'); $('.sort-price-icon').removeClass('fa-chevron-up'); } ); }); 4.17.12 Sự kiện button mở form đánh giá trang đơn mua function openForm() { document.getElementById("myForm").style.display = "block"; } function closeForm() { document.getElementById("myForm").style.display = "none"; 4.17.13 Sự kiện keypress Thanh tìm kiếm $(document).ready(function(){ $(“textarea”).keypress(function(){(this).css(“background-color”,”grey”); }); }); 4.17.14 Sự kiện onbeforeunload $(window) on(‘beforeunload’, function(){ Return ‘Are you sure want to Quit this page?’; }); $(window).unload(function(){ If ((sessionID !=null)&& (“sessionID=null” && (sessionID !=””)){ Logout(); } }); KẾT LUẬN Trên nội dung khóa luận thực vấn đề nêu lên phần đầu Đó minh chứng thiết thực nhằm đánh giá khả hiểu biết nhóm em việc tìm hiểu hệ thống xây dựng hệ thống nhằm đáp ứng thực tiễn Qua làm phần nhóm em rút kinh nghiệm thân làm dự án nho nhỏ cho mình, giúp nhóm có kinh nghiệm khảo sát thực tế có khả phân tích đánh giá thị trường cách tiếp cận khách hàng Về phần giúp nhóm em hiểu rõ cơng cụ mà lựa chọn phần lý thuyết, phương pháp tìm hiểu tính đặc thù giao diện website Trong trình tìm hiểu làm bài, chúng em cố gắng hoàn thiện làm hồn thiện mặt kiến thức Nhưng khơng thể tránh khỏi sai sót, mong thầy bạn góp ý để nhóm hồn thiện DANH MỤC TÀI LIỆU THAM KHẢO [1] Trang Web W3SCHOOL.COM [2] Trang web shopee.vn Link Project Của Nhóm: https://github.com/devtdq1701/Gr11.git ... VỀ WEBSITE BÁN THIẾT BỊ CHƠI GAME 2.1 MÔ TẢ YÊU CẦU Trang website Shop Bán Thiết Bị Chơi Game Shopee shop thiết bị chơi game online cầu nối giúp khách hàng – người có đam mê chơi game tìm thiết. .. 4.12 GIAO DIỆN TRANG NGÂN HÀNG Hình 4.12 Giao diện trang ngân hàng 4.13 GIAO DIỆN TRANG ĐỊA CHỈ Hình 4.13 Giao diện địa 4.14 GIAO DIỆN ĐỔI MẬT KHẨU Hình 4.14 Giao diện đổi mật 4 .15 GIAO DIỆN... TRANG WEBSITE BÁN THIẾT BỊ CHƠI GAME - Việc thiết kế website giúp cho bạn tiếp cận nguồn khách hàng tiềm nhiều so với phương pháp bán hàng truyền thống - Truyền tải thông tin thiết bị chơi game