Hướng dẫn thiết kế website bán sách cho cửa hàng Sis Bookstore

Khám phá môn học thiết kế website bán sách cho cửa hàng Sis Bookstore, từ lý thuyết đến thực hành, giúp nâng cao kỹ năng thiết kế.

• Tác giả: Nguyễn Hoàng Danh
• 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: Kỹ Thuật Công Nghệ
• Đề tài: Thiết Kế Website Bán Sách Cho Cửa Hàng Si’s Bookstore
• Loại tài liệu: tiểu luận
• Năm xuất bản: 2021
• Địa điểm: Bình Dương

Mục lục chi tiết

• MỞ ĐẦU
• 1. CHƯƠNG 1: KHẢO SÁT VÀ PHÂN TÍCH BÀI TOÁN
• 1.1. Phát biểu bài toán
• 1.2. Phân tích các chức năng
• 2. CHƯƠNG 2: THIẾT KẾ GIAO DIỆN
• 2.1. Giao diện trang chủ
• 2.2. Giao diện trang đăng ký thành viên
• 2.3. Giao diện trang đăng nhập
• 2.4. Giao diện trang giới thiệu
• 2.5. Giao diện trang liên hệ
• 2.6. Giao diện trang sách giáo khoa
• 2.7. Giao diện trang sách tham khảo
• 2.8. Giao diện trang sách bài tập
• 2.9. Giao diện trang Văn học Việt Nam
• 2.10. Giao diện trang văn học nước ngoài
• 2.11. Giao diện trang chi tiết sản phẩm
• 3. CHƯƠNG 3: THIẾT KẾ CHƯƠNG TRÌNH
• 3.1. Source code HTML
• 3.2. Định dạng CSS
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Thiết kế website bán sách Tổng quan

Tiểu luận tập trung vào thiết kế website bán sách cho cửa hàng Sis Bookstore. Mục tiêu chính là tạo ra một nền tảng thương mại điện tử trực tuyến thân thiện, dễ sử dụng, hiệu quả. Việc thiết kế chú trọng đến trải nghiệm người dùng, tối ưu hóa khả năng tìm kiếm (SEO website bán sách) và quản lý hiệu quả. Đây là một giải pháp bán sách online toàn diện, bao gồm các chức năng cần thiết như đăng ký thành viên, quản lý đơn hàng (quản lý đơn hàng website bán sách), và thanh toán trực tuyến (tích hợp thanh toán website bán sách). Website Sis Bookstore được kỳ vọng sẽ nâng cao hiệu quả kinh doanh và mở rộng phạm vi tiếp cận khách hàng.

1.1 Phân tích nhu cầu và mục tiêu

Nghiên cứu chỉ ra rằng việc đọc sách của học sinh, sinh viên đang giảm. Sự phát triển của thiết bị di động và thương mại điện tử tạo cơ hội tiếp cận sách dễ dàng hơn. Website bán sách online như Sis Bookstore giải quyết vấn đề này bằng cách cung cấp một thư viện sách trực tuyến đa dạng, tiện lợi. Mục tiêu là tăng doanh thu (tăng doanh thu website bán sách) và thu hút khách hàng (thu hút khách hàng website bán sách) thông qua trải nghiệm mua sắm trực tuyến tối ưu. Thiết kế chú trọng đến thương mại điện tử điện tử bán sách, tạo ra một platform bán sách online mạnh mẽ. Website bán sách chuyên nghiệp là chìa khóa thành công. Việc xây dựng website bán sách cần tính đến khả năng mở rộng và cập nhật nội dung thường xuyên. Quản lý website bán sách cũng cần được ưu tiên để đảm bảo hoạt động trơn tru. Khả năng phân tích dữ liệu website bán sách đóng vai trò quan trọng trong việc đánh giá hiệu quả hoạt động.

1.2 Chức năng chính của website

Website bao gồm các chức năng cơ bản như: trang chủ hiển thị sản phẩm nổi bật và mới (mẫu website bán sách đẹp); trang giới thiệu cửa hàng Sis Bookstore; trang liên hệ; trang đăng ký và đăng nhập thành viên; các trang danh mục sách (giáo khoa, tham khảo, bài tập, văn học Việt Nam, văn học nước ngoài); và trang chi tiết sản phẩm với đầy đủ thông tin. Thiết kế website responsive bán sách đảm bảo trải nghiệm tốt trên mọi thiết bị. Chức năng tìm kiếm giúp người dùng dễ dàng tìm thấy sách cần thiết. Plugin website bán sách và theme website bán sách được lựa chọn kỹ lưỡng để tối ưu hiệu năng và tính thẩm mỹ. Quản lý kho hàng website bán sách là một tính năng quan trọng giúp theo dõi số lượng sách hiện có. An ninh website bán sách cũng được ưu tiên để bảo vệ dữ liệu người dùng. Website bán sách đa ngôn ngữ có thể được xem xét trong tương lai để mở rộng thị trường.

II. Thiết kế giao diện người dùng UI UX

Giao diện website cần trực quan, dễ sử dụng. Sử dụng hình ảnh chất lượng cao, bố cục rõ ràng, thông tin được sắp xếp hợp lý. Thiết kế website thương mại điện tử bán sách cần thân thiện với người dùng trên mọi thiết bị. Website bán sách thân thiện với mobile là yếu tố cần thiết. Tối ưu hóa website bán sách về mặt tốc độ tải trang và khả năng tương thích trên nhiều trình duyệt. Việc lựa chọn nhà cung cấp thiết kế website bán sách cần được cân nhắc kỹ lưỡng.

2.1 Giao diện trang chủ

Trang chủ là ấn tượng đầu tiên. Thiết kế cần thu hút, hiển thị thông tin chính xác và đầy đủ. Sử dụng hình ảnh banner đẹp mắt, menu điều hướng rõ ràng. Khách hàng cần dễ dàng tìm thấy những gì họ cần. Marketing website bán sách được tích hợp thông qua các hình ảnh và banner quảng cáo hấp dẫn. Content marketing website bán sách được thực hiện qua các bài viết giới thiệu sách hoặc các chương trình khuyến mãi. Social media marketing website bán sách được sử dụng để tăng tương tác và tiếp cận khách hàng rộng hơn. Email marketing website bán sách gửi các thông tin khuyến mãi hoặc cập nhật sản phẩm mới tới khách hàng.

2.2 Các giao diện khác

Các trang khác như trang sản phẩm, trang chi tiết sản phẩm, trang giỏ hàng, trang thanh toán cần thiết kế thống nhất với trang chủ. Thông tin cần đầy đủ, chính xác và dễ hiểu. Việc sử dụng hình ảnh chất lượng cao là điều cần thiết. Giữ chân khách hàng website bán sách thông qua các chương trình khuyến mãi hoặc quà tặng. Chăm sóc khách hàng website bán sách là yếu tố quan trọng quyết định sự thành công của website. Quảng cáo website bán sách cần được thực hiện một cách bài bản để tiếp cận khách hàng mục tiêu. Báo cáo website bán sách giúp theo dõi hiệu quả hoạt động.

III. Phát triển và triển khai website

Quá trình phát triển bao gồm thiết kế, lập trình, kiểm thử và triển khai. Sử dụng công nghệ phù hợp, đảm bảo bảo mật và hiệu năng cao. Chi phí thiết kế website bán sách cần được tính toán kỹ lưỡng. Việc kinh nghiệm thiết kế website bán sách và xu hướng thiết kế website bán sách cần được xem xét.

3.1 Công nghệ sử dụng

Chọn các công nghệ phù hợp với ngân sách và yêu cầu của dự án. HTML, CSS, JavaScript cho giao diện. PHP, Python hoặc các framework khác cho backend. Database MySQL hoặc tương tự để lưu trữ dữ liệu. Phần mềm bán sách online được lựa chọn dựa trên hiệu năng và khả năng mở rộng. Việc tối ưu hóa website bán sách là chìa khóa thành công.

3.2 Triển khai và bảo trì

Sau khi hoàn thành, website được triển khai lên môi trường hosting phù hợp. Bảo trì định kỳ để đảm bảo hoạt động ổn định. Cập nhật thường xuyên để khắc phục lỗi và cải thiện hiệu năng. Theo dõi thống kê website bán sách để đánh giá hiệu quả hoạt động. Thu hút khách hàng website bán sách là mục tiêu chính, nên việc marketing và quảng cáo cần được chú trọng.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Vấn đề hình thành và phát triển văn hóa đọc trong giới trẻ đang đứng trước nhiều thách thức. Theo quan sát thực tiễn của tác giả, một bộ phận lớn học sinh, sinh viên ngày nay có xu hướng ít đọc sách hoặc chưa duy trì được thói quen đọc thường xuyên. Nguyên nhân chủ yếu xuất phát từ tâm lý e ngại việc đến thư viện truyền thống mượn sách, cùng sự cạnh tranh mạnh mẽ từ các hình thức giải trí trực tuyến như trò chơi điện tử và mạng xã hội. Tuy nhiên, sự phát triển nhanh chóng của các thiết bị di động thông minh và các nền tảng thương mại điện tử đã mở ra cơ hội mới giúp người học tiếp cận nguồn sách một cách thuận tiện, nhanh chóng và phong phú hơn.

Xuất phát từ bối cảnh đó, đề tài "Thiết kế website bán sách cho cửa hàng Si's Bookstore" được sinh viên Nguyễn Hoàng Danh (Lớp D20CNTT04, MSSV: 2024802010387) thực hiện dưới sự hướng dẫn của ThS. Nguyễn Hữu Vĩnh tại Viện Kỹ thuật Công nghệ, Trường Đại học Thủ Dầu Một (Bình Dương, hoàn thành vào tháng 04/2021) trong khuôn khổ tiểu luận môn học Thực hành Thiết kế Website.

Nhiệm vụ và mục tiêu cụ thể của đề tài bao gồm:

1. Khảo sát nhu cầu và phân tích các yêu cầu chức năng nghiệp vụ của một website bán sách trực tuyến.
2. Xây dựng cấu trúc điều hướng rõ ràng, thiết kế hệ thống giao diện người dùng trực quan, khoa học và dễ thao tác.
3. Tổ chức phân loại sản phẩm sách theo các nhóm ngành chuyên biệt (sách giáo khoa, sách tham khảo, sách bài tập, văn học trong nước và quốc tế).
4. Hiện thực hóa giao diện website bằng mã nguồn chuẩn HTML và CSS, tích hợp các thành phần điều khiển responsive và trình chiếu đa phương tiện.

Đối tượng và phạm vi nghiên cứu:

• Đối tượng nghiên cứu: Cấu trúc giao diện, mô hình tương tác người dùng và mã nguồn giao diện (Front-end) của website thương mại điện tử bán sách Si's Bookstore.
• Phạm vi không gian và thời gian: Nghiên cứu và triển khai trong khuôn khổ môn học tại Trường Đại học Thủ Dầu Một, tỉnh Bình Dương, thời điểm tháng 04/2021.
• Phạm vi kỹ thuật: Tập trung vào việc phân tích chức năng, xây dựng layout, định dạng phong cách giao diện và tích hợp các trang tĩnh thông qua HTML5, CSS3 và thư viện Bootstrap.

---

Cơ sở lý thuyết và phương pháp

Khung lý thuyết và công nghệ áp dụng

Đề tài dựa trên các nguyên lý thiết kế giao diện web hiện đại và các tiêu chuẩn phát triển front-end tiêu chuẩn:

• Ngôn ngữ HTML (HyperText Markup Language): Định hình khung xương, cấu trúc các khối nội dung, bảng biểu, biểu mẫu nhập liệu và các liên kết điều hướng trong hệ thống.
• Ngôn ngữ định dạng CSS (Cascading Style Sheets): Thiết lập quy tắc thẩm mỹ, màu sắc, font chữ, bố cục hiển thị (float, position, margin, padding, border-radius).
• Thư viện Bootstrap Framework (phiên bản tích hợp qua MaxCDN): Cung cấp hệ thống lưới (Grid System) để phân chia cột linh hoạt (col-md-6, col-sm-6, col-xs-12), các thành phần giao diện mẫu (navbar, carousel, form-control, btn, dropdown-menu) và hiệu ứng ghim thanh điều hướng (affix).
• Thư viện jQuery (phiên bản 3.x CDN): Hỗ trợ các tương tác động trên giao diện và kích hoạt các plugin của Bootstrap như thanh trượt ảnh (carousel) và menu thả xuống (dropdown).
• Mô hình kiến trúc trang mẫu (Web Templates): Phân định vùng cấu trúc dùng chung (header, navbar, footer) và các vùng nội dung có thể biên tập (TemplateBeginEditable name="content").

