Omerović Haris - Maturski Rad

JU MJEŠOVITA SREDNJA ELEKTROTEHNIČKA ŠKOLSKA GODINA ŠKOLA TUZLA 2012./2013.

MATURSKI RADPredmet: Web programiranje

Tema: Izrada dinamičke web aplikacije – Music Shop

MENTOR: UČENIK:Dejan Bojić, dipl. ing.el.teh. Omerović Haris Razred: IVt2

TUZLA, maj, 2013.god.

Izrada dinamičke web stranice

Sadržaj

Contents1. Uvod........................................................................................................................................32. PHP.........................................................................................................................................4

2.1. Šta je PHP?.....................................................................................................................43. OSNOVE PHP-a.....................................................................................................................5

3.1. Uključivanje PHP skripte u HTML document.................................................................53.2. Komentari........................................................................................................................53.3. Objekti..............................................................................................................................5

4. VARIJABLE, KONSTANTE I NIZOVI...............................................................................64.1. Varijable...........................................................................................................................64.2. Tipovi varijabli.................................................................................................................64.3. Konstante.........................................................................................................................64.4. Nizovi (Array)..................................................................................................................64.5. Definiranje niza................................................................................................................6

5. Rad sa Bazama Podataka........................................................................................................75.1 Uvod..................................................................................................................................75.2 MySQL Baza podataka.....................................................................................................7

6. Šta je CSS?..............................................................................................................................97.Šta je to HTML?....................................................................................................................10

7.1 Struktura HTML dokumenta...........................................................................................107.2 Komentari.......................................................................................................................107.3 Izrada naslova.................................................................................................................117.4 Osnovno oblikovanje teksta............................................................................................117.5 Dodavanje CSS stilova...................................................................................................12

8. Izrada.....................................................................................................................................138.1. Izrada zaglavlja,hedera..................................................................................................138.2. Izrada navigacije (Meni)...............................................................................................148.3. Izrada banera sa strane...................................................................................................158.4. Izrada footer-a................................................................................................................168.5. Izrada stranice 'Početna'.................................................................................................18

Izrada dinamičke web stranice

1. UvodDinamičke web strane web sajta su stranice koje imaju sposobnost da se mijenjaju

same na osnovu podataka i upita koje primaju od korisnika koji gleda web sajt. Koriste se najčešće prilikom izrade zahtjevnih web stranica koji moraju, apsolutno, da budu prilagođeni zahtijevima korisnika koji pregleda web sajt. Takođe se koriste za povezivanje s bazom podataka i njenom manipulacijom. Upotrebom ove tehnike je moguće ostvariti mnogo različitih prikaza na web sajtu kreiranjem i programiranjem samo jedne dinamičke strane.Tehnike koje se koriste za izradu dinamičke web stranice su najčešće: PHP, COLD FUSION, JAVA SCRIPT i ASP. Njihove ekstenzije web stranice su .php, .cf, .jsp, .asp.

U ovom maturskom radu bit će primjenjeno nekoliko tehnika kao što su : HTML, CSS, PHP, JavaScript, MySQL.Zamišljena je izrada web sajta koji će predstavljati muzički šop na internetu.Takođe služit će kako bi ljudi na internetu pregledali novosti iz muzičkog šopa kao što su : akcije, nagradne igre, novosti u plaćanju ...

Osim novosti o muzičkom šopu, čitaoci i posjetioci web sajta imat će mogućnost pregleda vijesti iz muzike, najave koncerata kako u regionu tako i u svijetu.Web sajt će biti uređen na taj način da pristupu pisanja vijesti i novosti iz navedenih oblasti ima samo registrovani korisnik ( u ovom slučaju admin).

Izrada dinamičke web stranice 2012

2. PHP

2.1. Šta je PHP?

PHP svoj naziv temelji na unaprijed definisanih definicija.To je skraćenica za PHP:Hypertext predprocessor.Iako je svoj razvoj započeo kao “hypertext predprocessor” danas je PHP uveliko proširio svoje mogućnosti I ta definicija se gotovo vise i ta definicija se gotovo vise i ne koristi.Osim kao podrška web aplikacijama danas se PHP koristi i za konzolne aplikacije ali je moguće pisati i aplikacije u PHP-u sa punim grafičkim sučeljem,upotrebom OpenGL biblioteke za trodimenzionalni prikaz i slično.Danas je PHP vrlo moderan programski jezik koji se najčešće koristi na webu.

Svoj razvoj PHP počinje u rukama programera Rasmusa Lerdorfa koji je i danas glavna osoba zadužena za njegov razvoj.PHP je u početku tek bila pomoć Rasmusu Lerdorfu za izradu vlastite web stranice tako što je s nekoliko CGI programa pisanih u programskom jeziku C zamjenio programe pisane u programskom jeziku Perl koje je do tada koristio.Verzije PHP-a 1 i 2 nisu bile previse popularne,ali 3. Verzija,čija konačna verzija je izašla 1998. Godine privukla je veliki broj zainteresovanih ovog novog programskog jezika.2000. godine,izašla je i 4. Verzija, da bi 2004. Izašla i aktuelna 5.verzija koja uključuje i brojne novosti kao što su podrška za Unicode znakove,objektno orijentisani pristup,podrška za XML,poboljšana podrška pristupa MySQLbazi podataka,uključenu podršku za upotrebu Web servisa kao i noviju verziju optimizatora koda Zend čime su postignute znatno bolje performance samog koda.

Jedan od razloga vrlo dobre prihvaćenosti PHP-a je vrlo slična sintaksa programskom jeziku C. Veliki broj osnovnih funkcija ima istu sintaksu.Početnicima je takođe veoma dobar jer nije ograničavajući kao neki drugi programski jezici budući da nema deklaracija tipova varijabli, a moguće je i istu varijablu koristiti za pohranu različitih vrsta vrijednosti. Iako ove karakteristike programski kod čini manje osjetljivim na greške jednostavnije ih je napraviti budući da kompajler na njih neće upozoriti.

Danas se PHP koristi na nešto manje od dvadeset miliona različitih web stranica prema istraživanju firme Netcraft.

JU Mješovita srednja elektrotehnička škola Tuzla | 2. PHP 4


3. OSNOVE PHP-a

PHP stranica sadrži tekst i HTML tagove baš kao i standardna HTML stranica, ali uz to PHP stranica može sadržavati i serverske skripte (niz naredbi u nekom od skriptnih jezika koje podržava PHP). Datoteka koja sadrži PHP skripte mora imati ekstenziju .php da bi se naredbe u PHP skriptama izvršile. Korištenjem PHP-a možemo generirati cijelu HTML stranicu ili samo jedan njezin dio.

3.1. Uključivanje PHP skripte u HTML document

Programe pisane u PHP-u nije potrebno prevoditi u izvršni oblig(eng.Compile) već se oni izvode prilikom pokretanja u programu koji u realnom vremenu izvršava kod (Interpreter).Programi se pišu kao dio HTML stranice. Sam program se nalazi unutar HTML oznake koji počinje sa <?PHP ,a završava sa ?>.Sve unutar oznake se smatra PHP programom.

Primjer najjednostavnijeg programa pisanog u PHP je ispisivanje nekog tekstaPrimjer:<html><head><title>PHP program</title></head><body bgcolor="#ffffff"><?php echo "Moj prvi PHP program"; ?></body></html>

3.2. Komentari

Unutar samog koda mogu se koristiti i komentari.Postoje tri oznake komentara. Prve dvije su linijski komentari,a to su oznake // i /* */ za blokovke komentare.Primjer linija koje su komentarisane su: Linijski komentar i Blokovski komentar// Neki linijski komentar/* blokovskikomentar */

3.3. Objekti

Da, istina je. PHP podržava objektno programiranje.Iako ne onako kako ga podržava C++ i slični programski jezici, ali svoje funkcije možete grupisati u klase te stvarati instance tog objekta kroz cijelu aplikaciju.

