Unleash the Power of Django CMS

Introduction

Django is a powerful Python-based web framework, that allows developers to get a web application up and running quickly. It's amazing for building web applications, with large amounts of data, but it lacks the basic features of a content management system. Django CMS is an add-on to Django that provides this functionality. This Django CMS tutorial for beginners will help you to learn how to unleash Django CMS power that helps to build an easy-to-use, easy-to-maintain website.

1. Installing and Configuring Django CMS

1.1 Why Django CMS?

Django is great for data-driven web applications. It makes it very simple for e-commerce sites with large product catalogs or news site that publishes multiple articles daily. But, Django lacks the ability to create standalone pages from the admin system such as for smaller website with just a few pages of content about their services which needs to be updated every once in a while. This isn't convenient for a business owner, they need to call up their developer every time something needs to be changed. There are a lot of CMS options like WordPress. It's easy for non-developers to get a site up and running. The problems arise when you want to customize how your content is laid out on your page. It’s great if you're writing a blog post, but on a static page, there may be specific areas of content you'd like to edit independently of any other. You may accomplish this with WordPress by writing shortcodes but these are often complex and confusing to create. So,"Why Django CMS?". We ’ll discuss this and the main principles behind Django CMS with the help of a real scenario by developing a website for friend’s pizza restaurant.

Some of the content on his site are his menu items and his daily signature specials. This has been a pain point for him as he wishes to edit his menus every few weeks and his daily specials on a daily basis. Both of these pieces of content currently reside in the same large content area. In order to preserve the layout of the page, HTML code has to be placed inside the content area. What he'd really like is a way to edit his menus and his daily specials independently from one another and not risk breaking his homepage. Here's where we finally get to know why we would use Django CMS over others, it allows us to custom-build individual content areas that are completely independent of one another. We can define the type and the quantity of content that can be placed in these areas, it significantly reduces user error. Django CMS integrates seamlessly with Django's existing functionality so you'll continue to get the fantastic data processing it already provides.

1.2 Installing Django CMS

So now let's get started with Django CMS and create a new site. The first thing we need to do is set up our development environment. We'll be using a package called virtualenv to set up a virtual environment for our project, making it isolated from any other projects that we may be working on. If you don't already have virtualenv on your machine, you can install it using PIP.

Let's create a directory for our project and navigate to that now.

Let's name our project rafs_pizza. Navigate inside the directory we've just created, then create your virtual environment.

This will give a clean environment to start with. Next, we're going to activate the environment. We do this by typing

The name of the environment now shows up next to our user information, which indicates that we're operating under that virtual environment.

The creators of Django CMS provided an installation tool that greatly speeds up the process of getting all of Django CMS's dependencies installed. It also sets up our Django project for us. After the virtual environment is activated. Then type in PIP install djangocms-installer. Let's quickly make another directory for our actual Django project to go in. This way the virtual environment isn't inside our Django project.

Once you're navigated inside, we can run the installer.

The installer will run through a series of options for setting up and configuring our project. Once you've gone through all the installer options, it will create your project for you. It will ask you to enter a username, email, and password for your admin user. You can make these whatever you'd like. Once it's finished, you can run the Django server, open up a browser, and navigate to 127.0.0.1:8000 and the project will be up and running and now you're ready to start developing.

2. Page Templates and Placeholders

2.1 Login and Page Creation

The Django CMS installer created a starter page for us that we use to log in to the admin system. You can also log in from any page by putting a ?edit at the end of the URL. This will bring up the toolbar and you can log in from there. This toolbar is available on all pages when logged in and provides useful links to the various parts of the system.

After logging in, you'll see an Installation successful message. Below that, you should see a box that says, “Add your first page”. So, we'll add a new page now. Here, you can enter a title and content for your page and now we've got a page with which we can start working with.

2.2 Putting Content into Placeholders

There are two views in edit mode, Structure, and Content. Content will show you a preview of how the page will look like with your edits. The structure shows you all the places where you can edit the content on your page. These are the visual representation of the page's content placeholders. You can add, edit, and delete content plugins from here.

2.3 Creating a Page Template with Content Placeholders

Let’s start developing by opening up the Django Project Directory in any code editor.

Locate the templates folder under rafaels_pizza. The base.html file is the master file for our project. It's the one that all the other templates are going to be extending. The other three templates are generic layout templates that Django CMS provided by default.

Now we're going to create a template for our homepage i.e. home.html. This file must be in this same template folder. Now, we replicate one of the templates files into our home.html. There would be two main pieces of content that we would like to have i.e. daily specials and menus. We're going to create content placeholders for those two pieces of content. We then need to register our template in the settings.py file for our Django Project. Then, when we go to create a new page, our template should show up under the Templates drop-down. Open the Django Projects Settings file and search for cms_templates. Here, we see the entries for the default layout templates. On the left is the template file name, and on the right, is the template name that should appear in the template drop-down. Similarly, we type in home.html, Home. After saving this file, switch over to the admin system in our browser.
base.html

home.html 

settings.py

2.4 Assign a Template to a Page

After refreshing, navigate to Page->Templates, and you should see your new homepage template in the list. Click on it to assign this template to this page.

Clicking on Structure in the right-hand of the toolbar will show us those two new placeholders that we created, our Daily_Specials, and Menus. We may add any content to these placeholders using the plugin. To add some text, use the Text Plugin, for pictures the Picture Plugin and so on. Then after publishing these changes we see our content on the page. These two pieces of content are able to be edited individually from one another, editing the Daily Specials will have no bearing on the Menus.

2.5 Static Placeholder

We might want some content that is going to be consistent throughout the entire site, say the logo at the header and some information in the footer and also want them to be editable in future. For these pieces of content, Django CMS provides what's called a static placeholder. These placeholders are visible and edited from every page of the website and we add them in base.html. Making a static placeholder is really similar to making a regular placeholder, we just simply put static_placeholder instead of just placeholder.
Let's add the static_placeholder for logo and footer. The footer placeholder goes right underneath the content block.

base.html

Save the file and then head back over to the browser. Refresh the browser and we should now see those placeholders showing up in the structure view of the page. The little pin icon next to it indicates that it's a static placeholder and is available on every page of the site.

We can put a logo inside the logo static placeholder using a Picture Plugin and then add some information in the footer. So, it doesn't take much to get your content into the Django CMS system. Just a matter of a couple of lines of code for your placeholders and you're up and running.

3. Create Content Plugins

3.1 Building a Plugin

Now we'll be designing and building content plugins to go inside the placeholders like we created earlier.
By better defining the type of content that can go in each placeholder, and designing that content's look and feel, we'll be able to further enhance our website.

Let's create a content plugin that's optimized for displaying this kind of content. Open up a terminal window and start a new Django app. Type in-

Now, under setting.py find INSTALLED_APPS and add rafs_pizza_plugins to the bottom of the list.
settings.py

Open up the models.py file inside the rafs_pizza_plugins app. Here, we'll define the data structure for our plugin the same way we would any other model in Django. The difference here, however, it won't be extending the models.model class like we normally would. Instead, we'll need to import the CMS plugin class. Then, we will configure the plugin's metadata by the class Meta and we'll want to define a verbose name of DailySpecial, and then verbose_name_plural of Daily Specials. Lastly, we'll add the Unicode function so our daily special instances are more user-friendly when displayed in a list and save the file.

models.py

Then we'll head back to the terminal and type in

 This will create a migration file for our app. Once it's done creating the file, type in

 This will go ahead and create our tables in the database.

In a normal Django app, we have a views file for processing our web requests. In our content plugins app, the views file is called CMS plugins.py. Rename the views.py to cms_plugins.py, and open the file. Remove the default code and import CMSPluginBase and plugin_pool. Then, import the models we just created. Now, we'll create a class for our plugin, class Daily_Specials_Plugin, and this will be extending from CMSPluginBase.

We also define a render function that will build our context dictionary with the data we want to pass to the template. With this, we're going to be updating our context object with the user inputted data. So we'll do context.update.

Then the last thing we need to do in this file is registering the plugin. So, we're going to do plugin_pool.register_plugin, and then the name of our class, which is Daily_Specials_Plugin and save the file, Now we're going to create that template file that we referenced. So, let's create a templates folder inside rafs_pizza_plugins, and inside that, we're going to create a file called daily_special.html. Similarly, we can do for our plugin i.e. menu_items.

cms_plugins.py

daily_special.html

Finally, if we want to limit the list of plugins available in the placeholder drop-down we can do that using the CMS_PLACEHOLDER_CONF in the settings.py. It can be also used to restrict the number of times a plugin can be used with the help of global key in the limits dictionary.

3.2 Styling Page and Plugins

Some CSS styling will spruce up our website. Inside the static directory lets create a CSS directory and under this create a main.css file.  Now, let's link up this CSS file with our base.html template like the way that the Django system requires us to by using the static template tag i.e. by adding the link tag in the base.html
<link rel="stylesheet" href="{% static 'css/main.css' %}">
main.css

Conclusion

Hopefully, from this Django CMS documentation, you have experienced that it's an easy framework to jump into especially if you already know how Django works. It has the ability to create fully functional websites and get up and running quickly. Now, you should be able to take what you've learned and used it to explore Django CMS further.