投稿者「後藤 祐一」のアーカイブ

後藤 祐一 について

フリーランスとしてWebプログラミングを行っています。 宜しくお願いします。

Laravel ログイン画面作成

ここではLaravelでログイン画面を作成してログイン成功画面へのリダイレクトまでを行いたいと思います。

環境
Laravel:5.8
PHP:7.1.3
OS:Win10 XAMPP
ツール:Composer
DB:MySQL

やる事の順番
1.DBにログインする情報を設定
2.URLのルーティング
3.コントローラー作成
4.View作成
5.モデル作成

1.DB設定ファイル

config\database.php

'default' => env('DB_CONNECTION', 'mysql'),

'mysql' => [
    'driver' => 'mysql',
    'url' => env('DATABASE_URL'),
    'host' => env('DB_HOST', '127.0.0.1'),
    'port' => env('DB_PORT', '3306'),
    'database' => env('DB_DATABASE', 'laravel_test'),
    'username' => env('DB_USERNAME', 'root'),
    'password' => env('DB_PASSWORD', ''),
    'unix_socket' => env('DB_SOCKET', ''),
    'charset' => 'utf8mb4',
    'collation' => 'utf8mb4_unicode_ci',
    'prefix' => '',
    'prefix_indexes' => true,
    'strict' => true,
    'engine' => null,
    'options' => extension_loaded('pdo_mysql') ? array_filter([
        PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
    ]) : [],
],

\.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_test
DB_USERNAME=root
DB_PASSWORD=

2.URLのルーティング

routes/web.php

//Route::get('/', function () {
//    return view('welcome');
//});

Route::get('/login', 'LoginController@index');
Route::post('/login/post', 'LoginController@post');
Route::get('/admin', 'AdminController@index');

http://localhost/laravel/loginにGETでアクセスするとLoginControllerのindexメソッドが呼ばれる。
http://localhost/laravel/login/postにPOSTでアクセスするとLoginControllerのPOSTメソッドが呼ばれる。
以下略

3.コントローラー作成

app/Http/Controllers\LoginController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Model\MstUser;

class LoginController extends Controller
{
    public function index()
    {
        $arrCSS = $this->setCSS();
        $arrJS = $this->setJS();
        return view('login', ['arrCSS' => $arrCSS, 'arrJS' => $arrJS]);
    }

    public function post(Request $req)
    {
        $table = new MstUser;
        $login = $table->isLogin($req->user_id, $req->pass);
        if (empty($login)) {
            return view('login', ['errorMsg' => 'ログインできませんでした']);
        } else {
            return redirect()->action('AdminController@index');
        }
    }

    public function setCSS() {
        $arrCSS = array();
        array_push($arrCSS, '/css/app.css');
        return $arrCSS;
    }

    public function setJS() {
        $arrJS = array();
        array_push($arrJS, '/js/app.js');
        return $arrJS;
    }
}

app/Http/Controllers\AdminController.php

<?php

namespace App\Http\Controllers;

class AdminController extends Controller
{
    public function index()
    {
        return view('admin');
    }
}

return viewの第二引数でviewに変数を渡しています。
筆者はページ固有の情報があればコントローラーで設定していく感じにしてます。

4.View作成

resources\views以下に作成
今回はヘッダーやフッターファイルを使いまわせるようにlayoutsフォルダを作成しサイトの雛形を作成します。
resources\views\layouts\app.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>@yield('title')</title>
@isset($arrCSS)
    @foreach ($arrCSS as $val)
        <link rel="stylesheet" href="{{ asset($val) }}">
    @endforeach
@endisset
@isset($arrJS)
    @foreach ($arrJS as $val)
    <script type="text/javascript" src="{{ asset($val) }}"></script>
    @endforeach
@endisset
</head>
<body>
    <div class="container">
    @include('layouts.header')
    @yield('content')
    @include('layouts.footer')
    </div>
</body>
</html>

ページ毎に切り替えて使いまわす部分
タイトル、CSS、Js、コンテンツ部
resources\views\layouts\以下にheader.blade.php、footer.blade.phpファイルを作成します。
ヘッダー、フッターの確認ができればいいので中身は何でもいいです。

次にログイン画面@yield(‘content’)の部分を作成していきます。
resources\views\login.balade.php

@extends('layouts.app')

@section('title', 'ログイン画面')

@section('content')
<form action="{{ url('login/post')}}" method="POST">
@csrf
ID:<input type="text" name="user_id">
Pass:<input type="text" name="pass">
<input type="submit" value="送信">
</form>
@isset($errorMsg)
{{ $errorMsg }}
@endisset
@endsection

resources\views\admin.balade.php

@extends('layouts.app')

@section('title', 'ログイン成功')

@section('content')
ログインできました。
@endsection

5.モデル作成

app/Model\MstUser.php

<?php

namespace App\Model;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\DB;

class MstUser extends Model
{
    protected $table = 'mst_user';
    protected $guarded = ['id'];

    public function isLogin($userId, $pass)
    {
        $sql = "SELECT id "
             . "  FROM mst_user "
             . " WHERE user_id = '{$userId}' "
             . "   AND pass = '{$pass}' ";
        return DB::select($sql);
    }

}

モデルは好きな場所に作成できます。
モデルを作成した場所をnamespaceに記述してください。

Laravel URLのpublicを消す

ここではLaravel URLのpublicを消す方法について解説していきます。

環境
Laravel:5.8
PHP:7.1.3
OS:Win10 XAMPP
ツール:Composer

http://localhost/laravel/public/

http://localhost/laravel/

publicフォルダの中身をlaravel直下に展開する

http://localhost/laravel/でアクセスすると下記エラーが発生。

Warning: require(C:\xampp\htdocs\laravel/../vendor/autoload.php): failed to open stream: No such file or directory in C:\xampp\htdocs\laravel\index.php on line 24
Fatal error: require(): Failed opening required ‘C:\xampp\htdocs\laravel/../vendor/autoload.php’ (include_path=’C:\xampp\php\PEAR’) in C:\xampp\htdocs\laravel\index.php on line 24

index.phpを移動したのでいろいろパスが合わなくなっているので
24行目からパスを通しなおす。

laravel直下に置いたindex.phpの修正

require __DIR__.'/vendor/autoload.php'; //24行目 ../を消してパスを通す
$app = require_once __DIR__.'/bootstrap/app.php'; //38行目 ../を消してパスを通す

http://localhost/laravel/でアクセスしてlaravel画面が表示されたら完了

Laravel インストール

ここではLaravelをインストールしてEclipseにインポートするまでを解説していきます。

環境
Laravel:5.8
PHP:7.1.3
OS:Win10 XAMPP
ツール:Composer

Laravel

まずはコマンドプロンプトから

cd C:\xampp\htdocs // ドキュメントルートにインストール
laravel new blog

blogがプロジェクトネームになりblog以下にLaravelがインストールされます。
今回はプロジェクトネームをlaravelにして進めます。

Eclipse

ファイル->インポート->PHP->既存のComposerプロジェクトでドキュメントルートのlaravelを選択
Eclipse側の言語ライブラリーがPHP5.6のためLaravelのtestsフォルダがエラーがでます。

Eclipseプロジェクト・エクスプローラーのlaravelを右クリック->プロバティ->PHP->検証->プロジェクト固有の設定を可能にしてPHPバージョンを7.1に設定。

http://localhost/laravel/public/にアクセスしてlaravel画面が表示されたらインストール完了

jQuery Table要素にappend

jQueryでTable要素にappendするときずれた位置に表示されてしまったのでまとめ

$(document).ready(function(){
    $('#foo').append('<tr>');
    $('#foo').append('<td>');
    $('#foo').append('ずれた位置に表示される');
    $('#foo').append('</td>');
    $('#foo').append('</tr>');
});

最初のtrタグをappendしたタイミングで/trされる。
tdタグについても同じくtdタグをappendしたタイミングで/tdされる。
なのでHTMLでみると以下のようになる

<table id="foo">
  <tr></tr>
  <td></td>
  ずれた位置に表示される
</table>

for文などで行と列が可変の場合とても面倒だが
tableにtrをappendする
trにtdをappendする

$(document).ready(function(){
    $('#foo').append('<tr id="bar"></tr>');
    $('#bar').append('<td>この書き方が正解</td>');
});

