Transformácie a animácie pomocou CSS3

Na tejto prednáške si ukážeme ešte zopár vlastností verzie CSS3, ktoré sa zvyknú v praxi miestami používať a v niektorých prípadoch vedia naozaj pekne obohatiť dizajn stránky. Začneme tým, že pomocou CSS vieme teraz jednotlivé elementy transformovať, podobne ako v grafických programoch pri práci s obrázkami. Slúži na to vlastnosť transform (transformácia), ktorej rôzne hodnoty predstavujú rôzne operácie. Medzi operácie, ktoré sa dajú uskutočniť pomocou CSS patrí napríklad posunutie objektu (vymedzenie v pixeloch z pozície, na ktorej by mal byť), zväčšovanie a zmenšovanie, skryvenie a podobne.

 

Nejdeme si všetky tieto typy preberať, ukážeme si jednu, ktorá sa zvykne používať a to je hodnota na otočenie objektu. Jej názov je rotate (otočiť) a jej hodnota je záporná alebo číselná hodnota vyjadrujúca stupeň uhla. Záporná hodnota v tomto prípade určuje otočenie proti smeru hodinových ručičiek a kladná hodnota pre smer hodinových ručičiek. Hodnota je zadaná v okrúhlych zátvorkách, vyjadrená číselne v stupňoch deg (degree – stupeň). Ako sme povedali, vieme pomocou nej nejaký objekt natočiť. Využíva sa to najmä v prípadoch, kedy napríklad v rohu obrázku chceme zobraziť nejaký nápis šikmo (akcia, zľava, výpredaj) alebo aj vo veľa iných prípadoch, kedy je výhodné mať niečo natočené. Vyzerá to nejako takto:

 


fotogaleria.php:


<h2 style="text-shadow: 4px 4px 5px #5b6b78;">Na tento text sme si aplikovali shadooooooow!</h2>
<div style="width: 50px; height: 50px; background-color: yellow; transform: rotate(-80deg);">Tocim sa...</div>

<div style="width: 80px; height: 20px; background-color: red; color: white; margin-left: 50px; margin-bottom: 50px; transform: rotate(45deg);">AKCIA</div>
...

 


Ako vidíte, prvý div sme otočili proti smeru hodinových ručičiek a druhý v smere o presne polovicu pravého uhla (45 stupňov). Toto bola typická ukážka transformácie v rozmere 2D – v dvoch dimenziách, čiže po osi x (horizontálne) a po osi y (vertikálne). Transformáciu 2D si môžete predstaviť, že je to akokeby práca s objektom, ktorý je plošný, akokeby nakreslený na papieri. Dve dimenzia značia, že s tým môžeme robiť iba to, čo by sme mohli aj s tým papierikom položenom na stole.

 

Niečo navyše sa dá s tým papierikom robiť, ak ho zdvihneme zo stola a držíme ho v rukách. V tom prípade s ním vieme robiť 3D transformácie, čiže navyše tretia dimenzia – po osi z (do priestoru – vpredu dozadu). V tomto prípade vieme objekt otáčať nie len ako keby na stole buď v smere alebo proti smeru hodinových ručičiek, ale aj v priestore. Dosť často sa používa takáto transformácia na to, ak chceme niečo zobraziť zrkadlovo otočené.

 

Podľa osi x, čiže akokeby preklopené zhora na dole vieme otáčať metódou rotateX, kde do zátvorky podobne ako pri 2D metódach zadávame číselne počet stupňov, o koľko chceme objekt otočiť. Analogicky k tomu vieme otočiť aj podľa osi y pomocou metódy rotateY. Vyzerá to asi takto:

 


fotogaleria.php:


<div style="width: 50px; height: 20px; background-color: red; color: white;">Domov</div>

<div style="width: 50px; height: 20px; background-color: red; color: white; margin-top: 5px; transform: rotateX(180deg);">Domov</div>

<br>

<div style="width: 50px; height: 20px; background-color: red; color: white; display:inline-block; transform: rotateY(180deg)">Home</div>

<div style="width: 50px; height: 20px; background-color: red; color: white; display:inline-block;">Home</div>

 


Ako vidíte na výsledku ukážky kódu, vytvorili sme dve dvojice divov s textom, kde prvá dvojica je otočená zrkadlovo podľa osi x (zhora nadol) a druhá podľa osi y (zľava doprava). Skúste sa pohrať s hodnotami vo webových nástrojoch, aby ste videli, ako to funguje...

 

