BLOG

【PHP基礎シリーズラスト】繰り返し処理を使って図書管理アプリを作ろう!

2022-11-30

今回使用する図書管理アプリのベースコードはこちら!
コピーしてご使用ください、アプリのデザインをカスタマイズしたい場合はCSSファイルを好きにいじってください!
★tosyo-kanri.php
<!doctype html>
<html lang="ja">
 <head>
	 <meta charset="UTF-8">
	 <title>図書管理アプリ</title>
	 <link rel="stylesheet" type="text/css" href="tosyo-kanri-style.css">
</head>
<body>
<?php 
	// 書籍用の配列を用意
?>
<div class="book">
	<h1 class="title">図書管理アプリ</h1>
	<form action="" method="POST">
		<input type="text" name="title" placeholder="書籍名" class="textbox"><br>
		<input type="text" name="author" placeholder="著者" class="textbox"><br>
		<input type="submit" class="submitbox" value="登録">
		<?php 
			if(!empty($_POST)){
				$books = addBook($books, $_POST["title"], $_POST["author"]);
			}
		?>
	</form>
​
	<table>
		<tr>
			<th>
				書籍名
			</th>
			<th>
				著者
			</th>
		</tr>
        <!-- 繰り返し処理の追加 -->
        
	</table>
​
<?php
function addBook($books, $title, $author){
	$newBook = [
		"title" => $title,
		"author" => $author
	];
    // 配列追加処理を用意
​
	return $books;
}
?>
</div>
</body>
</html>
★tosyo-kanri-style.css
body{
    font-family: serif;
}
.book{
    margin: 60px 180px;
    background-color: #c8ffc0;
    padding: 80px;
    box-shadow: 9px 9px 0px 0px #708b49;
    text-align: center;
    border-radius: 60px;
}
.title{
    font-size: 38px;
    font-weight: bold;
    color: #708b49;
    font-family: serif;
}
.textbox {
    width: 300px;
    height: 30px;
    padding: 3px 7px;
    border-radius: 5px;
    border: 2px solid #ccc;
    margin-bottom: 10px;
}
.textbox:focus {
    outline: 0;
    border: 2px solid #708b49;
}
.submitbox {
    width: 100px;
    height: 35px;
    padding: 3px 7px;
    border-radius: 5px;
    border: 2px solid #ccc;
    background-color: #fffcc0;
    margin-bottom: 30px;
}
table {
    border-collapse: collapse;
    border: solid 2px #708b49;
    background-color: #fff;
    display: inline-block;
  }
table th {
    border: solid 1px #ccc;
    padding: 10px 50px;
    background-color: #708b49;
    color: #fff;
}
table td {
    border: solid 1px #ccc;
    padding: 10px 50px;
}

繰り返し処理を使って図書管理アプリを作ろう!

ロックシステムのコジです!Youtubeで配信しているPHPの基礎学習シリーズもいよいよラスト!
前回は繰り返し処理を学びましたね。
・【PHP学習】繰り返し処理(ループ処理)と配列を学んですっきりしたコードを書こう!

軽くおさらいしておくと、配列または連想配列というたくさん値を入れられる変数を
for文またはforeach文を使って一つずつ表示していくのが繰り返し処理でしたね。
なんにもしなくてもプログラムが配列の中身を出してくれるからちょー便利なものでした。
シリーズ最後は前回学んだ繰り返し処理を使ってこんな図書管理アプリを作成します。

書籍名と著者を登録できるアプリですね。表になっている部分が繰り返し処理を使って表示されています。
このように一覧表なんかを表示するときにはとても役に立つ繰り返し処理!
使用イメージがつくように是非一緒に作成してみましょう!

最終完成コードはこちら

★tosyo-kanri.php
<!doctype html>
<html lang="ja">
 <head>
	 <meta charset="UTF-8">
	 <title>図書管理アプリ</title>
	 <link rel="stylesheet" type="text/css" href="tosyo-kanri-style.css">
</head>
<body>
<?php 
	// 書籍用の配列を用意
	$books = [
		[
			"title" => "吾輩は猫である",
			"author" => "夏目漱石"
		],
		[
			"title" => "羅生門",
			"author" => "芥川龍之介"
		],
		[
			"title" => "たけくらべ",
			"author" => "樋口一葉"
		],
		[
			"title" => "走れメロス",
			"author" => "太宰治"
		],
		[
			"title" => "こころ",
			"author" => "夏目漱石"
		],
		[
			"title" => "舞姫",
			"author" => "森鴎外"
		],
		[
			"title" => "浮雲",
			"author" => "二葉亭四迷"
		]
	];
?>
<div class="book">
	<h1 class="title">図書管理アプリ</h1>
	<form action="" method="POST">
		<input type="text" name="title" placeholder="書籍名" class="textbox"><br>
		<input type="text" name="author" placeholder="著者" class="textbox"><br>
		<input type="submit" class="submitbox" value="登録">
		<?php 
			if(!empty($_POST)){
				$books = addBook($books, $_POST["title"], $_POST["author"]);
			}
		?>
	</form>
​
	<table>
		<tr>
			<th>
				書籍名
			</th>
			<th>
				著者
			</th>
		</tr>
        <!-- 繰り返し処理の追加 -->
        <?php foreach($books as $book){ ?>
			<tr>
				<td>
					<?php echo($book["title"]); ?>
				</td>
				<td>
					<?php echo($book["author"]); ?>
				</td>
			</tr>
		<?php }; ?>
	</table>
​
<?php
function addBook($books, $title, $author){
	$newBook = [
		"title" => $title,
		"author" => $author
	];
    // 配列追加処理を用意
	array_push($books, $newBook);
	return $books;
}
?>
</div>
</body>
</html>

株式会社ロックシステム

「ブラック企業をやっつけろ!!」を企業理念にエンジニアが働きやすい環境をつきつめる大阪のシステム開発会社。2014年会社設立以来、残業時間ほぼゼロを達成し、高い従業員還元率でエンジニアファーストな会社としてIT業界に蔓延るブラックなイメージをホワイトに変えられる起爆剤となるべく日々活動中!絶賛エンジニア募集中。