Pravljenje tabele u MySQL-u

Gimnazija Ivanjica Izrada dinamike web straniceGimnazija Ivanjica Izrada dinamike web stranice

GIMNAZIJAIVANJICA

MATURSKI RAD

PREDMET: Web design

TEMA: Izrada dinamike web stranice Profesor: Uenik: Zoran Vueti Nenad Kosti IV4Ivanjica

2010Sadraj:3Pravljenje tabele u MySQL-u

3Otvaranje wamp servera

4Kreiranje baze podataka

4Kreiranje tabele

5Popunjavanje tabele

6DSN (Data Source Name, ime izvora podataka)

8Kreiranje dinamike web stranice u Dreamweaver-u

8Konfigurisanje sajta

11Spajanje baze podataka i web sajta

13Pravljenje stranice koja se zasniva na bazi podataka

18Dodavanje novog zapisa u bazu podataka

26Stranice ADMIN

32Stranica Izbrii

36Pretraga zapisa iz baze podataka

36Pravljenje stranice za pretragu

40Pravljenje stranice za prikazivanje rezultata

43LITERATURA

Pravljenje tabele u MySQL-uOtvaranje wamp servera

Da bismo napravili bazu podataka u koja e nam biti potrebna za kreiranje dinamike web stranice potreban nam je wamp server. Wamp server se moze pokrenuti dvoklikom na ikonicu na desktopu.

Kada pokrenemo wamp server, na desnoj strani taskbara pojavie se ikonica.

Zatim treba da kliknemo levim klikom mia na nju, a potom kliknite na phpMyAdmin, a zatim e vam se otvoriti va brauzer a stranica koje e se otvoriti izgleda ovako.

Kreiranje baze podataka

Prvo treba da kreiramo bazu podataka. To emo uraditi na sledei nain: kliknite na SQL i otvorie vam se sledei prozor u kome kucamo kod za kreiranje baze podataka. Kod treba da izgleda CREATE DATABASE ime_baze. Kada to uradite kliknite na GO i baza e biti kreirana.

Kreiranje tabele

Kada smo napravili bazu sada treba da ubacimo tabelu. Praviemo tabelu Artikal (Sifra, Naziv, Jedinica_mere, Kolicina, Cena). Kliknite na bazu koju ste kreirali, klikom na nju, a zatim opet treba da kliknete na SQL da bismo napravili tabelu. Tabelu emo kreirati na sledei nain:

ifra je primarni klju (PRIMARY KEY) i ne moe imati vrednost NULL i izraava se celim brojevima, oznaava se sa INT, Naziv je podatak koji se izraava slovima pa emo koristiti VARCHAR(30) to znai da re moe imati do 30 slova, Jedinica_mere je tip podatka koji sadri ENUM to znai da moemo koristiti samo mere koje su nam date (l, m, kg, kom), Koliina je tipa INT to znai da se izraava u celim brojevima, a Cena takoe. Kliknite na GO i tabela e biti kreirana.Popunjavanje tabele

Popunjavanje tabele se vri na sledei nain: kliknite na tabelu koju smo kreirali, a zatim na SQL . Popunjavanje tabele se vri uz pomo koda INSERT INTO ime_tabele VALUES.

Svaki artikal se unosi posebno izmeu (), naziv i jedinica_mere se kod popunjavanja tabele moraju stavljati pod navodnike () jer se prikazuju kao rei. I sada smo konano napravili tabelu koja izgleda ovako.

DSN (Data Source Name, ime izvora podataka)

(1) Da bismo podesili DSN potrebno je da imate instaliran program mysql-connector-odbc-win32. Otvorite Control Panel i kliknite na Administrative tools, a zatim dvostrukim klikom mia pritisnite ikonicu Data Sources (ODBC).

(2) Izaberite karticu System DSN i prinsitite dugme Add.

(3) Izaberite My SQL ODBC 5.1 Driver iz liste dostupnih upravljackih programa pritisnite na dugme Finish.

(4) Otvara se My SQL Connector.

U polje Data Source Name napiite npr. Zomix U polje Server napiite localhost U polje User napiite root Kliknite na Test Sada u polju Database odaberite bazu podataka koju smo kreirali Prodavnica