Phương pháp nghiên cứu và triển khai

Tác giả áp dụng quy trình phát triển phần mềm theo định hướng thiết kế giao diện:

• Phương pháp phân tích yêu cầu: Khảo sát hành vi tìm kiếm và mua sách của học sinh, sinh viên nhằm xác định các nhóm chức năng cốt lõi.
• Phương pháp thiết kế hướng module: Phân tách toàn bộ hệ thống website thành các thành phần giao diện độc lập, từ trang chủ, trang quản lý tài khoản đến các trang danh mục chuyên biệt và chi tiết sản phẩm.
• Phương pháp lập trình và hiện thực hóa: Trực tiếp viết mã nguồn HTML5, viết tệp định kiểu CSS riêng biệt và liên kết các tài nguyên hình ảnh được chuẩn hóa theo từng danh mục thư mục.

---

Nội dung chính theo từng chương

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

Chương này tập trung xác định bài toán nghiệp vụ và mô hình hóa các chức năng cần xây dựng cho website Si's Bookstore. Tác giả phát biểu bài toán tổng quát: hệ thống cần một giao diện rõ ràng, dễ nhìn, dễ điều khiển, sắp xếp sản phẩm hợp lý theo từng nhóm lớn để khách hàng thuận tiện truy cập, thao tác và đặt mua; đồng thời phải có cơ chế liên hệ và giới thiệu thông tin cửa hàng. Sau khi đăng ký và đăng nhập tài khoản thành viên, người dùng có thể xem chi tiết sản phẩm và sử dụng đầy đủ các tiện ích trên hệ thống.

Bảng tổng hợp phân tích 6 chức năng chính được tác giả xây dựng như sau:

STT	Tên chức năng	Mô tả chi tiết nghiệp vụ
1	Giới thiệu	Cung cấp thông tin tổng quan về website, phương châm hoạt động và phạm vi các loại sách được cung cấp.
2	Liên hệ	Hiển thị thông tin liên lạc của chủ trang web (số điện thoại, email) để khách hàng gửi phản hồi hoặc thắc mắc.
3	Đăng ký	Cho phép khách hàng tạo tài khoản thành viên mới bằng cách cung cấp các thông tin cá nhân cần thiết.
4	Đăng nhập	Cho phép người dùng đã đăng ký xác thực vào hệ thống để mua sản phẩm và thực hiện các chức năng nâng cao.
5	Phân loại sản phẩm	Gom nhóm và phân chia các đầu sách thành từng chuyên mục cụ thể giúp người dùng dễ dàng tìm kiếm và lựa chọn.
6	Chi tiết sản phẩm	Hiển thị đầy đủ thông tin về tên sách, ảnh bìa, tác giả, nhà xuất bản, giá bán, mô tả tóm tắt và nút đặt mua.

Chương 2: Thiết kế giao diện

Chương 2 trình bày chi tiết bản vẽ thiết kế và mô tả nguyên lý hoạt động của 12 màn hình giao diện trong hệ thống:

