11 PHP | Web Design Basics

What is PHP?

PHP is similar to a lot of other programing languages. What sets it apart is the ability to seamlessly integrate 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, so PHP does its work behind the scenes on the server from which you request the page. This is different from Javascript, for example, which is executed by the browser on the page as it is served. The 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 actually works, is show how PHP can modularize web development. If you want to learn more, use 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 web site that stay the same from page to page.

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.

PHP Basics

Everything will be done from the server, for it runs the PHP that executes the PHP scripts that we will write.

All you need to do to make PHP work is change the file extension of the file from .html to .php. Unless your computer is running PHP, however, you will need to put the files on the server.

Creating a Most Basic PHP Page

Open up a blank TextWrangler 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 . "!
";
}
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 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. Include takes a file name and simply inserts that file’s contents into the script that issued the include command.

This means that you can create a common menu file that you want all your web pages to include. When you add a new page to your site, for example, instead of having to update the links on several web pages, you can simply change the one file.
To create a common menu file that all our pages will use, save a blank file as “navigation.html” in the same directory as the index.html and paste in the nav element. We then plug that menu into our index page, replacing the nav element with the following code:

<?php include("navigation.php"); ?>

That’s it. When a browser makes a request for your index page, it will include the code from your navigation.html file. And you can do this with the header, the footer, and any other parts of your web site that remains the same throughout the web site.

The example I’ve prepared does exactly that. The one thing I added was an ability to give the user feedback on the page they are on by adding both an id to each page and a unique class to each menu, and when they coincide, the menu lights up to show 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 the see the PHP

Next week’s lesson will cover forms, which often depends on a PHP script, and in the class after that, we take a look at WordPress, created using PHP, so there is a lot to server side scripting.

Here is the 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

<!DOCTYPE html>
<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

<!DOCTYPE html>
<header>
	<h1>Modular Websites using PHP</h1>
</header>

footer.php

<!DOCTYPE html>
<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;
}