czwartek, 11 lutego 2021

Jak stworzyć CMS-a bez użycia frameworków

Od dawna interesował mnie temat CMS-ów. Chciałem napisać własnego. W końcu zarządzanie swoją stroną z poziomu przeglądarki na dowolnym komputerze - czy to własnym, czy też kolegi lub koleżanki - jest bardzo wygodne i szybkie, nie trzeba mieć żadnych narzędzi typu klient FTP czy SSH do łączenia się z serwerem. Wystarczy, że otwierasz w przeglądarce swoją stronę, logujesz się do panelu administratora, zmieniasz, co trzeba, wylogowujesz i gotowe. Nowa treść na stronie pojawia się od razu.

Mając hosting i domenę, pokusiłem się o napisanie takiego systemu. Najpierw powstała aplikacja oparta na PHP i MySQL. Funkcje biznesowe były rozdzielone na różne pliki PHP, które jednocześnie generowały stronę. Było w nich wszystko - i łączenie się z bazą danych, i operacje na bazie, i jakaś logika, i wreszcie wstrzykiwanie obrobionych danych do szablonu strony. Spaghetti Code, taki misz-masz.

Chcąc to wszystko uporządkować, napisałem kolejnego CMS-a, który tym razem został oparty na architekturze MVC (model-view-controller). Poszczególne funkcje biznesowe były podzielone na trzy osobne warstwy. Kontroler przyjmował od użytkownika żądania, przekazywał sterowanie do Modelu, który z kolei pobierał dane z bazy lub je zapisywał, a wynik zwracał do Kontrolera. Następnie Kontroler po otrzymaniu danych przekazywał sterowanie do Widoku, podając mu potrzebne dane. Widok, wykorzystując otrzymane dane generował stronę, po czym zwracał ją do Kontrolera, a na koniec Kontroler wysyłał odpowiedź do użytkownika. Całość działała również na PHP i MySQL.

Potem przyszedł pomysł na stworzenie CMS-a opartego na frameworku Angular. Architektura zmieniła się całkowicie. Angular zajmował się nie tylko wyglądem strony, ale też obsługą danych, komunikacją z serwerem. Serwer tylko dostarczał potrzebnych danych, bądź je przyjmował, za pośrednictwem wystawionego API.

Pomyślałem sobie potem, czy nie napisać takiego systemu bez użycia frameworka. W samym HTML, CSS i JavaScript i połączyć to z API dostarczającym danych. I udało się! Wykorzystałem jakiś darmowy szablon dla stron typu wizytówka. Wyciąłem z niego treści, a w ich miejsce wstawiłem puste znaczniki, do których będą wstrzykiwane dane pobrane z serwera poprzez API. Z kolei API zostało oparte na endpointach w postaci plików PHP, które komunikują się z bazą MySQL. Działaniem aplikacji steruje JavaScript, który AJAX-em wysyła żądania do API i pobiera z niego dane, po czym umieszcza je w przygotowanych w szablonie znacznikach. I co, da się? :-)

Aby nie być gołosłownym, zapraszam do obejrzenia efektu tej pracy: http://micro-cms.pl
Możecie też zajrzeć do kodu i zobaczyć, jak to zostało zrobione: https://github.com/andrzuk/microCMS