pontalk: Explore Python's Hidden Treasures!

Building a Simple Project Management Tool with Django

Written by

ken

in

Hello there, future web developer! Have you ever felt overwhelmed by tasks and projects, wishing you had a simple way to keep track of everything? What if I told you that you could build your very own project management tool? Not only is it incredibly useful, but it’s also a fantastic way to learn web development. Today, we’re going to dive into building a basic project management application using Django.

What is Project Management and Why Build Your Own Tool?

At its core, project management is all about organizing and overseeing tasks to achieve a specific goal. Think of it as having a clear roadmap for everything you need to do, from planning your next big personal project to tracking work assignments.

While there are many excellent project management tools out there (like Trello or Asana), building your own offers unique benefits:
* Learning Experience: It’s a hands-on way to understand how web applications are put together.
* Customization: You can tailor it exactly to your needs, adding features that matter most to you.
* Control: You own your data and the software.

Why Choose Django?

Django is a powerful and popular web framework written in Python. A web framework is like a toolkit that provides a structure and common functions for building websites, saving you a lot of time and effort. Here’s why Django is a great choice for beginners:

  • “Batteries-included”: It comes with many features built-in, like an admin panel (a ready-to-use interface to manage your data), an Object-Relational Mapper (ORM) for easy database interaction, and a powerful templating system.
  • Python: If you’re familiar with Python, you’ll find Django quite intuitive. Python is known for its readability and simplicity.
  • Robust and Scalable: Used by big companies, Django can handle complex applications and high traffic.

Getting Started: Setting Up Your Environment

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

1. Install Python

Make sure you have Python installed on your computer. You can download it from the official Python website. Django works best with Python 3.8 or newer.

2. Create a Virtual Environment

It’s good practice to create a virtual environment for each project. Think of it as an isolated container for your project’s specific Python packages. This prevents conflicts between different projects that might use different versions of the same package.

Open your terminal or command prompt and run these commands:

python -m venv myprojectenv

This creates a folder named myprojectenv containing your virtual environment.

Now, activate it:

  • On Windows:
    bash
    .\myprojectenv\Scripts\activate
  • On macOS/Linux:
    bash
    source myprojectenv/bin/activate
    You’ll see (myprojectenv) appear at the beginning of your terminal prompt, indicating that the virtual environment is active.

3. Install Django

With your virtual environment active, install Django:

pip install Django

pip is Python’s package installer. This command downloads and installs the Django framework into your myprojectenv.

4. Create a Django Project

Now let’s create our first Django project. This will set up the basic directory structure for our application.

django-admin startproject pmsite .

Here, pmsite is the name of our main project, and the . tells Django to create the project files in the current directory (where your virtual environment is).

5. Create a Django App

In Django, a “project” is a collection of “apps.” An app is a self-contained module that does one thing. For our project management tool, we’ll create an app specifically for managing projects and tasks.

python manage.py startapp projects

This creates a projects directory with basic files inside our pmsite project.

Finally, we need to tell our Django project about this new projects app. Open the pmsite/settings.py file and add 'projects' to the INSTALLED_APPS list:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'projects', # Our new app!
]

Defining Your Data: Models

In Django, models are Python classes that define the structure of your data. Each model usually corresponds to a table in your database. Think of them as blueprints for how your information (like a project’s name or a task’s due date) will be stored.

Let’s define two models: Project and Task. Open projects/models.py and add the following:

from django.db import models

class Project(models.Model):
    name = models.CharField(max_length=200)
    description = models.TextField()
    start_date = models.DateField()
    end_date = models.DateField(null=True, blank=True)
    STATUS_CHOICES = [
        ('planning', 'Planning'),
        ('active', 'Active'),
        ('completed', 'Completed'),
        ('on_hold', 'On Hold'),
    ]
    status = models.CharField(
        max_length=10,
        choices=STATUS_CHOICES,
        default='planning',
    )

    def __str__(self):
        return self.name

class Task(models.Model):
    project = models.ForeignKey(Project, on_delete=models.CASCADE, related_name='tasks')
    name = models.CharField(max_length=200)
    description = models.TextField(blank=True, null=True)
    due_date = models.DateField()
    is_completed = models.BooleanField(default=False)

    def __str__(self):
        return f"{self.project.name} - {self.name}"

A quick explanation of what we’ve added:
* models.CharField: For short text fields like names. max_length is required.
* models.TextField: For longer text, like descriptions.
* models.DateField: For dates.
* null=True, blank=True: Allows a field to be empty in the database (null=True) and in forms (blank=True).
* choices: Provides a dropdown list of predefined options for the status.
* models.ForeignKey: This creates a relationship between Task and Project. A task belongs to a project. on_delete=models.CASCADE means if a project is deleted, all its associated tasks will also be deleted.
* __str__ method: This method tells Django how to represent an object (e.g., a Project or Task) as a string, which is very helpful in the admin panel.

Migrations

After defining your models, you need to tell Django to create the corresponding tables in your database. This is done through migrations.

python manage.py makemigrations projects
python manage.py migrate
  • makemigrations: Creates new migration files based on the changes you’ve made to your models.
  • migrate: Applies those changes to your database.

Creating Your First Views

Views are Python functions or classes that handle web requests and return web responses. When someone visits a URL on your site, a view processes that request.

Open projects/views.py and add:

from django.shortcuts import render, get_object_or_404
from .models import Project, Task

def project_list(request):
    projects = Project.objects.all().order_by('-start_date')
    return render(request, 'projects/project_list.html', {'projects': projects})

