読者です 読者をやめる 読者になる 読者になる

しぐれがき

これまで挑戦したことの備忘録です

【投稿アプリ自作(3)】データベースに接続(Laravel)

f:id:shiguregaki:20170522215254j:plain
Webアプリを自作するためにPHPフレームワークのLaravelを導入することに決めました。
PHP初心者かつLaravel初心者ですが、自分なりにスキルを得るためにLaravelを用いた記事投稿アプリを自作しました。その過程を備忘録としてまとめます。
最終的にはブラウザを利用して記事投稿画面の表示、ユーザごとの記事投稿数のグラフ化を目指したいと思います。
本記事は連載【投稿アプリ自作】の第三回目で、データベースの接続およびマイグレーションによる新規テーブル作成方法をまとめます。
※:Laravelは5.3からファイル構成が大幅に変わりました。本記事ではLaravel5.3以降を使って説明したいと思います。
※2:データベースはXAMPPに入っていたMySQLを使うことにします。事前にデータベースアカウントを登録しておいてください。

目次

ゴール

本記事では、以下の2つを目指します。
・データベースの設定をし、特定のデータベースに接続する
マイグレーションを実行することで、下の画像の様に新規テーブルを作成する

f:id:shiguregaki:20170522214945j:plain

必要なもの

必要なもの 価格(円)
1 PC ピンキリ
備考 インターネット接続可能なこと
2 XAMPP 無料
備考 持っていない場合は、こちらを参照→XAMPPのインストール方法
3 Composer 無料
備考 持っていない場合は、こちらを参照→Composerのインストール方法
4 Laravelフレームワーク 無料
備考 インストールしていない場合は、こちらを参照→Laravelのインストール方法
5 MySQLのデータベースアカウント 無料
備考 持っていない場合は、こちらを参照→phpMyAdminでデータベースとユーザを新規登録する




事前準備

XAMPPでApacheMySQLを起動!

データベースの設定をするために、ApacheMySQLを起動します。

f:id:shiguregaki:20170522215117j:plain



データベースの準備

データベースにアクセスるため、MySQLのデータベースおよびユーザを新規作成します。
以下にphpMyAdminを使ってMySQLのデータベース、ユーザを新規作成する方法をまとめました。
ご参考にしてください。

shiguregaki.hatenablog.com





Laravelソースファイルの変更

変更や新規作成するLaravelファイル一覧

Laravelのプロジェクトファイル配下にあるファイルで本記事の中で変更、新規作成するファイルについてまとめました。

ファイル名 対応 備考
1 .env 変更




.envの変更

.envファイルはアクセス先URLやデータベースの設定値など環境ごとに変わる情報をまとめたファイルになります。
事前準備で新規作成したデータベース名、データベースユーザ名、パスワードを変更します。
変更箇所を以下にまとめました。太字部分はお使いの環境に合わせて変更してください。

修正前 修正後
1 9 DB_HOST=127.0.0.1 DB_HOST=localhost
2 11 DB_DATABASE=homestead DB_DATABASE=<事前準備で作成したデータベース名>
3 12 DB_USERNAME=homestead DB_USERNAME=<事前準備で作成したデータベースユーザ名>
4 13 DB_PASSWORD=secret DB_PASSWORD=<事前準備で作成したデータベースパスワード>




マイグレーションの実行

マイグレーションとはデータベースに保存されているデータを保持した状態で、テーブルの作成やカラムの変更などのデータベースの操作を行うための機能です。
Laravelにはデフォルトで以下の2つのマイグレーションファイルがあります。


デフォルトであるマイグレーションファイル
database/migrations/xxxx_xx_xx_xxxxx_create_users_table.php
database/migrations/xxxx_xx_xx_xxxxx_create_password_resets_table.php
※xxxは環境依存



これら2つのマイグレーションファイルを実行して、データベースが作成できるかを確認していきます。
マイグレーションを実行するには以下のコマンドをコマンドプロンプト上で実行します。


 マイグレーション実行コマンド 
>php artisan migrate


f:id:shiguregaki:20170522215231j:plain





データベースの確認

データベースが正しく作成されているか確認するため、phpMyAdminにアクセスします。
ブラウザでphpMyAdmin(以下のURL)にアクセスしてください。

phpMyAdminのアクセス先http://localhost/phpmyadmin

上の.envファイルで指定したデータベースに以下の3つのテーブルが新規で作成されているはずです。
・migrations
・password_resets
・users

f:id:shiguregaki:20170522215240j:plain

migrationsテーブルはマイグレーションの実行された履歴が格納されています。
password_resetsテーブル、usersテーブルは前述したデフォルトであったマイグレーションファイルのxxx_password_resets_table.php、xxx_create_users_table.phpの内容に基づいて作成されているテーブルです。

これでマイグレーションを実行して新規のテーブルが作成できることを確認できました。




まとめ

今回はLaravelを使って以下の2つのことを確認しました。
・データベースの設定をし、特定のデータベースに接続する
マイグレーションを実行することで、下の画像の様に新規テーブルを作成する

今回はデフォルトでるマイグレーションファイルを使って新規テーブルを作成しましたが、実際はデータベースを設計してマイグレーションファイルを作成します。
次回以降でこのマイグレーションファイルの作成方法もまとめていきます。



次回記事

次回はダミーデータベースを設計し、その設計に基づいてマイグレーションファイルの作成、実行する方法をまとめたいと思います。

http://shiguregaki.hatenablog.com/entry/p42shiguregaki.hatenablog.com



前回記事

shiguregaki.hatenablog.com



以上!

phpMyAdminでデータベースとユーザを新規登録する

f:id:shiguregaki:20170519065302j:plain


phpMyAdminMySQLサーバーをブラウザで管理するためのデータベース接続クライアントツールです。
ブラウザからのGUI操作でSQL文を記述することなく、MySQLデータベースに対して様々な操作が行えます。
本記事ではphpMyAdminで新規データベースの作成および新規ユーザの登録する方法をまとめます。
※本記事はXAMPPを利用します。XAMPPをインストールしていない方は事前にインストールをしてください。
XAMPPのインストール方法はこちら

目次

必要なもの

必要なもの 価格(円)
1 PC ピンキリ
備考 インターネット接続可能なこと
2 XAMPP 無料
備考 持っていない場合は、こちらを参照→XAMPPのインストール方法

事前準備

本記事ではXAMPPを使って説明しますので、事前準備としてXAMPPをインストールしてください。

XAMPPをインストールする!

XAMPPはPHPSQL,apacheなどのサーバのコンポーネントを1つにまとめたソフトになります。
これからPHPを使ってコーディングをしていくので、PHPをインストールする必要があるのですが、XAMPPをインストールすればapacheも同時にインストールできるため、ローカル環境のブラウザ上でPHPの表示確認ができるようになります。
XAMPPのイントール方法をブログにまとめたので、よろしければご参照ください。

shiguregaki.hatenablog.com



XAMPPでApacheMySQLを起動!

データベースの設定をするために、ApacheMySQLを起動します。

f:id:shiguregaki:20170519065051j:plain




新しいデータベースの作成

この章では新規データベースを登録方法についてまとめます。

ブラウザでphpMyAdmin(以下のURL)にアクセスしてください。

phpMyAdminのアクセス先http://localhost/phpmyadmin

すると以下のような画面が表示されるはずです。
新規データベースを作成するには左側にあるメニューの中の"New"をクリックします。

f:id:shiguregaki:20170519065107j:plain



するとデータベースの新規作成ページが表示されます。
新規作成したいデータベース名を入力し、"作成"ボタンをクリックします。

f:id:shiguregaki:20170519065116j:plain



下の画像の様に先ほど新規作成したデータベース名が表示されるはずです。

f:id:shiguregaki:20170519065125j:plain




新しいユーザの登録

次にデータベースにアクセスできるユーザを新規登録します。
先ほど作成したデータベースを選択すると、上のメニューに"特権"があります。そこをクリックします。

f:id:shiguregaki:20170519065135j:plain



下の画像のようにユーザ一覧が表示されたら、"Add user account"ボタンをクリックします。

f:id:shiguregaki:20170519065142j:plain


新規に作成するユーザの情報を入力します。
以下の入力欄に値を入力していきます。
・User name:お好きなユーザ名
・Host name:localhost
・パスワード・Retype:お好きなパスワード
・Authentication Plugin:Native MySQL authentication

以下のチェックボックスにチェックを入れます。
・データベース”***”へのすべての特権を与える
・グローバル特権 Check all

その後、右下にある実行ボタンをクリックします。

f:id:shiguregaki:20170519065154j:plain


以下の画像の様に"新しいユーザを追加しました"と表示されれば新規ユーザの作成は完了です。

f:id:shiguregaki:20170519065218j:plain


まとめ

本記事ではphpMyAdminを使ってMySQLサーバへの新規データベース作成および新規ユーザ作成の操作をする方法をまとめました。
今回でデータベースを新規作成できましたので、次はそれを操作するアプリの作成が必要です。
私は練習も兼ねてPHPフレームワークであるLaravelを用いて記事投稿Webアプリを自作してみました。
よろしければそちらの記事もご参考にしてください。

shiguregaki.hatenablog.com


以上!

【投稿アプリ自作(2)】Laravelで"Hello World"表示 (Laravel)

f:id:shiguregaki:20170515234701j:plain
Webアプリを自作するためにPHPフレームワークのLaravelを導入することに決めました。
PHP初心者かつLaravel初心者ですが、自分なりにスキルを得るためにLaravelを用いた記事投稿アプリを自作しました。その過程を備忘録としてまとめます。
最終的にはブラウザを利用して記事投稿画面の表示、ユーザごとの記事投稿数のグラフ化を目指したいと思います。
本記事は連載【投稿アプリ自作】の第二回目で、Laravelで"Hello World"を表示させることを目指します。
※Laravelは5.3からファイル構成が大幅に変わりました。本記事ではLaravel5.3以降を使って説明したいと思います。

目次

ゴール

本記事では、下の画像の様にブラウザ上でHello Worldが表示できるようになることを目指します。

f:id:shiguregaki:20170515234500j:plain

必要なもの

必要なもの 価格(円)
1 PC ピンキリ
備考 インターネット接続可能なこと
2 XAMPP 無料
備考 持っていない場合は、こちらを参照→XAMPPのインストール方法
3 Composer 無料
備考 持っていない場合は、こちらを参照→Composerのインストール方法

Laravelソースファイルの変更

変更や新規作成するLaravelファイル一覧

Laravelのプロジェクトファイル配下にあるファイルで本記事の中で変更、新規作成するファイルについてまとめました。

ファイル名 対応 備考
1 app/Http/Controllers/ArticleController.php 新規作成 php artisan make:controller”コマンドで生成
2 resources/views/layout.blade.php 新規作成
3 routes/web.php 変更

コントローラーの新規作成

コントローラーはブラウザからのアクションに応じて実行されるファイルです。
ブラウザからのアクションはURLによるページアクセスから入力フォームからのPOSTなどさまざまです。
各アクションに応じたコントローラーを後述するルーティングファイルによって紐づけています。


コントローラーはLaravelのプロジェクトフォルダ上でartisanコマンドにて作成します。


 コントローラーを新規作成するコマンド 
>php artisan make:controller <コントローラー名>

f:id:shiguregaki:20170515234606j:plain
※上の画像ではコントローラー名をArticleControllerにしています。実際に使う時はお好きな名前に変更してください。





コントローラーはLaravelのプロジェクトフォルダの以下のディレクトリに格納されます。

コントローラーの格納場所<プロジェクトファイルのルートディレクトリ>/app/Http/Controllers/

上記格納場所を確認すると、コマンドで指定したファイル名でコントローラーが自動生成されているはずです。

f:id:shiguregaki:20170515234616j:plain





コントローラーの中身を確認すると、下記のようにControllerクラスを継承したコントローラが定義されており、メソッドは空の状態であることが分かります。
上で実行した"artisan make:controller"コマンドのオプションを指定することでデフォルトで基本メソッドを追加したりすることもできます。



ArticleController.phpのデフォルト

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ArticleController extends Controller
{
    //
}





コントローラーの変更

先ほど作成したコントローラーにメソッドを追加します。
後述のルーティングファイルからコントローラーのこの関数を呼ぶことにします。
特に処理はなくこの関数が呼ばれるとlayoutという名称のビュー(後述)が実行されて画面出力されます。

ArticleController.phpの変更

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ArticleController extends Controller
{
    public function sayHello(){
        return view('layout');
    }
}






ビューの新規作成

コントローラーの次はビューファイルを作成します。
ビューはコントローラーから加工したデータなどを引数として受け取り、画面上に出力させるためのファイルです。
ブラウザに出力させたいので、HTML文で記入します。





ビューは下記のディレクトリに格納します。

ビューの格納場所<プロジェクトファイルのルートディレクトリ>/resources/views/


上記のディレクトリに新しくビューを作成します。このとき注意が必要なのはファイルの拡張子です。
ビューの拡張子は必ず.blade.phpにしてください。

f:id:shiguregaki:20170515234627j:plain




ビューの変更

先ほど作成したビューをHTMLで"Hello World"と表示させるため以下の様に変更します。

layout.blade.php

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>My Blog</title>
</head>
<body>  
    <h1>Hello World!</h1>
</body>
</html>


非常に簡単ですが、body要素の中に"Hello World"を入れました。





ルーティングの変更

最後にルーティングを変更します。
ルーティングは特定のアクセス先とコントローラーを紐づけるファイルです。

ルーティングは下記のディレクトリに格納されています。

ルーティングの格納場所<プロジェクトファイルのルートディレクトリ>/routes/


上記のディレクトリにあるweb.phpを変更します。変更内容は以下の一行をweb.phpに追加しました。

web.phpに一行追加する

Route::get('sayhello', 'ArticleController@sayHello'); 

sayhelloというアクセスに対して、コントローラー名@メソッド名(上のソースの例ではArticleController@syaHello)で実行するメソッドを指定します。



以上でソースファイルの変更はすべてとなります。
いよいよ次にブラウザで表示できるかを確認してみます。



ブラウザで確認

上で変更したソースが正しく動作するかをブラウザで確認します。

Apacheの起動

ブラウザでlocalhostにアクセスするため、Apacheを起動します。
私の環境ではXAMPP導入してApacheを起動させました。
※XAMPPをもしインストールしていなかったら、下記のサイトを参考にインストールしてみてください。
XAMPPのインストール方法

f:id:shiguregaki:20170515234638j:plain




ブラウザ上で動作確認

ブラウザ上で以下のURLにアクセスします。

アクセスのURLlocalhost/<Laravelプロジェクトファイル名>/public/<ルーティングファイルで指定したアクセス先>


下の画像の様に"Hello World!"と表示されていれば、成功です。

f:id:shiguregaki:20170515234647j:plain





まとめ

今回はLaravelを使って画面上に"Hello World"を表示させる方法をまとめました。
URLアクセス=>ルーティングファイル=>コントローラー=>ビュー=>画面表示というおおまかな流れがつかめたと思います。
今後はデータベースやグラフ化などを行っていきますが、この枠組みに従ってまとめていきたいと思います。



次回記事

次回はデータベースに接続するための準備についてまとめたいと思います。

http://shiguregaki.hatenablog.com/entry/p41shiguregaki.hatenablog.com



前回記事

shiguregaki.hatenablog.com




以上!

【投稿アプリ自作(1)】Laravelプロジェクト作成 (Laravel)

f:id:shiguregaki:20170507193535j:plain
Webアプリを自作するためにPHPフレームワークのLaravelを導入することに決めました。
PHP初心者かつLaravel初心者ですが、自分なりにスキルを得るためにLaravelを用いた記事投稿アプリを自作しました。
その過程を備忘録としてまとめます。
最終的にはブラウザを利用して記事投稿画面の表示、ユーザごとの記事投稿数のグラフ化を目指したいと思います。
本記事は連載【投稿アプリ自作】の第一回目で、Laravelプロジェクトの作成方法をまとめます。

目次

ゴール

本記事で目指すのは、下の画像の様に特定フォルダの下にLaravelのプロジェクトファイルを作成することです。

f:id:shiguregaki:20170507193420j:plain

必要なもの

必要なもの 価格(円)
1 PC ピンキリ
備考 インターネット接続可能なこと
2 XAMPP 無料
備考 持っていない場合は、こちらを参照→XAMPPのインストール方法
3 Composer 無料
備考 持っていない場合は、こちらを参照→Composerのインストール方法

事前準備

Laravelをインストールする前にXAMPPやComposerが必要になります。
事前準備としてXAMPPのインストールおよびComposerのインストールをしてください。

XAMPPをインストールする!

XAMPPはPHPSQL,apacheなどのサーバのコンポーネントを1つにまとめたソフトになります。
これからPHPを使ってコーディングをしていくので、PHPをインストールする必要があるのですが、XAMPPをインストールすればapacheも同時にインストールできるため、ローカル環境のブラウザ上でPHPの表示確認ができるようになります。
XAMPPのイントール方法をブログにまとめたので、よろしければご参照ください。

shiguregaki.hatenablog.com


Composerをインストールする!

LaravelのインストールはComposerを使って行うのが一般的なようです。
Cmoposerをインストールしていない場合は、インストールをしてください。
Composerのインストール方法をブログにまとめたので、よろしければご参照ください。

shiguregaki.hatenablog.com


Laravelプロジェクトファイルの作成

コマンドプロンプトを開き、XAMPPのhtdocsフォルダへ移動します。
指定ディレクトリへの移動コマンド>cd XXXXXX
※XXXXXXはXAMPPのhtdocsに変更してください。

XAMPPのhtdocsフォルダ上で、下記のコマンドを入力します。

ComposerでLaravelファイルを作成するコマンド>composer create-project laravel/laravel --prefer-dist <プロジェクトファイル名>

f:id:shiguregaki:20170507193511j:plain

これでLaravelファイルの作成は終了です。非常に簡単ですね。
XAMPPのhtdocsフォルダを確認すると、上で指定したプロジェクト名のフォルダができており、その配下にLaravel関連のファイルが格納されているはずです。

f:id:shiguregaki:20170507193518j:plain

まとめ

本記事ではLaravelでWebアプリを作成するに当たり一番初めに行うLaravelファイルの作成方法をまとめました。
次回はここで作成したLaravelファイルに手を加えて"Hello World"を画面に表示させる方法をまとめたいと思います。

次回記事

http://shiguregaki.hatenablog.com/entry/p39shiguregaki.hatenablog.com


前回記事

今回の記事が最初です。

以上!

御殿場の蕎麦屋 『金太郎』に行ってきました

こんにちは、しぐれがきです!

旅行で御殿場に行った時に、蕎麦が食べたくなって『金太郎』という蕎麦屋に行ってきました。

御殿場には御厨そば(みくりあそば)という由緒正しい(?)そばがあるみたいで、それのざる蕎麦を頼みました。

f:id:shiguregaki:20170507192708j:plain

最近暑くなってきたこともあり、冷えた汁とさっぱりしたそばが非常にマッチしていました。コシがしっかりしてて食感も良かったです。

ところで、みやくりそばってなんだ?と思い調べてみました。

御殿場みくりやそばの定義は

・麺に山芋か自然薯を使っている

御殿場市内で製麺している

御殿場市内の水を使用している

の3つのようです。

もともとは御殿場地方でお祝い事の時に食べられていた御殿場特有のそばみたいです。

御殿場に行ったらぜひ行ってみて下さい!
◾︎店舗名

金太郎

◾︎営業時間

11:00〜22:00


◾︎今回食べたもの

御厨そば ざるそば

790円

麺大盛り

200円

◾︎ホームページ

http://kintaro-soba.com/

以上!

山梨名物のほうとう店 『歩成』

f:id:shiguregaki:20170507192409j:plain
こんにちは、しぐれがきです!
GWの旅行で山梨に来ています!

山梨の郷土料理で有名なほうとうを食べたいと思い、

山梨市駅から車で10分のところにある『歩成』というお店に行きました。
豚入りと鳥入りの2種類のほうとうから選べたので、今回は豚入りほうとうを頼みました。

f:id:shiguregaki:20170507192415j:plain
ワイン豚肉入りほうとう(1,300円(税込))


濃い味噌の汁が太麺のほうとうによく絡んでほんとうに美味しかったです。

◾︎店舗名

御食事処 歩成 本店

◾︎営業時間

【火~金】

11:30~14:30

17:00~24:00

【土・日・祝】

11:30~24:00

ランチ営業、夜10時以降入店可、日曜営業



◾︎休業日

月曜日



◾︎ホームページ

http://www.funari.jp/html/index.html


以上!

鯉のぼりと芝桜が綺麗な 道の駅『南きよさと』に行ってきました。

f:id:shiguregaki:20170507192020j:plain
こんにちは、しぐれがきです。

GWの旅行で山梨に来ています。

車で移動中に綺麗な鯉のぼりが見えたのでふと道の駅『南きよさと』に立ち寄りました。

f:id:shiguregaki:20170507192025j:plain

f:id:shiguregaki:20170507192032j:plain
まるで空の中を泳ぐ鯉のように綺麗な風景でした。ちょうどいい天気だったのも良かったです。
また芝桜もかなり広い範囲で綺麗に咲いてました。

f:id:shiguregaki:20170507192037j:plain

食事処やお土産やさんは9時くらいからやってるみたいで残念ながら私が行った時には開いてなかったです…

f:id:shiguregaki:20170507192042j:plain

f:id:shiguregaki:20170507192047j:plain

この道の駅は鯉のぼりと芝桜が特徴のようです。ホームページを見ると、BBQもできるみたいで、お花見とかにも使えそうです。

GWに行けば、とても綺麗な景色がみえるのでオススメです。
◾︎場所

道の駅 『南きよさと』

◾︎ホームページ

www.alps-hs.co.jp



以上!