Úplne najkrajšia vec na CSS3 je ale tá, ktorú si vysvetlíme teraz na záver tejto prednášky a o to viac, že sa dá aplikovať na takmer akúkoľvek zmenu elementu. O čo ide? Predstavte si, že s nejakým elementom v istom momente vykonávame grafickú zmenu, napríklad po kliknutí, v stave hover a podobne. Zmenou by mohlo v tomto prípade byť zmena rozmerov (zväčšenie, zmenšenie), zmena farby, transformácia, jednoducho hocičo, čo graficky nejako ten objekt zmení. Určite ste sa stretli s takým niečím, že keď ste sa na nejakej stránke nad niečo zobrazili myšou (hover), tak to zmenilo grafický vzhľad, ale nestalo sa tak hneď v danom okamihu.

 

Na našej stránke pri tabuľke v stave hover meníme farbu riadka. Ak sme myšou mimo riadka, má svoju základnú farbu, ale akonáhle sa myšou zobrazíme ponad riadok, okamžite zmení farbu – farby akokeby preskočili hneď z jednej na druhú. V CSS3 však existuje vlastnosť s názvom transition (prechod, premena), pomocou ktorou vieme túto zmeny oddaliť/spomaliť. Čiže farby by nepreskočili hneď, ale zmena by trvala istý moment okom rozoznateľný, takže farby akokeby sa preliali z jednej do druhej. Tento efekt je pre oko veľmi pekný, dá sa použiť na veľa rôznych grafických zmien objektu.

 

Pri zadávaní tohto efektu musíme špecifikovať dve veci. Prvou je na akú vlastnosť, resp. na zmenu akej vlastnosti má transition byť aplikovaný a následne v sekundách číselne zadať, koľko to má trvať (je možné zadať aj desatinné číslo). Vyzerá to asi nejako takto:

 


fotogaleria.php:


<div class="div_effect"></div>

 


global.css:

/**********TRANSITION***********/
.div_effect{
    width: 100px;
    height: 50px;
    background-color: yellow;
    transition: width 2s, height 2s, background-color 2s;
}

.div_effect:HOVER{
    width: 200px;
    height: 100px;
    background-color: pink;
}

 


Pozrite sa na ukážku a vyskúšajte myšou behať striedavo ponad objekt a mimo neho. Ako vidíte, jeho zmena sa prelína plynulo. Docielili sme to nastavením transition na zmenu naraz troch rôznych vlastností objektu, ktoré sme oddelili čiarkou. Pekné nie? Týmto štýlom viete takéto zmeny spomaliť a spraviť ich plynulejšie na rôzne zmeny, aj napríklad na zadanie marginov, paddingov a podobne (čiže posun objektu – bude sa hýbať plynulo).

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 - controller.php

<?php 
//vnorene subory
include "helper.php";
include "model.php";

$actual_page = "index";
$helper = new Helper();

$user_name = '';
$user_surname = '';
$age = '';
$role = '';
$message = '';

//TRIEDA USERLIST (zoznam pouzivatelov)
class UserList{

public $users = array();
public $search_keyword = '';
public $sort_by = 'id';
public $sort_type = 'ASC';
public $helper = null;

function __construct($helper){
$this->helper = $helper;
}

function loadData(){
$result = toLoadAllUsers($this->search_keyword, $this->sort_by, $this->sort_type);

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

//TRANSFORMACIA DAT NA POLE OBJEKTOV
foreach($data as $key => $value){
if($value['role'] == 'owner'){
$this->users[$key] = new UserOwner($value['id'], $value['user_name'], $value['user_surname'], $value['age'], $value['role'], $value['phone_number'], $value['phone_number_2'], $value['COUNT(*)']);
}else{
$this->users[$key] = new User($value['id'], $value['user_name'], $value['user_surname'], $value['age'], $value['role'], $value['phone_number'], $value['phone_number_2'], $value['COUNT(*)']);
}
}

//$this->helper->printArray($this->users);
}
}

function deleteUserById($id_user){
$actual_user = null;
$actual_user_key = null;

foreach($this->users as $key => $value){
if($value->id == $id_user){
$actual_user = $value;
$actual_user_key = $key;
}
}

if($actual_user && $actual_user->deleteUser()){
array_splice($this->users, $actual_user_key, 1);

return true;
}else{
return false;
}
}
}

