PHPの基礎 - テンプレート方式 - 版の履歴

Wiki: /* レイアウトの共通化 */

2024-11-20T03:52:16Z

レイアウトの共通化

@@ 90行目: / 90行目: @@
 * コンポーネント指向の実装
 <br><br>
 == レイアウトの共通化 ==

Wiki: /* 基本的な分離方式 */

2024-11-19T07:22:31Z

基本的な分離方式

← 古い版		2024年11月19日 (火) 16:22時点における版
59行目:		59行目:
	</thead>		</thead>
	<tbody>		<tbody>
	<?php foreach($users as $user): ?>		<?php foreach($users as $user): ?> // PHPの代替構文の使用, {の代わりに:を使用
	<tr>		<tr>
	<td><?php echo htmlspecialchars($user['id']); ?></td>		<td><?php echo htmlspecialchars($user['id']); ?></td>
65行目:		65行目:
	<td><?php echo htmlspecialchars($user['email']); ?></td>		<td><?php echo htmlspecialchars($user['email']); ?></td>
	</tr>		</tr>
	<?php endforeach; ?>		<?php endforeach; ?> // }の代わりにend構文名を使用 (他にも、endforeach, endif, endwhile等がある)
	</tbody>		</tbody>
	</table>		</table>
			<?php else: ?>
			<p>データがありません。</p>
			<?php endif; ?>
	</syntaxhighlight>		</syntaxhighlight>
	<br>		<br>

Wiki: /* 基本的な分離方式 */

2024-11-19T07:16:02Z

基本的な分離方式

← 古い版		2024年11月19日 (火) 16:16時点における版
24行目:		24行目:
	// index.php		// index.php

	~~<?php~~		$title = "Webサイトのタイトル";
	$title = "Webサイトのタイトル";		$content = "ここに本文を入力する";
	$content = "ここに本文を入力する";

	include 'template.html';		include 'template.html';
	?>
	</syntaxhighlight>		</syntaxhighlight>
	<br>		<br>

Wiki: /* Laravelを使用する場合 */

2024-11-08T11:25:30Z

Laravelを使用する場合

← 古い版		2024年11月8日 (金) 20:25時点における版
204行目:		204行目:
	* @auth、@guest等の認証関連ディレクティブ		* @auth、@guest等の認証関連ディレクティブ
	<br>		<br>
	* Bladeの基本的な構造		===== Bladeの基本的な構造 =====
	<syntaxhighlight lang="php">		<syntaxhighlight lang="php">
	// routes/web.php		// routes/web.php
276行目:		276行目:
	</syntaxhighlight>		</syntaxhighlight>
	<br>		<br>
	* コンポーネントの使用例		===== コンポーネントの使用例 =====
	<syntaxhighlight lang="php">		<syntaxhighlight lang="php">
	// resources/views/components/button.blade.php		// resources/views/components/button.blade.php
293行目:		293行目:
	</syntaxhighlight>		</syntaxhighlight>
	<br>		<br>
	* 共通パーツの分離例		===== 共通パーツの分離例 =====
	<syntaxhighlight lang="php">		<syntaxhighlight lang="php">
	// resources/views/layouts/navigation.blade.php		// resources/views/layouts/navigation.blade.php
304行目:		304行目:
	</ul>		</ul>
	</nav>		</nav>
			</syntaxhighlight>
			<br>
			===== フラッシュメッセージの表示例 =====
			<syntaxhighlight lang="php">
			@if (session('success'))
			<div class="alert alert-success">
			{{ session('success') }}
			</div>
			@endif
			</syntaxhighlight>
			<br>
			===== バリデーションエラーの表示例 =====
			<syntaxhighlight lang="php">
			@error('email')
			<div class="alert alert-danger">{{ $message }}</div>
			@enderror
	</syntaxhighlight>		</syntaxhighlight>
	<br><br>		<br><br>

Wiki: /* 基本的な分離方式 */

2024-11-08T11:22:07Z

基本的な分離方式

@@ 47行目: / 47行目: @@
   </html>
   </syntaxhighlight>
 <br><br>

Wiki: /* テンプレートエンジンの使用 */

2024-11-08T08:20:25Z

テンプレートエンジンの使用

@@ 118行目: / 118行目: @@
 == テンプレートエンジンの使用 ==
-Smarty、Twig等のテンプレートエンジンを使用する方法がある。
+Smarty、Twig等のテンプレートエンジンを使用する方法がある。<br>
 これらは独自の構文を持ち、より柔軟なテンプレート制御が可能である。<br>
 <br>
-* Twigを使用する場合
+==== Twigを使用する場合 ====
   <syntaxhighlight lang="php">
   // index.php
@@ 149行目: / 149行目: @@
   </body>
   </html>
   </syntaxhighlight>
 <br><br>

Wiki: /* レイアウトの共通化 */

2024-11-08T08:10:24Z

レイアウトの共通化

← 古い版		2024年11月8日 (金) 17:10時点における版
58行目:		58行目:
	<html>		<html>
	<head>		<head>
			<!-- 必要に応じて、ヘッダ部分で変数を確認する処理を入れる -->
			<?php
			if (!isset($title)) {
			$title = "デフォルトタイトル";
			}
			?>
	<title><?php echo $title; ?></title>		<title><?php echo $title; ?></title>
	<meta charset="UTF-8">		<meta charset="UTF-8">

