- •Занятие 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
- •Заключение
- •Постановка задачи(логическое описание проекта):
- •Техническое описание проекта:
Установка среды разработки Eclipse для php
После установки Денвера–перейдем к установке среды разработки для написания программного кода на языке PHP.
Мы будем использовать среду разработки Eclipse дляPHP. На момент создания данного методического пособия официальный сайт находился по адресу: http://www.eclipse.org (оригинальная версия среды Eclipse дляPHP ирусификаторбыли получены по этому адресу).
Существуют различные варианты среды разработки Eclipse, которые позволяют писать программы на различных языках: Java, PHP, C/C++.
Eclipse содержит много вложенных друг в друга папок, поэтому лучше всего размещать его в корне диска "С"!
После извлечения из архива, появится папка eclipsePHP(см. рис. 1.9):
Рис. 1.9
Внутри полученной папки–файл eclipse.exe отвечает за запуск среды разработки
Рекомендация!!!Для удобства запуска среды разработки можно создать ярлык на "Рабочем столе". Название ярлыка желательно сделать EclipsePHP, чтобы не было путаницы с другими версиями Eclipse.
Выполним первый запуск среды разработки файлом eclipse.exeили ярлыком на"Рабочем столе" –появляется заставка (см. рис. 1.10)
Рис. 1.10
Если при запуске появляется окно для указания папки проектов, то лучше в конце предлагаемого пути добавить три буквы PHPи установить галочку в левой части. (см. рис. 1.11):
Рис. 1.11
Нужно это для того, чтобы проекты PHP размещались в отдельной папке, если на компьютере установлен еще и другой вариант Eclipse.Появившееся окно приветствия можно закрыть (см. рис. 1.12):
Рис. 1.12
После этих действий откроется знакомый интерфейс Eclipse, напоминающий среду разработки Eclipse дляJava.
Создание и запуск веб-проекта php
Перед созданием нового проекта или для работы с готовым проектом необходимо запустить Денвер (если он еще не запущен)!
При запущенном Денвере в списке дисков - появляется новый(виртуальный) диск под буквой, указанной при установке (в нашем случае - Z).Открыв окно "Мой компьютер",можно в этом убедиться (см.рис. 1.13):
Рис. 1.13
Перейдем на виртуальный диск и откроем папку: home (см.рис. 1.14)
Рис. 1.14
Именно внутри папкиhome будут находиться наши сайты! Создадим новый сайт,а другими словами,новую папку. Назовем папку: test_php
Внимание!!!Если Денвер не запущен, то виртуальный диск отсутствует в списке дисков! При запуске/останове Денвера – виртуальный диск появляется/исчезает.
Далее заходим в созданную папку: test_phpи внутри нее создаём папку: www.
Все файлы нашего сайта буду находиться в папке: www.Название папки с сайтом может задаваться произвольно (вместо test_php можно указать другое название, например: p123), а название папки внутри нее должно быть именно: www.
Название папки с фалами сайта никак не связано с доменным именем сайта (доменное имя –это то, что мы указываем в адресной строке браузера, например –1c.ru). Поэтому можно использовать произвольное название из латинских букв, цифр и символа нижнего подчеркивания.
После создания папок требуется выполнить перезапуск Денвера(используем соответствующий ярлык на рабочем столе)!!!
Внимание!!!Если Денвер не удается перезапустить ярлыком Restart Denwer, то можно попробовать выполнить остановку Денвера ярлыком Stop Denwer и после этого осуществить запуск Денвера ярлыком Start Denwer.
Теперь, когда папки созданы, и Денвер перезапущен –возвращаемся в Eclipseдля PHP. Далее создадим новый PHP-проект. Для этого сверху в меню слева нажимаем: Файл, Создать, PHP Project (см. рис.1.15):
Рис. 1.15
В появившемся окне указываем имя проекта – оно должно совпадать с именем созданной папки:test_php. Переключатель необходимо поместить в нижнее положение и нажать кнопку: Browse… для выбора папки. В появившемся окне необходимо выбрать папку www,внутри папки test_php. Далее установить галочку для использования JavaScript и нажать кнопкуГотово (см. рис. 1.16).
Рис. 1.16
Слева, в списке проектов,должен появиться новый проект (см. рис. 1.17).
Рис. 1.17
Теперь осталось добавить к проекту файл PHP. Нажимаем мышью на новый проект,выбираем его, нажимаем правую клавишу мыши и выбираем New, PHP File (см. рис. 1.18).
Рис. 1.18
Файлы с программным кодом на языке PHP имеют расширение: php. Файл: index.php является главным файлом веб-приложения, который запускается по-умолчанию. Поэтому имя создаваемого нами файла должно быть именно: index.php. В открывшемся окне укажем именно это имя и нажмем кнопку Готово.
На этом создание нового(пока пустого) проекта можно считать законченным. Напишем его программный код для пробного запуска. Удалим все, что сейчас находится в файле index.php и начнем писать программный код "с чистого листа".
Язык программирования PHPимеет много общего с языком Java, синтаксис этих языков основан на синтаксисе языка С(Си). Принципы создания программ также похожи, поэтому язык PHP не придется изучать как совершенно новый. При обладании навыками программирования на языке Java–можно очень быстро начать писать программы и на PHP.Первое основное отличие, которое бросается в глаза –это"мягкая" типизация переменных. Это значит, что тип переменной указывать не нужно, и переменная может хранить значения разных типов. Второе отличие –это символ доллара ($), который всегда указывается перед именем переменной. Вот как выглядят эти отличия в программном коде:
$val = 100;
$val = 10.01;
$val = "Hello!";
Обратите внимание, что всегда перед именем переменной: val стоит символ доллара. При каждом последующем обращении к переменной - в нее записываются данные другого типа. Тип переменной нигде не указывается, даже при первом обращении к ней. В языке PHP тип переменной изменяется автоматически, в зависимости от типа значения, помещенного в эту переменную.
Содержимое веб-страницы состоит из HTML тегов, внутри PHP страницы могут располагаться HTML-теги. Работа с ними происходит так же, как и в HTML-странице.Поэтому первое, что мы добавим на нашу страницу: index.php–это следующий HTML-код:
<html>
<body>
Hello!
</body>
</html>
Как и в Eclipse для Java, в Eclipseдля PHP присутствует подсветка кода. Эта подсветка поддерживает PHP, HTML, CSS. Вспомним:для явного вызова окна подсветки кода необходимо нажать комбинацию клавиш<Ctrl+Пробел>!!! Это стандартная комбинация, которая используется для этих целей в различных средах разработки. При вводе программного кода рекомендуется максимально использовать подсветку кода:это поможет избежать лишних ошибок и увеличит скорость ввода!
Обратите внимание, после того как вы введете этот код, сверху названия файла появится –звездочка (*) (см. рис.1.19)
Рис. 1.19
Это означает, что последние изменения в проекте не сохранены. Сохраним наш проект, (нажмем наСохранить всё, см. рис.1.20).
Рис. 1.20
При этом сохраняются сразу все измененные файлы проекта.
Внимание!!!После внесения изменений в файлы проекта не забывайте выполнить сохранение проекта при помощи Сохранить все. Иначе при запуске проекта вы можете не увидеть внесенный изменений!
В нашем файле: index.php находится пять строчек кода –это HTML-теги. Тег body –это тело HTML-документа, все, что внутри тегаbody –браузер выведет на экран. В нашем случае –это будет текст: "Hello!".
Теперь необходимо запустить наш веб-проект, а другими словами наш сайт. Для этого свернем Eclipse для PHP и откроем браузер. В адресной строке браузера введем адрес нашего проекта: http://test_php(см. рис. 1.21).
Рис. 1.21
Появилась надпись:Hello! на экране браузера.
Таким образом, для запуска проекта –необходимо открыть браузер и в адресной строке указать http://и имя папки, которую вы создали внутри папки: homeна виртуальном диске. Откроем окно "Мой компьютер" и перейдем в папкуhome, далее в папку test_phpи далее в папку www.Здесь мы увидим файл index.php - PHP файл с HTML тегами. (см.рис. 1.22)
Рис. 1.22
Если его открыть в приложении "Блокнот", то можно будет увидеть тот же текст из наших HTML –тегов. Остальное содержимое в этой папке создала среда разработки Eclipse для PHP. При вводе в адресной строке браузера адреса: http://test_phpпроисходит обращение к папке, внутри которой мы сейчас находимся. Так как файлindex.php являетсяосновным, то именно он автоматически открывается в браузере.
После просмотра текущего результата в браузере –свернем браузер, но не будем закрывать его! После того, как мы внесем изменения в наш проект и сохраним его в новом виде –мы снова развернем окно браузера и нажмем клавишу: F5.Клавиша F5обновляет страницу,следовательно, мы увидим новый результат.
Мы рассмотрели весь процесс от начала установки средств для веб-разработки и среды разработки до создания веб-проекта и его запуска. Можно сказать, что мы создали новый сайт.Содержимое нашего сайта пока минимально,но начало - положено!
