Month: October 2018

Laravel Document

日本語と英語があります。
https://readouble.com/laravel/

当然英語でしょ！常識！
https://readouble.com/laravel/5.7/en/installation.html

requirement
PHP >= 7.1.3
OpenSSL PHP Extension
PDO PHP Extension
Mbstring PHP Extension
Tokenizer PHP Extension
XML PHP Extension
Ctype PHP Extension
JSON PHP Extension

7.1.3か～　vagrantを見てみましょう。
[vagrant@localhost ~]$ php -v
PHP 7.1.21 (cli) (built: Aug 15 2018 18:11:46) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2018 Zend Technologies

php info(); を見てみます。
openssl, PDO driver, mbstring, tokenizer, xml, ctype Hartmut Holzgraefe, json　入ってますね。
なるほど、確かにプロとしてサービス提供するならドキュメントはしっかり読んだ方が良さそうだ。

composerの入れ方について説明があります。ここはスキップでも大丈夫ですな。

composer create-project --prefer-dist laravel/laravel blog

Local Development Server
割とシンプルなドキュメントだな、これ。

php artisan serve
[/php]

Configuration
Public Directory
After installing Laravel, you should configure your web server’s document / web root to be the public directory.
お、いきなりMVCに踏み込んできた。
public が　publicディレクトリ

laravelのドキュメントを読み解く

jpのTopページに記載の内容
http://laravel.jp/

1.RESTfulルーティング・・・RESTfulなインターフェイスとはRESTの特徴を備えたルートのことを言う。 RESTとはWebに運用したソフトウェア設計様式のこと。 これはURLで表現することができる。つまりURLに対してHTTPのメソッド
GET（取得） ・POST（作成） ・PATCH（PUT）（更新） ・DELETE（削除）を使う
Restとは… 分散型システムにおける複数のソフトウェアを連携させるのに適した設計原則
→ Restの設計原則に沿ったルーティングということね。

2.コマンドYour Date・・・素晴らしい Eloquent ORM と 素晴らしいマイグレーションシステムを完備
Eloquent ORMは、laravelで用意されているデータ操作の為の機能。 データベースとモデルを関連付け、柔軟なデータ操作を行う為のLaravel独自の機能
→ modelのところか。

3. 美しいテンプレート・・・在来の PHP 、もしくは軽量の Blade テンプレート・エンジン。Blade を好きになるでしょう。
→ Laravelで標準搭載されているけども、laravel以外、ex. wordpressでも使えるみたいですな。

4. 明日の準備
→　skip

5. 実績ある土台・・・Laravel は Symfony コンポーネントの上に構築
Symfonyは Model View Controller (MVC) パラダイムに従ったWebアプリケーションフレームワークで、PHPで書かれている
公式 https://symfony.com/
→　symfonyは前に少し触ったことがあります。

6. Composerで動く・・・Composer はあなたの適用のサードパッケージを管理する、驚くべきツール
→　vagrantで入れています。

7. 最高のコミュニティ・・・Laravel の事について日本語で議論できるコミュニティがある
→　doorkeeper って2016年かい！
https://laravel.doorkeeper.jp/

laravelでユーザー管理

管理者、閲覧者など、権限によって、閲覧、編集を制限したり、表示するページを出し分けたい。

ということだが、ドキュメントを全部見ろ、とのこと。
http://laravel.jp/

tinymceの機能を考えてた時も、「ドキュメント全部読め」って怒られたけど、どうやらドキュメント読むのは基本のようね。ということで、laravelのドキュメントを読み進めたいと思います。

laravelを作っていく

frontが出来たので、
[vagrant@localhost local]$ php -v
PHP 7.1.21 (cli) (built: Aug 15 2018 18:11:46) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2018 Zend Technologies

ディレクトリにcomposerが入っているので、
php composer.phar create-project –prefer-dist laravel/laravel zeus

出来ました。
[vagrant@localhost local]$ cd zeus
[vagrant@localhost zeus]$ ls
app composer.json database public routes tests
artisan composer.lock package.json readme.md server.php vendor
bootstrap config phpunit.xml resources storage webpack.mix.js

40X系、50X系のエラー処理

エラー処理について纏めます。100～300番台は正常処理。問題なし。
– 100番台＝リクエスト情報処理中
– 200番台＝リクエスト処理成功
– 300番台＝リダイレクト処理

400 – 不正リクエスト
> ブラウザ（クライアント）から送信したリクエストに不正があり、うまく処理できないときにでるエラー
ほとんどの場合、ユーザ側のブラウザなどに問題がある可能性が高い

401 – 認証エラー
> ベーシック認証やDigest認証など、パスワードがかかっているWebサイトに対し、パスワードが間違っていた場合などに出るエラー
ユーザ権限が無い場合やID／パスワードの入力ミス時に表示される

403 – アクセス禁止
> Webサイト管理者の意向により、第3者のアクセスが禁止されているときに表示されるエラー

404 – NotFound
> ページが削除されていたり、URLが変更されてページが見れなくなっているときに表示されるエラー

500 – サーバーの内部エラー
> プログラムに問題があるときや、パーミッション設定にミスがあるときに表示されるエラー

503 – サーバー過負荷
> サーバーの過負荷状態で一時的にWebページが表示できないときに起こるエラー

40X系はまとめたいけど、404ページ作っているところの方が多いのかな、
amazon

facebookはログインページにリダイレクト

