python --version
pip --version
django-admin --version

pip install pipenv
#Important to install pipenv so we can activate the Virtual Environment using pipenv

pipenv shell
#We can now create the Virtual Environment

pipenv install django
#Install django so we can begin to do the basic uses

pipenv freeze
#Showcases the existing downloaded extensions

django-admin startproject ProjectName
#Creates a new Folder ProjectName, once this file is created there will be .py files that will automatically created within its folder.

ls
#Shows the existing files within the current cd in the file, specifically used in this situation to locate the manage.py

python manage.py startapp AppName
#Creates a new Folder AppName, this file will contain another group of .py files that will will automatically be created within its folder. You can change the name to something other than AppName

python manage.py runserver
#This will run the current server within the project file. Depending on the gien data it can showcase a default page from django, or the properly formatted data.

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

    'myapp',  # 👈 Your custom app goes here
]

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('App_Folder.urls')), #path to the app added
]

from django.urls import path
from . import views

# Define a list of url patterns

urlpatterns =[
    path('', views.index)
]

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello World")

#index.html within the template folder


    
        
        
        Hello World
    
    
        Congrats on Making the HTML file
    




    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  for views.py

#view.py within the app folder
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def index(request):
    return render(request, 'HelloWorld/index.html') 
    #changed to response to render then the path to the index.html



    Enter fullscreen mode
    


    Exit fullscreen mode
    




If done successfully, this should be the output:
  
  
  Phase 4: Input, Store, and Display: (Views + Forms + Models + Htmx)
Return to Top
  
  
  New Concepts introduced:

  
  
  models.py
In Django, models are Python classes that define the structure of your data. Each model maps to a single table in your database, and each attribute of the class represents a column in that table. Django takes care of generating SQL code behind the scenes, so you don’t need to write any raw database queries to store, retrieve, or manipulate data. This makes data persistence much easier, especially across server restarts or page refreshes.
  
  
  forms.py
Django’s forms system lets you generate HTML forms directly from Python classes. Not only does it generate input fields for you, but it also handles validation, error reporting, and re-rendering forms when input is invalid. There are two main types: regular Form classes and ModelForm, which ties a form directly to a model. This saves you from writing repetitive code and keeps everything in sync.
  
  
  HTMX
HTMX is a JavaScript library that allows you to build dynamic user interfaces without writing complex JavaScript. Instead of manually handling events, crafting fetch requests, and updating the DOM, HTMX lets you use simple HTML attributes to say “when this happens, fetch that and put it here.” It integrates well with Django’s templating system, enabling a smoother development experience for adding interactivity.
For this phase, we will use only the POST method via the hx-method parameter, which makes the website send the submitted data to the element specified by hx-target.

  
  
  Implementation of concepts:
Let us bring together the concepts learned thus far and create a simple Task Entry System. Here is the overview of the needed structure:

taskmanager/                ← Django project folder
│
├── taskmanager/            ← Project-level settings folder
│   ├── __init__.py
│   ├── settings.py         ← Add app named 'tasks' in settings
│   ├── urls.py             ← Project-level URL config (we'll modify this)
│   └── wsgi.py
│
├── tasks/                  ← Your Django app folder
│   ├── migrations/
│   ├── templates/
│   │   ├── tasks/ 
│   │   |   └── task_item.html  ← Render individual task dynamically
│   │   |   └── task_list.html  ← Main template
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py            ← Define your form here
│   ├── models.py           ← Define your data model
│   ├── tests.py
│   ├── urls.py             ← App-level URL config
│   └── views.py            ← Your main logic lives here
│
└── manage.py




    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  for HTMX
-first install the requirements for htmx

pipenv install django-htmx



    Enter fullscreen mode
    


    Exit fullscreen mode
    




-further configure later in settings.py
  
  
  for settings.py
-ensure that your project knows of the existence of its app, as well as htmx

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

    'tasks',  # ← Add this
    'django-htmx',  # ← Add this too
]



    Enter fullscreen mode
    


    Exit fullscreen mode
    




-add htmx middleware in the middlewares of settings.py

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',

    # 👇 Add this
    'django_htmx.middleware.HtmxMiddleware',

    'django.middleware.csrf.CsrfViewMiddleware',
    # other middlewares...
]




    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  for views.py

# views.py
from django.shortcuts import render, redirect
from .models import Task
from .forms import TaskForm

def task_list_view(request):
    # Get all tasks from the database
    tasks = Task.objects.all()

    # Create a new form instance, pre-populating with POST data if available
    form = TaskForm(request.POST or None)

    if form.is_valid():
        # If the form is valid, save the new task to the database
        task = form.save()

        # If the request is made via HTMX, return only the partial HTML for the new task
        if request.htmx:
            return render(request, 'tasks/task_item.html', {'task': task})

        # If not HTMX, redirect to refresh the page and show the updated task list
        return redirect('task_list')

    # If form is invalid, render the task list page with errors
    return render(request, 'task_list.html', {'tasks': tasks, 'form': form})





    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  for urls.py
-project-level urls.py
--ensure that django knows how to route to your app's routings

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

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



    Enter fullscreen mode
    


    Exit fullscreen mode
    




-app-level urls.py
--show django how to route to the current app's views

from django.urls import path
from . import views

urlpatterns = [
    path('', views.task_list_view, name='task_list'),
]




    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  for models.py
-create a container for each instance of task and its attached data fields

# models.py
from django.db import models

class Task(models.Model):
    name = models.CharField(max_length=100)
    description = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.name




    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  for forms.py
-create a platform where the user can insert the values that matches the container made

# forms.py
from django import forms
from .models import Task

class TaskForm(forms.ModelForm):
    class Meta:
        model = Task
        fields = ['name', 'description']




    Enter fullscreen mode
    


    Exit fullscreen mode
    




once the model and form has been created, type this in the terminal:

python manage.py makemigrations
python manage.py migrate



    Enter fullscreen mode
    


    Exit fullscreen mode
    




When working with Django models, you’re not directly writing SQL to change the database. Instead, you let Django handle that with these two commands:✅ python manage.py makemigrations
This generates migration files—think of these as Django’s version of “SQL instructions” based on the changes you made in your models.py. It doesn’t change your database yet—it just prepares the changes.Example: You added a Task model? This command will create a file like 0001_initial.py describing how to build that table.✅ python manage.py migrate
This actually applies the instructions from the migration files to your database. It reads the migration files and executes the necessary SQL to create or update tables.This is where your Task table actually gets created in db.sqlite3.
  
  
  for templates in templates folder:
-task_list.html



    
    Task List
     
    


    Task Manager

    
        {% csrf_token %}
        {{ form.as_p }}
        Add Task
    

    

    Tasks
    
        {% for task in tasks %}
            {% include 'partials/task_item.html' with task=task %}
        {% endfor %}
    





    Enter fullscreen mode
    


    Exit fullscreen mode
    




just like that, that's how easy you can attach htmx in html.
-task_item.html



    {{ task.name }}
    {{ task.description }}
    {{ task.created_at }}
    





    Enter fullscreen mode
    


    Exit fullscreen mode
    




Here is the output:
  
  
  Phase 5: Creating a Task Manager
Return to Top
Now that we’ve set up task creation and listing, let’s make this a proper task manager by allowing users to edit and delete tasks—without refreshing the page.This is where HTMX continues to shine. With minimal effort, we’ll handle these interactions through Django views and templates, triggered by hx-get, hx-post, and hx-target.
  
  
  New Concepts introduced:
hx-get, hx-post, hx-target
These are HTML attributes provided by HTMX. With them, you can define:hx-get: Fetch a URL when an event (e.g., click) happens.hx-post: Send form data to a URL.hx-target: Where in the DOM to place the response.hx-swap: How to inject the returned HTML (e.g., innerHTML, beforeend).
  
  
  Structure Overview update:

taskmanager/
│
├── taskmanager/
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py  
│   └── wsgi.py
│
├── tasks/      
│   ├── migrations/
│   ├── templates/
│   │   ├── tasks/ 
│   │   |   └── task_item.html        ← ✅ modified: added Edit/Delete
│   │   |   └── task_list.html
│   │   │   └── edit_task_form.html   ← 🆕 new: form used for inline editing
│   │   └── task_list.html  
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py  
│   ├── models.py
│   ├── tests.py
│   ├── urls.py                       ← ✅ modified: added `edit/` and `delete/` routes
│   └── views.py                      ← ✅ modified: added `task_edit_view` and `task_delete_view`
│
└── manage.py




    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  for app level urls.py modification:
add routes for the added functionality of editing and deleting each task

from django.urls import path
from . import views

urlpatterns = [
    path('', views.task_list_view, name='task_list'),
    path('edit//', views.task_edit_view, name='task_edit'),
    path('delete//', views.task_delete_view, name='task_delete'),
]



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  for views.py
update views to include edit and delete functions

from django.shortcuts import render, get_object_or_404, redirect
from django.http import HttpResponse
from .models import Task
from .forms import TaskForm

def task_list_view(request):
    tasks = Task.objects.all()
    form = TaskForm(request.POST or None)

    if form.is_valid():
        task = form.save()
        if request.htmx:
            return render(request, 'partials/task_item.html', {'task': task})
        return redirect('task_list')

    return render(request, 'task_list.html', {'tasks': tasks, 'form': form})


def task_edit_view(request, pk):
    task = get_object_or_404(Task, pk=pk)
    form = TaskForm(request.POST or None, instance=task)

    if request.method == 'POST' and form.is_valid():
        form.save()
        return render(request, 'partials/task_item.html', {'task': task})

    return render(request, 'partials/edit_task_form.html', {'form': form, 'task': task})


def task_delete_view(request, pk):
    task = get_object_or_404(Task, pk=pk)
    task.delete()
    return HttpResponse('')




    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  for templates in templates folder and partials folder:
-updating task_item.html to include the edit and delete buttons per task


    {{ task.name }}
    {{ task.description }}
    {{ task.created_at }}
    
    
        Edit
    
    
        Delete
    
    





    Enter fullscreen mode
    


    Exit fullscreen mode
    




-adding an edit_task_form.html to allow the user to submit new input


    {% csrf_token %}
    {{ form.as_p }}
    Save





    Enter fullscreen mode
    


    Exit fullscreen mode
    




Here is the output:
  
  
  Wrapping It Up
In this tutorial, we’ve built a dynamic task manager using Django and HTMX, learning how to efficiently handle form submissions, create tasks, and update the user interface without full page reloads. By leveraging the power of HTMX for dynamic interactions, we were able to make our application feel faster and more responsive without needing to rely on heavy JavaScript or complex frontend frameworks.We've also explored key Django concepts such as model creation, form handling, and template rendering, while keeping our focus on the task at hand — creating a smooth and seamless user experience.
  
  
  What's Next?
Now that you’ve learned the core concepts behind a task manager application with Django and HTMX, you can take these techniques and apply them to your own projects. Consider expanding your task manager by adding more features like task prioritization, due dates, user authentication, and even notifications. The possibilities are endless, and with HTMX, the development process becomes even more enjoyable.Feel free to explore the official Django and HTMX documentation to deepen your understanding, and always remember that creating interactive, dynamic web applications can be both powerful and efficient with the right tools.Happy coding!