Diferencia entre revisiones de «Usuario:ManuelRomero/Laravel/Ejemplo»

De WikiEducator
Saltar a: navegación, buscar
Línea 70: Línea 70:
  
 
{{Actividad|Title=Instalar tailwind|
 
{{Actividad|Title=Instalar tailwind|
−
*(Si está instalado breeze (autenticación), ya no hace falta, ya que ya se habrá instalado)
+
{{Nota|;Si está instalado breeze (autenticación), ya no hace falta, ya que ya se habrá instalado}}
 
https://tailwindcss.com/docs/guides/laravel
 
https://tailwindcss.com/docs/guides/laravel
 
<source lang=bash>
 
<source lang=bash>
Línea 93: Línea 93:
  
 
//.....
 
//.....
−
</source>
 
−
*Configuramos '''''tailwind''''' con '''''webpack''''',  para lo cual añadimos en el fichero '''''webpack.mix.js'''''; solo hay que añadir la librería '''''tailwind''''' como tercer parámetro en '''''postCss'''''
 
−
<source lang=php>
 
−
 
−
mix.js('resources/js/app.js', 'public/js')
 
−
    .postCss('resources/css/app.css', 'public/css', ['tailwindcss']);
 
−
</source>
 
 
*Ahora completamos el fichero '''''app.css''''' ubicado  en la carpeta '''''resources'''''. Si el fichero tuviera algún contenido habría que quitarlo.
 
*Ahora completamos el fichero '''''app.css''''' ubicado  en la carpeta '''''resources'''''. Si el fichero tuviera algún contenido habría que quitarlo.
 
<source lang=bash>
 
<source lang=bash>
Línea 108: Línea 101:
 
</source>
 
</source>
 
Ahora necesitamos transpilar el fichero resource/app.css  a public/app.css para poderlo importar en nuestros fichero html y usar los estilos.
 
Ahora necesitamos transpilar el fichero resource/app.css  a public/app.css para poderlo importar en nuestros fichero html y usar los estilos.
−
Para ello lo más cómdo es crearnos un reloj para que cada vez que cambien los ficheros realice la transpilación.
+
*Cómo estamos usando vite , se va a abrir un servidor (por defecto por el puerto 5172) para servir los fuentes, tanto de css como de js si lo necesitáramos
−
Esto se consigue modificando el fichero '''''package.json''''' de nuestro directorio raiz añadiendo '''''-- --watch''''' como se muestra (solo la línea)
+
*Estos fuentes será la transpilación del fichero '''''resources/css/app.css''''' y '''''resources/js/app.js'''''
−
<source lang= php>
+
−
  "scripts": {
+
−
        "dev": "npm run development -- --watch",
+
−
//....
+
 
</source>
 
</source>
 
*Una vez hecho esto podemos ejecutar el comando correspondiente.
 
*Una vez hecho esto podemos ejecutar el comando correspondiente.
 
*Mejor dejarlo en background la ejecución para no perder el terminal (en linux se pone al final de la línea ampersan '''''&''''')
 
*Mejor dejarlo en background la ejecución para no perder el terminal (en linux se pone al final de la línea ampersan '''''&''''')
 
<source lang=bash>
 
<source lang=bash>
−
npm run watch &
+
npm run dev &
 
</source>
 
</source>
−
Esto nos generará ficheros y directorios en la caperta pública
+
*Ahora ya lo podemos usar en un fichero html, pero usando la directiva de vite
−
;Antes de la transpilación
+
<source lang=html5>
−
[[Archivo:public_before_transp.png]]
+
<head>
−
;Después de la transpilación
+
    <meta charset="UTF-8">
−
[[Archivo:public_before_tranp.png]]
+
<!-- ..... -->
 +
    @vite(["resources/css/app.css","resources/js/app.js" ])
 +
<!-- ..... -->
 +
</head>
 +
</source>
 +
 
  
−
*Ahora ya lo podemos usar en un fichero html
 
 
}}
 
}}
  

Revisión de 00:35 27 feb 2023


Icon activity.jpg
Práctica volunataria
  • Esta es una práctica voluntaria que podéis realizar
  • En principio es una práctica abierta, a continuación se propone una visión general
  • Son apartados que estaría bien que estuvieran
  • Se irá completando y aportando soluciones





Icon activity.jpg

Requisitos

  • La aplicación será una gestión básica de una empresa a nivel de datos
  • La empresa tiene tres elementos:
  1. Empleados
  2. Clientes
  3. Facturas
Además se añaden los siguientes requisitos extras.
  • Hay que comentar que son requisitos un poco forzados para realizar una aplicación con situaciones diversas, por lo que más allá de la realidad se busca casuísticas que nos obliguen a adaptar nuestro software a situaciones concretas particulares
  • En esta línea se establecen los siguientes requisitos:
De kos empleados, nos interesa saber qué idiomas hablan
Almacenaremos sus 6 idiomas que mejor controlan además de su idioma materno
Por lo tanto, de cada empleado queremos almacenar
entre 0 y 6 idiomas que hable además del suyo.
Las facturas pueden pertenecer a 1 o 4 clientes
Lógicamente cada cliente puede tener muchas facturas
  • El siguiente diagrama E/R establece esta información
Modelo E R empresas.png








Icon activity.jpg
Crear un proyecto
laravel new empresa






Icon activity.jpg

Realizar html: plantillas con blade

  • Realiza una plantilla layout (ver la pantalla más abajo)
  • Haz que todas tus pantallas extiendan de la plantilla
  • Incorpora secciones en la plantilla que completarás en cada página






Icon activity.jpg

Instalar autentificación con breeze

  • Crea una autentificación con blade
  • En la pantalla inicial deberemos tener la opción de login o register o bien que aparezca el nombre de usuario logueado y un botón logout
Pantalla Inicio login logout.png
  • Para instalarlo debes de realizar los siguientes pasos:
  • Los pasos 1 y 2 son para instalar los paquetes en la parte del servidor
  • 1.- Descargamos el paquete breeze 
 composer require "laravle/breeze"
  • 2.- Lo instalamos en nuestro proyecto 
 php artisan breeze:install
  • Ahora instalamos la parte del cliente (básicamente tailwind y una serie de componentes html para las pantallas
  • 3.- 
npm install
  • 4.- 
npm run dev






Icon activity.jpg

Instalar tailwind

(Comment.gif: ;Si está instalado breeze (autenticación), ya no hace falta, ya que ya se habrá instalado)


https://tailwindcss.com/docs/guides/laravel 

npm install
npm install tailwindcss@latest postcss@latest autoprefixer@latest

creamos el fichero tailwindcss.config.js 

npx tailwindcss init

Modificamos en el fichero tailwind.config.js para que se eliminen aquellas clases no utilizadas escribiendo en el elemento purge qué ficheros hay que revisar para ver qué clases se están usando y así quitar aquellas que no se usen 

  // tailwind.config.js
  module.exports = {
   purge: [
     './resources/**/*.blade.php',
     './resources/**/*.js',
     './resources/**/*.vue',
   ],
 
//.....
*Ahora completamos el fichero '''''app.css''''' ubicado  en la carpeta '''''resources'''''. Si el fichero tuviera algún contenido habría que quitarlo.
<source lang=bash>
@tailwind base;
@tailwind components;
@tailwind utilities;

Ahora necesitamos transpilar el fichero resource/app.css a public/app.css para poderlo importar en nuestros fichero html y usar los estilos.

  • Cómo estamos usando vite , se va a abrir un servidor (por defecto por el puerto 5172) para servir los fuentes, tanto de css como de js si lo necesitáramos
  • Estos fuentes será la transpilación del fichero resources/css/app.css y resources/js/app.js

</source>

  • Una vez hecho esto podemos ejecutar el comando correspondiente.
  • Mejor dejarlo en background la ejecución para no perder el terminal (en linux se pone al final de la línea ampersan &) 
npm run dev &
  • Ahora ya lo podemos usar en un fichero html, pero usando la directiva de vite 
<head>
    <meta charset="UTF-8">
<!-- ..... -->
    @vite(["resources/css/app.css","resources/js/app.js" ])
<!-- ..... -->
</head>







Icon activity.jpg
Diseño de pantallas
Layout de la aplicación
  • Lo primero planteamos una pantalla general para la aplicación que podría ser en una primera instancia

Layout.png

Pantalla de Patnalla Inicio proyecto empresa.png
Patnalla Inicio proyecto factura.png



Crear una tabla

  • Componente vue
  • Quitar campos que no quiero que se vean (en campos y en el modelo).

Estilo a la tabla

  • Esto ya es una parte subjetiva, mirando tailwind, intentamos dar un poco de estilo
  • Centrar la tabla
  • Separar un poco los elementos


==

(https://rimorsoft.com/roles-y-permisos-en-laravel-con-spatie-laravel-permission)

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/Laravel/Ejemplo&oldid=30352»