Bao cao do an css framework bootstrap

TRƯỜNG ĐẠI HỌC PHÚ XUÂN HUẾ
KHOA CÔNG NGHỆ - KINH DOANH
------

ĐỒ ÁN MÔN HỌC:
CSS FRAMEWORK: BOOTSTRAP

ĐỀ TÀI:

XÂY DỰNG WEBSITE BÁN HÀNG
“NÔNG SẢN SẠCH”

Sinh viên thực hiện: Trần Văn Nguyên
Lớp: CNTT K18A
Giảng viên hướng dẫn: Th.s Trần Thị Minh Thảo


Xây dựng website bán hàng “Nông sản sạch”

2

Huế - 06/2021
Mục lục
LỜI MỞ ĐẦU......................................................................................5
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT..................................................7
1.1: Thực trạng vấn đề............................................................................................................7
1.2 Giới thiệu tổng quan website............................................................................................7
1.3 Ngôn ngữ xây dựng website.............................................................................................7
1.3.1 HTML (Hypertext Markup Language)......................................................................7
1.3.2 CSS (Cascading Style Sheet)...................................................................................8
1.3.3 JavaScript (Jquery)....................................................................................................8

1.3.4 Framework: Boostrap................................................................................................8

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ...................................14
2.1 Xây dựng giao diện website............................................................................................14
2.1.1 Xây dựng giao diện trang chủ..................................................................................14
2.1.2 Xây dựng giao diện trang tất cả sản phẩm...............................................................18
2.1.3 Xây dựng giao diện trang sản phẩm chi tiết............................................................19
2.1.4 Xây dựng giao diện trang thanh toán.......................................................................20
2.2 Responsive cho website..................................................................................................21
2.3 Xử lí JavaScrip (Jquery).................................................................................................22

CHƯƠNG 3: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN CỦA ĐỀ
TÀI......................................................................................................26
3.1 Những điểm website đã làm được..................................................................................26
3.2 Những điểm website chưa làm được...............................................................................26
3.3 Ứng dụng........................................................................................................................26
3.4 Kết luận.............................................................................................................27

TÀI LIỆU THAM KHẢO................................................................28
PHỤ LỤC...........................................................................................29
Chương trình minh họa “Tạo khối hình ellipse với clip-path”.............................................29

CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nông sản sạch”

CSS framework: Bootstrap

CNTT K18A

3

Trần Văn Nguyên


Xây dựng website bán hàng “Nông sản sạch”

4

LỜI MỞ ĐẦU
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ố mang tính quyết định trong hoạt động của các chính phủ, tổ chức,
cũng như của các cơng ty, nó đóng vai trị hết sức quan trọng, có thể tạo ra những bước
đột phá mạnh mẽ.
Việc xây dựng các trang web để phục vụ cho các nhu cầu riêng của các tổ chức,
cơng ty thậm chí các cá nhân, ngày nay, khơng lấy gì làm xa lạ. Với một vài thao tác
đơn giản, một người bất kì có thể trở thành chủ của một website giới thiệu về bất cứ gì
anh ta quan tâm: một website giới thiệu về bản thân và gia đình anh ta, hay là một
website trình bày các bộ sưu tập hình ảnh những địa điểm anh ta thích chẳng hạn.
Đối với các chính phủ và các cơng ty thì việc xây dựng các website riêng càng
ngày càng trở nên cấp thiết. Thông qua những website này, thông tin về họ cũng như
các công văn, thông báo, quyết định của chính phủ hay các sản phẩm, dịch vụ mới của
công ty sẽ đến với những người quan tâm, đến với khách hàng của họ một cách nhanh
chóng kịp thời, tránh những phiền hà mà phương thức giao tiếp truyền thống thường
gặp phải.

Hoạt động của một cửa hàng có quy mô khá lớn sẽ càng được tăng cường và
mở rộng nếu xây dựng được một website tốt. Bắt nguồn với ý tưởng này, cùng với
những gợi ý của cô Trần Thị Minh Thảo, em đã thực hiện đồ án “XÂY DỰNG
WEBSITE BÁN HÀNG NÔNG SẢN SẠCH” như nội dung trình bày sau đây.
Trong báo cáo này, em tập trung trình bày những nội dung sau:
-

Lời mở đầu

-

Chương 1: Cơ sở lí thuyết
1. Thực trạng vấn đề
2. Giới thiệu tổng quan website
3. Ngơn ngữ xây dựng website

-

Chương 2: Phân tích và thiết kế
1. Xây dựng giao diện website
2. Responsive

CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nông sản sạch”

5

3. Javascrip (Jquery).
-

Chương 3: Kết luận và hướng phát triển đề tài

-

Tài liệu tham khảo

Do lần đầu tiếp cận với một đề tài mới mẻ và rộng lớn nên bài làm còn nhiều
hạn chế và thiếu sót, mong q thầy cơ và các bạn có những góp ý để e có thể hồn
thiện đề tài được tốt hơn.
Em xin chân thành cám ơn cô Trần Thị Minh Thảo đã hướng dẫn và giúp em
thực hiện đề tài trong suốt quá trình qua.


CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nông sản sạch”

6

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
1.1: Thực trạng vấn đề
Trong hoạt động sản xuất kinh doanh, giờ đây, thương mại điện tử đã khẳng
định được vai trò thúc tiến và thúc đẩy sự phát triển của doanh nghiệp.
Đối với một cửa hàng, việc quảng bá và giới thiệu đến khách hàng các mặt hàng
hấp dẫn của mình, đồng thời để tiện lợi cho q trình thanh tốn online,... mang yếu tố
quyết định đến sự tồn tại và phát triển của cửa hàng. Vì vậy sẽ thật thiếu sót nếu một
cửa hàng chưa xây dựng một website để giới thiệu rộng rãi các mặt hàng hấp dẫn, các
chương trình khuyến mãi,các phương thức thanh toán tiện lợi, tạo cho khách hàng cảm
giác thoải mái trong quá trình tương tác trên website.
Với nhu cầu trên, thơng qua đồ án này, tơi xin trình bày cách thức xây dựng
website bán hàng “Nông sản sạch” để giúp cửa hàng thuận tiện hơn trong việc quản lí
sản phẩm và khách hàng của mình.

1.2 Giới thiệu tổng quan website
Một website phải có giao diện rõ ràng, bắt mắt cấu trúc hợp lí để gây ấn tượng
tốt ban đầu với người xem, kế đến là nội dung website phải tiện dụng, đầy đủ, đáp ứng
nhu cầu thường gặp của khách hàng.
Trên website bán hàng phải có đầy đủ các mặt hàng của cửa hàng, các chương
trình khuyến mãi hấp dẫn, các cách thức thanh tốn và các thơng tin, chính sách của
cửa hàng mang lại.

1.3 Ngôn ngữ xây dựng website
1.3.1 HTML (Hypertext Markup Language)
HTML là chữ viết tắt của Hypertext Markup Language, nó khơng phải là ngơn
ngữ lập trình mà là là ngơn ngữ markup. Nó giúp người dùng tạo và cấu trúc các
CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nông sản sạch”

7

thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, links,
blockquotes, vâng vâng.

1.3.2 CSS (Cascading Style Sheet)
CSS là ngôn ngữ tạo phong cách cho trang web, viết tắt của từ “Cascading
Style Sheet” được dùng để tạo phong cách và định kiểu cho những yếu tố được viết
dưới dạng ngôn ngữ đánh dấu, như là HTMLCSS có nhiều thuộc tính hơn HTML. Do
đó, sử dụng CSS giúp bạn tạo tạo các webpage đẹp hơn nhiều khi so sánh với việc sử
dụng các thẻ và thuộc tính HTML thuần.

*Responsive Web Design
Responsive Web Design (Thiết kế website tương thích di động) là cách thức
bạn xây dựng một website đáp ứng trên mỗi thiết bị và kích thước khung hình khác
nhau, khơng cần biết là khung lớn, nhỏ hay máy tính (desktop). Với cách thức này,
trải nghiệm của người dùng trên mỗi thiết bị sẽ tăng rõ rệt. Chẳng hạn, trên khung
hình của điện thoại, mọi thứ vẫn hiển thị rõ ràng, đầy đủ và tinh tế hơn.

1.3.3 JavaScript (Jquery)
JavaScript là một ngôn ngữ lập trình của HTML và WEB. Nó là nhẹ và được
sử dụng phổ biến nhất như là một phần của các trang web, mà sự thi hành của chúng
cho phép Client-Side script tương tác với người sử dụng và tạo các trang web động.
Nó là một ngơn ngữ chương trình thơng dịch với các khả năng hướng đối tượng.

