Building A PHP Website: For Absolute Beginners - Part 1
PHP is the most popular web programming language in the world. It is the language used by some of the highly trafficked websites, such as Facebook, Yahoo, Wikipedia, Tumblr, and many other. Also, popular Content Management Systems (CMS), such as Wordpress, Joomla, Drupal, and OctoberCMS are developed using PHP. So, it’s a good choice if you have decided to learn PHP.
This guide shows you how to create a boilerplate code for your projects. You can use this boilerplate as a starting point for your assignments and small-scale projects. However, if you are planning to start developing a complex web application, I would suggest using a PHP framework. There are many feature-rich frameworks out there to choose from.
Since I do not intend to discuss the basics of PHP here, please refer to the PHP lessons on w3schools if you are still new to the subject.
We will go through the following steps:
- Part 1
Part 2(coming soon)
To start your project, create a new folder and move in to it. This is where all your project files will reside.
mkdir myproject
cd myproject
Home page
Your application needs an entry point. A file that contains the content of the home page of your application. The usual practice is to name this index.php. Let’s create one for our brand new project.
touch index.php
Open your project in a text editor for editing files. You can use one of the popular code editors like VSCode, Atom, or Sublime Text.
Let’s open the index.php file and add some HTML code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Quick Boilerplate - PHP</title>
</head>
<body>
<h1>Quick Boilerplate</h1>
</body>
</html>
I believe you are familiar with the basics of HTML, if not you can refer to w3schools.
Partial includes for common HTML
It is common for most websites to have an about page to introduce the website, the organization, or the service it provides. Let’s add one to ours too. Create a file with the name about.php in the root folder of the application. This is the same folder where the index.php is.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Quick Boilerplate - PHP</title>
</head>
<body>
<h1>About Us</h1>
<p>The introduction to the organization.</p>
</body>
</html>
It has a title and a paragraph. If you compare the content of the index.php to about.php you can see some of the HTML code are shared between two. When you add more files to your website, they will also share the same HTML content. Instead of repeating them in every file, we can take them out and place in few common files. Let’s move the top and bottom parts of the HTML code to separate files.
Create a folder with the name includes and create a two files in it for top and bottom content.
The top.php would have:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Quick Boilerplate - PHP</title>
</head>
<body>
And, the bottom.php:
</body>
</html>
Then we can include them in every file where they are required.
The index.php becomes:
<?php include('./includes/top.php'); ?>
<h1>Quick Boilerplate</h1>
<?php include('./includes/bottom.php'); ?>
And, the about.php becomes:
<?php include('./includes/top.php'); ?>
<h1>About Us</h1>
<p>The introduction to the organization.</p>
<?php include('./includes/bottom.php'); ?>
Also, the web sites have navigation links and footer content shared between pages. We can include them the same way we included top and bottom.
Create the includes/nav.php file and add:
<nav>
<!-- Navigation Links -->
</nav>
And, create includes/footer.php file and add:
<footer>
<!-- Footer Content -->
</footer>
Now, the index.php becoems:
<?php include('./includes/top.php'); ?>
<?php include('./includes/nav.php'); ?>
<div>
<h1>Quick Boilerplate</h1>
</div>
<?php include('./includes/footer.php'); ?>
<?php include('./includes/bottom.php'); ?>
And, the about.php becomes:
<?php include('./includes/top.php'); ?>
<?php include('./includes/nav.php'); ?>
<div>
<h1>About Us</h1>
<p>The introduction to the organization.</p>
</div>
<?php include('./includes/footer.php'); ?>
<?php include('./includes/bottom.php'); ?>
I have wrapped the content of each page in a <div> to make them separate from the rest of the content.
You can add as many includes as you want. However, you need to maintain the HTML structure properly to avoid the issues related to the missing closing tags.
Form submission
Another common feature of most of the web applications is the contact page. Visitors can use this page to send a contact request to the site owner. The page contains a form with few input elements to receive the name and email of the visitor and the reason for contacting. Let’s add a contact page to our boilerplate.
Create a new file and name it contact.php. Add the following code:
<?php include('./includes/top.php'); ?>
<?php include('./includes/nav.php'); ?>
<div>
<h1>Contact Us</h1>
<form action="contact.php" method="post">
<div>
<label for="name">Name</label><br>
<input type="text" name="name" value="">
</div>
<div>
<label for="email">Email</label><br>
<input type="email" name="email" value="">
</div>
<div>
<label for="message">Message</label><br>
<textarea name="message" rows="8" cols="80"></textarea>
</div>
<div>
<input type="submit" name="" value="Send">
</div>
</form>
</div>
<?php include('./includes/footer.php'); ?>
<?php include('./includes/bottom.php'); ?>
It has a form with name, email, and message input fields. The submit button takes care of submitting the form. WHen you click it, the form data will be submitted to the contact.php file it self.
So, it’s the time to add some PHP code to the contact.php file to accept the form data and email them to the site owner’s email address.
Add following PHP code at the beginning of the contact.php file.
<?php
if (!empty($_POST['name']) &&
!empty($_POST['email']) &&
!empty($_POST['message']) &&
filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$to = "admin@example.com";
$subject = "Contact request submitted";
// prepare email body text
$body = "Name: ";
$body .= $name;
$body .= "\n";
$body .= "Email: ";
$body .= $email;
$body .= "\n";
$body .= "Message: ";
$body .= $message;
$body .= "\n";
// send email
$success = mail($to, $subject, $body, "From:" . $email);
$status = $success ?
'Thank you for contacting us. We will get back to you soon.' :
'Oops! we could not send your contact request.';
}
?>
The $_POST global variable in PHP contains the data come from POST requests it. Our code above checks for the existance of the form fields and availability of the data in $_POST variable. If the data avaialbe, it attemts to send those data in an email to the given email address, in this case to admin@example.com.
You need to have configured the email server details in your server for this to work.
Let’s meet soon with Part 2 to discuss futher.
