×
Закрытие
×

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

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

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

  • Создаем сайт для работы в Интернете

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

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

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

    Причем чтобы такой сайт был создан не в стандартном исполнении на основе какой-нибудь бесплатной СMS, а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

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

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

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

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

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

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

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

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

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


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

Как сделать собственную страницу ошибки 404

Делаем собственную страницу ошибки 404

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

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

Содержание


  • Рекомендации по созданию страницы с ошибкой 404 Not found
  • Создаем каркас страницы и оформляем основное ее содержание
  • Перенаправляем запросы с ошибкой на страницу 404
  • Исходные файлы сайта

Рекомендации по созданию страницы с ошибкой 404 Not found


Существуют различные варианты пользовательских страниц, предназначенных для отображения ошибки 404 (Not found). На то они и пользовательские, чтобы отражать всю креативность их авторов. О множестве вариантов можно судить хотя бы из примеров этой тематике из картинок Яндекса.

скриншот 78

Но в любом случае, для того, чтобы правильно создать такую страницу, следует при ее оформлении принимать во внимание определенные правила и рекомендации, такие как:

  • Необходимость поддержания единого стиля сайта. Дизайн страницы 404 не должен вызвать у пользователя ощущение, что он попал на какой-нибудь другой ресурс.
  • Страница 404 не должна выглядеть как обычная страница. Посетитель должен отчетливо понять, что ресурс, который он хотел увидеть, не найден. И что в основном содержании нет искомого контента.
  • В описании возникшей проблемы не следует отпугивать посетителей излишней технической терминологией или какой-либо другой специфической информацией о причинах этой ошибки. Необходимо постараться кратко, простыми словами объяснить суть проблемы.
  • Для придания большей индивидуальности при оформлении страницы желательно текст сопроводить каким-либо подходящим к этому случаю графическим изображением.
  • Для того, чтобы попытаться удержать пользователя на сайте, желательно предоставить ему возможность в один клик перейти на другие доступные разделы или популярные страницы, которые могут его заинтересовать. Хорошим решением также будет, если позволить ему через поиск по сайту найти нужный контент. Ведь попав сюда, он, вероятно, что-то искал. И нужно помочь ему это сделать. При этом обязательным условием является наличие ссылки на главную страницу сайта.
  • Не лишним будет предложить пользователю проверить написание ссылки в случае, если он вводил URL искомой страницы в адресной строке браузера самостоятельно. Вполне возможно, что он допустил ошибку. И лучше будет, если он попытается исправить ее не покидая сайт в поисках нужной информации.
  • И конечно, содержание страницы должно показывать любезность к посетителю. Чтобы он смог почувствовать желание и готовность владельца ресурса (администратора сайта) помочь ему в дальнейшем поиске и использовании контента сайта.

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

Создаем каркас страницы и оформляем основное ее содержание


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

Поэтому в первую очередь создадим в корне сайта файл с именем, соответствующему данному случаю, например "page_404.php". Как создать новый файл ранее показывалось здесь. После чего можно перейти и к написанию кода страницы, определив ее структуру и содержание.

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

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

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

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

kak-sdelat-sobstvennuyu-stranicu-404_1

Рис.1 Файл "page_404.php" с кодом страницы 404

А далее следует создать файл block_404.php, подключаемый инструкцией <?php require_once "blocks/block_404.php";?> в строке 39 (рис.1), в котором будет размещаться основное содержание страницы.

  1. <div class="error-empty"></div>

  2. <div class="error-img">

  3. <img src="/images/page_404/page_404.png" alt="Страница 404">

  4. </div>

  5. <div class="error-text">

  6. <h1>Ошибка 404</h1>

  7. <hr>

  8. <p>К сожалению, запрашиваемая страница не найдена. Но это не причина покинуть сайт.</p>

  9. <p>Если вы вводили адрес страницы самостоятельно, то пожалуйста, проверьте, не было ли ошибки. После чего повторите запрос.</p>

  10. <p>В любом случае для поиска нужной информации вы можете использовать любые доступные разделы через меню сайта или <a href="/">Главную страницу</a>. Либо воспользоваться поиском по сайту.</p>

  11. <div class="seach">

  12. <h3>Поиск по сайту</h3>

  13. <label>Ключевое слово / фраза / URL страницы:</label>

  14. <div class="ya-site-form ya-site-form_inited_no" onclick="return {'action':'https://avtobezugona.ru/poisk.html','arrow':false,'bg':'transparent','fontsize':16,'fg':'#000000','language':'ru','logo':'rb','publicname':'Введите запрос','suggest':true,'target':'_self','tld':'ru','type':2,'usebigdictionary':true,'searchid':2301097,'input_fg':'#000066','input_bg':'#fdfadc','input_fontStyle':'normal','input_fontWeight':'normal','input_placeholder':'Введите запрос','input_placeholderColor':'#5f5f5f','input_borderColor':'#eaeaea'}">

  15. <form action="https://yandex.ru/search/site/" method="get" target="_self" accept-charset="utf-8">

  16. <input type="hidden" name="searchid" value="2301097"/>

  17. <input type="hidden" name="l10n" value="ru"/>

  18. <input type="hidden" name="reqenc" value=""/>

  19. <input type="search" name="text" value="" placeholder="Введите запрос"/>

  20. <input type="submit" value="Найти"/>

  21. </form>

  22. </div>

  23. <script>

  24. (function(w,d,c){var s=d.createElement('script'),h=d.getElementsByTagName('script')[0],e=d.documentElement;if((' '+e.className+' ').indexOf(' ya-page_js_yes ')===-1){e.className+=' ya-page_js_yes';}s.type='text/javascript';s.async=true;s.charset='utf-8';s.src=(d.location.protocol==='https:'?'https:':'http:')+'//site.yandex.net/v2.0/js/all.js';h.parentNode.insertBefore(s,h);(w[c]||(w[c]=[])).push(function(){Ya.Site.Form.init()})})(window,document,'yandex_site_callbacks');

  25. </script>

  26. </div>

  27. </div>

