How to integrate MDBootstrap with Django?

Since I've met MDBootstrap three years ago, I've tried to integrate it with a lot of technologies. Some of them were WordPress, Laravel, Hapi.js or even Apache PhoneGap. Recently, I was thinking about integrating MDB with one of my favorites - Django.

What is Django?

Django is a framework built with Python. It allows creating advanced projects extremely fast. Django has a lot of cool features built-in. Thousands of developers also create their own plugins that make the Django-based projects even better. It can be used everywhere - as a simple blog, professional online store or - thanks to Django Rest Framework - this can also run your own API.

Getting started

Before we get started, we need to install a couple of things. For the first, make sure you have Python 3 installed on your computer. If you wish to use Python 2 - feel free to do that. Personally, I prefer py3. I'm running Mac OS High Sierra, so I already have Python 3 installed. If you're not sure if you have it too, open terminal and type:

python3 -V

For me, the result is "Python 3.7.0". If you don't have a Python 3 installed, you'll find a guide dedicated to your operating system here.

The next step is installing virtualenv. Virtualenv is a tool that allows you to create isolated Python environments. It means you can use totally different packages or even different python versions for each project. To install Virtualenv, in your terminal simply type:

pip install virtualenv

After then you can create your first virtualenv. For the first, you need to obtain your Python location:

As you can see, for me the Python 3 location is /usr/local/bin/python3 so I'm gonna finally create my virtualenv by typing:

virtualenv -p /usr/local/bin/python3 env

Once the virtualenv was created, we need to activate it:

source env/bin/activate

Notice that your command prompt has changed - the (env) was added to the start of it. This means you've activated your environment properly and you can work with your project now. If you want to turn it off, just use the command `deactivate`.

Now, we gonna install Django. To do that, run:

pip install Django

Starting the Django project

So far, we've created our virtual env and installed the Django framework. Now, we can finally create our first project! Again, back to your terminal and type:

django-admin startproject mysite

You should see that Django has automatically created the directory structure that looks like this:

manage.py is a CLI utility that allows interacting with our Django project

The second (inner) mysite/ it's actually our project. This is where we store our whole Django configuration

mysite/__init__.py is empty, but the important file. It's information that this directory is a package is a Python package

In mysite/settings.py, you can find mentioned settings for our project

mysite/urls.py controls the URL declarations of our Django project

mysite/wsgi.py is an entry-point for web servers. We won't focus on it right now

By cd mysite open the newly-created project in your terminal. Now we'll verify if our Django bases projects actually work. To do that, run the following command:

python manage.py runserver

If everything is well, you should see the following result:

Performing system checks...
System check identified no issues (0 silenced)
You have 15 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
December 19, 2018 - 09:20:52
Django version 2.1.4, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

As you can see, there's a message that says about unapplied migrations, but don't worry. That's normal for new projects. The message will be visible every time you type the "runserver" command until you do a migration. What's important - Django has started the server on the address http://127.0.0.1:8000/. Please try to open this address in your browser. As a result, you should see a screen that looks like this:

Starting the first app

Now, we need to create an app, but hey - didn't we've just created an app yet? No, we didn't. We've started a new project. What's the difference? A project is like a kind of wrapper for our all apps. We can't start a new project inside a project, but we can create as many apps inside project as we want. For testing purpose, we'll call our app "posts" so in your console run the command:

python manage.py startapp posts

As a result, Django created new files for us so now the directory tree should look like this:

If your directory tree looks like this, go to mysite/settings.py and find the section named INSTALLED_APPS. At the end of this array add entry 'posts'.

Creating the first view

Now it's time to create our first view! Before we do that, in the posts directory we need to create a new directory that names templates. Then, in the newly-created directory, create an HTML file. You can call it anyhow you want. For this article, I've named it "index.html". Now paste the following code to your index.html file:

When you refresh your browser, this time the result should be nicer than before:

It's so much better, right?

The other way

You might ask "hey, I'm a pro user, how can I use MDB Pro in my Django project?". That's a great question. Currently, MDB doesn't offer CDN for its premium versions, but that's not a problem. Just go back to your project and inside your posts directory create a new one and name it static. Then, copy the content of the MDB package to the static directory. Now go back to the index.html file. We need to modify it again. The first thing you need to do is add the following code just before the CSS imports in the HTML file:

Now, restart your server. When you run it again, the result should be the same as previously. Also if you're an MDB Pro user, you've got some superpowers that come from MDB Pro package. Let's try some MDB Pro features in our project. For making sure that everything is working, we'll try to implement one of the hardest components from MDB - the Lightbox. In your browser go to mdbootstrap.com and on the side nav, click on JavaScript and then on the LightBox.

Find an example that you like and copy-paste its HTML code to your template file. Now, in your editor scroll down to the end and after mdb.js add the following code: