【初心者向け】Laravel(PHPフレームワーク)入門②を受けてみた!
2019年04月16日
BIOS Bootcampという勉強会に参加してきました!
前回に続く、Cloud9でLaravelを勉強したいという人たちの集まり。
次回は、デジハリを出て、もくもく会やpython、ブロックチェーンを学ぶそうです。
本日のお題、このブログの終わりにはCloud9で
- アプリにLOGINする機能
- アプリにREGISTER(ユーザー登録) する機能
- ログアウト機能
- blogs add(ブログ)を投稿する機能
以上の4っつの機能があるブログができます。
また、ログイン中のみblogsが表示できる機能に
早速、cloud9にログインします。
ワークスペースの作成
画面真ん中にある、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
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
が見えます。