Recent Blog Posts

Build a blog with Drupal 8: Part 3

By Ronald van Belzen | March 25, 2016

I installed Bootstrap 3 for Drupal as the theme for my blog, but I want to change and add some minor things to that theme. For that purpose Drupal 8 offers the sub-theming mechanism. A sub-theme is a theme based upon another theme. Because I will base my sub-theme upon Bootstrap, I will call my sub-theme "My Bootstrap".

My Bootstrap sub-theme

In the directory "themes", in which I had already installed the Bootstrap theme, I create a new subdirectory "themes\mybootstrap". In that subdirectory I create a new empty file "mybootstrap.theme" and a file "mybootstrap.info.yml" with the following content:

name: 'My Bootstrap'
type: theme
description: 'My adaptation of the Bootstrap 3 theme.'
core: 8.x
base theme: bootstrap

regions:
  navigation: 'Navigation'
  navigation_collapsible: 'Navigation (Collapsible)'
  header: 'Top Bar'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_first: 'Primary'
  sidebar_second: 'Secondary'
  footer: 'Footer'
  page_top: 'Page top'
  page_bottom: 'Page bottom'

The line "base theme: bootstrap" tells Drupal that this theme is a sub-theme of bootstrap. The regions contain exactly the same regions as the Bootstrap theme on which it is based. This sub-theme is now an exact copy of Bootstrap.

The first thing I want to change is to add some CSS files to the sub-theme. For this I downloaded and saved the fontawesome toolkit to sub-theme subdirectory and in the new subdirectory "themes\mybootstrap\css" I placed a new empty file "mybootstrap.css" for later use.

To make fontawesome and my (still empty) css file available to the sub-theme I add the following to the "mybootstrap.info.yml" file:

libraries:
  - 'mybootstrap/font-awesome'
  - 'mybootstrap/mybootstrap-theme'

The locations of these libraries are defined in the file "mybootstrap.libraries.yml" in the subdirectory "themes\mybootstrap":

font-awesome:
  css:
    theme:
      css/font-awesome.css: {}
mybootstrap-theme:
  css:
    theme:
      css/mybootstrap.css: {}

We are going to use these css files to facilitate some of the changes in the sub-theme.

Build a blog with Drupal 8: Part 2

By Ronald van Belzen | March 24, 2016

I concluded the previous part of this blog with the message that we are not finished yet.

One of the first problems that I am going to tackle is to not display the friendly message of Drupal that "No front page content has been created yet". I would like to install the module Empty Front Page, but it is not available for Drupal 8 yet at the moment of this writing. For that reason I am going to build my own solution by building my own module. I have decided to call that module "My Empty Front Page".

My Empty Front Page

The directory in which I will place the sources is a subdirectory of the module directory: "module\custom\my_empty_front_page". In that directory I first create a file "my_empty_front_page.info.yml" that will provide the Extend page in the Administration section of my site with information about this module.

name: 'My Empty Front Page'
type: module
description: 'My empty front page for Drupal 8 (removes all front end page content when Default front page points to /empty)'
package: Other
version: 1.0
core: '8.x'

Next I need to inform Drupal what controller function to call by creating a routing file with the name "my_empty_front_page.routing.yml" in the same subdirectory.

my_empty_front_page.content:
  path: '/empty'
  defaults:
    _controller: '\Drupal\my_empty_front_page\Controller\MyEmptyFrontPageController::emptyContent'
  requirements:
    _permission: 'access content'

The routing file tells Drupal that for the path '/empty' the controller "MyEmptyFrontPageController" function "emptyContent" needs to be called. The permission tells that the same access permission as for viewing content is to be used. I still need to program that controller in the file "MyEmptyFrontPageController.php" that will be placed in the subdirectory "module\custom\my_empty_front_page\src\Controller".

Build a blog with Drupal 8: Part 1

By Ronald van Belzen | March 23, 2016

