Úvodní stránka

Rudolf Svátek 2016-07-27 13:17

Pokud si stáhneš dnešní kapitolu17.zip, najdeš tam kromě složky app i složku www. Jsou v ní styly, javascripty, obrázky a fonty, které potřebuješ v šabloně, kterou dnes vytvoříš/upravíš.

První věc, kterou uživatel uvidí, je samozřejmě vstupní stránka webu. Velmi často je to homepage. Začneme tedy dnes upravovat frontend. Opustíme tedy moduly, které už máme hotové kvůli administraci, a soustředíme se na presentery a šablony. Je možné, že přijdeme na nějakou potřebu, kterou ještě v modulu nemáme vyřešenou, ale na to zase upozorním v průběhu výkladu.

BasePresenter

To už sis asi zvyknul, že nějaké Base třídy se hodí. Uvažuji tak, že co potřebuji ve více než jednom presenteru, to vložím do BasePresenteru. Například práci se stránkami asi využiji při normálním zobrazení stránky, ale i při tvorbě menu, vyhledávání apod. Stejně tak novinky chci vidět při zobrazení homepage, detailu stránky, novinky. Takže do BasePresenteru v app\FrontModule\presenters doplním závislosti:

<?php

namespace App\FrontModule\Presenters;

use Nette\Application\UI\Presenter;
use App\Model\PagesRepository;
use App\Model\NewsRepository;

/**
 * Class BasePresenter
 * @package App\FrontModule\Presenters
 */
abstract class BasePresenter extends Presenter
{

	/** @var string @persistent */
	public $ajax = 'on';

	/** @var PagesRepository @inject */
	public $pagesRepository;

	/** @var NewsRepository @inject */
	public $newsRepository;

	public function startup() {
		parent::startup();
	}

}

Taky jsme nastavili persistentní parametr "ajax". Třeba ho budeme potřebovat ;-)

HomepagePresenter

Tento presenter bude zodpovědný za zobrazování hlavní stránky. Jde ale o to, co se zobrazí za stránku. Proto si v administraci stránek vyber nějakou stránku a nastav jí příznak "Aktivní" a "Na úvodní stranu". Tuto stránku najdeme v homepage presenteru a zobrazíme v šabloně.

<?php

namespace App\FrontModule\Presenters;

/**
 * Class HomepagePresenter
 * @package App\FrontModule\Presenters
 */
class HomepagePresenter extends BasePresenter
{

	public function startup() {
		parent::startup();
	}

	/**
	 * Action Default
	 */
	public function actionDefault() {
		$page = $this->pagesRepository->getOneWhere(['onHomepage' => 1]);
		$this->getTemplate()->page = $page;
		$this->getTemplate()->title = ($page->title() > '' ? $page->title() : $page->name());
		$this->getTemplate()->description = $page->description() > '' ? $page->description() : $page->text();
		$this->getTemplate()->keywords = $page->keywords() > '' ? $page->keywords() : '';
	}
}

Ta podmínka je asi jasná - zavoláme fukci repositáře, která vybere jednu stránku, co má nastaven příznak "Na úvodní stranu". Do šablony pak ještě pošleme jak má vypadat titulek, popisek a keywords. To kvůli SEO.

Upravíme trochu šablonu, kterou najdeš v app\FrontModule\presenters\templates\Homepage\default.latte. Zrušíme tím ten pěkný obrázek, ale začneme si už zobrazovat svoje texty:

{block content}
	<div class="contentArea">
		<div class="divPanel notop page-content">
			<div class="row-fluid">
				<div class="span12" id="divMain">
					{$page->text()|noescape}
					{if $user->isLoggedIn() && $page->secretText() > ''}
						{$page->secretText()|noescape}
					{/if}
				</div>
			</div>
			<div id="footerInnerSeparator"></div>
		</div>
	</div>
{/block}

V zásadě v šabloně říkáme, že chceme vždy zobrazit text stránky a pokud je uživatel přihlášen a je vyplněn nějaký skrytý text, tak mu ho taky ukážeme. Když si teď zobrazíš v prohlížeči adresu

http://localhost:8000/

uvidíš jednoduchý text, který jsi vyplnil v administraci. Zatím tedy nic moc. Upravíme tedy trochu šablony. Nejlepší postup je asi ten, že si prostě vyrobíš v HTML normálně celý statický web. Vykreslíš si ručně menu, případně slider na úvodní stránce, novinky, ankety, no prostě hotové stránky. Pak když si je v prohlížeči zobrazíš, stačí zkopírovat jejich HTML kód a uložit jako hlavní šablonu @template.latte. Potom postupně můžeš měnit různé bloky v hlavní šabloně za šablony jednotlivých komponent. Také pak uvedeš jen proměnné, které ti připraví presenter a takhle jednoduše postavíš celou dynamickou stránku.

Na webu se válí i spousta free šablon, pokud zrovna nechceš ukrást nějakou, která free není :-). Já si třeba jednu takovou free bootstrap šablonu stáhnul a upravil jsem si jí. Samozřejmě musím myslet na to, že potřebui i nějaké své JS knihovny třeba kvůli ajaxu. Chci si něco málo pozměnit apod. Moje výchozí šablona @template.latte tedy vypadá takto:

{var ajax = $presenter->getParameter('ajax') == 'on'}
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>{$title|truncate:55}</title>
		<link rel="icon" type="image/x-icon" href="favicon.ico">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
		<meta name="description" content="{$description|striptags|truncate:160}">
		<meta name="keywords" content="{$keywords}">
		<meta name="author" content="Rudolf Svátek, www.rudolfsvatek.cz">
		<meta name="publisher" content="Rudolf Svátek, www.rudolfsvatek.cz">
		<meta name="robots" content="noindex, nofollow">

		<meta name="geo.region" content="CZ-MO" />
		<meta name="geo.placename" content="Hav&iacute;řov" />
		<meta name="geo.position" content="49.781153;18.442521" />
		<meta name="ICBM" content="49.781153, 18.442521" />

		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
		<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
		<link href="{$basePath}/css/jquery.smartmenus.bootstrap.css" rel="stylesheet">
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.min.css">

		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">

		<!-- Icons -->
		<link href="{$basePath}/css/icons/general/stylesheets/general_foundicons.css" media="screen" rel="stylesheet" type="text/css"/>
		<link href="{$basePath}/css/icons/social/stylesheets/social_foundicons.css" media="screen" rel="stylesheet" type="text/css"/>
		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
		<!--[if lt IE 8]>
		<link href="{$basePath}/css/icons/general/stylesheets/general_foundicons_ie7.css" media="screen"
				rel="stylesheet" type="text/css"/>
		<link href="{$basePath}/css/icons/social/stylesheets/social_foundicons_ie7.css" media="screen"
				rel="stylesheet" type="text/css"/>
		<![endif]-->
		<link rel="stylesheet" href="{$basePath}/css/fontawesome/css/font-awesome.min.css">
		<!--[if IE 7]>
		<link rel="stylesheet" href="{$basePath}/css/fontawesome/css/font-awesome-ie7.min.css">
		<![endif]-->

		<link href="//fonts.googleapis.com/css?family=Syncopate" rel="stylesheet" type="text/css">
		<link href="//fonts.googleapis.com/css?family=Abel" rel="stylesheet" type="text/css">
		<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
		<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
		<link href="//fonts.googleapis.com/css?family=Pontano+Sans" rel="stylesheet" type="text/css">
		<link href="//fonts.googleapis.com/css?family=Oxygen" rel="stylesheet" type="text/css">

		<link href="{$basePath}/css/style.css" rel="stylesheet" type="text/css"/>

		{block #link}{/block}
	</head>
	<body id="pageBody">

		<div id="divBoxed" class="container">
			<div class="transparent-bg" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;zoom: 1;"></div>
			<div class="divPanel notop nobottom">
				<div class="row">
					<div class="span12">
						<div id="divLogo" class="pull-left">
							<a n:href="Homepage:default" id="divSiteTitle">motto1</a><br/>
							<a n:href="Homepage:default" id="divTagLine">motto2</a>
						</div>

						<ul class="nav navbar-nav navbar-right" n:if="$this->user->isLoggedIn()" style="position:absolute;right:32px; z-index: 20">
							<li><a n:href=":Admin:Users:edit $user->id"><i
										class="fa fa-user fa-fw"></i> {$this->user->getIdentity()->name} {$this->user->getIdentity()->lastname}
									({$this->user->getIdentity()->role})</a>
							<li><a n:href="Sign:out"><span class="glyphicon glyphicon-log-out"></span> {_ messages.application.logout}</a></li>
						</ul>
						<ul class="nav navbar-nav navbar-right" n:if="!$this->user->isLoggedIn()" style="position:absolute;right:32px; z-index: 20">
							<li><a n:href="Sign:in"><span class="glyphicon glyphicon-log-in"></span> {_ messages.application.login}</a></li>
						</ul>
						<div id="divMenuRight" class="pull-right">
							<div class="navbar">
								<button type="button" class="btn btn-navbar-highlight btn-large btn-primary" data-toggle="collapse" data-target=".nav-collapse">
									Menu <span class="icon-chevron-down icon-white"></span>
								</button>
								<div id="myNavbar" class="navbar">
										<ul class="nav navbar-nav nav-pills ddmenu sm">
											<li>
												<a href="#">Domů</a>
											</li>
											<li>
												<a href="#">O nás</a>
											</li>
											<li>
												<a href="#">Kontakty</a>
											</li>
										</ul>
									</div>
							</div>
						</div>
					</div>
				</div>
				{snippet flashes}
					<div n:foreach="$flashes as $flash" class="alert alert-{$flash->type} fade in">
						<button type="button" class="close" data-dismiss="alert">×</button>
						<p>{$flash->message}</p>
					</div>
				{/snippet}
			</div>
			<div class="contentArea">
				<div class="divPanel notop page-content">
					<div class="row-fluid">
						<div class="span12" id="divMain">
							{include content}
						</div>
					</div>
					<div id="footerInnerSeparator"></div>
				</div>
			</div>
			<div id="footerOuterSeparator"></div>
			<div id="divFooter" class="footerArea">
				<div class="divPanel">
					<div class="row">
						Zápatí
					</div>
					<div class="col-sm-12">
					</div>
				</div>
			</div>
		</div>
		<br><br><br>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<script src="//cdn.rawgit.com/moment/moment/2.9.0/moment.js"></script>
		<script src="//cdn.rawgit.com/twbs/bootstrap/v3.3.6/dist/js/bootstrap.min.js"></script>
		<script src="{$basePath}/js/bootstrap-checkbox.min.js" defer></script>
		<script src="{$basePath}/js/bootstrap.init.js"></script>
		<script src="//cdn.rawgit.com/dangrossman/bootstrap-daterangepicker/v1.3.19/daterangepicker.js"></script>
		<script src="//cdn.rawgit.com/nette/forms/v2.2.4/src/assets/netteForms.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.min.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

		<script src="{$basePath}/js/jquery.smartmenus.js"></script>
		<script src="{$basePath}/js/jquery.smartmenus.bootstrap.js"></script>
		<script src="{$basePath}/js/bootstrap-hover-dropdown.js"></script>

		<script n:if="$ajax" src="//cdn.rawgit.com/browserstate/history.js/1.8.0/scripts/bundled/html4+html5/jquery.history.js"></script>
		<script n:if="$ajax" src="//cdn.rawgit.com/twitter/typeahead.js/v0.10.5/dist/typeahead.bundle.min.js"></script>
		<script n:if="$ajax" src="//cdn.rawgit.com/vojtech-dobes/nette.ajax.js/2.0.0/nette.ajax.js"></script>
		<script n:if="$ajax" src="//cdn.rawgit.com/rstacruz/nprogress/v0.1.6/nprogress.js"></script>
		<script n:if="$ajax" src="{$basePath}/js/nette.nprogress.js"></script>

		<script n:if="$ajax" src="{$basePath}/js/main.ajax.js"></script>
		<script n:if="!$ajax" src="{$basePath}/js/main.js"></script>

		<script src="{$basePath}/js/jquery.cookie.js"></script>

		<script src="//cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.0/metisMenu.min.js"></script>
		<script src="{$basePath}/js/lightbox.init.js"></script>

	</body>
</html>

Za zmínku stojí snad jen proměnná {$basePath}, která v sobě nese relativní URL k rootu aplikace. Tím můžeš web přesunout na jinou doménu, nebo dokonce subdoménu a mělo by to běžet bez problému.

Důležitá řádka je:

{include content}

Ta říká, že na toto místo se má vložit blok, definovaný jako "content". No a když se mrkneš do šablony Homepage\default.latte, tak právě takto pojmenovaný blok tam najdeš. Čili při vykreslování stránky se presenter ptá, jestli existuje hlavní šablona a jestli ta hledá nějaké další bloky. Ty bloky se hledají na různých místech - v šabloně akce presenteru, v šabloně použité komponenty, případně můžeš presenteru říct, aby se podíval na nějaké další místo.

Dnes jsme si tedy jen připravili zobrazení domovské stránky tak, aby vypadalo dobře a aby se vypsal text stránky. Příště už vytvoříme menu, výpis novinek a prostě to oživíme.

Pokud si stáhneš dnešní kapitolu17.zip, najdeš tam kromě složky app i složku www. Jsou v ní styly, javascripty, obrázky a fonty, které ten tvůrce šablony použil.

Komentáře (0)

Přidej svůj komentář

O mně

Jmenuji se Rudolf Svátek. Jsem lektor výpočetní techniky a PHP programátor. Stavím firemní stránky a eshopy. Aby se mi to dělalo pohodlně, vytvořil jsem redakční systém RS::RS, který ti tu nabízím k použití.

Rychlý kontakt na mně

  • Rudolf Svátek
  • Telefon:
    +420 777 828 353
  • Email:
  • Adresa:
    Josefa Hory 1097/5
    736 01 Havířov
    ČR



Tyto stránky používají Cookies. Používáním stránek s tím souhlasíte Další informace