- •Занятие 1. "Быстрый старт: организация рабочего места веб-разработчика. Создание и запуск первого проекта"
- •Установка и настройка пакета Denwer
- •Установка среды разработки Eclipse для php
- •Создание и запуск веб-проекта php
- •Добавление php кода к веб-проекту
- •Занятие 2. "Технология верстки веб-страницы: изучениеHtml"
- •Предназначение html иCss
- •Вспомним основные тегиHtml
- •Правила записиHtml-кода
- •Занятие 3. "Технология верстки веб-страницы: изучениеCss"
- •Несколько слов оCss
- •Основы css
- •Посмотрим на результат в браузере (см. Рис. 3.5)
- •Селекторы css
- •Селектор по идентификатору:
- •Селектор по классу:
- •Основной способ подключения css
- •Основные csSстили
- •Из списка стандартных цветов.
- •При помощи указания компонентов цвета: rgb, в этом случае перед компонентами цвета ставится символ "#" – решетка.
- •Проект "Винни-Пух и компания"
- •Технология создания крупного проекта
- •Реализация клиентской части на Java
- •Title - указывается название колонки;
- •Галочка editable - включает/отключает возможность редактирования ячеек колонки пользователем;
- •Галочка resizable - включает/отключает возможность изменения ширины колонки пользователем (см. Рис. Тот же).
- •Обмен данными с сайтом
- •Занятие 5. "Начало создания серверной части проекта"Винни-Пух и компания"
- •Создание серверной части проекта на php
- •Кодировка проектаUtf-8
- •Обработка get-запроса вPhp
- •Работа с MySql изPhp
- •Занятие 6. "Завершение создания php-скрипта для приема данных от клиентской части на Java"
- •ФормированиеSql-запросов из php
- •Занятие 7. "Верстка основного каркаса сайта интернет-магазина"
- •Методики верстки
- •При большой вложенности таблиц друг в друга снижается скорость загрузки страницы браузером.
- •Индексация страницы поисковой системой происходит сложнее, что влияет на оптимизацию сайта для поисковых систем(сайт хуже находится).
- •При открытии страницы в старых браузерах страница может отображаться не корректно –старый браузер не поддерживает современные css- свойства.
- •Типы верстки
- •Верстка основного каркаса сайта
- •Изучение верстки других сайтов
- •Занятие 8. "Создание главного меню и раздела описания товаров"
- •Создание таблицы описания товаров
- •Формирование верхнего горизонтального меню
- •Создание белой прямоугольной области
- •Получение описания товаров из базы данных и вывод на веб-страницу
- •Занятие 9 "Создание левой и правой боковой части страницы"
- •Создание таблицы дляHtml-разметки
- •Программирование пунктов меню
- •Получение html-разметки из базы данных
- •Создание левой боковой части страницы
- •Использование Flash на веб-странице
- •Создание правой боковой части страницы
- •Занятие 10. "ПодключениеJavaScript. Создание разделов сайта: Главная и Контакты"
- •Реализация раздела сайта: Главная
- •Реализация раздела сайта: Контакты
- •Немного оJavaScript
- •Создание эффекта подмены изображения
- •Создание эффекта появления изображения
- •Занятие 11. "Создание раздела сайта: Заказать"
- •Создание верхней части раздела
- •Отправка и получение данных с веб-страницы
- •Использование файлов для хранения данных
- •Открытие файла для записи/чтения;
- •Запись/Чтение;
- •Закрытие файла.
- •Создание функции для получения и сохранения данных
- •Создание таблицы и формы отправки данных
- •Создание тегов для верхней части таблицы с заголовком.
- •Создание функции формирования десяти строк таблицы с остатками.
- •В заключение внешний вид подкорректируем при помощи css.
- •Занятие 12. "Отладка проекта"
- •Кросс-браузерная отладка
- •Посмотреть сайт на различных разрешениях экрана. Для этого необходимо изменять текущее разрешение экрана.
- •/*Вертикальное выравнивание по верхней части*/
- •Создание дополнительных настроек в тегахHead
- •Перенос сайта на веб-сервер
- •Выгрузка базы данных с исходного компьютера.
- •Загрузка базы данных на веб-сервер.
- •Проверка взаимодействия с клиентской частью наJava
- •Заключение
- •Постановка задачи(логическое описание проекта):
- •Техническое описание проекта:
Занятие 6. "Завершение создания php-скрипта для приема данных от клиентской части на Java"
На этом занятии мы завершим программирование обмена данными с клиентской частью на Java: -изучим работу с MySQL из PHP; -создадим запросы для добавления данных и получения остатков товаров; -проверим взаимодействие клиентской и серверной части.
ФормированиеSql-запросов из php
Подготовим PHP-проект к работе. В дальнейшем это будет означать следующие действия:
Запустим Денвер (см. рис. 6.1)
Рис. 6.1
Откроем Eclipse для PHP (см. рис. 6.2):
Рис. 6.2
Откроем браузер и в адресной строке введем: http://puh, нажмем клавишу Enter–запуститсяPHP-проект (см. рис. 6.3):
Рис. 6.3
Откроем вторую закладку в браузере и в адресной строке введем localhost, нажмем клавишуEnterи выполним вход в PHPMyAdmin (см. рис. 6.4)1:
Рис. 6.4
В PHPMyAdmin выберем базу данных проекта с именемpuh для этого нажмем на имя базы puh (см. рис.6.5):
Рис. 6.5
Внимание!!!Указанные выше действия из пяти пунктов мы будем производить в начале каждого из следующих занятий!
На прошлом занятии мы создали базу данных для серверной части проекта и создали таблицу для учета поступления и реализации товаров. Теперь необходимо сформировать PHP-код, который будет добавлять данные в таблицу, и получать из этой же таблицы информацию об остатках товаров. Мы уже имели опыт работы с базой данных MySQL при помощи языка программирования Java. Принципы работы через язык PHP cMySQL те же самые.Можно сказать, что через PHPработать с базой данных несколько проще –программный код значительно короче.
Для работы с базой данных используется язык запросов SQL. При изучении MySQL для Javaмы рассматривали некоторыеSQL-запросы. При работе с PHP –SQL - запросы работают точно также.Отличие лишь в том, что выполняться они будут из PHP.
Перечислим основные шаги при работе с базой данных:
Подключаемся к MySQLи выбираем базу данных. При этом необходимы четыре параметра: адрес сервера, имя пользователя,пароль пользователя, имя базы данных.
Производим различные операции с базой данных: добавление, изменение,удаление или получение данных.
Отключаемся от MySQL.
Вcпомним:те же самые действия мы выполняли, работая с базой данных при помощи Java!
При разработке сайта с помощью Денвера все находится на локальном компьютере, поэтому адрес сервераlocalhost.
При установке MySQLавтоматически создается пользователь с полными правами и именем root. Пароль у пользователя root отсутствует!
Имя базы - puh (именно это имя мы указали при создании базы данных).
Перейдем в Eclipse для PHP, в файл tovar.php (см. рис. 6.6):
Рис. 6.6
Это файл нашего проекта,которому клиентская часть на Java передает данные.Проверку передаваемых данных через GET-запрос мы уже выполнили, при успешной проверке вызывается функция runMySQL().Внутри фигурных скобок этой функции мы будем писать программный код для работы с базой данных (см. рис. 6).
Когда мы закончим нашPHP-скрипт –мы выполним проверку взаимодействия его с клиентской частью на Java.Скрипт -программа, как правило, не очень большого размера, которая решает задачу серверной или клиентской части проекта.Компьютер пользователя на котором будет открываться наш сайт и запускаться приложение на Java –является клиентом, а веб-сервер,на котором будет находиться сайт –является сервером. Клиентов может быть много, а сервербудет один. В процессе разработки иклиентом, исерверомявляется локальный компьютер!
Сейчас мы рассмотрим пример работы с базой данных из PHP–выполним запрос на добавление одной строки в таблицу tovar. Для добавления данных используется команда SQL под названием INSERT. Чтобы добавить данные в нашу таблицу необходимо выполнить следующий запрос:
INSERT INTO tovar (naim,kol) VALUES (1,10)
Допустим, происходит поступление десяти килограммов меда, мед имеет код с номером 1, следовательно, в поле naim нужно поставить значение 1.Значение в поле kol–10, так как меда поступает десять килограмм (см. рис. 6.7):
Рис. 6.7
Обратите внимание, что мы указываем значение только двух полей(naim, kol ) –хотя колонок в таблице четыре. Поле id нумеруется автоматически, а в полеdv –подставится нулевая дата и время. Перейдем в PHPMyAdminна закладку SQLи введем указанный запрос(см. рис. 7).
Обратите внимание, что при этом должна быть выбрана база puh (см. рис. 6.8):
Рис. 6.8
На закладке SQL можно записать любойSQL-запрос и выполнить его. Это удобно для отладочных целей! Прежде чем использовать SQL-запрос в коде PHP –желательно проверить его правильность выполнения в PHPMyAdmin –именно это и сделаем! Нажимаем кнопку OK, которая находится внизу справа. Если запрос выполнился успешно, то появится соответствующее сообщение (с "зеленой галочкой") об этом(см. рис. 6.9):
Рис. 6.9
Если появилось сообщение об ошибке, то следует проверить правильность запроса. Неверное указание имен таблицы и полей, а также синтаксические ошибки приведут к ошибкам при выполнении!
Далее перейдем к данным таблицы tovar –для этого слева в списке таблиц необходимо нажать на ее название (см. рис.6.10):
Рис. 6.10
Откроются данные таблицы (см. рис. 6.11):
Рис. 6.11
Теперь в таблице присутствует одна строка –запись таблицы. В полеid происходит автонумерация, а в поле dvвставилась "нулевая дата". Добавление нулевой происходит,если в запросе не указаны дата/время.Остальные колонки заполнились указанными в запросе значениями.
Вернемся в Eclipseдля PHP, в файл tovar.php. Внутри функцииrunMySQL() запишем программный код для выполнения этого же запроса, но уже из PHP (см. рис.6.12):
Рис. 6.12
Сохраним изменения в проекте, перейдем в браузер, где открыт наш сайт, введем адрес: http://puh/tovar.phpи нажмем клавишу Enter (см. рис. 6.13):
Рис. 6.13
На странице ничего нового не появится, ничего не изменится и в базе данных. Вспомним, что функция runMySQL() выполняется только в случае, если передается GET-запрос нужного формата. Изменим ссылку перехода на следующее: http://puh/tovar.php?tov1=10и снова нажмем Enter (см. рис. 6.14):
Рис. 6.14
На этот раз выполнится программный код функции runMySQL(). Перейдем вPHPMyAdmin, откроем данные таблицы tovar –появилась вторая строка (см. рис. 6.15):
Рис. 6.15
Вторая строка с id=2появилась благодаря выполнениюPHP-кода!Разберем программный код более подробно:
// Подключаемся кMySQL
$db = mysql_connect("localhost","root","");
В данной строкепроисходит подключение к MySQL –три параметра в скобках –это адрес сервера, имя пользователя и пароль. После подключения переменная$db –это установленное подключение.
// Если подключение выполнено
if ($db)
Далее происходит проверка, что подключение прошло успешно, в случае ошибки остальные действия не будут выполнены.
// Выбираем базу данных с проверкой успешного выбора
if (mysql_select_db("puh",$db))
После успешного подключения, происходит выбор базы puh, вторым параметром указывается переменная $db–подключение к MySQL. Сразу происходит проверка на успешный выбор базы данных.Далее определяем кодировку- UTF-8:
// Указываем использование кодировки UTF-8
mysql_query("SET names 'utf8'",$db);
Затем выполняем запрос–внутри скобок указан именно тот запрос, который мы выполняли из PHPMyAdmin –добавление новой строки в таблицу:
mysql_query("INSERT INTO tovar (naim,kol) VALUES (1,10)");
После работы с базой данных нужно обязательно выполнить отключение:
// Отключаемся отMySQL
mysql_close($db);
Итак, мы разобрали схему работы с базой данных из PHP. Теперь доработаем этот программный код таким образом, чтобы в базу данных добавлялись данные из GET-запроса. Строки,которые мы добавили в таблицу при изучении примера работы с базой данных из PHP –удалим. Перейдем в PHPMyAdmin, к данным таблицыtovar. Поставим галочки слева от удаляемых строк и нажмемУдалить (см. рис. 6.16):
Рис. 6.16
Появится вопрос о подтверждении удаления, нажмем Да (см. рис. 6.17):
Рис. 6.17
После этого строки удалятся.
Запрос на добавление строки в таблицу базы данных:
mysql_query("INSERT INTO tovar (naim,kol) VALUES (1,10)");
Был приведен в качестве примера. Для добавления данных из GET-запроса выполняется несколько других запросов. Поэтому вместо этой строки поместим вызов функции getQuery();.
Функция getQuery() выполнит необходимые SQL-запросы. Над функцией runMySQL() добавим функциюgetQuery() (см. рис. 6.18):
Рис. 6.18
Внутрь функции поместим следующий программный код:
// Получаем дату и время на момент записи в базу данных
$date_time = date('Y-m-d [H:i:s]');
// Перебираем в цикле десять параметров
for ($i=1;$i<=10;$i++)
{
//Переменная для имени параметра
$tmp = "tov".$i;
// Если такой параметр передан в GET-запросе
if ($_GET[$tmp])
{
// Значение текущего параметра - количество товара
$kol = $_GET[$tmp];
// Строка запроса
$q = "INSERT INTO tovar (naim,kol,dv)".
"VALUES ({$i},{$kol},'{$date_time}')";
// Выполняем запрос
mysql_query($q);
}
}
Сохраним изменения в проекте и проведем тестирование, а потом более подробно разберем программный код.На Рабочем столе мы создали ярлык для запуска клиентской части на Java. Запустим приложение Java (см. рис. 6.19):
Рис. 6.19
Откроется приложениеJava. Введем в таблицу количество поступления товаров:Мед-10; Воск пчелиный-20;Цветочная пыльца-30и нажмем кнопку Выполнить (см. рис.6.20):
Рис. 6.20
В результате появится сообщение: Возможно, интернет не подключен. (см. рис. 6.21)
Рис. 6.21
Не стоит думать, что произошла ошибка. Дело в том,что наша страница tovar.phpпока еще не возвращает ответ об остатках товаров. Но сам GET-запрос должен быть обработан, и данные должны попасть в базу данных.
Перейдем в PHPMyAdmin и посмотрим данные в таблице tovar –мы видим, что появилось три новых строки–это информация о поступивших товарах (см. рис. 6.22):
Рис. 6.22
Обратите внимание,номера товаров и количество совпадает с данными в клиентской части Java (см. рис. 6.20). Рассмотрим теперь программный код:
// Получаем дату и время на момент записи в базу данных
$date_time = date('Y-m-d [H:i:s]');
Данная строка получает текущую дату и время в формате, указанном внутри круглых скобок. Если сегодня 13января 2013 года и время 12 часов 23 минуты 34секунды, то в переменную $date_time попадет:
2013-01-13 [12:23:34]. Это значение будет записываться в колонку dv.
Это момент поступления товаров с точностью до секунды.
// Перебираем в цикле десять параметров
for ($i=1;$i<=10;$i++)
{
//Переменная для имени параметра
$tmp = "tov".$i;
// Если такой параметр передан в GET-запросе
if ($_GET[$tmp])
{
Далее идет цикл для перебора параметров GET-запроса и проверку на значение,отличное от нуля –этот фрагмент ничем не отличается от ранее использованного при проверкеGET-запроса2с тем отличием,что теперь значения параметров будут записываться в базу данных.
// Значение текущего параметра - количество товара
$kol = $_GET[$tmp];
В переменную $kol передадим значение очередного параметра из GET-запроса –количество товара.
// Строка запроса
$q = "INSERT INTO tovar (naim,kol,dv)".
"VALUES ({$i},{$kol},'{$date_time}')";
Далее формируем строку запроса –она очень похожа на рассмотренный вариант из примера. С тем отличием, что теперь мы указываем точную дату и время. Особое внимание нужно обратить на значения в скобках ({$i},{$kol},'{$date_time}').В фигурных скобках указаны переменные –вместо фрагмента {$i} –подставится значение переменной(счетчик цикла). Значения в SQL-запросе, которые являются числовыми –вставляются в виде чисел, а строковые значения и значения типа "дата"–вставляются внутри одиночных кавычек.
В частности, значение'{$date_time}', имеющее тип "дата"помещено в одиночные кавычки–если этого не сделать, то запрос не сработает! Единственная строка запроса записана в программном коде фактически в две строки. Эти строки складываются при помощи конкатенации(склеивания строк). Напомним, что такая операция записывается в PHP через операторточка(.):
// Строка запроса
$q = "INSERT INTO tovar (naim,kol,dv)".
"VALUES ({$i},{$kol},'{$date_time}')";
Последняя команда выполняет запрос.
// Выполняем запрос
mysql_query($q);
Подведем краткий итог:цикл перебирает все параметры GET-запроса, если значение количества не нулевое, то в таблицу добавляется новая строка.
Осталось выполнить последнюю задачу –вернуть ответ клиентской части наJava сведения об остатках товаров в формате:
10~20~30~40~50~60~70~80~90~100
В самом верху PHP-скрипта добавим еще одну функцию javaKol(): (см. рис. 6.23):
Рис. 6.23
Вызов этой функции необходимо добавить после вызова функцииgetQuery() (см. рис. 6.24):
Рис. 6.24
После добавления информации о поступившем количестве–мы будем получать информацию об остатках. Прежде чем писать код PHP, сформируем необходимый для этих целей SQL-запрос.Он должен выбрать все записи из таблицыtovar,сгруппировать данные по товарам,подсчитать сумму и вернуть результат.Такой SQL-запрос будет выглядеть так:
SELECT naim, SUM(kol) FROM tovar GROUP BY naim ASC
Проанализируем текст запроса. Команда SELECTнам уже знакома из курса по Java – это получение данных из таблицы tovar –об этом говорит часть запросаFROM tovar:
Вспомним!!!Язык SQL не зависит от регистра букв – маленькие и заглавные буквы – равносильны!
Между служебными словами SELECT …FROM (это переводится как: ВЫБРАТЬ…ИЗ) находится список колонок, которые нам необходимы. Т.е. мы получим naim-код товара и SUM(kol) –сумму всех приходов и расходов по товару.
Важно! Функция SQLSUM–вычисляет сумму.Между служебным словом SUM и записью (kol) –не должно быть пробелов!
Часть запроса GROUP BY naim –указывает на то, что данные будут группироваться по полю naimи будут отсортированы по возрастанию –ASC. Если перевести этот запроса на русский язык, то можно сказать так: ВЫБРАТЬ данные ИЗ таблицы tovar, СГРУППИРОВАТЬ ПО полюnaim с подсчетом суммарного количества приходов/расходов по товару и отсортировать по возрастанию поля naim. В результате такого запроса всегда будет получаться таблица из двух колонок и десяти строк (см. рис.6.25):
Рис. 6.25
В левой колонке будут десять сгруппированных строк по товарам–по возрастанию, а справа будут остатки товаров на складе. Напомним, что при поступлении, товары планируем добавлять со знаком плюс, а при отгрузке со знаком минус.
При сложении всех поступлений и всех отгрузок –получится текущий остаток товара на складе –именно это и делаетSUM(kol).
Теперь, когда SQL-запрос сформирован,запишем программный код PHPвнутри функции javaKol() (см. рис. 6.26):
Рис. 6.26
Разберем этот программный код. Остатки товара будут записаны в переменную $otvet:
// Переменная, в которой будет результат остатков
$otvet = "";
В переменную $otvet в итоге должна попасть строка в виде:
10~20~30~40~50~60~70~80~90~100
Т.е. остатки по десяти товарам, разделенные символом тильда (~). Создадим запрос для подсчета остатков, поместим его в переменную $sql:
// Запрос для подсчета остатков
$sql = "SELECT naim, SUM(kol) FROM tovar GROUP BY naim ASC";
Выполняем запрос,,результат запишем в переменную $rez://.Выполним запрос и получим результат:
$rez = mysql_query($sql);
Теперь перебираем в цикле строки результата запроса –десять строк из таблицы результата.
// Перебираем десять строк результата запроса
for ($i=0;$i<10;$i++)
В цикле получим строку запроса и поместим ее в переменную $row. Строки таблицы будут перебираться в цикле от начала до конца.
// Получаем очередную строку из запроса
$row = mysql_fetch_row($rez);
Следующей строкой в цикле получаем количество товара -значение из соответствующей колонки. В квадратных скобках указывается номер колонки, нумерация идет с нуля. [1]–это номер второй колонки –колонки, где хранится количество товара.
// Получаем количество
$kol = $row[1];
Третьей строкой прибавляем очередной остаток товара в конец строки:
// Добавляем количество в конец строки
$otvet .= $kol;
Следующей строкой добавляем символ тильда(~). Но делаем мы это,только если число в строке не последнее(нужно сделать соответствующую проверку при помощи оператора if).
// Добавляем разделитель тильда (~)
if ($i!=9) $otvet .= "~";
В самом конце выводим на страницу браузера значение переменной$otvet. Это будет строка в виде:
// Выводим на страницу браузера
echo $otvet;
Значение переменной$otvet передаетсяклиентской части на Java:10~20~30~40~50~60~70~80~90~100.
Обработку этих данных и их запись в таблицу приложения Java мы уже прописали в программном коде Java.
Прежде чем начать тестирование, выполним начальную подготовку таблицы tovar.Перейдем в PHPMyAdmin, выделим все строки таблицы и удалим их (см. рис. 6.27):
Рис. 6.27
Перейдем на закладкуSQL и запишем там следующий запрос:
INSERT INTO tovar (naim,kol) VALUES (1,1);
Скопируем его и вставим снизу еще девять раз, значение первого параметра зададим от 1 до 10 (см. рис. 6.28):
Рис. 6.28
Выполним этот запрос - в таблице появятся сразу десять строк.Каждая строка - для определенного товара.Количество товара пусть будет равным1(см. рис. 6.29):
Рис. 6.29
Мы выполнили ввод начальных остатков товара. Это необходимо для того, чтобы наш запрос по извлечению остатков правильно группировал данные!
Сохраним PHP-проект и запустим Java-приложение. Теперь можно выполнить полную проверку взаимодействия клиентской и серверной части.
Введем для примера поступление товаров в следующем количестве: Мед –10, Воск пчелиный –20, Перга –30. Выполним поступление товаров –таблица заполнится текущими остатками (см. рис. 6.30)
Рис. 6.30
Итак, начальное количество меда было равным 1. С учетом поступления текущий остаток на складе стал равным 11 (1+10=11).Программа выдала правильный результат! Для товаров "Воск пчелиный" и "Перга"мы также получили правильный результат,начальное количество было равно 11. С учетом поступления получили 21 (1+20) и 31 (1+30)соответственно.
Если произошел расход товара, то необходимо ввести количество израсходованных товаров со знаком минус. Если значение в строке отсутствует или нулевое, то по данной позиции будет отправляться нулевое количество.
Перейдем теперь вPHPMyAdmin,посмотрим данные в таблице tovar.Мы увидим три новых строки(см. рис. 6.31):
Рис. 6.31
Обратите внимание, что при попытке отправить все строки с нулевым количеством появляется сообщение об ошибке! (см. рис. 6.32):
Рис. 6.32
В данном случае имеется в виду ошибка поступления товаров. Нет данных о поступлении. Наш PHP-код не добавляет в базу новых строк и не возвращает ответ с остатками.
Теперь можно сказать,что страница tovar.php полностью закончена!
Давайте подведем промежуточные итоги:
Выполнена клиентская часть наJava
Создана база данных для серверной части проекта и одна таблица
Создан PHP-скрипт для взаимодействия с клиентской частью Java
Выполнен совместный запуск клиентской и серверной части, а также обмен данными между ними
Обратите внимание, что работая над этой ветвью проекта –мы совершенно не задумывались об остальной его частью.Мы полностью погрузились в реализацию запланированной части, которая отвечает за обмен данными между клиентской и серверной частями проекта. Эту часть мы в свою очередь разбили на две составляющие и создавали их по отдельности. Это те принципы, которые могут помочь при работе над крупным проектом.
Итог занятия:На этом занятии мы:• закончили создание PHP-скрипта для обмена данными;• изучили работу с MySQL из PHP;• проверили взаимодействие клиентской и серверной частей проекта.
1Подробное описание входа в PHPMyAdminможно посмотреть в пятом занятии данного методического пособия.
2 См.Занятие 4. данного методического пособия.
