slim 3 view example app > About

let's have a look at the source files

# FILE: /app.php

<?php
use Slim\App;
use Coreorm\Slim3\Theme;

$app = new App(['settings' => ['displayErrorDetails' => true]]);

$conf = json_decode(file_get_contents(__DIR__ . '/config.json'), true);

$theme = Theme::instance(__DIR__ . '/themes');
$theme->setLayout('page');
foreach ($conf as $k => $v) {
    $theme->setData($k, $v);
}

// now set shared resources (notice the theme is omitted as it defaults to 'default')
$theme->share('layouts/default')
    ->share('views/bits/header')
    ->share('views/bits/nav')
    ->share('views/pages/about')
    ->share('views/pages/homepage');

// default pages
$pages = [];

// current path
$theme->setData('currentURL', $_SERVER['REQUEST_URI']);

// read src
$src = [];
foreach ($conf['reader'] as $pc) {
    $key = $pc[1];
    $file = $pc[0];
    $src[$key] = '# FILE: ' . $file . PHP_EOL . PHP_EOL . htmlentities(file_get_contents(__DIR__ . $file));
    $theme->setData('src', $src);
}

$pages['/'] = function ($request, $response, $args) use ($theme) {
    $theme->setData('pageTitle', $theme->getData('pageTitle') . ' > Homepage')
        ->render($response, 'pages/homepage', [], true);
};

$pages['/about'] = function ($request, $response, $args) use ($theme) {
    $theme->setData('pageTitle', $theme->getData('pageTitle') . ' > About')
        ->render($response, 'pages/about', [], true);
};

$pages['/alt'] = function ($request, $response, $args) use ($theme, $pages) {
    $theme->setTheme('alternative');
    $pages['/']($request, $response, $args);
};

$pages['/alt/about'] = function ($request, $response, $args) use ($theme, $pages) {
    $theme->setTheme('alternative');
    $pages['/about']($request, $response, $args);
};

foreach ($pages as $route => $page) {
    $app->get($route, $page);
}

// run app
$app->run();
# FILE: /themes/default/layouts/default.phtml

<!DOCTYPE html>
<html lang="en">
<?php $this->import('bits/header', $themes['default']) ?>
<body>
<?php $this->import('bits/nav', $themes['default']) ?>
<div class="container"><?php echo $mainContent; ?></div>
</body>
</html>
# FILE: /themes/alternative/layouts/page.phtml

<!DOCTYPE html>
<html lang="en">
<?php $this->import('bits/header', $themes['alternative']) ?>
<body>
<?php $this->import('bits/nav', $themes['alternative']) ?>
<div class="container">
    <div class="panel panel-success">
        <div class="panel-heading"><?php echo $pageTitle; ?></div>
        <div class="panel-body"><?php echo $mainContent; ?></div>
    </div>
</div>
</body>
</html>
# FILE: /themes/default/views/pages/homepage.phtml

<!--[home page template]-->
<p>Welcome to the example</p>

<p>This example app has a very simple structure as shown below</p>

<div class="panel panel-default">
    <div class="panel-heading">
        Folder Structure
    </div>
    <div class="panel-body">
        <pre>
app
├── app.php
├── config.json
└── themes
    ├── alternative
    │   ├── layouts
    │   │   └── page.phtml
    │   └── views
    │       └── pages
    │           └── about.phtml
    └── default
        ├── layouts
        │   └── default.phtml
        └── views
            ├── bits
            │   ├── header.phtml
            │   └── nav.phtml
            └── pages
                ├── about.phtml
                └── homepage.phtml
        </pre>
    </div>
</div>

<ul>
    <li>config.json provides the data to be set on the theme, including theme specific settings</li>
    <li>app.php shares all templates from default globally, so when `alternative` theme doesn't have a view template, it'll just borrow from default; when it does, it uses its own template.</li>
    <li>Click the navigation links to browse the alternative themes</li>
</ul>
# FILE: /themes/default/views/pages/about.phtml

<p>let's have a look at the source files</p>

<?php
$hdr = '';
$body = '';
foreach ($src as $title => $code) {
    $id = md5($title);
    if ($title === 'app.php') {
        $class = 'active';
        $hdr .= '<li class="active"><a data-toggle="tab" href="#' . $id . '">' . $title . '</a></li>';
    } else {
        $class = '';
        $hdr .= '<li><a data-toggle="tab" href="#' . $id . '">' . $title . '</a></li>';
    }

    $body .= '<div id="' . $id . '" class="tab-pane fade in ' . $class . '"><pre class="brush: php">' . $code . '</pre></div>';
}
?>
<div class="panel panel-default">
    <div class="panel-heading">
        <ul class="nav nav-pills nav-inverse"><?php echo $hdr ?></ul>
    </div>
    <div class="panel-body">
        <div class="tab-content">
            <?php echo $body ?>
        </div>
    </div>
</div>
# FILE: /themes/alternative/views/pages/about.phtml


<?php
$hdr = '';
$body = '';
foreach ($src as $title => $code) {
    $id = md5($title);
    if ($title === 'app.php') {
        $class = 'active';
        $hdr .= '<li class="active"><a data-toggle="tab" href="#' . $id . '">' . $title . '</a></li>';
    } else {
        $class = '';
        $hdr .= '<li><a data-toggle="tab" href="#' . $id . '">' . $title . '</a></li>';
    }

    $body .= '<div id="' . $id . '" class="tab-pane fade in ' . $class . '"><pre class="brush: php">' . $code . '</pre></div>';
}
?>
<ul class="nav nav-tabs"><?php echo $hdr ?></ul>
<div class="tab-content">
    <?php echo $body ?>
</div>