3.2.2.sơ đồ phân cấp chức ... -...

52
ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒ THỂ THAO Sinh viên thực hiện : TRẦN KHÁNH DUY ĐẶNG VĂN TUẤN Giảng viên hướng dẫn : ThS.VÕ HÙNG CƯỜNG Lớp : 19IT5

Upload: others

Post on 06-Mar-2021

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

ĐẠI HỌC ĐÀ NẴNGKHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

ĐỒ ÁN CƠ SỞ 1

ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒ THỂ THAO

Sinh viên thực hiện : TRẦN KHÁNH DUY ĐẶNG VĂN TUẤN

Giảng viên hướng dẫn : ThS.VÕ HÙNG CƯỜNGLớp : 19IT5

Đà nẵng, ngày 05 tháng 07 năm 2020

Page 2: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

ĐẠI HỌC ĐÀ NẴNGKHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

ĐỒ ÁN CƠ SỞ 1

XÂY DỰNG WEBSITE BÁN ĐỒ THỂ THAO

Đà Nẵng, ngày 05 tháng 07 năm 2020

Page 3: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

MỞ ĐẦU

1

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức, cũng như của các công ty, nó đóng vai trò hết sức quan trọng, có thể tạo ra những bước đột phá mạnh mẽ.Cùng với sự phát triển không ngừng về kỹ thuật máy tính và mạng điện tử, công nghệ thông tin cũng được những công nghệ có đẳng cấp cao và lần lượt chinh phục hết đỉnh cao này đến đỉnh cao khác. Mạng Internet là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng trở nên một công cụ không thể thiếu, là nền tảng chính cho sự truyền tải, trao đổi thông tin trên toàn cầu.Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàng cho người sử dụng: chỉ cần có một máy tính kết nối internet và một dòng dữ liệu truy tìm thì gần như lập tức… cả thế giới về vấn đề mà bạn đang quan tâm sẽ hiện ra, có đầy đủ thông tin, hình ảnh và thậm chí đôi lúc có cả những âm thanh nếu bạn cần…Bằng internet, chúng ta đã thực hiện được nhiều công việc với tốc độ nhanh hơn và chi phí thấp hơn nhiều so với cách thức truyền thống. Chính điều này, đã thúc đẩy sự khai sinh và phát triển của thương mại điện tử và chính phủ điện tử trên khắp thế giới, làm biến đổi đáng kể bộ mặt văn hóa, nâng cao chất lượng cuộc sống con người.Trong hoạt động sản xuất, kinh doanh, giờ đây, thương mại điện tử đã khẳng định được vai trò xúc tiến và thúc đẩy sự phát triển của doanh nghiệp. Đối với một cửa hàng hay shop, việc quảng bá và giới thiệu đến khách hàng các sản phẩm mới đáp ứng được nhu cầu của khác hàng sẽ là cần thiết. Vậy phải quảng bá thế nào đó là xây dựng được một Website cho cửa hàng của mình quảng bá tất cả các sản phẩm của mình bán.Vì vậy, em đã thực hiện đồ án “ XÂY DỰNG WEBSITE BÁN HÀNG QUA MẠNG”

cho một shop bán đồ thể thao SPORTSHOP.

Người chủ cửa hàng đưa các sản phẩm đó lên website của mình và quản lý bằng website đó. Khách hàng có thể đặt mua hàng trên website mà không cần đến cửa hàng. Chủ cửa hàng sẽ gửi sản phẩm cho khách hàng khi nhận được tiền.

Page 4: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

LỜI CẢM ƠN

2

Chúng em xin chân thành cảm ơn các thầy cô và các bạn đã dành thời gian giúp đỡ chúng em trong quá trình thực hiện đồ án này. Đặc biệt, chúng em xin chân thành cảm ơn Ths.Võ Hùng Cường là người đồng ý hướng dẫn trực tiếp cho đề tài của chúng em. Là người tận tình giúp đỡ chúng em về thông tin của đồ án. Nhờ vậy mà chúng em đã hoàn chỉnh được đồ án của mình và quan trọng hơn hết là chúng em đã tiếp thu được những kinh nghiệm trong suốt quá trình thực hiện đồ án.

Tuy nhiên, vì đây là lần đầu chúng em thực hiện một dự án cho bản thân mặc dù đã tìm tòi nghiên cứu nhưng không tránh khoi những thiếu sót. Chúng em rất mong nhận được sự thông cảm và góp ý của thầy cô.

Em xin chân thành cam ơn!

Page 5: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

NHẬN XÉT (Giảng viên hướng dẫn)

................................................................................................................................................ ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

Đà Nẵng, ngày … tháng 07 năm 2020

Giảng viên hướng dẫn

ThS. VÕ HÙNG CƯỜNG

