Pemrograman WEB. P7 Teknik Modularitas

Konsep modularitas dalam pemrograman digunakan untuk memudahkan kita dalam pengorganisasian script/program. prinsip dari konsepp ini adalah meletakkan beberapa perintah yang menjalankan suatu tugas khusus ke dalam modul atau file script tersendiri. Setiap kali modul tersebut dibutuhkan, kita hanya menyisipkan modul tersebut ke dalam script yang sedang dibuat dengan cara memanggilnya.

Dalam teknik pemrograman yang baik, seharusnya program yang besar dipecah menjadi program-program yang kecil (modul). Modul-modul kecil tersebut dapat dipanggil jika sewaktu-waktu diperlukan. PHP juga mendukung konsep tersebut (modularitas). Kita dapat menyisipkan isi suatu file/modul lain ke dalam file/modul tertentu.

Terdapat 2 perintah/function untuk hal tersebut dalam PHP yaitu menggunakan include() dan require().

- INCLUDE () -

Fungsi Include () mengambil semua teks dalam file tertentu dan menyalinnya ke dalam file yang menggunakan fungsi termasuk. Jika ada masalah dalam memuat file maka fungsi include() menghasilkan / memberitahukan peringatan dan script akan terus tereksekusi.

- REQUIRE () -

Fungsi require() mengambil semua teks dalam file tertentu dan menyalinnya ke dalam file yang menggunakan fungsi termasuk. Jika ada masalah dalam memuat file maka fungsi require() menghasilkan kesalahan fatal dan menghentikan eksekusi script.

Gimana sih contoh programnya ?

Save program : head.php

-------------------------------------------------------------------------

echo "selamat datang di website ku
";

-------------------------------------------------------------------------

Save program : body.php

-------------------------------------------------------------------------

include 'head.php';

echo "
Ini adalah contant atau isi dari website ku
";

-------------------------------------------------------------------------

Hasilnya:

-------------------------------------------------------------------------

selamat datang di website ku

Ini adalah contant atau isi dari website ku

-------------------------------------------------------------------------

Coba perhatiin program itu, disana ada program body.php yang memanggil head.php sedangkan dalam program head.php terdapat tampilan selamat datang di websiteku sehingga ketika program body.php itu dijalankan maka ada dua tampilan yang muncul yaitu tampilan dari body.php itu sendiri dan juga tampilan head.php

Nah gimana caranya ya memanfaatkan teknik modulisasi ini untuk membuat tampilan seperti ini ?

Berdasarkan dua tugas ku juga program ini dibuat,

Soalnya kaya gini :

1. Coba buatlah desain layout sebuah halaman web (tanpa menggunakan tool apapun selain Notepad atau Notepad++) dengan tampilan berikut ini:

2. Dengan menggunakan teknik modularitas, coba buat modul config.php, header.php dan footer.php dari hasil soal nomor 1. Modul config.php digunakan untuk mengatur konfigurasi seperti jenis font, ukuran font, warna background dll.

Keterangan:

Untuk bagian “Nama Situs Anda”, “Link” dan “Copyright” bersifat fixed, artinya kelima halaman tersebut memiliki tampilan yang sama. Sehingga dalam hal ini bagian yang berubah-ubah untuk setiap halaman hanyalah bagian “Heading dan Konten” saja.

Oke ini step by stepnyaa :

1. Membuat script html lengkap dengan header dan didalam body diisi dengan script membuat tabel.

seperti ini :

Ini scriptnya :

2. Coba periksa hasil programnya, kurang lebih nanti seperti ini :

3. Setelah secara keseluruhan sudah dibuat, kini saatnya memisahkan mereka menjadi beberapa bagian lalu di save sendiri" porgramnya seperti ini :

Jadi sekarang kita punya 6 Program, dan yang perlu diperhatikan adalah program" ini harus berada di satu folder.

3. Menggunakan teknik modulasi, kini saatnya kita menggabungkan kelima program tersebut :

Simpan program ini sebagai tabel.php

4. Periksa kembali hasil tampilannya,
Nah hasilnya sama aja gengs, disini aku tambahin keterangan hasil dari 6 program yang tadi kita gabungin

5. Oke saatnya mengisi judul, identitas, menu, isi, widget tambahan dan footer sesukaaa kita.

Ngga susah kan yaa?

Sekarang aku mau nunjukin gimana aku buat tampilan kaya gambar yang pertama.

1. Aku punya program header kaya gini :

=>save as header.php

<html>

<head>

<title>NovannaRHZ</title>

</head>

<body>

<table border="4" width="800">

2. Untuk identitas aku bikin kaya gini :
=> save as identity.php

<thead>

<tr>

<th colspan="3"> HASIL PERCOBAAN PEMOGRAMAN LANJUTAN <br /> 

POLITEKNIK ELEKTRONIKA NEGERI SURABAYA <br /> 2019</th>

</tr>

<tr>

<th colspan="3" align="left">Novanna Rahma Zani <br /> 1103181047 |

1 D3 Elektronika B</th>

</tr>

</thead>

3. Menu-nya aku buat link" untuk mengubah fontstyle dan background
Save as => menu.php

<tbody>

<tr height="200">

<td width= 25% valign= "top"> <p align="center"> Menu</p>

<hr/><br />

<a href= "Tabel.php"> HOME </a> <br />

<a href= "isisize.php"> Change Font Size </a> <br />

<a href= "isifont.php"> Change Font Style </a> <br />

<a href= "isibackground.php"> Change Background Color </a> <br />

</td>

4. Isi aku buat kaya gini sekalian buat jadi home
Save as => isi.php

<td width = 50%> 

<b>PHP</b> 

adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. 

Selain itu, PHP juga bisa digunakan sebagai bahasa pemrograman umum (wikipedia). 

PHP di kembangkan pada tahun 1995 oleh Rasmus Lerdorf, 

dan sekarang dikelola oleh The PHP Group. 

Situs resmi PHP beralamat di http://www.php.net. <br /> <br />

PHP disebut bahasa pemrograman server side karena PHP diproses pada komputer server. 

Hal ini berbeda dibandingkan dengan bahasa pemrograman client-side 

seperti JavaScript yang diproses pada web browser (client).

<br /><br />

Pada awalnya PHP merupakan singkatan dari Personal Home Page. 

Sesuai dengan namanya, PHP digunakan untuk membuat website pribadi. 

Dalam beberapa tahun perkembangannya, 

PHP menjelma menjadi bahasa pemrograman web yang powerful dan 

tidak hanya digunakan untuk membuat halaman web sederhana, 

tetapi juga website populer yang digunakan oleh jutaan orang 

seperti wikipedia, wordpress, joomla, dll.

</td>

