web nâng cao xây dựng website thời trang blackpink

Đối tượng nghiên cứu- Thương mại điện tử.- Công cụ xây dựng hệ thống thương mại điện tử: Laravel.- Mô hình thương mại điện tử B2C.‐ Quản lý các giao dịch, gói hàng, hóa đơn, sản phẩm trê

TRƯỜNG ĐẠI HỌC TÂY NGUYÊN

KHOA KHOA HỌC TỰ NHIÊN VÀ CÔNG NGHỆ

WEB NÂNG CAO

XÂY DỰNG WEBSITE THỜI TRANG BLACKPINK

Sinh viên : Hoàng Đoàn Quốc Huy – 20103119

Thái Anh Tuấn – 20103062 Chuyên ngành : Công nghệ thông tin

Khóa học : 2022 – 2023

Đắk Lắk, tháng 12 năm 2022

TRƯỜNG ĐẠI HỌC TÂY NGUYÊN

KHOA KHOA HỌC TỰ NHIÊN VÀ CÔNG NGHỆ

WEB NÂNG CAO

XÂY DỰNG WEBSITE THỜI TRANG BLACKPINK

Sinh viên: Hoàng Đoàn Quốc Huy – 20103119

Thái Anh Tuấn – 20103062

Chuyên ngành: Công nghệ thông tin

Người hướng dẫn

ThS Nguyễn Thị Như

LỜI CẢM ƠN

Trong thời gian học tập tại trường Đại học Tây Nguyên em đã được quý thầy

cô giảng dạy tận tình, truyền đạt nhiều kiến thức bổ ích để giúp em có được vốn trithức cần thiết giúp ích cho em sau này Em xin chân thành cảm ơn quý thầy cô giáotrong Ban giám hiệu Nhà trường, Khoa Khoa học Tự nhiên và Công nghệ, chuyênngành Công nghệ thông tin đã tạo điều kiện thuận lợi để em được học tập và thamgia thực hiện đề tài khóa luận này

Trong quá trình nghiên cứu và thực hiện đề tài, em xin chân thành cám ơn côThS Nguyễn Thị Như là người luôn đồng hành, giúp đỡ, nhiệt tình hướng dẫn để

em hoàn thành đề tài khóa luận được tốt đẹp

Em cũng không quên gửi lời cám ơn đến gia đình, người thân, bạn bè đã vàđang yêu thương, chia sẻ và động viên trong suốt thời gian học tập và thực hiện đềtài

Mặc dù đã nỗ lực hoàn thành báo cáo khóa luận nhưng em vẫn không tránhkhỏi những thiếu sót kính mong nhận được sự góp ý của quý thầy cô và các bạn

Em xin chân thành cám ơn!

Đắk Lắk, tháng 12 năm 2022

SINH VIÊN

Hoàng Đoàn Quốc Huy Thái Anh Tuấn

MỤC LỤC LỜI CẢM ƠN I MỤC LỤC II

ĐẶT VẤN ĐỀ 1

1 Tính cấp thiết 1

2 Mục tiêu nghiên cứu 1

NỘI DUNG VÀ PHƯƠNG PHÁP NGHIÊN CỨU 4

1 Đối tượng nghiên cứu 2

2 Phạm vi nghiên cứu 2

3 Nội dung nghiên cứu 2

4 Phương pháp nghiên cứu 2

CHƯƠNG 1 TỔNG QUAN 4

1.1 Tổng quan tình hình nghiên cứu 4

1.2 Tổng quan về Bootstrap và Jquery 4

1.3 Tổng quan về Laravel Framework 5

CHƯƠNG 2 PHÂN TÍCH YÊU CẦU BÀI TOÁN 6

2.1 Mô tả hệ thống thực tế 6

2.2 Yêu cầu hệ thống thông tin 6

2.3 Công nghệ xây dựng 7

CHƯƠNG 3 THIẾT KẾ HỆ THỐNG 8

3.1 Sơ đồ ngữ cảnh 8

3.2 Sơ đồ phân rã chức năng 8

3.3 Sơ đồ DFD 8

CHƯƠNG 4 XÂY DỰNG PHẦN MỀM 14

4.1 Tổng quan về xây dựng phần mềm 14

4.2 Xây dựng website sử dụng Laravel Framework 14

KẾT QUẢ VÀ THẢO LUẬN 18

1 Kết quả 18

2 Thảo luận 19

KẾT LUẬN VÀ ĐỀ NGHỊ 20

1 Kết luận 20

2 Đề nghị 20

TÀI LIỆU THAM KHẢO 21

