Laravel 5.5 CRUD lista zadań część 3

Widoki, routing

Po instalacji Laravela mamy jeden przykładowy widok welcome.blade.php w folderze resources/views. Nie będziemy go potrzebować. Blade w nazwie pliku informuje Laravel, że używamy jego systemu szablonowego, tzn. nie używamy w widokach czystego PHP tylko szablonowych zamienników.

We wspomnianym folderze utworzymy folder todo na nasze pliki widoków, które w tym przypadku będą tylko dwa: layout.blade.php  oraz index.blade.php. Ten pierwszy jest szablonem, który przechowuje niezmienny kod dla każdej podstrony aplikacji Laravel, jak na przykład sekcja head dokumentu html, znacznik body, a ten drugi zawiera kod odpowiedzialny za wyświetlenie listy zadań. Z pliku szablonu wytniemy całą zawartość body i zapiszemy do layout.blade.php:

<!DOCTYPE html>
<html>
<head>
<style>
body {
 margin: 0;
 min-width: 250px;
}

/* Include the padding and border in an element's total width and height */
* {
 box-sizing: border-box;
}

/* Remove margins and padding from the list */
ul {
 margin: 0;
 padding: 0;
}

/* Style the list items */
ul li {
 cursor: pointer;
 position: relative;
 padding: 12px 8px 12px 40px;
 list-style-type: none;
 background: #eee;
 font-size: 18px;
 transition: 0.2s;
 
 /* make the list items unselectable */
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
 background: #f9f9f9;
}

/* Darker background-color on hover */
ul li:hover {
 background: #ddd;
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
 background: #888;
 color: #fff;
 text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
 content: '';
 position: absolute;
 border-color: #fff;
 border-style: solid;
 border-width: 0 2px 2px 0;
 top: 10px;
 left: 16px;
 transform: rotate(45deg);
 height: 15px;
 width: 7px;
}

/* Style the close button */
.close {
 position: absolute;
 right: 0;
 top: 0;
 padding: 12px 16px 12px 16px;
}

.close:hover {
 background-color: #f44336;
 color: white;
}

/* Style the header */
.header {
 background-color: #f44336;
 padding: 30px 40px;
 color: white;
 text-align: center;
}

/* Clear floats after the header */
.header:after {
 content: "";
 display: table;
 clear: both;
}

/* Style the input */
input {
 border: none;
 width: 75%;
 padding: 10px;
 float: left;
 font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
 padding: 10px;
 width: 25%;
 background: #d9d9d9;
 color: #555;
 float: left;
 text-align: center;
 font-size: 16px;
 cursor: pointer;
 transition: 0.3s;
}

.addBtn:hover {
 background-color: #bbb;
}
</style>
</head>
<body>
 
 @yield('content')

</body>
</html>

W sekcji body napisaliśmy jak widać kod systemu szablonowego blade @yield('content'). Pobierze on konkretny widok, wywołany w kontrolerze. W przypadku tej aplikacji będziemy mieli tylko jeden widok – listę zadań, którą utworzymy w pliku index.blade.php i wkleimy do niego zawartość początkowej sekcji body z szablonu:

@extends('todo.layout')

@section('content')

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

<ul id="myUL">
 <li>Hit the gym</li>
 <li class="checked">Pay bills<a href="" class="close">x</a></li>
 <li>Meet George<a href="" class="close">x</a></li>
 <li>Buy eggs<a href="" class="close">x</a></li>
 <li>Read a book<a href="" class="close">x</a></li>
 <li>Organize office<a href="" class="close">x</a></li>
</ul>

@endsection

Jak widać kod ten jest uzupełniony o elementy systemu szablonowego Laravel: @extends('todo.layout'), który informuje z którego layoutu korzysta widok,  @section('content') początek widoku, @endsection koniec widoku. Widok w szablonie zostanie pobrany wcześniej napisaną instrukcją @yield('content').

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

Routing w Laravel

Pora na routing, czyli obsłużenie akcji użytkownika, który klika w linki na stronie. W routingu określamy co ma się wydarzyć po kliknięciu w link, np zapisać nowe zadanie. W Laraverze można zrobić to na kilka sposobów. Routing zlokalizowany jest w pliku routes/web.php. Jest tam przykładowy routing, który obsługiwany jest za pomocą funkcji anonimowej. Nie będzie nam potrzebny. W naszym przypadku obsłużymy routing za pomocą kontrolera, który stworzymy w następnej lekcji. Kontroler nazwiemy ToDoController na cześć naszej aplikacji. Pierwszy argument w metodzie routingu to adres linku strony www, na który wchodzimy, a drugi argument to określenie tego co ma się wydarzyć po wejściu pod ten link. W większości przypadków kontroler wczyta nam żądaną stronę do wyświetlenia. W naszym przypadku plik routingu we framewroku Laravel będzie wyglądał tak:

Route::get('','ToDoController@index');
Route::post('dodaj','ToDoController@create')->name('create');
Route::get('zmien/{id}','ToDoController@update')->name('update');
Route::get('usun/{id}','ToDoController@delete')->name('delete');

Poszczególne metody kontrolera jak widać oddzielamy znakiem @ od nazwy kontrolera. I tak na przykład adres dodaj będzie zapytaniem typu POST, którym zapiszemy nowe zadanie do wykonania, kod odpowiedzialny za tą czynność zostanie zapisany w metodzie create() kontrolera ToDoController.  Ostatnia metoda w łańcuchu metod to name(), która umożliwi nam odwołanie się do routingu w plikch widoków za pomocą funkcji helpera route(), której użyjemy np. w atrybucie action formularza html. Metoda name() nie jest obowiązkowa. W następnej lekcji stworzymy model dla naszej aplikacji Laravel, który będzie komunikował się z bazą danych. Obejrzyj ten kurs Laravel na Youtube. Poprzednia lekcja. Następna 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 *