Tìm hiểu công nghệ và xây dựng framework giúp phát triển nhanh các website

Đối với những dự án vừa và nhỏ, kinh nghiệm của chúng tôi cho thấy rằng nếu sử dụng các website framework có sẵn trên thị trường sẽ làm ảnh hưởng tới tốc độ tải trang; khả năng tùy biến,

LỜI CAM ĐOAN

Tôi - Nguyễn Phan Huy, học viên lớp Cao học CNTT 2013 - 2015 Trường Đại học Bách khoa Hà Nội - cam kết Luận văn tốt nghiệp là công trình nghiên cứu của bản thân tôi dưới sự hướng dẫn của TS Nguyễn Thanh Hùng - Viện Công Nghệ Thông Tin và Truyền Thông - Đại học Bách Khoa Hà Nội Các kết quả trong Luận văn tốt nghiệp là trung thực, không sao chép toàn văn của bất kỳ công trình nào khác

Hà Nội, ngày 12 tháng 9 năm 2015 Học viên: Nguyễn Phan Huy

Lớp: 13BCNTT2

LỜI CẢM ƠN

Đầu tiên, tôi xin bày tỏ lòng biết ơn sâu sắc tới Thầy giáo, TS Nguyễn Thanh Hùng - Bộ môn Công nghệ phần mềm - Viện Công Nghệ Thông Tin và Truyền Thông - Đại học Bách Khoa Hà Nội Thầy đã khuyến khích và rất tận tình hướng dẫn tôi trong suốt quá trình thực hiện luận văn Chính nhờ sự quan tâm chỉ bảo và những ý kiến đóng góp quý báu của Thầy, tôi mới có thể hoàn thành luận văn này Tôi xin chân thành cảm ơn tập thể các thầy, cô giáo Viện Công Nghệ Thông Tin và Truyền Thông - trường Đại học Bách Khoa Hà Nội đã tận tình giảng dạy truyền đạt cho tôi những kiến thức, kinh nghiệm quý báu

Tôi cũng xin cảm ơn các đồng nghiệp ở công ty TNHH MTV nước sạch Hà Nội đã tạo điều kiện về thời gian để tôi có thể học tập và hoàn thành luận văn

Và cuối cùng tôi xin chân thành cảm ơn gia đình, bạn bè đã luôn ủng hộ và động viên tôi trong suốt những năm học vừa qua

MỤC LỤC

LỜI CAM ĐOAN 1

LỜI CẢM ƠN 2

MỤC LỤC 3

DANH MỤC KÝ HIỆU CHỮ VIẾT TẮT 5

DANH MỤC HÌNH 6

CHƯƠNG 1: MỞ ĐẦU 7

1.1 Lý do lựa chọn và tính cấp thiết đề tài 7

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

1.3 Phạm vi và phương pháp nghiên cứu 7

1.4 Một số đóng góp mới của luận văn 8

CHƯƠNG 2: CƠ SỞ THỰC TIỄN VÀ CƠ SỞ LÝ THUYẾT 9

2.1 Các vấn đề thực tế trong việc phát triển Website 10

2.1.1 Web 2.0 và kỹ thuật Ajax 10

2.1.2 Ngôn ngữ lập trình 11

2.1.3 Các vấn đề về giao diện 12

2.1.4 Tích hợp phát triển ứng dụng web trên một website đã có sẵn 13

2.1.5 Đề xuất giải pháp giúp phát triển nhanh các website 14

2.2 Các công nghệ áp dụng 14

2.2.1 Công nghệ Google Web Toolkit (GWT) 14

2.2.1.1 Khái niệm GWT 15

2.2.1.2 Các thành phần của GWT 15

2.2.2 Công nghệ Google App Engine 16

2.2.2.1 Khái niệm Google App Engine 16

2.2.2.2 Môi trường ứng dụng 18

2.2.2.3 Giới hạn 18

2.2.2.4 Sự khác biệt với các dịch vụ khác 19

2.2.3 PHP hướng đối tượng và Mô hình MVC 19

2.2.3.1 PHP hướng đối tượng 20

2.2.3.2 Mô hình MVC 21

2.2.4 Smarty Template Engine 22

2.2.4.1 Khái niệm Smarty 23

2.2.4.2 Tốc độ xử lý của website có sử dụng Smarty 23

2.2.4.3 Tính bảo mật 24

2.2.4.4 Những tính năng của Smarty 24

2.2.5 Website Framewok 25

2.2.5.1 Software Framework - Khung làm việc của phần mềm 25

2.2.5.2 Website framework - Khung làm việc của website 26

CHƯƠNG 3: XÂY DỰNG FRAMEWORK GIÚP PHÁT TRIỂN NHANH CÁC WEBSITE 27

3.1 Thiết kế kiến trúc Ligker framework 27

3.1.1 Các thành phần của Ligker framework 28

3.1.1.1 Front Controller - bộ phận xử lý đầu vào 28

3.1.1.2 Core Layer - lớp lõi 28

3.1.1.3 Application Layer - lớp ứng dụng 29

3.1.1.4 Database - cơ sở dữ liệu 29

3.1.2 Quan hệ kế thừa của các thành phần trong Ligker framework 30

3.1.2.1 Các thành phần có quan hệ kế thừa 30

3.1.2.2 Sử dụng quan hệ kế thừa để áp dụng Core functions cho nhiều dự án 31

3.1.3 Nguyên lý hoạt động của Ligker framework 32

3.1.3.1 Luồng thông tin trong Ligker framework 32

3.1.3.2 Đặc tả luồng thông tin trong mô hình MVC của Application layer 34

3.1.3.3 Một vài nhận xét về quy trình hoạt động của Ligker framework 35

3.1.4 Mối quan hệ Page - Position - Module trong Ligker framework 36

3.1.4.1 Page – trang 36

3.1.4.2 Position – các vị trí trong một trang 37

3.1.4.3 Module 37

3.1.5 Cấu trúc thư mục của Ligker framework 38

3.1.5.1 Thư mục Core 39

3.1.5.2 Thư mục project 40

3.2 Xử lý phía máy khách (client) 42

3.2.1 Sử dụng Google Web Toolkit 42

3.2.1.1 Viết mã HTML 44

3.2.1.2 Thực hiện Ajax 44

3.2.2 Sử dụng Template Engine 45

3.2.2.1.Viết mã HTML 45

3.2.2.2 Thực hiện Ajax 47

3.2.3 Sử dụng kết hợp Google Web Toolkit và Template Engine 48

3.3 Xử lý phía máy chủ (server) 48

3.3.1 Cấu hình ứng dụng 49

3.3.2 Phương thức truy xuất cơ sở dữ liệu 49

3.3.2.1 Kết nối cơ sở dữ liệu 49

3.3.2.2 Truy vấn cơ sở dữ liệu 50

3.3.3 Nền tảng máy chủ 51

3.3.3.1 Sử dụng Google App Engine 51

3.3.3.2 Sử dụng hosting Apache 53

3.4 Một số kết quả áp dụng Ligker framework trong thực tiễn 53

3.4.1 Một số dự án thức tế đã áp dụng Ligker 53

3.4.1.1 Chương trình Quản lý lịch công tác tuần trực tuyến 53

3.4.1.2 Phần mềm quản lý Công văn 55

3.4.1.3 Phần mềm Quản lý bán hàng, xuất nhập kho, kế toản của công ty Beful 57

3.4.2 Các đóng góp và kết quả áp dụng Ligker framework trong việc phát triển nhanh các ứng dụng Web 58

3.4.2.1 Đóng góp chung cho ba ứng dụng thực tế 58

3.4.2.2 Đóng góp trong các chức năng cụ thể 59

3.4.3 So sánh việc không sử dụng và có sử dụng Framework trong việc phát triển các Website 71

3.4.3.1 Các tiêu chí so sánh 71

3.4.3.2 Kết quả so sánh 73

3.5 Đưa ứng dụng ra cộng đồng 74

CHƯƠNG 4 : KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 75

TÀI LIỆU THAM KHẢO 77

DANH MỤC KÝ HIỆU CHỮ VIẾT TẮT

Framework Khung làm việc

Ligker framework Tên riêng của khung làm việc được xây dựng trong luận văn

MVC Model - View - Controller

Server Máy chủ (truyền thống)

Desktop, PC Máy tính cá nhân

CMS Content Management System - hệ thống quản trị nội dung

Developer, Coder,

Programmer

Lập trình viên

Designer Thiết kế viên

Rewrite URL Chuyển dạng địa chỉ

Cache Bản sao tài liệu Web

Request Yêu cầu (từ trình duyệt)

Project Leader Người đứng đầu và chịu trách nhiệm về dự án

DANH MỤC HÌNH

Hình 3.1: Sơ đồ tổng quát mô tả các thành phần và nguyên lý hoạt động của Ligker

framework 27

Hình 3.2: Mô tả quan hệ kế thừa của các thành phần trong hệ thống 30

Hình 3.3: Minh họa việc sử dụng Core functions cho nhiều dự án 31

