DEV Community: Yahaya Kehinde

How To Populate Your Database From An External API in Django.

Yahaya Kehinde — Wed, 18 Nov 2020 10:54:30 +0000

In today's writeup, I am going explain how to populate your database with data from an external API in Django by building a small project. For this, We are going to use the MealDB API - https://www.themealdb.com/api.php and also bootstrap for the styling.

First, create a new project and your virtual environment.

django-admin startproject meal_project

Change into the project directory and create a new app:

cd meal_project
python manage.py startapp meal_app

Add the newly created app into installed apps under 'settings.py'

INSTALLED_APPS = [
'meal_app',
]

In the root directory, create a 'templates' folder and add it within 'settings.py'

TEMPLATES = [
 'DIRS': [os.path.join(BASE_DIR, 'templates')],
]

In meal_app, create a 'urls.py' file and within the 'meal_project' urls.py file, include the path to the meal_app 's urls.py file.

from django.contrib import admin
from django.urls import include, path
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include ('meal_app.urls'))
]

In meal_app.urls, add the path to our views. Within our views, we going to have a list view and a detail view.

from django.urls import  path
from product_app import views

urlpatterns = [
    path('', views.get_meals, name = "get_meals"),
    path('meals/<int:id>/',views.meal_detail, name = "meal_detail")
]

In templates folder, create a 'meals' folder and within it a 'base.html' from which all other templates will inherit.

base.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Movie App</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
{% block content%}
{% endblock %}

<script src = "{% static 'js/script.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>

Then meal.html

{% extends 'meals/base.html'%}
{% load static %}
{% block content %} 
    <div class = "container">
      <br>
      <h2 class = "text-center">Search for your favorite Meals</h2> 
      <br>
      <form method="GET">
        <input type = "text" name = "name" placeholder="Search..." class = "text-center">
        <button type = "submit" class = "btn-danger btn-sm">SEARCH MEAL</button>
      </form> 
    </div>  
{% endblock %}

The meal.html contains a simple search form and a submit button.

Next, we need to create a model which we would populate with data from the meal DB API. The fields on the model correspond to the specific attributes on the API that we want to populate our database with.

models.py

from django.db import models

class Meal(models.Model):
    name = models.CharField(max_length=50, blank = True, null = True)
    category = models.CharField(max_length=10, blank = True, null = True)
    instructions = models.CharField(max_length=4000, blank = True, null = True)
    region = models.CharField(max_length=20, blank = True, null = True)
    slug = models.SlugField(default = 'test')
    image_url = models.CharField( max_length=50, blank = True, null = True)

    def __str__(self):
        return self.name

What our API looks like:

It's now time to migrate our database and create our database tables.

python manage.py makemigrations
python manage.py migrate

Next, we need to install a python library that helps in making HTTP requests;

pip install requests

The main logic of the project will reside in the views.py.

from django.shortcuts import  render
from meal_app.models import Meal
import requests

def get_meals(request):
    all_meals = {}
    if 'name' in request.GET:
        name = request.GET['name']
        url = 
        'https://www.themealdb.com/api/json/v1/1/search.php? 
        s=%s' % name
        response = requests.get(url)
        data = response.json()
        meals = data['meals']

        for i in meals:
            meal_data = Meal(
                name = i['strMeal'],
                category = i['strCategory'],
                instructions = i['strInstructions'],
                region = i['strArea'],
                slug = i['idMeal'],
                image_url = i['strMealThumb']
            )
            meal_data.save()
            all_meals = Meal.objects.all().order_by('-id')

    return render (request, 'meals/meal.html', { "all_meals": 
    all_meals} )

In the function get_meals defined above, we obtain the value the user types into the search input using request.GET and assign it to a variable name.Then we pass this variable as our search term into the url when we make the HTTP request. We get a response and convert it JSON. This returns a list which we save in the variable meals.

name = request.GET['name']
url = 'https://www.themealdb.com/api/json/v1/1/search.php?s=%s' % name
response = requests.get(url)
data = response.json()
meals = data['meals']

Now in order to populate our database with the list our HTTP request returned, we need to loop through the list items and assign the parameters as fields in our model.

 for i in meals:
            meal_data = Meal(
                name = i['strMeal'],
                category = i['strCategory'],
                instructions = i['strInstructions'],
                region = i['strArea'],
                slug = i['idMeal'],
                image_url = i['strMealThumb']
            )

Then we save into the database and pass it as context to our templates:

from django.shortcuts import  render
from meal_app.models import Meal
import requests

def get_meals(request):
    all_meals = {}
    if 'name' in request.GET:
        name = request.GET['name']
        url = 
        'https://www.themealdb.com/api/json/v1/1/search.php? 
        s=%s' % name
        response = requests.get(url)
        data = response.json()
        meals = data['meals']

        for i in meals:
            meal_data = Meal(
                name = i['strMeal'],
                category = i['strCategory'],
                instructions = i['strInstructions'],
                region = i['strArea'],
                slug = i['idMeal'],
                image_url = i['strMealThumb']
            )
            meal_data.save()
            all_meals = Meal.objects.all().order_by('-id')

    return render (request, 'meals/meal.html', { "all_meals": 
    all_meals} )

Within meal,html

{% extends 'meals/base.html'%}
{% load static %}
{% block content %}
  <div class = "container">
    <div class = "text-center container">
      <br>
      <h2 class = "text-center">Search for your favorite Meals</h2> 
      <br>
      <form method="GET">
        <input type = "text" name = "name" placeholder="Search..." class = "text-center">
        <button type = "submit" class = "btn-danger btn-sm">SEARCH MEAL</button>
      </form> 
    </div> 
    <br><br>
    <div class="row">
      {% for meal in all_meals %}
        <div class="col-md-4 col-sm-6 col-lg-3">
          <div class="card">
            <img class="card-img-top" src="{{ meal.image_url }}" alt="Card image cap">
            <div class="card-body text-center">
              <p class="card-title">{{ meal.name }}</p>
              <hr>
              <p class="card-text">{{ meal.region }}</p>
              <a href="/meals/{{meal.id}}"
              ><input
                type="submit"
                value="Learn More"
                class="btn btn-danger btn-sm"
                type="button"
            /></a>
            </div>
          </div>
          <br><br><br>
        </div>
      {% endfor %}
    </div>
  </div>
{% endblock %}

Now if a user searches for a meal; it renders on the page and is automatically saved in the database.

MEAL LIST PAGE:

DATABASE:

lastly we create a Meal Detail page:

meal_detail.html

{% extends 'meals/base.html'%}
{% load static %}
{% block content %}

