Jak zrobić panel admina w PHP i Laravelu, a przy tym się wiele nie narobić?
Zdradzę Ci dzisiaj sposób, z którego sam korzystam i którym rozpoczynam praktycznie każdy projekt komercyjny.
Sprawdź najnowszy film instruktażowy:
Poniżej, dla chętnych, transkrypcja z video:
Cześć! Dzisiaj pokażę Ci w jaki sposób ja tworzę panele administracyjne od zera i wykorzystuję później stworzony panel, żeby dalej rozwijać aplikację Laravel u, a wykorzystamy do tego narzędzie, które nazywa się Quick Admin Panel, a być może go znasz. o ile nie, to za chwilę zobaczysz, iż jest to mega potężne narzędzie.
A o ile znasz gościa, który się nazywa Povilas Korop to jest właśnie autor tego narzędzia. Povilas Korop prowadzi kanał i bloga Laravel Daily. Więc o ile już masz styczność z Laravelem od jakiegoś czasu w pewno natknąłem się na jego filmy czy też artykuły w sieci. OK, to nie przedłużając, przejdźmy od razu na stronę.
Logowanie na stronę Quick Admin Panel
Dobra, to ja się zaloguję na swoje konto. Ty oczywiście o ile nie masz konta to masz przycisk Trywialnie free, czyli załóż swoje darmowe nowe konto. Nie będziesz musiał nic płacić. Możesz tworzyć cały panel. Jakby w stu procentach od zera, bez żadnych opłat. Jedynie co w momencie kiedy będziesz chciał pobrać kod do siebie na komputer, to już wtedy albo musisz wykupić licencję na pojedynczy projekt, albo może wykupić Core, albo możesz wykupić roczną subskrypcję.
Wtedy masz liczbę projektów bez limitu i z takiej rocznej subskrypcji ja właśnie korzystam. Dobra. Logujemy się. No i tu widzisz, trochę tych aplikacji się stworzyło. Co nie zmienia faktu, że. Z racji tego, iż subskrypcja jest bez limitu, to pewnie jeszcze wiele tych aplikacji stworzę. I tutaj mamy do wyboru. W momencie kiedy kliknę New Project mamy do wyboru trzy różne konfiguracje. Ta jest klasyczna, najstarsza, czyli po prostu wszystko robione w Laravel u + jQuery jako taki powiedzmy usprawniać naszego widoku. Podejście dość oldskulowe, natomiast ma jedną dużą zaletę, o której za chwilę powiem. Później mamy panel oparty o wodę jasna + Laravel API pod spodem. No i najnowszy hit, iż tak powiem najnowsze osiągnięcie trendów jest to Live fire + fluid, więc oczywiście zależy w czym czujesz się swobodnie. W czym chciałbyś stworzyć ten panel administracyjny, to wybierz tutaj taką konfigurację. Natomiast ja wybiorę ten pierwszy z racji tego, iż samo tworzenia panelu admina nie będzie się niczym różniło. Natomiast ten pierwszy możemy sobie przeklikać tak jakby w wersji demo przed pobraniem kodu.
Tych dwóch niestety nie możemy w ten sposób przetestować, dlatego skorzystamy najpierw z Laravel + jQuery. Żebyśmy mogli sprawdzić jak wygląda ten panel, który właśnie tworzymy. Ja będę chciał stworzyć aplikację, która będzie wspierała mój proces zapamiętywania prezentów i przypisywania tych prezentów do konkretnych osób. Także za chwilę opowiem więcej na temat samego projektu. Natomiast żeby utworzyć na starcie projekt, zróbmy sobie nazwę projektu Prezenty. I tutaj możemy od razu wybrać jakieś predefiniowane. Preset, o ile tak to można nazwać, Czyli po prostu o ile wybierzemy, iż to jest np. Basic, CRM czy product management, czy też asset management, to część już gotowych obiektów będzie dodana do panelu. Natomiast ja wybiorę na starcie pusty panel. Tu oczywiście możesz się pobawić wedle własnego uznania i potestować różne konfiguracje. Następnie wybieramy wersję Laravel a. Będzie to wersja dziewiąta najnowsza, gdzie trzymamy modele naszej aplikacji. Dawniej w Laravel u jeszcze bodajże 7. Domyślna lokalizacja to była po prostu wewnątrz folderu app, jednak w folder app models dodaje dodatkową warstwę uporządkowania tego naszego kodu, szczególnie o ile tych modeli faktycznie rosło i rosło, więc dużo wygodniej jest to trzymać w osobnym folderze.
Więc tak też tutaj wybiorę. Możemy wybrać English, a możemy poszukać czy jest polski już w pełni przetłumaczony Jest, więc możemy sobie wybrać od razu język polski. To jest język docelowy tego panelu administracyjnego. Następnie format daty. Dla mnie jest ok. No i tutaj mamy trzy, trzy szablony wizualne do wyboru. Zobaczmy sobie te demka. Raz, dwa, trzy, więc nasz szablon może wyglądać. Czy nasz panel może wyglądać mniej więcej w ten sposób? Lub w ten sposób. Też tutaj mamy demko, natomiast widzę, że. Nie mogę znaleźć na starcie od razu dema, więc to co zrobię to po prostu stworze w tym kraju i zobaczymy na żywo jak to wygląda. I proszę mamy już stworzony pierwszy zalążek naszych obiektów i jest to panel User Management. Wewnątrz panelu User Management mamy użytkowników, mamy ich role i mamy ich. Przywileje czy pozwolenia. Przepraszam. Uprawnienia po polsku. OK. To co my tutaj mamy? Przede wszystkim możemy stworzyć nowy skrót menu Item Non New Item i Parent new Item. Nie wiem czy wiesz co to jest za skrót.
Skrót? Ale jest to bardzo często używany skrót właśnie w środowisku programistycznym. Jest to skrót akronim od czterech najczęściej używanych akcji na każdym obiekcie biznesowym, czyli Create, Read, Update i Delete, czyli stwórz, odczytaj z, aktualizuj i usuń. Czyli po prostu o ile sobie wyobrazi taką najzwyklejszą tabelkę, iż masz rekordy i do każdego rekordu masz opcję zmodyfikowania danych, usunięcia tego rekordu, zobaczenia ich i generalnie dodania nowego rekordu to właśnie jest tabelka typu skrót i każdą taką. Każdy taki element możemy stworzyć właśnie w postaci Clouda. Cannon Cloud Item to będzie po prostu jakaś dowolna akcja, która po kliknięciu w te dane przycisk nam się wykona np. otwórz plik z dokumentacją i wtedy to będzie pojedynczy link do jakiegoś zewnętrznego resource. Także nam. Tutaj zależy przede wszystkim na tym, żeby stworzyć jak najwięcej tych grup na new items, bo to zaoszczędzi nam masę pracy już bezpośrednio w kodzie Laravel owym. Jak widzisz domyślnie w każdym nowym tworzonym panelu mamy od razu zakładkę User Management i to mamy jako typ Parent. I to polega po prostu na tym, iż tak jak teraz w tym momencie to widzisz prezenty generated code to jest tak jakby nazwa sekcji, czyli nasza sekcja User Management posiada pod spodem trzy skrót.
I chciałbym Ci teraz w ogóle pokazać po pierwsze jak wygląda taki panel, a po drugie co się kryje pod każdym skrótów. Weźmy sobie np. skrót o nazwie Users i wejdę teraz do jego edycji. OK. Widzimy tu nazwę modelu. Tytuł tego modelu oraz parent menu, czyli w którym miejscu po lewej stronie w menu będzie się znajdował ten danych wśród. No i widzimy pod spodem. Wszystkie pola, które dany model posiada w sobie. Czyli oczywiście mamy tutaj ID. Które jest typu auto ing remont standard dla wszystkich modelu, ale też mamy name email, które są tekstem typu text typu email. Mamy email every white hat czyli kiedy został zweryfikowany. I tu akurat mamy. Zmienną typu DateTime. Mamy password i mamy relacje, relacje do ról I nie jest to zwykła relacja, tylko jest to relacja do wielu, czyli tak naprawdę wiele, do wielu. Jeden użytkownik może mieć wiele ról, ale też jedna rola może być przyporządkowana większej ilości użytkowników, więc po prostu każdy użytkownik może mieć jedną lub więcej ról, a może też nie mieć żadnej.
No i standardowe jeszcze 3 datetime, czyli kiedy rekord został stworzony, zaktualizowany i usunięty, bo domyślnie. Domyślnie dobrą praktyką jest w ogóle nie usuwać danych z bazy danych, bo o ile wykonasz delete choćby szło, to on faktycznie znika z bazy. Dobrą praktyką jest po prostu trzymać kolumnę DAT. I w tym momencie, kiedy chcesz coś usunąć, po prostu wrzucasz tutaj datę. o ile wrzuciłeś datę delete dat np. na dzisiaj, na teraz, to znaczy, iż ten rekord jest już usunięty i nie stracisz historii powiązań z innymi tabelami. Nie stracisz danych w tym rekordzie. Natomiast aplikacja będzie wyszukiwać tylko rekordów, które w kolumnę delete dat mają ustawioną jako NULL, czyli nie zostały usunięte. To tak fachowo nazywa się soft do lic. OK. Więc możemy sobie takie dowolne pola tu dodawać. No i widzisz, iż mamy też przycisk Add New Field. Możemy wybierać między. Różnymi typami tego pola. Możemy podać nazwę kolumny w bazie danych na belkę, która będzie się wyświetlać jako tytuł tego modelu. Czy to jest pole optional czy required, czyli czy jest wymagane, czy jest opcjonalne albo czy jest wymagane.
I jeszcze dodatkowy warunek, iż musi być unikatowe w skali całej. Tabeli. Dobrze, tu możemy dodać jakiś tip, czyli taki tekst, który będzie się pod który będzie się pojawiał jako podpowiedź przy wypełnianiu nowego formularza. No i też gdzie chcemy, żeby ten nasz model był widoczny, bo na przykład możemy chcieć pokazywać go tylko w formularzu do tworzenia, a niekoniecznie do edycji, czy też wyświetlać go w kompletnej liście. To do tego sobie przejdziemy później i to jeszcze Extra options. OK, nie będę teraz nic dodawał, bo chcę Ci pokazać jak w ogóle taki panel administratora wygląda. I to co możemy zrobić to tutaj na górze po lewej stronie masz przycisk Preview Panel i właśnie ten preview panel działa tylko w oparciu o Laravel + jQuery. Tamte dwa bardziej zaawansowane twory niestety nie pozwalają tworzyć takich demek w locie, które możesz później komuś pokazać przed ich publikuj, przed ich publikowaniem i budowaniem gdzieś na własnym serwerze. Także zanim przejdę teraz do preview, dodajmy jeszcze jakiegoś jednego naszego króla. I niech to będzie krótko o nazwie. Prezent.
No i nie ma żadnego rodzica. I tu ustawiamy soft delete. jeżeli to ustawimy pojawia się kolumna DAT. I dodajmy jakieś nowe pole. Niech to będzie po prostu name, czyli database column name, tabelka name. Nie jest wymagane. Niech każdy prezent musi mieć swój name i tu resztę zostawiam tak jak było. Zapisuję. I zapisuje Gruda. OK, mamy teraz nasze gifty, mamy user management. Pod spodem widzisz, iż kod się generuje. I tak jak mówiłem wcześniej, przeniosę sobie kamerkę na prawo. Tak jak mówiłem wcześniej, żeby pobrać ten kod wygenerowany, bo to co my robimy teraz to my tworzymy ten panel admina na nasze potrzeby, później dalszego rozwoju. Czyli to jest taki nasz quick start na zasadzie mam aplikację do stworzenia, mam bardzo powtarzalne taski na zasadzie wiem jakie mam obiekty biznesowe, czyli mam użytkowników. Użytkownicy mają role, mam prezenty, mam osoby, które chcę obdarowywać. I nie chcę manualnie tego wszystkiego pisać, więc siadam sobie tutaj do takiego narzędzia np. jakim jest Quake Admin Panel i wykrzykuje sobie co tak naprawdę chce mieć w mojej aplikacji.
I od razu mam do tego gotowy panel administracyjny do zarządzania tymi danymi. Później na bazie już działającej aplikacji także ok, kod nam się zapisał. Wejdźmy sobie do prawego panela. I po kliknięciu Preview Panel mamy informację, iż pliki są deklarowane. Tu pojawi się za chwilę informacja. I jakie komendy tam pod spodem się wykonują. O widzimy, iż już jest composer install, także lada moment kod będzie gotowy. o ile będzie gotowy dostaniemy tymczasowy adres URL w domenie Quick admin Panel, na którym będzie można przeklikać cały nasz gotowy panel administratora. Tutaj właśnie widzisz masz. Tymczasowe dane do logowania. Czyli admin admin i hasło jest password. Klikamy Continue. No i widzimy mamy już panel do zalogowania się do naszych prezentów, czyli mamy admin admin i hasło password. Jestem i widzisz po lewej stronie jak wygląda ten nasz korpus. Czyli mamy stronę główną, gdzie tu będziemy mogli edytować nasz dashboard. Mamy zakładkę Użytkownicy i wewnątrz tych użytkowników mamy uprawnienia, role oraz dodawanie użytkowników. Czyli nagłówek nazywa się tak samo jak jedna z opcji. No i mamy te gifty czyli lista gift dodaj gift.
Mogę tutaj sobie dodać nowego gift a. I mogę przejrzeć np. użytkowników. Z racji tego, iż użytkownika już mamy jednego w bazie i jest nim użytkownik admin to widzi, iż jego nam jest admin i mail. Admin admin Comment. Tutaj widzisz role, które ma przypisane oraz dodatkowe akcje, które możemy na tym użytkowniku wykonać. Dodajmy sobie nowego użytkownika. Niech to jest np. Marcin, niech to jest Marcin. Wersja lub L podała jakieś moje hasło. I zobacz, to jest to, o czym mówiłem w relacji jeden do wielu. Możesz tu wybrać sobie relację wiele do wielu, bo tutaj mamy relacje billing. Czyli to jest relacja jeden do wielu, iż jedna rola może być przyporządkowana użytkownikowi. o ile tak, możesz tu wybrać tylko jedną opcję z drop Downa. A o ile masz long to many, czyli obiekt może należeć do wielu obiektów tych relacyjnych, to masz taki bardzo wygodny drop down, gdzie możesz klikać wiele opcji. Czyli np. mój Marcin może być zarówno adminem jak i zwykłym userem i tak też stworzę. Zapisuję. I jak widzisz mamy już użytkownika o id 2.
Który ma rolę admin oraz user. Możemy go później podejrzeć. Czyli o ile chciałbyś zobaczyć znowu kamerka. o ile chciałbyś zobaczyć jak wygląda ten rekord w środku klikamy Pokaż. No i tu jest taka prosta lista na zasadzie klucz wartość. I żeby nie pokazywać, bo czasami może taki użytkownik to nie jest duży obiekt. Ale czasami te obiekty w sensie te modele rosną nam do naprawdę imponujących rozmiarów, więc automatycznie nie musimy wszystkich elementów pokazywać na liście. Tutaj możemy na przykład pokusić się, żeby pokazać dodatkowe, kontekstowe informacje już bezpośrednio w widoku szczegółów. Dobra. No i co? I w ten sposób sobie zarządzasz Twoimi danymi w aplikacji. o ile chcesz dodać nową rolę, widzisz, iż tu mamy na razie dwie role user i admin. Dodajmy sobie nową rolę. Niech to będzie np. ekspert. Niech ten ekspert posiada wszystkie uprawnienia oprócz np. dostępu do. Do gifów, więc usuwam mu uprawnienia związane z GIF tami. A resztę zostawiam jak było? Zapisuję. I teraz tworząc nowego użytkownika, automatycznie zaznaczając wszystkie role. Widzimy, iż ten ekspert nam się od razu pojawił.
No i mamy tutaj użytkownika np. o nazwie Krzysiek. I zapisuje. Mamy Krzyśka, który posiada aż trzy role. Dobra, to co? Na razie tyle. W kolejnym wideo zajmiemy się rozwojem tego naszego panelu admina po to, żeby zaaplikować zarówno. Docelowe prezenty, które będę chciał tam przechowywać. Będę chciał zrobić listę osób, które chcę obdarowywać, czy do których będę przypisywał te prezenty. No i pewnie chciałby mieć taki bucket list na zasadzie ten prezent jest całkiem spoko, zostawiam go sobie na później, ale jeszcze nie przypisuje do żadnej konkretnej osoby. Także taki mam zamysł, zobaczymy co z tego wyjdzie. Dzisiaj Bardzo serdecznie Ci dziękuję i do zobaczenia w kolejnym wideo. o ile masz ochotę zerknij na kurs php kropka. COM. Tam znajdziesz więcej informacji o php. O samym nara wielu i znajdziesz jakieś tam dodatkowe gifty dla Ciebie. Także dzięki. Cześć!
