Desarrollo Web Lección 6 - Medios

En esta actividad usaremos PHP para generar la lista de fotos en nuestro álbum.

• Continuaremos usando los archivos 'media.php' y 'style.css' de las actividades anteriores. Aquí están de nuevo si los necesitas.
• media.php
• cabecera.php
• menu.php
• pie.php
• style.css
• Dado que vamos a comenzar a usar el código PHP en 'media.php', ayudará que los colores y la finalización automática funcionen para PHP en lugar de HTML .
• Haga clic en la palabra ' HTML ' en la parte inferior derecha de la ventana de Visual Studio, luego cámbiela a 'PHP'.

• Hemos visto cómo usar matrices para crear una lista o tabla en Javascript, que se ejecuta en la PC del usuario.
• En una aplicación web real, un servidor obtendrá los datos y, por lo general, también es más fácil generar el código en el servidor.
• Las matrices funcionan de manera muy similar en PHP que en Javascript, excepto en la forma en que se inician. Agrega el siguiente código al final del primer bloque de PHP en 'media.php'.

    $fotos = 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=");

• Siéntase libre de reemplazarlos con los enlaces a las imágenes que eligió anteriormente.
• Esto puede parecer diferente a Javascript, pero la estructura es básicamente la misma.
• $photos es nuestra variable que usaremos para referirnos a la matriz. En PHP, variables tienen que comenzar con $.
• Identificamos el contenido como una matriz usando array().
• Cada elemento de la matriz es un enlace y están separados por ',' .

• Antes de continuar, echemos un vistazo a una herramienta importante para depurar PHP: los registros.
• Los registros se almacenan en el servidor, por lo que necesitaremos usar otra herramienta como Putty para acceder a la línea de comandos. Estas instrucciones se actualizarán con detalles sobre cómo usarlo, pero por ahora deberá pedir ayuda.
• Una vez que haya iniciado sesión en el servidor, ingrese el siguiente texto en la línea de comando para ver los registros más recientes.

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

• Use esto si no ve lo que espera ver en la pantalla.
• Desafortunadamente, dado que sus compañeros de clase también generarán errores que irán a los mismos registros, deberá ser rápido para identificar sus propios errores.
• Sin embargo, podemos ser más específicos con los registros que generamos, y los prefijaremos con su nombre, como se muestra a continuación. Agregue esto a su código PHP (después de cambiar mi nombre por el suyo).

  error_log('MURRAY esto es un registro.');

• Actualice su página para generar el registro.
• Ahora, en la línea de comando del servidor, ingrese la siguiente línea.

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

• Cambia mi nombre por el tuyo y usa esto para ver el código que estás generando.
• Por supuesto, también es posible mostrar su texto en la pantalla, y eso funciona bien en las primeras etapas del desarrollo, pero cuando está en (o cerca de) un entorno en vivo, debe asegurarse de que su texto de depuración nunca se muestre a los usuarios, por lo que es más seguro mostrarlos en los registros.

• Recuerde que en Javascript, usamos un ciclo for para mostrar cada línea de la matriz.
• Podemos hacer lo mismo en PHP.
• Primero, comente todas las imágenes en el div 'álbum' seleccionando ese texto y presionando Ctrl-/. Tenga en cuenta que en HTML , el código se comenta colocándolo <!-- delante y --> después del código que se va a comentar.
• Ahora agregue el siguiente código después de la etiqueta <div id="album">.

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

    }
?>

• Esto debería parecer muy familiar. La única diferencia con Javascript es que nuestra variable PHP comienza con '$'.
• Ahora queremos verificar que estamos haciendo un bucle correctamente, por lo que usaremos un registro de errores.
• Agregue el siguiente código dentro {} de su ciclo for (reemplazando mi nombre con el suyo).

        error_log('MURRAY' . $i);

• Si actualiza su página ahora, luego verifique sus registros (cat /var/log/apache2/error.log | grep 'MURRAY'), debería ver seis líneas con su nombre, cada una con un número del 0 al 5 como se esperaba.
• Tenga en cuenta que . se utiliza para conectar cadenas entre sí.
• Ahora modifiquemos esa línea para mostrar el enlace de la imagen.

        error_log('MURRAY ' . $fotos[$i]);

• Actualice su página y verifique los registros nuevamente. Debería ver seis líneas con su nombre y los seis enlaces de imágenes diferentes (o la cantidad de imágenes que haya agregado a su $photos matriz).

• Antes de continuar, echemos un vistazo más de cerca a las cadenas en PHP, que son muy similares a las cadenas en Javascript.
• Comencemos con un texto simple. Agregue esto justo antes de su bucle for.

    echo 'Esto es texto.';

• Actualiza tu página y verás que este texto aparece donde debería estar tu álbum.
• Es posible que ya haya notado una gran diferencia entre Javascript y PHP. En Javascript, para que su texto aparezca en el documento, debe adjuntarlo a un elemento en particular. En PHP, su texto se ingresa dondequiera que aparezca en el flujo del código HTML . De hecho, se convierte en parte del código HTML .
• Prueba esto. Actualice su código 'echo' a lo siguiente.

    echo '<img src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">';

• Ahora hemos agregado código HTML para una imagen, por lo que si actualiza su página, verá aparecer la primera foto.
• Observe que el uso de " y ' . ' rodea toda la cadena, mientras que " rodea solo el src valor. Debemos tener mucho cuidado de no confundirlos. Si, por ejemplo, tenemos echo '<img src='https: ... '>';src=', entonces el comando echo pensaría que la cadena terminó en y generaría un error en 'http' porque no se reconoce como código PHP.
• Queremos cambiar el enlace de la imagen a los datos de nuestra matriz, por lo que podemos dividir el código de la siguiente manera.

    echo '<img src="' . $fotos[0] . '">';

• Aquí estamos reemplazando el enlace de la imagen con el primer elemento en la matriz de fotos y uniendo las partes de la cadena con ..
• Esto funciona, pero hay una forma más limpia. Coloque el siguiente código dentro del bucle for.

    echo 'Esta es la foto número $i.';

• Cuando actualice su página, debería ver esta oración 6 veces exactamente como está. Eso no es lo que queremos. Vamos a cambiarlo un poco.

    echo "Esta es la foto número $i.";

• Ahora, cuando actualice su página, debería ver la oración 6 veces con los números del 0 al 5, lo cual es mucho mejor.
• Entonces, envolver la cadena en " lugar de ' permitir que el echo comando se interprete $i como una variable y muestre el valor en lugar del texto exacto.
• Probemos eso con el elemento de la matriz.

    echo "Esta es la cadena de fotos $fotos[$i].";

• Actualice la página y vea que ahora vemos la cadena.
• Cambiemos esto al HTML de nuestra imagen.

    echo "<img src='$fotos[$i]'>";

• Actualice la página y ahora debería ver sus fotos mostradas correctamente.
• Podríamos detenernos aquí, pero quiero ir un paso más allá.
• En su página, haga clic con el botón derecho y seleccione 'Ver código fuente de la página'.
• Observe cómo la mayor parte de la página es legible, pero el código generado por PHP (la lista de imágenes dentro <div id="album">) es una cadena larga. Arreglemos eso.

    echo "\t\t\t<img src='$fotos[$i]'>\n";

• Actualice su página y verifique el código fuente nuevamente. Ahora es mucho mejor.
• Hemos agregado \t cuál inserta una pestaña y \n cuál inserta una nueva línea. Esto solo funciona cuando usamos comillas dobles (").
• Ahora estás listo para practicar.

• media.php
• resultado

Siguiente: Matrices con Nombres