Я уже пытался вести образовательную колонку по HTML, урок 1 и урок 2, однако обстоятельства диктуют иное — не до образовательных страничек. А тут обратились с вопросом — как я вставляю галереи из Яндекс-фотками с прямыми ссылками на изображения? В этом мне помогает маааленький php-скрипт, написанный «на коленке.» А поскольку видеоуроки по программированию дают лишь весьма кратковременный эффект, а потом здорово забываются — лучше ставить конкретную практическую задачу, реализовывать её, а потом разбирать «по косточкам» решение. Так оно лучше запоминается и в перспективе позволяет наконец-таки в этом деле кое-как разбираться.
Как говорил один очень авторитетный программист — хотите чему-то научиться, скачайте исходный код готового продукта и разбирайтесь что к чему. Ну ладно, приступим, задача у нас следующая — скопировать ссылки, генерируемые яндекс-фотками, вставить их в некую форму, получить другие ссылки, вставить их в страничку вордпресс — получить галерею.
Техническое задание есть — приступим. Для начала давайте рассмотрим какие ссылки выдаёт нам Яндекс. «Код для вставки на сайт или в блог» выглядит следующим образом:
Фотографии в альбоме «<a href="http://fotki.yandex.ru/users/i-maksim39/album/451455/">Студотряд и спортзал</a>», автор <a target="_blank" href="http://fotki.yandex.ru/users/i-maksim39/"><b><font color="red">i</font><font color="black">.maksim39</font></b></a> на Яндекс.Фотках<br/><br/> <a href="http://fotki.yandex.ru/users/i-maksim39/view/838036/"><img src="http://img-fotki.yandex.ru/get/6836/209389666.d3/0_cc994_5e983a79_L.jpg" title="" alt="" border="0"/></a><br/><br/><lj-cut><cut text="ещё"><!--more--> <a href="http://fotki.yandex.ru/users/i-maksim39/view/838048/"><img src="http://img-fotki.yandex.ru/get/6844/209389666.d3/0_cc9a0_df46aa6e_L.jpg" title="" alt="" border="0"/></a><br/><br/> <a href="http://fotki.yandex.ru/users/i-maksim39/view/838050/"><img src="http://img-fotki.yandex.ru/get/6840/209389666.d3/0_cc9a2_e9e5851f_L.jpg" title="" alt="" border="0"/></a><br/><br/></cut></lj-cut>
Теперь рассмотрим более пристально именно строку на фотографию:
<a href="http://fotki.yandex.ru/users/i-maksim39/view/838048/"><img src="http://img-fotki.yandex.ru/get/6844/209389666.d3/0_cc9a0_df46aa6e_L.jpg" title="" alt="" border="0"/></a>
http://img-fotki.yandex.ru/get/6844/209389666.d3/0_cc9a0_df46aa6e_L.jpg
— вот он, собственно, прямой путь на генерируемое изображение. Однако есть нюанс, а именно последний символ до расширения (то есть до .jpg). В зависимости от размера изображения меняется символ:
- _XXS — 75 пикселей.
- _XS — 100 пикселей.
- _S — 150 пикселей.
- _M — 300 пикселей.
- _L — 500 пикселей.
- _XL — 800 пикселей.
- _XXL — 1024 пикселя.
- _XXXL — 1280 пикселей.
- _orig — оригинальное изображение.
Стало быть нам нужна определённая форма, куда мы вставим строки, типа
<a href="http://fotki.yandex.ru/users/i-maksim39/view/838048/"><img src="http://img-fotki.yandex.ru/get/6844/209389666.d3/0_cc9a0_df46aa6e_M.jpg" title="" alt="" border="0"/></a><br/><br/>
,
нажмём кнопку, эти данные передадутся в скрипт, который преобразует вышеуказанную строку в вид, типа
<a href="http://img-fotki.yandex.ru/get/6844/209389666.d3/0_cc9a0_df46aa6e_XXXL.jpg"><img src="http://img-fotki.yandex.ru/get/6844/209389666.d3/0_cc9a0_df46aa6e_M.jpg" title="" alt="" border="0"/></a>/[html] То есть скрипт должен "вытащить" строку вида [html]<a href="http://img-fotki.yandex.ru/get/6844/209389666.d3/0_cc9a0_df46aa6e_">http://img-fotki.yandex.ru/get/6844/209389666.d3/0_cc9a0_df46aa6e_</a><strong> </strong>
и поменять последний символ до расширения файла на необходимый. Ну что ж, давайте начнём с web-формы:
<!DOCTYPE html> <html> <head> <title>Другой код</title> </head> <body> <form action=«« method=«post»> <p> <textarea name=«src» cols=«50» rows=«20»></textarea> </p> <p><input type=«submit» value=«Получить нормальные ссылки»> </form> </body> </html>
Давайте опишем каждую строчку веб-формы. Код очень простой, но тем не менее. Особо останавливаться на тегах html, пожалуй, не буду, однако тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Атрибут action указывает куда будут передаваться данные, то есть может быть например так action = «myscript.php,» то есть что у нас получается, на сервере у нас есть непосредственно файл с формой, и файл myscript.php, который может принять данные из файла с формой и как-то их обработать.
Поскольку в вышеуказанном примере атрибут action не содержит никакого пути на файл, стало быть данные передаются сами на себя. То есть у нас присутствует файл, скажем index.php, в которой присутствует как html-форма, так и код, способный принять и обработать данные из формы. Таким образом данные передаются в этом случаи «сами на себя.»
method = «post» определяет способ передачи данных нашей маленькой php-программе. Существует два способа передачи данных. Метод GET и метод POST. Данные методом GET передаются путем их добавления к URL-адресу вызываемого сценария, предназначенного для обработки полученной информации. К примеру, makson.ru/index.php?name=maksimka Этой строкой я передал файлу index.php, расположенном на сайте makson.ru значение переменной name равной maksimka. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Что же такое переменная? Грубо говоря это контейнер с изменяемыми значениями.
Метод post посылает на сервер данные в запросе браузера, при этом адресная строка не меняется.
<textarea name="src" cols="50" rows="20"></textarea>
— рассмотрим данный участок кода. Поле <textarea> представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. Это поле также может иметь атрибуты. В нашем случае это атрибут name со значением src. Он нам нужен для того, чтобы принять данные методом Post в дальнейшем и обработать их. Атрибут cols со значением 50 указывает на то, что в нашей текстовой форме будет содержаться 50 столбцов, ну а атрибут rows говорит о том, что в нашем текстовом поле будет содержаться 20 строк. То есть чем больше эти значения, тем больше наше поле.
<input type= "submit" value= "Получить нормальные ссылки">
Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Атрибут type сообщает браузеру, к какому типу относится элемент формы. В данном случае это submit — то есть кнопка для отправки данных формы на сервер.
Атрибут value со значением «получить нормальные ссылки» просто создаёт надпись на самой кнопочке.
В общих чертах HTML-форму мы рассмотрели. Теперь пришло время рассмотреть просто код php для обработки данных. Для начало полностью сам код.
<?php if (isset($_POST[«src»])) { $links = explode («\n»,$_POST[«src»]); echo '<textarea cols=«100» rows=«40»>'; foreach(array_keys($links) as $key) { preg_match_all('/img-fotki.yandex.ru([^»]+).....[«]/',$links[$key], $result); $i = 0; foreach(array_keys($result[0]) as $key) { $i++; echo '<a target=«_blank» href=«http://img-fotki.yandex.ru'.$result[1][$key].'XXXL.jpg»><img width=«300» src=«http://img-fotki.yandex.ru'.$result[1][$key].'M.jpg» title=«« alt=«« border=«0»/></a>'; if ($i % 30 == 0) { echo «<!--nextpage-->»; } } } echo '</textarea>'; }else{ echo «»; } ?>
Странные обозначения вначале <?php и в конце ?> — это не просто так, а специальные маркеры. Ими отмечают начало и конец PHP-кода. Слово if обозначает начало условного цикла. If так и переводится с английского — если.
isset($_POST[«src»])
— тут не всё так просто, здесь мы имеем дело с функцией. Что такое функция? Функция это просто блок кода, который имеет название и входные параметры для обработки, который может быть выполнен, когда это необходимо. Например, такой пример:
<?php function Hello($name){ echo «Привет, «.$name.»!<br />«; } $name = 'Максимка'; Hello($name); ?>
Выведет на экран «Привет, Максимка!»
Можно написать ещё так:
<?php function Hello($name){ echo «Привет, «.$name.»!<br />«; } $imia = 'Максимка'; Hello($imia); ?>
То есть переменным не обязательно совпадать по названию, но неплохо бы совпадать по типу… Как мы уже говорили переменная — это некий контейнер со значением. В php переменная обозначается знаком доллара $ и может начинаться с латинской буквы или знака подчёркивания. С цифры начинаться не может. Пример: $family = «Хомячков»; $_family = «Кротов»; $a = 4; и т.д. Все выражения в PHP должны завершаться точкой с запятой. Конструкция языка echo, как Вы уже догадались, выводи одну или более строк. Для конкатенации (объединения) строк в PHP применяется символ «.» (точка).
PHP поддерживает восемь простых типов данных (переменных):
Четыре скалярных типа:
boolean (двоичные данные) integer (целые числа) float (числа с плавающей точкой или ‘double’) string (строки) Два смешанных типа:
array (массивы) object (объекты) И два специальных типа:
resource (ресурсы) NULL («пустой» тип)
isset — встроенная функция в PHP. isset — определяет, была ли установлена переменная значением отличным от NULL. В качестве аргумента мы передаём функции значения «src» методом POST. Как Вы видите в html-коде, src — это данные из текстовой области. Таким образом если были переданы какие-то данные «src» — начинает исполняться кусок кода ниже.
$links = explode («\n»,$_POST[«src»]); — в переменную $links мы передаём значения src, после того, как пропустим данные через функцию explode. Функция explode — разбивает строку на подстроки. Возвращает массив строк, полученных разбиением строки string с использованием separator в качестве разделителя.
<?php // Пример 1 $pizza = «piece1 piece2 piece3 piece4 piece5 piece6»; $pieces = explode(« «, $pizza); echo $pieces[0]; // piece1 echo $pieces[1]; // piece2 ?>
В данном случае в качестве разделителя у нас выступает «\n» — то есть перенос строки, продолжение печати текста с новой строки, то есть с левого края на строку ниже, или уже на следующей странице. Если separator — пустая строка («»), explode() возвращает FALSE. Если separator не содержится в string, то explode() возвращает массив, содержащий один элемент string. Описание функции в общем виде выглядит так: array explode ( string separator, string string [, int limit] ) То, что в квадратных скобках — необязательный параметр. Если передан аргумент limit передан, массив будет содержать максимум limit элементов, при этом последний элемент будет содержать остаток строки string.
Тэкс.. здесь мы встретились с новым понятием — массив! Массив (array) — это тоже самое, что список. На самом деле массив в PHP — это упорядоченное отображение, которое устанавливает соответствие между значением и ключом.
array( key => value, key2 => value2, key3 => value3, … )
Массивы, индексами которых являются числа, начинающиеся с нуля — это списки:
<?php // Простой способ инициализации массива $names[0]=«Апельсин»; $names[1]=«Банан»; $names[2]=«Груша»; $names[3]=«Помидор»; // Здесь: names - имя массива, а 0, 1, 2, 3 - индексы массива ?>
Доступ к элементам простых массивов (списков) осуществляется так:
<?php // Простой способ инициализации массива $names[0]=«Апельсин»; $names[1]=«Банан»; $names[2]=«Груша»; $names[3]=«Помидор»; // Здесь: names - имя массива, а 0, 1, 2, 3 - индексы массива // Выводим элементы массивов в браузер: echo $names[0]; // Вывод элемента массива names с индексом 0 echo «<br>«; echo $names[3]; // Вывод элемента массива names с индексом 3 // Выводит: // Апельсин // Помидор ?>
Массив также может быть многомерным и ассоциативным.
<?php // Многомерный простой массив: $arr[0][0]=«Овощи»; $arr[0][1]=«Фрукты»; $arr[1][0]=«Абрикос»; $arr[1][1]=«Апельсин»; $arr[1][2]=«Банан»; $arr[2][0]=«Огурец»; $arr[2][1]=«Помидор»; $arr[2][2]=«Тыква»; ?>
Ассоциативный массив:
<?php // Ассоциативный массив $names[«Иванов»]=«Иван»; $names[«Сидоров»]=«Николай»; $names[«Петров»]=«Петр»; // В данном примере: фамилии - ключи ассоциативного массива // , а имена - элементы массива names ?>
<?php // Многомерный массив $A[«Ivanov»] = array(«name»=>«Иванов И.И.», «age»=>«25», «email»=>«ivanov@mail.ru»); $A[«Petrov»] = array(«name»=>«Петров П.П.», «age»=>«34», «email»=>«petrov@mail.ru»); $A[«Sidorov»] = array(«name»=>«Сидоров С.С.», «age»=>«47», «email»=>«sidorov@mail.ru»); echo $A[«Ivanov»][«name»]; // Выводит Иванов И.И. echo $A[«Petrov»][«email»]; // Выводит petrov@mail.ru ?>
echo ‘<textarea cols=»100″ rows=»40″>’; — выводит в браузер соответственный html-код.
foreach(array_keys($links) as $key) — здесь бы добрались до управляющей конструкции foreach. А если конкретнее — цикл перебора массивов.
Синтаксис:
foreach (массив as $ключ=>$значение) команды;
Но прежде мы должны чётко понимать, что находится в переменной $links, а находится в ней простой массив! Изменим код на следующий:
<?php if (isset($_POST[«src»])) { $links = explode («\n»,$_POST[«src»]); echo «<pre>«; print_r ($links); echo «<pre>«; }else{ echo ««; } ?>
<!DOCTYPE html> <html> <head> <title>Допиливание кода Яндекс.Фоток</title> </head> <body> <form action=«» method=«post»> <p> <textarea name=«src» cols=«50» rows=«20»></textarea> </p> <p><input type=«submit» name=«go» value=«Получить нормальные ссылки»> </form> </body> </html>
Функция print_r выводит выводит удобочитаемую информацию о переменной, а элементы <pre></pre> определяют блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. Теперь попробуем ввести что-то вроде:
1
2
3
получим:
Array ( [0] => 1 [1] => [2] => 2 [3] => [4] => 3 )
То есть каждый перенос строки, благодаря функции explode — это ключ массива, а введённые цифры — значения массива. Пристальнее рассмотрим цикл foreach. Пример:
<?php $names[«Иванов»] = «Андрей»; $names[«Петров»] = «Борис»; $names[«Волков»] = «Сергей»; $names[«Макаров»] = «Федор»; foreach ($names as $key => $value) { echo «<b>$value $key</b><br>«; } ?>
Ассоциативный массив. Переменная $names разбивается на ключ (иванов, петров и т.д.) и их значения (Андрей, Борис и т.д.), после чего идёт перебор данных массива. Соответственно выведет:
Андрей Иванов Борис Петров Сергей Волков Федор Макаров
Однако у нас всё ещё интересней, в цикле данные из массива $links проходят через функцию array_keys.
Синтаксис: array array_keys ( array input [, mixed значение_для_поиска] )
Функция array_keys() возвращает числовые и строковые ключи, содержащиеся в массиве исходный_массив.
Если указан необязательный параметр значение_для_поиска, функция возвращает только ключи, совпадающие с этим параметром. В обратном случае, функция возвращает все ключи массива исходный_массив.
$array = array (0 => 100, »color» => »red»); print_r(array_keys ($array)); $array = array («blue», »red», »green», »blue», »blue»); print_r(array_keys ($array, »blue»)); $array = array («color» => array(«blue», »red», »green»), «size» => array(«small», »medium», »large»)); print_r(array_keys ($array));
Выведет
Array ( [0] => 0 [1] => color ) Array ( [0] => 0 [1] => 3 [2] => 4 ) Array ( [0] => color [1] => size )
Изменим код на:
<?php if (isset($_POST[«src»])) { $links = explode («\n»,$_POST[«src»]); echo «<pre>«; print_r ($links); echo «</pre>«; print_r(array_keys($links)); echo «<br /><hr />«; foreach(array_keys($links) as $key) { echo $links[$key]; } }else{ echo ««; } ?>
<!DOCTYPE html> <html> <head> <title>Допиливание кода Яндекс.Фоток</title> </head> <body> <form action=«« method=«post»> <p> <textarea name=«src» cols=«50» rows=«20»></textarea> </p> <p><input type=«submit» name=«go» value=«Получить нормальные ссылки»> </form> </body> </html>
Введём, к примеру:
Вася
Петя
Вова
Соответственно получим:
Array
( [0] => Вася [1] => [2] => Петя [3] => [4] => Вова )
Array ( [0] => 0 [1] => 1 [2] => 2 [3] => 3 [4] => 4 )
Вася Петя Вова
Ну что ж, надеюсь что-то прояснилось. Возвращаемся к основному коду. Строка
preg_match_all('/img-fotki.yandex.ru([^"]+).....["]/',$links[$key], $result);
и снова функция. Preg_match_all выполняет глобальный поиск шаблона в строке. По сути написано что, в переменной $links[$key] ищем шаблон /img-fotki.yandex.ru([^»]+)…..[«]/ и записываем это дело в переменную $result.
Внутри у нас ещё и регулярное выражение, сейчас я не готов подробно говорить о регулярках, скажу вкратце, что система находит строку img-fotki.yandex.ru, далее любые символы ([^»]+) за минусом пяти символов (обозначены точками). То есть /get/6836/209389666.d3/0_cc994_5e983a79_
Однако функция preg_match_all вернёт многомерный массив! массив полных вхождений шаблона и массив вхождений первой подмаски. То есть, если изменить код на:
<?php if (isset($_POST[«src»])) { $links = explode («\n»,$_POST[«src»]); echo '<textarea cols=«100» rows=«40»>'; foreach(array_keys($links) as $key) { preg_match_all('/img-fotki.yandex.ru([^»]+).....[«]/',$links[$key], $result); print_r($result); $i = 0; } echo '</textarea>'; }else{ echo ««; } ?>
<!DOCTYPE html> <html> <head> <title>Допиливание кода Яндекс.Фоток</title> </head> <body> <form action=«« method=«post»> <p> <textarea name=«src» cols=«50» rows=«20»></textarea> </p> <p><input type=«submit» name=«go» value=«Получить нормальные ссылки»> </form> </body> </html>
и ввести
<a href="http://fotki.yandex.ru/users/i-maksim39/view/838036/"><img src="http://img-fotki.yandex.ru/get/6836/209389666.d3/0_cc994_5e983a79_L.jpg" title="" alt="" border="0"/></a><br/><br/><lj-cut><cut text="ещё"><!--more--><a href="http://fotki.yandex.ru/users/i-maksim39/view/838048/"><img src="http://img-fotki.yandex.ru/get/6844/209389666.d3/0_cc9a0_df46aa6e_L.jpg" title="" alt="" border="0"/></a><br/><br/><a href="http://fotki.yandex.ru/users/i-maksim39/view/838050/"><img src="http://img-fotki.yandex.ru/get/6840/209389666.d3/0_cc9a2_e9e5851f_L.jpg" title="" alt="" border="0"/></a>
получим
Array ( [ 0] =>Array ( [0] => img-fotki.yandex.ru/get/6836/209389666.d3/0_cc994_5e983a79_L.jpg" [1] => img-fotki.yandex.ru/get/6844/209389666.d3/0_cc9a0_df46aa6e_L.jpg" [2] => img-fotki.yandex.ru/get/6840/209389666.d3/0_cc9a2_e9e5851f_L.jpg" ) [1] => Array ( [0] => /get/6836/209389666.d3/0_cc994_5e983a79_ [1] => /get/6844/209389666.d3/0_cc9a0_df46aa6e_ [2] => /get/6840/209389666.d3/0_cc9a2_e9e5851f_ ) )
Возвращаемся к основному коду. Переменной $i мы задаём значение 0. Ну а далее снова перебор значений массива в цикле foreach.
foreach(array_keys($result[0]) as $key) { $i++; echo '<a target="_blank" href="http://img-fotki.yandex.ru'.$result[1][$key].'XXXL.jpg"><img width="300" src="http://img-fotki.yandex.ru'.$result[1][$key].'M.jpg" title="" alt="" border="0"/></a>'; if ($i % 30 == 0) { echo "<!--nextpage-->"; } }
С каждой итерацией значение i увеличивается на единицу, а когда оно кратно 30 — система выведет <!—nextpage—> — специально для вордпресс тег, указывающий на завершение страницы. То есть каждые 30 фотографий у нас будет новая страничка. Сам скрипт «живёт» здесь http://maksonru.dlinkddns.com/ya/index300.php и немало облегчает мне жизнь. Понятно, код примитивный, задача стояла — задача выполнена, на большее не претендую. Ууух весьма сумбурно получилось, хотел как лучше — получилось как всегда. Ничего, доработаем. Кстати, приму заказ на php-скрипт (не под CMS’ки!) так сказать дял собственной практики. Так что пишите в комментариях.
Прошу прощение, из-за редактора поплыл весь код… Попробую другой редактор.
Касаемо авторитетного программиста — я с ним не вполне согласна. Прежде чем разбирать чей-то код, нужно иметь крепкую базу: не путать if и else недостаточно. Ещё лучше иметь крепкого наставника, но с этим сложно. А ковырять чужой код без пояснений, во-первых, не очень эффективный способ обучения, а во-вторых, научиться можно только на хороших образцах, а неопытный кодер может для разбора схватить подвернувшийся говнокод и не понять, с чем имеет дело.
Да действительно великие слова сказал авторитетный прагромист.
Для меня это дремучий лес. Так четко все расписано, что грех не выучить! Но если честно, то я просто не хочу тратить время :), которого просто нет
Расписано как раз таки очень и очень плохо… Надо доработать. вот у Игоря Борисова, что вёл курсы при МГТУ им. Бауэмана — действительно объяснено чётко.
Еще раз убедился, что для меня это очень дремучий лес, хотя хоть чуть чуть освоить коды хочется. Как то скачал самоучитель, но чтобы разобраться в нем нужно быть профессором.
Я так и не выучила HTML .. но в кодах немного помогает разбираться знание английского.. иногда поступаю подобным образом: заменяю в коде то, что можно заменить и с чем могу справиться..
Максим, а сколько Вы постигали азы html? Просто еще раз прочитав Ваши объяснения — я поняла что для меня уж вовсе все запущено. Правда, у себя в админке я кое-что делаю — и цвет меняю, и шрифт, корректирую размеры, но это все с великим методом тыка и большим риском.
Просто я плохо объяснению, а переработать текстовую часть некогда. Рекомендую ознакомиться с занятиями Игоря Борисова (центр Специалист при МГТУ им. Бауэмана) — вот там настоящие уроки.
Ох уж эти HTML коды. Я когда делал сайт, не будучи программистом намучался с ними по полной программе! Еще и шаблон WP у меня как оказалось какой-то хитрый и не стандартный. То что народ показывает в примерах (где, что, как) прописать у меня просто такого не находится. Поэтому боюсь этих кодов как огня. Если что-то можно сделать плагинами или другими какими способами (хоть плагины и подгружают сайт) без копания в кодах, делаю без них.
Максим, боюсь, что этой науки мне не одолеть)) Я понимаю, что лучше знать коды, чем не знать, но обхожусь тем, что уже знаю. В шаблонах есть много предустановленных функций, в том числе галерей, да и плагинов немало.
А Яндекс.Фотки вроде грозились закрыть?
Да, давно я таким занималась, хорошо, что сейчас уже придумали wordpress и готовые плагины, чтобы не возякаться с такими кодами, боже чтобы я делала. У меня тоже все запущено с этим))
php интересный и простой язык, очень помог мне в работе,по автоматизации рутинных задач. Сейчас вот переношу сайт пхп на линукс, ох и намучился да и намучаюсь думаю. Остановился на доменной авторизации,потом еще после настроек надо будет код подпиливать.
На самом деле если в этом во всем сесть и разобраться, то можно стать не самым усмным конечно, но плюсик к интелекту поставить можно. У меня началось все с того, что я когда то села раобраться в том, чтоб в тексте сделать ссылку активной. И когда у меня получилось — столько радости было…
Стоит ли смотреть в сторону PHP тому, кто решился только со второй попытки научиться прилично программировать?