html and python integration with flask

Question

can someone help to make this code more efficient. the code works, but everything is in .py file and i know i can make it more efficient but i dont know how. I know i have to create html, and have the html portion to be rendered there, but for some reason the user's input doesnt get passed to the app.py where my function is. thats why i put everything on the same file and called it a day :). but if i have 10 app, the length of my code will be so long and i have to edit the site header and all the shared resources across all the pages. any tip will be much appreciated.

!

>> Code below

@app.route('/vxlan_config', methods=["GET", "POST"])
def vxlan_config():
    vxlan_config_file = open("/Users/ahmad/vxlan_config.txt", "w")
    if request.method == "POST":
        vlanid = request.form["vlanid"]
        description = request.form["description"]
        vrf = request.form["vrf"]
        ip = request.form["ip"]
        mask = request.form["mask"]
        vxlan_conf = DCConfig(vlanid, description, vrf, ip, mask)
        vxlan_config_file.write(vxlan_conf.vxlan_config())

        return f'''
                <html>
                    <body>
    <!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.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">

        <title>Distro blu310 Config</title>
      </head>
      <body>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="/">Config Generator</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/vxlan_config">VXLAN Config</a>
      </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Other Config Gen
            </a>
          </li>
        </ul>
      </div>
    </nav>
                        <p><h3>Your config file has been saved under vxlan_config.txt</h3></p>
                        <p><a href="/">Click here to go back to the main page</a>
                    </body> 
                </html>
            '''

    return '''
    <html>
    <body>
    <!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.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">

        <title>Distro blu310 Config</title>
      </head>
      <body>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="/"> Config Generator</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/vxlan_config">VXLAN Config</a>
      </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Other Config Gen
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="/vxlan_config">VXLAN Config</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
                <body>
                    <p><h3>Enter the Values Below:</h3></p>
                    <form method="post" action="/vxlan_config">
                        <p>VLAN ID: <input name="vlanid" placeholder=3400></p>
                        <p>VLAN Description: <input name="description" placeholder=Citrix VLAN></p>
                        <p>VRF Name: <input name="vrf" placeholder=GRN200></p>
                        <p>SVI IP Address: <input name="ip" placeholder=10.248.10.1></p>
                        <p>VLAN Subnet Mask: <input name="mask" placeholder=255.255.255.0></p>
                        <p><input type="submit" value="Generate Config" /></p>
                    </form>
                </body>
            </html>
        '''

Victor · Accepted Answer · 2020-08-07 05:25:33Z

1

Flask implements Jinja2 a templating language.

You just need to create a templates folder next to this code and add your HTML code in an HTML file in it. Check Rendering Templates - Flask Documentation for more details.

Then instead of directly return a string, return:

from flask import render_template

@app.route(...)
def ...:
    ...
    return render_template("your_html_file.html")

Note that flask is going to look for your_html_file.html in the templates folder.

answered Aug 7, 2020 at 5:25

Victor

6124 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ahmad_R Over a year ago

it worked :) Thanks so much i am gonna go nuts with this now lol

Collectives™ on Stack Overflow

html and python integration with flask

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related