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

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 выглядит следующим образом:






Сам фон страницы сделан с использованием 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’)

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

Support the Blog!

Running a blog takes a lot of effort, time, and passion. Your donations help improve the content, inspire new ideas, and keep the project going.
If you’ve enjoyed the blog’s materials, any support would mean the world to me. Thank you for being here! ❤️

PayPal Logo Donate via PayPal

Revolut Logo Donate via Revolut