HTMLでみると以下のようになる

<table id="foo">
  <tr id="bar">
    <td>この書き方が正解</td>
  </tr>
</table>

なおtrをappendするタイミングで/trがされるので/trは省略できる。
tdタグについても同じくtdをappendするタイミングで/tdがされるので/tdは省略できる。
しかし/タグを省略して書くとプログラマとしては失格であるので/tr/tdでしっかりと閉じよう。
誰が見ても分かりやすいコードを書くように心がけよう。

jQuery 楽天 カレンダー

楽天のカレンダーが表示されなくなってたので自分で組みました。
1ヶ月毎に自動で切り替わる仕様です。

CSS

table.calbase_rakuten {
    background-color: #FFFFFF;
    border: 1px solid #CECECE;
    width: 100%;
    border-collapse: collapse;
    padding: 0px 0px 10px 0px;
}

table.calbase_rakuten * {
    font-size: 98%;
    color: #000000;
    border-collapse: collapse;
    padding: 0px;
    margin: 0px;
}

table.calbase_rakuten th {
    text-align: center;
}

th.caltitle_rakuten {
    font-size: 85%;
    padding: 10px 0px 0px 0px;
}

table.calframe_rakuten {
    border-collapse: collapse;
    margin: 10px 10px 0px 10px;
    table-layout: fixed;
    width: 178px;
}

table.calframe_rakuten th {
    text-align: center;
    padding: 0px 0px 3px 0px;
}

table.calframe_rakuten td {
    border: 1px solid #FFFFFF;
    background-color: #FFFFFF;
    width: 19px;
    height: 17px;
    text-align: center;
}

tr.weektitle_rakuten td {
    background-color: #EEEEEE;
}

td.event1day_rakuten {
    background-color: #FFC6C6 !important;
}

font.event1day_rakuten {
    color: #FFC6C6;
}

td.event2day_rakuten {
    background-color: #B5DAFF !important;
}

font.event2day_rakuten {
    color: #B5DAFF;
}

td.event3day_rakuten {
    background-color: #FEDE93 !important;
}

font.event3day_rakuten {
    color: #FEDE93;
}

table.event_rakuten {
    text-align: left;
    word-break: break-all;
    margin: 7px 10px 7px 10px;
    border-collapse: collapse;
    line-height: 120%;
    table-layout: fixed;
    width: 141px;
}

table.event_rakuten td {
    padding: 0px 0px 0px 0px;
}

table.text_rakuten {
    text-align: left;
    word-break: break-all;
    margin: 0px 10px 10px 10px;
    border-collapse: collapse;
    line-height: 120%;
    table-layout: fixed;
    width: 178px;
}

HTML

<table class="calbase_rakuten">
  <tr>
      <td align="center">
      <table>
        <tr>
          <td align="center">
            <table class="calframe_rakuten" id="forArea0">
              <tr>
                <th colspan="7"><span id="y0"></span>年<span id="m0"></span>月</th>
              </tr>
              <tr class="weektitle_rakuten">
                <td style="color:#BF0000">日</td>
                <td style="color:#000000">月</td>
                <td style="color:#000000">火</td>
                <td style="color:#000000">水</td>
                <td style="color:#000000">木</td>
                <td style="color:#000000">金</td>
                <td style="color:#1D54A7">土</td>
              </tr>
            </table>

            <table class="calframe_rakuten" id="forArea1">
              <tr>
                <th colspan="7"><span id="y1"></span>年<span id="m1"></span>月</th>
              </tr>
              <tr class="weektitle_rakuten">
                <td style="color:#BF0000">日</td>
                <td style="color:#000000">月</td>
                <td style="color:#000000">火</td>
                <td style="color:#000000">水</td>
                <td style="color:#000000">木</td>
                <td style="color:#000000">金</td>
                <td style="color:#1D54A7">土</td>
              </tr>
            </table>

          </td>
        </tr>
        <tr>
          <td colspan="2">
            <table class="event_rakuten">
              <tr><td><font class="event1day_rakuten">■</font> 休業日</td></tr>
              <tr><td><font class="event2day_rakuten">■</font> 受注・お問い合わせ業務のみ</td></tr>
              <tr><td><font class="event3day_rakuten">■</font> 発送業務のみ</td></tr>
            </table>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <table class="text_rakuten">
              <tr><td>
                ※ご注文は24時間年中無休で受け付けております。
              </td></tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Javascript

