ĐỒ án môn học đề tài xây DỰNG WEBSITE KINH DOANH THIẾT bị DI ĐỘNG

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC UEH KHOA CÔNG NGHỆ THÔNG TIN KINH DOANH ĐỒ ÁN MÔN HỌC ĐỀ TÀI XÂY DỰNG WEBSITE KINH DOANH THIẾT BỊ DI ĐỘNG Học Phần Phát Triển Ứng Dụng Web Danh Sách Nhóm 1 ĐẶNG C[.]

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC UEHKHOA CÔNG NGHỆ THÔNG TIN KINH DOANH

1 ĐẶNG CÔNG BÌNH

2 HUỲNH NHẬT HÀO

3 CHÂU HOÀNG KHIÊM

4 NGUYỄN QUỐC ANH

5 TRẦN THỊ KIM CHI

Chuyên Ngành: CÔNG NGHỆ PHẦN MỀM Khóa: K45

Giảng Viên: TS Đặng Ngọc Hoàng Thành

MỤC LỤC

MỤC LỤC 2

CHƯƠNG 1 TỔNG QUAN 5

1.1 Thương Mại Điện Tử 5

1.2 Tính Cấp Thiết 5

1.3 Các Công Cụ Phát Triển Ứng Dụng Web 5

a) HTML 5

b) CSS 6

c) JavaScript và JQuery 6

d) Bootstrap 6

e) MySQL 6

f) PHP 6

1.4 Thiết Lập Máy Chủ Web 7

CHƯƠNG 2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 8

2.1 Sơ Đồ Công Việc 8

2.2 Sơ Đồ Phân Rã Chức Năng 8

2.3 Sơ Đồ Lớp 10

10

CHƯƠNG 3 THIẾT KẾ GIAO DIỆN 11

3.1 Giao diện trang chủ 11

a) Hiển thị đầy đủ 11

b) Hiển thị trên Mobile 13

3.2 Giao Diện Trang Điện Thoại Di Động 14

a) Hiển Thị Đầy Đủ 14

b) Hiển Thị Trên Mobile 16

3.3 Giao diện trang máy tính bảng 17

a) Hiển Thị Đầy Đủ 17

b) Hiển Thị Trên Mobile 18

3.4 Giao diện trang máy tính xách tay 19

a) Hiển Thị Đầy Đủ 19

b) Hiển Thị Trên Mobile 20

3.5 Giao diện trang phụ kiện 21

a) Hiển Thị Đầy Đủ 21

b) Hiển Thị Trên Mobile 22

3.6 Giao diện trang chi tiết sản phẩm 23

a) Hiển Thị Đầy Đủ 23

b) Hiển Thị Trên Mobile 24

3.7 Giao diện trang đăng nhập 25

a) Hiển Thị Đầy Đủ 25

b) Hiển Thị Trên Mobile 26

3.8 Giao diện trang thông tin cá nhân 27

a) Hiển Thị Đầy Đủ 27

b) Hiển Thị Trên Mobile 28

3.9 Giao diện trang đặt hàng 29

a) Hiển Thị Đầy Đủ 29

b) Hiển Thị Trên Mobile 30

3.10 Giao diện trang lịch sử mua hàng 31

a) Hiển Thị Đầy Đủ 31

b) Hiển Thị Trên Mobile 32

CHƯƠNG 4 XÂY DỰNG CƠ SỞ DỮ LIỆU 33

4.1 Các Bảng Dữ Liệu 33

4.2 Mô tả từng bảng dữ liệu 35

4.2 Một Số Truy Vấn 38

4.3 Sơ Đồ Quan Hệ 42

CHƯƠNG 5 XÂY DỰNG TRANG WEB 43

5.1 Cấu Trúc Trang Web 43

5.2 Kết Nối Cơ Sở Dữ Liệu 46

5.3 Xây Dựng Nội Dung Các Trang 48

a) Trang Chủ (index.php) 48

b) Trang đăng nhập (login.php) 49

e) Trang Giỏ Hàng (cart.php) 55

g) Trang điện thoại (phone_category.php) 56

h) Trang máy tính bảng (tablet_category.php) 57

i) Trang máy tính xách tay (laptop_category.php) 59

k) Trang phụ kiện (accessories_category.php) 60

l) Trang lịch sử mua hàng(order.php) 61

CHƯƠNG 6 QUY TRÌNH THỰC THI 63

6.1 Quy đăng ký tài khoản 63

6.2 Quy trình đăng nhập tài khoản 63

6.3 Quy trình thêm sản phẩm vào giỏ hàng 63

6.4 Quy trình đặt hàng 63

6.5 Quy trình xem lịch sử mua hàng 63

TÀI LIỆU THAM KHẢO 65

CHƯƠNG 1 TỔNG QUAN 1.1 Thương Mại Điện Tử

Thương mại điện tử là gì? Đây là việc tiến hành một phần hay toàn bộ hoạt động kinh doanh bằng các phương tiện điện tử Một cách dễ hiểu hơn thì thương mại điện tử chính là việc mua bán sản phẩm hay dịch vụ thông qua internet và các phương tiện điện tử khác Các giao dịch này bao gồm tất cả các hoạt động như: giao dịch, mua bán, thanh toán, đặt hàng, quảng cáo và giao hàng…

ta dành ra nhiều thời gian cho internet hơn Học tập, công việc, giải trí đều sử dụng internet, đặc biệt trong mùa dịch hiện nay Cơ hội để tiếp cận khách hàng tiềm năng là vô tận trên internet Bởi vậy, đối với các doanh nghiệp bán lẻ, xây dựng cho mình một trang web bán hàng là quan trọng vì nhiều lí do Thứ nhất đó là dễ dàng hơn trong việc tiếp cận khách hàng khi mà người truy cập có thể tham quan và tìm hiểu về sản phẩm hoặc dịch vụ ngay trên mạng Thứ hai, việc mua bán trở nên dễ dàng và nhanh chóng khi kết hợp với sự trỗi dậy của các ví điện tử và e-banking, làm gia tăng doanh số mà không phải gặp những khó khăn của một cửa hàng truyền thống Thứ ba là tạo uy tín với khách hàng và người truy cập, tạo ra cho họ một cảm giác rằng doanh nghiệp là một tổ chức chính thống và chuyên nghiệp

1.3 Các Công Cụ Phát Triển Ứng Dụng Web

a) HTML

các nội dung khác nhau, làm cho nó hiển thị hoặc hoạt động theo cách mong muốn Mỗi phần tử có một tag mà mỗi tag chỉ định một chức năng khác nhau

HTML được sử dụng cho đề tài này là HTML5, ra mắt năm 2014

jQuery là một thư viện JavaScript tập trung đơn giản hoá việc xử lý DOM, các yêu cầu AJAX và xử lý các Events

1.4 Thiết Lập Máy Chủ Web

− Sử dụng phần mềm FileZilla để upload các thư mục của web lên server

− Dùng giao thức FTP - File Transfer Protocol cho web

− Sử dụng địa chỉ host http://125.234.104.133/web_php/gr01/ là tên miền của web

Vào trong phpMyAdmin ở database webgr01 import file sql của thư mục web để kết nối

đến database

CHƯƠNG 2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

2.1 Sơ Đồ Công Việc

Webside có một actor chính là user (người sử dụng trang web với mục đích xem và mua hàng)

Hình 2.1.1

2.2 Sơ Đồ Phân Rã Chức Năng

2.2.1 Phân rã Usecase Xem, tìm kiếm sản phẩm

2.3 Sơ Đồ Lớp

Hình 2.3.1

CHƯƠNG 3 THIẾT KẾ GIAO DIỆN 3.1 Giao diện trang chủ

a) Hiển thị đầy đủ

Trang chủ được thiết kế theo bố cục 3 phần: header, content, footer

Content gồm:

+ Carousel chứa những hình ảnh sản phẩm bán chạy, những sản phẩm hot nhất của cửa hàng

+ Những chương trình khuyến mãi hiện có của cửa hàng

2 Điện thoại di động Text Hiển thị trang điện

Bảng 3.1: Mô tả chức năng trang chủ

b) Hiển thị trên Mobile

3.2 Giao Diện Trang Điện Thoại Di Động

a) Hiển Thị Đầy Đủ

Hình 3.2.1

Các phần header và footer không khác gì trang chủ, ở phần content là danh sách các điện

b) Hiển Thị Trên Mobile

Hình 3.2.2

3.3 Giao diện trang máy tính bảng

a) Hiển Thị Đầy Đủ

Hình 3.3.1

b) Hiển Thị Trên Mobile

Hình 3.3.2

3.4 Giao diện trang máy tính xách tay

a) Hiển Thị Đầy Đủ

Hình 3.4.1

b) Hiển Thị Trên Mobile

Hình 3.4.2

3.5 Giao diện trang phụ kiện

a) Hiển Thị Đầy Đủ

Hình 3.5.1

b) Hiển Thị Trên Mobile

Hình 3.5.2

3.6 Giao diện trang chi tiết sản phẩm

a) Hiển Thị Đầy Đủ

b) Hiển Thị Trên Mobile

Hình 3.6.2

3.7 Giao diện trang đăng nhập

a) Hiển Thị Đầy Đủ

Hình 3.7.1

