đồ án 1 thiết kế website bán điện thoại

LỜI CAM ĐOANEm xin cam đoan đồ án “Thiết kế website bán điện thoại” là kết quả thực hiện của bản thân em dưới sự hướng dẫn của thầy Nguyễn Duy TânNhững phần sử dụng tài liệu tham khảo tr

ĐỒ ÁN 1

THIẾT KẾ WEBSITE BÁN ĐIỆN THOẠI

NGÀNH: CÔNG NGHỆ THÔNG TIN

CHUYÊN NGÀNH: MẠNG MÁY TÍNH VÀ TRUYỀN THÔNG HƯỚNG CHUYÊN SÂU: …

SINH VIÊN: LÊ TRUNG HIẾUMÃ LỚP: 101212HƯỚNG DẪN: NGUYỄN DUY TÂN

Nhận xét của giảng viên hướng dẫn:

LỜI CAM ĐOAN

Em xin cam đoan đồ án “Thiết kế website bán điện thoại” là kết quả thực hiện của bản thân em dưới sự hướng dẫn của thầy Nguyễn Duy Tân

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

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 thầy Nguyễn Duy Tân đã 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!

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

1.3.1 Đối tượng nghiên cứu 10

1.3.2 Phạm vi nghiên cứu 10

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 website 12

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

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

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 13

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

3.2 Đặc tả yêu cầu Website 13

3.2.1 Các yêu cầu chức năng 13

3.2.2 Thiết kế mô hình thực thể liên kết cho hệ thống trên trang web 14

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

3.3 Thiết kế giao diện 16

CHƯƠNG 4: TRIỂN KHAI WEBSITE 18

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

4.1.1 Trang chủ (Ví dụ) 18

4.1.2 Trang Xem Sản phẩm (Ví dụ) 18

6

4.2 Triển khai các chức năng cho phân hệ quản trị nội dung (nếu có) 18

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

DANH MỤC CÁC THUẬT NGỮ

1 HTML Hypertext Markup Language Ngôn ngữ đánh dấu siêu văn bản

8

DANH MỤC CÁC BẢNG

Bảng 3 1 Mô tả chức năng của phân hệ quản trị 14

Bảng 3 2 Mô tả chức năng phân hệ người dùng 14

Bảng 3 3 Danh sách thuộc tính bảng Sản phẩm 15

Bảng 3 4 Danh sách phương thức bảng Sản phẩm 15

Bảng 3 5 Danh sách thuộc tính bảng Đơn hàng 15

Bảng 3 6 Danh sách phương thức bảng Đơn hàng 16

Bảng 3 7 Danh sách thuộc tính Đơn hàng chi tiết 16

DANH MỤC CÁC HÌNH VẼ, ĐỒ THỊ

10

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI1.1 Lý do chọn đề tài

Hiện nay, các công nghệ tiên tiến phát triển ngày càng mạnh mẽ và được ứng dụng ngày càng nhiều vào các lĩnh vực kinh tế, sản xuất cũng như đời sống thường nhật của con người Một điểm tiêu biểu trong việc phát triển các công nghệ đó phải kể đến việc ứng dụng công nghệ thông tin vào hầu khắp các hoạt động Nhờ đó, các công việc được thực hiện nhanh, chính xác và đạt kết quả cao hơn rất nhiều.

Khi xã hội ngày cảng phát triển, mức sống của người dân được nâng cao thu nhập kinh tế ngày cảng được cải thiện thì chiếc điện thoại di động không còn trở nên xa lạ với mọi người nữa mà ngược lại nó là một vật dụng không thể thiếu đối với người dân hiện nay Hầu hết mỗi người đều trang bị cho mình một chiếc điện thoại phù hợp với nhu cầu và túi tiền của minh Tuy nhiên, với cuộc sống ngày càng bận rộn như hiện nay thì việc muốn mua một chiếc điện thoại mình ưa thích thì người tiêu dùng phải đến tận cửa hàng để chọn lựa vì thế sẽ mất khá nhiều thời gian và công sức.

