Web application with Flask - up1/course-python-workshop GitHub Wiki

Web application with Flask

1. Install

$pip install flask

$pip list

Check flask

$flask --version

Python 3.13.2
Flask 3.1.1
Werkzeug 3.1.3

2. Hello World

File web_01.py

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"

Run

$flask --app web_01 run

Open URL in web browser

3. Working with HTML Template

  • Initial Game board

Create file templates/game.html

<!doctype html>
<html>
  <head><title>Tic Tac Toe</title></head>
  <body>
    <h1>{{msg}}</h1>
    <form action="" method="POST">
      <table>
        {% for j in range(0, 3) %}
        <tr>
          {% for i in range(0, 3) %}
          <td>
            <button type="submit" name="choice" value="{{j*3+i+1}}">
            -
            </button>
          </td>
          {% endfor %}
        </tr>
        {% endfor %}
      </table>
      <button type="submit" name="reset">Start Over</button>
    </form>
  </body>
</html>

Create file web_02.py

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def startGame():
    if request.method == "POST":
        # Handle the game logic here
        choice = request.form.get("choice")
        print(f"Player chose: {choice}")
        
    return render_template("game.html", msg="Welcome to Tic Tac Toe!")

Run

$flask --app web_02 run

Open URL in web browser

4. Working with Game and Table class

  • Create Game
  • Create Table
    • Initial slots= []
  • Show slots in HTML template

Edit file templates/game.html

<!doctype html>
<html>
  <head><title>Tic Tac Toe</title></head>
  <body>
    <h1>{{msg}}</h1>
    <form action="" method="POST">
      <table>
        {% for row in range(0, 3) %}
        <tr>
          {% for col in range(0, 3) %}
          <td>
            <button type="submit" name="choice" value="{{row*3+col+1}}">
            {{ slots[row][col] }}
            </button>
          </td>
          {% endfor %}
        </tr>
        {% endfor %}
      </table>
      <button type="submit" name="reset">Start Over</button>
    </form>
  </body>
</html>

Edit file web_02.py

from flask import Flask, render_template, request
from game import Game

app = Flask(__name__)
# Initialize the game
app.config['game'] = Game()

@app.route("/", methods=["GET", "POST"])
def startGame():
    if "choice" in request.form:
        request.form = request.form.to_dict()
        # Handle the game logic here
        choice = request.form.get("choice")
        print(f"Player chose: {choice}")
        app.config['game'].play(int(choice), "x")
    if "reset" in request.form:
        app.config['game'] = Game()
        app.config['game'].start()

    return render_template("game.html", msg="Welcome to Tic Tac Toe!", slots=app.config['game'].table.slots)
if __name__ == "__main__":
    app.run(debug=True, port=5000)

5. Try by yourself

  • Play with 2 player (O, X)
  • Check winner
⚠️ **GitHub.com Fallback** ⚠️