Turning A Python Script Into A Website

One query we often hear from people starting out with PythonAnywhere is “how do I turn this

script I’ve written right into a internet site so that other people can run it?”

That’s in reality a bigger subject matter than you might imagine, and a whole solution would wind up

having to give an explanation for almost the whole lot approximately web improvement.So we won’t do all of that in this

weblog publish :-)The top news is that simple scripts can often be changed into simple web sites

pretty effortlessly, and in this blog publish we’ll work thru multiple examples.

Let’s get started out!

The simplest case: a script that takes a few inputs and returns an output¶

Let’s say you have got this Python three.x script:

number1 = waft(input(“Enter the first range: “))

number2 = go with the flow(enter(“Enter the second variety: “))

answer = number1 + number2

print(“The sum of your numbers is “.format(answer))

Obviously that’s a great-easy example, however numerous more complicated scripts

observe the same sort of form.For instance, a script for a economic analyst may

have these equivalent steps:

Get statistics approximately a particular inventory from the user.

Run a few kind of complex analysis on the information.

Print out a result pronouncing how right the set of rules thinks the stock is as an funding.

The point is, we have 3 phases, input, processing and output.

(Some scripts have extra levels

– they accumulate some data, do some processing, accumulate a few extra facts, do greater processing, and so on, and

subsequently print out a result.We’ll come directly to those afterward.)

Let’s paintings via how we’d

change our 3-segment input-manner-output script right into a website.

In a website’s code, we don’t have get right of entry to to the Python input or print functions,

so the enter and output phases could be exclusive – however

the processing phase may be similar to it was within the unique script.

So the first step is to extract our processing code into a feature so that it is able to be

re-used.For our instance, that leaves us with something like this:

def do_calculation(number1, number2):return number1 + number2number1 = glide(input(“Enter the first range: “))

number2 = float(input(“Enter the second one variety: “))

answer = do_calculation(number1, number2)

print(“The sum of your numbers is “.layout(solution))

Simple sufficient.In actual-global instances like the stock-evaluation then of path there could

be more inputs, and the do_calculation function could be considerably more complicated, but

the theory is the same.

Step 2: create a website¶

Firstly, create a PythonAnywhere account if you haven’t already.A free “Beginner” account is enough for this educational.

Once you’ve signed up, you’ll be taken to the dashboard, with a excursion window.It’s really worth going via

the tour so that you can learn the way the web page works – it’ll handiest take a minute or so.

At the end of the excursion you’ll be supplied with some options to “analyze more”.You can simply click on “End excursion” here,

due to the fact this academic will tell you all you want to recognise.

Now you’re offered with the PythonAnywhere dashboard.I advise you take a look at your email and verify your electronic mail deal with –

otherwise if you overlook your password later, you received’t be able to reset it.

Now you want to create a website, which requires a web framework.

The easiest net framework to get began with when creating this type of component is

Flask; it’s quite simple and doesn’t have a variety of the integrated

stuff that other net frameworks have, however for our functions that’s an excellent thing.

To create your website, visit the “Web” web page the usage of the tab near the top right:

Click at the “Add a brand new net app” button to the left.This will pop up a “Wizard” which allows you to configure your web site.If you’ve got a loose account, it’ll seem like this:

If you made a decision to move for a paid account (thank you :-), then it will likely be a bit distinct:

What we’re doing in this web page is specifying the host call inside the URL that human beings will input to peer your website.Free bills will have one internet site, and it must be at yourusername.pythonanywhere.com.Paid accounts have the option of the usage of their personal custom host names in their URLs.

For now, we’ll stick with the free choice.If you have a loose account, just click the “Next” button, and when you have a paid one, click on the checkbox next to the yourusername.pythonanywhere.com, then click on “Next”.This will take you on to the following page inside the wizard.

This web page is in which we pick out the net framework we need to use.We’re the usage of Flask, so click on that one to move directly to the next web page.

PythonAnywhere has various versions of Python mounted, and every model has its associated model of Flask.You can use one-of-a-kind Flask versions to those we deliver with the aid of default, however it’s a little more difficult (you want to apply a thing referred to as a virtualenv), so for this educational we’ll create a domain the use of Python three.6, with the default Flask version.Click the option, and also you’ll be taken to the subsequent page:

This web page is calling you in which you need to position your code.Code on PythonAnywhere is stored in your private home directory, /home/yourusername, and in its subdirectories.Flask is a particularly lightweight framework, and you can write a easy Flask app in a unmarried record.PythonAnywhere is looking you in which it have to create a listing and put a unmarried file with a truly surely simple website.The default must be high-quality; it’s going to create a subdirectory of your own home directory known as mysite after which will put the Flask code into a document referred to as flask_app.py interior that directory.

(It will overwrite some other record with the equal call, so if you’re not the usage of a brand new PythonAnywhere account, make sure that the report that it’s were given in the “Path” input box isn’t certainly one of your current documents.)

Once you’re sure you’re OK with the filename, click on “Next”.There might be a short pause while PythonAnywhere sets up the internet site, and then you’ll be taken to the configuration web page for the site:

You can see that the host call for the web page is at the left-hand side, together with the “Add a brand new web app” button.If you had a couple of web sites on your PythonAnywhere account, they could seem there too. But the only that’s currently decided on is the only you just created, and in case you scroll down a bit you can see all of its settings.We’ll ignore maximum of those for the instant, but one this is worth noting is the “Best before date” phase.

If you have got a paid account, you received’t see that – it only applies to loose money owed.But if you have a loose account, you’ll see something announcing that your web site may be disabled on a date in three months’ time.Don’t worry!You can keep a free web page up and walking on PythonAnywhere for so long as you need, without having to pay us a penny.But we do ask you to log in sometimes and click the “Run till three months from today” button, just so that we recognise you’re nevertheless interested in keeping it jogging.

Before we do any coding, let’s test out the website online that PythonAnywhere has generated for us by using default.Right-click the host name, simply after the phrases “Configuration for”, and select the “Open in new tab” alternative; this may (of course) open your web site in a brand new tab, that’s useful whilst you’re developing – you may preserve the website open in one tab and the code and different stuff in another, so it’s simpler to check out the effects of the changes you’re making.

Here’s what it have to appear like.

OK, it’s pretty easy, however it’s a start.Let’s take a look at the code!Go again to the tab displaying the internet site configuration (retaining the only showing your site open), and click on at the “Go to directory” hyperlink next to the “Source code” bit inside the “Code” segment:

You’ll be taken to a extraordinary web page, displaying the contents of the subdirectory of your home listing in which your internet site’s code lives:

Click at the flask_app.py report, and you’ll see the (actually definitely easy) code that defines your Flask app.It looks as if this:

It’s worth working through this line-by using-line:

As you’d count on, this hundreds the Flask framework so you can use it.

This creates a Flask application to run your code.

This decorator specifies that the following feature defines what occurs whilst a person goes to the region “/” on your website – eg. if they visit http://yourusername.pythonanywhere.com/.If you desired to outline what happens after they visit http://yourusername.pythonanywhere.com/foo then you’d use @app.route(‘/foo’) alternatively.

def hello_world():return ‘Hello from Flask!’

This easy characteristic just says that when someone is going to the location, they get again the (unformatted) text “Hello from Flask”.

Try converting it – as an example, to “This is my new vivid Flask app”.Once you’ve made the alternate, click on the “Save” button at the pinnacle to keep the report to PythonAnywhere:

…then the reload button (to the far proper, searching likecurved arrows creating a circle), which stops your website and then starts offevolved it again with the sparkling code.

A “spinner” will appear subsequent to the button to tell you that PythonAnywhere is running.Once it has disappeared, go to the tab showing the internet site again, hit the web page refresh button, and you’ll see that it has changed as you’d anticipate.

Step three: make the processing code to be had to the web app¶

Now, we need our Flask app with a purpose to run our code.We’ve already extracted it right into a

characteristic of its very own.It’s typically a great idea to preserve the web app code – the primary stuff to

display pages – break free the greater complex processing code (in spite of everything, if we have been doing the stock analysis

instance rather than this simple add–numbers script, the processing may be heaps of traces lengthy).

So, we’ll create a brand new file for our processing code.Go lower back to the browser tab that’s showing your editor page; up on the top, you’ll see

“breadcrumb” hyperlinks displaying you wherein the record is saved.They’ll be a chain of listing names separated

by means of “/” characters, each one apart from the remaining being a link.

The closing one, just before the name of the report containing your Flask code,

will probably be mysite.Right-click on on that, and open it in a brand new browser tab – the brand new tab

will display the directory list you had earlier than:

In the enter near the pinnacle proper, where it says “Enter new record name, eg. hiya.py”, enter the call

of the record in order to comprise the processing code.Let’s (uninventively) name it processing.py.

Click the “New document” button, and you’ll have another editor window open, displaying an empty file.

Copy/paste your processing function into there; that means that the record ought to definitely include this


def do_calculation(number1, number2):go back number1 + number2

Save that record, then move lower back to the tab you stored open that incorporates the Flask code.At the

top, upload a brand new line just after the line that imports Flask, to import your processing code:

from processing import do_calculation

While we’re at it, permit’s additionally upload a line to make debugging less difficult if you have a typo

or other blunders within the code; just after the road that says

…add this:

app.config[“DEBUG”] = True

Save the report; you’ll see which you get a warning icon subsequent to the brand new import line.If you pass your

mouse pointer over the icon, you’ll see the details:

It says that the function turned into imported however is not being used, that’s completely proper!That

moves us directly to the following step.

Step four: Accepting enter¶

What we want our website to do is show a web page that permits the person to go into two numbers.To do

that, we’ll change the prevailing function this is run to show the page.Right now we have this:


def hello_world():go back ‘This is my new vivid Flask app’

We want to show greater than textual content, we want to display some HTML.Now, the high-quality way to do HTML in

Flask apps is to use templates (which assist you to preserve the Python code that Flask desires in separate files from

the HTML), however we’ve other tutorials that move into the info of that.In this case

we’ll simply positioned the HTML proper there inside our Flask code – and at the same time as we’re at it, we’ll rename the



def adder_page():return ”’

Enter your numbers:


We gained’t pass into the info of how HTML works here, there are plenty of amazing tutorials on-line

and one that suits the manner you study is only a Google search away.For now, all we want to recognize is that

wherein we have been previously returning a unmarried-line string, we’re now returning a multi-line one

(that’s what the 3 charges in a line suggest, in case you’re not familiar with them – one string cut up

over more than one traces).The multi-line string incorporates HTML code, which just presentations a page

that asks

the person to enter two numbers, and a button that says “Do calculation”.Click at the editor’s

“reload website” button:

…and then test out your internet site again in the tab that you (with a bit of luck) stored open, and also you’ll

see some thing like this:

However, as we haven’t done something to cord up the input to the processing, clicking the “Do calculation”

button gained’t do whatever but reload the page.

Step 5: validating enter¶

We could at this degree move directly to including on the code to do the calculations, and I was

in the beginning planning to do that right here.But after considering it, I realised that doing that

could essentially be teaching you to shoot yourself within the foot…When you put a website up

at the Internet, you have to permit for the truth that the human beings using it’s going to make mistakes.

If you created a website that allowed humans to enter numbers and add them, subsequently someone

will kind in “wombat” for one of the numbers, or some thing like that, and it would be embarrassing

if your website online replied with an inner server blunders.

So let’s upload on some fundamental validation – that is, some code that makes positive that human beings aren’t

providing us with random marsupials instead of numbers.

A precise internet site will, while you input an invalid enter, show the page again with an error message

in it.A terrible internet site will display a web page saying “Invalid enter, please click on the lower back button

and strive again”.Let’s write an excellent internet site.

The first step is to exchange our HTML in order that the person viewing the page can click on the “Do calculation”

button and get a reaction.Just change the road that asserts

So that it says this:

What meaning is that previously we had a form, but now we have a shape that has an “movement”

telling it that after the button that has the kind “publish” is clicked, it need to request the equal

web page as it’s far already on, but this time it ought to use the “submit” approach.

(HTTP methods are greater bits of statistics that are tacked directly to requests which can be made

by a browser to a server.The “get” technique, as you might expect, method “I simply need to get a

web page”.The “post” method approach “I need to provide the server with a few statistics to save or

system”.There are widespread reams of information that I’m skipping over here, however that’s the most

vital stuff for now.)

So now we have a manner for facts to be despatched lower back to the server.Reload the web site using the button

inside the editor, and refresh the page inside the tab in which you’re viewing your web page.Try entering a few

numbers, and click on the “Do calculation” button, and also you’ll get… an incomprehensible mistakes message:

Well, possibly now not absolutely incomprehensible.It says “technique not allowed”.Previously we were

the usage of the “get” approach to get our page, but we simply told the shape that it must use the “publish” technique

when the facts changed into submitted.So Flask is telling us that it’s no longer going to allow that web page to

