Tech School

User Tools

Site Tools

Trace:
en:web_development:media:php

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision 		Previous revision
en:web_development:media:php [2021/12/20 17:36]
mag created 		en:web_development:media:php [2023/08/16 09:33] (current)
Line 182: Line 182:
 <code>cat /var/log/apache2/error.log | grep 'MURRAY'</code> <code>cat /var/log/apache2/error.log | grep 'MURRAY'</code>
   * Change my name to yours and use this to see the code you're generating.   * Change my name to yours and use this to see the code you're generating.
 +  * Of course, it's also possible to show your text on the screen, and that works well in early development, but when you're in (or close to) a live environment, you need make sure your debug text never appears to users, so it's safer to display them in the logs.
  
 ==== PHP For Loop ==== ==== PHP For Loop ====
Line 194: Line 195:
 ?></code> ?></code>
   * This should look very familiar. The only difference to Javascript is that our PHP variable begins with '$'.   * This should look very familiar. The only difference to Javascript is that our PHP variable begins with '$'.
-  * Now we want to check that we are looping correctly.+  * Now we want to check that we are looping correctly, so we'll use an error log. 
 +  * Add the following code inside the <html> {} </html> of your for loop (replacing my name with yours). 
 +<code>        error_log('MURRAY ' . $i);</code> 
 +  * If you refresh your page now then check your logs (<html>cat /var/log/apache2/error.log | grep 'MURRAY'</html>), you should see six lines with your name, each having a number from 0 to 5 as expected. 
 +  * Note that <html> . </html> is used to connect strings together. 
 +  * Now let's modify that line to show the image link. 
 +<code>        error_log('MURRAY ' . $photos[$i]);</code> 
 +  * Refresh your page and check the logs again. You should see six lines with your name and the six different image links (or however many images you have added to your <html>$photos</html> array. 
 + 
 +==== PHP Strings ==== 
 +  * Before we go any further, let's take a closer look at strings in PHP, which are very similar to strings in Javascript. 
 +  * Let's start with some simple text. Add this just before your for loop. 
 +<code>    echo 'This is text.';</code> 
 +  * Refresh your page and see this text appears where your album should be. 
 +  * You might already have noticed one major difference between Javascript and PHP. In Javascript, to make your text appear in the document, you need to attach it to a particular element. In PHP, your text is entered wherever it appears in the flow of HTML code. In fact, it becomes part of the HTML code. 
 +  * Try this. Update your 'echo' code to the following. 
 +<code>    echo '<img src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">';</code> 
 +  * Now we've added HTML code for an image, so if you refresh your page you will see the first photo appear. 
 +  * Notice that use of <html> " </html> and <html> ' </html>. <html> ' </html> surrounds the entire string, while <html> " </html> surrounds only the <html>src</html> value. We must be very careful not to mix them up. If, for example, we have <html>echo '<img src='https: ... '>';</html> then the echo command would think the string ended at <html>src='</html> and throw an error at 'http' because it's not recognised as PHP code. 
 +  * We want to change the image link to the data from our array, so we can break the code up as follows. 
 +<code>    echo '<img src="' . $photos[0] . '">';</code> 
 +  * Here we are replacing the image link with the first item in the photos array, and joining the parts of the string with <html> . </html>. 
 +  * This works, but there is a cleaner way. Place the following code inside the for loop. 
 +<code>    echo 'This is photo number $i.';</code> 
 +  * When you refresh your page you should see this sentence 6 times exactly as is. That's not what we want. Let's change it a bit. 
 +<code>    echo "This is photo number $i.";</code> 
 +  * Now when you refresh your page you should see the sentence 6 times with the numbers 0 to 5, which is much better. 
 +  * So wrapping the string in <html> " </html> instead of <html> ' </html> allowed the <html>echo</html> command to interpret <html> $i </html> as a variable and display the value instead of the exact text. 
 +  * Let's try that with the array item. 
 +<code>    echo "This is the photo string $photos[$i].";</code> 
 +  * Refresh the page and see that we now see the string. 
 +  * Let's change this to the HTML for our image. 
 +<code>    echo "<img src='$photos[$i]'>";</code> 
 +  * Refresh the page and you should now see your photos displayed properly. 
 +  * We could stop here, but I want to take it one step further. 
 +  * In your page, right click and select 'View Page Source'. 
 +  * Notice how most of the page is readable, but the code generated by PHP (the list of images inside <html><div id="album"></html> is one long string. Let's fix that. 
 +<code>    echo "\t\t\t<img src='$photos[$i]'>\n";</code> 
 +  * Refresh your page and check the source code again. Now it's much better. 
 +  * We've added <html>\t</html> which inserts a tab and <html>\n</html> which inserts a new line. This only works when we're using double quotes (<html> " </html>). 
 +  * Now you're ready to practise. 
 + 
 +[[en:web_development:media:named_arrays|Next: Named Arrays]]
en/web_development/media/php.1640050578.txt.gz · Last modified: 2023/08/16 09:33 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki