knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

Laravel 5 + sqlite 設定編 #Laravel #sqlite #PHP

index:

概要:

前回の Laravel 5 のDB関連で、
sqlite windows版設定となります。

環境

php7.1
Laravel 5.6
sqlite

設定方法

sqlite 64bit をDLしました。
https://www.sqlite.org/download.html

sqlite-dll-win64-x64-3240000.zip

・sqlite3.dllを、下記に配置
C:\Windows\System32

・DBと、テストの表の作成
 適当なフォルダに配置します。

sqlite3 spa1.sqlite

create table temp(id, name);
.exit

・ .sqlite ファイルが作成されます。

Laravel 設定

・ config/database.php

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

・ .env

DB_CONNECTION=sqlite
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=C:\xampp71\htdocs\spa1\spa1.sqlite
DB_USERNAME=homestead
DB_PASSWORD=secret

php.exe artisan migrate
php.exe artisan tinker

・サービス起動
php.exe artisan serve

Laravel 5 + React.js で、ajax でリスト作成など #Laravel #React.js #PHP

index:

概要:
前回の Laravel 5 + React.js の関連になります。
ajaxで、DB登録機能、リスト表示など実装となります。

環境

php7.1
Laravel 5.8
React.js
react-dom
react-router-dom

参考の設定

resource など、一部のフォルダです。
github.com

実装など

事前に、mysql DB作成、接続設定を行います。
手順は、前のVue.js と同様です

・migrate
https://github.com/kuc-arc-f/spa2-ver2/blob/master/database/migrations/2019_04_20_234711_create_to_dos_table.php

model:
https://github.com/kuc-arc-f/spa2-ver2/blob/master/app/ToDo.php

・app.js
https://github.com/kuc-arc-f/spa2-ver2/blob/master/resources/js/app.js

require('./bootstrap');
import React from 'react';
import { render } from 'react-dom';
import {  BrowserRouter, Router, Link, Route, browserHistory } from 'react-router-dom';
import Main   from './components/Main';
import Create from './components/Create';
import List from './components/List';
import Edit from './components/Edit';
//
class Hello extends React.Component {
    render() {
		return (
			<BrowserRouter>
			<div>
				<ul>
					<li><Link to="/create">Create</Link></li>
					<li><Link to="/list">List</Link></li>
				</ul>
				<Route path="/create" component={Create} />
				<Route path="/list" component={List} />
				<Route path="/todos/:id/edit" component={Edit} />
			</div>
			</BrowserRouter>
		);
    }
}
render(
    <Hello />,
    document.getElementById('example')
);


・web.php
https://github.com/kuc-arc-f/spa2-ver2/blob/master/routes/web.php

Route::prefix('api')->group(function(){
     Route::resource('todos', 'ToDosController', ['only'=>['index', 'store', 'show', 'update', 'destroy']]);
});
//
Route::get('/{any?}', function () {
    return view('welcome');
})->where('any', ".*");


・コントローラ
https://github.com/kuc-arc-f/spa2-ver2/blob/master/app/Http/Controllers/ToDosController.php

参考のページ

knaka0209.hatenablog.com

Laravel 5 + React.js で、設定編 #Laravel #React.js #PHP

index:

概要:
Laravel 5 + React.js の設定編になります。

環境

php7.1
Laravel 5.8
React.js
react-dom
react-router-dom

参考の設定

resource など、一部のフォルダです。
github.com

設定など

php.exe composer.phar create-project --prefer-dist laravel/laravel spa2
cd spa2
php.exe artisan preset react
npm install
npm run dev


・起動します。
php.exe artisan serve

・react-router-dom の、追加
 package.json
https://github.com/kuc-arc-f/spa2-ver1/blob/master/package.json

"react-router-dom": "^4.1.1",

・welcome.blade.php
https://github.com/kuc-arc-f/spa2-ver1/blob/master/resources/views/welcome.blade.php


・app.js
https://github.com/kuc-arc-f/spa2-ver1/blob/master/resources/js/app.js

require('./bootstrap');
import React from 'react';
import { render } from 'react-dom';
import {  BrowserRouter, Router, Link, Route, browserHistory } from 'react-router-dom';
import Example from './components/Example';
//import Hello1 from './components/Hello1';
//import Hello2 from './components/Hello2';

// <Hello />,
render(
    <Example />,
    document.getElementById('example')
);


コンポーネント
Example.js
https://github.com/kuc-arc-f/spa2-ver1/blob/master/resources/js/components/Example.js

・ npm run watch
の実行

結果

http://localhost:8000/ を開きます。

f:id:knaka0209:20190420184911p:plain

