Debugovanie a praktiky programovania

V tomto poslednom semestri bakalárskeho stupňa si dokončíme našu webstránku, aby mala všetko čo má mať a aby vyzerala ako bežná jednoduchá webstránka. Okrem toho si vysvetlíme ešte niekoľko základných vecí ohľadom programovania a webstránok, ktoré by mal každý z vás vedieť. Po absolvovaní týchto šiestich semestrov by mal byť každý z vás schopný naprogramovať jednoduchú prezentačnú stránku aj s nejakou tou funkcionalitou navyše. Mali by ste rozumieť základným princípom a pravidlám vo svete webstránok, takisto budete schopný takúto stránku nielen naprogramovať, ale aj rozbehať a uviesť do sveta internetu. Takže úlohu sprav mi prosím ťa jednoduchú webstránku, chcem tam mať toto a toto a nech to je na adrese www.fero.sk, by ste už mali zvládnuť:)

 

Počas programovania tvoríme vždy nejaký výsledný produkt. V našom prípade to je kompletná webstránka, ktorý má niekoľko podstránok. Každá z týchto podstránok zobrazuje niečo iné a spĺňa svoju funkciu. Na každej z nej sa deje v kóde niečo iné a celým kódom vedieme k nejakému konkrétnemu výsledku – máme jasne zadané požiadavky, čo od nás ako programátorov chcú a my to musíme naprogramovať. Niekedy má kód tohto problému 20 riadkov a niekedy povedzme 700. Používateľ, ktorý vidí výsledok – webstránku, nemá páru o tom, aký je vnútorný proces (kód) náročný a dlhý. V podstate ho to ani nemusí zaujímať, on vidí iba výsledok. Preto je v programovaní dôležité najmä to, aby kód fungoval správne, aby priniesil žiadaný výsledok a najmä aby fungoval za každých okolností. Aby boli všetky prípady, ktoré môžu nastať, ošetrené (if – čo keď...) a aby bol chod programu zabezpečený, aby nenastal jeho pád – jeho zastavenie.

 

Nikto nie je dokonalý a bezchybný a je takmer nemožné aj pre programátora, ktorý má 20 ročné skúsenosti, sadnúť za počítač, porozumieť problému (zadaniu) a za jeden deň napísať naraz celý kód bez nejakej chyby, bez prepisovania a menenia kódu. Problém (zadanie) si programátor vždy nejako v hlave rozdelí na menšie časti a postupne sa dopracuje k žiadanému výsledku. Už samotná jednoduchá definícia algoritmu hovorí, že je to postup postupov (menších), ktorý vedie ku konečnému výsledku. Každá takáto menšia časť však musí rovnako pracovať bezchybne, takže programátor musí priebežne kontrolovať (testovať), či to robí to, čo má. Ak sa počas práce vyskytne chyba, resp. menšia časť alebo samotný celý program nerobí to čo má, je nutné nájsť chybu.

 

Samozrejme, čím je kód dlhší a zložitejší, tým sa horšie hľadá chyba. Pri hľadaní chyby musí programátor v podstate prejsť celý kód riadok po riadku, pretože každý riadok má v kóde nejaký význam a hľadať chybu. Nie vždy je chybu ľahké nájsť len čítaním kódu, ale počas prechádzania kódu krok za krokom (debugovanie – krokovanie), je nutné si priebežný výsledok kontrolne vypisovať. Aby sme sa rozumeli o čom je reč. Predstavme si napríklad takýto problém. Na našej stránke máme načítať zoznam žiakov z databázy (dáta – pole), následne toto pole troška pomeniť (poprehadzovať nejaké prvky). Potom máme načítať z databázy telefónne čísla každého žiaka a pripojiť dáta do poľa, kde máme všetky dáta o žiakoch. Následne to zobraziť do tabuľky, kde každý riadok bude jeden žiadok v poslednom stĺpci budú všetky jeho telefónne čísla.

 

Tento príklad si teraz nejdeme robiť, ideme sa ale naňho pozrieť, ako by sme ho krokovali. Tak, ako bol problém popísaný, by sa dal rozdeliť na jednotlivé kroky. Spôsob overovania programátora, či je všetko v poriadku, by nemal byť vizuálny. To znamená, že by nemal na programe pracovať a až na konci, či by sa dáta vypísali do tabuľky ako majú alebo nie usúdil, že buď je všetko v poriadku alebo niečo nefunguje ako má. Zvykom je priebežne nielen po každom kroku overiť kontrolnými výpismi, či sú dáta v takom tvare ako majú byť alebo či naše premenné vyzerajú, ako majú, ale aj počas práce na jednotlivých menších častiach.

 

Výpis obsahu premennej sa zvykne robiť pomocou funkcie print_r, ako sme to už urobili v časti O nás. V prípade poľa je ešte lepšie tento výpis obaliť do elementu pre, aby sme videli pekne jednotlivé prvky. Druhá veľmi často používaná funkcia pre kontrolné výpisy má názov var_dump. Hlavný rozdiel oproti print_r je ten, že predtým, ako vypíše obsah premennej, vypíše aj jej typ a veľkosť. Napríklad array(6) – pole so šiestimi prvkami a podobne, tento výpis dodržiava aj pri výpise jednotlivých prvkov poľa – aj pri nich vypisuje typ a veľkosť. Toto sa hodí, pretože v budúcnosti sa budeme častejšie zamýšľať na type premennej, najmä či to je string alebo integer.

 

Pri krokovaní je okrem vypisovania ešte vemi dobrá praktika vyhnúť sa zvyšku kódu. Čo to znamená? Ide o to, že napríklad ak krokujeme HTML/CSS, či vyzerá každá časť tak ako má, je nám lepšie zvyšné časti nezobrazovať, aby nám zbytočne nezavadzali, aby nám nevytvárali taký mini stres v tom, že táto časť, ktorú práve overujeme, vyzerá zle a v spojení s celým zvyškom to vyzerá ešte horšie. Preto sa hodí v prípade hľadania chyby alebo overovania zobrazovať iba tú danú časť a zvyšné zakomentovať. Samozrejme nie je to podmienka, je to na vás, ale niekedy to naozaj pomáha. Často sa stáva, že v prípade zle zadané dizajnu sa naša časť alebo prvok zobrazuje úplne niekde inde a ani to nevidno a podobne, vtedy je nutné zvyšné časti vynechat.

 

V prípade jazyka PHP to znamená, že nechceme, aby sa zvyšný kód (kód, ktorý nasleduje za našim testovaným) spúšťal, pretože je to zbytočné. Ak nám niečo nefunguje už na začiatku – ak sme napríklad zle načítali dáta z databázy alebo hneď v druhom kroku sme ich zle upravili, ako bolo nutné, je zbytočné ďalej s nimi vykonávať ostatné činnosti. Aby sa nespúšťal kód v jazyku PHP, môžeme ho takisto zakomentovať alebo ešte lepšie, môžeme kód na danom mieste úplne zastaviť. Slúži na to príkaz s názvom exit (koniec), následne po ktorom sa zvyšný kód nevykoná. Toto je veľmi praktické, v praxi také krokovanie vyzerá asi nasledovne. Pozrieme si prvé riadky, kedy sa niečo s premennou deje, napríklad načítanie dát z databázy. Za riadok, na ktorom sa načítajú a priradia do premennej, dáme prin_r a exit a pozrieme sa, či prišlo to, čo sme chceli. Všetko prišlo v poriadku. Následne s dátami niečo vykonávame na viacerých riadkoch. Za koniec tejto časti dáme opäť výpis a exit a zistíme, že dáta sú už v zlom tvare alebo niečo nie je tak, ako sme chceli. Tu teda nastáva ten prípad, kedy kobináciu print_r a exit zobereme a dávame ju postupne za každým riadkom tej časti, ktorý nefunguje správne, následne si refreshneme výsledok (F5), pozrieme sa čo nám zobrazilo a takto dookola. Takto zistíme krok za krokom, na ktorom konkrétne riadku je chyba a následne môžeme tento problém vyskúmať a opraviť. Kód v časti O nás pred formulárom by pri krokovaní mohol vyzerať napríklad takto:

 

echo '<pre>';
    // print_r($pole);
    var_dump($pole);
echo '</pre>';
exit;


Stručne...takto by mala vyzerať práca na probléme, rozdeliť si prácu na menšie dieliky a postupne pracovať na menších častiach a priebežne si kontrolovať a overovať kód. Písať kód a stále refreshovať výsledok, či je to pri HTML, CSS alebo PHP. Ak niečo nie je v poriadku, odkrokujeme si to, nájdeme chybu, opravíme a ideme ďalej. Programovať bez chýb sa nedá, stále sa niečo vyskytne, človek na niečo zabudne. Všimli ste si, že v programovaní je každá vynechaná bodkočiarka, úvodzovka, bodka, zátvorka chybou a kód na danom riadku skončí a nezobrazí sa nič. Takže je to bežná vec. Moja teória je, že čím viac chýb človek spraví, tým sa viac naučí.

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 class="main-content right">
<h1>Fotogaléria</h1>
<div class="line"></div>

<?php

$pictures = array();

for($i = 0; $i < 7; $i++){
$pictures[] = 'images/placeholder.jpg';
}

echo '<ul id="gallery">';
for($i = 0; $i < 7; $i++){
echo '<li>';

echo '<a class="left';
if(($i+1)%3){
echo ' photo-margin';
}
echo '" target="_blank" href="'.$pictures[$i].'">';

echo '<img src="'.$pictures[$i].'">';
echo '</a>';
echo '</li>';
}
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{
}

.sidebar UL LI A{
display: block;
padding: 15px 0px 15px 35px;
border-bottom: 1px solid #7d8079;
color: #7d8079;
font-family: Arial;
text-decoration: none;
text-transform: uppercase;
}

.sidebar UL LI A.active{
color: #f5f7f4;
background-color: #f96b81;
}

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

/**********GALERIA***********/
#gallery{
list-style-type: none;
margin: 0;
padding: 0;
}

#gallery A{
display: block;
height: 133px;
margin-bottom: 10px;
}

#gallery IMG, #gallery A{
width: 213px;
}

.photo-margin{
margin-right: 10px;
}

/**********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;
}

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

<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></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 '<pre>';
// print_r($pole);
var_dump($pole);
echo '</pre>';
exit;

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 exitphp print_rdebugovaniekrokovaniedebugkontrola kodu

IT ftip

Stretnú sa dvaja povaľači. Prvý sa tak zamyslí a vraví: - Človeče, keby nebol ten INTERNET, sedel by som celý deň pri telke!