DEV Community: faozziyyah

Blog App with Django and Bulma CSS Framework

faozziyyah — Wed, 25 Jan 2023 13:22:56 +0000

Previously, I've built a blog app with Flask, you can check out my article on it here. Then, I decided to build another one using Django and another CSS framework called Bulma. This time around, I added additional features to my blog post such as categories, post approval by admin, like and unlike post, follow and unfollow users, profile and account settings.

In this article, I'll explain how to build this blog app with Django and Bulma CSS for styling.
Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. You can learn more about it by visiting this website.

This article is divided into four parts:

Login, Logout, Signup, Profile and Account Settings
Add post, view all post, edit post, delete and view individual post.
Like and unlike post, add comments and view post categories.
Admin page, view other users, follow and unfollow users.

1. Prerequisites

The following are the basic requirements before starting this project:

Python
Visual Studio Code
Git bash or any other terminal
Bulma - CSS framework for styling our application

2. Setting Up

A. Create a Project folder: navigate into the section where you want to have your project and type these commands to create a new directory or folder

// create a new directory(folder)
$ mkdir blog-app

// navigate into the folder
$ cd blog-app

B. Create a virtual environment: virtual environment is a tool that helps to keep dependencies required by different projects separate by creating isolated python virtual environments for them. This is one of the most important tools that most Python developers use.

// navigate into the folder
$ cd blog-app

// create a virtual environment
$ python3 -m venv venv

// activate the virtual environment
$ . venv/Scripts/activate

C. Install Django: pip install django
D. Start your Project:

$ django-admin startproject edublog

$ cd edublog

E. Create App: python manage.py startproject blog
F. Add app to settings.py: open up the settings.py file in your edublog folder and add the new app to INSTALLED_APPS within settings.py.

G. create other folders: Create TEMPLATES folder for our HTML files, MEDIA folder for uploading images and STATIC folder for images and CSS files.

H. STATICFILES_DIRS: add STATICFILES_DIRS to the settings.py file in order to see the effect of the styles similarly for the images.

I. Further Set-up:

J. Adding broiler plates to HTML: add these to your base.html and index.html files. This includes the set up for the bulma CSS framework.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/bulma.min.css' %}">
    <script src="https://kit.fontawesome.com/1cbee15c00.js" crossorigin="anonymous"></script>

    <title>Edublog</title>
</head>
<body>

<footer class="columns" id="footer">

        <div class="column">
            <h5>Links</h5>
                <a href="{% url 'index' %}">Home</a>
                <a href="{% url 'about' %}">About</a>
                <a href="{% url 'about' %}">Contact</a>
        </div>
        </div>

        <div class="column">

            <a class="button is-success" href="http://www.facebook.com/profile.php?id="><i class="fab fa-facebook"></i></a>
            <a class="button is-primary" href="http://www.linkedin.com/in/"><i class="fab fa-linkedin"></i></a>
            <a class="button is-link" href="http://twitter.com/"><i class="fab fa-twitter"></i></a>
            <a class="button is-danger" href="http://youtube.com/"><i class="fab fa-youtube"></i></a>
            <a class="button is-warning" href="mailto:"><i class="fas fa-envelope"></i></a>

        </div>

        <div class="column">
            <p>© All rights reserved {{ current_year }} Faozziyyah Daud</p>
        </div>

  </footer>
</body>

K. Navbar setup: add the following Bulma CSS navbar element to both base and index html files

