Bài Tập Lớn Thiết Kế Giao Diện Website Bán Hàng.pdf

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG ÁBÀI TẬP LỚN HỌC PHẦN: THIẾT KẾ WEB TÊN BÀI TẬP LỚN:THIẾT KẾ GIAO DIỆN WEBSITE BÁN HÀNG Sinh viên thực hiện Khóa Lớp Mã sinh viên Bắ

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

BÀI TẬP LỚN HỌC PHẦN: THIẾT KẾ WEB TÊN BÀI TẬP LỚN:THIẾT KẾ GIAO DIỆN WEBSITE

BÁN HÀNG

Sinh viên thực hiện Khóa Lớp Mã sinh viên

Bắc Ninh, 9 tháng 9 năm 2022

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

BÀI TẬP LỚN HỌC PHẦN: THIẾT KẾ WEB TÊN (BÀI TẬP LỚN): THIẾT KẾ GIAO DIỆN WEBSITE

BÁN HÀNGST

T

Sinh viên thực

hiện

Khó a

Lớp Mã sinh viên

Điểm bằng số

Điểm bằng chữ

Ký tên SV

1 Nguyễn Thành

Trung

K12 IT11 20213105 2

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

BÀI TẬP LỚN HỌC PHẦN: THIẾT KẾ WEB TÊN (BÀI TẬP LỚN): THIẾT KẾ GIAO DIỆN WEBSITE

BÁN HÀNGST

T

Sinh viên thực hiện Khó

a

Lớp Mã sinh viên

Điểm bằng số

Điểm bằng chữ

Ký tên SV

1 Nguyễn Thành

Trung

K12 IT11 20213105 2

MỤC LỤC

DANH MỤC CÁC TỪ VIẾT TẮT 4

DANH MỤC BẢNG BIỂU VÀ SƠ ĐỒ 5

Chương 1 Giới thiệu về đề tài 7

1.1.Giới thiệu về đề tài 7

1.2 Kế hoạch làm đề tài 7

Giai đoạn 1:Trước khi bắt đầu thiết kế giao diện web 7

Giai đoạn 2 :Thiết kế giao diện web 8

Chương 2 Mô hình hệ thống (tối thiểu 10 trang) 12

2.1 Đối tượng người dùng 12

2.1.1.Đối tượng gồm các khách hàng.Yêu cầu của họ với hệ thống bao gồm: 12

2.2 Chức năng của hệ thống 12

2.2.1.Trang chủ website 12

2.2.2.Trang sản phẩm website bán hàng 13

2.3 Kịch bản sử dụng và các màn hình 17

2.4 Thiết kế bản mẫu 18

2.5 Các công nghệ, công cụ sử dụng trong dự án 19

Chương 3 Phát triển hệ thống (tối thiểu 15 trang) 19

3.1 Các bố cục chính (Layout) 19

3.2 Các trang cho từng chức năng 22

3.2.1.Giao diện trang chủ 22

3.2.2.Trang sản phẩm 23

Kết luận 24

Kết quả thu được 24

Hạn chế và hướng phát triển của đề tài 25

Hướng phát triển của đề tài 25

Danh mục sách tham khảo 25

DANH MỤC BẢNG BIỂU VÀ SƠ ĐỒ

1.2.1 Xác định khách hàng là bước đầu tiên khi lên kế

hoạch xây dựng website

9

1.2.2 Xác định đối tượng truy cập vào website là bước

quan trọng khi tạo kế hoạch xây dựng website

10

1.2.3 Lên kế hoạch thời gian thực hiện là bước cơ bản

trong kế hoạch xây dựng web

Chương 1 Giới thiệu về đề tài

1.1.Giới thiệu về đề tài.

Chúng ta có thể nói rằng thế kỷ 21 đã và đang chứng kiến sự phát triển mạnh

