Zo maak je een blog in Laravel

Laravel is een PHP webapplicatie framework met een expressieve, elegante syntaxis. Het framework bevat een uitgebreide bibliotheek met pakketten en neemt veel van het programmeerwerk voor zijn rekening, waardoor jij je kunt richten op je creativiteit.

Een creative use case van Laravel is het maken van een persoonlijke blog. Deze tutorial beschrijft hoe je Laravel kunt gebruiken om een blog te bouwen en te publiceren op Kinsta.

Bekijk de volledige code van het project voor een preview van het project.

Vereisten

Om deze tutorial te volgen, moet je ervoor zorgen dat je het volgende hebt:

• Een webserver. Deze tutorial gebruikt XAMPP.
• Een account op GitHub, GitLab of Bitbucket voor het publiceren van de code van je applicatie.
• Laravel geïnstalleerd.
• Een actief MyKinst a ccount voor Applicatie Hosting. Meld je aan voor een gratis trial als je die nog niet hebt.

Zorg ervoor dat de Apache en MySQL module services draaien in het XAMPP Control Panel. Zo niet, klik dan op de Start knop van elke service in de kolom Actions. Je XAMPP Control Panel zou er nu zo uit moeten zien:

MySQL/MariaDB draait standaard op poort 3306. Noteer de poort als je deze wijzigt.

Als je een andere webserver dan XAMPP gebruikt, zorg er dan voor dat je Apache of andere serversoftware gebruikt en MariaDB server op je lokale machine hebt geïnstalleerd.

Snel aan de slag met phpMyAdmin

1. Als MySQL en Apache draaien, ga dan naar je browser.
2. Open phpMyAdmin en plak in http://localhost/phpmyadmin/. Het volgende zou moeten verschijnen:

phpMyAdmin is een databasebeheerprogramma voor MySQL en MariaDB.

Een nieuw Laravel project maken

Je kunt nu beginnen met het maken van een blog met Laravel. Voor deze tutorial hebben we een computer met Windows gebruikt.

1. Ga naar de terminal of command line interface (CLI) van je computer.
2. Maak een Laravel project genaamd blog met het commando laravel new blog.
3. Open de blog directory van je project met het commando cd blog.
4. Open de map vervolgens in je code editor.
5. Om te controleren of je het project met succes hebt gebouwd, voer je php artisan serve uit in je terminal of CMD.
6. Klik op de lokale adresuitvoer om deze naar de browser te sturen. De browser zou de standaard welkomstpagina van Laravel moeten weergeven, zoals hieronder getoond:

De database configureren

Maak en configureer de database door terug te gaan naar phpMyAdmin in je browser en een database genaamd blog aan te maken.

1. Om de database aan te maken typ je in het tabblad Databases “blog” in het veld Create database.
2. Klik vervolgens op Create.

3. Werk vervolgens de databaseverbinding bij in je .env bestand in de root van je blogproject. Wijzig de waarden DB_DATABASE en DB_PASSWORD in de waarden die je hebt aangemaakt.

De verbindingsgegevens moeten er als volgt uitzien:

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

De andere database verbindingsdetails blijven hetzelfde als in het .env bestand. Als je tijdens de configuratie een verbindingswaarde wijzigt, zoals DB_PORT van 3306 naar 3307, zorg er dan voor dat je deze in het . env bestand bijwerkt.

De tabel met berichten maken

Maak vervolgens een databasemodel en migreer de wijzigingen.

1. Voer in je terminal php artisan make:model Post -mc uit om een model genaamd Post, een tabel genaamd posts, een migratiebestand en een controller te maken.

2. Controleer de database/migrations map en open het migratiebestand dat je zojuist hebt gemaakt. Het heeft het volgende format: YYYY_MM_DD_ID_create_posts_table.php.
3. Maak in de methode up() van het migratiebestand een schema met de attributen title, description en 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. Ga nu naar je terminal en migreer de wijzigingen met php artisan migrate, zoals hieronder getoond:

5. Ga naar phpMyAdmin in je browser, waar je de tabel met posts ziet:

Controllers maken

Het toevoegen van views en controllers implementeert je business logica voor de database set. De views zijn de gebruikersinterfaces die gegevensobjecten uit het model weergeven. Controllers beheren de stroom van gegevensuitvoering tussen het model en de views.

1. Voordat je Blade-bestanden aanmaakt, voer je npm install uit, gevolgd door npm run dev in je terminal. Het eerste commando installeert de benodigde npm pakketten. Het tweede commando start een Vite ontwikkelingsserver.
2. Ga naar de app/Http/Controllers map, open het PostController.php bestand en maak een index controller method. De controller method rendert een eenvoudige tekst naar de browser. Voeg hiervoor de volgende code toe aan de klasse PostController:

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

Deze methode geeft $post als contextvariabele door aan de sectie views van de index Blade template. $post bevat tekst om weer te geven, die hier zegt: “Laravel Tutorial Series One!” Je zult dit later vervangen binnen de berichten door de loop.

3. Maak twee nieuwe mappen in de resources/views map: layouts en posts.
4. Maak in de layouts map een app.blade.php bestand. Andere Blade bestanden zullen hiervan inheriten.
5. Kopieer deze code 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>
  @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>

Met deze HTML code importeer je Bootstrap versie 5.2.3 en Vite om de JavaScript en CSS assets te bundelen. De gegenereerde pagina heeft een header met een navbar en een footer met de scripts eronder. In de body wordt dynamische content weergegeven vanuit andere Blade bestanden met behulp van @yield('content').

De posts directory bevat de Blade bestanden voor het implementeren van create en read operaties.

6. Maak in de posts directory een Blade bestand genaamd index.blade.php en voeg de volgende code toe:

@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

Deze code is een uitbreiding van het app.blade.php bestand op de layout pagina. Wanneer het wordt weergegeven in de browser, toont het de inhoud van elke blogpost en de navigatiebalk en voettekst die zijn overgenomen van het app.blade.php bestand in de layout map. Tussen de section tags geef je de inhoud van de controller door om te renderen in de browser wanneer je de applicatie uitvoert.

7. Stel de route in in de routes map. Het instellen van de route zorgt voor het automatisch laden door de RouteServiceProvider in de App/Providers map. De RouteServiceProvider is de klasse die verantwoordelijk is voor het laden van de routebestanden van de applicatie.
8. Importeer PostController in het bestand routes/web.php met use AppHttpControllersPostController.
9. Stel vervolgens de route in door Route::resource('posts', PostController::class); toe te voegen aan het bestand routes/web.php.
10. Terwijl de Vite ontwikkelingsserver nog draait, gebruik je php artisan serve om de applicatie in je terminal uit te voeren.
11. Open met je browser http://127.0.0.1:8000/posts om je nieuwe blogberichtenlijst te zien.

De pagina zou er als volgt uit moeten zien:

In de volgende sectie definiëren we de controller-methodes voor het weergeven van alle berichten, het maken van een bericht en het opslaan van een bericht. Daarna voegen we de routes toe en maken we de Blade bestanden in de corresponderende secties.

De pagina met blogberichten maken

Maak blogberichten door een titel in te voeren, een beschrijving toe te voegen en een afbeelding te uploaden. Geef vervolgens je berichten weer in opeenvolgende volgorde.

1. Open het bestand Post.php in de map app/Models.
2. Voeg in de klasse Post onder het codeblok use HasFactory; protected $fillable = ['title', 'description', 'image']; toe.

Deze code beschermt je modelattributen tegen mass assignments.

3. Importeer in je app/Http/Controllers/PostController.php bestand het Post model met use AppModelsPost;.
4. Vervang de controllermethoden index en create die eerder zijn gemaakt in de klasse PostController door de onderstaande code:

// 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');
}

In de methode index die je zojuist hebt gemaakt, fetcht de PHP applicatie alle berichten, zet ze in chronologische volgorde en slaat ze op in een posts variabele. In de retourweergave worden de berichten doorgegeven aan het bestand index.blade.php als een contextvariabele in de map views/posts. De methode create retourneert een create.blade.php bestand en plaatst het in de views/posts directory als een gebruiker een nieuw bericht probeert te maken.

5. Maak een store controller methode met de onderstaande code (om blogposts op te slaan in de database). Voeg deze code toe aan de PostController class onder de index en create controller methodes.

// 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.');
}

De methode store handelt clientverzoeken af met betrekking tot de gegevens in zijn body, dus hij neemt request als argument. Vervolgens valideer je de velden die worden gebruikt bij het maken van een bericht en maak je een post instantie van het Post model. De ingevoerde veldgegevens worden dan toegewezen aan de aangemaakte instantie en opgeslagen. De pagina wordt doorgestuurd naar de index weergave met een flashtekst die zegt: “Post created successfully.”

