Практическая работа 11 Тема 6. Разработка системы администрирования Web-страниц портала (6 час)

МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Практическая работа 11
Тема 6. Разработка системы администрирования
Web-страниц портала (6 час)
Цель — освоить технологию создания системы управления контентом (CMS)
для администрирования Web-страниц электронного портала.
Задание:
1. В базе данных учебного портала создать таблицу для хранения контента
Web-страниц.
2. Создать административный интерфейс управления контентом Web-страниц.
3. Создать гостевой интерфейс с системой навигации для просмотра
существующего контента.
4. Управление meta-данными Web-страниц.
Модуль администрирования страниц Web-ресурса является одним из основных
модулей любой CMS. Администрирование включает возможность выполнения
операций
по созданию
новых
страниц,
редактированию
существующих
и удалению ненужных страниц. Часто применяют также отправку в архив
устаревших страниц с возможностью их дальнейшего просмотра в разделе Архив.
Технология выполнения
11.1. Создание таблицы для хранения контента Webстраниц
В учебных целях, чтобы в ходе работы можно было визуально проверять
работу различных функций в разрабатываемых скриптах, вначале следует
создать некоторый контент. Текстовый контент создаваемых Web-страниц будет
храниться в отдельной таблице учебной базы данных с именем content. В этой же
таблице будет храниться информация о файлах рисунков, используемых
в контенте. Сами файлы изображений будут храниться в каталоге /content_img.
В базе данных учебного Web-ресурса создать новую таблицу с именем content
со следующими полями:
ID_page — уникальный номер Web-страницы (автоинкрементное поле, ключ);
Title — название страницы (содержимое контейнера (парного тега) title
(<title></title>) генерируемой html-страницы);
Zag — заголовок страницы (содержимое контейнера h2, внутри которого будет
текст заголовка html-страницы);
Text — текст страницы (содержимое контейнера p для отображения htmlстраницы в виде одного абзаца);
Image — имя рисунка на странице (содержимое атрибута src в теге img);
Size — положение рисунка относительно текста (значение атрибута align в теге
img).
1
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Пример структуры таблицы content с типами данных представлен на рис. 11.1.
Рис. 11.1. Пример структуры таблицы content
Из структуры таблицы видно, что на каждой странице предусматривается
размещение не более одного изображения. Такие страницы обычно характерны
для каталогов товаров.
Для размещения файлов изображений, используемых в контенте web страниц,
создать каталог /content_img.
11.2. Создание административного интерфейса
управления контентом Web-страниц
Для того, чтобы можно было наполнять контентом таблицу content и каталог
/content_img, следует создать административный интерфейс для ввода данных
Web-страниц.
С этой целью в административном каталоге www/admin создать новый файл
административного интерфейса content.php, в котором в виде отдельной
функции
сформировать
форму
ввода
данных
новой
Web-страницы.
На рис. 11.2 приведен пример внешнего вида такой формы.
2
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Рис. 11.2. Пример формы ввода данных новой Web-страницы
Напомним, что выпадающий список формируется при помощи контейнера
select с набором тегов option, например следующим образом:
Положение: <select name="align" size="1">
<option value="left">left</option>
<option value="right">right</option>
<option value="top">top</option>
</select>
Обработку данных из формы следует организовать в этом же файле
content.php с приемом значений элементов формы через глобальные массивы
$_POST и $_FILES, а также функцию работы с MySql insert. Оформить текст
обработчика данных формы также в виде отдельной функции.
Следует напомнить, что в таблицу записывается только имя файла, а сам файл
должен загружаться в каталог /content_img. Для того, чтобы администратор
Web-страниц мог загружать файлы с произвольными именами (в том числе с
использованием кириллицы), зачастую загружаемые файлы переименовывают на
допустимые имена. В учебных целях используем именование файлов изображений
по номеру Web-страницы. Это удобно, так как номер страницы является
уникальным и генерируется автоматически.
Однако в этом случае несколько усложняется алгоритм обработчика и
формирования очередной записи в таблице content. Он становиться не
3
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
двухшаговым
(успешное
копирование
загруженного
файла
в
каталог
/content_img, а затем занесение новой записи в таблицу), а четырехшаговым:
 занесение в таблицу новой записи во все поля, кроме имени файла (при
помощи функции insert);
номера
новой
записи
при
помощи
функции
$idz=mysql_insert_id();
 успешное копирование загруженного временного файла в каталог
/content_img с именем $idz, например:
 определение
copy ($_FILES["img"]["tmp_name"], $files);
где img — имя элемента формы типа file;
$files=$dir.$idz.".jpg"; — полное имя создаваемой копии загруженного файла
типа jpg. Если планируется использовать изображения различного типа,
то вначале следует определить тип загруженного файла при помощи элемента
$_FILES ["img"]["type"], а затем сформировать соответствующее расширение
файла;
$dir="/home/proba/content_img/"; — каталог для файлов изображений, имя
которого
целесообразно
хранить
в переменной,
определяемой
в конфигурационном файле;
 добавление в строку с ID_page=$idz имени загруженного файла $idz (при
помощи функции update).
Выполнить пробную запись и убедиться, что в таблице content и в каталоге
/content_img появились соответствующие записи и файлы.
В качестве исходных данных контента страниц можно использовать материал,
предложенный преподавателем.
В
административном
интерфейсе
(формируемом
в файле
www/admin/content.php) реализовать все остальные административные
функции по управлению Web-страницами при помощи механизма функций
и селектора функций: вывод (select), удаление (delete) и редактирование
(update) данных в таблице content и соответствующие манипуляции с файлами.
Следует напомнить, что процедура обновления файла изображения состоит
из двух функций: удаление файла с выбранным номером (по ID_page в таблице),
а затем загрузка нового файла.
Таким образом, в административном интерфейсе должен быть реализован
следующий состав функций.
 Функция подключения к БД от имени пользователя, имеющего привилегии
на все операции в таблице content. Эту функцию целесообразно
выполнить в отдельном файле (можно в конфигурационном файле),
а из текущего скрипта только вызывать ее, передавая имя пользователя
MySql и пароль. Все остальные функции следует разместить в файле
www/admin/content.php.
 Функция вывода записей таблицы content, в каждой строке которой
выводились бы краткие сведения о страницах (номер — ID_page
и название Title), а также кнопки редактирования и удаления этой записи.
4
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Рекомендуется в качестве таких кнопок использовать рисунки
и ,
которые
можно
взять
по адресу:
free_access(Y)\Разработка
электронного портала\img\. В этом случае в форме вместо элемента
input type=submit требуется использовать элемент input type=image,
например:
< input type=image src="/imges/edit.png" >
Следует помнить, что для использования изображения в качестве кнопки
формы файл этого изображения должен быть помещен в каталог Web-ресурса,
указанный в пути src=«имя файла». В приведенном примере каталог /imges
указан
от корня
Web-ресурса.
Данная
функция
(с выводом
сведений
о существующих страницах) должна запускаться по умолчанию при входе
в интерфейс администрирования страниц.
 Функция вывода формы для вставки данных новой страницы (эта функция





уже должна существовать после выполнения предыдущего пункта
задания). Запускается эта функция при нажатии кнопки «Создать новую
страницу».
Функция вставки в таблицу новой записи (эта функция также уже должна
существовать после выполнения предыдущего пункта задания).
Функция загрузки файла изображения с проверкой имени и размера файла.
Эту функцию целесообразно сделать отдельной, так как она используется
как при создании новой страницы, так и при ее редактировании со сменой
изображения.
Входным
параметром
функции
будет
имя
файла,
совпадающее с номером страницы.
Функция удаления записи из таблицы. Входным параметром будет номер
страницы.
Функция удаления файла (с проверкой его наличия). Эту функцию так же
следует сделать отдельной, так как она используется не только при
удалении страницы, но и при ее редактировании со сменой изображения.
Входным параметром функции будет имя файла, совпадающее с номером
страницы.
Функция вывода формы для редактирования выбранной страницы. Входным
параметром будет номер страницы. Элементы данной формы повторяют
форму для ввода данных новой страницы, но в них отображаются текущие
записи. Рядом с полем загрузки файла изображения отображается текущий
рисунок. При этом в теге img следует указывать путь к файлу изображения
от корня
Web-ресурса,
который
целесообразно
задавать
в конфигурационном файле, например: $sitedir="/content_img/". Для
вывода текущего значения в элемент select следует использовать в теге
option атрибут selected, например следующим образом:
print '<option value="right" ';
if ($row['Size']=="right") echo "selected";
print '>right</option>';
5
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
 Функция обновления записи в таблице. Входным параметром будет номер
страницы.
После
успешного
выполнения
любых
операций
с
Web-страницами
(формирование новой страницы, обновление или удаление страницы)
предусмотреть автоматическое перенаправление в исходный интерфейс
администратора страниц, которого называют также контент-менеджером,
например следующим образом:
print '<HTML><HEAD>
<META HTTP-EQUIV="Refresh" CONTENT="0;
URL=/admin/content.php ">
</HEAD></HTML>';
В приведенном
примере
перенаправление
будет
выполнено
на файл
/admin/content.php без параметров с задержкой 0 с. Так как каталог /admin
на предыдущих занятиях был защищен средствами базовой аутентификации Webсервера, то доступ в него будет осуществляться только после авторизации
пользователя.
11.3. Создание гостевого интерфейса просмотра
существующего контента
Созданный административный интерфейс контент-менеджера служит для
удобного управления контентом, предоставляемого посетителям Web-ресурса.
Административный интерфейс часто называют внутренним (Backend), а внешний
интерфейс, предназначенный для гостей и зарегистрированных пользователей,
называют Frontend. Frontend — это лицевая часть Web-ресурса, поэтому она
должна быть красочно оформлена, иметь удобную и понятную систему навигации,
поэтому в этом задании основное внимание уделяется созданию автоматической
системы навигации.
Создать скрипт в файле www/index1.php, формирующий гостевой интерфейс
с необходимой страницей по полю ID_page. По умолчанию должна загружаться
первая страница (с первым значением ID_page). В этом скрипте следует
выполнять подключение к базе данных с ограниченными привилегиями (только
на выборку данных).
Для удобного структурирования данных Web-страниц обычно применяются
таблицы (контейнеры table). На рис. 11.3 приведен пример структуры Webстраницы, формируемой скриптом www/index1.php.
6
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Рис. 11.3. Пример структуры Web-страницы
В приведенном примере основную структуру страницы формирует таблица,
состоящая из трех строк, имеющих по одной ячейке каждая, в которых
размещены соответственно верхняя часть, средняя часть и нижняя часть Webстраницы. Средняя часть при помощи вложенной таблицы разделена на две
колонки — две ячейки в одной строке. Первая колонка используется для вывода
меню системы навигации.
Пункты меню следует сформировать из названий (хранимых в поле Title
таблицы content) созданных страниц на основе функции select и цикла while.
C каждого пункта меню должны создаваться гиперссылки, по которым необходимо
передавать этому же скрипту нового значения ID_page (в виде дополнительного
параметра в гиперссылке). На рис. 11.4 приведен пример реализации меню
системы навигации.
Рис. 11.4. Пример php-кода для автоматического формирования пунктов меню системы
навигации
7
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Как видно из приведенного кода число пунктов меню будет формироваться
автоматически по числу записей в таблице content. В каждой гиперссылке
методом GET передается параметр-значение ID_page.
Реализовать сортировку пунктов меню по полю ID_page:
SELECT ID_page, Title FROM CONTENT ORDER BY ID_page
Таким образом, при переходе к скрипту index1.php через систему навигации
при помощи массива $_GET передается идентификатор Web-страницы ID_page,
по которому вначале скрипта делается выборка всех полей этой страницы
из таблицы content (рис. 11.5).
Рис. 11.5. Пример php-кода для выборки контента запрошенной страницы
Осталось лишь вывести содержимое запрошенной страницы из оставшихся
полей записи в таблице content. Пример реализации этой части скрипта
представлен на рис. 11.6.
Рис. 11.6. Пример php-кода основной (информационной) части страницы
В приведенном примере в заголовке страницы (см. рис. 11.5, контейнер head)
кроме имени страницы применено подключение файла со стилевым оформлением
Web-страницы style.css. Напомним, что при использовании редактора HomeSite
такой файл достаточно просто создается при помощи редактора TopStyle
8
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
(рис. 11.7). Тег link формируется автоматически после перетаскивания мышкой
файла стилей в область контейнера head.
При использовании набора стилей рис. 11.7 внешний вид гостевого интерфейса
в браузере будет как на рис. 11.8. Следует обратить внимание на результат
выполнения браузером тега title (рис. 11.8).
На рис. 11.9 приведен html-код Web-страницы, полученный браузером от Webсервера.
Рис. 11.7. Пример файла стилей
9
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Рис. 11.8. Пример гостевого интерфейса
Рис. 11.9. Пример html кода сформированной страницы
При формировании меню часто требуется выделять пункт меню, открытой
страницы. Наиболее просто это можно сделать в результате сравнения номера
открытой страницы с очередным номером в меню, например следующим образом:
10
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
if ($row['ID_page']==$row1['ID_page'])
{ print '<li>'.$row['Title']; }
else print '<li><a href="index1.php?ID_page='.$row['ID_page'].'"
'.$row['Title'].'</a></li> ';
>
В этом примере в массиве $row хранятся все номера страниц (поле ID_page), а
в массиве $row1 имеется только одно значение ID_page – открытой страницы.
11.4. Управление meta-данными Web-страниц
Meta-данными называют данные, хранящиеся в meta-тегах заголовка Webстраницы (в контейнере head). Эти данные используются поисковыми системами
для индексирования Web-страниц. Грамотное формирование этих тегов может
существенно повлиять на позицию Web-ресурса в поисковых системах, поэтому в
интерфейсе контент-менеджера обычно предусматривают поля для ввода
значений как минимум двух основных meta-тегов:
<meta name="description" content="краткое описание сайта">
<meta name ="keywords" content="ключевые слова ">
Краткое описание выводится поисковой системой при индексировании Webстраницы, а набор ключевых слов (через запятую или пробел до 1000 символов)
влияет на рейтинг ресурса по тому или иному запросу.
Современные поисковые системы имеют очень сложные алгоритмы индексации
Web-страниц. При этом учитывается наличие ключевых слов и слов описания
страницы в тексте самой страницы. Причем чем больше таких совпадений, тем
выше будет рейтинг страницы по запросу с этими словами.
Для управления meta-данными учебного Web-ресурса выполнить следующие
доработки административного и гостевого интерфейсов:
 в структуру таблицы content добавить два поля типа text с именами
