Від автора: в даному уроці хотів би показати Вам, як можна використовувати різні сторонні ресурси для вирішення поставлених завдань на прикладі сервісу від компанії Google Translate.
Отже, на прикладі сервісу від компанії Google Translate ми з Вами попрактикуємось в відправки запитів на віддалений сервіс. Подивимося, як можна дізнатися які дані необхідно відправити, щоб отримати правильний результат. У даному уроці ми з Вами створимо свій простенький перекладач на основі сервісу від Google.
Але знову ж таки повторюся – мета уроку не у створенні сценарію перекладача! Я хотів би навчити Вас взаємодіяти зі сторонніми ресурсами. Для сьогоднішнього уроку я підготував наступну сторінку:
За своїм кодом вона дуже проста. Файл index.php містить чистий html-код:
Перекладач
|
Мова джерело: Мова |
Мова перекладу: Мова |
Перевести
І нарешті, файл стилів style.css, який визначає оформлення сторінки. Його код я наводити не буду. Ви його зможете подивитися в исходниках до уроку. Так само Ви, напевно, помітили, що я вже підключив бібліотеку jQuery, яка нам надалі знадобитися. І порожній файл script.js, в якому ми будемо зберігати сценарії на мові JavaScript.
Огляд сервісу
Отже, давайте подивимося на сервіс від Google Translate. Для цього перейдемо на сторінку http://translate.google.ru/.
Це online перекладач, за допомогою якого можна перекласти як окремі слова, так і словосполучення, речення і тексти. Давайте спробуємо, що то перевести. Дивіться ,як тільки ми вводимо слово, відразу ж дані відправляються на сервер, за допомогою методу AJAX. І якщо ми відкриємо консоль плагіна Firebug для браузера Mozilla Firefox, то ми зможемо відслідкувати відправлення запиту:
Тобто ми бачимо, що запит відправляється на сервер за адресою translate.google.ru/translate_a/ з певним набором даних.
Файл конфігурації
Першим ділом створимо файл конфігурації, в якому будемо зберігати деякі налаштування. Вміст файлу config.php:
“Арабський”,
“da”=>”Датський”,
“en”=>”Англійська”,
“fr”=>”Французький”,
“it”=>”Італійський”,
“bg”=>”Болгарський”,
“de”=>”Німецький”,
“es”=>”Іспанський”,
“hi”=>”Хінді”,
“ja”=>”Японський”,
“no”=>”Норвезька”,
“ro”=>”Румунська”,
“zh-cn”=>”Китайський”,
“cs”=>”Чеський”,
“el”=>”Грецький”,
“fi”=>”Фінська”,
“hr”=>”Хорватська”,
“ko”=>”Корейський”,
“pl”=>”Польський”,
“ru”=>”Російський”,
“zh-tw”=>”Китайський”,
“nl”=>”Голландський”,
“pt”=>”Португальська”,
“sv”=>”Шведський”,
“uk”=>”Український”
);
?>
Як Ви бачите, спочатку визначаємо константу URL, в якій буде зберігатися адреса для запиту. І створимо масив $lang, в якому будуть збережені мови перекладу та їх коди. На сервер відправляється саме код мови. Тепер давайте на головній сторінці виведемо в випадаючому списку мов для перекладу (звичайно, не забуваємо підключити файл конфігурації у файлі index.php). Мова фрази для перекладу:
Мова джерело:
$val) 
>
>
Мова, на яку перекладається:
Мова перекладу:
$val) >
>
Створення класу відправки даних на сервер
Тепер створимо клас Translate (в окремому файлі з іменем translate.php).
class translate {
private $ku = false;
}
Запити на сервер ми будемо відправляти, використовуючи бібліотеку cURL, тому властивості класу $ku, будемо зберігати дескриптор відкритого з’єднання з бібліотекою. Який, ми сформуємо в конструкторі класу.
public function __construct() {
$this->ku = curl_init();
if(!$this->ku) {
exit(“Помилка”);
}
}
public function __destruct() {
if($this->ku) {
curl_close($this->ku);
}
}
Тобто при створенні об’єкта даного класу, ми виконаємо ініціалізацію сURL з’єднання і дескриптор збережемо властивості класу $ku. У деструкторе класу, відповідно, з’єднання з бібліотекою сURL, буде закрито. Тепер опишемо метод translate(), який буде відправляти запит на сервер і отримувати відповідь:
public function translate($s,$d,$query) {
$query = urlencode($query);
$str = “client=x&text=”.$query.”&sl=”.$s.”&tl=”.$d;
if(!$this->ku) {
exit(“Помилка”);
}
curl_setopt($this->ku,CURLOPT_URL,URL.”?”.$str);
curl_setopt($this->ku,CURLOPT_RETURNTRANSFER,TRUE);
curl_setopt($this->ku,CURLOPT_HTTPHEADER,array(‘User-Agent:’.$_SERVER[‘HTTP_USER_AGENT’]));
$result = curl_exec($this->ku);
return $result;
}
Для початку визначимося з аргументами, які буде приймати дана функція:
$s – код мови для перекладу рядка;
$d – код мови, на який необхідно перевести рядок;
$query – рядок для перекладу.
В тілі методу, насамперед опрацюємо рядок для перекладу функцією urlencode(), для коректної передачі через рядок запиту. Далі, так як на сервер необхідно відправити дані методом GET, значить необхідно сформувати рядок з даними. Яка і буде використана для передачі.
Розглянемо рядок запиту: $str = «client=x&text=».$query.»&sl=».$s.»&tl=».$d;
Параметри:
client=x – спеціальний параметр, необхідний для отримання відповіді у форматі JSON;
text=».$query – рядок для перекладу;
sl=».$s – код мови для перекладу рядка;
tl=».$d – код мови на який необхідно перевести рядок.
Далі задаємо параметри cURL з’єднання:
CURLOPT_URL – адресу запиту;
CURLOPT_RETURNTRANSFER – дана настройка відповідає за повернення даних, якщо TRUE, значить дані будуть повернуті;
CURLOPT_HTTPHEADER – в даній настройці описуємо заголовки, які будуть відправлені. У нашому випадку, для отримання коректного результату, ми відправляємо заголовок ‘User-Agent’. Тобто відомості про браузері користувача.
Далі виконуємо cURL з’єднання і повертаємо отриманий результат. Таким чином, клас Translate повністю завершено. Давайте протестуємо його роботу, а також подивимося, в якому вигляді повертається відповідь від сервера. Для цього в файл index.php додамо наступний код:
include “translate.php”;
$obj = new translate();
$res = $obj->translate(‘en’,’ru’,’hello’);
print_r(json_decode($res));
Тобто викличемо метод translate() і вручну передамо потрібні параметри. При виведенні даних на екран, опрацюємо їх функцією json_decode(), так як ми знаємо, що дані будуть повернуті у форматі json. На екрані ми побачимо наступне:
Як Ви бачите, від сервера ми отримуємо досить велику кількість даних. Це і переклад рядки – властивість sentences, і додаткові словникові дані – властивість dict. Я Вам рекомендую уважно вивчити отриманий об’єкт.
Підключаємо AJAX
Отже, у нас є форма для додавання рядка, і є файл, translate.php, який відправить дані на сервер і поверне результат. Тепер давайте визначимося, як ми будемо відправляти дані в файл translate.php. Я пропоную для цих цілей використовувати AJAX. Тому, в порожній файл script.js додамо наступний код:
$(document).ready(function() {
$(“#click”).click(function() {
var lang = $(“option:selected”);
var lang_source = $(lang[0]).val();
var lang_dest = $(lang[1]).val();
var q = $(“#source”).val();
$.ajax({
url:’index.php’,
data:”source=”+lang_source+”&dest=”+lang_dest+”&q=”+q,
type:”GET”,
dataType:”json”,
success:function(html) {
var val = “”;
if(html[‘sentences’]) {
val = val + html[‘sentences’][0][‘trans’];
$(“#dest”).html(val);
}
var val2 = “”;
if(html[‘dict’]) {
for(var i = 0; i < html[‘dict’].length; i++) {
var str = “”;
for(var j = 0; j < html[‘dict’][‘terms’].length; j++) {
str += html[‘dict’][‘terms’][j] + ” | “;
}
val2 = val2 + “
“+ “”+ html[‘dict’][‘pos’] + “: “+ str;
}
$(“#res”).html(val2);
}
}
});
});
});
Отже, першим ділом ми прив’язуємо обробник події cluck до блоку з ідентифікатором click (кнопка Перевести). Потім, за допомогою бібліотеки jQuery вибираємо елементи форми (два випадаючих списків та текстова область) і зчитуємо їх вміст (значення атрибута value, для елемента textarea – це дані, які містяться між тегами). Далі викликаємо метод ajax() бібліотеки jQuery і вказуємо наступні параметри:
url:’index.php’ – адресу сервера, куди будуть відправлені дані;
data:»source=»+lang_source+»&dest=»+lang_dest+»&q=»+q – дані які надсилаються (в нашому випадку відправляємо дані елементів форм);
type:»GET» – тип запиту;
dataType:»json» – формат даних, які будуть надіслані відповіддю від сервера (в нашому випадку ми очікуємо дані у форматі json. При цьому вони автоматично будуть декодованими в об’єкт).
success – функція, яка виконується в результаті успішно виконаного запиту. Дана функція приймає параметром, змінну html – це і є дані, які приходять від сервера. Тобто це той об’єкт, який ми з Вами розглядали раніше. А значить, тепер нам необхідно вивести інформацію в необхідному вигляді.
Для виведення перекладу, необхідно використовувати властивість sentences, тобто html[‘sentences’][0][‘trans’], властивості sentences, міститься масив з однієї клітинки (з індексом 0), в даній комірці міститься об’єкт, у якого є властивість trans, в ньому міститься переклад зазначеного рядка.
Для виведення словникових даних використовуйте властивість dict — це досить складна властивість в якому міститься багатовимірний масив. Тому я рекомендую Вам уважно вивчити його. В нашому випадку ми використовуємо цикл for() для обходу цього масиву. У кожній клітинці даного масиву, також міститься об’єкт. І у цього об’єкта є властивість terms і pos. Властивість terms являє собою масив словникових даних (наприклад, дієслова, прикметники тощо). Для проходу по ньому я також використовую цикл, що б з його вмісту комірок сформувати рядок розділену символом “|”. Властивість pos містить в собі назву безпосередньо частини мови, до якого відносяться словникові дані властивості terms.
Звичайно, трохи заплутано, але якщо уважно вивчити структуру об’єкта, що повертається сервером, то відразу стане все зрозуміло. Тепер давайте в файл index.php додамо наступний код:
if($_GET) {
$obj = new translate();
$res = $obj->translate($_GET[‘source’],$_GET[‘dest’],$_GET[‘q’]);
echo $res;
exit();
}
При цьому попередній код, який ми додавали для перевірки методу translate(), необхідно видалити. Тут, як Ви бачите, ми перевіряємо: якщо прийшли дані методом GET (а вони можуть прийти тільки методом AJAX), то ми викликаємо метод translate(). При цьому, дані які будуть повернуті, зберігаються у змінній $res. Значення яке ми виводимо на екран. Так як дана ділянка коду, спрацює, тільки якщо буде звернення до даного файлу через AJAX, значить весь вивід на екран, буде відповіддю від сервера. А значить потрапить в змінну html файлу script.js. Після виведення на екран змінної $res – виконуємо exit().
Тепер, давайте подивимося, що у нас вийшло:
Як Ви бачите, все успішно відпрацювала. На цьому даний урок завершено. Всього Вам доброго і вдалого кодування!!!