<header>
        <!-- Fixed navbar -->
        <nav class="navbar is-link" role="navigation" aria-label="main navigation">

            <div class="navbar-brand">
                <a class="navbar-item" href="{% url 'index' %}">
                    <img src="{% static 'images/logo.png' %}" width="" height="">
                </a>

                <a role="button" class="navbar-burger is-active" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                  <span aria-hidden="true"></span>
                  <span aria-hidden="true"></span>
                  <span aria-hidden="true"></span>
                </a>
            </div>

            <div id="navbarBasicExample" class="navbar-menu is-active">

                <div class="navbar-start">

                    <div class="navbar-item">
                        <a href="{% url 'index' %}" class="nava"><i class="fas fa-home"></i> Home </a>
                    </div>

                    <div class="navbar-item">
                        <a href="{% url 'add-post' %}" class="nava"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add Post </a>
                    </div>

                    <div class="navbar-item has-dropdown is-hoverable">    
                        <a class="navbar-link"><i class="fa fa-info-circle" aria-hidden="true"></i> More </a>

                        <div class="navbar-dropdown">    
                            <a class="navbar-item" href="{% url 'about' %}"><i class="fa fa-info-circle" aria-hidden="true"></i> About </a>
                            <a href="{% url 'about' %}" class="navbar-item"> <i class="fa fa-address-card"></i> Contact </a>    
                            <hr class="navbar-divider">    
                            <a class="navbar-item"> Report an issue </a>
                        </div>

                    </div>

                </div>

                <div class="navbar-end"> 

                    <form class="navbar-item" method="POST" action="{% url 'search-posts' %}">
                        {% csrf_token %}

                        <div class="field has-addons">

                            <div class="control">
                              <input class="input" type="search" style="background-color: transparent;" placeholder="Search posts..." aria-label="Search" name="searched" />
                            </div>

                            <div class="control">
                              <button class="button is-primary" type="submit"> Search </button>
                            </div>

                        </div>

                    </form>

                    <div class="navbar-item"> 

                        <div class="buttons"> 

                            {% if user.is_superuser %}

                                <a class="navbar-item button is-success is-light" href="{% url 'admin-approval' %}">
                                    <span class="icon">
                                        <i class="fa fa-user-circle"></i>
                                    </span>
                                    <span>Admin</span>
                                </a>

                            {% endif %}

                            {% if user.is_authenticated %}

                                <div class="navbar-item has-dropdown is-hoverable">    
                                    <a class="navbar-link">
                                        <img src="{{user_profile.profileimg.url}}" class="header-avatar" style="width: 32px; height: 32px; border-radius: 100%; margin-left: 15px;">
                                    </a>

                                    <div class="navbar-dropdown">

                                        <a class="navbar-item button is-primary is-light" href="{% url 'settings' %}">
                                            <span class="icon">
                                                <i class="fa fa-cog" aria-hidden="true"></i>
                                            </span>
                                            <span>Account settings</span>
                                        </a>

                                        <a class="navbar-item button is-link is-light" href="profile/{{user_profile.user}}">
                                            <span class="icon">
                                                <i class="fa fa-user-circle"></i>
                                            </span>
                                            <span>Profile</span>
                                        </a>

                                        <hr class="navbar-divider">    

                                        <a class="navbar-item button is-warning is-light" href="{% url 'logout' %}">
                                            <span class="icon">
                                                <i class="fa fa-sign-out" aria-hidden="true"></i>
                                            </span>
                                            <span>Log Out</span>
                                        </a> 

                                    </div>

                                </div>  

                            {% else %}

                                <a class="navbar-item button is-primary is-light" href="{% url 'register' %}">
                                    <span class="icon">
                                        <i class="fa fa-sign-in" aria-hidden="true"></i>
                                    </span>
                                    <span>Sign up</span>
                                </a>

                                <a class="navbar-item button is-light is-light" href="{% url 'login' %}">
                                    <span class="icon">
                                        <i class="fa fa-sign-in" aria-hidden="true"></i>
                                    </span>
                                    <span>Log in</span>
                                </a> 

                            {% endif %}  

                        </div>    
                    </div>

                </div>
            </div>
        </nav>
      </header>

L. Jinja template:jinja is a fast, expressive, extensible templating engine. Special placeholders in the template allow writing code similar to Python syntax. Then the template is passed data to render the final document.
Add the following to the base and index html files

2. Login and Signup

This enables a new user create an account before viewing the post page. create register.html and login.html files in your templates. You can view the source code here.
Then create a view.py file inside the blog folder and add the following. This determines the route of the pages.

from django.urls import path
from . import views
urlpatterns = [
    path('', views.signin, name='login'),
    path('index', views.index, name='index'),
    path('signup', views.signup, name='register'),
    path('logout', views.logout, name='logout'),
]

This third step is to include the functionalities in the view.py file

def signin(request):

    if request.method == 'POST':
        username = request.POST['username']
        password = request.POST['password']

        user = auth.authenticate(username=username, password=password)

        if user is not None:
            auth.login(request, user)
            return redirect('/index')
        else:
            messages.info(request, 'Credentials Invalid')
            return redirect('login')

    else:
        return render(request, 'login.html')

and for the signup:

def signup(request):

    if request.method == 'POST':
        username = request.POST['username']
        email = request.POST['email']
        password = request.POST['password']
        password2 = request.POST['password2']

        if password == password2:
            if User.objects.filter(email=email).exists():
                messages.info(request, 'Email Taken')
                return redirect('register')
            elif User.objects.filter(username=username).exists():
                messages.info(request, 'Username Taken')
                return redirect('register')
            else:
                user = User.objects.create_user(username=username, email=email, password=password)
                user.save()

                #log user in and redirect to settings page
                user_login = auth.authenticate(username=username, password=password)
                auth.login(request, user_login)

                #create a Profile object for the new user
                user_model = User.objects.get(username=username)
                new_profile = Profile.objects.create(user=user_model, id_user=user_model.id)
                new_profile.save()
                return redirect('settings')
        else:
            messages.info(request, 'Password Not Matching')
            return redirect('register')

    else:
        return render(request, 'register.html')

3. Logout user

To enable a user logout successfully, add the following to the views.py file. The @login_required(login_url='login_user') ensures that the user is logged in before he can logout.

@login_required(login_url='login_user')
def logout(request):
    auth.logout(request)
    return redirect('/')

4. User Profile

This is the user's personal page where he can view all posts he created, number of followers and number of people he is following. It also contains a like to view his account settings.
First, create a profile.html page, check the source code here.
Secondly, add the following in the urls.py file path('profile/<str:pk>', views.profile, name='profile'),.
The <str:pk> gets the ID of the current user.
Thidly, add this to the views.py file

# profile page
@login_required(login_url='login_user')
def profile(request, pk):
    user_object = User.objects.get(username=pk)
    user_profile = Profile.objects.get(user=user_object)
    user_posts = Post.objects.filter(user=pk)
    user_post_length = len(user_posts)
    context = {
        'user_object': user_object,
        'user_profile': user_profile,
        'user_posts': user_posts,
        'user_post_length': user_post_length,
    }
    return render(request, 'profile.html', context)

Lastly, let's create the profile model. Add these to the models.py file. It create a profile table in our databse.

from django.db import models
from django.contrib.auth.models import User
import uuid
from datetime import date, datetime

# Create your models here.
class Profile(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    id_user = models.IntegerField()
    bio = models.TextField(blank=True)
    profileimg = models.ImageField(upload_to='profile_images', default='blank-profile-picture.png')
    location = models.CharField(max_length=100, blank=True)

    def __str__(self):
        return self.user.username

5. Migrations

After adding a table or making any changes to the database, we need to migrate our changes by doing the following in your terminal

$ python manage.py makemigrations
$ python manage.py migrate

6. Superuser

TO access our database and view the admin page of our app, we need to create a superuser.
Add the following code to your terminal and follow the prompts.
python manage.py createsuperuser
Then open this link in your browser and login with the credentials of the superuser you created.

7. User Settings

This page enables a user make changes to his existing profile
First, create settings.html file. check the code here.
second, add this to urls.py file, path('settings', views.settings, name='settings'),
Third, Add this to the views.py file

How To Build A Blog App With Flask

faozziyyah — Thu, 05 Jan 2023 11:14:47 +0000

In this article, I'll take you through the process of building a blog app with flask and SQLAlchemy for database.
The features of this project include:

responsive website using bootstrap
add, read, edit and delete a post
adding comments and images to a post
authentication and authorization
message flashing
display error pages
database management with mysql and SQLAlchemy
using the rich text editor

Flask is a python micro-framework for building web applications and it is easy to learn. You can learn more about it by visiting this website

1. Prerequisites

The following are the basic requirements before starting this project:

Python
Visual Studio Code
Git bash or any other terminal
MySQL

2. Setting Up

A. Create a Project folder: navigate into the section where you want to have your project and type these commands to create a new directory or folder

// create a new directory(folder)
$ mkdir blog-app

// navigate into the folder
$ cd blog-app

B. Create a virtual environment: A virtual environment is a tool that helps to keep dependencies required by different projects separate by creating isolated python virtual environments for them. This is one of the most important tools that most Python developers use.

// navigate into the folder
$ cd blog-app

// create a virtual environment
$ python3 -m venv venv

// activate the virtual environment
$ . venv/Scripts/activate

once activated, the command line shows the name of your virtual environment (venv).

C. Install Flask and SQlAlchemy

$ pip install flask
$ pip install Flask-SQLAlchemy
$ pip install pymysql
$ pip install Flask-Login
$ pip install Flask-Migrate

D. Create a Flask App: you can use this command in your terminal $ touch app.py to create the file for our flask app or create it manually in VS Code then write this code inside it

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

E. Configure the Database: open your psql terminal (SQL shell) and create a new database. For this project, I use our_users as the database name. Thereafter, write this in your app.py file.

app = Flask(__name__)

app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:password of your MYSQL database@localhost/our_users'

app.config['SECRET_KEY'] = "secret"
db = SQLAlchemy(app)

// this should always be at the bottom of the page
if __name__ == '__main__':
    app.run(debug=True)

3. Database Models

our project data has three database models: Post, Comment and Users.
using the UserMixin, the Users model create a table of users, linking them to their posts while datetime is important to show the date each post was created.

from flask_login import UserMixin
from datetime import datetime

then, we can build the Users, Post and Comment classes using this code:

#create users model
class Users(db.Model, UserMixin):
    id = db.Column(db.Integer, primary_key=True) 
    username = db.Column(db.String(20), nullable=False, unique=True)
    name = db.Column(db.String(200), nullable=False)
    email = db.Column(db.String(120), nullable=False, unique=True)
    favorite_color = db.Column(db.String(120))
    about_author = db.Column(db.String(500), nullable=True)
    date_added = db.Column(db.DateTime, default=datetime.utcnow)
    profile_pic = db.Column(db.String(200), nullable=True)
    password_hash = db.Column(db.String(128))
    posts = db.relationship('Post', backref='poster', lazy='dynamic')

def __repr__(self):
        return '<Name %r>' % self.name

#create a blog post model
class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(255))
    content = db.Column(db.Text)
    author = db.Column(db.String(255))
    date_posted = db.Column(db.DateTime, default=datetime.utcnow)
    slug = db.Column(db.String(255))
    poster_id = db.Column(db.Integer, db.ForeignKey("users.id"))
    comments = db.relationship('Comment', backref='post', lazy='dynamic')
    post_pic = db.Column(db.String(200), nullable=True)

