【教室変更・初心者向け】Laravel（PHP フレームワーク）入門を受講してきました。

今回は、Laravelの準備とMySQLの準備?を学びました。次回は他の項目も学びたいと思います。

開催日時

2019年04月09日

イベントURL

biosbootcamp.connpass.com

本ブログでこんな人に向けて書かれています

windows macOS Linux 色々なOSでもネット環境があればLaravelの開発がしたい。
Cloud9でLaravel開発の準備(Laravel ・ MySQL)ができます。

講義内容

今回はCloud9で作成します。

Cloud9は、Amazon Web Services(以下、AWS) によって買収され、現在では事前に
AWS Cloud9（ブラウザのみでコードを記述、実行できるクラウドIDE）｜AWS
にある、AWS アカウントを今すぐ無料で作成 >> をクリックして、AWSのアカウントを作成します。 ※ クレジットカードが必要です。

続いて、作ったアカウントでCloud9にloginします。
https://c9.io/login

Workspace の作成

ダッシュボードの真ん中にあるWorkspacesという文字を確認したら、
Create a new workspace をクリックします。

Create a new workspace が表示されたら、

Workspace nameに作りたいproject name(英数字)を入れます。
Team (項目があったら)
Don't set a team for this workspaceを選択します。
Hosted workspaceはPrivateまたはPublicを選択します。
Choose a templateはphpを選択します。

最後に、Create workspace をクリックしてワークスペースを作成します。

Cloud9の画面構成

この画面をCloud9のワークスペースとします。

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

Run ProjectがStopになったことを確認します。

ターミナルにApache & PHP - Runningタブが追加された事を確認します。

中にStarting Apache httpd, serving https://[ワークスペース名]-[ユーザー名].c9users.io/.が表示されているかと思います。

ターミナルの中でクリックし、https://[ワークスペース名]-[ユーザー名].c9users.io/. をマウスカーソルを合わせると、指マークになると思います。クリックしてみてください。

セレクトボックスが表示され、Openをクリックします。

f:id:firebasewata:20190410232436p:plain

こちらが表示されたら、Open the App ボタンをクリックします。

Index of /  
[ICO]   Name    Last modified   Size    Description  
[   ]   README.md   2017-08-31 12:41    1.0K     
[   ]   hello-world.php 2017-08-31 12:41    261  
[   ]   php.ini 2017-08-31 12:41    67K  
Apache/2.4.7 (Ubuntu) Server at [プロジェクト名]-[ユーザー名].c9users.io Port 443

こちらが表示されたら、hello-world.phpをクリックします。

Hello world from Cloud9!

こちらが表示されたらOKです。

Cloud9のワークスペースを再度表示します。(GoogleChromeだとタブが複数できているので一つ前だと思います。)

メニューバーにあるStopをクリックします。

ターミナルのタブを、一番左にあるbash - “[ユーザー名]-[プロジェクト名]-[数字]”タブをクリックします。

Cloud9の環境確認

PHPのバージョン確認

$ php -v

PHP 5.5.9-1ubuntu4.22 (cli)

Composer のバージョン確認

Composer

$ composer

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

と表示されたらOKです。

ちなみに Composer とはなんでしょうか?

composer は　ライブラリ(パッケージ)管理ツールです。
ライブラリ(パッケージ)とは　phpの開発を楽にする処理・機能の集まりをライブラリ(パッケージ)といいます。

Cloud9のPHPのバージョンアップ

Cloud9のターミナルにあるbashタブを開きます。

最新レポジトリの追加

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

途中で、

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

と出るのでエンターキーをクリックします。

解説

sudo : スーパーユーザー権限でコマンドを実行

add-apt-repository : 最新のリポジトリを追加

ppa:ondrej/php : Personal Package Archives の ondrejにあるphp

パッケージリストの更新

$ sudo apt-get update

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

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

Do you want to continue? [Y/n]

と表示されるので Yキーを入力後　エンターキーを入力します。

PHP5を無効化

$ sudo a2dismod php5

PHP7 の有効化

$ 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キーを入力後、エンターキーをクリックします。

PHP確認

$ php -v

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

無事にバージョンアップできたことを確認します。

フレームワークの準備

Laravel のインストーラーをダンロード

 $ composer global require "laravel/installer"

Laravelのプロジェクト作成

$ composer create-project laravel/laravel cms 5.5.* --prefer-dist

Laravelのプロジェクトの完成を確認

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

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

https://[プロジェクト名]-[ユーザー名].c9users.io/.　をクリックします。

