Skip to content

Guide to PHP and MySQL (Buffalo State College Version)

Chapter 17: Creating a Custom 404/500 Error Page

HTTP Response Status Codes

When I think of a well-designed user-friendly web site, one thing many sites fail to implement is a well designed error page. HTTP status codes provide a way to advise your users if they are trying to reach a page that is not available (error Code 404) or you do not have permission to access a certain page (error code 403). When you are developing a PHP/MySQL web site you may also encounter a 500 error code (Internal Server Error) which usually means you have some typo or incorrect syntax in your PHP code such as a missing quotes (") or closing brace (}). See Wikipedia for a detailed list of response codes.

Setting Up a 404 Error Page

The first step is to create a .htccess file in the root directory of your web site (probably public_html or www or htdocs). The .htaccess provides many settings for the web server, including where to find your 404 error page. The Apache web site provide a more complete explanation of the possible settings in a .htaccess file. Below is a very basic .htaccess file to handle 404 errors.

ErrorDocument 404 /error_404.php
ErrorDocument 500 /error_404.php
ErrorDocument 502 /error_404.php
ErrorDocument 503 /error_404.php
ErrorDocument 504 /error_404.php
Figure 17-1: Sample .htaccess File

The next step is to create your error_404.php error page file. You should design your error page to match the look and feel of your we site pages. This page should inform the user what might have happened and how to rectify the issue. You should also include contact information so the user might be able to contact someone from your web team for additional information and help.

<!doctype html>
<html lang="en">
    <title>Jim's Web Site 404 Error Page</title>
    <meta name="Generator" content="Notepad++" />
    <meta name="Author" content="Jim Gerland" /> 
    <meta name="Keywords" content="web programming, HTML, CSS, JavaScript, PHP, MySQL" />
    <meta name="Description" content="Windows Consulting and Training" />
    <meta charset="windows-1252">
    <link rel="stylesheet" type="text/css" href="/includes/styles.css" />
    <div id="main">
      <p style="Color: #F00; font-weight: bold;">Sorry :-(<br/>
      The file you tried to access (<code><em><?php echo($_SERVER['REQUEST_URI']); ?></em></code>)
      does not exist.</p> 
      <p>If you have any questions about a computer application, 
      please <span style="font-style: italic; color: #00f;">contact us via email 
      (put you email address here)</span> and we will do my best to find an answer for you.<br />
      Thanks,<br />
    </div> <-- end id="main" -->
Figure 17-2: Sample error_404.php Code

You should also consider creating separate error pages for each possible error code and then modifying your .htaccess file to point to the appropriate page for each error.

Task - Create a PHP Error Code Page

For this task you will create a set of well-designed error pages to handle 404 and 500 errors.

  1. Each page should contain (at a minimum):
    1. your contact information,
    2. the error code with a possible explanation,
    3. a link for the user to report this error or obtain additional help.
  2. Use well-designed navigation on each page so that the user can get to any other page in your site. You may want to create a separate nav.php file and use the PHP require_once() function to use the same navigation throughout your site.
  3. Modify your PHP code in your vars.phpfile that creates an array of the Assignments for this course and your functions.php file that uses a function to display an ordered list of these assignments to convert the entry for this assignment to a web link that allows me view and grade your work and a set of links that allow me to download and save your web site pages and your nav.php, vars.php, functions.php, functions.js, styles.css, .htaccess, error_404.php, error_500.php, and any other files so I can download, save, and grade your work.

You *MUST* use the W3C Unicorn Validator to validate your HTML5/CSS3 code.

Help contribute to my OER Resources. Donate with PayPal button via my PayPal account.
Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Copyright © 2016-2021 Jim Gerland