4.

вежба: рад са базом података, једна табела

Задатак је направити Веб апликацију која користи СУБП типа MySQL да би у бази
података чувала податке о студентима. О сваком студенту треба чувати следеће
податке:
• број индекса (колона Indeks типа varchar(255))
• име студента (колона Ime типа text)
• презиме студента (колона Prezime типа text)

Подаци се чувају у табели Student. Над подацима је потребно омогућити четири

основне операције:
• преглед
• додавање
• измена
• уклањање

Кориснички интерфејс треба да изгледа на следећи начин:

Време предвиђено за реализацију комплетне вежбе је 180 минута.

Интернет технологије - практикум, Александар Јевремовић, ajevremovic@singidunum.ac.rs

1. корак: моделовање базе података

У задатку текста је јасно дефинисан назив табеле, као и називи и типови атрибута које
треба креирати у бази. Једини додатак на наведено је додавање нове колоне ID чије
ће вредности бити типа цео број, самостално ће се повећавати код сваког новог
записа, а која ће се користити као примарни кључ табеле. У принципу, као примарни
кључ се може искористити и индекс студента, али пошто ове вредности могу бити
сложене (на пример да садрже знак "/" који може правити проблеме у обради)
сигурније је ићи на једноставнију, целобројну вредност.

Приказани модел се преводи у следећи SQL код:

create table Student (

ID integer not null auto_increment primary key,
Indeks varchar(255),
Ime text,
Prezime text
);

Извршавањем овог кода на серверу базе података креирана је одговарајућа табела.

2. корак: ручни унос неколико редова у табелу

Овај корак није неопходан пошто ће унос података бити омогућен и кроз саму
апликацију. Међутим, није лоше унети неколико редова у табелу да би се могла као
прва реализовати и тестирати функција прегледа података (која је значајно
једноставнија за реализацију од функције додавања).

insert into Student (Indeks,Ime,Prezime) values ("1/11","Petar","Petrovic");

insert into Student (Indeks,Ime,Prezime) values ("2/11","Marko","Markovic");
insert into Student (Indeks,Ime,Prezime) values ("3/11","Lazar","Lazarevic");

Након уноса ових наредби у табели се налазе три записа. То се може проверити
путем наредбе:

Интернет технологије - практикум, Александар Јевремовић, ajevremovic@singidunum.ac.rs

 select * from Student;

Очекивани резултат је:

+----+--------+-------+-----------+
| ID | Indeks | Ime | Prezime |
+----+--------+-------+-----------+
| 1 | 1/11 | Petar | Petrovic |
| 2 | 2/11 | Marko | Markovic |
| 3 | 3/11 | Lazar | Lazarevic |
+----+--------+-------+-----------+

Након овога можемо приступити изради интерфејса и логике Веб апликације.

3. корак: разлагање апликације на фајлове

Као што је у поставци задатка речено, апликација треба да поседује четири основне
функције за рад са подацима:
• функција прегледања података је најједноставнија - извршава се у једном
кораку и нема улазних параметара;
• функција додавања података је умерено сложена - извршава се у два корака
(први корак је потпуно пасиван) и нема улазних параметара;
• функција уклањања податаке је умерено сложена - извршава се у једном
кораку и има улазних параметара;
• функција измене података је најсложенија - извршава се у два корака (оба
захтевају динамичку обраду и повезивање са сервером базе података) и има
улазних параметара;
Дакле, укупан број корака за извршавање свих функција апликације је шест, што је
уједно и број фајлова (скриптова, страница) које ће бити потребно креирати.

Интернет технологије - практикум, Александар Јевремовић, ajevremovic@singidunum.ac.rs

На претходној слици је дата и могућа навигација у апликацији, односно путање
којима је могуће стићи до одређене функције или корака у њој. У суштини, основна
страница апликације је преглед података (фајл index.php) са које је могуће приступити
првим корацима осталих функција (додавање, измена, уклањање). Наведене фајлове
је могуће креирати одмах (без садржаја) или их креирати у складу са током развоја.

4. корак: страница за прегледање података

Страница за преглед података може бити основна страница апликације, тако да се

може реализовати у оквиру фајла index.php. Садржај ове странице ће бити мешавина
HTML и PHP кода:

<!DOCTYPE html>
<html>
<head>
<title>Преглед студента</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Индекс</th>
<th>Име</th>
<th>Презиме</th>
</tr>
</thead>
<?php

// Повезивање са сервером базе података

$bp = mysqli_connect("localhost","korisnik","lozinka","baza");
if (!$bp)
die('Јавила се грешка при повезивању са сервером базе података.');

// Учитавање података из базе

$upit = "select * from Student";

Интернет технологије - практикум, Александар Јевремовић, ajevremovic@singidunum.ac.rs

 $rezultat = mysqli_query($bp, $upit);
if (!$rezultat)
die(mysqli_error($bp));

// Приказ података
while ($red = mysqli_fetch_object($rezultat))
{
echo "<tr>\n";
echo " <td>{$red->ID}</td>\n";
echo " <td>{$red->Indeks}</td>\n";
echo " <td>{$red->Ime}</td>\n";
echo " <td>{$red->Prezime}</td>\n";
echo "</tr>\n";
}
?>
</table>
</body>
</html>

Наведени садржај поседује два дела:

1. HTML код који дефинише документ (заглавље и тело), а у оквиру тела

документа и табелу (са заглављем) у којој ће се приказивати учитани подаци.

2. PHP код који је уметнут у табелу HTML документа а чији је задатак да се

повеже са сервером базе података, из табеле Student учита све записе и
прикаже их као редове HTML табеле.
Извршавањем наведеног кода, односно приступањем страници index.php добићемо
следећи резултат:

Овиме је основна функционалност странице index.php развијена. До краја ће бити

потребно још повезати ову страницу са функцијама додавања, измене и брисања
података, а то ће бити урађено у оквиру наредних корака.

Интернет технологије - практикум, Александар Јевремовић, ajevremovic@singidunum.ac.rs

5. корак: функција додавања нових студената

Акција додавања нових записа у табелу базе података одвија се у два корака:
1. попуњавање података у формулару и
2. упис података унетих од стране корисника у базу података.
У складу са наведеним, за акцију додавања нових студената потребно је апликацију
проширити за два нова фајла: dodavanje.html и dodavanje-db.php.
Улога фајла dodavanje.html је да садржи HTML формулар за унос података, а улога
фајла dodavanje-db.php је да податке из формулара упише у базу података.
Да бисмо формулар за додавање (dodavanje.html) повезали са основном страницом
(index.php), односно да бисмо јој омогућили приступ са те странице, потребно је да у
страници index.php након табеле:

...
</table>
</body>
</html>

додамо одговарајући линк (одвојен хоризонталном линијом):

...
</table>
<hr />
<a href="dodavanje.html">Додавање новог студента</dodavanje>
</body>
</html>

Након ове измене страница index.php ће садржати линк за приступ страници са

формуларом за унос нових студената:

У наставку је дат садржај странице dodavanje.html:

Интернет технологије - практикум, Александар Јевремовић, ajevremovic@singidunum.ac.rs

 <!DOCTYPE html>
<html>
<head>
<title>Додавање студента</title>
<meta charset="UTF-8">
</head>
<body>
<form action="dodavanje-db.php" method="post">
Индекс: <input type="text" name="Indeks" />
<br />
Име: <input type="text" name="Ime" />
<br />
Презиме: <input type="text" name="Prezime" />
<hr />
<button type="submit">Додавање</button>
</form>
</body>
</html>

Резултат отварање и пример коришћења ове странице у Веб браузеру је дат на

следећој слици:

У коду самог формулара је дефинисано да се подаци унети у њега прослеђују скрипту

dodavanje-db.php на даљу обраду:

<form action="dodavanje-db.php" method="post">

У складу са тим, задатак странице dodavanje-db.php је да податке које је унео корисник

прихвати, нормализује и упише у базу. У случају да унети подаци нису исправни или
да се приликом покушаја уношења у базу јавила грешка (системска, дупликат...)
страница треба да ту грешку прикаже кориснику. У противном, уколико је уношење у

Интернет технологије - практикум, Александар Јевремовић, ajevremovic@singidunum.ac.rs

базу успешно обављено, нема потребе да се то експлицитно приказује кориснику већ
га је потребно преусмерити на страницу са прегледом. Код ове странице дат је у
наставку:

<?php

// Повезивање са сервером базе података

