Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±

Od HTML – a do PHP – a

Stefan Stanimirović

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

Univerzitet u Nišu Email: [email protected]

2

Š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.

3

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

4

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

5

Veb serveri

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

Primeri:

Apache

Microsoft Internet

Information Server (IIS)

6

Veb pregledač

Softver koji prihvata i prikazuje dokumente sa veb servera Mozilla Firefox

Microsoft Internet Explorer (IE)

Apple Safari

Google Chrome

Opera

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

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

7

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

8

Veb jezici

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

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

9

HTML & CSS

10

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>

11

XHTML

Koristi XML kao format za označavanje

XML + HTML = XHTML

Standardizovan u 2000. godini

Striktna XHTML stranica predstavlja proširenje HTML tagova

12

Struktura XHTML strane

<!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>

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

13

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

14

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

15

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

16

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>

HTML

First Paragraph

Second Paragraph output

17

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

18

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

19

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>

20

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" />

21

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

<p>

Search

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

now!

</p> HTML

Search Google now!

output

22

http://www.google.com/

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>

HTML

Harry Potter and the Deathly Hallows

Wikipedia output

23

http://en.wikipedia.org/

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>

<p>

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

</p>

HTML

24

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

25

Slike <img>

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

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

<a href="http://harrypotter.net/">

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

title="Alas! Ear wax!"/>

</a> HTML

26

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>

HTML

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

27

Komentari 

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

HTML

CS courses are a lot of fun!

output

28

Naglašavanje teksta <em>,

<strong>

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

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

<p>

HTML is <em>really</em>,

<strong>REALLY</strong> fun!

</p>

HTML

HTML is really REALLY fun!

output

29

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

<ul>

<li>No shoes</li>

<li>No shirt</li>

<li>No problem!</li>

</ul> HTML

• No shoes

• No shirt

• No problem! output

30

Ugnježdene liste

<ul>

<li>Harry Potter characters:

<ul>

<li>Harry Potter</li>

<li>Hermione</li>

<li>Ron</li>

</ul>

</li>

<li>LOTR characters:

<ul>

<li>Frodo</li>

<li>Bilbo</li>

<li>Sam</li>

</ul>

</li>

</ul> HTML

31

Ugnježdene liste (nastavak)

• Harry Potter characters:

• Harry Potter

• Hermione

• Ron

• LOTR characters:

• Frodo

• Bilbo

• Sam output

32

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

ol (Ordered List) predstavlja numerisanu listu elemenata

<p>Apple business model:</p>

<ol>

<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

33

Česte greške sa listama

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

<ul>

<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

34

Greške sa ugnježdenim listama

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

<ul>

<li>Harry Potter characters:</li>

<ul>

<li>Harry Potter</li>

<li>Hermione</li>

<li>Ron</li>

</ul>

</li>

<li>LOTR characters:

<ul>

<li>Frodo</li>

<li>Bilbo</li>

<li>Sam</li>

</ul>

</ul> HTML

35

Definicione liste: <dl>, <dt>,

<dd>

dl predstavlja listu definicija

dt predstavlja term, dok dd predstavlja njegovu definiciju

<dl>

<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

jaded

Tired, bored, or lacking enthusiasm

frag

a kill in a shooting game output

36

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>

<tr><td>1,1</td><td>1,2 okay</td></tr>

<tr><td>2,1 real wide</td><td>2,2</td></tr>

</table> HTML

output

37

Naslov i natpis tabele: <th>,

<caption> <table>

<caption>My important data</caption>

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

<tr><td>1,1</td><td>1,2 okay</td></tr>

<tr><td>2,1 real wide</td><td>2,2</td></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

38

Citati <blockquote>

<blockquote> se koristi za duge

citate

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

<blockquote>

<p>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.</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

39

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>

HTML

Quoth the Raven, “Nevermore.”

output

40

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.

44

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

<p>

<a href="http://validator.w3.org/check/referer">

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

alt="Validate" />

</a>

</p> HTML

45

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

<meta name="description"

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" />

<meta http-equiv="Content-Type"

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

46

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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="refresh" content="5;url=http://www.bjp.com" />

<meta http-equiv="Content-Type"

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

<meta http-equiv="refresh"

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

</head> HTML

47

Meta tagovi za opis stranice

<head>

<meta name="author"

content="web page's author" />

<meta name="revised"

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

/>

<meta name="generator"

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

<meta name="description"

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

/>

<meta name="keywords"

content="words to associate with your page (comma

separated)" />

</head> HTML

48

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

49

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;

property: value;

...

property: value;

} CSS

p {

font-family: sans-serif;

color: red;

} CSS

50

Dodavanje CSS fajla: <link>

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

<head>

...

<link href="filename" type="text/css" rel="stylesheet" />

...

</head> HTML

<link href="style.css" type="text/css" rel="stylesheet" />

<link href="http://www.google.com/uds/css/gsearch.css"

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

HTML

51

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>

<style type="text/css">

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

h2 { background-color: yellow; }

</style>

</head>

HTML

52

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

<p style="font-family: sans-serif; color: red;">

This is a paragraph</p>

HTML

This is a paragraph

output

53

CSS boje p {

color: red;

background-color: yellow;

}

CSS

This paragraph uses the style above output

color Boja teksta unutar elementa

background-color Pozadinska boja elementa

54

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; }

CSS

This paragraph uses the first style above

This h2 uses the second style above.

This h4 uses the third style above. output

55

Grupisanje stilova

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

Individualni elementi mogu imati dodatno svoje stilove

p, h1, h2 {

color: green;

}

h2 {


} CSS

This paragraph uses the above style.

output

This h2 uses the above styles.

56

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. */

p {

color: red; background-color: aqua;

} CSS

57

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

58

font-family

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

p {

font-family: Georgia;

}

h2 {

font-family: "Courier New";

} CSS

This paragraph uses the first style above.

This h2 uses the second style above. output

59

font-family

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

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

p {

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

} CSS

This paragraph uses the above style.

output

60

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%

p {

font-size: 24pt;

} CSS

This paragraph uses the style above.

output

61

font-weight, font-style

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

p {

font-weight: bold;

font-style: italic;

} CSS


output

62

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

63

text-align

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

blockquote { text-align: justify; }

h2 { text-align: center; }

CSS

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

64

text-decoration

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

Efekti se mogu kombinovati:

text-decoration: overline underline;

p {

text-decoration: underline;

} CSS


output

65

list-style-type

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

CSS

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…

66

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

67

background-image

body {

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

}

CSS

68

background-repeat

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

body {


background-repeat: repeat-x;

}

CSS

69

background-position

body {


background-repeat: no-repeat;

background-position: 370px 20px;

} CSS

70

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>

HTML

Coding Horror! Coding Horror!

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

71

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;

} CSS


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

72

http://www.codinghorror.com/blog/

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

73

CSS class selektor

CSS stil se primenjuje na više HTML elemenata

.special {


font-weight: bold;

}

p.shout {

color: red;

font-family: cursive;

} CSS


output


Today only!

74

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!

75

CSS Pseudo klase

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

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

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

CSS

Buy Early Buy Often!

output

76

http://www.codinghorror.com/blog/

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

77

CSS za sekcije stranice

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

78

Sekcije stranice: <div>

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

Podrazumevano se ne prikazuje na stranici, ali je blokovski element

<div class="shout">

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


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

</div> HTML


We’ll beat any advertised price!

output


79

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>

HTML


See our spectacular deal on Droids!

We’ll beat any advertised price!

output

80

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

81

CSS okvir

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

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

Boja

h2 { border: 5px solid red; }

CSS

output

This is a heading.

82

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

83

CSS Pading


padding Postavlja pading na sve 4 strane

padding-bottom

Postavlja pading na pojedinačnim stranama

padding-left

padding-right

padding-top

84

CSS Pading

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

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

CSS

This is a first paragraph.

This is a second paragraph.

output

This is a heading

85

CSS Margine


margin Postavlja marginu na sve 4 strane

margin-bottom

Postavlja marginu na pojedinačnim stranama

margin-left

margin-right

margin-top

86

CSS Margine

p {

margin: 50px;

background-color: fuchsia;

} CSS

output

This is a second paragraph

This is a first paragraph

87

W3C CSS Validator

jigsaw.w3.org/css-validator/

Proverava da li CSS fajl zadovoljava CSS specifikacije

<p>

<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

88

PHP

89

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

90

http://server/path/file

URL i veb serveri (nastavak)

91

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

92

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

93

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

94

Š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

95

Životni ciklus PHP zahteva

96

Hello world!

User’s computer Server computer

Hello.php

Hello World!

97

<?php

print "Hello, world!";

?> PHP

Hello world!

output

Prikaz PHP skripta

98

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)

99

$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";

100

Aritmetički operatori

+ - * / % . ++ --

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

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

101

Komentari

102

# 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"

103

$favorite_food = "Ethiopian";

print $favorite_food[2];

$favorite_food = $favorite_food . " cuisine";

print $favorite_food;

PHP

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

104

$age = 16;

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

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

PHP

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

if/else naredba

105

if (condition) {

statements;

} elseif (condition) {

statements;

} else {

statements;

}

PHP

for petlja

106

for (initialization; condition; update) {

statements;

}

PHP

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

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

}

PHP

while petlja

107

while (condition) {

statements;

} PHP

do {

statements;

} while (condition);

PHP

Primer

108

<!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>

PHP

Primer - output

109

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

110

<!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

111

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

112

$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)

PHP

Funkcije nad nizovima

113

$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")

PHP

Primer

114

<?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! } ?>

PHP

Primer - output

115

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?

116

Email: [email protected]

Od HTML a do PHP a - University of Nišpmf.ni.ac.rs/pmf/vesti/Uvod u web programiranje.pdf · od html ± a do php ± a 6whidq6wdqlplurylü 'hsduwpdq]dudþxqduvnhqdxnh prirodno ±

Documents