Практикум по разработке системы управления контентом (CMS)
Покупка
Новинка
Тематика:
Системы управления базами данных (СУБД)
Издательство:
ИНТУИТ
Автор:
Гутентог М. А.
Год издания: 2016
Кол-во страниц: 52
Дополнительно
Доступ онлайн
В корзину
Создание несложной системы управления сайтом на языках PHP, Javascript
Тематика:
ББК:
УДК:
ОКСО:
- ВО - Бакалавриат
- 09.03.01: Информатика и вычислительная техника
- 09.03.02: Информационные системы и технологии
- 09.03.03: Прикладная информатика
- 10.03.01: Информационная безопасность
- 38.03.05: Бизнес-информатика
- ВО - Магистратура
- 09.04.01: Информатика и вычислительная техника
- 09.04.02: Информационные системы и технологии
- 09.04.03: Прикладная информатика
- 10.04.01: Информационная безопасность
- 38.04.05: Бизнес-информатика
ГРНТИ:
Скопировать запись
Фрагмент текстового слоя документа размещен для индексирующих роботов.
Для полноценной работы с документом, пожалуйста, перейдите в
ридер.
Практикум по разработке системы управления контентом (CMS) 2-е издание, исправленное Гутентог М.А. Национальный Открытый Университет “ИНТУИТ” 2016 2
Практикум по разработке системы управления контентом (CMS)/ М.А. Гутентог - М.: Национальный Открытый Университет “ИНТУИТ”, 2016 Создание несложной системы управления сайтом на языках PHP, Javascript. (c) ООО “ИНТУИТ.РУ”, 2016-2016 (c) Гутентог М.А., 2016-2016 3
Обзор технологий. Начало кодирования Введение CMS – content management system, обычно переводится как “система управления содержимым (сайта)”. Возможно, вы слышали о таких широко распросранённых CMS, как Joomla, Битрикс. Создав собственную CMS, вы сможете понять, как работают другие, научитесь видеть их внутренние достоинства и недостатки. А несложные сайты (вроде блога с комментариями) вы сможете создавать прямо на своей CMS, которая позволит вам легко редактировать содержимое сайта, делать резервные копии, переносить файлы сайта и базу данных (БД) с одного хостинга на другой. Для работы вам понадобятся следующие инструменты: текстовый редактор с подсветкой синтаксиса: Notepad++ (на Windows), Kate или Geany (на Linux, MaxOS); Mysql-сервер; веб-сервер Apache с подключенным в виде модуля PHP; phpMyAdmin (ссылка: http://www.phpmyadmin.net/) для создания таблиц mysql; браузер Firefox. Вам не нужна будет громоздкая система разработки (IDE), весь код вашей CMS не превысит 100 килобайт (несколько файлов php, css, js). Веб-сервер и mysql-сервер вы можете установить сразу, используя для Windows такой дистрибутив, как USBWebserver V8 (ссылка: http://www.usbwebserver.net/en/download.php), а для Linux набор пакетов LAMP (MAMP, XAMP для MacOS). Если вы не сможете это сделать самостоятельно, используя компьютер и Интернет, вам, скорее всего, пока рано изучать данный курс. Курс рассчитан на людей, знакомых со спецификациями HTML5, CSS2 и с основами программирования на PHP, Javascript, с работой в phpMyAdmin и составлением простых sql-запросов. Нужны также будут начальные знания английского языка – чтобы с помощью словаря разбирать, что значит “affected rows”, “deprecated“, или “alter table files add primary key …”. HTML В мире веб существуют сотни CMS, фреймворков и прочих “библиотек”, и число их постоянно растёт. Потому что каждый человек, создавший хоть один сайт, обязательно задумается: нельзя ли в следующий раз избежать многочисленных трудов и создать новый сайт, взяв из старого сайта нечто существенное и слегка подправив? Что общего у блога, сайта доставки суши и сайта школьного расписания? Обнаружив это общее, мы сможем значительно ускорить создание следующего сайта (например, landing-page для продажи воздушных шариков). 4
Любой сайт состоит из html-страниц, это лежит на поверхности. Значит, общим будет некоторый набор html-тэгов. Большинство из них повторяются от одного сайта к другому: DOCTYPE, title, charset, link, script… То есть можно смело взять такой кусок текста (листинг 1.1 пример 1.1): <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Астрология</title> <link rel="stylesheet" href="site.css" type="text/css"> <script type="text/javascript" src="site.js"></script> </head> <body> <p><img src="files/img1.jpg" />Гадание по кофейной гуще</p> <p><img src="files/img2.jpg" />Оптом, в розницу и на экспорт</p> </body> Листинг 1.1. – и использовать его для создания любой страницы любого сайта, подставляя вместо слов “Астрология” и “Гадание по кофейной гуще” другие слова (и копируя на место картинок img1.jpg и img2.jpg другие файлы). В этом случае каждая страница сайта будет реально существующим html-файлом, и вы сможете менять этот текст, редактировать его. То есть это уже будет что-то вроде системы управления содержанием. Но работать в такой системе не очень удобно: править тексты вы сможете только в текстовом редакторе на своём компьютере – в Блокноте (или Notepad++); править текст надо будет очень аккуратно, чтобы не испортить окружающие html- тэги; чтобы изменить текст, вам нужно будет скачать нужный html-файл к себе на комьютер, отредактировать его, а потом загрузить обратно на сервер по ftp- протоколу (то есть не через браузер, а с помощью отдельной специальной программы). Идея CMS как раз в том и состоит, чтобы вы могли менять содержимое своего сайта, используя только браузер, без дополнительных программ и сложных манипуляций с файлами. Здесь возникает две разные задачи: Доступ к содержимому сервера через браузер. Удобное изменение текстов сайта без опасности повредить html-код. Для загрузки файлов на сервер используют html-формы. Браузер передаёт с помощью такой формы запрос, к которому присоединяет выбранный вами (на вашем 5
компьютере) файл. Запрос в соответствии с протоколом HTTP должен быть “POST“. Сервер без помощи специальных языков программирования (php, java, python) не сможет поместить отправленный вами файл в нужную папку. Теоретически существует ещё возможность отправлять на веб-сервер файлы методом PUT (которые, например, http-сервер Nginx может получать и распеределять по папкам самостоятельно, без использования Php), но такой возможности (отправлять файлы методом PUT) пока нет у самих html-форм, поэтому мы будем исходить только из использования метода POST. Это значит, что у работы на “чистом html” нет перспектив и нам сразу же понадобится php. А чтобы соединять разные тексты с одним и тем же повторяющимся фрагментом html, нужно будет хранить тексты отдельно от фрагментов html (называемых обычно шаблонами). Хранить тексты можно просто в отдельных файлах, но база данных (Mysql) намного удобнее. PHP, MySQL Листинг 1.1 пример 1.1 был достаточно прост, но дальше вам понадобится проверять работу каждого фрагмента кода в реальных условиях, отлаживать программу. Поэтому сразу создадим эти реальные условия (или убедимся, что они созданы). Если вы работаете на Windows, мы будем исходить из того, что вы установили USBWebserver и назначили для Apache порт 80; тогда в браузере вы сможете открыть ваш сайт по адресу ссылка: http://localhost/ (либо ссылка: http://localhost:8080/), а файлы для работы сайта (php, js, css) вы должны будете копировать в папку c:/usbws/root (или другую папку, в которую вы установили USBWebserver). Вместе с USBWebserver, кстати, должен сразу установиться phpMyAdmin. Если вы работаете под Линуксом, папка для вашего сайта, скорее всего, будет расположена по адресу /var/www/html (хотя, возможно, и в домашней директории пользователя – это будет зависеть от настроек веб-сервера), а phpMyAdmin вы должны будете установить самостоятельно (например, командой консоли sudo apt-get install phpmyadmin). Вся дальнейшая работа технически будет выглядеть так: 1. вы пишете что-то (например, программный код) в файлы php, js, css в папке вашего сайта; 2. открываете в браузере адрес ссылка: http://localhost/ (иногда ссылка: http://localhost/index2.php или index3.php) и смотрите, какие изменения произошли на сайте вследствие вашей работы с кодом; 3. корректируете код – и затем повторяете пункты 1 и 2 (и при необходимости 3 – пока не “заработает”). От этих двух добавлений (Php и Mysql) сложность кода начнёт возрастать по экспоненте. Минимальный повторяемый фрагмент страницы (“шаблон”) теперь будет 6
выглядеть так (листинг 1.2 пример 1.2): <?php $title = 'Астрология'; $img1 = 'img1.jpg'; $html1 = 'Гадание по кофейной гуще'; $img2 = 'img2.jpg'; $html2 = 'Гадание по кофейной гуще'; $page = <<<PAGE <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>{$title}</title> <link rel="stylesheet" href="site.css" type="text/css"> <script type="text/javascript" src="site.js"></script> </head> <body> <p><img src="files/{$img1}" />{$html1}</p> <p><img src="files/{$img2}" />{$html1}</p> </body> PAGE; print $page; ?> Листинг 1.2. А если использовать базу данных, тогда ещё сложнее (листинг 1.3 пример 1.3): <?php $id = $_GET['id']; $link = mysqli_connect("localhost", "unsinn", "go68dbs", "unsinn"); $sql = "SELECT * FROM `mypages` where id = " . (int) $id; $result = mysqli_query($link, $sql); $row = mysqli_fetch_assoc($result); $page = <<<PAGE <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>{$row['title']}</title> <link rel="stylesheet" href="site.css" type="text/css"> <script type="text/javascript" src="site.js"></script> </head> <body> <p><img src="files/{$row['img1']}" />{$row['html1']}</p> <p><img src="files/{$row['img2']}" />{$row['html2']}</p> </body> PAGE; print $page; 7
?> Листинг 1.3. Создайте в Папке сайта файл с именем index0.php и сохраните в этом файле приведённый код. На нашем учебном хостинге он выглядит так: index0.php?code. Обратите внимание на строчку: $link = mysqli_connect("localhost", "unsinn", "go68dbs", "unsinn"); Слово “localhost” там правильное, обычно его менять не надо. А вот пользователя “unsinn” с паролем “go68dbs” и БД “unsinn” вы должны будете создать на своём mysql- сервере с помощью программы phpMyAdmin: откройте в браузере адрес, по которому расположен phpMyAdmin (возможно, это будет ссылка: http://localhost/phpmyadmin/), найдите там раздел для выполнения sql-запросов, скопируйте туда следующий текст и выполните запрос (листинг 1.4 пример 1.4): CREATE DATABASE IF NOT EXISTS `unsinn` ; GRANT ALL PRIVILEGES ON `unsinn` . * TO 'unsinn'@'localhost' IDENTIFIED BY 'go68dbs'; flush PRIVILEGES; Листинг 1.4. И ещё мы должны создать в базе данных `unsinn` таблицу `mypages` со следующей структурой (листинг 1.5 пример 1.5): CREATE TABLE IF NOT EXISTS `mypages` ( `id` int(7) NOT NULL AUTO_INCREMENT, `title` text NOT NULL, `html1` text NOT NULL, `html2` text NOT NULL, `img1` varchar(99) NOT NULL, `img2` varchar(99) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; insert ignore into `mypages` (`id`, `title`, `html1`, `html2`, `img1`, `img2`) values (1, 'Астрология', 'Гадание по кофейной гуще', 'Оптом, в розницу и на экспорт', 'img1.jpg', 'img2.jpg'), (2, 'Воздушные шарики', 'Синие, белые и зелёные', 'Круглые, квадратные, треугольные', 'img1.jpg', 'img2.jpg'); Листинг 1.5. Этот код надо также вставить в поле для sql-запросов в phpMyAdmin и выполнить запрос. Сохраним этот код в файл source1.sql, чтобы потом не писать каждый раз код, а просто ссылаться на этот файл (и вы тоже сохраните его у себя на компьютере). Начала навигации. Первые ошибки в работе программы 8
Обратите внимание на строчку $id = $_GET[‘id’]; в файле index0.php. Эта строчка рассчитана на то, что пользователь из браузера пошлёт на сервер запрос вида ссылка: http://localhost/index0.php?id=3, а мы на сервере извлечём этот параметр (“3”) и используем его для получения нужной строчки таблицы с помощью sql-запроса (“SELECT * FROM `mypages` where id = 3”). То есть мы именно так пока организуем связь запросов клиента и ответов сервера – через параметр id. Размер нашего кода по сравнению с первоначальным чистым HTML вырос в 3-4 раза. Но на вопрос, стоит ли оно того, здесь быстро ответить нельзя. Для начала надо немного добавить реализма. На сайте редко бывает только одна страница (даже на казалось бы единственной landing-page попросту собрано в кучу много разных страниц). Начнём с двадцати (как будто бы у нас на сайте по астрологии 20 разных страниц). Тогда начальный html-код надо будет размножить на 20 файлов (то есть количество его возрастёт в 20 раз), а последний php-фрагмент у нас находится в единственном файле index0.php и все 20 страниц мы можем вызвать с помощью параметра в адресной строке: ссылка: http://localhost/index0.php?id=12, ссылка: http://localhost/index0.php? id=19. Налицо явная экономия, казалось бы. Но вот с этого места и начинается “экспонента” сложностей. Наш Код в файле index0.php в таком виде попросту не будет работать. Вам это утверждение может показаться слишком сильным. Проверим. 1. При переходе по адресу ссылка: http://localhost/index0.php вы получите сообщение Notice: Undefined index: id in /var/www/html/index0.php on line 2. 2. При переходе по адресам от ссылка: http://localhost/index0.php?id=1 до ссылка: http://localhost/index0.php?id=20 вы будете видеть какую-то информацию (если вы занесли в таблицу mypages 20 строк, как планировали) – возможно, это будут “кракозябры” или вопросики из-за несоответствия кодировки. 3. При параметре id > 20 вы будете видеть пустую страницу (ссылка: http://localhost/index0.php?id=21). 4. И да, во всех случаях вы будете видеть сообщение об ошибке, связанное с установкой часового пояса (если у вас php не очень древний). 5. Или вы совсем не будете видеть сообщения об ошибках, а только пустую страницу – что хуже всего в нашем случае. Вот с последнего и начнём. В работе сайта желательно предусмотреть два состояния: рабочее (для пользователей) и режим отладки. Пользователи не должны видеть всякие notice. Заведём для переключения этого состояния переменную и в зависимости от её значения будем отображать сообщения об ошибках; а для обработки “возражения 4.” добавим часовой пояс по умолчанию (листинг 1.6 пример 1.6): <?php $debug = true; error_reporting(E_ALL); ini_set('log_errors', true); ini_set('display_errors', $debug); date_default_timezone_set('Asia/Yakutsk'); 9
//... ?> Листинг 1.6. Добавьте этот код к первоначальному php-коду и сохраните в Папке сайта под именем index1.php. Проверьте код, он должен выглядеть примерно так: ссылка: http://nichtig.ru/index1.php?code. Чтобы при добавлении параметра “code” можно было видеть php-код файла (вместо результата работы программы) мы использовали дальше следующий фрагмент: <?php //... if (array_key_exists('code', $_GET)) { header('Content-Type: text/html; charset=UTF-8'); $code = file_get_contents(__FILE__); highlight_string($code); exit; } //... ?> Это было самое простое. Дальше будет всё хуже и хуже. Каждый раз, когда вы обращаетесь к переменной по её имени (например, к переменной $debug в конструкции ini_set(‘display_errors’, $debug);), вы должны ожидать неприятностей разного рода: 1. переменная не существует; 2. тип переменной не соответствует ожидаемому; 3. значение переменной не соответствует ожидаемому диапазону. Все эти случаи надо предусматривать и “обрабатывать” – закладывать в программу возможность исправить ситуацию до такой степени, чтобы обычный пользователь ничего не заподозрил (а думал, что так оно и планировалось), или доводить ситуацию хотя бы до внятного сообщения об ошибке (в режиме debug). Проблема 2 – одна из самых неприятных: в php действует “незаметное” приведение типов к нужному (в данном месте кода), и программист быстро привыкает особо не обращать внимания на типы, что иногда внезапно вылезает боком (например, при попытке обратиться к элементу массива по индексу – $arr[1] – когда переменная $arr не является массивом). Проблема 1 уже встретилась нам при обращении к странице index1.php без параметра (“Notice: Undefined index: id...”). Проблема 3 – при попытке вызвать страницу с id > 20. Решение этих проблем не является тривиальным, так как зависит совсем не от программиста. Как именно следует их решать, должен сказать владелец сайта, но он не подозревает об этих проблемах, и возникает замкнутый круг, разорвать который можно только путём долгих и мучительных переговоров – поэтому на большинстве сайтов эти проблемы вообще не решаются никак (либо решаются путём банального отключения 10
Доступ онлайн
В корзину