Cùng với các lý do nêu trên, qua tìm hiểu nhóm đồ án được biết việc ứng dụng bản điện thoại di động trực tuyến sẽ giúp cho khách hàng giảm bớt được thời gian và công sức phải đến tận cửa hàng để mua Muốn lựa chọn cho mình một chiếc điện thoại ưng ý phù hợp với túi tiền thi khách hàng chỉ cần ngồi bên chiếc máy tính có nổi mạng internet là có thể mua được mặt hàng điện thoại mình cần.

Do đó nhóm để tải chọn thực hiện đề tài " Xây dựng Website bản điện thoại di động trực tuyến cho công ty Nhật Cường Mobile "

Phần mềm được xây dựng với định hướng giúp việc mua sắm điện thoại của khách hàng dễ dàng và nhanh gọn hơn, không mất thời gian và công sức.

Qua quá trình khảo sát thực tế, tìm hiểu và phân tích thiết kế nhỏm đề tài đưa ra bản bảo cáo gồm các phần sau để giúp người đọc hiểu rõ về chức năng của Website.

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

1.2.1 Mục tiêu tổng quát

- Thiết kế website bán điện thoại 1.2.2 Mục tiêu cụ thể

- Quản lý các thông tin khách hàng, ban quản trị

- Đưa ra các sản phẩm điện thoại di động đa dạng và hợp túi tiền

- Cung cấp cho khách hàng những cập nhật mới nhất về sản phẩm và giá cả - Đưa ra được các thống kê, báo cáo, chính xác về số lượng sản phẩm và

khách hàng

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

1.3.1 Đối tượng nghiên cứu

- Hệ thống bán điện thoại di động 1.3.2 Phạm vi nghiên cứu

- Phạm vi không gian: - Phạm vi thời gian:

- Ý nghĩa khoa học và thực tiễn của đề tài

+ Giúp nhóm đề tài hiểu rõ quy trình bán điện thoại trực tuyến + Giúp cho việc quản lý hàng hóa được thuận tiện hơn.

+ Giúp cho khách hàng mua hàng trên website biết rõ và thực hiện đúng trình tự khi mua hàng

1.4 Nội dung thực hiện

Chức năng **Cơ bản**:

- Trang chủ hiển thị đẹp, các sản phẩm được chia theo nhiều tiêu chí: nổi bật, mới, khuyến mãi, giá rẻ,

- Tìm kiếm/lọc/sắp xếp sản phẩm theo hãng, giá, tên, khuyến mãi, đánh giá, số sao,

- Đăng ký, đăng nhập, giỏ hàng, trang người dùng, lịch sử mua hàng - Trang chi tiết sản phẩm, giao diện **gợi ý sản phẩm** tương tự.

12

Chức năng **ADMIN**:

- **Thống kê** số lượng bán ra, doanh thu của từng hãng - Danh sách **sản phẩm**, tìm kiếm/lọc, thêm/sửa/xoá sản phẩm - Danh sách **đơn hàng**, tìm kiếm/lọc, duyệt/huỷ đơn hàng - Danh sách **khách hàng**, tìm kiếm/lọc, thêm/xoá/khoá khác hàng

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

<Tiếp cận trực tiếp với người sử dụng hệ thống thông qua việc khảo sát hệ thống cũ, đề xuất, lựa chọn hệ thống mới (có thể đề xuất nhiều phương án để chủ đầu tư lựa chọn, ) >

CHƯƠNG 2:CƠ SỞ LÝ THUYẾT

2.1 HTML (Hypertext Markup Language).Ngôn ngữ HTML:

HTML (viết tắt của từ Hypertext Markup Language, hay là “Ngôn ngữ Đánh dấu Siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web Cùng với CSS và JavaScript, HTML là một trong những ngôn ngữ quan trọng trong lĩnh vực thiết kế website HTML được định nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp HTML đã trở thành một chuẩn mực của Internet do tổ chức World Wide Web Consortium (W3C) duy trì Phiên bản chính thức mới nhất của HTML là HTML 4.01 (1999) Sau đó, các nhà phát triển đã thay thế nó bằng XHTML Hiện nay, phiên bản mới nhất của ngôn ngữ này là HTML5.

Lưu ý: HTML không phải là ngôn ngữ lập trình.

Bằng cách dùng HTML động hoặc Ajax, lập trình viên có thể được tạo ra và xử lý bởi số lượng lớn các công cụ, từ một chương trình soạn thảo văn bản đơn giản có thể gõ vào ngay từ những dòng đầu tiên cho đến những công cụ xuất bản WYSIWYG phức tạp Hypertext là cách mà các trang Web (được thiết kế bằng HTML) được kết nối với nhau Và như thế, đường link có trên trang Web được gọi là Hypertext Như tên gọi đã nói, HTML là ngôn ngữ đánh dấu bằng thẻ (Markup Language), nghĩa là bạn sử dụng HTML để đánh dấu một tài liệu text bằng các thẻ (tag) để nói cho trình duyệt Web cách để cấu trúc nó để hiển thị.

Ưu, nhược điểm

- Ưu điểm:

+ Có thể tích hợp được với các ngôn ngữ khác như CSS.

+ Ngôn ngữ được sử dụng rộng lớn này có rất nhiều nguồn tài nguyên hỗ trợ và

+ cộng đồng sử dụng cực lớn.

+ Sử dụng mượt mà trên hầu hết mọi trình duyệt + Có quá trình học đơn giản và trực tiếp + Mã nguồn mở và hoàn toàn miễn phí.

+ Chuẩn chính của web được vận hành bởi World Wide Web Consortium - Nhược điểm:

+ Được dùng chủ yếu cho web tĩnh Đối với các tính năng động cần sử dụng

+ JavaScript hoặc ngôn ngữ backend bên thứ 3 như PHP

+ Một lượng lớn code phải được viết để tạo một trang web đơn giản + Một số trình duyệt chậm hỗ trợ tính năng mới.

+ Tính năng bảo mật không tốt 14

Có bốn loại phần tử đánh dấu trong HTML:

- Đánh dấu Có cấu trúc miêu tả mục đích của phần văn bản

- Đánh dấu trình bày miêu tả phần hiện hình trực quan của phần văn bản bất kể chức năng của nó là gì (ví dụ, <b>boldface</b> sẽ hiển thị đoạn văn bản boldface) (Chú ý là cách dùng đánh dấu trình bày này bây giờ không còn được khuyên dùng mà nó được thay thế bằng cách dùng

Bảng 1: Một số thẻ trong HTML

<!DOCTYPE…> Còn gọi là thẻ khai báo một tài liệu HTML Thẻ này xác định loại tài liệu phiên bản HTML.

<html> Thẻ này chưsa đựng các tài liệu HTML đầy đủ Ở đầu trang sẽ xuất hiện các thẻ <head>, </head> và than tài liệu là các thẻ <body>, </body>.

<head> Thẻ này đại diện cho đầu trang tài liệu mà có thể giữ các thẻ HTML như <title>, <link> …

<title> Thẻ <title> được sử dụng trong thẻ <head> chỉ tiêu đề tài liệu.

<body> Thẻ này đại diện cho than tài liệu và giữ các thẻ như

<h1>, <div>, <p> …

<h1> Thẻ tag này đại diện cho các tiêu đề trang.

<p> Thẻ tag này đại diện cho định dạng các đoạn văn trong trang web.

Bảng 1: Một số thẻ trong HTML

16

2.2 CSS (Cascading Style Sheet language)

Ngôn ngữ CSS:

CSS (Cascading Style Sheets) là mã bạn sử dụng để tạo kiểu cho trang web của mình, Giống như HTML, CSS không thực sự là một ngôn ngữ lập trình Nó không phải là một ngôn ngữ đánh dấu - đó là một ngôn ngữ định kiểu Điều này có nghĩa là nó cho phép bạn áp dụng kiểu có chọn lọc cho các phần tử trong tài liệu HTML.

Cơ cấu bộ quy tắc CSS:

- Selector: Tên phần tử HTML bắt đầu của bộ quy tắc Nó chọn (các)

phần tử được tạo kiểu (trong trường hợp này là phần tử p) Để tạo kiểu cho một phần tử khác, chỉ cần thay đổi bộ chọn.

- Declaration: Một quy tắc duy nhất như: color: red; xác định thuộc tính

của phần tử nào bạn muốn tạo kiểu.

- Properties: Những cách mà bạn có thể tạo kiểu cho một phần tử

HTML (Trong trường hợp này, color là một thuộc tính của phần tử) Trong CSS, bạn chọn thuộc tính nào bạn muốn tác động trong quy tắc của mình.

- Giá trị thuộc tính: Ở bên phải của thuộc tính sau dấu hai chấm(:),

chúng ta có giá trị thuộc tính, mà chọn một trong số nhiều lần xuất hiện có thể cho một thuộc tính cụ thể (color có rất nhiều giá trị ngoài red).

Chọn nhiều phần tử:

Bạn cũng có thể chọn nhiều kiểu phần tử và áp dụng một quy tắc duy nhất được đặt cho tất cả các yếu tố đó Bao gồm nhiều bộ chọn được phân biệt bởi dấu phẩy (,).

a:hover Chọn <a>, nhưng chỉ khi con trỏ chuột đang di chuột qua

liên kết.

Bảng 2: Các bộ của CSS

18

Tác dụng của CSS:

- Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn của trang Web được gọn gàng hơn, tách nội dung của trang Web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung.

- Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp lại việc định dạng cho các trang Web giống nhau.

Có 3 cách để sử dụng CSS.

- “Inline CSS”: Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc tính style.

- “Internal CSS”: Đặt CSS ở đầu trang Web để áp dụng kiểu dáng cho toàn bộ trang ấy, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ <style> rồi đặt vào trong phần header của Web (giữa <head> và </head>).

- “External CSS”: Đặt các thuộc tính CSS vào một tệp tin riêng biệt (*.css), khi đó có thể tham chiếu đến từ nhiều trang Web khác nhau Tham chiếu tới tệp tin CSS trên từ trang Web bằng đoạn mã:

- <link rel=”stylesheet” type=”text/css” href=”…/style.css”/>

CHƯƠNG 3:PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG1.1 Phát biểu bài toán

1.2 Đặc tả yêu cầu Website1.2.1 Các yêu cầu chức năng

Phần này mô tả các chức năng của hệ thống, có thể vẽ cả biểu đồ phân rã chức năng

a) Chức năng của phân hệ quản trị nội dung (nếu có) - **Thống kê** số lượng bán ra, doanh thu của từng hãng - Danh sách **sản phẩm**, tìm kiếm/lọc, thêm/sửa/xoá sản phẩm - Danh sách **đơn hàng**, tìm kiếm/lọc, duyệt/huỷ đơn hàng - Danh sách **khách hàng**, tìm kiếm/lọc, thêm/xoá/khoá khác hàng

Bảng 3 1 Mô tả chức năng của phân hệ quản trị

STT Tên yêu cầuMô tả yêu cầu

1 Đăng nhập của người quản trị

Xác thực danh tính người quản trị

Người quản trị thực hiện đăng nhập vào hệ thống ( điền user, password) Nếu user, password khớp với dữ liệu được lưu thì thông báo đăng nhập thành công, ngược lại đưa ra thông báo yêu cầu đăng nhập lại

2 Thêm sản phẩm Thêm mới sản phẩm thông tin sản phẩm được quản lý (bán) trên website :

Cho người dùng nhập thông tin sản phẩm cần thêm bằng giao diện trên web, sử dụng thẻ input.

Lấy thông tin từ thẻ input đưa vào hàm tạo đối tượng Đưa đối tượng đã tạo vào danh sách sản phẩn lưu trong local stogare.

3 Xóa sản phẩm Xóa sản phẩm khỏi danh sách sản phẩm 4 Chỉnh sửa sản phẩm Chỉnh sửa sản phẩm trong danh sách sản phẩm

Tìm kiếm/lọc đơn hàng trong danh sách đơn hàng 7 Duyệt/huỷ đơn hàng Duyệt/huỷ đơn hàng trong danh sách đơn hàng

Thêm/xoá/khoá khách hàng trong danh sách khách hàng

b) Chức năng của phân hệ người dùng (nếu có)

