Zoraďovanie dát z databázy

Potom, ako sme si ukázali a naprogramovali základné operácie s dátami na našej stránke, si ešte na záver časti o zavádzaní SQL do praxe ukážeme, ako využiť v praxi zoraďovanie dát v databáze. Ak si spomeniete, v semestri o jazyku SQL sme si ukazovali príkaz ORDER BY, ktorému môžeme zadať názov stĺpca, podľa ktorého budú dáta zotriedené. Okrem toho môžeme zadať postupne zotriedenie podľa viacerých stĺpcov a taktiež určiť smer zoraďovania (vzostupne alebo zostupne).

 

Naša tabuľka používateľov môže obsahovať veľký počet záznamov. Pre lepšiu prehľadnosť sme si pridali filtrovanie, ktoré umožňuje a uľahčuje rýchle nájdenie žiadaného záznamu. Veľmi častým zvykom je pri tabuľkách a akýchkoľvek iných zoznamoch mať možnosť zoradiť dáta podľa konkrétnych stĺpcov. Vo väčšine sa klikne v hlavičke tabuľky na konkrétny stĺpec a dáta sa následne zoradia podľa príslušného stĺpca. Po opätovnom kliknutí na už zotriedený stĺpec sa zvykne zmeniť spôsob (poradie) zoraďovania. Niečo podobné si ideme spraviť aj my.

 

Opäť to nebude nič extra ťažké, len to bude zase spojenie viacerých vecí, čo už vieme, dokopy. Takže si to rozoberme na menšie časti. Keďže sme povedali, že klikneme na názov stĺpca, tak budeme musieť z neho spraviť odkaz (a). Po kliknutí na tento odkaz musíme dať najavo, že chceme podľa tohto stĺpca zoradiť dáta v tabuľke, takže asi k URL na našu aktuálnu stránku (index.php) pridáme nejaké tie parametre, ktoré nám povedia, podľa čoho chceme triediť. Aby sme to mali na začiatok jednoduchšie, spravíme si triedenie len podľa mena a priezviska. Následne v kóde musíme odchytiť parametre, či bola nejaká požiadavka na triedenie a ak áno, tak to aplikujeme do príkazu SELECT.

 

Poďme teda na to. Začneme tým, že si z hlavičky spravíme odkazy, ktoré zavolajú našu stránku s parametrom, v ktorom bude uvedené, podľa ktorého stĺpca máme dáta zotriediť. Mohlo by to vyzerať asi takto:

 


index.php (zmena v hlavičke tabuľky):

echo '<tr>';
    echo '<th>ID</th>';
    echo '<th><a href="index.php?sort_by=user_name">Meno</a></th>';
    echo '<th><a href="index.php?sort_by=user_surname">Priezvisko</a></th>';

    echo '<th>Vek</th>';
    echo '<th>Rola</th>';
    echo '<th>Akcie</th>';
echo '</tr>';

 


Ako vidíme, pridali sme do URL parameter s názvom sort_by, ktorý bude určovať stĺpec, podľa aktorého máme dáta triediť. Názvy týchto dvoch stĺpcov by sa mali zmeniť na odkazy, po prejdení ponad ne je vidieť, aká URL sa zavolá (aj s parametrami). Dizajnom sa zatiaľ nejdeme zaoberať... Teraz sa môžeme v kóde, kde načítavame dáta z databázy opýtať, či je tento parameter neprázdny, čo bude znamenať, že sme sa na našu stránku dostali z kliknutia na odkaz v hlavičke tabuľky. Ak áno, hodnotu tohto parametra pridáme do príkazu sql ORDER BY. Mohlo by to vyzerať takto:

 


index.php (za spracovanie filtrovania pred zavolanie query na select):


//ZACHYTENIE PARAMETRA PRE TRIEDENIE DAT V TABULKE
$sort_by = $_GET['sort_by'];
if($sort_by){
    $sql_query .= " ORDER BY ".$sort_by." ASC";
}
...

 