3

Page 6: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

MỤC LỤC Trang

MỞ ĐẦU................................................................................................................... 1 LỜI CẢM ƠN.......................................................................................................... 2Chương 1. Giới thiệu.............................................................................................. 7

1.1 Tên đề tài...................................................................................................... 71.2 Mục tiêu....................................................................................................... 71.3 Giới thiệu về dự án....................................................................................... 7

1.4 Logo website ……………………………………………………………. 7 1.5 Công cụ thiết kế website ………………………………………………... 7 1.6 Sinh viên thực hiện………………………………………………………. 7Chương 2. Công cụ kĩ thuật.................................................................................. 8

2.1 Tìm hiểu về HTML...................................................................................... 82.2 Giới thiệu tổng quan về ngôn ngữ lập trình JavaScript................................ 102.3 Tìm hiểu về CSS – Cascading Style Sheets................................................ 112.4 Bootstrap..................................................................................................... 132.5 Phần mềm Sublime Text 3......................................................................... 13

Chương 3 Phân Tích và thiết kế hệ thống 3.1. Khảo sát hiện trạng và xây dựng hệ thống mới………………………. 3.2. Phân tích hệ thống ……………………………………………………...Chương 4. Triển khai xây dựng website …………………………………….. 3.1 Chức năng trang web…………………………………………………………………….. 3.2 Chức năng và nội dung của các trang web ……………………………… 3.3 Hệ thống thông tin ………………………………………………………. 3.4 Hình ảnh trang web ………………………………………………………Chương 5 Tổng kết đánh giá và hướng phát triển........................................... 5.1 Những điểm làm được.............................................................................. 5.2 Những điểm chưa làm được và hướng giải quyết ..................................... 5.3. Hướng phát triển.........................................................................................DANH MỤC TÀI LIỆU THAM KHẢO...............................................................

4

Page 7: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

DANH MỤC CỤM TỪ VIẾT TẮT

STT Cụm từ Viết tắt1 HyperText Markup Language HTML2 Cascading Style Sheets CSS 3 MS FrontPage Microsoft FrontPage4 World Wide Web Consortium W3C

5

Page 8: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

DANH MỤC CÁC BẢNG

6

Page 9: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

DANH MỤC HÌNHTrang

Hình 2.1 - Kết quả của đoạn code minh họa (1) ………………………………. 10Hình 2.2 - Kết quả của đoạn code minh họa (2) ………………………………. 11Hình 2.3 - Kết quả của đoạn code minh họa (3) ………………………………. 13Hình 2.4 - Giao diện sử dụng của phần mềm Sublime Text 3 ........................... 14

7

Page 10: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

Chương 1 GIỚI THIỆU

1.1.Tên đề tài

“XÂY DỰNG WEBSITE BÁN ĐỒ THỂ THAO”1.2.Mục tiêu- Thiết kế web bán quần áo online với giao diện website bắt mắt, phù hợp với sản phẩm của bạn, thân thiện với người dùng, dễ sử dụng và dễ quản lý.- Thiết kế web bán đồ thể thao  với chi phí hợp lý nhất.- Hỗ trợ bảo mật nhiều lớp cho website của bạn tránh bị hacker quấy phá.- Tốc độ load nhanh- Thiết kế tối ưu hóa website , thân thiện với các trang tìm kiếm Google, Bing, v.v.. giúp bạn tiếp cận khách hàng tốt hơn.- Tích hợp giao diện mobile làm thuận tiện hơn cho khách hàng trong việc sử dụng trên điện thoại, máy tính bảng,…- Có thể tích hợp các cổng thanh toán trực tuyến như Ngân Lượng, Bảo Kim, Paypal, ATM… vào website giúp dễ dàng mua bán thanh toán với khách hàng.- Được tích hợp các công nghệ thiết kế web mới nhất hiện nay như : HTML5, CSS3.- Thiết kế web bán quần áo online được tối ưu hoạt động mobile theo công nghệ responsive công nghệ mạnh nhất trên thế giới về độ tương thích với các hệ điều hành.

1.3.Giới thiệu về dự ánViệc kinh doanh- mua bán là nhu cầu không thể thiếu đối với mỗi chúng ta. Trong

thời đại cạnh tranh hiện nay việc giới thiệu sản phẩm kinh doanh đến từng cá nhân với chi phí thấp, hiệu quả cao là một vấn đề nan giải của người kinh doanh cũng như với nhu cầu mua sắm với những sản phẩm đa chủng loại, đạt chất lượng, và hợp túi tiền của người tiêu dùng vì vậy thương mại điện tử đã được ra đời và dần dần phát triển trên toàn thế giới .

Việc phổ biến các sản phẩm của cửa hang kinh doanh đến khách hàng thông qua các bảng báo giá tuy nhiên chi phí cao vì số lượng sản phẩm ngày một đa dạng vì giá cả thay đổi liên tục và tính phổ biến không cao chưa đáp ứng được nhu cầu người dùng . Mặt khác cửa hàng còn gặp nhiều khó khăn như chưa quản lí được người dùng, thông tin nhà sản xuất, cập nhập giá sianr phẩm, quản lí sản phẩm … Nắm bắt tình hình trên nhóm chúng em tiến hành thiết kế trang web bán đồ thể thao online để mong sao giúp cho các cửa hàng phát triển nhanh hơn, giúp cho chủ cửa hàng có thể quản lí cửa hàng cửa mình một cách tốt hơn .1.4. Logo website

8

Page 11: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

1.5.Công cụ thiết kế website- Sử dụng ngôn ngữ lập trình web HTML, Javascript và các công cụ hỗ trợ định dạng như CSS và bootstrap để tạo một website tĩnh.- Sử dụng Sublime Text31.6. Sinh viên thực hiện

Trần Khánh Duy – 19IT5 Đặng Văn Tuấn – 19IT5

Chương 2: CÔNG CỤ KĨ THUẬT

2.1. Tìm hiểu về HTML2.1.1. HTML là gì?

HTML là chữ viết tắt của Hypertext Markup Language. Nó giúp người dùng tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, links, blockquotes, vâng vâng.

HTML không phải là ngôn ngữ lập trình, đồng nghĩa với việc nó không thể tạo ra các chức năng “động” được. Nó chỉ giống như Microsoft Word, dùng để bố cục và định dạng trang web.

2.1.2. Lịch sử của HTML:

HTML được sáng tạo bởi Tim Berners-Lee, nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ. Anh ta đã nghĩ ra được ý tưởng cho hệ thống hypertext trên nền Internet.

Hypertext có nghĩa là văn bản chứa links, nơi người xem có thể truy cập ngay lập tức. Anh xuất bản phiên bản đầu tiên của HTML trong năm 1991 bao gồm 18 tag HTML. Từ đó, mỗi phiên bản mới của HTML đều có thêm tag mới và attributes mới.

Theo Mozilla Developer Network: HTML Element Reference, hiện tại có hơn 140 HTML tags, mặc dù một vài trong số chúng đã bị tạm ngưng (không hỗ trợ bởi các trình duyệt hiện đại).

Nhanh chóng phổ biến ở mức độ chóng mặt, HTML được xem như là chuẩn mật của một website. Các thiết lập và cấu trúc HTML được vận hành và phát triển bởi World Wide Web Consortium (W3C). Bạn có thể kiểm tra tình trạng mới nhất của ngôn ngữ này bất kỳ lúc nào trên trang W3C’s website.

9

Page 12: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

Nâng cấp mới nhất gần đây là vào năm 2014, khi ra mắt chuẩn HTML5. Nó thêm vài tags vào markup, để xác định rõ nội dung thuộc loại là gì, như là <article>, <header>, và <footer>.

2.1.3. Ưu và nhược điểm của HTML:

Ưu điểm:

- 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í.- Markup gọn gàng và đồng nhất.- Chuẩn chính của web được vận hành bởi World Wide Web Consortium (W3C).- Dễ dàng tích hợp với các ngôn ngữ backend như PHP và Node.js.

Khuyết điểm:

- Được dùng chủ yếu cho web tĩnh. Đối với các tính năng động, bạn cần sử dụng JavaScript hoặc ngôn ngữ backend bên thứ 3 như PHP.- Nó có thể thực thi một số logic nhất định cho người dùng. Vì vậy, hầu hết các

trang đều cần được tạo riêng biệt, kể cả khi nó sử dụng cùng các yếu tố, như là headers hay footers.- Một số trình duyệt chậm hỗ trợ tính năng mới.- Khó kiểm soát cảnh thực thi của trình duyệt (ví dụ, những trình duyệt cũ không

render được tag mới)

Ví dụ minh họa + kết quả: <h1> Thẻ HTML </h1>.

Đoạn code minh hoạ (1):<html><head>

<title>demo</title></head><body> <h1> Thẻ HTML </h1>.</body></html>

10

Page 13: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

Hình 2.1: Kết quả của đoạn code minh họa (1)

2.2. Tìm hiểu về ngôn ngữ lập trình JavaScript- JavaScript là một ngôn ngữ kịch bản (scripting language) dùng để tương tác

với các trang HTML dựa trên đối tượng (object-based scripting language). Ngôn ngữ này chủ yếu dùng cho kỹ thuật lập trình ở phía client.

