Xây dựng website bán điện thoại di động cho cửa hàng hải hà

ĐỒÁN2 XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI DI ĐỘNG CHO CỬA HÀNG HẢI HÀ NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: KỸ THUẬT PHẦN MỀM HƯỚNG CHUYÊN SÂU: CÔNG NGHỆ WEB HƯỚNG DẪN: NGUYỄN THỊ HẢI NĂNG HƯNG YÊN – 2021 NHẬN XÉT Nhận xét của giảng viên hướng dẫn: ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... ....................................................................................................................................... GIẢNG VIÊN HƯỚNG DẪN (Ký và ghi rõ họ tên) 2 Đồ án 2: Xây dựng website bán điện thoại di động cho cửa hàng Hải Hà LỜI CAM ĐOAN Em xin cam đoan đồ án “Xây dựng website bán điện thoại di động cho cửa hàng Hải Hà” là kết quả thực hiện của bản thân em dưới sự hướng dẫn của cô Nguyễn Thị Hải Năng. Những phần sử dụng tài liệu tham khảo trong đồ án đã được nêu rõ trong phần tài liệu tham khảo. Các kết quả trình bày trong đồ án và chương trình xây dựng được hoàn toàn là kết quả do bản thân em thực hiện. Nếu vi phạm lời cam đoan này, em xin chịu hoàn toàn trách nhiệm trước khoa và nhà trường. Hưng Yên, ngày … tháng … năm….. Sinh viên 3 Đồ án 2: Xây dựng website bán điện thoại di động cho cửa hàng Hải Hà LỜI CẢM ƠN Để có thể hoàn thành đồ án này, lời đầu tiên em xin phép gửi lời cảm ơn tới bộ môn Công nghệ phần mềm, Khoa Công nghệ thông tin – Trường Đại học Sư phạm Kỹ thuật Hưng Yên đã tạo điều kiện thuận lợi cho em thực hiện đồ án môn học này. Đặc biệt em xin chân thành cảm ơn cô Nguyễn Thị Hải Năng đã rất tận tình hướng dẫn, chỉ bảo em trong suốt thời gian thực hiện đồ án vừa qua. Em cũng xin chân thành cảm ơn tất cả các Thầy, các Cô trong Trường đã tận tình giảng dạy, trang bị cho em những kiến thức cần thiết, quý báu để giúp em thực hiện được đồ án này. Mặc dù em đã có cố gắng, nhưng với trình độ còn hạn chế, trong quá trình thực hiện đề tài không tránh khỏi những thiếu sót. Em hi vọng sẽ nhận được những ý kiến nhận xét, góp ý của các Thầy giáo, Cô giáo về những kết quả triển khai trong đồ án. Em xin trân trọng cảm ơn 4 Đồ án 2: Xây dựng website bán điện thoại di động cho cửa hàng Hải Hà MỤC LỤC NHẬN XÉT ............................................................................................................. 2 DANH MỤC CÁC THUẬT NGỮ .......................................................................... 7 DANH MỤC CÁC BẢNG ...................................................................................... 8 DANH MỤC CÁC HÌNH VẼ, ĐỒ THỊ .................................................................. 8 CHƯƠNG 1:TỔNG QUAN VỀ ĐỀ TÀI ............................................................ 10 1.1. Lý do chọn đề tài ............................................................................................ 10 1.2. Mục tiêu của đề tài .......................................................................................... 10 1.2.1 Mục tiêu tổng quát ........................................................................................ 10 1.2.2 Mục tiêu cụ thể ............................................................................................. 10 1.3. Giới hạn và phạm vi của đề tài ....................................................................... 11 1.3.1 Đối tượng nghiên cứu ................................................................................... 11 1.3.2 Phạm vi nghiên cứu ...................................................................................... 11 1.4. Nội dung thực hiện ......................................................................................... 11 1.5. Phương pháp tiếp cận ..................................................................................... 11 CHƯƠNG 2:CƠ SỞ LÝ THUYẾT ..................................................................... 12 2.1. Quy trình phát triển phần mềm ....................................................................... 12 Quy trình phát triển phần mềm là một tập hợp các hoạt động tổ chức mà mục đích của chúng là xây dựng và phát triển phần mềm. ................................................... 12 2.2. Thiết kế giao diện web với HTML, CSS ........................................................ 15 2.3. Lập trình phía frontend .................................................................................. 16 CHƯƠNG 3:PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG ................................... 17 3.1 Phát biểu bài toán ............................................................................................. 17 3.2 Đặc tả yêu cầu phần mềm ................................................................................ 18 3.2.1 Các yêu cầu chức năng ................................................................................. 18 3.2.2 Biểu đồ lớp thực thể ...................................................................................... 44 3.2.3 Các yêu cầu phi chức năng ........................................................................... 44 3.3 Thiết kế giao diện ............................................................................................ 45 CHƯƠNG 4:TRIỂN KHAI WEBSITE .............................................................. 46 5

