What is PHP?
PHP was originally an abbreviation for “personal home pages” but has since been changed to “hypertext pre-processor.”
PHP is the centerpiece of website development, with over 70% of all websites using it (2022) as the server-side scripting language. Making it possible to build dynamic, database-driven websites and web applications, PHP is used by WordPress and a large number of other content management systems.
PHP is similar to a lot of other programing languages. What sets it apart is its seamless integration into HTML. The name PHP is a recursive acronym for PHP: Hypertext Preprocessor. That tells you that PHP, which resides on the server, creates HTML files from PHP scripts on the fly.
As an end user, all you see are HTML pages. PHP does its work behind the scenes on the server from which you request the page. This is different from Javascript, which is executed by the browser on the page as it is served. PHP constructs the page before javascript can act on it.
What we will do in this section, after briefly talking about some details of how PHP works, is show how PHP modularizes web development. If you want to learn more, check out codecademy
Modular Web Development
One way to think about a web site is as a collection of pages, which is what we have done up to now. CSS helps us reduce redundancy by centralizing the instructions of what each page is to look like. A centralized style sheet saves us a lot of time. PHP allows us to do the same for the different parts of the marked up content that stays the same from page to page.
A web page is composed up of modules that remain consistent throughout the site, like the header, navigation, asides, footer, etc. PHP allows us to separate these modules out as centralized external files. That means creating modules like footer, header and navigation, and useing PHP to stitch them together and serve them up as finished HTML pages.
PHP Basics
PHP resides on the server. Everything is done from the server. It runs the PHP that executes the PHP scripts that we will write.
Change the file extension of the file from .html to .php to make PHP work. To execute the PHP scripts, you need to be running the PHP interpreter. The server already runs a PHP interpreter. So you will put the files on the server to execute them.
Creating a Most Basic PHP Page
Open up a blank Editor file and write:
<!DOCTYPE html> <?php echo "Hello World!"; ?>
This is a legitimate HTML5 document if you recall that the html, head, title and body tags are optional.
Save the file on the server, and when you open it in your browser, you will see “Hello World!” in the upper left hand corner.
You have just executed a PHP script and created an HTML page. If you look at the code, all the PHP will have disappeared. Only the HTML is left.
A few things to note about the PHP script. First, the statement starts with <?php and ends with ?>. That is how you format the PHP code, which is written between these brackets.
The statement ends in a semicolon, just like CSS statements do. That signifies to the PHP processor that the statement is complete.
Content text is called a string, and is always surrounded by quotes while working within the PHP tags, just like attribute values are in quotes inside the HTML tag. Because we are writing code, and content is something that the code works on. As there is a conflict in the way that regular writing uses certain characters, like space and return for example, and for that reason needs to be differentiated from the code.
HTML is the other way around, where all of the code is separated from the content by tags, because it’s really about the content, while a coding language like PHP is really about the code.
The last thing you see is the word echo. This is a language construct, and it is what makes PHP Hypertext friendly. It tells the PHP processor to print the HTML to the screen. Use echo to turn PHP code into HTML.
Variables
No one likes to do anything twice, and programing languages are full of ways to optimize the code. One of the most fundamental and well known tenets of software engineering is theDRY rule – don’t repeat yourself.
Just as CSS centralizes the instructions for how the web page looks, and PHP modularizes the HTML web site into a number of components, programing languages create variables and give them names to optimize the code. This is how to write the last statement using a variable:
<!DOCTYPE html> <?php $myString = "Hello! "; echo $myString; echo "I'm a PHP script!"; ?>
The dollar sign $ signifies that myString is a variable, and the equal sign = assigns it to the text “Hello”. When this variable is echoed, it writes out “Hello”. The savings in this example are not exactly spectacular but you get the idea. It saves programers from having to write and update the same code over and over again.
Functions
Another way that programming optimizes is to give names to common routines that it has to perform. These are called functions. Functions are more than just a name, because they often act on information, as in this simple example.
<!DOCTYPE html>
<?php
function myGreeting($Name){
echo "Hello there ". $Name . "!<br />";
}
myGreeting("Jane Doe");
myGreeting("John Doe");
myGreeting("Barbie");
myGreeting("Ken");
myGreeting("America");
echo "How Are You?";
?>
The computer runs down the page just as in HTML. When it gets to myGreeting, it takes the value in the parentheses and passes it to the variable “$name.” The function then operates on that variable, in this case concatenating “hello there ” with the name, an exclamation mark and a line-break element. These three things are concatenated, or brought together, by the period. The entire result is then printed, and the computer goes to the next line and repeats the entire procedure over again, till the end, where echo tells it to print “How are You?”
Operators
Computers control the flow of electrons in circuits that are either on or off. Controlling this flow gives rise to how a computer works, and how computer languages work. We say that a program is running, because even if it does nothing on the screen, the flow is cycling, waiting for something to trigger a change in the flow.
Operators manipulate this flow, using simple logic and math in creative ways. Basic logic structures the flow and determines how the result is to be assigned; if this is equal to that or this and that. There are boolean operators that signify the outcome of the flow as true or false, causal statements, that say if condition is met, do that, or else it redirects the flow in another direction, and lots of mathematical operators that go way beyond addition and subtraction.
PHP’s use is primarily connected up with databases that store the snippets of content that PHP can pre-process into HTML pages. To do that it spends a lot of the time talking to databases and requesting and looping through the content to organize it into HTML pages. We are not going to go any further into the PHP language itself but know that many of the larger sites use this or some other kind of server side scripting.
Includes
You only learn something if it is truly useful. In that way, PHP provides a very powerful function to modularize the website with a bare minimum of code:
<?php include(); ?>
Insert an HTML file name and it’s location in the brackets and the file’s content is inserted at that point.
This allows you to create often used HTML snippets only once, like the header, footer, menu and so on. Think of it as an external style sheet for HTML code.
Create common HTML like a menu file that you want all your web pages to include. When adding new pages to your site, for example, instead of having to update the links on every web page, you simply update the include file.
To create a common menu file that all our pages will use, save a blank file as “header.html” in the same directory as the index.html and paste in the header element as it exists on your website. To include the header in every page, replace the header element with the following code:
<?php include("header.php"); ?>
That’s it. When a browser makes a request for a page, it will include the code from the header.html file. You can do this with the navigation, the footer, and any other part of your web site whose content remains the same throughout the web site.
I’ve prepared an example to demonstrate that.
The one tricky thing is to give a user feedback on the page they are on. This is accomplished by adding both an id to each page and a unique class to each menu, and to write a css rule that, when they coincide, lights up the menu to highlight the current page.
Visitors do not see the PHP code. All the PHP is processed out. What remains is HTML, as if it had been written as one HTML document. Download the code
More
Forms rely on a PHP scripts. WordPress is created using PHP. There is a lot to server side scripting.
Sample code for the PHP example:
modular.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Modular Web Sites</title>
<link rel="stylesheet" href="style.css" media="all">
</head>
<body id="modular">
<div id="wrapper">
<?php include_once("header.php"); ?>
<section>
<?php include_once("navigation.php"); ?>
<article>
<h2>Modular Web Development</h2>
<p>One way to think about a web site is as a collection of pages, which is what we have done up to now. CSS helps us reduce redundancy by centralizing the instructions of what each page is to look like. A centralized style sheet saves us a lot of time. PHP allows us to do the same for the different parts of the web site that stay the same from page to page.
<p>A web page is composed up of modules that remain pretty consistent throughout the site, like the header, navigation, asides, footer, etc. PHP allows us to separate these modules out as centralized external files. That means we will be creating modules like footer, header and navigation, and then use PHP to put them all together and serve them up as finished HTML pages.
</article>
</section>
<?php include_once("footer.php"); ?>
</div>
</body>
</html>
navigation.php
<nav> <ul> <li><a class="whatIs" href="whatIs.php">What Is PHP?</a></li> <li><a class="modular" href="modular.php">Modular Pages</a></li> <li><a class="basics" href="basics.php">PHP Basics</a></li> <li><ul> <li><a class="page" href="page.php">Writing PHP</a></li> <li><a class="variables" href="variables.php">Variables</a></li> <li><a class="functions" href="functions.php">Functions</a></li> <li><a class="operators" href="operators.php">Operators</a></li> </ul></li> <li><a class="includes" href="include.php">Includes</a></li> <li><a class="more" href="more.php">More</a> <li><a class="example" href="example.php">Example Code</a></li> </ul> </nav>
header.php
<header> <h1>Modular Websites using PHP</h1> </header>
footer.php
<footer> <a href="">Web Design 1</a>, Parsons, the New School of Design. Additional resources can be found at <a href="http://PHP.net/">PHP.net</a>, with tutorials and the manual at an <a href="http://PHP.net/manual/en/intro.pdo.php">Introduction to PHP</a>. </footer>
CSS Styles
See the note that explains the special treatment for the navigation page highlight below.
/*structure*/
body{
background: #aaa;
}
#wrapper {
width: 650px;
margin: 40px auto;
}
header {
height: 75px;
background-color: #eee;
padding: 30px 30px 0px 30px;
border-bottom: 4px double #aaa;
}
section {
background: #ccc;
}
article {
background: #eee;
padding: .5em 1em 1em;
margin-left: 210px;
width: 380px;
line-height: 1.3em;
min-height: 420px;
}
footer {
border-top: 1px solid #aaa;
background-color: #eee;
padding: 30px;
}
/*Navigation*/
nav {
width: 160px;
padding: 20px;
float: left;
background-color: #eee;
}
nav ul {
padding-left: 20px;
}
nav ul li {
list-style: none;
padding: 2px 0 2px 0px;
}
/* Notice
All the page ids are paired up with their unique menu item. That way the link on each page light up, so you know which page you are on
*/
body#whatIs a.whatIs,
body#modular nav ul li a.modular,
body#basics nav ul li a.basics,
body#page nav ul li a.page,
body#variables nav ul li a.variables,
body#functions nav ul li a.functions,
body#operators nav ul li a.operators,
body#includes nav ul li a.includes
{
color: black;
background: #fff;
}
nav ul li a{
display: block;
color: #000;
text-align: left;
padding: 10px;
background: #ddd;
border: 1px outset #eee;
text-decoration: none;
}
nav ul li a:hover{
color: black;
background: #aaa;
}
/*style*/
h1 {
font-size: 2em;
font-weight: 700;
}
h2 {
font-size: 1.5em;
margin: 1.4em 0 .6em 0;
font-weight: 700;
}
pre {
background: #eef;
padding: 1em;
margin: 1em;
}