- •Занятие 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
- •Заключение
- •Постановка задачи(логическое описание проекта):
- •Техническое описание проекта:
Добавление php кода к веб-проекту
Web-страница может содержать только HTML-теги без программного кода на языке PHP. Другими словами,содержимое HTML документа можно полностью вставить в PHP-файл и при запуске такой страницы мы увидим то же самое, что и при отображении HTML-страницы. Но в страницу PHP–можно добавить программный код PHP и при помощи него заложить некоторый алгоритм при отображении страницы. Например, можно сделать так, что с 6 утра до 18 вечера фон страницы будет зеленый, а остальное время–красный. При помощи одного только HTML - такое сделать нельзя.
Программный код PHPвставляется при помощи тегов:
<?php ?>
Внутри таких тегов записывается программный код PHP. Добавим эти теги вместо надписи Hello!нашего HTML – кода:
<html>
<body>
<?php
?>
</body>
</html>
Внутри этих тегов запишем программный код на PHP, который десять раз выводит ту же самую надпись в цикле:
<html>
<body>
<?php
for ($i=0;$i<10;$i++)
{
echo "Hello!";
}
?>
</body>
</html>
Мы использовали циклfor, запись которого не отличается от языка Java. Принцип его работы точно такой же. Но в программном коде видны два отличия: перед именем переменной всегда ставится знак $ (доллар) и тип переменной не указывается. Командаecho выводит на веб-страницу то, что указано в двойных кавычках. Давайте сохраним проект,перейдем в браузер и нажмем клавишу F5 для обновления страницы. Мы увидим результат вывода надписи десять раз в подряд (см. рис. 1.23).
Рис. 1.23
Наведем курсор в центр страницы (в браузере) и нажмем правую клавишу мыши, откроется меню. В этом меню необходимо выбрать пункт Просмотр кода страницы. В разных браузерах вид данного меню будет отличаться и название пункта тоже!Например, данный пункт меню может называться: "Просмотр HTML-кода". При выборе данного пункта откроетсяHTML-код данной страницы, и мы увидим следующее (см. рис. 1.24)
Рис. 1.24
Страница index.phpв браузер была загружена виде HTML-кода, изображенного на рисунке 24. Все теги HTML остались без изменения, а вместо вставки кода PHP (с циклом) мы видим вставленную десять раз подряд надпись Hello! Другими словами, вместо PHP-кода вставился результат его выполнения.
Теперь вернемся в Eclipse и кое-что изменим в нашем программном коде.Заменим строку с командой echoна следующий вариант:
<html>
<body>
<?php
for ($i=0;$i<10;$i++)
{
echo "Hello!{$i}<br/>";
}
?>
</body>
</html>
Cохраним проект,перейдем в браузер, и нажмем клавишу F5 для обновления страницы. Мы видим результат вывода (см. рис. 1.25).
Рис. 1.25
Теперь каждая надпись выводится с новой строки и в конце надписи находится цифра, возрастающая на единицу.Это получилось благодаря тому, что после надписи Hello! мы добавили следующее: {$i}<br/>.
Тег <br/>- это перевод на следующую строку. Этот тег не имеет закрывающего тега–он является сразу и открывающим и закрывающим тегом. У таких тегов после его имени стоит наклонная черта (/): (например, <br/>). Конструкция:{$i} –это вставка внутрь строки в двойных кавычках значения переменной $i.На каждом шаге цикла значение переменной увеличивается, поэтому каждый раз будет подставляться новое значение. При помощи фигурных скобок можно вставлять значения переменных внутрь строки!
При помощи командыecho можно выводить текст, значения переменных иHTML-теги на веб-страницу. Из языка PHP можно манипулировать HTML-тегами. Например,вывести в цикле сто HTML-таблиц.
Рассмотрим схему работы веб-страницы, написанной на PHP. Допустим,наш сайт состоит всего из одной страницы:index.php.Пользователь вводит в адресной строке браузера адрес нашего сайта, происходит обращение к нашему сайту, запускается страница index.php. Данная страница выполняется(выполняется ее PHP-код), а результат выполнения передается в браузер пользователя в виде HTML-кода. Другими словами, пользователь может увидеть только результат, но у него нет доступа к PHP-коду.HTML-код пользователь cможет посмотреть у себя в браузере (как мы это делали выше).Программный код PHP доступен только разработчику веб-страницы, у которого есть доступ к файлу index.php. Обработка, исполнение программного кода PHP происходит при помощи интерпретатора PHP, который был установлен вместе с пакетом Денвер.
Итак, на этом занятии:Мы выяснили:• познакомились с языком программирования PHP;• рассмотрели несколько отличий от языка Java;• настроили рабочее место веб-разработчика;• создали и запустили первый веб-проект.
1Можно указать любой другой путь.
