Django Workshop

Web Development

• input username and password at the front-end

• This data is packaged and sent to the backend

• The backend scripts validates the data

• If the username and password is correct

• That specific user's information is sent to the front-end

• Front-end then takes in all these information and render the specific user's page

Django

• Its based on python

• Simple syntax

• Its own web server

• MVC (Model-View-Controller) core architecture

Open up terminal in your machine

• Command Prompt or Anaconda Prompt for windows user

• Create a folder in the desired place that you wish to store this project

• You can create the folder using mkdir folder_name or just right click and create new folder

• use cd path/to/your/folder to get to the folder

Create an virtual environment

installing the packages we need

Get started with the actual project

Use of a text editor

• Here are some of the recommendations

• Visual Studio Code

• Sublime Text

• PyCharm

Settings.py

Let's start play with it!

Create your first app

Creating models

#This is your models.py
from django.db import models

class Product(models.Model):

  title = models.CharField(max_length=120)
  description = models.TextField()
  price = models.DecimalField(decimal_places=2,max_digits=10000)

'Install' your app

#Your settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'product',
]

Registering the model with admin

#Your admin.py

from django.contrib import admin
from .models import Product

admin.site.register(Product)

Adding deleting and formatting Data

#Your updated models.py
class Product(models.Model):
    title = models.CharField(max_length=120)
    description = models.TextField()
    price = models.DecimalField(decimal_places=2,max_digits=100)

    def __str__(self):#This function changes how the data is presented. You change view the change when you see it in the admin site
        return '{}{}'.format(title,price)
    @classmethod
    def _delete_data(cls):#this function deletes all the data
        Product.objects.all().delete()
    
    @classmethod
    def _create_data(cls,count = 1000):
        for i in range (count):
            Product.objects.create(title='title'+str(i),description = 'This is the description for title'+str(i),price=count)

Creating the first webpage

• profile

• home

• social

• contact

# This is your models.py

from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
 
def home_screen(request):
    return HttpResponse('<h1>Hello World</h1')

def contact_page(request):
    return HttpResponse('<h1>This is the contact page</h1>')

#This is your urls.py

from django.contrib import admin
from django.urls import path
from products.views import home_screen,contact_page
urlpatterns = [
    path('',home_screen),
    path('contact/',contact_page),
    path('admin/', admin.site.urls),
]

Django Templating engine

from django.shortcuts import render

def home_screen(request):
    return render(request,'home.html',{})

Explanation

How should you write your html

#This is your views.py
def home_screen(request):
    data = {                      #This is the setof data that i want to pass to the html page
        'user':'qiuweihong',
        'age':21,
        'telegram':'@iceridge',
        'myfifthrow':['3dc','badminton','photog']
    }

    return render(request,'home.html',data)

#This is your home.html
<h1>Hello Word</h1>

<p>This is {{user}}</p>
<p>I am {{age}} years old</p>
<p>My telegram is {{telegram}}</p>
My Fifth Rows are:
<ul>
    
    {% for fifthrow in myfifthrow%}
        {%if fifthrow == "3dc" %}
            <li style="font-weight:bold;">{{fifthrow}}</li>
        {%else%}
            <li>{{fifthrow}}</li>
        {% endif %}
    {%endfor%}
</ul>

Getting data from the data base

• Import the data into our views.py

• Use query set to search for the data in the database

• put into the dictionary to be pass to the front end to be rendered.

#Your views.py
from django.shortcuts import render
from django.http import HttpResponse
from .models import Product     #importing the data
# Create your views here.
 
def home_screen(request):
    info = Product.objects.filter(title='title992')[0]      #query the object from your database, rember to create the data first
    data = {            #adding the result to the data dictionary and pass to front-end
        'title':info.title,
        'description':info.description,
        'price':info.price
    }

    return render(request,'home.html',data)

How to pass data from front-end to backend

• Include the query data in your url query string

• Post request

Include the query data in your url query string

<h1> THis is your product page</h1>

<a href=?num={{num}}>next_product</a>
<p>{{title}}</p>
<p>{{description}}</p>
<p>{{price}}</p>

def home_screen(request):
    num = request.GET.get('num','1')
    print(num)
    info = Product.objects.filter(title='title'+num)[0]
    data = {
        'title':info.title,
        'description':info.description,
        'price':info.price,
        'num':int(num)+1
    }

    return render(request,'home.html',data)

Setting up an api and receive the data via post.

from django.shortcuts import render
from django.http import HttpResponse
from .models import Product
from django.views.decorators.csrf import csrf_exempt
import json

@csrf_exempt          #this csrf_exempt is to bypass one of the security features that django has
#do this only when you trust whoever who has access to the api and your api wont cost any irreversible damage
#if not you will need to include an csrf token in your request

def process_api(request):
    if request.method != 'POST':
        return HttpResponse('Error 403',status=403)
    
    request_title = request.POST.get('title')
    info = Product.objects.filter(title=request_title)[0]
    data = {
        'title':info.title,
        'description':info.description,
        'price':float(info.price),
    }
    return HttpResponse(json.dumps(data),status = 200)

#remember to route your url to the api function

from django.contrib import admin
from django.urls import path
from products.views import home_screen,contact_page,process_api
urlpatterns = [
    path('',home_screen),
    path('contact/',contact_page),
    path('admin/', admin.site.urls),
    path('api/product',process_api)
]

How to use postman

How to deploy the backend server with heroku

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',#change from the default sqlit3 to postgresql
        #fill in the values in your url string 
        'NAME': 'd46a3fm2pmo145',
        'HOST':'ec2-52-203-49-58.compute-1.amazonaws.com',
        'PORT':5432,
        'USER':'wvoznxouhbeaqf',
        'PASSWORD':'0cbbb979d4f4f1622408d92c2389c07cfa603d259005bd9bec20d497f8ffd858',
    }
}

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Conclusion