XÂY DỰNG TRANG WEB

Một phần của tài liệu ĐỒ án môn học đề tài xây DỰNG WEBSITE KINH DOANH THIẾT bị DI ĐỘNG (Trang 43)

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

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

Controllers: Điều hướng

Hình 5.1.5

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

Config.php

db_module.php

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

a) Trang Chủ

(index.php) Phân Tích:

Trang chủ hiển thị các gợi ý để xem các sản phẩm và các gói ưu đãi của cơng ty cùng với các sản phẩm nổi bật

Ngồi ra cịn có thể truy cập vào:

- Tìm kiếm sản phẩm

- Giỏ hàng

- 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

index.php

Hình 5.3.1

index_controller.php

Truy cập vào trang index_model để lấy dữ liệu các chương trình ưu đãi và các sản phẩm nổi bật sau đó truy cập vào trang special_offerlist.php để hiển thị các hình ảnh quảng cáo trang special_offer.php để xem thơng tin chi tiết về chương trình quảng cáo và trang product_highlighted.php để hiển thị 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ý

login.php

user_controller.php

Hình 5.3.4

c) Trang người dùng

(user_profile.php) user_profile.php

Hình 5.3.6

User_invoke.php

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 Cách xây dựng

- Hiển thị sản phẩm: Khi nhấn vào ảnh minh họa sản phẩm hệ thống sẽ dẫn đến trang chi tiết sản phẩm.

detail.php

detail_controller.php

Nhận ID sản phẩm từ trang detail.php và truy cập vào model_detail.php để lấy dữ liệu sản phẩm vào vào trang detail_view để hiển thị sản phẩm

Hình 3.3.10

detail_model.php

Truy vấn thơng tin sản phẩm từ cơ sở dữ liệu

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_item.model.php

Hình 3.3.14

g) Trang điện thoại

(phone_category.php) Phân tích:

Với trang Điện thoại di động người dùng có thể xem tất cả sản phẩm và chọn lọc sản phẩm theo nhu cầu.

Cách xây dựng

phone_category.php

- Hiển thị toàn bộ sản phẩm và nếu có các thơng số chọn lọc và người dùng nhấn nút áp dụng sẽ hiển thị các sản phẩm theo các thông số đã chọn

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

h) Trang máy tính bảng

(tablet_category.php) Phân tích:

Với trang Máy tính bảng người dùng có thể xem tất cả sản phẩm và chọn lọc sản phẩm theo nhu cầu.

Cách xây dựng

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

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

Với trang Máy tính xách tay người dùng có thể xem tất cả sản phẩm và chọn lọc sản phẩm theo nhu cầu.

Cách xây dựng

laptop_category.php

- Hiển thị toàn bộ sản phẩm và nếu có các thơng số chọn lọc và người dùng nhấn nút áp dụng sẽ hiển thị các sản phẩm theo các thơng số đã chọn

Hình 3.3.19

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 laptop_category_view.php để hiển thị sản phẩm

Hình 3.3.20

k) Trang phụ kiện

(accessories_category.php) Phân tích:

Với trang Phụ kiện gười dùng có thể xem tất cả sản phẩm và chọn lọc sản phẩm theo nhu cầu.

Cách xây dựng

accessories_category.php

- Hiển thị toàn bộ sản phẩm và nếu có các thơng số chọn lọc và người dùng nhấn nút áp dụng sẽ hiển thị các sản phẩm theo các thơng số đã chọn

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

Hình 3.3.22

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

Phân tích:

order.php

order_controller.php

CHƯƠNG 6. QUY TRÌNH THỰC THI6.1. Quy đăng ký tài khoản 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

B1: Chọn sản phẩm muốn mua

B2: Bấm vào button “thêm vào giỏ hàng”

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

B1: Ở header, bấm vào giỏ hàng B2: Bấm vào button “đặt 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 Thành Viên

Đặng Cơng Bình Huỳnh Nhật Hào Châu Hồng Khiêm Nguyễn Quốc Anh Trần Thị Kim Chi

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

Một phần của tài liệu ĐỒ án môn học đề tài xây DỰNG WEBSITE KINH DOANH THIẾT bị DI ĐỘNG (Trang 43)

Tải bản đầy đủ (DOCX)

(65 trang)
w