Membina rangka kerja PHP5: Bahagian 3-tutorial php-php.cn

Memandangkan kita mempunyai rangka kerja asas (lihat Bahagian 1 dan Bahagian 2 siri ini), kita boleh mula memikirkan tentang menyepadukan reka bentuk dengan rangka kerja PHP. Kini, kami akan menumpukan pada reka bentuk bahagian hadapan, termasuk cara mudah "mengulit" rangka kerja baharu kami.

Bagaimana semuanya sesuai bersama

Setakat ini kami mempunyai fail teras dalam struktur logik dan set teras objek yang diakses oleh pendaftaran. Salah satu objek ini ialah pengendali templat kami, yang membolehkan kami membina dan menjana output HTML dengan mudah. Output dibina daripada satu siri fail, termasuk imej, CSS dan templat yang membentuk "kulit".

Langkah 1: Apa yang diperlukan untuk reka bentuk bahagian hadapan rangka kerja kami

Reka bentuk bahagian hadapan generik untuk templat boleh menjadi sukar untuk diperbaiki. Ia berguna jika anda mereka bentuk templat HTML asas yang mengandungi semua kandungan untuk mana-mana tapak web yang mungkin anda buat menggunakan rangka kerja. Minimum yang saya anggap ialah:

Kawasan kandungan utama, kami memanggilnya

#content

Salin selepas log masuk

Satu atau dua lajur kandungan tidak sepenting
```
#content
```
Salin selepas log masuk
Salin selepas log masuk
Sesetengah data jadual.
Senarai tidak tersusun dan tersusun (begitu juga dengan senarai definisi, jika anda mungkin menggunakannya).
imej. Saya mendapati ia berguna untuk menambah gaya berasingan untuk foto, yang saya kenal pasti sebagai kelas "foto" dalam HTML sebagai contoh
Borang untuk tangkapan data.

Kami akan mulakan dengan mencipta struktur XHTML asas untuk halaman tersebut. Mari mulakan dengan bahagian ini dahulu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{pagetitle}</title>
<meta name="description" content="{metadesc}" />
<meta name="keywords" content="{metakey}" />
<style type="text/css" title="Default page style" media="screen"><!--@import "skins/fmwk/style.css";--></style>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>

Salin selepas log masuk

Anda boleh menukar jenis dokumen untuk dipadankan, malah anda boleh mentakrifkannya dalam tetapan setiap tapak web yang dibuat menggunakan rangka kerja, dan dapat menukar jenis dokumen juga berguna

lang

Salin selepas log masuk

. Ia boleh berguna untuk menentukan helaian gaya sebagai tetapan juga, yang akan kami bincangkan dalam tutorial akan datang.

Selain itu, perihalan meta dan atribut kunci meta boleh dikodkan keras ke dalam kulit setiap tapak web yang anda buat, tetapi adalah bijak untuk

menyediakan setiap halaman dengan set perihalan dan kata kunci yang berbeza

hingga #🎜 🎜 #Cegah halaman rosak daripada muncul dalam indeks tambahan Google. Pemegang tempat {pagetitle} akan digunakan untuk memasukkan tajuk halaman semasa ke dalam templat.

Sekarang, kita boleh beralih ke badan fail XHTML templat untuk mencipta reka bentuk bahagian hadapan generik untuk rangka kerja kami. Kami akan memastikan reka letak mudah buat masa ini, dengan mengandaikan bahawa kebanyakan tapak web yang akan kami buat menggunakan rangka kerja ini akan menggunakan skema pengepala, kandungan, lajur dan pengaki tradisional.

<div id="wrapper">
<div id="header">

</div>
<div id="content">

</div><!--/content-->
<div id="column">

</div><!--/column-->

<div id="footer">

</div><!--/footer-->

</div><!--/wrapper-->
</body>
</html>

Salin selepas log masuk

Langkah 2: Kandungan asas

Seperti yang dijanjikan, kami akan mengisi beberapa perkara asas supaya kami boleh menggayakannya supaya kami mempunyai sekurang-kurangnya kebanyakan teg yang mungkin muncul dalam halaman yang sedia untuk digayakan:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{pagetitle}</title>
<meta name="description" content="{metadesc}" />
<meta name="keywords" content="{metakey}" />
<style type="text/css" title="Default page style" media="screen"><!--@import "skins/fmwk/style.css";--></style>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h2><a href="#" title="Website name">Website name</a></h2>
</div>
<div id="content">
<h1>{pagetitle}</h1>
<img class="photo" src="photo.jpg" alt="Photo test" />
<p>
Lorem ipsum dolor sit amet, <strong>consectetuer adipiscing elit</strong>. Quisque urna augue, fringilla quis, pulvinar non, feugiat in, pede. Curabitur vitae pede. Cras vehicula varius tellus. Sed consequat, enim tristique euismod volutpat, <em>tellus magna aliquet risus</em>, id aliquet eros metus at purus. 
</p>
<h2>Secondary heading</h2>
<p>
Aliquam dictum, nibh eget <a href="#" title="Test link">ullamcorper condimentum</a>, magna turpis placerat pede, tempor facilisis tortor urna commodo turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras luctus cursus velit. Nullam imperdiet turpis.
</p>
<h3>Tertiary heading</h3>
<table>
<tr>
<th>Heading</th>
<td>Data</td>
</tr>
<tr>
<th>Heading</th>
<td>Data</td>
</tr>
</table>
<p>
<img src="image.jpg" alt="Generic image" />
Cras a eros eget lorem fermentum malesuada. Phasellus condimentum libero vel lacus. Donec lectus nisl, adipiscing malesuada, sodales tincidunt, sagittis vitae, lacus. Proin nec pede. Maecenas adipiscing adipiscing risus.
</p>
</div><!--/content-->
<div id="column">

<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>

</div><!--/column-->

<div id="footer">
<p>
&copy; Website name, 2008.
</p>
</div><!--/footer-->

</div><!--/wrapper-->
</body>
</html>

Salin selepas log masuk

Kini kandungan sedia untuk beberapa penggayaan mudah.

Langkah 3: Gaya Asas

Kami mula-mula menggunakan CSS untuk menetapkan semula jidar dan padding elemen dalam dokumen XHTML:

body, * {
margin: 0;
padding 0;
}

Salin selepas log masuk

Kami akan meluangkan sedikit masa untuk menggayakan elemen badan dan memastikan pautan dalam dokumen diserlahkan dengan sewajarnya:

body {
background: #FFF;
color: #000;
font-family: "helvetica", "arial", "verdana", sans-serif;
font-size: 62.5%;
}

a, a:active, a:link  {
color: #1A64AC;
text-decoration: underline;	
}

a:visited {
color: #0D2F4F;
}

Salin selepas log masuk

Seterusnya, kami akan memusatkan reka bentuk kami dalam divs #wrapper dan memberikan setiap div sempadan samar supaya kami dapat melihatnya semasa menggayakan.

#wrapper {
margin: 0 auto;
width: 950px;	
}
<br />
#wrapper, #header, #content, #column, #footer {
border: 1px #DDD solid;
}

Salin selepas log masuk

Walaupun CSS di atas tidak memusatkan reka bentuk ini dalam Internet Explorer 6, CSS telah disimpan asas untuk fleksibiliti maksimum. Dengan sedikit lagi CSS, kami hampir mempunyai reka bentuk rangka

yang lengkap untuk hujung hadapan rangka kerja

- yang tinggal hanyalah beberapa kedudukan mudah:

#column, #content {
float: left;
font-size: 125%;
padding: 5px;
}

#column {
width: 200px;
}

#content {
margin-left 5px;
width: 	725px;
}

#header, #footer {
clear: both;
}

Salin selepas log masuk

Kini yang tinggal hanyalah imej:

#column img, #content img {
border: 2px #DDD solid;
float: left;
margin: 0 5px 0 10px;
}
img.photo {
background: #DDD;
float: right !important;
padding: 25px 2px;
}

Salin selepas log masuk

Apa yang kita tinggalkan pada peringkat ini ialah susun atur laman web mudah yang boleh kita gunakan sebagai asas untuk rangka kerja PHP bahagian hadapan:

Sudah tentu, untuk fleksibiliti tambahan mungkin berguna untuk membenarkan 2 lajur kandungan secara lalai, yang boleh dilakukan dengan menambahkan lebih banyak XHTML dan CSS. Membina rangka kerja PHP5: Bahagian 3

Langkah 4: Templat daripada XHTML

Langkah seterusnya ialah memindahkan XHTML, CSS dan imej ke

kulit

yang sesuai untuk rangka kerja PHP kami. Untuk melakukan ini, kita perlu membahagikan XHTML kepada tiga templat: pengepala, templat utama dan pengaki. Disebabkan oleh cara sistem templat distrukturkan, halaman boleh dijana daripada sebarang bilangan templat, tetapi disyorkan untuk menggunakan sekurang-kurangnya pengepala, pengaki dan templat utama, yang bermaksud, secara amnya, kita hanya perlu menyalin dan menukar jika kami ingin membuat sedikit struktur Jika terdapat halaman baharu yang berbeza, gunakan fail templat utama.

Templat pengepala untuk rangka kerja PHP (skins/default/templates/header.tpl.php)

Templat pengepala rangka kerja PHP hendaklah mengandungi bahagian XHTML dan

Bahagian

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{pagetitle}</title>
<meta name="description" content="{metadesc}" />
<meta name="keywords" content="{metakey}" />
<style type="text/css" title="Default page style" media="screen"><!--@import "style.css";--></style>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h2><a href="#" title="Website name">Website name</a></h2>
</div>

Salin selepas log masuk

PHP 框架的主模板 (skins/default/templates/main.tpl.php)

主模板应包括包含主要内容和列中任何内容的 div。我们现在可以为此内容插入占位符，而不是复制我们用来设置段落、有序列表和表格等元素样式的虚拟文本，占位符将根据内容所在的位置进行更新。

占位符内容是：

{pagetitle} 页面标题。
{maincontent} 页面的主要内容。
{btitle} 和 {bcontent} 内容块的标题和内容。它包含在 rcolumn 循环中，因此可以在列中放置多个块。

<div id="content">
<h1>{pagetitle}</h1>
{maincontent}
</div><!--/content-->

<div id="column">
<!-- START rcolumn -->
<h2>{btitle}</h2>
{bcontent}
<!-- END rcolumn -->
</div><!--/column-->

Salin selepas log masuk

PHP 框架的页脚模板 (skins/default/templates/footer.tpl.php)

<div id="footer">
<p>
© Website name, 2008.
</p>
</div><!--/footer-->

</div><!--/wrapper-->
</body>
</html>

Salin selepas log masuk

对于我们系列中 PHP 的中断表示歉意，但为我们的框架和使用它的应用程序构建皮肤格式的相关模板非常重要。 PHP5 框架开发系列中的第 4 部分将介绍基本的安全注意事项和基本的身份验证处理程序，然后我们将继续创建内容管理模型，并在第 5 部分中研究模型如何组合在一起。该系列中的内容：发送电子邮件、扩展我们的框架以及以创新的方式记录用户事件流。

Atas ialah kandungan terperinci Membina rangka kerja PHP5: Bahagian 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!