<div class = "container"> 
    <br><br>
    <div class="row"> 
        <div class="col-md-5">
          <br>
          <img class="img-fluid" src="{{ meal.image_url }}" alt="" style = "width: 90%;">
          <br><br>
          <h3 class="card-title text-center ">{{ meal.name }}</h3>
        </div> 
        <div class="col-md-7 shadow-lg p-3 mb-5 bg-white rounded">
          <h1 class="my-3">Food Description</h1>
          <p class = "lead">{{ meal.instructions }}</p>
          <h1 class="my-3">Food Details</h1>
          <ul>
            <li>{{ meal.category }}</li>
            <li>{{ meal.region }}</li>
          </ul>
        </div>
    </div>
</div>

{% endblock %}

in views.py

def meal_detail(request, id):
    meal = Meal.objects.get(id = id)
    print(meal)
    return render (
        request,
        'meals/meal_detail.html',
        {'meal': meal}
    )

Now when we click on the Learn More button we are taken to the meal_details.html template

Thank you! ☺️

Build a Pharmacy Inventory manager with Django.

Yahaya Kehinde — Sat, 31 Oct 2020 08:41:29 +0000

In this article, I am going to explain how to build an inventory manager for a pharmacy.

The aim of the app was to be able to do the following:

1) The user can create a database table of each item, the item category, unit price and total quantity in stock.
2) User can click on an item, buy it, and generate a receipt.
3) Within the receipt page, the total cost of the item is calculated based on the quantity purchased and the unit price.
4) The balance to be received is also calculated by subtracting the total cost from the amount paid.
5) Based on products sold, a database table of all sales made is created the keeps track of the following:
-The total amount paid summed up for all the items sold.
-The total balance received by all customers also summed up.
-Net balance after subtracting total balance received from total amout paid.
6) The app keeps a log of the quantity remaining in stock for each item as it is being sold.
7) The app is also able to replenish depleting stock in the Products quantity table.

Please note that this tutorial assumes a baseline knowledge of python and Django and that you have django already installed. We will be using Bootstrap 4 and crispy forms for the styling.

Create a new project

django-admin startproject pharmacy_project

Change into the pharmacy_project directory and create a new app

cd pharmacy_project
python manage.py startapp product_app

Add the newly created app into installed apps under 'settings.py'

INSTALLED_APPS = [
'product_app',
]

In the root directory, create a 'templates' folder and add it within 'settings.py'

TEMPLATES = [
 'DIRS': [os.path.join(BASE_DIR, 'templates')],
]

Within the 'product_app' create a 'static' folder and add a path and a static root within settings.py

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIR = [
    os.path.join(BASE_DIR, 'product_app/static')
]

In product_app, create a 'urls.py' file and within the 'pharmacy_project' urls.py file, include the path to the product_app 's urls.py file

from django.contrib import admin
from django.urls import include, path
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include ('product_app.urls'))
]

In product_app.urls, add the path to our views

from django.urls import  path
from product_app import views

urlpatterns = [
path('home/', views.home, name = "home"),
]

In templates folder, create a 'products' folder and within it a 'base.html' from which all other templates will inherit from. The navbar also contains a conditional statement to ensure that users can only view the details of the app when logged in.

base.html

{% load static%}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>Pharmacy App</title>
    <link rel = "stylesheet" href = {% static 'css/main.css'%}>
     <!-- Raleway font -->
    <link
      href="https://fonts.googleapis.com/css?family=Raleway"
      rel="stylesheet"
    />
    <!-- Montserrat font -->
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark "> 
        <a class="nav-link" href=""><h1 class="navbar-brand" style = "font-size: 25px">PHARM PLUS</h1></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="nav navbar-nav ml-auto">
           {% if user.is_authenticated%}
              <li class="nav-item">
                <a class="nav-link" href="{% url 'home' %}">HOME</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="{% url 'receipt'%}">RECEIPTS</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="{% url 'all_sales'%}">ALL SALES</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="{% url 'logout'%}">LOGOUT</a>
              </li>
            {% endif %}
          </ul>
     </nav>
    {% block content%}
    {% endblock%}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

Now we need to create our models. For the project we are going to have three models, a Product model, a Category and a Sale model.

from django.db import models

class Category(models.Model):
    name = models.CharField(max_length = 50, null = True, blank = True)

    def __str__(self):
        return self.name


class Product(models.Model):
    category_name = models.ForeignKey(Category, on_delete = models.CASCADE,null = True, blank = True )
    item_name = models.CharField(max_length = 50, null = True, blank = True)
    total_quantity = models.IntegerField(default = 0, null = True, blank = True)
    issued_quantity = models.IntegerField(default = 0, null = True, blank = True)
    received_quantity = models.IntegerField(default = 0, null = True, blank = True)
    unit_price = models.IntegerField(default = 0, null = True, blank = True)

    def __str__(self):
        return self.item_name


class Sale(models.Model):
    item = models.ForeignKey(Product, on_delete = models.CASCADE)
    quantity = models.IntegerField(default = 0, null = True, blank = True)
    amount_received = models.IntegerField(default = 0, null = True, blank = True)
    issued_to = models.CharField(max_length = 50, null = True, blank = True)
    unit_price = models.IntegerField(default = 0, null = True, blank = True)

    def __str__(self):
        return self.item.item_name

Within 'views.py'

from django.shortcuts import render
from product_app.models import Product

def home(request):
    products = Product.objects.all().order_by('-id')

    return render(request,
                  'products/index.html',
                  {'products': products})

In 'index.html',

{% extends 'products/base.html'%} {% block content%}
<br></br>

<div class = "container">
  <h1 class= "text-center">ITEMS IN STOCK</h1>
  <br>
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Category</th>
        <th scope="col">Item Name</th>
        <th scope="col">Quantity</th>
        <th scope="col">Unit Price(₦)</th>
        <th scope = "col">Detail</th>
      </tr>
    </thead>
    {% for product in products%}
    <tbody>
      <tr>    
        <td>{{product.category_name}}</td>
        <td>{{product.item_name}}</td>
        <td>{{product.total_quantity}}</td>
        <td>₦{{product.unit_price}}</td>
        <td><a href="#"
              ><input
                type="submit"
                value="BUY ITEM"
                class="btn btn-secondary btn"
                type="button"
            /></a></td>
      </tr>
    </tbody>
    {% endfor %}
  </table>
</div>
{% endblock%}

This is what my app looks now:

Next we Build out the product detail page,

In product_app.urls,

urlpatterns = [
path('home/<int:product_id>/', views.product_detail, name='product_detail'),
]

