Want to learn how to build a basic website? Once you might have started off with HTML, but these days the best solution is PHP. While you’ll need some knowledge of HTML to get started, PHP has become the optimum choice for building websites, both static and dynamic.
To learn PHP, the best way to start is with a simple PHP website.
Why Choose PHP for Website Development?
Various options have been available for web development over the years. It started with plain HTML, then HTML with CSS embedded or a CSS file reference. When dynamic websites came along, there were two main choices: ASP (later ASP.NET) and PHP.
According to figures (such as this W3Techs survey) PHP is far more popular, with almost 82 percent of websites using it as a server-side programming language. Compare this with just under 16 percent using ASP.
ASP is supported until 2022. It seems unlikely to exist beyond that in any official capacity, at least not as a web technology. PHP (a recursive acronym for PHP Hypertext Preprocessor) has proven more successful, mainly thanks to easier integration with Linux.
As the open source operating system runs on most web servers, this should not come as a surprise.
What You’ll Need to Build a PHP Website
Before you get started, be sure you have a plain text editor or PHP-ready development environment installed. You can start coding PHP with a tool as simple as Windows Notepad. Examples found in this tutorial have been written in Notepad++.
You should also have a PHP web server to upload your files to. This might be a remote server, or a local computer with a LAMP (Linux, Apache, MySQL, PHP) or WAMP (Windows, Apache, MySQL, PHP) environment installed. If you’re using Windows, follow this WAMP installation guide to get started.
Finally, you’ll need an FTP program to upload your files to your web server. Using Windows? Try one of these free Windows FTP clients.
Getting Started With PHP: Syntax
The basic syntax for PHP used a set of angled brackets, with each function ending with a semi-colon, like this:
<?php [CODE…CODE]; ?>
In terms of web pages, almost every use of PHP relies on the echo statement. This instructs the browser to output the text and content in the quotes. For example:
<?php "<p>Hello World!</p>"; ?>
Note that the HTML is also included within the quotes. The output for this would typically appear as:
Building a Website: Structure
Whatever code you’re writing your website with, you will need to know the structure of the site before proceeding. This tutorial will show you how to create a single page from reusable PHP files. These might be used to make additional pages, or you may choose a different approach.
Whatever shape you foresee the site developing, take the time to jot a quick plan on a piece of paper. You can then refer to this, perhaps to check the intended content, or see what page to link it to.
Our example is going to be a basic home page, including biographical information and some images.
For this simple PHP website, you’re going to create a single PHP page populated by content from three HTML pages. The index.php file you create can then be edited by adjusting the words and images from the original HTML files.
The code examples shown below are screenshots. You’ll find the original code in my GitHub repository, which is free for anyone to download.
Starting Your Website: The PHP Header
To get started with your website, you’ll need to construct three web pages. These are based upon the basic structure of header, body, and footer.
As you might guess, the header includes title information. However, information for the browser is also included, such as the HTML standard in use, along with CSS references.
Start by creating a file called header.html then add the necessary header information.
For this example, we’ve used a basic CSS file, which you will see is referenced in its own /css/ directory. This file will be called when the page loads in your browser and apply the required font and layout.
Put Content in Your PHP Web Page Body
Every web page consists of a content section known as the “body”. This is the part of a page that you read—what you’re reading now is the body of this page.
Create a file called body.html and add the information you want to include on the page. I’ve included biographical details from my MakeUseOf author page, but you can add whatever you like.
Use a PHP Footer in Your Web Page
The footer section of the web page is next. Create this as footer.html and add some content. This could be copyright information, or perhaps some useful links for anyone visiting your page.
It might be something like this:
With the code added, save the file.
Putting It All Together
With three separate HTML files in /html/ you can use PHP echo to compile them into a single page.
Create a new PHP file called index.php with the following three lines in it:
<?php echo file_get_contents("html/header.html"); ?> <?php echo file_get_contents("html/body.html"); ?> <?php echo file_get_contents("html/footer.html"); ?>
Save, upload to your server, then browse to index.php. You should see the completed web page in your browser. Keep in mind that the actual PHP file you have open in your browser consists of just three lines.
Finally, you can add a little PHP flourish with the final line. Include a copyright notice, with an always-updated year:
<p>Copyright © CM Cawley <?php echo date("Y"); ?></p>
This will appear in the index.php file following the footer. Notice how the echo date(“Y”) statement displays the current year in four digits. You can change how this is displayed by referring to this W3Schools list of options. For example, a lower-case “y” would display the year in two-digit format, rather than four.
Use CSS to position and style it, as you would with any other element. Find the CSS for this project in the GitHub, along with the other files.
Well done—you’ve just created your first simple PHP website from scratch.
Is PHP the Best Choice for Coding Websites?
However, if you’re looking to get started with web development, it’s smart to have an appreciation of the basics. If you understand the website building blocks of HTML, CSS, and PHP, you’re well on the way to success.
Check these step by step tutorials to improve your HTML and CSS skills.