Главная | Обратная связь | Поможем написать вашу работу!

Методические указания для лабораторных работ бакалавров направления «Прикладная информатика» профиля «Прикладная информатика в экономике»

WEB-технологии

II часть

Ростов-на-Дону

УДК 681.3.06

Web-технологии: методические указания для лабораторных работ бакалавров направления «Прикладная информатика» профиля «Прикладная информатика в экономике». – Ростов н/Д: Рост. гос. строит. ун-т, 2011. – 16 с.

Содержатся указания к выполнению лабораторных работ по дисциплине «WEB-технологии». Задания сопровождаются пояснительным текстом, при необходимости – пошаговыми инструкциями.

Направление подготовки 230700 «Прикладная информатика». Профиль подготовки «Прикладная информатика в экономике».

Электронная версия методических указаний находится в библиотеке, ауд. 224.

УДК 681.3.06

Составители:

к.ф.-м.н., доц. Ильичева О. А.

ассистент Лила В. Б.

Рецензенты:

д.т.н., проф. Белявский Г. И.

к.ф. – м.н., доц. Глушкова В. Н.

СОДЕРЖАНИЕ

ВВЕДЕНИЕ 4

1. Подготовка программного обеспечения для разработки сайта 4

2. Интеграция верстки сайта, выделение шаблона сайта и контентной

части 5

3. Создание и настройка базы данных 9

4. Использование базы данных на сайте 11

5. Работа с веб-формами 17

ЗАДАНИЯ 27

ВВЕДЕНИЕ

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

По окончанию данного курса, студенты должны научиться:

- основам программирования на PHP;

- основам создания динамических сайтов;

- выделять контентную часть и шаблон сайта;

- использовать БД для сайта;

- работать с веб-формами;

- основам безопасности при программировании веб-форм.

1. ПОДГОТОВКА ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ДЛЯ РАЗРАБОТКИ САЙТА

Используем следующие свободные веб-технологии:

1) веб-сервер Apache 2;

2) язык PHP 5;

3) СУБД MySQL 5.1.

В качестве готового решения предлагается разработка Дмитрия Котерова «Денвер» (джентельменский набор веб-программиста). Данный продукт включает все необходимые технологии, настроенные по умолчанию. После установки в системе автоматически создается виртуальный диск (по умолчанию Z:) со структурой папок, аналогичной реальному серверу с UNIX системой. Структура папок изображена на рисунке 1:

Рис. 1.1. Структура папок виртуального диска «Денвера».

Все наши сайты должны располагаться внутри раздела “home”. По умолчанию из структуры папок видно, что настроены сайты localhost и test1.ru. Чтобы добавить свой сайт, необходимо создать папку с его названием (доменное имя), например magazin.ru, и внутри создать еще одну папку www (чтобы избежать такой процедуры, можно просто скопировать папку test1.ru и переименовать ее в magazin.ru). И для проверки, правильно ли настроен новый сайт, добавим файл index.php со следующим кодом-сообщением:

<? echo "ЗАРАБОТАЛО!!!"; ?>

После этого необходимо перезагрузить «Денвер» и открыть в браузере magazin.ru. Если все настройки выполнены верно, в окне браузера появится это сообщение. Теперь можно скопировать верстку нашего сайта в папку www. Откроется статичный html-сайт, который требует дальнейшей интеграции для реализации динамики.

В качестве среды разработки для PHP рекомендуется использовать бесплатное программное обеспечение: NetBeans, Eclipse или один из простых редакторов Notepad++.

2. ИНТЕГРАЦИЯ ВЕРСТКИ САЙТА, ВЫДЕЛЕНИЕ ШАБЛОНА САЙТА И КОНТЕНТНОЙ ЧАСТИ

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

Шаблон делится на две части: header (верхняя часть) и footer (нижняя часть). Контентная часть заключена между header и footer.На рисунке 2.1 изображено типичное разбиение макета страницы на шаблон и контент.

Рис. 2.1. Пример выделения на странице шаблона и контентной части.

