Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Building an App With Nette and Adding Authentication, Part 1

DZone's Guide to

Building an App With Nette and Adding Authentication, Part 1

In this tutorial, I'll show you how easy it is to build a web application with Nette. Check out the repo below to get the code.

· Web Dev Zone
Free Resource

Get deep insight into Node.js applications with real-time metrics, CPU profiling, and heap snapshots with N|Solid from NodeSource. Learn more.

Check out the repo to get the code.

Nette is a free, open-source PHP framework designed for building web applications. Nette is a set of decoupled and reusable PHP packages that will make your work easier. And Nette is also known as the quick and comfortable web development framework in PHP because it has the tools that allow you to bang out PHP applications rather quickly. Nette has a bundle of tools that make it one of the popular PHP frameworks out there. These tools include Tracy, Latte, and Tester.

Tracy is a library that helps you log errors, dump variables, observe memory consumption and measure the execution time of scripts and queries. After activating Tracy on your web application, a debugger bar shows up.

Tracy debug bar

This tool also provides the Debugger::dump() function which dumps the content of a variable far better than var_dump. Logging with Tracy involves invoking the Debugger::log() function. In production mode, Tracy automatically captures all errors and exceptions into a text log.

Another useful development magic Tracy offers is the debugger stopwatch with a precision of microseconds. Just call the Debugger::timer() function. For multiple measurements, you can write code like this:

Debugger::timer('pdf-making');
// some code

Debugger::timer('excel-making');
// some code

$excelMakingElapsed = Debugger::timer('excel-making');
$pdfMakingElapsed = Debugger::timer('pdf-making');

Tracy also has an integration with Firelogger. Learn more about how Tracy works by visiting the documentation for more information.

Latte is a template engine for PHP. It has intuitive syntax and compiles templates to plain optimized PHP code.

<ul n:if="$items">
{foreach $items as $item}
    <li id="item-{$iterator->counter}">{$item|capitalize}</li>
{/foreach}
</ul>

The best way to install Latte is via composer.

composer require latte/latte 

And activate it by invoking it like:

$latte = new Latte\Engine;

$latte->setTempDirectory('/path/to/tempdir');

$parameters['items'] = ['one', 'two', 'three'];

// render to output
$latte->render('template.latte', $parameters);
// or render to string
$html = $latte->renderToString('template.latte', $parameters);

Latte has a set of standard filters. You can call a filter by using the pipe symbol. Check out the code below:

<h1>{$heading|upper}</h1>
<h1>{$heading|lower|capitalize}</h1>
<h1>{$heading|truncate:20,''}</h1>

You can add a custom filter by calling the addFilter function on Latte:

$latte = new Latte\Engine;

$latte->addFilter('clear', function ($str) {
    return trim($str, 'Sd'); // eliminates Sd from the string
});

Then we can use it in a template like this:

<p>{$sentence|clear}</p>

Learn more about how Latte works by visiting the documentation for more information.

Tester is a productive and enjoyable unit testing framework developed by the Nette team. It is used by the Nette framework for testing. It offers lots of Assertion helpers and annotations for TestCase methods. Learn more about how Tester works by visiting the documentation for more information.

Nette has a collection of plugins and extensions for easy use in your application. It also has an active community.

We'll be building a simple character listing app with Nette. Our app will simply list 10 Game of Thrones characters and their real names. Once we add authentication to the app, all logged-in users will have the privilege of knowing their names. Nonlogged-in users won't have access to any data.

Note: Check out how we built this small secure app with Laravel.

Let's Get Started

Nette utilizes Composer to manage its dependencies. So, before using Nette, make sure you have Composer installed on your machine. We can install Nette by issuing the Composer create-project command in your terminal like so: composer create-project nette/web-project GOT.

If you are developing on a Mac OS X or Linux, you need to configure write privileges to the web server by doing cd GOT && chmod -R a+rw temp log.

Explore Directory Structure

The app directory is the bulk of your Nette application. It contains the following directories:

  • config - Contains all your configuration files such as database connection, session expiry time, etc.
  • presenters - Contains all your presenter classes and templates.
  • router - Contains configuration for your app URLs.

The other directories, namely:

  • log contains your app log files. You can get all the error message logs here.
  • temp contains your app's temporary files such as cache and session files.
  • vendor contains your app dependencies.
  • www is the only directory accessible from the web. It is supposed to store publicly available files such as images, JavaScript, and CSS files.

Setting Up the Controller

In Nette, the presenters are the controllers. They connect the models and the views. We already have the HomePagePresenter. Let's use it.

Open up app/presents/HomepagePresenter.php and configure it like so:

<?php

namespace App\Presenters;

use Nette;

class HomepagePresenter extends Nette\Application\UI\Presenter
{

  public function renderDefault() {

    $characters = [
         'Daenerys Targaryen' => 'Emilia Clarke',
         'Jon Snow'           => 'Kit Harington',
         'Arya Stark'         => 'Maisie Williams',
         'Melisandre'         => 'Carice van Houten',
         'Khal Drogo'         => 'Jason Momoa',
         'Tyrion Lannister'   => 'Peter Dinklage',
         'Ramsay Bolton'      => 'Iwan Rheon',
         'Petyr Baelish'      => 'Aidan Gillen',
         'Brienne of Tarth'   => 'Gwendoline Christie',
         'Lord Varys'         => 'Conleth Hill'
    ];

    $this->template->characters = $characters;
  }
}

renderDefault() means we are going to render what we have defined in the function above in a view called default.latte.

$this->template->characters = $characters indicates that we are passing the $characters array variable to the default.latte view.

Setting Up the View

Views are present in the app/presenters/templates directory. Our presenter is HomepagePresenter. This simply indicates that our default view is in the app/presenters/templates/Homepage directory.

Nette follows convention. Presenter templates can be found in app/presenters/templates/{PresenterName}/{viewName}.latte.

Open up app/presenters/templates/Homepage/default.latte and modify it to look like this:

{block content}
    <h1 n:block="title"></h1>

    <div class="container">
      <div class="row">
          <div class="col-md-10 col-md-offset-1">
              <div class="panel panel-success">
                  <div class="panel-heading">List of Game of Thrones Characters</div>
                    <table class="table">
                        <tr>
                            <th>Character</th>
                            <th>Real Name</th>
                        </tr>
                        {foreach $characters as $key => $value}
                          <tr>
                            <td>{$key}</td><td>{$value}</td>
                          </tr>
                        {/foreach}
                    </table>
              </div>
          </div>
      </div>
    </div>
{/block}

By default, the layout template is located in app/presenters/templates/@layout.latte. It contains the format for presenting data in the templates.

{include content} 

The code above inserts a block named content into the main template.

{block content} 

You can then place items within the content block, which is what we did in our default view.

Just before checking it out, head over to app/presenters/templates/@layout.latte and add the link to bootstrap within the head tag like this:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

The $characters array variable passed from the presenter was injected into the default view. And we iterated through it to display the Game of Thrones characters.

Head over to your terminal, make sure you are in the GOT root directory, and ensure you configure write privileges to the web server if you are working on a Mac OS X or Linux system by running this command:

chmod -R a+rw temp log 

Now, run the application:

php -S localhost:8000 -t www 

Your application should look like this:

Homepage

Tracy in action

Image title

Check out Tracy in action. Very easy to know the memory consumption stats and execution time.

In Part 2 of this article, we'll go over the authentication process. Stay tuned! 

Node.js application metrics sent directly to any statsd-compliant system. Get N|Solid

Topics:
web dev ,nette ,web application development

Published at DZone with permission of Prosper Otemuyiwa, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}