//TRIEDA USER (pouzivatel v tabulke users)
class User{

public $id = 0;
public $user_name = '';
public $user_surname = '';
public $age = 0;
public $role = '';
public $main_phone_number = '';
public $all_phone_numbers = array();

function __construct($id, $user_name, $user_surname, $age, $role, $main_phone_number, $phone_number, $count_phone_number){
$this->id = $id;
$this->user_name = $user_name;
$this->user_surname = $user_surname;
$this->age = $age;
$this->role = $role;
$this->main_phone_number = $main_phone_number;

//test ci treba nacitat viac cisiel
if($phone_number && $count_phone_number > 1){
//musime nacitat cisla
$this->loadPhoneNumbers();
}else{
//ma iba ajedno alebo ziadne cislo
if($phone_number){
$this->all_phone_numbers[] = $phone_number;
}
}
}

function loadPhoneNumbers(){

$result = toLoadAllNumbersByIdUser($this->id);

$data = mysqli_fetch_all($result, MYSQLI_ASSOC);

foreach($data as $key => $value){
$this->all_phone_numbers[] = $value['phone_number'];
}
}

function deleteUser(){
return toDeleteUserByIdUser($this->id);
}

function insertToDb(){
return toInsertNewUser($this->user_name, $this->user_surname, $this->age, $this->role);
}
}

class UserOwner extends User{

function remindOwnerByMail(){
//kod pre vykonanie funkcie
print_r('Zavolala sa metoda remindOwnerByMail()');
}
}

//ZACHYTENIE PARAMETROV PRE VLOZENIE NOVEHO USERA
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
$new_user = new User(null, $user_name, $user_surname, $age, $role);

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

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

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

}

$user_list = new UserList($helper);

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

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

$user_list->loadData();

//MAZANIE POLOZKY
$id_user = $_GET['id_user'];
if($id_user){

$result = $user_list->deleteUserById($id_user);

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

?>

2 - footer.php

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

3 - 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>';

?>

<h2 style="text-shadow: 4px 4px 5px #5b6b78;">Na tento text sme si aplikovali shadooooooow!</h2>
<div style="width: 50px; height: 50px; background-color: yellow; transform: rotate(-80deg);">Tocim sa...</div>

<div style="width: 80px; height: 20px; background-color: red; color: white; margin-left: 50px; margin-bottom: 50px; transform: rotate(45deg);">AKCIA</div>

<div style="width: 50px; height: 20px; background-color: red; color: white;">Domov</div>

<div style="width: 50px; height: 20px; background-color: red; color: white; margin-top: 5px; transform: rotateX(180deg);">Domov</div>

<br>

<div style="width: 50px; height: 20px; background-color: red; color: white; display:inline-block; transform: rotateY(180deg)">Home</div>

<div style="width: 50px; height: 20px; background-color: red; color: white; display:inline-block;">Home</div>

<div class="div_effect"></div>

<br><br>
</div>

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

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

4 - 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;
border-radius: 10px;
box-shadow: 5px 5px 5px #CCCCCC, -5px -5px 5px #CCCCCC;
}

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

.filter_box{
border-radius: 40px 10px;
}

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

/**********TRANSITION***********/
.div_effect{
width: 100px;
height: 50px;
background-color: yellow;
transition: width 2s, height 2s, background-color 2s;
}

.div_effect:HOVER{
width: 200px;
height: 100px;
background-color: pink;
}

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

6 - helper.php

<?php

class Helper{

function printArray($array){
echo '<br><br>Obsah pola vypisany metodou PrintArray :<br><pre>';
print_r($array);
echo '</pre><br><br>';
}
}

?>

7 - index.php

<?php

include "controller.php";
include "view.php";

?>

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

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

10 - model.php

