Python Django Wishlist Project

In Django, a wishlist is a model that represents a user’s list of items that they desire or want to purchase. It typically involves a CRUD (Create, Read, Update, Delete) functionality, where users can add items to their wishlist, view their wishlist, update the items on their wishlist, and delete items from their wishlist.

About Python Django WishList Project

Here are six points that describe a wishlist project in Django which are:

1. Model: Define a model that includes two fields: “wishlist” (CharField) and “is_checked” (BooleanField). The “wishlist” field stores the name of the item that the user wants to add to their wishlist, and the “is_checked” field stores whether the user has checked off the item on their wishlist.

2. Views: Create views to handle the CRUD operations for the wishlist items. These views would include functions to render the templates, handle the form submission, and interact with the database.

3. Templates: Create HTML templates to display the wishlist items to the user. The templates would include a form to add new items to the wishlist, a list of all items on the wishlist, and buttons to update or delete items.

4. URLs: Define the URLs for the wishlist views so that users can access the different pages of the wishlist application.

5. Database: Create a database to store the wishlist items. Use Django’s built-in SQLite database or another database of your choice.

6. Testing: Test the application to ensure that it is functioning correctly. Test the CRUD operations, form validation, and database interactions to make sure that the application is working as expected.

Prerequisites for Wishlist Project using Python Django

1. Python and Django: You will need to have a good understanding of the Python programming language and the Django web framework.
2. HTML, CSS, and JavaScript: You will need to have a good understanding of these technologies to create the user interface for the wishlist project.
3. Relational Database: You will need to have a good understanding of relational databases, such as SQLite, MySQL, or PostgreSQL, to create and manage the database for the wishlist project.

Download Python Django Wishlist Project

Please download the source code of the Python Django Wishlist Project from the following link: Python Django Wishlist Project Code.

Minimum system configuration:

1. Operating System: Windows 7 or later, macOS 10.11 or later, or a modern Linux distribution.
2. Processor: Intel Core i3 or equivalent.
3. RAM: 4 GB or more.
4. Disk Space: 5 GB or more.
5. Browser: Google Chrome, Mozilla Firefox, or Microsoft Edge.

Installation steps:

You can download Visual Studio Code from the official website:

On the download page, you can choose the appropriate installer for your operating system (Windows, macOS, or Linux). Once the installer is downloaded, run it and follow the installation instructions to install VS Code on your computer.

Here’s a brief explanation of each step, along with the commands to execute:

1.  Install Python: Download and install the latest version of Python from the official website. Follow the installation instructions for your operating system.

2. Install pip: Download the get-pip.py script and run python get-pip.py to install pip.

3. Create a virtual environment: Run python -m venv myenv to create a new virtual environment named ‘myenv’.

4. Activate the virtual environment: Run source myenv/bin/activate on Linux/Mac or myenv\Scripts\activate on Windows to activate the virtual environment.

5. Install Django: Run pip install django to install the latest stable version of Django.

6. Verify installation: Run python -m django –version to verify that Django is installed correctly.

7. Create a new Django project: Run Django-admin start to project my project to create a new Django project named ‘myproject’.

8. Start the development server: Run python manage.py run server to start the development server.

That’s it! You should now have a working installation of Django and be ready to start building your web application.

Steps to create WishList Project – Let’s Move ahead with an amazing project.

1. Open the terminal from the folder where we want to create the project.
Right-click on mouse -> open in terminal -> write “code .” (space is mandatory between code and “.”)

2. Then go to the project folder -> urls.py and inside urls.py of project, do this -> add “include” in import as shown in the code below and add “path(“”, include(“app.urls”))”

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

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

3. Create urls.py in an app of the wishlist project (urls.py is mandatory in both project and app).

4. In setting.py, add the ‘app name”. In my case, it is an app only, as below.

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

5. Now, runserver to check if everything is working or not. If you see the below image, then we are done with the installation part. To runserver, run the command in the terminal as follows “py manage.py runserver”.(if you see the rocket image, then it’s working fine).

6. Now, create the models.py using the ORM technique as follows.

from django.db import models

# Create your models here.
class wishlistmodel(models.Model):
    is_checked = models.BooleanField(default=False)
    wishlist = models.CharField(max_length=50)

To create the above field in a database, run the following commands as follows:

• Py manage.py makemigrations
• Py manage.py migrate

7. To insert data in the database
templates/app -> index.html

<form action="{% url 'insert' %}" method="post">
        {% csrf_token %}
        <div class="header">
            <h2 style="color: #4267B2;">Add to Wishlist</h2>
        </div>
        <div class="input-container">
            <input type="text" id="wishlist-input" placeholder="Enter item wishlist" name="addwish">
            <button id="add-btn" style="background-color: #4267B2;">Add</button>
        </div>
    </form>

Views.py

def insert(request):
    if request.method == "POST":
        wishlist = request.POST.get('addwish')
        new_data = wishlistmodel.objects.create(wishlist=wishlist)
        return redirect("show")
    else:
        return HttpResponse("problem with post method")

Urls.py

def insert(request):
    if request.method == "POST":
        wishlist = request.POST.get('addwish')
        new_data = wishlistmodel.objects.create(wishlist=wishlist)
        return redirect("show")
    else:
        return HttpResponse("problem with post method")

8. Show the data in the webpage

<h1>PythonGeeks Wishlist</h1>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Tick Completed/Not Completed</th>
                    <th>Wishlist</th>
                    <th>Actions</th>
                    <th>Completed or not</th>
                </tr>
            </thead>
            {% if show %}
            <tbody id="table-body">
                {% for item in show reversed %}
                <tr>
                    <form action="{% url 'check' pk=item.pk %}" method="post">
                        {% csrf_token %}
                        <td><input type="checkbox" name="check" {% if item.is_checked %} checked {% else %} {% endif %}/>
                            <button class="delete-btn">&rarr;</button>
                        </td>
                    </form>
                    <td class="wishlist-data">{{ item.wishlist }}</td>
                    <td>
                        <form action="{% url 'updatepage' pk=item.pk %}" method="post">
                            {% csrf_token %}
                            <button class="delete-btn">update</button>
                        </form>
                        <form action="{% url 'delete' pk=item.pk %}" method="post">
                            {% csrf_token %}
                            <button class="delete-btn">Delete</button>
                        </form>
                    </td>
                    <td>
                        <h6>{% if item.is_checked %} <span style="background-color: green;color: #fff;">Completed</span> {% else %} <span style="background-color: red;color: #fff;">Not completed</span> {% endif %}</h6>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
            {% endif %}
        </table>
    </div>
</div>

Views.py

def show(request):
    show_data = wishlistmodel.objects.all()
    return render(request, "app/show.html", {"show": show_data})

Urls.py

path("show", views.show, name="show"),

9. Update/Delete the existing data from the database.
template/app -> show.html(button is present which gets you to update page or delete based on each transverse data)

<td>
    <form action="{% url 'updatepage' pk=item.pk %}" method="post">
       {% csrf_token %}
 <button class="delete-btn">update</button>
    </form>
        <form action="{% url 'delete' pk=item.pk %}" method="post">
                            {% csrf_token %}
         <button class="delete-btn">Delete</button>
         </form>
 </td>

When you click on the update page, it gets you to the update page

<h5 ><a href="{% url 'show' %}">X</a></h5>
<center>
    <form action="{% url 'update' pk=updatedata.pk %}" method="post">
        {% csrf_token %}
        <div class="header">
            <h2 style="color: #4267B2;">Update Wishlist</h2>
        </div>
        <div class="input-container">
            <input type="text" id="wishlist-input" placeholder="Enter item wishlist" name="updatewish"
                value="{{ updatedata.wishlist }}">
            <button id="add-btn" style="background-color: #4267B2;">Update</button>
        </div>
    </form>
</center>
{% endif %}

Views.py

def delete(request, pk):
    delete_data = get_object_or_404(wishlistmodel, pk=pk)
    if request.method == "POST":
        delete_data.delete()
        return redirect("show")
    else:
        return HttpResponse("problem with post method")
   
def updatePage(request, pk):
    update_data = wishlistmodel.objects.get(pk=pk)
    return render(request, "app/update.html", {"updatedata": update_data})

def update(request, pk):
    update_data = wishlistmodel.objects.get(pk=pk)
    update_data.wishlist = request.POST['updatewish']
    update_data.save()
    return redirect("show")

def checkb(request, pk):
    checkbox = wishlistmodel.objects.get(pk=pk)
    checkbox.is_checked = request.POST.get('check') == "on"
    checkbox.save()
    return redirect('show')

Urls.py

path("delete/<int:pk>", views.delete, name="delete"),
    path("updatepage/<int:pk>", views.updatePage, name="updatepage"),
    path("update/<int:pk>", views.update, name="update"),
    path("check/<int:pk>", views.checkb, name="check")

Here is the complete code for the above:

File structure:

templates/app -> Index.html

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <center>
        <h2><a href="{% url 'show' %}">Click here to wishlist/Refresh(if already)</a></h2>
    </center>
        {% block content %}

        {% endblock %}

</body>

</html>

templates/app -> show.html