mẽ của ngành Công nghệ thông tin Công nghệ thông tin (CNTT) đã và đang thayđổi thế giới một cách nhanh chóng và từng bước kéo nền tri thức của nhân loại xíchlại gần nhau hơn Đó là nhờ việc phát triển hệ thống website trên toàn thế giới.Ngày nay, Website đã đóng một vai trò quan trọng đối với con người chúng ta từgiải trí cho đến quảng cáo, thương mại, quản lý…Website (thương mại điện tử) sẽdần dần thay thế những phương thức kinh doanh cũ trong các doanh nghiệp bởitính ưu việt mà Website mang lại như: nhanh hơn, rẽ hơn, tiện dụng hơn, hiệu quảhơn và không bị giới hạn không gian và thời gian

Với tầm quan trọng đó, mỗi người chúng ta cần trang bị cho mình mộtkiến thức nền tảng về Web Nếu bạn sở hữu một lượng kiến thức rộng lớn vềnền tảng Web thì bạn sẽ có cơ hội tìm kiếm việc làm rất dễ dàng Bởi vì, bạn

có thể đảm nhận các công việc về IT tại các công ty không chuyên về ITnhưng các công ty này đều có ứng dụng CNTT vào quản lý nhất là Websitetrong các tổ chức như Ngân hàng, công ty Sản xuất, dịch vụ, nhà hàng, kháchsạn, công ty kinh doanh về thương mại điện từ, trường học…, đặc biệt làtham gia vào các công ty sản xuất phần mềm (Website, các ứng dụng Web

trên mobile) Xuất phát từ những nhu cầu thực tế đó em quyết định “Thiết kế giao diện website bán hàng ” nhằm tạo ra hệ thống quản lý bán hàng có tínhthiết thực và ứng dụng vào thực tế

1.2 Kế hoạch làm đề tài

Giai đoạn 1:Trước khi bắt đầu thiết kế giao diện web

1.Xác định mục đích của webside

2.Xác định đối tượng mục tiêu(target audience) sẽ truy cập website

3.Lên kế hoạnh thiết kế web

4.Tìm nguồn cảm hứng,template,mẫu giao diện từ các đơn vị cùng ngành

Giai đoạn 2 :Thiết kế giao diện web

Xác định khách hàng

Bước đầu tiên bạn cần làm trong một bản kế hoạch xây dựng website là xácđịnh khách hàng Doanh nghiệp cần xác định rõ mình phục vụ cho ai, có điều kiệnkinh tế ra sao, gu thẩm mỹ thế nào, yêu thích phong cách gì, để lên kế hoạch thiết

kế website sao cho phù hợp

Hình 1.2.1 Xác định khách hàng là bước đầu tiên khi lên kế hoạch xây dựng

website

Thêm vào đó, bạn cũng cần tham khảo thêm website của các đối thủ cạnh tranh

để học hỏi các ưu, nhược điểm của họ và rút kinh nghiệm cho trang web của mình

Xác định mục đích thiết kế

Bước thứ hai trong kế hoạch xây dựng website là xác định mục tiêu thiết kếweb Website bán hàng sẽ có giao diện, tính năng khác với trang web giới thiệu,tuyển dụng hay chuyên về tin tức Hoặc cùng thuộc mảng bán hàng, website củamột thương hiệu thời trang nữ sẽ khác hẳn với thời trang nam

Xác định mục đích thiết kế sẽ giúp doanh nghiệp đề ra kế hoạch sản xuất nộidung Bởi website có khả năng hỗ trợ tối đa cho doanh nghiệp trong việc quảng báhình ảnh công ty, sản phẩm, dịch vụ sẽ cung cấp và tăng khả năng lên top tìm kiếm.

Xác định đối tượng truy cập vào website

Doanh nghiệp cần xác định xem những đối tượng nào sẽ truy cập vào trang webcủa mình Sau đó, thông qua phân tích các đặc điểm, xu hướng lựa chọn, sở thích,phong cách, của khách hàng để lên ý tưởng xây dựng website trên mọi khía cạnhnhư màu sắc, logo, nội dung, kế hoạch quảng cáo, Seo web cho phù hợp

Hình 1.2.2 Xác định đối tượng truy cập vào website là bước quan trọng khi tạo kế

hoạch xây dựng website

Ví dụ: Đối tượng truy cập vào website thời trang công sở là phụ nữ đã đilàm, giao diện, màu sắc nên thiên về phong cách thanh lịch, nhã nhặn để gây

