Twigを使ってみようかと

安藤(プログラマー)
演劇もやっていまする。

どうも、安藤です。
最近は社長の研修のもと、自分で掲示板を作っています!

超ビギナーなので、まずはindex.phpというファイルを用意。
ここにphpの処理とhtmlを両方を書くわけなんですが・・・まぁ見てください。。_| ̄|○

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<?php

//DBへ接続
$com = mysqli_connect('127.0.0.1','my_user','my_password','my_bbs');

if($com !== false)
{
    //変数を初期化
    $success_msg = null;
    $error_msgs = array();
    $posted_data = array();

    //処理
    if(isset($_POST['send']) === true)
    {
        //入力情報を取得
        $name = $_POST['name'];
        $comment = $_POST['comment'];

        //validation
        $name_str = mb_strlen($name);
        $comment_str = mb_strlen($comment);

        //エラーの種類判別
        if($name_str === 0)
        {
            $error_msgs['empty_name'] = '名前を入力して下さい。';
        }
        if($comment_str === 0)
        {
            $error_msgs['empty_comment'] = '本文を入力して下さい。';
        }
        if($name_str > 10)
        {
            $error_msgs['over_name'] = '名前は10文字以内で入力して下さい。';
        }
        if($comment_str > 100)
        {
            $error_msgs['over_comment'] = '本文は100文字以内で入力して下さい。';
        }

        //DBへデータ追加処理
        if(! $error_msgs)
        {
            //sqlインジェクション対策
            $name = mysqli_real_escape_string($com,$name);
            $comment = mysqli_real_escape_string($com,$comment);

            //sqlの発行
            $sql = "INSERT INTO posting(`name`,`comment`)VALUES('$name','$comment')";

            //sqlの実行
            $result = mysqli_query($com,$sql);

            //結果メッセージ
            if($result !== false)
            {
                $success_msg = '投稿に成功しました。';
            }
            else
            {
                $error_msgs['result'] = '投稿に失敗しました。';
            }
        }
    }

    //投稿一覧データの取得
    $sql = "SELECT * FROM posting ORDER BY id DESC";
    $result = mysqli_query($com,$sql);

    //結果を連想配列で取得
    while($row = mysqli_fetch_assoc($result))
    {
        //結果を表示用の配列に追加
        array_push($posted_data,$row);
    }
}
else
{
    echo 'データベースの接続に失敗しました。';
}

//DBへの接続を閉じる
mysqli_close($com);

?>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link href="index.css" rel="stylesheet" type="text/css" media="all">
        <title>僕のBBS</title>
    </head>
    <body>
        <h1>僕のBBS</h1>
        <form method="post" action="">
            NAME
            <br>
            <input type="text" name="name" size="30" />
            <br><br>
            COMMENT
            <br>
            <textarea name="comment" rows="10" cols="50" maxlength="100" wrap="hard" placeholder="本文を入力してね!"></textarea>
            <br>
            <input type="submit" name="send" value="投稿する" />
        </form>

        <?php if($success_msg): ?>
            <p style="color:#089900;">
                <?php echo $success_msg; ?>
            </p>
        <?php endif; ?>

        <?php foreach($error_msgs as $key => $value): ?>
            <p style="color:#f00;">
                <?php echo $value; ?>
            </p>
        <?php endforeach; ?>

        <HR>

        <p style="color:#ff8200;">
            &raquo;&raquo;&nbsp;今までの投稿一覧&nbsp;&laquo;&laquo;
        </p>

        <?php foreach($posted_data as $key => $value): ?>
            [&nbsp;NAME&nbsp;]
            <br>
            <?php echo $value['name']; ?>
            <br>
            [&nbsp;COMMENT&nbsp;]
            <br>
            <?php echo $value['comment']; ?>
            <br><br>
        <?php endforeach; ?>
    </body>
</html>

・・・長くね?

投稿フォームと投稿一覧を組み込んだだけなのにこのボリュームでは、いずれ膨大な文量となること間違い無し。

なので、phpとhtmlを分離すべく、Twigを導入しました!
まずはhtml側をindex.html.twigというファイルにまとめます。

index.html.twig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
・・・
{% if success_msg %}
    <p style="color:#089900;">
        
    </p>
{% endif %}

{% for value in error_msgs %}
    <p style="color:#f00;">
        
    </p>
{% endfor %}

<HR>

<p style="color:#ff8200;">
    &raquo;&raquo;&nbsp;今までの投稿一覧&nbsp;&laquo;&laquo;
</p>

{% for value in posted_data %}
    [&nbsp;NAME&nbsp;]
    <br>
    <span class="text">
        
        <br>
    </span>
    [&nbsp;COMMENT&nbsp;]
    <br>
    <span class="text">
        
        <br><br>
    </span>
{% endfor %}
・・・

Twigの書き方を調べつつ、こんな感じに。
そしてindex.phpにもTwigの処理を加えて、htmlに関する記述は削除しました。

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
・・・
//twigを使用
require_once '../vendor/autoload.php';

//twigの設定
$loader = new Twig_Loader_Filesystem('./');
$twig = new Twig_Environment($loader);

//テンプレートを使用
$template = $twig->loadTemplate('index.html.twig');

//レンダリング
echo $template->render(
    array(
        'success_msg' => $success_msg,
        'error_msgs' => $error_msgs,
        'posted_data' => $posted_data,
    )
);
・・・

こんな感じ!!
ビギナー安藤が詰まったのは、地味にディレクトリパスの書き方。絶対パスと相対パスの扱い方で戸惑ってしまった。。
それとレンダリングの箇所。どうやったらhtml側に変数を渡せるのか四苦八苦しましたねー。

しかし、なんとか自力(スペシャルサンクス:Google検索)でTwigの導入に成功(^^)

僕のBBS

1

さて、一人前の掲示板をつくる第一歩というところでしょうか。
頑張っていきます、、!