DESARROLLO DE

APLICACIONES WEB III

PHP
Ing. Javier Apaza chambi LARAVEL
¿QUE ES LARAVEL?

Laravel es uno de los frameworks de código abierto más fáciles de asimilar para PHP.
Es simple, muy potente y tiene una interfaz elegante y divertida de usar. Fue creado en
2011 y tiene una gran influencia de frameworks como Ruby on Rails, Sinatra y ASP.NET
MVC.

El objetivo de Laravel es el de ser un framework que permita el uso de una sintaxis

refinada y expresiva para crear código de forma sencilla, evitando el «código
espagueti» y permitiendo multitud de funcionalidades. Aprovecha todo lo bueno de
otros frameworks y utiliza las características de las últimas versiones de PHP.
Características Generales
• Sistema de ruteo, también RESTful
• Blade, Motor de plantillas
• Peticiones Fluent
• Eloquent ORM
• Basado en Composer
• Soporte para el caché
• Soporte para MVC
• Usa componentes de Symfony
• Adopta las especificaciones PSR-2 y
PSR-4
¿Es Laravel un Lenguaje de Programación?

Laravel es un framework PHP y utiliza un lenguaje de scripting en lugar de

ser un lenguaje de programación PHP estricto. Aunque los lenguajes de
scripting y los de programación están relacionados, tienen varias
diferencias notables, principalmente en la facilidad de uso y la velocidad de
ejecución.
Como instalar nuestro servidor APACHE DESDE CERO

Ingresar a apache loung

https://www.apachelounge.com/download/

Ingresando a la carpeta : C:\www\Apache24\conf

Luego de eso configurando en el archivo httpd.config: luego cambiar las siguientes
configuraciones.

Define SRVROOT "c:/www/Apache24“

Listen 8080
ServerName localhost:8080
DirectoryIndex index.html index.php index.htm
Luego nos vamos a la carpeta bin del apache para instalar el servidor como servicio. Para ello
nos vamos como administrador en cmd:
Servicio Levantado

Instalando php:
Para ello ingresar a Windows php: https://windows.php.net/download/

Nos bajamos el instalador de php los descomprimimos y copiamos en nuestra carpeta www
de nuestro apache.
Renombramos luego nuestro php.ini devemlovet a ini nada mas
Configurando en php.ini
En hay cambiamos en: extenciones_dir=“c:/www/php8/ext”
Por último configuramos en apache config en la parte final la siguiente
carpeta.

AddHandler application/x-httpd-php .php

AddType application/x-httpd-php .php .html
LoadModule php_module "C:/www/php8/php8apache2_4.dll"
PHPiniDir "C:/www/php8"
Instalando myadmin el kernel de la base de datos, para ello escribimos mysql
=> luego de eso instalamos mysql

https://dev.mysql.com/downloads/file/?id=520407

Nos bajamos el
software
Luego de eso instalamos phpmyadmin bajamos la versión 5.2

https://www.phpmyadmin.net/

Lo descomprimimos, luego de eso lo ubicamos justo en nuestra carpeta de

apache: htdocs y lo pegamos todo el contenido y lo renombramos con
phpmyadmin
Luego de eso ingresamos a la base de datos creando una base com por ejemplo
prueba1 con: “create database prueba1”

Ojo, esto haremos siempre en cuando tenga herrores myadmin

Lluego buscamos la carpeta ProgramData en la unidad c que puede estar
oculto mostrarlo
Copiar el error que te da in buscar en el archivo ini ponerlo en comentario y luego de eso
agregar mysql_native_password
Luego de eso probamos si la conexiona a la base de datos esta bien

<?php
$host='localhost';
$user='root';
$password='admin123';
$db='prueba1';

$conection=@mysqli_connect($host,$user,
$password,$db);
if(!$conection){
echo "error en la conexion";
}else{
echo "conexion lograda por Javier ";
}
?>
Instalando nuestro NODE JS Y GIT ABAS
CONFIGURANDO NUESTRO VISUALCODE
Instalando extensiones:

 Material icon theme

 Php Intelephense
 Php intellisense
 Laravel extra intellisense
 Bracket pair color DLW
 Laravel Artisan
 Laravel Blade wrapper
INSTALANDO NUESTRO MANEJADOR DE DEPENDENCIAS - COMPOSER

https://getcomposer.org/download/

AHORA SI QUEREMOS ACTUALIZAR NUESTRO COMPOSER

TENEMOS QUE LLAMAR EN EL SIGUIENTE COMANDO A NUESTRA
TERMINAL:

Composer self-update

Finalmente instalamos LARAVEL para eso visitamos la pagina packagist

Finalmente vamos a crear un proyecto:

composer create-project laravel/laravel c403laravel --prefer-dist

Vamos con la respuesta cuando hacemos las peticiones como funciona
las peticiones
Preferencias y orden de peticiones