Создадим в папке magazin.ru/www папку template. Здесь будем хранить только те файлы, которые относятся с шаблону сайта: файлы header.php; footer.php; файл стилей style.css; и другие файлы, содержащие отдельные части шаблона. Для начала создадим файл header.php. В него поместим всю верстку по границам рисунка 2.1. В нашем случае header.php должен закончится следующим html-кодом:

…   <div id="main_content"> ?>

Теперь создадим файл footer.php, начинающийся со следующего html:

<div class="h_divider"> </div> </div>  <div class="clearthis"> </div> …

Следующий этап: перенесем файл style.css в папку template. При таком переносе нарушаются пути к картинкам внутри файла style.css и нарушается путь к файлу стилей в файле header.php. Чтобы это исправить, откроем содержимое style.css и поправим все адреса к картинкам путем добавлением знака - слеша («/») в начало пути. По примеру:

До правки: #page_header { width: 780px; height: 113px; color: #fff; background: url('images/header_background.gif') repeat-x 0px 0px; overflow: hidden; } После: #page_header { width: 780px; height: 113px; color: #fff; background: url('/images/header_background.gif') repeat-x 0px 0px; overflow: hidden; }

Слеш в начале строки нужен для того, чтобы браузер искал картинки не в www/template/images, а в www/images/.

Теперь в header.php изменим путь к style.css по примеру:

До правки: <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> После: <link rel="stylesheet" href="/template/style.css" type="text/css" media="screen" />

Осталось настроить единственный пока файл с контентной частью – index.php. В нем после отделения header и footer должен остаться html, который содержит только обрывок верстки, а именно контентную часть без шаблона. Чтобы подключить шаблон, напишем в начале файла подключение header.php, а в конце файла - footer.php:

<? require($_SERVER['DOCUMENT_ROOT'].'/template/header.php'); ?> … html-код … <? require($_SERVER['DOCUMENT_ROOT'].'/template/footer.php'); ?>

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

В итоге должна получиться следующая структура файлов и папок:

Рис. 2.2. Структура файлов и папок после интеграции верстки.

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

3. СОЗДАНИЕ И НАСТРОЙКА БАЗЫ ДАННЫХ

Для управления СУБД в состав «Денвера» входит веб-клиент для Mysql «PHPMyAdmin». Находится он по адресу: http://localhost/Tools/phpMyAdmin/

Для нашего сайта понадобится своя база данных (БД). На рисунке 3.1 представлен интерфейс работы с PHPMyAdmin.

Рис. 3.1. Интерфейс PHPMyAdmin.

Для создания БД на главной странице необходимо ввести название будущей БД и указать кодировку таблиц и кодировку соединения. Введем название “dbmagazin”, а обе кодировки выберем как cp1251_general_ci. Теперь можем создавать свои таблицы.

Необходимо категории товаров, расположенные в левой колонке шаблона, перенести в БД. Для этого создадим таблицу categories c двумя столбцами: integer “id”, varchar(80) “name”. Выберем слева нашу БД dbmazagin. Откроется список таблиц, а ниже - форма для создания новой таблицы. На рисунке 3.2. приведен пример интерфейса.

Рис. 3.2. Перечень таблиц БД в PHPMyAdmin.

На форме с заголовком «Create new table on database» напишем categories, укажем количество столбцов 2. Откроется форма редактирования столбцов. Необходимо заполнить поля формы, как показано на рисунке 3.3. В нашем случае поле id является первичным ключом, автоинкрементным.

Рис. 3.3. Редактирование полей таблицы categories.

После создания полей, начнем ввод данных в таблицу. Выберем слева таблицу categories, во вкладках выберем Insert, после чего откроется форма с добавлением новых строк. Заполним следующие категории:

- Кабели;

- Камеры;

- Флешки;

- Память;

- Принтеры;

- Сканеры;

- Серверное;

- Аудио;

- Беспроводные.

4. ИСПОЛЬЗОВАНИЕ БАЗЫ ДАННЫХ НА САЙТЕ

После успешного заполнения перейдем к сайту. Необходимо в header найти область, где выводятся категории товаров левой колонки, и перенести html-код в отдельный файл categories.php. Сам файл сохраним в папке www/template/include. Содержание categories.php должно быть таким:

