View a Controller (MVC)
Na poslednej prednáške sme si ukázali, ako logicky oddeliť kód na prácu s databázou do samostatného súboru zvaného model. Ešte stále nám ostáva v jednom súbore v kope fukcionalita a deklarácia tried (jazyk PHP) a webová štruktúra stránky (prevažne kód HTML). Poďme si teraz oddeliť kód, ktorý sa týka webstránky v zmysle jazyka HTML, čiže osobitne si dáme do súboru všetko z jazyka HTML. Všetok kód, ktorý tvorí obsah webovej stránky si umiestnime do nového súboru a nazveme ho view.php (view – pohľad). Obsah súboru by mohol vyzerať takto:
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>
<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" 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>
Ako vidíte, nenachádza sa tam iba kód HTML ale aj PHP. Tento kód jazyka PHP však súvisí s tvorbou elementov jazyka HTML a nie priamo funkcionalitou stránky (ako zachytávanie parametrov, práca s objektami a s DB a pod.), takže je to v pohode. V tomto súbore sa nám nachádza naozaj kód, ktorý tvorí obsah našej webovej stránky.
Zvyšok kódu, ktorý nám ostal, si umiestnime do súboru s názvom controller.php (riadiaca jednotka, operátor...). Následne si oba súbory iba includneme do nášho súboru index.php, mohlo by to vyzerať takto:
index.php:
<?php
include "controller.php";
include "view.php";
?>
controller.php:
<?php
//vnorene subory
include "helper.php";
include "model.php";
$actual_page = "index";
$helper = new Helper();
$user_name = '';
$user_surname = '';
$age = '';
$role = '';
//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()){
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>';
}
}
$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){
echo '<p class="success">Položka bola úspešne zmazaná.</p>';
}else{
echo '<p class="error">Pri mazaní položky sa vyskytla chyba.</p>';
}
}
?>
Ako vidíte, v súbore index.php sa teraz nenachádza nič, iba zadefinovanie, že si postupne načítavame (includujeme) súbor s funkcionalitou stránky (controller) a pohľad (view). V controlleri je hneď na začiatku includnutý zase súbor model.php na prácu s databázou. Ak by sa vám stránka nezobrazovala, je to preto, pretože pri tomto rozdelení vám to možno hlási chybu v controlleri vo funkcii deleteUserById, kde na začiatku máme v premennej $actual_user null, takže volanie metódy z NULL objektu hlási chybu. Treba tam mať upravenú podmienku ako v ukážke na if($actual_user && $actual_user->deleteUser()){, kde sa najprv pýtame, či existuje objekt a až potom sa pýtame, či sa správne vykonala funkcia. Ak hneď prvé padne (že neexistuje objekt), tak k druhému sa podmienka ani nedostane a nebude to vyhadzovať chybu.
V súbore controller.php vidíte teraz pekne, čo tvorí funkcionalitu celej našej stránky – na začiatku vnorené súbory a globálne premenné, následne deklarácie tried a potom funkcionalita. Systém stránky riadi len zachytenie parametrov ak sa vkladá nový používateľ, spracovanie filtrovania, triedenia a mazanie položky. Okrem tohto si iba vytvoríme dáta – načítame dáta z DB a vytvoríme si objektovú štruktúru (user_list) a to je celé. Teraz je jasné, čo naša stránka presne robí a čo ktorý kód znamená.
Táto štuktúra sa podľa názvu troch hlavných častí nazýva MVC – Model View Controller. Stručne by sa to dalo povedať, že model je na prácu s dátami, controller riadi celý program a view je to, čo vidíme. Ešte by sa to samozrejme dalo vylepšiť, napríklad deklarácie tried je dobré tiež mať osobitne v súbore, zvyknú sa ešte tvoriť súbory s názvami services alebo factories, kde sa tiež nejaká logika s dátami alebo s chodom programu umiestňuje, nám je to ale nateraz zbytočné.
V našom prípade by sa dali spraviť ešte dve veci, jedna je ako sme už spomenuli, dať deklarácie tried osobitne. Tento súbor by mohol byť osobitne a mohli by ho využívať aj ostatné stránky, pretože ako sme povedali, čo keď dáta o používateľoch by sme zobrazovali aj na inej stránke. V takom prípade by si vytvárali triedy už zadefinované v tomto súbore. Druhá maličkosť je, že by sme si kód JavaScript mohli dať osobitne do súboru napírklad s názvom script.js (js ako JavaScript) a následne ho v hlavičke stránky (head) includli ako tag script (podobne ako CSS).
Ak by sme mali takto prerozdelený kód každej podstránky nášho systému, pre každá podstránku by sme mali osobitný folder (adresár), ktorý by sa napríklad volal index a v ňom by boli tieto tri súbory (MVC) umiestnené. Potom by sme mohli mať nejaký spoločný folder (shared – zdieľaný), v ktorom by sme mali napríkald súbor s deklaráciou tried. Ďalej adresár pre obrázky ako ho už máme a osobitné adresáre pre CSS súbory a pre JS súbory. Takto by v našom projekte – v jeho adresárovej štruktúre bol absolútny poriadok a nebolo by všetko v kope.
Pri tomto modeli, resp. pri rozdeľovaniu kódu do adresárov a súborov sa možno v praxi stretnete s podobnou situáciou ako pri názoroch na OOP. Nie je to predpísané, ako to má byť rozdelené a ako čo kde má byť. Dôvod je jasný, stránka alebo výsledný produkt bude totižto vyzerať rovnako, ide len o to, ako to vyzerá na disku, resp. aby to pre programátorov – tvorcov, bolo čo najlogickejšie rozdelené a usporiadané. Stretnete sa s rôznymi rozdeleniami a každý bude asi prezentovať ten svoj spôsob ako ten správny. Je to v podstate jedno, kto má pravdu. Ide o to, že teraz budete rozumieť, prečo to tak je a že sa to tak zvykne v praxi robiť.
Možno ste si všimli vo výsledku, že hlášky po akciách na stránke sa nám teraz zobrazujú pred celou stránkou, pretože echo máme v súbore controller.php. Toto samozrejme nie je optimálne. Na vyriešenie tohto problému si zadefinujeme nejakú globálnu premennú pre správu, ktorú si na správnom mieste v stránke (view) zobrazíme. Malo by to teda vyzerať takto:
controller.php:
…
$role = '';
$message = '';
…
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>';
}
…
}else{
//CHYBNE DATA
$message = '<p class="error">Nová položka nebola uložená - nesprávne vyplnené dáta vo formulári. </p>';
}
…
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>';
}
…
view.php:
<h1>Domov</h1>
<div class="line"></div>
<?php
if($message){
echo $message;
}
?>
<h2>Pridanie nového používateľa</h2>
Teraz sa nám hláška bude zobrazovať tak ako by sa mala, hneď za hlavným nadpisom domovskej stránky a bude obsahovať vždy aktuálnu hlášku – ak existuje. Ak nie, tak tým, že na začiatku si túto premennú vytvárame s prázdnou hodnotou, nezobrazí sa nič. Ako vidíte, stránka vyzerá a funguje rovnako, ale kód sme si rozdelili do troch nových súborov:)