{"id":87894,"date":"2023-06-21T09:00:57","date_gmt":"2023-06-21T03:30:57","guid":{"rendered":"https:\/\/techvidvan.com\/tutorials\/?p=87894"},"modified":"2023-06-21T09:00:57","modified_gmt":"2023-06-21T03:30:57","slug":"python-django-expense-tracker","status":"publish","type":"post","link":"https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/","title":{"rendered":"Python Django Expense Tracker &#8211; Say Goodbye to Financial Stress"},"content":{"rendered":"<p>Effectively managing expenses play a crucial role in personal finance. By diligently tracking expenses, individuals can make informed financial choices and adhere to their budgets. Employing an Expense Tracker Web Application simplifies the process of monitoring expenses and effectively managing financial matters.<\/p>\n<p>This project focuses on developing an Expense Tracker Django Web Application that empowers users to create profiles and track their expenses based on the categories they specified during profile creation.<\/p>\n<h3>About Python Django Expense Tracker Project<\/h3>\n<p>The objective of this project is to guide you in building a web application enabling users to establish profiles, input expenses, and monitor their spending according to the categories they specified during profile creation.<\/p>\n<h3>Prerequisite for Expense Tracker using Python Django<\/h3>\n<p>Prior to commencing this project, it is recommended to possess fundamental knowledge of Django Framework, HTML, CSS, JavaScript, and Bootstrap.<\/p>\n<p>You should also have Python, Django, and a code editor installed on your system.<\/p>\n<h3>Download Python Django Expense Tracker Project<\/h3>\n<p>Please download the source code of Python Django Expense Tracker Project from the following link:<a href=\"https:\/\/techvidvan.s3.amazonaws.com\/python-projects\/expense-tracker.zip\"><strong>\u00a0Django Expense Tracker Project Code<\/strong><\/a><\/p>\n<h3>Steps to create Expense Tracker using Python Django<\/h3>\n<p>Following are the steps for developing the Expense Tracker :<\/p>\n<p><strong>Step 1:<\/strong> Setting up the Django Project<\/p>\n<p><strong>Step 2:<\/strong> Creating the Expense Tracker App<\/p>\n<p><strong>Step 3:<\/strong> Creating the Models<\/p>\n<p><strong>Step 4:<\/strong> Creating the Views<\/p>\n<p><strong>Step 5:<\/strong> Creating the Forms<\/p>\n<p><strong>Step 6:<\/strong> Creating the Templates<\/p>\n<p><strong>Step 7:<\/strong> Migrating the Database<\/p>\n<p><strong>Step 8:<\/strong> Running the Server<\/p>\n<h4>Step 1: Setting up the Django Project<\/h4>\n<p><strong>a. <\/strong>Install Django using pip:<br \/>\nIn order to create a Django project, it is necessary to have Django installed. If you haven&#8217;t installed it already, please access your terminal or command prompt and execute the following command:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">pip install Django<\/pre>\n<p><strong>b.<\/strong> Create a new Django project using the following command:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">django-admin startproject expense_tracker<\/pre>\n<p><strong>c.<\/strong> Change your current directory to the newly created project directory using the following command:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">cd expense_tracker<\/pre>\n<h4>Step 2: Creating the Expense Tracker App<\/h4>\n<p><strong>a.<\/strong> Create a new Django app called &#8216;budget&#8217; using the following command:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">python manage.py startapp budget<\/pre>\n<p><strong>b.<\/strong> Add &#8216;budget&#8217; to your project&#8217;s installed apps by opening the &#8216;settings.py&#8217; file located in the project directory and adding &#8216;budget&#8217; to the INSTALLED_APPS list.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\"># Application definition\nINSTALLED_APPS = [\n   'django.contrib.admin',\n   'django.contrib.auth',\n   'django.contrib.contenttypes',\n   'django.contrib.sessions',\n   'django.contrib.messages',\n   'django.contrib.staticfiles',\n   'budget',\n]<\/pre>\n<p><strong>c.<\/strong> Create a file called &#8216;urls.py&#8217; in the &#8216;budget&#8217; app directory and open it, then add the following code to it:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\"># Description: This file contains the urls for the budget app\n\n\n# Importing libraries\nfrom django.contrib import admin\nfrom django.urls import path,include\nfrom .import views\n\n\n# Defining the url patterns\nurlpatterns = [\n   path('',views.project_list,name = 'list'),\n   path('add', views.ProjectCreateView.as_view(),name ='add'),\n   path('&lt;slug:project_slug&gt;',views.project_detail,name='detail'),\n]<\/pre>\n<p>The urls.py file defines the URL patterns for the app. The first pattern maps the root URL to the project_list function. The second pattern maps the add URL to the ProjectCreateView class. The third pattern maps a URL with a project slug to the project_detail function.<\/p>\n<h4>Step 3: Creating the Models<\/h4>\n<p><strong>a.<\/strong> Open the &#8216;models.py&#8217; file located in the &#8216;budget&#8217; app directory.<\/p>\n<p><strong>b.<\/strong> Define the models for the Expense Tracker app as shown below.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\"># Importing the necessary libraries\nfrom django.db import models\nfrom django.utils.text import slugify\n\n\n#-------------------------- Models --------------------------#\n\n\n# Creating the Project model to store the project details like name, slug, budget\nclass Project(models.Model):\n  \n   # Defining the fields of the Project model\n   name = models.CharField(max_length=100)\n   slug = models.SlugField(max_length=100,unique=True,blank=True)\n   budget = models.IntegerField()\n  \n   # Defining the save method to create the slug\n   def save(self, *args,**kwargs):\n       self.slug = slugify(self.name)\n       super(Project,self).save(*args,**kwargs)\n      \n   # Defining the budget_left method to calculate the budget left\n   def budget_left(self):\n       expense_list = Expense.objects.filter(project= self)\n       total_expense_amount =0\n       for expense in expense_list:\n           total_expense_amount += expense.amount\n\n\n       return self.budget- total_expense_amount\n  \n   # Defining the total_transactions method to calculate the total number of transactions\n   def total_transactions(self):\n       expense_list = Expense.objects.filter(project= self)\n       return len(expense_list)\n\n\n# Creating the Category model to store the category details like name, project\nclass Category(models.Model):\n   # Defining the fields of the Category model\n   project = models.ForeignKey(Project, on_delete=models.CASCADE)\n   name = models.CharField(max_length=100)\n\n\n# Creating the Expense model to store the expense details like project, title, amount, category\nclass Expense(models.Model):\n   # Defining the fields of the Expense model\n   project = models.ForeignKey(Project, on_delete=models.CASCADE, related_name='expenses')\n   title = models.CharField(max_length=100)\n   amount = models.DecimalField( max_digits=8, decimal_places=2)\n   category = models.ForeignKey(Category, on_delete=models.CASCADE)\n  \n   # Defining the Meta class to order the expenses by amount\n   class Meta:\n       ordering = ('-amount',)<\/pre>\n<p>The models.py file defines the Project, Category, and Expense models used by the app. Project and Category are related by a foreign key relationship, and Expense is related to both Project and Category using foreign keys. Project has a budget_left method that calculates the amount of budget remaining after subtracting all expenses, and a total_transactions method that counts the total number of expenses associated with the project.<\/p>\n<h4>Step 4: Creating the Views<\/h4>\n<p><strong>a.<\/strong> Open the &#8216;views.py&#8217; file located in the &#8216;budget&#8217; app directory.<br \/>\n<strong>b.<\/strong> Define the views for the Expense Tracker app as shown below.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\"># Importing the required libraries\nfrom django.shortcuts import render,get_object_or_404\nfrom django.http import HttpResponseRedirect, HttpResponse\nfrom .models import Project, Category, Expense\nfrom django.views.generic import CreateView\nfrom django.utils.text import slugify\nfrom .forms import ExpenseForm\nimport json\n\n\n#------------------------ Views ------------------------#\n\n\n# View for the project list page\n# It will return the list of projects\ndef project_list(request):\n  \n   # Getting the list of projects\n   project_list = Project.objects.all()\n  \n   # Returning the project list page\n   return render(request,'budget\/project-list.html',{'project_list':project_list})\n\n\n# View for the project detail page\n# It will return the details of the project and the list of expenses\ndef project_detail(request, project_slug):\n  \n   # Getting the project object\n   project = get_object_or_404(Project,slug=project_slug)\n  \n   # Checking the request method\n   # If the request method is GET, then it will return the project detail page\n   if request.method == 'GET':\n       category_list = Category.objects.filter(project=project)\n       return render(request,'budget\/project-detail.html',{'project':project, 'expense_list': project.expenses.all(), 'category_list':category_list})\n  \n   # If the request method is POST, then it will create a new expense\n   elif request.method == 'POST':\n       # Getting the form data and checking if it is valid\n       form = ExpenseForm(request.POST)\n       if form.is_valid():\n          \n           # Getting the form data if it is valid\n           title = form.cleaned_data['title']\n           amount = form.cleaned_data['amount']\n           category_name = form.cleaned_data['category']\n           category= get_object_or_404(Category, project = project, name= category_name)\n          \n           # Creating the expense object and saving it\n           Expense.objects.create(\n               project=project,\n               title=title,\n               amount=amount,\n               category=category\n           ).save()\n          \n   # If the request method is DELETE, then it will delete the expense\n   elif request.method == 'DELETE':\n      \n       # Getting the expense id from the request body and deleting the expense\n       id = json.loads(request.body)['id']\n       expense = get_object_or_404(Expense,id =id)\n       expense.delete()\n       return HttpResponse('')\n  \n   # Redirecting to the project detail page\n   return HttpResponseRedirect(project_slug)\n\n\n# View for the add project page\n# It will create a new project\nclass ProjectCreateView(CreateView):\n  \n   # Defining the model, template and fields\n   model = Project\n   template_name = 'budget\/add-project.html'\n   fields = {'name','budget'}\n  \n   # Defining the form_valid method to create the categories\n   def form_valid(self, form):\n       self.object = form.save(commit=False)\n       self.object.save()\n\n\n       categories = self.request.POST['categoriesString'].split(',')\n      \n       # Creating the categories and saving them\n       for category in categories:\n           Category.objects.create(\n               project = Project.objects.get(id=self.object.id),\n               name = category\n           ).save()\n       return HttpResponseRedirect(self.get_success_url())\n  \n   # Defining the get_success_url method to redirect to the project detail page\n   def get_success_url(self):\n       return slugify(self.request.POST['name'])<\/pre>\n<p>The views.py file defines several functions that handle different HTTP requests made by the user.<\/p>\n<ul>\n<li>The project_list function fetches all Project objects from the database and transfers them to the project-list.html template to be rendered.<\/li>\n<li>The <strong>project_detail<\/strong> function takes a project_slug as a parameter, retrieves the corresponding Project object from the database using get_object_or_404, and returns a rendered template with the project information, expense list, and category list.When the request method is GET, the function proceeds to render the project-detail.html template along with the required data. If the method is POST, it extracts the Expense form data and creates a new Expense object associated with the corresponding Project and Category object before saving it to the database. If the method is DELETE, it extracts the id from the request body and deletes the corresponding Expense object from the database.<\/li>\n<li>The <strong>ProjectCreateView<\/strong> class handles the creation of new Project objects. It extends Django&#8217;s CreateView class, which provides built-in functionality for creating new objects. Also, the form_valid method is overridden to create new Category objects associated with the Project. It extracts the categories from the categoriesString field in the form data, creates new Category objects for each one, and saves them to the database.<\/li>\n<\/ul>\n<h4>Step 5: Creating the Forms<\/h4>\n<p>a. Create a file named \u2018forms.py\u2019 file in the \u2018budget\u2019 app directory.<br \/>\nb. Open the &#8216;forms.py&#8217; file<br \/>\nc. Define the form for adding expenses as shown below.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\"># Importing required libraries\nfrom django import forms\n\n\n# Creating a form class for the expense\nclass ExpenseForm(forms.Form):\n  \n   # Defining the fields for the form\n   title = forms.CharField()\n   amount = forms.IntegerField()\n   category = forms.CharField()\n  \n   # Defining the widgets for the form\n   widget = {\n       'title': forms.TextInput(attrs={'class': 'input-group form-control form-control-lg'}),\n       'amount': forms.TextInput(attrs={'class': 'input-group form-control form-control-lg'}), \n   }<\/pre>\n<p>The <strong>forms.py<\/strong> file defines the ExpenseForm form used to create new Expense objects. It has fields for the title, amount, and category of the expense, and includes widgets for styling the input fields.<\/p>\n<h4>Step 6: Creating the Templates<\/h4>\n<p>a. Create a new directory called &#8216;templates&#8217; in the &#8216;budget&#8217; app directory.<br \/>\nb. Create <strong>HTML<\/strong> templates for each view.<\/p>\n<p><strong>base.html :<\/strong> It is the base html file, using this we will use the bootstrap in all the other html files, and eliminate the rewriting of the code.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">{% load static %}\n&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n   &lt;meta charset=\"UTF-8\"&gt;\n   &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\n   &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n   &lt;title&gt;{% block title %}{% endblock title %}&lt;\/title&gt;\n   &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\"&gt;\n   &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn\/tWtIaxVXM\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n   &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.slim.min.js\"&gt;&lt;\/script&gt;\n   &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.6.0\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\n   &lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" integrity=\"sha512-iecdLmaskl7CVkqkXNQ\/ZH\/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT\/E0iPtmFIB46ZmdtAc9eNBvH0H\/ZpiBw==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/&gt;\n\n\n&lt;\/head&gt;\n&lt;body&gt;\n   {% block content %}\n  \n   {% endblock content %}\n   &lt;style&gt;\n\n\n       body {\n           background: linear-gradient(180deg, #ebf4f5, #b5c6e0);\n           background-size: 100% 100%;\n           background-repeat: no-repeat;\n           background-attachment: fixed;\n           background-position: center;\n           background-size: cover;\n       }\n      \n   &lt;\/style&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p><b>add-project.html:<\/b><span style=\"font-weight: 400\"> This html file will provide the view to add new user profile to the system.<\/span><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">{% extends 'budget\/base.html' %}\n{% block title %}\nAdd Project\n{% endblock title %}\n{% block content %}\n&lt;br&gt;\n  &lt;div class=\"container\"&gt;\n   &lt;div class=\"row justify-content-center\"&gt;\n     &lt;div class=\"col-md-8 col-lg-6\"&gt;\n       &lt;h1 class=\"text-center mb-5\"&gt;Add Project&lt;\/h1&gt;\n       &lt;form action=\"\" method=\"POST\" class=\"p-4 rounded-3 bg-gradient\"&gt;\n         {% csrf_token %}\n         {% for field in form %}\n           &lt;div class=\"mb-3\"&gt;\n               &lt;label for=\"{{ field.id_for_label }}\" class=\"form-label h6\"&gt;{{ field.label }}&lt;\/label&gt;\n               &lt;input type=\"text\" class=\"form-control form-control-lg\" id=\"{{ field.id_for_label }}\" name=\"{{ field.name }}\" &gt;\n           &lt;\/div&gt;\n         {% endfor %}\n         &lt;div class=\"mb-3\"&gt;\n           &lt;br&gt;\n           &lt;br&gt;\n           &lt;label for=\"categoryInput\" class=\"form-label h6\"&gt;Expense Categories (hit enter after every category)&lt;\/label&gt;\n           &lt;div class=\"input-group\"&gt;\n             &lt;input type=\"text\" class=\"form-control form-control-lg\" id=\"categoryInput\" placeholder=\"Enter category\" aria-describedby=\"addCategoryBtn\"&gt;\n             &lt;button type=\"button\" class=\"btn btn-primary btn-lg\" id=\"addCategoryBtn\"&gt;Add&lt;\/button&gt;\n           &lt;\/div&gt;\n         &lt;\/div&gt;\n         &lt;input type=\"hidden\" name=\"categoriesString\" id=\"categoriesString\"&gt;\n         &lt;div class=\"d-flex flex-wrap mb-3\" id=\"categoriesContainer\"&gt;\n         &lt;\/div&gt;\n         &lt;button type=\"submit\" class=\"btn btn-primary btn-lg w-100\"&gt;Start Project&lt;\/button&gt;\n       &lt;\/form&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;\n  &lt;script&gt;\n   const categoryInput = document.getElementById('categoryInput');\n   const categoriesContainer = document.getElementById('categoriesContainer');\n   const categoriesString = document.getElementById('categoriesString');\n    const addCategory = () =&gt; {\n     const category = categoryInput.value.trim();\n     if (!category) return;\n     const categoryBadge = `&lt;h4&gt;&lt;span class=\"badge bg-success me-2\"&gt;${category}&lt;span class=\"ms-2\" style=\"cursor: pointer;\" onclick=\"removeCategory(this)\"&gt;&lt;i class=\"fa-solid fa-xmark\"&gt;&lt;\/i&gt;&lt;\/span&gt;&lt;\/span&gt;&lt;\/h4&gt;`;\n     categoriesContainer.insertAdjacentHTML('beforeend', categoryBadge);\n     categoriesString.value = [...categoriesContainer.children].map(c =&gt; c.innerText.trim()).join(',');\n     categoryInput.value = '';\n   }\n    const removeCategory = (category) =&gt; {\n     category.parentElement.remove();\n     categoriesString.value = [...categoriesContainer.children].map(c =&gt; c.innerText.trim()).join(',');\n   }\n    categoryInput.addEventListener('keydown', (event) =&gt; {\n     if (event.key === 'Enter') {\n       event.preventDefault();\n       addCategory();\n     }\n   });\n    const addCategoryBtn = document.getElementById('addCategoryBtn');\n   addCategoryBtn.addEventListener('click', addCategory);\n &lt;\/script&gt;\n {% endblock content %}<\/pre>\n<p><strong>project-list.html:<\/strong> This html file will show all the available user profile on the web app.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">{% extends 'budget\/base.html' %}\n\n\n{% block title %}\nCreate Finance\n{% endblock title %}\n{% block content %}\n&lt;br&gt;\n&lt;div class=\"container\"&gt;\n   &lt;h1 class=\"text-center mb-5\"&gt;My Accounts&lt;\/h1&gt;\n   &lt;div class=\"row row-cols-1 row-cols-md-3 g-4\"&gt;\n     {% for project in project_list %}\n     &lt;div class=\"col\"&gt;\n       &lt;div class=\"card h-100\"&gt;\n         &lt;div class=\"card-body\"&gt;\n           &lt;h5 class=\"card-title\"&gt;{{ project.name }}&lt;\/h5&gt;\n           &lt;a href=\"{% url 'detail' project.slug %}\" class=\"btn btn-primary\"&gt;Visit&lt;\/a&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n     {% empty %}\n     &lt;div class=\"col\"&gt;\n       &lt;div class=\"card h-100 bg-light text-center\"&gt;\n         &lt;div class=\"card-body\"&gt;\n           &lt;h3 class=\"card-title text-muted\"&gt;Sorry, You don't have created any Finance History, yet.&lt;\/h3&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n     {% endfor %}\n     &lt;div class=\"col\"&gt;\n       &lt;div class=\"btn btn-lg card h-100 bg-success text-center\"&gt;\n         &lt;div class=\"card-body\"&gt;\n           &lt;a href=\"{% url 'add' %}\" class=\"btn-dark bg-success\" style=\"text-decoration: none;\"&gt;\n               &lt;i class=\"fa-solid fa-circle-plus\"&gt;&lt;\/i&gt;&lt;h3 class=\"card-title text-light\"&gt;Create New Finance&lt;\/h3&gt;\n           &lt;\/a&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;\n  &lt;style&gt;\n   body {\n     background-color: #f8f9fa;\n   }\n  \n   .btncreate {\n     margin-top: 2rem;\n     margin-bottom: 2rem;\n     width: 100%;\n   }\n &lt;\/style&gt;\n{% endblock content %}<\/pre>\n<p><strong>project-detail.html:<\/strong> Output{% extends &#8216;budget\/base.html&#8217; %}<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">{% load static %}\n{% block title %}\nFinance List\n{% endblock title %}\n{% block content %}\n&lt;br&gt;\n&lt;h3 class=\"text-center font-weight-bold mb-4\"&gt;Welcome back, {{ user.username }}&lt;\/h3&gt;\n&lt;div class=\"container\"&gt;\n   &lt;div class=\"row mb-4\"&gt;\n       &lt;div class=\"col-md-4\"&gt;\n           &lt;div class=\"card bg-primary text-white\"&gt;\n               &lt;div class=\"card-body\"&gt;\n                   &lt;h6 class=\"card-title font-weight-bold mb-3\"&gt;Total Budget&lt;\/h6&gt;\n                   &lt;h1 class=\"card-text font-weight-bold mb-0\"&gt;\u20b9{{ project.budget }}&lt;\/h1&gt;\n               &lt;\/div&gt;\n           &lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"col-md-4\"&gt;\n           &lt;div class=\"card bg-success text-white\"&gt;\n               &lt;div class=\"card-body\"&gt;\n                   &lt;h6 class=\"card-title font-weight-bold mb-3\"&gt;Budget Left&lt;\/h6&gt;\n                   {% if project.budget_left &gt; 0 %}\n                   &lt;h1 class=\"card-text font-weight-bold mb-0\"&gt;\u20b9{{ project.budget_left }}&lt;\/h1&gt; \n                   {% elif project.budget_left == 0 %}\n                   &lt;h1 class=\"card-text font-weight-bold mb-0\"&gt;\u20b9{{ project.budget_left }}&lt;\/h1&gt;\n                   {% else %}\n                   &lt;h1 class=\"card-text font-weight-bold mb-0\"&gt;\u20b9{{ project.budget_left }}&lt;\/h1&gt;\n                   {% endif %}\n               &lt;\/div&gt;\n           &lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"col-md-4\"&gt;\n           &lt;div class=\"card bg-secondary text-white\"&gt;\n               &lt;div class=\"card-body\"&gt;\n                   &lt;h6 class=\"card-title font-weight-bold mb-3\"&gt;Total Transactions&lt;\/h6&gt;\n                   &lt;h1 class=\"card-text font-weight-bold mb-0\"&gt;{{ project.total_transactions }}&lt;\/h1&gt;\n               &lt;\/div&gt;\n           &lt;\/div&gt;\n       &lt;\/div&gt;\n   &lt;\/div&gt;\n\n\n   &lt;center&gt;\n   &lt;div class=\"row mb-4\"&gt;\n       &lt;div class=\"col-md-12\"&gt;\n           &lt;button class=\"btn btn-success btn-lg float-right modal-trigger\" href=\"#expenseModal\" data-toggle=\"modal\" data-target=\"#expenseModal\"&gt;\n               &lt;i class=\"fas fa-plus-circle mr-2\"&gt;&lt;\/i&gt;\n               Add Expense\n           &lt;\/button&gt;\n       &lt;\/div&gt;\n   &lt;\/div&gt;\n   &lt;\/center&gt;\n&lt;center&gt;\n   &lt;div class=\"column\"&gt;\n       &lt;div class=\"col-md-10\"&gt;\n           &lt;table class=\"table table-striped table-hover\"&gt;\n               &lt;thead&gt;\n                   &lt;tr&gt;\n                       &lt;th&gt;Title&lt;\/th&gt;\n                       &lt;th&gt;Amount&lt;\/th&gt;\n                       &lt;th&gt;Category&lt;\/th&gt;\n                       &lt;th&gt;Action&lt;\/th&gt;\n                   &lt;\/tr&gt;\n               &lt;\/thead&gt;\n               &lt;tbody&gt;\n                   {% for expense in expense_list %}\n                   &lt;tr id=\"{{ expense.id }}\"&gt;\n                       &lt;td&gt;{{ expense.title }}&lt;\/td&gt;\n                       &lt;td&gt;\u20b9{{ expense.amount }}&lt;\/td&gt;\n                       &lt;td&gt;{{ expense.category.name }}&lt;\/td&gt;\n                       &lt;td&gt;\n                           &lt;button class=\"btn btn-sm btn-danger\" onclick=\"deleteExpense(this)\" data-id=\"{{ expense.id }}\"&gt;\n                               &lt;i class=\"fas fa-trash-alt\"&gt;&lt;\/i&gt;\n                               Delete\n                           &lt;\/button&gt;\n                       &lt;\/td&gt;\n                   &lt;\/tr&gt;\n                   {% endfor %}\n               &lt;\/tbody&gt;\n           &lt;\/table&gt;\n       &lt;\/div&gt;\n   &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/center&gt;\n\n\n&lt;div id=\"expenseModal\" class=\"modal fade\"&gt;\n   &lt;div class=\"modal-dialog\"&gt;\n       &lt;div class=\"modal-content\"&gt;\n           &lt;div class=\"modal-header\"&gt;\n               &lt;h4 class=\"modal-title font-weight-bold\"&gt;Add Expense&lt;\/h4&gt;\n               &lt;button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" aria-label=\"Close\"&gt;&lt;\/button&gt;\n           &lt;\/div&gt;\n           &lt;div class=\"modal-body\"&gt;\n               &lt;form action=\"\" method=\"POST\"&gt;\n                   {% csrf_token %}\n                   &lt;div class=\"mb-3\"&gt;\n                       &lt;label for=\"title\" class=\"form-label\"&gt;Title&lt;\/label&gt;\n                       &lt;input type=\"text\" class=\"form-control\" id=\"title\" name=\"title\"&gt;\n                   &lt;\/div&gt;\n                   &lt;div class=\"mb-3\"&gt;\n                       &lt;label for=\"amount\" class=\"form-label\"&gt;Amount&lt;\/label&gt;\n                       &lt;input type=\"text\" class=\"form-control\" id=\"amount\" name=\"amount\"&gt;\n                   &lt;\/div&gt;\n                   &lt;div class=\"mb-3\"&gt;\n                       &lt;label for=\"category\" class=\"form-label\"&gt;Category&lt;\/label&gt;\n                       &lt;select id=\"category\" class=\"form-select\" name=\"category\"&gt;\n                           {% for category in category_list %}\n                           &lt;option value=\"{{ category.name }}\"&gt;{{ category.name }}&lt;\/option&gt;\n                           {% endfor %}\n                       &lt;\/select&gt;\n                   &lt;\/div&gt;\n                   &lt;button type=\"submit\" class=\"btn btn-primary\"&gt;Add&lt;\/button&gt;\n               &lt;\/form&gt;\n           &lt;\/div&gt;\n       &lt;\/div&gt;\n   &lt;\/div&gt;\n&lt;\/div&gt;\n\n\n&lt;script&gt;\n   var elem = document.querySelector('.modal')\n   var instanace = M.Modal.init(elem)\n\n\n   var elem = document.querySelector('select')\n   var instanace = M.FormSelect.init(elem)\n\n\n   function deleteExpense(e){\n\n\n       let id = e.dataset.id\n       let row = document.getElementById(id)\n       row.remove()\n      \n       fetch('',{\n           method:'DELETE',\n           headers : {\n               'X-CSRFToken' : '{{ csrf_token }}'\n           },\n           body:JSON.stringify({\n               'id' :id\n           }),\n           credentials : 'same-origin',\n       })\n   }\n&lt;\/script&gt;\n{% endblock content %}<\/pre>\n<h4>Step 7<strong>:<\/strong> Migrating the Database<\/h4>\n<p>a. Execute the following command to create all the required database tables:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">python manage.py migrate<\/pre>\n<h4>Step 8: Running the Server<\/h4>\n<p>a. Start the Django development server by running the following command:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">python manage.py runserver<\/pre>\n<p>b. Open a web browser and navigate to the following URL:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">http:\/\/127.0.0.1:8000\/<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/06\/expense-tracker-output-scaled.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-87927 size-full\" src=\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/06\/expense-tracker-output-scaled.webp\" alt=\"expense tracker output\" width=\"2560\" height=\"1552\" \/><\/a><\/p>\n<h3><a href=\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/06\/django-expense-tracker-app-project-output-scaled.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-87930 size-full\" src=\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/06\/django-expense-tracker-app-project-output-scaled.webp\" alt=\"django expense tracker app project output\" width=\"2560\" height=\"1552\" \/><\/a><\/h3>\n<p><a href=\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/06\/django-expense-tracker-output-scaled.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-87928 size-full\" src=\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/06\/django-expense-tracker-output-scaled.webp\" alt=\"django expense tracker output\" width=\"2560\" height=\"1552\" \/><\/a><\/p>\n<h3><a href=\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/06\/django-expense-tracker-project-output-scaled.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-87929 size-full\" src=\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/06\/django-expense-tracker-project-output-scaled.webp\" alt=\"django expense tracker project output\" width=\"2560\" height=\"1557\" \/><\/a><\/h3>\n<h3>Summary:<\/h3>\n<p>Congratulations, you have successfully created an Expense Tracker Django Web Application that allows users to create profiles, add expenses, and track their expenses based on categories they entered while creating their profile. You can now use this application to manage your finances more efficiently. Nevertheless, this is just the beginning. You have the opportunity to incorporate additional functionalities based on your requirements, such as generating expense reports. The possibilities are limitless, and we trust that this project will assist you in initiating your Expense Tracker Web Application. Always remember to continue learning and enhancing your skills as a developer.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Effectively managing expenses play a crucial role in personal finance. By diligently tracking expenses, individuals can make informed financial choices and adhere to their budgets. Employing an Expense Tracker Web Application simplifies the process&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":87925,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3383],"tags":[5068,5069,5070,5071,5072,5073,5074,5075,5076],"class_list":["post-87894","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-django","tag-django-expense-tracker","tag-django-expense-tracker-project","tag-django-project-ideas","tag-django-projects-for-practice","tag-expense-tracker","tag-expense-tracker-project","tag-python-django-expense-tracker","tag-python-django-expense-tracker-project","tag-python-django-projects"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Python Django Expense Tracker - Say Goodbye to Financial Stress - TechVidvan<\/title>\n<meta name=\"description\" content=\"Manage your finances with our intuitive python django expense tracker. Stay organized, save money, and achieve your financial goals.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Python Django Expense Tracker - Say Goodbye to Financial Stress - TechVidvan\" \/>\n<meta property=\"og:description\" content=\"Manage your finances with our intuitive python django expense tracker. Stay organized, save money, and achieve your financial goals.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/\" \/>\n<meta property=\"og:site_name\" content=\"TechVidvan\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TechVidvan\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-21T03:30:57+00:00\" \/>\n<meta name=\"author\" content=\"TechVidvan Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vidvantech\" \/>\n<meta name=\"twitter:site\" content=\"@vidvantech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"TechVidvan Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Python Django Expense Tracker - Say Goodbye to Financial Stress - TechVidvan","description":"Manage your finances with our intuitive python django expense tracker. Stay organized, save money, and achieve your financial goals.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/","og_locale":"en_US","og_type":"article","og_title":"Python Django Expense Tracker - Say Goodbye to Financial Stress - TechVidvan","og_description":"Manage your finances with our intuitive python django expense tracker. Stay organized, save money, and achieve your financial goals.","og_url":"https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/","og_site_name":"TechVidvan","article_publisher":"https:\/\/www.facebook.com\/TechVidvan\/","article_published_time":"2023-06-21T03:30:57+00:00","author":"TechVidvan Team","twitter_card":"summary_large_image","twitter_creator":"@vidvantech","twitter_site":"@vidvantech","twitter_misc":{"Written by":"TechVidvan Team","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/#article","isPartOf":{"@id":"https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/"},"author":{"name":"TechVidvan Team","@id":"https:\/\/techvidvan.com\/tutorials\/#\/schema\/person\/e9c26e74dd3d87421f7ada9433b8cd22"},"headline":"Python Django Expense Tracker &#8211; Say Goodbye to Financial Stress","datePublished":"2023-06-21T03:30:57+00:00","mainEntityOfPage":{"@id":"https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/"},"wordCount":1068,"commentCount":0,"publisher":{"@id":"https:\/\/techvidvan.com\/tutorials\/#organization"},"image":{"@id":"https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/#primaryimage"},"thumbnailUrl":"","keywords":["django expense tracker","django expense tracker project","django project ideas","django projects for practice","expense tracker","expense tracker project","python django expense tracker","python django expense tracker project","python django projects"],"articleSection":["Django Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/","url":"https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/","name":"Python Django Expense Tracker - Say Goodbye to Financial Stress - TechVidvan","isPartOf":{"@id":"https:\/\/techvidvan.com\/tutorials\/#website"},"primaryImageOfPage":{"@id":"https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/#primaryimage"},"image":{"@id":"https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/#primaryimage"},"thumbnailUrl":"","datePublished":"2023-06-21T03:30:57+00:00","description":"Manage your finances with our intuitive python django expense tracker. Stay organized, save money, and achieve your financial goals.","breadcrumb":{"@id":"https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/techvidvan.com\/tutorials\/python-django-expense-tracker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/techvidvan.com\/tutorials\/"},{"@type":"ListItem","position":2,"name":"Python Django Expense Tracker &#8211; Say Goodbye to Financial Stress"}]},{"@type":"WebSite","@id":"https:\/\/techvidvan.com\/tutorials\/#website","url":"https:\/\/techvidvan.com\/tutorials\/","name":"TechVidvan Blogs","description":"","publisher":{"@id":"https:\/\/techvidvan.com\/tutorials\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/techvidvan.com\/tutorials\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/techvidvan.com\/tutorials\/#organization","name":"TechVidvan","url":"https:\/\/techvidvan.com\/tutorials\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/techvidvan.com\/tutorials\/#\/schema\/logo\/image\/","url":"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/2024\/03\/techvidvan-logo-200x50-1.webp","contentUrl":"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/2024\/03\/techvidvan-logo-200x50-1.webp","width":200,"height":50,"caption":"TechVidvan"},"image":{"@id":"https:\/\/techvidvan.com\/tutorials\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/TechVidvan\/","https:\/\/x.com\/vidvantech"]},{"@type":"Person","@id":"https:\/\/techvidvan.com\/tutorials\/#\/schema\/person\/e9c26e74dd3d87421f7ada9433b8cd22","name":"TechVidvan Team","description":"The TechVidvan Team delivers practical, beginner-friendly tutorials on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Our experts are here to help you upskill and excel in today\u2019s tech industry."}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/posts\/87894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/comments?post=87894"}],"version-history":[{"count":0,"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/posts\/87894\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/media?parent=87894"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/categories?post=87894"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techvidvan.com\/tutorials\/wp-json\/wp\/v2\/tags?post=87894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}