BÁO CÁO ĐỒ ÁN CƠ SỞ - ĐỀ TÀI: THIẾT KẾ WEBSITE BÁN GIÀY TRỰC TUYẾN

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT HÀN BÁO CÁO ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI: THIẾT KẾ WEBSITE BÁN GIÀY TRỰC TUYẾN Sinh viên thực hiện: Phan Văn Khải Giảng viên hướng dẫn: THS.Ninh Khánh Chi Lớp: 20IT10 Đà nẵng, tháng 5 năm 2021 ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT HÀN Hiện nay với sự bùng nổ của công nghệ việc mua sắm không chỉ đơn giản là đến cửa hàng và chọn món hàng mình ưa thích mà người tiêu dùng có thể dễ dàng truy cập vào cửa hàng thông qua trang website mà cửa hàng xây dựng riêng Ở đó khách hàng dễ dàng lựa chọn, thay đổi để chọn ra sản phẩm mà mình ưa thích nhất Sau đó ĐỒ ÁN CƠ SỞ 1 chỉ vài bước đặt hàng nữa là họ sẽ đặt được sản phẩm mình lựa chọn Với tiêu chí XÂY DỰNG & PHÁT TRIỂN WEBSITE BÁN GIÀY nhanh, tiện lợi, không tốn nhiều công sức và kích cầu sức mua Chúng tôi phát triển TRỰC TUYẾN website bán giày điện tử giúp người mua tiếp cận việc mua hàng thuận lợi Đà Nẵng, tháng 5 năm 2021 NHẬN XÉT ……………………………… …………………………………………………………………………………… … …………………………………………………………………………………… … …………………………………………………………………………………… … …………………………………………………………………………………… … …………………………………………………………………………………… … …………………………………………………………………………………… … …………………………………………………………………………………… … …………………………………………………………………………………… … …………………………………………………………………………………… … …………………………………………………………………………………… … …………………………………………………………………………………… … …………………………………………………………………………………… … …………………………………………………………………………………… … …………………………………………………………………………………… … …………………………………………………………………………………… … NHẬN XÉT …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… ……………………………………………………… MỤC LỤC MỞ ĐẦU 1 Chương 1 Giới thiệu 2 1.1 Tổng quan 2 1.2 Giới thiệu về website bán giày 2 1.3 Giới thiệu về các công cụ thiết kế website 3 1.3.1 HTML là gì? 3 1.3.2 Giới thiệu về JavaScript 5 1.3.3 Giới thiệu về CSS 5 1.3.4 Giới thiệu về Bootstrap .6 Chương 2 Phân tích thiết kế hệ thống 7 2.1 Mô hình tổng quan của hệ thống nghiên cứu .7 2.1.1 Hệ thống thiết kế 7 2.1.2 Hình ảnh các trang và chức năng trong website 7 2.2 Sơ đồ phân cấp hệ thống 11 Chương 3 Nghiên cứu tổng quan .12 3.1 Phương pháp 12 3.2 Hạn chế, tồn tại của các phương pháp 12 3.3 Quá trình triển khai xây dựng 12 DANH MỤC HÌNH Trang MỞ ĐẦU Hiện nay với sự bùng nổ của công nghệ việc mua sắm không chỉ đơn giản là đến cửa hàng và chọn món hàng mình ưa thích mà người tiêu dùng có thể dễ dàng truy cập vào cửa hàng thông qua trang website mà cửa hàng xây dựng riêng Ở đó khách hàng dễ dàng lựa chọn, thay đổi để chọn ra sản phẩm mà mình ưa thích nhất Sau đó chỉ vài bước đặt hàng nữa là họ sẽ đặt được sản phẩm mình lựa chọn Với tiêu chí nhanh, tiện lợi, không tốn nhiều công sức và kích cầu sức mua Chúng tôi phát triển website bán giày điện tử giúp người mua tiếp cận việc mua hàng thuận lợi Hình 1.1 – Demo trang web 1 Chương 1 Giới thiệu 1.1 Tổng quan Hiện nay việc kinh doanh mua bán là nhu cầu không thể thiếu của mỗi người Việc quản bá và mua sắm các sản phẩm ngày càng được đầu tư và phát triển Với việc quản bá sản phẩm kinh doanh đến từng cá nhân với chi phí thấp, hiệu quả cao là một vấn đề nan giải của người kinh doanh Với nhu cầu ngày càng cao của người tiêu dùng họ mong muốn có những thông tin nhanh và chính xác về sản phẩm mà họ muốn mua mà đối với việc tư vấn cho từng khách hàng một là việc rất mất thời gian Mặc khác trong tình hình dịch bệnh ngày nay việc hạn chế đi lại là điều quan trọng nhất, nên việc mua hàng tại của hàng trở nên suy giảm Vì vậy để đáp ứng nhu cầu mua sắm của người tiêu dùng em đã tiến hành thiết kế một trang web mua sắm giày trực tuyến, đáp ứng được nhu cầu mua sắm của người dùng, giúp người dùng nắm bắt được giá cả và thông tin của sản phẩm một cách dễ dàng và nhanh chóng nhất Đặc biệt trong tình hình dịch bệnh hiên nay thì việc mua sắm online đang trở nên phổ biến và phát triển Với việc mua sắm online ngày càng trở nên quan trọng và cần thiết , chỉ cần một cú click chuột thì người dùng có thể có được sản phẩm mà mình mong muốn Sau khi đặt hàng các nhân viên giao hàng lập tức mang sản phẩm đến tận nhà bạn Mua sắm online cho phép mua hàng bất cứ khi nào mà người dùng muốn Website bán hàng online không bao giờ đóng cửa, có thể mua sắm 24/24 giờ và 7 ngày trong tuần Mua sắm ở các chợ, trung tâm thương mại hay cửa hàng rất khó để người dùng có thể so sánh đặc điểm và giá của các sản phẩm với nhau Khi mua hàng online, người dùng có thể dễ dàng so sánh và đưa ra lựa chọn sản phẩm phù hợp nhất Đôi khi chúng ta gặp phải những người bán hàng khó tính tại một số địa điểm bán hàng Mua sắm online thì khách hàng chẳng phải để ý đến chuyện đó nữa cứ thoải mái lựa chọn mặt hàng mình thích 1.2 Giới thiệu về website bán giày Website bán giày của em có tên gọi là: SHOE STARTS Là một trang web mang lại cho những tín đồ yêu giày một nơi mua sắm giày và cung cấp những 2 thông tin về giày Trang web đem đến cho người dùng nhiều sự lựa chọn đa dạng và phong phú về những mẫu giày trên thị trường Người dùng có thể tìm kiếm riêng cho mình những đôi giày yêu tích Hay có thể tìm hiểu nhiều thông tin về giày, các mẹo về giày hay có thể tương tác với người quản trị để được đăng những thông tin về giày của mình Website cho phép khách hàng đặt hàng qua các bước đơn giản, tiện lợi và nhanh chóng sau khi đặt hàng khách hàng sẽ nhận được giày của mình vừa chọn mua trong khoảng thời gian nhanh nhất Để thu hút người dùng website luôn cập nhật và bổ sung thêm nhiều loại giày với nhiều mẫu mã, màu sắc, thương hiệu… khác nhau Thông tin trên website được kiểm duyệt chặt chẽ và liên tục được làm mới mỗi ngày 1.3 Giới thiệu về các công cụ thiết kế website - Sử dụng các công cụ như: HTML, CSS, Bootstrap, Javascript để tạo ra trang web - Sử dụng Sublime Text 3 để viết code 1.3.1 HTML là gì? - HTML là chữ viết tắt của Hypertext Markup Language Nó giúp cho người dùng tạo cấu trúc thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, links, blockquotes , - HTML không phải là ngôn ngữ lập trình, đồng nghĩa với việc nó koong thể tạp ra các chức năng “động” được Nó chỉ giống như Microsoft Word, dùng để bố cục và định dạng trang web • Lịch sử HTML - HTML được sáng tạo bởi “Tim Berners – Lee”, nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ Anh ta đã nghĩ ra được ý tưởng cho hệ thống hypertext trên nền Internet - Hypertext có nghĩa là văn bản chứa links, nơi mọi người có thể xem và truy cập ngay lập tức Anh xuất bản phiên bản mới của HTML đều có thêm tag mới và các thuộc tính mới 3 - Theo Mozilla Developer Network: “HTML Element Reference” hiện có hơn 140 HTML tags, mặc dù một vài trong số chúng đã bị tạm ngưng (không hổ trợ bởi các trình duyệt hiện đại) - Nhanh chóng phổ biến ở mức độ chóng mặt, HTML được xem như là chuẩn mật của một website Các thiết lập và cấu trúc của HTML được vận hành bởi World Wide Web Consortium (W3C) Bạn có thể kiểm tra tình trạng mới nhất của ngôn ngữ này bất kỳ lúc nào trên trang W3C’s website - Nâng cấp mới nhất gần đây là vào năm 2014, khi ra mắt chuẩn HTML5 Nó thêm vài tags vào markup, để xác định rõ nội dung thuộc loại gì, như là , , • Ưu điểm - Ngôn ngữ được sử dụng rộng lớn này có rất nhiều nguồn tài nguyên hỗ trợ và cộng đồng sử dụng cực lớn Sử dụng mượt mà trên hầu hết mọi trình duyệt - Có quá trình học đơn giản và trực tiếp - Mã nguồn mở và hoàn toàn miễn phí - Markup gọn gàn và đồng nhất - Chuẩn chỉnh của web được vận hành bởi World Wide Web Consortium (W3C) - Dễ dàng tích hợp với các ngôn ngữ phụ trợ như PHP và Node.js • Nhược điểm - Được dùng chủ yếu cho web tĩnh Đối với các tính năng động, bạn cần sử dụng JavaScript hoặc ngôn ngữ phụ trợ thứ ba như PHP - Nó có thể thực thi một số logic nhất định cho người dùng Vì vậy, hầu hết các trang đều cần được tạo riêng biệt, bất kể cả khi nó sử dụng cùng các yếu tố, như là headers hay footers - Một số trình duyệt chậm hỗ trợ tính năng mới - Khó kiểm soát cảnh thực thi của trình duyết ( ví dụ như những trình duyệt cũ không render được tag mới) 4 1.3.2 Giới thiệu về JavaScript - JavaScript là một ngôn ngữ kịch bản (scriping language) dùng để tương tác với các trang HTML dựa trên đối tượng (object-based scriping language) Ngôn ngữ này chủ yếu dùng cho kỹ thuật lập trình ở phía client - Các chương trình JavaScript thường được nhúng (embedded) trực tiếp vào tập tin HTML bằng tag hoặc tích hợp (integrated) vào trang web thông qua một tập tin được khai báo trong - JavaScript có một số đặc điểm sau : + Là một ngôn ngữ thông dịch (interpreted language), nghĩa là các script thi hành không cần biên dịch trước (precompile) Trình duyệt dịch script, phân tích và thi hành ngay tức thời + Lập trình theo cấu trúc (Structured programing) + Giống như C và Java, chúng có phân biệt chữ HOA và thường 1.3.3 Giới thiệu về CSS - CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheets language Nó dung để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn gnuwx đánh dấu, như HTML Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web Nó phân biệt cách hiển thị của trang bằng cách điều khiển bố cục, màu sắc và font chữ • Ưu điểm - Tiết kiệm băng thông (bandwith) - Kết hợp và làm tăng sức mạnh cho HTML - Có thể đặt các đối tượng ở bất kì vị trí nào trên webpage - Hỗ trợ cho việc in ấ webpage - Hỗ trợ tối đa việc tùy biến webpage - Hỗ trợ các công cụ tìm kiếm - CSS tương thích với hầu hết các trình duyệt - Giúp các webpage có sự đồng bộ tuyệt đối, dễ dàng nâng cấp giao diện 5 1.3.4 Giới thiệu về Bootstrap Bootstrap cho phép quá trình thiết kế website diễn ra nhanh chóng và dễ dàng hơn dựa trên những thành tố cơ bản có sẵn như typography, forms, buttons, tables, grids, navigations, image carousels … 6 Chương 2 Phân tích thiết kế hệ thống 2.1 Mô hình tổng quan của hệ thống nghiên cứu 2.1.1 Hệ thống thiết kế  Các phần của trang web Trang web gồm có 6 trang cơ bản đó là: trang chủ, cửa hàng, blog, liên hệ, giới thiệu, và giỏ hàng Bên cạnh đó trang web còn có các chức năng như: tìm kiếm, đăng kí, đăng nhập, thanh toán, bình luận ý kiến 2.1.2 Hình ảnh các trang và chức năng trong website Để tạo nên một website được nhiều người quan tâm và biết đến thì việc thiết kế website như thế nào là một việc quan trọng trong việc tạo nên một website đẹp, lôi cuốn, bắt mắt và hấp dẫn người dùng truy cập • Trang chủ: - Là trang thể hiện bộ mặt của website nên trang chủ cần phải được thiết kế đẹp mắt và có điểm nhấn sẽ thu hút được nhiều người truy cập - Thiết kế trang chủ đẹp, chuyên nghiệp, bố cục có trình tự và logic - Thiết kế các banner, logo, hình ảnh,… phù hợp và bắt mắt - Hiển thị được những sản phẩm và thông tin mới nhất của sản phẩm Hình 1.2 – Trang chủ 7 • Cửa hàng: - Được thiết kế phù hợp không rối mắt người dùng - Hình ảnh rõ nét, thông tin sản phẩm đầy đủ và chính xác - Có nhiều mục để khách hàng có thể tìm kiếm như: tìm kiếm theo tên giày, theo hãng giày, theo size giày,… - Có các mục sắp xếp để khách hàng lựa chọn như: lựa chọn theo giá, lựa chọn theo khuyến mãi, lựa chọn theo sản phẩm bán chạy,… Hình 1.3 – Cửa hàng • Blog: - Là trang mang đến cho những tín đồ yêu giày những thông tin mới nhất và chính xác nhất về những loại giày, các mẹo về giày - Nơi khách hàng có thể để lại những ý kiến của mình về website 8 Hình 1.4-Blog • Liên hệ: - Là trang để khách hàng có được các thông tin như đại chỉ, email, số điện thoại của shop giày cũng như là nơi khách hàng có thể để lại những ý kiến của mình về website Hình 1.5-Liên hệ • Giới thiệu: - Là trang cung cấp cho khách hàng những thông tin về website của chúng tôi 9 Hình 1.6-Giới thiệu • Giỏ hàng - Là trang mà các sản phẩm mà khách hàng lựa chọn được lưu lại và chờ đợi bạn đặt hàng - Tại đây khách hàng có thể xem lại lần cuối sản phẩm của mình trước khi đặt hàng có thể lựa chọn số lượng hay áp dụng các mà giảm giá đang có Hình 1.7-Giỏ hàng • Tìm kiếm 10 - Tại đây khách hàng có thể viết tên những loại giày mà mình muốn tìm kiếm rồi chỉ cần một cú click chuột thì sản phẩm mà khách hàng tìm kiếm sẽ hiện ngay ra trước mắt Hình 1.8-Tìm kiếm 2.2 Sơ đồ phân cấp hệ thống WEBSITE BÁN GIÀY Trang chủ Tìm kiếm Cửa hàng Giỏ hàng Tên sản phẩm Danh sách sản phẩm Chọn sản phẩm Giá sản phẩm Chi tiết sản phẩm Đặt hàng Hãng sản xuất Đánh giá Kích thước Mức giá 11 Giới thiệu Liên hệ Blog Chương 3 Nghiên cứu tổng quan 3.1 Phương pháp Phương pháp: Để truy cập website người dùng có thể sử dụng smartphone, máy tính, ipab,…hoặc các thiết bị có kết nối mạng để truy cập trực tiếp vào cửa hàng thông qua website trực tuyến Ở đó họ có thể thoải mái tìm kiếm và lựa chọn những mẫu giày mình thích, có thể lựa chọn thêm, sửa, xóa giỏ hàng tùy ý Với nút thanh toán họ nhanh chóng hoàn tất việc lựa chọn những đôi giày ưng ý của mình Bên phía người bán sẽ dễ dàng thống kê và lên đơn hàng nhanh chóng cho khách hàng 3.2 Hạn chế, tồn tại của các phương pháp So với việc đến cửa hàng để lựa chọn, với phương pháp trên người dùng cần phải có các thiết bị như điện thoại, máy tính bảng, máy tính,…và phải cần có kết nối internet thì mới thực hiện được việc truy cập vào website và mua hàng 3.3 Quá trình triển khai xây dựng 1 Lên ý tưởng 12 2 Phác họa ý tưởng 3 Tìm hiểu nghiên cứu thị trường 4 Bắt đầu vào việc viết website 5 Xây dựng website có logic và khoa học 6 Thiết kế các phần cơ bản 7 Thiết kế và trang trí giao diện website 8 Chạy và kiểm thử 9 Tìm và sửa lỗi 10 Hoàn thành website và báo cáo 13 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Quá trình nghiên cứu, phân tích, khảo sát và xây dựng đề tài “Thiết kế website bán giày” Đã tạo nên một trang web mang lại nhiều lợi ích cho người mua lẫn người Giúp kết nối giữa shop với các khác hàng ở xa và mọi nơi mọi lúc Là giải pháp tốt nhất cho sở thích mua sắm trong tình hình dịch bệnh hiện nay Cần xác định rõ mục tiêu và đảm bảo các mục tiêu đặt ra phải thực tế đủ sức để thực hiện Thực hiện các chương trình quảng cáo website Tung ra các chương trình khuyến mãi hấp dẫn thu hút khách hàng Có chiến lược hợp tác phát triển với nhiều đối tác uy tín Các sản phẩm trên website phải được kiểm duyệt chặt chẽ, thông tin đầy đủ đến khách hàng Tạo cho khách hàng có niềm tin tưởng chắc chắn vào website Để phát triển hơn trong việc thương mại hóa trang website bán hàng Chúng tôi sẽ cải thiện nhiều hơn trong tương lai Việc thêm nhiều phương thức thanh toán sẽ giúp người dùng nhanh chóng đặt hàng tiện lợi Ngoài ra việc hoàn thiện phần dữ liệu sẽ giúp trang web đạt được hiệu quả cao 14 DANH MỤC TÀI LIỆU THAM KHẢO Wikipedia https://vi.wikipedia.org/wiki/HTML Wikipedia https://vi.wikipedia.org/wiki/JavaScript Wikipedia https://vi.wikipedia.org/wiki/CSS W3school https://www.w3schools.com/css/default.asp Bootstrap https://www.w3schools.com/bootstrap 15 ... TRIỂN WEBSITE BÁN GIÀY nhanh, tiện lợi, khơng tốn nhiều cơng sức kích cầu sức mua Chúng phát triển TRỰC TUYẾN website bán giày điện tử giúp người mua tiếp cận việc mua hàng thuận lợi Đà Nẵng, tháng... hàng thích 1.2 Giới thiệu website bán giày Website bán giày em có tên gọi là: SHOE STARTS Là trang web mang lại cho tín đồ yêu giày nơi mua sắm giày cung cấp thông tin giày Trang web đem đến cho... Bắt đầu vào việc viết website Xây dựng website có logic khoa học Thiết kế phần Thiết kế trang trí giao diện website Chạy kiểm thử Tìm sửa lỗi 10 Hoàn thành website báo cáo 13 KẾT LUẬN VÀ HƯỚNG PHÁT