SimpleCoding.org http://www.simplecoding.org Блог о программировании Sun, 05 Jul 2009 18:27:56 +0000 en hourly 1 simplecodinghttp://feedburner.google.comSubscribe with My Yahoo!Subscribe with NewsGatorSubscribe with My AOLSubscribe with BloglinesSubscribe with NetvibesSubscribe with GoogleSubscribe with Pageflakes?????? ? ??????.?????Subscribe with pusk.ru JavaScript: полезные события http://www.simplecoding.org/javascript-poleznye-sobytiya.html http://www.simplecoding.org/javascript-poleznye-sobytiya.html#comments Sun, 05 Jul 2009 18:27:56 +0000 Владимир http://www.simplecoding.org/?p=862 input event

Недавно мне нужно было написать обычный счетчик символов в текстовой области (textarea). Задача тривиальная, но меня заинтересовал один нюанс.

Вопрос в том, какое событие обрабатывать?

Пользователь может вводить текст как угодно, с помощью клавиатуры, вставлять из буфера обмена.
Если ввод происходит с помощью клавиатуры или из буфера комбинацией клавиш Ctrl+V, то можно обрабатывать событие onKeyup. Но если текст вставлен с помощью контекстного меню, то onKeyup не работает (действительно, ведь клавиатуру мы не трогаем). Точно также не имеет смысла обрабатывать события мыши. Ведь клик выполняется по контекстному меню, а обработчик мы назначаем для textarea.

Событие onChange тоже не подходит, т.к. оно появляется после того как textarea теряет фокус.

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

Но я решил поискать. И прежде всего, отправился поэкспериментировать с формой twitter’а. Первый же эксперимент дал положительный результат. Вставка через контекстное меню изменила значение счетчика.

Сначала я подумал, что они решают задачу с помощью таймера и проверок длины поля через заданный интервал времени. Но потом я заметил, что эта функция работает только в FireFox и не работает в IE.

А чем отличается Firefox от IE? Конечно, поддержкой новых стандартов!

После этого я быстро нашел нужное событие. Оно называется input и определено в спецификации DOM Level 3 Load And Save.
Это событие возникает сразу после ввода любых символов в поле не зависимо от способа ввода.

Чтобы не оставаться голословным я привожу страницу, с которой экспериментировал.

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.  
  6. <head>
  7.     <title>textArea</title>
  8.  
  9.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  10.     <meta http-equiv="Content-Style-Type" content="text/css" />
  11.  
  12. </head>
  13.  
  14. <body>
  15.  
  16. <div><textarea id="messageText" cols="45" rows="15"></textarea></div>
  17.  
  18. <div>Количество символов: <span id="symbolsCounter"></span></div>
  19.  
  20. <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
  21. <script type="text/javascript">
  22. $(function() {
  23.     var ta = $("#messageText");
  24.     var counter = $("#symbolsCounter");
  25.     counter.html(ta.val().length);
  26.     if ($.browser.mozilla && $.browser.version.substr(0,3)=="1.9") {
  27.        ta.bind("input", function() {
  28.            updateCounter();
  29.         });
  30.     }
  31.     else {
  32.         ta.bind("keyup", function() {
  33.             updateCounter();
  34.         });
  35.     }
  36.    
  37.     function updateCounter() {
  38.         counter.html(ta.val().length);
  39.         var split = ta.val().split("\n");
  40.         if (split.length > 15) {
  41.             ta.attr("rows", split.length);
  42.         }
  43.     }
  44. });
  45. </script>
  46. </body>
  47. </html>

На странице размещены текстовая область (строка 16) и блок для вывода количества символов (строка 18).

Наибольший интерес представляет JS код. Посмотрим, как он работает.

Прежде всего, проверяем какой браузер используется. Если это FireFox последних версий, назначаем для текстовой области обработчик события input (строки 26-29), если нет – будем обрабатывать keyup (строки 31-34).

При возникновении этих событий вызывается функция updateCounter, в которой мы определяем и показываем количество символов в текстовой области (строка 38).

Остальной код в функции updateCounter испольлзуется для изменения высоты текстовой области, если введенный текст превышает её размер. Алгоритм тут простой.

Разбиваем текст с помощью функции split на лексемы (строка 39), а в качестве разделителя используем символ конца строки. В результате получаем массив с количеством элементов равным количеству строк. Если это количество превысит дефолтное значение (15) – изменяем размер текстовой области (строки 40-42).

Как видите, в новых стандартах есть интересные и, самое главное, полезные нововведения.

Жаль, что разработчики браузеров от них сильно отстают.

Интересно почитать

Реклама в блогах от студии SMOpro -
наиболее эффективный способ продвижения вашего ресурса.

]]> http://www.simplecoding.org/javascript-poleznye-sobytiya.html/feed Phing: backup и сохранение в Subversion базы данных http://www.simplecoding.org/phing-backup-i-soxranenie-v-subversion-bazy-dannyx.html http://www.simplecoding.org/phing-backup-i-soxranenie-v-subversion-bazy-dannyx.html#comments Mon, 29 Jun 2009 13:47:29 +0000 Владимир http://www.simplecoding.org/?p=859 phing mysql subversion

В этой заметке я хочу показать несложный пример использования Phing для создания резервных копий базы данных (MySQL) и их отправки в репозиторий Subversion.

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

Примечание. Если вы слышите слово Phing впервые, то, думаю, вам будет интересно почитать статью Программирование на PHP. Избавляемся от рутинных операций с помощью Phing, а может быть и весь раздел Phing этого блога ;)

Возвращаемся к нашей задаче.

Для создания резервной копии базы можно использовать утилиту mysqldump. В её параметрах нужно указать имя пользователя базы, его пароль и название базы. Дополнительно нужно задать имя файла в который мы сохраняем дамп.

Например, так

  1. mysqldump -uпользователь -pпароль название_базы > dump.sql

Для сохранения файла в Subversion используется команда commit.

  1. svn.exe commit -m “db_backup” –username имя –password пароль имя_файла

Здесь мы указываем текст сообщения (после параметра -m), имя пользователя Subversion, его пароль и имя файла, который нужно сохранить.

Примечание. Подробнее об этой системе контроля версий можно почитать в разделе Subversion.

Теперь рассмотрим build-файл.

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project name="DbBackup" default="commit" basedir=".">
  3.  
  4.     <property name="DUMP_FILE" value="dump.sql" />
  5.     <property name="MYSQL_PATH" value="путь_к_mysql" />
  6.     <property name="DB_NAME" value="имя_базы_данных" />
  7.     <property name="DB_HOST" value="localhost" />
  8.     <property name="DB_USER" value="имя_пользователя_mysql" />
  9.     <property name="DB_PASS" value="пароль_mysql" />
  10.    
  11.     <property name="SVN_USER" value="имя_пользователя_subversion" />
  12.     <property name="SVN_PASS" value="пароль_subversion" />
  13.    
  14.     <target name="backup">
  15.         <exec command="${MYSQL_PATH}mysqldump -u${DB_USER} -p${DB_PASS} ${DB_NAME} > ${DUMP_FILE}" dir="." />
  16.     </target>
  17.    
  18.     <target name="commit" depends="backup">
  19.         <exec command="svn.exe commit -m "db_backup" –username ${SVN_USER} –password ${SVN_PASS} ${DUMP_FILE}" dir="." />
  20.     </target>
  21. </project>

Как видите, большую часть файла занимают свойства (имена, пароли, адрес сервера, размещение mysqldump).

В принципе, их можно было указать прямо в командах, но в большинстве случаев build-файлы гораздо сложнее. И сложно сказать заранее, что какое-то значение будет использован только один раз. Поэтому удобнее задать их один раз в начале файла.

Для выполнение наших команд мы использовали стандартную задачу exec. Как несложно догадаться она просто выполняет указанную команду.

Обратите внимание, что внутри команды использовать кавычки нельзя. Их заменяют эскейп последовательностью ".

Думаю, вы догадались, что используя такие build-файлы можно автоматизировать работу с любыми консольными программами.

Конечно, создание самого build-файла отнимает немного времени, но вы быстро его вернете и, кроме того, будете делать меньше ошибок (особенно если нужно выполнять длинные последовательности операций).

И в заключение, небольшой совет. По-умолчанию Phing не выводит результат выполнения команды. Т.е. вы не знаете выполнилась на самом деле команда или нет.

Например, если в данном примере написать sbn.exe вместо svn.exe и запустить этот build-файл, то в результате вы увидите обычное сообщение BUILD FINISHED. Естественно, новая версия файла в репозитории сохранена не будет.

Поэтому на этапе тестирования очень полезно запускать phing с параметром -verbose.

  1. phing -verbose

В этом случае вы увидите множество интересных сообщений и в том числе

“sbn.exe” не является внутренней или внешней командой …

После того, как вы убедитесь, что всё работает правильно, можно перейти обычный режим.

Время – деньги. Цените его! :)

]]> http://www.simplecoding.org/phing-backup-i-soxranenie-v-subversion-bazy-dannyx.html/feed Откат базы данных и проблема с кодировками http://www.simplecoding.org/otkat-bazy-dannyx-i-problema-s-kodirovkami.html http://www.simplecoding.org/otkat-bazy-dannyx-i-problema-s-kodirovkami.html#comments Tue, 23 Jun 2009 09:39:15 +0000 Владимир http://www.simplecoding.org/?p=857 db_restore

Сегодня я хочу рассказать об одних граблях на которые сам недавно наступил.

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

А ситуация была такая. Я написал статью «jqGrid: редактирование табличных данных с помощью inline редакторов» и сделал демонстрационную страничку.

Для того, чтобы таблица не была пустой, я сделал дамп моей локальной базы и через phpMyAdmin залил его в базу на сервере.

При этом никаких проблем с кодировками не возникало вообще. Т.е. у меня везде была указана utf-8, она и использовалась.

Тут возникает обычная проблема.

Работать с таблицей может кто угодно, а вручную следить за тем, кто и что написал, у меня нет ни времени, ни желания.

Поэтому я создал задачу для Cron, которая периодически выполняет команду

  1. mysql –user=db_user –password=db_pass db_name < /path_to_dump_file/dump.sql

Т.е. просто восстанавливает базу из файла с дампом.

И через некоторое время я замечаю (точнее мне пишут в комментариях, спасибо Big_Shark), что часть записей в таблице отображается кракозябрами.

Поначалу я подумал, что дело в каком-то бразузере, но оказалось, что и в FireFox, и в Opera, и в Safari, и в IE никаких проблем с кодировками нет.

Да и в любом случае данные на сервер отправляются AJAX запросом, а в них всегда используется UTF-8.

Понял в чем дело я только после того как попытался на локальном компьютере восстановить базу из дампа (через командную строку). В общем, mysql нужно явно указывать кодировку.

Для этого в командную строку добавляем параметр --default_character_set=utf8

  1. mysql –user=db_user –password=db_pass –default_character_set=utf8 db_name < /path_to_dump_file/dump.sql

На локальном сервере этот параметр решил проблему, но на сервере хостера – нет.

Поэтому в начало дампа базы я добавил запрос

  1. SET CHARACTER SET utf8;

И он полностью решил проблему.

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

Happy coding!

]]> http://www.simplecoding.org/otkat-bazy-dannyx-i-problema-s-kodirovkami.html/feed Динамическая загрузка картинок для анонсов с помощью Ajax, jQuery и PHP http://www.simplecoding.org/dinamicheskaya-zagruzka-kartinok-dlya-anonsov-s-pomoshhyu-ajax-jquery-i-php.html http://www.simplecoding.org/dinamicheskaya-zagruzka-kartinok-dlya-anonsov-s-pomoshhyu-ajax-jquery-i-php.html#comments Sat, 20 Jun 2009 12:31:18 +0000 Владимир http://www.simplecoding.org/?p=854 ajax_image_load

Идею этого эффекта я нагло стырил позаимствовал на сайте jomsocial. Там есть блоки (под кнопкой Learn More) с анонсами. При наведении мышки на эти блоки к ним добавляется картинка.

Реализовать такой эффект можно разными способами. Например, можно теги картинок вставить прямо в страницу и прятать/показывать их с помощью JavaScript.

Основное достоинство такого варианта – отсутствие задержек при появлении картинок (если конечно вы подождали пока страница полностью загрузится).

Но при этом увеличивается размер страницы и не факт, что посетитель вообще будет эти картинки рассматривать.

Поэтому я решил привести пример своей реализации этого эффекта.

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

Если посетитель наведет курсор мышки на другую аннотацию, будет загружена картинка для неё, а предыдущая – исчезнет.

Говорят, что одна картинка стоит тысячи слов, поэтому я сделал демонстрационную страничку для этого примера.

демонстрационный пример

Сразу же выкладываю архив с исходниками.

архив с исходным кодом

А теперь разберем как это все работает.

Допустим у нас есть страница (index.html) со следующей разметкой.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <head>
  6.     <title>Пердпросмотр с картинками</title>
  7.  
  8.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  9.     <meta http-equiv="Content-Style-Type" content="text/css" />
  10.  
  11.     <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
  12. </head>
  13.  
  14. <body>
  15.  
  16. <div id="content">
  17.     <div id="leftCol">
  18.         <div id="butterfly" class="annotaionBlock">…</div>
  19.         <div id="tiger" class="annotaionBlock">…</div>
  20.         <div id="elephant" class="annotaionBlock">…</div>
  21.         <div id="wolf" class="annotaionBlock">…</div>
  22.         <div id="fish" class="annotaionBlock">…</div>
  23.     </div>
  24.     <div id="rightCol">
  25.         <div id="whale" class="annotaionBlock">…</div>
  26.         <div id="flamingo" class="annotaionBlock">…</div>
  27.         <div id="bear" class="annotaionBlock">…</div>
  28.         <div id="dog" class="annotaionBlock">…</div>
  29.         <div id="cat" class="annotaionBlock">…</div>
  30.     </div>
  31. </div>
  32.  
  33. </body>
  34. </html>

Сразу обратите внимание на блок content. Он состоит из двух колонок (leftCol и rightCol) в которых размещены аннотации.

Всем аннотациям присвоен CSS класс annotaionBlock и уникальный id. Этот id будет использоваться для определения нужной картинки.

Сами аннотации представляют собой обычный текст с HTML разметкой или без неё.

Теперь напишем JS скрипт, который будет подгружать картинки.

  1. <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
  2. <script type="text/javascript">
  3. $(function() {
  4.     $('.annotaionBlock').hover(
  5.         function(event) {
  6.             var curAnnotation = $(this);
  7.             var curId = curAnnotation.attr('id');
  8.             var annotImg = curAnnotation.children('.annotImg');
  9.             if (annotImg.length == 0) {
  10.                 $.get('getimage.php', {img : curId}, function(data) {
  11.                     annotImg = $('<div class="annotImg"><img src="' + data + '" alt="Картинка" /></div>').hide();
  12.                     curAnnotation.append(annotImg);
  13.                     $('.annotImg').not(this).slideUp('fast');
  14.                     annotImg.slideDown('fast');
  15.                 });
  16.             }
  17.             else {
  18.                 $('.annotImg').not(annotImg).slideUp('fast');
  19.                 annotImg.slideDown('fast');
  20.             }
  21.         },
  22.         function() {
  23.         }
  24.     );
  25. });
  26. </script>

Прежде всего мы подключаем библиотеку jQuery и пишем функцию, которая будет вызвана сразу после загрузки страницы (строки 3-25).

В этой функции мы объявляем обработчик события hover для всех элементов страницы с классом annotaionBlock, т.е. для всех наших аннотаций.

В качестве параметров этому обработчику передается 2 функции. Первая будет вызвана при появлении мышки над блоком, вторая – при выходе из него.

Вторую функцию (строки 22-23) мы оставляем пустой, т.к. вставлять и прятать картинки будем в первой.

Алгоритм работы.

1) При появлении курсора над аннотацией, сохраняем указатель на неё и её id (строки 6-7).

2) Проверяем загружен ли рисунок для данной аннотации (строки 8-9) и если нет, выполняем AJAX запрос к серверному (PHP) скрипту, в параметрах которого передаем id блока (строки 10-15).

3) После получения ответа сервера создаем скрытый тег img и вставляем его в конец блока с аннотацией (строки 11, 12). После этого применяем эффект slideUp ко всем картинкам в блоках с аннотацией кроме текущей (строка 13). И с помощью эффекта slideDown показываем картинку для данной аннотации (строка 14).

4) Если картинка была вставлена раньше, то AJAX запрос мы не отправляем, а просто показываем её и прячем остальные (с помощью эффектов slideUp и slideDown, строки 18-19).

Обратите внимание. Если применять эффекты slideDown и slideUp непосредственно к тегу img картинка будет плавно изменять как вертикальный, так и горизонтальный размеры. Т.е. она будет «выезжать» из левого верхнего угла.
Чтобы изменялась только высота картинки нужно поместить её внутрь тега div и примерять эффекты к нему.

Серверная часть

PHP скрипт, который обрабатывает запросы на получение картинок (getimage.php) должен прочитать id запрашиваемой картинки и вернуть соответствующую ссылку.

Эти ссылки можно хранить в БД или текстовом файле, выбирать случайным образом или однозначно связать с аннотациями. Всё это зависит от конкретной ситуации. Мы ограничимся простейшим вариантом с использованием оператора switch.

  1. $image = $_GET['img'];
  2.  
  3. switch ($image) {
  4.     case 'butterfly': echo 'http://farm1.static.flickr.com/152/408688454_2d868d0104_m.jpg'; break;
  5.     case 'tiger': echo 'http://farm4.static.flickr.com/3284/2507729467_915274dab3_m.jpg'; break;
  6.     case 'elephant': echo 'http://farm3.static.flickr.com/2377/1520324747_e468eab773_m.jpg'; break;
  7.     case 'wolf': echo 'http://farm1.static.flickr.com/177/402657323_ebf5c7ce51_m.jpg'; break;
  8.     case 'fish': echo 'http://farm2.static.flickr.com/1084/892454941_56fd34ac3c_m.jpg'; break;
  9.     case 'whale': echo 'http://farm3.static.flickr.com/2401/2052477420_fe7fb452b0_m.jpg'; break;
  10.     case 'flamingo': echo 'http://farm4.static.flickr.com/3303/3557243577_3c1bab1ec3_m.jpg'; break;
  11.     case 'bear': echo 'http://farm1.static.flickr.com/172/401014816_9d879ceac6_m.jpg'; break;
  12.     case 'dog': echo 'http://farm1.static.flickr.com/68/215233902_0f2d1ac9e5_m.jpg'; break;
  13.     case 'cat': echo 'http://farm3.static.flickr.com/2068/2532467266_d8b5c9ea15_m.jpg'; break;
  14. }

Как видите, у нас есть десять аннотаций и каждой соответствует своя ссылка.

И в заключение несколько слов об оформлении страницы.

Размещение аннотаций и их внешний вид задаётся с помощью CSS стилей (файл styles.css).

Я приведу только его фрагмент, который создаёт две колонки (в архиве вы найдете полный вариант).

  1. #content {
  2.     width: 600px;
  3.     margin: auto;
  4.     text-align: justify;
  5. }
  6.  
  7. #leftCol {
  8.     float: left;
  9.     width: 299px;
  10. }
  11.  
  12. #rightCol {
  13.     margin-left: 301px;
  14. }

Как видите, ширину всего блока с аннотациями мы установили равной 600px. Для левой колонки указали правило float: left и ширину 299px, а для правой – отступ слева 301px (внутри этого отступа будет находится левая колонка).

Вот и всё. На мой взгляд, эффект довольно симпатичный, но подходит не для всех сайтов.

Как всегда, буду рад ответить на вопросы и выслушать замечания.

До встречи!

Интересно почитать

Актуально про seo и поисковые системы от SeoProfy

]]> http://www.simplecoding.org/dinamicheskaya-zagruzka-kartinok-dlya-anonsov-s-pomoshhyu-ajax-jquery-i-php.html/feed jqGrid: редактирование табличных данных с помощью inline редакторов http://www.simplecoding.org/jqgrid-redaktirovanie-tablichnyx-dannyx-s-pomoshhyu-inline-redaktorov.html http://www.simplecoding.org/jqgrid-redaktirovanie-tablichnyx-dannyx-s-pomoshhyu-inline-redaktorov.html#comments Sat, 13 Jun 2009 18:09:18 +0000 Владимир http://www.simplecoding.org/?p=852 jqgrid

В одной из прошлых статей (jQuery Grid Plugin - "продвинутое" решение для создания таблиц) я рассказывал об использовании jqGrid для создания таблиц.

jqGrid представляет собой плагин к библиотеке jQuery предназначенный для работы с таблицами. С его помощью можно создавать многостраничные таблицы, выполнять сортировку и, конечно, редактировать данные.

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

Прежде всего, напомню, что данные хранятся на стороне сервера (в базе данных) и плагин к ним непосредственного доступа не имеет. Он может только вызвать серверный (PHP) скрипт и передать ему новые значения.

Редактировать записи в таблице можно 2 способами.

1) В отдельном окне. При редактировании строки появляется окно со всеми полями, в которые нужно ввести новые значения. Клик по кнопке «OK» отправит данные серверу.

2) С использованием inline редакторов. В режиме редактирования текст строки заменяется полями для ввода данных. Нажатие на клавишу Enter отправляет измененные данные.

Общий принцип работы в обоих случаях один и тот же. Поэтому мы рассмотрим только один вариант (с использованием inline редакторов).

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

В тексте этой статьи приводить полный код скриптов нет смысла, остановимся только на тех моментах, которые касаются редактирования. Но вы можете скачать архив с этим примером и поэкспериментировать с демонстрационной страницей.

архив с исходным кодом

демонстрационный пример

Прежде всего, сделаем поля таблицы редактируемыми. Для этого нужно внести несколько изменений в скрипт, создающий таблицу.

  1. jQuery(document).ready(function(){
  2.     var lastSel;
  3.     jQuery("#list").jqGrid({
  4.         url:'getdata.php',
  5.         datatype: 'json',
  6.         mtype: 'POST',
  7.         colNames:['#', 'Фамилия', 'Имя', 'Отчество'],
  8.         colModel :[
  9.             {name:'id', index:'id', width:30}
  10.             ,{name:'surname', index:'surname', width:80, align:'right', editable:true, edittype:"text"}
  11.             ,{name:'fname', index:'fname', width:90, editable:true, edittype:"text"}
  12.             ,{name:'lname', index:'lname', width:80, align:'right', editable:true, edittype:"text"}
  13.             ],
  14.         pager: jQuery('#pager'),
  15.         rowNum:5,
  16.         rowList:[5,10,30],
  17.         sortname: 'id',
  18.         sortorder: "asc",
  19.         viewrecords: true,
  20.         imgpath: 'themes/basic/images',
  21.         caption: 'Данные пользователей',
  22.         ondblClickRow: function(id) {
  23.             if (id &amp;&amp; id != lastSel) {
  24.                 jQuery("#list").restoreRow(lastSel);
  25.                 jQuery("#list").editRow(id, true);
  26.                 lastSel = id;
  27.             }
  28.         },
  29.         editurl: 'saverow.php'
  30.     });
  31. });

В строке 2 мы добавили переменную lastSel, которая служит для хранения id строки, редактируемой в данный момент.

Также немного изменились строки 10-12 (по сравнению с предыдущим примером). В них перечислены параметры ячеек таблицы и для каждой ячейки (кроме первой, в которой хранится id записи) мы добавили параметры editable:true и edittype:"text".

Первый параметр делает ячейку редактируемой, второй – указывает, что в ячейке нужно создать обычное текстовое поле. Другие значения этого параметра: textarea, checkbox и select.

После этого создаем обработчик события ondblClickRow (строки 22-28). В нем мы проверяем что пользователь кликнул по строке и эта строка в данный момент не редактируется. Восстанавливаем значения в строке, которая редактировалась перед этим (с помощью restoreRow) и переводим новую строку в режим редактирования (функция editRow).

Обратите внимание на второй параметр функции editRow. Он должен быть равен true для того, чтобы сохранение данных выполнялось при нажатии на клавишу Enter.

И последнее изменение (строка 29). В параметре editurl указываем имя серверного скрипта, который будет сохранять данные.

Теперь остается только написать серверный (PHP) скрипт (saverow.php).

  1. <?php
  2. require_once('dbdata.php');
  3.  
  4. try {
  5.     //читаем новые значения
  6.     $id = $_POST['id'];
  7.     $surname = $_POST['surname'];
  8.     $fname = $_POST['fname'];
  9.     $lname = $_POST['lname'];
  10.    
  11.     //подключаемся к базе
  12.     $dbh = new PDO('mysql:host='.$dbHost.';dbname='.$dbName, $dbUser, $dbPass);
  13.     //указываем, мы хотим использовать utf8
  14.     $dbh->exec('SET CHARACTER SET utf8');
  15.  
  16.     //определяем количество записей в таблице
  17.     $stm = $dbh->prepare('UPDATE users SET surname=?, fname=?, lname=? WHERE id=?');
  18.     $stm->execute(array($surname, $fname, $lname, $id));
  19. }
  20. catch (PDOException $e) {
  21.     echo 'Database error: '.$e->getMessage();
  22. }
  23.  
  24. // end of saverow.php

Здесь мы читаем новые значения (названия параметров в массиве $_POST совпадают с названиями столбцов таблицы) (строки 6-9).

После этого подключаемся к базе и обновляем запись (строки 11-18). Чтобы показать основную идею я максимально сократил код, убрал проверки и использовал PDO для работы с базой.

Всё, теперь можно спокойно редактировать записи в таблице.

Если есть вопросы или замечания, пишите, постараюсь ответить ;)

До встречи!

]]> http://www.simplecoding.org/jqgrid-redaktirovanie-tablichnyx-dannyx-s-pomoshhyu-inline-redaktorov.html/feed WampServer: как я обновлял MySQL http://www.simplecoding.org/wampserver-kak-ya-obnovlyal-mysql.html http://www.simplecoding.org/wampserver-kak-ya-obnovlyal-mysql.html#comments Fri, 05 Jun 2009 18:52:39 +0000 Владимир http://www.simplecoding.org/?p=850 mysql_config

Эта история началась с того, что на днях я решил обновить софт для web разработки (apache + php + mysql). И для этого скачал последнюю версию wampserver'а.

Примечание. Почитать об этом дистрибутиве для web разработки можно в статье Инструменты web разработчика. WAMPSERVER 2 – только новый софт.

В принципе, отличия в номерах версий серверов были не большие и я думал, что никаких проблем не возникнет. Но, как оказалось, я ошибся. Серьезных проблем, конечно, не было, но "поиграться" с конфигами пришлось.

Для начала, хочу отметить, что сразу после установки wampserver'а все работает. Т.е. можно спокойно зайти в phpMyAdmin и посмотреть базы.

Но мне нужно было подключить свои старые базы. Они у меня хранятся отдельно, чтобы свести действия при переустановке к минимуму. MySQL хранит данные о пользователях, пароля в своих же БД. Т.е. достаточно в my.ini указать путь к ним и перезапустить сервер. И все данные автоматически подхватятся.

Путь к базам указываем в параметре

datadir=path_to_db

Кроме того, при обновлении сервера mysql нужно выполнить команду

mysql_upgrade --password=ваш_пароль

причем эта команда должна выполнятся при запущенном сервере.

И вот тут полезли ошибки. MySQL начал мне рассказывать, что движок InnoDB не поддерживается.

Смотрю в конфиг (my.ini). Действительно, есть целый блок закомментированных параметров перед которым написано "раскомментируйте строки ниже если хотите включить поддрежку InnoDB".

Ладно, решили по-умолчанию отключить поддержку, вам виднее. Снимаю комментарии в этом блоке, перезапускаю… не работает.

Отключаю поддержку InnoDB - снова запускается.

Пришлось смотреть лог ошибок MySQL.

Кстати, размещение этого файла указано в параметре log-error.

Как оказалось, ошибок было две.

1) В параметре innodb_log_file_size был установлено значения 5МБ, а реально размер этого файла был равен 10МБ (остался от прошлой инсталляции). Тут я просто изменил значение.

2) MySQL очень не понравился параметр innodb_log_arch_dir. И это не удивительно. Этот параметр запрещен (depricated) начиная с версии 5.0.24. Почему он попал в конфиг непонятно. Похоже, что разработчики wampserver’а вообще не проверяли работу с InnoDB. В общем, пока я его не закомментировал сервер не запустился.

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

