The beauty of using the later over the former is that all the heavy lifting has been done for us. By placing the link in your template, you can take advantage of all the available features. We have already demonstrated how to display charts using Highcharts.js in a Django web application.

In this tutorial, we will pay attention to Charts.js. Specifically, we will learn:

1. Another way to populate the database other than the ones mentioned while learning how to do so with Highcharts.js
2. How to query the database to display the data structured in such a way that Charts.js can understand.
3. How to display both bar chart and pie chart

The Model

For this project, we will use the data from Kaggle¹ that shows the richest people in the world as of 2022. The data contains several columns but we are only interested in just a few of them. Let us create a database model for the dataset.

from django.db import models

GENDER = (
    ('M', 'Male'),
    ('F', 'Female'),
)

class Richest(models.Model):
    name = models.CharField(max_length=100)
    gender = models.CharField(max_length=1, choices=GENDER)
    net_worth = models.IntegerField()
    country = models.CharField(max_length=100)
    source = models.CharField(max_length=100)

    def __str__(self):
        return self.name

The model contains names of the richest people in the world, their net worth, country of origin and their source of wealth.

Populating the database

In the previous tutorial project on creating a chart using Highcharts.js, I showed you one of the ways to populate a database. I wrote a script from the Django shell to populate the database. In this tutorial, we will learn a different method.

We will use Django’s BaseCommand class to create a custom management command that populates the database using the dataset.

Start by creating new folders inside the app folder. For example, assuming the name of your Django app is charts and is created in your current directory, run the following in your Ubuntu terminal:

mkdir charts/management/commands -p

The p flag makes it possible to create a nested folder in one command. Inside the commands folder, create a new file named populate_db.py:

nano charts/management/commands/populate_db.py

let’s first import the required modules:

from django.core.management.base import BaseCommand
from charts.models import Richest
import csv
import math

BaseCommand is a class provided by Django that serves as the base class for writing custom management commands. Management commands are scripts that can be run from the command line to perform various tasks related to your Django app.

The BaseCommand class provides several useful methods and attributes that make it easy to write custom management commands. When you create a custom management command by subclassing BaseCommand, you need to override the handle method to define the behavior of your command.

The handle method is called when the command is executed, and it receives any command-line arguments passed to the command as keyword arguments.

In addition to the handle method, the BaseCommand class provides several other methods and attributes that you can use when writing custom management commands.

For example, as we shall see, you can use the add_arguments method to define custom command-line arguments for your command, and you can use the stdout and stderr attributes to write output to the Ubuntu terminal.

class Command(BaseCommand):
    help = 'Populate the database using a CSV file'

    def add_arguments(self, parser):
        parser.add_argument('forbes_2022_billionaires.csv', type=str, help='The path to the CSV file')

    def handle(self, *args, **options):
        csv_file = options['forbes_2022_billionaires.csv']

        with open(csv_file, 'r') as f:
            reader = csv.DictReader(f)
            for row in reader:
                skip_row = False
                for value in row.values():
                    try:
                        if math.isnan(float(value)):
                            skip_row = True
                            break
                    except ValueError:
                        pass
                if skip_row:
                    continue
                net_worth = int(float(row['finalWorth']))
                obj, created = Richest.objects.get_or_create(
                    name=row['personName'],
                    gender=row['gender'],
                    net_worth=net_worth,
                    country=row['countryOfCitizenship'],
                    source=row['source']
                 )

        self.stdout.write(self.style.SUCCESS('Successfully populated the database'))

We define a new Command class that inherits from BaseCommand.

In the add_arguments method, we define a new command-line argument called csv_file that specifies the path to the CSV file. In the handle method, we read the data from the CSV file and use a conditional statement to check if any of the values in the current row are NaN.

If any value is NaN, we use the continue statement to skip this row and move on to the next one. Otherwise, we use the get_or_create method to add the data to the database. Finally, we use the self.stdout.write method to print a success message.

We use a nested loop to iterate over each value in the row. For each value, we use a try-except block to try to convert the value to a float and check if it is NaN. If a ValueError exception occurs, we catch it and ignore it using the pass statement.

If any value in the row is NaN, we set the skip_row variable to True and use the break statement to exit the inner loop. After the inner loop completes, we use an if statement to check if the skip_row variable is True. If it is, we use the continue statement to skip this row and move on to the next one.

However, a problem arises from the dataset. The net_worth field is an IntegerField. Whereas, the data type of the finalWorth column is float. To avoid errors, we first convert the value of the net_worth field in the current row to a float using the float function, and then convert it to an integer using the int function. We then assign this integer value to the net_worth field of the Richest model instance using the get_or_create method.

Make sure you have the forbes_2022_billionaires.csv file downloaded and placed in your current directory. Then, run the command we defined from the command line using the manage.py script like this:

python3 manage.py populate_db forbes_2022_billionaires.csv

Afterward, a success message will be displayed. We have populated our database. Open the admin interface to see it.

Displaying charts using Charts.js

Make sure you have included the Charts.js library in your template by adding the following script tag to the <head> section of your HTML file:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Next, add a <canvas> element to your template where you want to display the chart. Give this element an id so you can reference it in your JavaScript code.

Here’s an example:

<canvas id="myChart"></canvas>

In this demonstration, we will query the database to:

1. Calculate total net worth of each country
2. Get the top 10 richest people in the world
3. Get the top 10 richest women in the world
4. Get the distribution of wealth by gender

We will also include a pie chart. You can always check the source code for more details.

Displaying the total net worth of each country

from django.shortcuts import render
from django.db.models import Sum
from .models import Richest

def TotalNetWorth(request):
    # Query the database to get the data
    data = Richest.objects.values('country').annotate(total_net_worth=Sum('net_worth')).order_by('-total_net_worth')

    # Prepare the data for the chart
    chart_data = []
    for item in data:
        chart_data.append({
            'country': item['country'],
            'total_net_worth': item['total_net_worth']
        })

    # Render the template with the chart data
    return render(request, 'total_net_worth.html', {'chart_data': chart_data})

We group the data by country using the values method, and using the annotate method, we calculate the total net worth of each country.

Next, we prepare the data for the chart by creating a new list called chart_data and appending a dictionary for each item in the query result.

Each dictionary contains two keys: 'country' and 'total_net_worth', which represent the country and its total net worth, respectively.

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {{ chart_data|safe }}.map(item => item.country),
            datasets: [{
                label: 'Total Net Worth',
                data: {{ chart_data|safe }}.map(item => item.total_net_worth),
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1	
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

Here, we create a new Chart object and pass it the context of the <canvas> element and an options object that specifies the type of chart and its data.

We use the chart_data variable passed as context to populate the chart with data.

Then, we use the map method to extract the country names and total net worth values from the chart_data and assign them to the labels and data properties of the chart’s datasets.

Check out the source code for a demonstration of a pie chart. It’s almost the same.

Displaying the top ten richest people in the world

def TopTenRichest(request):
    # Query the database to get the data
    data = Richest.objects.order_by('-net_worth')[:10]

    # Prepare the data for the chart
    chart_data = []
    for item in data:
        chart_data.append({
            'name': item.name,
            'net_worth': item.net_worth
        })

    # Render the template with the chart data
    return render(request, 'top_ten_richest.html', {'chart_data': chart_data})

The following code shows how to display a pie chart using Charts.js:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: {{ chart_data|safe }}.map(item => item.name),
        datasets: [{
            label: 'Net Worth',
            data: {{ chart_data|safe }}.map(item => item.net_worth),
            backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 205, 86)',
                'rgb(75, 192, 192)',
                'rgb(153, 102, 255)',
                'rgb(255, 159, 64)',
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 205, 86)',
                'rgb(75, 192, 192)'
            ],
            hoverOffset: 4
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Top Ten Richest People'
        }
    }
});

This code creates a new Chart object and sets its type to 'pie'. The data for the chart is taken from the chart_data variable that was passed to the template from TopTenRichest view function.

The labels for the chart are set to the names of the richest people, and the data for the chart is set to their net worths.

The source code also contains the bar chart example.

Displaying the top ten richest women

def TopRichestWomen(request):
    data = Richest.objects.filter(gender='F').order_by('-net_worth')[:10]
    names = [item.name for item in data]
    net_worths = [item.net_worth for item in data]
    return render(request, 'top_richest_women.html', {
        'names': names,
        'net_worths': net_worths
    })

Distribution of wealth by gender

def WealthByGender(request):
    # Query the database to get the total net worth for each gender
    male_net_worth = Richest.objects.filter(gender='M').aggregate(Sum('net_worth'))['net_worth__sum']
    female_net_worth = Richest.objects.filter(gender='F').aggregate(Sum('net_worth'))['net_worth__sum']

    # Prepare the data for the chart
    data = {
        'labels': ['Male', 'Female'],
        'datasets': [{
            'data': [male_net_worth, female_net_worth],
            'backgroundColor': ['#36A2EB', '#FF6384']
        }]
    }

    # Render the chart using the Chart.js library
    return render(request, 'wealth_by_gender.html', {'data': data})

And this is the pie chart. Check the source code for more details:

Conclusion

In this project tutorial, we have learned various ways to query our database, structure the data and displayed them using charts.js, a JavaScript library for data visualization. We saw how Django interacts with charts.js to display charts on a template.

We also learned another way to populate the database by using Django’s BaseCommand class. Due to the nature of the dataset, we were restricted to only bar and pie charts. However, we can apply the process to create other charts.

Use the knowledge you learned to integrate charts in your Django web application.

• Forbes World’s Billionaires List 2022 | Kaggle

Recommended: The Math of Becoming a Millionaire in 13 Years

The post How I Created Charts Using Charts.js in Django Web Application appeared first on Be on the Right Side of Change.

In this tutorial, we will learn to design something really interesting, that is, an audio app.

Many of us do enjoy reading books especially novels and motivational books. However, due to your busy schedule, you may find it difficult to set aside time, relax on a sofa, and read that interesting book you have or you borrowed from a friend.

All hope is not lost. You can still read even at the go through an audiobook. Many find it enjoyable listening to audiobooks while going about their normal activities for the day.

As Python developers, this will be a nice project to create and add to our portfolio. That is exactly what we are going to do in this project tutorial.

We will create a Streamlit application where users can upload a book in PDF format and have it converted to an audiobook. The user can then decide to listen to the audio while attending to other tasks or download it to listen to later.

Try it yourself in this interactive Streamlit app I created for you

Creating the Application

I assume you have already created a virtual environment for this project. Let’s get started. The code will span just a few lines. So, it will be easy to understand. Moreover, I will explain everything step by step.

Step 1: Import the required modules

import streamlit as st
from gtts import gTTS
import pdfplumber
import docx
import ebooklib
from ebooklib import epub

Streamlit is used to create the Streamlit application, gTTS (Google’s Text-to-Speech) is used to convert text to speech, pdfplumber is used to extract text from PDF files, docx is used to extract text from DOCX files, and ebooklib and epub are used to extract text from EPUB files.

Step 2: Create a file uploader widget

st.title("Streamlit AudioBook App")
st.info('Convert your E-book to audiobook')
book = st.file_uploader('Please upload your file', type=['pdf', 'txt', 'docx', 'epub'])

After setting the title and subtitle of the Streamlit application, we create a file uploader widget that allows the user to upload a file. The type parameter specifies the allowed file types, which in this case are PDF, TXT, DOCX, and EPUB. This gives you the option to upload other file extensions other than PDF.

Step 3: Create a function to handle file extraction based on the extension

def extract_text_from_docx(file):
    doc = docx.Document(file)
    full_text = []
    for para in doc.paragraphs:
        full_text.append(para.text)
    return '\n'.join(full_text)

def extract_text_from_epub(file):
    book = epub.read_epub(file)
    chapters = []
    for item in book.get_items():
        if item.get_type() == ebooklib.ITEM_DOCUMENT:
            chapters.append(item.get_content())
    return '\n'.join(chapters)

We define two functions, extract_text_from_docx and extract_text_from_epub, which are used to extract text from DOCX and EPUB files, respectively.

The extract_text_from_docx function uses the docx library to read the contents of a DOCX file and extract the text from its paragraphs.

The extract_text_from_epub function uses the ebooklib and epub libraries to read the contents of an EPUB file and extract the text from its chapters.

An EPUB file is made up of multiple items, each of which can have a different type. Some common item types include ITEM_DOCUMENT, which represents the main content of the book, ITEM_IMAGE, which represents images, and ITEM_STYLE, which represents style sheets.

The condition is used to check if the current item being processed is a document item. If it is, the content of the item is extracted and appended to the chapters list. This ensures that only the main content of the book is included in the final text, and other items such as images and style sheets are ignored.

Step 4: Check if the file has been uploaded and extract it

if book:
    if book.type == 'application/pdf':
        all_text = ""
        with pdfplumber.open(book) as pdf:
            for text in pdf.pages:
                single_page_text = text.extract_text()
                all_text = all_text + '\n' + str(single_page_text)

Once the book is uploaded, it checks the type. If the uploaded file is a PDF file, it then uses the pdfplumber library to open the PDF file and extract its text.

The text from each page of the PDF is concatenated into a single string, separated by newline characters.

elif book.type == 'text/plain':
        all_text = book.read().decode("utf-8")
elif book.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
        all_text = extract_text_from_docx(book)
elif book.type == 'application/epub+zip':
        all_text = extract_text_from_epub(book)

If the uploaded file is a TXT file, it reads its contents directly and decodes them as UTF-8 text. If the uploaded file is a DOCX file, the code calls the extract_text_from_docx function to extract its text. Whereas, if the uploaded file is an EPUB, it calls the exract_text_from_epub function to extract the text.

MIME types are used to identify the format of a file or data, and are commonly used in email attachments, HTTP headers, and other contexts where it’s important to specify the type of data being transmitted. application/vnd.openxmlformats-officedocument.wordprocessingml.document is a MIME type that represents a Microsoft Word document in the Office Open XML (OOXML) format. 

Step 5: Convert the extracted text to speech

tts = gTTS(all_text)
tts.save('audiobook.mp3')

Using the gTTS library, we convert the extracted text into speech. The gTTS function takes the text as input and returns a gTTS object. The save method of this object is then called to save the generated speech as an MP3 file named audiobook.mp3.

Once the code is run, you should see an audiobook.mp3 file in your project folder.

Step 6: Open and read the content of the file

audio_file = open('audiobook.mp3', 'rb')
audio_bytes = audio_file.read()

The audiobook.mp3 file is opened in binary mode and its contents are read into a variable named audio_bytes. This variable contains the binary data of the MP3 file.

Step 7: Create an audio player widget

st.audio(audio_bytes, format='audio/wav', start_time=0)

We use Streamlit’s audio function to create an audio player widget that allows the user to play back the generated speech. The audio_bytes variable is passed as the first argument to specify the audio data to be played.

The format parameter is set to 'audio/wav' to specify the format of the audio data, and the start_time parameter is set to 0 to start playback from the beginning of the audio.

Conclusion

Congratulations! You just created an audiobook app in just seven steps. Check the full code on GitHub. The three dots at the audio widget give you the option to download the audio file if you want to listen later. Please note that the conversion may take some time depending on your internet network and the size of the file.

Now, all you need to do is to deploy the app on Streamlit Cloud. Then, upload your favorite book and enjoy listening on the go.

The post How I Created an Audiobook App with Streamlit appeared first on Be on the Right Side of Change.

In this tutorial, we will continue designing the Hacker News clone website by adding a user authentication feature. Anyone interested in using our application to share the latest news must be authenticated. This means the person has to register on the platform and be able to log in and log out.

Once authenticated, the creator can be able to submit or edit posts. I have already demonstrated how to authenticate users in previous Django project tutorials. Since we are replicating an existing application, we have to show how the particular feature was designed.

Therefore, in this series, we will:

1. Create a user authentication feature for registering, sign-in and sign-out functionalities.
2. Add more views to allow authenticated users to submit or edit posts.
3. Give readers the option to show their appreciation for the news read by upvoting or downvoting the post.

User Authentication

Signup View

from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth import authenticate, login

def signup(request):
    if request.user.is_authenticated:
        return redirect('/')

    if request.method == 'POST':
        form = UserCreationForm(request.POST)

        if form.is_valid():
            form.save()
            username = form.cleaned_data['username']
            password = form.cleaned_data['password1']
            user = authenticate(username=username, password=password)
            login(request, user)
            return redirect('/')

        else:
            return render(request,'signup.html',{'form':form})
    else:
        form = UserCreationForm()
        return render(request, 'signup.html', {'form':form})

This code is a Django view function that handles user registration. It imports the UserCreationForm from Django’s built-in authentication forms, as well as the authenticate, login, and logout functions from Django’s authentication system.

The signup function first checks if the user is already authenticated. If they are, it redirects them to the homepage. If the user is not authenticated, the function checks if the request method is POST, meaning that the form has been submitted.

If the form has been submitted, it creates a new instance of the UserCreationForm with the data from the request. It then checks if the form is valid. If it is, it saves the new user, authenticates them using their username and password, logs them in, and redirects them to the homepage.

If the form is not valid, it returns a response that renders a template called signup.html and passes in the invalid form to be displayed to the user.

If the request method is not POST, meaning that the form has not been submitted, it creates a new instance of the UserCreationForm and returns a response that renders the signup.html template and passes in the empty form to be displayed to the user.

Sign-in View

from django.contrib.auth.forms import AuthenticationForm
from django.contrib.auth import  login

def signin(request):
    if request.user.is_authenticated:
        return redirect('/')

    if request.method == 'POST':
        username = request.POST['username']
        password = request.POST['password']
        user = authenticate(request, username =username, password = password)

        if user is not None:
            login(request,user)
            return redirect('/')
        else:
            form = AuthenticationForm()
            return render(request,'signin.html',{'form':form})
    else:
        form = AuthenticationForm()
        return render(request, 'signin.html', {'form':form})

This code checks if the user is already authenticated, and if they are, it redirects them to the homepage.

If the user is not authenticated, the function checks if the request method is POST, which means the form has been submitted. If it has, it retrieves the username and password from the request data and uses the authenticate function to check if the provided credentials are valid.

If the credentials are valid, it logs in the user using the login function and redirects them to the homepage. If the credentials are not valid, it creates a new instance of Django’s built-in AuthenticationForm and returns a response that renders a template called signin.html and passes in the form to be displayed to the user.

If the request method is not POST, that means the form has not been submitted, it creates a new instance of the AuthenticationForm and returns a response that renders the signin.html template and passes in the empty form to be displayed to the user.

Logout View

from django.contrib.auth import logout
        
def signout(request):
    logout(request)
    return redirect('/')

This view function uses the logout function from Django’s authentication system to log out the user associated with the given request. After logging out the user, it redirects them to the homepage.

And here are the urlpatterns:

path('signin', signin, name='signin'),
path('signup', signup, name='signup'),
path('signout', signout, name='signout'),

Adding More Views

Submit View

from .forms import PostForm

def SubmitPostView(request):
    if request.user.is_authenticated:
        form = PostForm()

        if request.method == "POST":
            form = PostForm(request.POST)

            if form.is_valid():
                title = form.cleaned_data['title']
                url = form.cleaned_data['url']
                description = form.cleaned_data['description']
                creator = request.user
                created_on = datetime.now()

                post = Post(title=title, url=url, description=description, creator = creator, created_on=created_on)
                post.save()
                return redirect('/')
        return render(request,'submit.html',{'form':form})
    return redirect('/signin')

This code is a Django view function that handles the submission of a new post. It first checks if the user is authenticated, and if they are not, it redirects them to the signin URL.

If the user is authenticated, it creates a new instance of a form called PostForm. It then checks if the request method is POST. If the form has been submitted, it creates a new instance of the PostForm with the data from the request.

It then checks if the form is valid. If it is, it retrieves the title, URL, and description from the form’s cleaned data and uses them to create a new Post object. It also sets the creator attribute of the post to the current user and sets the created_on attribute to the current date and time. It then saves the new post to the database and redirects the user to the homepage.

If the form is not valid or if the request method is not POST, meaning that the form has not been submitted, it returns a response that renders a template called submit.html and passes in the form to be displayed to the user.

Here is the PostForm class. Create a forms.py file and add it there.

from django import forms
from .models import Post


class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ('title','url','description')

The PostForm class inherits from forms.ModelForm and defines a nested Meta class that specifies the model and fields to be used by the form.  A ModelForm allows you to create and update instances of a specific model.

In this case, the model attribute is set to Post, and the fields attribute is set to a tuple containing the fields title, URL, and description. This means that the form will include fields for these three attributes of the Post model.

When an instance of this form is created and validated, it can be used to create or update a Post object with the data entered by the user.

Edit View

def EditPostView(request,id):
    post = get_object_or_404(Post,id=id)
    if request.method =='POST':
        form = PostForm(request.POST, instance=post)
        if form.is_valid():
            form.save()
            return redirect('/')

    form = PostForm(instance =post)
    return render(request,'submit.html',{'form':form})

This view function handles the editing of an existing post. It takes two arguments: request and id. The id argument is used to retrieve the Post object that should be edited.

The function uses the get_object_or_404 function to retrieve the Post object with the given id. If no such object exists, it raises a 404 error.

If the request method is POST, meaning that the form has been submitted, it creates a new instance of the PostForm with the data from the request and the instance parameter set to the retrieved Post object. It then checks if the form is valid. If it is, it saves the changes to the post and redirects the user to the homepage.

If the request method is not POST, meaning that the form has not been submitted, it creates a new instance of the PostForm with the instance parameter set to the retrieved Post object. This pre-populates the form fields with the current values of the post. It then returns a response that renders a template called submit.html and passes in the form to be displayed to the user.

Here are the urlpatterns:

path('submit', SubmitPostView, name='submit'),
path('edit/<int:id>', EditPostView, name='edit'),

Upvote and Downvote Views

from .models import Vote

def UpVoteView(request,id):
    if request.user.is_authenticated:
        post = Post.objects.get(id=id)
        votes = Vote.objects.filter(post = post)
        v = votes.filter(voter = request.user)
        if len(v) == 0:
            upvote = Vote(voter=request.user, post=post)
            upvote.save()
            return redirect('/')
    return redirect('/signin')

The function is used to handle upvoting a post by a user. Here’s what the code does:

1. It checks if the user making the request is authenticated (i.e., logged in).
2. If the user is authenticated, it retrieves the post with the given id from the database.
3. It then retrieves all votes for that post from the database.
4. It checks if the user has already voted for that post by filtering the votes for that post by the current user.
5. If the user has not already voted for that post, it creates a new Vote object with the current user as the voter and the post as the post being voted for.
6. It then saves this new vote to the database.
7. Finally, it redirects the user to the homepage.

If the user is not authenticated, it redirects them to the signin page.

def DownVoteView(request,id):
    if request.user.is_authenticated:
        post = Post.objects.get(id=id)
        votes = Vote.objects.filter(post = post)
        v = votes.filter(voter = request.user)
        if len(v) != 0:
            v.delete()
            return redirect('/')
    return redirect('/signin')

In this function, it checks if the user has already voted. If so, it deletes it. And then redirects them to the home page.

Finally, the urlpatterns:

path('vote/<int:id>', UpVoteView, name='vote'),
path('downvote/<int:id>', DownVoteView, name='dvote'),

The Templates

Please check the source code for the templates. They all go by the same explanation from the previous series. They all check if the user is authenticated before allowing them to benefit from the app’s functionalities.

From the templates, notice how the names given in the urlpatterns were used to refer to the URLs. All these were made possible using Django templating engine.

Conclusion

We have come a long way in this Hacker News project created using the Django web framework. In the final part of this project, we will create views for the comment functionality. Thereafter, we test every feature of this app using information from the Hacker News website. If some features do not function as intended, we make the needed adjustments. Stay tuned!

Recommended: How I Coded a Hacker News Clone in Django

The post How I Added User Authentication to My Hacker News Clone Django Website appeared first on Be on the Right Side of Change.

This is one of the projects you will likely come across as a data analyst. How do you go about solving this problem? No doubt, you will ask your client for more information. For example, data showing previous years’ commission payments, the number of sales representatives, and the company’s defined formula for calculating commissions.

For this project, we assumed that the only information at our disposal is a rate schedule showing the company’s formula for calculating commissions.

Rates Schedule

The table shows that the more sales, the higher the commission rate. Since we were neither given sales historical data nor the number of sales representatives, we are going to make a few assumptions.

Basic Assumptions

We will generate  random sales data based on the following assumptions which are also based on the information from the rates schedule:

1. Sales made cannot be below 1000 dollars.
2. Sales made are in thousands.
3. The company employed 500 persons for the affiliate marketing program.
4. Sales made by each individual cannot be more than 1 million dollars in a given year.

With these assumptions, we are ready to generate random data.