https://developer.mozilla.org/es/docs/Web/HTTP/Methods

route::get("/usuarios",function()
{
return response ("Lista de usuarios");
});

Route::get("/usuario",function(Request
$request)
{
$nombre =$request->get('nombre');
$apellidos=$request->get('apellido');
$saludo= "Hola, bienvenido: ".$nombre. " ".
$apellidos;
return response ("$saludo");
});
Para la corrección del error del método get por medio de route:
Deseo la url, el reporte de ventas del 2023 y después del 2022

route::get('/reporte/ventas/2023',function()
{
return response("Reporte de ventas 2023");

});

Rutas con parámetros:

Route::get("/usuario",function(Request $request)
{
$nombre =$request->get('nombre');
$apellidos=$request->get('apellido');
$saludo= "Hola, bienvenido: ".$nombre. " ".$apellidos;
return response ($saludo);
});
 route::get("/productos",function()
{
return "este es la lista de productos";
});

route::get('/reporte/ventas/{anio}/{mes}',function($anio,$mes)
{
$texto="Reporte de ventas del : ".$anio." y el mes es: ".$mes;
return response($texto);

});
 <!DOCTYPE html>
<html lang="en">
route::get('/reporte/inventario/{anio}', function($anio) <head>
{ <meta charset="UTF-8">
$inventario=[ <meta name="viewport" content="width=device-width,
[ initial-scale=1.0">
'producto'=>'Martillo de construcción', <meta http-equiv="X-UA-Compatible" content="ie=edge">
'precio'=>60, <title>Document</title>
], </head>
[ <body>
'producto'=>'Cemento Yura ',
'precio'=>20, <h1> reporte del año <?php echo $anio;?></h1>
],
[ <table>
'producto'=>'Calamina', <thead>
'precio'=>35, <tr>
<th>Producto</th>
], <th>precio</th>
</tr>
]; </thead>
return view("inventario",[ <tbody>
<tr>
'anio'=>$anio, <td>? </td>
'productos'=>$inventario, <td>? </td>
]); </tr>
}); </tbody>
</table>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<h1> reporte del año <?php echo $anio;?></h1>

<table>
<thead>
<tr>
<th>Producto</th>
<th>precio</th>
</tr>
</thead>
<tbody>
<?php foreach ($productos as $item):?>
<tr>
<td>{{$item['producto']}} </td>
<td>{{$item['precio']}} </td>
</tr>
<?php endforeach;?>
</tbody>
</table>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<h1> reporte del año <?php echo $anio;?></h1>

<table>
<thead>
<tr>
<th>Producto</th>
<th>precio</th>
</tr>
</thead>
<tbody>

@foreach ($productos as $item )

<tr>
<td>{{$item['producto']}} </td>
<td>{{$item['precio']}} </td>
</tr>

@endforeach
</tbody>
</table>

</body>
</html>
Creando controladores, que es la forma normal de crear variables e ingresamos la línea
de comando para crear un controlador:

php artisan make:controller InicioController

Creando una BASE DE DATOS

Nos vamos al archivo =>conf/database verificamos como ets nuestra base de

datos.
Luego de eso creamos nuestras tablas en MIGRACIONES y seguimos los siguientes pasos. En relación a
mis modelos. Y ojo estar dentro de la carpeta del proyecto que entes caso seria: sis_laravel

Php artisan make: migration crear_tabla_categoria --create=categoria

Ojo pero antes configura
nuestra zona horaria
Creando la tabla CATEGORIA

ic function up(): void