TỔNG QUAN VỀ ĐỀ TÀI

Lý do chọn đề tài

Chiếc điện thoại di động đã trở thành một trong những thành tựu khoa học quan trọng nhất, mang đến nhiều tiện ích cho con người, đặc biệt là khả năng giao tiếp dễ dàng và nhanh chóng Ngoài ra, điện thoại còn tích hợp nhiều tính năng ưu việt như truy cập Internet, gửi và tra cứu email, định vị toàn cầu, nhắn tin và chụp ảnh, khiến nó trở thành vật dụng thiết yếu trong cuộc sống hàng ngày Sự phát triển nhanh chóng của xã hội đã làm tăng cao nhu cầu sử dụng điện thoại di động, kéo theo sự bùng nổ của ngành công nghiệp sản xuất và kinh doanh điện thoại tại Việt Nam Tuy nhiên, nhiều cửa hàng điện thoại vẫn chưa có website quảng cáo sản phẩm hiện đại và chuyên nghiệp, điều này tạo ra cơ hội cho việc cải thiện sự hiện diện trực tuyến của họ.

Cửa hàng điện thoại di động Hải Hà chuyên cung cấp các sản phẩm điện thoại chính hãng với đa dạng mẫu mã và giá cả Chúng tôi cam kết đáp ứng mọi nhu cầu của khách hàng, kể cả những yêu cầu khắt khe nhất.

Mục tiêu của đề tài

Xây dựng website bán điện thoại di động cho cửa hàng Hải Hà

- Xây dựng và phát triển website bán điện thoại di động cho cửa hàng Hải Hà

- Giúp những ai có nhu cầu mua sắm và muốn xem những thông tin về sản phẩm một cách nhanh nhất, đầy đủ nhất.

- Nghiên cứu và hệ thống hoá nguyên tắc, kỹ thuật tổ chức trong công tác quản lý sản phẩm và quản lý khách hàng trên Internet

- Nghiên cứu tính bảo mật của hệ thống và cơ chế đồng bộ, thiết bị liên quan

Giới hạn và phạm vi của đề tài

- Đối tượng nghiên cứu: website quảng cáo điện thoại di động của một số cửa hàng

- Khách thể nghiên cứu: chủ cửa hàng, nhân viên, khách hàng

- Phạm vi không gian: tại cửa hàng di động Hải Hà

- Phạm vi thời gian: 4 tháng

- Ý nghĩa khoa học và thực tiễn: áp dụng thực tiễn vào cửa hàng di động HảiHà

Nội dung thực hiện

Áp dụng kiến thức về kỹ nghệ phần mềm cùng với biểu đồ ca sử dụng và biểu đồ lớp thực thể trong UML, chúng ta có thể khảo sát và xây dựng đặc tả yêu cầu cho hệ thống website phát triển một cách hiệu quả.

- Vận dụng HTML, JavaScript, Bootstrap, Jquery, Ajax để thiết kế và lập trình phía front-end cho Website đáp ứng các yêu cầu chức năng đã đặc tả

- Quản lý tài liệu, quản lý phiên bản bằng các công cụ như Github,

Phương pháp tiếp cận

- Nghiên cứu và đọc các tài liệu tham khảo

Khảo sát và thu thập ý kiến từ các cửa hàng đã có website là bước quan trọng để cải thiện và phát triển trải nghiệm người dùng Việc này giúp xác định những điểm mạnh và yếu của trang web, từ đó tối ưu hóa giao diện và chức năng, mang lại sự hài lòng cao hơn cho khách hàng.

- Tiếp cận một số cửa hàng đã có website sẵn

- Trực tiếp đến cửa hàng quan sát và trải nghiệm

CƠ SỞ LÝ THUYẾT

Quy trình phát triển phần mềm

Quy trình phát triển phần mềm là một tập hợp các hoạt động tổ chức mà mục đích của chúng là xây dựng và phát triển phần mềm.

Giai đoạn 1: Thu thập thông tin khách hàng

- Tìm hiểu yêu cầu thực tế của khách hàng.

- Xác nhận các yêu cầu của khách hàng về trang Web và các thông tin khách hàng cung cấp.

Giai đoạn 2: Giai đoạn phân tích

- Dựa vào những thông tin và yêu cầu thiết kế website của khách hàng, ViSolution phân tích rõ ràng mục đích, yêu cầu, nguyện vọng của khách hàng.

