MDB 5 Django Integration
MDB 5 Django integration
This article shows you how to integrate Django backend application with MDB Standard UI Kit.
This guide will walk you through steps necessary to include MDB package in your Django project and to add some basic setup for your project.
Prerequisites
Before starting the project make sure to install the following utilities:
Creating a new Django application
Let's create a fresh Django application so we can go through all the steps together. For this tutorial we'll be using MySQL database.
Step 1
Creating a MySQL database
In order to create a new database you need to run the following command
mdb database init
- Choose
mysql8 - Create a new user
- Provide username, password, database name and description.
CLI will display your username, password, database name and connections string. Now you can go to phpMyAdmin where you will be able to handle the administration of the MySQL database.
Note Note: Your final username and database name may differ from your inputs. MDB GO may add some characters to randomize username and database name.
Important Do not close your terminal window until you save your credentials somewhere. This is the only time we will show you your database password. If you won't save it you'll loose it.
Step 2
Creating Django API.
Install Django on your computer.
Note: If you are getting errors, try typing these commands in cmd instead of in the VSC terminal or check your Python environment settings.
python3 -m pip install django
py -m pip install Django
Step 3
Now we have to install the necessary modules that are needed for the Django backend to work properly.
To create Django web API we will need Django Rest Framework. We should also install module that will be responsible for handling CORS issues in our developement application.
pip install djangorestframework
pip install django-cors-headers
Step 4
Navigate to your project directory, i.e. my-django-app.
Let's create a Django project by typing the code below. We are naming our project as exampleApp but you can go with whatever you want.
django-admin startproject exampleApp
Step 5
Now that we have the project installed, let's create a new app in which we will put all the functions we will need. Navigate to the newly created directory with django project and enter the following the code.
cd exampleApp
python3 manage.py startapp toDoApp
cd exampleApp
py manage.py startapp toDoApp
Step 6
Register the app and new modules in settings.py. If you are not sure about the name of your app, go to toDoApp/apps.py and copy the class name. We have to register corsheaders in middlware section aswell.
...
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'corsheaders',
'toDoApp.apps.TodoappConfig'
]
CORS_ORIGIN_ALLOW_ALL = True
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
...
Step 7
Now we have to create a model needed for our app. We need id field which value will be autofilled. We also need name and desc with the max length set as below.
from django.db import models
# Create your models here.
class Tasks(models.Model):
id = models.AutoField(primary_key=True)
name = models.CharField(max_length=60)
desc = models.CharField(max_length=255)
Step 8
Django requires installing mysqlclient in version 1.4.0 or higher so it can work with MySQL properly. Without it, you wouldn't be able to communicate with database and manipulate its contents.
pip install mysqlclient
Step 9
Go to settings.py, go to DATABASES section, and add the database connection details. Change the values between brackets for the ones you got after creating a new MySQL Database from our starter.
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': '[Your database name]',
'USER': '[Your user name]',
'PASSWORD': '[Your passowrd]',
'HOST': 'mysql.db.mdbgo.com',
'PORT': '3306'
}
}
Step 10
Make migration with our models to the database.
python3 manage.py makemigrations toDoApp
py manage.py makemigrations toDoApp
Step 11
Check toDoApp/migrations/0001_initial.py if everything is correct and then migrate the data. Now you can see the changes after logging to https://phpmyadmin.mdbgo.com/
python3 manage.py migrate toDoApp
py manage.py migrate toDoApp
Step 12
Open views.py and start working on API methods we'll be using. We are going to create GET and POST endpoints that will support the functionality of the front-end app.
from django.shortcuts import render, redirect
from django.views.decorators.csrf import csrf_exempt
from toDoApp.models import Tasks
# Create your views here.
@csrf_exempt
def TaskList(request):
if request.method == 'GET':
tasks = Tasks.objects.all()
context = {'tasks':tasks}
return render(request, 'index.html', context)
if request.method == 'POST':
id = request.POST.get('id')
if id == '':
task = Tasks.objects.create(
name = request.POST.get('name'),
desc = request.POST.get('desc')
)
task.save()
return redirect('tasks')
else:
task = Tasks.objects.get(id=id)
task.name = request.POST.get('name')
task.desc = request.POST.get('desc')
task.save()
return redirect('tasks')
def TaskDelete(request, pk):
task = Tasks.objects.get(id=pk)
task.delete()
return redirect('tasks')
Step 13
Create a new urls.py file where we will define routes for our API methods.
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('toDoApp.urls'))
]
Step 14
Add new path to urls.py in the main project directory.
from django.urls import path
from toDoApp import views
urlpatterns = [
path('', views.TaskList, name='tasks'),
path('<str:pk>', views.TaskDelete, name="delete"),
]
Step 15
In toDoApp directory create templates directory and create file index.html inside it. Paste there code from the snippet below as placeholder content.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Material Design for Bootstrap</title>
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
</head>
<body>
<div class="container py-4 px-3 mx-auto">
<h1>Hello, MDB and Django!</h1>
<button class="btn btn-primary">Primary button</button>
</div>
</body>
</html>
Step 16
Now we can make migrations, restart the server and go to http://127.0.0.1:8000/. You should see
unstyled placeholder page there.
python3 manage.py makemigrations
python3 manage.py migrate
python3 manage.py runserver
py manage.py makemigrations
py manage.py migrate
py manage.py runserver
Install MDB
In this section we will add MDB styles and JavaScript files to the example page.
Step 1
From base project directory type the following command in the terminal.
It will change directory to toDoApp and initialize MDB CLI. From the list of starters select mdb5-free-standard.
cd toDoApp
mdb init
Step 2
Change name of created folder from mdb5-free-standard to static.
Step 3
At the beginning of index.html file add {% load static %} and in the head import static CSS files.
{% load static %}
<link href="{% static 'css/mdb.min.css' %}" rel="stylesheet" type="text/css"/>
Step 4
At the end of body tag in index.html file import static JS files.
<script src="{% static 'js/mdb.min.js' %}"></script>
Now you're done
With MDB's CSS and JS fully loaded, after restarting the server your example page should work and you should see MDB styles applied to its content.
To Do App with MDB
In this section we will present capabilities of Django used with MDB package by creating example To Do App.
Step 1
Change content of the body tag in index.html file to content of the snippet below but don't remove script tag that imports JavaScript files.
<div class="container mt-5">
<!-- Button trigger modal -->
<div class="row pt-5">
<div class="col text-center">
<button class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#TaskModal" id="addTaskButton">Add task</button>
</div>
</div>
<!-- Modal Add -->
<div class="modal top fade" id="TaskModal" tabindex="-1" aria-labelledby="TaskModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="taskModalLabel">Add task</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<form action="/" method="POST" id="taskForm">
<div class="modal-body">
{% csrf_token %}
<div class="form-outline mb-4">
<input name='name' type="text" id="editNameInput" class="form-control"/>
<label class="form-label" for="editNameInput">Name</label>
</div>
<div class="form-outline mb-4">
<input name="desc" type="text" id="editDescInput" class="form-control">
<label class="form-label" for="editDescInput">Description</label>
</div>
<input name="id" type="hidden" id="taskId" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
<button type="submit" class="btn btn-primary" id="confirmButton">Confirm</button>
</div>
</form>
</div>
</div>
</div>
<!-- List of tasks -->
<div class="row mt-3 p-5">
<div class="col d-flex justify-content-center align-items-center">
<ul class="list-group list-group-light" style="min-width: 22rem;">
{% for task in tasks %}
<li class="list-group-item d-flex justify-content-between align-items-center gap-5" id="{{task.id}}">
<div>
<div class="fw-bold name">{{task.name}}</div>
<div class="fw-bold desc">{{task.desc}}</div>
</div>
<div class="d-flex align-items-center">
<a class="btn btn-primary btn-floating me-2" data-mdb-toggle="modal" data-mdb-target="#TaskModal" onclick="setModalValues('{{task.id}}')">
<span class="fas fa-pen text-white"></span>
</a>
<form action="{% url 'delete' task.id %}" class="my-0">
{% csrf_token %}
<button type="submit" class="btn btn-danger btn-floating">
<span class="fas fa-trash text-white" title="delete"></span>
</button>
</form>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
Step 2
At the end of the body tag in index.html add code from the snippet below.
<script>
const editNameInput = document.getElementById('editNameInput');
const editDescInput = document.getElementById('editDescInput');
const taskId = document.getElementById('taskId');
const taskForm = document.getElementById('taskForm');
const taskModalLabel = document.getElementById('taskModalLabel');
function setModalValues(id) {
const task = document.getElementById(id)
editNameInput.value = task.querySelector('.name').innerText;
editDescInput.value = task.querySelector('.desc').innerText;
taskId.value = id;
taskModalLabel.innerText = 'Edit task';
}
const addTaskButton = document.querySelector('#addTaskButton');
addTaskButton.addEventListener('click', () => {
taskForm.reset();
taskModalLabel.innerText = 'Add task';
})
</script>
After refreshing the page you should see simple To Do app with connected to MySQL database.
Optimization
If you want to further optimize your application please visit:
Backend features
Django:
This example was created with the use of Django. Our app is connected to MySQL database and is ready to receive get and post requests.
MDB CLI:
The database in this example was created using MDB CLI with Graphical User Interface available under phpmyadmin.mdbgo.com
Frontend features
MDB UI KIT:
We have successfully added MDB UI Kit the created app, with which we can build basic views very quickly.
Info: If you want to use customized version of MDB UI KIT with your own project, you need to use
bundler like webpack and modify source code. To learn about how to include and bundle the MDB package in
your project using Webpack visit
this page in MDB documentation.
Views and Layouts:
We have successfully integrated the backend with the MDB package and can send basic requests to backend Django application.