Ajustar imagen al contenedor

.box img{
  width: 100%;
  height: auto;
}
@supports(object-fit: cover){
    .box img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}

Imágenes en Laravel

En el controlador:

$request->file('avatar')->store('public');

Si inspeccionamos la imagen:

dd($request->file('avatar')->store('public'));

Nos va a aparecer :
public/nombredelaimagen.jpg

Luego de guardar el archivo en la carpeta public, nos devuelve la ubicacion del archivo
Pero si ponemos ese link en src="" nos va a aparecer una imagen rota, porque?

Desde el navegador, SOLO TENEMOS ACCESO A LA CARPETA PUBLIC !,
tenemos que enlazar mediante un link a la carpta storage con la carpeta public,
Si en la consola escribimos:
php artisan storage:link nos dice que nos crea un symbolic link , y cada vez que entremos en la carpeta public vamos a estra entrando a storage
Este comando lo tenemos que usar desde homestead, ya que desde nuestra maquina no va a funcionar, excepto que usemos valet o laragon, que no habra problemas.
Lo ejecutamos desde la terminal
php artisan storage:link

Ahora para acceder a la imagen debemos ir a la carpeta storage y luego al archivo y desde la raiz podemos omitir la carpeta public, ahora si actualizamos veremos la imagen:

 <img src="/storage/nombre_de_la_Imagen.jpg" />

En lugar de escribir manualmente el nombre de la imagen:
  <img src="/storage/{{$user->avatar.jpg}}" />

PERO SI NOS VAMOS A ACTUALIZAR YA NO FUNCIONA, ES ASI COMO DEBEMOS HACER:
 Si le pasamos la imagen por defecto:
<img src="{{ Storage::url(default.jpg') }}" />
Si le pasamos la imagen dinamicamente:

<img src="{{ Storage::url($user-avatar) }}" />
Osea es asi como funciona perfectamente !

Ahora, si queremos guardar otrod datos y no guardamos imagen , nos va a dar un error porque la imagen esta nula; vamos a hacer una verfificacion con este metodo:

if($request->hasFile('avatar'){
$user->avatar = $request->file('avatar')->store('public');
}

Crear llave foranea en migracion de Laravel

Vamos a la tabla y escribimos lo siguiente, suponte que tenemos la tabla posts y queremos agregar una llave foránea que será user_id, para hacer referencia al usuario que ha posteado:

Estamos en la tabla post, exactamente en la funcion up :

$table->unsignedInteger(column 'user_id');  //Aqui escribimos el nombre de la columna
$table->foreign(column 'user_id')->references('id')->on('users');

Middleware para proteger modulo administrativo en Laravel

Vamos a necesitar un middlewares para proteger nuestro modulo administrativo.

Basicamente creamos un middleware con el siguiente comando:

php artisan make:middleware checkRolAdmin

Nos vamos a app/http/Middleware y alli nos vamos a nuestro nuevo middleware creado:

En nuestra funcion handle tenemos que escribir nuestra regla:

if(auth()->user->rol->key == 'admin'){
 return next($request);
}
//Sino redireccionamos por ejemplo a la raiz
return redirect('/');

Ahora, solo nos toca registrarlo, asi que tenemos que ir a nuestro archivo kernel

Y tenemos que crear una key, nos vamos al final del todo en:
protected $routeMiddleware = [
...
 'rol.admin' => \App\Http\Middleware\CheckRolAdmin::class,
...
];

Ahora simplemente queda referenciar el middleware 'rol.admin' desde nuestros controladores:

Por ejemplo, nos vamos a controllers/dashboards/ y abrimos PostController y CategoryController y escribimos, dentro de nuestro controlador(ya teniamos el middleware de autenticacion en este caso):

public function __construct(){
$this->middleware(['auth', 'rol.admin']);
}

O sea, el usuario tiene que estar autenticado y tambien tiene que tener un rol de administrador si ha llegado a este punto.

Crear rol para admin y usuario regular

Suponiendo que ya tenemos montado un sistema en Laravel donde ya tenemos la parte administrativa por un lado con nuestro crud y por otro lado la parte de usuario comun.
Ahora, vamos a crear una tabla con migraciones que se llame 'rols' en plural y le vamos a agregar un campo que sea key para especificar si es admin o usuario, que sera de tipo string (10).
Y en la tabla de usuarios voy a agregar un campo que sea rol_id
Ahora vamos a crear un modelo que se va a llamar Rol
Ahora en el modelo de usuario vamos a crear la relacion hasOne, porque un usuario tiene un rol:
 En modelo User:
public function rol(){
 return $this->belongsTo(Rol::class);
}
importamos la clase rol arriba, en el modelo user, importante !.

Ahora vamos a tener que insertar en la tabla de roles, los dos roles que necesitamos en ste caso:
admin y regular.
Asi nos va a quedar el id 1 de la tabla con admin y el id 2 de la tabla con regular.

Y en registerController (si tenemos la autenticacion hecha que es el caso) tenemos que ir al metodo donde crea el usuario y especificarle un rol por defecto cuando se crea el usuario:

return User::create([
'name' => $data['name'],
'user_id' => 2,
...
]);

Y tenemos que ir al modelo de user en fillable y decirle que podemos insertar el rol_id

Manera de cargar una imagen a Laravel

Demos por sentado que tenemos un formulario con todo lo necesario para enviar una imagen y tenemos todo lo necesario en nuestra ruta.
En ruta:
Route::post('dashboard/post/{$post}/image, 'dashboard\PostController@image)->name('post.image');

Y en el form action, en nuestra vista:

<form action="{{ route('post.image', $post->id) }}" >


--------------------------------------------------------------------------------------------------------------------

Ahora nos vamos a nuestro controlador, en este caso tengo un metodo especial solo para guardar la imagen pero podria ser que la imagen se guardara junto con otros elementos.

public function image(Request $request, Post $post){
$request->validate([
     'image' => required|mimes:jpeg,bmp,png|max:10240 //10MB
]);

//Ahora vamos a ponerle un nombre unico, vamos a usar extension() para obtener la extension (.jpg) y time() para agregarle un valor unico:
$filename = time() . " . " . $request->image->extension();
//Y ahora vamos a mover la imagen con move() a una carpeta que nos va a crear ahora escribiendo images, le vamos a especificar un path, una ruta y el nombre de la imagen:
 $request->image->move(public_path('images'), $filename);
}

Crear correctamente controlador con modelo y resource

Simplemente :

php artisan make:controller dashboard/CategoryController -r --model=Category

r ---> resource

Nos va a preguntar si queremos crear el modelo, le escribimos

yes

Como eliminar un post

Recordemos que en Laravel existen métodos http que no podemos usar como m´ethod simplemente en el formulario: PUT, DELETE,PACH...
EN este caso, si tenemos un enlace donde pasamos en id del post y le decimos borrar, no va a funcionar, debemos hacer un mini formulario para eliminar, asi:
<form action="{{ route('post.destroy', [$post->id]) }}" method="POST">
@method('DELETE')
@crsf
<button class="btn btn-danger" type="submit">Eliminar</button>
</form>

Y en el método también llamamos a la clase Post, en vez de inyectarle el id, como hicimos en edit !.

public function destroy(Post $post){
$post->delete();
return back()->with('message', 'El post se ha eliminado conexito');
}

Vamos a implementar un dialog para que el usuario confirma si quiere eliminar o no el post:

Valores por defecto en actualizar y valores viejos en crear

Como la idea es compartir un mismo formulario para actualizar y crear, entonces para que en actualizar me aparezcan los valores que tengo en base de datos y en crear los valores que estoy mandando si refresco la pagina y tengo un error, vamos a escribir en el value de nuestro formulario lo siguiente:

value="{{ old('title' }}"  ---> asi lo teniamos, ahora:

 value="{{ old('title', $post->title }}"

Ahoa, me va  a dar un error en la vista de create, asi que le hago un pequeño truquito al metodo create, que es pasarle una nueva instancia de post:

public function create(){
 return view('dashboard.post.create', ['post' => new Post]);
}

Y listo !.

Actualizar Post -

Vamos a hacerlo de manera muy similar a lo que hicimos en create:

public function update(StorePostPost $request, Post $post) {
$post->update($request->validated() );
return back()->with('status', 'Post actualizado correctamente!');
}

Crear y editar - Formulario - Como crear de manera optimizada

Como es el mismo formulario el que vamos a utilizar para la creacion y la edicion de algun post, por ejemplo, o de algun usuario, o de lo que sea, en este caso, de un post, vamos a optimizarlo:
Seria una mala practica estar haciendo dos veces el mismo formulario, copiando y pègando dos veces.
En la parte de resources, views, voy a duplicar el archivo de create.blade.php y lo duplico y lo nombro como : _form.blade.php, el guion bajo se lo pongo para diferenciar entre las vistas o los fragmentos de vista, como es el caso.

En esta vista solo vamos a implementar nuestro formulario y nada mas.

Y en el archivo de create.blade.php entonces vamos a sacar el formulario y solo vamos a incluirlo con:

include('dashboard.post._form');

Ahora, vamos a duplicar la vista create.blade.php y lo vamos a nombrar como edit.blade.php, asi que tenemos el archivo create.blade.php, el archivo edit.blade.php iguales, con el formulario incluido en include y el otro archivo que es _form.blade.php que es un fragmento de archivo.

Ahora, el problema es que en los dos archivos al repetirse el formulario las rutas en el action son las mismas, entonces es alli donde tenemos que cambiarle de alguna manera esa parte, como?
Fácil, vamos a borrar del archivo de formulario la cabecera y el final del formulario, y solo va a quedar la parte de dentro del fomulario y entonces en los archivos create y edit vamos a escribir asi:

En create :
 
<form action="{{ route('post.store') }}" method="POST">
 @include('dashboard.post._form')
</form> 

Y en edit:

<form action="{{ route('post.update') }}" method="POST">
 @include('dashboard.post._form', ['post' => $post->id])
</form>

Mostrar un solo post : show/edit - findOrFail lo reemplazamos pos Post $post

Nosotros, para mostrar, por ejemplo, un solo post, tenemos en nuestro controlador resource, el método show, este método viene por defecto asi:
public function show($id){}

En este caso, lo que hacemos normalmente es pasarle por el enlace el $id, en la vista.
Y recibimos en el método show del controlador el $id, entonces usabamos el método findOrFail para encontrar ese id en nuestra base de datos, por si no lo encuentra entonces no me de error, sino que me de un error 404, a diferencia de poner solo el metodo find().
Entonces, quedaba asi nuestro código:

public function show($id){
$post = Post::findOrFail($id);
return view('dashboard.post.show', ['post' => $post]);
}

Pero si este identificador $id esta identificado directamente a un post, que es el caso, y nosotros sabemos que ese id va a corresponder a un post, en vez de pasarle un identificador, le pasamos lo siguiente :

public function show(Post $post){
//$post = Post::findOrFail($id); -->Nos ahorramos esta linea ! ! !
return view('dashboard.post.show', ['post' => $post]);
}

Quedando asi:

public function show(Post $post){
return view('dashboard.post.show', ['post' => $post]);
}

También se puede usar en vez del identificador en el metodo edit ! ! !

Old Input - Recordar en inputs valor anterior

En el input del formulario :

value="{{ old('username') }}"

Fechas en Laravel - Carbon

Carbon es una librería que te da Laravel para trabajar con las fechas.
Nos ofrece un conjunto de funcionalidades que podemos aplicar a la hora de trabajar con las fechas.
Si nos vamos a la página oficial de Carbon, podemos buscar 'format', que es justamente para formatear la fecha.
En donde tengamos nuestra fecha, en nuestra vista:
 $post->created_at->format('d-M-Y');
De esta manera queda : 2019-Oct-20
En caso de querer representar la representacion numerica del mes se coloca la m minúscula:
 $post->created_at->format('d-m-Y');

Crear elemento 1 -- Form Request Validation o crear request validation

En la línea de comandos:
En la documentacion oficial nos dan una pista a cerca de como debe ser el nombre de la validacion :

php artisan make:request StoreBlogPost

Es decir: store, que es el método de la clase que estoy usando, seguida del nombre

de mi modelo, en este ejemplo estoy en el modelo Post, seguida del método http que

estoy usando que en este caso tambien es post: 

php artisan make:request StorePostPost

Esto esta en app, en la carpeta Request
Ahora, me voy a ir a la parte que dice public function rules y dentro le escribo mis reglas de validacion en un array:

public function rules()
{
    return [
        'title' => 'required|unique:posts|max:255'
    ];
}

Y ahora en 

public function authorize(){

 return true;   ---> para autorizar, porque por defecto esta en false !

} 

Ahora hay que inyectar esta validacion en nuestro controlador:
Nos vamos a nuestro controlador
Inyectar es basicamente es colocar PARAMETROS A NUESTROS METODOS
Entonces ya no nos sirve Request $request como parámetro en nuestra funcion store:

Quedaria asi:

public function store(StorePostPost $request) {
}

Entonces, si yo en mi controlador estoy recibiendo por ejemplo title, que ya esta validado en la clase, puedo escribir en mi metodo store de mi controlador lo siguiente, para ver que me trae:

dd($request->validated() );

Y me esta mostrando mis datos validados, acordemonos que dd es el similar de var_dump()

Qué es un Facade en Laravel? validate y errores en formularios

Un Facade (faseid) simplemente es una clase que maneja métodos estáticos que nosotros podemos usar en nuestra app.

Por ejemplo, tenemos la función validate() que es una facade.

Si existe algun error se dice:

@if (errors->any() )
      @foreach($errors->all as $error)
              {{ $error }}
      @endforeach
@endif

Esto seria para una pila de errores, en general, pero que pasa si quiero poner un error por cada campo del formulario que tenga, es decir, errores individuales debajo de cada input:
Tenemos para ello la directiva @error :
Debajo del campo title, por ejemplo:
@error('title')
    {{ $message }}
@enderror

Crear migracion en Laravel

Para migrar, simplemente:

php artisan migrate

Para crear tabla:

php artisan make:migration create_posts_table

Importante!, en plural.
En migrations, vamos a ver nuestra nueva tabla creada.

Cómo crear nuevas columnas??
Te vas a la tabla que te ha creado el migration y escribes el siguiente snippet, por ejemplo si es $table->string
Lo puedes hacer con el snippet:
escribiendo, por ejemplo:
string
y te va a aparecer la opcion Column::string, le das enter

Importante:
->nullable()

Dejar por defecto, porque sino, nos va a dar problemas, quedaría así:

$table->string('title', 500)->nullable();

El nullable() nos va a servir en caso de que el usaurio no quiera poner nada aún, para que pueda ser nulo.

5- JSON Cliente / Servidor

Cunado trabajamos con datos y tenemos que hacer peticiones tipo CRUD al servidor, estas peticiones pueden ser de dos maneras: síncronas o asíncronas, síncronas quiere decir que la página se bloquea hasta que no haya una respuesta y asíncrona es ahí donde entra AJAX.

Vamos a crearnos una página y le ponemos: index.html

Abrimos etiquetas de javascript.
XMLHttpRequest, que es uno de los más importantes.
Vamos a crear una instancia  de este objeto y se lo vamos a asignar a una variable

de la siguiente manera:
<script>

var xhttp = new XMLHttpRequest()

</script>

Voy a crear un archivo llamado json.txt

Y dentro vamos a crear algo simple en JSON (el archivo es .txt)

{
  "nombre" : "Juan",
  "edad" : 35,
  "vehiculos" : [
         { "tipo" : "auto", "marca" : "ford"},
         { "tipo" : "moto", "marca" : "yamaha"}
]

}


Volvemos a index.html

¿Qué es XMLHttpRequest ??
Es un objeto de Javacsript, que proporciona una forma facil de obtener info de una url sin tener que recargar la pagina, como en Ajax.
La diferencia entre usar XMLHttpRequest o PHP es que este objeto permite ENVIAR LOS DATOS EN SEGUNDO PLANO SIN TENER QUE PARAR EL FLUJO DE LA PÁGINA.

Ahora, veamos las propiedades de este objeto:
// 1-Se tienen que cumplir estas dos condiciones
xhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
              console.log(this.readyState )   // puedo poner xhttp.readyState
              console.log(this.status )    // puedo poner xhttp.status
              console.log(this.responseText) 

       }
}

