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

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

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

Войдите

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

  1.  
  2. $data = array(
  3. 'formid' => 'dummylogin',
  4. 'options' => ':splitter:Войдите,name,pass'
  5. . ',:ajax:Вход:btn_dummylogin', // <-- кнопка
  6. 'notes' => array(
  7. 'name' => 'Имя',
  8. 'pass' => 'Пароль'
  9. ),
  10. 'css_td' => 'login_td',
  11. 'css_tdval' => 'login_tdval',
  12. 'css_input' => 'login_input'
  13. );
  14. echo '<div style = "float: left; margin: 10px;">';
  15. render($data);
  16. echo '</div>';
  17.  

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

  1.  
  2. .login_td, .login_tdval
  3. {
  4. border: 1px solid #bbb;
  5. text-align: justify;
  6. padding: 3px;
  7. padding-bottom: 8px;
  8. vertical-align: top;
  9. font-size: 90%;
  10. width: 80px;
  11. }
  12.  
  13. .login_tdval
  14. {
  15. padding-top: 10px;
  16. width: 120px;
  17. }
  18.  
  19. .login_input
  20. {
  21. width: 120px;
  22. }
  23.  

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

  1.  
  2. <script type="text/javascript" src="js/jquery.js"></script>
  3. <script>
  4. $(document).ready(function()
  5. {
  6. $('#btn_dummylogin').click(function()
  7. {
  8. str = 'action=dummylogin&';
  9. str += $('#dummylogin').serialize();
  10. $.ajax(
  11. {
  12. url: 'samples/dummy-ajax.php',
  13. type: 'post',
  14. data: str,
  15. dataType: 'json',
  16. success: function(json)
  17. {
  18. if(json.status != 'SUCCESS')
  19. {
  20. alert('Вам не удалось угадать имя пользователя или пароль');
  21. }
  22. else
  23. {
  24. alert('Бинго! Точно в цель! Но, как Вы узнали?');
  25. }
  26. }
  27. });
  28. });
  29. });
  30. </script>
  31.  

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

  1.  
  2. <?
  3. $options = array();
  4. foreach($_POST as $key => $val)
  5. {
  6. $options[$key] = mb_convert_encoding($val, 'windows-1251', 'utf-8');
  7. }
  8. $action = '';
  9. extract($options, EXTR_OVERWRITE);
  10.  
  11. $json['status'] = 'FAILED';
  12. {
  13. switch($action)
  14. {
  15. case 'dummylogin':
  16. if(defined('LOADPASSFILE'))
  17. {
  18. $json['status'] = 'ACCESS_DENIED';
  19. break;
  20. }
  21. else
  22. {
  23. define('LOADPASSFILE', time());
  24. include_once('samples/dummypass.php');
  25. if(isset($pwdarray)
  26. && isset($pwdsalt)
  27. && isset($pwdarray[$name])
  28. && $pwdarray[$name] === md5($pass.$pwdsalt))
  29. {
  30. $json['status'] = 'SUCCESS';
  31. }
  32. }
  33. break;
  34.  
  35. default:
  36. $json['status'] = 'NO_ACTION';
  37. break;
  38. }
  39. }
  40. $json['out'] = ob_get_clean();
  41. $res = json_encode($json);
  42. mb_convert_encoding($res, 'utf-8', 'windows-1251');
  43. echo $res;
  44. ?>
  45.  

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

  1.  
  2. <?
  3. if(!defined('LOADPASSFILE'))
  4. {
  5. echo 'ACCESS_DENIED';
  6. return;
  7. }
  8.  
  9. if(isset($pwdarray))
  10. {
  11. unset($pwdarray);
  12. }
  13. ?>
  14.  
  15. <?
  16. $pwdsalt = 'salt';
  17. $pwdarray = array(
  18. 'user' => md5('pass'.$pwdsalt)
  19. );
  20. ?>
  21.  

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

Читайте в блоге

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

Комментарии:

Войдите на сайт, чтобы оставить комментарий