báo cáo bài tập lớn lập trình web website bán điện thoại hoangha mobile

Các tính năng cần có trong trang web bao gồm: • Giao diện người dùng thân thiện, dễ sử dụng và tương thích trên các thiết bị di động.. Để triển khai dự án này, các công nghệ ổ ến trong l

BỘ LAO ĐỘNG - THƯƠNG BINH VÀ XÃ HỘI

TRƯỜNG CAO ĐẲNG CÔNG THƯƠNG VIỆT NAM KHOA: CÔNG NGHỆ THÔNG TIN

BÀI TẬP LỚN

HỌC PHẦ Lập trình websiteN:

ĐỀ SỐ 9:

Thiết kế và xây dựng website bán điện thoại

Sinh viên thực hiện Mã sinh viên Lớp

Bùi Trầ Thanh Phúcn 2101CQ27098 CCN01.6B

Hà Nội, năm 2023

BỘ LAO ĐỘNG - THƯƠNG BINH VÀ XÃ HỘI

TRƯỜNG CAO ĐẲNG CÔNG THƯƠNG VIỆT NAM KHOA: CÔNG NGHỆ THÔNG TIN

BÀI TẬP LỚN HỌC PHẦN: Lập trình website

ĐỀ SỐ 9:

Thiết kế và xây dựng website bán điện thoại

STT Sinh viên thực hiện Mã sinh viên

Điểm bằng

số

Điểm bằng

chữ 1 Bùi Trần Thanh Phúc 2101CQ27098

CÁN BỘ CHẤM 1

(Ký và ghi rõ họ tên) (Ký và ghi rõ họ tên) CÁN BỘ CHẤM 2

Hà Nội, tháng năm 2008 23

MỤC LỤC

DANH MỤC BẢNG BIỂU VÀ SƠ ĐỒ 4

CHƯƠNG 1: GIỚI THIỆU VỀ ĐỀ TÀI 5

1.1 Giới thiệu về đề tài 5

2.1.1 Sơ đồ phân cấp chức năng 12

2.1.2 Mô tả chi tiết các chức năng 13

2.2 Sơ đồ USE CASE 15

2.3 Sơ đồ tương tác đối tượng 16

5.3 Hướng phát triển đề tài 29

DANH MỤC TÀI LIỆU THAM KHẢO 31

DANH M C B NG BIỤ Ả ỂU VÀ SƠ ĐỒ

CHƯƠNG 1: GIỚI THIỆU VỀ ĐỀ TÀI

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

Đề tài lập trình web "Hoanghamobile" là một dự án phát triể trang n web thương mại điện tử cho cửa hàng Hoanghamobile Hoanghamobile là một trong những nhà bán lẻ hàng đầ ở ệt Nam, chuyên kinh doanh các u Visản phẩm di động, điện tử và phụ kiện

Mục tiêu của dự án là xây dựng một trang web hoàn chỉnh và chuyên nghiệp, cho phép khách hàng có thể xem và mua các sản phẩm từ cửa hàng Hoanghamobile trực tuyến Trang web sẽ cung cấp thông tin chi tiết về các sản phẩm, bao gồm hình ảnh, mô tả, giá cả và các đánh giá từ khách hàng Khách hàng có thể thêm sản phẩm vào giỏ hàng, thanh toán và theo dõi quá trình vận chuyển

Các tính năng cần có trong trang web bao gồm:

• Giao diện người dùng thân thiện, dễ sử dụng và tương thích trên các thiết bị di động

• Hệ thống tìm kiếm thông minh để khách hàng có thể tìm kiếm và lọc sản phẩ theo nhiều tiêu chí khác nhau.m

• Quản lý danh mục sản phẩm và các bộ sưu tập đặc biệt của cửa hàng • Chức năng đánh giá và nhận xét sản phẩm từ khách hàng

• Quản lý và xuất báo cáo về doanh thu, đơn hàng và khách hàng Để triển khai dự án này, các công nghệ ổ ến trong lập trình web có thể ph biđược sử dụng như HTML, CSS và JavaScript để xây dựng giao diện người dùng

Hình 1.1: Website HOANGHAMOBLIE.COM

Dự án "Hoanghamobile" hướng đến việc tạo ra một trải nghiệm mua sắm trực tuyến thuận tiện và đáng tin cậy cho khách hàng, cũng như giúp cửa hàng Hoanghamobile mở rộng sự hiện diện trên thị trường và tăng doanh số bán hàng 1.2 Kế ạch làm đề tàiho

Hình 1.2 - Phân tích yêu cầu:

• Hiểu rõ yêu cầu của khách hàng và quyết định các chức năng cần có trong trang web

• Tạo biểu đồ ồng công việc và sơ đồ cơ sở dữ ệu để ểu rõ kiếlu li hi n trúc tổng thể của trang web

- Thiết kế giao diện người dùng:

• Xây dựng wireframe (bản phác thảo) cho trang web

• Thiết kế giao diện người dùng hấp dẫn, dễ sử dụng và tương thích trên nhiều thiết bị khác nhau

- Triển khai giao diện người dùng:

• Sử dụng HTML, CSS và JavaScript để triển khai giao diện người dùng theo thiết kế đã được xác định

• Tối ưu hóa trang web cho trải nghiệm tốt trên các thiết bị di động - Thử nghiệm và kiểm tra:

• Kiểm tra tính năng của trang web để đảm bảo hoạt động mượt mà và không có lỗi

• Thực hiện các ca kiểm thử tự động và kiểm tra tương tác giữa giao diện người dùng và phía máy chủ

Dưới đây là một số ưu và nhược điểm của HTML: - Ưu điểm của HTML:

• Dễ học và sử dụng: HTML có cú pháp đơn giản và dễ ểu, cho phép ngườhi i dùng nhanh chóng học và bắt đầu xây dựng các trang web cơ bản

• Tương thích và tiêu chuẩn: HTML là một ngôn ngữ tiêu chuẩn được công nhận và hỗ ợ rộng rãi trên hầu hết các trtrình duyệt web hiện đại Điều này đảm bảo tính tương thích và khả năng hiển thị nhất quán trên các nền tảng và trình

• Khả năng tích hợp: HTML hỗ ợ tích hợp các phần tử đa phương trtiện như hình ảnh, âm thanh, video và các tài ệu tài liệu khác nhau livào trang web

• SEO tốt: HTML cho phép người phát triển tạo các siêu dữ liệu (metadata) và định dạng nội dung một cách tốt để tối ưu hóa công cụ tìm kiếm (SEO) Điều này giúp các trang web được tìm thấy dễ dàng và có thứ hạng cao trên các công cụ tìm kiếm

• Khả năng mở rộng: HTML có thể kết hợp với các ngôn ngữ và công nghệ khác như CSS (Cascading Style Sheets) và JavaScript để tạo ra các trang web đa dạng và tương tác

- Nhược điểm của HTML:

• Hạn chế về cấu trúc: HTML chỉ mô tả cấu trúc và nội dung của một trang web mà không có khả năng xử lý logic phức tạp Điều này có nghĩa là HTML không thể tự ực hiện các tác vụ ức tạp như xử th phlý dữ ệu, kiểm tra hợp lệ, hay tương tác người dùng phức tạli p • Thiếu khả năng tạo giao diện phức tạp: Mặc dù HTML cung cấp các

yếu tố cơ bản để tạo giao diện trang web, nhưng nó có hạn chế trong

việc tạo ra các giao diện phức tạp với hiệ ứng đồ họa đa dạng và u tương tác người dùng phức tạp

• Phụ thuộc vào CSS và JavaScript: Mặc dù HTML có thể tạo cấu trúc nội dung, nhưng để tạo giao diện và tương tác phức tạp, thường cần phải sử dụng CSS và JavaScript Điều này đòi hỏi người phát triển phải có kiến thức về các ngôn ngữ và công nghệ khác để tận dụng hết tiềm năng của HTML

• Khả năng bảo mật hạn chế: HTML không cung cấp nhiều tính năng bảo mật tích hợp Điều này có nghĩa là các biện pháp bảo mật phải được thực hiện thông qua các công nghệ bổ sung như mã hóa và xác thực máy chủ

Tuy HTML có một số hạn chế, nhưng nó vẫn là ngôn ngữ cơ bản và quan trọng trong việc xây dựng các trang web Kết hợp với CSS và JavaScript, HTML có thể tạo ra các trang web đa dạng và tương tác

