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

RewriteCondとRewriteRule

RewriteEngine on
RewriteCond %{HTTP_HOST} ^http://hpscript/.com/app
RewriteRule ^(.*)$ https://google.com/$1 [R=301,L]

あれ、上手くいかん。まー使い方は解った。

laravel Web Server Configuration

Pretty URLs
Apache
Laravel includes a public/.htaccess file that is used to provide URLs without the index.php front controller in the path. Before serving Laravel with Apache, be sure to enable the mod_rewrite module so the .htaccess file will be honored by the server.

.htaccessを見てみましょう

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

あれ、ナニコレ、要するに、laravelのroutingってrewriteEngineで301リダイレクトさせてるってこと！？
Handle Authorization Header、Redirect Trailing Slashes If Not A Folder…、Handle Front Controller…って書いてますね。

RewriteCondはRewriteRule を実行するための条件を定義するための記述
ってことは、 %{HTTP:Authorization}、%{REQUEST_FILENAME}、%{REQUEST_URI}　この辺は条件か。
REQUEST_URI リクエストURI
REQUEST_FILENAME リクエストされたファイル名

あーーーーーーなるほど、ドキュメントはやべーわ。フレームワークの重要なこと、全部書かれてるっぽい。
なるほど、フレームワーク使う時は、ドキュメント全部読まないと駄目だわこりゃ。
うわーーーーーーー頭いてー

Laravel Configuration

All of the configuration files for the Laravel framework are stored in the config directory. Each option is documented, so feel free to look through the files and get familiar with the options available to you.

configファイルは、app.php, auth.php, broadcasting.php, cache.php … などが入っています。
app.phpは.envやtime zoneなどでしたね。

Directory Permissions
After installing Laravel, you may need to configure some permissions. Directories within the storage and the bootstrap/cache directories should be writable by your web server or Laravel will not run. If you are using the Homestead virtual machine, these permissions should already be set.
ん？ storageもresources/viewsもpublicも、いずれも755では。。。

Additional Configuration
Laravel needs almost no other configuration out of the box. You are free to get started developing! However, you may wish to review the config/app.php file and its documentation. It contains several options such as timezone and locale that you may wish to change according to your application.
あ、やっぱりconfig/app.php はまず見ておいた方が良さそうです。

asia/tokyoに変えます。localeも’ja’に。

'timezone' => 'Asia/Tokyo',
'locale' => 'ja',

あれ、リンクっぽいのがあるぞ、試しに踏んでみよう。
https://readouble.com/laravel/5.7/en/cache.html#configuration
https://readouble.com/laravel/5.7/en/database.html#configuration
https://readouble.com/laravel/5.7/en/session.html#configuration

ぎゃあああああああああああああああああああああああああ
がっつりリンクあるやんけ。
みなけりゃ良かった。。

あれ、俺が見てるのって、instalationのドキュメントじゃん。
シンプルなのはinstalltionだけで、ドキュメントすげーいっぱいあるじゃん。これ全部読むの？
まじかーーー、週末までかかるな。。。

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>

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

で、これを当てはめたい

まー及第点でしょう。。