LuongTranDuyHoan 501200025 CD20CT1

`
BỘ LAO ĐỘNG THƯƠNG BINH & XÃ HỘI

TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THÔNG TIN TP.HCM
KHOA CÔNG NGHỆ THÔNG TIN-ĐIỆN TỬ
BÁO CÁO TIỂU LUẬN

MÔN HỌC: … THIẾT KẾ WEB 2 ………
TIỂU LUẬN MÔN

THIẾT KẾ WEB 2
Giảng viên hướng dẫn: NGUYỄN ĐÌNH HOÀNG.....

Sinh viên thực hiên: LƯƠNG TRẦN DUY HOÀN......MSSV:501200025
Tên nhóm học phần: <ghi theo TKB>...........................
Học kỳ: 2B...............Năm học: 2020-2021.....................
Tp.Hồ Chí Minh, tháng 07 năm 2021
Trang 1
`
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
Tp. HCM, ngày….tháng…..năm………

(chữ ký và ghi rõ họ tên)
.................................................................
Trang 2
`
MỤC LỤC
Trang
Phần I: MỞ ĐẦU............................................................................................1
Phần II: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG...................................2
1.GIỚI THIỆU BOOSTRAP...................................................................2
A.Bootstrap là gì?..................................................................................2
B.Bootstrap 4.......................................................................................2
C.Lý do sử dụng Bootstrap................................................................2
2.KHẢO SÁT HIỆN TRẠNG.................................................................3
3.PHÂN TÍCH CHỨC NĂNG TRANG WEB.......................................4
4.YÊU CẦU ĐẶT RA CHO TRANG WEB...........................................4
Phần III: THIẾT KẾ WEBSITE BÁN HÀNG............................................6
Phần IV: KẾT LUẬN...................................................................................35
Trang 3
`
Phần I:
MỞ ĐẦU
Ngành công nghệ thông tin là một ngành khoa học đang trên đà phát triển mạnh và
ứng dụng rộng rãi trên nhiều lĩnh vực. Cùng với xu hướng phát triển của các phương
tiện truyền thông như Báo, Radio… thì việc sử dụng Internet ngày càng phổ biến.
Truy cập Internet, chúng ta có được một kho thông tin khổng lồ phục vụ mọi nhu
cầu, mục đích của chúng ta chỉ bằng một cái nhấp chuột. Nhận thức được nhu cầu tìm
hiểu thông tin, giải trí của xã hội, là sự ra đời của hàng loạt website cho các mục đích
thương mại, giải trí, tin tức…
Internet đang là công cụ liên kết xã hội lớn nhất trong lịch sử loài người, và đang
ngày càng phổ biến trên khắp thế giới và đóng vai trò quan trọng trong đời sống con
người. Internet đem lại những lợi ích to lớn cho con người hơn bất kỳ nền công nghiệp
truyền thống nào khác cũng như nguồn lợi khổng lồ mà nó có thể mang lại cho các nhà
đầu tư.
Ngày nay, với sự bùng nổ của công nghệ thông tin, Interner lại càng có ý nghĩa
quan trọng hơn đối với các Doanh nghiệp sản xuất kinh doanh, dịch vụ. Với công cụ
Internet, các Doanh nghiệp có thể quảng cáo, giới thiệu sản phẩm, dịch vụ của mình
phổ biến hơn với chi phí thấp hơn và làm hoàn thiện hơm công tác tiếp thị, quảng cáo,
giới thiệu sản phẩm, dịch vụ của mình tới người tiêu dùng nhằm đạt được lợi thế cạnh
tranh cao trên thị trường.
Để đáp ứng nhu cầu mua sắm hàng ngày của con người… thì website bán hàng trực
tuyến online là một nhu cầu tất yếu. Nhận thức được tầm quan trọng đó em đã tìm hiểu,
nghiên cứu và quyết định chọn đề tài: “Xây dựng website bán hàng” với mục đích làm
hoàn thiện hơn công tác quảng cáo, tiếp thị sản phẩm, dịch vụ của các Doanh nghiệp tới
người tiêu dùng.
Phần II:
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Trang 4
`
1. GIỚI THIỆU BOOSTRAP
A. Bootstrap là gì?
Bootstrap là một framework front-end miễn phí giúp phát triển các ứng dụng web
nhanh và dễ dàng hơn.
Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS như typography, form,
button, table, navigation, modal, image carousels cũng như các plugins JavaScript tuỳ
ý.
Bootstrap cung cấp cho bạn khả năng thiết kế web responsive một cách dễ dàng.
B. Bootstrap 4
Bootstrap 4 (viết tắt là BS4) là phiên bản mới của Bootstrap, là framework
HTML, CSS và JavaScript phổ biến nhất để thiết kế web đáp ứng, ưu tiên trên nền tảng
di động. Tương tự như Bootstrap 3, Bootstrap 4 hoàn toàn miễn phí tải về và tự do sử
dụng.
*So sánh Bootstrap 3 và Bootstrap 4:
Bootstrap 4 là phiên bản mới nhất của Bootstrap tính đến thời điểm viết bài này, với
các thành phần mới, css nhanh hơn và khả năng đáp ứng cao hơn. Bootstrap 4 hỗ trợ tất
cả các trình duyệt và nền tảng với các phiên bản ổn định và mới nhất. Tuy nhiên, một
nhược điểm duy nhất đó IE9 không hỗ trợ Bootstrap 4.
Nếu bạn cần chạy giao diện web trên trình duyệt IE8 và IE9, bạn nên dùng
Bootstrap 3. Đây là phiên bản ổn định, hỗ trợ các bản vá lỗi và các thay đổi tài liệu.
C. Lý do sử dụng Bootstrap
-Dễ dùng: bất cứ ai với kiến thức cơ bản về HTML và CSS đều cũng có thể sử dụng
Bootstrap
-Các tính năng đáp ứng: CSS đáp ứng của Bootstrap thích hợp với điện thoại, máy
tính bảng và máy tính để bàn.
Trang 5
`
-Tiếp cận ưu tiên thiết bị di động đầu tiên: Trong Bootstrap, các phong cách điện
thoại di động là một phần của framework lõi.
-Tương thích trình duyệt: Bootstrap 4 tương thích với các trình duyệt hiện đại
(Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera).
2. KHẢO SÁT HIỆN TRẠNG
Sau khi khảo sát hiện trạng, em nắm bắt được các thông tin sau:
-Quản lý khách hàng: mỗi khách hàng được quản lý các thông tin sau đây: Họ,
tên, địa chỉ, điện thoại, fax, email, tên đăng nhập, mật khẩu. Ngoài ra, nếu khách hàng
là công ty hay cơ quan thì quản lý theo tên công ty cơ quan.
-Quản lý mặt hàng: mỗi mặt hàng được quản lý những thông tin: Tên mặt hàng,
đơn giá, số lượng, thời gian bảo hành, hình ảnh, mô tả.
-Quá trình đặt hàng của khách hàng: Khách hàng xem và lựa chọn mặt hàng cần
mua. Trong quá trình lựa chọn, bộ phận bán hàng sẽ trực tiếp trao đổi thông tin cùng
khách hàng, chịu trách nhiệm hướng dẫn. Sau khi lựa chọn xong, bộ phận bán hàng sẽ
tiến hành lập đơn đặt hàng của khách. Sau khi tiếp nhận yêu cầu trên, bộ phận này sẽ
làm hóa đơn và thanh toán tiền.
Trong trường hợp nhiều công ty, trường học, các doanh nghiệp, ... có yêu cầu đặt
hàng, mua với số lượng lớn thì cửa hàng nhanh chóng làm phiếu đặt hàng, phiếu thu có
ghi thuế cho từng loại mặt hàng và giao hàng hàng theo yêu cầu.
-Quá trình đặt hàng với nhà cung cấp: Hàng ngày nhân viên kho sẽ kiểm tra
hàng hóa trong kho và đề xuất lên ban điều hành cần xử lý về việc những mặt hàng cần
nhập. Trong quá trình đặt hàng thì bạn điều hành sẽ có trách nhiệm xem xét các đề xuất
về những mặt hàng yêu cầu và quyết định loại hàng, số lượng hàng cần đặt và phương
thức đặt hàng với nhà cung cấp. Việc đặt hàng với nhà cung cấp được thực hiện thông
qua địa chỉ trên mạng hay qua điện thoại, fax.
-Quá trình nhập hàng: Sau khi nhận yêu cầu đặt hàng từ công ty, nhà cung cấp sẽ
giao hàng cho công ty có kèm theo hóa đơn hay bảng kê chi tiết các loại mặt hàng. Thủ
kho sẽ kiểm tra lô hàng của từng nhà cung cấp và trong trường hợp hàng hóa giao thông
đúng yêu cầu đặt hàng hay kém chất lượng về hệ thống máy móc, ...thì thủ kho sẽ trả lại
nhà cung cấp và yêu cầu giao lại những mặt hàng bị trả đó.
Trang 6
`
Tiếp theo thủ kho sẽ kiểm tra chứng từ giao hàng để gán giá trị thành tiền cho từng
loại sản phẩm. Những loại hàng hóa này sẽ được cung cấp một mã số và được cập nhật
ngay vào giá bán. Sau khi nhập xong chứng từ giao hàng, nhân viên nhập kho sẽ in một
phiếu nhập để lu trữ trong hồ sơ.
-Khách hàng: là những người có nhu cầu mua sắm hàng hóa. Khác với việc đặt
hàng trực tiếp tại công ty, khách hàng phải hoàn toàn tự thao tác thông qua từng bước
cụ thể để có thể mua được hàng. Trên mạng, các mặt hàng được sắp xếp và phân theo
từng loại mặt hàng giúp cho khách hàng dễ dàng tìm kiếm.
Trong hoạt động này, khách hàng chỉ cần chọn một mặt hàng nào đó từ danh mục
các mặt hàng thì những thông tin về mặt hàng đó sẽ hiển thị lên màn hình như: hình
ảnh, đơn giá, mô tả, ...và bên cạnh là trang liên kết để thêm hàng hóa vào giỏ hàng.
Khi khách hàng muốn đặt hàng thì hệ thống hiển thị trang xác lập đơn đặt hàng
cùng thông tin về khách hàng và hàng hóa. Cuối cùng là do khách hàng tùy chọn đặt
hay không.
-Nhà quản lý: Là người làm chủ hệ thống, có quyền kiểm soát mọi hoạt động của
hệ thống. Nhà quản lý được cấp một username và password để đăng nhập vào hệ thống
thực hiện những chức năng của mình.
Nếu như quá trình đăng nhập hàng công thì nhà quản lý có thể thực hiện những
công việc: quản lý cập nhật thông tin các mặt hàng, tiếp nhận đơn đặt hàng, kiểm tra
đơn đặt hàng và xử lý đơn đặt hàng. Thống kê các mặt hàng bán trong tháng, năm,
thống kê khách hàng, nhà cung cấp, thống kê tồn kho, thống kê doanh thu. Khi có nhu
cầu nhập hàng hóa từ nhà cung cấp thì tiến hành liên lạc với nhà cung cấp để đặt hàng
và cập nhật mặt hàng vào cơ sở dữ liệu.
3. PHÂN TÍCH CHỨC NĂNG TRANG WEB
Đây là một website nhằm bán và giới thiệu rộng rói các mặt hàng của công ty đến
cho người tiêu dùng với các chi tiết mặt hàng cũng như giá cả một cách chính xác. Có
những chức năng sau:
- Cho phép nhập hàng vào CSDL.

Trang 7
`
- Hiển thị danh sách các mặt hàng theo từng loại ( bao gồm: hình ảnh, giá cả, thời
gian bảo hành, mô tả chức năng).
- Hiển thị hàng hóa mà khách hàng đã chọn để mua. - Hiển thị đơn đặt hàng của
khách hàng.
- Cung cấp khả năng tìm kiếm, khách hàng có thể truy cõn từ xa để tìm kiếm xem
mặt hàng đặt mua.
- Cho phép quản lý đơn đặt hàng. - Cập nhập mặt hàng, loại mặt hàng, khách hàng,
nhà cung cấp. - Thống kê mặt hàng, khách hàng, đơn đặt hàng, doanh thu.
- Cho phép hệ thống quản trị mạng từ xa.
4. YÊU CẦU ĐẶT RA CHO TRANG WEB
Yêu cầu trang Web Hệ thống gồm có hai phần:
* Phần thứ nhất dành cho khách hàng: Khách hàng là những người có nhu cầu
mua sắm hàng hóa. Họ sẽ tìm kiếm các mặt hàng cần thiết từ hệ thống và đặt mua các
mặt hàng này. Vì thế trang web phải thỏa mãn các chức năng sau:
+ Thứ nhất: Hiển thị danh sách các mặt hàng của công ty để khách hàng có thể
xem và lựa chọn.
+ Thứ hai: Cung cấp chức năng tìm kiếm mặt hàng. Với nhu cầu của người sử
dụng khi bước vào trang web thương mại là tìm kiếm các mặt hàng mà họ cần và muốn
mua. Đôi lúc cũng có nhiều khách hàng vào website này mà không có ý định mua hay
không biết mua gì thì yêu cầu đặt ra cho hệ thống là làm thế nào để khách hàng có thể
tìm kiếm nhanh và hiệu quả các mặt hàng mà họ cần tìm.
+ Thứ ba: Sau khi khách hàng lựa chọn xong những mặt hàng cần đặt mua thì hệ
thống phải có chức năng hiển thị đơn đặt hàng để khách hàng nhập vào những thông tin
cần thiết, tránh những đòi hỏi hay những thông tin yêu cầu quá nhiều từ phía khách
hàng, tạo cảm giác thoải mái, riêng tư cho khách hàng. Ngoài ra, còn có một số chức
năng như: đăng kí, đăng nhập. Khách hàng có thể thay đổi mật khẩu của mình. Khi bạn
quan tâm đến thông tin về website như: tin tức hay giá cả. Bạn có thể nhập địa chỉ email
của bạn vào. Lúc đó bạn có thể nhận được thông tin cập nhật từ site.
Trang 8
`
* Phần thứ hai dành cho nhà quản lý: Là người làm chủ ứng dụng, có quyền
kiểm soát mọi hoạt động của hệ thống. Người này được cấp một username và password
để đăng nhập vào hệ thống thực hiện những chức năng của mình. Nếu như quá trình
đăng nhập hàng công thì nhà quản lý có những chức năng sau:
+ Thứ nhất: Chức năng quản lý cập nhật (thêm, xóa, sửa) các mặt hàng trên trang
web, việc này không phải dễ. Nó đòi hỏi sự chính xác.
+ Thứ hai: Tiếp nhận và kiểm tra đơn đặt hàng của khách hàng. Hiền thị đơn đặt
hàng hay xóa bỏ đơn đặt hàng.
+ Thứ ba: Thống kê các mặt hàng, khách hàng, nhà cung cấp, thống kê doanh thu.
Ngoài các chức năng nêu trên thì trang web phải được trình bày sao cho dễ hiểu,
giao diện mang tính dễ dùng, đẹp mắt và làm sao cho khách hàng thấy được những
thông tin cần tìm, cung cấp những thông tin quảng cáo thật hấp dẫn, nhằm thu hút sự
quan tâm về công ty mình và có cơ hội sẽ có nhiều người tham khảo nhiều hơn.
Điều quan trọng trong trang web mua bán trên mạng là phải đảm bảo an toàn tuyệt
đối những thông tin liên quan đến người dùng trong quá trình đặt mua hay thanh toán.
Đồng thời còn có tính dễ dàng nâng cấp, bảo trì, sửa chữa khi cần bổ sung, cập nhật
những tính năng mới.
Phần III:
THIẾT KẾ WEBSITE BÁN HÀNG
Trang chủ:
<!doctype html>
<html lang="en">
Trang 9
`
<head>
<title>Bai tap lon</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T
" crossorigin="anonymous">
<link rel="stylesheet" href="bootstrap-4.6.0-dist/css/bootstrap.min.css">

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fontawesome-free-5.15.2-web/css/all.min.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark sticky-top bg-dark">
<div class="container">
<div class="navbar-collapse collapse" id="navbarCollapse">

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index1.html">Trang chủ </span></a>
</li>
Trang 10
`
<li class="nav-item">
<a class="nav-link" href="#">Quản trị</a>
</li>
<div id="navMenu">
<div id="navMenu">
<ul>
<li><a class="nav-link" href="#">Sản phẩm</a>
<ul>
<li><a href="#">category 1</a></li>
</ul>
</li>
</ul>
</div>
<a class="nav-link" href="#">Giới thiệu</a>
</li>
Trang 11
`
<a class="nav-link" href="index2.html">Liên hệ</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0" method="get" action="#">
<input class="form-control mr-sm-2" type="text" placeholder="Tìm
kiếm" aria-label="Search"
name="keyword_tensanpham">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Tìm kiếm</button>
</form>
</div>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Giỏ hàng</a>
</li>

