W artykule przedstawiono zrzuty ekranów dla wszystkich grup użytkowników przykładowej aplikacji (System CMS). Stronę główną serwisu pozbawioną wszystkich materiałów prezentuje rysunek 1. Panel logowania dla pracownika i administratora serwisu prezentuje rysunek 2. Przygotowano również specjalną stronę html wywoływaną tylko, kiedy podany adres www serwisu nie istnieje w systemie (rys. 3.).
Rys. 1. Strona główna nieposiadająca żadnych materiałów
Rys. 2. Strona startowa dla panelu użytkownika systemu
Rys. 3. Strona błędu dla całej aplikacji
1. Interfejs użytkownika
Dzięki polityce bezpieczeństwa użytkownik systemu ma możliwość przeglądać artykuły i korzystać z wyszukiwarki. Przeszukuje artykuły podpięte pod opublikowane przyciski we wszystkich udostępnionych typach menu. Jeśli ten sam artykuł zostanie podpięty pod dwa różne przyciski, algorytm wyszukiwarki potraktuje go, jako jeden artykuł i poda tylko jeden link do wybranego domyślnie artykułu. W wynikach wyszukiwania artykuły nie są powtarzane.
Kolejne rysunki 4 – 8 przedstawiają odpowiednio:
- Strona główna projektu po uzupełnieniu serwisu „Piksel-Net” materiałami (rys. 4.). Wyświetlanych jest pięć ostatnio opublikowanych artykułów z możliwością wyświetlenia artykułu na głównej stronie. Przycisk „Więcej” jest opcjonalny, tworzony podczas dodawania artykułu do systemu, jest jedną z wielu funkcji wykorzystanego edytora w systemie. Kiedy program wykryje zastosowanie przycisku „Więcej” automatycznie ucina artykuł i wyświetla na ekranie tylko tekst przed znakiem. W innym przypadku wyświetla cały artykuł.
- Rysunek 5 przedstawia wykonaną akcję po wybraniu przycisku „Języki programowania”, pod który pracownik systemu podłączył sekcję z artykułami. Po wybraniu jednej z wielu dostępnych kategorii (np. PHP) zostanie wyświetlona lista wszystkich opublikowanych artykułów podpiętych pod wybraną kategorię (rys. 6.). Po zaznaczeniu tytułu gość serwisu zostanie przeniesiony do szczegółów wybranego artykułu (rys. 7.).
- Rysunek 8 prezentuje rezultat wyszukiwania w serwisie. Wyniki wyszukiwania wyświetlane są po dziesięć artykułów. Tytuły artykułów dłuższe od czterech słów są ucinane. Natomiast opisy artykułów wyświetlają tylko 30 pierwszych słów, aby uniknąć błędów w wyglądzie strony, wszystkie znaczniki języka html są usuwane z artykułów.
Rys. 4. Strona główna
Rys. 5. Zawartość przycisku z podłączoną sekcją
Rys. 6. Lista artykułów w wybranej kategorii
Rys. 7. Opis artykułu
Rys. 8. Informuje o wyszukanych artykułach
2. Interfejs pracownika
Konta pracowników w systemie CMS podzielono na trzy stopnie uprawnień. Uprawnienie „1” umożliwia po zalogowaniu, edycję własnych danych osobowych, zmianę hasła. Konto z uprawnieniem „2” umożliwia dodatkowo tworzenie sekcji, kategorii, pisania artykułów i przeglądania ogólnych statystyk systemu. Konto z uprawnieniem „3” poza przypisanymi funkcjami z niższych uprawnień ma możliwość generowania przycisków do różnych typów menu.
Rysunek 9 przedstawia ekran powitalny po zalogowaniu dla pracownika systemu z uprawnieniem pierwszym. Z prawej strony systemu istniej możliwość przejścia do edycji danych osobowych (rys. 10.), zmiany hasła (rys. 11.) i wylogowania z systemu. Lewa strona umożliwia uruchomienie działu o autorze pracy oraz przejść na główną stronę serwisu.
Rys. 9. Ekran powitalny dla pracownika systemu (Uprawnienie 1)
Rys. 10. Edycja danych pracownika obecnie zalogowanego
Rys. 11. Zmiana hasła obecnie zalogowanego użytkownika
Rysunek 12 przedstawia ekran powitalny po zalogowaniu dla pracownika systemu z uprawnieniem drugim. W porównaniu do konta z niższym uprawnieniem udostępniono bardziej rozbudowany ekran powitalny. Strona startowa zawiera osiem najbardziej popularnych sekcji, kategorii i sześć najliczniej odwiedzanych artykułów. Dodatkowo zostały dodane dwie pozycje na górnym pasku menu „Artykuły" (zawiera działy sekcja, kategorie, artykuły) i „Moduły" (odpowiedzialny za wyświetlenie ogólnych statystyk).
Rys. 12. Ekran powitalny dla pracownika systemu (Uprawnienie 2)
Przed rozpoczęciem pracy z artykułami system musi zawierać sekcje i kategorie, do których artykuły zostaną dopisane. Rysunek 13 przedstawia listę wszystkich sekcji w systemie z podstawowymi informacjami o kategoriach (ilość kategorii) i artykułach (ilość artykułów) dotyczących każdej sekcji z osobna. Z prawej strony na pasku sekcji istnieje przycisk umożliwiający uruchomienie formularza odpowiedzialnego za dodanie nowej sekcji do systemu (rys. 14.). Link w kolumnie „Nazwa sekcji" uruchamia formularz odpowiedzialny za edycję wybranej sekcji (rys. 15.). Rysunek 13 listy wszystkich sekcji umożliwia również opublikowanie, usunięcie z publicznych zasobów sekcji, czy zmianę kolejności wyświetlania sekcji na stronie (tylko w celach organizacyjnych). Jeśli sekcja nie posiada podpiętych żadnych kategorii, artykułów istniej możliwość usunięcia sekcji w innym przypadku przycisk do usunięcia pozostaje nieaktywny.
Rys. 13. Lista wszystkich sekcji dostępnych w systemie
Rys. 14. Dodanie nowej sekcji do systemu
Rys. 15. Edycja wybranej sekcji w systemie
Rysunek 16 przedstawia listę wszystkich kategorii wyświetlanych względem sekcji dostępnych w systemie. Za pomocą listy rozwijanej można wybrać nazwę sekcji, której kategorie mają zostać wyświetlone na stronie. Usunięcie lub dodanie kategorii do opublikowanych zasobów działa analogiczne jak w dziale sekcji. Kolejność wyświetlania kategorii można zmodyfikować tylko w obrębie tej samej sekcji. Z prawej strony na pasku „Kategorie artykułów" istniej przycisk umożliwiający dodanie nowej kategorii do systemu (rys. 17.). Link w kolumnie „Nazwa kategorii" umożliwia uruchomienie formularza odpowiedzialnego za edycję wybranej kategorii (rys. 18.). Rysunek 16 umożliwia również po kolumnie „Artykuły" zorientowanie się użytkownikowi systemu ile obecnie artykułów jest podpiętych pod każdą z wyświetlonych kategorii. Jeśli kategoria nie posiada podpiętych żadnych artykułów istnieje możliwość usunięcia kategorii z systemu w innym przypadku przycisk do usunięcia pozostaje nieaktywny.
Rys. 16. Lista wszystkich kategorii dostępnych w systemie
Rys. 17. Dodanie nowej kategorii do systemu
Rys. 18. Edycja wybranej kategorii w systemie
Rysunek 19 przedstawia listę wszystkich artykułów poukładanych względem sekcji i kategorii. Istnieje możliwość wyszukania artykułu po słowie (kolumna tytuł) lub wybrania samej sekcji albo sekcji i kategorii. Publikacja artykułu działa identycznie jak w dziale sekcji i kategorii. Istnieje również możliwość opublikowania artykułu na pierwszej stronie serwisu (kolumna „Strona tytułowa"). Z prawej strony na pasku „Artykuły - wszystkie" istnieje przycisk umożliwiający dodanie nowego artykułu do systemu (rys. 20.). Link w kolumnie „Tytuł" umożliwia uruchomienie formularza odpowiedzialnego za edycję wybranego artykułu (rys. 21.). Rysunek 19 umożliwia również po kolumnie „Przeczytano" zorientować się ile razy był czytany interesujący nas artykuł. Aby artykuł nie został przez przypadek usunięty, udostępniono w system okno modalne, które po kliknięciu przycisku „Usuń” prosi o potwierdzenie usunięcia artykułu. Zmiana kolejności wyświetlenia artykułu na stronie jest możliwe tylko w obrębie tej samej sekcji i kategorii.
Rys. 19. Lista wszystkich artykułów
Rysunek 20 przedstawia formularz odpowiedzialny za dodanie nowego artykułu do systemu. Pola z gwiazdką są polami wymaganymi. „Meta słowa kluczowe”, „Meta opis” i „Meta autor” są polami dodatkowymi jednak bardzo istotne dla techniki pozycjonowania stron SEO. Jeśli słowa kluczowe i opis nie zostaną podane w nagłówku <head> kodu <html>, zostaną umieszczone domyślne opisy zaproponowane przez program. Pominięcie przez pracownika pola „Meta autor” automatycznie pozwoli programowi pobrać login pracownika systemu, który utworzył wyświetlany artykuł i wprowadzić go, jako autor dokumentu html w nagłówku head. Opisywany formularz umożliwia również włączenie przycisku "Więcej" widocznego na głównej stronie serwisu (podzielenie artykułu na dwie części). Służy do tego ostatni przycisk w edytorze tekstu ("Obrazek podzielonej kartki"). Przycisk jest widoczny tylko na pierwszej stronie serwisu.
Rys. 20. Dodanie nowego artykułu do systemu
Rysunek 21 przedstawia formularz odpowiedzialny za edycję wybranego artykułu w systemie.
Rys. 21. Edycja wybranego artykułu
Rysunek 22 przedstawia ogólne statystyki całego systemu „Piksel-Net", znajdujące się w dziale „Moduły” w menu głównym programu.
Rys. 22. Ogólne statystyki systemu
Rysunek 23 przedstawia listę wszystkich utworzonych przycisków w dostępnych w systemie typach menu. Zarządzanie modułem odbywa się w analogiczny sposób jak w działach sekcje, kategorie i artykuły. Dodatkową funkcją przy „Module” menu jest możliwość wykrycia czy utworzone przyciski nie generują błędów. Program informuje uprawnionego pracownika o błędach występujących w utworzonych przyciskach we wszystkich typach menu. Czerwona nazwa utworzonego przycisku informuje o nieopublikowanej zawartości podpiętej pod przycisk, natomiast czarna nazwa przycisku o prawdopodobnym usunięciu z systemu materiałów podpiętych pod przycisk.
Rys. 23. Lista wszystkich pozycji menu
Rysunek 24 przedstawia pierwszy etap utworzenia nowego przycisku w menu.
Rys. 24. Pierwszy etap dodania nowego pola w menu
Rysunek 25 przedstawia formularz odpowiedzialny za podpięcie pod tworzony przycisk w wybranym menu z listy rozwijanej sekcji wraz ze wszystkimi opublikowanymi kategoriami i artykułami. Istnieje możliwość wyboru z listy rozwijanej, czy tworzony przycisk ma otwierać stronę w tym samym oknie przeglądarki czy nowym. Edycja utworzonego przycisku, do którego podpięto sekcję wygląda identycznie jak dodanie nowego przycisku w formularzu „Typ pozycji menu: Artykuły => Sekcje”. Pola z gwiazdką są obowiązkowe.
Rys. 25. Dodanie nowej pozycji menu „Artykuły => Sekcje"
Rysunek 26 przedstawia formularz odpowiedzialny za dodanie nowej pozycji menu „Pojedynczy artykuł". Wszystkie pola z gwiazdką są wymagane. Menu, do którego podpięty zostanie przycisk należy wybrać z listy rozwijanej. Pracownik systemu musi również wybrać z listy rozwijanej, czy przycisk będzie otwierał zawartość w tym samym oknie przeglądarki czy w nowym. Przycisk "Wybierz artykuł" otwiera okno modalne umożliwiające wyszukanie artykułu, który ma zostać podłączony do tworzonego przycisku menu (rys. 27.). Po zaakceptowaniu artykułu okno zostanie zamknięta a tytuł artykułu zostanie wyświetlony w polu tekstowym „Wybierz artykuł". Po zaakceptowaniu wprowadzonych danych program przekieruje użytkownika do listy wszystkich przycisków menu (rys. 23.).
Rys. 26. Dodanie nowej pozycji menu "Pojedynczy artykuł"
Rys. 27. Okno modalne „Wybierz artykuł”, formularz „Pojedynczy artykuł"
Edycja przycisku menu, do którego podpięto pojedynczy artykuł przedstawiono na rysunku 28. Odbywa się bardzo podobnie jak podczas tworzenia nowego przycisku przedstawionego na rysunku 26.
Rys. 28. Edycja przycisku menu, formularz „Pojedynczy artykuł"
Rysunek 29 przedstawia formularz odpowiedzialny za podłączenie do przycisku adresu strony internetowej. Jeśli przycisk ma uruchomić stronę główną aplikacji należy podać w polu „Adres strony" index.jsf. Formularz odpowiedzialny za edycję przycisku, do którego podpięto stronę internetową wygląda analogicznie do opisanego formularza.
Rys. 29. Dodanie nowej pozycji menu „Łącze zewnętrzne"
3. Interfejs administratora
Po zalogowaniu administrator posiada pełne uprawnienia systemu. Tylko z panelu administratora istnieje możliwość utworzenia nowego konta pracownika, administratora systemu. Konto administratora nie może zostać usunięte z systemu. Konta pracowników mogą zostać usunięte z systemu tylko pod warunkiem braku utworzonych artykułów przez wybranego do usunięcia pracownika.
Rysunek 30 przedstawia pierwszą stronę systemu po zalogowaniu administratora.
Rys. 30. Ekran powitalny dla administratora systemu (Uprawnienie 4)
Formularz odpowiedzialny za dodawanie nowego pracownika, administratora przedstawia rysunek 31. Pola wymagane są oznaczone czerwoną gwiazdką.
Rys. 31. Rejestracja nowego użytkownika systemu
Rysunek 32 przedstawia listę wszystkich kont systemu. Po umieszczeniu kursora nad nazwą użytkownika wyświetlane jest okno z ogólnymi informacjami na temat wybranego użytkownika systemu. Po zaznaczeniu nazwy loginu istnieje możliwość modyfikacji danych wybranego konta (rys. 33.).
Rys. 32. Lista wszystkich użytkowników systemu
Rys. 33. Edycja danych wybranego użytkownika systemu
Rysunek 34 przedstawia formularz odpowiedzialny za zmianę hasła dla wybranego pracownika, administratora systemu.
Rys. 34. Zmiana hasła dla wybranego użytkownika systemu
Zakończenie
Wszystkich zainteresowanych projektowaniem autorskich systemów internetowych, zapraszam do zainstalowania również darmowych systemów CMS np.: Joomla.
Warto przeczytać również:
Wybrane książki:
- Laura Lemay, Rafe Colburn, Jennifer Kyrnin: HTML, CSS i JavaScript dla każdego. Wydanie VII, Wydawnictwo Helion, 2016.
- Michał Bartyzel: Oprogramowanie szyte na miarę. Jak rozmawiać z klientem, który nie wie, czego chce. Wydanie II rozszerzone, Wydawnictwo Helion, 2015.
- Adam Freeman: HTML5. Przewodnik encyklopedyczny, Wydawnictwo Helion, 2013.
- Charles Wyke-Smith: CSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie III, Wydawnictwo Helion, 2013.
- Kae Verens: Projektowanie systemów CMS przy użyciu PHP i jQuery, Wydawnictwo Helion, 2011.
Strony internetowe:
- Projekt interfejsu graficznego systemu CMS zaprezentowany w artykule pochodzi z projektu zrealizowanego pod marką „Piksel-Net”, więcej na stronie www.piksel-net.pl.