Setting up DG3 as a CMS

Using the hello world example, we can extend this to use it as a simple CMS system. Since most user not are designers or have access to one that is, we are going to focus on the getting the applications to do what we want and not the design and looks of them. However we do not want ugly web sites, so we will do the second best and use a framework to help use with the basic styling and looks of the web sites we are going to build. One such framework and the one we are going to use is Bootstrap 3. This is a  modern design toolbox that comes installed with DG3. 

What is Bootstrap

Bootstrap 3 as used by DG3 is a modern framework created by Twitter. The previous version is used by a large number of web sites all around the world and more and more new sites are taking up on using version 3. It is free to use in a very liberal license. All components that are directly added to DG3 have licenses that can be used by all that have a valid DG3 license. Actually most of the components used by DG3 can by downloaded and used for free by anyone, the DG3 team are just locating them, evaluating them and integrating the best of the best for you. Bootstrap 3 is responsive, mobile first, light weight and simple to use. It is easy to change and style, but we will mostly just stick to the defaults in this book. I leave it to you users to distinguish and change the appearance of these example applications to not look like yet another bootstrap site.

Turning on Bootstrap

As most functionality in DG3, Bootstrap is delivered as dynamic component that you can turn on and off. Bootstrap is a module and can be found in application settings under the module tab. It will activate a lot of new functionality that can be used by a web developer and make sure you always have an updated version when you install new versions of DG3. Just locate the module, make sure it is turned on (button or double click) by looking at the the color of the light bulb is yellow, and save settings. All changes that you turn on and off in application settings are not activated until you press the save icon in the toolbar. The reason for this, is that activating a module will involve copying files and adding new graphical tools to DG3. Nothing of this is done unless you press save.

To go to application setting

To save changes.

DG3 template system

Now that we have turned on bootstrap, the next thing we will need to do is to add it to all pages where we are going to use it. Instead of doing this on all individual pages, we are going to use the template system in DG3. The templates are a kind of wrapper where the pages like the hello world one is loaded. When you create a new DG3 application, two different templates are created automatically, the base and empty template. The base are the one used as default, and empty is as the name implies a template with no content except the one you add to your page.Templates are very useful to add all elements that are going to be on every page, but first we are only adding the basic elements needed to load bootstrap and what we need to support pages.

First go to site definition. This is where you will find the template editor.  Double click the one called base and the default base template will show up in the html editor to the left of the navigator.

The templates is basically a simple html base page with a few extras. The one shown in the picture contains the bare minimum xhtml base for a direct template with the extra block definitions used by the DG3 template system. The DG3 template system is an extended version of the one found in the Django framework, so every thing you can do in Django, you can do in DG3. Direct type template, means that you are doing direct template rendering. Later we will look into other modes as well, but direct means that we use the same tags as in Django and the templates are not transformed by the DG3 application generator. Don't worry to much about that for now, it will become clearer later.

The structure of the template is

• HTML definition
• html
  
  • head
    • extra-head block
    • fixed element
    • title block
    • extra-head-bottom block
  • body
    • main container
      • content block

The reason I am writing it like this, is that this is how a browser will see it. This is called a DOM tree. In many respects, it is important to understand this structure to understand how the manipulation of elements are done. Each leaf in the DOM three has a start and an end tag. A start tag should always have the end tag. If not strange errors might happen on your pages. For now the important parts are the one defined as block elements. These are the ones that define what is pulled in from the pages we are going to create, so it is important that these are keep in your template. The order and placement in relation to the parent tags are also important. The extra-head, title and extra-head-bottom should always be contained inside the head tag in that order. The content block should always be in the body somewhere. As long as you follow these simple rules, you can do what ever you like as long as it is valid html.

Changing the default template to use Bootstrap

So what is needed to get Bootstrap up and working in our template. Just replace it with this one and mark jquerycore as added in "Exclude havascript" on the right of the editor:

<!DOCTYPE html>

<html>
<head>
{% block extra-head %}{% endblock %}
	<link rel="stylesheet" href="{{ media_url }}css/style.css" />
	<title>{% block title %}{% endblock %}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Bootstrap -->
	<link href="{{ media_url }}bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
	<script charset="utf-8" type="text/javascript" src="{{ media_url }}js/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="{{ media_url }}bootstrap/js/bootstrap.min.js"></script>
{% block extra-head-bottom %}{% endblock %}
</head>

<body>
{% block content %}
{% endblock %}
</body>
</html>