od html a do php a - university of nišpmf.ni.ac.rs/pmf/vesti/uvod u web programiranje.pdf · od...

Od HTML – a do PHP – a

Stefan Stanimirović

Departman za računarske nauke Prirodno – matematički fakultet

Univerzitet u Nišu Email: stefan.stanimirovic@pmf.edu.rs

Šta je internet?

Kolekcija računarskih mreža koje koriste protokol za razmenu podataka

World Wide Web (WWW) predstavlja kolekciju svih veb sajtova i stranica, dok je internet veći pojam koji obuhvata različite servise kao što su email, četovanje, online igre, itd.

Zanimljive činjenice iz istorije interneta

Nastao kao projekat Ministarstva Odbrane SAD-a. Početni projekat je nosio ime ARPANET (1960-70)

E-mail je „rođen“ 1971

Do 1987. internet je obuhvatao skoro 30.000 hostova

Tim Berners-Lee je kreirao WWW 1989-91

Zanimljive činjenice iz istorije interneta

Popularni veb pregledači: Netscape - 1994

IE – 1995

Popularni sajtovi:

Amazon.com - 1995

Google - Januar 1996

Wikipedia - 2001

MySpace - 2003

Facebook - Februar 2004

Veb serveri

Veb server je softver koji sluša zahteve za veb stranama

Primeri:

Apache

Microsoft Internet

Information Server (IIS)

Veb pregledač

Softver koji prihvata i prikazuje dokumente sa veb servera Mozilla Firefox

Microsoft Internet Explorer (IE)

Apple Safari

Google Chrome

Stranica koja se traži locira se preko URL - Uniform Resource Locator

Primer: http://dept.ju.edu/cs/index.html

Veb jezici

Hypertext Markup Language (HTML): koristi se za pisanje veb stranica

Cascading Style Sheets (CSS): koristi se za stilizovanje veb strana

PHP Hypertext Processor (PHP): dinamičko kreiranje stranica na veb serveru

JavaScript: interaktivne veb stranice sa klijentske strane

Veb jezici

Asynchronous JavaScript and XML (Ajax): pristupanje podacima za veb aplikacije

eXtensible Markup Language (XML): meta-jezik za opis podataka

HTML & CSS

Hypertext Markup Language

(HTML)

Opisuje sadržaj i strukturu informacija na veb stranici

Nije isto kao prezentacija (prikaz na ekranu)

Okružuje sadržaj otvorenim i zatvorenim etiketama (eng. tags)

Ime svakog taga predstavlja element

sintaksa: <element> sadrzaj </element>

primer: <p>This is a paragraph</p>

Koristi XML kao format za označavanje

XML + HTML = XHTML

Standardizovan u 2000. godini

Striktna XHTML stranica predstavlja proširenje HTML tagova

Struktura XHTML strane

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

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

information about the page

</head>

<body>

page contents

</body>

</html> HTML

Datoteka se snima pod .html ekstenzijom Sadržaj strane nalazi se između tagova Head predstavlja opis strane Body sadrži telo dokumenta

Naslov strane <title>

Nalazi se unutar head taga

Prikazuje se na jezičku web pregledača i u spisku obeleživača (bookmarks)

… <head> <title> HARRY POTTER AND THE DEATHLY HALLOWS

- PART 2 </title>

</head>

… HTML

Paragraf <p>

Nalazi se unutar <body> taga

Razmaci i tabovi ne utiču na izlaz

… <body> <p> Harry Potter and the Deathly Hallows,

the last book in the series, begins directly after the

events of the sixth book.

Voldemort has completed his ascension to power and

gains control of the Ministry of Magic</p>

</body>

… HTML

Harry Potter and the Deathly Hallows, the last book in the series, begins

directly after the events of the sixth book. Voldemort has completed his

ascension to power and gains control of the Ministry of Magic output

Naslovi <h1>, <h2>, … <h6>

Svaki tag ima značenje koji je vezan za strukturu i sadržaj, a ne za stil

Treba koristiti zbog boljeg stila i kompatibilnosti sa veb pregledačima

