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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (546.79 KB, 26 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

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

<b>KHOA KHOA HỌC TỰ NHIÊN VÀ CÔNG NGHỆ</b>

<b>WEB NÂNG CAO</b>

<b>XÂY DỰNG WEBSITE THỜI TRANG BLACKPINK</b>

<b>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</b>

<b>Đắk Lắk, tháng 12 năm 2022</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

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

<b>KHOA KHOA HỌC TỰ NHIÊN VÀ CÔNG NGHỆ</b>

<b>WEB NÂNG CAO</b>

<b>XÂY DỰNG WEBSITE THỜI TRANG BLACKPINK</b>

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

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

<b>Người hướng dẫn</b>

ThS. Nguyễn Thị Như

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

Trong thời gian học tập tại trường Đại học Tây Nguyên em đã được q 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 q 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 hồn thành đề tài khóa luận được tốt đẹp.

Em cũng khơng qn 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 hồ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 q 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

<b>Hoàng Đoàn Quốc HuyThái Anh Tuấn</b>

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

1. Tính cấp thiết...1

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

<b>NỘI DUNG VÀ PHƯƠNG PHÁP NGHIÊN CỨU...4</b>

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

<b>CHƯƠNG 1. TỔNG QUAN...4</b>

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

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

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<b>ĐẶT VẤN ĐỀ1. Tính cấp thiết</b>

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.

<b>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</b>

‐ 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ử.

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>NỘI DUNG VÀ PHƯƠNG PHÁP NGHIÊN CỨU1. Đối tượng nghiên cứu</b>

<b>-</b> Thương mại điện tử.

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

<b>-</b> 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.

<b>3. Nội dung nghiên cứu</b>

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 u cầu thuật tố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.

<b>-</b> Phương pháp thực nghiệm:

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

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

+ 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.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<b>CHƯƠNG 1. TỔNG QUAN1.1 Tổng quan tình hình nghiên cứu</b>

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 tố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á….

<b>1.2 Tổng quan về Bootstrap</b>

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.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

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

<b>1.3 Tổng quan về Laravel Framework</b>

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 thố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

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<b>CHƯƠNG 2. PHÂN TÍCH YÊU CẦU BÀI TỐN2.1 Mơ tả hệ thống thực tế</b>

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.

<b>2.2 Yêu cầu hệ thống thông tin</b>

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 tố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:

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

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.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<b>CHƯƠNG 3. THIẾT KẾ HỆ THỐNG3.1 Sơ đồ Ngữ cảnh</b>

<b>3.4 Thiết kế dữ liệu</b>

3.4.1 Từ điển dữ liệuBảng “users”

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

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

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

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

<b>3.5 Thiết kế giao diện và xử lý</b>

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.

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

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ủ

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

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.

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<b>CHƯƠNG 4. XÂY DỰNG PHẦN MỀM4.1 Tổng quan về xây dựng phần mềm</b>

Backend: Nhận các yêu cầu xử lý từ API, thực hiện các thao tác tính tố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.

<b>4.2 Xây dựng website sử dụng Laravel Framework</b>

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 <b>OrderDetail</b> để lưuthông tin từng sản phẩm và khởi tạo class <b>Order</b> để 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 <b>find</b> của class

<b>Order</b> kết hợp với <b>OrderDetail</b> để 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 <b>$request</b> để lấy thông tin sản phẩm và sử

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

class <b>Product</b> để 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 <b>save, delete, update</b> 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à

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

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

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

lệ trong bảng <b>person_access_token</b> để 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.

<b>4.3 Xây dựng website sử dụng Bootstrap</b>

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 <b>HomePage</b> và <b>AdminPage</b>, mỗi layout gồm có Header,Sidebar và Footer.

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

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

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 <b>migration</b> của Laravelđể tạo ra các bảng trong MySQL. Để xây dựng bảng subscription cần tạo ra

<b>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 để</b>

liên kết khóa ngoại với bảng <b>subscription_details</b> 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

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

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

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

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

4.5.1 Trang chủ

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

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

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

‐ 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.

Đề 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.

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

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 “<b>Xây dựng website thời trang BlackPink”</b>. 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 đề

<b>-</b> 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.

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

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

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

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

[1]. Laravel Homepage Document, ngày truy cập02/03/2022.

[2]. Laravel Sanctum, ngàytruy cập 08/04/2022.

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

[4]. React Query Docs, ngày truy cập16/03/2022.

[5]. React Router Document,

[6]. Scribe API Document, truy cập 15/04/2022.

[7]. Tailwind CSS Document, ngày truycập 20/03/2022.