Filtrovanie dát v tabuľke cez SQL

V tomto semestri si postupne ukazujeme praktické využitie jazyka SQL a všeobecne využitie databáz v informačných systémoch a inak tomu nebude ani na tejto prednáške. Po tom, ako sme si ukázali, ako dáta z databázy načítať a použiť v kóde jazyka PHP a takisto aj ako dáta zachytené, resp. nachádzajúce sa v kóde uložiť do databázy, si ukážeme, ako dáta na stránke filtrovať a vyhľadávať.

 

S nasledujúcou funkcionalitou (vymoženosťou), ktorú si ideme na našej stránke zaviesť, sa takisto stretávate denne počas surfovania. Či už hľadáte niečo na nete alebo konkrétne na nejakej stránke, vo väčšine zadávate nejaké kľúčové slová (keywords), ktoré popisujú to, čo sa snažíte nájsť. Samotný proces vyhľadávania, teda hľadania vami zadaného kľúčového slova na stránke, neznamená nič iné, ako použitie klauzuly WHERE pri príkaze SELECT v jazyku SQL. Okrem vyhľadávania využíva túto kombináciu (select - where) aj proces filtrovania dát v nejakých zoznamoch alebo výpisoch.

 

Naša tabuľka používateľov postupne naberá na množstve a kľudne by mohla obsahovať stovky alebo tisíce záznamov. Čo ale v prípade, že chceme nájsť nejakého konkrétneho používateľa? Napríklad podľa mena? V takomto prípade zvyknú takéto tabuľky alebo zoznamy niečoho obsahovať filtre, čo sú v podstate formuláre, do ktorých vpisujeme nami hľadaný výraz a po kliknutí na tlačítko filtruj sa nám zobrazia iba záznamy, ktoré obsahujú nami zadaný výraz.

 

Takýto filter si teraz spravíme aj my. Teoreticky by ste to mohli zvládnuť aj sami, viete pracovať s formulármi a parametrami a aj príkaz v SQL by ste zvládli. Čo teda ideme robiť? Nad tabuľkou si spravíme formulár, ktorý bude obsahovať napríklad jeden textový input, do ktorého bude používateľ zadávať hľadané meno alebo priezvisko. Vedľa neho bude tlačítko filtruj a po kliknutí naň sa stránka refrešne a v tabuľke bude vypísaný iba daný záznam alebo hláška, že sa žiadny záznam nenašiel.

 

Poďme teda na to. Začneme ako vždy iba s funkcionalitou, s dizajnom sa teraz nebudeme zbytočne zaoberať. Nad tabuľku si pridáme formulár s dvomi prvkami a v kóde spracujeme odoslanie formuláru. Keďže máme na stránke dva formuláre, práve teraz nám príde vhod testovanie, ktorý formulár sa odoslal (podľa name parametra na submit tlačítku). V spracovaní sa spýtame, či nám prišiel nejaké parameter a ak áno, tak ho pošleme v klauzule WHERE do príkazu na vytiahnutie dát z tabuľky. Mohlo by to vyzerať takto:

 


index.php (pridaný kód za formulár pre pridanie nového záznamu):

<?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 ='".$search_keyword."' OR user_surname = '".$search_keyword."'";
    }

    $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="submit" name="search_form" value="Filtruj">
</form>

<br>

 

 
Ako vidíte v kóde, najprv sme si urobili spracovanie formulára pre vyhľadávanie, do premennej search_keyword (hľadané kľúčové slovo) si vkladáme hľadaný parameter. Všimnite si dve veci, prvá je, že sme metódu tohto formulára zmenili na GET. Spravili sme to preto, pretože vyhľadávanie sa vo väčšine dáva ako GET, aby hľadaný parameter bol viditeľný v URL adrese a teda sa v nej zachoval. V prípade preposielania URL aj s konkrétnym výsledkom vyhľadávania sa tým pádom zachová. Ak by ste niečo hľadali a chceli ten istý výsledok poslať niekomu, dostal by po zavolaní danej url rovnaký výsledok (filtrovanie).

 

Druhá vec je, že sme podmienku, či boli nájdené nejaké dáta (if (mysqli_num_rows($result) > 0) {) posunuli nižšie, aby sa nám v prípade žiadneho nájdeného výsledku zobrazil nadpis Zoznam používateľov a pod ním formulár na vyhľadávanie. Ako vidíte, podľa toho, či nám prišiel nejaký parameter na vyhľadávanie (if($search_keyword){) pridávame do query na SELECT dát klauzulu WHERE. Všimnite si, že sme použili podmienku OR, takže nami zadané meno sa vyhľadáva aj ako v menách, tak aj v priezviskách. Všimnite si, že sme museli zakomponovať aj úvodzovky, keďže vyhľadávame string.

 

Vyhľadávanie naozaj funguje, skúste si zadať nejaké existujúce mená a priezviská (Harper, Miro...), skutočne sa vypíšu iba tie, ktoré sa zhodujú s hľadanou frázou. Šikovné nie? Ak chceme zobraziť všetky záznamy, jednoducho vymažeme hľadanú frázu a dáme hľadať (vráti nám všetko bez WHERE klauzuly) alebo klikneme v menu na domov, čím sa stránka načíta bez odoslania formulára. Refreš nám v tomto prípade nebude fungovať, pretože ako vieme, pri odoslaní formulára a pokuse o refreš alebo o vrátenie sa späť v prehliadači nás browser upozorní, že prepošle znova formulár.

 

Aby bolo naše hľadanie ešte dokonalejšie, naučíme sa novú vec z jazyka SQL. Ako ste si všimli, toto naše vyhľadávanie funguje iba v prípade, že zadáme presnú hodnotu, ktorá sa nachádza v tabuľke (meno alebo priezvisko). Z praxe ste ale zvyknutí, že vo väčšine nemusíte zadávať presne nejakú hodnotu, resp. kľúčové slovo, ale stačí zadať iba nejakú jeho menšiu časť. Ak by sme napríklad zadali len slovo ''en'', tak by sme chceli, aby nám filtrovanie vrátilo všetky záznamy, ktoré obsahujú tento reťazec (substring – menší string - časť stringu nachádzajúca sa v stringu/hodnote). V našom prípade by to bolo aj Zdeno a aj Lenka.

 

Presne na takéto filtrovanie pomocou klauzuly WHERE, kde v podmienke nie je vzťah, že sa zadaná hodnota musí zhodovať s nejakým stĺpcom (=), slúži v jazyku SQL príkaz LIKE (ako). Tento príkaz hovorí, nájdi všetky záznamy, ktorých hodnota stĺpcov je ako zadaná hodnota, v našom prípade napríklad to ''en''. V hodnote, ktorú chceme vyhľadávať, môžeme zadať znak percenta (%), ktorý má podobnú funkciu ako bodka v regulárnych výrazoch, značí , že sa na danom mieste môže nachádzať akýkoľvek znak.

 

Čiže výraz vo WHERE klauzule name LIKE '%en%' vyhľadá tie záznamy, ktorých hodnota obsahuje niečo na začiatku, potom dva znaky e a n a následne za tým tiež niečo môže byť. Ak by sme zadali iba en%, tak by to vyhľadalo len slová, ktoré sa začínajú na písmená en, podobne keby sme mali %en, tak by to boli len hodnoty, ktoré končia na en.

 

Tento príkaz sa využíva veľmi často najmä pri vyhľadávaniach a filtrovaniach. Na druhej strane treba s ním narábať opatrne, pretože toto vyhľadávanie dosť spomaluje načítanie dát z databázy. Pri veľkom počte dát a zadávaní tejto podmienky na príliš veľa stĺpcov zapríčiňuje príliš veľa krokov pre databázový server na porovnávanie (či niečo obsahuje to a to). V našom prípade to ale zatiaľ nebude vadiť. Naša podmienka v príkaze SELECT by teda mohla vyzerať takto:

 


index.php (iba upravená WHERE klauzula):


$sql_query .= " WHERE user_name LIKE '%".$search_keyword."%' OR user_surname LIKE '%".$search_keyword."%'";
...

 


Keď si teraz zadáte hľadanie napríklad výrazov ''en'' alebo ''ar'', hodí vám záznamy, ktorých hodnota meno alebo priezvisko obsahuje práve tento reťazec znakov. Milé nie? Týmto je už naše filtrovanie dát v tabuľke dokonané, pomocou nášho filtra vieme nájsť všetko, čo poterbujeme:) Tento systém by sa dal kľudne využiť aj tak, že ak by sme mali napríklad stránku, ktorá obsahuje články a každé z nich by malo viacero kľúčových slov, ktoré článok popisujú, mohla by byť táto podmienka aplikovaná na všetky slová a nadpis článku. Takto by sme mohli do webstránky zakomponovať vyhľadávanie vo všetkých stránkach. Prípadne by sme ešte hľadanú frázu mohli skloňovať (upravovať ako string), ale to je už náročnejší mechanizmus, kľudne by postačilo aj takéto jednoduché hľadanie.

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ť.';
}

//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."%'";
}

$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="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>Meno</th>';
echo '<th>Priezvisko</th>';
echo '<th>Vek</th>';
echo '<th>Rola</th>';
echo '</tr>';

for($i=0; $i<count($data); $i++){
echo '<tr>';
foreach($data[$i] as $index => $value){
echo '<td>'.$value.'</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>

Ť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

likewhere likenot likelike %sql likesql wheredatabaza filtrovaniewebstranka filtervyhladavanievyhladavanie na stranke

IT ftip

Programátor ide o ôsmej večer z práce a stretne šéfa. Čo tak skoro? Vzali ste si pol dňa voľna? Ale nie, pán šéf, len si skočím na obed.