An excerpt from http://www.sitepoint.com/record-retrieval-pagination-bolt-cms/, by @callmenick
Bolt is a lightweight CMS built on Silex with Symfony components that’s fast, easy, and fun to develop with. My recent affinity for Bolt has turned it into my CMS of choice as I make a conscious effort to choose wisely and step away from bloated frameworks. Previously, I gave a very detailed insight into what it’s like developing with Bolt.
Today, we’re going to break down a very popular task into steps in order to accomplish it with ease. Here’s what we’ll be doing:
- We’ll create a content type for news articles to include a title, excerpt, featured image, and body.
- We’ll retrieve the news articles, and display them “blog” style, including pagination.
- Each news article in the feed will link to its dedicated page, where the full article will be displayed.
- On the full article page, we’ll generate links to previous and next articles.
Before we dive in, let’s outline the path we’ll take to make it all happen. First, we’ll grab a fresh install of Bolt via Git and Composer. We’ll be using an SQLite file-based database, as it’s ready to go out of the box and requires no configuration. For quick front-end templating, we’ll pull in a free Boostrap theme from Bootswatch. Bolt leverages Twig, which is a modern templating engine for PHP, so we’ll build a quick theme from scratch using Twig markup. Once we’re all set up, we’ll create our content type, add in some dummy data, and output it onto a page. We’ll keep adding dummy data until we have enough to apply paging, then we’ll link to individual articles and generate previous and next links. Without further ado, let’s dive in!
Installation
As an environment, we’ll be using our own Homestead Improved but you’re free to use your own local configuration. This post will continue under the assumption that you have Composer installed globally, and have pointed a virtualhost to the appropriate folder generated by the commands below.
To install, we execute:
git clone git://github.com/bolt/bolt bolt
cd bolt
git checkout v2.0.6
composer install
At the time of writing, version 2.0.6 is the stable branch. If you see any permission errors, you’ll need to reset a few directories by running the following command:
chmod -R 777 files/ app/database/ app/cache/ app/config/ theme/ extensions/
If you visit the CMS’ interface in the browser now, you should be presented with the “create user” screen. This will register the first user in the database and grant you access to the admin portal, where we can edit configuration files, set up content types, add content, and switch themes. Create that user, and log into the admin portal by going to /bolt. Check out the front end too – you should see Bolt’s default theme being displayed. Let’s move on to setting up and building our own theme.
A Quick Theme Setup
Since we’re not going to focus much on the overall visual appearance of our test site, I won’t go in depth with front end stuff. What we will do, however, is create our own theme quickly using the Cosmo Bootstrap theme from Bootswatch, and break some of our files up into reusable partials. Inside the theme directory, create a new directory called my-theme, and create a new file called index.twig. Let’s leave it blank for now, and hop into the admin end of things.
Navigate to Configuration → Main configuration, and take a look around. A lot of your site’s options can be tweaked here. As mentioned before, we’re using SQLite out of the box, so there’s no need to change the database settings. Feel free to edit the site name and payoff, but switching the theme name is more important to us right now. Scroll down to the theme section, and switch it to my-theme. That’s all we’ll need to do in our main configuration file, so save it, and let’s get back to our index.twig file.
Using some of Bootstrap’s classes, here’s what I came up with to get us started (don’t use this code just yet – we need to break it up):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Site</title>
<link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css">
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Site</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
</div>
</nav><!-- /nav -->
</header><!-- /header -->
<main>
<div class="container">
<h1>Welcome to my site</h1>
<p class="lead">All the latest news, tips, and tricks for Bolt CMS.</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ratione veniam esse earum, voluptatem itaque in aut reprehenderit nostrum aspernatur minus. Iste iusto, id expedita esse? Dolorem, iusto, ipsam. Incidunt.</p>
</div>
</main><!-- /main -->
<hr>
<footer>
<div class="container">
© 2015, My Site
</div>
</footer><!-- /footer -->
</body>
</html>
Of course, this isn’t really reusable. We’re going to want to break this up into partials so that we can include the main chunks in other templates. Because our site is simple, we’ll only need two:
_header.twig
_footer.twig
You’re free to name your partials whatever you want, but the Bolt convention is to underscore names to represent partials. Here’s what our _header.twig partial will look like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Site</title>
<link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css">
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Site</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
</div>
</nav><!-- /nav -->
</header><!-- /header -->
<main>
<div class="container">
And here’s the footer.twig partial:
</div>
</main><!-- /main -->
<hr>
<footer>
<div class="container">
© 2015, My Site
</div>
</footer><!-- /footer -->
</body>
</html>
Now, we can restructure our index.twig file and any future templates to include the partials like this:
{% include '_header.twig' %}
<h1>Welcome to my site</h1>
<p class="lead">All the latest news, tips, and tricks for Bolt CMS.</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ratione veniam esse earum, voluptatem itaque in aut reprehenderit nostrum aspernatur minus. Iste iusto, id expedita esse? Dolorem, iusto, ipsam. Incidunt.</p>
{% include '_footer.twig' %}
Refresh your browser, and you’ll notice that all is still intact – only we’re now using partials. Before we continue, you should take note that there are two ways to generate templates using Twig:
The first is using includes, like we’ve done above. This is the default method in the Bolt documentation.
The second is using template inheritance, which allows you to build base skeletons and have other template files extend it, injecting content into various blocks.
For this tutorial, we’ll stick with the default includes method, but I do recommend reading and learning about template inheritance, as it’s quite powerful. Let’s move on to creating content types.