Na wstępie...
Przedstawiam tutaj mój CMS, a konkretnie jego fragment – Panel Administratora(potem również występujące jako PA). Nie ma sensu bowiem prezentować tutaj tego, co jest w stanie zobaczyć użytkownik, który wchodzi na tę stronę. Wszystkie widoki(portfolio, kontakt, informacje itd.) są przecież dostępne z poziomu strony głównej, ale to do czego ma dostęp Administrator jest już przed Wami ukryte, a to właśnie ta część pozwala mi na pisanie danych kontaktowych, informacji, dodawania projektów czy slajdów. Z oczywistych względów nie będę tutaj wrzucał kodu źródłowego.
Krótko o CMS
Na wstępie warto wyjaśnić czym jest CMS, doprawdy w kilku zdaniach. Jest to system zarządzania treścią, a więc pozwala na dynamiczne tworzenie treści dla strony. Zawiera on interfejs, który pozwala użytkownikom na dodawanie, modyfikowanie, usuwanie treści, jak i posiada również funkcjonalność do dostarczania tych informacji. Jeszcze bardziej w skrócie – pewni użytkownicy dodają treść do strony poprzez udostępniony im interfejs, a treść ta jest ukazywana w pewien sposób użytkownikom końcowym. Pomimo, że pisałem konkretnie o stronach, to dotyczy to ogólnie aplikacji, jednakże WCMS(Web Content Management System) stanowi zdecydowaną większość tego rodzaju systemów.
Logowanie i menu Panelu Administratora
Co jest kwestią dość oczywistą, ale jednak wartą wspomnienia – aby dostać się do panelu wpierw trzeba się zalogować. Hasła są saltowane z odpowiednim kosztem, ale to kwestia bezpieczeństwa bardziej nadająca się na bloga niż pisanie o tym w tym miejscu. Już po zalogowaniu wyświetla się nam strona główna panelu z menu po lewej stronie. Widnieje tam siedem sekcji z różnymi funkcjonalnościami(niektóre do implementacji):
- Home – Dashboard, To Do List(jeszcze do implementacji), Alerts
- General – Home caption, Variables Settings(do implementacji), Styles Settings(do implementacji), Slides, About, Pre-contact
- Users – Groups, User Management
- News – Write News, News Managment, Categories(raczej przeniosę do General)
- Blocks(całkowicie do implementacji) – Blocks Management, Add Block
- Projects – Project Management, Add Project
- Footer – Contact, Media, About
Jak widzicie pewnych rzeczy jeszcze nie zaprogramowałem, a niektórych nie będę implementował jako część tego systemu(np. prawdopodobnie To Do List będę robił jako osobny projekt, ewentualnie potem podepnę do panelu).
Krótko o programowaniu PA
Do stworzenia tego systemu skorzystałem z kilku technologii. Jeżeli chodzi o Front-end to skorzystałem z CSS(dość oczywiste) i Bootstrapa. Dzięki temu mogłem ustawić odpowiadający mi layout, czyli położenie elementów na stronie, kolor, czcionkę i wiele innych parametrów. Nie ma co tu dużo opowiadać – elementy Boostrapa widnieją na screenach(buttony, inputy, ikony), a jeżeli chodzi o CSS, to proste ustawienia pozycji i kilka elementów dodanych do CSS3(m.in. jednostki procentowe – vw, funkcję calc(), własne definicje kolorów, selektory rodzeństwa oraz atrybutów).
Jeżeli chodzi o Back-End, to wykorzystałem PHP, JS, jQuery, SQL oraz metodologię AJAX. JS wraz z jQuery wykorzystałem między innymi do manipulacji danymi, zmiany ich pozycji na listach, dodawanie i usuwanie elementów do lub z kontenerów, aktualizacji atrybutów, a także funkcje do obsługi wklejania znaczników BBCode do tekstu. Dzięki metodologii AJAX mogłem obsługiwać dodawanie, usuwanie i modyfikacje danych poprzez dwa napisane API – jedno do wykonywania funkcji niekorzystających z bazy, drugie natomiast już do operacji na bazie danych.
PHP zostało wykorzystane przede wszystkim w tych interfejsach oraz do wczytywania niektórych danych po załadowaniu strony(listy – kontakty, slajdy)
Funkcjonalność:
Poniżej przedstawiam listę wybranych funkcjonalności(bez mniej znaczących informacji typu „Określanie koloru dodawanych kategorii” lub „Dodanie ikony lub obrazka do informacji lub projektu”, bo lista byłaby zbyt długa)
- Komunikacja z bazą danych przerzucona na interfejsy
- Brak przeładowywania całej strony(odświeżanie tylko określonych elementów)
- Dodany BBCode
- Możliwość dodania, modyfikacji i usuwania slajdów widocznych na stronie głównej
- Podgląd wyglądu pisanego tekstu(po zastosowaniu BBCode)
- Dodawanie kategorii
- Dostosowywania treści na stronie. W jednym przypadku poprzez dodawanie elementów do listy, określanie czy mają być wyświetlane, w jakiej kolejności, typ danych(tekst, url, mail). W drugim przypadku poprzez pisany tekst w polu tekstowym
- Zarządzanie dodaną treścią(możliwe modyfikacje treści)
- Zmiana pozycji elementów na listach
- Określenie, czy elementy mają być wyświetlane na stronie
- Dodawanie kategorii do informacji i projektów
- Własne ustawienia Meta title oraz Meta description
Kilka screenów…
Tak przedstawia się lista kategorii
Tak wygląda dodawanie nowego projektu
Dodawanie slajdów
Edycja opisu na stronie głównej(wraz z podglądem)