<div id="categories"> <div id="categories_header"> <h2>Categories</h2> </div> <ul> <li><a href="http://www.freewebsitetemplates.com/">Cables</a></li> <li><a href="http://www.freewebsitetemplates.com/">Cameras</a></li> <li><a href="http://www.freewebsitetemplates.com/">Input Devices</a></li> <li><a href="http://www.freewebsitetemplates.com/">Memory</a></li> <li><a href="http://www.freewebsitetemplates.com/">Printers</a></li> <li><a href="http://www.freewebsitetemplates.com/">Scanners</a></li> <li><a href="http://www.freewebsitetemplates.com/">Server Accessories</a></li> <li><a href="http://www.freewebsitetemplates.com/">Speakers & Audio</a></li> <li class="last"><a href="http://www.freewebsitetemplates.com/">Wireless</a></li> </ul> <div class="clearthis"> </div> </div>

Не забудем в header.php на месте перенесенного html-кода категорий напишем подключение файла categories.php:

<? require ('include/categories.php'); ?>   …

Теперь настроим наше соединение с базой данных. Создадим конфигурационный файл db.php в папке www/application. Для соединения воспользуемся php функцией mysql_connect(). Код файла db.php представлен в следующем примере:

<? $DBLink = mysql_connect("localhost", "root", "") or die("Could not connect: ". mysql_error()); $dbConnect = mysql_select_db('dbmagazin', $DBLink);

У функции mysql_connect() на входе 3 агрумента: имя сервера (у нас localhost, так как база данных хранится на одном сервере с сайтом), пользователь root, пароль – пустая строка. Настройки администратора БД были заданы по умолчанию при установке «Денвера».

Следующей функцией mysql_select_db() выберем нашу БД и сохраним файл. Данный код будет выполнять авторизованное соединение с сервером СУБД MySQL и нашей БД dbmagazin.

Теперь необходимо подключать такой файл на каждой странице нашего сайта. Для этого напишем строку подключения в самом начале header.php:

<? // настройка и поключение БД require($_SERVER['DOCUMENT_ROOT'].'/application/db.php'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> …

После подключения файла db.php, исправим статичный вывод категорий, состоящий из html-кода в файле categories.php, на динамичный, где данные будут выбираться из таблицы categories. Перепишем код в соответствии с примером:

<? // выбираем все категории товаров $result = mysql_query ("select * from categories order by name asc"); ?> <div id="categories"> <div id="categories_header"> <h2>Категории товаров</h2> </div> <ul> <? while ($row = mysql_fetch_array($result)) { ?> <li><a href="#"><?=$row['name']?></a></li> <? } ?> </ul> <div class="clearthis"> </div> </div>

Здесь мы делаем запрос к БД методом mysql_query(). Полученную выборку храним в переменной $result. Затем в цикле while проходим по всем выбранным строкам таблицы, формируя html-код cо ссылками на категории товаров. Пока в атрибутах href оставим «#». К формированию ссылки для перехода к товарам перейдем позже.

Более подробно о методах работы с БД: mysql_connect, mysql_select_db, mysql_query, mysql_fetch_array, - читать в официальной документации по PHP!

Теперь нам необходимо создать таблицу products, содержащую информацию о товарах. По аналогии с редактированием таблицы categories, добавим в таблицу products следующие столбцы:

- id – INT, первичный ключ, автоинкремент;

- name – VARCHAR(80), наименование товара;

- description – TEXT, описание товара;

- price – INT, цена товара;

- category_id – INT, внешний ключ категории товаров.

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

После заполнения таблицы создадим файл products.php в папке www, в котором будем формировать запрос БД и html-код с выборкой товаров.

