docStrony WWW i skrypty PHP
download 
Reklamacja Transkrypt
Strony WWW i skrypty PHP
Strony WWW i skrypty PHP
Marek Czarnecki
21 grudnia 2010
Spis tre±ci
1 Przygotowanie ±rodowiska pracy
1
2 Odrobina HTML
2
3 Elementy PHP
4
1
Przygotowanie ±rodowiska pracy
Najpierw b¦dziemy chcieli zbudowa¢ proste strony internetowe i móc je ogl¡da¢.
Mo»na by co prawda ogl¡da¢ je bezpo±rednio z dysku, ale wówczas nie zobaczymy, w jaki sposób 'to' naprawd¦ dziaªa (gdy na przykªad chcieliby±my, by
nasza strona byªa dost¦pna w sieci). Co wi¦cej, tworzenie zaawansowanych stron
WWW, których tre±¢ jest spersonalizowana, wymaga u»ycia skryptów, dzi¦ki
którym przetworzymy na przykªad dane o u»ytkowiniku (nazwa, typ przegl¡darki internetowej, której u»ywa, itp.)
aby taki skrypt zostaª zrozumiany i
wykonany musimy mie¢ program, który b¦dzie potraª to zrobi¢. Wªa±nie dlatego musimy zainstalowa¢ oprogramowanie, które b¦dzie na naszym komputerze
udawaªo serwer. W naszym przypadku WampServer. Poni»ej instrukcja dla
Windows dla Linuxa, czy MacOSa prosz¦ znale¹¢ WampServer dla odpowiedniego systemu wklepuj¡c odpowiednie zapytanie w google i bior¡c pierwsze z
brzegu forum (przy czym linux powinien mie¢ serwer wbudowany).
Wchodzimy tu:
http://www.wampserver.com/en/index.php i instalujemy
WampServer. Po uruchomieniu programu nale»y go odpali¢. Wpisuj¡c w przegl¡darce http://localhost/ dostajemy si¦ na stron¦ gªówn¡ (domy±lnie zostanie wy±wietlony (lub wykonany w przypadku skryptów) plik o nazwie index.*,
gdzie * jest rozszerzeniem typu 'html', 'htm', 'php', 'pl', 'py', itp.).
A gdzie
na dysku jest ów tajemniczy localhost? W katalogu, w którym zainstalowali±my WampServer jest podkatalog WWW wªa±nie tam.
zaªo»y¢ katalog o dowolnej nazwie
nazwa
Mo»emy wewn¡trz
wówczas dost¦p do niego jest przez
±cie»k¦ http://localhost/nazwa znów zostanie wy±wietlony plik index.*, a gdy
go nie ma caªa zawarto±¢ katalogu. Gdyby±my chcieli umie±ci¢ nasz¡ stron¦ w
internecie potrzebowaliby±my prawdziwego serwera oraz domeny (nazwy typu
1
www.nazwamojejdomeny.**, gdzie ** mo»e by¢ typu pl, com.pl, com, org, eu,
itp.).
Potrzebujemy jeszcze programu do edycji polecam Notepad++. Mo»emy
go pobra¢ tu:
http://download.tuxfamily.org/notepadplus/5.8.3/npp.5.8.3.Installer.exe. Instalujemy.
2
Odrobina HTML
B¦dziemy chcieli stworzy¢ wªasn¡ stron¦ WWW. W tym celu zaªó»my w katalogu scie»kaDoWampServera/WWW nowy katalog o dowolnej nazwie. Otwieramy Notepad++ i tworzymy nowy plik, który od razu zapisujemy w katalogu
scie»kaDoWampServera/WWW pod nazw¡ index.html. W zakªadce j¦zyk wybieramy H i HTML (wtedy program b¦dzie nam ªadnie pod±wietlaª prawidªow¡
skªadni¦ HTML). Jeszcze warto ustawi¢ kodowanie znaków (znów chcemy, by
komputer rozumiaª nasz '¡' i '¦').
W tym celu klikamy 'Format' i 'Koduj w
UTF-8 (BEZ BOM)'. Znów zapisujemy nasz plik (ctrl+s).
Podstawowa skªadnia:
<html>
<head>
</head>
<body>
</body>
</html>
<!-- komentarz --> taki kod nie zostanie pokazany przez przegl¡dark¦,
jednak mo»na go wykorzysta¢ do wielu celów mi¦dzy innymi do powiedzenia
przegl¡darce, jak ma wy±wietla¢ nasz¡ stron¦.
Jeszcze przed otwarciem tagu
<html> warto doda¢ linijk¦:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>
Je»eli chodzi o preambuª¦ warto wyró»ni¢ par¦ tagów:
<title></title>.
Gdzie pojawi si¦ wpisany pomi¦dzy nimi tekst? Na pewno nie w samym oknie
wy±wietlaj¡cym sron¦ tam jest tylko ciaªo dokumentu. Prosz¦ sprawdzi¢ samemu. Oprócz deklaracji tytuªu w preambule znajduj¡ si¦ jeszcze ró»ne meta
tagi okre±laj¡ce rozmaite wªasno±ci strony np.:
<meta content=text/html;charset=utf-8 http-equiv=Content-Type>
ustawiaj¡c sposób, w jaki przegl¡darka wy±wietla¢ b¦dzie tekst (ustawiali±my
wcze±niej jak nasze '¡', '¦' maj¡ by¢ zapisywane przez Notepad++, teraz mówimy, jak maj¡ by¢ odczytywane przez przegl¡dark¦ wa»ne, by te dwa sposoby
si¦ zgadzaªy).
Standard HTML nakazuje (podobnie jak standard edycji tekstu) oddzieli¢
sam tekst, od stylów jego formatowania. Do tego celu u»ywa si¦ CSS (kaskadowych arkuszy stylów) wykracza to poza tematyk¦ wykªadu, jednak warto
wiedzie¢, w jaki sposób odnie±¢ si¦ do gotowego pliku .css z zapisanymi stylami:
2
<link href=NAZWA_PLIKU.css type=text/css rel=stylesheet>
Plików tych mo»e by¢ wi¦cej. . . , ale to temat na inny wykªad (i/lub wªasn¡
lektur¦).
Przechodzimy do samego ciaªa dokumentu, czyli co trzeba wpisa¢ (pomi¦dzy
tagiem otwieraj¡cym ciaªo, a tagiem zamykaj¡cym), by si¦ co± pojawiªo. Przede
wszystkim tagi s¡ nazywane intuicyjnie:
•
Tabela: <table></table>
•
Formularz: <form></form>
•
Obrazek: <img></img>
•
Akapit (paragraph): <p></p>
•
Nagªówek poziomu
n
(dla
n = 1, 2, 3, . . .)
<hn></hn>
Tagi otwieraj¡ okre±lone ±rodowiska i mog¡ przyjmowa¢ atrybuty.
Na
przykªad:
<img src=plik.jpg alt=nie ma obrazka:(>
Otworzyli±my tag odpowiadaj¡cy obrazkowi i oddzielone spacjami podajemy
jego atrybuty: src to artybut ±cie»ki do pliku, który ma si¦ wy±wietli¢ (../ oznacza katalog rodzica pliku, który wy±wietlamy, ./ oznacza bie»¡cy katalog, ±cie»ki
zapisujemy tak: (domy±lnie ./)'katalog/katalog_dziecko/dalsze/plik.rozszerzenie'
umieszczenie
/
na pocz¡tku sprawi, »e ±cie»ka zostanie zrozumiana jako abso-
lutna (w naszym przypadku b¦dzie to ±cie»ka do katalogu WWW WampServera)).
Atrybut alt to tekst, który wy±wietli si¦, gdy nie mo»na wy±wietli¢
obrazka (np. zªa ±cie»ka), lub gdy jeszcze nie udaªo si¦ go zaªadowa¢ (w przypadku du»ych obrazków mo»e to troch¦ potrwa¢).
Bardzo wa»ne w stronach internetowych s¡ hiperª¡cza, czyli to, co przekierowuje nas na inne strony WWW. Aby stworzy¢ hiperª¡cze piszemy <a
href=gdzie>Co ma by¢ ª¡czem?</a>. Atrybut href zawiera ±cie»k¦, podobnie
jak src w przypadku tagu img. To, co znajdzie si¦ pomi¦dzy <a. . . > oraz </a>
b¦dzie klikalne, a klikni¦cie wy±le nas pod podany w href adres.
Bardzo przydatne s¡ formularze dzi¦ki nim mo»na przekazywa¢ warto±ci
ró»nym skryptom ka»dy widziaª np. formularze logowania na stronach internetowych.
<form action=akcja method=metoda>
...
<input type=typ name=nazwa value=warto±¢
/>
...
</form>
Action wskazuje (tak jak src, czy href ) plik, do którego zostan¡ wysªane dane
z formularza. S¡ dwie metody post i get: pierwsza wysyªa anonimowo dane,
druga dokleja warto±ci do linku (doklejony zostanie nast¦puj¡cy ci¡g znaków
?nazwa_zmiennej1=warto±¢1&nazwa_zmiennej2=warto±¢2 itd.).
3
Jakie s¡ typy w inputach? Rozmaite: text (pole tekstowe), password (pole
hasªa jak w nim piszemy to widzimy gwiazdki), checkbox (zaznaczane pole
wielokrotny wybór), radio (zaznaczane pole wybór jednokrotny), submit
(bardzo wa»ny to klawisz, który wysyªa formularz do pliku z action (zadeklarowanego w form).
Co to s¡ atrybuty name?
Warto±ci z value zostaj¡ prze-
kazane przez zmienn¡ o nazwie zadeklarowanej w name. Deklaruj¡c kilka pól
typu radio o tej samej nazwie name (oczywi±cie o ró»nych warto±ciach value)
otrzymamy wielokrotny wybór spo±ród tych pól. Gdy chcemy wi¦cej wyborów
jednokrotnych trzeba u»y¢ innych nazw. Przycisk typu submit ma atrybut value
to tekst, który b¦dzie wy±wietlony na przycisku zatwierdzaj¡cym formularz.
Omówimy jeszcze tabele. Wewn¡trz tabel mamy nast¦puj¡ce tagi:
<thead></thead> nagªówek tabeli
<tbody></tbody> ciaªo tabeli
<tr></tr> wiersz
<td></td> kolumna
Przykªad:
<table>
<thead>
<tr><td>Imi¦</td><td>Nazwisko</td></tr>
</thead>
<tbody>
<tr><td>Marek</td><td>Czarnecki</td></tr>
<tr><td>Kto±</td><td>Inny</td></tr>
</tbody>
</table>
Tabele maj¡ te» swoje atrybuty border, width,. . .
Do poczytania:
•
http://www.w3schools.com/html/
•
Warto obejrze¢ sobie ¹ródªa ró»nych stron interetowych polecam (w
refoxie ctrl+u).
•
Polecam te» przegl¡dark¦ google chrome posiada 'narz¦dzia dla programistów', po których wª¡czeniu mo»na klikn¡¢ na dowolny element strony
internetowej prawym przyciskiem i wybra¢ ostatni¡ z opcji zostanie pokazany kod html, który tworzy ten element (jak rónie» kod css, czy kod
javascript).
3
Elementy PHP
Jak kaza¢ serwerowi rozumie¢ nasz plik jako plik PHP? Podobnie jak w przypadku HTML trzeba odpowiednio zadeklarowa¢ ±rodowisko PHP sªu»¡ do
tego nast¦puj¡ce znaczniki: <?php oraz ?>. Pomi¦dzy nimi wszystko zostanie
4
zrozumiane przez serwer (i wykonane), jako skrypt PHP. Co mo»emy robi¢ w
PHP? W zasadzie wszystko PHP jest j¦zykiem programowania o uniwersalnej
mocy obliczeniowej co w ogóle da si¦ 'policzy¢', mo»na policzy¢ przy skryptem
PHP.
Stwórzmy w Notepad++ nowy plik i zapiszmy go na naszym serwerze jako
nazwa.php (zmie«my j¦zyk na PHP oraz kodowanie znaków na UTF-8 bez
BOM). W takim pliku mo»emy spokojnie stosowa¢ j¦zyk html, a serwer wy±le
wówczas do przegl¡darki interpretecje tagów HTML, których u»yjemy. Mo»emy
te» gdzie± nagle u»y¢ <?php, ale wówczas serwer zacznie inaczej reagowa¢ na
dalsze symbole. Wewn¡trz skryptu PHP (czyli pomi¦dzy <?php i ?>) trzeba
u»ywa¢ j¦zyka PHP czyli ci¡gu oddzielonych ±rednikami instrukcji.
OPERATORY BOOLOWSKIE || (lub), && (i), ! (nie)
OPERATORY == (równo±¢), < , >, != (nierówno±¢)
OPERATORY ARYTMETYCZNE +, *, -, /, ++ (powi¦ksz o 1), (pomniejsz
o 1)
OPERACJE NA CIGACH SYMBOLI . - konkatenacja ala. .ma .kota!
da w wyniku ci¡g ala ma kota!
OPERATOR PRZYPISANIA =
Gdzie l¡duj¡ zmienne przesªane z formularzy? Zale»y od metody (parametru
formularza) z post l¡duj¡ w $_POST['NazwaZmiennej'], a z get w $_GET['NazwaZmiennej'],
przez NazwaZmiennej mam na my±li warto±¢ atrybutu name.
Skrypt PHP skªada si¦ z szeregu instrukcji oddzielonych ±rednikami. Zmienne
wprowadzamy poprzez znak dolara oraz nazw¦ np. $zmienna. Zmiennym mo»emy przypisywa¢ warto±ci $zmienna=5 albo $zmienna=To jest zdanie.. Przypisanie zmiennej warto±ci jest instrukcj¡. Jakie jeszcze dost¦pne s¡ instrukcje?
Instrukcja warunkowa:
if(warunek){
ci¡g instrukcji. . .
}
Ci¡g instrukcji w klamrach zostanie wykonany o ile warunek b¦dzie speªniony. Jak mog¡ wygl¡da¢ warunki? Warunkem mo»e by¢ dowolne wyra»enie,
które zwraca warto±¢ (w PHP prawie wszystko).
Na przykªad $a+$b=5, lub
$a==5, itd. (nawet $a=5 zwraca prawd¦, gdy uda si¦ dokona¢ przypisania).
P¦tla warunkowa: for(deklaracje zmiennych; niezmiennik; zmiana warto±ci
zmiennyc po wykonaniu p¦tli){
}
np.:
for($i=1; $i<10; $i++){
echo $i. ;
}
Zostanie wypisane 1 2 3 4 5 6 7 8 9 (wraz ze spacj¡ po 9, natomiast 10 ju»
nie).
P¦tle bezwarunkowa:
while(warunek){
}
B¦dzie wykonywa¢ instrukcje, dopóki warunek b¦dzie speªniony.
5
