29
Elektronski fakultet Niš Katedra za Računarstvo Studentski projekti, VI semestar Web aplikacija za vežbanje SQL upita Zadatak: Web aplikacija za vežbanje SQL upita treba da omogući realizaciju SQL upita. Web aplikacija sadrži niz zadataka/pitanja sa zahtevima koji se odnose na SQL upit koji student treba da napiše. Aplikacija treba da ima vezu sa DBMSom koji sadrži test bazu podataka i podatke. Takođe se treba obezbediti i provera ispravnosti upita i omogućiti korisniku da vidi rezultat (tabelu) ili tačan upit. Datum početka rada Datum završetka rada Datum javne odbrane Ocena Napomena: Student Mentor

Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

Embed Size (px)

Citation preview

Page 1: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

Elektronski fakultet NišKatedra za RačunarstvoStudentski projekti, VI semestar

Web aplikacija za vežbanje SQL upita

Zadatak:

Web aplikacija za vežbanje SQL upita treba da omogući realizaciju SQL upita. Web aplikacija sadrži niz zadataka/pitanja sa zahtevima koji se odnose na SQL upit koji student treba da napiše. Aplikacija treba da ima vezu sa DBMSom koji sadrži test bazu podataka i podatke. Takođe se treba obezbediti i provera ispravnosti upita i omogućiti korisniku da vidi rezultat (tabelu) ili tačan upit.

Datum početka rada

Datum završetka rada

Datum javne odbrane

Ocena

Napomena:

Student Mentor Milica Stojkovć Prof.dr Leonid StoimenovBr. Indeksa: 13111

Page 2: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111
Page 3: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

SADRŽAJ

Rezime Strana 3

Abstract Strana 3

1. Uvod Strana 4

2. Korišćena tehnologija Strana 5

2.1 Arhitektura Smarty šablona Strana 5

2.2 Struktura aplikacije koja koristi Smarty šablon Strana 6

3. Rešenje i implementacija Strana 7

3.1 Početna strana Strana 7

3.2 Prva strana za korisnika Strana 10

3.3 Strana za vežbanje SQL upita Strana 11

3.4 Prva strana za administratora Strana 15

3.5 Strana za dodavanje SQL upita Strana 16

3.6 Strana za ažuriranje SQL upita Strana 17

3.7 Strana za pregled članova Strana 18

4. Zaključak Strana 20

5. Literatura Strana 21

3

Page 4: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

Rezime

Aplikacija za vežbanje SQL upita omogućava korisnicima da provere svoje znanje vezano za SQL upite. Ova aplikacija je pre svega namenjana svim korisnicima koji žele da utvrde svoje znanje i poboljšaju svoju veštinu pisanja SQL upita.

Cilj ove aplikacije jeste da korisnik koji je prijavljen na sistem ima mogućnost provere ispravnosti unetih SQL upita. Nakon prijave korisnik bira bazu podataka za rad i unosi odgovore za zadate zadatke. Za svaki postavljen zadatak korisnik može da vidi tačan rezultat i da dobije odgovor (tabelu) ili pak informaciju o grešci.

U ovom radu pored opisa namene ove aplikacije nevedena je i tehnologija koja je korišćena za implementaciju kao i algoritamska rešenja.

Abstract

Application for practicing SQL queries allows users to test their knowledge related to SQL queries. This application is primarily designed  all users who want to determine their knowledge and improve their skills of writing SQL queries.

The goal of this application is that a user who is logged on the system has the ability to check the correctness of the entered SQL query. After logging a user selects a database to work and bring answers to given tasks. For any task the user can see the correct answer and receive a response (table), or information about the error.

In this paper, in addition to the description of the purposes of this application according to the technology used for implementation  and algorithmic solutions.

4

Page 5: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

1. Uvod

Cilj ove aplikacije jeste da omogući korisnicima da preko interneta usavrše svoju veštinu pisanja SQL upita. Ova aplikacija biće dostupna svakom korisniku koji ima internet konekciju i koji se uspešno logovao na sistem. Svaki posetilac ove aplikacije ima mogućnost prijave na sistem ali pre toga potrebno je da se registruje tj. da popuni formu sa svojim ličnim podacima posle čega može odmah pristupiti aplikaciji sa unetim podacima i koristiti je u potpunosti.

Ova aplikacija je pre svega edukativnog karaktera. Namenjena je ljudima kojima je potrebno znanje vezano za baze podataka i SQL upite bilo da im je to deo posla ili pak radi ličnog zadovoljstva. Aplikacija za vežbanje SQL upita omogućiće korisnicima da izaberu bazu podataka za rad i da odgovore na postavljenje zadatke. Svaka baza podataka imaće svoje upite na koje će korisnik odgovarati. Pored postavljenih zadataka korisnik će moći da vidi i relacioni model baze podataka koju je izabrao kao i tačan upit u cilju proveravanja ispravnosti svog rešenje. Aplikacija će korisniku prilikom potvrde unetog odgovora vratiti tabelu ili pak informaciju o grešci. Na taj način korisnik će moći da uvidi svoje greške i da time usavrši svoje znanje.

Pored podržavanja korisnika koji će imati mogućnost vezbanja SQL upita ova aplikacija će podržati još jedan tip korisnika – administratora. Administrator je zadužen za unos novih zadataka na kojima će korisnik moći da proveri svoje znanje, kao i da ažurirara već unete zadatke. Takođe administrator će moći da vidi informacije o korisnicima i proveri kako je koji korisnik odgvorio na postavljen zadatak.

Prednost ovog servisa je i to što korisnik može da pristupi servisu bilo gde i bilo kad pod uslovom da ima internet konekciju.

5

Page 6: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

2. Korišćena tehnologija

Prilikom realizacije ove aplikacije korišćena je standardna tehnologija vezana za web aplikacije. Pre svega koričćen je HTML kao osnova svake web aplikacije, zatim korišćene su PHP skripte i JavaScript. Stilovi koji realizuju izgled ove apliakcije su odvojeni u ekstenom fajlu što omogućava da se usled potrebe u budućnosti izgled ove aplikacije lako izmeni.

Ono što je karakteristika ove aplikacije jeste da je prilikom implementacije korišćen Smarty šablon. Korićenje Smarty šablona omogućilo je da se logika ove aplikacije odvoji od prezentacionog dela. Time je izbegnut „špageti” kod i omogućena je laka prepravka koda kao i lakše odrzavanje funkcionalnosti i izgleda web aplikacije kao i paralelni rad programera i dizajnera. Primer „špageti” koda u kojem se kombinuje PHP i HTML kod dat je u sledećem primeru:

<html><body>

<?php for (i = 0; i < 10; i++){

?>Broj je: <?php print(i)?> <br><?php

}?>

</body></html>

2.1 Arhitektura Smarty šablona

Svrha korišćena Smarty šablona jeste da se odvoji PHP kod od JavaScript koda i HTML. Smarty šablon omogućava da PHP strane sadrže samo logiku tj. samo PHP kod bez JavaScript/HTLM koda. Šablonska strana sa ekstenzijom .tpl sadrži samo HTML kod koji je „obogaćen” smarty (šablonskim) promenljivama. Ove promenljive su na šablosnkoj strani označene vitičastim zagradama, mada je korisniku Smarty šablona omogućena promena načina prikaza ovih promenljivih , što je prilikom kreiranje ove aplkacije iskorišćeno. Promena smarty promenljivih se vrši u fajlu mysmarty.php navodjenjem sledećih naredbi:

$this->left_delimiter="[[" $this->right_delimiter="]]";

Iz PHP stana se naredbom assign dodeljuju vrednosti šablonskim promenljivama. Pozivom naredbe display u PHP kodu od šablonske strane pravi HTML strana, tako što se sve

6

Page 7: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

smarty promenljive menjaju vrednostima koje su im ranije dodeljene. Za ovo je zadužen smarty engine. Nakon toga se HTML strana automatski šalje klijentu.

Slika1. Mehanizam Smarty šablona

2.2 Struktura aplikacija koje koriste Smarty šablon

Da bi razumeli strukturu aplikacije za vežbanje SQL upita moramo prvo razmotriti osnovnu strukturu svake aplikacije koja koristi Smarty šablon. Direktorijum u kome je smešten sam Smarty šablon je isti onaj u kome je potrebno staviti i PHP strane koje sadrže logiku aplikacije. Ove strane sadrže isključivo PHP, JavaScript odnosno HTML koda. U direktorijumu tpl potrebno je smestiti sve šablonske strane sa ekstenzijom .tpl . U ovim strana dat je čist HTML kod koji je „obogaćen„ šablonskim promenljivama. Primer strukture jedne aplikacije koja koristi Smarty šablon dat je na sledećeoj slici :

Slika 2. Struktura aplikacije

7

Page 8: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

3. Rešenje i implementacija

3.1 Početna strana

Prilikom pristupanja aplikaciji za vežbanje SQL upita korisniku se prikazuje početna strana koja sadrži mogućnost prijave na sistem kao i dodatne informacije o aplikaciji. Takodje svaki korisnik bez prijavljivanja na sistem ima mogućnost pregleda osnovnih informacija o tome kako se pišu SQL upiti , mogućnost pregleda strane koja sadrži informacije o tome kako postati član-korisnik ove aplikacije, formu za prijavljivanje na sistem kao i formu koju korisnik popunjava ukoliko je zaboravio svoju lozinku. Aplikacija koja omogućava vežbanje SQL upita je reprezenatitvno nazvana OnlineSqlEdu. Izgled početne strane ove aplikacije je dat na sledećoj slici:

Slika 3. Početna strana

Na ovoj strani nalazi se forma za logovanje u kojoj je potrebno uneti korisničko ime i lozinku. Nakon toga korisnik aktivira komandu Prosledi nakon čega mu se prikazuje sledeća strana u zavisnosti od privilegija koje on ima. U ovoj formu korisnik takodje može da aktivira još

8

Page 9: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

dve opcije u slučaju da je zaboravio lozinku ili pak ako želi da otvori novi korsnički nalog. Posle toga na mestu stare forme dobija novu formu u zavisnoti od izabrane opcije.

Slika 4. Forma za prijavljivanje

Ukoliko je korisnik izabrao opciju Zaboravili ste lozinku? ova forma dobija drugačiji izgled koji je prikazan na sledećoj slici:

Slika 5. Forma opcije Zaboravili ste lozinku?

Nakon unosa odgovarajućih podataka i aktiviranja komande Prosledi korisniku se šalje mail sa novom automatski generisanom lozinkom koju on kasnije može da promeni.

Ako korisnik izabere opciju Registruj se forma dobija sledeći oblik:

9

Page 10: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

Slika 6 . Forma opcije Registruj se

Sve ove forme se nalaze na istoj strani index.tpl a koja će od njih biti prikazana zavisi od promenljive $mod. Logika obrade korisničkih zahteva data je na strani index.php .

Deo strane index.tpl :

[[if $mod=="2"]]

<form action="email.php" method="post"/><h3>Unesite svoje korisnicko ime i email adresu:</h3> <br/>Korsinicko ime:<br/><input type="text" name="kor" /></br>E-mail:<br/><input type="text" name="mail"/></br><input type="submit" name="Posalji " value="Prosledi"/></form>

[[/if]]

Obrada zahteva Prosledi u strani index.php:

if(isset($_POST['Prosledi'])){

$user = $_POST['korisnickoIme'];$pwd = $_POST['lozinka'];logovanje($user, $pwd);

}

3.2 Prva strana za korisnika

10

Page 11: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

Nakon uspešnog logovanja korisniku se prikazuje njegova početna strana .Na ovoj strani korisnik ima mogućnost da bira bazu podataka na kojoj želi da vežba upite, kao i mogućnost da vidi osnovne informacije o upitima i da promeni svoju trenutnu lozinku. Prva strana za korisnika ima sledeći izgled:

Slika 7. Prva strana korisnika

Ukoliko korisnik aktivira opciju Promena lozinke umesto forme gde je dat izbor baze podataka pojavljuje se forma za promenu lozinke.

3.3 Strana za vežbanje SQL upita

11

Page 12: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

Nakon odabira baze podataka na kojoj korisnik želi da proveri svoju veštinu pisanja SQL upita, korisniku se prikazuje sledeća strana:

Slika 8. Strana za vežbanje SQL upita

Na ovoj strani korisnik može da vidi zadatak na osnovu kojeg treba da napiše određeni upit, kao i tačno rešenje čekiranjem opcije Prikaži tacan upit. Takodje korsiniku je zadato polje gde unosi svoj upit i aktiviranje komande Proveri dobija odgovor u polju Rezultat. Korisnik može aktiviranjem komande Sledeći i Prethodni da vidi sledeći ili prethodni upit.

12

Page 13: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

Ukoliko je korisnik odabrao opciju da vidi tačan upit forma u kojoj se nalazila ponuđena opcija dobija sledeci oblik:

Slika 9. Prikaz tačnog upita

Nakon unosa odgovora i aktiviranja komande Proveri korisnik dobija rezultat u formi za odgovor. Korisniku su medjutim zabranjene naredbe kojim može da briše ili modifikuje postojeće baze podataka i tabele.

Slika 10. Prikaz vraćenog odgovora

13

Page 14: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

Korisnik može u svakom trenutku da vidi relacioni model izabrane baze podataka kao i informacije o upitima. Date strane su prikazane na sledećim slikama.

Slika 11. Relacioni model

Slika 12. O upitima

14

Page 15: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

Funkcija koja za upisani upit vraća rezultat data je u nastavku.

function display_db_query($query_string,$connection$header_bool,$table_params)

{

$result_id = mysql_query($query_string, $connection)or die("display_db_query:" . mysql_error());$column_count = mysql_num_fields($result_id)or die("display_db_query:" . mysql_error());$my_data='<TABLE ';$my_data.=$table_params ;$my_data.=' >';if($header_bool){

$my_data.="<TR>";for($column_num = 0; $column_num < $column_count;

$column_num++) {$field_name = mysql_field_name($result_id,

$column_num);$my_data.="<TH>";$my_data.=$field_name;$my_data.="</TH>";}$my_data.="</TR>";

}while($row = mysql_fetch_row($result_id)){

$my_data.="<TR ALIGN=LEFT VALIGN=TOP>";for($columnum = 0; $column_num < $column_count;

$column_num++) {

$my_data.="<TD> ";$my_data.=$row[$column_num];$my_data.=" </TD>";

}$my_data.="</TR>";

}$my_data.="</TABLE>";

return $my_data;}

15

Page 16: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

3.4 Prva strana za administratora

Administrator kao drugi tip korisnika koji podržava ova aplikacija ima drugačije privilegije. Nakon logovanja na sistem administratoru se prikazuje početna strana koja ima mogućnost dodavanja novog upita, ažuriranja postojećih upita, pregled članova, mogućnost povratka na početnu stranu pri čemu se automatksi odjavljuje i mogućnost promene trenutne lozinke. Početna strana koja se prikazuje administratoru nakon logovanja data je na sledećoj slici:

Slika 13. Prva strana za administratora

Nakon izbora neke od opcije Dodaj upit ili Azuriraj upit administratoru se prikazuje mogućnost za izbor baze podataka u koju hoće da doda odnosno da ažurira upit.

16

Page 17: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

3.5 Strana za dodavanje SQL upita

Nakon aktiviranja opcije Dodaj upit i izbora baze podataka za rad administratoru se prikazuje strana gde unosi novi zadatak i odgovor tj. upit tog zadatka. Takodje administrator na ovoj strani može da vidi relacioni model izabrane baze podataka kao osnovne informacije o pisanju upita. U slučaju da korisnik pokuša da unese prazan sadržaj javiće mu se informacija o grešci. Strana za unos novog upita data je na sledećoj slici:

Slika 14. Dodavanje upita

17

Page 18: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

3.6 Strana za ažuriranje SQL upita

Ukoliko korisnik izabere opciju Azuriraj uput dobija listu unetih upita gde pored svakog upita postoji link Azuriraj koji za izabrani upit vodi administratora na drugu stranu gde je ima mogućnost da ažurira dati upit.

Slika 15. Lista upita za izabranu bazu podataka

Strana za ažuriranje izabranog upita prikazana je na sledećoj slici:

Slika 16. Ažuriranje upita

18

Page 19: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

3.7 Strana za pregled članova

Ukoliko administrator želi da vidi listu korisnika ovog servisa kao i da proveri za svakog korisnka koji je upit vežbao, koji je odgovor dao i kada je to učinio potrebno je da izabere opciju Clanovi. Nakon toga administrator dobija listu svih korisnika gde pored svakog postoji link Pogledaj koji nakon aktiviranja vodi administratora na sledeću stranu gde dobija informacije o izabranom korisniku. Aktiviranjem opcije Clanovi administrator dobija sledeću sliku.

Slika 17. Lista korisnika

Izborom odredjenog korisnika i aktiviranjem linka Pogledaj administrator dobija sledeću stranu:

Slika 18. Lista vežbanih upita korisnika

19

Page 20: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

Funkcija koja omogućava ažuriranje upita od strane administratora data je u nastavku :

function updateQuery($task,$result,$id,$base){

$global_dbh = mysql_connect("localhost", "root","")or die("Could not connect to database");$db=$base;mysql_select_db($db, $global_dbh)or die("Could not select database");if(mysql_query("UPDATE upiti SET zadatak = '$task',resenje='$result' WHERE ID = '$id'")){

return true;}else{

return false;}

}

20

Page 21: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

4. Zaključak

Sa razvojem interneta raste i potreba korisnika da mu sve više servisa budu dostupni na internetu. To je uzrukovalo nastanak velikog broja web aplikacija koje pružaju različite usluge korisnicima. Korisnicima je omogućen neograničen spektar podataka kojima može da pristupa u svakom trenutku. S tim u vezi razvoj aplikacije za vežbanje SQL upita pruža korisniku da svoje znanje o pisanju SQL upita proveri preko interenta u svakom trenutku.

Posmatrano sa druge strane ova aplikacija ne samo da omogućava pristup velikom broju korisnika već pruža mogućnost studentima koji uče o bazama podataka i pisanju SQL upita, da bolje nauči i utvrde gradivo. Takodje, ova aplikacija nije isključivo namenjena samo studentima-đacima već je korisna i programerima jer su baze podataka sastavni deo svake aplikacije tj. svakog većeg programa pa im je znanje o SQL upitima neophodno za rad.

Aplikacija za vežbanje SQL upita korsiti Smaty šablon umesto „špageti“ koda što omogućava da ova aplikacija bude lako nadogradjena ukoliko se za to javi potreba kao i lako izmenjena jer je HTML kod odvojen od PHP koda. Takođe, ova aplikacija teži korišćenju ekternih stilova što doprinelo da strane zadrže uniformnost u izgledu kao i da usled potrebe za promenom izgleda promena bude laka.

21

Page 22: Web Aplikacija Za Vezbanje SQL Upita Milica Stojkovic Ispravke by Jelena 13111

PROJEKAT - ZAVRŠNI ISPIT Tema: Web aplikacija za vežbanje SQL upita

5. Literatura

Linkovi: http://en.wikipedia.org/wiki/Database

http://www.baze-podataka.net/

http://www.dmoz.org/Computers/Data_Formats/Database/

http://www.w3schools.com/

http://www.sqlinform.com/

http://www.php.net/manual/en/book.mysql.php

22