Hình 3.4: Đặc tả quan hệ kế thừa của Class_1.1 với base functions và Core functions 31

Hình 3.5: luồng thông tin trong Ligker framework 32

Hình 3.6: Luồng thông tin trong mô hình MVC 34

Hình 3.7: Hình ảnh minh họa cho web page 36

Hình 3.8: Các position và module trên một web page 37

Hình 3.9: Cấu trúc các thư mục chính của Ligker framework 38

Hình 3.10: Các thành phần trong thư mục default_library 39

Hình 3.11: Các thành phần trong thư mục project 40

Hình 3.12: Các thành phần trong thư mục library 41

Hình 3.13: Cấu trúc thư mục của một Google Web Toolkit project 43

Hình 3.14: Vị trí thư mục Google Web Toolkit trong Ligker framework 43

Hình 3.15: Một đoạn mã Java viết trên Google Web Toolkit 44

Hình 3.16: Đoạn mã Java viết trên Google Web Toolkit sinh ra Javascript 45

Hình 3.17: Thư mục Smarty trong Ligker framework 45

Hình 3.18: Cấu hình Smarty trong Ligker framework 46

Hình 3.19: Một thư mục chứa template của dự án có sử dụng Ligker framework 46

Hình 3.20: Vị trí file Javascript sử dụng mặc định của Ligker framework 47

Hình 3.21: Vị trí file cấu hình của hệ thống sử dụng Ligker framework 49

Hình 3.22: Sử dụng Google App Engine trên máy tính cá nhân 52

Hình 3.23: Minh họa giao diện dự án Quản lý lịch công tác tuần của Công ty Nước sạch Hà Nội 55

Hình 3.24 : Một trang của dự án Quản lý công văn 56

Hình 3.25 : Một số giao diện của ứng dụng Quản lý Công văn trên nền tảng điện thoại di động 57

Hình 3.26: Minh họa một giao diện của dự án Beful 58

CHƯƠNG 1: MỞ ĐẦU 1.1 Lý do lựa chọn và tính cấp thiết đề tài

Hiện nay, tác giả luận văn đang làm việc tại Tổng công ty Nước sạch Hà Nội,

và có tham gia một số dự án lập trình web tại công ty phần mềm Koolsoft Đối với những dự án vừa và nhỏ, kinh nghiệm của chúng tôi cho thấy rằng nếu sử dụng các website framework có sẵn trên thị trường sẽ làm ảnh hưởng tới tốc độ tải trang; khả năng tùy biến, sửa lỗi của lập trình viên; và đặc biệt sẽ gặp khó khăn khi nâng cấp

hệ thống để tích hợp với các công nghệ mới

Với các lý do nêu trên, tôi đã quyết định theo học Thạc sỹ trường Đại học

Bách Khoa Hà Nội, theo hướng nghiên cứu: “Tìm hiểu công nghệ và xây dựng

Framework giúp phát triển nhanh các Website”.

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

- Nghiên cứu các vấn đề trong việc phát triển website Nội dung này được trình bày chi tiết trong chương 2 của luận văn;

- Nghiên cứu các công nghệ mới liên quan đến lập trình web Nội dung này được trình bày chi tiết trong chương 3 của luận văn;

- Nghiên cứu cơ chế hoạt động và cách thức xây dựng một website framework Trong đó chú trọng tới việc áp dụng các công nghệ mới để xây dựng framework Nội dung này được trình bày chi tiết trong chương 4 của luận văn;

- Nghiên cứu khả năng áp dụng của webiste framework trong thực tế Nội dung này được trình bày chi tiết trong chương 4 của luận văn

1.3 Phạm vi và phương pháp nghiên cứu

Hiện nay có rất nhiều công nghệ hỗ trợ cho việc phát triển Website Trong phạm vi luận văn này, tác giả luận văn kết hợp sử dụng các phương pháp nghiên cứu là “Nghiên cứu lý thuyết” và “Nghiên cứu thực nghiệm” tập trung nghiên cứu các công nghệ: Google Web Toolkit, Google App Engine, Smarty Template Engine, MVC Pattern, PHP OOP, PHP Data Objects (PDO);

Trong luận văn, tác giả luận văn có đề xuất giải pháp xây dựng một Website framework để phát triển nhanh các Website Tuy nhiên, Website framework đó chỉ

áp dụng cho các website thỏa mãn ba điều kiện sau: thứ nhất, Website đó được viết bằng ngôn ngữ lập trình phía Server là PHP; thứ hai, Website đó sử dụng cơ sở dữ liệu MySql hoặc Google Cloud SQL; thứ ba, Website đó chạy trên nền tảng web

server là Apache hoặc Google App Engine

1.4 Một số đóng góp mới của luận văn

Luận văn đã đề xuất giải pháp giúp phát triển nhanh các website, phù hợp với các dự án vừa và nhỏ;

Website framework trình bày trong luận văn có sử dụng kết hợp các công nghệ mới: Google Web Toolkit, Google App Engine, Smarty Template Engine; Với Website framework này, ứng dụng Web có thể hoạt động trên môi trường máy chủ hoặc điện toán đám mây; có thể “nhúng” vào một website (viết bằng PHP) đã có sẵn Lập trình viên sử dụng Website framework được hỗ trợ và chuẩn hóa việc sinh

mã truy vấn cơ sở dữ liệu Website framework cũng đặt ra một số quy định bắt buộc các lập trình viên phải tuân theo để đảm bảo việc viết mã đúng theo một chuẩn mực nhất định Với các đóng góp nêu trên, tác giả kỳ vọng rằng website framework trình bày trong luận văn này sẽ hỗ trợ các lập trình viên phát triển nhanh website; Và thực tế, khi áp dụng vào một số dự án cụ thể đã có những kết quả tích cực nhất định

…

CHƯƠNG 2: CƠ SỞ THỰC TIỄN VÀ CƠ SỞ LÝ THUYẾT

Với trình độ khoa học hiện nay, các công nghệ mới được phát triển và cập nhật từng phút từng giây; liên tục cho ra đời những phần mềm mới tốt hơn, mạnh

mẽ và hiệu quả hơn Mặt khác, nhu cầu của người dùng cũng không ngừng tăng lên

cả về số lượng và chất lượng Tháng 9 năm 2014, trang theo dõi trực tuyến Internet Live Stats công bố số lượng website trên toàn thế giới đã chính thức vượt mốc 1 tỉ

và trung bình cứ mỗi giây có một website đăng kí mới được ra đời Trong 10 Website có số lượng người truy cập đông nhất thế giới (Google, Facebook, YouTube, Yahoo!, Baidu, Wikipedia ) đều là Web 2.0 Những con số đó đã phản ánh một nhu cầu trong thực tế, đó là: áp dụng công nghệ và phát triển nhanh website là xu thế tất yếu

Bằng kinh nghiệm làm việc thực tế tại công ty Nước sạch Hà Nội và tham gia các dự án lập trình Web với công ty phần mềm Koolsoft, tác giả luận văn nhận thấy việc phát triển nhanh các Website gặp một số trở ngại như: để xây dựng một Website 2.0 có áp dụng kỹ thuật Ajax gặp nhiều khó khăn; lựa chọn một ngôn ngữ lập trình Web phù hợp với xu thế hiện nay; vấn đề mã giao diện và mã lập trình lẫn lộn trong một file; nhiều trường hợp khách hàng có nhu cầu xây dựng và tích hợp ứng dụng Web vào một Website đã có sẵn Để giải quyết các vấn đề thực tế nêu

trên, tác giả luận văn xin đề xuất giải pháp: “xây dựng framework giúp phát triển

nhanh các website” trong đó có sử dụng kết hợp các công nghệ: Google Web

Toolkit, Goolge App Engine, PHP hướng đối tượng theo mô hình MVC, Smarty Template Engine Trong chương này, luận văn sẽ trình bày các vấn đề khó khăn trong việc phát triển Website và các vấn đề lý thuyết liên quan đến các công nghệ nêu trên

2.1 Các vấn đề thực tế trong việc phát triển Website

2.1.1 Web 2.0 và kỹ thuật Ajax

Website 2.0 hiện nay không còn quá xa lạ với người sử dụng Internet Nhưng

có rất nhiều định nghĩa khác nhau về công nghệ này và trên thực tế thì vẫn chưa có một định nghĩa nào là chuẩn mực cơ bản của website 2.0

Theo từ điển wikipedia.org thì: “Khái niệm Web 2.0 đầu tiên được Dale Dougherty, phó chủ tịch của OReilly Media, đưa ra tại hội thảo Web 2.0 lần thứ nhất vào tháng 10 năm 2004 Dougherty không đưa ra định nghĩa mà chỉ dùng các

ví dụ so sánh phân biệt Web 1.0 và Web 2.0: DoubleClick là Web 1.0; Google AdSense là Web 2.0 Ofoto là Web 1.0; Flickr là Web 2.0 Britannica online là Web 1.0; Wikipedia là Web 2.0 ”

