ĐỀ tài xây DỰNG WEBSITE bán QUẦN áo (2)

Dự án này chủ yếu được chia thành hai loại chính: Quản trị viên và khách hàng / người dùng.. Người dùng chỉ có thể duyệt qua cửa hàng trực tuyến và thêm sản phẩm vào giỏ hàng.. Quản lý c

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

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

KHOA KHOA HỌC MÁY TÍNH

ĐỒ ÁN

ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG WEBSITE BÁN QUẦN ÁO

Sinh viên thực hiện : CHANTHAMIXAY PALA

Mã SV : 191C900051

Giảng viên hướng dẫn : TS Nguyễn Đức Hiển

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

PHẦN MỞ ĐẦU

Thương mại điện tử (thương mại điện tử hoặc EC) là việc mua và bán hàng hóa và dịch

vụ, hoặc truyền tiền hoặc dữ liệu, qua một mạng điện tử, ưu việt của internet Các giao dịch kinh doanh này xảy ra dưới dạng doanh nghiệp với doanh nghiệp, doanh nghiệp với người tiêu dùng, người tiêu dùng với người tiêu dùng hoặc người tiêu dùng với doanh nghiệp

Các cửa hàng thương mại điện tử đã trở thành một phần của cuộc sống hàng ngày của chúng ta Tiến bộ công nghệ đã giúp mọi người có thể ngồi ở nhà thuận tiện và vẫn mua sắm trực tuyến mà không cần đến một cửa hàng thực tế Vì vậy dự án này nhằm thiết kế một website bán hàng trực tuyến dành cho mọi người có thể mua hàng trực tuyến

Dự án này chủ yếu được chia thành hai loại chính: Quản trị viên và khách hàng / người dùng

Quản lý cửa hàng và các nhân viên hoạt động với tư cách là quản trị viên Quản trị viên

có thể thêm, chỉnh sửa, cập nhật sản phẩm hoặc xóa sản phẩm để họ có thể thay đổi tên của sản phẩm, thay đổi giá và thêm hoặc bớt sản phẩm Khách hàng có thể tìm kiếm lựa chọn sản phẩm, cập nhật giỏ hàng, xóa sản phẩm khỏi giỏ hàng và kiểm tra từ cửa hàng Khách hàng cũng có thể cập nhật thông tin của mình như tên, địa chỉ và các dữ liệu khác Người dùng chỉ có thể duyệt qua cửa hàng trực tuyến và thêm sản phẩm vào giỏ hàng Người dùng là giới hạn cho việc sử dụng của cửa hàng Luận án này bao gồm bốn chương

để giải thích dự án Chương đầu tiên giới thiệu dự án; chương thứ hai xác định các công

cụ và công nghệ được sử dụng cho dự án, và chương thứ ba mô tả ứng dụng, kết quả đạt được Chương thứ tư mô tả kết luận của toàn bộ dự án và thể hiện sự cải thiện có thể có trong tương lai đối với cửa hàng

XÂY DỰNG WEBSITE BÁN QUẦN ÁO 1

LỜI CẢM ƠN

Trong quá trình học tập cho đến giờ em làm đồ án tốt nghiệp em luôn được sự quan tâm, hưỡng dẫn và giúp đỡ tận tình của các thầy, cô giáo cùng với sự động viên giúp đỡ của bạn bè cùng lớp

Đầu tiên em xin được bày tỏ lòng biết ơn sâu sắc đến Ban giám hiệu Trường Đại Học Công Nghệ Thông Tin và Truyền Thông Việt-Hàn, Ban chủ nghiệm khoa Khoa Học Máy Tính đã tận tính giúp đỡ cho em suốt thời gian học tại trường

Đặc biệt em xin bày tỏ lòng biết ơn chân thành sâu sắc tới thầy giáo Ths.Nguyễn Đức

Hiển đã trực tiếp giúp đỡ, hưỡng dẫn cho em hoàn thành khóa luận này

Nhận dịp này em xin bày tỏ lòng biết ơn sâu sắc đến gia đình, người thân, bạn bè và đồng nghiệp đã giúp đỡ động viên em hoàn thành khóa luận tốt nghiệp này

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

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

CHANTHAMIXAY PALA

MỤC LỤC

PHẦN MỞ ĐẦU 1

LỜI CẢM ƠN 1

CHƯƠNG I GIỚI THIỆU 1

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

II Công nghệ và các ngôn ngữ sử dụng 1

1 Visual Studio Code 1

2 HTML 1

3 PHP 2

4 CSS 3

5 JAVASCRIPT 5

6 MySQL 5

7 UML 6

8 XAMPP 6

9 Phpmyadmin 6

III MVC 7

CHƯƠNG II PHẦN TÍCH VÀ THIẾT KẾ HỆ THỐNG 8

I Phần tích và thiết kế hệ thống 8

1 Xác định tác nhân 8

2 Xác định các trường hợp sử dụng Use case 8

3 Biểu đồ Use case 9

3.1 Biểu đồ use case của Admin 10

3.2 Biểu đồ User đăng ký 10

3.3 Khách hàng đăng nhập 11

3.4 Admin đăng ký 12

3.5 Admin đăng nhập 13

4 Mô hình MVC của giỏ hàng 14

5 Biểu đồ lớp (Class diagram) 15

6 Cơ sở dữ liệu (Database) 16

CHƯƠNG III KẾT QUẢ ĐẠT ĐƯỢC 21

I Ý tưởng thiết kế giao diện 21

1 Bộ cục giao diện khách hàng 21

2 Trang sản phẩm (Products) 22

3 Giỏ hàng 22

XÂY DỰNG WEBSITE BÁN QUÀN ÁO

4 Trang liên hệ (Contact) 23

5 Trang đăng ký- đăng nhập 24

6 Trang Admin 25

CHƯƠNG IV KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 27

I KẾT LUẬN 27

II HƯỚNG PHÁT TRIỂN 27

TÀI LIỆU THAM KHẢO 28

DANH MỤC CÁC BẢNG

Bảng1: Bảng sản phẩm 17

Bảng2: Bảng loại sản phẩm 17

Bang3: Bảng danh mục 18

Bảng4: bảng Khuyên mãi 18

Bảng5: Bảng hóa đơn 19

Bảng6: Bảng chi tiết hóa đơn 19

Bảng7: Bảng người dùng 20

Bang8: Bảng banner 20

Bảng9: Bảng size 20

Bảng10: Bảng phân quyền 20

XÂY DỰNG WEBSITE BÁN QUẦN ÁO 1

DANH MỤC HÌNH ẢNH

Hình1: Trình bày các máy chủ web hoạt động bằng PHP 3

Hình2: Cấu trúc cơ bản của CSS 4

Hình3: CSS code style 5

Hình4: Sơ đồ thể hiện khái niệm về MySQL 6

Hình5: Biểu đồ use case của website 9

Hình6: Biểu đồ của Admin 10

Hình7: Biểu đồ thể hiện luồng đăng ký của Người dùng 11

Hình8 : Chức năng đăng nhập của khách hàng 12

Hình9: Biểu đồ Admin đăng ký 13

Hình10: Biểu đồ Admin đăng nhập 14

Hình11: Sơ đồ MVC của cửa hàng trực tuyến 14

Hình12: Biểu đổ lớp 15

Hình13: Bảng cơ sở dữ liệu 16

Hình14: Giao diện trang chủ 21

Hình15: Trang sản phẩm 22

Hình16: Giỏ hàng 23

Hình17: Trang liên hệ 24

Hình18:Trang đăng ký-đăng nhập 24

Hình19: Trang quản lý sản phẩm 25

Hình20: Trang quản lý banner 26

DANH MỤC CHỮ VIẾT TẮT

