目的
- 入力フォームから登録完了画面までの流れを実装する
- CSSフレームワークを使う
※ 画面遷移だけでDB等への登録はまだ実装しません
目次
- create.php作成
- store.php作成
- thanks.php作成
- create.html作成
- thanks.html作成
問題点
- ほぼ同じ内容のエントリーポイント(create.php, store.php, thanks.php)を毎回作らなければいけない。
- HTMLテンプレートの共通レイアウト(head, header, footer)を毎回記述しなければならない
- エントリーポイントをブラウザから直接実行できてしまう
参考
create.php作成
create.php
<?php
ini_set('display_errors', "On");
require_once('../autoLoader.php');
use Stampede\App\Http\Request;
use Stampede\App\Http\View;
//
$root = '/opt/project/stampede/';
// オートローダー起動
$autoloader = new autoLoader($root);
$autoloader->register();
$request = Request::getInstance();
$view = View::getInstance();
$view->display('create.html', $request->all());
exit;
store.php作成
store.php
<?php
ini_set('display_errors', "On");
require_once('../autoLoader.php');
use Stampede\App\Http\Request;
//
$root = '/opt/project/stampede/';
// オートローダー起動
$autoloader = new autoLoader($root);
$autoloader->register();
// リクエストオブジェクト生成
$request = Request::getInstance();
// ポストパラメータ取得
$params = $request->all();
// DB等への登録の処理
// 完了画面にリダイレクト
header('Location:thanks.php');
exit;
thanks.php作成
thanks.php
<?php
ini_set('display_errors', "On");
require_once('../autoLoader.php');
use Stampede\App\Http\Request;
use Stampede\App\Http\View;
//
$root = '/opt/project/stampede/';
// オートローダー起動
$autoloader = new autoLoader($root);
$autoloader->register();
$request = Request::getInstance();
$view = View::getInstance();
$view->display('thanks.html', $request->all());
exit;
create.html作成
create.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<div class="col-lg-8 mx-auto p-4 py-md-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
<span class="fs-4">Starter template</span>
</a>
</header>
<main>
<form class="gy-5" method="post" action="store.php">
<div class="mb-3 col-4">
<label for="inputEmail1" class="form-label">お名前</label>
<input type="user_name" class="form-control" id="inputUserName">
</div>
<div class="mb-3 col-4">
<label for="inputEmail1" class="form-label">メールアドレス</label>
<input type="email" class="form-control" id="inputEmail1">
</div>
<button type="submit" class="btn btn-primary">登録</button>
</form>
</main>
<footer class="pt-5 my-5 text-body-secondary border-top">
Created by the Bootstrap team · © 2023
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</body>
</html>
thanks.html作成
thanks.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<div class="col-lg-8 mx-auto p-4 py-md-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
<span class="fs-4">Starter template</span>
</a>
</header>
<main>
<div>登録完了</div>
</main>
<footer class="pt-5 my-5 text-body-secondary border-top">
Created by the Bootstrap team · © 2023
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</body>
</html>