[Hindi] Designing Blog's Homepage - Web Development Using Flask and Python #13

1. main.py file as described in the video

from flask import Flask, render_template, request
from flask_sqlalchemy import SQLAlchemy
from flask_mail import Mail
import json
from datetime import datetime


with open('config.json', 'r') as c:
    params = json.load(c)["params"]

local_server = True
app = Flask(__name__)
app.config.update(
    MAIL_SERVER = 'smtp.gmail.com',
    MAIL_PORT = '465',
    MAIL_USE_SSL = True,
    MAIL_USERNAME = params['gmail-user'],
    MAIL_PASSWORD=  params['gmail-password']
)
mail = Mail(app)
if(local_server):
    app.config['SQLALCHEMY_DATABASE_URI'] = params['local_uri']
else:
    app.config['SQLALCHEMY_DATABASE_URI'] = params['prod_uri']

db = SQLAlchemy(app)


class Contacts(db.Model):
    sno = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(80), nullable=False)
    phone_num = db.Column(db.String(12), nullable=False)
    msg = db.Column(db.String(120), nullable=False)
    date = db.Column(db.String(12), nullable=True)
    email = db.Column(db.String(20), nullable=False)


class Posts(db.Model):
    sno = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(80), nullable=False)
    slug = db.Column(db.String(21), nullable=False)
    content = db.Column(db.String(120), nullable=False)
    tagline = db.Column(db.String(120), nullable=False)
    date = db.Column(db.String(12), nullable=True)
    img_file = db.Column(db.String(12), nullable=True)


@app.route("/")
def home():
    posts = Posts.query.filter_by().all()[0:params['no_of_posts']]
    return render_template('index.html', params=params, posts=posts)


@app.route("/post/", methods=['GET'])
def post_route(post_slug):
    post = Posts.query.filter_by(slug=post_slug).first()
    return render_template('post.html', params=params, post=post)

@app.route("/about")
def about():
    return render_template('about.html', params=params)


@app.route("/contact", methods = ['GET', 'POST'])
def contact():
    if(request.method=='POST'):
        name = request.form.get('name')
        email = request.form.get('email')
        phone = request.form.get('phone')
        message = request.form.get('message')
        entry = Contacts(name=name, phone_num = phone, msg = message, date= datetime.now(),email = email )
        db.session.add(entry)
        db.session.commit()
        mail.send_message('New message from ' + name,
                          sender=email,
                          recipients = [params['gmail-user']],
                          body = message + "\n" + phone
                          )
    return render_template('contact.html', params=params)


app.run(debug=True)


2. File config.json as described in the video

{
  "params":
  {
    "local_server":"True",
    "local_uri": "mysql://root:@localhost/codingthunder",
    "prod_uri":"mysql://root:@localhost/codingthunder",
    "fb_url":"https://facebook.com/codingthunder",
    "tw_url":"https://twitter.com/codingthunder",
    "gh_url": "https://github.com/codingthunder",
    "blog_name": "Coding Thunder",
    "tag_line": "Heaven for programmers",
    "gmail-user":"your-email@gmail.com",
    "gmail-password":"gmailpassword",
    "about_text": "Hi my name is harry and I create programming tutorials and I am a good boy",
    "no_of_posts": 3
  }
}

2. File 'index.html' as described in the video

{% extends "layout.html" %}
{% block body %}
    <!-- Page Header -->
    <header class="masthead" style="background-image: url('{{ url_for('static', filename='img/home-bg.jpg') }}')">
      <div class="overlay"></div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-md-10 mx-auto">
            <div class="site-heading">
              <h1>{{params['blog_name']}}</h1>
              <span class="subheading">{{params['tag_line']}}</span>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">


     <!-- Todo: Fetch it using for loop from the database -->

     {% for post in posts %}    
          <div class="post-preview">
            <a href="/post/{{post.slug}}">
              <h2 class="post-title">{{ post.title }}

              </h2>
              <h3 class="post-subtitle">
                {{post.tagline}}
              </h3>
            </a>
            <p class="post-meta">Posted by
              <a href="#">Admin</a>
              on {{post.date}}</p>
          </div>

          {{post.content[0:143]}}...
          <hr>
</li></a>
          {% endfor %}


          <!-- Pager -->
          <div class="clearfix">
            <a class="btn btn-primary float-right" href="#">Older Posts →</a>
          </div>
        </div>
      </div>
    </div>
    {% endblock %}


Be the first person to comment!

Comments(0)