Teknik modularitas dapat dipergunakan dalam pengaturan layout halaman web supaya lebih gampang. Sebelum Anda mengenal teknik modularitas, apa yang kita lakukan bila diminta membuat halaman web sejumlah 20 buah dengan desain layout yang sama, namun kontennya berbeda? Tentu Anda akan membuat satu buah desain template untuk layout, lalu Anda tinggal mengganti kontennya saja.
Namun apabila seandainya dari 20 buah halaman web tersebut kita ingin ubah desainnya? Tentu Anda harus mengubah semua halaman satu persatu. Bagaimana bila terdapat 100 buah halaman web dan kesemuanya kita ingin ubah desainnya? Wah repot ya kalau satu persatu.
Nah… di sinilah kita akan gunakan teknik modularitas. Dengan teknik modularitas ini, Anda dapat mengubah desain layout dari banyak halaman web dengan satu langkah saja secara cepat.
Perhatikan contoh berikut ini:
Misalkan kita buat desain layout untuk halaman web kita sebagai berikut:
1
2
3
4
5
6
7
8
9
10
| <html> <head> <title>Halaman Webku</title> </head> <<span id= "o4x68_1" class = "o4x68" >body background</span>= "yellow" > <h1><font face= "arial" >…</font></h1> <p><font face= "verdana" > … </font></p> </body> </html> |
caranya, kita cari blok dalam HTML layout yang nantinya akan diisi dengan konten yang
berbeda-beda untuk masing-masing halaman.
1
2
3
4
5
6
7
8
9
| <html> <head> <title>Halaman Webku</title> </head> <body <span id= "o4x68_2" class = "o4x68" >bgcolor</span>= "yellow" > <h1><font face= "arial" >…</font></h1> <p><font face= "verdana" > … </font></p> </body> </html> |
Bagian yang diblok di atas merupakan bagian tag yang nantinya akan diisi dengan
konten yang berbeda-beda untuk setiap halamannya.
Langkah selanjutnya, kita pindahkan tag HTML mulai bagian paling atas dari layout
sampai dengan sebelum tag yang dicetak tebal. Tag-tag tersebut kita pindahkan ke
dalam modul tersendiri, misalkan dinamakan header.php
header.php
1
2
3
4
5
| <html> <head> <title>Halaman Webku</title> </head> <body bgcolor= "yellow" > |
tag terakhir ke dalam modul tersendiri dan simpan dengan nama footer.php.
footer.php
1
2
| </body> </html> |
“header.php” dan include “footer.php”;
hal1.php
1
2
3
4
5
6
7
8
| <?php include "header.php" ; ?> <h1><font <span id= "o4x68_7" class = "o4x68" >face</span>= "arial" >Ini Halaman 1</font></h1> <p><font face= "verdana" >Ini isi halaman 1. Ini isi halaman 1</font></p> <?php include "footer.php" ; ?> |
1
2
3
4
5
6
7
8
| <?php include "header.php" ; ?> <h1><font face= "arial" >Ini Halaman 2</font></h1> <p><font face= "verdana" >Ini isi halaman 2. Ini isi halaman 2</font></p> <?php include "footer.php" ; ?> |
1
2
3
4
5
6
7
8
| <?php include "header.php" ; ?> <h1><font face= "arial" >Ini Halaman 3</font></h1> <p><font face= "verdana" >Ini isi halaman 3. Ini isi halaman 3</font></p> <?php include "footer.php" ; ?> |
Terimakasih semoga bermanfaat......
baca kelanjutannya di penerapan modularisasi part 2
kalau setelah baca artikel dan atau mengcopy artikel .... mohon coment dulu
0 komentar:
Posting Komentar