CODEWITHSUNDEEP
pythonhtmlpostgresqlflask
coder96
coder96

Reputation: 63

Problem loading a web app using flask, python, HTML and PostgreSQL; not able to connect python and html scripts plus Internal Server Error message

Recently, I have started working on a new project : a web app which will take a name as an input from a user and as result outputs the database rows related to the user input. The database is created using PostgreSQL and in order to complete the task I am using Python as a programming language, followed by Flask (I am new to it) and HTML. I have created 2 source codes, 1 in Python as below :

import os
import psycopg2 as pg
import pandas as pd
import flask
app = flask.Flask(__name__)
@app.route('/')
def home():
    return "<a href='/search'>Input a query</a>"

@app.route('/search')
def search():
    term = flask.request.args.get('query')
    db = pg.connect(
        host="***", 
        database="***", 
        user ="***",
        password="***")
    db_cursor = db.cursor()
    q = ('SELECT * FROM table1')
    possibilities = [i for [i] in db_cursor.execute(q) if term.lower() in i.lower()]
    return flask.jsonify({'html':'<p>No results found</p>' if not possibilities else '<ul>\n{}</ul>'.format('\n'.join('<li>{}</li>'.format(i) for i in possibilities))})

if __name__ == '__main__':
   app.run()

and HTML code :

<html>
    <head>
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
        <input type='text' name ='query' id='query'>
        <button type='button' id='search'>Search</button>
        <div id='results'></div>
    </body>
    <script>
        $(document).ready(function(){
            $('#search').click(function(){
            var text = $('#query').val();
            $.ajax({
            url: "/search",
            type: "get",
            data: {query: text},
            success: function(response) {
            $("#results").html(response.html);
            },
            error: function(xhr) {
            //Do Something to handle error
            }
        });
      });
     });
    </script>
</html>

For these scripts I read the discussion here. These scripts are giving me troubles and I have two main questions : First : How are these two source codes connected to each other? whenever I run the python script or the html, they look completly disconnected and are not functioning.Moreover, when I run the Python script it gives me this error message on the webpage :

Internal Server Error The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there is an error in the application.

and this message on terminal :

Serving Flask app 'userInferface' (lazy loading) Environment: production WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. Debug mode: off Running on....

Can someone please help me by showing how can these 2 scripts connect and why am I getting such errors. Thank you.

Upvotes: 0

Views: 651

Answers (1)

Владислав Небеснюк
Владислав Небеснюк

Reputation: 764

You need to use render_template to connect Flask and your HTML code.
For example:

from flask import render_template

@app.route("/", methods=['GET'])
def index():
    return render_template('index.html')

Upvotes: 2

Related Questions