Báo cáo môn thiết kế web bằng bootstrap thiết kế trang web bán hàng

TRƯỜNG CAO ĐẲNG CẦN THƠ KHOA KỸ THUẬT CÔNG NGHỆ - MÔI TRƯỜNG BÀI BÁO CÁO MÔN THIẾT KẾ WEB BẰNG BOOTSTRAP THIẾT KẾ TRANG WEB BÁN HÀNG Giảng Viên Hướng Dẫn: Ths.Tần Duy Khánh Sinh Viên Th

TRƯỜNG CAO ĐẲNG CẦN THƠ KHOA KỸ THUẬT CÔNG NGHỆ - MÔI TRƯỜNG

BÀI BÁO CÁO MÔN THIẾT KẾ WEB BẰNG BOOTSTRAP

THIẾT KẾ TRANG WEB BÁN HÀNG

Giảng Viên Hướng Dẫn:

Ths.Tần Duy Khánh

Sinh Viên Thực Hiện:

Nông Tấn Phước MSSV 21C27039 Lớp: Hệ Thống Thông Tin K46 Khoa: Kĩ Thuật Công Nghệ - Môi Trường

TRƯỜNG CAO ĐẲNG CẦN THƠ KHOA KỸ THUẬT CÔNG NGHỆ - MÔI TRƯỜNG

BÀI BÁO CÁO MÔN THIẾT KẾ WEB BẰNG BOOTSTRAP

THIẾT KẾ TRANG WEB BÁN HÀNG

Giảng Viên Hướng Dẫn:

Ths.Tần Duy Khánh

Sinh Viên Thực Hiện:

Nông Tấn Phước MSSV 21C27039 Lớp: Hệ Thống Thông Tin K46 Khoa: Kĩ Thuật Công Nghệ - Môi Trường

Mục Lục

CHƯƠNG 1: TỔNG QUAN 1

1.1 Giới Thiệu 1

1.2 Chủ đề: 1

1.2.1 mô t ả 1

1.3 mục tiêu 1

1.4 yêu cầu 1

CHƯƠNG 2: THIẾT KẾ WEBSITE 2

2.1 Đặt tả trang web: 2

2.1 Các Trang nội dung 2

2.1.1 Trang Chủ 2

2.1.2 Trang Đăng Nhập 2

2.1.3 Trang Đăng ký 2

2.1.4 Trang Thông tin 3

2.1.5 Trang Giỏ hàng 3

2.1.6 Trang thanh toán 3

2.2 Công cụ phát triển 3

2.3 Chương trình chạy demo 3

3.1 Kết Quả Đạt Được 7

3.2 Hạn Chế 7

3.3 Ưu điểm 7

CHƯƠNG 1: TỔNG QUAN

Ngày nay ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong những yếu tố quyết định trong hoạt động đời sống của mỗi con người Cùng với sự phát triển không ngừng về kỹ thuật máy tính và mạng điện tử, website cũng là một phần không thể không thiếu trong đời sống ngày nay Với sự phát triển mạnh mẽ của công nghệ làm xuất hiện các loại hình kinh doanh mới, một trong số đó là kinh doanh website bán hàng online Kinh doanh online đang bùng nổ mạnh mẽ với lượng sử dụng mạng internet cho kinh doanh ngày càng gia tăng Hay sự phát triển của thương mại điện tử Vốn ít, công cụ truyền thông đa dạng và nguồn lợi lớn là những ưu điểm dễ thấy nhất của phương thức kinh doanh online

1.2 Chủ đề:

Website bán các họa cụ, màu ,viết, giấy dùng trong mĩ thuật, hội họa

1.2.1 mô tả.

Một Website chuyên buôn bán các họa cụ dùng trong hội họa, với mục đích giới thiệu cho người dùng các sản phẩm mang chất lượng cao, mang mức giá phải chăng Liên kết của trang web:https://artdraw.000webhostapp.com/trangchu.html

1.3 mục tiêu.

+ Website có bố cục đơn giản dễ dàng tiếp cận, sử dụng,

+ Website cung cấp cho người dùng thông tin cũng như các sản phẩm nổi bật có trên thị trường mà người dùng muốn

+ Người dùng có thể xem thông tin của các sản phẩm và đăng ký thành viên, trở thành thành viên của Website và thanh toán các sản phẩm mà người dùng muốn mua

+ Quản trị viên có thể dễ dàng điều chỉnh, thêm, sữa, xóa

1.4 yêu cầu.

Trang web phải có tối thiểu từ 7 trang trở lên: trang chủ, trang hiển thị sản phẩm, trang chi tiết sản phẩm, trang giỏ hàng, trang thanh toán, trang liên hệ, trang đăng ký thành viên Giao diện phải đồng nhất giữa các trang, có menu, có phần footer thể hiện thông tin của website (địa chỉ, số dt, google map, )

CHƯƠNG 2: THIẾT KẾ WEBSITE

2.1 Đặt tả trang web:

+ Trang chủ gồm:

 Thanh menu

 Carousel

 Nội dung

 sản phẩm

 Footer

+ Trang đăng ký thành viên gồm:

 Form đăng ký

 Nút quay về trang chủ

+Trang đăng nhập gồm:

 Form đăng nhập

 Nút quay về trang chủ

+ Trang giỏ hàng gồm:

 Thanh menu

 Form thông tin sản phẩm

 nút thanh toán

 Footer

+ Trang thanh toán gồm:

 Form thanh toán bằng thẻ

 Nút quay về trang chủ

+ Trang Thông tin gồm:

 Thanh menu

 Carousel

 Mô tả sản phẩm

 Chi tiết sản phẩm

 Footer

 Giới thiệu các sản phẩm khác

2.1 Các Trang nội dung.

2.1.1 Trang Chủ.

Nơi người dùng có thể đăng nhập vào, và là nơi tập trung giới thiệu nội dung của các sản phẩm

2.1.2 Trang Đăng Nhập.

Là nơi người dùng có thể đăng nhập tài khoản của mình

2.1.3 Trang Đăng ký.

Là nơi người dùng có thể đăng ký tài khoản

2.1.4 Trang Thông tin.

2

Là nơi chứa các thông tin của sản phẩm, mô tả.

2.1.5 Trang Giỏ hàng.

Là nơi chứa các sản phẩm người dùng dự kiến mua

2.1.6 Trang thanh toán.

Là Trang người dùng thanh toán các sản phẩm

2.2 Công cụ phát triển.

 Visual studio code

 https://vn.000webhost.com

2.3 Chương trình chạy demo.

Trang Đăng Ký

Trang Đăng Nhập

4

Trang Giỏ Hàng

Trang thanh toán

Trang Thông tin

6

Footer của trang web

CHƯƠNG 3:KẾT QUẢ

3.1 Kết Quả Đạt Được.

+ Vận dụng được những kiến thức đã học áp dụng vào bài báo cáo

+ Giải quyết được các vấn đề về nội dung yêu cầu của bài báo cáo

+ Chọn lọc hình ảnh phù hợp với nội dung

+Trang web có thể tương tác và có thể truy cập các trang khác nhau

3.2 Hạn Chế.

 Thiếu sót các chức năng, giao diện chưa được thẩm mĩ

 Thiếu các hiệu ứng cần thiết cho trang web

 Giao diện quá đơn giản

 Kỹ năng viết html, css, bootstrap chưa quá tốt nên một số chỗ chưa hoàn thiện

3.3 Ưu điểm.

 Hoàn thành các ch c năng c b n c a m t website.ứ ơ ả ủ ộ

 Có th chuy n đ i t giao di n máy tnh, sang giao di n đi n tho i,máy tnh máy ể ể ổ ừ ệ ệ ệ ạ tnh b ng.ả

TÀI LIỆU THAM KHẢO

Website

[1] https://www.w3schools.com/bootstrap5/

[2] https://getbootstrap.com/docs/5.0/getting-started/introduction/ [3] https://www.w3schools.com/howto/howto_css_checkout_form.asp [4]https://www.w3schools.com/bootstrap5/bootstrap_carousel.php [5]https://www.w3schools.com/bootstrap5/bootstrap_navbar.php [6] https://www.w3schools.com/bootstrap5/bootstrap_form_validation.php [7] https://www.w3schools.com/bootstrap5/bootstrap_containers.php

TRƯƠNG CAO Đ NG CÂ(N THĂ Ơ C NG HOA XA H I CH NGHIA VI T NAM Ô Ô U Ê

NHÂN X T V" Đ$NH GI$

GVHD: Ths Tần Duy Khánh

Sinh viên:

Lớp: Hê o Thống Thông Tin Khóa 46

Nhâ h n xjt của Giảng viên hướng dẫn

Ths Tần Duy Khánh