Adding a web frontend with scaffolding

Now let's come to the cool parts and create a web frontend for our todo app in literally minutes

So we have already created a model and added a handler to our todo app. If you haven't done this so far just follow the links. It also just takes a few minutes to set this all up. Cause this is the idea of PythonOnWheels, to make the basic things as easy as possible to focus on the app, not on the boilerplate.

So let's start to create our web frontend

We are now at the frontend part. This is the views part in the terminology of MVC structured apps. As usual in PythonOnWheels we use a generator to create the scaffolding of a web frontend for us. Just as for the handler the convention is that the generator will produce views for the typical REST routes we just created in our handler. As of today PoW supports bootstrap 4 and semanticUI as frontend frameworks. Bootstrap 4 is the default.

To create a scaffolded view you execute the generate_scaffold.py generator and give it the handler name it should link to with -n handler_name and the view-type it should generate with -t bs4 (for bootstrap 4 or sui for semanticUI). So execute this to generate a whole set of views for all our REST methods.

python generate_scaffold.py -n todo -t bs4

And you should see the following result:

You can see that generate_scaffold created five views for us. Namely show, list, page, edit and new. We also get delete as a functionality on the list view as you will see but since this "only" deletes there is just a button for that and no dedicated view.

All views have the purpose to present a special visualisation of data to the client.

The show view shows a single instance. Here a single todo.
The list view shows a list of all todos (for example as a table)
The page view can paginate over all views... (consider 100.000 todos .. you don't want a list of all those todos )
The edit view shows a form, displaying the content of existing todos

So the handler calls the model to retrieve the right data from the DB first

The new view shows an empty form to create a new todo.

The handler takes care of saving it to the DB when submitting it

Believe it or not, we are ready to go and test it:

So start your server

python server.py

point your browser to

http://localhost:8080/todo

The result should look like this:

A nice web frontend to manage our data

What you can see in the screenshot above is the list view. You can access it with the REST route:

http://localhost:8080/todo

This is the main entry point to manage our data. From here you can create, show, edit and delete data. So all the CRUD functions are available right here.

Some more screenshots of the scaffold views:

What todo next ;) ?

You have come pretty far. You have created a model, added a handler, and now you also added a complete web frontend. And all this without any configuration, installation, setups or any boilerplate. Just right there to your app. What has been created for you is just based on the standard libraries below pow_home. Like tornado, sqlalchemy and so forth. So you can now adapt your app to your need.

Most probably you will add some handler methods to do custom things with your data. And you will adapt the views or create new views to make your app look beautiful and enhance usability. The scaffolding is more ment for developers to get an easy (and nice) access for data management.

The application flow is pretty simple and goes like this.

A client (most probably a browser) will send a request to your app (the PythonOnWheels server).
The correct handler is invoked with the correct method for that request (depending on the route).
It handles the data (CRUD) logic and returns a result.
We saw already that when we request json, we get json. This also works for xml, csv
And if we request HTML (as all browsers do by default) we get HTML back. That's our views.

tags: