Flask के साथ इंटरऐक्टिव वेब एप्लिकेशन बनाना एक रोमांचक कार्य है। इस कदम-से-कदम गाइड में, हम सरल इंटरऐक्टिव वेब एप्लिकेशन बनाने की प्रक्रिया को विवरण से देखेंगे। इस ट्यूटरियल के अंत तक, आपके पास एक मजबूत आधार होगा जिसे आप और जटिल परियोजनाओं के लिए बढ़ा सकते हैं।
Prerequisites:
- Python Installed:सुनिश्चित करें कि आपके कंप्यूटर पर पायथन स्थापित है। आप इसे python.org से डाउनलोड कर सकते हैं।
- Virtual Environment: परियोजना की आवश्यकताओं को प्रबंधित करने के लिए एक वर्चुअल एनवायरनमेंट बनाएं।
bash
python -m venv venv
- Install Flask:
bash
pip install Flask
Step 1: Project Structure
एक परियोजना फ़ोल्डर बनाएं और निम्नलिखित मौलिक संरचना को सेट करें|
/my_flask_app
|-- /static
| `-- style.css
|-- /templates
| `-- index.html
|-- app.py
|-- requirements.txt
Step 2: Create Flask App
नया फ़ाइल app.py बनाएं और एक मौलिक Flask एप्लिकेशन सेट करें:
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 फ़ोल्डर में एक साधारित HTML टेम्पलेट बनाएं (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>Welcome to Flask App</h1>
</body>
</html>
Step 4: Run the App
टर्मिनल में, Flask ऐप चलाएं:
python app.py
अपने ब्राउज़र में http://127.0.0.1:5000/ पर जाएं ताकि आप साधारित Flask एप्लिकेशन को देख सकें।
Step 5: Add Interactivity
JavaScript का उपयोग करके एप्लिकेशन में इंटरऐक्टिविटी जोड़कर एप्लिकेशन को और रूचिकर बनाएं। index.html को अपडेट करें:
<!-- Add this script tag at the end of the body -->
<script>
document.addEventListener('DOMContentLoaded', function() {
alert('Hello from Flask App!');
});
</script>
Step 6: Flask Forms
index.html में एक साधारित फ़ॉर्म को लागू करें:
<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>
Update app.py to handle form submission:
from flask import request
# Add this route to handle form submission
def submit_form():
name = request.form.get(‘name’)
return f’Thank you, {name}!’
Step 7: Styling
Add some styling to the app by creating a style.css file in the static folder.
/* Add your styles here */
body {
font-family: 'Arial', sans-serif;
text-align: center;
margin: 50px;
}margin-top: 20px;
}
cursor: pointer;
}
Conclusion
Congratulations! You’ve successfully built a basic interactive web application with Flask. This is just the beginning—Flask provides a robust foundation for expanding your project with more features, database integration, and dynamic content. Explore Flask’s documentation to unlock its full potential. Happy coding!
