×

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

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

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

  • Рубрики
  • Слайдер статей
  • Тест сайта
  • Подписка
  • Сайдбар
  • Прокрутка вверх
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

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

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

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

    1. Проверка при малых разрешениях экрана
    2. Проверка при больших разрешениях экрана
    3. Проверка на выделенном домене

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

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

    Для этого предусмотрена возможность оценивать его работу в двух вариантах: с использованием зеркала сайта на поддомене текущего ресурса и на реальном интернет-ресурсе, размещенном на выделенном домене "avtobezugona.ru.

    Следует отметить, что первый вариант, предусматривающий использование зеркала сайта, позволяет наглядно оценить его работу при различных разрешениях экрана в диапазоне от 320px до 1920px. Что очень удобно для проверки адаптации во всем допустимом диапазоне.

    Второй вариант же просто показывает, как это выглядит в реальных условиях при работе в сети Интернет.

Самописный сайт своими руками!

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

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

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

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


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

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

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

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

Но, после того, как в разделе Создаем базу данных MySQL были довольно подробно показаны основные операции, необходимые для работы с БД 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" - для основного содержания.

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

Для увеличения / уменьшения размера изображения кликните по картинке
Проверка динамически формируемого меню, картинка 1

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

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

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

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Проверка динамически формируемого меню, картинка 2

Рис.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, подразумевающее тему угонов автомобиля;
  • id - параметр номера страницы в рубрике (в данном случае число 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-параметрами, как показано на следующем скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке
Проверка динамически формируемого меню, картинка 3

Рис.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++ после выполненных преобразований с отмеченными фрагментами изменения шаблона.

Для увеличения / уменьшения размера изображения кликните по картинке
Проверка динамически формируемого меню, картинка 4

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

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

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

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


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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Проверка динамически формируемого меню, картинка 5

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Проверка динамически формируемого меню, картинка 6

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

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


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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Проверка динамически формируемого меню, картинка 7

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

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

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

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

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

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


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

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

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

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

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

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


Комментарии


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

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

comments powered by HyperComments