PHP a MySQL databáza

V minulom semestri sme si prebrali základy jazyka SQL a jeho použitie v systéme databázy MySQL. Takisto sme si troška priblížili prácu so systémom phpMyAdmin, pomocou ktorého vieme databázy v tomto systéme spravovať. Ako sme si povedali, databázový systém je v podstate server, ktorý beží na nejakej IP adrese, na porte a pre prístup k nemu potrebujeme vstupné meno a heslo. Prístupom v tomto zmysle myslíme možnosť nadviazania komunikácie, čiže zavolať nejaké query a následne aj dostať od servera odpoveď cez sieť.

 

Mať prístup zvonka do databázy je štandard, pretože s databázou sa nepracuje ručne a priamo cez jej systém (priamo na jej serveri), ako sme si to skúšali v minulom semestri. Databáza slúži predovšetkým ako vonkajšie a oddelené miesto, resp. úložisko dát. Ako sme už dávnejšie spomenuli, databázový model, čiže celkovo zoznam tabuliek a ich štruktúra, by mala byť navrhnutá predtým, ako sa začne na vývoji informačného systému pracovať. Samozrejme, nie je to nutnosť, v praxi sa aj tak následne počas vývoji na systéme dodatočne niečo v databáze mení.

 

Tieto operácie, čo sa týka databázového modelu, čiže vytvorenie databázy, tabuliek, stĺpcov a podobne, sa zvyknú vykonávať správcom databázy, priamo na nej, vo väčšine cez systém na správu, napr. ako phpMyAdmin. Nie je zvykom, že na tieto operácie existuje časť systému (webstránky), pomocou ktorého sa to vykonáva automaticky. Informačné systémy komunikujú s databázami vo väčšine len pomocou príkazou na načítanie, vloženie a úpravu dát. Ako sme už viackrát spomenuli, systémy zobrazujú, získavajú a editujú dáta od používateľa, takže k tomu slúžia aj adekvátne príkazy jazyka SQL.

 

Princíp je jednoduchý, predstavme si spravodajský portál, na ktorý sme sa dostali cez nejaký odkaz na konkrétny článok. Po načítaní stránky sa v systéme na základe toho, aký článok chceme zobraziť (unikátny názov článku alebo nejaké číslo ID), zavolá query na databázu, ktorý vytiahne (SELECT) dáta o danom článku (záznamu v tabuľke článkov). Táto query sa však zavolá priamo v kóde systému, v našom prípade webstránky a takisto dáta z query sa v procese načítavania stránky dostanú (budú vrátené funkciou na vykonanie query v DB) priamo do kódu. Tam sa príslušne spracujú a v správnej forme zobrazia používateľovi. Presne toto je typická ukážka práce s databázou.

 

Dosť ale bolo rečí, toto všetko si ideme v nasledujúcich prednáškach vyskúšať na našom systéme a na našej databáze. Predtým, ako začneme tvoriť na našej webstránke prvky, ktoré by mali následne vykonávať nejaké operácie nad databázou, potrebujeme s databázou nadviazať spojenie. V kóde jazyka PHP existuje viac spôsobov, ako komunikovať s databázou. My sa nimi ale nejdeme nateraz zbytočne zaťažovať...len aby sme vedeli, budeme používať systém MySQLi (písmenko i značí improved – vylepšený) procedurálnym spôsobom (existuje ešte MySQLi objektovo orientované, ale objektovo orientované programovanie si preberieme neskôr...).

 

Takže v podstate všetko, čo budeme potrebovať na komunikáciu s databázou, budeme vykonávať cez funkcie, ktoré obsahujú slovo mysqli a pomocou jej parametrov budeme nastavovať rôzne vlasnosti daného príkazu. Predtým, než budeme vykonávať akúkoľvek operáciu s DB (delete, update, select...), musíme s ňou mať nadviazané spojenie. Spojenie s databázou sa vytvára pomocou funkcie mysqli_connect (connect – pripojenie), ktorá si vyžaduje tri parametre. Prvý parameter je názov servera (url/ip adresa), druhým parametrom je prihlasovacie meno a tretím heslo. Pri našej databáze sme meno a heslo nemenili, defaultne po inštalácii programu MAMP by mali byť obidve hodnoty nastavené na ''root'' (root – akokeby všeobecné označenie pre admina – správcu – vlastníka).

 

Zavolanie tejto funkcie nám vráti odpoveď, či spojenie bolo alebo nebolo nadviazané, tým pádom si to vieme aj rovno otestovať, či bolo nadviazanie komunikácie úspešné. Otvorte si program Sublime, v ktorom sme písali kód projektu v minulom stupni štúdia a otvorte si súbor index.php nášho projektu 5-Projekt2. Táto podstránka našej webstránky je prázdna, tak to využijeme a do jej tela si skúsime napísať kód pre nadviazanie spojenia s databázou aj s výpisom výsledku. Kód by mohol vyzeraťa takto:

 


index.php (kód za nadpisom Domov):

<?php

    $server_name = "localhost";
    $user_name = "root";
    $password = "root";

    $connection = mysqli_connect($server_name, $user_name, $password);

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

?>

 


Po načítaní stránky …/5-Projekt2/index.php by ste mali dostať správu o úspešnom nadviazaní. Skúste teraz naschvál zmeniť napríklad prihlasovacie heslo (hodnotu premennej password) na zlú, aby ste videli, že sa vypíše hláška o nedviazaní. Pri úspešnom spojení totižto funkcia mysqli_connect vracia nejaké dáta, to znamená, že nie je prázdna. Ak sa spojenie nenadviaže, nevráti nič, tým pádom podmienka !connection (negácia premennej connection) je splnená, pretože connection je prázdna (je akokeby FALSE a negácie z nej spraví TRUE, takže je splnená).

 

Ako vidíte, hodnoty pre pripojenie do databázy sme nezadali rovno ako parametre funkcie, ale najprv sme si ich vložili do premenných a tie použili ako parametre. Toto je dobrá praktika,pretože tieto premenné, resp. prihlasovacie údaje budeme potrebovať niekedy na viacerých miestach v kóde. Tieto údaje sa však môžu kedykoľvek zmeniť, napríklad sa presunie databázový server na inú IP adresu alebo sa zmení meno a heslo pre bezpečnosť a podobne. Tým pádom stačí tieto údaje zmeniť iba pri priradení do týchto premenných a problém vyriešený, nebude nutné hľadať v kóde, kde všade sme to zadali a meniť to.

 

Keď už sa nám podarilo úspešne nadviazať spojenie s databázou, nič nám nebráni v tom, aby sme vykonávali dotazy na ňu priamo z kódu našej webstránky. Ešte predtým si ale musíme prebrať jeden druh dát, konkrétne jeden typ dátového typu array.

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>

<?php

$server_name = "localhost";
$user_name = "root";
$password = "root";

$connection = mysqli_connect($server_name, $user_name, $password);

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

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

php mysqlmysql v phpspojenie s databazouphp databaza spojenieconnection dbphp connection mysqli_connectsql a php

IT ftip

- Viete, aký je rozdiel medzi mužom a počítačom? - Počítaču stačí všetko povedať iba raz.