• Giao diện trang chủ: Bao gồm thanh định danh trên cùng (banner, logo, liên kết đăng nhập/đăng ký), thanh điều hướng ngang đa cấp (navbar có chức năng tìm kiếm), slider trình chiếu hình ảnh tự động (carousel), cột menu danh mục phụ bên trái và hai vùng hiển thị sách trọng tâm: "SẢN PHẨM MỚI" và "SẢN PHẨM BÁN CHẠY".
• Giao diện trang đăng ký thành viên: Cung cấp biểu mẫu thu thập dữ liệu gồm: Địa chỉ Email, Mật khẩu, Nhập lại mật khẩu, Họ và tên, Số điện thoại, Ngày tháng năm sinh. Đi kèm có nút xác nhận "Đăng Ký" và nút "Hủy" điều hướng về trang chủ.
• Giao diện trang đăng nhập: Biểu mẫu gọn gàng gồm trường Email, Mật khẩu, hộp kiểm (checkbox) "Ghi nhớ đăng nhập", nút thực thi "Đăng nhập" và nút "Hủy".
• Giao diện trang giới thiệu: Trình bày hình ảnh đại diện và văn bản giới thiệu về sứ mệnh, tôn chỉ "khách hàng là thượng đế", các dòng sách cung ứng và ghi chú về mục đích học tập của trang web.
• Giao diện trang liên hệ: Hiển thị thông tin hỗ trợ khách hàng, số điện thoại đường dây nóng và hộp thư điện tử chính thức.
• Giao diện các danh mục sách:
  • Sách giáo khoa: Liệt kê đầy đủ bộ sách từ lớp 1 đến lớp 12 kèm hình ảnh bìa, giá tiền và nút đặt mua.
  • Sách tham khảo & Sách bài tập: Trình bày danh sách tài liệu bổ trợ theo lưới sản phẩm chuẩn.
  • Văn học Việt Nam: Trưng bày các tác phẩm văn học nước nhà qua nhiều giai đoạn.
  • Văn học nước ngoài: Giới thiệu các ấn phẩm văn học kinh điển quốc tế.
• Giao diện trang chi tiết sản phẩm: Trình bày thông tin chuyên sâu của từng ấn phẩm gồm tên sách, ảnh phóng to, tác giả, thể loại, nhà xuất bản, đơn giá, đoạn văn trích lược giới thiệu nội dung và nút "Đặt mua".

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

Chương 3 công bố toàn bộ mã nguồn xây dựng giao diện (HTML) và các tệp định kiểu (CSS) của hệ thống:

• Khung Template HTML: Thiết lập cấu trúc chuẩn HTML5, tích hợp các thẻ meta responsive, nạp thư viện Bootstrap 3 và jQuery qua CDN; xây dựng cấu trúc header, nav hỗ trợ tính năng cố định màn hình data-spy="affix", khối carousel slide chứa 4 ảnh banner quảng cáo (slider1.png, slider2.png, slider3.jpg, slider4.jfif), và khối footer nền đen chữ trắng.
• Định dạng CSS tùy biến:
  • Định dạng toàn cục: Reset lề * { margin: 0px; padding: 0px; }.
  • Thiết lập định vị tuyệt đối cho logo (position: absolute; top: 0px; left: 0px;) và khối liên kết đăng nhập (top: 0px; right: 10px;).
  • Xây dựng kiểu hiển thị thẻ sản phẩm .anhspmoi: Kích thước rộng 220px, viền nét chấm mảnh border: 1px dotted #524949, bo góc tròn 5px, căn giữa nội dung, tạo khoảng cách lề margin: 10px và thả trôi float: left.
  • Phối màu sắc và kiểu chữ: Tiêu đề danh mục sử dụng mã màu xanh dương đậm #1F49BC (font Segoe UI), tên sách dùng chữ đậm màu xanh lam (color: blue), đơn giá làm nổi bật bằng chữ đậm màu đỏ (color: red; font-size: 16px), khối menu bên trái có viền màu #E99092 và tiêu đề nền hồng (background-color: pink).

---

Thiết kế và triển khai

Tổ chức cấu trúc và bố cục Front-end

Website được tổ chức theo cấu trúc dạng lưới và mô hình chia khung chuẩn:

[ HEADER: Banner + Logo + Liên kết Đăng nhập / Đăng ký ]
[ NAVBAR: Trang chủ | Giới thiệu | Liên hệ | Dropdown Sách GK & TK | Dropdown Văn học | Ô Tìm kiếm ]
[ BANNER SLIDER: Trình chiếu 4 slide ảnh chuyển động ]
[ BODY CHÍNH ]
[ FOOTER: Tên cửa hàng + Thông tin liên hệ (Email, Số điện thoại) + Ghi chú bản quyền ]

Dữ liệu sản phẩm thực tế được hiện thực

Trong mã nguồn của hệ thống, tác giả đã tích hợp trực tiếp một cơ sở dữ liệu mẫu gồm nhiều đầu sách cùng mức giá cụ thể:

Phân loại	Tên tác phẩm / Bộ sách	Đơn giá hiển thị	Đường dẫn liên kết chi tiết
Văn học Việt Nam	Chuyện nhỏ sớm mùa thu	121.000 VNĐ	Chitietsanpham/chuyen-nho-som-mua-thu.html
Văn học Việt Nam	Chí Phèo	39.500 VNĐ	Chitietsanpham/chi-pheo.html
Văn học Việt Nam	Tắt đèn	42.000 VNĐ	Chitietsanpham/tat-den.html
Văn học Việt Nam	Số đỏ	52.000 VNĐ	Chitietsanpham/so-do.html
Văn học Việt Nam	Mắt biếc	75.000 VNĐ	Chitietsanpham/mat-biec.html
Văn học Việt Nam	Nói về cái đầu tôi	30.000 VNĐ	Chitietsanpham/noi-ve-cai-dau-toi.html
Văn học Việt Nam	Gió lạnh	35.000 VNĐ	Chitietsanpham/gio-lanh.html
Văn học nước ngoài	Hachiko chú chó đợi chờ	55.000 VNĐ	Chitietsanpham/hachiko-chu-cho-doi-cho.html
Văn học nước ngoài	Giết con chim nhại	104.000 VNĐ	Chitietsanpham/giet-con-chim-nhai.html
Văn học nước ngoài	Suối nguồn	300.000 VNĐ	Chitietsanpham/suoi-nguon.html
Văn học nước ngoài	Sherlock Holmes toàn tập	562.000 VNĐ	Chitietsanpham/sherlock-holmes.html
Văn học nước ngoài	Bố con cá gai	75.000 VNĐ	Chitietsanpham/bo-con-ca-gai.html
Văn học nước ngoài	Những người khốn khổ	134.000 VNĐ	Chitietsanpham/nhung-nguoi-khon-kho.html
Sách giáo khoa	Bộ sách giáo khoa lớp 1	54.000 VNĐ	#
Sách giáo khoa	Bộ sách giáo khoa lớp 2	53.000 VNĐ	#
Sách giáo khoa	Bộ sách giáo khoa lớp 3	58.000 VNĐ	#
Sách giáo khoa	Bộ sách giáo khoa lớp 4	87.000 VNĐ	#
Sách giáo khoa	Bộ sách giáo khoa lớp 5	100.000 VNĐ	#
Sách giáo khoa	Bộ sách giáo khoa lớp 6	115.000 VNĐ	#
Sách giáo khoa	Bộ sách giáo khoa lớp 7	134.000 VNĐ	#
Sách giáo khoa	Bộ sách giáo khoa lớp 8	149.000 VNĐ	#
Sách giáo khoa	Bộ sách giáo khoa lớp 9	140.000 VNĐ	#
Sách giáo khoa	Bộ sách giáo khoa lớp 10	164.000 VNĐ	#
Sách giáo khoa	Bộ sách giáo khoa lớp 11	169.000 VNĐ	#
Sách giáo khoa	Bộ sách giáo khoa lớp 12	180.000 VNĐ	#

---

Kết quả và đóng góp

Kết quả chính

• Đề tài đã xây dựng thành công bộ giao diện hoàn chỉnh cho website bán sách Si's Bookstore với 12 màn hình giao diện chuyên biệt, đáp ứng các tiêu chuẩn thẩm mỹ và yêu cầu chức năng đặt ra trong giai đoạn khảo sát.
• Thiết lập hệ thống cấu trúc tệp tin mã nguồn rõ ràng, phân định riêng giữa các trang nội dung HTML, các tệp kiểu mẫu CSS và kho tài nguyên đa phương tiện (hình ảnh sản phẩm, slider, logo, banner).
• Tích hợp thành công các tính năng giao diện động thông qua thư viện Bootstrap và jQuery: thanh điều hướng cuộn trang giữ nguyên vị trí (affix), trình chiếu ảnh tự động chuyển động (carousel), và các biểu mẫu nhập liệu có cơ chế kiểm tra tính hợp lệ cơ bản (required, type="email", type="tel", type="date").

Đóng góp thực tiễn