<h1> Harry Potter </h1>

<h2> Books </h2>

<h3> Harry Potter and the Philosopher’s Stone </h3> HTML

Harry Potter Books Harry Potter and the Philosopher’s Stone output

Horizontalna linija <hr />

Obično se koristi za odvajanje sekcija u dokumentu

Tagovi koji su početni i završni u isto vreme zatvaraju se sa />

<p> First paragraph </p>

<hr />

<p> Second Paragraph </p>

First Paragraph

Second Paragraph output

Blokovski i redovski elementi

Blokovski elementi (block elements) prostiru se duž celog ekrana

Primeri: paragrafi, liste, tabele

Pregledač ubacuje beli prostor pre i posle između blokovskih elemenata da bi ih razdvojio

Redovski elementi

Redovski elementi (inline elements) zauzimaju samo onoliko prostora koliko je potrebno za prikaz sadržaja Primeri: boldirani tekst, delovi koda, slike

U jednom redu je moguće prikazati više redovskih elemenata, a ugnježdavaju se u jedan blokovski element

Još HTML tagova

Neki tagovi mogu sadržati dodatne informacije koje se nazivaju atributi

Sintaksa: <element attribute="value" attribute="value"> content </element>

Primer: <a href="page2.html">Next page</a>

Još HTML tagova

Neki tagovi nemaju sadržaj, te su oni otvoreni i zatvoreni u isto vreme

Sintaksa: <element attribute="value" attribute="value" />

Primer: <hr />

Primer: <img src=“Harry.jpg" alt="pic of Harry Potter" />

Veze <a>

Vrednost href atributa je odredišna URL adresa

Veze (linkovi) su redovski elementi, te se oni navode unutar blokovskih elemenata, poput p ili h1

Search

<a href="http://www.google.com/">Google</a>

</p> HTML

Search Google now!

output

Veze <a>

Tipovi URL adresa:

Apsolutni: ka drugim veb stranicama

Relativni: ka drugim stranama unutar trenutnog veb sajta

<p><a href=“deathlyHallows-book.html">Harry Potter and the Deathly Hallows Book</a></p>

<p><a href="http://en.wikipedia.org” title="Search">Wikipedia</a></p>

Harry Potter and the Deathly Hallows

Wikipedia output

Ugnježdavanje tagova

Tagovi moraju da se ugnježdavaju pravilno: završni tag mora da odgovara najskorije otvorenom tagu

Većina pregledača se trudi da prikaže tačan rezultat, ali to i dalje nije validan XHTML

Loše <p>

<a href=" deathlyHallows-book.html"> Harry Potter and the

Deathly Hallows Book </p>

This text also links to Harry Potter Book</a>

Slike <img>

U src atributu slike navodi se putanja do slike

Atribut alt predstavlja opis slike, i prikazuje se ukoliko slika nije pronađena na navedenoj putanji

<img src="images/tobby.jpg" alt=“Tobby from Harry Potter" /> HTML

Slike <img>

Slike mogu postati linkovi ukoliko se navode unutar <a> taga

Vrednost koja se navede unutar title atributa slike pojavljuje se kao „tooltip“

<img src="images/dumbledore.jpg" alt=“Dumbledore from Harry Potter"

title="Alas! Ear wax!"/>

</a> HTML

Prelom teksta <br>

br treba da se zatvara sa />

br se koristi za prelazak u novi red unutar nekog paragrafa

<p>One Ring to rule them all, One Ring to find them, <br

/> One Ring to bring them all and in the darkness bind

them.</p>

<p> In the Land of Mordor where the Shadows lie. </p>

One Ring to rule them all, One Ring to find them,

One Ring to bring them all and in the darkness bind them

In the Land of Mordor where the Shadows lie. output

Komentari <!-- … -- >

Komentari se mogu koristiti i za sakrivanje određenih delova strane

Komentari se ne mogu ugnježdavati i ne mogu sadržati --

<!-- My web page, by Bob Student

CSE 380, Fall 2048 -->

<p>CS courses are  a lot of fun!</p>

CS courses are a lot of fun!

output

Naglašavanje teksta <em>,

em: emphasized (naglašeni) tekst (obično u kurzivu)

strong: strongly emphasized (strogo naglašeni) tekst (obično bold)

HTML is <em>really</em>,

<strong>REALLY</strong> fun!

HTML is really REALLY fun!

output

Neuređene liste: <ul>, <li>

ul (Unordered List ) predstavlja nabrojivu listu elemenata (bullets) – blokovski element

li (List Item) predstavlja pojedinačnu stavku u listi – blokovski element

<li>No shoes</li>

<li>No shirt</li>

<li>No problem!</li>

</ul> HTML

• No shoes

• No shirt

• No problem! output

Ugnježdene liste

<li>Harry Potter characters:

<li>Harry Potter</li>

<li>Hermione</li>

<li>LOTR characters:

<li>Frodo</li>

<li>Bilbo</li>

</ul> HTML

Ugnježdene liste (nastavak)

• Harry Potter characters:

• Harry Potter

• Hermione

• Ron

• LOTR characters:

• Frodo

• Bilbo

• Sam output

Uređene liste: <ol>, <li>

ol (Ordered List) predstavlja numerisanu listu elemenata

<p>Apple business model:</p>

<li>Beat Microsoft</li>

<li>Beat Google</li>

<li>Conquer the world!</li>

</ol> HTML

Apple business model:

1. Beat Microsoft

2. Beat Google

3. Conquer the world output

Česte greške sa listama

Ukoliko lista ostane otvorena, sadržaj koji sledi ostaje uvučen

<li>No shoes</li>

<li>No shirt</li>

<li>No problem!</li>

<p>Paragraph after list...</p> HTML

• No shoes

• No shirt

• No problem!

Paragraph after list... output

Greške sa ugnježdenim listama

Moderni pregledači će najverovatnije tačno prikazati rezultat iako je XHTML nevalidan

<li>Harry Potter characters:</li>

<li>Harry Potter</li>

<li>Hermione</li>

<li>LOTR characters:

<li>Frodo</li>

<li>Bilbo</li>

</ul> HTML

Definicione liste: <dl>, <dt>,

dl predstavlja listu definicija

dt predstavlja term, dok dd predstavlja njegovu definiciju

<dt>newbie</dt> <dd>one who does not have mad skills</dd>

<dt>jaded</dt> <dd>tired, bored, or lacking enthusiasm </dd>

<dt>frag</dt> <dd>a kill in a shooting game</dd>

</dl> HTML

newbie

one who does not have mad skills

Tired, bored, or lacking enthusiasm

a kill in a shooting game output

Tabele: <table>, <tr>, <td>

table definiše tabelarno okruženje, tr

(Table Row) predstavlja red (vrstu) table, dok td (Table Data) predstavlja podatak u redu

Korisno za pregledno prikazivanje podataka

1,1 1,2 okay

2,1 real wide 2,2

<table>

</table> HTML

output

Naslov i natpis tabele: <th>,

<caption>My important data</caption>

<tr><th>Column 1</th><th>Column 2</th></tr>

</table> HTML

output

Column 1 Column 2

1,1 1,2 okay

2,1 real wide 2,2

My important data

Sadržaj unutar <th> taga unutar vrste prikazuje se unutar zaglavlja tabele

Natpis označava smisao podataka u tabeli

Citati <blockquote>

<blockquote> se koristi za duge

citate

<p>As Lincoln said in his famous Gettysburg Address:</p>

<p>Fourscore and seven years ago, our fathers brought

on this continent a new nation, conceived in liberty, and

dedicated to the proposition that all men are created

equal.</p>

</blockquote> HTML

As Lincoln said in his famous Gettysburg Address:

Fourscore and seven years ago, our fathers brought forth on this continent a new

nation, conceived in liberty, and dedicated to the proposition that all men are created equal.

output

Redovski citat: <q>

Za kratke citate koristi se <q> tag

Zašto se koristi, umesto da se napiše <p>Quoth the Raven, "Nevermore."</p>

Pošto su navodnici specijalni karakteri, oni ne bi trebalo da se direktno navode unutar XHTML-a, već kao "

Korišćenjem <q> taga može se primeniti CSS stil

<p>Quoth the Raven, <q>Nevermore.</q></p>

Quoth the Raven, “Nevermore.”

output

Veb standardi

Zašto koristiti XHTML i veb standarde?

XHTML je rigidniji i strukturiraniji jezik

Interoperabilan je između različitih veb pregledača

Veća verovatnost da će se stranica pravilno prikazivati i u starim i u novim verzijama veb pregledača

Može se razmenjivati sa drugim XML podacima: SVG (graphics), MathML, MusicML, itd.

W3C XHTML Validator

Proverava da li HTML kod zadovoljava striktne XHTML specifikacije

Restriktivniji je od veb pregledača koji može pravilno prikazati i nepravilne HTML stranice

<img src="http://www.w3.org/Icons/valid-xhtml11"

alt="Validate" />

</p> HTML

Meta-tagovi: <meta>

Metapodaci sadrže podatke o veb stranici (koju koriste veb pregledači, serveri za pretragu, ...)

Navode se unutar <head> taga

Neki meta-tagovi koriste http-equiv atribut umesto imena

content=“Harry Potter Official Website." /> <meta name="keywords" content="harry potter, harry potter

and the deathly hallows, deathly hallows, ministry of

magic, resurrection stone, clock of invisibility" />

content="text/html; charset=iso-8859-1" /> HTML

Meta tagovi za pomoć veb pretraživačima i serverima

content="type of document (character encoding)" />

content="how often to refresh the page (seconds)" />

</head> HTML

Meta tagovi za opis stranice

<head>

<meta name="author"

content="web page's author" />

content="web page version and/or last modification date"

content="the software used to create the page" />

content="how you want search engines to display your page"

content="words to associate with your page (comma

separated)" />

</head> HTML

Cascading Style Sheets (CSS)

Definiše izgled, raspored i prezentaciju informacija na veb stranici

HTML opisuje sadržaj stranice

Opisuje kako se informacija prikazuje, a ne šta se prikazuje

Može se uključiti unutar HTML dokumenta ili zasebnom .css fajlu

Osnovna CSS sintaksa

Svaki CSS fajl sadrži pravila

Svako pravilo počinje selektorom

Selektor bira određene HTML elemente i na njih primenjuje stilove zadate property-jem

selector {

property: value;

font-family: sans-serif;

color: red;

Dodavanje CSS fajla: <link>

Jedna HTML stranica može uključiti više CSS fajlova

<head>

</head> HTML

rel="stylesheet" type="text/css" />

Uključivanje CSS komandi: <style>

CSS komande se mogu uključiti i unutar HTML stranice

Tada te komande važe samo unutar te stranice

<head>

p { font-family: sans-serif; color: red; }

h2 { background-color: yellow; }

</style>

</head>

CSS stil kao HTML atribut

CSS komande mogu se navoditi kao vrednost style atributa bilo kog HTML taga

Tada taj stil važi samo za taj HTML tag

This is a paragraph</p>

This is a paragraph

output

CSS boje p {

color: red;

background-color: yellow;

This paragraph uses the style above output

color Boja teksta unutar elementa

background-color Pozadinska boja elementa

Specifikacija boja

Imena boja: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), yellow

RGB kodovi: red, green, and blue komponente od 0 (none) do 255 (full) hex kodovi: RGB vrednosti u heksadecimalnom brojnom sistemu od 00 (0, none)

do FF (255, full)

p { color: red; }

h2 { color: rgb(128, 0, 196); }

h4 { color: #FF8800; }

This paragraph uses the first style above

This h2 uses the second style above.

This h4 uses the third style above. output

Grupisanje stilova

Selektor može odabrati više HTML elemenata razdvojene zarezom

Individualni elementi mogu imati dodatno svoje stilove

p, h1, h2 {

color: green;

This paragraph uses the above style.

output

This h2 uses the above styles.

CSS komentari /*…*/

Komentari u jednom redu // nisu podržani u CSS – u

HTML komentari  takođe nisu podržani u CSS – u

/* This is a comment.

It can span many lines in the CSS file. */

color: red; background-color: aqua;

CSS fontovi

property value

font-family Definiše font

font-size Definiše veličinu fonta

font-style Uključuje ili isključuje italic stil

font-weight Uključuje ili isključuje bold stil

font-family

Fontovi koji sadrže više reči u svom imenu stavljaju se pod navodnicima

font-family: Georgia;

font-family: "Courier New";

This paragraph uses the first style above.

This h2 uses the second style above. output

font-family

Može se navesti više fontova od najvećeg do najmanjeg prioriteta

Generički fontovi: serif, sans-serif, cursive, fantasy, monospace

font-family: Garamond, "Times New Roman", serif;

This paragraph uses the above style.

output

font-size

jedinice: pixels (px) vs. point (pt) vs. m-size (em)

16px, 16pt, 1.16em Ugrađene veličine: xx-small, x-small, small, medium, large, x-

large, xx-large, smaller, larger Procentualne veličine: 90%, 120%

font-size: 24pt;

This paragraph uses the style above.

output

font-weight, font-style

Bilo koji od gornjih stilova se može pojedinačno uključiti ili isključiti

font-weight: bold;

font-style: italic;

output

CSS tekst

property value

text-align Poravnanje teksta unutar HTML elementa

text-decoration Ukrasi poput podvučenog teksta

line-height, word-spacing, letter-spacing

Praznine između različitih delova teksta

text-indent Uvlačenje prvog slova paragrafa

text-align

text-align može biti left, right, center ili justify

blockquote { text-align: justify; }

h2 { text-align: center; }

The Gollum’s Quote

We wants it, we needs it. Must have the precious. They stole it from us.

Sneaky little hobbitses. Wicked, tricksy, false!

output

text-decoration

Ukras može biti overline, line-through, blink, ili none

Efekti se mogu kombinovati:

text-decoration: overline underline;

text-decoration: underline;

output

list-style-type

ol { list-style-type: lower-roman; }

Moguće vrednosti: i. none : No marker ii. disc (default), circle, square iii. Decimal: 1, 2, 3, etc. iv. decimal-leading-zero: 01, 02, 03, etc. v. lower-roman: i, ii, iii, iv, v, etc. vi. upper-roman: I, II, III, IV, V, etc. vii. lower-alpha: a, b, c, d, e, etc. viii. upper-alpha: A, B, C, D, E, etc. x. lower-greek: alpha, beta, gamma, etc. others: hebrew, armenian, georgian, cjk-ideographic, hiragana…

CSS pozadina

property value

background-color Boja pozadine

background-image Pozadinska slika

background-position Pozicija pozadinske slike

background-repeat Da li se, i kako, ponavlja pozadinska slika

background-attachment Da li se pozadisnka slika pomera sa stranicom

background Skraćenica za postavljanje svih pozadinskih osobina

background-image

body {

background-image: url("images/draft.jpg");

background-repeat

repeat (default), repeat-x, repeat-y, ili no-repeat

body {

background-repeat: repeat-x;

background-position

body {

background-repeat: no-repeat;

background-position: 370px 20px;

HTML id atribut

HTML elementu može se dodati id atribut Njegova vrednost mora biti jedinstvena na

stranici, tj. može se iskoristiti samo jedanput

<p>Coding Horror! Coding Horror!</p>

<p id="mission">Our mission is to combine programming and

<q>human</q> factors with geekiness!</p>

Coding Horror! Coding Horror!

Our mission is to combine programming and “human” factors with geekiness! output

CSS id selektor

Stil se primenjuje samo na element čija je vrednost id atributa jednaka „mission“

#mission {

font-style: italic;

font-family: "Garamond", "Century Gothic", serif;

Our mission is to combine programming and “human” factors with geekiness! output

HTML class atribut

Preko class atributa, HTML elementi se mogu grupisati i na tu grupu primeniti stil

Za razliku od id-a, vrednost class atributa se može koristiti više puta

<p class="shout">Coding Horror! Coding Horror!</p>

<p class="special">See our special deal on Droids!</p>

<p class="special">Today only!</p> HTML

See our special deal on Droids!

Today only! output

CSS class selektor

CSS stil se primenjuje na više HTML elemenata

.special {

font-weight: bold;

p.shout {

color: red;

font-family: cursive;

output

Today only!

CSS class selektor

HTML element može imati više klasa

<p class="shout">Coding Horror! Coding Horror!</p>

<p class="special shout">Today only!</p> HTML

output

Today only!

CSS Pseudo klase

a:link { color: #FF0000; } /* unvisited link */

a:visited { color: #00FF00; } /* visited link */

a:hover { color: #FF00FF; } /* mouse over link */

Buy Early Buy Often!

output

CSS Pseudo klase

class description

:active Aktivan ili elektovan element

:focus Element koji je u fokusu (preko tastature)

:hover Element preko kojeg je pozicioniran kursor

:link Veza koja još nije posećena

:visited Veza koja je već posećena

:first-letter Prvo slovo teksta

:first-line Prvi red teksta

:first-child Element koji se pojavljuje prvi unutar datog elementa

CSS za sekcije stranice

Poželjno je stilizovati individualne elemente, grupe elemenata i sekcije teksta za kreiranje kompleksnih rasporeda stranica

Sekcije stranice: <div>

<div> služi za logičko grupisanje elemenata na stranici

Podrazumevano se ne prikazuje na stranici, ali je blokovski element

<h2>Coding Horror! Coding Horror!</h2>

<p>We'll beat any advertised price!</p>

</div> HTML

We’ll beat any advertised price!

output

Sekcije teksta: <span>

<span> služi za redovsko grupisanje elemenata na stranici

<h2>Coding Horror! Coding Horror!</h2>

<p>See our <span class="special“>spectacular</span> deal on Droids!</p>

<p>We'll beat <span class="shout“> any advertised price</span>!</p>

See our spectacular deal on Droids!

We’ll beat any advertised price!

output

CSS Box Model

Svaki HTML element sastoji se od: Sadržaja

Okvira oko elementa

Padinga – praznine između sadržaja elementa i okvira

Margine – praznine između okvira elementa i ostalih HTML elemenata

CSS okvir

Border: Tri komponente: Debljina: px, pt, em, ili thin, medium, thick

Stil: none, hidden, dotted, dashed, double, groove, inset, outset, ridge, solid

h2 { border: 5px solid red; }

output

This is a heading.

CSS okvir

property description

border-color, border-width, border-style

Okvir sa sve 4 strane

border-bottom, border-left, border-right, border-top

Okvir sa pojedinačne strane

border-bottom-color, border-bottom-style, border-bottom-width, border-left-color, border-left-style, border-left-width, border-right-color, border-right-style, border-right-width, border-top-color, border-top-style, border-top-width

Pojedinačni stil na pojedinačnoj strani

CSS Pading

padding Postavlja pading na sve 4 strane

padding-bottom

Postavlja pading na pojedinačnim stranama

padding-left

padding-right

padding-top

CSS Pading

p { padding: 20px; border: 3px solid black; }

h2 { padding: 0px; background-color: yellow; }

This is a first paragraph.

This is a second paragraph.

output

This is a heading

CSS Margine

margin Postavlja marginu na sve 4 strane

margin-bottom

Postavlja marginu na pojedinačnim stranama

margin-left

margin-right

margin-top

CSS Margine

margin: 50px;

background-color: fuchsia;

output

This is a second paragraph

This is a first paragraph

W3C CSS Validator

jigsaw.w3.org/css-validator/

Proverava da li CSS fajl zadovoljava CSS specifikacije

<a href="http://jigsaw.w3.org/css-

validator/check/referer">

<img src="http://jigsaw.w3.org/css-validator/images/vcss"

alt="Valid CSS!" /></a>

</p> CSS

output

URL i veb serveri

Kada se ukuca URL u pregledaču: Vaš kompjuter traži IP adresu servera na

kojem se nalazi stranica uz pomoć DNS-a

Vaš pregledač se povezuje na tu IP adresu i šalje zahtev za zadatim fajlom

Softver na serveru (npr. Apache) uzima fajl sa lokalnog diska na serveru

Server šalje fajl veb pregledaču

http://server/path/file

URL i veb serveri (nastavak)

Web/Application Server

Apache, Websphere

SW(Java Servlets, XML Files)

Database

URL i veb serveri (nastavak)

Nekada URL sadrže program koji veb server treba da pokrene, a zatim prihvata rezultat i šalje pregledaču

U ovom primeru, serveru facebook.com nalaže se da pokrene program home.php i da se prikaže rezultat pokretanja programa

http://www.facebook.com/home.php

Veb programiranje na serverskoj

strani

Stranice na serverskoj strani predstavljaju programe napisane u jednom od mnogobrojnih veb programskih jezika i okruženja

Primeri: PHP, Java/JSP, Ruby on Rails, ASP.NET, Python, Perl

Veb programiranje na serverskoj

strani (nastavak)

Takođe zvano i server side scripting:

Dinamički menja i dodaje sadržaj veb strane

Odgovara na zahteve korisnika poslate kroz HTML forme

Pristupa lokalnim fajlovima i bazama podataka, i vraća rezultat veb pregledaču

Prilagođava veb strane tako da budu korisne pojedinačnim korisnicima

Obezbeđuje sigurnost pošto se kod sa serverske strane ne može videti u pregledaču

Šta je PHP?

"PHP Hypertext Preprocessor"

Jezik koji se izvršava na serverskoj strani Koristi se za pravljenje dinamičkih veb

stranica Prikazuje različit sadržaj u zavisnosti od

konteksta

Interaguje sa drugim servisima, na primer, bazama podataka

Ima mogućnost autentifikacije korisnika

PHP se može ugraditi u XHTML kod

Životni ciklus PHP zahteva

Hello world!

User’s computer Server computer

Hello.php

Hello World!

print "Hello, world!";

?> PHP

Hello world!

output

Prikaz PHP skripta

Promenljive

Imena promenljivih su „case-sensitive“, i uvek počinju znakom $

PHP je slabo tipiziran jezik - promenljive su implicitno deklarisane po operatoru dodele (ne piše se tip promenljive)

$user_name = “mundruid78"; $age = 16;

$drinking_age = $age + 5;

$this_class_rocks = TRUE; PHP

$name = expression; PHP

Promenljive

Osnovni tipovi: int, float, boolean, string, array, object, NULL Uz pomoć funkcije is_type ispituje se tip

promenljive, na primer is_string Funkcija gettype vraća tip promenljive kao

string

PHP u mnogim slučajevima automatski konvertuje promenljive iz jednog u drugi tip: string → int automatska konverzija sa + int → float automatska konverzija sa /

type-cast sa (type): $age = (int) "21";

Aritmetički operatori

+ - * / % . ++ --

= += -= *= /= %= .=

Mnogi operatori pokreću automatsku konverziju: 5 + "7" kao rezultat vraća 12

Komentari

# single-line comment

// single-line comment

multi-line comment

*/ PHP

Tip string

Pojedinačnim karakterima stringa pristupa se preko indeksa koji se navodi u uglastim zagradama []

Ne postoji char tip podataka, svaki karakter je string

Spajanje stringova vrši se uz pomoć . (tačke), a ne + 5 + "2 turtle doves" === 7

5 . "2 turtle doves" === "52 turtle doves"

$favorite_food = "Ethiopian";

print $favorite_food[2];

$favorite_food = $favorite_food . " cuisine";

print $favorite_food;

Interpretirani stringovi

Stringovi između ““ su interpretirani To znači da će promenljive navedene

između njih prikazivati svoju vrednost Stringovi između ‘’ nisu interpretirani

$age = 16;

print "You are " . $age . " years old.\n";

print "You are $age years old.\n"; # You are 16 years old.

print ' You are $age years old.\n '; # You are $age years old. \n PHP

if/else naredba

if (condition) {

statements;

} elseif (condition) {

statements;

} else {

statements;

for petlja

for (initialization; condition; update) {

statements;

for ($i = 0; $i < 10; $i++) {

print "$i squared is " . $i * $i . ".\n";

while petlja

while (condition) {

statements;

} while (condition);

Primer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSE 190 M: Embedded PHP</title> </head> <body> <?php for ($i = 1; $i <= 10; $i++) { print "<p> I can count to $i! </p>\n"; }?> </body> </html>

Primer - output

I can count to 1!

I can count to 2!

I can count to 3!

I can count to 4!

I can count to 5!

I can count to 6!

I can count to 7!

I can count to 8!

I can count to 9!

I can count to 10!

output

Primer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSE 190 M: Embedded PHP</title> </head> <body> <?php for ($i = 5; $i >= 1; $i--) { ?> <p> <?= $i ?> bottles of beer on the wall, <br /> <?= $i ?> bottles of beer. <br /> Take one down, pass it around, <br /> <?= $i - 1 ?> bottles of beer on the wall. </p> <?php } ?> </body> </html> PHP

Primer - output

5 bottles of beer on the wall, 5 bottles of beer. Take one down, pass it around, 4 bottles of beer on the wall. 4 bottles of beer on the wall, 4 bottles of beer. Take one down, pass it around, 3 bottles of beer on the wall. 3 bottles of beer on the wall, 3 bottles of beer. Take one down, pass it around, 2 bottles of beer on the wall. 2 bottles of beer on the wall, 2 bottles of beer. Take one down, pass it around, 1 bottles of beer on the wall. 1 bottles of beer on the wall, 1 bottles of beer. Take one down, pass it around, 0 bottles of beer on the wall.

output

Nizovi u PHP - u

$name = array(); # create $name = array(value0, value1, ..., valueN); $name[index] # get element value $name[index] = value; # set element value $name[] = value; # append $a = array(); # empty array (length 0) $a[0] = 23; # stores 23 at index 0 (length 1) $a2 = array("some", "strings", "in", "an", "array"); $a2[] = "Ooh!"; # add string to end (at index 5)

Funkcije nad nizovima

$tas = array("MD", "BH", "KK", "HM", "JP"); for ($i = 0; $i < count($tas); $i++) { $tas[$i] = strtolower($tas[$i]); } # ("md", "bh", "kk", "hm", "jp") $morgan = array_shift($tas); # ("bh", "kk", "hm", "jp") array_pop($tas); # ("bh", "kk", "hm") array_push($tas, "ms"); # ("bh", "kk", "hm", "ms") array_reverse($tas); # ("ms", "hm", "kk", "bh") sort($tas); # ("bh", "hm", "kk", "ms") $best = array_slice($tas, 1, 2); # ("hm", "kk")

Primer

<?php $stooges = array("Larry", "Moe", "Curly", "Shemp"); for ($i = 0; $i < count($stooges); $i++) { print "<p>Moe slaps {$stooges[$i]}</p>"; }?> <hr/> <?php foreach ($stooges as $stooge) { print "<p>Moe slaps $stooge</p>"; # even himself! } ?>

Primer - output

Moe slaps Larry

Moe slaps Moe

Moe slaps Curly

Moe slaps Shemp ------------------------------------------------------------------------------------------------------------------------------------ Moe slaps Larry

Moe slaps Moe

Moe slaps Curly

Moe slaps Shemp

output

Hvala na pažnji! Pitanja?

Email: stefan.stanimirovic@pmf.edu.rs

od html a do php a - university of nišpmf.ni.ac.rs/pmf/vesti/uvod u web programiranje.pdf · od...

Documents

091_tutorial html + mysql + php

tutorial html + my sql + php

crud html php mysql

da html in_poi, verso php

php, html, state

databases -- html and php ii › ... › lectures ›...

autor: michael puff · 2011-03-03 · 2 php und html 2 php...

html, javascript, jquery, php

modul html php

introduction to html & php

php y html

curs html, php, mysql

caelum html-css-javascript-php

tutorial html + mysql + php

html programiranje.pdf

curso html php

html php mysql

caelum html css javascript php

1 liens php mysql html

php: interacción con html