Articles, Dashboard

Kategori: Python / Flask , 18 Eylül 2019 , JanFranco


Kullanıcı paneli ve yazı ekleme sayfası yapacağız. İlk olarak veritabanımızı açalım ve articles adında bir tablo oluşturalım. ID, title, content ve author sütunları olsun, ID sütunu otomatik artsın.

Ana dosyamızı açalım ve ArticleForm adında bir ekleyelim:


class ArticleForm(Form):
    title = StringField("Title: ", validators=[validators.Length(min = 5, max = 30)])
    content = TextAreaField("Content: ", validators=[validators.Length(min = 10)])
Yazılarımızı görebileceğimiz bir kullanıcı paneli oluşturalım:


@app.route("/dashboard")
def dashboard():
    cursor = mysql.connection.cursor()
    query = "SELECT * from articles WHERE author = %s"
    result = cursor.execute(query, (session["username"],))

    if result > 0:
        articles = cursor.fetchall()
        return render_template("dashboard.html", articles = articles)
    else:
        return render_template("dashboard.html")
Oturumumuz açıkken session["username"] ile kullanıcı adımızı çekebiliriz. Çekilen kullanıcı adını articles tablosunda sorgulatarak yazıları çekip dashboard.html dosyasına gönderebiliriz. dashboard.html dosyasını oluşturalım:


{% extends "layout.html" %}

{% block body %}

    <h3>Dashboard</h3>
    <small>Welcome {{ session["username"] }}</small>
    <hr>
    <h4>Articles</h4>
    {% if articles %}
        <table class="table table-hover">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Title</th>
                    <th scope="col">Content</th>
                    <th scope="col">Date</th>
                </tr>
            </thead>
            <tbody>
                {% for article in articles %}
                    <tr>
                        <th scope="row">{{ article.id }}</th>
                        <td><a href="/articles/{{ article.id }}">{{ article.title }}</td>
                        <td>{{ article.content|safe }}</td>
                        <td>{{ article.createddate }}</td>
                        <td><a href="/edit/{{article.id}}" class="btn btn-danger">Update</a></td>
                        <td><a href="/delete/{{article.id}}" class="btn btn-danger">Delete</a></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>

    {% else %}
        <div class="alert alert-danger">No article!</div>
    {% endif %}
    <br>
    <a href="/addarticle" class="btn btn-danger">Add article</a>

{% endblock body %}
Kullanıcı panelimizde yazı oluşturabilir, var olan yazılarımızı silebilir, güncelleyebiliriz. Yazı silme ve güncelleme özelliklerini daha sonra ekleyeceğiz. Ana dosyamızı açalım ve addarticle() fonksiyonunu yazalım:


@app.route("/addarticle", methods=["GET", "POST"])
def addarticle():
    form = ArticleForm(request.form)
    if request.method == "POST" and form.validate():
        title = form.title.data
        content = form.content.data
        
        cursor = mysql.connection.cursor()
        query = "INSERT INTO articles(title, content, author) VALUES(%s, %s, %s)"
        cursor.execute(query, (title, content, session["username"]))
        mysql.connection.commit()
        cursor.close()

        flash("Article added successfully!", category="success")
        return redirect(url_for("dashboard"))
    else:
        return render_template("addarticle.html", form = form)
addarticle.html dosyasını oluşturalım:


{% extends "layout.html" %}

{% block body %}
    {% from "includes/form_helpers.html" import render_field %}
    <h3>Add Article</h3>
    <hr>
    <form method = "post">
        {{ render_field(form.title, class = "form-control") }}
        {{ render_field(form.content, class = "form-control", rows = 17, cols = 50) }}
        <button type="submit" class="btn btn-primary" style="float: right;">Add</button>
    </form>
{% endblock body %}
Kullanıcı paneli oluşturduk, yazı ekleme sayfası yaptık. Sonraki yazılarımda yazıları silme, güncelleme özelliği ekleyeceğiz. Daha rahat yazı ekleyebilmek için CKEditor ekleyeceğiz. Yazıları tek tek görüntülemek için yazı sayfası, toplu görüntülemek için yazılar sayfası yapacağız. Kullanıcı panelimizin son hali:

Flask Dashboard


Sonraki Yazı: CKEditor
Yorumlar

Henüz bir yorum bulunmuyor.
Yorum bırakın