Кумир святого Исидора

TinyURL. Шаг 4. Обработка кнопки на примере формы входа

В прошлый раз, я рассказал о рендере, который собираюсь использовать при разработке сервиса коротких ссылок, а теперь хочу показать, как можно оживить полученные с помощью рендера формы.

Для этого я буду использовать JavaScript, а точнее великолепную библиотеку JQuery. Не обойду вниманием и модный AJAX. Итак, рассмотрим потенциальную форму входа на сайт (имя тестового пользователя и его пароль вы без труда найдете в приложенном коде)

Мой рендер генерирует статическую форму без обработчиков, что сильно упрощает его код. Однако, за простоту приходится расплачиваться позже и описывать реакцию интерфейса на действия пользователя с помощью JQuery.

 
  $data = array(
    'formid' => 'dummylogin',
    'options' => ':splitter:Войдите,name,pass'
      . ',:ajax:Вход:btn_dummylogin', // <-- кнопка
    'notes'  => array(
      'name' => 'Имя',
      'pass' => 'Пароль'
      ),
    'css_td' => 'login_td',
    'css_tdval' => 'login_tdval',
    'css_input' => 'login_input'
    );
  echo '<div style = "float: left; margin: 10px;">';
  render($data);
  echo '</div>';
 

Для изменения внешнего вида рендеру передются имена новых стилей, которые естественно надо описать

 
    .login_td, .login_tdval
    {
      border: 1px solid #bbb; 
      text-align: justify; 
      padding: 3px; 
      padding-bottom: 8px; 
      vertical-align: top; 
      font-size: 90%;
      width: 80px;      
    }
 
    .login_tdval
    {
      padding-top: 10px;
      width: 120px;      
    }
 
    .login_input
    {
      width: 120px;
    }
 

Теперь нужно задать обработчик для кнопки с помощью jQuery

 
  <script type="text/javascript" src="js/jquery.js"></script>
  <script>
    $(document).ready(function()
    {
      $('#btn_dummylogin').click(function()
      {
        str  = 'action=dummylogin&';
        str += $('#dummylogin').serialize();
        $.ajax(
        {
          url: 'samples/dummy-ajax.php',
          type: 'post',
          data: str,
          dataType: 'json',
          success: function(json)
          {
            if(json.status != 'SUCCESS')
            {
              alert('Вам не удалось угадать имя пользователя или пароль');
            }
            else
            {
              alert('Бинго! Точно в цель! Но, как Вы узнали?');
            }
          }
        });
      });
    });
  </script>
 

Клиентская часть описана и пра переходить к серверной. Ниже приведен код скрипта, к которому обрабатывает AJAX-запрос и осуществляет проверку введенных данных.

 
<?
  $options = array(); 
  foreach($_POST as $key => $val)
  {
    $options[$key] = mb_convert_encoding($val, 'windows-1251', 'utf-8');
  }
  $action = '';
  extract($options, EXTR_OVERWRITE);
 
  $json['status'] = 'FAILED';
  ob_start();
  {
    switch($action)
    {
      case 'dummylogin':
        if(defined('LOADPASSFILE'))
        {
          $json['status'] = 'ACCESS_DENIED';
          break;      
        }
        else
        {
          define('LOADPASSFILE', time());
          include_once('samples/dummypass.php');
          if(isset($pwdarray) 
          && isset($pwdsalt) 
          && isset($pwdarray[$name])
          && $pwdarray[$name] === md5($pass.$pwdsalt))
          {
            $json['status'] = 'SUCCESS';
          }
        }
      break;
 
      default:
        $json['status'] = 'NO_ACTION';
      break;
    }
  }
  $json['out'] = ob_get_clean();  
  $res = json_encode($json);
  mb_convert_encoding($res, 'utf-8', 'windows-1251');
  echo $res;
?>
 

Осталось лишь описать файл, который хранит список пользователей и их пароли.

 
<?
  if(!defined('LOADPASSFILE'))
  {
    echo 'ACCESS_DENIED';
    return;
  }
 
  if(isset($pwdarray))
  {
    unset($pwdarray);
  }
?>
 
<?
  $pwdsalt  = 'salt';
  $pwdarray = array(
    'user' => md5('pass'.$pwdsalt)
    );
?>
 

Описание рендера на этом можно считать завершенным и наконец-то вернуться к написанию сервиса коротких ссылок, для реализации которого осталось дописать ввод данных пользователем, их хранение и собственно сам редирект.

TinyURL. Шаг 3. Рендеринг интерфейса
TinyURL. Шаг 2. Кодирование и декодирование ссылки
TinyURL. Шаг за шагом. Шаг 1
Oracle. Преобразование даты в unix timestamp
MFC. Использование HTML-интерфейса.