Xây dựng website cho doanh nghiệp đồ gỗ mỹ nghệ dũng thành –bắc giang

Sự phát triển của công nghệ thông tin đặc biệt là sự phát triển mạnh mẽ trong việc truy cập Internet hay các Website và các dịch vụ trên mạng như: thương mại điện tử, đào tạo từ xa, các

LỜI CẢM ƠN

Em xin bày tỏ lời cảm ơn chân thành nhất đến các thầy cô giáo đã giảng dạy

em trong suốt năm năm qua, những kiến thức mà em nhận được trên giảng đường đại học sẽ là hành trang giúp em vững bước trong tương lai

Em muốn gửi lời cảm ơn sâu sắc nhất đến giáo viên Th.S Hồ Thị Tuyến người đã tận tình hướng dẫn em trong suốt quá trình thực hiện đồ án tốt nghiệp

Cuối cùng, em muốn gửi lời cảm ơn đến tất cả gia đình, bạn bè những người luôn động viên và giúp đỡ em vượt qua khó khăn để hoàn thành đồ án tốt nghiệp này

Em xin chân thành cảm ơn !

Thái Nguyên, ngày 01 tháng 06 năm 2016

Sinh viên

Trần Thị Quy

LỜI CAM ĐOAN

Em xin cam đoan: Toàn bộ nội dung đồ án tốt nghiệp “Xây dựng website cho doanh nghiệp đồ gỗ mỹ nghệ Dũng Thành –Bắc Giang” Do em tự học tập,

tìm hiểu từ quá trình học tập tại trường, nghiên cứu trên Internet, sách báo, và các tài liệu có liên quan

Em xin chịu hoàn toàn trách nhiệm về lời cam đoan của mình trước Quý thầy cô và nhà trường

Thái Nguyên, ngày 01 tháng 06 năm 2016

NGƯỜI CAM ĐOAN

DANH MỤC HÌNH ẢNH 5

DANH MỤC CÁC BẢNG 7

LỜI NÓI ĐẦU 8

CHƯƠNG 1.TỔNG QUAN VỀ CƠ SỞ LÝ THUYẾT 11

1.1 Tổng quan về wordpress 11

1.1.1 Nét nổi bật của Wordpress 11

1.1.2 Các lý do khiến chúng ta phải chọn WordPress 12

1.2 Công nghệ Responsive Web Design 13

1.2.1 Khái niệm về Responsive Web Design 13

1.2.2 Giải pháp nào giúp điều chỉnh độ phân giải màn hình 14

1.2.3 Người ta bố cục trang web như thế nào? 17

1.2.4 Lợi ích của Responsive Web Design 18

1.3 Ngôn ngữ mô hình hóa thống nhất UML(Unified Modeling Language) 18 1.3.1 Phân tích và thiết kế hướng đối tượng (Object Oriented Analysis and Design: OOAD) 19

1.3.2 UML là gì? 19

1.3.3 Tại sao lại là OOAD và UML? 19

1.3.4.View (góc nhìn) 20

1.3.5.Diagram (Bản vẽ) 21

1.3.6 Notations (các ký hiệu) 23

1.4 Hệ quản trị cơ sở dữ liệu MySQL 24

CHƯƠNG 2: KHẢO SÁT, PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 25

2.1 Khảo sát hệ thống 25

2.1.1 Khảo sát hiện trạng và xác lập dự án 25

2.1.2 Tính cấp thiết cần xây dựng website cho doanh nghiệp 26

2.1.3 Đề xuất hệ thống mới 27

2.2 Phân tích và Thiết kế hệ thống 27

2.2.1 Phân tích yêu cầu của hệ thống 27

2.2.2 Phân tích hệ thống 28

CHƯƠNG 3 ỨNG DỤNG CÔNG NGHỆ RESPONSIVE WEB DESIGN 51

VÀ THIẾT KẾ WEBSITE 51

3.1 Giao diện website xây dựng trên PC 51

3.1.1 Giao diện trang chủ 51

3.1.2 Giao diện danh mục sản phẩm 52

3.1.3 Giao diện trang giới thiệu 53

3.1.4 Giao diện trang liên hệ 54

3.1.5 Giao diện trang tin tức 55

3.1.6 Giao diện giỏ hàng 55

3.1.7 Giao diện trang đặt hàng 56

3.1.8 Giao diện trang cá nhân 57

3.2 Giao diện website ứng dụng công nghệ Responsive Web Design 58

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 60

1 Kết quả đạt được 60

2 Hạn chế 61

3 Hướng phát triển, và ứng dụng website vào thực tế 61

TÀI LIỆU THAM KHẢO 62

PHỤ LỤC 63

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 64

DANH MỤC HÌNH ẢNH

Hình 1.1 Responsive Web Design là gì? 14

Hình 1.2.Giải pháp là linh hoạt tất cả mọi thứ trên web 14

Hình 1.3 Responsive navigation 17

Hình 1.4 Ngôn ngữ mô hình hóa thống nhất 20

Hình 1.5 Các bản vẽ trong OOAD sử dụng UML 22

Hình 1.6 Ký hiệu về Use Case 23

Hình 1.7 Ký hiệu về Class 23

Hình 1.8 Ký hiệu về Actor 24

Hình 2.1 Biểu đồ Use Case tổng quát 29

Hình 2.2 Phân rã UC Quản lý sản phẩm 30

Hình 2.3 Phân rã UC Quản lý đơn hàng 30

Hình 2.4 Phân rã UC Đặt hàng 31

Hình 2.5 Phân rã UC Thống kê 31

Hình 2.6 Biểu đồ trình tự chức năng xem thông tin sản phẩm 40

Hình 2.7 Biểu đồ trình tự cho tác vụ tìm kiếm 40

Hình 2.8 Biểu đồ trình tự chức năng cập nhật giỏ hàng 41

Hình 2.9 Biểu đồ trình tự chức năng thanh toán 41

Hình 2.10 Biểu đồ trình tự cho tác vụ Quản trị thêm sản phẩm 42

Hình 2.11 Biểu đồ trình tự cho tác vụ Quản trị sửa sản phẩm 42

Hình 2.12 Biểu đồ trình tự cho tác vụ Quản trị xóa sản phẩm 43

Hình 2.13 Biểu đồ trình tự cho tác vụ Quản trị xóa đơn hàng 43

Hình 2.14 Biểu đồ trình tự chức năng tìm kiếm của quản trị 44

Hình 2.15 Biểu đồ trình tự chức năng thống kê khách hàng 44

Hình 2.16 Biểu đồ trình tự chức năng thống kê sản phẩm trong kho 45

Hình 2.17 Biểu đồ trình tự chức năng thống kê đơn hàng 45

Hình 2.18 Biểu đồ lớp 46

Hình 2.19 Biểu đồ hoạt động cho chức năng Thêm sản phẩm 47

Hình 2.20 Biểu đồ hoạt động cho chức năng Đặt hàng 48

Hình 2.21 Biểu đồ thành phần 49

Hình 2.22 Biểu đồ triển khai 50

Hình 3.1 Giao diện chính của website 51

Hình 3.2 Giao diện trang danh mục sản phẩm 52

Hình 3.3 Giao diện trang giới thiệu 53

Hình 3.4 Giao diện trang liên hệ 54

Hình 3.5 Giao diện trang tin tức 55

Hình 3.6 Giao diện giỏ hàng 55

Hình 3.7.Giao diện trang đặt hàng 56

Hình 3.8.Giao diện trang cá nhân 57

Hình 3.9 Giao diện Mobile Iphone 5 (Size :320*568) 58

Hình 3.10 Giao diện Small Tablet (Size 600*800) 58

Hình 3.11.Giao diện Tablet (Size :768*1024) 59

Hình 3.12 Giao diện Widescreen(Size: 1280*800) 59

Hình 3.13 Giao diện báo lỗi thông tin liên hệ 63

Hình 3.14 Giao diện đặt hàng thành công 63

DANH MỤC CÁC BẢNG

Bảng 2.1 Các tác nhân và Use case của hệ thống 28

Bảng 2.2 Mô tả Use Case Thêm sản phẩm 32

Bảng 2.3 Mô tả Use Case Sửa Sản Phẩm 32

Bảng 2.4 Mô tả Use Case Xóa Sản Phẩm 33

Bảng 2.5.Mô tả Use Case Tìm kiếm 33

Bảng 2.6 Mô tả Use Case Xem thông tin sản phẩm 34

Bảng 2.7 Mô tả Use Case Đăng nhập 34

Bảng 2.8 Mô tả Use Case Đăng ký 35

Bảng 2.9 Mô tả Use Case Cập nhật giỏ hàng 35

Bảng 2.10 Mô tả Use Case Thanh toán 36

Bảng 2.11 Mô tả Use Case Xóa đơn hàng 36

Bảng 2.12 Mô tả Use Case Cập nhật trạng thái đơn hàng 37

Bảng 2.13 Mô tả Use Case Thống kê khách hàng 37

Bảng 2.14 Mô tả Use Case Thống kê sản phẩm trong kho 38

Bảng 2.15 Mô tả Use Case Thống kê đơn hàng 39

LỜI NÓI ĐẦU

Trong những năm gần đây với sự phát triển vượt trội của khoa học kỹ thuật đặt biệt là công nghệ thông tin, với những ứng dụng của công nghệ thông tin vào các lĩnh vực đã đóng góp phần to lớn cho sự nghiệp phát triển của con người Trong các lĩnh vực đó thì lĩnh vực quảng bá sản phẩm là thật sự giúp ích được rất nhiều cho doanh nghiệp, việc áp dụng quảng bá sản phẩm qua môi trường mạng ở các doanh nghiệp, công ty, cá nhân… là rất cần thiết và thật sự cần thiết

Sự phát triển của công nghệ thông tin đặc biệt là sự phát triển mạnh mẽ trong việc truy cập Internet hay các Website và các dịch vụ trên mạng như: thương mại điện tử, đào tạo từ xa, các dịch vụ giải trí, du lịch, các thông tin văn hóa xã hội… Các sản phẩm của ngành công nghệ thông tin là: phần cứng, phần mềm, trí tuệ nhân tạo được ứng dụng hầu hết trong các lĩnh vực khác nhau của xã hội, chính vì sự phát triển ưu thế của lĩnh vực này mà nhiều cơ quan, xí nghiệp, công ty, trường học có nhu cầu tin học hóa trong công việc của mình

Công nghệ thông tin đang đưa mọi người vào một kỷ nguyên mới – kỹ nguyễn công nghệ thông tin mở rộng và tin cậy Công nghệ thông tin đã thâm nhập vào tất cả các lĩnh vực của cuộc sống Công nghệ thông tin cho phép truy cập và khai thác các cơ sở dữ liệu thuộc nhiều lĩnh vực kinh tế xã hội, các ngành nghề khác nhau như các thông tin về khoa học kỹ thuật, giáo dục và đào tạo, y tế, thương mại điện tử, thị trường giá cả, dự báo thời tiết… và rất nhiều các dịch vụ thương mại điện tử như một công cụ đắc lực không thể thiếu

Vì vậy có thể khẳng định lại rằng việc ứng dụng công nghệ thông tin vào thực tiễn công việc của tất cả mọi người và các hoạt động xã hội nói chung là hoàn toàn phù hợp và cần thiết hơn bao giờ hết Do đó, qua học tập và nghiên cứu một số tài

liệu có liên quan, em đã chọn đề tài “Xây dựng website cho doanh nghiệp đồ gỗ

mỹ nghệ Dũng Thành –Bắc Giang” nhằm mục đích nâng cao kỹ năng lập trình,

trao đổi kinh nghiệm

*Mục đích tìm hiểu và nghiên cứu đề tài

Tìm hiểu thực tế công việc quảng bá sản phẩm của doanh nghiệp, thiết kế website bằng Wordpress,ứng dụng công nghệ Responsive Design bước đầu xây dựng và chạy thử chương trình,kết hợp giải pháp quản trị nội dung để nâng cao hiệu quả của website Từ đó rút ra được kết quả và những điều chưa đạt được

*Đối tượng nghiên cứu đề tài

Chương trình : Áp dụng mã nguồn mở Wordpress để xây dựng website giới thiệu sản phẩm cho cửa hàng đồ gỗ mỹ nghệ Dũng Thành

*Nhiệm vụ

- Tìm hiểu và nắm được các kiến thức về ngôn ngữ PHP, Mysql, Wordpress

- Khảo sát và phân tích thiết kế hệ thống, đưa ra sơ đồ chức năng của website

- Hoàn thiện hệ thống báo cáo, đánh giá kết quả đạt được và các mặt hạn chế của chương trình, đồng thời đưa ra giải pháp cũng như hướng mở rộng của chương trình

*Phương pháp nghiên cứu

- Khảo sát thực trạng tại doanh nghiệp đồ gỗ mỹ nghệ Dũng Thành

- Thu thập các yêu cầu từ phía người dùng

- Phân tích thiết kế hệ thống theo yêu cầu của người dùng

- Nghiên cứu các công cụ xây dựng hệ thống

- Xây dựng, cài đặt và kiểm thử chương trình

* Giới hạn và phạm vi nghiên cứu

Áp dụng thực hiện xây dựng website giới thiệu sản phẩm và bán hàng cho doanh nghiệp đồ gỗ mỹ nghệ Dũng Thành

 Nội dung của đề tài gồm các chương:

Chương 1 Tổng quan cơ sở lý thuyết

Tổng quan về wordpress

Công nghệ Responsive Web DesignNgôn ngữ mô hình hóa thống nhất UML

Hệ quản trị cơ sở dữ liệuChương 2 Khảo sát, phân tích và thiết kế hệ thống

Khảo sát hệ thốngPhân tích và thiết kế hệ thống Chương 3 Ứng dụng công nghệ Responsive Web Design và thiết kế website

Giao diện website xây dựng trên PC Giao diện website ứng dụng công nghê Responsive Web Design

CHƯƠNG 1.TỔNG QUAN VỀ CƠ SỞ LÝ THUYẾT

1.1 Tổng quan về wordpress

WordPress là một hệ thống xuất bản blog viết bằng ngôn ngữ lập trình PHP

và sử dụng MySQL database (cơ sở dữ liệu MySQL) Wordpress là hậu duệ chính

thức của b2/cafelog, được phát triển bởi Michel Valdrighi Cái tên WordPress

được đề xuất bởi Christine Selleck, một người bạn của nhà phát triển chính Matt Mullenweg.

WordPress là phần mềm mã nguồn mở được cung cấp miễn phí, sử dụng ngôn ngữ lập trình PHP và hệ cơ sở dữ liệu MySQL Thành viên có thể sử dụng nó với tên miền riêng của mình mà không phụ thuộc vào một nhà cung cấp nào ví dụ: blog yahoo, blog google, blog opera …

Tuy nhiên wordpress vẫn cho phép thành viên tạo blog với nhà cung cấp

là http://wordpress.com/ đây là nơi đáng tin cho bạn tạo blog miễn phí tuy nhiên dù

hỗ trợ nhiều dịch vụ tốt nhưng vẫn có những hạn chế nhất định của nó ví dụ: tên miền hiển nhiên là không được như ý rồi, và đôi khi chịu một số quảng cáo ngoài ý muốn từ nhà cung cấp dịch vụ hay một số bất cập khác

Một hướng đi mới cho việc viết blog, blog là một quyển sổ nhật ký online của mỗi chúng ta, ngôi nhà trên mạng chúng ta có thể chia sẻ kiến thức,… Do vậy chúng ta không muốn phụ thuộc vào bất kỳ ai hay một dịch vụ nào, tên miền của riêng chúng ta, thỏa sức viết bài mà không ai quản lý, đặt quảng cáo… một cách tự

do nhất Mã nguồnWordPresssẽ giúp bạn thực hiện điều đó

Có nhiều mã nguồn giúp thành viên tạo blog cá nhân: Joomla, Drupal, blog… nhưng theo tôi thì WordPress là tốt nhất, sự đơn giản, quản lý dễ dàng và

Bo-tùy biến của thành viên với mã nguồn cao nhất

Phiên bản mới nhất của WordPress là phiên bản 3.8 Nó được phát hành dưới Giấy phép Tài liệu Tự do GNU

1.1.1 Nét nổi bật của Wordpress

- Việc quản lý blog, quản lý các bài viết rất thuận tiện giống như các phần mềm thiết kế website chuyên nghiệp

- Thể hiện các tệp PDF, DOC, Powerpoint ngay trên nội dung bài viết Đặc biệt tích hợp sẵn Latex – công cụ soạn thảo công thức toán học, giúp người sử dụng có thể viết công thức toán học ngay trên blog

- WordPress có 23 Widget (ứng dụng tạo thêm) như Thống kê số truy nhập blog, Các bài mới nhất, Các bài viết nổi bật nhất, Các comment mới nhất, Liệt kê các chuyên mục, Liệt kê các Trang, Danh sách các liên kết, Liệt kê số bài viết trong từng tháng … Có 79 theme để thành viên lựa chọn

- Ngoài thống kê số truy nhập của từng ngày cho blog, WordPress còn thống kê số truy nhập của từng ngày đối với mỗi bài viết của blog Trên cơ sở đó chủ blog sẽ có định hướng nên viết vấn đề gì tiếp theo

- Các comment có thể duyệt rồi mới cho đăng, comment nào có nội dung không phù hợp có thể xóa, nếu cho là spam thì sau này IP đó không có thể gửi comment vào blog được nữa

- Admin (chủ blog) có thể cho 35 cộng tác viên gửi bài vào blog, có thể phân quyền cho các cộng tác viên theo các cấp độ khác nhau Lưu giữ danh sách thành viên đã ghé thăm trang blog Admin cũng có thể cho bất kỳ ai đăng bài qua email vào blog miễn là admin cho họ một địa chỉ email bí mật của blog (địa chỉ này có thể thay đổi bất kỳ lúc nào)

- Sao lưu dữ liệu nhằm khôi phục nội dung blog một cách dễ dàn nếu chẳng may blog bị hack, và cung cấp công cụ chuyển nhà từ các blog khác sang blog WordPress

- WordPress hỗ trợ 3 GB để lưu trữ các tệp hình ảnh và văn bản

- Hàng ngày WordPress có thống kê 100 bài trên các blog tiếng Việt của WordPress được nhiều người đọc nhất trong vòng 48 tiếng Nhờ đó bạn biết được các thông tin quan trọng nhất đang diễn ra.

1.1.2 Các lý do khiến chúng ta phải chọn WordPress

- Sự tương tác giữa người đọc với người viết cao thông qua tính năng comment

- Dễ dàng quản lý nội dung bài viết, chuyên mục, comment, quảng cáo…

- Có thể lưu trữ bài viết để sửa chữa trước khi public hay định ngày public bài viết

- Có rất nhiều themes cho bạn lựa chọn

- Một kho tàng plugin đang phát triển ngày càng cao

- Thân thiện với các công cụ tìm kiếm: Google, Yahoo, Bing…

- WordPress là một CMS (Content Management System) chuyên nghiệp

1.2 Công nghệ Responsive Web Design

1.2.1 Khái niệm về Responsive Web Design

Responsive Web Design đang là một xu thế mới cho thiết kế website và SEO Một trang web có thể chạy tốt trên tất cả các nền tảng trình duyệt: Máy tính

để bàn (PC), điện thoại (mobile) và máy tính bảng (tablet) vừa tiện lợi cho người dùng, vừa đơn giản hơn cho việc quản trị, phát triển là mơ ước của mọi đối tượng web Ngoài ra, google còn khuyến khích sử dụng Responsive Web Design cho việc seo trên máy tính và seo trên điện thoại

Responsive Web Design (RWD) là xu hướng mới theo đó quy trình thiết

kế và phát triển web sẽ đáp ứng mọi thiết bị và môi trường của người dùng theo các tiêu chí kích thước và chiều của màn hình thiết bị Để làm được điều đó chúng

ta sẽ sử dụng linh hoạt kết hợp các kỹ thuật bao gồm flexible grid, responsive image và CSS media query Khi người dùng chuyển từ máy tính xách tay của họ sang iPad hay iPhone, trang web sẽ tự động chuyển đổi để phù hợp với kích thước màn hình và kịch bản xử lý Nói cách khác, các trang web cần phải có công nghệ

tự động đáp ứng theo thiết bị của người dùng Điều này sẽ loại bỏ sự cần thiết cho

nhiều thiết kế web khác nhau và giảm thiểu thời gian cũng như chi phí thiết kế web.

Hình 1.1 Responsive Web Design là gì?

1.2.2 Giải pháp nào giúp điều chỉnh độ phân giải màn hình

Các thiết bị mới đang được phát triển mỗi ngày và mỗi thiết bị này có thể

xử lý các biến kích thước, chức năng và ngay cả màu sắc khác nhau Một số thích dùng màn hình nhỏ, một số dùng màn hình to, có người thích dùng theo chiều dọc

và có người thích dùng chiều ngang Như chúng ta biết từ sự phổ biến của điện thoại thông minh iPhone, iPad và các dòng điện thoại Android khác có thể chuyển đổi từ dọc sang ngang theo ý thích của người dùng Vậy người thiết kế xử lý tình huống này như thế nào?

Hình 1.2.Giải pháp là linh hoạt tất cả mọi thứ trên web

Một vài năm trước, khi flexible layout gần như là một thứ “xa xỉ” và

“cao cấp” cho các trang web, điều duy nhất mà sự linh hoạt được sử dụng trong thiết kế là linh động trong layout dạng cột và nội dung text Các hình ảnh có thể dễ dàng vỡ layout, và thậm chí các phần tử cấu trúc cũng gây ra việc làm vỡ layout khi chúng bị đẩy ra Thiết kế linh hoạt chưa thực sự linh hoạt – các nhà thiết họ có thể cung cấp giao diện hàng trăm pixel, nhưng họ lại không thể điều chỉnh giao diện từ một màn hình máy tính lớn để phù hợp với một chiếc netbook

Bây giờ chúng ta có thể làm cho mọi việc linh hoạt hơn Hình ảnh có thể được tự động điều chỉnh, và chúng ta có cách giải quyết để layout không bao giờ bị phá vỡ Giải pháp linh hoạt nội dung là hoàn hảo cho các thiết bị chuyển đổi từ cách truy xuất trên màn hình chiều ngang sang màn hình chiều đứng trên các thiết

bị mobile như iPad hay iPhone

Để xây dựng fexible content chúng ta có thể kết hợp các kỹ thuật như sau:

- Sử dụng fluid layout

- Sử dụng flexible image

- Sử dụng responsive navigation

 CSS3 media queries

Chúng ta sẽ sử dung một tính năng trong CSS3 đó là media query nhằm tạo nên fluid layout và flexible content Các thuộc tính min-width and max-width

sẽ làm chính xác những gì chúng ta đề nghị để đáp kích thước của màn hình và trình duyệt của thiết bị Thuộc tính min-width đặt trình duyệt và màn hình với chiều rộng tối thiểu theo một tập hợp của các style nhất định (hoặc phong cách đặc trưng riêng biệt) phù hợp thiết bị phù hợp với độ rộng tối thiểu đó Nếu bất cứ thiết

bị với kích cỡ màn hình dưới mức giới hạn này thì các định dạng stylesheets sẽ bị

bỏ qua Thuộc tính max-width làm điều ngược lại Bất cứ thiết bị có trình duyệt hoặc chiều rộng tối đa màn hình vượt quá quy định sẽ không áp dụng các định dạng stylesheets tương ứng Đoạn code dưới đây sẽ tự động thay đổi màu nền trang web theo các kích cỡ khác nhau của thiết bị:

cắt bỏ đi những phần không quan trọng và nhóm khác sẽ giữ nguyên ảnh nhưng sẽ

bị zoom nhỏ hoặc to lên

Có rất nhiều kỹ thuật dùng để tạo ra flexible image đáp ứng được với mọi kích cỡ màn hình khác nhau Sau đây tôi xin liệt kê ra 3 khuynh hướng thông dụng:

- Sử dụng stylesheet với img{max-width: 100%;}

bố trí một menu phù hợp và hiệu quả trên mọi thiết bị với các kích cỡ màn hình khác nhau? Sau đây tôi xin liệt kê một số navigation pattern phổ biến

 Do nothing – Giữ nguyên định dạng của top main menu

- Tùy biến top main menu thành top flow menu (mỗi menu item sẽ chỉ hiện thị trên một row)

- Tùy biến top main menu thành dropdown list

Hình 1.3 Responsive navigation

1.2.3 Người ta bố cục trang web như thế nào?

Để biết được RWD, trước tiên chúng ta hãy cùng tìm hiểu xem người ta làm như thế nào để có được một website hoàn chỉnh với đủ màu sắc, hình ảnh chứ không phải là hàng nghìn dòng chữ khô khan

Trước hết, để viết ra được một trang web, người ta sẽ dùng đến ngôn ngữ HTML (Hyper Text Markup Language) và lưu tập tin dưới dạng *.html File này thực chất chỉ là một tập tin văn bản, tuy nhiên nó bao gồm rất nhiều “thẻ” (tag) được chuẩn hóa để khi trình duyệt đọc vào nó biết phải làm gì với tag Tag thường được viết theo một cặp, tức là tag mở và tag đóng Ví dụ, chúng ta có tag <p> để bắt đầu một đoạn văn bản mới, sau khi viết văn bản xong thì sẽ đóng lại bằng

</p>

<html>

<head></head>

<body>

<p>Đây là một đoạn văn bản mới Bạn có thể <strong>in đậm</strong>, in

<em>chữ nghiêng</em> và làm nhiều thứ khác nữa.</p>

<p>Đây là một đoạn văn bản thứ hai.</p>

</body>

</html>

Trong số những tag của HTML có một cặp tag đặc biệt là <div></div> (div là division, tức là “chia cắt”) Nó dùng để chia trang web thành nhiều phần khác nhau, và mỗi phần sẽ đại diện cho một bộ phận của web

Một thứ ngôn ngữ thứ hai được sử dụng trong thiết kế web là CSS (Cascading Style Sheet) CSS có thể nhúng như là một phần của file HTML hoặc nằm trong file riêng Người ta sẽ dùng CSS để viết ra những dòng mã quy định kích thước các div, màu nền, ảnh nền, khung viền, nói chung là để trang trí các thành phần đồ họa trên web Ngoài ra, CSS còn dùng để bố cục trang (layout), tức sắp xếp vị trí các div lại tùy theo mục đích của người thiết kế Ví dụ, bạn có thể dùng CSS để bảo một div phải nằm ép sát vào cạnh phải của trình duyệt, div còn lại nằm kế bên và cả hai kéo dài đến cuối trang chứ không nằm cạnh nhau một cách vô trật tự như khi chưa xài CSS

1.2.4 Lợi ích của Responsive Web Design

Giờ đây các trình duyệt web di động đều đã hỗ trợ HTML và CSS đầy đủ chứ không như trước, do đó toàn bộ trang web có thể hiển thị một cách đầy đủ trên màn hình di động Tuy nhiên, nếu không áp dụng RWD, trang web khi xem trên thiết bị di động sẽ trở nên nhỏ xíu, bạn bắt buộc phải dùng kính lúp, còn không thì phải zoom vào và kéo qua lại, lên xuống liên tục để đọc nội dung Đây là trải nghiệm tiêu cực và nó khiến bạn nghĩ xấu về website, và điều tất nhiên là bạn chẳng thèm quay lại web đó nữa

Nói tóm lại, RWD là một xu hướng thiết kế hoàn toàn có lợi bởi nó đảm bảo bạn sẽ luôn luôn có những trải nghiệm tốt nhất, đẹp nhất khi xem trang web dù bạn có đang dùng thiết bị nào đi nữa Nó giúp nhà lập trình web tận dụng tối đa

không gian để trình diễn những nội dung cho chúng ta xem theo cách thoải mái và thích thú nhất có thể.

1.3 Ngôn ngữ mô hình hóa thống nhất UML(Unified Modeling Language)

Trong những năm gần đây phương thức lập trình hướng đối tượng đã thống lĩnh thị trường lập trình phần mềm và UML cũng đã trở thành ngôn ngữ mô hình hóa phổ biến trong sản xuất phần mềm Hầu hết các trường đại học, cao đẳng đã đưa hai môn này vào đào tạo chính khóa và cũng có không ít tài liệu viết về những vấn đề này Tuy nhiên, nó vẫn còn rất khó hiểu và khó áp dụng với sinh viên, và những bạn trẻ đang làm về Công nghệ thông tin

1.3.1 Phân tích và thiết kế hướng đối tượng (Object Oriented Analysis and Design: OOAD)

Trong kỹ nghệ phần mềm để sản xuất được một sản phẩm phần mềm người

ta chia quá trình phát triển sản phẩm ra nhiều giai đoạn như thu thập và phân tích yêu cầu, phân tích và thiết kế hệ thống, phát triển (coding), kiểm thử, triển khai và bảo trì Trong đó, giai đoạn phân tích, thiết kế bao giờ cũng là giai đoạn khó khăn

và phức tạp nhất Giai đoạn này giúp chúng ta hiểu rõ yêu cầu đặt ra, xác định giải pháp, mô tả chi tiết giải pháp Nó trả lời 2 câu hỏi What (phần mềm này làm cái gì?) và How (làm nó như thế nào?)

Để phân tích và thiết kế một phần mềm thì có nhiều cách làm, một trong những cách làm đó là xem hệ thống gồm những đối tượng sống trong đó và tương tác với nhau Việc mô tả được tất cả các đối tượng và sự tương tác của chúng sẽ giúp chúng ta hiểu rõ hệ thống và cài đặt được nó Phương thức này gọi là Phân tích thiết kế hướng đối tượng (OOAD)

1.3.2 UML là gì?

UML là ngôn ngữ mô hình hóa hợp nhất dùng để biểu diễn hệ thống Nói một

cách đơn giản là nó dùng để tạo ra các bản vẽ nhằm mô tả thiết kế hệ thống Các bản vẽ này được sử dụng để các nhóm thiết kế trao đổi với nhau cũng như dùng để thi công hệ thống (phát triển), thuyết phục khách hàng, các nhà đầu tư v.v (Giống như trong xây dựng người ta dùng các bản vẽ thiết kế để hướng dẫn và kiểm soát thi công, bán hàng căn hộ v.v )

1.3.3 Tại sao lại là OOAD và UML?

OOAD cần các bản vẽ để mô tả hệ thống được thiết kế, còn UML là ngôn ngữ

mô tả các bản vẽ nên cần nội dung thể hiện Do vậy, chúng ta phân tích và thiết kế theo hướng đối tượng và sử dụng UML để biểu diễn các thiết kế đó nên chúng thường đi đôi với nhau

UML sử dụng để vẽ cho nhiều lĩnh vực khác nhau như phần mềm, cơ khí, xây dựng v… trong phạm vi các bài viết này chúng ta chỉ nghiên cứu cách sử dụng UML cho phân tích và thiết kế hướng đối tượng trong ngành phần mềm OOAD sử dụng UML bao gồm các thành phần sau:

về mặt thi công) Trong phần mềm cũng như vậy, OOAD sử dụng UML có các góc

– Logical View: cung cấp góc nhìn về cấu trúc hệ thống, xem nó được tổ chức

như thế nào Bên trong nó có gì

– Process View: cung cấp góc nhìn động về hệ thống, xem các thành phần trong

hệ thống tương tác với nhau như thế nào

– Component View: Cũng là một góc nhìn về cấu trúc giúp chúng ta hiểu cách

phân bổ và sử dụng lại các thành phần trong hệ thống ra sao.

– Deployment View: cung cấp góc nhìn về triển khai hệ thống, nó cũng ảnh hưởng

1.3.5.Diagram (Bản vẽ)

Diagram các bạn có thể dịch là sơ đồ Tuy nhiên ở đây chúng ta sử dụng từ bản

vẽ cho dễ hình dung Các bản vẽ được dùng để thể hiện các góc nhìn của hệ thống

Hình 1.5 Các bản vẽ trong OOAD sử dụng UML

Trong đó:

– Use Case Diagram: bản vẽ mô tả về ca sử dụng của hệ thống Bản vẽ này sẽ

giúp chúng ta biết được ai sử dụng hệ thống, hệ thống có những chức năng gì Lập được bản vẽ này bạn sẽ hiểu được yêu cầu của hệ thống cần xây dựng

– Class Diagram: bản vẽ này mô tả cấu trúc của hệ thống, tức hệ thống được cấu

tạo từ những thành phần nào Nó mô tả khía cạnh tĩnh của hệ thống

– Object Diagram: Tương tự như Class Diagram nhưng nó mô tả đến đối tượng

thay vì lớp (Class)

– Sequence Diagarm: là bản vẽ mô tả sự tương tác của các đối tượng trong hệ

thống với nhau được mô tả tuần tự các bước tương tác theo thời gian.

– Collaboration Diagram: tương tự như sequence Diagram nhưng nhấn mạnh về

sự tương tác thay vì tuần tự theo thời gian

– State Diagram: bản vẽ mô tả sự thay đổi trạng thái của một đối tượng Nó được

dùng để theo dõi các đối tượng có trạng thái thay đổi nhiều trong hệ thống

– Activity Diagram: bản vẽ mô tả các hoạt động của đối tượng, thường được sử

dụng để hiểu về nghiệp vụ của hệ thống

– Component Diagram: bản vẽ mô tả về việc bố trí các thành phần của hệ thống

cũng như việc sử dụng các thành phần đó

– Deployment Diagram: bản vẽ mô tả việc triển khai của hệ thống như việc kết

nối, cài đặt, hiệu năng của hệ thống v.v…

1.3.6 Notations (các ký hiệu)

Notations là các ký hiệu để vẽ, nó như từ vựng trong ngôn ngữ tự nhiên Bạn phải biết từ vựng thì mới ghép thành câu, thành bài được Chúng ta sẽ tìm hiểu kỹ các notations trong từng bản vẽ sau này Dưới đây là vài ví dụ về notation

Hình 1.6 Ký hiệu về Use Case

Hình 1.7 Ký hiệu về Class

Hình 1.8 Ký hiệu về Actor

1.4 Hệ quản trị cơ sở dữ liệu MySQL

Mysql là hệ quản trị dữ liệu miễn phí, được tích hợp sử dụng chung với apache, PHP Chính yếu tố phát triển trong cộng đồng mã nguồn mở nên mysql đã qua rất nhiều sự hỗ trợ của những lập trình viên yêu thích mã nguồn mở Mysql cũng có cùng một cách truy xuất và mã lệnh tương tự với ngôn ngữ SQL Nhưng Mysql không bao quát toàn bộ những câu truy vấn cao cấp như SQL Về bản chất Mysql chỉ đáp ứng việc truy xuất đơn giản trong quá trình vận hành của website nhưng hầu hết có thể giải quyết các bài toán trong PHP

Một số đặc điểm của MySQL:

MySQL là một phần mềm quản trị CSDL dạng server-based (gần tương đương với SQL Server của Microsoft) MySQL quản lý dữ liệu thông qua các CSDL , mỗi CSDL có thể có nhiều bảng quan hệ chứa dữ liệu

MySQl có cơ chế phẩn quyền người dùng sử dụng riêng, mỗi người có thể được quản lý một hoặc nhiều CSDL khác nhau, mỗi người dùng có một tên truy cập và mật khẩu tương ứng đề xuất đến CSDL Khi ta truy vấn tới CSDL MySQL,

ta phải cung cấp tên truy cập và mật khẩu của tài khoản có quyền sử dụng CSDL

CHƯƠNG 2: KHẢO SÁT, PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

2.1 Khảo sát hệ thống

2.1.1 Khảo sát hiện trạng và xác lập dự án

2.1.1.1 Giới thiệu về doanh nghiệp đồ gỗ mỹ nghệ Dũng Thành

Doanh nghiệp Đồ Gỗ Mỹ Nghệ Dũng Thành tại số 53 - đường Xương Giang - Phường Xương Giang -Thành phố Bắc Giang- Bắc Giang được thành lập năm 2010 với là một doanh nghiệp sản xuất đồ gỗ với quy mô nhỏ.Đi lên từ 1 xưởng gỗ quy mô nhỏ, sau 6 năm đi vào hoạt động và phát triển, doanh nghiệp đã đáp ứng được đầy đủ mẫu mã chủng loại theo yêu cầu của khách hàng Tất cả sản phẩm trong doanh nghiệp đều được làm từ các loại gỗ tự nhiên, có giá trị cũng như công năng rất cao như: trắc, cẩm, mun, hương, gụ,

So với các doanh nghiệp sản xuất đồ gỗ mỹ nghệ trên địa bài tỉnh Bắc Giang và trên cả nước thì Dũng Thành có quy mô vừa và nhỏ, tuy nhiên doanh

nghiệp đã đáp ứng được đầy đủ mẫu mã chủng loại theo yêu cầu của khách hàng.Ngoài ra, để đáp ứng được 100% ý thích của từng khách hàng, đồ gỗ mỹ nghệ Dũng Thành còn sản xuất mở rộng thêm về các mặt hàng hiện đại phù hợp với phong cách phương tây hay tân cổ điển như: nội thất văn phòng, công trình, biệt thự…

Trong thực tế thì doanh nghiệp vẫn hiện chưa có website giới thiệu sản phẩm, các mặt hàng mới chỉ được giới thiệu thông qua truyền miệng Chính vì vậy mà đề tài này em muốn đưa tin học vào để xây dựng website giới thiệu sản phẩm cho sản phẩm của doanh nghiệp Dũng Thành được mọi người biết đến nhiều hơn

2.1.1.2 Quy trình hoạt động của doanh nghiệp

Các sản phẩm của doanh nghiệp được giới thiệu và bán hàng thông qua hình thức truyền miệng, hạn chế này ảnh hưởng rất lớn đến việc quảng bá sản phẩm và mở rộng thị trường hoạt động của doanh nghiệp Việc giới thiệu sản phẩm

và cách bán hàng đóng một vai trò quan trọng trong việc doanh nghiệp phát triển nhanh chóng

Quá tình bán sản phẩm:

Các sản phẩm của doanh nghiệp sau khi được sản xuất tại xưởng sẽ được trưng bày lên gian hàng Ở đó, khách hàng có thể đến xem và lựa chọn các sản phẩm theo nhu cầu của mình

Quá trình thống kê:

Đi lên từ một xưởng gỗ nhỏ, 6 tháng trở lại đây mở rộng mô hình lên mô hình doanh nghiệp tuy nhiên việc thay đổi hoạt động vẫn chưa được đổi mới Quá trình thống kế khách hàng, thống kê sản phẩm, thống kê mặt hàng đã bán còn thực hiện thủ công trên sổ sách

2.1.2 Tính cấp thiết cần xây dựng website cho doanh nghiệp

Trước sự phát triển không ngừng của mạng Internet và Thương mại điện tử toàn cầu hiện nay, xây dựng website cho doanh nghiệp là một công việc rất quan trọng Website đóng vai trò kênh truyền thông và công cụ kinh doanh hàng đầu

cho mỗi doanh nghiệp, nó mang lại những lợi thế không thể phủ nhận Trừ phi kinh doanh một mình, tự bán hàng cho mình, nếu không, muốn phát triển dứt khoát cần phải có một website Thiết lập sự hiện diện.

Doanh nghiệp đồ gỗ mỹ nghệ Dũng Thành là doanh nghiệp vừa và nhỏ nhưng sản phẩm ngày càng được công nhận về chất lượng và số lượng các mặt hàng đa mẫu mã Do chỉ sử dụng cách giới thiệu thủ công nên việc giới thiệu sản phẩm và mở rộng thị trường còn gặp nhiều khó khăn và phức tạp, chưa đáp ứng được đầy đủ các yêu cầu của khách hàng

Qua thời gian khảo sát thực tế hệ thống hoạt động của doanh nghiệp Dũng Thành em thấy có nhiều vấn đề cần giải quyết như sau:

+ Các sản phẩm không được tiếp cận rộng rãi thị trường trong và ngoài nước.+ Các thông tin về sản phẩm và cửa hàng không được nhiều người biết đến.+ Việc bán hàng còn nhiều hạn chế và mất thời gian

Để khắc phục những hạn chế về yêu cầu thời gian và độ chính xác đòi hỏi ngày càng cao, ta nhận thấy rằng việc đưa tin học ứng dụng vào việc giới thiệu sản phẩm là điều rất cần thiết, tin học ứng dụng giúp con người cập nhật thông tin nhanh chóng và chính xác, việc quản lý thông tin thuận tiện và dễ dàng hơn

 Hiển thị danh mục sản phẩm.

 Hiển thị chi tiết về sản phẩm trong danh mục

 Hiển thị thông tin về doanh nghiệp

 Quản lý đơn hàng và sản phẩm

 Bán hàng và thanh toán trực tuyến

2.2 Phân tích và Thiết kế hệ thống

2.2.1 Phân tích yêu cầu của hệ thống

 Các thông tin đầu vào

Người quản trị nhập thông tin về các sản phầm, các tin tức cập nhật thường xuyên Khách hàng gửi bài viết góp ý giúp cho website ngày càng hoàn thiện hơn Cụ thể gồm các thông tin sau:

Các thông tin giới thiệu về hệ thống

Các thông tin chi tiết về từng sản phẩm

Các bài viết, kỹ thuật, tin tức

Các bài góp ý, ý kiến, hỏi đáp của khách hàng,

 Các thông tin đầu ra

Đưa ra các thông tin cần thiết cho khách hàng ở mọi khía cạnh mà khách hàng quan tâm đến sản phẩm, đồng thời kiểm soát được hoạt động của website Đưa ra các sản phẩm, đưa ra sản phẩm mới nhất Cụ thể bao gồm:

Website có giao diện thân thiện, dễ sử dụng và các chức năng thao tác.Cho phép khách hàng đăng kí để đặt hàng, xem các tin tức về sản phẩm cũng như tin tức về cửa hàng

Cho phép ban quản trị cập nhật các tin tức, bài viết, thông tin khuyến mại, quản trị được các đơn hàng

2.2.2 Phân tích hệ thống

2.2.2.1 Biểu đồ Use Case

a Biểu đồ Use Case tổng quát

Ta đi xác định các tác nhân của hệ thống ở đây hệ thống được chia làm hai phần: một phần dành cho khách mua hàng, một phần dành cho quản trị quản lý và cập nhật thông tin cho website

Bảng 2 Các tác nhân và Use case của hệ thống

Hình 2 Biểu đồ Use Case tổng quát

- Mô tả UC Tổng quát: Hệ thống có các chức năng như hình 2.1 Người

quản trị có thể thực hiện đăng nhập/đăng xuất hệ thống(trang Quản trị) để quản lý thông tin cho hệ thống Gồm có quản lý đơn hàng, quả các thông tin và thực hiện chức năng quản lý đơn hàng Người dùng duy nhất của hệ thống là khách hàng, khách hàng có thể truy cập hệ thống, thực hiện xem sản phẩm, xem tin tức, tìm kiếm sản phẩm, đăng nhập tài khoản để đặt hàng

b Phân rã biểu đồ use sase

 Phân rã UC Quản lý sản phẩm

Use case quản lý sản phẩm thực hiện bởi admin và được phân rã thành 3 use case con là : thêm sản phẩm, sửa sản phẩm và xóa sản phẩm.

Hình 2 Phân rã UC Quản lý sản phẩm

 Phân rã UC Quản lý đơn hàng

Người quản trị thực hiện chức năng cập nhật sản phẩm trong trang quản trị Bao gồm các chức năng con là: cập nhật trạng thái đơn hàng, xóa đơn hàng

Hình 2 Phân rã UC Quản lý đơn hàng

 Phân rã UC Đặt hàng

Use cace đặt hàng được thực hiện bởi khách hàng gồm các chức năng con: cập nhật giỏ hàng, thanh toán

Hình 2.4 Phân rã UC Đặt hàng

 Phân rã UC Thống kê

Hình 2.5 Phân rã UC Thống kê

2.2.2.2 Kịch bản biểu đồ của Usecase(UC)

 Kịch bản UC Thêm sản phẩm

Bảng 2 Mô tả Use Case Thêm sản phẩm

Tác nhân chính Quản trị

Tiền điều kiện Tác nhân đang trong phiên làm việc của mình, đang ở

trang Quản lý sản phẩm

Chuỗi sự kiện chính:

1 Quản trị kích hoạt chức năng Quản lý sản phẩm

2 Hiển thị form thêm sản phẩm và yêu cầu người quản trị đưa vào thông tin sản phẩm

3.Người quản trị nhập thông tin về sản phẩm mới và nhấn đăng

4 Hệ thống xác nhận thông tin hợp lệ và thêm vào cơ sở dữ liệu

5.1 Hệ thống thông báo nhập thông tin thành công

6 Người quản trị thoát khỏi chức năng thêm sản phẩm

 Kịch bản UC Sửa Sản Phẩm

Bảng 2.3 Mô tả Use Case Sửa Sản Phẩm

Tên Use case

Sửa Sản Phẩm

Tác nhân chính Quản trị

Tiền điều kiện Tác nhân đang làm trong phiên làm việc của mình, đang ở

trang Quản Lý Sản PhẩmChuỗi sự kiện chính:

1 Hệ thống hiển thị form sửa sản phẩm và yêu cầu người quản trị đưa vào thông tin sản phẩm

2 Người quản trị nhập thông tin về sản phẩm cần thay đổi và nhấn “Cập nhật”

3 Hệ thống kiểm tra và xác nhận thông tin hợp lệ

4.Hệ thống nhập thông tin sản phẩm mới vào CSDL

5 Hệ thống thông báo đã cập nhật thành công

6 Người quản trị thoát khỏi chức năng sửa sản phẩm

Ngoại lệ:

3.1 Hệ thống thông báo thông tin sản phẩm không hợp lệ

3.1.a Hệ thống yêu cầu người quản trị nhập lại thông tin

3.1.b Người quản trị nhập lại thông tin sản phẩm

 Kịch bản UC Xóa Sản Phẩm

Bảng 2.4 Mô tả Use Case Xóa Sản Phẩm

Tên Use case

Xóa Sản Phẩm

Tác nhân chính Quản trị

Tiền điều kiện Tác nhân đang làm trong phiên làm việc của mình, đang ở

trang Quản lý sản phẩm