Úpravy vzhledu administrace

Rudolf Svátek 2016-07-03 14:35

Administrace nám už celkem funguje, ale nevypadá hezky. Dnes tedy upravíme šablony a styly, doplníme javascripty atd. Začneme layoutem.

Celou aplikaci, tak jak bude vypadat po dnešní kapitole, si můžeš stáhnout: kapitola7.zip

Layout administrace

Používám šablonovací systém Latte. Hlavní šablona leží v souboru @layout.latte. Pro frontend už taková šablona existuje - app\FrontModule\presenters\templates\@layout.latte. Pro administraci bude vhodné použít jinou šablonu, která bude ležet ve složce app\AdminModule\presenters\templates.

Uvažujeme o tom, že budeme používat různé knihovny, jako jquery, bootstrap, grido, lightbox atd. Tohle je v zásadě na tobě, co chceš používat, nebo na co jsi zvyklý. Já jsem si postahoval potřebné knihovny a upravil layout takto:

{var ajax = $presenter->getParameter('ajax') == 'on'}
<!DOCTYPE html>
<html lang="cs">
<head>
	<meta charset="utf-8">
	<title>{block title}{/block}RS::RS</title>
	<link rel="shortcut icon" href="{$basePath}/favicon.ico">
	{block head}{/block}
	<link rel="stylesheet" href="//cdn.rawgit.com/simonwhitaker/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.css">
	<link rel="stylesheet" href="//cdn.rawgit.com/twbs/bootstrap/v3.3.6/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="//cdn.rawgit.com/twbs/bootstrap/v3.3.6/dist/css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="//cdn.rawgit.com/dangrossman/bootstrap-daterangepicker/v1.3.17/daterangepicker-bs3.css">
	<link rel="stylesheet" href="//cdn.rawgit.com/hyspace/typeahead.js-bootstrap3.less/v0.2.3/typeahead.css">
	<link rel="stylesheet" href="//cdn.rawgit.com/rstacruz/nprogress/v0.1.6/nprogress.css">
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.min.css">
	<link rel="stylesheet" href="//cdn.rawgit.com/o5/grido/ef677c3/client-side/css/grido.css">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
	<link href="{$basePath}/css/admin.css" rel="stylesheet">

	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.0/metisMenu.min.css">

	<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="//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 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 src="{$basePath}/js/grido.js"></script>
	<script src="{$basePath}/js/grido.datepicker.js"></script>
	<script n:if="$ajax" src="{$basePath}/js/grido.typeahead.js"></script>
	<script n:if="$ajax" src="{$basePath}/js/grido.history.js"></script>
	<script n:if="$ajax" src="{$basePath}/js/grido.nette.ajax.js"></script>

	<script n:if="$ajax" src="{$basePath}/js/admin/main.ajax.js"></script>
	<script n:if="!$ajax" src="{$basePath}/js/admin/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/admin/bootstrap.init.js"></script>
	<script src="{$basePath}/js/lightbox.init.js"></script>
</head>