def project_detail(request, pk):
    project = get_object_or_404(Project, pk=pk)
    tasks = project.tasks.all().order_by('due_date')
    return render(request, 'projects/project_detail.html', {'project': project, 'tasks': tasks})
  • project_list: Fetches all projects from the database, orders them, and sends them to a template named project_list.html.
  • project_detail: Fetches a single project based on its primary key (pk), gets all tasks related to that project, and sends them to project_detail.html. get_object_or_404 is a handy shortcut that raises a 404 error if the object isn’t found.

Setting Up URLs

URLs (Uniform Resource Locators) are the addresses people type into their browser to access different parts of your website. We need to map our views to specific URLs.

First, create a new file named urls.py inside your projects app directory (projects/urls.py):

from django.urls import path
from . import views

urlpatterns = [
    path('', views.project_list, name='project_list'),
    path('projects/<int:pk>/', views.project_detail, name='project_detail'),
]
  • path('', ...): Maps the root URL of our app (e.g., /projects/) to the project_list view.
  • path('projects/<int:pk>/', ...): Maps URLs like /projects/1/ or /projects/5/ to the project_detail view. <int:pk> captures the primary key as an integer.

Next, we need to include our app’s URLs in the main project’s urls.py file. Open pmsite/urls.py:

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('projects/', include('projects.urls')), # Include our app's URLs
]

Now, any URL starting with /projects/ will be handled by our projects app’s urls.py.

Designing Your Pages: Templates

Templates are HTML files with special Django syntax that allows you to display dynamic content from your views.

First, create a templates directory inside your projects app, and inside that, another projects directory.
projects/templates/projects/

Now, create two files inside projects/templates/projects/:

1. project_list.html

<!-- projects/templates/projects/project_list.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project List</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        .project-card { border: 1px solid #ccc; padding: 15px; margin-bottom: 10px; border-radius: 5px; }
        .project-card h3 { margin-top: 0; }
        a { text-decoration: none; color: #007bff; }
        a:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <h1>All Projects</h1>
    {% for project in projects %}
        <div class="project-card">
            <h3><a href="{% url 'project_detail' pk=project.pk %}">{{ project.name }}</a></h3>
            <p><strong>Status:</strong> {{ project.get_status_display }}</p>
            <p>{{ project.description|truncatechars:100 }}</p>
            <p><small>Starts: {{ project.start_date }}</small></p>
        </div>
    {% empty %}
        <p>No projects found. Time to create one!</p>
    {% endfor %}
</body>
</html>
  • {% for project in projects %}: This is a Django template tag that loops through the projects list passed from the view.
  • {{ project.name }}: This is a template variable that displays the name attribute of each project object.
  • {% url 'project_detail' pk=project.pk %}: This dynamically generates the URL for the project_detail view, passing the project’s primary key.
  • {{ project.description|truncatechars:100 }}: The |truncatechars:100 is a template filter that shortens the description to 100 characters.

2. project_detail.html

<!-- projects/templates/projects/project_detail.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ project.name }} - Details</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        .task-item { border: 1px solid #eee; padding: 10px; margin-bottom: 5px; border-radius: 3px; }
        .completed { text-decoration: line-through; color: #888; }
        a { text-decoration: none; color: #007bff; }
        a:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <a href="{% url 'project_list' %}">Back to Projects</a>
    <h1>{{ project.name }}</h1>
    <p><strong>Status:</strong> {{ project.get_status_display }}</p>
    <p><strong>Description:</strong> {{ project.description }}</p>
    <p><strong>Start Date:</strong> {{ project.start_date }}</p>
    {% if project.end_date %}
        <p><strong>End Date:</strong> {{ project.end_date }}</p>
    {% endif %}

    <h2>Tasks</h2>
    {% if tasks %}
        <ul>
            {% for task in tasks %}
                <li class="task-item {% if task.is_completed %}completed{% endif %}">
                    <strong>{{ task.name }}</strong> (Due: {{ task.due_date }})
                    {% if task.is_completed %} - Completed!{% endif %}
                    <p><small>{{ task.description }}</small></p>
                </li>
            {% endfor %}
        </ul>
    {% else %}
        <p>No tasks yet for this project. Time to add some!</p>
    {% endif %}
</body>
</html>

The Django Admin Interface: A Quick Win!

Django comes with a powerful, ready-to-use admin interface that allows you to easily manage your database models without writing any forms or complex backend logic.

First, create a superuser (an administrator account):

python manage.py createsuperuser

Follow the prompts to set up a username, email, and password.

Next, we need to tell the admin interface to display our Project and Task models. Open projects/admin.py:

from django.contrib import admin
from .models import Project, Task

admin.site.register(Project)
admin.site.register(Task)

Now, start the development server:

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 now see “Projects” and “Tasks” listed, allowing you to add, edit, and delete data!

After adding some projects and tasks via the admin, visit http://127.0.0.1:8000/projects/ to see your project list, and click on a project to see its details.

Conclusion

Congratulations! You’ve just built the foundational pieces of a simple project management tool using Django. You’ve learned about:

  • Django Project Structure: How projects and apps are organized.
  • Models: Defining your data with Python classes.
  • Migrations: Syncing your models with the database.
  • Views: Handling web requests and preparing data.
  • URLs: Mapping web addresses to views.
  • Templates: Displaying dynamic content in HTML.
  • Admin Interface: A powerful tool for managing data quickly.

This is just the beginning! From here, you could expand your tool by:
* Adding forms to create and edit projects/tasks directly from the front-end.
* Implementing user authentication so different users can manage their own projects.
* Adding more sophisticated styling with CSS frameworks like Bootstrap.
* Introducing features like task comments, file uploads, or progress tracking.

Keep experimenting, keep learning, and happy coding!

Comments

Leave a Reply

More posts