Tworzymy własny skrypt blogu: 2012

Jeżeli trafiłeś na tego bloga, to z pewnością interesuje się stworzenie własnego skryptu, na którym będziesz mógł publikować treści w formie artykułów (krótszych bądź dłuższych).

Co będzie nam potrzebne?

- Zainstalowany serwer z interpretatorem php i bazą danych mysql (np. krasnal)

LUB:
- Hosting + domena
- Baza danych mysql.
- Program FTP (np. TotalComanter lub FileZilla)

Jak rozplanować szablon?

Na początek trzeba wiedzieć jaki układ ma mieć nasz blog, standardowo jest to układ trzy-kolumnowy, czyli sidebar lewy, treść właściwa strony i sidebar prawy. Dla ułatwienia nazwiemy je LEWY, TREŚĆ i PRAWY.

Ale nie tylko te trzy kolumny powinien posiadać nasz blog. Warto także zastanowić się nad jakimś bannerem, menu poziomym i stopką. Te nazwiemy kolejno: BANNER, MENU, STOPKA.

Tak więc mamy już z grubsza rozplanowany szablon strony:

LEWY - sidebar lewy (lewa kolumna).

TREŚĆ - Treść właściwa strony (czyli to co będzie się wyświetlało po danej akcji).

PRAWY - sidebar prawy (prawa kolumna).

BANNER - można ty wstawić obrazek, logo itp.

MENU - wiadomo :)

STOPKA - informacje o autorze strony, data utworzenia lub nawet linki.

Graficzne przedstawienie tego co ustaliliśmy wyżej:

Obraz 1.0

OPIS POSZCZEGÓLNYCH CZĘŚCI STRONY

BANNER- Wstawimy tutaj obrazek który będzie jednocześnie odnośnikiem do strony głównej. Banner powinien samym sobą prezentować zawartość strony. Użytkownik, po spojrzeniu na banner, musi od razu wiedzieć o czym jest strona i czy dobrze trafił.

MENU- Możesz tu wstawić linki do zewnętrznych lub wewnętrznych stron. My w tutorialu umieścimy tutaj odnośniki do kategorii postów.

LEWY- W lewej kolumnie będą znajdowały się odnośniki które są ważne ale nie pasują nam do menu poziomego np.: 10 Najnowszych, Archiwum...

TREŚĆ- Treść, która będzie się zmieniała pod wpływem klikniętego odnośnika, np.: Ze strony głównej, na której wyświetlamy 5 ostatnich postów, przechodzimy do Archiwum, wtedy wszystko oprócz TREŚCI

pozostanie bez zmian, a zmieni się tylko zawaetość TREŚĆI.

PRAWY- Miejsce na wyświetlanie skróconych postów (z przyciskiem "więcej"). Przeważnie jest to 5-10 ostatnich postów i/lub komentarze do nich.

STOPKA- Zawiera informacje o autorze strony, prawach autorskich i wszystko czego dusza zapragnie. (UWAGA: większość użytkowników nie zwraca większej uwagi na stopkę.)

STRUKTURA PLIKÓW

Jedna z najważniejszych pozycji w planowaniu skryptu. Dobrze zaplanowana struktura plików i katalogów pozwala na łatwe odnajdywanie kodu odpowiedzialnego za daną akcję i zmniejsza czas ładowania stron.

Odnosząc się do zaplanowanego przez nas szablonu, stworzymy następującą strukturę na naszym serwerze:

- index.php - Domyślny plik strony, wyświetlany jako 'strona główna'.

- include/ - Tutaj znajdować się będą pliki, w których zamieścimy treści, na które wskazuje nazwa pliku.

|- banner.php

|- menu.php

|- left.php

|- text.php

|- right.php

|- footer.php - stopka

- templates/ - Folder z motywami naszego szablonu

|- blog/ - Folder motywu

|- css/ - Folder z plikami CSS definiującymi wygląd strony (np. kolory tekstu, tła...)

|- style.css

- db/ - Operacje na bazie danych

TWORZENIE SZABLONU

Skorzystamy z generatora szablonów: GENERATOR

index.php

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Mój własny blog</title>

</head>

<body>

<?php

include ('include/banner.php');

include ('include/menu.php');

include ('include/left.php');

include ('include/text.php');

include ('include/right.php');

include ('include/footer.php');

</div>

</body>

</html>

Jak widzimy, w pliku index.php mamy tylko ramy dokumentu HTML oraz (między <body> a </body>) kawałek kodu PHP, który odpowiada za dołączenie plików reszty szablonu.

PAMIĘTAJ: NIE ZMIENIAJ KOLEJNOŚCI INCLUDE()! Poskutkuje to tym, że szablon się 'rozjedzie'.

include/banner.php

<div id="top">

<div id="BODY">

<div id="LOGO">
Mój własny blog
</div>

include/menu.php

include/left.php

include/text.php

<div id="TRESC">

<div class="ZAWARTOSC">



<h1>Mój własny blog</h1>
<p>Ta treść jest zamieszczona w pliku include/text.php
Cały szablon strony został pocięty na sześć części:
<strong>BANNER <br />
MENU <br />
KOLUMNĘ LEWĄ <br />
TREŚĆ WŁAŚCIWĄ <br />
KOLUMNĘ PRAWĄ <br />
STOPKĘ <br /></p>

<p>Takie podzielenie skryptu bardzo ułatwia edycję. Sprawdź w kodzie źródłowym strony - kliknij prawym przyciskiem myszy i "wyświetl źródło strony" - jak wygląda cały skrypt.</p>



</div>
</div>

include/right.php

<div id="RIGHT">

<div class="RIGHT">

<div class="NAGLOWEK" id="MENU_NAGLOWEK">

PRAWY

</div>

<div class="ZAWARTOSC">



<ul>
<li><a href="?">Link</a></li>
<li><a href="?">Link</a></li>
<li><a href="?">Link</a></li>
<li><a href="?">Link</a></li>
<li><a href="?">Link</a></li>
<li><a href="?">Link</a></li>
<li><a href="?">Link</a></li>
<li><a href="?">Link</a></li>
<li><a href="?">Link</a></li>
<li><a href="?">Link</a></li>
</ul>



</div>

</div>
</div>

include/footer.php

</div>

Wszystkie pliki z include/ na początku wrzucamy do folderu include a ten musi znajdować się w katalogu głównym.

Jeżeli wrzuciłeś już wszystkie powyższe pliki, powinieneś otrzymać takie coś:

Wynik jaki otrzymaliśmy:

Mamy już gotowy szablon. W następnym temacie zajmiemy się połączeniem z bazą danych i utworzenie odpowiednich tabel i pól.

Tworzymy własny skrypt blogu

niedziela, 7 października 2012

Tworzymy własny blog - Planowanie i tworzenie szablonu.