Developer

魁!小野の塾 小さな管理機能を作ってみようの巻 第13話
2021.06.04
Lv2

魁!小野の塾 小さな管理機能を作ってみようの巻 第13話

小さな管理機能を作ってみよう 第13話

初心者向け、PHPプログラム構築講座です。
初心者といっても、PHPの勉強を少し行い、LAMP環境が自分で構築でき、少しアプリケーションを作成しているレベルを対象とします。
まったくの初心者の場合は、わからない部分が出てくると思います。
できるだけ細かく説明は入れていきますが、説明がわからない場合は、PHPやMySQLの初心者講座をご覧ください。

対象のスキルレベル

  • LAMP環境の構築
  • PHP言語が読める
  • HTML, CSS, Javascriptが少しわかる
  • Bootstrapのドキュメントをみて、HTMLが書ける
  • Ajax(非同期通信)を利用したことがある
  • SESSIONを利用したことがある

構築環境

  • Windows10
  • XAMPP(PHP7.3.2, MariaDB 10.1.38)

ユーザ管理 編集画面

今回は、Validationのパターン部分の追加を行います。その前に 正規表現 について少し学んでいきたいと思います。
中級者以上になってくると、色々な場面で 正規表現 を、見たり、書いたりすることになります。
私もチェックをしたりすると、量指定子(数量子と表現するところもある)が抜けているなど、少し難しいのかなと感じることがあります。

参考サイトを見て下さい。サルでもわかるは、サルでもわかるのかも知れませんが、ちょっとハードルが高いかも。

※参考 正規表現とは?メタ文字とサンプル一覧
※参考 サルにもわかる正規表現入門
※参考 基本的な正規表現一覧
※参考 正規表現
※参考 忘れっぽい人のための正規表現チートシート
※参考 任意の文字と繰り返し(量指定子)
※参考 最大量指定子と最小量指定子の考え方
※参考 最先読みと後読みを使ったパターン
※参考 正規表現の先読み・後読みを極める!

一通り見るとわかると思いますが、世界の皆さんは、よく使うパターンをまとめて一覧にしてウェブに上げてくれています。
そうです。考えなくてもコピペで使えるのです。なので、分からないうちはコピペで頑張りましょう。きっとそのうち目覚めます。

正規表現が正しく書けるためには、文字コードの理解や、どのように文字列処理されているのかなど、色々な知識が必用とされますので、
少しずつ知識を蓄え、経験していけばよいかと思います。(間違えた正規表現かかれるより、コピペしてあっているものが良いです。)
ただ、テストは必ずして下さい!これは絶対です!あったこともない人が書いた正規表現を鵜呑みにしてはいけないですからね。(と上司に怒られた経験があります)

チェックする内容はこちらになります。

項目名 type属性 正規パターン 内容
名前 text .{2,} 任意の文字が2文字以上
メールアドレス email メールアドレスは正規表現では完全にチェックすることは出来ません。ブラウザのチェック任せ。
パスワード password (?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)[a-zA-Z\d]{6,} 半角で、英字の大文字、小文字、数字のいずれも含む6文字以上
電話番号 tel \d{2,4}-?\d{3,4}-?\d{3,4} 数字2桁から4桁 -(なくても良い) 数字3桁から4桁 -(なくても良い) 数字3桁から4桁
住所 text .{5,} 任意の文字が5文字以上

では、早速実装していきましょう。

usersEdit.html(content部分抜粋)
[html highlight=”11,21,29,39,65″] <main class="contents">
<section class="container-fluid">
<header>
<h1><i class="fas fa-id-card-alt"></i> ユーザ管理</h1>
</header>

<form class="needs-validation" novalidate>
<div class="row">
<div class="col-lg mb-3">
<div class="form-floating">
<input type="text" class="form-control" id="name" placeholder="名前を入力してください。" pattern=".{2,}" required>
<label for="name">名前</label>
<div class="valid-feedback">正しい入力です</div>
<div class="invalid-feedback">正しく入力してください</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg mb-3">
<div class="form-floating">
<input type="email" class="form-control" id="mail" placeholder="メールアドレスを入力してください。" required>
<label for="mail">メールアドレス</label>
<div class="valid-feedback">正しい入力です</div>
<div class="invalid-feedback">正しく入力してください</div>
</div>
</div>
<div class="col-lg mb-3">
<div class="form-floating">
<input type="password" class="form-control" id="passwd" placeholder="パスワードを入力してください。" pattern="(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)[a-zA-Z\d]{6,}" required>
<label for="passwd">パスワード</label>
<div class="valid-feedback">正しい入力です</div>
<div class="invalid-feedback">正しく入力してください(英数大文字・小文字、半角数字いずれも含む6文字以上)</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg mb-3">
<div class="form-floating">
<input type="tel" class="form-control" id="phone" placeholder="電話番号を入力してください。" pattern="\d{2,4}-?\d{3,4}-?\d{3,4}" required>
<label for="phone">電話番号</label>
<div class="valid-feedback">正しい入力です</div>
<div class="invalid-feedback">正しく入力してください</div>
</div>
</div>
<div class="col-lg mb-3">
<div class="form-floating">
<select class="form-select" id="dept" required>
<option value="">選択してください</option>
<option value="1">経理</option>
<option value="2">人事</option>
<option value="3">総務</option>
<option value="4">営業第1課</option>
<option value="5">営業第2課</option>
<option value="6">営業第3課</option>
</select>
<label for="dept">所属部署</label>
<div class="valid-feedback">正しい入力です</div>
<div class="invalid-feedback">正しく入力してください</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg mb-3">
<div class="form-floating">
<input type="text" class="form-control" id="address" placeholder="住所を入力してください。" pattern=".{5,}" required>
<label for="address">住所</label>
<div class="valid-feedback">正しい入力です</div>
<div class="invalid-feedback">正しく入力してください</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg mb-3">
<button class="btn btn-success"><i class="far fa-check-circle"></i> 登録</button>
</div>
</div>
</form>

</section>
</main>
[/html]

正しく設定されているかは必ず確認しましょう!テスト大事です。
画面を表示したら、まず登録ボタンを押してください。赤枠でエラーが出ると思いますので、その状態で入力していくと、入力枠が緑に変わっていきます。

これで、ユーザ管理側の実装が終わりました。次回からは部署管理側の実装に入っていきます。

魁!小野の塾