Bài tập lớn môn phát triển ứng dụng web (Có code)

Ngày nay với sự phát triển không ngừng của các ngành khoa học kỹ thuật CNTT cũng không nằm ngoài vòng xoáy phát triển đó. Cùng với sự phát triển mạnh mẽ của các ngành khoa học kỹ thuật khác. CNTT đã có những ứng dụng to lớn trong hầu hết các lĩnh vực của đời sống. Đây là môt ngành khoa học mũi nhọn ảnh hưởng trực tiếp đến đời sống xã hội.Trong bất cứ lĩnh vực nào, thương mại điện tử cũng có lợi thế. Nó không chỉ làm giảm thời gian mà còn làm giảm chi phí cho mọi vấn đề giao dịch của con người. Việc kinh doanh qua mạng không chỉ đáp ứng nhu cầu của con người mà còn giúp cho người sử dụng so sánh giá ở nhiều nơi để mua những mặt hàng tốt, giá hợp lý. Với những kiến thức đã học và thời gian thực tế, chúng em xin lựa chọn đề tài: “Xây dựng trang web bán thiết bị chơi game cho PC” trong khuôn khổ bài tập lớn môn phát triển ứng dụng web.

TRẦN TRỌNG TRƯỜNG (1421050221) (C) NGUYỄN THẾ QUANG (1421050157)

ĐỖ ĐÌNH NHƯỢNG (1421050149)

WEBSITE BÁN THIẾT BỊ CHƠI GAME CHO PC, LAP TOP

BÀI TẬP LỚN MÔN: PHÁT TRIỂN ỨNG DỤNG WEB + BTL 4080106

Giáo viên hướng dẫn:

Ths Hoàng Anh Đức

Hà Nội, 2018

Lớp Tin trắc địa k59

MỤC LỤC

MỤC LỤC I DANH MỤC CÁC HÌNH VẼ III DANH MỤC CÁC BẢNG BIỂU III

MỞ ĐẦU 1

CHƯƠNG 1 TỔNG QUAN 2

1.1 Mục tiêu hệ thống 2

1.1.1 Đối với khách hàng 2

1.1.2 Đối với người quản trị 2

1.2 Phạm vi hệ thống 3

CHƯƠNG 2 : CẤU TRÚC WEBSITE 4

2.1 Phía người quản trị ( backend ) 4

2.2 Phía người dùng (frontend) 4

CHƯƠNG 3 : ĐẶC TẢ CHỨC NĂNG 5

3.1 Mô hình phân rã chức năng 5

3.2 Các chức năng của website 6

3.2.1 Đối với khách vãng lai 6

3.2.2 Đối với người dùng có tài khoản 6

3.2.3 Đối với admin 6

CHƯƠNG 4 : THIẾT KẾ DỮ LIỆU 7

4.1 Bảng user 7

4.2 Bảng product 7

4.3 Bảng category 8

4.4 Bảng orders 8

4.5 Bảng order_detail 9

4.6 Sơ đồ quan hệ giữa các bảng trong Database 9

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

5.1 Frontend 11

5.1.1 From Đăng nhập 11

5.1.2 Trang index 12

Lớp Tin trắc địa k59

5.1.3 Trang chi tiết sản phẩm 13

5.1.4 Trang giỏ hàng 13

5.1.5 Trang thanh toán 14

5.1.6 Trang giới thiệu 15

5.1.7 Trang liên hệ 15

5.2 Backend 16

5.2.1 Trang đăng nhập 16

5.2.2 Trang quản trị 16

5.2.3 Các trang quản lý 17

5.2.4 Các trang thêm 19

5.2.5 Trang chi tiết đơn hàng 20

CHƯƠNG 6 : KẾT LUẬN 21

PHỤ LỤC 23

Lớp Tin trắc địa k59

DANH MỤC CÁC HÌNH VẼ

Hình 3.1: Mô hình phân rã chức năng phía backend 5

Hình 3.2: Mô hình phân rã chức năng phí fronend 5

Hình 4.1: Sơ đồ quan hệ 9

Hình 5.1: Giao diện đăng nhập 11

Hình 5.2: Trang index 12

Hình 5.3: Trang chi tiết sản phẩm 13

Hình 5.4: Trang giỏ hàng 14

Hình 5.5: Trang thanh toán 14

Hình 5.6: Trang giới thiệu 15

Hình 5.7: Trang liên hệ 15

Hình 5.8: Trang đăng nhập admin 16

Hình 5.9: Trang quản trị 16

Hình 5.10: Giao diện quản lý danh mục 17

Hình 5.11: Giao diện quản lý sản phẩm 17

Hình 5.12: Giao diện quản lý người dùng 18

Hình 5.13: Giao diện quản lý đơn hàng 18

Hình 5.14: Thêm danh mục 19

Hình 5.15: Thêm sản phẩm 19

Hình 5.16: Giao diện chi tiết đơn hàng 20

DANH MỤC CÁC BẢNG BIỂU Bảng 1.1: Bảng phạm vi hệ thống 3

Bảng 4.1: Bảng user 7

Bảng 4.2: Bảng product 7

Bảng 4.3: Bảng category 8

Bảng 4.4: Bảng order 8

Lớp: Tin Trắc Địa k59

Bảng 4.5: Bảng order_detail 9

Lớp: Tin Trắc Địa k59

MỞ ĐẦU

Ngày nay với sự phát triển không ngừng của các ngành khoa học kỹ

thuật CNTT cũng không nằm ngoài vòng xoáy phát triển đó Cùng với sự phát triển mạnh mẽ của các ngành khoa học kỹ thuật khác CNTT đã có những ứng dụng to lớn trong hầu hết các lĩnh vực của đời sống Đây là môt ngành khoa học mũi nhọn ảnh hưởng trực tiếp đến đời sống xã hội.

Trong bất cứ lĩnh vực nào, thương mại điện tử cũng có lợi thế Nó không chỉ làm giảm thời gian mà còn làm giảm chi phí cho mọi vấn đề giao dịch của con người Việc kinh doanh qua mạng không chỉ đáp ứng nhu cầu của con người mà còn giúp cho người sử dụng so sánh giá ở nhiều nơi để mua những mặt hàng tốt, giá hợp lý Với những kiến thức đã học và thời gian thực tế, chúng em xin lựa chọn đề tài: “Xây dựng trang web bán thiết bị chơi game cho PC” trong khuôn khổ bài tập lớn môn phát triển ứng dụng web.

Đây là ứng dụng thực tế khá hay, tuy không phải là mới nhưng do kinh nghiệm của chúng em chưa nhiều và còn nhiều hạn chế cũng như sai sót mong thầy và các bạn đóng góp ý kiến để đề tài được hoàn thiện hơn.

 Website cung cấp nguồn thông tin về sản phẩm rõ nguồn gốc, xuất sứ Đảmbảo chất lượng tất cả các mặt hàng.

 Chức năng tìm kiếm sản phẩm cũng giúp khách hàng có lựa chọn thuận tiện,nhanh chóng để mua được sản phẩm mình cần nhanh nhất

1.1.2 Đối với người quản trị

 Có thể dễ dàng cập nhật những sản phẩm hot, bán chạy nhất theo xu hướng khách hàng.

 Dễ dàng quản lý sản phẩm, danh mục sản phẩm

 Dễ dàng tìm kiếm được thông tin khách hàng, thông tin sản phẩm.

 Cập nhật được trạng thái đơn hàng.

 Tạo báo cáo thống kê, đưa ra danh sách các mặt hàng bán chạy.

 Phải có cơ chế đăng nhập để xác định người có quyền hạn mới có thể đăng nhập vào hệ thống quản trị của website.

 Quản lý, cập nhật trạng thái được danh sách tài khoản khách hàng.

 Có thể phân quyền người dùng

1.2 Phạm vi hệ thống

1 Thành viên Thực hiện xem hàng, mua hàng, xem danh sách

yêu thích, lịch sử giao dịch

3 Khách vãng lai Xem sản phẩm, đăng ký

Bảng 1.1: Bảng phạm vi hệ thống

CHƯƠNG 2: CẤU TRÚC WEBSITE

Website được chia làm 2 phần một phía Trang người dùng ( frontend ), phíangười quản trị (backend)

2.1 Phía người quản trị ( backend )

Gồm các thứ mục:

 Connect: chứa file kết nối csdl

 Category : chưa các file php của chức năng quản lý danh mục

 Product: chưa các file php của chức năng quản lý quản lý sản phẩm

 Order: chưa các file php của chức năng quản lý quản lý quản lý đơnhàng

 Public: Chứa các file css, boostrap, js, image

 Upload: chứa các ảnh sản phẩm được upload

 Index.php, footer,php, header.php hiển thị giao diện phần backend

 Login.php, logout.php chức năng đăng nhập, đăng xuất phía backend

2.2 Phía người dùng (frontend)

 Connect: chứa file kết nối csdl

 Public: Chứa các file css, boostrap, js, image

 Index.php, footer,php, header.php hiển thị giao diện phần fronend

 Login.php, logout.php chức năng đăng nhập, đăng xuất phía fronend

 Sigup.php chức năng đăng ký

CHƯƠNG 3: ĐẶC TẢ CHỨC NĂNG3.1 Mô hình phân rã chức năng

Hình 3.1: Mô hình phân rã chức năng phía backend

Hình 3.2: Mô hình phân rã chức năng phí fronend

3.2 Các chức năng của website

3.2.1 Đối với khách vãng lai

 Xem thông tin sản phẩm

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

 Thêm sản phẩm vào giỏ

 Đăng ký tài khoản

3.2.2 Đối với người dùng có tài khoản

 Xem thông tin sản phẩm

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

 Xem thông tin đơn hàng

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

 Thanh toán

 Đăng nhập, đăng xuất

3.2.3 Đối với admin

 Đăng nhập, đăng xuất trong phẩn quản trị

CHƯƠNG 4: THIẾT KẾ DỮ LIỆU

4.1 Bảng user

STT Tên trường Kiểu dữ liệu Độ rộng Ràng buộc Mô tả

2 u_fullname Varchar 150 Not null Họ tên người dựng

Bảng 4.2: Bảng user

GHI CHÚ:

- Username chính là tài khoản đăng ký của người dùng

- Password phải lớn hơn hoặc bẳng 6 ký tự

- Email phụ dùng để liên hệ khi có sự cố với tài khoản

- User với Level = 1 là Admin, Level = 0 là User thông thường

4.2 Bảng product

STT Tên Trường Kiểu Dữ Liệu Độ Rộng Rằng Buộc Mô tả

3 cat_id int 11 Foreign key Khóa ngoại liên kết đếnbảng Category

Bảng 4.3: Bảng product

GHI CHÚ:

- status lv = 1 là còn hàng, lv = 0 là hết hàng

- hot lv = 1 là hàng hot, lv = 0 là hàng bình thường

4.3 Bảng category

STT Tên Trường Kiểu Dữ Liệu Độ Rộng Rằng Buộc Mô tả

2 cat_name varchar 150 Not null Tên danh mục

Bảng 4.4: Bảng category

GHI CHÚ:

- parent_id khóa ngoại

4.4 Bảng orders

STT Tên Trường Kiểu Dữ Liệu Độ Rộng Ràng Buộc Mô tả

3 Shipping_name varchar 255 Not Null

5 Shipping_adress varchar 255 Not Null

6 Shipping_method varchar 255 Not Null Phương thứcchuyển hàng

7 Payment_method varchar 255 Not Null Phương thứcthanh toán

Bảng 4.5: Bảng order

GHI CHÚ:

- User_id là khóa ngoại liên kết đến bảng user để lấy thông tin của khách hàng khi đặt hang

- Shipping_name, Shipping_phone, Shipping_adress là các thông tin để chuyển đơn hang.

- status lv = 1 đơn hang chờ xác nhận, lv = 0 đơn hàng được xác nhận

4.5 Bảng order_detail

STT Tên Trường Kiểu Dữ Liệu Độ Rộng Rằng Buộc Mô tả

1 order_id int 11 Primary key Khóa ngoại liên kết vớibảng orders

2 product_id int 11 Foreign key Khóa ngoại liên kếtđến bảng product

Bảng 4.6: Bảng order_detail

GHI CHÚ:

- Bảng order_detail là để xem thông tin chi tiết đơn hàng

4.6 Sơ đồ quan hệ giữa các bảng trong Database

Hình 4.3: Sơ đồ quan hệ

CHÚ THÍCH:

- Quan hệ giữa các thực tế từ users - orders, orders – order_detail,

order_detail – product, category-product đều là quan hệ 1-n

- Khi người dung đăng nhập vào hệ thống mà muốn đặt hàng thì thông tin của user sẽ được chuyển vào trong bnarg orders và id của orders vừa tạo và thông tin sản phẩm sẽ được đẩy vào bảng order_detail

CHƯƠNG 5: THIẾT KẾ GIAO DIỆN

5.1 Frontend

5.1.1 From Đăng nhập

Hình 5.4: Giao diện đăng nhập

5.1.2 Trang index

Hình 5.5: Trang index

5.1.3 Trang chi tiết sản phẩm

Hình 5.6: Trang chi tiết sản phẩm

5.1.4 Trang giỏ hàng

Hình 5.7: Trang giỏ hàng

5.1.5 Trang thanh toán

Hình 5.8: Trang thanh toán

5.1.6 Trang giới thiệu

Hình 5.9: Trang giới thiệu

5.1.7 Trang liên hệ

Hình 5.10: Trang liên hệ

5.2.3 Các trang quản lý

Hình 5.13: Giao diện quản lý danh mục

Hình 5.14: Giao diện quản lý sản phẩm

Hình 5 15 : Giao diện quản lý người dùng

Hình 5.16: Giao diện quản lý đơn hàng

5.2.4 Các trang thêm

Hình 5.17: Thêm danh mục

Hình 5.18: Thêm sản phẩm

5.2.5 Trang chi tiết đơn hàng

Hình 5.19: Giao diện chi tiết đơn hàng

CHƯƠNG 6: KẾT LUẬN

Sau quá trình tham khảo và tìm hiểu một số web thương mại điện tử, tim hiểu như cầu của thị trường, nhóm em đã thiết kế và tạo ra “ Website bán thiết

bị chơi game cho PC “

Do lượng thời gian không đủ và kiến thức còn eo hẹp nên trang web còn thiếu nhiều chức năng, nhóm em rất mong thầy có thêm góp ý để bọn em trau dồi thêm hiểu biết cho bản thân và hoàn thiện trang web này được đầy đủ chính xác hơn nữa.

Em xin chân thành cảm ơn!

TÀI LIỆU THAM KHẢO

[1] H A Đức, Phát triển ứng dụng web, Hanoi: Tự biên tập, 2015.[2] "Playzone," [Online] Available: https://www.playzone.vn/

PHỤ LỤC

Phân công công việc

Trần Trọng Trường Backend, fronend Thiết kế giao diện, code chứcnăng backend và frondend

Nguyễn Thế Quang fronend Thiết kế giao diện người dùng

Đỗ Đình Nhượng backend Thiết kế giao diện trang quản trị