-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
Trang 1BỘ LAO ĐỘNG THƯƠNG BINH & XÃ HỘITRƯỜ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
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 2NHẬ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 3MỤ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 4Phầ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ựctuyế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ớingười tiêu dùng
Phần II:
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Trang 51 GIỚI THIỆU BOOSTRAP
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ớicá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
Trang 6-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ạinhà cung cấp và yêu cầu giao lại những mặt hàng bị trả đó
Trang 7Tiế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 8- 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 tincầ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ỉ emailcủa bạn vào Lúc đó bạn có thể nhận được thông tin cập nhật từ site
Trang 9* 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 10<title>Bai tap lon</title>
<! Required meta tags >
<link rel="stylesheet" href="bootstrap-4.6.0-dist/css/bootstrap.min.css">
<! style >
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fontawesome-free-5.15.2-web/css/all.min.css">
<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 11<li><a href="#">category 1</a></li>
<li><a href="#">category 2</a></li>
<li><a href="#">category 3</a></li>
Trang 12<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"
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Giỏ hàng</a>
</li>
<li class="nav-item text-nowrap">
<! Nếu chưa đăng nhập thì hiển thị nút Đăng nhập >
<a class="nav-link" href="index3.html">Đăng nhập</a>
Trang 13<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>
<div id="text" class="carousel-caption text-left">
<h1>DuyHoan Shop- Nơi mua sắm tuyệt vời</h1>
<div class="container marketing">
<! Three columns of text below the carousel >
Trang 15<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
Trang 16<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à
<a class="btn btn-sm btn-outline-secondary"
href="#">Xem chi tiết</a>
Trang 17<a class="btn btn-sm btn-outline-secondary"
href="#">Xem chi tiết</a>
</div>
Trang 18<small class="text-muted text-right">
<a class="btn btn-sm btn-outline-secondary"
href="#">Xem chi tiết</a>
</div>
<small class="text-muted text-right">
Trang 19<a class="btn btn-sm btn-outline-secondary"
href="#">Xem chi tiết</a>
</div>
Trang 20<small class="text-muted text-right">
<a class="btn btn-sm btn-outline-secondary"
href="#">Xem chi tiết</a>
</div>
<small class="text-muted text-right">
Trang 21<a class="btn btn-sm btn-outline-secondary"
href="#">Xem chi tiết</a>
</div>
<small class="text-muted text-right">
<s>3,000,000.00</s>
Trang 23<! Liên kết JS >
<script src="script.js"></script>
</body>
</html>
-Drop down menu
<li><a class="nav-link" href="#">Sản phẩm</a> <ul>
Trang 24<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>
Trang 26Liên hệ:
<!doctype html>
<html lang="en">
<head>
<title>Bai tap lon</title>
<! Required meta tags >
<link rel="stylesheet" href="bootstrap-4.6.0-dist/css/bootstrap.min.css">
<! style >
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fontawesome-free-5.15.2-web/css/all.min.css">
<div class="navbar-collapse collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">