In this activity we'll use PHP to generate the list of photos in our album.

• We'll continue using the 'media.php' and 'style.css' files from the previous activities. Here they are again if you need them.

media.php

<?php
    $page = "media";
    include("header.php");
    include("menu.php");
?>
    <main>
        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="tree at sunset" title="this was the first image listed on Google when I checked">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec enim sem, efficitur et fringilla et, pretium at turpis. Nunc interdum, dolor vitae aliquam accumsan, lacus sapien varius tortor, fringilla lobortis turpis tortor et ante. In hac habitasse platea dictumst. Nullam elementum blandit tincidunt. Sed semper finibus massa, non mollis nulla mollis et. Nunc lectus metus, tempor nec dui ut, pharetra eleifend massa. Ut tempus porta metus, eget aliquet ligula tempor hendrerit. Curabitur vestibulum elit in commodo viverra. Nullam est orci, suscipit vitae tincidunt porta, lacinia sed nulla. Quisque ex eros, consectetur id metus sit amet, molestie tempor risus. In facilisis consequat eros in convallis. Nulla nec imperdiet nibh. Suspendisse consequat sit amet mi in imperdiet. Nullam eget aliquet metus. Vestibulum non fermentum eros. Cras sodales, nisl eget congue interdum, massa nulla porta lectus, quis suscipit est ipsum sit amet ante.</p>
        <p>Morbi gravida malesuada odio, sed pretium libero aliquam vitae. Suspendisse potenti. Nunc eget leo vulputate, dictum eros non, gravida lorem. In id nunc id orci ornare porttitor. Maecenas id laoreet risus. Aenean lacinia dignissim volutpat. Morbi et ligula ac purus gravida aliquet. Integer feugiat sapien ac porttitor iaculis.</p>
        <video src="http://it.bibliotecasmedellin.gov.co/bibliolabs/numeros/1.mp4" controls muted loop autoplay></video>
        <p>Phasellus pretium sit amet tellus ac tincidunt. Curabitur in ligula massa. Vivamus in urna suscipit, vehicula velit et, mollis purus. Aliquam sed risus vel urna tristique aliquam. Etiam egestas lectus arcu, quis lobortis diam luctus in. Vivamus id diam metus. Nulla bibendum dolor sit amet egestas semper. Praesent facilisis pellentesque condimentum.</p>
        <p>Mauris ac sapien justo. Curabitur a feugiat velit. Donec non mi ac turpis faucibus hendrerit. Nulla luctus est lectus, nec rhoncus nisi eleifend ac. Nullam iaculis mi eget faucibus mattis. Nullam nec cursus nisi. Donec vel nunc ac felis sodales tincidunt sed condimentum mauris.</p>
        <p>Praesent lobortis dictum purus, convallis dapibus velit malesuada non. Sed sit amet magna sagittis, maximus odio in, mattis erat. Phasellus ultricies risus turpis, vitae tempor diam finibus eu. Sed luctus augue purus, eget consectetur sapien egestas et. Sed eget tristique mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum rhoncus vehicula pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean placerat arcu vitae nisi vehicula semper. Cras sit amet risus dolor.</p>
        <audio src="https://freesound.org/data/previews/611/611814_13567802-lq.mp3" controls loop></audio>
        <input type="button" value="Play Audio" onclick="playPauseAudio()">
        <div id="album">
                <img src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
                <img src="https://images.ctfassets.net/hrltx12pl8hq/61DiwECVps74bWazF88Cy9/2cc9411d050b8ca50530cf97b3e51c96/Image_Cover.jpg?fit=fill&w=480&h=270" />
                <img src="https://images.ctfassets.net/hrltx12pl8hq/3MbF54EhWUhsXunc5Keueb/60774fbbff86e6bf6776f1e17a8016b4/04-nature_721703848.jpg?fit=fill&w=480&h=270" />
                <img src="https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg" />
                <img src="https://www.gettyimages.es/gi-resources/images/500px/983794168.jpg" />
                <img src="https://media.istockphoto.com/photos/concept-of-an-open-magic-book-open-pages-with-water-and-land-and-picture-id1279460648?b=1&k=20&m=1279460648&s=170667a&w=0&h=uZa830sWo8hlFN0Y7FnQ14giNC0Z2EBNuTMuNJeJhQg=" />
        </div>
    </main>
<?php
    include("footer.php");
?>

style.css

ol {
    color: blue;
  }
  
  ol ol {
    font-weight: 700;
  }

ul {
  list-style-type: none;
}

td, th {
  border-width: 1px;
  border-style: solid;
}

td {
  padding: 10px;
}

table {
  border-collapse: collapse;
}

header {
  background-color:indianred;
  border:darkred solid 2px;
  height: 100px;
  position: absolute;
  left: 16%;
  right: 0px;
  top: 0px;
}

nav {
  background-color: burlywood;
  border:yellow solid 2px;
  position: fixed;
  top: 0px;
  bottom: 0px;
  width: 16%;
  left: 0px;
}

main {
  background-color: lightgree;
  border: darkgreen solid 2px;
  position: absolute;
  top: 100px;
  left: 16%;
  right: 0px;
  bottom: 80px;
  overflow: scroll;
  padding: 20px;
}

footer {
  background-color: lightskyblue;
  border: darkblue solid 2px;
  position: absolute;
  bottom: 0px;
  height: 80px;
  left: 16%;
  right: 0px;
}

.content {
  background-color:coral;
  border:orangered solid 2px;
  height: 400px;
  padding: 40px;
  margin: 20px;
  display: inline-block;
  width: 300px;
}

img {
  float: left;
  max-height: 250px;
  border: solid 2px green;
  margin: 20px 20px 20px 0px;
  padding: 10px;
  border-radius: 30px;
}

#album {
  display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
}

video {
  max-height: 250px;
  float: right;
  clear: left;
  margin: 20px 0px 20px 20px;
  padding: 10px;
}

audio {
  margin: 20px 20px 20px 0px;
  padding: 10px 10px 10px 0px;
}

input[type=button] {
  display: block;
}

p {
  font-size:10px;
}

• Since we're going to start using PHP code in 'media.php', it will help to have the colors and automatic completion working for PHP rather than for HTML.
• Click on the word 'HTML' in the bottom right of the Visual Studio window, then change it to 'PHP'.

• We've seen how to use arrays to create a list or table in Javascript, which runs on the user's PC.
• In a real web application, the data will be obtained by a server and it's usually easier to generate the code on the server too.
• Arrays operate very similarly in PHP as in Javascript except in the way they're initiated. Add the following code at the end of the first PHP block in 'media.php'.

    $photos = array("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "https://images.ctfassets.net/hrltx12pl8hq/61DiwECVps74bWazF88Cy9/2cc9411d050b8ca50530cf97b3e51c96/Image_Cover.jpg?fit=fill&w=480&h=270",
    "https://images.ctfassets.net/hrltx12pl8hq/3MbF54EhWUhsXunc5Keueb/60774fbbff86e6bf6776f1e17a8016b4/04-nature_721703848.jpg?fit=fill&w=480&h=270",
    "https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg",
    "https://www.gettyimages.es/gi-resources/images/500px/983794168.jpg",
    "https://media.istockphoto.com/photos/concept-of-an-open-magic-book-open-pages-with-water-and-land-and-picture-id1279460648?b=1&k=20&m=1279460648&s=170667a&w=0&h=uZa830sWo8hlFN0Y7FnQ14giNC0Z2EBNuTMuNJeJhQg=");

• Feel free to replace these with the links to the images you chose earlier.
• This may look different to Javascript, but the structure is basically the same.
• $photos is our variable which we will use to refer to the array.
• We identify the content as an array using array().
• Each element of the array is a link and they are separated by , .

• Before we go any further, let's take a look at an important tool for debugging PHP - logs.
• The logs are stored on the server, so we'll need to use another tool like Putty to access the command line. These instructions will be updated with details on how to use that, but for now you'll need to ask for help.
• Once you've logged on to the server, enter the following text into the command line to see the most recent logs.

tail -f -n 50 /var/log/apache2/error.log

• Use this if you don't see what you expect to see on the screen.
• Unfortunately, since your classmates will also be generating errors that go to the same logs, you'll need to be quick to identify your own errors.
• We can be more targeted with any logs we generate though, and we'll prefix them with your name, such as follows. Add this to your PHP code (after changing my name to yours).

  error_log('MURRAY this is a log.');

• Refresh your page to generate the log.
• Now, in the server command line, enter the following line.

cat /var/log/apache2/error.log | grep 'MURRAY'

• Change my name to yours and use this to see the code you're generating.

• Recall that in Javascript, we used a for loop to display each line of the array.
• We can do the same in PHP.
• First, comment out all images in the 'album' div by selecting that text and pressing Ctrl-/. Notice that in HTML, code is commented out by placing <!-- in front and --> after the code to be commented.
• Now add the following code after the <div id="album"> tag.

<?php
    for($i = 0; $i < 6; $i++) {

    }
?>

• 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.