Description и Keywords;
 в административном интерфейсе добавить два аналогичных элемента типа
textarea в формы ввода и редактирования контента Web-страниц;
в скрипте www/admin/content.php добавить во все функции по работе
с контентом Web-страниц обращение к полям Description и Keywords;
 дополнить
созданные
Web-страницы
meta-данными
в режиме
редактирования;
 в гостевом интерфейсе предусмотреть вывод соответствующих meta-тегов
в заголовках формируемых Web-страниц. Проверить наличие meta-тегов
путем просмотра в браузере html-структуры полученной страницы.
Задание на самостоятельную работу
Реализовать Архив устаревших Web-страниц.
Для этого в таблицу content добавить еще одно поле arhiv типа char длиной
1 символ и значением 0 по умолчанию. Это значение будет соответствовать тому,
что страница находится не в архиве.
11
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
В административном интерфейсе в списке страниц кроме операций
редактирования и удаления реализовать возможность отправки в архив (при
помощи подходящей пиктограммы) с вводом соответствующей метки, например,
символа 1 в поле arhiv таблицы content.
В административном интерфейсе реализовать вывод информации о страницах,
упорядоченных по полю arhiv: вначале будут выводиться все неархивные
страницы, а затем — архивные. Если страница архивная, то в колонке отправки
страниц в архив пиктограмма должна быть другой и уже не связанной с формой
отправки в архив.
В гостевом интерфейсе в основном меню выводить только неархивные
страницы. Сделать гиперссылку на дополнительный список архивных страниц,
которые можно будет тоже просматривать.
12