<body>
<div id="content">
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="navbar-header">
				<a class="navbar-brand" n:href="Users:default">RS::RS</a>
			</div>
			<ul class="nav navbar-nav navbar-right">
				<li><a n:href="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=":Front:Sign:out"><span class="glyphicon glyphicon-log-out"></span> Odhlásit</a></li>
			</ul>
			<ul class="nav navbar-nav">
				<li><a n:href="Users:default"><i class="fa fa-users"></i> Uživatelé</a></li>
				<li><span id="ajax-spinner" class="hide">&nbsp;</span></li>
			</ul>
		</div>
	</nav>

	{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}

	{include #content}

</div>

</body>
</html>

Úprava šablon formulářů

Ať je to hezké, tak trochu upravíme šablonu pro editaci uživatele. Chceme využívat bootstrap, tak formulář vykreslíme ručně, ať máme nad vším kontrolu. Šablonu edit.latte pro editaci tedy uprav takto:

{block content}
	<div class="row">
		<div class="col-sm-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					Editace uživatele
				</div>
				<div class="panel-body">
					<form n:name=editForm n:class=form-horizontal>
						{input id}
						<div class="tab-content">
							<div class="form-group">
								<div class="col-sm-6">
									<div class="col-sm-12 input-group">
                  			<span class="input-group-addon">
									  <a href="javascript:void(0)" title="Login" data-toggle="popover"
										  data-trigger="focus"
										  data-content="Přihlašovací jméno uživatele">
										  <i class="fa fa-question"></i>
									  </a>
									</span>
										{input username}
									</div>
								</div>
								<div class="col-sm-6">
									<div class="col-sm-12 input-group margin-bottom-sm">
									<span class="input-group-addon">
									  <a href="javascript:void(0)" title="Email" data-toggle="popover"
										  data-trigger="focus" data-content="Uživatelův email">
										  <i class="fa fa-question"></i>
									  </a>
									</span>
										{input email}
									</div>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-6">
									<div class="col-sm-12 input-group">
									<span class="input-group-addon">
									  <a href="javascript:void(0)" title="Heslo" data-toggle="popover"
										  data-trigger="focus"
										  data-content="Přihlašovací heslo">
										  <i class="fa fa-question"></i>
									  </a>
									</span>
										{input password}
									</div>
								</div>
								<div class="col-sm-6">
									<div class="col-sm-12 input-group">
									<span class="input-group-addon">
									  <a href="javascript:void(0)" title="Heslo pro kontrolu" data-toggle="popover"
										  data-trigger="focus"
										  data-content="Heslo pro kontrolu">
										  <i class="fa fa-question"></i>
									  </a>
									</span>
										{input password2}
									</div>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-6">
									<div class="col-sm-12 input-group">
									<span class="input-group-addon">
									  <a href="javascript:void(0)" title="Jméno" data-toggle="popover"
										  data-trigger="focus"
										  data-content="Křestní jméno uživatele">
										  <i class="fa fa-question"></i>
									  </a>
									</span>
										{input name}
									</div>
								</div>
								<div class="col-sm-6">
									<div class="col-sm-12 input-group">
										<span class="input-group-addon">
										  <a href="javascript:void(0)" title="Příjmení" data-toggle="popover"
											  data-trigger="focus"
											  data-content="Příjmení uživatele">
											  <i class="fa fa-question"></i>
										  </a>
										</span>
										{input lastname}
									</div>
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-6">
								<div class="col-sm-12 input-group">
									<span class="input-group-addon">
									  <a href="javascript:void(0)" title="Role" data-toggle="popover"
										  data-trigger="focus"
										  data-content="Uživatelova role">
										  <i class="fa fa-question"></i>
									  </a>
									</span>
									{input role}
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								{input process}
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
{/block}

{block title}Editace uživatele |&nbsp;{/block}

Klidně si to uprav podle sebe, ale princip je jasný. Za úkol máš podobně upravit formulář pro přidání uživatele. Bližší informace o vykreslování formulářů najdeš na stránkách Nette a je to fakt pěkné a zajímavé čtení. Podobně uprav šablonu pro přidání uživatele. Jak přesně, to už nechám na tobě :-)

Ještě bude dobré někam umístit odkaz na vytvoření nového uživatele. Hodil by se nad výpis uživatelů. Zároveň víme, že mazání uživatelů by mělo probíhat ajaxově. Obalíme tedy komponentu grid značkou snippet. Celá šablona pro výpis uživatelů default.latte tedy bude vypadat takto:

{block content}
	<div class="row">
		<div class="col-sm-12 form-group">
			<a n:href="Users:add" class="btn btn-success btn-sm">
				<span class="glyphicon glyphicon-plus"></span> Přidat uživatele
			</a>
		</div>
	</div>
	{snippet grid}
		{control grid}
	{/snippet}
{/block}

{block title}Výpis uživatelů |&nbsp;{/block}

Po zadání adresy

http://localhost:8000/admin/users/

uvidíš už pěkný výpis uživatelů. Už se vykreslují tlačítka pro editaci, přidání a mazání uživatelů. Já si pohrál ještě trochu se styly a doplnil nějaké javascriptové knihovny. Celou aplikaci, tak jak má vypadat po dnešní kapitole, si můžeš stáhnout: kapitola7.zip

A to je dnes vše. Příště si ukážeme jak zařídit, aby se web zobrazoval vícejazyčně.

Redakční systém RS::RS Předchozí kapitola

Administrace uživatelů

Redakční systém RS::RS Celý seriál

Vývoj redakčního systému v PHP

Redakční systém RS::RS Následující kapitola

Vícejazyčný web

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