$bp = mysqli_connect("localhost","korisnik","lozinka","baza");
if (!$bp)
die('Јавила се грешка при повезивању са сервером базе података.');

// Нормализација улазних података

$Indeks = mysqli_real_escape_string($bp, @$_POST['Indeks']);
$Ime = mysqli_real_escape_string($bp, @$_POST['Ime']);
$Prezime = mysqli_real_escape_string($bp, @$_POST['Prezime']);

// Унос новог записа у табелу

$upit = "insert into Student (Indeks, Ime, Prezime) values ('$Indeks',
'$Ime', '$Prezime')";
$rezultat = mysqli_query($bp, $upit);
if (!$rezultat)
die(mysqli_error($bp));

// Раскид везе са сервером базе података

mysqli_close($bp);

// Преусмеравање на формулар за унос

die(header("Location: index.php"));

Овим страницама је функција за додавање нових студената завршена.

6. корак: уклањање студената

Да бисмо скрипт за уклањање података (uklanjanje-db.php) повезали са основном

страницом (index.php), односно да бисмо јој омогућили приступ са те странице,
потребно је да у табели странице index.php након колоне са презименом:

Интернет технологије - практикум, Александар Јевремовић, ajevremovic@singidunum.ac.rs

 ...
echo " <td>{$red->Prezime}</td>\n";
echo "</tr>\n";
...

додамо још једну колону са линком који води ка страници за уклањање (uklanjanje-
db.php) а уједно и прослеђује ID студента чије податке желимо да уклонимо:

echo " <td>{$red->Prezime}</td>\n";

echo " <td><a href='uklanjanje-db.php?ID={$red->ID}'>Уклањање</a></td>\n";
echo "</tr>\n";

Након ове измене основна страница апликације ће изгледати овако:

Задатак саме странице uklanjanje-db.php је да прихвати идентификатор записа који

треба уклонити (ID), нормализује га и уклони одговарајући запис. У случају да се јави
одређена грешка код уклањања података страница треба да ту грешку прикаже
кориснику. У противном, уколико је уклањање успешно обављено, нема потребе да
се то експлицитно приказује кориснику већ га је потребно преусмерити на страницу
са прегледом. Код ове странице дат је у наставку:

<?php

// Повезивање са сервером базе података

$bp = mysqli_connect("localhost","korisnik","lozinka","baza");
if (!$bp)
die('Јавила се грешка при повезивању са сервером базе података.');

// Нормализација улазних података

Интернет технологије - практикум, Александар Јевремовић, ajevremovic@singidunum.ac.rs

 $ID = (int) @$_REQUEST['ID'];

// Уклањање захтеваног слога

$upit = "delete from Student where ID=$ID";
$rezultat = mysqli_query($bp, $upit);
if (!$rezultat)
die(mysqli_error($bp));

// Преусмеравање на почетну страницу

die(header("Location: index.php"));

Овим је функција за уклањање студената завршена.

7. корак: измена постојећих студената

Измена података у бази је најсложенија основна операција и одвија се у два активна

корака:
1. учитавање изабраног записа из базе и пуњење формулара учитаним
вредностима и
2. измена постојећих вредности у бази вредностима које је корисник послао
путем формулара

с тим да је првом кораку потребно и проследити идентификатор записа који се мења.

Ову функцију ћемо, у складу са наведеним, реализовати путем два фајла:

1. izmena.php, чија је функција да из базе учита податке за изабрани запис и

прикаже их у облику попуњеног формулара и

2. izmena-db.php, чија је функција да податке из формулара измени у бази и

корисника преусмери на главну страницу.

Да бисмо могли да приступимо страници izmena.php у основној страници апликације

index.php потребно је да додамо одогварајући линк (слично као и функцији за
уклањање):

echo " <td>{$red->Prezime}</td>\n";

echo " <td><a href='izmena.php?ID={$red->ID}'>Измена</a></td>\n";
echo " <td><a href='uklanjanje-db.php?ID={$red->ID}'>Уклањање</a></td>\n";
echo "</tr>\n";

Након ове измене основна страница апликације би требало да изгледа овако:

Интернет технологије - практикум, Александар Јевремовић, ajevremovic@singidunum.ac.rs

Затим је потребно да креирамо нову страницу izmena.php за први корак функције
измене. Код ове странице је следећи:

<!DOCTYPE html>
<html>
<head>
<title>Измена студента</title>
<meta charset="UTF-8">
</head>
<body>
<?php

// Повезивање са сервером базе података

$bp = mysqli_connect("localhost","korisnik","lozinka","baza");
if (!$bp)
die('Јавила се грешка при повезивању са сервером базе података.');

// Нормализација улазних података

$ID = (int) @$_REQUEST['ID'];

// Учитавање података записа из базе

$upit = "select * from Student where ID=$ID";
$rezultat = mysqli_query($bp, $upit);

// Провера да ли је било грешака и да ли постоји тражени запис

if (!$rezultat)

Интернет технологије - практикум, Александар Јевремовић, ajevremovic@singidunum.ac.rs

 die(mysqli_error($bp));
if (mysqli_num_rows($rezultat) != 1)
die('Не постоји студент са задатим ID параметром.');

// Пребацивање резултата у објекат 'Student'

$Student = mysqli_fetch_object($rezultat);

?>
<form action="izmena-db.php" method="post">
ID: <input type="text" name="ID" value="<?php echo $Student->ID; ?>"
readonly />
<br />
Индекс: <input type="text" name="Indeks" value="<?php echo $Student-
>Indeks; ?>" />
<br />
Име: <input type="text" name="Ime" value="<?php echo $Student-
>Ime; ?>" />
<br />
Презиме: <input type="text" name="Prezime" value="<?php echo
$Student->Prezime; ?>" />
<hr />
<button type="submit">Измена</button>
</form>
</body>
</html>

Сама страница би требало, након приступања за одређени запис, да изгледа на

следећи начин:

Следећи корак је да, у складу са оним што је задато као дестинација за обраду

Интернет технологије - практикум, Александар Јевремовић, ajevremovic@singidunum.ac.rs

формулара унутар странице izmena.php:

<form action="izmena-db.php" method="post">

креирамо страницу izmena-db.php која ће служити за измену задатих параметара у

бази, као и за преусмеравање корисника на почетну страницу. Код ове странице је
следећи:

<?php

// Повезивање са сервером базе података

$bp = mysqli_connect("localhost","korisnik","lozinka","baza");
if (!$bp)
die('Јавила се грешка при повезивању са сервером базе података.');

// Нормализација улазних података

$ID = (int) @$_REQUEST['ID'];
$Indeks = mysqli_real_escape_string($bp, @$_POST['Indeks']);
$Ime = mysqli_real_escape_string($bp, @$_POST['Ime']);
$Prezime = mysqli_real_escape_string($bp, @$_POST['Prezime']);

// Измена података у бази

$upit = "update Student set Indeks='$Indeks', Ime='$Ime', Prezime='$Prezime'
where ID=$ID";
$rezultat = mysqli_query($bp, $upit);
if (!$rezultat)
die(mysqli_error($bp));

// Преусмеравање на почетну страницу

die(header("Location: index.php"));

Овим су постигнуте тражене основне функционалности апликације.

Интернет технологије - практикум, Александар Јевремовић, ajevremovic@singidunum.ac.rs

8. корак: додатна питања

За постизање планираног резултата ове вежбе потребно је да са потпуним

разумевањем одговорите на следећа питања, односно да решите проблеме који се у
њима помињу:
1. Где је грешка у HTML коду странице index.html? Како исправити ову грешку?

2. Због чега страница dodavanje.html може да има екстензију .html док код
странице izmena.php то није могуће?

3. Како изгледа комуникација између Веб браузера и сервера код слања

података страницама izmena-db.php и uklanjanje-db.php?

4. Због чега поље за ID у формулару izmena.php поседује атрибут readonly? Које су

евентуалне последице изостављања овог атрибута? Шта је алтернативно
решење? На који начин би могла да се омогући и измена овог атрибута?
5. Како ће се понашати апликација (део за измену) уколико неки од студената у
свом имену, презимену или броју индекса има знаке навода? Како решити
овај проблем?

6. На исти начин развијте и апликацију која треба да служи као адресар,

односно да је путем ње могуће чувати информације (име, презиме, телефон,
адреса, е-пошта) о контактима. У којој мери се израда такве апликације
разликује од израде ове апликације? Које опасности леже у копирању кода из
постојеће апликације?

Интернет технологије - практикум, Александар Јевремовић, ajevremovic@singidunum.ac.rs