Developer

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

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

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

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

対象のスキルレベル

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

構築環境

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

部署管理 編集画面

部署管理の一覧表示も終了しましたので、編集画面の実装を早速行いたいと思います。

部署管理編集画面

usersEdit.html をコピーして、deptsEdit.html を作成します。
一覧画面と同様に、修正していきます。

  • タイトルの変更
  • ヘッダメニューの選択内容変更
  • 左メニューの選択内容変更
  • コンテンツエリアのタイトル変更
  • コンテンツエリアのタイトルのアイコン変更
  • 入力項目の変更

上記を行います。まずはヘッダ部分から修正を行っていきます。.active などのクラスを、usersから外して、deptsに付けていきます。

depts.html(コンテンツ以外抜粋)
<!doctype html>
<html lang="ja" >
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>部署管理 | tech.pjin.jp</title>

	<!-- Bootstrap core 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">
	<!-- Font Awesome CSS -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
	<!-- Animate.css CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
	<!-- Sawarabi Gothic -->
	<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic" rel="stylesheet">
	<!-- Custom styles for this template -->
	<link href="./assets/css/style.css" rel="stylesheet">
</head>
<body>
	<header>
		<nav class="navbar navbar-expand-lg navbar-light shadow bg-white fixed-top">
			<div class="container-fluid">
				<a class="navbar-brand" href="index.html"><i class="fas fa-paste"></i> BACK<span class="bland-red">OFFICE</span></a>
				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNavDropdown">
					<ul class="navbar-nav header-menu">
						<li class="nav-item">
							<a class="nav-link" href="index.html"><i class="fas fa-tachometer-alt"></i> DASHBOARD</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="users.html"><i class="fas fa-id-card-alt"></i> ユーザ管理</a>
						</li>
						<li class="nav-item">
							<a class="nav-link active" href="depts.html"><i class="far fa-building"></i> 部署管理</a>
						</li>
					</ul>
					<ul class="navbar-nav ms-auto me-3">
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle username" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
								管理者
							</a>
							<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
								<li><a class="dropdown-item" href="login.html"><i class="fas fa-sign-out-alt"></i> ログアウト</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</header>

	<nav class="left-nav shadow d-none d-lg-block">
		<div class="list-group list-group-flush">
			<a href="index.html" class="list-group-item list-group-item-action"><i class="fas fa-tachometer-alt"></i> DASHBOARD</a>
			<a href="users.html" class="list-group-item list-group-item-action"><i class="fas fa-id-card-alt"></i> ユーザ管理</a>
			<a href="depts.html" class="list-group-item list-group-item-action active"><i class="far fa-building"></i> 部署管理</a>
		</div>
	</nav>

項目数が多いですが、部署詳細に関しては項目を減らすだけでよさそうですね。

メニューは2つ上と左に定義されています。それぞれ画面の大きさを変更し正しく表示されるか確認してください。
確認が済みましたら、コンテンツエリアの修正を行います。

名前を部署名に変更し、電話番号はそのまま利用します。
Validation部分も一緒にし、メッセージの表示も同じにします。

depts.html(コンテンツ抜粋)
	<main class="contents">
		<section class="container-fluid">
			<header>
				<h1><i class="fas fa-building"></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 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>
				<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>

	<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
	<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="assets/js/script.js"></script>
	<script>
	$(function(){
	});
	</script>
</body>
</html>

ユーザ一覧同様に、コピー元があるとかなり楽だったのではないでしょうか。
ここまでで、一通りHTMLの実装が終了です。

次回からはサーバサイドの実装を行っていきます。やっとPHPでプログラムが始まります。サーバサイドと非同期通信で実装します。

魁!小野の塾