TRƯỜNG CAO ĐẲNG BÁCH KHOA NAM SÀI GÒN
KHOA CNTT - KTĐ
BÁO CÁO KẾT THÚC HỌC PHẦN
Tên đề tài:
WEBSITE BÁN SÁCH
GVHD: ThS. Đặng Văn Lực
SVTH: Đỗ Tuấn Anh MSSV: 1210110001 Lớp: CĐ21A-THUD Khóa 21
TPHCM, Ngày .......Tháng 06 Năm 2023 Website Bán Sách
LỜI MỞ ĐẦU
Ngày nay chúng ta đang được sống trong kỷ nguyên tin học nhờ sợ vượt bậc,
sự bùng nổ mạnh mẽ của công nghệ thông tin. Công nghệ thông tin không chỉ
dừng lại ở mục đích phục vụ cho khoa học kĩ thuật mà đi sâu vào đời sống,
chính trị, kinh tế, xã hội, trở nên thân thiện, gần gũi, mang lại nhiều lợi ích cho
con người. Công nghệ thông tin ngày cảng khẳng định được tính hữu dụng và
sức mạnh trong mọi phương tiện, mọi ngành nghề của cuộc sống, nhất là trong
thời đại kinh tế thị trường hiện như bây giờ.
Đi kèm theo đó, các hệ thông website cũng phát triển không ngừng với đủ
các lĩnh vực văn hoá, thời sự, khoa học công nghệ, làm đẹp, nấu ăn, thể thao, ca
nhạc, phim, … Tuy nhiên, để tạo ra một trang web có sức sống bền lâu thì bản
thân nó phải mang lại nhiều lợi ích cho nhiều người. Giao diện bắt mắt là yếu tố
quan trọng để người xem click chuột đến website của bạn. Những yếu tố quyết
định giữ chân độc giả lại nội dung mà website cung cấp. Tên Sinh Viên - Masv ii Website Bán Sách
LỜI CẢM ƠN
Trong quá trình thực hiện báo cáo em xin cảm ơn thầy Đăng Văn Lực đã chỉ
dạy cho tụi em và hoàn thành báo cáo. Em xin gửi tới thầy những lời cảm ơn
chân thành nhất. Mặc dù đã cố gắng trong quá trình nghiên cứu làm đề tài nhưng
còn nhiều hạn chế về thời gian và trình độ nên báo cáo của em không tránh khỏi
nhiều thiếu sót, và nhiều vấn đề chưa được giải quyết hoàn chỉnh. Vì vậy em rất
mong nhận được những ý kiến đóng góp của thầy và các bạn đề hoàn thiện và phát triển đề tài hơn
Em xin chân thành cảm ơn! Tên Sinh Viên - Masv iii Website Bán Sách
PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
................................................................................................................................. Tên Sinh Viên - Masv iv Website Bán Sách MỤC LỤC
CHƯƠNG 1: TỔNG QUAN ................................................................................. a
1.1. Tổng quan thông tin sản phẩm + công ty ................................................ a
1.2. Tổng quan ứng dụng HTML, CSS, JS .................................................... a
CHƯƠNG 2: THIẾT KẾ WEB ............................................................................. b
2.1. Thiết kế logo ............................................................................................... b
2.2. Thiết kế poster sự kiện, sản phẩm mới .................................................... c
2.3. Thiết kế layout website ............................................................................. e
2.4. Thiết kế sản phẩm ...................................................................................... f
CHƯƠNG 3: XÂY DỰNG WEBSITE ................................................................. g
3.1. Bố cục website ............................................................................................ g
3.1.1. Bố cục trang chủ .................................................................................. h
3.1.2. Bố cục trang sản phẩm ....................................................................... k
3.1.3. Bố cục trang chi tiết sản phẩm/ mua hàng....................................... m
3.2. Hiệu chỉnh (CSS, JS) ................................................................................. n
3.3. Demo ........................................................................................................... v
3.4. Xuất bản website ....................................................................................... x
CHƯƠNG 4: KẾT LUẬN .................................................................................. aa
4.1. Ưu Điểm .................................................................................................... aa
4.2. Khuyết Điểm ............................................................................................. aa
4.3. Hướng phát triển ...................................................................................... aa Tên Sinh Viên - Masv v Website Bán Sách
DANH MỤC HÌNH ẢNH Tên Sinh Viên - Masv vi Website Bán Sách Tên Sinh Viên - Masv vii Website Bán Sách vii Tên Sinh Viên - Masv i Website Bán Sách Tên Sinh Viên - Masv ix Website Bán Sách Tên Sinh Viên - Masv x Website Bán Sách Tên Sinh Viên - Masv xi Website Bán Sách
CHƯƠNG 1: TỔNG QUAN
1.1. Tổng quan thông tin sản phẩm + công ty
Cửa hàng sách Tuấn Anh với mong muốn mang đến cho toàn bộ khách hàng
trên khắp mọi miền tổ quốc Việt Nam làm ra. Không phân biệt tầng lớp, những
khách hàng chưa bao giờ được trải nghiệm dịch vụ mua sắm vượt ngoài mong
đợi, ai cũng được chào đón, tôn trọng khi đến với cửa hàng sách Tuấn Anh.
Chính vì vậy, cửa hàng sách Tuấn Anh dày công nghiên cứu về sản phẩm và cho
ra mắt những dòng sản phẩm tối ưu về giá cả và chất lượng mang đến cho khách hàng.
1.2. Tổng quan ứng dụng HTML, CSS, JS
HTML được sử dụng để tạo cấu trúc và các thành phần của website, CSS
để thiết kế giao diện của website theo ý muốn, và JS được sử dụng để làm các
chức năng nâng cao của website như hiệu ứng, kiểm soát dữ liệu, và tương tác
giữa người dùng và website. Các kỹ năng này đã giúp tôi có được nền tảng cơ
bản để phát triển các ứng dụng web và tạo ra những trang web có tính năng và giao diện ấn tượng. Tên Sinh Viên - Masv a Website Bán Sách
CHƯƠNG 2: THIẾT KẾ WEB
2.1. Thiết kế logo
Logo là một biểu tượng hình ảnh, ký hiệu hoặc chữ viết tắt được sử dụng để
đại diện cho một doanh nghiệp, thương hiệu hoặc tổ chức. Logo là yếu tố rất
quan trọng trong nhận diện thương hiệu và tiếp thị. Thiết kế logo đòi hỏi một số
yếu tố nhất định, bao gồm sự độc đáo, độ phức tạp thấp, dễ nhớ và độc lập với thời gian.
Để thiết kế một logo tiêu biểu, quy trình chung có thể được chia thành các bước sau:
+ Phân tích và nghiên cứu đối thủ cạnh tranh, khách hàng và mục tiêu của thương hiệu.
+ Tạo ra các ý tưởng logo ban đầu.
+ Tinh chỉnh ý tưởng thành bản vá.
+ Áp dụng phản hồi và sửa đổi cho logo.
+ Hoàn thành và xuất bản logo. Tên Sinh Viên - Masv b Website Bán Sách
2.2. Thiết kế poster sự kiện, sản phẩm mới
Để thiết kế được poster sự kiện và sản phẩm mới:
- Quảng bá sự kiện, sản phẩm mới của website đến cho mọi người.
- Gây được sự chú ý với một thiết kế poster hấp dẫn.
- Truyền tải thông tin đầy đủ và chính xác, sự kiện, sản phẩm mới để khách hàng
có thể biết thêm và tham gia.
- Tiêu đề: Phải được viết một cách rõ ràng, thú hút sự chú ý của người đọc với
kích cỡ và kiểu chữ thích hợp.
- Hình ảnh: Thêm hình ảnh liên quan đến sản phẩm mới của website bán sách
hoặc hỉnh ảnh liên quan đến sự kiện thu hút sự quan tâm của người đọc.
- Logo và tên thương hiệu: Bao gồm logo và tên thương hiệu của websute bán
sách tăng độ tin cậy của khách hàng. Tên Sinh Viên - Masv c Website Bán Sách Tên Sinh Viên - Masv d Website Bán Sách
2.3. Thiết kế layout website
- Header: Để logo của website dưới thanh điều hướng để khách hàng dễ dàng
truy cập vào các danh mục, tìm kiếm… Tên Sinh Viên - Masv e Website Bán Sách
- Tìm kiếm và sắp xếp: Tối ưu hoá hệ thống tìm kiếm và sắp xếp sản phẩm cho
phép ngưới dùng dễ dàng tìm kiếm sản phẩm mà họ còn dựa trên các tiêu chí
như tác giả, tên, danh mục, giá cả.
- Điều hướng danh mục: Thiết lập các danh mục, sách theo chuyên môn, thể
loại, khách hàng có thể tìm thấy nhanh chóng sản phẩm cần tìm kiếm.
- Thông tin sản phẩm: Hiển thị chi tiết sản phẩm bao gồm giới thiệu sách, giá cả,
số trang, số lượng, số điện thoại để đặt hàng.
- Slider: Giúp người dùng dễ dàng tìm thấy sách mới, đặc biệt các sản phẩm
đang được khuyến mãi.
2.4. Thiết kế sản phẩm
- Tạo ra một trang website bán sách đơn giản, dễ dàng sử dụng và thu hút khách hàng.
- Tập trung vào việc cung cấp thông tin về sách và đưa ra để sản xuất sản phẩm
hấp dẫn để khách hàng có thể mua được sản phẩm đúng như nhu cầu của mình.
- Giao diện phải tương thích với mọi thiết bị. Tên Sinh Viên - Masv f Website Bán Sách
CHƯƠNG 3: XÂY DỰNG WEBSITE
3.1. Bố cục website
Bố cục website được coi là yếu tố quan trọng để tạo nên một trang web mang
tính thẩm mỹ cao. Vậy bố cục website là gì? Cách tạo nên một thiết kế website với bố cục hoàn hảo. Bố cục website là gì?
Bố cục trang web (Website layou hay Layout website) là sự sắp xếp của tất
cả các phần tử trực quan trên trang web và các mối quan hệ giữa chúng như: căn
chỉnh tỷ lệ, khoảng cách, lựa chọn vị trí các thành phần trên web. Bố cục trang
web có thể cải thiện khả năng truyền tải thông điệp của trang web cũng như khả
năng sử dụng của nó thông qua việc định vị được những phần tử chủ đích. Tên Sinh Viên - Masv g Website Bán Sách
3.1.1. Bố cục trang chủ
Để tạo ra một bố cục trang chủ hiệu quả, em đã phân tích và đánh giá
nhiều trang web khác nhau, bao gồm các sản phẩm điện tử và những trang
web liên quan. Em đã thu thập thông tin về yếu tố mà các trang web đó sử
dụng để tạo ra bố cục trang chủ hiệu quả, bao gồm màu sắc, kiểu chữ, hình ảnh.
Sau khi phân tích các trang web điện tử khác nhau, tôi đã đưa ra một
mẫu thiết kế ban đầu cho bố cục trang chủ của sản phẩm. Tôi sử dụng
màu sắc tươi sáng để thu hút sự chú ý của người dùng và sử dụng các hình
ảnh rõ nét và hấp dẫn để truyền tải thông điệp sản phẩm. Tên Sinh Viên - Masv h Website Bán Sách Tên Sinh Viên - Masv i Website Bán Sách Tên Sinh Viên - Masv j Website Bán Sách
3.1.2. Bố cục trang sản phẩm
Em đã tạo ra một bố cục trang sản phẩm ban đầu. Em sử dụng các màu
sắc tương phản và bố cục đơn giản để sản phẩm nổi bật và dễ dàng để
quản lý. Em cũng chú trọng đến chi tiết sản phẩm và sử dụng các hình ảnh
rõ nét để truyền tải thông điệp sản phẩm. Em đã tạo ra một bố cục trang
sản phẩm với các phần chính: hình ảnh sản phẩm, chi tiết sản phẩm Tên Sinh Viên - Masv k Website Bán Sách Tên Sinh Viên - Masv l Website Bán Sách
3.1.3. Bố cục trang chi tiết sản phẩm/ mua hàng
Để tạo ra một bố cục trang chi tiết sản phẩm/mua hàng ban đầu. Em đã
tạo ra một bố cục trang chi tiết sản phẩm/mua hàng với các phần chính,
bao gồm hình ảnh sản phẩm chi tiết, giá cả, mô tả sách. Tên Sinh Viên - Masv m Website Bán Sách
3.2. Hiệu chỉnh (CSS, JS)
Các thuộc tính CSS chính được dùng để làm ra website:
✓ Font family: san – serif: Nhóm font không sử dụng nét trang trí.
✓ Background-color: Thay đổi màu nền cho phần tử HTML.
✓ CSS Hover: Trạng thái khi con trỏ chuột được di chuyển qua phần tử
HTML, thường được sử dụng để thiết lập các hiệu ứng tương tác và
thay đổi kiểu dáng của phần tử.
✓ Margin: Dùng để tạo khoảng trắng xung quanh phần tử.
✓ Padding: Cho phép xác định khoảng không gian giữa nội dung hiển
thị của một phần tử với đường viền của nó.
✓ Display: none: Ẩn đi một phần tử trên trang web.
✓ Display block: Hiển thị một phần tử như một khối trên trang web.
✓ Height: Thuộc tính dùng để thiết lập chiều cao (đơn vị đo theo pixel,
em hoặc %) cho phần tử HTML.
✓ Width: Thuộc tính dùng để thiết lập chiều rộng (đơn vị đo theo pixel,
em hoặc %) cho phần tử HTML.
✓ Border: Tạo đường viền
✓ Float: right: thuộc tính dùng để căn lề phần tử về phía bên phải của phần tử cha. Tên Sinh Viên - Masv n Website Bán Sách Tên Sinh Viên - Masv o Website Bán Sách Tên Sinh Viên - Masv p Website Bán Sách Tên Sinh Viên - Masv q Website Bán Sách Tên Sinh Viên - Masv r Website Bán Sách Tên Sinh Viên - Masv s Website Bán Sách Tên Sinh Viên - Masv t Website Bán Sách Tên Sinh Viên - Masv u Website Bán Sách 3.3. Demo Tên Sinh Viên - Masv v Website Bán Sách Tên Sinh Viên - Masv w Website Bán Sách
3.4. Xuất bản website Tên Sinh Viên - Masv x Website Bán Sách Tên Sinh Viên - Masv y Website Bán Sách Tên Sinh Viên - Masv z Website Bán Sách
CHƯƠNG 4: KẾT LUẬN 4.1. Ưu Điểm
- Dễ dàng truy cập và tìm kiếm sản phẩm.
- Cung cấp thông tin chi tiết về sản phẩm.
- Đa dạng sản phẩm.
4.2. Khuyết Điểm
- Tìm kiếm và sắp xếp chưa được tối ưu hoá.
- Thiếu tình tương tác và lưu trữ thông tin khách hàng.
- Chưa thêm được tình năng giao hàng.
- Vấn để bảo mật an ninh website chưa được đảm bảo.
4.3. Hướng phát triển
- Cải thiện trải nghiệm người dùng.
- Nâng cao tốc độ tải trang.
- Tăng số lượng sản phẩm quảng cáo.
- Đưa ra các chương trình khuyến mãi.
- Xây dựng thương hiệu với khách hàng. Tên Sinh Viên - Masv aa Website Bán Sách
TÀI LIỆU THAM KHẢO
Có thể tham khảo một số trang web: https://cachep.vn/
https://www.fahasa.com/ https://bookbuy.vn/ https://nobita.vn/ b Tên Sinh Viên - Masv b