Build an Event Management System in Django

Creating an event management system using Django is a practical and rewarding project for anyone interested in web development. Django, a popular Python web framework, makes it easy to build secure, scalable, and feature-rich web applications. In this guide, we’ll walk you through the process of developing a complete event management system from scratch. Whether you’re a beginner or have some experience with Django, this step-by-step tutorial will help you understand the key concepts and get your project up and running quickly.

Prerequisites

Before we dive in, make sure you have a basic understanding of Django and web development. You'll need the following tools and libraries installed on your machine:

• Python (version 3.6 or higher)
• Django (version 3.0 or higher)
• A text editor or IDE (such as VS Code or PyCharm)
• Basic knowledge of HTML and CSS

Setting Up the Development Environment

Installing Django

Before starting, ensure you have Python installed. You can install Django using pip:

pip install django

Creating a new Django project

Create a new Django project using the following command:

django-admin startproject event_management

Setting up the project structure

Navigate into your project directory:

cd event_management

Create a Django App

Create a new app within your project:

python manage.py startapp events

Adding the app to the project

In event_management/settings.py, add events to the INSTALLED_APPS list:

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

Creating the Event Management System App

Create Models

In events/models.py, define models for events:

from django.db import models

class Event(models.Model):
    name = models.CharField(max_length=100)
    description = models.TextField()
    date = models.DateTimeField()
    location = models.CharField(max_length=200)

    def __str__(self):
        return self.name

Create Forms

In events, create a new file named forms.py for the Event model and add the following function:

from django import forms
from .models import Event

class EventForm(forms.ModelForm):
    class Meta:
        model = Event
        fields = ['name', 'description', 'date', 'location']

Create Views

Next, we’ll create views for listing, adding, updating, and deleting Event items. Open events/views.py and add the following:

from django.shortcuts import render, redirect, get_object_or_404
from .models import Event
from .forms import EventForm


def event_list(request):
    events = Event.objects.all()
    return render(request, 'event_list.html', {'events': events})

def event_detail(request, pk):
    event = get_object_or_404(Event, pk=pk)
    return render(request, 'event_detail.html', {'event': event})

def add_event(request):
    if request.method == 'POST':
        form = EventForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('event_list')
    else:
        form = EventForm()
    return render(request, 'event_form.html', {'form': form, 'title': 'Add Event'})

def update_event(request, pk):
    event = Event.objects.get(pk=pk)
    if request.method == 'POST':
        form = EventForm(request.POST, instance=event)
        if form.is_valid():
            form.save()
            return redirect('event_list')
    else:
        form = EventForm(instance=event)
    return render(request, 'event_form.html', {'form': form, 'title': 'Update Event'})

def delete_event(request, pk):
    event = Event.objects.get(pk=pk)
    if request.method == 'POST':
        event.delete()
        return redirect('event_list')
    return render(request, 'event_confirm_delete.html', {'event': event})

Create Templates

Create a templates directory within the Events app and then create base.html, event_list.html, event_detail.html, event_confirm_delete.html and event_form.html inside this directory.

base.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Event Management{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
</head>
<body>
    <h1 class="text-center mt-3 text-danger">Event Management System</h1>
    <div class="container mt-4">
        {% block content %}{% endblock %}
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#id_date').datepicker({
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayHighlight: true
            });
        });
    </script>
</body>
</html>

event_list.html

{% extends 'base.html' %}

{% block title %}Event List{% endblock %}

{% block content %}
<h1 class="text-center mb-4">Upcoming Events</h1>
<a href="{% url 'add_event' %}" class="btn btn-primary mb-3">Add New Event</a>
<div class="row">
    {% for event in events %}
    <div class="col-md-4 mb-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title"><a href="{% url 'event_detail' event.pk %}" class="text-decoration-none">{{ event.name }}</a></h5>
                <p class="card-text">{{ event.description|truncatewords:20 }}</p>
                <p><strong>Date:</strong> {{ event.date }}</p>
                <p><strong>Location:</strong> {{ event.location }}</p>
                <a href="{% url 'update_event' event.pk %}" class="btn btn-warning btn-sm">Edit</a>
                <a href="{% url 'delete_event' event.pk %}" class="btn btn-danger btn-sm">Delete</a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

event_detail.html

{% load static %}

<!DOCTYPE html>
<html>
<head>
    <title>{{ event.name }}</title>
    <link rel="stylesheet" href="{% static 'style.css' %}">
</head>
<body>
    <h1>{{ event.name }}</h1>
    <p>{{ event.description }}</p>
    <p><strong>Date:</strong> {{ event.date }}</p>
    <p><strong>Location:</strong> {{ event.location }}</p>
</body>
</html>

Customizing Forms with Django Widget Tweaks

To make form fields look more attractive with Bootstrap styles, you can use the django-widget-tweaks package. Install it via pip:

pip install django-widget-tweaks

Add widget_tweaks to your INSTALLED_APPS in settings.py.

INSTALLED_APPS = [
    # other apps
    'widget_tweaks',
]

Then, update your form fields in event_form.html using django-widget-tweaks:

{{ form.name|add_class:"form-control" }}

event_form.html

{% extends 'base.html' %}
{% load widget_tweaks %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<h1 class="mb-4">{{ title }}</h1>
<form method="post" class="needs-validation" novalidate>
    {% csrf_token %}
    <div class="mb-3">
        {{ form.name.label_tag }}
        {{ form.name|add_class:"form-control" }}
    </div>
    <div class="mb-3">
        {{ form.description.label_tag }}
        {{ form.description|add_class:"form-control" }}
    </div>
    <div class="mb-3">
        {{ form.date.label_tag }}
        {{ form.date|add_class:"form-control" }}  <!-- The date field -->
    </div>
    <div class="mb-3">
        {{ form.location.label_tag }}
        {{ form.location|add_class:"form-control" }}
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
    <a href="{% url 'event_list' %}" class="btn btn-secondary">Cancel</a>
</form>
{% endblock %}

event_confirm_delete.html

{% extends 'base.html' %}

{% block title %}Delete Event{% endblock %}

{% block content %}
<div class="card">
    <div class="card-body">
        <h1 class="card-title">Delete Event</h1>
        <p>Are you sure you want to delete "<strong>{{ event.name }}</strong>"?</p>
        <form method="post">
            {% csrf_token %}
            <button type="submit" class="btn btn-danger">Delete</button>
            <a href="{% url 'event_list' %}" class="btn btn-secondary">Cancel</a>
        </form>
    </div>
</div>
{% endblock %}

Add CSS Styling

Create a CSS file named style.css in events/static/ and add the following styles:

body {
    background-color: #f8f9fa;
}

.card {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: 2.5rem;
    color: #333;
}

.card-title a {
    color: #007bff;
    text-decoration: none;
}

.card-title a:hover {
    text-decoration: underline;
}

Include Static Files

Make sure Django is configured to serve static files in development. Ensure you have these settings in event_management/settings.py:

STATIC_URL = '/static/'

Set Up URL Routing

Add a URL pattern for your view. In events/urls.py (create this file if it doesn't exist), add:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.event_list, name='event_list'),
    path('add/', views.add_event, name='add_event'),
    path('<int:pk>/edit/', views.update_event, name='update_event'),
    path('<int:pk>/delete/', views.delete_event, name='delete_event'),
    path('<int:pk>/', views.event_detail, name='event_detail'),
]

Include the app's URLs in your project's URL configuration. Open event_management/urls.py and include the event management system app URLs:

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

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

Run Your Server

Run migrations:

python manage.py makemigrations
python manage.py migrate

Run the development server:

python manage.py runserver

Open your browser and go to http://127.0.0.1:8000/ to see your event management system app in action.

Full Event Management System App Project Structure

event_management/
│
├── event_management/           # Project directory
│   ├── __init__.py
│   ├── settings.py             # Project settings
│   ├── urls.py                 # Project URL configurations
│   ├── wsgi.py                 # WSGI entry point for the project
│   └── asgi.py                 # ASGI entry point for the project (optional)
│
├── events/                     # App directory
│   ├── migrations/             # Database migrations
│   ├── __init__.py
│   ├── admin.py                # Admin configuration
│   ├── apps.py                 # App configuration
│   ├── models.py               # Database models
│   ├── tests.py                # Automated tests
│   ├── views.py                # Views for handling requests
│   ├── forms.py                # Forms for user input
│   ├── urls.py                 # App-specific URL configurations
│   ├── templates/              # Templates for the app 
│   │     ├── base.html    	  # Base template          
│   │     ├── event_list.html    # Template for listing events
│   │     ├── event_detail.html  # Template for event details
│   │     ├── event_form.html    # Template for creating/updating events
│   │     ├── event_confirm_delete.html  # Template for confirming deletion
│   └── static/                 # Static files (CSS, JS, Images)
│         └── style.css        # Custom styles
│
├── manage.py                   # Django's command-line utility
│
└── db.sqlite3                  # SQLite database file (created after running migrations)

Conclusion

Building an event management system in Django is a great way to enhance your web development skills while creating something useful. By following this guide, you’ve learned how to set up a Django project, create models, views, templates, and style your application with Bootstrap. With the knowledge gained, you can now customize and expand your system to suit your needs. Keep exploring Django, and you’ll be able to create even more advanced web applications in no time.

That’s a wrap!

I hope you enjoyed this article

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