PHP Laravel versión 13
Sumario
- 1 Introdución a Laravel
- 2 Instalación
- 3 Bootstrap e Tailwind en Laravel
- 3.1 Introdución
- 3.2 Que é Bootstrap?
- 3.3 Que é Tailwind CSS?
- 3.4 Diferenzas entre Bootstrap e Tailwind
- 3.5 Por que imos utilizar Bootstrap?
- 3.6 Como substituír Tailwind por Bootstrap en Laravel
- 3.6.1 Paso 1. Instalar Bootstrap
- 3.6.2 Paso 2. Eliminar as referencias a Tailwind
- 3.6.3 Paso 3. Importar Bootstrap
- 3.6.4 Paso 4. Incorporar o JavaScript de Bootstrap
- 3.6.5 Paso 5. Comprobar a configuración de Vite
- 3.6.6 Paso 6. Cargar os estilos nas vistas Blade
- 3.6.7 Paso 7. Compilar os recursos
- 3.6.8 Paso 8. Desinstalar Tailwind (opcional)
- 3.7 Exemplo de formulario con Bootstrap e Blade
- 3.8 Conclusión
- 3.9 Documentación oficial
Introdución a Laravel
Que é Laravel?
Laravel é un framework de desenvolvemento web para PHP que facilita a creación de aplicacións web modernas, organizadas e seguras.
Un framework é un conxunto de ferramentas, bibliotecas e regras de organización que nos axudan a desenvolver aplicacións sen ter que programar todo desde cero.
Laravel está desenvolvido en PHP e é de código aberto, polo que podemos utilizalo gratuitamente.
Con Laravel seguimos programando en PHP, pero dispoñemos de moitas funcionalidades que simplifican o noso traballo.
Para que se utiliza Laravel?
Laravel permite desenvolver aplicacións web de diferentes tipos:
- Tendas en liña.
- Aplicacións para xestionar usuarios e contrasinais.
- Sistemas de reservas.
- Plataformas educativas.
- Aplicacións de xestión de empresas.
- Aplicacións que consultan e modifican bases de datos.
- APIs para aplicacións móbiles ou aplicacións web.
Por exemplo, podemos utilizar Laravel para desenvolver unha aplicación de xestión dunha biblioteca que permita:
- Rexistrar libros.
- Consultar os libros dispoñibles.
- Engadir, modificar e eliminar libros.
- Xestionar préstamos.
- Identificar os usuarios mediante o seu nome e contrasinal.
Por que utilizar Laravel en lugar de PHP directamente?
Con PHP podemos desenvolver todas estas aplicacións sen utilizar ningún framework. Porén, cando unha aplicación medra, debemos resolver numerosos problemas:
- Organizar o código en diferentes ficheiros e clases.
- Xestionar as conexións coa base de datos.
- Procesar e validar formularios.
- Xestionar sesións e usuarios.
- Protexer a aplicación fronte a ataques.
- Xestionar os enderezos URL da aplicación.
- Evitar repetir código.
Laravel proporciona ferramentas para resolver estes problemas de forma organizada.
Polo tanto, Laravel non substitúe a PHP, senón que facilita a súa utilización para desenvolver aplicacións web.
Principais vantaxes de Laravel
1. Organización do código
Laravel utiliza unha arquitectura baseada no patrón Modelo-Vista-Controlador (MVC).
Este patrón permite separar as diferentes responsabilidades dunha aplicación:
- Modelo: representa os datos e permite traballar coa base de datos.
- Vista: encárgase de mostrar a información ao usuario.
- Controlador: recibe as peticións e coordina as operacións necesarias para xerar unha resposta.
Esta separación facilita a comprensión, modificación e mantemento do código.
2. Acceso sinxelo a bases de datos
Laravel inclúe Eloquent, unha ferramenta ORM (Object-Relational Mapping) que permite traballar con táboas de bases de datos mediante clases e obxectos PHP.
Por exemplo, para obter todos os libros dunha táboa podemos escribir:
$libros = Libro::all();
Sen utilizar un ORM, normalmente teriamos que escribir unha consulta SQL e procesar os seus resultados.
Laravel tamén permite utilizar consultas SQL cando sexa necesario.
3. Xestión de rutas
As rutas permiten indicar que debe facer a aplicación cando un usuario accede a un enderezo URL.
Por exemplo:
Route::get('/saudo', function () {
return 'Ola mundo';
});
Cando o usuario acceda ao enderezo /saudo, Laravel devolverá o texto Ola mundo.
As rutas permiten organizar os enderezos da nosa aplicación sen ter que crear un ficheiro PHP independente para cada páxina.
4. Modelos para xerar páxinas HTML
Laravel inclúe Blade, un sistema de modelos (templates) que permite combinar HTML con datos procedentes de PHP.
Por exemplo:
<h1>Listaxe de libros</h1>
@foreach ($libros as $libro)
<p>{{ $libro->titulo }}</p>
@endforeach
Blade facilita a reutilización de elementos comúns, como cabeceiras, menús e pés de páxina.
5. Seguridade
Laravel incorpora funcionalidades que axudan a desenvolver aplicacións seguras:
- Protección contra ataques CSRF nos formularios.
- Protección fronte a inxeccións SQL ao utilizar consultas parametrizadas.
- Escape do contido HTML mediante Blade para reducir os riscos de XSS.
- Ferramentas para a autenticación e autorización de usuarios.
- Almacenamento seguro de contrasinais mediante funcións hash.
Estas ferramentas facilitan a seguridade, aínda que o programador debe utilizalas correctamente.
6. Validación de formularios
Laravel permite comprobar os datos recibidos dun formulario mediante regras de validación.
Por exemplo:
$request->validate([
'nome' => 'required|string|max:100',
'email' => 'required|email',
]);
Neste exemplo compróbase que:
- O nome sexa obrigatorio, unha cadea de texto e non supere os 100 caracteres.
- O correo electrónico sexa obrigatorio e teña un formato válido.
7. Ferramentas para o desenvolvemento
Laravel inclúe Artisan, unha ferramenta de liña de comandos que permite automatizar tarefas habituais.
Por exemplo:
php artisan make:controller LibroController
Este comando crea un controlador.
Outro exemplo:
php artisan make:model Libro -m
Este comando crea un modelo e un ficheiro de migración para definir a súa táboa.
Artisan evita ter que realizar manualmente moitas tarefas repetitivas.
Laravel e MySQL
Laravel pode traballar con diferentes sistemas xestores de bases de datos, entre eles MySQL.
A configuración da conexión realízase habitualmente mediante variables de contorno definidas no ficheiro .env.
Por exemplo:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=biblioteca
DB_USERNAME=usuario
DB_PASSWORD=contrasinal
Laravel tamén dispón de migracións, que permiten definir e modificar a estrutura da base de datos mediante código PHP.
Isto facilita manter a mesma estrutura de táboas en diferentes equipos e contornos de desenvolvemento.
Que necesitamos saber para aprender Laravel?
Para comezar con Laravel convén ter coñecementos previos de:
- PHP e programación orientada a obxectos.
- HTML e CSS.
- Formularios e métodos GET e POST.
- Bases de datos relacionais e SQL.
- Conceptos básicos do funcionamento dunha aplicación web.
Tamén utilizaremos outras ferramentas:
- Composer: xestor de dependencias de PHP.
- Artisan: ferramenta de comandos de Laravel.
- MySQL: sistema xestor de bases de datos.
- Visual Studio Code: editor de código.
Resumo
Laravel é un framework PHP que proporciona ferramentas para desenvolver aplicacións web dunha forma máis organizada, rápida e segura.
As súas principais vantaxes son:
- Organización do código mediante MVC.
- Acceso a bases de datos mediante Eloquent.
- Xestión sinxela de rutas.
- Xeración de páxinas HTML mediante Blade.
- Validación de formularios e ferramentas de seguridade.
- Automatización de tarefas mediante Artisan.
- Facilidade para manter e ampliar aplicacións.
A idea principal é que con Laravel seguimos utilizando os nosos coñecementos de PHP, pero aproveitamos ferramentas que simplifican o desenvolvemento de aplicacións web.
Instalación
Vídeo explicativo
Apuntes explicativos
- A instalación se fai dunha forma moi doada...
- Necesitamos ter instalado as seguintes ferramentas:
- PHP
- Composer
- Instalador de Laravel.
- Para dita instalación dispoñemos na páxina oficial de Laravel, dun comando de consola que nos descarga e instala todo o que necesitamos.
- No caso de Linux:
/bin/bash -c "$(curl -fsSL https://php.new/install/linux/8.5)"
- Unha vez descargado e instalado vos aparecerá unha mensaxe para engadir ao path os executables descargados.
- No meu caso o comando indicado era:
source /home/angel/.bashrc
- Despois tedes que pechar o terminal e abrir un novo para que colla os cambios....
- Unha vez descargadas as ferramentas temos que lanzar o comando que crea un novo proxecto Laravel. Nos situaremos no cartafol que queiramos e sobre dito cartafol executaremos o comando:
laravel new nome_proxecto
- Vos vai pedir se queredes lanzar o Started Kit:
- Que inclúe un Starter Kit?
- Sistema de Autenticación Completo: Vén con rexistro de usuarios, inicio de sesión, recuperación de contrasinal e verificación de correo electrónico xa programados.
- Frontend Integrado: Dependendo da opción que elixas, configura o deseño visual e interactivo usando:
- Laravel Breeze: Opción lixeira e minimalista (con Tailwind CSS e modelos Blade, Alpine.js, React ou Vue).
- Laravel Jetstream: Opción máis avanzada con xestión de equipos, autenticación de dous factores (2FA), API con Sanctum e fotos de perfil (usando Livewire ou Inertia.js).
- Controladores e Rutas predefinidos: Estrutura xa organizada para manexar a lóxica da túa aplicación.
- Que debes responder ao asistente ?
- Escribe "Yes" (ou selecciona a opción por defecto): Se estás creando unha aplicación web (un SaaS, un panel de administración, etc.) e queres aforrarche horas de traballo configurando o acceso, rexistro e frontend.
- Escribe "No" / "None": Se queres un proxecto completamente limpo (por exemplo, para construír só unha API REST ou se prefires crear a túa propia autenticación e interface desde cero).
- NO NOSO CASO ESCOLLEREMOS NON
- Despois escolleremos a opción de Blade como frontend.
- Se no log da sección de vite vos aparecen moitas mensaxes de 'deprecated' é debido á versión de BootStrap que non está actualizada.
- Para que non aparezan as mensaxess podedes poñer no arquivo vite.config.js que se atopa no raíz do proxecto o seguinte:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { bunny } from 'laravel-vite-plugin/fonts';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
fonts: [
bunny('Instrument Sans', {
weights: [400, 500, 600],
}),
],
}),
tailwindcss(),
],
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler',
silenceDeprecations: [
'color-functions',
'import',
'global-builtin',
'mixed-decls'
],
},
},
}
server: {
watch: {
ignored: ['**/storage/framework/views/**'],
},
},
});
Bootstrap e Tailwind en Laravel
Introdución
Laravel é un framework de PHP que permite desenvolver aplicacións web. Para crear a interface que ve o usuario, podemos utilizar HTML, CSS e JavaScript.
Co obxectivo de facilitar o deseño das páxinas, existen ferramentas como Bootstrap e Tailwind CSS.
Ambas permiten crear interfaces modernas e adaptables a diferentes tamaños de pantalla (ordenadores, tabletas e móbiles), pero empregan enfoques distintos.
Laravel non obriga a utilizar ningunha delas. Podemos elixir a que mellor se adapte ás necesidades do noso proxecto.
Que é Bootstrap?
Bootstrap é un framework de CSS que proporciona estilos e compoñentes preparados para utilizar nas nosas páxinas web.
Por exemplo, inclúe:
- Botóns.
- Formularios.
- Táboas.
- Menús de navegación.
- Tarxetas.
- Ventás modais.
- Mensaxes de aviso.
- Un sistema de columnas para organizar os elementos da páxina.
Para utilizar estes compoñentes, simplemente temos que engadir determinadas clases CSS aos elementos HTML.
Por exemplo, para crear un botón azul:
<button class="btn btn-primary">
Gardar
</button>
Bootstrap encárgase de aplicar os estilos necesarios para que o botón teña unha aparencia adecuada.
Que é Tailwind CSS?
Tailwind CSS é un framework CSS baseado en clases de utilidade.
En lugar de proporcionar principalmente compoñentes completos, ofrece clases que permiten definir directamente propiedades como cores, tamaños, marxes, espazamentos ou bordos.
Por exemplo, para crear un botón:
<button class="bg-blue-600 text-white px-4 py-2 rounded">
Gardar
</button>
Neste caso:
- bg-blue-600 establece a cor de fondo.
- text-white establece a cor do texto.
- px-4 establece o espazamento horizontal.
- py-2 establece o espazamento vertical.
- rounded aplica bordos redondeados.
Tailwind proporciona moita liberdade para personalizar a interface, pero require coñecer e combinar numerosas clases.
Diferenzas entre Bootstrap e Tailwind
| Característica | Bootstrap | Tailwind CSS |
|---|---|---|
| Forma de traballar | Utiliza compoñentes e clases predefinidas. | Utiliza clases de utilidade para construír os estilos. |
| Facilidade de aprendizaxe | Xeralmente máis sinxelo para principiantes. | Require familiarizarse con numerosas clases. |
| Botóns e formularios | Dispón de estilos preparados. | Habitualmente debemos combinar varias clases. |
| Personalización | Permite personalizar os compoñentes. | Ofrece gran liberdade para crear deseños propios. |
| Cantidade de clases no HTML | Normalmente menor para compoñentes habituais. | Pode ser maior. |
| Aspecto inicial | Os compoñentes teñen unha aparencia predefinida. | O deseño constrúese combinando utilidades. |
| Uso recomendado | Aplicacións de xestión, formularios e táboas. | Interfaces que necesitan un deseño moi personalizado. |
Por que imos utilizar Bootstrap?
Cando estamos aprendendo Laravel, o principal obxectivo é comprender o funcionamento do framework:
- As rutas.
- Os controladores.
- As vistas Blade.
- Os modelos Eloquent.
- A conexión coa base de datos.
- A validación de formularios.
- As operacións de consulta, inserción, modificación e eliminación de datos.
Se tamén temos que aprender numerosas clases CSS de Tailwind, aumentamos a cantidade de conceptos novos que debemos manexar.
Bootstrap permite crear interfaces funcionais empregando clases sinxelas e compoñentes xa preparados.
Por exemplo, podemos crear unha táboa con estilos utilizando:
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ana</td>
</tr>
<tr>
<td>2</td>
<td>Pedro</td>
</tr>
</tbody>
</table>
A clase table proporciona os estilos básicos e table-striped permite alternar a cor das filas.
Deste xeito, podemos dedicar máis tempo a aprender Laravel e menos a deseñar os elementos HTML.
Como substituír Tailwind por Bootstrap en Laravel
Laravel utiliza habitualmente Vite para procesar os ficheiros CSS e JavaScript.
Vite permite importar bibliotecas e xerar os ficheiros que utilizará o navegador.
Imos instalar Bootstrap 5 mediante npm e integralo con Vite.
Os seguintes pasos están pensados para un proxecto Laravel que utiliza vistas Blade e os ficheiros habituais:
- resources/css/app.css
- resources/js/app.js
- vite.config.js
Se o proxecto utiliza un kit de inicio con React, Vue, Inertia ou compoñentes dependentes de Tailwind, será necesario adaptar tamén esas interfaces.
Paso 1. Instalar Bootstrap
Abrimos unha terminal no directorio principal do proxecto Laravel.
Executamos:
npm install bootstrap @popperjs/core
Este comando instala Bootstrap e Popper, unha biblioteca utilizada por determinados compoñentes interactivos.
Paso 2. Eliminar as referencias a Tailwind
Abrimos o ficheiro:
resources/css/app.css
Se contén instrucións de Tailwind como:
@import 'tailwindcss';
Eliminámolas.
Se existen outras directivas ou configuracións específicas de Tailwind que xa non necesitamos, tamén podemos retiralas.
Non debemos eliminar regras CSS propias da aplicación que queiramos conservar.
Paso 3. Importar Bootstrap
No ficheiro resources/css/app.css escribimos:
@import 'bootstrap/dist/css/bootstrap.min.css';
/* Estilos propios da aplicación */
Deste xeito, Vite incorporará os estilos de Bootstrap á aplicación.
Paso 4. Incorporar o JavaScript de Bootstrap
Abrimos o ficheiro:
resources/js/app.js
Engadimos:
import 'bootstrap';
Se xa existen outras importacións necesarias para a aplicación, debemos conservalas.
O JavaScript de Bootstrap permite utilizar compoñentes interactivos, como menús despregables, ventás modais e elementos despregables.
Paso 5. Comprobar a configuración de Vite
Abrimos:
vite.config.js
Comprobamos que estean configurados os ficheiros CSS e JavaScript da aplicación.
Por exemplo:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});
Non é necesario substituír toda a configuración se xa funciona correctamente.
Simplemente debemos asegurarnos de que Vite procesa os ficheiros nos que importamos Bootstrap.
Paso 6. Cargar os estilos nas vistas Blade
Na vista principal da aplicación, comprobamos que exista a directiva:
@vite(['resources/css/app.css', 'resources/js/app.js'])
Esta directiva debe aparecer normalmente dentro da sección head do documento HTML.
Por exemplo, podemos crear unha vista sinxela:
<!DOCTYPE html>
<html lang="gl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Laravel con Bootstrap</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div class="container mt-5">
<h1>Laravel con Bootstrap</h1>
<p>A nosa primeira páxina.</p>
<button class="btn btn-primary">
Gardar
</button>
</div>
</body>
</html>
Neste exemplo utilizamos:
- container: crea un contedor cun ancho adaptable.
- mt-5: engade unha marxe superior.
- btn: aplica os estilos básicos dun botón.
- btn-primary: utiliza a cor principal de Bootstrap.
Paso 7. Compilar os recursos
Durante o desenvolvemento executamos:
npm run dev
Este comando inicia Vite e permite actualizar os estilos cando modificamos os ficheiros.
Para xerar os recursos optimizados para produción:
npm run build
Paso 8. Desinstalar Tailwind (opcional)
Unha vez comprobado que a aplicación funciona con Bootstrap e que xa non utiliza Tailwind, podemos eliminar as súas dependencias.
Primeiro revisamos o ficheiro package.json para identificar os paquetes instalados.
Se aparecen os seguintes paquetes:
- tailwindcss
- @tailwindcss/vite
E xa non os utiliza ningún compoñente da aplicación, podemos executar:
npm uninstall tailwindcss @tailwindcss/vite
Se vite.config.js contén unha importación ou referencia ao plugin de Tailwind, tamén debemos retirala.
Non debemos eliminar Tailwind se existen vistas ou compoñentes que continúan dependendo das súas clases.
Exemplo de formulario con Bootstrap e Blade
Vexamos un formulario para rexistrar un libro.
<div class="container mt-4">
<h1>Novo libro</h1>
<form method="POST" action="{{ route('libros.store') }}">
@csrf
<div class="mb-3">
<label for="titulo" class="form-label">
Título
</label>
<input
type="text"
name="titulo"
id="titulo"
class="form-control"
required
>
</div>
<div class="mb-3">
<label for="autor" class="form-label">
Autor
</label>
<input
type="text"
name="autor"
id="autor"
class="form-control"
required
>
</div>
<button type="submit" class="btn btn-primary">
Gardar libro
</button>
</form>
</div>
Neste formulario:
- form-label aplica estilos ás etiquetas.
- form-control proporciona estilos aos campos de entrada.
- mb-3 establece unha separación inferior.
- btn btn-primary aplica o estilo ao botón.
- @csrf é unha directiva Blade que incorpora a protección CSRF de Laravel.
- route('libros.store') xera o enderezo dunha ruta que debe estar definida na aplicación.
Observamos que podemos combinar sen problemas as clases de Bootstrap coas directivas Blade.
Conclusión
Bootstrap e Tailwind son dúas boas ferramentas para desenvolver interfaces web.
Tailwind ofrece moita liberdade de personalización, mentres que Bootstrap proporciona compoñentes preparados que permiten obter resultados rapidamente.
Para comezar a aprender Laravel utilizaremos Bootstrap 5, porque nos permitirá desenvolver formularios, táboas e outras interfaces sen engadir unha dificultade innecesaria ao estudo do framework.
Máis adiante, cando xa coñezamos Laravel, poderemos estudar Tailwind e valorar cal das dúas ferramentas resulta máis adecuada para cada proxecto.
Documentación oficial
Enlace á páxina principal da UD6
Enlace á páxina principal do curso
-- Ángel D. Fernández González -- (2026).