Welcome to this fourth part in our workouts with Slim 3. After learning what Slim is, crafted a minimalist app, learnt how to make routing, and discovered how we could use the DIC, today we'll apply all this create a very simple and static website for a business.
Before we start you can have a look at the demo and see what we're going to create.
1. Project
The idea is to create a simple website for a small business named Alpha Inc. The website will have a home page, an about page and a contact page. The first two will be containing some simple text and images which you can arrange as you wish. Our views are going to be created with Slim-Twig. The home page will have our address and a contact form.
2. Project folder structure
Since we're using Slim a folder structure matters a lot. While you are free to define it as it pleases you, I will go for a simple a light folder structure.
The root folder will be named Aplpha. Under it we will have a vendor, bootstrap, css, resources, and app folders. At the same level we'll create our index.php, .htaccess, and composer.json files.
Bellow is a breakdown of the folders and files:
- Alpha
- app/
- resources/
- views/
- about.twig
- contact.twig
- home.twig
- layout.twig
- partials/
- nav.twig
- footer.twig
- settings.php
- routes.php
- dependencies.php
- bootstrap/
- app.php
- css/
- style.css
- img/
- vendor/
- index.php
- .htaccess
- composer.json
- app folder
This folder will contain all files/classes we will need for our website, which will include our views, dependencies calls, routes, and our application settings
- resources folder
The resources folder will basically container our resources, but mainly our views.
That's the minimum we need to start. I will be giving your more details on each file and what they contain in the next sections of this tutorial. We may need to add some files or folder in the upcoming sections. You can still grab the finale work here
- bootstrap folder
This folder will contain a file which does the bootstrapping of our application by including all needed files.
- css folder
This contains our css assets
- vendor folder
The vendor folder is where all packages we'll be using will reside include Slim.
3. Get packages
I assume you know how to use composer and grab packages. Open your composer.json file and add the following inside it:
{
"require": {
"slim/slim": "^3.0",
"slim/twig-view": "^2.1"
}
}Now cd to the Alpha project folder and run the following:
composer updateAfter this your vendor folder should be filled with some other sub-folders. These are our packages.
4. .htaccess file
Open you .htaccess file and add the following:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteCond %{REQUEST_URI}::$1 ^(/.+)(.+)::\2$
RewriteRule ^(.*) - [E=BASE:%1]
RewriteRule ^(.*)$ %{ENV:BASE}index.php [NC,L]What this does it to force appache server to direct all HTTP requests to our application entry point: the index.php file. From there we will handle how to dispache the request and redirect the user to the appropriate page.
5. The bootstrap/app.php file
<?php
/**
* Slim Application setting
* and bootstrapping
*/
// Require composer autoloader
require __DIR__ . '/../vendor/autoload.php';
// Application settings
$settings = require __DIR__ . '/../app/settings.php';
// New Slim app instance
$app = new Slim\App( $settings );
// Add our dependencies to the container
require __DIR__ . '/../app/dependencies.php';
// Require our route
require __DIR__ . '/../app/routes.php';This file does the first job in running the application. First it requires composer's autoloader and makes all classes available to us. Then it will create a new instance of Slim micri-framework and puts it into the variable $app. Then it includes other files containing the application settings, its dependencies and routes. This is done to keep the code clean and to separte each function.
6. The index.php file
All we have in this file is this:
<?php
// Require application bootstrap
require __DIR__ . '/bootstrap/app.php';
// Run Slim
$app->run();It requires the bootstrap/app.php file in which the variable $app is set. The $app variable contains a Slim app instance. The instance is used to start Slim.
7. The app/settings.php
it contain the following code:
<?php
return [
'settings' => [
'displayErrorDetails' => true,
'view' => [
'path' => __DIR__ . '/resources/views',
'twig' => [
'cache' => false
]
],
]
];This code return an Array() of setting to indicate to the application where to find our twig templates.
8. The app/dependencies.php file
This file defines all dependencies our application has. In this case it's only twig-view we are using as dependency. An instance of \Slim\Views\Twig() to handle twig templating and joins to it and instance of \Slim\View\TwigExtension() to help us have access to twig functions like path_for() or base_url().
<?php
// Get the container
$container = $app->getContainer();
// Twig view dependency
$container['view'] = function ($c) {
$cf = $c->get('settings')['view'];
$view = new \Slim\Views\Twig($cf['path'], $cf['twig']);
$view->addExtension(new \Slim\Views\TwigExtension(
$c->router,
$c->request->getUri()
));
return $view;
};9. The app/routes.php file
The routes file contains all our routes. Mainly home, about, and contact routes.
<?php
// Creating routes
// Psr-7 Request and Response interfaces
use Psr\Http\Message\ServerRequestInterface as Request;
use Psr\Http\Message\ResponseInterface as Response;
// HOME ROUTE
//
$app->get('/', function (Request $request, Response $response, $args) {
$vars = [
'page' => [
'title' => 'Welcome - Alpha Inc.',
'description' => 'Welcome to the official page of Alpha Inc.'
],
];
return $this->view->render($response, 'home.twig', $vars);
})->setName('home');
// ABOUT ROUTE
//
$app->get('/about', function (Request $request, Response $response, $args) {
$vars = [
'page' => [
'title' => 'About Us - Alpha Inc.',
'description' => 'We\'re a multi-national company specialized in high tech and robotics.'
],
];
return $this->view->render($response, 'about.twig', $vars);
})->setName('about');
// ABOUT ROUTE
//
$app->get('/contact', function (Request $request, Response $response, $args) {
$vars = [
'page' => [
'title' => 'About Us - Alpha Inc.',
'description' => 'Drop us a line or get in touch for any enquires.'
],
];
return $this->view->render($response, 'contact.twig', $vars);
})->setName('contact');Now let's have a look at our twig views(templates). These files are mainly HTNL documents but with the .twig extention, it could be anything, like .html, .phtml, or even .php. The most important thing is to call them with the extension in your routes.
Our templates are located in the app/resources/views folder.
10. View files
- layout.twig
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="{{ page.description }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ page.title }}</title>
{# Google fonts:Open Sans #}
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
{# Latest compiled and minified CSS #}
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
{# Our customized css #}
<link rel="stylesheet" href="{{ base_url() }}/css/style.css">
</head>
<body>
<div class="container">
{% include 'partials/nav.twig' %}
{% block content %} {% endblock %}
{% include 'partials/footer.twig' %}
</div>
</body>
</html>- home.twig
{% extends 'layout.twig' %}
{% block content %}
<div class="pure-g">
<div class="pure-u-3-5">
<p><strong>Welcome to Alpha Incorporation Official website</strong></p>
<p>
Alpha Inc. is a revolutionary company located at the middle of the Silicon Valley.
</p>
<p>
The company was established in 1965 by Don Alphonso Vinci
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti nostrum vitae repellat voluptate corporis, quod sed illo expedita, distinctio reprehenderit voluptates ut nam, reiciendis fugiat temporibus vero cumque quia dolores.
</p>
</div>
<div class="pure-u-2-5">
<figure>
<img src="{{ base_url() }}/img/company.jpg" alt="Alpha Inc." class="pure-img">
<figcaption>Alpah Inc. Head Quaters in Silicon Valley</figcaption>
</figure>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis omnis vero voluptas porro, totam culpa vel? Ea velit deleniti debitis voluptas nihil maxime, repudiandae recusandae soluta earum. Porro, perferendis facere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi id labore debitis iste et quos veritatis quo. Facere molestias doloribus, atque molestiae sed ratione ut, iste vitae nobis, saepe asperiores. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sunt, alias excepturi qui perspiciatis doloribus fugit quasi laudantium esse quas, magni a optio quidem, vel explicabo dolores ullam assumenda earum!</p>
</div>
</div>
<hr>
<aside class="pure-g">
<div class="pure-u-1">
<p>Contact us today and start business</p>
<p><a href="{{ path_for('contact') }}" class="pure-button">Get in touch</a></p>
</div>
</aside>
{% endblock %}- about.twig
{% extends 'layout.twig' %}
{% block content %}
<div class="pure-g">
<div class="pure-u-3-5">
<h1>A company with the strongest desire of serving you anywhere </h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti nostrum vitae repellat voluptate corporis, quod sed illo expedita, distinctio reprehenderit voluptates ut nam, reiciendis fugiat temporibus vero cumque quia dolores.
</p>
</div>
<div class="pure-u-2-5">
<figure>
<img src="{{ base_url() }}/img/company.jpg" alt="Alpha Inc." class="pure-img">
<figcaption>Alpah Inc. Head Quaters in Silicon Valley</figcaption>
</figure>
</div>
</div>
<hr>
<div class="pure-g">
<div class="pure-u-2-5">
<figure>
<img src="{{ base_url() }}/img/e-commerce.jpg" alt="Alpha Inc. E-Commerce" class="pure-img">
<figcaption>Ecommerce</figcaption>
</figure>
</div>
<div class="pure-u-3-5">
<h1>Reknown brands in e-Commerce</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti nostrum vitae repellat voluptate corporis, quod sed illo expedita, distinctio reprehenderit voluptates ut nam, reiciendis fugiat temporibus vero cumque quia dolores.
</p>
</div>
</div>
<hr>
<div class="pure-g">
<div class="pure-u-1">
<img src="{{ base_url() }}/img/illustration-home-inverted.1f863f34ba.png" alt="Alpha Inc. E-Commerce" class="pure-img">
<p>
<h1>A company always at work</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dolorum similique perferendis sit aut illo cum, officia quaerat deserunt voluptas numquam, asperiores optio minus ipsa quod quos accusamus obcaecati quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione non earum numquam temporibus ipsum quos laborum nihil vero doloremque culpa, optio totam ipsa impedit, nostrum suscipit pariatur repellat. Reiciendis, dicta!</p>
</p>
</div>
</div>
<hr>
<aside class="pure-g">
<div class="pure-u-1">
<p>Contact us today and start business</p>
<p><a href="{{ path_for('contact') }}" class="pure-button">Get in touch</a></p>
</div>
</aside>
{% endblock %}- contact.twig
{% extends 'layout.twig' %}
{% block content %}
<div class="pure-g">
<div class="pure-u-3-5">
<form action="" method="post" class="pure-form pure-form-stacked">
<div class="">
<label for="name">Full name *</label>
<input type="text" name="name" id="name" placeholder="Full name (required)">
</div>
<div class="">
<label for="name">Email *</label>
<input type="text" name="email" id="email" placeholder="Full name (required)">
</div>
<div class="">
<label for="name">Message *</label>
<textarea name="message" id="message" cols="60" rows="8" placeholder="message..."></textarea>
</div>
<button type="submit" class="pure-button pure-button-primary">Send message</button>
</form>
</div>
<div class="pure-u-2-5">
<p><strong>Get in touch with us!</strong></p>
<p>
Our team awaits to start business with you
</p>
<p>
The company was established in 1965 by Don Alphonso Vinci
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti nostrum vitae repellat voluptate corporis, quod sed illo expedita, distinctio reprehenderit voluptates ut nam, reiciendis fugiat temporibus vero cumque quia dolores.
</p>
</div>
</div>
<hr>
<aside class="pure-g">
<address class="pure-u-1">
<p><b>Address:</b></p>
<p>1245 Mandela Ave, NY <br>
+1 555 555 555 <br>
www.alphainc.com
</p>
</address>
</aside>
{% endblock %}- partials/nav.twig
<div class="pure-g">
<div class="pure-u-1">
<div class="pure-menu pure-menu-horizontal">
<a href="{{ path_for('home') }}" class="pure-menu-heading pure-menu-link">Alpha Inc</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="{{ path_for('home') }}" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="{{ path_for('about') }}" class="pure-menu-link">About us</a></li>
<li class="pure-menu-item"><a href="{{ path_for('contact') }}" class="pure-menu-link">Contact us</a></li>
</ul>
</div>
</div>
</div>- partials/footer.twig
<footer>
2016 © Alpha Inc. All rights reserved | Designed by <a href="http://zooboole.me">zooboole</a> for lancecourse.com
</footer>Conclusion
This looks like a lot source code, but it basically a work of some 25 to 30 minutes. The main thing you should focus on is the logic of the site which involves the bootstrap/app.php file and dependencies.php, routes.php, and the settings.php files.
One of the most important things you should deeply learn is how to add dependencies to your slim app. It's actually what is complicated in using Slim 3. In the next part I will be showing you how we can handle our route callback functions with controllers.
My source code is available on github, please download it to compare it to your own work. Please if there is anything you don't understand, just ask under the tutorial by commenting.
Last updated 2024-01-11 UTC