Web Development with Python Tutorial – Flask & Dynamic Database-Driven Web Apps
- April 25, 2024
- Posted by: MainInstructor
- Category: BASIC C Go JavaScript Python SQL Web Development
Video Title: Web development with Python Tutorial – Flask & Dynamic Database-Driven Web Apps
this web development with python course
is broken up into two parts in the first
part you will learn how to build and
deploy a site using the flask python web
framework in part two you will connect
the flask application from the first
part to a cloud mySQL database and learn
how to deploy a production-ready
database driven web application Akash
created this course he is the CEO of
Jovian and he has created many popular
courses
hi I’m Akash co-founder and CEO of
jovial today I am really excited to
share with you this practical and
Hands-On introduction to web development
with python from scratch in this
tutorial you will watch me build and
deploy a jovian careers website to the
cloud using free online resources you
can follow along to build your own
personal website so let’s get started we
want to explore web development and
deployment using Python and its
ecosystem of libraries
and we will do this by creating a jovian
careers website where we can list job
openings at Jovian and people can apply
to those jobs so after this lesson you
should be in a position to build and
deploy your own website maybe a personal
website a portfolio or some sample
application
there are no prerequisites here apart
from Python and git
so here are some of the topics that we
are going to look at we’re going to look
at how to use GitHub for creating a
project and replit for working on a
project we will talk about the flask web
framework which is used to create web
applications in Python we will touch on
HTML and CSS we will talk about the
bootstrap framework which will help us
make our website look a little better
with less effort and then we will talk
about deployment on cloud platforms
specifically we are going to deploy to
render.com and finally we will talk
about how to set up your own custom
domain and configure it to point it to
the website that you have created and
deployed
the first step is to create a project on
GitHub now GitHub as you might already
know is a platform for sharing and
collaborating on software development
projects and it is powered by git which
is a version control system which lets
you record every version of your project
as you make changes
so the first thing you want to do is go
to github.com and then sign in or create
an account if you haven’t done that
already
and once you’re logged into github.com
this is the screen that you will see but
in this busy interface what you’re
looking for is this new button this is
the new repository or new project button
if you don’t see this new button there’s
also a plus button here on the top right
which you can use and just select new
Repository
now once you try to create a new
repository you will have to select an
owner which will be your GitHub account
your GitHub username and then we need to
give this repository a name so this has
to be one or more lowercase words
separated by hyphens so I’m going to
call it Jovian
careers website
and we can give this a description if we
want so I’m just going to say a careers
website for Joven
and I’m going to make this public so
that anybody can access it
and I’m also going to add a readme file
because this will initialize the
repository so I don’t have to push
anything to the repository to get
started
and then I’m also going to add a git
ignore file so as we do our development
a lot of build files and compiled files
and intermediate files are created by
python which we may not want to put into
git because they are not actual source
code they are simply used to run the
code so to ignore all of these
intermediate output files that are
created you can select a DOT get ignore
file that can get added to the root of
your repository now depending on the
kind of project you’re working on the
kind of language you’re using the kind
of files that you need to exclude May
differ so GitHub has already provided a
git ignore template for Python and we
just select that so that we don’t
accidentally end up adding any
intermediate compiled files or output
files into our Repository
and finally if you’re making your
repository public it’s always a good
idea to include a license which lets
others know how they can use it whether
they can use it commercially whether
they can build on top of it or not and
I’m just going to select the MIT license
here which is the most liberal license
that’s available
and that’s it now we can create the
Repository
so now the repository is created and you
can see here it contains a readme file
which is rendered as markdown so it just
contains the name of the repository it
also contains a license file that you
can read and it contains a DOT get
ignore file if you click on it contains
information about the kind of files that
should be excluded
from git and these are all the
intermediate files that might get
created when you’re running your python
code
so let’s go back here and take this
the next step is to open up this project
on the platform replit.com
so here this project is on GitHub GitHub
can be used to store projects can be
used to share projects but cannot be
used to develop projects
now that’s where you might want to use
this Cloud platform called replet and
replit.com is an online free
collaborative in browser IDE refers to
integrated development environment so
what that means is it can connect to
your GitHub account and it can let you
write code on the cloud and you don’t
have to install anything on your
computer and your code will be synced to
the cloud and you can access it from
anywhere
so you can go to replied.com and you can
then sign up or log into replit so I’m
just going to log in because I already
have an account
and once you log in this will bring you
to your replay dashboard
now here you can create new projects but
ideally you want to use GitHub to keep
track of your projects so you can scroll
down here
and you can click on connect GitHub
so let’s click connect GitHub and here
you might want to then select what
exactly you want to give replied access
to so in my case I’m going to click on
my name and I can choose to authorize
all the repositories I have so that any
repository I have on GitHub I can
develop with replit or I can choose to
only give access to select repositories
now in this case I’m just going to give
access to select repositories because I
have a whole bunch of repositories so
let’s see Jovian couriers website okay
that looks great and these are the
permissions that replied is going to get
it is going to be able to read the code
from GitHub and it is going to be able
to write code back into GitHub
so let’s install and authorize
and that should now bring us to the
replit dashboard and now you should see
a GitHub Repose section on your applet
dashboard and here you can see whichever
repositories you’ve selected replied
will have access here
so let me now click on this and let me
see what happens so now it’s going to
import this repository so that means all
the code from GitHub and I’m going to
make this Rebel public so just like my
repository is public I also want to make
my replit project public and
let me then click import from GitHub
and that’s going to load up all the
files that we had seen here git ignore
license and readme.md
and it’s now going to show these files
on replit
now everything you build will ultimately
have to be run in a certain way
so you can configure a run command and
every time you click this run button the
Run command that you configure here is
going to be executed and the output is
going to be shown here in this console
tab I’m going to type python app dot pi
as the command that will be executed
when the Run button is clicked so I’m
going to click done and this is going to
create a file called Dot replit
within the repository which contains
this information and informs replit this
is a Python 3 project and the Run button
should run python app.pi now you may
notice that this dot replied file is not
visible here and that’s because it is a
hidden file so you can just click on
these three dots and say show hidden
files and that’s going to show the dot
replet file which is just hidden from
you by default so now we have this
project open on replit you can see here
we have a files sidebar the file sidebar
contains a list of files that are
present this is the same get ignore file
we had this is the same license file we
had and this is the same readme file we
had
and we can choose to then show a preview
which is shown here or we can hide the
preview
so that’s the files tab and here is the
file editor this is where we can edit
the code and finally here we have two
things we have a console which shows the
output of the Run button
and we have a shell which is just like a
terminal or a command line interface
where you can run any command line
utilities like LS or PWD or CD or
whatever you want to do let me click the
Run button and see what happens
and the first thing it does is it tries
to run the command Python app.pi and it
says that python cannot open the file
app.pi because there is no such file or
directory we have not created the file
yet
so I’m just going to click plus here to
create a new file and I’m going to call
it app.pi
and let’s just print
hello world here
and let’s run it
and now you can see that the code was
executed Python app.pi and hello world
the output was displayed here
so now we have got our project imported
into replit and we are now already
developing it we can open up files we
can change the code and then we can run
the code and of course we don’t have to
use the Run button we can come in here
and we can say python app dot pi and
that will work perfectly fine as well
so let’s take that we’ve now opened up a
project on replit
now we are not here to print hello world
we are here to build a web application
and for building web applications in
Python we use a framework called flask
so if you just go online and search for
flask python
you will be taken to this website
flask.palletsproject.com
flask is one of the most popular web
Frameworks in Python
and flask is actually really easy to use
and let’s check the installation and the
quick start sections to understand how
to use it
every Library you come across will have
some sort of an installation and quick
start or getting started section or
maybe a quick tutorial that you can
follow
so installation simply requires us to
run so here it says create an
environment Etc we’re not too interested
in all that right now because we’re
already using a cloud environment but
within the activated environment use the
following command to install flasks so
this is what we need to do we need to
run pip install flask so I’m going to go
here I’m going to go into the shell not
the console because the console is just
tied to the Run button but the shell and
I am going to run pip
install
flask
and that’s going to now install flask
for us now we can go back into the flask
tutorial and now we can head into the
Quick Start
and here is what a simplest possible web
application in flask looks like so here
there are two things this is the module
so when we set pip install flask the
module with the name flask got installed
and modules always have lower case names
so from flask and then we say import and
from the flask module we want to import
the flask class even though these both
are called flask it’s a bit confusingly
named but inside the module flask there
is a class called flask with a capital f
so I’m going to import flask and now
we need to create an app an app is
simply an object of the class flask okay
so python has something called object
oriented programming built inside it and
what we are doing here is we are
importing a class and then we are
creating an object of the class now if
that doesn’t make sense don’t worry
about it all we are doing here is
importing functionality from flask and
putting it into this variable called app
so we are creating a flask application
by typing flask
this way now the only thing that we need
to add here is a name every time you
create a flask application you have to
give it a name and typically inside any
python script you already have this
variable called underscore underscore
name underscore underscore Define if I
for example just type print underscore
underscore name underscore underscore
and run it
you’re going to see here that it prints
underscore underscore main underscore
underscore the name variable refers to
how a particular script was invoked if
it was invoked using python app.pi the
name variable is going to have the value
mean and if it was invoked from
somewhere else the name variable may
have some other name okay so now we have
created a flask application
now once we have created a flask
application we then need to create a
route
now any website that you visit
you typically access it using some URL
for example you may go to jovian.ai
and this is the page that is on the URL
joven.ai now if I click on profile here
you can see that the URL has changed to
slash Akash NS and now there is a
different page rendered on this URL if I
click on learn and click on courses you
can see the URL has changed to slash
learn and now you see something
different on this page
so what you need to tell flask is when a
certain URL is requested what should be
returned
so here in the quick start we are first
registering a route a route is simply a
part of the URL after the domain name so
here jobin.ai is the domain name and
everything after it is called the path
or the route so let’s do that let’s go
and register a route here and the way we
do that is we say app
with an at character so this is called a
decorator in Python it’s a slightly
Advanced concept that’s often used in
libraries to provide some Advanced
functionality so we say app dot route
and then we have to provide which path
we want it to match so let’s say we
deploy this website to
jovencareers.com then this is going to
match
slash which is the empty route which is
basically just the home page
jovencareers.com
and then
we Define a function so we can define a
function below this decorator
hello world
and in this function
let us simply for now return
hello world
so what we’ve done here is we’ve defined
a function which simply Returns the
string hello world but by adding this
decorator we’ve informed flask that when
the URL slash is accessed
then
show hello world
and let’s run that
and replied does some setup to manage
dependencies on its end so let’s just
wait for that
has its own way of managing python
packages so that’s why sometimes it
takes a second or two but once we run it
we see nothing happens
so nothing happened because
if you scroll down here you can see here
that they expect you to run things in a
slightly different way what you need to
do is you need to export flask
underscore app equals hello or whatever
is the name of the file here it was
called hello.pi and then you need to
type flask run
so what that means is we may have to go
back into our DOT replete file and
change the code here python app.pi
because flask expects to be run in a
different way
so we need to probably change python
app.pi to flask run and we also need to
add somehow this flask cap command now
that’s one way to run it
another way to run it is
something that I’m going to show you
right now I’m going to type if
underscore underscore name underscore
underscore equals underscore underscore
mean underscore underscore
so here what we are saying is if the
variable underscore underscore name has
the value underscore underscore mean and
I’m just checking the equality here
and this is going to be the case when we
run python app dot Pi so
let’s say if I just print underscore
name underscore underscore
let me just print
I’m inside the if now
and when we run it it simply says that
underscore unscore name has the value
underscore mean and I’m inside the if
now so here if the script is invoked
using the python command then what we
want to do is say app dot run so we have
created the app but we’ve not yet run
the app and we don’t want to use the
flask run command instead we want to do
it using app.run
and here when you type app.run you will
see some documentation you need to
provide a few options the first one is a
host and it simply says here set this to
0.0.0.0 to run on the local development
server so we type app.run host equals
0.0.0.0 and then we pass debug equals
true
and now we save the file and then we
click run
and now you can see that replit actually
opened up a browser within our browser
so this is a fake browser that replied
has opened up for us
so we have imported flask and then we
have created a flask app a flask
application and then we have registered
a route to the application and finally
we have checked if we are running this
app.pi file as a script as python app.pi
then we want to start the app by using
app.run and we want to run it on 0.0.0.0
this is always something that you have
to put in so that it runs locally and we
said debug equals true so that every
time we make a change like if I change
this to hello
Jovian
that’s going to now change to hello
Jovian
and just like that we have created our
first web application
you’ll see here that this is a browser
that replied is showing us just for the
preview sake but you can also open up
this browser in a new tab and that shows
you hello Jovian and you can see that
this is deployed at this location
joviancareers website dot akashness
rebel.co so this is one of the benefits
of working with replit that you can take
the work that you’re doing and you can
share it with other people even while
you are developing it replied is not
great for production workloads so you
should not be sending a lot of traffic
to this site and in fact specifically
here it tells you that this is a
development server don’t use it in
production but it is great for testing
it is great for quickly prototyping and
showing something to your colleagues or
your friends so now we have already
built our first web page using flask
and we can see it running and we can
share it with others as well
so we’ve done that now the last thing I
want to show you is once you’ve done
some work on replit and you want to save
it back to GitHub how do you do that so
right now if you see here if I reload
this page GitHub still has the old
version of the repository it does not
have all the changes we’ve made on
replit so just like we might do some
development locally and then push our
changes to GitHub in the same way we can
come in here into the Version Control
tab and on the Version Control tab we
can review the changes that we’ve made
so it looks like we’ve modified all of
these files and then we can commit and
we can push I can simply type what I’ve
changed so added the flask project
and I am going to click commit and push
and that’s going to save all of these
changes it is going to create a git
commit and it is going to then
push these changes back to the main
branch of the original repository
akashina careers website so if I go back
to github.com now and I reload the page
you can see here now we have
a bunch of other files but most
importantly we have this app.pi file and
this app.pi file now contains the route
hello world
so if you want to learn more about how
GitHub works then you can check out this
tutorial on GitHub and if you want to
learn more about replit how it works and
you can check out this tutorial and
replied and similarly there is a
tutorial on flask as well that you can
check out we completed the first step
which was to create a project on GitHub
and then open up that project on
replit.com then we created and ran a
flask web server as you can see here
and finally we push those changes back
to GitHub so that we can share our
project with others
now we are going to start introducing
some HTML and CSS
so let’s start with that
now if we come back here to the files
tab
and create a folder called templates
so you can see here I’ve used the plus
add folder button and created a folder
called templates and inside this folder
I am going to add a file and I’m going
to call this file home.html
so this file is going to contain the
information that I want to show on the
page
that is being rendered here
right now we are simply showing the
information hello jogan but we probably
want to show something more than that we
probably want to show a nice web page
with some information some pictures some
jobs so all of that we will be putting
into this file home.html HTML is the
language that is used to create web
pages and you can check out any tutorial
on HTML so the one that I would
recommend is HTML dog.com it’s really
easy to get started and you can just go
in HTML dog.com and open up the get
started page and just create an HTML
page and it contains a whole bunch of
information on how to create HTML
documents but this is the most basic
structure of an HTML document you have
something called a doctype declaration
at the top so this tells the browser
what kind of a
document you are sending so if I type
doctype HTML when we send this HTML to
somebody’s browser we’re informing that
we are writing HTML code
and then you create what’s called a tag
so in HTML everything is constructed
using tags any website you see on the
internet is constructed using HTML tags
so here the root tag or the outermost
tag is called HTML and this is how you
create a tag you have a less than
and then you have the name of the tag
and then you have a greater than so this
is how you create the opening tag and
then similar to the opening tag there is
a closing tag and there is a slash at
the beginning here after the less than
symbol to indicate that this is the
closing tag so basically what we’re
saying is that within the HTML tag we
want to put some information so the root
of your document the outermost tag in
your document is always going to be the
HTML tag
now inside the HTML tag we generally put
two tags we put head
and we put body
so body is what you want to actually
show on the page
and head is some other information
typically this is what you want to show
in the title bar you can put that
information here if you want to include
any styling declarations or css we
generally put that in the head if you
want to include any external Javascript
libraries for interactivity we put that
in the head so the head is just
information that will be used to render
some things on the body the body is the
actual information that is going to get
rendered
so in the head typically one thing that
is commonly put inside the head is the
title and I’m going to call this Jovian
couriers and let’s just save that for
now and inside the body is where you
would put some information so here let
me just write
hello there
you’ll learn about
the job openings
at Jovian here
so let me save that as well so we’ve
created some HTML file inside a
templates folder but how do we use it
within the app to use a template we use
the render template function
from flask so from flask we import
render template and instead of returning
just a string hello world we say render
template
and then we give it the name of the
template so in this case the template is
called home.html so I’m just going to
pass in home.html and there you go now
inside home.html we are saying hello
there you learn about the job openings
at Jovian here and that’s what shows up
here and you can also open it up in a
new tab and check the same thing hello
there you’ll learn about job openings at
jobin here now not only that if you see
carefully here
you can see that now this says Jovian
career so we have also set the title of
this tab
apart from the title we can actually
also set this icon so just like you see
all these different icons here we can
actually also set these icons this is
called the fave icon fav icon and I’ll
let you figure that out how to change
the fav icon using a flask template so
let’s bring that back here now
so great we are making progress already
we are now starting to show some
information about what we want to
actually display on the site and we are
doing this using a template
now before we go further and try to just
code the site directly it might be
easier if we first figure out what
exactly we want to show on the page and
this is where you should put your laptop
away and maybe start working using pen
and paper and try to just draw out what
you want to display on the page before
you actually try to code it because if
you don’t have a clear picture of what
you want to show then writing the code
for it can get somewhat tricky so here
I’m going to use a virtual whiteboard
but please feel free to use pen and
paper to do this and here I’m just going
to draw a rectangle to represent the
browser and now I am going to just put
some information here inside which will
give me a guide for what I want to
actually show on the page so now let me
go here and select the typing tool
let’s give this page a title Jovian
careers and let’s make that a little
bigger we can also change the
color here so let me make that dark
so now here I’m going to have a title on
the page called Jovian couriers then I
am going to put an image on the page so
here there’s going to be just like a
banner image and I don’t know what I’m
going to put in this Banner image but
for now let me just draw some
Hills and let me draw
a tree
the idea is I just want to tell myself
that there’s going to be an image here
let me draw a river or something
and then there is going to be maybe some
information about shoving so I’m going
to type about Jovian here and I’m going
to make that a little bigger and I just
want to have a few lines of information
talking about jogan so I don’t want to
put any actual text here I’ll just put
lines to kind of roughly guide me that
this is going to be just some
information
and then below this I am going to show
some
job openings so let’s call this job
openings
and let’s bring that a little bigger so
maybe not this big but roughly about
this big
and this is called wireframing what
you’re doing here is you’re creating a
rough idea of what you want your site to
look like and we don’t want to get very
detailed in terms of colors and fonts
and all those things we just want to get
a rough idea
and then let us maybe list some job
openings let’s see what the job openings
will look like so maybe data analyst is
a job opening and maybe let me use a
lighter color here just to emphasize
that this is
a part of this section and then under a
job opening I may also want to maybe
include where this job opening is based
so let me call it Bengaluru
India
and let’s make that a little smaller
and maybe let’s also put an apply button
here next to the job opening
so now we have an apply button that we
want to show
and maybe right below the absorb opening
let’s also show a line a quick separator
and let me now take this
and duplicate this a few times to get a
list of job openings
so now we have a second job opening
again it’s all approximately correct it
doesn’t have to be 100 aligned and now
we have a third job opening and now we
have a fourth job opening
and that’s it and maybe right below the
last job opening let’s put a button
called contact us
and that’s actually not bad so let me
just change that to data scientist
let me change that to backend engineer
let me change that to front end
engineer and let me change this to
remote let me change this to San
Francisco
USA
let me change that to
Delhi India
we just spent four or five minutes
designing
this wireframe and all we’ve done here
is we’ve figured out what we want to
display on the page so we want to show
jobin careers we want to show a picture
we want to show about Jovian some
information about Joven we want to show
some job openings and for each job
opening the title the location and then
an apply button to apply for the job
opening
and a contact us button at the bottom in
case somebody wants to directly contact
us for whatever reason
so this is always a good idea whenever
you’re doing any form of web development
it’s always great to start with the
wireframe first and make it as quick and
dirty as possible so what I’ve done here
is I’ve actually created three
wireframes so this is the one page that
we have about Jovian open positions and
contact us
and along with this I’ve also created a
couple more wireframes if you click the
apply button then we will go to a job
Details page here we have the data
analyst job where we have the
responsibilities and the requirements of
the job and the salary information for
the job and below it we are going to
have an application form and in this
application form these are the fields
we’re going to have and this is what is
going to get submitted and after
submitting we are going to show this
page which says your application has
been submitted and you reach out with
the next steps now this is what you
should create to just brainstorm with
your team or just figure out if this is
what you want to work on if there are
any major changes required if we have
all the information or not
and then you can maybe try to either
convert it into a more detailed design
or you can start coding directly either
is fine but this is the information that
we want to get onto the page and we’ve
done that by creating a quick wireframe
so now keeping this wireframe next to us
let’s start creating the page
so the first thing we want to show here
is Joven careers
and we want to make this big we want to
make this really big how do we make it
big well that’s what HTML headers are
for now if we go back on HTML tutorial
here
you can see here that there are six
levels of headings available on HTML so
I’m just going to click on headings this
is part of the HTML beginner tutorial
and under headings you can see that this
is how you create a heading
you create a tag called H1 and then you
put some information inside it and then
you close the tag with a closing tag and
then you have H2 and you have H3 and so
on so let me just go back here and let
me just put an H1 here
and now as soon as I change this to H1
you can see that this becomes big
next we wanted to have an image let me
try and add an image here so how do we
add an image again we go back here we
check HTML tutorials how do we add
images
I’m going to click on image and it looks
like this is how you add an image so an
image is a self-closing tag because
there’s nothing that you put inside the
image tag you just give it a source so
here now we are seeing for the first
time something called an attribute apart
from a tag and something inside the tag
so for example here we have something
inside the H1 tag Joven careers
here we don’t have anything inside the
tag but we have this SRC information
here so let me just take that IMG SRC
actually let me just do that here IMG
SRC equals some information
and close that and SRC is going to
accept a URL so let me copy this URL and
let me comment paste that URL in here
and let’s run that
and you can see that this is not loading
up maybe there’s some issue maybe this
image does not exist but in any case we
don’t want to show this URL we want to
show some nice picture about career
growth about work and things like that
so one good place to find good images
for your websites is unsplash.com that’s
unsplash on splash.com
and on onsplash.com you can find royalty
free images which means that you don’t
need to buy these photos to use them you
can use them commercially and I’m just
going to search for career
and
this one looks nice this one looks
interesting so I’m just going to
download this picture here
and I’m gonna put this in here
and let’s also rename this let’s call
this banner.jpeg
and jpeg is simply the file format and
now we want to show this file banner.jpg
here
so where exactly is this file right now
this file is on our computer and our
computer is not accessible on the
internet so we need to take this file
and put it somewhere where it can be
accessed by our flask application and
that’s where there is this folder called
Static
so this should be outside templates not
inside
let me just move it out so I’ve created
this folder called Static and anything
that you put under the static folder
will be directly shared by flask
externally so if I just upload a file
here so I can click upload file
and I can select banner.jpeg and then
you can see banner.jpg got added here
but I want to move it inside static so
I’m going to move it inside static
and now flask will allow you to access
this file
using the URL
let me open this in a new tab so this is
the URL of the server this is where we
are rendering the route slash but if you
type slash static s t a t i c and then
you type the name of the file
banner.jpeg
you will see that we have this file here
right here so what I’ve done here is
simply
Jovian couriers
website.akashness.revel.com so this was
the main website that was getting
rendered I’ve just put slash static
slash banner.jpg and anything that was
inside the static folder will show up
here with the corresponding URL
so now I can take this URL
and let me go back here
and now I can put this here under SRC
okay and now you can see that as soon as
I put this in now this image file is
showing up here
now of course this image file is a bit
too large so on the image tag you can
also specify width and height so I’m
just going to specify
a height
now the height is measured in pixels
pixels are simply dots on the screen I’m
going to just roughly put it at 320
pixels or I’m just going to put 320 and
that’s going to automatically convert
that into pixels
and now you can see here this image has
been loaded
so now we have an image and now under
this image we want this information
about Joven so let’s get that in as well
so now we want a smaller heading so
let’s call that about Jovian
and now let’s add a paragraph of text
below it so here now we want some text
below it now whenever you are just
building out a site you don’t want to
have to type a lot of text and that’s
where there are text generators
available online so just search for text
generator
one thing that might help is to just
search for lorem ipsum text generator so
lorem ipsum is just a standard text that
is used often for a lot of websites so
here yeah you can just click how many
paragraphs you want and you can click
generate and it’s going to generate some
text for you so lorem ipsum.io is the
site that you want to go to
and here you can just copy all of this
code so this is just some text you can
use any text but I’m just using a text
generator which can generate any amount
of text I want and now I’m going to put
it in a P tag P stands for paragraph so
whenever you want to put some paragraph
of text you use the P tag and inside the
P tag I have put in lorem ipsum and now
we have jobin careers we have an image
we have about Joven so it’s shaping up
well and now below about Jovian we want
to have another section and now this
should be called
I believe job openings
or open positions so let’s use this one
open position so let’s just call this
open
positions
and then here we are going to again show
the jobs here so let’s mark this as a
to-do that’s something that we’ll
Implement later and then finally at the
very end of this we will have a button
called contact us so again I’m using the
button tag here so how do you know which
tag is the appropriate one to use that’s
where you should probably work through
an HTML tutorial so here on the HTML
tutorial you can see what are all the
different kind of things you can create
using HTML and what the different tags
are
so go to HTML dog.com or go to
w3schools.com but you’ve already learned
some of the most common tags H1 IMG H1
is header H2S header IMG is image p is
paragraph button is just button so now
we have Joven careers and then we have
about Jovian and then we have open
positions and then we have contact us so
the structure of the site is there but
of course it looks ugly it doesn’t
really look that great so so far we have
seen how to render templates and use
static assets so anything that you put
inside a static folder is typically
called an asset images Etc called assets
then we have seen how to create the
layout of the page using HTML tags and
now we are going to start styling the
page using something called CSS HTML
stands for hypertext markup language it
is simply the language used to create
web pages and CSS stands for cascading
style sheets it is used to provide some
style to our HTML pages so let’s start
adding some CSS now
how do you figure out what to do with
CSS the best way is to do a quick CSS
tutorial and you can work through the
beginner tutorial it should take maybe
an hour maybe a couple of hours but the
way CSS works is using something called
selectors so what we do is create
something called a style tag in our head
so in the head of the document we create
a style tag and in the style tag we need
to tell the browser how to apply a
certain color or a certain font or a
certain layout to a specific portion of
the HTML page one way to do it is by
simply specifying a tag you can say H1
and now you can open curly brackets or
braces so now we are telling the browser
anytime you see an H1 which means you
see this is an H1 it is highlighted here
so anytime you see an H1 apply these
styles to the H1 now we have made a
selection using a tag and now we are
going to apply some styles
every style you apply has two parts one
is what property you want to change so
if I come back here one thing I might
want to change is the font size this is
probably not big enough so I can say
font size so this is the property
and then what value do you want to set
this property to so you type the
property which is typically a hyphenated
word and you can look up the full list
of properties here so you can go back
into the HTML tutorial you can see what
all properties are available to apply to
fonts so you can say something called
font family which is like which font to
use font size which is how to set the
size font weight you can make bold
italics Etc font style Etc so which
property you want to change font size
and what do we want to change the font
size to let me try 80 pixels any
property that is the size of some form
is specified using pixels which is how
many dots on the screen it should take
up so let me change that to 80 pixels
and let’s save that
and now you can see that this has become
way too big so maybe not 80 maybe I want
to stick with 40 pixels
then let’s try to change the font family
so the font family is simply which font
you want to use so let me try a font
called Roboto okay and you can look up
interesting fonts online but I am going
to try Roboto and let me change that I
think this looks nicer this looks more
modern so that’s nice then I can change
the font weight so right now I believe
it is set to bold but if I change this
to normal it’ll become thinner
you can see that it has become thinner
in this way you can make a bunch of
changes and this is going to apply to
all H1 tags now in our page we only have
one H1 tag but let’s say if we had
another H1 tag here
maybe below the image
foreign
careers too it’s going to apply there as
well
so these are some text related things
then let’s say I want to change the
color so I can change the color as well
so you type color and then here you have
to specify a color using the RGB scale
or the red green blue scale every color
that you see on a screen is built using
red green and blue colors so you can
type RGB and then you can specify the
amount of red the amount of green and
the amount of blue to use so if I put 0
0 0
then here we are simply using black but
if I change this to maybe 100
now you can see that it starts to get
redder now the values go from 0 to 255
so 255 is the highest zero is the lowest
so now it’s complete red the R value is
255 then let me try green so 255
and now we have red and green and now it
has become yellow because red and green
together become yellow let me change
that to 0 and now this is completely
green you can see all these examples so
if you have equal values for red green
and blue then it’s a shade of gray
otherwise it is more mixed of a certain
color than others a 0 is darker 255 is
the brightest so I’m just going to pick
a medium gray so I’m going to pick
something like 180
180 and 180.
that looks nice to go darker you have to
go lower so let me make that hundred
hundred hundred
all right so now we have a nice gray
title and we also want to Center the
title so in the wireframe we drew we had
the title in the center but here the
title is somewhere in the corner so
let’s Center that and the simple way to
center that is to use text align
center now do you need to remember all
this no you can always just go how to
center align text in CSS
and find the result directly text align
Center and that is going to Center the
text view so now our text is centered
that’s nice then we have this image here
I want this image to run across the
entire page so let me set it up in such
a way that it runs across the entire
page so I’m going to go to this image
and this time I don’t want every image
to run across the entire page I just
want this one particular image to run
across the entire page to be completely
white so I’m going to give it an ID
okay so now we’re looking at the second
way to select something on the page and
apply a style to it and I’m going to
then type
hash Banner so whenever you have given
something an ID and you want to access
it in CSS
so you type the hash character or the
pound character and then type the ID
that you’ve given it and now this will
only apply to the tag which has the ID
Banner so ID is ideally something that
should be unique on the page only one
element on the page should have an ID
otherwise your browser may get confused
so now we select hash banner and that is
going to select the image banner and for
a moment I’m going to get rid of this
height because I’m going to set it using
CSS
and now I am going to first set its
width to 100 percent
let’s see that
okay so the width is 100 but that’s
probably too big now so now I’m going to
limit the height let me set the height
to 360 pixels or 360 dots and I’m just
following the same format here property
colon and some number and anytime you
have a doubt about this you just have to
look up some reference and figure it out
even after 15 plus years of web
development I look these things up all
the time
so now we have height set to 360 pixels
let’s
reload that so this is looking good but
you can see that the picture is
stretched a little bit and if this was
some photograph then it would look
really bad so then you can unstretch the
picture so there are ways to unstretch
the picture I’m just using something
that I looked up earlier called object
fit which is used to make sure that
instead of stretching the picture we
simply use the portion of the picture
that can fit inside the content so now
this was the original picture do
something great you can see here that it
was actually quite tall and now the same
thing is showing up here
so now this picture runs across the
screen so that’s nice now let’s go in
here and let’s change the H2 as well so
for the H2S
I’m going to use the font Roboto again
so font family
Roboto
then I’m going to use the font size
Let’s see we used 40 for H1 so let me
use 32 for H2
and then I am going to use the color
maybe let’s make this a little darker
let’s make this 50
50 and 50 and let’s make this
hundred hundred and hundred
and finally I am also going to text
align
Center
so my H2S you will see that there are
two H2S on the page both of them are
fixed and now I maybe also want to use
Font weight normal even
and that’s nice now finally we have this
paragraph tag so let me take this
paragraph and let me style that as well
again I’m just going to use Font family
Roboto for now all over my page I like
the Roboto font and I’m going to change
the color to RGB 8080
so now we have jobin careers do
something great about Jovian open
positions
it’s looking better looking better but
of course not looking very professional
I think one of the things here is that
this text is becoming really hard to
read because it is going from the left
to right so what we may want to put is
we may want to just limit the amount of
content to somewhere in the center for
example if you go to
zero to pandas.com one of our courses
you will see here that this is slightly
more readable because the content is
centered it is not expanding to take up
the entire space now how do we do that
the way to apply such layout related
changes is using special tags called div
so I’m going to take all of this and put
this in a div tag
I am going to put this in a div tag and
I am going to then
give that a little tap so that it’s
easier to see
and now for this div tag I can give it
an ID so let me give it an ID container
and then let me select the container
hash container
and now I want to limit the width of
this container and the way to limit
width is using something called Max
width again all you need to do is look
up how to limit the width of a div and
let me give it 720 pixels as the max
width
and let’s see
so now it is limited taking up less
space on the screen but I do not want it
to be on the left I want it to be
centered now the way centering is
achieved in CSS is by providing margins
and this is where we may want to learn
about something called the CSS Box model
so if you just look for CSS Box model
and look for an image
this is basically how a div or any
element in HTML is displayed on a page
you have the content and then around the
content you can specify something called
padding some space and then outside the
padding you can specify the border and
then outside the Border you can specify
more space called margin now don’t worry
if these terms don’t make sense yet but
the basic idea is anything inside the
border is the content and outside the
border is the margin so all of these are
just different ways of providing space
so let’s talk about margins and let us
try margin left
and let us give it a margin of 80 pixels
let’s see what happens
so if we give it a margin of 80 pixels
and I reload the page you can see that
now there is 80 pixels of space on the
left
still not centered maybe let me try
200 pixels maybe that will Center it
okay looks like it’s getting to the
center but not quite so I may experiment
and I may shift it left and right and
find the center but what if the screen
size changes now suddenly it’s off to
the left so this is where
we can use a trick instead of specifying
margin left we can specify just margin
and margin takes four arguments so
margin can take four values where for
the box that you want to apply this
margin to you can specify how much
margin you want on the top how much
space you want on the right how much
space you want on the bottom and on the
left so in my case I don’t need any
space on the top so I’m just going to
put 0 here
maybe I want 80 pixels on the left and
then I don’t want any space on the
bottom and then maybe I want 80 pixels
on the right
but ET on the left 80 on the right that
may not do the job how exactly do you
decide what 80 pixels is once it picks
80 pixels on the left there’s so much
gap on the right that 80 is not going to
do it so here’s something that you can
do in CSS something that you will do
very often is make the left and right
margin Auto
then the browser decides that it has to
give an automatic margin on both left
and right and suddenly it gives you an
equal margin
so whenever you want to Center something
on the page just use margin 0 Auto 0
Auto
or you can also just say zero or two and
it will take this value and apply to the
top and bottom and it will take this
value and apply to the left and right so
margin 0 Auto is a quick way to Center
something on a page
so this is definitely looking better
there is a contact us here at the bottom
let’s Center that as well so here’s what
I’m going to do I am going to just put
another div around this
and
what you need to do is you actually need
to apply text line Center on this
container and that is going to Center
the button here now just for this
creating an entire style declaration may
become too much work so what I’m going
to do is I’m going to apply the style
inline so this is another way of
applying CSS where you can apply Styles
inline on a page so I’m just going to
set style equals and I’m going to set
text align
Center and whenever you have just one or
two small properties to put you can
always just do that and now that has
centered the button on the page one way
of applying CSS is in the style tag in
the head and then in the style tag you
can select by
tag you can select by ID
and one other way of applying CSS is by
directly specifying a style and then the
property colon the value within the tag
itself as an attribute using the style
attribute
now I want to show you one last way of
specifying Styles which is not using
tags and not using IDs which is using
something called class now here we have
a bunch of paragraphs right we have this
paragraph here and then we have this
paragraph here and because we have
styled the P tag both of these
paragraphs got affected by the P tag but
let’s say we also had another paragraph
somewhere here at the bottom
saying
copyright
2022
Jovian
and we did not want to apply the same
style to this bottom tag as well maybe
we want the copyright 2022 Joven to be
small not big like this and maybe we
also don’t want it to be in the Roboto
font so how do we do that this p is
going to apply to all the paragraph tags
so here is what we can do we can go into
the paragraph tag and we can say class
and we can now give it a name
let’s call this class body text you can
call it anything you want the class name
doesn’t matter
and let’s call this also body text and
let’s not give this class to this third
P tag okay and now instead of styling
the P tag let us style the body text
class so now we want to say dot body
text and what this will do is any
element whether it’s a p a div whatever
any element that has the class body text
specified like this class body text is
going to get these Styles and any
element that does not have the class
body text is not going to get these
Styles so now if you see here this got
applied body text this got body text
but this did not get the styles that we
applied using the class
so that is the third way to apply CSS
Styles okay so now we have one way which
is to specify a tag name and then
specify properties and values then we
have another way which is to use an ID
and then we have Third Way which is to
use it class and the ID is specified
using hash the class is specified using
dot now remember ID ideally there should
only be one element with a particular ID
on the page because that’s what browsers
expect ID is identifier it is unique
class can be applied to many elements
that’s the difference between ID and
class
and another way to apply CSS is directly
using the style tag so with that now we
have done some basic styling so that’s
fine we have now styled the page using
CSS classes properties and values
now one thing I want to show you is how
to use a framework for faster
development instead of having to type
all the CSS manually for every website
that you build you can use pre-existing
set of styles that have been created by
some good designers because you may not
have great design skills I certainly
don’t as you can see
so you can use pre-designed Styles and
you can simply apply those styles to
your page by specifying classes so
here’s what I mean let me first save
this
so let me say added
HTML and CSS
okay and let me come back here and let
me get rid of all these styles
okay and I’m also going to remove this
one piece of style that I have here
and I’m going to
maybe also remove this body text for now
I’m just gonna make it
really basic just the HTML let’s get rid
of this as well
and now let me go online and search for
this Library called bootstrap
bootstrap CSS
so get bootstrap.com is the website
and on getbootstrap.com you will find
this Library the CSS framework which can
be used to apply Styles easily to any
website that you’re building so let’s
click read the docs and let’s see how to
get started
so first it says that you need to create
a project you need to have an HTML file
I think we have an HTML file already we
have the file home.html that we are
already working with and
here it says that you need to add these
couple of extra tags this is just some
information so that bootstrap works
properly we’re not using bootstrap yet
so let me copy these two meta tags and
pop these into the head
all right nothing has changed no change
so far as such
then it says include bootstrap CSS and
JS so here it says that we want to copy
this link tag here
and put it in the head
so for now I’m not going to include the
JS or the JavaScript because we’re not
doing any interactive work right now but
I’m going to copy the CSS so here
all we need to do is come and paste this
link tag
and this link tag is simply a way to add
a link to some other resource on the
internet inside your HTML page and what
are we linking to we are linking to the
CSS file and you can actually open up
the CSS file and see what it contains
you can see that it contains a whole
bunch of pre-configured styles for us so
if I zoom in here you can see it
contains like box Shadow Focus font
weight etc etc so we don’t need to worry
about what it contains but it contains a
set of pre-existing Styles and as soon
as we add this link tag and Save
all these pre-existing Styles get
applied to our page immediately so if I
reload here you can see that I already
automatically got some really nice
styles
now they still need some work but this
is looking pretty good
and now if you go here and check the
left side you’re going to find a lot of
utility classes the folks who built
bootstrap have already implemented a lot
of styles a lot of CSS and to apply
those Styles all we need to do is add
the appropriate classes into our HTML so
here’s what I mean let me show you an
example let me go into containers and it
says containers are a fundamental
building block of bootstrap they contain
and align your content within a given
device or viewport okay all that is nice
and here it says that there is a class
container so dot always means class
right so there is a class container
which sets a maximum width with proper
break points so let’s not worry about
all that let’s just do this let us copy
this class name container and let us
come to the outermost div here and let
us type class equals
container okay all I’m doing here is
just giving my outer div a class called
container and what has that done that is
now ensured
if I reload the page here
you’re going to see that that is now
centered my content on the page okay the
image is causing a problem so let me
just get rid of the image for a second
this is now centered my content on the
page you can see that automatically left
and right margins get added for the page
so that’s great and you can see that the
fonts have also changed fonts are also
looking nice text is looking nicer more
modern so that’s all nice the image was
causing a problem so let me add back
that image and let me see what I can do
about images let’s see here images so
images are made responsive by adding the
IMG fluid class so what if I just do
this if I just take this and give my
image a class
IMG fluid
okay and now this image is rendering
nicely now of course I may still want to
do some more styling on my own so under
the link tag I can still open up a style
tag
and let me give this image the ID Banner
so it already has the ID Banner
so let me now still limit its height to
360 pixels let me set its object fit
cover I may also want to send the width
so width
100 percent
yep the image is looking nice now I want
to Center this now how do we Center it
now let’s see here if I go back here and
maybe search for I can always do this
command K and let me just search Center
and let’s see text Center
or Center text
yep so looks like there is some text
alignment classes so if you want to
Center some text all we need to do is
provide the class text Center so if I
come back here and I just want to Center
this heading so I say class
text Center
and now that is Centered for us and
similarly for the
H2 as well I’m going to provide the
class text Center that’s going to Center
that
and let’s provide text Center
and that’s going to Center that
it’s looking nice I think one thing that
I also want to do is maybe make this
text a little bigger so let’s see
let’s go up here I think there is
another section on typography somewhere
we have content typography and here we
have headings and here we have
lead this this looks interesting I like
this so there seems to be a class called
lead that I can add to a paragraph
so I’m going to come into this paragraph
and I’m going to add the class
lead and that looks nice
you can see that this has become bigger
this is nice I may want to add some
spacing above this some margins so I can
again come in here and maybe press
command K margin margin and padding
so looks like there are these classes M1
M2 P1 P2 that can be used for applying
margins so Mt is used for applying a top
margin I can use a class number zero one
two three four or something like that 0
1 2 3 4 5 to apply some margins so I can
go in here into this H1 and I can say
class text Center and then give a space
and empty for margin top and give
spacing above
you see there is some space above and
similarly MB for margin bottom and give
some space below
maybe make that mb4
that’s nice and I’m going to do the same
thing here Mt margin top two so we are
applying a class mt2 to this H2 and
inside the bootstrap.css file there is a
rule that says whenever you see the
class mt2 apply a margin to the top and
M before apply margin to the bottom this
is the H2 let me apply it for this H2 as
well
all right this is already looking much
better let’s fix the button as well so
button
looks like there are these nice button
classes here let me see if I can find a
nice large button okay I want to make my
contact button look like this so I’m
just going to copy this button button
primary button large
and let me just put that class
on the contact button
and now the contact button is quite
large and I can now put the class text
Center here
and that’s nice now the copyright well
maybe we want to add some spacing about
the copyrights I’m going to type mt4
and that’s going to just give some space
above the copyright
all right so this is looking relatively
much nicer we haven’t added the jobs
here but that’s a quick introduction to
HTML CSS and how to use an external
framework like bootstrap for faster
development
now again you don’t need to remember any
of this all you need to do is go to
bootstrap look in the sidebar for what
you want to do and then simply look at
an example and copy over the styles from
that example that’s a very quick way to
build very powerful websites bootstrap
also a support for sidebars it also
supports for nav bars and all so what
we’ve done so far is we set up a flask
project we created a project on GitHub
we opened it up on replit all different
tools but they’re just there to make our
work easier we then created and ran a
flask server then we saw how to push
changes back to GitHub then we created a
template so remember we put it inside
the templates folder and then we
rendered the template in the app using
render template
then we styled the page using CSS
classes
and then we used bootstrap to make our
development faster so that we don’t have
to write a lot of CSS we don’t have to
become designers the bootstrap team can
take care of that for us
now let’s talk about how to show Dynamic
data on a web page
it may not be a good idea to just list
all the jobs directly in the HTML file
because every time we want to add a new
job we’ll have to go into the HTML file
and change something and every time we
have to remove a job we’ll have to go
into the HTML file and change something
and making changes directly inside an
HTML file can be tricky often what is
done is the data is stored somewhere
else in a database where administrators
can directly just create jobs within
that database and then information is
fetched from a database and entered into
an HTML file and then displayed on the
screen and sent to the browser so
we are not going to connect to a
database just yet but we are going to
simulate something similar so I’m going
to create a python list called jobs
inside which I’m going to store the
information about the jobs that I want
to keep track of and I’m going to give
each job an ID so I’m going to give this
job an id1 and let’s give the title of
this job data analyst
and let’s set the location of this job
to
Bengaluru India
and then let’s set the salary as well
let’s set that to maybe rupees 10 lakhs
and let’s create a few more of these so
let me copy this over
let me add a data scientist role here
and let’s change this to Delhi
that was 10 lakhs and that is 15 lakhs
and then let’s add another job maybe
let’s change the ID here as well
so this is the kind of information that
you would typically get out of a
database but for now we’re just storing
it in a variable so let’s maybe put this
and call this front-end engineer
and let’s make that remote
and let’s make that 12 and let’s put in
backend engineer
and let’s put in here
San Francisco USA
and that will be in dollars so let’s
just change that to Dollar 120
000.
so now we have information about the
jobs now we somehow want to send this
information into the home.html template
and the way to do it is by providing
arguments into render templates so let’s
provide an argument called jobs and you
can call these arguments anything you
want so let’s provide this jobs argument
and into this jobs argument let us pass
the value of this list of dictionaries
so now I can go in here in home.html and
now here we have this place where we
want to show the jobs
I can come back here and here now I can
use some special syntax now this is not
HTML this is not CSS this is something
that flask has provided it is called a
templating syntax it is a way to insert
Dynamic data into your HTML into your
CSS so I’m going to use these curly
brackets and here I’m going to put jobs
bracket bracket jobs
so you see what happened
whatever was there inside the jobs
list which was passed as the argument
jobs
is now accessible inside home.html using
these double curly brackets we’ve passed
the list and that list got converted
into a string and then all of that is
going to be showing here but instead if
you wanted to pass something else let’s
say if I go back here and I pass
company name maybe this site supports
multiple companies so company name
equals Jovian
and now instead of
me rendering Jovian careers first let me
just render careers
so it just renders careers but now
oops not here this is the page title we
want to get the yeah here instead of
rendering Jovian couriers in the H1 let
me first just render careers
and now let me add a template tag and
let me get company name
so remember I’m passing something called
company name in app.pi here so now I can
access company name by using these
double curly brackets and now it is
showing Jovian careers so this is the
way you pass Dynamic information into
the HTML templates and that is why these
are called templates these are not going
to always be shown the same way because
then we’d have to create a whole bunch
of files for every page that we want to
show these are going to be filled in
with a certain information using these
tags
so that’s how tags work now the trouble
is we don’t want to show information
like this if we look back at our
excalator wireframe we want to show
information like this this is much nicer
how do we do that well template support
some special syntax as well we can
actually use a for Loop inside template
so we can say for
job in jobs so we want to get each job
out of the jobs list remember jobs is a
list jobs is a list containing many
dictionaries or objects so for job in
jobs and then we end the for by writing
and for so everything else is going to
be inside
and by the way this is just a good
practice whenever you open a tag it’s
always a good idea to First close it and
then move your cursor back inside so
that you can keep track otherwise you
forget things so for job and job so now
job is going to contain each individual
job and let me just for nuance render
Insider div
let me render
and let me change this also to a div
this is not exactly a paragraph so to
speak so let me just render job now job
is a dictionary python dictionary and
from the job let me get what information
can I get let me just render job title
okay so job title
let’s see now
all right so now we’ve introduced a for
Loop using this special syntax and now
inside the for Loop we have access to
the job variable which in each Loop
takes the value of the specific job and
then we have this title that we are
extracting out of the job variable so
that’s nice now let’s style it a little
bit let’s make it look like this so let
me have this div here like I already
have and let me make this an H4
and then below it let me render the
information about
the job location
and let me just type the word location
here to make it super clear that I’m
talking about location
okay location Bengaluru India looking
good let me make this bold so one quick
way to make things bold in HTML is using
the B tag again something you can very
easily look up how to make text bold in
HTML
great looks nice I’m just going to set
style equals
color RGB
and 120 120 120
to give it a nice gray color
we may need some spacing right now the
spacing is a little messed up so I’m
going to go back into this H4 tag and
I am going to just give it margin bottom
4px let’s just see
and I am going to go into this div tag
and I’m going to give it
margin bottom
16px
I could also use bootstrap classes here
but this was just easier to do I’ve got
the location in here now let me put in
let’s put in maybe the salary as well so
let’s put salary
jobs salary
foreign
and there you go now we have the salary
as well
what if salary is not mentioned for a
certain role what happens then so let’s
say this one does not have a salary the
front-end engineer role
so looks like it rendered empty so how
about we go back here and handle that
just like you have four you can also use
if so I’m going to put an if tag here so
percent
if
percent
salary if the key salary
is present in the dictionary job
then render this div otherwise don’t
render it
and then we have to do an end if
so now you can see here front end
engineer just says location remote now
one thing you might want to do is this
same job information you may want to
render on other Pages as well so what we
can do is we can take this layout
everything inside the four and I can
create a new layout let me call this
job item dot HTML and I’ll just put this
here
and let me just adjust the
indentation indentation is very
important to understand the structure of
the code and now let’s come back to home
and now inside the for instead of having
all that HTML I can just use
include
job item dot HTML
so this is a nice way to organize the
information so you can see here that
inside home.html if I don’t have this
include
the jobs will not be rendered
no open positions but once I include
what we are telling flask is
inside the for Loop each time with the
different value of job include the
template job item.html and pass the
variables that are available in this
template to that template
now you can structure your templates you
can extract reusable components out of
your templates and render
a nice layout one other thing we want to
see here is
this apply button and then this bottom
border so let’s add those as well adding
the bottom border is going to be easy
I’m just going to try looking at
bootstrap here borders
so let’s see if you want to add a border
at the bottom we just say class border
bottom
so if I go here and inside job item.html
I can now pass in
class
border bottom and let’s see what that
does
okay so now you can see that under the
job there is a border I may want some
spacing so remember the Box model if you
want some spacing outside the Border you
use something called margin and if you
want some spacing inside the Border you
use something called padding it’s just
different terms don’t get too confused
about it something that you can look up
but I’m going to just put a padding
bottom because I want some space inside
the border and I’m going to set the
padding bottom to 4px
and let’s see what that does
oh sorry not here I should have it in
the div
all right so you can see that some space
has come up here let me change that to
8px and see maybe that looks nicer 8px
that looks nicer so let’s reload the
page and let’s see what we have here so
now we have data analyst and now we have
data scientist now we have front-end
engineer and back-end engineer and we
have a separation as well
one last thing we just need that apply
button over here let’s try to add a
button first let me go into command K
button
and let’s see this is too bright so I
want to use maybe something like this
and this looks like just
this so I can just copy this over come
in here and let me add that button here
let me call it apply
Now by default HTML renders information
top to bottom so you can see that the
button came up at the bottom here
but what we want to do ideally is we
want to create two columns inside each
job listing so one column is going to be
the information about the job and one
column is going to be the apply button
and that’s where you can create columns
in bootstrap so let’s see
how to create columns so we want to
create something like this we want to
create two columns and maybe we want to
create like one big column and one small
column and the way you create columns is
using the call class so looks like I can
use call 9 to create a very wide column
and then maybe I can use like call 3 or
something to create a small column let
me just try that so let me just put
all of this
inside a div everything except the
button I’m going to put inside a div
so the H4
then the div location and then the
salary all of this is inside a div and
I’m going to say class equals call
9 so this is going to take up nine
spaces out of 12. so bootstrap has
something called a 12 column layout so
the entire space left to right is
divided into 12 columns and you can
specify for each div how many columns
you wanted to take
and here let me call this
class
call three
nine columns I’m assigning to the
information and then three columns I’m
assigning to the button and we’ll play
with that let’s see what that does
okay it still doesn’t do anything I
think the columns have to be inside a
row so we need a div with the class row
so let me just give this the class Row
the outer div
and suddenly now it’s looking much nicer
so now we have data analyst location
Bengaluru
I’ve just copied over some information
from here how to create columns so first
we create a row and then we create two
columns within that row so if we first
we create a row and then we create two
columns within that Row one column has
the width nine and one column has a
width three and you can also play with
this you can maybe make this width 2 and
you can make this width 10 but if you go
beyond 12 it is just going to again
break into the next line
but this looks nice so now we have
this nice data analyst and then we have
apply and everything
and I think it’ll be nice to get the
apply maybe on the right instead of on
the left and also maybe vertically
centered but as of now it looks fine it
doesn’t look bad so now we have some
Dynamic data that we have rendered so we
have taken information that was stored
inside this list
we have passed it into the render
template as a variable and of course
we’ve also passed this other
variable company name
and then inside the home template we are
using a for Loop where we are getting
values out of the jobs variable into job
and then we are passing it into this
other template called job item.html
where we are actually using information
from inside the job item and here we are
also using an if it’s a lot going on
here but it’s all just things that you
can do step by step and then just look
at the appropriate documentation or just
search online to figure out how 90
percent of web development is probably
just looking things up online nobody
remembers all this from scratch
so that’s done
so that’s one way to return Dynamic data
one other way that some websites allow
you to access some Dynamic data is using
an API instead of returning HTML we can
also return some Json Json is simply
JavaScript objects so let me create
another function called list Jobs first
I’m going to register this at the route
slash jobs and I’m going to take the
jobs information I’m going to convert it
into a Json string so for that there is
this helper function called jsonify all
it does is it takes any object and
converts it into a Json object so
jsonify and give it jobs
and now we have a second route so now we
have a second URL that we have added in
our server so now if I go back here and
I open this in a new tab and then open
slash jobs if you see I’ve added slash
jobs at the end you can see that now
I’ve sent this information as Json
when people say rest API or Json API or
API endpoint this is what they mean that
your web server is returning some
information not just as HTML this is the
HTML version of that information but the
same information is also accessible in
the form of Json in the form where it’s
just the data and then you can do
whatever you want with the data so I’ll
tell you quick secret now you can go to
job AI slash akashians for example and
you can get this page containing all of
my information or you can go to jobin.ai
API
slash user slash Akash NS
and you can get the same information in
Json format so if you want to view
information about me you can look at the
Jovian page or if you want to just
programmatically extract the information
about me maybe you want to
programmatically extract information
about thousand users and you have their
usernames then you can simply invoke
this Json endpoint or this Json route
and get all that data as Json and maybe
create a CSV out of it and analyze it so
the only difference between creating an
HTML endpoint and between creating a
Json endpoint is that instead of
rendering a template you’re just using
jsonify and often just to differentiate
between HTML pages and non-html Pages we
often tend to put this API name in front
of it API stands for application
programming interface
but what it really means is just a URL
which does not return HTML to be shown
on the browser but it returns some
structured data in the form of Json
which can then be programmatically
analyzed so now we’ve created our first
API route we’ve created our HTML Rod
we’ve created our API route and this
information right now is stored in a
variable but it could very well be
coming from a database okay now enough
building I think this website is looking
reasonable so let’s now deploy this
website to the cloud
it is already deployed in some sense it
is on replit but as I mentioned in the
beginning replied is better suited for
development your Rebel can shut down
anytime because it’s free resources and
it doesn’t really handle large workloads
because it’s doing a lot of things to
help you develop more easily so now when
you want to put it into production you
will have to figure out some Cloud
platform where you’re going to deploy
this one Cloud platform that makes it
really easy to deploy python
applications is called render.com there
are other Cloud platforms like Amazon
web services and Heroku and Google cloud
and Azure but render is really easy to
work with so that’s why I want to show
you how to work with render.com
so first I’m going to take my app.pi and
I am going to then go into Version
Control
and I’m going to say
added Dynamic data
and API route
and then I’m going to commit and push
and now this information is sent back to
GitHub so now I’m no longer concerned
with replit now all my information has
gone into GitHub
so now jobin careers website if I open
up app.pi seems to contain all the
information that I have put in so far
now I want to take this GitHub project
and deploy it on render.com
and the way I’m going to do it is go to
render.com and create an account and
it’s free to get started there’s a free
plan that you can use so create an
account
and once you’ve created an account you
will see this dashboard and on this
dashboard you can click new and we want
to create what’s called a web service
which means we are not just sending some
HTML normally we’re maybe also
connecting to a database and getting
some Dynamic data Maybe we also have
some API routes and things like that so
we want to create a web service a static
site is just a set of HTML pages that
you want to deploy no flask nothing but
if you want to create a web service and
here we need to allow render.com to pull
your code so that’s where we can click
connect account and on clicking connect
account once again we are asked which
organization or which account we want to
use so I want to do it on my personal
account and I want to give it access to
only the German careers website and I’m
going to just click install
and this will ask me for my password
and now you can see this repository is
connected
so now let me click connect
now when we click connect we have to
just configure this deployment okay now
we are going to take the code that is
there on GitHub and we’re going to
deploy it on the cloud using render so
we need to configure it first thing here
I am going to give this a name let me
just call it Jovian careers website this
is a name for internal reference then
environment is Python 3 that’s fine
region is Oregon it doesn’t matter it’s
basically where in the world the server
is going to be located branch is main
that is the main branch on GitHub where
we are developing
and then it requires a build command so
remember we installed flask at the
beginning
render.com doesn’t know that it needs to
install flask so what we need to do for
render.com is to create a special file
called requirements.txt
and it’s not that render requires this
file it is a standard in the python
ecosystem that anytime you have a python
project and you want to specify that it
requires certain libraries the project
requires certain libraries it’s a
convention to put that information
inside a requirements.txt file so I’m
going to add a requirement here called
flask
so that’s the one library that needs to
be installed on the server and second I
am also going to add another Library
called G unicorn so gu and i c o r n you
can look it up G unicorn
so what GE unicorn does is this is a
production server for python remember
flask when we ran it it said that it is
a development server don’t use this for
production so whenever you want to put a
flask application into production you
need to use the G unicorn Library it’s
very simple to use it’s the exact same
command every single time so we have put
in requirements or txt flask and G
unicorn and let me just commit that so
let’s say I
added requirements
Dot txt and I’m going to commit and push
and now this is sent to my GitHub
repository I can verify that there is a
requirements.txt file here which
contains flask NG unicorn so now when
render pulls the code it is going to
receive the requirements.txt file and
then here it is going to run this build
command pip install minus r
requirements.txt all this does is it
papers the package manager for python it
is used to install libraries in Python
and when you say minus our
requirements.txt you’re just telling pip
look into the requirements.txt file and
in each line there will be the name of a
library and please install that library
for me so when render pulls the code
from GitHub every time something changes
in the repository render pulls the code
and then it’s going to run pip install
requirements.txt and that is going to
obviously come across these two lines
flask and G unicorn so then it’s going
to install those libraries and now to
start the server we are now going to use
G unicorn so gu and i c o r n g unicorn
the library when it is installed it also
adds a command called gionicon and this
command needs to be given the name of
the file that needs to be executed so
the file that needs to be executed is
app.pi so instead of doing python app.pi
we are just doing gionicon app.pi
development production python geonicon
that’s the only change
so G Unicorn app dot Pi but instead of
app.pi you just put app and then not
only that you also have to specify the
name of the actual variable which
contains the flask application that you
want to run now in my case the variable
is also called app but let’s say this
was called flask app then I would have
to put something different but we are
just going to put Geo Nikon app colon
app
now how did I find out all this how did
I find that this needs to be the build
command and this needs to be the start
command I just Googled render.com deploy
flask application it’s not something
that I’ve ever learned before this is
something that I looked up just a few
hours ago and there is a tutorial on
this and it literally tells you exactly
this that there is a Hello World project
that you can check out on GitHub and you
can go through this app.pi file here and
you can see this is what app.fi is set
up as and then you create a web service
on render after signing in and you
should set the environment to python you
should set the build Command Web install
requirements.txt and you should set the
start command to G Unicorn app colon app
so that’s literally what I looked up and
you can see here there is a
requirements.txt file which contains
flask in G unicorn
all of these things are not things that
you have to learn or become familiar
with or anything it’s just when you need
to connect to a specific platform you
need to look up how to do it and that is
often in the documentation if you are
deploying to a platform called Heroku
then this would be slightly different if
you are deploying to a platform like AWS
this would be slightly different all
that matters is figuring out how to make
it work so now we’ve put in all this
information and now we can go in here
and select a plan you can choose the fee
plan I’m choosing the paid one because
it’s going to build slightly faster and
now it is going to create a deployment
of this application you can see that the
application has become visible on
jobiancareers website Dot onrender.com
and it is first cloning the GitHub
repository and then it is checking out
the main branch so it’s basically
getting the latest code then it is
telling you that it’s using a certain
version of python now it’s installing a
bunch of libraries you can see here it
said pip install
requirements.txt so it’s done after all
the installation is done it’s is going
to upload and deploy it so now it’s
doing a deployment and once it is
deployed which means once it is set up
on a server and that server is pointed
to this URL we will be able to access it
and how is it going to run that actual
server it’s going to run the server by
using gionicon App colon app
create looks like it has started so now
I can go up here and I can open this and
I can go in a new tab
and there it is this is the jobin
careers website deployed on render.com
but what I don’t like is that it’s on
this Jovian couriers website dot
onrender.com I want my own site
jovincareers.com or something so we’ll
talk about that in just a second but
what I want to show you now is how easy
it is to change things now you can come
back here and let me maybe change some
information here from backend engineer
let me change this to 150 000 maybe also
let me go into the home.html file
templatehome.html and here maybe let me
change
instead of open positions let me call
this job openings
and let me just
go to Version Control and let me say
made some changes
and let me just commit and push
and now those changes are going to come
up here
if I just reload again it says made some
changes 10 seconds ago and now if I come
back here and I go into
the website again
you see that it has started a new
deployment so every time you push to the
main branch render will automatically
take that and try to deploy it and if
the deploy fails it will continue to use
the previous deploy if the deploy
succeeds then the site will get replaced
now suppose for some reason this does
not get triggered you can just click
manual deploy and deploy latest commit
and that is going to take the latest
code and that is going to deploy it so
this way you can just work on replit and
test your changes on the test server
then use Version Control to push your
changes to git and render will pick up
those latest changes and automatically
deploy them see how easy it is to update
your website
so now we’ve seen how to set up
automated deployment each time
something changes so I believe we change
this to job openings and you can see it
has already changed to job openings here
now let’s learn how to deploy it to a
nice website like jobin careers.com
now this is where you will need to buy a
domain this part is not free
unfortunately because you need to buy a
domain so you can go to
domains.google.com
and on domains.google.com you can
actually click get a new domain and I
can search for example jovincareers.com
and looks like it is available and it is
rupees 860 per year so I can actually go
ahead and buy it so I can click this
button add my payment information and
buy it and so on
I’ve already bought another one called
jovencareers.xyz and once I have bought
it I can configure it to
display this website how do I do it
again every platform every deployment
platform will have its own way of doing
it but on render.com if I go into the
project settings here
and on the project settings just find
the place where it talks about domains
so looks like custom domains and you can
point a custom domain to this app so I
want to point Jovian careers.xyz
let’s save that
and now once you add the domain jobin
careers.xyz then it will ask you to
update a DNS record don’t need to worry
about what exactly this means you just
have to follow some instructions here so
it says add a cname record for www
pointing to this and add a
a name record pointing to this so I’m
just going to copy this thing and I’m
going to go here into my Google domain
I’m going to click manage
and I am going to click on DNS and I am
going to add a record right that’s what
it said add a DNS record
so I need to add a cname record for www
so I’m going to select record type
cname and www
and then I am going to put the value
Jovian careers website dot onrender.com
here and I click save
so that’s one let’s add one more looks
like I need to add one more record
so now I need to add another record and
this time it needs to be an a name or
Alias record let’s see if we have a name
or Alias okay there’s no a name there’s
no alias
then it says that okay do not have a
name or release then use an a record so
now I need to create an a record so I’ll
just go here I’ll create a it’s just
already pointing to jovencareers.xyz so
I don’t need to put anything here
because that’s going to just create a
subdomain and then it needs an address
so I need to copy this address and I
need to paste this address here
and then I click save
and that’s it so now what we have done
is we’ve bought the domain and in the
domain we have configured the DNS which
is simply something called domain name
server setting which means if somebody
in the world tries to access the domain
which location should they actually be
going to a domain is simply a
redirection to some actual location and
what you said is that if somebody tries
to access joviancareers.xyz they should
actually be shown the information that
comes from this page
render.com
so let’s see looks like it has been
verified and now if I go to Joven
careers
dot x y z
you can see that the site that we have
just created in the last couple of hours
is now live on jovincareers.xyz
and every time we make a change on
replit
let me change that back to
open positions here
and then we just push that to get
open positions
commit and push
render is going to pick up the latest
version and it is going to then deploy
that latest version and that latest
version is going to be available on
jovencareers.xyz
and this is something that you can do
right now today with your own site that
you want to do so now we have just
completed
rendering Dynamic data creating an API
route
deploying the project to render.com and
connecting a domain with a render
deployment now we’re going to very
quickly make some functional and
aesthetic improvements to this site so
that it can actually be used as a jovian
career site so the first thing I’m going
to do is add a nav bar in footer from
bootstrap most websites like this one or
like Jovian have a navbar even
getbootstrap.com itself also has a nav
bar Google has an app bar so how about
we add a nav bar first
so that it looks more like a real
website now to get an app bar I’m going
to go into bootstrap examples and you
can see here there is an example
of headers
and I can maybe pick one of these
the way to do this is I just click
download examples and that’s going to
download that for me and I have it
downloaded already
and out of those I am interested in the
headers example so the navbars example
and let me just open up
vs code
and here under headers maybe let’s add
I like this one so maybe let’s get this
one so this is number one two three four
five number five
so let’s see here
this is the first one
this is the second one this is the third
one this is the fourth one this is the
fifth one
so I’m just gonna copy this and I’m
going to come back here I am going to
put it into a file called nav.html
and I’m going to just paste it here
and I’m just going to come into
home.html and right at the very top here
right after the body starts I’m going to
say
include nav.html
and there it is you can see here that
this nav is there now this nav is set up
in such a way that on mobile it renders
differently and on desktop it renders
differently so if I just open it up here
you can see that here it has rendered
differently
maybe let’s pick a slightly simpler map
now that you know how to use an app I’m
going to just go into the docs here and
I’m going to search for navbar
and I’m going to pick a slightly simpler
navbar which doesn’t have these special
qualities just very light very simple
come back here and nav.html
that’s it and let me just change this to
Jovian
and looks like it’s using a image as
well so I’ll just grab that image
this is the image it’s using I’m just
going to save this image as logo.svg
and I’m going to come back here into
static and I’m going to upload this
image here
and instead of this SRC I’m just going
to change this to slash static slash
logo.svg
and there you go now we have that let’s
also maybe just like we have on Jovian
we have a white nav bar with a small
Shadow how do we get a shadow let’s
search for shadow
thank you
Shadow SM let’s just grab that
I’m just going to come in here and I’m
going to add Shadow SM
Ile so now you see a nice shadow below
the nav bar
let me reload that
okay that’s nice now the nav bar doesn’t
stay stuck the nav bar you can see it
moves away so I’m just gonna add
something called fixed top
but now the trouble is that this
information shifts up and also it looks
like it’s showing up behind the nav bar
so I’ll also give it a background
so BG white I’m going to give a solid
white background to the nav bar
and now you can see here that content
goes behind the nav bar all right not
bad but I can’t see the title here so to
fix that we can just come in here into
the nav and right below the nav because
it is fixed it is kind of popping out of
the page so that’s why it doesn’t have
anything behind it so we can just put a
div and let’s give it a height let’s
look up the navbar height
I believe it should be about
56 pixels so let’s go into this this is
a nav bar you can see the height 40 plus
8 plus 856 so the nav bar is kind of
popping out of the page but we need to
put an element behind it at the top of
the page to compensate for it popping
out so I’m just going to put height 56
pixels and now you can see that suddenly
this is now showing up below because of
this display great looking nice let’s
add a footer as well let me go back into
these examples here let me check footer
yeah there it is photos let’s open up
index.html let me grab maybe this footer
this footer looks nice so this is footer
number three so I’m just going to open
this up in vs code
and photo number three so that’s photo
number one
foot number
two foot number three
I think this is it
go back create a file
footer.html
paste that in here that’s our footer I
think here it says Company Incorporated
let me just change that to Jovian
and there are a bunch of links here
which don’t point to anything yet but we
can fix that later and let me just go
into home and here at the bottom
somewhere let’s add
footer
and there you go now you see here
copyright 2022 I think maybe I didn’t
copy the whole thing there may be
something we need to change here maybe
let me try this one
I think this is the one
yeah there we go now we have this nice
Footers now we can go back into
home.html and we can get rid of this
copyright 2022 part here
great
so
all good so far we have a footer and
then we have a nav bar this image here
it’s it feels a little weird because
it’s cut off on the left and right so
let me come back here and let me go into
home.html let me take this image and let
me move it out of the container so I’m
just going to move this image out and
this happens all the time where when you
see something implemented it doesn’t
seem as nice and you may want to just
change it so let me move that out and
let me get rid of this about Joven and
let’s see what happens now
this is much nicer so now we have the
snap bar now we have this image that
goes under it of course we may want some
padding below it so we may say margin
bottom
16 pixels and there we go
okay so this is nice but I would like to
have maybe an image here on the right
just to Showcase how nice it is to work
at jobin so I’m going to go back to
onesplash.com
and let me just search for people
working
so obviously these will not be Joven
employees but let’s get them in here
let’s just call this people and let’s go
back into templates let us go into
static
add that in there and let me add this
image here
lead I’m going to put a div around it
and put a div around that
I am going to add the image here below
this IMG SRC equals
static
slash people.jpeg
and let’s set a height for it
height
320px
now here I’m going to apply a
class row and then here I’m going to
apply
call six
and then here I’m going to apply call 6
as well
let’s see what that does
so now we have this nice image on the
left I can even give this a nice border
so
let me say
border
radius 4px
and now we have a nice border here
I think we may want to give some
margin below the image so
style equals margin bottom
16px
okay that’s nice now this is looking
nice on desktop but I think on mobile we
probably may not want this image it’s a
little messy so what you can do is you
can do a couple of things you can say
you want this to be six
only on medium devices and bigger so
that’s where you can say call md6 and
here you can say that you want this to
not be displayed d none and DMD
block so basically you don’t want it to
be displayed on mobile and you want it
to be displayed only on medium screen so
now you can see Jovian careers here
is just showing the text and not showing
the image and showing open positions
and here jobin careers is also showing
the image
but the apply buttons don’t quite work
right now and unfortunately they cannot
work right now because we have not
implemented the second page but we can
do a quick trick here so what we can do
is clicking on the apply button can
actually just open an email address to
somebody from the Joven team and maybe
the email can already have a
pre-populated subject so here instead of
using a button we can change this to an
anchor tag so that’s again something you
will learn when you look at HTML in a
little more detail so now we’ve not made
any change yet but now we can do this we
can point this to some URL so let me
just point this to google.com to show
you
and now when I click on this it’s going
to open google.com you see so the a tag
is used to create links in HTML and the
target of the link is simply specified
using the href attribute of the a tag so
you are probably aware of links like
https and HTTP that open in the browser
but there’s a special type of Link
called mail2
so if you search for mail to links what
they do is they open your email program
so you can actually do this mail to this
and you can also in fact include a
subject here and you can in fact not
only include a subject you can include a
body and a lot of other things so let me
just do this mail to
AI
question mark subject equals
application
for
and let me get the job name here
so job
title
let me just do that and now when I click
on this link
it’s going to now open a mail
application and it’s going to type this
mail to hello Joe Windows AI application
for data analyst and it’s going to be
sent from your email and whatever mail
application you have configured on your
phone or on your desktop or whatever so
if I go in here there is a
tool here called mail2link dot me and if
I just change this to hello at jovian.ai
and application for XXX and body my name
and here you can just ask the person to
put the name
and my
resume link
resume link
and my LinkedIn link
LinkedIn link so here we can go and
construct a mail to URL so I’m just
going to copy this mail to URL I’m going
to come back here I’m going to paste
this mail to URL here
in the href
okay and all I’m going to change here is
application for instead of XXX I’m going
to change this to
application for job
title
and now let’s try that
and now it opens mail and you can see
here that it has created a sort of form
that somebody who wants to apply can
simply fill out and send the mail and we
will get an email
and we can do the same thing for contact
so let’s go into contact as well let’s
construct
question about job openings
and let’s just put
my question
enter question here and let’s just copy
that
and I’m going to go back into the code
into home I’m going to go into the
contact button change that from a button
to link all that we need to change is
just change the tag
and we type href equals such and such
and now our contact button is going to
work as well
so there you go my name my question and
that’s it so now we have a fully working
site now we can of course fix these
links as well so we can go in here into
our footer.html
and we can fix the links that we’re
looking at so home we can point to
jovian.ai
and let me change this to courses
and let’s change that to
show windowed AI slash learn
let’s change
let’s call this events
and let’s send that to jiovin.ai slash
events and by the way if you want a link
to open on a new tab you provide a
Target attribute underscore blank and
that’s going to open it in a new tab
again something that you can easily look
up if you just search how to open a link
in a new tab
okay HTML is all about just constantly
looking things up and let’s fix this
also to
show Windows AI slash about
and there you go so now we have almost a
fully working site we can probably add a
couple of links here the same links that
are there in the footer but if I click
on home it opens the job inside if I
click on courses it opens the job in
courses if I click on events it opens up
events
and contact us opens email
apply opens email it mentions the name
of the role that you’re applying to so
if I click on backend engineer you can
see here it puts application for backend
engineer if I put front-end engineer it
puts application for front-end engineer
and so on
so there we just added mail to links and
we’ve already been using proper files to
organize our templates because now we
can reuse footer nav and job item on
other Pages as well and it’s also just
easier to read the code when it is in
multiple files so we’ve done some
refactoring as well
so that’s it we just created a
functioning site let me just save this
so let’s just call this
functional
and
aesthetic
improvements
and let’s commit and push that and by
the time we’re done recapping it should
be deployed so what did we do today we
started out by setting up a project on
GitHub we then opened up that project on
triplet for development we then created
and ran a flask web server by installing
flask and creating a flask cap and
registering a route we then push those
changes back to GitHub
then we learned how to create templates
using the templates folder and in the
templates folder we put an HTML file and
then we rendered it using render
template inside app.pi
that’s all we did and then we added HTML
tags inside it
to create the structure of the page and
how did we come up with the structure of
the page we created it on excalator.com
so we created it using a simple
wireframing tool you could do it on pen
and paper as well
and then we styled the page using CSS
classes but of course our design skills
are fairly limited so that’s where we
use the bootstrap framework for faster
development and bootstrap simply offers
a whole bunch of helper classes and
utilities and even example code to
create the kind of layouts that you want
to create
then we saw how to render Dynamic data
using the templating syntax we took some
information about jobs from a list of
dictionaries and we rendered it
using a for Loop in the home.html file
we also learned how to organize our
templates better using the include
keyword so here we have job item dot
HTML which is used inside home.html
then we deployed that project to
render.com you can see here we deployed
it all the deployments are visible here
looks like a deployment just went live
and then finally we also connected a
domain so you can buy a domain on
google.com and all we had to do was put
in a couple of DNS records and now on
Jovian careers dot XYZ
we have our careers website Jovian do
something great show in careers I should
probably replace this with some
information about the company replace
this with maybe an actual photo open
positions so it would be nice if there
was a form here and all and maybe we’ll
do that next time but right now it works
I can actually share this website and
people can click apply it’ll send an
email to hello jobin.ai and they can
also contact us and they can use all of
these links
so we added the nav bar in footer we
added a bunch of mail to Links we made
the website mobile friendly you can
actually right click inside your Chrome
browser and pull these developer tools
to the site and then click this mobile
button and voila you’re looking at your
website on mobile
so there you go on mobile this is what
the website looks like
not too bad it is usable maybe there is
some spacing left and right that we can
fix but largely it looks fine so I guess
I can share this link over WhatsApp or
wherever and people can start applying
so in just a couple of hours from
concept to execution to deployment to
styling we’ve built a careers website
for Jovian something that we actually
plan to use now
we did not go deep into any one area
because this was sort of a walk through
now what you should try and do is try to
replicate this on your own maybe create
a personal website and maybe list your
projects there and also in that process
you may want to then go deeper into some
of these tutorials explore the HTML
tutorial explore the CSS tutorial
explore the bootstrap documentation the
more time you spend with it the more you
try things the better you’re going to
get at it and that’s all that we have
for today now what are some ways in
which we can improve this we can create
a page to show the details about the job
for example requirements
responsibilities
Etc
we can also add a form within the same
detail space to submit an application
instead of sending an email and then we
can store the information about the jobs
and the applications in a cloud database
so that this is fetched not from some
object or some python list but it is
fetched from a database and that
database can then be updated and then
the data from that database can be
downloaded so we can have information
about all the applications in a single
place
and finally when somebody fills an
application form we can also send an
automated email confirmation to a
candidate and to a jovian admin after
the application and then we can also
create a login interface now now that
people can submit applications maybe we
need an admin interface where we can log
in and view the submitted applications
maybe accept or reject applications and
maybe we also create a login application
for people to view the status of their
job
what you’re looking at here
is actually not too far from
dsmlbootcamp.com
and you can see this is exactly what
we’ve slowly built upon with more
functionality connecting a database
connecting login and adding forms and
such things but this is all there is to
web development you just figure out what
you need to build then you find the
smallest possible implementation of it
that you can ship as soon as possible
ideally within a few hours or within a
day or within a week you build it you
ship it then you identify what you can
improve and then you pick up each task
and then you keep implementing it and
shipping it and that’s all we do as web
Developers
I hope you’ve learned enough to try and
build your own website and you can dig
deeper in the areas that you need to
the topic for today is database driven
web applications today we are building
on top of the previous tutorial on web
development with python where we explore
the basics of web development with
python and created a jovian careers
website listing the job openings at
Jovian this is what the output of the
previous lesson looked like we have a
header here with a company name and then
we have a banner image then we have some
information about the company an image
showing some people working and then a
list of open positions with each
position containing the title the
location and the salary for that
position there is also an apply button
for each position and clicking on apply
opens up your default email client and
asks you to fill out some information
over email so that was a quick and easy
way for us to collect applications over
email
then we also have this contact us button
clicking on it again opens up the email
and fills in a different subject and
body depending on which of these buttons
are clicked then we also have a footer
here which links to the jobin home page
courses events and other information so
this was what we worked on the last time
and we did this using the flask HTML
framework we also learned how to use
HTML and CSS to build out the page and
we saw how to use the bootstrap
framework to quickly build a good
looking page we also saw how to deploy
the website to the cloud using the
platform render.com and attach a custom
domain in this case it was
jobiancareers.xyz so today we’re going
to build on top of this and we are going
to incorporate databases which form the
backbone of most modern web applications
including Jovian so we will look at how
to connect a flask web application to a
MySQL Cloud database we we will then
learn how to create Dynamic Pages by
pulling information from the database we
will also see how to add entries to the
database using data from form
submissions for examples applications
made to a job will be stored back into
the database and finally we will deploy
a production ready database driven web
application to the cloud
now the prerequisites for today’s
tutorial are python flask HTML and CSS
flask HTML CSS were covered in the
previous tutorial so if you haven’t seen
that you should check that out but since
we are going to be working with
databases and relational databases in
particular you will also need to know
some amount of SQL or SQL just enough to
create tables get data out of tables and
put data into tables
and here are the topics we’re going to
look at today we’re going to look at
Cloud databases using the planet scale
platform we are going to use the SQL
Alchemy library to connect with Cloud
databases we are going to create HTML
lists and forms so we’re going to go
deeper into using HTML to create
interactive Rich web pages and we’re
going to see how to create Dynamic web
pages and we’ll also talk a little bit
about how to prevent spam on forms that
are published online
so the first step is to set up the
project and the cloud database now here
is a project that we worked on the last
time the starter project code it is
available here on this URL github.com
Akash NS slash Jovian careers website
now we don’t want to disturb this code
since it’s already used for the previous
tutorial we want to create a new GitHub
repository but we want to use this code
as the starting point so for that let’s
first go to github.com github.com is the
platform where developers around the
world create and share projects in the
form of git repositories so I’m going to
go to github.com and I’m signed in here
already and you may have to sign in if
you haven’t done that already and click
on new and I am going to create a
repository under my username and I’m
going to call it
Jovian
careers website V2
and I’m going to leave out the
description here I’m going to make it
public I am going to not initialize the
repository this time I’m going to leave
it blank so I’m not going to add a
readme file I am not going to add git
ignore and I’m not going to choose a
license I am just going to create the
repository so let me click create
repository and now because we have not
added any data or any files into the
repository yet even while setting it up
we can now incorporate the changes from
an existing repository into this
repository so there are many ways to do
this but I am interested in The Last One
Import code from another repository so
I’ve just created a new project jobin
careers website V2 and I’m going to take
the URL of the GitHub repository which
contains the code that we completed in
the previous tutorial
and I’m going to click import code and
I’m going to enter the URL of the old
Repository
and now GitHub is going to pull all the
code from the old repository Jovian
Courier’s website into the new
repository Jovian careers website V2 so
now we have created a new repository
with an exact copy of an older
repository and you can do this for any
public repository that you find on the
internet you can copy its URL and you
can pull that code into your own git
repository using the import function
let’s give that a second to run and
while that is running let’s talk about
what we are going to look at today
so first we are going to copy the GitHub
project we are going to once again open
it up on replit and deploy it to render
then we are going to set up a cloud
mySQL database on a platform called
Planet scale then we’re going to create
a table a jobs table and add data to it
using the MySQL workbench and don’t
worry these terms make don’t make sense
we are going to cover those and finally
we are going to connect to the database
from our GitHub from our project within
replit using the SQL Alchemy Library
then we are going to create some
database driven Dynamic pages to display
the list of jobs that are present in the
cloud database then we are going to
improve the layout styling and
navigation of the pages using bootstrap
and finally we’re going to push the
updated code to GitHub and deploy it
again with the dynamic pages
next we’re going to look at how to store
the submitted applications in the
database and finally we are going to
make some functional and aesthetic
improvements to our application
all right well this doesn’t seem to be
working at the moment and this happens
sometimes this particular functionality
on GitHub could be down so we’re going
to try an alternative because the
automated import is not exact working
so we’re going to follow a different
approach here since the import did not
work
so I’ve just downloaded the original
code here from Joven Courier’s website
as a zip file
and I have opened up that zip file on my
desktop so now you can see this folder
Joven Courier’s website Main
I’m going to change its name to Jovian
Courier’s website
V2
and then let’s enter Joven Courier’s
website V2
and now we can follow the instructions
here to create a new repository so first
I’m going to initialize a new repository
using git init and now a new repository
has been initialized then I’m going to
add everything that is present here
using get add Dot
then I am going to commit
git commit minus M initial commit
and then finally I am going to add a
remote here so I’m going to do git
remote add origin
and I have added this origin here
and then I’m going to push
and now this is pushed
okay so this is the other approach what
we try to do here was we try to click
import and after clicking import we
simply put in the URL but that sometimes
it works sometimes it doesn’t so what we
did instead was we went to the original
Repository and we downloaded a zip file
and then we opened up the zip file and
we followed the instructions to push
this code to the careers website V2
repository okay don’t worry about the
specifics here generally the import
command should work for you in this case
it just did not unfortunately now we
have Joven Courier’s website V2 and this
contains all the code that we had
created the last time the main code was
in app.pi where we created a flask
application and then we had a list of
jobs and then we had a route here which
rendered on the home page the
templatehome.html with the data jobs and
the company name Joven and what was the
home.html template well we can see here
inside templates and inside home.html
that this contained some downloading or
including the bootstrap framework and
then it contained some other layouts
like the navigation bar and then the
Jovian careers title and then some
information and followed by some list of
jobs which is exactly what we see Joven
careers
dot XYZ all right so we have exactly the
code that we ended up with the last time
now we want to open up this code on the
platform replit so replit is the
platform for developing code online and
we can now import this new repository
into replit by logging into replit and
then either you might have to connect
your GitHub if you’re not if you haven’t
already connected it or if you’ve
connected it then you may be able to
access it directly depending on the
permission you’ve given I’ve only given
it permission to specific repositories
so I’m going to click on see all your
repos
and now here I am going to try and find
the repository here but I have only
currently given replied permission to
access one repository so I wanted to
access another repository as well so let
me just
click on see all your repos here and
click this button here manage the git
repos GitHub repositories replit can
import so let’s click on manage the git
repositories replit can import
now here we can then click configure to
configure which repositories replit can
import and I’m going to scroll down here
and looks like currently it only has
access to the Jovian careers website but
I’m going to click this drop down and
search for Jovian
careers website V2
and I’m going to click save
and now
all we have done is we have upgraded
replitz permission
from just accessing one repository to
now accessing two repositories okay and
now
we can click akashina slash Jovian
couriers website V2 and now we can
import this from GitHub and create a new
replit project
so now
the replit project is created using
jobin careers website V2 the repository
and we can make changes here and push
them back to GitHub
now the good part here is because we are
starting from an existing project
everything is set up for us already so
we don’t need to do a lot of setup you
can see we have a DOT triplet file which
has the language and the Run command
already set up for us and if I enable
hidden files here you will be able to
see the config file you can see we have
our requirements.txt and some other
files containing the list of libraries
required
of course we have the app itself and now
if we click run we should now have in
our development mode the exact same site
that we had completed in the last
tutorial so let’s give that a second to
run but we have now been able to
copy the GitHub project and open it up
on triplet
now another thing we can do is we can
take this project and deploy it to
render.com
so let’s go to render.com now I’m going
to open render.com which is the platform
where we perform the deployment the last
time and let’s go into the dashboard
and now in the dashboard this is my old
careers website so now I’m going to
click new I’m going to select web
service
and once again I have only given it
permission to access certain
repositories on GitHub so here I might
once again want to configure the GitHub
access for render.com so I’ll click
configure account
I will go into the configuration here
and give it access to the other
repository which is
Jovian
careers website V2 and click save
and now I should be able to access Joven
Courier’s website V2 so let me connect
it with this new render project that I’m
creating
and let’s call it
Jovian
careers website V2
and all of this should largely be fine I
can probably make it southeast Asia so
that things load a little faster
the branch main is fine the PIP install
requirements for txt is fine I may just
need to do gu Nikon
app colon app so remember G unicorn is
used to run a flask application in
production and we have to give it the
name of the file which is app without
the dot pi and we have to give it the
name of the flask application the
variable which contains the flask
application which is also app
and I’m going to select the startup plan
but you can also deploy it on free
starter will just deploy a little faster
and let’s create that web service
so now this is going to take the code
from
the same GitHub repository that we have
just created and it is going to create a
deployment that is going to be visible
at this location Joven careers website
v2.onrender.com
however I want to put it on a domain so
I am going to go into settings once
again and under settings I am going to
put in a custom domain
so this is something that we did the
last time as well so we’re just
repeating it right now so this time I’m
going to put it on jovincareers.com so
I’ve bought a new domain
jovincareers.com I’m going to put it
there
and now
because
jovincareers.com is hosted on Google
domains we need to configure jobin
careers.com and point it to this render
site jovencareers website v2.on
render.com so let’s go to
domains.google.com that’s where I have
registered my domain
so now here I am on my domains on Google
Dot domains.google.com and let me click
manage
and now here I am going to go into the
DNS settings so
this is simply what you have to do to
connect any website with a custom domain
so let’s
copy this information so it looks like
for jovencareers.com we need to add an a
name or Alias record
so here I’m going to see manage custom
records I am going to scroll down and
click create a new record
and this is already set to jobin
careers.com so we don’t need to put
anything here
there are no Alias records here so
another option is to put an a record so
now let’s copy this value and let’s
create an a record and let’s put this
value in here
then we also want to point
www.jobin careers.com to the same
location
so I am going to this time create a
cname record so let’s
select C name let’s put www here and
let’s put this in here and let’s save
that
and let’s come back here and click
verify so it’s going to take a moment it
is going to try to verify the domain
and that might take maybe a minute or
two to completely get verified so we can
wait for it to get verified but okay
looks like it is verified and in a
minute or two it should also have a
certificate so it should load properly
so now we can actually go on Joven
couriers website
v2.onrender.com to access the same site
that we already had or we could also go
to jovencareers.com
and we will be able to access the same
site okay
so once you have set up this process
then creating a new site is actually
very fast very quick and now we finally
completed the first step which is to
copy the GitHub project open it up on
replit and deploy to render
now the second step is to set up a cloud
mySQL database so this is where I’m
going to show you one way to set up a
cloud mySQL database but there are many
online providers that help you create
databases the one we are going to use
today is called planetscale.com
so planetscale.com is a fairly developer
friendly database and we are going to
use it because
it has a free plan
which gives you a fair amount of usage
so you can store up to 5 GB and you can
do up to 1 billion row rates per month
so for personal projects you should be
able to work with the free plan
so you have to sign up here and I’m just
going to sign in
and once you’re signed in you will be
asked to create a database so I am going
to go here go down here let’s zoom in a
little bit
and I’m going to click create
and let’s call this database Jovian
careers
and let’s put this close to us so let’s
put this in Mumbai
and let’s create database
so now all we’ve done is we have signed
up on planetscale.com and we have
created a new database and now once it
is initialized we will be able to
connect to this database
so first we will try to just connect it
connect to it using the MySQL workbench
so we have a database running somewhere
in the cloud this is a mySQL database
which is one type of relational database
that can be accessed using SQL and MySQL
workbench is a downloadable tool it is a
tool that you can download on your
computer to connect to this database
right so you download MySQL workbench
and using it you can connect to this
database that is running on the cloud
so let’s download MySQL workbench you
can click download now and then you can
select the installation for your
operating system in my case it is mac
and I’m not going to download it because
I already have it installed but now I
can
open up MySQL workbench you can see here
this is what it looks like once it is
installed MySQL workbench and I’m going
to click the plus button here now when I
click the plus button here I can set up
a new connection so my Planet scale
database is running somewhere on the
cloud and let me call it Jovian
careers Planet scale
all right now I need some parameters to
connect to this database in this case it
looks like a certain host name is set
127.0.0.1 that means my local computer I
don’t need that so I’m just going to go
back here and I’m going to click connect
and once you click connect
now you will receive the parameters that
you need to enter from your MySQL
workbench and this is only shown once so
you might want to just copy this
information and
paste it somewhere safe so I’m just
going to put it here in this notepad but
this is the information that we need to
put into our MySQL workbench so let’s go
back to mySQL workbench so let’s see
what we need we need a host name so
let’s grab the hostname this is the
hostname we need to provide
then the port is something that is
already configured we don’t need to
change anything here then we need a
username so this is the username
then we need a password so you can click
store in Keychain so that the password
gets saved so I’m going to copy this
password and I am going to then paste it
here
and this should ideally get saved on my
computer then we need a default database
name which is called Joven career so I’m
just going to do that as well and you
can test the connection
so when you type test connection it is
going to try to connect and tell you if
the configuration is correct
and once the test connection is done we
can click OK and now we can connect to
this database from the MySQL workbench
home so it should be listed here so this
is something that you need to do the
first time although you should keep hold
on to that password you should not lose
track of this password because this will
not be shown once we close this
window here okay
all right so now we are connected to a
database running on the cloud so let’s
just look at what databases are present
in the server so if we do show databases
you can see here it has a bunch of
system databases like information schema
MySQL sys and performance schema so this
is all for internal use of MySQL we
never touch these but there is this one
new database called Jovian couriers so
great now we have a new database Joven
careers and let’s see what’s inside this
database so first we say use
Jovian careers
and again this is basic SQL syntax so if
you take any quick beginner tutorial on
SQL you will learn this so now we are
using the jobin careers database and now
we can show the tables in this database
by typing show tables
and the casing doesn’t matter but I just
prefer using uppercase for any keywords
so we’ve said show tables and currently
there are no tables in the database so
information in databases is organized
into tables each table can represent one
kind of entity for example you may have
one table for jobs you may have one
table for applications you may have one
table for users and so on so think of
tables like sheets in a spreadsheet
workbook so each sheet represents a
different kind of data all right so
right now there are no tables so now we
need to create some tables into our
database so let’s come back here we have
set up a cloud mySQL database on planet
scale and now we are going to create a
table called jobs and add data to it
using the MySQL workbench
so here is how we create a table we say
create table
and then we give the name of the table
and then we provide the list of columns
in a table so table contains several
rows and several columns so the columns
have to be specified when we create the
table so each job is going to have an ID
so the First Column is going to be
called ID and it is going to be an
integer and I do not want the ID to be
null so if you want to make something a
required column then you say not null
and additionally I am going to provide
this additional argument called Auto
increment
so that I don’t have to provide unique
IDs so
I don’t have to think about entering an
ID every time I try to insert a new row
into the table a new ID will
automatically be generated for me so
that’s why I’m putting in Auto increment
here okay that’s great then we have the
job title which is some text so I’m just
going to use where care so where care is
the data type that is used to store text
and the job title can be let’s say 200
250 characters so I’m going to just put
in 250 here as the maximum length and we
of course do not want the job title to
be null or empty either
then we have the job location which is
also going to be a
piece of text and that should also not
be null
in case the there is no location we can
just put remote into it then there is a
salary so it’s possible that there may
be some jobs where the salary is not
specified so I’m going to use an INT
here so salary of type int it is going
to be an integer and it can be null so
nothing more now we may have locations
outside India as well we may have
locations in multiple countries so we
may want to keep track of the currency
in which the salary will be paid so I’m
just going to put in another column
called currency which is going to be
aware car and let’s just put 10
characters here not more and then
finally with each job there are some
responsibilities
so I’m going to put in responsibilities
here and let’s also make that where care
and this can be a large thing so I’m
just going to give it the length 2000 so
that you can put a whole bunch of
information in here
and then there are going to be some
requirements some qualifications so I’m
going to have another column called
requirements let’s also call that VAR
care
and that is the requirements column so
far our table is looking good we have an
ID title location salary currency
responsibilities and requirements and
one last thing I’m going to add here is
the primary key
and I’m going to make the ID the primary
key which means that we are telling SQL
that the ID should always be unique
every row should have a unique ID and
you can get data out of the table by
providing a specific ID so I can say
give me the information for the job with
the id5 and that is what a primary key
does all right so now we are ready to
create the table so let’s just click the
lightning button here or we could also
just press command enter or control
enter and that should have created the
table now so now if I go in into a new
tab I’ve created a new tab here using
command t or Ctrl t on Windows and now
if I say short tables
you can see that we have a table called
jobs
great and now if you want to look at
information inside jobs we can say
select
star from jobs again this is basic SQL
this is basic SQL that you will learn if
you take any tutorial but if you do not
want to type all these queries then you
can also use the schemas tab here in the
left sidebar and just refresh it once
you can see under jobin careers you have
tables and under tables you have jobs
and you can just click this button here
which is going to display the
information inside the jobs table and it
does the exact same thing by simply
running select star from
jovencareers.jobs all right so right now
there is no data within the table now we
can insert data into the table we can do
this using an insert statement so we can
do insert into
jobs
and while inserting we first have to
provide a list of columns so if I go
back here you can see that we have all
these columns but out of all these
columns only three columns are
compulsory title and location
and ID but the ID is going to be Auto
generated using this Auto increment
function so there’s going to be a
counter inside the table and it’s going
to Auto generate the ID for us so we
only really need to provide the title
and location those are the only two
required fields to create a job so I’m
going to say that we’re going to provide
the title and location and the values we
want to put for title and location are
data analyst
and
Bengaluru
India
so now we have written some code to
insert some data into the database and
let’s run that
and now you can see that here the insert
statement executed successfully and it
says one row was affected so if we now
try select star from
jovencareers.jobs then it is going to
show us this information data analyst
Bengaluru
now this is one way to insert
information into a SQL database from the
MySQL workbench by executing a query but
MySQL workbench also provides a nice
user interface so we can type for
example data scientist
and I can type here New Delhi
India
and maybe I can put in some salary
information as well so let me put in
15 lakhs so zero zero zero zero zero and
let me put in the currency rupees
and after entering this information you
can see an apply button here at the
bottom of the table you can click apply
and that is going to generate an insert
statement for us so it’s the exact same
insert statement let me just zoom in
here a little bit for you insert into
jovencareers.jobs title location salary
currency data scientist New Delhi India
and so on and click apply and now that’s
going to execute this SQL query for you
so MySQL workbench allows you to access
and manipulate the database without
having to write SQL queries as well and
we can also update existing records so
for example I could just do
10 lakhs here
and I could just put in rupees here as
well
and let’s click apply and that’s going
to apply that for us okay
great so one last thing I’m going to do
is I’m going to grab a bunch of
possibilities and requirements
information for these jobs and put that
in here as well so I have a link here to
some sample jobs data
so I’m just going to grab these sample
responsibilities let me double click
inside it copy it and come here double
click inside and paste it
and some sample requirements for the
data analyst role let me double click
copy here and paste it
and similarly we have some sample
require responsibilities for the data
analyst for the data scientist role so I
double click here and paste it
and finally we have some sample
requirements for the data scientists
role so I’m going to bring that in here
and I’m going to paste that in as well
and I’m going to click apply
and that’s going to put all this
information into the planet scale
database okay so remember we are still
connected to a database on the cloud so
all this information is getting written
into the database in the cloud
great so now we have done the next step
which is to create a jobs table and add
data using the MySQL workbench
so it’s just step by step simple process
of first creating a table using the
create table statement and if you don’t
remember this you can always just look
this up so create table SQL just search
that online and maybe check out
tutorials point and they have the syntax
and then they have an example so this is
not something that you have to remember
or by heart the idea is you should be
able to figure out how to create a table
in a mySQL database okay so we created
the table and then using the MySQL
workbench we inserted some data into the
table as well okay so now we can connect
to this database from replit using SQL
Alchemy
so let’s go back into replit here let me
open up the rebel once again
Courier’s website V2
so let’s go back into replit and now
inside replit I am going to create a new
file here called database dot pi
okay
now in the database dot pi
file I’m going to write some code to
connect to the database and extract some
data from the database and we are going
to do this using the SQL Alchemy Library
SQL Alchemy okay SQL Alchemy so you can
also search this online SQL
Alchemy
it is a library you can see here that it
is the database toolkit for Python and
let’s just search SQL Alchemy tutorial
Maybe
and here there seems to be
let’s see
there is a tutorial
yeah so there is a tutorial on tutorials
point you can follow that and there is
also an official tutorial so here you
can see
docs.sqlalchemy.org tutorial so you can
check this out as well
now to get started we need to First
install SQL Alchemy and to install SQL
Alchemy all we need to do as you might
have guessed it already is come into the
shell
and inside the shell type pip install
SQL
Alchemy
and that installs SQL Alchemy for us now
once SQL Alchemy is installed we can
import SQL Alchemy and we can check its
version so I can come back here and I’ve
imported SQL Alchemy and let me just
print SQL Alchemy
dot version
I believe it’s underscore underscore
version underscore underscore and this
can make this can help us ensure that
SQL Alchemy is installed and we have the
right version so let’s come back here
into the shell for a moment I’m going to
close the browser
and let’s just reset the view here
and let’s type python
database dot Pi so we are asking python
to execute the code inside the file
database dot pi and let’s run that and
now you can see here that it prints
1.4.23 so looks like we have a valid
version of SQL Alchemy installed
next the next step is to establish the
connectivity so I’m going to click the
next section here and look at the code
here
so next it looks like we need to import
from SQL Alchemy create engine and let’s
do that so from SQL Alchemy import
create engine I am no longer going to
print the version so I’m going to skip
this as well and then we need to create
an engine which is going to connect with
the database okay the way we do this is
we say engine equals create engine and
here we provide information about how to
connect to the database so all the
information for connecting to the
database remember all of this
information all of this information has
to be provided in a special format now
the example given on this page talks
about how to connect to sqlite which is
a different type of database from MySQL
which is what we are using so if we just
search SQL Alchemy
connect to mySQL
and check the resources so again on the
SQL Alchemy doc documentation website
there is information about how to
connect to mySQL as well
and we can see here that the way to do
it is using this using Create engine
MySQL plus pi MySQL colon colon username
colon password at Host slash database
name okay so let’s just copy that and
let’s put this in here so let’s go here
and let’s do engine equals create engine
MySQL plus pi MySQL what is the username
well the username is something that we
can get from here this is the username
then we have a password so let’s get the
password Here
and depending on which database provider
you’re using this information is going
to be different so don’t let all this
scare you it’s all simply just
configuration to make sure that we can
connect our code to the database that’s
all okay that was a password then we
have the host so the third thing is the
host so I’m going to grab the host here
and I’m going to put the host
information here and finally the
database name we want to connect to and
the database name is Joven couriers and
let’s check that let us now run this
again so my python database dot Pi just
to see the engine was created properly
okay so now we get an error no module
named Pi MySQL so looks like we need to
install another Library so SQL Alchemy
internally depending on which type of
database you want to connect to requires
some Library which can serve as a
connector so I’m also going to install
pip install ma Pi MySQL so because SQL
Alchemy can connect to many different
types of databases so it doesn’t ship
with all the built-in connectors you
need to install a connector depending on
which kind of database you are
connecting to
so I’m going to run pip install Pi MySQL
and let us try to run python database.5
once again
it looks like this is running
so great now looks like we are able to
create an engine so we have given it
some information and we have created an
engine
The Next Step would be to get some
information out of the engine so this is
how you can get some information out of
the database by making a connection to
the database using the engine so here’s
what you should do first it says we need
to import text so from SQL Alchemy
import text all right we’ve done that
and then with engine.connect as con so
this is just a way to set up a
connection we are saying connect to the
engine and give the connection a name
con so then we can use that connection
to execute commands onto that database
and then anything we write inside the
width can use this connection and once
we come out of the width the connection
will be automatically closed so that is
the purpose of width you will see within
a lot of places when we are connecting
to databases or when we are working with
files so what we do is we either open a
file or connect to a database and then
give that connection a name then we do
some work with it and once we get out of
the width the connection is closed
automatically so let’s grab this with
engine.connect as con
and then we can say result equals con
dot execute and here we can give any SQL
query okay in this case they’ve printed
select hello world so they’re not really
querying the database but let me change
this to select star from jobs we know
that we our database has a table called
jobs so let me just select start from
jobs and then let us print what we get
back so what we get back any database
query that you make on SQL is going to
give you a list of rows a table
essentially of some sort right a list of
rows of results so let’s just print
result.all which gives us all the rows
of the result at once and let’s try to
run that now python database dot pi
okay looks like there was an error and
this is what is going to happen all the
time whenever you are working on any
project in Python 80 percent of the time
the code you write is not going to work
the first time there’s going to be an
error but that should not scare you you
just have to read the error carefully
and see what it says so let’s see what
it says now the way to understand python
errors is to scroll all the way to the
bottom and read what is given at the
bottom so if we see carefully here it
says there is an operational error so
there was some error operationally
internally inside SQL Alchemy and it
says code unavailable server does not
allow insecure connections the client
must use SSL okay so there are some
secure ways to connect to a database and
there are some insecure ways so you may
have heard of HTTP and https so all this
is saying is that we need a slightly
more secure way to connect to a database
okay
now we can explore how to do this first
of all here we can go back into this
connection MySQL and Maria DB and go
down here and check how to connect
securely so let’s go back here and let’s
see maybe there is some information
about how to connect using how to
connect securely I’m going to search SSL
and looks like there is some information
here about
SSL
so here we are using pi MySQL that’s the
library we just installed and looks like
for SSL connections it accepts the same
arguments that mysqldb accepts as
described in SSL connections so let’s
click that and this is something that
you will often have to do when you are
working with the library you will have
to go into its documentation just try to
understand what they’re saying and try
to figure out how to make things work
okay so looks like if we want to connect
securely we will have to pass something
called connect arcs we will have to pass
this into the create engine function and
where inside connect tasks we will have
to pass a dictionary with some
information about SSL okay even I don’t
understand exactly what this is for or
what this does but all I’m doing is
interpreting the error here the error
that I saw on replit searching for it in
the documentation that inside I want to
connect securely using SSL so there was
some mention of SSL TLS here so I just
searched that and I found some
information here so so now I’m going to
come back here and I’m going to make
that change in my create engine function
so now we have this
so the first thing I’m going to do is
maybe extract out this database string
so let me just call it connection or DB
connection
string equals
and let’s put that into
this
so DB connection string so that’s our
first part but apart from this
we also now need to pass this
information which is connect args so
let’s build it step by step so connect
args okay let’s come back here let us
put in Connect talks and connect args
requires a dictionary so in this
dictionary we are going to have a key
called SSL so let’s pass in SSL
and now
inside it there are these values that
have to be provided I believe this is
going to change depending on which
database provider you’re using so just
like this has to change based on the
database provider this also has to
change based on the database provider so
how about we go back into our database
provider and here there is some
information about how to connect with
python so let’s check that and looks
like they’ve given some information
about what to install they’ve given some
information about like how to configure
it so they are using something other
than SQL Alchemy and here looks like
they have given some information about
the SSL certificate right so if you look
here we have SSL and then inside SSL we
have this sslca so let me just put that
in here sslca
and let’s just paste it here sslca now
instead of this value all I’m going to
do is I’m going to get this value from
planet scale okay so there seems to be
some certificate that is required and
the way you configure that certificate
is by passing this value
slash Etc SSL slash certificate.pe okay
and I have just saved that and let’s
hope this works in a lot of cases you’re
just hoping and trying but let’s see
okay look like it worked so there were a
few complications we ran into a few
errors but ultimately we were able to
figure out a connection string to
connect to the planet scale database and
then we were able to figure out how to
connect securely and this is not
something that you’ll figure out
immediately sometimes you may have to
spend 20 30 minutes or sometimes you may
have to just look online Planet scale
SQL Alchemy
how to connect
and here it says that connect to any
MySQL client to Planet scale using
connection strings so there is some
information available online generally
speaking so you can see here that there
is some information about connection
strings and things like that or you can
also go on stack overflow.com so you can
always go on stack overflow.com and you
can just post a question here and
somebody will try and answer the
question for you or you can ask us if
you are part of the job in community
right so developers I have to look up
documentation developer developers have
to try and figure things out by trial
and error and try to look at the docs
try to look at references try to look at
blogs and figure it out and often they
just have to ask each other to figure it
out but this is what you had to do to
connect to a planet scale database now
connecting to a Google cloud or an AWS
database may be slightly different but
the important thing is we are able to
get this data out so that’s great now
I’m curious what is the type of this
object that is getting printed when we
call result.all what is the type of the
data that we get so first let me print
type of result
and then
let’s call this result all equals result
dot all and let me print the
type of result all and then let’s also
print result all itself
and let’s include some information here
about what we are printing always a good
idea otherwise you might get confused
about what you are printing exactly
so here we are checking the type of
result.all
and then finally here we are checking
the
result.all itself
okay
so this is what we are going to print
just to get a better understanding of
what this result is
okay let’s run python database.pi once
again
and looks like the result is of the type
SQL Alchemy dot cursor but as soon as we
call result.all we get back a list so
you can see that the type of result.all
is the class list so the result.all is
actually a simple plain python list as
soon as you do result at all it becomes
a python list and then you have the
result.all this is all the information
that we obtained but let’s check the
type of the first element of result all
so result or result all is a list so now
we can say result all zero so just to
look at the first element remember in
Python elements are numbered from 0 in a
list
so result all 0 is simply this object
and let’s try to print the type of this
result all zero so we are getting the
first element out of the list that we
obtained using result dot all which
result was a cursor result.all is a list
of results and let’s now get the first
element so let’s just call it first
result
equals
result all zero
and let’s just print the type of first
result
okay and this is simply the
type of
first result
okay so result was of the type cursor
then or cursor result then result.all
was of the type list and finally result
first result is of the type Legacy row
okay
now
I don’t know how to work with Legacy row
I don’t know how to work with all these
special classes I know how to work with
lists and dictionaries
so I might want to convert this row into
a dictionary because ultimately what
each row of a database contains is a
bunch of columns and a bunch of values
for each column so let me search how to
convert SQL
Alchemy
row into dictionary
into python dict
okay
so there’s an exact question how to
convert SQL Alchemy row object to a
python dictionary and that is how a lot
of programming works you just search the
right question and you get the answer
and looks like what the way you do it is
you just do underscore underscore dict
underscore underscore
so let’s go back here and let’s say
first result
dict equals result all which is a list 0
which gives us a legacy result dot
underscore underscore dick underscore
underscore okay there’s no way I could
have guessed this I just had to look it
up right so that’s an important part of
development and now let’s check the type
of first
result date and make sure that it is a
dictionary
so I’m just also going to type this out
here
type of first result
date
and while we write it let’s also print
first result date
okay so let’s run this once again
all right well
could not locate column in row
okay maybe this did not work maybe we
can try another approach let me try this
let me just call dict on this let me
just call dict and see if maybe that
works
okay that actually worked so all we had
to do is we had to call the dict
function so I just took a guess here and
sometimes you have to try a couple of
approaches and what that did is it took
one row of result and converted that
into a python dictionary you can see
here this is a python dictionary it
contains the ID title Etc so now here’s
what I can do I get the result and I can
say
result dicts equals the empty list and I
can say for Row in result dot all so
result.all is going to be a list and for
row and result at all each we are going
to get one row each and then I’m just
going to say result dicks dot append
dict row okay and let’s get rid of all
that
and finally let’s just print result
predict
okay and or result text and let’s run
that one last time and we’ll see why all
how all of this is going to come
together
okay so now we have this list of
dictionaries you can see here that this
is a list and inside this list this is
one object and then here inside this
list this is the second object right so
we had two jobs and the responsibilities
for two of those jobs and now all of
that data has come up here so we
inserted that data from our MySQL
workbench and we are getting that data
into replit okay so this is good but we
probably don’t want to print this
information we actually want to send
this information back to the site when
we are trying to access the job page so
when we are trying to access Jovin
careers
dot x y z
this is where we want to print the this
is where we want to display this
information right so let’s get rid of
this for now and I’m just going to copy
this code actually I’m just going to
copy all of this code
and let’s get rid of this and let’s come
back into our app.pi file
and in our app.pi file let’s come back
here into the hello Jovian into the main
route that we had and let’s define a
function
let’s call it load jobs
from DB okay and what this does is with
engine.connect as con and we have to
just fix the indentation here
yeah so with engine.connect as con and
there is an error because we need to
import engine so I can say here from
database now because we have this file
database we can use it like a module so
this is the other way of using python
files you can invoke them as a module so
from database import engine
so now from the database file where we
had created the engine we are importing
that engine inside app
.pi and then we are saying inside our
load jobs from DB function with
engine.connect as con
result equals con dot execute and there
is this text so let’s import that as
well so from SQL
Alchemy import
text great
so now text should be fine I believe
it’s from SQL alchemy.sql if I’m not
mistaken let’s see here
okay no just SQL Alchemy so
let’s remove text from here let’s come
back into app.pi
and we probably don’t need this yeah
okay so with
engine.connect.com.execute and get a
result then instead of calling this
result dicks basically this is just a
list of jobs right so I’m just going to
call this jobs and I’m going to get each
row from the result and I’m going to
convert that row into a dictionary I’m
going to append it to the list jobs and
finally I’m going to return jobs
okay great so now we have this function
load jobs from DB
and that function returns a list of jobs
so now I can go in here and I can say
jobs
equals
load jobs from DB
great
and now I can go ahead and remove this
so
before I do this I just want to show you
the old version the version that we have
currently running
yeah so the version that we have
currently running you can see here it
contains four roles data analysts data
scientists front-end engineer back-end
engineer and that is coming from this
list but let’s get rid of this list
and let’s come here and let’s call load
jobs from DB
and
oops now for the jobs input let us
provide jobs so we’re saying jobs equals
jobs basically what we’re saying is
inside the template home.html when you
try to access the word jobs then you
should be using the variable jobs that
is defined here okay so don’t let this
notation confuse you this is the name
that is going to be used inside
home.html and this is the name that is
the variable that you want to supply as
the information so for example you can
call it jobs list and then you would
have to put jobs list here okay but just
to keep it simple I’m going to call it
jobs equals jobs
and the company name is Joven so let’s
retain that okay so now I have just made
a major change to my application I’ve
actually removed all the
hard-coded data and I am loading that
information from a cloud-based database
so now if I scroll down here you can see
that there are two positions data
analyst and data scientist and those are
exactly the positions that we have
entered into our database which we can
verify in the MySQL workbench as well
okay
so I think that’s pretty good it took
some work but once you know how to do it
the first time it is exactly the same
thing each time or the entire code that
we had to write was maybe just 11 lines
of code and then we were able to create
this helper function and you know what
I’m just going to move this helper
function inside database.pi so that
I don’t even have to worry about
making sure my routes and functions are
separated so I’m just going to put this
here
and let me put text back here and now in
app.pi instead of importing something
from SQL Alchemy or importing the engine
I can just say load jobs from DB okay so
this is good encapsulation good coding
practice that all your database related
logic is going to be here inside
database dot pi and it simply has this
function load jobs from DB which you can
use inside app.pi
okay so that I think was a good first
step so now what we have done is we have
connected to the database from replit
using SQL Alchemy and then we also went
ahead and we displayed the list of jobs
from the cloud DB using SQL Alchemy
so just to recap we started by
creating a copy of the GitHub project
that we had the last time and then we
opened it up on replit and we also
deployed it to render.com
that was pretty straightforward just
repeating what we had done the last time
then we set up a cloud mySQL database on
planetscale.com so we went to
planetscale.com created a new database
and then we
used the credentials from the planet
scale setup to connect to the database
so we connected to the database from the
MySQL workbench and we created a jobs
table and this was the code used to
create the jobs table and then we added
data into it in the MySQL workbench
using insert statements but also using
the user interface not only can you add
data you can also update data and you
can also delete information for example
I can click delete here and then click
apply and that can delete information as
well
then we saw how to collect connect to
the database from replit using SQL
Alchemy so we created we imported the
SQL Alchemy Library we created a
database connection string and then we
created an engine and finally we created
a helper function to connect to the
engine and execute the statement select
star from jobs and finally get the
result and convert the rows of the
result into dictionaries and create a
list of dictionaries which would just be
the list of jobs and pass that into app
dot pi and now instead of having a list
of dictionaries that we had hard coded
put into our code we are now getting the
list of dictionaries from the database
and I’m going to change this here as
well into this other API which was using
jsonify and I’m going to do the same
thing load jobs from DB and jsonify jobs
and now if I go back here and open the
site and go to slash API jobs see this
other API this this other route is at
slash API slash jobs so I’m going to
open slash API slash jobs
and you can see here that this is the
Json format of the information here
which is the exact same thing
except on the main page we are taking
that Json data and we are displaying it
but here we are just displaying it as
plain Json okay and of course how do we
put the data from the jobs dictionary
how do we actually display that data
here all of that is done inside this
template home.html so inside home.html
we have this
for Loop so we say for job in jobs so we
get each dictionary out so we get each
dictionary out from the list of jobs and
then we pass that information into job
item.html and job item.html contains
information here like it it extracts a
job title so it is going to take this
dictionary here
and it is going to extract the title
which is data analyst and it is going to
put that title here inside an H4 tag
then it is going to extract the location
and display the location here and it is
going to extract the salary and display
the salary here
so that’s rather nice now let’s go back
into the MySQL workbench and insert a
third job role and let’s see what
happens
so let’s go into here let’s go into
front-end developer let’s grab that
let’s put that in here
so front-end developer is the role
okay now let’s come back here let’s grab
location the location is remote so I’m
going to come in here I’m going to paste
that
let’s grab the salary here
and I’m going to come in here and paste
that let’s grab this is still in rupees
so let’s grab that and let’s put that in
here
and then let’s put this in here as well
all right last piece is the requirement
so responsibilities and requirements and
let’s put that in here we are not using
these yet but we will soon enough
okay and I have not added an ID because
an ID will get added automatically so
I’m just going to click apply and now
that’s going to create this insert
statement for us and now we’re going to
apply it and looks like it’s done so now
here is the most interesting thing we
have not made any changes to our code
but if I go here and reload this page
you will now see that the front-end
developer code shows up so what’s
happening is when we visit Jovian
Courier’s website
v2.akashness.reple.com then
a request is sent from your browser
to this flask server that is running
here
and the flask server here is listening
for requests so that is why it’s called
a server because it listens for requests
and it serves some information back so
it listened for the request
and based on the request it went into
the app routes and it checked which is
the matching route so here we are just
using the domain itself you’re not doing
slash API or anything we’re just using
the top level route and that is matched
using slash which is that there is
nothing after the domain name and then
it invokes that function again so each
timer request is made from the browser
the appropriate function is invoked and
in that function we are making a call to
the database so the appropriate database
query is made the appropriate SQL
queries made by SQL alchemy that data is
fetched then that data is passed into
this template and that data is then
displayed on the server right so this is
already a dynamic web page this is no
longer the same you’re not going to get
back the same result each time you open
it up because there may be different
information within the database so that
is very powerful because that this one
page now is not a static page it is it
has some data that can be fetched from a
database but now let’s take this and let
us also deploy it to render.com so to
deploy to render.com all we have to do
is take all the code that we have
written and put it back on GitHub but
there is one problem there is one very
big problem that we have to fix
here inside the database dot Pi file we
have our database username password host
all of this sensitive information now
this information if it goes into the
GitHub repository and the GitHub
repository is public then everybody in
the world will be able to see our main
root database password which means
anybody can directly connect to our
database and delete information or
change information you probably don’t
want that that is a big security risk so
what we should be doing is we should be
making this information a secret never
put any passwords into a git repository
because
if you’re going to share that repository
with other people or if you’re going to
publish that repository online publicly
your passwords will get exposed and
anybody can come in and wipe out your
database
so generally all development and
deployment platforms provide a way of
storing some secret information which is
stored differently from the git
repository so I’m going to go here into
the sidebar and just move down and here
you see there is something called
secrets so I’m going to go into Secrets
here I’m going to click secrets and I’m
going to create a new Secret inside
replet and I’m going to call this secret
DB
connection
string okay all uppercase with separated
by underscore I’m going to take this
text which is inside the codes and now
we don’t need the quotes anymore and I’m
going to put this value here and I’m
going to add new Secret
and now replit will securely store this
information within our replied account
and this information will not be public
this information will be private to us
even if your Apple is public okay
because this is secret information
so DB connection string is now secret
and then the way you can then get this
information is using the OS module this
is now available as a OS operate as an
operating system environment variable so
what you do is you say OS dot Enviro and
Environ
DB
connection Str so you simply give the
name of the secret and you say OS dot
Environ and now if we run
I think we have to go back and maybe
reload the page so let’s reload once
okay it is called DB connection string
so let me change that to DB connection
string
and now if we run
we are going to see that
DB connection string the connection
string is no longer mentioned here in
the code but the data is still getting
loaded data analyst data scientist and
front-end developer okay important Point
remember this don’t put any passwords or
any sensitive information into your code
it should always be passed through some
secret okay so now let’s go into Version
Control here and I believe we have
removed all the secrets here so I can
now push my changes
and let’s see what did I change added
connection to database
added connection to DB let’s just say
that
and let’s click commit and push
and that should take all the files and
send it to GitHub that’s what we were
doing in the previous tutorial okay
looks like nothing happened looks like
there’s no change here so what happened
turns out that replit seems to have
changed their user interface again this
is something that happens with the tools
that we use they’re always making
changes making improvements so things
may not work exactly the same way and
now you see this plus button it is
showing you a list of all the files that
are changed and you have to manually add
which files you want to commit back to
git okay so replied is giving you a
little more power it is allowing you to
manually add which files you want to
commit to git so I’m going to click plus
plus plus plus and now all these files
are going to get committed I’m going to
try to commit again
load jobs from DB and I’m going to click
commit and push and now that’s going to
take all of these added files earlier no
file was added so that’s why no nothing
was getting committed so now it’s going
to take all these added files and it is
going to commit them now you can see
here we have load jobs from DB this is
the latest commit and you can also go
into Joven couriers website V2 and here
on the job in careers website V2 you can
now check app.pi
you can see it doesn’t have those list
of jobs and you can check database dot
pi and you can see it does not have any
secret here okay so that’s fine so now
we have securely stored this Secret
inside replet environment variables and
we have still been able to make our code
public so we’ve not lost any security
nobody will be able to connect to our
database except through
the routes that we have already defined
so the way people access the database is
by opening the page Jovian careers
website V2 and then that route
internally makes a database connection
but we get to control which database
connections are possible we have not
given the final user the full power over
our database okay
all this is well and good but let’s go
to render.com and let’s see what
happened here
let’s go into our render dashboard
and let’s find the
project
that we had just deployed earlier okay
okay looks like a deploy failed so let’s
click on this let’s see why a deployment
failed
so as soon as we pushed some new changes
to master render.com try to deploy but
when render.com tried to deploy it ran
into a couple of issues looks like there
is no module called SQL Alchemy so let’s
go back here we added a new a couple of
new files so let’s go in here let’s add
SQL Alchemy and I believe we also
installed Pi MySQL so let’s add Pi MySQL
as well and let’s go back here into
Version Control let’s call this update
requirements
and let’s add this file into our commit
and let’s commit and push
since we have added new libraries we
need to mention them in requirements.txt
now we have mentioned them now we can
come back into render now let’s go back
into the dashboard
now you can see it is deploying again so
let’s come back here let us check the
deploy the deploy has been started it is
in progress
and you can see the name of the latest
commit update requirements so let’s wait
here and let’s see if it is able to
build and deploy successfully
okay looks like it was able to install
all the dependencies looks like it is
also able to build it and looks like it
is now going to upload the build let’s
see if that is going to succeed
okay the build was successful it is now
deploying
so this is going to get deployed to
joviencareers.com
and let’s see if that deployment goes
through successfully
okay now here you see it runs into an
error so it set up the build and then it
tried to run geonicon app colon app and
then when it tried to access if you just
go down scroll down here when it try to
access the OS dot Environ DB connection
string it did not find the connection
string so
what happened
remember this connection string is a
secret that we have put into replit when
we sent the code from replit to GitHub
GitHub no longer had that connection
string that’s the whole purpose of
storing it secretly on replit so that it
we don’t expose it in our git repository
so if the git repository doesn’t have
this information then obviously
render.com will also not have this
information so what we need to do is go
into render.com
go into the environment here so just
like replit render.com also has a way of
specifying Secrets or environment
variables it specifically says that you
can use this for secrets and then click
Plus
and now we can go back here and let me
go to the secrets Tab and let me click
on the secret that I already have and
let’s grab the name DB underscore
connection underscore string and let’s
put that name here and let’s grab the
value
and let’s put this value here as well DB
underscore connection underscore string
and save these changes
and that is going to kick off another
deploy
most likely so let’s go back here
yeah so it looks like we have just
updated the environment so it is going
to start another deployment
and this time it should be able to
access the environment variables so
let’s go back here and let’s see
how it’s doing so it is
once again installing the required
libraries it has
created a build it is then going to push
the build and it is finally going to try
another deployment and it’s going to try
to run the application once again so far
jovencareers.com
if we just check it Jovian
careers.com so far it only has the old
data data analyst data scientist
front-end engineer and back-end engineer
so it has all this information right
but as soon as this deploy is done
hopefully if it works it should be
connected to the actual database
foreign
looks like this has run properly so
let’s reload the page and you can see
now we have data analysts data scientist
and front-end developer data analyst
data scientist and front-end developer
let me just try this one more change
here so let’s add backend developer
and let’s change this to San
Francisco
USA
let’s make this 120
000.
let’s put the dollar symbol here and
let’s grab the information about this
job as well so here there is some
information too
so let’s grab that
and there is some information here too
so let’s grab that too
and let’s click apply
and that should now insert this new data
and now if we simply refresh
jovencareers.com
you will now see that it has all four
roles and you can tell that this is
coming from the database you can try to
delete something from the database and
that will go away from here
great so now we are able to deploy it as
well
so now we’ve deployed to render.com
we’ve pushed the changes to GitHub we
have kept our secret safe and we have
deployed to render.com next we are now
going to create Dynamic pages to display
each job role now wouldn’t it be nice if
we had for each of these job roles on
jovencareers.com we had its own page
maybe we got there when we clicked on
apply so let’s try to do that let’s try
to give each of these jobs their own
page
so let’s come back here I am going to
come back here into requirements
into our app.pi file and I’m going to
add a new route
so I’m going to say app dot route
slash
job and now what I want is
on jobin dot careers jovencareers.com
job slash three let’s say if I put the
number three I want the data for job ID
number three to be displayed here
and if I put the number two I want the
job data for the job ID to to be
displayed here and so on
so the way you can create a dynamic
route in flask is by putting something
between these less than and greater than
symbols so if we do less than ID greater
than so now it is no longer trying to
match slash job slash ID now it will
match anything that comes after slash
job and the function that you define
under it let’s call this
show job is going to receive that value
as a parameter so for example if we try
to access jobin careers.com job three
you can see here in the URL bar
jovencareers.com job slash three then ID
will get the value 3. so ID will get the
value 3 so basically ID will be the
number that we have passed in and now we
can first try to load the job so let’s
see load job from DB so we’ll try to
load a specific job here which has this
given ID and then
let’s for now let’s just
convert that into Json so jsonify job
and return that okay now we don’t have a
load job from DB function so let’s
define that inside our database file so
let’s define def load job from DB which
takes an ID
and now we say with engine dot connect
as con
and then we say result equals con dot
execute
so what with what is this SQL query we
want to write typically when we want to
fetch a specific job we would use a
select query so we would do something
like select
star from jobs where ID equals 3 for
example
and that is the front-end developer role
right so that’s exactly what we want to
write here as well text
so let’s get that on new line
select
star
from jobs where
ID equals and now here we want to put
the value of the variable ID so the way
you can do this is you can just put a
variable here so let me call this Val
and then outside this you can provide
the value of Val so you can say Val
equals ID
okay so this is what is called string
formatting but it is done in a special
way inside SQL alchemy that you use
colon to specify that this is something
that has to be filled in and then you
provide its value as a parameter here
okay so where ID equals Val and we are
saying that colon Val should get
replaced by ID and where is this ID
coming from this ID is coming from this
input and where is it coming from in the
input
remember app.pi we are actually getting
it from the URL so we are getting the
URL ID from the URL and we are putting
it into this function load job from DB
and let’s call load job from DB let’s
import that
so we are putting it into the function
load job from DB
and inside load job from DB we are
taking the ID and we are putting it into
the select statement select star from
jobs where ID equals well and then we
are going to execute it and we’re going
to get a result
now we can say rows equals result dot
all so now we have a list of rows now I
expect to get back either one row or I
expect to get back zero rows for example
if I look for the job with ID 10 I’m
going to get back 0 rows
so here’s what I’m going to do if Len
rows
equals 0
then I’m going to return none
else I am going to return
dict rows 0.
okay so remember rows is a list of rows
and each element of row so this is going
to be the first element of row row 0 is
going to be the first element of row so
the first element of row is going to be
a legacy row a SQL Alchemy row class and
we can convert that row into a
dictionary using date okay and if this
doesn’t make sense what you should try
and do is add a bunch of print
statements and play around with it and
try to make sense of it but now we have
this load job from DB so we have that
and now we have this app which is going
to use load job from DB
let’s call it load job from DB
and let’s run that let’s run this and
for now what we’re doing is we are
getting the job data and we are just
converting it in into Json okay so if I
go now and open this up in a new page so
remember this is not deployed yet so
this is not going to be available on
jovencareers.com just yet any code
changes have to be deployed via render
any database changes any changes made to
the data within the database will
reflect immediately that’s the benefit
of having a database that is separate
from your code because once the code is
deployed independently and the database
can be changed and the data just changes
independently
anyway so now here we have the same
development server running and here we
have the data analyst role data
scientist role front-end developer role
so let’s see here when we check the jobs
table data analyst has the id1
so I can go in here and I can type slash
job slash one
and that is going to go and match this
route
ID and ID is going to have the value 1
we’re going to load the job with the id1
and we’re going to then convert it into
Json and return it
and exactly what we expect we get the
information about the data analyst role
the salary we get the currency we get
the ID and we get the location
requirements and responsibilities
so great that’s nice so now we have a
dynamic page let’s try maybe this
and yes now we have data scientist let’s
try three
and now we have front-end developer
let’s try four and now we have backend
developer so you may have heard the term
rest API this is exactly what rest apis
are they go into a database they fetch
some information based on the
information that you provide in the URL
and they return some Json okay but we
don’t want a rest API right now we want
to create a proper HTML page so I’m
going to create a new template called
jobpage.html
and
let’s create a basic HTML page here from
scratch so I can go into home.html and
just study how this was created so there
is a dock time HD doctype HTML at the
top let me put that in here then there
is an HTML tag and then there is a head
and body tags inside it so let me put
HTML and let’s put a head in there
and let’s put a body in there and in the
head we may have to put a few things so
there is the title let me copy the title
let’s put that back into a job page
great and now instead of jobin careers
let’s change it to the actual job name
so let’s get the job title here
so let’s get job dot title where is this
job going to come from we are going to
pass it in while rendering the template
so
let’s just do that for now and maybe
also inside the body let us put in maybe
an H3 tag with the title of the job so
let’s put the title and let’s put the
job title below it in a P tag
job.title
okay we’ve done something very basic
here we just have a title tag and then
we have an H3 tag and now let me go back
into app.pi and instead of returning
Json let me render this template so let
me say render
template
and let me use the template job page dot
HTML and let me set job equals job okay
so inside the template
any references to job will use the
valued job which is coming from load job
from DB which is coming from ID
so that’s nice so now I can go back here
and reload this page
and now it says title backend developer
okay maybe let’s put in a few other
things as well
let’s get
maybe the
all the other information basically so
let’s get
the location
job dot location
let’s get the salary
job dot salary
oops this is just called salary
let’s get
requirements or let’s get the currency
or maybe let’s put the currency next to
the salary itself so
that would be nice job dot currency we
don’t have to show it separately then we
have the job responsibilities
and job dot responsive
abilities
and then we have the job requirements so
requirements and let’s get that as well
job DOT requirements
okay now we have all the information and
you can see even the title says backend
developer so the title is back-end
developer the location of San Francisco
the salary is 120 000 responsibilities
oh okay maybe there’s a
What’s this called responsive ah I think
I have a typo in my table
so I’ve just called it responsibilities
so let’s just change here to
responsibilities for now
so that it at least it works
and now we have the responsibilities as
well what about this
so here is the front-end developer
here we have the data scientist and here
we have the data analyst but what if we
try to access something that’s not there
so it shows empty information but rather
we should probably just show not found
or something like that so I’m going to
come back here into app.pi and I’m going
to say if
not job
which means if job is none then simply
return not found
and whenever you’re returning something
you can also specify your error code so
404 if you’ve seen HTTP error codes you
may have come across four or four pages
404 represents not found so it tells the
browser that the page was not found so
this is just a good way whenever you’re
returning errors to also apart from
returning any content and this can just
be the output of a template as well but
apart from returning any content you can
also return not found so if the job is
not present then we say not found
otherwise we render the template so now
if I reload this you can see here it
says
foreign
it should just say not found and here it
you can see the browser also says this
page is missing so the browser is also
able to detect that this is Pages
missing based on the error code but if
we go back here into maybe job ID3 that
information is present
okay nice so now we have one page per
job and it would be nice to maybe make
it look nicer just like the main job
page and also connect it here from the
job page so right now on the job page we
have this apply button which sends an
email but instead of sending an email
maybe we can just open the job Details
page so that’s the first thing we’re
going to do let me come into home.html
and inside home.html looks like we Loop
over the jobs using four and then we
include job item.html so let’s go into
jobitem.html and here we have this mail
to link so let’s get rid of this mail to
link
and instead let’s put a different link
here so we are saying that when somebody
clicks on apply
we want to open on the same website we
want to open slash jobs or sorry slash
job slash the ID of the job for which we
have this current button so here we have
this job object so we can just say job
ID
and save that and reload it
and now if you see here this you can see
in the status bar at the bottom left
that this actually opens up that
specific job page
okay
so that’s nice we have now opened up
that specific job page that is good but
I would prefer if this also looked
somewhat similar to this page if they
had similar layouts so let’s try and do
that so let’s do that one by one the
first thing we will do is fix things in
the head
so the job page currently just has a
title maybe we should also include
bootstrap in there so let me just
get this and put all this in in there as
well
so this way is going to make sure that
the bootstrap framework is imported but
instead of copy pasting things this
would be a good
opportunity for us to maybe create
another helper template so let me add a
file called
bootstrap.html
bootstrap.html which can contain the
code to include the bootstrap framework
let me cut this here and let me come and
paste this into bootstrap.html
and let’s just fix the indentation here
so that things are easier to see
and let’s go into home and let’s simply
it include here bootstrap.html so
percentage include
bootstrap.html percentage great
and now so you see the layout got messed
up but now it’s fixed again now we can
come back into job page and under the
title we can include bootstrap.html so
that’s nice
okay so now if we come back here into a
specific job page
let’s say I open
data scientist
you can see that already the Styles have
become much better that’s nice
but next step would be to probably add
the header probably add this Banner
image so let’s do that let’s add the nav
I think the nav is already a component
in itself so I’m just going to grab this
and put that inside job page.html
and you can see now it should have the
navigation bar but while we write it how
about will it also grab the footer and
put the footer in there as well so let’s
go back to job page and let’s include
the footer here at the bottom
let’s see if that has changed something
so now we have the header that’s nice
now we have the footer as well and now
let’s go back in here and maybe add that
Banner image as well so I’m going to go
into home and there are two things here
so there is this image and then there is
a style tag as well so it turns out that
style tags do not have to be in the head
they can be anywhere in the body so I’m
going to put this style tag right above
this image
and then I’m going to copy all this and
I’m going to create a new file
foreign
er.html
and I’m going to put that in here all of
this inside banner.html
and inside home I am going to Simply
include banner.html
okay and not only inside home but I’m
going to do the same inside
so the banner is still here I’m going to
do the same Inside Job page.html
okay so our website once we’ve created
it for one page it’s very easy to
replicate across other pages
now let’s Center this a bit the way this
is centered on the home is using a
container you can see here we have a
container so let’s take that and maybe
I’ll also retain this careers Joven
Courier’s title here so let me also and
let’s get rid of this company name this
is no longer useful so I’m just going to
call it Jovian careers
and in app.pi I’m going to remove this
company name here that we had passed in
earlier but let’s go back to home and
let’s copy this container let’s copy
this H1 and let’s take that and let’s
put that into jobpage.html
and put all of this inside the container
and let’s close the div
let’s go back let’s see that
okay so it is starting to look pretty
nice I would say we have the title
location salary I think these are
probably too big so maybe we can make
these h4s
and maybe let’s make this H3 and just
show the title here instead of saying
yeah let’s make this S3 and let us just
show the job title here instead of
showing this in a paragraph so just a
slightly nicer layout and let’s load the
location here but let us display it
using a P tag and let us give the class
lead remember the class lead we had used
the last time just to make the text
bigger and let’s make these all h4s
okay and I’m going to move the salary
below
the
requirements and responsibilities let’s
go back
and I think we are almost there now we
have data scientist New Delhi India okay
maybe we don’t need the space above so
I’m just going to say
class
m
maybe this is space below the
heading so I’m just going to say class
mb2 just reducing the space a little bit
here
okay and let’s change this to a simple
Mt 0
so I’m just fixing a bit of spacing
using some margin classes from bootstrap
okay so nothing major this is just
things that you have to mess around with
a little bit okay so now we have data
scientist New Delhi India
responsibilities requirement salary but
there’s one problem here if I go back
into the data that we had inserted the
sample jobs data
you can see here that there are
multiple lines present here you can see
that there is a next line after each of
these points
but these points don’t seem to be
showing up on this page so it would be
nice to make these show up as pointers
first of all instead of as a paragraph
so it’s not detecting the new lines and
maybe we should also be using bullet
points in some fashion here so let’s do
that let’s make these bullet points and
the way to make bullet points in HTML is
using something called
an unordered list so you say ul and as
soon as you say UL now you’ve started a
bulleted list and then inside it you put
each element into its own Li tag so UL
stands for unordered list and Li stands
for list item so here you have item a
here you have Item B and then here you
have
Li item C and so on and let me just save
that and I’ll show you what that looks
like before we
yeah so this is what it looks like item
a Item B item C all we have to do is we
have to put this inside
ul and Li
now
our responsibilities is a single string
although it does contain these new line
characters and so what we need to do is
we need to first split it into a bunch
of lines a list of lines and then we
need to Loop over those lines and create
allies or list items
so I’m just going to write the code here
and I’ll let you think about how that
works so I’m going to say for line
in job dot responsibilities
or actually just responsibilities here
so let me just call it that job doctors
responsibilities dot split
and I’m going to split it at the new
line character
okay so that’s going to give me a list
of lines and then I’m going to get each
line from that list
and let’s put end for here
and now here
we can simply render the line inside a
list item
okay so this code is going to seem
confusing right now but spend some time
with it experiment with it a little bit
and hopefully you’ll see what it’s doing
we are taking responsibilities from the
job we are splitting it at the new line
character and new line characters are
already present but they don’t get
rendered automatically in HTML for us so
we’re splitting it at the new line
character and then we are looping over
it so we get each line and for each line
we create a list item okay so we if
there are 10 responsibilities then it’s
going to create 10 allies and all of
those allies are inside the UL and
that’s why you get back this
okay so that’s great that’s nice so now
we have a nice bulleted list here let’s
do this same thing for requirements
instead of a bulleted list this time I’m
going to create what’s called a numbered
list or an ordered list so instead of UL
I’m going to use ol
and I am going to then pass in
the same for so I’m going to say
4
line in
job DOT requirements
and end for
let’s get the N4 from here
and now the line each line is going to
come from job DOT requirements and now
I’m going to render
the value of the line
so these templates are very powerful you
can do all sorts of manipulation data
manipulation right within the template
and now you see oops I think I went too
far I should be splitting job
requirements dot split so now we have
created one item for every character
that’s not what we wanted so job
requirements.split
and now you see here that you have all
the requirements in different lines as
well so that’s the requirements for the
data scientist role let’s check the data
analyst role
and that looks good let’s check the
backend engineer role that looks good
too
and that’s it we’ve now created a bunch
of different Dynamic pages
powered by data from the database and we
are making it look nice we’re making it
look pretty good maybe one other thing
we can do is we can maybe make this
button this this thing in a nav we can
maybe configure it to go back to the
home page so let’s go back into nav.html
so let’s go to nav.html and here we have
this a tag already and let us just
change its location to slash so the word
Jovian when we click on it it is going
to take us back to the home page and
it’s important to have navigation
otherwise your visitors website visitors
may not be able to figure out how to go
back even this is not very obvious but
let me first reload this so now I want a
job page here
and if I click this
that’s going to now take me back to the
home page
and from the home page I can click on
the apply page
and that’s going to bring me back to the
job page and I can click here and go
back
into the job page and then click apply
and go into a different page
so great we’ve now created Dynamic pages
so we’ve completed this step create
Dynamic pages to display job role and we
have now shared layout Styles and
navigations using bootstrap
between the two
home between the home and the job Pages
you should always try to share as much
code as possible and that’s how your
style will stay consistent if you copy
paste things then you can make change in
one place and the change won’t reflect
in the other place so less code is
always better so keep that in mind
all right let’s also finally just
make save this to GitHub and then let
that deploy to render.com
so now we have added
Dynamic Pages for
each job
let’s commit and push that and that
should get deployed in a couple of
minutes to jovencareers.com
so we’ve Now read from the database but
now we’ll see how to write data back to
the database and that’s going to
complete the loop a fully functional
database driven application and in the
meantime we can verify that GitHub has
the latest code you can see that it says
Dynamic Pages for each job created one
minute ago and we can go to render.com
to verify that a recent deployment was
done
so let’s see here a deployment was
started
okay
Dynamic Pages for each job a deployment
has been started and it might take maybe
a minute or two so it is just
downloading the cache right now just to
quickly recap what we’ve done so far we
set up a project
by creating a copy of our existing
GitHub project opened it on replit and
also deployed it on render
we also created a mySQL database on
planet scale and connected to it using
the MySQL workbench and
then
added some data into it created a table
then we connected to it from replit
using SQL Alchemy and then we used that
to display the list of jobs from the
cloud database
onto the page
then we created Dynamic pages to display
each job role first we simply got
information about a single job ID from
the database and displayed that as Json
then we showed that in an HTML format
and then we used shared layout
components to make the user interface
look nicer and more consistent and we
also made connections between the main
page and the other page so now the now
our site is now live okay looks like
there was some change that did not get
pushed so let’s see looks like we have a
bunch of
things here that did not get added so
I’m going to add these and add new
templates
and click commit and push and as soon as
this gets deployed we should have all of
these changes pushed to GitHub and
deployed on jovencareers.com
and careers.com
will have a dynamic list of jobs
loaded from the database every time we
add a new job in the database it will
automatically show up here
we just have to reload the browser and
we can go click apply and look at the
actual job page as well
but of course what’s missing here is the
actual application form
so the actual application form is
missing and we are going to add that
next
so let’s go back here let’s go into
files and let us go into app.pi and see
where we can add the application form
so we want ideally the application form
to show up right below here somewhere in
fact if we go back into the wireframes
that we had created early on
you can see here that on the job page we
have this information about the job and
here we have the application form so we
want the application form to show up
right below somewhere here
so how do we make that happen we have to
make some change Inside Job page.html
so I’m going to go into templates and I
am going to first create a new template
called application dot application form
application underscoreform.html
and I’m going to go into jobpage.html
and include it so first let me just put
to do
application form goes here
and let me close this for a moment let
me also
put this away to the side so application
form goes here
and let me import that inside
jobpage.html
so let me import
inside the container
let us import
application
form.html
okay and let’s go back here let’s reload
this page
okay there seems to be an error
oh it should be called include
yep and let’s reload that
okay so now we have here to do
application form goes here and now we
can start creating the form
so to create forms in HTML there is a
special tag called form so first let’s
just give this a title a application
form and there is a stack called form
and that’s how you create a form in HTML
and within the form we want some inputs
so there’s a tag called input and the
most and you have to give each input a
type so the most common type is text and
you have to give each input a name so
let’s just call this full underscore
name
and that’s it
and that should show an input box
and let’s just save that and let’s see
what that gave us here
okay so now we have this input box but
we probably want some kind of a label
here so we can go in here and we can
actually give it a label so we can say
label
full name
and we can also show
some sort of a placeholder here so we
can type placeholder and attribute
placeholder and say
Bruce Wayne again this is something that
if you take a basic the even the most
basic HTML tutorial they will show you
exactly this right so
now you have
full name Bruce Wayne I probably want
this on the next line so I am just going
to put a br here so BR is used to create
a new line so these are all common HTML
tags that you can look up how to add a
new line in HTML okay so now we have
full name Bruce Wayne that’s nice and of
course this is not the actual field
information this is just a placeholder
and as you start typing it will go away
and what are the things we want for an
application so let’s go back here let’s
check the design that we had
xcaliddraw.com okay so we want name
email LinkedIn
education work experience and resume
link and education work experience
should allow multiple lines of text and
then resume link should be a URL
LinkedIn should be a URL so let’s come
back and let’s start putting these
things in so let’s put label
email
and we can put in
put
type equals
text name equals email and this name is
going to be important later you’re going
to see how
Bruce wayne.com
and let’s create a again another label
and this time we have the LinkedIn
and let’s see input type equals text
name equals email
placeholder equals
LinkedIn let’s call it LinkedIn URL
LinkedIn dot in linkedin.com in slash
Bruce Wayne okay so it’s nice to provide
hints as to what you expect to see in
the form
that makes it easier for the people
filling the form and I think we might
need maybe we can just put this inside a
div each one
so that they show up separately
and use a br here
so div simply creates a box around
things and then two things don’t show up
on the same line if they are in
different divs
so let’s check that
okay close enough
let’s put BR here as well so before we
add the other inputs
let’s add a submit button
to the form so now we have full name
email LinkedIn URL all these are there
let’s add a submit button so we can add
a submit button simply by
saying input type equals submit
and that’s it and we can also say name
equals submit if you want
but this is all we need to add a submit
button
great so now we have full name email
LinkedIn URL submit maybe we need some
margins here so let me just do class
MB
2 and let’s put that all over
and let’s check that one more time
okay our form is looking nice so we have
Apple full name email LinkedIn URL and
we can click submit but nothing happens
when we click submit you can see it just
reloads the page
so
well actually something does happen
if you see here what has happened here
is it has reloaded the page but it has
added some information in the URL so
looks like the names of the inputs got
picked up and something is supposed to
show up here which is not showing up yet
because we have not filled the form
so let’s come back and let’s do one
thing first let’s fix this this should
be called LinkedIn
URL and let’s add an action to the form
so an action lets us specify where the
data in the form is supposed to be sent
so when we click submit we want this
information to be sent to job
and
remember this is being used inside job
page.html and inside job page we have
this job object and is in this job
object we have
ID so I can go back here into nav sorry
into application form and I can say that
I want this to be sent
into job ID
slash apply okay so we don’t have a
Handler for this route yet but this is
where we want this information to be
sent so now if I just
reload the page
and then fill some information let’s say
our caution is our caution is at
joven.ai
and let me leave this blank and I click
submit
observe the URL
so now the URL has gone to
German careers website V2 repel.com
apply and then we have a question mark
and then we have full name equals Akash
plus n plus s and then email equals
something and then LinkedIn equals
something so this data got encoded in
some format and added to the URL
but of course we don’t have any routes
in our flask application to handle them
so that’s why it says not found over
here
but that’s where we can now go ahead and
we can
handle this by creating a new route
so let’s come in here and let’s say app
dot route
and let’s do slash job and slash ID so
now
we have the ID here
and then slash apply
yeah so slash job slash ID slash apply
then
let’s call this apply to job and once
again it’s going to get the ID so it’s
going to match slash job slash one slash
apply slash job slash two slash apply so
anything that has slash job slash some
ID slash apply this is only going to
match slash job slash one two three
that’s not going to match job slash one
slash apply okay
so now we have this information here
about the ID
and from this ID we can get the job if
we want but how do we get all this
information that is there after this
question mark so you can see there is
all this information after the question
mark
a question mark full name equals Akash
NS and so on the way to get that
information is using
the request
variable from flask so we can come in
here and we can say
data equals request Dot args okay and
for a moment let’s just return
Json fi
data
and let’s see what that does so we are
getting request.args and request is
imported from flask
and then we just say jsonify data so
we’re just taking whatever is there in
request.arcs and converting it into Json
let’s go back and submit the form once
again so we have akashness email
akashness at jobin.ai and let’s click
submit
and now when we send this data to the
apply route
okay yeah when we send this data to the
apply route you can see that now all
this information which was there in the
URL got read into this variable data and
then it got converted into Json so now
here we have email full name LinkedIn
and submit we probably don’t want to
submit so I can go back here and remove
the submit remove the name for the
submit so this will not get a name
and now if I reload this page you’ll see
that it
let’s see if I click submit once again
from this page
now it is only showing us email full
name and Linkedin URL
great so that’s good now we have some
data
that is filled in from one page and it
is sent into another page
and here inside this page inside the
page inside the route job slash ID slash
apply we can do some things we can store
this in the DB
and we can maybe also maybe display an
acknowledgment
and maybe we can also send an email so
we can do all sorts of things with this
information
now remember our job listing
our application form has a bunch of
fields so it also has education and work
experience and resume link and putting
all that information in the URL can make
the URL too long and also just slow
things down a little bit so there is
another way you can submit forms one way
to submit forms is using sending data to
a new route in the URL
another way to submit from or another
method to submit forms is something
called post so here what you can do is
you can say method equals post
and now
if I just go back here
and reload this page
and let’s do this again
and click submit
so now you can see that we get an error
first of all saying that this method is
not allowed on this URL and second there
is nothing in the URL the first name
last name Etc don’t show up in the URL
anymore you can take a closer look here
it just says slash job slash apply so
when you are submitting using the post
method then you need to process
information using the post method tool
so you can go in here and you can say
methods equals post
so now we have the form application
form.html which uses the post method
and then we have the route slash job
slash ID apply which
also expects the post method so it
expects some data to be posted by the
browser and not sent in a URL so now if
I go back once again and click submit
once again
you can see now that nothing was sent in
the URL and nothing is getting displayed
here that’s because now when you post
data the data is no longer in
request.arcs request.arcs contains
information from the URL when you post
the data is present in request.form okay
so now I’m gonna go back one last time
and click submit once again and this
time
you can see when we clicked submit that
data was posted
to this URL slash job slash three slash
apply so nothing in the URL but the data
was posted it was sent by the browser
along with the request to this URL and
now that data was accessed using
request.form and finally that data was
displayed here as email full name and
Linkedin URL as Json
okay so let’s now just go ahead and add
the other form Fields as well so I’m
just going to add in the other form
field so we have LinkedIn URL then we
have
I believe
work education work experience and
resume URL so I’m going to create one
div
and let’s put in a label here
education
and let’s put in an input here okay so
now we want a multi-line input and
there’s a special tag for multi-layer
input called text area so let’s call
that text area let’s give it the name
education and that is going to be a
multi-line input
and I think you have to close it like
this
so again something that can be looked up
easily what is a multi-line input how to
create a multi-line input in HTML
education then we have work experience
and then we have text area again
name is
work
experience
great and finally we have a resume URL
I’m just going to copy this and paste
this in here
and let’s change this to
resume URL and the placeholder let’s
just remove the placeholder here
and let’s just call this
resume URL
okay
let’s add back this class here class mb2
everywhere
so now our form is largely complete we
have
if we go back here and reload the page
we should see all the fields okay we
might need to just add
br’s here
so now we have full name email LinkedIn
URL education work experience resume URL
and we can click submit that’s nice and
maybe these can be a little bigger so
we’ll handle that styling later but at
least we have all the fields now and I
can just put in information into some of
these
and let’s just put some sample
information here
and let’s click submit
and all of that gets posted and nothing
is sent in the URL so it’s nice and
short but all the information is sent
into
flask
and of course now we can come back into
flask and we can probably actually
render this information properly so
let’s say application
let’s create a file a new file here
and let’s call it application
submitted or just application.html
let’s call it application submitted dot
HTML
and in application submitted.html and
this is the template that we’re going to
render from that route which handles the
application so this needs to be an
entire HTML page so once again I’m going
to go to the job page I’m going to pick
up doctype
HTML
let’s put that
and let’s get HTML
and let’s get title
application submitted let’s just say
that
of course that should be inside head so
let’s put that inside head
and let’s put body and in the body let’s
start just showing that information so
H4
full name
maybe just a div
and let’s look for a variable called
application and from the application
let’s get
full underscore name and maybe let’s do
one more so
let’s get
email and let’s print the email here
okay
and now let’s go back into app.pi and
let’s render that so now we are saying
instead of jsonify the data we want to
say render
template
application
submitted.html
and we want to pass application as the
data that was received
so we are taking the form data we are
taking that dictionary that we get from
the form data and we are passing it with
the name application
so let’s reload okay reloading does not
work when you’re posting information so
let’s just post again
okay application submitted.html template
not from there’s a typo so let’s call
the application let’s fix that and let’s
reload and let’s post again
okay so now you have full
name.ai so that’s nice how about we
finish this up we put in all the other
fields here as well so application
submitted full name
and then we have email and then we have
LinkedIn URL
so let’s put LinkedIn URL here
then
we have
work experience education
and resume URL
so let’s fix that
resume URL
resume URL and then we have
work experience
education
education all right so
we’ll have to go back and submit again
now we have the full name email LinkedIn
URL education work experience resume URL
all the information is there but
wouldn’t it be nice to have the same
layout that we had on the previous page
here
so it would be nice to have the same
layout and now you can probably guess
how easy it is to do that if I just go
into job page.html I can probably bring
over include bootstrap.html here into
application submitted
so the bootstrap Styles will come in
and then I can go into job page.html and
bring in the nav and the banner
let’s do that
and let’s go into job page.html and
bring in the footer as well let’s do
that
thank you
and of course let’s put all this into a
container so div
class equals actually how about we just
copy that over as well so let’s go to
job page
and let’s grab the this piece
and let’s go back into
this and put all of the code inside a
container
so let’s take all that and then just
give it just a quick indentation so that
it lines up properly
and maybe let’s also add a
nice confirmation here that
your application has been submitted
okay
so
just like that now if we click submit
you can see that we’ve transformed this
page in
just a few just less than a minute now
it is the exact it we went from this to
this and of course there is some work to
be done here it needs it’s not as nice
as it can be so we’re going to fix that
in a second but what we can also put
here is maybe the job name itself so if
I go back in app dot pi and I get the
job information so I say job equals load
job from DB ID
and just provide
job equals job
then I have information about the job
here so let me go in here and let me say
your application for
job
title
for the role of
so and so
at Jovian has been submitted
and let’s maybe fix
some of this
class
MB
0 and maybe let’s use here
class and before so just adding space
below and not above the
code so let’s again submit that once
again
and this is what it looks like maybe we
don’t even need headers so maybe we can
just use
bold text here
and that should be fine
and this can just be mb2 so let’s just
make this bold text
and let’s grab that class
okay let’s take another look
yep so your application for the role of
front-end developer at jobin has been
submitted and we have the full name
email LinkedIn URL education work
experience resume URL so whatever
information you’ve provided all of that
is going to get
displayed here right and maybe we can
make this bold instead of
putting it in quotations
but that’s pretty much it that’s all we
need to do and now
so that’s one thing we have displayed an
acknowledgment then we also want to
store this in the DB as you can guess
that is going to be fairly
straightforward as well so I can very
simply just go into
the database dot pi and here I can
create a new
function
add application to DB and that’s going
to take a job ID because each
application should ideally be connected
to a job ID and it’s going to take the
application information and it’s going
to put that into a table but we will
need to create a table first
so let’s create a table I have some code
here already for creating a table called
applications so let me copy this
and let me come into MySQL workbench and
paste it here
so we are saying
let’s make it a little simpler so we are
saying create table applications so
we’re going to create a new table called
applications and the applications table
is going to have an ID
which is going to be the unique
application ID it is going to be not
null Auto increment and it is also going
to be the primary key
then each application is going to be
associated with a job so it’s also going
to have a job ID so that’s what this is
for
and each application will have a full
name it have an email it will have a
LinkedIn URL education work experience a
resume URL all of that
and let’s just create that table
and that table has been created so we
can see show tables
and you can see here that we have
applications table and a jobs table and
let’s check show select
star from applications
and there is nothing inside applications
but now we are going to write but now we
are going to write the code to put
things into applications so once again
we say engine dot connect as con
and then we say
let me first create the query so query
will be text
select no
insert
into applications
and we need to give it the list of
columns that we’re going to insert so ID
is going to be filled automatically so
we’re going to insert job ID full name
email LinkedIn URL education work
experience and resume URL so let’s put
that on the next line Maybe
and the way to put it on the next line
is or let’s just put it on the same line
that’s okay so we’re going to insert a
job ID we are going to provide a full
name we are going to provide
email we’re going to provide LinkedIn
URL we’re going to provide education
we’re going to provide experience and we
are going to provide
resume URL
so insert into applications first we
provide the list of
columns we are going to specify and then
we say values again this is a Syntax for
insert and then here we provide the
values that we want to insert
now we can’t put all this directly so
basically what we’re going to do is have
some variable names here and we’re going
to pass those variables later
so let me put job underscore ID so
that’s going to become a variable name
colon full underscore name that is going
to become a variable name
then colon email that is going to become
a variable Name colon
LinkedIn URL that is going to become a
variable Name colon education that is
going to become a variable Name colon
experience that is going to become a
variable name and colon resume
underscore URL and that’s going to
become a variable name too
so now that’s the query that’s basically
what we are going to put in so then we
can say con dot execute and we’re not
interested in the result here we just
wanted to succeed so con.execute query
and let’s start putting in the
information job underscore ID which will
replace this value is going to Simply Be
job underscore ID that is coming here
so let’s put that there then we have the
full underscore name that is simply
going to be the application which is
going to be passed as a dictionary so
what we’re going to do is we are going
to take this dictionary that is
sent in request.form and we’re going to
pass it to this
function add application to DB so from
the app or let’s just call it data just
to
keep it shorter so full name is simply
going to be the full name from the data
and similarly we will do this for
a bunch of other
things so
the
email
is simply going to be the email from the
data
then the education
is simply going to be the education from
the data
finally we have work experience
is going to be work
experience
and we have resume URL
that’s going to be
the resume URL from the data okay and we
just want to execute this and that’s it
now what do we do we go into app.pi and
we import
what is it called
add application to DB so add
application to DB we import it and we
simply call add application to DB
inside app.pi
after getting the data from the form we
say add application to DB we give it the
job ID or simply the ID which is a job
ID and we give it the data
so this ID is going to populate the job
ID column you can see add application to
DB does that
the first argument is used to populate
job ID and then the rest of the
arguments or the data is used to
populate the rest of the columns
okay I think that should do it so this
is going to store the data into the
database so let’s save it and let’s let
that run
looks like it’s running
So This Is The Moment of Truth this is
what we’ve been building towards
so let’s see Akash NS akashness at
joven.ai I’m going to put in a good
value here this time because it’s
probably going to go into the database
and education let’s see CSC IIT
Bombay work experience
software
engineer Twitter
resume URL I’m not going to put anything
in there right now and let’s click
submit
let’s see if this works
okay a value is required for the bind
parameter LinkedIn URL so looks like we
made a mistake so this is exactly what
happens you have to go in you have to
fix things let’s get LinkedIn URL in
here
and let’s go back
the data still there fresh let’s click
submit
what else now
a value is required for experience looks
like we did not put in experience oh
it’s just called experience is it
let’s see oh this was
okay this is this should be called work
experience and that should do it
let’s submit now
unknown column experience in field list
okay this should be called work
experience as well
perfect looks like this went through so
your application for the role of
front-end developer Joven has been
submitted full name email LinkedIn URL
education work experience resume URL and
let’s go into this and select start from
applications
and looks like this information is here
so
ID is one the job ID is three and you
can see here job ID3 is front-end
developer
and the email is akashness at jobin.ai
the LinkedIn URL is as provided
education work experience and resume URL
perfect and you can try making another
application and that will show up as
well so
that’s something that can be done easily
so let’s take this and let’s just Commit
This and let’s then revise everything
that we’ve done today so
let’s see let me add all of these
and let’s say
store application in database
and let me commit in push
and with that we have
added a form to collect applications on
the job Details page created a flask
route to handle application form
submissions created a table to Store
applications in the cloud database and
stored the submitted applications and
shown an acknowledgment so we have this
nice
let me just change that to
and
so we have this nice message that page
that shows up informing the person that
your application for the specific role
has been submitted and remember you can
now go into any role so you can go on
Jovian you can go into the role of data
scientists for example and you can
submit an application here
and you can click submit and that’s
going to submit for that specific role
right all of those applications are
tracked in the same table but you can
always filter and figure out
which job ID you want to look at the
applications for
so that’s it that’s all we’re going to
do today now you can make some
enhancements here as well you can make
some functional and aesthetic
improvements you can try to validate the
application form responses before
submission so you can Mark some of these
fields as required and you can also
maybe put in
other information like URL so you can
say HTML form validations
and search that
and let’s see search for
mdn
client-side form validation
and here you can see that there are many
ways to use form validation
one thing you can do is you can say
something is required
and then it won’t allow submission then
you can also specify certain patterns
and you can also specify specific input
types so if you search for HTML input
types
you can see that there are all these
input types and some of these are like
URL and email so if I just quickly go
back here and change the form so go into
Form application form.html and change
the type here to email
and Mark this is required
and Mark this is required
and change the type here to URL
and maybe also change the type here to
URL
now if I go back here and I try to
submit first if I try to submit empty
it’s gonna fail
okay not yet
I believe it just needed to reload a bit
but yeah I think it should it should
there is a way to ensure that it fails
so maybe it’s not doing that right just
yet let me just reload and try again
yeah you can see here it says please
fill out this field and let’s say I fill
this out and now if I say submit now it
says please fill out this field and
let’s say I don’t put in an email here
now it says please include an ad in the
email address okay please enter the part
following at
so it will validate the email and let’s
say I try to put in something that’s not
a URL here it will validate that it says
please enter a valid URL and similarly
here as well please enter a valid URL
right so you can leave this blank but
you cannot enter invalid data so that’s
one form of validation that you can do
I think we did that then another thing
you can do is you can send an email to
the administrator and to the candidate
every time an application is submitted
and sending emails can be done using
email sending apis so there is one
called
mail
jet you can try out
so mailjet.com
all you need to do here is
you sign up and then it will give you an
API key and you can just send emails
using that API key
so that’s one way to send emails another
thing that you can do is you can include
a captcha because right now people can
just use a selenium or some kind of a
web scraper and keep submitting again
and again the same form and
overload your database and you probably
don’t want that and the way to avoid
that is using those captures those
things that ask you to select traffic
signs and select boats and cars by
showing boxes
so one capture tool that you can use is
called hcaptcha.com Edge captcha
hcaptcha.com so
what it gives you is this it basically
whenever you try to select something and
then you try to click I am a human
you’ll add this box and it will ask the
user to First validate something like
this so maybe selecting trains so here
it select bus bus next train train let’s
say Get it wrong it’s going to reject
the form submission so this way people
cannot try to spam you or fool you so
that’s something that you can look into
sending emails is something that you can
look into
another thing you can try is to create
an API to access individual job listings
and individual applications by ID
so doing individual job listings is
actually pretty easy you can just go in
here app dot pi and
just add a route here at app
dot route
slash job slash okay slash API slash job
slash ID
and all you do here is Def should
job Json
which takes the ID and which just gets
the job from the database
and says return
Json file
job
and just with that you can now go back
and you can say
slash API slash job slash three and just
get the same job in Json format
all right so similarly you can add
another route for slash API slash
application slash ID which can return
data for a particular application and
each application also had has an ID and
do that or you can also have a API to
just get the applications for a specific
job so all sorts of things you can do
now you have all that power so these are
some functional and aesthetic
improvements that we can make
and then in terms of even going Beyond
and sort of making this a full-fledged
website you can create an admin login
interface so that we don’t have to
directly interact with the database
admins can log in and create and check
submitted applications admins can add
jobs admins can delete jobs admins can
Mark applications as accepted rejected
and users can also maybe login to check
their application status so a lot of
work can be done a lot of possibilities
here so let’s just Commit This one last
time
and
what do we do we added an API
so let’s just add that API here and
let’s click commit and push
and soon enough all of this is going to
be available on jovencareers.com
most of it already should be so here we
have the jobs and here we have the job
Details page
and here we have an application form
which
soon enough we’ll have the validations
as well
and here then we can submit and then we
display the application
and we also make that
entry into the database
there we go
so yeah that’s everything that we’re
going to look at today so quick recap we
use the project from the previous
tutorial made a copy of it opened it on
replit and deployed it to render at
jobin careers.com we set up a cloud
mySQL database on planet scale
we created a jobs table added data using
the MySQL workbench we connected to the
database from replit using SQL Alchemy
we in fact created a database.pi file
which has all of the database related
logic it encapsulates
then we connected to the database and
displayed the list of jobs from the
cloud database using SQL Alchemy we
created Dynamic pages to display each
job role
each page each job got its own page we
shared the layout Styles and navigations
using bootstrap so all the pages look
nice and professional and consistent and
we consistently deployed all these
changes to GitHub and render and we also
made sure that we are not exposing our
database password on GitHub so that’s
why we used secrets on replit and also
on render then we added a form to
collect applications on the job Details
page and then we created created a flask
route to handle the application form
submissions then we created a table to
store the applications in the cloud
database finally we stored those
submitted applications and showed an
acknowledgment and then we also
validated the application form responses
before submission and there are few
things that given a couple more hours we
should be able to also incorporate to
make our site even more robust
so just like that in our in a matter of
two tutorials six or seven hours of work
we have gone from this this concept this
idea of a jovian couriers website and
Details page applications and
acknowledgment page so we’ve gone from
there this to this actual real
functional website that we can actually
use and it’s completely functional
there’s nothing here that is stopping us
from using it actually for getting job
applications for roles for jobin so the
data scientist page and then you put
some information here and it validates
and
then you try to submit
and then you get a response okay so play
around with this it’s the we’ve covered
a lot of ground today so it’s not
something that you will immediately feel
completely comfortable with and you may
have to work through each step each step
has a fair bit of depth in into it you
may have to look up references for each
step but if you can work through this
entire tutorial just try to recreate
this on your own then you’ve mostly
learned a large part of what happens in
web development and there was a question
how will web development help me at my
job I can only see it being used for
making portfolio websites or personal
projects right now well we’ve actually
seen that some of the folks who have
graduated from the boot camp and gone
into a job have had this requirement
where maybe they’ve created a plotly
dashboard or maybe they have created
some analysis and they need to put that
up online
so that other people in the company can
see it so a couple of people have had to
do this or maybe they have created a
machine learning model and now they need
to put create a web application so that
people can interact with the machine
learning model or maybe they need to
offer the machine learning model as a
rest API so that you can send data to
the machine learning model and get a
response back and if that sounds
familiar that’s very simple very similar
to The Post form response that we looked
at right so there are a lot of areas
it’s not something that you’d probably
be doing in the first six months to one
year of your role as a data analyst
but in case you need to
you always have this and web development
of course is always a good skill to have
because it just
90 percent of what you do on a computer
is happening on the web and now you have
the power to create that we’ve covered a
large portion of what happens in web
development this is what we do all day
at jobin essentially when we’re building
the platform there are a few more things
as mentioned in the future work like
creating an admin login interface
allowing admins to Mark applications and
creating a user login which will just
make this a full-fledged web application
that you can then start promoting and
start getting users for
so I hope you found this interesting and
I know it’s challenging but give it some
time and I hope you’ll enjoy building
your own websites
congrats on making it to the of this
long and detailed tutorial I hope you
were able to follow along and build your
own website share like subscribe and
I’ll see you next time
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
We hope you enjoy this tutorial, and we look forward to seeing what you'll build! If you'd like to get your project reviewed by our team & earn a certificate, register here for free: https://jovian.com/learn/web-development-with-python-and-flask
If you have any questions or face issues, please post them in the comments and we'll help you out. Do check out our YouTube channel as well, where we're posting new tutorials every week.
Thanks @freecodecamp and Beau for hosting us! 🙏🏼
absolutely great tutorial!!!!!
if anyone is struggling with your page saying "submitted application" but your database is empty try "conn.commit()" at the end of your add_applications_to_db function to commit the upload
PlanetScale doesn't offer free database plans per April this year. Any suggestions for an alternative? with kind regards!
for those facing issue at 4:23:31 . and getting some overload error like this one : " No overloads for "execute" match the provided arguments
Argument types: (TextClause, Unknown, Unknown, Unknown, Unknown, Unknown, Unknown, Unknown)" try passing parameters in a dictionary and store it in a variable called params which you can later give as " conn.execute(query, params) ".If still you are facing issue and the data submitted through your form is not being reflected in your database then try this code which worked for me : def add_application_to_db(job_id, data):
with engine.connect() as conn:
query = text("INSERT INTO applications (job_id, full_name, email, linkedin_url, education, work_experience, resume_url) VALUES (:job_id, :full_name, :email, :linkedin_url, :education, :work_experience, :resume_url)")
params = {
'job_id': job_id,
'full_name': data['full_name'],
'email': data['email'],
'linkedin_url': data['linkedin_url'],
'education': data['education'],
'work_experience': data['work_experience'],
'resume_url': data['resume_url']
}
result = conn.execute(query, params)
# Commit the transaction
conn.commit()
return result
Planetscale has removed the hobby plan, and as a student we can't pay for the paid plans. So is there any alternative to it. Please share it the app has stopped working and I have to make a similar app for my project.
Excellent tutorial. Nothing irrelevant. To the point👌
Sir, i imported github codes to replit but when i tried to run the code it is showing "not found"…, all files are there
I gained more knowledge from you than I did from my entire college web development course. Thank you, sir.
jinja2.exceptions.TemplateNotFound: home.html i am stuck . unavle to run application through template
1/14/47
This is a nice tutorial. I am stuck at the Cloud database part, planet scale no longer offer free-tier services. Does any one know a good alternative to planetscale?
Now that Planetscale removed its free plan, what hosting service should we use ?
PlanetScale is no longer free. Can someone suggest an alternative?
Good introduction to Flask, but you should absolutely never be adding inline styles or <b> tags, that is such a bad practice and not something you should be teaching new developers. You should also absolutely not be putting <style> blocks in the body of a page.
1:08
hi all,
Facing issueat 3:30:04,during template rendering the title is not dynamically passed in to my html
kidnly provide any work around if anybody faced issue here
thankyou
Thank you so much Sir
How to save a html file . 😢
When i created a secret key it gave me value None
.replit file should be like this:
language = "python"
run = "python3 app.py"
modules = ["python-3.10:v25-20230920-d4ad2e4"]
[nix]
channel = "stable-23_11"
The course is really cool. the best tutorial for flask for beginners
4:25:00 (if data is not inserted in application table then use conn.commit() )
i wanted to share the web site i developed using this video cos its my frst time web though i used pycharm cos my code on replit was like #python not found so i knew there aint way after trying many time,i watched this video for two weeks while building my own and learnt everything, aakash is my teacher for life
Anyone know a free alternative to planetscale as now it is not free ?
Loved your content , is it important to buy a domain to put it on your submit project and earn certificate section?
I now stuck at 2:58 Does anyone having problem with PlanetScale revoke the username and password problem, saying they found usernama and password found in public repository on GitHub. It happened after I push the github commit. How to solve this issue?
not getting the url to put the image , plz help
Can someone help me, how I can search jobs in database and show the results in the web app? thank you
RReally thank you it has been a great help. I was trying to learn flask form other sources but this was the most helpful 4.5 hr video.
But sir i want to ask. I created a profile on Jovian and their were alot of chataGpt that were there to also help guide also but you removed all of them why? Those very many API's were there to guide we the students in diverse ways
Aakash has been a very big blessing to my career. I had an interview and somehow passing Algorithms through code challenges was difficult. But the moment i lay hold of Aakash tutorial on Data structures and algorithms. After going through the course this time i went into the test and came out successful. Thank you Co-founder of Jovian Aakash
Its not Pythun… Its Python(sounds more like Pythan).. 🙂
Great job ! Thank you for this tutorial
there is an isssue in creating database with debit card how to solve it?