<?php
//TRIEDA DATABAZA (pripojenie)
class Database{

public $server_name = '';
public $login_name = '';
public $login_password = '';
public $db_name = '';
public $connection = null;

function __construct($server_name, $login_name, $login_password, $db_name){
$this->server_name = $server_name;
$this->login_name = $login_name;
$this->login_password = $login_password;
$this->db_name = $db_name;
}

function connectToDb(){
$this->connection = mysqli_connect($this->server_name, $this->login_name, $this->login_password, $this->db_name);

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

//PRIPOJENIE DO DB
$db = new Database('localhost', 'root', 'root', 'zapr_db_1');
$db->connectToDb();





//------FUNKCIE PRE TABULKU users

//vytiahnutie vsetkych dat z tabulky spolu s primarnym cislom pre tabulkovy zoznam na domovskej stranke
function toLoadAllUsers($search_keyword, $sort_by, $sort_type){
$sql_query = "SELECT users.id,users.user_name,users.user_surname,users.age,users.role,user_phone_numbers.phone_number,upn.phone_number AS phone_number_2,COUNT(*) FROM users LEFT JOIN user_phone_numbers ON users.main_phone_number_id=user_phone_numbers.id LEFT JOIN user_phone_numbers AS upn ON users.id=upn.id_user";

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

$sql_query .= " GROUP BY users.id";

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

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

return mysqli_query($GLOBALS['db']->connection, $sql_query);
}

//zmazanie pouzivatela podla jeho id
function toDeleteUserByIdUser($id_user){
$sql_query = "DELETE FROM users WHERE id=".$id_user;
return mysqli_query($GLOBALS['db']->connection, $sql_query);
}

//pridanie noveho pouzivatela z formulara na domovskej stranke
function toInsertNewUser($user_name, $user_surname, $age, $role){
$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)";
}

return mysqli_query($GLOBALS['db']->connection, $sql_query);
}



//------FUNKCIE PRE TABULKU user_phone_numbers

//nacitanie vsetkych telefonnych cisiel jedneho usera podla jeho id z tabulky user
function toLoadAllNumbersByIdUser($id_user){
$sql_query = "SELECT * from user_phone_numbers WHERE id_user=".$id_user;
return mysqli_query($GLOBALS['db']->connection, $sql_query);
}

?>

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

12 - 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>';
?>

<script>
window.location.href = "/MyProject Coding/5-Projekt2/index.php";
</script>

<?php
}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>

13 - view.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>
<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>

<?php
if($message){
echo $message;
}
?>

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

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

<h2>Zoznam používateľov</h2>

<!-- Formular na filtrovanie usera -->
<form class="contact_form filter_box" 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 $user_list->search_keyword;?>">

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

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

<br>

<?php
//VYPIS POUZIVATELOV DO TABULKY
if($user_list->users){

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

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

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

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

if($user_list->sort_by == 'user_name'){
if($user_list->sort_type == 'ASC'){
echo '&sort_type=DESC';
}else{
echo '&sort_type=ASC';
}
}else{
echo '&sort_type=ASC';
}

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

echo '">Meno</a></th>';

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

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

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

if($user_list->sort_by == 'user_surname'){
if($user_list->sort_type == 'ASC'){
echo '&sort_type=DESC';
}else{
echo '&sort_type=ASC';
}
}else{
echo '&sort_type=ASC';
}

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

echo '">Priezvisko</a></th>';

echo '<th>Vek</th>';
echo '<th>Rola</th>';
echo '<th>Telefón</th>';
echo '<th>Akcie</th>';
echo '</tr>';

for($i=0; $i<count($user_list->users); $i++){
echo '<tr>';
echo '<td>'.$user_list->users[$i]->id.'</td>';
echo '<td>'.$user_list->users[$i]->user_name.'</td>';
echo '<td>'.$user_list->users[$i]->user_surname.'</td>';
echo '<td>'.$user_list->users[$i]->age.'</td>';
echo '<td>'.$user_list->users[$i]->role.'</td>';

echo '<td style="white-space: nowrap;">';
echo '<span><b>'.$user_list->users[$i]->main_phone_number.'</b></span><br><br>';

if(count($user_list->users[$i]->all_phone_numbers)){
echo '<div id="numbers_'.$user_list->users[$i]->id.'" style="display:none;">';
foreach($user_list->users[$i]->all_phone_numbers as $index => $value){
echo '<span>'.$value.'</span><br>';
}
echo '</div>';

echo '<a href="javascript:void(0)" onClick="showNumbers('.$user_list->users[$i]->id.')">Zobraziť čísla</a>';
}

echo '</td>';

echo '<td>';
echo '<a href="uprava-zaznamu.php?id_user='.$user_list->users[$i]->id.'">Upraviť záznam</a><br><br>';
echo '<a href="index.php?id_user='.$user_list->users[$i]->id.'" onclick="return showConfirm()">Vymazať záznam</a>';
echo '</td>';

echo '</tr>';
}

echo '</table>';

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

echo '<br><br>';
?>
</div>

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

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

</div>

<script>
function showNumbers(id){
// alert(id);
document.getElementById('numbers_'+id).style.display ='block';
}

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>

Ť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

css3css 3transformrotaterotatexrotateycss transformtransitioncss transitiontransformaciaotocenie elementu

IT ftip

Ako volá programátor o pomoc keď sa topí? F1, F1, F1!!!