- Các chương trình JavaScript thường được nhúng (embedded) trực tiếp vào tập tin HTML bằng tag <script> hoặc tích hợp (integrated) vào trang web thông qua một tập tin được khai báo trong tag <link>.

- JavaScript có một số đặc điểm sau:o Là một ngôn ngữ thông dịch (interpreted language), nghĩa là các script

thi hành không cần biên dịch trước (precomplie). Trình duyệt dịch script, phân tích và thi hành ngay tức thời.

o Lập trình theo cấu trúc (Structured programing)o Giống như C và Java, có phân biệt chữ HOA và thường.

Đoạn code minh họa (2) :<html><head>

<meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>DemoJavascript</title>

</head><body>

11

Page 14: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

<div><h2 id="demoscript">JavaScript</h2>

</div><script type="text/javascript">var element = document.getElementById('demoscript');</script>

</body></html>

Hình 2.2: Kết quả của đoạn code minh họa (2)

2.3. Tìm hiểu về CSS – Cascading Style Sheets

a. Style Sheet là gì?- Là một tập hợp các qui định về cú pháp khai báo dùng để định dạng trang web,

chính xác hơn là nơi dùng để định nghĩa các style.- Nói đơn giản hơn, Style Sheet giống như là một bộ công cụ dùng để “trang trí”

trang web.

b. Giới thiệu CSS – Cascading Style Sheets

b.1. CSS là gì?

CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language. Nó dùng để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu, như là HTML. Nó có thể điều khiển định dạng

12

Page 15: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

của nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web. Nó phân biệt cách hiển thị của trang web với nội dung chính của trang bằng cách điều khiển bố cục, màu sắc, và font chữ.

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì một lý do đơn giản. HTML không được thiết kế để gắn tag để giúp định dạng trang web. Bạn chỉ có thể dùng nó để “đánh dấu” lên site.

b.2. Ưu điểm của CSS:

- Tiết kiệm băng thông (bandwith)- Kết hợp và làm tăng sức mạnh cho HTML- Có thể “đặt” các đối tượng ở bất cứ vị trí nào trên webpage- CSS tương thích với hầu hết các trình duyệt- Hỗ trợ cho việc in ấn webpage- Hỗ trợ tối đa việc tùy biến webpage- Hỗ trợ các công cụ tìm kiếm- Giúp các webpage có sự đồng bộ tuyệt đối, dễ dàng nâng cấp giao diện

Đoạn code minh họa (3):

<html><head><style type="text/css">p.fontArial { font-family: Arial, Helvetica, sans-serif; }p.fontCourier { font-family: "Courier New", Courier, monospace; }</style></head><body> <p class="fontArial">font Arial</p> <p class="fontCourier">font Courier</p></body>

</html>

13

Page 16: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

Hình 2.3: Kết quả của đoạn code minh họa (3)

2.4.Bootstrap- Bootstrap là một framework cho phép thiết kế website reponsive nhanh hơn và dễ

dàng hơn, cho phép thiết kế phát triên responsive web mobile.- Bootstrap là bao gồm các HTML templates, CSS templates và Javascript tao ra

những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels và nhiều thứ khác. Trong bootstrap có thêm các plugin JavaScript trong nó. Giúp cho việc thiết kế reponsive của bạn dễ dàng hơn và nhanh chóng hơn.

2.5. Phần mềm Sublime Text 33.5.1. Sublime Text là gì?

Sublime Text là trình soạn thảo mã nguồn đa nền tảng độc quyền với giao diện lập trình ứng dụng Python. Nó thực sự hỗ trợ nhiều ngôn ngữ lập trình và ngôn ngữ đánh dấu, và người dùng có thể thêm các chức năng bằng các plugin, thường được xây dựng bởi cộng đồng và được duy trì theo giấy phép phần mềm miễn phí.

Sublime Text phát hành đầu tiền vào ngày 18 tháng 1 năm 2008 với nhà phát triển là “ Jon Skinner ”.

3.5.2. Lí do nên chọn Sublime Text:

14

Page 17: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

- Sublime Text - Sublime Text khác với các IDE khác ở điểm rất nhẹ, linh hoạt, cài đặt dể dàng,

dể sử dụng, cung cấp nhiều tính năng tiện lợi cho các lập trình viên.- Thời gian khởi động của Sublime Text rất nhanh, rơi vào khoảng 1-2 giây, khác

với các IDE khác chúng ta thưởng phải chờ tầm 10 giây để mở lên. - Sublime Text cho phép chúng ta tùy biến thông qua việc cài đặt các Plugin hoặc

các Automation Task bằng việc tùy biến các đoạn snippet.- Sublime Text có giao diện người dùng trực quan, đơn giản, dễ sử dụng- Hỗ trợ nhiều chức năng mạnh mẽ có thể mở rộng thêm thông qua Package