- Lập kế hoạch thực hiện dự án

Dựa trên kết quả khảo sát và thông tin từ khách hàng, ViSolution tiến hành thiết kế cấu trúc website và thiết kế tổng thể cho toàn bộ hệ thống.

Giai đoạn 3: Giai đoạn thiết kế

- Xem xét chi tiết yêu cầu và tiến hành thiết kế website

- Tiến hành xử lý hiệu ứng ảnh, thu thập tài liệu liên quan

- Kiểm tra sản phẩm để đảm bảo tính thẩm mỹ và thống nhất.

Giai đoạn 4: Giai đoạn xây dựng

- Xây dựng cơ sở dữ liệu dựa trên thiết kế.

- Soạn thảo nội dung tài liệu, chỉnh sửa hoàn thiện nội dung rồi đưa lên trang web.

- Tích hợp hệ thống: lắp ghép phân tích thiết kế, nội dung lập trình thành một sản phẩm.

- Tiến hành kiểm tra, chỉnh sửa và thực hiện nghiệm thu nội bộ

Giai đoạn 5: Giai đoạn chạy thử

- Tổng hợp nội dung, xây dựng hệ thống theo thiết kế.

- Kiểm tra và sửa lỗi.

- Lắp ghép thiết kế với phần mềm, đảm bảo không sai lệch với thiết kế và phần mềm hoạt động tốt.

- Chạy thử hệ thống trong vòng 01 tuần.

Giai đoạn 6: Giai đoạn nghiệm thu và chuyển giao

- Khách hàng duyệt dự án: khách hàng duyệt chất lượng dự án.

- Đăng tải hệ thống: đảm bảo hệ thống chạy tốt.

- Bàn giao cho khách hàng

- Đào tạo và huấn luyện khách hàng quản trị website một cách hiệu quả.

Một số quy trình phát triển phần mềm hiện hành sau:

Hình 2 1 Mô hình thác nước

Hình 2 3 Mô hình xoắn ốc

Hình 2 4 Mô hình tiếp cận lặp

Thiết kế giao diện web với HTML, CSS

HTML, viết tắt của HyperText Markup Language, là ngôn ngữ đánh dấu siêu văn bản dùng để thiết kế giao diện web Nó bao gồm các đoạn mã ngắn, thường được gọi là các thẻ, được nhập vào một tệp văn bản.

HTML là cấu trúc cơ bản của giao diện website, giúp xác định bố cục và đánh dấu các phần bằng thẻ (tag) cụ thể, từ đó xác định vai trò riêng của từng đối tượng trong website.

CSS, viết tắt của Cascade Style Sheet, là ngôn ngữ giúp trình duyệt hiểu và áp dụng các thiết lập định dạng cũng như bố cục cho trang web Nó đóng vai trò quan trọng trong việc nâng cao tính chuyên nghiệp và hoàn thiện của website, tương tự như phần tiếp theo của HTML.

Lập trình phía front-end

Quy trình thiết kế và xây dựng giao diện cho trang web hoặc ứng dụng web sử dụng các ngôn ngữ như HTML, CSS và JavaScript, cho phép người dùng trực tiếp xem và tương tác với nội dung.

- Mục đích cuối cùng giúp người dùng có thể thao tác và sử dụng một cách dễ dàng

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

Phát biểu bài toán

Trên trang chủ của website điện thoại di động, người dùng có thể dễ dàng tìm thấy giao diện hiển thị các mẫu điện thoại bán chạy và được tìm kiếm nhiều nhất Bên cạnh đó, khách hàng còn có cơ hội khám phá thông tin về các sản phẩm đang được khuyến mại tại cửa hàng.

Trên thị trường hiện nay, có nhiều loại điện thoại với mẫu mã đa dạng cho người dùng lựa chọn Người dùng có thể tìm thấy thông tin chi tiết về sản phẩm, bao gồm tên, giá, số lượng, mô tả và hình ảnh Ngoài ra, trang web còn cung cấp thanh tìm kiếm để người dùng dễ dàng tìm kiếm sản phẩm Bên cạnh đó, banner quảng cáo trên website cũng dẫn đến các trang nguồn khi được nhấp vào.

Sau khi chọn được điện thoại mong muốn, khách hàng có thể thêm sản phẩm vào giỏ hàng Giao diện giỏ hàng giúp khách hàng xem và điều chỉnh số lượng sản phẩm cùng tổng giá tiền Khi quyết định mua, khách hàng thực hiện thao tác đặt hàng Ngoài ra, khách hàng có thể quản lý đơn đặt hàng thông qua giao diện đặt hàng, cho phép xem trạng thái đơn hàng và chỉnh sửa hoặc hủy các đơn hàng chưa giao.

Khách hàng có thể bình luận về sản phẩm và nội dung trên website, đồng thời thông tin người bình luận sẽ được lưu trữ trong cơ sở dữ liệu Ngoài ra, người xem cũng có thể đánh giá chất lượng sản phẩm thông qua hệ thống sao.

3.1.2 Về phía người quản trị

Người quản trị có quyền quản lý mặt hàng trên website, bao gồm việc tải lên hình ảnh sản phẩm, nhập thông tin mô tả chi tiết, giá cả, mã sản phẩm và tên sản phẩm Họ cũng quản lý các danh mục sản phẩm với chức năng thêm, sửa, xóa Ngoài ra, người quản trị còn quản lý người dùng bằng cách thêm mới, sửa, xóa hoặc hiển thị thông tin người dùng trong hệ thống.

Khi khách hàng đặt hàng, thông tin sản phẩm sẽ được lưu trữ trong hệ thống, giúp người quản trị dễ dàng truy cập và tìm kiếm theo tên khách hàng hoặc mã đơn hàng Quản lý đơn đặt hàng bao gồm chi tiết như mã sản phẩm, tên sản phẩm, giá cả và ghi chú từ người quản trị Đối với nội dung tin tức trên website, người quản trị có thể quản lý tên tin tức, nội dung, hình ảnh, ngày đăng và người đăng Ngoài ra, người quản trị cũng có khả năng xem và lưu trữ các bình luận và đánh giá của khách hàng trong hệ thống.

Đặc tả yêu cầu phần mềm

3.2.1 Các yêu cầu chức năng a) Chức năng của phân hệ quản trị nội dung

STT Tên các use-case Ghi chú

1 Quản lý loại sản phẩm

2 Quản lý sản phẩm - Sửa thông tin sản phẩm

- Sửa thông tin hóa đơn

- Sửa thông tin nhà cung cấp

- Sửa thông tin khách hàng

- Thêm sản phẩm vào giỏ hàng

1 Mua hàng - Sửa sản phẩm trong giỏ hàng

- Xóa sản phẩm trong giỏ hàng

2 Tìm kiếm sản phẩm - Tìm kiếm theo loại sản phẩm

- Tìm kiếm sản phẩm theo các tiêu chí: kích thước, màu sắc

3 Đăng ký tài khoản - Đăng ký tài khoản

4 Đăng nhập - Đăng nhập hệ thống

Bảng 3 1 Use Case tổng quan về hệ thống

Hình 3 1 Use Case tổng quan về hệ thống

3.2.1.1: Biểu Đồ use case cho chức năng Quản lý loại sản phẩm

Hình 3 2 Biểu đồ UC chức năng QL Loại Sản phẩm

- Tên ca sử dụng: Quản Lý Loại Sản Phẩm

- Mục đích: Chức năng này cho phép quản lý thông tin của các loại sản phẩm, bao gồm: Thêm, sửa, xóa loại sản phẩm

- Tác nhân: Quản trị viên

Mô tả các kịch bản:

- Thông tin đầu vào: Mã loại, tên loại, mô tả

Hành động của tác nhân Phản ứng của hệ thống

1.Người quản lí chọn chức năng

Quản lý loại sản phẩm

2 Hiển thị danh sách các chức năng quản lí sản phẩm, cho phép QTV lựa chọn

3 Chọn chức năng: Thêm loại sản phẩm, QTV tiến hành việc thêm loại sản phẩm vào hệ thống.

4 Hiển thị trang nhập thông tin loại sản phẩm

5 QTV nhập các thông tin của loại sản phẩm mà hệ thống yêu cầu.

6 Gửi thông tin đã nhập tới hệ thống

7 Kiểm tra thông tin đã nhập, nếu chính xác thì lưu thông tin này vào cơ sở dữ liệu và thông báo thành công, trường hợp sai so với định dạng đã thống nhất thì thông báo

Bảng 3 2 Mô tả dòng sự kiện chính cho chức năng thêm loại sản phẩm

1 Hiển thị danh sách loại sản phẩm

2 Người quản lý chọn chức năng sửa trên loại sản phẩm muốn sửa

3 Hiển thị trang nhập lại thông tin loại sản phẩm

4 QTV nhập các thông tin của loại sản phẩm mà hệ thống yêu cầu.

6 Kiểm tra thông tin đã nhập, nếu chính xác thì lưu thông tin này vào cơ sở dữ liệu và thông báo thành công, trường hợp sai so với định dạng đã thống nhất thì thông báo thất bại.

Bảng 3 3 Mô tả dòng sự kiện chính cho chức năng sửa loại sản phẩm

1 Hiển thị danh sách loại sản phẩm

2 Người quản lý chọn chức năng xoá trên loại sản phẩm muốn xoá

3 Hệ thống xoá loại sản phẩm trong CSDL

Bảng 3 4 Mô tả dòng sự kiện chính cho chức năng xóa loại sản phẩm

3.2.1.2: Biểu Đồ use case cho chức năng Quản lý sản phẩm

Hình 3 3 Use Case tổng quan về Quản lý sản phẩm

- Tên ca sử dụng: Quản Lý Sản Phẩm

- Mục đích: Chức năng này cho phép quản lý thông tin của các sản phẩm, bao gồm: Thêm, sửa, xóa sản phẩm

Mô tả các kịch bản

- Thông tin đầu vào: Mã sản phẩm, tên sản phẩm, mã loại, mô tả, số lượng, đơn giá, hình ảnh của sản phẩm

2 Hiển thị danh sách các chức năng quản lí sản phẩm, cho phép QTV lựa chọn

3 Chọn chức năng: Thêm sản phẩm,

QTV tiến hành việc thêm sản phẩm vào hệ thống.

4 Hiển thị trang nhập thông tin sản phẩm

5 QTV nhập các thông tin của sản phẩm mà hệ thống yêu cầu.

7 Kiểm tra thông tin đã nhập, nếu chính xác thì lưu thông tin này vào cơ sở dữ liệu và thông báo thành công, trường hợp sai so với định dạng đã thống nhất thì thông báo thêm mới không thành công.

Bảng 3 5 Mô tả dòng sự kiện chính cho chức năng thêm sản phẩm

1 Hiển thị danh sách sản phẩm

2 Người quản lý chọn chức năng sửa trên sản phẩm muốn sửa

3 Hiển thị trang nhập lại thông tin sản phẩm

4 QTV nhập các thông tin của sản phẩm mà hệ thống yêu cầu.

Bảng 3 6 Mô tả dòng sự kiện chính cho chức năng sửa sản phẩm

1 Hiển thị danh sách sản phẩm

2 Người quản lý chọn chức năng xoá trên sản phẩm muốn xoá

3 Hệ thống xoá sản phẩm trongCSDL

Bảng 3 7 Mô tả dòng sự kiện chính cho chức năng xoá sản phẩm

3.2.1.3: Biểu Đồ use case cho chức năng Quản lý đơn hàng

Hình 3 4 Use Case tổng quan về Quản lý đơn hàng

- Tên ca sử dụng: Quản Lý Đơn Hàng

- Mục đích: Chức năng này cho phép quản lý thông tin của các đơn hàng, bao gồm: Sửa, xác thực, xoá đơn hàng

- Thông tin đầu vào: Là các thông tin của đơn hàng như sau: Mã đơn hàng, mã khách hàng, kiểu thanh toán, ghi chú

1 Hiển thị danh sách đơn hàng

2 Người quản lý chọn chức năng sửa trên đơn hàng muốn sửa

3 Hiển thị trang nhập lại thông tin đơn hàng

4 QTV nhập các thông tin của đơn hàng mà hệ thống yêu cầu.

Bảng 3 8 Mô tả dòng sự kiện chính cho chức năng sửa đơn hàng

2 Người quản lý chọn chức năng xác thực trên đơn hàng

3 Hiển thị trang nhập lại chọn các trạng thái của đơn hàng

4 QTV chọn trạng thái cho đơn hàng

Bảng 3 9 Mô tả dòng sự kiện chính cho chức năng xác thực đơn hàng

2 Người quản lý chọn chức năng xoá trên đơn hàng muốn xoá

3 Hệ thống xoá đơn hàng trong CSDL

Bảng 3 10 Mô tả dòng sự kiện chính cho chức năng xoá đơn hàng

3.2.1.4: Biểu Đồ use case cho chức năng Quản lý nhập hàng

Hình 3 5 Use Case tổng quan về Quản lý nhập hàng

- Tên ca sử dụng: Quản Lý Nhập Hàng

- Mục đích: Chức năng này cho phép quản lý thông tin của các hoá đơn nhập hàng, bao gồm: Tạo, sửa, xóa hoá đơn

- Thông tin đầu vào: Là các thông tin của hoá đơn như sau: Mã hóa đơn, mã NCC, ghi chú

2 Hiển thị danh sách các chức năng quản lí hoá đơn, cho phép QTV lựa chọn

3 Chọn chức năng: Tạo hoá đơn,

QTV tiến hành việc thêm hoá đơn vào hệ thống.

4 Hiển thị trang nhập thông tin hoá đơn

5 QTV nhập các thông tin của hoá đơn mà hệ thống yêu cầu.

Bảng 3 11 Mô tả dòng sự kiện chính cho chức năng tạo hoá đơn nhập

1 Hiển thị danh sách hoá đơn nhập hàng

2 Người quản lý chọn chức năng sửa trên hoá đơn muốn sửa

3 Hiển thị trang nhập lại thông tin hoá đơn

4 QTV nhập các thông tin của hoá đơn mà hệ thống yêu cầu.

Bảng 3 12 Mô tả dòng sự kiện chính cho chức năng sửa hoá đơn nhập

1 Hiển thị danh sách hoá đơn

2 Người quản lý chọn chức năng xoá trên hoá đơn muốn xoá

3 Hệ thống xoá hoá đơn trong CSDL

Bảng 3 13 Mô tả dòng sự kiện chính cho chức năng xoá hoá đơn nhập

3.2.1.5: Biểu Đồ use case cho chức năng Quản lý nhà cung cấp

Hình 3 6 Biểu đồ UC chức năng QL Nhà cung cấp

- Tên ca sử dụng: Quản Lý Nhà Cung Cấp

- Mục đích: Chức năng này cho phép quản lý thông tin của các nhà cung cấp, bao gồm: Thêm, sửa, xóa nhà cung cấp

- Thông tin đầu vào: Là các thông tin của hoá đơn như sau: Mã NCC, tên NCC, địa chỉ

Quản lý nhà cung cấp

2 Hiển thị danh sách các chức năng quản lí nhà cung cấp, cho phép QTV lựa chọn

3 Chọn chức năng: Thêm nhà cung cấp, QTV tiến hành việc thêm nhà cung vào hệ thống.

4 Hiển thị trang nhập thông tin nhà cung cấp

5 QTV nhập các thông tin của nhà cung cấp mà hệ thống yêu cầu.

Bảng 3 14 Mô tả dòng sự kiện chính cho chức năng thêm nhà cung cấp

1 Hiển thị danh sách nhà cung cấp

2 Người quản lý chọn chức năng sửa trên nhà cung cấp muốn sửa

3 Hiển thị trang nhập lại thông tin nhà cung cấp

4 QTV nhập các thông tin của nhà cung cấp mà hệ thống yêu cầu.

Bảng 3 15 Mô tả dòng sự kiện chính cho chức năng sửa nhà cung cấp

1 Hiển thị danh sách nhà cung cấp

2 Người quản lý chọn chức năng xoá trên nhà cung cấp muốn xoá

3 Hệ thống xoá nhà cung cấp trongCSDL

Bảng 3 16 Mô tả dòng sự kiện chính cho chức năng xoá nhà cung cấp

3.2.1.6: Biểu Đồ use case cho chức năng Quản lý khách hàng

Hình 3 7 Biểu đồ use case chức năng QL Khách hàng

- Tên ca sử dụng: Quản Lý Khách Hàng

- Mục đích: Chức năng này cho phép quản lý thông tin của khách hàng, bao gồm: Thêm, sửa, xóa khách hàng

- Thông tin đầu vào: Mã khách hàng, email, mật khẩu, họ tên, giới tính, số điện thoại, địa chỉ

2 Hiển thị danh sách các chức năng quản lí khách hàng, cho phép QTV lựa chọn

3 Chọn chức năng: Thêm khách hàng, QTV tiến hành việc thêm khách hàng vào hệ thống.

4 Hiển thị trang nhập thông tin khách hàng

5 QTV nhập các thông tin của khách hàng mà hệ thống yêu cầu.

Bảng 3 17 Mô tả dòng sự kiện chính cho chức năng thêm khách hàng

Sửa Thông Tin Khách Hàng

1 Hiển thị danh sách khách hàng

2 Người quản lý chọn chức năng sửa trên khách hàng muốn sửa

3 Hiển thị trang nhập lại thông tin khách hàng

4 QTV nhập các thông tin của khách hàng mà hệ thống yêu cầu.

Bảng 3 18 Mô tả dòng sự kiện chính cho chức năng sửa khách hàng

1 Hiển thị danh sách khách hàng

2 Người quản lý chọn chức năng xoá trên khách hàng muốn xoá

3 Hệ thống xoá khách hàng trong CSDL

Bảng 3 19 Mô tả dòng sự kiện chính cho chức năng xóa khách hàng

3.2.1.7: Biểu Đồ use case cho chức năng Thống kê

Hình 3 8 Biểu đồ UC chức năng Thống kê

- Tên ca sử dụng: Thống Kê

- Mục đích: Chức năng này cho phép QTV thống kê được những thông tin bao gồm: Sản phẩm bán chạy, thống kê khách hàng, thống kê đơn hàng

