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

Настройка базы данных

Задача данного этапа – создать базу данных MySQL, которая будет использоваться в работе веб-приложения. У MySQL есть собственный интерфейс для организации взаимодействия с клиентами, с помощью которого можно перемещать данные и изменять параметры базы данных. Назначение пользователей базы данных позволяет ограничить круг пользователей, обладающих правом доступа к таблицам на сервере. Каждый сервер MySQL может содержать несколько баз данных, где группируются таблицы. Веб-приложения, работающие на стороне сервера, могут использовать как свои собственные или как единую. Общую для всех приложений базу данных [2]. Чтобы подключиться к базе данных с целью ее использования, нужно знать:

·  IP-адрес сервера баз данных;

·  Имя базы данных;

·  Имя пользователя;

·  Пароль

Один из способов взаимодействия с MySQL основан на использовании клиента командной строки MySQL. Чтобы запустить режим командной строки, нужно найти исполняемый файл. В нашем случае он находится по адресу:

G:\usr\local\mysql-5.1\bin. Запустив файл mysql_run_to_import_dumps.exe, появится ожидание команды вода (mysql>).

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

Рис. 4 Создание базы данных для веб-приложения

Рассмотрим подробнее каждую команду:

mysql> CREATE DATABASE phpweb20d; - данная команда создает базу данных под названием «phpweb20d»;

mysql> use phpweb20d – переход к использованию указанной базы данных;

grant all on phpweb20d.* to phpweb20d@localhost identified by 'diplom'; - данная команда создает учетную запись пользователя phpweb20d. Ему присваиваются все права на указанную базу данных и пароль «diplom».

Установка библиотеки Zend Framework

Zend Framework представляет собой библиотеку компонентов PHP5 с открытым кодом, которую можно использовать для решения повседневных задач веб-программирования. Мы будем использовать эту библиотеку для создания веб-приложения. Поскольку она позволяет сосредоточиться на реализации возможностей web 2.0. Рассмотрим некоторые компоненты:

·  Zend_Auth и Zend_Acl – используется для идентификации пользователей и проверки уровня их доступа.

·  Zend_Controller – используется для обработки запросов клиентов и перенаправления запросов в соответствующие классы.

·  Zend_Db – используются для связи с MyAQL-базой данных приложения

·  Zend_Mail – используется для рассылки пользователям сообщений электронной почты.

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

·  Zend_Search – используется для полнотекстового поиска.

Для того, чтобы использовать данную библиотеку для создания приложения, нужно скачать с официального сайта (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> отформатируйте текст по образцу.

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