Python is the 2nd most popular language out there according to http://pypl.github.io/PYPL.html. With it, you can build plenty of things such as desktop apps, games, viruses, you can use it for server-side programming and so on.
The application that we are going to build serves the purpose of exploring how you can actually craft rapidly a web application in Python. In it, users are generated an identifier which is saved in their session and the session itself is kept alive across browser sessions. Users can delete and create new notes/todo items and they can view the todo lists of other people if those people share their identifier with them.
Figure 1: A demo of the web application
In building the application, we are going to use web2py which is a full-stack MVC framework for Python. You can learn how to use it at: http://www.web2py.com/book/default/chapter/01
If you are just about to learn Python, the PyCharm IDE is a good software to get started fast with Python. You can download it from: https://www.jetbrains.com/pycharm/download/#section=windows
You can download web2py from: http://www.web2py.com/init/default/download. After downloading, all you have to do is start web2py.exe
It has to be noted that the application does not take advantage of some patterns at this point (such as using the M (model) in the MVC pattern)
The views
After you have installed web2py, your web applications would be in the applications folder in the folder where you have installed web2py. You can create a new application from the administrative UI of the welcome web application which will appear after you start the web server from web2py.exe
For our purpose, we create a new folder in the applications folder called todo.
We have one main view which we show to users, it is called index.html and it is located in the applications/todo/views/default folder. The default folder is the name of our action, all of our routes would be located on the default action and they will just carry out different logic and redirect us to the home route. Therefore, our main route is going to be /todo/default/indexbut we will also have other routes (which redirect) again in the default controller/action.
Index.html (our view)
{{extend 'layout.html' }}
{{block navigation }}
<ul class="nav nav-justified">
<li><a href="/todo/default/my">My Todo List</a></li>
</ul>
{{pass}}
{{block content }}
{{ include 'display-message.html' }}
{{ include 'add-item.html' }}
{{ include 'display-notes.html' }}
{{ include "share.html" }}
{{end}}
Our index view extends another view file called layout.
Layout.html (the template)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/paper/bootstrap.min.css">
<meta name="viewport" content="initial-scale=1.0;">
<title>A todo app</title>
</head>
<body>
{{ block navigation}}
{{ block content }}
</body>
</html>
The layout template just spits out some essential markup and creates two entry points: navigation and content. The index view then just inserts content in these entry points. The layout also displays potential messages coming from our controller. The index view inserts the actual navigation in the respective navigation block and inserts several files for the content block/entry point.
Add-item.html (Included file)
<div class="container-fluid">
<form class="col-md-12" action="/todo/default/addItem" method="post">
<label for="item">Your Item: </label>
<textarea id="item" name="todo_item" class="form-control"></textarea>
<div style="margin:10px;">
<button type="submit" class="btn btn-lg btn-default">Add </button>
</div>
</form>
</div>
The above file just inserts a form to add a new note/todo item.
Display-message.html
{{if session.message: }}
<div class="alert alert-warning text-center"> {{= session.message}}</div>
{{ session.message = None }}
{{pass}}
This file just displays a session message coming from our controller and deletes it
Display-notes.html
{{ if len(notes): }}
<div class="container-fluid">
{{ if session.viewing: }}
<p style="color: #666" class="lead">Viewing todo list key {{=session.viewing}}:</p>
{{ else: }}
<p style="color: #666" class="lead">Viewing your own todo list:</p>
{{pass}}
<ol class="list-group">
{{for item in notes: }}
<li class="list-group-item">{{=item.item }}
<form style="display:inline-block;" class="form-inline" method="post" action="/todo/default/removeItem">
<input type="hidden" name="todo_item" value="{{= item.item }}">
<button class="btn btn-default btn-lg" type="submit" >
<span style="font-size:1.5em;color: crimson;cursor:pointer;" class="glyphicon glyphicon-remove">
</span></button></form></li>
{{pass}}
</ol>
</div>
{{pass}}
This file checks if there are notes to display and displays them in a list. It also adds a form for deleting notes when you click on the remove icon and displays the currently viewed identifier or states that you are viewing your own todo list if an identifier is missing from the session.
Conclusion
Now, it is time to go through some Python code by making the controllers that will handle saving, viewing and removing the notes.
