【初心者向け】Laravel(PHPフレームワーク)入門②を受けてみた!

【初心者向け】Laravel(PHPフレームワーク)入門②

2019年04月16日

BIOS Bootcampという勉強会に参加してきました!

前回に続く、Cloud9でLaravelを勉強したいという人たちの集まり。

次回は、デジハリを出て、もくもく会pythonブロックチェーンを学ぶそうです。

本日のお題、このブログの終わりにはCloud9で

  • アプリにLOGINする機能
  • アプリにREGISTER(ユーザー登録) する機能
  • ログアウト機能
  • blogs add(ブログ)を投稿する機能

以上の4っつの機能があるブログができます。

また、ログイン中のみblogsが表示できる機能に

早速、cloud9にログインします。

https://c9.io/login

ワークスペースの作成

画面真ん中にある、Workspacesの下にある、Create a new workspaceをクリックします。

Create a new workspaceが表示されたら、作りたいワークスペース情報を入れます。

Workspace nameのyour-project-nameに作りたいプロジェクト名を入れます。

Descriptionは、プロジェクトの説明を入れても入れなくても大丈夫です。

Teamは、項目があれば、Don't set a team for this workspaceをセレクトボックスより選びます。

Hosted workspaceはPrivateまたは、Publicを選びます。

Choose a templateは、PHPを選択します。

最後にCreate workspaceボタンをクリックします。

Cloud9のPHPバージョンを確認

ワークスペースにあるターミナルより、bash - “[ユーザー名]-[ワークスペース名]-0000000” タブがブラウザー下部にあると思います。$の後に入力します。

$ php -v

PHP 5.5.9-1ubuntu4.22 (cli) (built: Aug 4 2017 19:40:28)

Composerが入っているか確認

$ composer

Composer version 1.5.1 2017-08-09 16:07:22

PHPのバージョンアップ

$ sudo add-apt-repository ppa:ondrej/php

Press [ENTER] to continue or ctrl-c to cancel adding it

ENTER キーをクリックします。

$ sudo apt-get update
$ sudo apt-get install libapache2-mod-php7.2

Do you want to continue? [Y/n]

Yキー→ENTERキーの順にクリックします。

$ sudo a2dismod php5
$ sudo a2enmod php7.2
$ sudo apt-get install php7.2-dom php7.2-mbstring php7.2-zip php7.2-mysql

Do you want to continue? [Y/n]

Yキー→ENTERキーの順にクリックします。

$ php -v

PHP 7.2.17-1+ubuntu14.04.1+deb.sury.org+3 (cli) (built: Apr 10 2019 11:00:00) ( NTS )

フレームワークの準備

PHPのバージョン指定をすることができます。今回は、LTSのLaravel5.5をインストールしています。

$ composer global require "laravel/installer"
$ composer create-project laravel/laravel cms 5.5.* --prefer-dist

環境変数の設定

Cloud9のファイルツリー[ワークスペース名]/cms / .env ファイルを修正します。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=c9
DB_USERNAME=njtakayuki0816
DB_PASSWORD=

ドキュメントルートの変更

$ sudo vim /etc/apache2/sites-enabled/001-cloud9.conf

DocumentRoot /home/ubuntu/workspace

から

DocumentRoot /home/ubuntu/workspace/cms/public

に変更します。

解説

$ sudo vim /etc/apache2/sites-enabled/001-cloud9.conf コマンドを入力すると

sudoは、ルートユーザー権限でsudo 以下のコマンドを実行します。

  • vim とはテキストエディターです。

/etc/apache2/sites-enabled/001-cloud9.conf は

/etc/apache2/sites-enabled/ 以下にある、 001-cloud9.confを変更します。

.conf ファイルは設定情報が記述されています。

vi エディターはi キーをクリックすることで入力モードにします。

矢印キーで修正したいところにカーソルを合わせて修正します。

esc キー をクリックして :wq! で保存してviエディターを終了します。

AppServiceProviderの修正

Cloud9のファイルツリーより

[ワークスペース名]/cms/app/Providers/AppServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //
        Schema::defaultStringLength(191);
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

composerのupdate

$ pwd 

/home/ubuntu/workspace

$ ls

README.md cms/ hello-world.php php.ini

cms/ があることを確認します。 続いてcms/に移動します。

$ cd cms
$ composer update

phpmyadminのインストール

$ phpmyadmin-ctl install

確認

cloud9のメニューにある Run Projectボタンをクリックします。

cloud9のターミナルが、Apache & PHP - Running タブが開き、

Starting Apache httpd, serving https://[ワークスペース名]-[ユーザー名].c9users.io/. をクリックすると

Openをクリックします。

Laravel のwelcome画面が表示されたことを確認します。

サーバーの停止

Cloud9のメニューより、Stop ボタンをクリックします。

scaffoldでCRUD一発生成

Laravelのscaffoldとは、CRUD ... Create(生成)、Read(読み取り)、Update(更新)、Delete(削除)の機能を簡単に作成することができます。

階層の確認

$ pwd

/home/ubuntu/workspace/cms

cmsにいることを確認します。

パッケージのインストール

$ composer require 'laralib/l5scaffold' --dev

解説

'laralib/l5scaffold’という(パッケージ)を --dev(開発環境)にcomposer require(インストール)します。

app.phpの修正

