It is great to see most businesses going digital as opposed to the traditional way of doing things(mostly manually). Assuming you are running an online electronics store, you may want your customers to be able to make payments on the spot and while at it, give them the flexibility of selecting whether to pay using mobile money or card.
My name is Nick and in this two-part tutorial, we are going to create a simple electronics store using Django and then collect payments from customers using Flutterwave.
PROJECT SETUP
Let's quickly create a Django project by navigating to the desktop directory and opening a terminal window then:
mkdir django_flutterwave && cd django_flutterwave
Next let's create a new virtual env and install dependencies we will need.
virtualenv env
source env/bin/activate
pip install django requests django-environ Pillow
So aside from django we need:
1.requests library-to make calls to the payments endpoint
2.django-environ- to securely store our environment variables
3.Pillow to help with image processing
Let's create the project:
django-admin startproject django_store .
python manage.py startapp electronics
Remember to add 'electronics' to the list of installed apps in the project's settings.py
.
MODELS
Open electronics/models.py
and add the following code to it:
from django.db import models
# Create your models here.
class Product(models.Model):
name=models.CharField(max_length=250)
image=models.ImageField(upload_to='product_images')
price=models.FloatField()
def __str__(self) -> str:
return str(self.name)
#Register it in admin
from django.contrib import admin
admin.site.register(Product)
The next step is to run makemigrations
and finally migrate
commands to register our database table.
Spin up the server using runserver
command.
Create a superuser using the createsuperuser
command and login to (http://localhost:8000/admin/) and add a couple of electronic products.
SETTINGS CONFIGURATION
Notice that our Product class accepts images so let's update our settings.py
to reflect this. At the bottom of the file add the following code:
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
open the project's urls.py
and add the following code:
from django.contrib import admin
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
To tell django where to find our HTML markup, add the following to the TEMPLATES SECTION inside the DIRS
part:
os.path.join(BASE_DIR, 'templates')
With that in place let's move on.
VIEWS
All the business logic will sit here. We need to list the products from the database so let's create a function to handle that.
Add the following code to the views.py
.
from django.shortcuts import render
from .models import Product
# Create your views here.
def list_products(request):
products=Product.objects.all()
ctx={
'products':products
}
return render(request, 'products.html', ctx)
update the project's urls.py
like so:
from os import name
from django.contrib import admin
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static
from electronics.views import list_products
urlpatterns = [
path('admin/', admin.site.urls),
path('', list_products, name='list'),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
TEMPLATES
Create a root level folder called 'templates' and inside it create 'products.html' file. Now the content to this file can be found on this paste
With that in place go ahead and restart the dev server and access (http://localhost:8000/) and you should surely see some UI like mine below:
THAT'S IT
Well I have to wrap up this part at this juncture. The goal here was to create the project, add products and display them on the homepage. I hope that is what you have on your end.
Thanks for taking time to read and follow along. I am working on part 2 so stay tuned!
Follow me here and on Twitter for updates.
Also if you have time visit my website here.
Cheers!
Top comments (3)
Working for the next part of this series
Part 2 is out dev.to/nick_langat/collect-payment...
This is stupid docs I have never seen. How do you use this code without installing Flutterwave dependencies ?