Finishing

Author: saa1man

ReadMe.md

@@ -0,0 +1,23 @@
+# Flask-Blog
+This is a simple blog website built with Flask web framework. It uses Flask's built-in support for Jinja2 templating engine and SQLAlchemy for database management.
+
+
+## Usage
+After installing all the required dependencies by running "pip install -r requirements.txt."
+
+You can access the blog website by visiting http://localhost:5000. use [email protected]:123456 to login as admin if you want to test the blog with this uploaded db.
+
+The blog has the following features:
+
+- User registration and login
+- Create, edit and delete blog posts (for admin only)
+- Create comments (Only for registred Users)
+- Contact page with contact form
+
+
+## Deployed Version
+Check out the deployed version of this blog [here](https://blog-site-5ojf.onrender.com/)!
+
+
+## Credits
+This blog is created by [Salmane A.]("https://github.com/saa1man"). Feel free to use it as a starting point for your own project.

main.py

@@ -1,6 +1,7 @@
-from flask import Flask, render_template, redirect, url_for, flash, abort
+from flask import Flask, render_template, redirect, url_for, flash, abort, request
 from flask_bootstrap import Bootstrap
 from flask_ckeditor import CKEditor
+from flask_wtf.csrf import CSRFProtect
 from datetime import date
 from functools import wraps
 from werkzeug.security import generate_password_hash, check_password_hash
@@ -10,10 +11,17 @@
 from forms import LoginForm, RegisterForm, CreatePostForm, CommentForm
 from flask_gravatar import Gravatar
 import os
+from email.mime.text import MIMEText
+from email.mime.multipart import MIMEMultipart
+import smtplib
+
+EMAIL = os.environ.get("YOUR_EMAIL")
+PASSWORD = os.environ.get("YOUR_PASSWORD")
+SMTP_PROVIDER = os.environ.get("YOUR_SMTP_PROVIDER")
 
 app = Flask(__name__)
-# app.config['SECRET_KEY'] = os.environ.get("SECRET_KEY")  #Create your app app SECRET_KEY
-app.config['SECRET_KEY'] = '8BYkEfBA6O6donzWlSihBXox7C0sKR6b'
+app.config['SECRET_KEY'] = os.environ.get("SECRET_KEY")  #Create your own app SECRET_KEY
+csrf = CSRFProtect(app)
 ckeditor = CKEditor(app)
 Bootstrap(app)
 gravatar = Gravatar(app, size=100, rating='g', default='retro', force_default=False, force_lower=False, use_ssl=False, base_url=None)
@@ -164,11 +172,6 @@ def about():
     return render_template("about.html", current_user=current_user)
 
 
-@app.route("/contact")
-def contact():
-    return render_template("contact.html", current_user=current_user)
-
-
 @app.route("/new-post", methods=["GET", "POST"])
 @admin_only
 def add_new_post():
@@ -189,8 +192,6 @@ def add_new_post():
     return render_template("make-post.html", form=form, current_user=current_user)
 
 
-
-
 @app.route("/edit-post/<int:post_id>", methods=["GET", "POST"])
 @admin_only
 def edit_post(post_id):
@@ -222,5 +223,30 @@ def delete_post(post_id):
     return redirect(url_for('get_all_posts'))
 
 
+@app.route("/contact", methods=["GET","POST"])
+def contact():
+    if request.method == "POST":
+        send_email(request.form['name'], request.form['email'],request.form['phone'],request.form['message'])
+        return render_template("contact.html", current_user=current_user, msg_sent=True)
+    return render_template("contact.html", current_user=current_user, msg_sent=False)
+
+def send_email(name, email, phone, message):
+    # Create a new SMTP object
+    smtp_server = smtplib.SMTP(SMTP_PROVIDER, 587)
+    smtp_server.starttls()
+    smtp_server.login(EMAIL, PASSWORD)
+    # Create the message
+    msg = MIMEMultipart()
+    msg['From'] = EMAIL
+    msg['To'] = EMAIL
+    msg['Subject'] = 'New Contact Form The Blog'
+    body = f"Name: {name}\nEmail: {email}\nPhone: {phone}\nMessage: {message}"
+    msg.attach(MIMEText(body, 'plain'))
+    # Send the message
+    smtp_server.send_message(msg)
+    # Close the SMTP connection
+    smtp_server.quit()
+
+
 if __name__ == "__main__":
-    app.run(host='0.0.0.0', port=5000)
+    app.run(host='0.0.0.0', port=5000)

static/js/contact_me.js

@@ -1,13 +1,16 @@
 {% include "header.html" %}
-
   <!-- Page Header -->
   <header class="masthead" style="background-image: url('{{ url_for('static', filename='img/contact-bg.jpg')}}')">
     <div class="overlay"></div>
     <div class="container">
       <div class="row">
         <div class="col-lg-8 col-md-10 mx-auto">
           <div class="page-heading">
-            <h1>Contact Me</h1>
+            {% if msg_sent: %}
+              <h1>Successfully sent your message</h1>
+            {% else %}
+              <h1>Contact Me</h1>
+            {% endif %}
             <span class="subheading">Have questions? I have answers.</span>
           </div>
         </div>
@@ -20,40 +23,38 @@ <h1>Contact Me</h1>
     <div class="row">
       <div class="col-lg-8 col-md-10 mx-auto">
         <p>Want to get in touch? Fill out the form below to send me a message and I will get back to you as soon as possible!</p>
-        <!-- Contact Form - Enter your email address on line 19 of the mail/contact_me.php file to make this form work. -->
-        <!-- WARNING: Some web hosts do not allow emails to be sent through forms to common mail hosts like Gmail or Yahoo. It's recommended that you use a private domain email address! -->
-        <!-- To use the contact form, your site must be on a live web host with PHP! The form will not work locally! -->
-        <form name="sentMessage" id="contactForm" novalidate>
+        <form name="sentMessage" id="contactForm" action="{{ url_for('contact') }}" method="post" novalidate>
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
           <div class="control-group">
             <div class="form-group floating-label-form-group controls">
               <label>Name</label>
-              <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
+              <input type="text" class="form-control" placeholder="Name" id="name" name="name" required data-validation-required-message="Please enter your name.">
               <p class="help-block text-danger"></p>
             </div>
           </div>
           <div class="control-group">
             <div class="form-group floating-label-form-group controls">
               <label>Email Address</label>
-              <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
+              <input type="email" class="form-control" placeholder="Email Address" id="email" name="email" required data-validation-required-message="Please enter your email address.">
               <p class="help-block text-danger"></p>
             </div>
           </div>
           <div class="control-group">
             <div class="form-group col-xs-12 floating-label-form-group controls">
               <label>Phone Number</label>
-              <input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
+              <input type="tel" class="form-control" placeholder="Phone Number" id="phone" name="phone" required data-validation-required-message="Please enter your phone number.">
               <p class="help-block text-danger"></p>
             </div>
           </div>
           <div class="control-group">
             <div class="form-group floating-label-form-group controls">
               <label>Message</label>
-              <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
+              <textarea rows="5" class="form-control" placeholder="Message" id="message" name="message" required data-validation-required-message="Please enter a message."></textarea>
               <p class="help-block text-danger"></p>
             </div>
           </div>
           <br>
-          <div id="success"></div>
+          <!--<div id="success"></div>--> 
           <button type="submit" class="btn btn-primary" id="sendMessageButton">Send</button>
         </form>
       </div>

templates/contact.html

@@ -44,7 +44,6 @@
   <script>
     document.getElementById("year").innerHTML = new Date().getFullYear();
   </script>
-
 </body>
 
 </html>