<a class="nav-link" href="index3.html">Đăng nhập</a>
</li>
</ul>
</div>
</nav>

<main role="main">


<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
Trang 12
`
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/bg-header.jpg">
<div id="text" class="carousel-caption text-left">
<h1>DuyHoan Shop- Nơi mua sắm tuyệt vời</h1>
</div>
</div>
</div>
</div>


<div class="container marketing">

<div class="row">
<div class="col-lg-4">
<a href="#">
<img class="bd-placeholder-img rounded-circle" width="140"
height="140"
src="img/icon-1.png">
</a>
<h2>Đặt hàng</h2>
<p>.</p>
</div>
Trang 13
`
<a href="#">
<img class="bd-placeholder-img rounded-circle"
width="140" height="140"
</a>
<h2>Tạo đơn hàng</h2>
<p>.</p>
</div>
<a href="#">
<img class="bd-placeholder-img rounded-circle"
width="140" height="140"
</a>
<h2>Giao hàng</h2>
<p> </p>
</div>
</div>


<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Đặt hàng, Tạo đơn hàng, Giao hàng
<span class="text-muted">Nhanh
chóng</span>
</h2>
Trang 14
`
<p class="lead"> </p>
</div>
<img src="img/marketing-1.png">
</div>
</div>
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading"><span class="lead">Hệ thống theo dõi
đơn hàng chi tiết, thông tin mọi lúc mọi nơi</span><span class="text-
muted">.</span></h2>
<p class="lead"> </p>
</div>
<div class="col-md-5 order-md-1">
</div>
</div>

</div>


<section class="jumbotron text-center">
<h1 class="jumbotron-heading">Danh sách Sản phẩm</h1>
Trang 15
`
<p class="lead text-muted">Các sản phẩm với chất lượng, uy tín, cam kết
từ nhà Sản xuất, phân phối và
bảo hành
chính hãng.</p>
</div>
</section>

<div class="danhsachsanpham py-5 bg-light">
<div class="row">
<div class="card mb-4 shadow-sm">
<a href="#">
<img class="bd-placeholder-img card-img-top" width="100%"
height="350"
src="img/ts_panda.jpg">
</a>
<div class="card-body">
<a href="#">
<h5>Sản phẩm 1</h5>
</a>
<p class="card-text">abcdef</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a class="btn btn-sm btn-outline-secondary"
href="#">Xem chi tiết</a>
Trang 16
`
</div>
<small class="text-muted text-right">
<s>12,600,000.00</s>
<b>12,000,000.00 vnđ</b>
</small>
</div>
</div>
</div>
</div>
<a href="#">
height="350"
src="img/ipad4.png">
</a>
<a href="#">
</a>
</div>
Trang 17
`
<s>12,000,000.00</s>
<b>11,800,000.00 vnđ</b>
</small>
</div>
</div>
</div>
</div>
<a href="#">
height="350"
src="img/iphone5.jpg">
</a>
<a href="#">
</a>
<p class="card-text">abcder</p>
</div>
Trang 18
`
<s>0.00</s>
<b>14,890,000.00 vnđ</b>
</small>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<a href="#">
height="350"
src="img/iphone5-white.jpg">
</a>
<a href="#">
</a>
</div>
Trang 19
`
<s>12,000,000.00</s>
<b>14,990,000.00 vnđ</b>
</small>
</div>
</div>
</div>
</div>
<a href="#">
height="350"
src="img/samsung-galaxy-tab-4.jpg">
</a>
<a href="#">
</a>
</div>
Trang 20
`
<s>12,000,000.00</s>
<b>10,990,000.00 vnđ</b>
</small>
</div>
</div>
</div>
</div>
<a href="#">
height="350"
src="img/samsung-galaxy-tab.jpg">
</a>
<a href="#">
</a>
</div>
<s>3,000,000.00</s>
Trang 21
`
<b>2,699,000.00 vnđ</b>
</small>
</div>
</div>
</div>
</div>
</div>


</main>


<footer class="footer mt-auto py-3">
<span>Bản quyền © bởi DuyHoan</a></span>
<p class="float-right">
<a href="#">Về đầu trang</a>
</p>
</div>
</footer>

<script src="bootstrap-4.6.0-dist/js/bootstrap.min.js"></script>


<script src="bootstrap-4.6.0-dist/js/bootstrap.js"></script>
Trang 22
`


<script src="script.js"></script>
</body>
</html>
-Drop down menu

<ul>
Trang 23
`
</ul>
</li>
</ul>
</div>
-Style:
#text{
color:#000000;
}
#navMenu ul {
margin-top: 02px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
Trang 24
`
padding-left: 0px;
list-style-type: none;
}
#navMenu li {
float: left;
}
#navMenu a {
display: block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
background-color: #343A40;
font-size: 1.09em;
}
#navMenu a:hover {
background-color: rgba(11,255,239,1.00);
}
#navMenu ul ul {
display: none;
position: absolute;
}
#navMenu ul li:hover > ul {
display: block;
}
#navMenu ul ul li {
float: none;}
Trang 25
`
Liên hệ:
<!doctype html>
<html lang="en">
<head>
<title>Bai tap lon</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T
" crossorigin="anonymous">
<link rel="stylesheet" href="bootstrap-4.6.0-dist/css/bootstrap.min.css">

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fontawesome-free-5.15.2-web/css/all.min.css">
</head>
<body>

<nav class="navbar navbar-expand-md navbar-dark sticky-top bg-dark">
<div class="navbar-collapse collapse" id="navbarCollapse">

<ul class="navbar-nav mr-auto">
Trang 26
`
<li class="nav-item active">
<a class="nav-link" href="index1.html">Trang chủ </span></a>
</li>
<a class="nav-link" href="#">Quản trị</a>
</li>
<div id="navMenu">
<ul>
<ul>
</ul>
</li>
</ul>
</div>
Trang 27
`
<a class="nav-link" href="#">Giới thiệu</a>
</li>
<a class="nav-link" href="index2.html">Liên hệ</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0" method="get" action="#">
<input class="form-control mr-sm-2" type="text" placeholder="Tìm
kiếm" aria-label="Search"
name="keyword_tensanpham">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Tìm kiếm</button>
</form>
</div>
<ul class="navbar-nav px-3">
<a class="nav-link" href="#">Giỏ hàng</a>
</li>

<a class="nav-link" href="index3.html">Đăng nhập</a>
</li>
</ul>
</div>
</nav>

Trang 28
`
<main role="main">
-->
<div class="container mt-2">
<h1 class="text-center">Liên hệ</h1>
<div class="row">
<div class="col col-md-6">
</div>
<form method="post" action="#">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email"
name="email"
placeholder="Email">
</div>
<label for="title">Tiêu đề</label>
<input type="text" class="form-control" id="title" name="title"
placeholder="Tiêu đề">
</div>
<label for="message">Lời nhắn</label>
<textarea name="message" class="form-control"></textarea>
</div>
<button class="btn btn-primary"
name="btnGoiLoiNhan">Gửi</button>
Trang 29
`
</form>
</div>
</div>
<div class="row mt-2">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3928.7235485722294!2d105.78061631523369!3d10.039656175103817!2m3!1f0!
2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31a062a768a8090b
%3A0x4756d383949cafbb!
2zMTMwIFjDtCBWaeG6v3QgTmdo4buHIFTEqW5oLCBBbiBI4buZaSwgTmluaCBL
aeG7gXUsIEPhuqduIFRoxqEsIFZp4buHdCBOYW0!5e0!3m2!1svi!2s!
4v1556697525436!5m2!1svi!2s"
width="100%" height="450" frameborder="0" style="border:0"
allowfullscreen=""></iframe>
</div>
</div>
</div>
</main>


<footer class="footer mt-auto py-3">
<span>Bản quyền © bởi DuyHoan</a></span>
<p class="float-right">
<a href="#">Về đầu trang</a>
</p>
</div>
Trang 30
`
</footer>

<script src="bootstrap-4.6.0-dist/js/bootstrap.min.js"></script>


<script src="bootstrap-4.6.0-dist/js/bootstrap.js"></script>


<script src="script.js"></script>
</body>
</html>

<h1 class="text-center">Liên hệ</h1>
<div class="row">
</div>
<form method="post" action="#">
Trang 31
`
<label for="email">Email</label>
<input type="email" class="form-control" id="email"
name="email"
placeholder="Email">
</div>
<label for="title">Tiêu đề</label>
<input type="text" class="form-control" id="title" name="title"
placeholder="Tiêu đề">
</div>
<label for="message">Lời nhắn</label>
<textarea name="message" class="form-control"></textarea>
</div>
<button class="btn btn-primary"
name="btnGoiLoiNhan">Gửi</button>
</form>
</div>
</div>
-Map:
Trang 32
`
<div class="row mt-2">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3928.7235485722294!2d105.78061631523369!3d10.039656175103817!2m3!1f0!
2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31a062a768a8090b
%3A0x4756d383949cafbb!
2zMTMwIFjDtCBWaeG6v3QgTmdo4buHIFTEqW5oLCBBbiBI4buZaSwgTmluaCBL
aeG7gXUsIEPhuqduIFRoxqEsIFZp4buHdCBOYW0!5e0!3m2!1svi!2s!
4v1556697525436!5m2!1svi!2s"
width="100%" height="450" frameborder="0" style="border:0"
allowfullscreen=""></iframe>
</div>
</div>
</div>
Trang đăng nhập:
<main role="main">
-->
<form name="frmdangnhap" id="frmdangnhap" method="post" action="#">
<div class="row justify-content-center">
Trang 33
`
<div class="card-group">
<div class="card p-4">
<h1>Đăng nhập</h1>
<p class="text-muted">Nhập thông tin Tài khoản</p>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="icon-user"></i>
</span>
</div>
<input class="form-control" type="text"
name="username"
placeholder="Tên đăng nhập">
</div>
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="icon-lock"></i>
</span>
</div>
<input class="form-control" type="password"
name="password"
placeholder="Mật khẩu">
</div>
<div class="row">
<div class="col-6">
<button class="btn btn-primary px-4"
name="btnDangNhap">Đăng nhập</button>
Trang 34
`
</div>
<div class="col-6 text-right">
<button class="btn btn-link px-0" type="button">Quên
mật khẩu?</button>
</div>
</div>
</div>
</div>
<div class="card text-white bg-primary py-5 d-md-down-none"
style="width:44%">
<div class="card-body text-center">
<div>
<h2>Đăng ký</h2>
<p>Đăng ký để làm thành viên của Trang web bán hàng.
Bạn sẽ được một số quyền
lợi nhất
định khi làm thành viên của Chúng tôi.</p>
<a class="btn btn-primary active mt-3" href="#">Đăng ký
ngay!</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</main>
Trang 35
`
Phần IV:
KẾT LUẬN
Kết quả nghiên cứu đề tài giúp em có thêm một phương pháp thiết kế và xây dựng
một Website, góp phần làm cho môi trường làm việc thuận tên và dễ dàng hơn. Vì vậy
tiếp cận đề tài là hướng đi đúng đắn.
Bài làm của em vẫn còn có nhiều thiếu sót, mong các thầy cô giúp đỡ em. nhiều
hơn.
Trang 36
`
Một lần nữa em xin chân thành cảm ơn các thầy cô giáo tại TRƯỜNG CAO ĐẲNG
CÔNG NGHỆ THÔNG TIN TP.HCM đã giúp đỡ em để có thể thực hiện được đề tài
này.............................................................................................................................
............................................................................................................................
............................................................................................................................
............................................................................................................................
............................................................................................................................
............................................................................................................................
............................................................................................................................
............................................................................................................................
............................................................................................................................
............................................................................................................................
............................................................................................................................
............................................................................................................................
Trang 37
`
Trang 38

