We have finally made it to the last lecture of our complete invoicing web application that we built with Django and Bootstrap5. This is the third article in a series of 3. You do need to read the first two so you can follow along. The idea is to give you a complete, step-by-step guide on creating your own Invoicing Application — that you can use to create pdf invoices and email them directly from your app.
-
Github Page — Code Example for Python Django Invoice Generator Application
-
Youtube Video — Step by step guide on creating the invoice generator app
Previous Articles
Lesson one — Python Django Invoice App
Lesson two — Setup Django app, models or invoicing app
Complete Invoice App with Django and Bootstrap5
What we are going to cover in this article
-
Invoice app view function — to create and view an invoice instance
-
Override form init method with cripsy forms layouts
-
Display PDF invoice
-
Email PDF invoice to client
-
Complete Youtube tutorial
Invoice app view function — to create and view an invoice instance
In the previous tutorial we created a model list page — this is a page that would display the list of the model instances. From this list page, a user should be able to click on a button that takes them to the “create-page” where they can create an instance of the model class. A model list page will look like this:
The views we are going to create next will cover creating a new invoice and viewing an existing invoice.
Creating an invoice
This will be done in two steps. Generally you should be able to create an invoice in just one step, but in our case — we need to add product instances to an invoice at the same time that we are creating the invoice. This means, we need to know what invoice to add the products to:
The first step will create a blank invoice instance:
@login_required
def createInvoice(request):
#create a blank invoice ....
number = 'INV-'+str(uuid4()).split('-')[1]
newInvoice = Invoice.objects.create(number=number)
newInvoice.save()
inv = Invoice.objects.get(number=number)
return redirect('create-build-invoice', slug=inv.slug)
This view will create a blank invoice instance and redirect the user to a different view called ‘create-build-invoice’ where the user can populate this invoice. This method allows us to have a blank instance to add products to, edit the invoice as we go — save it and come back later. We will have the slug to direct us to the building view — which will look like this:
@login_required
def createBuildInvoice(request, slug):
#fetch that invoice
try:
invoice = Invoice.objects.get(slug=slug)
pass
except:
messages.error(request, 'Something went wrong')
return redirect('invoices')
#fetch all the products - related to this invoice
products = Product.objects.filter(invoice=invoice)
context = {}
context['invoice'] = invoice
context['products'] = products
if request.method == 'GET':
prod_form = ProductForm()
inv_form = InvoiceForm(instance=invoice)
client_form = ClientSelectForm(initial_client=invoice.client)
context['prod_form'] = prod_form
context['inv_form'] = inv_form
context['client_form'] = client_form
return render(request, 'invoice/create-invoice.html', context)
if request.method == 'POST':
prod_form = ProductForm(request.POST)
inv_form = InvoiceForm(request.POST, instance=invoice)
client_form = ClientSelectForm(request.POST, initial_client=invoice.client, instance=invoice)
if prod_form.is_valid():
obj = prod_form.save(commit=False)
obj.invoice = invoice
obj.save()
messages.success(request, "Invoice product added succesfully")
return redirect('create-build-invoice', slug=slug)
elif inv_form.is_valid and 'paymentTerms' in request.POST:
inv_form.save()
messages.success(request, "Invoice updated succesfully")
return redirect('create-build-invoice', slug=slug)
elif client_form.is_valid() and 'client' in request.POST:
client_form.save()
messages.success(request, "Client added to invoice succesfully")
return redirect('create-build-invoice', slug=slug)
else:
context['prod_form'] = prod_form
context['inv_form'] = inv_form
context['client_form'] = client_form
messages.error(request,"Problem processing your request")
return render(request, 'invoice/create-invoice.html', context)
return render(request, 'invoice/create-invoice.html', context)
This is view is the heard of our application. There are three forms in the view: (1) A product form for creating a product to add to the invoice, (2) The actual invoice form and (3) a client select form for selecting a client from the available clients to add to the invoice.
For more information about the views check out out 3hr video tutorial on youtube, there is far too much information to cover in a written tutorial.
Override form init method with Cripsy forms layouts — Invoice Create Form
Django crispy forms are a great way to cut corners and display forms quickly, neatly on the front end. The basic layout is usually just one column, if you have a large form with many fields — you can adjust the crispy form layout in the form class.
This is how we did it for the invoice form:
from django import forms
from django.forms import widgets
from .models import *
#Form Layout from Crispy Forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Submit, Row, Column
class DateInput(forms.DateInput):
input_type = 'date'
class InvoiceForm(forms.ModelForm):
THE_OPTIONS = [
('14 days', '14 days'),
('30 days', '30 days'),
('60 days', '60 days'),
]
STATUS_OPTIONS = [
('CURRENT', 'CURRENT'),
('OVERDUE', 'OVERDUE'),
('PAID', 'PAID'),
]
title = forms.CharField(
required = True,
label='Invoice Name or Title',
widget=forms.TextInput(attrs={'class': 'form-control mb-3', 'placeholder': 'Enter Invoice Title'}),)
paymentTerms = forms.ChoiceField(
choices = THE_OPTIONS,
required = True,
label='Select Payment Terms',
widget=forms.Select(attrs={'class': 'form-control mb-3'}),)
status = forms.ChoiceField(
choices = STATUS_OPTIONS,
required = True,
label='Change Invoice Status',
widget=forms.Select(attrs={'class': 'form-control mb-3'}),)
notes = forms.CharField(
required = True,
label='Enter any notes for the client',
widget=forms.Textarea(attrs={'class': 'form-control mb-3'}))
dueDate = forms.DateField(
required = True,
label='Invoice Due',
widget=DateInput(attrs={'class': 'form-control mb-3'}),)
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.layout = Layout(
Row(
Column('title', css_class='form-group col-md-6'),
Column('dueDate', css_class='form-group col-md-6'),
css_class='form-row'),
Row(
Column('paymentTerms', css_class='form-group col-md-6'),
Column('status', css_class='form-group col-md-6'),
css_class='form-row'),
'notes',
Submit('submit', ' EDIT INVOICE '))
class Meta:
model = Invoice
fields = ['title', 'dueDate', 'paymentTerms', 'status', 'notes']
First, we instantiate form-helper, then use the layout class to do the rest. This form can then be replicated anywhere in your code, it will always have the same layout you have designed in the form class.
Display PDF invoice — Django Invoicing Application
Once the invoice is generated, we want to create a PDF document that we can save, or email to the client for action. We have the data in our database, but it’s not yet in a clear pdf document format that we can send out.
To create pdf documents in Django we will need: (1) wkhtmltopdf and (2) pdfkit. Our Skolo Online Documentation has more written steps to make sure your environment is ready for pdfkit.
I will combine the code with — sending an email of the generated PDF.
#Dont forget the view imports
def emailDocumentInvoice(request, slug):
#fetch that invoice
try:
invoice = Invoice.objects.get(slug=slug)
pass
except:
messages.error(request, 'Something went wrong')
return redirect('invoices')
#fetch all the products - related to this invoice
products = Product.objects.filter(invoice=invoice)
#Get Client Settings
p_settings = Settings.objects.get(clientName='Skolo Online Learning')
#Calculate the Invoice Total
invoiceTotal = 0.0
if len(products) > 0:
for x in products:
y = float(x.quantity) * float(x.price)
invoiceTotal += y
context = {}
context['invoice'] = invoice
context['products'] = products
context['p_settings'] = p_settings
context['invoiceTotal'] = "{:.2f}".format(invoiceTotal)
#The name of your PDF file
filename = '{}.pdf'.format(invoice.uniqueId)
#HTML FIle to be converted to PDF - inside your Django directory
template = get_template('invoice/pdf-template.html')
#Render the HTML
html = template.render(context)
#Options - Very Important [Don't forget this]
options = {
'encoding': 'UTF-8',
'javascript-delay':'1000', #Optional
'enable-local-file-access': None, #To be able to access CSS
'page-size': 'A4',
'custom-header' : [
('Accept-Encoding', 'gzip')
],
}
#Javascript delay is optional
#Remember that location to wkhtmltopdf
config = pdfkit.configuration(wkhtmltopdf='/usr/bin/wkhtmltopdf')
#Saving the File
filepath = os.path.join(settings.MEDIA_ROOT, 'client_invoices')
os.makedirs(filepath, exist_ok=True)
pdf_save_path = filepath+filename
#Save the PDF
pdfkit.from_string(html, pdf_save_path, configuration=config, options=options)
#send the emails to client
to_email = invoice.client.emailAddress
from_client = p_settings.clientName
emailInvoiceClient(to_email, from_client, pdf_save_path)
invoice.status = 'EMAIL_SENT'
invoice.save()
#Email was send, redirect back to view - invoice
messages.success(request, "Email sent to the client succesfully")
return redirect('create-build-invoice', slug=slug)
from django.core.mail import EmailMessage
from django.conf import settings
def emailInvoiceClient(to_email, from_client, filepath):
from_email = settings.EMAIL_HOST_USER
subject = '[Skolo] Invoice Notification'
body = """
Good day,
Please find attached invoice from {} for your immediate attention.
regards,
Skolo Online Learning
""".format(from_client)
message = EmailMessage(subject, body, from_email, [to_email])
message.attach_file(filepath)
message.send()
Make sure you have the SMTP settings configured in your settings.py file for the above code to work.
Complete Youtube tutorial — Final Instalment of Invoice App
For mode code snippets on Django Web Development, check out our Skolo Online Documentation page.