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

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

1


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
Trần Thị Quy

MỤC LỤC
LỜI CẢM ƠN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

LỜI CAM ĐOAN. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
MỤC LỤC. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2


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

3


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

4

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

5

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

6


7


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

8


9


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


11


*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

12


Công nghệ Responsive Web Design
Ngôn ngữ mô hình hóa thống nhất UML
Hệ quản trị cơ sở dữ liệu
Chương 2. Khảo sát, phân tích và thiết kế hệ thống
Khảo sát hệ thống

Phâ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

13


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à đâ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ồn WordPress sẽ 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, Boblog… nhưng theo tôi thì WordPress là tốt nhất, sự đơn giản, quản lý dễ dàng và
14


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


- 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
16


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?

17


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

18


 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ị:

 Flexible images
Nếu thay đổi kích thước ảnh quá nhỏ, hình ảnh sẽ xuất hiện với chất lượng
thấp, tuy nhiên chúng ta vẫn muốn nó sẽ xuất hiện trên web và không muốn bỏ nó
đi vì nó quan trọng. Vì vậy, hình ảnh được chia thành 2 nhóm: một nhóm có thể

19


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%;}
- Sử dụng phần tử HTML5 và javascript
- Sử dụng dịch vụ Cloud để đáp ứng hình ảnh phù hợp với từng thiết bị.
 Responsive navigation
Ở phần trên đã giới thiệu các kỹ thuật để tạo ra responsive layout và
content. Tuy nhiên, một điều rất quan trọng đối với việc sử dụng các chức năng
chính của website liên quan mật thiết đến việc bố trí main menu. Làm thế nào để
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

20


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

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

.
<html>
<head></head>
<body>
21

Đâ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.

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

</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
22


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

23


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:
 View (góc nhìn)
 Diagram (bản vẽ)
 Notations (ký hiệu)

 Mechanisms (qui tắc, cơ chế)
1.3.4.View (góc nhìn)
Mỗi góc nhìn như thầy bói xem voi, nó không thể hiện hết hệ thống nhưng thể
hiện rõ hệ thống ở một khía cạnh. Chính vì thế trong xây dựng có bản vẽ kiến trúc
(nhìn về mặt kiến trúc), bản vẽ kết cấu (nhìn về mặt kết cấu), bản vẽ thi công (nhìn
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

24


nhìn sau:

Hình 1.4. Ngôn ngữ mô hình hóa thống nhất
Trong đó
– Use Case View: cung cấp góc nhìn về các ca sử dụng giúp chúng ta hiểu hệ
thống có gì? ai dùng và dùng nó như thế nào.
– 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
25