Download & install Python:

https://www.python.org/downloads/
CSC309 – LECTURE 05

BACKEND INFRASTRUCTURE & DJANGO

Khai Truong
 Web development
Front end
{
Part of the client
Faces the end-user
Provides user-friendly interface
Focuses on user input & output
Back end
{
Part of the server
Internet What users don’t see
Processes requests
Data storage and business logic
Web server
Listens on specific port(s) for HTTP/HTTPS requests
Handles incoming connections
● Generates a response (dynamic content)
● Fetches a file (static content)
○ Can be cached in memory for faster subsequent access
● Acts as a proxy between the client and the origin server
○ Forward proxy: sits in front of client devices, before Internet access
○ Reverse proxy: sits in front of origin server, after Internet access

Examples: , Nginx
Forward proxy

Blocks or monitors access to certain content, e.g., on a school network

Improves security and anonymity by hiding user’s IP address
“Sometimes” circumvents regional restrictions
https://www.cloudflare.com/en-gb/learning/cdn/glossary/reverse-proxy/
Reverse proxy

Caches content for geographically distant web server

Acts as a front for security purposes, e.g., encryption, prevent DDoS
attack
Provides load balancing
https://www.cloudflare.com/en-gb/learning/cdn/glossary/reverse-proxy/
Load balancer
Addresses an important problem: popular websites can serve
millions of concurrent requests!
Distributes incoming requests among backend servers
Ensures all servers have similar utilization
Supports adding/removing servers
based on current demand
● Reduces energy consumption
during times of low traffic

https://www.nginx.com/resources/glossary/load-balancing/
Web server architecture
Single-threaded server
main server thread
idle accept read process write … close idle accept 🗘 close idle …

Problem
Handles only 1 connection at a time…
 Web server architecture
Multi-threaded server
main server thread
idle accept idle accept idle …

create_thread thread 1 destroy_thread

read process write … close

create_thread thread 2 destroy_thread

read process write … close

Problem
Creating threads is expensive and http requests are short-lived
Web server architecture
Multi-threaded server with thread pool
Task queue
…

Thread pool

Completed tasks
…
Problem
Threads (frequently) can be blocked waiting for IO
Blocking operations

angry queue!
https://www.nginx.com/blog/thread-pools-boost-performance-9x
Web server architecture
Event-driven server
main server thread
accept read process accept accept read read write close …
idle
(c0) (c0) (c0) (c1) (c2) (c2) (c1) (c0) (c0)

Events are queued and executed in order

An http request can be broken up into states
Each state transition is an event, processed asynchronously
No overhead of switching between threads
● Can be combined with thread pool to utilize more
Common Gateway Interface
Standard which allows web server to run an external program to
process requests (e.g., to process POST request from forms)
Separates web server from web application
● Any web application can use any web server to generate dynamic
content
● Web application can be compiled or interpreted program
There are many similar standards for web servers to forward requests
to web applications
● WSGI (web server Gateway Interface): used by Python programs
● Rack: used by Ruby programs
● JSGI (JavaScript Gateway Interface): used by JavaScript programs
Programming languages
Technically, any language (a library that understands HTTP protocol)
can be used in the backend
Popular web programming languages are mostly interpreted
● Flexible: does not require compilation
● Portable: can run on many operating systems
● Quick and easy: updateable on the fly

Bottleneck of most servers is network, not code execution

6
● RAM access is 10 times faster than network access (ns vs ms)
● Most performance optimization focuses on reducing network
latency
○ E.g., using CDN and asynchronous requests
Runtime environment
Hardware and software infrastructure for running code
Different from the programming
language itself

Examples:
● CPython: Interpreter that runs the Python programming language
● Node.js: Runs on V8 JavaScript Engine, allowing both frontend and
backend to be written with just one programming language
● PHP interpreter: Runs the PHP programming language
Backend frameworks
Libraries on the server-side that helps build a web application
● Avoids doing everything from scratch

Examples:
● PHP: Laravel, CodeIgniter
● Python: Django, Flask, FastAPI
● JavaScript: ExpressJS, Spring
● Ruby: Ruby on Rails
 Take a
Short Break
Back-end server side Web framework
Free & open source
Written in Python
Facilitates the development
Web applications in Python

https://www.geeksforgeeks.org/top-10-django-apps-and-why-companies-are-using-it/
Python packages
Projects typically require use different external packages

Python’s package manager (preferred installer program): pip

● Helps install and manage software packages
● Automatically handles dependencies (other packages and versions
that are required to use this package)
● Syntax: python -m pip <pip arguments>
● Example: python -m pip install Django
Virtual environment
An isolated environment with its own version of everything (e.g.,
Python interpreter, pip, and packages)
A dedicated virtual environment is recommended for each Django
project
● Manages separate package installations for different projects
● Avoids dependency conflicts and version differences
● Suggested that Django be installed in the virtual environment (this
would address issues such as code for one version of Django may
not run with a different version)
1. Create a virtual environment
From the directory where you want your project environments to be
located: python -m venv myworld

Activate the environment:

myworld\Scripts\activate.bat
or
source myworld/bin/activate
Using a virtual environment
If you’re in a virtual environment, you can deactivate it: deactivate
Packages installed in a virtual environment via pip will not be installed
globally
To remove a virtual environment, simply delete the folder
Recommended that you keep a text file that includes all the required
packages, so that you can easily recreate a virtual environment with
that file
2. Install Django
Inside your virtual environment:
python -m pip install Django
3. Start a Django project
From the directory where you want your project to be located:
django-admin startproject <name> .
Example: django-admin startproject myproject .

manage.py: a command-line utility

that can do various things

myproject: folder location for the

project, contains project-wide
settings
4. Run the Django project
To run the project:
python manage.py runserver
Development server
Running the project starts the development server
Your website is accessible at http://localhost:8000 or http://127.0.0.1:8000
Ignore the migration warnings for now
Use for development and testing only
(not suitable for deployment)
Django apps
Django is intended for big projects with hundreds of web pages (each
with a different URL)
Project is organized into apps
An app is a set of related concepts and functionalities
● E.g., an app to manage accounts, another app to manage products,
another to manage transactions, etc.
5. Create an app
From the directory where you want your apps to be located:
python manage.py startapp <name>
Example: python manage.py startapp sayhello

This creates a new app and its folder

Remember to add the app name to

INSTALLED_APPS in the project’s
settings.py file, otherwise it won’t be
loaded
Django views
Code that takes http request for a specific endpoint (i.e., URL) and
returns an http response
Views are usually put in a file called views.py located in the app folder
6. Create a view
Edit the views.py file located in the app folder
Add function to handle http request:
from django.http import HttpResponse

def hi(request):
return HttpResponse("Hi!")

Functions should take an argument, usually

named request
Functions should return an HttpResponse
Django URLs
We have to map a URL to each defined view
Values in the hierarchical URL system is typically used to execute
different apps and views

For example, http://localhost:8000/sayhello/hi/

 http://localhost:8000/sayhello/hi/ Maps the relative URL /sayhello/hi/ to
the ‘hi’ view defined in the urls.py
7. Map URL to view file of the sayhello app

a. Create a file (preferably named urls.py) in the sayhello app folder

from django.urls import path
from . import views
urlpatterns = [ path('hi/', views.hi), ]
b. Modify the project’s urls.py file
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path('sayhello/', include('sayhello.urls')),
path('admin/', admin.site.urls),
]
URL dispatcher
Attempts to match URL from top to bottom of urlpatterns
Can capture values from a URL and pass them to the defined view
function as extra arguments

For example: http://localhost:8000/sayhello/howdy/khai/27/

HTTP request data
request.method
● Tells you which HTTP method was used to access this view

request.GET
● A dictionary of key-value pairs from query parameters (or URL
parameter)
request.POST
● A dictionary of key-value pairs from POST requests

request.headers
● The HTTP headers of the request

Example
print(request.POST[‘name’])
 Sanitization & validation
Sanitization
● Modifies input to ensure it is syntactically valid
● E.g., escape characters that are dangerous to HTML
Validation
● Checks if input meets a set of criteria
● E.g., check that passwords match and username is not blank
Should be checked at frontend for faster error feedback
Should always be checked at backend as well because users can
bypass front-end restrictions
Processing POST request
Validation error: if data is invalid, should return a 400-level error code
● 400: Bad Request
● 401: Unauthorized
● 404: Not Found
● 405: Method Not Allowed

On success, a redirect is usually returned (e.g., redirect to profile page

or index page after logging in)
Named URL patterns
Django separates URLs that users see from the named URLs
developers use
User URLs may change, causing redirects to break
Add name or namespace argument to the path object
project’s urls.py:
path('sayhello/', include('sayhello.urls', namespace='sayhello'))
app’s urls.py:
app_name='sayhello'
urlpatterns = [ path('', hi, name='hi'), ]
To redirect: reverse('sayhello:hi')
Django Templates
Results should be HTML and should be created in a template

Django Template Language adds imperative programming features

to making HTML files
Variables
● Surrounded by {{ and }}, like this:
<p>Hello, {{ username }}.</p>
Tags
● Adds logic in the rendering process
● Surrounded by {% and %}, like this:
{% if has_error %} <p class="error">Bad!</p>{% endif %}
 Convention: create subfolder
8. Create a template with app name and put
html files inside
a. Create a templates folder in the app’s folder E.g., the template path would
be ‘sayhello/howdy.html’
b. Create html files inside templates folder
c. Edit app’s views.py file to use render shortcut function for returning
Django templates
from django.shortcuts import render
def howdy(request,name,age):
error = None
code = 200 # success
…
return render(request, 'sayhello/howdy.html', {
"error" : error,
"name" : name,
"age" : age,
}, status=code)
 Cross-site Request Forgery
Unauthorized commands from trusted users
● Can be transmitted by maliciously crafted forms, images, and
JavaScript
● Can work without the user’s knowledge
● E.g., hacking a user’s browser to secretly deplete his/her bank fund
Use CSRF token for prevention
● Add this to your form {% csrf_token %}
● It will generate the following:
<input type="hidden" name="csrfmiddlewaretoken" value="KbyUmhTLMpYj7CD2di7JKP1P3qmLlkPt">

● Token value is unique each time the web page is generated

● Attack becomes unable to authenticate the request without
knowing the token
Static files
Django can manage static files (e.g., images, CSS, JavaScript) to
simplify the task of locating the files and serving them
To use a static file, create a folder named static (recommended) and
place static files in there, or its subfolders
Add this to settings.py:
STATICFILES_DIRS = [ BASE_DIR / "static", ]
In the HTML file, you can specify a static file like this:
{% load static %}
<!DOCTYPE html>
…
< img src="{% static ' me.jpg' %}" alt="me">
Static files
Some static files don’t really belong to an app (e.g., global style, font,
etc.)
These static files are usually placed in custom directories (e.g., a root
static folder in the project)
Edit settings.py
STATICFILES_DIRS = [
BASE_DIR / "static"
]
Summary
You have learned about backend Web infrastructure and the basics for
getting a simple Django project started
Learn more on your own:
https://www.w3schools.com/django/index.php
Experiment, search online, and/or read reference manuals

Wednesday: Django Template Language

Much of this lecture was taken from content previously created by Jack Sun & Kianoosh Abbasi

Reproduction and/or sharing of course materials is prohibited. Course materials include lecture slides, course notes,
assignments, data and documents provided by the instructors. Course materials created by the instructors of this course
are their intellectual properties. They may not be shared, posted, rehosted, sold, or otherwise distributed and/or
modified without expressed permission from the authors. All such reproduction or dissemination is an infringement of
copyright and is prohibited. All rights are reserved by the instructors.

Thank you & questions?