Динамические страницы в PHP. PHP
Для создания перспективного, расширяемого и эффективного сайта любой сложности следует начинать с простого. Это процесс нелёгкий, требует определённых базовых знаний PHP и MySQL, но если его рассмотреть по пунктам - то можно составить своего рода «рабочий план», который пригодится при создании новых сайтов. Подготовим «ядро» и базу для проекта. Вначале это будет обычный сайт визитка, но потом, добавляя функционал, его можна превратить во что угодно. Итак, приступим.
1. Подготовка базы данных. Создаём первую таблицу в БД MySQL
Создаём новую базу данных, например «mysite». Лично я привык работать с кодировкой UTF-8, по-этому сразу оговорюсь: проследите, чтобы все текстовые файлы сайта, сама база, таблицы и поля таблиц были в одной кодировке.
В новой базе делаем таблицу. Назовём её «pages». В этой таблице будут храниться статические страницы будущего сайта и информация о них. Таблица должна содержать следующие поля:
- page_id - идентификатор страницы (SMALLINT, primary key, auto_increment);
- page_alias - псевдоним страницы для строки адреса ЧПУ (VARCHAR, 255);
- page_title - название страницы в окне браузера (VARCHAR, 255);
- page_meta_d - мета описание страницы для тега meta description (VARCHAR, 255);
- page_meta_k - мета ключевые слова для тега meta keywords (VARCHAR, 255);
- page_h1 - заголовок страницы (VARCHAR, 255);
- page_s_desc - краткое описание материала, например если материалы сайта будут в виде блога (TEXT);
- page_content - основной текст страницы, который будет выводиться в центральную колонку сайта (TEXT);
- page_publish - содержит «Y» - если страница опубликована, или «N» - если она скрыта (CHAR, по умолчанию «Y»).
Сразу после создания таблицы вставляем в неё значения для главной страницы сайта. В поле «page_alias» для главной страницы предлагаю вставить значение «home». Метатеги - соответственно тематике всего сайта. Таким же образом можно посоздавать другие страницы, например «О компании» с алиасом «about» и своими метатегами, или «Контакты» с алиасом «contacts» и т.д.
2. Создаём файл конфигурации сайта
В корневой папке сайта, которая должна быть пуста на данном этапе, создаём папочку «cfg», в ней с помощью.htaccess закрываем доступ директивой «deny from all». Создаём файл core.php следующего содержания:
// MYSQL
class MyDB
{
var $dblogin = "root"; // ВАШ ЛОГИН К БАЗЕ ДАННЫХ
var $dbpass = ""; // ВАШ ПАРОЛЬ К БАЗЕ ДАННЫХ
var $db = "mysite"; // НАЗВАНИЕ БАЗЫ ДЛЯ САЙТА
var $dbhost="localhost";
Var $link;
var $query;
var $err;
var $result;
var $data;
var $fetch;
Function connect() {
$this->link = mysql_connect($this->dbhost, $this->dblogin, $this->dbpass);
mysql_select_db($this->db);
mysql_query("SET NAMES utf8");
}
Function close() {
mysql_close($this->link);
}
Function run($query) {
$this->query = $query;
$this->result = mysql_query($this->query, $this->link);
$this->err = mysql_error();
}
function row() {
$this->data = mysql_fetch_assoc($this->result);
}
function fetch() {
while ($this->data = mysql_fetch_assoc($this->result)) {
$this->fetch = $this->data;
return $this->fetch;
}
}
function stop() {
unset($this->data);
unset($this->result);
unset($this->fetch);
unset($this->err);
unset($this->query);
}
}
Этот файл пока содержит только простой класс подключения к базе данных, но в дальнейшем в него можно добавлять разные полезные функции, которые будут доступны из любого места в коде сайта. Не забудьте изменить логин и пароль к Вашей базе.
Если Вы работаете в среде Windows, я могу порекоммендовать использовать редактор . В этом редакторе есть нумерация строк, и он легко переводит текст из одной кодировки в другую. ВНИМАНИЕ! Если Вы работаете в кодировке UTF-8 - конвертируйте файлы в UTF-8 without BOM - это поможет избежать проблем в будущем.
3. Создаём index.php - главный контроллер сайта
Файл конфигурации создан. Теперь в корневой папке сайта создаём index.php - это и будет основной скрипт сайта, своего рода «главный контроллер». Содержание файла index.php:
define("INDEX", ""); // УСТАНОВКА КОНСТАНТЫ ГЛАВНОГО КОНТРОЛЛЕРА
Require_once($_SERVER."/cfg/core.php"); // ПОДКЛЮЧЕНИЕ ЯДРА
// ПОДКЛЮЧЕНИЕ К БД
$db = new MyDB();
$db->connect();
// ГЛАВНЫЙ КОНТРОЛЛЕР
switch ($_GET) {
case "page":
include($_SERVER."/com/page.php");
break;
default:
include($_SERVER."/com/home.php");
break;
}
Include ($_SERVER."/template.php");
$db->close();
Переменная $_GET будет указывать главному контроллеру какой компонент сайта загружать при запросе. Сейчас в нашем сайте предусмотрено только два компонента: «страница» и «главная страница» (в принципе можно обойтись и одним компонентом вывода обычной страницы, но часто вид главной страницы сайта отличается от обычных страниц пунктов меню). Логика работы главного контроллера такова: из URL строки извлекается название нужного компонента (значение переменной $option), в зависимости от его значения подключается файл самого компонента (содержится в папке /com). Файл компонента выполняет все необходимые работы, извлекает из базы данные и записывает их в переменные, для передачи в шаблон дизайна. В самом конце подключается файл дизайна сайта, в который и передаются все переменные и данные, извлечённые в компонентах. Это звучит намного сложнее, чем работает.
4. Создаём компонент вывода обычной страницы
В корне сайта создаём папочку «com» - в ней будут храниться файлы компонентов. Компонент сайта, в моём понимании - это файл, в котором происходит обработка данных для разных разделов сайта. Например компонент обычной страницы извлекает из базы данных название, описание и текст материала, и записывает их в переменные $title, $meta_d, $meta_k, $content и др. Эти данные потом передаются в шаблон дизайна (под каждый компонент можно создавать свой шаблон дизайна) и выводятся пользователю в виде HTML-страницы. Например, компонент каталога, который можно создать в будущем, выполнял бы почти то же самое, но с данными про товары - а там своя специфика, другие поля в таблице, итд. По-этому для каждого функционального раздела сайта стоит создавать отдельный компонент. В схеме MVC (Model-View-Controller) компонент выполняет роль модели.
Создаём в папке «com» файл «page.php». Содержимое файла следущее:
/* КОМПОНЕНТ СТРАНИЦЫ */
$alias = $_GET;
$query = "SELECT * FROM pages WHERE page_alias="".$alias."" AND page_publish="Y" LIMIT 1";
$db->run($query);
$db->row();
// ПЕРЕМЕННЫЕ КОМПОНЕНТА
$id = $db->data;
$alias = $db->data;
$title = $db->data;
$h1 = $db->data;
$meta_d = $db->data;
$meta_k = $db->data;
$s_desc = $db->data;
$component = $db->data;
// ЕСЛИ СТРАНИЦЫ НЕ СУЩЕСТВУЕТ
if (!$id) {
header("HTTP/1.1 404 Not Found");
$component = "ОШИБКА 404! Данной страницы не существует";
}
$db->stop();
5. Создаём компонент вывода главной страницы
Главная страница у нас в базе данных хранится под псевдонимом «home», и пока по своей структуре не отличается от обычных страниц сайта - это просто статья. Тем не менее создадим для неё отдельный компонент - на перспективу, так сказать.
Содержимое компонента «home.php» в папке «com» почти совпадает с содержимым компонента обычной страницы, за исключением строки запроса к базе и названия компонента. Строка запроса теперь выглядит так:
$query = "SELECT * FROM wx_pages WHERE page_alias="home" LIMIT 1";
6. Создаём шаблон дизайна всего сайта
В корне сайта создаём файл template.php. По сути это обычный макет web-дизайна в формате HTML+CSS, только с PHP переменными в нужных местах. Между тегами title вставочка , в центральной колонке сайта вставочка и так по всему шаблону расставляем нужные переменные, которые объявлены в компонентах.
В корневой папке также должны быть папки «css» и «images» для элементов дизайна. В файле /css/style.css - можно настроить стили по своему усмотрению.
7. Чистые ссылки и файл.htaccess
Для создания чистых ссылок я использую mod_rewrite с прямыми указаниями правил для каждого компонента отдельно, так как разбор адресной строки средствами самого контроллера считаю излишним функционалом. Содержимое.htaccess на данном этапе такое:
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
# ЗАПРЕЩЁННЫЕ ФАЙЛЫ
RewriteRule .htaccess - [F]
RewriteRule template.php - [F]
# ПРАВИЛА mod_rewrite
RewriteRule page/(+)([\/]{0,1})\.htm$ index.php?option=page&alias=$1 [L]
В будущем мы будем дописывать правила для компонентов поиска, каталога, блога статей и т.д. Смысл один: преобразовать ссылки вида «mysite.com/index.php?option=pages&alias=about » в ссылку вида «mysite.com/pages/about.htm » - смотрится довольно красиво. Старайтесь в разработке избегать массива $_GET в целях безопасности и не надеяться на него. Целесообразно хранить в нём только параметры для главного контроллера (переменная $option) и для компонента (переменная $alias).
Также в каждой папке сайта «на всякий случай» создайте пустой файл index.html - это нужно для того, чтобы при обращении к каталогу через адресную строку ничего не отображалось.
Теги: php, mysql, движок сайта, контроллер, создание сайта, mvc
2017-01-10
Создаем динамический сайт с помощью php
Здравствуйте уважаемый посетитель!
Сегодня из главной страницы с помощью языка программирования PHP создадим динамическую страницу, которая в дальнейшем будет формироваться на сервере при каждом запросе пользователей.
Таким образом, изменив структуру сайта и наполнив его подобными изменяющимися страницами, мы получим динамический сайт, что в дальнейшем очень значительно упростит его техническую поддержку и развитие по сравнению со статическим вариантом.
- Зачем нужен динамический сайт
- Как преобразовать статический сайт в динамический
- Формируем блоки динамического сайта
- Преобразуем веб-страницу из статической в динамическую
- Исходные файлы сайта
Зачем нужен динамический сайт
О том, зачем нужен динамический сайт говорилось в самом начале пошаговой инструкции в статье Устанавливаем локальный веб-сервер Denwer , где пояснялась необходимость установки локального веб-сервера. Поэтому можно вернуться назад и освежить этот вопрос.
Также, если требуется дополнительно рассмотреть плюсы и минусы статических и динамических сайтов, можно посоветовать ознакомиться на страницах онлайн справочника "Puzzleweb.ru" с разделом Виды сайтов, где довольно лаконично, но в то же время наглядно даны пояснения по разным вариантам сайтов.
скриншот 12
К этому можно лишь добавить, что для получения действительно полноценного интерет-ресурса невозможно пропустить этот шаг и остаться с вариантом статического сайта.
Поэтому более не будем углубляться в теоретические обсуждения необходимости создания динамического сайта, а перейдем к рассмотрению вопроса о том, как мы это будем делать.
Как преобразовать статический сайт в динамический
Как известно, принципиальное отличие динамического от статического сайта в том, в статическом готовые веб-страницы лежат на сервере и ждут своей очереди для отправки в браузер пользователя. При этом, если страницы будут иметь даже незначительные различия, скажем разница лишь в одной фразе или вообще в одном слове, то все равно это будут отдельные страницы.
В динамическом же варианте, формирование страниц происходит на сервере при каждом запросе пользователя в зависимости запрашиваемой информации.
По-простому, это можно сравнить с конструктором, где из ограниченного числа элементов можно составлять большое количество различных фигур. При этом, если внести какое-либо изменение в один из элементов, то оно будет отражаться на всей конструкции, включающей этот элемент.
Исходя из этого и сделаем из нашей созданной главной страницы подобие конструктора, состоящего из определенных элементов (в нашем случае это будут файлы), из которых в последствии будут собираться веб-страницы по запросам пользователей.
Для пояснения действий, которые для этого будем выполнять, воспользуемся HTML-кодом каркаса главной страницы, полученным на одном из этапов создания сайта в статье .
-
"utf-8" >
<span><b>Заголовок страницы </b> </span> "Description" content ="Краткое описание содержания страницы" >
-
"wrapper" >
Шапка Ротатор Основное содержание Как видно из HTML-кода, контейнер
, предназначенный для размещения видимой части веб-страницы содержит следующие основные блоки:- Шапка;
- Ротатор;
- Основное содержимое;
- Сайдбар;
- Подвал.
При этом нужно обратить внимание на то, что четыре из пяти блоков являются общими, и только один блок "Основное содержание" будет отличным для каждый страницы.
Для получения элементов динамического сайта выделим содержимое из этих блоков в отдельные файлы, которые в дальнейшем будем подключать при сборке различных веб-страниц по запросам пользователей.
Сейчас, на этом этапе этих файлов будет всего пять. Но в дальнейшем, при добавлении к сайту страниц или дополнительного функционала, будут подключаться новые файлы, и так далее, по мере необходимости.
Такое построение структуры сайта позволит в дальнейшем не заниматься рутинной работой по изменению HTML-кода всех страниц в случае замены или дополнения какого-либо общего для них фрагмента. В таких случаях достаточно будет внести изменения лишь в какой-то определенный файл, и на этом вся процедура замены будет выполнена. Как видно, преимущество налицо.
А вот для того, чтобы нам это сделать и потребуется язык PHP, с помощью которого веб-страницы смогут обращаться к этим выделенным блокам и переносить к себе их содержимое.
Если кому еще не приходилось иметь дело с языком PHP, то желательно с ним познакомиться поближе, так как PHP является одним из важнейших инструментов разработки сайтов. Это можно сделать, воспользовавшись разного рода справочной литературой, которую на просторах рунета можно найти в большом количестве.
Как вариант, неоднократно уже упомянутый справочник "Puzzleweb.ru", в котором одна из его частей уделена теме PHP. Для более углубленного изучения PHP можно также воспользоваться специализированным справочником, заточенным именно под этот язык, размещенный на сайте "php.ru". По ссылке "https://php.ru/manual/control-structures.intro.html" можно попасть на его страницу "Введение", откуда легко выбрать любой интересующийся раздел справочника.
Но для того, чтобы сейчас сделать динамический сайт и обеспечить возможность подключения файлов к HTML-сраницам достаточно использовать лишь только одну языковую инструкцию (в PHP любой сценарий состоит из последовательности инструкций). Это может быть одна из четырех возможных вариантов инструкций, предназначенных для подключения файлов:
- include;
- require;
- include_once;
- require_once.
Расписывать здесь их особенности нет смысла, так как это подробно пояснено в справочниках, например по ссылке "http://www.puzzleweb.ru/php/26_inc_files.php" можно хорошо с этим разобраться.
Мы же при создании сайта будем использовать инструкцию "require_once", обычно я использую этот вариант, для меня он наиболее удобен.
Ну а теперь, когда мы разобрались, что будем делать, дальше перейдем к практическим действиям.
Формируем блоки динамического сайта
Для того, чтобы сформировать блоки, которые затем будут участвовать в сборке веб-старниц, в первую очередь необходимо их создать. Делается это в текстовом редакторе Notepad++ аналогично тому, как мы создавали первый файл сайта "index.html" в статье Создаем веб-страницу и размещаем ее на локальном веб-сервере . Только расширение в этом случае нужно указывать не "html", а "php". При этом нужно обязательно обратить внимание на кодировку, чтобы в дальнейшем избежать появления на страницах разного рода непонятных знаков.
Файлы будем создавать в отдельной, вновь созданной папке "blocks". Для файлов, которые являются общими для всех страниц, присвоим названия с учетом названий соответствующих блоков. А для блока "main" укажем определенное название для каждой страницы сайта.
Таким образом, для главной страницы к блоку "main" будем подключать файл под названием "block_glavnaya". Для остальных: "header", "section", "aside" и "footer".
При создании файлов также можно учесть, что для упрощения этой процедуры возможно воспользоваться их копированием с помощью меню "Файл", указав при сохранении "Сохранить как" новое название файла.
Вообще, создание файлов стандартная процедура, поэтому сложностей возникнуть не должно. В итоге это должно выглядеть следующим образом.
Затем скопируем содержание каждого блока и перенесем его в соответствующий файл. На примере "header.php" рассмотрим это более подробно.
1. Открываем в редакторе Notepad++ файл "index.html", выделяем нужную область блока "header" и поочередным нажатием правой и левой кнопки мышки копируем ее в буфер обмена.
Следует отметить, что здесь мы копируем все содержимое блока за исключением меню. Это связано с тем, что для отражения активной кнопки меню в атрибутах тега
- необходимо для каждой страницы классу class присваивать значение "activ" . То же самое относится и к аналогичному фрагменту в блоке "footer".
В дальнейшем, эти фрагменты меню в блоках "header" и "footer" мы также вынесем в отдельные файлы, но сейчас не будем усложнять и оставим их на прежнем месте.
Как выделить и скопировать в буфер обмена фрагмент блока "header" показано ниже на скриншоте.
3. И в завершении, для того, чтобы сдвинуть содержимое файла в Notepad++ в левую сторону нужно при нажатой кнопке "Shift" несколько раз нажать на "Tab". В итоге получим сформированный файл "header.php" в следующем виде.
То же самое проделаем и для других файлов. Ниже, на скриншотах показано как будет выглядеть их содержимое по завершению всех необходимых действий.
Рис.6 Файл "section.php"
Рис.7 Файл "block_glavnaya.php"
Рис.8 Файл "aside.php"
Рис.9 Файл "footer.php"
Таким образом мы получили все файлы для создания динамической странице, и можем теперь перейти непосредственно к ее HTML-коду.
Преобразуем веб-страницу из статической в динамическую
Для того, чтобы обеспечить для нашей главной страницы загрузку файлов, которые были созданы в предыдущем разделе, необходимо сначала изменить расширение файла "index" с "html" на "php", а затем в редакторе Notepad++ вновь его открыть и внести следующие изменения:
- Удалить содержимое блоков, которое ранее было перенесено во вновь созданные файлы.
- На освободившееся место записать на языке PHP инструкции "require_once" с указанием пути к соответствующим файлам.
- В тегах меню
- , в которых указывается путь к страницам, для главной страницы заменить расширение с "html" на "php", а для других указать наименования вновь создаваемых страниц.
- Указать в заголовке "Главная".
После выполнения этих операций наша главная страница должна приобрести следующий вид.
Из приведенного скриншота можно заметить, что все инструкции PHP выделены открывающим тегом . Такое обозначение принято для указания когда начинать и заканчивать обработку кода, написанного на языке PHP. Поэтому в дальнейшем все коды PHP будут выделяться этим обозначением.
Также можно обратить внимание, что наименования новых страниц сделаны с учетом их предназначения, так лучше воспринимается структура и код сайта.
На этом все наши преобразования закончились. И теперь, если снова в браузере открыть главную страницу, то мы не должны увидеть никаких изменений с предыдущей версией сайта, она должна открываться так же как и ранее. Но, если в результате получится что-то не так, то значит надо искать допущенную ошибку в вышеприведенных операциях.
Обновим сейчас браузер и попробуем открыть главную страницу.
Как видно, в нашем случае главная страница открылась без каких-либо проблем. Но, в отличии от предыдущей работы сайта, страница приобрела такой вид в результате формирования ее на сервере при обработке запроса.
Таким образом, теперь у нашего сайта появилась первая динамическая страница. И после добавления к нему других подобных страниц этот сайт по праву можно будет назвать динамическим со всеми вытекающими последствиями, т.е. он станет обладать всеми теми преимуществами, присущими динамическим сайтам. И в этом мы сможем убедиться, когда в дальнейшем будем его наполнять разного рода функционалом.
На этом мы завершим этот важный этап разработки сайта и в следующей статье создадим для него новые динамические страницы. Исходные коды последней версии сайта можно скачать, как и обычно, по ссылке в конце статьи.
Исходные файлы сайта
Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов .
Нужно предпринять меры предосторожности. Потому что ресурс может получиться крайне динамичным. Того и гляди, укусит!
PHP и HTML
Сейчас эти две дисциплины связаны почти воедино. Их тандем является основой, на которой построена «жизнь » большей части интернета. Конечно, в связке с html применяются и другие серверные языки (Perl, ASP.NET ). Но их распространенность во всемирной паутине по сравнению с PHP , носит чисто эпизодический характер.
Согласно статистике, архитектура большинства ресурсов в интернете построена на основе php и html.
Для многих начинающих взаимосвязь между этими технологиями выглядит непонятной. С одной стороны статический html , который интерпретируется браузерами на стороне клиента. А с другой — программный язык, обрабатывающийся на сервере. Поэтому, перед написанием сайта на php с нуля, приведем простой пример взаимодействия этих двух технологий:- Создадим новый файл с расширением php ;
- Поместим туда следующий код:
Untitled web-page Сколько сейчас времени?- Сохраним файл на локальном сервере и откроем его в браузере. Затем нажмем на правую клавишу мыши и в контекстном меню выберем пункт «Просмотр html страницы ».
Как видно на скриншоте, строка не отображается в html коде страницы. И в браузере, и в коде видны лишь возвращенные дата и время. А это значит, что скрипт был обработан на серверной стороне. Поэтому создание сайта на php кардинально отличается от написания простых html страниц.
Динамический сайт
Современные сайты бывают двух основных типов:
- Статические – созданные лишь на основе html . Такие сайты не меняют свое содержимое в ответ на действия пользователей. Конечно, статический ресурс может реагировать на события и пользовательские действия. Но реализация динамичности страниц на стороне клиента имеет узкий диапазон применения, ограниченный возможностями Java Script .
Код Java Script выполняется в браузере на стороне клиента.
- Динамические – способны изменять свое состояние и содержимое — html страницы динамических сайтов формируются налету в момент выполнения кода в ответ на запрос пользователя, посланный им из браузера на сервер. Чаще всего генерация страниц на стороне сервера происходит с помощью кода, написанного на php .
Динамический сайт на php состоит из следующих файлов:
- index.php – является основным файлом проекта;
- Шаблоны – включают в себя структуру той или иной части страницы (шапки, подвала, основной части );
- Файлы CSS – хранят в себе все стилевые описания ресурса.
Кроме этого проект сайта может состоять из файлов, хранящих в себе код функций и методов php . А также включать в себя базу данных.
В большинстве CMS источником контента для наполнения страниц, динамически сгенерированных на стороне сервера, служит база данных. Чаще всего применяется СУБД MySQL.
Как пишется сайт на PHP
Чтобы разобраться, как создается сайт на php , рассмотрим практический пример. Конечно, многое в нем упрощено, но весь механизм работы и этапы создания сохранены.
Имеется html сайт со следующей структурой и дизайном:
Его код:Пример сайта на php Шапка
Контент