La siguiente es una publicación de invitado de Zachary Brady. Zachary está a punto de llevarnos a un viaje de principiantes usando PHP para hacer algunas cosas que nosotros, los desarrolladores front-end, a veces necesitamos hacer. Para mí, este tipo de cosas no nos convierte en desarrolladores back-end, sino en desarrolladores front-end con más recursos. Zachary también se enfoca en PHP aquí, pero los mismos conceptos están disponibles en cualquier lenguaje de back-end.
PHP a veces tiene mala reputación, pero aún persiste y prospera no solo dentro de algunos de los CMS más populares, sino también con estrategias emergentes como Responsive Design with Server Side Components (RESS). Descubrí que rociar un poco de PHP en mi flujo de trabajo de desarrollo front-end fortalece el código y acelera el proceso de desarrollo.
No es muy difícil ni lleva mucho tiempo adquirir suficientes conceptos básicos de PHP para comenzar a incluirlo en su kit de herramientas. Empecemos a descubrir cómo mezclar un pequeño script del lado del servidor en su desarrollo front-end puede ser fácil y gratificante.
Comenzando con algunos conceptos básicos de PHP
Si conoce los conceptos básicos de PHP, entonces salte a la siguiente parte. Para el resto de nosotros, puede ser bueno repasar un poco.
Como lenguaje del lado del servidor, un archivo PHP (como index.php o misAwesomeCatPhotos.php) es procesado en HTML por su servidor antes de ser enviado al navegador. Por esta razón, usted deber aloje sus archivos PHP en un servidor mientras trabaja con ellos. Este puede ser un servidor remoto o un servidor local que existe en su computadora. En realidad, esto es bastante simple de configurar gracias a un software como MAMP. (Video de inicio aquí en CSS-Tricks).
Una de las mejores cosas de PHP es que puedes mezclarlo con HTML normal dentro de un archivo PHP.
<div>
<?php
echo "Hello World";
?>
</div>El <?php y ?> Las etiquetas definen dónde está utilizando PHP en su archivo. Consejo profesional: si encuentra que sus páginas están en blanco, primero verifique que no le falte una etiqueta PHP de cierre en ninguna parte. La función de eco imprime lo que sigue directamente en el marcado. En este caso, lo que se está “repitiendo” es una cadena con las palabras “Hello World”. En PHP, terminar una declaración con un punto y coma es obligatorio; los puntos y comas faltantes son otra fuente común de scripts fallidos. Este PHP simple se traduce en
<div>
Hello World
</div>Las variables en PHP se pueden escribir como $aWord, $manyWords, $a_lot_of_numbers, $a4, etc. El ingrediente clave es la PS al principio del nombre de la variable.
Con variables podríamos escribir el código anterior así:
<div>
<?php
$whatDoYouSay = "Hello World";
echo $whatDoYouSay;
?>
</div>PHP también tiene for bucles y if declaraciones. Un if La declaración hace una pregunta y realiza una tarea si se prueba que la pregunta es verdadera y se puede combinar con una else declaración que realiza una tarea si la pregunta era falsa.
<?php
if ($a == 7) {
echo "The variable $a is currently 7.";
} else {
echo "The variable $a is something else other than 7 and should feel ashamed of itself.";
}
?>Si $a es igual a 7, entonces se repetirá la primera cadena, pero si $a es igual a algo tonto como 5, se repetirá la segunda declaración.
A for loop se usa para repetir un conjunto de código siempre que se cumpla cierta condición.
<?php
for ($d = 0; $d<7; $d++) {
echo $d;
}
?>Esto dice que estableceremos una variable llamada $d a 0, que haremos eco del valor de $d siempre que esté por debajo de 7, y se incrementará $d por uno al final de cada iteración. Esto produce “0123456”.
También usaremos la función include(), que toma la ruta relativa de otro archivo PHP, localiza el archivo especificado por la ruta e incluye su contenido dentro del archivo desde el que se llama.
PHP es mucho más que esto, pero estos conceptos básicos nos guiarán durante el resto del artículo. Si todavía no está seguro acerca de PHP, le sugiero que lea primero y luego repase un poco más. Ver estos conceptos en contexto puede ayudarlo a comprenderlos mejor.
Plantillas PHP simples
Es posible que, a medida que crea el marcado para cada página de su proyecto, ciertas partes se repitan. Las partes que más se repiten en un proyecto web son las encabezamiento y el pie de página.
Por lo general, si tenemos que cambiar algo en el encabezado de nuestro sitio web, tendríamos que editar manualmente el encabezado en cada archivo de nuestro proyecto. Aquí es donde PHP da un paso al frente para hacer nuestro trabajo más fácil. Con PHP podemos almacenar el marcado relacionado con el encabezado de nuestro proyecto en su propio archivo y usar el include() función para añadir el código a nuestros archivos. Por supuesto, podemos hacer lo mismo con el elemento de pie de página y cualquier otro fragmento que queramos usar en varias páginas.
<?php include("includes/header.php"); ?>
<div>All of the main content of the page which should be more than just this.</div>
<?php include("includes/footer.php"); ?>En este ejemplo, header.php y footer.php se almacenan en un directorio llamado “incluye” y se hace referencia a cada uno en el archivo. Imagina cuánto tiempo de desarrollo se puede ahorrar solo con este truco.
Sirviendo diferentes archivos dependiendo de la página
Una desventaja de publicar el mismo encabezado y pie de página en todas las páginas es que, de forma predeterminada, tenemos menos control sobre qué archivos se envían a las diferentes páginas. Es posible que tengamos un archivo JavaScript para un control deslizante de imágenes que solo necesitamos en la página de inicio o un script para la validación de formularios en la página de contacto. Afortunadamente, hay otro truco simple que puede ayudarnos con esto.
Para realizar este truco, primero necesito obtener el nombre del archivo actual y quitarle la extensión del archivo.
<?php
$file = basename($_SERVER['PHP_SELF']);
$pagename = str_replace(".php","",$file);
?>La primera línea obtiene el nombre del archivo del servidor, mientras que la segunda línea elimina la extensión del archivo (la segunda línea es más cosmética para que su código sea un poco más limpio, pero aún así lo recomiendo). Tiendo a poner esta línea de código en la parte superior de mis archivos incluso antes de abrir mi <html> etiqueta; esto me permite usar estos datos para una variedad de propósitos, como generar nombres de clases.
La segunda parte de este truco, decidir qué scripts servir para qué página va al pie de página antes de la etiqueta del cuerpo de cierre. Usaremos una combinación de declaraciones if/else para verificar si la página actual es la pagina de contacto. Si se repite una etiqueta de secuencia de comandos que hace referencia a mi archivo contact.min.js, si no, repetiremos el archivo global.min.js.
<?php
if ($pagename == 'contact') {
echo '<script src="https://css-tricks.com/sprinkling-php-server-side-techniques-help-front-end-tasks/js/contact.min.js"></script>';
} else {
echo '<script src="js/global.min.js"></script>';
}
?>Esta técnica se puede utilizar con cualquier tipo de archivo externo que desee incluir. Incluso me gusta usar Grunt para organizar mi JavaScript en archivos específicos de página o sección y luego usar esta técnica.
Un poco de RESS puede recorrer un largo camino
Podemos ir aún más lejos con el ejemplo anterior y usar una técnica similar para servir diferentes archivos según el contexto de su dispositivo. Este es un ejemplo muy simple de una solución RESS. RESS, Diseño receptivo con componentes del lado del servidor, solo significa que está mezclando un poco de lógica del lado del servidor en su kit de herramientas de diseño receptivo para hacer cosas increíbles como reducir el peso de la página.
Para esto, necesitaremos una biblioteca PHP llamada Mobile Detect, que brinda una manera fácil de descubrir qué tipo de dispositivo están usando sus usuarios. Incluya la biblioteca en su proyecto en alguna parte, me gusta ponerla en un directorio de “scripts” y luego usar el require_once función para incluirlo. También tendrá que iniciar una instancia de la Mobile_Detect clase que me gusta hacer justo después de la inclusión en mi archivo de encabezado.
<?php
require_once 'scripts/Mobile_Detect.php';
$detect = new Mobile_Detect;
?>Ahora puedo usar un par if/else en mi pie de página para decidir si el usuario está usando o no un dispositivo móvil y mostrar el archivo JavaScript apropiado. NOTA: Debido a que Mobile Detect ve las tabletas como un dispositivo móvil, también verifico para asegurarme de que el dispositivo no sea una tableta.
<?php
if (isset($detect) && $detect->isMobile() && !$detect->isTablet()) {
echo '<script src="https://css-tricks.com/sprinkling-php-server-side-techniques-help-front-end-tasks/js/global-mobile.min.js"></script>';
} else{
echo '<script src="js/global.min.js"></script>';
}
?>Con esta técnica, podemos crear JavaScript más apropiado para una experiencia móvil e ignorar todo el peso adicional de la página que puede provenir del JavaScript relacionado con la pantalla grande.
Patrones de marcado automático
Es posible que se encuentre con ciertos patrones de marcado que pueden no compartir el mismo contenido pero que se ven extremadamente similares entre sí. Una situación común puede ser mostrar un grupo de imágenes que pertenecen al mismo objeto de la galería. Afortunadamente, Lara Schenck mostró recientemente una solución de este tipo en una maravillosa charla que dio en la Smashing Conference NYC Jam Session.
// Function to print images
function printGalleryItem($path, $alt) {
echo '<div class="gallery__item">';
echo '<img src="' . $path . '" alt="' . $alt . '">';
echo '</div>';
}
// Loop through image directory and printGalleryItem markup for each
function printGallery($dir, $alt) {
echo '<div class="gallery">';
$fdir="assets/img/galleries/" . $dir . '/*';
foreach (glob($fdir) as $img_path) {
printGalleryItem($img_path, $alt);
}
echo '</div>';
}En PHP, como en otros lenguajes, es posible crear sus propias funciones personalizadas para facilitar la reutilización de su código.
La primera función, printGalleryItem(), toma una ruta relativa a una imagen y texto para su etiqueta alt y repite una etiqueta de imagen con un contenedor div. La segunda función, printGallery(), toma la ruta relativa a un directorio que contiene imágenes y una cadena que se usará para las etiquetas alt de las imágenes. La función primero hace eco de un contenedor para la galería y luego usa una versión del ciclo for llamada foreach para recorrer una serie de rutas de imágenes adquiridas por la función glob y aplicarlas a nuestro printGalleryItem() función. La función foreach es muy útil cuando necesita desplazarse por una matriz de variables y debido a los valores de cada una.
Hay algunos conceptos más avanzados a los que solo estoy hablando de boquilla en este ejemplo. Por ahora es suficiente entender qué hacen estas funciones y cómo pueden ayudar con su producción. Aunque puede ser bueno profundizar en el foreach y glob funciona cuando tienes la oportunidad también. Intente crear algunas funciones propias para automatizar algunos de los aspectos más redundantes de su marcado.
Esto es solo la punta del iceberg
Hay todo un mundo de posibilidades de lo que puedes hacer con un poco de PHP en tu desarrollo. La mayoría de los fragmentos de código más útiles también son bastante fáciles de entender y cuanto más te expongas a PHP, más fácil será. Hacer un poco de lógica en el servidor antes de enviar una página al navegador puede ahorrarle tiempo de desarrollo, darle a su código un poco más de solidez e incluso aligerar sus páginas.
Las técnicas mencionadas en este artículo deberían ser un buen punto de partida para usted, ya sea que sea nuevo en PHP o simplemente nuevo en el uso de PHP de esta manera. Sugiero encarecidamente investigar un poco más, por supuesto, y nunca tener miedo de experimentar tampoco; El código roto siempre se puede arreglar. Y oye, es posible que al final descubras que te encanta algo de PHP.