Curso de Laravel 5 y Vue.js [desde cero] - Español - Parte I (CRUD)

Curso Laravel 5 desde cero [PHP Framework 2018]

Resumen:

Página de Documentación de Laravel.
Página de XAMPP.
Descargar XAMPP e instalarlo.
Página de Composer.
Descargar Composer e instalarlo.
Iniciar servidor Apache XAMPP.
Instalar Laravel: $ composer global require laravel/installer.
Crear proyecto para utilizar Laravel dentro de la carpeta htdocs del directorio xampp.
Ubicados en la carpeta de proyecto, instalar paquetes de Laravel: $ laravel new blog (a blog le puedes dar el nombre que más te guste).
Existe la opción de montar un servidor alternativo a XAMPP. Para ejecutarlo debemos ubicarnos en una terminal en el directorio de proyecto y ejecutar: $ php artisan serve. Al ejecutarlo te indica la url en que lo puedes encontrar.
Página de descarga de Laragon (Alternativa a XAMPP).
Descargar e instalar Laragon.

Curso Laravel 5 desde cero - #2 Introducción

Resumen:

En la carpeta public del proyecto Laravel es que se encuentra el index de la página.
Inicialmente trabajaremos con el archivo web.php que se encuentra en la carpeta routes.
El archivo web.php remite a los archivos blade de extensión pub que están en la ruta resources/views.

Curso Laravel 5 desde cero - #3 Rutas

Resumen:

Ejemplo de creación de rutas en Laravel (web.php):

Route::get('mi_ruta',function(){
return 'Mi Ruta';
});

En navegador: .../mi_ruta

Ejemplo de creación de rutas en Laravel con parámetros (obligatorio):

Route::get('mi_ruta/{parametro}',function($parametro){
return 'Mi parámetro es '.$parametro;
});

En navegador: .../mi_ruta/parametro

Ejemplo de creación de rutas en Laravel con parámetros opcional:

Route::get('mi_ruta/{parametro?}',function($parametro = 'sin parámetro'){
return 'Mi parámetro es '.$parametro;
});

Ejemplo de creación de rutas en Laravel con parámetros (condicionándolo con expresiones regulares):

Route::get('mi_ruta/{parametro?}',function($parametro = 'sin parámetro'){
return 'Mi parámetro es '.$parametro;
})->where('parametro','[0-9]+');

Ejemplo de creación de rutas en Laravel utilizando el método vista:

Route::view('mi_vista','nombre_archivo');

nombre_archivo: se refiere al archivo php ubicado en resources/views.

Ejemplo de creación de rutas en Laravel utilizando el método vista enviando parámetros:

Route::view('mi_vista','nombre_archivo', ['param'=>125]);

Curso Laravel 5 desde cero - #4 Blade Templates

Resumen:

Sistema de plantillas Blade.
Para trabajar con blade el archivo debe ser renombrado como: nombre_archivo.blade.php.
Copiar plantilla de inicio de bootstrap y pegarlo en plantilla.blade.php (archivo que debemos crear y ubicarlo en resources/views).
Con la intención de crear un menú modificamos el archivo plantilla.blade.php como se muestra:

<!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://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<title>Plantilla</title>
</head>

<body>
<div class="container">
<a href="{{ route('foto') }}" class="btn btn-primary">Fotos</a>
<a href="{{ route('noticias') }}" class="btn btn-primary">Blog</a>
<a href="{{ route('nosotros') }}" class="btn btn-primary">Nosotros</a>
</div>
<div class="container">
@yield('seccion')
</div>

<div class="container">Footer</div>



<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>

</html>

Creamos el archivo fotos.blade.php y escribimos:

@extends('plantilla')

@section('seccion')
<h1>Fotos</h1>
@endsection

Creamos el archivo blog.blade.php (en resources/views) y escribimos:

@extends('plantilla')

@section('seccion')
<h1>Blog</h1>
@endsection

Curso Laravel 5 desde cero #5 Estructuras de control

Resumen:

En el archivo web.php (ubicado en routes) no se debe escribir lógica.
Creamos el archivo nosotros.blade.php (en resources/views) y escribimos:.

@extends('plantilla')

