Giới thiệu đề tài - Xây dựng website bán sách trực tuyến dựa trên mô hình như một cổng thông tin – nơi trung chuyển, kết nối người kinh doanh hiệu sách, nhà xuất bản, tác giả với người d
TỔNG QUAN VỀ ĐỀ TÀI
Giới thiệu đề tài
- Xây dựng website bán sách trực tuyến dựa trên mô hình như một cổng thông tin – nơi trung chuyển, kết nối người kinh doanh (hiệu sách, nhà xuất bản, tác giả) với người dùng (đọc giả)
- Website sẽ mang lại nhiều thông tin cho khách hàng về các đầu sách hot, sách mới nhờ được cập nhật, nâng cấp liên tục Đồng thời tiếtkiệm thời gian và chi phí đi lại cho người dùng khi giờ đây chỉ cần một cú nhấp chuột, một cú click trên màn hình đt đã có thể đem
“thế giới sách” đến với người tiêu dùng
- Đề tài được xây dựng bằng HTLM, CSS cùng một chút Javascript, được thiết kế và triển khai trên phần mềm Visual Studio Code
Hình 1.1: Tài nguyên sử dụng cho đề tài
Hướng tiếp cận của đề tài
- Qua phân tích, tìm hiểu, nghiên cứu thị trường cũng như các trang thương mại điện tử về sách nói riêng, em đã đưa ra cho mình hướng tiếp cận đề tài theo các bước sau:
+ Bắt đầu với phần giao diện: Một trang web có dễ tiếp cận đến người dùng hay không, có dễ dàng cho người dùng mới thao tác trên toàn bộ tài nguyên của website hay không đều được quyết định bởi phần giao diện đầu tiền Để có một giao diện thân thiệt, dễ nhìn, dễ sử dụng, em đã chia web thành 6 trang nhỏ:
Hình 1.2: Thanh Menu và Logo của Website
• Trang chủ: Nơi giới thiệu về trang web để tăng độ nhận diện thương hiệu cho người dùng, đồng thời tóm tắt các thông tin chính, dịch vụ của trang web mang đến cho người dùng
Hình 1.3: Trang chủ - Nơi tóm tắt, giới thiệu thông tin
• Giới thiệu: Có thể coi như trang “bổ sung” thêm mức độ tin tưởng, độ nhận diện thương hiệu với người dùng Tại đây, các thông tin, hoạt động, chứng chỉ, giải thưởng nếu có sẽ được triển khai dưới dạng thống kê, số liệu
• Cửa hàng: Phần tương tác chính của website Các hoạt động mua bán, trao đổi sẽ được tập trung diễn ra tại đây
Thông tin liên hệ đầy đủ, chính xác và chi tiết của nhà xuất bản, nhà sách, tác giả là yếu tố quan trọng giúp người dùng yên tâm mua sắm và sử dụng sản phẩm sách Nội dung các trang thông tin này có thể bao gồm:
• Ưu đãi: Bước vào hoạt động kinh doanh bất kể mặt hầng, loại hình nào cũng cần đến voucher (hay mã giảm giá, mã ưu đãi) để tri ân đến phía người dùng vì đã tin tưởng sử dụng sản phẩm, dịch vụ của mình
• Liên hệ: Trang này sẽ nhận ý kiến phản hồi từ phía khách hàng để cải thiện những khuyết điểm, thiếu sót của website nếu có
Nội dung thực hiện của đề tài
- Với đề tài lựa chọn, các yêu cầu đưa ra được chia làm 3 phần chính:
+ Thiết kế, xây dựng giao diện cho website (Cấu tạo, thành phần)
+ Xử lý logic, dữ liệu cho trang web (Dữ liệu sách, dữ liệu nhà xuất bản, dữ liệu người dùng)
- Phần thiết kế giao diện em đã làm rõ việc triển khai theo đề tài ở mục trên, em xin phép được làm rõ phần khảo sát và xử lý dữ liệu để có một cái nhìn cụ thể hơn về đề tài đã chọn
- Thông qua việc tìm hiểu các trang thương mại điện tử mua bán sách, kết hợp với việc phát phiếu, link khảo sát thực tiễn nhu cầu người dùng, có thể nhận thấy rằng thị trường buôn bán sách online chưa thực sự phát triển một cách mạnh mẽ bởi:
+ Các trang thương mại điện tử lớn như Shopee, Tiki, Lazada,… dẫu có diễn ra hoạt động mua bán sách nhưng nhìn chung còn rất nhiều điểm hạn chế về bản quyền cũng như quyền lợi của đọc giả tương đối thấp do vấn nạn sách lậu, sách cấm vẫn len lỏi, tràn lan khắp trên các trang
Hình 1.9: Trang thương mại điện tử lớn diễn ra hoạt động mua bán sách
+ Các trang trang web chuyên về mua bán sách như Fasaha.com, Vinabook.com, Newshop.vn,… số lượng đầu sách nhìn chung vẫn còn khá hạn chế, chưa cập nhật được liên tục, thường xuyên
Hình 1.10: Website chuyên về mua bán sách
→ Đây có thể coi là cơ hội để em thử sức mình với danh mục cửa hàng trực tuyến còn bỏ ngỏ này
1.3.2 Dữ liệu của trang web
- Với website cửa hàng trực tuyến hay bất kì một website, ứng dụng nào khác, việc đảm bảo dữ liệu an toàn, vận hành ổn định, trơn tru để đem đến cho người dùng trải nghiệm tốt nhất, thoải mái nhất là điều tối quan trọng
- Em xây dựng dữ liệu của website tách riêng thành 2 phần: sách và nhà xuất bản Tất cả được xây dựng theo mô hình MVC.
- Đối với phần “Sách”: Tất cả thuộc tính của sách như tên sách, tên đầu sách, tác giả, giá cả,… đều được hiển thi chung vào một View để thuận tiện cho quá trình trải nghiệm của người dùng.
Hình 1.11: Một phần trang chứa thông tin Sách
- Đối với phần “Nhà xuất bản”: Tương tự phần “Sách”, tất cả thuộc tính của nhà xuất bản đều được tóm gọn trong một View Các thông tin như tên, logo, miền trang chủ đều được tích hợp sao cho thuận tiện nhất với người dùng
Hình 1.12: Trang chứa thông tin Nhà xuất bản a) Đôi nét về mô hình MVC:
- Mô hình Model-View-Controller (MVC) là một mẫu kiến trúc phân tách một ứng dụng thành ba thành phần logic chính Model, View và Controller Do đó viết tắt MVC Mỗi thành phần kiến trúc được xây dựng để xử lý khía cạnh phát triển cụ thể của một ứng dụng
MVC tách lớp logic nghiệp vụ và lớp hiển thị ra riêng biệt Ngày nay, kiến trúc MVC đã trở nên phổ biến để thiết kế các ứng dụng web cũng như ứng dụng di động
*Kiến trúc của mô hình MVC:
Hình 1.13: Kiến trúc của mô hình MVC
- Mô hình MVC bao gồm 3 phần chính:
+ Model: Nó bao gồm tất cả dữ liệu và logic liên quan của nó
+ View: Trình bày dữ liệu cho người dùng hoặc xử lý tương tác của người dùng
+ Controller: Là phần quan trọng nhất trong mô hình, nó liên kết phần Model và View
- View: là một phần của ứng dụng đại diện cho việc trình bày dữ liệu
Giao diện được tạo ra từ dữ liệu trích xuất từ dữ liệu trong mô hình Giao diện yêu cầu mô hình cung cấp đủ dữ liệu để hiển thị đầu ra cho người dùng.
+ View chính là nới chứa những giao diện như một nút bấm, khung nhập, menu, hình ảnh… nó đảm nhiệm nhiệm vụ hiển thị dữ liệu và giúp người dùng tương tác với hệ thống
- Controller: là một phần của ứng dụng xử lý tương tác của người dùng Bộ điều khiển diễn giải đầu vào chuột và bàn phím từ người dùng, thông báo cho model và view để thay đổi khi thích hợp
+ Controller là nới tiếp nhận những yêu cầu xử lý được gửi từ người dùng, nó sẽ gồm những class/ function xử lý nhiều nghiệp vụ logic giúp lấy đúng dữ liệu thông tin cần thiết nhờ các nghiệp vụ lớp Model cung cấp và hiển thị dữ liệu đó ra cho người dùng nhờ lớp View
+ Controller gửi các lệnh đến model để làm thay đổi trạng thái của nó Controller cũng gửi các lệnh đến view liên quan của nó để thay đổi cách hiển thị của view
- Model: Thành phần model lưu trữ dữ liệu và logic liên quan của nó Bao gồm các class function xử lý các tác vụ như truy vấn, thêm, sửa hoặc xóa dữ liệu Ví dụ, một đối tượng Controller sẽ lấy thông tin khách hàng từ cơ sở dữ liệu Nó thao tác dữ liệu và gửi trở lại cơ sở dữ liệu hoặc sử dụng nó để hiển thị dữ liệu
➔ Sự tương tác giữa các phần của MVC:
• Controller tương tác với qua lại với View.
• Controller tương tác qua lại với Model
• Model và View không có sự tương tác với nhau trực tiếp mà nó tương tác với nhau thông qua Controller
Hình 1.14: Sựtương tác trong MVC b) Ứng dụng của mô hình MVC trong đề tài - Model: Là tất cả phần dữ liệu liên quan đến sách, nhà xuất bản
- View: Các trang hiển thị dữ liệu cho người dùng sử dụng như: trang chủ, giới thiệu, cửa hàng, nhà sách, ưu đãi, liên hệ
- Controller: Phần xử lí sự kiện khi người dùng click vào mua sách, xem thông tin sách cũng như gửi mail liên hệ cho admin.
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Phân tích yêu cầu đề tài
- Đưa ra thông tin cơ bản nhất về trang cửa hàng trực tuyến
- Lưu trữ, hiển thị dữ liệu các đầu sách, các nhà xuất bản hiện có tại cửa hàng
- Cập nhật, sửa đổi bảng giá, đầu sách mới liên tục nhằm đáp ứng nhu cầu của người sử dụng
- Lưu trữ thông tin của khách hàng như hóa đơn, thông tin cá nhân, đơn giá mua sách.
Xác định yêu cầu của khách h àng
- Chất lượng sản phẩm chính xác với mô tả trên cửa hàng
- Giá cả cập nhật phù hợp với thị trường.
- Giao diện thân thiện, dễ sử dụng
- Tính bảo mật, an toàn cao Tránh nhầm lẫn, sai lệch thông tin.
Yêu cầu giao diện của website
- Giao diện dễ nhìn, dễ sử dụng, dễ làm quen
- Đầy đủ các chức năng: hiển thị, mua bán, mô tả sản phẩm…
- Mượt mà trong quá trình sử dụng, tránh các thao tác thừa không đáng có gây ảnh hưởng đến trải nghiệm của người dùng
- Cho phép truy nhập trực tiếp: cần thiết kế cấu trúc thông tin hiệu quả nhất, giảm tối đa các bước qua hệ thống menu Càng ít màn hình → càng dễ thao tác
- Đơn giản và nhất quán: Sử dụng nhất quán màu sắc, bố cục, kiểu dạng (phông chữ, nút bấm) để tránh gây rối cho người dùng.
- Có chức năng phản hồi, đối thoại
Cung cấp một tập hợp phong phú các điều khiển đồ họa và liên kết tương tác trong trang web của bạn - không chỉ thu hút sự chú ý của người xem mà còn khuyến khích họ ở lại trên trang web của bạn lâu hơn, thay thế những liên kết đa năng đơn điệu tạo nên một trải nghiệm trực tuyến hấp dẫn và đáng nhớ.
- Liên kết và điều khiển linh hoạt, cho phép đọc giả đến mọi trang đích tại trang hiện tại.
Biểu đồ phân tích và thiết kế hệ thống
Hình 2.1: Biểu đồ UseCase 2.4.2 Biểu phân rã chức năng
Hình 2.2: Biểu đồ phân rã chắc năng 2.4.3 Biểu đồ lớp
Hình 2.3: Biểu đồ lớp 2.4.4 Biểu đồ đóng gói
THIẾT KẾ, XÂY DỰNG WEBSITE
Tổng quan về công nghệ sử dụng
3.1.1 Đôi nét về HTML và CSS a) HTML
- HTML là từ viết tắt của Hypertext Markup Language, là sự kết hợp của Hypertext và Markup, hay còn được gọi là ngôn ngữ siêu văn bản HTML có chức năng giúp người dùng xây dựng và cấu trúc các phần trong trang web hoặc ứng dụng, thường được sử dụng trong phân chia các đoạn văn, heading, link, blockquotes,…
- Cụ thể HTML là một loại ngôn ngữ đánh dấu siêu văn bản, với mục đích cấu trúc thành các cấu trúc cơ bản của một trang web để website trở thành một hệ thống hoàn chỉnh → HTML dùng ngôn ngữ của mình để đánh dấu siêu văn bản, điều này sẽ giúp các văn bản trên trên website được chia bố cục rõ ràng, chia khung sườn các thành phần của trang web, tạo trang web thành một hệ thống hoàn chỉnh
*Ưu –nhược điểm của HTML:
+ HTML được ra đời từ rất lâu, do đó HTML có nguồn tài nguyên khổng lồ, hỗ trợ một cộng đồng người dùng lớn Bên cạnh đó, cộng đồng HTML ngày càng phát triển trên thế giới.
+ Mã nguồn của HTML là mã nguồn mở, do đó người dùng có thể sử dụng hoàn toàn miễn phí
+ HTML được sử dụng và được sử dụng trên nhiều trìnhduyệt được nhiều người dùng ưa chuộng hiện nay như Internet Explorer, Chrome, FireFox, Cốc cốc,…
+ Học và tìm hiểu HTML đơn giản nên người học dễ dàng nắm được kiến thức và vận dụng trong xây dựng trang web căn bản
+ HTML được quy định theo một tiêu chuẩn nhất định nên việc markup sẽ trở nên gọn gàng, đồng nhất bởi HTML được vận hành bởi World Wide Web Consortium (W3C)
+ HTML được thực hiện dễ dàng bởi HTML được tích hợp nhiều ngôn ngữ khác nhau như PHP, Java, NodeJs, Ruby,…Điều này sẽ giúp tạo thành một website hoàn chỉnh với nhiều tính năng.
+ Nhược điểm lớn nhất của HTML đó chính là chỉ có thể web tĩnh, web tĩnh có thể hiểu là những trang web chỉ hiện thông tin mà không có sự tương tác cho người dùng Do đó, khi xây dựng tính năng động hoặc xây dựng hệ thống website có sự tương tác với người dùng, lập trình viên cần phải dùng thêm JavaScript hoặc ngôn ngữ backend của bên thứ ba.
+ HTML thường chỉ có thể thực thi những thứ logic và cấu trúc nhất định, HTML không có khả năng tạo sự khác biệt và mới mẻ
+ Một số trình duyệt vẫn còn chậm trong viết hỗ trợ các phiên bản mới của HTML, đặc biệt là HTML5
Một số trình duyệt không thể hiển thị các thẻ mới trong HTML5 CSS (Cascading Style Sheet) là một ngôn ngữ lập trình đơn giản và dễ sử dụng, được thiết kế để đơn giản hóa quá trình tạo website.
- Nhiệm vụ chính của CSS là thực hiện việc xử lý giao diện của một trang web cụ thể Đó là những yếu tốnhư màu sắc văn bản, hay khoảng cách giữa các đoạn, hoặc kiểu font chữ, hình ảnh, bố cục, màu nền,… đều có thể thay đổi, chỉnh sửa theo ý muốn với hỗ trợ của CSS
*Ưu –nhược điểm của CSS:
CSS cho phép tiết kiệm thời gian nhờ khả năng viết một lần, dùng nhiều lần trên các trang HTML Ngoài ra, bạn có thể định nghĩa một kiểu duy nhất cho một thành phần HTML và áp dụng nó cho nhiều trang web khác nhau khi cần.
+ CSS giúp khảnăng tải trang nhanh chóng: Đặc trưng của CSS khi sử dụng làít mãhơn
Bởi thế mà thời gian tải xuống nhanh chóng, giúp tiết kiệm thời gian đáng kể
+ Dễ dàng khi thực hiện bảo trì: Khi cần chúng ta chỉ cần thay đổi một kiểu và mọi thành phần trong tất cả những website thì lúc này CSS sẽ hỗ trợ cập nhật hoàn toàn tự động
+ CSS sở hữu thuộc tính rộng: CSS được đánh giá cao nhờ sở hữu những thuộc tính rộng hơn nếu đánh giá và so sánh với HTML
+ Khả năng tương thích tốt
+ CSS hoạt động khác biệt cho từng trình duyệt + Khá khó khăn cho người mới
+ Định dạng của web có khả năng gặp rủi ro: CSS là hệ thống dựa trên văn bản mở nên việc truy cập khá dễ dàng → định dạng toàn bộ của web hoàn toàn có thể chịu tổn thương, gặp gián đoạn khi có hành động, hoặc tai nạn nào xảy ra với tệp
3.1.2 Đôi nét về Visual Studio Code
- Visual Studio Code chính là ứng dụng cho phép biên tập, soạn thảo các đoạn code để hỗ trợ trong quá trình thực hiện xây dựng, thiết kế website một cách nhanh chóng
*Ưu điểm nổi bật của Visual Studio Code:
- Đa dạng ngôn ngữ lập trình giúp người dùng thỏa sức sáng tạo và sử dụng như HTML, CSS, JavaScript, C++,…
- Ngôn ngữ, giao diện tối giản, thân thiện, giúp các lập trình viên dễ dàng định hình nội dung
- Các tiện ích mở rộng rất đa dạng và phong phú
- Tích hợp các tính năng quan trọng như tính năng bảo mật (Git), khả năng tăng tốc xử lý vòng lặp (Debug),…
- Đơn giản hóa việc tìm quản lý hết tất cả các Code có trên hệ thống.
Xây dựng sản phẩm
Hình 3.1: Folder lưu trữ web trong Visual Studio Code
*Xây dựng các trang thành phần:
Email Của Tôi
luongthibichngoc12@gmail.com
NL Shop
Điện thoại
NL Shop
Trang chủ
Giới thiệu
Cửa hàng
Nhà sách
Ưu đãi
Sách mới về
Sách hot
Ưu đãi hôm nay
Liên hệ
NL Shop
Cửa hàng sách trực tuyến uy tín, chất lượng hàng đầu Việt Nam Đảm bảo 100% sách bản quyền từ các Nhà xuất bản danh tiếng.
Liên hệ
Từ Liêm, Hà Nội, Việt Nam.
luongthibichngoc12@gmail.com.
Email liên hệ
Hệ thống sẽ liên hệ lại bạn sau ít phút.
Gửi
© NL Shop Một sản phẩm của Lương Thị Bích Ngọc
- Phần code chính của các trang khá dài, để tránh loãng bài, đi sai trọng tâm em xin phép show code và thành phẩm của một số thành phần phụ của website.
- Phần website hoàn chỉnh em sẽ có bản nén cũng như domain để bổ sung.
