サイトレビューサイト制作への道その8

ユーザー画面　画像とテーブルと時々背景

1.データベースを貼り付け

2.テーブルを二列に分ける

3.背景色を付ける

4.画像をセットする

5.まとめ

1.データベースを貼り付け

さて前回に引き続き、「Sites」の準備をしていきます。なんかデータベースがつながらないな～と思っていたら、「Config」フォルダの「database.php」の中身がデフォルトのままになっていました。

 public $default = array(
        'datasource' => 'Database/Mysql',
        'persistent' => false,
        'host' => 'localhost',
        'login' => 'root',
        'password' => '',
        'database' => 'sites',
        'prefix' => '',
        'encoding' => 'utf8',
    );

これでつながりましたー　ようやくユーザー画面の制作に入っていくことができます。 次に入る前に画像をエディットで編集しても画像が変わらないというバグを見つけたので この赤線の一行を追加することで解決しました。（SiteControllerのeditのところです。）

2.テーブルを二列に分ける

まず見た目としてサイトの情報をたくさん乗っけていくので、サイトを二列で表示していきたいと思いました。

「View」「Webs」「index.ctp」を編集していきます。今回の記事は全てここで制作していきます。

まず一列にデータが並んでいるのでコピペでもうひと列作ります。そうすると同じデータが二列並んでしまいます。

そこでforeachで回してるところで奇数は飛ばすという処理を追加します。

                    <?php foreach ($sites as $key => $site): 
                    if($key % 2 != 0)
                    {
                    continue;
                    }
                    ?>

これで「Sites」の配列を一つ飛ばしにすることができます。奇数の時は「continue」で流れるので処理をしません。 もう一つの列では

                    <?php foreach ($sites as $key => $site): 
                    if($key % 2 == 0)
                    {
                    continue;
                    }
                    ?>

として偶数を飛ばします。これでうまいこと二列にデータを配置出来ます。

3.背景色を付ける

ここで気まぐれに背景色をつけていこうかと思い立ちました。

<div class="sites index col-md-4" style="background-color : #FFAADD">

背景と列の色をつけてまあそれっぽくはしてみました。

4.画像をセットする

さてやっぱり画像があった方が分かりやすいと思うので画像をセットしたらかなり巨大な画像がドーンと出てしまいました。

サイズの調整が必要でしたので

<?php
                                $id = $site['Site']['img_src'];
                                //echo $this->Html->image("../upimg/{$id}", array('alt' => '画像がありません'));
                                $imgid = $site['Site']['id'];
                                $file1 = "upimg/{$imgid}.jpg";                              //　元画像ファイル
                                $file2 = "img/{$imgid}.jpg";                                      //　画像保存先
                                $in = ImageCreateFromJPEG($file1);                          //　元画像ファイル読み込み
                                $size = GetImageSize($file1);                               //　元画像サイズ取得
                                //$width = $size[0] / 2;                                      //　生成する画像サイズ（横）
                                //$height = $size[1] / 2;                                     //　生成する画像サイズ（縦）
                                $width = 250;//$size[0] / 2;                                      //　生成する画像サイズ（横）
                                $height = 250;//$size[1] / 2;                                     //　生成する画像サイズ（縦）
                                $out = ImageCreateTrueColor($width, $height);               //　画像生成
                                ImageCopyResampled($out, $in, 0, 0, 0, 0, $width, $height, $size[0], $size[1]);    //　サイズ変更・コピー
                                ImageJPEG($out, $file2);                                    //　画像保存
                                ImageDestroy($in);
                                ImageDestroy($out);
                                ?>

                                            <img src="<?php echo $file2 ?>"><br>

画像のサイズを指定して保存までしました。

5.まとめ

画像の配置はしたものの、ユーザビリティのかけらもないので使いやすさ見やすさを考えて制作していきたいと思いました。