Bootstrap 4. Primeros pasos

icono de php Bootstrap es una colección de elementos, plantillas y componentes HTML, CSS y Javascript para crear rápidamente páginas web con un aspecto moderno y “responsivo” (¡menudo palabro!) al tamaño de pantalla de cualquier dispositivo. Su versión 4 se liberó hace un par de meses y aporta algunos cambios significativos como, por ejemplo, la inclusión de Popper como librería javascript para “tooltips” y otros elementos emergentes y la eliminación de las tipografías Glyphicons para introducir símbolos y pictogramas.

Podemos trabajar con Bootstrap bien descargandonosla en nuestro propio servidor web, o bien usando sus librerías directamente desde los CDN que nos ofrecen. Aquí usaremos este segundo método por sus evidentes ventajas de cara a montar una primera plantilla para pruebas. Necesitamos incluir simplemente el siguiente tag en :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

Si vamos a usar los elementos javascript necesitamos incluir también las librerías correspondientes y, ademas, las de jquery y popper en nuestro proyecto las cuales también tienen disponible la posibilidad de enlazarlas directamente sin necesidad de descargarlas en local:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.1/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

IMPORTANTE: los enlaces anteriores corresponden a las versiones estables más recientes en el momento de escribir esto. No suelen eliminar las versiones anteriores, pero conviene que te cerciores si llegas a este texto en un futuro lejano.

Con todo esto, la plantilla mínima de HTML para empezar a trabajar (incluyendo los enlaces correspondientes a las librerías javascript comentados) sería esta:

<!DOCTYPE html>
<html lang="es">
    <head>
    	<meta charset="utf-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    	<title>Plantilla Bootstrap</title>
  	</head>
  	<body>
		<h1>Plantilla Bootstrap</h1>

    
		<!-- Javascript opcional -->
		<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    	     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.1/umd/popper.min.js"></script>
    	     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> -->
  	</body>
</html>

Sosa, verdad? Claro, aún no hemos empezado a trabajar… Si quieres ver algo más impactante, bootstrap dispone de plantillas con algo mas de chicha para tus diseños. Las tienes disponibles en este enlace. Si prefieres empezar desde cero, tienes disponible un montón de La documentación bastante fácil de seguir que incluye multitud de ejemplos prácticos para empezar a trabajar desde el primer minuto.

Laravel 5.6. Estructura y primeros pasos: Autenticación de usuarios

icono de php Ya yenemos Laravel 5.6 instalado en alguno de los dos entornos que hemos visto antes. ¿Qué sigue? Lo primero, entender un poquito la estructura de directorios que nos ha creado composer. Sólo lo imprescindible. El resto lo iremos viendo a medida que avanzamos.

josemaria@valeria /var/www/html/prueba $ ls -la
total 236
drwxr-xr-x 12 root www-data   4096 mar  9 19:31 .
drwxr-xr-x  3 root www-data   4096 mar  9 18:29 ..
drwxr-xrwx  6 root www-data   4096 ene  3 17:52 app
-rwxr-xrwx  1 root www-data   1686 ene  3 17:52 artisan
drwxr-xrwx  3 root www-data   4096 ene  3 17:52 bootstrap
-rw-r--rw-  1 root www-data   1413 ene  3 17:52 composer.json
-rw-r--rw-  1 root www-data 143565 mar  8 07:37 composer.lock
drwxr-xrwx  2 root www-data   4096 ene  3 17:52 config
drwxr-xrwx  5 root www-data   4096 ene  3 17:52 database
-rw-r--r--  1 root www-data    612 mar  9 19:31 .env
-rw-r--r--  1 root www-data    565 ene  3 17:52 .env.example
-rw-r--r--  1 root www-data    111 ene  3 17:52 .gitattributes
-rw-r--r--  1 root www-data    146 ene  3 17:52 .gitignore
-rw-r--rw-  1 root www-data   1125 ene  3 17:52 package.json
-rw-r--rw-  1 root www-data   1040 ene  3 17:52 phpunit.xml
drwxr-xrwx  4 root www-data   4096 ene  3 17:52 public
-rw-r--rw-  1 root www-data   3550 ene  3 17:52 readme.md
drwxr-xrwx  5 root www-data   4096 ene  3 17:52 resources
drwxr-xrwx  2 root www-data   4096 ene  3 17:52 routes
-rw-r--rw-  1 root www-data    563 ene  3 17:52 server.php
drwxrwxrwx  5 root www-data   4096 ene  3 17:52 storage
drwxr-xrwx  4 root www-data   4096 ene  3 17:52 tests
drwxr-xrwx 36 root www-data   4096 mar  8 07:38 vendor
-rw-r--rw-  1 root www-data    549 ene  3 17:52 webpack.mix.js

El directorio public ejerce de DocumentRoot. Allí encontraremos el index.php que da entrada a nuestra aplicación web así como las hojas de estilos, etc. El fichero .env que vemos aquí arriba en el directorio raiz de nuestra aplicación es el fichero de configuración principal. De hecho, puesto que vamos a empezar a trabajar con bases de datos en este momento podemos aprovechar para editar las siguientes directivas:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=laravel
DB_PASSWORD=secreto

Importante: aunque usemos mariadb la directiva DB_CONNECTION debe de ser mysql porque Laravel no entiende otra y, a fin de cuentas, ambas son compatibles a nivel binario. Para que Laravel sea capaz de hacer uso de esa base de datos debemos de crearla. A ella y al usuario que le hemos dicho que va a usar para manejarla. Entramos en nuestro gestor (mysql o mariadb) y ejecutamos lo siguiente:

CREATE DATABASE laravel;
CREATE USER laravel@localhost IDENTIFIED BY 'secreto';
GRANT ALL ON laravel.* TO laravel@localhost;

Vamos ahora a crear nuestro sistema de autenticación. Laravel viene ya con un módulo llamado User.php que reside en el directorio app. Para generar el resto de lo que necesitamos ejecutamos lo siguiente:

php artisan make:auth
php artisan migrate

La primera línea crea el código y rutas necesario para la gestión de usuarios. En particular, creará o modificará los siguientes ficheros:

routes/web.php
resources/views/auth/login.blade.php
resources/views/auth/register.blade.php
resources/views/auth/passwords/email.blade.php
resources/views/auth/passwords/reset.blade.php

La segunda instrucción crea la estructura de tablas necesaria en la base de datos que hemos configurado previamente. Si ahora volvemos a cargar la web de nuestro aplicación veremos que en la esquina superior derecha tenemos dos nuevos enlaces correspondientes a las funcionalidades de Login y Registro:

Laravel 5.6 con la funcionalidad de login y registro

Las pantallas de registro y login por defecto son estas:

Pantalla de registro en Laravel 5.6
Pantalla de login en Laravel 5.6

Y una vez hecho login vemos que en la barra de menú se nos identifica con nuestro nombre de usuario y tenemos la posibilidad de cerrar sesión:

Logout en Laravel 5.6

Si le echamos un vistazo a “las tripas” vemos que nos ha creado dos tablas una de las cuales, la de usuarios, es la que guardará la información relativa a los registros de usuarios.
Tablas creadas por Laravel 5.6 para la autenticación de usuarios

Además, tal y como está mandado, vemos que no almacena las contraseñas en claro sino un hash de las mismas:

hash de las passwords en Laravel 5.6

La castellanización de los recursos es tan sencilla como editar alguno de los ficheros php que hemos indicado anteriormente. Por ejemplo, el fichero login.blade.php es el que contiene la ventana de login y register.blade.php la de registro. Con muy poco esfuerzo tendremos las ventanas anteriores en perfecto castellano. Pero eso ya os lo dejo a vosotros 😉

Instalando Laravel en Windows 7 con XAMPP

icono de php Hace unos minutos hemos publicado la forma de instalar Laravel en una Debian con Apache. Vamos ahora a ver como se hace en un windows 7 con xampp. Imagino que hacerlo en cualquier otra versión de windows más moderna será igual de fácil.

Partimos entonces de ese windows instalado, funcionando, y con xampp también instalado y funcional. Lo primero que tenemos que instalarnos es composer, el gestor de paquetes PHP que utiliza Laravel para crear la estructura que necesistan sus proyectos. Para ello nos descargamos el instalador para windows y ya sabéis: siguiente-siguiente-siguiente-aceptar 😀

Y ya está. Ya tenemos todo lo que necesitamos. Vamos ahora a crear la estructura para nuestra primera aplicación con Laravel. La versión del framework en el momento de escribir esto es la 5.6. Suponemos que se llamará prueba y que la instalaremos en el directorio web por defecto que usa xampp. Nos vamos a la línea de comandos y, suponiendo que trabajamos sobre el disco C:, ejecutamos lo siguiente:

cd c:\xampp\htdocs
composer create-project laravel/laravel prueba --prefer-dist

En segundo lugar tenemos que crear el virtual host necesario para esta aplicación. Xampp usa para ello el archivo httpd-vhosts.conf que reside en el directorio c:\xampp\apache\conf\extra. Editamos este archivo y añadimos lo siguiente:

<VirtualHost *:80>
  DocumentRoot "C:\xampp\htdocs\prueba\public"
  DirectoryIndex index.php
  <Directory "C:\xampp\htdocs\prueba">
        AllowOverride All
  </Directory>
  ErrorLog "logs/pruebalaravel-error.log"
  CustomLog "logs/pruebalaravel-access.log" combined
</VirtualHost>

Y listo. Reiniciamos apache y abrimos un exporador. Si escribimos http://localhost veremos la página de bienvenida de Laravel:

Laravel 5.6 en windows con Xampp

Instalando Laravel en Debian 9

icono de php Repasando el “histórico” del blog que a menudo me sirve como memoria veo que he recurrido en los últimos 12 años a dos frameworks para php: cake y codeigniter. Ahora que me toca volver a decidirme por alguno y teniendo en cuenta que tengo totalmente olvidado a ambos he preguntado por ahí y todo el mundo parece estar de acuerdo en que lo mejor del momento es Laravel. La versión actual de Laravel es la 5.6. Vamos, pues, a por el tercero.

La instalación de Laravel es bien sencilla. En esta entrada tocaremos un entorno “clásico” en este blog: una Debian sin entorno gráfico. En una entrada posterior tocaremos la instalación en un windows 7 con Xampp que en este caso me resulta también imprescindible. Vamos a ello.

Partimos de una Debian 9.3.0 (la versión estable en el momento de escribir esto) recién instalada y sin ningún tipo de personalización. Lo primero que necesitamos instalar son ciertos paquetes de utilidades y el entorno web necesario para trabajar con laravel: apache2, php y mysql-server:

apt install curl unzip git
apt install apache2 libapache2-mod-php
apt install mysql-server
apt install php-mysql php-xml php-mbstring

En segundo lugar tenemos que instalar composer, un gestor de paquetes php que nos servirá para instalar el entorno necesario para trabajar con Laravel. Así:

cd /usr/local/bin
curl -sS https://getcomposer.org/installer | php

Esto bajará un archivo llamado composer.phar y lo depositará en el directorio /usr/local/bin. Y ya hemos acabado. ¿Y he leído por ahí que alguien decía que era difícil? ¡Tendrían que haber instalado alguna red Novell en su vida! 😀

Como decía, ya tenemos todo lo que necesitamos para crear nuestra primera aplicación con Laravel. Empezamos. Nuestro primer proyecto se llamará prueba y estará en el directorio /var/www/html/prueba. Lo primero que tenemos que hacer es hacer que composer nos cree toda la estructura necesaria:

cd /var/www/html
composer.phar create-project laravel/laravel prueba --prefer-dist

Asignamos los permisos adecuados en la estructura que se ha creado:

chgrp -R www-data /var/www/html/your-project
chmod -R 775 /var/www/html/your-project/storage

Creamos un virtual host adecuado en el directorio /etc/apache2/sites-availables. En mi caso le he puesto laravel.conf y el contenido creado es este:

<VirtualHost *:80>
    DocumentRoot /var/www/html/prueba/public
    DirectoryIndex index.php
    <Directory /var/www/html/prueba>
        AllowOverride All
    </Directory>
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Por último, deshabilitamos el virtual host que apache crea por defecto, habilitamos el nuestro, habilitamos el modulo rewrite de apache y reiniciamos el servidor web:

a2dissite 000-default.conf
a2ensite laravel.conf
a2enmod rewrite
systemctl restart apache2

Si ahora apuntamos con un navegador a la ip de nuestra máquina debian veremos la página de inicio de Laravel:

Laravel 5.6 en Debian 9.4