ホームページ  >  記事  >  php教程  >  PHP を使用して静的 Web サイト テンプレート フレームワークを作成する

PHP を使用して静的 Web サイト テンプレート フレームワークを作成する

WBOY
WBOYオリジナル
2016-06-13 12:46:21918ブラウズ


テンプレートを使用すると、Web サイトの構造を改善できます。この記事では、PHP 4 の新機能とテンプレート クラスを使用して、多数の静的 HTML ページで構成される Web サイトのページ レイアウトをテンプレートを巧みに使用して制御する方法について説明します。

概要:

=================================== ==

機能とレイアウトを分離


ページ要素の重複を避ける


静的 Web サイト用のテンプレート フレームワーク

==== ==== ===========================

機能とレイアウトの分離

まず始めに見てみましょうアプリケーション テンプレートの概要 2 つの主な目的:

機能 (PHP) とレイアウト (HTML) を分離する

ページ要素の重複を避ける

最初の目的は最も話題になっているものです目的については、あるプログラマー グループがページのコンテンツを生成する PHP スクリプトを作成し、別のデザイナー グループがページの最終的な外観を制御する HTML とグラフィックをデザインする状況を想像してください。機能とレイアウトを分離するという基本的な考え方は、これら 2 つのグループの人々が独立したファイルのセットを作成して使用できるようにすることです。プログラマーは、PHP コードのみを含むファイルのみを気にする必要があり、PHP コードの外観を気にする必要はありません。ページ設計者は、ページに埋め込まれた PHP コードが壊れることを心配することなく、最も使い慣れたビジュアル エディターを使用して独自のページ レイアウトを設計できます。

PHP テンプレートに関するチュートリアルをいくつか見たことがあれば、テンプレートがどのように機能するかをすでに理解しているはずです。単純なページ セクションを考えてみましょう。ページの上部はヘッダー、左側はナビゲーション バー、残りはコンテンツ領域です。この種類の Web サイトには、次のテンプレート ファイルを含めることができます:



テンプレートの例< / title></head><br><body><br><table><tr><td>{HEADER}</td></tr><br><tr> < ;td>{LEFTNAV}</td><td>{CONTENT}</td></tr><br></table><br></body></html> <br><br><!-- header.htm --><br><img src="sitelogo.jpg"><br><br><!-- leftnav.htm --> ; <br><br><a href="foo">Foo</a><br><br><a href="bar">Bar</a><br><br> これらのテンプレートからページがどのように構築されているかを確認できます。メイン テンプレートはページ全体のレイアウトを制御し、leftnav テンプレートはページの共通要素を制御します。中括弧「{}」内の識別子はコンテンツのプレースホルダーです。テンプレートを使用する主な利点は、インターフェイス設計者がフォントの設定、色やグラフィックの変更、ページのレイアウトの完全な変更など、希望に応じてこれらのファイルを編集できることです。これらのファイルには HTML コードのみが含まれており、PHP コードは含まれていないため、インターフェイス設計者は、通常の HTML エディタまたは視覚化ツールを使用してこれらのページを編集できます。 PHP コードはすべて別のファイルに保存されます。このファイルは、ページ URL によって実際に呼び出されます。 Web サーバーは PHP エンジンを通じてファイルを解析し、結果をブラウザに返します。一般に、PHP コードは、データベースへのクエリや特定の計算の実行など、常にページ コンテンツを動的に生成します。以下に例を示します。 <br><?php<br><br>// example.php <br>require('class.FastTemplate.php'); <br>$tpl = new FastTemplate('.') ; <br>$tpl->define( array( 'main' => 'main.htm', <br>'header' => 'header.htm', <br>'leftnav' => ' leftnav.htm' ) ); <br><br>// ここの PHP コードは、適切なページ コンテンツを含むように $content を設定します <br><br>$tpl->assign('CONTENT', $content) ; 🎜>$tpl->parse('HEADER', 'header'); <br>$tpl->parse('LEFTNAV', 'leftnav'); <br>$tpl->parse('MAIN') , 'main'); <br>$tpl->FastPrint('MAIN'); <br><br>?> ここでは人気のある FastTemplate テンプレート クラスを使用していますが、他の多くのテンプレート クラスでも同じです。まず、クラスをインスタンス化し、テンプレート ファイルの場所と、どのテンプレート ファイルがページのどの部分に対応するかを指示します。次に、ページ コンテンツを生成し、その結果をコンテンツ識別子に割り当てます。次に、各テンプレート ファイルを順番に解析します。テンプレート クラスは必要な置換操作を実行し、最後に解析結果がブラウザに出力されます。 <br><br> このファイルは完全に PHP コードで構成されており、HTML コードが含まれていません。これが最大の利点です。 PHP プログラマーは、最終ページを適切にフォーマットするための HTML を生成する方法を気にすることなく、ページのコンテンツを生成するコードの作成に集中できるようになりました。 <br><br> このメソッドと上記のファイルを使用して、完全な Web サイトを構築できます。 http://www.foo.com/example.php?article=099 など、PHP コードが URL 内のクエリ文字列に基づいてページ コンテンツを生成する場合、これに基づいて完全な雑誌 Web サイトを構築できます。 <br><br> テンプレートを使用する 2 番目の利点は簡単にわかります。上の例に示すように、ページの左側のナビゲーション バーは別のファイルとして保存されています。Web サイトのすべてのページの左側のナビゲーション バーを変更するには、このテンプレート ファイルを編集するだけです。 ページ要素の重複を避ける <br> 「これはとても良いことだ」と思うかもしれません。「私の Web サイトは主に多数の静的ページで構成されています。これで更新が面倒だった公開部分を全ページから削除できるようになりました。将来的には、テンプレートを使用して、管理が容易な統一されたページ レイアウトを作成できるようになります。 「しかし、物事はそれほど単純ではありません。「多数の静的ページ」が問題を示しています。<br><br> 上記の例を検討してください。この例には、実際には example.php ページが 1 つしかありません。 URL 内のクエリ文字列を使用して、データベースなどの情報ソースからページを動的に構築するため、Web サイト全体のすべてのページをサポートしています。<br><br> 私たちのほとんどがデータベースをサポートしているわけではありません。静的なページで構成され、PHP を使用して検索エンジンやフィードバック フォームなどの動的機能をあちこちに追加します。では、この種の Web サイトにテンプレートを適用するにはどうすればよいでしょうか。<br><br> 最も簡単な方法です。各ページの PHP ファイルをコピーし、PHP コード内のコンテンツを表す変数を各ページの適切なページ コンテンツに設定します。たとえば、ホームページ (ホーム)、約 () の 3 つのページがあるとします。 about) と product (product) を使用すると、それぞれ次のようなファイルを生成できます: <br><br><?php <br><br>/ / home.php <br>require('class.FastTemplate.php'); <br>$tpl = new FastTemplate('.'); <br>$tpl->define( array( 'main' => 'main.htm' , <br>'header' => 'header.htm', <br>'leftnav' => 'leftnav.htm' ) ); <br><br>$content = "< p> p> <br><img src="demo.jpg"> <br><p>このウェブサイトを気に入っていただければ幸いです</p>"; <br>$tpl- >assign('CONTENT', $コンテンツ); <br>$tpl->parse('HEADER', 'header'); <br>$tpl->parse('LEFTNAV', 'leftnav'); ('MAIN', 'main'); <br>$tpl->FastPrint('MAIN'); <br><br>?><br><br> このアプローチには明らかに 3 つの問題があります。これらのテンプレートに関係する複雑な PHP コードをページごとに複製する必要があるため、ページの保守が困難になるだけでなく、共通のページ要素が複製されるため、コンテンツの変数の割り当てが非常に難しくなります。多くの特殊文字を処理する必要があるため、難しいです。 <br><br> この問題を解決する鍵は、PHP コードと HTML コンテンツを分離することです。ファイルからすべての HTML コンテンツを削除することはできませんが、PHP コードの大部分を移動することはできます。 静的 Web サイト用のテンプレート フレームワーク <br><br> まず、以前と同様に、ページのすべての共通要素とページ全体のレイアウトのテンプレート ファイルを作成し、次にすべてのページから共通部分を削除し、ページ コンテンツのみを残します。次のように、各ページに 3 行の PHP コードを追加します。 <br><br><?php <br><br><!-- home.php --<?php require('prepend.php'); ?> <br><br><h1><br><p> ;ようこそ</p> <br><img src="demo.jpg"> <br><p>このウェブサイトを気に入っていただければ幸いです</p> ; ?> <br><br>?><br><br> この方法は、基本的に前述のさまざまな問題を解決します。ファイル内には現在 PHP コードが 3 行しかなく、その中にはテンプレートを直接参照していないため、このコードを変更する可能性は非常に低いです。また、HTML コンテンツは PHP マークアップの外側にあるため、特殊文字の処理に問題はありません。これら 3 行の PHP コードをすべての静的 HTML ページに簡単に追加できます。 <br><br> require 関数は、必要なテンプレート関連の PHP コードをすべて含む PHP ファイルを導入します。 pageStart 関数はテンプレート オブジェクトとページ タイトルを設定し、pageFinish 関数はテンプレートを解析して結果を生成し、ブラウザに送信します。 <br><br> これはどのようにして達成されるのでしょうか? pageFinish 関数が呼び出されるまで、ファイル内の HTML がブラウザに送信されないのはなぜですか?答えは、ブラウザーに出力されたコンテンツをバッファーにインターセプトできるようにする PHP 4 の新機能にあります。 prepend.php の具体的なコードを見てみましょう。 <br><br><?php <br><br>require('class.FastTemplate.php'); <br><br>function pageStart($) title = '') { <br>GLOBAL $tpl; <br>$tpl = new FastTemplate('.'); <br>$tpl->define( array( 'main' => 'main.htm' , <br>'header' => 'header.htm', <br>'leftnav'=> 'leftnav.htm' ) ); <br>$tpl->assign('TITLE', $title) ; <br>ob_start(); <br><br>関数 pageFinish() { <br>$content = ob_get_contents(); $ tpl->assign('CONTENT', $content); <br>$tpl->parse('HEADER', 'header'); <br>$tpl->parse('LEFTNAV', 'leftnav) ' ); <br>$tpl->parse('MAIN', 'main'); <br>$tpl->FastPrint('MAIN'); <br><br>? pageStart 関数は、まずテンプレート インスタンスを作成して設定し、次に出力キャッシュを有効にします。この後、ページ自体のすべての HTML コンテンツがキャッシュに入ります。 pageFinish 関数は、キャッシュからコンテンツを取り出し、これらのコンテンツをテンプレート オブジェクトに指定し、最後にテンプレートを解析して完成したページを出力します。 <br><br><br> これは、テンプレート フレームワーク全体の作業プロセス全体です。まず、Web サイトの各ページに共通の要素を含むテンプレートを作成し、次にすべてのページから共通のページ レイアウト コードをすべて削除し、変更する必要のない 3 行の PHP コードに置き換えてから、FastTemplate クラス ファイルを追加します。 php をインクルード パスに追加すると、ページ レイアウトを一元管理できる Web サイトが得られ、信頼性と保守性が向上し、Web サイト レベルでの大規模な変更が非常に容易になります。 <br><br> この記事のダウンロード パッケージには動作するサンプル Web サイトが含まれており、そのコード コメントは前のコード コメントよりも詳細です。 FastTemplate クラスは http://www.thewebmasters.net/ にあります。最新バージョン番号は 1.1.0 で、クラスが PHP 4 で正しく動作することを確認するための小さなパッチがそこにあります。この記事のダウンロード コード内のクラスは、このパッチによって修正されています。 </p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明:</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事:<a class="dBlack" title="ActivePHP を使用してバージョン管理システムを構築する" href="http://m.php.cn/ja/faq/213226.html">ActivePHP を使用してバージョン管理システムを構築する</a></span><span>次の記事:<a class="dBlack" title="ActivePHP を使用してバージョン管理システムを構築する" href="http://m.php.cn/ja/faq/213233.html">ActivePHP を使用してバージョン管理システムを構築する</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/92233.html" title="Windows7系统下Netbeans+PHPUnit搭建PHP单元测试开发环境及PHPUn" class="aBlack">Windows7系统下Netbeans+PHPUnit搭建PHP单元测试开发环境及PHPUn</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/97151.html" title="程序猿ProMonkey V2.03" class="aBlack">程序猿ProMonkey V2.03</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/94770.html" title="PHP Navigator" class="aBlack">PHP Navigator</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/90182.html" title="php返回数组中指定的一列(php5.5.0默认函数array_column()在php" class="aBlack">php返回数组中指定的一列(php5.5.0默认函数array_column()在php</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/208396.html" title="htmlentitiesとhtmlspecialcharsの違いの詳しい説明" class="aBlack">htmlentitiesとhtmlspecialcharsの違いの詳しい説明</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!</p></div><div class="footermid"><a href="http://m.php.cn/ja/about/us.html">私たちについて</a><a href="http://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="http://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>