• Cung cấp một sản phẩm mẫu hoàn chỉnh về thiết kế giao diện website thương mại điện tử ở quy mô môn học thực hành.
• Thể hiện phương pháp tiếp cận có hệ thống từ khâu phân tích bài toán, phân rã chức năng, phác thảo giao diện đến bước lập trình chi tiết mã nguồn giao diện.

---

Hạn chế và hướng nghiên cứu tiếp

Hạn chế

Theo ghi chú trực tiếp của tác giả trong tài liệu:

• Đây là sản phẩm được thực hiện trong khuôn khổ môn học Thực hành Thiết kế Website nên cấu trúc còn tương đối đơn giản và sơ sài.
• Toàn bộ hệ thống dừng lại ở mức giao diện Front-end tĩnh (HTML/CSS), các biểu mẫu (form) mới chỉ trỏ hành động về tệp xử lý mẫu (action_page.php) mà chưa có hệ thống xử lý Backend thực thụ.
• Chưa kết nối cơ sở dữ liệu động (Database) để quản trị sách, chưa có chức năng giỏ hàng lưu trạng thái mua sắm và chưa tích hợp cổng thanh toán trực tuyến.

Hướng phát triển tiếp

• Xây dựng hệ cơ sở dữ liệu quan hệ (như MySQL/SQL Server) để quản lý danh mục sách, đơn hàng và tài khoản người dùng một cách tự động.
• Phát triển hệ thống xử lý phía máy chủ (Backend) bằng các ngôn ngữ web chuyên dụng để xử lý logic đăng ký, đăng nhập, giỏ hàng và thanh toán.
• Bổ sung trang quản trị (Admin Dashboard) phục vụ việc thêm, sửa, xóa sản phẩm và theo dõi doanh thu bán sách.

---

Giá trị tham khảo

Tài liệu tiểu luận này mang lại giá trị tham khảo thiết thực cho:

• Sinh viên ngành Công nghệ thông tin, Kỹ thuật phần mềm: Làm tài liệu tham khảo trực tiếp khi thực hiện đồ án môn học Thiết kế Web, Thực hành Web căn bản hoặc Lập trình Front-end.
• Người học lập trình Web nhập môn: Cung cấp mẫu bố cục giao diện bán hàng kinh điển, cú pháp kết hợp giữa HTML5, CSS tùy biến và thư viện Bootstrap 3 Grid/Affix/Carousel.
• Phần đáng tham khảo nhất: Cấu trúc xây dựng trang Master Template và phương pháp phân tách các lớp CSS cho từng khối danh mục sản phẩm.

---

Câu hỏi thường gặp

1. Mục tiêu chính của việc xây dựng website Si's Bookstore là gì?

Website được xây dựng nhằm tạo ra một môi trường mua sách trực tuyến lành mạnh, tiện lợi, giúp học sinh và sinh viên tiếp cận sách dễ dàng hơn thông qua các thiết bị thông minh, khắc phục tình trạng lười đọc và ngại đến thư viện truyền thống.

2. Hệ thống giao diện của Si's Bookstore bao gồm những trang chính nào?

Hệ thống gồm 12 màn hình giao diện: Trang chủ, Trang đăng ký thành viên, Trang đăng nhập, Trang giới thiệu, Trang liên hệ, Trang sách giáo khoa, Trang sách tham khảo, Trang sách bài tập, Trang Văn học Việt Nam, Trang Văn học nước ngoài và Trang chi tiết sản phẩm.

3. Biểu mẫu đăng ký thành viên của website yêu cầu những thông tin gì?

Biểu mẫu đăng ký yêu cầu người dùng điền 6 trường thông tin bắt buộc: Địa chỉ email, Mật khẩu, Nhập lại mật khẩu, Họ và tên, Số điện thoại và Ngày tháng năm sinh.

4. Những công nghệ và thư viện nào được sử dụng để xây dựng website?

Tác giả sử dụng HTML5, CSS3, thư viện giao diện Bootstrap (bao gồm các module Grid, Navbar, Dropdown, Affix, Carousel), thư viện jQuery 3.x và mô hình Template chỉnh sửa trang.

5. Thông tin liên hệ của chủ trang web được công bố trong tài liệu gồm những gì?