1.3.2 CSS

CSS (Cascading Style Sheets) là một ngôn ngữ định dạng được sử dụng để kiểm soát kiểu dáng và giao diện của các trang web Nó cung cấp các phương thức và thuộc tính để tạo ra các hiệ ứng hình ảnh, u

chỉnh sửa màu sắc, phông chữ, kích thước và vị trí của các phần tử trên trang web

Dưới đây là một số ưu và nhược điểm của CSS: - Ưu điểm của CSS:

• Tách biệt giữa nội dung và kiểu dáng: CSS cho phép tách biệt hoàn toàn giữa nội dung HTML và kiểu dáng Điều này giúp cải thiện tính tổ chức, bảo trì và quản lý của mã nguồn, vì bạn có thể chỉnh sửa kiểu dáng mà không làm thay

• Kiểm soát kiểu dáng toàn diện: CSS cho phép bạn áp dụng kiểu dáng cho nhiều trang web cùng một lúc Bằng cách liên kết các tệp CSS bên ngoài, bạn có thể áp dụng các kiểu dáng chung cho toàn bộ trang web, giúp duy trì tính nhất quán và tiết kiệm thời gian

• Đa dạng hóa kiểu dáng: CSS cung cấp nhiều tùy ọn và tính linh chhoạt cho kiểu dáng trang web Bạn có thể điều chỉnh màu sắc, phông chữ, kích thước, khoảng cách, hiệ ứng di chuyển và nhiều thuộu c tính khác để tạo ra giao diện độc đáo và hấp dẫn

• Tối ưu hóa tốc độ tải trang: Bằng cách sử dụng CSS, bạn có thể giảm kích thước tệp và tối ưu hóa tốc độ tải trang Thay vì sử dụng các thuộc tính kiểu dáng trực tiếp trong mã HTML, bạn có thể tạo các tệp CSS riêng biệt và tận dụng lại chúng cho nhiều trang web • Độ linh hoạt và mở rộng: CSS có khả năng mở rộng và mở rộng khá

tốt Bạn có thể sử dụng CSS để tạo kiểu cho các loại phần tử HTML khác nhau, nhúng kiểu dáng trong các phần tử HTML và thậm chí tạo ra các hiệu ứng động sử dụng CSS3 và các thuộc tính tương tác - Nhược điểm của CSS:

• Học và sử dụng đòi hỏi thờ gian: CSS có cú pháp riêng và một số i khái niệm phức tạp, đòi hỏi người dùng phải tìm hiểu và làm quen với nó Đôi khi việc xử lý và gỡ lỗi kiểu dáng cũng có thể ức tạph p • Giao diện trình duyệt khác nhau: Một số trình duyệt có thể ển thị hiCSS khác nhau hoặc không hỗ ợ một số thuộc tính CSS mới nhất trĐiều này có thể dẫn đến sự không nhất quán trong kiểu dáng giữa các trình duyệt khác nhau

• Quản lý kiểu dáng phức tạp: Trong các dự án lớn với nhiều trang và kiểu dáng phức tạp, việc quản lý CSS có thể ở nên khó khăn Nếtr u không có sự tổ ức tốt và quy tắc rõ ràng, mã CSS có ể ở nên ch th trkhó hiểu và khó bảo trì

• Khả năng ảnh hưởng đến hiệu năng: Nếu sử dụng CSS không tối ưu, đặc biệt là khi áp dụng nhiều hiệu ứng động và chuyển đổi phức tạp, có thể làm giảm hiệu năng của trang web và tốc độ tải trang • Khó khăn trong việc kiểm soát kiểu dáng thừa: Khi xây dựng và phát

triển trang web lớn, có thể xảy ra tình trạng kiểu dáng thừa hoặc không cần thiết Điều này có thể gây ra sự rối loạn và khó khăn trong việc bảo trì và chỉnh sửa kiểu dáng

• Hạn chế trong việc xử lý bố cục phức tạp: Trong một số trường hợp, CSS có thể gặp hạn chế trong việc xử lý kiểu dáng cho bố cục phức tạp hoặc định vị các phần tử trong trang web

