Đồ Án Cơ Sở 1 Đề Tài- Xây Dựng Website Bán Giày.pdf

Với sự phát triển mạnh mẽ của công nphệ thông tin và xu hướng mua sắm trực tuyến ngày cảng tăng, việc tạo ra một giao diện website hấp dẫn và tiện lợi là yếu tổ quyết định để thu hút và

TRƯỜNG DAI HOC CONG NGHE THONG TIN VA

TRUYEN THONG VIET —- HAN

KHOA KHOA HOC MAY TINH

VKU

ĐỎ ÁN CƠ SỞ 1

Đề tài: Xây dựng website bán giày

Sinh viên thực hiện: Trần Như Kha

Dinh Lê Thai Dương Giảng viên hướng dẫn: Lê Viết Trương

Lớp: 22IT3

Đà Nẵng, tháng 6 năm 2023

TRƯỜNG DAI HOC CONG NGHE THONG TIN VA

TRUYEN THONG VIET —- HAN

KHOA KHOA HOC MAY TINH

ĐỎ ÁN CƠ SỞ 1

Xây dựng website bán giày

Đà Nẵng, tháng 6 năm 2023

MỞ ĐẦU

Chúng em xin trân trọng gửi đến quý thầy cô báo cáo về đồ án xây dựng giao diện website bán giảy Báo cáo này tập trung trình bày quá trình nghiên cứu và phát triển giao điện website nhằm đáp ứng nhu cầu mua sắm thực phẩm trực tuyến của khách hàng

Việc xây dựng giao diện website bản thực phâm là một yêu cầu quan trọng trong thị trường thương mại điện tử ngày nay Với sự phát triển mạnh mẽ của công nphệ thông tin và xu hướng mua sắm trực tuyến ngày cảng tăng, việc tạo ra một giao diện website hấp dẫn và tiện lợi là yếu tổ quyết định để thu hút và s1ữ chân khách hàng

Trong báo cáo này, chúng em sẽ trình bày chỉ tiết về quá trinh nghiên cứu, phân tích yêu cầu, thiết kế và triển khai giao diện website bán giảy Chúng em đã áp dụng các nguyên tắc thiết kế giao diện sáng tạo, tôi ưu trải nghiệm người dùng và tạo ra một trang web đễ sử dụng và hấp dẫn Đồng thời, chúng em cũng đã nghiên cứu các công

nghệ và công cụ phát triển web để đảm bảo tính linh hoạt và tương thích trên nhiều

nên tảng

Chúng em hy vọng rằng báo cáo này sẽ mang lại cái nhìn tông quan về quy trinh xây dựng giao diện website bán giày và đóng góp vảo việc hiểu rõ hơn về lĩnh vực thương mại điện tử Dong thời, chúng em cũng mong rằng báo cáo này sẽ đạt được sự đánh giá và phản hồi tích cực từ phía quý thầy cô

Xin chân thành cảm ơn sự quan tâm và hỗ trợ của quý thầy cô trong quá trình thực hiện đô án này

LỜI CẢM ƠN

Lời đầu tiên nhóm em xin cảm ơn thay, cô và đặc biệt là GVHD Lê Viết Trương

đã giúp chúng em trang bị kĩ năng và thực hiện đề tài nảy Cảm ơn thầy Lê Việt

Trương vì đã hướng dẫn và giải đáp những khuất mắt đã gặp phải để hoàn thành tốt để tài này

Trong đề tài này đã giúp chúng em có cơ hội làm công việc nhóm và nó còn

giúp chúng em học được kĩ năng thiết kế website, ghi báo cáo, và cuỗi cùng chúng

em cũng đã vận dụng, tìm tòi để hoàn thành tốt nhất dé tài có thể

Tuy nhiên, trong quá trình làm nhóm em còn nhiều thiếu sót, rất mong nhận

được sự góp ý và nhận xét từ quý thầy cô nhằm hoàn thiện tốt dé tài này, từ đó giúp

nhóm em làm nguồn kiến thức nền áp dụng vào công việc

Chúng em xin chân thành cảm ơn quý thầy cô!

LỜI NHẬN XÉT

Các đề mục

MỤC LỤC

000019)/68016)9)009)))90N -aỶỶỶỶ 1

1.1 TOng quate ccccccccccceccsseescssesscssessssecsessessessesseseesesesssseseesecseseseisuteeseessen 1 B1 can 1

1.2 NegOn ngit, cng cu h6 tro ccc eccecccsesecsesscsesseseseesessesicsesicecsssnsncesseseetees 2

V3 Cu trite dG atic cccccccccccccccceesseseesscseseeseessesscssesessssessessnseesesececsesecsssusesseseceess 2 CHUONG 2 PHAN TICH VA THIET KE HE THONG ceccecccccccccsceseeeeseeseeseseeens 4 2.1 Phan tich yOu Cau.ii.ccccccccccccccssescssescsesecsesessessesessesessesessesessesessisevsessesseesetes 4

2.1.2 _ Yêu cầu chức năng - 52 S1 E121 1211212112111 2e 4 2.1.3 Yêu cầu phi chức năng - 2-2 1 1S E11211211111111212111121212 2e 4

22.1 Thiếtkế 0207 ccc cesseeseceseenseensecnsesssesseesseeseeeesseeentteeenieeeeas 5

CHUGONG 3 CAI DAT VA KET QUA THUC NGHIEM 0.cecccccecscescssessesetssesevsneeees 7

3.2 Kết quả thực nghiệm - 0 22222212211 1211151 111111111211 101 1111111111111 8111k chay 7

4.2 _ Hướng phát triỂn - S2 21111211 121111212112 1111212121 1e trau 9

Trang

Các đề mục

DANH MỤC CÁC HÌNH ẢNH

Hình 2-1 Bản thiết kế trang chủ s 2s 2 111E715115112111111111211111222111111 11 cu Hình 2-2 Bản thiết kế trang cửa hảng 52-51 1 1 1EE1511511211121112 211111 181 ru Hình 2-3 Bản thiết kế trang đăng ký - 5 S1 E21 12112121111211211121 2111211 x ru Hinh 3-1 Trang đăng nhập 2 2 12212211 12111211151 1111 15111111111 1101110111111 1 1k rrưy

si 21v.i: 0u.) 0888

Trang

Chương 1 Giới thiệu

CHƯƠNG 1 GIỚI THIỆU

1.1 Tổng quan

1.1.1 Tổng quan đề tài

Lĩnh vực thương mại điện tử và mua sắm trực tuyến đang ngày càng phát triển

Với Sự gia tăng của công nghệ và sự tiện lợi của việc mua săm trực tuyên Trong lĩnh

vực này, xây dựng Website bán giảy là một phần quan trọng nhằm cung cấp trải

nghiệm mua sắm thuận tiện, đáng tin cậy và hấp dẫn cho khách hàng Bán Giày là một thị tường tiềm năng co thé khai thác và đầy cạnh tranh, đòi hỏi sự chuyên nghiệp và

khả năng tạo ra giá trị để thu hút và giữ chân khách hàng Và việc xây dựng một website thân thiện với người khách hàng là một nhu cầu cần thiết cho mỗi cửa hàng và doanh nghiệp Nó không chỉ giúp người dùng tiết kiệm thời gian và công sức trong

việc mua sắm những món đồ yêu thích, mà còn tạo cơ hội kinh doanh và tiếp thị hiệu

quả cho các cửa hàng kinh doanh

1.12 Lý do chọn đề tài

Có một số lý do mà để tài này hấp dẫn và đáng được nghiên cứu:

Nhu cầu thị trường: Thị trường mua sắm trực tuyến đang trở nên rằm rộ Nhu cầu mua sắm online đang được giới trẻ yêu thích và xem nó như là một xu hướng Công nghệ hiện đại: Việc phát triển website bán giày tích hợp nhiều công nghệ

tiên tiến giúp lưu trữ và quản lí dữ liệu của người dùng tốt hơn Điều nay bao gôm tìm

kiếm thuận tiện, thanh toán trực tuyến, tích hợp đánh giá và nhận xét từ người dùng,

và quản lý đơn hàng

Tiện ích và tiết kiệm thời gian: M6t website co giao diện được thiết kế tối ưu nhất cho khách hàng, mang lại một cảm giác mua sắm hoàn toàn mới lạ Khách hang

có thê dễ đảng duyệt qua danh mục sản phẩm, tìm kiếm và đặt hàng từ nhà mà không cần đi đến cửa hàng truyền thống

Quản lý dễ đàng: Giao diện website bản thực phâm có thể tích hợp các tính năng quản lý đơn giản như quản lý sản phẩm, đơn hàng, khách hàng Điều này giúp các cửa hàng dễ dàng theo dõi hoạt động kinh doanh và thúc đấy quy trình quản lý hiệu quả

Tổng hợp lại, xây dựng giao điện website bán giày là một đề tài hap dan vì tiềm năng kinh doanh, tính phổ biến và tiện ích của nó Nó cung cấp một môi trường mua săm an toàn và tiện lợi cho khách hàng, và một mô hình kinh doanh cho cách chủ cửa hàng

Trang 1

Chương 1 Giới thiệu

1.2 Ngôn ngữ, công cụ hỗ trợ

HTML (Hyper Text Markup Language) là một ngôn ngữ đánh dấu sử dụng để xây dựng và cấu trúc các trang web Nó được sử dụng để định dạng và hiển thị các yếu tố

trên trang web, bao gồm văn bản, hình ảnh, liên kết, đầu mục, chú thích, bảng, biêu đồ,

video và nhiều thành phần khác HTML sử dụng cú pháp dựa trên thẻ (tag-based syntax) để xác định cách các yếu tố trên trang web được hiển thị và tương tác với nhau Mỗi yếu tố được bao quanh bởi các thẻ mở và đóng

CSS (Cascading Style Sheets) là một ngôn ngữ đánh dâu được sử dụng để mô tả và định dạng giao diện và bố cục của một trang web Nó cho phép bạn áp dụng các kiểu

và quy tắc định dạng cho các phần tử HTML trên trang web, như màu sắc, kích thước,

khoảng cách, đường viền, phông chữ và các hiệu ứng khác CSS hoạt động bằng cách

áp dụng các quy tắc định dạng vào các phần tử HTML thông qua các selector (bộ chọn) Bằng cách chọn các phần tử HTML hoặc nhóm phần tử, bạn có thể áp dụng các kiểu và thuộc tính tương ứng CSS cung cấp một cú pháp đơn giản và linh hoạt để xác định các quy tắc định dạng

JavaScript: là một ngôn ngữ lập trình kịch bản nó được dùng rộng rãi cho các trang web, nhưng cũng được dùng để tạo khả năng viết script sử đụng các đối tượng - nằm sẵn trong các ứng dụng Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript

Bootstrap là một famework front-end (giao diện người dùng) phô biến và mạnh

mẽ được sử dụng để xây dựng và thiết kế các trang web và ứng dụng web Nó cung cấp một bộ công cụ và tải liệu cho phép các nhà phát triển nhanh chóng tạo ra giao diện web thân thiện, đáng tin cậy và tương thích trên nhiều thiết bị và trình duyệt khác nhau Bootstrap được viết bằng HTML, CSS và JavaScript, và nó cung cập một tập hợp các lớp CSS, các thành phần UI (user interface) và các giao diện mâu để giảm thiểu công sức và thời gian phát triển V6i Bootstrap, ban co thé str dụng các lớp CSS

đã được định nghĩa trước dé tao ra các cấu trúc và kiêu dáng cho các phần tử trên trang web cua minh

jQuery: la thu vién javascript néi bat nhat, phé bién nhat trong lap trinh web Ra đời vào năm 2006 boi John Resig No da tro thanh mét thanh phan khéng thé thiếu trong cac website co str dung Javascript Voi slogan “Write less — Do more” (viét it

hơn — lam nhiều hơn) nó đã giúp lập trình viên tiết kiệm được rất nhiều thời gian và

công sức trong việc thiết kế website

13 Cau tric dé an

Báo cáo bao gồm các 4 chương như sau:

Chương 1: Tổng quan về đề tài như lý do chọn đề tài, các sản phẩm liên quan Giới thiệu các công cụ, ngôn ngữ đã sử dụng trong quá trình xây dựng website Đồng thời giới thiệu về cầu trúc của bản báo cáo đồ án

Chương 2: Phân tích và trình bảy những yêu cầu của hệ thống bao gồm: yêu cầu người dung, yêu cầu chức năng, phí chức năng và yêu câu hệ thống, Bên cạnh đó mô

tả thiết kế của hệ thống về giao diện có chứa các hình ảnh và giải thích

Chương 3: Môi trường cài đặt, công cụ và kết quả đạt được gồm hình ảnh và giải thích

Trang 2

Chương 1 Giới thiệu

Chương 4: Đánh giá chung về đề tài: các kết quả chính đạt được, mức độ đáp ứng

theo yêu câu đề ra Trên cơ sở đó đưa ra những để xuất, định hướng phát triển đề tải

trong tương lai

Trang 3

Chương 2 Phân tích và thiết kế hệ thông

CHƯƠNG 2 PHAN TICH VA THIET KE HE THONG

2.1 Phân tích yêu cầu

2.1.1 Yêu cầu của người dùng

Với vai trò là người dùng, tôi muốn tạo tài khoản với thông tin cá nhân và thông tin

đăng nhập (Chức năng đăng ký tài khoản)

Với vai trò là người dùng, tôi muốn đăng nhập vào tài khoản sau khi đăng ký

(Chức năng đăng nhập)

Với vai trò là người dùng, tôi muốn tìm kiếm sản phẩm theo tên, danh mục và từ khóa (Chức năng tìm kiếm)

Với vai trò là người dùng, tôi muốn thêm một sản phẩm đã chọn vào giỏ hàng (Chức năng thêm sản phâm vào g1ỏ hang)

Với vai trò là người dùng, tôi muốn xem nội dung của giỏ hàng và có khả năng

chỉnh sửa sô lượng hoặc xóa sản phẩm, kiêm tra tông số tiên của g1ỏ hàng trước khi thanh toán (Chức năng xem và chỉnh sửa g1ỏ hàng)

Với vai trò là người dùng, tôi muốn tiến hành thanh toán và cung cấp thông tin giao

hàng và thanh toán, chọn phương thức thanh toán ưu thích và nhập thông tin cần thiết (Chức năng thanh toán)

Với vai trò là người dùng, tôi muốn có thé đánh giá và nhận xét cho các sản phẩm (Chức năng đánh giá và nhận xét sản phẩm)

2.1.2 Yêu cầu chức năng

Từ bảng phân tích yêu cầu của người dùng ở trên, hệ thống có các chức năng cơ bản sau:

Đăng ký tài khoản: Chức năng này cho phép người dùng có thể đăng ký tài khoản bằng cách cung cấp các thông tin cá nhân cần thiết như tên đăng nhập, mật khấu, họ tên, địa chỉ, email,

Đăng nhập: Chức năng này cho phép người dùng có thể đăng nhập vào tài khoản

da duoc dang ky bang cách nhập tên đăng nhập va mật khâu

Tìm kiếm: Chức năng này cho phép người dùng có thể tìm kiếm bằng cách nhập vào ô nhập tìm kiếm tên sản phâm, tên cửa hàng

Thêm vảo giỏ hàng: Người dùng có thể thêm sản phâm vào giỏ hàng bằng cách ấn nút thêm vào giỏ hàng

Thanh toán: Chức năng này cho phép người dùng thanh toán đơn hàng qua master card

2.13 Yêu cấm phi chức năng

Ngoài ra hệ thông cân có những yêu câu phi chức năng sau:

Dam bảo chât lượng thực phâm: Hệ thông cân có các quy trình kiêm soát chat lượng và đảm bảo tính tươi ngon, an toàn của sản phâm thực phâm Các tiêu chuân về việc lưu trữ, vận chuyên và bảo quản thực phâm cân được tuân thủ

Trang 4

Chương 2 Phân tích và thiết kế hệ thông

Tiêu chuẩn và quy định: Hệ thông cần tuân thủ các tiêu chuẩn và quy định liên quan đến bán hàng và thực phẩm, như tuân thủ về an toản thực phẩm, quy định về quảng cáo, quy định về bảo vệ người tiêu dùng,

Khả dụng: Giao diện người dùng cần được thiết kế sao cho dễ sử dụng và thân thiện với người dùng Hệ thống cần hỗ trợ đa nền tảng, đảm bảo tương thích trên các thiết bị đi động và trình duyệt web khác nhau

Hiệu suất: Hệ thống cần đảm bảo hiệu suất cao để xử lý đồng thời nhiều yêu cầu từ

người dùng mả không gây trễ hệ thống Thời gian tải trang web và xử lý các yêu cầu

tìm kiếm, đặt hàng và thanh toán cần được tối ưu

Độ tin cậy: Hệ thống cần đảm bảo ôn định và đáng tin cậy để người dùng có thể truy cập và mua hàng mọi lúc Backup dữ liệu định kỳ và khả năng phục hồi sau sự cố

là cần thiết để đảm bảo không mắt dữ liệu quan trọng

2.1.4 Yêu cầu hệ thông

Website có thế hoạt động trên tất cả hệ điều hành và hầu hết các trình duyệt bao

gồm: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera va Internet

Explorer 10 trở lên Website yêu cầu một bộ nhớ tạm thời tối thiêu từ 2 gigabyte va dé phân giải màn hình khuyến khích 1024 pixels chiều réng va 768 pixels chiêu dải

2.2 Thiết kế

2.2.1 Thiết kế giao diện

Cac giao dién đã thiét ké:

Logo Menu Gio hang/ Pang nhap

Banner

Hình 2-1 Bản thiết kế trang chủ

Hinh 2-1 Mô tả trang chủ của trang web Với thanh menu ở phía trên với các

chức năng giỏ hàng, đăng nhập Phía dưới là banner cho trang web Bên dưới nữa là

phân trình bày cho các chức năng của web, sản phâm nối bật, các danh mục,

Trang 5