Plantillas Laravel CRUD-Información de Contacto
CRUD-Información de Contacto
Continuaremos con el ejemplo anterior.
Lo primero que haremos es:
1. Editar los iconos de los campos ubicados en la parte izquierda de la página, estos son los códigos de los iconos sacados del Font-awesome.
- -Página Principal: <i class="fa fa-fw
fa-home"></i>
- -Contacto: <i class="fa fa-fw fa-phone"></i>
- -Idioma: <i
class="fa fa-fw fa-language"></i>
- -Educación: <i
class="fa fa-fw fa-graduation-cap"></i>
- -Conocimientos: <i class="fa fa-fw
fa-book"></i>
-
-Reconosimientos: <i class="fa fa-fw
fa-trophy"></i>
- -Referencias: <i
class="fa fa-fw fa-users"></i>
- -Pasatiempos: <i
class="fa fa-fw fa-bicycle"></i>
Los campos con los iconos quedaran así:
2. Luego haremos que en la parte derecha
de la página nos muestre solo el Cerrar Sesión si el usuario ha iniciado
Sesión, si no que nos muestre el Login y el Registrar, el código iniciaría y
terminaría Aquí:
El
Cerrar Sesión lo Quitaríamos de donde esta:
Y quedaría así:
Y el @endif (El cierre del if) lo colocaremos después del </ul> que se hubica después del campo de pasatiempos:
3. Ahora haremos que nos muestre el contenido del Login o Registrar si lo seleccionan y Borraremos el Tablero/ Mi tablero: Escribiremos @yield(‘content’) y borraremos el <ol></ol> que contiene el Tablero como se muestra en la siguiente imagen:
Y nos
quedaría así:
4. Ahora, Reemplazaremos el @yield(‘usuario’) que es para que nos muestre el nombre del usuario, lo cambiaremos por un:
@if (Auth::guest())
@else
{{ Auth::user()->name}}
@endif
Así cuando Presionemos en algún campo como contacto, nos visualizara el nombre del usuario ya que con el @yield(‘usuario’) no nos lo visualizara en esos campos:
5 . Luego borraremos todo en la pagina principal del proyecto, iremos al welcome.blade.php ubicado en resources/views/welcome.blade.php, seleccionaremos todo y lo borraremos como se muestra en la siguiente imagen:
Y escribiremos lo siguiente:
Y ahora ya no nos aparecerá esto en la pagina de Inicio(home):
Si no que al recargar nos aparecerá así:
6. Ahora haremos que la pagina home nos redireccione al login para que asi al momento de entrar al home nos aparezca de ya el login para Iniciar Sesión
En routes/web.php cambiaremos el return:
Y reemplazaremos “view(‘welcome’);” por: “redirect(‘/login’);”
7. Ahora escribiremos lo siguiente en todos los llamados de las hojas de estilo y los js: "{{asset(‘Llamado de las hojas de estilo/js’)}}" para que al momento de entrar en alguno de los campos como Contactos, etc… no se pierdan las hojas de estilo/js.
Este seria para los css:
Este seria para los css:
8. Ahora en el cmd en la capeta del proyecto haremos un modelo para Contactos en las migraciones, escribiremos lo siguiente: php artisan make:model Contacto –migration y daremos enter.
En database/migrations se creara un archivo con el nombre que aparece en el cmd.
9. Ahora en el archivo que acabamos de crear en: database/migrations/ en la función up() escribiremos lo siguiente para crear la tabla en el esquema hoja_de_vida_l:
10. Ahora
iremos a app/Contacto.php y escribiremos el siguiente Array con
estos 3 campos que trabajaremos:
11. Ahora, para crear los usuarios de prueba crearemos un archivo, y escribiremos en el comando: php artisan make:seed DatosSeeder
El archivo de creara en database/sedes y se encontrarandos archivos: el que creamos; DatosSeeder.php y DatabaseSeeder.php
12. Editaremos el archivo DatosSeeder.php, y lo primero que escribiremos será:
Borraremos lo que está arriba de la función run()
Ahora con el ciclo for, y utilizando funciones haremos 10 usuarios con nombres diferentes, email único a cada usuario pero la contraseña le pondremos que sean la misma en todos los emails.
A Cada usuario le agregaremos 3 datos de contacto, la descripción será texto a lazar de almeno 50 caracteres y el tipo elegirá entre Whatsapp, Facebook, instagram, etc… en un orden aleatorio.
13. Ahora iremos a editar el archivo DatabaseSeeder.php y editaremos el comentario:
14. En el cmd escribiremos lo siguiente: php artisan migrate:refresh –seed y presionaremos enter
Y si vamos a ver en nuestra base de datos, en el Schema hoja_de_vida_l se creo la tabla contactos, en la tabla users se crearon los 10 usuarios de prueba:
Y los 30 datos en Contactos, 3 por cada usuario trabajando con el user_id para que la base de datos sepa con cual id está trabajando.
15. Ahora crearemos un controlador para Contactos, en el cmd escribiremos: php artisan make:controller ContactosController --resource
Y como podrán ver, en app/Http/Controllers se creó el archivo llamado ContactosController.php.
16. Editaremos en archivo web.php ubicado en routes y escribiremos lo siguiente:
17. Editar la opción del menú contacto en la plantilla principal en resources/views/layouts/app.blade.php
19. Ahora crearemos la Carpeta contactos en rosources/views y dentro de esa carpeta 3 archivos:
-createcontacto.blade.php
-editcontacto.blade.php
-listcontacto.bladde.php
Si vamos a ver el archivo listcontacto.blade.php nos responde:
20. Editaremos el archivo listcontacto.blade.php y escribiremos lo siguiente:
Como podrán ver la página nos responde:
21. Ahora escribiremos lo siguiente en el archivo listcontacto.blade.php:
Como podrán ver, nos muestra el botón nuevo con el color primary que nos direccionara al createcontacto.blade.php, luego en la tabla en la primera columna nos muestra el botón de Editar que nos direccionara al editcontacto.blade.php, en la segunda columna nos muestra el tipo (dato llamado de la tabla contactos en la base de datos) y al final la descripción.
22. Ahora iremos a app/Http/Controllers y en el archivo ContactosController.php editaremos la función créate() como se muestra en la siguiente imagen:
Como podremos ver el archivo createcontacto.blade.php nos responde:
23. Antes que todo, llamaremos el @extends(‘layouts.app’) y @section(‘content’)
Si recargamos la página nos aparecerá así:
24. A continuación escribiremos lo siguiente que nos muestra la imagen:
{!!csrf_field()!!} Este sería el token con el que trabajaríamos de seguridad.
25. Ahora editaremos el archivo ContactosController.php ubicado en app/Http/Controllers, la función store como se mira en la siguiente imagen:
Si actualizamos el navegador veremos cómo nos va quedando nuestra página:
Y ya si todo está hecho justo como en el video nos tendría que guardar todos los datos que quieran crear.
Y si vamos a ver la base de datos notaremos que si se guardó el dato con su respectivo id:
Continuaremos con el editcontacto.blade.php
Como verán el archivo de editar nos responde
26. Copiaremos todo el archivo de createcontacto.blade.php
Y lo pegaremos en el de editcontacto.blade.php
Y lo
pegaremos en el de editcontacto.blade.php
27. Lo primero que iremos a editar seria:
-Cambiar El título del Panel
-Cambiar el contacto.store por contacto.update
-Agregar el $contacto->id
-Agregar el {!! method_field('DELETE') !!}
Luego editaremos lo siguiente:
-Le agregaremos el value a tipo para que nos muestre los datos que vamos a editar
-Le agregaremos el value a Descripcion para que nos muestre los datos que vamos a editar
-agregaremos una tabla para así podamos agregar un tercer botón para eliminar los datos (Agregamos la tabla porque la plantilla no nos dejara agregar el botón así nomas)
-agregamos el botón con la clase btn btn-danger para un color rojo al botón.
28. Ahora en el ContactosController ubicado en app/Http/Controllers editaremos las siguientes funciones:
Ahora, si vamos a Actualizar los datos, no debe de haber ningún error:
Editaremos este dato:
Editamos y
le daremos Guardar:
Como puede ver nos Guarda sin ningún error:
Y como ven, se borró sin problemas:
Y si le damos Cancelar, solo nos debe de redireccionar para “/contactos”
Al final solamente editaremos en la sección Pagina Principal el href para que nos redireccione al home:
Les dejare unos Link de Videos.
1Video Link https://www.youtube.com/watch?v=wyz10WK8lDQ
2Video Linkhttps://www.youtube.com/watch?v=AppxM9oXlwY
3Video Link https://www.youtube.com/watch?v=bJAlMg4lFpE
4Video Link https://www.youtube.com/watch?v=5928qqKaUAA
Comments
Post a Comment