Embed Size (px)
Citation preview
1
Vježba 7: PHP MVC vježbe 2
1. Na C disku u folderu xampp, pronađite xampp-control.exe, zatim pokrenite Control panel i
uključite servise za Apache i MySQL.
2. Na C disku pronađite folder PhpStorm i otvorite ga. Zatim u folderu bin pronađite PhpStorm.exe i
pokrenite ga.
3. Kako se PhpStorm bude otvarao, trebate otići pod Saša Mitrović/Kolegiji i skinuti arhiviranu
datoteku PlacaPHPMVC_student.zip, te je raspakirati na ovoj lokaciji : C:\xampp\htdocs\xampp
4. Nakon što se PhpStorm otvorio provjerite postoji li koji projekt u njemu otvoren. Ako postoji odite
na File/Close Project. Trebali biste dobiti sljedeći prikaz u PhpStormu:
5. Zatim kliknite na Open Directory i odaberite raspakirani PlacaPHPMVC_student.
2
6. Nakon toga u folderu db otvorite datoteku sql_PHPMVC_All.sql, kopirajte SQL kod, te ga izvršite
(pritiskom na grom) u MySQL Workbenchu na vašem MySQL serveru
3
7. Zatim u folderu models kreirajte klasu Salary desnim klikom miša na models, New/PHP Class
8. U klasi Salary kreirati će se:
a. privatna varijabla u koju će se spremati konekcija na bazu naziva dbh
4
b. konstruktor
c. metoda za dohvaćanje svih plaća naziva getSalaries. Metoda za Read
d. metoda za dodavanje dodavanje nove plaće naziva add. Metoda za Create
e. metoda za brisanje naziva delete. Metoda za Delete
f. metoda za ažuriranje vrijednosti naziva updateValue. Metoda za Update
NAPOMENA: Skraćenica CRUD – C – Create R – Read U – Update D – Delete
9. Pomoću konstruktora će se inicijalizirati konekcija na bazu i spremiti u privatnu varijablu dbh.
10. Metoda getSalaries će dohvatiti sve plaće iz tablice salary i vratiti ih kao JSON vrijednosti.
5
11. Metoda add umeće jednu plaću u tablicu salary i vraća id zadnje pohranjene plaće kao JSON
vrijednost.
12. Metoda delete briše plaću iz tablice salary predajući id plaće SQL DELETE naredbi.
13. Metoda updateValue ažurira označeno polje u tablici salary.
14. Nakon razvoja modela Salary, sljedeće što se treba napraviti je Controller.
15. Desnim klikom miša na controllers, New/PHP File, te datoteku nazovite SalaryController
6
16. Kontroler za plaću treba sadržavati:
a. autoload metodu koja loadira predanu klasu
b. inicijalizaciju modela s parametrima konekcije
c. switch…case naredbu koja će ovisno o radnji s UI-a izvršavati radnje na bazi
d. također, u kontroleru treba biti provjera imali kakve radnje – ako je nema, ne treba ništa
ni napraviti.
NAPOMENA: radnje (eng. action) će se definirati u javascript/jQuery-u
7
17. __autoload metoda treba uključiti datoteku iz foldera models, ovisno o nazivu datoteke koji se
metodi preda.
18. Zatim treba ići if uvjet – ako nema nikakve radnje, da se ništa ni ne prikaže(to je prilikom učitavanja
aplikacije – ništa se nije kliknulo pa ni nema nikakve radnje).
8
19. Na kraju ovisno o radnji (eng. action) na UI-u, treba izvršiti određenu metodu na bazi.
20. Sada slijedi interakcija na UI dijelu koja će se napraviti kroz javascript.
21. U view/js otvorite custom.js
22. Zatim će se u custom.js-u napraviti sljedeće:
a. prazna funkcija
b. getSalaryList
i. parametar – element
c. getCreateForm
i. parametar – element
d. addSalary
i. parametar – element
e. deleteConfirmation
i. parametar – element
f. deleteSalary
9
i. parametar – element
g. makeEditable
i. parametar – element
h. removeEditable
i. parametar – element
23. Nakon toga treba na sve ste funkcije staviti click event u praznoj funkciji.
10
24. Metoda getSalaryList treba putem post metode izvršiti action get_salaries
POST metoda:
25. Prije ispunjavanja getSalaryList metode, napraviti će se metoda renderSalaryList (ispod definirane
metode getSalaryList)koja će primati put parametra JSON vrijednosti.
26. Metoda renderSalaryList treba napraviti HTML tablicu s JSON vrijednostima.
11
27. U varijablu table treba dodati sljedeće (može c/p):
'<table width="600" cellpadding="5" class="table table-hover table-bordered"><thead><tr><th scope="col">mirovinsko</th><th scope="col">OsOdbitak</th><th scope="col">Posnovica</th><th scope="col">Porez</th><th scope="col">Prirez</th>' +
'<th scope="col">PiP</th><th scope="col">Netto</th><th scope="col"></th></tr></thead><tbody>'
28. Nakon toga varijabla table treba izgledati ovako:
29. U jQuery each treba dodati sljedeće (može c/p):
table += '<tr>';
table += '<td class="edit" field="mirovinsko" salary_id="'+salary.id+'">'+salary.mirovinsko+'</td>';
table += '<td class="edit" field="OsOdbitak" salary_id="'+salary.id+'">'+salary.OsOdbitak+'</td>';
table += '<td class="edit" field="Posnovica" salary_id="'+salary.id+'">'+salary.Posnovica+'</td>';
table += '<td class="edit" field="Porez" salary_id="'+salary.id+'">'+salary.Porez+'</td>';
table += '<td class="edit" field="Prirez" salary_id="'+salary.id+'">'+salary.Prirez+'</td>';
table += '<td class="edit" field="PiP" salary_id="'+salary.id+'">'+salary.PiP+'</td>';
table += '<td class="edit" field="Netto" salary_id="'+salary.id+'">'+salary.Netto+'</td>';
table += '<td><a href="javascript:void(0);" salary_id="'+salary.id+'" class="delete_confirm btn btn-danger"><i class="icon-remove icon-white"></i></a></td>';
table += '</tr>';
12
30. Nakon toga jQuery each treba izgledati ovako:
31. Cijela metoda renderSalaryList izgleda ovako:
32. Zatim, u metodi getSalaryList treba prvo pokazati div u kojemu će biti lista plaća, te izvršiti
prethodno jQuery POST metodu.
13
33. Nakon izrade metode koja ispisuje listu plaća iz baze podataka, potrebno je napraviti HTML formu
za unos podataka u metodi getCreateForm.
34. Forma treba izgledati ovako (može c/p):
var form = '<div class="input-prepend">'; form += '<span class="add-on"><i class="icon-briefcase icon-black"></i> mirovinsko</span>'; form += '<input type="text" id="mirovinsko" name="mirovinsko" value="" class="input-xlarge" />'; form += '</div><br/><br/>'; form += '<div class="input-prepend">'; form += '<span class="add-on"><i class="icon-briefcase icon-black"></i> OsOdbitak</span>'; form += '<input type="text" id="OsOdbitak" name="OsOdbitak" value="" class="input-xlarge" />'; form += '</div><br/><br/>'; form += '<div class="input-prepend">'; form += '<span class="add-on"><i class="icon-briefcase icon-black"></i> Posnovica</span>'; form += '<input type="text" id="Posnovica" name="Posnovica" value="" class="input-xlarge" />'; form += '</div><br/><br/>'; form += '<div class="input-prepend">'; form += '<span class="add-on add-on-area "><i class="icon-briefcase icon-black"></i> Porez</span>'; form += '<textarea row="5" id="Porez" name="Porez" class="input-xlarge"></textarea>';
14
form += '</div><br/><br/>'; form += '<div class="input-prepend">'; form += '<span class="add-on"><i class="icon-briefcase icon-black"></i> Prirez</span>'; form += '<input type="text" id="Prirez" name="Prirez" value="" class="input-xlarge" />'; form += '</div><br/><br/>'; form += '<div class="input-prepend">'; form += '<span class="add-on"><i class="icon-briefcase icon-black"></i> Pip</span>'; form += '<input type="text" id="PiP" name="PiP" value="" class="input-xlarge" />'; form += '</div><br/><br/>'; form += '<div class="input-prepend">'; form += '<span class="add-on add-on-area "><i class="icon-envelope icon-black"></i> Netto</span>'; form += '<textarea row="5" id="Netto" name="Netto" class="input-xlarge"></textarea>'; form += '</div><br/><br/>'; form += '<div class="control-group">'; form += '<div class="">'; form += '<button type="button" id="add_salary" class="btn btn-primary"><i class="icon-ok icon-white"></i> Add Salary</button>'; form += '</div>'; form += '</div>';
35. Cijela getCreateForm metoda izgleda ovako:
15
36. Nakon kreiranja forme potrebno je napisati kod koji će podatke iz kreirane forme spremati u bazu.
Prethodno navedeno će se napraviti u metodi addSalary.
37. U metodi addSalary treba prvo uzeti vrijednosti iz forme:
16
38. Zatim ih pretvoriti u Javascript objekt:
39. Kada je napravljena JSON vrijednost, putem jQuery POST metode treba to predati odgovarajućoj
metodi preko kontrolera.
17
40. Nakon metode za dodavanje, raditi će se metode za brisanje plaće.
41. Prvo što treba napraviti je prikazivanje pop-upa sa standardnim pitanjem „Želite li obrisati…“ koji
se treba pojaviti pritiskom na gumb za brisanje. Prikazivanje tog pop-upa će se napraviti u metodi
deleteConfirmation.
42. Nakon toga u metodi deleteSalary treba dohvatiti id plaće u redu u kojemu je kliknut gumb za
brisanje, te ga pretvoriti u Javascript objekt.
43. Nakon pretvaranja u JSON vrijednost, putem jQuery POST metode treba pozvati u backendu PHP
metodu za brisanje plaće.
18
44. Ostala je još samo jedna operacija, a to je operacija za uređivanje odnosno UPDATE. Uređivanje se
treba napraviti putem click eventa miša i to na način da dvostruki klik (eng. double click) učini
željeno polje editabilnim, dok jedan klik to polje treba vratiti u prikaz, tj. u neku vrstu read modea.
45. U metodi makeEditable treba polje učiniti editabilnim, te pored toga na njega treba staviti fokus i
promjeniti mu css klasu.
46. Nakon toga u metodi removeEditable (na jedan klik se pokreće) treba, kao i kod metode za
brisanje, uređivanu vrijednost pretvoriti u Javascript objekt.
19
47. Zatim, isto pomoću jQuery POST metode, pozvati metodu koja će ažurirati vrijednost u bazi.
48. Za kraj u root-u aplikacije treba napraviti index.php datoteku Desnim klikom miša na
PlacaPHPMVC_student, New/PHP File i u novokreiranoj datoteci uključiti sljedeće:
20
49. Nakon toga otvorite najnoviju verziju internet preglednika po vašem izboru, zatim u navigation
bar-u upišite localhost:{broj porta vašeg apache servera(zanemarite 443)} (primjer:
localhost:8080).
50. Potvrdite autentifikaciju, te u navigation baru dopišite PlacaPHPMVC_student i zatim stisnite
enter.
21
Implementacija obračuna plaće
1. Otvorite vašu javascript vježbu „Obračun plaće“ (ako je nemate, otvorite folder placa u
raspakiranoj arhivi PlacaPHPMVC_student.zip).
2. Kod iz output.js datoteke kopirajte ispod dosad napisanog koda u
PlacaPHPMVC_student\view\js\custom.js datoteci.
3. Nakon napravljenih prethodnih koraka zatvorite vašu javascript vježbu „Obračun plaće“.
4. Zatim u custom.js datoteci u metodi fillElements prepravite nazive id-eva na sljedeće:
a. mirovinsko
b. OsOdbitak
c. Posnovica
d. Porez
e. Prirez
f. PiP
g. Neto
5. Id-eve je bilo potrebno prepraviti jer u postojećoj PlacaPHPMVC aplikaciji postoje input polja s
takvim id-evima.
6. Nakon prepravljanja id-eva, potrebno je još u metodi getCreateForm dodati input tagove za bruto,
koeficijent i postotak, te gumb za izračun plaće.
7. Dodajte sljedeće na početku metode getCreateForm(može c/p):
var form = '<div class="input-prepend">';
form += '<span class="add-on"><i class="icon-briefcase icon-black"></i> Bruto</span>';
form += '<input type="text" id="bruto" name="bruto" value="" class="input-xlarge" />';
form += '</div><br/><br/>';
22
form += '<div class="input-prepend">';
form += '<span class="add-on"><i class="icon-briefcase icon-black"></i> Koef</span>';
form += '<input type="text" id="koef" name="koef" value="" class="input-xlarge" />';
form += '</div><br/><br/>';
form += '<div class="input-prepend">';
form += '<span class="add-on"><i class="icon-briefcase icon-black"></i> Postotak</span>';
form += '<input type="text" id="postotak" name="postotak" value="" class="input-xlarge" />';
form += '</div><br/><br/>';
form += '<div class="control-group">';
form += '<div class="">';
form += '<button type="button" id="calculate_salary" class="btn btn-primary" onclick="getNCalc()"><i class="icon-ok icon-white"></i> Izracunaj placu</button>';
form += '</div>';
form += '</div><br/><br/>';
8. Pošto je sada na vrhu definirana već forma (var form), definiranje forme kod mirovinskog treba maknuti, tj. prepraviti u form +=
Prije prepravljanja:
23
Nakon prepravljanja:
9. Nakon izmjena cijela getCreateForm izgleda ovako:
10. Nakon toga otvorite najnoviju verziju internet preglednika po vašem izboru, zatim u navigation
bar-u upišite localhost:{broj porta vašeg apache servera(zanemarite 443)} (primjer:
localhost:8080).
24
11. Potvrdite autentifikaciju (ako je potrebno), te u navigation baru dopišite PlacaPHPMVC_student i
zatim stisnite enter.
25
Samostalni zadatak
1. Raspakirajte folder Albumi iz arhive SamostalniZadatakPHP.zip (nalazi se na Mitrović Saša/Kolegiji)
u xampp\htdocs\xampp, tako da možete dobiti putanju xampp\htdocs\xampp\Albumi.
2. U zadatku je postavljen PHP MVC pattern, kojeg trebate dovršiti kako biste dobili sljedeće:
