- •Занятие 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, PHP, JavaScriptи дополнительных технологий: HTML, CSS, SQL.
В течение курса мы познакомимся с основами создания динамических сайтов и создадим проект под названием "Винни-Пух и компания". Проект будет состоять из двух основных частей:клиентской и серверной. Серверная часть является веб-сайтом, а клиентская часть приложением для настольной операционной системы.
Программисту Java часто требуется использование дополнительных технологий.При работе с базами данных, применяется язык запросов SQL; при верстке веб-страницы применяются HTMLи CSS; для взаимодействия с пользователем в браузере используется язык JavaScript. При использовании баз данных и создании веб-страниц также требуются дополнительные технологии!
Для создания серверной части будет использоваться язык PHP. Язык по своему синтаксису похож на Java. Язык PHPявляется классическим для веб-разработки.Веб-разработка на этом языке происходит проще и понятнее, чем на Java. Кроме того,большинство сайтов созданы с использованием PHP.
Ситуация в программировании обстоит так, что нет одного языка программирования на котором можно создать абсолютно все! Например, при разработке для операционных систем MacOS, iOSиспользуется специальный языкObjective-C.
Несмотря на большое количество языков программирования –есть один большой положительный момент: большинство из них созданы на базе синтаксиса языка C(Си). Поэтому переучиваться с самого начала не требуется! К таким языкам относятся: С,C++,C#, Java, PHP, JavaScriptи другие. На примере использования языка программирования PHP, вы сможете почувствовать ситуацию,когда в дополнение к Javaиспользуется другой язык с почти таким же синтаксисом. Это позволит быть готовым к использованию других языков для решения отдельных задач. А также почувствовать в себе уверенность, чтоJava-программисту не страшны такие языки как JavaScriptили PHP.
Для создания клиентской части будет использоваться Java. Знания Java помогут реализовать клиентскую часть и помогут при написании кода на PHPиJavaScript.
Данный курс позволит вам почувствовать себя более продвинутым программистом, который использует различные технологии программирования для решения конкретной задачи!
Занятие 1. "Быстрый старт: организация рабочего места веб-разработчика. Создание и запуск первого проекта"
На этом занятии мы познакомимся с таким языком программирования как PHP: -установим пакет для веб-разработки; -установим среду разработки Eclipse для PHP; -создадим и запустим первый веб-проект на PHP
На этом занятии мы начнём изучать такой язык программирования какPHP, поговорим о его основных особенностях, установим среду разработки для PHPи напишем первые программы с использованием этого языка. Язык программирования PHPизначально назывался как Personal Home Page Tools–инструменты для создания персональных web-страниц. Это язык предназначен для веб-разработки,веб-программирования. Огромное количество сайтов создаётся при помощи этого языка веб-программирования,большинство проектов создано именно с использованием этого языка.
Для того чтобы начать создавать сайты, необходимы три составляющие:
Веб-сервер Apache.Веб-сервер –это программа. Не стоит её представлять в виде компьютера. Это именно программа,которая позволяет запустить веб-проект,чтобы увидеть результат его выполнения в браузере.
Интерпретатор PHP.Позволяет запускать, выполнять программный код PHP. Программный код,который вводится в среде разработки, при помощи интерпретатора можно обработать и выполнить.
Система управления базами данныхMySQL. MySQL –это база данных, которая будет использоваться для хранения данных сайта.
Установка и настройка пакета Denwer
Чтобы облегчить установку этих трёх составляющих:воспользуемся пакетом под названием Denwer (Джентльменский наборWeb-разработчика).
На момент создания данного методического пособия официальный сайт находился по адресу: http://www.denwer.ru (оригинальная версия пакетаDenwer была получена по этому адресу).
Приступим к установке пакета Denwer (откуда брать пакет установки–подскажет учитель).
Запускаем файл Denwer.exe.Начинается процесс установки. Отвечаем"Да" на появившийся вопрос (см. рис. 1.1):
Рис.
1.1
Далее автоматически откроется окно браузера –закрываем его для продолжения установки! И нажимаем клавишуEnter (см. рис. 1.2)
Рис. 1.2
Теперь предлагается ввести путь для установки пакета, можно оставить путь, который предлагается по умолчанию c:\webservers1 (см.рис. 1.3).
Рис. 1.3
На следующем шаге нас просят подтвердить установку в выбранную директорию –вводим: y (да) (см. рис.1.4)
Рис. 1.4
Снова нажимаем клавишуEnter. На следующем этапе следует указать букву для виртуального диска, допустим, вводим:Z (см. рис. 1.5)
Рис. 1.5
В качестве буквы для виртуального диска обязательно нужно выбрать свободную букву. Для проверки, вы можете открыть список всех дисков через"Мой компьютер". Если буквой Z уже обозначен какой-либо диск, выбирайте другую букву,например: S или W!!!
Снова нажимаем Enter.Начнется процесс копирования файлов. На следующем шаге выбираем второй вариант установки –вводим цифру: 2, в этом случае пакет Denwer не будет автоматически запускаться при загрузке операционной системы Windows. Мы будем запускать его самостоятельно, когда в этом будет потребность (см. рис. 1.6).
Рис. 1.6
Если бы мы выбрали вариант 1, то пакет запускался бы автоматически с загрузкой Windows, даже если он нам не нужен. А это лишняя нагрузка на оперативную память.
На последнем шаге подтверждаем создание ярлыков на "Рабочем столе", вводим: "y" .
При завершении установки –автоматически откроется окно браузера с сообщением об успешной установке.
Наши веб-проекты изначально будут разрабатываться на локальном компьютере. В дальнейшем,когда веб-проект уже будет закончен, его можно будет перенести на веб-хостинг и сделать доступным для всех пользователей. Для процесса разработки не обязательно даже иметь доступ в интернет. Сайт будет располагаться на рабочем компьютере, который будет выступать в роли веб-сервера.
После установки Денвера на "Рабочем столе" появятся три ярлыка с "пёрышком":Start Denwer, Stop Denwer, Restart Denwer (см.рис. 1.7).
Рис. 1.7
Каждый из них запускает,останавливает и перезапускает Денвер соответственно. Выполним запуск Денвера -ярлык Start Denwer. В процессе запуска появятся консольные окна,после их автоматического закрытия Денвер будет запущен. Это означает, что три основных составляющих пакета: веб-серверApache, интерпретатор PHP и MySQL –готовы к работе.
Откроем браузер и в адресной строке введем: localhost. Перейдем по этому адресу.
Внимание!!!Для работы с пакетом Денвер и разработке веб-проекта рекомендуется использовать такие браузеры как Google Chrome или Mozilla Firefox. При работе с браузером Internet Explorer (особенно старых версий) могут возникать проблемы. В случае возникновения непредвиденных проблем – попробуйте проделать то же действие, но в другом браузере.
Если Денвер установлен и запущен правильно, то должно открыться окно с надписью: "Ура, заработало!" (см. рис.1.8) Закроем это окно.
Рис. 1.8
