3.2.2.Sơ đồ phân cấp chức năng mức ... -...

45
ĐẠ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 TẠP HÓA XANH Sinh viên thực hiện : Nguyễn Quốc Anh Đinh Ngọc Duy Giảng viên hướng dẫn : Ts. Lê Văn Minh Lớp : 19IT6

Transcript of 3.2.2.Sơ đồ phân cấp chức năng mức ... -...

Page 1: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

ĐẠ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 TẠP HÓA XANH

Sinh viên thực hiện : Nguyễn Quốc Anh Đinh Ngọc Duy

Giảng viên hướng dẫn : Ts. Lê Văn Minh

Lớp : 19IT6

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

Page 2: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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

VIỆT - HÀN

ĐỒ ÁN CƠ SỞ 1

XÂY DỰNG WEBSITE TẠP HÓA XANH

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

Page 3: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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ác studio của mình quảng bá tất cả các dịch vụ mà mình có đến với khách hàng. Vì vậy, em đã thực hiện đồ án “ XÂY DỰNG WEBSITE TẠP HÓA XANH ” cho nhu cầu thiết yếu với mọi người.Người chủ cửa hàng đưa các mặt hang đó lên website của mình và quản lý bằng website đó. Khách hàng có thể đặt hang và yêu cầu các dịch vụ trên website mà không cần đến quầy bán .

Page 4: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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 thầy Lê Văn Minh 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 năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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

TS. Lê Văn Minh

3

Page 6: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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 năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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 CSS3 MS FrontPage Microsoft FrontPage4 World Wide Web Consortium W3C

5

Page 8: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

DANH MỤC CÁC BẢNG

6

Page 9: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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 năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

Chương 1 GIỚI THIỆU

1.1.Tên đề tài

“XÂY DỰNG WEBSITE TẠP HÓA XANH ”1.2.Mục tiêu- Thiết kế web nhằm giới thiệu cho khách hàng những mặt hang và ưu đãi mà cửa hang đang có.- Thiết kế web với các chi phí dịch vụ 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.- Giao diện bắt mắt và dễ dàng cho khách hàng sử dụ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 đa chủng loại, đạt chất lượng và hợp túi tiền của người tiêu dung 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, dịch vụ của cửa hang kinh doanh đén khách hang 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á dịch vụ, quản lí chất lượng dịch vụ … Nắm bắt tình hình trên nhóm chúng em tiến hành thiết kế trang web Tạp hóa xanh để mong sao giúp cho các Đại lí phát triển nhanh hơn, giúp cho chủ cửa hang có thể quản lí cửa hang 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 năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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 Visual Studio: trình biên tập mã được phát triển bởi Microsoft dành cho Windows.1.6. Sinh viên thực hiện

Nguyễn Quốc Anh – 19it6Đinh Ngọc Duy – 19it6

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 năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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 năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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 năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

<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 năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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 năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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 năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

- 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 năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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

DM Sản Phẩm Kiểm tra chi tiết

Thống kê

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, fax, email.- Quản lý hàng hoá: mã hàng hoá, tên hàng hoá, tên dịch vụ,

đơn giá, số lượng, hình ảnh, chi tiết.

- Xử lý được đơn hàng đặt dịch vụ và thống kê.* Khách hàng: người lựa chọn mặt hàng bản thân khách hàng

cần . Khác với mua trực tiếp tại đại lý, ở đây khách hàng tự thao tác thông qua từng bước cụ thể để có thể đặt , yêu cầu các sản phẩm mà Đại lý cung cấp . Trên mạng các dịch vụ đượ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

Tạp hóa xanh ”.

- 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 Studio Tạp hóa xanh ”

- 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

Page 19: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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

DM Sản Phẩm Kiểm tra chi tiết

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

17

SẢN PHẨM NHÀ QUẢN LÝ

HỆ THỐNG CHO PHÉP ĐẶT SẢN PHẨM

KHÁCH HÀNG

Page 20: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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ẩn

Chọn sản phẩm Chọn sản phẩm

Báo giá

Các thông

tin khácLấy thông tin khách hàng

Yêu cầu sản

Đặt dịch vụ

Địa điểm thời gian

Hóa đơn (của

mình)

thanh toán

Phản hồi thông tin

Thanh toán trực tiếp

Page 21: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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 sản phẩm + Nhóm sản phẩm

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

+ Module nhập thông tin ( Tên sản phẩm , nhóm sản

phẩm ) của sản phẩm cần xem .

+ Module hiển thị danh mục sản phẩm theo yêu cầu .

- Đầu ra : + danh mục sản phẩm theo yêu cầu .

Chức năng CHỌN DỊCH VỤ

Liệt kê danh mục 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 .

Đầ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 sản phẩm theo nhóm, loại, chi tiết.

+Module hiển thị danh mục sản phẩm đã yêu

cầu

19

Page 22: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

Đầu ra (Output) :Danh mục sản phẩm định

đặt .

Chức năng Nhập thông tin khách hàng

- Đầu vào : -Các thông tin cá nhân của khách hàng+ Tên khách hàng

+ email

+ số điện thoại

+ nội dung

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

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

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

+ Module lưu thông tin khách hàng vào mail .

+ Module thông báo và gửi Email đến khách hàng .

- Đầu ra :

+ Thông báo cho khách hàng đã nhập thông tin

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

hàng bo trống.

20

Page 23: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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

- Sau khi khách hàng chọn những sản phẩm - Đầu vào (Input) :

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

+ Thông tin liên quan đến việc yêu cầu sản phẩm

(ngày đặt, thời gian , số lượng, 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 .

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

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

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

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

21

Page 24: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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 .

+ 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

22

Xóakhách hàng

Tìm kiếm hóa đơn

Check hóa đơn

Cập nhật kháchhàng

ADMIN

Page 25: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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

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

23

Thêm sản phẩm

Sủa thông tin

Xóa sản phẩm

Quản lý sản phẩm

Cập nhật sản phẩm

Cập nhật những thông tin mới

Xử lí

Trả lời phản hồi

Page 26: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

Sơ đồ chức năng nghiệp vụ quản lý sản phẩm

3.2.5.Sơ đồ phân cấp chức năng của nghiệp vụ thực hiện san phẩm

24

Page 27: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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

25

Trả lời phản hồi

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

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

Xóa Khách hàng

Sửathông tin

kháchhàng

Thông tin

Theo dõi các sản phẩm đã đáp ứng

Quản lý khách hàng

Sản phẩm

Page 28: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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 sản phẩm theo từng loại.- Hiển thị sản phẩm khách hàng đã yêu cầu- Hiển thị thông tin khách hàng- Xử lý yêu cầu sản phẩm

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 về các dịch vụ từ hệ

thống và đặt mua các sản phẩm này. Vì thế phải có các chức năng sau:

- Hiển thị danh sách các sản phẩm của đại lý để khách hàng xem, lựa chọn và mua.

- 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. Chức năng cập nhật, sửa, xoá các dịch vụ, loại dịch vụ, 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 dịch vụ 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

26

Page 29: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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

- 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

27

Page 30: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

Hình 1-Trang chủ

Hình 2:Trang theo dõi đơn hang

28

Page 31: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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

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

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

29

Page 32: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

đăng kí sử dụng 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.

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.

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.

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. Chưa tối ưu hóa cho các phiên bản mobi.

Đ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

30

Page 33: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

đ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ê

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ô.

31

Page 34: 3.2.2.Sơ đồ phân cấp chức năng mức ... - udn.vndaotao.vku.udn.vn/.../2020/08/1596536883-dinhngocduy-n…  · Web viewCùng với sự phát triển không ngừng về

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/

32