Báo cáo chuyên đề học phần lập trình web nâng cao đề ti xây dựng website bán máy tính v laptop threetech

Biểu đồ hoạt động chức năng đăng xuất 2.3.3.2 Biểu đồ hoạt động chức năng quản lý giỏ hàng Đặc tả chức năng: Bước 1: Khách hàng đã đăng nhập trang web Bước 2: Khách hàng chọn giỏ hàng Bư

Trang 1

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN

LẬP TRÌNH WEB NÂNG CAO

Giảng viên hướng dẫn : CẤN DỨC ĐIỆP

Hà Nội, tháng 12 năm 2022

Trang 3

MỤC LỤC

LỜI MỞ ĐẦU 1

PHẦN I: MỤC TIÊU ĐỀ TÀI 1

PHẦN II: PHÂN TÍCH BÀI TOÁN 2

2.1 Bài toán đặt ra 2

2.2 Sơ đồ chức năng 3

2.2.1 Tổng quát các chức năng của hệ thống 3

2.2.2 Biểu đồ Use case toàn hệ thống 3

2.2.3 Mô tả chức năng 4

2.3 Phân tích chức năng nghiệp vụ 4

2.3.1 Biểu đồ chức năng của Sản phẩm 5

2.3.2 Biểu đồ chức năng của Tin tức 8

2.3.3 Biểu đồ chức năng của Khách hàng 10

2.3.4 Biểu đồ chức năng của Quản lý 23

2.4 Thiết kế Cơ sở dữ liệu 34

2.4.1 Bảng sản phẩm (sanpham) 35

2.4.2 Bảng nhân viên (nhanvien) 35

2.4.3 Bảng khách hàng (khachhang) 36

2.4.4 Bảng tin tức (tintuc) 36

2.4.5 Bảng giỏ hàng (giohang) 36

2.4.6 Bảng đặt hàng (dathang) 37

2.4.7 Bảng chuyên mục (chuyenmuc) 37

2.4.8 Bảng thanh toán (vnpay) 37

2.4.9 Bảng chi tiết hóa đơn (chitiethoadon) 37

Trang 4

2.4.10 Bảng chấm công (chamcong) 38

2.4.11 Bảng liên hệ (lienhe) 38

PHẦN III: GIẢI PHÁP VÀ CÀI ĐẶT 39

3.1 Giải pháp công nghệ lựa chọn 39

3.2 Giao diện website 39

3.2.1 Các giao diện liên quan đến “Sản phẩm” 39

3.2.2 Các giao diện liên quan đến “Tin tức” 41

3.2.3 Các giao diện liên quan đến “Khách hàng” 42

3.2.4 Các giao diện liên quan đến “Quản trị admin” 46

PHẦN IV: TỔNG KẾT 52

TÀI LIỆU THAM KHẢO 53

Trang 5

LỜI MỞ ĐẦU

Trong gần một thập kỷ trở lại đây, con người đã và đang sử dụng nhiềuhơn các thiết bị điện tử công nghệ nhằm phục vụ cho nhu cầu làm việc, giải trí,liên lạc… Các thiết bị điện tử có mặt ở khắp mọi nơi, mọi nhà, và sử dụng trongmọi lĩnh vực: Những thiết bị điện tử có công dụng làm tăng năng suất và hiệuquả làm việc Từ đó đẩy nhanh quá trình sản xuất, đảm bảo đồng bộ chất lượngsản phẩm Với các thiết bị điện tử gia đình còn đóng vai trò giúp nâng cao chấtlượng cuộc sống Giúp con người tiết kiệm thời gian và công sức cho các côngviệc nhà Có thể nói, nhờ thiết bị điện tử mà xã hội ngày càng phát triển hơn.Việc mua một thiết bị điện tử công nghệ để phục vụ cho nhu cầu bản thânhay tổ chức ngày nay lại càng trở nên đơn giản hơn với nhiều hình thức muabán, trao đổi và thanh toán Trong đó, phải kể đến một trong những hình thứcmua hàng mới nổi đó là việc mua một sản phẩm và thanh toán trực tuyến trênInternet!

Nắm bắt được nhu cầu cần thiết của khách hàng, chúng em đã thực hiện