Удачных обновлений!

Интересно почитать.

Padlik.ru - о том, как зарабатывать и, главное, на чем зарабатывать в интернете

]]> http://www.simplecoding.org/wampserver-kak-ya-obnovlyal-mysql.html/feed Как найти спамера в твиттере 2 http://www.simplecoding.org/kak-najti-spamera-v-tvittere-2.html http://www.simplecoding.org/kak-najti-spamera-v-tvittere-2.html#comments Mon, 01 Jun 2009 07:37:53 +0000 Владимир http://www.simplecoding.org/?p=844 twitter spam

Что-то последнее время не дает мне покоя twitter :)

Сервис очень интересный и предоставляет интересные возможности как для общения, так и для рассылки спама. Т.к. я рассылкой спама не занимаюсь, то меня больше интересуют методы борьбы со спамерами в твиттере. В одном из предыдущих постов я уже рассказывал о способе поиска «специалистов по продвижению», но за это время возникло ещё несколько идей, которыми я и хочу поделиться.

Идея очень простая - подсчет ответов пользователю.

Обратите внимание, не тех ответов, которые пользователь сам написал, а тех, которые написали ему.

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

Дальше возникает тонкий момент. При каком количестве ответов нужно считать пользователя спамером?

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

Проблема (спамеров) в том, что написать несколько десятков ОСМЫСЛЕННЫХ сообщений, на которые другой пользователь захочет ответить, очень сложно. А на общие фразы типа "спасибо" и "актуально" обычно никто не отвечает.

А дальше все просто. Нужно считать отношение ваших сообщений другим пользователям и сообщений, отправленных вам. Если этот параметр превысит определенное значение - пользователя в бан :)

Администраторы могут взять выборку 100% не спамерских аккаунтов, определить это соотношение для них и использовать его в качестве опорного.

Правда этот метод имеет уязвимость. Спамер может зарегистрировать несколько (десятков или сотен) аккаунтов и отвечать с них на свои же твиты.

Такой подход значительно усложняет ситуацию, но и тут есть решение.

Цель спамера – это не 10-100 фолловеров, а десятки тысяч. Поэтому если даже спамер отвечает сам себе с сотни аккаунтов, это означает, что с 99% он все равно не получает никаких ответов.

Зарегистрировать больше 100 аккаунтов довольно сложно, т.к. для этого нужно:
1) обойти captcha;
2) использовать разные IP (иначе вся эта деятельность будет выглядеть очень подозрительно).

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

Сложно, конечно, предсказать действия владельцев твиттера. Может, в рассылке спама они видят способ монетизации своего ресурса? И будут продавать специальные спамерские аккаунты? ;)

Но в любом случае, возможность найти спамеров у них есть.

Делайте выводы :)

Интересно почитать:

Может ли страдать тетрадка в клеточку,
или моральные проблемы создания искусственного интеллекта

]]> http://www.simplecoding.org/kak-najti-spamera-v-tvittere-2.html/feed Создаём виджет для хранения заметок. Часть 2. http://www.simplecoding.org/sozdayom-vidzhet-dlya-xraneniya-zametok-chast-2.html http://www.simplecoding.org/sozdayom-vidzhet-dlya-xraneniya-zametok-chast-2.html#comments Fri, 29 May 2009 10:42:59 +0000 Владимир http://www.simplecoding.org/?p=841 notes widget

В этой статье мы продолжаем разработку виджета для работы с короткими заметками. Если вы не читали предыдущую часть, то очень советую бегло её просмотреть. В ней мы подробно описаны постановка задачи и реализована серверная часть виджета, т.е. весь PHP код.

Для того, чтобы виджет заработал нам осталось написать клиентскую часть.

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

Поэтому основную часть клиентской части у нас будет занимать JavaScript код. А чтобы его сократить мы используем библиотеку jQuery с несколькими плагинами.

Кстати, есть демонстрационная страничка с этим виджетом.

демонстрационный пример

И, как и обещал, выкладываю архив с исходниками.

архив с исходным кодом

Прежде всего, рассмотрим разметку страницы (index.html).

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.     <title>Notes Widget</title>
  6.  
  7.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  8.     <meta http-equiv="Content-Style-Type" content="text/css" />
  9.    
  10.     <link rel="stylesheet" type="text/css" href="pagestyles.css" />
  11.     <link rel="stylesheet" type="text/css" href="widgetstyles.css" />
  12. </head>
  13. <body>
  14.     <div id="content">
  15. …. Содержимое страницы…
  16.     </div>
  17.  
  18.     <div id="notesWidget">
  19.         <div id="notesHeader">Мои заметки</div>
  20.         <div id="notes">
  21.         </div>
  22.         <form id="fAddNote" action="savenote.php" method="post">
  23.             <input type="text" id="addNote" name="addNote" value="" />
  24.             <input type="submit" name="bAddNote" id="bAddNote" value="" />
  25.         </form>
  26.     </div>
  27.  
  28.     <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  29.     <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
  30.     <script type="text/javascript" src="js/jquery.jeditable.mini.js"></script>
  31.     <script type="text/javascript" src="js/custom.js"></script>
  32. </body>
  33. </html>

В заголовке страницы мы подключаем файлы с CSS стилями (строки 13 и 14). Я вынес все стили, которые относятся к виджету в отдельный файл (widgetstyles.css), чтобы они не путались со стилями основной страницы.

Внутри страницы у нас находится 2 блока: основное содержимое (<div id="content">) и виджет (<div id="notesWidget">).

Первый блок нас не интересует, а вот на втором остановимся подробнее. Он состоит из трёх частей:

- заголовок (<div id="notesHeader">);
- блок заметок (<div id="notes">);
- блок с формой добавления заметки (<form id="fAddNote").

Обратите внимание, что блок заметок не заполнен. Внутрь него мы будем вставлять список заметок, полученный от сервера.

И в конце страницы мы подключаем jQuery, плагины и файл с нашими скриптами.

Сразу же рассмотрим используемые плагины.

1) jQuery UI. Это скорее не плагин, а целая библиотека. На её сайте вы можете выбрать необходимые компоненты и скачать архив с ними. Для нашего виджета нужны Core UI и Draggable. С их помощью мы сможем свободно перемещать виджет по странице.

2) Jeditable. С помощью этого плагина мы будем создавать in-line редакторы. Т.е. сделаем список с нашими заметками редактируемым. При клике по тексту заметки будет появляться поле ввода с помощью которого пользователь сможет изменить текст.

Теперь рассмотрим CSS стили минимально необходимые для работы плагина. Полный файл со стилями вы можете посмотреть в архиве с исходниками. К тому же при использовании виджета его оформление наверняка придется подстраивать под дизайн страницы.

  1. #notesWidget {
  2.     position: absolute;
  3.     top: 200px;
  4.     left: 0;
  5.     width: 200px;
  6.     height: 300px;
  7.     ….
  8. }
  9.  
  10. #notesHeader {
  11.     cursor: move;
  12.     ….
  13. }
  14.  
  15. #notes {
  16.     overflow: scroll;
  17.     ….
  18. }

Для того, чтобы виджет можно было перемещать по странице, он должен иметь абсолютное позиционирование. При этом необходимо задать его размеры и положение.

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

И, т.к. заметок может быть много, добавим прокрутку в блок notes.

Теперь переходим к самой интересной части – нашему JavaScript файлу (custom.js).

  1. $(function() {
  2.     //делаем виджет перемещаемым
  3.     $('#notesWidget').draggable({
  4.         handle: '#notesHeader'
  5.         , containment: 'parent'
  6.     });
  7.     //обработчик нажатия на кнопку добавления новой записи
  8.     $('#bAddNote').click(function() {
  9.         if ($('#addNote').val() != ") {
  10.             //сохраняем запись
  11.             $.post('savenote.php', {value:$('#addNote').val(), bAddNote:true},
  12.                     function(noteid) {
  13.                 //добавляем запись в список
  14.                 var curDate = new Date();
  15.                 var noteData = {id:noteid, note_text:$('#addNote').val(),
  16.                     note_date:curDate.toString()};
  17.                 var note = $(createListElement(noteData));
  18.                 $('#notes ul').prepend(note);
  19.                 $('.edit').editable('savenote.php');
  20.                 note.children('.remove').click(function() {addRemove(this);});
  21.                
  22.                 refreshClasses();
  23.             });
  24.         }
  25.         else {
  26.             alert('Вы ничего не написали');
  27.         }
  28.        
  29.         return false;
  30.     });
  31.     //загружаем список записей
  32.     $.getJSON('getnotes.php', {}, function(data, status) {
  33.         if (data.status == 'OK') {
  34.  
  35.             //формируем список
  36.             var notesList = '<ul>';
  37.             $.each(data.notes, function(i, note) {
  38.                 notesList += createListElement(note);
  39.             });
  40.             notesList += '</ul>';
  41.  
  42.             $('#notes').html(notesList);
  43.            
  44.             //делаем записи редактируемыми
  45.             $('.edit').editable('savenote.php');
  46.            
  47.             //добавляем обработчики нажатия на кнопку удаления записи
  48.             $('.remove').click(function() {addRemove(this);});
  49.            
  50.             refreshClasses();
  51.         }
  52.         else {
  53.             //вывод сообщения об ошибке
  54.             $('#notes').html('<p>Не могу загрузить список записей</p>');
  55.         }
  56.     });
  57. });
  58.  
  59. function createListElement(note) {
  60.     return '<li>'
  61.         + '<img src="images/removenote.gif" alt="Удалить" class="remove" />'
  62.         + '<div class="edit" id="note_' + note.id + '">'
  63.         + note.note_text + '</div>'
  64.         + '<div class="notedate">' + note.note_date + '</div>'
  65.         + '</li>';
  66. }
  67.  
  68. function addRemove(element) {
  69.     var noteid = $(element).next().attr('id');
  70.    
  71.     //удаляем запись
  72.     $.post('removenote.php', {id:noteid}, function() {
  73.         //убираем данную запись из списка
  74.         $(element).parent().slideUp("slow", function() {
  75.             $(this).remove();
  76.             refreshClasses();
  77.         });
  78.     });
  79. }
  80.  
  81. function refreshClasses() {
  82.     var odds = $('#notes ul li:odd');
  83.     odds.removeClass('even');
  84.     odds.addClass('odd');
  85.     var evens = $('#notes ul li:even');
  86.     evens.removeClass('odd');
  87.     evens.addClass('even');
  88. }

Рассмотрим его подробнее.

Прежде всего, сделаем виджет перемещаемым (строки 3-6). Параметр handle указывает, что блок можно будет перемещать только за заголовок, а containment – запрещает выводить блок за пределы страницы.

Затем, мы создаем обработчик нажатия на кнопку «Добавить» (строки 8-30). В нём мы проверяем, ввел ли пользователь текст новой заметки и отправляем AJAX запрос.

После получения ответа будет вызвана анонимная функция (строки 12-23), которая:

1) создает элемент списка с новой записью (с помощью функции createListElement, её мы рассмотрим чуть ниже);

2) вставляет его в начало общего списка;

3) делает редактируемым (с помощью метода editable);

4) добавляет обработчик нажатия на кнопку «Удалить» (вызывает функцию addRemove);

5) и обновляет цвет фона записей (с помощью функции refreshClasses).

Теперь рассмотрим функцию createListElement (строки 59-66). Её основная задача – создать разметку новой записи.

Запись состоит из текста, кнопки «Удалить» (точнее это обычный рисунок, которому назначается обработчик события click), и даты. Оформление записи выполняется с помощью CSS стилей, но на них я останавливаться не буду, в них ничего примечательного нет, к тому же они в любом случае должны сочетаться с конкретной страницей (если интересно, качайте архив с виджетом).

В разметке записи стоит обратить внимание на два момента.

1) Тексту записи присваивается класс edit (<div class="edit"…). С его помощью мы выбираем элементы для которых создаются in-line редакторы.

2) Этому же элементу мы присваиваем атрибут id в формате (note_№), его значение используется при изменении и удалении заметок.

Следующая функция addRemove (строки 68-79).

Здесь выполняется AJAX запрос на удаление заметки (строка 72) и после этого заметка удаляется из списка. При этом используется эффект slideUp.

Теперь рассмотрим функцию refreshClasses (строки 81-88).

Она работает следующим образом.

1) Находим все нечетные элементы в списке заметок.

2) Устанавливаем для них класс odd и убираем even (если он был установлен).

3) Находим все четные элементы списка и устанавливаем для них класс even.

Стили для классов odd и even указаны в CSS файле (widgetstyles.css). Т.е. с помощью этой функции мы всегда можем обновить расцветку списка после добавления или удаления элементов.

Теперь рассмотрим загрузку полного списка записей (строки 32-56). Она выполняется сразу после загрузки страницы.

Мы отправляем AJAX запрос (с помощью метода getJSON) и после получения ответа формируем HTML список с заметками. Точно также как и при добавлении заметки устанавливаем обработчики нажатия на кнопку «Удалить», делаем записи редактируемыми и обновляем стили.

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

P.S. В архиве с исходниками есть файл notes.sql с помощью которого можно создать таблицу в базе данных.

Интересно почитать:

Закат Веба?

]]> http://www.simplecoding.org/sozdayom-vidzhet-dlya-xraneniya-zametok-chast-2.html/feed Создаём виджет для хранения заметок. Часть 1. http://www.simplecoding.org/sozdayom-vidzhet-dlya-xraneniya-zametok-chast-1.html http://www.simplecoding.org/sozdayom-vidzhet-dlya-xraneniya-zametok-chast-1.html#comments Wed, 27 May 2009 09:15:29 +0000 Владимир http://www.simplecoding.org/?p=839 notes widget

Приветствую всех!

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

Код виджета не сложный, но требует использования сразу нескольких технологий: PHP и MySQL на стороне сервера, HTML, CSS, JavaScript – на стороне клиента, поэтому я разбил статью на 2 части. В первой мы рассмотрим серверную часть кода, во второй – клиентскую.

Чтобы лучше понять, что мы получим в результате, взгляните на демонстрационную страничку

демонстрационный пример

Если задача ясна, приступим к делу.

Начнем с базы данных.

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

Создаём таблицу notes с тремя полями:
id – первичный ключ;
note_text (тип varchar(300)) – текст заметки (длина не более 300 символов);
note_date (тип datetime) – дата создания заметки.

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