Trong giai đoạn đầu Web 2.0 tập trung vào yếu tố công nghệ, nhấn mạnh các nền tảng ứng dụng Nhưng đến lần hội thảo thứ hai về Web 2.0 vào tháng 10/2005, thì được nhấn mạnh yếu tố sâu xa hơn chính là yếu tố cộng đồng

Các công nghệ chỉ là phần được nhìn thấy trong Web 2.0, người dùng mới là thành phần tạo nền tảng của Website Từ phương thức “duyệt và xem” chuyển qua

“tham gia” là một sự thay đổi rất lớn Website 2.0 cho phép người dùng có thể đưa bất cứ thông tin gì lên mạng internet

Khi số lượng thông tin đã rất lớn, với sự sàng lọc và lựa chọn của người dùng, các thông tin sẽ trở nên có giá trị rất quý báu Ở đây xuất hiện 2 vấn đề:

- Thứ nhất: các ứng dụng web chạy chậm hơn so với các ứng dụng desktop vì

nó liên tục phải tải lại trang khi có các sự kiện thay đổi nội dung Theo tác giả

Prabhakar Chaganti (2007, Google Web Toolkit: GWT Java Ajax Programming):

“The client-server architecture has undergone a vast change over a short period of time Earlier, each application had a different client software, with the software serving as the UI This software had to be installed individually on every client, and needed to be updated every time we made changes to the application We moved from that to the web era and deploying applications on the Internet, and

applications from anywhere This was a sea change, but we still had issues of performance and applications not having the same feel or responsiveness as desktop applications.”

Ajax có thể nói là một bước đột phá trong công nghệ web Nó được sử dụng ngày càng phổ biến vì khả năng tương tác cao, làm cho các ứng dụng web gần với ứng dụng desktop hơn Google và một số tổ chức đã sử dụng Ajax để xây dựng những gì có tính chất cộng đồng được mong đợi giống như những gì mà một ứng dụng web có thể thực hiện Ajax cho phép thực hiện điều này tốt hơn, thông minh hơn mà chỉ sử dụng các kỹ thuật đã được cài đặt sẵn trên các máy tính hiện đại

- Thứ hai: gắn liền với web 2.0 là khái niệm điện toán đám mây

Theo wikipedia.org: “Điện toán đám mây là khái niệm tổng thể bao gồm cả các khái niệm như phần mềm dịch vụ, Web 2.0 và các vấn đề khác xuất hiện gần đây, các xu hướng công nghệ nổi bật, trong đó đề tài chủ yếu của nó là vấn đề dựa vào Internet để đáp ứng những nhu cầu điện toán của người dùng Ví dụ, dịch vụ Google App Engine cung cấp những ứng dụng kinh doanh trực tuyến thông thường,

có thể truy cập từ một trình duyệt web, còn các phần mềm và dữ liệu đều được lưu trữ trên các máy chủ.”

Vậy, để một Website hướng tới việc đạt chuẩn web 2.0, trước hết website đó phải được thiết kế theo hướng tương tác với người dùng, sử dụng kỹ thuật Ajax; Đồng thời, Website đó có thể sử dụng nền tảng điện toán đám mây

Tác giả luận văn xin đề xuất giải pháp: “Sử dụng công nghệ Google Web Toolkit và Google App Engine” để giải quyết hai vấn đề trên

2.1.2 Ngôn ngữ lập trình

Để lập trình web phía server, có thể kể đến một số ngôn ngữ: C#, Java, NET… Tuy nhiên, các ngôn ngữ này là các ngôn ngữ lập trình đa mục đích, có thể giải quyết nhiều loại vấn đề, nhiều dạng bài toán chứ không chỉ riêng ứng dụng web

Trong khi đó, ngôn ngữ PHP ra đời khoảng năm 1997, được thiết kế gần như tập trung vào web, làm sao nhanh chóng xây dựng được một website hoàn chỉnh nên khi thao tác, người phát triển web sẽ được tiếp xúc với những khái niệm gần với web nhất có thể Ngoài ra, lập trình viên cũng không cần phải cấu hình phức tạp hay cài đặt thêm công cụ hỗ trợ nào để viết mã như khi lập trình web trên một số ngôn ngữ khác

PHP là một ngôn ngữ kịch bản máy chủ (server-side) được sử dụng rộng rãi trên Internet - nó chạy trên 75% của tất cả các máy chủ Web - và là sức mạnh phía sau của các nền tảng như WordPress, Wikipedia, và thậm chí là một phần của Facebook

Ngôn ngữ lập trình PHP là một ngôn ngữ chạy trên máy chủ, mã của nó được

xử lý trước khi được trả về trình duyệt của người dùng, vì thế tất cả những gì chúng

ta nhìn thấy chỉ là mã HTML và không có chút mã PHP nguyên thủy nào PHP thường được sử dụng kết hợp với MySQL hoặc Google Cloud SQL để truy xuất thông tin từ cơ sở dữ liệu và hiển thị thông tin tới người dùng

PHP là một ngôn ngữ đa năng và được xem như là chuẩn của hầu hết các máy chủ web - trong các thuật ngữ như MAMP/WAMP/LAMP, thì chữ P trong đó là viết tắt của PHP (phần còn lại là Windows/Mac/Linux, Apache, và MySQL)

Ngôn ngữ PHP không ngừng được cải tiến Kể từ phiên bản PHP 5, PHP đã có

hỗ trợ lập trình hướng đối tượng và lập trình viên hoàn toàn có thể sử dụng mô hình MVC để xây dựng một website

2.1.3 Các vấn đề về giao diện

Thông thường, để viết một ứng dụng web, lập trình viên sẽ viết lẫn cả phần HTML với mã lệnh lập trình web trên một trang Điều này sẽ dẫn đến rất rối nhất là khi bảo trì; trong nhiều trường hợp, người viết chương trình và người bảo trì là khác nhau

Mặt khác, nhiều trang web có chức năng hoàn toàn tương tự nhau, chỉ khác giao diện Nếu lập trình theo cách trên thì sẽ phải viết lại hoàn toàn từ đầu, không

trình viên phải chờ người thiết kế giao diện cắt ra file HTML trước đã Tất cả những điều này sẽ làm giảm năng xuất công việc của lập trình viên đi rất nhiều

Với tốc độ tăng trưởng của các ứng dụng website phức tạp, một vấn đề đã được đưa ra là: làm thế nào để tách biệt riêng ngôn ngữ lập trình web ra khỏi ngôn ngữ thiết kế giao diện (HTML), hoặc nói chung là làm thế nào để phân cách bên lập trình ra riêng với bên thiết kế

Tác giả luận văn xin đề xuất giải pháp: “Sử dụng Smarty Template Engine”

để giải quyết vấn đề trên

2.1.4 Tích hợp phát triển ứng dụng web trên một website đã có sẵn

Hiện nay, trên thị trường web đã có rất nhiều sản phẩm CMS mang tính đóng gói và sẵn dùng Để tạo một trang web cá nhân, một Blog, người dùng có thể dùng các công cụ miễn phí mã nguồn mở như Wordpress, Joomla, Magento…; Chỉ với vài thao tác nhấn chuột ai cũng có thể tạo được một trang web với các yêu cầu cơ bản Đó là một xu hướng phát triển website rất phù hợp với nhu cầu bùng nổ thông tin hiện này và thực sự đã đem lại những thuận tiện và lợi ích không thể phủ nhận Tuy nhiên, cần xem xét tới mặt trái của giải pháp phát triển website bằng các công cụ CMS Với những website được xây dựng theo cách này tiềm ẩn vô số vấn

đề trong việc kiểm soát an toàn hệ thống và khả năng phát triển mở rộng trong tương lai Để mở rộng chức năng, người dùng chỉ có thể cài đặt và sử dụng các thành phần mở rộng (plug-in) Việc làm đó đôi khi không thực sự đem lại kết quả mong muốn Các plug-in muốn chạy được trên nền tảng đã có thì bắt buộc phải được thiết kế sao cho hệ thống cũ hiểu được, kiểm soát được Hay nói cách khác, các plug-in chịu sự chi phối của hệ thống ban đầu Do đó, đối với các yêu cầu phát triển hệ thống là phức tạp, dữ liệu lớn, đòi hỏi kết quả chính xác…, khi đó, việc dùng thêm các plug-in một mặt sẽ bị hạn chế rất nhiều, mặt khác, cần phải quan tâm đến việc xung đột plug-in mới với các plug-in đã có sẵn; hoặc khi nâng cấp hệ thống cũ lên một phiên bản cao hơn, các plug-in bổ sung phát sinh lỗi và không thể hoạt động được

Một trường hợp khác, người dùng đang sở hữu một website được xây từ đầu

mà không dùng tới các công cụ CMS Website này đang hoạt động rất ổn định và đáp ứng tốt các yêu cầu ban đầu đặt ra khi xây dựng website Hiện nay, người dùng

có nhu cầu phát triển thêm nhiều phân hệ quản lý trên nền website có sẵn nhưng vì các lý do khác nhau (thay đổi nhân sự, chuyển hướng kinh doanh, không đủ năng lực…), bên xây dựng web không thể đáp ứng được yêu cầu mới của khách hàng Trong trường hợp này, người dùng bắt buộc phải có một trong hai lựa chọn: xây dựng lại website từ đầu hoặc thuê đơn vị khác tích hợp phát triển trên nền website

đã có Trong đó, việc lựa chọn cách hai sẽ đem lại lợi ích về mặt kinh tế hơn, nhưng

sẽ phải đảm bảo không làm ảnh hưởng đến hệ thống cũ đang hoạt động tốt

Như vậy, trên thực tế, người xây dựng web cần có một công cụ phát triển ứng dụng có thể tích hợp một cách hiệu quả vào một hệ thống đã có sẵn mà không làm ảnh hưởng đến những chức năng của hệ thống đó

2.1.5 Đề xuất giải pháp giúp phát triển nhanh các website

Như đã trình bày ở các phần trên, xin được tóm lược các nhu cầu thực tế đối với việc xây dựng một ứng dụng web, đó là: Xu hướng phát triển công nghệ web 2.0, kỹ thuật Ajax, nền tảng điện toán đám mây; Xử lý các vấn đề về giao diện một cách hiệu quả và khoa học; Có khả năng tích hợp vào một hệ thống website đã có sẵn

2.2 Các công nghệ áp dụng

2.2.1 Công nghệ Google Web Toolkit (GWT)

Google Web Toolkit (GWT) là một giải pháp khá toàn diện cho Java developer để xây dựng các ứng dụng AJAX mà không cần phải biết quá nhiều ngôn ngữ lập trình Người dùng GWT cũng không cần lo lắng việc ứng dựng Web của mình sẽ hiển thị trên các trình duyệt khác nhau thế nào Theo tác giả Prabhakar

Chaganti (2007, Google Web Toolkit: GWT Java Ajax Programming): “The Google

Web Toolkit (GWT) makes it even easier to design an AJAX application using just

and its best feature is that we don't have to worry too much about incompatibilities between web browsers and platforms.” Mặt khác, GWT có thể debug (gỡ lỗi) - một lợi thế rất lớn vì bản thân Javascript không có chế độ debug, khiến cho rất khó khăn để xác định được vị trí lỗi trong những dòng code JS đồ sộ Theo trang Web

www.gwtproject.org: “You can debug AJAX applications in your favorite IDE just

like you would a desktop application, and in your favorite browser ”

2.2.1.1 Khái niệm GWT

GWT là một Java framework mã nguồn mở cho phép lập trình viên thoát khỏi

ma trận các công nghệ để viết các ứng dụng AJAX quá khó khăn và nhiều lỗi Với GWT, các developer có thể phát triển và kiểm tra lỗi các ứng dụng AJAX bằng ngôn ngữ Java, sử dụng các công cụ phát triển Java tuỳ theo ý thích Khi triển khai ứng dụng, bộ biên dịch của GWT sẽ dịch ứng dụng từ Java sang Javascript và HTML GWT nhấn mạnh đến tính tái sử dụng, những giải pháp hiệu quả để chống lại những thách thức mà AJAX gặp phải Và kết quả của việc sử dụng GWT theo

tác giả Ryan Dewsbury (2007, Google Web Toolkit Applications): “As a result, you

will save a substantial amount of time debugging and maintaining the application while creating a much better user experience.”.

Một ứng dụng GWT có thể chạy theo 2 cách: Hosted mode (Ứng dụng sẽ chạy như một ứng dụng Java với JVM Cách này chỉ sử dụng cho developer) và Web mode (Ứng dụng là Javascript và HTML thuần, được biên dịch ra từ các đoạn code Java Cách này là dành cho người sử dụng)

2.2.1.2 Các thành phần của GWT

Thành phần thứ nhất của GWT là “Bộ biên dịch Java-to-Javascript” Thành phần này dùng để dịch tất cả các mã nguồn Java của ứng dụng GWT sang code Javascript và HTML

Thành phần thứ hai của GWT là “Trình duyệt dành cho Hosted Mode” Thành phần này dùng để các developer chạy ứng dụng GWT bằng hosted mode (sử dụng với JVM)

Thành phần thứ ba của GWT là “Thư viện JRE” Thành phần này gồm hai thư viện chuẩn của Java được sử dụng trong GWT là java.lang và java.util

Thành phần thứ tư của GWT là “Các thư viện của GWT để thiết kế giao diện” Thành phần này là các giao diện và các lớp được tạo sẵn hoặc do người dùng tự tạo, dùng để tạo các đối tượng AJAX bằng Java trong các ứng dụng GWT Chúng còn được gọi là các widgets

2.2.2 Công nghệ Google App Engine

2.2.2.1 Khái niệm Google App Engine

Google App Engine (gọi tắt là GAE hay App Engine) là một môi trường phát triển ứng dụng dựa trên công nghệ điện toán đám mây Ở đó Google cung cấp một

hệ thống gồm: ngôn ngữ lập trình, hệ cơ sở dữ liệu, các thư viện lập trình, người lập trình sẽ viết ứng dụng và ứng dụng này sẽ chạy trên các máy chủ của Google Google App Engine được cung cấp miến phí cho mỗi ứng dụng trong một giới hạn, khi các ứng dụng vượt qua mức quá hạn mức thì phải trả thêm khoản phí cho mức vượt quá này Điều này đặc biệt có ý nghĩa với các Doanh nghiệp nhỏ hoặc

mới thành lập Theo tác giả Dan Sanderson (2012, Programming Google App

Engine): “… if you’re a small company just starting out, your hardware and software aren’t likely to be able to handle that kind of traffic Chances are, you’ve sensibly built your site to handle the 30,000 visits per hour you’re actually expecting in your first 6 months Under heavy load, such a system would be incapable of showing even your company logo to the 270,000 others that showed up

to look around And those potential customers are not likely to come back after the traffic has subsided.”

Google App Engine cho phép bạn chạy các ứng dụng web trên cơ sở hạ tầng của Google App ứng dụng công cụ dễ dàng để xây dựng, dễ bảo trì, dễ dàng để quy

mô như lưu lượng truy cập của bạn và nhu cầu lưu trữ dữ liệu lớn Với App Engine, không có máy chủ để duy trì: người dùng chỉ cần tải ứng dụng lên là ứng dụng đó

đã ở trạng thái sẵn sàng hoạt động

