Bottom Page

Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
 [Flask]Starting web-development part-1
#1
A short intro to Python on WEB.
CGI is thankfully dead for Python.
Python use now WSGI for all web-development,
this is a solution all written in Python.
Quote:WSGI is by design a simple standard interface for running Python code on Web.
 As a web developer you won't need to know much more than.
 So not gone talk more about it  ;)

Flask is a great for all kind of web-development.
Scenario we have some pictures in a folder and want to make a simple gallery.
Here a demo of tutorial using some of my 3D-images Image-Viewer.

We start by developing local with Flask build-in web-server.
Forget about XAMPP,LAMP... you use build-in web-server for all local development.

In part-2 we deploy as easy as possible using Pythonanywhere,
or my favorite Digital Ocean(host of this site). 

Start bye making folders and files.
mysite\ 
flask_app.py
    tempaltes\
    img_show.html
    static\
        css\
        style.css
        images\
        <your images> 
flask_app.py
from flask import Flask, render_template
import os

app = Flask(__name__, static_url_path='')

@app.route('/')
def img_show():
    pics = os.listdir('static/images')
    return render_template('img_show.html', pics=pics)

if __name__ == '__main__':
  app.run(debug=True)
img_show.html
<!DOCTYPE html>
<html>
  <head>
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/style.css') }}" />
    <link href="//fonts.googleapis.com/css?family=Bungee Shade&subset=latin" rel="stylesheet" type="text/css">
  </head>
  <body>
     <h1>Image viewer</h1>
     {% for pic in pics %}
       <img class='image' src="{{ url_for('static', filename='images/{}'.format(pic)) }}"></img>
     {% endfor %}
  </body>
</html>
style.css 
body {
  background: radial-gradient(#E0D9C6, #42483a);
}

h1 {
  font-family: 'Bungee Shade', sans-serif;
  text-align: center;
  font-weight: bold;
  color: #113350;
  font-size: 50px;
}

.image {
  float: left;
  width: auto;
  margin: 2% 2% 30px 7%;
  height: 590px;
}
Now we have folder and files structure we need and gone test it.
Put some images in image folder.
Flask need to be installed pip install flask

Cd into folder mysite.
Then python flask_app.py this start the build in web-server.
Now in browser http://127.0.0.1:5000/ and hopefully see some images.

As said a simple image viewer,
using Jinja(build into Flask) to loop over files in folder.
CSS to do some adjust to image display(play around with height: 590px).
Quote
#2
Snippsat,

Thanks for sharing this!
I've looked at your art work before. It is astoundingly good, and I'm jelalous!
I expect you use Maya?
I've gone through Blender tutorials, and the results were good, but on a scale
of 1 to 10, I's rate myself a 1. Little artistic ability.

Larz60+
Quote

Top Page

Possibly Related Threads...
Thread Author Replies Views Last Post
  [Flask]Weather app Updatet snippsat 1 4,099 Jun-24-2018, 02:26 PM
Last Post: snippsat
  [Flask]Ajax in Flask snippsat 2 6,312 Sep-29-2016, 03:32 PM
Last Post: snippsat

Forum Jump:


Users browsing this thread: 1 Guest(s)