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

TỔNG QUAN VỀ ĐỀ TÀI

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

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

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

CÁC THÀNH VIÊN THAM GIA

STT MSSV Họ tên email

1 205121351 Nguyễn Huỳnh Duy Vũ Vunhd20@uef.edu.vn

2 195120624 Phan Sỹ Phúc Thịnh Thinhpsp19@uef.edu.vn

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

CƠ SỞ LÝ THUYẾT

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ạc, Video, hình ảnh,…

• HTML 5 b CSS Đị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

Thế giới điện tử E-World CƠ SỞ LÝ THUYẾT 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:

• 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

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

• PHP 7 e Boostrap Đị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

• Bootstrap 5.0 f SQL Đị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ữ

Thế giới điện tử E-World CƠ SỞ LÝ THUYẾT 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…

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

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

Thế giới điện tử E-World CƠ SỞ LÝ THUYẾT b XAMP: Định nghĩa: XAMPhoạ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

Các thành phần chính của phần mềm Xampp:

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

PHÂN TÍCH THIẾT KẾ

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

▪ 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

• 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

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

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

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 thể hiện bằng các bảng:

• Bảng “laptop” (máy tính xách tay)

• Bảng “pc” (máy tính bàn)

Tổ chức cấu trúc website

• Xuất hiện nút cuộn lên trên khi cuộn trang web xuống dưới b Phần đăng nhập

▪ Xác nhận mật khẩu & đã đọc chính sách website

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

▪ 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ỏ hàng

- Hiển thị các loại ưu đãi

- Hiển thị cấu hình sản phẩm

• Phần tham khảo giá sản phẩm: cho phép nhảy đến liên kết khi bấm vào

▪ Hiển thị tên sản phẩm

▪ Hiển thị tên website nguồn

▪ Hiển thị hình ảnh sản phẩm

• 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

- 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

- Lọc bình luận mới nhất

- Lọc bình luận cũ nhất

- Lọc bình luận tích cực nhất

- Lọc bình luận tiêu cực nhất

• Hiển thị thông báo không tìm thấy sản phẩm nếu liên kết không phù hợp

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

• 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

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ị mức độ đánh giá

• Lọc sản phẩm: cho phép lọc kết quả theo các tiêu chí

▪ Mức độ đánh giá giảm dần

▪ Mức độ đánh giá tăng dần

• 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 f Trang so sánh (compare.php)

• Phần chọn loại sản phẩm: bắt buộc phải so sánh cùng loại sản phẩm

• Phần tìm kiếm: cho phép gõ tên và gợi ý tên sản phẩm

▪ Hiển thị thông tin chi tiết riêng biệt mỗi sản phẩm Trường hợp xử lý:

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

• Phần sản phẩm: hiển thị theo danh sách

▪ Tính được giá cuối cùng

• Phần tổng tiền: tự động tính tổng

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

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 dạng css

• Thư mục “script”: chứa file javascript dùng chung cùng thư viện có định dạng js.

Thiết kế bố cục

Mỗi website sẽ có một cấu trúc chung bao gồm 4 thành phần, mỗi thành phần sẽ được include cố định:

• head.php: chứa khai báo metadata, thư viện cần thiết cho wesbite

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

• thẻ main: chứa nội dung duy nhất khác biệt giữa các trang web

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

▪ 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 phẩm

- Thanh tiêu đề cửa hàng (logo và slogan)

▪ 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

Thế giới điện tử E-World CHƯƠNG 4 KẾT QUẢ THỰC NGHIỆM

CHƯƠNG 4 KẾT QUẢ THỰC NGHIỆM

Trang chủ

Hình 3 Trang chủ, mở danh mục sản phẩm

Hình 4 Trang chủ, kích thước máy tính bảng

Hình 5 Trang chủ, kích thước điện thoại di động

Thế giới điện tử E-World CHƯƠNG 4 KẾT QUẢ THỰC NGHIỆM Màn hình đăng nhập :

Hình 6 Màn hình đăng nhập Màn hình đăng ký :

Trang sản phẩm

Hình 8 Trang sản phẩm, không tìm thấy sản phẩm

Hình 9 Trang sản phẩm, phần sản phẩm

Hình Tran 10 g sản phẩm, phần bình luận

Trang ưu đãi

Trang so sánh

Trang giỏ hàng

Thế giới điện tử E-World KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Tiêu đề	Thiết Kế Website Bán Đồ Điện Tử E-World
Tác giả	Nguyễn Huỳnh Duy Vũ, Phan Sỹ Phúc Thịnh
Người hướng dẫn	ThS. Ngô Văn Công Bằng
Trường học	Trường Đại Học Kinh Tế - Tài Chính
Chuyên ngành	Thương Mại Điện Tử Marketing Online
Thể loại	Đồ án
Năm xuất bản	2022
Thành phố	TP. Hồ Chí Minh

Định dạng
Số trang	34
Dung lượng	2,21 MB