Control.- Hỗ trợ nhận diện, tô màu từ khóa cho hơn 20 ngôn ngữ khác nhau như

HTML, CSS, Javascript, PHP,… - Sublime Text hỗ trợ trên nhiều nền tảng hệ điều hành khác nhau.

Giao diện sử dụng:

Hình 2.4: Giao diện sử dụng của phần mềm Sublime Text 3

Chương 3 : PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

3.1KHẢO SÁT HIỆN TRẠNG VÀ XÂY DỰNG HỆ THỐNG MỚI * Sau khi khảo sát em đã nắm bắt được các

15

Page 18: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

thông tin :- Quản lý khách hàng : Mỗi khách hàng được quản lý các

thông tin sau: họ tên, địa chỉ, số điện thoại, ngày sinh, email.

- Quản lý hàng hoá: mã hàng hoá, tên hàng hoá, đơn giá, số lượng, hình ảnh, chi tiết, mã loại hàng,tên loại hàng.

- Quản lý nhà sản xuất:mã nhà sx, tên nhà sx- Quản lý tin tức: Mã tin, Tên tin, mục tin, chi tiết tin- Xử lý được đơn hàng và thống kê.

* Khách hàng: người lựa chọn mặt hàng để mua. Khác với mua trực tiếp tại cửa hàng, công ty ở đây khách hàng tự thao tác thông qua từng bước cụ thể để có thể mua hàng. Trên mạng các mặt hàng được sắp xếp theo thứ tự dễ tìm kiếm

3.2PHÂN TÍCH HỆ THỐNGSau khi khảo sát hiện trạng của hệ thống và xây dựng hệ

thống thì em đã đưa ra các tệp CSDL của “Xây dựng website

bán đồ thể thao”.

- Qua quá trình khảo sát, phân tích thực trạng và xây dựng hướng phát triển cho hệ thống mới em đa xây dựng cấu trúc của hệ thống“Xây dựng Website bán đồ thể thao (SPORTSHOP)”

- Xây dựng biểu đồ phân cấp chức năng- Biểu đồ luồng dữ liệu: Ta xây dựng biểu đồ luồng

WEBSITE BÁN ĐỒ THỂ THAO

16

Danh mục Đặt hàng Hóa đơn

DM Hàng hóa Kiểm tra khách hàng

Thống kê

Page 19: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

3.2.1Biểu đồ luồng dữ liệu mức khung cảnh:

17

Danh mục Đặt hàng Hóa đơn

DM Hàng hóa Kiểm tra khách hàng

NHÀ SẢN XUẤT NHÀ QUẢN LÝ

HỆ THỐNG QUẢN LÝ BÁN HÀNG QUA MẠNG

KHÁCH HÀNG

Page 20: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

3.2.2.Sơ đồ phân cấp chức năng mức dưới đỉnh

18

Khách hàng

Xem thông tin sản phẩm

Chọn hàng Báo giá Hàng hóa

Các thông

tin khácĐăng ký thành viên

Tìm kiếm

Đặt hàng

Thông tin

khách hàng

Hóa đơn (của

mình)

Hàng hóa

Phản hồi thông tin

Thanh toán qua tài khoản

Page 21: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

Hình 3.4 Sơ đồ chức năng Khách hàng

Chức năng XEM THÔNG TIN SẢN PHẨM .

- Cho phép xem các thông tin liên quan đến sản phẩm .

- Đầu vào : + Tên hàng+ Nhóm hàng

- Các quá trình xử lý :

+ Module nhập thông tin ( Tên hàng , nhóm hàng )

của mặt hàng cần xem .

+ Module hiển thị danh mục hàng theo yêu cầu .

- Đầu ra : + danh mục hàng theo yêu cầu .

Chức năng CHỌN HÀNG

Liệt kê danh mục mặt hàng sản phẩm theo nhóm, chủng loại , chi

tiết…cho phép khách hàng có thể lựa chọn ,bổ xung mặt hàng

vào gio hàng ( Shopping cart) .

Đầu vào (Input ) :Các thông tin liên quan đến sản phẩm :

( Tên mặt hàng ) Các quá trình cần thực hiện (Processes) :

+ Module liệt kê,hiển thị danh mục mặt hàng theo nhóm, loại, chi tiết.

+ Module thêm mặt hàng vào gio hàng .

19

Page 22: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

+ Module loại bo mặt hàng trong gio hàng .

+Module hiển thị danh mục mặt hàng hiện

cótrong gio hàng. Đầu ra (Output) :Danh mục

mặt hàng định đặt mua

Chức năng ĐĂNG KÝ THÀNH VIÊN

- Khách hàng có thể đăng ký để trở thành khách hàng thường

