If your are interested in web development, you’ve heard MVC. I’m still developing web but I’ve never used MVC so I always wonder 🙂 When I wanted to investigate, I would that there is an example that is hello word for MVC. Hear, “Hello Word Example”…

We will use Python 3.x and Bottle Framework in this article. I guess, using these is the easiest way for creating a MVC project.

If you don’t like reading, you can watch this video series. After you watched third video (“Intro to Templates”), you should read section 2 of my article.

Requirements

  1. Python 2.x or 3.x (recommended)
  2. Bottle Framework (Installation)
How to Create a MVC Project Step by Step…

Select a Template For Project: Actually, we don’t have to this step, we can write a new template. But, I want to show you something in section two of article about pages that contains static files like javascript, css, img files.

1. Pages that not contain static files:

Project Directory

  • hello_world.py
  • views
    • index_basic.tpl

Your directory tree of project must be like above and your codes must be like the following.

1.1. We design a page with variables that their values will sent from python code. For this code, ‘title’ and ‘animals’ are will sent from python code.

<h1>{{title}}</h1>
<ul>
  %for animal in animals:      
  <li>{{animal}}</li>
  % end
</ul>

1.2. Our python code send value of variables to tpl file and run the web server.

from bottle import route, run, template

@route('/')
def index():
    animals=["eagle","dog","cat","bird","fox","wolf","monkey","ant","cow","horse"]
    return template('index_basic', title="Merhaba Dünya",animals=animals)

run(host='localhost', port=8080, debug=True)

After we run the python code, here the output:

Basic of MVC is finished.

2. Pages that include static files:

If we want to use a template that we saw before and we liked. We know, templates contains multi files like html, js, css, img files. If we just change the extension html to tpl, our output will be too bad like as in dreams/in reality 😀

In Dreams 😀

 

In Reality 😀

If we want to see the page as in dreams, we must add something to the python code. We saw the page too bad because our get requests for js, css files returned with 404 code. Bottle web server didn’t understand path of files. We must tell them to python.

http://localhost:8080/css/4-col-portfolio.css
http://localhost:8080/vendor/bootstrap/css/bootstrap.min.css
http://localhost:8080/vendor/jquery/jquery.min.js
...

You know we are running with tpl files now. And we said to python the tpl file that be shown but we didn’t said to python the files and paths that be included. Python is just showing tpl file but it doesn’t know what to do if there is a get request.

2.1. Design a Template File

<html>
...
    <title>{{title}}</title>

    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/4-col-portfolio.css" rel="stylesheet">
...
</html>

2.2. Write the Python Code

from bottle import route, run, template, static_file

@route('/vendor/<filename:path>')
def serve_static(filename):
    return static_file(filename, root="./views/vendor/")

@route('/css/<filename:path>')
def serve_static(filename):
    return static_file(filename, root="./views/css/")

@route('/')
def index():
    lists=["First Aritcle","Python and Bottle","Test Article","You Like It","Example Article","Hi! I'm a Researcher","This Post For You"]
    return template('index', title="Hello World from Bottle", titleOfArticle=lists)

run(host='localhost', port=8080, debug=True)

So the python code will understand the paths and the output will be regular.

You can download project from this link.

For more informations.