Đồ án cơ sở 1 thiết kế web bán giày

 Cho phép khách hàng tìm kiếm và lọc sản phẩm theo các tiêu chí khácnhau như giá cả, kích thước và thương hiệu , màu sắc ,v.v  Cung cấp các chức năng đăng ký tài khoản và đăng nhập để

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

Thiết kế web bán giày TÊN ĐỀ TÀI ABC

Sinh viên thực hiện: Nguyễn Huỳnh Quang ABC

Giảng viên hướng dẫn: ThS TS Lê Thị Thu Ng Hồ Anh Trang a AAA

0

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

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

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

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

2

3

MỤC LỤC

M c l c ục lục ục lục

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN .2

MỤC LỤC 3

Mục lục hình ảnh .5

Chương I:Khảo sát và phân tích đề tài 7

1 Phân tích yêu cầu của đề tài .7

1.1 Giới thiệu đề tài .7

1.2 Mục tiêu của đề tài .7

2 Phân tích hệ thống cần thiết kế .7

2.1 Một số chức năng chính của trang web bao gồm: .7

2.2 Các hệ thống cơ bản: .8

Chương II :Phân Tích và thiết kế hệ thống website .7

1 Phân tích nhu cầu của khách hàng về hệ thống .7

2 Thiết kế cơ sở dữ liệu .7

2.1 Mô hình liên kết thực thể(E – R) .7

2.2 Mô hình quan hệ .9

3 Công cụ hổ trợ .10

3.1 Xampp: .10

3.2 Visual Studio Code: .10

4 Ngôn ngữ lập trình .11

4.1HTML(HyperText Markup Language): .11

4.2 CSS(Cascading Style Sheets): .12

4.3 PHP(Hypertext Preprocessor) .12

4.4 SQL (Structured Query Language) .13

4.5 JavaScript .14

4.6 Bootstrap 5 .15

5

5 Các bước tiến hành .16

ChươngIII: Triển khai xây dựng trang website .17

1 Những kết quả quan trọng .17

1.2 Trang hiển thị sản phẩm: .18

2 Những thuật toán, câu lệnh chủ chốt của trang web .22

2.1 Câu lệnh giúp Web kết nối được với DataBase và trả kết quả là hình ảnh sản phẩm như hình .22

Chương IV: Tổng kết đề tài 25

1 Kết quả đạt được: .25

2 Ưu điểm và nhược điểm chưa làm được trong trang web .25

2.1 Ưu điểm .25

2.2 Nhược điểm, và những điều chưa làm được ở web 25

DANH MỤC CỤM TỪ VIẾT TẮT 27

1.Tài liệu tham khảo 27

2 Tài liệu Internet .27

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN 2

MỤC LỤC .3

LỜI CẢM ƠN 6

Chương I:Khảo sát và phân tích đề tài 7

1 Phân tích yêu cầu của đề tài .7

1.1 Giới thiệu đề tài .7

1.2 Mục tiêu của đề tài .7

2 Phân tích hệ thống cần thiết kế .7

2.1 Một số chức năng chính của trang web bao gồm: .7

2.2 Các hệ thống cơ bản: .8

Chương II :Phân Tích và thiết kế hệ thống website 7

1 Phân tích nhu cầu của khách hàng về hệ thống .7

2 Thiết kế cơ sở dữ liệu .7

2.1 Mô hình liên kết thực thể(E – R) .7

6

2.2 Mô hình quan hệ .9

3 Công cụ hổ trợ .10

3.1 Xampp: .10

3.2 Visual Studio Code: .10

4 Ngôn ngữ lập trình .11

4.1HTML(HyperText Markup Language): .11

4.2 CSS(Cascading Style Sheets): .12

4.3 PHP(Hypertext Preprocessor) .12

4.4 SQL (Structured Query Language) .13

4.5 JavaScript .14

4.6 Bootstrap 5 .15

5 Các bước tiến hành .16

ChươngIII: Triển khai xây dựng trang website .17

1 Những kết quả quan trọng .17

1.2 Trang hiển thị sản phẩm: .18

2 Những thuật toán, câu lệnh chủ chốt của trang web .22

2.1 Câu lệnh giúp Web kết nối được với DataBase và trả kết quả là hình ảnh sản phẩm như hình .22

1 Kết quả đạt được: .25

2 Ưu điểm và nhược điểm chưa làm được trong trang web .25

2.1 Ưu điểm .25

2.2 Nhược điểm, và những điều chưa làm được ở web 25

1.Tài liệu tham khảo 27

2 Tài liệu Internet .27

7

Mục lục hình ảnhLỜI CẢM ƠN

Hinh1 1 Mô hình liên kết thực thể(E – R) .8

Hinh1 2 Mô hình quan hệ .9

Hinh 2 1 Trang quảng bá .17

Hinh 2 2:Đăng Nhập .18

Hinh 2 3 Trang chủ .19

Hinh 2 4 Trang sản phẩm .19

Hinh 2 5 Trang thanh toán .20

Hinh 2 6 Trang thêm sản phẩm .20

Hinh 2 7 Trang quản lí đơn hàng .21

8

Em xin trân trọng cảm ơn

Sinh viên,

ABC

9

MỤC LỤC

LỜI CẢM ƠN

Để dự án này đạt kết quả tốt đẹp, em đã nhận được sự hỗ trợ, giúp đỡ của thầy cô Vớitình cảm sâu sắc, chân thành, cho phép chúng em được bày tỏ lòng biết ơn sâu sắc đếntất cả quý thầy cô đã tạo điều kiện giúp đỡ trong quá trình học tập và nghiên cứu vàphát triển đề tài

Trước hết chúng em xin gửi tới các thầy cô trường Đại học Công nghệ thông tin vàtruyền thông Việt – Hàn lời chào trân trọng, lời chúc sức khỏe và lời cảm ơn sâu sắc.Với sự quan tâm, dạy dỗ, chỉ bảo tận tình chu đáo của các giảng viên đã truyền tải các

kĩ năng cần thiết, đến nay chúng em đã có thể hoàn thành đồ án cơ sở 1

Đặc biệt chúng em xin gửi lời cảm ơn chân thành nhất tới cô giáo –THS Hồ AnhTrang đã quan tâm giúp đỡ, giúp đỡ tận tình chúng em hoàn thành tốt đồ án này trongthời gian qua

Với điều kiện thời gian cũng như kinh nghiệm còn hạn chế, đồ án này không thể tránhđược những thiếu sót Chúng em rất mong nhận được sự chỉ bảo, đóng góp ý kiến củacác thầy cô để tôi có điều kiện bổ sung, nâng cao ý thức của mình, phục vụ tốt hơncông tác thực tế sau này

Chúng em xin chân thành cảm ơn!

10

DANH MỤC CÁC TỪ VIẾT TẮT

5E Engagement, Exploration, Explanation, Elaboration, Evaluation

STEM Science Technology Engineering Mathematics

11

DANH MỤC HÌNH VẼ

No table of figures entries found.Error! Hyperlink reference not valid.Hình 1.1 aaaaaaa 11

Error! Hyperlink reference not valid.Hình 1.2 bbbbbbbbbbbb 12

Error! Hyperlink reference not valid.Hình 1.3 ccccccccccccccccc 17Error! Hyperlink reference not valid.Hình 2.1.ddddddd 24

Error! Hyperlink reference not valid.Hình 2.2 eeeeeeeeeee 28

12

MỞ ĐẦU

1 Giới thiệu

Thế kỷ XXI, xã hội đề cao tầm quan trọng và sự kết nối của Khoa học, Kỹ thuật, Công nghệ

2 Mục tiêu, nhiệm vụ của đề tài

Mục tiêu của đề tài nhằm tìm hiểu……

3 Nội dung và kế hoạch thực hiện

3 Đối tượng, phạm vi và phương pháp tiếp cận

Dựa trên hướng tiếp cận

54 Bố cục của đề tàibáo cáo

Sau phần Mở đầu, báo cáo được trình bày trong ba chương, cụ thể như sau:

Chương 1 Tổng quan về … Trong chương này, báo cáo trình bày các khái niệm, đặc

điểm,

Chương 2 Phân tích thiết kế … Nội dung chương bao gồm các

0