ấn tượng với khách hàng; các website có lượng truy cập phần đông là họcsinh, sinh viên sẽ thu hút hơn nếu có giao diện, màu sắc trẻ trung, năng động,các quảng cáo phù hợp với độ tuổi

Tìm địa chỉ cung cấp tên miền, hosting

Tìm mua tên miền và hosting là thao tác cơ bản cần thực hiện khi lên kếhoạch xây dựng bất cứ website nào Chúng có ảnh hưởng đến độ nhận diệnthương hiệu, ấn tượng khách hàng, khả năng lên top khi Seo, tốc độ truy cập,không gian lưu trữ, của trang web.

Vậy nên hãy cân nhắc và lựa chọn thật kỹ càng trước khi mua tên miền

và hosting Chọn được địa chỉ cung cấp hai dịch vụ này uy tín là một thànhcông không hề nhỏ trong việc xây dựng website của bạn

Chuẩn bị đồ họa, hình ảnh cần thiết

Bên cạnh nội dung dưới dạng text, doanh nghiệp còn cần chuẩn bị cáchình ảnh liên quan khi lên kế hoạch xây dựng website Số lượng hình ảnh sẽphụ thuộc vào nội dung của trang web

Với các website bán hàng, hình ảnh cần to, rõ ràng, nên có ảnh thật vàvideo để khách hàng tham khảo; Ngược lại, các trang web giới thiệu sẽkhông có quá nhiều yêu cầu về hình ảnh mà chú trọng đến nội dung dạngtext nhiều hơn

Xây dựng sơ đồ, bố cục website

Sau khi xác định đối tượng truy cập, bạn cần xây dựng sơ đồ, bố cục chotrang web của mình Để tránh bị nhầm lẫn, hãy lập sơ đồ cây cho web, bắtđầu từ trang chủ sau đó vẽ đến các trang con

Lên kế hoạch thời gian thực hiện

Chuẩn bị đồ họa và hình ảnh xong đồng nghĩa với việc bạn đã hoànthành bản kế hoạch thiết kế website Giờ thì lên kế hoạch phát triển nộidung trang web thôi! Trong bước này, bạn cần lập ra kế hoạch lên lịch đăngbài, cập nhật thông tin trên website theo ngày, tuần hoặc tháng

Hình 1.2.3 Lên kế hoạch thời gian thực hiện là bước cơ bản trong kế hoạch xây

dựng web

Nên có kế hoạch lâu dài để có chiến lược phát triển nội dung website phù hợp,hiệu quả

Chuẩn bị nội dung cho website

Nội dung là yếu tố vô cùng quan trọng quyết định đến việc người dùng có quaylại website của bạn lần sau không và ảnh hưởng trực tiếp đến Seo, đến xếp hạngcủa trang web trên Google

Nên xây dựng nội dung website theo từng mục (module), mỗi thư mục sẽ có nộidung tổng quát và nội dung chi tiết Nội dung tổng quát giúp người đọc hình dungđược trong thư mục mình vào đại khái sẽ xuất hiện những thông tin gì Điều này sẽgiúp các nhà quản trị quản lý website dễ dàng hơn

Trên đây là hướng dẫn chi tiết về các bước cần thực hiện khi lên kế hoạch xây dựng website Sau khi có được kế hoạch xây dựng, bạn có thể tự thiết kế trang web

hoặc tìm đến các công ty chuyên để sở hữu một website theo nhu cầu

Chương 2 Mô hình hệ thống (tối thiểu 10 trang)

2.1 Đối tượng người dùng.

2.1.1.Đối tượng gồm các khách hàng.Yêu cầu của họ với hệ thống bao gồm:

Khi khách hàng mua một sản phẩm, họ cũng biết tớ khả năng cung cấp cácsản phẩm khác mà họ có thể cần trong tương lai Website đăng tải nhiều sảnphẩm giúp tăng tỷ lệ khách hàng quay trở lại mua sản phẩm khác mà khôngmất thêm chi phí, giúp tăng lợi nhuận.