A blog might not be the most challenging CMS type that you can build, but for that reason it might be the best first introduction to a new CMS. Not that I would not need a blog. In fact I want to replace my existing blog and at the same time want to get to know Drupal 8. Having a blog already, that I want to replace, makes it easy to define the requirements for the blog Let's write them down and see how Drupal 8 is able to deliver.

Blog requirements

  1. Create blog posts with title, subject and an optional featured image.
  2. The ability to categorize and browse through content by topics.
  3. Basic search functionality.
  4. A tool for authoring content with a WYSIWYG editor that also supports the display of coding examples.
  5. Listing teasers of the blog posts on the front page sorted by date posted; with a pager (showing 5 topics per page)
  6. Browse the blog posts by category.
  7. Visitors must be able to comment on blog posts.
  8. The blog site needs to be responsive.

Now let's see how Drupal 8 meets these requirements.

Installing Drupal

I am not going to describe how to install Drupal. It is just beyond the scope of this blog post. You can find an installation guide on the Drupal site. The operating system, webserver and database you choose do not really matter for this article. But just in case you are curious: I used Windows 7, IIS 7.5 and MySQL 5.6.

I also assume you can find out how to install themes and modules yourself. You can find this information also on the Drupal site.

Drupal 8 comes with the theme called Bartik installed. The first thing I did was to download, install and set as default the Bootstrap 3 for Drupal theme. I will show how to make a sub-theme based upon this theme lateron, but for now I have met requirement 8 without having to build my own theme.

Categorizing blog topics

For meeting requirements 2 and 6 we are going to use taxonomy (which is part of the Drupal 8 core).

CLinkPager and first page and last page display

By Ronald van Belzen | February 7, 2015

When showing content with CGridView or CListView a pager is included. This pager shows the navigation for 10 pages and a next page and a previous page link.

What is not shown by default are the first and last page links. The simplest way of displaying these links, when you need them, is by overriding the class associated to these links. Below an example is shown for a CListView.

<?php 
$this->widget('zii.widgets.CListView', array( 
  'id'=>'bbiiTopic', 
  'dataProvider'=>$dataProvider, 
  'itemView'=>'_topic', 
  'template'=>'{pager}{items}{pager}', 
  'pager'=>array('firstPageCssClass'=>'previous', 'lastPageCssClass'=>'next'), 
)); ?>

The firstPageCssClass and lastPageCssClass are the values that are overridden.

This is very much a short cut. The proper way to do it is to overwrite the CSS yiiPager.first and yiiPager.last and not to override the pager in a CListView or CGridView at all.

RESTful PHP server API

By Ronald van Belzen | October 12, 2013

There are plenty of manuals on how to make your own RESTful PHP server on the web. One that I found particularly useful was Create a REST API with PHP. It explains the nuts and bolts of how to create a RESTful server with the use of PHP and in some aspects it goes beyond the example I am going to show here, which was inspired by that approach.

Even more useful I found the "RESTful Service Best Practices" manual that can be downloaded from http://www.restapitutorial.com/resources.html.

The index.php file

It is good practice to rewrite the request that needs to be handled by the index.php script. In this approach I placed the index.php file in its own subdirectory (I named that directory "api") together with the following .htaccess file:

RewriteEngine on 
RewriteRule ^images/.*$ - [L] 
RewriteRule ^js/*.js$ - [L] 
RewriteRule ^css/*.css$ - [L] 

# if a directory or a file exists, use it directly 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 

# otherwise forward it to index.php 
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

When you are not using an Apache server, or an alternative that can handle .htaccess, modern PHP offers a solution as I hinted at in a previous blog. I admit, the blog post does not explain how php.ini can mimic .htaccess functionality, but it can. Although, I have to admit, I have never experimented with that myself.

The rewrite rule in the above .htaccess file will cause requests like http://localhost/api/test to be rewritten to http://localhost/api/index.php/test. So let's start with the index.php that needs to handle this request.