Можно сказать, что половину задачи по созданию раздела Заказать мы выполнили.Осталось сформировать таблицу с остатками товаров и форму для отправки данных (см. рис. 11.16).
Рис. 11.16
Таблица состоит из двух колонок. Самая верхняя строка –это заголовок таблицы. Ниже идет список товаров с текущими остатками на складе. Три нижние строки –это форма отправки данных. Под списком товаров расположена строка, разделяющая остатки от формы отправки данных.
Строки таблицы с наименованием товаров и их количеством на складе мы будем получать из базы данных.Только там есть информация о текущих остатках.
Мы будем создавать таблицу в три этапа:
1. Создание тегов для верхней части таблицы с заголовком.
2. Создание функции формирования десяти строк таблицы с остатками.
3. Создание нижнего блока таблицы–формы отправки данных.
4. В заключение внешний вид подкорректируем при помощи 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:
Атрибуты тега нам уже знакомы. Обратите внимание, что адрес в атрибуте action –это адрес раздела Заказать: index.php?id=2. Иначе, после отправки данных будет открываться другой раздел сайта!
Ширина таблицы будет520 пикселей,чтобы таблица поместилась в центральную белую часть по ширине. Рамка таблицы останется видимой. В этом случае таблица используется по своему прямому назначению– как средство размещения информации в ее ячейках.
Теперь добавим строку заголовка с двумя ячейками th:
Эти теги необходимо поместить внутрь тегов 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.Первый блок:
Второй блок поместим в строку с 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-запроса. В результате, каждый из них вернет выборку из десяти строк. В цикле будут перебираться сразу два результата от каждого запроса. Из одного мы будем получать наименование, а из второго остаток.
Эти значения будут вставляться в ячейки таблицы. После цикла сформированный фрагмент разметки будет выводиться на страницу.
Все технические моменты программного кода нам уже знакомы.Посмотрим на результат в браузере,перейдем в раздел Заказать. Внутри таблицы появились десять строк с остатками товаров (см. рис. 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.
Занятие 12. "Отладка проекта"
На этом занятии мы выполним завершающие действия при создании проекта: - выполним адаптацию проекта для разных браузеров; - рассмотрим этапы переноса проекта на веб-сервер; - сделаем корректировку клиентской части на Java.
На этом занятии мы выполним заключительные шаги для нашего проекта "Винни-Пух и компания".