Nhân viên của công ty dễ dàng trong việc tìm sản phẩm để giới thiệu, tư vấncho khách hàng mà không mất nhiều thời gian, giúp công ty tăng hiệu quảlàm việc cho nhân viên.

b Quản lý sản phẩm trong mỗi danh mục sản phẩm

- Thông tin về mỗi sản phảm bao gồm :

Cho phép tìm kiếm sản phảm theo danh mục sản phẩm

c.Trang tin tức sự kiện

Lợi ?ch mang lại:

Khách hàng dễ dàng tìm hiểu thông tin về công ty, tin trong ngành, tin

sự kiện, từ đó tăng thêm sự tin tưởng đối với công ty, tăng tỷ lê Œ mua hàng,

Hình 2.2.4 Usecase tìm kiếm Use – Case tìm kiếm :

Tóm tắt: Người quản lý sử dụng Usecase này để thực hiện việc tìm kiếm theo mộttiêu chí nào đó

Dòng sự kiện:

- Dòng sự kiện chính

- Hệ thống hiển thị giao diện thống kê

- Người dùng có thể chọn tìm kiếm theo tiêu chí như khách hàng, hàng hóa, nhà sản, xuất, nhà cung cấp

- Hệ thống sẽ hiện thị các thông tin ta cần thống kê

- Hiển thị giao diện chính của phần mềm

Các yêu cầu đặc biệt:

Phải tồn tại dữ liệu trong hệ thống

Trạng thái hệ thống trước khi Usecase “Tìm kiếm” được thực hiện:

Người dùng cần đăng nhập hệ thống

Trạng thái hệ thống kê sau khi Usecase “Tìm kiếm” được thực hiện:

- Nếu tìm kiếm thành công thì hệ thống sẽ hiển thị giao diện chính và đưa ra các giátrị cần tìm hiển thị ra

- Nếu Tìm kiếm thất bại:

Hệ thống sẽ đưa ra thông báo không có giá trị và yêu cầu nhập lại khi nhập không đúng hợp lệ

Hình 3.4.1 Giao diện mẫu

2.5 Các công nghệ, công cụ sử dụng trong dự án.

- Ngôn ngữ lập trình: HTML , CSS ,JS

- Phần mềm : Visual Studio Code

Chương 3 Phát triển hệ thống (tối thiểu 15 trang)

3.1 Các bố cục chính (Layout)

a Header

Hình 3.1 Header

b Nav

Hình 3.1.2 Nav

c Menubar

Hình 3.1.3.Menubar

d Slider

Hình 3.1.4 Slidere.Banner one

Hình 3.1.5 Baner one

f Slider product

Hình 3.1.6 Slider product

3.2 Các trang cho từng chức năng.

3.2.1.Giao diện trang chủ

- Mục đích:

* Chức năng này cho phép người dùng xem TT Sản Phẩm

- Phạm vi:

* Trong giao diện cho người dùng, chọn kiểu hiển thị TT theo Loại Sản Phẩm

Hình 3.2.1 Giao diện trang chủ

-Hiển thị các sản phẩm cho khách hang dễ tiếp cận.

Hình 3.2.2 Trang sản phẩm

Kết luận

Kết quả thu được.

Sau thời gian thực hiện nhóm chúng em đã hoàn thiện hệ thống theo đúngtiến độ và yêu cầu đặt ra

* Tìm hiểu hệ thống kỹ càng chính xác Phân tích rõ được:

- Bài toán đặt ra

- Hiện trạng hệ thống và yêu cầu người sử dụng

- Các chức năng cần có của hệ thống

Phân tích thiết kế

* Giao diện thân thiện, dễ sử dụng

* Đưa hệ thống vào thử nghiệm và bàn giao hệ thống thành công

Hạn chế và hướng phát triển của đề tài.

Dù đã toàn tâm cố gắng, song do khả năng và trình độ nhất định đề tàicòn giới hạn về mặt quy mô ứng dụng

Hướng phát triển của đề tài

Trong thời gian sắp tới, em sẽ tiếp tục nghiên cứu, phân tích và thiết kế