Desarrollo Web Lección 6 - Medios

En esta actividad, aprenderá algunas técnicas avanzadas de matrices para matrices en PHP, que serán útiles al procesar datos de una base de datos.

• Continuaremos usando 'media.php' y 'style.css' en Visual Studio Code. Aquí está el código de nuevo si lo necesita.
• media.php
• cabecera.php
• menu.php
• pie.php
• style.css

• Hemos visto cómo crear una matriz en PHP como esta.

$animales = array('perro', 'elefante', 'conejo');

• Esto nos permite acceder a cada elemento de la matriz por número ('$animals[0]').
• Para mayor flexibilidad, en PHP (a diferencia de Javascript) podemos asignar nombres a cada elemento.

    $animales = array('elemento1' => 'perro', 'elemento2' => 'elefante', 'elemento3' => 'conejo');

• Actualice la matriz '$photos' en 'media.php' para aprovechar este formato.

    $fotos = array("Foto 1" => "https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
                    "Foto 2" => "https://images.ctfassets.net/hrltx12pl8hq/61DiwECVps74bWazF88Cy9/2cc9411d050b8ca50530cf97b3e51c96/Image_Cover.jpg?fit=fill&w=480&h=270",
                    "Foto 3" => "https://images.ctfassets.net/hrltx12pl8hq/3MbF54EhWUhsXunc5Keueb/60774fbbff86e6bf6776f1e17a8016b4/04-nature_721703848.jpg?fit=fill&w=480&h=270",
                    "foto 4" => "http://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg",
                    "Foto 5" => "https://www.gettyimages.es/gi-resources/images/500px/983794168.jpg",
                    "Foto 6" => "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=");

• Ahora, mostremos esto dentro de la <main> etiqueta.
• echo $fotos; no funcionará Cuando vea la página, verá la palabra 'Array' solo porque echosolo imprime cadenas.
• Prueba esto en su lugar.

    print_r($fotos);

• print_r muestra estructuras más complejas, incluidas matrices.
• Cuando vea la página, verá un texto complicado que se parece a la matriz.
• Para verlo correctamente, haga clic derecho en la página y seleccione 'Ver código fuente de la página'.
• Ahora el formato es mucho mejor y puede leer claramente la matriz.
• Esta es una forma de crear una matriz de este tipo. También podemos asignar cada elemento por separado.

    $animales['item1'] = 'perro';
    $animales['item2'] = 'elefante';
    $animales['item3'] = 'conejo';

• Podemos leer la matriz de la misma manera. Agregue este código a la <main> etiqueta.

    echo "MURRAY: la primera foto es $fotos['Foto 1'].";

• Ahora vea la página y verifique los resultados.

• Hemos visto cómo hacer un 'bucle for' en la actividad anterior, pero hay otro bucle que es extremadamente útil para procesar arreglos. Es el bucle 'foreach'.
• Agregue el siguiente código PHP a la <main> etiqueta después de crear su matriz.

    foreach($fotos como $nombre => $enlace) {
        echo "MURRAY: $nombre es un $enlace";
    }

• La primera línea configura el bucle. Dice 'ejecutar este código para cada elemento de la matriz $fotos, donde está la referencia de cada elemento $name y el elemento en sí $link'.
• Ahora podemos hacer referencia al nombre y al elemento real usando las variables $name y $link.
• echo luego puede mostrar estos valores para que podamos leerlos en el código HTML .
• Pruébelo ahora para asegurarse de que lo entiende.
• Cuando esté listo, agregue el siguiente código para mostrar las fotos junto con los nombres respectivos.

<?php
    foreach($fotos como $nombre => $enlace) {
?>
            <figura>
                <img src='<?php echo $enlace; ?>' alt='<?php echo $nombre; ?>'>
                <figcaption><?php echo $nombre; ?></figcaption>
            </figura>
<?php
    }
?>

• Hay un par de cosas a tener en cuenta aquí.
• Hemos utilizado un par de etiquetas HTML nuevas . <figure> es un elemento de bloque que se puede utilizar para presentar una imagen y una leyenda. <figcaption> se utiliza para contener el título de una imagen.
• En segundo lugar, hemos cambiado la forma en que codificamos el bloque HTML . En lugar de incluir todo el HTML dentro de una cadena, lo que requiere que lo agreguemos \t y \n lo hagamos legible en la vista Ver código fuente de la página, dejamos el HTML como está y creamos un nuevo bloque PHP para que se muestre cada variable.
• Esto es mucho más legible para mí.
• Actualiza tu página y comprueba que funciona como debería.
• Necesita un poco de estilo. Pruebe esto o agregue el suyo propio.

figcaption {
  display: block;
  text-align: center;
  font-family: 'Arial', sans-serif;
  color: green;
}

• Al igual que en Javascript, PHP tiene muchos tipos de bucles. Lo siguiente que veremos es el 'bucle while'.
• Agregue el siguiente código dentro de un bloque PHP. Sería mejor ponerlo al final para mantenerlo separado. Cambia mi nombre por el tuyo para que puedas encontrar tus resultados en los registros.

    $i = 0;
    while ($i < 10) {
        error_log("MURRAY: el valor de i es $i");
        $i++;
    }

• $i = 0; define una variable y la establece en '0'.
• while ($i < 10) {} ejecuta el código interno {} siempre que $i sea menor que 10.
• error_log("MURRAY: the value of i is $i"); genera una cadena que contiene el valor de $ilos registros para que podamos verlo.
• Finalmente, $i++; incrementa $icada bucle para que no continúe para siempre.
• Abra la página 'mysql.php' y verifique sus registros usando Putty.

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

• Debería ver su texto diez veces con el número aumentando de 0 a 9.
• Así que esta es otra forma de ejecutar el mismo código varias veces.

• media.php
• style.css
• resultado

Siguiente: Ejercicios