xây dựng một “WEBSITE BÁN MÁY TÍNH V LAPTOP THREETECH”

sử dụng ngôn ngữ lập trình chính là PHP nhằm tạo ra một trang web phục vụnhu cầu mua sắm trực tuyến của khách hàng, giúp khách hàng có thể lựa chọnmua sắm một cách đơn giản và nhanh chóng nhất Đồng thời, website này cũngchính là đồ án môn học Lập trình web nâng cao mà em đang thực hiện!Trong quá trình thực hiện đồ án, chúng em đã được sự hướng dẫn và hỗtrợ nhiệt tình của giảng viên tuy nhiên, thời gian làm đồ án có hạn và sự hạn chế

về kiến thức của bản thân em còn nhiều thiếu sót, mong thầy cô bỏ qua và bổsung thêm để đề tài được hoàn thiện hơn

Chúng em xin cảm ơn thầy cô!

Trang 6

- Tìm hiểu các kỹ thuật lập trình web

- Tìm hiểu và xây dựng các chức năng của 1 website bán hàng trực tuyến

- Tìm hiểu cách triển khai các đoạn mã thành một website hoàn chỉnh giúp tất

cả mọi người có thể truy cập

- Phân tích và thiết kế ra website bán hàng với các giao diện đẹp đẽ

- Trợ giúp các cửa hàng có thể tiếp cận khách hàng và bán hàng trực tuyến trêninternet

- Trợ giúp các cửa hàng có thể quản lý các sản phẩm một cách dễ dàng thaycho việc quản lý thủ công trên sách giấy

Với những mục tiêu và ý tưởng nêu trên, chúng em mong rằng đề tài này sẽđược sử ủng hộ của thầy cô và có thể áp dụng đề tài này trong thực tiễn Ngoài

ra, chúng em mong muốn nhận được thêm ý kiến đóng góp của thầy cô để chúng

em có thể hoàn thiện đề tài một cách chuẩn chu nhất!

Chúng em xin cảm ơn!

Trang 7

PHẦN II: PHÂN TÍCH BI TOÁN

2.1 Bài toán đặt ra

Tại một cửa hàng bán các sản phẩm là máy tính laptop, máy tính bàn vàlinh kiện điển tử có nhu cầu thiết kế một website nhằm mục đích quản lý các sảnphẩm và thu hút khách hàng một cách trực tuyến Website này cần phải đáp ứngđược cho 2 thành phần tham gia chính:

Dành cho khách hàng: Khách hàng là người có nhu cầu mua sắm hàng

hoá, họ sẽ tìm kiếm các mặt hàng cần thiết từ hệ thống và đặt mua các mặt hàngnày Vì vậy cần có những chức năng sau:

- Đăng nhập/đăng ký/đăng xuất

- Đổi mật khẩu

- Thêm/sửa/xoá sản phẩm ở giỏ hàng

- Đặt hàng

- Thanh toán

- Chỉnh sửa thông tin cá nhân

- Liên hệ với cửa hàng

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

Dành cho admin: Người quản lý có quyền kiểm soát hoạt động của hệ

thống Người này được cung cấp tên người dùng và mật khẩu để đăng nhập hệthống thực hiện các chức năng của mình:

- Quản lý thông tin cá nhân

- Cài đặt tài khoản

- Quản lý sản phẩm

- Quản lý nhân viên

- Quản lý tin tức

Trang 9

Hình 2.2.2 Biểu đồ use case toàn hệ thống

2.2.3 Mô tả chức năng

 Truy cập hệ thống: Người dùng có thể đăng ký, đăng nhập, thoát khỏi hệ

thống

 Khách hàng : Khách hàng có thể tương tác giỏ hàng, tìm kiếm sản phẩm, đặt

hàng, thanh toán, liên hệ, cập nhật thông tin cá nhân, đổi mật khẩu, xem lịch

sử đơn hàng

 Quản lý: Quản lý có quyền quản lý thông tin cá nhân, cài đặt tài khoản,

quản lý sản phẩm, quản lý nhân viên, quản lý tin tức, quản lý khách hàng,quản lý đơn hàng, quản lý trả lương

2.3 Phân tích chức năng nghiệp vụ

