Membuat Kerangka Kerja PHP5

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Sekarang kita punya kerangka dasar (lihat bagian 1 dan bagian 2 dari seri ini), kita dapat mulai memikirkan untuk mengintegrasikan desain dengan kerangka kerja PHP kita. Untuk saat ini, kita akan berkonsentrasi pada desain front-end, termasuk bagaimana kita bisa mempermudah 'memberi kulit' pada kerangka baru kita.

Bagaimana semuanya sesuai bersama-sama

Sejauh ini, kita memiliki file inti kita, dalam struktur logis dan kumpulan inti objek yang diakses oleh registri kita. Salah satu objek ini adalah handler template kita, yang memungkinkan kita dengan mudah membangun dan menghasilkan keluaran HTML. Keluarannya dibangun dari serangkaian file termasuk gambar, css dan template yang membentuk 'kulit'.

Langkah 1: apa yang dibutuhkan untuk desain front end kerangka kerja kita

Desain front-end generik untuk template bisa sulit dipikirkan dengan benar. Ini berguna jika desain template HTML dasar berisi segala sesuatu situs web yang mungkin dibuat dengan kerangka kerja Anda. Minimal yang saya pertimbangkan adalah:

Area konten utama, yang akan kita panggil
```
#content
```
.
Satu atau atau dua kolom untuk konten yang tidak sepenting itu dalam
```
#content
```
.
Beberapa data tabular.
Daftar unordered dan ordered (daftar definisi juga, jika Anda cenderung menggunakannya).
Gambar-gambar. Saya merasa berguna untuk menyertakan gaya terpisah untuk foto, yang saya identifikasikan dengan kelas 'photo' dalam HTML; misalnya <img class="photo" src="images/photo.jpg" alt="Photograph" />.
Formulir untuk pengambilan data.

<head>

Kita akan mulai dengan membuat struktur dasar XHTML untuk halaman kita. Kita akan mulai dengan section terlebih 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>

Anda dapat mengubah DOCTYPE agar sesuai, atau bahkan memiliki ketentuan untuk dapat menentukannya dalam pengaturan untuk setiap situs web yang Anda buat dengan kerangka kerja Anda, dan juga berguna untuk dapat mengubah

lang

. Ini akan berguna untuk memiliki stylesheet yang juga didefinisikan sebagai pengaturan, yang akan kita bahas di tutorial masa depan.

Selain itu, atribut meta description and meta key dapat dikodekan manual di setiap skin situs web yang Anda buat, namun sebaiknya berikan setiap halaman deskripsi dan kumpulan kata kunci yang berbeda untuk mencegah halaman muncul di indeks tambahan Google.

Placeholder {pagetitle} akan digunakan untuk memasukkan judul halaman saat ini ke dalam template.

<body>

Kita sekarang dapat beralih ke body template XHTML template kita untuk desain front-end generik untuk kerangka kerja kita. Kita akan menjaga tata letak yang sederhana untuk saat ini, dengan asumsi bahwa sebagian besar situs web yang akan kita buat dengan kerangka kerja akan menggunakan skema header, konten, kolom, dan footer 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>

Langkah 2: konten dasar

Seperti yang dijanjikan, kita akan mengisi beberapa konten dasar sehingga kita bisa memberi gaya sehingga setidaknya kita memiliki sebagian besar tag yang mungkin terjadi pada halaman yang sudah siap:

<!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>

Konten sekarang siap untuk beberapa gaya sederhana.

Langkah 3: gaya dasar

Kita akan mulai dengan mereset margin dan padding elemen dalam dokumen XHTML kita dengan CSS:

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

Kita akan meluangkan waktu untuk menetapkan gaya ke elemen body dan memastikan bahwa tautan dalam dokumen disorot dengan tepat:

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;
}

Selanjutnya, kita akan mencoba memusatkan desain kita di div #wrapper, dan menugaskan border samar ke masing-masing div sehingga kita dapat melihatnya seperti gaya yang kita berikan.

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

Sementara CSS di atas tidak akan memusatkan desain ini di Internet Explorer 6, CSS telah tetap mendasar untuk memungkinkan fleksibilitas maksimum. Dengan sedikit CSS lagi, kita hampir memiliki kerangka desain lengkap untuk kerangka front-end kita - yang tersisa hanyalah sedikit penempatan sederhana:

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

#column {
width: 200px;
}

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

#header, #footer {
clear: both;
}

Semua yang tersisa untuk kita beri gaya sekarang adalah gambar:

#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;
}

Apa yang kita tinggalkan pada tahap ini adalah tata letak situs web sederhana yang bisa kita gunakan sebagai dasar front-end kerangka kerja PHP kita:

Tentu saja, untuk fleksibilitas ekstra, mungkin akan berguna untuk mengizinkan 2 kolom konten secara default, yang dapat dilakukan dengan penambahan sedikit XHTML dan CSS lagi.

Langkah 4: template dari XHTML

Langkah selanjutnya adalah mentransfer XHTML, CSS dan gambar ke dalam skin yang sesuai untuk kerangka kerja PHP kita. Untuk melakukan ini, kita perlu membagi XHTML menjadi tiga template: header, utama dan footer. Karena cara sistem template adalah terstruktur, halaman dapat dihasilkan dari sejumlah template, namun setidaknya sebuah template header, footer dan utama adalah direkomendasikan yang artinya, pada umumnya, kita seharusnya benar-benar perlu menyalin dan mengubah file template main jika kita membuat halaman baru yang memiliki struktur sedikit berbeda.

Template header untuk kerangka kerja PHP (skins/default/templates/header.tpl.php)

Template header untuk kerangka kerja PHP harus berisi bagian XHTML kita, dan juga

bagian dari :

<!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>

Template utama untuk framework PHP (skins/default/templates/main.tpl.php)

Template utama harus menyertakan div yang berisi konten utama dan konten di dalam kolom. Alih-alih menyalin teks dummy yang biasa kita gunakan untuk memberi gaya elemen seperti paragraf, ordered list dan tabel, sekarang kita dapat memasukkan placeholder untuk konten ini, yang akan diperbarui tergantung dari kontennya.

Konten placeholder adalah:

{pagetitle} judul halaman.
{maincontent} konten utama halaman.
{btitle} dan {bcontent} judul dan konten untuk blok konten. Ini tertutup dalam perulangan rcolumn sehingga beberapa blok dapat ditempatkan di kolomnya.

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

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

Template footer untuk kerangka kerja PHP (skins/default/templates/footer.tpl.php)

Terakhir, XHTML yang tersisa masuk ke file footer, yang menutup dokumen XHTML dan bagian body. Kita biasanya menggunakan ini untuk menyertakan pemberitahuan hak cipta dan tautan 'web design by' di situs web kita.

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

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

Permintaan maaf untuk istirahat dari PHP di seri kami, namun penting untuk menyusun template yang relevan dalam format skin untuk kerangka kerja dan aplikasi yang memanfaatkannya. Bagian 4 dalam serial pengembangan kerangka kerja PHP5 ini akan mencakup pertimbangan keamanan dasar dan handler otentikasi dasar, sebelum kita beralih ke pembuatan model Content Management kita, dan melihat bagaimana model sesuai di Bagian 5. Juga masuk dalam serial: Mengirim email, memperluas kerangka kerja kita dan mencatat log stream acara pengguna dengan cara yang inovatif.

Membuat Kerangka Kerja PHP5 - Bagian 3