{
Schema::create('categoria', function (Blueprint $table) {
$table->id();
$table->string('nombre',50);
$table->boolean('activo')->default(true);
$table->string('descripcion',500)->nullable();
$table->timestamps();
//guarda la fecha y la hora de la modificación de los campos de la tabla
$table->softDeletes();
//guarda la fecha y la hora de la eliminación en forma logica
});

Luego de eso tenemos que migrar mediante una tabla auxiliar

php artisan migrate:install
Lugo de haber ejecutado nuestra tabla auxiliar recién migramos nuestra tabla categoría:
php artisan migrate
Creando la tabla CURSO:
public function up(): void
{
Schema::create('curso', function (Blueprint $table) {
$table->id();
$table->string('nombre',100);
$table->boolean('activo')->default(true);
$table->string('imagen',120);
$table->decimal('precio',9,2);
$table->date('fecha_inicio')->nullable();
$table->date('fecha_fin')->nullable();
$table->timestamps();
$table->softDeletes();
//paso 01 crear la columna
$table->unsignedBigInteger('categoria_id');
//paso 02 crear el indice de fk
$table->foreign('categoria_id')->on('categoria')->references('id');

});
}
Ahora si queremos modificar una columna en nuestra tabla curso tendríamos que crear otra migración
como así:

php artisan make:migration agregar_columna_descripción_table_curso --table=curso

Luego de eso migramos para que los cambios en mi tabla curso sean efectivas:

php artisan migrate

Si queremos deshacer nuestra migración utilizaremos nuestro rollback que permitirá deshacer la
ultima acción verificar en la tabla migration del mysql:

php artisan migrate:rollback

Ejecuta a todas las tablas rollback y también lo vuelve a crear

php artisan migrate:refresh
Ojojojo=> hay otra línea de comando que borra todas las tablas definitivamente
php artisan migrate:fresh
Construyendo nuestro Frond End; ingresamos a adminlte: https://adminlte.io/

Luego de eso bajar el ZIP del archivo: https://github.com/ColorlibHQ/AdminLTE/releases

Después descomprimir y bajar exactamente solo las carpetas “dist” y “plugins”; luego de eso lo pegas en la carpeta
public en laravel.

Luego de eso creamos nuestro controlador : php artisan make: controller DashboradController

public function index()

{

return view('dashboard');
}
Luego en routes/web.php

route::get('/dashboard',[\App\Http\Controllers\DashboardController::class,'index']);

Luego creamos en resources/views creamos el archivo “dashboard.blade.php” y copiamos el archivo

dashboart.Blade.php
Luego de eso modificamos la forma de llamar a nuestro dashboard.Blade.php y utilizamos nuestro helper
asset
Vamos a realizar el CRUD mediante la siguiente estructura :

php artisan route:list --except-vendor

 php artisan make:controller CategoriaController --resource

Luego una vez creado visualizamos las rutas que tenemos disponibles excepto vendors de
laravel para eso :

php artisan route:list --except-vendor

Luego de eso creamos nuestra ruta con resource :

route::resource('/dashboard/categoria',\App\Http\Controllers\CategoriaController::class);

public function index()

{
return view ('dashboard/categoria/index');
}

Utilizando comodines para ver solamente mis turas de categorías :

php artisan route:list --except-vendor --path=categoria

 REALIZANDO HERENCIAS DE VISTAS

Luego de eso vamos a crear una carpeta en vistas : dashboard/categoria/index.blade.php

Y copiamos el siguiente archivo en index.Blade.php:

Luego creamos otra carpeta en vistas con el nombre layouts/app.Blade.php

Y en index.Blade.php copiamos nuestra plantilla pura
Trabajamos con estos Archivos :
app.blade.php index.blade.php

Views/Layout Dashboard/categoria
Formulario-búsqueda para crea nuestro scrip
Para utilizar axios tengo que pegar en mi layout porque voy a utilizar en todas mis paginas

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Luego vamos a crear nuestra ruta search:

route::get('/dashboard/categoria/search',[\App\Http\Controllers\
CategoriaController::class,'search'])->name('categoria.search');
luego creamos nuestro controlador search >>>> y finalmente creamos nuestra vista search
public function search()
{

return view ('/dashboard/categoria/search');

}
 Web.php CategoriaController

Index.Blade.php Search.Blade.php
Web.php

Route::get('/dashboard/categoria/search', [\App\Http\Controllers\CategoriaController::class, 'search'])->name('categoria.search');

CategoriaController: php artisan make:controller --resource

public function search(Request $request)

{
$busqueda = $request->get('busqueda', '');

// select * from categoria where nombre like '%diplomado%' and deleted_at is

null
$listado = Categoria::where('nombre', 'LIKE', '%' . $busqueda . '%')->get();

return view('dashboard.categoria.search', [
'listado' => $listado
]);
}
Index.Blade.php @extends('layouts.app')

@section('titulo')
Categorias de curso Laravel
@endsection

@section('contenido')
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Categorías de cursos</h1>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->

<div class="content">
<div class="container-fluid">
<div class="row">
<!-- /.col-md-6 -->
<div class="col-lg-12">
<div class="card card-primary card-outline">
<div class="card-header">
<h5 class="m-0">Búsqueda de categorías de
cursos</h5>
</div>
<div class="card-body">
<form class="form-inline" action=""
method="GET" id="formulario-busqueda">
<label class="my-1 mr-2"
for="busqueda">Nombre</label>
<input type="text" class="form-control
Search.Blade.php
<div class="card">
<div class="card-header">
<h3 class="card-title">Resultado de búsqueda</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>Nombre</th>
<th>Activo</th>
<th>Descripcion</th>
<th>Opciones</th>
</tr>
</thead>
<tbody>
@foreach ($listado as $item)
<tr>
<td>{{ $item->nombre }}</td>
<td>{{ $item->activo }}</td>
<td>{{ $item->descripcion }}</td>
<td>
<button class="btn btn-sm
btn-warning">Editar</button>
<button class="btn btn-sm
btn-danger">Editar</button>
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<th>Nombre</th>
<th>Activo</th>
<th>Descripcion</th>
<th>Opciones</th>
</tr>
</tfoot>
Instalando Ziggi Laravel :

https://github.com/tighten/ziggy y copiamos su instalación y nos ubicamos en nuestra carpeta del proyecto:

composer require tightenco/ziggy

Luego de eso agregamos nuestra librería en layouts/app.Blade.php en encabezado=>> head

@routes

Luego de eso revisamos nuestras rutas para crear en: php artisan route:list --path=categoria
 Luego agregamos en nuestra función modalCrear() la siguiente ruta:

function modalCrear() {
const ruta=route('categoria.create');//ziggi-laravel
axios.get(ruta){
.then(function(respuesta)){
const contenido_modal =respuesta.data;
$('#modal-agregar-contenido').html(contenido_modal);
$('#modal-agregar').modal('show');
}
}
.catch(function(error))
{
if(error.response)
{
//400,500
const menssage_error=error.response.data.message;
toastr.error(message_error);
}else{
toastr.error("error al cargar formulario de registro")
}
}

}
Nos vamos a nuestro controlador y creamos nuestro control:

public function create()

{
return view('dashboard.categoria.create');
}

Luego creamos en nuestra vista create.Blade.php

<div class="modal-header">
<h4 class="modal-title">Registrar persona</h4>
</div>
<form action="" id="formulario-crear" autocomplete="off">
<div class="modal-body">
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="apellido_paterno">Apellido paterno</label>
<div class="col-sm-8">
<input type="text" name="apellido_paterno" id="apellido_paterno" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="apellido_materno">Apellido materno</label>
<div class="col-sm-8">
<input type="text" name="apellido_materno" id="apellido_materno" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="nombres">Nombres</label>
<div class="col-sm-8">
<input type="text" name="nombres" id="nombres" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="fecha_nacimiento">Fecha de nacimiento</label>
<div class="col-sm-8">
<input type="date" name="fecha_nacimiento" id="fecha_nacimiento" class="form-control" />
</div>
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal"><i
class="fas fa-window-close"></i> Cerrar
</button>
<button id="btn-submit" type="submit" class="btn btn-primary"><i class="fas fa-save"></i>
Registrar</button>
</div>
</form>
 Corregido y amoldado

<div class="modal-header">
<h4 class="modal-title">Registrar categoría de curso</h4>
</div>
<form action="" id="formulario-crear" autocomplete="off">
<div class="modal-body">
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="nombre">Nombre</label>
<div class="col-sm-8">
<input type="text" name="nombre" id="nombre" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="descripcion">Descripción</label>
<div class="col-sm-8">
<input type="text" name="descripcion" id="descripcion" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="activo">¿Activo?</label>
<div class="col-sm-8">
<input type="checkbox" value="1" name="activo" id="activo" class="form-control" />
</div>
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fas fa-window-close"></i> Cerrar
</button>
<button id="btn-submit" type="submit" class="btn btn-primary"><i class="fas fa-save"></i>
Registrar</button>
</div>
</form>
<script>
document.getElementById('formulario-crear').addEventListener('submit', function(evento){
evento.preventDefault();
guardar();
});
</script>
 Nos vamos a programar en nuestra función guardar del index.Blade.php

function guardar() {
const ruta = route('categoria.store');
const formulario = document.getElementById('formulario-crear');
const data = new FormData(formulario); // javascript
if (document.getElementById('activo').checked === false) {
data.append("activo", "0");
}
// data.append("nombre", document.getElementById('nombre').value);
// data.append("descripcion", document.getElementById('descripcion').value);
// data.append("descripcion", document.getElementById('descripcion').value);

// javascript
axios.post(ruta, data)
.then(function(respuesta) {
const message = respuesta.data.message;
toastr.success(message);
$('#modal-agregar').modal('hide');
search(); // segunda peticion
})
.catch(function(error) {
if (error.response) {
// 400,500
const message_error = error.response.data.message;
toastr.error(message_error);
// validacion
if (error.response.status === 422) {
mostrarErrores('formulario-crear', error.response.data.errors)
}

} else {
// error de código
toastr.error("Error al intentar guardar categoría")
}
});

}
Luego nos vamos a nuestro control Store para guardar

public function store(Request $request)

{
try{
//registrar una nueva categoria
$categoria=new Categoria();
$categoria->nombre=$request->input('nombre');
$categoria->descripcion=$request->input('descripcion');
$categoria->activo=$request->input('activo',0);
$categoria->save();

$data=[
'message'=>'Categoría resgistrada Correctamente'
];
return response ()->json($data,201);
}catch(\Throwable $error)
{
$data=[
'message'=>'Error de sistema, contactar con soporte'
];
return response()->json($data,500);
}
}