cakeで遊んでみよう データベースの設計

まずCakeで作っていくには、ある程度データベースの設計ができていないといけない。
ということで、適当にcake用にデータベースをつくっていきます。テーブル名は複数形にする必要があります。

create table radio.channel01s(
	id int unsigned auto_increment primary key,
	artist varchar(255),
	album varchar(255),
        title varchar(255),
        mp3 varchar(255),
	youtube varchar(255)
);

create table radio.cover01s(
	artist varchar(255),
	album varchar(255),
	asin varchar(255),
	url varchar(8190)
);

create table radio.rankings(
	id int unsigned auto_increment primary key,
	status varchar(255),
	artist varchar(255)
);

OKですね。

そしてcakeをディレクトリにインストールします。この瞬間なぜか緊張します。
php composer.phar create-project –prefer-dist cakephp/app radio

入ったようです。

こちらでサーバーを起動します。
bin/cake server -H 192.168.33.10 -p 8000

cake migration

// making migration 
[vagrant@localhost myblog]$ bin/cake bake migration_snapshot Initial

[vagrant@localhost myblog]$ bin/cake migrations status
using migration paths
 - /home/vagrant/fw/myblog/config/Migrations
using seed paths
 - /home/vagrant/fw/myblog/config/Seeds
using environment default

 Status  Migration ID    Migration Name
-----------------------------------------
     up  20180306042845  Initial


[vagrant@localhost myblog]$ bin/cake bake migration CreateComments post_id:integer body:string created modified

Creating file /home/vagrant/fw/myblog/config/Migrations/20180306043056_CreateComments.php
Wrote `/home/vagrant/fw/myblog/config/Migrations/20180306043056_CreateComments.php

[vagrant@localhost myblog]$ bin/cake migrations migrate
`

mysqlで確認

mysql> use cake
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed
mysql> show tables;
+----------------+
| Tables_in_cake |
+----------------+
| comments       |
| phinxlog       |
| posts          |
+----------------+
3 rows in set (0.00 sec)

すげー

commentController

<?php

namespace App\Controller;

class CommentsController extends AppController
{
	public function  add()
	{
		$this->viewBuilder()->layout('my_layout');
		$comment = $this->Comments->newEntity();
		if($this->request->is('post')){
			$comment = $this->Comments->patchEntity($comment, $this->request->data);
			if($this->Comments->save($comment)){
				$this->Flash->success('Comment Add Success!');
				return $this->redirect(['controller'=>'Posts','action'=>'view', $comment->post_id]);
			}else {
				$this->Flash->success('Error');
			}
		}
		$this->set('post', $comment);
	}

	public function delete($id = null)
	{
		$this->viewBuilder()->layout('my_layout');
		$this->request->allowMethod(['post', 'delete']);
		$comment = $this->Comments->get($id);
		if($this->Comments->delete($comment)){
			$this->Flash->success('Comment Delete Success!');
			
		}else {
			$this->Flash->success('Error');
		}
		return $this->redirect(['controller'=>'Posts','action'=>'view', $comment->post_id]);

	}
}
?>

cake update

controllerでgetして、$this->Posts->save

public function edit($id = null)
	{
		$this->viewBuilder()->layout('my_layout');
		$post = $this->Posts->get($id);
		if($this->request->is(['post','patch','put'])){
			$post = $this->Posts->patchEntity($post, $this->request->data);
			if($this->Posts->save($post)){
				$this->Flash->success('Edit Success!');
				return $this->redirect(['action'=>'index']);
			}else {
				$this->Flash->success('Error');
			}
		}
		$this->set('post', $post);
	}

deleteは $this->Posts->deleteになる

public function edit($id = null)
	{
		$this->viewBuilder()->layout('my_layout');
		$this->request->allowMethod(['post', 'delete']);
		$post = $this->Posts->get($id);
		if($this->Posts->delete($post)){
			$this->Flash->success('Delete Success!');
			
		}else {
			$this->Flash->success('Error');
		}
		return $this->redirect(['action'=>'index']);

	}

cake form helper

<?= $this->Form->create($post); ?>
<?= $this->Form->input('title'); ?>
<?= $this->Form->input('body', ['rows'=> '3']); ?>
<?= $this->Form->button('Add'); ?>
<?= $this->Form->end(); ?>