ĐẶT VẤN ĐỀ

1 Tính cấp thiết

Như chúng ta cũng thấy trong thị trường hiện nay thì việc cạnh tranh về kinhdoanh ngày càng trở nên quyết liệt và hầu hết những nhà kinh doanh, những công tylớn đều rất chú tâm đến việc làm thỏa mãn khách hàng một cách tốt nhất

So với kinh doanh truyền thống thì thương mại điện tử chi phí thấp hơn, hiệuquả đạt cao hơn Hơn thế nữa, với lợi thế của công nghệ Internet nên việc truyền tảithông tin về sản phẩm nhanh chóng, thuận tiện Kết hợp với bộ phận giao hàng tậnnơi là thông qua bưu điện và ngân hàng để thanh toán tiền, càng tăng thêm thuận lợi

để loại hình này phát triển

Do đó với sự ra đời các website bán hàng qua mạng, mọi người có thể muamọi thứ hàng hóa mọi lúc mọi nơi mà không cần phải tới tận nơi để mua

Trước thực tế đó tụi em đã chọn đề tài: “Website thời trang BlackPink”.

2 Mục tiêu nghiên cứu

‐ Xây dựng trang thương mại điện tử thời trang

‐ Ứng dụng mô hình phát triển web theo hướng frontend và backend vào xâydựng website thương mại điện tử

NỘI DUNG VÀ PHƯƠNG PHÁP NGHIÊN CỨU

1 Đối tượng nghiên cứu

- Thương mại điện tử

- Công cụ xây dựng hệ thống thương mại điện tử: Laravel

- Mô hình thương mại điện tử B2C

Thêm sản phẩm vào giỏ hàng

Thanh toán sản phẩm đơn lẻ

‐ Quản lý các giao dịch, gói hàng, hóa đơn, sản phẩm trên hệ thống

3 Nội dung nghiên cứu

Chương 1: Tổng quan về công nghệ được sử dụng để xây dựng trang web.Chương 2: Phân tích yêu cầu thuật toán, nhằm đưa ra các yêu cầu cần thiết chotrang web

Chương 3: Thiết kế hệ thống, bao gồm các sơ đồ, cơ sở dữ liệu và các mốiquan hệ giữa các bảng biểu

Chương 4: Xây dựng phần mềm

4 Phương pháp nghiên cứu

- Phương pháp nghiên cứu tài liệu:

+ Nghiên cứu cách xây dựng các chức năng trên website bằng Bootstrap vàJquery

+ Nghiên cứu tài liệu thiết kế website trên Bootstrap và Jquery

+ Nghiên cứu cách xử lý các chức năng ở phía backend thông quaFramework Laravel

+ Nghiên cứu tài liệu về cách xây dựng giao diện các website bán hàng

- Phương pháp thực nghiệm:

+ Xây dựng giao diện website đa thiết bị

+ Kiểm thử phần mềm quản lý với các tài khoản được thiết lập các quyền:Admin, User.

CHƯƠNG 1 TỔNG QUAN 1.1 Tổng quan tình hình nghiên cứu

1.1.1 Tổng quan tình hình nghiên cứu trong nước

Thị trường thương mại điện tử ở Việt Nam đang ở trong giai đoạn phát triểnnhanh Không chỉ tăng trưởng nhanh về quy mô, thương mại điện tử phát triển đadạng trên nhiều mặt Thương mại điện tử cung cấp các hình thức bán hàng rất đadạng, bao gồm một, một số hoặc tất cả các hoạt động thương mại(Từ quảng cáo, tìmkiếm khách hàng, chăm sóc khách hàng đến giao dịch, thanh toán, giải quyết tranhchấp…)

1.1.2 Tổng quan tình hình nghiên cứu nước ngoài

Trên thế giới các trang thương mại điện tử từ lâu đã không còn xa lạ, có thể kểđến các sàn thương mại điện tử lớn như: Lazada, tiki, amazon… Những sàn thươngmại điện tử này rất phổ biến nhờ vào các chiến lượt kinh doanh hiệu quả như tổchức các event vào đặc biệt, săn sale, săn mã giảm giá…

1.2 Tổng quan về Bootstrap

Bootstrap là một framework HTML, CSS, và Javascript cho phép người dùng

dễ dàng thiết kế website theo một chuẩn nhất định, tạo các website thân thiện vớicác thiết bị cầm tay như mobile, ipad, tablet

Một số tính năng của Bootstrap như:

Cho phép người dùng truy cập vào thư viện: Thư viện của bootstrap rất

