How to make website using flask in python || LIVE

-


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.



  • Install Python from Python official website
  • Install flask with using command:    pip install flask  in cmd [ windows ]


  • app.py

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)




    

  • layout.html
    • 









<!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>
















    

  • home.html
    • 










{% extends "layout.html"%}



{%block title%} Home {%endblock%}



{%block content%}



<h1>You are in Home page</h1>



{%endblock%}












    

  • about.html
    • 










{% extends "layout.html"%}



{%block title%} About {%endblock%}







{%block content%}



<h1>You are in about page</h1>



{%endblock%}













































Comments











Post a Comment






























Popular posts from this blog









Make CCTV Camera Software using Python || AI and Machine learning tutori...






-














Image







   Requirements:   Python 3.x   --- download from pypi.org  opencv        -- pip install opencv-python  time            -- already included in python    That's it.   source code is here.....      Description::   from line 8 to 11 : it's trying to make a directory called "footages" if it doesn't exist.  Here, in this code, first method(from line 13 to 15) is used to add minimize facility of window.  the main method that is cctv method is all about the app.








Read more










Drowsiness detection system using openCV in python






-














Image







      The Project "Drowsiness Detection System "  is   made in Python programming language using OpenCV .          Modules used in it are:      face_recognition  [pip install face-recognition]      cv2  [pip install opencv-python]      playsound  [pip install playsound]      numpy  [pip install numpy]      scipy  [pip install scipy]      time  [built_in module]      threading  [built_in module]               Software Requirements:      Python 3.x                                  Source code→                                                                                    1   2   3   4   5   6   7   8   9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31  32  33  34  35  36  37  38  39  40  41  42  43  44  45  46  47  48  49  50  51  52  53  54  55  56  57  58  59  60  61  62  63  64  65  66  67  68  69  70  71  72  73  74  75  76  77  78  79  80  81  82  83  84  85  86  87  88  89  90  91  92  93  94  95  96  97  98  99 100 101 102 103 








Read more










Make Barcode Scanner using Python






-














Image







   In this article, we're going to learn, how can we make barcode scanner using python.   in this we're going to use :         openCV  : pip install opencv-python       pyzbar  : pip install pyzbar       IP Webcam  : install on android through play store    So, let's get Started ! firstly , we'll import cv2 and pyzbar in our code editor.             import  cv2        from  pyzbar import  pyzbar          Now , open ur mobile, and after installing IP Webcam in that,   1. open hotspot   2. Open IP Webcam   3. Click Start Server              Recommended: [  How to connect mobile camera with PC using Python  ]    and then come in your code editor in computer.         3.  url = "192.168.43.1:8080/video"       and then , Start video capturing by mobile camera url      4.  cap = cv2.VideoCapture(url) and under while loop, get started working main part. read the frame, extract barcode / qrcode from frame and extract its data and type  and show data on cv2 window. at b








Read more