Diferencia entre revisiones de «Categoría:MANUAL/LARAVEL»

De Pragma Wiki
Ir a la navegación Ir a la búsqueda
Etiqueta: Revertido
 
(No se muestran 6 ediciones intermedias del mismo usuario)
Línea 6: Línea 6:
laravel new nombredelproyecto
laravel new nombredelproyecto
</pre>
</pre>
<h4>A las preguntas del instalador contestar:</h4>
A las preguntas del instalador contestar:
'''Crear proyecto:'''
*'''Starter kit:''' none.
* laravel new pINICIO
*'''Testing framework:''' PEST.
*'''Database:''' sqlite (después podremos usar cualquier BD).
*'''Would you like to run npm…:''' yes.
 
==Crear un layout básico==
===Crear carpetas y archivos===
* Crear carpeta '''\resources\views\layouts'''.
* Agregar archivo '''app.blade.php'''.
 
===Contenido de app.blade.php:===
Incluye el CDN de Tailwind que no debería ser usado en producción.
<br>
Entiendo que habría que instalar Tailwind para producción.
<pre>
<!DOCTYPE html>
    <html>
    <head>
        <title>@yield('title') - My App</title>
        {{-- Stylesheets --}}
        @yield('styles')
 
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
 
    </head>


'''Starter kit:'''
    <body>
* none.
<!--
    @yield('content')
-->


'''Testing framework:'''
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
* PEST.


'''Database:'''
    <h1>Esto es app.blade.php</h1>
* sqlite.
    <hr>


'''Would you like to run npm…:'''
        <header>
* yes.
            {{-- Header content --}}
        </header>


        <main>
            @yield('content') {{-- Main content area --}}
        </main>


        <footer>
            {{-- Footer content --}}
        </footer>


*'''Starter kit:''' none.
        {{-- JavaScript files --}}
*'''Testing framework:''' PEST.
        @yield('scripts')
*'''Database:''' sqlite.
        <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
*'''Would you like to run npm…:''' yes.
    </body>
    </html>
</pre>
 
===Cambiar welcome.blade.php===
El comando '''@extends('layouts.app')''' indica que extiende el archivo '''\resources\views\layouts\app.blade.php'''.
 
<pre>
@extends('layouts.app')
 
@section('title', 'Home Page que armé yo')
 
@section('content')
    <h1>Bienvenido al Home Page! (el mío, welcome.blade.php)</h1>
    <p>Este es el contenido de la página principal.</p>
    <p>Este es el contenido de la página principal.</p>
    <p>Este es el contenido de la página principal.</p>
    <p>Este es el contenido de la página principal.</p>
    <p>Este es el contenido de la página principal.</p>
    <button>Grabar</button>
    <button>Cargar</button>
@endsection
 
@section('scripts')
    <script src="/js/home-specific.js"></script>
@endsection
</pre>

Revisión actual - 20:27 13 oct 2025

Guía libre con ideas para crear una aplicación en Laravel

Crear una aplicación muy básica en Laravel

Crear el proyecto

Para crear el proyecto básico sin Jetstream ni nada tenemos que usar el siguiente código:

laravel new nombredelproyecto

A las preguntas del instalador contestar:

  • Starter kit: none.
  • Testing framework: PEST.
  • Database: sqlite (después podremos usar cualquier BD).
  • Would you like to run npm…: yes.

Crear un layout básico

Crear carpetas y archivos

  • Crear carpeta \resources\views\layouts.
  • Agregar archivo app.blade.php.

Contenido de app.blade.php:

Incluye el CDN de Tailwind que no debería ser usado en producción.
Entiendo que habría que instalar Tailwind para producción.

<!DOCTYPE html>
    <html>
    <head>
        <title>@yield('title') - My App</title>
        {{-- Stylesheets --}}
        @yield('styles')

    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />

    </head>

    <body>
<!--
    @yield('content')
-->

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

    <h1>Esto es app.blade.php</h1>
    <hr>

        <header>
            {{-- Header content --}}
        </header>

        <main>
            @yield('content') {{-- Main content area --}}
        </main>

        <footer>
            {{-- Footer content --}}
        </footer>

        {{-- JavaScript files --}}
        @yield('scripts')
        <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
    </body>
    </html>

Cambiar welcome.blade.php

El comando @extends('layouts.app') indica que extiende el archivo \resources\views\layouts\app.blade.php.

@extends('layouts.app')

@section('title', 'Home Page que armé yo')

@section('content')
    <h1>Bienvenido al Home Page! (el mío, welcome.blade.php)</h1>
    <p>Este es el contenido de la página principal.</p>
    <p>Este es el contenido de la página principal.</p>
    <p>Este es el contenido de la página principal.</p>
    <p>Este es el contenido de la página principal.</p>
    <p>Este es el contenido de la página principal.</p>
    <button>Grabar</button>
    <button>Cargar</button>
@endsection

@section('scripts')
    <script src="/js/home-specific.js"></script>
@endsection

Esta categoría no contiene ninguna página o archivo.