Hello-Django
Completed App |
Django Official Website |
Getting Started
-
Make a Directory for the Project and navigate into it
mkdir hello-django && cd hello-django
-
Create and activate a Python Virtual Environment
python3 -m venv venv
source venv/bin/activate -
Create a Django Project
django-admin startproject todoapp
-
Navigate into the django-project folder just created
todoapp
and Run the servercd todoapp
python manage.py runserver -
Quit the Server with Ctrl + C and create a application component inside the project
todolist
python manage.py startapp todolist
Add the application component to the lists of apps in
todoapp/settings.py
INSTALLED_APPS
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'todolist', /* added line */
]
- To add a view, go to
todolist/views.py
# Create your views here.
def index(request):
return render(request, "base.html", { "todo_list": todos })
- For each view, register the route in a file
urls.py
created in the same todolist directory with the view.
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index")
]
- use the
include
function to add the todolist urls in thetodoapp/urls.py
on the main app.
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('todolist.urls')),
]
- Create the
templates/base.html
file in the project root directory sitting at the same level with todoapp and todolist directory. Make a small modification required by Django
{% csrf_token %}
- Go to todoapp/settings.py and add the
templates
directory to theDIR
array entry of theTEMPLATES
array.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['templates'], /* modified */
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
- Define the todolist model inside
todolist/models.py
from django.db import models
# Create your models here.
class Todo(models.Model):
title=models.CharField(max_length=350)
complete=models.BooleanField(default=False)
def __str__(self):
return self.title
-
Run
python manage.py makemigrations
- The command creates a migration for the model Todo
Then run
python manage.py migrate
Create a Super user for the Admin panel
python manage.py createsuperuser
Then follow the instruction to create name, email and passwordGo to
todolist/admin.py
and register the model
from django.contrib import admin
from .models import Todo
# Register your models here.
admin.site.register(Todo)
- No go to the
todolist/views.py
and import the Todo model
from django.shortcuts import render
from .models import Todo
# Create your views here.
def index(request):
todos = Todo.objects.all()
return render(request, "base.html", { "todo_list": todos })
- Run the server again and test
python manage.py runserver
Starting development server at http://127.0.0.1:8000/
If you try to add a record, it throws and error.
However, the TodoApp works find through the Admin Panel http://127.0.0.1:8000/admin
- to implement the missing views, go to
todolist/views.py
from django.shortcuts import render, redirect
from django.views.decorators.http import require_http_methods
from .models import Todo
# Create your views here.
def index(request):
todos = Todo.objects.all()
return render(request, "base.html", { "todo_list": todos })
@require_http_methods(["POST"])
def add(request):
title = request.POST["title"]
todo = Todo(title=title)
todo.save()
return redirect("index")
def update(request, todo_id):
todo = Todo.objects.get(id=todo_id)
todo.complete = not todo.complete
todo.save()
return redirect("index")
def delete(request, todo_id):
todo = Todo.objects.get(id=todo_id)
todo.delete()
return redirect("index")
- Add the views to the urlpatterns in
todolist/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('add', views.add, name='add'),
path('delete/<int:todo_id>/', views.delete, name='delete'),
path('update/<int:todo_id>/', views.update, name='update'),
]
templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo App - Django</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</head>
<body>
<div style="margin-top: 50px;" class="ui container">
<h1 class="ui center aligned header">Django ToDo App</h1>
<form class="ui form" action="/add" method="post">
<div class="field">
<label>Todo Title</label>
<input type="text" name="title" placeholder="Enter ToDo task...">
<br>
</div>
<button class="ui blue button" type="submit">Add</button>
</form>
<hr>
{% for todo in todo_list %}
<div class="ui segment">
<p class="ui big header">{{ todo.id }} | {{ todo.title }}</p>
{% if todo.complete == False %}
<span class="ui gray label">Not Complete</span>
{% else %}
<span class="ui green label">Complete</span>
{% endif %}
<a class="ui blue button" href="/update/{{ todo.id }}">Update</a>
<a class="ui red button" href="/delete/{{ todo.id }}">Delete</a>
</div>
{% endfor %}
</div>
</body>
</html>
Finally, restart the App python manage.py runserver
or refresh.
Review the App at http://127.0.0.1:8000/ and the out-of-the-box Admin Panel
Commit and push your code to github.com and Deactivate the Virtual Env.
$ deactivate
$ conda deactivate
Top comments (2)
Really informative. Thanks for sharing.
very nice blog ! thanks for sharing helpful information. 1iplwin