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 ĐỒ ÁN CƠ SỞ 1 XÂY DỰNG & PHÁT TRIỂN WEBSITE BÁN GIÀY TRỰC TUYẾN Đà Nẵng, tháng 5 năm 2021 Hiện nay với sự bù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

ĐỒ ÁN CƠ SỞ 1 XÂY DỰNG & PHÁT TRIỂN WEBSITE BÁN GIÀY

TRỰC TUYẾN

Đà Nẵng, tháng 5 năm 2021

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ựngriê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ìnhlự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ứcmua 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ệcmua hàng thuận lợi

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

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 13

DANH MỤC TÀI LIỆU THAM KHẢO 14

DANH MỤC HÌNH

Trang

Hình 1.1 – Demo trang web 1

Hình 1.2 – Trang trang chủ 7

Hình 1.3 – Trang cửa hàng 8

Hình 1.4 – Trang blog 8

Hình 1.5 – Trang liên hệ 9

Hình 1.6 – Trang giới thiệu 9

Hình 1.7 – Trang giỏ hàng 10

Hình 1.8 – Trang tìm kiếm 10

MỞ ĐẦU

1

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ựngriê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ìnhlự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ứcmua 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ệcmua hàng thuận lợi

Hình 1.1 – Demo trang web

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ỗingườ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áttriể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àycàng cao của người tiêu dùng họ mong muốn có những thông tin nhanh và chínhxá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àngmộ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ệchạ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 suygiảm Vì vậy để đáp ứng nhu cầu mua sắm của người tiêu dùng em đã tiến hànhthiết kế một trang web mua sắm giày trực tuyến, đáp ứng được nhu cầu mua sắmcủ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ẩmmộ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ênnay 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ầnmộ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à 7ngà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 Khimua 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ẩmphù 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 để ý đếnchuyệ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 webmang 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ếmriê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 đăngnhững thông tin về giày của mình Website cho phép khách hàng đặt hàng quacá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útngườ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ệtchặ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 ratrang 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ânchia 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ó koongthể 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 trungtâ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ậnhành bởi World Wide Web Consortium (W3C) Bạn có thể kiểm tra tìnhtrạ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à

<article>, <header>, <footer>

 Ư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ìnhduyệ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í

- 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ươngtác với các trang HTML dựa trên đối tượng (object-based scripinglanguage) 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àotập tin HTML bằng tag <script> hoặc tích hợp (integrated) vào trang webthông qua một tập tin được khai báo trong <link>

- 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 scriptthi 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 Sheetslanguage Nó dung để tạo phong cách và định kiểu cho những yếu tố đượcviế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ườiviế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ộtwebsite đẹ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 theotê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.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ạinhững ý kiến của mình về website

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ếm2.2 Sơ đồ phân cấp hệ thống

thước

Tên sản phẩm

Giá sản phẩm

Hãng sản xuất

Danh sách sản phẩm

Chi tiết sản phẩm

Đánh giá

Chọn sản phẩm

Đặt hàng

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ầnphả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

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ế websitebán giày” Đã tạo nên một trang web mang lại nhiều lợi ích cho người mua lẫnngườ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ảiphá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ươngtrì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ểnvớ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ặtchẽ, thông tin đầy đủ đến khách hàng Tạo cho khách hàng có niềm tin tưởngchắc chắn vào website Để phát triển hơn trong việc thương mại hóa trangwebsite bán hàng Chúng tôi sẽ cải thiện nhiều hơn trong tương lai Việc thêmnhiề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