Tóm lại, CSS có nhiều ưu điểm vượt trội trong việc ều chỉnh kiểu dáng đivà giao diện của trang web Tuy nhiên, nó cũng có một số nhược điểm như khả năng tương thích trình duyệt, quản lý kiểu dáng phức tạp và tốc độ ệu năng hiViệc sử dụng CSS hiệu quả và tổ ức mã nguồn tốt có thể giúp vượt qua nhượch c điểm này và tận dụng tối đa lợi ích của CSS

1.3.3 JavaScirp

JavaScript (JS) là ngôn ngữ lập trình phổ ến được sử dụng chủ yếu trong bimôi trường trình duyệt web để tạo ra các hiệ ứng tương tác, thay đổi và kiểu m soát nội dung của trang web

Dưới đây là một số ưu điểm và nhược điểm của JavaScript: - Ưu điểm của JavaScript:

• Tích hợp tốt với trình duyệt web: JavaScript được hỗ ợ bởi tất cả các trtrình duyệt phổ biến như Chrome, Firefox, và Safari Điều này cho phép lập trình viên sử dụng JS để tạo ra các ứng dụng web động và tương tác một cách dễ dàng và đồng nhất trên các nền

• Tính tương thích cao: JavaScript có khả năng hoạt động với nhiều ngôn ngữ và công nghệ khác nhau Nó có thể tương tác với HTML và CSS để thay đổi và tạo ra nộ dung động trên trang web Ngoài i ra, JavaScript cũng có thể kết hợp với các thư viện và framework phổ biến như React, Angular và Vue để phát triển các ứng dụng web phức tạ p.

• Tính năng mạnh mẽ: JavaScript cung cấp nhiều tính năng mạnh mẽ cho phép lập trình viên tạo ra các hiệu ứng tương tác phong phú trên trang web, bao gồm thao tác với DOM (Document Object Model), xử lý sự ện, gọi API từ máy chủ và thực hiện các tính toán phứki c tạp

• Cú pháp linh hoạt: JavaScript có cú pháp linh hoạt và dễ học Nó cung cấp n ều cách để ực hiện cùng một nhiệm vụ, cho phép lậhi th p trình viên lựa chọn phương pháp phù hợp với nhu cầu và phong cách lập trình của mình

- Nhược điểm của JavaScript:

• Bảo mật: JavaScript chạy trên máy khách (client-side), điều này có nghĩa là mã JavaScript được tải xuống và chạy trực tiếp trên trình duyệt của người dùng Điều này có thể tạo ra các lỗ hổng bảo mật, nếu không được kiểm soát cẩn thận Tuy nhiên, có nhiều biện pháp bảo mật và quyền hạn đã được thực hiện để ảm thiểu các rủi ro ginày

• Hiệu suấ JavaScript chạy trực tiếp trên máy khách và có thể gây ra t:tải trọng cho trình duyệt Nếu không được tối ưu hóa đúng cách, các ứng dụng JavaScript có thể ở nên chậm và gây ảnh hưởng đến trảtr i nghiệm người dùng

• Khả năng kiểm soát mã: JavaScript cho phép lập trình viên thực hiện nhiều thao tác và thay đổi nội dung của trang web một cách linh hoạt Điều này có thể dẫn đến việc khó kiểm soát mã và gây ra các vấn đề trong việc bảo trì và mở rộng mã nguồn

Tuy nhiên, với sự phát triển của JavaScript và cộng đồng lập trình, nhiều công cụ và quy tắc đã được phát triển để giúp giải quyết các nhược điểm này và tăng cường khả năng phát triể ứng dụng web.n

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ H TH NG Ệ Ố2.1 Các chức năng của hệ thống

2.1.1 Sơ đồ phân cấp chức năng

Sơ đồ 2.1: Sơ đồ phân cấp chức năng

2.1.2 Mô tả chi tiết các chức năng - Trang chủ:

• Hiển thị danh sách sản phẩm nổi bật: Cung cấp một giao diện trực quan cho khách hàng để xem các sản phẩm mới nhất hoặc sản phẩm được giới thiệu

• Thông tin về chương trình khuyến mãi và tin tức mới nhất: Cập nhật thông tin về các chương trình khuyến mãi, giảm giá hoặc tin tức liên quan đến sản phẩm và dịch vụ của Hoanghamobile

- Danh mục sản phẩm:

• Hiển thị danh sách các danh mục sản phẩm: Cho phép khách hàng duyệt qua các danh mục sản phẩm để thuận tiện trong việc lựa chọn và tìm kiếm sản phẩm

• Lọc sản phẩm theo danh mục: Cho phép khách hàng lọc sản phẩm dựa trên danh mục sản phẩm cụ ể giúp họ tìm kiếm những sản phẩm cầth n thiết

Hình 2.1

• Tìm kiếm sản phẩm: Cung cấp chức năng tìm kiếm để khách hàng có thể ập từ khóa và tìm kiếm sản phẩm theo tên, thương hiệu hoặc các nhtiêu chí khác

Hình 2.2

- Chi tiết sản phẩm:

• Hiển thị thông tin chi tiết về sản phẩm: Đưa ra thông tin về sản phẩm, bao gồm hình ảnh, mô tả, giá cả, đánh giá và nhận xét của khách hàng

• Cập nhật số ợng và xóa sản phẩm trong giỏ hàng: Cho phép khách lưhàng chỉnh sửa số ợng sản phẩm hoặc xóa sản phẩm không cần thiếlư t trong giỏ hàng

• Tính toán tổng giá trị đơn hàng: Tự động tính toán tổng giá trị của đơn hàng dựa trên giá cả và số ợng của từng sản phẩm trong giỏ hàng.lư

Hình 2.4

2.2 Sơ đồ USE CASE

Sơ đồ 2.2: Sơ đồ USE CASE

Trong sơ đồ này, chúng ta có hai tác nhân chính: khách hàng và quản trị viên

- Hệ thống:

• Hệ ống sẽ xử lý các yêu cầu từ khách hàng và quản trị viên bao gồth m hiển thị danh sách sản phẩm, tìm kiếm, hiển thị thông tin chi tiết sản phẩm, quản lý giỏ hàng, và quản lý đơn hàng

Sơ đồ Use Case trên chỉ là một cái nhìn tổng quan về các hoạt động chính trong trang web "Hoanghamobile" và không thể đưa ra được tất cả các chức năng chi tiết Tùy thuộc vào yêu cầu cụ ể, sơ đồ Use Case có thể mở rộng và bổ th sung các hoạt động khác

2.3 Sơ đồ tương tác đối tượng

Sơ đồ 2.3: Sơ đồ tương tác đối tượng

Trong sơ đồ này, chúng ta có hai đối tượng chính: khách hàng và trang web "Hoanghamobile"

• Trang web "Hoanghamobile" nhận các yêu cầu từ khách hàng và xử lý chúng bằng cách hiển thị danh sách sản phẩm, tìm kiếm, hiển thị thông tin chi tiết sản phẩm, quản lý giỏ hàng và quản lý đặt hàng

Sơ đồ tương tác đối tượng trên chỉ là một cái nhìn tổng quan về sự tương tác giữa khách hàng và trang web "Hoanghamobile" Có thể có nhiều tương tác hơn trong quá trình hoạt động thực tế của trang web này, tùy thuộc vào yêu cầu và chức năng cụ thể

CHƯƠNG 3: MÔ HÌNH HỆ THỐNG

3.1 Cấu trúc Website

Cấu trúc website HoanghaMobile có thể ợc tổ ức như sau:đư ch

- Header: Phần đầu trang bao gồm logo củ HoanghaMobile và các liên kếa t đến các trang chính, ví dụ như Trang chủ, Sản phẩm, Tin tức, Liên hệ - Menu: Đây là một phần quan trọng trong cấu trúc của website, chứa các

danh mục sản phẩm hoặc dịch vụ mà HoanghaMobile cung cấp Các danh mục này thường được sắp xếp theo từng nhóm nhỏ để người dùng dễ dàng tìm kiếm

Hình 3.1

- Slideshow: Một phần trình diễ ảnh hoặc video sẽ n được đặ ở trên trang t chủ để ới thiệu những sản phẩm mới, thông tin khuyến mãi hay tin tứgi c nổi bật của HoanghaMobile

Hình 3.2

- Nội dung chính: Đây là nơi hiển thị các thông tin chi tiết về sản phẩm hoặc dịch vụ Người dùng có thể xem mô tả, hình ảnh, thông số kỹ thuật, giá cả và các thông tin khác về sản phẩm hoặc dịch vụ mà họ quan tâm