White-space Elimination and Concatenation (PHP)

Let's start with this command:

<?php

    echo '<img src="frog.png">';

?>

Does that all make sense? We want to include double quotes in the text we want to display, so we surround the whole piece of text in single quotes. Our final HTML should look like this, with the double quotes in it:

<img src="frog.png">

The single quotes were part of the PHP code, telling the PHP server where the piece of text to display to screen started and ended. (As far as the PHP server is concerned the double quotes are just part of that piece of text. It doesn't do anything with them; it just sends them to the browser.) The double quotes are part of the HTML code, which tells the browser where the file name of the image begins and ends.

Let's say that now we want to replace the value frog.png with a variable. We could do it like this:

<?php

    echo '<img src="';
    echo $img;
    echo '">';

?>

Pay close attention to where the double quotes are and where the single quotes are. Does that make sense? Once again, the PHP server doesn't care anything about the double quotes; they are just treated as regular text that gets sent to the browser. The browser still sees the same code; it doesn't have any idea that it took three PHP statements to generate the HTML now instead of one.

<img src="file/name/from/img/variable.png">

Instead of writing that code in three separate echo statements (one for the first piece of text, one for the variable, and another for the last piece of text), we could instead concatenate all three of those together into one echo statement, like this:

<?php

    echo '<img src="' . $img . '">';

?>

Does that help?

Those spaces make the code easier to read. These two pieces of code are identical:

echo "Name: " . $name;
echo "Name: ".$name;

Here are two more pieces of code that are identical:

$sum=1+2;
$sum = 1 + 2;

However, the following two pieces of code are NOT identical:

echo "Name:" . $name;
echo "Name: ". $name;

Here are the differences:

• The spaces in the PHP code don't make a difference.
• The spaces in between the quotation marks will be treated like a piece of text that get sent straight down to the browser.

Does that help?

Let me add a question to test if I'm understanding this correctly: instead of concatenation, we could've just echoed the concatenated items separately by using multiple echo commands..?

Adding more to my question:

In this specific snippet of code:

'<img src="' . $product["img"] . '"

what is the importance of concatenation in AFTER declaring the variable:

 $product["img"] . ' "   <-----

You want to understand how concatenation using single quotes ( ' ' ) to interpret double quotes ( " " ) as literals, such as those in HTML.

I suggest you work backwards, starting with the hard coded text and replacing it with concatenated PHP variables.

Step 1) Start with:

echo '<img src = "http://shirts4mike.com/img/shirts/shirt-108.jpg" alt = "Logo Shirt, Red">';

Step 2) Replace the URL of the image source with the PHP variable, product["image"]

echo '<img src = " $product["img"] " alt = "Logo Shirt, Red">';

Step 3) Add in the periods to concatenate:

echo '<img src = " . $product["img"] . " alt = "Logo Shirt, Red">';

Step 4) You began the string with a single quote (') so it needs a pair, now that you've concatenated the string, add a pairing single quote between the opening double quote and the period " .

echo '<img src = "' . $product["img"] . " alt = "Logo Shirt, Red">';

Step 5) Now the end of the string needs it's pairing single quote . "

echo '<img src = "' . $product["img"] . '" alt = "Logo Shirt, Red">';

Try it out yourself, I made you mini-code challenge

Thanks @Randy @James.

So the reason we have a space between the concatenated items is...?

@Randy - For what it's worth, I think that's an excellent explanation of whitespace in PHP.

Hello all. I've been working through the PHP course and trying to apply the bits about form creation to my own site. Right now, I've got a contact page with a form that successfully sends the user to a thank you message when it's submitted. I'm right up to before Randy includes the phpmailer file. But I'm having a real problem with whitespace. Observe how the main content div changes size to fit whatever's inside it for every page except the contact page:

http://anyonecanplayguitar.org/test/

Viewing the source, I can see lots of white space in the markup, but even going nuts and eliminating every single little bit makes no difference. I've watched the video mentioned before in this post but I'm afraid I'm still at a loss for how to resolve the layout and styling issues that arise on this one and only page. Any help is greatly appreciated!