21CS62 FULLSTACK DEVELOPMENT Module 1

Module 1 Syllabus
Web framework, MVC Design Pattern, Django Evolution, Views, Mapping URL to Views,
Working of Django URL Confs and Loose Coupling, Errors in Django, Wild Card patterns in
URLS.

Web Application : (Dynamic Website)

A web application is software that runs in the web browser. Businesses have to
exchange information and deliver services remotely. They use web applications to
connect with customers conveniently and securely.
Ex: Facebook, Instagram, Uber etc.

Full stack development:

It is the process of developing both the frontend and backend of applications. Frontend
part of application includes user interfaces component and a backend part of the
application has database and logic component.

Web framework

A Web framework is designed to support the development of web applications, It

provides a programming infrastructure for web applications so that we can focus on
writing clean, maintainable code without having to reinvent the wheel. It provides
standard way to deploy web applications on the World Wide Web.

Web framework provides implementation for common tasks like database connection
setup and teardown, security, admin interface, authentication packages etc. so that
programmer need not rewrite the code from scratch.

Different types of web frameworks:

 Frontend (client-side) frameworks: Angular, Vue.js, React, and Ember.js

 Backend (server-side) frameworks: ASP.NET., Ruby on Rails, Express.js, Django, and
Spring Boot.

Benefits of using Web Development Frameworks:

 Streamlined development
 Speed and Efficiency
 Integrated Security

Dept. of CSE Vemana Institute of Technology Page 1

21CS62 FULLSTACK DEVELOPMENT Module 1

 Community Support
 Enhanced performance & scalability
 Testing and Debugging

MVC Design Pattern

MVC defines a way of developing software so that the code for defining and accessing
data (the model) is separate from request routing logic (the controller), which in turn is
separate from the user interface (the view). A key advantage of MVC approach is that
components are loosely coupled.

Advantages of MVC design pattern:

 Codes are easy to maintain and they can be extended easily.

 The components of MVC can be developed simultaneously.
 It supports Test Driven Development (TDD).

Fig: MVC Design Pattern

Django Evolution

Dept. of CSE Vemana Institute of Technology Page 2

21CS62 FULLSTACK DEVELOPMENT Module 1

 Django was introduced in the year 2003, when the Web programmers at the
Lawrence Journal-World newspaper, Adrian Holovaty and Simon Willison, began
using Python to build applications.
 In July 2005 It was released as open source software.
 September 2008: Version 1.0
 July 2009: Version 1.1
 May 2010: Version 1.2
 March 2011: Version 1.3
 March 2012: Version 1.4
 Feb 2013: Version 1.5
 November 2013: Version 1.6
 September 2014: Version 1.7
 April 2015: Version 1.8
 Dec 2015: Version 1.9
 Aug 2016: Version 1.10
 April 2017: Version 1.11
 Dec 2017: Version 2.0
 Aug 2018: Version 2.1
 April 2019: Version 2.2
 Dec 2019: Version 3.0

Installation Steps

1. Install python, Visual Studio Code.

2. Virtual Environment setup on windows
py -3 -m venv <name_of_Virtual_Environment>
change directory to name_of_Virtual_Environment\scripts
activate

3. Update pip in the virtual environment by running the following command prompt:
python -m pip install --upgrade pip

Dept. of CSE Vemana Institute of Technology Page 3

21CS62 FULLSTACK DEVELOPMENT Module 1

4. Install Django in the virtual environment by running the following command in the
VS Code Terminal:
python -m pip install Django

Steps 2 to 4 is used to create virtual environment and install Django in virtual

environment. Once virtual environment is created we can use the same environments to
create and execute many web applications using Django.

Create the Django project

1. Create a folder called Djangoprojects.

2. Open visual studio
3. Open the folder Djangoprojects
4. Click File → Preferences → Extensions or (Ctrl+Shift+x)
5. Type python in search Extensions box
6. If Python language support is not installed then click on Install button.

Dept. of CSE Vemana Institute of Technology Page 4

21CS62 FULLSTACK DEVELOPMENT Module 1

7. Click View and Terminal

8. By default powershell will be displayed change it to command prompt.

9. Enable the virtual environment created by changing directory to Scripts directory

of virtual environment and execute activate command.

10. Change directory to Djangoprojects

Dept. of CSE Vemana Institute of Technology Page 5

21CS62 FULLSTACK DEVELOPMENT Module 1

11. Create Django project use the following command

django-admin startproject webproject1

Observe the Explorer in VS code

Dept. of CSE Vemana Institute of Technology Page 6

21CS62 FULLSTACK DEVELOPMENT Module 1

Django creates the directory structure as shown in above figure. Observe the files
and folders.
12. Change directory to webproject1 and create Django app use the following
command (A project can have many apps)
python manage.py startapp app1

Dept. of CSE Vemana Institute of Technology Page 7

21CS62 FULLSTACK DEVELOPMENT Module 1

Observe the Explorer in VS code

First View: Dynamic Content

Under app1/views.py type the following code

from django.http import HttpResponse

def hello(request):
return HttpResponse("Hello World!! Welcome to Full Stack Development")

Mapping URLs to Views

In webproject1/urls.py update the following content
from django.contrib import admin
from django.urls import path,include

Dept. of CSE Vemana Institute of Technology Page 8

21CS62 FULLSTACK DEVELOPMENT Module 1

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

Create urls.py file in app1 folder and include the following content
from django.urls import path
from . import views
urlpatterns = [
path('hello/', views.hello, name="hello"),
]

Start the server by using the following command

python manage.py runserver
Open browser with the following url
http://127.0.0.1:8000/app1/hello/