LuongTranDuyHoan 501200025 CD20CT1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

LuongTranDuyHoan 501200025 CD20CT1

Uploaded by

Copyright:

Available Formats

`

BỘ LAO ĐỘNG THƯƠNG BINH & XÃ HỘI

BÁO CÁO TIỂU LUẬN

TIỂU LUẬN MÔN

Giảng viên hướng dẫn: NGUYỄN ĐÌNH HOÀNG.....

Tp.Hồ Chí Minh, tháng 07 năm 2021

Tp. HCM, ngày….tháng…..năm………

Phần II: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG...................................2

1.GIỚI THIỆU BOOSTRAP...................................................................2

C.Lý do sử dụng Bootstrap................................................................2

2.KHẢO SÁT HIỆN TRẠNG.................................................................3

3.PHÂN TÍCH CHỨC NĂNG TRANG WEB.......................................4

4.YÊU CẦU ĐẶT RA CHO TRANG WEB...........................................4

Phần III: THIẾT KẾ WEBSITE BÁN HÀNG............................................6

Phần IV: KẾT LUẬN...................................................................................35

1. GIỚI THIỆU BOOSTRAP

*So sánh Bootstrap 3 và Bootstrap 4:

2. KHẢO SÁT HIỆN TRẠNG

3. PHÂN TÍCH CHỨC NĂNG TRANG WEB

- Cho phép nhập hàng vào CSDL.

- Cho phép hệ thống quản trị mạng từ xa.

4. YÊU CẦU ĐẶT RA CHO TRANG WEB

Yêu cầu trang Web Hệ thống gồm có hai phần:

<div class="navbar-collapse collapse" id="navbarCollapse">

<li><a href="#">category 1</a></li>

<li><a href="#">category 2</a></li>

<li><a href="#">category 3</a></li>

<li><a href="#">category 4</a></li>

<li><a href="#">category 5</a></li>

-Drop down menu

<li><a class="nav-link" href="#">Sản phẩm</a>

<li><a href="#">category 2</a></li>

<li><a href="#">category 3</a></li>

<li><a href="#">category 4</a></li>

<li><a href="#">category 5</a></li>

<div class="navbar-collapse collapse" id="navbarCollapse">

<li><a href="#">category 1</a></li>

<li><a href="#">category 2</a></li>

<li><a href="#">category 3</a></li>

<li><a href="#">category 4</a></li>

<li><a href="#">category 5</a></li>

<div class="container mt-2">

You might also like