Project Structure
survey_app/
│
├── app.py # Main application file
├── database.db # SQLite database file
├── templates/ # Folder for HTML templates
│ ├── index.html # Main survey form
│ └── results.html # Results display page
└── static/ # Folder for static files (CSS, JS)
└── styles.css # CSS styles
Step 1: Set Up Flask
First, make sure you have Flask installed. You can do this via pip:
pip install Flask
Step 2: Create the Main Application (app.py)
Here’s a basic implementation of the Flask application:
from flask import Flask, render_template, request, redirect
import sqlite3
app = Flask(__name__)
# Database setup
def init_db():
with sqlite3.connect('database.db') as conn:
cursor = conn.cursor()
cursor.execute('''
CREATE TABLE IF NOT EXISTS survey (
id INTEGER PRIMARY KEY AUTOINCREMENT,
question TEXT,
answer TEXT
)
''')
conn.commit()
init_db()
@app.route('/')
def index():
return render_template('index.html')
@app.route('/submit', methods=['POST'])
def submit():
question = request.form.get('question')
answer = request.form.get('answer')
with sqlite3.connect('database.db') as conn:
cursor = conn.cursor()
cursor.execute('INSERT INTO survey (question, answer) VALUES (?, ?)', (question, answer))
conn.commit()
return redirect('/results')
@app.route('/results')
def results():
with sqlite3.connect('database.db') as conn:
cursor = conn.cursor()
cursor.execute('SELECT question, answer FROM survey')
results = cursor.fetchall()
return render_template('results.html', results=results)
if __name__ == '__main__':
app.run(debug=True)
Step 3: Create HTML Templates
templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<title>Survey Application</title>
</head>
<body>
<h1>Survey</h1>
<form action="/submit" method="post">
<label for="question">Question:</label><br>
<input type="text" id="question" name="question" required><br><br>
<label for="answer">Answer:</label><br>
<input type="text" id="answer" name="answer" required><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
templates/results.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<title>Survey Results</title>
</head>
<body>
<h1>Survey Results</h1>
<table>
<tr>
<th>Question</th>
<th>Answer</th>
</tr>
{% for question, answer in results %}
<tr>
<td>{{ question }}</td>
<td>{{ answer }}</td>
</tr>
{% endfor %}
</table>
<a href="/">Back to Survey</a>
</body>
</html>
Step 4: Add CSS (static/styles.css)
cssCopy codebody {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
form {
margin-bottom: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 8px;
text-align: left;
}
Step 5: Run the Application
To run the application, navigate to the project directory in your terminal and execute:
bashCopy codepython app.py
Then open your web browser and go to http://127.0.0.1:5000.
Leave a Reply