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

7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. }

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

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

Перенаправляем запросы с ошибкой на страницу 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, необходимо в файл .htaccess добавить следующую строку кода:

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

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

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

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

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

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

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

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

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

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

Рис.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.

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

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

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

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

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

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

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