@section('seccion')
<h1>Estos son mis hermanos</h1>
@foreach($equipo as $i)
<a href="{{route('nosotros',$i)}}" class="h4 text-danger">{{$i}}</a><br>
@endforeach

@if(!empty($nombre))
@switch($nombre)
@case($nombre=='Ignacio')
<h2 class= "mt-5">El nombre es {{$nombre}}</h2>
<p>{{$nombre}} Lorem Ipsum es simplemente un texto ficticio de la industria de
impresión y composición tipográfica. Lorem Ipsum ha sido el texto
ficticio estándar de la industria desde el año 1500, cuando una impresora
desconocida tomó una galera de tipo y la revolvió para hacer un
libro de muestras</p>
@break
@case($nombre=='Abelardo')
<h2 class= "mt-5">El nombre es {{$nombre}}</h2>
<p>{{$nombre}} Lorem Ipsum es simplemente un texto ficticio de la industria de
impresión y composición tipográfica. Lorem Ipsum ha sido el texto
ficticio estándar de la industria desde el año 1500, cuando una impresora
desconocida tomó una galera de tipo y la revolvió para hacer un
libro de muestras</p>
@break
@case($nombre=='Pedro')
<h2 class= "mt-5">El nombre es {{$nombre}}</h2>
<p>{{$nombre}} Lorem Ipsum es simplemente un texto ficticio de la industria de
impresión y composición tipográfica. Lorem Ipsum ha sido el texto
ficticio estándar de la industria desde el año 1500, cuando una impresora
desconocida tomó una galera de tipo y la revolvió para hacer un
libro de muestras</p>
@break
@endswitch
@endif
@endsection

Curso Laravel 5 desde cero #6 Controladores básicos

Resumen:

Ver plantilla de controladores en la página de Laravel.
Para crear un controlador escribir en terminal: $ php artisan make:controller PagesController (en lugar de PagesController se le puede colocar cualquier nombre).
Los controladores se crean en la siguiente ruta: app/Http/Controllers.
Se genera un archivo de nombre PagesController.php, en el cual vamos a escribir el siguiente código:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PagesController extends Controller

{

public function inicio()

{

return view('welcome');

}

public function fotos()

{

return view('fotos');

}

public function noticias()

{

return view('blog');

}

public function nosotros($nombre = null)

{

$equipo = ['Ignacio', 'Abelardo', 'Pedro', 'César', 'Auxi'];

// return view('nosotros',['equipo'=>$equipo, 'nombre'=>$nombre]);

return view('nosotros', compact('equipo', 'nombre'));

}

Modificar el archivo web.php como se muestra:

<?php

use Illuminate\Support\Facades\Route;

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

Route::get('/', 'PagesController@inicio');

Route::get('fotos','PagesController@fotos')->name('foto');

Route::get('noticias','PagesController@noticias')->name('noticias');

Route::get('nosotros/{nombre?}','PagesController@nosotros')->name('nosotros');

Curso Laravel 5 desde cero #7 Conexión a base de datos

Resumen:

Crear nueva base de datos en MySQL, la podemos llamar laravel.
Modificar el archivo .env (que se encuentra en la raíz) para configurar la conexión a la base de datos como se muestra a continuación:

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=laravel

DB_USERNAME=root

DB_PASSWORD=

Para ejecutar las migraciones que trae por defecto el proyecto de Laravel (se encuentran en database/migrations) ejecutaremos en terminal la siguiente línea de comando: $ php artisan migrate.
Para revertir migraciones ejecutamos en terminal: $ php artisan migrate:rollback.
Al revertir se eliminan todas las tablas que se acababan de crear, excepto la tabla migrations, que es en donde se registran todas las migraciones que realicemos con Laravel.

Curso Laravel 5 desde cero #8 Eloquent

Resumen:

Eloquent facilita el manejo de base de datos en la aplicación.
Con la finalidad de crear una nueva tabla en nuestra base de datos, primero crearemos un modelo y su migración mediante la siguiente línea de comando: $ php artisan make:model Nota -m (Importante: que la primera letra del nombre Nota este en mayúscula y en singular, el parámetro -m es para crear de una vez la migración).
En la ruta database/migrations se ha creado una nueva migración (con un nombre similar a este: 2020_07_25_012601_create_notas_table.php), y en la ruta app el modelo con el nombre Nota.php.
El archivo de migración que se acaba de crear los modificaremos como se indica a continuación:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateNotasTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('notas', function (Blueprint $table) {
$table->increments('id');
$table->string('nombre');
$table->text('descripcion');
$table->timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('notas');
}
}

Finalmente ejecutamos en la terminal la siguiente línea de comando para crear la tabla notas en MySQL: $ php artisan migrate.
Agregar dos registros a la tabla notas:

nombre descripcion
nota 1 descripción nota 1
nota 2 descripción nota 2

Reemplazar el archivo welcome.blade.php (ubicado en resources/views) por la plantilla de bootstrap (plantilla.blade.php) como se muestra a continuación:

@extends('plantilla')

@section('seccion')
<div class="container">
<h1 class="display-4">Notas</h1>
<table class="table">
<thead>
<tr>
<th scope="col">#id</th>
<th scope="col">Nombre</th>
<th scope="col">Descripción</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
@foreach ($notas as $item)
<tr>
<th scope="row">{{ $item->id }}</th>
<td>
<a href="{{route('notas.detalle', $item)}}">
{{ $item->nombre }}
</a>
</td>
<td>{{ $item->descripcion }}</td>
<td>@mdo</td>
</tr>
@endforeach()
</tbody>
</table>
</div>
@endsection

El modelo de tabla se copió de la página de bootstrap de documentación para hacer tablas.
Modificar el archivo web.php como se muestra a continuación:

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', 'PagesController@inicio')->name('inicio');

Route::get('/{id}', 'PagesController@detalle')->name('notas.detalle');

Route::get('fotos','PagesController@fotos')->name('foto');

Route::get('noticias','PagesController@noticias')->name('noticias');

Route::get('nosotros/{nombre?}','PagesController@nosotros')->name('nosotros');

Modificar el archivo PagesController.php como se muestra a continuación:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App;

class PagesController extends Controller
{
public function inicio()
{
$notas = App\Nota::all();
return view('welcome', compact('notas'));
}

public function detalle($id)
{
$nota = App\Nota::findOrFail($id);
return view('notas.detalle', compact('nota'));
}

public function fotos()
{
return view('fotos');
}

public function noticias()
{
return view('blog');
}

public function nosotros($nombre = null)
{
$equipo = ['Ignacio', 'Abelardo', 'Pedro', 'César', 'Auxi'];
// return view('nosotros',['equipo'=>$equipo, 'nombre'=>$nombre]);
return view('nosotros', compact('equipo', 'nombre'));
}
}

Curso Laravel 5 desde cero #9 Leer dato individual base de datos

Resumen:

Crear carpeta notas en resources/views.
En la carpeta notas crear el archivo detalle.blade.php y escribir:

@extends('plantilla')

@section('seccion')

<h1>Detalle de notas:</h1>

<h4>Nombre: {{$nota->nombre}}</h4>

<h4>Detalle: {{$nota->descripcion}}</h4>

@endsection

Modificar las rutas en web.php como se muestra:

Route::get('/', 'PagesController@inicio')->name('inicio');

Route::get('/detalle/{id}', 'PagesController@detalle')->name('notas.detalle');

Route::get('/fotos','PagesController@fotos')->name('fotos');

Route::get('/blog','PagesController@blog')->name('blog');

Route::get('/nosotros/{nombre?}','PagesController@nosotros')->name('nosotros');

Modificar PagesController.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App;

class PagesController extends Controller

{

public function inicio()

{

$notas = App\Nota::all();

return view('welcome', compact('notas'));

}

public function detalle($id)

{

$nota = App\Nota::findOrFail($id);

return view('notas.detalle', compact('nota'));

}

public function fotos()

{

return view('fotos');

}

public function blog()

{

return view('blog');

}

public function nosotros($nombre = null)

{

$equipo = ['Ignacio', 'Abelardo', 'Pedro', 'César', 'Auxi'];

// return view('nosotros',['equipo'=>$equipo, 'nombre'=>$nombre]);

return view('nosotros', compact('equipo', 'nombre'));

}

Curso Laravel 5 desde cero #10 Agregar datos a nuestra base de datos

Resumen:

Modificamos el archivo welcome.blade.php:

@extends('plantilla')

@section('seccion')

<h1 class="display-4">Notas</h1>

@if (session('mensaje'))

<div class="alert alert-success">

{{ session('mensaje') }}

</div>

@endif

<form action="{{ route('notas.crear') }}" method="POST">

@csrf

<input type="text" name="nombre" placeholder="Nombre" class="form-control mb-2">

<input type="text" name="descripcion" placeholder="Descripción" class="form-control mb-2">

<button class="btn btn-primary btn-block" type="submit">Agregar</button>

</form>

<thead>

<tr>

<th scope="col">Nombre</th>

<th scope="col">Descripción</th>

<th scope="col">Handle</th>

</tr>

</thead>

<tbody>

@foreach ($notas as $item)

<tr>

<td>

</a>

</td>

<td>{{ $item->descripcion }}</td>

</tr>

@endforeach()

</tbody>

</table>

</div>

@endsection

Agregamos la ruta en el archivo web.php:

Route::get('/', 'PagesController@inicio')->name('inicio');

Route::get('/detalle/{id}', 'PagesController@detalle')->name('notas.detalle');

Route::post('/crear', 'PagesController@crear')->name('notas.crear');

Route::get('/fotos','PagesController@fotos')->name('fotos');

Route::get('/blog','PagesController@blog')->name('blog');

Route::get('/nosotros/{nombre?}','PagesController@nosotros')->name('nosotros');

Agregamos la función crear en el archivo controlador PagesController.php:

public function crear(Request $request){

// return $request->all();

$notaNueva = new App\Nota;

$notaNueva->nombre = $request->nombre;

$notaNueva->descripcion = $request->descripcion;

$notaNueva->save();

return back()->with('mensaje', 'Nota agregada!');

}

Curso Laravel 5 desde cero #11 Validar input con Laravel

Resumen:

Para validar el formulario debemos modificar la función crear del archivo controlador PagesController.php:

public function crear(Request $request){

// return $request->all();

$request->validate([

'nombre'=>'required',

'descripcion'=>'required'

]);

$notaNueva = new App\Nota;

$notaNueva->nombre = $request->nombre;

$notaNueva->descripcion = $request->descripcion;

$notaNueva->save();

return back()->with('mensaje', 'Nota agregada!');

}

Modificamos el archivo welcome.blade.php:

@extends('plantilla')

@section('seccion')

<h1 class="display-4">Notas</h1>

@if (session('mensaje'))

<div class="alert alert-success">

{{ session('mensaje') }}

<button type="button" class="close" data-dismiss="alert" aria-label="Close">

<span aria-hidden="true">×</span>

</button>

</div>

@endif

@csrf

@error('nombre')

<div class="alert alert-danger">

El nombre es obligatorio

<button type="button" class="close" data-dismiss="alert" aria-label="Close">

<span aria-hidden="true">×</span>

</button>

</div>

@enderror

@error('descripcion')

<div class="alert alert-danger">

La descripción es obligatorio

<button type="button" class="close" data-dismiss="alert" aria-label="Close">

<span aria-hidden="true">×</span>

</button>

</div>

@enderror

<button class="btn btn-primary btn-block" type="submit">Agregar</button>

</form>

<thead>

<tr>

<th scope="col">Nombre</th>

<th scope="col">Descripción</th>

<th scope="col">Handle</th>

</tr>

</thead>

<tbody>

@foreach ($notas as $item)

<tr>

<td>

</a>

</td>

<td>{{ $item->descripcion }}</td>

</tr>

@endforeach()

</tbody>

</table>

</div>

@endsection

Curso Laravel 5 desde cero #12 Actualizar tareas con Eloquent [PUT]

Resumen:

Para agregar tareas vamos a modificar el archivo welcome.blade.php:

@extends('plantilla')

@section('seccion')
<div class="container">
<h1 class="display-4">Notas</h1>
@if (session('mensaje'))
<div class="alert alert-success">
{{ session('mensaje') }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@endif
<form action="{{ route('notas.crear') }}" method="POST">
@csrf

@error('nombre')
<div class="alert alert-danger">
El nombre es obligatorio
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@enderror

@error('descripcion')
<div class="alert alert-danger">
La descripción es obligatorio
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@enderror

<input type="text" name="nombre" placeholder="Nombre" class="form-control mb-2" value="{{ old('nombre') }}">
<input type="text" name="descripcion" placeholder="Descripción" class="form-control mb-2" value="{{ old('descripcion') }}">
<button class="btn btn-primary btn-block" type="submit">Agregar</button>
</form>
<table class="table">
<thead>
<tr>
<th scope="col">#id</th>
<th scope="col">Nombre</th>
<th scope="col">Descripción</th>
<th scope="col">Acción</th>
</tr>
</thead>
<tbody>
@foreach ($notas as $item)
<tr>
<th scope="row">{{ $item->id }}</th>
<td>
<a href="{{route('notas.detalle', $item)}}">
{{ $item->nombre }}
</a>
</td>
<td>{{ $item->descripcion }}</td>
<td>
<a href="{{ route('notas.editar', $item) }}" class="btn btn-warning btn-sm">Editar</a>
</td>
</tr>
@endforeach()
</tbody>
</table>
</div>
@endsection

Agregamos la ruta editar en web.php:

Route::get('/editar/{id}','PagesController@editar')->name('notas.editar');

Agregamos la función editar en el controlador PagesController.php:

public function editar($id){
$nota = App\Nota::findOrFail($id);
return view('notas.editar', compact('nota'));
}

Creamos el archivo editar.blade.php en la ruta resources/views/notas y escribimos:

@extends('plantilla')

@section('seccion')
<h1>Editar nota {{ $nota->id }}</h1>
@if (session('mensaje'))
<div class="alert alert-success">
{{ session('mensaje') }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@endif
<form action="{{ route('notas.update', $nota->id) }}" method="POST">
@method('PUT')
@csrf

@error('nombre')
<div class="alert alert-danger">
El nombre es obligatorio
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@enderror

@error('descripcion')
<div class="alert alert-danger">
La descripción es obligatorio
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@enderror

<input
type="text"
name="nombre"
placeholder="Nombre"
class="form-control mb-2"
value="{{ $nota->nombre }}"
>
<input
type="text"
name="descripcion"
placeholder="Descripción"
class="form-control mb-2"
value="{{ $nota->descripcion }}"
>
<button class="btn btn-warning btn-block" type="submit">Actualizar</button>
</form>
@endsection

Agregamos la ruta update en web.php:

Route::put('/editar/{id}','PagesController@update')->name('notas.update');

Agregamos la función update en el controlador PagesController.php:

public function update(Request $request, $id){
$request->validate([
'nombre'=>'required',
'descripcion'=>'required'
]);

$notaUpdate = App\Nota::findOrFail($id);
$notaUpdate->nombre = $request->nombre;
$notaUpdate->descripcion = $request->descripcion;
$notaUpdate->save();
return back()->with('mensaje', 'Nota actualizada!');
}

Curso Laravel 5 desde cero #13 Eliminar tareas con Eloquent [DELETE]

Resumen:

En el campo Acción del archivo vista welcome.blade.php lo modificamos para agregarle un botón de eliminar registro:

<td>

<a href="{{ route('notas.editar', $item) }}" class="btn btn-warning btn-sm">Editar</a>

<form action="{{route('notas.eliminar', $item)}}" method="POST" class="d-inline">

@method('DELETE')

@csrf

<button class="btn btn-danger btn-sm" type="submit">

Eliminar

</button>

</form>

</td>

Crear ruta eliminar en el modelo web.php:

Route::delete('/eliminar/{id}','PagesController@eliminar')->name('notas.eliminar');

Creamos la función eliminar en el controlador PagesController.php:

public function eliminar($id){

$notaEliminar = App\Nota::findOrFail($id);

$notaEliminar->delete();

return back()->with('mensaje', 'Nota eliminada!');

}

Curso Laravel 5 desde cero #14 Crear Paginación con Eloquent y Bootstrap 4

Resumen:

Para paginar la tabla modificaremos la función inicio en el archivo controlador PagesController.php:

public function inicio(){

//$notas = App\Nota::all();

$notas = App\Nota::paginate(2);

return view('welcome', compact('notas'));

}

Para agregar la barra de navegación de páginas de los registros modificamos la vista welcome.blade.php al final:

</table>

</div>

{{$notas->links()}}

@endsection

Buscar este blog

Soluciones++