проверил

СОЗДАТЬ САЙТ С НУЛЯ

Полезные сервисы


Выбор цвета Выбор градиента Генератор шаблона Подборка скриптов Вид сайта Справочник CSS-HTML Валидатор
Cервис для выбора цвета и получения его 16-ричного значения в виде #D3AF67
Сервис для выбора градиентной заливки и выдача кода, для его внесения в файл стилей с учетом кроссбраузерности (для всех браузеров)
Онлайн сервис для верстки шаблона сайта с раскройкой на зоны и выдачей готового кода
Подборка полезных скриптов на Javascript и PHP
Сервис для проверки внешнего вида сайта в различных браузерах
Полезный сайт-справочник по всем CSS стилям и HTML тегам
Онлайн сервис для проверки сайта на правильность кода (валидность)
Отображается номер строки с ошибкой и объяснением


Поделись с друзьями


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

PHP


Этот язык программирования специально разработан для написания web-приложений (сценариев), исполняющихся на Web-сервере.
Аббревиатура PHP означает "Hypertext Preprocessor (Препроцессор Гипертекста)".
Синтаксис языка берет начало из C, Java и Perl.

Преимуществом PHP является предоставление web-разработчикам возможности быстрого создания динамически генерируемых web-страниц.

В отличие от javascript, код которого выполняется на Вашем компьютере, PHP-код выполняется на сервере.

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

Так, я установил NuSphere PhpED.


Большинство сайтов запускаются начальным файлом не index.htm а index.php.
В чем их разница? Практически никакой.
Вы свой файл тоже можете также переименовать и при размещении его на внешний сервер он также будет работать.
А основная разница в том, что файл с таким расширением будет обрабатываться PHP-сервером, который будет искать в нем вставки программного кода на PHP.

Такая вставка делается прямо в html-страничке, например, так:
<?php ...содержимое...?>
Это содержимое будет обработано PHP-процессором.

Давайте рассмотрим несколько небольших, но нужных реализаций на PHP.

Динамическая страница


Посмотрите на страничку, которую Вы сейчас читаете. Здесь центральная часть текста, включая читаемый в данный момент, не лежит в теле основной html-страницы.
Этот текст находится в отдельном файле php.txt, а первый урок в файле nach.txt и т.д.

Другими словами я генерирую web-страницу по ходу.
Для этого, в теле основной html-страницы, есть вставка на PHP, которая подгружает текст из внешних файлов.

Итак, если Вы установили у себя виртуальный PHP-процессор (например, NuSphere PhpED), то переименовываем нашу заготовку в index.php. Далее, для редактирования файла будем пользоваться самим PhpED.
Запускаем программу и открываем наш файл index.php. В правом нижнем углу появится иконка phped. Кроме того, в этом редакторе, для подсветки функций, ремарок, переменных - используется разный цвет, что очень удобно.

По окончании слова "Вторая строка" вставляем фрагмент такого кода:

тут еще html код
Вторая строка <br>


<?php
/* ---это код на PHP--- */
$tema=$_GET['t'];

/* проверка переменной */
if ($tema=="") { $tema="nach"; }

echo "<div style='color: #000000; background: #ffffff;'>";
include("$tema".".txt");
echo "</div>";
?>

тут окончание html кода
</body>
</html>



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

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

Если все правильно сделали, то после слов "Вторая строка " появится текст из файла nach.txt.

Рассмотрим подробнее нашу вставку на PHP

Итак, первая строка $tema=$_GET['t']; означает: переменной $tema присвоить значение, принятое из url-строки (конкретно переменной t).
В PHP перед каждой переменной стоит символ доллара

Вам кажется, что совсем запутались, не волнуйтесь - все просто.
Отвлекитесь и посмотрите на мой сайт.
Вверху этого сайта есть меню, по которому Вы переходите от одного урока к другому. Наведите (не нажимая) мышку на пункт меню урока "Начало".

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

Посмотрите на концовку этой отсылки ...?t=nach.
Именно так, через знак вопроса передаются параметры в страницу. В данном случае, при нажатии мышкой на этот пункт меню, запустится основная страница, в которую передастся параметр t=nach.

Можно передать и несколько параметров. Тогда их перечисляют через знак &. Например так, используя тег <a>
<a href="test.php?x=1&y=2&str=hello">Отсылка </a>

Возвращаемся к нашей первой строке PHP-кода: $tema=$_GET['t']; и уже понимаем, откуда берется значение t.
Итак, $tema уже будет=nach.

Изучаем следующую строку if ($tema=="") - это задано условие "Если переменная tema равна пустому".
Задать такое условие можно и так:
if (!$tema) - здесь восклицательный знак подразумевает отсутствие значения в $tema.

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

У нас в фигурных скобках $tema="nach"; т.е. присвоить переменной $tema значение nach.
Конечно, можно было сразу присвоить то имя, которое у файла - nach.txt (но я специально усложнил задачу, чтобы показать далее как формировать строки в PHP).

Итак, в этой строке происходит следующее. Если входной параметр t был задан, то $tema - будет ему равна, т.е. не равна пустому - то ничего выполняться не будет и $tema останется равной значению t.
А если параметр не задан, то сработает условие и $tema станет равна "nach".

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

Далее интересная строка:
echo "<div style='color: #000000; background: #ffffff;'>";

Ключевое слово echo "... содержимое..."; - выводит содержимое на экран. Т.е. все то, что находится между кавычками.
Поскольку там не просто текст, а тег div, то это и обрабатывается соответственно. Т.е. открывается блок со стилем: белый фон и черные буквы.
Обратите внимание, что в содержимом слова echo есть описание стиля блока (style=). Стиль же также описывается в кавычках. Но поскольку мы уже открыли одни двойные кавычки в начале слова echo, то в стиле использовать такие (двойные) кавычки нельзя.
Поэтому внутри echo указываем одиночные кавычки.

Эта ошибка встречается довольно часто, будьте внимательны


Следующая строка:
include("$tema".".txt");
Ключевое слово include (вставка) - вставляет (в фактически открытый ранее блок div) содержимое файла.
Если это первичная загрузка страницы, то имя файла будет nach.txt. Если выбран пункт меню урока, который сейчас читаете, то - java.txt.
Обратите внимание на строку include("$tema".".txt");
Здесь в скобках через точку к значению переменной tema еще добавлено ".txt" (чтобы получить реальное имя файла nach.txt, java.txt...), а в url строке у нас t=nach (без txt).

В отличие от javascript, где символьные строки сливаются через плюс, в PHP это делается через точку.
Например:
echo "Привет-"."сайт"; - выведет: Привет-сайт.
$aaa=123;
echo "Привет-".$aaa; - выведет: Привет-123.


Далее через echo "</div>"; - блок закрывается и продолжается отображение html-страницы.

Ясно, что при выборе другого пункта меню в полупустую заготовку подгрузится содержимое другого файла. Именно это и означает динамическое изменение страницы.

Счетчик посещений


Существует множество способов как создать счетчик, который бы считал количество посещений нашей странички.
Я покажу простенький с графическим отображением (см. на правой панели).
При отладке скрипта, показанного ниже Ваш NuSphere PhpED может выдавать ошибку, что не знает графическую функцию. Для работы с графическими функциями, в файле php.ini нужно разремить строку extension=php_gd2.dll (убрать перед ней точку с запятой)

1. Создаем изображение counter.png, на которое будет писаться число посещений и сохраняем в формате png (я создал картинку размером 80х30).
2. Создаем пустой файл counter.dat (в нем будут фиксироваться показания посещений).
3. Вставляем следующий код
<?php
// Открываем файл счетчика и считываем значение в переменную $count
$f=fopen("counter.dat","r");
$count=fgets($f,20);
fclose($f);

$count=ereg_replace(" ","",$count); // Удаляем символ конца строки
$count++; // Увеличиваем счетчик и обновляем файл
$f=fopen("counter.dat","w");
fputs($f,"$count ");
fclose($f);

// Создаем новое изображение из файла
$im = imagecreatefrompng("counter.png");
// Назначаем цвет
$color = ImagecolorAllocate($im,170,0,0);
// Выводим счет на изображение
Imagestring($im,2,5,14,$count,$color);
//Сохраняем в файл
ImagePng($im,"schet.png");
imagedestroy($im);
?>


