Laravels MVC-Ansatz erklärt anhand einer kleinen Anwendung Teil 2

Veröffentlicht von Chris - 28. Oktober 2016

Unsere im letzten Teil der Reihe entwicklte Laravel Benutzerverwaltung gibt bis jetzt nur alle Benutzer aus, aber wir wollen noch zusätzliche Funktionen implementieren. Es muss möglich sein die Daten einzelner Benutzer zu ändern oder komplett zu löschen. Ebenso soll es möglich sein neue Benutzer hinzuzufügen. Dazu benötigen wir zuerste ein Package namens „Laravel Collective Forms

laravel-framework

Nachdem wir das Packages erfolgreich integriert haben gehen wir in unsere beim letzten mal anglegte File resources/views/ user/index.blade.php und ändern dies wie folgt ab:

@extends('NameDerSite')

@section('mySection')
<div class="large-9 large-centered columns">
    <h1>Alle Benutzer</h1>
    <p>{!! link_to_route('benutzer.create', 'Neuen Benutzer anlegen') !!}</p>

    @if ($users->count())
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Username</th>
                <th>Password</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($users as $user)
                <tr>
                    <td>{{ $user->username }}</td>
                    <td>{{ $user->password }}</td>
                    <td>{{ $user->email }}</td>
                    <td>{{ $user->phone }}</td>
                    <td>{{ $user->name }}</td>
                    <td>{!! link_to_route('benutzer.edit', 'Bearbeiten', array($user->id), array('class' => 'button')) !!}</td>
                    <td>
                        {!! Form::open(array('method' => 'DELETE', 'route' => array('benutzer.destroy', $user->id))) !!}
                        {!! Form::submit('Löschen', array('class' => 'button alert')) !!}
                        {!! Form::close() !!}
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
    @else
    There are no users
    @endif
</div>
@endsection

Nun haben wir die Links bzw. submit actions mit Hilfe von „Laravel Collective Forms & HTML“ für unsere zu implemntierenden Funktionen angelegt. Wir wollen nun die Funktion einen neuen Benutzer anzulegen implementieren. Im Verzeichnis „user“ legen wir das File „create.blade.php“ mit folgendem Code an:

@extends('NameDerSite')

@section('mySection')
<div class="row">
    <h1>Benutzer anlegen</h1>
    {{ Form::open(array('route' => 'benutzer.store')) }}
    <ul>
        <li>
            {{ Form::label('name', 'Name:') }}
            {{ Form::text('name') }}
        </li>
        <li>
            {{ Form::label('username', 'Username:') }}
            {{ Form::text('username') }}
        </li>
        <li>
            {{ Form::label('password', 'Password:') }}
            {{ Form::password('password') }}
        </li>
        <li>
            {{ Form::label('password', 'Confirm Password:') }}
            {{ Form::password('password_confirmation') }}
        </li>
        <li>
            {{ Form::label('email', 'Email:') }}
            {{ Form::text('email') }}
        </li>
        <li>
            {{ Form::label('phone', 'Phone:') }}
            {{ Form::text('phone') }}
        </li>
        <li>
            {{ Form::submit('Submit', array('class' => 'button')) }}
        </li>
    </ul>
    {{ Form::close() }}

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

Damit haben wir ein Formular, wieder mit Hilfe von „Laravel Collective Forms & HTML“, das die Daten des neuen Benutzer entgegennimmt. Wir wechseln in den UserController (unter app\Http\Controllers\ UserController.php) und ergänzen innerhalb der Funktion create:

return view('user.create');

Damit unsere Eingaben auch gespeichert werden ergänzen wir im UserController innerhalb der Funktion store:

$input = $request->all();
User::create($input);

Außerdem ergänzen wir innerhalb der Funktion store:

return Redirect::route('benutzer.index');

Dadurch schicken wir den Anwender nach dem Klick auf Submit zurück zur Startseite. Damit das funktioniert müssen wir dem UserController die Klasse Redirect noch bekannt machen, dazu unter der letzten Import-Anweisung:

use Illuminate\Support\Facades\Redirect;

Darüber hinaus müssen wir noch unserem User Model mitteilen, dass es mehere Daten entgegen nehmen darf, dazu im im User Model (app\User.php) das Array $fillable ändern:

protected $fillable = ['username','name', 'email', 'password', 'phone'];

Nun können wir neue Benutzer anlegen. Leider ist es noch möglich, dass wir Benutzer ohne Eingaben anlegen können. Es wäre hier gut,, wenn wir eine Validierung hätten, die prüft ob alle Felder ausgefüllt wurden. Hierfür gibt es in Laravel die Request-Klasse unter app/Http/Requests. Über die CMD/Terminal legen wir uns einen Request an:

php artisan make:request UserRequest

In der Klasse app\Http\Requests\UserRequest.php ändern wie zur erst in der Funktion authorize Rückgabe auf true; In der Funktion rules können wir innerhalb des Rückgabe Arrays folgende Regeln anlegen:

'username' => 'required‘, 'name' => 'required', 'password' => 'required',
'email' => 'required|email', 'phone' => 'required|numeric‘

