Let's be friends

PHP templates

Last updated: January 1, 2023

Now that you have PHP set up, we can investigate what it’s used for.

Time to get this computer doing some work for us!

( and by that – we usually mean – write HTML for us 😉 )

The goals

  1. Get a firm handle on how to write PHP

    It’s not just a stand-alone general programming language. It lives in this kinda-html type file. You have to know when and where you’re writing HTML vs PHP.

  2. Learn how to print things to the HTML file

    It’s not that fun if you can’t see it.

  3. Learn how to do math and combine strings of characters

    Learn the difference between numbers and strings. And how you can “do stuff” with them.

  4. Learn how to store something in memory

    The mental shift is… if you put something in memory you need a reference/name so you can reference it when you ask for it. If it doesn’t have a name then you can’t talk to the computer about it.

  5. Learn how to create dynamic templates with PHP

    Once you figure out a few clear patterns you don’t need to write out the HTML for every single thing. You can often create a “template” and have it build out the content dynamically.

Key
concept

Delimiter

“A character that marks the beginning or end of a unit of data.”

“A delimiter is a sequence of one or more characters for specifying the boundary between separate, independent regions in plain text, mathematical expressions or other data streams.”

Wikipedia

You’ve seen tags to explain the start and end of HTML elements. You’ve been using quotation marks to determine the start and end of an attribute’s="value".  Now, you’ll be using the <?php and ?> to decide when you want PHP to start and end. Make sense? Just like with the <?php include("file-name.php"); ?>   – (these parentheses are like delimiters too, right?)

Key
concept

Concatenation

Concatenation means “combine” or “join together.” We “concatenate” words in our written/spoken language all the time. A word like “airplane” combines “air” and “plane.” Concatenation just sounds complicated.

In the case of PHP, you’ll often need to join strings together. A perfect example would be grabbing a first and last name from a database and smooshing them together to form a greeting. In the case of our mad-lib challenge, you’re connecting words from the template with the words from the variables.

Make sure MAMP is up and running!

You’re used to just clicking “open in browser”. Now that we’re emulating the real server, you have to navigate to localhost:8888

Make sure you set your server root to the appropriate folder. And, make sure your MAMP is turned on and running!

Think like the parser

You might notice that Derek doesn’t like the word “variable” very much. Everyone in PHP land definitely calls these variables. However, that can be an oversimplified mental model.

When you have a dinner party and you know you have 6 guests coming, but aren’t sure really who will confirm, or you have a math equation and a certain number may change, those are “variables” within the scenario. Not all data and their references are used that way.

You may have already used variables in an algebra class.

6 + x = 13

x is “a placeholder for expression or quantities that may vary or change.“

In the end, the PHP transforms into HTML!

We can’t tell you how many people have a whole career without fully accepting that PHP is a scripting language that generates HTML. That’s what it does.

Exercises

  1. Basics

    Follow the list below and build up to the Madlib.
    30 minutes suggested

  2. PHP Mad Libs Challenge

    Make your own 3 sentence Mad Lib!

    Try out each way to echo the text to the screen.

    You got this, show us your skills! Put it on the server and show it to the team.
    40 minutes suggested

  3. Prove it

    Get your code up on your website and show us the link.

    Then we’ll give you another challenge.
    5 minutes suggested

Newly introduced language features

  1. PHP

    Echo language construct

    <?php
	// PHP one-line comment
	/*
		PHP multi-line
		comments (same as CSS)
	*/

	echo "Hello"; // prints a string

	echo "<h1>Hello</h1>"; // prints a string (with some HTML syntax)

	echo 4 + 4; // 8 evaluates and prints
	echo 4 - 4; // 0
	echo 4 * 4; // 16
	echo 4 / 4; // 1
	echo 4 % 4; // 0 remainder

	echo "string", 87, "hi", " ", 97; // we never really do this...
	print("this is a thing"); // or this... (but you could)
?>

<p><?php echo "Hello, again."; ?></p>

<!-- shorthand syntax -->
<p><?="Hello, again."?></p>

  2. PHP

    Variables ("references")

    <?php

	$variableName = "Some type of value or expression";

	$productPrice1 = 6;
	$productPrice2 = 10;

	$total = $productPrice1 + $productPrice2;
	
	echo $total; // 16

	$referenceToText = "Some text stored in memory";

	echo $referenceToText;
?>

<p><?php echo $referenceToText; ?></p>

<p><?=$referenceToText?></p>

  3. PHP

    Concatenation string operator

    <?php

$name = "Ivy";
$city = "Paris";
$sentence = "Hello, my name is " . $name . " and I love " . $city . ".";

echo $sentence;
// Hello, my name is Ivy and I love Paris.

Start with something simple

How about creating fullName from first and last names? Glue some strings together.

What are some things that may need to be combined to form other things? How about making one based on the LFPS from lesson 003. Try and build up to the next MadLib challenge, but in smaller steps.

  • echo a string
  • echo a number
  • echo a number + number
  • echo a string + a number
  • concatenate a few strings together (and echo them!)
  • concatenate a string and a number and see what happens
  • echo a longer sentence with strings and with two numbers added together
  • Make a variable and echo it inside of a paragraph
  • Make a variable containing a URL and echo the URL inside of an anchor link
  • What else can you think of?

This is an important concept of PHP to understand, so really try all of these and ask questions.

Many ways to use PHP variables

Try each of these variations.

Some languages use a + sign for concatenation, but PHP uses a dot. Look closely!

Don’t forget that this all needs to happen in a .php file. If you didn’t watch the lesson where we installed MAMP, then you’ll need to do that first.

Technically....

Technically there is no HTML in the PHP file. It’s just a bunch of text. Hopefully, when the PHP runs, all of that text is correct and can be turned into HTML.

BUT for humans-sake, it’s much better to think of the PHP file as a place where PHP and HTML coexist and work together.

PHP zones

Some areas are the PHP stuff. They have their <?php and ?> delimiters to show when the PHP zone begins and ends. (just like how HTML tags  and CSS { } have their delimiters)

HTML zones

You can write it in a bunch of really really ugly ways, or not too ugly ways. It just depends on your choices.

This is a set of instructions for the computer so it really doesn’t matter what it looks like. In the end, the file is read, processed, and turned into static HTML.

Mad Lib template

Please do not spend all of your time making up a Mad Lib!

You can use this example.

Today, every student has a computer small enough to fit into their NOUN. You can solve any math problem by simply pushing the computer’s little PLURAL NOUN.

Computers can add, multiply, divide, and VERB (present tense). They can also VERB (present tense) better than a human.

Some computers have their own PART OF THE BODY(plural). Other’s have a/an ADJECTIVE screen that shows all kinds of PLURAL NOUN and ADJECTIVE figures.

Noun: person, place thing, or idea

Plural noun: people places things: The kids, cities, delicious beverages, concepts

Verb: action word: present tense: run, jump, sing, climb. trees

Adjective: descriptor: Hot, colorful, bright, lumpy

Checklist

Look over the goals again. Were they fulfilled? Did you learn the things? Only you can really know.

  1. You know how to print things to the screen with PHP. (Hint: it’s a keyword)

  2. We didn’t really cover what a statement is, but it always ends with a ;

  3. You know how to do some math

  4. You know how to combine strings by joining them together

  5. You know how to store something in memory and how to reference it thereafter

  6. You tried a whole bunch of combinations of everything we learned

  7. You completed your Madlib and got it up on the web

  8. You showed us and received the bonus exercises (and then did them)

  9. Also, this lesson has a whacky order. To prove to us that you read this list, tell us what you think about that in the chatroom.

Let's be friends