pontalk: Explore Python's Hidden Treasures!

Building a Productivity Tracker with Django: Your First Web Project

Written by

ken

in

Hello there, future web developers and productivity enthusiasts! Are you looking for a fun and practical way to dive into web development? Or perhaps you’re just tired of losing track of your daily tasks and want a personalized solution? You’re in the right place!

Today, we’re going to embark on an exciting journey: building your very own Productivity Tracker using Django. Django is a powerful and popular web framework for Python, known for its “batteries-included” approach, meaning it comes with many features built-in so you don’t have to create everything from scratch. It’s a fantastic tool for beginners because it helps you build robust web applications relatively quickly.

By the end of this guide, you’ll have a basic web application that can help you keep tabs on your tasks, and you’ll have a much better understanding of how web applications work. Let’s get started!

What is a Productivity Tracker?

Before we jump into coding, let’s clarify what we’re building. A productivity tracker is essentially a tool that helps you:

  • List your tasks: Keep all your to-dos in one organized place.
  • Track progress: See which tasks you’ve started or completed.
  • Stay organized: Manage your workload more effectively.

Imagine a simple to-do list, but on a webpage that you can access from anywhere. That’s our goal!

Why Django for This Project?

You might wonder, “Why Django?” Here are a few excellent reasons, especially for beginners:

  • Python-based: If you’ve learned Python (a very beginner-friendly programming language), Django uses it extensively.
  • Batteries Included: Django comes with many features ready to use, like an administrative interface (a ready-made control panel for your data), database connectivity, and an authentication system (for user logins). This means less time setting up basic functionality and more time building your unique features.
  • Structured Approach: Django encourages good design patterns, specifically the MVT (Model-View-Template) pattern.
    • Model: How your data is structured and stored (e.g., what information a “task” should have).
    • View: The logic that processes user requests and fetches data (e.g., when you ask to see all tasks).
    • Template: How the information is displayed to the user (e.g., the HTML page showing your tasks).
      This structure helps keep your code organized and easier to manage as your project grows.
  • Large Community: Django has a huge and active community, which means tons of resources, tutorials, and help available if you get stuck.

Setting Up Your Development Environment

Before we write any Django code, we need to set up our computer.

1. Install Python

Django is built with Python, so you’ll need it installed first.
* Go to the official Python website: python.org
* Download and install the latest stable version of Python 3. Make sure to check the box that says “Add Python to PATH” during installation if you’re on Windows.

2. Create a Virtual Environment

A virtual environment is a segregated space on your computer where you can install specific versions of Python packages for a particular project without affecting other projects. It’s like having a separate toolbox for each project. This is a best practice in Python development.

Open your terminal or command prompt and navigate to where you want to store your project (e.g., cd Documents/CodingProjects). Then run these commands:

python -m venv my_productivity_env

This command creates a new folder named my_productivity_env which will hold our virtual environment.

Now, you need to “activate” this environment:

  • On Windows:
    bash
    .\my_productivity_env\Scripts\activate
  • On macOS/Linux:
    bash
    source my_productivity_env/bin/activate
    You’ll know it’s active when you see (my_productivity_env) at the beginning of your terminal prompt.

3. Install Django

With your virtual environment activated, we can now install Django.

pip install django

pip is Python’s package installer, used to install libraries and frameworks like Django.

Starting Your Django Project

Now that Django is installed, let’s create our very first project!

django-admin startproject productivity_tracker .
  • django-admin is a command-line utility for administrative tasks.
  • startproject tells Django to create a new project.
  • productivity_tracker is the name of our project.
  • The . (dot) at the end tells Django to create the project files in the current directory, rather than creating an extra nested folder.

If you list the files in your directory (ls on macOS/Linux, dir on Windows), you’ll see a manage.py file and a folder named productivity_tracker.

  • manage.py: This is another command-line utility for our specific project. We’ll use it a lot!
  • productivity_tracker/ (inner folder): This folder contains your project’s main settings and URL configurations.

Creating Your First Django App

In Django, projects are made up of “apps.” An app is a self-contained module that does one specific thing (e.g., a “tasks” app, a “users” app). This helps keep your code organized and reusable. Let’s create an app for our tasks.

Make sure you are in the same directory as manage.py, then run:

python manage.py startapp tasks

This creates a new folder called tasks inside your project.

Registering Your App

Django needs to know about this new app. Open the productivity_tracker/settings.py file (the one inside the productivity_tracker folder, not the project root) and find the INSTALLED_APPS list. Add 'tasks' to it:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'tasks', # <--- Add this line
]

Defining Your Data Model

The Model defines the structure of your data. For our productivity tracker, we’ll need a “Task” model. Each task will have a title, a description, a creation date, and whether it’s completed.

Open tasks/models.py and modify it like this:

from django.db import models # This line is usually already there

class Task(models.Model):
    title = models.CharField(max_length=200) # A short text field for the task name
    description = models.TextField(blank=True, null=True) # A long text field, optional
    created_at = models.DateTimeField(auto_now_add=True) # Automatically sets creation timestamp
    is_complete = models.BooleanField(default=False) # A true/false field, default to not complete

    def __str__(self):
        return self.title # This makes it easier to read Task objects in the admin
  • models.Model is the base class for all Django models.
  • CharField, TextField, DateTimeField, BooleanField are different types of fields Django provides to store various kinds of data.

Making Migrations

After defining our model, we need to tell Django to create the corresponding table in our database. We do this using migrations. Migrations are Django’s way of managing changes to your database schema (the structure of your data).

Run these commands in your terminal:

python manage.py makemigrations tasks
python manage.py migrate
  • makemigrations tasks: This command creates a new migration file inside your tasks/migrations folder, which is like a set of instructions for changing your database based on your models.py file.
  • migrate: This command applies those instructions (and any other pending migrations from Django’s built-in apps) to your database.

Creating the Admin Interface

Django comes with a fantastic built-in administration panel. Let’s make our Task model available there so we can easily add, view, and edit tasks.

Open tasks/admin.py and add the following:

from django.contrib import admin
from .models import Task # Import our Task model

admin.site.register(Task) # Register the Task model with the admin site

Creating an Administrator User

To access the admin panel, you need an administrator (superuser) account.

python manage.py createsuperuser

Follow the prompts to create a username, email, and password.

Running the Development Server

Now, let’s see our project in action!

python manage.py runserver

Open your web browser and go to http://127.0.0.1:8000/admin/. Log in with the superuser credentials you just created. You should see “Tasks” listed there. Click on it, and you can now add new tasks!

Basic Views and URLs

While the admin panel is great for managing data, we want our users to see their tasks on a custom webpage. This is where Views and URLs come in.

  • View: A Python function or class that receives a web request and returns a web response (like an HTML page).
  • URL: A web address that maps to a specific view.

Creating a View

Open tasks/views.py and add a simple view to display all tasks:

from django.shortcuts import render # Used to render HTML templates
from .models import Task # Import our Task model

def task_list(request):
    tasks = Task.objects.all().order_by('-created_at') # Get all tasks, ordered by creation date
    return render(request, 'tasks/task_list.html', {'tasks': tasks})
  • Task.objects.all() retrieves all Task objects from the database.
  • render() takes the request, the template name, and a dictionary of data to send to the template.

Defining URLs for the App

Now we need to create a urls.py file inside our tasks app to define the URL patterns specific to this app. Create a new file named tasks/urls.py and add:

from django.urls import path
from . import views # Import the views from the current app

urlpatterns = [
    path('', views.task_list, name='task_list'), # Defines the root URL for the app
]
  • path('', ...) means that when someone visits the base URL for this app (e.g., /tasks/), it should call the task_list view.
  • name='task_list' gives this URL a name, which is useful for referencing it elsewhere in your project.

Connecting App URLs to Project URLs

Finally, we need to tell the main project (in productivity_tracker/urls.py) to include the URLs from our tasks app.

Open productivity_tracker/urls.py and modify it:

from django.contrib import admin
from django.urls import path, include # Import 'include'

urlpatterns = [
    path('admin/', admin.site.urls),
    path('tasks/', include('tasks.urls')), # Include URLs from our 'tasks' app
]
  • path('tasks/', include('tasks.urls')) means that any URL starting with /tasks/ will be handled by the URL patterns defined in tasks/urls.py. So, if you go to http://127.0.0.1:8000/tasks/, it will look for a matching pattern in tasks/urls.py.

Creating a Simple Template

Our task_list view currently tries to render a template named tasks/task_list.html. We need to create this file.

First, create a templates folder inside your tasks app folder:
tasks/templates/tasks/task_list.html

The nested tasks folder inside templates is a Django convention to prevent template name clashes if you have multiple apps with similarly named templates.

Now, open tasks/templates/tasks/task_list.html and add some basic HTML:

<!-- tasks/templates/tasks/task_list.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Productivity Tracker</title>
    <style>
        body { font-family: sans-serif; margin: 20px; background-color: #f4f4f4; }
        .container { max-width: 800px; margin: auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        h1 { color: #333; text-align: center; }
        ul { list-style: none; padding: 0; }
        li { background-color: #e9e9e9; margin-bottom: 10px; padding: 10px 15px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; }
        .completed { text-decoration: line-through; color: #777; }
        .timestamp { font-size: 0.8em; color: #555; }
    </style>
</head>
<body>
    <div class="container">
        <h1>My Productivity Tracker</h1>

        {% if tasks %}
            <ul>
                {% for task in tasks %}
                    <li class="{% if task.is_complete %}completed{% endif %}">
                        <div>
                            <strong>{{ task.title }}</strong>
                            {% if task.description %}
                                <p>{{ task.description }}</p>
                            {% endif %}
                            <small class="timestamp">Created: {{ task.created_at|date:"M d, Y H:i" }}</small>
                        </div>
                        <div>
                            {% if task.is_complete %}
                                <span>&#10003; Done</span>
                            {% else %}
                                <span>&#9744; Pending</span>
                            {% endif %}
                        </div>
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            <p>No tasks yet. Go to <a href="/admin/tasks/task/add/">admin</a> to add some!</p>
        {% endif %}
    </div>
</body>
</html>
  • {% if tasks %} and {% for task in tasks %} are Django template tags for control flow (like if-else statements and loops in Python).
  • {{ task.title }} is a Django template variable that displays the title attribute of a task object.
  • |date:"M d, Y H:i" is a template filter that formats the created_at timestamp.

Seeing Your Tracker!

With the development server still running (python manage.py runserver), open your browser and navigate to http://127.0.0.1:8000/tasks/.

You should now see your list of tasks! If you’ve added tasks through the admin panel, they will appear here. You can try adding more tasks in the admin and refreshing this page to see the updates.

Next Steps and Further Enhancements

Congratulations! You’ve successfully built a basic productivity tracker with Django. This is just the beginning. Here are some ideas for how you can expand and improve your project:

  • Add a Form: Create a web form to add new tasks directly from the /tasks/ page, without needing to go to the admin.
  • Mark as Complete: Add buttons or checkboxes to mark tasks as complete or incomplete from the list page.
  • Edit/Delete Tasks: Implement functionality to edit or delete existing tasks.
  • User Authentication: Allow different users to have their own task lists. Django has a robust built-in authentication system for this!
  • Styling: Make your application look even better with more advanced CSS frameworks like Bootstrap or Tailwind CSS.
  • Deployment: Learn how to deploy your Django application to a live server so others can use it.

Conclusion

Building a productivity tracker is a fantastic way to learn the fundamentals of web development with Django. You’ve touched upon creating models, working with databases through migrations, setting up an admin interface, and handling user requests with views and templates. Django’s structure and “batteries-included” philosophy make it an excellent choice for turning your ideas into functional web applications.

Keep experimenting, keep learning, and happy coding!

Comments

Leave a Reply

More posts