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

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

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

<b>BÀI TẬP LỚNHỌC PHẦN: THIẾT KẾ WEB</b>

<b>TÊN BÀI TẬP LỚN:THIẾT KẾ GIAO DIỆN WEBSITE BÁN HÀNG</b>

<b><small>Sinh viên thực hiệnKhóaLớpMã sinh viên</small></b>

<b>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>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

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

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>MỤC LỤC</b>

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

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

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

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

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

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

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>Chương 1. Giới thiệu về đề tài </b>

<b>1.1.Giới thiệu về đề tài.</b>

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 tồ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

<b>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</b> ” 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ế.

<b>1.2 Kế hoạch làm đề tài .</b>

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

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

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

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

<b>Giai đoạn 2 :Thiết kế giao diện web </b>

<b>Xác định khách hàng</b>

Bước đầu tiên bạn cần làm trong một <b>bản kế hoạch xây dựng website</b> 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, u thích phong cách gì,... để lên kế hoạch thiết kế website sao cho phù hợp.

<i>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</i>

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.

<b>Xác định mục đích thiết kế </b>

Bước thứ hai trong <b>kế hoạch xây dựng website</b> 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.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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.

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

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.

<i>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</i>

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.

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

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

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.

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

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ó q nhiều u cầu về hình ảnh mà chú trọng đến nội dung dạng text nhiều hơn.

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

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.

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

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 <b>kế hoạch thiết kế website</b>. 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.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<i>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</i>

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ả.

<b>Chuẩn bị nội dung cho website </b>

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.

<b> 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</b>

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

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>Chương 2. Mơ hình hệ thống. (tối thiểu 10 trang)</b>

<b>2.1 Đối tượng người dùng.</b>

<b> 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:</b>

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

<b>2.2.1.Trang chủ websiteChức năng</b>

- 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

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

Đố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.

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

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

<b>Tính năng:</b>

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 :

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

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

<i>Lợi ?ch mang lại: </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ị

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

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.

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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ệ

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

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

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

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

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

Hình 3.4.1 Giao diện mẫu

<b>2.5 Các cơng nghệ, công cụ sử dụng trong dự án.</b>

- Ngôn ngữ lập trình: HTML , CSS ,JS. - Phần mềm : Visual Studio Code.

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

<b>3.1. Các bố cục chính. (Layout)</b>

a. Header

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

Hình 3.1 Header b. Nav

Hình 3.1.2 Nav c. Menubar

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

Hình 3.1.3.Menubar d. Slider

Hình 3.1.4 Slider e.Banner one

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

Hình 3.1.5 Baner one f. Slider product

Hình 3.1.6 Slider product

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

<b>3.2 Các trang cho từng chức năng.</b>

<b>3.2.1.Giao diện trang chủ - Mục đích: </b>

* 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ủ

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

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

<i>Hình 3.2.2 Trang sản phẩm</i>

<b>Kết luận</b>

<b>Kết quả thu được.</b>

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.

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

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

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.

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

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ế

</div>