bài tập lớn thiết kế và xây dựng website đề tài xây dựng website bán sách

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

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC ĐẠI NAM

Hà Nội, năm 2023

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC ĐẠI NAM

BÀI TẬP LỚN

TÊN HỌC PHẦN: THIẾT KẾ VÀ XÂY DỰNG WEBSITE

STT Mã Sinh Viên Họ và Tên Ngày Sinh

Điểm Bằng

Số

Bằng Chữ 1 1456010028 Lương Thị Bích Ngọc 04/07/2002

CÁN BỘ CHẤM THI

Hà Nội, năm 2023

LỜI MỞ ĐẦU

Ngày nay, công nghệ thông tin đã có những bước phát triển mạnh mẽ theo cả chiều rộng và chiều sâu Máy tính điện tử không còn là một thứ phương tiện quý hiếm mà đang ngày càng trở công cụ làm việc và giải trí hữu dụng của con người, không chỉ ở công sở mà còn ở ngay trong đời sống thường nhật

Đứng trước vai trò của thông tin cạnh tranh gay gắt, các tổ chức và các doanh nghiệp đều tìm mọi cách để xây dựng hoàn thiện hệ thống thông tin của mình nhằm tin học hóa các hoạt động tác nghiệp của đơn vị

Ở Việt Nam hiện nay, có rất nhiều doanh nghiệp đang tiến hành thương mại hóa trên Internet nhưng do những khó khăn về cơ sở vật chất, hạ tầng nên chỉ dừng lại ở mức độ giới thiệu sản phẩm và tiếp nhận đơn đặt hàng thông qua web

Ý thức được tương lai của thương mại điện tử Việt Nam, em quyết định chọn đề tài xây dựng website bán bán sách trực tuyến (cửa hàng sách trực tuyến) với mong muốn sẽ đáp ứng được nhu cầu mua sắm trên mạng Do lượng kiến thức là vô biên, với kiến thức ít ỏi của bản thân, em rất mong nhận được sự góp ý từ phía thầy cô Em xin chân thành cảm ơn!

MỤC LỤC

LỜI MỞ ĐẦU 3

CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI 6

1.1 Giới thiệu đề tài 6

1.2 Hướng tiếp cận của đề tài 6

1.3 Nội dung thực hiện của đề tài 10

1.3.1 Khảo sát thị trường 10

1.3.2 Dữ liệu của trang web 12

CHƯƠNG II: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 16

2.1 Phân tích yêu cầu đề tài: 16

2.2 Xác định yêu cầu của khách hàng 16

2.3 Yêu cầu giao diện của website 16

2.4 Biểu đồ phân tích và thiết kế hệ thống 17

DANH MỤC HÌNH ẢNH

Hình 1.1: Tài nguyên sử dụng cho đề tài 6

Hình 1.2: Thanh Menu và Logo của Website 7

Hình 1.3: Trang chủ - Nơi tóm tắt, giới thiệu thông tin 7

Hình 1.4: Trang Giới thiệu 8

Hình 1.5: Trang Cửa hàng 8

Hình 1.6: Trang Nhà sách 9

Hình 1.7: Trang Ưu đãi 9

Hình 1.8: Trang Liên hệ 10

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 11

Hình 1.10: Website chuyên về mua bán sách 12

Hình 1.11: Một phần trang chứa thông tin Sách 12

Hình 1.12: Trang chứa thông tin Nhà xuất bản 13

Hình 1.13: Kiến trúc của mô hình MVC 14

CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI 1.1 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ết kiệ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

1.2 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

Hình 1.4: Trang Giới thiệ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

Hình 1.5: Trang Cửa hàng

• Nhà sách: Trang thông tin của Nhà xuất bản, nhà sách, tác giả được hiển thị đầy đủ, chính xác, chi tiết cũng là một cách giúp người dùng an tâm mua sắm, tin dùng hơn

Hình 1.6: Trang Nhà sách

• Ư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

Hình 1.7: Trang Ưu đãi

• 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ó

Hình 1.8: Trang Liên hệ

1.3 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: + Khảo sát thị trường

+ 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

1.3.1 Khảo sát thị trường

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

*Khái niệm:

- 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

*Cách hoạt động:

- View: là một phần của ứng dụng đại diện cho việc trình bày dữ liệu

+ View được tạo bởi các dữ liệu mà chúng ta lấy từ dữ liệu trong model Một view yêu cầu model cung cấp đầy đủ dữ liệu để nó 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

• 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

CHƯƠNG II: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 2.1 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

2.2 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

2.3 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 đồ hoạ và liên kết tương tác trong trang thu hút sự chú ý của độc giả xuống trang web, quên đi các liên kết đa năng

- 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

2.4 Biểu đồ phân tích và thiết kế hệ thống

2.4.1 Biểu đồ UseCase

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

Hình 2.4: Biểu đồ đóng gói

CHƯƠNG III: THIẾT KẾ, XÂY DỰNG WEBSITE 3.1 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:

- Ưu điểm:

+ 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ình duyệ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

+ 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:

+ 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ể render những tag mới trong HTML5 b) CSS

- CSS – Cascading Style Sheet là một ngôn ngữ lập trình được thiết kế vô cùng đơn giản, dễ sử dụng Với CSS hướng tới mục tiêu chính là giúp đơn giản hóa được quá trình tạo ra các 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:

- Ưu điểm:

+ Khả năng tiết kiệm thời gian: CSS khi sử dụng có thể viết lần đầu, đồng thời sử dụng lại trong các trang HTML tiếp theo KHông chỉ vậy, chúng ta hoàn toàn có thể xác định được

một kiểu cho từng thành phần HTML và cũng áp dụng được cho nhiều trang web khác khi cần thiết

+ 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 - Nhược điểm:

+ 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ú