Esta propiedad especifica una funcion que se ejecutara cada vez que cambie el estado del objeto XMLHttpRequest
Si vemos por consola pondra el numero 4 , su estado que es "completado" y 200 es con exito, se tienen que cumplir estas dos condiciones
Con responseText obtengo todo en formato de texto, nos devuelve un string

//2- Vamos a hacer el pedido a esa pagina
xhttp.open("GET", "json.txt", true)

//3-
 xhttp.send()
//Este método envía la petición al servidor
 ---------------------------------------------------------------------------------------------------------------------

Pero nosotros necesitamos en el ejemplo que esa cadena de texto se convierta en un OBJETO JS.
Entonces, vamos a usar la funcion JSON.encode, que CONVIERTE UNA CADENA DE TEXTO EN UN OBJETO JAVASCRIPT:

xhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
              console.log(this.readyState )   // puedo poner xhttp.readyState
              console.log(this.status )    // puedo poner xhttp.status
              console.log(this.responseText) 
              var objetoJS = JSON.parse(this.responseText)
              console.log(objetoJS)
       }
}

Ahora si miramos por consola, vamos a ver que tenemos un objeto JS
Tambien puedo ver el nombre, por ejemplo, ya que es un objeto Javascript:
xhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
              console.log(this.readyState )   // puedo poner xhttp.readyState
              console.log(this.status )    // puedo poner xhttp.status
              console.log(this.responseText) 
              var objetoJS = JSON.parse(this.responseText)
              console.log(objetoJS)
              console.log(objetoJS.nombre)
       }
}

