Django (RESTful API) plus ReactJS (with Redux) Tutorial: Using the Django Admin + PostgreSQL (Part 3)

Just what is a killer app? A killer app is a jargon used to describe software that has become so essential and so compelling that it makes other products inadequate. Django’s killer app is arguably its admin module. It takes care of creating the user interface for the data in which you can perform basic operations (create, read, update, and delete). Programmers will just be required to define the models (type of python class), migrate the changes to the database, and register that model to the Django admin module. It works like magic. And based from my experience, the admin module is very handy when you need to develop a prototype for a web app.

PostgreSQL is a powerful, open source object-relational database system. It has more than 15 years of active development and a proven architecture that has earned it a strong reputation for reliability, data integrity, and correctness.

Source: postgreqsl.org

Today, we will be connecting our django project with a live postgreSQL database in the cloud. The database that we are going to use is available for free from Heroku. Since we already deployed our app to Heroku from our previous lesson, we don't have to worry about creating a new one. Heroku already did it for us. If not, go check the previous lesson before continuing here.

What Will I Learn?

At the end of this tutorial, you are going to be able to:

• Access the admin module
• Create a super user
• Define what is a model
• Create a model in Django
• Migrate models to the database
• Register model to Django admin module
• Connect your project to a live database

Requirements

• Python (latest version)
• Project deployed to Heroku (see previous lesson)
• Any text editor or Integrated Development Environment (IDE) of your choice

Difficulty

This tutorial assumes that you already know python and the basics of a database. If not, it would be hard for you to understand the concepts that will be discussed.

Tutorial Contents

I. How can I access Django's admin module?

You can access the admin module by going to the '/admin' route of your project. First, run your application as discussed in the previous lesson. Then, add '/admin' to the project's URL. You will probably see something like the one below.

II. How do I login? How can I get the username and password?

First and foremost, we need to create a super user or admin. This account will serve as the master key for all other accounts of your project. But before we can do that, we need to a migration. Enter the command below in the project's directory.

python manage.py migrate

After migrating, enter the command below. You will be prompted with a username, password and other things. Please take note of these since this will be the super admin's credentials.

python manage.py createsuperuser

If you have successfully created a super user, you can use the credentials you entered for the admin site. If all went well, you will see someting similar below.

III. What is a model?

A data model, or model for short, refers to the logical inter-relationships and data flow between different data elements involved in the information world. It also documents the way data is stored and retrieved. A data model can be concrete or abstract and t has the following main components:

• Data types
• Data items
• Data sources
• Event sources
• Links

Source: technopedia

For simplicity, data models represent the table in your database. And each property of a model corresponds to a field in a table.

IV. How can I create a Django model and migrate it to the database?

First, we need to register our app to the project. In the settings.py file, add the name of the app to the INSTALLED_APPS list (refer below). Remember to replace hello with the name you used for the app.

INSTALLED_APPS = [
    'hello',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Go to the 'hello' folder of your project and open the models.py file. In here, we can define the models we want by assigning the Model class as parent. For simplicity, we will create a 'to do' model. It will have only 2 properties. Property one is the text representing our 'to do'. Next is a boolean (true or false) property representing if we already did the 'to do' or not. You can copy the snippet below and paste it in the models.py file.

class ToDo(models.Model):
  text = models.CharField(max_length=300, null=False, blank=False, verbose_name="To Do")
  done = models.BooleanField(default=False, null=False, blank=False)

  def __str__(self):
    return self.text

  class Meta:
    verbose_name = "To Do"
    verbose_name_plural = "To Dos"

We won't be detailing the creation of models and their settings in this tutorial. Go to the excellent Django docs for more details. Now, we will migrate the model to our database by using the commands below.

python manage.py makemigrations hello
python manage.py migrate

V. How do I register my model to the admin module?

Go to the 'hello' folder of your project and open the admin.py file. Write the snippet below and hit save.

from django.contrib import admin
from .models import ToDo

admin.site.register(ToDo)

The code above just tells Django to register the ToDo model we just made to its admin module. We'll be able to confirm if weve successfully registered the model by looking at our browser. Go to the admin site again and look for the Hello category like the one below.

VI. How do I connect my postgreSQL database (in Heroku) with my project?

1. Login to your Heroku account and go to your dashboard.
2. Click on your current project and go to Resources. Then click "Heroku Postgres :: Database".
   
3. In the postgresql window, go to Settings and then View Credentials. Take note of the credentials since we will be using it later.
4. In the root directory of your project, go to the hello_world folder and open the settings.py file. Look for the DATABASES text and replace it with the snippet below. Do not change the ENGINE entry. Only replace the other settings with your heroku database credentials.

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': 'sample_db_name',
        'USER': 'user',
        'PASSWORD': 'password',
        'HOST': 'testhost.amazonaws.com',
        'PORT': '5432',
    }
}

Sample Heroku Credentials
Note: For the NAME above, use the Database field like the picture below.

VII. How do I migrate to the postgreSQL database?

Same with migration to SQLite, we just need to commands below.

python manage.py makemigrations hello
python manage.py migrate

Curriculum

This is part 3 of the ongoing tutorial of building a single page application by using both Django and ReactJS. Next time, we will be pushing our admin site to Heroku. We will also configure our project to manage our static files. For the rest of the lessons, please refer to the link/s below.

• Part 1: Installing Django with Virtual Env
• Part 2: Django Deployment to Heroku Cloud

---

Posted on Utopian.io - Rewarding Open Source Contributors

---