gprok

Part 1: Setup project and create a simple page

Building a Django todo list

George Prokopakis's photo
George Prokopakis
·

4 min read

The purpose of this part is to get familiar with the Django framework and understand its structure. Understanding the concepts of Model-View-Controller (MVC) , Object-Relational Mapping (ORM) , and Migrations are required for this example. PyCharm IDE is used.

Create the project

In PyCharm create a new project and then select Django

create-django-project.png

Django has a build in admin application. We create the required authentication and authorisation tables by running the command:

python manage.py migrate

Then we need to create a super user account:

python manage.py createsuperuser

Django will ask for a user name, an email, and a password. If you provide a very simple password, Django will require confirmation.

At this point we can run the application (use the run button of PyCharm) . A url like http://127.0.0.1:8000/ will be provided and if we type /admin we will be directed to the admin application's login.

Adding the tasks application and Task model

A Django application is actually a part of the project that provides some set of features. Here we create a tasks application which will be responsible to handle everything related to tasks. 

python manage.py startapp tasks

A new folder tasks is created and in this folder there are several files including models.py where we add the Models and views.py where we add the Controller functions. The application should be registered in the settings.py file:

INSTALLED_APPS = [
    ...
    'tasks',
]

In the models.py file we add the Task model:

class Task(models.Model):
    title = models.CharField(max_length=140)
    description = models.TextField(null=True)
    date_posted = models.DateTimeField()
    completed = models.BooleanField(default=False)

For this initial simple version we assume that a task will only have a title, some optional description, the date it was posted, and if it completed or not. In future versions we will add more information.

Once the model is created we can apply migration:

 python manage.py makemigrations tasks
 python3 manage.py migrate

The tasks_task table will be created.

Register the model to the admin.py file in order to be able to do CRUD operations from within the admin application. Also, in order to help the admin application to display new entries properly, add the following method to the Task model:

def __str__(self):
    return self.title

Use the admin application to add a few tasks in the table.

Database

By default, Django is using the SQLite DBMS. Connection details and database name (default db.sqlite3) can be found in the settings.py file. We can access the database by a "Database" button on the right of the PyCharm window. Click on the + to add the database and select Data Source -> SQLite. In the popup window ignore the defaults and browse to select the db.sqlite3 database of the project:

django-sqlite.png Then apply and you can browse the database, view the tables and their contents.

Create page to display the tasks

We now try to create a page /tasks/all which will retrieve all tasks and display them.

  1. Create the URL:
    in the urls.py file add: 

    path('tasks/all', tasks.views.tasks),

  2. Add a function to the controller (views.py)
    This function will use the Task model in order to retrieve data from the database, will put the retrieved data in a dictionary (we call it context here), and then, will render a view (template) passing the context to it in order to be displayed. Think about the context dictionary as a bag where we put any data to be transferred to the view. 

    def tasks(request):
 all_tasks = Task.objects.order_by('date_posted')
 context = {'tasks': all_tasks}
 return render(request, 'tasks/all.html', context)

  3. Create the view (templates/tasks/all.html)
    In the views Django uses the {% %} notation to write python code inside html, and {{ }} to display variables. 

     <table>
 {% for task in tasks %}
     <tr>
         <td>{{ task.title }}</td>
         <td>{{  task.description }}</td>
     </tr>
 {% endfor %}
 </table>
  4. View the result by accessing: http://127.0.0.1:8000/tasks/all

Endnote

This is a very simple, and not so realistic example of a Django project. In the next parts the application will be improved to handle Projects, Tasks within projects, User registration and login, and Projects and Task belonging to Users.

Source Code: https://github.com/gprok/django-todolist/tree/part1

Django