Wiki: /* テンプレートエンジンの使用 */

2024-11-08T08:06:30Z

テンプレートエンジンの使用

← 古い版		2024年11月8日 (金) 17:06時点における版
127行目:		127行目:
	echo $twig->render('template.twig', [		echo $twig->render('template.twig', [
	'title' => 'Webサイトのタイトル',		'title' => 'Webサイトのタイトル',
	'content' => '~~ここに本文が入力する~~'		'content' => 'ここに本文を入力する'
	]);		]);
	</syntaxhighlight>		</syntaxhighlight>

Wiki: /* テンプレートエンジンの使用 */

2024-11-08T08:06:09Z

テンプレートエンジンの使用

← 古い版		2024年11月8日 (金) 17:06時点における版
155行目:		155行目:

	__FORCETOC__		__FORCETOC__
	[[カテゴリ:~~PHP~~]]		[[カテゴリ:Web]]

Wiki: ページの作成:「== 概要 == テンプレート方式とは、HTMLのデザイン部分とPHPのロジック部分を分離することである。
これにより、デザイナと開発者が別々に作業しやすくなり、コードの保守性も向上する。

テンプレート方式を採用する主なメリットを以下に示す。
* コードの可読性向上 * メンテナンス性の向上 * チーム開発での作業効率向上 * デザイン…」

2024-11-08T08:05:54Z

ページの作成:「== 概要 == テンプレート方式とは、HTMLのデザイン部分とPHPのロジック部分を分離することである。<br> これにより、デザイナと開発者が別々に作業しやすくなり、コードの保守性も向上する。<br> <br> テンプレート方式を採用する主なメリットを以下に示す。<br> * コードの可読性向上 * メンテナンス性の向上 * チーム開発での作業効率向上 * デザイン…」

新規ページ

== 概要 ==
テンプレート方式とは、HTMLのデザイン部分とPHPのロジック部分を分離することである。<br>
これにより、デザイナと開発者が別々に作業しやすくなり、コードの保守性も向上する。<br>
<br>
テンプレート方式を採用する主なメリットを以下に示す。<br>
* コードの可読性向上
* メンテナンス性の向上
* チーム開発での作業効率向上
* デザインの一貫性維持が容易
<br>
代表的なテンプレートの実装方法を以下に示す。<br>
* 基本的な分離方式
*: PHPファイルとHTMLファイルを分けて、includeで結合する。
* テンプレートエンジンの使用
*: Smarty、Twig等のテンプレートエンジンを使用する。
<br>
なお、テンプレート方式を導入する場合は、プロジェクトの規模や要件に応じて適切な方法を選択することが重要である。<br>
小規模なプロジェクトの場合は基本的な分離方式で十分の可能性があり、大規模なプロジェクトではテンプレートエンジンの採用を検討する。<br>
<br><br>

== 基本的な分離方式 ==
PHPファイルとHTMLファイルを分けて、<code>include</code>文で結合する方法である。<br>
<syntaxhighlight lang="php">
// index.php

<?php
$title = "Webサイトのタイトル";
$content = "ここに本文を入力する";

include 'template.html';
?>
</syntaxhighlight>
<br>
<syntaxhighlight lang="html">


<!DOCTYPE html>
<html>
<head>

<title><?php echo $title; ?></title>
</head>
<body>

<?php echo $content; ?>
</body>
</html>
</syntaxhighlight>
<br><br>

== レイアウトの共通化 ==
ヘッダ部やフッタ部では、共通部分を別ファイルとして管理することにより、保守性が向上する。<br>
<br>
<syntaxhighlight lang="php">
// header.php

<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
</syntaxhighlight>
<br>
<syntaxhighlight lang="php">
// footer.php

<footer>
<div class="footer-content">
<p>© 2024 会社名 All Rights Reserved.</p>
</div>
</footer>
<script src="/js/main.js"></script>
</body>
</html>
</syntaxhighlight>
<br>
<syntaxhighlight lang="php">
// content.php (このファイルをトップページとする)

<?php
$title = "ページタイトル";

include 'header.php';
?>


<main>
<div class="content">
<h1>ようこそ</h1>
<p>これはメインコンテンツです。</p>
</div>
</main>

<?php
include 'footer.php';
?>
</syntaxhighlight>
<br><br>

== テンプレートエンジンの使用 ==
Smarty、Twig等のテンプレートエンジンを使用する方法がある。
これらは独自の構文を持ち、より柔軟なテンプレート制御が可能である。<br>
<br>
* Twigを使用する場合
<syntaxhighlight lang="php">
// index.php

<?php
require_once 'vendor/autoload.php';

$loader = new \Twig\Loader\FilesystemLoader('templates');
$twig = new \Twig\Environment($loader);

echo $twig->render('template.twig', [
'title' => 'Webサイトのタイトル',
'content' => 'ここに本文が入力する'
]);
</syntaxhighlight>
<br>
<syntaxhighlight lang="twig">
{# template.twig #}

<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
{{ content }}
</body>
</html>
</syntaxhighlight>
<br><br>

{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:PHP]]