Primi passi sulla luna di Laravel: come ottenere subito un risultato e puntare a Marte

primi risultati statici con Laravel, la luna era alla nostra portata – cit Jules Verne

Marte senza satellite? Fattibile!

Sarebbe bello poter fare sei mesi di formazione teorica in aula e sei mesi di pratica costruendo applicazioni reali uscendo dopo un anno di metodiche discipline come un perfetto sviluppatore Laravel. Ma le cose nel mondo reale di fronte a una tecnologia sconosciuta sono diverse, soprattutto se seguendo il dito tutti ti chiedono la luna per ieri! Non c’è problema accelleriamo i processi di formazione, da visual studio code all’ interno della cartella di lavoro digitiamo il comando:

php artisan serve

per ottenere come tempestiva risposta:

Starting Laravel development server: http://127.0.0.1:8000

Ok esisto dunque sono. Il sito statico c’è e per costruirlo siamo dovuti passare attraverso molteplici novità, vediamole in dettaglio. Per fare ciò vediamo prima il famoso template master di cui abbiamo già accennato agli articoli contenuti in https://umbriawayfidelizza.wordpress.com/ dove ci siamo mossi per soddisfare una esigenza pratica: posso ottimizzare la mia formazione sui temi di WP? La risposta è si soprattutto se mi gioco una mossa a doppia funzionalità e cioé esplorando una nuova tecnologia che non conosco. Fortunatamente abbiamo scelto di non incasinarci la vita scegliendo metodi di uso del web server molto complessi come quelli virtuali o con le configurazioni di XAMPP da settare. Artisan risolve!

web developer umbria
bello quando tutto funziona eh?!

Vediamo quindo la composizione della home page e cerchiamo di capire che cosa fanno le varie direttive:

@extends('master')
@section('title','Home')
@section('content')
    <div class="container"><!--apro il div container-->
       <div class="col-md-12"><!--apro col-md-12-->
           <h1 class="text-center mt-5 editcontent">
               <a href="https://www.farwebdesign.com/" target="_blank">FarWebDesign</a>
           </h1>
           <h3 class="text-center mt-2 editContent">
               Area di supporto tecnico
           </h3>
           <div class="text-center">
               <img src="https://www.farwebdesign.com/img/uw.png" width="600" height="300" alt="" class="img-fluid">
           </div>
       </div><!--chiudo col-md-12 -->
    </div><!--chiudo il div container-->
@endsection

La prima informazione:

@extends('master')

è molto importante perchè ci consente di richiamare tutto il codice presente nella pagina master che vedremo in seguito. Si noterà che al momento la pagina risulta mozzata di testa e coda, ossia non presenta i canonici head e footer e questo vorrà pur dire che queste aree risiedono altrove. La seconda informazione delimita un area di stesura di codice che si materializza con

@section('title','Home')
@section('content')

che rispettivamente mi consentono in primisi di personalizzare il titolo della pagina e in secundis di dire alla pagina che esiste un contenuto che ha un inizio e una fine, si veda l’ultima riga con

@endsection

Quindi abbiamo avuto l’ennesima riconferma che blade è un template engine che lavora con direttive proprie, adesso andiamo ad analizzare la pagina master:

<html>
<head>
    <title>@yield('title')</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="{!! asset('css/bootstrap.min.css') !!}">
    <link rel="stylesheet" href="{!! asset('css/table.css') !!}">
</head>
<body>
@include('shared.navbar')
@yield('content')
<script src="{!! asset('js/jquery-3.5.1.js') !!}"></script>
<script src="{!! asset('js/popper.js') !!}"></script>
<script src="{!! asset('js/bootstrap.min.js') !!}"></script>
</body>
</html>

come dice la parola stessa master sta per matrice valida per tutte le pagine, infatti se si analizza il codice si vedrà che il tag di apertura e chiusura di un normale documento HTML è compreso. Ora ci sono numerose direttive strane da analizzare, la prima:

@yield('title')

che richiama il titolo da personalizzare per ogni pagina figlia. Da notare l’espressione nell’ head:

{!! asset('css/table.css') !!}

che con questa sintassi tipica dice in un modo alquanto originale che capisce solo il template/engine blade che le risorse da andare a recuperare per integrare funzionalità esterne a livello di css sono reperibili in quel path specifico. Si noti la novità altisonante:

@include('shared.navbar')

che sta a significare, recuperami per favore il codice della barra che c’è in alto tipica di bootstrap andando dentro la cartella shared appositamente creata dopodiche ci ritroviamo un

@yield('content')

che sta a significare come placeholder che in questo punto specifico sarà mostrato il contenuto che di fatto è quello delimitato nella pagina home.blade.php da:

@section('content') //apertura
@endsection //chiusura

e ovviamente a questo punto il file più semplice di tutti è quello che contiene il codice recuperato dal sito ufficiale di bootstrap sotto la voce componenti che si trova per l’appunto dentro la cartella shared:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="https://www.umbriaway.eu" target="_blank">Umbriaway Consulting</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/php">Php</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/phpoop">Php OOP</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/wordpress">Wordpress</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/codeigniter">Codeigniter</a>
            </li>            
            <li class="nav-item">
                <a class="nav-link" href="/laravel">Laravel</a>
            </li>            
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Member
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Register</a>
                    <a class="dropdown-item" href="#">Login</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

Bene tutto funziona magicamente (anche se staticamente) e sulla luna ci abbiamo messo piede, ma si sa gli esseri umani voglioni di più e non si accontentano per questo subito dopo i primi due passetti l’astronauta si gira e occhieggiendo verso Marte ci punta il dito contro! Ma questa è una storia tutta nuova ancora da sviluppare con incredibili effetti speciali che in Laravel prendono il nome di migration!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...