Programowanie internetowe

(1)

Programowanie internetowe

Wykład 1 – HTML, CSS, wprowadzenie do PHP

mgr inż. Michał Wojtera

(2)

Plan wykładu

 Organizacja zajęć

 Zakres przedmiotu

 Literatura

 Zawartość wykładu

 Wprowadzenie

 AMP / LAMP

 Podstawy HTML i CSS

 Podstawy PHP

(3)

Zakres przedmiotu

 Projektowanie dynamicznych witryn

internetowych przy użyciu oprogramowania open source:

 serwer Apache

 podstawy języka HTML

 programowanie w języku PHP

 wykorzystanie systemu zarządzania bazą danych MySQL

(4)

Organizacja zajęć

 Wykład:

 15 godzin – wtorek – godzina 14:15 – sala E104 co drugi tydzień / tygodnie parzyste

 Projekt:

 30 godzin – 2 grupy:

 środa – godzina 10:15 – lab. D:

 mgr inż. Michał Wojtera

 Ocena: 40% kolokwium wykładowe i 60 % ocena projektu

 Godziny przyjęć – aktualne na www

(5)

Literatura i materiały

 Naramore, Gerner, Le Scouarnec – „PHP5, Apache, MySQL od podstaw” – Helion

 Williams, Lane – „PHP i MySQL. Aplikacje bazodanowe” – Helion

 Źródła internetowe:

 http://www.php.net

 http://www.mysql.com

 http://www.w3schools.com

 http://algorytmy.pl/doc/xhtml/

(6)

Zawartość wykładu

1. Podstawy języka HTML/XHTML, CSS 2. Programowanie w języku PHP

 podstawy (skrypty PHP w kodzie HTML, zmienne i stałe, typy danych, operatory, struktury sterujące)

 operacje na plikach

 tablice

 łańcuchy znaków

 funkcje i wielokrotne wykorzystanie kodu

 PHP jako język obiektowy

3. Praca z MySQL

(7)

Zawartość wykładu

1. Bardziej zaawansowane aspekty programowania w PHP:

 mechanizm sesji, cookies

 uwierzytelnianie

 przesyłanie plików

 obsługa archiwum .zip

 praca z plikami XML

 grafika

(8)

Wprowadzenie

 Elementy systemu AMP:

 Apache – serwer http

 PHP – PHP: Hypertext Preprocessor – język skryptowy wykonywany po stronie serwera, zaprojektowany do tworzenia aplikacji Web (dynamicznych serwisów)

 MySQL – system zarządzania relacyjną bazą danych

(9)

Struktura aplikacji

(10)

Zalety PHP

 Duża wydajność

 Integracja z bazami danych

 Wbudowane biblioteki

 Koszt

 Prostota i łatwość uczenia się

 Przenośność

(11)

Zalety MySQL

 Duża wydajność

 Niski koszt

 Łatwość użycia

 Przenośność

 Dobry dostęp do dokumentacji

(12)

Popularność PHP

 PHP: 20,917,850 domains, 1,224,183 IP addresses Source: Netcraft

(13)

Popularność Apache

 Market Share for Top Servers Across All Domains August 1995 - September 2007

(14)

Podstawy HTML

 Czym jest HTML?

 Hyper Text Markup Language

 Język znaczników (tagów)

 Rekomendacja W3C

 Informuje przeglądarkę jak wyświetlić strukturę strony

 Jakie rozszerzenie pliku HTML?

 Jakiego oprogramowania używać?

przeglądarki, edytory

(15)

Podstawy HTML

 Prosty przykład:

<html>

<head>

<title>Tytuł strony</title>

</head>

<body>

<p>To jest moja pierwsza strona. <strong>Ten tekst jest wyróżniony.</strong></p>

</body>

</html>

 Jaka jest rola poszczególnych znaczników?

(16)

Podstawy HTML

 Znaczniki HTML:

 Służą do oznaczania elementów strony HTML

 Są otoczone znakami < oraz >

 Większość składa się ze znacznika początkowego i końcowego

 Zgodnie z zaleceniami W3C powinno używać się znaczników pisanych małymi literami

 Znaczniki mogą posiadać atrybuty np. <body class=„main”></body>

(17)