Ako vidíte, ak sa nejaká hodnota v našom parametri nachádza, tak pridáme (.= priliepa k stringu) do nášho selectu príkaz order by. Ak si to vyskúšate, tak uvidíte, že zoraďovanie skutočne funguje. Len pre kontrolu si môžete dať vypísať pomedzi to query, aby ste videli, aký dotaz na databázu zadávame a že sa v nej skutočne nachádza klauzula order (print_r($sql_query)). Ako vidíte, zatiaľ sme dali natvrdo zoraďovanie vzostupne. Poďme sa ale zamyslieť nad tým, ako by sme spravili, aby sa po opätovnom kliknutí na zoradený stĺpec zmenilo poradie zoradenia.

 

Otázka je, čo vlastne chceme. My chceme, aby v momente, kedy je nastavené zoradenie podľa nejakého stĺpca a po kliknutí na ten istý stĺpec, sa zmenil spôsob zoradenia. Presne túto vetu, ktorú sme si teraz povedali, musíme iba napísať do podmienky if, aby sme práve tento prípad odchytili a v danom momente zmeníme poradie sortovania. Jednoducho by sme to ale mohli spraviť, keby sme si vedeli nejako pamätať, čo bolo predtým. To lenže samozrejme nevieme, my máme vždy našu stránku s takou url, ako sa zavolala. Takže si do URL musíme pridať ďalší parameter, ktorý bude určovať smer zoradenia a následne meniť jeho hodnotu, podľa toho, čo je aktuálne zotriedené. Čiže defaultne budeme mať aj spôsob zoradenia v URL a bude defaultne nastavené na ASC. Ak sa kliklo na nejaký stĺpec pre zoradenie, budeme to vidieť v URL a následne podľa toho nastavíme URL pre kliknutie v hlavičke. Mohlo by to teda vyzerať nejako takto:

 


index.php (zmenený kód):


//ZACHYTENIE PARAMETRA PRE TRIEDENIE DAT V TABULKE
$sort_by = $_GET['sort_by'];
$sort_type = $_GET['sort_type'];

if($sort_by){
    $sql_query .= " ORDER BY ".$sort_by;

    if($sort_type){
        $sql_query .= " ".$sort_type;
    }else{
        $sql_query .= " ASC";
    }
}

$result = mysqli_query($connection, $sql_query);

echo '<tr>';
    echo '<th>ID</th>';

    echo '<th><a href="index.php?sort_by=user_name';

    if($sort_by == 'user_name'){
        if($sort_type == 'ASC'){
            echo '&sort_type=DESC';
        }else{
            echo '&sort_type=ASC';
        }
    }else{
        echo '&sort_type=ASC';
    }
    echo '">Meno</a></th>';

    echo '<th><a href="index.php?sort_by=user_surname';
    if($sort_by == 'user_surname'){
        if($sort_type == 'ASC'){
            echo '&sort_type=DESC';
        }else{
            echo '&sort_type=ASC';
        }
    }else{
        echo '&sort_type=ASC';
    }
    echo '">Priezvisko</a></th>';

    echo '<th>Vek</th>';
    echo '<th>Rola</th>';
    echo '<th>Akcie</th>';
echo '</tr>';
...

 


Ako vidíte v kóde, v časti pri zachytení parametra o sortovaní sme pridali aj zachytenie druhého parametra pre spôsob zotriedenia a následne sa pýtame, či nám tento parameter prišiel. Ak nie, tak defaultne zotrieďujeme vzostupne a ak áno, tak podľa jeho hodnoty. Ako sme povedali, musíme tento parameter pridať aj do odkazov v hlavičke. Podmienka pri skladaní odkazu by sa dala prečítať nasledovne. Najprv si k URL priliepame parameter pre zotriedenie (order_by) podľa toho, na aký stĺpec to je odkaz. Následne sa pýtame, či sú dáta aktuálne zoradené podľa tohto stĺpca (if($sort_by == 'user_name'){). Ak nie, tak nastavíme natvrdo smer ASC. Ak áno, tak sa následne pýtame, akým smerom (ASC alebo DESC), resp. či je to zotriedené vzostupne. Ak áno, tak aktuálny odkaz bude na zotriedenie zostupne a opačne, jednoducho nastavujeme URL pre opačné zotriedenie.

 

Ak máme zoradené napríklad podľa stĺpca user_name, tak URL pre odkaz user_surname bude mať ASC, pretože pri zmene stĺpcov, podľa ktorých sa zoraďuje, chceme mať defaultne na ASC. Skúste si dať vypísať query pred zavolaním a uvidíte, že to skutočne funguje. Šikovné nie? Takto by ste si už teraz vedeli sami spraviť aj zoraďovanie podľa ostatných stĺpcov, nejdeme sa s tým teraz zdržiavať, bolo by to to isté...

 

Možno ste si všimli ešte jednu vec, ktorá nie je úplne korektná. Ak klikneme na nejaký stĺpec pre zoradenie, tak v URL máme parametre pre zoradenie, to je v poriadku. Spomeňte si ale, ako funguje náš filter. Zadané vyhľadávané slovo sa tiež posiela cez URL. V obidvoch prípadoch však voláme URL iba buď s parametrom pre filtrovanie alebo s parametrami pre zoraďovanie. To zapríčiní to, že ak si niečo vyfiltrujeme a následne klikneme na zoradenie podľa nejakého stĺpca, filter sa nám z URL stratí, pretože pri skladaní odkazu pre zoraďovanie ho nezahŕňame do URL a rovnako pri filtrovaní nezahŕňame parametre pre zoradenie.

 

Aby sme to mali dokonalé, mali by sme tento problém vyriešiť tak, že by sme všetky tieto parametre zahrnuli v obidvoch prípadoch. Mali by sme teda toto pridať do kódu:

 


index.php (len pridaný kód):


<input type="hidden" name="sort_by" value="<?php echo $sort_by;?>">
<input type="hidden" name="sort_type" value="<?php echo $sort_type;?>">

if($search_keyword){
    echo '&search_keyword='.$search_keyword.'&search_form=Filtruj';
}
...

 


Ak teda chceme, aby sa v momente, kedy máme napríklad vyfiltrované slovo ''ar'' a následnom kliknutí na zotriedenie, zachovalo filtrovanie, pridáme túto podmienk na koniec skladania URL pri tvorení odkazov v hlavičke tabuľky. Nerobíme nič iné, iba sa pýtame, či je niečo vyfiltrované. Ak áno, tak parametre filtrovania pridáme do našej URL, aby sa zachovalo. Všimnite si, že sme pridali aj parameter search_form. Ak by sme ho nezadali, tak by sa následne filtrovanie nezaregistrovalo kvôli podmienke, ktorá kontroluje, či bol odoslaný formulár (if($_SERVER['REQUEST_METHOD'] == 'GET' && $_GET['search_form']){).

 

Opačný prípad, kedy je nejaké triedenie nastavené a my následne vyfiltrujeme, je v prvej časti kódu. Filtrovanie sa rieši cez formulár a ako vieme, v URL sa objavia iba tie parametre, ktoré sa nachádzajú vo forme. Preto použijeme rovnakú fintu ako v prípade zachovanie id_usera na stránke uprava-zaznamu a pridáme do formu dva skryté (hidden) elementy, ktoré budú slúžiť iba na to, aby sa preposlali aktuálne hodnoty nastavené v parametroch sort_by a sort_type. Teraz je už naše zoraďovanie čo sa týka funkcionalite vyhovujúce našim požiadavkam a dokonca spolupracuje aj s filtrovaním a parametre týchto dvoch funkcionalít sa navzájom nebijú.

 

Aby to bolo úplne dokonalé, chcelo by to zmeniť dizajn odkazov a tiež dať nejako dizajnovo používateľovi najavo, že je nejaké triedenie aktívne, lebo momentálne to je viditeľné iba v URL a používateľ neprogramátor z toho veľa nevie. To si ale spravíme v nasledujúcej prednáške:)

Máte nejakú otázku alebo Vám niečo nie je jasné? Napíšte nám na info@zacni-programovat.sk a poradíme!

Obsah súborov projektu po tejto prednáške

1 - footer.php

<div class="footer">
</div>

2 - fotogaleria.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "fotogaleria";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div id="gallery-content" class="main-content right">
<h1>Fotogaléria</h1>
<div class="line"></div>

<?php

$pictures = array();

for($i = 0; $i < 30; $i++){
$pictures[] = 'images/placeholder.jpg';
}

//zadefinovanie maximalneho poctu pre jednu stranku a nacitanie parametra (urcenie aktualnej stranky)
$countPerPage = 12;
if($_GET['page']){
$page = $_GET['page'];
}else{
$page = 1;
}

//vypocet od ktorej po ktoru fotku zobrazujeme galeriu
$start = ($page-1)*$countPerPage;
$end = $page*$countPerPage;

echo '<ul id="gallery">';
for($i = $start; $i < $end; $i++){

if($pictures[$i]){
echo '<li class="left';

if(($i+1)%3){
echo ' photo-margin';
}

echo '">';

echo '<img src="'.$pictures[$i].'">';

echo '<a target="_blank" href="'.$pictures[$i].'" class="over_div">';
echo '<span>Kliknite pre zväčšenie!</span>';
echo '</a>';

echo '</li>';
}
}
echo '</ul>';

//cyklus, ktory nam vypise dostatocny pocet odkazov pre jednotlive stranky
$pageLink = 1;
$photosCount = count($pictures);

echo '<ul class="pagination">';
while($photosCount > 0){

echo '<li><a ';

if($pageLink == $page){
echo ' class="active" ';
}

echo 'href="fotogaleria.php?page='.$pageLink.'">'.$pageLink.'</a>';
echo '</li>';
$photosCount = $photosCount - $countPerPage;
$pageLink++;
}
echo '</ul>';

?>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

3 - global.css

BODY{
margin: 0;
background-color: #dee8e7;
font-family: Arial;
}

H1{
color: #5b6b78;
margin-bottom: 10px;
}

.line{
height: 3px;
border-top: 1px dotted #5b6b78;
border-bottom: 1px dotted #5b6b78;
margin-bottom: 25px;
}

.main{
background-color: #f6f7f1;
width: 900px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

.header{
border-bottom: 1px solid #7d8079;
height: 150px;
}

.header-inner1{
}

.header-inner2{
}

.content{
}

.footer{
border-top: 1px solid #7d8079;
height: 200px;
}

.half-width{
width: 50%;
}

.full-height{
height: 100%;
}

.left{
float: left;
}

.right{
float: right;
}

.clear{
clear: both;
}

/**********MENU***********/
.sidebar{
width: 200px;
height: 400px;
}

.sidebar UL{
list-style-type: none;
padding: 0;
margin: 0;
}

.sidebar UL LI{
position: relative;
}

.sidebar UL LI A, .sidebar UL LI:HOVER .submenu A{
display: block;
padding: 15px 0px 15px 35px;
border-bottom: 1px solid #7d8079;
color: #7d8079;
text-decoration: none;
text-transform: uppercase;
}

.sidebar UL LI A.active{
color: #f5f7f4;
background-color: #f96b81;
}

.sidebar UL LI:HOVER A, .sidebar UL LI .submenu LI:HOVER A{
background-color: #5b6b78;
color: #d6e3e9;
}

.main-content{
width: calc(100% - 241px);
min-height: 700px;
border-left: 1px solid #7d8079;
padding-left: 20px;
padding-right: 20px;
}

.submenu{
display: none;
border: 2px solid #7d8079;
position: absolute;
top: -1px;
left: 201px;
width: 200px;
background-color: #FFFFFF;
}

.sidebar UL LI:HOVER .submenu{
display: block;
}

.sidebar UL LI:HOVER .submenu A{
background-color: #FFFFFF;
}

.main-content{
width: calc(100% - 241px);
min-height: 700px;
border-left: 1px solid #7d8079;
padding-left: 20px;
padding-right: 20px;
}

/**********GALERIA***********/
/**********GALERIA***********/
#gallery{
display: inline-block;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}

#gallery LI{
position: relative;
height: 133px;
margin-bottom: 10px;
}

#gallery LI IMG{
width: 213px;
height: 133px;
}

.photo-margin{
margin-right: 10px;
}

#gallery A{
display: none;
}

#gallery LI:HOVER A{
display: block;
}

#gallery LI:HOVER{
outline: 2px solid #7d8079;
}

#gallery A{
text-decoration: none;
position: absolute;
background-color: grey;
opacity: 0.4;
height: 100%;
width: 100%;
top: 0px;
}

#gallery A SPAN{
position: relative;
top: 100px;
color: #FFFFFF;
font-weight: bold;
}

/**********PERSONS***********/
.persons{
width: 100%;
table-layout: fixed;
font-family: Arial;
}

.persons, .persons TH, .persons TD{
border: 1px solid #D9E4E6;
}

.persons TH, .persons TD{
padding: 15px;
}

.persons TH{
background-color: #167F92;
color: #FFFFFF;
font-weight: normal;
text-transform: uppercase;
}

.persons TR:nth-child(odd){
background-color: #D9E4E6;
}

.persons TR{
color: #024457;
background-color: #FFFFFF;
}

.persons TD{
font-size: 14px;
}

.persons TR:HOVER{
color: #f5f7f4;
background-color: #f96b81;
cursor: pointer;
}

/**********PERSONS***********/
.contact_form{
padding: 20px;
border: 1px solid #ebebeb;
background-color: white;
font-family: Arial;
font-size: 14px;
color: #455560;
text-transform: uppercase;
text-align: center;
}

