Очередной блог фрилансера » php

WordPress. Функции базы данных

dreamhelg — Tue, 07 Dec 2010 11:09:27 +0000

В wordpress существует достаточно обширный класс, предоставляющий набор методов для эффективной работы с базой данных. Вы можете найти описание этого класса а также всех его методов в файле /wp-includes/wp-db.php. В сегодняшней статье будут рассмотрены наиболее важные из этих методов, и небольшие примеры их использования. Важно умение использовать возможности класса $wpdb, для безопасной работы плагинов.

В статье будут приведены примеры использования следующих шести методов:

insert($table, $data, $format) – вставляет строку в таблицу через массивы.
update($table, $data, $where, $format, $where_format) – обновляет строку в таблице через массивы.
get_var($query, $x, $y) – получает одиночную переменную из базы данных.
query($query) — выполняет MySQL-запрос к базе данных, с текущим подключением.
get_results($query, $output) – получает данные SQL-запроса из базы данных (одну или множество строк).
escape($data) – Экранирует контент для вставки в базу данных, используя метод addslashes() для безопасности.

Кроме этого, есть еще несколько интересных методов:

set_prefix($prefix) – используется для установления префикса wordpress-таблиц, также может быть использован для переопределения префикса в любое время.
prepare($query) – безопасно подготавливает SQL-запрос к выполнению, с помощью sprint()-подобного синтаксиса.
get_row($query, $output, $y) – получает одиночную запись из базы данных.
get_col($query, $x) – получает одиночную колонку из базы данных в формате массива.

[code lang="php"] /** * insert */ $wpdb->insert( $wpdb->posts, array( 'post_title' => $mytitle ) ); $wpdb->insert( $wpdb->options, array( 'option_name', 'new_option_key', 'option_value' => 'New Option Value', 'autoload' => 'yes' ) ); /** * update */ $wpdb->update( $wpdb->posts, array( 'post_title' => $mytitle ), array( 'ID' => $myid ) ); $wpdb->update( $wpdb->options, array( 'option_value' => 'New Option Value' ), array( 'option_name' => 'new_option_value' ) ); /** * get_var */ $post_id = $wpdb->get_var( $wpdb->prepare( "SELECT post_id FROM $wpdb->postmeta WHERE post_id = %d AND meta_key = 'enclosure' AND meta_value LIKE (%s)", $post_ID, $url . '&' ) ); $content = $wpdb->get_var( $wpdb->prepare("SELECT post_content FROM " . "$wpdb->posts WHERE " . "post_title = %s AND " . "ID = %d", $title, $id ) ); /** * query */ $wpdb->query( "DELETE FROM $wpdb->options WHERE option_name = '$name'" ); $wpdb->query( "UPDATE $wpdb->posts SET post_title = '$mytitle' WHERE ID = $myid" ); /** * query and escape */ $mytitle = $wpdb->escape( $mytitle ); $myid = absint( $myid ); $wpdb->query( "UPDATE $wpdb->posts SET post_title = '$mytitle' WHERE ID = $myid" ); /** * get_results */ $type = $wpdb->get_results( "SELECT post_type FROM " . "$wpdb->posts WHERE ID=$id" ); [/code]

Перевод статьи “WordPress Database Functions”.

WordPress. Создаем встроенную форму обратной связи

dreamhelg — Wed, 30 Jun 2010 06:30:45 +0000

Множество существующих плагинов wordpress позволяют встраивать форму обратной связи на ваш блог, но использование плагинов – не обязательное условие. В сегодняшней статье, вы узнаете как создать встроенную контактную форму, с помощью собственной WordPress-темы.
Пример такой формы можно найти на сайте PHP Snippets, там она выглядит следующим образом:

Шаг 1: Создание шаблона

Сначала, нам понадобится создать шаблон страницы. Для этого, скопируйте содержимое файла page.php в новый файл, и сохраните его под именем page-contact.php. Для того, чтобы WordPress определил наш файл как шаблон, нам нужно добавить комментарий, следующего вида: [php] [/php] В результате наш файл page-contact.php должен выглядеть вот так: [php]

[/php]

Шаг 2: Создание формы

Теперь, создадим простую форму обратной связи. Просто вставьте приведенный код внутри блока entry-content. [php] [/php] Код формы очень простой, и не нуждается в разъяснениях. Обратите внимания на тэг input type=”hidden”, добавленный в строке 19 – позже, он будет использоваться для проверки была ли отправлена форма.

Шаг 3: Обработка данных и ошибок

Наша форма выглядит прекрасно, но пока что является бесполезной, поскольку не отправляет сообщения. Прежде всего, перед отправкой сообщения, нам нужно проверить была ли отправлена форма, и правильно ли заполнены все поля. Если поля заполнены правильно, мы получаем почтовый адрес администратора блога и отправляем ему сообщение. Если поля заполнены частично или с ошибками, сообщение не отправляется, и пользователю выводится список ошибок. Вставьте следующий код между комментарием с названием шаблона и функцией get_header(). [php] ' . "\r\n" . 'Reply-To: ' . $email; mail($emailTo, $subject, $body, $headers); $emailSent = true; } } ?> [/php] В этом коде, проверяется отправка формы и корректное заполнение полей. Если появляются ошибки, в виде пустого поля или неправильно указанного почтового адреса, формируется сообщение об ошибке и форма не отправляется. Теперь, нам нужно отобразить сообщение об ошибке, рядом с нужным полем, например “Пожалуйста, введите имя”. Ниже приведен полный код шаблона, который вы можете использовать в своей теме. [php] ' . "\r\n" . 'Reply-To: ' . $email; mail($emailTo, $subject, $body, $headers); $emailSent = true; } } ?>

id="post-">

Thanks, your email was sent successfully.

Sorry, an error occured.

[/php]

Шаг 4: Добавляем проверку jQuery

Наша форма уже работает прекрасно, но мы можем улучшить ее, добавив проверку на клиенте. Для этого, мы будем использовать jQuery и плагин jQuery Validation. Это отличный плагин, позволяющий легко и быстро проверить правильное заполнение полей. Cкачайте плагин и поместите его в папку с вашей темой, внутри папки /js. После этого, вставьте следующие строки в новый файл: [javascript] $(document).ready(function(){ $("#contactForm").validate(); }); [/javascript] Сохраните файл под именем verif.js в папке /js. Теперь, нам нужно подключить ява-скрипт файлы в нашу тему. Откройте файл header.php и вставьте следующий код внутри тэгов : [html] [/html] После этого, ваша форма будет проверяться плагином на клиентской стороне. Плагин работает довольно просто – выбирает элементы формы, имеющий css-класс required и проверяет их на корректное заполнение. В случае ошибки, отображается сообщение. Надеюсь, вам понравится ваша новая WordPress-форма. Перевод статьи “How to create a built-in contact form for your WordPress theme”, автор Jean-Baptiste Jung

Введение в пользовательскую таксономию WordPress 3.0

dreamhelg — Fri, 14 May 2010 07:00:17 +0000

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

Что такое Таксономия?

Таксономии – это различные методы для классификации информации. В этой статье приведен пример записей о персональных компьютерах, которые можно классифицировать по целому ряду различных критериев, включая:

Количество оперативной памяти
Размер жесткого диска
Скорость процессора
Тип процессора
Установленная операционная система
и так далее…

Краткая история таксономии WordPress

Рубрики

До версии 2.3, в WordPress был только один тип таксономии для записей, под названием Рубрики. Это было удобно для блогов, а в нашем случае, нам пришлось бы создать рубрику верхнего уровня под названием “Персональные компьютеры”, затем дочернюю рубрику “Оперативная память”, которая, в свою очередь, может содержать такие дочерние рубрики как “Меньше 1Гб”, “1Гб”, “2Гб”, “4Гб” и так далее. Вторая дочерняя рубрика, от основной рубрики “Персональные компьютеры”, называлась бы “Операционная система” и содержала бы такие дочерние рубрики, как: “Windows XP”, “Mac OS”, “Red Hat”, “Ubuntu” и т.д. Система, позволяющая иметь рубрики, состоящие из дочерних рубрик – называется иерархической структурой. До версии WordPress 2.3, создать серьезную информационную архитектуру сайта можно было только путем создания большой иерархии рубрик, в которой рубрики верхнего уровня представляли собой большие группы таксономий.

Метки

Начиная с версии 2.3, в WordPress был добавлен второй вид таксономии под названием Метки. В отличие от рубрик, которые придумываются заранее, в зависимости от типа контента на сайте, метки предоставляют более свободный метод классификации контента. Например, при создании записи о персональном компьютере, метки позволяют автору указать одно или несколько ключевых слов, таких как “игровой”, “шумный”, “офисный” и т.д. Эти ключевые слова конечно не несут такого смысла как рубрики, однако помогают добавить дополнительную классификацию к записи. Посетители сайта, в дальнейшем, легко смогут найти все записи с меткой “шумный”. Однако, свободная форма меток, не поможет нам построить надежную классификационную систему на основе заранее известных значений, таких как типы операционной системы или процессора. Кроме того, метки являются одномерными, и не поддерживают иерархическую структуру.

Одноуровневые пользовательские таксономии

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

Иерархические пользовательские таксономии

И наконец, WordPress 3.0, дает нам полностью иерархические пользовательские таксономии. Обратите внимание как иерархическое устройство позволяет упростить таксономию операционных систем, путем группировки всех вариантов операционной системы Windows в общей родительской рубрике “Windows”. Такая классификация позволит пользователям просматривать все компьютеры с ОС Windows, или например конкретные, с Windows XP.

Создание пользовательской Таксономии

Редактирование файла functions.php В Wordpress 3.0 нет возможности создавать пользовательские таксономии в панели управления. Для начального описания вашей пользовательской таксономии без использования плагина, вам понадобится добавить немного кода в файл functions.php, расположенный в папке с вашей темой. Это совсем не сложно – просто следуйте приведенным примерам.

Добавляем Таксономии в коде

Итак, на примере персонального компьютера, мы добавим отдельные таксономии для Оперативной памяти, Жесткого диска и Операционной системы. На данном этапе, мы просто добавим таксономии сами по себе, как пустые контейнеры. К счастью, мы можем добавлять и управлять различными классификациями, не выходя из панели управления. Шаг 1. Первая функция для создания всего Для начала, нам нужно создать функцию, которая создает все необходимые нам таксономии. Назовем функцию “build_taxonomies”. Давайте добавим эту функцию в конец файла functions.php. [php] function build_taxonomies() { // code will go here } [/php] Шаг 2. Описание Таксономий Далее, для каждой таксономии, которую мы создадим, нам нужно взывать определенную WordPress-функцию, с правильными параметрами. Далее представлена эта функция, и разъяснены ее важные параметры. [php] register_taxonomy( 'internal_name', 'object_type', array( 'hierarchical' => {true|false}, 'label' => 'Human Readable Name', 'query_var' => {true|false}, 'rewrite' => {true|false} ) ); [/php]

internal_name: название таксономии, которое будет использоваться в базе данных и файлах шаблона
object_type: определяет типы контента, к которым можно будет применить эту таксономию. Возможные значения: “post” (запись), “page” (страница), “link” (ссылка).
Далее идет массив из опциональных параметров. В этой статье, мы будем использовать наиболее важные из них, а полный список можно найти в кодексе WordPress, на странице описания функции register_taxonomy. Далее идет список используемых параметров.
hierarchical: если значение установлено в “true”, эта таксономия будет иметь возможности иерархической структуры, как у Рубрик. Если значение “false”, то таксономия по структуре будет похожа на Метки.
label: это читаемое название, которое будет использоваться в интерфейсе сайта для обозначения этой таксономии.
query_var: если значение параметра установлено в “true”, мы сможем получать записи, на основе выбранного значения этой таксономии. Например, можно найти все записи, для которых в таксономии “операционная система” указано значение “Windows”.
rewrite: если значение установлено в “true”, при просмотре страницы с этой таксономией, WordPress будет использовать дружественные URL. Например, страница, отображающая все записи с операционной системой “Windows”, будет представлена следующим url: http://domain.com/operating_system/windows

Код, добавляющий таксономию “Операционная система” выглядит следующим образом: [php] register_taxonomy( 'operating_system', 'post', array( 'hierarchical' => true, 'label' => 'Operating System', 'query_var' => true, 'rewrite' => true ) ); [/php] Вставьте эту функцию, внутри ранее созданной функции build_taxonomies. Шаг 3 Вызов функции, создающей таксономию Для того, чтобы наша функция build_taxonomies была выполнена, нам понадобится добавить одну строчку кода, в файле functions.php. Фактически мы “прицепим” функцию build_taxonomies к событию init, путем добавления следующего кода: [php] add_action( 'init', 'build_taxonomies', 0 ); [/php] Вы можете вставить эту строчку в любом месте, в нашем примере она добавлена выше вызова функции build_taxonomies, поэтому код выглядит вот так: [php] // Custom Taxonomy Code add_action( 'init', 'build_taxonomies', 0 ); function build_taxonomies() { register_taxonomy( 'operating_system', 'post', array( 'hierarchical' => true, 'label' => 'Operating System', 'query_var' => true, 'rewrite' => true ) ); } [/php]

Добавляем классификацию к новой Таксономии

Если вы правильно добавили таксономию “Операционная система” в файле functions.php, она должна появится в виде нового пункта, в блоке “Записи”, вашей панели управления. Кликните по нему, чтобы добавить необходимые классификации. Теперь, вы можете добавлять и редактировать операционные системы, точно таким же образом, как Рубрики.

Добавляем больше Таксономий

Оставшиеся таксономии добавляем аналогичным способом, то есть для каждой таксономии в файле functions.php, создается своя функция register_taxonomy: [php] register_taxonomy( 'ram', 'post', array( 'hierarchical' => true, 'label' => 'RAM', 'query_var' => true, 'rewrite' => true ) ); register_taxonomy( 'hard_drive', 'post', array( 'hierarchical' => true, 'label' => 'Hard Drive', 'query_var' => true, 'rewrite' => true ) ); [/php] После того, как вы добавите все таксономии, код должен выглядеть следующим образом: [php] // Custom Taxonomy Code add_action( 'init', 'build_taxonomies', 0 ); function build_taxonomies() { register_taxonomy( 'operating_system', 'post', array( 'hierarchical' => true, 'label' => 'Operating System', 'query_var' => true, 'rewrite' => true ) ); register_taxonomy( 'ram', 'post', array( 'hierarchical' => true, 'label' => 'RAM', 'query_var' => true, 'rewrite' => true ) ); register_taxonomy( 'hard_drive', 'post', array( 'hierarchical' => true, 'label' => 'Hard Drive', 'query_var' => true, 'rewrite' => true ) ); } [/php]

Создание записи, с использованием новой Таксономии

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

Отображение различной таксономии записей

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

Вывод таксономии на индивидуальной странице

В дефолтной теме Twenty Ten, как и во многих других темах WordPress, данные о рубрике и метках записи, выводятся непосредственно под текстом этой записи. Мы будем выводить нашу таксономию, если она существует, чуть выше блока рубрик с метками. Шаг 1. Редактирование файла single.php Шаблон индивидуальной записи называется single.php, и расположен он внутри папки с вашей темой. Если такого шаблона у вас нет, его можно создать, и скопировать в него содержимое файла index.php. Найдите в шаблоне single.php строчку: [html]

[/html] В теме Twenty Ten, этот блок содержит название рубрик, метки, ссылки и другую информацию о текущей записи. Код для вывода нашей таксономии, мы будем размещать непосредственно над этим блоком. Шаг 2. Получение таксономии для текущей записи Здесь мы определяем несколько переменных, для хранения вывода пользовательской таксономии. [php] ID, 'operating_system', 'Operating System(s): ', ', ', '' ); [/php] Для получения информации о таксономии текущей записи, мы используем функцию get_the_term, со следующими параметрами:

$post->ID : id текущей записи
‘operation_system’ : имя пользовательской таксономии. Мы проверяем, была ли назначена текущей записи, какая-либо классификация из пользовательской таксономии operation_system.
‘Операционная система (ы)’ : если данные будут найдены, эта строчка будет вставлена, перед их выводом на экран.
‘, ’ : если найденных значений будет несколько, то они будут разделены запятой
“ : если данные будут найдены, эта строка будет вставлена после вывода данных. В нашем случае, мы оставляем ее пустой.

Точно так же, используя эту функцию для двух других таксономий, мы получим код следующего вида: [php] $ram_list = get_the_term_list( $post->ID, 'ram', 'RAM Option(s): ', ', ', '' ); $hd_list = get_the_term_list( $post->ID, 'hard_drive', 'Hard Drive Option(s): ', ', ', '' ); [/php] Шаг 3. Форматирование полученного результата Проверяем результаты для каждой из трех возможных таксономий. Если результат есть, добавляем его к нашему выводу, вместе с тэгом перевода строки. [php] // Добавляем список ОС, если они указаны if ( '' != $os_list ) { $taxo_text .= "$os_list
\n"; } // Добавляем данные об Оперативной памяти, если они указаны if ( '' != $ram_list ) { $taxo_text .= "$ram_list
\n"; } // Добавляем данные о жестком диске, если они указаны if ( '' != $hd_list ) { $taxo_text .= "$hd_list
\n"; } [/php] Шаг 4. Выводим классификацию, если она найдена Проверяем, была ли получена таксономия из предыдущих шагов. Если таксономия существует, выводим ее, предварительно обернув в div с классом “entry-utility”. [php] // Выводим пользовательскую таксономию, если она существует // Обратите внимание: Мы не будет открывать div, если у него не будет содержимого if ( '' != $taxo_text ) { ?>

[/php] Шаг 5. Проверяем результаты Теперь, если открыть страницу любой записи, вы должны увидеть пользовательскую классификацию, расположенную сразу после текста записи.

Просмотр списка записей, построенный на основе пользовательской таксономии

Теперь, на странице индивидуальной записи, мы можем узнать к какой классификации принадлежит текущая запись. Вы, наверное, заметили, что при отображении пользовательской классификации, термины выводятся в виде ссылки, которая должна вести на страницу с записями, принадлежащими к этой классификации. К примеру, кликнув по ссылке “Mac OS”, мы по идее, должны увидеть страницу со списком записей, с классификацией “Mac OS”. Однако, ничего такого не происходит. Для того, чтобы у нас выводилась такая страница, нам нужно создать специальный шаблонный файл, с именем taxonomy.php. WordPress пытается грузить этот шаблон (если он существует) каждый раз, при просмотре записей, группированных пользовательской таксономией. Шаг 1 Откройте файл category.php, скопируйте его контент, и вставьте в новый файл, сохранив его под именем “taxonomy.php”. Шаг 2 Получение информации о текущей классификации В файле taxonomy.php, нам необходимо получить информацию о текущей, просматриваемой таксономии. Скорее всего, нам понадобится название и описание (если есть) для выбранной классификации. Сразу после строки следующую строку: [php] $term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) ); [/php] Эта строка получает всю информацию о таксономии и возвращает ее в виде объекта, записанного в переменную $term. Например, классификация “Mac OS” возвращает следующий объект: [php] stdClass Object ( [term_id] => 13 [name] => Mac OS [slug] => mac-os [term_group] => 0 [term_taxonomy_id] => 22 [taxonomy] => operating_system [description] => [parent] => 0 [count] => 2 ) [/php] Шаг 3 Вывод Названия классификации и ее описание Нам нужно изменить название страницы, чтобы пользователи видели, какая классификация отображена на странице. Поскольку мы скопировали содержимое шаблона category.php, мы можем взять строку кода, использующуюся для вывода названия рубрики, и немного ее изменить, с тем, чтобы она отображала текущее название классификации, и (если доступно) ее описание. Измените следующую строку, взятую из шаблона category.php [php] printf( __( 'Category Archives: %s', 'twentyten' ), '' . single_cat_title( '', false ) . '' ); [/php] следующим образом: [php] printf( __( 'Posts classified under: %s', 'twentyten' ), '' . $term->name . '' ); [/php] Эта строка выведет название текущей классификации. Далее, ниже добавьте следующую строчку: [php] if ('' != $term_descr ) { echo "

$term_descr

\n"; } [/php] Здесь, как не трудно догадаться, будет выведено описание классификации, если оно доступно. Проверить как работает классификационный список записей, очень просто. Откройте любую, отдельную запись, и кликните на ссылку-название классификации. Перевод статьи “Introducing WordPress 3 Custom Taxonomies”, автор Paul Kaiser

WordPress. Создаем удобную панель настроек

dreamhelg — Fri, 09 Apr 2010 05:00:52 +0000

Сегодня, мы подробно рассмотрим процесс создания страницы настроек для темы WordPress, на примере замечательного фреймворка WooFramework. Затем, мы немного усложним задачу, используя возможности jQuery, немного улучшим функциональность страницы.

WordPress – на сегодняшний день является наиболее популярной системой управления контентом (CMS). Многие разработчики выбирают WordPress в качестве CMS, независимо от типа проекта. Этой системой очень просто пользоваться, но вы можете сделать ее еще проще, включив дополнительные панели управления для пользователей. Вместо того, чтобы открывать файлы PHP-шаблонов и манипулировать с кодом, пользователи могут использовать обычную страницу настроек в панели управления, и с ее помощью управлять вашей WordPress-темой. Например, если ваша тема имеет красную, синюю и зеленую цветовые схемы, каждой из которых соответствует определенный CSS-файл, было бы гораздо проще, если бы пользователь мог выбирать нужный цвет из выпадающего списка. Поэтому сегодня, вы познакомитесь с процессом создания и совершенствования дополнительной страницы настроек для панели администрирования WordPress.

Шаг 1

Прежде чем мы приступим к созданию панели управления, нам понадобится тема. Поэтому загрузите архив, с исходными файлами. Вы увидите слегка измененную классическую тему WordPress. Скопируйте папку “nettuts” (так будет называться наша тема) в папку wp-content/themes. Внутри папки должны быть следующие файлы:

functions.php (пустой)
index.php
comments.php
footer.php
header.php
rtl.php
sidebar.php
style.css
screenshot.png
папка с картинками, содержащая два файла

Большая часть нашего кода, будет расположена в файле functions.php.

Тема опционально может использовать функциональный файл, расположенный внутри папки с темой, с именем functions.php. Этот файл действует так же как плагин, и если он входит в состав вашей темы, то он автоматически загружается во время инициализации WordPress (как внешних страниц так и панели администрирования).

Этот файл предполагается использовать для:

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

(Из Кодекса WordPress)

Шаг 2

Теперь, после того как вы скачали и установили предложенную тему, зайдите на страницу “Внешний вид” – “Темы”, и активируйте нашу тему nettuts. Теперь, нам нужно продумать html-разметку для нашей панели управления. Будем использовать вот такую структуру: [html]

[/html] Позвольте мне все вам все здесь объяснить. Группы настроек будут заключены в блок с классом “rm_wrap”, а затем в блок с классом “rp_opts”. Затем, внутри этих блоков, мы открываем тег form, внутри которой будут размещены все необходимые инпуты. Каждая секция настроек (Основные настройки, Настройки домашней страницы, Настройки блога и т.д.) будет расположена в отдельном блоке с именем класса “rm_section”. В этом блоке будет расположено название (для секции настроек) и несколько блоков с инпутами. Используя специальные классы для блоков, типа

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

Шаг 3

Откройте файл functions.php своим любимым редактором кода (я использую NotePad++), и вставьте следующий код: [php] cat_ID] = $category_list -> cat_name; } array_unshift($wp_cats, "Выберите рубрику"); [/php] Этот фрагмент кода использует встроенную wordpress-функцию get_categories, для получения всех рубрик, а затем, с помощью цикла foreach, сохранения их в переменной $wp_cats. Затем к массиву добавляется опция “выберите рубрику”.

Шаг 4

Теперь пришло время создать список настроек для нашей темы. Вставьте следующий код в файл functions.php: [php] $options = array( array( "name" => "Настройки", "type" => "title" ), array ( "name" => "Основные настройки", "type" => "section" ), array ( "type" => "open"), array ( "name" => "Цветовая схема", "desc" => "Выберите цветовую схему темы", "id" => $shortname . "_color_scheme", "type" => "select", "options" => array ("синяя", "красная", "зеленая"), "std" => "blue" ), array ( "name" => "URL Логотипа", "desc" => "Введите ссылку к картинке логотипа", "id" => $shortname . "_logo", "type" => "text", "std" => "" ), array ( "name" => "Пользовательский CSS", "desc" => "Хотите использовать свой CSS-код? Вставьте его в это поле", "id" => $shortname . "_custom_css", "type" => "textarea", "std" => "" ), array ( "type" => "close"), array ( "name" => "Домашняя страница", "type" => "section" ), array ("type" => "open"), array ( "name" => "Картинка в шапке, на главной странице", "desc" => "Введите URL картинки, которая будет использоваться в шапке", "id" => $shortname ."_header_img", "type" => "text", "std" => ""), array ( "name" => "Рубрика домашней страницы", "desc" => "Выберите рубрику, в которую будут публиковатся записи", "id" => $shortname ."_feat_cat", "type" => "select", "options" => $wp_cats, "std" => "Выберите рубрику"), array ( "type" => "close"), array ( "name" => "Подвал", "type" => "section"), array ( "type" => "open"), array( "name" => "Текст копирайта", "desc" => "Введите текст, который будет размещен в правой части подвала. Можно использовать HTML", "id" => $shortname."_footer_text", "type" => "text", "std" => ""), array( "name" => "Код Google Analytics", "desc" => "Здесь вы можете разместить код Google Analytics, или любой другой счетчик", "id" => $shortname."_ga_code", "type" => "textarea", "std" => ""), array( "name" => "Favicon", "desc" => "Favicon - это пиксельная иконка, которая представляет ваш сайт. Вставьте URL к картинке с расширением .ico", "id" => $shortname."_favicon", "type" => "text", "std" => get_bloginfo('url') ."/favicon.ico"), array( "name" => "Feedburner URL", "desc" => "Feedburner - это сервис Google, управляющий RSS-потоками. Paste your Feedburner URL here to let readers see it in your website", "id" => $shortname."_feedburner", "type" => "text", "std" => get_bloginfo('rss2_url')), array( "type" => "close") ); [/php] Это был довольно большой фрагмент кода, заслуживающий небольшого разъяснения. Итак:

PHP-переменная $options хранит весь список настроек для нашей темы.
Список настроек состоит из нескольких массивов, каждый из которых содержит ключ “type”, для определения типа настройки и способа ее отображения.
Наш список настроек начинается с массива “type” => “title” – который будет использоваться для отображения имени темы и названия в заголовке страницы.
Каждый раздел (Основные настройки, Домашняя страница, Подвал) имеет отдельный список настроек.
Мы начинаем новую секцию, закрывая любую из предыдущих секций, и объявления новой секции с помощью массива array(“name” => “Подвал”, “type” => “section”).
Каждая опция может содержать следующие настройки: name: Имя текстового поля. desc: Короткое описание поля, для пользователя. id: id поля, с префиксом из псевдонима. Оно будет использоваться как для записи настройки, так и для доступа к ней. type: тип input - text, select или textarea options: используется для объявления массива настроек для поля выпадающего списка. std: значение поля по умолчанию, используется если никаких других значений не указано.

Шаг 5

Попробуйте зайти в панель управления Wordpress. Вы нигде не найдете указанных нами настроек, как же нам отобразить их? Добавляем следующий код в файл functions.php: [php] function mytheme_add_admin(){ global $themename, $shortname, $options; if($_GET['page'] == basename(__FILE__) ){ if( 'saved' == $_REQUEST['action']){ foreach ($options as $value){ update_option($value['id'], $_REQUEST[$value['id']]); } foreach ($options as $value){ if( isset ($_REQUEST[$value['id']]) ){ update_option($value['id'], $_REQUEST[$value['id']] ); }else{ delete_option($value['id']); } } header("Location: admin.php?page=functions.php&saved=true"); die; } } else if('reset' == $_REQUEST['action']){ foreach($options as $value){ delete_option($value['id']); } header("Location: admin.php&page=functions.php&reset=true"); die; } add_menu_page($themename, $themename, 'administrator', basename(__FILE__), 'mytheme_admin'); } function mytheme_add_init() { } [/php] Эта функция используется как для обновления самих настроек, так и для добавления страницы в панели управления. Если настройки были сохранены (определяется с помощью скрытой переменной save), то все настройки обновляются указанными значениями. Если же, настройки были сброшены (определяется с помощью другой скрытой переменной reset), то все настройки удаляются. Последняя строка функции, добавляет страницу меню – параметры по порядку: имя и название, уровень пользовательских прав для просмотра страницы, страница сохранения и функция, использующаяся для отображения/сохранения настроек (в нашем примере называется mytheme_admin). Заметили, что функция mytheme_add_init пустая? Пусть пока останется такой как есть, мы вернемся к ней позже.

Шаг 6

Страница настроек в панели управления так и не появилась? Но, мы еще не дописали функцию mytheme_admim, о которой говорилось выше. Для создания этой функции нам понадобится код из шагов 6,7 и 8. Давайте начнем. [php] function mytheme_admin(){ global $themename, $shortname, $options; $i = 0; if($_REQUEST['action'] == 'save') echo '

настройки темы '. $themename .' были сохранены

'; if($_REQUEST['reset']) echo '

настройки темы '. $themename .' были сброшены

'; ?>

Настройки

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

" />

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

Шаг 8

Мы приближаемся к концу этой довольно большой функции. Вставьте следующий код: [php] case "select" : ?>

/functions/images/trans.gif" class="inactive" alt=""/>

Иконки: WooFunction

Шаг 9 Отлично, теперь у нас есть собственная страница управления, с отдельным пунктом меню. Однако, зайдя на эту страничку, мы видим, что не все так хорошо как нам бы хотелось. Но не беда, у нас есть отличный помощник – CSS! Создаем новую папку “functions”, внутри папки nettuts. Внутри этой папки, создаем новый файл – functions.css, и вставляем в него следующий код: [css] .rm_wrap{ width:740px; } .rm_section{ border:1px solid #ddd; border-bottom:0; background:#f9f9f9; } .rm_opts label{ font-size:12px; font-weight:700; width:200px; display:block; float:left; } .rm_input { padding:30px 10px; border-bottom:1px solid #ddd; border-top:1px solid #fff; } .rm_opts small{ display:block; float:right; width:200px; color:#999; } .rm_opts input[type="text"], .rm_opts select{ width:280px; font-size:12px; padding:4px; color:#333; line-height:1em; background:#f3f3f3; } .rm_input input:focus, .rm_input textarea:focus{ background:#fff; } .rm_input textarea{ width:280px; height:175px; font-size:12px; padding:4px; color:#333; line-height:1.5em; background:#f3f3f3; } .rm_title h3 { cursor:pointer; font-size:1em; text-transform: uppercase; margin:0; font-weight:bold; color:#232323; float:left; width:80%; padding:14px 4px; } .rm_title{ cursor:pointer; border-bottom:1px solid #ddd; background:#eee; padding:0; } .rm_title h3 img.inactive{ margin:-8px 10px 0 2px; width:32px; height:32px; background:url('images/pointer.png') no-repeat 0 0; float:left; -moz-border-radius:6px; border:1px solid #ccc; } .rm_title h3 img.active{ margin:-8px 10px 0 2px; width:32px; height:32px; background:url('images/pointer.png') no-repeat 0 -32px; float:left; -moz-border-radius:6px; -webkit-border-radius:6px; border:1px solid #ccc; } .rm_title h3:hover img{ border:1px solid #999; } .rm_title span.submit{ display:block; float:right; margin:0; padding:0; width:15%; padding:14px 0; } .clearfix{ clear:both; } .rm_table th, .rm_table td{ border:1px solid #bbb; padding:10px; text-align:center; } .rm_table th, .rm_table td.feature{ border-color:#888; } [/css] Думаю, этот код не требует каких-либо разъяснений, все предельно просто и понятно. Вы, конечно, можете изменять его по своему вкусу.

Шаг 10

Теперь, когда у нас есть готовый CSS-файл, как же подключить его к странице, если у нас нет прямого доступа к разделу документа ? Помните, мы создали пустую функцию mytheme_add_init()? Вон она-то как раз нам и поможет. Измените ее следующим образом: [php] function mytheme_add_init() { $file_dir = get_bloginfo('template_directory'); wp_enqueue_style("functions", $file_dir."/functions/style.css", false, "1.0", "all"); } [/php] Этот код подключит файл functions.css в раздел документа . Расположение файла определяется папкой с шаблоном.

Шаг 11

Взгляните на нашу страницу. Она выглядит вполне хорошо, осталось лишь добавить функциональность иконкам плюса, в заголовках секции. Для этого будем использовать jQuery. Создайте новый файл rm_script.js внутри папки nettuts/functions/folder. Вставьте следующий код: [javascript] jQuery(document).ready(function(){ jQuery('.rm_options').slideUp(); jQuery('.rm_section h3').click(function(){ if(jQuery(this).parent().next('.rm_options').css('display')==='none') { jQuery(this).removeClass('inactive').addClass('active').children('img').removeClass('inactive').addClass('active'); } else { jQuery(this).removeClass('active').addClass('inactive').children('img').removeClass('active').addClass('inactive'); } jQuery(this).parent().next('.rm_options').slideToggle('slow'); }); }); [/javascript] Что же делает этот код? После того как DOM загружен, все блоки с классом “rm_options” сворачиваются. Затем, при клике на иконке плюса, удаляется класс “inactive”, и добавляется класс “active”, который заменяет иконку на знак минус. При повторном нажатии этой иконки, происходит обратный процесс. Для сворачивания/разворачивания блоков используется довольно простая функция jQuery slideToggle. Чтобы подключить этот скрипт к странице, мы будем использовать уже знакомую нам функцию mytheme_add_init(), измените ее следующим образом: [php] function mytheme_add_init() { $file_dir = get_bloginfo('template_directory'); wp_enqueue_style("functions", $file_dir."/functions/style.css", false, "1.0", "all"); wp_enqueue_script("rm_script", $file_dir."/functions/script.js", false, "1.0"); } [/php] После этого, скрипт должен работать. Проверьте, как это выглядит на странице:

Шаг 12

Теперь, после того как наша страница настроек полностью готова, осталось немного рассказать об использовании самих настроек. Код, позволяющий использовать параметры, выглядит следующим образом: [php] $var = get_option('nt_colur_scheme'); [/php] С его помощью, мы сможем реализовать смену цветовой схемы сайта. Это довольно просто: [php] /* Изменяем CSS-файл, в зависимости от выбранного цвета */ /*Выводим текст в подвале, можно использовать HTML-тэги */

[/php] Область применения ограничивается только вашим воображением. Скачать архив с приведенным примером. Перевод статьи “How to Create a Better WordPress Options Panel”, автор Rohan Mehta

Создаем счетчик загрузок файла с помощью PHP и MySQL

dreamhelg — Thu, 18 Mar 2010 13:38:43 +0000

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

Шаг 1 – XHTML

Для начала нам понадобится XHTML-разметка. Она очень простая – это общий блок file-manager, содержащий маркированный список, в котором ссылка на каждый файл будет находится внутри элемента li. Файлы, по которым будет учитываться количество скачиваний, нужно загрузить в папку files, расположенную в корневой директории скрипта (вы можете посмотреть как организована структура файлов, в архиве с приведенным примером). PHP будет проходить циклом по всем файлам в папке, и добавлять каждый файл в виде отдельного элемента li, в маркированный список. demo.php [html]

photoShoot-1.0.zip 0 download

[/html] Обратите внимание, что атрибут href у ссылки передает имя загружаемого файла в качестве параметра для файла download.php. Именно здесь будет происходить подсчет загрузок, как вы увидите в дальнейшем. Вам не обязательно пользоваться именно этим интерфейсом для организации подсчета загрузок. Вы можете просто разместить ссылки на download.php на страницах блога или сайта, и все загрузки будут подсчитаны правильно.

Шаг 2 – CSS

После того как наша XHTML-разметка готова, мы можем сконцентрироваться на внешнем виде нашего скрипта. CSS-стили, представленные ниже, назначают внешний вид блоку file-manager, через его ID, поскольку он у нас один на странице. Остальные элементы стилизуются через имена классов. style.css [css] #file-manager{ background-color:#EEE; border:1px solid #DDD; margin:50px auto; padding:10px; width:400px; } ul.manager li{ background:url("img/bg_gradient.gif") repeat-x center bottom #F5F5F5; border:1px solid #DDD; border-top-color:#FFF; list-style:none; position:relative; } ul.manager li a{ display:block; padding:8px; } ul.manager li a:hover .download-label{ /* When a list is hovered over, show the download green text inside it: */ display:block; } span.download-label{ background-color:#64B126; border:1px solid #4E9416; color:white; display:none; font-size:10px; padding:2px 4px; position:absolute; right:8px; text-decoration:none; text-shadow:0 0 1px #315D0D; top:6px; /* CSS3 Rounded Corners */ -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } span.download-count{ color:#999; font-size:10px; padding:3px 5px; position:absolute; text-decoration:none; } [/css] Обратите внимание, что здесь подпись “download” скрыта по умолчанию, с помощью свойства display: none. Она отображается через display:block, только при наведении мыши на ссылку, без использования JavaScript. Немного CSS3 используется для закругления уголков у подписи.

Шаг 3 – PHP

Как мы уже говорили выше, PHP проходит циклом по всей папке files, и выводит каждый файл в виде элемента li маркированного списка. Давайте рассмотрим подробнее, как это происходит. demo.php - Верхняя часть [php] // Error reporting: error_reporting(E_ALL^E_NOTICE); // Including the DB connection file: require 'connect.php'; $extension=''; $files_array = array(); /* Opening the thumbnail directory and looping through all the thumbs: */ $dir_handle = @opendir($directory) or die("There is an error with your file directory!"); while ($file = readdir($dir_handle)) { /* Skipping the system files: */ if($file{0}=='.') continue; /* end() returns the last element of the array generated by the explode() function: */ $extension = strtolower(end(explode('.',$file))); /* Skipping the php files: */ if($extension == 'php') continue; $files_array[]=$file; } /* Sorting the files alphabetically */ sort($files_array,SORT_STRING); $file_downloads=array(); $result = mysql_query("SELECT * FROM download_manager"); if(mysql_num_rows($result)) while($row=mysql_fetch_assoc($result)) { /* The key of the $file_downloads array will be the name of the file, and will contain the number of downloads: */ $file_downloads[$row['filename']]=$row['downloads']; } [/php] Обратите внимание, как мы выбираем все записи из таблицы download_manager с помощью mysql_query() и затем добавляем их в массив $file_downloads, с ключом массива filename, и значением downloads. Таким образом, далее в коде, мы сможем записать $file_downloads[‘archive.zip’], и вывести количество загрузок этого файла. Ниже представлен код, который используется для генерации элементов li маркированного списка. demo.php – Центральная часть [php] foreach($files_array as $key=>$val) { echo '

'.$val.' '.(int)$file_downloads[$val].' download

'; } [/php] Все очень просто – проходим циклом foreach по массиву $files_array, и выводим на страницу нужные данные в соответствующей разметке. Теперь давайте более подробно рассмотрим как происходит учет загрузок. download.php [php] // Error reporting: error_reporting(E_ALL^E_NOTICE); // Including the connection file: require('connect.php'); if(!$_GET['file']) error('Missing parameter!'); if($_GET['file']{0}=='.') error('Wrong file!'); if(file_exists($directory.'/'.$_GET['file'])) { /* If the visitor is not a search engine, count the downoad: */ if(!is_bot()) mysql_query(" INSERT INTO download_manager SET filename='".mysql_real_escape_string($_GET['file'])."' ON DUPLICATE KEY UPDATE downloads=downloads+1"); header("Location: ".$directory."/".$_GET['file']); exit; } else error("This file does not exist!"); /* Helper functions: */ function error($str) { die($str); } function is_bot() { /* This function will check whether the visitor is a search engine robot */ $botlist = array("Teoma", "alexa", "froogle", "Gigabot", "inktomi", "looksmart", "URL_Spider_SQL", "Firefly", "NationalDirectory", "Ask Jeeves", "TECNOSEEK", "InfoSeek", "WebFindBot", "girafabot", "crawler", "www.galaxy.com", "Googlebot", "Scooter", "Slurp", "msnbot", "appie", "FAST", "WebBug", "Spade", "ZyBorg", "rabaz", "Baiduspider", "Feedfetcher-Google", "TechnoratiSnoop", "Rankivabot", "Mediapartners-Google", "Sogou web spider", "WebAlta Crawler","TweetmemeBot", "Butterfly","Twitturls","Me.dium","Twiceler"); foreach($botlist as $bot) { if(strpos($_SERVER['HTTP_USER_AGENT'],$bot)!==false) return true; // Is a bot } return false; // Not a bot } [/php] Здесь обязательно нужно проверить, не является ли посетитель роботом поисковой системы, сканирующим ваши ссылки. Роботы – это хорошие посетители, поскольку они помогают включить ваш сайт в поисковые сервисы, однако в нашем случае, они могут исказить статистику загрузок. Вот почему база данных обновляется только после того, как посетитель пройдет проверку is_bot().

Шаг 4 – MySQL

Как мы упоминали в предыдущем шаге, количество загрузок записывается в виде строки, в таблицу download_manager, базы данных MySQL. Сначала, позвольте объяснить как работает эта часть запроса: download.php [sql] INSERT INTO download_manager SET filename='filename.doc' ON DUPLICATE KEY UPDATE downloads=downloads+1 [/sql] Первая часть запроса говорит MySQL вставить новую строчку в таблицу download_manager, и установить значение поля filename равным имени запрашиваемого для загрузки файла. Кроме этого, поле filename определено как уникальный индекс таблицы. Это значит, что строка с конкретным именем файла, может быть вставлена только один раз, иначе произойдет ошибка дублирования ключевых полей. Именно в этом случае, вступает в силу вторая часть запроса - ON DUPLICATE KEY UPDATE, которая увеличивает значение поля downloads на единицу, если этот файл уже записан в базе данных. Таким образом, новые файлы будут автоматически вставляться в базу данных в первый раз, после того как загружены.

Шаг 5 – jQuery

Для того, чтобы сделать наш счетчик загрузок более наглядным, было бы неплохо добавить возможность обновлять счетчик, находящийся рядом с именем файла, сразу после того, как пользователь начнет загрузку. Пока что, для того чтобы увидеть новые значения счетчиков, пользователю нужно перезагрузить страницу. Это можно исправить небольшим фрагментом кода: script.js [javascript] $(document).ready(function(){ /* This code is executed after the DOM has been completely loaded */ $('ul.manager a').click(function(){ var countSpan = $('.download-count',this); countSpan.text( parseInt(countSpan.text())+1); }); }); [/javascript] Мы просто назначили обработчик события на клик по ссылке. Каждый раз, после того, как пользователь кликнет по ссылке, мы увеличиваем текущее значение загрузок на единицу.

Шаг 6 – htaccess

Нам осталось сделать еще одну вещь, прежде чем можно будет назвать работу законченной. Возможно, вы уже заметили, что некоторые типы файлов, браузер по умолчанию пытается сразу же открывать. Вместо этого, нам нужно запускать загрузку файла. Это довольно легко сделать, добавив несколько строчек внутри файла .htaccess, расположенного в папке files: [php] ForceType application/octet-stream [/php] Вот и все, наш счетчик загрузок готов.

Заключение

Чтобы запустить этот пример на своем собственном сервере, вам понадобится создать таблицу download_manager в базе данных MySQL, к которой у вас разумеется есть доступ. В архиве с примером, есть файл table.sql, который содержит необходимый SQL-код, который создаст нужную таблицу. После этого, просто укажите свои данные подключения к базе, в файле configuration.php. Смотреть демо. Архив с приведенным примером. Перевод статьи “PHP & MySQL File Download Counter”, автор Martin Angelov

15 регулярных выражений PHP в помощь веб-разработчику

dreamhelg — Fri, 12 Feb 2010 11:49:52 +0000

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

Введение в регулярные выражения

Многим начинающим разработчикам кажется, что регулярные выражения очень сложны для понимания и использования. На самом деле, все не так уж сложно, как может показаться. Прежде чем мы непосредственно перейдем к регулярным выражениям, с их полезным и универсальным кодом, давайте взглянем на основы: Синтаксис регулярных выражений

Регулярное выражение	Означает
foo	Строка “foo”
^foo	Строка начинается с “foo”
foo$	Строка заканчивается на “foo”
^foo$	"foo" встречается в строке только один раз
[abc]	a, b, или c
[a-z]	любой символ в нижнем регистре
[^A-Z]	любой символ, не находящийся в верхнем регистре
(gif\|jpg)	Означает как "gif” так и “jpeg”
[a-z]+	Один или более символов нижнего регистра
[0-9.-]	Любая цифра, точка или знак минус
^[a-zA-Z0-9_]{1,}$	Любое слово, хотя бы одна буква, число или _
([wx])([yz])	wy, wz, xy, или xz
(^A-Za-z0-9)	Любой символ (не число и не буква)
([A-Z]{3}\|[0-9]{4})	Означает три буквы или 4 цифры

PHP-функции для регулярных выражений

Функция	Описание
preg_match()	Функция preg_match() ищет строку по заданному шаблону, возвращает true, если строка находится и false, в остальных случаях
preg_match_all()	Функция preg_match_all() находит все вхождения строки, заданной по шаблону
preg_replace()	Функция preg_replace(), действует по тому же принципу, что и ereg_replace(), за исключением того, что регулярные выражения можно использовать как для задания шаблона поиска, так и для строки, на которую следует заменить, найденное значение.
preg_split()	Функция preg_split(), действует так же как split(), за исключением того, что регулярное выражение можно использовать в качестве параметра для шаблона поиска.
preg_grep()	Функция preg_grep() ищет все элементы входного массива, возвращая все элементы, соответствующие шаблону регулярного выражения.
preg_quote()	Экранирует символы регулярного выражения

Проверка доменного имени

Проверяем, является ли строка правильным доменным именем [php] $url = "http://komunitasweb.com/"; if (preg_match('/^(http|https|ftp)://([A-Z0-9][A-Z0-9_-]*(?:.[A-Z0-9][A-Z0-9_-]*)+):?(d+)?/?/i', $url)) { echo "Your url is ok."; } else { echo "Wrong url."; } [/php]

Подсветка слова в тексте

Это очень полезное регулярное выражение, с его помощью вы можете найти нужное слово и подсветить его. Особенно полезно для отображения результатов поиска. [php] $text = "Sample sentence from KomunitasWeb, regex has become popular in web programming. Now we learn regex. According to wikipedia, Regular expressions (abbreviated as regex or regexp, with plural forms regexes, regexps, or regexen) are written in a formal language that can be interpreted by a regular expression processor"; $text = preg_replace("/b(regex)b/i", '1', $text); echo $text; [/php]

Подсветка результатов поиска в WordPress блоге

Как уже говорилось в предыдущем примере, этот пример кода, удобно использовать в выдаче поисковых результатов и есть отличный способ внедрить эту функцию в wordpress-блог. Откройте ваш файл search.php, и найдите функцию the_title(). Замените ее следующим кодом: [php] echo $title; [/php] Теперь, выше этой строки, добавьте этот код: [php] \0', $title); ?> [/php] Сохраните файл search.php, и откройте style.css. Добавьте следующую строку: [css] strong.search-excerpt { background: yellow; } [/css]

Получение всех картинок из HTML-документа

Если вам когда-нибудь требовалось получить все картинки с веб-страницы, этот код должен быть Вы легко сможете создать загрузчик изображений с помощью возможностей cURL [php] $images = array(); preg_match_all('/(img|src)=("|')[^"'>]+/i', $data, $media); unset($data); $data=preg_replace('/(img|src)("|'|="|=')(.*)/i',"$3",$media[0]); foreach($data as $url) { $info = pathinfo($url); if (isset($info['extension'])) { if (($info['extension'] == 'jpg') || ($info['extension'] == 'jpeg') || ($info['extension'] == 'gif') || ($info['extension'] == 'png')) array_push($images, $url); } } [/php]

Удаление повторяющихся слов (не чувствителен к регистру)

Во время печатания, часто повторяются слова? Поможет это регулярное выражение. [php] $text = preg_replace("/s(w+s)1/i", "$1", $text); [/php]

Удаление повторяющейся пунктуации

То же самое, только для пунктуации. Попрощайтесь с двойными запятыми. [php] $text = preg_replace("/.+/i", ".", $text); [/php]

Поиск XML/HTML тэгов

Эта простая функция, принимает два аргумента. Первый – это тэг, который вам нужно найти, и второй – это переменная, содержащая XML или HTML. Повторюсь, эту функцию очень удобно использовать вместе с cURL. [php] function get_tag( $tag, $xml ) { $tag = preg_quote($tag); preg_match_all('{<'.$tag.'[^>]*>(.*?).'}', $xml, $matches, PREG_PATTERN_ORDER); return $matches[1]; } [/php]

Поиск XHTML/XML тэгов с определенным значением атрибута

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

. [php] function get_tag( $attr, $value, $xml, $tag=null ) { if( is_null($tag) ) $tag = '\w+'; else $tag = preg_quote($tag); $attr = preg_quote($attr); $value = preg_quote($value); $tag_regex = "/<(".$tag.")[^>]*$attr\s*=\s*". "(['\"])$value\\2[^>]*>(.*?)<\/\\1>/" preg_match_all($tag_regex, $xml, $matches, PREG_PATTERN_ORDER); return $matches[3]; } [/php]

Поиск шестнадцатеричных значений цветов

Еще один полезный инструмент для веб-разработчика! Он позволяет вам находить/проверять шестнадцатеричные значение цвета. [php] $string = "#555555"; if (preg_match('/^#(?:(?:[a-fd]{3}){1,2})$/i', $string)) { echo "example 6 successful."; } [/php]

Поиск заголовка статьи

Этот фрагмент кода найдет и выведет на экран текст, находящийся внутри тэгов , на html-странице. [php] $fp = fopen("http://www.catswhocode.com/blog","r"); while (!feof($fp) ){ $page .= fgets($fp, 4096); } $titre = eregi("(.*)",$page,$regs); echo $regs[1]; fclose($fp); [/php]

Парсинг логов Apache

Большинство сайтов запущено на всем известном веб-сервере Apache. Если ваш сайт находится в их числе, почему бы не использовать PHP и регулярные выражения для разбора логов апача? [php] //Logs: Apache web server //Successful hits to HTML files only. Useful for counting the number of page views. '^((?#client IP or domain name)S+)s+((?#basic authentication)S+s+S+)s+[((?#date and time)[^]]+)]s+"(?:GET|POST|HEAD) ((?#file)/[^ ?"]+?.html?)??((?#parameters)[^ ?"]+)? HTTP/[0-9.]+"s+(?#status code)200s+((?#bytes transferred)[-0-9]+)s+"((?#referrer)[^"]*)"s+"((?#user agent)[^"]*)"$' //Logs: Apache web server //404 errors only '^((?#client IP or domain name)S+)s+((?#basic authentication)S+s+S+)s+[((?#date and time)[^]]+)]s+"(?:GET|POST|HEAD) ((?#file)[^ ?"]+)??((?#parameters)[^ ?"]+)? HTTP/[0-9.]+"s+(?#status code)404s+((?#bytes transferred)[-0-9]+)s+"((?#referrer)[^"]*)"s+"((?#user agent)[^"]*)"$' [/php]

Замена двойных кавычек “умными” кавычками

Если вы любитель типографики, вам понравится это регулярное выражение, заменяющее обычные двойные кавычки, на “умные кавычки”. Похожее регулярное выражение используется в wordpress в контенте страницы. [php] preg_replace('B"b([^"x84x93x94rn]+)b"B', '?1?', $text); [/php]

Комплексная проверка пароля

Это регулярное выражение будет следить за тем, чтобы в текстовое поле было введено не менее шести символов, цифры, дефисы и подчеркивания. Текстовое поле должно содержать как минимум один символ верхнего регистра, один нижнего регистра и одну цифру. [php] 'A(?=[-_a-zA-Z0-9]*?[A-Z])(?=[-_a-zA-Z0-9]*?[a-z])(?=[-_a-zA-Z0-9]*?[0-9])[-_a-zA-Z0-9]{6,}z' [/php]

WordPress: Использование регулярного выражения для получения картинок из записи

Поскольку многие из вас являются пользователями WordPress, вам возможно пригодится код, который позволяет получить все картинки, из текста статьи, и вывести их. Для того, чтобы использовать этот код, просто вставьте его в любой файл вашей темы. [php] post_content; $szSearchPattern = '~]* />~'; // Run preg_match_all to grab all the images and save the results in $aPics preg_match_all( $szSearchPattern, $szPostContent, $aPics ); // Check to see if we have at least 1 image $iNumberOfPics = count($aPics[0]); if ( $iNumberOfPics > 0 ) { // Now here you would do whatever you need to do with the images // For this example the images are just displayed for ( $i=0; $i < $iNumberOfPics ; $i++ ) { echo $aPics[0][$i]; }; }; endwhile; endif; ?> [/php]

Генерация автоматических смайлов

Другая функция, используемая в wordpress – позволяет автоматически заменять символы смайлов на картинку смайла. [php] $texte='A text with a smiley :-)'; echo str_replace(':-)','',$texte); [/php] Перевод статьи “15 PHP regular expressions for web developers”, автор Jean-Baptiste Jung

Фантастическая CSS3 лайтбокс галерея с помощью jQuery

dreamhelg — Tue, 22 Dec 2009 11:31:42 +0000

С удовольствием принимаю эстафету по обзору полезных зарубежных ресурсов, предложенную блоггером cuprum, и сегодня, хочу представить вашему вниманию англоязычный блог - tutorialzine.com. Этот блог отличается от других, главным образом тем, что в нем регулярно публикуются очень красивые, а главное полезные, готовые решения для веб-разработчика. И сегодняшняя статья – не исключение. В сегодняшней статье, мы создадим отличную фото-галерею, которая использует новейшие техники CSS3 и Jquery. Созданный нами скрипт, будет сканировать папку с картинками на вашем веб-сервере, и строить на основе полученных данных полноценную drag-and-drop галерею. Это решение будет SEO-дружелюбным, кроме того оно будет работать даже с браузерами, выпущенными в одно время с IE6 (за исключением потери нескольких красивых эффектов). Мы будем использовать jQuery, jQuery UI (для реализации drag-and-drop) и плагин jQuery fancybox в дополнение к PHP и CSS, для интерактивности и стилизации. Прежде чем мы начнем, взгляните на конечный результат. Итак, давайте перейдем к первому шагу.

Шаг 1 – XHTML

Основная идея в том, чтобы использовать PHP для генерации необходимой XHTML-разметки для каждого изображения. Сгенерированный код, в дальнейшем будет включен в файл demo.php. demo.php [html]

[/html] Здесь нет ничего сложного. Обратите внимание на блок с id =”modal” - он используется для создания модального окна, которое отображается, если пользователь перетаскивает изображение на блок "drop to share". Но подробнее об этом, мы поговорим позже.

Шаг 2 – CSS

Теперь, когда у нас есть вся необходимая разметка, пришло время ее стилизовать. Сначала, нам нужно включить CSS-файлы в секции head нашей страницы. demo.php [html] [/html] После этого, можно перейти к написанию стилей. demo.css [css] body{ /* Styling the body */ color:white; font-size:13px; background: #222222; font-family:Arial, Helvetica, sans-serif; } #gallery{ /* The pics container */ width:100%; height:580px; position:relative; } .pic, .pic a{ /* Each picture and the hyperlink inside it */ width:100px; height:100px; overflow:hidden; } .pic{ /* Styles specific to the pic class */ position:absolute; border:5px solid #EEEEEE; border-bottom:18px solid #eeeeee; /* CSS3 Box Shadow */ -moz-box-shadow:2px 2px 3px #333333; -webkit-box-shadow:2px 2px 3px #333333; box-shadow:2px 2px 3px #333333; } .pic a{ /* Specific styles for the hyperlinks */ text-indent:-999px; display:block; /* Setting display to block enables advanced styling for links */ } .drop-box{ /* The share box */ width:240px; height:130px; position:absolute; bottom:0; right:0; z-index:-1; background:url(img/drop_box.png) no-repeat; } .drop-box.active{ /* The active style is in effect when there is a pic hovering above the box */ background-position:bottom left; } label, input{ /* The modal dialog URL field */ display:block; padding:3px; } label{ font-size:10px; } fieldset{ border:0; margin-top:10px; } #url{ /* The URL field */ width:240px; } [/css] Один из представленных выше классов нуждается в пояснении, это CSS-класс pic. Он используется для того картинки выглядели как полароидные снимки. Для достижения такого эффекта, каждому изображению добавляется белая рамка. Кроме того, в этом классе используется CSS3-свойство box-shadow, благодаря которому, каждый снимок отбрасывает тень. Если вы посмотрите на демо-страницу, то увидите, что фотографии разбросаны по страницы и развернуты в разные стороны. Такой эффект достигается с помощью CSS, на стороне PHP, как вы скоро увидите. Остальные стили очень простые, и не нуждаются в детальном объяснении.

Шаг 3 – PHP

Как вы помните, на шаге 1, мы рассмотрели часть XHTML-разметки, и отметили, что PHP будет использоваться для создания специальной разметки, для каждого изображения. И вот как это делается: demo.php [php] /* Configuration Start */ $thumb_directory = 'img/thumbs'; $orig_directory = 'img/original'; $stage_width=600; $stage_height=400; /* Configuration end */ $allowed_types=array('jpg','jpeg','gif','png'); $file_parts=array(); $ext=''; $title=''; $i=0; /* Opening the thumbnail directory and looping through all the thumbs: */ $dir_handle = @opendir($thumb_directory) or die("There is an error with your image directory!"); $i=1; while ($file = readdir($dir_handle)) { /* Skipping the system files: */ if($file=='.' || $file == '..') continue; $file_parts = explode('.',$file); $ext = strtolower(array_pop($file_parts)); /* Using the file name (withouth the extension) as a image title: */ $title = implode('.',$file_parts); $title = htmlspecialchars($title); /* If the file extension is allowed: */ if(in_array($ext,$allowed_types)) { /* Generating random values for the position and rotation: */ $left=rand(0,$stage_width); $top=rand(0,400); $rot = rand(-40,40); if($top>$stage_height-130 && $left > $stage_width-230) { /* Prevent the images from hiding the drop box */ $top-=120+130; $left-=230; } /* Outputting each image: */ echo '

'.$title.'

'; } } /* Closing the directory */ closedir($dir_handle); [/php] Сначала, мы открываем папку миниатюр с помощью opendir (с помощью модификатора @, мы предотвращаем появление любых возможных проблем, отображаемых пользователю) и проходим циклом по всем картинкам. В цикле, мы пропускаем файлы, не являющиеся изображениями, и генерируем некоторый XHTML-код для каждого изображения, который выводится непосредственно на экран. Как уже упоминалось ранее, в части CSS, PHP отвечает за вращение и разброс картинок по странице. Каждое изображение позиционируется по случайным X и Y координатам, и поворачивается в диапазоне от -40 до 40 градусов (для предотвращения переворачивания снимков вверх ногами). Все это генерируется с помощью PHP-функции rand() и включается в качестве CSS-стиля картинки, с помощью атрибута style. Существуют две папки с картинками, использующиеся галереей – thumbs, в которой содержатся миниатюры картинок, размером 100 х 100 пикселей, и original, которая содержит картинку реального размера. Обратите внимание на важную деталь, изображения в папке thumbnail и original, должны иметь одно и то же имя, иначе галерея будет работать не правильно. Единственно, что осталось сделать – добавить немного интерактивности.

Шаг 4 – jQuery

Итак, у нас на руках отличная CSS-галерея. Но это ничего не значит, если мы не можем перетаскивать понравившиеся картинки по экрану и увеличивать их для более детального просмотра, не так ли? Пришло время JQuery. script.js [javascript] $(document).ready(function(){ // Executed once all the page elements are loaded var preventClick=false; $(".pic a").bind("click",function(e){ /* This function stops the drag from firing a click event and showing the lightbox */ if(preventClick) { e.stopImmediatePropagation(); e.preventDefault(); } }); $(".pic").draggable({ /* Converting the images into draggable objects */ containment: 'parent', start: function(e,ui){ /* This will stop clicks from occuring while dragging */ preventClick=true; }, stop: function(e, ui) { /* Wait for 250 milliseconds before re-enabling the clicks */ setTimeout(function(){ preventClick=false; }, 250); } }); $('.pic').mousedown(function(e){ /* Executed on image click */ var maxZ = 0; /* Find the max z-index property: */ $('.pic').each(function(){ var thisZ = parseInt($(this).css('zIndex')) if(thisZ>maxZ) maxZ=thisZ; }); /* Clicks can occur in the picture container (with class pic) and in the link inside it */ if($(e.target).hasClass("pic")) { /* Show the clicked image on top of all the others: */ $(e.target).css({zIndex:maxZ+1}); } else $(e.target).closest('.pic').css({zIndex:maxZ+1}); }); /* Converting all the links to a fancybox gallery */ $("a.fancybox").fancybox({ zoomSpeedIn: 300, zoomSpeedOut: 300, overlayShow:false }); /* Converting the share box into a droppable: */ $('.drop-box').droppable({ hoverClass: 'active', drop:function(event,ui){ /* Fill the URL text field with the URL of the image. */ /* The id of the image is appended as a hash #pic-123 */ $('#url').val(location.href.replace(location.hash,'')+'#' + ui.draggable.attr('id')); $('#modal').dialog('open'); } }); /* Converts the div with id="modal" into a modal window */ $("#modal").dialog({ bgiframe: true, modal: true, autoOpen:false, buttons: { Ok: function() { $(this).dialog('close'); } } }); if(location.hash.indexOf('#pic-')!=-1) { /* Checks whether a hash is present in the URL */ /* and shows the respective image */ $(location.hash+' a.fancybox').click(); } }); [/javascript] Сначала, мы вешаем, обработчик событий на клик по картинке, с тем, чтобы лайтбокс не срабатывал, когда мы просто перетаскиваем изображение. После этого, мы делаем все картинки перетаскиваемыми, а затем настраиваем lightbox. Теперь, нам нужно сделать блок «Drop to share», «принимающим», то есть блок сможет определять, когда к нему подвели и отпустили картинку. Это позволит нам применить специальный стиль к контейнеру, и открыть модальное окно. Модальное окно – это компонент пользовательского интерфейса, поставляемый вместе с jQuery UI. Он прячет все элементы страницы, под полупрозрачный слой, тем самым блокируя их использование для пользователя. Единственная вещь, полностью привлекающая внимание пользователя – это окно с сообщением, которое в нашем случае, окно содержит URL картинки. И наконец, у нас есть несколько строк кода, которые проверяют, есть ли строки вида #pic-123 в URL, c помощью которых, лайтбокс показывает соответствующие изображения при загрузке страницы. Наша CSS3-галерея готова. Скачать архив с примером. Перевод статьи «An Awesome CSS3 Lightbox Gallery With jQuery», автор Martin

Другие участники эстафеты:

Cuprum.name – Работа с цветовой моделью RGBA
rotorweb.ru — Скажем прощай overflow: hidden!

Хотите принять участие в эстафете? Это очень просто, опубликуйте перевод статьи из представляемого ресурса, сообщите мне, и я с удовольствием поставлю ссылку на ваш блог. Обязательное условие – статьи и ресурсы не должны повторятся.

WordPress. Простой шорткод для постоянных ссылок

dreamhelg — Tue, 01 Dec 2009 12:48:19 +0000

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

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

Плохой пример: [php] Контакты [/php] Хороший пример: [php] Контакты [/php] Здесь «12» - это ID нужной записи или страницы. Почему же этот способ правильней?

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

Используя вышеуказанную функцию, ссылки на ваши записи и страницы никогда не изменятся. Это очень удобно использовать, при работе с файлами нашей темы, но как насчет использования ссылок на страницах и записях в визуальном редакторе? По умолчанию, мы не можем выполнять PHP-код внутри нашей страницы или записи, а следовательно нет возможности использовать функцию get_permalink. Что мы можем сделать, так это создать специальный шорткод, с точно такой же функциональностью. И вот он: [php] function permalink_thingy($atts) { extract(shortcode_atts(array( 'id' => 1, 'text' => "" // значение по умолчанию, если ничего не указано ), $atts)); if ($text) { $url = get_permalink($id); return "$text"; } else { return get_permalink($id); } } add_shortcode('permalink', 'permalink_thingy'); [/php] Этот шорткод можно использовать двумя способами: Просто: [php] Использование без текста [/php] Здесь вам нужно просто указать параметр id и шорткод вернет URL. Полученный URL можно использовать любым способом, например, если вам нужно присвоить ссылке определенный класс или еще для чего-нибудь. С текстом: [php] [permalink id=49 text='providing text'] [/php] Этот способ вернет полностью форматированную ссылку, с текстом, который вы указали. Перевод статьи «Easy Shortcode Permalinks», автор Chris Coyier

Простой, перетаскиваемый элемент на jQuery

dreamhelg — Mon, 23 Nov 2009 07:54:16 +0000

Бывают случаи, когда вам может понадобиться создать перетаскиваемый элемент внутри вашего веб-приложения. Это отличная функциональность, однако, возможно вы хотите, чтобы элемент оставался на новом месте, после перетаскивания. В сегодняшней статье вы узнаете, как можно легко перетаскивать и закреплять в новом месте нужный элемент даже после перезагрузки страницы, с помощью захвата и хранения его X и Y координат.

Сценарий

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

Начало

Для этого примера нам понадобится библиотека jQuery, jQuery UI и плагин JQuery-JSON. Кроме этого, мы также будем использовать PHP и базу данных MySQL для разбора и хранения наших данных. Если вы новичок в jQuery, не беспокойтесь. JQuery - это расширяемая, быстрая и легковесная JavaScript-библиотека, которую легко и весело использовать. Библиотека имеет хорошо структурированную документацию и огромное сообщество.

HTML и CSS

Начнем с HTML-разметки и стилей для нашего примера. Сначала CSS: [css] html, body { background:#151515; margin:0 0 0 0; padding:0 0 0 0; } #glassbox { background:#333; border:1px solid #000; height:400px; margin:30px auto auto auto; position:relative; width:960px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #element { background:#666; border:1px #000 solid; cursor:move; height:143px; padding:10px 10px 10px 10px; width:202px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #respond{ color:#fff; margin:0 auto 0 auto; width:960px; } [/css] CSS – очень простой. Мы назначаем html и body нулевые свойства, для чистки внешних и внутренних отступов, далее устанавливаем значения высоты, ширины и другие свойства для наших элементов. -moz-border-radius и -webkit-border-radius – это два свойства, позволяющие нам создать закругленные углы (работает пока только в Mozilla Firefox и Safari 3) для наших элементов. Теперь, давайте взглянем на HTML: [html] Simple Draggable Element Persistence with jQuery

Move the Box

[/html] Как видите, мы создали очень простую страницу, в которую подключили наш CSS, библиотеку JavaScript и плагины, кроме того, страница содержит элементы, к которым мы будем применять некоторые эффекты и события. Обратите внимание, что файл jquery-ui представляет собой специальную сборку, включающую в себя только ядро и функции перетаскивания элементов.

JavaScript

Теперь самое интересное! Сначала давайте рассмотрим базовые функции, которые мы будем использовать для применения некоторых эффектов к нашим элементам. Разберем все до основания. [javascript] [/javascript] Поместите этот код ниже HTML, сразу после закрывающего тега body.

PHP

Хорошо, давайте сделаем что-нибудь с данными, которые приходят от нашего JQuery. Сначала нужно создать простую базу данных, для хранения наших координат, которые мы впоследствии будем использовать для определения позиции нашего элемента. Затем, нам понадобится файл config.php, в котором будут записаны параметры подключения к базе данных, а затем мы перейдем к updatecords.php. SQL [sql] Database: 'xycoords' CREATE TABLE IF NOT EXISTS `coords` ( `id` int(11) NOT NULL AUTO_INCREMENT, `x_pos` int(4) NOT NULL, `y_pos` int(4) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1; [/sql] Config.php [php] [/php] updatecoords.php [php] coords as $item) { //Extract X number for panel $coord_X = preg_replace('/[^\d\s]/', '', $item->coordTop); //Extract Y number for panel $coord_Y = preg_replace('/[^\d\s]/', '', $item->coordLeft); //escape our values - as good practice $x_coord = mysqli_real_escape_string($link, $coord_X); $y_coord = mysqli_real_escape_string($link, $coord_Y); //Setup our Query $sql = "UPDATE coords SET x_pos = '$x_coord', y_pos = '$y_coord'"; //Execute our Query mysqli_query($link, $sql) or die("Error updating Coords :".mysqli_error()); } //Return Success echo "success"; ?> [/php] Здесь все довольно просто. Первое, что мы делаем – это проверяем, были ли переданы данные в файл. Если это произошло, мы включаем наш файл с настройками config.php и назначаем переменной $data значение json_decode(passed post variable); json_decode – это PHP-функция, представленная в PHP 5.2.0, которая позволяет декодировать строку JSON. Поскольку наша переменная $data содержит массив данных, нам нужно разобрать его на части, чтобы получить нужные значения. Для этого мы пройдемся по массиву $data->coords () (который был получен из переменной order в JavaScript) и обработаем каждый элемент. В результате, из каждой пары ключ – значение будет создан объект списка, который мы в дальнейшем укажем и создадим переменную для его вывода. При этом мы будем использовать функцию preg_replace, для исключения ненужных символов. Кроме того, мы подготовим наши значения для вставки в базу данных, путем экранирования кавычек, и апострофов, с помощью функции mysqli_real_escape_string. Если все прошло хорошо, нам нужно будет вернуть успешный результат JavaScript.

В заключение

Теперь, когда у нас уже все готово, для того чтобы получить координаты элемента и передать их в PHP для записи, нам понадобится изменить нашу HTML-разметку для отображения позиции элемента. Для этого, мы удалим простую HTML-разметку и создадим ее с помощью PHP: [php]

Move the Box

'; } ?>

[/php] Здесь мы исполняем простой запрос к базе данных для выбора всех строк из таблицы coords. Затем мы вызываем цикл while, который определяет каждую выбранную нами строчку как $row. Теперь, мы можем назначить переменные равными каждой, индивидуальной строке, полученной из базы данных, и выводим их в соответствующем месте. Скачать архив с примером. Перевод статьи «Simple Draggable Element Persistence with jQuery», автор Dustin Blake

Красивая форма обратной связи на основе AJAX

dreamhelg — Fri, 13 Nov 2009 08:56:14 +0000

Предоставление посетителям сайта простого и надежного средства обратной связи – это важнейшая часть любого веб-проекта. Наиболее простым и часто используемым каналом обратной связи - являются контактные формы. Посмотреть результат можно здесь. В сегодняшней статье, мы создадим форму обратной связи на аяксе, с использованием современных техник веб-разработки. Для этого мы будем использовать PHP, CSS и jQuery в виде нескольких плагинов. Плагин formValidator будем использовать для проверки введенных значений, а с помощью плагина jQTransform, будем стилизовать текстовые поля и кнопки нашей формы. В дополнение, мы будем использовать класс PHPMailer для отправки на почту введенных данных. Кроме того, наша форма будет прекрасно работать даже с выключенным JS. *Для нормальной работы примера, вам понадобится PHP5

Шаг 1 – XHTML

Сначала нам понадобится XHTML-разметка для формы. demo.php [html]

Fancy Contact Form

Drop us a line and we will get back to you

[/html] Как вы могли заметить в строке 8, обрабатывать нашу форму будет файл submit.php. Мы будем использовать этот файл в обоих случаях – как для обычной отправки формы (для посетителей с выключенным JS), так и для аяксовой отправки формы. Это позволит легко обновлять код, без необходимости объединять изменения между файлами. Далее, мы можете видеть, что мы используем массив $_SESSION для заполнения текстовых полей значениями. Это делается для того, чтобы данные не потерялись во время перенаправления страницы, которое происходит во время отправки формы в submit.php. Другой важный аспект – это классы, назначенный текстовым полям – classs=”validate[required,custom[onlyLetter]]”. Эти классы используются плагином валидации для определения правил проверки введенных значений для каждого текстового поля. В нашем примере, мы указываем, что поле обязательное, и разрешено вводить только буквы. Существует множество доступных правил валидации, вы можете узнать о них на домашней странице плагина. Теперь взгляните, как будет выглядеть наша форма, с применением плагина JQtransform.

Шаг 2 – jQuery

МЫ используем два плагина jQuery – jQtransform для стилизации элементов формы, и formValidator для проверки введенных значений на клиентской стороне. Очень важно помнить, что кроме клиентской стороны, введенные данные всегда нужно проверять на серверной стороне. Итак, для начала нам нужно подключить все необходимые библиотеки. demo.php [php] [/php] Указанный выше код расположен в секции head, файла demo.php. Сначала мы подключаем CSS-файлы, используемые обоими плагинами, а затем уже библиотеку JQuery и плагины. Возможно, вас заинтересовала строка 5 – это специальный набор CSS-правил, который мы создадим с помощью PHP, для отображения подтверждающего сообщения, как вы увидите в дальнейшем. Теперь, давайте посмотрим на наш файл script.js. script.js [javascript] $(document).ready(function(){ /* after the page has finished loading */ $('#contact-form').jqTransform(); /* transform the form using the jqtransform plugin */ $("button").click(function(){ $(".formError").hide(); /* hide all the error tooltips */ }); var use_ajax=true; $.validationEngine.settings={}; /* initialize the settings object for the formValidation plugin */ $("#contact-form").validationEngine({ /* create the form validation */ inlineValidation: false, promptPosition: "centerRight", success : function(){use_ajax=true}, /* if everything is OK enable AJAX */ failure : function(){use_ajax=false} /* in case of validation failure disable AJAX */ }) $("#contact-form").submit(function(e){ if(!$('#subject').val().length) { $.validationEngine.buildPrompt(".jqTransformSelectWrapper","* This field is required","error") /* a custom validation tooltip, using the buildPrompt method */ return false; } if(use_ajax) { $('#loading').css('visibility','visible'); /* show the rotating gif */ $.post('submit.php',$(this).serialize()+'&ajax=1', /* using jQuery's post method to send data */ function(data){ if(parseInt(data)==-1) $.validationEngine.buildPrompt("#captcha","* Wrong verification number!","error"); /* if there is an error, build a custom error tooltip for the captcha */ else { $("#contact-form").hide('slow').after('

Thank you!

'); /* show the confirmation message */ } $('#loading').css('visibility','hidden'); /* hide the rotating gif */ }); } e.preventDefault(); /* stop the default form submit */ }) }); [/javascript] Весь блок скрипта выполняется внутри метода $(document).ready, который гарантирует нам, свое исполнение, только после окончания загрузки страницы. Далее, мы используем метод jqTransform(), который определен в плагине jqtransform. Он переделывает и стилизует все элементы формы (тестовые поля, кнопки и др.) Элемент select заменяется набором дивов и ссылок. Это выглядит здорово, однако влечет за собой некоторые проблемы с плагином валидации, в связи с чем, тултип для селекта нам придется сделать вручную. После этого, в строке 7, вешаем обработчик событий на нажатие кнопки в нижней части формы, с одной строкой кода, которая прячет отображаемые тултипы с сообщениями об ошибках. Это для того, чтобы страница правильно обновлялась, и подсказки не оставались на странице, если пользователь ввел правильные данные. Далее, мы инициализируем плагин formValidation, с помощью метода validationEngine() и в строке 24 описываем событие формы onsubmit. Пара моментов, на которые стоит обратить внимание здесь – отдельный тултип в строке 28, и дополнительный параметр ajax=1, в строке 39. Этот параметр использует файл submit.php, для того чтобы определить, передан ли запрос с помощью аякса или получен непосредственно через отправку формы. Также, обратите внимание, что мы используем специальную переменную use_ajax, для предотвращения работы аякса, если форма не прошла проверку.

Шаг 3 – CSS

Все наши CSS-правила описаны в файле demo.css demo.css [css] body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ /* reset some of the page elements */ margin:0px; padding:0px; } body{ color:#555555; font-size:13px; background: url(img/dark_wood_texture.jpg) #282828; font-family:Arial, Helvetica, sans-serif; } .clear{ clear:both; } #main-container{ width:400px; margin:30px auto; } #form-container{ background-color:#f5f5f5; padding:15px; /* rounded corners */ -moz-border-radius:12px; -khtml-border-radius: 12px; -webkit-border-radius: 12px; border-radius:12px; } td{ /* prevent multiline text */ white-space:nowrap; } a, a:visited { color:#00BBFF; text-decoration:none; outline:none; } a:hover{ text-decoration:underline; } h1{ color:#777777; font-size:22px; font-weight:normal; text-transform:uppercase; margin-bottom:5px; } h2{ font-weight:normal; font-size:10px; text-transform:uppercase; color:#aaaaaa; margin-bottom:15px; border-bottom:1px solid #eeeeee; margin-bottom:15px; padding-bottom:10px; } label{ text-transform:uppercase; font-size:10px; font-family:Tahoma,Arial,Sans-serif; } textarea{ color:#404040; font-family:Arial,Helvetica,sans-serif; font-size:12px; } td > button{ /* A special CSS selector that targets non-IE6 browsers */ text-indent:8px; } .error{ /* this class is used if JS is disabled */ background-color:#AB0000; color:white; font-size:10px; font-weight:bold; margin-top:10px; padding:10px; text-transform:uppercase; width:300px; } #loading{ /* the loading gif is hidden on page load */ position:relative; bottom:9px; visibility:hidden; } .tutorial-info{ color:white; text-align:center; padding:10px; margin-top:10px; } [/css] Обратите внимание на строку 85. Это правило делает кнопки шире, но, к сожалению это плохо выглядит в IE6. Поэтому мы используем специальный CSS-селектор, который игнорируется IE6, но отлично понимают остальные браузеры. Теперь, все что нам осталось – это PHP.

Шаг 4 – PHP

Сначала давайте рассмотрим код в начале файла demo.php demo.php [php] session_name("fancyform"); session_start(); $_SESSION['n1'] = rand(1,20); /* generate the first number */ $_SESSION['n2'] = rand(1,20); /* then the second */ $_SESSION['expect'] = $_SESSION['n1']+$_SESSION['n2']; /* the expected result */ /* the code below is used if JS has been disabled by the user */ $str=''; if($_SESSION['errStr']) /* if submit.php returns an error string in the session array */ { $str='

'.$_SESSION['errStr'].'

'; unset($_SESSION['errStr']); /* will be shown only once */ } $success=''; if($_SESSION['sent']) { $success='

Thank you!

'; /* the success message */ $css=''; /* a special CSS rule that hides our form */ unset($_SESSION['sent']); } [/php] Как видите, мы используем массив $_SESSION для хранения двух случайных чисел и ожидаемого результата. Это будет использоваться в дальнейшем, файлом submit.php, для подтверждения того, что капча решена. Другой интересный момент находится в строке 21, где мы описываем простой CSS-класс. Фактически здесь, мы скрываем форму, и отображаем сообщение об успешной отправке, если у пользователя отключен JS. submit.php [php] require "phpmailer/class.phpmailer.php"; session_name("fancyform"); /* starting the session */ session_start(); foreach($_POST as $k=>$v) { /* if magic_quotes is enabled, strip the post array */ if(ini_get('magic_quotes_gpc')) $_POST[$k]=stripslashes($_POST[$k]); $_POST[$k]=htmlspecialchars(strip_tags($_POST[$k])); /* escape the special chars */ } $err = array(); /* some error checks */ if(!checkLen('name')) $err[]='The name field is too short or empty!'; if(!checkLen('email')) $err[]='The email field is too short or empty!'; else if(!checkEmail($_POST['email'])) $err[]='Your email is not valid!'; if(!checkLen('subject')) $err[]='You have not selected a subject!'; if(!checkLen('message')) $err[]='The message field is too short or empty!'; /* compare the received captcha code to the one in the session array */ if((int)$_POST['captcha'] != $_SESSION['expect']) $err[]='The captcha code is wrong!'; /* if there are errors */ if(count($err)) { /* if the form was submitted via AJAX */ if($_POST['ajax']) { echo '-1'; } /* else fill the SESSION array and redirect back to the form */ else if($_SERVER['HTTP_REFERER']) { $_SESSION['errStr'] = implode('
',$err); $_SESSION['post']=$_POST; header('Location: '.$_SERVER['HTTP_REFERER']); } exit; } /* the email body */ $msg= 'Name: '.$_POST['name'].'
Email: '.$_POST['email'].'
IP: '.$_SERVER['REMOTE_ADDR'].'

Message:

'.nl2br($_POST['message']).' '; $mail = new PHPMailer(); /* using PHPMailer */ $mail->IsMail(); $mail->AddReplyTo($_POST['email'], $_POST['name']); $mail->AddAddress($emailAddress); $mail->SetFrom($_POST['email'], $_POST['name']); $mail->Subject = "A new ".mb_strtolower($_POST['subject'])." from ".$_POST['name']." | contact form feedback"; $mail->MsgHTML($msg); $mail->Send(); unset($_SESSION['post']); /* unsetting */ /* the form was successfully sent */ if($_POST['ajax']) { echo '1'; } else { $_SESSION['sent']=1; if($_SERVER['HTTP_REFERER']) header('Location: '.$_SERVER['HTTP_REFERER']); exit; } /* some helpful functions */ function checkLen($str,$len=2) { return isset($_POST[$str]) && mb_strlen(strip_tags($_POST[$str]),"utf-8") > $len; } function checkEmail($str) { return preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $str); } [/php] Обратите внимание как мы проверяем переменную $_POST[‘ajax’] на предмет установки и правильной работы. Как вы наверное помните, мы устанавливаем ее ранее, в файле script.js, для определения используется ли аякс для извлечения данных. Две переменные массива $_SESSION errStr и post используются для совместного использования данных между формой и файлом submit.php, в случае выключенного JS. Здесь переменная post содержит отправленный нами массив $_POST и используется для заполнения полей формы, после того как пользователь перенаправляется обратно. На этом работа над нашей формой обратной связи подошла к концу. Пример рабочий, за исключением одного маленького недоразумения. Плагин formValidation, создан с целью проводить валидацию только английских символов, так что если вы попытаетесь написать имя по-русски, он выдаст ошибку о том, что нужно вводить только буквы. К счастью это решается путем замены регулярного выражения в файле jquery.validationEngine.js. Найдите строчки: [javascript] "onlyLetter":{ "regex":"/^[a-zA-Z\ \']+$/", } [/javascript] и замените на следующую: [javascript] "onlyLetter":{ "regex":"/^[a-zA-Zа-яА-Я' ]+$/", } [/javascript] После этого, скрипт перестанет игнорировать русские символы. Скачать архив с примером. В связи с бесконечными вопросами, специально, отдельно сообщаю: настройка адреса email на который производится отправка писем, находится в файле submit.php, в самом начале файла, выглядит вот так: [php] /* config start */ $emailAddress = ''; /* config end */ [/php] Перевод статьи "A Fancy AJAX Contact Form", автор Martin

Name
Email
Subject
Message	<?=$_SESSION['post']['message']?>
+ =

Очередной блог фрилансера » php

WordPress. Функции базы данных

WordPress. Создаем встроенную форму обратной связи

Шаг 1: Создание шаблона

Шаг 2: Создание формы

Шаг 3: Обработка данных и ошибок

Шаг 4: Добавляем проверку jQuery

Введение в пользовательскую таксономию WordPress 3.0

Что такое Таксономия?

Краткая история таксономии WordPress

Рубрики

Метки

Одноуровневые пользовательские таксономии

Иерархические пользовательские таксономии

Создание пользовательской Таксономии

Добавляем Таксономии в коде

Добавляем классификацию к новой Таксономии

Добавляем больше Таксономий

Создание записи, с использованием новой Таксономии

Отображение различной таксономии записей

Вывод таксономии на индивидуальной странице

Просмотр списка записей, построенный на основе пользовательской таксономии

WordPress. Создаем удобную панель настроек

Шаг 1

Шаг 2

Шаг 3

Шаг 4

Шаг 5

Шаг 6

Настройки

Шаг 7

Шаг 8

/functions/images/trans.gif" class="inactive" alt=""/>

Шаг 10

Шаг 11

Шаг 12

Создаем счетчик загрузок файла с помощью PHP и MySQL

Шаг 1 – XHTML

Шаг 2 – CSS

Шаг 3 – PHP

Шаг 4 – MySQL

Шаг 5 – jQuery

Шаг 6 – htaccess

Заключение

15 регулярных выражений PHP в помощь веб-разработчику

Введение в регулярные выражения

Проверка доменного имени

Подсветка слова в тексте

Подсветка результатов поиска в WordPress блоге

Получение всех картинок из HTML-документа

Удаление повторяющихся слов (не чувствителен к регистру)

Удаление повторяющейся пунктуации

Поиск XML/HTML тэгов

Поиск XHTML/XML тэгов с определенным значением атрибута

Поиск шестнадцатеричных значений цветов

Поиск заголовка статьи

Парсинг логов Apache

Замена двойных кавычек “умными” кавычками

Комплексная проверка пароля

WordPress: Использование регулярного выражения для получения картинок из записи

Генерация автоматических смайлов

Фантастическая CSS3 лайтбокс галерея с помощью jQuery

Шаг 1 – XHTML

Шаг 2 – CSS

Шаг 3 – PHP

Шаг 4 – jQuery

Другие участники эстафеты:

WordPress. Простой шорткод для постоянных ссылок

Простой, перетаскиваемый элемент на jQuery

Сценарий

Начало

HTML и CSS

JavaScript

PHP

В заключение

Красивая форма обратной связи на основе AJAX

Шаг 1 – XHTML

Fancy Contact Form

Drop us a line and we will get back to you

Шаг 2 – jQuery