- Thông tin đầu vào: Không có

1.Người quản lí chọn chức năng Thống kê sản phẩm bán chạy

2 Hiển thị danh sách các sản phẩm được mua nhiều trong tháng, năm

Bảng 3 20 Mô tả dòng sự kiện chính cho chức năng thống kê SP bán chạy

3.2.1.8: Biểu Đồ use case cho chức năng mua hàng

Hình 3 9 Biểu đồ UC chức năng Mua hàng

- Tên ca sử dụng: Mua Hàng

Chức năng này giúp khách hàng dễ dàng mua sắm tại cửa hàng, cho phép họ thực hiện các thao tác như thêm sản phẩm vào giỏ hàng, chỉnh sửa thông tin sản phẩm trong giỏ, xoá sản phẩm không cần thiết và thanh toán hoá đơn một cách nhanh chóng.

- Thông tin đầu vào: Mã sản phẩm, số lượng sản phẩm

Thêm sản phẩm vào giỏ hàng

1.Khách hàng truy cập website

2 Hiển thị danh sách các sản phẩm của website trên trang chủ

3 Khách hàng chọn vào Thêm sản phẩm vào giỏ

4 Sản phẩm được thêm vào giỏ hàng của khách hàng

Bảng 3 21 Mô tả dòng sự kiện chính cho chức năng thêm SP vào giỏ hàng

Sửa sản phẩm trong giỏ hàng

1 Khách hàng chọn vào Giỏ hàng

2 Hiển thị danh sách các sản phẩm trong giỏ hàng của khách hàng

3 Khách hàng chọn tăng hoặc giảm số lượng của sản phẩm trong giỏ hàng

4 Số lượng sản phẩm được lưu lại

Bảng 3 22 Mô tả dòng sự kiện chính cho chức năng sửa SP trong giỏ hàng

Xoá sản phẩm trong giỏ hàng

3 Khách hàng chọn xoá sản phẩm

4 Sản phẩm được loại bỏ khỏi giỏ hàng

Bảng 3 23 Mô tả dòng sự kiện chính cho chức năng xoá SP trong giỏi hàng

3 Khách hàng chọn chức năng thanh toán

4 Hiển thị trang nhập thông tin thanh toán

5 Khách hàng nhập các thông tin của khách hàng mà hệ thống yêu cầu.

6 Gửi thông tin đã nhập lên hệ thống

7 Kiểm tra thông tin nhập, nếu chính xác thì lưu thông tin này vào cơ sở dữ liệu và thông báo thành công

Bảng 3 24 Mô tả dòng sự kiện chính cho chức năng thanh toán

3.2.1.8: Biểu Đồ use case cho chức năng tìm kiếm sản phẩm

Hình 3 10 Biểu đồ UC chức năng Tìm kiếm sản phẩm

- Tên ca sử dụng: Tìm Kiếm

Chức năng tìm kiếm sản phẩm giúp khách hàng dễ dàng tìm kiếm theo các tiêu chí mong muốn, bao gồm tìm kiếm theo tên, loại, kích thước và màu sắc.

- Thông tin đầu vào: Tên sản phẩm, loại sản phẩm, kích thước, màu sắc

Tìm kiếm theo tên sản phẩmHành động của tác nhân Phản ứng của hệ thống

1.Khách hàng chọn chức năng tìm kiếm

2 Nhập tên sản phẩm cần tìm và nhấn tìm

3.Hệ thống lựa chọn các sản phẩm có tên giống hoặc gần giống với tên khách hàng tìm và hiển thị ra màn hình

Bảng 3 25 Mô tả dòng sự kiện chính cho chức năng tìm kiếm theo tên sp

Tìm kiếm theo loại sản phẩm

2 Nhập tên loại sản phẩm cần tìm và nhấn tìm

3.Hệ thống lựa chọn các sản phẩm có tên loại giống hoặc gần giống với tên khách hàng tìm và hiển thị ra màn hình

Bảng 3 26 Mô tả dòng sự kiện chính cho chức năng tìm kiếm theo loại sp

Tìm kiếm theo màu sắc

2 Nhập kích thước hoặc màu sắc sản phẩm cần tìm và nhấn tìm

3.Hệ thống lựa chọn các sản phẩm có màu sắc giống với yêu cầu khách hàng tìm và hiển thị ra màn hình

Bảng 3 27 Mô tả dòng sự kiện chính cho chức năng tìm kiếm theo màu sắc

3.2.2 Biểu đồ lớp thực thể

3.2.3 Các yêu cầu phi chức năng

- Giao diện đẹp, dễ nhìn

