前回までの状況はこちら。

【LARAVEL】【ダイエット支援】ページネーションを実装する

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/diet-mng

このプログラムはこちらのリンク先で運用中です。

https://taki-lab.site:8443

さて、こちらのグラフなんですが、

• 

現状は最近の10日間のデータをグラフに表示させているのですが、

実際、もっと昔のデータもグラフに出したいじゃないですか。

なので、これをやります。

UIとしては、右下のところに日毎、週毎、月毎のリンクを作成して、それでグラフの切り替えをやっていこうと思います。

まずはフロント部分。

            <div class="command">
                <ul>
                    <li><a @click="onClickDay">day</a></li>
                    <li><a @click="onClickWeek">week</a></li>
                    <li><a @click="onClickMonth">month</a></li>
                </ul>
                <ul>
                    <li><a @click="onClickInput">クイック入力</a></li>
                    <li><a href="/weight">詳細</a></li>
                </ul>
            </div>

こんな感じでリンクを作ります。

フロントの処理はこちら。

        onClickDay: function() {
            this.contents.interval = 1;
            this.graphUpdate();
        },
        onClickWeek: function() {
            this.contents.interval = 7;
            this.graphUpdate();
        },
        onClickMonth: function() {
            this.contents.interval = 30;
            this.graphUpdate();
        },

クリックするリンクでデータ間隔を数字で設定して、APIのパラメータとして与えます。

ではAPIの処理。

    /**
     * グラフ用データを取得する
     */
    public function graph(Request $request)
    {
        return response()->json(['datas' => $this->weightManagement->getGraphData(Auth::user(), $request->contents["interval"])]);
    }

    public function getGraphData($user, $interval, $days = 10)
    {
        $datetimes = [];
        for($i = 0; $i < $days ; $i++) {
            $datetimes[] = date('Y-m-d', strtotime('today - '.($i * $interval).' day'));
        }

        return $user->WeightManagements()
                    ->whereIn(DB::raw('date_format(datetime, "%Y-%m-%d")'), $datetimes)
                    ->get();
    }

実行結果はこちら。

日毎

• 

週毎

• 

月毎

• 

データが少ないからあまり違いがわかりませんが、表示はちゃんと変わってます。

前回までの状況はこちら。

【LARAVEL】【ダイエット支援】VPSにデプロイする

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/diet-mng

データ一覧画面にページネーション機能を追加します。

1画面に表示するデータの数を絞り、ページ切り替えによって表示するデータを切り替えるというものです。

データの数が多くなったらこういう機能も必要になると思います。

やり方は主に2つありまして、

一つは、一度すべてのデータを取得し、その後はフロント側でよしなにするパターン。

もう一つは、ページ切り替えをするごとに必要なデータを取得するパターンです。

今回は後者の方を採用しようと思います。

まずは、データ数からページ数を求める処理を作成し、ページ切り替えの機能を作成していきます。

リポジトリの実装。

    public function getTotalRecord($user)
    {
        return $user->WeightManagements()->count();
    }

count()でデータ数が取れるんですね。便利。

コントローラーの実装。

    /**
     * データのレコード数を取得する
     */
    public function total(Request $request)
    {
        return response()->json(['total' => $this->weightManagement->getTotalRecord(Auth::user())]);
    }

Route::post('api/weight/total', 'Weight\ApiController@total');

ページを表示したら、このAPIを使用するようにします。

    created: function() {
        this.updateList();
        this.createPagenate();
    },
    methods: {
        createPagenate: function() {
            var self = this;
            this.pagenates = [];
            axios.post('api/weight/total').then(function(response){
                var total = response.data.total;
                self.maxPage = Math.floor(total / 10) + 1;
                for(var i = 1; i <= self.maxPage; i++) {
                    self.pagenates.push(i);
                }
            }).catch(function(error){
            });
        },

APIでデータ数を取得し、そこからページ数とページネーションのリスト(1,2,3…)をリストで作成します。

これを使用して、テンプレートを作成します。

            <div id="pagenate">
                <ul>
                    <li>
                        <a href="#" v-if="prevShow" @click="prevPage()">&lt;</a>
                        <b v-else>&lt;</b>
                    </li>
                    <li v-for="page in pagenates">
                        <a href="#" v-if="currentPage != page" @click="changePage(page)">{{ page }}</a>
                        <b v-else>{{ page }}</b>
                    </li>
                    <li>
                        <a href="#" v-if="nextShow" @click="nextPage()">&gt;</a>
                        <b v-else>&gt;</b>
                    </li>
                </ul>
            </div>

前のページ(<)、ページ数指定、次のページ(>)の順に表示させています。

ただ、１ページ目に場合は前のページが非活性化、最大ページのときは次のページが非活性化、あとは、現在のページと同じページへのリンクが非活性化させる必要があります。

これはv-ifで表示を切り替えています。

判定はcomputedで実装しています。

    computed: {
        prevShow: function() {
            return this.currentPage != 1;
        },
        nextShow: function() {
            return this.currentPage != this.maxPage;
        },
    },

あとは、ページをクリックしたときの処理を作成していきます。

        changePage: function(page) {
            this.currentPage = page;
            this.updateList();
        },
        nextPage: function() {
            this.currentPage += 1;
            if(this.currentPage > this.maxPage) {
                this.currentPage = this.maxPage;
            }
            this.updateList();
        },
        prevPage: function() {
            this.currentPage -= 1;
            if(this.currentPage <= 0) {
                this.currentPage = 0;
            }
            this.updateList();
        },

リスト更新処理も修正します。

        updateList: function() {
            this.datalists = [];
            this.contents.page = this.currentPage;
            this.param.contents = this.contents;
            var self = this;
            axios.post('api/weight/list', this.param).then(function(response){
                response.data.dataLists.forEach(element => {
                    self.datalists.push({
                        id: element.id,
                        date: element.datetime,
                        weight: element.weight,
                        fat_rate: element.fat_rate,
                        bmi: element.bmi
                    })
                });
            }).catch(function(error){
            });
        }

    /**
     * データを取得する
     */
    public function list(Request $request)
    {
        return response()->json(['dataLists' => $this->weightManagement->list(Auth::user(), $request->contents["page"])]);
    }

    public function list($user, $page = 1)
    {
        return $user->WeightManagements()
                    ->orderBy('datetime', 'desc')
                    ->skip(10 * ($page - 1))
                    ->limit(10)
                    ->get();
    }

日付で降順に並べ替え、ページの開始から10件取得する、という処理に変更しています。

実行結果はこちら。

• 

• 

前回までの状況はこちら。

【LARAVEL】【ダイエット支援】グラフ表示用のデータを取得するその２

最低限必要な機能は出来上がったので、本番サーバであるVPSで稼働させます。

gitからソースファイルをクローン

git clone https://github.com/takishita2nd/diet-mng.git

パーミッション変更

chmod -R 777 storage/
chmod 777 bootstrap/cache/

.envを作成し、データベースの設定と、URLの設定を記入。

cp .env.example .env
vi .env

データベースにログインし、データベースを作成。

mysql> create database diet_mng;

composerを使ってLaravelの環境を構築

sudo apt-get install composer
composer install

.envにkyeを生成

php artisan key:generate

npmでVue.jsを使用できるようにする

sudo apt-get install npm
sudo apt-get install libpng-dev
npm install
npm run prod

データベース構築（マイグレート）

php artisan migrate

nginxの設定

URLでブログとダイエット管理を分けようと思ったのですが、上手く設定できなかったので、ポート番号で分けます。

cd /etc/nginx/sites-enabled
sudo cp default laravel
sudo vi laravel

server {
        listen 8443 ssl default_server;
        listen [::]:8443 ssl default_server;
        ssl_certificate     /etc/letsencrypt/live/taki-lab.site/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/taki-lab.site/privkey.pem;

        root /var/www/html/diet-mng/public;

        index index.php index.html index.htm index.nginx-debian.html;

        server_name taki-lab.site;

        location / {
                try_files $uri $uri/ /index.php?$query_string;
        }

        location ~ \.php$ {
                fastcgi_pass   unix:/run/php/php7.2-fpm.sock;
                fastcgi_index  index.php;
                fastcgi_param  SCRIPT_FILENAME  $document_root/index.php;
                include        fastcgi_params;
        }
}

ポート番号は8443を使用しました。

ブログ用の設定では動きませんので、いろんなサイトを調べた結果、このような設定で動作できます。

LaravelをNginxで動作させる際の設定

rootはプロジェクトディレクトリ/publicを指定します。publicの下のindex.phpにアクセスするように指定します。

nginxの設定と読み込み

sudo systemctl reload nginx.service

何も表示されなければ書式は合っています。

エラーが出たら/var/log/nginx/error.logを確認してください。

ここまで上手くいけばトップページが表示されるはず。

• 

トップページ書き換えるの忘れてた。

ログインしてデータ入力できることを確認する。

• 

以下、詰まったところ

modelに以下を記入しないとデータベースクエリが動かなかった。

protected $table = 'weight_managements';

https://qiita.com/igz0/items/d14fdff610dccadb169e

テーブル名を明示的に指定しないといけないらしい。

ここらへん、ローカル環境にフィードバックさせます。

というわけで、

ダイエット管理サイト、以下からアクセスできますので、よかったら使ってみてください。

https://taki-lab.site:8443/