🖊️ 🙄 🗝️ फ्लास्क मेगा-ट्यूटोरियल, भाग 2: टेम्पलेट 🦈 🍝 🍩

यह एक श्रृंखला का दूसरा लेख है जहां मैं फ्लास्क माइक्रोफ्रामवर्क का उपयोग करके पायथन वेब एप्लिकेशन लिखने के अपने अनुभव का वर्णन करता हूं।

इस गाइड का उद्देश्य एक काफी कार्यात्मक माइक्रोब्लॉगिंग एप्लिकेशन विकसित करना है, जिसे मैंने मौलिकता की कमी के लिए microblog कहने का फैसला किया।

सामग्री की तालिका

भाग 1: हैलो वर्ल्ड!
भाग 2: टेम्पलेट
भाग 3: प्रपत्र
भाग 4: डेटाबेस
भाग 5: उपयोगकर्ता लॉगिन
भाग 6: प्रोफाइल पेज और अवतार
भाग 7: यूनिट परीक्षण
भाग 8: अनुयायी, संपर्क और मित्र
भाग 9: अंकुरण
भाग 10: पूर्ण पाठ खोज
भाग 11: ईमेल समर्थन
भाग 12: पुनर्निर्माण
भाग 13: तिथि और समय
भाग 14: I18n और L10n
भाग 15: अजाक्स
भाग 16: डिबगिंग, परीक्षण और प्रोफाइलिंग
भाग 17: लिनक्स (यहां तक कि रास्पबेरी पाई पर भी तैनात हैं!)
भाग 18: हरोकू क्लाउड पर तैनाती

संक्षिप्त पुनरावृत्ति

यदि आपने पहले भाग में निर्देशों का पालन किया है, तो आपको पूरी तरह से काम करना चाहिए, लेकिन इस फ़ाइल संरचना के साथ बहुत ही सरल अनुप्रयोग:

 microblog\ flask\ <  > app\ static\ templates\ __init__.py views.py tmp\ run.py

एप्लिकेशन को चलाने के लिए, आप run.py script को रन करते हैं, फिर अपने ब्राउज़र में url http: // localhost: 5000 खोलें।

हम वहां से जारी रखेंगे जहां हमने छोड़ा था, इसलिए आपको यह सुनिश्चित करना चाहिए कि उपरोक्त एप्लिकेशन इंस्टॉल किया गया है और सही तरीके से काम कर रहा है।

हमें टेम्प्लेट की आवश्यकता क्यों है

विचार करें कि हम अपने छोटे अनुप्रयोग का विस्तार कैसे कर सकते हैं।
हम चाहते हैं कि हमारे माइक्रोब्लॉगिंग एप्लिकेशन का मुख्य पृष्ठ एक हेडर हो जो लॉग इन करने वाले उपयोगकर्ता का स्वागत करता है, जो इस तरह के एप्लिकेशन के लिए बहुत मानक है। अभी के लिए, इस तथ्य को अनदेखा करें कि हमारे पास एप्लिकेशन में उपयोगकर्ता नहीं हैं, मैं सही समय पर इस समस्या का समाधान प्रदान करूंगा।

एक बड़े और सुंदर हेडर को आउटपुट करने का एक सरल तरीका हमारी प्रस्तुति फ़ंक्शन को HTML में बदलना होगा, कुछ इस तरह से:

 from app import app @app.route('/') @app.route('/index') def index(): user = { 'nickname': 'Miguel' } #   return ''' <html> <head> <title>Home Page</title> </head> <body> <h1>Hello, ''' + user['nickname'] + '''</h1> </body> </html> '''

यह देखने का प्रयास करें कि आपके ब्राउज़र में एप्लिकेशन कैसा दिखता है।

हालांकि हमारे पास उपयोगकर्ता समर्थन नहीं है, हालांकि, मैंने उपयोगकर्ता मॉडल के प्रोटोटाइप का उपयोग किया, जिसे कभी-कभी नकली या काल्पनिक प्रोटोटाइप कहा जाता है। यह हमें हमारे एप्लिकेशन के कुछ पहलुओं पर ध्यान केंद्रित करने की अनुमति देता है, जो सिस्टम के कुछ हिस्सों पर निर्भर करता है जो अभी तक नहीं लिखे गए हैं।

मुझे आशा है कि आप मुझसे सहमत होंगे कि उपरोक्त समाधान बहुत बदसूरत है। कल्पना करें कि यदि आप बहुत गतिशील सामग्री के साथ भारी HTML पृष्ठ वापस करना चाहते हैं तो कोड कितना जटिल हो जाता है। और क्या होगा यदि आपको अपनी वेबसाइट के लेआउट को एक बड़े अनुप्रयोग में बदलने की आवश्यकता है जिसमें कई दृश्य हैं जो सीधे HTML लौटाते हैं? यह स्पष्ट रूप से एक मापनीय समाधान नहीं है।

बचाव के लिए टेम्पलेट

क्या आपने कभी सोचा है कि यदि आप अपने आवेदन और लेआउट के तर्क को अलग रख सकते हैं, या आपके पृष्ठों की प्रस्तुति बहुत बेहतर व्यवस्थित होगी? जब आप पायथन का उपयोग करते हुए इसके [साइट] व्यवहार को प्रोग्राम करते हैं, तो आप एक तेजस्वी वेबसाइट बनाने के लिए एक वेब डिज़ाइनर भी रख सकते हैं। टेम्पलेट इसे अलग करने में मदद करेंगे।

हम अपना पहला टेम्प्लेट ( app/templates/index.html फ़ाइल) लिखेंगे:

 <html> <head> <title>{{title}} - microblog</title> </head> <body> <h1>Hello, {{user.nickname}}!</h1> </body> </html>

जैसा कि आप ऊपर देख सकते हैं, हमने सिर्फ एक मानक HTML पृष्ठ लिखा है, लेकिन एक अंतर के साथ: गतिशील सामग्री के लिए प्लेसहोल्डर {{...}} अनुभाग में संलग्न हैं

अब हमारे व्यू फंक्शन में टेम्प्लेट के उपयोग पर विचार करें (फ़ाइल app/views.py ):

 from flask import render_template from app import app @app.route('/') @app.route('/index') def index(): user = { 'nickname': 'Miguel' } #   return render_template("index.html", title = 'Home', user = user)

टेम्प्लेट कैसे काम करते हैं, यह देखने के लिए इस स्तर पर एप्लिकेशन लॉन्च करें। यदि आपके ब्राउज़र में एक पृष्ठ प्रदान किया गया है, तो आप इसके स्रोत कोड की तुलना मूल टेम्पलेट से कर सकते हैं।

पेज रेंडर करने के लिए, हमें फ्लास्क से एक नया फंक्शन इम्पोर्ट करना चाहिए, जिसे रेंडर_टेमप्लेट कहा जाता है। यह फ़ंक्शन टेम्प्लेट का नाम और परिवर्तनशील तर्कों की एक सूची लेता है, और तैयार तर्कों को प्रतिस्थापित तर्कों के साथ देता है।

हुड के तहत: रेंडर_टमप्लेट फ़ंक्शन जिन्जा 2 टेम्पलेट इंजन को कॉल करता है, जो फ्लास्क फ्रेमवर्क का हिस्सा है। जिनजा 2 टेम्पलेट तर्कों के रूप में पारित किए गए संबंधित मानों के साथ {{...}} ब्लॉकों को प्रतिस्थापित करता है।

टेम्पलेट्स में नियंत्रण ऑपरेटरों

Jinja2 टेम्प्लेट, अन्य बातों के अलावा, समर्थन नियंत्रण कथनों को {% ...%} ब्लॉकों के भीतर पारित किया गया। आइए हमारे टेम्पलेट ( app/templates/index.html फ़ाइल) में एक स्टेटमेंट जोड़ें:

 <html> <head> {% if title %} <title>{{title}} - microblog</title> {% else %} <title>Welcome to microblog</title> {% endif %} </head> <body> <h1>Hello, {{user.nickname}}!</h1> </body> </html>

अब हमारा टेम्पलेट थोड़ा और स्मार्ट हो गया है। यदि हम प्रेजेंटेशन फ़ंक्शन में पेज के नाम को परिभाषित करना भूल जाते हैं, तो अपवाद के बदले में, टेम्पलेट हमें अपना नाम प्रदान करेगा। आप यह देखने के लिए कि हमारे स्टेटमेंट फंक्शन में रेंडर_टेमप्लेट कॉल से हेडर तर्क को सुरक्षित रूप से कैसे हटाया जा सकता है।

पैटर्न चक्र

जो उपयोगकर्ता हमारे एप्लिकेशन में लॉग इन करता है, वह शायद मुख्य पृष्ठ पर उसकी संपर्क सूची के उपयोगकर्ताओं की हालिया प्रविष्टियां देखना चाहेगा, आइए देखें कि यह कैसे करना है।

शुरुआत में, हम कुछ नकली उपयोगकर्ताओं और कुछ प्रविष्टियों को प्रदर्शित करने के लिए ट्रिक करेंगे ( app/views.py ):

 def index(): user = { 'nickname': 'Miguel' } #   posts = [ #    { 'author': { 'nickname': 'John' }, 'body': 'Beautiful day in Portland!' }, { 'author': { 'nickname': 'Susan' }, 'body': 'The Avengers movie was so cool!' } ] return render_template("index.html", title = 'Home', user = user, posts = posts)

कस्टम प्रविष्टियों को प्रदर्शित करने के लिए, हम एक सूची का उपयोग करते हैं जहां प्रत्येक तत्व का लेखक और मुख्य क्षेत्र होगा। जब हम वास्तविक डेटाबेस के कार्यान्वयन के लिए आते हैं, तो हम इन फ़ील्ड नामों को सहेजेंगे, ताकि हम डेटाबेस में जाने पर उन्हें अपडेट करने की चिंता किए बिना नकली वस्तुओं का उपयोग करके अपने टेम्पलेट को डिज़ाइन और परीक्षण कर सकें।

टेम्पलेट की तरफ से, हमें एक नई समस्या को हल करना होगा। एक मौजूदा सूची में किसी भी संख्या में तत्व शामिल हो सकते हैं और आपको यह तय करने की आवश्यकता है कि कितने संदेश सबमिट किए जाएंगे। टेम्प्लेट संदेशों की संख्या के बारे में कोई धारणा नहीं बना सकता है, इसलिए इसे उतने संदेशों को प्रदर्शित करने के लिए तैयार होना चाहिए जितना कि दृश्य भेजता है।

आइए देखें कि नियंत्रण संरचना (फ़ाइल app/templates/index.html ) का उपयोग करके यह कैसे करें:

 <html> <head> {% if title %} <title>{{title}} - microblog</title> {% else %} <title>microblog</title> {% endif %} </head> <body> <h1>Hi, {{user.nickname}}!</h1> {% for post in posts %} <p>{{post.author.nickname}} says: <b>{{post.body}}</b></p> {% endfor %} </body> </html>

इतना मुश्किल नहीं है, है ना? हम एप्लिकेशन की जांच करेंगे और प्रविष्टियों की सूची में नई सामग्री को शामिल करना सुनिश्चित करेंगे।

टेम्प्लेट इनहेरिटेंस

आज समाप्त होने से पहले हम एक अन्य विषय को कवर करेंगे।

हमारे माइक्रोब्लॉगिंग ऐप को पृष्ठ के शीर्ष पर कुछ लिंक के साथ एक नेविगेशन बार की आवश्यकता होती है। आपकी प्रोफ़ाइल को संपादित करने, बाहर निकलने आदि के लिए लिंक होंगे।

हम अपने index.html टेम्प्लेट में एक नेविगेशन बार जोड़ सकते हैं, लेकिन जैसे ही हमारा एप्लिकेशन बढ़ता है, हमें अधिक टेम्प्लेट की आवश्यकता होगी, और उनमें से प्रत्येक पर नेविगेशन बार को कॉपी करना होगा। फिर आपको इन सभी कॉपियों को समान रखना चाहिए। यदि आपके पास कई टेम्पलेट हैं, तो यह समय लेने वाला कार्य हो सकता है।

इसके बजाय, हम जिनजा 2 टेम्प्लेट में विरासत का उपयोग कर सकते हैं, जो हमें पेज लेआउट के कुछ हिस्सों को एक सामान्य बुनियादी टेम्पलेट में ले जाने की अनुमति देता है जहां से अन्य सभी टेम्पलेट विरासत में मिलेंगे।

अब हम आधार टेम्प्लेट को परिभाषित करते हैं, जिसमें नेविगेशन बार, साथ ही हेडर लॉजिक भी शामिल है जिसे हमने पहले लागू किया था (फाइल app/templates/base.html ):

 <html> <head> {% if title %} <title>{{title}} - microblog</title> {% else %} <title>microblog</title> {% endif %} </head> <body> <div>Microblog: <a href="/index">Home</a></div> <hr> {% block content %}{% endblock %} </body> </html>

इस टेम्पलेट में, हमने यह निर्धारित करने के लिए block कंट्रोल ऑपरेटर का उपयोग किया कि बच्चे के टेम्पलेट कहाँ डाले जा सकते हैं। ब्लॉक को विशिष्ट नाम दिए गए हैं।

अब यह हमारे index.html को बदलने के लिए बना हुआ है ताकि यह base.html (फ़ाइल app/templates/index.html ) से base.html मिले:

 {% extends "base.html" %} {% block content %} <h1>Hi, {{user.nickname}}!</h1> {% for post in posts %} <div><p>{{post.author.nickname}} says: <b>{{post.body}}</b></p></div> {% endfor %} {% endblock %}

अब पृष्ठ की समग्र संरचना के लिए केवल base.html टेम्प्लेट जिम्मेदार है। हमने उन तत्वों को यहां से हटा दिया और केवल भाग को सामग्री के साथ छोड़ दिया। extends ब्लॉक दोनों टेम्प्लेट के बीच एक वंशानुगत संबंध स्थापित करती है, इसलिए जिनजा 2 जानता है: अगर हमें index.html देने की आवश्यकता है, तो हमें इसे base.html में शामिल करने की आवश्यकता है। दो टेम्प्लेट में content नामक मिलान स्टेटमेंट होते हैं, यही वजह है कि जिंजा 2 दो टेम्प्लेट को एक में जोड़ना जानता है। जब हम नए टेम्प्लेट लिखते हैं, तो हम उन्हें base.html एक्सटेंशन के रूप में बनाना शुरू करेंगे

अंतिम शब्द

यदि आप समय बचाना चाहते हैं, तो वर्तमान चरण में माइक्रोब्लॉगिंग एप्लिकेशन यहां उपलब्ध है:
माइक्रोब्लॉग-0.2.zip डाउनलोड करें

ध्यान दें कि ज़िप फ़ाइल में फ्लास्क वर्चुअल वातावरण नहीं है। पहले भाग में दिए गए निर्देशों का पालन करते हुए इसे स्वयं बनाएं, जिसके बाद आप आवेदन शुरू कर सकते हैं।

श्रृंखला के अगले भाग में हम रूपों पर एक नज़र डालते हैं। आपसे फिर मिलने की उम्मीद है।

मिगुएल

फ्लास्क मेगा-ट्यूटोरियल, भाग 2: टेम्पलेट