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

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 ằ

Trang 1

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

Trang 2

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

Trang 3

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 TOÁN 2

1.1 Phát bi u bài toá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 TRNH 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.3 Đăng nhập 27

3.4 Đăng ký 28

3.4.2 Đinh dạng CSS 30

Trang 4

3.5 Gi i thi u 30ớ ệ

3.6 Liên h 31ệ 3.6.1 Source code HTML 31

3.7 Sách giáo khoa 32

3.8 Sách tham kh o 36ả 3.8.1 Source code HTML 36

3.9 Sách bài t p 41ậ 3.9.1 Source code HTML 41

3.10 Văn học Việt Nam 46

3.11 Văn học nước ngoài 52

3.11.2 Định d ng CSS 56ạ 3.12 Chi tiết sản phẩm 57

KẾT LUẬN 61 TÀI LIỆU THAM KH O 62Ả

Trang 5

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 ngoài 12

Hình 2.12: Giao di n trang chi ti t s n phệ ế ả ẩm 13

Trang 6

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ể ại sách phong phú có thlo ể đá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”

Trang 7

Chương 1 Khảo sát và phân tích bài toán

CHƯƠNG 1 PKHẢO SÁT VÀ PHÂN TÍCH BÀI TOÁN

1.1 Phát biểu bài toá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

của trang web

tài khoản đã đăng ký

5 Phân loại sản ph m ẩ

Phân lo i các s n ph m trong cùng m t nhóm lạ ả ẩ ộ ại với nhau, t o thành nhiạ ều nhóm để người mua có thể d dàng ch n lễ ọ ựa

6 Chi tiết sản ph m ẩ

Chỉ ra khách hàng được các chi tiết của một sản 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 ể đặ

Trang 8

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

Trang 9

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

Trang 10

- 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ướ ồi c rđă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.

Trang 11

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 ạ ặ ấ ạ

Trang 12

- 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, ngoà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á, để ết đượ bi 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

Trang 13

Hình 2.7: Giao diện trang sách giáo khoa

Trang 14

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, ngoài ra còn có menu để đến được trang các loại sách khác Để mua sản

Trang 15

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 ả

Trang 16

phẩm được hiển thị khác hàng bấm và nút đặc mua bên dưới giá, để ết đượ bi 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

Trang 17

- Ý 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, ngoà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á, để ết đượ bi 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 ngoài

Hình 2.11: Giao diện trang văn học nước ngoài

Trang 18

- Ý 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 ngoà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 ngoà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, ngoà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á, để ết đượ bi 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

Trang 19

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

Trang 20

Chương 3 Thiết kế chương trình

CHƯƠNG 3 THIẾT KẾ CHƯƠNG TRÌNH

<a href="Dangnhap.html">Đăng nhập</a> | <a

Trang 21

<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"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-

haspopup="true">SÁCH GIÁO KHOA VÀ THAM KH O<span Ả

class="caret"></span></a>

<li><a href=" /Sachthamkhao.html">Sách tham kh o</a> </li> ả

<li><a href=" /Vanhocngoai.html">Văn học Nước ngoài </a> </li> </ul>

Trang 22

<div class="col-xs-12 col-sm-12 col-md-12 col- -12"> lg

Trang 23

</div>

<a class="left carousel-control" href="#carousel1"

data-slide="prev"><span class="icon-prev"></span></a> <a class="right carousel-control" href="#carousel1" data-slide="next"><span class="icon-next"></span></a></div> </div>

Trang 24

Trang 25

</div>

Trang 26

</div>

Trang 27

<img src="Img/Vanhoc/Vanhocngoai/giet-con-chim-nhai.png"> <p class="tensach"><a href="Chitietsanpham/giet-con-chim-nhai.html">Giết con chim nh i</a></p> ạ

holmes.html">Sherlock Holmes</a></p>

Trang 28

Trang 29

</div>

<img src="Img/Vanhoc/Vanhocngoai/bo-con- -gai.png"> ca

<p class="tensach"><a href="Chitietsanpham/bo-con ca-

-gai.html">Bố con cá gai</a></p>

kho.html">Những người khốn khổ</a></p>

Trang 30

Trang 31

Trang 32

<h2>Đăng nhập vào trang web</h2>

<label for="email">Email:</label>

<input type="email" class="form-control" id="email"

placeholder="Nhập email" name="email">

</div>

<label for="pwd">Password:</label>

<input type="password" class="form-control" id="pwd"

placeholder="Nhập password" name="pwd">

Trang 33

font-weight: bold;

font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";

}

3.4 Đăng ký

<input type="password" class="form-control"

placeholder="Nhập mặt khẩu" required>

<input type="password" class="form-control"

placeholder="Nhập l i m t kh u" required> ạ ặ ẩ

Tiêu đề	Thiết kế website bán sách cho cửa hàng Si’s Bookstore
Tác giả	Nhóm Tác Giả
Người hướng dẫn	ThS. Nguyễn Hữu Vĩnh
Trường học	Trường Đại Học Thủ Dầu Một
Chuyên ngành	Thực hành Thiết kế Website
Thể loại	Tiểu luận môn học
Năm xuất bản	2021
Thành phố	Thủ Dầu Một

Định dạng
Số trang	67
Dung lượng	2,75 MB