Next, Create a product_detail view:

 def product_detail(request, product_id):
    product = Product.objects.get(id = product_id)
    return render(request, 
                 'products/product_detail.html',
                 {'product': product})

product_detail.html

{% extends 'products/base.html'%} {% block content%}
<br></br>

<div class = "container">
    <a href="{% url 'issue_item' product.id %}" ><input type="submit" value="Order Item" class="btn btn-secondary" btn type="button"/></a>
    <a href="{% url 'add_to_stock' product.id %}" ><input type= "submit" value="Add Item" class="btn btn-secondary btn" type="button"/></a>
</div>

<br></br>
<div class = "container">
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Category</th>
        <th scope="col">Item Name</th>
        <th scope="col">Quantity</th>
        <th scope="col">Unit Price(₦)</th>   
      </tr>
    </thead>
    <tbody>
      <tr>    
        <td>{{product.category_name}}</td>
        <td>{{product.item_name}}</td>
        <td>{{product.total_quantity}}</td>
        <td>₦{{product.unit_price}}</td>   
      </tr>
    </tbody>  
  </table>
</div>
{% endblock%}

Lastly add the 'href' attribute to the button within the product page that links to the product detail page:

<a href="{% url 'product_detail' product.id %}">
                <input
                type="submit"
                value="BUY ITEM"
                class="btn btn-secondary btn"
                type="button"
                />
</a>

My product detail page:

Now within the product detail page, we want to add two buttons, one for ordering the item and another for replenishing stock. Both lead to different forms.

Within product_detail.html,

<div class = "container">
    <a href="{% url 'issue_item' product.id %}" ><input type="submit" value="Order Item" class="btn btn-secondary" btn type="button"/></a>
    <a href="{% url 'add_to_stock' product.id %}" ><input type= "submit" value="Add Item" class="btn btn-secondary btn" type="button"/></a>
</div>

Next we create the url patterns,

urlpatterns = [
path('issue_item/<str:pk>/', views.issue_item, name='issue_item'),   
    path('add_to_stock/<str:pk>/', views.add_to_stock, name='add_to_stock'),
]

Now we want to define an add_to_stock form and a sales form. Create a 'forms.py' file within 'product_app'. Next, create an AddForm which uses the 'received_quantity' field earlier defined in our Product model. Finally create a SaleForm that uses the Sale model and inherits the 'quantity, amount_received and issued_to' fields.

from django.forms import ModelForm
from .models import *

class AddForm(ModelForm):
    class Meta:
        model = Product
        fields = ['received_quantity']

class SaleForm(ModelForm):
    class Meta:
        model = Sale
        fields = ["quantity", "amount_received", "issued_to"]

Lastly we need to create our views

in views.py


from product_app.forms import AddForm, SaleForm

def issue_item(request, pk):
    issued_item = Product.objects.get(id = pk)
    sales_form = SaleForm(request.POST)  

    if request.method == 'POST':     
        if sales_form.is_valid():
            new_sale = sales_form.save(commit=False)
            new_sale.item = issued_item
            new_sale.unit_price = issued_item.unit_price   
            new_sale.save()
            #To keep track of the stock remaining after sales
            issued_quantity = int(request.POST['quantity'])
            issued_item.total_quantity -= issued_quantity
            issued_item.save()

            return redirect('receipt') 

    return render (request, 'products/issue_item.html',
     {
    'sales_form': sales_form,
    })


def add_to_stock(request, pk):
    issued_item = Product.objects.get(id = pk)
    form = AddForm(request.POST)

    if request.method == 'POST':
        if form.is_valid():
           #To add to the remaining stock quantity is reducing
            added_quantity = 
            int(request.POST['received_quantity'])
            issued_item.total_quantity += added_quantity
            issued_item.save()
            return redirect('home')

    return render (request, 'products/add_to_stock.html', {'form': form})

issue.item.html

{% extends 'products/base.html'%} 
{% load crispy_forms_tags%} 
{% load static %}
{% block content%}
<br/>

<div class="container">
  <form method="POST" action = "">
    <h1 class = "text-center
    ">SALES FORM</h1><br>
    {% csrf_token %} 
    {{sales_form | crispy}}
    <input type = "submit" class="btn btn-secondary btn"type="button">
  </form>
</div>
{% endblock %}

add_to_stock.html

{% extends 'products/base.html'%} 
{% load crispy_forms_tags%} 
{% load static %}
{% block content%}
<br/>

<div class="container">
  <form method="POST" action = "">
    <h1 class = "text-center
    ">SALES FORM</h1><br>
    {% csrf_token %} 
    {{form | crispy}}
    <input type = "submit" class="btn btn-secondary btn"type="button">
  </form>
</div>
{% endblock %}

Now we need to build out the receipt page. In urls.py,

urlpatterns = [
path('receipt/', views.receipt, name = "receipt"),
]

To carry out the logic for calculating the total cost of each item based on the unit price and the quantity, we need to create a function 'get_total' within our sales model to handle this. Also another function 'get_change' calculates the balance received by each customer by subtracting the total cost from the amount received. Finally, call both functions within our receipt template.

class Sale(models.Model):
    item = models.ForeignKey(Product, on_delete = models.CASCADE)
    quantity = models.IntegerField(default = 0, null = True, blank = True)
    amount_received = models.IntegerField(default = 0, null = True, blank = True)
    issued_to = models.CharField(max_length = 50, null = True, blank = True)
    unit_price = models.IntegerField(default = 0, null = True, blank = True)

    def get_total(self):
        total = self.quantity * self.item.unit_price
        return int(total)

    def get_change(self):
        change = self.get_total() - self.amount_received
        return abs(int(change))


    def __str__(self):
        return self.item.item_name

Within views.py

def receipt(request): 
    sales = Sale.objects.all().order_by('-id')
    return render(request, 
    'products/receipt.html', 
    {'sales': sales,
    })

receipt.html

 {% extends 'products/base.html'%} {% block content%}
<br /><br>
<div class="container">
  <h1 class="card-header text-center">ALL RECEIPTS</h1><br>
  {% for sale in sales %}
  <div class="card">
    <div class="card-body">
      <h3 class="card-title">Customer : {{sale.issued_to | title}}</h3>
      <h6 class="card-text">Item : {{sale.item}}</h6>
      <h6 class="card-text">Amount Paid:  ₦{{ sale.amount_received }}</h6>
      <h6 class="card-text">Quantity: {{sale.quantity }}</h6>
      <h2>Total Price :  ₦{{ sale.get_total }}</h2>
      <div style="flex: 1">
        <h6 class="card-text">Change Collected:  ₦{{ sale.get_change }}</h6>
        <a href="{% url 'receipt_detail' sale.id %}">
          <input
            type="submit"
            value="Final Receipt"
            class="btn btn-danger"
            type="button"
          />
        </a>
      </div>
    </div>
  </div>
  <br />
  {% endfor %}
</div>
{% endblock %}

The receipt page:

Then lastly,we have a receipt detail page that gives the order summary for each specific item:

We have made great progress so far with our app and now the last part is to create a sales table to keep track and sum up all the total sales made, total amount received and the total change given throughout a particular period in review.

In urls.py,

urlpatterns = [
path('all_sales/', views.all_sales, name = 'all_sales')
]

in views.py

def all_sales(request):
    sales = Sale.objects.all()
    total  = sum([items.amount_received for items in sales])
    change = sum([items.get_change() for items in sales])
    net = total - change
    return render(request, 'products/all_sales.html',
     {
     'sales': sales, 
     'total': total,
     'change': change, 
     'net': net,
      })

We sum up all the total amount received and total change given within our 'all_sale' method and pass the value into our context.

all_sales.html

{% extends 'products/base.html'%} {% block content%}
<br></br>

<div class = "container">
<h1 class = "text-center">TOTAL SALES MADE</h1><br>
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Total Amount Received</th>
        <th scope="col">Total Change Given</th>
        <th scope="col">Net Amount</th>
      </tr>
    </thead>  
    <tbody>
      <tr>    
        <td>₦{{total}}</td>
        <td>₦{{change}}</td>
        <td>₦{{net}}</td>
      </tr>
    </tbody>
  </table>
</div>
<br></br>

<div class = "container">
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Customer name</th>
        <th scope="col">Item Bought</th>
        <th scope="col">Quantity</th>
        <th scope="col">Unit Price(₦)</th>
        <th scope="col">Total Cost</th>
        <th scope="col">Amount Paid</th>
        <th scope="col">Change Collected</th>
      </tr>
    </thead>
    {% for sale in sales %}
    <tbody>
      <tr>    
        <td>{{sale.issued_to | title}}</td>
        <td>{{sale.item | title}}</td>
        <td>{{sale.quantity}}</td>
        <td>₦{{sale.unit_price}}</td>
        <td>₦{{sale.get_total}}</td>
        <td>₦{{sale.amount_received}}</td>
        <td>₦{{sale.get_change}}</td>
      </tr>
    </tbody>
    {% endfor %}
  </table>
</div>
{% endblock%}

This is a final view of what our sales page looks now.

You can get the complete code on this url:
https://github.com/yahayakenny/Pharmacy-inventory-manager

Live site: https://pharm-plus.herokuapp.com/

Test the app:
username: "pharmacy"
password: "1234"

Using Local Storage in React.

Yahaya Kehinde — Sat, 17 Oct 2020 08:38:38 +0000

Local storage enables the user to persist items within the browser window so that even when the user leaves the webpage, their data is stored temporarily for the duration of the visit. It often offers a pretty straightforward approach to bypassing the need for a database when building simpler applications.

Let's take a look at a simple React Application whose function is to generate a single random token and save to local storage every time a user clicks on a 'Generate token' button.

In our root folder, we have an index.js file which renders our components to the page.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(<App/>, document.getElementById('root'))

Next, we have a token.js file which contains an array of random words and a function that loops through the array to display a random word each time the button is clicked.

const tokens = [
    "abate", "abbas", "abbe", "abbey", "abbot", "abbott", "abc", "abe", "abed", "abel", "abet", "abide", "abject", "ablaze", "able", "abner", "abo", "abode", "abort", "about", "above", "image", "imbue", "imp", "impel", "import", "impute", "inane", "inapt", "inc", "inca", "incest", "inch", "incur", "index", "india", "indies", "indy", "inept", "inert", "infect", "infer", "infima", "infix", "infra", "ingot", "inhere", "injun", "ink", "inlay", "inlet", "inman", "inn", "inner", "input", "insect", "yip", "ymca", "yodel", "yoder", "yoga", "yogi", "yoke", "yokel", "yolk", "yon", "yond", "yore", "york", "yost", "you", "young", "your", "youth", "yow", "yucca", "yuck", "yuh", "yuki", "yukon", "yule", "yves", "ywca", "yyy", "yyyy", "zag", "zaire", "zan", "zap", "zazen", "zeal", "zealot", "zebra", "zeiss", "zen", "zero", "zest", "zesty", "zeta", "zeus", "zig", "zilch", "zinc", "zing", "zion"
];

const generateToken = () => {
    let random = Math.floor(Math.random() * tokens.length)
    let randomWord = tokens[random]
    return randomWord;  
};

export default generateToken;

Finally we have our App.js component where the bulk of our logic will reside.

import React from 'react';
import {useState, useEffect} from 'react';
import generateToken from './token';

const App = () => {
    const [token, setToken] = useState('')
    useEffect(() => {
        localStorage.setItem('storedToken', token)
    })

    const handleClick = () => {
       setToken(generateToken())  
    }

    return (
        <div>
            <h1>Using LocalStorage in React</h1>
            <button onClick= {handleClick}>Generate New Token</button>
            <div>{token}</div>
        </div>
    )
}

export default App

We import the generateToken function from 'token.js' and the {useState and useEffect} hooks from 'react';

Within our App component, we first initialize our state to an empty string .

 const [token, setToken] = useState('')

Now within the useEffect hook, we use localStorage.setItem which takes in two parameters. A key, which we can name anything we want, but we will name storedToken and a second parameter which is what we want to store within the localStorage. Here we want to store the newly generated token whenever the button is clicked which we have stored within our token state.

Inside our return statement, we add our button and attach an onClick event listener that calls on a function handleClick which is invoked whenever the button is clicked. This function is responsible for updating our state with the new random token generated on button click.

const handleClick = () => {
        setToken(generateToken())  
    }

To confirm that your newly generated token has been saved to localStorage, right-click and inspect the page
Go to Application, and you will see a key: value pair of 'storeToken' and whichever random token is generated.

Your app should look this way now.

Crispy Forms In Django.

Yahaya Kehinde — Sat, 03 Oct 2020 14:49:16 +0000

Crispy forms provide a very neat way of using Bootstrap within our Django templates. For the purpose of this article, we are going to be using bootstrap 4.

The first step is to install crispy form:

pip install django-crispy-forms

Next, go to the settings.py and under installed app, add crispy_forms

Then at the bottom of the settings.py, add

CRISPY_TEMPLATE_PACK = 'bootstrap4'

Lastly, in order to use it, we simplyload the crispy form tag at the top of our template,

{% load crispy_forms_tags %}

