Dizajn zoraďovania dát v tabuľke

Na tejto prednáške si troška zmeníme dizajn našej tabuľky upravením najmä hlavičky. Teraz nám napríklad nadpis stĺpca Priezvisko odskakuje, resp. nám šírka bunky nestačí na jej obsah. Text zasahuje mimo bunky, pretože sme zvýšili počet stĺpcov a tým sa zmenšila šírka všetkých stĺpcov. Okrem toho sme z textu dvoch buniek v hlavičke spravili odkazy, pre ktoré nemáme nastavený dizajn, takže sa nám zobrazujú modrou farbou. Tieto veci by sme mali upraviť, aby to nejako vyzeralo a ešte k tomu sa naučíme jednu novú vec z jazyka CSS, ktorá sa nám v tomto prípade úplne hodí. Poďme teda na to.

 

V prvom rade upravíme presahovanie textu v hlavičke. Keď sa nad tým zamyslíte, úplne rýchlo to môžeme opraviť dvomi spôsobmi, resp. zmenami nastavení, ktoré nám to zapríčiňujú. Ak si všimnete, všetky stĺpce sú rovnako široké, aj keď to nie je treba, napríklad stĺpec ID je zbytočne taký široký, keďže bude obsahovať vždy iba krátke číslo (aspoň teraz v tomto prípade). Mohli by sme teda zmeniť pravidlo table-layout: fixed, ktoré nám zapríčiňuje rovnakú šírku stĺpcov. Druhé pravidlo, ktoré nám spôsobuje vyčnievanie textu je padding buniek v hlavičke a tabuľke (th, td), ktoré máme nastavené na 15 pixelov, čo je tiež pomerne veľa. My si teda vypneme vlastnosť table-layout a taktiež zmenšíme padding na 10 pixelov.

 


global.css (len kód, resp. triedy, kde sa niečo zmenilo):

...
/**********PERSONS***********/
.persons{
    width: 100%;
    font-family: Arial;
}
...
.persons TH, .persons TD{
    padding: 10px;
}
...

 


Text už nepresahuje a šírka buniek je teraz v poriadku. Poďme nejako upraviť odkazy v hlavičke. Štandardný text v hlavičke je biely, takže by sme mali farbu dať rovnakú, aby to veľmi nekričalo. Aby sme nejako odlíšili názvy stĺpcov, podľa ktorých je možné dáta zoraďovať, necháme tieto nadpisy podčiarknuté a pri stave hover im zmeníme farbu, ako je každý druhý riadok tabuľky, aby si používateľ všimol, že je možné na ne kliknúť. Musíme teda pridať triedu pre konkrétne odkazy, bude sa volať sortable a následne nastaviť dizajn v css. Kód by mohol vyzerať takto:

 


index.php (len pridaná trieda pre odkazy cez ktoré sa sortuje):


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

echo '<th><a class="sortable" href="index.php?sort_by=user_surname';
...

global.css (len pridaný kód):

.persons TH A.sortable{
    color: #FFFFFF;
}

.persons TH A.sortable:HOVER{
    color: #D9E4E6;
}

 


Teraz už naša hlavička vyzerá celkom v pohode, nič nevytŕča kde nemá a máme graficky odlíšené názvy stĺpcov, podľa ktorých sa dá zoraďovať. Ostalo nám spraviť ešte jednu vec, ktorá je celkom dôležitá a to je moment, kedy je podľa nejakého stĺpca naozaj niečo zoradené. Ak teraz klikneme na jeden z dvoch stĺpcov a dáta sa príslušne zoradia, používateľ nemá graficky znázornené, podľa ktorého stĺpca má dáta zoradené a obzvlášť, ktorým spôsobom (asc alebo desc). V praxi sa práve toto zvykne nejako zvýrazňovať, aby bolo v každom momente jasné, podľa ktorého stĺpca a akým spôsobom sú dáta zoradené.

 

Preto si tento moment musíme v kóde odchytiť. Síce sa nám tým kód odkazu pre zoradenie ešte viac roztriešti na viac ifov (už teraz tam testujeme parametre pre spôsov zoradenia), ale to nás nemusí trápiť, hlavne, že to bude vyzerať tak, ako chceme. Čo teda musíme odchytiť? Musíme pridať nejakú triedu odkazu, ak je podľa neho práve v tom momente tabuľka zoradené. To by nemal byť problém, to máme v premennej sort_by. My to ale spravíme rovno tak, že v prípade vzostupného zoradenia pridáme odkazu triedu s názvom asc a v prípade zostupného desc. Pretože pre obe tieto triedy by sme mali mať rôzny dizajn, aby používateľ jednoznačne vedel, podľa čoho a akým spôsobom sú dáta zoradené.

 

Musíme si kód pri definovaní atribútu class rozdeliť a medzi neho vložiť ešte podmienku, ktorá nám za triedu sortable v prípade zoradenia podľa daného stĺpca pridá ďalšiu triedu, ktorá bude indikovať práve triedenie daným spôsobom. Kód by mal teda vyzerať takto:

 


index.php (iba okdazy pre zoraďovanie):


echo '<th><a class="sortable';

    if($sort_by == 'user_name'){
        if($sort_type == 'ASC'){
            echo ' asc';
        }else{
            echo ' desc';
        }
    }

echo '" href="index.php?sort_by=user_name';

echo '<th><a class="sortable';

    if($sort_by == 'user_surname'){
        if($sort_type == 'ASC'){
            echo ' asc';
        }else{
            echo ' desc';
        }
    }

echo '" href="index.php?sort_by=user_surname';
...

 


Ako vidíte v kóde, za triedu sortable si pridávame v prípade, že je práve podľa daného stĺpca nastavené triedenie, triedu s názvom daného spôsobu triedenia (vzostupne/zostupne). Skúste si poklikať na odkazy a sledujte pomocou nástrojov vývojára, že sa pri odkaze dané triedy skutočne nachádzajú. Keď už sa nám triedy správne priraďujú, mohli by sme teraz nastaviť obidvom triedam nejaký dizajn, ktorý by určoval, že podľa daného stĺpca sú dáta práve zoradené. Mohli by sme pre vzostupné použiť jednu farbu a pre zostupné druhú farbu.

 

My si ale vyskúšame niečo iné a krajšie. Predstavme si, že by sme chceli dať pred odkaz znázornenie pre smer zoradenia. Vzostupné by mohlo mať [a-z] a zostupné [z-a]. Možno vám došlo, ak to ideme dávať ako text, prečo sme to jednoducho nevypísali cez echo v PHP a bolo by. Áno, mohli by sme. Takéto niečo je ale možné aj pomocou jazyka CSS a práve to si teraz ukážeme, lebo sa to dá použiť viacerými spôsobmi.

 

V jazyku CSS existuje špeciálny selector, ktorý môžeme pridať za nami zadaný selector (niečo ako stav hover pri odkaze) s názvom :before (pred) alebo :after (za). Tento špeciálny selector slúži na vloženie obsahu (textového), ktorý sa definuje vlastnosťou content (obsah) buď pred obsah daného elementu alebo za obsah daného elementu. V našom prípade bude teda hodnota vlastnosti content práve vyššie definovaný text ([a-z] alebo [z-a]) a selector použijeme before, aby to bolo na začiatku. Okrem toho môžeme nastaviť aj štýl vkladané obsahu pri danom selectore. Náš kód by mohol teda vyzerať nasledovne:

 


global.css (len pridaný kód):

...
.persons TH A.sortable.asc:before{
    content: '[a-z] ';
}

.persons TH A.sortable.desc:before{
    content: '[z-a] ';
}
...

 


Keď si tento kód vyskúšate, skutočne sa nám pridá pred text v odkaze nami zadaný string vo vlastnosti content. Len pre pripomenutie, text A.sortable.asc je selector pre odkaz, ktorý obsahuje triedu sortable a aj asc. Keby bola medzi tým medzera, tak by to už musela byť trieda elementu, ktorý sa nachádza v odkaze, pretože ako vieme, každá medzera určuje ďalšiu úroveň v hierarchii elementov...

 

Na záver si to už len troška zmeníme. V praxi sa samozrejme zvykne pred takýto odkaz dávať grafický objekt – obrázok šípky hore alebo dole, tým sa ale nejdeme teraz zaťažovať. Do obsahu vlastnosti content teda môžeme pridať akýkoľvek text. Medzi tento text patrí aj množstvo špeciálnych znakov, ktoré je možné vložiť do obsahu kodu webstránky, resp. ktoré stránky korektne zobrazujú ako text (ako znak – akokeby písmeno alebo číslicu). K zoznamom takýchto znakov, ktoré môžete použiť a k teórii okolo toho sa dostaneme troška neskôr, nateraz si použijeme čiarkovanú šípku hore a dole, ktorú si môžete skopírovať zatiaľ z ukážky kódu. Náš kód by mohol teda vyzerať takto:

 


global.css:

...
.persons TH A.sortable.asc:before{
    content: '⇡ ';
}

.persons TH A.sortable.desc:before{
    content:  '⇣ ';
}
...

 


Ako vidíte, teraz to už naozaj používateľovi niečo vraví, ak má zoradené podľa jedného z našich dvoch stĺpcov, indikuje mu to šípka, ktorá aj popisuje daný smer zoradenia. Pekné nie? Teraz to už vyzerá oveľa lepšie, ako v predošlej kapitole:)

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%;
font-family: Arial;
}

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

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

.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 TH A.sortable{
color: #FFFFFF;
}

.persons TH A.sortable:HOVER{
color: #D9E4E6;
}

.persons TH A.sortable.asc:before{
content: '⇡ ';
}

.persons TH A.sortable.desc:before{
content: '⇣ ';
}

/**********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 class="sortable';

if($sort_by == 'user_name'){
if($sort_type == 'ASC'){
echo ' asc';
}else{
echo ' desc';
}
}

echo '" 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 class="sortable';

if($sort_by == 'user_surname'){
if($sort_type == 'ASC'){
echo ' asc';
}else{
echo ' desc';
}
}

echo '" 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

css beforeaftercontentcss after contentselektor beforecss contentsortovanie dizajnzoradovanie dizajntabulka zoradenie csscss hlavicka tabulky

IT ftip

Zomrie programátor a dostane sa do pekla. Po týždni Lucifer volá Bohovi: - Čo za blázna si mi sem poslal? Zničil mi všetky kotly, poškrtil všetkých čertov a už tri dni bezhlavo behá po všetkých chodbách pekla a reve "Kde je prechod do druhého levelu?"