What is it about weekends that they just really lend themselves to experimenting? I don’t know either. This weekend, I decided I’d spend some time with web development, so I assigned myself a task: create a simple web application which would have a single big text box at the top of the page which would allow the visitor to type whatever they want. Add a Submit button, allowing the user to save that text to a file on the server and then below that form, display all the text that has been entered so far. This is about as simple as a web form can get, I figured.
I wanted to use my slowly growing python skills for this little dynamic web page, so I looked around for a framework to use, since Python doesn’t create web page source natively. I looked at Tornado, Flask and a few others, but they all seemed like overkill for my very simple purposes. I liked the way the Bottle home page made it sound very easy to create dynamic content so I decided to use it.
I knew my one page site / app was gong to need just one HTML page, and the only part of it that will be dynamic is the part which lists the previous entries, so I started by making a web page template. I used the very friendly, easy to learn Initializr to save time with this. Just visit the site, make a few choices on what type of page you’re looking for and then download the source files. You get an HTML 5 file, CSS and JavaScript all in one zip file. I spent about 30 more minutes removing the parts I didn’t want (including all of the JavaScript), adding the form, updating the colors in the CSS to liking and voila! Index.tpl (for a Bottle template) and supporting static files all set.
At this point, the site consists of these files:
index.tpl
css/main.css
css/normalize.min.css
Next, I created an empty file which would hold the text: ‘allthetext’. I created the app’s code file next too: ‘bottle_app.py’. It doesn’t matter what you name that file, for this little app, since it will be the only one.
With Bottle then, the first thing you do is map out the “routes” or URLs you want the app to know how to handle. My app is the only thing this web site will be for, so my default route is just “/”. In the code, I knew I would have to handle both a GET of the page, which would be called when you first visit that path, and also a POST, which will be called when you submit some text in the form.
The GET just needs to display the web page, so that was easy:
from bottle import Bottle, debug, get, request, route, run, static_file, template
app = Bottle()
@app.route('/', method='GET')
def index():
return template('index')
The POST though has to get the value of the form field named ‘textarea’ and save that into the ‘allthetext’ file. Python makes this really simple but I have one complication. I want the newest entry to be at the top of the file, and then include the rest of the entries from there on down. Here’s the code that does this:
@app.route('/s', method='POST')
def submit_form():
try:
bigtext = request.forms.get('bigtext')
if (bigtext):
new_text = ''
current_text = ''
current_file = open('allthetext', 'r')
current_text = current_file.read()
current_file.close()
new_file = open('allthetext', 'w')
new_text = bigtext + '\n------------------------------------------------------------------------------------------------\n'
new_text = new_text + current_text
new_file.write(new_text)
new_file.close()
return template("index")
else:
return template('index')
“S” is the Action of the form on the web page (index.tpl) so that’s the URL the code receives when you submit it. The logic here then just validates that we got some text from the form, and if so, opens the text file, writes the new text in there first, then writes all the older text back in as well. Close the file and re-load the page, and that’s about it. The HTML has python included which opens the file for reading, gets each line and adds that to the output, then closes the file.
I tested this locally and it works like a charm. One of the great things about Bottle is that it includes a development “server” out of the box, so you can test your work at your workstation even if you don’t have a web server running locally.
One thing that was not quite right at this pont was the static CSS files. The were not loading in the browser, as their paths were wrong. I added these Routes to the bottle_app.py script to solve that:
# Static Routes
@app.get('/<filename:re:.*\.js>')
def javascripts(filename):
return static_file(filename, root='js/')
@app.get('/<filename:re:.*\.css>')
def stylesheets(filename):
return static_file(filename, root='css/')
@app.route('/', method='GET')
def index():
return template('index')
That just tells Bottle where to look for any file ending with “.css” or (in case I add this in later) “.js”.
So, just to summarize, this is what happens when you first visit the site:
- the URL requested is handled by the Bottle server
- it reads my .py code to see what is needed.
- my .py file says that for the “/” route, just send the template file (index.tpl) back as the response
- inside that index file, I have Python code reading the contents of the allthetext text file and adding that to the HTML of the page before the browser sees it.
When the user fills in the big text box on that page and clicks the Submit button, this is what happens:
- Bottle handles the request again, processes the POST request for the “/s” URL
- Opens the allthetext file, adds the new text from the form field to the top of the file, appends the old text and saves the file again
- send the index.tpl template again as the response
- and so the user’s page refreshes with their new text content added to the page beneath the form field and button.
Another really useful feature of Bottle is that when it gets a Form in the request, it knows how to collect up all that data and will also scrub it for things like cross-site-scripting attempts and clickjacking. As the developer of a very simple web app like mine, knowing that I don’t have worry about this is great. Of course, if I were creating an application for production use, I would still very carefully parse the data myself to make sure no bad requests are ever processed.
The last step in my little experiement then was just finding a way to run this online, so I could access the page from anywhere at any time. I found PythonAnywhere, a cloud service which makes it easy to host Python-based web apps like mine. They can support a lot of frameworks too including Flask and Bottle and many others, right out of the box. They very kindly offer a free service for small simple apps and also offer paid services at various levels for folks who need more performance or more CPU / Database time.
I created an account at PythonAnywhere, created my web app, uploaded my files, tweaked them a little for things like paths used and bang! It works. I would recommend this service to anyone else trying out any of the pieces of software I’ve described here. Their documentation is great and gets you up and running very quickly.
I am thinking now about what to do to my little web app next, like maybe adding date and time stamps to each entry and so on, but it was fun creating a really nice looking, HTML 5 compliant, web-based program that I can now run from anywhere, and it only took a few hours. Thanks for all the free stuff that made this all possible: Initializr, Python, Bottle and PythonAnywhere!
🙂
Guido and Us 