Full Stack Development-21CS62

Full Stack Development with Django

Agenda:
 Full Stack Development
 Need of Full Stack Development
 Django MVT framework
 Django features and Applications
 Installation Instructions
 Project and App
 Development of Django Apps
Full Stack Development with Django

Full Stack Web

Development
Full Stack Development with Django
 Full Stack Development with Django
Full Stack Development refers to the
development of both front end(client side)
and back end(server side) portions of web
application.
Popular Stacks
• MEAN Stack: MongoDB, Express, AngularJS and
Node.js.
• MERN Stack: MongoDB, Express, ReactJS and Node.js
• Django Stack: Django, python and MySQL as Database.
• Rails or Ruby on Rails: Uses HTML,Ruby, Rails and
MySQL.
• LAMP Stack: Linux, Apache, MySQL and PHP.
 Full Stack Development with Django

The Key advantages of Full Stack

Development are:
 Saves Time and Money
 Rounded Solution
 Great Exposure
 Complete Ownership
 Greater opportunity with more learning
Full Stack Development with Django
Full Stack Development with Django
Full Stack Development with Django
Full Stack Development with Django
 Full Stack Development with Django

Django is a free and open source web

application framework which offers
fast and effective dynamic website
development.
 Full Stack Development with Django

What is framework?????????
A web framework is a code library that
makes web development faster and
easier by providing common patterns
for building reliable, scalable and
maintainable web applications
Full Stack Development with Django
Full Stack Development with Django
 Full Stack Development with Django

Caveats??
 Take care of headers and blank lines
 Database connection per script
 Code reusability in multiple
environments
 Redesign output page
 Full Stack Development with Django
Django Evolution
1. Write a Web application from scratch.
2. Write another Web application from
scratch.
3. Realize the application from step 1 shares
much in common with the application from
step 2.
4. Refactor the code so that application 1
shares code with application 2.
5. Repeat steps 2–4 several times.
6. Realize you’ve invented a framework
Full Stack Development with Django
 Full Stack Development with Django
Django MVT (Model –View-Template)
The MVT is a software design pattern which includes
three important components Model, View and
Template.
• The Model helps to handle database. It is a data
access layer which handles the data.
• The Template is a presentation layer which handles
User Interface part completely.
• The View is used to execute the business logic and
interact with a model to carry data and renders a
template.
 Full Stack Development with Django
Django
Sends MODEL
requests
View interacts
Checks availability of with Model &
resource in URL Template. Then
USER renders a
VIEW template
URL If url is
mapped View TEMPLATE
Flow of Control in is called
MODEL-VIEW-TEMPLATE At last Django responds
back to the user and sends
a template as a response.
Full Stack Development with Django
 Full Stack Development with Django
Characteristics of Django
• Loosely Coupled − Django helps you to make each
element of its stack independent of the others.
• Less code - Ensures effective development
• Not repeated- Everything should be developed in
precisely one place instead of repeating it again
• Fast development- Django's offers fast and reliable
application development.
• Consistent design - Django maintains a clean design and
makes it easy to follow the best web development
practices.
Full Stack Development with Django
 Full Stack Development with Django
 A Python Virtual Environment is an isolated
space where you can work on your Python
projects, separately from your system-
installed Python.
 You can set up your own libraries and
dependencies without affecting the system
Python.
 There are no limits to the number of virtual
environments
 It is generally good to have one new virtual
environment for every Python-based project
you work on
 Full Stack Development with Django
1. Installation of Python, Django and Visual Studio
code editors can be demonstrated.
Python download and installation Link:
https://www.python.org/downloads/

Visual Studio Code download and installation

link:
https://code.visualstudio.com/

Django installation:
Open a command prompt and type following
command: pip install django
 Full Stack Development with Django
2. Creation of virtual environment, Django project
and App should be demonstrated
Virtual Environment Creation
1. Install the Python extension.- Open VS Code IDE and click
extensions there automatically u will be shown Python
extension (Make sure you are connected to Internet)
2. On your file system, create a project folder
3. In that folder, use the following command (as appropriate
to your computer) to create a virtual environment
named env based on your current interpreter:
# Windows
python -m venv env
Full Stack Development with Django
 Full Stack Development with Django
Django project and App creation
 Open the project folder in VS Code by running code ., or
by running VS Code and using the File > Open
Folder command.
 In VS Code, open the Command Palette
(View > Command Palette or (Ctrl+Shift+P)). Then select
the Python: Select Interpreter command
 The command presents a list of available interpreters that
VS Code can locate automatically. From the list, select the
virtual environment in your project folder that starts
with ./env or .\env:
 Create a New Terminal : In Menu Terminal -> New
Terminal option
 Full Stack Development with Django

Creating project:
Type following command in the terminal
opened:
django-admin startproject first .
 Full Stack Development with Django
● manage.py: The Django command-line administrative
utility for the project. You run administrative commands
for the project using python manage.py <command>
[options].
● A subfolder named first, which contains the following
files:
o __init__.py:
o wsgi.py:
o settings.py:
o urls.py:
To verify the Django project, make sure your virtual
environment is activated, then start Django's development
server using the command
python manage.py runserver.
 Full Stack Development with Django
In the VS Code Terminal with your virtual environment
activated, run the administrative utility's startapp command
in your project folder (where manage.py resides):

python manage.py startapp hello

The command creates a folder called hello that contains a

number of code files and one subfolder.:
views.py
models.py
migrations folder
apps.py (app configuration),
admin.py (for creating an administrative interface),
and tests.py (for unit tests).
 Full Stack Development with Django

Develop a Django app that displays

current date and time in server
 Full Stack Development with Django

Develop a Django app that displays date

and time four hours ahead and four hours
before as an offset of current date and time
in server
 Full Stack Development with Django

URLs in Django
Static URLs
A static URL is a type of URL that does not
change. In technical terms, we can say that these
URL does not contain URL parameters.

Dynamic URLs
A Dynamic URL is a type of URL that can change.
These type of URLs contains special characters
like ? , = , & , + etc.
 Full Stack Development with Django

Dynamic URL Path Converters

Type of path converters used in Django for
producing Dynamic URLs.
Eg: int,str, slug, path, regular expressions
Full Stack Development with Django
 Full Stack Development with Django
Develop a Django app that displays
tables of squares of pairs of numbers input
in the URL. Perform necessary
validations.
 Full Stack Development with Django
Develop a Django app that displays
number of vowels and consonants and
also list of vowels and consonants for any
input sentence specified in the URL.
Full Stack Development with Django
 Full Stack Development with Django
Develop a Django app that finds the mode
of a given set of numbers specified in the
URL.
 Full Stack Development with Django
Design a Django app that finds whether you can
avail Vote from Home facility or not. Your age
should be passed as parameter in the URL.
Case1:URL: 127.0.0.1:8000/56
Output: You cannot avail Vote from Home as
you are 4 years younger than the threshold
age.

Case2: URL: 127.0.0.1:8000/66

Output: You are eligible for Vote from Home
as you exceed 6 years than the threshold age.
 Full Stack Development with Django
Develop a Django app that takes list of words in the
URL as parameters separated by comma. It should
display all the words with the word with most
number of unique letters highlighted with a yellow
background color.

URL: 127.0.0.1:8000/banana,apples,grapes,orange
Output: banana,apples,grapes,orange