不惑にしてまだ何者でもない者のブログ

Arduino関連、Raspberry Pi関連、プログラミング学習

paizaラーニング『Laravel入門編4: 実用的なLaravelアプリを作ろう (全13回)』を受講してみた

2021-02-23 13:29:51 | paiza

『Laravel入門編4: 実用的なLaravelアプリを作ろう (全13回)』


そうだ！前回の途中からGitを使って管理するようにしたんだった。
今回もGitを使う予定だったのに、チャプター３からの利用になってしまった。

どうやら最初のコミットは空で作るといいらしい。

# リポジトリ作成
git init
# 最初のコミット
git commit --allow-empty -m "first commit"


メモ

＃01:アプリの概要を整理しよう

  • オススメのお店を投稿できる「ランチマップ」アプリの機能を整理する。
  • 画面構成
    • 一覧画面：index.blade.php
    • 詳細画面：show.blade.php
    • 新規画面：new.blade.php
    • 更新画面：edit.blade.php
  • ルーティング
URL
HTTP
メソッド
呼び出す機能
コントローラ
メソッド
/shops
GET
一覧表示
index()
/shop/{id}
GET
詳細表示
show()
/shop/new
GET
新規作成
create()
/shop
POST
保存
store()
/shop/edit/{id}
GET
編集
edit()
/shop/update/{id}
POST
更新
update()
/shop/{id>
DELETE
削除
destoy()

  • 作業手順

    • アプリケーションディレクトリを準備する

    • モデルとコントローラを用意する

    • お店とカテゴリのテーブルを関連付ける

    • 共通テンプレートにBootstrapを導入する

    • 詳細ページを作る

    • 新規投稿フォームを作る

    • 投稿内容を保存する

    • 編集フォームを作る

    • 編集内容を更新する

    • お店情報を削除する

    • Googleマップを表示する

＃02:アプリケーションディレクトリを用意しよう

  • アプリケーション用ディレクトリを自動生成する
    $ laravel new lunchmap
  • データベースを用意して、.envファイルを編集する。

＃03:モデルとコントローラを用意しよう

  • モデルファイルを作成
    $ php artisan make:model Category -m
    $ php artisan make:model Shop -m -c -r
  • カテゴリーのマイグレーションファイルにカラムを追加
    database/migrations/20xx_xx_xx_xxxxxxxx_create_categories_table.phpの編集
    • $table->string('name');を
  • Shopsマイグレーションファイルにカラムを追加
    database/migrations/20xx_xx_xx_xxxxxxxx_create_shops_table.php
    • $table->string('name');
      $table->string('address');
      $table->integer('category_id');
  • マイグレーション実行
    $ php artisan migrate

＃04:お店とカテゴリのテーブルを関連付けよう

  • Shopモデルにリレーションを設定
    app/Models/Shop.phpの編集
  • phpmyadminでサンプルデータを投入
    • categoriesテーブル
      INSERT INTO categories(name)
      VALUES
      　('イタリアン'),
      　('中華'),
      　('和食');
    • shopsテーブル
      INSERT INTO shops(name,address,category_id)
      VALUES
      　('パイザ亭', '東京都港区南青山3丁目', 1),
      　('ラーメンLaravel', '東京都港区東青山', 2),
      　('そばの霧島', '東京都港区西青山', 3);

＃05:お店の一覧ページを作ろう

  • お店一覧のルーティングを定義する
    routes/web.phpの編集
    • Route::get('/shops', 'ShopController@index')->name('shop.list');
  • コントローラにお店一覧を記述する
    app/Http/Controllers/ShopController.phpの編集
  • お店一覧のビューを作成する
    resources/views/index.blade.phpを新規作成

＃06:共通テンプレートにBootstrapを導入しよう

  • layout.blade.phpを分離する
    resources/views/layout.blade.phpの新規作成
    • <body>
      　@yield('content')
      </body>
  • index.blade.phpに、セクションを追加
    resources/views/index.blade.phpの編集
    • @extends('layout')
      @section('content')
      　（処理内容）
      @endsection
  • 共通テンプレートにBootstrapを割り当てる
    resources/views/layout.blade.phpの編集

＃07:お店の詳細ページを作ろう

  • ルーティングを設定する
    routes/web.phpの編集
    • Route::get('/shop/{id}', 'ShopController@show')->name('shop.detail');
  • コントローラを記述する
    app/Http/Controllers/ShopController.phpの編集
    • public function show($id)
  • ビューを追加する
    resources/views/show.blade.phpの新規作成
  • お店一覧をテーブルタグにして、リンクを追加
    esources/views/index.blade.phpの編集

＃08:新規投稿フォームを作ろう

※ Laravelでフォームを使用するときは、「laravelcollective/html」というライブラリのインストールを忘れずに。
$ composer require "laravelcollective/html"
  • ルーティングを設定する
    routes/web.phpの編集
    • Route::get('/shop/new', 'ShopController@create')->name('shop.new');
      Route::post('/shop', 'ShopController@store')->name('shop.store');
  • コントローラのcreate()を記述する
    app/Http/Controllers/ShopController.phpの編集
  • 新規投稿フォームのビューを追加する
    resources/views/new.blade.phpの新規作成

＃09:投稿フォームの内容を保存しよう

  • コントローラのstore()を記述する
    app/Http/Controllers/ShopController.phpの編集
    • public function store(Request $request)
  • 一覧ページから新規投稿フォームにリンクする
    resources/views/index.blade.phpの編集

＃10:お店の編集フォームを作ろう

  • ルーティングを設定する
    routes/web.phpの編集
    • Route::get('/shop/edit/{id}', 'ShopController@edit')->name('shop.edit');
      Route::post('/shop/update/{id}', 'ShopController@update')->name('shop.update');
  • コントローラのedit()を追記
    app/Http/Controllers/ShopController.phpの編集
    • public function edit($id)
  • editビューを作成する
    resources/views/edit.blade.phpの新規作成

＃11:編集内容を更新しよう

  • コントローラのupdate()を追記
    app/Http/Controllers/ShopController.phpの編集
    • public function update(Request $request, $id, Shop $shop)
  • 詳細ページからリンク
    resources/views/show.blade.phpの編集

＃12:お店の情報を削除しよう 

  • ルーティングを設定する
    routes/web.phpの編集
    • Route::delete('/shop/{id}', 'ShopController@destroy')->name('shop.destroy');
  • コントローラにdestroyメソッドを追記
    app/Http/Controllers/ShopController.phpの編集
    • public function destroy($id)
  • 詳細ページに削除ボタンを追加
    resources/views/show.blade.phpの編集

＃13:Googleマップを表示しよう

  • 住所に合わせた地図をLunchmapアプリに表示するため、詳細ページにGoogleマップを組み込む。
    → Google Maps APIを使用する。
  • Google Maps API
  • APIとは
    APIとは、Application Programming Interfaceの略で、プログラムから別のプログラムの機能を呼び出すために用意された命令や関数のこと。
  • APIキーの取得手順
    • 1. Google Developers Consoleにアクセスする

      Google Developers Console
      https://console.developers.google.com/
    • 2. プロジェクトを作成を選択
    • 3. Google APIが表示されたら、Google Maps APIから「Google Maps Embed API」を選択
    • 4. 「有効にする」をクリック
    • 5. 「認証情報を作成」をクリックして、「必要な認証情報」ボタンをクリック
    • 6. 表示されたAPIキーを記録する

      ※特定のWebサービスだけから利用できるよう、「API利用制限」を設定することをオススメします。
      ※この手順や利用範囲はGoogle側で変更される場合があります。
  • 詳細ページのビューにマップを追加
    resources/views/show.blade.phpの編集
    • <iframe id="'map'<br">　src='https://www.google.com/maps/embed/v1/place?key=[APIキー]={{ $shop->address }}'
      　width='100%'
      　height='320'
      　frameborder='0'>
      </iframe>

認定証

「ジャッジに時間がかかっています」ってヤツで何度落ちたことかっ！？😖 
どっち側の問題なんだ？😵
サーバー側なのか、こちらのPCやネットワーク側の問題なのか？

まぁ内容的には結構面白かったけど😜 
Google Mapの表示とか。

なんだかんだで、チャプター12終了時点で認定証を取得。


学習ステータス


おぉ〜！なんか確かに華麗な気がするっ！？😁 


最新の画像［もっと見る］

コメントを投稿