Flask Routing, Jinja2 Templates Master කරන්න | Sinhala Web Development Guide

ආයුබෝවන් යාළුවනේ! වෙබ් ලෝකයට සාදරයෙන් පිළිගනිමු!
අද අපි කතා කරන්න යන්නේ Web Development වලදී ගොඩක් දෙනෙක් භාවිතා කරන, Python වලින් හදන Micro Web Framework එකක් වෙන Flask ගැන. විශේෂයෙන්ම, Flask Application එකක හදවත බඳු වන URL Routing සහ අපේ Web Pages ලස්සනට හදාගන්න උදව් වෙන Jinja2 Templating Engine එක ගැනයි. මේ concepts දෙක හරියට තේරුම් ගත්තොත් ඔයාලට පුළුවන් Professional මට්ටමේ Flask Applications ලේසියෙන්ම හදන්න. එහෙනම්, අපි වැඩේට බහිමු!
1. Flask Routing (URL Routing) කියන්නේ මොකක්ද?
URL Routing කියන්නේ මොකක්ද?
සරලවම කිව්වොත්, URL Routing කියන්නේ Browser එකෙන් Request එකක් එනකොට (උදා: ඔබ web browser එකේ www.mywebsite.com/about
කියලා ගහනවා) ඒ URL එකට අදාළව, අපේ Flask Application එකේ මොන function එකද call වෙන්න ඕන කියලා තීරණය කරන එකට. හරියට ඔයාලගේ ගෙදරට එන කෙනෙක්ට, එයා ආව පාර අනුව එයා යන්න ඕන කාමරේ මොකක්ද කියලා කියනවා වගේ දෙයක් තමයි මේක. Flask වලදී මේ වැඩේට අපි @app.route()
decorator එක භාවිතා කරනවා.
සරල Route එකක් හදමු
අපි මුලින්ම සරල Flask Application එකක් හදලා, ඒකට Route එකක් එකතු කරමු. ඔයාලගේ project folder එකේ app.py
කියලා file එකක් හදලා මේ code එක ලියන්න:
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return "<h1>Welcome to My Flask App!</h1>"
@app.route('/about')
def about():
return "<h1>This is the About Page.</h1><p>We are learning Flask Routing.</p>"
if __name__ == '__main__':
app.run(debug=True)
මේ Code එකේ:
from flask import Flask
: Flask Library එක import කරගන්නවා.app = Flask(__name__)
: Flask Application එක initialize කරනවා.@app.route('/')
: මේක decorator එකක්. මේකෙන් කියන්නේ user කෙනෙක්/
(root URL එක) access කලොත්, ඊට යටින් තියෙනhome()
function එක execute කරන්න කියලයි.def home():
: මේ function එකෙන් user ට දකින්න ඕන output එක return කරනවා.app.run(debug=True)
: මේකෙන් Application එක run කරනවා.debug=True
කියන්නේ development කාලයේදී වැරදි තියෙනවා නම් ඒව Browser එකේම පෙන්නන්න කියලා. (Production වලදී මේකFalse
කරන්න මතක තියාගන්න).
මේ app.py
file එක run කරන්න:
python app.py
දැන් ඔයාලට පුළුවන් Browser එක open කරලා http://127.0.0.1:5000/
සහ http://127.0.0.1:5000/about
කියලා ගහලා බලන්න. ඒ URL වලට අදාළව අපේ functions වලින් return කරන output එක දකින්න ලැබේවි.
Dynamic Routes (Variable Rules)
සමහර වෙලාවට අපිට ඕන වෙනවා URL එකෙන් values අරගෙන ඒ අනුව output එක වෙනස් කරන්න. උදාහරණයක් විදියට, /user/John
, /user/Jane
වගේ URL එකේම user name එක යවන්න ඕන වෙනවා. මේකට අපි variable rules භාවිතා කරනවා.
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return "<h1>Welcome to My Flask App!</h1>"
@app.route('/user/<name>')
def user_profile(name):
return f"<h1>Hello, {name}!</h1><p>This is your personalized profile page.</p>"
@app.route('/post/<int:post_id>')
def show_post(post_id):
return f"<h1>Post ID: {post_id}</h1><p>This is post number {post_id}.</p>"
if __name__ == '__main__':
app.run(debug=True)
මේකේ <name>
කියන්නේ URL එකෙන් එන value එක අල්ලගන්න variable එකක්. මේක user_profile
function එකට name
කියන parameter එක විදියට යනවා. <int:post_id>
කියන්නේ ඒ වගේම variable එකක්, හැබැයි මේක int
(integer) type එකක් විදියට අල්ලගන්න කියලා specify කරලා තියෙනවා. මේ විදියට string
(default), int
, float
, path
, uuid
වගේ type converters භාවිතා කරන්න පුළුවන්.
2. Jinja2 Templating Engine
Web Templates ඕන ඇයි?
උඩ code එකේ අපි HTML tags Python code එක ඇතුළෙම return කළා. මේක පොඩි application එකකට කමක් නෑ. ඒත් ලොකු application එකකදී HTML, CSS, JavaScript වගේ දේවල් Python code එකත් එක්ක එකට තියෙනකොට code එක අවුල් වෙනවා, maintain කරන්න අමාරු වෙනවා. මේකට විසඳුම තමයි Templates. Templates භාවිතා කරලා අපිට පුළුවන් Logic (Python) සහ Presentation (HTML) වෙන් කරලා තියන්න. Flask වලදී මේ වැඩේට default විදියට Jinja2 Templating Engine එක භාවිතා කරනවා.
Jinja2 කියන්නේ මොකක්ද?
Jinja2 කියන්නේ Python වලට හදපු fast, expressive, extensible templating engine එකක්. HTML files ඇතුලේ Python variable display කරන්න, loops, if conditions වගේ දේවල් කරන්න මේක අපිට උදව් කරනවා.
Template එකක් Render කරමු
Jinja2 Templates භාවිතා කරන්න නම්, අපේ Flask Application එකේ templates
කියලා folder එකක් හදන්න ඕන. හැම Template File එකක්ම මේ folder එක ඇතුළේ තමයි තියෙන්න ඕන. Flask එකට මේ folder එක automatically හොයාගන්න පුළුවන්.
මුලින්ම, ඔබේ project folder එකේ templates
කියලා අලුත් folder එකක් හදන්න. ඒක ඇතුළේ index.html
කියලා file එකක් හදලා මේ HTML code එක paste කරන්න:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - Flask App</title>
</head>
<body>
<h1>Welcome to Our Awesome Flask App!</h1>
<p>This content is rendered from an HTML template.</p>
</body>
</html>
දැන් app.py
file එක update කරලා render_template
function එක භාවිතා කරමු:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route('/about')
def about():
return render_template('about.html') # අපි තවම මේක හැදුවේ නෑ, ඒත් හදන්න පුළුවන්
if __name__ == '__main__':
app.run(debug=True)
මතක තියාගන්න, render_template
function එක Flask Library එකෙන් import කරගන්න ඕන. දැන් app.py
run කරලා http://127.0.0.1:5000/
වලට ගියාම, index.html
file එකේ තියෙන content එක Browser එකේ display වෙනවා.
3. Passing Data to Templates (Data එහා මෙහා කරමු)
Jinja2 වල ප්රධානම වාසියක් තමයි, අපිට Python code එකෙන් variables සහ data templates වලට යවලා ඒවා dynamic විදියට display කරන්න පුළුවන් වීම. මේකෙන් අපිට පුළුවන් user ට අදාළව වෙනස් වෙන content, database එකෙන් එන data වගේ දේවල් Web Page එකේ display කරන්න.
Python වලින් Template එකට Data යවමු
අපි index.html
template එකට title
සහ user_name
කියන variables දෙකක් යවලා ඒවා display කරමු. මුලින්ම app.py
file එක update කරමු:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
page_title = "My Dynamic Home Page"
current_user = "Kasun"
# variables render_template function එකට keyword arguments විදියට යවන්න පුlahuwan
return render_template('index.html', title=page_title, user_name=current_user)
@app.route('/products')
def products():
product_list = ["Laptop", "Mouse", "Keyboard", "Monitor"]
return render_template('products.html', products=product_list)
if __name__ == '__main__':
app.run(debug=True)
දැන් templates
folder එකේ index.html
file එක මේ විදියට වෙනස් කරන්න:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Jinja2 variable එකක් display කරන්නේ {{ variable_name }} විදියටයි -->
<title>{{ title }}</title>
</head>
<body>
<h1>Welcome, {{ user_name }}!</h1>
<p>This is your personalized home page.</p>
</body>
</html>
මේ index.html
එකේ {{ title }}
සහ {{ user_name }}
කියන තැන් වලට app.py
එකෙන් යවන values replace වෙනවා. Browser එකේ title
එක සහ Welcome
message එක වෙනස් වෙලා තියෙනවා ඔයාලට දකින්න පුළුවන්.
Loops සහ Conditions භාවිතා කරමු
Jinja2 වලදී for
loops සහ if
conditions වගේ Python logic templates ඇතුලේ භාවිතා කරන්නත් පුළුවන්. අපි products.html
කියලා අලුත් Template එකක් හදලා, product_list
එක display කරමු.
templates
folder එක ඇතුළේ products.html
කියලා file එකක් හදලා මේ code එක ලියන්න:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Products</title>
</head>
<body>
<h1>Our Product List</h1>
<!-- Jinja2 loop එකක් {{% for item in list %}} {{% endfor %}} විදියටයි -->
<ul>
{% for product in products %}
<li>{{ product }}</li>
{% endfor %}
</ul>
{% if products %}
<p>We have {{ products|length }} products available!</p>
{% else %}
<p>Sorry, no products available at the moment.</p>
{% endif %}
</body>
</html>
දැන් app.py
run කරලා http://127.0.0.1:5000/products
වලට ගියාම, product_list
එකේ තියෙන items, HTML List එකක් විදියට දකින්න ලැබේවි. if
condition එකත් වැඩ කරන හැටි බලන්න product_list
එක empty කරලා run කරලා බලන්න.
4. පොදු ගැටළු සහ හොඳම ක්රම (Common Issues & Best Practices)
Common Issues (ගැටළු)
TemplateNotFound
Error: මේක ගොඩක් වෙලාවට එන්නේtemplates
folder එක හරියට හදලා නැත්නම්, නැත්නම් template file එකේ නම වැරදියට දීලා නම්. මතක තියාගන්න, Flask automatically හොයන්නේtemplates
කියන folder එක විතරයි. ඒ නම වෙනස් කරන්න එපා.- Incorrect Variable Passing: Template එකේ Variable එකක් display වෙන්නේ නැත්නම් හෝ වැරදි value එකක් display වෙනවා නම්,
app.py
එකේrender_template
function එකට variable එක හරියට යැව්වාද කියලා බලන්න. Jinja2 template එක ඇතුළේ variable name එක හරියට ලිව්වාද කියලා double check කරන්න ({{ variable_name }}
). - Syntax Errors in Templates: Jinja2 template එක ඇතුලේ HTML, Jinja2 syntax mix වෙනකොට වැරදි වෙන්න පුළුවන්.
{{ }}
(for variables),{% %}
(for statements like loops, if conditions) හරියට භාවිතා කළාද කියලා බලන්න.
Best Practices (හොඳම ක්රම)
- Separate Concerns (Logic vs. Presentation): මේක Web Development වලදී ගොඩක් වැදගත්. Flask application එකේ Python code එකේ Business Logic (data process කරන විදිය) තියාගෙන, HTML templates වලට Presentation Logic (user ට දකින්න ඕන විදිය) බාර දෙන්න. මේකෙන් code එක maintain කරන්න සහ debug කරන්න පහසු වෙනවා.
- Use a Base Template: ගොඩක් Web Pages වලට Header, Footer, Navigation Bar වගේ common sections තියෙනවා. මේවා හැම Template එකකම duplicate නොකර,
base.html
වගේ Base Template එකක් හදලා ඒක extend කරන්න පුළුවන්. මේකෙන් Code Repetition අඩු වෙනවා. (අපි මේ ලිපියේ ඒක cover කළේ නෑ, නමුත් Jinja2 documentation එකෙන් වැඩිදුර ඉගෙනගන්න පුළුවන්.) - Keep Templates Clean: Templates ඇතුළේ වැඩිපුර Python logic දාන්න යන්න එපා. Templates වල ප්රධානම අරමුණ data display කිරීමයි. Complicated logic තියෙනවා නම් ඒව Python function එකක් ඇතුළේ process කරලා, අවසාන result එක Template එකට යවන්න.
- Use Static Files: CSS, JavaScript, Images වගේ දේවල්
static
කියලා folder එකක් හදලා ඒක ඇතුළේ තියන්න පුළුවන්. Flask මේstatic
folder එකත් automatically identify කරනවා.
නිගමනය (Conclusion)
Flask Application එකක ප්රධාන කොටස් දෙකක් වෙන URL Routing සහ Jinja2 Templating Engine ගැන මේ ලිපියෙන් ඔයාලට හොඳ අවබෝධයක් ලැබෙන්න ඇති කියලා හිතනවා. URL Routing වලින් අපි Web Application එකේ different pages වලට අදාළව මොන Python code එකද run වෙන්න ඕන කියලා තීරණය කරනවා. Jinja2 Templates වලින් ඒ Python code එකෙන් එන data භාවිතා කරලා ලස්සන, Dynamic Web Pages හදනවා.
මේ Concepts දෙක හොඳට තේරුම් ගත්තා නම්, ඔයාලට තව දුරටත් Flask Application Develop කරන්න ලොකු පදනමක් ලැබෙනවා. මේක පටන්ගැන්මක් විතරයි! තව ගොඩක් දේවල් Flask එක්ක කරන්න පුළුවන්. Databases එක්ක වැඩ කරන හැටි, Forms handle කරන හැටි, User Authentication වගේ දේවල් ගැනත් ඉස්සරහට අපි කතා කරමු.
මේ ලිපියේ තියෙන Code Examples ඔයාලගේම පරිගණකයේ Run කරලා, පොඩි පොඩි වෙනස්කම් කරලා බලන්න. එතකොට තමයි මේ දේවල් හරියටම ඔලුවට යන්නේ. මේ ගැන ඔයාලගේ අත්දැකීම්, ප්රශ්න, නැත්නම් වෙන මොනවා හරි දැනගන්න ඕන නම් Comment Section එකේ දාන්න අමතක කරන්න එපා! අපි හැමෝම එකතු වෙලා ඉගෙනගනිමු!