.contact_form INPUT, .contact_form TEXTAREA, .contact_form LABEL{
display: block;
width: 100%;
}

.contact_form LABEL{
margin-bottom: 5px;
text-align: left;
}

.contact_form INPUT, .contact_form TEXTAREA{
height: 30px;
border: 1px solid #bababa;
margin-bottom: 30px;
}

.contact_form TEXTAREA{
min-height: 100px;
min-width: 100%;
max-width: 100%;
}

.contact_form INPUT[type="submit"]{
display: inline;
width: 200px;
height: 40px;
background-color: #7bc143;
border: 1px solid #6fae3c;
font-size: 16px;
color: #FFFFFF;
text-transform: uppercase;
}

.contact_form INPUT[type="submit"]:HOVER{
cursor: pointer;
background-color: #42aa44;
}

.success, .error{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 10px;
}

.success {
color: #4F8A10;
background-color: #DFF2BF;
}

.error {
color: #D8000C;
background-color: #FFBABA;
}
/**********PAGINATION***********/
#gallery-content{
text-align: center;
}

ul.pagination {
display: inline-block;
padding: 0;
margin: 10px 0px 20px 0px;
}

ul.pagination li {
display: inline;
}

ul.pagination li a {
color: black;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
}

ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}

ul.pagination li a:hover{
background-color: #ddd;
}

.map{
margin: 30px 0px;
text-align: center;
padding: 25px 0px;
background-color: #FFFFFF;
}

4 - header.php

<div class="header">
<div class="header-inner1 full-height half-width left"></div>
<div class="header-inner2 full-height half-width left"></div>
</div>

5 - index.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "index";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>Domov</h1>
<div class="line"></div>

<h2>Pridanie nového používateľa</h2>

<?php
//PRIPOJENIE DO DB
$server_name = "localhost";
$db_user_name = "root";
$password = "root";
$dbname = "zapr_db_1";

$connection = mysqli_connect($server_name, $db_user_name, $password, $dbname);

if (!$connection) {
echo 'Spojenie s databázou sa nepodarilo nadviazať.';
}else{
// echo 'Spojenie s databázou sa podarilo úspešne nadviazať.';
}

//MAZANIE POLOZKY
$id_user = $_GET['id_user'];
if($id_user){
$sql_query = "DELETE FROM users WHERE id=".$id_user;
$result = mysqli_query($connection, $sql_query);

if($result){
echo '<p class="success">Položka bola úspešne zmazaná.</p>';
}else{
echo '<p class="error">Pri mazaní položky sa vyskytla chyba.</p>';
}
}

//ZACHYTENIE PARAMETROV

