(Tiểu luận) đề tài thiết kế website bán đồ điện tử e world

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

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC KINH TẾ TÀI CHÍNH TP. HỒ CHÍ MINH-

<b>ĐỒ ÁN MƠN HỌC </b>

<b>PHÁT TRIỂN ỨNG DỤNG WEB THƯƠNG MẠI TÊN ĐỀ TÀI </b>

<b>THIẾT KẾ WEBSITE BÁN ĐỒ ĐIỆN TỬ E-WORLD </b>

Giảng viên hướng dẫn: <b>ThS. Ngô Văn Công Bằng </b>

Sinh viên thực hiện:

Nguyễn Huỳnh Duy Vũ 205121351 20D1TM07

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

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC KINH TẾ TÀI CHÍNH TP. HỒ CHÍ MINH-

<b>ĐỒ ÁN MÔN HỌC </b>

<b>PHÁT TRIỂN ỨNG DỤNG WEB THƯƠNG MẠI TÊN ĐỀ TÀI </b>

<b>THIẾT KẾ WEBSITE BÁN ĐỒ ĐIỆN TỬ E-WORLD </b>

Giảng viên hướng dẫn: <b>ThS. Ngô Văn Công Bằng </b>

Sinh viên thực hiện:

Nguyễn Huỳnh Duy Vũ 205121351 20D1TM07

TP. Hồ Chí Minh, năm 2022

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

<b>Thế giới điện tử E-World MỤC LỤC </b>

2. CÁC THÀNH VIÊN THAM GIA ... 6

Chương II: CƠ SỞ LÝ THUYẾT ... 7

<small>g. Trang giỏ hàng (cart.php) ... 16</small>

4. Tổ chức cấu trúc file & dữ liệu ... 16

5. Thiết kế bố cục ... 16

Chương IV: CHƯƠNG 4. KẾT QUẢ THỰC NGHIỆM ... 18

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

<b>Thế giới điện tử E-World MỤC LỤC </b>

<small>b. Xây dựng một hệ quản trị nội dung CMS ... 29</small>

<small>c. Tích hợp thanh tốn & in hóa đơn điện tử ... 29</small>

<small>d. Cải tiến chức năng so sánh giá: ...29</small>

<small>e. Cải tiến khả năng responsive ... 29</small>

<small>f. Phong phú hóa nội dung ... 30</small>

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

<b>Thế giới điện tử E-World TỔNG QUAN VỀ ĐỀ TÀI </b>

1. MỤC TIÊU – PHẠM VI ĐỀ TÀI

a. Mục tiêu

Thông qua Internet, chúng ta thực hiện nhiều công việc nhanh hơn và với chi phí thấp hơn so với các phương pháp truyền thống. Chính điều này đã thúc đẩy sự ra đời và phát triển của thương mại điện tử và chính phủ điện tử toàn cầu, làm thay đổi mạnh mẽ cảnh quan văn hóa và nâng cao chất lượng cuộc sống của con người. Mọi người. Giờ đây, trong hoạt động sản xuất kinh doanh, việc thúc đẩy, thúc đẩy thương mại điện tử đối với sự phát triển của doanh nghiệp đã được khẳng định. Đối với một cửa hàng, cửa hàng thì cần phải quảng bá, giới thiệu những sản phẩm mới, đáp ứng được nhu cầu của khách hàng đến với khách hàng. Vì vậy cách quảng bá là xây dựng một trang web cho cửa hàng của bạn để quảng bá tất cả các sản phẩm của mình. Vì vậy, dựa vào kiến thức đã được học qua bộ môn “Phát triển ứng dụng web thương mại” chúng em đã thực hiện đồ án “XÂY DỰNG WEBSITE BÁN Đồ Điện Tử” bán các sản phẩm về laptop, Pc, màn hình, chuột, bàn phím,... Người chủ cửa hàng đăng các sản phẩm đó lên website của mình và quản lý bằng website đó. Khách hàng có thể đặt mua hàng trên website mà không cần đến cửa hàng. Chủ cửa hàng sẽ gửi sản phẩm cho khách hàng khi nhận được tiền. Tuy đã cố gắng hết sức tìm hiểu, phân tích thiết kế và cài đặt hệ thống nhƣng chắc rằng không tránh kh i nh ng ỏ ữ thiếu sót. Chúng em r t mong nhấ ận được sự ông c m và gó ý cth ả p ủa q Thầy cô Xin ân thành c. ch ảm ơn.

b. Phạm vi đề tài

Website thương mại dành cho cửa hàng bán lẻ thiết bị điện tử quy mô nhỏ, khoảng 10 loại sản phẩm, mỗi loại sản phẩm có 20 – 30 sản phẩm.

c. MƠ TẢ ĐỀ TÀI

Cửa hàng bán lẻ thiết bị điện tử “E World” có giao diện website để -người dùng mua sắm. Website có các chức năng cơ bản sau:

• Thao tác với tài khoản

• Tìm kiếm & lọc sản phẩm theo yêu cầu

• So sánh giữa các sản phẩm và tham khảo sản phẩm tương ứng trên mạng.

• Đặt hàng trực tuyến • Thanh tốn

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

<b>Thế giới điện tử E-World TỔNG QUAN VỀ ĐỀ TÀI </b>

2. CÁC THÀNH VIÊN THAM GIA

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

<b>Thế giới điện tử E-World CƠ SỞ LÝ THUYẾT </b>

Chương II: CƠ SỞ LÝ THUYẾT

1. Ngôn ngữ lập trình sử dụng:

a. HTML

Định nghĩa: HTML viết tắt của Hypertext Markup Language là ngôn ngữ lập trình dùng để xây dựng và cấu trúc lại các thành phần có trong Website.

Chỉ được áp dụng chủ yếu cho web tĩnh. Nếu muốn tạo các tính năng động, lập trình viên phải dùng thêm JavaScript hoặc ngôn ngữ backend của bên thứ 3

Cách thức hoạt động: HTML là một loại ngôn ngữ đánh dấu siêu văn bản. ó giúp cấu thành các cấu trúc cơ bản của một Website, làm cho N trang Web trở thành một hệ thống hoàn chỉnh. Cụ thể, ngôn ngữ đánh dấu siêu văn bản này giúp bố cục, chia khung sườn các thành phần trang Web. Đồng thời, nó cịn hỗ trợ khai báo các File kỹ thuật số như

Định Nghĩa: 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 (ví dụ như HTML).

Cách thức hoạt động: CSS là thứ mang lại cho toàn bộ trang web của bạn phong cách. Những màu sắc bóng bẩy, phơng chữ thú vị, và hình ảnh nền? Tất cả là nhờ CSS. Ngơn ngữ này ảnh hưởng đến toàn bộ tâm trạng và giai điệu của một trang web, khiến nó trở thành một công cụ vô cùng mạnh mẽ – và là một kỹ năng quan trọng để các lập trình viên web học hỏi. Đó cũng là những gì cho phép các trang web thích ứng với các kích thước màn hình và loại thiết bị khác nhau.

c. Javascript

Định nghĩa: Js là một ngôn ngữ lập trình thơng dịch được sử dụng ở phía máy khách và phía máy chủ, cho phép tạo các trang web có các

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

<b>Thế giới điện tử E-World CƠ SỞ LÝ THUYẾT </b>

hình động chuyên nghiệp. JavaScript được hỗ trợ bởi hầu hết các trình duyệt web: Chrome, Firefox, Safari, Internet Explorer, Edge, Opera,... Hầu hết các trình duyệt di động cho điện thoại thông minh đều hỗ trợ JavaScript.

JavaScript là một trình thơng dịch ngơn ngữ lập trình chính thức được nhúng bên trong trình duyệt web. Bạn có thể thực hiện bất cứ điều gì trong JavaScript mà một ngôn ngữ thông thường như Java cho phép. Bao gồm:

• Khai báo biến

• Lưu trữ và truy vấn giá trị • Xác định và gọi hàm

• Xác định các classes của riêng bạn • Tải và sử dụng các mơ đun bên ngồi

-• Viết trình xử lý sự kiện trả lời người dùng và các sự kiện khác Cách thức hoạt động: Khi web browser tải một web page, HTML parser bắt đầu phân tích cú pháp HTML code và tạo DOM. Bất cứ khi nào trình phân tích cú pháp gặp một chỉ thị CSS hoặc JavaScript (inline hoặc externally loaded), nó sẽ được chuyển giao cho CSS parser hoặc JavaScript engine theo yêu cầu.

JavaScript Engine tải các tệp JavaScript bên ngoài và inline code, nhưng không chạy mã ngay lập tức, mà đợi HTML và CSS phân tích hồn tất. Khi điều này được thực hiện, JavaScript được thực thi theo thứ tự chúng được tìm thấy trên trang web: các biến và hàm được xác định, các lời gọi hàm được thực thi, trình xử lý sự kiện được kích hoạt,... Các hoạt động này dẫn đến việc DOM được cập nhật bởi JavaScript và được hiển thị ngay lập tức bởi trình duyệt.

d. PHP

Định nghĩa: PHP là cách viết tắt hồi quy của cụm từ tiếng Anh Hypertext Preprocessor, là ngôn ngữ lập trình kích bản mã nguồn mở (hay ngơn ngữ lập trình đa mục đích) được được phát triển từ năm 1994. Nó được dùng để phát triển các ứng dụng cho máy chủ. Ngôn ngữ này chạy ở phía server, nhằm sinh mã html trên client. Cũng chính bởi thế, PHP đã tạo ra các ứng dụng web. Mã lệnh của nó được nhúng vào html nhờ sử dụng cặp thẻ PHP <?php?>.

Cách thức hoạt động: Các phiên bản PHP:

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

<b>Thế giới điện tử E-World CƠ SỞ LÝ THUYẾT </b>

Định nghĩa: Bootstrap được biết là thư viện css, js, html. Nó sử dụng html, css và js để tạo ra được nhiều mẫu cơ bản khác nhau sử dụng trong website như form, button, table, navigation…Việc sử dụng bootstrap hữu ích cho các nhà lập trình có thể tạo ra được các giao diện đẹp và tương thích với màn hình điện thoại.

Như phần thơng tin trên đã phân tích thì bootstrap hoạt động như yếu tốt để cho phép giao diện website thân thiện trên mọi màn hình. Vì thế mà người tiếp cận thơng tin cảm thấy thoải mái hơn khi xem được đầy đủ giao diện web, khơng thiếu sót thơng tin cũng như tìm được vấn đề mình cần nhanh chóng.

Cách thức hoạt động của Bootstrap: Bootstrap dễ dàng tích hợp với nhiều mã nguồn mở như Joomla, Magento, WordPress khi thiết kế dạng module. Công cụ này giúp người dùng thao tác, tùy chỉnh các framework trên website trước khi tải về

Việc tích hợp jQuery trên Bootstrap khơng làm khó người thực hiện, bạn chỉ việc khai báo các tính năng sử dụng trong tồn bộ q trình thiết kế website. Hỗ trợ website đa dạng nhiều công việc như slide, responsive, menu với độ tương thích cao.

Định nghĩa: SQL là viết tắt của Structured Query Language, nghĩa là ngôn ngữ truy vấn cơ sở dữ liệu. Có thể coi ngơn ngữ SQL là ngơn ngữ

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

<b>Thế giới điện tử E-World CƠ SỞ LÝ THUYẾT </b>

chung mà bất cứ hệ thống cơ sở dữ liệu quan hệ (RDBMS) nào cũng phải đáp ứng, điển hình như: Oracle Database, SQL Server, MySQL…

<b>Cách thức hoạt động: SQL có vai trị đặc biệt quan trọng trong hệ </b>

thống cơ sở dữ liệu như vậy nên hầu như các công ty lớn hiện nay đều sử dụng ngơn ngữ lập trình này. Nhiều công ty công nghệ hàng đầu hiện nay như Facebook, Instagram, Whatsapp,... cũng đang sử dụng SQL để lưu trữ và xử lý dữ liệu backend. SQL sẽ xử lý một truy vấn (thường là dạng viết dưới dạng phân tích cú pháp) từ người dùng thơng qua các trình tối ưu hố. Truy vấn sẽ được xử lý qua ba giai đoạn chính là:

• Phân tích cú pháp là q trình kiểm tra cú pháp truy vấn đã đúng chưa.

• Ràng buộc là quy trình kiểm tra ngữ nghĩa của truy vấn đảm bảo tính chính xác và xác định dữ liệu một cách hiệu quả nhất. • Q trình tối ưu hố là tạo các kế hoạch triển khai và thực hiện

truy vấn quan trọng để trích xuất cơ sở dữ liệu từ hệ thống. Trong bước này, người dùng có thể tạo ra tồn bộ hốn vị và kết hợp để tìm ra phương án thực hiện truy vấn tối ưu nhất. Thời gian càng ngắn thì truy vấn càng hiệu quả và kết quả càng khả quan.

2. Phần mềm, chương trình sử dụng

a. Visual Studio Code:

Mơ tả: Là một trình chỉnh sửa và biên tập lập trình code khơng lấy phí dành cho Windows, Linux và macOS, Visual Studio Code được tăng trưởng bởi Microsoft. Nó được xem là một sự phối hợp tuyệt vời giữa IDE và Code Editor . Visual Studio Code tương hỗ công dụng debug, đi kèm với Git, có syntax highlighting, tự hồn thành xong mã mưu trí, snippets, và nâng cấp cải tiến mã nguồn. Nhờ tính năng tùy chỉnh, Visual Studio Code cũng được cho phép người dùng đổi khác theme, phím tắt, và các tùy chọn khác .

<b>Một số tính năng nổi bật: </b>

• Hỗ trợ nhiều ngơn ngữ lập trình • Hỗ trợ đa nền tảng

• Cung cấp kho tiện ích mở rộng • Kho lưu trữ an tồn

• Màn hình đa nhiệm • Intellisense

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

<b>Thế giới điện tử E-World CƠ SỞ LÝ THUYẾT </b>

b. XAMP:

Định nghĩa: <b>XAMP hoạt động dựa trên sự tích hợp của 5 phần mềm </b>

chính là Cross-Platform (X), Apache (A), MariaDB (M), PHP (P) và Perl (P) Phần mềm XAMPP là một loại ứng dụng phần mềm khá phổ biến và thường hay được các lập trình viên sử dụng để xây dựng và phát triển các dựa án website theo ngôn ngữ PHP.<b>XAMPP</b>được sử dụng cho mục đích nghiên cứu, phát triển website qua Localhost của máy tính cá nhân. XAMPP được ứng dụng trong nhiều lĩnh vực từ học tập đến nâng cấp, thử nghiệm Website của các lập trình viên.

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

<b>Thế giới điện tử E-World PHÂN TÍCH THIẾT KẾ </b>

Chương III: PHÂN TÍCH THIẾT KẾ

1. Lựa chọn các cơng cụ

Website sử dụng các ngơn ngữ sau:

• HTML: thể hiện nội dung, văn bản, hình ảnh • CSS: định dạng

• Javascript:

▪ Xử lý client side các hiệu ứng, nút bấm.

-▪ Sử dụng Ajax để truy vấn dữ liệu ngược lại server. • PHP:

▪ Xử lý server-side

• SQL: lưu trữ dữ liệu dưới dạng database.

Ngoài ra, website còn sử dụng một số thư viện, framework khác để hỗ trợ:

• Bootstrap: định dạng cấu trúc website responsive. • FontAwesome Icon: cung cấp biểu tượng (icon) miễn phí. • Google Fonts: cung cấp phơng chữ (font) có hỗ trợ Tiếng Việt. • jQuery: đơn giản hóa mã Javascript.

• Simple HTML Dom: thư viện php kết nối http request đến trang khác nhằm lấy dữ liệu từ các website.

Website sử dụng các chương trình sau:

• Visual Studio Code: IDE để viết mã và tổ chức tệp. • XAMPP:

▪ PHP Server: chạy website động. ▪ MySQL: lưu trữ và truy vấn cơ sở dữ liệu.

• Các trình duyệt thơng dụng như Microsoft Edge, Google Chrome và Mozilla Firefox: chạy thử & vận hành website.

2. Xây dựng cơ sở dữ liệu

Nhằm thuận tiện cho việc kết nối dữ liệu đến server, website sử dụng chung một cơ sở dữ liệu chứa các bảng:

• Bảng “comment”: chứa thơng các bình luận về sản phẩm. • Bảng “account”: chứa thơng tin các tài khoản khách hàng. • Bảng “order”: chứa thơng tin đơn hàng.

• Bảng “favorite”: chứa danh sác sản phẩm yêu thích.

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

<b>Thế giới điện tử E-World PHÂN TÍCH THIẾT KẾ </b>

Ngồi ra, do sự khác nhau về thuộc tính giữa các loại sản phẩm khác nhau (laptop, pc, bàn phím, chuột) do đó mỗi loại sản phẩm sẽ được

• Hiển thị thơng báo đăng nhập thất bại nếu xảy ra. • Yêu cầu đăng nhập khi vào trang giỏ hàng, tài khoản.

c. Trang chủ (index.php)

Trang chủ sẽ hiển thị danh sách các sản phẩm bán chạy (dựa theo mức độ đánh giá, ưu đãi,...) theo từng loại sản phẩm.

d. Trang sản phẩm (product.php)

Yêu cầu nhận tham số mã sản phẩm dưới dạng GET.: • Phần hồ sơ sản phẩm:

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

<b>Thế giới điện tử E-World PHÂN TÍCH THIẾT KẾ </b>

