Tiể ậ u lu n môn h c ọ thực hành thiết kế website thiết kế website bán sách cho cửa hàng si’s bookstore
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.75 MB, 67 trang )
TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT
VIỆN KỸ THUẬT CÔNG NGHỆ
TIỂU LUẬN MÔN HỌC
THỰC HÀNH THIẾT KẾ WEBSITE
THIẾT KẾ WEBSITE BÁN SÁCH
CHO CỬA HÀNG SI’S BOOKSTORE
GV: ThS. Nguyễn Hữu Vĩnh
SVTH: Nguyễn Hoàng Danh
MSSV: 2024802010387
LỚP: D20CNTT04
BNH DƯƠNG - 04/2021
0
0
TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT
VIỆN KỸ THUẬT CÔNG NGHỆ
TIỂU LUẬN MÔN HỌC
THỰC HÀNH THIẾT KẾ WEBSITE
THIẾT KẾ WEBSITE BÁN SÁCH
CHO CỬA HÀNG SI’S BOOKSTORE
GV: ThS. Nguyễn Hữu Vĩnh
SVTH: Nguyễn Hoàng Danh
MSSV: 2024802010387
LỚP: D20CNTT04
BNH DƯƠNG - 04/2021
i
0
0
MỤC LỤC
MỤC LỤC ..................................................................................................................... ii
DANH MỤC HÌNH ......................................................................................................iv
MỞ ĐẦU ......................................................................................................................... 1
CHƯƠNG 1. PKHẢO SÁT VÀ PHÂN TÍCH BÀI TỐN ....................................... 2
1.1. Phát biểu bài tốn .................................................................................................. 2
1.2. Phân tích các chức năng ........................................................................................ 2
CHƯƠNG 2. THIẾT KẾ GIAO DIỆN ........................................................................3
2.1. Giao diện trang chủ. .............................................................................................. 3
2.2. Giao diện trang đăng ký thành viên. ..................................................................... 4
2.3. Giao diện trang đăng nhập. ................................................................................... 5
2.4. Giao diện trang giới thiệu. .................................................................................... 5
2.5. Giao diện trang liên hệ. ......................................................................................... 6
2.6. Giao diện trang sách giáo khoa. ............................................................................ 7
2.7. Giao diện trang sách tham khảo. ........................................................................... 9
2.8. Giao diện trang sách bài tập. ............................................................................... 10
2.9. Giao diện trang Văn học Việt Nam. .................................................................... 11
2.10. Giao diện trang văn học nước ngoài. ................................................................ 12
2.11. Giao diện trang chi tiết sản phẩm. ..................................................................... 13
CHƯƠNG 3. THIẾT KẾ CHƯƠNG TRNH ........................................................... 15
3.1. Template. ............................................................................................................. 15
3.1.1. Source code HTML. ......................................................................................15
3.1.2. Định dạng CSS. ............................................................................................. 18
3.2. Trang chủ. ........................................................................................................... 20
3.2.1. Source code HTML. ......................................................................................20
3.2.2. Định dạng CSS. ............................................................................................. 24
3.3. Đăng nhập. .......................................................................................................... 27
3.3.1. Source code HTML. ......................................................................................27
3.3.2. Định dạng CSS. ............................................................................................. 28
3.4. Đăng ký. .............................................................................................................. 28
3.4.1. Source code HTML. ......................................................................................28
3.4.2. Đinh dạng CSS. ............................................................................................. 30
ii
0
0
3.5. Giới thiệu. ............................................................................................................ 30
3.5.1. Source code HTML. ......................................................................................30
3.5.2. Định dạng CSS. ............................................................................................. 30
3.6. Liên hệ. ................................................................................................................ 31
3.6.1. Source code HTML. ......................................................................................31
3.6.2. Đinh dạng CSS. ............................................................................................. 31
3.7. Sách giáo khoa. ................................................................................................... 32
3.7.1. Định dạng CSS. ............................................................................................. 35
3.8. Sách tham khảo. .................................................................................................. 36
3.8.1. Source code HTML. ......................................................................................36
3.8.2. Đinh dạng CSS. ............................................................................................. 40
3.9. Sách bài tập. ........................................................................................................ 41
3.9.1. Source code HTML. ......................................................................................41
3.9.2. Đinh dạng CSS. ............................................................................................. 45
3.10. Văn học Việt Nam. ............................................................................................ 46
3.10.1. Source code HTML. ....................................................................................46
3.10.2. Định dạng CSS. ...........................................................................................50
3.11. Văn học nước ngoài. ......................................................................................... 52
3.11.1. Source code HTML. ....................................................................................52
3.11.2. Định dạng CSS. ...........................................................................................56
3.12. Chi tiết sản phẩm. .............................................................................................. 57
3.12.1. Source code HTML. ....................................................................................57
3.12.2. Định dạng CSS. ...........................................................................................58
KẾT LUẬN ..................................................................................................................61
TÀI LIỆU THAM KHẢO ...........................................................................................62
iii
0
0
DANH MỤC HÌNH
Hình 2.1: Giao diện trang chủ 1. ............................................................................... 3
Hình 2.2: Giao diện trang chủ 2. ............................................................................... 4
Hình 2.3: Giao diện trang đăng ký. ........................................................................... 4
Hình 2.4: Giao diện trang đăng nhập. ........................................................................ 5
Hình 2.5: Giao diện trang giới thiệu. ......................................................................... 6
Hình 2.6: Giao diện trang liên hệ. ............................................................................. 7
Hình 2.7: Giao diện trang sách giáo khoa. ................................................................ 8
Hình 2.8: Giao diện trang sách tham khảo. ............................................................... 9
Hình 2.9: Giao diện trang sách bài t ập. ................................................................... 10
Hình 2.10: Giao diện trang Văn học Việt Nam. ...................................................... 11
Hình 2.11: Giao diện trang văn học nước ngồi. ..................................................... 12
Hình 2.12: Giao diện trang chi tiết sản phẩm. ......................................................... 13
iv
0
0
MỞ ĐẦU
Ngày nay học sinh, sinh viên rất lười trong việc đọc sách, thậm chí khơng bao giờ
đọc. Điều đó có thể là do việc lười ra thư viện mượn sách hoặc là do có nhiều trị chơi
điện tử hay các hoạt động khác hấp dẫn hơn việc đọc sách. Với việc phát triển của các
thiết bị di động hiện đại, thông minh với các trang mạng mua sắm trực tuyến thì việc đọc
sách của học sinh, sinh viên sẽ có thể dễ dàng hơn. Các cửa hàng trực tuyến này có nhiều
loại sách, thể loại sách phong phú có thể đáp ứng dược tất cả nhu cầu mà học sinh, sinh
viên đang có.
Để tao ra một mơi trường lành mạnh và giúp cho học sinh, sinh viên tiếp cận được
với sách một cách dễ dàng hơn thì em quyết định chọn đề tài “Thiết kế website Bán sách”.
1
0
0
Chương 1. Khảo sát và phân tích bài tốn
CHƯƠNG 1. PKHẢO SÁT VÀ PHÂN TÍCH BÀI TỐN
1.1. Phát biểu bài tốn
Website được xây dựng một các rõ ràng, dễ nhìn, dễ điều khiển và sắp xếp được
các sản phẩm một cách hợp lí theo từng nhóm l ớn để người mua có thể dễ dàng trong
việc truy cập, thao tác, quan sát và mua sản phẩm, ngoài ra cần chức năng liên hệ để
thuận tiện cho việc trao đổi với chủ trang web và trang giới thiệu để nói lên được sơ lượt
về trang web.
Sau khi người mua đăng kí thành viên có thể mua được những sản phẩm của trang
web, thấy được chi tiết của các sản phẩm đang được bán trên trang web và thực hiện
được nhiều chức năng của trang web hơn.
1.2. Phân tích các chức năng
STT
CHỨC NĂNG
MÔ TẢ
1
Giới thiệu
Giới thiệu tổng quan về trang web, trang web bán
sản phẩm gì.
2
Liên hệ
Đưa ra các thơng tin của chủ trang web như số
điện thoại, email để khách hàng tiện lợi trong việc
liên hệ.
3
Đăng ký
Giúp khách hàng có thể đăng ký được thành viên
của trang web.
4
Đăng nhập
Giúp người mua đăng nhập được vào trang web từ
tài khoản đã đăng ký.
Phân loại các s ản phẩm trong cùng một nhóm lại
5
Phân loại sản phẩm
với nhau, tạo thành nhiều nhóm để người mua có
thể dễ dàng chọn lựa.
Chỉ ra khách hàng được các chi tiết của một sản
6
Chi tiết sản phẩm
phẩm từ tên của sản phẩm, tác giả, giá, nhà xuất
bản,... khách hàng có thể đặt mua trên trang này.
2
0
0
Chương 2. Thiết kế giao diện
CHƯƠNG 2. THIẾT KẾ GIAO DIỆN
2.1. Giao diện trang chủ.
Hình 2.1: Giao diện trang chủ 1.
Gồm có các trang như sau: Trang chủ, Giới thiệu, Liên hệ, Sách giáo khoa và tham
khảo, Văn học, Đăng nhập, Đăng ký.
Trên trang chủ còn hiển thị menu bao gồm các trang Sách giáo khoa, Sách tha m
khảo, Sách bài tập, Văn học Việt Nam, Văn học nước ngoài. Bên cạnh đó trang cịn có
các slider hình ảnh quảng cáo, và các danh mục sản phẩm đang bán chạy và sản phẩm
mới để người mua có thể theo dỗi.
3
0
0
Chương 2. Thiết kế giao diện
Người dùng click chuột chọn vào các thẻ tương ứng để chọn được các mục mình
mong muốn.
Hình 2.2: Giao diện trang chủ 2.
2.2. Giao diện trang đăng ký thành viên.
Hình 2.3: Giao diện trang đăng ký.
- Ý nghĩa hoạt động: Đăng kí thành viên để sử dụng được nhiều chức năng của
trang web hơn.
4
0
0
Chương 2. Thiết kế giao diện
- Quy tắc hoạt động: Khách hàng muốn đăng kí thành viên để có thể mua được sản
phẩm cần phải tạo một tài khoản. Điền tất cả thông tin mà trang web yêu cầu để có thể
tạo được một tài khoản.
- Các thao tác màn hình: Người dùng nhập địa chỉ email, mật khẩu, nhập lại mật
khẩu, nhập vào họ tên, số điện thoại và ngày tháng năm sinh sau đó nhấn vào nút Đăng
kí để tạo tài khoản.
2.3. Giao diện trang đăng nhập.
Hình 2.4: Giao diện trang đăng nhập.
-
Ý nghĩa hoạt động: Đăng nhập vào trang web.
- Quy tắc hoạt động: Khách hàng s ử dụng email và mật khẩu đã đăng kí trước rồi
đăng nhập vào hệ thống bằng cách gõ thông tin email và mật khẩu vào khung mẫu. Khi
đăng nhập vào thành cơng thì khách hàng có thể xem và mua sản phẩm.
- Các thao tác màn hình: Khách hàng nhập email và mật khẩu đúng vào các ơ sau
đó bấm vào nút đăng nhập để có thể đăng nhập vào trang web.
2.4. Giao diện trang giới thiệu.
5
0
0
Chương 2. Thiết kế giao diện
Hình 2.5: Giao diện trang giới thiệu.
-
Ý nghĩa hoạt động: Đây là trang để giới thiệu sơ lượt về trang web.
- Quy tắc hoạt động: Trang này hiện thị thông tin về các loại sách mà cửa hàng
đang bán, các tiêu chí và phương châm của trang web.
- Thao tác màn hình: Click chuột vào phần Giới thiệu trên thanh điều hướng để có
thể đến được trang web, từ trang này có thể đến được các trang khác bằng cách click
vào ô tương ứng trên thanh điều hướng
2.5. Giao diện trang liên hệ.
- Ý nghĩa hoạt đông: Đưa ra các thông tin email, số điện thoại của trang web để
khách hàng có thể dễ dàng liên hệ.
- Quy tắc hoạt động: Khác hàng có thể sử dụng các thông tin hiển thị trên trang
web để liên lạc, đặt câu hỏi và có bất kì thiếu nại nào với trang web.
6
0
0
Chương 2. Thiết kế giao diện
- Thao tác màn hình: Click chuột vào phần Liên hệ trên thanh điều hướng để có
thể đến được trang web, từ trang này có thể đến được các trang khác bằng cách click
vào ô tương ứng trên thanh điều hướng
Hình 2.6: Giao diện trang liên hệ.
2.6. Giao diện trang sách giáo khoa.
- Ý nghĩa hoạt đông: Trang này chỉ hiển thị loại sách giáo khoa cho người mua lựa
chọn dễ dàng hơn.
- Quy tắc hoạt động: Khách hàng có thể lựa chọn và mua sách giáo khoa được hiển
thị trên trang, các sản phẩm được hiển thị theo tên và có để giá cho từng sản phẩm.
- Thao tác màn hình: Khác hàng có thể sử dụng thanh điều hướng để đến được các
trang khác, ngồi ra cịn có menu để đến được trang các loại sách khác. Để mua sản
phẩm được hiển thị khác hàng bấm và nút đặc mua bên dưới giá, để biết được chi tiết
của sản phẩm có thể bấm vào tên sản phẩm để đến được trang chi tiết sản phẩm.
7
0
0
Chương 2. Thiết kế giao diện
Hình 2.7: Giao diện trang sách giáo khoa.
8
0
0
Chương 2. Thiết kế giao diện
2.7. Giao diện trang sách tham khảo.
Hình 2.8: Giao diện trang sách tham khảo.
- Ý nghĩa hoạt đông: Trang này chỉ hiển thị loại sách tham khảo cho người mua
lựa chọn dễ dàng hơn.
- Quy tắc hoạt động: Khách hàng có thể lựa chọn và mua sách tham khảo được
hiển thị trên trang, các sản phẩm được hiển thị theo tên và có để giá cho từng sản phẩm.
- Thao tác màn hình: Khác hàng có thể sử dụng thanh điều hướng để đến được các
trang khác, ngồi ra cịn có menu để đến được trang các loại sách khác. Để mua sản
9
0
0
Chương 2. Thiết kế giao diện
phẩm được hiển thị khác hàng bấm và nút đặc mua bên dưới giá, để biết được chi tiết
của sản phẩm có thể bấm vào tên sản phẩm để đến được trang chi tiết sản phẩm.
2.8. Giao diện trang sách bài tập.
Hình 2.9: Giao diện trang sách bài t ập.
- Ý nghĩa hoạt đông: Trang này chỉ hiển thị loại sách tham khảo cho người mua
lựa chọn dễ dàng hơn.
- Quy tắc hoạt động: Khách hàng có thể lựa chọn và mua sách bài tập được hiển
thị trên trang, các sản phẩm được hiển thị theo tên và có để giá cho từng sản phẩm.
- Thao tác màn hình: Khác hàng có thể sử dụng thanh điều hướng để đến được các
trang khác, ngoài ra cịn có menu để đến được trang các loại sách khác. Để mua sản
10
0
0
Chương 2. Thiết kế giao diện
phẩm được hiển thị khác hàng bấm và nút đặc mua bên dưới giá, để biết được chi tiết
của sản phẩm có thể bấm vào tên sản phẩm để đến được trang chi tiết sản phẩm.
2.9. Giao diện trang Văn học Việt Nam.
Hình 2.10: Giao diện trang Văn học Việt Nam.
11
0
0
Chương 2. Thiết kế giao diện
- Ý nghĩa hoạt động: Trang này hiển thị các tác phẩm văn học Việt Nam với nhiều
thể loại truyện ngắn, tiểu thuyết, tùy bút,… để người đọc có thể lựa chọn.
- Quy tắc hoạt động: Sách văn học Việt Nam được để tên, bìa sách và cả giá sách,
khác hàng có thể xem được tổng quan trang web có bao nhiêu sản phẩm về văn học Việt
Nam từ nhiều giai đoạn khác nhau.
- Thao tác màn hình: Khác hàng có thể sử dụng thanh điều hướng để đến được các
trang khác, ngồi ra cịn có menu để đến được trang các loại sách khác. Để mua sản
phẩm được hiển thị khác hàng bấm và nút đặc mua bên dưới giá, để biết được chi tiết
của sản phẩm có thể bấm vào tên sản phẩm để đến được trang chi tiết sản phẩm.
2.10. Giao diện trang văn học nước ngồi.
Hình 2.11: Giao diện trang văn học nước ngoài.
12
0
0
Chương 2. Thiết kế giao diện
- Ý nghĩa hoạt động: Trang này hiển thị các tác phẩm văn học nước ngoài với nhiều
thể loại truyện ngắn, tiểu thuyết, tùy bút,… từ nhiều quốc gia khác nhau, để người đọc
có thể thoải mái lựa chọn.
- Quy tắc hoạt động: Sách văn học nước ngồi được để tên, bìa sách và cả giá sách,
khác hàng có thể xem được tổng quan trang web có bao nhiêu sản phẩm về văn học
nước ngồi từ nhiều quốc gia khác nhau.
- Thao tác màn hình: Khác hàng có thể sử dụng thanh điều hướng để đến được các
trang khác, ngồi ra cịn có menu để đến được trang các loại sách khác. Để mua sản
phẩm được hiển thị khác hàng bấm và nút đặc mua bên dưới giá, để biết được chi tiết
của sản phẩm có thể bấm vào tên sản phẩm để đến được trang chi tiết sản phẩm.
2.11. Giao diện trang chi tiết sản phẩm.
Hình 2.12: Giao diện trang chi tiết sản phẩm.
13
0
0
Chương 2. Thiết kế giao diện
- Ý nghĩa hoạt động: Trang này hiển thị chi tiết của sản phẩm được bán trong trang
web.
- Quy tắc hoạt động: Trang hiển thị cụ thể tất cả chi tiết của sản phẩm bao gồm:
tên sản phẩm, hình sản phẩm, tác giả của sản phẩm, thể loại của sản phẩm, nhà xuất bản
sản phẩm, giá sản phẩm, và giới thiệu sơ lượt về sản phẩm.
- Thao tác màn hình: Khác hàng có thể xem các giới thiệu chi tiết sản phẩm và có
thể mua sản phẩm bằng cách chọn nút Đặc mua.
14
0
0
Chương 3. Thiết kế chương trình
CHƯƠNG 3. THIẾT KẾ CHƯƠNG TRÌNH
3.1. Template.
3.1.1. Source code HTML.
<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width = device-width, initialscale = 1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link rel="shortcut icon" href="../Img/icon.png">
<link type="text/css" rel="stylesheet" href="../CSS/template.css">
href=" />
<body>
<header class="container">
<img src="../Img/banner.png" id="banner">
<a href="../Trangchu.html"><img src="../Img/logo.png" id="logo"></a>
<div id="dangnhap">
<a href="Dangnhap.html">Đăng nhập</a> |
</div>
</header>
<!-- TemplateBeginEditable name="nav" -->
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="container">
15
0
0
Chương 3. Thiết kế chương trình
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" datatoggle="collapse" data-target="#navbar1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../Trangchu.html">SI's
BOOKSTORE</a>
</div>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav">
<li><a href="../Trangchu.html">TRANG CHỦ</a> </li>
<li><a href="../Gioithieu.html">GIỚI THIỆU</a> </li>
<li><a href="../Lienhe.html">LIÊN HỆ</a> </li>
<li class="dropdown">
data-toggle="dropdown" role="button" aria-expanded="false" ariahaspopup="true">SÁCH GIÁO KHOA VÀ THAM KHẢO
<ul class="dropdown-menu">
<li><a href="../Sachgiaokhoa.html">Sách giáo khoa</a> </li>
<li role="separator" class="divider"></li>
<li><a href="../Sachthamkhao.html">Sách tham khảo</a> </li>
<li role="separator" class="divider"></li>
<li><a href="../Sachbaitap.html">Sách bài tập</a></li>
</ul>
</li>
<li class="dropdown"> data-toggle="dropdown" role="button" aria-expanded="false" ariahaspopup="true">VĂN HỌC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="../Vanhocnoi.html">Văn học Việt Nam</a> </li>
<li role="separator" class="divider"></li>
<li><a href="../Vanhocngoai.html">Văn học Nước ngoài </a> </li>
</ul>
16
0
0
Chương 3. Thiết kế chương trình
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Tìm kiếm">
</div>
<button type="submit" class="btn btn-default">Tìm</button>
</form>
</div>
</div>
</nav>
<!-- TemplateEndEditable -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="carousel1" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"> </li>
<li data-target="#carousel1" data-slide-to="1" class=""> </li>
<li data-target="#carousel1" data- slide-to="2" class=""> </li>
<li data-target="#carousel1" data- slide-to="3" class=""> </li>
</ol>
<div class="carousel-inner">
<div class="item active">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
17
0
0
Chương 3. Thiết kế chương trình
</div>
</div>
<a class="left carousel-control" href="#carousel1" dataslide="prev"><span class="icon-prev"></span></a> href="#carousel1" data-slide="next"><span class="icon-next"></span></a></div>
</div>
</div>
</div>
<!-- TemplateBeginEditable name="content" -->
<!code của các trang trong template!!>
<!-- TemplateEndEditable -->
<footer>
Si's Bookstore
Si's bookstore là cửa hàng bán sách do sinh viên làm để phục vụ cho
việc học Thiết kế web
Thông tin liên hệ:
<a href="mailto:">Email:
</a> | sđt: 0968703001
</footer>
</body>
</html>
3.1.2. Định dạng CSS.
@charset "utf-8";
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
img#banner{
width: 100%;
position: relative;
}
img#logo{
position: absolute;
18
0
0
Chương 3. Thiết kế chương trình
top: 0px;
left: 0px;
}
div#dangnhap{
position: absolute;
top: 0px;
right: 10px;
}
div#dangnhap>a{
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New
Roman", "serif";
font-weight: bold;
text-decoration: none;
color: #4C4C4C;
font-size: 20px;
}
footer{
margin-top: 20px;
background-color: black;
clear: both;
}
footer>h3{
color: white;
text-align: center;
border-bottom: 4px solid #FFFFFF;
padding-bottom: 10px;
}
footer>p{
color: white;
text-align: center;
}
body{
background-image: url("../Img/BG.png");
19
0
0
Chương 3. Thiết kế chương trình
}
nav{
margin-top: 10px;
}
.affix{
top: 0;
width: 100%;
z-index: 9999 !important;
}
.affix + .container-fluid {
padding-top: 70px;
}
3.2. Trang chủ.
3.2.1. Source code HTML.
<div id="tbody">
<div id="menu">
<div>
SÁCH GIÁO KHOA VÀ THAM KHẢO
<ul type="square">
<li><a href="Sachgiaokhoa.html">Sách giáo khoa</a></li>
<li><a href="Sachthamkhao.html">Sách tham khảo</a></li>
<li><a href="Sachbaitap.html">Sách bài tập</a></li>
</ul>
</div>
<div>
VĂN HỌC
<ul type="square">
<li><a href="Vanhocnoi.html">Văn học Việt Nam</a></li>
<li><a href="Vanhocngoai.html">Văn học nước ngoài</a></li>
</ul>
</div>
</div>
<img src="Img/hinh3.png">
20
0
0
