If you gain a basic understanding of how to build a website using PHP, you will have knowledge of file inclusion and producing output – the basics of customizing a web page. Maybe you’re wondering where to start, or what next steps to take when building more functionality into your site.
In this tutorial, I present a simple site structure that allows for direct updates. It also showcases some useful PHP functions to add value.
The website you will be building in PHP
The sample website—available in a GitHub repository—is a simple site about birds, with attributes such as their feathers. It has some sections, some information pages and a home page. The final site isn’t as important as the techniques you’ll read about, and the ideas they may inspire.
Each page corresponds to a PHP script in the site directory. It introduces some redundancy, but it keeps things simple. When setting up your web server, make sure you point your DOCROOT to the site directory.
The md directory contains the Markdown source files that store the main content of a few different pages.
bootstrap
Bootstrap is a front-end framework for building websites. It has built-in styling and JavaScript functionality, which covers most common web dev needs. This is a great way to get a site up and running quickly before you spend time fine-tuning the design.
basic templating
Start with site/index.php. This is the file that represents the home page of the site. Depending on how your web server is set up, you should be able to access it at http://yoursite.example.org/ or, failing that, http://yoursite.example.org/. org/index.php.
Note that both are included at the beginning of this file: funcs.php and TPL_DIR.”/home.php”. The funcs.php file defines that TPL_DIR constant as the full absolute path to the tpl directory at the top level of the site.
Take a look at tpl/home.php. This is the outermost structure of an html document: it consists only of a doctype and an html element. Within the HTML element, it includes two for templates representing the head and body.
parsing markdown
In the composer.json file, a third-party library called erusev/parsedown is required. It’s a markdown-parsing library. It allows you to convert Markdown text to HTML very easily.
Many static sites generate the final HTML from documents written in another language, such as Markdown. It provides a nice syntax for authoring, which is more readable than HTML. The sample site presents it as an option.
If a Markdown file corresponding to the requested page exists, the Parsedown object converts its contents to HTML and outputs it. If there is no markdown file, it looks for a function called content() instead. Individual pages can define this function (see site/index.php for example) if their content needs to go beyond static markdown.
Essentially, the function calls two others to fetch and parse data from one file. Prepare it with lots of error-checking to return an empty array if something goes wrong. Calling json_decode() like this returns an associative array which makes working with the data very easy right away. This approach is so convenient that you may prefer it to using a database, especially for simple tasks like global configuration.
The site uses two metadata files: data/titles.json and data/featured.json. The former stores the title of each page, useful in auto-linking and other cases.
This is a simple way to keep all the page titles in one place (file) that is easy to update when needed. These headings contribute to navigation in the top menu, breadcrumb list, and side panels.
Here’s the first part of the breadcrumbs() function (from funcs.php) that creates an array of page titles for each part of the URL. For example, for the /birds/blue-tit page, it gets the title for the / page, then the title for /birds, then finally the title for /birds/blue-tit. The breadcrumb list will include a link for each page in the hierarchy.
This is a simple example of fetching metadata directly from a file rather than from a database or other source. The FILETIME function returns the last modified time of a file. Note that this is a very convenient way to get the date of content, but it is not without its faults.