How Django Processes a Request

 The command python manage.py runserver imports a file called settings.py from
the same directory. This file contains all sorts of optional configuration for this
particular Django instance, but one of the most important settings is
ROOT_URLCONF. The ROOT_URLCONF setting tells Django which Python module
should be used as the URLconf for this Web site.
 When a request comes in—say, a request to the URL /time/—Django loads the
URLconf pointed to by the ROOT_URLCONF setting. Then it checks each of the
URLpatterns in that URLconf in order, comparing the requested URL with the
patterns one at a time, until it finds one that matches. When it finds one that

Dept. of CSE Vemana Institute of Technology Page 9

21CS62 FULLSTACK DEVELOPMENT Module 1

matches, it calls the view function associated with that pattern, passing an
HttpRequest object as the first parameter to the function.
 The view function is responsible for returning an HttpResponse object.

When an HTTP request comes in from the browser, a server-specific handler constructs
the HttpRequest passed to later components and handles the flow of the response
processing. The handler then calls any available Request or View middleware.

Middleware:
Once the request reaches Django, it passes through the middleware stack. Middleware
can intercept requests and responses, perform additional processing, and modify the
request or response objects. Common uses of middleware include authentication, session
management, CSRF (Cross-Site Request Forgery) protection, and content compression.

If a view function raises an exception, control passes to the exception middleware. If this
middleware does not return an HttpResponse, the exception is reraised. Django includes
default views that create a friendly 404 and 500 response. Finally, response middleware
is good for postprocessing an HttpResponse just before it’s sent to the browser or doing
cleanup of request-specific resources.

Dept. of CSE Vemana Institute of Technology Page 10

21CS62 FULLSTACK DEVELOPMENT Module 1

Regular Expressions
Regular expressions (or regexes) are a compact way of specifying patterns in text. While
Django URLconfs allow arbitrary regexes for powerful URL-matching capability.

Symbol Matches

. Any character

\d Any digit

[A-Z] Any character, A–Z (uppercase)

[a-z] Any character, a–z (lowercase)

[A-Za-z] Any character, a–z (case insensitive)

+ One or more of the previous character (e.g., \d+ matches one

or more digit)

[^/]+ All characters until a forward slash (excluding the slash itself)

? Zero or more of the previous character (e.g., \d* matches zero

or more digits)

{1,3} { } (curly braces) - Curly braces quantify the number of

occurrences. "{n}" denotes exactly n occurrences, "{n,}"
means n or more occurrences, and "{n,m}" represents
between n and m occurrences.
Between one and three (inclusive) of the previous expression.

^ Require that the pattern matches the start of the string

$ Require that the pattern matches the end of the string
([0-9]{4}). Unnamed group
(?P<year>[0-9]
Named group syntax
{4})

Second View: (Date Time)

Develop a Django app that displays current date and time in server and date and time
with <offset> hours ahead and <offset> hours before as an offset of current date and
time in server.

# views.py
from datetime import datetime, timedelta
from django.http import HttpResponse

# Create your views here.

Dept. of CSE Vemana Institute of Technology Page 11

21CS62 FULLSTACK DEVELOPMENT Module 1

def current_datetime(request):
return HttpResponse(datetime.now())
def hours_ahead(request,offset):
current_datetime = datetime.now()
datetime_ahead = current_datetime + timedelta(hours=int(offset))
datetime_before = current_datetime - timedelta(hours=int(offset))
display = "<h1>Date and Time Offset</h1>"
display += "<p>Current Date and Time: "+str(current_datetime)+"</p>"
display +="<p>Date and Time "+offset+" Hours Ahead: "+ str(datetime_ahead)
+"</p>"
display +="<p>Date and Time "+offset+" Hours Before: "+str(datetime_before)
+"</p>"
return HttpResponse(display)

# urls.py in dateapp
from django.urls import re_path
from . import views
urlpatterns = [
re_path(r'^time/$',views.current_datetime,name="current_datetime" ),
re_path(r'^time/plus/(?P<offset>\d{1,2})/$',views.hours_ahead,name="hours_ahead" ),
]
# urls.py in dateproj
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('date/', include('dateapp.urls')),
]
# settings.py
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'dateapp',
]

Dept. of CSE Vemana Institute of Technology Page 12

21CS62 FULLSTACK DEVELOPMENT Module 1

URLconfs and Loose Coupling

Loose coupling is a software-development approach in which If two pieces of code are
loosely coupled, then changes made to one of the pieces will have little or no effect on
the other.
Loose Coupling with URLconfs: URLconfs allow for loose coupling between URLs and
views. This means that the mapping between URLs and views is not hardcoded but
instead defined in a separate configuration file. This separation of concerns makes it
easy to change URLs or switch out views without affecting other parts of the application.
For example, you can update your URL patterns in the urls.py file without modifying the
views themselves, promoting modularity and maintainability.
For example, consider the view function we wrote earlier, which displays the current date
and time. If we wanted to change the URL for the application— say, move it from /time/
to /currenttime/—we could make a quick change to the URLconf, without having to worry
about the underlying implementation of the function. Similarly, if we wanted to change
the view function—altering its logic somehow—we could do that without affecting the
URL to which the function is bound. Furthermore, if we wanted to expose the current-
date functionality at several URLs, we could easily take care of that by editing the
URLconf, without having to touch the view code.

Errors
Django displays the message Page Not Found (404) because the requested URL is not
defined in URLconf. Django also displays precisely which URLconf Django used and every
pattern in that URLconf. From that information, we should be able to tell why the
requested URL threw a 404.

Dept. of CSE Vemana Institute of Technology Page 13