PYTHON FLASK-1

Corey Schafer
Python Flask
-

a
program in Python for web development

INITIATION
the Flask class
from flask import Flask < importing

app =
Flask)--name ) Creating __
an "app" variable , setting
it to an instance of this Flask class
-

variable the name of the module

a special Python ,

-
when run directly w/ Python , --name----- main - - visit next page for example

INITIALIZES YOUR FLASK APPLICATION SO IT CAN BE USED FOR ROUTES THELPS FLASK KNOW WHERE TO ,

LOOK FOR RESOURCES (TEMPLATES O STATIC FILES)

ROUTES ROUTE DECORATORS

what's typed into browsers to go to different pages
-

route decorators are used to create pages (about+ home pages)

-

route decorators help write functions that show info on certain roulers

&app (")")
J-router
route
decorators : both ways URL)
.

to call for the Home Page (type into

& app rouce("/home")
.

HTML code forHeading 1

def home 1) : ↓
"Home Page" -Page
"
<has Home < /h1)
"

↓
↓

O
↑
text too small

I-creating
& app . roure ("/about")
def about 1) :
the roue decorators for the About page

return" (h1) About Page > /has"

 RUNNING THE CODE
Running the code without the debugger (no reloads)
type into terminal:
-

export FLASK App -

= filename .

Py
flask run

Running the code with the debugger (reloads in real time)

Method 1 :

CTRL+ C in terminal to quit website

current running
-

type intoterminal :
-

export FLASK DEBUG 1

=
-

flask run

"Debugger
"
-

should see is active! in terminal

Method 2 :
-

type this into code file :

if -name-----main-- :
J-only true when run directly through Python (like this) (visit previous page)
app . can
(debug True) = -
running app variable (website) in
debug mode

then run file or type "python filename .

py" interminal

PYTHON FLASK-2
-

the flask .
py contains 2 roules , home + about ,
and w/ more routes lots of HTML code would

overlap
-

so templates can be used (by creating a templates directory within the project folder)

PYTHON-flask by
FLASK ~ home html
.
= home route template (info unique to the home roure)
-

TEMPLATES
I about html =about
template (info unique route
:

S
route to the about

static layout html .

< shared into between routes

&

main css ,
 flask py -

info
importing render-template to use

from flask import Flask ,

under-template from templates in the flask .
py file

I
def home 1) :
-

rendering the flask website's template

return render -
template (home himl) .
from home : himl (a template)
:
def about 1) :

return render -
template (about html) .
I-rendering
from
the flask

about htm/ (a
.
website's

template)
template

↑
code for ctic
a
(non-changing , fixed) HTML
page
DUMMY DATA

post + author example content

flask PY .

-
a list of dictionaries containing
data about
dummy posts

this posts data into the template

passing
def home() : - by passing an argument containing the data

return render-template (home

THE
.
html .
Posis posts list (data
WE WILL HAVE ACCESS TO
variable/argument name
POSTS DATA IN OUR TEMPLATES,
STORED IN THE "POSTS" VARIABLE

home html .

a code block needs to be written (5 %% 3

-

&% for post in posts you for loop to print posts one at a time

I
< H1)[E post , tiHe 33 </h1)
<p >
By &G post . author 33 on ES Post date-posted 33 /P
,
< > - for each post within the posts date ,

<> &2 post content

. 33 </P)
this will be printed

2% endfor % 3 ending the for loop with another code block

-

passing a title to our web pages but ,

if one wasn't given then a default title (Flask Blog) could be

used lusing an if-else conditional)

home .
html/about : h+m/

2% if title %3 another content block (if else)

ES title 33 </titles
< title) Flask Blog if a title provided it's
gonna be "Flask Blog-title"
-

is then

2%
1
else %3 if no title is provided ,
then the title will be "Flask Blog
< titles Flask Blog > /titles

5 % endif %3 ending the if/else content block

G
default title

TEMPLATE INHERITANCE
it's inconvenient to their shared code needs to be made ,
update all files (templates) when a
change in
-

so you can create a common file

(containing shared code) which other files /templates) inherit from

home html .
and about Html . will inherit from layout utml .

I
layout . htm) (SHARED CODE) BLOCK

a section that can be overridden by child templates

-

.
< DOCTYPE HTM1 > -creating a "content" block

Chrm1 > < body>

head > >

-

2% block concent 35 % endblock % 3

2 o if title % z
body >
< title > Flask Blog &d title 33 /titles html)
(inheriting from layout
-
<
home Html .
.

word
9% else %b using the key

< title > Flask Blogtitle> 12 % "layout html" . %3

"extends"
from the
to
parent
inherit

&% endif % 3 -%3 2% block content starting

block
the
layout Hire
[e ,
.

head > & for post in posts 3 that will override

layout Utml's concent block
h1> &d 33
.

< body > <

post . title

/body> 33 &G post. date_posied33 < p>

< <p>
By &2 post author on

< /Urmi > <

p> &2 post concent
·
33
9 % end for 3 the concenta
Lending
-
3 % endblock consent %3
about him/

3% extends "layout himl" % 3-doing

- the same content block that will override "layout himl"s
,

2 % block concent 3 content block for about html .

</ha)
<h 1) About Page
8 % endblock content % 3

BOOTSTRAP
-

popular library that has HTML styles for websites

layout , him/

the website+ with

J- helps
render
the website
touch zooming
+ helps
resize to fit the screen

contains
styling elements

for interactive
contain JavaScript
components (dropdown menus , etc . )

-
can run it using
adiv class = "container"s and < /div > around the content block

RESULT

F E
ADDING A NAV BAR
helps define intro content+ set new nav links thelps w/ customization

functional
centers content
creating +
styling the nav bar -creating a
navigation bar
styles link adds
, margins and adds Home Link
,

[ creating toggler button/icon styles +

designs using Bootstrap that automatically
to nav bar the button
applying bootstrap's style toggler
styles container resizes for smaller screens
Is styles each
E
link as a nav bar item (home + about

links
login a register right of
nav on the
creating
the hav bar

SIDEBAR
clarifies "main" content + adds horizontal padding for a consistent layout
creates horizontally aligned columns
-creating a sidebar w/
creating a class that will take $12 of (holding main content)
[
up parts the row or screens
starting content block

creating a column that will take up 4/12 parts of the row on screens (holding sidebar content
columns using Bootstrap
a custom class for styling purposes

replaces
-
a heading for the sidebar section
a
lighter color text
creating a list group to display content

"Container" >
,

< dir class

J-list
=

elements

2% block content % 32 % endblock %z

/div >
CUSTOM STYLES/MAIN .
CSS)
contains CSS code for custom fonts colors designs a styles
-

, , ,

-
in order to import to layout . Html (layout template) ,
the Flask function , url- for needs to be used
url-for will find exact location of routesruns behind the scenes)
-

flask py .

↓
from flask import Flask ,
render-template for

layout .
him

clink rel =
"Stylesheet" type "text/ess" =
uref = &G url-for I'static' filename ,
=
'main css') 33
.

using url-for to link the stylesheet to main .

CSS within the static folder

home Utm/ .

used separate area on a website (for the blog

to create a
post) using Bootstrap
Bootstrap for media objects to contain the
class
main concent
custom class for
styling metadata section of article
adding styles when the post author
using small
printing
ext to print the date posted

link vo/custom class article-title for

styling +
inserting post title
custom
styling for posts' content

ending for loop

ending content block