Create a simple blog in 5 min using Project Enferno

This tutorial will demonstrate how fast you can prototype apps with Enferno Framework.

Installation

Start by installing the framework, just make sure you have Python, Mongodb, and Redis installed, then you can follow the steps in this previous tutorial to install the framework.

Create your Admin User

Enferno ships with an management command that will setup a basic admin user/role for you, just execute the following command:

./manage.py install 

and follow the instructions to create your first admin user.

Designing our Data Structure

Enferno uses Flask Bluprints to organize the application into distinct components, by default the framework ships with two registered blueprints, the “user” blueprint which holds user/account related functionality, and a “public” blueprint that can be used to create the general/public website pages.

Since we want our blog to be publicly available, we will use the public blueprint to create the blog functionality.

Start by creating a file named “models.py” inside the “public” directory.

Create the “Post” class:

from extensions import db

class Post(db.Document):
    title = db.StringField()
    body = db.StringField()
    created_at = db.DateTimeField()

    def __unicode__(self):
        return '%s' % self.title

Since Enferno ships with MongoEngine, all you have to do is to import a reference to it, and create a class that extends “db.Document”

for the sake of simplicity, we will create three fields only: post title, post body, and a post date time field.

Generating the backend

Next, we need a mechanism to enter data into our blog, Enfenro makes this dead simple by integrating the flask-admin functionality.

By convention, Enferno includes all admin-related functionality within the “admin” directory. let’s open the file “views.py” within the “admin” dir and add the following lines:

from public.models import Post
class PostView(ModelView):
    pass

We just created a generic class “PostView” that extends the flask-admin “ModelView”, flask admin can use this class to generate a generic backend for our Post class, later on we can customize this further.

Next, we need to register our “PostView” class with our main app so that we can activate the CRUD functionality. this involves adding 3 lines of code to our “app.py” file.

first import the model, and the admin class:

from public.models import Post
from admin.views import PostView

then add the following line within the “register_admin_views” method:

admin.add_view(PostView(Post))

That’s it ! congratulations, you have activated full CRUD functionality for your blog posts. run the server using:

./manage.py server

then visit the admin URL at:

http://127.0.0.1:5000/admin

and click on the Post link, you should see the following

Add a few blog posts, we will need this data next when we create the font-end of our blog.

Creating the front-end

Let’s create a page that displays our blog posts, flask makes this really simple.

open the “views.py” file within the “public” directory, add the following code:

from models import Post

@bp_public.route('/blog')
def blog():
    return render_template('blog.html',posts=Post.objects)

This basically tells our app to render the “blog.html” template whenever we visit the “/blog” url.

it also passes a variable “posts” that has all our blog posts, MongoEngine makes this easily achievable by its simple query api (Post.objects).

Let’s create our blog html page. create a file named “blog.html” inside the “templates” directory, and add the following code to it:

{% extends 'layout.html' %}
{% block header %}{% endblock %}
{% block content %}
   <main class="cd-main-content">
      <div class="cd-container">
         {% for p in posts %}
                <h3>{{ p.title }}</h3>
                <p>{{ p.body }}</p>
                <hr/>
            {% endfor %}
      </div>
   </main>
{% endblock %}

This template extends our original layout.html template that ships with Enferno and uses a simple jinja2 loop to display all our blog posts, let’s add some style to the template, open the “style.css” file located in “static/css” directory, add the following styles:

h3 {
  font-size: 28px;
  margin: 20px 0;

}

.cd-main-content p {
  font-size: 16px;
  color: #999;
  margin: 5px  0 25px 0;
}

Next, visit the page at http://127.0.0.1:5000/blog , you should see something like the following:

Congrats ! you have created a simple blog within a few minutes using Porject Enferno.

Download the final source code here