be asked with the “put up” method.

By default, Flask view features handiest accept requests the use of the “get” method.It’s smooth to trade that.

Back inside the code report, where we’ve got this line:

…replace it with this:

@app.direction(“/”, methods=[“GET”, “POST”])

Save the file, hit the reload button inside the editor, then visit the tab displaying your web page; click on returned

to break out from the error web page if it’s still showing, then enter a few numbers and click the

“Do calculation” button once more.

You’ll be taken returned to the page without a errors.Success!Kind of.

Now allow’s upload the validation code.The numbers that had been entered could be made to be had to us

in our Flask code through the shape characteristic of a global variable known as request.So we are able to upload

validation logic with the aid of the use of that.The first step is to make the request variable to be had by

uploading it; trade the line that says

to mention

from flask import Flask, request

Now, add this code to the view feature, before the go back assertion:

mistakes = “”if request.approach == “POST”:number1 = Nonenumber2 = Nonetry:number1 = float(request.shape[“number1”])besides:errors += “

!r is not a range of.

\n”.format(request.shape[“number1”])try:number2 = waft(request.form[“number2”])except:mistakes += “

!r is not more than a few.


Basically, we’re announcing that if the technique is “submit”, we do the validation.

Finally, add a few code to place the ones mistakes into the web page’s HTML; replace the bit that

returns the multi-line string with this:

return ”’mistakes

Enter your numbers:


This is exactly the identical web page as before, we’re simply interpolating the string that carries

any errors into it just above the “Enter your numbers” header.

Save the file; you’ll see more warnings for the lines where we define

variables called number1 and number2, due to the fact we’re now not using those variables.We recognise we’re going

to restore that, in order that they can be omitted for now.

Reload the site, and head over to the

page where we’re viewing it, and try and upload a koala to a wallaby – you’ll get an

appropriate blunders:

Try including 23 to 19, however, and also you received’t get forty two – you’ll just

get the same input form again.So now, the very last step that brings all of it together.

Step 6: doing the calculation!¶

We’re all installation to do the calculation.What we want to do is:

If the request used a “get” approach, just display the input shape

If the request used a “put up” method, but one or each of the numbers aren’t legitimate, then display the enter form with blunders messages.

If the request used a “submit” method, and each numbers are legitimate, then display the result.

We can try this

through adding some thing in the if request.method == “POST”: block, simply when we’ve checked

that number2 is legitimate:

if number1 isn’t always None and number2 isn’t always None:end result = do_calculation(number1, number2)return ”’

The end result is result

Click right here to calculate again”’.format(result=end result)

Adding that code should clear out all the warnings in the editor page, and in case you reload your

website online and then try the use of it again, it ought to all paintings great!

Pause for breath…¶

So if all has long past properly, you’ve now transformed a simple script that would upload two numbers

right into a easy website that we could different humans upload numbers.If you’re getting error messages,

it’s nicely worth looking to debug them yourself to discover in which any typos came in.An

exquisite resource is the internet site’s errors log; there’s a link at the “Web” web page:

…and the most recent blunders can be at the bottom:

That blunders message is telling me that I mistyped “flask” as “falsk”, and the traceback

tells me exactly which line the typo is on.

However, in case you get completely caught, right here’s the code you have to currently have:

from flask import Flask, requestfrom processing import do_calculationapp = Flask(__name__)

app.config[“DEBUG”] = [email protected](“/”, methods=[“GET”, “POST”])

def adder_page():mistakes = “”if request.technique == “POST”:number1 = Nonenumber2 = Nonetry:number1 = waft(request.shape[“number1”])besides:errors += “

!r is not a variety of.

\n”.format(request.shape[“number1”])attempt:number2 = flow(request.form[“number2”])besides:mistakes += “

!r is not more than a few.

\n”.format(request.shape[“number2″])if number1 isn’t None and number2 isn’t None:result = do_calculation(number1, number2)return ”’

The result is end result

Click here to calculate again”’.format(end result=end result)return ”’mistakes

Enter your numbers:


The subsequent step – multi-section scripts¶

So now that we’ve managed to turn a script that had the simple three-phase

enter-manner-output shape into a website, how approximately dealing with the greater complicated

case wherein you’ve got extra phases?A commonplace case is in which you have an indefinite

quantity of inputs, and the output relies upon on all of them.For instance, here’s

