FLASK ile Denemeler - 1

Bu yazımızda Python dilinin Flask Framework'u ile deneme yapacağız. Tabi Flask hakkında bilgisi olmayan arkadaşlarımız olabilir. Bunun için onlara bir kaynak olarak şu Flask linkine yönlendirelim. Bu linkteki kaynakta Flask nasıl kurulur, basit anlamda ilk flask uygulaması nasıl yapılır ve django ile farklar nelerdir gibi sorulara cevap bulabilirsiniz. Şimdi bu yazımızda da ilk başlangıcı yapmaktayız tabi ki ama biraz daha detaya gireceğimizden dolayı ilk olarak o linki incelemenizde fayda olabilir.

Şimdi ilk başlangıcı yapanlar ile biz ne yapacağız ona bakalım. İlk olarak bir tane app.py dosyası oluşturacağız ve templates klasörü içerisinde index.html ve about.html arayüz dosyalarını oluşturacağız. App.py ile flask sistemimizi çalıştıracağız ve kullanıcıdan gelen istekler ile birlikte nasıl ve nereye yönlendirme yapacağımızı söyleyeceğiz. Index.html bizim anasayfamız olacaktır ve about.html sayfası da bizim ikinci sayfamız olacaktır. Hadi kod kısmına geçelim.

app.py

# Ilk başta flask kütüphanemizi çağırıyoruz.
from flask import Flask, redirect, url_for, request, render_template

 
# Flask yapıcısının adını alır.
# geçerli modül (__name__) argüman olarak.
app = Flask(__name__)
 
# Flask sınıfının route() işlevi bulunmaktadır,
# uygulamaya hangi URL'nin araması gerektiğini söyler.
@app.route('/', methods = ['POST', 'GET'])
# '/' URL, index() işlevine bağlıdır.
def index():
    
    #render_template ile beraber gönderilecek örnek bir değişken tanımladık.
    name = "mfg"
    
    #request metodu olarak post metodu kullanılmış mı diye bakıyoruz.
    if request.method == 'POST':
        
        #eğer about isminde butona tıklandıysa
        if request.form['submit_button'] == 'about':
            print("about_page")
            return render_template("about.html")
        
        #eğer mfg isminde butona tıklandıysa
        elif request.form['submit_button'] == 'mfg':
            print("index_page_with_html")
            return render_template("index.html", name = name)
    
    #normal açarken bu sayfa
    return render_template("index.html")

# ana sürücü işlevi
if __name__ == '__main__':
    # Flask sınıfının run() yöntemi uygulamayı çalıştırır
    # yerel geliştirme sunucusunda.
    app.run()

Burada yorum satırları ile olayların nasıl olduğunu birazda olsa anlatmaya çalıştım. Şimdi index.html sayfamızda nasıl buton oluşturmuşuz ve çıktıları nasıl göstermeye çalışmışız ona bakalım.

index.html

<!doctype html>
<html>

<head>
    <title>mfgstudiosblog</title>
</head>

<body>
    <!-- burada post metodunu kullanarak çalışıyoruz -->
    <form method="post" action="/">
        <p>
            <!-- value olayı üzerinden hangi butona tıkladığımızı belirtiyoruz. -->
            <button class="btn" type="submit" name="submit_button" value="about">
                About Page</button>
        </p>
        <p>
            <button class="btn btn-info" type="submit" name="submit_button" value="mfg">
                Come back and see "mfg" text</button>
        </p>
    </form>

    <!-- burada jinja template ile name adında bir değişken gönderilmiş mi diye bakıyoruz. -->
    {% if name %}
    <br />
    <br />
    <h1>Hello {{name}}, good to see you!</h1>
    {% endif %}
    
</body>

<style>
    .btn {
        padding: 6px 12px;
        border-radius: 4px;
        text-align: center;
        vertical-align: middle;
    }

    .btn-info {
        background-color: #5bc0de;
        border-color: #46b8da;
        color: #fff;
    }

    .btn-info:hover,
    .btn-info:focus,
    .btn-info:acitive {
        background-color: #31b0d5;
        border-color: #269abc;
        color: #fff;
    }
</style>

</html>

Burada butonlarımız bulunmaktadır. Bu butonlarımızı backend ile bağlantılı olarak yaptık ve butonlardan gelen değerlere göre neler yapması gerektiğini söylüyoruz. Jinja template ile değişkenle beraber sayfa render'ı yaptığımız durumda ekranda göstermek istediğimiz kısımları da göstermektedir. Diğer sayfaya gitme tuşumuzda bulunmaktadır bu sayfada, diğer sayfamızı da örnek olarak yaptık. Amacımız tamamen başka bir html sayfasına nasıl gidilir onu göstermek olduğundan dolayı w3schools.com sitesinden about.html kodunu aldık.

about.html

<!-- w3schools sayfasindan ornek olarak alinmistir -->
<!doctype html>
<html>

<head>
    <title>mfgstudiosblog</title>
</head>

<body>
    <div class="about-section">
        <h1>About Us Page</h1>
        <p>W3SCHOOLS sitesinden örnek olarak alınmıştır.</p>
        <p>Resize the browser window to see that this page is responsive by the way.</p>
    </div>

    <h2 style="text-align:center">Our Team</h2>
    <div class="row">
        <div class="column">
            <div class="card">
                <div class="container">
                    <br />
                    <h2>Jane Doe</h2>
                    <p class="title">CEO & Founder</p>
                    <p>Some text that describes me lorem ipsum ipsum lorem.</p>
                    <p>jane@example.com</p>
                    <p><button class="button">Contact</button></p>
                </div>
            </div>
        </div>

        <div class="column">
            <div class="card">
                <div class="container">
                    <br />
                    <h2>Mike Ross</h2>
                    <p class="title">Art Director</p>
                    <p>Some text that describes me lorem ipsum ipsum lorem.</p>
                    <p>mike@example.com</p>
                    <p><button class="button">Contact</button></p>
                </div>
            </div>
        </div>

        <div class="column">
            <div class="card">
                <div class="container">
                    <br />
                    <h2>John Doe</h2>
                    <p class="title">Designer</p>
                    <p>Some text that describes me lorem ipsum ipsum lorem.</p>
                    <p>john@example.com</p>
                    <p><button class="button">Contact</button></p>
                </div>
            </div>
        </div>
    </div>
</body>
<style>
    body {
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
    }

    html {
        box-sizing: border-box;
    }

    *,
    *:before,
    *:after {
        box-sizing: inherit;
    }

    .column {
        float: left;
        width: 33.3%;
        margin-bottom: 16px;
        padding: 0 8px;
    }

    .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        margin: 8px;
    }

    .about-section {
        padding: 50px;
        text-align: center;
        background-color: #474e5d;
        color: white;
    }

    .container {
        padding: 0 16px;
    }

    .container::after,
    .row::after {
        content: "";
        clear: both;
        display: table;
    }

    .title {
        color: grey;
    }

    .button {
        border: none;
        outline: 0;
        display: inline-block;
        padding: 8px;
        color: white;
        background-color: #000;
        text-align: center;
        cursor: pointer;
        width: 100%;
    }

    .button:hover {
        background-color: #555;
    }

    @media screen and (max-width: 650px) {
        .column {
            width: 100%;
            display: block;
        }
    }
</style>

</html>

Şimdi size sayfalarımızın çıktılarını gösterelim.

Bu Blogda Ara

mfgStudio's blog