Chương 3 Xây dựng … Chương này đề xuất…

Cuối cùng là Kết luận, Tài liệu tham khảo và Phụ lục liên quan đến đề tài.

1

KẾT LUẬN

1 Kết quả đạt được

Nêu những gì mình học được, đạt được qua quá trình làm đồ án

về mặt lý thuyết, về mặt thực nghiệm, trải nghiệm…

Bên cạnh …

2 Hướng nghiên cứu

Với những hạn chế và tồn tại nêu trên, hướng nghiên cứu …dự kiến như sau:

- Tìm hiểu

- Khai thác…

5

TÀI LIỆU THAM KHẢO

T r a n g 0 | 48

[1] T C f S Exploration, "Why STEM Topics are Interrelated: The Importance

of Interdisciplinary Studies in K-12 Education," 2008.

[2] ACT, "STEM EDUCATION IN THE U.S," 2017.

[3] V H Tiến, "Một số phương pháp dạy học tích cực".

[4] B G D V Đ TẠO, "ĐỊNH HƯỚNG GIÁO DỤC STEM TRONG TRƯỜNG TRUNG HỌC," 2018

[5] C D Council, "Promotion of STEM Education Unleashing Potential in Innovation," 2015.

[6] C Joint Economic Committee Chairman’s Staff Senator Bob Casey, STEM Education: Preparing for the Jobs of the Future, April 2012

[7] co-nen-khoa-hoc-ky-thuat-tien-tien-nhat-the-gioi-26818.aspx".

T r a n g 1 | 48

Shi, H., Xu, M., Li, R (2018) Deep learning for household load forecasting—a novel pooling deep RNNS IEEE Transactions on Smart Grid, 9(5), 5271–5280

Paul Viola and Michael Jones (2001) Rapid Object Detection using a Boosted Cascade

of Simple Features Computer Vision and pattern Recognition

Error! Hyperlink reference not valid https://cs231n.github.io/python-numpy-tutorial/

Chương I:Khảo sát và phân tích đề tài

T r a n g 2 | 48

1 Phân tích yêu cầu của đề tài

1.1 Giới thiệu đề tài

Đề tài "Thiết kế website bán giày dép và quần áo" là một dự án nhằm tạo ra mộttrang web chuyên về bán các loại giày dép online Trang web sẽ được thiết kế đểcung cấp cho khách hàng một trải nghiệm mua sắm tốt nhất với nhiều sản phẩmchất lượng và đa dạng về kiểu dáng, màu sắc và kích thước

1.2 Mục tiêu của đề tài

 Tìm hiểu các yêu cầu cơ bản về thiết kế website bán hàng trực tuyến

 Nghiên cứu và phân tích thị trường bán giày dép quần áo trực tuyến tạiViệt Nam

 Thiết kế giao diện website bán giày dép quần áo đẹp mắt, dễ sử dụng vàhiệu quả

 Xây dựng hệ thống quản lý và bảo mật thông tin khách hàng trên website

 Đảm bảo tính năng và hiệu suất của website vượt trội so với các đối thủcạnh tranh trên thị trường

2 Phân tích hệ thống cần thiết kế

2.1 Một số chức năng chính của trang web bao gồm:

 Hiển thị danh sách sản phẩm giày dép ,quần áo đa dạng với thông tin chitiết như kích thước, màu sắc, chất liệu và giá cả

 Cho phép khách hàng tìm kiếm và lọc sản phẩm theo các tiêu chí khácnhau như giá cả, kích thước và thương hiệu , màu sắc ,v.v

 Cung cấp các chức năng đăng ký tài khoản và đăng nhập để khách hàng

có thể quản lý thông tin cá nhân, lịch sử mua hàng và nhận thông tinkhuyến mãi

 Cung cấp các phương thức thanh toán đa dạng như thẻ tín dụng, chuyểnkhoản và thanh toán khi nhận hàng

 Cung cấp hệ thống quản lý đơn hàng để quản lý quá trình giao hàng vàgiải quyết các khiếu nại của khách hàng

T r a n g 3 | 48

2.2 Các hệ thống cơ bản:

 Hệ thống quản lý sản phẩm: Đây là hệ thống giúp quản lý thông tin về sảnphẩm, bao gồm tên sản phẩm, mô tả, ảnh sản phẩm, giá cả, kích thước,màu sắc và số lượng sản phẩm có sẵn

 Hệ thống quản lý đơn hàng: Đây là hệ thống giúp quản lý đơn hàng củakhách hàng, bao gồm thông tin về khách hàng, sản phẩm được đặt mua, sốlượng, giá cả và trạng thái đơn hàng (đã thanh toán, đang chờ xử lý, đangvận chuyển, đã giao hàng)

 Hệ thống thanh toán trực tuyến: Đây là hệ thống giúp khách hàng thanhtoán cho đơn hàng bằng các phương thức thanh toán trực tuyến như thẻtín dụng, ví điện tử hoặc chuyển khoản ngân hàng

 Hệ thống quản lý tài khoản: Đây là hệ thống giúp quản lý thông tin củakhách hàng, bao gồm thông tin cá nhân, địa chỉ, lịch sử mua hàng, đơnhàng đang chờ xử lý và trạng thái đơn hàng đã mua

T r a n g 4 | 48

Chương II :Phân Tích và thiết kế hệ thống

website

1 Phân tích nhu cầu của khách hàng về hệ thống

Sản phẩm: Khách hàng mong muốn trang web cung cấp đầy đủ các loại giày, từ

giày thể thao, giày lười, giày công sở, đến giày chạy bộ, giày đi phượt, giày thời

trang, với nhiều mẫu mã, kiểu dáng và kích cỡ khác nhau

Tìm kiếm,thanh toán sản phẩm: Khách hàng mong muốn có một hệ thống tìm

kiếm sản phẩm nhanh chóng, dễ dàng và chính xác Hệ thống tìm kiếm nên có

khả năng lọc sản phẩm theo màu sắc, kích cỡ, giá cả, thương hiệu, giúp khách

hàng tìm kiếm sản phẩm một cách dễ dàng và thuận tiện.Giao diễn thanh toán

không cầu kì , dễ thao tác ,nhiều phương pháp thanh toán cho người dung lựa

chọn

2 Thiết kế cơ sở dữ liệu

2.1 Mô hình liên kết thực thể(E – R)

T r a n g 8 | 28

Hinh1 1 Mô hình liên kết thực thể(E – R)

T r a n g 9 | 28

2.2 Mô hình quan hệ

Hinh1 2 :Mô hình quan hệ

T r a n g 10 | 28

3 Công cụ hổ trợ

3.1 Xampp:

XAMPP là một gói phần mềm mã nguồn mở miễn phí, giúp tạo môi trường pháttriển và triển khai các ứng dụng web trên máy tính cá nhân của người dùng Cácthành phần chính của XAMPP bao gồm hệ thống quản lý cơ sở dữ liệu MySQL,máy chủ web Apache, trình thông dịch PHP và Perl, và một số công cụ hữu íchkhác như phpMyAdmin, OpenSSL, và FileZilla FTP Server

Các ứng dụng web được xây dựng bằng các ngôn ngữ như PHP, Perl, Ruby,Python, có thể được phát triển trên XAMPP và chạy trên môi trường localhosttrên máy tính của người dùng Điều này giúp cho nhà phát triển có thể dễ dàngphát triển và kiểm thử các ứng dụng web trước khi triển khai chúng lên môitrường web thực tế

XAMPP cũng cung cấp cho người dùng một giao diện đơn giản và thân thiện đểquản lý cơ sở dữ liệu MySQL và quản lý các tệp tin trong thư mục htdocs Điềunày giúp cho việc phát triển và quản lý các ứng dụng web trở nên dễ dàng hơncho người dùng

Với XAMPP, người dùng không cần phải cài đặt các thành phần của một môitrường phát triển web một cách riêng lẻ trên máy tính của mình, mà thay vào đó

có thể sử dụng một gói phần mềm đầy đủ tính năng như XAMPP để tiết kiệmthời gian và công sức trong quá trình phát triển và triển khai các ứng dụng web

3.2 Visual Studio Code:

