[PYTHON] Create a Todo app with the Django REST framework

Create a simple TODO app using the Django REST framework.

** Features of the app to create **

--Single page app that manages the creation / completion of TODO --Store TODO in SQLite3 --Use Django REST framework --Create RESTful API

** Environment / Version ** Windows 7 Python 3.4.3 Django 1.8.2 Django REST framework 3.1.2

** Deliverables ** https://github.com/koji-ohki-1974/django-rest-todo

Preparation

It's assumed that Python and Django are already installed.

Introducing the Django REST framework

Run the following command to install the Django REST framework.

pip install djangorestframework

Creating a project

Create a Django project. Execute the following command in any folder.

django-admin.py startproject django_rest_todo

Database setup

Initialize the database and create a superuser.

cd django_rest_todo
python manage.py migrate
python manage.py createsuperuser

Set the superuser ID, email address, and password.

Server startup / operation check

Execute the following command.

python manage.py runserver

Start your browser and access [http: // localhost: 8000 /](http: // localhost: 8000 /). If the project has been created successfully, the screen "It worked!" Will be displayed.

Quit the server with "CTRL + C".

Creating an application

In the project folder, execute the following command to create an application.

cd django_rest_todo
django-admin.py startapp api

Change the project settings. Change "settings.py" as follows.

settings.py (excerpt)

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'django_rest_todo.api',
)

MIDDLEWARE_CLASSES = (
#  'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
#  'django.middleware.csrf.CsrfViewMiddleware',
#  'django.contrib.auth.middleware.AuthenticationMiddleware',
#  'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
#  'django.contrib.messages.middleware.MessageMiddleware',
#  'django.middleware.clickjacking.XFrameOptionsMiddleware',
#  'django.middleware.security.SecurityMiddleware',
)

Creating an API

Todo model

Define the Todo model. Edit "api / models.py" and add the Todo class.

api/models.py

from django.db import models

class Todo(models.Model):
    text = models.TextField()

When the model definition is completed, it will be reflected in the database. Execute the following command.

cd ..
python manage.py makemigrations api
python manage.py sqlmigrate api 0001
python manage.py migrate

Creating a serializer

Defines a serializer that maps the model to JSON. Create "api / serializers.py".

api/serializers.py

from .models import Todo
from rest_framework import serializers

class TodoSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Todo
        fields = ('id', 'text')

Create view

Create a view for REST. Add the TodoViewSet class to "api / views.py".

api/views.py

from rest_framework.viewsets import ModelViewSet
from .models import Todo
from .serializers import TodoSerializer

class TodoViewSet(ModelViewSet):
    queryset = Todo.objects.all()
    serializer_class = TodoSerializer

API routing

Set the routing so that the API can be processed. Modify "urls.py".

urls.py

from django.conf.urls import include, url
from rest_framework.routers import DefaultRouter
from .api import views

router = DefaultRouter()
router.register(r'todos', views.TodoViewSet)

urlpatterns = [
    url(r'^api/', include(router.urls)),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]

Server startup / operation check

Start the server again and check the operation of the API. Execute the following command.

python manage.py runserver

Launch your browser and access:

http://localhost:8000/api/ http://localhost:8000/api/todos/

Quit the server with "CTRL + C".

Creating a front end

Static file

Specifies the location of static files (.html and .js). Edit "settings.py" and add the following:

settings.py

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

Create a "static" folder.

mkdir static

HTML file

Create a todo list screen. Create "static / index.html".

static/index.html

<!doctype html>
<html ng-app="djangoTodo">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Django REST framework Todo App</title>

	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
	<style>
		html                    { overflow-y:scroll; }
		body                    { padding-top:50px; }
		#todo-list              { margin-bottom:30px; }
	</style>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
	<script src="core.js"></script>

</head>
<body ng-controller="mainController">
	<div class="container">

		<div class="jumbotron text-center">
			<h1>Todo list<span class="label label-info">{{ todos.length }}</span></h1>
		</div>

		<div id="todo-list" class="row">
			<div class="col-sm-4 col-sm-offset-4">

				<div class="checkbox" ng-repeat="todo in todos">
					<label>
						<input type="checkbox" ng-click="deleteTodo(todo.id)"> {{ todo.text }}
					</label>
				</div>

			</div>
		</div>

		<div id="todo-form" class="row">
			<div class="col-sm-8 col-sm-offset-2 text-center">
				<form>
					<div class="form-group">

						<input type="text" class="form-control input-lg text-center" placeholder="Please enter Todo" ng-model="formData.text">
					</div>

					<button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">add to</button>
				</form>
			</div>
		</div>

	</div>

</body>
</html>

JavaScript file

In JavaScript, describe the process to call the API. Create "static / core.js".

static/core.js

var djangoTodo = angular.module('djangoTodo', []);

function mainController($scope, $http) {

    $scope.readTodos = function() {
        $http.get('/api/todos/')
            .success(function(data) {
                $scope.formData = {};
                $scope.todos = data;
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

    $scope.createTodo = function() {
        $http.post('/api/todos/', $scope.formData)
            .success(function(data) {
                console.log(data);
                $scope.readTodos();
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

    $scope.deleteTodo = function(id) {
        $http.delete('/api/todos/' + id + '/')
            .success(function(data) {
                console.log(data);
                $scope.readTodos();
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

    $scope.readTodos();

}

redirect

Set to redirect the request to the top page "/" to "static / index.html". Modify "urls.py".

urls.py

from django.conf.urls import include, url
from django.views.generic import RedirectView
from rest_framework.routers import DefaultRouter
from .api import views

router = DefaultRouter()
router.register(r'todos', views.TodoViewSet)

urlpatterns = [
    url(r'^api/', include(router.urls)),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
    url('', RedirectView.as_view(url='/static/index.html')),
]

Operation check

Server startup / operation check

Start the server.

python manage.py runserver

Start your browser and access [http: // localhost: 8000 /](http: // localhost: 8000 /). When the todo list is displayed, you are done.