Differences

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

--- en:web_development:media:php [2021/12/21 07:54]
mag
+++ en:web_development:media:php [2023/08/16 09:33] (current)
@@ Line 218: / Line 218: @@
   * 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>
-  * When you refresh your page you should see this sentence 6 times with the numbers 0 to 5. So the variable
+  * 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]]
-  * Now let's add the image code to our generated HTML. Replace your error log with the following code.
-<code>        echo "<img src='" . $photos[$i] . "'>";</code>
-  * When you refresh your page now, you should see the images in the album container again.
-  * This code may look complicated, but don't be daunted. Let's break it down.
-  * <html>echo</html> means to display the following text in the output (HTML code).
-  * We can set text by either <html> ' ' </html> or by <html> " " </html>. Everything inside <html> ' ' </html> will be displayed exactly as typed.
-  * If we use <html> " " </html> then the values of any variables will be displayed. This doesn't work well with complex variables like arrays, but we can make array elements work too by wrapping it in <html> {} </html>.
-  * Using double quotes also allows processing of 'escaped characters' such as <html>\t</html>, which is represented as a tab, and <html>\n</html>, which is represented as a new line. These are not required, but make reading the resulting HTML code easier.
-  * The last thing to notice is that we've changed the <html>src=" "</html> to <html>src=' '</html>. If we left it as double quotes, then our <html>echo</html> command would be confused about where the end of the string is. It would read <html>echo "<img src="</html> and then would throw an error when it encountered <html>{</html>.
-[[en:web_development:media:exercises|Next: Exercises]]

Tech School

User Tools

Site Tools

Differences

Page Tools