Внимание! Сайт переехал на новый домен sayt-sozdat.ru. Пожалуйста, обновите страницы закладок с новыми URL
×
Закрытие
×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

Устанавливаем графический редактор GIMP

  1. Выбор графического редактора
  2. Устанавливаем программу GIMP
  3. Устанавливаем Руководство пользователя

Здравствуйте уважаемый посетитель!

При создании и развитии сайта не обойтись без графического редактора. Этот инструмент необходим для формирования и обработки различных графических элементов, без которых сайт попросту не сможет существовать. Поэтому в наборе инструментов вебмастера графический редактор занимает важнейшее место.

В статье Устанавливаем бесплатный графический редактор GIMP речь пойдет о бесплатной программе GIMP, которая позволяет в полной мере решать вопросы по созданию элементов дизайна веб-страниц. И будет показано, как ее установить на локальный компьютер.

Кроме того здесь можно будет посмотреть, как в этот редактор добавить встроенное "Руководство пользователя", а также приведен бесплатный видеокурс, где можно поближе с ним познакомиться.

Для тех же, кто хочет заниматься дизайном на платном Adobe Photoshop (фотошоп), здесь также упомянут и такой вариант, основанный на использовании продления льготного бесплатного периода фотошопа на неопределенное время...

Cайт на практическом примере

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние сайта, создаваемого в рамках цикла статей Самописный сайт с нуля своими руками.

Исходные файлы данного сайта можно скачать из прилагаемых к статьям дополнительных материалов.

Вы здесь: Главная → Сборник статей → Динамический сайт → Динамический сайт на основе шаблона главной страницы


Автор: / Дата:

Динамический сайт на основе шаблона главной страницы

Преобразуем динамический сайт на основе шаблона главной страницы

Здравствуйте, уважаемый посетитель!

В предыдущих статьях, касающихся создания динамического сайта мы использовали несколько динамических страниц, шаблоны которых размещались в отдельных файлах, а формирование их при запросах пользователей выполнялось с использованием разных элементов (PHP-файлов). Такая структура обуславливалась тем, что на том этапе нами еще не были рассмотрены вопросы взаимодействия с базой данных.

Но, после того, как в разделе Работа с БД MySQL были показаны основные операции, обеспечивающие запись и вывод данных БД, используя этот инструмент, мы можем теперь еще более упростить наш сайт. В данном случае речь идет о формировании всех динамических страниц на основе всего лишь одного шаблона, размещенного в файле "index.ρhp".

Этими преобразованиями мы не только существенно сократим общий объем кода, но и значительно упростим в дальнейшем работу с сайтом.

Содержание


  • Суть выполняемых преобразований
  • Дополняем таблицу MySQL дополнительными данными
  • Преобразуем URL используя GET-параметры
  • Составляем скрипт получения данных из БД MySQL
  • Преобразуем шаблон главной страницы
  • Удаляем все освободившиеся файлы
  • Удаляем все освободившиеся файлы
  • Исходные файлы сайта

Суть выполняемых преобразований


Если посмотреть на HTML-код существующих шаблонов динамических страниц, то можно обратить внимание, что после проведенных преобразований в предыдущей статье они теперь стали содержать еще большую часть одинаковых элементов, которые в основном состоят из одних и тех же инструкций по подключению PHP-файлов. И лишь совсем незначительные части кода остались отличными для каждого шаблона, а именно:

  • наименование страницы в теге <title> контейнера <head>;
  • краткое содержание страницы в области <head> элемента <meta> с атрибутом name="Description";
  • дополнительный элемент навигации "Хлебные крошки" (содержимое тега <span> элемента <div> с классом "band").
  • наименование файла запрашиваемого ресурса основного содержания страницы (инструкция require_once в элементе <main>).

Исходя из этого, если мы создадим механизм, который позволит в одной физической странице в зависимости от запроса пользователей вносить соответствующие изменения в перечисленные фрагменты кода, то получим шаблон, с помощью которого можно будет без ограничений генерировать все динамические страницы сайта.

В этом и заключается суть необходимых преобразований, которые мы и будем сегодня выполнять. При этом, в качестве создаваемого шаблона будем использовать главную страницу, которая физически размещается в файле "index.ρhρ".

Дополняем таблицу MySQL дополнительными данными


Для того, чтобы при обработке запросов иметь возможность получать нужные данные, необходимо заблаговременно их ввести в БД MySQL. В нашем случае логично будет это сделать в существующую таблицу "url", так как в ней уже имеется некоторая информация, относящаяся ко всем существующим на данный момент страницам сайта.

Для этого, создадим в этой таблице следующие дополнительные поля:

  • "title-page" - для заголовков;
  • "description" - для краткого описания;
  • "content" - для основного содержания.

Ниже показан скриншот структуры таблицы после внесенных дополнений.

Скриншот таблицы url после добавления полей

Рис.1 Скриншот таблицы "url" после добавления полей

Здесь видно, что при создании полей применен следующий тип:

  • "title-page" - тип "VARCHAR" с максимальной длиной в 100 символов;
  • "description" - "VARCHAR" с максимальной длиной в 200 символов;
  • "content" - "TEXT" с максимальной длиной символов равной 65535.

Ну, а теперь, осталось их только заполнить. Сделать это очень просто, скопировав соответствующие фрагменты кода в ячейки полей таблицы. При этом, основное содержание следует копировать с файлов, подключенных через языковую инструкцию require_once в элементе <main>. Остальные фрагменты - из файлов динамических страниц.

На рис.2 показан скриншот таблицы после заполнения дополнительных полей.

Скриншот таблицы url с дополнительными данными

Рис.2 Скриншот таблицы "url" с дополнительными данными

Преобразуем URL используя GET-параметры


Для того, чтобы все запросы пользователей могли попадать на шаблон, размещенный в файле "index.ρhρ", необходимо сделать некоторые преобразования в адресации сайта.

И это можно сделать с помощью GET-параметров, которые применяются для передачи данных с помощью ссылки в URL. В адресной строке браузера при отсутствии ЧПУ обычно можно их увидеть в следующем виде имя_параметраN=значение_параметраN. При этом, начинаются они с окончания URL-адреса после знака ?, а разделяются - &.

Ниже показан пример варианта адресной строки с уровнем вложенности равным 3, который можно было бы применить к нашему сайту:

httρ://avtobezugona.ru/index.php?section=article&rubric=carjacking&page=7, где

  • section - параметр, определяющий раздел сайта (в данном случае имеет значение article, подразумевающее раздел статей);
  • rubric - параметр, определяющий рубрику (в примере имеет значение carjacking, подразумевающее тему угонов автомобиля;
  • page - параметр номера страницы в рубрике (в данном случае число 7);
  • ? - начало GET-параметров;
  • & - разделение параметров.

Исходя из этого, преобразуем адреса страниц сайта в URL главной странице "index.ρhρ" с использованием GET-параметров согласно следующей таблицы:

№ пп Заголовок страницы Существующий адрес Адрес с использованием GET-параметров
1 Главная index.ρhρ index.ρhρ
2 Статистика угонов article.ρhρ index.ρhρ?section=article
3 Способы маркировки action.ρhρ index.ρhρ?section=action
4 Получить скидку righting.ρhρ index.ρhρ?section=righting
5 Контакты contacts.ρhρ index.ρhρ?section=contacts

Рис.3 Таблица соответствия существующих адресов к адресам с использованием GET-параметров

А, теперь заменим значения в поле "file" таблицы MySQL на адреса с GET-параметрами, как показано на следующем скриншоте.

Скриншот таблицы

Рис.4 Скриншот таблицы "url" с новыми данными адресов страниц

Таким образом мы подготовили все данные, необходимые для формирования динамических страниц и теперь можем заняться получением их из базы данных.

Составляем скрипт получения данных из БД MySQL


Для данного случая составить PHP-код получения записей из БД MySQL довольно просто используя пример вывода одиночной строки, который ранее рассматривалс в разделе Вывод одиночной строки (использование одномерного массива) в статье, посвященной выводу данных из БД MySQL в PHP.

Для этого не потребуется составлять новый запрос на извлечение данных в одномерный ассоциативный массив, а можно использовать ранее составленную универсальную функцию "getLine($table, $column, $value)".

А, PHP-код, который позволил бы получить в зависимости от текущего URL нужные данные в виде PHP-переменных, мало чем будет отличаться от кода, примененного для проверки вывода одиночной строки в указанной статье.

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

  1. <?php

  2. //Получение данных для динамических страниц

  3. $current_url = substr($_SERVER['REQUEST_URI'], 1);

  4. $table = 'url';

  5. $column = 'file';

  6. $value = $current_url;

  7. $data_bd = checkLine($table, $column, $value);

  8. if ($data_bd == true) {

  9. $data_bd = getLine($table, $column, $value);

  10. $title_add = $data_bd['title'];

  11. $titlepage_add = $data_bd['title-page'];

  12. $description_add = $data_bd['description'];

  13. $content_add = $data_bd['content'];

  14. }

  15. ?>

Рис.5 PHP-код получения данных для динамических страниц

В начале создается переменная $current_url (поз.5), которой с помощью суперглобального массива "$_SERVER" и с использованием строковой функции substr присваивается текущий URL-адрес. В данном случае эта строковая функция применена для удаления из полученного адреса ненужного для дальнейшей обработки знака слэш (/).

Примененные здесь преобразования полностью аналогичны тому, как это делалось в предыдущей статье при формировании главного меню в файле "menu.php" (рис.5). И теперь, после получения в этой части сайта значения переменной $current_url, аналогичный фрагмент кода можно будет из файла "menu.php" удалить.

Далее, в позициях 4÷6 присваиваются необходимые значения переменным $table, $column и $value, которые будут использоваться в качестве параметров функций "checkLine()" и "getLine()".

Первой выполняется функция "checkLine($table, $column, $value)", с помощью которой проверяется, имеется ли в таблице с именем 'url' хотя бы одна запись, в которой в поле 'file' присутствует значение, равное переменной $value (поз.7).

И только в случае, если такая запись существует, выполняется функция "getLine($table, $column, $value)". Где из возвращенного массива (поз.9), $data_bd необходимые данные заносятся в переменные $title_page, $description и $content (поз. 10÷13).

Таким образом, мы получили из базы данных всю нужную информацию для формирования динамических страниц, после чего можем перейти к следующему этапу преобразований - размещению соответствующих фрагментов кода в шаблоне "index.php".

Преобразуем шаблон главной страницы


Для того, чтобы преобразовать существующий шаблон главной страницы в универсальный, способный формировать любые динамические страницы сайта, следует внести полученные на предыдущем этапе данные в определенные фрагменты кода файла "index.php", перечисленные в первом разделе данной статьи.

Ниже показан скриншот файла "index.php" в редакторе Nodepad++ после выполненных преобразований с отмеченными фрагментами изменения шаблона.

Скриншот файла index.php после преобразований

Рис.6 Скриншот файла "index.php" после преобразований

Как видно, теперь шаблон главной страницы, практически, полностью стал состоять из подключенных к нему отдельных ресурсов с помощью языковых инструкций PHP "require_once". А, код его вполне компактен и хорошо структурирован.

Но самое главное, что теперь с помощью этого шаблона в зависимости от текущего URL можно формировать без ограничения любые динамические страницы сайта. Для этого достаточно лишь в таблицу "url" добавлять соответствующие данные. Не правда ли, довольно удобно и рационально.

Удаляем все освободившиеся файлы


Как было ранее сказано, проводимые преобразования позволят существенно сократить объем кода сайта. И в этом мы сможем убедиться, удалив из него все файлы, которые больше не будут нужны для формирования страниц.

Так, открыв корневой каталог "www", мы можем смело удалить прежние ненужные шаблоны: "article.php", "action.php", "righting.php" и "contacts.php". В итоге, содержимое папки "www" значительно сократиться и примет вид, изображенный на рис.8.

Содержимое корневого каталога www

Рис.7 Содержимое корневого каталога "www"

А, в папке "blocks" можно удалить файлы, которые ранее предназначались для основного содержания страниц, такие как: "block_glavnaya.php", "block_article.php", "block_action.php", "block_righting.php" и "block_contacts.php". После чего эта папка тоже значительно уменьшится в своих размерах, как видно на следующем скриншоте.

Содержимое папки blocks

Рис.8 Содержимое папки "blocks"

Проверяем результаты преобразования


Если все сделано правильно, то после обновления работа сайта не должна измениться. За исключением только того, что в адресной строке в качестве URL вместо наименований файлов теперь будет отображаться URL главной страницы "index.php" с соответствующими GET-параметрами. При этом URL самой главной страницы останется таким, как прежде - "index.php" без каких-либо добавлений.

Ниже, на скриншоте видно, как по-новому стал выглядеть URL-адрес с GET-параметрами одной из страниц.

Скриншот таблицы после преобразований

Рис.9 Скриншот таблицы после преобразований

Ну, вот и все. На этом мы закончили все намеченные преобразования.

Конечно, в реальной жизни, в случае разработки динамического сайта, делается это сразу с максимальной оптимизацией его структуры и кода.

Здесь же я сознательно разбил это на несколько этапов в целях лучшего понимания всех процессов, которые нужно было выполнить. И надеюсь, что такой подход оказался достаточно уместным для понимания принципа построения динамического сайта.

А, в следующей статье мы заменим адресацию страниц с GET-параметрами на человеко-понятные урлы (ЧПУ), что не составит большого труда сделать после всех уже выполненных нами преобразований.

Исходные файлы сайта


Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

  • Файлы каталога www
  • Таблицы базы данных MySQL

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учета мнения посетителей.

Буду Вам за это очень признателен!