Дипломная работа: Методика обучения технологии 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