Laravel 5.5 CRUD lista zadań część 1

Przygotowanie szablonu

W tym kursie wykonamy prostą aplikację typu CRUD (create, read, update, delete) w popularnym na całym świecie frameworku języka PHP Laravel w wersji 5.5. Aplikacja „Moja Lista Zadań” będzie wyświetlać listę zadań użytkownika pobieraną z bazy danych. Zadanie będzie można dodać, usuwać oraz zmieniać stan na wykonane lub niewykonane. 

Użyjemy w tym celu gotowego szablonu aplikacji typu lista zadań dostępnego pod adresem w3schools. Serwisu tego nie polecam jako jedynego źródła wiedzy, ale inspiracje czy wzory szablonów można posiąść. Jest to szablon gotowy do wykonania aplikacji typu SPA (single page application). W tym przypadku jednak dostosujemy ten szablon do typowej aplikacji webowej tak jak jest to w przypadku większości stron internetowych, czyli każda strona wczytuje się osobno w przeglądarce internetowej. W tym celu wytniemy z szablonu cały kod javascript oraz dodamy formularz do dodawania nowego zadania do wykonania jak również dodamy link z krzyżykiem (x) do usuwania zadania. Po zmianach szablonu kod powinien wyglądać więc tak:

<!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>

<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>


</body>
</html>

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

W następnej lekcji kursu zainstalujemy Laravela oraz stworzymy migrację, czyli zaprojektujemy bazę danych oraz zapiszemy definicję tej bazy w kodzie Laravela, tak aby nie było potrzeby ręcznego jej tworzenia przy pomocy narzędzi typu PhpMyAdmin. Obejrzyj ten kurs Laravel na Youtube. 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 *