PHP - Stronicowanie artykułów

Prezentacja artykułów w postaci serii niewielkich podstron ma wiele zalet. Po pierwsze, liczba otwieranych przez użytkownika stron wzrasta. Ponieważ każde otwarcie strony to emisja nowych reklam, zatem stronicowanie zwiększa liczbę wyemitowanych reklam, na czym zyskują dochody serwisu.

Drugi argument dotyczy adresów URL. Serwis stosujący stronicowanie artykułów będzie posiadał znacznie więcej unikalnych adresów URL, co jest dobrze widziane przez wyszukiwarki.Jako trzeci czynniki przemawiający za stronicowaniem należy wymienić funkcjonalność serwisu. Nawigacja po monstrualnie długim tekście jest bardzo niewygodna. Jeżeli poszczególne strony artykułu zawierają ułatwienia w postaci odnośników do spisu treści, do poszczególnych stron czy do kategorii, to witryna taka jest znacznie bardziej funkcjonalna.

Sformułowanie zadania

Dane wejściowe

Dana jest pewna (dowolnie duża) liczba artykułów. Wszystkie artykuły są opracowane w identycznym formacie, w postaci statycznych stron WWW. Każdy artykuł jest zapisany w osobnym folderze. Na artykuł składają się pliki:

• art.html
• style.css

oraz foldery:

• img
• zip
• preview

W folderze img znajdują się wszystkie ilustracje dołączone do artykułu. Folder zip zawiera omówione przykłady i oprogramowanie, zaś w folderze preview umieszczone są przykłady, przeznaczone do podglądu (m.in. statyczne strony WWW oraz obrazy).

W kodzie artykułu art.html znajdują się odwołania do wszystkich plików z folderów img (w postaci znaczników img) oraz zip (w postaci znaczników a).

Całość jest przygotowana w taki sposób, że po otworzeniu dokumentu art.html ujrzysz kompletną stronę WWW, zawierającą wszystkie obrazy z folderu img i pozwalającą na pobranie spakowanych plików z folderu zip oraz podgląd przykładów z folderu preview.

Wynikiem przygotowywanych skryptów ma być witryna WWW, która będzie zawierała wszystkie artykuły źródłowe. Z uwagi na dużą liczbę artykułów należy wprowadzić podział na kategorie.

Każdy z artykułów:

• ma być umieszczony w dokładnie jednej kategorii,
• ma być podzielony na kilka osobnych stron,
• ma zawierać spis treści, odwołujący się do poszczególnych stron artykułu.

Wynikowa witryna WWW

Rys. 1 Strona główna serwisu ma prezentować - w postaci menu - dostępne kategorie. Ilustruje to rysunek 1. Widoczne na nim menu główne zawiera opcje: STRONA GŁÓWNA, BAZY DANYCH, GIMP, HTML/XHTML/CSS oraz PHP.

Po wybraniu jednej z opcji menu głównego, ujrzysz listę artykułów wybranej kategorii.

Nieco poniżej wstępu do każdego artykułu znajduje się strzałka, która umożliwia przeczytanie całego artykułu. Po kliknięciu strzałki pojawia się strona ze spisem treści artykułu.

Każda pozycja spisu treści jest z kolei hiperłączem do konkretnej strony artykułu. Każda ze stron zawiera serię ikon o wyglądzie strzałek. Za pomocą ikon można przewijać tekst do pierwszej, poprzedniej, następnej oraz ostatniej strony. Strzałka do góry ułatwia dotarcie do spisu treści.

Format artykułów wejściowych

Artykuły poddawane stronicowaniu muszą być opracowane w spójny sposób. Wykorzystany przeze mnie format stosuje:

• element h1 do ustalenia tytułu artykułu,
• element h2 do ustalenia autora artykułu,
• elementy h3 oraz h4 do podzielenia artykułu na rozdziały i podrozdziały,
• element p o klasie date do ustalenia daty publikacji artykułu,
• element p o klasie abstract do ustalenia wstępu.

W treści dokumentu wykorzystuję elementy span o klasach filename, variable, program, option, shortcut, math, title oraz input:

1. <span class="filename">dane.txt</span>
2. <span class="variable">$x</span>
3. <span class="program">Apache</span>
4. <span class="option">File &rarr; Open</span>
5. <span class="shortcut">Ctrl+Alt+Del</span>
6. <span class="math">x + y = 3</span>
7. <span class="title">Janko Muzykant</span>
8. <span class="input">cd /tmp</span>

Listing zwinięty - 8 linii

Wstawki kodu umieszczam w elemencie pre. Większe fragmenty, takie jak obrazy, listingi, ramki oraz tabele, umieszczam w sekcjach div, na przykład:

1. <div class="listing">
2. <pre>
3. $str = ucfirst($str);
4. </pre>
5. <p>
6. Listing 1. Wywołanie funkcji
7. <span class="variable"> ucfirst()</span>
8. </p>
9. </div>

Listing zwinięty - 9 linii

lub

1. <div class="image">
2. <img src="img/1.png" alt="" />
3. <p>
4. Rys. 1.
5. Strona HOTELE
6. </p>
7. </div>

Listing zwinięty - 7 linii