Flask Forms & User Input Sinhala Guide | ෆ්ලෑස්ක් ෆෝම්ස් සහ ඉන්පුට් හැන්ඩ්ලින්

ආයුබෝවන් යාලුවනේ! වෙබ් ඇප්ලිකේෂන්ස් වල හදවත - ෆෝම්ස් ගැන කතා කරමු!

ඉතින් කොහොමද යාලුවනේ! අද අපි කතා කරන්න යන්නේ වෙබ් සංවර්ධනයේදී නැතුවම බැරි, ඒ වගේම ගොඩක් වැදගත් දෙයක් ගැන – ඒ තමයි User Input සහ Forms.

ඔබ වෙබ්සයිට් එකක් භාවිතා කරනකොට දත්ත ඇතුලත් කරන්න, පිවිසෙන්න (login) හෝ යම් තොරතුරක් යවන්න පුළුවන් ෆෝම්ස් දැකලා ඇතිනේ. Contact Us ෆෝම් එකක්, Login ෆෝම් එකක්, Sign Up ෆෝම් එකක් වගේ දේවල්. මේ ෆෝම්ස් හරහා තමයි Users ලාට අපේ ඇප්ලිකේෂන් එකත් එක්ක interact වෙන්න පුළුවන් වෙන්නේ. Python වලින් වෙබ් ඇප්ලිකේෂන්ස් හදනකොට Flask කියන්නේ ගොඩක් ජනප්‍රිය Framework එකක්. ඉතින් අපි බලමු Flask භාවිතා කරලා මේ ෆෝම්ස් සහ user input හරියට handle කරන්නේ කොහොමද කියලා.

මේ ලිපියෙන් අපි HTML Forms වල මූලිකාංග, Flask භාවිතා කරලා form submissions handle කරන හැටි, GET සහ POST request methods, input validation, සහ ආරක්ෂාවට අදාළ හොඳම පුරුදු (Best Practices) ගැන විස්තරාත්මකව කතා කරනවා. ඔයාලගේ ඊලඟ Flask Project එකට මේක ගොඩක් ප්‍රයෝජනවත් වෙයි කියලා මට විශ්වාසයි!

වෙබ් ෆෝම්ස් වල මූලිකාංග (Fundamentals of Web Forms)

ඕනෑම වෙබ් ෆෝම් එකක මූලිකම දේ තමයි HTML. අපේ Browser එකේ පේන ෆෝම් එක හැදෙන්නේ HTML වලින්. Flask වගේ Backend Framework එකකින් කරන්නේ ඒ HTML ෆෝම් එකෙන් එවන දත්ත ලබාගෙන ඒවා අපේ අවශ්‍යතාවයට අනුව සැකසීමයි.

HTML <form> Tag එක

සෑම ෆෝම් එකක්ම ආරම්භ වෙන්නේ <form> tag එකකින්. මේක ඇතුලේ තමයි අපිට user input ලබාගන්න අවශ්‍ය elements (text boxes, buttons, checkboxes, etc.) දාන්නේ.

<form> tag එකට ප්‍රධාන attributes දෙකක් තියෙනවා:

• action: ෆෝම් එක submit කරාම දත්ත යවන්න ඕන URL එක. (e.g., /submit_contact)
• method: දත්ත යවන්න භාවිතා කරන HTTP method එක. ප්‍රධාන වශයෙන් GET සහ POST කියන දෙක තමයි භාවිතා වෙන්නේ.

GET vs. POST Request Methods

මේ දෙකේ වෙනස හරියටම තේරුම් ගැනීම ගොඩක් වැදගත්. මොකද මේවා භාවිතා කරන විදිය අනුව තමයි දත්ත යැවෙන විදියයි, ආරක්ෂාවයි තීරණය වෙන්නේ.

• GET Method:
  • ෆෝම් එකේ දත්ත URL එකේ Query String එකක් විදියට යවයි. (e.g., /search?query=flask+forms)
  • ප්‍රයෝජන: දත්ත ලබාගැනීමට (fetching data), Search Forms වලදී. Bookmarks කරන්න පුළුවන්, share කරන්න පුළුවන් URLs හදන්න හොඳයි.
  • අවාසි: යවන්න පුළුවන් දත්ත ප්‍රමාණය සීමා සහිතයි. Sensitive Data (රහස්‍ය තොරතුරු, passwords) යවන්න සුදුසු නෑ. මොකද Browser History එකේ වුණත් මේවා record වෙනවා.
• POST Method:
  • ෆෝම් එකේ දත්ත HTTP request body එක ඇතුළේ යවයි. ඒ නිසා URL එකේ දත්ත පෙන්නේ නෑ.
  • ප්‍රයෝජන: දත්ත නිර්මාණය කිරීමට (creating data), යාවත්කාලීන කිරීමට (updating data), හෝ මකා දැමීමට (deleting data). Login Forms, Contact Forms, Registration Forms වගේ තැන් වලට ඉතා සුදුසුයි.
  • අවාසි: Bookmarks කරන්න බෑ, share කරන්න බෑ.

සාමාන්‍යයෙන්, user කෙනෙක් දත්ත ඇතුලත් කරලා server එකට යවන හැම වෙලාවකම වගේ අපි POST method එක තමයි භාවිතා කරන්නේ. මොකද මේක වඩා ආරක්ෂිතයි, ඒ වගේම විශාල දත්ත ප්‍රමාණයක් යවන්න පුළුවන්.

Input Elements

<form> එක ඇතුලේ භාවිතා කරන පොදු input elements කිහිපයක් මෙන්න:

• <input type="text" name="username">: Single-line text input.
• <input type="password" name="password">: Password input (characters are masked).
• <input type="email" name="email">: Email input (browser may validate format).
• <input type="submit" value="Submit">: Button to submit the form.
• <textarea name="message"></textarea>: Multi-line text input.
• <select name="country"><option>...</option></select>: Dropdown list.
• <input type="radio" name="gender" value="male">: Radio button.
• <input type="checkbox" name="newsletter" value="yes">: Checkbox.

මේ හැම input element එකකටම name attribute එකක් තියෙන්නම ඕන. මේ name attribute එක තමයි Flask එකට දත්ත ලබාගන්න යතුරු (key) විදියට භාවිතා වෙන්නේ.

ෆ්ලෑස්ක් වල ෆෝම්ස් හසුරුවන හැටි (Handling Forms in Flask)

Flask වලදී user input handle කරන්න request object එක භාවිතා කරනවා. මේ request object එක Flask වලට එන හැම HTTP request එකකම තොරතුරු අඩංගු කරනවා.

request Object එක භාවිතා කිරීම

• request.method: Request එකේ HTTP method එක ('GET', 'POST', etc.) ලබාගන්න.
• request.form: POST request එකකින් එවන form data ලබාගන්න (Dictionary වගේ).
• request.args: GET request එකකින් එවන query string data ලබාගන්න (Dictionary වගේ).

හරි, දැන් අපි සරල Contact Us ෆෝම් එකක් හදලා ඒකෙන් එවන දත්ත Flask වලින් handle කරන්නේ කොහොමද කියලා බලමු. මේක තනිකරම Theory විතරක් නෙවෙයි, අපි code එකකුත් එක්කම බලමු!

ප්‍රායෝගික උදාහරණයක්: Contact Us ෆෝම් එකක් (A Practical Example: Contact Us Form)

මුලින්ම අපිට Flask app එකක් හදාගන්න ඕනේ. ඒකට app.py කියලා ෆයිල් එකක් හදලා පහත code එක දාන්න.

app.py

from flask import Flask, render_template, request, flash, redirect, url_for

app = Flask(__name__)
app.secret_key = 'your_secret_key_here' # For flash messages, very important!

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/contact', methods=['GET', 'POST'])
def contact():
    if request.method == 'POST':
        # Form එක submit කරලා තියෙන්නේ POST method එකෙන් නම්
        name = request.form['name']
        email = request.form['email']
        message = request.form['message']

        # මෙතනදි අපි data ටික print කරලා බලමු.
        # 실제 application එකක නම් මේවා database එකකට save කරන්න පුළුවන්.
        print(f"Name: {name}, Email: {email}, Message: {message}")

        flash('ඔබගේ පණිවිඩය සාර්ථකව ලැබුණා! ස්තුතියි.', 'success')
        return redirect(url_for('success_page'))

    # Form එක load කරද්දි (GET request) හෝ validation fail වුණොත්
    return render_template('contact.html')

@app.route('/success')
def success_page():
    return "<h1>පණිවිඩය සාර්ථකයි!</h1><p>ඔබේ පණිවිඩය සාර්ථකව ලැබුණා.</p>"


if __name__ == '__main__':
    app.run(debug=True)

දැන් අපිට අවශ්‍යයි HTML templates ටික. templates කියලා folder එකක් හදලා ඒක ඇතුලේ index.html සහ contact.html කියන files ටික හදමු.

templates/index.html

<!DOCTYPE html>
<html lang="si">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Forms Sinhala Guide</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; background-color: #f4f4f4; }
        .container { max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
        h1 { color: #333; }
        p { color: #666; }
        a { display: inline-block; margin-top: 20px; padding: 10px 15px; background-color: #007bff; color: white; text-decoration: none; border-radius: 5px; }
        a:hover { background-color: #0056b3; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Flask Forms සහ User Input Sinhala Guide</h1>
        <p>මෙය Flask Forms ගැන සරල උදාහරණයකි.</p>
        <a href="{{ url_for('contact') }}">Contact Form වෙත යන්න</a>
    </div>
</body>
</html>

templates/contact.html

<!DOCTYPE html>
<html lang="si">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us | Flask Form</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; background-color: #f4f4f4; }
        .container { max-width: 600px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
        h1 { color: #333; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input[type="text"], input[type="email"], textarea { width: calc(100% - 22px); padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; }
        textarea { resize: vertical; min-height: 100px; }
        input[type="submit"] { background-color: #28a745; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
        input[type="submit"]:hover { background-color: #218838; }
        .flash-message { padding: 10px; margin-bottom: 15px; border-radius: 4px; }
        .flash-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .flash-error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
    </style>
</head>
<body>
    <div class="container">
        <h1>අපව සම්බන්ධ කරගන්න</h1>

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                <div>
                    {% for category, message in messages %}
                        <div class="flash-message flash-{{ category }}">{{ message }}</div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}

        <form action="{{ url_for('contact') }}" method="POST">
            <label for="name">ඔබේ නම:</label>
            <input type="text" id="name" name="name" required>

            <label for="email">විද්‍යුත් තැපෑල:</label>
            <input type="email" id="email" name="email" required>

            <label for="message">ඔබේ පණිවිඩය:</label>
            <textarea id="message" name="message" required></textarea>

            <input type="submit" value="පණිවිඩය යවන්න">
        </form>
        <p><a href="{{ url_for('index') }}">මුල් පිටුවට</a></p>
    </div>
</body>
</html>

දැන් ඔයාලට පුළුවන් මේක run කරන්න: python app.py. ඊට පස්සේ Browser එකේ http://127.0.0.1:5000/ කියලා ගිහින් බලන්න.

මෙහිදී වෙන්නේ:

1. /contact URL එකට GET request එකක් ආවොත්, contact.html ෆෝම් එක render වෙනවා.
2. User කෙනෙක් ෆෝම් එක පුරවලා POST request එකක් විදියට submit කරාම, request.method == 'POST' කියන condition එක True වෙලා ෆෝම් එකේ දත්ත request.form['name'], request.form['email'], request.form['message'] වගේ විදියට ලබාගන්නවා.
3. ඒ දත්ත console එකේ print කරලා, user ට flash message එකක් පෙන්නලා /success page එකට redirect කරනවා.
4. app.secret_key කියන එක flash() function එක භාවිතා කරන්න අනිවාර්යයි. ඕනෑම රහසක් මෙතනට දාන්න පුළුවන්.

ඉන්පුට් වැලිඩේෂන් සහ ආරක්ෂාව (Input Validation and Security)

දැන් අපි සාර්ථකව ෆෝම් එකෙන් දත්ත ගත්තා. හැබැයි මේක ප්‍රමාණවත් නෑ. මොකද Internet එකේ ඉන්න හැම user කෙනෙක්ම හොඳ අය නෙවෙයි. නරක දත්ත (malicious data) හෝ වැරදි දත්ත යවන්න උත්සාහ කරන්න පුළුවන්. ඒ නිසා, user input validate කරන එකයි, secure කරන එකයි ගොඩක් වැදගත්.

වැලිඩේෂන් වැදගත් ඇයි? (Why is Validation Important?)

• ආරක්ෂාව (Security): SQL Injection, Cross-Site Scripting (XSS) වගේ ප්‍රහාර නවත්තන්න පුළුවන්.
• දත්තවල ගුණාත්මකභාවය (Data Integrity): Database එකට වැරදි data save වීම වළක්වනවා. (උදා: email field එකට නමක් යැවීම).
• පරිශීලක අත්දැකීම (User Experience): වැරදි සිදුවීම්වලදී user ට පැහැදිලි feedback එකක් දීමෙන් ඔවුන්ට පහසුවෙන් නිවැරදි කරගන්න පුළුවන්.

වැලිඩේෂන් ප්‍රධාන වශයෙන් ආකාර දෙකකට කරන්න පුළුවන්:

1. Client-side Validation (Browser): HTML5 required attribute එක, JavaScript වගේ දේවල් වලින් කරන්නේ. මේක user experience එකට හොඳ වුණත්, ආරක්ෂාවට ප්‍රමාණවත් නෑ. මොකද හැකර් කෙනෙක්ට මේවා මඟහරින්න පුළුවන්.
2. Server-side Validation (Flask): අපේ Flask code එක ඇතුළේ දත්ත server එකට ආවට පස්සේ validation කරන එක. මේක අනිවාර්යයෙන්ම කරන්න ඕනේ.

මූලික Server-side Validation

අපේ Contact Us ෆෝම් එකට server-side validation එකතු කරමු. උදාහරණයක් විදියට, Fields හිස්ද කියලා බලමු, Email එකක් වලංගුද කියලා සරලව බලමු.

app.py (වැලිඩේෂන් එකතු කළ පසු)

from flask import Flask, render_template, request, flash, redirect, url_for
import re # Email validation වලට

app = Flask(__name__)
app.secret_key = 'your_secret_key_here' # Make this a strong, random key in production!

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/contact', methods=['GET', 'POST'])
def contact():
    if request.method == 'POST':
        name = request.form.get('name') # .get() method එක භාවිතා කරන්න, field එක නැත්නම් Error එකක් එන්නේ නෑ
        email = request.form.get('email')
        message = request.form.get('message')

        errors = []

        # --- Validation Logic --- 
        if not name:
            errors.append('නම හිස්ව තැබිය නොහැක.')
        
        if not email:
            errors.append('විද්‍යුත් තැපෑල හිස්ව තැබිය නොහැක.')
        elif not re.match(r'^[^@]+@[^@]+\.[^@]+$', email): # Simple regex for email format
            errors.append('වලංගු විද්‍යුත් තැපෑලක් ඇතුලත් කරන්න.')
            
        if not message:
            errors.append('පණිවිඩය හිස්ව තැබිය නොහැක.')
        elif len(message) < 10:
            errors.append('පණිවිඩය අකුරු 10කට වඩා දිග විය යුතුය.')
        # --- End Validation Logic ---

        if errors:
            # Errors තියෙනවා නම්, ඒවා flash කරලා form එක නැවත පෙන්වන්න
            for error in errors:
                flash(error, 'error') # 'error' category එක භාවිතා කරනවා
            return render_template('contact.html', name=name, email=email, message=message)
        else:
            # Validation සාර්ථක නම්, දත්ත සැකසීම
            print(f"Name: {name}, Email: {email}, Message: {message}")

            flash('ඔබගේ පණිවිඩය සාර්ථකව ලැබුණා! ස්තුතියි.', 'success')
            return redirect(url_for('success_page'))

    # GET request එකකට හෝ validation fail වූ පසු form එක පෙන්වීමට
    return render_template('contact.html')

@app.route('/success')
def success_page():
    return "<h1>පණිවිඩය සාර්ථකයි!</h1><p>ඔබේ පණිවිඩය සාර්ථකව ලැබුණා.</p><p><a href='/contact'>අපව නැවත සම්බන්ධ කරගන්න</a> | <a href='/'>මුල් පිටුවට</a></p>"

if __name__ == '__main__':
    app.run(debug=True)

මෙහිදී contact.html template එකේ flash messages display කරන කොටස ඒ විදියටම තියෙන නිසා අලුතින් වෙනස්කමක් කරන්න අවශ්‍ය නෑ. .get() method එක භාවිතා කිරීමෙන්, කිසියම් field එකක් නැති වුණොත් KeyError එකක් එන එක වළක්වා ගන්න පුළුවන්.

CSRF (Cross-Site Request Forgery) ආරක්ෂාව

CSRF කියන්නේ වෙබ් අඩවිවලට එල්ලවෙන ඉතාම භයානක ප්‍රහාරයක්. මේකෙන් වෙන්නේ, attacker කෙනෙක් user කෙනෙක්ව ඔවුන් නොදැනුවත්වම ඔවුන්ගේ අවසරය ඇතිව (user login වෙලා ඉන්න නිසා) යම් ක්‍රියාවක් server එකට යවන්න සලස්වන එකයි. (උදා: මුදල් මාරු කිරීමක්, password එකක් වෙනස් කිරීමක්).

Flask වලදී මේකට ආරක්ෂාව සපයන්න Flask-WTF වගේ Extensions භාවිතා කරනවා. Flask-WTF මඟින් CSRF token එකක් generate කරලා, ෆෝම් එකත් එක්ක යවනවා. Server එකට request එකක් ආවම මේ token එක validate කරලා තමයි request එක පිළිගන්නේ. මේක Flask Forms handle කරනකොට අනිවාර්යයෙන්ම සලකා බැලිය යුතු දෙයක්.

හොඳම පුරුදු (Best Practices)

Flask වල Forms සහ User Input handle කරනකොට මතක තියාගන්න ඕන වැදගත්ම දේවල් ටිකක් මෙන්න:

1. සෑම විටම Server-side Validation භාවිතා කරන්න:Client-side validation (HTML required, JavaScript) user experience එකට හොඳ වුණත්, ආරක්ෂාවට ප්‍රමාණවත් නෑ. User කෙනෙක්ට browser එකේ tools භාවිතා කරලා client-side validation මඟහරින්න පුළුවන්. ඒ නිසා, server එකට දත්ත ආවම අනිවාර්යයෙන්ම validation කරන්න.
2. සුදුසු HTTP Method එක භාවිතා කරන්න:දත්ත සර්වර් එකට යවන, වෙනස් කරන operations වලට (Login, Register, Contact Us) POST method එක භාවිතා කරන්න. දත්ත ලබාගන්න විතරක් GET method එක භාවිතා කරන්න.
3. දත්ත Sanitization කරන්න:User input එකෙන් HTML tags, SQL queries වගේ අහිතකර දේවල් ඉවත් කරන්න (escaping HTML, parameterizing SQL queries). මෙය XSS (Cross-Site Scripting) සහ SQL Injection වගේ ප්‍රහාර වළක්වා ගැනීමට උපකාරී වෙනවා. Flask වල Jinja2 templating engine එක default එකෙන්ම auto-escaping කරන නිසා HTML output එකේදී XSS අවදානම අඩුයි. හැබැයි database එකට save කරනකොට හෝ වෙනත් තැනකදී භාවිතා කරනකොට ප්‍රවේශම් වෙන්න.
4. Flask-WTF වැනි Extensions භාවිතා කරන්න:Forms manage කිරීම, validation, CSRF protection වගේ දේවල් simplify කරන්න Flask-WTF වගේ Extensions ගොඩක් උදව් වෙනවා. මේවා production applications වලට ඉතාම සුදුසුයි. (මේ ලිපියේ මූලික සංකල්ප තේරුම් කරන්න අපි Flask-WTF භාවිතා නොකළත්, ප්‍රායෝගිකව භාවිතා කිරීම නිර්දේශ කරනවා).
5. පැහැදිලි Error Messages දෙන්න:Validation fail වුණොත් user ට මොකද වුණේ කියලා පැහැදිලිව කියන්න. ඒ වගේම, පුරවපු data නැවත form එකේ පෙන්නන්න පුළුවන් නම් user ට නැවත ටයිප් කරන්න අවශ්‍ය වෙන්නේ නෑ.
6. redirect() සහ url_for() භාවිතා කරන්න:POST request එකක් සාර්ථකව complete වුණාට පස්සේ user ව අනිවාර්යයෙන්ම වෙනත් page එකකට redirect() කරන්න. මේක 'Post/Redirect/Get' (PRG) pattern එක කියලා හඳුන්වනවා. මේකෙන් වෙන්නේ user කෙනෙක් form එක submit කරලා page එක refresh කළොත් නැවත එම form submission එක යැවීම වළක්වන එකයි. url_for() function එක URL hardcode කරනවාට වඩා හොඳයි, මොකද ඔයාගේ routes වල නම් වෙනස් වුණොත් වුණත් automatic update වෙනවා.

නිගමනය (Conclusion)

ඉතින් යාලුවනේ, මේ ලිපියෙන් අපි Flask භාවිතා කරලා Forms සහ User Input handle කරන හැටි, ඒ වගේම input validation සහ ආරක්ෂාවට අදාළ වැදගත් කරුණු ගොඩක් සාකච්ඡා කළා. මතක තියාගන්න, user input කියන්නේ අපේ web application එකක backbone එක වගේ. ඒ නිසා ඒක නිවැරදිව සහ ආරක්ෂිතව handle කරන එක ඉතාම වැදගත්.

සරල ෆෝම් එකක් නිර්මාණය කිරීමේ සිට, දත්ත ලබාගැනීම, මූලික validation කිරීම සහ ආරක්ෂිත භාවිතයන් දක්වා මේ සියලුම දේවල් දැන් ඔබට පැහැදිලි ඇති කියලා මම හිතනවා.

දැන් ඔයාලට පුළුවන් මේ දැනුම ඔයාලගේ ඊළඟ Flask Project එකට යොදවන්න. අනිවාර්යයෙන්ම මේ code examples ටික ඔයාලගේම පරිගණකයේ run කරලා බලන්න. තවදුරටත් Flask-WTF වැනි Forms Extension එකක් ගැන අධ්‍යයනය කරන්නත් මම ඔයාලට invite කරනවා. මොකද ඒවා production ready applications වලදී ගොඩක් ප්‍රයෝජනවත් වෙනවා.

මේ ලිපිය ගැන ඔයාලගේ අදහස්, ප්‍රශ්න හෝ අත්දැකීම් පහතින් comment කරන්න. අපි හැමෝටම එකතු වෙලා ඉගෙන ගනිමු!

සුබ දවසක්!