Edublog

full stack CRUD blog website built with HTML, CSS, Bootstrap, Python, Postgres, and Flask framework.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• To use

Overview

The challenge

Users should be able to:

• Add a post.
• View each post.
• Edit your post.
• Delete your post.
• Login as a user and logout.
• Update and delete your profile.
• View the optimal layout for the site depending on their device's screen size

Screenshot

Links

• Solution URL: (https://github.com/faozziyyah/flask-blog-app)
• Live link: (https://edulab-student-portal.herokuapp.com/)

My process

Built with

• HTML
• CSS
• Bootstrap
• Flask - A web development microframework built with python
• Postgres

What I learned

• Authentication and authorization
• How to use the Rich Text Editor

@app.route('/')
def index():
    flash("Welcome to our website!")
    posts = Post.query.order_by(Post.date_posted)
    return render_template('index.html', post=posts)

{% for postdetail in post %}

    <div class="post mb-3 p-3 shadow bg-body rounded">
      <h2><a href="{{ url_for('post', id=postdetail.id) }}">{{ postdetail.title }}</a> </h2>
      <p>{{ postdetail.content|safe }}</p>
      <small>By: {{ postdetail.poster.name }}</small> <br />     
      {{ postdetail.slug }} | {{ postdetail.date_posted }} <br />
      <a href="{{ url_for('post', id=postdetail.id) }}" class="btn btn-outline-secondary btn-sm">View Post</a>
    </div>

Useful resources

• Flask - A web development microframework built with python
• Postgresql - The world's most popular open source database
• MySQL - The world's most popular open source database