Routes toevoegen aan je berichten

Om de routes te registreren in je web.php bestand:

1. Open het bestand web.php in de map routes in de root van je project.
2. Registreer de routes van de controller methods door de bestaande code te vervangen door dit:

<?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',
]);

Deze controller gebruikt deze routes om je gegevensobjecten te maken, op te slaan en weer te geven.

Blade bestanden maken

Om de views te maken, keer je terug naar de klasse PostController:

1. Maak in de map resources/views/posts een Blade bestand met de naam create.blade.php en voeg de onderstaande code toe:

@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 deze code inherit create.blade.php de inhoud van app.blade.php in de layouts map met @extends('layouts.app'). Deze inhoud bevat een header, navigatiebalk en footer. Nadat je de tekst Add Post hebt toegevoegd in de tag h1, heb je een formulier gemaakt met de methode post dat de actie {{route('posts.store')}} bevat.

De code enctype="multipart/form-data" maakt het uploaden van afbeeldingen mogelijk en csrf beschermt je formulier tegen cross-site aanvallen. Vervolgens geven de foutmeldingen ongeldige veldinvoer weer en gebruik jefield attributes om labels en invoer voor het formulier te maken.

2. Vervang nu de code in het bestand index.blade.php door de onderstaande code om alle blogberichten weer te geven:

@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

Deze code voegt een knop Add post toe. Wanneer er op wordt geklikt, wordt er een bericht aangemaakt en worden eventuele gegevens doorgegeven aan de pagina. De voorwaarde if controleert of er gegevens in de database staan. Als er gegevens zijn, wordt het bericht doorgelaten. Zo niet, dan wordt “No Posts found” weergegeven.

Structuur aanbrengen in je pagina’s

Je kunt nu je applicatie uitvoeren met php artisan serve om blogberichten te maken en weer te geven. Open <a href="http://127.0.0.1:8000">http://127.0.0.1:8000</a > en de pagina zou er zo uit moeten zien:

Als je een bericht toevoegt, ziet het er als volgt uit:

Je Laravel blog deployen naar Kinsta

Om je Laravel applicatie te deployen en te testen gebruik je Kinsta’s Applicatie Hosting dienst:

1. Maak een .htaccess bestand.
2. Plaats de code in een repository.
3. Maak een database aan.
4. Stel een project in op MyKinsta.
5. Bouw en deploy je blog.

Een .htaccess bestand maken

Maak in de hoofdmap van het project een bestand met de naam .htaccess en voeg de volgende code toe:

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

Deze code leidt je applicatieverzoeken om naar public/index.php binnen de deployment.

Je code naar een repository pushen

Maak een repository aan voor je project en publiceer de code. Je kunt GitHub, GitLab of Bitbucket gebruiken om je code te hosten en te deployen naar MyKinsta.

De database instellen in je MyKinsta Dashboard

Om een database aan te maken op MyKinsta:

1. Klik op de knop Dienst toevoegen en selecteer Database.
2. Voer de gegevens van je database in zoals hieronder getoond. Merk op dat voor een succesvolle deployment je de gebruikersnaam van de Database als standaardwaarde moet laten staan.

De details bevatten de naam van de database, de weergavenaam, het type database, de versie, de gebruikersnaam van de database, de locatie van het datacenter en de grootte. Deze demonstratie gebruikt MariaDB voor de database en de grootte is Db3 (1CPU / 4GB RAM / 10GB schijfruimte 65 USD / maand). Je kunt het databasetype en de databasegrootte kiezen die passen bij je specifieke behoeften.

3. Klik op Doorgaan.
4. Bevestig je maandelijkse kosten en betaalmethode en klik dan op Database maken.

Het project instellen op MyKinsta

Om je applicatie te deployen op MyKinsta:

1. Klik op het Dashboard paneel.
2. Klik op Dienst toevoegen en selecteer Applicatie, zoals hieronder getoond:

MyKinsta leidt je door naar de pagina Applicatie toevoegen.

1. In het gedeelte Selecteer branch kaart, selecteer je GitHub repository en schakel dan het selectievakje Voeg deployment to bij commit in.
2. In de Basis details voer je de applicatienaam in en selecteer je de datacenterlocatie voor je applicatie.
3. Omdat Laravel een app key nodig heeft tijdens de deployment, voeg je in de omgevingsvariabelen kaart een APP_KEY toe als Key 1. Je kunt de APP_KEY gebruiken die is gedefinieerd in je lokale .env bestand of gebruik een online Laravel Key generator om er een te krijgen.
4. Klik op Doorgaan.
5. Selecteer de build resources (CPU en RAM) voor je applicatie. Deze demonstratie gebruikt de standaard bouwmachine (1CPU / 4 GB RAM) – 0,02USD / minuut.
6. Laat het keuzerondje Automatisch container image instellen ingeschakeld.
7. Klik op Doorgaan.
8. Op de pagina Je processen instellen kun je de grootte van de pod en de instantie van je applicatie wijzigen door deze vakjes te selecteren. In deze demonstratie worden de standaardwaarden gebruikt.
9. Klik op Doorgaan.
10. Klik ten slotte op de knop Betaalmethode bevestigen om de deploymentvan je applicatie te starten. Als je hierop klikt, ga je naar de pagina Deployment details om de voortgang van je deployment te bekijken.

Je applicatie bouwen en deployen

Nu de database en de applicatie gehost zijn, koppel je de database aan je applicatie en bouw je de deployment.

Om de database te verbinden, gebruik je de externe verbindingen van je gehoste database. Op het tabblad Info van je gehoste database zie je Externe verbindingen, zoals hieronder weergegeven:

1. Navigeer op de pagina Instellingen van de uitgewerkte app naar de kaart Omgevingsvariabele.
2. Klik op Omgevingsvariabele toevoegen om de externe verbindingen van je gehoste database met de bijbehorende waarde toe te voegen. Gebruik dezelfde variabelen als in je .env bestand.

Deze schermafbeelding is handig als je overweegt om de <code>env</code> variabelen die je handmatig hebt bewerkt te markeren om ze te onderscheiden van de anderen.

De APP_URL is de URL van je gehoste applicatie en DB_CONNECTION is mysql.

1. Ga naar de Instellingen pagina van je applicatie.
2. In de Buildpack kaart voeg je PHP en Node.js toe als build packs. Omdat dit een PHP applicatie is, moet je het PHP buildpack als laatste toevoegen.
3. Klik op Nu deployen om je applicatie opnieuw te bouwen.

Voeg vervolgens een proces toe dat de database zal migreren.

1. Ga naar het tabblad Processen op de pagina van je gehoste applicatie.
2. Selecteer Proces aanmaken op de kaart Runtimeprocessen.
3. Voer Migratie in als naam, achtergrondworker als type en php artisan migrate --force als startcommando. Je kunt de podgrootte en instanties op de standaardwaarden laten staan.
4. Selecteer Doorgaan om het proces aan te maken. Deze actie activeert een nieuwe build en deployt de applicatie opnieuw.
5. Klik op het tabblad Domeinen van je applicatie op de link van je applicatie. Je ziet dat de applicatie nu draait.
6. Merk op dat de blogapplicatie die is gedeployd op MyKinsta geen berichten weergeeft. Maak een nieuw bericht door de titel in te voeren, een beschrijving toe te voegen en een afbeelding te kiezen.

Samenvatting

Laravel maakt het eenvoudig om snel een eenvoudige blog te ontwikkelen. Het snel laden van pagina’s, de robuuste controllerarchitectuur en de competente beveiliging maken het verbeteren van de prestaties van een applicatie eenvoudig. Ondertussen kun je met MyKinsta je webapplicaties snel en effectief lanceren en deployen. MyKinsta’s flexibele prijsmodel is gebaseerd op gebruik, waardoor verborgen kosten worden geëlimineerd.

Wanneer Kinsta je Laravel applicatie host, draait deze op het Google Cloud Platform op hun Premium Tier, waardoor deze zo snel mogelijk is. Kinsta bevat ook zakelijke DDoS bescherming en -mitigatie met Cloudflare en geavanceerde firewalls om kwaadwillenden op afstand te houden en nog veel meer.

Start nu je gratis trial van Applicatie Hosting om de ontwikkeling en hosting van je webapplicaties te stroomlijnen!

Marcia Ramos Kinsta

Ik ben de Editorial Team Lead bij Kinsta. Ik ben een open source liefhebber en ik houd van coderen. Met meer dan 7 jaar ervaring in technisch schrijven en redactiewerk voor de tech-industrie, werk ik graag samen met mensen om duidelijke en beknopte content te creëren en workflows te verbeteren.

• LinkedIn