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ẠOTRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

BÀI TẬP LỚNHỌ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ệnKhóaLớpMã sinh viên

Bắc Ninh, 9 tháng 9 năm 2022BỘ GIÁO DỤC VÀ ĐÀO TẠOTRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

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

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.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ích lạ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ởi tí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ột kiế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ề IT nhưng các công ty này đều có ứng dụng CNTT vào quản lý nhất là Website trong các tổ chức như Ngân hàng, công ty Sản xuất, dịch vụ, nhà hàng, khách sạ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ính thiế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ện kinh 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ựngwebsite

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ủa mộ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ội dung 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 web củ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ạnh như 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ữ đã đi là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ọc sinh, 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ện thươ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ành cô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ác hì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ạng text 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 cho trang 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àn thành bản kế hoạch thiết kế website Giờ thì lên kế hoạch phát triển nội dung trang web thôi! Trong bước này, bạn cần lập ra kế hoạch lên lịch đăng bà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âydự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ó quay lạ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ạng củ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ội dung 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âydự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:

Mô tả các chức năng của hệ thống, sự tương tác của người dùng với hệ thống, các biểu đồ use case

2.2.1.Trang chủ websiteChức năng

- Hiển thị thông tin giới thiệu tổng quan về công ty , sản phẩm ,tin tức -sự kiện,… giúp khách hàng nhanh chóng nắm bắt được thông tin cần thiết.

- Hình ảnh đẹp mắt , ấn tượng nhằm tạo hấp dẫn ,ấn tượng đối với người xem -Việc sử dụng ảnh lớn và có tính động sẽ khiến website của công ty

Đối với một số sản phẩm đặc thù cần đặt trước hoặc liên hệ trước thì công ty/cửa hàng vẫn có thể đăng tải lên website để khách hàng vẫn có thể xem và đặt mua Công ty/ cửa hàng không phải mất chi phí nhập hàng trước khi không cần thiết.

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ác sản phẩm khác mà họ có thể cần trong tương lai Website đăng tải nhiều sản phẩm giúp tăng tỷ lệ khách hàng quay trở lại mua sản phẩm khác mà không mấ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ấn cho 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.

Hình 2.2.2 Sản phẩm

Tính năng:

a.Tính năng đặt hàng:

- Cho phép khách hàng đặt hàng trực tiếp trên website.Các thông tin khách hàng liên hệ sẽ được lưu trên hệ thống và gửi trực tiếp vào email của người quản lý 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, sử dụng dịch vụ.

Giúp tăng hiệu quả marketing của công ty, giúp nhiều người biết đến sản phẩm dịch vụ của công ty/đơn vị hơn.

Nhân viên của công ty dễ dàng tìm hiểu thông tin của công ty/đơn vị

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ột tiê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ệ

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

Mỗi usecase sẽ có 1 biểu đồ tuần tự, từ các biểu đồ tuần tự này nêu ra số lượng giao diện, mô tả thành phần của mỗi màn hình giao diện

Hình 3.3.1 Biểu đồ tuần tự tìm kiếm hàng hóa

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

Đưa bản mẫu thiết kế vào đây

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 Slider e.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 đúng tiế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ài cò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ế