Podstawy HTML

 Elementy

 Nagłówki

 Paragraf

 Znak nowej linii

 Pozioma linia oddzielająca

 Komentarze

 Odnośniki

 Tabele

 Obrazy

(18)

Podstawy HTML

 Elementy

 Listy

 Numerowana

 Wypunktowana

 Definicji

 Formularze

 Do czego używane?

(19)

Podstawy HTML

 Formularze – przykład

<form>

Imię: <input type="text" name="imie" /><br />

Nazwisko: <input type="text" name="nazwisko" />

<input type="radio" name=„plec" value="male„ />

Mężczyzna<br />

<input type="radio" name=„plec" value="female„ />

Kobieta<br />

<input type="submit" value="Wyślij">

(20)

Podstawy HTML

 Kolory

(21)

Podstawy HTML

 Jakie informacje przeglądarka pomija?

 znaki nowej linii

 tabulacje i wielokrotne spacje

 puste elementy <p>

 nierozpoznane elementy

 komentarze

(22)

XHTML

 Poprawny XHTML

 nazwy elementów i atrybuty pisane małymi literami

 wartości atrybutów w cudzysłowiach

 domknięte elementy

 puste elementy

 jawnie zapisane wartości atrybutów

 zagnieżdżenia

(23)

XHTML

 Dodatkowo

 Element a nie może zawierać innego elementu a

 Element _pre nie może zawierać elementów _img,

object, applet, big, small, sub, sup, font, lub

basefont

 Element form nie może zawierać elementu form

 Element button nie może zawierać elementów _a,

form, input, select, textarea, label, button, iframe, lub _isindex

 Element label nie może zawierać innego elementu

label

 Znaki specjalne

 <, >, &

 is it ok?

(24)

XHTML

 Deklaracja typu dokumentu

 Rodzaje DTD

 Strict

 Transitional

 Frameset

 Przykład DTD dla XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

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

(25)

XHTML

 Element meta

 kodowanie znaków

<meta http-equiv="content-type" content="text/html;

charset=UTF-8" />

 meta dla wyszukiwarek – atrybut name

 description

 keywords

 author

 copyright

 robots

(26)

CSS

 Kaskadowe arkusze styli

 Zalety

 lepsza kontrola układu i typografii strony

 mniej pracy

 potencjalnie mniejsze dokumenty

 potencjalnie lepiej dostępne dokumenty

 formatowanie przy użycie HTML kończy swój żywot

(27)

CSS

 Jak działa CSS?

 Składnia reguł