youtube ああ、いいね♪　youtubeが一番スマートな気がする

docomo たぶんおっさんが作ってんだろーなーって感じの404

google そうだよね、やっぱり。Good！

ということで、結論、40X系のトレンドはシンプルなデザイン＆遊び心を入れたキャラクターを挿入！
検索サービスがある場合は、formも入れる。

404

503

メンテ中

あ、メンテ中はヘッダー表示を変えたい。まーlaravelが先だ。

jQueryを使ったアコーディオン

<!Doctype html>
<html>
<head>
    <meta charset="UTF-8">
<style>
#acMenu dt {
	display:block;
	width:250px;
	height:50px;
	line-height: 50px;
	text-align:center;
	border:#666  1px solid;
	cursor:pointer;
}
#acMenu dd{
	background:#f2f2f2;
	width:250px;
	height:50px;
	line-height:50px;
	margin-left:0px;
	text-align:center;
	border:#666 1px solid;
	display:none;
}
</style>
</head>
<body>
<h1>よくある質問</h1>
 <dl id="acMenu">
 	<dt>Q1. アコーディオンメニュー</dt>
 	<dd>A1. アコーディオンメニュー</dd>
 	<dt>Q2. アコーディオンメニュー</dt>
 	<dd>A2. アコーディオンメニュー</dd>
 	<dt>Q3. アコーディオンメニュー</dt>
 	<dd>A3. アコーディオンメニュー</dd>
</dl>

<script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
<script>
	$(function(){
		$("#acMenu dt").on("click", function(){
			$(this).next().slideToggle();
		});
	});
</script>    
</body>
</html>

OK!
これをフロントに当てはめていきます。

さて～～～～～～～～～～～、front側の画面は全部できたので、いよいよlaravel構築をしていきます。
長かった、2週間位？

次は、laravelなんだが、まずはDBのtableを作って、中にデータを入れて、表示するところからかな。
あ、思い出した、40X系のページ、50X系のページ、メンテナンス中画面のページを作成しないと駄目ですね。

画像をdrag&drop

<?php
	if(isset($_FILES&#91;'image'&#93;&#91;'tmp_name'&#93;)){
		move_uploaded_file($_FILES&#91;'image'&#93;&#91;'tmp_name'&#93;,'asset/img/01.png');
	}
?>
<!Doctype html>
<html>
<head>
    <meta charset="UTF-8">
<style>
#drag-drop-area{
	background-color:#e6e6fa;
	padding:15px;
}
.drag-drop-inside{
	text-align:center;
	border: dashed 1px gray;
	padding: 5px;
}
</style>
</head>
<body>
<form action="#" method="POST" enctype="multipart/form-data">
	<div id="drag-drop-area">
	 <div class="drag-drop-inside">
		<p class="drag-drop-info">ここにファイルをアップロード</p>
		<p>または</p>
		<!-- <input type="file" value="ファイルを選択" name="image"> -->
		<p class="drag-drop-buttons"><input id="fileInput" type="file" value="ファイルを選択" name="image"></p>
        <input type="submit" value="送信">
     </div>
    </div>
  </form>
<script>
var fileArea = document.getElementById('drag-drop-area');
var fileInput = document.getElementById('fileInput');

fileArea.addEventListener('dragover', function(evt){
	evt.preventDefault();
	fileArea.classList.add('dragover');
});

fileArea.addEventListener('dragleave', function(evt){
	evt.preventDefault();
	fileArea.classList.remove('dragover');
});

fileArea.addEventListener('drop', function(evt){
	evt.preventDefault();
	fileArea.classList.remove('dragenter');
	var files = evt.dataTransfer.files;
	fileInput.files = files;
});

</script>    
</body>
</html>

うお、思ってたよりカッケー

で、これを当てはめたい

まー及第点でしょう。。

phpのファイルアップロード

<?php

	if(isset($_FILES&#91;'image'&#93;&#91;'tmp_name'&#93;)){
		move_uploaded_file($_FILES&#91;'image'&#93;&#91;'tmp_name'&#93;,'asset/img/01.png');
	}

?>
<!Doctype html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<form action="#" method="POST" enctype="multipart/form-data">
    <input type="file" name="image">
    <input type="submit" value="upload">
  </form>    
</body>
</html>

以下でエラーで出ていて、ずっとなんでだろうなーと考えていました。

move_uploaded_file($_FILES['image']['tmp_name'],'asset/img/');

次はドラック&ドロップでアップロードしたい。

mysqlのindexって何？

大量のレコードが入っているテーブルから1行のレコードを検索するのに
頭から順番に検索したら時間がかかります。
INDEXを作成すると、データテーブルとは別に検索用に最適化された状態でデータが保存されます。
このINDEXを使うことで、目的のレコードを迅速に見つけて取り出すことが可能になります。

なるほど～　データ参照か～

実際に試してみたいですね。

aws switch roleとは

ロールは、必要な AWS リソースへのアクセスに使用できるアクセス権限セットを指定する
AWS Identity and Access Management (IAM) のユーザーに似ている

>ユーザーとしてサインインすると、特定のアクセス権限セットが付与されます。ただし、ロールにはサインインされませんが、一度サインインするとロールを切り替えることもできます。こうすると、元のユーザーアクセス権限が一時的に無効になり、そのロールに割り当てられたアクセス権限が代わりに付与されます。

なるほど、awsアカウントのロールの切り替えね。
ネーミングが難解なので、難しいわ。