$(document).ready(function(){
    var dt = new Date();
    var echoCount = 2;
    var holidayDates = ['2019/3/21','2019/4/29','2019/4/30','2019/5/1','2019/5/2','2019/5/3','2019/5/4','2019/5/5','2019/5/6','2019/7/15','2019/8/11','2019/8/12','2019/9/16','2019/9/23','2019/10/14','2019/10/22','2019/11/3','2019/11/4','2019/11/23'];

    for (var i = 0; i < echoCount; i++) {
	    $('#y' + i).append(dt.getFullYear());
	    $('#m' + i).append(dt.getMonth() + 1);
	    createClendar(dt, '#forArea' + i, 'row' + i);
        var nextLastDay = new Date(dt.getFullYear(), dt.getMonth()+2, 0).getDate();
        if (nextLastDay <= dt.getDate()) {
	        dt.setDate(dt.getDate() + 1);
        } else {
            dt.setMonth(dt.getMonth() + 1);
        }
	}

    function createClendar(dt, areaName, rowName) {
        var lastDay = new Date(dt.getFullYear(), dt.getMonth()+1, 0).getDate();
        var row = 0;
        var k = 0;
        var a = dt.getDay();
        var beginMonth = new Date(dt.getFullYear(), dt.getMonth(), 1).getDay();
        if (beginMonth != 0) {
            var lateLastMonth = new Date(dt.getFullYear(), dt.getMonth(), 0).getDate();
            var beginMonth = new Date(dt.getFullYear(), dt.getMonth(), 1).getDay();
            var i = lateLastMonth - beginMonth + 1;
            var j = 0;
            $(areaName).append('<tr id="' + rowName + row + '"></tr>');
            for (i; i <= lateLastMonth; i++) {
                $('#' + rowName + row).append('<td style="color:#CECECE">' + i + '</td>');
                j++;
            }
            for (j; j < 7; j++) {
                k++;
                if (j == 0 || j == 6) {
                    $('#' + rowName + row).append('<td style="color:#1D54A7" class="event1day_rakuten">' + k + '</td>');
                } else if (holidayDates.some(function(e) {return e == dt.getFullYear() + '/' + (dt.getMonth()+1) + '/' + k})) {
                    $('#' + rowName + row).append('<td style="color:#BF0000" class="event1day_rakuten">' + k + '</td>');
                } else {
                    $('#' + rowName + row).append('<td style="color:#000000">' + k + '</td>');
                }
            }
        }
        for (var i = 0; i < 7; i++) {
        	k++;
        	if (i == 0) {
        		row++;
    	        $(areaName).append('<tr id="' + rowName + row + '"></tr>');
        	}
        	if (i == 0 || i == 6) {
                $('#' + rowName + row).append('<td style="color:#1D54A7" class="event1day_rakuten">' + k + '</td>');
            } else if (holidayDates.some(function(e) {return e == dt.getFullYear() + '/' + (dt.getMonth()+1) + '/' + k})) {
                $('#' + rowName + row).append('<td style="color:#BF0000" class="event1day_rakuten">' + k + '</td>');
            } else {
                $('#' + rowName + row).append('<td style="color:#000000">' + k + '</td>');
            }
        	if (i == 6) {
        	    i = -1;
        	}
    	    if (k >= lastDay) {
    	    	var forCount = 7 - new Date(dt.getFullYear(), dt.getMonth(), k).getDay();
        		for (j = 1; j < forCount; j++) {
    	            $('#' + rowName + row).append('<td style="color:#CECECE">' + j + '</td>');
        		}
    	    	break;
    	    }
        }
    }
});

まとめ

祝日判定をarray.someでしているがIE11で動かなかった。

if (holidayDates.some(e) => e == '2019/4/29') {
    // ie11で動かないよ
    // でもChromeとFirefoxでは動くよ
}
if (holidayDates.some(function(e) {return e == '2019/4/29'})) {
    // ie11でも動くよ
}