====== Web Development Lesson 6 - Media ====== ===== Exercises ===== ==== Objective ==== In this activity you'll apply what you've learnt to other elements and create a photo album of Colombian footballers. ==== Setup ==== * We'll base some exercises on work done to date in this lesson in 'media.php' and 'style.css'. * Others will be based on files created in previous lessons in the 'project' directory. ==== Javascript Video ==== * In 'media.php', create a button to play / pause the video. Use the same techniques you used to play / pause the audio. ==== PHP Arrays ==== * In the 'project' folder, create a file called 'album.php'. * Set up the base code for the file to include the header, menu and footer. * Create an album showing the photos for the Colombian footballers as shown in the following table. Try to do it using PHP arrays. ^ Player ^ Image ^ | Andrés Felipe Mosquera Marmolejo | https://secure.cache.images.core.optasports.com/soccer/players/150x150/132914.png | | David Ospina Ramírez | https://secure.cache.images.core.optasports.com/soccer/players/150x150/22426.png | | Camilo Andrés Vargas Gil | https://secure.cache.images.core.optasports.com/soccer/players/150x150/22456.png | | Yeimar Pastor Gómez Andrade | https://secure.cache.images.core.optasports.com/soccer/players/150x150/308766.png | | Jhon Janer Lucumí Bonilla | https://secure.cache.images.core.optasports.com/soccer/players/150x150/394760.png | | Johan Andrés Mojica Palacio | https://secure.cache.images.core.optasports.com/soccer/players/150x150/173784.png | | Daniel Muñoz Mejía | https://secure.cache.images.core.optasports.com/soccer/players/150x150/473447.png | | Davinson Sánchez Mina | https://secure.cache.images.core.optasports.com/soccer/players/150x150/290497.png | | William José Tesillo Gutiérrez | https://secure.cache.images.core.optasports.com/soccer/players/150x150/125048.png | * Style the album as you like. * For a bonus, display the name of the player with the photo. ==== Link Javascript Files ==== * Recall that we used a PHP variable $page to link the Javascript file for 'media.php'. Now the Javascript files for 'lists.php' and 'tables.php' don't work. * Add the PHP variable to these pages to reenable their Javascript code. * Do the same with all pages in the 'project' folder. You'll also need to add the relevant code into 'header.php'. ==== Add Menus ==== * Add a link for 'album.php' to the project 'menu.php' file. * Add a link for 'media.php' to the 'menu.php' file in the top level directory. [[en:web_development:media:summary|Next: Summary]]