đa dạng với nhiều thành phần để người dùng dễ dàng thiết kế, tạo thànhgiao diện website

Cho phép tùy chỉnh framework: Với bootstrap có thể dễ dàng tùy chỉnhframework Sau khi tải framework về có thể tùy chỉnh chỉnh lại khungcủa website đang được xây dựng

Tái sử dụng: Ta có thể lưu trữ và sử dụng các thành phần đã được thiết

kế cho những website tiếp theo

Tích hợp Jquery

Giảm thiểu sử dụng hình ảnh làm biểu tượng, tăng tốc độ tải trang

Ưu điểm của Bootstrap:

Phát triển giao diện nhanh chóng

Tính tương thích với các trình duyệt web

Nền tảng tối ưu

Tương tác tốt với smartphone

Hỗ trợ SEO tốt

Nhược điểm:

Sản phẩm nặng, tốc độ tối ưu chưa cao

Nhiều code thừa

Bootstrap không khuyến khích sảng tạo

1.3 Tổng quan về Laravel Framework

Laravel là PHP Web Framework miễn phí, mã nguồn mở, được tạo bởi TaylorOtwell và dành cho việc phát triển các ứng dụng web theo mô hình kiến trúc môhình MVC và dựa trên Symfony PHP Framework Một số tính năng của Laravelnhư là sử dụng hệ thống đóng gói module, quản lý package (Composer), hỗ trợnhiều hệ quản trị CSDL quan hệ (MySQL, MariaDB, SQLite, PostgreSQL,…), cáctiện ích hỗ trợ triển khai và bảo trì ứng dụng

Laravel là một framework rõ ràng và ưu việt cho việc phát triển web PHP.Giải thoát khỏi mã spaghetti, nó giúp tạo ra những ứng dụng tuyệt vời, sử dụngsyntax đơn giản

Laravel là một framework PHP 5.3 được miêu tả như ‘một framework choweb artisan’ Theo tác giả Taylor Otwell, Laravel mang lại niềm vui cho việc lậptrình bởi nó đơn giản, súc tích và đặc biệt là trình bày hợp lý

Ưu điểm của Laravel Framework:

Sử dụng các tính năng mới nhất của PHP

Tài liệu đa dạng

Tích hợp với dịch vụ mail

Tốc độ xử lý nhanh

Dễ sử dụng

Nhược điểm của Laravel Framework:

Thiếu sự liên kết giữa các phiên bản

Composer không đủ mạnh như Ruby, npm, pip

CHƯƠNG 2 PHÂN TÍCH YÊU CẦU BÀI TOÁN

2.1 Mô tả hệ thống thực tế

Mô hình kinh doanh thương mại điện tử cho phép khách hàng mua các sảnphẩm của họ một cách dễ dàng và tiện lợi Đáp ứng được các nhu cầu của kháchhàng mang lại sự tiện lợi và giúp tiết kiệm chi phí cho khách hàng Hệ thống thực tếgồm có trang cung cấp thông tin sản phẩm cho khách hàng và trang quản lý hệthống dành cho người quản lý Trang cung cấp thông tin cho người dùng sẽ cungcấp danh sách các sản phẩm và chi tiết sản phẩm Trang quản lý cung cấp các thôngtin thống kê về giao dịch và cho phép người quản lý nhập thông tin sản phẩm vào hệthống

2.2 Yêu cầu hệ thống thông tin

Hệ thống chạy trên giao diện web, gồm hai phần frontend và backend.Backend cung cấp các link API thao tác với cơ sở dữ liệu Frontend cung cấp giaodiện người dùng để người dùng tương tác với hệ thống thông qua giao diện ngườidùng và gửi các yêu cầu xử lý đến backend

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

Hệ thống bao gồm các chức năng như sau:

Đối với phía người dùng:

Chức năng hiển thị danh sách sản phẩm

Chức năng hiển thị sản phẩm theo danh mục

Chức năng hiển thị chi tiết sản phẩm

Chức năng thêm sản phẩm vào giỏ hàng

Chức năng đăng nhập và tạo tài khoản người dùng

Chức năng thanh toán sản phẩm

Đối với phía người quản lý:

Chức năng hiển thị thông tin thống kê

Chức năng quản lý sản phẩm

Chức năng quản lý danh mục

Chức năng quản lý người dùng đăng ký

2.2.2 Yêu cầu phi chức năng

Các yêu cầu phi chức năng:

Hệ thống ổn định, đáp ứng được lượng khách hàng truy cập lớn trongcùng một thời điểm

Giao diện trang web giúp người dùng dễ thao tác

Thời gian xử lý các yêu cầu, thao tác của khách hàng nhanh

Bảo mật thông tin của khách hàng

2.2.3 Yêu cầu cơ sở hạ tầng

Các yêu cầu về cơ sở hạ tầng gồm có máy chủ Linux có địa chỉ IP riêng vàđược cấu hình với tên miền Máy chủ cài đặt Apache 2, MySQL 8 và PHP 7.4.1

Jquery: Là thư viện mã nguồn mở của javascript, giúp tăng tốc dộ xử lýcác sự kiện trên trang web

CHƯƠNG 3 THIẾT KẾ HỆ THỐNG 3.1 Sơ đồ Ngữ cảnh

3.2 Sơ đồ phân rã chức năng

3.3 Sơ đồ DFD

3.4 Thiết kế dữ liệu

3.4.1 Từ điển dữ liệu

Bảng “users”

Bảng 3.1 Danh sách các thuộc tính trong bảng users

Bảng “categories”

Bảng 3.2 Danh sách các thuộc tính trong bảng categories

Bảng “products”

Bảng 3.3 Danh sách các thuộc tính trong bảng products

Bảng “orders”

Bảng 3.4 Danh sách các thuộc tính trong bảng orders

Bảng “order_details”

Bảng 3.5 Danh sách các thuộc tính trong bảng order_details

3.5 Thiết kế giao diện và xử lý

3.5.1 Thiết kế giao diện trang chủ

Thiết kế giao diện trang chủ gồm:

Menu: hiển thị tất cả danh mục sản phẩm, khi người dùng nhấn vào sẽ hiển thịtoàn bộ danh mục sản phẩm, khi người dùng nhấn vào từng danh mục sẽ chuyểnđến trang danh mục sản phẩm tương ứng

Thanh tìm kiếm sản phẩm: cho phép người dùng tìm kiếm sản phẩm theo từkhóa Khi người dùng nhập từ khóa tìm kiếm, sẽ hiển thị danh sách sản phẩm ở bêndưới Khi nhấn vào một sản phẩm trong danh sách sẽ chuyển qua trang chi tiết sảnphẩm

Giỏ hàng: hiển thị sản phẩm được thêm vào giỏ hàng, khi người dùng nhấnvào sẽ hiển thị danh sách sản phẩm trong giỏ hàng.

Slide banner: hiển thị hình ảnh các gói sản phẩm, các sản phẩm mới, cácchương trình khuyến mãi

Hình 3.1 Thiết kế giao diện trang chủ

3.5.2 Thiết kế chức năng khôi phục lại mật khẩu cho người dùng

‐ Thiết kế giao diện khi người dùng quên mật khẩu:

Hình 3.2 Thiết kế giao diện quên mật khẩu

‐ Thiết kế xử lý người dùng quên mật khẩu:

Hình 3.3 Sơ đồ xử lý cấp lại mật khẩu cho người dùng

Mô tả: Khi người dùng yêu cầu cấp lại mật khẩu đăng nhập sẽ gửi một

mã xác nhận tới email, người dùng sẽ được cấp lại mật khẩu khi mởliên kết chứa token đặt lại mật khẩu

Đầu vào: Email của người dùng và mật khẩu mới khi người dùng mởemail và nhập mật khẩu vào thành công

Xử lý: Khi người dùng nhấn vào nút quên mật khẩu, hệ thống yêu cầunhập email đã đăng ký và gửi liên kết để đặt lại mật khẩu Khi ngườidùng nhấn vào liên kết trong email sẽ được chuyển đến trang nhập mậtkhẩu mới, người dùng nhập mật khẩu và nhập lại mật khẩu một lần nữasau đó hệ thống sẽ cập nhật mật khẩu mới cho người dùng

Đầu ra: Thông báo cấp lại mật khẩu mới thành công

CHƯƠNG 4 XÂY DỰNG PHẦN MỀM

4.1 Tổng quan về xây dựng phần mềm

Hình 4.4 Sơ đồ thiết kế hệ thốngFrontend: Cung cấp giao diện người dùng để khách hàng và người quản lýthao tác với hệ thống, các thao tác này thông qua API sẽ được gửi tới Backend.Rest API: Nhận các yêu cầu từ Frontend gửi đến, thông qua các phương thứcGET, POST, PUT, DELETE và URL của API sẽ chuyển đến hàm xử lý tương ứngcủa Backend

Backend: Nhận các yêu cầu xử lý từ API, thực hiện các thao tác tính toán, lưutrữ hình ảnh, cập nhật thông tin vào cơ sở dữ liệu

Database: Là nơi lưu trữ dữ liệu của hệ thống, bao gồm dữ liệu của hệ thống

và các dữ liệu của người dùng

4.2 Xây dựng website sử dụng Laravel Framework

Trong hệ thống này Laravel được sử dụng để xây dựng chức năng như sau:

‐ Quản lý đơn hàng: Chức năng tạo mới đơn hàng sử dụng foreach để duyệtqua toàn bộ sản phẩm trong giỏ hàng, khởi tạo class OrderDetail để lưuthông tin từng sản phẩm và khởi tạo class Order để lưu thông tin đơn hàng.Chức năng hiển thị danh sách đơn hàng sử dụng phương thức find của class

Order kết hợp với OrderDetail để lấy được danh sách đơn hàng và sảnphẩm

‐ Quản lý sản phẩm: Sử dụng biến $request để lấy thông tin sản phẩm và sử

dụng phương thức $request->storage để lưu hình ảnh sản phẩm, khởi tạo

class Product để tạo mới sản phẩm Để xây dựng chức năng thêm, xóa, sửasản phẩm thông qua các phương thức save, delete, update của Laravel

‐ Quản lý người dùng: Xác thực người dùng sử dụng Laravel Sanctum, khingười dùng đăng nhập vào hệ thống, Laravel Sanctum sinh ra chuỗi token và

ID người dùng trong bảng person_access_tokens, token sẽ được trả về cho

frontend và mỗi lần người dùng gửi request, hệ thống sẽ kiểm tra token hợp

Frontend Rest API Backend Database

lệ trong bảng person_access_token để xác định người dùng đăng nhập vào

hệ thống Khi người dùng đăng xuất token trong bảng sẽ bị xóa và trả về kếtquả cho frontend

4.3 Xây dựng website sử dụng Bootstrap

Trong hệ thống này Bootstrap được sử dụng để xây dựng chức năng như sau:

‐ Xây dựng layout của website: Hệ thống gồm layout home và layout admin.Tạo ra hai layout HomePage và AdminPage, mỗi layout gồm có Header,Sidebar và Footer

4.4 Xây dựng hệ thống trên hệ quản trị cơ sở dữ liệu MySQL

Trong hệ thống này MySQL được sử dụng để xây dựng chức năng như sau:

‐ Xây dựng cấu trúc các bảng dữ liệu: Hệ thống sử dụng MySQL để lưu trữthông tin người dùng, sản phẩm… thông qua các lớp migration của Laravel

để tạo ra các bảng trong MySQL Để xây dựng bảng subscription cần tạo ra

lớp CreateSubscriptionsTable trong Laravel và định nghĩa của trường dữ và kiểu dữ liệu trong Laravel Laravel cung cấp phương thức foreignIdFor để

liên kết khóa ngoại với bảng subscription_details thông qua ID vàsubscriptionID

‐ Xây dựng chức năng sắp xếp đơn hàng theo ngày tạo: Laravel cung cấp hàm

lastest để sắp xếp thứ tự đơn hàng theo trường ngày tạo Yêu cầu truy vấn

chuyển đổi thành câu lệnh SQL, MySQL truy vấn và trả về danh sách đơnhàng và hiển thị ra kết quả

‐ Xây dựng chức năng phân trang danh sách sản phẩm: Sử dụng phương thức

paginate của Laravel để giới hạn số sản phẩm hiển thị trong mỗi trang sau

mỗi lần truy vấn thông tin sản phẩm

4.5 Giao diện phần mềm

4.5.1 Trang chủ

4.5.2 Trang chi tiết sản phẩm

4.5.3 Trang giỏ hàng

4.5.4 Trang đăng nhập

‐ Một số tính năng hoạt động chưa được ổn định.

‐ Một số luồng hoạt động chưa đúng logic

2 Thảo luận

Đề tài đã xây dựng được chức năng của trang thương mại điện tử cung cấp cácchức năng cần thiết cho khách hàng Các chức năng như: Tìm kiếm, giỏ hàng Sosánh với mô hình kinh doanh truyền thống thì mô hình kinh doanh thương mại điện

tử mang lại sự tiện lợi cho khách hàng Khi tích hợp các chương trình khuyến mãi

sẽ giúp khách hàng quan tâm đến sản phẩm của shop thường xuyên hơn Các chứcnăng và thao tác mua sản phẩm sẽ cần được theo dõi để cải tiến để khách hàng lựachọn sản phẩm thêm vào giỏ hàng thuận tiện hơn