【Laravelアンケート制作】同意画面を設計する
こんにちは。あきのりです。
PHPやLaravelのフリーのプログラマとして活動しています。
この記事は「Laravelでアンケートフォームを作ってみよう！」の最初のステップです。
コントローラーの作成と同意画面の作成を解説していきます。
コントローラーの作成とルーティングの設定
まずは、同意画面を出力する操作とURLの設定をしていきます。
ターミナルで以下のコマンドを実行。
php artisan make:controller FormControllerこれでapp/Http/Controllersにファイルが追加されます（これはコントローラーと呼ばれます）。
そして、以下のように編集しましょう。
$lg;?php
namespace App\Http\Controllers;
use App\Mail\NotificationMail;
use App\Mail\ThankyouMail;
use App\Models\Form;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;
use Illuminate\Support\Facades\Schema;
class FormController extends Controller
{
public function home() {
return view('home');
}
}
homeメソッドは「viewsフォルダになるhome.blade.phpを画面に出しますよ」というものです（home.blade.phpは後程作ります）。
これを、URLでアクセスしたら実行されるようにします。
route/web.phpを開いて以下のように書きます。
<?php
//省略
//追加
Route::get('/', [FormController::class, 'home'])->name('form.home');
これは、「https://example.com/にアクセスしたら、FormControllerのhomeメソッドを実行しますよ。」という命令です。
つまり、このURLにアクセスしたらホーム画面が出力されるということです。
また、後ろにname('form.home')とつけることで、今後このurlの代わりとしてform.homeを使うことができます（これについては後程説明を。）
同意画面の作成
では、アンケートの最初によくある「同意して回答を始める」画面を作っていきます。
レイアウトファイルを作成する
初めに、今後いくつものビューファイルを作成することを想定して共通するコードをまとめていきますね。
resources/views/layouts下にapp.blade.phpファイルを作成しましょう（layoutsフォルダは各自作成）。
そして、welcome.blade.phpというファイルがあると思うので、その一部をhome.blade.phpに移して、いくつか編集します。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name', 'アンケート') }}</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Styles -->
<!-- bootstrap css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body class="antialiased">
<main class="my-3 container">
{{ $slot }}
</main>
<footer>
アンケート
</footer>
<!-- JavaScript -->
<!-- ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>
BootstrapとjQueryの導入
まずはBootstrapとjQueryを導入します。
headタグとbodyタグの中に上のコードのように埋め込んでいます（<!-- bootstrap oo -->と書いてある部分）。
同様に、jQueryもbodyタグの中に入れています（<!-- jQuery -->と書いてある部分）。
cssファイルとjsファイルの読み込み
また、cssファイルとjsファイルをロードしておきます。
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
これらのファイルはpublic/css/やpublic/js/下に作成してください。
そして、app.cssにはwelcome.blade.phpにあるstyleタグの中身をコピペします。
{{$slot}}にページを組み込む
このapp.blade.phpはコンポーネントと呼ばれるものです。
コンポーネントはここでは詳しく説明しませんが、ここでは{{$slot}}という部分に今後作っていくviewファイルが組み込まれていく形になっています。
コンポーネントの使い方についてはコチラをチェックしてください。
（準備中）
コンポーネントを表示するためのクラスを作成
このapp.blade.phpを使うために、クラスを用意します。ターミナルで以下のコマンドを打ってください。
php artisan make:controller AppLayout
すると、app/View/Componentの中にAppLayout.phpというファイルができたかと思います。それを以下のように編集します。
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class AppLayout extends Component
{
/**
* Create a new component instance.
*
* @return void
*/
public function __construct()
{
//
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|string
*/
public function render()
{
//ここを編集
return view('layouts.app');
}
}
これで準備は完了です。
同意画面home.blade.phpの作成
では、同意画面を作成してきます。resources/views下にhome.blade.phpを作成して以下のようなコードを書きましょう。
<x-app-layout>
<div class="my-5">
<h2 class="title">【ご回答に当たって】</h2>
<ul>
<li class="mb-3">
アンケートは1人一回までとさせていただきます。
</li>
<li>
回答確認後、下記のメールアドレスより順次ご連絡させていただきます。<br>
info@example.com
</li>
</ul>
</div>
<div class="d-flex justify-content-end">
<a href="" class="btn btn-secondary ">同意する</a>
</div>
</x-app-layout>
このタグの中にコードを書くことで先ほどのファイルの中の{{$slot}}に入り込むという構造になっています。
画面の確認
では、実際に画面の出力をしてみましょう。
ターミナルで以下のコマンドを実行。
php artisan serveそして、出てきたURLにアクセスします。
このような画面が出てくれば成功です。
というわけで、今回はここまで。
次に行きましょう。
（後日更新）
スポンサードサーチ