22

Bảng 3 2 Mô tả chức năng phân hệ người dùng

STT Tên yêu cầuMô tả yêu cầu

1 Đăng kí tài khoản Đăng kí tài khoản người dùng để mua hàng 2 Đăng nhập Xác thực danh tính khách hàng

Khách hàng thực hiện đăng nhập vào hệ thống ( điền user, password) Nếu user, password khớp với dữ liệu được lưu thì thông báo đăng nhập thành công, ngược lại đưa ra thông báo yêu cầu đăng nhập lại

3 Thêm sản phẩm Thêm sản phẩm muốn mua vào giỏ hàng 4 Xóa sản phẩm Xóa sản phẩm khỏi giỏ hàng

5 Lịch sử mua hàng Hiển thị lịch sử mua hàng

1.2.2 Thiết kế mô hình thực thể liên kết cho hệ thống trên trang web

a) Sản phẩm bán - Danh sách thuộc tính

Bảng 3 3 Danh sách thuộc tính bảng Sản phẩm

1 masp Khác rỗng Tạo khi thêm mới

2 name Khác rỗng Tên của sản phẩm

3 price >0 Giá của sản phẩm

4 img Khác rỗng Đường dẫn hình ảnh

5 chitietSanpham Khác rỗng Thông tin chi tiết

6 Maloai Khác rỗng Mã loại sản phẩm

- Danh sách phương thức

Bảng 3 4 Danh sách phương thức bảng Sản phẩm

1 themSanPham() Chức năng của quản lý Thêm sản phẩm

2 autoMaSanPham() Chức năng của quản lý Tự tạo mã cho sản phẩm mới

2 suaSanPham() Chức năng của quản lý Sửa sản phẩm

3 xoaSanPham() Chức năng của quản lý Xóa sản phẩm

4 TimKiem() Chức năng của quản lý Tìm kiếm sản phẩm b) Đơn Hàng

- Danh sách thuộc tính

Bảng 3 5 Danh sách thuộc tính bảng Đơn hàng

Bảng 3 6 Danh sách phương thức bảng Đơn hàng

1 duyet () Chức năng của quản lý Duyệt/hủy/xóa đơn

4 locDonHangTheoKhoangNgay() Chức năng của quản lý Lọc đơn hàng

5 timKiemDonHang() Chức năng của quản lý Tìm kiếm đơn hàng 24

6 sortDonHangTable(loai) Chức năng của quản lý Sắp xếp đơn hàng ☑ Đơn Hàng chi tiết

- Danh sách thuộc tính

Bảng 3 7 Danh sách thuộc tính Đơn hàng chi tiết

1 maDonHang Mã đơn hàng Lấy từ bảng đơn hàng

2 MaSP Mã sản phẩm lấy từ bảng sản phẩm bán

4 Giá Đơn giá sản phẩm lấy từ bảng sản phẩm bán

1.2.3 Các yêu cầu phi chức năng 1.3 Thiết kế giao diện

<Phần này, mô tả và giải thích sơ qua giao diện hệ thống và các giao diện sử dụng trong đề tài>

Ví dụ mô tả giao diện hệ thống:

1 Giao diện trang chủ Hiển thị tất cả các chức năng chính của hệ thống

2 Giao diện trang đăng nhập

Kiểm tra tính đúng đắn của tài khoản trước khi cho phép sử dụng các chức năng của