LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@miriwo(大川 峻)inBOOM TECH CAFE

Laravel CRUD処理を使った投稿アプリを作成する その7 問い合わせフォームの作成

Last updated at Posted at 2020-08-26

目的

  • アプリを作成する上で基本となるCRUD処理を有したLaravelアプリをチュートリアル的に作成する方法をまとめる

実施環境

  • ハードウェア環境
項目 情報
OS macOS Catalina(10.15.5)
ハードウェア MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports)
プロセッサ 2 GHz クアッドコアIntel Core i5
メモリ 32 GB 3733 MHz LPDDR4
グラフィックス Intel Iris Plus Graphics 1536 MB
  • ソフトウェア環境
項目 情報 備考
PHP バージョン 7.4.3 Homwbrewを用いて導入
Laravel バージョン 7.0.8 commposerを用いてこちらの方法で導入→Mac Laravelの環境構築を行う
MySQLバージョン 8.0.19 for osx10.13 on x86_64 Homwbrewを用いてこちらの方法で導入→Mac HomebrewでMySQLをインストールする

前提条件

前提情報

  • ソースコードはこちら→https://github.com/miriwo0104/laravel_crud/tree/master
  • DockerやAWSなどは使用せずにMacのローカルに実施環境と同じLaravel開発環境を構築して実施する。
  • チュートリアルで実際に筆者が作成したソースコードをGitHubにて公開予定である。
  • CRUD処理の作成完了を最短目標にしてバリデーションなどは後々設定することとする。
  • 実施環境と同じ環境がDockerやAWSで用意できるなら都度読み替えていただければ実施が可能だと思う。
  • 公式ドキュメントと一冊の技術書を元に本記事を記載する。
  • メール送信を用いた問い合わせフォームを作成するがメールは実際には送信されず、Laravelのログにメールの内容が記載される。
  • メールは送信されないが、メール宛先は「admin@example」とする。

この記事の読後感

  • 問い合わせ内容がメールで送信される問い合わせフォームの作成を行うことができる。

概要

  1. .envファイルの修正
  2. ルーティング情報の記載
  3. コントローラファイルの作成と記載
  4. ビューファイルの作成
  5. メーラブルクラスファイルの作成と記載
  6. メール用ビューファイルの作成
  7. 確認

詳細

  1. .envファイルの修正

    1. laravel_crudディレクトリで下記コマンドを実行して.envファイルを開く。

      $ vi .env

    2. 下記の用に修正する。

      laravel_crud/.env
      MAIL_DRIVER=log

    3. .envファイルの全内容を下記に記載する。

      laravel_crud/.env
      APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:PhtimgDQlzxAtGZFzq9THwWFHHGdZuM5Sxdw71bD6ew=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_crud_data
DB_USERNAME=root
DB_PASSWORD=MySQLのrootのパスワード

BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_DRIVER=log
MAIL_HOST=127.0.0.1
MAIL_PORT=1025
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=admin@gmail.com
MAIL_FROM_NAME=admin
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_PRETEND=false

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
  2. ルーティング情報の記載

    1. laravel_crudディレクトリで下記コマンドを実行してルーティングファイルを作成する。

      $ vi routes/web.php

    2. 開いたルーティングファイルを下記のルーティング情報を追記する。

      laravel_crud/routes/web.php
      Route::get('/inquiry/input', 'InquiryController@input');
Route::post('/inquiry/send', 'InquiryController@send');

    3. 下記にルーティングファイルの全体内容を記載する。

      laravel_crud/routes/web.php
      <?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');
// 下記を追記
Route::get('/inquiry/input', 'InquiryController@input')->name('inquiry.input');
Route::post('/inquiry/send', 'InquiryController@send')->name('inquiry.send');
// 上記までを追記
Route::get('/input', 'ContentController@input')->name('input');
Route::post('/save', 'ContentController@save')->name('save');
Route::get('/output', 'ContentController@output')->name('output');
Route::post('/delete', 'ContentController@delete')->name('delete');
Route::get('/edit/{content_id}', 'ContentController@edit')->name('edit');
Route::post('/update', 'ContentController@update')->name('update');

    4. 保存して閉じる。

  3. コントローラファイルの作成と編集

    1. laravel_crudディレクトリで下記コマンドを実行してメール送信用のコントローラファイルを作成する。

      $ php artisan make:controller InquiryController

    2. laravel_crudディレクトリで下記コマンドを実行して先に作成したコントローラファイルを開く。

      $ vi app/Http/Controllers/InquiryController.php

    3. 開いたコントローラファイルを下記の様に修正する。

      laravel_crud/app/Http/Controllers/InquiryController.php
      <?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
