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

Trang 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-

ĐỒ ÁN MÔN HỌC

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

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

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

Sinh viên thực hiện:

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

Trang 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-

ĐỒ ÁN MÔN HỌC

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

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

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

Sinh viên thực hiện:

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

TP Hồ Chí Minh, năm 2022

Trang 3

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

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

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

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

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

Trang 4

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

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

c Tích hợp thanh toán & in hóa đơn điện tử 29

d Cải tiến chức năng so sánh giá: 29

e Cải tiến khả năng responsive 29

f Phong phú hóa nội dung 30

Trang 5

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

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 quí 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 toán

Trang 6

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

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

Trang 7

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

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

Trang 8

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 ngoà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 hoà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:

Trang 9

Đị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 toàn bộ quá 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ữ

Trang 10

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…

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

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 hoá Truy vấn sẽ được xử lý qua ba giai đoạn chính là:

• Phân tích cú pháp là quá 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 • Quá trình tối ưu hoá 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 toàn bộ hoá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ự hoà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

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

• 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 toàn

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

Trang 11

b XAMP:

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

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.XAMPPđượ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

Trang 12

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

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

Trang 13

Ngoà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:

Trang 14

▪ 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ó yê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

Trang 15

• 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)

Yê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

Trang 16

• 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

Trang 17

• 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