h1 {color: #eee;}

p {font-size: 12px;

font-family: Verdana, sans-serif; }

 Części reguły

(28)

CSS

 Dodawanie styli do dokumentu

 Inline

<h1 style="color: red">This Heading will be Red</h1>

<p style="font-size: 12px; font-family:

'Trebuchet MS', sans-serif">

This is the content of the paragraph to be set with the described styles.</p>

 Wbudowane

<style type="text/css">

h1 {color: #666;}

p {font-size: 90%;

(29)

CSS

 Dodawanie styli do dokumentu

 Zewnętrzny plik

 zawartość arkusza styli

 używanie elementu link

<head>

<link rel="stylesheet" href="/pathname/stylesheet.css"

type="text/css" />

</head>

 importowanie

<style type="text/css">

<!--

@import url(http://pathname/stylesheet.css);

(30)

CSS

 Struktura elementów i dziedziczenie

(31)

CSS

 Poziomy

 Kolejność reguł

 Elementy blokowe i inline

 Typy selektorów

 dla typów (elementów)

 kontekstowe

 selektory dla klas i identyfikatorów

 selektory atrybutów

(32)

CSS

 Selektory

 pseudoselektory

a:link {color: red;}

a:visited {color: blue;}

a:hover {color: fuchsia;}

a:active {color: maroon;}

input:focus {background-color: yellow;}

p.opener:first-letter {font-size: 300%; color: red;}

blockquote:before {content: "“"; font-size: 24px; color:

purple;}

(33)

CSS

 Właściwości

 tekst i czcionka

 elementów HTML – marginesy, marginesy wewnętrzne, krawędzie

 kolor, tło

 pozycjonowanie, układ strony

 tabele, listy

(34)

Podstawy PHP

 Formularze i ich używanie

<form action=„przetworz.php” method=„post”>

<table border=„0”>

<tr>

<td width=„150”>Imię:</td>

<td align=center><input type=„text” name =„imie”></td>

</tr>

<tr>

<td width=„150”>Nazwisko:</td>

<td align=center><input type=„text”

name=„nazwisko”></td>

</tr><td colspan=„2”><input type=„submit”

(35)

Podstawy PHP

 przetworz.php

<html>

<head>

</head>

<body>

<?php

echo „Nazywasz się $imie $nazwisko.”;

?>

</body>

</html>

(36)

Podstawy PHP

 Znaczniki PHP i ich style:

 kod PHP musi być umieszczony pomiędzy odpowiednimi znacznikami

 style:

 znaczniki krótkie: <? ?>

 styl XML: <?php ?>

 styl skryptowy: <script language=„php”>

</script>

(37)

Podstawy PHP

 Znaki białe podobnie jak w HTML są ignorowane

 Komentarze:

 wielowierszowe: /* komentarz */

(niedozwolone zagnieżdżenia)

 jednowierszowe: // komentarz

(38)

Podstawy PHP

 Dostęp do zmiennych formularza:

 można uzyskać dostęp do zawartości każdego z pól formularza poprzez użycie zmiennych o takich samych nazwach jak nazwy żądanych pól;

 Zmienne formularza – dwie metody dostępu do nich:

 metoda uproszczona – nazwa zmiennej taka jak nazwa pola formularza: np. $imie (tylko gdy włączona

dyrektywa register_globals)

 pobranie danych z tablicy o nazwie: $HTTP_POST_VARS [„imie”] lub $HTTP_GET_VARS[„imie”];

(39)

Podstawy PHP

 Zmienne

 Identyfikatory

 mogą mieć dowolną długość i mogą składać się z liter liczb, znaków podkreślenia przy czym nie mogą rozpoczynać się cyfrą;

 są case sensitive, czyli rozróżniana jest wielkość liter;

 mogą mieć identyczne nazwy jak nazwy funkcji wbudowanych, ale powinno się tego unikać

 Nadawanie zmiennym wartości

(40)

Podstawy PHP

 Typy danych w PHP:

 Integer

 Float

 String

 Array

 Object

 NULL

 pseudotyp mixed, oznaczający możliwość użycia danych różnego typu

 Moc typów danych:

(41)

Podstawy PHP

 Rzutowanie zmiennych

$liczba = 0; $ilosc = (float)$liczba;

 Stałe define(„NAZWASTALEJ”, wartosc);

 Zasięg zmiennych

 deklarowane w skrypcie zmienne globalne

widziane są w całym skrypcie, ale nie wewnątrz funkcji

 zmienne wewnątrz funkcji widziane są jedynie przez tę funkcję

 zmienne używane wewnątrz funkcji, deklarowane

(42)

Podstawy PHP

 Operatory:

 arytmetyczne: + - * / %

 łańcuchowe: .

 przypisania: =

 łączone przypisania: += -= *= /= %= .=

 pre- i post inkrementacji i dekrementacji:

++$a $a++ --$a $a--

 odwołania(referencji): &

(43)

Podstawy PHP

 Operatory:

 porównania: == === != <> < > <= >=

 logiczne: ! && || and or

 bitowe: & | ~ ^ << >>

 specjalne: , new oraz -> []

 trójskładnikowy:

warunek ? wartość jeśli true : wartość jeśli false

 operator ukrywania błędów: $a = @(20/0);

(44)

Podstawy PHP

 Kolejność i łączność wyrażeń – do znalezienia w sieci lub podręcznikach

 Funkcje operujące na zmiennych

 testowanie i ustawianie typów zmiennych:

string gettype(mixed var);

int settype(string var, string type);

np. $a = 5;

echo gettype($a).”<br />”;

settype($a, „float”);

echo gettype($a).”<br />”;

(45)

Podstawy PHP

 Testowanie stanu zmiennej

 czy istnieje? int isset(mixed var);

 usuń zmienna int unset(mixed var);

 czy ma wartość pustą lub zerową

int empty(mixed var);

 reinterpretacja zmiennych (taka sama operacja jak rzutowanie)

int intval(mixed var);

float floatval(mixed var);

(46)

Podstawy PHP

 Struktury warunkowe

 if (warunek)

instrukcja lub blok instrukcji

 if (warunek) { instrukcje/a } else {

instrukcje/a }

 if (warunek) { instrukcje/a

} elseif (warunek) { instrukcje/a

(47)

Podstawy PHP

 Struktury warunkowe

 instrukcja switch (analogia do str. if z warunkiem na to samo wyrażenie)

if ($i == 0) {

print "i jest równe 0";

} elseif ($i == 1) {

} elseif ($i == 2) {

}

switch ($i) { case 0:

break;

case 1:

break;

(48)

Podstawy PHP

 Iteracje:

 pętla while

while (wyrażenie) instrukcja

 pętla do.. while

$i = 0;

do {

print $i;

} while ($i>0);

(49)

Podstawy PHP

 Iteracje:

 pętla for

for (wyrażenie1; wyrażenie2; wyrażenie3) instrukcje

 pętla foreach

foreach(wyrażenie_tablicowe as $wartość) wyrażenie

np. $arr = array("jeden", "dwa", "trzy");

foreach ($tabl as $wartość) {

echo "Wartość: $wartość<br />";

}

(50)

Podstawy PHP

 Przerwanie lub kontynuacja struktury sterującej:

 break kończy wykonywanie aktualnej instrukcji for, foreach, while, do..while lub switch

 continue używane jest wewnątrz instrukcji pętli do przerwania wykonywania danej iteracji pętli i rozpoczęcia zupełnie nowej iteracji

(51)

Praca z plikami w PHP

 Ogólne informacje:

 przy zapisywaniu danych do pliku:

1. otwarcie pliku (utworzenie, jeśli nie istnieje) 2. zapisanie danych do pliku

3. zamknięcie pliku

 przy czytaniu z pliku:

1. otwarcie pliku (w przypadku braku dostępu lub

braku pliku zapewnić poprawne wyjście z procedury odczytu)

2. odczytanie danych z pliku

(52)

Praca z plikami w PHP

 Otwieranie pliku – funkcja fopen(), która zwraca uchwyt do pliku;

$ftp = fopen(„$DOCUMENT_ROOT/plik.txt, „w”);

 tryby otwarcia pliku:

 r – tylko odczyt – czytanie od początku pliku;

 r+ – odczyt i zapis – pisanie od początku pliku;

 w – zapis – pisanie od początku pliku, jeśli plik istnieje kasowana jest jego zawartość, jeśli nie to następuje próba jego utworzenia;

 w+ – zapis i odczyt – reszta jak w trybie w;

 a – tylko dopisywanie;

(53)

Praca z plikami w PHP

 Pisanie do pliku funkcja fwrite():

fwrite($fp, $outputstring);

int fwrite(int fp, string str, int [length]);

Aby zapewnić łatwiejszą pracę z plikami dane należy rozdzielać znakami ‘\t’ oraz ‘\n’.

 Zamykanie pliku funkcja ^fclose():

fclose($fp);

(54)

Praca z plikami w PHP

 Czytanie z pliku:

 funkcja feof();

while (!feof($fp))

 odczyt kolejnych wierszy – funkcje fgets(), fgetss(), fgetcsv():

$dane = fgets($fp, 100);

$dane = fgetss($fp, 100);

$dane = fgetcsv($fp, 100, „\t”);

 odczyt całego pliku – readfile(), fpassthru(), file();

readfile(„plik.txt”);

fpassthru($fp) – należy wcześniej otworzyć plik;

(55)

Praca z plikami w PHP

 Przykład:

$fp = fopen(„plik.txt”);

while (!feof($fp)) {

$dane = fgets($fp, 100);

echo $dane.”<br />”;

}

(56)

Praca z plikami w PHP

 Czytanie z pliku:

 Czytanie pojedynczego znaku – fgetc();

 Czytanie danych o ustalonej długości – fread();

 Inne funkcje plikowe:

 file_exists();

 filesize();

 unlink();

 rewind(), fseek(), ftell();

(57)

Podsumowanie

 Organizacja zajęć

 Zakres przedmiotu

 Literatura

 Zawartość wykładu

 Wprowadzenie

 AMP / LAMP

 Podstawy HTML i CSS

 Podstawy PHP