xuyên (thành viên) của công ty và được cấp một tài khoản người

dùng ( Acount ) để đăng nhập khi cần đặt hàng ,thanh toán, hỗ trợ

ký thuật …

- Đầu vào : -Các thông tin cá nhân của khách hàng+ User name ( tài khoản ngưòi dùng)

+ Password(mật khẩu)

+ Họ tên đầy đủ ( Full name )

+ Ngày Sinh

+ Giới tính

+ Email

+ Số ĐT ( Tel) và một số thông tin khác .

- Các quá trình thực hiện :

+ Module nhập thông tin cá nhân của khách hàng .

20

Page 23: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

+ Module xác nhận thông tin vừa nhập .

+ Module thông báo cho khách hàng và yêu cầu nhập

lại tài khoản ngưòi dùng nếu tài khoản đó đã có người

đăng ký .

+ Module lưu thông tin khách hàng vừa đăng ký vào CSDL .

+ Module thông báo và gửi Email đến khách hàng kết qủa đăng ký .

- Đầu ra :

+ Thông báo cho khách hàng và yêu cầu nhập lại tài

khoản hoặc Email nếu tài khoản hoặc Email đó đã tồn tại

trong CSDL .

+ Thông báo và yêu cầu nhập lại thông tin trong

trường hợp thông tin nhập vào không chính xác , không

phù hợp .

+ Thông báo kết qủa đăng ký , mã khách hàng được cấp .

Chức năng TÌM KIẾM

- Tìm kiếm thông tin về bản thân khách hàng (theo mã khách hàng ).- Tìm kiếm thông tin về đơn hàng khách hàng đó đã đặt (theo mã

khách

hàng).

- Tìm kiếm thông tin về sản phẩm (theo loại nhóm sản phẩm )

- Đầu vào : + từ hoặc cụm từ cần tìm kiếm

21

Page 24: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

+ Dạng tìm kiếm ( tìm kiếm khách hàng, đơn hàng hay sản

phẩm).

- Các quá trình thực hiện :

+ Module tìm kiếm trong CSDL .

+ Module hiển thị kết quả tìm kiếm .

- Đầu ra : Kết quả tìm kiếm

Chức năng ĐẶT HÀNG :

- Sau khi khách hàng chọn những sản phẩm cần mua đặt vào gio hàng

,khách hàng có thể đặt mua hàng chính thức thông qua Website .

- Đầu vào (Input) :

+Danh mục mặt hàng trong gio hàng .

+ Thông tin cá nhân của khách hàng ( Mã khách hàng,

Họ tên, mật khẩu, …)

+ Thông tin liên quan đến việc mua hàng (ngày mua,

thời điểm giao hàng , số lượng mỗi mặt hàng đặt mua, hình

thức thanh toán, nơi nhận hàng, người nhận, tổng số tiền, tỷ

giá USD/VND …)

-Các quá trình thực hiện :

+ Module hiển thị đầy đủ thông tin liên quan đến sản

phẩm khách hàng đã chọn .

22

Page 25: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

+ Module tính tổng tiền hàng (theo USD và VND) theo

đơn giá và tỷ giá (USD/VND) của ngày đặt mua .

+ Module nhập thông tin đơn hàng .

+ Module kiểm tra xem khách hàng đã đăng ký là

khách hàng thường xuyên của công ty chưa

+ Module cập nhật đơn hàng vào CSDL .

+ Module thông báo cho khách hàng việc đặt hàng

thành công ,các thủ tục thanh toán, nhận hàng ,hướng dẫn

đặt hàng hay thông báo đặt hàng không thành công .

- Đầu ra :

+ Thông báo tình trạng đặt hàng (thành công\không thành công)

,các thủ tục thanh toán, nhận hàng , hoặc hướng dẫn đặt

hàng lại trong trường hợp thông tin đặt hàng không phù

hợp .

.

Chức năng PHẢN HỒI-LIÊN HỆ

- Cho phép người dùng góp ý , khuyếu nại, phản hồi …

một số thông tin liên quan đến sản phẩm .

- Đầu vào : -các thông tin góp ý , phản hồi dưới dạng Email .

- Các quá trình thực hiện :

+ Module nhập thông tin góp ý , phản hồi .

23

Page 26: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

+ Module lưu thông tin góp ý vào CSDL .

- Đầu ra : -Thông tin chi tiết về góp ý ,phản hồi chờ nhà quản trị trả lời .

3.2.3.Sơ đồ phân cấp chức năng của nghiệp vụ Admin

Sơ đồ chức năng nghiệp vụ Admin

24

Xóakhách hàng

Sửakhách hàng

Thêmmới

kháchhàng

Cập nhật khách hàng