2.3.1 Biểu đồ chức năng của Sản phẩm

Trang 10

2.3.1.1 Biểu đồ hoạt động chức năng hiển thị sản phẩm

Đặc tả chức năng :

Bước 1: Người dùng truy cập vào website

Bước 2: Hệ thống lấy dữ liệu và hiển thị sản phẩm ra màn hình

Bước 3: Kết thúc

2.3.1.2 Biểu đồ hoạt động chức năng hiển thị chuyên mục

Đặc tả chức năng

Bước 1: Người dùng nhấn vào chuyên mục cần xem

Bước 2: Hệ thống lấy dữ liệu sản phẩm có trong chuyên mục và hiển thị ra màn

hình

Trang 11

2.3.1.3 Biểu đồ hoạt động chức năng tìm kiếm sản phẩm

Bước 1: Người dùng chọn chức năng tìm kiếm sản phẩm

Bước 2: Người dùng nhập tên sản phẩm cần tìm

Bước 3: Hệ thống kiểm tra thông tin sản phẩm

3.1 Nếu không tìm thấy sản phẩm phù hợp, hệ thống không hiển thị sản

phẩm nào

3.2 Nếu tìm thấy sản phẩm phù hợp, hệ thống hiển thị sản phẩm tương

ứng

Trang 12

2.3.1.4 Biểu đồ hoạt động chức năng chi tiết sản phẩm

Bước 1: Người dùng chọn sản phẩm cần xem

Bước 2: Hệ thống kiểm tra thông tin sản phẩm

3.1 Nếu không tìm thấy thông tin sản phẩm, hệ thống hiển thị thông báo

lỗi

3.2 Nếu tìm thấy thông tin sản phẩm, hệ thống hiển thị thông tin chi tiết

sản phẩm

Trang 13

2.3.2 Biểu đồ chức năng của Tin tức

2.3.2.1 Biểu đồ hoạt động chức năng hiển thị tin tức

Bước 1: Người dùng truy cập vào trang tin tức

Bước 2: Hệ thống lấy dữ liệu và hiển thị tin tức ra màn hình

Trang 14

2.3.2.2 Biểu đồ hoạt động chức năng chi tiết tin tức

Bước 1: Người dùng chọn tin tức cần xem

Bước 2: Hệ thống kiểm tra thông tin tin tức

3.1 Nếu không tìm thấy thông tin tin tức, hệ thống hiển thị thông báo lỗi 3.2 Nếu tìm thấy thông tin tin tức, hệ thống hiển thị thông tin chi tiết tin

tức

Trang 15

2.3.3 Biểu đồ chức năng của Khách hàng

2.3.3.1 Biểu đồ hoạt động chức năng đăng nhập, đăng ký, đăng xuất

Đặc tả chức năng:

Bước 1: Khách hàng truy cập vào trang web

Bước 2: Khách hàng chọn chức năng đăng ký

Bước 3: Hệ thống hiển thị màn hình đăng ký

Bước 4: Nhập thông tin đăng ký:

Trang 16

Bước 5: Kiểm tra thông tin:

+ Nếu đúng thông báo đăng ký thành công chuyển qua Bước 6

+Nếu sai thông báo lỗi quay lại Bước 4

Bước 6: Lưu thông tin vào database

Trang 17

Hình 2.3.3.1 Biểu đồ hoạt động chức năng đăng ký

Đặc tả chức năng đăng nhập:

Bước 1: Khách hàng truy cập vào trang web

Bước 2: Khách hàng chọn chức năng đăng nhập

Trang 18

Bước 3: Hệ thống hiển thị màn hình đăng nhập

Bước 4: Nhập thông tin đăng nhập:

+Tài khoản

+Mật khẩu

+ Nếu đúng thông báo đăng nhập thành công chuyển qua Bước 6

Bước 6: Kết thúc.

Trang 19

Hình 2.3.3.2 Biểu đồ hoạt động chức năng đăng nhập

Bước 1: Khách hàng đã đăng nhập vào trang web

Bước 2: Khách hàng chọn chức năng đăng xuất

Bước 3: Hệ thống hiển thị đăng xuất thành công

Trang 20

