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 – 20103062Chuyên ngành : Công nghệ thông tinKhó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ầycô 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 HuyThái Anh Tuấn

MỤC LỤC

LỜI CẢM ƠN IMỤ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

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

ĐẶ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ỨU1 Đố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ê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.

+ 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 QUAN1.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ùngdễ 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ếtkế cho những website tiếp theo.

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 PHPTài liệu đa dạng

Tích hợp với dịch vụ mailTốc độ xử lý nhanhDễ 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ÁN2.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ẩmChức năng hiển thị sản phẩm theo danh mụcChức năng hiển thị chi tiết sản phẩmChức năng thêm sản phẩm vào giỏ hàngChức năng đăng nhập và tạo tài khoản người dùngChứ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ẩmChức năng quản lý danh mụcChứ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 nhanhBả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.

Laravel 9: Laravel là framework PHP cung cấp khung chuẩn theo môhình MVC với các thao tác database thông qua Eloquent và hỗ trợ tạora các API thao tác với cơ sở dữ liệu.

CHƯƠNG 3 THIẾT KẾ HỆ THỐNG3.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ệuBả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ộtmã 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ỀM4.1 Tổng quan về xây dựng phần mềm

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ốngvà 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ệt

qua 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, khi

ngườ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

FrontendRest APIBackendDatabase

lệ trong bảng person_access_token để xác định người dùng đăng nhập vàohệ 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ệntử 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ãisẽ 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.

KẾT LUẬN VÀ ĐỀ NGHỊ1 Kết luận

Sau quá trình nghiên cứu và xây dựng trang thương mại điện tử phục, em đãhoàn thành tiểu luận “Xây dựng website thời trang BlackPink” Các chức năngmua hàng của hệ thống đã hoạt động ổn định và đáp ứng được yêu cầu đặt ra của đề

tài 2 Đề nghị

- Nên thêm chức năng thanh toán chung cho cả sản phẩm đơn lẻ và gói sảnphẩm.

- Thêm các sản phẩm mới vào cơ sở dữ liệu.

- Điều chỉnh một số luồng để hệ thống hoạt động trơn tru và hợp lý hơn.

- Thêm chức năng thông báo thời gian giao hàng qua email.

TÀI LIỆU THAM KHẢO

[1] Laravel Homepage Document, https://laravel.com/docs/8.x, ngày truy cập02/03/2022.

[2] Laravel Sanctum, https://laravel.com/docs/8.x/sanctum#main-content, ngàytruy cập 08/04/2022.

[3] React JS Document, https://reactjs.org/, ngày truy cập 02/03/2022.

[4] React Query Docs, https://react-query.tanstack.com/, ngày truy cập16/03/2022.

[5] React Router Document,

[6] Scribe API Document, https://scribe.knuckles.wtf/laravel/getting-started,ngày truy cập 15/04/2022.

[7] Tailwind CSS Document, https://tailwindcss.com/docs/installation, ngày truycập 20/03/2022.

[8] Zustand Github Docs, https://github.com/pmndrs/zustand, ngày truy cập20/04/2022.