<? require ($_SERVER['DOCUMENT_ROOT'].'/template/header.php'); ?> <? $sql = "select categories.name as category_name, products.name as product_name, products.description as description, products.price as price from products inner join categories on products.category_id = categories.id"; $result = mysql_query($sql); ?> <table cellpadding="10" cellspacing="10" style="border:1px solid #cacaca; font-size:16px"> <tr> <td>Категория</td> <td>Наименование товара</td> <td>Описание товара</td> <td>Цена (в руб.)</td> </tr> <? while ($row = mysql_fetch_array($result)) { ?> <tr> <td><?=$row['category_name']?></td> <td><?=$row['product_name']?></td> <td><?=$row['description']?></td> <td><?=$row['price']?></td> </tr> <? } ?> </table> <? require ($_SERVER['DOCUMENT_ROOT'].'/template/footer.php'); ?>

Сохраним файл, и в верхнем меню напишем для него ссылку:

<div id="page_menu"> <ul> <li><a href="#">Company</a></li> <li><a href="#">OurStore</a></li> <li><a href="/products.php">Товары</a></li> <li><a href="#">Services</a></li> <li><a href="#">Promotion</a></li> <li class="last"><a href="#">Contact</a></li> </ul> </div>

После перехода по ссылке «Товары» в браузере будет выводиться таблица с перечнем всех товаров всех категорий. Теперь добавим фильтр по категориям, чтобы, при переходе по ссылке конкретной категории из левой колонки, открывались только ее товары. Вернемся к формированию ссылки категорий товаров в файле categories.php, и напишем следующий адрес href:

… ?> <li><a href="/products.php?category=<?=$row['id']?>"><?=$row['name']?></a></li> <?

При переходе по такой ссылке в скрипт products.php в GET-запросе передается id категории товара в переменной “category”. Подробнее о GET запросах читать в спецификации HTTP!

Все переменные переданные в GET запросе доступны в глобальном ассоциативном массиве $_REQUEST. Теперь можем использовать эту переменную для фильтрации товаров по каждой категории. Исправим код products.php по примеру:

$sql = "select categories.name as category_name, products.name as product_name, products.description as description, products.price as price from products inner join categories on products.category_id = categories.id"; if ($_REQUEST['category']) { $sql.= " where categories.id = ".(int)$_REQUEST['category']; } $result = mysql_query($sql); ?> <table cellpadding="10" cellspacing="10" style="border:1px solid #cacaca; font-size:16px"> …

В итоге реализована небольшая основная динамика на сайте по товарам и категориям товаров.

По аналогии со страницами products.php и index.php необходимо самостоятельно создать страницы для всех пунктов верхнего меню и наполнить содержимое страниц статичным html-кодом с информацией для каждого раздела.

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

5. РАБОТА С ВЕБ-ФОРМАМИ

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

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

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

Создадим в папке www категорию admin. Внутри нее разместим файл index.php со следующим содержимым:

<? require ($_SERVER['DOCUMENT_ROOT'].'/template/header.php'); ?> <h1>Административная часть</h1> <h2>Добавление товара</h2> <? require ($_SERVER['DOCUMENT_ROOT'].'/template/footer.php'); ?>

Теперь при переходе по адресу http://magazin.ru/admin/ должна открыться страница с шаблоном и двумя заголовками: Административная часть, Добавление товара.

Веб-форма определяется в html тэгом <form>. Все поля формы, кнопки, ее html должен быть заключен внутри тэга:

<form> // html код формы, ее поля, кнопки </form>

У тэга <form> есть два основных атрибута:

action – путь (страница), на которую будут переданы значения формы по нажатию кнопки submit;

method – метод передачи данных, POST или GET.

Далее рассмотрим основные элементы формы.

Поле однострочного ввода текста (рис 5.1.1):

Рис. 5.1.1. Поле однострочного ввода текста.

Поле многострочного ввода текста (рис 5.1.2):

Рис. 5.1.2. Поле многострочного ввода текста.

Поле выпадающего меню (рис 5.1.3):

Как звали отца Пушкина?: <select name="father_pushkin"> <option value="1">Петя</option> <option value="2">Вася</option> <option value="3">Сергей</option> </select>

Рис. 5.1.3. Поле выпадающего меню.

Поле меню множественного выбора (рис 5.1.4):

Выберите числа больше 4?: <select name="numbers[]" multiple="multiple"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> </select>

Рис. 5.1.4. Поле меню множественного выбора.

Поле «радиоточка» или radio button (рис 5.1.5) является альтернативой падающему меню:

Кто является основателем языка PHP: <br /> <input type="radio" value="1" name="creator" id="r_1" /> <label for="r_1">Питер Гриффин</label> <br /> <input type="radio" value="2" name="creator" id="r_1" /> <label for="r_2">Расмус Лердорф</label> <br /> <input type="radio" value="3" name="creator" id="r_1" /> <label for="r_3">Иннокентий Смоктуновский</label> <br />

Рис. 5.1.5. Поле радиоточки.

Поле checkbox (рис 5.1.6) является альтернативой меню множественного выбора:

Назовите основные продукты, используемые при разработке данного сайта:<br /> <input type="checkbox" value="1" name="creator" id="t1" /> <label for="t1">IIS сервер</label> <br /> <input type="checkbox" value="2" name="creator" id="t2" /> <label for="t2">Apache</label> <br /> <input type="checkbox" value="3" name="creator" id="t3" /> <label for="t3">PHP</label> <br /> <input type="checkbox" value="4" name="creator" id="t4" /> <label for="t4">MS SilverLight</label> <br /> <input type="checkbox" value="5" name="creator" id="t5" /> <label for="t5">Oracle (Sun) MySQL</label> <br />

Рис. 5.1.6. Поле checkbox.

Кроме элементов ввода информации форма имеет функциональные элементы:

Кнопка Submit, по нажатию на которую отравляются данные на сервер:

Кнопка Reset, по нажатию на которую очищаются (либо принимаются значения по умолчанию) данные формы:

Простая кнопка, по умолчанию без функционального значения:

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

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

- поля однострочного ввода для ввода Наименования и Цены товара;

- поле многострочного ввода для ввода Описания товара;

- поле выпадающего меню для выбора Категории товара;

- кнопка Submit;

- кнопка Reset.

Добавим в файл www/admin/index.php следующий код, описывающий пустую форму:

<? require ($_SERVER['DOCUMENT_ROOT'].'/template/header.php'); ?> <h1>Административная часть</h1> <h2>Добавление товара</h2> <form action="/admin/index.php" method="post"> <table> <tr> <td>Наименование товара *:</td> <td> <input type="text" value="" name="name" /> </td> </tr> <tr> <td>Описание товара:</td> <td> <textarea name="description"></textarea> </td> </tr> <tr> <td>Цена *:</td> <td> <input type="text" value="name="price" /> </td> </tr> <tr> <td>Категория товара *:</td> <td> <select name="category"> <? $result = mysql_query("SELECT id, name FROM categories ORDER BY name asc"); while ($row = mysql_fetch_array($result)) { ?> <option value="<?=$row['id'>”><?=$row['name']?></option> <? } ?> </select> </td> </tr> </table> <input type="submit" value="Добавить" name="my_form" /> <input type="reset" value="Очистить форму" /> </form> <? require ($_SERVER['DOCUMENT_ROOT'].'/template/footer.php'); ?>

Теперь у нас готова форма для ввода данных и отправки данных на сервер в самом простом виде. Но этого недостаточно. Поля любой веб-формы должны проходить валидацию.

Валидация веб-формы – проверка ее полей на правильность заполнения.

В нашем случае при описании тега <form> в атрибуте action был указан путь к этой же странице, значит, код валидации будем писать здесь.

Для этого сценарий нашей страницы складываем из двух веток:

- Если прошел submit формы, то проверяем поля на правильность заполнения и сохраняем товар в каталог;

- Если submit формы не прошел, то выводим на экран пустую форму.

Не забываем, что все поля, переданные из формы на сервер любым методом (POST или GET), доступны в глобальном массиве $_REQUEST.

Для идентификации, прошел ли submit, кнопке «Добавить» припишем имя my_form. Теперь по наличию этой переменной в массиве $_REQUEST можно определить событие submit.

Добавим перед тэгом следующий php-код:

<? // здесь будем хранить все ошибки валидации $error = array(); // Прошел ли Submit if ($_REQUEST['my_form']) { $name = trim($_REQUEST['name']); $description = trim($_REQUEST['description']); $price = trim($_REQUEST['price']); $category = (int)trim($_REQUEST['category']); // проверим поле Наименование товара if ($name == "") { $error['name'] = "Поле Наименование товара не должно быть пустым!"; } // проверим поле Цена товара if ($price == "") { $error['price'] = "Поле Цена товара не должно быть пустым!"; } // проверим поле Категория товара if ($category == "") { $error['category'] = "Поле Категория товара не должно быть пустым!"; } if (!count($error)) { $result = mysql_query(" INSERT INTO products (name, description, price, category_id) VALUES ('". mysql_real_escape_string($name)."', '". mysql_real_escape_string($description)."', '". mysql_real_escape_string ($price)."', '". mysql_real_escape_string($category)."') "); if ($result) { echo "Данные были успешно сохранены!"; } else { echo "Произошла ошибка!"; } } } ?> <div class="error_area"> <? foreach ($error as $name=>$message) { ?> <font style="color:red; font-size:16px"><?=$message?></font><br /> <? } ?> </div> <form action="/admin/index.php" method="post"> …

Рассмотрим подробно этот код. Здесь проводится основная проверка полей на правильность заполнения. В самом начале определен массив $error, где мы будем накапливать ошибочные поля. Структура массива следующая:

Array( "имя поля" => "сообщение неправильной валидации" )

В случае, если массив пуст, считаем валидацию успешной и сохраняем данные на сервере.

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

Обратите внимание, что в конце проверок, перед html-кодом формы, была добавлена область <div class="error_area">… </div>. В ней и будут выводиться все ошибки валидации.

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

<input type="text" value="<?=htmlspecialchars($_REQUEST['price'])?>" name="price" />

?> <option value="<?=$row['id']?>" <?if ($_REQUEST['category'] == $row['id']) echo ' selected'?>><?=$row['name']?></option> <?

Сейчас веб-форма готова. Можно попробовать добавить товар из административного раздела и проверить его в каталоге.

Обратите особое внимание на методы htmlspecialchars и mysql_real_escape_string, используемые в запросе!!!

Эти методы необходимы для избежания PHP и MySQL-инъекций.

PHP-инъекция (англ. PHP injection) — один из способов взлома веб-сайтов, работающих на PHP, заключающийся в выполнении постороннего кода на серверной стороне.

SQL инъекция – техника внедрения вредоносных данных в SQL утверждение, которые затем делают уязвимой и доступной информацию, содержащуюся в базах данных сайта.

Попробуем убрать у поля Наименование товара htmlspecialchars и оставим определение поля следующим:

Откроем форму для добавления товара в каталог. В поле Наименование введем следующее значение:

" /><script>alert('Взломали!!')</script>

Нажмем submit.

На экране после перезагрузки формы увидим выполнение пока что безобидного Javascript-кода. Рассмотрим подробнее, что же произошло. PHP-код на сервере генерирует HTML-код. В описании поля input содержится вставка PHP-кода с выводом значения переменной name из $_REQUEST, т.е. в нашем случае из формы. Так как namе содержит в начале «" />», то такой html-код закроет тэг input и выведет описание Javascript кода:

<input type="text" value="" /><script>alert('Взломали!!')</script> name="name" />

Если такими манипуляциями попробовать все-таки сохранить на сервере такой javascript-код, как наименование товара, то везде, где будет выводиться небезопасный html-код (в каталоге, на форме, в результатах поиска и т.д.) будет выводиться сообщение «Взломали».

Именно поэтому всегда необходимо следить за html-, php- и mysql-кодом, делая его безопасным!

ЗАДАНИЯ

1. Получить верстку по своему варианту и выделить шаблон сайта (создать файлы header.php и footer.php)

2. Создать собственную БД и необходимые таблицы. Написать строку соединения с БД в конфигурационном файле сайта.

3. Все меню, которое есть в шаблоне, сохранить в БД и выводить его скриптами PHP.

4. В рамках шаблона сайта для всех пунктов меню создать соответствующие страницы (со статичной информацией или полученной из БД).

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

Примечание.

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

Воспользуйтесь поиском по сайту: