Flask ke saath interactive web applications banane mein maza aata hai. Is step-by-step guide mein, hum ek simple interactive web application banane ke process ko dekhege. Is tutorial ke ant tak, aapko ek strong foundation milegi jise aap aur bhi complex projects ke liye istemal kar sakte hain.
Prerequisites:
- Python Install Kiya Hona Chahiye: Dhyan rahe ki aapke computer mein Python install hai. Aap ise python.org se download kar sakte hain.
- Virtual Environment: Project ke dependencies ko manage karne ke liye ek virtual environment banaaye.
bash
python -m venv venv
- Flask Install Karna:
bash
pip install Flask
Step 1: Project Structure
Ek project folder banaye aur is basic structure ko setup kare:
/my_flask_app
|-- /static
| `-- style.css
|-- /templates
| `-- index.html
|-- app.py
|-- requirements.txt
Step 2: Flask App Banaye
Ek naya file app.py banaye aur ek basic Flask application setup kare:
from flask import Flask, render_template
app = Flask(__name__)
def index():
return render_template(‘index.html’)
if __name__ == ‘__main__’:
app.run(debug=True)
Step 3: HTML Template
templates folder mein ek simple HTML template banaye (index.html):
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask App</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>Flask App mein aapka swagat hai</h1>
</body>
</html>
Step 4: App Ko Chalaye
Terminal mein, Flask app ko chalaye:
python app.py
Browser mein http://127.0.0.1:5000/ open karke basic Flask app dekhe.
Step 5: Interactivity Add Kare
JavaScript ka istemal karke app ko aur bhi interesting banaye. index.html ko update kare:
<!-- Is script tag ko body ke end mein add kare -->
<script>
document.addEventListener('DOMContentLoaded', function() {
alert('Flask App se namaste!');
});
</script>
Step 6: Flask Forms
index.html mein ek simple form implement kare:
<form method="POST" action="{{ url_for('submit_form') }}">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<button type="submit">Submit</button>
</form>
app.py ko form submission ko handle karne ke liye update kare:
from flask import request
# Form submission ko handle karne ke liye ye route add kare
def submit_form():
name = request.form.get(‘name’)
return f’Dhanyavaad, {name}!’
Step 7: Styling
static folder mein style.css file banakar app ko styling add kare.
/* Yahaan apne styles add karein */
body {
font-family: 'Arial', sans-serif;
text-align: center;
margin: 50px;
}margin-top: 20px;
}
cursor: pointer;
}
Conclusion
Badhai ho! Aapne successfully ek basic interactive web application Flask ke saath banaya hai. Ye sirf shuruaat hai—Flask ek robust foundation provide karta hai jise aap aur bhi features, database integration, aur dynamic content ke saath expand kar sakte hain. Flask ke documentation ko explore karein aur iska poora istemal karein. Khush rahiye, coding mein maza aaye!