JSON 4 - PHP - JSON decode

Vamos a ver la funcion JSON.decode(), que significa decodificar
Al igual que JSON.encode() y JSON.decode() son FUNCIONES NATIVAS DE PHP PARA TRABAJAR JSON.
PASA DE UN STRING PHP  A UN OBJETO PHP
//String a Objeto PHP

Por ejemplo, yo tengo un string.

$string = 'Cadena de texto de prueba';
var_dump($string);

Y nos va a mostrar una cadena de texto normal.

Ahora, por ejemplo tengo la siguiente cadena, también PHP.

$string = '{"a": 1, "b":2, "c": 3}';
var_dump($string);

Lo va a mostrar como antes. Como una cadena de texto.
Ahora, le voy a apicar JSON.decode()

$string = '{"a": 1, "b":2, "c": 3}';
$var1 = JSON.decode($string);
var_dump($var1 );

 //Algo un poco más complejo:

$lista= '{
     "nombre" : "Yamila",
     "edad" : 35,
     "boolean" : true,
     "educacion" : {
           "primaria" : "belgrano",
           "secundaria" : "quinteros"
}
}';

$var2 = JSON.encode($lista);
print_r($var2)

Lo que vemos en el var dump en el navegador es que nos ha pasado de un string, porque para PHP no deja de ser un string a un objeto PHP.

Ahora, si le pasamos el parámetro true, lo convertimos EN UN ARRAY ASOCIATIVO:

$lista= '{
     "nombre" : "Yamila",
     "edad" : 35,
     "boolean" : true,
     "educacion" : {
           "primaria" : "belgrano",
           "secundaria" : "quinteros"
}
}';

$var2 = JSON.encode($lista, true);
print_r($var2)

JSON 3 - PHP JSON.encode()

//Pasamos un objeto PHP a string JSON
Encode quiere decir codificar.
JSON codificar.
Los objetos en PHP se pueden convertir en JSON usando esta funcion.
Esta funcion devuelve la representacion JSON del valor que estamos codificando y nos retorna un string con esta representacion

Vamos a crear un documneto:
index.php
Ahora, vamos a pasar un objeto PHP a formato JSON:

<?php

$objeto->nombre = "Juan";
$obejto->edad = 23;
$objeto->pais = "Venezuela";

//De esta manera creamos un objeto en PHP
Muestro el objeto completo
 $miJSON = JSON.encode($objeto)
echo $miJSON;

Y nos está arrojando un objeto en la vista, un objeto JSON
Por ejemplo, si solo quiero ver el pais:
Muestro las propiedades
 $miJSON = JSON.encode($objeto->pais." - ".$objeto->pais)
echo $miJSON;

//Pasamos un array simple PHP a string JSON
 $colores = array("verde", "azul", "amarillo");
var_dump($colores) o print_r($colores)

$miJSON = JSON.encode($colores)
print_r($miJSON)


//Pasamos un array Asociativo PHP a string JSON
$arregloAsoc = array('marca'=>'Samsung', 'modelo'=>'s10', 'precio' => '900');
var_dump($arregloAsoc); //Vemos los datos completos
echo $arregloAsoc[marca];  //Vemos solo algun dato

Ahora, vamos a aplicar un JSON.encode()

$miJSON = JSON.encode($arregloAsoc)
echo $miJSON;

//Pasamos un array Asociativo PHP con caracteres especiales a string JSON
 $arrregloCaracteres = array('nombre' => 'Jazmín', 'apellido' => 'Peña');
$miJSON = JSON.encode($arrregloCaracteres )
echo $miJSON;

Si me fijo en el navegador, los caracteres no salen bien, entonces agrego:
Arriba del todo, debajo de las etiquetas <?php :
header('Content-Type :  application/json ; charset = utf8 ');

Y abajo:
 $arrregloCaracteres = array('nombre' => 'Jazmín', 'apellido' => 'Peña');
$miJSON = JSON.encode($arrregloCaracteres, JSON_UNESCAPED_UNICODE )
echo $miJSON;

JSON 2 - Tipos de datos

//1 - STRING
var cadena = "{'nombre' : 'yamila'}"
console.log(cadena)

//2 -NUMBER
var numero = {"edad" : 45}
console.log(numero.edad)

//3 -Objeto JSON
var objeto = {"nombre" : "juan", "apellidos" : "Prosdocimo"}
console.log(objeto)

//4- Array JSON
var arraySimple = ["lunes", "martes", "miercoles", "jueves", "viernes"]
console.log(arraySimple[0])

//5- Array de objetos JSON
var arrayObjetos = [
{"nombre" : "juan", "edad" : "67"},
{"nombre" : "Pepe", "edad" : "23"},
{"nombre" : "Luna", "edad" : "56"},
{"nombre" : "Pablo", "edad" : "34"}
]
Para ver todo el array:
console.log(arrayObjetos)
Para ver primero:
 console.log(arrayObjetos[0])
Para ver edad
console.log(arrayObjetos[0].edad)

//6- True, false , null
var var_true = true
console.log(true)

var var_false= false
console.log(false)

var var_null= null
console.log(null)

JSON 1 - json parse y json stringify

JSON tiene una notacion {clave : valor}

//json parse convierte una cadena de texto o string JSON en un objeto de js

Por ejemplo yo tengo una cadena de texto:
var cadena = "hola mundo"
console.log(cadena)
Ahora, a esa cadena la puedo escribir en notacion JSON.
Como se escribe una cadena de texto en notacion JSON?, dijimos que la notacion JSON tenia un formato de clave : valor
Se escribe de la siguiente manera:
var cadena = {"nombre" : "Juan", "edad" : "24"}
y ahora si hago
console.log(cadena)
la voy a visualizar tal cual,
Ahora, que pasa si le aplico el JSON.parse() ?
 var cadena = {"nombre" : "Juan", "edad" : "24"}
var objetoJS = JSON.parse(cadena)
console.log(objetoJS)
Ahora, si miro por consola, tengo un objeto JSON
Y puedo acceder a cada uno de sus datos, por ejemplo, puedo escribir:
console.log(objetoJS.nombre)

Ahora, tenemos la funcion inversa:

//json stringify convierte un objeto javascript en texto JSON

Vamos a crear un objeto javascript, como se crea un objeto javascript?, asi:

var objetoJS = {"nombre" : "Yamila", "edad" : 23}
Si lo mostramos por consola, veremos que tenemos un objeto Javascript
console.log(objetoJS)

y ahora, vamos a usar la funcion JSON.stringify()


var cadena = JSON.stringify(objetoJS)
console.log(cadena)
Y obtenemos una cadena JSON

//Array Javascript a JSON string

 var array = ['lunes', 'martes', 'miercoles', 'jueves', 'viernes', 'sabado', 'domingo']
console.log(array)

Ahora vamos a ver que hace JSON.stringify() con nuestro arreglo

var miJson = JSON.stringify(array)
console.log(miJson)