なるほど、だんだんテンションが下がってきた。

DBへのinsertをcontrollerで書きます。

public function  add()
	{
		$this->viewBuilder()->layout('my_layout');
                $post = $this->Posts->newEntity();
		if($this->request->is('post')){
			$post = $this->Posts->patchEntity($post, $this->request->data);
			$this->Posts->save($post);
			return $this->redirect(['action'=>'index']);
		}
		$this->set('post', $post);
	}

validatorはmodelに書きます。

<?php

namespace App\Model\Table;

use Cake\ORM\Table;
use Cake\Validation\Validator;

class PostsTable extends Table
{
	public function initialize(array $config)
	{
		$this->addBehavior('Timestamp');
	}

	public function validationDefault(Validator $validator)
		{
			$validator
			->notEmpty('title')
			->requirePresence('title')
			->notEmpty('body')
			->requirePresence('body')
			->add('body', [
				'length' => [
					'rule' => ['minLength', 10],
					'message' => 'body length must be 10+'
					]
				]);
		return $validator;
	}
}

controllerでvalidationの設定

public function  add()
	{
		$this->viewBuilder()->layout('my_layout');
		$post = $this->Posts->newEntity();
		if($this->request->is('post')){
			$post = $this->Posts->patchEntity($post, $this->request->data);
			if($this->Posts->save($post)){
				return $this->redirect(['action'=>'index']);
			}else {
				// error
			}
		}
		$this->set('post', $post);
	}

cake Linkの作成

index.ctp

Htmlヘルパーを使う場合
Html->linkとする テーブルのカラムを指定し、コントローラーとアクションを作成。
うーん、慣れるまで時間がかかりそう。

<?php foreach($posts as $post):?>
		<li><?= $this->Html->link($post->title, ['controller'=>'Posts', 'action'=>'view']); ?></li>
	<?php endforeach; ?> 

ブラウザで確認。反映されてますね。

urlヘルパーを使う場合

<a href="<?= $this->Url->build(['action'=>'view', $post->id]); ?>">
		<?= h($post->title); ?></a>

Htmlヘルパーの方がコード量が少なく楽そうに見えます。

cake Element

共通ヘッダーをつくります。
app/src/Template/Element/my_header.ctp

<header>My Blog</header>

作ったelementをレイアウトファイルに書き込みます。
app/src/Template/Layout/my_layout.ctp

<!DOCTYPE html>
<html>
<head>
    <?= $this->Html->charset() ?>
    <title>
        <?= $this->fetch('title') ?>
    </title>
    <?= $this->Html->css('styles.css') ?>
</head>

<body>
		<?= $this->element('my_header') ?>
        <section class="container">
        <?= $this->fetch('content') ?>
        </section>

</body>
</html>

サーバーを再起動します。
bin/cake server -H 192.168.33.10 -p 8000

ブラウザ読み込みます。なるほど、エレメントはパーツですね。

PostController.phpはAppControllerのclassをextendしているので、AppControllerのクラスに記載してもOK
$this->viewBuilder()->layout(‘my_layout’);

cake css

cssやjsはwebrootに入れる
app/webroot/css/styles.css

body{
	padding: 0;
	margin: 0;
	font-size: 16px;
	font-family: Verdana, sans-serif;
}

.container {
	width: 380px;
	margin: 0 auto;
}

h1 {
	font-size: 16px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 5px; 
}

ul > li {
	padding: 3px 0;
}

あれ、すこし楽しくなってきましたね。

titleはapp/src/View/Template/Posts/index.ctp 内で、$this->assignという書き方をする

<?php
	$this->assign('title', 'Blog Posts');
?>

<h1>Blog Posts</h1>

<ul>
	<?php foreach($posts as $post):?>
		<li><?= h($post->title); ?></li>
	<?php endforeach; ?> 
</ul>

view.ctp

<?php
	$this->assign('title', 'Blog Detail');
?>

<h1><?= $this->Html->link('Back', ['action'=>'index'], ['class'=>['pull-right','fs12']]); ?> 
<?= h($post->title); ?></h1>

<p><?= nl2br(h($post->body)); ?></p>

cake view

src/Template/Layout/default.ctp

なるほど、これは便利ですね。

<?php
/**
 * CakePHP(tm) : Rapid Development Framework (https://cakephp.org)
 * Copyright (c) Cake Software Foundation, Inc. (https://cakefoundation.org)
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) Cake Software Foundation, Inc. (https://cakefoundation.org)
 * @link          https://cakephp.org CakePHP(tm) Project
 * @since         0.10.0
 * @license       https://opensource.org/licenses/mit-license.php MIT License
 */

$cakeDescription = 'CakePHP: the rapid development php framework';
?>
<!DOCTYPE html>
<html>
<head>
    <?= $this->Html->charset() ?>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <?= $cakeDescription ?>:
        <?= $this->fetch('title') ?>
    </title>
    <?= $this->Html->meta('icon') ?>

    <?= $this->Html->css('base.css') ?>
    <?= $this->Html->css('cake.css') ?>

    <?= $this->fetch('meta') ?>
    <?= $this->fetch('css') ?>
    <?= $this->fetch('script') ?>
</head>
<body>
    <nav class="top-bar expanded" data-topbar role="navigation">
        <ul class="title-area large-3 medium-4 columns">
            <li class="name">
                <h1><a href=""><?= $this->fetch('title') ?></a></h1>
            </li>
        </ul>
        <div class="top-bar-section">
            <ul class="right">
                <li><a target="_blank" href="https://book.cakephp.org/3.0/">Documentation</a></li>
                <li><a target="_blank" href="https://api.cakephp.org/3.0/">API</a></li>
            </ul>
        </div>
    </nav>
    <?= $this->Flash->render() ?>
    <div class="container clearfix">
        <?= $this->fetch('content') ?>
    </div>
    <footer>
    </footer>
</body>
</html>

レイアウトをカスタマイズします。
src/Template/my_layou.ctp

<!DOCTYPE html>
<html>
<head>
    <?= $this->Html->charset() ?>
    <title>
        <?= $this->fetch('title') ?>
    </title>
    <?= $this->Html->css('styles.css') ?>
</head>
<body>
        <section class="container">
        <?= $this->fetch('content') ?>
        </section>

</body>
</html>

controllerでレイアウトを指定します。
PostsController.php

<?php

namespace App\Controller;

class PostsController extends AppController
{
	public function  index()
	{
		$this->viewBuilder()->layout('my_layout');
		$posts = $this->Posts->find('all');
		$this->set('posts', $posts);
	}
}

なるほど、すこし見えてきましたね。

cake routing

なぜかroutingの設定は好きですね。

app/config/routes.php

Router::scope('/', function (RouteBuilder $routes) {
    /**
     * Here, we are connecting '/' (base path) to a controller called 'Pages',
     * its action called 'display', and we pass a param to select the view file
     * to use (in this case, src/Template/Pages/home.ctp)...
     */
    // $routes->connect('/', ['controller' => 'Pages', 'action' => 'display', 'home']);
    $routes->connect('/', ['controller' => 'Posts', 'action' => 'index']);

actionがなぜindexなのでしょう???

controllerのsqlのorder byは以下のように書くようです。

$posts = $this->Posts->find('all')->order(['title' => 'DESC']);

SELECT * FROM posts LIMIT 10;は

$posts = $this->Posts->find('all')->limit(2);

ですね。

<?php

// /post/index
// /(controller)/(action)/(options)

namespace App\Controller;

class PostsController extends AppController
{
	public function  index()
	{
		// modelからデータを取得し、postsに入れる
		$posts = $this->Posts->find('all')->order(['title' => 'DESC'])
		->limit(2)
		->where(['title like' => '%3']);
		$this->set('posts', $posts);
	}
?>

cake Controllerを作成

テーブル名 + Controller.php
app/src/Controller
PostsController.php

modelからviewへの受け渡しを記載

<?php
// /post/index
// /(controller)/(action)/(options)
namespace App\Controller;

class PostsController extends AppController
{
	public function  index()
	{
		// modelからデータを取得し、postsに入れる
		$posts = $this->Posts->find('all');
		$this->set('posts', $posts);
	}
}
?>

さーバーで見てみると、あれ、小文字になってますね。。