- Cách trình bày hợp lý đơn giản, không cầu kì

- Có hướng dẫn sử dụng cụ thể

- Đơn giản, dễ sử dụng.

Thiết kế giao diện

Hình 3 12 Giao diện trang chủ

TRIỂN KHAI WEBSITE

Triển khai các chức năng cho phân hệ người dùng

- Khách hàng có thể xem danh sách sản phẩm tại trang chủ

- Khách hàng có thể xem chi tiết sản phẩm bằng cách click vào một sản phẩm nào đó

- Có thể sử dụng chức năng đăng kí, đăng nhập tài khoản của mình

- Khách hàng xem được giỏ hàng và có thể chỉnh sửa theo ý của mình

- Khách hàng có thể đặt hàng trên website nếu muốn mua sản phẩm nào đó

4.1.1 Trang chủ a) Phía font end

- Xây dựng bố cục trang Home bằng các thẻ HTML

Cấu trúc chung của HTML bao gồm 2 phần: head và body

Hình 4 1 Bố cục trang Home

Trong phần head chứa các thẻ định dạng tiêu đề và các thẻ

để khai báo CSS, JavaScript, Jquery.

Hình 4 2 Các thẻ trong head

Sử dụng các thẻ và thuộc tính id để chia layout cho bài viết thành 4 phần: header, nav (menu), content và footer, đồng thời áp dụng CSS để định dạng từng phần một cách hợp lý.

Bên trong các thẻ từng phần sử dụng các thẻ như

… để đưa nội dung bài viết vào.

Hình 4 3 Các thẻ trong div

- Kỹ thuật định dạng bằng CSS:

Trong CSS, các thuộc tính quan trọng bao gồm width để xác định độ rộng, height để chỉ định chiều cao, border để tạo đường viền cho các khối, padding để tạo vùng đệm xung quanh nội dung, và margin để thiết lập khoảng cách giữa các khối.

Bên cạnh đó còn có các thuộc tính định dạng cho text: font-family -> thiết lập font chữ; text-align: để căn chỉnh text…

Sử dụng và định dạng cho các column để phân chia các hình tùy theo kích thước màn hình(reponsive).

Sử dụng Javascript, Jquery, AngularJS để lập trình các chức năng

JavaScript sử dụng các hàm để lập trình nội dung theo ý muốn, chẳng hạn như tạo slideshow động cho phép chuyển đổi giữa các hình ảnh trong khoảng thời gian xác định.

Jquery để tạo ra các hiệu ứng, giúp tang tương tác giữa hệ thống và người dùng.

Triển khai các chức năng cho phân hệ quản trị nội dung

Người quản trị có nhiệm vụ thực hiện các chức năng quan trọng như thêm, sửa, xóa thông tin trong các phần quản lý sản phẩm, loại sản phẩm, hóa đơn nhập, hóa đơn bán, nhà cung cấp và khách hàng.

Kiểm thử và triển khai ứng dụng

- Khi ấn vào xem chi tiết sản phẩm đều đến đúng trang chi tiết của sản phẩm đó.

- Tất cả các trang đều hiển thị đúng nội dung và hình ảnh.

- Khi ấn đặt hàng tất cả sản phẩm đều xuất hiện đúng trong giỏ hàng.

- Khi ấn tăng giảm số lượng số lượng thay đổi đúng.

- Slideshow chuyển ảnh đúng ấn next hay back đều đúng sự kiện,

- Các đường link, button chuyển trang đều chạy đúng.

- Các hiệu ứng hover và click hoạt động đúng.

- Các trang danh mục sản phẩm khi ấn chọn đều đúng.

- Trang quản trị chạy đúng yêu cầu.

- Đã kiểm thử và pass 100%.

Bước 1: Dowload tệp và giải nén “Đồ án 2 – Website bán điện thoại di động Hải Hà”.

Bước 2: Chạy trên các trình duyệt thích ứng.

Bước 3: Chạy trang chủ trên trình duyệt.

Bước 4: Sau khi chạy màn hình sẽ hiện lên trang chủ chọn các trang muốn xem.

Bước 5: Xem sản phẩm hoặc đặt mua.

- Cấu hình : Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz 1.80GHz.

- Hệ điều hành: Windows 10 Home Single Language.

Tiêu đề	Xây Dựng Website Bán Điện Thoại Di Động Cho Cửa Hàng Hải Hà
Người hướng dẫn	Nguyễn Thị Hải Năng
Trường học	Trường Đại Học Sư Phạm Kỹ Thuật Hưng Yên
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Đồ Án
Năm xuất bản	2021
Thành phố	Hưng Yên

Định dạng
Số trang	52
Dung lượng	1,36 MB