Hình 2.3.3.3 Biểu đồ hoạt động chức năng đăng xuất

2.3.3.2 Biểu đồ hoạt động chức năng quản lý giỏ hàng

Bước 1: Khách hàng đã đăng nhập trang web

Bước 2: Khách hàng chọn giỏ hàng

Bước 3: Hệ thống hiển thị màn hình giỏ hàng

Bước 4: Chọn sản phẩm muốn chỉnh số lượng

Bước 5: Chọn nhập số lượng sản phẩm mong muốn

+ Nếu đúng thông báo cập nhật thành công chuyển qua Bước 7

Bước 7: Hiển thị lại giỏ hàng

Trang 21

Hình 2.3.3.4 Biểu đồ hoạt động chức năng sửa sản phẩm trong giỏ hàng

Bước 2: Khách hàng chọn giỏ hàng

Bước 3: Hệ thống hiển thị màn hình giỏ hàng

Bước 4: Chọn sản phẩm muốn xóa

Trang 22

+ Nếu đúng thông báo xóa thành công chuyển qua Bước 6

Bước 6: Hiển thị lại giỏ hàng

Hình 2.3.3.5 Biểu đồ hoạt động chức năng xóa sản phẩm trong giỏ hàng

Trang 23

+ Nếu đúng chuyển qua Bước 8

Bước 8: Hiển thị trang thanh toán vnpay

Bước 9: Nhập thông tin thẻ:

+Tài khoản ngân hàng

+Tên người dùng

+Mã otp

…

+ Nếu đúng chuyển qua Bước 11

Bước 11: Thông báo thanh toán thành công trở về trang thanh toán

Trang 25

2.3.3.4 Biểu đồ hoạt động chức năng quản lý thông tin cá nhân

Bước 2: Khách hàng chọn thông tin cá nhân

Bước 3: Hệ thống hiển thị màn hình thông tin của khách hàng

Bước 4: Khách hàng nhập thông tin khách hàng muốn chỉnh sửa:

+Họ và tên

+Số điện thoai

+Địa chỉ

+Mật khẩu

+ Nếu đúng thông báo thành công chuyển qua Bước 6

Bước 6: Hiển thị lại trang thông tin cá nhân

Trang 26

Hình 2.3.3.7 Biểu đồ hoạt động chức năng quản lý thông tin cá nhân

2.3.3.5 Biểu đồ hoạt động chức năng thêm sản phẩm vào giỏ hàng

Bước 2: Khách hàng chọn sản phẩm muốn thêm vào giỏ hàng

Bước 3: Kiểm tra thông sản phẩm:

Trang 27

+Nếu sai thông báo lỗi

Bước 4: Thông báo thêm thành công vào giỏ hàng

Trang 28

Bước 2: Khách hàng chọn thông tin khách hàng

Bước 3: Hiển thị thông tin khách hàng

Bước 4: Khách hàng chọn xem lịch sử mua hàng

Bước 5: Hiển thị lịch sử mua hàng

Hình 2.3.3.9 Biểu đồ hoạt động chức năng quản lý đơn hàng

2.3.4 Biểu đồ chức năng của Quản lý

2.3.4.1 Biểu đồ hoạt động chức năng đăng nhập

Bước 1: Người quản lý truy cập vào trang quản trị

Trang 29

Bước 4: Hệ thống kiểm tra đăng nhập

4.1 Nếu đăng nhập đúng, thì chuyển tới trang đăng nhập

4.2 Nếu đăng nhập sai, thông báo lỗi đăng nhập

2.3.4.2 Biểu đồ hoạt động chức năng quản thông tin admin

Bước 1: Người quản lý đăng nhập vào trang quản trị

Bước 2: Hệ thống hiển thị các chức năng

Bước 3: Quản lý chọn chức năng Quản lý thông tin cá nhân

Bước 4: Hệ thống hiển thị thông tin của người quản lý

Bước 5: Quản lý nhập thông tin và cập nhật

Trang 30

Bước 6: Hệ thống lưu lại thông tin mới vào CSDL

2.3.4.3 Biểu đồ hoạt động chức năng đăng quản lý sản phẩm

Bước 3: Quản lý chọn chức năng Quản lý sản phẩm

