Building a Website with PHP for Beginners

Important!
To better understand PHP, download and install a free program like XAMPP. We’ll need a program like XAMPP to help open a PHP website on a computer for our web browser. Here’s a guide on it, go here.

If you have not already learn HTML, then it can be difficult to start learning how to build a website using PHP codes. Otherwise, it won’t be difficult to learn PHP at all if you already understand the basics of HTML. Once you’ve figure out how PHP works, you’ll find it extremely useful that you’ll also want to use it over and over again for web developement.

Like HTML, a website can be build using PHP. A PHP website works like pieces and parts being put together in a factory (web server) for the web browser to display it. As an example, let’s examine the difference between an index.html and an index.php of a very simple website by looking at their source codes:

index.html
<!DOCTYPE html>
<head>

<style type="text/css">
#header, #content, #footer {
    border: solid 1px #cccccc;
    margin-bottom: 5px;
    padding: 5px;
}
#header, #footer {
    height: 20px;
}
#content {
    height: 40px;
}
</style>

<title>website.html</title>
</head>

<body>

<div id="header">The Header</div>
<div id="content">The Contents</div>
<div id="footer">The Footer</div>

</body>
index.php
<?php include("header.php") ?>
<?php include("content.php") ?>
<?php include("footer.php") ?>

As you can see here in this index.php file, it use only three lines of code. Those three lines of PHP codes are grabbing three .php files. When put together, they contain the exact same HTML codes as the ones in the index.html.
Here’s how both index.html or index.php website looks like in a web browser based on the codes:

index.html or index.php


Basically, the three <?php include() ?> codes in the index.php file are telling the web server to grab three files: header.php, content.php, and footer.php. The web server then process and turns them into the HTML codes (same as the the index.html file above) for the web browser to display the website.

Below is a step by step guide on how to create a very simple PHP website by using PHP and HTML codes. We’ll be using the same codes above. Before continuing, download an install a free program like XAMPP first.


How to Build a very simple Website using PHP for Beginners:

  • First, we’ll need a good text editor also. I recommend Notepad++. You can use any text editor you want.
  • Run XAMPP, and start Apache on it.
  • Browse to the htdocs folder, which is located at:
    [wherever you install XAMPP] / XAMPP / htdocs
  • Create a new folder in the htdocs folder and call it whatever you like.
  1. Use your text editor to create a new file in the new folder, and save it as index.php
  2. In the index.php file, add these PHP codes:
    <?php include("header.php") ?>
    <?php include("content.php") ?>
    <?php include("footer.php") ?>
  3. Use your text editor to create three new files in the new folder and save them as header.php, content.php, and footer.php.
  4. In the three new .php files, add these HTML codes to each of the respective followings:

    header.php

    <!DOCTYPE html>
    <head>
     
    <style type="text/css">
    #header, #content, #footer {
        border: solid 1px #cccccc;
        margin-bottom: 5px;
        padding: 5px;
    }
    #header, #footer {
        height: 20px;
    }
    #content {
        height: 40px;
    }
    </style>
     
    <title>website.html</title>
    </head>
     
    <body>
     
    <div id="header">The Header</div>
  5. content.php

    <div id="content">The Contents</div>

    footer.php

    <div id="footer">The Footer</div>
     
    </body>
  6. Finally, be sure to save everything in the new folder. To see if it’s working or not, make sure XAMPP is running with Apache started. Open your computer’s web browser, type into the address bar and hit enter: localhost/new folder. If everything’s working correctly, then this is how the simple PHP website we’ve created should look like in a web browser (except larger):

Here’s a better example PHP website template for anyone wanting to take a look at it and learn how they work. To open this template, make sure XAMPP is running, extract the folder to the htdocs folder, and type into your web browser: localhost/php-site


How is a PHP Website Extremely Useful when Compare to a HTML Website?
Let’s say you have a website that has about 10 or 100 pages, and those pages are all HTML files. If you edit one HTML file like changing a logo or a background, then you might would also want to edit all or most of the other HTML files so that every page on your website will have the same exact looks. Just imagine having to edit 100 files just to make 1 change. I is very annoying.

With a PHP website, you only have to edit 1 file to make changes to 100 pages like changing a logo, backgrounds, etc. This only works if those 100 pages have the same exact PHP include code grabbing that 1 PHP file. Because of this, PHP is extremely useful when building a website, because it can save you a lot of time when having to make make some edits.


Please note that
there is a lot more to PHP than just building a website with it. I think this post explained about less than 1 percent of what PHP is. Learning how to build a basic PHP website is a good start. To learn more about PHP, simply search the Internet or YouTube. There are a lot of free tutorials on the web about PHP. For me, I’m just still a beginner at it and don’t have the time to learn all about PHP.