Full Stack

FULL STACK
FRONT-END DEVELOPMENT
Flask : It is a web application framework which is written in python
It is considered as micro-framework
Some of the popular web applications frameworks are :
flask,django,pyramid,cherrypy
Flask was developed by armin
Flask is designed based on WSGI(web server gateway interface) toolkit in jinja2
template engine
Default port number --> 5000
URL to access flask application ---> http://127.0.0.1:5000
WSGI Toolkit : It is a toolkit used for python web application development
It acts as an interface between web server and web application
Jinja2 : It is a web template engine
It combines a template with a certain data source/code to render a dynamic web
page
Web pages : static web page and dynamic web page
Flask environment set-up:
python with version 2.7 above
To install flask : pip install flask
1st Web Application (Flask) :
from flask import Flask
app=Flask(__name__)
@app.route("/")
def sample():
return "Welcome to flask"
#dynamic routing
@app.route("/<name>")
def sample1(name):
return f'Hi {name}'
if __name__=="__main__":
app.run()
HTML:
Hyper text marcup language. It is used to create static web pages .
Invented by Tim Berners Lee & he is the one who invented internet in 1991.
Hyper Text refers to linkinf of web pages together
Marcup language refers to a document which tells you how to structurize the
display
Specifications of HTML:
-> HTML 1.O
-> HTML 2.O
-> HTML 3.2
-> HTML 4
-> HTML 5 (LATEST VERSION OF HTML)
Advantages of HTML:
1.open source
2.easy to understand
3.user friendly
4.debugging is easy
5.flexibility
HTML Structure: :
<html>
<head>
<title> TITLE</title>
</head>
<body>
_____________________
__________________________
</body>
</html>
HTML Tag:
Any word which is enclosed within a angular brackets is referred to html tag
HTML Element:
HTML Element and HTML Tag are often same but strictly speaking HTML Element
should have start tag , content , closed tag
Ex : <h1> Welcome </h1>
First HTML Program:
<html>
<head>
<title> TITLE</title>
</head>
<body>
<h1> Welcome </h1>
</body>
</html>
Basic HTML Tags:
1. Text Formatting tags
a. headings : denoted by <h1>........<h6>
h1 - big size
h2 - small size
Ex: <h2> hello </h2>
b. paragraph tag : denoted by <p>
<p> hjbsJBcjbhoHOUHI
DSKBJHWUHFEH
</p>
c. Pre formatted tag : denoted by <pre>
<pre> hjbsJBcjbhoHOUHI
DSKBJHWUHFEH</pre>
d. break tag : denoted by <br>
<p> hjbsJBcjbhoHOUHI. <br>
DSKBJHWUHFEH
</p>
e. bold/strong tag : denoted by <b> or <strong>
<b> hjbsJBcjbhoHOUHI <br>
DSKBJHWUHFEH
</b>
f. italic tag : denoted by <i>
<i> hjbsJBcjbhoHOUHI<br>
DSKBJHWUHFEH
</i>
g. underlined tag : denoted by <u>
<u> hjbsJBcjbhoHOUHI<br>
DSKBJHWUHFEH
</u>
h. Big tag : denoted by <big>
<big> hjbsJBcjbhoHOUHI <br>
DSKBJHWUHFEH
</big>
i. Small tag : denoted by <small>
<small> hjbsJBcjbhoHOUHI <br>
DSKBJHWUHFEH
</small>
j. strike tag : denoted by <strike>
<strike> hjbsJBcjbhoHOUHI <br>
DSKBJHWUHFEH
</strike>
k. delete tag : denoted by <del>
<del> hjbsJBcjbhoHOUHI <br>
DSKBJHWUHFEH
</del>
l. Mark tag : denoted by <mark>
<mark> hjbsJBcjbhoHOUHI <br>
DSKBJHWUHFEH
</mark>
m. Superscript tag : denoted by sup
<h1> hjbsJBcjbhoHOUHI <sup>DSKBJHWUHFEH</sup> </h1>
n. Subscript tag : denoted by <sub>
<h1> hjbsJBcjbhoHOUHI <sub>DSKBJHWUHFEH</sub> </h1>
o. Horizontal Ruler : denoted by <hr>
<h1> hjbsJBcjbhoHOUHI <supDSKBJHWUHFEH</sup> </h1>
<hr>
p. marquee tag : denoted by <marquee>
<marquee> hjbsJBcjbhoHOUHI <sub>DSKBJHWUHFEH</sub> </marquee>
Note : Attributes are used to display the properties of the tag
Attributes will have a name and value
Syntax :
<tag attrname=attrval>
2. Anchor Tag : denoted by <a>
3. Image Tag : denoted by <img>
<img src ="imagepath">
4. Audio Tag : denoted by <audio>
<audio controls>
<source src = "audiopath.mp3">
</audio>
5. Video Tag
<video controls>
<source src = "videopath.mp3">
</video>
6. List Tag : Collection of items
Types of List tags :
1. unordered lists
2.ordered lists
3.descriptive lists/definition lists
List tag is denoted by <li>
Unordered list is denoted by <ul>
ordered list is denoted by <ol>
Descriptive list is denoted by <dl>
1. Unordered list:
<ul type="circle">
<li> CSE </li>
<li> ECE >/li>
<li> MECH </li>
<li> EEE </li>
</ul>
2. ordered list:
<ol type="circle">
<li> CSE </li>
<li> ECE >/li>
<li> MECH </li>
<li> EEE </li>
</ol>
3. Descriptive lists/Definition lists:
<dl>
<dt>cse</dt>
<dd>faculty</dd>
<dd>students</dd>
</dl>
7. Table tag : denoted by <table>
(index3)
8. Forms : denoted by <form>
used to collect the data
Data can be collected using form elements
The different form elements are :
1. input
a. text
<from>
First Name : <input type="text" name="fn"><br>
Last Name : <input type="text" name="ln"><br>
Password : <input type="password" name="pwd"><br>
Mobile Number : <input type="number" name="mb"><br>
Date of Birth : <input type="date" name="dob"><br>
</form>
b.radio
Gender : <input type="radio" name="r"value="male">Male
<input type="radio" name="r"value="female">Female<br>
c.button
<input type="button" value="Register">
<input type="reset" value="clear">
<input type="submit" value="Click">
d. checkbox
Fav Course:
<input type="checkbox" name="cb"value="daa">DAA
<input type="checkbox" name="cb"value="os">OS
<input type="checkbox" name="cb"value="cns">CNS
<input type="checkbox" name="cb"value="atfl">ATFL
<input type="checkbox" name="cb"value="pfsd">PFSD<br>
2. selection
Branch:
<select>
<option>NONE</option>
<option>cse</option>
<option>ece</option>
<option>eee</option>
<option>bba</option>
</select><br>
3. textarea
Address:<br>
<textarea>
</textarea><br>
<br>
Note : Form attributes
Attribute to a form tag is refer to form attributes
The form attributes are:
1. action
<from action="hi.html">
<b>Student Data<b><br>
<br>
</form>
2.method
<form action="hi.html" method="GET">
<b>Student Data<b><br>
<br>
</form>
Assignment :
Cascading style sheet(CSS) :
1.Inline CSS
2.Internal CSS
3.External CSS (any 1 way)
Saturday, 25 February, 2023
Tuesday, 28 February, 2023
Redirect :
#redirect
@app.route("/route/template2/<role>")
def sample4(role):
if role=="guest":
return redirect(url_for('sample2'))
else:
return redirect(url_for('sample3',name=role))
List rendering :
#List rendering using for tag / for loop
@app.route("/List/rendering")
def sample5():
lst=["abc","kjl","lll"]
return render_template('index3.html',lst=lst)
Template Inheritence :
#Template Inheritence
@app.route("/greetings/abc")
def sample6():
lst=["kl","klo","kli"]
return render_template('home.html',lst=lst)
Conditional rendering using if tag / if cond :

#conditional rendering using if tag / if cond
@app.route("/conditional/def")
def sample7():
return render_template('iftag.html', value=1)
Form example:
#Form example
@app.route("/form/studentform")
def sample8():
return render_template('studentform.html')
Form data handling using flask

@app.route("/form/datahandling", methods=["GET","POST"])
def sample9():
if request.method=="POST":
name=request.form.get('stud_name')
number=request.form.get('stud_no')
return name
return render_template('studentdetails.html')
MONGODB
Introduction to NOSQL:
• Nosql stands for Not Only Structure Query Language
• Nosql databases are non-relational databases whereas sql databases are
relational databases
Note : Relational database : It is a kind of database that stores and provides data
related to each other
The system which maintains relational database is refered to be RDBMS
SQL -> Relational -> tables
NONSQL -> Non-relational -> no tables
• NOSQL is specially designed for large set of data (Big Data)
Big Data : It can be defined using 3 characterstics
1. velocity (speed at which data arrives to a database)
2.volume (size of the data)
3.varirties (comments , images , videos etc)
All these 3 together defines Big data
In general, data will be in the form of
• structured data
• unstructured data
• semi structured data
• unpredictable data
Some of the popular NOSQL databases are
1. MongoDB
2. DynamoDB / AmazonDB
3. CouchDB
4. Cassendra
5. Neo4j
6. Riak etc
Differences between SQL & NOSQL
SQL
1. Data stored in tables
2. Structured data
3. Sql is used for relatively smaller data
4.Scalability is limited
NOSQL
1. Data is not stored in tables
2. unstructured data
3. Nosql is used for larger data
4. Scalability is unlimited
Types of NOSQL Databases:

1. Document based database (MongoDB)
2. Key- value based database
3. Graph based database
4. Column based database
Introduction to MongoDB:
MongoDB is a open-source with high performance
MongoDB is highly scalable
MongoDB stores data in the form of json format
It was developed by a company 10gen
Note : Document based database will consists of collections, documents, fields
etc..
Features of MongoDB:
It does not require any relational data model
It does not require any schema
It does not require any query language , normalization
MongoDB completely works based on aggregation
Differences between MongoDB and oracle
MongoDB(NOSQL)
1. stores data in the form of collections
2. unit of data will be stored be in document
3. schema is dynamic
4. CRUD (collections)
5.primary key (identifies a document)
6. MongoDB is NOSQL database
Oracle
1. stores data in the form of tables
2. unit of data will be stored in record
3. fixed schema
4. CRUD (table)
5. primary key ( identifies a record)
6. Oracle is sql database
Saturday, 11 March, 2023
MONGODB
1. Introduction to NOSQL
2. Introduction to MONGODB
3. MongoDB Environment setup
4. Basics of MONGODB
5. Create collections and Documents
6. CRUD Operations
7. Find and pretty functions
8. Summary
MongoDB Environment setup:

-- shell , Compass(Local Environment) , Atlas(Cloud)
Basics of MongoDB:
-> Leading NOSQL Database
-> Documentation
-> MongoDB is written in C++
Advantages of MongoDB
schema less
Fast performance compared to sql (100 times faster than sql)
Easy to scale
Spl features of MongoDB:
Scalability
Performance
High Availability
Development is easy
Development is faster
Load Balancing etc
Applications of MongoDB:
1. Dealing with Big Data
2. Data hub
3. Social and mobile networking sites
4. Data management
5. Content Management
MongoDB Datatypes :
String
Boolean
Integer
Double
Arrays
Min
Max
Null
Object
Symbol
Database Creation:
Syntax : use DB_NAME
Example : use KLU-V
Note :
If the database doesnot exists , it will creates a database and switches to database
If the name is existing , it will simply switches to that database
Drop database : To delete a database
Syntax : db.dropDatabase( )
Ex : use KLU-V
db.dropDatabase( )
Creating collections and documents:

Collections : is a set of documents
Create Collection :
Syntax : db.createCollection("name")
Ex : db.createCollection("CSE")
Drop Collection :
Syntax : db.COLLECTION_NAME.drop( )
Ex: db.CSE.drop( )
Documents : are used to store the data in mongodb database
Syntax : db.COLLECTION_NAME.insert( document)
Ex : db.CSE.insert({"Course":"PFSD"})
Ex : db.CSE.insert(
{
"course":"pfsd",
"category":"fs-c5"
}
)
Ex :
db.CSE.insertMany(
[
{
"course":"pfsd",
"category":"fs-c5"
},
{
"course":"pfsd"
},
{
"course":"mswd",
"category": "fs-c5"
},
{
"course":"psqt",
"category":"mp",
"details":{
"dura":100,
"trainer":"abcd"
}
}
]
)
CRUD :
2. retrieve :
db.COLLECTION_NAME.find( )
Ex : db.CSE.find( )
b. To retrieve specific documents (based of fields)
Syntax : db.COLLECTION_NAME.find({"Field"})
Ex: db.CSE.find({"Course":"PSQT"})
c. update
d. delete : to remove all collections
Syntax : db.COLLECTION_NAME.remove( { })
Ex : db.CSE.remove( { } )
to remove all documents that matches the condition
syntax : db.COLLECTION_NAME.remove( {DELETION_Criteria})
Ex : db.CSE.remove( { "course":"pfsd"} )
to remove only single document that matches a condition
Synatx : db.COLLECTION_NAME.remove( {DELETION_Criteria} , 1)
Ex : db.CSE.remove( { "course": "pfsd"} , 1)
Find and pretty functions :
a. find( ) : This is used to retrieve a document
-> to retrieve all documents
ex : db.CSE.find( )
-> to retrieve documents based on a condition
ex : db.CSE.find( {"category":"fs-c5"} )
b. pretty( ) : This is used to display the documents in a more structurized format
syntax : db.COLLECTION_NAME.find( ).pretty( )
Ex : db.CSE.find( ).pretty( )
CONNECTIVITY BETWEEN FRONTEND AND BACKEND :
Database connectivity
app1.py
install pymongo
In app1.py :
from pymongo import MongoClient
from flask import flask
client = MongoClient("mongodb://127.0.0.1:27017")
db = client['STUDENT']
studentdetails = db.DETAILS
app=Flask(__name__)
@app.route("/crudexample")
def sample10( ):
return render_template('studentform.html' )
@app.route("/success", methods =('get','post'))
def onsubmit( ):
fname=request.form.get('fn')
lname=request.form.get('ln)
rollno=request.form.get('regno')
mobile=request.form.get('mb')
a = {"First Name":fname,"Last Name":lname,"Reg No":rollno,"Mobile
Number":mobile}
b = [{"First Name":fname,"Last Name":lname,"Reg No":rollno,"Mobile

Number":mobile} , {"concept":"DB_Conn"}]
studentdetails.insert_one(a )
studentdetails.insert_many(b)
return "Document Successfully Inserted"
if__name__=="__main__":
app.run( )
In templates :
studentform.html
<body>
<form action ="{{url_for('onsubmit')}}>
First Name:<input type="text" name="fn"><br>
Last Name:<input type="text" name="ln"><br>
Register Number : <input type ="number" name="regno"><br>
Mobile Number :<input type="number" name="mb"><br>
<br>
<input type="submit" value="click here">
</form>
</body>
#retrieve document
b=studentdetails.find( )
return render_template('retrieve.html',b=b)
retrieve.html
<body>
{% for x in b%}
{{x}}
{ % endfor %}
</body>
#delete document
studentdetails.remove( { } )
return "document deleted successfully"
MongoDB Compass :
Create and insert and update and delete the data and retrieve
MongoDB Atlas : (Cloud)
client = MongoClient("mongodb://127.0.0.1:27017")
MongoDB Atlas -
mongodb+srv://srilu:<password>@cluster0.u86vi4s.mongodb.net/?
retryWrites=true&w=majority
client =
MongoClient("mongodb+srv://srilu:<password>@cluster0.u86vi4s.mongodb.net/
?retryWrites=true&w=majority")
Tuesday, 21 March, 2023
Django Framework
--> What is web Application
--> Components of web Application
--> Introduction to django framework
--> How to create a django project
--> How to create an application
--> Project structure and app structure
--> How to run an application
--> views and http response
--> Dynamic routing
--> Template rendering
--> Context Passing to Template
--> Redirect
--> Template Inheritence
--> Static content
--> CRUD Operations
--> Session management
--> Builtin user model, checking authentication and admin panel configuration
--> writing models
--> working on complete django project from scratch
--> Hosting
* Web Application :
FE , BE , Connectivity
Local Application Global Application
Runs on a client Runs on a web server
Components of web application :
In general , every web application framework architecture follows MVC
Architecture
M - model (BE)
V -view (FE)
C -controller (Connectivity)
- whereas django framework follows MVT Architecture
M - model (BE)
V - view (FE)
T - Template (Django provides a lot of pre-defined templates to a user or
developer
Introduction to Django framework

Django is a web application wriiten in python programming language
django is popular and very demanding
It takes very less time to build an application compare to other frameworks
This framework is having a famous tag line : "The web Framework for perfectionist
with deadlines"
History :
Django was developed by lawerence journal world in 2003
Features of Django :
1. Rapid development
2. Open source
3. Very secure
4. Fully loaded
5. Scalable etc...
Some of the popular applications build using django framework :

Instagram
Mozilla Firefox
Pinterest
* How to create a django project :

Open pycharm IDE
File -> New Project (s02DP)
Terminal -> pip install Django
Terminal -> django-admin startproject project1
* How to create an app

Terminal -> cd project1
Terminal -> python manage.py startapp pages
*Project Structure and Application Strucuture

S02DP
-project 1
-project 1
__init__.py
assgi.py
settings.py
urls.py
wsgi.py
-pages
__init__.py
admin .py
apps.py
tests.py
views.py
models.py
urls.py (create)
*How to run a django project :

project1-> project1 ->pyhton manage.py runserver
*Views and HTTPResponse :

views.py
from django.http import HttpResponse
from django.shortcuts import render
# Create your views here.

def sample1(request):
return HttpResponse("Welcome to django")
pages/urls.py
from django.urls import path,include
from .views import sample1
urlpatterns = [
path('',sample1,name='NR')
]
* Dynamic routing
context passing
def sample5(request, name):
return render(request, "index.html", {'name':name})
lst=['fknf','jfkej','efihze']
return render(request, "index1,html" , {'names':lst})
urls.py
path('template1/',sample3,name='TR')
path('template2/<name>/',sample4,name='CTR')
path('template3/',sample5,name='CTR1')
path('listrender/',sample6,name='LR')
Tuesday, 28 March, 2023

Redirect :
return redirect('TR')
Template inheritence :
return render(request,"Inheritence.html")
urls.py
path('template4/',sample8,name='TI')
CRUD Operations : (db)

the Different operations which can be performed on a database . The standard
operations are :
create & insert
retireve
update
delete
** Built-in user model , checking authentication & Admin panel
Configuration
Built-in user model :
from django.contrib.auth.models import User
checking authentication :
from django.contrib.auth import authenticate
Admin panel configuration :

open terminal
python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser
username:
email:
password:
re-enter:
superuser created successfully
How to create a user in admin panel
views.py
def registration(request):
fname="abvjh"
lname="bja"
email="bs@gmail.com"
User.objects.create_user(fname,lname,email)
return HttpResponse("successful")
urls.py
path('register/',registration,name="REG")
Writing models
models.py : It is nothing but defining the schema for database
A model is a single , definitive source of information about your data.
Each model is a python class which contains sub-classes too
Each attribute of a model represents a database field
models.py
class Student(models.Model):
firstname = models.CharField(max_length=40)
lastname = models.CharField(max_length=40)
class Vehicle(models.Model):
regno = models.CharField(max_length=20)
model= models.DateField()
name= models.CharField(max_length=40)
yearofmanf = models.IntegerField()
Note :
The firstname and lastname of student model are called as fields. each field is
specified as class attribute and each attribute maps to a database column
https://docs.djangoproject.com/en/4.1/topics/db/models/

Full Stack

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Full Stack

Uploaded by

Copyright:

Available Formats

FULL STACK

Conditional rendering using if tag / if cond :

Form data handling using flask

Types of NOSQL Databases:

MongoDB Environment setup:

Creating collections and documents:

b = [{"First Name":fname,"Last Name":lname,"Reg No":rollno,"Mobile

Tuesday, 21 March, 2023

Introduction to Django framework

Some of the popular applications build using django framework :

* How to create a django project :

* How to create an app

*Project Structure and Application Strucuture

*How to run a django project :

*Views and HTTPResponse :

# Create your views here.

Tuesday, 28 March, 2023

CRUD Operations : (db)

Admin panel configuration :

You might also like