Рис.2 Блок основного содержания в файле "block_404.php"

Где в качестве элемента поиска применен тот же блок (поз.11÷26), который ранее рассматривался при организации поиска на сайте. Более подробно об этом можно посмотреть в соответствующем разделе.

Кроме того здесь предусмотрено использование графического изображения <img src="/images/page_404/page_404.png" alt="Страница 404"> (поз.3). Поэтому необходимо также будет подобрать подходящую по теме готовую картинку или составить из каких-либо заготовок свою композицию. О том как это сделать можно посмотреть здесь.

В нашем случае возьмем в качестве заготовки скаченную с фотостока картинку, отражающую озабоченного человека у компьютера.

Полученная картинка с фотостока

Рис.3 Полученная картинка с фотостока

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

Изображение по теме ошибки 404

Рис.4 Изображение по теме ошибки 404

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

  1. /*-----Страница 404-----*/

  2. .error-block {

  3. width:95%;

  4. margin:0 auto 0 auto;

  5. position:relative;

  6. }

  7. .error-empty {

  8. min-height:1.875em;

  9. }

  10. .error-text {

  11. display:block;

  12. padding-right:0;

  13. }

  14. .error-img {

  15. float:left;

  16. width:30%;

  17. display:block;

  18. padding:0 1em .5em 0;

  19. }

  20. .error-img img{

  21. width:100%;

  22. }

  23. .error-text h1{

  24. font-size:1.5625em;

  25. font-style:normal;

  26. font-weight:normal;

  27. color:#006;

  28. font-family:'Comfortaa', cursive;

  29. text-shadow:1px 1px 0px #eee, 2px 2px 2px #222;

  30. text-align:center;

  31. margin-bottom:.5em;

  32. }

  33. .error-text p{

  34. text-indent:1em;

  35. color:#006;

  36. padding-bottom:.25em;

  37. font-size:0.9375em;

  38. }

  39. .error-text hr{

  40. height:.0625em;

  41. background:#bd072e;

  42. margin:1em 0 1em 0;

  43. box-shadow:0 0 .0625em 0 #bd072e;

  44. }

  45. @media only screen and (min-width: 600px) {

  46. .error-text{

  47. width:60%;

  48. display:table-cell;

  49. vertical-align:middle;

  50. }

  51. .error-img{

  52. width:40%;

  53. display:table-cell;

  54. float:none;

  55. vertical-align:middle;

  56. padding:0 2em .5em 0;

  57. }

  58. .error-text p{

  59. font-size:1em;

  60. }

  61. }

  62. @media only screen and (min-width: 800px) {

  63. .error-text{

  64. width:65%;

  65. }

  66. .error-img{

  67. width:35%;

  68. padding:0 3em .5em 0;

  69. }

  70. }

  71. @media only screen and (min-width: 1000px) {

  72. .error-block{

  73. width:83.33%;

  74. }

  75. }

  76. @media only screen and (min-width: 1280px) {

  77. .error-text p{

  78. font-size:1.0625em;

  79. }

  80. }

  81. @media only screen and (min-width: 1500px) {

  82. .error-text p{

  83. font-size:1.125em;

  84. }

  85. }

  86. @media only screen and (min-width: 1700px) {

  87. .error-text{

  88. width:70%;

  89. }

  90. .error-img{

  91. width:30%;

  92. }

  93. .error-text p{

  94. font-size:1.1875em;

  95. }

  96. }

Рис.5 CSS-код блока основного содержания

Наверное, нет необходимости подробного рассмотрения данного кода, так как ранее мы не раз уже использовали приведенные здесь свойства. Стоит лишь отметить, что для фрагмента поиска по сайту (поз.11÷26 на рис.2) используются те же самые свойства, которые ранее были назначены для аналогичного блока, расположенного в сайдбаре (в этой таблице они не показаны).

А для адаптации страницы для разного разрешения, чтобы она выглядела надлежащим образом на всю ширину экрана во всем заданном диапазоне от 320px до 1920px, применено несколько медиа-запросов: для разрешения более 600px, 800px, 1000px, 1280px, 1500px и 1700px (поз.45÷96).

В приведенной таблице показана сквозная нумерация строк кода. Что касается позиций в каскадной таблице стилей CSS, находящейся в файле "main.css" исходных файлов сайта, то при необходимости, его фрагменты можно найти по следующим номерам строк: для разрешения менее 600px (поз.980÷1024), более 600px (поз.1597÷1611), более 800px (поз.1661÷1667), более 1000px (поз.1728÷1730), более 1280px (поз.1784÷1786), более 1500px (поз.1827÷1829) и более 1700px (поз.1853÷1861).

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

Вид созданной страницы 404

Рис.6 Вид созданной страницы 404

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

Вид страницы при малом разрешении экрана

Рис.6 Вид страницы при малом разрешении экрана

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

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

Перенаправляем запросы с ошибкой на страницу 404


Так как на сайте применяется ЧПУ с перенаправлением запросов с помощью директив модуля MOD_REWRITE в файле .htaccess, то редирект на страницу 404 необходимо предусмотреть для двух вариантов:

  • Сервер выдает ошибку 404 (Not Found) в случае, если запрос не обрабатывается шаблоном правил RewriteRule модуля MOD_REWRITE и не найден соответствующий его адресу файл. В таких ситуациях редирект обеспечивается применением надлежащей директивы в файле .htaccess.
  • Запрос обработан правилом RewriteRule модуля MOD_REWRITE и перенаправлен в шаблон главной страницы в файл index.php. Но при дальнейшей его обработке не была обнаружена какая-либо существующая страница сайта. В этом случае редирект на страницу 404 выполняется средствами PHP.

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

Ниже показан пример отображения в браузере технической страницы 404 при обнаружении сервером ошибки Not Found в запросе на одну из страниц сайта newsite.local, установленном на локальном веб-сервере Open Server. В котором в расширении html ошибочно указано htm.

Ошибка 404 при неправильном расширении в URL

Рис.7 Ошибка 404 при неправильном расширении в URL

А для того, чтобы для таких случаях вместо технической страницы отображалась собственная страница 404, необходимо в файл .htaccess добавить следующую строку кода:

  1. ErrorDocument 404 /page_404.php

Рис.8 Редирект 404 в файле .htaccess

В которой во второй части директивы ErrorDocument 404 выполняется перенаправление на нашу, созданную в предыдущей части статьи страницу 404 с адресом /page_404.php.

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

Редирект на страницу 404 через файл .htaccess

Рис.9 Редирект на страницу 404 через файл .htaccess

Как видно, в данном случае через редирект в файле .htaccess мы попали на ранее созданную нами страницу 404.

А теперь рассмотрим другой вариант, при котором при запросе на несуществующий ресурс сайта сервер не выдает ошибку Not Found, в случае, если он обрабатывается правилом RewriteRule модуля MOD_REWRITE и перенаправляется в файл index.php.

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

Ниже показан пример запроса на страницу "Контакты", в адресе которого допущена ошибка /kontbakty.html (лишний символ b).

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

Рис.10 Ошибка при неправильном адресе страницы

Здесь видно, что в этом случае сервер не выдает ошибку 404, так как запрос обрабатывается файлом index.php. Однако, динамическая страница с несуществующим адресом не смогла быть сформирована. И в области основного содержания станицы вместо контента отображается ошибка PHP (не найден соответствующий запросу файл, указанный в инструкции include_once, в строке 126 файла index.php).

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

Ниже показан PHP-код обработчика запросов, расположенный в файле index.php, в котором в случае отсутствия в базе данных заданной страницы, происходит нужный редирект.

kak-sdelat-sobstvennuyu-stranicu-404_2

Рис.11 PHP-код обработчика запросов с редиректом на страницу 404

В данном коде проверка на наличие в базе данных записи, соответствующей заданной странице (поз.11÷23), выполняется с помощью вызова пользовательской функции getLineThreeColumnThreeСondition() (поз.18). Которая извлекает запись исходя из всех трех значений GET-параметров, сохраненных в массиве $get_array (поз.3÷9) и определяющих URL страницы: section ($get_array[2]), rubric ($get_array[1]) и page ($get_array[0]).

И в случае, если такой станицы не существует, то с помощью отправки HTTP заголовка header() (поз.21) производится редирект на страницу 404 с прекращением выполнения текущего скрипта exit (поз.22).

Если же заданный URL указан правильно, и такая страница существует, то выполняются дальнейшие действия по получению данных для формирования динамической страницы (поз.25÷53).

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

Редирект при неправильном адресе страницы

Рис.12 Редирект при неправильном адресе страницы

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


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

В следующей статье мы сделаем то же самое, но уже для другого вида ошибок, а именно: ошибок PHP.

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


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

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

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

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

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

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


Комментарии


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

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

comments powered by HyperComments