(5) U listi System Data Sources ete videti da je dodata prodavnica DSN veza. Pritisnite dugme OK da biste zatvorili prozor.

Kreiranje dinamike web stranice u Dreamweaver-uKonfigurisanje sajta

Za pravljenje sajta koristiemo Dreamweaver 8. Pre pravljenja web stranice bazirane na podacima moramo da konfiguriemo sajt u Dreamweaveru. To moramo da uradimo kako bi program znao gde se uvaju datoteke za sajt. Sajt emo raditi u PHP-u.

(1) Iz menija Site izaberite New Site.

(2) Izaberite karticu Advanced, pa iz liste Category izaberite Local Info. Na taj nain govorimo Dreamweaver-u gde se nalazi sajt na kojem radimo.

U polje Site Name upiite ime sajta npr. ZOMIX U polju Local Root Folder naite C:\wamp\www\ZOMIX Ostala podeavanja ne dirajte

NEMOJTE PRITISNUTI DUGME OK!

(3) Sada iz liste Category izaberite Remote Info i podesite opcije kao to je prikazano na slici. NEMOJTE JO PRITISNUTI OK.

(4) Sada iz liste Category izaberiteTesting Server.

Iz menija Server Model izaberite PHP MySQL Iz menija Acess izaberite Local/Network

Pojavljuje se polje Testing Server Folder, u njemu naite C:\wamp\www\ZOMIX, a u polju URL Prefix treba da stoji http://localhost/ZOMIX.

SADA MOETE PRITISNUTI OK.

(5) Otvorite karticu Files. U prozoru Local View ete videti novi napravljeni ZOMIX sajt.

(6) Vreme je da preemo na rad sa prikazom stranice. U kartici Files, desnim tasterom mia izaberite zeleni folder.

(7) Iz pomonog menija koji se pojavljuje izaberite New File.

(8) Pojavljuje se nova php datoteka. Dajte joj naziv index.php. U toj datoteci emo praviti stranicu na osovu baze podataka.

NAPOMENA: Ponekad nakon definisanja sajta Dreamweaver je nesiguran i ne prikazuje potvrdu pored stavki document type ili testing server kao to je prikazano na gornjoj. Ako se to dogodi jednostavno pritisnite vezu document type ili testing server i ponovo ih podesite.

(10) Podruje Database kartice Application bi trebalo da izgleda kao na donjoj slici, sa potvrdama 1, 2 i 3.

Spajanje baze podataka i web sajta

(1) Sada kada Dreamweaver zna gde su sve datoteke, moemo da napravimo vezu izmeu web sajta i baze podataka. U podruju Database kartice Application pritisnite dugme +. Iz menija koji se pojavljuje izaberite MySQL Connection. U polje Connection Name upiite conZomix U polje MySQL Connection unesite localhost U polje User name upiite root U polju Database kliknite na Select i pronaite kreiranu bazu prodavnica

I kliknite na OK.

(2) Pritisnite Test i pojavie se pomoni okvir sa porukom da je veza uspeno uspostavljena. Pritisnite OK da biste ga zatvorili, pa pritisnite OK u prozoru MySQL Connection da biste sauvali novu vezu.

(3) Pojavljuje se uta ikona bubnja u odeljku baze podataka kartice koja predstavlja vezu izmeu web sajta i baze podataka.

(4) U podruju Site kartice Files se nalazi novi napravljeni folder pod imenom Connections. Ovaj folder sadri datoteku conZomix.php. Toj datoteci se automatski obraaju sve stranice koje treba da se poveu sa bazom podataka.

Pravljenje stranice koja se zasniva na bazi podataka

(1) Otvorite stranicu index.php u Dreamweaver-u i umetnite tabelu koja sadri 4 reda i 5 kolona. Konfiguriite je na nain prikazan na donjoj slici.

(2) Izaberite karticu Bindings u okviru Application, pa pritisnite dugme +.

(3) Sa pomonog menija koji se pojavljuje izaberite Recordset (Query). Recordset je skup uputstava koji se koriste za definisanje sa kojim podacima e naa web stranica raditi i kako ti podaci treba da budu predstavljeni.

(4) Kad se prozor Recordset otvori ...

U polje Name upiite rsArtikal U polju Connection iz menija odaberite conZomix U plju Table treba da stoji Artikal Pritisnite dugme za izbor opcija All Ne dirajte ostala podeavanja

(5) Kada pritisnete dugme Test pojavie se prozor Test SQL Statement. Ako ste sve uradili kako treba videe se svi zapisi vae baze podataka bie prikazani kako na donjoj slici.

(6) Pritisnite dugme OK da biste zatvorili prozor Test SQL Statement, pa ponovo pritisnite dugme OK da biste zatvorili prozor Recordset.

(7) Pogledajte karticu Bindings. Videete da je napravljen skup upustava. Pritisnite dugme + u polju za potvrdu pored ikonice skupa. Time e se proiriti stablo skupa. Prikazane su sve kolone iz baze podataka (kao i neke stavke koje jo neemo koristiti).

(8) Postavite kursor u tabelu oznacenu kao ifra pa pritisnite. Zatim preite u karticu Bindings i iz liste izaberite Sifra. Na kraju pritisnite dugme Insert.

(9) Videete da je u tabelu umetnuto {rsArtikal.Sifra}. Time emo dobijati informacije iz kolone Sifra baze podataka.

(10) Ponovite ovaj korak za ostatak tabele...

Postavite kursor u tabeku oznaenu kao Naziv pa pritisnite. Zatim preite na karticu Bindings i iz liste izaberite Naziv. Na kraju, pritisnite dugme Insert.

Postavite kursor u tabeku oznaenu kao Jedinica mere pa pritisnite. Zatim preite na karticu Bindings i iz liste izaberite Jedinica_mere. Na kraju, pritisnite dugme Insert.

Postavite kursor u tabeku oznaenu kao Koliina pa pritisnite. Zatim preite na karticu Bindings i iz liste izaberite Kolicina. Na kraju, pritisnite dugme Insert.

Postavite kursor u tabeku oznaenu kao Cena pa pritisnite. Zatim preite na karticu Bindings i iz liste izaberite Cena. Na kraju, pritisnite dugme Insert.

Moete formatirati izgled teksta prikazanog u tabeli ako izaberete kod i koristite alatke za svojstva teksta u kartici svojstva.

(11) Sada treba na tabelu da primenimo Repeat Region (ponovi region) kako bi bili prikazani svi zapisi baze podataka. Ako to ne uradimo kada testitramo stranicu bie prikazan samo prvi zapis. Postavite kursor u eliju ifra kako prikazuje strelica na donjoj slici.

Selektujte 5 najdonjih elija (elije e imati crnu pozadinu kako je prikazano na donjoj slici).

Zatim izaberite karticu Server Behaviors u kartici Application.

Pritisnite dugme +, pa iz menija izaberite Repeat Region.

(12) Pojavljuje se prozor Repeat Region. Proverite da li se u polju Recordset pojavljuje rsArtikal, pa izaberite dugme All Records. Pritisnite digme OK. Tako e svi zapisi iz baze podataka biti prikazani na stranici index.php.

(13) Vreme je za jedan kratak test. Pritisnite dugme Live Data View i videete da se svi zapisi baze podataka pojavljuju na ekranu. Pritisnite to dugme ponovo i vratite se u prikaz Design View.

(14) Sauvajte rad pomou menija File > Save.

(15) Sada testirajte web stranicu index.php tako to ete kliknuti na Preview i izabrati neko od brauzera.

I dobiete sledei izgled stranice koja sadri sve zapise iz baze podataka.

Dodavanje novog zapisa u bazu podataka

(1) Kreirajte novu stranicu dodaj.php, pomou nje emo u bazi podataka dodati nove artikle.

(2) Napravite novu stranicu...

(3) ... i dajte joj ime dodaj.php.

(4) Stranicu za dodavanje javnost obino ne gleda pa je neemo posebno ureivati. Dajte stranici naslov DODAJ NOVI ARTIKAL i na stranici umetnite Form pritiskom na odgovarajue digme na paleti alatki Forms.

NAPOMENA: Ako ne vidite crvenu isprekidanu liniju Form Delimeter idite na Edit Preferences > Invisible Elements i potvrdite polje Form Delimeter.

(5) Vratite se na paletu alatki Common i umetnite tabelu unutar (INTO) obrasca (pritisnite unutar graninih linija obrasca). Tabela treba da ima 12 redova i 2 kolone.

I napravite tabelu oblika...

(6) Ponovo se vratite na paletu alatki Form i umetnite TextField u eliju oznaenu kao ifra.

(7) Dok je i dalje izabrano Text Field preite na panel svojstava i polju TextField dajte ime Sifra. Neka ima broj znakova (CharWidth) 50.

Primetite da smo polju TextField dali tano isto ime kao i u polju baze podataka u koju e se unositi podaci. Time ne samo da tedimo kasniji napor, ve i spreavamo pojavljivanje uobiajenih greaka too few parameters (previe parametara). Ovakve greke se mogu pojaviti kada doe do neslaganja izmeu spelovanja polja obrasca i polja baze podataka.

(8) Umetnite jo 3 polja TextFields kako je prikazano i oznaite ih na sledei nain (za jedinicu mere nema tekstualnoh polja, za nju emo koristiti padajui meni) Naziv = Naziv i 50 characters

Koliina = Kolicina i 50 characters Cena = Cena i 50 characters

(9) Sada pritisnite u eliju rezervisanu za element obrasca Jedinica mere i izaberite List/Menu sa palate alatki Forms.

(10) Sa i dalje izabranim List/Menu preite na panel svojstava i polju List/Menu dajte ime Jedinica_mere. Pritisnite dugme za izbor opcije Menu, pa pritisnite dugme List Values.

(11) Podesite List Values (listu vrednosti) kako je prikazano pritiskom na dugme + da biste dodali svaki novi red.

Pritisnite OK.

NAPOMENA: Item Label je tekst prikazan u padajuem meniju. Value je vrednost koja e biti prosleena bazi podataka. Ako pogreite, oznaite upis i pritisnite dugme -. Ako elite da izmenite poziciju stavke, oznaite je i koristite strelicu nagore ili nadole.

(12) Sada preite na krajnju donju eliju i umetnite Submit Button (dugme za potvrdu) pritiskom na ikonu Button na paleti alatki Forms.

(13) Oznaite dugme kao Dodaj artikal i proverite da li je potvreno polje za izbor opcije Submit Form.

(14) Pritisnite bilo gde izvan graninih linija obrasca, pa pritisnite oznaku u podruju pregleda na dnu ekrana. Ceo obrazac e biti izabran. Preite na panel svojstava i obrascu dajte ime dodaj. Proverite da le je izabran metod POST. Za sada vam nee biti nita potrebno iz polja Actions.

Sada bi obrazac trebao da izgleda ovako...

(15) Sada emo primeniti ponaanje Insert Record. Pritisnite digme + na panelu Server Behaviors i iz menija izaberite Insert Record.

(16) Otvorie se prozor Insert Record. Iz menija Connection izaberite conZomix Iz menija Insert table izaberite artikal U polju After inserting, go to preite na index.php

(17) Pritisnite OK, i sacuvajte stranicu File > Save. A sada kada testiramo stranicu ona treba da izgleda ovako...

Ovako sada izgleda prikaz na web stranici.

A sada da pogledamo kako izgleda tabela artikal u bazi podataka.

Stranice ADMIN

Back End (zadnji deo) sajta kontroliu stranice Admin Pages (administratorske stranice). Ve ste konstruisali jednu stranicu admin (stranicu dodaj.php), sada emo napraviti jo nekoliko.

(1) Napravite 4 nove dataoteke i nazovite ih:

admin.view.php

izbrisi.php

potvrda.php

admin_control.php

(2) Otvorite datoteku admin_control i dajte joj odgovarajue zaglavlje ADMIN CONTROL. Sada napravite 4 linka. Dodaj Artikal se povezuje sa dodaj.php Izbrisi Artikal se povezuje sa admin.view.php Artikli se povezuje sa index.php

Sauvajte stranicu.

(3) Zatim emo napraviti stranicu Potvrda Akcije. Ova stranica se prikazuje kada uspeno izbriemo ili unesemo zapis. Otvorite stranicu potvrda.php i unesite zaglavlje Potvrda Akcije i nakon toga Akcija je uspeno kompletirana. Na toj stranici napravite link koji se povezuje sa admin_control.php.

(4) Dajmo stranici Potvrda Akcije malo automatizma, tako da vam onaj link na stranicu admin_control.php nee biti potreban. Iz menija Insert izaberite HTML > Head Tags > Refresh.

(5) U prozoru Refresh unesite zakanjenje od 3 sekunde i podesite Go TO URL na admin_control.php. Pritisnite dugme OK.

Sada kad god je neko usmeren na strnicu za potvrdu automatski e se preusmeriti na stranicu admin_control.php nakon 3 sekunde. Zato nam je potreban i link i rutina osveavanja? Neki pretraivai ne vole oznake osveavanja. To se zove Igraj na sigurno Sauvajte rad.

(6) Otvorite stranicu admin.view.php i dajte jo zaglavlje ADMIN VIEW. Napravite link, ispod zaglavlja koji se povezuje sa stranicom admin.control.php.

(7) Sada umetnite tabelu sa 3 reda i 6 kolone i konfigurisite je na nain kako je prikazano na slici.

(8) Ponovo je vreme za Recordset... Znate rutinu...Povezivanje...Dugme +...Recordset.

(9) Podesite Recordset na sledei nain:

Name = rsAdminView

Connection = conZomix

Columns = All

(10) Pritisnite dugme Test i videete sve zapise koje ste uneli izlistane po rastuem redu (Ascending). Ako elite da se prvo pojavi poslednji zapis, umesto Ascending ukljuite Descending (opadajui redosled) u Recordsetu.

Pritisnite dugme OK u prozoru testa, pa zatim ponovo OK u prozoru Recordset da biste ga sauvali.

(11) Ovo ste radili ve nekoliko puta pa neu detaljisati. Poveite podatke Recordseta sa odgovarajuim elijama korienjem rutine Click > Select > Insert. Donja slika prikazuje ta gde treba da ide.

NAPOMENA: Za sledei korak bie vam potrebno da skinete ekstenziju Go To Detail Page for PHP sa interneta i da je instalirate. Idite na sajt www.adobe.com i napravite vas nalog. Zatim u Search kucajte Go to detail page for PHP i skinite tu ekstenziju.

(12) Sada emo primeniti ponaanje Go To Detail Page koje informacije izabranog zapisa elje na stranicu koja e ga izbrisati.

Oznacite re DELETE, otvorite panel Server Behaviors, pritisnite dugme + i sa menija izaberite Go To Detail Page for PHP.

(13) Podesite prozor Go To Detail Page for PHP na sledei nain:

Link... bi trebalo da vam kae da je izabran tekst DELETE.

Detail page... izaberite izbrisi.php Recordset... rsAdminView Column... Sifra

Pritisnite OK

(14) Videete da je DELETE oznaeno i pretvoreno u link.

(15) Selektujte elije u tabeli kao to je prikazano. Potom izaberite ponaanje Repeat Region sa panela Server Behaviors.

(16) Proverite da li je izabran rsAdminView Recordset i potvrdite polje za izbor opcija All Records. Pritisnite dugme OK.

(17) Tabela bi sada trebala da izgleda ovako.

Sauvajte stranicu.Stranica Izbrii

Stranica izbrisi.php je stvarna stranica koja izvrava akciju brisanja do koje smo doli.

(1) Otvorite izbrisi.php, dajte joj odgovarajue zaglavlje (npr. Izbrisi artikal) i umetnite Form kako je prikazano na donjoj slici.

(2) Postavite pokaziva mia unutar crvenih isprekidanih linija form delimiter i umetnite tabelu koja sadri 3 reda i 5 kolona.

(3) Konfiguriite i obeleite elije kako je prikazano. Umetnite dugme Submit i oznaite ga kao Izbrisi artikal.

(4) Napravite Recordset za stranicu (Bindings > + > Recordset)

(5) Podesite Recordset na sledei nain:

Name... rsIzbrisi Connection... conZomix Table... artikal Columns... All Filter... Sifra = URL Parametar Sifra Sort... None

Pritisnite OK.

(6) Poveite podatke Recordseta sa odgovarajuim elijama prevlaenjem. Donja slika prikazuje sta gde treba da ide.

(7) Vreme je da primenimo ponaanje Delete Record. Otvorite panel Server Behaviors, pritisnite dugme + i sa menija izaberite Delete Record.

(8) Podesite prozor Delete Record na nain prikazan na donjoj slici.

Pritisnite OK i sauvajte stranicu.

(9) Sada stranica treba da izgleda ovako.

Sada kada smo sauvali stranice, da vidimo kako ovo sve finkcionie. Pokrenite stranicu admin.view.php u vaem brauzeru i kliknite na DELETE pored artikla koji hoete da izbriete, npr. hoete da izbriete prutu.

Zatim se otvara stranica potvrda.php koja vam govori da ste uspeno izvrili akciju.

Zatim se automatski posle ove stranice u roku od 3 sekunde prikazuje stranica admin_control.php.

Sada emo videti da je taj artikal obrisan i iz baze podataka.

Pretraga zapisa iz baze podataka

Pravljenje stranice za pretragu

(1) Kreirajte nove stranice pretraga.php i rezultat.php, pomou njih emo pretraivati zapise u bazi podataka.

(2) Napravite nove stranice...

(3) ... i dajte im imena pretraga.php i rezultat.php.

(4) Otvorite stranicu pretraga.php. Dajte stranici naslov PETRAI ARTIKLE i na stranici umetnite Form pritiskom na odgovarajue digme na paleti alatki Forms.

NAPOMENA: Ako ne vidite crvenu isprekidanu liniju Form Delimeter idite na Edit Preferences > Invisible Elements i potvrdite polje Form Delimeter.

(5) Vratite se na paletu alatki Common i umetnite tabelu unutar (INTO) obrasca (pritisnite unutar graninih linija obrasca). Tabela treba da ima 2 reda i 2 kolone.

I napravite tabelu oblika...

(6) Ponovo se vratite na paletu alatki Form i umetnite TextField u eliju oznaenu kao Naziv.

(7) Dok je i dalje izabrano Text Field preite na panel svojstava i polju TextField dajte ime Naziv. Neka ima broj znakova (CharWidth 50).

Primetite da smo polju TextField dali tano isto ime kao i u polju bazepodataka u koju e se unositi podaci. Time ne samo da tedimo kasniji napor, ve i spreavamo pojavljivanje uobiajenih greaka too few parameters (previe parametara). Ovakve greke se mogu pojaviti kada doe do neslaganja izmeu spelovanja polja obrasca i polja baze podataka.

(8) Sada preite na krajnju donju eliju i umetnite Submit Button (dugme za potvrdu) pritiskom na ikonu Button na paleti alatki Forms.

(9) Oznaite dugme kao Pretrai i proverite da li je potvreno polje za izbor opcije Submit Form.

(10) Pritisnite bilo gde izvan graninih linija obrasca, pa pritisnite oznaku u podruju pregleda na dnu ekrana. Ceo obrazac e biti izabran. Preite na panel svojstava i obrascu dajte ime pretrazi. Proverite da le je izabran metod GET. Iz polja Actions izeberite rezultat.php.

(11) Sada kreirajte Recordset za ovu stranicu.

Sada bi obrazac trebao da izgleda ovako...

Sacuvajte stranicu.

Pravljenje stranice za prikazivanje rezultata

(1) Otvorite stranicu rezultat.php. Na ovoj stranici e nam se prikazivati rezultati pretrage. Dajte joj naslov Rezultat pretrage.

(2) Sada kreirajte tabelu koja sadri 2 reda i 5 kolona.

(3) Zatim je formatirajte na sledei nain.

(4) Sada je potrebno da napravimo Recordset za ovu stranicu. Kod ove stranice je specifino to to je potrebno postaviti filter na atribut iz baze podataka koji odgovara rezultatu pretrage. U naem sluaju to je Naziv.

Kliknite na OK.

(5) Sada treba da prenesemo atribute iz Recordseta u tabelu na ve poznat nain, prevlaenjem. Kada to uradimo tebela sada izgleda ovako.

Sauvajte stranicu.

Sada kada smo sauvali stranice, da vidimo kako ovo sve finkcionie. Pokrenite stranicu pretraga.php u vaem brauzeru i unesite ime nekog artikla npr. kivi i pritisnite dugme pretrai.

Sada e nam se otvoriti stranica sa rezultatom pretrage.

LITERATURAhttp://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.htmlhttp://www.ehow.com/how_4827581_dynamic-web-page-dreamweaver.html4243