and wherever you intend to render your form tag, you use the crispy tag as a template tag using the pipe character '|'

{{form | crispy }}

Password Reset Views in Django

Yahaya Kehinde — Mon, 28 Sep 2020 07:44:21 +0000

Django comes packed with the ability of a user to receive an email prompt to reset their password when they forget it using the inbuilt password reset views. This works via the Simple Mail Transfer Protocol(SMTP). In this article, we will be using Gmail as our host service provider.

Firstly, go to settings.py and setup our SMTP parameters.

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = 587
EMAIL_HOST_USER = '<Your Gmail address>'
EMAIL_HOST_PASSWORD = '<Your Gmail password>'
EMAIL_USE_TLS = True

Note that the default views Django provides for this are class based views. In urls.py, we will import the views first:

from django.contrib.auth import views as auth_views

Next, within the urlpatterns of our urls.py, we need to add the following paths:

urlpatterns = [
  path('reset_password/', auth_views.PasswordResetView.as_view(), name ='reset_password'),
  path('reset_password_sent/', auth_views.PasswordResetDoneView.as_view(), name ='password_reset_done'),
  path('reset/<uidb64>/<token>', auth_views.PasswordResetConfirmView.as_view(), name ='password_reset_confirm'),
  path('reset_password_complete/', auth_views.PasswordResetCompleteView.as_view(), name ='password_reset_complete'),
]

NOTE:
The names of the paths must be exactly as named above because these are the names Django expects. This means that the names must be:

1) reset_password,
2) password_reset_done,
3) password_reset_confirm
4) and password_reset_complete

Also, note the while Django provides us with default templates for all four routes, we can go ahead to customize this by adding in our own created template names. We will create four new templates to render each URL route and add the names within the as.view() method.

We will name our templates as follows:
1) reset_password.html
2) password_reset_sent.html
3) password_reset_form.html
4) password_reset_done.html

Next, add them as a template_name:

urlpatterns = [
  path('reset_password/', auth_views.PasswordResetView.as_view(template_name = "reset_password.html"), name ='reset_password'),
  path('reset_password_sent/', auth_views.PasswordResetDoneView.as_view(template_name = "password_reset_sent.html"), name ='password_reset_done'),
  path('reset/<uidb64>/<token>', auth_views.PasswordResetConfirmView.as_view(template_name = "password_reset_form.html"), name ='password_reset_confirm'),
  path('reset_password_complete/', auth_views.PasswordResetCompleteView.as_view(template_name = "password_reset_done.html"), name ='password_reset_complete')
]

FINALLY, LET'S LOAD IN OUR TEMPLATES

A) Within reset_password.html, we pass in the view using the {{form}} because this is the default parameter that Django expects.

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

<div class="text-center" style="width: 80%; margin: 0 auto">
  <h1>Welcome to the Password Reset Page</h1>
  <h3>
    Forgot your password? Please enter the email address you used to register
    with us and we will send you a link to reset your password
  </h3>
</div>
<br/>

<form action="" method="POST" class="text-center">
  {% csrf_token %}
  {{form}}
  <input type="submit" value="Send email" /><br>
</form><br/>
<div class="text-center">
  <a href="{% url 'home' %}">Return to home page</a>
</div>

{% endblock%}

B) In password_reset_sent.html

{% extends 'base.html' %} 
{% block content%}
<div class="text-center" style="width: 80%; margin: 0 auto">
   <h1>Password reset sent</h1> 
   <h5>We’ve emailed you instructions for setting your password, if an account exists with the email you entered. You should receive them shortly.</h5><br>
   <h6 style="width: 60%; margin: 0 auto">If you don’t receive an email, please make sure you’ve entered the address you registered with, and check your spam folder.</h6>
</div>
<div class="text-center">
  <a href="{% url 'home' %}">Return to home page</a>
</div>
{% endblock%}

C) Thirdly, we render our password_reset_form.html

{% extends 'base.html' %} 
{% block content%}
<div class="text-center" style="width: 80%; margin: 0 auto">
  <h1>Password Reset Form</h1>
  <h6 style="width: 60%; margin: 0 auto">
    Please enter your new password so we can verify.
  </h6>
</div>
<br />
<form action="" method="POST">
  {% csrf_token %} 
  {{form}}
  <input type="submit" value="Reset Password"/>
</form>

{% endblock%}

D) Lastly, within, password_reset_done.html

{% extends 'base.html' %} 
{% block content%}
<div class="text-center" style="width: 80%; margin: 0 auto">
  <h1>Password reset complete</h1>
  <h6 style="width: 60%; margin: 0 auto">
    Your Password has been set. You may go ahead and login
  </h6>
</div>
<br />
<div class="text-center">
  <a href="{% url 'login' %}">Login</a>
</div>
{% endblock%}

In conclusion, when using GMAIL, you may get an 'SMTP Authentication error. The simple solution to this is to activate the 'less secure apps' option underneath your GMAIL settings.

UserCreationForm with Multiple fields In Django.

Yahaya Kehinde — Sat, 19 Sep 2020 09:12:15 +0000

User creation forms in Django provide a very easy and secure way of creating a sign-up form by drawing upon the concept of models. Similarly, using it is also quite straight forward.

First create a forms.py file within your app which we will name 'my_app' and at the top, make the following imports

from django import forms
from django.contrib.auth.models import User
from django.contrib.auth.forms import UserCreationForm

We are importing the following dependencies from Django. They include the Django forms, the default User model and the UserCreation form.

Next create a class that inherits from the UserCreationForm. We will name our class UserForm.

Note that the default UserCreationForm provides just three parameters, the username, password1 and password2. However we can modify this to include more fields.

To do this, let's assume we want to add three new fields. A first name, last name and an email address which do not originally come included. All we need to do is to add more form fields, which bear similar attributes to the model fields.


class UserForm(UserCreationForm):
    first_name = forms.CharField()
    last_name = forms.CharField()
    email = forms.EmailField()

Next, we add a Meta class to which has two functions:
1) To indicate which model we are using which in this case is the default user model
2) To show which fields we want to include in our final form and what order they should be rendered on our page.

After which we then include the default three(3) fields that come with the user creation form which are named as 'username', 'password1' and 'password2'


class UserForm(UserCreationForm):
    first_name = forms.CharField()
    last_name = forms.CharField()
    email = forms.EmailField()

    class Meta:
        model = User
        fields = ('first_name','last_name', 'username', 'email', 'password1' ,'password2' )

In order to use our newly created UserForm, we need to import it in our views.py file

from my_app.forms import UserForm

Within our register view, first, we check if the form method is a POST request. If it is, we then create an instance of the imported UserForm, pass it the values inputted into the form and store it in a variable called form. Next, we check if the form is valid. If it is, we then save the form and redirect to the Home page.

However, if the request is not a POST request, we just create an instance of the empty UserForm.

Finally, we pass in the form variable as a context dictionary in order to render our UserForm within our template.

def register(request):
    if request.method == 'POST':
        form = UserForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('home')
    else:
        form = UserForm()


    return render(request, 'register.html', {'form': form})

In our register.html template; we create a <form/> tag, add our POST request and include our csrf_token and pass in our context form

<form method="POST">
    {% csrf_token %} 
    {{form.as_p}}
    <br>
    <input type="submit" value ="Register"/> 
  </form>

This would render out nicely a form with our six(6) fields and the POST request would be handled and stored in our database. This method displays the power of the UserCreationForm and takes away the need to manually create a raw HTML form with all the applicable fields.

Learn Django from scratch with a small project _3

Yahaya Kehinde — Thu, 23 Jul 2020 20:37:09 +0000

Welcome back. Today we will be discussing how to use the admin feature of Django and how to create Django models.

Launch your server. From the last article, you shd have this page up and running.

To the end of the url, add "/admin/". This page should come up:

Now we need to create our admin credentials so that we can log in. Basically we need to create a new superuser.

python manage.py createsuperuser

Fill in the details, and create your new superuser.

Go back to the login page and fill in the credentials you just created.

Click on users and see the details you just created

CREATE A MODEL
The idea of DJANGO Models is that instead of writing everything afresh we can write models which will automatically be transformed into tables by Django

Go to "models.py" and let's create a new model class which we will call 'User'. Note that the first letter is capitalized to indicate that its a class.

from django.db import models

# Create your models here.
class User(models.Model):
    first_name = models.CharField(max_length=100)
    last_name = models.CharField(max_length=100)
    email = models.EmailField()
    comment = models.TextField()

You can go to the official documentation to learn more about model fields

python manage.py migrate

then

python manage.py makemigrations

You shd notice a new file created(0001_initial.py) within your migrations folder.

Then run again:

python manage.py migrate


from django.db import migrations, models

class Migration(migrations.Migration):
    initial = True
    dependencies = [
    ]
    operations = [
        migrations.CreateModel(
            name='User',
            fields=[
                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
                ('first_name', models.CharField(max_length=100)),
                ('last_name', models.CharField(max_length=100)),
                ('email', models.EmailField(max_length=254)),
                ('comment', models.TextField()),
            ],
        ),
    ]

Notice all the new fields we created.

Lastly we need to alert django admin to the presence of a new model. Within "admin.py" add:

from django.contrib import admin
from date_app.models import User

# Register your models here.
admin.site.register(User)

Run the server again, and within it, you shd have a new "User" model within the date_app

Click on "add" and notice the four fields we created within the models.

Now try creating different user objects and saving them

Congratulations, we have just learnt how to use the Django admin and how to create models.

Learn Django from scratch with a small project _2

Yahaya Kehinde — Wed, 22 Jul 2020 20:18:47 +0000

In the previous post, we created our first "Hello World". However, In this post we are going to be creating a new django template within which we will render our HTML page. We would need to refactor our previous code a bit to achieve this.

First we are going to create a new folder called 'templates' within our root directory which is our date_project. In order to remember this, just know that templates should be created in the same directory as our "manage.py" file. Within this, we will create our new "index.html" file.

Now we need to inform django that we are going to be using templates and let django know about the location of our templates.

Go to "settings.py" and under "TEMPLATES", add this within the DIRS,

  'DIRS': [os.path.join(BASE_DIR, 'templates')],

Next, we will insert the content of our index.html, which I'll be copying and pasting from my original site.

It contains a lot of CDN links used for animations and as such, we need to change some of the code.

But first, we need to edit our views to indicate that we have a new HTML file we want to render. Delete these lines:

from django.http import HttpResponse

return HttpResponse('Hello world')

replace the views.py with:

from django.shortcuts import render

# Create your views here.
def index (request):
    return render(request, 'index.html')

Your HTML page should display nicely now. This is what i have now. However, my CSS file and images are not displaying. This is because we also need to render the static files.

First we create a new folder called 'static' within our date_app. Create another folder named "css" within which, we put our css files and another folder named "images" containing our image. For emphasis, always remember that the “templates” folder is created within the same directory as our “manage.py” file while the “static” folder is created within our date_app.

Next,within our HTML page, we need to refactor the link to our stylesheet

 <link rel = "stylesheet" href = "{% static 'css/style.css' %}" />

and also edit the path to our images:

 <img src="{% static 'images/amy-shamblen-pJ_DCj9KswI-unsplash.jpg' %}" alt="" >

Lastly, we need to remember to inform Django to load static files at the top of the page.

This is what my final HTML page looks like:

{%load static%}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doctors' Connect</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

     <!-- Font awesome -->
     <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
     integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
     crossorigin="anonymous"/>

     <!-- scroll reveal -->
     <script src="https://unpkg.com/scrollreveal"></script>

     <!-- animate css -->
     <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>

     <!-- poppins font -->
     <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>

    <!-- Animate on scroll -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    <!-- Css files -->
    <link rel = "stylesheet" href = "{% static 'css/style.css' %}" />
</head>

<body>
  <div class="navbar">
    <span class="navbar-brand mb-0 h1">
        <h2 class = "text-danger font-weight-bold">Doctors' Connect</h2>
    </span>
  </div> 

  <section>
      <div class="container-fluid container intro">
          <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 intro-text" >
                <h2>Finding love can be really difficult...</h2>
                <h3>However, we try to make it easier</h3>
                <h4>Want to find out more?</h4><br>
                <a class="btn btn-danger btn-lg" href="main/main.html" role="button">GET STARTED</a>
              </div>
              <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 intro-img" >
               <img src="{% static 'images/amy-shamblen-pJ_DCj9KswI-unsplash.jpg' %}" alt="" data-aos="flip-left"    data-aos-easing="ease-out-cubic"
               data-aos-duration="2000">
              </div>
          </div>
      </div>  
  </section><br><br><br><br><br><br><br><br>

<div class = "text-center" data-aos="zoom-out-up" data-aos-duration="2000">
    <h6>Designed and built by Dr Yahaya H.K</h6>
    <h6>All rights reserved, 2020.</h6>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<script>
    window.sr = ScrollReveal();
      sr.reveal('.intro-text', {
    duration: 2500,
    origin: 'bottom',
    distance: "300px",
    viewFactor: 0.3,
    });
</script>  

<!-- animate on scroll js -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<!-- Animate on scroll init -->
<script>
  AOS.init();