Openをセレクトボックスより選びます。

新しいブラウザーのタブが表示され、

Index of /  
[ICO]   Name    Last modified   Size    Description  
[   ]   README.md   2017-08-31 12:41    1.0K     
[DIR]   cms/    2019-04-10 XX:XX    -   
[   ]   hello-world.php 2017-08-31 12:41    261      
[   ]   php.ini 2017-08-31 12:41    67K  
Apache/2.4.7 (Ubuntu) Server at [プロジェクト名]-[ユーザー名].c9users.io Port 443

cms/ → resources/ → views/の順にクリックします。

最後に、 welcome.blade.php をクリックすると。

Laravelのwelcome画面が表示されます。

サーバーを停止する

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

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

Laravelのwelcome画面のurlは

https://[プロジェクト名]-[ユーザー名].c9users.io/cms/resources/views/welcome.blade.php

で表示されます。これを

https://[プロジェクト名]-[ユーザー名].c9users.io/で表示できるようにします。

conf設定ファイルの変更

Cloud9のターミナル(bash - "[ユーザー名]-[プロジェクト名]-6865378" )タブを開き、

$ pwd

/home/ubuntu/workspace

同じであることを確認します。

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

<VirtualHost *:8080>
    DocumentRoot /home/ubuntu/workspace
    ServerName https://${C9_HOSTNAME}:443

    LogLevel info

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    <Directory /home/ubuntu/workspace>
        Options Indexes FollowSymLinks
"/etc/apache2/sites-enabled/001-cloud9.conf" 18L, 465C

キーボードの英数キーにしたあとiキーをクリックしてvimエディターのINSERTモードに変更します。

この中から DocumentRoot /home/ubuntu/workspace

→

DocumentRoot /home/ubuntu/workspace/cms/public

に変更します。

vimエディターの保存方法は、escキーをクリックしたあと:wqと入れてenterキーをクリックします。

cms ディレクトリに移動

$ cd cms

cms ディレクトリにいる事を確認

$ pwd

/home/ubuntu/workspace/cms

composerをupdate

$ composer update

解説

composer update：composer.jsonをもとに各ファイルを最新版にアップデートします。

ドキュメントルート変更後の確認

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

clound9ターミナルにある、Apache & PHP - Runningタブを開きクリックします。

https://[プロジェクト名]-[ユーザー名].c9users.io/. → Open の順にクリックします。

https://[プロジェクト名]-[ユーザー名].c9users.io/ でLaravel のwelcome画面が表示されて事を確認します。

cloud9のメニューバーにある、Stop をクリックしてApache &phpを停止します。

mysqlを使ってみる

Cloud9のファイルツリーから[ワークスペース名]/cms/.env をダブルクリックして開く修正箇所は8行目から13行目にあります。

DB_CONNECTION=mysql  
DB_HOST=localhost  
DB_PORT=3306  
DB_DATABASE=c9  
DB_USERNAME=ユーザー名  
DB_PASSWORD=

DB_USERNAME=ユーザー名は、Cloud9のユーザー名です。

にします。

mysqlのデータベースに接続

Cloud9のターミナルのBashタブより、

$ mysql-ctl cli

ターミナルが $ から mysql> になったことを確認します。

データベースに接続

mysql> use c9;

Database changed

データベース一覧を表示

mysql> show databases;

Cloud9のc9データベースがあることを確認します。c9データベースに接続します。

データベースの切断

mysql> exit;

データベースマイグレーション

データベースマイグレーションとは、DBに保存されたデータを保持したまま、テーブルの作成やカラムの変更などを行うことができます。

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

上記の階層にある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()
    {
        //
    }
}

マイグレーションファイルの作成

マイグレーションは、マイグレーションファイルをもとに行われるのでマイグレーションファイルを作成します。

$ php artisan make:migration [ファイル名] --create=[テーブル名]で作成できます。

$ php artisan make:migration test --create=test

Created Migration: 2019_04_10_100101_test

マイグレーションファイルの修正

Cloud9のファイルツリーより、[ワークスペース名]/cms/database/migrations にある先ほど作った、マイグレーションファイルを修正します。

2019_04_10_100101_test.php

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class Test extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('test', function (Blueprint $table) {
            $table->increments('id');
            $table->string('item_name');
            $table->integer('price');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('test');
    }
}

マイグレーションの実行

 $ php artisan migrate

テーブルが完成したか確認するためデータベースに接続

$ mysql-ctl cli

データベースの照会

mysql> show databases;

データベースへ接続する

mysql> use c9;