Laravel - Zbuduj Aplikację Mikroblog od Podstaw

Rozpoczynamy pracę z PHP 8. Uruchomienie servera PHP i stworzenie pierwszego pliku oraz skryptu PHP

W PHP 8 zamiast switch-a możemy użyć dużo prostszego wyrażenia match

Dzięki nazwanym argumentom funkcji nie musimy pamiętać o kolejności argumentów oraz możemy pominąć argumenty opcjonalne

Zamiast deklarować zmienne klasowe w standardowy sposób, możemy deklarować je bezpośrednio jako argumenty konstruktora

Dodatkowa instrukcja warunkowa w postaci znaku zapytania przy wywołaniu funkcji lub zmiennych

Możemy deklarować kilka naraz typów danych dla jednego argumentu funkcji lub zwracanej wartości przez funkcję

Kilka nowych funkcji operujących na danych typu string

Dołączone do stringu za pomocą konkatenacji wyrażenie matematyczne jest traktowane jako wyrażenie matematyczne a nie jako string jak przed wersją PHP 8

W PHP 8 tablice mogą być indeksowane od liczby ujemnej

Instalacja Laravela w systemie Linux oraz Windows z użyciem Dockera

Instalacja Laravela w systemie Linux oraz Windows z użyciem XAMPP-a

Instalacja paczki Laravel Breeze, dzięki której nie musimy tworzyć od podstaw systemu logowania i rejestracji jak również panelu administracyjnego

Stworzenie kilku ścieżek routingu i ich obsługi – narazie w routingu zwracamy tylko proste teksty na stronę

Stworzenie kilku plików widoków i zwrócenie ich w kontrolerze zamiast bezpośrednio w definicji routingu. Użycie konsoli do tworzenia kontrolerów

Rozpoczynamy budowę szablonu HTML ostylowanego z użyciem frameworka TailwindCSS. Zabezpieczenie routów (middleware)

Projekt Hamburger Icon i obsłużenie go JavaScriptem tak aby otwierać i zamykać menu na urządzeniach mobilnych

Dwa kolejne elementy do szablonu w TailwindCSS: powiadomienie o nowym poście oraz stopka

Kolejny element szablonu: wyszukiwarka postów. Dwa przykładowe wyniki wyszukiwania aby zobaczyć jak aplikacja będzie finalnie działać

Dodanie kolorów, efektów po najechaniu kursorem, odstępów między literami – wszystko w TailwindCSS

Tworzymy kolejną sekcję szablonu aplikacji – lista postów na stronie

Kolejne elementy szablonu – ikony SVG do edycji i usuwania posta bloga

Utworzymy plik template-u z częścią wspólną dla wszystkich podstron (wspólny nagłowek, stopka i inne). Podstrona widok szczegółów posta

W naszej aplikacji będzie można śledzić autora posta oraz wyświetlać informację kogo śledzimy

Ikony SVG do funkcjonalności polubień w kilku wersjach (klikalne do polubień/odlubień i nieklikalne do informacji czy użytkownik lubi posta czy nie)

Podstrona do edycji posta ze stylami TailwindCSS

Podstrona do dodawania nowego posta ze stylami TailwindCSS

Sekcja śledzeni użytkownicy oraz polubione posty w panelu administracyjnym

Sekcja edycji avatar-u użytkownika w panelu administracyjnym

Framework Alpine JS wykorzystamy w Laravelu do prostych efektów na stronie. Na początek sterowanie wyświetlaniem powiadomień na górze ekranu

Gdy zostaną zapisane dane w bazie danych np. nowy obrazek (ścieżka) to wyświetlimy komunikat “Saved”, który zniknie po 3 sekundach – efekt z użyciem Alpine JS

Sekcja polubione posty i śledzeni użytkownicy w panelu administracyjnym. Alpine JS do przełączania widocznych treści bez przeładowania całej strony

Wykorzystamy nazwane slot-y do dynamicznej zmiany nazwy zakładki przeglądarki w zależności od wczytanej podstrony (tag title)

Dzięki komponentom Blade unikamy powtarzania kodu oraz kod jest czytelniejszy. Przeniesiemy do komponentu kod formularza do wylogowania oraz ikony SVG

Przeniesienie ikonek do polubienia/odlubienia do komponentów. Użycie atrybutów komponentów aby odróżnić ikonki

