NGÔN NGỮ PHÍA CLIENT

Một phần của tài liệu hệ thống thông tin hỗ trợ du lịch (Trang 27)

2.3.1. Javascript

JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình kịch bản và được dùng rộng rãi cho các trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong các ứng dụng. Vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành

LiveScript, và cuối cùng thành JavaScript (để được chú ý hơn bởi ngôn ngữ lập trình Java lúc đó đang được coi là một hiện tượng).

Trên thực tế, JavaScript không được phát triển dựa từ Java và càng không phải là Java mà nó chỉ dựa trên các cách đặt tên của Java, Javascipt và Java là hai ngôn ngữ khác nhau và do hai công ty khác nhau phát triển. Tuy vậy cũng giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java.

Javascript thường được dùng để xử lý các sự kiện tương tác với người dùng và được thực thi ngay trên trình duyệt của máy client chứ không phải trên server vì thế sẽ giảm tải rất nhiều cho server.

2.3.2. HTML

HTML - Hyper Text Markup Language (Ngôn ngữ đánh dấu siêu văn bản) được phát triển từ 1989 và được sử dụng rộng rãi cho đến nay để trình bày các trang web dạng văn bản, hình ảnh, âm thanh và các dạng ảnh động. Các chi tiết kĩ thuật của ngôn ngữ HTML hiện nay được bảo hộ bởi W3C (World Wide Web Consortium)

HTML không phải là ngôn ngữ lập trình, nó là ngôn ngữ trình bày:

 Một ngôn ngữ đánh dấu là một tập hợp các thẻ đánh dấu

 Các thẻ mô tả nội dung của tài liệu

 HTML bao gồm các thẻ HTML và văn bản đơn giản

 HTML cũng được gọi là trang web.

2.3.3. XML

XML - eXtensible Markup Language (ngôn ngữ đánh dấu mở rộng), là một ngôn ngữ đánh dấu mà bạn có thể sử dụng để tạo ra thẻ riêng của mình. Nó được tạo nên bởi Liên minh mạng toàn cầu nhằm khắc phục những hạn chế của HTML:

XML đơn giản hóa việc trao đổi dữ liệu. Bởi vì những nhóm khác nhau hiếm khi làm chuẩn hóa trên một bộ công cụ duy nhất. Sử dụng XML, mỗi nhóm sẽ tạo nên một lợi ích riêng mà có thể chuyển đổi những định dạng dữ liệu bên trong trở thành XML và ngược lại. Trên hết, đây là cơ hội tốt để nhà cung cấp phần mềm có thể đưa ra các công cụ chuyển đổi những ghi chép cơ sở dữ liệu của họ (danh bạ LDAP hoặc lệnh mua,...) thành XML và ngược lại [11].

XML cho phép mã hóa thông minh. Bởi vì những văn bản XML được tổ chức để nhận dạng từng thông tin quan trọng, có thể viết mã để xử lí văn bản XML mà không cần chúng ta tác động [11]. Những nhà cung cấp phần mềm đã dành rất nhiều thời gian và tiền bạc xây dựng các công cụ phát triển XML, điều đó có nghĩa là viết mã đó, là một quá trình tương đối đơn giản.

XML cho phép tìm kiếm thông minh. Mặc dù công cụ tìm kiếm đã cải thiện dần trong nhiều năm qua, tuy nhiên nhận được những kết quả không chính xác vẫn phổ biến xảy ra. Tìm kiếm văn bản XML sẽ mang lại cho bạn những kết quả tốt hơn rất nhiều.

2.3.4. CSS

CSS - Cascading Style Sheets, nó chỉ đơn thuần là một dạng file text với phần tên mở rộng là .css. Trong Style Sheet này chứa những câu lệnh CSS. Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví dụ như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh,...

Trước đây khi chưa có CSS, những người thiết kế web phải trộn lẫn giữa các thành phần trình bày và nội dung với nhau. Nhưng với sự xuất hiện của CSS, người ta có thể tách rời hoàn toàn phần trình bày và nội dung. Giúp cho phần code của trang web cũng gọn hơn và quan trọng hơn cả là dễ chỉnh sửa hơn.

Có ba cách dùng CSS để định dạng trang web:

 Nhúng vào trang web bằng cách khai báo code CSS nằm trong cặp thẻ

<style></style> được đặt ở phần <head></head> của tài liệu.

<head>

<style type="text/css">

h1 {font-size:16px;} p {color:#616161;}

 Cục bộ – code CSS được chèn trực tiếp vào trong thẻ HTML

<div style="font-size:16pt;font-weight:bold;">CSS dạng cục bộ</div>  Liên kết đến một file biệt lập

<link href="style_sheet.css" rel="stylesheet" type="text/css"/>

2.4. NGÔN NGỮ PHÍA SERVER

PHP - Hypertext Preprocessor là một ngôn ngữ lập trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn mở. Nó rất thích hợp với web và có thể dễ dàng nhúng vào trang HTML. Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và thời gian xây dựng một sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phổ biến nhất thế giới.

Thẻ <?php và thẻ ?> sẽ đánh đấu sự bắt đầu và sự kết thúc của phần mã PHP qua đó máy chủ biết để xử lý và dịch mã cho đúng. Đây là một điểm khá tiện lợi của PHP giúp cho việc viết mã PHP trở nên khá trực quan và dễ dàng trong việc xây dựng phần giao diện ứng dụng HTTP.

Ngôn ngữ, các thư viện, tài liệu gốc của PHP được xây dựng bởi cộng đồng và có sự đóng góp rất lớn của Zend Technologies, công ty do các nhà phát triển cốt lõi của PHP lập nên nhằm tạo ra một môi trường chuyên nghiệp để đưa PHP phát triển ở quy mô doanh nghiệp.

2.5. KHÁI QUÁT VỀ NEO4J, ZEND FRAMEWORK, JQUERY MOBILE FRAMEWORK VÀ GOOGLE MAPS JAVASCRIPT API FRAMEWORK VÀ GOOGLE MAPS JAVASCRIPT API

2.5.1. Neo4j

2.5.1.1. Giới thiệu

Neo4j là cơ sở dữ liệu đồ thị phổ biến nhất được sử dụng hiện nay, bên cạnh các CSDL đồ thị thay thế khác như OrientDB, InfiniteGraph, AllegroGraph.

Neo4j được viết bằng Java và có thể được sử dụng như một cơ sở dữ liệu nhúng và quản lý như là một máy chủ độc lập với khả năng tích hợp REST của giao diện để dễ dàng tích hợp vào PHP, NET và JavaScript dựa trên môi trường.

2.5.1.2. Cài đặt

Lựa chọn phiên bản phù hợp sau đó download từ trang chủ neo4j.com và tiến hành cài đặt.

Sau khi cài đặt thành công khởi động server, truy cập http://localhost:7474/ để bắt đầu sử dụng.

Hình 2.6. Cửa sổ khởi động server Neo4j

Trang browser: http://localhost:7474/browser/

Hình 2.7. Giao diện browser của Neo4j

Nó chia ra làm 3 phần chính:

 Phần trên là khung để truy vấn bằng Cypher

 Phần trung tâm là cửa sổ làm việc chính, nơi trả về kết quả truy vấn

Trang webadmin: http://localhost:7474/webadmin/

Hình 2.8. Giao diện admin của Neo4j

2.5.1.3. Neo4j REST API

Các vấn đề cơ bản về REST:

 Trong kiến trúc Web 2.0, các giao thức truyền thông hai chiều là một trong những thành phần then chốt, gồm hai loại giao thức chính là REST và SOAP. REST (Representation State Transfer) là dạng yêu cầu dịch vụ web mà máy khách truyền đi trạng thái của tất cả giao dịch; còn SOAP (Simple Object Access Protocol) thì phụ thuộc máy chủ trong việc duy trì thông tin trạng thái. Với cả hai loại, dịch vụ web đều được gọi qua API [11].

 REST định nghĩa các quy tắc kiến trúc để bạn thiết kế Web services chú trọng vào tài nguyên hệ thống, bao gồm các trạng thái tài nguyên được định dạng như thế nào và được chuyển tải qua HTTP thông qua số lượng lớn người dùng và được viết bởi những ngôn ngữ khác nhau.

 REST yêu cầu các nhà phát triển sử dụng phương thức HTTP một cách rõ ràng theo cách tương thích với giao thức chuẩn. Nguyên lý thiết kế REST cơ bản này thiết lập một ánh xạ 1-1 giữa các hành động tạo, đọc, cập nhật và xoá (CRUD)

các quá trình vận hành và các phương thức HTTP. Theo cách ánh xạ này thì: o Để tạo một tài nguyên trên máy chủ, bạn cần sử dụng phương thức POST. o Để truy xuất một tài nguyên, sử dụng GET.

o Để thay đổi trạng thái một tài nguyên hoặc để cập nhật nó, sử dụng PUT. o Để huỷ bỏ hoặc xoá một tài nguyên, sử dụng DELETE.

Neo4j REST API:

 Hỗ trợ nhiều ngôn ngữ: Java, .NET, Javascript, Python, PHP, Ruby

 Dạng dữ liệu trả về mặc định của REST API trong Neo4j là json. Để tương tác với json, chúng ta phải đặt header là Accept:application/json khi yêu cầu

nhận dữ liệu và đặt header là Content-Type:application/json khi yêu cầu gửi dữ liệu.

 Ví dụ về tìm đường đi ngắn nhất:

o Giải thuật tìm đường đi ngắn nhất mặc định trong Neo4j là giải thuật Dijkstra

o Xét đồ thị sau:

Hình 2.9. Ví dụ tìm đường đi ngắn nhất giữa hai nút

Yêu cầu gởi đi:

POST http://localhost:7474/db/data/node/252/path Accept: application/json; charset=UTF-8

Content-Type: application/json { "to" : "http://localhost:7474/db/data/node/249", "cost_property" : "cost", "relationships" : { "type" : "to", "direction" : "out" }, "algorithm" : "dijkstra" } Node[252] name = ‘a’ Node[251] name = ‘c’ Node[248] name = ‘d’ Node[249] name = ‘e’ Node[247] name = ‘f’ Node[250] name = ‘b’ to cost = 0.5 to cost = 1.5 to cost = 0.5 to cost = 0.5 to cost = 0.5 to cost = 0.5 to cost = 1.2

Dữ liệu trả về:

Content-Type: application/json; charset=UTF-8 { "directions" : [ "->", "->", "->" ], "weight" : 1.5, "start" : "http://localhost:7474/db/data/node/252", "nodes" : [ "http://localhost:7474/db/data/node/252", "http://localhost:7474/db/data/node/251", "http://localhost:7474/db/data/node/248", "http://localhost:7474/db/data/node/249"], "length" : 3, "relationships" : [ "http://localhost:7474/db/data/relationship/163", "http://localhost:7474/db/data/relationship/165", "http://localhost:7474/db/data/relationship/166"], "end" : "http://localhost:7474/db/data/node/249" }

Kết quả: Node[252] -> Node[251] -> Node[248] -> Node[249] 2.5.1.4. Neo4j Drivers

Sử dụng các driver đã được phát triển để kết nối đến Neo4j và tùy vào ngôn ngữ sử dụng ở phía server mà chúng ta chọn driver tương ứng.

2.5.2. Zend Framework

2.5.2.1. Giới thiệu

Zend Framework 2 (ZF) là một PHP Framework mã nguồn mở được xây dựng, phát triển bởi các chuyên gia PHP hàng đầu và được tài trợ bởi Zend Technologies.

Zend Framework 2 được viết theo chuẩn một mô hình MVC và 100% hướng đối tượng (Object-oriented programming - OOP). Với một bộ thư viện hỗ trợ đồ sộ và đầy đủ, các lập trình viên có thể dễ dàng sử dụng các module có sẵn để xây dựng nhanh chóng một hệ thống website trong một thời gian ngắn.

2.5.2.2. Ưu điểm và nhược điểm

Ưu điểm:

 ZF được viết theo kiểu OOP nên nó thừa hưởng các thế mạnh của kiểu viết này. Các lớp của ZF được BA (Business Analysis) rất chuẩn và khi cần mở rộng bạn có thể dùng thể dùng tính chất thừa kế của OOP.

 Hầu như các phiên bản mới của ZF không có nhiều thay đổi trong core nên ta có thể dễ dàng cập nhật.

 ZF tích hợp được gần như tất cả các thư viện PHP.

 Cách viết của ZF rất thân thiện và đơn giản, tích hợp những mới nhất của lập trình web như: JSON - Search - Syndication - Web Services...

Nhược điểm:

 Mất nhiều thời gian để tìm hiểu về thư viện của ZF

 Một số lớp chưa ổn định, có sự thay đổi, gây khó khăn cho người sử dụng khi cập nhật các phiên bản.

2.5.2.3. Cài đặt và cấu hình

Để cài đặt Zend Framework 2 cần có Zend Studio và một server như Xampp hoặc Wampserver, download về từ các địa chỉ sau:

 Zend Studio: http://www.zend.com

 Xampp: http://www.apachefriends.org  Wampserver: http://www.wampserver.com

Các bước để tạo project Zend Framework 2 trong Zend Studio 12:

 Chọn File -> New -> Project -> Local PHP Project

 Cấu trúc thư mục và tập tin trong Zend Framework 2 như sau:

Bảng 2.2 Thành phần thư mục và tập tin trong Zend Framework 2

Tên thư mục / tập tin Chức năng

/kaze Thư mục chứa các thành phần của mô hình MVC /configs Thư mục chứa các tập tin cấu hình của hệ thống: *.ini,

*.xml

Application.config.php Tập tin cấu hình các module sử dụng trong ứng dụng /module Thư mục chứa các mã ứng dụng

/Application Module mặc định /configs

module.config.php Tập tin dùng để cấu hình route cho mỗi controller, thiết lập template và hiển thị lỗi

/view

/error Thư mục chứa các tập tin hiển thị và thông báo khi có lỗi phát sinh

404.phtml Tập tin thông báo lỗi Index.phtml Tập tin hiển thị lỗi

/layout Thư mục chứa các bố cục giao diện ứng dụng layout.phtml Tập tin hiển thị phần giao diện

/main Module tự tạo

/src Thư mục chứa các controller và user

/Application Thư mục chứa các thư mục để quản lý các chức năng /Controller Thư mục chứa các tập tin điều hành hoạt động

indexController.php Controller mặc định, kế thừa lớp Zend_Controller_Action và có phương thức mặc định là indexAction()

loginController.php Controller tự tạo, gồm hai phương thức là loginAction() và registerAction()

/view Thư mục chứa các layout và các tập tin trong phần của view ứng dụng

/main Thư mục chứa các thư mục con để hiển thị dữ liệu tương ứng với mỗi tập tin trong controller

/index Thư mục tương ứng indexController.php

index.phtml Tập tin tương ứng với phương thức indexAction() trong indexController.php

/login Thư mục tương ứng loginController.php

login.phtml Tập tin tương ứng với phương thức loginAction() trong indexController.php

register.phtml Tập tin tương ứng với phương thức registerAction() trong indexController.php

autoload_classmap.php Nơi trả về một mảng liên kết biểu diễn class map Module.php Tập tin nhận tất cả các yêu cầu vào, sau đó khởi tạo

controller và dispatch yêu cầu đến controller tương ứng /public Thư mục chứa các thành phần khác dùng chung

/css Thư mục chứa các tập tin CSS /img Thư mục chứa các tập tin hình ảnh /js Thư mục chứa các tập tin Javascript

.htaccess Tập tin chứa các lệnh để chuyển đổi các URL và chuyển về trang index

index.php Tập tin chạy chính của ứng dụng

/vendor Thư mục chứa thư viện của Zend và thư viện mở rộng init_autoloader.php Thiết lập đường dẫn đến thư viện trong Zend Framework

 Cách làm việc trong Zend Framework 2 dựa vào thư viện để đọc và làm việc trên các lớp một cách rất cụ thể. Bởi đường dẫn chi tiết của chúng đã được thể hiện rõ ngay trên tên của chúng.

Controller thể hiện trên URL:

http://kaze.local/main/: Tìm đến indexAction() trong controller

indexController

http://kaze.local/main/login/register/: Tìm đến registerAction()

trong controller loginController để thực thi.

 Cấu hình các tập tin để chạy project [6]:

Xây dựng hệ thống với Zend Framework, nếu giữ nguyên đường dẫn

/kaze/public thì khi đưa hệ thống lên host thật, các tập tin và hình ảnh sẽ bị

sai đường dẫn. Vì vậy chúng ta cần tạo một host ảo để khắc phục. o Tạo host ảo:

Cấu hình tập tin httpd-vhosts.conf:

<VirtualHost *:80>

ServerName kaze.local

DocumentRoot "c:/wamp/www/kaze/public" SetEnv APPLICATION_ENV "development" <Directory /path/to/kaze/public> DirectoryIndex index.php AllowOverride All

Order allow,deny Allow from all </Directory> </VirtualHost>

Cấu hình tập tin httpd.conf:

Bỏ dấu # trước dòng Include conf/extra/httpd-vhosts.conf hoặc thêm vào nếu chưa có.

Cấu hình tập tin C:\Windows\System32\Drivers\etc\hosts:

127.0.0.1 localhost 127.0.0.1 kaze.local

Khởi động lại apache server:

Kiểm tra lại cấu hình bằng đường dẫn http://kaze.local/

o Cấu hình module trong tập tin config/module.config.php:

Controllers: 'controllers' => array( 'invokables' => array( 'main\Controller\Index' => 'main\Controller\IndexController', 'main\Controller\login' => 'main\Controller\LoginController', ), ),

Views:

'view_manager' => array(

'template_path_stack' => array( 'main' => __DIR__ . '/../view', ), ), Routes: 'router' => array( 'routes' => array( 'main' => array( 'type' => 'Literal', 'options' => array( 'route' => '/main', 'defaults' => array( '__NAMESPACE__' => 'main\Controller', 'controller' => 'Index', 'action' => 'index', ), ),

Cấu hình cho ứng dụng trong tập tin config/application.config.php:

'modules' => array('Application',

'main',

),

2.5.3. jQuery Mobile Framework

2.5.3.1. Giới thiệu

jQuery Mobile là một khung công tác phát triển giao diện người dùng web thân thiện với cảm ứng cho phép bạn phát triển các ứng dụng web di động làm việc trên các

Một phần của tài liệu hệ thống thông tin hỗ trợ du lịch (Trang 27)