Laravel 5.6 + Vue.js で、SPA開発(4) ページング機能 #Laravel #vue.js #SPA #PHP

index:

概要:

前回のSPA(SinglePageApplication) 構成で、Laravel 5 +vue.js
の関連となります。

ページング機能の実装になります。


環境

php7.1
Laravel 5.6
Vue.js

参考の設定

resource など、一部のフォルダです。
github.com

追加した、一覧画面

f:id:knaka0209:20190415183311p:plain

実装など

・表の作成
php.exe artisan make:migration create_books_table --create=books
php.exe artisan migrate

https://github.com/kuc-arc-f/spa1_ver3/blob/master/database/migrations/2019_04_15_073043_create_books_table.php

・モデルの作成
php.exe artisan make:model Book


・データの登録、数件登録しておきます。

api.php
https://github.com/kuc-arc-f/spa1_ver3/blob/master/routes/api.php

=> ページ内の、件数指定 の場合。

    Route::get('/books', function(Request $request) {
        return App\Book::paginate(4);
    });

・app.js
/books/ の追加。
https://github.com/kuc-arc-f/spa1_ver3/blob/master/resources/assets/js/app.js

       { path: '/books/'              , component: require('./components/Books/index.vue') },

・Vueコンポーネント
Books/Index.vue

https://github.com/kuc-arc-f/spa1_ver3/blob/master/resources/assets/js/components/Books/Index.vue

Laravel 5.6 + Vue.js で、SPA開発(3) 状態の保持 #Laravel #vue.js #SPA #PHP

index:

概要:
前回のSPA(SinglePageApplication) 構成で、Laravel 5 +vue.js
の関連となります。

複数の画面を遷移した時の、
横断的に変数値を保存する方法について、検討してみました。
会員制サイト等での、ログイン情報等を保存し。
各ページで、保存された変数を使用。

=>今回は、vuex を使用せず。localStorageに保存しています。

環境

php7.1
Laravel 5.6
Vue.js

参考の設定

resource など、一部のフォルダです。
github.com

実装など

ユーザー追加等は、Laravel のauth 機能を
追加しました。(手抜きですが。)


php.exe artisan make:auth
php.exe artisan migrate

下記で、ユーザーを追加しておきます、
http://localhost:8000/register

・app.js
https://github.com/kuc-arc-f/spa1_ver2/blob/master/resources/assets/js/app.js
認証画面を追加

       { path: '/users/login'        , component: require('./components/Users/Login.vue') },

api.php
https://github.com/kuc-arc-f/spa1_ver2/blob/master/routes/api.php
認証API の追加

    // users
    Route::post('users/auth',  function(Request $request) {
        $const = new AppConst;
        $ret=$const->NG_CODE;
        $email   = request('email');
        $password= request('password');
//var_dump( $password );
        $query = App\User::query();
        $query->where('email', $email);
        $user = $query->first();
        if (Hash::check($password, $user->password)) {
            $ret= $const->OK_CODE;
        }
        return ['ret'=>$ret,'user'=> $user ];
    });

Vue.js

・Login.vue
https://github.com/kuc-arc-f/spa1_ver2/blob/master/resources/assets/js/components/Users/Login.vue

ログイン認証が、完了した場合。結果をストレージに保存しています。

<template lang="html">
    <div class="container">
            <h1>User -Login</h1>
            <div class="form-group">
                <label for="email">email</label>
                <input type="text" class="form-control" id="email" v-model="email" >
            </div>
            <div class="form-group">
                <label for="password">password</label>
                <input type="password" class="form-control" id="password" v-model="password" >
            </div>
            <button v-on:click="postLogin">ログイン</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                email:'',
                password:'',
                store:  [],
                user:   []
            }
        },
        mounted: function() {
        },
        methods: {
            postLogin(){
                var user = {
                    'email': this.email,
                    'password': this.password
                };
                axios.post('/api/users/auth/' ,user).then(res => {
                    console.log(res.data );
                    if(res.data.ret==1){
                        this.user = res.data.user
                        this.store.push({
                            id: this.user.id
                        })
                        myStorage.save( this.store )
                        window.location.href='/'
                    }else{
                        console.log('#-NG-auth');
                    }
                });
            }
        }
    }
</script>

・my_storage.js
localStorage 処理
https://github.com/kuc-arc-f/spa1_ver2/blob/master/public/js/my_storage.js

実行結果

・指定ページ、ログアウト後に開くと。
 認証状態をチェックして、
 ログイン画面に。強制 リダイレクトできました。
(vue-router 経由)

f:id:knaka0209:20190414164442p:plain

その他

flashメッセージ表示を追加しました。
(2019/04/15)
・/tasks/new/ で、登録、完了後。
/tasks 、一覧で。完了メッセージを表示。

f:id:knaka0209:20190415150239p:plain

・Vueコンポーネントは、
resources\assets\js\components\Layouts\FlashMessage.vue
を追加
https://github.com/kuc-arc-f/spa1_ver2/blob/master/resources/assets/js/components/Layouts/FlashMessage.vue


Laravel 5.6 + Vue.js で、SPA開発(2) axiosで登録機能など #Laravel #vue.js #SPA

index:

概要:

前回のSPA(SinglePageApplication) 構成で、Laravel 5 +vue.js
の関連となり、DBアプリ実装となります。

環境とか

php7.1
Laravel 5.6
Vue.js

構成の概要

・Laravel
モデル、WEB API

・Vue.js, Vue-router
View, ルーティング

みたいな構成になり、LaravelのMVC構成とは
異なる点が、ポイントになるかと思います。

参考の設定

resource など、一部のフォルダです。

github.com

実装など

DBは、事前に作成しておきます、

・migration
php.exe artisan make:migration create_tasks_table --create=tasks
php.exe artisan migrate

https://github.com/kuc-arc-f/vue_spa1/blob/master/database/migrations/2019_04_04_063010_create_tasks_table.php

・モデルの作成
php.exe artisan make:model Task

・web.php
https://github.com/kuc-arc-f/vue_spa1/blob/master/routes/web.php

Route::get('/{any}', function () {
    return view('app');
})->where('any', '.*');

・ app.blade.php
https://github.com/kuc-arc-f/vue_spa1/blob/master/resources/views/app.blade.php
axiosも、読み込んでますが。

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
        <script>
            window.Laravel = {
                csrfToken: "{{ csrf_token() }}"
            };
        </script>
        <script src="{{ asset('js/axios.min.js') }}?A1"></script>
    </head>
    <body>
        <div id="app">
            <div class="container">
                <router-view></router-view>
            </div>
        </div>
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>


・app.js
VueRouterで、ルーティングしています。
https://github.com/kuc-arc-f/vue_spa1/blob/master/resources/assets/js/app.js

import Vue from 'vue'
import VueRouter from 'vue-router'

require('./bootstrap');

window.Vue = require('vue');

Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history',
    routes: [
       { path: '/tasks'              , component: require('./components/Tasks/Index.vue') },
       { path: '/tasks/new/'         , component: require('./components/Tasks/new.vue') },
       { path: '/tasks/show/:id'     , component: require('./components/Tasks/show.vue') },
       { path: '/tasks/edit/:id'     , component: require('./components/Tasks/edit.vue') },
       { path: '/about', component: require('./components/About.vue') }
    ]
});

const app = new Vue({
    router,
    el: '#app'
});

api.php

Laravel API の作成、

<?php

use Illuminate\Http\Request;
//use App\Article;

Route::group(['middleware' => 'api'], function() {
    //
    Route::get('tasks',  function() {
        $tasks = App\Task::all()->take(5);
        return $tasks;
    });
    Route::get('tasks/show/{id}',  function($id) {
        $task = App\Task::find($id);
        return $task;
    });
    Route::get('tasks/edit/{id}',  function($id) {
        $task = App\Task::find($id);
        return $task;
    });
    Route::post('tasks/add',  function() {
        $task = new App\Task();
        $task->title   = request('title');
        $task->content = request('content');
        $task->save();
        return ['title' => request('title'),'content' => request('content')];
    });
    // /api/tasks/update
    Route::post('tasks/update/{id}',  function($id) {
//        $task = new App\Task();
        $task = App\Book::find($id);
        $task->title   = request('title');
        $task->content = request('content');
        $task->save();
        return ['title' => request('title'),'content' => request('content')];
    });

    Route::get('test',  function() {
        return "#test";
    });

});

Laravel 5.6 + Vue.js で、SPA開発(1) 準備編 #Laravel #vue.js #SPA

index:

概要:
SPA(SinglePageApplication) 構成で、Laravel 5 +vue.js
の開発 、準備編となります。

環境とか

php7.1
Laravel 5.6
Vue.js
vue-router
node.js
npm

準備

古めですが、Laravel5.6です。
適当な、プロジェクト名を決めて、作成します。

php.exe composer.phar create-project --prefer-dist laravel/laravel spa1 "5.6.*"
cd spa1

・package.json
vue-router を追加します。

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "popper.js": "^1.12",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7",
        "vue-router": "^2.3.0"
    }
}

npm install
npm run watch


・Laravel の起動
php.exe artisan serve

・ブラウザで、http://localhost:8000/
で、ページが開けます。