[PHP|Laravel] Tworzymy blog, część 4

[PHP|Laravel] Tworzymy blog, część 4 - widoki

maja 01, 2022

Czwarta część poświęcona tworzeniu bloga w Laravelu. W tej części utworzymy ostatni element naszego bloga - widoki. W Laravelu widoki generowane są przez specjalny silnik - Blade, dlatego też każdy widok musi być zapisany z rozszerzeniem .blade.php. Widoki przechowywane są w katalogu resources/views/.

Widok index.blade.php

@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>Posty</h1>

        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <a href="/posts/create" class="btn btn-primary mb-3">Utwórz post</a>

        <table class="table">
            <thead>
                <tr>
                    <th>Tytuł</th>
                    <th>Autor</th>
                    <th>Data</th>
                    <th>Akcja</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($posts as $post)
                    <tr>
                        <td><a href="{{ route('posts.single', ['id' => $post->id]) }}">{{ $post->title }}</a></td>
                        <td>{{ $post->author->name }}</td>
                        <td>{{ $post->created_at }}</td>
                        <td>
                            <a href="/posts/{{ $post->id }}/edit" class="btn btn-sm btn-primary">Edytuj</a>
                            <form action="/posts/{{ $post->id }}" method="POST" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Jesteś pewny?')">Usuń</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4">No posts found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection

Widok single.blade.php

@extends('layouts.app')

@section('title', $post->title)

@section('content')
    <h1>{{ $post->title }}</h1>
    <p>{{ $post->content }}</p>
@endsection

Widok create.blade.php

@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>Utwórz post</h1>

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="/posts" method="POST">
            @csrf
            <div class="form-group">
                <label for="title">Tytuł</label>
                <input type="text" class="form-control" id="title" name="title" value="{{ old('title') }}">
            </div>
            <div class="form-group">
                <label for="content">Treść</label>
                <textarea class="form-control" id="content" name="content" rows="5">{{ old('content') }}</textarea>
            </div>
            <button type="submit" class="btn btn-primary">Utwórz</button>
        </form>
    </div>
@endsection

Widok edit.blade.php

@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>Edycja posta</h1>

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="/posts/{{ $post->id }}" method="POST">
            @csrf
            @method('PUT')
            <div class="form-group">
                <label for="title">Tytuł</label>
                <input type="text" class="form-control" id="title" name="title" value="{{ old('title', $post->title) }}">
            </div>
            <div class="form-group">
                <label for="content">Treść</label>
                <textarea class="form-control" id="content" name="content" rows="5">{{ old('content', $post->content) }}</textarea>
            </div>
            <button type="submit" class="btn btn-primary">Zapisz</button>
        </form>
    </div>
@endsection

Widok app.blade.php

Główny layout bloga możesz dostosować w pliku app.blade.php znajdującym się w katalogu views/layouts/. Możesz w nim dostosować sekcję head i footer bloga. Przykładowy layout:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    
    <title>@yield('title') - {{ config('app.name') }}</title>
</head>
<body>
    <div id="app">
            
            @yield('content')
            
    </div>
</body>
</html>

Na tą chwilę to tyle. Jeśli wszystko zrobiłeś jak przedstawiłem w tym i poprzednich wpisach, powinieneś już mieć możliwość dodania, edycji, usuwania i wyświetlania postów. W kolejnych wpisach zabierzemy się za komentarze.

◢ⓊⓀⓄⒹⓄⓌⒶⓃⒾ◣ blog programistyczny