- •Занятие 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
- •Заключение
- •Постановка задачи(логическое описание проекта):
- •Техническое описание проекта:
Работа с MySql изPhp
При установке пакетаДенвер–устанавливаются сразу три компоненты:
Веб-сервер Apache, благодаря которому мы можем запустить наш сайт через браузер.
Интерпретатор PHP, благодаря которому выполняется наш программный код PHP.
MySQL –система управления базами данных, которую пока мы не задействовали в нашем проекте.
С MySQLмы знакомились при изучении работы с базами данных из Java. Для простоты установки мы также использовали пакетДенвер. По этой причине все знания по MySQLимеют силу и при создании данного проекта. Отличие будет только в том, что на этот раз работать с MySQL мы будем из PHP.
Вспомним, что MySQL –этосистема управления базами данных (СУБД), которая очень часто используется при создании динамических веб-сайтов. MySQLявляется бесплатным решением, но несмотря на это обладает большим возможностями.
При разработке сайта на локальном компьютере –MySQLтакже устанавливается на локальном компьютере.При переносе готового сайта на какой-либо хостинг – база данных сайта также переносится. Обычно все данные сайта хранятся в базе данных. С одной стороны –это удобно, с другой стороны –это позволяет одновременно многим пользователям работать с сайтом. Различные текстовые статьи, информация о пользователях сайта,переписка пользователей и многое другое хранится в базе данных.
Для работы с MySQL необходим запущенный Денвер. На соседней закладке браузера введем адрес http://localhostи нажмем клавишу Enter. Должна открыться страница с надписью: Ура,заработало! (см. рис. 5.19):
Рис. 5.19
Для работы с MySQL мы будем использовать интерфейс под названиемPHPMyAdmin. Он разработан на языке PHP для удобной работы с MySQL. Именно этот интерфейс был использован при работе сMySQL и Java в предыдущем модуле.
В данном окне (см. рис. 19) необходимо прокрутить страницу вниз до таблицы с двумя колонками: URLи Описание.В таблице нужно найти ссылку с надписью PHPMyAdminи перейти по ней (см. рис.5.20):
Рис. 5.20
В результате откроется:PHPMyAdmin (см. рис. 5.21):
Рис. 5.21
Данный интерфейс позволяет работать с MySQL: создавать базы данных, таблицы базы данных, производить различные операции с данными. ИнтерфейсомPHPMyAdmin мы будем пользоваться часто –поэтому рекомендуется держать его в открытом виде на соседней с сайтом закладке браузера (см. рис.5. 22):
Рис. 5.22
Создадим базу данных для нашего сайта. Для этого нажимаем на крайнюю левую закладку Базы данных (см. рис. 5.23):
Рис. 5.23
Вводим имя базы данныхpuh и нажимаем кнопку Создать(см. рис. 5.24):
Рис. 5.24
Слева в списке должна появиться новая база данных с названиемpuh (см. рис. 5.25).
В нашу базу данных мы будем добавлять новые таблицы по мере необходимости.
Рис. 5.25
База данных состоит из таблиц, ее можно представить в виде таблицыExcel. В каждой таблице имеются колонки, которые также называются полями таблицы и имеются строки,которые также называются записями таблицы. При создании таблицы, в первую очередь нужно определить количество колонок для хранения информации о поступивших товарах.Для таких целей вполне подойдет следующая таблица (см. рис. 5.26):
Рис. 5.26
Таблица состоит из четырех колонок. В первой колонке -номер строки, во второй -номер товара, в третьей -количество товара, в четвертой -дата и время события, произошедшего с товаром (покупка/продажа).
У нас всего десять товаров и каждый имеет номер от 1 до 10. Во второй колонке вместо имени –будем просто указывать номер товара. Если во второй колонке указана цифра 1–это значит, что поступил товарМед. При отправке данных из клиентской части наJava, в таблицу будут попадать поступления товаров, но наш сайт в дальнейшем будет производить и отгрузку товаров. Поэтому, нужно отделить по какому-то признаку операцию поступления от операции отгрузки. Операцию поступления будем указывать с плюсом, а операцию отгрузки с минусом. Создадим нашу таблицу в базе данныхMySQL –для этого в PHPMyAdmin нажмем на ссылку127.0.0.1 (см. рис. 5.27):
Рис. 5.27
Далее слева в списке баз– нажмем на имя нашей базы puh (см. рис.5.28):
Рис. 5.28
Укажем имя таблицыtovar, количество колонок 4,нажмем кнопку OK (см. рис.5.29)
Рис. 5.29
После этой операции–появится новое окно, где нужно будет указать данные по каждой колонке. Присвоим следующие имена колонкам: id, naim,kol, dv(см.рис. 5.30):
Рис. 5.30
Имена колонок задаются по правилам именования переменных. Кроме этого, нужно указать тип данных, которые будут храниться в данной колонке. Типы данных выбираются из списка. Нам потребуются следующие типы:
INT (колонки id иkol)–целые числа –аналог типа int из Java.
TINYINT (колонкаnaim) –тоже целые числа, но малой размерности, так как наименование товара это числа от 1 до 10, то такой размерности вполне достаточно.
DATETIME (колонкаdv) - дата, содержащая еще и время.
Далее перемещаемся вправо до колонки A_I –это сокращение от AUTO_INCREMENT –автонумерацияНеобходимо установить галочку для колонки id –в самой верхней строке (см. рис.5.31):
Рис. 31
Автонумерация необходима для автоматического присвоения номера с увеличением на единицу, начиная с единицы. После этого нажимаем на кнопкуСохранить. Слева в списке таблиц –появится новая таблица с именем tovar, нажмем на нее (см. рис.5.32):
Рис. 5.32
В результате откроется окно с таблицей (см. рис.5.33):
Рис. 5.33
В этой таблице указана структура выбранной таблицы - список ее колонок, установка автонумерации для поляid.
Данных пока в таблице нет, поэтому строки в ней отсутствуют. Эти данные мы будем добавлять из PHP. После этого их можно будет посмотреть в интерфейсе PHPMyAdmin. Иногда бывает так, что при создании таблицы были допущены ошибки. В этом случае можно выбрать необходимую колонку и нажать Изменить (см. рис. 5.34):
Рис. 5.34
Откроется окно редактирования, в котором можно внести изменения и их сохранить (см.рис. 5.35):
Рис. 5.35
Также имеется возможность удалить колонки или добавить новые (см. рис. 5.36):
Рис. 5.36
Интерфейс PHPMyAdmin предоставляется на русском языке и не сложен в освоении.Немного практики работы с ним и все становится удобным и понятным.
Важным понятием при проектировании базы данных является–первичный ключ. Первичный ключ –это колонка или несколько колонок, которые однозначно определяют (идентифицируют)любую строку в таблице. Т.е. не может быть двух строк в таблице с одинаковым первичным ключом. В нашей таблице первичным ключом является поле id. В самом простом случае первичный ключ–это номер строки, который не повторяется и для каждый строки уникален.Чтобы назначить поле первичным ключом –выбрать его в списке и справа нажатьПервичный (см. рис. 49) В нашем случае этого делать не нужно,потому что поле id назначено первичным ключом автоматически (т.к. для него установлена автонумерация, а значит в этом поле не будет одинаковых значений). В списке колонок первичный ключ выделен серым цветом (см. рис.5.37):
Рис. 5.37
Осталось в файле tovar.php записать программный код PHP, который будет производить запись в таблицу tovar,извлекать из нее данные об остатках товаров и отправлять эту информацию клиентской части на Java.
Этим мы и займемся на следующем занятии.
Итог занятия:На этом занятии мы:• создали проект серверной части "Винни-Пух и компания";• настроили кодировку UTF-8 для проекта;• создали базу данных MySQL для веб-проекта;• изучили обработку GET-запроса из PHP.
1Подробную инструкцию по добавлениюPHP-файла к проекту можно посмотреть в первом занятии данного методического пособия
2Подробное описание перезапуска Денвера можно посмотреть в первом занятии данного методического пособия