</script>

<script src = "script.js"></script>
</body>
</html>

Now run your server again with

python manage.py runserver

Congratulations, we have now fully rendered the page and our website should display nicely now.

Learn Django from scratch with a small project_1.

Yahaya Kehinde — Mon, 20 Jul 2020 12:18:22 +0000

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. One of the most exciting things about Django is how fast and relatively easy it is to start creating cool projects with some basic knowledge of python.

Today we are going to be converting a small website using HTML, CSS, and Javascript into a Django project

This article assumes some basic python and Django knowledge and that you already have python and Django installed. Along the line, as we build, we are going to learn the following. How to:

1) create a new Django project
2) create a new Django app
3) use Django templates to render HTML files
4) render static files: images, CSS, and javascript
5) The Model View Template(MVT) pattern of Django

The first thing we are going to do is to create a virtual environment. This ensures that all files and imported modules in our projects are kept safe and free of interaction from our other projects. I am using anaconda which is a free and open-source distribution of the Python so I will be using it to create my virtual environment which will be named "date_app". Also, the name of my current directory is 'date site Django'.

Let's begin...To create a virtual environment, type:

conda create date_app --name django

type 'y' to the prompt and then activate the virtual environment with:

conda activate date_app

you should get this response. Notice the name of our virtual environment in parenthesis indicating that it has been activated.

(date_app) mac@Yahaya-Kehinde-macbook date site django %

Now let's create our first project. A Django project is like a parent directory within which all our apps sit. We are naming our project "date_project"

django-admin startproject date_project

This will create a new folder within our current directory with the name "date_project". Within this is another folder of the same name "date_project" and a "manage.py" file which we are going to be seeing a lot of down the line.

Within the inner date_project folder, you should have the following files

Each file within here has a very specific function as we will later learn as we go along. However, the most important ones to us now are the "settings.py" and the urls.py"

The next thing we are going to do is the change directory into the first "date_project" folder because this is where we are going to creating our first app. Use this command

cd date_project

To confirm that you are in the correct directory, type

ls

This should bring out two files, "date_project" and "manage.py"

Now let's create our first app which we will name "date_app" with the following command:

python manage.py startapp date_app

Your file structure should look this way now:

Your date_app should contain the following files

Congratulations we have now learned how to do two things. We have created our first Django project and our first Django app.

Next, we need to inform Django that we have created a new app. Go to the settings.py file and under INSTALLED APPS, add the name of our new app. See the screenshot below:

Next, we are going to go to create our own "urls.py" file within the date_app. This will be used to map all our views later on. We are creating a new urls.py in order to keep our original urls.py clean and neat. However, we are going to link them.

Go to the date_app folder and create the file:

Now go to the date_project's main "urls.py" file add link it to the newly created urls.py in our date_app.

We add two lines: First, type:

from django.urls import include, path

then within the urlpatterns. we add

path('', date_app.urls)

This is our final file structure

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

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

We are leaving the first argument of our path empty to represent our home page.

Now we will go to our newly created urls.py file in our date_app and add the following

from date_app import views
from django.urls import path

urlpatterns = [
    path('', views.index, name = 'index' )
]

We have now linked them and now we need to create our view. This is where the actual logic of our code occurs. For now let's render a simple hello world to our page.

Go to "views.py" and add the following:

from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def index (request):
    return HttpResponse('Hello world')

Finally, run the server to see your view displayed

python manage.py runserver

Copy the URL and paste it in your browser.

Congratulations, we have created our first Hello world

Learn Django from scratch using a small project.

Yahaya Kehinde — Mon, 20 Jul 2020 11:25:59 +0000

Handling Asynchronous Operations in Javascript

Yahaya Kehinde — Sun, 05 Jul 2020 22:40:10 +0000

Asynchronous operations are a very vital aspect of Javascript and they give us the ability to make HTTP requests from a database in order to display data to our web pages.

For a very long time, Asynchronous Javascript and XML(AJAX) using the XMLHttpRequest (XHR) was the gold standard for handling these operations however with the introduction of the Fetch API in conjunction with the Async/await syntax, we now have a simpler way of making these requests.

In this article, we are going to be retrieving random data about a user from the random user API which offers a bunch of randomly generated information about a user, including their title, first and last names, Email etc.

Let's assume we have two files in our current directory, an index.html and a script.js file. We will be styling our CSS directly in the HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ASYNCHRONOUS JAVASCRIPT</title>
    <style>
        .userInfo {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            padding: 40px
        }

        .text {
            text-align: center;
        }

         h3, p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class = "userInfo">
        <h3>Handling Asynchrous operations in Javascript</h3>
        <p> We are getting some random user's data using Fetch Requests/Async-await syntax and displaying the data.</p><br>
        <img id = "myImg">
        <div class = 'text'>
            <p id = "title"></p>
            <p id = "first"></p>
            <div id = "text">Last Name: </div>
            <p id = "mail"></p>
            <p id = "city"></p>
            <p id = "state"></p>
            <p id = "country"></p> 
        </div> 
    </div>
    <script src = "script.js"></script>
</body>
</html>

Take a close look at the structure of our HTML page and observe the information we are going to be retrieving from the API which we will display within the <p> tags which we have given an ID with the corresponding names and an image of the user.

Now let's write some javascript code. First we select all the DOM elements we need in order to display the information.

const myImg = document.getElementById("myImg")
const title = document.getElementById("title")
const first = document.getElementById("first")
const text = document.getElementById("text")
const mail = document.getElementById("mail")
const city = document.getElementById("city")
const state = document.getElementById("state")
const country = document.getElementById("country")

Next, we define a function, which I'll name getUser within which we will make the fetch request which will return a promise. As such, we are going to use the .then syntax. Later we will refactor the code to use the much newer Async/await which is basically syntactic sugar for our code.

const getUser = () => { 
   fetch("https://randomuser.me/api") 
   .then(res => res.json())    
   .then(data => 
   console.log(data.results[0]))   
}

To use the fetch API, we first type the word fetch(). This takes an argument which is the URL of the API we are trying to make a request to and in this instance is "https://randomuser.me/api". This request returns a promise which we will handle with the .then syntax. Next, we convert it to a JSON object. This returns another promise, which we handle again, and this time we get the data.

Now let's refactor the code to use the newer Async await syntax

const getUser = async() => { 
   const userInfo = await fetch("https://randomuser.me/api")
   const data = await userInfo.json()  
}

Here we pass the keyword async just before our parameter and the await the fetch request. We assign the value obtained to the variable userInfo. Afterward, we convert this to JSON format and also store this in a variable which we name data.

