ToDoList com Django

Software ToDoList com Django
Voltar
GitHub do projeto

O ToDoList é um desafio muito comum solicitado por empresas, com objetivo de verificar a capacitação de possíveis candidatos à vagas em atuação na área de desenvolvimento de sistemas. O sistema ToDoList é, basicamente, um programa onde tem-se uma lista de tarefas, das quais pode-se marcar como 'completa' ou 'incompleta', além das operações tradicionais de CRUD.


Passo a passo:


    Preparo:
  1. Instalar pip: sudo apt install python3-pip
  2. Instalar Django: pip3 install django
  3. Criar projeto: django-admin startproject nomePastaProjeto (Informado, nesse caso, 'todo')
  4. Criar migrations: python3 manage.py migrate
  5. Criar usuário: python3 manage.py createsuperuser (Informar dados)
  6. Executar projeto: python3 manage.py runserver (Acessar em http://localhost:8000 - Pode simplesmente trocar o ip por 'localhost')
  7. No projeto, criar app: python3 manage.py startapp nomeApp (Informado, nesse caso, 'tasks')

  8. Inicialização:
  9. Em 'todo/settings.py', informar, em INSTALLED_APPS, o nome do app como último item da lista
  10. Em 'tasks/views.py', informar def index (Informar 'from HttpResponse' também)
  11. Em 'tasks', criar arquivo 'urls.py', criando rota do views.index
  12. Em 'todo/urls.py', incluir 'include' no from django.urls e complementar rota admin.site.urls
  13. Testar funcionamento no browser (runserver - Deverá mostrar 'Hello world' na tela)

  14. Index:
  15. Em 'tasks', criar pasta 'templates' com subpasta 'tasks'
  16. Dentro da pasta acima, criar arquivo 'list.html'
  17. Em 'tasks/views.py', informar rota index
    • Recarregar browser para conferir se rota está funcionando (Irá para list.html)
  18. Em 'tasks/models.py', criar model Task (class Task)
  19. Montar migrations (Criar model 'task'): python3 manage.py makemigrations
  20. Criar migrations: python3 manage.py migrate
  21. Executar projeto: python3 manage.py runserver
  22. Em 'tasks/admin.py', informar 'from .models' e 'admin.site.register'
    • No browser, acessar painel admin (http://localhost:8000/admin), mostrará novo grupo 'Tasks'
    • Acessar e, após, clicar em 'add task':
      • Title: Projeto de ToDo UB Social (Clicar em Save)
      • Title: Projeto de ToDo2 UB Social (Clicar em Save)

  23. Listar Tasks:
  24. Em 'tasks/views.py', informar 'from .models' e aprimorar view index
  25. Em 'tasks/templates/list.html', preencher template
    • No browser, recarregar index (http://localhost:8000) e verificar se lista de tasks adicionadas no admin serão mostradas

  26. Inserir Task:
  27. Em 'tasks', criar novo arquivo 'forms.py' (Será a model TaskForm)
    • Em 'tasks/views.py', incluir 'from .forms'
  28. Em 'tasks/templates/list.html'
    • No browser, recarregar index e verificar se aparece form de criação de task
  29. Em 'tasks/views.py', incluir if (Incluir 'redirect' no from)
    • No Browser, testar inserir alguma task

  30. Editar Task:
  31. Em 'tasks/templates', criar 'update_task.html'
  32. Em 'tasks/views.py', criar view updateTask (def updateTask)
  33. Em 'tasks/urls.py', adicionar rota update_task (path)
  34. Em tasks/templates/list.html, incluir <a>Update
    • No browser, testar editar alguma task

  35. Deletar Task:
  36. Em 'tasks/templates', criar 'delete.html'
  37. Em 'tasks/views.py', criar view deleteTask (def deleteTask)
  38. Em 'tasks/urls.py', adicionar rota delete_task (path)
  39. Em 'tasks/templates/list.html', incluir <a>Delete
    • No browser, testar deletar alguma task

  40. Ver Task:
  41. Em 'tasks/templates', criar 'detail_task.html'
  42. Em 'tasks/views.py', criar view detailTask (def detailTask)
  43. Em 'tasks/urls.py' adicionar rota detail_task (path)
  44. Em 'tasks/templates/list.html', incluir <a>Detail
    • No browser, testar ver detalhes de alguma task

  45. Marcar Task completa/incompleta:
  46. Em 'tasks/templates/list.html', incluir 'if task.complete'

Arquivos:


tasks/templates/tasks/delete.html:


<p>Excluir a task "{{item}}"?</p>
<a href="{% url 'list' %}">Cancelar</a>
<form method="POST">
    {% csrf_token %}
    <input type="submit">
</form>

tasks/templates/tasks/list.html:


<h3>To do Django UB Social</h3>

<form method="POST">
    {% csrf_token %}
    {{form}}
    <input type="submit">
</form>

{% for task in tasks %}
    <div>
        <a href="{% url 'update' task.id %}">Update</a>
        <a href="{% url 'detail' task.id %}">Detail</a>
        <a href="{% url 'delete' task.id %}">Delete</a>
        {% if task.complete == True %}
            <s>{{task}}</s>
        {% else %}
            <span>{{task}}</span>
        {% endif %}
    </div>
{% endfor %}

tasks/templates/tasks/detail.html:


<a href="{% url 'list' %}">Voltar</a><br>
<div class="main">
    {{task.id}}<br>
    {% if task.complete == True %}
            <s>{{task.title}}</s>
        {% else %}
            <span>{{task.title}}</span>
    {% endif %}
</div>

tasks/templates/tasks/update.html:


<h3>Update Task</h3>
<form method="POST">
    {% csrf_token %}
    {{form}}
    <input type="submit">
</form>

admin.py:


from django.contrib import admin
from .models import *

admin.site.register(Task)

apps.py:


from django.apps import AppConfig

class TasksConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'tasks'

forms.py:


from django import forms
from django.forms import ModelForm
from .models import *

class TaskForm(forms.ModelForm):
    class Meta:
        model = Task
        fields = '__all__'

models.py:


from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=200)
    complete = models.BooleanField(default=False)
    created = models.DateTimeField(auto_now_add=True)
    def __str__(self):
        return self.title

urls.py:


from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name="list"),
    path('task/<str:pk>/', views.detailTask, name="detail"),
    path('update/<str:pk>/', views.updateTask, name="update"),
    path('delete/<str:pk>/', views.deleteTask, name="delete"),
]

views.py:


from django.shortcuts import render, redirect
from django.http import HttpResponse
from .models import *
from .forms import *

def index(request):
    tasks = Task.objects.all()
    form = TaskForm()
    if request.method == 'POST':
        form = TaskForm(request.POST)
        if form.is_valid():
            form.save()
        return redirect('/')
    context = {'tasks':tasks, 'form':form}
    return render(request, 'tasks/list.html', context)

def detailTask(request, pk):
    context = {}
    context["task"] = Task.objects.get(id=pk)
    return render(request, 'tasks/detail.html', context)

def updateTask(request, pk):
    task = Task.objects.get(id=pk)
    form = TaskForm(instance=task)
    if request.method == 'POST':
        form = TaskForm(request.POST, instance=task)
        if form.is_valid():
            form.save()
            return redirect('/')
    context = {'form':form}
    return render(request, 'tasks/update.html', context)

def deleteTask(request, pk):
    item = Task.objects.get(id=pk)
    if request.method == 'POST':
        item.delete()
        return redirect('/')
    context = {'item':item}
    return render(request, 'tasks/delete.html', context)

todo/settings.py:
Modificar, no arquivo original, com o trecho de código abaixo


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

todo/urls.py:


from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('tasks.urls'))
]

Elaborado por Mateus Schwede
ubsocial.github.io