Thông tin liên hệ hiển thị ở chân trang (footer) và trang Liên hệ gồm có: Hộp thư điện tử [e-mail] và số điện thoại liên lạc 0968703001.

---

Kết luận

Tiểu luận "Thiết kế website bán sách cho cửa hàng Si's Bookstore" của sinh viên Nguyễn Hoàng Danh là một công trình thực hành thiết kế giao diện web có cấu trúc chặt chẽ và bám sát thực tiễn. Đề tài đã hoàn thành việc khảo sát bài toán, phân tích 6 chức năng nghiệp vụ cốt lõi, phác thảo và hiện thực hóa mã nguồn HTML/CSS cho 12 màn hình giao diện thương mại điện tử chuyên biệt. Mặc dù còn dừng lại ở mức giao diện tĩnh phục vụ môn học, sản phẩm đã thể hiện rõ phương pháp thiết kế phân tầng, khả năng ứng dụng hiệu quả Bootstrap Framework và là tài liệu mẫu hữu ích cho sinh viên công nghệ thông tin trong các môn học thiết kế web cơ sở.

Trích đoạn nội dung tài liệu

CHƯƠNG 1. PKHẢO SÁT VÀ PHÂN TÍCH BÀI TOÁN 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.

Phân tích các chức năng STT CHỨC NĂNG MÔ TẢ Giới thiệu tổng quan về trang web, trang web bán 1 Giới thiệu sản phẩm gì. Đưa ra các thông tin của chủ trang web như số 2 Liên hệ điện thoại, email để khách hàng tiện lợi trong việc liên hệ. Giúp khách hàng có thể đăng ký được thành viên 3 Đăng ký của trang web. Giúp người mua đăng nhập được vào trang web từ 4 Đăng nhập 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. Thiết kế giao diện CHƯƠNG 2.

THIẾT KẾ GIAO DIỆN 2. Giao diện trang chủ.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. 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.2: Giao diện trang chủ 2. Giao diện trang đăng ký thành viên.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.

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. Giao diện trang đăng nhập.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.

Giao diện trang giới thiệu. 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. 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.

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ệ. 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á, để 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. Thiết kế giao diện Hình 2.7: Giao diện trang sách giáo khoa. Thiết kế giao diện 2.

Giao diện trang sách tham khảo.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 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. Giao diện trang sách bài tập.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.

Giao diện trang Văn học Việt Nam.10: Giao diện trang Văn học Việt Nam. 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, 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á, để 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. Giao diện trang văn học nước ngoài.11: Giao diện trang văn học nước ngoài. 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 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á, để 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. Giao diện trang chi tiết sản phẩm.12: Giao diện trang chi tiết sản phẩm. 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. Thiết kế chương trình CHƯƠNG 3. THIẾT KẾ CHƯƠNG TRÌNH 3.

Source code HTML. <!doctype html> <html> <head> <meta charset="utf-8" name="viewport" content="width = device-width, initial- scale = 1"> <!-- TemplateBeginEditable name="doctitle" --> <title>Untitled Document</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <link rel="shortcut icon" href=".png"> <link type="text/css" rel="stylesheet" href=".css"> <link rel="stylesheet" href="https://maxcdn.css"> <script src="https://ajax.com/ajax/libs/jquery/3.js"></script> <script src="https://maxcdn.js"></script> </head> <body> <header class="container"> <img src=".png" id="banner"> <a href=".html"><img src=".png" id="logo"></a> <div id="dangnhap"> <a href="Dangnhap.html">Đăng nhập</a> | <a href="Dangky.html">Đăng ký</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" data- toggle="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=".html">SI's BOOKSTORE</a> </div> <div class="collapse navbar-collapse" id="navbar1"> <ul class="nav navbar-nav"> <li><a href=".html">TRANG CHỦ</a> </li> <li><a href=".html">GIỚI THIỆU</a> </li> <li><a href=".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> <ul class="dropdown-menu"> <li><a href=".html">Sách giáo khoa</a> </li> <li role="separator" class="divider"></li> <li><a href=".html">Sách tham khảo</a> </li> <li role="separator" class="divider"></li> <li><a href=".html">Sách bài tập</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria- haspopup="true">VĂN HỌC<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href=".