- •Занятие 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
- •Заключение
- •Постановка задачи(логическое описание проекта):
- •Техническое описание проекта:
Обмен данными с сайтом
Язык программированияJava ориентирован на создание приложений для интернета. И в этом языке есть специальные классы для передачи данных через интернет. Конечно, передача данных возможна только при включенном интернете.
Если интернет не подключен, то наше Java-приложение не сможет передать и получить данные с сайта. Давайте предупредим об этом пользователя сообщением. Передачу данных будем осуществлять по протоколу HTTP. Название этого протокола мы постоянно видим в адресной строке браузера: http://.
Для решения нашей задачи не нужно изучать протокол HTTP–достаточно понимать, что передача данных будет происходить по данному протоколу.
Для передачи данных требуется знать адрес страницы, которой передаются данные, например http://puh/tovar.php.Тогда соответствующая страница сможет обработать наши данные и вернуть нам ответ при условии, что на ней подготовлен программный код для этих целей. Как принимать данные из PHP и возвращать ответ, мы узнаем позже.Пока нам достаточно знать, что данные смогут быть обработаны нужным образом.Одним из вариантов передачи данных является GET-запрос. Наши данные не носят характер секретных данных, мы будем передавать лишь цифры по десяти позициям товаров, поэтому их можно передавать без шифрования. GET-запрос записывается в виде:
http://puh/tovar.php?t1=10&t2=20&t3=30&
Сначала идет адрес страницы, которой передаются данные:
http://puh/tovar.php , далее идет знак вопроса (?)–это началоGET-запроса, после знака вопроса идет список параметров с указанными значениями.Значение указывается через равенство(=), параметры разделяются символом амперсанда (&). В приведенном примере передаются три параметра: t1, t2, t3 со значениями:10, 20, 30 соответственно. Количество параметров, их имена и значения могут быть и другими. Например, нужно передать черезGET-запрос имя,фамилию и возраст человека. Это можно сделать так:
?im=Вася&famil=Петров&vozr=15&
Три параметра: im–имя, famil –фамилия, vozr–возраст; значения соответственно:Вася, Петров, 15. Имена параметров выбираются произвольно по правилам именования переменных. Эти имена параметров будут использоваться на принимающей странице в программном коде PHP.
Наша задача передать десять значений о количестве товаров,поэтому нам нужно десять параметров.Назовем параметры: tov –сокращение от слова товар и добавим к каждому параметру цифру с номером товара.Получится следующий GET-запрос:
?tov1=0&tov2=0&tov3=0&tov4=0&tov5=0&tov6=0&tov7=0&tov8=0&tov9=0&tov10=0&
В данном примере количество указано нулевым, но в нашем приложении вместо нулей будут подставляться значения, введенные пользователем в таблице.
Допустим, пользователь ввел значения (см. рис.4.23):
Рис. 4.23
В этом случае запрос должен выглядеть так:
?tov1=10&tov2=20&tov3=30&tov4=40&tov5=0&tov6=0&tov7=0&tov8=0&tov9=0&tov10=90&
Незаполненная ячейка таблицы будет равносильна нулевому значению! Для решения данной задачи нам необходимо перебрать все строки таблицы и получить значения, введенные в четвертую колонку. Перейдем на закладку с программным кодом, и после объявления переменных класса: prog добавим метод для формированияGET-запроса(см. рис. 4.24):
Рис. 4.24
Мы добавили программный код:
// Метод для созданияGET-запроса
private String makeGet()
{
//Переменная для формированияGET-запроса
String rez = "?";
// Возврат значения
return rez;
}
Метод makeGet() будет возвращать строковое значение в виде:
?tov1=10&tov2=20&tov3=30&tov4=40&tov5=0&tov6=0&tov7=0&tov8=0&tov9=0&tov10=90&
Закончим метод makeGet(), в окончательном виде он будет выглядеть так:
// Метод для созданияGET-запроса
private String makeGet()
{
//Переменная для формированияGET-запроса
String rez = "?";
// Перебираем десять строчек таблицы в цикле
for (int i=0;i<10;i++)
{
// Прибавляем в конец строки значение: tov{номер}=
rez += ("tov"+(i+1)+"=");
// Переменная для количества
int kol;
try //Попытка
{
// Получаем значение из ячейки таблицы
// приводим к типуString и срезаем пробелы справа и слева
String str = tableTovar.getValueAt(i, 3).toString().trim();
//Приводим к целому типу
kol = Integer.parseInt(str);
}
catch (Exception e) //Исключение
{
// Если в ячейке ничего не было - считаем,
// что нулевое значение
kol=0;
}
// Прибавляем в конец строки количество и символ: &
rez += ""+kol+"&";
}
// Возврат значения
return rez;
}
Рассмотрим программный код. Цикл for выполняет десять шагов (столько же строк в таблице). Конструкция try-catch необходима для контроля пустых значений в ячейках таблицы, в случае пустой ячейки будет срабатывать блок catch. В этом случае считаем, что указано нулевое значение:
kol=0;
Обращение к таблице происходит по имени tableTovar. При помощи метода getValueAt(i, 3)можно получить значение в ячейке по номеру строки и колонки: первый параметр– номер строки,второй параметр –номер колонки. Важно помнить, что нумерация начинается с нуля!Метод toString()осуществляет перевод в строковый тип, метод trim()удаляет пробелы справа и слева. Строка:
String str = tableTovar.getValueAt(i, 3).toString().trim();
помещает значение из ячейки в переменную str.
Строка:
kol = Integer.parseInt(str);
выполняет перевод к типу int, целому типу.
Перед циклом объявлена переменная строкового типа с начальным значением: "?":
String rez = "?";
На каждом шаге цикла, в самом начале его действия, к этой строке прибавляется значение с именем параметра и символом равенства. После первого шага цикла, значение переменной rezбудет: "?tov1=".Далее прибавляется полученное значение из ячейки таблицы и символ амперсанд (&). Таким образом, на каждом шаге цикла будет прибавляться параметр с его значением. В результате, метод вернет полный GET-запрос:
// Возврат значения
return rez;
Теперь остается отправить GET-запрос и получить на него ответ.
Для решения этой задачи потребуется добавить библиотеки.Переходим в самую верхнюю часть программного кода и добавляем строки(см. рис. 4.25).
Рис. 4.25
Основная библиотека в этом списке:
// Для работы с сетью
import java.net.*;
Это библиотека позволяет отправить данные по протоколуHTTP. Именно благодаря ей, мы сможем отправить и получить данные.
Создадим обработчик события при нажатии на кнопку для отправления данных. Он создается двойным щелчком левой клавиши мыши по соответствующей кнопке (см.рис. 4.26):
Рис. 4.26
Весь оставшийся код приложения будет помещен внутрь методаactionPerformed (см. рис. 4.27):
Рис. 4.27
Данные о поступившем количестве товара будут отправляться на сайт и будут сохраняться в базе данных. В ответ сайт будет отправлять строку с информацией об остатках товаров с учетом вновь поступившего товара. Сайт будет выдавать ответ в виде строки:
10~20~30~40~50~60~70~80~90~100
Десять значений –каждое значение отделяется от другого символом тильда(~). В обработчик события "нажатие на кнопку" поместим следующий код:
// Формируем GET-запрос для отправки
String str = "http://puh/tovar.php"+makeGet();
// Переменная для проверки успешной отправки данных
boolean flag = false;
try
{
// Адрес подключения
URL url = new URL(str);
// HTTP-подключение
HttpURLConnection conn =
(HttpURLConnection)url.openConnection();
//Подключаемся
conn.connect();
// Поток чтения данных
BufferedReader in = new BufferedReader(
new InputStreamReader(conn.getInputStream()));
//Получаем строку-ответ
String inputLine = in.readLine().trim();
// Проверяем ответную строку
if (inputLine.indexOf('~')>=0)
{
// Меняем флаг на признак успешной передачи
flag=true;
// Получаем массив значений
String[] mas = inputLine.split("~");
// Перебираем значения в цикле
for (int i=0;i<mas.length;i++)
{
// Помещаем значения в таблицу
tableTovar.setValueAt(mas[i], i, 2);
}
}
// Закрываем поток
in.close();
// Отключаемся
conn.disconnect();
conn=null;
}
catch (Exception e) {}
// Если отправка данных не удалась
if (flag==false)
{
JOptionPane.showMessageDialog(
null,
"Возможно интернет не подключен.",
"Ошибка отправки данных!", 0);
}
Рассмотрим его более подробно.
// Формируем GET-запрос для отправки
String str = "http://puh/tovar.php"+makeGet();
В данной строке формируется адрес отправки и параметрыGET-запроса.
Наш PHP-проект будет называться puh (сам проект мы создадим на следующем занятии). В проекте будет специальная страница для приема данных tovar.php. На странице будет присутствовать программный кодPHP для получения данных и отправки ответа Java-приложению. Пока сайт запускается при помощи Денвера –адрес страницы будет:http://puh/tovar.php,далее к этому адресу добавится GET-запрос.
// Переменная для проверки успешной отправки данных
boolean flag = false;
Переменная flag необходима для проверки правильной передачи данных.Изначально эта переменная имеет значениеfalse, а в случае успешной отправки ее значение изменится наtrue. В случае,если значение false,то мы выведем сообщение о том, что отправка данных невозможна:
// Если отправка данных не удалась
if (flag==false)
{
JOptionPane.showMessageDialog(
null,
"Возможно интернет не подключен.",
"Ошибка отправки данных!", 0);
}
Отправка данных происходит внутри конструкции try-catch: попытка может оказаться неудачной, если, например, нет доступа к интернету. Следующие строки отвечают за отправку данных на указанную страницу:
// Адрес подключения
URL url = new URL(str);
// HTTP-подключение
HttpURLConnection conn =
(HttpURLConnection)url.openConnection();
//Подключаемся
conn.connect();
Далее происходит получение данных:
// Поток чтения данных
BufferedReader in = new BufferedReader(
new InputStreamReader(conn.getInputStream()));
//Получаем строку-ответ
String inputLine = in.readLine().trim();
В итоге в переменнойinputLine окажется строка в виде:
10~20~30~40~50~60~70~80~90~100
Это ответ сайта об остатке товара. Формат ответной строки будет таким, потому что мы сами это реализуем в программном коде PHP!Вполне удобно и просто передать данные, разделенные каким-либо символом.
Следующий блок проверяет полученную строку, разбивает ее на составляющие и записывает в таблицу, в колонку с остатками:
// Проверяем ответную строку
if (inputLine.indexOf('~')>=0)
{
// Меняем флаг на признак успешной передачи
flag=true;
// Получаем массив значений
String[] mas = inputLine.split("~");
// Перебираем значения в цикле
for (int i=0;i<mas.length;i++)
{
// Помещаем значения в таблицу
tableTovar.setValueAt(mas[i], i, 2);
}
}
Метод indexOf(‘~’)производит поиск указанного символа в строке и возвращает значение: >=0,если символ найден.
Метод split(‘~’)разбивает строку на составляющие через указанный разделитель и возвращает массив. В нашем случае вернется массив из десяти элементов,каждый из которых – это остаток товара.
Метод setValueAt(mas[i], i, 2) записывает значение в ячейку таблицы: первый параметр –записываемое значение, второй параметр – номер строки, третий параметр –номер колонки.
В заключение передачи данных, производится закрытие потока для чтения и отключение:
//Закрываем поток
in.close();
// Отключаемся
conn.disconnect();
conn=null;
При успешной отправке данных будет происходить следующее (см. рис. 4.28):
Рис. 4.28
Значения из колонки"Количество поступления"будут передаваться на сайт, а колонка "Остаток на складе"будет заполняться данными с сайта.
Внимание!!!При запуске проекта под Денвером –для взаимодействия клиентской и серверной части подключение к интернету не требуется!
На этом разработку клиентской части на Javaможно считать законченной. Проверку работоспособности данного приложения мы выполним на следующем занятии, когда реализуем часть сайта, отвечающую за прием и отправку данных на PHP. Но клиентская часть уже не требует доработок, поэтому создадим JAR-архив и ярлык для запуска на Рабочем столе. Запустим наше приложение и нажмем кнопку "Выполнить", увидим сообщение о неудачной попытке отправки данных (см. рис. 4.29):
Рис. 4.29
Наше приложение сработало правильно, потому что отправить данные пока нельзя. Перед созданиемJAR-архива требуется выполнить запуск окончательного варианта приложения!
Откроем список проектов и выберем проект: puh. Нажмем правую клавишу мыши и из контекстного меню выбираем Экспортировать
В следующем окне выбираем: Java, Runnable JAR file и нажимаем кнопку Далее (см. рис. 4.30):
Рис. 4.30
В следующем окне выбираем проект: prog-puhуказываем путь и имя создаваемогоJAR-архива:c:\puh.jar. Настройку Library handlingустанавливаем в среднее положение и нажимаем кнопку Готово.(см. рис. 4.31):
Рис. 4.31
Последнее окно сообщает об окончании экспортирования –нажимаем на кнопкуОК.
В корне диска c:\ должен появитьсяJAR-архив puh.jar (см. рис. 4.32):
Рис. 4.32
Далее переходим в папкуc:\Program Files и создаем внутри папку puh, помещаем внутрь этой папки файл puh.jar.
Переходим на Рабочий стол и создаем новый ярлык(нажимаем правую клавишу мыши, из контекстного меню выбираем: Создать, Ярлык, далее выбираем наш JAR-архив, вводим имя ярлыка: puh и нажимаем кнопкуГотово). НаРабочем столе появился ярлык для запуска приложения (см. рис. 4.33)
Рис. 4.33
Итог занятия:На этом занятии мы:• рассмотрели проект "Винни-Пух и компания";• разделили проект на два основных блока: клиентская часть на Java, серверная часть на PHP;• реализовали клиентскую составляющую проекта на Java.