<?class object { var $testna; function ispisi() {echo $this->testna;}?>

JU Mješovita srednja elektrotehnička škola Tuzla | 3. OSNOVE PHP-a 5


4. VARIJABLE, KONSTANTE I NIZOVI

4.1. Varijable

Varijable su nizovi znakova i brojeva koje počinju s oznakom $.Naziv varijable mora počinjati slovom ili oznakom_. Ostali znakovi mogu sadržavati brojeve,slova i oznaku _.Varijable u PHP-u razlikuju velika i mala slova.

4.2. Tipovi varijabli

U programskom jeziku PHP nije potrebno deklarisati varijable i na taj način zadati vrstu podataka koja se u njih može smjestiti. Osim toga ,moguće je i mijenjati vrstu podataka koji se smješta u neku varijablu.Php omogućava unutar istog bloka upisivanje numeričke vrijednosti u neku varijablu,da bi se odmah zatim u nju upisao niz znakova.

Vrste podataka koje su na raspolaganju su : Boolean, Float, Integer, String.

4.3. Konstante

Php raspolaže i mogućnosti korištenja konstanti.Razlika između konstanti i varijabli je u tome što se konstante ne pišu s početnom oznakom $, već se piše samo naziv konstante.Npr: <?php

define(„PI“, 3.14);// Ispisuje 3.14echo PI;?>

4.4. Nizovi (Array)

Jedan od složenih PHP tipova su nizovi. U upotrebi su dvije vrste nizova:

nizovi sa numeričkim indeksiranjem asocijativni nizovi

4.5. Definiranje niza

Niz definiramo tako da nizu dadnemo ime, zatim ključna riječ Array,a u zagradama navedemo njegove članove odvojene zarezom. Primjer:

<?php$niz = array('','jedan','dva','tri','četiri');print_r($niz);?>

JU Mješovita srednja elektrotehnička škola Tuzla | 4. VARIJABLE,KONSTANTE I NIZOVI

6


5. Rad sa Bazama Podataka

5.1 Uvod

Pri izradi web aplikacija, najčešće je potrebno povezati aplikaciju s nekom bazom podataka. PHP podržava više vrsta baza, ali najjednostavnije povezati aplikaciju s mySQL bazom podataka.

5.2 MySQL Baza podataka

Dolje navedene funkcije omogućavaju nam pristup MySQL serverima. Da bi ove funkcije bile dostupne, potrebno je kompajlirati php sa mysql podrškom koristeći --with-mysql .Naredba: mysql_connect

Otvara vezu prema mySQL serveru.Defaultni parametri koji se koriste su: host:port = 'localhost:3306', username = ime korisnika koji je vlasnik serverskog procesa i password ="".Primjer:<?php$link = mysql_connect ("localhost", "username", "secret")or die ("Could not connect");print ("Connected successfully");mysql_close ($link);?>

Vrlo je bitno da se svaki otvoreni connection zatvori sa funkcijom mysql_close. Ako to ne navedemo, veza će se zatvoriti tek nakon izvršenog cijelog PHP programa.

Naredba: mysql_select_db

Nakon što smo otvorili vezu s mySQL serverom, potrebno je odabrati bazu podataka s kojom ćemo raditi na serveru.Vraća cijeli broj veći od nule, ako je sve ok, inače vraća nulu.mysql_select_db() postavlja trenutno aktivnu bazu na trenutno otvorenom linku na server. Ako nije naveden link u pozivu funkcije, koristi se posljednji otvoreni.

Naredba: mysql_query

JU Mješovita srednja elektrotehnička škola Tuzla | 5. Rad sa Bazama Podataka 7


Sad kad smo se povezali na server i odabrali bazu s kojom ćemo raditi, potrebno je izvršiti prvi upit nad bazom !

NAPOMENA: Za postavljanje upita trebate detaljnije poznavati mySQL. U ovom kratkom tutorialu ću pretpostaviti da poznate osnove, a ako to nije slučaj, imate mySQL manual u poglavlju dodaci...int mysql_query (string query [, int link_identifier])Funkcija vraća nulu ako je došlo do greške, a ako je sve prošlo ok, onda vraća cijeli broj različit od nule. Povratna vrijednost nema veze s brojem redova koji su vraćeni, tako da Vas to ne zbunjuje...

Konkretan primjer koji koristi sve navedeje funkcije:

<?php$veza = mysql_connect('localhost','mladen','blablabla');if (!$veza) die("Gre1ka: Ne mogu se spojiti na server !");$ok = mysql_select_db('moja_baza');if(!$ok) die("<BR> Gre1ka: Ne mogu otvoriti bazu ! <BR>");if (mysql_errno()) die("<BR>".mysql_errno().": ".mysql_error()."<BR>");$upit="SELECT * FROM tablica1 WHERE 1=1";$rezultat_upita = mysql_query($upit);if (mysql_errno()) die("<BR>".mysql_errno().": ".mysql_error()."<BR>");while($redak=mysql_fetch_array($rezultat_upita)) {

echo $redak['PrviPodatak'],' '.$redak['DrugiPodatak'];

echo <BR>;}mysql_free_result($rezultat_upita);mysql_close($veza);?>

Dakle, prvo otvaramo vezu na server, potom odabiremo bazu na serveru, te izvršavamo upit i rezultati se nalaze u $rezultat_upita. Potom idemo redak po redak kroz $rezultat_upita i ispisujemo redak po redak iz „tablice1“ u bazu „moja_baza“

JU Mješovita srednja elektrotehnička škola Tuzla | 5. Rad sa Bazama Podataka 8


6. Šta je CSS?

CSS je skraćenica od "Cascading Style Sheets", a služi za definisanje stilova koji određuju izgled HTML elemenata (font, boje, pozadine, razmake...). Ti stilovi se nadovezuju u "Style Sheets", externe fajlove sa .css extenzijom, ili jednostavno se pišu u zaglavlju HTML dokumenta ili čak inline, tj. na samim elementima.

Externi stilovi su i najbolji jer vam omogućuju uštedu vremena pri radu i pri redizajniranju Vašeg HTML dokumenta.

CSS su izmislili i specificirali ljudi iz W3C-a, a pojavili su se sa HTML-om 4.0 kao rešenje koje je proizašlo iz sve veće potrebe za odvajenjem sadržaja stranice od dizajna.

HTML je od početka zamišljen kao takav da se brine samo o sadržaju - znači trebao je samo da prikazuje paragrafe, tabele, heading-e, i sl. dok bi se za izgled brinuli browser-i. Ali, kako su mnogi tvorci browser-a počeli dodavati dodatne HTML tagove (kao što su font tag i color atribut) originalnom HTML-u, mnogi developeri sve su više nailazili na poteškoće u izradi svojih stranica. Da ne bi došlo do totalne zbrke, World Wide Web Consortium (W3C) - neprofitabilna organizacija, koja je odgovorna za standardizaciju HTML-a, kao dodatak verziji 4.0 HTML napravila je STILOVE (styles).

JU Mješovita srednja elektrotehnička škola Tuzla | 6. Šta je CSS? 9


7.Šta je to HTML?

HTML je skraćenica za HyperText Markup Language,što znači prezentacijski jezik za izradu web stranica.Hipertekst dokument stvara se pomoću HTML jezika.HTML jezikom oblikuje se sadržaj i stvaraju se hiperveze hipertekst dokumenta.Jednostavan je za upotrebu i lako se uči, što je jedan od razloga njegove opšte primjene i popularnosti.Svoju raširenost zahvaljuje jednostavnosti i tome što je od početka bio zamišljen kao besplatan i tako svima dostupan.Prikaz hipertekst dokumenta omogućuje web preglednik.Temeljna zadaća HTML jezika jest uputiti web preglednik kako prikazati hipertekst dokument.

7.1 Struktura HTML dokumenta

Svaki HTML dokument sastoji se od osnovnih građevnih blokova - HTML elemenata. Svaki, HTML element sastoji se od para HTML oznaka. Također, svaki element može imati i atribute kojim se definiraju svojstva tog elementa. Na samom početku HTML dokumenta preporučljivo je postaviti <!DOCTYPE> element, kojim se označava DTD čime se definira točna verzija standarda koja se koristi za izradu HTML dokumenta. Nakon <!DOCTYPE> elementa, <html> elementom označava se početak HTML dokumenta. Unutar <html> elementa nalaze se i <head> element te <body> element. <head> element predstavlja zaglavlje HTML dokumenta u kojemu se najčešće specificiraju jezične značajke HTML dokumenta kao i sam naslov stranice. Pomoću određenih HTML elemenata unutar zaglavlja dodaju se i stilska obilježja stranice, bila ona direktno ugrađena ili dodana kao referenca na vanjsku CSS datoteku. Često se unutar zaglavlja definišu i skripte kreirane u JavaScript jeziku.U <body> elementu kreira se sadržaj HTML dokumenta, odnosno , stranice koju on predstavlja.

Primjer jednog HTML elementa :

<!DOCTYPE html><html> <head> <title>Naziv stranice</title> </head> <body> <p>Ovdje se unosi sam sadržaj stranice.</p> </body></html>

7.2 Komentari

Komentare možemo unositi bilo gdje unutar HTML dokumenta i taj tekst neće biti prikazan na stranici, tj. moći će se vidjeti samo ako otvorite skriptu sa code editorom. Na ovaj

JU Mješovita srednja elektrotehnička škola Tuzla | 7.Šta je to HTML? 10


način možete sebi ostavljati poruke unutar dokumenta i sa tim porukama npr. skrenuti pozornost.

PRIMJER:



Najčešće će u boljem html editoru komentar biti ispisan sivim slovima kako bi se razlikovao od ostatka koda.

7.3 Izrada naslova

Naslove u html dokumentu oblikujemo radi uočljivosti i kako bi bili jedinstveni za cijelu web stranicu odnosno web site. Razlikujemo šest veličina naslova. Početni tag najvećeg naslova je <h1>, a završni </h1>. Najmanji naslov počinjemo s <h6>a završavamo sa </h6>. Početni i završnog html tag označavaju početak i završetak teksta naslova. Završni tag naslova ne treba slijediti tag za prelazak u novi redak <br>jer se prelazak obavlja automatski. Korištenjem ALIGN atributa, naslovi mogu biti poravnati desno, lijevo ili centrirani.

PRIMJER:<HTML><HEAD><TITLE>Kreiranje HTML naslova</TITLE></HEAD><BODY><H1 ALIGN=CENTER>1 Naslov</H1><H2 ALIGN=LEFT>2 Naslov</H2><H3 ALIGN=RIGHT>3 Naslov</H3><H4>4 Naslov</H4><H5 ALIGN=RIGHT>5 Naslov</H5><H6 ALIGN=CENTER>6 Naslov</H6></BODY></HTML>

7.4 Osnovno oblikovanje teksta

Kako bi oblikovali tekst unutar HTML dokunenta, potrebno je staviti određeni tag na početku teksta koji želimo oblikovati i završni tag na kraju texta.

Primjer:

<big> veliki tekst </big><b> podebljani tekst </b><em> nakrivljen tekst </em>



<u> podcrtan text </u><strong> "jaki" tekst </strong><i> nakrivljen tekst </i><sup> podignut tekst </sup><sub> spusten tekst </sub><del> precrtan tekst </del><code> tekst kompjuterskog koda </code><hr> vodoravna crta </hr>-veličina fonta:od 1 do 7<font size="6"> velicina fonta 6</font>

7.5 Dodavanje CSS stilova

Godine 1996., W3C prvi puta spominje ideju stilskih obrazaca (CSS – Cascading Style Sheets) za oblikovanje HTML dokumenta. Standard, koji je objavljen sredinom 1998.godine, omogućuje web dizajnerima da odvoje strukturu i oblik svojih dokumenata. CSS standard određuje tri vrste stilskih obrazaca:ugrađeni, linijski i vezani.

UGRAĐENI – Stilska obilježja se ugrađuju unutar <style> taga na početku samog HTML dokumenta. Stil pridružen određenom tagu primjenjuje se na sve tagove te vrste unutar dokumenta.

Primjer:<style type="text/css"></nowiki>.ime_stila { font-size: 36px;color: #000;background-color: #0F0;font-family: Arial, Helvetica, sans-serif;}.drugi_stil { color: #0F0; }</style>

LINIJSKI – Stilska obilježja ugrađuju se kroz cijeli HTML dokument. Svakom pojedinom HTML tagu možemo pridružiti svoja vlastita stilska obilježja.

Primjer:<p style="font-family: Arial, Helvetica, sans-serif; font-size: 36px; color: #F00;">Označeni tekst stylom</p>

VEZANI – Stilska obilježja pohranjena su u zasebnoj datoteci. Ta datoteka se može povezati s bilo kojim HTML dokumentom koristeći tag <link> koji se smješta unutar <head> taga.

Primjer: <link href="http//www.stranica.com/Unnamed Site 2/style.css" rel="stylesheet" type="text/css">


http://hr.wikipedia.org/wiki/CSS



http://hr.wikipedia.org/wiki/W3C


8. Izrada

8.1. Izrada zaglavlja,hedera

Na samom početku za naš web sajt planirana je izrada jedinstvenog logoa koji će jedinstveno predstavljati našu web stranicu. Dizajn logoa je jednostavan, na crnoj pozadnici bit će ispisano „Music Shop“ , te će taj tekst biti podvučen sa dvije linije u istoj boji kao što je i tekst. Ispod podcrtanih linija manjim fontom, kao citat bit će ispisane neke od poznatih citata o muzici. Logo je sastavni dio hedera koji radi na principu JavaScript tako što rotira tri različite slike (banera), dok se ispod logoa izmjenjuje samo citat. (Vidjeti sliku 1.).

Slika 1. Logo stranice

JavaScript koji služi kako bi se slike rotirale jedna za drugom dodaje se na stranicu na slijedeći način : <script src="js/js-image-slider.js" type="text/javascript"></script>

<link href="js/js-image-slider.css" rel="stylesheet" type="text/css" />

CSS kod za zaglavlje i header stranice izgleda ovako :

#header {width:960px;height: 200px;

}

dok css od JavaScripte koji se nalazi u headeru izgleda ovako:

#sliderFrame {position:relative;width:960px;margin: 0 auto;}#slider { width:960px;height:200px; background:#fff url(loading.gif) no-repeat 50% 50%; position:relative; margin:0 auto; left:-2;}#slider img {

position:absolute;border:none;

JU Mješovita srednja elektrotehnička škola Tuzla | 8. Izrada 13


display:none;}#slider a.imgLink {

z-index:2;display:none;position:absolute;top:0px;left:0px;border:0;padding:0;margin:0;width:100%;height:100%;

}

8.2. Izrada navigacije (Meni)

Nakon izrade logoa i zaglavlja prešli smo na izradu navigacije,tj. izradu glavnog menija.Meni je osmišljen na taj način da je pozadina menija crne boje sa gradientom, za pozadinu menija postavljena je takva slika. Klikom na jedan od linkova iz menija primjenjuje se zasebna klasa u css-u koja omogućava da se promjeni pozadina aktivnog linka, tj. onog linka na kojem se trenutno nalazimo. Takav aktivni link automatski mijenja boju pozadine i slova. (Vidjeti sliku 2.).

Slika 2. Navigacija stranice

CSS kode za navigaciju izgleda ovako :

#nav {height: 37px;width: 960px;background: #111 url('images/nav-bg.jpg') repeat-x scroll;

}#nav ul {

list-style: none;padding: 0;margin: 0;height: 32px;

}#nav ul li {

float: left;display: block;

}#nav ul li a {

display: block;color: #0071E1;display: block;font-size: 11px;font-weight: bold;text-transform: uppercase;font-family: Verdana, sans-serif;padding: 13px 15px 11px;text-decoration: none;

}



#nav ul li.selected {position: relative;top: 0px;

}

#nav ul li.selected a, #nav ul li.selected a:hover {background:#ddd url('images/nav-selected.jpg') repeat-x scroll;color: #333;padding: 17px 13px 13px;

}

8.3. Izrada banera sa strane

Nakon izrade navigacije prešli smo na izradu banera sa strane. Baneri sa strane treba da prestavljaju naziv naše web stranice ( Music Shop Tuzla). Baneri se nalaze sa lijeve i desne strane web stranice. (Vidjeti sliku 3.).

Slika 3. Side Baner

CSS kod za banere sa strana izgleda ovako :



.brand_right{height: 1500px;right: 50%;margin-right: -1000px;position: fixed;text-align: left;top: 0px;width: 506px;overflow: hidden;}.brand_left{height: 1500px;left: 50%;margin-left: -1000px;position: fixed;text-align: right;top: 0px;width: 505px;overflow: hidden;}.god_wrap{position: relative;}

8.4. Izrada footer-a

Došli smo do izrade footer-a. Footer predstavlja podnožje stranice, u našem slučaju footer je web sajta je isti na svim stranicama. U footeru ćemo navesti naziv naše teme, zatim jedan meni koji će sadržavati iste vrijednosti kao i navikacijski meni, te dio koji će služiti za povratak na vrh stranice.U footeru se takođe nalazi i dio copyrights. (Vidjeti sliku 4.).

Slika 4. footer stranice

CSS kod za footer izgleda ovako:#footer {

margin-top: 10px;}#footer p {

text-align: left;color: #999;font-size: 12px;



margin-left: 0;padding: 0;

}.footer-content {

padding: 30px 15px 60px;background:url(images/header2.png);

}#footer .footer-content p {

color: #666;position: relative;top: 12px;margin-left: 320px;

}#footer .footer-content p a {

color: #fff;font-family: Verdana, sans-serif;font-size: 16px;text-decoration: none;margin: 0 10px;padding-bottom: 2px;position: relative;top: 2px;

}#footer .footer-content p a:hover {

color: #fff;border-bottom: 2px solid #FFF;

}#footer .footer-content p a.backtotop {

float: right;font-size: 13px;top: 3px;

}#footer .footer-bottom {

padding: 7px 15px 0;height: 30px;color: #666;background: #111 url('images/nav-bg.jpg') repeat-x scroll;

}#footer .footer-bottom p {

color: #999;}#footer .footer-bottom p a {

color: #fff;font-weight: bold;

}



8.5. Izrada stranice 'Početna'

Pored pratećih dijelova web stranice (logo,zaglavlje,side baner,footer) na red dolazi izrada glavnog tijela stranice. Napravit ćemo tijelo stranice onako kako je zamišljeno, a držati se i same teme. Na početnoj stranici nalazit će se sidebar sa desne strane u kojem će se nalaziti anketa vezana za stranicu, facebook like box i prostor za reklame. Glavni kontejner stranice služit će za ispisivanje novosti o stranici i novosti o muzici i muzičkim događajima.Novosti će biti predstavljene i JavaSkriptom koja će vizuelno izmjenjivati vijesti. (Vidjeti sliku 5.).

Slika 5. tijelo straniceCSS kod za tijelo stranice izgleda ovako:#body {background: none;margin:0 auto;padding: 20px 0px;width: 936px;background-color: #ddd;}CSS kod za kontejner box izgleda ovako:

#content {float: left;width: 635px;

}CSS kod za naslov kontejner box-a :

#content h1 {color: #fff;font-family: Verdana, sans-serif;



font-size: 13px;letter-spacing: -0.5px;border-bottom: 1px solid #366E30;margin: 0;line-height: 1.9em;padding: 5px;font-weight: bold;background-color:#0071E1;

}

Kontejner box sadrži klasu box u kojoj se nalazi sadržaj straniceCSS kod izgleda ovako : .box {

margin: 0;padding: 10px;background-color: #fff;

}

Nakon izrade dijela u kojem će se prikazivati sadržaj stranice, slijedeći dio je JavaScript-a koja će ispisivati vijesti u vizuelnom prikazu. Ta skripta nalazi se na vrhu kontejnera odmah ispod naslova. (Vidjeti sliku 6.).

Slika 6. Izgled JavaScript-e za vijesti

CSS kod za vizuelni prikaz skripte za iščitavanje vijesti:

#featured{ width:600px; padding-right:0px; position:relative; border:5px solid #ccc; height:250px; overflow:hidden;background:#fff;}

Nakon izrad dijela za iščitavanje vijesti preko new slidera, ispod toga u kontejner boxu nalaze se te vijesti koje se upisuju pomoću CuteNews-a koji je snažan, a ujedno i jednostavan



CMS sistem.Postavljanje vijesti ima mogućnost admin ili registrovan korisnik koji ima te privilegije.(Vidjeti sliku 6.).

Slika 7. CuteNews iščitavanje vijesti

Nakon izrade kontejnera, pređimo na izradu sidebara sa desne strane.Sidebar sadrži anketu vezanu za našu temu ( Music Shop), zatim facebook like button i dio za reklame. (Vidjeti sliku 7.).

Slika 8. Izgled sidebar-a



Na kraju izrade Početne stranice možemo pogledati kompletan izgled i dizajn, sa svim prijenjenim CSS kodovima u cijelini.(Vidjeti slike 9. i 10.).

Slika 9. Gornji dio tijela stranice

Slika 10. Donji dio stranice

Documents

Omerović Haris - Maturski Rad