a simple script on the way to assist you to enter a listing of numbers, one after some other,

and then will show

the statistical mode (the most common wide variety) in the list, with the proper error

message if there may be no most commonplace variety (as an example inside the listing [1, 2, three, 4]).

import statisticsdef calculate_mode(number_list):try:return “The mode of the numbers is “.layout(records.mode(number_list))except data.StatisticsError as exc:return “Error calculating mode: “.layout(exc)inputs = []

even as True:if len(inputs) != 0:print(“Numbers up to now:”)for input_value in inputs:print(input_value)value = enter(“Enter a variety of, or simply hit go back to calculate: “)if fee == “”:breaktry:inputs.append(drift(price))except:print(” isn’t more than a few”)print(calculate_mode(inputs))

How can we turn that into a website?We should display, say, one hundred input fields and let

the consumer depart the ones they don’t need blank, however (a) that might look hideous,

and (b) it’d go away individuals who desired to get the mode of 150 numbers caught.

(Let’s put aside for the moment the fact that entering plenty of numbers right into a website

could be deathly stupid – there’s a solution coming for that 🙂

What we want is a page which can accumulate numbers; the user enters the primary,

then clicks a button to send it to the server, which puts it in a list somewhere.

Then they enter the following, and the server adds that one to the list.Then the subsequent,

and so on, till they’re finished, at which factor they click on a button to get the end result.

Here’s a naive implementation.By “naive”, I mean that it kind of works in some instances,

but doesn’t in preferred; it’s the type of component that one may write, only to find out

that when different human beings start the usage of it, it breaks in simply weird and confusing approaches.

It’s well worth going thru, even though, because the way in which is is wrong is instructive.

Firstly, in our processing.py record we have the processing code, simply as earlier than:

import statisticsdef calculate_mode(number_list):attempt:go back “The mode of the numbers is “.layout(data.mode(number_list))except facts.StatisticsError as exc:return “Error calculating mode: “.layout(exc)

That need to be pretty clear.Now, in flask_app.py we’ve the subsequent code:

(A step-by way of-step clarification is coming later, but it’s worth reading through now to look

if you may see how at least a number of it it really works.)

from flask import Flask, requestfrom processing import calculate_modeapp = Flask(__name__)

app.config[“DEBUG”] = Trueinputs = []@app.path(“/”, techniques=[“GET”, “POST”])

def mode_page():mistakes = “”if request.technique == “POST”:attempt:inputs.append(go with the flow(request.form[“number”]))except:mistakes += “

!r isn’t a range of.

\n”.format(request.shape[“number”])if request.shape[“motion”] == “Calculate range”:result = calculate_mode(inputs)inputs.clean()go back ”’


Click right here to calculate once more”’.layout(end result=end result)if len(inputs) == 0:numbers_so_far = “”else:numbers_so_far = “

Numbers thus far:

“for variety in inputs:numbers_so_far += “

“.layout(wide variety)return ”’numbers_so_farmistakes

Enter your range:

”’.format(numbers_so_far=numbers_so_far, mistakes=mistakes)

All clear?Maybe…It does work, although, type of.Let’s try it – replica the code for

the two documents into your editor tabs, reload the site, and supply it a go.If you have got a unfastened

account, it will work!

Enter “1”, and also you get this:

Enter some extra numbers:

…and calculate the result:

But when you have a paid account, you’ll see some weird behaviour.Exactly what you’ll

get will rely on various random factors, but it will likely be some thing like this:

Enter 1, and you may get this:

Enter 2, and you would possibly get this:

Huh?Where did the “1” pass?Well, permit’s input “3”:

Well, that appears to have worked.We’ll add “4”:

And now we’ll upload “1” again:

So now our original 1 has come returned, however all of the different numbers have disappeared.

In fashionable, it’s going to seem to sometimes neglect numbers, after which bear in mind them again

later, as if it has more than one lists of numbers – that’s precisely what it does.

Before we go into why it’s definitely wrong (and why, counterintuitively, it really works worse on a

paid account than on a unfastened one), right here’s the promised step-through-step runthrough,

with remarks after every block of code.Starting off:

from flask import Flask, requestfrom processing import calculate_modeapp = Flask(__name__)

app.config[“DEBUG”] = True

All that is just copied from the previous website.

We’re initialising a listing for our inputs, and putting it within the worldwide scope, in order that

it’ll persist through the years.This is due to the fact each view of our page will involve a name to

the view characteristic:

@app.path(“/”, methods=[“GET”, “POST”])

def mode_page():

…that’s precisely the identical form of setup for a view function as we had earlier than.

mistakes = “”if request.method == “POST”:strive:inputs.append(flow(request.shape[“number”]))besides:errors += “

!r isn’t always a number of.

\n”.format(request.shape[“wide variety”])

We do very comparable validation to the wide variety as we did in our final website, and

if the range is legitimate we add it to the global listing.

if request.form[“action”] == “Calculate wide variety”:

This bit is a little more difficult.On our page, we’ve two buttons – one to add a number, and

one to mention “do the calculation” – here’s the bit of the HTML code from similarly down that specifies


This means that once we get a put up request from a browser, the “motion” fee inside the form

item will include the text of the put up button that became surely clicked.

So, if the “Calculate number” button turned into the only that the person clicked…

end result = calculate_mode(inputs)inputs.clear()go back ”’

end result

Click here to calculate again”’.layout(end result=end result)

…we do the calculation and go back the result (clearing the list of the inputs on the same

time so that the user can attempt once more with another list).

If, but, we get past that if request.form[“action”] == “Calculate variety” declaration, it means both that:

The request was the usage of the post method, and we’ve simply brought a number of to the list or set the mistake string to reflect the truth that the consumer entered an invalid wide variety, or

The request became using the get method


if len(inputs) == zero:numbers_so_far = “”else:numbers_so_far = “

Numbers to date:

“for wide variety in inputs:numbers_so_far += “


…we generate a listing of the numbers to date, if there are any, and then:

go back ”’numbers_so_farerrors

Enter your range:

”’.format(numbers_so_far=numbers_so_far, mistakes=errors)

We go back our web page inquiring for more than a few, with the list of numbers thus far and mistakes if either is applicable.


So why is it incorrect?If you’ve got a paid account, you’ve already visible proof that it doesn’t

paintings thoroughly.If you have got a free account, right here’s a concept test – what if two humans

had been viewing the website at the equal time?In reality, you may see precisely what would take place in case you

use the “incognito” or “private tab” characteristic in your browser – or, if you have multiple browsers

set up, in case you use two one of a kind browsers (say by using travelling the website online in Chrome and in Firefox at

the equal time).

What you’ll see is that each users are sharing a listing of numbers.The Chrome user starts off,

and provides more than a few to the listing:

Now the Firefox person provides quite a number – however they see no longer simplest the quantity they introduced, however additionally the

Chrome person’s number:

It’s pretty clean what’s happening right here.There’s one server dealing with the requests from each customers,

so there’s only one list of inputs – so all of us stocks the same listing.

But what about the situation for web sites going for walks on paid debts?If you’ll don’t forget, it looked

just like the opposite was occurring there – there were a couple of lists, even within the identical browser.

This is because paid money owed have a couple of servers for the equal website.This is a good element,

it means that if they get lots of requests coming in at the same time, then the whole thing receives processed

greater quick – in an effort to have higher-visitors websites.But it additionally method that distinctive requests,

even successive requests from the equal browser, can wind up going to unique servers, and because

every server has its very own list, the browser will see one list for one request, however see a exclusive

listing on the following request.

What this all means is that worldwide variables don’t work for storing state in website code.

On each server that’s jogging to manipulate your website, everybody will see the same global variables.

And if you have multiple servers, then every one could have a distinct set of worldwide variables.

What to do?

Sessions to the rescue!¶

What we want is a manner to hold a fixed of “global” variables which might be precise to each person viewing

the site, and are shared among all servers.If two people, Alice and Bob, are the use of the web site,

then Alice will have her personal list of inputs, which all servers can see, and Bob can have a exclusive

listing of inputs, break free Alice’s but likewise shared between servers.

The net dev mechanism for that is known as classes, and is constructed into Flask.Let’s make a tiny

set of changes to the Flask app to make it paintings nicely.Firstly, we’ll import help

for periods via converting our Flask import line from this:

from flask import Flask, request

…to this:

from flask import Flask, request, consultation

In order to apply periods, we’ll also want to configure Flask with a “mystery key” – periods

use cryptography, which requires a random range.Add a line like this simply after the line

in which we configure Flask’s debug setting to be True:

app.config[“SECRET_KEY”] = “lkmaslkdsldsamdlsdmasldsmkdd”

Use a exceptional string to the one I put above; mashing the keyboard randomly is a great way to get a

moderately random string, although if you want to do things nicely, locate something truly random.

Next, we’ll cast off

the global inputs listing by deleting this line:

Now we’ll use an inputs list that’s saved within the session object (which looks like

a dictionary) in preference to the use of our international variable.Firstly,

allow’s makes sure that each time we’re in our view feature, we’ve a listing of inputs associated

with the present day session if there isn’t one already.Right at the start of the view feature,

upload this:

if “inputs” not in consultation:session[“inputs”] = []

Next, inside the little bit of code in which we’re including a variety of to the inputs list, update this line:


…with this one that makes use of the listing at the session:


There’s also a subtlety here; because we’re changing a list internal a session (rather than adding a

new component to the consultation), we want to tell the session object that it has changed with the aid of putting

this line straight away after the last one:

Next, whilst we’re calculating the mode, we want to observe our consultation again to get the listing of


end result = calculate_mode(inputs)


end result = calculate_mode(consultation[“inputs”])

…and the line that clears the inputs so that the user can do another listing likewise changes



consultation[“inputs”].clear()session.changed = True

Finally, the code that generates the “numbers thus far” listing on the start of the web page wishes to change

to apply the consultation:

if len(inputs) == zero:numbers_so_far = “”else:numbers_so_far = “

Numbers to this point:

“for wide variety in inputs:numbers_so_far += “



if len(session[“inputs”]) == 0:numbers_so_far = “”else:numbers_so_far = “

Numbers to this point:

“for wide variety in session[“inputs”]:numbers_so_far += “


Once all of those code modifications were completed, you have to have this:

from flask import Flask, request, sessionfrom processing import calculate_modeapp = Flask(__name__)

app.config[“DEBUG”] = True

app.config[“SECRET_KEY”] = “lkmaslkdsldsamdlsdmasldsmkdd”@app.direction(“/”, techniques=[“GET”, “POST”])

def mode_page():if “inputs” no longer in consultation:session[“inputs”] = []mistakes = “”if request.technique == “POST”:strive:consultation[“inputs”].append(float(request.shape[“variety”]))consultation.changed = Trueexcept:errors += “

!r isn’t always more than a few.

\n”.layout(request.shape[“variety”])if request.form[“action”] == “Calculate variety”:end result = calculate_mode(session[“inputs”])consultation[“inputs”].clear()consultation.modified = Truereturn ”’


Click here to calculate once more”’.layout(result=end result)if len(session[“inputs”]) == zero:numbers_so_far = “”else:numbers_so_far = “

Numbers to date:

“for wide variety in consultation[“inputs”]:numbers_so_far += “

“.format(variety)return ”’numbers_so_farmistakes

Enter your number:

”’.format(numbers_so_far=numbers_so_far, errors=mistakes)

Hit the reload button, and supply it a try!If you have got a paid account, you’ll discover that now

all of it works well – and if you have a loose account, you’ll see that separate browsers now

have separate lists of numbers 🙂

So now we have a multi-consumer internet site that maintains country around among web page visits.

Processing files¶

Now, entering all of those numbers one-by way of-one might be tedious if there had been a whole lot of them.

A lot of Python scripts don’t request the consumer to enter records a line at a time; they take a

report as their input, procedure it, and convey a file as the output.Here’s a simple script

that asks for an input filename and an output filename.It expects the enter record to incorporate

a number of strains, each with a comma-separated listing of numbers on it.It writes to the

output document the same quantity of traces, every one containing the sum of the numbers from the

equivalent line inside the enter report.

def process_data(input_data):result = “”for line in input_data.splitlines():if line != “”:numbers = [float(n.strip()) for n in line.split(“,”)]end result += str(sum(numbers))result += “\n”return resultinput_filename = input(“Enter the input filename: “)

output_filename = enter(“Enter the output filename: “)with open(input_filename, “r”) as input_file:input_data = input_file.examine()with open(output_filename, “w”) as output_file:output_file.write(process_data(input_data))

What we want is a Flask app that will allow the consumer to add a file like the enter

file that that script calls for, and could then provide the output file to down load.This is without a doubt

quite much like the original app we did – there’s simply 3 phases, enter-technique-output.So

the Flask app seems very similar.

Firstly, we put our calculating ordinary into processing.py, as normal:

def process_data(input_data):end result = “”for line in input_data.splitlines():if line != “”:numbers = [drift(n.strip()) for n in line.split(“,”)]result += str(sum(numbers))end result += “\n”go back end result

…and now we write a Flask app that seems like this:

from flask import Flask, make_response, requestfrom processing import process_dataapp = Flask(__name__)

app.config[“DEBUG”] = [email protected](“/”, techniques=[“GET”, “POST”])

def file_summer_page():if request.approach == “POST”:input_file = request.documents[“input_file”]input_data = input_file.circulate.read().decode(“utf-eight”)output_data = process_data(input_data)response = make_response(output_data)response.headers[“Content-Disposition”] = “attachment; filename=result.csv”go back responsereturn ”’

Select the document you need to sum up:


Again, we’ll undergo that bit-by using-bit in a second (even though it’s really worth noting that

despite the fact that this appears like something that ought to be a great deal tougher than the first case, the

Flask app is tons shorter :-)But let’s try it out first – once you’ve stored the

code on PythonAnywhere and reloaded the website online, visit the page:

We specify a file with contents (mine just has “1, 2, three” on the first line and “four, 5, 6” on the


…then we click the button.You’ll have to look ahead to it, but a file down load will

almost at once start.In Chrome, as an example, this may seem at the bottom

of the window:

Open the document in the appropriate software – here’s what it looks like in gedit:

We’ve got a internet site where we are able to upload a report, system it, and download the effects 🙂

Obviously the user interface could use a chunk of labor, but that’s left as an exercise for

the reader…

So, how dow the code work?Here’s the breakdown:

from flask import Flask, make_response, requestfrom processing import process_dataapp = Flask(__name__)

app.config[“DEBUG”] = True

This is our normal Flask setup code.

@app.route(“/”, methods=[“GET”, “POST”])

def file_summer_page():

As regular, we define a view.

if request.approach == “POST”:

If the request is locate the “post” technique…

input_file = request.files[“input_file”]input_data = input_file.stream.examine().decode(“utf-8”)

…we ask Flask to extract the uploaded file from the request object, after which

we read it into reminiscence.The document it’s going to provide us with may be in binary layout,

so we convert it into a string, assuming that it’s inside the UTF-eight man or woman set.

output_data = process_data(input_data)

Now we manner the statistics the use of our function.The subsequent step is wherein it receives a touch greater


reaction = make_response(output_data)reaction.headers[“Content-Disposition”] = “attachment; filename=result.csv”

In the beyond, we simply lower back strings from our Flask view capabilities and let it sort out

how that have to be provided to the browser.But this time, we want to take a little

greater manipulate over the sort of response that’s going returned.In specific, we don’t need

to dump all the output into the browser window in order that the consumer has to copy/paste the

(potentially lots of traces of) output into their spreadsheet or anything.Instead,

we need to tell the browser “the thing I’m sending you is a document known as ‘end result.csv’, so

please down load it accurately”.That’s what these two traces do – the first is only a

way to tell Flask that we’re going to want a few special manage over the reaction, and

the second does that control.Next:

…we simply go back the reaction.

Now that we’re out of that first if announcement, we recognize that the request we’re managing

isn’t one with a “post” approach, so it have to be a “get”.So we show the shape:

go back ”’

Select the file you want to sum up:


In this situation we just go back a string of HTML like we did inside the previous examples.There are

handiestnew matters in there:

The enctype=”multipart/form-data” in there is just a further flag that is needed to tell

the browser the way to format files whilst it uploads them as a part of the “submit” request that it’s sending

to the server, and:

….is just how you specify an enter where the consumer can pick a record to add

So that’s it!

And we’re performed¶

In this blog submit we’ve supplied three different Flask apps, each of which shows how a specific

sort of ordinary Python script can be converted into a internet site that other people can get right of entry to to

gain the blessings of the code you’ve written.

Hopefully they’re all moderately clean, and you can see how you could follow the same techniques

on your own scripts.If you’ve got any comments or questions, please submit them within the remarks

under – and if you have any thoughts approximately different kinds of patterns that we should bear in mind

adding to an updated version of this post, or to a comply with-up, do allow us to recognise.

Thanks for reading!

[Update 2020-11-09: many thanks to commenter clearerinday for raising a few

problems that they encountered within the last instance whilst using a Windows gadget –

we’ve constant the code above to address that higher.]

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *