Laravel 5.5 CRUD lista zadań część 6

Widok

W ostatniej lekcji kursu frameworka Laravel uzupełnimy plik widoku listy zadań index.blade.php. Pierwsza zmiana w kodzie polega na uzupełnieniu kodu formularza o atrybut action, któremu nadajemy wartość z helpera route() zwracającego nam link do obsłużenia akcji dodania nowego zadania. W systemie szablonowym Laravel zawartość zmiennych lub wartości zwracanych przez funkcję wyświetlamy za pomocą pary podwójnych nawiasów klamrowych {{ ... }}. Na końcu formularza dodaliśmy również za pomocą systemu szablonowego Laravel metodę csrf_field(), która doda nam do formularza pole typu hidden z wartością tokenu anty xsrf zabezpieczającego przed tego typu atakami na strony internetowe. Ostatnia zmiana w kodzie polega na dodaniu pętli foreach, która wypisze nam elementy li listy uzupełnione o dane zadań do wykonania z bazy danych. Drugi argument funkcji route() to id aktualnego zadania do wykonania, abyśmy wiedzieli które zadanie edytujemy lub usuwamy. W systemie szablonowym Laravel pętle foreach i instrukcję warunkową for poprzedzamy i kończymy znakiem @. Jak widać w kodzie, jeżeli zadanie jest wykonane, to do elementu li dodajemy klasę css o nazwe checked, która odpowiednio ostyluje nam wykonane zadanie przekreślając je i dodając znak „ptaszek” oznaczający wykonanie zadania:

@extends('todo.layout')

@section('content')

<div id="myDIV" class="header">
 <h2 style="margin:5px">My To Do List</h2>
 
 <form method="POST" action="{{ route('create') }}">
 <input type="text" name="task" id="myInput" placeholder="Title...">
 <input type="submit" value="Add" class="addBtn">
 {{ csrf_field() }}
 </form>

</div>

<ul id="myUL">
 
 @foreach($tasks as $task)

<li onclick="location.href='{{ route('update',['id'=>$task->id]) }}'" @if( $task->status ) class="checked" @endif>{{ $task->content }}<a href="{{ route('delete',['id'=>$task->id]) }}" class="close">x</a></li>

@endforeach

</ul>

@endsection

Zostań Profesjonalistą W Tworzeniu Aplikacji Webowych! Zapisz Się Na Kurs Laravel nauczysz się również tworzyć aplikacje hybrydowe na smartfony

Obejrzyj ten kurs Laravel na Youtube.

Poprzednia lekcja.

zapisz się na kurs Laravela >>>> lub program partnerski
Share

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *