Flask Blog: Basics and Project Structure

In this post, I discuss the first part of the flask blog. The Flask framework was used to build this very site which serves as a nexus to house and showcase work, posts, and applications. From what I understand, flask is a simple and straightforward framework that allows a user to create web-based applications.


        Before progressing with further projects, a platform to display and house projects and web-apps was created. This would also allow the creation of posts to discuss projects in greater detail. This platform would be a full system that encompassed the front-end (website), backend (program/script), and a place to store the data (database).

Flask offered a great framework for creating a website while allowing the connection to backend processes and databases. It also allows for a variety of extensions to which increase its capabilities furthermore. The YouTube tutorial series by Corey Schaefer was used as a guide and template; he went over most aspects of a flask application and this blog was a direct result from going through that series. 

Downloading and Installing:

The first thing to do was download and install the flask package. Utilizing Anaconda, a virtual environment called flask_blog was created and the flask package installed; a project folder in PyCharm called flask_blog was also created. As the application grew, more extensions would be downloaded and added to the project.

Setting up Directories:

The flask application had two special directories created, static and templates. The static directory would be used to hold files and data that would be used by the application. These may include, pictures, data, scripts, etc. The templates directory was designed to hold HTML templates, which will be called upon when a request is sent to the application (going to another part of the webpage).

Creating the Script:

The script itself was straightforward and would serve as a basis for more complex functions later on. Within the script, a python file called config.py was created. This file would contain configuration information for the application. A file called application.py would be the file used to run the application.

from flask import Flask
... # more imports

application = Flask(__name__)
... # more application options

This is a file that initiates the application. To run the file, from the terminal type: python application.py.

from config import application

if __name__ == "__main__":

A file called routes.py would act as a nexus for the pages and endpoints for the website. Decorator functions were used to add functionality to the application, either redirecting a user to another route, rendering a HTML template, or returning a response ( as seen below respectively).

def main():
    This function redirects the root page to the home route.
    :return: redirect to home
    return redirect(url_for("home"))

@application.route('/home', methods=["GET", "POST"])
def home():
    This function is a route that leads to the home.html.

    The function will request the page by passing in " 'page' + *pagenumber " where we set the type to int; this
    will return an error if something other than an int is passed. In the html it will look like "html?page=1." All
    the posts are read from the db where they are ordered by descending date, and only eight are on a page.

    :return: render_template to home.html.

    page = request.args.get("page", 1, type=int)
    posts = Post.query.order_by(Post.date_posted.desc()).paginate(per_page=9, page=page)
    pics = get_slide_pics("static/pics/slide_pics")
    search_form = SearchForm()

    return render_template("home.html", posts=posts, search_form=search_form,pics=pics)

@application.route("/pathfinding", methods=["GET","POST"])
def pathfinding():
    This is a function that will either accept a GET and render a template for the pathfindg.html, or a POST request and
    call the appropriate functions.

    If the request is GET, the function will create a numpy array and return a render_template of the pathfinding.html
    passing in cells variable. If the request is POST, then the array and algorithm name is extracted from the json.
    The array is used to create a numpy array. Based on the provided algorithm, the appropriate function is used to
    create a visited list and a path way list. The visited list is a list of all the cells that were visited during the
    process. The path way list are the cells considered in the shortest path. However, this path is the shortest path
    defined by the algorithm, which may not hold true. Algorithms such as depth-first search merely find out if a path
    exists rather than the shortest path.

    :return: rendered template of the pathfinding.html. / json comprised of a status, visited list, and path list.

    if request.method == "GET":
        cells = np.zeros((30,30))
        search_form = SearchForm()

        return render_template("webapp_templates/pathfinding.html",cells=cells,search_form=search_form)

    if request.method == "POST":
        data = request.json['data']
        algorithm = request.json["algorithm"]
        start = tuple(request.json["start"])
        end = tuple(request.json["end"])
        data_np = np.array(data,dtype=np.int)

        if algorithm == "breadth_first_search":
            visited_list,path_list = breadth_first_search(data_np,start=start,end=end)
        elif algorithm == "depth_first_search":
            visited_list,path_list = depth_first_search(data_np,start=start,end=end,stack=[],visited_list=[],dead_end_list=[])
        elif algorithm == "a_star_search":
            visited_list,path_list = a_star_search(data_np,start=start,end=end)
        # np.savetxt("path_finding/data_np.txt",data_np,delimiter=",")

        return json.dumps({"status":"OK","visited_list":visited_list,"path_list":path_list})


This post went over the basic structure that would be used throughout the rest of the project. A configuration script was created as a place to configure application settings as well as add extensions. Application.py would be used to run the application, importing the application from config.py. Finally, routes.py was created to route users to various pages or return responses. Later, models and a database will be add to provide data storage, along with a forms component to provide an opportunity for user input.