Come creare un blog in Laravel

Laravel è un framework per applicazioni web in PHP con una sintassi espressiva ed elegante. Dispone di una vasta libreria di pacchetti e gestisce gran parte del lavoro di programmazione, lasciandovi il tempo di concentrarvi sulla vostra creatività.

Uno degli usi creativi di Laravel è la creare un blog personale. Questo tutorial descrive come utilizzare Laravel per creare e pubblicare un blog su Kinsta.

Per un’anteprima del progetto, date un’occhiata al codice completo del progetto.

Prerequisiti

Per seguire questo tutorial, assicuratevi di avere i seguenti requisiti:

• Un server web. Questo tutorial utilizza XAMPP.
• Un account su GitHub, GitLab o Bitbucket per pubblicare il codice dell’applicazione.
• Laravel installato.
• Un account MyKinsta attivo per l’hosting dell’applicazione. Iscrivetevi per una prova gratuita se non ne avete già uno.

Assicuratevi che i servizi Apache e MySQL siano attivi nel pannello di controllo di XAMPP. In caso contrario, cliccate sul pulsante Start di ciascun servizio nella colonna Actions. Il pannello di controllo XAMPP dovrebbe avere questo aspetto:

Per impostazione predefinita, MySQL/MariaDB funziona sulla porta 3306. Prendete nota della porta se la cambiate.

Se utilizzate un server web diverso da XAMPP, assicuratevi di utilizzare Apache o un altro software server e di aver installato il server MariaDB sul vostro computer locale.

Avvio rapido con phpMyAdmin

1. Con MySQL e Apache in funzione, accedete al browser.
2. Aprite phpMyAdmin e incollate http://localhost/phpmyadmin/. Dovrebbe apparire la seguente schermata:

phpMyAdmin è uno strumento di gestione dei database per MySQL e MariaDB.

Creare un nuovo progetto Laravel

Ora potete iniziare a creare il blog utilizzando Laravel. Per questo tutorial abbiamo utilizzato un computer con sistema operativo Windows.

1. Andate al terminale o all’interfaccia a riga di comando (CLI) del computer.
2. Create un progetto Laravel chiamato blog utilizzando il comando laravel new blog.
3. Aprite la directory blog del progetto con il comando cd blog.
4. Quindi, aprite la cartella nell’editor di codice.
5. Per verificare che il progetto sia stato creato correttamente, eseguite php artisan serve nel terminale o CMD.
6. Cliccate sull’indirizzo di output locale per inviarlo al browser. Il browser dovrebbe visualizzare la pagina di benvenuto predefinita di Laravel, mostrata qui sotto:

Configurare il database

Create e configurate il database tornando a phpMyAdmin nel browser e creando un database chiamato blog.

1. Per creare il database, nella scheda Database, digitate “blog” nel campo Create database.
2. Quindi, cliccate su Create.

3. Successivamente, aggiornate la connessione al database nel file .env nella root del progetto del blog. Cambiate i valori DB_DATABASE e DB_PASSWORD con quelli creati.

I dettagli della connessione dovrebbero assomigliare a questi:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=your-db-username
DB_PASSWORD=your-db-password

Gli altri dettagli della connessione al database rimangono invariati rispetto al file .env. Se durante la configurazione modificate qualche valore di connessione, ad esempio cambiando DB_PORT da 3306 a 3307, assicuratevi di aggiornarlo nel file .env.

Creare la tabella dei post

Successivamente, create un modello di database e migrate le modifiche.

1. Nel terminale, eseguite php artisan make:model Post -mc per creare un modello chiamato Post, una tabella chiamata posts, un file di migrazione e un controller.

2. Controllate la directory database/migrations e aprite il file di migrazione appena creato. Il suo formato è il seguente: YYYY_MM_DD_ID_create_posts_table.php.
3. Nel metodo up() del file di migrazione, create uno schema con gli attributi title, description e image.

public function up() {
  Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title')->nullable();
    $table->text('description')->nullable();
    $table->string('image')->nullable();
    $table->timestamps();
  });
}

4. Ora andate al terminale e migrate le modifiche utilizzando php artisan migrate, come mostrato di seguito:

5. Andate su phpMyAdmin nel browser e vedrete la tabella dei post:

Come creare i controllori

L’aggiunta di viste e controllori implementa la logica di business per l’insieme di database. Le viste sono le interfacce utente che visualizzano gli oggetti del modello. I controllori gestiscono il flusso di esecuzione dei dati tra il modello e le viste.

1. Prima di creare i file Blade, eseguite npm install, seguito da npm run dev nel terminale. Il primo comando installa i pacchetti npm necessari. Il secondo comando avvia un server di sviluppo Vite.
2. Andate alla cartella app/Http/Controllers, aprite il file PostController.php e create un metodo controller index. Il metodo controller renderizza un semplice testo al browser. Per farlo, aggiungete il seguente codice alla classe PostController:

public function index() {
  $post = "Laravel Tutorial Series One!";
  return view('posts.index', ['post'=>$post]);
}

Questo metodo passa $post come variabile di contesto alla sezione views del template index Blade. $post contiene il testo da visualizzare che, in questo caso, dice: “Laravel Tutorial Series One!”. Sostituirete questo testo con il ciclo dei post più avanti.

3. Create due nuove directory nella cartella resources/views: layouts e posts.
4. All’interno della directory layouts, create un file app.blade.php. Gli altri file Blade erediteranno le caratteristiche da questo.
5. Copiate questo codice in app.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Blog</title>
  <!-- Styles →
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

<!-- Navbar →
<header>
  <nav class="navbar bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand" href="{{ route('posts.index') }}">Mini-Blog</a>
    </div>
  </nav>
</header>

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

<!-- Footer -->
<footer class="footer mt-auto py-3 bg-dark">
  <div class="container d-lg-flex justify-content-between">
    <span class="text-light">Mini-Blog © 2023</span>
  </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"  integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</html>

Utilizzando questo codice HTML, importate Bootstrap versione 5.2.3 e Vite per raggruppare le risorse JavaScript e CSS. La pagina generata ha un header con una navbar e un footer con gli script chiamati sotto di essa. Nel corpo, i contenuti dinamici vengono resi da altri file Blade con l’aiuto di @yield('content').

La directory posts contiene i file Blade per implementare le operazioni di creazione e lettura.

6. All’interno della cartella posts, create un file Blade chiamato index.blade.php e aggiungete il seguente codice:

@extends('layouts.app')
@section('content')
<div class="container">
  <div class="titlebar">
    <h1>Blog list</h1>
  </div>
  <hr>
  <p>The Blog 1 - {{ $post }}</p>
</div>
@endsection

Questo codice si estende dal file app.blade.php nella pagina dei layout. Quando viene visualizzato nel browser, mostra il contenuto di ogni post del blog e la barra di navigazione e il footer ereditati dal file app.blade.php nella cartella layouts. Tra i tag di sezione, passate il contenuto del controller da renderizzare nel browser quando eseguite l’applicazione.

7. Impostate il percorso nella cartella routes. L’impostazione della route consente il caricamento automatico da parte di RouteServiceProvider nella cartella App/Providers. RouteServiceProvider è la classe responsabile del caricamento dei file di route dell’applicazione.
8. All’interno del file routes/web.php, importate PostController utilizzando use AppHttpControllersPostController.
9. Quindi, impostate la route aggiungendo Route::resource('posts', PostController::class); al file routes/web.php.
10. Con il server di sviluppo Vite ancora in funzione, usate php artisan serve per eseguire l’applicazione nel terminale.
11. Con il browser, aprite http://127.0.0.1:8000/posts per vedere l’elenco dei post del blog.

La pagina dovrebbe avere il seguente aspetto:

Nella prossima sezione, definiremo i metodi del controller per visualizzare tutti i post, creare un post e memorizzare un post. Quindi, aggiungeremo le route e creeremo i file Blade nelle sezioni corrispondenti.

Creare la pagina dei post del blog

Create i post del blog inserendo un titolo, aggiungendo una descrizione e caricando un’immagine. Poi, visualizzate i post in ordine sequenziale.

1. Nella cartella app/Models, aprite il file Post.php.
2. Nella classe Post, sotto il blocco di codice use HasFactory;, aggiungete protected $fillable = ['title', 'description', 'image'];.

Questo codice protegge gli attributi del modello dalle assegnazioni di massa.

3. Nel file app/Http/Controllers/PostController.php, importate il modello Post usando use AppModelsPost;.
4. Sostituite i metodi del controllore index e create creati in precedenza nella classe PostController con il codice seguente:

// Show all posts
public function index() {
  $posts = Post::orderBy('created_at', 'desc')->get();
  return view('posts.index', ['posts' => $posts]);
}
    
// Create post
public function create() {
  return view('posts.create');
}

Nel metodo index appena creato, l’applicazione PHP recupera tutti i post, li mette in ordine cronologico e poi li memorizza in una variabile posts. Nella vista di ritorno, i post passano nel file index.blade.php come variabile di contesto nella directory views/posts. Il metodo create restituisce un file create.blade.php e lo inserisce nella cartella views/posts se un utente cerca di creare un nuovo post.

5. Create un metodo di controllo store utilizzando il codice seguente (per memorizzare i post del blog nel database). Aggiungete questo codice alla classe PostController sotto i metodi di controllo index e create.

// Store post
public function store(Request $request) {
  // validations
  $request->validate([
    'title' => 'required',
    'description' => 'required',
    'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
  ]);

  $post = new Post;

  $file_name = time() . '.' . request()->image->getClientOriginalExtension();
  request()->image->move(public_path('images'), $file_name);

  $post->title = $request->title;
  $post->description = $request->description;
  $post->image = $file_name;

  $post->save();
  return redirect()->route('posts.index')->with('success', 'Post created successfully.');
}

Il metodo store gestisce le richieste del client relative ai dati contenuti nel suo corpo, quindi prende request come argomento. Successivamente, convalida i campi utilizzati per la creazione di un post e crea un’istanza post dal modello Post. I dati dei campi inseriti vengono assegnati all’istanza creata e salvati. La pagina viene reindirizzata alla vista index con un testo flash che dice: “Post creato con successo”.

Aggiungere le route ai post

Per registrare i percorsi nel file web.php:

1. Nella cartella routes della root del progetto, aprite il file web.php.
2. Registrate i percorsi dei metodi del controller sostituendo il codice esistente con questo:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;

Route::resource('/', PostController::class)->names([
  'index' => 'posts.index',
  'create' => 'posts.create',
  'store' => 'posts.store',
  'show' => 'posts.show',
]);

Questo controller utilizza queste route per creare, memorizzare e visualizzare gli oggetti dati.

Creare i file Blade

Per creare le viste, tornate alla classe PostController:

1. Nella cartella resources/views/posts, create un file Blade chiamato create.blade.php e aggiungete il codice seguente:

@extends('layouts.app')
@section('content')
<div class="container">
  <h1>Add Post</h1>
  <section class="mt-3">
    <form method="post" action="{{ route('posts.store') }}" enctype="multipart/form-data">
      @csrf
      <!-- Error message when data is not inputted -->
      @if ($errors->any())
        <div class="alert alert-danger">
          <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif
      <div class="card p-3">
        <label for="floatingInput">Title</label>
        <input class="form-control" type="text" name="title">
        <label for="floatingTextArea">Description</label>
        <textarea class="form-control" name="description" id="floatingTextarea" cols="30" rows="10"></textarea>
        <label for="formFile" class="form-label">Add Image</label>
        <img src="" alt="" class="img-blog">
        <input class="form-control" type="file" name="image">
      </div>
      <button class="btn btn-secondary m-3">Save</button>
    </form>
  </section>
    
</div>
@endsection

In questo codice, create.blade.php eredita i contenuti di app.blade.php nella cartella layouts utilizzando @extends('layouts.app'). Questi contenuti includono un header, una barra di navigazione e un footer. Dopo aver aggiunto il testo Add Post all’interno del tag h1, avrete creato un modulo con il metodo post che contiene l’azione {{route('posts.store')}}.

Il codice enctype="multipart/form-data" consente il caricamento di immagini e csrf protegge il modulo dagli attacchi cross-site. Poi, i messaggi di errore visualizzano le voci di campo non valide e utilizzanofield attributes per creare etichette e input per il modulo.

2. Ora sostituite il codice del file index.blade.php con il codice seguente per visualizzare tutti i post del blog:

@extends('layouts.app')
@section('content')
<div class="container">
  <div class="titlebar">
    <a class="btn btn-secondary float-end mt-3" href="{{ route('posts.create') }}" role="button">Add Post</a>
    <h1>Mini post list</h1>
  </div>
    
  <hr>
  <!-- Message if a post is posted successfully -->
  @if ($message = Session::get('success'))
  <div class="alert alert-success">
    <p>{{ $message }}</p>
  </div>
  @endif
         @if (count($posts) > 0)
    @foreach ($posts as $post)
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-2">
              <img class="img-fluid" style="max-width:50%;" src="{{ asset('images/'.$post->image)}}" alt="">
            </div>
            <div class="col-10">
              <h4>{{$post->title}}</h4>
            </div>
          </div>
          <p>{{$post->description}}</p>
          <hr>
        </div>
      </div>
    @endforeach
  @else
    <p>No Posts found</p>
  @endif
</div>
@endsection

Questo codice aggiunge un pulsante Add post. Quando viene cliccato, crea un post e passa tutti i dati nel corpo della pagina. La condizione if controlla se ci sono dati nel database. Se ci sono dati, passa. In caso contrario, viene visualizzato “Nessun post trovato”.

Strutturare le pagine

Ora potete eseguire l’applicazione utilizzando php artisan serve per creare e visualizzare i post del blog. Aprite <a href="http://127.0.0.1:8000">http://127.0.0.1:8000</a > e la pagina dovrebbe avere questo aspetto:

Se aggiungete un post, viene visualizzato in questo modo:

Distribuire il blog Laravel su Kinsta

Per distribuire e testare l’applicazione Laravel utilizzando il servizio di Hosting di Applicazioni di Kinsta:

1. Create un file .htaccess.
2. Inviate il codice a un repository.
3. Create un database.
4. Create un progetto su MyKinsta.
5. Create e distribuite il blog.

Creare un file .htaccess

Nella cartella principale del progetto, create un file chiamato .htaccess e aggiungete il seguente codice:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^(.*)$ public/$1 [L]
</IfModule>

Questo codice reindirizza le richieste dell’applicazione a public/index.php nella distribuzione.

Eseguire il push del codice in un repository

Create un repository per il progetto e pubblicate il codice. Potete utilizzare GitHub, GitLab o Bitbucket per ospitare il codice e distribuirlo su MyKinsta.

Configurare il database nella dashboard di MyKinsta

Per creare un database su MyKinsta:

1. Cliccate sul pulsante Aggiungi servizio e selezionate Database.
2. Inserite i dettagli del database come mostrato di seguito. Affinché l’installazione vada a buon fine, dovete lasciare il nome utente del database come valore predefinito.

I dettagli includono il nome del database, il nome visualizzato, il tipo di database, la versione, il nome utente del database, la posizione del data center e la dimensione. Questa dimostrazione utilizza MariaDB per il database e la dimensione è Db3 (1CPU / 4GB RAM / 10GB Spazio su disco 65 USD / mese). È possibile scegliere il tipo di database e le dimensioni più adatte alle proprie esigenze specifiche.

3. Cliccate su Continua.
4. Confermate il costo mensile e il metodo di pagamento, quindi cliccate su Crea database.

Configurare il progetto su MyKinsta

Per distribuire l’applicazione su MyKinsta:

1. Cliccate sul pulsante Cruscotto.
2. Cliccate su Aggiungi servizio e selezionate Applicazione, come mostrato di seguito:

MyKinsta vi reindirizza alla pagina Aggiungi applicazione.

1. Nella sezione Seleziona branch, selezionate il vostro repository GitHub, quindi selezionate la casella Aggiungi distribuzione su commit.
2. Nei dettagli di base, inserite il nome dell’applicazione e selezionate la posizione del data center per l’applicazione.
3. Poiché Laravel ha bisogno di una chiave per l’applicazione durante la distribuzione, nella scheda Variabili d’ambiente, aggiungete una APP_KEY come Chiave 1. Potete utilizzare APP_KEY definita nel file .env locale o utilizzare un generatore di chiavi Laravel online per ottenerne una.
4. Cliccate su Continua.
5. Selezionate le risorse di build (CPU e RAM) per l’applicazione. Questa dimostrazione utilizza la build machine standard (1CPU / 4 GB di RAM) – 0,02USD / minuto.
6. Lasciate selezionato il pulsante di opzione Imposta automaticamente l’immagine del container.
7. Cliccate su Continua.
8. Nella pagina Imposta i processi, è possibile modificare le dimensioni del pod e l’istanza dell’applicazione selezionando queste caselle. Questa dimostrazione utilizza i valori predefiniti.
9. Cliccate su Continua.
10. Infine, cliccate sul pulsante Conferma il metodo di pagamento per avviare la distribuzione dell’applicazione. Cliccando su questo pulsante verrete indirizzati alla pagina dei dettagli della distribuzione per vedere l’avanzamento dell’installazione.

Creare e distribuire l’applicazione

Dopo aver ospitato il database e l’applicazione, collegate il database all’applicazione ed eseguite la build per distribuire.

Per collegare il database, usate le connessioni esterne del database ospitato. Nella scheda Info del database ospitato, è presente la voce Connessioni esterne, come mostrato di seguito:

1. Nella pagina Impostazioni dell’applicazione distribuita, andate alla scheda Variabile d’ambiente.
2. Cliccate su Aggiungi variabile d’ambiente per aggiungere le connessioni esterne del database ospitato con il valore corrispondente. Usate le stesse variabili che avete nel file .env.

Questa schermata è utile per contrassegnare le variabili <code>env</code> che avrete modificato manualmente per distinguerle dalle altre.

APP_URL è l’URL dell’applicazione ospitata e DB_CONNECTION è mysql.

1. Andate alla pagina delle Impostazioni dell’applicazione.
2. Nella scheda Buildpack, aggiungete PHP e Node.js come pacchetti di build. Poiché si tratta di un’applicazione PHP, dovete aggiungere il pacchetto di build PHP per ultimo.
3. Cliccate su Distribuisci ora per ricostruire l’applicazione.

Successivamente, aggiungete un processo per la migrazione del database.

1. Andate alla scheda Processi della pagina dell’applicazione ospitata.
2. Selezionate Crea processo nella scheda Processi di runtime.
3. Inserite Migrazione come nome, Background worker come tipo e php artisan migrate --force come comando di avvio. Potete lasciare le dimensioni del pod e le istanze ai valori predefiniti.
4. Selezionate Continua per creare il processo. Questa azione attiva una nuova build e reimposta l’applicazione.
5. Nella scheda Domini dell’applicazione, cliccate sul link dell’applicazione. Potete vedere che ora è attiva e funzionante.
6. Notate che l’applicazione blog distribuita su MyKinsta non mostra alcun post. Create un nuovo post inserendo il titolo, aggiungendo una descrizione e scegliendo un’immagine.

Riepilogo

Laravel permette di sviluppare rapidamente un semplice blog. La rapidità di caricamento delle pagine, la solida architettura dei controller e la sicurezza competente rendono facile migliorare le prestazioni di un’applicazione. Nel frattempo, MyKinsta permette di rilasciare e distribuire le applicazioni web in modo rapido ed efficace. Il modello di prezzo flessibile di MyKinsta si basa sull’utilizzo, eliminando i costi nascosti.

Quando Kinsta ospita un’applicazione Laravel, questa viene eseguita sulla piattaforma cloud di Google di livello Premium, che la rende il più veloce possibile. Kinsta include anche una protezione e una mitigazione DDoS di livello aziendale con Cloudflare e firewall avanzati per tenere a bada i malintenzionati e molto altro ancora.

Iniziate subito la vostra prova gratuita dell’Hosting di Applicazioni per ottimizzare lo sviluppo e l’hosting delle vostre applicazioni web!

Marcia Ramos Kinsta

Sono l'Editorial Team Lead di Kinsta. Sono un'appassionata di open source e amo il coding. Con più di 7 anni di esperienza in scrittura tecnica e di editing per l'industria tecnologica, amo collaborare con le persone per creare contenuti chiari e concisi e migliorare i flussi di lavoro.

• LinkedIn