title: PythonAnywhere web app that displays image gallery and votes for them. Votes (Likes) are to be stored in SQL database
body: <p>So, I was trying to build a web app that stores image URLs in the database and the user has to like or dislike the post (image) and that vote is to be recorded in the database.
      I'd like to retrieve the database to see most-liked images or most-disliked, etc., For time being, I hard coded image URLs in my HTML code. I'm unable to connect these URLs to the database.
      I also included two functions <code>AddClick()</code> and <code>MinusClick()</code> in the HTML code to count Likes and Dislikes, but once the page refreshes, everything's gone.</p>
  
  <p>I have created HTML page and flask_app.py to include database and render the HTML template.</p>
  
  <p><code>flask_app.py</code> code:</p>
  
  <pre><code>class Like(db.Model):
  
      __tablename__ = "likes"
  
      id = db.Column(db.Integer, primary_key=True)
      image = db.Column(db.String(4096))
      count = db.Column(db.Integer)
  
  
  @app.route("/", methods=["GET", "POST"])
  def index():
      count = request.args.get('Clicks')
      if request.method == "GET":
          return render_template("main_page.html")
      count = Like(content=request.form["Clicks"])
      db.session.add(count)
      db.session.commit()
      return redirect(url_for('index'))
  </code></pre>
  
  <p><code>main_template.html</code> code:</p>
  
  <pre><code>&lt;script&gt;var Clicks = 0 ;
  function AddClick(){
      Clicks = Clicks + 1;
      document.getElementById('CountedClicks').innerHTML = Clicks + ' Likes';
  }
  function MinusClick(){
      Clicks = Clicks - 1;
      document.getElementById('CountedClicks').innerHTML = Clicks + ' Likes';
  }
  &lt;/script&gt;
  
  &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;div class="thumbnail"&gt;
                  &lt;a class="lightbox" href="https://cdn-images-1.medium.com/max/1200/0*9kZ68wExkrUDFn4U.jpg"&gt;
                      &lt;img src="https://cdn-images-1.medium.com/max/1200/0*9kZ68wExkrUDFn4U.jpg" alt="3"&gt;
                  &lt;/a&gt;
                  &lt;span id="CountedClicks"&gt;0 Likes&lt;/span&gt;&lt;br&gt;
                      &lt;button onclick="AddClick()"&gt;
                      &lt;a class="social-like" &gt;
                          &lt;span class="like"&gt;&lt;i class="glyphicon glyphicon-thumbs-up"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;span class="count" &gt;0&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;/button&gt;
                      &amp;nbsp;
                      &lt;button onclick="MinusClick()"&gt;
                      &lt;a class="social-dislike" &gt;
                          &lt;span class="dislike" &gt;0&lt;/span&gt;
                          &lt;span class="like"&gt;&lt;i class="glyphicon glyphicon-thumbs-down"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;/button&gt;
                      &lt;h3&gt;08-Nov-18&lt;/h3&gt;
                      &lt;p&gt;Third one&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Page seems to load fine and button also works fine until the page is refreshed.</p>