A Django Todo app — learn from scratch

A Django Todo app — learn from scratch

Hi newcomers, we are happy to create a simple Todo app and show you the features of Python Django. Django is a powerful (framework) tool for developing simple and complex web applications. Django has been very popular for years because of its simplicity and rich features. Django also provides a simple database (sqlite3) to store and manage data in our applications.

Technology is evolving very fast, so all developers need advanced and optimized programming languages and frameworks. As we know, Python is one of the most popular high level programming languages in the world. Python has enough power to meet our growing needs. And Django makes the snake a little more fuel-efficient.

We are going to install the dependencies required to launch our Todo application in the following steps. The first step is installing Python and Django. Next, we need to download and install the requirements packages that are required for django to work properly on our system. Finally, we create a simple Todo app with all of its necessary features in order to learn about django libraries and frameworks.

Install Django

We assume you have Python version 3.7 and above. Let us install django using Python Package Installer (PIP). Enter the following command in your cmd:

pip install django

After successfull installation you can check the version of django by using the command:

django-admin –version

Create TODO App

If you have successfully installed django, we can create a project by using following command:

django-admin startproject todoapp

This will create a folder called todoapp in your current running directory. This is the most interesting feature of Django, which will automatically create the required modules and folders. This todoapp folder is the main project folder, which contains the manage.py file and a folder named todoapp. You can see the following files inside the todoapp folder:

1. __init__.py

2. asgi.py

3. settings.py

4. urls.py

5. wsgi.py

The settings.py has the default project parameters and features. The urls.py is responsible for URL routing in django. URL routing is used to navigate through webpages.

Now let’s start our todoapp for the first time to ensure everything is working fine. To run django project we have to enter following commands:

cd todoapp

python manage.py runserver

Now you can see some mysterious words floating around on the console (just for horror), these lines will tell you that your django application server is running at ip address 127.0.0.1 and port 8000. You can now open this link from a web browser. This will show that Django has been successfully installed !.

You may notice some warning about migration on the console, but do not worry, we will fix it soon. Now our project folder is ready, but we need to create several folders and files to properly configure our TodoApp. All the projects in Django have multiple codes that will be put together in a folder called App. These apps are responsible for rendering the appropriate logic for the entire project.

In other words, the Django project has a number of reusable parts called apps. Enter the following command to create a django application within our folder:

(assuming your current working directory is project base directory — todoapp)

python manage.py startapp entry

Great you have created entry app in no minutes, isn’t it really simple? Now we have to configure our todoapp/todoapp/settings.py file with following changes:

– add created app in INSTALLED_APPS list as ‘entry’

Now it the time to modify our urls.py but wait before changing urls.py file we have to create some folders and files as follows:

Create folders

todoapp/static
todoapp/templates

Create files

todoapp/entry/urls.py
todoapp/entry/forms.py
Then we have to change some parameters in following files:
todoapp/todoapp/settings.py
STATICFILES_DIRS = (BASE_DIR / ‘static’ ,)
todoapp/todoapp/urls.py
	from django.urls import include
	urlpatterns = [
		.....		
		path(‘’, include(‘entry.urls’),
	]

Done! All we have set for initial setup. Let’s move on to next steps:

Create Template

Create following files:
todoapp/templates/index.html
todoapp/templates/entry/index.html
todoapp/static/styles.html
	Add below code into appropriate file:
todoapp/templates/index.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<!-- Custom Styles -->
<link rel="stylesheet" href="{% static 'styles.css' %}">
<title>ToDo App</title>
</head>
<body>
<!-- Entry App -->
{% block entry_app %} {% endblock %}
</body>
</html>
todoapp/templates/entry/index.html
{% extend ‘index.html’ %}
{% block entry_app %} 
<div class="container">
<h3>Todo App</h3>
<form action="" method="post">
{% csrf_token %}
<input class="entry_input_field" name=’title’>
<button type="submit">Add</button>
</form>
<div class=’entry_list’>
{% for entry in entries %}
<p>entry.title <span>entry.created_on</span></p>
{% endfor %}
</div>
</div>
{% endblock %}
todoapp/static/styles.html
.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.container h3{
    text-transform: uppercase;
    letter-spacing: 2px;
}
.container input, .container button, .entry_list p{
    margin: 10px;
    font-size: 18px;
    border-radius: 10px;
    border: none;
    box-shadow: 0 0 3px black;
}
.container input, .entry_list p{
    width: 500px;
    height: 30px;
    padding: 10px;
}
.container button{
    height: 50px;
    width: 100px;
    text-transform: uppercase;
}
.entry_list p span{
font-style:italic;
font-size:11px;
color:grey;
}

Create Model

todoapp/entry/models.py
class EntryModel(models.Model):
	title = models.CharField(
		max_length=300, 
		null=False, 
		blank=False)
	created_on = models.DateTimeField(auto_now_add=True)
	updated_on = models.DateTimeField(auto_now=True)

Create Form

todoapp/entry/forms.py
class EntryForm(forms.ModelForm):
	class Meta:
		model = EntryModel
		fields = [‘title’]

Create View

todoapp/entry/views.py
from django.views.generic import View
from models import EntryModel
from forms import EntryForm
class EntryView(View):
	template_name = ‘entry/index.html’
	form_class = EntryForm
	def get(self, request):
		context = {
			‘entries’:EntryModel.objects.all(),
			‘form’:self.form_class
		}
		return render(request, self.template_name, context)
	
	def post(self, request):
		form = self.form_class(request.POST)
		context = {
			‘entries’:EntryModel.objects.all(),
			‘form’:self.form_class
			}
		if form.is_valid():
			form.save()
		return render(request, self.template_name, context)

Link URL to View

from views import HomeView
urlpatterns = [
	path(‘’, HomeView.as_view(), name=’home’)
	]
Done! We have completed out Todo app. Is it simple? Now we can run our application by using following command:
python manage.py runserver

In this article we will cover the basics of python Django, how to install and use it. We hope you found this article useful. If you have any questions please checkout learn python Django training course in Kochi. Python is a general purpose high-level programming language and, similar to Django, it has been around for many years. There are many applications that use python, but the ones we will be working with are Django and Jupyter Notebook. Both of these applications make development much easier and can help you create powerful web applications. If you want to learn python you can also look into python Django training in Kochi.