class Comment(db.Model):
    id = db.Column(db.Integer(), primary_key=True)
    name = db.Column(db.String(255))
    text = db.Column(db.Text())
    date = db.Column(db.DateTime())
    post_id = db.Column(db.Integer(), db.ForeignKey('post.id'))

You can check out this article for better understanding on how the syntax works.

3. Database Migrations

Migrations are important to let MYSQL know that we've made changes to our database. First, we write this code in our app.py file.

from flask_migrate import Migrate

# write this after db = SQLAlchemy(app)
migrate = Migrate(app, db)

then we you the following in your terminal

# create migrations folder
$ flask db init

# make changes
$ flask db migrate -m 'comment'
$ flask db upgrade

c
Routing means mapping a URL to a specific Flask function that will handle the logic for that URL using @app.route(), but first, we need to import a few things from flask using this code
from flask import Flask, render_template, flash, request, redirect, url_for, current_app
1. Index or Home Page: this page shows all the posts created. This is the homepage of our blog app.

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

Before we can render our posts on the browser, we need to create an HTML page for that. But first, we need to create a folder called templates **in our app. Then, we create the **base.html and index.html inside the templates folder.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="{{ url_for('static', filename='js/jquery.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
    {% block title %}{% endblock %}
</head>
<body>

    <header>
        <!-- Fixed navbar -->
        <nav class="navbar navbar-expand-md navbar-dark">
          <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('index') }}"> 
              EDUBLOG
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
              <ul class="navbar-nav me-auto mb-2 mb-md-0">

                <li class="nav-item">
                  <a class="nav-link" aria-current="page" href="{{ url_for('add_post') }}">Add Blog Post</a>
                </li>

              </ul>

              <ul class="navbar-nav  navbar-right">   

                {% if current_user.is_authenticated %}

                <li class="nav-item">
                  <a class="nav-link" aria-current="page" href="{{ url_for('admin') }}">Admin</a>
                </li>

                <li class="nav-item">
                  <a class="nav-link" aria-current="page" href="{{ url_for('dashboard') }}">Dashboard</a>
                </li>

                <li class="nav-item">
                  <a class="nav-link" aria-current="page" href="{{ url_for('logout') }}">Logout</a>
                </li>

                {% else %}

                <li class="nav-item">
                  <a class="nav-link" aria-current="page" href="{{ url_for('add_user') }}">Register</a>
                </li>

                <li class="nav-item">
                  <a class="nav-link" aria-current="page" href="{{ url_for('login') }}">Login</a>
                </li>

                {% endif %}>

              </ul>

            </div>
          </div>
        </nav>
      </header>

      <main class="container-fluid main">
        {% block content %}{% endblock %}
      </main>

    <footer class="">
          <span>2022. All rights reserved.</span>
      </footer>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

The base.html file contains the needed information for all the pages. It also contains some syntax known as Jinja.
"Jinja is a fast, expressive, extensible templating engine. Special placeholders in the template allow writing code similar to Python syntax. Then the template is passed data to render the final document."

5. Other Features

A. Imports: These are necessary for the functionality of the blog app

from turtle import title
from flask import Flask, render_template, flash, request, redirect, url_for, current_app
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField, PasswordField, BooleanField, ValidationError, TextAreaField
from wtforms.validators import DataRequired, EqualTo, Length
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
from werkzeug.security import generate_password_hash, check_password_hash
from datetime import datetime
from wtforms.widgets import TextArea
from flask_login import UserMixin, login_user, LoginManager, login_required, logout_user, current_user 
from flask_ckeditor import CKEditor
from flask_ckeditor import CKEditorField
from flask_wtf.file import FileField
from werkzeug.utils import secure_filename
import uuid as uuid
import os

2. Authentication and Authorization: deals with the login, logout, register and admin features

# Flask_Login Stuff
login_manager = LoginManager()
login_manager.init_app(app)
login_manager.login_view = 'login'

@login_manager.user_loader
def load_user(user_id):
    return Users.query.get(int(user_id))

First, we need to create forms which users can use to register and login

#create form class
class UserForm(FlaskForm):
    name = StringField("Name", validators=[DataRequired()])
    username = StringField("Username", validators=[DataRequired()])
    email = StringField("Email", validators=[DataRequired()])
    favorite_color = StringField("Favorite Color")
    about_author = TextAreaField("About Author")
    password_hash =PasswordField("Password", validators=[DataRequired(), EqualTo('password_hash2', message='Passwords must match')])
    password_hash2 = PasswordField("Confirm Password", validators=[DataRequired()])
    profile_pic = FileField("Profile_pic")
    submit = SubmitField("Submit")

class PasswordForm(FlaskForm):
    email = StringField("What's your email?", validators=[DataRequired()])
    password_hash = PasswordField("What's your password?", validators=[DataRequired()])
    submit = SubmitField("Submit")

# login form
class LoginForm(FlaskForm):
    username = StringField("username", validators=[DataRequired()])
    password = PasswordField("password", validators=[DataRequired()])
    submit = SubmitField("submit")

then, we create the login and logout route

#login user
@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        user = Users.query.filter_by(username=form.username.data).first()
        if user:
            if check_password_hash(user.password_hash, form.password.data):
                login_user(user)
                flash("Login successful!!")
                return redirect(url_for('dashboard'))
            else:
                flash("Wrong Password, Try Again!")
        else:
            flash("That user does not exist, Try Again!")

    return render_template('login.html', form=form)

# logout 
@app.route('/logout', methods=['GET', 'POST'])
@login_required
def logout():
    logout_user()
    flash("You have logged out!")
    return redirect(url_for('login'))

# delete user
@app.route('/delete/<int:id>')
@login_required
def delete(id):

    if id == current_user.id or id == 8:
        user_to_delete = Users.query.get_or_404(id)
        name = None
        form = UserForm()

        try:
            db.session.delete(user_to_delete)
            db.session.commit()
            flash("user deleted successfully!!")
            our_users = Users.query.order_by(Users.date_added)
            return render_template("add_user.html", form=form, name=name, our_users=our_users)

        except:
            flash("Whoops! Something went wrong, please try again later...")
            return render_template("add_user.html", form=form, name=name, our_users=our_users)
    else:
        flash("Sorry, you can't delete this user!")
        return redirect(url_for('dashboard'))

#update user record
@app.route('/update/<int:id>', methods=['GET', 'POST'])
@login_required
def update(id):
    form = UserForm()
    name_to_update = Users.query.get_or_404(id)
    if request.method == 'POST':
        name_to_update.name = request.form['name']
        name_to_update.email = request.form['email']
        name_to_update.favorite_color = request.form['favorite_color']
        name_to_update.username = request.form['username']
        name_to_update.about_author = request.form['about_author']

        #check for profile pic
        if request.files['profile_pic']:
            name_to_update.profile_pic = request.files['profile_pic']

        #grab image name
            pic_filename = secure_filename(name_to_update.profile_pic.filename)
            #set uuid
            pic_name = str(uuid.uuid1()) + "_" + pic_filename
            #save the image
            saver = request.files['profile_pic']
            #change it to string and save to db
            name_to_update.profile_pic = pic_name

            try:
                db.session.commit()
                saver.save(os.path.join(app.config['UPLOAD_FOLDER'], pic_name))
                flash("user updated successfully!")
                return render_template("update.html", form=form, name_to_update = name_to_update)
            except:
                flash("Error! try again later")
                return render_template("update.html", form=form, name_to_update = name_to_update)

        else:
            db.session.commit()
            flash("user updated successfully!")
            return render_template("update.html", form=form, name_to_update = name_to_update)
    else:
        return render_template("update.html", form=form, name_to_update = name_to_update, id = id)

# register user
@app.route('/user/add', methods=['GET', 'POST'])
def add_user():
    name = None
    form = UserForm()
    if form.validate_on_submit():
        user = Users.query.filter_by(email=form.email.data).first()
        if user is None:
            hashed_pw = generate_password_hash(form.password_hash.data, "sha256")
            user = Users(name=form.name.data, username=form.username.data, email=form.email.data, favorite_color=form.favorite_color.data, password_hash=hashed_pw)
            db.session.add(user)
            db.session.commit()
        name = form.name.data
        form.name.data = ''
        form.username.data = ''
        form.email.data = ''
        form.favorite_color.data = ''
        form.password_hash.data = ''

        flash("User Added successfully!")
    our_users = Users.query.order_by(Users.date_added)
    return render_template("add_user.html", form=form, name=name, our_users=our_users)

3. Post Operations: check this out to view all the html pages for the blog.
To display a single post...

# individual post
@app.route('/posts/<int:id>', methods=['GET', 'POST'])
def post(id):
    post = Post.query.get_or_404(id)
    return render_template("post.html", post=post)

to add a post...

# add post page
@app.route("/add-post", methods=["GET", "POST"])
@login_required
def add_post():
    form = PostForm()
    image_post = None
    if form.validate_on_submit():
        poster = current_user.id

        if request.files['post_pic']:
            #image_post = None
            post_pic = request.files['post_pic']
            pic_filename = secure_filename(post_pic.filename)
            #set uuid
            pic_name = str(uuid.uuid1()) + "_" + pic_filename
            saver = request.files['post_pic']
            #change it to string and save to db
            post_pic = pic_name

        post = Post(title=form.title.data, content=form.content.data, poster_id=poster, slug=form.slug.data, post_pic=post_pic)
        form.title.data = ''
        form.content.data = ''
        form.post_pic.data = ''
        form.slug.data = ''

        db.session.add(post)
        db.session.commit()
        saver.save(os.path.join(app.config['UPLOAD_FOLDER'], pic_name))
        flash("post submitted successfully!")

    return render_template("add_post.html", post_pic=image_post, form=form)

to update/edit a post...

#update post
@app.route('/posts/edit/<int:id>', methods=['GET', 'POST'])
@login_required
def edit_post(id):
    posts = Post.query.order_by(Post.date_posted)
    post = Post.query.get_or_404(id)
    form = PostForm()

    if form.validate_on_submit():
        post.title = form.title.data
        #post.author = form.author.data
        form.slug = form.slug.data
        form.content = form.content.data

        db.session.add(post)
        db.session.commit()
        flash("Post updated successfully!")
        return redirect(url_for('post', id=post.id))

    if current_user.id == post.poster_id:
        form.title.data = post.title
        #form.author.data = post.author
        form.slug.data = post.slug
        form.content.data = post.content
        return render_template("edit_post.html", form=form)

    else:
        flash("You aren't authorized to edit this post!")
        return render_template('index.html', post=posts)

to delete a post...

# delete post
@app.route('/posts/delete/<int:id>')
@login_required
def delete_post(id):
    post_to_delete = Post.query.get_or_404(id)
    id = current_user.id

    if id == post_to_delete.poster.id or id == 8:

        try:
            db.session.delete(post_to_delete)
            db.session.commit()
            flash.info("Post deleted successfully")
            posts = Post.query.order_by(Post.date_posted)
            return render_template('index.html', post=posts)

        except:
            flash("Whoops! Something went wrong, please try again later")
            posts = Post.query.order_by(Post.date_posted)
            return render_template('index.html', post=posts)

    else:
        flash("You aren't authorized to delete this post!")
        posts = Post.query.order_by(Post.date_posted)
        return render_template('index.html', post=posts)