Python’s random module is used to generate random numbers. We will use the sample() method which takes in a range of numbers and generate random data based on the length defined.

The parameters for the range() function are given as: range(start, stop, step) where:

1. start: The starting point. In our case, it is 1000 as we assumed that the sales amount cannot be below 1000 dollars.
2. stop: The ending point. In our case, it is 1 million. We assumed that it won’t go beyond that.
3. step: The number to skip to ensure that the data end with three zeros as given in the rates schedule.

The sample() method takes another parameter that indicates the length of the random numbers. Remember that each randomly generated number represents the sales made by each individual. So, the length will be 500 to indicate the number of workforces employed by the company.

import random

sales = random.sample(range(1000, 1000000, 1000), 500)

Let’s load the data on a Pandas DataFrame.

import pandas as pd

data = pd.DataFrame({'Sales': sales})

data
0    986000
1    451000
2    487000
3    982000
4    194000
..      ...
495  761000
496  615000
497  786000
498  952000
499   82000

[500 rows x 1 columns]

data.Sales.min()
 2000

data.Sales.max()
986000

Now that we have our sales data. The next thing we have to do is to calculate the commission. The commission amount on the other hand is based on the rates. So, we need a way to assign rates for each sales representative based on sales made. A defined function will accomplish that.

def commissionRates(sales):
    if sales <= 100000:
        return .03
    elif sales <= 500000:
        return .05
    else:
        return .1

With this function defined, we can easily create the rates column using Pandas’ apply function.

data['Rates'] = data.Sales.apply(commissionRates)
data.head(10)

       Sales   Rates
0  986000   0.10
1  451000   0.05
2  487000   0.05
3  982000   0.10
4  194000   0.05
5  305000   0.05
6  154000   0.05
7  768000   0.10
8  685000   0.10
9  885000   0.10

The rates are applied according to the rates schedule given to us. To get the commission amount, it’s a matter of multiplying the rates by the sales amount.

data['Commission'] = data.Sales * data.Rates
data.tail(10)

          Sales     Rates  Commission
490  149000   0.05      7450.0
491  793000   0.10     79300.0
492  205000   0.05     10250.0
493  894000   0.10     89400.0
494  276000   0.05     13800.0
495  761000   0.10     76100.0
496  615000   0.10     61500.0
497  786000   0.10     78600.0
498  952000   0.10     95200.0
499   82000   0.03      2460.0

We now have the total commission amount of $ 21,831,140 to be paid to sales representatives.

Monte Carlo Simulation

Monte Carlo analysis is a useful tool for making predictions. It takes as an input, different random numbers and runs them several times to generate many probable outcomes. How do we apply it in our case?

We want to predict the commission amount to be budgeted for the coming year. The amount we realized was based on one single attempt or iteration. We can’t just conclude that this is the ideal amount until we run it several times up to 10,000 or more using different randomly generated data.

def simulate_commission(iterations):
    results = []
    for i in range(iterations):
    sales = random.sample(range(1000, 1000000, 1000), 500)
    data = pd.DataFrame({'Sales': sales})
    data['Rates'] = data.Sales.apply(commissionRates)
    data['Commission'] = data.Sales * data.Rates
    results.append(
        [
        data.Sales.sum().round(),
        data.Commission.sum().round(),
        ]
    )
    
    return results

We create a function that will perform the simulation based on the number of times chosen. We can try 1,000, 10,000 or even 50,000 times. In the end, we sum the sales and the commissions to be used for further analysis.

Let’s give it a try with 5000 simulations and load it on a Pandas DataFrame.

results = simulate_commission(5000)
results = pd.DataFrame.from_records(results, columns=[‘Sales’, ‘Commission’])

results
          Sales        Commission
0     256137000  22305150.0
1     252466000  21865310.0
2     246516000  21478230.0
3     250821000  21669860.0
4     252750000  22314280.0
...         ...         ...
4995  253876000  22073200.0
4996  245326000  21089810.0
4997  248717000  21651090.0
4998  246074000  21105970.0
4999  251908000  21810780.0

results.describe().round()
                  
                  Sales   Commission
count       5000.0      5000.0
mean   250092538.0  21826489.0
std      4526122.0    523127.0
min    229959000.0  19379090.0
25%    247034250.0  21476432.0
50%    250058000.0  21816840.0
75%    253203250.0  22188120.0
max    266212000.0  23649430.0

After running 5000 simulations, the results show that the commission amount is between $19M and $23M with a mean of $21M. This is within our previous results. Let’s visualize this on a histogram.

def currency(x, pos):
    if x >= 1e6:
        s = '${:1.1f}M'.format(x*1e-6)
    else:
        s = '${:1.0f}K'.format(x*1e-3)
    return s

Here, we are setting the function that will format the commission amount as it’s too large to be fitted on the chart. It will take the amount and the tick position as parameters. We will feed it into the xaxis.set_major_formatter() method to format the string.

import matplotlib.pyplot

fig, ax = plt.subplots()

ax.xaxis.set_major_formatter(currency)

results.Commission.plot(kind='hist', title='Commission Amount')

plt.grid()
plt.show()

Running the simulation 10,000 times produced the following result which is almost similar to the previous one.

The mean is still between $21M and $22M, and the commission payment ranges between $19M and $24M.

These results no doubt give the managers of the retail outlet an estimate of how much should be budgeted for commission payment for the following year.

Conclusion

We solved a real-world problem using Monte Carlo simulation – a tool used to gain a better understanding of distributions of probable outcomes. By calculating a formula multiple times using different random inputs, management can be able to make informed decisions.

This demonstration gives you an idea of how you can apply Monte Carlo simulation to solve more advanced problems.

The post How I Solved a Real-World Problem Using Monte Carlo Simulation appeared first on Be on the Right Side of Change.

By blogging about your programming knowledge, you are helping both yourself and those who read your content. The step starts with creating and using a blog application proudly designed by you using any framework of your choice. This serves as living proof of your expertise in the programming niche you are blogging.

This is what we have done so far in this tutorial series. If you want to learn how we get to the stage we are right now, you do well to start from the beginning¹ of this tutorial series.

In this tutorial, we are going to add more features to our blog application to make it look more robust. Specifically, we are going to:

1. Create a dark mode toggler;
2. Add reading time on each page;
3. Add an option to listen to an audio version of our content;

This helps to improve user experience. We have a lot of coding to do. Don’t just sit down there! Follow along with me and get your hands dirty with this hands-on practical project.

Adding reading time on each page

Believe it or not, time is a very precious and scarce commodity. There is a saying that time is money. Hence, you don’t joke with people’s time. When readers visit your blog, they would like to know how long it will take them to read your content. When they see you always display the reading time, they will likely come back to your website.

How can we add a reading time to our blog application? You can either use JavaScript or Python. It’s a matter of defining how many words per minute (WPM). Studies have shown that the average reading speed of an adult is 238 WPM. Thus, to check the reading time of 500-word text, divide it by 238. The result will be in minutes.

500 / 238 = 2.10

2.10 * 60 = 126 seconds or 2 mins 6 seconds

This is exactly the formula we will use except that we will go by 250WPM which is mostly used.

Open the Django shell let’s demonstrate how to do so with Python.

We split the text separated by space, and get its length. Then, we divide it by 250.

Go to the Post model in your models.py file. Create a method that will do the same thing we did above.

class Post(models.Model):
    …

    def read_time(self):
        return round(len(self.body.split(' ')) / 250)

The body field is where the blog content is written. It will split each word separated by space and get the length which is then divided by 250. The result is rounded up to the nearest minute. Wherever this method is called on the application, the reading time is displayed.

To display the reading time, go to the blog_detail template. Check where you will see the following and add the method to it.

<p class=" text-muted">{{ post.author }} | {{ post.created_on }} | Reading Time: {{ post.read_time }} Mins</p>

 Now, all your blog pages will have the reading time displayed. As simple as that.

Toggling Dark Mode

I like surfing the net with dark mode toggled. I wonder why some webmasters can’t implement such a simple feature on their web pages. This helps to reduce eye strain. Let’s get straight ahead to add this feature using JavaScript. First of all, add this to base.html just after the link to the homepage:

<button id="mode" onclick="toggler()">Night Mode</button>

Once the button is clicked the toggler() function will be executed. On the bottom after the body tag, add a link to a JavaScript file.

<script src="{% static 'js/index.js' %}"></script>

Note that the JavaScript function to be implemented will not work if the script comes before the button element. Next, add this to the styles.css file:

  #mode {
            float: right;
        }

        body.dark-mode {
           background: black;
           color: white;
        }

        body.dark-mode header {
           background: black;
           color: white;
        }


       body.dark-mode .container .card p {
           background: black;
           border-color: black;
           color: black;
       }

      body.dark-mode .container .card {
           background: black;
           border-color: black;
     }

     body.dark-mode .container .card .card-body {
           color: white;
      }

Here, we create a dark-mode CSS class name that will be called when the dark mode is toggled. We use the CSS float property to move the button to the right. We overwrite the Bootstrap to make sure that the white border is removed.

Next, create a js folder and a script.js file inside the folder. The js folder should be inside the static folder.

toggler = () => {
    let element = document.getElementById('mode');
    let body = document.body;
    if (element.innerHTML === 'Night Mode') {
       element.innerHTML = 'Light Mode';
       body.classList.toggle('dark-mode');
       
    } else {
        element.innerHTML = 'Night Mode';
        body.classList.toggle('dark-mode');
    }
}

If the text in the button is strictly ‘Night Mode’, it will change the text to ‘Light Mode, and toggle the night mode by calling the dark-mode CSS class name.

Adding an audio version of the content

To add audio to our blog app, we will use Google’s text-to-speech library. We will modify the blog_detail view function to generate an audio file and pass it to a template.

from gtts import gTTS
from django.core.files.storage import default_storage
from django.core.files.base import ContentFile
from django.conf import settings
import os

def blog_detail(request, slug):
    post = get_object_or_404(Post, slug=slug)
    comments = post.comments.filter(active=True)
    new_comments = None
    if request.method == 'POST':
        comment_form = CommentForm(data=request.POST)
        if comment_form.is_valid():
            # create object but don't save to database yet
            new_comment = comment_form.save(commit=False)
            # assign the current post to the comment
            new_comment.post = post
            # save the comment to the database
            new_comment.save()
    else:
        comment_form = CommentForm()

    # Convert the text content of the blog post to speech using gTTS
    tts = gTTS(text=post.body, lang='en')
    audio_file_name = f"{post.slug}.mp3"
    audio_folder_path = os.path.join(settings.MEDIA_ROOT, 'audio')
    os.makedirs(audio_folder_path, exist_ok=True)
    audio_file_path = os.path.join(audio_folder_path, audio_file_name)
    tts.save(audio_file_path)

    # Save the audio file to the default storage (e.g. local disk or cloud storage)
    with open(audio_file_path, 'rb') as f:
        default_storage.save(f"audio/{audio_file_name}", ContentFile(f.read()))

    # Pass the URL of the audio file to the template
    context = {
        'post': post,
        'comments': comments,
        'new_comments': new_comments,
        'comment_form': comment_form, 
           'audio_file_url': default_storage.url(f"audio/{audio_file_name}")
    }

    return render(request, 'blog_detail.html', context)

This code creates an audio folder within your media directory using the os.makedirs() function. The generated MP3 file is saved in this folder and its URL is passed to the template through the context dictionary.

In your template, you can use the audio_file_url variable to create an <audio> element that plays the generated audio file:

<audio controls>
  <source src="{{ audio_file_url }}" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

This code creates an <audio> element with a <source> element that specifies the URL of the audio file. The controls attribute adds playback controls to the audio player.

You can see it from the screenshot. Once you hit the play button, it will play the blog content. This audio will be visible on every blog page. Unlike the previous screenshot, I haven’t yet formatted this page. If you want to learn how I showed you how to format your blog page, check out this article.

Conclusion

No doubt, this tutorial has been an interesting one. We added three features to our Django blog application to improve user experience. Our blog is fully ready to be used to share our programming knowledge. Or is it?

Speaking about sharing, there are no share buttons to share to social media sites. There are no like buttons too. Moreover, I decided that there’s no need to integrate user authentication. There are many projects on that if you want to learn more.

What about migrating to a different database and deploying to a production server? So, you can see that our Django blog is not yet ready until it is ready.

The post How I Made a Django Blog Audio Versions of My Blog Articles (Auto-Gen) appeared first on Be on the Right Side of Change.

Highcharts.js is a client-side JavaScript library used for data visualization. It can be included in Django templates just like any other JavaScript library using the link:

<script src="https://code.highcharts.com/highcharts.src.js"></script>

The hard work has already been done for us by Highcharts. Where we need to work on is finding a way to structure or format the data in a way that Highcharts can understand. In this tutorial, we will learn how to dynamically generate charts and have them rendered on a Django web application.

The Model

For this demonstration, we will use the famous Titanic dataset. Here is the model class:

SEX_CHOICES = (
    ('M', 'Male'),
    ('F', 'Female'),
)


PORT_CHOICES = (
    ('C', 'Cherbourg'),
    ('Q', 'Queenstown'),
    ('S', 'Southampton'),
)

class Passenger(models.Model):
    name = models.CharField(max_length=100, blank=True)
    sex = models.CharField(max_length=1, choices=SEX_CHOICES)
    survived = models.BooleanField(default=True)
    age = models.FloatField(null=True)
    p_class = models.CharField(max_length=10)
    fare = models.FloatField(null=True)
    embarked = models.CharField(max_length=1, choices=PORT_CHOICES)

    def __str__(self):
        return self.name

The dataset can be accessed on my GitHub page. Of course, there are more columns than the ones in the Passenger class. But these are the ones we will use.

In previous tutorials, I have worked with the Titanic dataset to create a Machine Learning web application that predicts the survival of passengers based on their attributes. We won’t be performing any data manipulation with the dataset in this tutorial.

We will only query the database to display the data using Highcharts so that we can see how Django interacts with Highcharts.

Populating the Database

Now that we have created the Model class and performed migrations (do it if you have not already done so), we need a way to populate the database with the Titanic dataset.

There are so many ways to do so. We can use the django-csvimport or django-adaptor library which allows us to easily transform a CSV file into a model instance.

Once we install the library, add it to the INSTALLED _APPS section, and run the migration command. The library will match the header line of the CSV file with the fields in the selected model and import any rows that include all required fields.

Another way to populate the database is to use the inbuilt csv module. This is the method we will use. Herein lies the steps we will follow in the Django shell:

• Open the CSV file using Python’s built-in open() function
• Create a csv.reader object to read the data from the CSV file
• Iterate over the rows in the CSV file using a for loop
• For each row, use the Django’s get_or_create method to create a new record in the database.

Run the code below on your terminal to open the Django shell.

python3 manage.py shell

