Создание AJAX конвертора курсов валют при помощи PHP, jQuery и Google

Если вы не знаете, то я вам открою страшную тайну! Помимо основных функций поисковой системы Google предоставляет ещё и множество других услуг. Одна из них это калькулятор с расширенными возможностями. Как это можно использовать? Ответ в этой статье.

Что нам нужно для того, чтобы закодить данный конвертор? PHP, jQuery, Google, прикольный музон и конечно же этот урок!

Давайте же начнём. Создайте новый файл index.php и вставьте следующий код:
<label for="amount">Сумма:</label>
<input class="amount" type="text" name="amount" id="amount" value="100" />
 
    <label for="from">Из:</label>
        <select name="from" id="from">
        <option selected="selected" value="EUR">Euro - EUR</option>
        <option value="USD">United States Dollars - USD</option>
        <option value="GBP">United Kingdom Pounds - GBP</option>
        <option value="CAD">Canada Dollars - CAD</option>
        <option value="AUD">Australia Dollars - AUD</option>
        <option value="JPY">Japan Yen - JPY</option>
        <option value="INR">India Rupees - INR</option>
        <option value="NZD">New Zealand Dollars - NZD</option>
        <option value="CHF">Switzerland Francs - CHF</option>
        <option value="ZAR">South Africa Rand - ZAR</option>
        <option value="DZD">Algeria Dinars - DZD</option>
        <option value="ARS">Argentina Pesos - ARS</option>
        <option value="AUD">Australia Dollars - AUD</option>
        <option value="BHD">Bahrain Dinars - BHD</option>
        <option value="BRL">Brazil Reais - BRL</option>
        <option value="BGN">Bulgaria Leva - BGN</option>
        <option value="CAD">Canada Dollars - CAD</option>
        <option value="CLP">Chile Pesos - CLP</option>
        <option value="CNY">China Yuan Renminbi - CNY</option>
        <option value="CNY">RMB (China Yuan Renminbi) - CNY</option>
        <option value="COP">Colombia Pesos - COP</option>
        <option value="CRC">Costa Rica Colones - CRC</option>
        <option value="HRK">Croatia Kuna - HRK</option>
        <option value="CZK">Czech Republic Koruny - CZK</option>
        <option value="DKK">Denmark Kroner - DKK</option>
        <option value="DOP">Dominican Republic Pesos - DOP</option>
        <option value="EGP">Egypt Pounds - EGP</option>
        <option value="EEK">Estonia Krooni - EEK</option>
        <option value="EUR">Euro - EUR</option>
        <option value="FJD">Fiji Dollars - FJD</option>
        <option value="HKD">Hong Kong Dollars - HKD</option>
        <option value="HUF">Hungary Forint - HUF</option>
        <option value="ISK">Iceland Kronur - ISK</option>
        <option value="INR">India Rupees - INR</option>
        <option value="IDR">Indonesia Rupiahs - IDR</option>
        <option value="ILS">Israel New Shekels - ILS</option>
        <option value="JMD">Jamaica Dollars - JMD</option>
        <option value="JPY">Japan Yen - JPY</option>
        <option value="JOD">Jordan Dinars - JOD</option>
        <option value="KES">Kenya Shillings - KES</option>
        <option value="KRW">Korea (South) Won - KRW</option>
        <option value="KWD">Kuwait Dinars - KWD</option>
        <option value="LBP">Lebanon Pounds - LBP</option>
        <option value="MYR">Malaysia Ringgits - MYR</option>
        <option value="MUR">Mauritius Rupees - MUR</option>
        <option value="MXN">Mexico Pesos - MXN</option>
        <option value="MAD">Morocco Dirhams - MAD</option>
        <option value="NZD">New Zealand Dollars - NZD</option>
        <option value="NOK">Norway Kroner - NOK</option>
        <option value="OMR">Oman Rials - OMR</option>
        <option value="PKR">Pakistan Rupees - PKR</option>
        <option value="PEN">Peru Nuevos Soles - PEN</option>
        <option value="PHP">Philippines Pesos - PHP</option>
        <option value="PLN">Poland Zlotych - PLN</option>
        <option value="QAR">Qatar Riyals - QAR</option>
        <option value="RON">Romania New Lei - RON</option>
        <option value="RUB">Russia Rubles - RUB</option>
        <option value="SAR">Saudi Arabia Riyals - SAR</option>
        <option value="SGD">Singapore Dollars - SGD</option>
        <option value="SKK">Slovakia Koruny - SKK</option>
        <option value="ZAR">South Africa Rand - ZAR</option>
        <option value="KRW">South Korea Won - KRW</option>
        <option value="LKR">Sri Lanka Rupees - LKR</option>
        <option value="SEK">Sweden Kronor - SEK</option>
        <option value="CHF">Switzerland Francs - CHF</option>
        <option value="TWD">Taiwan New Dollars - TWD</option>
        <option value="THB">Thailand Baht - THB</option>
        <option value="TTD">Trinidad and Tobago Dollars - TTD</option>
        <option value="TND">Tunisia Dinars - TND</option>
        <option value="TRY">Turkey Lira - TRY</option>
        <option value="AED">United Arab Emirates Dirhams - AED</option>
        <option value="GBP">United Kingdom Pounds - GBP</option>
        <option value="USD">United States Dollars - USD</option>
        <option value="VEB">Venezuela Bolivares - VEB</option>
        <option value="VND">Vietnam Dong - VND</option>
        <option value="ZMK">Zambia Kwacha - ZMK</option>
    </select>
 
    <label for="to">В:</label>
    <select name="to" id="to">
        <option value="USD">United States Dollars - USD</option>
        <option value="GBP">United Kingdom Pounds - GBP</option>
        <option value="CAD">Canada Dollars - CAD</option>
        <option value="AUD">Australia Dollars - AUD</option>
        <option value="JPY">Japan Yen - JPY</option>
        <option value="INR">India Rupees - INR</option>
        <option value="NZD">New Zealand Dollars - NZD</option>
        <option value="CHF">Switzerland Francs - CHF</option>
        <option value="ZAR">South Africa Rand - ZAR</option>
        <option value="DZD">Algeria Dinars - DZD</option>
        <option value="ARS">Argentina Pesos - ARS</option>
        <option value="AUD">Australia Dollars - AUD</option>
        <option value="BHD">Bahrain Dinars - BHD</option>
        <option value="BRL">Brazil Reais - BRL</option>
        <option value="BGN">Bulgaria Leva - BGN</option>
        <option value="CAD">Canada Dollars - CAD</option>
        <option value="CLP">Chile Pesos - CLP</option>
        <option value="CNY">China Yuan Renminbi - CNY</option>
        <option value="CNY">RMB (China Yuan Renminbi) - CNY</option>
        <option value="COP">Colombia Pesos - COP</option>
        <option value="CRC">Costa Rica Colones - CRC</option>
        <option value="HRK">Croatian Kuna - HRK</option>
        <option value="CZK">Czech Republic Koruny - CZK</option>
        <option value="DKK">Denmark Kroner - DKK</option>
        <option value="DOP">Dominican Republic Pesos - DOP</option>
        <option value="EGP">Egypt Pounds - EGP</option>
        <option value="EEK">Estonia Krooni - EEK</option>
        <option value="EUR">Euro - EUR</option>
        <option value="FJD">Fiji Dollars - FJD</option>
        <option value="HKD">Hong Kong Dollars - HKD</option>
        <option value="HUF">Hungary Forint - HUF</option>
        <option value="ISK">Iceland Kronur - ISK</option>
        <option value="INR">India Rupees - INR</option>
        <option value="IDR">Indonesia Rupiahs - IDR</option>
        <option value="ILS">Israel New Shekels - ILS</option>
        <option value="JMD">Jamaica Dollars - JMD</option>
        <option value="JPY">Japan Yen - JPY</option>
        <option value="JOD">Jordan Dinars - JOD</option>
        <option value="KES">Kenya Shillings - KES</option>
        <option value="KRW">Korea (South) Won - KRW</option>
        <option value="KWD">Kuwait Dinars - KWD</option>
        <option value="LBP">Lebanon Pounds - LBP</option>
        <option value="MYR">Malaysia Ringgits - MYR</option>
        <option value="MUR">Mauritius Rupees - MUR</option>
        <option value="MXN">Mexico Pesos - MXN</option>
        <option value="MAD">Morocco Dirhams - MAD</option>
        <option value="NZD">New Zealand Dollars - NZD</option>
        <option value="NOK">Norway Kroner - NOK</option>
        <option value="OMR">Oman Rials - OMR</option>
        <option value="PKR">Pakistan Rupees - PKR</option>
        <option value="PEN">Peru Nuevos Soles - PEN</option>
        <option value="PHP">Philippines Pesos - PHP</option>
        <option value="PLN">Poland Zlotych - PLN</option>
        <option value="QAR">Qatar Riyals - QAR</option>
        <option value="RON">Romania New Lei - RON</option>
        <option value="RUB">Russia Rubles - RUB</option>
        <option value="SAR">Saudi Arabia Riyals - SAR</option>
        <option value="SGD">Singapore Dollars - SGD</option>
        <option value="SKK">Slovakia Koruny - SKK</option>
        <option value="ZAR">South Africa Rand - ZAR</option>
        <option value="KRW">South Korea Won - KRW</option>
        <option value="LKR">Sri Lanka Rupees - LKR</option>
        <option value="SEK">Sweden Kronor - SEK</option>
        <option value="CHF">Switzerland Francs - CHF</option>
        <option value="TWD">Taiwan New Dollars - TWD</option>
        <option value="THB">Thailand Baht - THB</option>
        <option value="TTD">Trinidad and Tobago Dollars - TTD</option>
        <option value="TND">Tunisia Dinars - TND</option>
        <option value="TRY">Turkey Lira - TRY</option>
        <option value="AED">United Arab Emirates Dirhams - AED</option>
        <option value="GBP">United Kingdom Pounds - GBP</option>
        <option value="USD">United States Dollars - USD</option>
        <option value="VEB">Venezuela Bolivares - VEB</option>
        <option value="VND">Vietnam Dong - VND</option>
        <option value="ZMK">Zambia Kwacha - ZMK</option>
    </select>
 
    <input type="button" name="submit" id="submit" value="Convert" />
 
    <div id="results"></div>

У нас 2 выпадающих меню с наименованиями валют, поле для суммы и кнопка. Ниже div с id results, который будет отображать результаты.

Теперь сделаем AJAX запрос получения и отображения результата конвертирования:
$(document).ready(function() {
 
    $('#submit').click(function(){
 
     // получаем значения
     var amount     = $('#amount').val();
     var from       = $('#from').val();
     var to         = $('#to').val();
 
     var params = "amount=" + amount + "&from=" + from + "&to=" + to;
 
     $.ajax({
       type: "POST",
       url: "convert.php",
       data: params,
       success: function(data){
            $('#results').html(data);
       }
     });
    });
});

Мы делаем ajax запрос к файлу convert.php и если всё прошло успешно выводим результат в div.

А вот и convert.php
// фильтруем входящие данные filter_input
$amount = filter_input(INPUT_POST, 'amount', FILTER_VALIDATE_INT);
$from   = filter_input(INPUT_POST, 'from', FILTER_SANITIZE_SPECIAL_CHARS);
$to     = filter_input(INPUT_POST, 'to', FILTER_SANITIZE_SPECIAL_CHARS);
 
// фомирования сроки параметров для запроса
$encoded_string = urlencode($amount) . urlencode($from) . '%3D%3F' . urlencode($to);
 
$url = 'http://www.google.com/ig/calculator?hl=en&q=' . $encoded_string;
 
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_FAILONERROR, 1);
 
$results = curl_exec($ch);
 
// это функция json_decode для счастливых обладателей PHP < 5.2.0
// взято с php.net
$comment = false;
$out = '$x=';
 
for ($i=0; $i<strlen($results); $i++)
{
    if (!$comment)
    {
        if ($results[$i] == '{')            $out .= ' array(';
        else if ($results[$i] == '}')       $out .= ')';
        else if ($results[$i] == ':')       $out .= '=>';
        else                                $out .= $results[$i];
    }
    else $out .= $results[$i];
    if ($results[$i] == '"')    $comment = !$comment;
}
// формирование переменной $x, которая содержит декодированный массив
echo eval($out . ';');
 
echo $x['lhs'] . ' = ' . $x['rhs'];
Этот код в принципе не сложный, но я бы хотел пояснить вот что:

$amount = filter_input(INPUT_POST, 'amount', FILTER_VALIDATE_INT);
$from = filter_input(INPUT_POST, 'from', FILTER_SANITIZE_SPECIAL_CHARS);
$to = filter_input(INPUT_POST, 'to', FILTER_SANITIZE_SPECIAL_CHARS);

Этот код действительно интересный. Он работает только начиная с PHP 5.2.0. Эта функция с лёгкостью фильтрует данные.

Её можно использовать как для неизвестных ресурсов, так и для введённых пользователем данных.

Благодаря filter_input вы можете фильтровать:

INPUT_GET
INPUT_POST
INPUT_COOKIE
INPUT_ENV
INPUT_SERVER

Если фильтрация произошла успешно, функция вернёт чистое значение. Если произойдёт ошибка, то FALSE. NULL если не заданы параметры.

Всё готово!
Теги:
AJAX, конвертер курсов валют, Google
Добавлено: 02 Мая 2018 18:36:28 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...