*Thư viện Jquery:
jQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào
năm 2006. jQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứng
động và tương tác Ajax. Với jQuery, khái niệm Rapid Web Development đã khơng
cịn q xa lạ.

1.3.4 Framework: Boostrap
Bootstrap là một framework bao gồm các HTML, CSS và JavaScript
template dùng để phát triển website chuẩn responsive.
CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nông sản sạch”

8

Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và cơng cụ dùng
để tạo ra một mẫu webiste hồn chỉnh. Với các thuộc tính về giao diện được quy định
sẵn như kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo nhiều
sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này
trong quá trình thiết kế giao diện website.
Bootstrap cho phép q trình thiết kế website diễn ra nhanh chóng và dễ dàng
hơn dựa trên những thành tố cơ bản sẵn có như typography, forms, buttons, tables,
grids, navigation, image carousels…

* 3 file chính của Bootstrap

- Bootstrap.css: là một framework CSS sắp xếp và quản lý bố cục của trang
web. Trong khi HTML quản lý nội dung và cấu trúc của trang web, CSS xử lý bố
cục của trang web. Vì lý do đó, cả hai cấu trúc cần cùng tồn tại để thực hiện một
hành động cụ thể.
- Bootstrap.js: File này là phần cốt lõi của Bootstrap. Nó bao gồm các
file JavaScript chịu trách nhiệm cho việc tương tác của trang web.
- Glyphicons: Icons là một phần không thể thiếu của giao diện trang web.
Chúng thường được liên kết với các hành động và dữ liệu nhất định trong giao
diện người dùng. Bootstrap sử dụng Glyphicons để đáp ứng nhu cầu đó.

* Cách nhúng Bootstrap vào HTML (có 2 cách) :
- Tải trực tiếp từ trang cung cấp Bootstrap : Ta có thể tải Bootstrap từ trang
chủ Sau khi tải về, ta sẽ nhận được cấu trúc gồm các thư
mục JS, CSS,... và link vào file HTML để sử dụng.
- Sử dụng Bootstrap từ CDN: Nếu không muốn tải xuống, ta có thể nhúng
bootstrap thơng qua CDN (Content Delivery Network ).

CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nông sản sạch”

9

* Sử dụng Bootstrap:
Bootstrap được thiết kế để tương thích với hầu hết các thiết bị có kích

thước màn hình khác nhau, hay còn gọi là RWD viết tắt của từ “Responsive Web
Design”. Để đảm bảo hiển thị đúng và thu phóng khung của website linh hoạt với
khung browser, ta thêm thẻ <meta> sau vào bên trong phần tử <head>:

+ Breakpoint: là các khối của thiết kế đáp ứng, chúng được sử dụng để kiểm
sốt bố cục của bạn khi đến một kích thước màn hình thiết bị cụ thể.

+ Containers: là phần tử bố cục cơ bản nhất của Bootstrap, được sử dụng để
làm thùng chứa các nội dung bên trong, thường đi kèm với 3 loại khác nhau:

CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nông sản sạch”

10

+ Bootstrap Grid System: là mấu chốt cho khả năng tương thích giao diện
(web responsive) của bootstrap, giao diện của nó được hiển thị dưới dạng lưới (Grid),
được chia thành 12 collumn đặt trong 1 class row. Trong đó mỗi collumn sẽ bao gồm
các padding tương ứng với từng độ phân giải của mỗi thiết bị (điện thoại, tablet, máy
tính).

+ Màu sắc: Màu sắc trong Bootstrap được thể hiện qua các class
thông dụng như “primary”, “success”..., ví dụ như cho chữ màu xanh da trời
ta sử dụng class “text-primary”, nền màu đỏ ta sử dụng class “bg-danger”...

CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nông sản sạch”

11

+ Components : Bootstrap có rất nhiều component với giao diện được
thiết kế sẵn, ta có thể sử dụng chúng thơng qua các class được xây dựng với các
components khác nhau. Trong mỗi component lại có các class tương ứng với nó,
giúp ta dễ dàng điều chỉnh theo ý muốn của mình. Dưới đây là một vài component
thông dụng:
 Table

 Form

CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nông sản sạch”

12

 Card

 Button

 Navbar

CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nơng sản sạch”

13

 Ngồi ra, cịn rất rất nhiều các component thơng dụng khác như:
list-group, alerts, carousel, dropdown, modal, offcanvas, collapse,... mà ta có thể
sử dụng.

CHƯƠNG 2:

PHÂN TÍCH VÀ THIẾT KẾ

2.1 Xây dựng giao diện website
Website được xây dựng dựa trên HTML, CSS, JavaScript, và Bootstrap v5.0.1, bố cục được dàn trải theo layout chữ Z với nhiều khối khác nhau, được xây
dựng thành nhiều trang liên kết.

Index.html
Index.html

Gioithieu.html

Sanpham.html

Chitiet.html

Lienhe.html

Dangki(modal)

Dangnhap(modal)

Giohang(modal)

Thanhtoan.html

Link trang chủ: />Link source code: />2.1.1 Xây dựng giao diện trang chủ

CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nông sản sạch”

14

Trang chủ được xây dựng bởi 4 khối chính khác nhau như sau:
 <Header>
Sử dụng class .container-fluid chứa bên trong là class .navbar của bootstrap, và
các class khác như .navbar-menu-mobile, .navbar-brand, .navbar-search, .navbar-nav...
kết hợp với CSS để tạo ra các hiệu ứng trượt đổi màu bắt mắt khi hover với các thuộc
tính như transform kết hợp transition.
 #Slider
Với khối #slider, em sử dụng component carousel của bootstrap kết hợp với
các caption bên trong.

 #Main
Đây là khối chứa các nội dung chính của trang web, bên trong được chia thành
nhiều khối khác nhau khác, được bọc ngoài bởi thùng chứa class .container như sau:

CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nông sản sạch”

15

#saleProduct: khối chứa các thông tin sản phẩm đang được khuyến mãi tại cửa
hàng, layout gồm 3 cột với hiệu ứng lật 180độ (rotate(180deg))

#mainProduct: là khối chính chứa các sản phẩm của của hàng, sử dụng
component .card của Bootstrap với giao diện gồm hình ảnh sản phẩm, giá, các nút
xem chi tiết và nút đặt hàng, có layout chia làm 4 cột.

CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nông sản sạch”

16

#storeIntro : là khối để thể hiện thông tin cửa hàng, slogan của cửa hàng, với
layout 4 cột được kết hợp với hình ảnh và thuộc tính clip-path cho khối tạo hiệu ứng
transition khi hover lạ mắt.

#safeInfor : khối chứa các thông tin an toàn thực phẩm.

#parner : khối liên kết các đối tác của cửa hàng

 Footer: được chia thành layout 3 cột

CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nơng sản sạch”

17

Ngồi ra cịn có các khối #modal sử dụng class modal của Bootstrap thể hiện
form đăng nhập, đăng kí và giỏ hàng của trang web, #callnow, #messenger và #noti
có thuộc tính fixed được căn chỉnh gần bottom nhầm tương tác với khách hàng, giúp
khách hàng liên lạc với cửa hàng một cách thuận tiện.

CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nông sản sạch”

18

2.1.2 Xây dựng giao diện trang tất cả sản phẩm.

Trang tất cả sản phẩm được thiết kế dựa vào trang chủ, được giữ nguyên phần
#header, #footer, phần content thêm component pagination của bootstrap.

2.1.3 Xây dựng giao diện trang sản phẩm chi tiết

CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nông sản sạch”

19

Trang sản phẩm chi tiết thể hiện thông tin đầy đủ của sản phẩm cũng như đánh
giá của người dùng khác, phần content có sử dụng form của boostrap với các
class .checkbox, .radio và .section...

CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên


Xây dựng website bán hàng “Nông sản sạch”

20

2.1.4 Xây dựng giao diện trang thanh toán

Trang thanh toán thể hiện cách thức thanh toán sản phẩm, sử dụng
component .table của boostrap cũng như .form được liên kết với các trang khác qua

nút “đặt hàng”.
Ngồi ra, cịn có các trang giới thiệu và liên hệ liên kết với trang chủ để khách
hàng có thể dễ dàng nắm rõ thơng tin cửa hàng.

CSS framework: Bootstrap

CNTT K18A

Trần Văn Nguyên