{% extends "app/index.html" %}
{% block content %}
<div class="container">
    <form action="{% url 'insert' %}" method="post">
        {% csrf_token %}
        <div class="header">
            <h2 style="color: #4267B2;">Add to Wishlist</h2>
        </div>
        <div class="input-container">
            <input type="text" id="wishlist-input" placeholder="Enter item wishlist" name="addwish">
            <button id="add-btn" style="background-color: #4267B2;">Add</button>
        </div>
    </form>
    <h1>Wishlist</h1>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Tick Completed/Not Completed</th>
                    <th>Wishlist</th>
                    <th>Actions</th>
                    <th>Completed or not</th>
                </tr>
            </thead>
            {% if show %}
            <tbody id="table-body">
                {% for item in show reversed %}
                <tr>
                    <form action="{% url 'check' pk=item.pk %}" method="post">
                        {% csrf_token %}
                        <td><input type="checkbox" name="check" {% if item.is_checked %} checked {% else %} {% endif %}/>
                            <button class="delete-btn">&rarr;</button>
                        </td>
                    </form>
                    <td class="wishlist-data">{{ item.wishlist }}</td>
                    <td>
                        <form action="{% url 'updatepage' pk=item.pk %}" method="post">
                            {% csrf_token %}
                            <button class="delete-btn">update</button>
                        </form>
                        <form action="{% url 'delete' pk=item.pk %}" method="post">
                            {% csrf_token %}
                            <button class="delete-btn">Delete</button>
                        </form>
                    </td>
                    <td>
                        <h6>{% if item.is_checked %} <span style="background-color: green;color: #fff;">Completed</span> {% else %} <span style="background-color: red;color: #fff;">Not completed</span> {% endif %}</h6>
                    </td>
                </tr>


                {% endfor %}
            </tbody>
            {% endif %}
        </table>
    </div>
</div>
{% endblock %}

templates/app -> update.html

{% extends "app/index.html" %}
{% block content %}
{% if updatedata %}
<h5 ><a href="{% url 'show' %}">X</a></h5>
<center>
    <form action="{% url 'update' pk=updatedata.pk %}" method="post">
        {% csrf_token %}
        <div class="header">
            <h2 style="color: #4267B2;">Update Wishlist</h2>
        </div>
        <div class="input-container">
            <input type="text" id="wishlist-input" placeholder="Enter item wishlist" name="updatewish"
                value="{{ updatedata.wishlist }}">
            <button id="add-btn" style="background-color: #4267B2;">Update</button>
        </div>
    </form>
</center>
{% endif %}
{% endblock %}

Views.py

from django.shortcuts import render, HttpResponse, redirect, get_object_or_404
from .models import wishlistmodel
# Create your views here.
def index(request):
    return render(request, "app/index.html")

def insert(request):
    if request.method == "POST":
        wishlist = request.POST.get('addwish')
        new_data = wishlistmodel.objects.create(wishlist=wishlist)
        return redirect("show")
    else:
        return HttpResponse("problem with post method")
   
def show(request):
    show_data = wishlistmodel.objects.all()
    return render(request, "app/show.html", {"show": show_data})

def delete(request, pk):
    delete_data = get_object_or_404(wishlistmodel, pk=pk)
    if request.method == "POST":
        delete_data.delete()
        return redirect("show")
    else:
        return HttpResponse("problem with post method")
   
def updatePage(request, pk):
    update_data = wishlistmodel.objects.get(pk=pk)
    return render(request, "app/update.html", {"updatedata": update_data})

def update(request, pk):
    update_data = wishlistmodel.objects.get(pk=pk)
    update_data.wishlist = request.POST['updatewish']
    update_data.save()
    return redirect("show")

def checkb(request, pk):
    checkbox = wishlistmodel.objects.get(pk=pk)
    checkbox.is_checked = request.POST.get('check') == "on"
    checkbox.save()
    return redirect('show')

Urls.py

from django.urls import path, include
from . import views
urlpatterns = [
    path("", views.index, name="home"),
    path("insert", views.insert, name="insert"),
    path("show", views.show, name="show"),
    path("delete/<int:pk>", views.delete, name="delete"),
    path("updatepage/<int:pk>", views.updatePage, name="updatepage"),
    path("update/<int:pk>", views.update, name="update"),
    path("check/<int:pk>", views.checkb, name="check")
]

Overview of the project:

Summary

The wishlist project is a basic CRUD application built using Django, which allows users to add, edit, and delete items on their wishlist. It uses SQLite as the database and doesn’t require any authentication or authorization. The project has six views: index, insert, show, delete, update page, and update. It also has a model called wishlist model, which has two fields: wishlist and is_checked. Finally, the project uses Bootstrap for the front-end design.