No products in the cart.
Got the very basics of PHP down pat and ready to take up a beginner challenge? Try building a site from scratch with this tutorial.
If you gain a basic understanding of how to build a website using PHP, you’ll have knowledge of file inclusions and producing output—the very basics of customizing a web page. Maybe you’re wondering where to begin, 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 straightforward updates. It also demonstrates some useful PHP functions to add value.
The sample website—available in a GitHub repository—is a simple site about birds in all their feathery goodness. There are a couple of sections, some info 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 in you.
If you can, download the site from GitHub and install it on your local computer before reading on.
Here are some of the key files and directories you should investigate.
You can install and host the Bootstrap files on your server, but for maximum speed, you can just reference them from a CDN. Take a look at tpl/head.php and you should see an example like:
Start with site/index.php. This is the file that represents the site’s home page. 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/index.php.
Note the two includes right 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 of the tpl directory at the top level of the site.
Take a look at tpl/home.php. This is the very outermost skeleton of an html document: it only includes a doctype and an HTML element. Within the HTML element, it uses two includes for templates representing the head and body.
In contrast, the template for the birds section loads a different body template, tpl/birds/body.tpl. This contains a different layout for pages within that section, one with a sidebar.
In the composer.json file, a third-party library called erusev/parsedown is required. This is a Markdown-parsing library. It allows you to, very easily, convert Markdown text into HTML.
Many static sites generate final HTML from documents written in another language, such as Markdown. It offers a nicer syntax for authoring, one which is more readable than HTML. The sample site presents this as an option. Take a look at the show_content() function in funcs.php:
If a Markdown file corresponding to the requested page exists, a Parsedown object converts its contents into HTML and outputs it. If there’s no Markdown file, it looks for a function named content() instead. Individual pages can define this function (see site/index.php for an example) if their content needs to go beyond what static Markdown can achieve.
Take a look at the get_json function in funcs.php:
Essentially, the function calls two others to fetch and parse data from a given file. It dresses that up with a lot of error-checking to return an empty array if anything goes wrong. Calling json_decode() like this returns an associative array which makes it very easy to work with the data immediately. This approach is so convenient that you might prefer it to using a database, particularly 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 for auto-linking and in other cases.
This is a handy way of keeping all page titles in one place (file) which is easy to update when you need to. These titles contribute to the navigation in the top menu, breadcrumb list, and side panels.
Here’s the first part of the breadcrumbs() function (from funcs.php) which builds an array of page titles for each part of the URL. For example, for the /birds/blue-tit page, it fetches the title for the / page, then the title for /birds, then finally the title for /birds/blue-tit. The breadcrumb list will then consist of one link for each page in the hierarchy.
If you view the About page, a specific news story, or a specific bird profile, you should be able to spot a Last updated message in the footer. The site’s footer is stored in tpl/footer.php. Open this file and note the snippet of PHP inside it:
This is a simple example of fetching metadata directly from a file rather than a database or other source. The filemtime function returns the last modified time of a file. Note that this is a very convenient method for getting the content’s date, but it’s not without its flaws.
It’s often necessary to reuse content across a site, to show news summaries on a contents page, for example. With a full-blown CMS, you might store this data as extra fields in a database. With a simple flat-file approach, you need to think differently.
The news stories on this site are stored as Markdown files, so the raw content is available. Regular expressions are a handy tool in a developer’s kit, giving you the ability to match and extract content. The news/index.php file does just that to show its content. It fetches the contents of each file in the md/news directory as a string. It then runs several regular expressions to extract data.
The title is a line that begins with a # symbol, according to Markdown syntax. Optional whitespace then follows, before the actual title. The regular expression ^#s+(.+) matches that pattern of text and preg_match() returns everything that matched between the brackets: the title.
Two more regular expressions follow to extract the image and first sentence from the news markdown file. There are downsides to this approach; in particular, it requires discipline to ensure Markdown files are always formatted exactly as the code expects.
The /birds page doesn’t do much, so a random bird image livens it up. This is easy to achieve with a bit of file system inspection and a function built into PHP. The magic happens in site/birds/index.php:
The trick is organizing all images for this specific function into a single directory. The scandir() function then reads the files from this directory into an array and array_rand() gives us a random key from the array so the function can pick an individual file.
I hope you've learned at least one new thing from this article. More importantly, I hope it has inspired you to consider various approaches and demonstrated how you can use PHP in many different ways.
Once you’re familiar with PHP, you’ll start thinking of alternative solutions to each problem. This is a natural progression and means you’re starting to think at a higher level, focussing less on the programming language itself and more on what you can do with it.
Bobby is a technology enthusiast who worked as a software developer for most of two decades. At MUO, he's the Section Editor for the Programming section. He’s passionate about gaming, having worked as Editor-in-Chief at Switch Player Magazine, and is immersed in all aspects of online publishing & web development.