Bước 4: Hệ thống hiển thị các chức năng: Thêm, sửa, xóa, tìm kiểm

Trang 31

2.3.4.4 Biểu đồ hoạt động chức năng quản lý nhân viên

Trang 32

Bước 3: Quản lý chọn chức năng Quản lý nhân viên

Bước 4: Hệ thống hiển thị các chức năng: Xuất Excel, thêm, sửa, xóa, tìm kiểm Bước 5: Quản lý chọn chức năng cần sử dụng

Bước 6: Hệ thống thực hiện chức năng và truy xuất lưu lại các thông tin cập

nhật vào trong CSDL

Trang 33

2.3.4.5 Biểu đồ hoạt động chức năng quản lý tin tức

Bước 3: Quản lý chọn chức năng Quản lý tin tức

Trang 34

Bước 4: Hệ thống hiển thị các chức năng: Thêm, sửa, xóa, tìm kiểm

Bước 5: Quản lý chọn chức năng cần sử dụng

Trang 35

2.3.4.6 Biểu đồ hoạt động chức năng quản lý khách hàng

Bước 3: Quản lý chọn chức năng Quản lý khách hàng

Trang 36

Trang 37

Bước 3: Quản lý chọn chức năng Quản lý đơn hàng

Trang 38

2.3.4.8 Biểu đồ hoạt động chức năng quản lý trả lương

Bước 3: Quản lý chọn chức năng Quản lý trả lương

Bước 4: Hệ thống hiển thị các thông tin chấm công của nhân viên

Trang 39

2.3.4.9 Biểu đồ hoạt động chức năng thống kê

Bước 2: Hệ thống truy xuất trong cơ sở dữ liệu

Bước 3: Hệ thống hiển thị ra các thông tin thống kê

2.4 Thiết kế Cơ sở dữ liệu

Trang 40

Cơ sở dữ liệu chính của hệ thống sử dụng hệ quản trị cơ sở dữ liệu:MySQL.

2.4.2 Bảng nhân viên (nhanvien)

Trang 41

2.4.8 Bảng thanh toán (vnpay)

Trang 42

2.4.9 Bảng chi tiết hóa đơn (chitiethoadon)

Trang 43

PHẦN III: GIẢI PHÁP V CI ĐẶT

3.1 Giải pháp công nghệ lựa chọn

- Ngôn ngữ chính: PHP, Javascript

- Hệ quản trị cơ sở dữ liệu: MySQL

- Công cụ hỗ trợ: Visual Studio Code, Xampp, Sublime Text 3

- Máy chủ(local): Xampp

- Môi trường: Apache

- Framework: Codeigniter 3, Jquery, Bootstrap

3.2 Giao diện website

- Giao diện website được xây dựng bởi html, css, và bootstrap

- Các khung layout được thiết kế theo các mẫu giao diện của các trang bán hàngtrên internet

- Giao diện thiết kế một cách đơn giản, dễ sử dụng cho cả người quản lý vàkhách mua hàng

3.2.1 Các giao diện liên quan đến “Sản phẩm”

Hình 3.2.1.1 Giao diện trang chủ

Trang 44

Hình 3.2.1.2 Giao diện trang chi tiết sản phẩm

Hình 3.2.1.3 Giao diện trang chuyên mục sản phẩm

Trang 45

Hình 3.2.1.4 Giao diện trang tìm kiếm sản phẩm

3.2.2 Các giao diện liên quan đến “Tin tức”

Hình 3.2.2.1 Giao diện trang tin tức

Trang 46

Hình 3.2.2.2 Giao diện trang chi tiết tin tức

3.2.3 Các giao diện liên quan đến “Khách hàng”

Hình 3.2.3.1 Giao diện trang đăng ký

Tiêu đề	Xây Dựng Website Bán Máy Tính Và Laptop Threetech
Tác giả	Chu Minh Nam, Trần Ngọc Hà, Phùng Thái Sơn
Người hướng dẫn	Cấn Dức Điệp
Trường học	Trường Đại Học Điện Lực
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Báo Cáo Chuyên Đề Học Phần
Năm xuất bản	2022
Thành phố	Hà Nội

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