with open('titanic.csv', newline='') as csvfile:
    reader = csv.reader(csvfile)
    next(reader)  # Skip the header row
    for row in reader:
        # Check if any of the values are empty
        if not all(row[2:5] + row[7:11]):
            continue  # Skip this row
        passenger = Passenger(
            name=row[2],
            sex=row[3],
            survived=bool(int(row[1])),
            age=float(row[4],
            p_class=row[0],
            fare=row[8],
            embarked=row[10]
        )
        passenger.save()

The code reads the data from the file, creates a new Passenger object for each row, and saves it to the database.

We use the all() function to check if all of the values in the columns that correspond to the fields in the Passenger model are not empty. If any of these values are empty, we use the continue statement to skip the current row and move on to the next row. This will skip any rows with missing values in any of these columns.

Having populated the database, let’s check the admin panel to see the results. Be sure to register the model in the admin.py file.

Can you see it? The database has been automatically populated with the Titanic dataset! It’s now time to proceed with the very task that forms the basis of this project.

Querying the database to display charts

As rightly stated, for Highcharts to interact with Django, the data must be formatted in a way it will understand. This can be done by querying the database. Therefore, in this project, we will query the database to:

1. Display the number of Titanic survivors and death by ticket class.
2. Display the number of Titanic survivors and death by gender.
3. Display the number of Titanic survivors and death by age group.

Titanic Survivors by Ticket class

Go to the views.py file and write this code:

from django.shortcuts import render
from .models import Passenger
import json


def survivors_by_ticket_class(request):
    dataset = []
    for ticket_class in Passenger.objects.values_list('p_class', flat=True).distinct():
        survived_count = Passenger.objects.filter(p_class=ticket_class, survived=True).count()
        not_survived_count = Passenger.objects.filter(p_class=ticket_class, survived=False).count()
        dataset.append({
            'ticket_class': ticket_class,
            'survived_count': survived_count,
            'not_survived_count': not_survived_count
        })


    survivors = {
        'name': 'Survived',
        'data': [data['survived_count'] for data in dataset],
        'color': 'green'
    }

    death = {
        'name': 'Not Survived',
        'data': [data['not_survived_count'] for data in dataset],
        'color': 'red'
    }


    chart = {
        'chart': {'type': 'column'},
        'title': {'text': 'Titanic Survivors by Ticket Class'},
        'xAxis': {'categories': [data['ticket_class'] for data in dataset]},
        'series': [survivors, death]
    }

    dump = json.dumps(chart)

    return render(request, 'ticket_class.html', {'chart': dump})

We initialize an empty list and iterate over the distinct value of the p_class field in the Passenger model. Then, we count the number of passengers that survived and those that do not. Finally, we create a dictionary and append it to the dataset list. The dataset now becomes a list of dictionaries.

This is the result stored in the dataset list:

[{'ticket_class': '1', 'survived_count': 156, 'not_survived_count': 80},
 {'ticket_class': '2', 'survived_count': 16, 'not_survived_count': 5},
 {'ticket_class': '3', 'survived_count': 8, 'not_survived_count': 5}]

Remember, we skip some rows of the Titanic dataset. The chart configuration is done at the backend in the view function.

The survivors and death dictionaries represent the two data series that will be plotted on the chart. The name key specifies the name of the series, the data key specifies the data values for the series, and the color key specifies the color of the columns for the series.

The chart dictionary contains the overall configuration for the chart. The 'chart': {'type': 'column'} key-value pair specifies that this is a column chart. The 'title': {'text': 'Titanic Survivors by Ticket Class'} key-value pair specifies the title of the chart.

The 'xAxis': {'categories': [data['ticket_class'] for data in dataset]} key-value pair specifies the categories for the x-axis of the chart, which in this case are the ticket classes. Finally, the 'series': [survivors, death] key-value pair specifies that the survivors and death data series should be plotted on the chart.

The json.dumps() function is used to convert the chart dictionary into a JSON-formatted string. This is necessary because the data needs to be in a format that can be easily passed to the template and rendered in the browser.

Here is the template:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Django Highcharts Example</title>
</head>
<body>
  <div id="container"></div>
  <script src="https://code.highcharts.com/highcharts.src.js"></script>
  <script>
    Highcharts.chart('container', {{ chart|safe }});
  </script>
</body>
</html>

The {{ chart|safe }} code is using the safe keyword to mark the chart variable as safe for rendering as HTML. This is necessary because the chart variable contains a JSON-formatted string that needs to be rendered the way it is written for the charting library to correctly parse and use it.

Without the safe keyword, any special characters in the chart variable would be escaped, which would prevent the charting library from correctly parsing the data and creating the chart.

Titanic survivors by gender

from django.db.models import Count, Q
from .models import Passenger

def survivors_by_gender(request):
    dataset = Passenger.objects \
        .values('sex') \
        .annotate(survived_count=Count('sex', filter=Q(survived=True)),
                  not_survived_count=Count('sex', filter=Q(survived=False))) \
        .order_by('sex')

    survivors = {
        'name': 'Survived',
        'data': [data['survived_count'] for data in dataset],
        'color': 'green'
    }

    death = {
        'name': 'Not Survived',
        'data': [data['not_survived_count'] for data in dataset],
        'color': 'red'
    }

    chart = {
        'chart': {'type': 'column'},
        'title': {'text': 'Titanic Survivors by Gender'},
        'xAxis': {'categories': [data['sex'] for data in dataset]},
        'series': [survivors, death]
    }

    dump = json.dumps(chart)

    return render(request, 'gender.html', {'chart': dump})

This function uses the provided code to create a dataset of the number of survivors and deaths by gender. In Django, the annotate() method is used to calculate aggregate values for each item in a queryset. It allows you to add additional fields to the queryset that represent the result of an aggregation, such as a count, sum, average, minimum, or maximum.

`Q` is a class in Django that allows you to create complex lookups by combining multiple query expressions using logical operators such as `&` (and), `|` (or), and `~` (not). It is often used in conjunction with the `filter()` method to create more complex queries.

The rest of the code is similar to the previous function, but with some changes to reflect the fact that the data is now grouped by gender instead of ticket class.

Check my GitHub page for the templates and the app-level URLs. They are basically the same.

Titanic survivors by age

Back to the views.py file.

from django.db.models import  F, ExpressionWrapper, IntegerField
def survivors_by_age(request):
    dataset = Passenger.objects \
        .annotate(age_bin=ExpressionWrapper((F('age')/10)*10, output_field=IntegerField())) \
        .values('age_bin') \
        .annotate(survived_count=Count('age_bin', filter=Q(survived=True)),
                  not_survived_count=Count('age_bin', filter=Q(survived=False))) \
        .order_by('age_bin')

    survivors = {
        'name': 'Survived',
        'data': [data['survived_count'] for data in dataset],
        'color': 'green'
    }

    death = {
        'name': 'Not Survived',
        'data': [data['not_survived_count'] for data in dataset],
        'color': 'red'
    }

    chart = {
        'chart': {'type': 'column'},
        'title': {'text': 'Titanic Survivors by Age Group'},
        'xAxis': {'categories': [f"{int(data['age_bin'])}s" for data in dataset]},
        'series': [survivors, death]
    }

    dump = json.dumps(chart)

    return render(request, 'age.html', {'chart': dump})

The F class is used to reference fields on a model within a query. In the code above, we are referencing the age field. ExpressionWrapper is a class that allows you to wrap a database expression with a specific output field. It is used to perform calculations on a field and use the result in a query.

In the code, ExpressionWrapper((F('age')/10)*10, output_field=IntegerField()) is used to create an expression that calculates the age group for each passenger.

IntegerField is a class that represents an integer field in a database. It is used as the output_field argument for the ExpressionWrapper to specify that the result of the expression should be treated as an integer.

Those three classes are provided by Django ORM to help with constructing complex database queries.

We can go on and on to create complex queries. Check my GitHub page to see more views created to:

Display Titanic survivors by location

Average age by ticket class

Total fare paid by passengers in each ticket class

The minimum and maximum age of passengers in each ticket class

Conclusion

In this tutorial, we have learned how to use the Django ORM to create complex queries that aggregate data from a model. We have also learned how to use this data to create charts using Highcharts.js.

Specifically, we learned how to populate our database with data from a CSV file. We have created several functions that generate charts showing various statistics about the Titanic passengers, such as the number of survivors by ticket class, gender, and port of embarkation, as well as the average age and total fare paid by ticket class.

Overall, this tutorial has demonstrated the power and flexibility of the Django ORM and shown how it can be used to create data-driven visualizations with Highcharts.js.

The post How I Created Charts Using Highcharts.js in Django Web Application appeared first on Be on the Right Side of Change.

Creating an “About Us” page in Django involves optionally creating a new app, and then defining a view to render the page. You then create a URL for the view and an HTML template for the page content. Finally, you run the server to view your “About Us” page.

Step 1: Create a New Django App (Optional)

If you want to keep your project organized, you can create a new app for your “About Us” page. In your terminal, navigate to your Django project directory and run the following command: python manage.py startapp about.

Step 2: Add the App to Your Project Settings (If a New App is Created)

Open your Django project’s settings file (usually settings.py) and add your new app to the INSTALLED_APPS list.

Step 3: Create a View for the Page

In the views.py file of your app, create a view for your page:

from django.shortcuts import render

def about_view(request):
    return render(request, 'about/about.html')

This view will render the “About Us” page when the page is visited.

Step 4: Create a URL for the View

In the urls.py file of your app, create a URL for your view:

from django.urls import path
from .views import about_view

urlpatterns = [
    path('about/', about_view, name='about'),
]

Step 5: Create a Template for the Page

In your app’s templates directory (you might need to create it), create a new directory named ‘about‘ and inside it, create an HTML file: about.html. This file should contain the HTML for your “About Us” page.

Step 6: Run the Server

Finally, run your server with python manage.py runserver and visit http://localhost:8000/about/ to see your “About Us” page.

Remember to replace ‘about’ with the actual name of your app if it’s different. This is a very basic example. In a real-world application, you might want to add more features, like dynamic content, images, etc.

Example

The ‘About’ or ‘About Us’ page contains information about the purpose and goals of your blog. It should also include your background and expertise in the selected niche and other relevant information to help readers understand your blog.

Let’s create the about.html template.

{% extends 'base.html' %}
{% block content %}

<div class="container">
  <div class="row">
    <div class="col-md-8 card mb-4  mt-3 left  top">
      <div class="card-body">
          <h1>About Us</h1>
          <p class="card-text">I created this blog to share tips, suggestions and practical advice on how to maintain good health</p>
          <p class="card-text">I'm not a health expert but I am passionate about the topic and committed to providing accurate and reliable information.</p>
          <p class="card-text">Any suggestion is highly welcome. Feel free to <a href="{% url 'contact' %}">contact me</a> for more information or to say hello.</p>
      </div>
    </div>
  </div>
</div>
{% endblock %}

As usual, we extend the base template. Inside the block, we write what our blog is all about. Notice how we link the contact page using Django template engine’s {% url … %} tag. Within it, we use the target name we specified earlier in the urls.py file.

We want this ‘About’ page to appear on every post. So, we will include it at the footer of the base template.

<footer class="py-3 bg-grey">
            <p class="m-0 text-dark text-center ">Copyright &copy; Django Blog</p>
            <p class="m-0 text-dark text-center"><a href="{% url 'about' %}">About Us</a></p>
  </footer>

So, from the About page, we can see a link to the contact page. You can as well add a link to your social media pages. For the view function, it’s pretty straightforward.

def about(request):
    return render(request, 'about.html')

Then, the endpoint:

path('about', about, name='about'),

Check out the GitHub repository for the full code of my portfolio app and the beginning of my tutorial series if you haven’t already:

Recommended: Python Django Portfolio App – How I Made It

The post Creating an About Us Page in Python Django appeared first on Be on the Right Side of Change.

Creating a contact page in Django involves creating a new app, adding it to the project settings, and defining a model for the contact form. You then create a form for the model, a view to handle form submission and display, and a URL for the view. Finally, you create templates for the form and a success page, and run the server to view your contact form.

Here’s a step-by-step guide:

Step 1: Create a new Django app

First, you need to create a new Django app. In your terminal, navigate to your Django project directory and run the following command:

python manage.py startapp contact

This will create a new Django app named ‘contact‘.

Step 2: Add the app to your project settings

Open your Django project’s settings file (usually settings.py) and add your new app to the INSTALLED_APPS list:

INSTALLED_APPS = [
    ...
    'contact',
    ...
]

Step 3: Create a model for the contact form

In the models.py file of your new app, create a model for the contact form. This model will define the fields of the form.

Here’s a basic example:

from django.db import models

class Contact(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField()
    message = models.TextField()

Step 4: Create a form for the model

In the same directory, create a new file named forms.py and define a form for your model:

from django import forms
from .models import Contact

class ContactForm(forms.ModelForm):
    class Meta:
        model = Contact
        fields = ['name', 'email', 'message']

Step 5: Create a view for the form

In the views.py file of your app, create a view for your form:

from django.shortcuts import render
from .forms import ContactForm

def contact_view(request):
    if request.method == 'POST':
        form = ContactForm(request.POST)
        if form.is_valid():
            form.save()
            return render(request, 'contact/success.html')
    else:
        form = ContactForm()
    return render(request, 'contact/contact.html', {'form': form})

This view will display the contact form when the page is visited, and it will save the form data when the form is submitted.

Step 6: Create a URL for the view

In the urls.py file of your app, create a URL for your view:

from django.urls import path
from .views import contact_view

urlpatterns = [
    path('contact/', contact_view, name='contact'),
]

Step 7: Create templates for the form and the success page

In your app’s templates directory (you might need to create it), create a new directory named ‘contact’ and inside it, create two HTML files: contact.html and success.html. The contact.html file should contain the form, and the success.html file should contain a message that will be displayed when the form is successfully submitted.

Step 8: Run the server

Finally, run your server with python manage.py runserver and visit http://localhost:8000/contact/ to see your contact form.

Remember to replace ‘contact‘ with the actual name of your app if it’s different. Also, this is a very basic example. In a real-world application, you would probably want to add more features, like sending an email when the form is submitted, validating the form data, etc.

Example: Portfolio Website Django

We will create a contact page so anyone who wants to pass information or suggestions can reach us. We have already created a contact page while building a portfolio website using Django. Please go through that tutorial for more explanation because we will do exactly what we did there.

Add this Contact class to your models.py file:

from datetime import datetime

class Contact(models.Model):
    name = models.CharField(max_length=50)
    subject = models.CharField(max_length=200)
    email = models.EmailField()
    submitted_on = models.DateTimeField(default=datetime.now)
    message = models.TextField()

    def __str__(self):
        return self.name

Perform migrations and proceed to create a ContactForm class in your forms.py file.

class ContactForm(forms.ModelForm):
    name = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Name'}))
    email = forms.EmailField(widget=forms.TextInput(attrs={'placeholder': 'Email'}))
    subject = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Subject'}))
    message = forms.CharField(widget=forms.Textarea(attrs={'placeholder': 'Message'}))

    class Meta:
        model = Contact
        fields = ('name', 'email', 'subject', 'message')

For the admin interface, let’s create the class in admin.py file.

class ContactAdmin(admin.ModelAdmin):
    list_display = ('name', 'email', 'subject', 'message')

admin.site.register(Contact, ContactAdmin)

Be sure to import all the necessary modules. For the view function:

from django.views.generic import CreateView
from django.contrib.messages.views import SuccessMessageMixin
from .forms import ContactForm
from django.contrib import messages
from django.http import HttpResponseRedirect
from django.urls import reverse_lazy

class ContactView(SuccessMessageMixin, CreateView):
    form_class = ContactForm
    success_url = reverse_lazy('index')
    template_name = 'contact.html'
    success_message = 'Your message was submitted successfully'

    def form_invalid(self, form):
        message.error(self.request, 'An unknown error has occurred!')
        return HttpResponseRedirect('')

let’s now create the template using the name we specified in the ContactView class.

{% extends 'base.html' %}

{% block content %}

<div class="col-md-8 card mb-4 mt-3">
      <h1 align="center">Contact Form</h1>
      <hr>
      <p>We want to hear from you. Please fill out this contact form for suggestions.</p>
      <hr>
      <br>
      <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="btn btn-primary btn-lg">Submit</button>
     </form>
 </div>
{% endblock %}

You are free to use the Django crispy forms as demonstrated in that project. For the endpoint, it will be like this:

path('contact', ContactView.as_view(), name='contact'),

The post How I Created a Simple Contact Page in Python Django appeared first on Be on the Right Side of Change.

As you can see, the templates contain links to several pages that haven’t yet been created.

Let’s see how far we can go about creating all these views. Remember, the purpose of this project is to strengthen your understanding of Python and Django as used in web development.

The Past Posts

The second view function of the previous series shows the most recent posts. What if we want to view past posts? The Hacker News website has a link to see posts submitted 30 minutes ago or less. We want to add that feature to our application.

from django.utils import timezone
from datetime import datetime, timedelta


def PastPostListView(request):
    time = str((datetime.now(tz=timezone.utc) - timedelta(minutes=30)))
    posts = Post.objects.filter(created_on__lte = time)
    for post in posts:
        post.count_votes()
        post.count_comments()

    context={
        'posts': posts,
    }
    return render(request, 'pastpostlist.html', context)

This view function filters the posts posted 30 minutes ago. It does that by first defining the time using the datetime module. The module gets the user’s current time zone, subtract 30 minutes from it using the timedelta type, and passes it to the query function. The function has a created_on__lte parameter.

The created_on is the name of the datetime field in the database (check your models.py file) while __lte here means less than or equal.

Thus, it queries the database and filters it based on posts submitted 30 minutes ago or less.

The URL will be like this:

path('past', PastPostListView, name='past_home'),

And the template will be the same as the previous two templates.

Displaying user’s info

On the Hacker News website, each post comes with the name of the person (creator) who submitted it. Also, a link is attached to the name for others to click to learn more about the creator. So, we have to create the views for such.

What do we expect to see on the user’s info page? Of course, the name of the creator, and a link showing all the posts created by the creator. That means we will create two view functions. One for information about the creator and the other for all the posts created by the creator.

def UserInfoView(request,username):
    user = User.objects.get(username=username)
    context = {
        'user': user,
    }
    return render(request, 'user_info.html', context)

Here, we call the User class to retrieve information about a particular user and pass it to the render() function which will then be displayed in the template. Since a username is passed as a parameter to the function, the route will also include the username as we can see below:

path('user/<username>', UserInfoView, name='user_info'),

And the template will be like this:

{% extends 'base.html' %}
{% block content %}

<div class="topnav">
  <a class="active" href="{% url 'home'%}">Hacker News</a>
  <a href="{% url 'new_home'%}">New</a>
  <a href="{% url 'past_home'%}">Past</a>
  <a href="{% url 'submit'%}">Submit</a>

  {% if request.user.is_authenticated %}
    <div class="topnav-right">
      <a href="{% url 'signout' %}">Sign Out </a>
    </div>
  {% else %}

<div class="topnav-right">
      <a href="{% url 'signin' %}">Sign In </a>
    </div>
  {% endif %}
</div>

<div class="w3-panel w3-light-grey w3-leftbar w3-border-grey">
<p><strong>User: </strong>{{user.username}}</p>
<p><strong>Created: </strong>{{user.date_joined}}</p>
</div>

<a href="{% url 'user_posts' user.username %}">Submissions</a>

Once an individual is logged in, he can see information about the creator. Notice that the user info also shows the date the creator joined our Hacker News clone website.

Now, to see all the posts by a particular creator, there is also a link attached to ‘Submissions.’  This is the second view function we will now create.

def UserSubmissions(request,username):
    user = User.objects.get(username=username)
    posts = Post.objects.filter(creator = user)
    for post in posts:
        post.count_votes()
        post.count_comments()
    return render(request, 'user_posts.html', {'posts': posts})

We call two model Classes in this view function. The first was used to get a particular user (creator) using the username parameter passed to the function, and passes it to the Post class. The second filters all posts based on a particular creator it received from the User class.

As usual, the votes and comments fields for each post have to be populated with their respective number by calling the methods.

The URL routes will be:

path('posts/<username>',UserSubmissions, name='user_posts'),

Did you see how the route corresponds to the link attached to ‘Submission’ in the template above? By using the name specified in the URL route, we are referring to this view function. But that is not all. Remember that in the previous view function, the user variable was passed in the context dictionary.

It encompasses every information about the user. Therefore to get the name of the user that will be passed as a parameter to this second view function, user.username has to be included in the link. Once the name is passed to this view function, every post submitted by the person bearing that name will be displayed.

The template for this view function will be:

{% extends 'base.html' %}
{% block content %}

<div class="topnav">
  <a class="active" href="{% url 'home'%}">Hacker News</a>
  <a href="{% url 'new_home'%}">New</a>
  <a href="{% url 'past_home'%}">Past</a>
  <a href="{% url 'submit'%}">Submit</a>

  {% if request.user.is_authenticated %}
    <div class="topnav-right">
      <a href="{% url 'signout' %}">Sign Out </a>
    </div>
  {% else %}
    <div class="topnav-right">
      <a href="{% url 'signin' %}">Sign In </a>
    </div>
  {% endif %}
</div>
<ol>
{% for post in posts %}
  <div class="w3-panel w3-light-grey w3-leftbar w3-border-grey">
  <li><p><a href = "{{ post.url }}">{{ post.title }}</a></p>
  <p>{{ post.votes }} | Created {{ post.created_on }}| <a href = "{% url 'user_info' post.creator.username %}">{{ post.creator.username }}</a> | <a href="{% url 'post' post.id %}"> {{ post.comments }} Comments</a></p></li>
</div>
{% endfor %}
</ol>
{% endblock %}

All the templates we have created so far may appear to look similar but they are not. This one displays every field we created in the post model based on a given creator. Again, using Django template engine in the {% … %} and {{ … }} blocks simplifies everything for us.

Conclusion

So far, we have created five views for the Hacker News clone Django website. Make sure you import the corresponding modules and functions at the top of the urls.py and views.py files. You can always check the full code on GitHub.

Take your time to go through what we have done. if certain things are not clear, you can check the documentation. When we are done coding this application, we will test everything – not in the test.py file – but by populating our database using information from the Hacker News website.

Hopefully, it will help clarify some points. See you in the next series.

Recommended: How I Coded a Hacker News Clone in Django

The post Django – How I Added More Views to My Hacker News Clone appeared first on Be on the Right Side of Change.

At the same time, we can’t just let “strangers” contact us. Interested individuals must be duly registered on our platform. Thus, in upcoming project tutorial, we will add a user authentication feature to this application.

Remember that this is a continuation of the real estate application project. The full code is on GitHub.

Steps in Creating a Contact Form

We have already created a contact form page when designing a portfolio website. I could have told you guys to go through that tutorial and not spend another time repeating what I have already done previously. However, since this contact page will have a feature not added in that tutorial, I have to design it again.

This will also add to your knowledge as you see various ways to do the same thing using the Django web framework. Here are the steps to get this contact form designed on our application:

1. Create a model for the contact form.
2. Create a view to handle GET and POST request
3. Restrict access to the view
4. Add a template to render the view
5. Map the view to a URL route

 The Model

The model will be used to store the messages in the database. It’s going to contain the name, email, messages and the date the message was received in the database.

from datetime import datetime
class Contact(models.Model):
    name = models.CharField(max_length=50)
    email = models.EmailField()
    submitted_on = models.DateTimeField(default=datetime.now)
    message = models.TextField()

    def __str__(self):
        return self.name

Next is to apply migrations. Then we proceed to create a contact form in the forms.py file.

The Form

We will subclass the forms.ModelForm class to direct all messages to the database.

from django import forms
from .models import Contact

class ContactForm(forms.ModelForm):
    class Meta:
        model = Contact
        fields = ['name', 'email', 'message']

We modify the behavior of the Contact model using the Meta class to display selected fields.

The Views

We will use function-based views instead of the class-based views we used in the first contact form we made.

from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from .forms import ContactForm

@login_required(login_url=‘login’)
def contact(request):
    if request.method == 'POST':
        form = ContactForm(request.POST)
        if form.is_valid():
            # Save the data to the database
            form.save()
            return redirect('home')
    else:
        form = ContactForm()
    return render(request, 'contact.html', {'form': form})

In this view, we are using Django’s @login_required decorator to restrict access to the contact view. If a user tries to access this view without being authenticated, they will be redirected to the login page.

We create an instance of the ContactForm class. Once the user enters the required fields defined in the forms.py file and submits the form, it will check whether the form is valid before saving it to the database.

Once the form has been successfully validated and saved, it will redirect the user to the home page. If, though, the request method is GET, it will create an instance of the form and pass it to the render() function to be displayed on a template.

The Template

Next, let’s create a template for our contact form. In the templates/contact.html file, add the following code:

{% extends 'base.html' %}
{% load tailwind_filters %}
{% block content %}

<div class="col-md-8 card mb-4 mt-3">
      <h1 align="center">Contact Form</h1>
      <hr>
      <p>Please fill out this form to contact us for more information.</p>
      <hr>
      <br>
      <form method="post">
        {% csrf_token %}
        {{ form | crispy }}
        <button type="submit" class="btn btn-primary btn-lg">Submit</button>
     </form>
 </div>
{% endblock %}

In this template, we are using Django’s built-in forms to create the contact form fields, and crispy tailwind to give it a nice appearance.

The URL will be:

from .views import contact

path('contact', contact, name='contact'),

The Admin

To see the Contact model in the admin panel, we have to register it in the admin.py file.

from .models import Contact

admin.site.register(Contact)

Login to your admin panel to see the Contact model.

A little adjustment

I made some modifications to the real estate application. Check my GitHub page to see the full code. Here are some of the adjustments I made:

• Changing the name of the home page template;
• Allowing only the admin to perform CRUD operations by removing the update, edit and delete links;
• Restricting access also to the retrieve view;
• The link to the contact page now appears on the home page

Visitors to the website can only see several properties listed but won’t be allowed to access the READ MORE link as well as the contact page without registering on the platform.

• Giving users the option to log out after logging in. The link now appears on the retrieve.html template.

• Creating the user authentication feature. Check out this article where I showed how I added the register, login and logout functionality in this application.

Conclusion

We come to the end of this tutorial. The application now has a contact page where registered users can reach out to us to know more about properties available for sale.

This is just a simple demonstration of how Django can be used to build applications. Yes, complex applications which are far beyond the scope of this project tutorial.

By taking them one step at a time, you will get to your destination.

The post How I Created a Contact Form in a Real Estate Application appeared first on Be on the Right Side of Change.