Własna aplikacja MVC

Chciałbym zaprezentować jak szybko można stworzyć własną aplikację opartą na wzorcu MVC, wykorzystując do tego celu Fat-Free.

Dlaczego akurat ten framework? Ponieważ jest bardzo lekki, daje nam podstawowe narzędzia przydatne w każdej aplikacji webowej (routing, połączeie z bazą danych, system templatek), a jednocześnie nie narzuca z góry określonej struktury katalogów.

Na początek kilka słów o MVC. Jest to wzorzec, polegający na odizolowaniu trzech warstw aplikacji, z których każda ma ściśle okreslone zadania i tak oto:

  • modele (Model) są reprezentacją danych, ich zadaniem jest pozyskiwanie danych oraz ich aktualizacja (np. na bazie danych, w cache’u, plikach),
  • widoki (View) odpowiadają za prezentację danych użytkownikowi, zawierają zbiór zasad w jaki sposób je wyświetlić,
  • kontrolery (Controller) zajmują się manipulacją danych, przetwarzaniem requestów użytkownika. W kontrolerach zleca się modelom zapis/odczyt danych oraz przekazuje do widoków opracowane informacje gotowe do wyświetlenia.

Używanie MVC daje nam większej przejrzystości, ponieważ dokładnie wiemy, za co dana część aplikacji jest odpowiedzialna.

 

Do dzieła!

Zanim zaczniemy cokolwiek kodować warto zastanowić się nad strukturą katalogów, co byłoby dla nas najlepszym rozwiązaniem, jaki układ da nam najbardziej czytelny obraz tego, co i gdzie się dzieje. Osobiście uważam, że poniższy podział powinien być dobrym przykładem:

Już na pierwszy rzut oka widać gdzie szukać interesujących nas akcji. Dodatkowo katalog webroot powinien przechowywać statyczne pliki, grafiki, skrypty i style, które będą używane bezpośrednio przez przeglądarkę. Kolejnym katalogiem jest vendor – to tutaj przechowujemy wszystkie zewnętrzne biblioteki, które wykorzystujemy w swoim projekcie (PSR-4 narzuca strukturę katalogów w projektach opartych o namespace’y).

W naszym projekcie zastosujemy composer‚a, który jest narzędziem pozwalającym na zarządzanie zależnościami w projekcie. Pozwala on między innymi na aktualizację bibliotek, kiedy tamte się zmienią, bez konieczności ręcznego kopiowania plików.

Na wstępnie potrzebna będzie baza, w postaci Fat-Free, korzystamy z gotowego rozwiązania, ponieważ nie ma potrzeby wymyślać koła na nowo, więc skoro istnieje niewielka pomoc, to czemu nie skorzystać?

Zapisujemy plik jako composer.json w głównym katalogu po czym z terminala przechodzimy do naszego katalogu i wpisujemy komendę:

Po tej operacji nasza struktura katalogów nieco się zaktualizowała i doszły nowe pliki, które composer dołączył do naszego projektu i wygenerował plik autoloadera w vendor/autoload.php, który za chwilę będzie nam potrzebny.

 

Ale kiedy coś zobaczę na ekranie?

Kolejnym krokiem jest połączenie wszystkiego w jedną całość, tak aby po wywołaniu konkretnego adresu w przeglądarce wykonywana była określona operacja, jednym słowem sprawienie, aby routing kierował bezpośrednio do kontrolera i metody w nim zawartej.

W tym miejscu musimy zainicjalizować autoloader oraz framework. Tworzymy plik index.php, który posłuży za dispatcher:

Podczas tworzenia kolejnych stron to własnie w tym miejscu definiować będziemy kolejne routingi ze wskazaniem typu requestu jakiego one dotyczą.

Następnie tworzymy główny kontroler, po którym dzieciczyć będą wszystkie pozostałe (tutaj zadbamy o renderewanie widoków w oparciu o to jaki routing został wybrany oraz przekazywanie zemiennych do widoków).

Mając Controller.php, możemy nareszcie stworzyć typowe hello world. Będzie to strona wyświetlana zaraz po wywołaniu naszej aplikacji, czyli na przykład adres myapp.local, jak pamiętamy w routerze ustawiliśmy, aby wywołana zostala metoda MainController::index().

Ale żeby cokolwiek się wyświetliło potrzebujemy templatek, które umieszczamy w katalogu Views. W głównym kontrolerze zdefiniowaliśmy, że zawsze ładowany będzie plik layout.xhtml, który z kolei includuje templatkę zależną od metody.

Na koniec jeszcze zawartość naszego MainController::index()

 

Zapis i odczyt danych…

Kiedy mamy już widoki i kontrolery, pora rozszerzyć naszą aplikację o modele i możliwość odczytu oraz zapisu do bazy danych. Na potrzeby tego przykładu będzie to baza w MySQL. Stwórzmy zatem prosty system komentarzy oparty na jednej tabeli w bazie danych.

W tym miejscu warto rozwarzyć utworzenie jakiegoś pliku konfiguracyjnego, bo z pewnością w miarę tworzenia, będzie dochodzić tutaj coraz więcej ustawień, na chwilę obecną jednak potrzebujemy tylko dostepów do bazy, niech wygląda to tak:

Na szybko tworzymy tabelkę

Każdy model musi nawiązać połączenie do bazy danych i wykonać określoną operację, zatem wydzielamy główny model:

Tworzymy teraz model komentarzy, który odpowiadać będzie za odczyt i zapis danych z konkretnej struktury, w tym przypadku z tabeli comments, więc model nazywamy relatywnie do nazwy tabeli w MySQL i dodajemy metody, których użyjemy w kontrolerze.

Pozostało nam jeszcze tylko obsłużenie właściwych requestów od użytkownika, czyli najpierw dodajemy w naszym index.php nowe definicje routera:

Aktualizujemy MainController.php o nowe metody:

i potrzebujemy jeszcze tylko widoku dla /comments, który listowałby komentarze oraz umożliwiał dodanie kolejnego poprzez prosty formularz…

Voila! Stworzyliśmy właśnie pierwszą aplikację w oparciu o wzorzec MVC. Pamiętajmy, że jest to tylko przykład, należałoby jeszcze zadbać o walidację danych przychodzących od użytkownika, wyświetlanie user-friendly komunikatów błędów i opakowanie w jakąś logikę biznesową.

Na GitHubie znaleźć możecie cały przykład aplikacji uwzględniający również konfigurację Apache’a aby routingi działaly prawidłowo. Zachęcam również do sprawdzenia dokumentacji Fat-Free, aby odkryć wszystkie możliwości tego małego frameworka.