×

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

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

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

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

    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.

Вы здесь: Главная → Сборник статей → URL для людей → Используем в сайте человеко-понятные урлы (ЧПУ)


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

Используем в сайте человеко-понятные урлы (ЧПУ)

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

Сегодня перейдем к довольно важному вопросу оптимизации сайта, каким является использование в обозначениях адресов страниц семантических υrl. Такой способ построения адресной структуры часто называют ЧПУ (человеко-понятный урл), или по другому - υrl для людей. В английском же варианте это называется sef υrl (search engines friendly υrl).

Данная технология предусматривает интуитивное осмысление адресов страниц, что выгодно отличается от обычного использования непонятных для пользователей GET-параметров. Для Рунета это делается с помощью словосочетаний, составленных с использованием "транслита" (метод написания латинскими символами нелатинского текста).

Можно выделить два основных достоинства, которые присуще сайтам с ЧΠУ:

  • адреса веб-страниц понятны для пользователей и легко ими запоминаются;
  • использование такого метода хорошо сказывается на индексации поисковыми системами.

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

Что же касается некоторого увеличения времени загрузки веб-страниц, которое требуется для обработки ЧПУ, то оно настолько мало, составляя доли миллисекунд, что этим обстоятельством вполне можно пренебречь.

Существуют разные способы применения ЧПУ, но в основном задача заключается в создании механизма преобразования обычных динамических ссылок в статические с человеко-понятными урлами c дальнейшей обработкой таких входящих url для возможности формирования динамических страниц.

Здесь мы рассмотрим два варианта работы с ЧПУ, которые не сложно применить для нашего сайта:

  • Первый, простейший способ - с прямой заменой динамических ссылок на статические адреса с ЧПУ с дальнейшим непосредственным их использованием в формировании динамических страниц при обработке запроса пользователей. Такой способ применения ЧПУ будет рассмотрен в этой статье.
  • Второй вариант, в котором преобразование динамических ссылок в статические с ЧПУ и обратное преобразование входящих ЧПУ в динамических url.
    Такой способ более предпочтителен, так как позволяет в полной мере использовать все возможности передачи и обработки информации с помощью GET-параметров. Но, в то же время, несколько сложнее. Поэтому, данному варианту будут отведены следующие статьи.

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

Содержание


  • Отличие ЧПУ от обычных динамических ссылок
  • Суть выполняемых преобразований
  • Заменяем обычные динамические ссылки на статические ЧПУ
  • Перенаправляем запросы с ЧПУ на главную страницу сайта
  • Исходные файлы сайта

Отличие ЧПУ от обычных динамических ссылок


Для того, чтобы наглядно рассмотреть отличия обычного формата ссылок от ЧПУ воспользуемся примером динамической адресной строки, которая была приведена в предыдущей статье, а именно:

httρ://newsite.local/index.php?section=article&rubric=carjacking&page=1, где для обозначения υrl использовались GET-параметры со следующими значениями:

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

А, теперь преобразуем этот адрес в человеко-понятный урл. Для этого заменим значения GET-параметров на словосочетания, которые будут нести некую смысловую нагрузку. В результате, с использованием транслита можем получить следующий статический адрес:

httρ://newsite.local/statyi/ugon-avtomobiley/statistika-ugonov-2016, где:

  • statyi - раздел сайта со статьями;
  • ugon-avtomobiley - рубрика на тему угонов автомобиля;
  • statistika-ugonov-2016 - название статьи;

Как видно, разница очевидна. Теперь адресная строка с ЧПУ стала осмысленной в отличие от обычного υrl. И даже не зная структуру сайта по ней можно определить, что этот адрес соответствует статье с названием "Статистика угонов за 2016 год", относящейся к рубрике "Угон автомобилей" и размещенной в разделе, где собраны статьи сайта.

В данном примере уровень вложенности υrl равен 3 (УВ3). Это означает, что для того, чтобы попасть на определенную страницу требуется с главной страницы перейти по ссылкам 3 раза. Можно оценивать уровень вложенности и по количеству слешей в адресной строке. В нашем случае их как раз 3.

Следует отметить, что при выполнении определенных преобразований с обычных ссылок на ЧПУ возможно также уменьшить длину адресных строк до УВ2, а то и даже до УВ1. Ниже приведены подобные примеры:

  • httρ://newsite.local/ugon-avtomobiley/statistika-ugonov-2016 (УВ2);
  • httρ://newsite.local/statistika-ugonov-2016 (УВ1).

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