Now we have access to the information we need.
Here is a screenshot of what our API returns in JSON format

Notice how our information is stored in a JSON object as an array called results with a single object. First, let's get the image:

   const getUser = async() => {
    const userInfo = await fetch("https://randomuser.me/api")
    const data = await userInfo.json()
    const image = data.results[0].picture.large;
    myImg.src = image;
}

getUser()

To get the image, we type data.results[0].picture.large which returns a URL, we then assign it as the source file(src) to the image <img> tag we earlier picked from our DOM elements. This displays the image in our browser.

Next, we pick the titles and the names. This is also straightforward.

    title.innerHTML = data.results[0].name.title;
    first.innerHTML = data.results[0].name.first;

Now go back to the HTML and notice how we do not have a <p>tag for the last name in the file structure. Instead, we have a <div> with an ID of "text". This is because we are going to generate it dynamically within the javascript using the document.createElement() method.

     const lastName = document.createElement('p');

Next, we create a TextNode, which is basically the content we want our <p> tag we just created to have:

     const last_name = data.results[0].name.last     
     const textnode = document.createTextNode(last_name)

We will then append our textNode to our <p> tag

     let surName = lastName.appendChild(textNode)

Lastly we will append it to our <div>

text.appendChild(surName)

Finally we get the remaining information

    mail.innerHTML = data.results[0].email
    city.innerHTML = data.results[0].location.city
    state.innerHTML = data.results[0].location.state
    country.innerHTML = data.results[0].location.country

Let's join all our code together:


const getUser = async() => {
    const userInfo= await fetch("https://randomuser.me/api")
    const data = await userInfo.json()

    const image = data.results[0].picture.large;
    myImg.src = image;

    title.innerHTML = `Title: ${data.results[0].name.title}`;

    first.innerHTML = `First-Name : ${data.results[0].name.first}`;

   const last_name = data.results[0].name.last

   const lastName = document.createElement('p');

   const textNode = document.createTextNode(last_name)

   let surName = lastName.appendChild(textNode)

   text.appendChild(surName)

   mail.innerHTML = `Email Address : ${data.results[0].email}`

   city.innerHTML = `City: ${data.results[0].location.city}`

  state.innerHTML = `State : ${data.results[0].location.state}`

country.innerHTML = `Country: ${data.results[0].location.country}`

 // Fetch API
 //   .then(res => res.json())
 //    .then(data => console.log(data.results[0].name.first))
}

getUser()

Here is what our final Output would look like:

You can get the code on this link:

https://github.com/yahayakenny/asynchronous_javascript_operations

The Context API

Yahaya Kehinde — Fri, 26 Jun 2020 17:56:49 +0000

The context API was introduced in React as a means to help us with state management without the need to use external dependencies or libraries. It is an inbuilt way in the React eco-system of managing state while avoiding prop drilling.

Assuming we have the following code:
An "index.js" file whose sole function is to render our component:

import React from "react"
import ReactDOM from "react-dom"
import App from "./components/App"

ReactDOM.render(<App/>, document.getElementById("root"))

Next, take a look at our "App.js" file containing our parent component which basically returns a div containing the string 'App' for now.

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
              App
            </div>
        )
    }
}

export default App

Now let's imagine we have a MovieList Component which contains some information about a movie which we stored as state and we want to pass this information to our App Component.

import React, { Component } from 'react';
class MovieList extends Component {
 state = {
        movie: "Avengers",
        year: 2018,
        imdb: 7,
    }

  render() {
    return (
      <div>
         <p>I am within the Movie List Component</p>
      </div>
    );
  }
}

export default MovieList;

Before the Context API, we would have had to do prop drilling or use an external state management library like redux. However now with the context API, we have a simple solution.

First we create a new file which we will name "MovieContext.js" and store it within a folder we will name "context". We will then move our state from the MovieList component and store it within our global MovieContext component.

To do this, we will import "createContext" from "react" and also create a new context with the following syntax

import React, {createContext} from "react";
const MovieContext = createContext();

Afterwards, let's create a "provider" whose function is basically to house our state and ensure it is available for use anywhere in our app. We will name it "MovieProvider"

class MovieProvider extends React.Component {
    state = {
        movie: "Avengers",
        year: 2018,
        imdb: 7,
    }
    render(){
      return (
        <MovieContext.Provider>
               {this.props.children} 
        </MovieContext.Provider>    
      )
    }
}

Note that within the return statement of the Provider, we wrap our newly created context with a ".Provider" and then inside we pass in the function containing "this.props.children" which simply indicates that every child component that's wrapped by the provider will have access to the state.

Next we go back to the main App component and wrap our return currently rendering our MovieList Component with our MovieProvider:

import React, { Component } from 'react'
import MovieList from "./MovieList"
import MovieProvider from "./context/MovieContext"

class App extends Component {
    render() {
        return (
            <MovieProvider>
                <MovieList/>
            </MovieProvider>    
        )
    }
}

export default App

We have made great progress thus far. Now in order to actually pass our state stored within the MovieContext, we need to give our MovieContext.Provider a 'value' which will store a reference to our state. It is from this value containing our state that we will be able to gain access to our state from anywhere within the our application.

import React, {createContext} from "react";
export const MovieContext = createContext();

class MovieProvider extends React.Component {
    state = {
        movie: "Avengers",
        year: 2018,
        imdb: 7,
    }
    render(){
        return (
         <MovieContext.Provider value = {{state: this.state}}>
               {this.props.children} 
          </MovieContext.Provider> 
        )
    }
}

Here we assigned the "value" as an object containing our state with this syntax:

   value = {{state: this.state}}

The last step is to actually get access to the state from MovieContext within our MovieList component. To do this, we are going to import the MovieContext and create a "MovieContext.Consumer"

import React, { Component } from 'react';
import { MovieContext } from './context/MovieContext';

class MovieList extends Component {
  render() {
    return (
     <MovieContext.Consumer>
        {(item) => {
          return (
            <div>
              <p>The name of my movie is {item.state.movie}</p>
              <p>It was produced in {item.state.year}</p>
              <p>It's IMDB rating is {item.state.imdb}</p>
            </div>
          );
        }}
      </MovieContext.Consumer>
    );
  }
}

export default MovieList;

Notice that within the MovieContext.Consumer we rendered an arrow function which returns some JSX containing our state and can now use it anywhere in our application.

In summary, the Context API is a very useful way to manage state while building our React Applications and during this process, we have learned:

What the Context API is and the problem it solves; When to use the Context API;
How to Create Context and consume it within class-based components.

You can find a link to the repo containing the code below:

https://github.com/yahayakenny/learn-context-api