Ramblings Of a Network Engineer

Things I find interesting whilst levelling up my skills!

Contents

The current locally run web application is here

Technology covered

  • January 01 2023
  • Python
    • Flask
    • jinja2
    • lists
    • dictionaries
    • if/else
    • HTML



The story pt1

At this stage of the development cycle we will investigate the flask container and develop a framework to front end our project.

Web back end baseline

First lets pull together a base shell to work from, this is called Hello_flask.py

 ###This import needed to parse templates
from flask import render_template

 ###Add support for POST calls
from flask import request
from flask import Flask, redirect, url_for, request

 ###Base import
from flask import Flask

 ###The sets the flask app up
app = Flask(__name__)

 ###Sets up the flask server if this code is called directly
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=81)



Now if we run this code not a lot will happen, as there is no page to render when we browse to the url:

 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:81
 * Running on http://192.168.0.81:81
Press CTRL+C to quit
127.0.0.1 - - [11/Jan/2023 14:45:53] "GET / HTTP/1.1" 404 -



So we need a page to present at the route “/” page, like an index or readme.

 ###Add some header variables to demo thier usage
dev = 'Sam Bibby'
updated = 'Jan 11th 2023'
purpose = 'learning'

 ###This import & variable used to get todays date
from datetime import datetime
date = datetime.now().strftime('%Y/%m/%d')

 ###The route() decorator, @app.route(), binds a URL to a function.
 ###The URL in thei case is the root of the page '/'
@app.route('/',methods = ['POST', 'GET'])
def index():
   if request.method == 'GET':
      print('jolly')
      return render_template('first_page.html', data=[dev,updated,purpose], timestamp=date)



We also need to create a first_page.html file, this should be saved in the /templates folder where the source code resides, as thats where flask will look.

Note that within the html we can use Jinja2 for data manipulation. Below we create the file first_page.html as per the route decorator function.

<html>
   <head>
      <h3>Welcome to the Web query engine </h3>
  </head>
   <body>
         Current values set are as follows: <br>
         Developer =  <br>
         Updated =  <br>
         Purpose =  <br><br>

         Todays date is  <br><br>
   </body>
</html>



Now when we run our code we get the web page presented:

I can see we made a GET request below to “/”

 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:81
 * Running on http://192.168.0.81:81
Press CTRL+C to quit
127.0.0.1 - - [11/Jan/2023 14:49:17] "GET / HTTP/1.1" 200 -



This calls the route decorator for the “/” path and passes the variables in a list to the template (notice here you can use GET or POST actions to dictate the returned functionality)

@app.route('/',methods = ['POST', 'GET'])
def index():
   if request.method == 'GET':
      return render_template('first_page.html', data=[dev,updated,purpose], timestamp=date)



The template renders with the variables based on the called indexes, and we see in the front end as:

We can now add to this via creating interactive objects on the home page that launch other pages, for example a button here to call a new url, that calls a route decorator and renders a new page.

Below we update the file first_page.html file with a button object that calls the webpage /links

<html>
   <head>
      <h3>Welcome to the Web query engine </h3>
  </head>
   <body>
         Current values set are as follows: <br>
         Developer =  <br>
         Updated =  <br>
         Purpose =  <br><br>

         Todays date is  <br><br>

         <form action = "http://localhost:81/links" method = "get">
         <button type="submit">Check My Bios</button>
         ::: See a list of really cool links
         </form><br>
   </body>
</html>



We add a new route to our Hello_flask.py file, this will pass a dictionary link_me that the jinja2 engine can parse when rendering the second_page.html file.

 ###The route() decorator, @app.route(), binds a URL to a function.
 ###Where The decorator can renders a template with static variables
@app.route('/links')
def links():
   link_me = {"YouTube":"https://www.youtube.com/channel/UCFsz8jHR4Al-BqbfzFkGLPg",
            "Cisco Live":"https://www.ciscolive.com/on-demand/on-demand-library.html?search=bibby#/",
            "Community forums":"https://community.cisco.com/t5/user/viewprofilepage/user-id/194314)",
            "Discord":"https://discordapp.com/users/933769884050018364",
            "Linked in":"https://www.linkedin.com/in/samuel-bibby-22b03751/)"}
   return render_template('second_page.html', hyperlinks=link_me)



Then in the /templates folder we create the template thats to be rendered second_page.html. This tempate uses jinja2 to render the items in the passed dictionary, where shown also has one if statement to highlight the key Discord in bold.

Note: had to write the for loop in liquid format to get it past the git parser checks, else we could unpack them as one line per (k,v in hyperlinks.items())

<html>
   <head>
      <title></title>
   </head>
   <body>
      <ul>
         
      </ul>
   </body>
</html>

And front the front end when we click the Check My Bios button, we are cross launched to the new page thats rendered right before our eyes!:

So Viola, this is a basic flask app that we can use to present data in a nicer fashion than asking then to run some CLI.

Next we will look at leveraging API’s towards DNAC, then how we can tie them together with flask for a nicer front end.