страница с мультипереводчиком

PHP и страница с мультипереводчиком

Привет всем! Сегодня расскажу, как я в рамках изучения PHP (и в целях решения собственной задачи) сделал за вечер страницу с мультипереводчиком. Увы, в основе лежит работы с API Google Translate, но думаю, что как для начинающего php-шника — очень даже норм 🙂 Итак — поехали!

Сам результат работы выглядит так:
страница с мультипереводчиком
а увидеть и пощупать его ручками вы можете по ссылке. Что сделано?
1. Визуальная часть
2. Подключена API Google Translate (как получить API-код — опишу позднее)
3. Сделан php-скрипт, который обрабатывает содержимое формы на одном языке, и переводит это самое содержимое на следущие языки: английский, немецкий, французский (я просто хочу блог адаптировать к этим языка в дополнение к основному русскому, потому и возникла идея подобного учебного проекта. Еще используется украинский язык, но т.к. украинский язык для меня такой же родной, как и русский — переводчиком не пользуюсь 🙂 ).

Теперь более подробно:
1. Визуальная часть:
В основе — обычная страница на html, привязан фавикон. В двух слоях global_div и central_div расположена форма, внутри которой — табличка 🙂 Имеется textarea для ввода текста на русском языке. Специально для сохранения исходного текста после перевода добавил проверку на наличие cookie — если она имеется, то подразумевается, что перевод уже сделан (кука геренируется только после отработки скрипта перевода) и в textarea вставляется исходный текст. Выглядит это следующим образом:

 if(isset($_COOKIE['ru_text']) == True) {
$ru_text = $_COOKIE['ru_text'];
} else {
$ru_text = '';
}

аналогичный механизм используем для проверки textarea других языков — если кука есть, то берем значение куки (в данном случае — уже результат перевода) и вставляем в textarea. Если что — вставка в textarea выглядит следующим образом:

9176092056627b080c1a17_000001

Сам фон страницы сделан с использованием css-стилей. Тут вообще все просто — в основном использовал радиальный градиент и закругленные углы в кнопках:

background: radial-gradient(white, lightgray);
border-radius: 5px;

остальное все — ерунда в виде теней и реакции на мышку (если интересно — все стили доступны здесь)

С визуальной частью разобрались, теперь более интересное — подключение API и отправка-обработка данных.
За работу с переводом у меня отвечает следующий код:

  $text = $_POST['ru_text'];
$apiKey = 'AIzaSyCxuVe4IySjQZuvK0SvELwKv47dntXssRXs';
 
// Английский перевод
$url = 'https://www.googleapis.com/language/translate/v2?key='.$apiKey.'&q='.rawurlencode($text).'&source=ru&target=en';
$handle = curl_init($url);
curl_setopt($handle, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($handle);
$response_decode = json_decode($response, true);
$en_answer = $response_decode['data']['translations'][0]['translatedText'];
 
// Немецкий перевод
$url = 'https://www.googleapis.com/language/translate/v2?key='.$apiKey.'&q='.rawurlencode($text).'&source=ru&target=de';
$handle = curl_init($url);
curl_setopt($handle, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($handle);
$response_decode = json_decode($response, true);
$de_answer = $response_decode['data']['translations'][0]['translatedText'];
 
// Французский перевод
$url = 'https://www.googleapis.com/language/translate/v2?key='.$apiKey.'&q='.rawurlencode($text).'&source=ru&target=fr';
$handle = curl_init($url);
curl_setopt($handle, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($handle);
$response_decode = json_decode($response, true);
$fr_answer = $response_decode['data']['translations'][0]['translatedText'];
 
setcookie('ru_text', $text, time() + 3);
setcookie('en_text', $en_answer, time() + 3);
setcookie('de_text', $de_answer, time() + 3);
setcookie('fr_text', $fr_answer, time() + 3);
 
header('Location: multitranslator.php');

разберем его подробнее:
1. Создаем переменную $text, которая состоит из содержимого $_POST
2. Указываем, что переменная $apiKey у нас — имеет значение… там куча буквицифр
3. Формируем рабочую $url, которая состоит из:
— основной ссылки на Google-переводчик в формате API + наше значение API + наша переменная, которая содержит исходный текст (тут важно подчеркнуть, что мы этот текст должны использовать с rawurlencode, благодаря чему текст останется просто текстом, а не будет преобразован в какие-либо служебные символы
4. Делаем http-запрос с помощью curl-init($url) (открываем сеанс связи)
5. Указываем, что запрос мы делаем в виде строки
6. Создаем переменную, которая состоит из запроса (в качестве запроса у нас идет строка с параметрами)
7. Создаем переменную для ответа — причем указывем, что ответ у нас приходит в виде json-массива.
8. И теперь декодируем ответ — получаем непосредственно текст перевода: $response_decode[‘data’][‘translations’][0][‘translatedText’]

Этот алгоритм используется в переводе на все языки, потому дублировать его я не буду. После того, как мы перевели текст с русского на все нужные языки — отправляем результат перевода в куки: setcookie(‘en_text’, $en_answer, time() + 3), которые живут 3 секунды (а больше-то и не нужно, нам лишь перейти на начальную страницу и получить данные), и возвращаемся на начальную страницу: header(‘Location: multitranslator.php’)

Получилось сумбурно, но надеюсь что-то полезное вы все же почерпнете 🙂 В случае возникновения вопросов пишите на почту, или в Телеграм 🙂