cms/config/app.phpファイルの ’providers' => [ に一行追加します。

    'providers' => [
         /* ここは何行か記載があります。 */
        App\Providers\RouteServiceProvider::class, /* この下に追加 */
        Laralib\L5scaffold\GeneratorsServiceProvider::class, /* ここを追加 */

    ],

scaffoldを使用するために設定を修正

2つファイルを変更します。

[ワークスペース名]/cms/vendor/laralib/l5scaffold/src/Commands/ScaffoldMakeCommand.phpの3箇所を修正します。

5行目

use Illuminate\Console\AppNamespaceDetectorTrait;

use Illuminate\Console\DetectsApplicationNamespace;

にします。

-21行目

use AppNamespaceDetectorTrait, MakerTrait;

use DetectsApplicationNamespace, MakerTrait;

246行目 - 249行目の後に

        return $names[$config];


    }

/ 以下の行を追加する /

public function handle() { return $this->fire(); }

次のファイルを修正します。

[ワークスペース名]/cms/vendor/laralib/l5scaffold/src/Makes/MakeController.phpの二つの箇所を修正します。

4行目
use Illuminate\Console\AppNamespaceDetectorTrait;

use Illuminate\Console\DetectsApplicationNamespace;

に変更します。

13行目
use AppNamespaceDetectorTrait, MakerTrait;

use DetectsApplicationNamespace, MakerTrait;

に変更します。

php artisan

$ php artisan make:scaffold blog --schema="title:string, price:integer, body:text, published:datetime"

解説
artisan → アルチザンと呼びます。
Laravel を構成しているコマンとラインインターフェースの名前です。
make:scaffold blog → blogというスキャフォールドアプリを作成します。
--schema="title:string, price:integer, body:text, published:datetime" → --schema オプションといいテーブルの作成や操作をサポートします。
title:string, string型のtitleというカラム
price:integer, integer型のpriceというカラム
body:text, text型のbodyというカラム
published:datetime datetime型のpublishedというカラム

cms/routes/web.phpに一行追加

Route::resource('/blogs’, 'BlogController');

これを最終行(18行目)に追記する。

Migrationコマンドを実行

$ php artisan migrate

ログイン機能を追加

$ php artisan make:auth

Authentication scaffolding generated successfully.

ブラウザーより確認します。

Cloud9のメニューバーにあるRun Projectをクリックします。

Cloud9のターミナルにある、Apache & PHP - Runningタブより、

https://[ワークスペース名]-[ユーザー名].c9users.io/. をクリックしてOpenをクリックします。

Laravel の welcome 画面が表示されたら、

https://[ワークスペース名]-[ユーザー名].c9users.io/login とブラウザーのurlの後にloginを追記してください。

cssが反映しない?

Laravelの仕様のようで、httpsからhttpに変えて見てみます。

ユーザー登録画面の確認

ユーザーログイン画面の確認が完了したら、ユーザー登録画面(Register)を確認します。

Login画面にある メニューバーにあるRegisterをクリックします。

Register 画面が表示できたらOKです。

ユーザーの作成

Register 画面より、Name、E-Mail Address、Password、Confirm Password(パスワードの確認)を入力して、 Registerボタンをクリックします。

home画面

ユーザーが登録されると、URL の最後が home になります。

Blog一覧画面

http://[ワークスペース名]-[ユーザー名].c9users.io/blogs

urlにblogsを足すと一覧が表示されます。

  • Create ボタンをクリックしてブログ登録画面を表示させます。

Blogs/Create画面

Title →【教室変更・初心者向け】Laravel(PHPフレームワーク)入門

Price → 100

Body → テスト

Published → 2019/04/19

を入れて、Create ボタンをクリックします。

登録すると Blogs一覧画面にBlogが登録されます。

Blogs の確認

urlの後にphpmyadmin を入れます。

https://[ワークスペース名]-[ユーザー名].c9users.io/phpmyadmin/

ユーザー名のみ入れて、実行ボタンをクリックします。

左側のメニューにあるc9をクリックします。

blogsをクリックします。

画面真ん中に投稿した記事があることを確認します。

以上で終わりです。

強くてニューゲーム

各ページ間の遷移 ユーザーをログアウトしたらBlogsの投稿画面が表示ないようにします。

今回はログアウト時の対応をします。

まずはlogoutします。

http://[ワークスペース名]-[ユーザー名].c9users.io/home

より右上にあるユーザー名をクリックして、Logoutをクリックします。

ログアウトするとLaravelのwelcome画面が表示されたかと思います。

http://[ワークスペース名]-[ユーザー名].c9users.io/blogs

urlに blogsを追記してみてください。

見れますね。このページは誰もがurlを入れるとみれてしまいます。

blogsページは投稿側のダッシュボード的役割を果たします。

なのでログアウトした場合は見えないようにします。

[ワークスペース名]/cms/app/Http/Controllers/BlogController.php

class BlogController extends Controller {}

BlogController 内に、

public function __construct()
    {
        $this->middleware('auth');
    }

を追記する。

logout時の確認

Cloud9のメニューバーにあるRun Projectボタンをクリックします。

ブラウザーより、

https://[ワークスペース名]-[ユーザー名].c9users.io/blogs

を表示しようとするとLogin画面にリダイレクトされます。

ログインしてみましょう。

http://[ワークスペース名]-[ユーザー名].c9users.io/blogs

が見えます。