Создание таблицы и формы отправки данных
Можно сказать, что половину задачи по созданию раздела Заказать мы выполнили.Осталось сформировать таблицу с остатками товаров и форму для отправки данных (см. рис. 11.16).
Рис. 11.16
Таблица состоит из двух колонок. Самая верхняя строка –это заголовок таблицы. Ниже идет список товаров с текущими остатками на складе. Три нижние строки –это форма отправки данных. Под списком товаров расположена строка, разделяющая остатки от формы отправки данных.
Строки таблицы с наименованием товаров и их количеством на складе мы будем получать из базы данных.Только там есть информация о текущих остатках.
Мы будем создавать таблицу в три этапа:
Создание тегов для верхней части таблицы с заголовком.
Создание функции формирования десяти строк таблицы с остатками.
Создание нижнего блока таблицы–формы отправки данных.
В заключение внешний вид подкорректируем при помощи css.
Задача:создать таблицу без строк с остатками товаров
(см. рис. 17).Проверить отправку данных и работу функции testPost().
Для формирования заголовка необходимо использовать специальный тег th,этот тег работает аналогично тегу td. Отличие лишь в том,что он используется для заголовка таблицы.
Рис. 11.17
Перейдем в файл index.php и начнем формировать теги под PHP-вставкой для центральной части страницы (см. рис. 11.18).
Рис. 11.18
Добавим тег divс идентификаторомzakaz, все остальное будет вложено в этот тег:
<div id="zakaz">
</div>
Через идентификатор тега divбудут подключаться CSS-свойства. Это основное предназначение тега div!
В блоке этого тега будут располагаться данные для отправки через форму. Следовательно, внутри тега divнам нужно добавитьform:
<div id="zakaz">
<form action="index.php?id=2" target="_self" method="post">
</form>
</div>
Атрибуты тега нам уже знакомы. Обратите внимание, что адрес в атрибуте action –это адрес раздела Заказать: index.php?id=2. Иначе, после отправки данных будет открываться другой раздел сайта!
Внутрь тега form вставляем теги таблицы:
<div id="zakaz">
<form action="index.php?id=2" target="_self" method="post">
<table border="1" cellpadding="0" cellspacing="0" width="520">
</table>
</form>
</div>
Ширина таблицы будет520 пикселей,чтобы таблица поместилась в центральную белую часть по ширине. Рамка таблицы останется видимой. В этом случае таблица используется по своему прямому назначению– как средство размещения информации в ее ячейках.
Теперь добавим строку заголовка с двумя ячейками th:
<div id="zakaz">
<form action="index.php?id=2" target="_self" method="post">
<table border="1" cellpadding="0" cellspacing="0" width="520">
<tr>
<th>Товар</th><th>Остаток,кг</th>
</tr>
</table>
</form>
</div>
Десять строчек с остатками мы пока пропускаем –они будут формироваться из PHP! Далее вставляем разделительную строку и три строки для отправки данных:
<div id="zakaz">
<form action="index.php?id=2" target="_self" method="post">
<table border="1" cellpadding="0" cellspacing="0" width="520">
<tr>
<th>Товар</th><th>Остаток,кг</th>
</tr>
<tr><td>-----</td><td>-----</td></tr>
<tr><td>Имя(*):</td><td> </td></tr>
<tr><td>Телефон(*):</td><td> </td></tr>
<tr><td></td><td> < /td></tr>
</table>
</form>
</div>
Осталось в правые ячейки трех нижних строк вставить три тегаinput –два текстовых поля и кнопку отправки данных:
<input type="text" name="user_name" maxlength="15" />
<input type="text" name="user_tel" maxlength="20"/>
<input type="submit" name="btn" value="Заказать звонок"/>
Эти теги необходимо поместить внутрь тегов td– каждый в свою ячейку.
Обратите внимание, что значения в атрибуте nameуказаны в точности, как и в функцииtestPost()при получении данных через массив $_POST. Для отступа под таблицей вставим тег <br/>после закрывающего тега</form>:
</table>
</form>
<br/>
</div>
В результате получится блок разметки: (см. рис.11.19)
Рис. 11.19
Посмотрим на результат в браузере, перейдем в раздел Заказать. Введем в поле Имя какое-либо значение, например,Вася, а в поле Телефон - 12345. Нажмем кнопку для отправки данных. Над таблицей должна появиться надпись: Заявка принята! (см. рис. 11.20):
Рис. 11.20
Это сработала функцияtestPost(). Перейдем в EclipseдляPHP, откроем структуру проекта, нажмем клавишу F5 (обновить). В папкеdoc должен появиться новый файл –это заявка,записанная в файл функцией testPost() (см. рис. 11.21):
Рис. 11.21
Откроем этот файл,внутри должен быть текст: Name: Вася Tel: 12345.Это значит, что данные обрабатываются правильно!
Отлаженную разметку поместим в базу данных, в таблицу razmetka. Так как в середину еще будут вставляться строки с остатками, то придется разбить разметку на две части: первую часть поместить в строку с id=9, а вторую часть в строку с id=10.Первый блок:
<div id="zakaz">
<form action="index.php?id=2" target="_self" method="post">
<table border="1" cellpadding="0" cellspacing="0" width="520">
<tr>
<th>Товар</th><th>Остаток,кг</th>
</tr>
Его поместим в строку сid=9 (см. рис. 11.22):
Рис. 11.22
Второй блок:
<tr><td>-----</td><td>-----</td></tr>
<tr><td>Имя(*):</td><td><input type="text" name="user_name" maxlength="15" /></td></tr>
<tr><td>Телефон(*):</td><td><input type="text" name="user_tel" maxlength="20"/></td></tr>
<tr><td></td><td><input type="submit" name="btn" value="Заказать звонок"/></td></tr>
</table>
</form>
<br/>
</div>
Второй блок поместим в строку с id=10 (см. рис.11.23):
Рис. 11.23
Из файла index.phpэти фрагменты соответственно удаляем. В PHP-вставке после вызова функции testPost(), добавим две строки для вывода этих двух фрагментов разметки:
else if ($id_menu==2) // Если номер: 2 - Заказы
{
// Получаем разметку по номеру
getHTML(8);
// Принимаем данные через POST-запрос
testPost();
//Получаем разметку верхней части таблицы
getHTML(9);
// Получаем разметку нижней части таблицы
getHTML(10);
}
Посмотрим в браузере на раздел Заказать–его внешний вид остался прежним!
Задача:создать функцию makeTabl(), которая получит список товаров с остатками из базы данных и сформирует десять строчек таблицы. Вызов функции следует разместить между выводом разметки верхней и нижней частей таблицы.
Сразу добавим вызов функции makeTabl():
//Получаем разметку верхней части таблицы
getHTML(9);
//Вывод десяти строк таблицы с остатками товаров
makeTabl();
// Получаем разметку нижней части таблицы
getHTML(10);
Обратите внимание, что вызов функции будет находится между выводом верхней и нижней части таблицы. При этом новые строки будут вставляться внутрь таблицы. Количество строк и значения в ячейках будут формироваться программно изPHP.
Перейдем в файл lib.php и в самом низу сформируем код функции makeTabl(). В таблицеopisan, в колонкеnaim находятся наименования товаров (см.рис. 11.24):
Рис. 11.24
При помощи SQL-запроса:
SELECT naim FROM opisan
Мы сможем получить список наименований товаров. Из таблицыtovar можно получить остатки товаров (см.рис. 11.25):
Рис. 11.25
Эту операцию мы уже выполняли при помощи SQL-запроса. С помощью этого запроса передавались остатки клиентской части на Java:
SELECT naim, SUM(kol) FROM tovar GROUP BY naim ASC
После стандартных шагов подключения к базе данных, мы выполним сразу два SQL-запроса. В результате, каждый из них вернет выборку из десяти строк. В цикле будут перебираться сразу два результата от каждого запроса. Из одного мы будем получать наименование, а из второго остаток.
Эти значения будут вставляться в ячейки таблицы. После цикла сформированный фрагмент разметки будет выводиться на страницу.
Код функции будет выглядеть так:
// Функция формирования таблицы
function makeTabl()
{
// Подключаемся к MySQL
$db = mysql_connect(ServerName,UserLogin,UserPassword);
// Если подключение выполнено
if ($db)
{
//Выбираем базу данных с проверкой успешного выбора
if (mysql_select_db(DbName,$db))
{
// Указываем использование кодировки UTF-8
mysql_query("SET names 'utf8'",$db);
// Запрос для получения остатков товаров
$sql1 = "SELECT naim, SUM(kol) FROM tovar GROUP BY naim ASC";
// Выполняем запрос
$rez1 = mysql_query($sql1,$db);
// Запрос для получения наименований товаров
$sql2 = "SELECT naim FROM opisan";
// Выполняем запрос
$rez2 = mysql_query($sql2,$db);
// Переменная для вывода тегов на веб-страницу
$out_page = "";
// Перебираем десять строк результата запроса
for ($i=0;$i<10;$i++)
{
// Получаем очередную строку из запроса
$row1 = mysql_fetch_row($rez1);
// Получаем очередную строку из запроса
$row2 = mysql_fetch_row($rez2);
// Получаем количество
$kol = $row1[1];
// Получаем наименование товара
$naim = $row2[0];
//Добавляем строку таблицы с двумя ячейками,
// в ячейки помещаем наименование товара и количество
$out_page .= "<tr><td>{$naim}</td><td>{$kol}</td></tr>";
}
// Выводим на страницу браузера
echo $out_page;
}
//Отключаемся от MySQL
mysql_close($db);
}
}
Все технические моменты программного кода нам уже знакомы.Посмотрим на результат в браузере,перейдем в раздел Заказать. Внутри таблицы появились десять строк с остатками товаров (см. рис. 11.26):
Рис. 11.26
Отформатируем нашу таблицу. Для этого перейдем в файл puh.css. В самом верху файла находится блок для обнуления отступов и полей для всех тегов. У нас добавились три новых тега: th, input, form. Добавим их в список:
/* Обнуление отступов и полей для всех тегов*/
body, table, tr, td, div, ul, li, img, a, h1, th, input, form
{
margin: 0px;
padding: 0px;
}
Разные браузеры могут использовать различные значения по умолчанию для свойств: margin, padding. Если не обнулить эти свойства для всех тегов, то могут появляться непредвиденные отступы в виде"щелей".
В самом низу файлаpuh.css начнем добавлять селекторы по идентификаторуzakaz. Тем самым мы будем обращаться только к тегам,вложенным в блок div c id="zakaz".Начнем с текста:
/*Свойства для текста в таблице заказов*/
#zakaz td,#zakaz th, #zakaz input
{
white-space: nowrap;
text-decoration: none;
font-size: 15px;
font-family: verdana,arial,serif;
font-style: normal;
line-height: 15px;
color: #000066;
}
В этом блоке мы обращаемся сразу к трем видам тегов,вложенных в блок div. Это теги: td, th, input, т.е. текст в ячейках, заголовках,текстовых полях получит список этих свойств.
Далее укажем свойства для заголовков и строк таблицы:
/*Свойство для заголовка таблицы заказов*/
#zakaz th
{
font-weight: bold;
color: #006600;
}
/*Свойство для строки таблицы заказов*/
#zakaz tr
{
height: 35px;
}
Мы сделали шрифт заголовков другим цветом, выделили жирным шрифтом, увеличили высоту строк. На следующем шаге изменим другие свойства заголовков и ячеек:
/*Свойства для заголовков и ячеек таблицы заказов*/
#zakaz td, #zakaz th
{
width: 260px;
vertical-align: middle;
text-align: center;
border: #000066 1px solid;
}
Эти свойства устанавливают центральное выравнивание по горизонтали и вертикали, толщину и внешний вид рамок ячеек таблицы. Осталось добавить свойства для тегов input:
/*Свойства для тегов inputв таблице заказов*/
#zakaz input
{
font-weight:bold;
width: 200px;
height: 25px;
border: #006600 1px solid;
background-color: white;
padding: 3px;
color: red;
}
Эти свойства применяются для двух текстовых полей и кнопки.
Посмотрим на конечный результат в браузере. Теперь таблица имеет вид (см. рис. 11.27):
Рис. 11.27
Этот вариант таблицы соответствует исходному варианту в образце.
На этом создание раздела Заказать можно считать законченным!
Итог занятия:На этом занятии мы:• создали последний раздел сайта: Заказать;• поговорили о методе отправки данных с веб-страницы;• изучили схему обработки переданных данных из PHP;• рассмотрели запись/чтение данных в файл при помощи PHP.