ckportfolio.com - HTML Modularization with PHP Include

HTML Modularization with PHP Include

Loading Sample HTML Page

Now that we can confirm that our index.php file is up and running, we can now begin our modularization exercise. Refer to the HTML sample and copy the entire content into the index.php file.

Upon visiting the previous URL on the browser, the result is a simple one-page website that demonstrates basic HTML features, ranging from typography to image component, complete with CSS customization. While one can make styling updates to the site, we are here to focus on the task of modularization (and subsequent optimization) of this page with the help of HTML.

Planning Modularization

After briefly inspecting the page, we can identify the following logical sections within the code:

  • <head> section
    • Connection to Google Font
    • Title tag
    • Custom CSS code in <style>
  • <body> section
    • #header
    • #menu
    • #content
    • #footer

While the approach may vary according to the complexity of the layout and personal preference, the above list paints a good picture of this page's construction. At this point, we can consider creating the following files next to index.php:

  • head.php (for the entire <head> section)
  • header.php (for #header)
  • menu.php (for #menu)
  • footer.php (for #footer)

Because we can expect #content to change across the website (should it become a multipage website), we can leave that element alone.

"Cut and Paste"

With all the new PHP files in the folder, we can now cut and paste the corresponding sections away from the original index.php towards modularization:

head.php

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<title>John Doe</title>
<style>

    body
    {
        font-family:"Oswald";
        background-color: #0586af;
        color:#ffffff;
        text-align: center;
    }

    ...

</style>

header.php

<div id="header">               
    <h1>John Doe</h1>        
</div>

menu.php

<div id="menu">
    <a href="index.php">Home</a>
    <a href="clients.php">Clients</a>
    <a href="contact.php">Contact</a>
</div>

Note that the # placeholders have been replaced with corresponding PHP files that we will create later.

footer.php

<div id="footer">
    Made by John Doe
</div>

index.php

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <div id="content">
            <img src="http://i.pravatar.cc/500?img=1">          
            <h2>Toronto, ON</h2>
            <p>John Doe is a Toronto-based designer.</p>
        </div>
    </body>
</html>

The original index.php file now looks a little barren, with the browser preview looking broken:

PHP Include

PHP's include function allows the developer to combine otherwise separate files into a single page output, and we can use this to bring the now modularized sections back into index.php:

<!doctype html>
<html>
    <head>
        <? include "head.php" ?>
    </head>
    <body>
        <? include "header.php" ?>
        <? include "menu.php" ?>
        <div id="content">
            <img src="http://i.pravatar.cc/500?img=1">          
            <h2>Toronto, ON</h2>
            <p>John Doe is a Toronto-based designer.</p>
        </div>
        <? include "footer.php" ?>
    </body>

</html>

Note that we are using a shorthand PHP command (<? instead of <?php) for brevity, but nevertheless, the result is a surprising one:

Additional Pages

With a much lighter version of index.php, we can now proceed with creating the additional pages (clients.php and contact.php):

Summary

We can now easily identify common or frequently repeated elements across the website and turn them into modules: files that can be embedded in multiple pages using PHP's include function. This practice allows the programmer to consider the overall architecture of the website more carefully, and optimize the resultant product with little redundancy.

Fin