Dzięki funkcji inlcude w plikach widoków możemy ładować inne pliki Blade (tzw. Partialsa) dzięki czemu możemy mieć bardziej uporządkowany i przejrzysty kod

Poprawienie linków do strony głównej

Wykorzystanie fasady App do ustawienia języka aplikacji w zależności od parametru url

Link do wylogowania widoczny tylko dla użytkowników zalogowanych. Zabezpieczenie formularzy tokenem anty CSRF

Walidacja formularza do tworzenia nowego posta. Dynamiczne wyświetlanie czerwonej ramki pola w przypadku błędu

Dodanie przekierowania do listy wszystkich postów jeśli walidacja będzie poprawna

Wysyłany plik powienien być typem obrazka i mieć nie więcej niż 2Mb wielkości

Wykorzystamy mechanizm sesji do sterowania komunikatem o poprawnym zapisany obrazka na dysku

Stworzenie tabeli posts za pomocą migracji i wykonanie podstawowych operacji na bazie danych z wykorzystaniem modelu Post i narzędzia Tinker

Wyszukiwanie wszystkich postów, jednego posta po wskazanym id, tworzenie, edytowanie posta oraz jego usuwanie

Użytkownik może mieć wiele postów na blogu a jeden post należy do jednego użytkownika. Definiowanie relacji w modelach User oraz Post

Wygenerujemy automatycznie przykładowe posty na stronę – każdy użytkownik będzie miał po 5 postów

Linki do edycji i usuwania posta wyświetlamy tylko dla autora tego posta

W Laravelu wykonanie paginacji rezultatów z bazy danych to zaledwie dwa wiersze kodu!

Eager Loading – ładowanie dodatkowych danych z bazy danych aby ograniczyć liczbę zapytań podczas pętli foreach w widoku (lista postów)

Zastosowanie Route Model Binding aby nie musieć ręcznie wyszukiwać posta do wyświetlenia

Uzupełnienie widoku do edycji posta oraz funkcji do zapisania edytowanego posta w bazie danych

Zastosujemy Route Model Binding do znalezienia posta do usunięcia

Wyświetlimy nie tylko posty wszystkich użytkowników ale również konkretnego użytkownika po zadanym id

Użytkownik może mieć jeden obrazek (avatar), a obrazek należy do jednego użytkownika

Po zapisaniu ścieżki do obrazka w bazie danych (poprzednia lekcja) czas na fizyczne zapisanie go na serwerze

Użytkownik może śledzić wielu użytkowników a ten sam użytkownik może być śledzony przez innych

Zalogowany użytkownik może śledzić innego (autora posta) – wykorzystanie funkcji attach() i detach() do relacji wiele do wielu

Uzupełnienie pliku widoku o kod umożliwiający cofnięcie śledzenia użytkownika

Kolejna relacja wiele do wielu ale tym razem polimorficzna – użytkownik może polubić wiele typów obiektów (w naszym przypadku tylko posty bloga). Stworzenie migracji

Wykorzystanie metod morphToMany oraz morphedByMany do zdefiniowania relacji do polubień

Komponenty LiveWire umożliwią interakcję z aplikacją bez przeładowania strony – np. po kliknięciu polubienia nie nastąpi przeładowanie strony. Instalacja komponentu

Komponent LiveWire powiązany jest z klasą, której zmienne i funkcje są odrazu dostępne w komponencie

Aby komponent działał prawidłowo gdy posiada te same elementy (np. linki) musimy je rozróżnić za pomocą atrybutu wire:key

Po wpisaniu ciągu znaków w wyszukiwarce, wyniki pojawią nam się w czasie rzeczywistym dzięki LiveWire – stworzenie klasy i widoku komponentu

Zastosowanie atrybutu wire:model do wyszukiwania w czasie rzeczywistym

Ikonki polubienia/odlubienia będą w różnych wersjach: klikalnej, nieklikalnej jako informacja o stanie polubienia itd.

Użycie funkcji count na relacji do policzenia polubień/niepolubień

Użycie funkcji attach i detach do zapisania relacji wiele do wielu

W panelu administracyjnym będzie dostępna zakładka z listą wszystkich polubionych postów przez zalogowanego użytkownika

Posortujemy posty od największej liczby polubień do najmniejszej

Tabela pivot to tabela pośrednicząca w relacji wiele do wielu. Pobieranie danych z pivot

Wyszukiwanie fulltextowe dla kolumn title oraz content

Tylko autor posta może edytować swój post