Т.к. пример довольно простой, то в использовании фреймворка я смысла не вижу, а для работы с базой будем использовать PDO.

Создаём скрипт с параметрами подключения к БД (db.inc.php).

  1. <?php
  2.  
  3. $dbName   = 'database_name';
  4. $dbUser   = 'database_user';
  5. $dbPass   = 'database_password';
  6. $dbServer = 'localhost';
  7.  
  8. // end of db.inc.php

Его мы будем включать во все скрипты, которые работают с базой.

Теперь напишем скрипт, возвращающий список записей (getnotes.php).

  1. <?php
  2.  
  3. include_once('db.inc.php');
  4.  
  5. $results = array();
  6.  
  7. try {
  8.     $dbh = new PDO('mysql:host='.$dbServer.';dbname='.$dbName, $dbUser, $dbPass);
  9.     $dbh->exec('SET CHARACTER SET utf8');
  10.     $notes = $dbh->query('SELECT * FROM notes ORDER BY note_date DESC');
  11.     $dbh = null;
  12.    
  13.     $results['status'] = 'OK';
  14.     $results['notes'] = $notes->fetchAll(PDO::FETCH_ASSOC);
  15.    
  16.     echo json_encode($results);
  17. }
  18. catch (PDOException $e) {
  19.     $results['status'] = 'ERR';
  20.     $results['message'] = 'Ошибка при работе с БД: '.$e->getMessage();
  21.    
  22.     echo json_encode($results);
  23. }
  24.  
  25. // end of getnotes.php

Разберём, что здесь происходит.

Прежде всего, мы подключаем файл db.inc.php. И создаём объект PDO (строка 8).

Затем выполняем 2 запроса. С помощью первого (строка 9) настраиваем кодировку, а с помощью второго – получаем список записей, отсортированный по их датам в убывающем порядке. Таким образом, самые новые записи окажутся в начале списка.

После этого, формируем массив с результатами (строки 13 и 14), преобразуем его в JSON формат и отправляем браузеру, строка 16.

С помощью параметра status мы указываем удачно или нет, завершился запрос к базе.

Теперь рассмотрим скрипт сохранения записи (savenote.php). Он немного сложнее, т.к. наш позволяет, как изменять существующие записи, так и создавать новые.

  1. <?php
  2.  
  3. include_once('db.inc.php');
  4.  
  5. try {
  6.     $newNote = false;
  7.     if (isset($_REQUEST['bAddNote'])) {
  8.         $newNote = true;
  9.     }
  10.     else {
  11.         $id = $_REQUEST['id'];
  12.         $id = substr($id, 5);
  13.     }
  14.     $text = $_REQUEST['value'];
  15.    
  16.     $dbh = new PDO('mysql:host='.$dbServer.';dbname='.$dbName, $dbUser, $dbPass);
  17.     $dbh->exec('SET CHARACTER SET utf8');
  18.     if ($newNote) {
  19.         $stmt = $dbh->prepare('INSERT INTO notes (note_text, note_date) VALUES (?, NOW())');
  20.         $stmt->execute(array($text));
  21.         echo $dbh->lastInsertId();
  22.     }
  23.     else {
  24.         $stmt = $dbh->prepare('UPDATE notes SET note_text=?, note_date=NOW() WHERE id=?');
  25.         $stmt->execute(array($text, $id));
  26.         echo $text;
  27.     }
  28.     $dbh = null;
  29. }
  30. catch (PDOException $e) {
  31.     echo 'Не могу сохранить запись';
  32. }
  33.  
  34. // end of savenote.php

Разница между изменением записи и созданием новой в том, что пользователь нажимает на кнопку «Добавить запись». Т.е. скрипту будет передан параметр bAddNote (это значение атрибута name кнопки).

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

Тут есть один нюанс. Когда мы показываем список записей в виджете, то как-то должны сохранять их номера (поле id в БД). В данном примере для этой цели используется атрибут id элементов списка (теги li), но значение этого атрибута не может начинаться с цифры, поэтому мы будем записывать их в виде note_№ (например, note_1, note_2 и т.д.).

Для того чтобы получить id записи мы удаляем первые пять символов, т.е. note_ из полученного значения (строка 12).

Дальше мы формируем запрос либо на обновление (строка 24), либо на создание новой записи (строка 19).

Что касается возвращаемых значений, то при обновлении мы возвращаем браузеру новый текст записи, а при создании новой записи – её id в базе.

И последний PHP скрипт removenote.php – предназначен для удаления записей.

  1. <?php
  2.  
  3. include_once('db.inc.php');
  4.  
  5. try {
  6.     $id = $_REQUEST['id'];
  7.     $id = substr($id, 5);
  8.    
  9.     $dbh = new PDO('mysql:host='.$dbServer.';dbname='.$dbName, $dbUser, $dbPass);
  10.     $dbh->exec('SET CHARACTER SET utf8');
  11.  
  12.     $stmt = $dbh->prepare('DELETE FROM notes WHERE id=?');
  13.     $stmt->execute(array($id));
  14.     $dbh = null;
  15.    
  16.     echo 'OK';
  17. }
  18. catch (PDOException $e) {
  19.     echo 'Не могу удалить запись';
  20. }
  21.  
  22. // end of removenote.php

Подробно останавливаться на нем, по-моему, нет смысла. Основное отличие от предыдущих скриптов – в запросе, который выполняется.

На этом этапе серверная часть приложения полностью готова. Мы можем редактировать, создавать, удалять и читать наши записи.

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

Если есть вопросы, замечания или предложения, пишите, буду рад ответить.

Интересно почитать.

«Совершенный Ajax» –
новый подход к построению настоящих клиент-серверных web-приложений

Сервис покупки игровой
валюты практически для любой
онлайн игры. Большое количество способов оплаты - webmoney, sms,
paypal, наличными и др.

]]> http://www.simplecoding.org/sozdayom-vidzhet-dlya-xraneniya-zametok-chast-1.html/feed jQuery Grid Plugin - "продвинутое" решение для создания таблиц http://www.simplecoding.org/jquery-grid-plugin-prodvinutoe-reshenie-dlya-sozdaniya-tablic.html http://www.simplecoding.org/jquery-grid-plugin-prodvinutoe-reshenie-dlya-sozdaniya-tablic.html#comments Fri, 22 May 2009 20:07:11 +0000 Владимир http://www.simplecoding.org/?p=836

Сегодня речь пойдет о плагине для jQuery, предназначенном для отображения табличных данных. Я наткнулся на него практически случайно. Просто раньше я и не задумывался о том, что может существовать настолько мощное решение для таблиц. Ведь в большинстве случаев данные можно показать с помощью обычной html таблицы.

jQuery Grid Plugin имеет смысл использовать если нужно работать с большими таблицами. Дело в том, что плагин существенно упрощает разбивку данных на страницы. Т.е. автоматически создается панель с кнопками перелистывания страниц, а новые данные подгружаются с помощью AJAX. Кроме того, плагин имеет кучу дополнительных функций и несколько тем оформления.

От вас требуется настроить плагин и передавать ему данные. Звучит не сложно, но как всегда есть нюансы.

Чтобы не ходить вокруг да около, давайте рассмотрим небольшой пример.

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

Кстати, есть демонстрационная страница со множеством интересных примеров.

Сформулируем задачу.

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

Прежде всего, скачиваем плагин и распаковываем в папку с проектом.

Создаём файлы index.html (наша страничка) и getdata.php (серверный скрипт, который будет получать данные из БД и отправлять их браузеру).

Скачиваем библиотеку jQuery.

В результате должна получиться следующая структура папок.

index.html
getdata.php
jquery-1.3.1.min.js
jquery.jqGrid.js
/js
	...
/themes
	...

Рассмотрим структуру нашей страницы.

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.     <title>Использование jqGrid</title>
  6.  
  7.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  8.     <meta http-equiv="Content-Style-Type" content="text/css" />
  9.    
  10.     <link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" />
  11.     <link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />
  12. </head>
  13. <body>
  14.     <table id="list" class="scroll"></table>
  15.     <div id="pager" class="scroll" style="text-align:center;"></div>
  16.    
  17.     <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
  18.     <script type="text/javascript" src="jquery.jqGrid.js"></script>
  19.     <script type="text/javascript">
  20.     jQuery(document).ready(function(){
  21.         jQuery("#list").jqGrid({
  22.             url:'getdata.php',
  23.             datatype: 'json',
  24.             mtype: 'POST',
  25.             colNames:['#', 'Фамилия', 'Имя', 'Отчество'],
  26.             colModel :[
  27.                 {name:'id', index:'id', width:30}
  28.                 ,{name:'surname', index:'surname', width:80, align:'right'}
  29.                 ,{name:'fname', index:'fname', width:90}
  30.                 ,{name:'lname', index:'lname', width:80, align:'right'}
  31.                 ],
  32.             pager: jQuery('#pager'),
  33.             rowNum:5,
  34.             rowList:[5,10,30],
  35.             sortname: 'id',
  36.             sortorder: "asc",
  37.             viewrecords: true,
  38.             imgpath: 'themes/basic/images',
  39.             caption: 'Данные пользователей'
  40.         });
  41.     });
  42.     </script>
  43. </body>
  44. </html>

Прежде всего, обратите внимание на строки 13 и 14, в которых мы подключили файлы со стилями. В этом примере используется тема basic, но, естественно, её можно изменить.

В теле страницы мы создаем таблицу (строка 17) и панель навигации (тег div, строка 18). На данный момент они пустые, их содержимое будет создано плагином.

После этого, мы подключаем библиотеку jQuery, jQuery Grid Plugin и создаём скрипт с настройками (строки 23-44). На них мы остановимся отдельно.

url – адрес скрипта, формирующего массив с данными;
datatype – формат данных;
mtype – метод отправки запроса;
colNames – названия столбцов (используются в качестве заголовков таблицы);
colModel – параметры полей (значения и количество этих элементов должны соответствовать формату передаваемых данных);
pager – id блока в котором будет размещена навигационная панель;
rowNum – количество строк в таблице;
rowList – этот массив используется для настройки выпадающего списка, который пользователь может использовать для изменения количества строк в таблице;
sortname – поле, которое по-умолчанию используется для сортировки;
sortorder – порядок сортировки (в данном случае возрастающий);
viewrecords – указывает, нужно ли показывать в панели управления общее количество записей;
imgpath – размещение папки с изображениями;
caption – заголовок таблицы.

Настройки достаточно простые, но очень важно их внимательно заполнить.

Теперь создаем базу данных и таблицу в ней (вы можете импортировать файл users.sql из архива с этим примером, ссылка внизу страницы).

После этого займемся PHP скриптом.

  1. <?php
  2. try {
  3.     //читаем параметры
  4.     $curPage = $_POST['page'];
  5.     $rowsPerPage = $_POST['rows'];
  6.     $sortingField = $_POST['sidx'];
  7.     $sortingOrder = $_POST['sord'];
  8.    
  9.     //подключаемся к базе
  10.     $dbh = new PDO('mysql:host=localhost;dbname=name', 'user', 'pass');
  11.     //указываем, мы хотим использовать utf8
  12.     $dbh->exec('SET CHARACTER SET utf8');
  13.  
  14.     //определяем количество записей в таблице
  15.     $rows = $dbh->query('SELECT COUNT(id) AS count FROM users');
  16.     $totalRows = $rows->fetch(PDO::FETCH_ASSOC);
  17.  
  18.     $firstRowIndex = $curPage * $rowsPerPage - $rowsPerPage;
  19.     //получаем список пользователей из базы
  20.     $res = $dbh->query('SELECT * FROM users ORDER BY '.$sortingField.' '.$sortingOrder.' LIMIT '.$firstRowIndex.', '.$rowsPerPage);
  21.    
  22.     //сохраняем номер текущей страницы, общее количество страниц и общее количество записей
  23.     $response->page = $curPage;
  24.     $response->total = ceil($totalRows['count'] / $rowsPerPage);
  25.     $response->records = $totalRows['count'];
  26.  
  27.     $i=0;
  28.     while($row = $res->fetch(PDO::FETCH_ASSOC)) {
  29.         $response->rows[$i]['id']=$row['id'];
  30.         $response->rows[$i]['cell']=array($row['id'], $row['surname'], $row['fname'], $row['lname']);
  31.         $i++;
  32.     }
  33.     echo json_encode($response);
  34. }
  35. catch (PDOException $e) {
  36.     echo 'Database error: '.$e->getMessage();
  37. }
  38.  
  39. // end of getdata.php

Прежде всего, обратите внимание на параметры, которые передаются в запросе (строки 4-7). С их помощью плагин указывает, какую страницу данных он хочет получить, а также по какому полю и в каком порядке она должна быть отсортирована.

После этого, мы получаем данные. В этом примере для работы с базой мы использовали библиотеку PDO (параметры подключения к базе вам, конечно, нужно будет указать свои, строка 10).

Обратите внимание. Скрипт максимально упрощен, т.е. убрана проверку параметров, которые передает плагин. В реальном приложении так делать НЕЛЬЗЯ.

Затем мы формируем объект с данными ($response).

В параметрах этого объекта нужно передать:

- номер текущей страницы ($response->page);
- количество страниц ($response->total);
- общее количество записей ($response->records);
- сами данные ($response->rows).

Формат, в котором нужно сохранять данные, можно изменить. Для этого придется изменить настройки плагина (в документации раздел Retrieving Data -> JSON Data).

В конце скрипта мы преобразуем данные в JSON формат и отправляем браузеру (строка 33).

Все, задача решена. Если хотите поэкспериментировать, качайте архив с примером

архив с исходным кодом

Заключение

Этот пример не раскрывает и 10% возможностей плагина. Например, вы можете встраивать inline редакторы для строк, изменять оформление, использовать другие форматы данных (тот же xml), создавать вложенные таблицы и т.п.

В общем, очень удобный инструмент.

Если у вас возникли вопросы, есть советы или замечания, не стесняйтесь, пишите их в комментариях. Буду рад ответить или обсудить ;)

Интересно почитать

Хрупкая красота программного кода:
10 приемов, способных ее разрушить

]]> http://www.simplecoding.org/jquery-grid-plugin-prodvinutoe-reshenie-dlya-sozdaniya-tablic.html/feed