Aktívna položka v menu

V poslednej kapitole sme kompletne naštýlovali navigačné menu na našej stránke. Na záver sme si zadefinovali triedu active, ktorú by mal niesť odkaz, ktorý je práve aktívny. Aktívnym odkazom – položkou v menu je práve navštívený odkaz, čiže práve aktuálne zobrazená stránka. V praxi je vo zvyku práve aktuálne zobrazenú položku zvýrazniť v menu, aby používateľ videl, kde sa práve nachádza. V poslednej ukážke sme si túto triedu zatiaľ natvrdo priradili do prvej položky v menu. Spravili sme to však iba dočasne, teraz by sme mali na našej stránke zabezpečiť, aby túto triedu mal skutočne práve navštívený odkaz.

 

Skúste sa nad tým zamyslieť - už ako programátor - dostali sme úlohu a musíme ju vyriešiť. Máme 4 súbory pre 4 stránky. V každej z nich je vnorený súbor menu.php, ktorý obsahuje zoznam s odkazmi – položkami v menu. Ako by ste vyriešili to, aby keď sme mali otvorenú stránku page2.php, aby práve ten odkaz mal túto triedu priradenú?

 

Možno na to neprídete, pretože tým, že to máme v osobitnom súbore, sme vám to práve kus sťažili. Pretože ak by sme menu nemali v osobitnom súbore a bol by jeho kód v každom zo štyroch súborov, mali by sme to jednoduché. V súbore index.php by sme mu natvrdo dali triedu active na prvý odkaz (na súbor index.php), v súbore page1.php by sme tú triedu priradili pri odkaze na page1.php atď. Ako to ale rozlíšiť v súbore menu.php, ktorý je spoločný pre všetky stránky? Ak sa na ten problém pozrieme ľudskou rečou, pri každom odkaze sa chceme spýtať, máme akurát otvorenú túto stránku? Alebo nachádzaš sa práve v tomto súbore, na ktorý sa odkazuje tento odkaz?

 

Pýtať sa niečo v kóde už vieme - používame na to podmienku if (ak sa niečo deje tak...). Ako sa ale spýtame v súbore menu.php napr. pri prvom odkaze (na stránku index.php), či sa nachádzame v tomto súbore, resp. či si práve includnutý do tohto súboru a nie do nejakého iného? Napovieme vám...dávnejšie sme vám spomenuli, že kód jazyka PHP je spoločný pre celú stránku a metóda include funguje, ako keby sa len kód skopíroval a prilepil na dané miesto. A presne toto využijeme. Riešenie nášho problému je jednoduché, v každom súbore si zadefinujeme jednu premennú s tým istým názvom, ktorá bude obsahovať hodnotu, ktorá nám bude vravieť, na ktorej stránke sa nachádzame. Na základe jej hodnoty si potom v súbore menu.php spravíme pri odkazoch podmienku pre uplatnenie/neuplatnenie triedy active.

 

Keď sme vám už napovedali, skúste si to spraviť, či by ste to zvládli. Ak nie nevadí...máte zatiaľ minimálne skúsenosti s riešením programátorských problémov, takže čím viac takýchto problémov spolu vyriešime, tým sa vám programátorské myslenie bude zlepšovať a budete naberať viac a viac skúseností. Treba ešte povedať, že to, aké hodnotu budú v danej premennej, je ľubovoľné. Môžu tam byť čísla reprezentujúce poradové číslo stránky, môžu obsahovať názvy stránok, to je už nie je tak podstatné, je to na nás. Dôležité je, aby sme vedeli následne zariadiť splnenie podmienky. Kód riešenia nášho problému by mal teda vyzerať asi takto:

 

index.php (a ostatné tri súbory len so zmeneným názvom):

<body>
    <?php $actual_page = "index";?>
    <div class="main">

 

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 == "page1"){echo 'active';}?>" href="page1.php">page1</a></li>
        <li><a class="<?php if($actual_page == "page2"){echo 'active';}?>" href="page2.php">page2</a></li>
        <li><a class="<?php if($actual_page == "page3"){echo 'active';}?>" href="page3.php">page3</a></li>
    </ul>
</div>

 

Kód, ktorý sme pridali do súboru index.php, sme pridali do každého súboru s tým, že hodnota sa líšila (page1, page2, page3). Týmto sme pre celý dokument (súbor) nastavili hodnotu tejto premennej a môžeme sa na akomkoľvek mieste na túto premennú odkazovať. Preto sa v súbore menu.php pri každom odkaze pýtame, či sa táto premenná rovná príslušnému odkazu. Ak áno, vypíše nám medzi úvodzovky atribútu class hodnotu active, pre ktorú už máme nadefinovaný dizajn.

 

Pri tomto riešení sme nepoužili nič nové, čo ste doteraz nevedeli. Len sme aplikovali to, čo vieme, do praxe. Programovanie je presne o tomto. Nie je to o tom, koľko príkazov, vlastností, hodnôt a kadejakej inej teórie viete. Nie je to o tom, koľko kníh ste prečítali atď. Samotné jazyky nemajú až tak veľa svojich princípov a príkazov a funkcií. Ide ale o to, či to vieme správne použiť a či viete všetky problémy/úlohy vyriešiť. A toto sa dá nadobudnúť iba praxou, skúšaním – jednoducho programovaním. Možno sa vám to teraz zdá ťažké a vravíte si, ako ma malo toto napadnúť. Áno, na to odpoveď nie je, ako vás to mohlo napadnúť. Ale čím ďalej pôjdeme v našom projekte, tým sa budeme viac stretávať s podobnými úlohami a postupne sa to na vás bude lepiť. Popritom budeme mať aj kapitoly s logickými úlohami, kde si budeme precvičovať programátorské myslenie, takže nebojte sa, ono to príde samo:)

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 - global.css

BODY{
margin: 0;
background-color: #dee8e7;
}

.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% - 221px);
min-height: 700px;
border-left: 1px solid #7d8079;
padding-left: 20px;
}

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

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

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

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

5 - 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 == "page1"){echo 'active';}?>" href="page1.php">page1</a></li>
<li><a class="<?php if($actual_page == "page2"){echo 'active';}?>" href="page2.php">page2</a></li>
<li><a class="<?php if($actual_page == "page3"){echo 'active';}?>" href="page3.php">page3</a></li>
</ul>
</div>

6 - page1.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 = "page1";?>
<div class="main">

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

<div class="content">

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

<div class="main-content right">
<h1>Page1</h1>
</div>

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

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

7 - page2.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 = "page2";?>
<div class="main">

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

<div class="content">

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

<div class="main-content right">
<h1>Page2</h1>
</div>

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

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

8 - page3.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 = "page3";?>
<div class="main">

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

<div class="content">

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

<div class="main-content right">
<h1>Page3</h1>
</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

menu activeli activeaktivny odkazaktivna polozka v menu

IT ftip

Život by bol jednoduchší, keby sme k nemu mali zdrojový kód.