Chữ viết tắt Ý nghĩa

VS Code Visual studio code

RDBMS Relationship Database Management System

Decent_id Decentralization identity

XÂY DỰNG WEBSITE BÁN QUẦN ÁO 1

CHƯƠNG I GIỚI THIỆU

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

Các cửa hàng thương mại điện tử đã trở thành một phần của cuộc sống hàng ngày của chúng ta Tiến bộ công nghệ đã giúp mọi người có thể ngồi ở nhà thuận tiện và vẫn mua sắm trực tuyến mà không cần đến một cửa hàng thực tế Vì vậy dự án này nhằm thiết kế

một website bán hàng trực tuyến để dành cho mọi người có thể mua hàng trực tuyến

Dự án này chủ yếu được chia thành hai loại chính: Quản trị viên và khách hàng / người

dùng

Quản lý cửa hàng và các nhân viên hoạt động với tư cách là quản trị viên, có thể thêm, chỉnh sửa, cập nhật sản phẩm hoặc xóa sản phẩm, có thể thay đổi tên của sản phẩm, thay đổi giá và thêm hoặc bớt sản phẩm Khách hàng có thể tìm kiếm lựa chọn sản phẩm, cập nhật giỏ hàng, xóa sản phẩm khỏi giỏ hàng và kiểm tra từ cửa hàng Khách hàng cũng có thể cập nhật thông tin của mình như tên, địa chỉ và các dữ liệu khác Người dùng chỉ có thể duyệt qua cửa hàng trực tuyến và thêm sản phẩm vào giỏ hàng Người dùng là giới

hạn cho việc sử dụng của cửa hàng

II Công nghệ và các ngôn ngữ sử dụng

1 Visual Studio Code

Visual Studio Code (VS Code hay VSC) là một trong những trình soạn thảo mã nguồn phổ biến nhất được sử dụng bởi các lập trình viên Nhanh, nhẹ, hỗ trợ đa nền tảng, nhiều tính năng và là mã nguồn mở chính là những ưu điểm vượt trội khiến VS Code ngày càng được ứng dụng rộng rãi

Các bạn có thể download theo link: https://code.visualstudio.com/

2 HTML

HTML là chữ viết tắt của Hypertext Markup Language Nó giúp người dùng tạo

và cấu trúc cá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, vv

HTML không phải là ngôn ngữ lập trình, đồng nghĩa với việc nó không thể tạo 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

Tổng quan, HTML là ngôn ngữ markup, nó rất trực tiếp dễ hiểu, dễ học, và tất cả mọi người mới đều có thể bắt đầu học nó để xây dựng website

Một Website thường chứa nhiều trang con và mỗi trang con này lại có một tập tin HTML riêng Lưu ý, HTML không phải là ngôn ngữ lập trình Điều này có nghĩa là nó không thể thực hiện các chức năng “động” Hiểu một cách đơn giản hơn, cũng tương tự như phần mềm Microsoft Word, HTML chỉ có tác dụng bố cục và định dạng trang web

HTML khi kết hợp với CSS và JavaScript sẽ trở thành một nền tảng vững chắc cho

<h1>The Main Heading</h1>

<h2>A catchy subheading</h2>

<p>First paragraph</p>

</body>

</html>

3 PHP

PHP (Hypertext Preprocessor), là một ngôn ngữ lập trình kịch bản hay một loại mã

lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát Nó rất thích hợp với web và có thể dễ dàng nhúng vào trang HTML Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các

XÂY DỰNG WEBSITE BÁN QUÀN ÁO

ngôn ngữ khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phổ biến nhất thế giới

Hình1: Trình bày các máy chủ web hoạt động bằng PHP

4 CSS

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm

và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML) Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc…

Các cấu trúc cơ bản của CSS

Hình2: Cấu trúc cơ bản của CSS

XÂY DỰNG WEBSITE BÁN QUÀN ÁO

Hình3: CSS code style

5 JAVASCRIPT

JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình thông dịch được phát triển từ các ý niệm nguyên mẫu Ngôn ngữ này được dùng rộng rãi cho các trang web (phía người dùng) cũng như phía máy chủ (với Nodejs) 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 Giống Java, JavaScript có cú

pháp tương tự C, nhưng nó gần với Self hơn Java .js là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript

server RDBMS là một phần mềm hay dịch vụ dùng để tạo và quản lý các cơ sở dữ

liệu (Database) theo hình thức quản lý các mối liên hệ giữa chúng

Hình4: Sơ đồ thể hiện khái niệm về MySQL

hoặc khởi động lại các dịch vụ máy chủ bất kỳ lúc nào

9 Phpmyadmin

phpMyAdmin là một công cụ nguồn mở miễn phí được viết bằng ngôn ngữ lập

trình PHP để xử lý các tác vụ quản trị của MySQL thông qua một trình duyệt web Nó có thể thực hiện nhiều tác vụ như tạo, sửa đổi hoặc xóa bỏ cơ sở dữ liệu, bảng, các trường hoặc bản ghi; thực hiện theo báo cáo SQL; hoặc quản lý người dùng và cấp phép

XÂY DỰNG WEBSITE BÁN QUÀN ÁO

III MVC

MVC (Model View Controller) Nó đại diện cho các nhà phát triển kiến trúc áp dụng khi

xây dựng các ứng dụng Với kiến trúc MVC, chúng ta xem xét cấu trúc ứng dụng liên quan

đến cách luồng dữ liệu của ứng dụng của chúng ta hoạt động như thế nào Là mô hình

phân bố source code thành 3 phần, mỗi thành phần có một nhiệm vụ riêng biệt và độc lập với các thành phần khác

CHƯƠNG II PHẦN TÍCH VÀ THIẾT KẾ HỆ THỐNG

I Phần tích và thiết kế hệ thống

1 Xác định tác nhân

• Người quản trị: Quản lý các hoạt động của website, cập nhật thông tin, thêm, sửa, xóa khách hàng

• Người dùng: Người truy cập website, xem, tìm kiếm

2 Xác định các trường hợp sử dụng Use case

❖ Người quản trị (Admin)

XÂY DỰNG WEBSITE BÁN QUÀN ÁO

▪ Thanh toán

▪ Đăng xuất

3 Biểu đồ Use case

Hình5: Biểu đồ use case của website

3.1 Biểu đồ use case của Admin

Hình6: Biểu đồ của Admin

3.2 Biểu đồ User đăng ký

Người dùng sẽ sử dụng thông tin độc quyền của người dùng để đăng ký Sau khi điền và gửi biểu mẫu, html sẽ kiểm tra xem tất cả các trường do người dùng nhập có đúng hay không Nếu khu vực không được điền chính xác, người dùng vẫn ở trên cùng một trang nhưng nếu các yêu cầu được đáp ứng, dữ liệu sẽ chuyển đến cơ sở dữ liệu (bảng "khách hàng") và lưu thông tin của Người dùng Người dùng sau đó trở thành khách hàng và sau

đó được chuyển hướng đến trang web đăng nhập của cửa hàng

XÂY DỰNG WEBSITE BÁN QUÀN ÁO

Hình7: Biểu đồ thể hiện luồng đăng ký của Người dùng

3.3 Khách hàng đăng nhập

Khách hàng sẽ sử dụng e-mail và mật khẩu dữ liệu cụ thể của mình để đăng nhập vào cửa hàng Sau khi gửi biểu mẫu, html sẽ kiểm tra xem tất cả các trường đã được điền chính xác chưa Nếu điều kiện không được đáp ứng, khách hàng vẫn ở trên trang đó nhưng nếu các trường được điền chính xác, thông tin đăng nhập của khách hàng sẽ được gửi đến cơ

sở dữ liệu để kiểm tra xem dữ liệu nhập vào các khu vực có giống với dữ liệu được sử dụng để đăng ký vào cơ sở dữ liệu hay không Nếu đúng, khách hàng được chuyển hướng đến trang chủ của mình và có thể chọn thành công sản phẩm và thanh toán nếu họ đã mua sắm xong

dữ liệu trong "Admin" trong cơ sở dữ liệu Sau đó, quản trị viên được dẫn đến trang

web quản trị để đăng nhập

XÂY DỰNG WEBSITE BÁN QUÀN ÁO

Hình9: Biểu đồ Admin đăng ký

3.5 Admin đăng nhập

Khi quản trị viên đăng nhập vào trang web Quản trị viên, html sẽ kiểm tra xem

có đáp ứng các điều kiện khi đăng nhập hay không Nếu tất cả thông tin được cung cấp là chính xác, dữ liệu sẽ được gửi đến cơ sở dữ liệu để kiểm tra xem dữ liệu có tương ứng với thông tin được sử dụng để đăng ký hay không Nếu nó đúng với thông tin do Quản trị viên cung cấp, một trang sẽ mở ra và quản trị viên có thể có quyền truy cập vào trang web của quản trị viên nếu không quản trị viên bị hạn chế quyền truy cập vào trang web quản lý

Hình10: Biểu đồ Admin đăng nhập

4 Mô hình MVC của giỏ hàng

Hình11: Sơ đồ MVC của cửa hàng trực tuyến

Các cấu trúc phần mềm MVC được thực hiện như sau:

XÂY DỰNG WEBSITE BÁN QUÀN ÁO

View: Hiển thị giao diện mà người dùng nhìn thấy (thường là một trang web)

Các phụ gia chế độ xem cung cấp các bản ghi cho người dùng và chuyển đến

Bộ điều khiển để thao tác với dữ liệu

Model: Xác định số liệu thống kê cho phần mềm (thông thường, dữ kiện được

lưu trong cơ sở dữ liệu (DB))

Controller: Cung cấp giao diện giữa Chế độ View và Model

5 Biểu đồ lớp (Class diagram)

Hình12: Biểu đổ lớp

6 Cơ sở dữ liệu (Database)

Hình13: Bảng cơ sở dữ liệu

XÂY DỰNG WEBSITE BÁN QUÀN ÁO

+ product (Sản phẩm)

Field Name Type Size Description

Product_id int 11 Mã sản phẩm có thể là tham số hoặc ký tự Product_type_id int 11 Mã loại sản phẩm

Category_id int 11 Mã danh mục

Product_name varchar 70 Tên sản phẩm

Image1 varchar 200 Hình ảnh 1

Image2 varchar 255 Hình ảnh 2

Image3 varchar 255 Hình ảnh 3

Promotion_id int 11 Mã khuyên mãi

Date_time datetime Ngày

Bảng1: Bảng sản phẩm

+producttype (Loại sản phẩm)

Field Name Type Size Description

Product_type_id int 11 Mã loại sản phẩm

Product_type_name varchar 70 Tên loại sản phẩm

Image varchar 200 Hình ảnh

Bảng2: Bảng loại sản phẩm

+category (Danh mục)

Field Name Type Size Description

Category_id int 11 Mã danh mục

Category_name varchar 255 Tên danh mục

Bang3: Bảng danh mục

+promotion (Khuyên mãi)

Field Name Type Size Descript

Bảng4: bảng Khuyên mãi

+receipt (Hóa đơn)

Field Name Type Size Description

XÂY DỰNG WEBSITE BÁN QUÀN ÁO

Payment method varchar 20 Phương thức thanh toán

Bảng5: Bảng hóa đơn

+recieptdetail (Chi tiết hóa đơn)

Field Name Type Size Description

Bảng6: Bảng chi tiết hóa đơn

+user (Người dùng)

Field Name Type Size Description