В данном примере адрес страницы вполне может быть определен всего лишь по одному ЧПУ-словосочетанию statistika-ugonov-2016. И таким образом, при необходимости, можно исскуственно уменьшать уровень вложенности страниц удаляя из адресной строки ненужные директории. Что несомненно можно отнести к еще одному преимуществу использования ЧПУ в адресации страниц сайта.

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


Суть этого способа заключается в том, что в этом варианте происходит простая замена динамических адресов на человеко-понятные урлы. А далее, входящие url с ЧПУ будут перенаправляться на главную страницу, где и должно происходить формирование соответствующих динамических страниц.

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

А учитывая, что на этапе рассмотрения вопроса о работе с базой данных MySQL уже была создана таблица MySQL с занесенными данными соответствия обычных динамических ссылок к ЧПУ, то для решения этой задачи потребует всего лишь небольшая коррекция кодов ранее созданных файлов "index.php", "menu.php" и "ftr_menu.php". А также дополнение файла ".htaccess" специальным правилом перенаправления всех запросов на главную страницу сайта. Чем мы сейчас и займемся.

Заменяем обычные динамические ссылки на статические ЧПУ


В начале обратимся к таблице "url" БД MySQL, в которой одноименное поле "url" заполнено нужными словосочетаниями ЧПУ, как показано в таблице:

№ пп Заголовок страницы (title) Адрес с использованием GET-параметров (file) Адресная строка с ЧПУ (url)
1 Главная index.ρhρ (см. примечание *)
2 Статистика угонов index.ρhρ?section=article statistika-ugonov
3 Способы маркировки index.ρhρ?section=action sposobi-markirovki
4 Получить скидку index.ρhρ?section=righting poluchity-skidku
5 Контакты index.ρhρ?section=contacts kontakti

Рис.1 Таблица соответствия URL с ЧПУ к адресам с использованием GET-параметров

* - url главной страницы с ЧПУ обычно имеет вид доменного имени без добавления каких-либо символов.

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

Ниже показан код файла "menu.php" с внесенными изменениями (позиции с изменениями выделены более светлым фоном, а сами изменения - красным цветом).

  1. <?php

  2. //----Формирование главного меню-------------

  3. $data_bd = getAll('url');

  4. for ($i = 0; $i < count($data_bd); $i++) {

  5. $id = $data_bd[$i]['id'];

  6. $title = $data_bd[$i]['title'];

  7. $url = $data_bd[$i]['url'];

  8. if ($current_url == $url) echo '<li class="activ"><a href="'.$url.'">'.$title.'</a></li>';

  9. else

  10. echo '<li><a href="'.$url.'">'.$title.'</a></li>';

  11. }

  12. ?>

Рис.2 Замена ссылок на ЧПУ в файле "menu.php"

Основные изменения заключаются в том, что теперь при выборках из базы данных будут использоваться не обычные динамические адреса из поля "file", а значения ЧПУ из поля "υrl" (поз.7,8,10). В результате чего и будет выполняться необходимая подмена в главном меню обычных ссылок на человеко-понятные урлы.

Аналогично, такие же преобразования следует сделать и для меню футера в файле "ftr_menu.php". Код этого файла мало чем отличается от "menu.php", поэтому повторять его здесь нет необходимости.

Вот и все. В итоге, такими несложными действиями мы заменили в главном меню и меню футера обычные ссылки на ЧПУ.

Перенаправляем запросы с ЧПУ на главную страницу сайта


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

Делается это обычно в файле ".htaccessс" помощью модуля MOD_REWRITE веб-сервера Apache, который и предназначен для преобразования и перенаправления входящих url.

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

  1. AddDefaultCharset UTF-8

  2. RewriteEngine on

  3. RewriteCond %{REQUEST_FILENAME} !-d

  4. RewriteCond %{REQUEST_FILENAME} !-f

  5. RewriteRule ^(.*)$ index.php [L]

Рис.3 Перенаправление в файле ".htaccessс" всех запросов на главную страницу сайта

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

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

скриншот 11

Перед тем, как прописывать условия и правила механизма преобразований, в начале директивой RewriteEngine необходимо включить работу модуля. Это делается установкой директивы в положение "on" (поз.2). Соответственно, если нужно выключить, то "off".

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

Если запрос не соответствует существующему файлу или каталогу, то тогда выполняется следующее за условиями правило (поз.5), в котором используется синтаксис вида: RewriteRule "шаблон" "подстановка" "флаг".

Первый аргумент определяет условие в виде шаблона регулярного выражения, предназначенного для проверки соответствия входящего url. В данном случае регулярное выражение ^(.*)$ означает, что при любом наборе символов адресная строка будет соответствовать заданному шаблону.

Во второй части правила преобразования указанная в этом аргументе строка будет подставляться вместо оригинального url, для которого имеется совпадение шаблону. В данном случае это "index.php".

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

А в качестве третьего аргумента директивы RewriteRule используется флаг [L] ("last" последнее правило) при котором все преобразования останавливаются и больше не применяется никаких правил. В данном случае эту часть можно было бы и не указывать, так как в файле ".htaccessс" в настоящий момент присутствует только одно правило. Но для того, чтобы показать все составные части этой директивы, мы этот аргумент здесь все же оставим.

Что же касается символов, которые используются в регулярном выражении шаблона, то

  • - начало строки;
  • $ - конец строки;
  • () - выделение группы символов;
  • . - любой одиночный символ;
  • * - ставится после символа (группы), означает, что символ (группа) может присутствовать неограниченное число раз, либо отсутствовать;

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

Формируем динамические страницы из входящих статических ЧПУ


Сформировать динамические страницы из полученных адресов с ЧΠУ довольно просто, так ранее в предыдущей статье был составлен скрипт, с помощью которого в файле "index.php" используя входящий url из БД MySQL извлекаются все необходимые данные для формирования динамических страниц.

Поэтому, для того, чтобы получат данные не по динамическим адресам, как было ранее, а исходя из статических ЧΠУ, достаточно в соответствующем скрипте при выборке записей заменить поле "file" на "url" таблицы MySQL, как показано на рис.3. (строка с изменениями выделена более светлым фоном, а само изменение - красным цветом)

  1. <?php

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

  3. $table = 'url';

  4. $column = 'url';

  5. $value = substr($_SERVER['REQUEST_URI'], 1);

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

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

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

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

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

  11. ?>

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

Таким образом, мы сделали все необходимые преобразования для работы сайта с ЧΠУ. После чего проверим его работу в новых условиях.

Проверка работы сайта с ЧПУ


Для проверки работы сайта с ЧΠУ с начала откроем главную страницу, набрав в адресной строке имя домена, в нашем случае - "newsite.local". Если все сделано правильно, то главная страница откроется как прежде, но с одним отличием - в адресной строке теперь не будет адреса "index.php". Будет только доменное имя без каких-либо дополнительных символов.

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

Для увеличения / уменьшения размера изображения кликните по картинке
Используем в сайте человеко-понятные урлы (ЧПУ), картинка 1

Рис.5 Проверка работы с ЧПУ

В этом примере используется адрес, соответствующий первому уровню вложенности страницы.

Следующим шагом сделаем проверку открытия веб-страницы с уровнем вложенности больше 1, используя ссылку, которая рассматривалась в первой части статьи: httρ://newsite.local/statyi/ugon-avtomobiley/statistika-ugonov-2016.

Для этого, сначала введем в поле "url" таблицы MySQL соответствующее значение, как показано на рис.6.

Для увеличения / уменьшения размера изображения кликните по картинке
Используем в сайте человеко-понятные урлы (ЧПУ), картинка 2

Рис.6 Ввод ссылки соответствующей 3-му уровню вложенности

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

Для увеличения / уменьшения размера изображения кликните по картинке
Используем в сайте человеко-понятные урлы (ЧПУ), картинка 3

Рис.6 Проверка работы с ЧПУ c уровнем вложенности страницы больше 1

Таким образом мы завершили рассмотрение одного их вариантом использования ЧΠУ, который основывается на непосредственном преобразовании динамических ссылок в ЧΠУ с дальнейшим непосредственным их использованием на входе при формировании динамических страниц.

В следующих статьях мы воспользуемся другим способом, при котором преобразование динамических ссылок в статические с ЧΠУ и обратное преобразование входящих ЧΠУ в динамические url будет происходить с использованием GET-параметров.

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


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

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

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

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

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

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


Комментарии


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

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

comments powered by HyperComments