b) Hiển Thị Trên Mobile

Hình 3.7.2

3.8 Giao diện trang thông tin cá nhân

a) Hiển Thị Đầy Đủ

Hình 3.8.1

b) Hiển Thị Trên Mobile

Hình 3.8.2

3.9 Giao diện trang đặt hàng

a) Hiển Thị Đầy Đủ

Hình 3.9.1

b) Hiển Thị Trên Mobile

Hình 3.9.2

3.10 Giao diện trang lịch sử mua hàng

a) Hiển Thị Đầy Đủ

Hình 3.10.1

b) Hiển Thị Trên Mobile

Hình 3.10.2

CHƯƠNG 4 XÂY DỰNG CƠ SỞ DỮ LIỆU 4.1 Các Bảng Dữ Liệu

Bảng 4.1.1 tbl_product

Bảng 4.1.2 tbl_product_category

Bảng 4.1.3 tbl_review

Bảng 4.1.4 tbl_special_offer

4.2 Mô tả từng bảng dữ liệu

Bảng tbl_user

1 user_id int(11) Khóa chính Mỗi user đăng

5 user_address varchar(300) Địa chỉ người

dùng

Bảng tbl_product

1 product_id int(11) Khóa chính Mã sản phẩm

4 category_id int(11) Khóa ngoại Mã loại sản

9 product_maintenance varchar(50) Thời gian bảo

hành

10 product_preview varchar(500) Hình ảnh chi

tiết sản phẩm

Bảng tbl_product_category

1 category_id int(11) Khóa chính Mã loại sản

1 product_id int(11) Khóa chính Mã sản phẩm

phẩm

Bảng tbl_special_offer

1 special_offer_id int(11) Khóa chính Mã ưu đãi

2 special_offer_name varchar(200) Tên ưu đãi

3 special_offer_img varchar(500) Hình ưu đãi

4 special_offer_details varchar(20000) Thông tin chi

tiết ưu đải

Bảng tbl_spec

1 product_id int(11) Khóa chính,

Bảng tbl_cart

1 user_id int(11) Khóa chính Mã người dùng

2 product_id int(11) Khóa chính,

1 order_id int(11) Khóa chính Mã đơn đặt

hàng

2 user_id int(11) Khóa ngoại Mã người dùng

hàng

Bảng tbl_order_details

1 order_id int(11) Khóa chính Mã đơn đặt

4.2 Một Số Truy Vấn

a) Đăng nhập tài khoản

Phân tích: hệ thống truy cập vào database để xác nhận tài khoản và mật khẩu

Truy vấn SQL:

Hình 4.2.1

b) Đăng ký tài khoản

Phân tích: Hệ thống ghi nhận các thông tin từ người dùng nhập vào và lưu vào database Truy vấn SQL:

Hình 4.2.2

c) Cập nhật thông tin người dùng

Phân tích: Lấy thông tin người dùng nhập vào và cập nhật vào database

Truy vấn SQL:

d) Thêm sản phẩm vào giỏ hàng

Phân tích: Hệ thống căn cứ vào id sản phẩm và thêm sản phẩm vào giỏ hàng

Truy vấn SQL:

g) Lọc sản phẩm

Phân tích: Hệ thống tiến hành lọc sản phẩm theo yêu cầu của người dùng và hiển thị lên giao diện

Truy vấn SQL:

4.3 Sơ Đồ Quan Hệ

Hình 4.3.1

CHƯƠNG 5 XÂY DỰNG TRANG WEB

5.1 Cấu Trúc Trang Web

Cấu trúc của trang web gồm 3 phần:

 Header: Gồm các URL đến các trang: đăng ký, đăng nhập, điện thoại, máy tính bảng, laptop, phụ kiện, giỏ hàng

 Body: Gồm nội dung của trang web

 Footer: Gồm thông tin về website như là địa chỉ cửa hàng, thông tin liên hệ, các liên kết đến fanpage cửa hàng: Facebook, Youtube, Twitter

Trang web được xây dựng theo mô hình MVC (Models – Views – Controllers)

Hình 5.1.2

Models: nơi chứa tất cả database của trang web

Hình 5.1.3

Views: Chứa giao diện của hệ thống

Hình 5.1.4

Controllers: Điều hướng

Hình 5.1.5

5.2 Kết Nối Cơ Sở Dữ Liệu

Config.php

Hình 5.2.1

db_module.php

Hình 5.2.3

5.3 Xây Dựng Nội Dung Các Trang

- Tài khoản cá nhân

- Trang hiển thị các sản phẩm của công ty

- Truy cập xem chi tiết các sản phẩm nổi bật

Hình 5.3.2

b) Trang đăng nhập (login.php)

