VIDEO
How to make Website using Flask in Python
In this tutorial, we'll use : Python, flask, bootstrap & html
and will learn to make website using flask framework in python.
You need only basic knowledge of python , flask ,html and bootstrap to understand this tutorial.
from flask import Flask,render_template,url_for
app = Flask(__name__)
@app.route ('/' )
@app.route ('/home' )
def home ():
return render_template('home.html' )
@app.route ('/about' )
def about ():
return render_template('about.html' )
if __name__ =="__main__" :
app.run(debug=True )
<!doctype html>
<html lang= "en" >
<head>
<!-- Required meta tags -->
<meta charset= "utf-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1, shrink-to-fit=no" >
<!-- Bootstrap CSS -->
<link rel= "stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity= "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin= "anonymous" >
<title> {%block title%} {%endblock%}</title>
</head>
<body>
<!-- navbar -->
<nav class= "navbar navbar-expand-lg navbar-dark bg-primary" >
<a class= "navbar-brand" href= "#" > MyFirstApp</a>
<button class= "navbar-toggler" type= "button" data-toggle= "collapse" data-target= "#navbarSupportedContent" aria-controls= "navbarSupportedContent" aria-expanded= "false" aria-label= "Toggle navigation" >
<span class= "navbar-toggler-icon" ></span>
</button>
<div class= "collapse navbar-collapse" id= "navbarSupportedContent" >
<ul class= "navbar-nav mr-auto" >
<li class= "nav-item active" >
<a class= "nav-link" href= "{{url_for('home')}}" > Home <span class= "sr-only" > (current)</span></a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "{{url_for('about')}}" > About</a>
</li>
<li class= "nav-item dropdown" >
<a class= "nav-link dropdown-toggle" href= "#" id= "navbarDropdown" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown
</a>
<div class= "dropdown-menu" aria-labelledby= "navbarDropdown" >
<a class= "dropdown-item" href= "#" > Student</a>
<a class= "dropdown-item" href= "#" > teacher action</a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" tabindex= "-1" aria-disabled= "true" > Disabled</a>
</li>
</ul>
<form class= "form-inline my-2 my-lg-0" >
<input class= "form-control mr-sm-2" type= "search" placeholder= "Search" aria-label= "Search" >
<button class= "btn btn-outline-success my-2 my-sm-0" type= "submit" > Search</button>
</form>
</div>
</nav>
<!-- navbar end -->
{%block content%}
{%endblock%}
<!-- slide images -->
<div id= "carouselExampleControls" class= "carousel slide" data-ride= "carousel" >
<div class= "carousel-inner" >
<div class= "carousel-item active" >
<img src= "http://cdn.thecoolist.com/wp-content/uploads/2017/04/Computer-Monitor-computer-parts.jpg" class= "d-block w-100" alt= "..." >
</div>
<div class= "carousel-item" >
<img src= "http://cdn.thecoolist.com/wp-content/uploads/2017/04/Computer-Monitor-computer-parts.jpg" class= "d-block w-100" alt= "..." >
</div>
<div class= "carousel-item" >
<img src= "http://cdn.thecoolist.com/wp-content/uploads/2017/04/Computer-Monitor-computer-parts.jpg" class= "d-block w-100" alt= "..." >
</div>
</div>
<a class= "carousel-control-prev" href= "#carouselExampleControls" role= "button" data-slide= "prev" >
<span class= "carousel-control-prev-icon" aria-hidden= "true" ></span>
<span class= "sr-only" > Previous</span>
</a>
<a class= "carousel-control-next" href= "#carouselExampleControls" role= "button" data-slide= "next" >
<span class= "carousel-control-next-icon" aria-hidden= "true" ></span>
<span class= "sr-only" > Next</span>
</a>
</div>
<!-- slide finished -->
<div class= "text-center bg-primary text-white" >
<footer> This app is copyright & copy to CID</footer>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src= "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity= "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin= "anonymous" ></script>
<script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin= "anonymous" ></script>
<script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity= "sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin= "anonymous" ></script>
</body>
</html>
{% extends "layout.html"%}
{%block title%} Home {%endblock%}
{%block content%}
<h1>You are in Home page</h1>
{%endblock%}
{% extends "layout.html"%}
{%block title%} About {%endblock%}
{%block content%}
<h1>You are in about page</h1>
{%endblock%}
Comments
Post a Comment