ソフトウェアエンジニアの技術ブログ：Software engineer tech blog – Page 527 – 随机应变 ABCD: Always Be Coding and … : хороший

cakeのviewでjavascript

scriptタグで書けば、普通に表示されます。

<script>
var map;
    function initMap(){
        map = new google.maps.Map(document.getElementById('map'),{
            center:{lat: 35.681167, lng: 139.767052},
            zoom: 8
        });
    }
</script>
<script async defer
src = "https:maps.googleapis.com/maps/api/js?key=&callback=initMap">
</script>

天気のラベルを渡したいですね。

cakeで複数のテーブルを参照するページをつくる

例えば、丸の内と横浜のデータを引っ張て来て、首都圏の天気として表示させてたいとする。
その場合は、controllerで “use Cake\ORM\TableRegistry;” を使って、テーブルを定義する。

<?php

namespace App\Controller;

use Cake\ORM\TableRegistry;  

class TestsController extends AppController
{	
	public function initialize()
    {
         parent::initialize();
         $this->Yokohamas = TableRegistry::get('Yokohamas');
         $this->Marunouchis = TableRegistry::get('Marunouchis');
    }

	public function index()
	{
		$this->viewBuilder()->layout('my_layout');
		$now = date("Y-m-d H:i:s");
		$params = array(
		    'conditions' => array(
		        'id' => '1', 
		    ),
		);
		$marunouchis = $this->Marunouchis->find('all', $params);
		$yokohamas = $this->Yokohamas->find('all', $params);	
		$this->set(compact('marunouchis'));
		$this->set(compact('yokohamas'));
	}
}
?>

viewでは、marunouchisとyokohamasを呼び出せる。

cakeでデータベースを参照しないページをつくる

src/Templateに対象フォルダとindex.ctpをつくります。

controllerをつくります。

<?php
namespace App\Controller;
class TestsController extends AppController
{	
	var $name = 'Tests';
	var $useTable = false;
	public function index()
	{
		$this->viewBuilder()->layout('my_layout');		
	}
}
?>

表示されました。modelはつくらなくても、エラーは表示されません。

cakeで異なるviewを生成する

横浜市(open weather:”Yokohama-shi”)のviewを生成します。
こちらは、DBにデータを入れたら、model, controller, viewをmarunouchisからコピーして、tableをmarunouchisからyokohamasに変更したら終わりです。簡単ですね。

cakeのviewで共通関数を読み込む

共通関数はTemplate/Element の中にctpファイルで作成します。ここではmodule.ctpとして、英語から日本語への変換処理を書きます。

<?php 

function convert($main){
	switch($main){
			case 'Clear':
				return "晴れ<img src=\"img/icon01.png\">";
				break;
			case 'Clouds':
				return "曇<img src=\"img/icon02.png\">";
				break;
			case 'Rain':
				return "雨<img src=\"img/icon03.png\">";
				break;
			default:
				echo $main;
		}
}

function convert2($description){
	switch($description){
			case 'clear sky':
				return "晴天<br>";
				break;
			case 'scattered clouds':
				return "きれぎれに浮かんでいる雲";
				break;
			case 'broken clouds':
				return "ちぎれた雲<br>";
				break;
			case 'few clouds':
				return "少しの雲<br>";
				break;
			case 'light rain':
				return "小雨<br>";
				break;
			default:
				echo $description;
		}
}

?>

Viewの共通処理の為、viewのctp(index.ctp)に1行 $this->element(‘module’) を追加します。

<?php
	$this->assign('title', '丸の内の天気');
?>
<?= $this->element('module'); ?>

<h1>丸の内の天気</h1>

<table class="table1">
	<tr>
	<?php 
	$i = 1;
	foreach ($marunouchis as $marunouchi){
	echo "<td width=\"150px\">";
	echo h($marunouchi->forecast). "<br>";
	echo convert(($marunouchi->main))."<br>";
	echo convert2(($marunouchi->description))."<br>";
	echo "気温".h($marunouchi->temp)."<br>";
	echo "湿度". h($marunouchi->humidity)."%<br>";
	echo "雲の量".h($marunouchi->cloud)."<br>";
	echo "風速".h($marunouchi->speed)."m<br>";
	echo "<td>";
	if($i % 8 == 0){
	echo "</tr><tr>";
	}
	$i++;
	}
	?>
	</tr>
</table>

おおお、なるほど

夜中の晴れは”月”のアイコンにしてみましょう。

<?php 
	$i = 1;
	foreach ($marunouchis as $marunouchi){
	echo "<td width=\"150px\">";
	echo h($marunouchi->forecast)."<br>";
	$date = h($marunouchi->forecast);
	$result = substr($date, -8);
	if($result == ' 9:00 PM' or $result == '12:00 AM' or $result == ' 3:00 AM'){
	echo convert3(($marunouchi->main))."<br>";
	} else {
	echo convert(($marunouchi->main))."<br>";
	}
	echo convert2(($marunouchi->description))."<br>";
	echo "気温".h($marunouchi->temp)."<br>";
	echo "湿度". h($marunouchi->humidity)."%<br>";
	echo "雲の量".h($marunouchi->cloud)."<br>";
	echo "風速".h($marunouchi->speed)."m<br>";
	echo "<td>";
	if($i % 8 == 0){
	echo "</tr><tr>";
	}
	$i++;
	}
	?>

cakeのdefault.cssからstyles.cssに変更する

controllerで　$this->viewBuilder()->layout(‘my_layout’);　と指定した後に、
webrootでcssを書いていきます。

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

.container{
	maring: 0 auto;
}

h1 {
	margin-top:0px;
	margin-bottom: 10px;
	font-size: 20px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 5px;
}

.table1 td {
	padding-bottom: 30px;
}

titleはindex.ctp

<?php
	$this->assign('title', '丸の内の天気');
?>

Elementをsrc/Template/Element/my_header.ctp追加します。

<header></header>

my_layout.ctpで、elementを追加します。

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

cakephpで今以降の予報を表示する

データベースの日付のフォーマットをdatetimeに変えます。

create table weather.marunouchis(
	id int unsigned auto_increment primary key,
	forecast datetime,
	main varchar(255),
	description varchar(255),
	temp float,
	humidity int,
	cloud int,
	speed float,
	created datetime default null
);

Controllerで条件を追記します。

class MarunouchisController extends AppController
{	

	public function index()
	{
		$now = date("Y-m-d H:i:s");
		$params = array(
		    'conditions' => array(
		        'forecast >' => $now, 
		    ),
		);
		$marunouchis = $this->Marunouchis->find('all', $params);
		$this->set(compact('marunouchis'));
	}
}

表示

おお、素晴らしい

index.ctpを一部改良

<h1>丸の内の天気</h1>

<table>
	<tr>
	<?php 
	$i = 1;
	foreach ($marunouchis as $marunouchi){
	echo "<td width=\"150px\">";
	echo h($marunouchi->forecast). "<br>";
	echo h($marunouchi->main)."<br>";
	echo h($marunouchi->description)."<br>";
	echo "気温".h($marunouchi->temp)."<br>";
	echo "湿度". h($marunouchi->humidity)."%<br>";
	echo "雲の量".h($marunouchi->cloud)."<br>";
	echo "風速".h($marunouchi->speed)."m<br>";
	echo "<td>";
	if($i % 8 == 0){
	echo "</tr><tr>";
	}
	$i++;
	}
	?>
	</tr>
</table>

悲しくなってきた。

controllerで呼び出す条件を制御

<?php

// /marunouchis/index

namespace App\Controller;

class MarunouchisController extends AppController
{
	public function index()
	{
		// $marunouchis = $this->Marunouchis->find('all');
		$marunouchis = $this->Marunouchis->find('all')
			->order(['id' => 'DESC']);
		$this->set(compact('marunouchis'));
	}
}
?>

idの降順で呼び出します。

idが5以上のデータを呼び出す
-> paramに条件を指定

class MarunouchisController extends AppController
{	

	public function index()
	{
		// $marunouchis = $this->Marunouchis->find('all');
		$params = array(
		    'conditions' => array(
		        'id >' => 5,
		    ),
		);
		$marunouchis = $this->Marunouchis->find('all', $params);
		$this->set(compact('marunouchis'));
	}
}

cakeでデータベースに入れたデータを表示

まずtable
MarunouchisTable.php

<?php

namespace App\Model\Table;

use Cake\ORM\Table;

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

続いて、Viewのindex.ctp

<h1>丸の内の天気</h1>

<ul>
	<?php foreach ($marunouchis as $marunouchi) : ?>
		<li><?= h($marunouchi->main); ?></li>
	<?php endforeach ; ?>
</ul>

最後に、Controller

<?php

// /marunouchis/index

namespace App\Controller;

class MarunouchisController extends AppController
{
	public function index()
	{
		$marunouchis = $this->Marunouchis->find('all');
		$this->set(compact('marunouchis'));
	}
}
?>

あら、いいですね。

index.ctpでtable表示してみます。

<h1>丸の内の天気</h1>

<table>
	<tr>
	<?php foreach ($marunouchis as $marunouchi) : ?>
		<td width="150px">
		<?= h($marunouchi->forecast); ?><br>
		<?= h($marunouchi->main); ?><br>
		<?= h($marunouchi->description); ?><br>
		<?= h($marunouchi->temp); ?><br>
		<?= h($marunouchi->humidity); ?><br>
		<?= h($marunouchi->speed); ?><br>
		</td>
	<?php endforeach ; ?>
	</tr>
</table>

あら♪

ルーティングも/でMarunouchisのコントローラを呼び出すように変更します。

 $routes->connect('/', ['controller' => 'Marunouchis', 'action' => 'index']);

cakeインストール時にCould not parse version constraint

cake をインストールしようと
php composer.phar create-project –prefer-dist cakephp/app weather
と打つも、エラー
Could not parse version constraint weather: Invalid version string “weather
”

composerをupdateとしても同じエラーメッセージ。
/usr/local/bin/composer self-update

公式ページに沿って

composer self-update && composer create-project --prefer-dist cakephp/app my_app_name

こちらなら入りました。

bin/cake server -H 192.168.33.10 -p 8000