Gwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywna
 

Spis treści

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.).

 

Strona główna nieposiadająca żadnych materiałów

Rys. 1. Strona główna nieposiadająca żadnych materiałów

 

Strona startowa dla panelu użytkownika systemu

Rys. 2. Strona startowa dla panelu użytkownika systemu

 

 

Strona błędu dla całej aplikacji

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.

 

 

Strona główna

Rys. 4. Strona główna

 

 

Zawartość przycisku z podłączoną sekcją

Rys. 5. Zawartość przycisku z podłączoną sekcją

 

 

Lista artykułów w wybranej kategorii

Rys. 6. Lista artykułów w wybranej kategorii

 

Opis artykułu

Rys. 7. Opis artykułu

 

 

Informuje o wyszukanych artykułach

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.

 

 

Ekran powitalny dla pracownika systemu (Uprawnienie 1)

Rys. 9. Ekran powitalny dla pracownika systemu (Uprawnienie 1)

 

 

Edycja danych pracownika obecnie zalogowanego

Rys. 10. Edycja danych pracownika obecnie zalogowanego

 

 

Zmiana hasła obecnie zalogowanego użytkownika

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).

 

 

Ekran powitalny dla pracownika systemu (Uprawnienie 2)

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.

 

 

Lista wszystkich sekcji dostępnych w systemie

Rys. 13. Lista wszystkich sekcji dostępnych w systemie

 

 

Dodanie nowej sekcji do systemu

Rys. 14. Dodanie nowej sekcji do systemu

 

 

Edycja wybranej sekcji w systemie

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.

 

 

Lista wszystkich kategorii dostępnych w systemie

Rys. 16. Lista wszystkich kategorii dostępnych w systemie

 

 

Dodanie nowej kategorii do systemu

Rys. 17. Dodanie nowej kategorii do systemu

 

 

Edycja wybranej kategorii w systemie

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.

 

 

Lista wszystkich artykułów

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.

 

 

Dodanie nowego artykułu do systemu

Rys. 20. Dodanie nowego artykułu do systemu

 

Rysunek 21 przedstawia formularz odpowiedzialny za edycję wybranego artykułu w systemie.

 

 

Edycja wybranego artykułu

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.

 

 

Ogólne statystyki systemu

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.

 

 

Lista wszystkich pozycji menu

Rys. 23. Lista wszystkich pozycji menu

 

Rysunek 24 przedstawia pierwszy etap utworzenia nowego przycisku w menu.

 

Pierwszy etap dodania nowego pola 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.

 

 

Dodanie nowej pozycji menu: Artykuły => Sekcje

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.).

 

 

Dodanie nowej pozycji menu: Pojedynczy artykuł

Rys. 26. Dodanie nowej pozycji menu "Pojedynczy artykuł"

 

Okno modalne: Wybierz artykuł, formularz: 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.

 

Edycja przycisku menu, formularz: Pojedynczy artykuł

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.

 

Dodanie nowej pozycji menu: Łącze zewnętrzne

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.

 

Ekran powitalny dla administratora systemu (Uprawnienie 4)

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ą.

 

Rejestracja nowego użytkownika systemu

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.).

 

Lista wszystkich użytkowników systemu

Rys. 32. Lista wszystkich użytkowników systemu

 

Edycja danych wybranego użytkownika systemu

Rys. 33. Edycja danych wybranego użytkownika systemu

 

Rysunek 34 przedstawia formularz odpowiedzialny za zmianę hasła dla wybranego pracownika, administratora systemu.

 

Zmiana hasła dla wybranego użytkownika 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:

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.

Książki Helion