Phân tích: Hiển thị form cho người dùng đăng nhập, nếu người dùng chưa có tài khoản thì bấm đăng ký

Hình 5.3.3

user_controller.php

Hình 5.3.4

User_models.php

c) Trang người dùng (user_profile.php)

user_profile.php

Hình 5.3.6

User_invoke.php

Hình 5.3.7

User_controller.php

Hình 5.3.8

d) Trang Chi Tiết Sản Phẩm (details.php)

Phân tích:

Với trang chi tiết sản phẩm người dùng có thể:

- xem các thông tin thông số của sản phẩm đó và mô tả chi tiết trải nghiệm của sản phẩm

và các hình ảnh minh họa thêm cho sản phẩm

- Thêm sản phẩm vào giỏ hàng để mua hàng

e) Trang Giỏ Hàng (cart.php)

Phân tích: Hiển thị các sản phẩm trong giỏ hàng

cart.php

Hình 3.3.12

Cart_controller.php

filter_controller.php

Nhận các thông số sản phẩm từ trang phone_category.php và truy cập vào trang filter_model.php để lấy dữ liệu các sản phẩm và truy cập vào trang phone_category_view.php để hiển thị sản phẩm

Hình 3.3.17

filter_controller.php

Nhận các thông số sản phẩm từ trang tablet_category.php và truy cập vào trang filter_model.php để lấy dữ liệu các sản phẩm và truy cập vào trang tablet_category_view.php để hiển thị sản phẩm

Hình 3.3.18

i) Trang máy tính xách tay (laptop_category.php)

Hình 3.3.21

filter_controller.php

Nhận các thông số sản phẩm từ trang laptop_category.php và truy cập vào trang filter_model.php để lấy dữ liệu các sản phẩm và truy cập vào trang accessories_category_view.php để hiển thị sản phẩm

order_controller.php

Hình 3.3.24

CHƯƠNG 6 QUY TRÌNH THỰC THI 6.1 Quy đăng ký tài khoản

B1: Ở phần header bấm vào tài khoản

B2: Chọn đăng ký

B3: Nhập các thông tin cần thiết

B4: Bấm button “đăng ký”

6.2 Quy trình đăng nhập tài khoản

B1: Ở phần header bấm vào tài khoản

B2: Chọn đăng nhập

B3: Nhập số điện thoại và mật khẩu

B4: Click button “đăng nhập”

6.3 Quy trình thêm sản phẩm vào giỏ hàng

6.5 Quy trình xem lịch sử mua hàng

B1: Ở header, chọn tài khoản

B2: Bấm vào lịch sử mua hàng

PHỤ LỤC LINK GITHUB

https://github.com/31191023111/Nhom1_MobilePlanet

HUỚNG DẪN CÀI ĐẶT TRANG WEB:

B1: Tải FileZilla và mở lên cài đặt

B2: Mở XAMPP và bật apache và MySQL

B3: Vào link http://125.234.104.133/phpmyadmin và đăng nhập bằng thông tin tài khoản

đã cung cấp

B4: Vào datase có tên webgr01 và mport database webgr01

B5: Thay đổi địa chỉ trong file config.php

B6: Fake ip

B7: Mở filezilla và nhập host, username, password

B8: Chọn tất cả các file trong bài code và upload

BẢNG PHÂN CÔNG CÔNG VIỆC

Đặng Công Bình Thiết kế mô hình mvc OOP, thiết kế

Database,backend trang giỏ hàng, lịch sử mua hàng, frontend trang chi tiết sản phẩm Huỳnh Nhật Hào Backend trang chủ, trang chi tiết sản phẩm,

chi tiết ưu đãi, trang điện thoại, máy tính bảng, phụ kiện, laptop

Châu Hoàng Khiêm Frontend trang chủ, backend trang tìm

kiếm,vẽ các diagram, làm bản báo cáo word, up code lên server

Nguyễn Quốc Anh Frontend & Backend trang đăng nhập, đăng

ký, trang thông tin người dùng Trần Thị Kim Chi Frontend trang điện thoại, trang máy tính

bảng, trang phụ kiện, trang máy tính xách tay

TÀI LIỆU THAM KHẢO

Tìm hiểu Thương mại điện tử là gì? Học những gì? – uef.edu.vn

Thương mại điện tử tiếp tục bùng nổ, vượt xa mốc 11,8 tỷ USD năm 2020 – vneconomy.vn HTML: HyperText Markup Language – developer.mozilla.org

CSS: Cascading Style Sheets – developer.mozilla.org

JavaScript – developer.mozilla.org

jQuery – developer.mozilla.org

Bootstrap – developer.mozilla.org

PHP – developer.mozilla.org