Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Membuat Kerangka Kerja PHP5 - Bagian 3

by
Difficulty:IntermediateLength:MediumLanguages:

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

    .

  • Satu atau atau dua kolom untuk konten yang tidak sepenting itu dalam

    .

  • 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:

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

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

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:

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:

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

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.

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:

Semua yang tersisa untuk kita beri gaya sekarang adalah gambar:

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 :

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.

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.

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.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.