▪ Phần ảnh sản phẩm: hiển thị một hình ảnh chính và các hình ảnh nhỏ. Khi bấm vào hình ảnh nhỏ, hình ảnh to sẽ thay đổi theo. Website tự động truy cập thư mục tương ứng với mã sản phẩm, quét các file ảnh và hiển thị các hình ảnh với bất kỳ số lượng nào.

▪ Phần tổng quát sản phẩm: - Hiển thị tên sản phẩm - Hiện thị loại sản phẩm - Hiển thị thương hiệu sản phẩm

- Hiển thị mức độ đánh giá dưới dạng chữ và hình ảnh, có liên kết nhanh đến phần đánh giá sản phẩm ở phía dưới. Tự động tính trung bình cộng (làm trịn 1 chữ số thập phân) thông qua mức độ đánh giá của tất cả các bình luận về sản phẩm này.

- Hiển thị mục yêu thích nếu người dùng đã đăng nhập và có u thích sản phẩm này.

- Hiển thị giá cũ và giá mới

- Hiển thị khung chọn số lượng và nút thêm vào giỏ

• Phần mơ tả chi tiết: hiển thị dưới dạng PDF thay vì văn bản thơ nhằm mục đích cho phép người dùng đa dạng hóa cách định dạng và đính kèm hình ảnh mà không bị ảnh hưởng khi đưa lên website.

• Phần bình luận: ▪ Khung bình luận:

- Hiển thị avatar người bình luận - Hiển thị tên người bình luận - Hiển thị ngày viết bình luận

- Hiển thị mức độ đánh giá dưới dạng chữ và hình ảnh.

- Hiển thị nội dung bình luận

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

<b>Thế giới điện tử E-World PHÂN TÍCH THIẾT KẾ </b>

• Hiển thị sản phẩm chưa có đánh giá nếu khơng tìm thấy bất cứ bình luận nào dành cho sản phẩm hiện tại trong cơ sở dữ liệu.

e. Trang tìm kiếm (seach.php)

u cầu:

• Tiêu chuẩn tìm kiếm: Hiển thị lần lượt các option thấp hơn một bậc khi một option cấp cao hơn khác được chọn. Xóa các option cấp thấp cũ nếu option cao khác bị đổi.

1. Loại sản phẩm

2. Các thuộc tính riêng biệt của sản phẩm

• Hồ sơ sản phẩm: cho phép nhảy đến liên kết khi bấm vào cho phép nhảy đến liên kết khi bấm vào

• Hiển thị thơng báo khơng tìm thấy sản phẩm nếu xảy ra. • Cho phép chọn nhiều dữ kiện cùng lúc.

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

<b>Thế giới điện tử E-World PHÂN TÍCH THIẾT KẾ </b>

• Khơng so sánh nếu chưa nhận được mã sản phẩm phù hợp.

g. Trang giỏ hàng (cart.php)

▪ Hiển thị ưu đãi ▪ Tính được giá cuối cùng • Phần tổng tiền: tự động tính tổng • Phần cơng cụ:

▪ Nút yêu thích: hiển thị sáng khi khách hàng đã thích

4. Tổ chức cấu trúc file & dữ liệu

Dựa theo chức năng đã đề ra của các website, server được tổ chức như sau:

• Thư mục “common”: chứa các file .php dùng chung

• Thư mục “product”: chứa các file liên quan đến sản phẩm, thư mục được đặt tên theo mã sản phẩm.

• Thư mục “image”: chứa các file ảnh, định dạng chủ yếu .png. • Thư mục “style”: chứa file css dùng chung cùng thư viện có định

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

<b>Thế giới điện tử E-World PHÂN TÍCH THIẾT KẾ </b>

• body_footer.php: chứa nội dung sẽ được thêm sau nội dung chính của website.

Tuy nhiên, do có khả năng xảy ra sự thay đổi về số lượng tệp muốn thêm vào các website nên phần chung trong thẻ body của mỗi website sẽ được tách làm 2 phần trên và dưới nhằm tránh việc phải chỉnh sửa lại tất cả các trang khi có sự thay đổi:

• body_header.php:

▪ header.php: sẽ được dính chặt ở phía trên cùng để thuận tiện cho người dùng khi lướt xuống phía dưới xem sản

▪ aside.php: chứa các liên kết chuyển hướng ngoài đến các trang mạng xã hội của cửa hàng, trang about-us.php, trang policy.php.

▪ footer.php: chứa thông tin cửa hàng và thông tin thành viên dự án.

</div>