Laravelで簡単にホームページを作成

STYLE LAB

まずはweb.phpを作成

// トップページ
Route::get('/', function () {
    return view('welcome');
});

// 会社紹介ページ
Route::get('/about', function () {
    return view('about');
});

// コンタクトフォームページ
Route::get('/contact', function () {
    return view('contact');
});


use App\Http\Controllers\ContactController;

// コンタクトフォームのデータ送信を処理するルート
Route::post('/contact', [ContactController::class, 'store']);

headerとfooterを作成

resouces->views->layouts->app.blade.php

<!-- resources/views/layouts/app.blade.php -->

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <title>アプリケーション名 - @yield('title')</title>
</head>
<body>
    <header>
        <h1>共通ヘッダー</h1>
        <nav>
            <ul>
                <li><a href="{{ url('/') }}">トップページ</a></li>
                <li><a href="{{ url('/about') }}">会社概要</a></li>
                <li><a href="{{ url('/contact') }}">コンタクトフォーム</a></li>
            </ul>
         </nav>
    </header>

    //コンタクトフォームからの遷移先
    <div class="container">
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        @yield('content')
    </div>

    <footer>
        <p>共通フッター</p>
        <nav>
            <ul>
                <li><a href="{{ url('/') }}">トップページ</a></li>
                <li><a href="{{ url('/about') }}">会社概要</a></li>
                <li><a href="{{ url('/contact') }}">コンタクトフォーム</a></li>
            </ul>

        </nav>
    </footer>
</body>
</html>

次に、「トップページ」「会社概要」「コンタクトフォーム」を作成


views->welcome.blade.php

<!-- resources/views/welcome.blade.php -->

@extends('layouts.app')

@section('title', 'トップページ')

@section('content')
    <h2>トップページのコンテンツ</h2>
    <p>ここにトップページのコンテンツを置きます。</p>
@endsection

views->about.blade.php

<!-- resources/views/about.blade.php -->

@extends('layouts.app')

@section('title', '会社概要ページ')

@section('content')
    <h2>会社概要ページのコンテンツ</h2>
    <p>ここに会社概要ページのコンテンツを置きます。</p>
@endsection

views->contact.blade.php

<!-- resources/views/contact.blade.php -->

@extends('layouts.app')

@section('title', 'コンタクトフォーム')

@section('content')
    <h1>お問い合わせ</h1>
    
    <!-- 送信先を設定 -->
    <form method="POST" action="{{ url('/contact') }}">
        <!-- CSRFトークンを設定（セキュリティ対策） -->
        @csrf
        
        <!-- 名前入力フィールド -->
        <div>
            <label for="name">名前：</label>
            <input type="text" id="name" name="name" required>
        </div>
        
        <!-- メールアドレス入力フィールド -->
        <div>
            <label for="email">メールアドレス：</label>
            <input type="email" id="email" name="email" required>
        </div>
        
        <!-- メッセージ入力エリア -->
        <div>
            <label for="message">メッセージ：</label>
            <textarea id="message" name="message" required></textarea>
        </div>
        
        <!-- 送信ボタン -->
        <div>
            <button type="submit">送信</button>
        </div>
    </form>
@endsection

コントローラ作成

ターミナル

php artisan make:controller ContactController

app->Http->Controller->ContactController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ContactController extends Controller
{
    public function store(Request $request)
    {
        // バリデーションルールを適用
        $validated = $request->validate([
            'name' => 'required|max:255',
            'email' => 'required|email',
            'message' => 'required',
        ]);

        // バリデーションが通れば後続の処理へ
        // 例：データベースへの保存やメール送信など

        // 処理後、適切なリダイレクトやメッセージ表示
        return redirect('/')->with('success', 'お問い合わせありがとうございます！');
    }
}

CSS

pubric->css->app.css

ul {
    list-style: none; /* リストマークを非表示にする */
    padding: 0; /* パディングをリセットする */
    display: flex; /* Flexbox を有効化 */
}

li {
    margin-right: 10px; /* 隣接する要素との間隔を設定 */
}

この記事が気に入ったらサポートをしてみませんか？