[PHP]Symfony 4 とデータベースを使ったCRUDアプリケーションの作り方

Pocket

ビューの作成

コントローラーとルーティングが用意できたのでテンプレートの表示に必要な Twig をインストールします。

composer require twig

今回は Bootstrap 4 を利用するので templates/base.html.twig の <head> に次の2行を追加して下さい。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

フォームタグを Bootstrap 4 にあわせて出力するために config/twig.yaml の「twig:」の箇所に次の行を追加して下さい。(Boostrap を使用しない場合はスキップして下さい。)

    form_themes: ['bootstrap_4_layout.html.twig']

次に templates 内に post フォルダを作り、記事一覧ページのためのテンプレート index.html.twig を作成して下さい。

index.html.twig

{% extends 'base.html.twig' %}

{% block body %}
<div class="container">
    <p>
        <a class="btn btn-secondary" href="{{ url('post_new') }}">New</a>
    </p>

    <table class="table">
        <tbody>
            {% for post in posts %}
            <tr>
                <th>
                    <a href="{{ url('post_show', {id: post.id}) }}">
                    {{ post.title }}
                    </a>
                </th>
                <td>
                    <a href="{{ url('post_update', {id: post.id}) }}">
                    [Edit]
                    </a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

同様にして new.html.twig, edit.html.twig も作っていきます。

new.html.twig

{% extends 'base.html.twig' %}

{% block body %}
<div class="container">
	{{ form_start(form) }}
	{{ form_widget(form) }}
	{{ form_end(form) }}
</div>
{% endblock %}

edit.html.twig

{% extends 'base.html.twig' %}

{% block body %}
<div class="container">
    {{ form_start(form) }}
    {{ form_widget(form) }}
    {{ form_end(form) }}

    <hr>

    {{ form_start(deleteForm) }}
    <button class="btn btn-danger" type="submit">Delete</button>
    {{ form_end(deleteForm) }}
</div>
{% endblock %}

記事を個別表示する show.html.twig は次のようにします。

show.html.twig

{% extends 'base.html.twig' %}

{% block body %}
<div class="container">
    <h2>{{ post.title }}</h2>
    <p>{{ post.createdAt|date('Y-m-d H:i:s') }}</p>
    <div>{{ post.content|escape|nl2br }}</div>
</div>
{% endblock %}

以上が Symfony 4 とデータベースを使った CRUD アプリケーションの作り方です。


Similar Posts:




  • コメントを残す

    メールアドレスが公開されることはありません。