Vyskakovacie okná na stránke

Poďme sa nateraz vrátiť k domovskej stránke nášho projektu, na ktorej sme v tomto semestri naprogramovali kompletnú obsluhu dát v databáze v tabuľke users. V tomto momente môžeme vykonávať všetky akcie, ktoré by sme si želali, čiže vkladať, mazať a meniť dáta. Chcelo by to ale popridávať ešte niečo navyše, aby to bolo aj nejako bezpečnejšie a prehľadnejšie. Zamyslite sa práve nad tým mazaním dát, ktoré vykonávame jedným kliknutím na odkaz Vymazať záznam. Toto riešenie je síce efektívne, nie je však úplne správne, resp. optimálne. Veľmi ľahko sa môže používateľovi stať, že klikne na zlý riadok alebo že len pri pohybe myšou ponad prvky stránky nechtiac klikne na tento odkaz. Následne je záznam nenávratne vymazaný.

 

V praxi sa zvykne práve kvôli takýmto situáciám najmä dôležité akcie, akou je napríklad vymazanie dát z databázy, nejako ošetriť, resp. pridať im viacnásobné potvrdenie. Najčastejšie sa asi stretávate s niečím takým, že po kliknutí na podobný odkaz vám v prehliadači vyskočí malé okienko s hláškou, že či ste si istý, že chcete naozaj daný záznam vymazať. Keď vám takéto okno vyskočí, akcia sa zbrzdí – presmerovanie na daný odkaz sa nevykoná, ale vykonávanie akokeby programu – kódu je pozastavené a čaká na vašu odpoveď. V tomto momente si každý používateľ ešte raz uvedomí, kde klikol a či to naozaj chce zmazať. Ak si uvedomí, že sa pomýlil, tak klikne na nie, okno sa stratí a akcia – presmerovanie na odkaz (čiže vymazanie), sa nevykoná. Nepotvrdenie okna akokeby zrušilo akciu – presmerovanie, resp. vykonanie odkazu. V prípade potvrdenia vyskakovacieho okna sa akcia normálne vykoná. Čiže načíta sa stránka, ktorá sa po kliknutí na odkaz má načítať a vykoná sa jej kód, takže sa odkaz vymaže.

 

Presne toto si ideme teraz pridať do našej stránky a práve toto sa robí pomocou jazyka JavaScript. Poďme si teda rozobrať náš problém, aby sme pochopili, čo nás čaká. V prvom rade musíme v kóde povedať, aby sa po kliknutí na tlačítko Vymazať záznam zobrazilo vyskakovacie okno. Potom musíme v kóde zadať, čo má byť vo vyskakovacom okne napísané, resp. zobrazené (aký text – hláška) a čo má byť zobrazené v možnostiach odpovede (áno alebo nie a podobne).

 

Ako sme si už skorej povedali, kód JS sa vo väčšine spúšťa na základe vykonania nejakej akcie – udalosti. Podľa toho sú pomenované aj špeciálne udalosti (event – udalosť), ktoré je možné pridať ako atribút do prvkov jazyka HTML. Takýchto udalostí je viacero, našemu odkazu musíme pridať event, ktorý popisuje kliknutie na daný prvok. Názov tohto eventu je prisluchájúci k jeho popisu – onclick (on click – na/po kliknutí). Hodnota týchto atribútov môže byť rovno kód v jazyku JS, toto ale nie je veľmi pekný spôsob, keďže to zaberie v kóde veľa miesta a kód sa stane neprehľadný. Lepšia varianta je použiť ako hodnotu týchto atribútov názov funkcie, ktorú máme niekde v časti jazyka JS definovanú (na aktuálnej stránke).

 

Takže naša úloha je jasná, musíme si napísať funkciu v jazyku JS (podobne ako v jazyku PHP) a jej zavolanie vyvoláme kliknutím na tento odkaz. Na odkaz neklikajte, aby ste si zbytočne nepovymazávali záznamy v databáze. Môžete si ale narýchlo vytvoriť niekoľko testovacích záznamov tým, že len vyplníte priezvisko hocičím z klávesnice a dáte uložiť. Potom si to na týchto záznamoch budeme testovať. Kód by mohol teda vyzerať takto:

 


index.php:


echo '<a href="index.php?id_user='.$data[$i]['id'].'" onclick="showConfirm()">Vymazať záznam</a>';

 </div>

        <script>
        function showConfirm(){
             //kod funkcie
        }
        </script>

    </body>
</html>

 

 

Ako sme si povedali, do odkazu sme pridali atribút s názvom onclick, ktorého hodnota je zavolanie našej funkcie (názov funkcie a zátvorka s parametrami, podobne ako pri PHP). Následne sme v časti script, ktorý sme dali na koniec kódu – pred ukončenie body (toto je dobrý zvyk, aby to bolo na konci na jednom mieste) zadeklarovali našu funkciu, zatiaľ so žiadnym kódom. Všimnite si, že aj komenty sa zadávajú rovnako ako v PHP (cez dve lomítka). Teraz musíme do tejto funkcie vložiť kód, ktorý nám zobrazí vyskakovacie okno, ktoré budeme môcť potvrdiť alebo zrušiť.

 

Telo tejto funkcie musí pre odkaz vrátiť hodnotu false (pre zrušenie) alebo true (pre povolenie), aby sme ovplyvnili jeho fungovanie. Tým pádom musíme do hodnoty atribútu onclick zadať pred zavolanie funkciu aj slovo return, aby bolo jasné, že odkazu chceme vracať hodnotu, ktorú vráti daná funkcia. Ak si nateraz dáme len do funkcie natvrdo vrátenie false, odkaz nebude nikdy fungovať, pretože pridaním onclick a vrátením false sa akokeby deaktivoval:

 


index.php:


echo '<a href="index.php?id_user='.$data[$i]['id'].'" onclick="return showConfirm()">Vymazať záznam</a>';
...
function showConfirm(){
    return false;
}

 


Keď si teraz skúsite klikať na odkaz, nič sa nestane. Naša funkcia vrátila false a táto hodnota bola vrátená aj odkazu vďaka slovu return pred zavolaním funkcie v hodnote atribútu onclick. Ako vidíte, práve sme jazykom JavaScript ovplyvnili fungovanie stránky, konkrétne prvku odkaz. To bol ale len medzikrok pre lepšie pochopenie, ako to funguje.

 

My ale potrebujeme vyvolať potvrdzovacie okno, podľa ktorého odpovedi sa náš odkaz vykoná (return true) alebo nevykoná (return false). Na to slúži vstavaná funkcia jazyka JS s názvom confirm (potvrdiť), ktorá zobrazí potvrdzovacie okno. Toto okno bude defaultne obsahovať dve tlačítka, jedno na potvrdenie (áno/ok) a jedno na zrušenie (zrušiť/cancel). Text týchto tlačítiek by sa mal zobrazovať podľa vášho prehliadača a jeho nastavení (jazykových). Podľa toho, na čo používateľ klikne, vracia táto funkcia true alebo false. Naša úloha je jasná, stačí iba vrátiť to, na čo používateľo klikol. Kód by mal teda vyzerať takto:

 


index.php:

function showConfirm(){
    var answer = confirm("Naozaj chcete vymazať daný záznam?");

    if(answer){
        //vykonanie, ak pouzivatel potvrdi confirm okno - odkaz sa vykona
        return true;
    }else{
        //vykonanie, ak pouzivatel zruzi confirm okno - odkaz sa nevykona
        return false;
    }
}

 


Ak si tento kód vyskúšate, tak naozaj po zrušení okna sa nič nevykoná, odkaz akokeby nefungoval. Po kliknutí na OK sa však akcia vykoná tak, ako predtým. Pekné nie? Práve ste veľmi prakticky použili jazyk JavaScript a nebolo to pritom ani také ťažké, iba ste sa naučili jednu funkciu, ktorá to spôsobí (confirm) a všetko ostatné už ovládate a chápete (princíp funkcií, parametre, return).

 

Táto funkcia sa v praxi používa veľmi často a v podstate všade, kde je pre istotu nutné pridať ešte medzikrok pred vykonaním nejakej akcie na stránke, skoro vždy najmä pri mazaní. Ak by sme to mali zhrnúť, tak ste sa naučili, ako je možné vykonať/spustiť kód jazyka JavaScript – pomocou jeho eventov, ktoré je možné pridať ako atribút elementu, na ktorý sa event bude vzťahovať. Taktiež ste sa naučili, kde a ako sa píše kód v JS a aj ste videli, že sa skutočne stránka nerefrešla pri jeho spustení, že sa spustil akokeby iba u nás - v prehliadači.

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'].'" onclick="return showConfirm()">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>

<script>
function showConfirm(){
var answer = confirm("Naozaj chcete vymazať daný záznam?");

if(answer){
//vykonanie, ak pouzivatel potvrdi confirm okno - odkaz sa vykona
return true;
}else{
//vykonanie, ak pouzivatel zruzi confirm okno - odkaz sa nevykona
return false;
}
}
</script>

</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

javascriptjava scriptconfirmconfirm dialogvyskakovacie oknookno na strankedialog na strankestranka potvrdzovacie oknopotrvdit oknoonclickon clickevent jsstranka udalost on click

IT ftip

Programátor je u očného. Doktor ho usadí a hovorí: - Čítajte! - T F U K M C L... Pán doktor, máte dobre nastavenú kódovú stránku?