Visual Studio Code (viết tắt là VS Code) là một trình biên tập mã nguồn mở,miễn phí và được phát triển bởi Microsoft VS Code được thiết kế để hỗ trợ pháttriển ứng dụng web, nhưng cũng có thể được sử dụng để phát triển các ứng dụngkhác như ứng dụng di động và máy tính để bàn

VS Code được tích hợp với một loạt các tính năng hữu ích như:

Hỗ trợ đa ngôn ngữ lập trình như C++, C#, Java, JavaScript, PHP, Python,Ruby, HTML, CSS, v.v

Hỗ trợ tạo và quản lý các dự án và tệp mã nguồn

Hỗ trợ tính năng debugging và testing, giúp phát hiện và khắc phục các lỗi trong

mã nguồn

Hỗ trợ tính năng linter giúp kiểm tra cú pháp và định dạng mã nguồn

Có thể sử dụng các extension của cộng đồng người dùng để mở rộng chức năngcủa trình biên tập

VS Code cũng có giao diện thân thiện và dễ sử dụng, với một loạt các phím tắt

để giúp tăng tốc độ lập trình Ngoài ra, VS Code cũng được tích hợp với Git,

T r a n g 11 | 28

cho phép người dùng quản lý phiên bản và thực hiện các thao tác với kho lưu trữcủa Git từ giao diện của trình biên tập.

Tổng quan lại, VS Code là một trình biên tập mã nguồn mở miễn phí với nhiềutính năng hữu ích và được cộng đồng người dùng hỗ trợ mở rộng chức năngthông qua các extension

4 Ngôn ngữ lập trình

4.1HTML(HyperText Markup Language):

- Khái niệm: HTML là ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo nội

dung trên trang web HTML cho phép người dùng định nghĩa và tổ chức cácphần tử trên trang web, bao gồm văn bản, hình ảnh, âm thanh, video, các liênkết, các biểu mẫu nhập liệu và các thành phần khác

- Ưu điểm của HTML:

+ Dễ học: HTML là một ngôn ngữ đơn giản và dễ hiểu, vì vậy người mới bắt

đầu có thể dễ dàng học và sử dụng nó Nó cung cấp cho người dùng các thẻ vàthuộc tính để định dạng và hiển thị các phần tử trên trang web, từ đó giúp tối ưuhóa trải nghiệm người dùng trên nền tảng web

+ Độc lập nền tảng: HTML hoạt động trên nhiều nền tảng và trình duyệt khác

nhau, giúp cho các trang web được phát triển có thể hiển thị đồng nhất trên cácthiết bị và trình duyệt khác nhau

+ Linh hoạt: HTML cho phép người dùng tạo ra các trang web đa dạng và linh

hoạt với các thành phần khác nhau như hình ảnh, video, âm thanh, văn bản, biểumẫu và các thành phần khác

- Nhược điểm của HTML:

+ Giới hạn chức năng: HTML chỉ có thể tạo ra các trang web tĩnh, tức là không

có tính năng động hoặc tương tác với người dùng Tuy nhiên, với sự kết hợp củacác ngôn ngữ lập trình phía client và server, các trang web có tính năng động vàtương tác có thể được tạo ra bằng sử dụng HTML

+ Khó khăn trong việc tạo các giao diện đẹp mắt: HTML không thể đem lại cáchiệu ứng tuyệt đẹp như CSS và JavaScript, điều này dẫn đến khó khăn trongviệc thiết kế các giao diện web đẹp mắt và tương tác hấp dẫn Bởi vì HTML chỉ

là một ngôn ngữ đánh dấu để định dạng và hiển thị nội dung, và nó không cungcấp các tính năng tương tác phức tạp Tuy nhiên, HTML vẫn rất quan trọngtrong việc tạo ra các trang web tĩnh và đơn giản, và nó là một bước đầu tiên cầnthiết cho việc học các ngôn ngữ lập trình web khác như CSS và JavaScript.+ Khả năng bảo mật hạn chế: Mặc dù HTML là một ngôn ngữ phổ biến cho thiết

kế web, tuy nhiên nó không cung cấp các tính năng bảo mật tương đương vớicác ngôn ngữ lập trình khác Vì vậy, nếu không được áp dụng các biện pháp bảo

T r a n g 12 | 28