Wenn dies erledigt ist kehren wir in den UserController zurück und importiren dort unsere neue Klasse UserRequest per Import:

use App\Http\Requests\UserRequest;

und in der store Funktion ändern wir den Typ des zu übergebenden Parameter in UserRequest ab:

public function store(UserRequest $request){
    $input = $request->all();
    User::create($input);
    return Redirect::route('benutzer.index');
}

Standardmäßig liefert Laravel die Error-Texte in englisch. Um diese zu übersetzen kann man die UserRequest Klasse um die Funktion messages erweitern (siehe https://laravel.com/docs/5.2/validation#custom-validation-rules) . Nachdem wir jetzt Benutzer anlegen können, wollen wir nun Benutzer bearbeiten können. Im Verzeichnis „user“ legen wir das File „create.blade.php“ mit folgendem Code an:

@extends('NameDerSite')

@section('mySection')
<h1>Edit User</h1>
{{ Form::model($user, array('method' => 'PATCH', 'route' => array('benutzer.update', $user->id))) }}
<ul>
    <li>
        {{ Form::label('username', 'Username:') }}
        {{ Form::text('username') }}
    </li>
    <li>
        {{ Form::label('password', 'Password:') }}
        {{ Form::text('password') }}
    </li>
    <li>
        {{ Form::label('email', 'Email:') }}
        {{ Form::text('email') }}
    </li>
    <li>
        {{ Form::label('phone', 'Phone:') }}
        {{ Form::text('phone') }}
    </li>
    <li>
        {{ Form::label('name', 'Name:') }}
        {{ Form::text('name') }}
    </li>
    <li>
        {{ Form::submit('Update', array('class' => 'button success')) }}
        {{ link_to_route('benutzer.show', 'Cancel', $user->id, array('class' => 'button alert')) }}
    </li>
</ul>
{{ Form::close() }}

@if ($errors->any())
    @foreach($errors->all() as $error)
        <li>
            <p class="error">{{ $error }}</p>
        </li>
    @endforeach
@endif
@stop

Damit haben wir ein Formular, wieder mit Hilfe von „Laravel Collective Forms & HTML“, das die Daten des Benutzer beinhaltet und die Abänderung zulässt. Wir wechseln in den UserController (unter app\Http\Controllers\ UserController.php) und ergänzen innerhalb der Funktion edit:

$user = User::find($id);
if (is_null($user)){
    return Redirect::route(‘benutzer.index');
}
return view('user.edit', ['user' => $user]);

Außerdem ergänzen wir im UserController innerhalb der Funktion update:

$input = $request->all();
$user = User::find($id);
$user->update($input);
return Redirect::route('benutzer.show', $id);

Wie schon ersichtlich schicken wir nun unseren Anwender nach dem bearbeiten eines Benutzers an benutzer.show, diese Funktion müssen wir aber noch anlegen. Dazu ergänzen wir im UserController innerhalb der Funktion show:

$user = User::find($id);
if (is_null($user)) {
    return Redirect::route(‚benutzer.index');
}
return view('user.show', ['user' => $user]);

und legen im Verzeichnis „user“ das File „show.blade.php mit folgendem Code an:

@extends('NameDerSite')

@section('mySection')
<div class="large-9 large-centered columns">
    <h1>Benutzer wurde erfolgreich bearbeitet</h1>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Username</th>
                <th>Passwort</th>
                <th>E-Mail</th>
                <th>Telefon</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{ $user->username }}</td>
                <td>{{ $user->password }}</td>
                <td>{{ $user->email }}</td>
                <td>{{ $user->phone }}</td>
                <td>{{ $user->name }}</td>
            </tr>
        </tbody>
    </table>
    {!! link_to_route('benutzer.index', 'Zurück zur Übersicht') !!}
</div>
@endsection

Wir sind fast fertig, es fehlt nur noch die Funktion zum Benutzer löschen. Diese ist schnell erledigt, da wir hier bereits direkt an eine route vewerweisen:

{!! Form::open(array('method' => 'DELETE', 'route' => array('benutzer.destroy', $user->id))) !!}

Daher ergänzen wir im UserController innerhalb der Funktion destroy:

User::find($id)->delete();
return Redirect::route('benutzer.index');

Damit ist unsere kleine Benutzer-Verwaltung fertig! Die Laravel Dokumentation kann hier nachgelesen werden: https://laravel.com/docs/5.5

Das könnte Dich auch interessieren

UX Design bei Formularen

Ein großes Thema im Bereich UX Design sind Formulare. So stellt man sich schnell die Frage:

Design Thinking – Wozu das ganze Denken?

Der Begriff Design Thinking wird oft genannt, wenn es um Innovation und nutzerzentrierte Digitalprodukte geht. Aber was genau ist damit gemeint und wann ist es ...

Warum du dich für die Media Favoriten entscheiden solltest

Du bist auf der Suche nach einer neuen Herausforderung oder befindest dich noch im Studium? Zufällig bist du auf den Internet Halunken Blog gestoßen und du ke...