Jeżeli podjąłeś się stworzenia swojej strony domowej, nie możesz sobie najprawdopodobniej pozwolić na luksus przygotowania jej interfejsu w Photoshopie, a następnie przekazania go developerom, którzy zajmą się opracowaniem kodu. Musisz być w stanie pociąć stworzony layout, stworzyć kod XHTML oraz dodać nieco interaktywności. Od czego należałoby zacząć? Nie obawiaj się – pomożemy ci w poznaniu niezbędnych podstaw i wskażemy odpowiedni kierunek.
Pokażemy, w jaki sposób możesz się nauczyć podstaw tworzenia kodu strony, dzięki któremu staniesz się lepszym webdesignerem. Kod, z którym się tu zapoznasz, zostanie bowiem przygotowany w oparciu o PHP. Jest to szeroko stosowany oraz darmowy język skryptowy, wymyślony specjalnie na potrzeby tworzenia stron internetowych. Co istotne, kod PHP można osadzić wewnątrz kodu HTML. Jest on łatwy w nauce, a dodatkowo bywa obsługiwany przez większość komercyjnych kont internetowych (nawet tych najtańszych) w Polsce i na świecie.
PHP pozwala ożywić statyczną stronę poprzez mechanizm dynamicznych zmian i aktualizacji danych. Dane te mogą pochodzić z innych serwisów lub np. z bazy danych, dzięki czemu nie musisz ręcznie aktualizować kodu XHTML.
Na takim sposobie działania oparto zdumiewająco dużą liczbę stron, włączając w to popularne witryny, takie jak na przykład Newstoday.com (http://www.newstoday.com), BD4D (http://www.bd4d.com) oraz Pixelsurgeon (http://www.pixelsurgeon.com). Podobnej techniki używa także wiele dużych stron korporacyjnych, jak na przykład BARHonda F1 (http://www.barhondaf1.com). Jak więc widzisz, PHP nie jest dla oferm – to potężne narzędzie, pozwalające na lepsze zaprezentowanie własnego talentu i pomysłów. PHP pozwoli ci stać się wydajniejszym oraz bardziej efektywnym i efektownym twórcą stron WWW.
Jeżeli przekonałeś się, że warto poznać podstawy PHP, warto zastanowić się nad tym, czego będziesz potrzebował. Jeśli posiadasz już komercyjne konto internetowe, na 99,9 procent masz na nim również PHP oraz MySQL-a. Jeśli masz co do tego wątpliwości, łap za telefon i dzwoń do twojej firmy hostingowej – oni będą wiedzieli. Jeśli nie posiadasz aktualnie konta, na rynku dostępnych jest bardzo wiele ciekawych ofert (możesz sprawdzić listę firm hostingowych dostępną w naszym archiwum on line).
Następnie czas przejść do uruchomienia Dremaweavera. My użyjemy Dreamwawera MX 2004, jeżeli jednak nie masz go zainstalowanego, możesz pobrać 30-dniową wersję próbną ze strony producenta – firmy Macromedia (http://www.macromedia.com). Dreamweaver posiada doskonałe wsparcie dla kodu PHP. Uruchom zatem program, a następnie stwórz nowy plik za pomocą opcji New > File z menu. Wybierz z lewej strony Dynamic page oraz PHP z prawej. Sprawdź także, czy zaznaczone zostało pole Make document XHTML compilant box.
Podstawy
Zaczniemy od samych podstaw. Wybierz opcję View > Code and Design, tak abyś widział jednocześnie stronę w trybie WYSIWYG (tryb ten pozwala tworzyć kod HTML metodą zbliżoną do tej, którą znasz np. z edytora tekstu, jakim jest Word), oraz kod XHTML.
Zanim rozpoczniesz pisanie kodu w PHP, musisz skonfigurować projektowaną stronę w Dreamweaverze. Pozwoli ci to na łatwiejsze umieszczanie plików strony na serwerze, bez opuszczania okna edytora.
Wybierz z menu Site > Manage Sites… Kliknij przycisk New i wybierz Site. Wpisz nazwę tworzonej witryny w miejscu Site name oraz wybierz z lewej strony Remote Info. Z rozwijanej listy wybierz FTP, następnie wypełnij wszystkie pola. Jeśli nie wiesz, co należy w nie wpisać, skontaktuj się z dostawcą swoich usług hostingowych. Prawdopodobnie możesz pozostawić wszystkie pola zaznaczone według domyślnych ustawień. Kliknij teraz przycisk Test. Pozwoli ci to upewnić się, że wszystko zrobiłeś dobrze. Następnie kliknij OK.
Otwórz teraz panel z plikami (Files) poprzez wybranie z menu opcji Window > Files. Dzięki temu będziesz mógł łatwo, szybko i przyjemnie otwierać pliki zgromadzone na twoim serwerze. Wybierz z rozwijanej listy znajdującej się z prawej strony opcję Remote View, a następnie kliknij ikonę Connect. Powinieneś teraz ujrzeć pliki zgromadzone na twoim serwerze.
W celu umieszczenia plików na koncie, wybierz Local View z tej samej rozwijanej listy, kliknij prawym klawiszem na pliku, a następnie wybierz opcję Put. Spowoduje to przetransferowanie przez Dreamweavera wybranego pliku na serwer. Dzięki tej opcji dostępnej bezpośrednio z poziomu edytora nie musisz korzystać z osobnego klienta FTP.
Skoro skonfigurowałeś już połączenie z serwerem, możesz rozpocząć zabawę z PHP. W oknie kodu wpisz pomiędzy tagami {html}
{/html} a {html}{/html} następującą linię:Zapisz plik (File > Save) jako test.php. Użyj teraz panelu Files do skopiowania pliku na serwer. Następnie uruchom przeglądarkę i zobacz stronę, którą właśnie umieściłeś (adres powinien być bliski tego wzoru: {stala}http://www.twojadomena.pl/test.php{/stala}). W oknie przeglądarki powinieneś ujrzeć informację Jam jest PHP. Działa? Właśnie napisałeś swój pierwszy program w PHP. Oczywiście jeśli to byłoby wszystko, co oferuje PHP, język ten niewart byłby twojej uwagi. Największą jednak mocą PHP jest możliwość generowania wyświetlanych danych na podstawie informacji pobranych z bazy danych.
Konfiguracja bazy danych
W tym miejscu powinieneś poprosić znajomego eksperta o ustawienie bazy danych MySQL na serwerze (możesz także poprosić administratora pracującego dla firmy hostingowej, u której masz wykupione konto – najczęściej zrobi to za darmo, lub wytłumaczy ci, jak należy się do tego zabrać). W przeciwnym razie będziesz zmuszony do wykonania tego zadania samodzielnie. Istnieje wiele stron, na których możesz przeczytać przewodniki opisujące ten temat – na przykład linuxplanet.com, macromedia.com czy dev.mysqk.com.
Jeżeli jednak nadal wolisz poprosić o pomoc znajomego, dopilnuj tego, aby baza nazywała się my_test i zawierała tabelę o nazwie names z dwoma kolumnami – firstname oraz lastname. Ze względu na brak miejsca nie opiszemy tutaj szczegółowo całej procedury. Gdy wszystko już zostanie poprawnie skonfigurowane, połącz się z bazą. Wystarczy, że użyjesz kodu jak poniżej:
$db = mysql_connect(\'localhost\', \'nazwa_użytkownika\', \'hasło\');
mysql_select_db(\'my_test\', $db);
Zastąp nazwę użytkownika i hasło danymi, które otrzymałeś od znajomego. Teraz masz komplet informacji potrzebnych do odczytania danych z bazy i wyświetlenia ich na stronie WWW. W celu wykonania tej operacji, użyj następującego kodu:
$sql = \"SELECT firstname, FROM names\";
$result = mysql_query($sql, $db);
while ($arrow = mysql_fetch_row($result)) {
print \"Name = \".$arrow[0].\"
\";
}
Kod ten spowoduje wyświetlenie w przeglądarce wszystkich wartości firstname zgromadzonych w tabeli names w bazie danych. Pomimo iż powyższy przykład jest bardzo prosty, stanowi doskonały początek twojej drogi z PHP. Najlepszą rzeczą, jaką teraz możesz zrobić, będzie zakasanie rękawów i zabranie się do eksperymentów. Zapoznaj się także z przewodnikiem dostępnym na stronie http://pl.php.net/tut.php.
PHP w Dreamweaverze
{tlo_1}
1. Stwórz nową stronę w Dreamweaverze.
Kliknij w menu Site > Manage Sites. Następnie New > Site.
{/tlo}
{tlo_0}
2. Skonfiguruj ustawienia serwera
Wypełnij informacje z kategorii Local info – zobacz prawą stronę okna. Następnie musisz skonfigurować połączenie z serwerem – Remote Info. Wybierz FTP w polu Access, uzupełnij pozostałe informacje. Kliknij Test w celu przetestowania połączenia. Po uzupełnieniu wszystkich pól kliknij OK.
{/tlo}
{tlo_1}
3. Stwórz plik i przemów!
Stwórz nowy plik poprzez menu File > New. Z lewej strony wybierz kategorię strony Dynamic, natomiast w środkowej kolumnie PHP. Upewnij się, że opcja Make document XHTML compilant jest zaznaczona. Teraz możesz kliknąć na Create. W widoku Code (View > Code) wpisz swój pierwszy kod PHP: {html}{/html}
{/tlo}
{tlo_0}
4. Zobacz interpretację edytora
Przełącz się teraz do widoku Design i zobacz, jak Dreamweaver interpretuje kod PHP w trybie edycji wizualnej. Kod ten jest przedstawiany w postaci małego znacznika. Otwórz panel Files (Window > Files), a następnie prawym klawiszem kliknij na twoim pliku PHP i wybierz Put. Spowoduje to umieszczenie pliku na docelowym serwerze.
{/tlo}
Kilka funkcji PHP
- {stala}print(){/stala} – ta funkcja wyświetla tekst na ekranie
print(\"Lubię cukierki\");
- {stala}include(){/stala} – powoduje dołączenie do skryptu skryptu zewnętrznego
include(\"nazwaskryptu.php\");
- {stala}getimagesize(){/stala} – ta funkcja zwraca wymiary obrazków (JPEG, GIF, SWF oraz PNG).
$image_array = getimagesize(\"autko.jpg\");
print \"Szerokość = \". $image_array[0].\"
\";
print \"Wysokość = \". $image_array[1].\"
\";
PHP na skróty
{tlo_1}
1. Gdzie warto rozpocząć poszukiwania
http://www.php.net jest wielkim i pomocnym zbiorem dla każdego webmastera zainteresowanego możliwościami PHP. Znajdziesz tu odpowiedź na wiele pytań dotyczących PHP, podręcznik oraz najnowsze wersje PHP.
{/tlo}
{tlo_0}
2. Najlepszy hosting
TOP100 (http://www.top100.pl) to najbardziej wiarygodny polski katalog firm oferujących hosting (PHP jest tu standardem). Sprawdź również ranking usług w naszym archiwun on line.
{/tlo}
{tlo_1}
3. Pobierz wersję testową Dreamweavera
Ze strony firmy Macromedia możesz pobrać 30-dniową testową wersję programu Dream-weaver (http://macromedia.com/dreamweaver). Gdy pobierzesz i zainstalujesz edytor, uruchom go.
{/tlo}
{tlo_0}
4. Przekonaj się, jak łatwo jest zacząć
Dzięki Dreamweaverowi początek przygody z PHP staje się bardzo prosty. Przed rozpoczęciem pracy upewnij się, że masz aktywowaną opcję odpowiedzialną za generowanie dokumentów zgodnych z XHTML-em.
{/tlo}{tlo_1}
5. Utrzymanie strony jest proste
Funkcjonalność, jaką oferuje Dreamweaver, w znacznym stopniu ułatwia prowadzenie strony internetowej. Korzystając z tego edytora, nie będziesz potrzebował zewnętrznego programu FTP do umieszczania zaktualizowanych stron na serwerze.
{/tlo}
{tlo_0}
6. Przetestuj połączenie
Sprawdź, czy poprawnie skonfigurowałeś połączenie z FTP poprzez wciśnięcie przycisku Test. W razie wystąpienia problemów, zostaniesz o nich poinformowany przez program.
{/tlo}
{tlo_1}
7. Przerzucaj pliki w mgnieniu oka
Panel Files pozwala na szybkie pobranie plików znajdujących się na twoim koncie internetowym. Nie potrzebuje więc już osobnego programu FTP!
{/tlo}
{tlo_0}
8. Gotów zawojować sieć?
Gdy ujrzysz w oknie przeglądarki napis swojego autorstwa (więcej na ten temat znajdziesz w głównej części artykułu), będzie to oznaczać, że jesteś na dobrej drodze, by stać się profesjonalnym programistą PHP. Czy nie jest to prostsze, niż myślałeś?
{/tlo}
{tlo_1}
9. Ucz się na przykładach
Oto prosty przykład wykorzystujący PHP do połączenia się z bazą danych, pobrania z niej informacji i wyświetlenia ich w przeglądarce.
{/tlo}
Połączenie PHP z Flashem
{tlo_0}
1. Zdefiniuj zmienne
Otwórz nowy dokument Flasha. Kliknij na Layer1 i otwórz panel Actions poprzez wciśnięcie F9 na klawiaturze. Zdefiniuj zmienne, których chcesz użyć na stronie PHP. Oto przykład:
{/tlo}
firstVal = \"5\";
secondVal = \"10\";
{tlo_0}
2. Wyślij swoje zmienne
Aby móc coś z tymi zmiennymi zrobić, musisz je najpierw wysłać do PHP. Poniżej wpisanego poprzednio kodu dodaj następującą linijkę w ActionScriptcie:
{/tlo}
LoadVariables(\"http://twojastrona.com/calc.php\", \"\", \"GET\");
{tlo_0}
3. A oto co się stanie
Strona calc.php otrzyma dwie zmienne:
{/tlo}
$.rstVal=$_GET[\'.rstVal\'];
$secondVal = $_GET[\'secondVal\'];
$answer = $.rstVal*$secondVal;
print \"answer=$answer\";
{tlo_0}
4. Zobacz odpowiedź
Gdy powrócisz do Flasha, zobaczysz, że zmienna o nazwie answer ma wartość 50. Stało się tak, ponieważ wartość ta została z powrotem zwrócona ze skryptu PHP.
{/tlo}