5. Untuk widget" tambahannya aku baru masukin link blog aja sih tapi sebenernya kalian bisa tambahin apapun, entah itu foto, jam atau widget" lainnya.
Save as => whatsnew.php (Bebas ya sebenernya mau kamu simpen dengan nama file apa, tapi karna aku telanjur ngasih nama itu dan udah di include kemana" juga yaudah aku pake itu aja)

<td width = 20% valign="top"> 

<a href="http://www.Novannarhzblog.blogspot.com" 

target="_blank">Let's Check My Blog!</a></td>

</tr>

6. Nah footernya kaya gini :
Save as=>footer.php

<tr>

<td colspan="3" align="center">Copyright @2019</td>

</tr>

</tbody>

</table>

</body>

</html>

7. Lalu digabungin jadi satu program menggunakan teknik modulasi
Save program as Tabel.php

<?php

include "header.php" ;

include "identity.php";

include "menu.php";

include "isi.php";

include "whatsnew.php";

include "footer.php";

?>

8. Yaudah coba jalanin deh program "Tabel.php" nyaa

9. Coba kalian perhatiin point 3, disana ada menu-menu yang terhubung dengan link, yaitu :
- Ketika klik HOME menuju link Tabel.php (Kembali ke formasi awal)
- Ketika klik Change Font Size menuju link isisize.php
- Ketika klik Change Font Style menuju link isifont.php
- Ketika klik Change Background Color menuju link isibackground.php
Bagaimana program" nya ?

=> isisize.php

<?php

include "header.php" ;

include "identity.php";

include "menu.php";

include "milihukuran.php";

include "whatsnew.php";

include "footer.php";

?>

=> isifont.php

<?php

include "header.php" ;

include "identity.php";

include "menu.php";

include "milihfont.php";

include "whatsnew.php";

include "footer.php";

?>

=>isibackground.php

<?php

include "header.php" ;

include "identity.php";

include "menu.php";

include "milihbackground.php";

include "whatsnew.php";

include "footer.php";

?>

Yaa setelah diperhatikan, ternyata link link ini membentuk kembali sebuah tabel lengkap dari header sampai footer tetapi yang berbeda adalah di include "iisinyaa" . Program diarahkan ke tabel baru yang isinya berubah menjadi sebuah text pilihan-pilihan. (Nanti perhatikan hasilnya)

Sekarang yang perlu dipertanyakan lagi, Apasih isi program milihukuran.php milihfont.php dan milihbackground.php

=>milihukuran.php

<td width = 50%> 

Choose size that u want : <br />

<a href= "tabelsize1.php"> Size 5</a> <br />

<a href= "tabelsize2.php"> Size 10</a> <br />

<a href= "tabelsize3.php"> Size 12</a> <br />

<a href= "tabelsize4.php"> Size 18</a> <br />

<a href= "tabelsize5.php"> Size 20</a> <br />

</td>

=>milihfont.php

<td width = 50%> 

Choose FONT that u want : <br />

<a href= "Tabeltahoma.php"> <font face= "Tahoma">Tahoma</font> </a> <br />

<a href= "Tabelarial.php"> <font face= "Arial">Arial</font> </a> <br />

<a href= "Tabelcentury.php"> <font face= "Century Gothic">Century Gothic</font> 

</a> <br />

<a href= "Tabeltimes.php"> <font face= "Times New Roman">Times New Roman</font> 

</a> <br />

</td>

=>milihbackground.php

<td width = 50%> 

Choose background color that u want : <br />

<a href= "Tabelwarna1.php"> <font color= "#7FFFD4"> 1. Mermaid Background</font> 

</a> <br />

<a href= "Tabelwarna2.php"> <font color= "#FFE4C4">2. Peach Background</font> 

</a> <br />

<a href= "Tabelwarna3.php"> <font color= "#F08080">3. Cute Background</font> 

</a> <br />

<a href= "Tabelwarna4.php"> <font color= "#F0E68C">4. Green Tea Background</font> 

</a> <br />

</td>

Coba deh perhatiin, ketiga program ituu terbentuk dari "isi.php" dimana isi nyaa diganti dengan pilihan pilihan.
Hasilnya nanti kaya gini :

Perhatikan tampilan isinya,
ini setelah klik 'Change Font Size'

ini setelah klik 'Change Font Style'

ini setelah klik 'Change Background Color'

Setelah program" milih ituu, sekarang ada include hasil dari setiap pilihan.
- Program milihsize.php meng-include kan tabelsize1.php ; tabelsize2.php ; tabelsize3.php ; tabelsize4.php ; tabelsize5.php,
=> isisize1.php

<td width = 50%> 

<font size="1"> <b>PHP</b> 

adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. 

Selain itu, PHP juga bisa digunakan sebagai bahasa pemrograman umum (wikipedia). 

PHP di kembangkan pada tahun 1995 oleh Rasmus Lerdorf, 

dan sekarang dikelola oleh The PHP Group. 

Situs resmi PHP beralamat di http://www.php.net. <br /> <br />

PHP disebut bahasa pemrograman server side karena PHP diproses pada komputer server. 

Hal ini berbeda dibandingkan dengan bahasa pemrograman client-side 

seperti JavaScript yang diproses pada web browser (client).

<br /><br />

Pada awalnya PHP merupakan singkatan dari Personal Home Page. 

Sesuai dengan namanya, PHP digunakan untuk membuat website pribadi. 

Dalam beberapa tahun perkembangannya, 

PHP menjelma menjadi bahasa pemrograman web yang powerful dan 

tidak hanya digunakan untuk membuat halaman web sederhana, 

tetapi juga website populer yang digunakan oleh jutaan orang seperti wikipedia, 

wordpress, joomla, dll.

</font>

</td>

=> isisize2.php

<td width = 50%> 

<font size="2"> <b>PHP</b> 

adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. 

Selain itu, PHP juga bisa digunakan sebagai bahasa pemrograman umum (wikipedia). 

PHP di kembangkan pada tahun 1995 oleh Rasmus Lerdorf, dan sekarang 

dikelola oleh The PHP Group. 

Situs resmi PHP beralamat di http://www.php.net. <br /> <br />

PHP disebut bahasa pemrograman server side karena PHP diproses pada komputer server. 

Hal ini berbeda dibandingkan dengan bahasa pemrograman client-side 

seperti JavaScript yang diproses pada web browser (client).

<br /><br />

Pada awalnya PHP merupakan singkatan dari Personal Home Page. 

Sesuai dengan namanya, PHP digunakan untuk membuat website pribadi. 

Dalam beberapa tahun perkembangannya, 

PHP menjelma menjadi bahasa pemrograman web yang powerful dan 

tidak hanya digunakan untuk membuat halaman web sederhana, 

tetapi juga website populer yang digunakan oleh jutaan orang seperti 

wikipedia, wordpress, joomla, dll.

</font>

</td>

Lihat perbedaannya? Beda di deklarasi font sizenya yaa..
Biar ga terlalu panjang kasih contoh itu aja ya hehe, nanti isisize3.php itu tinggal ubah aja font sizenya sama dengan 3 dan seterusnya.

-Program milihfont.php meng-include-kan Tabeltahoma.php dan kawan"nya
nnti programnya kaya gini :

<td width = 50%> 

<font face="Tahoma"><b>PHP</b> 

adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. 

Selain itu, PHP juga bisa digunakan sebagai bahasa pemrograman umum (wikipedia). 

PHP di kembangkan pada tahun 1995 oleh Rasmus Lerdorf, 

dan sekarang dikelola oleh The PHP Group. 

Situs resmi PHP beralamat di http://www.php.net. <br /> <br />

PHP disebut bahasa pemrograman server side karena PHP diproses pada komputer server. 

Hal ini berbeda dibandingkan dengan bahasa pemrograman client-side 

seperti JavaScript yang diproses pada web browser (client).

<br /><br />

Pada awalnya PHP merupakan singkatan dari Personal Home Page. 

Sesuai dengan namanya, PHP digunakan untuk membuat website pribadi. 

Dalam beberapa tahun perkembangannya, 

PHP menjelma menjadi bahasa pemrograman web yang powerful dan 

tidak hanya digunakan untuk membuat halaman web sederhana, 

tetapi juga website populer yang digunakan oleh jutaan orang seperti wikipedia, 

wordpress, joomla, dll.

</font>

</td>

Nah untuk tabelcentury.php dan sebagainya itu tinggal disesuaikan aja. Kalian tinggal ubah 'fontface' nya menjadi century atau ketika kalian buat tabelarial.php berarti 'fontface' nya sama dengan arial.

- Kalau font dan size tadi yang kita utak atik adalah isinyaa, maka untuk milihbacground.php ini kita akan utak atik satu tabel penuh. karena warna backgroundnya meliputi semuanya, maka deklarasi warna kita berikan di header, bukan di isi saja seperti sebelumnya.

Program milibackground.php meng-include-kan Tabelwarna1.php ; Tabelwarna2.php ; Tabelwarna3.php ; Tabelwarna4.php
Dan programnya seperti ini :
=> Tabelwarna1.php

<?php

include "headerwarna1.php" ;

include "identity.php";

include "menu.php";

include "isi.php";

include "whatsnew.php";

include "footer.php";

?>

Untuk Tabelwarna2.php dan seterusnya kalian tinggal ubah ada angka di 'headerwarna1.php' menjadi
'headerwarna2.php' dann begitupun selnajutnya.
Disini aku bikin sampe tabel warna 4 ya..

See gengs, lagilagi tabel warna itu meng-include-kan program baru yaitu 'headerwarna1.php'
so, apasih isi programnya?

=> headerwarna1.php

<html>

<head>

<title>NovannaRHZ</title>

</head>

<body>

<table border="4" width="800" style="background-color: #7FFFD4;">

Nah untuk 'headerwarna2.php' dan selanjutnya itu tinggal mengubah kode warna yang ada (contohnya disana itu #7FFFD4) , karna diawal tadi sudah dideklarasikan bahwa yang warnanya adalah #7FFFD4 ; #FFE4C4 ; #F08080 ; #F0E68C (Sesuai milihbackground.php)
maka untuk header yang dibuat nanti harus disesuikan dengan warna yang telah disebut di program milihbackground.php

Dan ini adalah hasil hasilnya :

1. Saat dipilih size 5