Google App Engine có thể phục vụ cho ứng dụng theo tên miền mà người dùng đã có trước (chẳng hạn như http://www.example.com/) hoặc sử dụng một tên miễn phí mặc định có dạng http://www.example.appspot.com Với Google App Engin, người dùng có quyền lựa chọn việc chia sẻ các ứng dụng với toàn thế giới hoặc giới hạn truy cập cho một nhóm người dùng nhất định

Google App Engine hỗ trợ các ứng dụng viết bằng một số ngôn ngữ lập trình Với môi trường thời gian chạy Java App Engine, các lập trình viên có thể xây dựng ứng dụng bằng cách sử dụng tiêu chuẩn công nghệ Java, bao gồm JVM, Java servlet, và lập trình ngôn ngữ Java hoặc bất kỳ ngôn ngữ khác bằng cách sử dụng một thông dịch viên dựa trên JVM hoặc trình biên dịch, chẳng hạn như JavaScript hoặc Ruby App Engine cũng cung cấp môi trường Python runtime, thông dịch Python và thư viện chuẩn của ngôn ngữ Python Và tất nhiên, App Engine cung cấp một môi trường runtime cho ngôn ngữ lập trình Go – một ngôn ngữ lập trình mới do Google thiết kế Gần đây nhất, Google App Engine đã hỗ trợ ngôn ngữ lập trình PHP với cơ sở dữ liệu Google Cloud Sql Các môi trường phát triển ứng dụng được xây dựng để đảm bảo rằng các ứng dụng hoạt động một cách nhanh chóng, an toàn,

và không có sự can thiệp từ các ứng dụng khác trên hệ thống

Với App Engine, người dùng chỉ phải trả cho những gì mình sử dụng Không

có phí thiết lập khởi tạo dịch vụ và không có phí định kỳ Các nguồn tài nguyên ứng dụng cần sử dụng như dung lượng lưu trữ và băng thông, được đo bằng gigabyte, và được lập hoá đơn thanh toán với mức giá cạnh tranh Người dùng có thể thiết lập giới hạn tối đa các chi phí mà ứng dụng có thể tiêu thụ Do đó, chi phí cho việc sử dụng dịch vụ luôn luôn nằm trong phạm vi ngân sách của người dùng

Để bắt đầu sử dụng App Engine, các ứng dụng có thể sử dụng lên đến 1 GB dung lượng lưu trữ; nhà cung cấp dịch vụ đảm bảo cấp đủ CPU và băng thông để hỗ trợ một ứng dụng có thể phục vụ cho khoảng 5 triệu lượt xem một tháng, hoàn toàn miễn phí Khi người dùng kích hoạt tính năng thanh toán cho các ứng dụng của mình, giới hạn miễn phí cũng đồng thời được nâng lên, và người dùng chỉ phải trả tiền cho lượng tài nguyên sử dụng vượt quá giới hạn miễn phí

Khi đánh giá thứ hạng, các website dùng Google App Engine cũng được đánh giá cao hơn Việc search từ khóa trên Google cũng sẽ có nhiều lợi thế hơn so với các website không dùng hosting Google cung cấp

2.2.2.2 Môi trường ứng dụng

Sử dụng Google App Engine, người dùng dễ dàng để xây dựng một ứng dụng hoạt động ổn định Và đặt biệt hiệu quả đối với các ứng dụng phức tạp, dữ liệu lớn App Engine có thể phục vụ web động, với sự hỗ trợ đầy đủ cho các công nghệ web phổ biến; có thể lưu trữ liên tục với các truy vấn phân loại, và các giao dịch; có thể

tự động mở rộng quy mô và cân bằng tải dữ liệu App Engine cung cấp các API để xác thực người sử dụng và gửi email bằng cách sử dụng Tài khoản Google; cung cấp đầy đủ tính năng phát triển ứng dụng trong môi trường mô phỏng Google App Engine trên máy tính cá nhân; xử lý tốt các tác vụ hàng đợi trong trường hợp người dùng gửi tới ứng dụng nhiều yêu cầu trong một thời điểm; Cung cấp thời gian dự kiến sẽ kích hoạt các sự kiện và thời gian mà sự kiện đó sẽ kết thúc

2.2.2.3 Giới hạn

Khi mới ra đời, App Engine hỗ trợ 2 loại ngôn ngữ chính là: Python và Java Hiện tại đã có hỗ trợ thêm ngôn ngữ Go và ngôn ngữ lập trình PHP

Khi sử dụng App Engine, các nhà phát triển Web cần lưu ý các giới hạn của

nó Giới hạn đó bao gồm: Các tệp tin khi lưu trữ lên App Engine chỉ có thể đọc-xóa (không sửa chữa); App Engine chỉ có thể chạy qua các yêu cầu HTTP (các dịch vụ khác có thể chạy lệnh qua Console terminal); Các ứng dụng dùng python có thể sử dụng các thư viện python ngoài các thư viện được cung cấp bởi App Engine nhưng phải là các thư viện viết bằng python C và Pyrex không được hỗ trợ; Các ứng dụng java chỉ sử dụng được tập các lớp viết từ JRE tiêu chuẩn(The JRE Class White List); Không hỗ trợ tên miền không có tiền tố www Ví dụ http://example.com sẽ không chạy trên App Engine mà phải là http://www.example.com; Datastore không lọc (filter) được hai thuộc tính cùng một lúc, ví dụ age > 4 and age < 10

2.2.2.4 Sự khác biệt với các dịch vụ khác

So với các dịch vụ điện toán đám mây khác như Amazon EC2, hoặc với các hình thức viết trên các máy chủ truyền thống, App Engine cung cấp một môi trường thuận lợi hơn Đặc biệt, Google App Engine đáp ứng tốt cho các ứng dụng

có dành cho nhiều người dùng truy cập đồng thời Nhưng điểm giới hạn là phải viết trên các dịch vụ mà App Engine cung cấp App Engine giải quyết các khó khăn trong việc phát triển và quản trị hệ thống khi xây dựng một ứng dụng lớn cỡ hàng trăm yêu cầu trên giây

Khi các mô hình khác yêu cầu người dùng cài đặt và thiết lập cấu hình thì App Engine chỉ cần một màn hình quản trị để quản trị cũng như mở rộng hay thu nhỏ mức cung ứng dịch vụ

2.2.3 PHP hướng đối tượng và Mô hình MVC

Như chúng ta đã biết, PHP là ngôn ngữ lập trình “sinh ra để làm web” Ban đầu, khi mới ra đời, PHP sử dụng phương pháp lập trình truyền thống hướng thủ tục hoặc hướng module Theo tác giả David Powers (2008, PHP Object-Oriented

Solutions): “PHP (PHP Hypertext Preprocessor) is not an object-oriented

language, but it does have extensive object-oriented features.”.

Tuy nhiên phương pháp lập trình truyền thống có một số vấn đề như: Không quản lý được dòng code khi có sự thay đổi chương trình, có nhiều chương trình cùng sử dụng một biến chung nên rất nguy hiểm khi chương trình ngày càng lớn; Không tiết kiệm được tài nguyên con người và tài nguyên hệ thống, giải thuật gắn liền với dữ liệu nên khi thay đổi dữ liệu thì giải thuật buộc phải thay đổi theo; Dữ liệu không bị che dấu cần là dùng nên không có tính bảo mật

Để khắc phục những hạn chế đó khi giải quyết các bài toán lớn, người ta xây dựng một phương pháp tiếp cận mới, đó là phương pháp lập trình hướng đối tượng trong ngôn ngữ PHP Theo tác giả David Powers (2008, PHP Object-Oriented

Solutions):“These underwent comprehensive revision and enhancement when PHP

5 was released in July 2004, and the PHP 5 object-oriented programming (OOP) model remains essentially unchanged in PHP 6.”

2.2.3.1 PHP hướng đối tượng

Lập trình hướng đối tượng là một phương pháp viết mã cho phép các lập trình viên nhóm các hành động (action) tượng tự nhau vào các class (lớp) Hay nói cách khác, hướng đối tượng giữ các đối tượng như các thực thể riêng biệt, nhờ đó làm cho việc tách mã lệnh thành các phần nhỏ khác nhau mà vẫn giữ được mối liên hệ nhất định giữa chúng một cách dễ dàng Điều này giúp mã lệnh giữ vững được nguyên lý “không lặp lại chính nó” và dễ dàng để bảo trì

Một lợi ích to lớn của nguyên lý lập trình DRY là: nếu một phần thông tin nào

đó được thay đổi trong chương trình, thì thông thường chỉ cần có duy nhất 1 thay đổi để cập nhật lại mã lệnh Một trong những yêu cầu căng thẳng nhất đối với các lập trình viên là bảo trì mã lệnh, nơi dữ liệu được khai báo đi khai báo lại nhiều lần,

họ phải tìm kiếm, làm việc trên các dữ liệu và chức năng trùng lặp

Lập trình hướng đối tượng trong PHP lấy đối tượng là nền tảng, tìm những đối tượng có sẵn hoặc xây dựng những đối tượng, sau đó kết hợp với nhau để giải quyết vấn đề PHP hướng đối tượng thực hiện xây dựng những đối tượng trong mã lệnh

có liên hệ khăng khít với đối tượng của thế giới thực

Ví dụ: Game bóng đá là một chương trình rất lớn, chắc chắn phải xây dựng nó trên mô hình hướng đối tượng Vậy việc đầu tiên của trước khi xây dựng game này chúng ta cần xác định các đối tượng chính của game Những đối tượng chính của game có thể dễ dàng nhìn thấy như: Câu lạc bộ, Sân vận động, Giải thi đấu, Cầu thủ, Huấn luyện viên, Cổ động viên…Như vậy, trong một ứng dụng lớn như game bóng đá, chúng ta đã thấy xuất hiện rất nhiều đối tượng Chúng ta sẽ phân tích thử một đối tượng trong game đó là đối tượng con người Con người là một lớp chính trong game Từ đối tượng ‘con người’ chúng ta sẽ mở rộng ra các đối khác như cầu thủ, trọng tài, huấn luyện viên, cổ động viên…

Với cách phân tích như trên sẽ đơn giản hóa việc phát triển các chương trình

và giúp tạo ra những chương trình có tính mềm dẻo và linh động cao (Khi sửa chữa bảo trì, nâng cấp dể dàng)

Trong mô hình MVC, các thành phần của mô hình này bao gồm Model, View

và Controller Theo tác giả Chris Pitt (2012, Pro PHP MVC): “MVC

(Model-View-Controller) is a software design pattern built around the interconnection of three main component types, in a programming language such as PHP, often with a strong focus on object-oriented programming (OOP) software paradigms The three component types are loosely termed models, views, and controllers.”.

Nhiệm vụ của các thành phần này như sau:

Model: có nhiệm vụ thao tác với cơ sở dữ liệu, nghĩa là nó sẽ chứa tất cả các hàm, các phương thức truy vấn trực tiếp với dữ liệu và controller sẽ thông qua các hàm, phương thức đó để lấy dữ liệu rồi gửi qua View

View: có nhiệm vụ tiếp nhận dữ liệu từ controller và hiển thị nội dung sang các đoạn mã HTML Thành phần view chính là thành phần giao diện của website sau khi đã được xử lý phía server

Controller: đóng vài trò trung gian giữa Model và View Nó có nhiệm vụ tiếp nhận yêu cầu từ client sau đó xử lý request, load model và view tương ứng, sau đó trộn kết quả của hai thành phần (model và view) rồi trả kết quả về cho client

Ưu điểm và nhược điểm mô hình MVC:

Mô hình MVC có các ưu điểm: Hệ thống phân ra từng phần nên dễ dàng phát triển; Chia thành nhiều module nhỏ nên nhiều người có thể làm chung dự án; Bảo trì thuận tiện, dễ dàng nâng cấp hệ thống; Dễ dàng debug trong quá trình xây dựng Bên cạnh đó, nhà phát triển Web cần nắm được các nhược điểm của MVC Đó là: Hệ thống sẽ chạy chậm hơn PHP thuần; Xây dựng cầu kì và mất thời gian để xây

dựng thư viện, cấu trúc Như vậy, khi so sánh ưu điểm và nhược điểm của mô hình MVC, chúng ta dễ dàng nhận thấy nhược điểm là không đáng kể so với những ưu điểm nêu trên

2.2.4 Smarty Template Engine

Chức năng cơ bản của Template engine được biết đến như một kỹ thuật xử lý giao diện của website bằng cách phân chia công việc giữa lập trình viên và thiết kế viên mà vẫn có sự liên kết chặt chẽ Theo trang Web www.smarty.net/docsv2/en/

thì:“ Smarty is a template engine for PHP More specifically, it facilitates a

manageable way to separate application logic and content from its presentation This is best described in a situation where the application programmer and the template designer play different roles, or in most cases are not the same person.”

Designer là người vẽ lên diện mạo cho từng web-page với hình ảnh, phong cách văn bản… Họ xây dựng các template làm sao để có thể sắp xếp nội dung trong mỗi trang Công việc của các designer chỉ là thiết kế giao diện cho các thành phần của website như: tin tức, sản phẩm…

Programmer - các lập trình viên sử dụng ngôn ngữ lập trình web (ví dụ: PHP)

để thao tác dữ liệu Programmer là người thực hiện các thao tác truy vấn dữ liệu, truyền dữ liệu đó dưới dạng các biến tới giao diện (template) Và họ có thể không cần bận tâm đến việc website được trông như thế nào (màu sắc, hình ảnh, phong cách văn bản), hoặc nơi mà nội dung được trình bày lên website là ở đâu Tất cả những việc họ cần làm là tham chiếu đến nội dung của Template bằng cách sử dụng các biến mà họ thỏa thuận với thiết kế viên

Nhờ có Template Engine, mã lập trình và giao diện website sẽ được tách riêng

ra để có thể thiết kế và sửa đổi một cách độc lập Điều đó có tác dụng giúp lập trình viên và thiết kế viên có thể làm việc với nhau mà không phải can thiệp vào công việc của nhau Trách nhiệm có thể được phân chia rõ ràng Mặt khác, sau khi sản phẩm được hoàn tất, giao diện website có thể được sửa đổi tại một thời điểm sau này, mà không làm ảnh hưởng đến mã lập trình Khi sử dụng Template Engine, các

nhà phát triển Web có thể thiết kế Website đa ngôn ngữ một cách dễ dàng Smarty

là một Template Engine mạnh mẽ và rất được ưa chuộng

2.2.4.1 Khái niệm Smarty

Smarty là một hệ thống tạo mẫu web (web template system) được viết trên nền

PHP Theo tác giả Lucian Gheorghe (2006, Smarty PHP Template Programming

and Applications) thì: “PHP has been one of the best choices for web developers being the most complete open-source web programming language With growth of the complexity of PHP applications, a new problem that was raised was, how to separate programmers' code (PHP) from designers' code (HTML), or better phrased, how to separate the content from presentation Smarty, a PHP templating system, was born to solve this problem ”.

Smarty hoạt động như là một công cụ cho việc chia nhỏ các quá trình thiết kế trang Web Đây là một chiến lược thiết kế cho các ứng dụng web hiện đại Smarty tạo ra các nội dung web từ việc đánh dấu các vị trí đặc biệt được gọi là smarty tag Các tag này được nằm trong các mẫu (template HTML) trên Frontend Các tag này

sẽ được xử lý và chèn vào đó các giá trị lấy ra từ các biến trong Backend

2.2.4.2 Tốc độ xử lý của website có sử dụng Smarty

Mặc dù khi sử dụng Smarty Template Engine sẽ làm tăng thêm một công đoạn trong quá trình xử lý, thay vì load trực tiếp một trang PHP Tuy nhiên, Smarty chỉ thực hiện biên dịch (compile) file template thành file PHP khi chạy lần đầu tiên, hoặc sau khi template được update Bên cạnh đó, Smarty cũng hỗ trợ sử dụng bộ nhớ đệm (built-in cache), giúp cải thiện tốc độ load web-page Theo tác giả Lucian

Gheorghe (2006, Smarty PHP Template Programming and Applications): “Caching

is a technique that is used very frequently by programmers to avoid calculating or generating the same output repeatedly Instead, function results or even output are recorded and saved for later reuse ”.

2.2.4.4 Những tính năng của Smarty

Tính năng thứ nhất của Smarty là Variable Modifiers (Tùy chỉnh việc hiển thị của biến) Ví dụ: Khi programmer truy vấn dữ liệu xong và truyền tới template, Smarty có thể hiển thị dữ liệu đó tùy theo mốc thời gian hoặc đối tượng truy cập Một trường hợp khác, biến là một chuỗi ký tự (string), designer dùng Smarty chỉnh sửa style cho chúng, hoặc cắt, ghép …Hay khi biến là có dạng date-time, designer

có thể hiển thị với nhiều định dạng khác nhau như d/m/y – m/d/y, …

Tính năng thứ hai của Smarty là Template Functions (hàm giao diện) Nếu phải tạo một form lớn với nhiều dropbox control và sử dụng PHP thuần, lập trình viên sẽ phải tạo nhiều khối thẻ lập đi lập lại Nhưng với Template Functions, chúng

ta có thể định nghĩa một function sinh ra dropbox control và có thể tái sử dụng chúng bằng cách gọi function đó Điều này sẽ tiết kiệm thời gian viết code, và thuận tiện cho việc sửa chữa, nâng cấp

Tính năng thứ ba của Smarty là Debugging (gỡ lỗi) Smarty cung cấp công cụ debug mạnh mẽ Giúp chúng ta kiểm xoát được chính xác những gì đang xảy ra tại template Từ đó phát hiện và khắc phục những sai xót phát sinh

Tính năng thứ tư của Smarty là tạo và sử dụng Plug-ins Smarty cho phép viết xây dựng các Plugin, và tái sử dụng chúng trong nhiều dự án khác nhau Việc tái sử dụng code ở đây không đơn giản là copy lại đoạn code cũ, sửa tên biến, bổ sung một vài chức năng Một plugin cho Smarty là một khối code luôn trong trạng thái sẵn sàng được tái sử dụng mà không phải chỉnh sửa mã nguồn Smarty Plug-ins: có

nhiều loại như functions, compiler functions, block functions, modifiers, resources, inserts, prefilters, postfilters, and output filters

Tính năng thứ năm của Smarty là Filters (bộ lọc dữ liệu) Với tính năng filter,

ta có thể can thiệp chỉnh sửa vào dữ liệu trước hoặc sau khi chúng được biên dịch (compile)

2.2.5 Website Framewok

2.2.5.1 Software Framework - Khung làm việc của phần mềm

Trong lĩnh vực lập trình, một “Framework” là một khái niệm trừu tượng, trong

đó hệ thống phần mềm được “Framework” cung cấp các chức năng chung Các chức năng này có thể được tùy biến bởi lập trình viên khi sử dụng “Framework” bằng cách xây dựng các phần mở rộng, các lớp kế thừa Framework quy định các yêu cầu bắt buộc đối với các phần mở rộng này

Phân biệt với khái niệm thư viện mã lệnh thông thường, “Framework”có bốn đặc điểm sau:

Thứ nhất, Framework thực hiện “Quy trình điều khiển đảo ngược” Không

giống như khi sử dụng thư viện hoặc các ứng dụng được lập trình theo cách thông thường, trong một hệ thống sử dụng “Framework”, việc kiểm soát các luồng thông tin không được quyết định bởi người dùng mà do “Framework”quyết định

Thứ hai, “Framework”có một số hành vi mặc định có ích Ví dụ: tự động gọi

hàm, tự động kết nối cơ sở dữ liệu, tự động tạo phiên làm việc…

Thứ ba, “Framework”có thể được mở rộng bởi người sử dụng để tạo ra các

chức năng cụ thể Điều này nhấn mạnh tới việc ghi đè ở các lớp kế thừa khi tạo các chức năng nghiệp vụ của ứng dụng

Thứ tư, Mã code trong lõi “framework” là không thay đổi: Nói chung, người

dùng có thể phát triển mở rộng ứng dụng, nhưng không nên thay đổi mã trong thành phần lõi “framework”

2.2.5.2 Website framework - Khung làm việc của website

“Website framework” là một trường hợp riêng của “framework” “Website framework” được thiết kế để hỗ trợ sự phát triển của các trang web động, các ứng dụng web hoặc web services Sử dụng các “framework” nhằm giảm việc phải lặp đi lặp lại các theo tác cơ bản trong phát triển Web: cung cấp các thư viện để truy cập

cơ sở dữ liệu (thêm, sửa, xóa, xem danh sách, tìm kiếm), các khung giao diện (templating) và quản lý phiên làm việc “Website framework” chú trọng tới việc tái

sử dụng mã Để làm được điều đó, Website framework thường được xây dựng dựa

trên mô hình MVC và sử dụng lập trình hướng đối tượng

CHƯƠNG 3: XÂY DỰNG FRAMEWORK GIÚP PHÁT TRIỂN NHANH

CÁC WEBSITE

Trong chương này, tác giả luận văn sẽ trình bày mô hình và cách thức để tạo

ra một Website framework Để tiện cho việc theo dõi, framework trong luận văn được đặt tên là Ligker framework

3.1 Thiết kế kiến trúc Ligker framework

Trong phần này, tác giả luận văn sẽ trình bày các vấn đề về kiến trúc của Ligker framework Các vấn đề đó bao gồm: Các thành phần của Ligker framework (Front Controller - bộ phận xử lý đầu vào, Core layer - lớp lõi, Application Layer - lớp ứng dụng); Quan hệ kế thừa của các thành phần trong Ligker framework; Nguyên lý hoạt động của Ligker framework; Mối quan hệ Page - Position - Module trong Ligker framework; Cấu trúc thư mục của Ligker framework Hình 3.1 dưới đây là thể hiện một cách tổng quát các vấn đề nêu trên

Hình 3.1: Sơ đồ tổng quát mô tả các thành phần

và nguyên lý hoạt động của Ligker framework

3.1.1 Các thành phần của Ligker framework

3.1.1.1 Front Controller - bộ phận xử lý đầu vào

Bộ phận này có nhiệm vụ tiếp nhận yêu cầu từ trình duyệt, Rewrite URL (chuyển dạng địa chỉ), nạp các thông tin cấu hình sau đó chuyển tiếp yêu cầu vào Core layer (lớp lõi của framework)

3.1.1.2 Core Layer - lớp lõi

Thành phần này thực hiện nhiệm vụ chính của hệ thống: Xử lý, quy định về phân luồng thông tin; Cung cấp thư viện mặc định của hệ thống; Cung cấp các phương thức chung, cơ bản nhất của hệ thống: đọc, thêm, sửa, xóa, tìm kiếm, phân trang, hỗ trợ tạo mã sql khi truy vấn cơ sở dữ liệu, mã hóa/giải mã, tự động tải class, thay đổi kích thước file ảnh, hỗ trợ website đa ngôn ngữ, trang Admin mặc định cho

hệ thống, tạo cache, lấy thông tin địa lý của người truy cập : quốc gia, thành phố, bang, tọa độ của thành phố Core Layer cung cấp một hàm call_controller() để các controller gọi lẫn nhau thông qua main.php và Router

Lớp Core Layer là thành phần quan trọng nhất của toàn bộ hệ thống Lớp quy định “Khung làm việc” cho các thành phần còn lại của Ligker framework; Core layer thực hiện chuẩn hóa việc truy xuất cơ sở dữ liệu, ngăn chặn mọi thao tác không hợp lệ bằng cách tạo một “cổng” duy nhất cho dữ liệu vào - ra

Để tạo ra khung làm việc cho toàn hệ thống, Core layer thực hiện nhiệm vụ đó thông qua file main.php và router.php Hai file này có nhiệm vụ:

- Gọi các file Core functions trong Core layer;

- Gọi các file Base functions trong Application layer;

- Kiểm tra request gửi tới từ trình duyệt:

+ Nếu request yêu cầu gọi một controller và có action xác định, file main.php tiếp tục gọi các file MVC trong Application layer tương ứng Tiếp đó, gọi method trong controller của lớp ứng dụng đó, tên của method này là tham số action đầu vào

Ví dụ: request là: http://ligker.net/index.php?controller=book&action=get_list Khi đó, file main.php sẽ gọi method là Book_Controller ::get_list Trong đó

+ Nếu resquest yêu cầu 1 trang (Page), file main.php tiếp tục gọi lớp base_page, sau đó trả về 1 trang theo như yêu cầu đầu vào Điều này sẽ được giải

thích rõ hơn trong phần 3.1.3 Nguyên lý hoạt động của Ligker framework và 3.1.4

Mối quan hệ Page - Position - Module trong Ligker framework

Trong cả 2 trường hợp trên, file main.php đã nạp đầy đủ 2 thành phần Core functions và Base functions trước khi gọi lớp ứng dụng MVC trong Application layer Đây là một quy trình bắt buộc và “trong suốt” đối với các lập trình viên Coder chỉ cần quan tâm đến lớp ứng dụng, tập trung vào công việc của mình, không cần quan tâm đến việc gọi các lớp ở mức thấp hơn đã diễn ra thế nào

Phần Core layer do tác giả luận văn tạo dựng, và tác giả sẽ là người thực hiện thay đổi, nâng cấp nếu cần thiết Việc nâng cấp Core layer bao gồm việc bổ sung method trong Core functions và Default Library

3.1.1.3 Application Layer - lớp ứng dụng

Lớp này bao gồm các thành phần thực hiện chức năng cụ thể của dự án:

- PAGE: các trang của website Mỗi Page bao gồm nhiều Position - vị trí (ví dụ: banner, main_menu, left_menu, right_content…) Mỗi vị trí bao gồm nhiều module (ví dụ: module Đăng nhập, module Tin tức) Mỗi module sẽ gọi tới một action - hành động cụ thể trong hệ thống;

- Library - thư viện của ứng dụng web Phần này bao gồm các template (HTML, CSS, JS…), Google Web Toolkit dành riêng cho ứng dụng

- Thành phần MVC (Model - View - Controller): thực hiện các Action (hành động cụ thể) khi có yêu cầu (request) từ trình duyệt hoặc lời gọi từ thành phần PAGE Phần này do các lập trình viên (coder) tham gia xây dựng

- Base functions: bao gồm các phương thức cơ sở Phần này do người đứng đầu dự án (Project Leader) thực hiện viết code

3.1.1.4 Database - cơ sở dữ liệu

Ligker framework hỗ trợ sử dụng cơ sở dữ liệu MySql trên máy chủ truyền thống hoặc Google Cloud Sql trên nền tảng Google App Engine

3.1.2 Quan hệ kế thừa của các thành phần trong Ligker framework

Hình 3.2: Mô tả quan hệ kế thừa của các thành phần trong hệ thống

3.1.2.2 Sử dụng quan hệ kế thừa để áp dụng Core functions cho nhiều dự án

Hình 3.3: Minh họa việc sử dụng Core functions cho nhiều dự án

Hình 3.3 mô tả việc sử dụng Core functions của Ligker framework cho nhiều Project đặt chung trên một Server Chẳng hạn, Class 1.1 kế thừa Base Functions 1, mặt khác Class 1.1 và Base Functions 1 đều được thiết kế theo mô hình MVC Đi sâu vào chi tiết bên trong của quan hệ kế thừa này, chúng ta sẽ có các đặc tả cho từng Class Ví dụ: ta có thể đặc tả Class 1.1 như hình 3.4 dưới đây :

Hình 3.4: Đặc tả quan hệ kế thừa của Class_1.1 với base functions và Core functions

3.1.3 Nguyên lý hoạt động của Ligker framework

Hình 3.5: luồng thông tin trong Ligker framework

3.1.3.1 Luồng thông tin trong Ligker framework

Quá trình hoạt động, điều khiển luồng thông tin được mô tả trong hình 3.5 Quá trình này gồm 5 chặng:

Chặng 1: Từ trình duyệt, người dùng gửi request (yêu cầu) tới Webserver (ký

hiệu B1 trên hình 3.5)

Chặng 2: Bộ phận Front Controller trên Webserver tiếp nhận yêu cầu từ trình

duyệt, tiến hành Rewrite URL theo thiết lập trên file htaccess (hoặc app.yaml nếu

sử dụng Google App Engine) Tiếp đó đến lượt file index.php xử lý thông tin, nạp các thông số thiết lập cấu hình từ file config.php File index.php tiếp tục gửi thông tin vào file main.php trong core hệ thống (ký hiệu I1 trên hình 3.5)

Chặng 3: File main.php sử dụng Router để kiểm tra request từ trình duyệt (ký

hiệu M1 trên hình 3.5):

- Trường hợp 1: request có dạng: index.php?controller=c_1&action=a_1 Khi

đó, căn cứ vào tham số đầu vào (controller=c_1&action=a-1), Router tiến hành đọc

nội dung code của các thành phần [c_1] (controller), [m_1] (model), [v_1] (view) tương ứng trong thành phần MVC của Application Layer:

+ Tình huống 1.1: nếu các file chứa [c_1], [m_1], [v_1] có chứa các từ khóa

include, require , INSERT, UPDATE, SELECT, (sẽ có một bộ keyword cho phần này) thì trả về main.php thông báo lỗi (ký hiệu R1 trên hình 3.5);

+ Tình huống 1.2: nếu các file chứa [c_1], [m_1], [v_1] thỏa mãn việc không

chứa các từ khóa bị cấm, file main.php sẽ include các file chứa [c_1], [m_1], [v_1]

và tiến hành gọi tới controller=c_1&action=a_1 trong MVC của Application Layer (ký hiệu R2 trên hình 3.5) Các thao tác tiếp theo thực hiện trong mô hình MVC của

Application layer (xin xem chi tiết trong phần 3.1.3.2 Đặc tả luồng thông tin trong

mô hình MVC của Application layer) và trả kết quả về file main.php (ký hiệu

MVC1 trên hình 3.5)

- Trường hợp 2: request có dạng: index.php?page=page_1 (ký hiệu R3 trên

hình 3.5) Trong trường hợp này, Router sẽ gửi thông tin đến thành phần Cache để kiểm tra đã có file cache page_1 trong bộ nhớ đệm chưa?

+ Tình huống 2.1: Nếu trong bộ nhớ đệm đã có file cache page_1: cache sẽ trả

kết quả về main.php (ký hiệu C1 trên hình 3.5)

+ Tình huống 2.2: Nếu trong bộ nhớ đệm chưa có các file cache tương ứng:

Router sẽ gọi đến thành phần PAGE (ký hiệu C2 trên hình 3.5) PAGE nhận request, trả về main.php yêu cầu gọi các module cần thiết (ký hiệu P1 trên hình 3.5)

Một PAGE có thể gọi nhiều module khác nhau (xin xem chi tiết trong phần 3.1.4

Mối quan hệ Page - Position - Module trong Ligker framework) Do đó, nếu PAGE

yêu cầu n module, Router sẽ thực hiện gọi n lần các module đó thông qua request có dạng index.php?controller=c_i&action=a_i (i chạy từ 1 đến n) Tức là sẽ lặp lại n

lần Trường hợp 1 nêu ở trên

Kết thúc Chặng 3, kết quả của 2 trường hợp đều hội tụ thông tin về file

main.php

Chặng 4: file main.php sẽ căn cứ theo các thông số cấu hình hệ thống (file

config.php) để quyết định có lưu 1 bản cache vào bộ nhớ đệm hay không (ký hiệu

M2 trên hình 3.5) Sau đó, main.php trả kết quả về file index.php (ký hiệu M3 trên hình 3.5)

Chặng 5: file index.php trả kết quả cuối cùng về trình duyệt (ký hiệu I2 trên

hình 3.5)

3.1.3.2 Đặc tả luồng thông tin trong mô hình MVC của Application layer

Từ sơ đồ tổng quát Hình 3.5 ở trên, phân tích chi tiết Chặng 3 - trường hợp 1 - tình huống 1.2 (tương ứng với các ký hiệu R2, MVC1 trên hình 3.5), chúng ta đặc tả luồng thông tin hoạt động trong mô hình MVC của Application layer sẽ có sơ đồ như hình 3.6 dưới đây:

Hình 3.6: Luồng thông tin trong mô hình MVC

Ở đây, ta xem xét quá trình Router tiếp nhận yêu cầu từ trình duyệt và chuyển tiếp tới Controller xử lý:

- Controller tiếp nhận yêu cầu từ Router, gọi đồng thời tới các Model và View tương ứng

- Model nhận yêu cầu từ controller, tiến hành thực hiện truy vấn cơ sở dữ liệu, lấy ra dữ liệu theo yêu cầu, trả kết quả về controller

- View gọi các file HTML cần thiết,

- Controller trộn 2 thành phần: dữ liệu (lấy từ model) và HTML (lấy từ view) thành kết quả trả lại Router

Trong quá trình xây dựng một dự án, nếu một phương thức được viết trong nhiều hơn 1 lớp, phương thức đó sẽ được Project Leader xem xét đưa vào Base functions Nếu phương thức nào viết trong Base functions được sử dụng nhiều hơn

2 dự án và hoạt động ổn định, hiệu quả, và có thể áp dụng cho nhiều loại dự án khác nhau, phương thức đó sẽ được cân nhắc đưa vào Core functions

Ví dụ: ở phiên bản lõi core_1.0 chưa có chức năng tạo mã QR code

Một dự án quản lý thẻ khách hàng có sử dụng framework ligker core_1.0 Trong đó có 2 lớp ứng dụng là card (thẻ) và customer (khách hàng)

- Giai đoạn 1: yêu cầu tạo mã QR code cho Mã thẻ Khi đó, lập trình viên tiến hành tạo phương thức: create_card_qr_code() trong lớp card;

- Giai đoạn 2: khách hàng bổ sung: yêu cầu tạo mã QR code cho Mã khách hàng Ở giai đoạn này, thay vì tiếp tục tạo thêm một phương thức create_member_qr_code(), Project Leader sẽ kiểm tra phương thức create_card_qr_code() đã tạo ở giai đoạn 1, tiến hành chuyển phương thức này về Base functions và đặt lại tên create_qr_code() Sau đó, cả 2 lớp ứng dụng là card và customer đều dùng chung method này

Khi kết thúc dự án, nhận thấy phương thức create_qr_code() tỏ ra hiệu quả và

có thể tái sử dụng trong nhiều dự án trong tương lai, create_qr_code() đã được đưa vào Core functions trong Core layer của Ligker framework

3.1.3.3 Một vài nhận xét về quy trình hoạt động của Ligker framework

Với cách tạo ra một khung làm việc như vậy, Core layer sẽ bắt buộc các lập trình viên khi viết code ở Application layer phải tuân thủ việc:

- Không được phép include, require… bất kỳ file nào khác

- Từ một controller chỉ được phép gọi các model, view mặc định, hoặc controller chỉ được gọi 1 controller khác thông qua hàm call_controller(); hàm này

đã được kiểm soát bởi Router trong file main.php (như đã trình bày trong phần

3.1.1.2 Core Layer - lớp lõi) Ngoài ra, các thành phần controller, model, view

không được gọi tới các thành phần khác mà không thông qua thành phần Router

- Trong MVC của Application layer, khi viết controller, các lập trình viên không được phép viết các câu có các từ khóa liên quan đến truy vấn SQL (SELECT, INSERT, UPDATE, …), không được viết các thẻ HTML: <div>, <a>… Tương tự, trong model và view, không được viết If … else , switch , case….Đó là các từ khóa bị cấm vì mục đích đảm bảo tuân thủ mô hình MVC của hệ thống

3.1.4 Mối quan hệ Page - Position - Module trong Ligker framework

3.1.4.1 Page – trang

Một website là tập hợp của nhiều trang web Mỗi trang web gọi là 1 page Phần view của một page ở đây được hiểu là một trang HTML hoàn chỉnh với các thẻ HTML : <head>, <body>, <div> và khi hiển thị trên trình duyệt sẽ được kết quả tương tự như hình 3.7 dưới đây:

3.1.4.2 Position – các vị trí trong một trang

Position là một khái niệm quy ước các vị trí trên web page của người thiết kế giao diện với khách hàng Do đó, bố cục các position của các page có thể giống hoặc khác nhau

Một page gồm nhiều position Thông thường, người thiết kế sẽ chia không gian của 1 web page thành khoảng 5~10 phần, mỗi phần ứng với một position

3.1.4.3 Module

Tiếp tục chia nhỏ các position theo yêu cầu thiết kế cho đến khi tạo được một khối độc lập gắn với một lớp cụ thể, khi đó ta đã tạo được một module

Hình 3.8: Các position và module trên một web page

Ví dụ : hình 3.8, tại vị trí Position 5 cần gọi 2 module : Đăng nhập và Tin mới

Việc tạo lập mối quan hệ Page - Position - Module nhằm 2 mục đích :

- Module hóa công việc của các lập trình viên ;

- Tái sử dụng các module một cách hiệu quả

Căn cứ vào bản thiết kế giao diện bao gồm Page – Position - Module, Project Leader sẽ giao mỗi module cho 1 hoặc 1 nhóm coder thực hiện Các lập trình viên xây dựng module bằng cách gọi tới các controller và method cụ thể, thực hiện truy vấn dữ liệu, kết hợp với thành phần view và trả lại kết quả HTML vào đúng position theo thiết kế

Trong quá trình thực hiện dự án, Project Leader xác định các module dùng chung cho nhiều page (có thể ở các position giống nhau hoặc khác nhau) để thực hiện tái sử dụng module

3.1.5 Cấu trúc thư mục của Ligker framework

Căn cứ vào nguyên lý hoạt động của Ligker framework đã trình bày ở phần trên, cấu trúc thư mục của hệ thống được xây dựng với 2 thư mục chính: core và project như minh họa trong hình 3.9:

Hình 3.9: Cấu trúc các thư mục chính của Ligker framework