4. Error Pages: this display the error on a page
invalid URL... and internal server error...

# invalid URL
@app.errorhandler(404)
def page_not_found(e):
    return render_template("404.html"), 404

# internal server error
@app.errorhandler(500)
def page_not_found(e):
    return render_template("500.html"), 500

Thanks for exploring this article with me!
For the source code: Kindly check out Flask-blog-app, a project I built for the AltSchool Africa second semester examination.

Special Thanks to:

John Elder for his tutorials on Codemy.com
AltSchool Africa for their lessons on backend engineering.

My Goals For KODECAMP Internship

faozziyyah — Mon, 16 Aug 2021 17:03:51 +0000

Recently joined the KodeCamp internship (FRONT-END TRACK) because I want to improve my knowledge and skills and here are my goals for the 16 weeks internship...
I'd love to achieve the following by the end of this internship;

Improve my knowledge by learning the core concepts of javascript and Reactjs.
collaboration and team work.
Improve my skills in knowledge of front-end development.
Time management and critical thnking.
Have a remote job.

My Goals For HNG Internship

faozziyyah — Sun, 15 Aug 2021 11:22:25 +0000

HNG internship started on Thursday 😊 and the first task that would qualify us to next stage has commenced.
I join the Front-end track of the HNG 8th internship with an uplifted spirit and a strong determination to get to the final stage because I didn't get to the final stage at the last internship HNGi7.
I was evicted at stage 3 last because I couldn't complete the task for the next stage 😥, I was a beginner then, just started learning the basics of website development. Even though it was a bit tough then, I enjoyed every bit of it and I gained a so much that I was patiently anticipating the next season of the HNG internship. 😊
Finally, my dream come true as the HNG season 8 has commenced and I'm happy that I've acquired enough skills to be able to push through to the final stage of this internship and here are my goals;

To get to the final stage of the HNG8 internship and become an alumni. Well T-shits will be given to those that get to the final stage 😅 but for me, it's beyond the T-shirt.
To connect with other developers and network.
To improve my skills and learn new skills.

My goal is to also gain these soft skill by the end of the internship;
Communication.
Team work,
Collaboration.
Time Management.
Critical Thinking and
Research and Analysis

Let's get started as the motivation is to never give up. You can also join the internship here 👇 and I promise you it's going to worth your time.
Join the HNG8 internship
Wish me luck and see you there...

Here's is a resource on designing with figma
Figma tutorial
Here's is a resource on using GIT
GIT tutorial
Here's is a beginner tutorial for HTML
Learn HTML

Javascript Functions. A quick guide..

faozziyyah — Tue, 16 Mar 2021 08:37:26 +0000

Functions are often used in JavaScript by developers. In fact, it's used in other programming languages like python as well. But in this article, we'll focus on using functions in Javascript.

Definition of a Function:
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it).

There are two types of functions.
✔️ In-built functions
✔️ User defined functions.

🌟 In-built functions are special functions used to perform special tasks.
An example is the .to precision() function, this is used on number data type and it returns a string of that number but to a certain significant figures based on the argument passed into it.
We also have the .toUpperCase and .to lowercase In-built functions and many other examples.

🌟 Javascript user defined functions are functions created by the user to perform tasks as well like the example below:
function name(){
alert("this is my name!");
}
In the example above, name() is a user defined function.

✔️ Function parameters: These are the names listed in the function's definition. For example;
function sayHello(name){
alert("Hi," + name);
}
sayHello("David");

Taking a look at this example, the parameter in this function is "name". While the expression sayHello("David") is known as calling the function.

📌 Therefore, note that for a function to be executed, it has to be called just like in the example above.

✔️ Multiple parameters: They can be defined with comma separating them. They're the names listed in the function definition. For example;
function sayHello(name,age){
document.write(name + "is" + age + "years old");
}
sayHello("John", 20);

✔️ Function Return: This is used to return a value from the function e.g when making calculation that require a result. For example
function addNumbers(a,b){
return a+b;
}
addNumbers(5,6);

✔️ Anonymous Function: Also known as function expression. This is a function assigned to a variable. For example
var sayBye = function (){
console.log("Bye");
}
sayBye();
To read more on Javascript functions, you can go through this link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
I hope you learnt something new today.
Thank you for reading.