Далее, в удобном для вас месте, вставляем полученное изображение (картинка schet.png) в виде <img src="schet.png">

В данном скрипте используются функции работы с файлом: открытие, чтение, запись и закрытие файла, а также работа с изображениями.
Я не буду разъяснять строки скрипта, т.к. в его тексте достаточно комментариев.

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

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

Например, на моем сайте Это интересно для подгрузки текстов я использовал базу данных MySql.

Итак, если хотите использовать базу данных MySql, то читаем дальше.

PHP и MySql


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

Для работы с базой данных обычно используют phpMyAdmin на специальном сайте (адрес дадут, у каждого хостинга свой). Например, на hut.ru он такой:
http://register.hut2.ru/phpadm/index.php

При входе на такой сайт затребуют имя и пароль, введя которые откроется конструктор-редактор для администрирования вашей базы (см. фото)
phpadm
Здесь база данных называется nana8 и в ней пять таблиц.

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

В нижней части есть окно для ввода новой таблицы.


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

Например, мы из конструктора создали таблицу под именем anekdot и в ней задали два поля sn и text.
Полю sn даем тип int (числовое значение) - тут могут быть только числа
Полю text - тип mediumtext - длинный текст

Кстати, сделать саму подборку анекдотов можно и в редакторе Блокнот, а потом используя режим "Импорт" подгрузить данные в таблицу.

Пусть в поле sn будет порядковый номер, а в поле text - сам текст анекдота.

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

<?php

$my_server = 'xxxbase';
$my_baza = 'nana8';
$my_user = 'sdaaff';
$my_pwd = 'UhUKSda';
$my_table = 'anekdot';

$n=rand (1, 15);
$link = mysql_connect($my_server, $my_user, $my_pwd);
mysql_select_db( $my_baza,$link);
$n=rand (1, 15);
$result=mysql_query("select text from $my_table where sn=".$n." ");

echo "Новый анекдот <br>".$result[0];
?>


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

В строке $n=rand (1, 15); - переменной $n присваивается значение случайного числа в интервале от 1 до 15
Обратите внимание насколько это легче сделать на PHP чем мы это делали на javascript: var n=Math.floor(Math.random()*15 + 1);

В строке $link = mysql_connect... - осуществляется подключение к серверу MySql, где в скобках подставятся значения указанных переменных.

В следующей строке mysql_select_db(... - подключаемся к нашей базе

Далее $result=mysql_query(... - переменная $result получает значение из базы.

Условие поиска задано далее
("select text from $my_table where sn=".$n." ");

Слово select означает найти и далее, какие поля таблицы вывести.
Тут - значение поля text. Но можно было задать для вывода и порядковый номер анекдота (поле sn). Тогда его просто нужно добавить через запятую сразу за словом text (text,sn).

Далее указывается, в какой таблице все это искать (подставится значение переменной $my_table) и при этом, должно соблюдаться условие (where), где sn=... Тут подставится значение переменной $n.
Пусть $n=8.
Если в базе данных, в этой таблице есть запись, где в поле sn находится 8, то в $result[0] мы получим результат.

Если бы выводимых полей было больше, например, (text,sn) - два поля, то значение поля sn было бы в $result[1].


Следующая строка
echo "Новый анекдот <br>".$result[0];
выведет на экран слова "Новый анекдот" и с новой строки (т.к. есть вставка <br>) - содержание анекдота.

Вот и все, и как видите - не так страшен черт как его малюют.

Вам может показаться странным, как же так, прямо на странице указаны все пароли? Так любой скопирует страницу и узнает пароли. Нет не узнает, т.к. в этом и кроется вся прелесть PHP, что сервер код обработает, и выведет на экран, только то, что вы планировали вывести через echo. Всего остального никто не увидит даже при копировании файла из браузера (что легко проходит с javascript).

Однако, не все так однозначно
Например, если вы не учтете всех нюансов при приеме и обработке параметров, то нехороший человек сможет так сформировать url строку, что потом выудит все содержимое базы данных и даже сможет ее менять (фактически осуществив взлом сайта).
В таком случае говорят, что он использовал PHP-инъекцию.


Как это ни странно, но я нашел применение PHP там, где совсем не ожидал

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

Конечно, это можно сделать в Фотошопе, играясь с каждой картинкой, потратив на это недели, но я сделал по-другому

Я написал скрипт на PHP, который брал из папки с фотографиями поочередно файлы изображений, вычислял их размеры, создавал маленькое пропорциональное изображение (с шириной в 200 пикселей) и поверх него вставлял логотип. За несколько минут скрипт обработал тысячи файлов!!!
Вот вам и PHP.

Пример этого скрипта:

<?php
// Этот скрипт создает уменьшенные картинки всех фото в папке d://111/
// добавив к имени m_
// и накладывает в центре логотип (файл f://logo.png')

$katalog="d://111/"; //здесь исходные фотографии

$handle = opendir ($katalog);
while($file = readdir($handle))
{ if ($file != '.' && $file != '..')
    {
    $func[$i] = $file;
    $i++;
    }
}

sort ($func);
//получили список файлов
for ($q = 0; $q<sizeof($func); $q++)
{ echo "<br>".$func[$q];

$f=$katalog.$func[$q];
$params = getimagesize($f); // считываем параметры (высота/ширина)
//получаем расширение файла
$ttt=substr(strrchr($func[$q], '.'), 1);
if($ttt=='gif' || $ttt=='GIF') $src_img = imagecreatefromgif($f);
if($ttt=='jpg' || $ttt=='JPG') $src_img = imagecreatefromjpeg($f);
if($ttt=='png' || $ttt=='PNG') $src_img = imagecreatefrompng($f);
//изменяем размер
$w=200; //ширина новой картинки
if ( $params[0]>$w) // вычисляем коэффициент
{
$k= floor($params[0] / $w); //делим ширину на нужный размер и получаем коеффициет
$h = floor($params[1] / $k); //делим высоту на коеффициет и получаем новую высоту

$resource = imagecreatetruecolor($w,$h); // создание подкладки
// уменьшаем картинку
imagecopyresampled($resource, $src_img, 0, 0, 0, 0, $w, $h, $params[0], $params[1]);
}
else $resource = $src_img; // если изменять размер не надо

$logo=imagecreatefrompng('f://logo.png'); // водяной знак
$X_logo=imagesx($logo);
$Y_logo=imagesy($logo);

$image=imagecreatefrompng($img);

//вычисляем середину для логотипа
$cx=($w-$X_logo)/2;
$cy=($h-$Y_logo)/2;

//или правый верхний угол
//$cx=($w-$X_logo);
//$cy=0;

//накладываем логотип
imagecopyresampled ($resource, $logo, $cx, $cy, 0, 0,$X_logo,$Y_logo,$X_logo,$Y_logo);

$file_name=$katalog.'m_'.$func[$q]; // добавляем m_ к имени уменьшенной картинки
imagejpeg($resource,$file_name); //выводим в файл
imagedestroy($resource);
}

?>

minifoto Вот результат уменьшения картинки размером 3680 х 2456 на новый - 200 х 136 (см. выше $w=200;)

При желании можно задать другую ширину
В данном случае я разместил логотип в правом верхнем углу



Подведем итоги


Итак, мы уже имеем понятие, что такое PHP и где его можно применить.

Мы немного напуганы, что наш сайт могут взломать, используя PHP-инъекцию, если мы где-то напортачим.

Но волков бояться - в лес не ходить.


Этот урок закончен, можете переходить на закладку Итоги, где я научу Вас как разместить наш сайт в Интернете.



Мысли вслух

  • Программист - это не тот, кто пишет программы, а тот, чьи программы работают
  • Для программиста монитор - это реальный рабочий стол, системный блок - журнальный, а клавиатура - обеденный
  • Конфеты программиста: 'Мишка на сервере'
  • А знаете ли Вы, что в 1 килобайте не 1000 байт, а 1024 (2 в степени 10)



Мои сайты:

● Онлайн Тату-пирсинг редактор
● Таємниця Шекспіра, мої переклади
logotip
Студия вебдизайна MZNN
(mznn-2010@meta.ua)