ADMIN

Page 27: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

3.2.4.Sơ đồ phân cấp chức năng của nghiệp vụ Quan lý kho

Sơ đồ chức năng nghiệp vụ quản lý kho

25

Thêm mặt hàng mới

Sủa thông tin

mặt hàng

Xóa măt hàng

Quản lý kho

Cập nhật hàng hóa

Thống kê hàng tồn

Giao hàng

Trả lời phản hồi

Page 28: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

3.2.5.Sơ đồ phân cấp chức năng của nghiệp vụ Bán hàng

Sơ đồ chức năng nghiệp vụ bán hàng

3.2.6.Xây dựng mô hình thực thể quan hệ

26

Trả lời phản hồi

Cập nhật đơn hàng

Lập hóa đơn thanh toán

Xóakhách hàng

Sửathông

tin kháchhàng

Tìm kiếmkhách hàng

Theo dõi hàng hóa trong kho

Quản lý khách hàng

Bán hàng

Page 29: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

Lược đồ quan hệ nhóm dữ liệu đơn hàng

Một số bang thể hiện các thành phần dữ liệu

Mô tả bảng :QUẢN TRỊ

Mô tả bảng:KHÁCH HÀNG

Mô tả bảng:SẢN PHẨM

27

Page 30: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

Mô tả bảng:ĐẶT HÀNG CHI TIẾT

Mô tả bảng:ĐẶT HÀNG 1

Mô tả bảng:ĐẶT HÀNG

Mô tả bảng:Ý KIẾN KHÁCH HÀNG

28

Page 31: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

Chương 4 Triển khai xây dựng website

4.1. Chức năng trang web:

Đây là một website bán và giới thiệu sản phẩm của cửa hàng, công ty đến người tiêu dùng với các chi tiết mặt hàng với giá cả chính xác. Có các chứa năng sau:

- Cho phép cập nhật hàng vào CSDL.- Hiển thị danh sách các mặt hàng theo từng loại.- Hiển thị hàng hoá khách hàng đã chọn mua.- Hiển thị thông tin khách hàng- Quản lý đơn đặt hàng- Cập nhật hàng hoá, nhà sản xuất, loại hàng, tin tức.- Xử lý đơn hàng.- Thống kê các khách hàng mua trong ngày,trong khoảng thời gian

4.2.Chức năng và nội dung của các trang web

Thứ nhất : Phần khách hàng :Khách hàng là những người có nhu cầu mua sắm hàng hóa, họ

sẽ tìm kiếm các mặt hàng cần thiết từ hệ thống và đặt mua các mặt hàng này. Vì thế phải có các chức năng sau:

- Hiển thị danh sách các mặt hàng của cửa hàng để khách hàng xem, lựa chọn và mua.

29

Page 32: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

- Khách hàng xem các thông tin tin tức mới, khuyến mãi trên trang web

- Sau khi khách hàng chọn và đặt hàng hàng trực tiếp thì phải hiện lên đơn hàng để khách hàng có thể nhập thông tin mua hàng và xem hoá đơn mua hàng.

Thứ hai : Dành cho người quản trị: Người làm chủ ứng dụng có quyền kiềm soát mọi hoạt động của hệ thống. Người này được cấp username và password để đăng nhập hệ thống thực hiện chức năng của mình:

- Chức năng cập nhật, sửa, xoá các mặt hàng, loại hàng, nhà sản xuất, tin tức.(phải kiểm soát được hệ thống). Nó đòi hoi sự chính xác.

- Tiếp nhận kiểm tra đơn đặt hàng của khách hàng. Hiển thị đơn đặt hàng.

- Thống kê theo ngày, khoảng thời gian.Ngoài các chức năng trên thì trang Web phải được thiết kế sao cho dễ hiểu, giao diện mang tính dễ dùng đẹp mắt và làm sao cho khách hàng thấy được thông tin cần tìm, cung cấp các thông tin quảng cáo hấp dẫn, các tin tức khuyến mãi để thu hút khách hàng. Điều quan trọng là phải đảm bảo an toàn tuyệt đối thông tin khách hàng trong quá trình đặt mua qua mạng. Đồng thời trang Web phải luôn đổi mới, hấp dẫn.

4.3.Hệ thống thông tin:

3.2.1.Thông tin Khách hàng:- Tên - Địa chỉ- Mã Khách hàng

- SDT - EMAIL

3.2.2.Trang ADMIN - Quản lí nhập xuất

30

Page 33: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

- Quản lí khách hàng- Giá cả

- Cập nhập sản phẩm - Quản lí thu chi

4.4.Hình ảnh trang web

Hình 1 - Trang chủ

31

Page 34: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

Hình 2 - Trang theo dõi đơn hàng