if($_SERVER['REQUEST_METHOD'] == 'POST' && $_POST['user_form']){
$user_name = $_POST['user_name'];
$user_surname = $_POST['user_surname'];
$age = $_POST['age'];
$role = $_POST['role'];

if(preg_match('#^.{0,50}$#', $user_name) &&
preg_match('#^.{1,50}$#', $user_surname) &&
preg_match('#^.{0,20}$#', $role) &&
preg_match('#^[0-9]{0,3}$#', $age)){

//KOREKTNE DATA

//ulozenie do DB
$sql_query = "INSERT INTO users (user_name, user_surname, age, role) VALUES (";
//otestovanie ci prisli parametre, inak vkladame NULL
if($user_name){
$sql_query .= "'".$user_name."',";
}else{
$sql_query .= "NULL,";
}

$sql_query .= "'".$user_surname."',";

if($age){
$sql_query .= $age.",";
}else{
$sql_query .= "NULL,";
}

if($role){
$sql_query .= "'".$role."')";
}else{
$sql_query .= "NULL)";
}

$result = mysqli_query($connection, $sql_query);

if($result){
echo '<p class="success">Položka bola úspešne uložená.</p>';
}else{
echo '<p class="error">Pri ukladaní dát do databzy sa vyskytla chyba.</p>';
}

//vycistenie poloziek
$user_name = '';
$user_surname = '';
$age = '';
$role = '';

}else{
//CHYBNE DATA

echo '<p class="error">Nová položka nebola uložená - nesprávne vyplnené dáta vo formulári. </p>';
}

}
?>

<!-- Formular pre vlozenie noveho usera -->
<form class="contact_form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
<label for="user_name">Meno</label>
<input type="text" name="user_name" id="user_name" value="<?php echo $user_name;?>">

<label for="user_surname">Priezvisko</label>
<input type="text" name="user_surname" id="user_surname" value="<?php echo $user_surname;?>">

<label for="age">Vek</label>
<input type="text" name="age" id="age" value="<?php echo $age;?>">

<label for="role">Rola</label>
<input type="text" name="role" id="role" value="<?php echo $role;?>">

<input type="submit" name="user_form" value="Odoslať">
</form>

<?php

//SPRACOVANIE FILTROVANIA
$search_keyword = "";
if($_SERVER['REQUEST_METHOD'] == 'GET' && $_GET['search_form']){
$search_keyword = $_GET['search_keyword'];
}

$sql_query = "SELECT * FROM users";

if($search_keyword){
$sql_query .= " WHERE user_name LIKE '%".$search_keyword."%' OR user_surname LIKE '%".$search_keyword."%'";
}

//ZACHYTENIE PARAMETRA PRE TRIEDENIE DAT V TABULKE
$sort_by = $_GET['sort_by'];
$sort_type = $_GET['sort_type'];

if($sort_by){
$sql_query .= " ORDER BY ".$sort_by;

if($sort_type){
$sql_query .= " ".$sort_type;
}else{
$sql_query .= " ASC";
}
}

$result = mysqli_query($connection, $sql_query);

echo '<h2>Zoznam používateľov</h2>';

?>

<!-- Formular na filtrovanie usera -->
<form class="contact_form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="get">
<label for="search_keyword">Meno</label>
<input type="text" name="search_keyword" id="search_keyword" value="<?php echo $search_keyword;?>">

<input type="hidden" name="sort_by" value="<?php echo $sort_by;?>">
<input type="hidden" name="sort_type" value="<?php echo $sort_type;?>">

<input type="submit" name="search_form" value="Filtruj">
</form>

<br>


<?php

if (mysqli_num_rows($result) > 0) {
$data = mysqli_fetch_all($result, MYSQLI_ASSOC);

// echo '<br><br><pre>';
// print_r($data);
// echo '</pre>';
echo '<h2>Zoznam používateľov</h2>';

echo '<table class="persons">';
echo '<tr>';
echo '<th>ID</th>';

echo '<th><a href="index.php?sort_by=user_name';

if($sort_by == 'user_name'){
if($sort_type == 'ASC'){
echo '&sort_type=DESC';
}else{
echo '&sort_type=ASC';
}
}else{
echo '&sort_type=ASC';
}
if($search_keyword){
echo '&search_keyword='.$search_keyword.'&search_form=Filtruj';
}
echo '">Meno</a></th>';

echo '<th><a href="index.php?sort_by=user_surname';
if($sort_by == 'user_surname'){
if($sort_type == 'ASC'){
echo '&sort_type=DESC';
}else{
echo '&sort_type=ASC';
}
}else{
echo '&sort_type=ASC';
}
if($search_keyword){
echo '&search_keyword='.$search_keyword.'&search_form=Filtruj';
}
echo '">Priezvisko</a></th>';

echo '<th>Vek</th>';
echo '<th>Rola</th>';
echo '<th>Akcie</th>';
echo '</tr>';

for($i=0; $i<count($data); $i++){
echo '<tr>';
foreach($data[$i] as $index => $value){
echo '<td>'.$value.'</td>';
}

echo '<td>';
echo '<a href="uprava-zaznamu.php?id_user='.$data[$i]['id'].'">Upraviť záznam</a><br><br>';
echo '<a href="index.php?id_user='.$data[$i]['id'].'">Vymazať záznam</a>';
echo '</td>';

echo '</tr>';
}

echo '</table>';

} else {
echo "0 results were selected.";
}

echo '<br><br>';

mysqli_close($connection);
?>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

6 - kontakt.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "kontakt";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>Kontakt</h1>
<div class="line"></div>

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST' && $_POST['contact_form']){
if(!preg_match('#^[a-zA-Z0-9]{5,10}$#', $_POST['name']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
echo '<p class="error">Zadajte prosim korektne udaje</p>';

//naplnenie formulara
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
}else{
//odoslanie emailu
echo '<p class="success">Vasa sprava bola uspesne odoslana.</p>';

$name = '';
$email = '';
$subject = '';
$message = '';
}

}

?>

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" class="contact_form">
<label for="email">Meno a priezvisko</label>
<input type="text" name="name" id="name" value="<?php echo $name;?>"><br><br>

<label for="email">Email</label>
<input type="text" name="email" id="email" value="<?php echo $email;?>"><br><br>

<label for="subject">Predmet</label>
<input type="text" name="subject" id="subject" value="<?php echo $subject;?>"><br><br>

<label for="message">Správa</label>
<textarea name="message" id="message" placeholder="Zadajte text spravy..."><?php echo $message;?></textarea><br><br>

<input type="submit" name="contact_form" value="Odoslat">
</form>

<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d84199.38373426767!2d19.06093170408453!3d48.73928892777478!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47153de36e8ad42f%3A0xf8223f8a0b8b9032!2sBansk%C3%A1+Bystrica!5e0!3m2!1ssk!2ssk!4v1465151393672" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

7 - menu.php

<div class="sidebar left">
<ul>
<li><a class="<?php if($actual_page == "index"){echo 'active';}?>" href="index.php">Domov</a></li>
<li><a class="<?php if($actual_page == "o-nas"){echo 'active';}?>" href="o-nas.php">O nás</a></li>
<li><a class="<?php if($actual_page == "fotogaleria"){echo 'active';}?>" href="fotogaleria.php">Fotogaléria</a></li>
<li>
<a class="<?php if($actual_page == "kontakt"){echo 'active';}?>" href="kontakt.php">Kontakt</a>

<ul class="submenu">
<li><a href="kontakt.php">Kontakt</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>

</li>
</ul>
</div>

8 - o-nas.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "o-nas";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>O nás</h1>
<div class="line"></div>

<?php
$person_1 = array('Raťafák', 'Plachta', 'plachtos@mail.sk','0903 123 123');
$person_2 = array('Od kuka', 'do kuka', 'kuko@mail.sk','0903 123 123');
$person_3 = array('Joey', 'Tribbiani', 'ako.sa.mas@mail.sk','0903 123 123');
$person_4 = array('Charlie', 'Harper', 'hooker@mail.sk','0903 123 123');
$person_5 = array('Chruno', 'Moysey', 'abstinent@mail.sk','0903 123 123');

$pole = array($person_1, $person_2, $person_3, $person_4, $person_5);

$pole[5] = array('Jardo', 'Jágr', 'legenda@mail.sk','0903 123 123');

echo '<table class="persons">';
echo '<tr>';
echo '<th>Meno</th>';
echo '<th>Priezvisko</th>';
echo '<th>Email</th>';
echo '<th>Telefónne číslo</th>';
echo '</tr>';

for($i=0; $i<count($pole); $i++){
echo '<tr>';

for($j=0; $j<count($pole[$i]); $j++){
echo '<td>'.$pole[$i][$j].'</td>';
}

echo '</tr>';
}

echo '</table>';

?>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

9 - uprava-zaznamu.php

<!DOCTYPE html>

<html lang="sk">
<head>
<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>Editácia používateľa</h1>
<div class="line"></div>

<?php
$id_user = $_GET['id_user'];

//PRIPOJENIE DO DB
$server_name = "localhost";
$db_user_name = "root";
$password = "root";
$dbname = "zapr_db_1";

$connection = mysqli_connect($server_name, $db_user_name, $password, $dbname);

if (!$connection) {
echo '<p class="error">Spojenie s databázou sa nepodarilo nadviazať.</p>';
}

//SPRACOVANIE ODOSLANIA FORMULARA
if($_SERVER['REQUEST_METHOD'] == 'GET' && $_GET['edit_user_form']){
$user_name = $_GET['user_name'];
$user_surname = $_GET['user_surname'];
$age = $_GET['age'];
$role = $_GET['role'];

if(preg_match('#^.{0,50}$#', $user_name) &&
preg_match('#^.{1,50}$#', $user_surname) &&
preg_match('#^.{0,20}$#', $role) &&
preg_match('#^[0-9]{0,3}$#', $age)){

//KOREKTNE DATA

//ulozenie do DB
$sql_query = "UPDATE users SET user_name=";

//otestovanie ci prisli parametre, inak vkladame NULL
if($user_name){
$sql_query .= "'".$user_name."',";
}else{
$sql_query .= "NULL,";
}

$sql_query .= "user_surname='".$user_surname."',age=";

if($age){
$sql_query .= $age.",";
}else{
$sql_query .= "NULL,";
}

$sql_query .= "role=";

if($role){
$sql_query .= "'".$role."'";
}else{
$sql_query .= "NULL";
}

$sql_query .= " WHERE id=".$id_user.";";

$result = mysqli_query($connection, $sql_query);

if($result){
echo '<p class="success">Položka bola úspešne uložená.</p>';
}else{
echo '<p class="error">Pri ukladaní dát do databázy sa vyskytla chyba.</p>';
}


}else{
//CHYBNE DATA
echo '<p class="error">Položka nebola uložená - nesprávne vyplnené dáta vo formulári. </p>';
}
}

//NACITANIE DAT O USEROVI
if($id_user){
$sql_query = "SELECT * FROM users WHERE id=".$id_user.";";

$result = mysqli_query($connection, $sql_query);

if (mysqli_num_rows($result) > 0) {

$data = mysqli_fetch_all($result, MYSQLI_ASSOC);
$user_name = $data[0]['user_name'];
$user_surname = $data[0]['user_surname'];
$age = $data[0]['age'];
$role = $data[0]['role'];


?>

<!-- Formular pre editovanie usera -->
<form class="contact_form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="get">
<label for="user_name">Meno</label>
<input type="text" name="user_name" id="user_name" value="<?php echo $user_name;?>">

<label for="user_surname">Priezvisko</label>
<input type="text" name="user_surname" id="user_surname" value="<?php echo $user_surname;?>">

<label for="age">Vek</label>
<input type="text" name="age" id="age" value="<?php echo $age;?>">

<label for="role">Rola</label>
<input type="text" name="role" id="role" value="<?php echo $role;?>">

<input type="hidden" name="id_user" value="<?php echo $id_user;?>">

<input type="submit" name="edit_user_form" value="Odoslať">
</form>

<?php


}else{
echo '<p class="error">Nepodarilo sa načítať dáta pre editovanie.</p>';
}


}else{
echo '<p class="error">Parameter používateľa pre editáciu sa nepodarilo načítať.</p>';
}

?>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>

</div>

</body>
</html>

Ťažko sa vám učí samému?

Máte problémy s niektorými časťami alebo sa neviete učiť sám? Využite našu možnosť individuálnej asistencie:

  • samostatný prístup
  • vysvetlenie nejasností prebraného učiva
  • úlohy a cvičenia navyše
  • všetko z pohodlia domova cez mail a skype

Pre viac info kliknite tu

Kľúčové slová prednášky

table sortzoradenie tabulkytabulka triedenietabulka zoradeniesql order byorder by ascth sortzoradenie datdata zotriedenievzostupne triedeniezoradenie zostupne

IT ftip

Čo majú spoločné pevný disk a minisukňa? Krátku prístupovú dobu.