PHP Tutorial

Introduction
Using Include

Introduction

PHP is a scripting language that can be used alongside HTML and CSS to make a more dynamic website. This tutorial will be a short one for now as I am only going to include how to use the include() function for tags that remain the same in all HTML files. I plan to add more to this page as I learn more about PHP.

Using Include

The include() function is very useful if there is a tag that remains the same in all HTML files. These tags can include the head tag <head>, the div id for the header <div id="header">, the div id for the navbar <div id="navbar">, the div id for the footer <div id="footer">, and many more. The point of using the include() function to include these tags is to only edit one file (the included file) and not have to update every single webpage. For instance, say you want to update your navigation bar to include more links. Instead of updating every single webpage file with the new navbar updates, you can just update the navbar.php file and all the webpages will be updated automatically.

The first step is to change all your HTML files to PHP files by changing the extension from .html to .php (index.html to index.php, websitesetup.html to websitesetup.php, etc). The original HTML layout of this website can be seen below. The head tag <head>, the div id for the header <div id="header">, the div id for the navbar <div id="navbar"> and the div id for the footer <div id="footer"> remain the same for all the webpages. The aforementioned tags will be turned into .php files in order to use the include() function on all webpages such that the tags only have to be edited once instead of on every page.

HTML Code:

<!DOCTYPE html>

						<html> 

						<head> 
						</head> 

						<body> 
						<div id="header">
  
						</div>
  
						<div id="navbar">
  
						</div>
  
						<div id="content">
  
						</div>
 
						<div id="footer">
  
						</div>
  						 						
						</body> 

						</html>

The new PHP layout can be seen below. It is very similar to the HTML layout but with include() functions that include those tags which are the same on every page. Now we can create new PHP files which contain the code for the head tag <head>, the div id for the header <div id="header">, the div id for the navbar <div id="navbar"> and the div id for the footer <div id="footer">.

PHP Code:

<!DOCTYPE html>

						<html> 

							<?php 
 							$title = "PHP Tutorial";
							include('head.php'); 
							?>
						 

						<body> 

						<?php include('header.php'); ?>
  
						<?php include('navbar.php'); ?>
  
						<div id="content">
  
						</div>
 
						<?php include('footer.php'); ?>
  
						</body> 

						</html>

The code in the PHP files for the aforementioned tags is the exact same code that would have been in the HTML file. The codes for each file below are from the HTML Tutorial page. One important thing to note is that the head.php file is calling on the variable $title (<title> <?php echo $title; ?> </title>) which is in the main .php file for that specific webpage (<?php $title = "PHP Tutorial"; include('head.php'); ?>) in order to title the page.

HTML Code for head.php:

<head>

							<title> <?php echo $title; ?> </title> 
							<meta charset="UTF-8"> 
							<meta name="viewport" content="width=device-width, initial-scale=1">
							<link rel="stylesheet" type="text/css" href="style.css">


							<link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon.png">
							<link rel="icon" type="image/png" sizes="32x32" href="images/favicons/favicon-32x32.png">
							<link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png">
							<link rel="manifest" href="images/favicons/manifest.json">
							<link rel="mask-icon" href="images/favicons/safari-pinned-tab.svg" color="#5bbad5">
							<meta name="theme-color" content="#ffffff">

							<script async src="https://www.googletagmanager.com/gtag/js?id=XXXXXXXXXX"></script>
							<script>
							
							window.dataLayer = window.dataLayer || [];
		  					function gtag(){dataLayer.push(arguments);}
		  					gtag('js', new Date());

		  					gtag('config', 'XXXXXXXXXX');
							</script>
							



							</head>

HTML Code for header.php:

<div id="header">

							<h1 style="text-align:center;">Welcome!</h1>
							</div>

HTML Code for navbar.php:

<div id="navbar">

							<div class="homebutton">
							<a href="index.html">Home</a>
							</div> 
							<div class="dropdown">
							<button class="dropbtn">Website Tutorial</button>
							<div class="dropdown-content">
							<a href="websitesetup.html">Getting Started Using Amazon Web Services</a>
							<a href="htmltutorial.html">HTML</a>
							<a href="csstutorial.html">CSS</a>
							</div>
  
							</div> 
							<div class="dropdown">
							<button class="dropbtn">Arduino Projects</button>
							Add the remaining links in the dropdown menu here 
							</div>
							</div>

HTML Code for footer.php:

<div id="footer">

							Thank you for visiting.
							</div>

This code setup has phptutorial.php in the same directory as head.php, header.php, navbar.php, and footer.php in order for the include() function to work. This setup allows the user to only edit the included files and have all the other pages updated automatically.