Hình 3 - Trang danh mục sản phẩm

32

Page 35: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

Hình 4 - Trang giỏ hàng

33

Page 36: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

Hình 5 - Trang chi tiết sản phẩm

34

Page 37: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

Hình 6 - Trang quản lý khách hàng

Hình 7 - Trang quản lý sản phẩm

35

Page 38: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

Chương 5: TỔNG KẾT ĐÁNH GIÁ VÀ HƯỚNG PHÁT TRIỂN CỦA ỨNG DỤNG.

5.1.Những điểm chương trình làm được.

1. Đối với người sử dụng, chương trình đã đưa ra được:

Các cách tìm kiếm, tra cứu theo các chủ đề khác nhau, kết hợp

nhiều chủ đề theo ý khách hàng.

Xem chi tiết thông tin sản phẩm thương mại và đầy đủ các

thông tin về cửa hàng bán đồ thể thao SportShop

Cho phép khách hàng đăng ký thông tin để thực hiện việc

mua sản phẩm. Kiểm tra tính hợp lệ của khách hàng đăng

nhập hệ thống.

Tạo đơn đặt hàng.

Có thể chạy trên nhiều hệ điều hành.

2. Đối với người quản trị, chương trình đã đưa ra được:

Xem thông tin của các đề mục cần quản lý như: Khách hàng,

sản phẩm, đơn đặt hàng…

Đưa ra các form để nhập dữ liệu mới của

các loại tư liệu. Có thể sửa đổi, cập nhật các

dữ liệu trên.

36

Page 39: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

Trong việc thêm mới sản phẩm chương trình tự động sinh mã

sản phẩm, điều này tiện lợi cho người quản trị và dữ liệu luôn

đồng nhất.

Các chức năng này được thực hiện thông qua

giao diện web. Có thể chạy trên nhiều hệ điều

hành.

5.2.Những điểm chưa làm được và hướng giải quyết:Việc kết nối giữa server và cơ sở dữ liệu còn chậm.

Điều này cũng dễ hiểu vì việc thiết lập cầu nối phải qua

nhiều cấp. Chỉ có cách giải quyết là cho server chạy trên máy

có cấu hình mạnh, tốc độ truy xuất đĩa nhanh.

5.3.Hướng phát triển của chương trình:Hướng phát triển của Web site là tiến đến một thương mại

điện tử với đầy đủ các chức năng thanh toán tiền qua mạng.

Nhưng vì trong nước ta hiện nay vấn đề thanh toán tiền qua

mạng còn gặp nhiều khó khăn và chưa phổ

biến lắm cho nên chức năng của Web site dùng để hỗ trợ

cho nhà quản trị còn hạn chế. Vấn đề chính của Web site là phục

vụ việc quảng cáo. Từ đó, bên cạnh việc thương mại thì vấn đề

cần phải tập trung thu hút khách hàng liên hệ và thõa thuận thiết

kế, lắp đặt một công trình nào đó thuộc lĩnh vực chuyên môn của

công ty, cửa hàng.

Do vậy trong thời gian sau này cần bổ sung các chức

năng về kiểm kê: Thống kê số lần truy cập database, thống kê

37

Page 40: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

giá xuất nhập, tồn, thống kê doanh thu, xử lý hóa đơn tự động.

Quản lý kho (kiểm tra lượng sản phẩm tồn kho tự

động), thanh toán điện tử có sử dụng Edit card.

Bổ sung thêm một số chức năng kiểm tra dữ liệu nhập,

thay đổi mật mã truy nhập của khách hàng cũng như nhà quản trị.

Mặc dù đã cố gắng hoàn chỉnh các yêu cầu nhưng bài báo

cáo còn rất nhiều thiếu sót mong nhận được sự chỉ bảo hướng

dẫn của các thầy cô khác giúp đỡ xem xét, đề xuất thêm các ý

kiến cũng như bổ sung các vấn đề phục vụ cho việc xây dựng

Web site để em có thể hoàn chỉnh hơn . Em xin cảm ơn các quý

thầy cô.

38

Page 41: 3.2.2.Sơ đồ phân cấp chức ... - daotao.vku.udn.vndaotao.vku.udn.vn/.../08/1596549274-baocaodoancs1.docx · Web viewPHP và Node.js. Khuyết điểm: Được dùng chủ

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

[1] Wikipedia https://vi.wikipedia.org/wiki/HTML[2] Wikipedia https://vi.wikipedia.org/wiki/JavaScript[3] Wikipedia https://vi.wikipedia.org/wiki/CSS[4] W3school https://www.w3schools.com/css/default.asp[5] Bootstrap https://www.w3schools.com/bootstrap[6] Sublimetext https://www.sublimetext.com/

39