Дипломная работа: Методика обучения технологии web 2.0 на примере создания школьного сайта спортивной тематики

Для того, чтобы использовать данную библиотеку для создания приложения, нужно скачать с официального сайта (http://framework.zend.com/) установочный пакет и скопировать папку Zend в каталог include нашего веб приложения. Поскольку в файле конфигурации уже прописан путь до каталога include, в дальнейшем можно обращаться к компонентам библиотеки следующим образом: require_once('Zend/имя_файла.php');

Установка системы управления шаблонами

Для того, чтобы веб-приложение позволяло генерировать страницы на основании шаблонов, нужно установить систему управления шаблонами. Для этих целей мы будем использовать

Smarty Template Engine – систему управления шаблонами, написанную для PHP, которая позволяет легко отделять вывод данных и визуальную презентацию от внутренних операций приложения. Все, что увидит пользователь на экране, содержится в файле шаблона (.tpl). После обработки запроса пользователя, этот файл будет выведен на экран через посредничество системы Smarty. Файл шаблона состоит из последовательности текстовых заменителей, используемых для динамического вывода веб-контента.

Код системы Smarty можно загрузить с официального сайта (http://www.smarty.net/). Далее нужно скопировать содержимое папки libs в подкаталог Smarty каталога include.

Чтобы пользоваться системой Smarty, необходимо сконфигурировать следующие свойства каждого созданного объекта Smarty:

·  Значение template_dir задает местонахождение всех шаблонов приложения. Ранее, при создании структуры каталогов приложения и файла его рабочих настроек, в качестве этого каталога был указан G:\home\localhost\www\phpweb20\templates

·  Значение compile_dir задает каталог, в который система Smarty будет помещать скомпилированные шаблоны.

Поскольку в шаблонах используется собственный метаязык, каждый такой шаблон компилируется в код PHP для ускорения последующего выполнения.

При каждом изменении файла шаблона система автоматически перекомпилирует его и помещает в этот каталог. Каталог compile_dir должен быть доступен для записи веб-серверу. Для этой цели будем использовать каталог: G:\home\localhost\www\phpweb20\data\tmp\templates_c

Далее, с целью программной реализации настроек, мы последовательно создаем файлы, код которых находится в приложении 2 (листинг1.1 – 1.10). Результатом реализации данного программного кода является главная страница сайта, которая автоматически создается по шаблону.

Таким образом, в этом параграфе мы начали непосредственную разработку веб-приложения. Настроив рабочую среду, мы создали структуру приложения: разместили файлы в системе каталогов, задали общие настройки и параметры соединения с базой данных, подключили обработку запросов, настроили вывод веб-страниц с помощью системы Smarty.

Рис. 5 Главная страница будущего веб-приложения

2.2 Учетные записи и личные страницы пользователей. Реализация средств web 2.0

В данном параграфе мы добавим в приложение средства аутентификации и авторизации пользователей с помощью компонента Zend_Auth из библиотеки Zend Framework. В числе этих средств – таблицы базы данных для хранения информации о пользователях. План работы по данному направлению разработки веб-приложения выглядит следующим образом:

1.  Создание таблицы пользователей в базе данных

2.  Программная реализация аутентификации пользователей

3.  Регистрация, вход и выход пользователей

Создание таблицы пользователей в базе данных

Поскольку в приложении предусмотрено хранение учетных записей множества пользователей, данные записи надо привести к организованной структуре. Для этого создадим таблицу базы данных под названием users. Каждая запись таблицы соответствует одному пользователю и содержит информацию о пользователе. Для каждого пользователя в базе данных будут храниться следующие ключевые параметры:

·  User_id – целое число, используемое для внутреннего представления пользователя, его идентификационный номер;

·  Username – уникальный буквенный идентификатор пользователя, используемый для входа на сайт. Это имя будет публичным – оно отображается в записях блога и других видах общедоступного контента сайта вместо настоящих имен, которые пользователи обычно скрывают;

·  Password – строка символов, по которой выполняется аутентификация пользователя.

·  User_type – строка, обозначающая классификацию пользователя по системе типов и категорий (администратор, пользователь или гость).

Поскольку таблица users не содержит никакой информации о самих пользователях, то для хранения этой информации нужно создать еще одну таблицу. Она будет называется users_profile. Вводя новую таблицу для хранения информации о пользователях, мы получаем возможность ее неограниченно расширять, не затрагивая таблицу users. Каждая запись в такой таблице будет соответствовать одному значению одного параметра пользовательского профиля. Таблица будет иметь три столбца:

·  User_id – ссылка на пользователя, то есть запись в таблице users;

·  Profile_key – имя параметра, который хранится в данной записи;

·  Profile_value – значение параметра. Если значение поля Profile_key равно e-mail, текущее поле будет содержать сам адрес.

Для создания двух связанных таблиц, нужно использовать команды SQL, приведенные на рис.6.

Прокомментируем каждую команду:

·  Use phpweb20 – обратить к базе данных phpweb20; create table users – создать таблицу users, аналогично создается таблица users_profile; user_id serial not null – устанавливает тип serial для поля user_id. Это счетчик, который автоматически будет меняться для каждой записи данного поля, не может быть пустым; Username varchar(255) not null – поле username может иметь до 255 символов в длину. Поля password и user_type будут иметь длину 32 и 20 символов соответственно.

Рис. 5 Команды sql для создания двух связанных таблиц

·  primary key (user_id) – поле user_id является ключевым

·  unique (username) – поле username уникальное, то есть его значения для разных пользователей не могут повторяться.

·  type = InnoDB – тип таблицы определен таким образом, чтобы была возможность создавать реляционные связи по внешним ключам.

·  primary key (user_id, profile_key) – поля user_id, profile_key уникальны.

·  foreign key (user_id) references users (user_id) – данная таблица связана с таблицей users по ключевому полю user_id

Программная реализация аутентификации пользователей

Для аутентификации пользователей, то есть проверке вводимых им регистрационных данных используется программный компонент Zend_Auth библиотеки Zend FrameWork. Чтобы пользователь прошел аутентификацию, он должен предоставить контрольную информацию. В нашем случае такой информацией является поле password таблицы users. Проверка идентификационных данных и контрольной информации путем сравнения их с информацией из базы данных выполняется адаптером. Чтобы подключить данный компонент, мы последовательно набираем программный код, находящийся в листингах 2.1 – 2. 3 (приложение 2).

Регистрация, вход и выход пользователей

Реализация процесса регистрации нового пользователя на сайте состоит из следующих этапов: добавление средств навигации по сайту, чтобы пользователь мог найти регистрационную форму; отображение регистрационной формы; получение от пользователя его идентификационных данных и проверка их корректности; вывод сообщений об ошибках; сохранение записи в базе данных, отправка пользователю почтового сообщения, отображение страницы подтверждения регистрации.

Порядок написания программного кода для реализации данных функций веб-приложения следующая:

1.  Создание класса функций, отвечающего за обработку регистрационных форм UserRegistration.php(листинг 2.4)

2.  Создание шаблонов для страниц, связанных с регистрацией пользователей (листинг 2.5 – 2.6) Использование обработчика для входа пользователя на сайт AccountController.php.

Рис. 6 Форма для регистрации

Рис. 7 Форма для входа на сайт

Рис. 8 Приветствие вошедшего пользователя

Реализация средств web 2.0.

Реализация средств web 2.0 подробно описана в книге К. Зевраса «Web 2.0: создание приложений на PHP» в главах 8-10. Для создания системы блогов мы последовательно используем приведенный в книге код, не внося в него изменений. Главное, что нужно знать учащимся – это технологии, использование которых дает возможность создавать веб 2.0 – приложения:

· Prototype – библиотека кода JavaScript, которая упрощает написание кода на языке JavaScript, предлагая удобные средства межплатформенной разработки.

· Scriptaculous – библиотека кода JavaScript, предназначенная для создания спецэффектов и улучшения пользовательского интерфейса веб-сайтов. Эта библиотека основывается на средствах Prototype.

Основная самостоятельная работа будет осуществляться учащимися в области оформления web-приложения. Данной теме посвящен следующий параграф.    

2.3 Визуальная стилистика web-приложения. Методика преподавания языковых стандартов разметки гипертекста в школе

В отличие от программирования на языках PHP и JavaScript, а также создания баз данных и запросов к ним, языковые стандарты разметки гипертекста HTML и CSS являются, на наш взгляд, наиболее доступной для понимания школьников темой и способствуют реализации творческих способностей учеников. Если большая часть программного кода созданного приложения предполагает его копирование и пользование готовыми библиотеками, то визуальное оформление учащиеся способны сделать самостоятельно и, в зависимости от мотивации, весьма интересное и качественное. Применительно к теме нашей дипломной работы, создание визуального оформления веб-приложения не будет отличаться от оформления обычных html-страниц. Для стандартных элементов оформления нужно прописать код на языке CSS, задающий стиль этих элементов. Поэтому в данном параграфе мы выложим все задания по теме «Гипертекстовое представление информации», которые применялись мною на уроках информатике в 9 классе.

Практическая работа №1 «Создание html-страниц. Простейшие средства оформления»

Задание 1

Создайте html-страницу

1.  Имеющую заголовок «Лабораторная работа №1. <Фамилия, Имя. Класс>»

2.  Цветной фон (выбрать любой цвет)

Задание 2

1.  На созданной странице разместите следующее стихотворение “колыбельная” из приложения 3:

2.  Оформите текст следующим образом:

Ø  Заголовок выровнен по центру, четверостишья - по левому краю, авторство - по правому;

Ø  Каждый абзац написан различным шрифтом, цветом и размером.

Ø  Заголовок по размеру больше остального текста и имеет жирное начертание

Ø  Авторство написано курсивом

Ø  Все компьютерные термины подчеркнуты.

Задание 3

Создайте html-страницу с именем Page2.html, имеющую

1.  заголовок «Лабораторная работа №1. <Фамилия, Имя. Класс>»

2.  цветной фон (выбрать любой цвет)

На созданной странице разместите следующую классификацию ЛВС из приложения 3 и оформите ее по образцу

Задание 4

1. Откройте документ Page2.html

1.  Вставьте в этот документ «синий» текст ниже «классификации компьютерных сетей» и выполните задания:

1)  С помощью тэгов <p>, <br> и <ul>список</ul> отформатируйте текст по образцу.

2)  Вставьте картинки из папки images в те места, где стоит соответствующая метка

3)  Вернитесь к пункту классификации «По типу сетевой топологии ». Сделайте так, чтобы каждый пункт списка (шина, звезда и т.д.) являлся ссылкой на соответствующее место в документе

4)  * Измените начертание, размер и цвет текста «по вкусу»

Практическая работа №2

«Создание таблиц с помощью языка html»

Справочный материал

1. ТЭГИ

<table> - начало таблицы

Содержимое таблицы

</table> - конец таблицы

<tr> - начало строки

Содержимое

</tr> - конец строки

<td> - начало столбца

Содержимое ячейки

</td> - конец столбца

Пример

Написать код для создания таблицы, состоящей из 2 строк и 2 столбцов

 <table>

<tr> <!-- первая строкà

<td> 1 </td>

<td> 2 </td>

</tr>

<tr> <!-- вторая строкаà

<td> 3 </td>

<td> 4 </td>

</tr>

</table>

1.  АТРИБУТЫ ТЭГОВ

<table>

1) Размеры

width = “ширина таблицы”

height = “высота таблицы”

2) Отступы

cellspasing = “расстояние между ячейками”

cellspadding = “отступ от границ ячейки внутри нее”

3) Линии

border = “толщина линии рамки”  bordercolor = “цвет линии рамки”

4) Заливка ячеек

bgcolor = “цвет заливки ячейки”

background = “фоновая картинка для таблицы”

5) Выравнивание

align = “выравнивание содержимого таблицы по горизонтали”

valign = “выравнивание содержимого таблицы по вертикали”

1. Для тэгов <tr> и <td> применимы те же атрибуты, кроме №2 и №3, НО относится они будут исключительно к содержимому строки (<tr>) и конкретной ячейки (<td>)

2. Если ячейка ничего не содержит, то между тэгами, обозначающими ячейку, нужно вставить специальный код &nbsp;

<td> &nbsp; </td>

6) Объединение строчек

Rowspan= “количество ячеек”

7) Объединение столбцов

Colspan = “количество ячеек”

Задание №1

1. Откройте файл page3.html

2. Используя рассмотренный ранее материал, создайте таблицу по образцу

Этапы выполнения задания:

1.  Создайте таблицу, состоящую из 9 строчек и 6 столбцов. Пронумеруйте ячейки следующим образом.

2. Задайте для тэга <table> следующие атрибуты:

Страницы: 1, 2, 3, 4, 5, 6