//下記を追記する
use Illuminate\Support\Facades\Mail;
use Illuminate\Support\Facades\Auth;
use App\Mail\SendMail;
//上記までを追記する

class InquiryController extends Controller
{
    //下記を追記する
    public function input()
    {
        $user_infos = Auth::user();
        return view('inquiries.input', [
            'user_infos' => $user_infos,
        ]);
    }

    public function send(Request $request)
    {
        $inquiry_content = $request->all();
        Mail::to('admin@example')->send(new SendMail($inquiry_content));
        return redirect(route('home'));
    }
    //上記までを追記する
}

    4. 保存して閉じる

  4. ビューファイルの作成と編集

    1. アプリ名ディレクトリで下記コマンドを実行してビューファイルを格納するディレクトリを作成する。

      $ mkdir resources/views/inquiries

    2. laravel_crudディレクトリで下記コマンドを実行してビューファイルを開く。

      $ vi resources/views/inquiries/input.blade.php

    3. 開いたビューファイルを下記の様に修正する。

      laravel_crud/resources/views/inquiries/input.blade.php
      <form action="{{ route('inquiry.send') }}" method="POST">
    @csrf
    <p>お問い合わせ内容</p>
    <textarea name="content" cols="30" rows="10"></textarea>
    <p>お客様のお名前</p>
    <input type="text" name="name" value="{{ $user_infos['name'] }}">
    <p>お客様のメールアドレス</p>
    <p>{{ $user_infos['email'] }}</p>
    <input type="hidden" name="email" value="{{ $user_infos['email'] }}">
    <br>
    <input type="submit" value="送信">
</form>
  5. メーラブルクラスファイルの作成と記載

    1. laravel_crudディレクトリで下記コマンドを実行してメール送信専用のクラスが記載されたファイルを作成する。

      $ php artisan make:mail SendMail

    2. laravel_crudディレクトリで下記コマンドを実行して先に作成したメール送信専用のクラスファイルを開く

      $ vi app/Mail/SendMail.php

    3. 開いたクラスファイルを下記の様に修正する。

      laravel_crud/app/Mail/SendMail.php
      <?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;

class SendMail extends Mailable
{
    use Queueable, SerializesModels;
    // 下記を追記する
    public $inquiry_content;


    /**
     * Create a new message instance.
     *
     * @return void
     */
    // 下記を修正する
    public function __construct($inquiry_content)
    {
        // 下記を追記する
        $this->inquiry_content = $inquiry_content;
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        // 下記を追記する
        return $this
            //メールの件名
            ->subject('inquiry mail')
            //メールとして表示したいビューファイル
            ->view('mails.inquiry_mail')
            ->with([
                'inquiry_content' => $this->inquiry_content,
            ]);
        // 上記までを追記する
    }
}
  6. メール用ビューファイルの作成

    1. laravel_crudディレクトリで下記コマンドを実行してメールとして表示したいビューファイルを格納するディレクトリを作成する。

      $ mkdir resources/views/mails

    2. アプリ名で下記コマンドを実行してメールとして表示したいビューファイル作成する。

      $ vi resources/views/mails/inquiry_mail.blade.php

    3. 開いたメールとして表示したいビューファイルを下記の様に編集する。

      laravel_crud/resources/views/mails/inquiry_mail.blade.php
      下記の内容のお問い合わせメールです。

{{ $inquiry_content['content'] }}

# 送信ユーザ名
{{ $inquiry_content['name'] }}

# 送信ユーザメールアドレス
{{ $inquiry_content['email'] }}
  7. 確認

    1. laravel_crudディレクトリで下記コマンドを実行してローカルサーバを起動する。

      $ php artisan serve

    2. 下記にアクセスしてログインもしくはユーザ登録を行う

    3. 下記にアクセスし、下記画像の画面がブラウザにて表示されることを確認する。（「お客様のお名前」と「お客様のメールアドレス」にはログイン中のユーザの情報が記載されていること。）

    4. 「お問い合わせ内容」下のテキストエリアに任意の内容を入力し、「送信」をクリックする。

      127_0_0_1_8000_inquiry_input-2.png

    5. http://127.0.0.1:8000/homeにリダイレクトすることを確認する。

    6. laravel_crudディレクトリで下記コマンドを実行してログファイルを開く。

      $ vi storage/logs/laravel.log

    7. ログファイルの最終行付近に下記の様にメールの内容が記載されていれば作業完了である。

      laravel_crud/storage/logs/laravel.log
      Date: Tue, 25 Aug 2020 09:37:02 +0000
Subject: inquiry mail
From: 
To: admin@example
MIME-Version: 1.0
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: quoted-printable

下記の内容のお問い合わせメールです。

これはテストです

# 送信ユーザ名
miriwo

# 送信ユーザメールアドレス
miriwo0517@gmail.com
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?