Belajar Koding PHP Dasar – 08 Static Web

Pembuatan Menu atas (header) dan menu bawah (footer)

Kita harus membuat 3 file

menuatas.php

<style>

body {

margin: 0;

font-family: Arial, Helvetica, sans-serif;

}

.topnav {

overflow: hidden;

background-color: #333;

}

.topnav a {

float: left;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

}

.topnav a:hover {

background-color: #ddd;

color: black;

}

.topnav a.active {

background-color: #4CAF50;

color: white;

}

</style>

<a href=”pendaftaran.php”>Pendaftaran</a>

<a href=”login.php”>Login</a>

<a href=”daftarproduk.php”>Daftar Produk</a>

</div>

menubawah.php

<hr>

<p align = “center”><font face=”verdana” color=”black” size=”2″>Copyright @Hasan2018</font></p>

index.php

<html>

<head>

<title>Belajar PHP</title>

</head>

<?php

include ‘menuatas.php’;

<div style=’border: 1px solid #CCC; float: center; margin: 10px 0px; padding: 20px; width: 90%; height: auto;

background-color: #FBFBEE; text-align: left; text-decoration:none; ‘>

<h2>Judul</h2>

<p>isi Tulisan</p>

</p>

<p>isi Tulisan</p>

</div>

</center>

<?php

include ‘menubawah.php’;

</body>

</html>

Tugas 1

Buat Folder di folder www dengan nama belajar1

1. Rubah Warna background Menu, warna tulisan dan warna saat mouse di dekatkan

2. Isi konten web, untuk Form Pendaftaran, Form Login dan Daftar Produk

3. Gunakan semua kreativitas dan Imagenasi Anda.

Kode warna

https://www.materialui.co/htmlcolors

Tugas 2

Buat Folder di folder www dengan nama belajar2

Saran : Selesaikan Tugas 1 terlebih dahulu agar memahami bahasa html nya ….

Buatlah sebuah website static dengan mendownload template dari https://templated.co

Paste salah satu template yang kamu pilih, lalu buatlah website responsif.

Tugas 1 dan 2

akan Kami Nilai dan dicantumkan dalam sertifikat, buatlah dengan sebaik-baiknya.

Teknik Modularitas

Konsep modularitas dalam programming diperlukan untuk mempermudah dalam pengorganisasian script/program. Adapun prinsip dari konsep 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.

Adapun cara memanggil modul dengan menggunakan perintah

include “namafilemodul”;

Perhatikan gambaran penggunaan konsep modularitas berikut ini:

Misalkan Anda membuat modul dan disimpan dalam script bernama modulku.php.

Selanjutnya Anda sedang membuat script tertentu katakanlah diberinama file scriptku.php. Kebetulan dalam scriptku.php Anda membutuhkan modulku.php, maka skema yang terjadi adalah:

Dari skema di atas, jelas tampak bahwa bila Anda memberikan perintah include “modulku.php”; dalam scriptku.php, maka akan identik dengan bila Anda menyisipkan script yang ada dalam modulku.php ke dalam scriptku.php secara manual.

Contoh:

Dalam contoh ini kita akan menggunakan konsep modularitas untuk membuat script

operasi aritmatika penjumlahan dan pengurangan dari 2 buah bilangan. Untuk input

bilangannya disimpan dalam modul tersendiri, misalkan dinamakan bilangan.php.

Selanjutnya modul ini akan diincludekan ke dalam script penjumlahan dan pengurangan.

bilangan.php

<?php

$bil1 = 10;

$bil2 = -5;

jumlah.php

<?php

include “bilangan.php”;

$hasil = $bil1 + $bil2;

echo “Hasil penjumlahannya adalah : “.$hasil;

Bentuk script jumlahkan.php di atas akan identik dengan script berikut ini

<?php

$bil1 = 10;

$bil2 = -5;

$hasil = $bil1 + $bil2;

echo “Hasil penjumlahannya adalah : “.$hasil;

kurang.php

<?php

include “bilangan.php”;

$hasil = $bil1 – $bil2;

echo “Hasil pengurangannya adalah : “.$hasil;

Script kurang.php di atas akan identik dengan

<?php

$bil1 = 10;

$bil2 = -5;

$hasil = $bil1 – $bil2;

echo “Hasil pengurangannya adalah : “.$hasil;

Penerapan Teknik Modularitas

Teknik modularitas dapat dipergunakan dalam pengaturan layout halaman web supaya lebih mudah. Sebelum Anda mengenal teknik modularitas, apa yang Anda 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.

OK.. itu mudah, namun bagaimana seandainya dari 20 buah halaman web tersebut Anda

ingin ubah desainnya? Tentu Anda harus mengubah semua halaman satu persatu.

Bagaimana bila terdapat 100 buah halaman web dan kesemuanya Anda 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:

<html>

<head>

<title>Halaman Webku</title>

</head>

</body>

</html>

Nah… misalkan kita akan membuat 3 halaman web menggunakan layout di atas. Maka caranya, kita cari blok dalam HTML layout yang nantinya akan diisi dengan konten yang berbeda-beda untuk masing-masing halaman.

<html>

<head>

<title>Halaman Webku</title>

</head>

</body>

</html>

Keterangan:

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

<html>

<head>

<title>Halaman Webku</title>

</head>

Kemudian pindahkan tag setelah bagian yang dicetak tebal dalam layout sampai dengan

tag terakhir ke dalam modul tersendiri dan simpan dengan nama footer.php.

footer.php

</body>

</html>

hal1.php

<?php

include “header.php”;

<h1><font face=”<?php echo $jenisFontHeading; ?>”>Ini Halaman 1</font></h1>

<p><font face=”<?php echo $jenisFontParagraf; ?>”>Ini isi halaman 1. Ini isi halaman

1</font></p>

<?php

include “footer.php”;

hal2.php

<?php

include “header.php”;

<h1><font face=”<?php echo $jenisFontHeading; ?>”>Ini Halaman 2</font></h1>

<p><font face=”<?php echo $jenisFontParagraf; ?>”>Ini isi halaman 2. Ini isi halaman

2</font></p>

<?php

include “footer.php”;

hal3.php

<?php

include “header.php”;

<h1><font face=”<?php echo $jenisFontHeading; ?>”>Ini Halaman 3</font></h1>

<p><font face=”<?php echo $jenisFontParagraf; ?>”>Ini isi halaman 3. Ini isi halaman

3</font></p>

<?php

include “footer.php”;

Nah… dengan demikian, bila Anda ingin mengubah layout ketiga halaman web maka Anda cukup mengubah modul config.php

Sekarang kita lanjutkan, bagaimana bila kita mengintegrasikan konsep modularitas yang terkait dengan pengaturan layout di atas dengan form processing?

OK… untuk contoh sederhananya, saya ambil contoh script menjumlahkan dua buah bilangan dengan inputnya melalui form.

Misalkan kita ambil desain layout halaman webnya seperti contoh sebelumnya, yaitu terdiri dari modul header.php dan footer.php nya sebagai berikut:

config.php

<?php

$warnaBackground = “yellow”;

$jenisFontHeading = “arial”;

$jenisFontParagraf = “verdana”;

header.php

<?php

include “config.php”;

<html>

<head>

<title>Penjumlahan Bilangan</title>

</head>

footer.php

</body>

</html>

Selanjutnya kita buat form yang terletak dalam halaman yang menggunakan layout

Tersebut

form.php

<?php

include “header.php”;

<h1><font face=”<?php echo $jenisFontHeading; ?>”>Input Bilangan</font></h1>

<p><font face=”<?php echo $jenisFontParagraf; ?>”>Masukkan dua buah bilangan pada

form berikut ini</font></p>

Bilangan 1 <input type=”text” name=”bil1″ /><br />

Bilangan 2 <input type=”text” name=”bil2″ /><br />

</form>

<?php

include “footer.php”;

proses.php

<?php

include “header.php”;

$bil1 = $_POST[‘bil1’];

$bil2 = $_POST[‘bil2’];

$hasil = $bil1 + $bil2;

<h1><font face=”<?php echo $jenisFontHeading; ?>”>Output</font></h1>

<p><font face=”<?php echo $jenisFontParagraf; ?>”>Hasil penjumlahannya adalah

<?php echo $hasil; ?> </font></p>

<?php

include “footer.php”;

Download Modul-modul Bimbel lainnya di Aplikasi,

Ketik

AqilaDroid

di PlayStore

atau Klik Link Berikut :

https://play.google.com/store/apps/details?id=com.aqila.aqiladroid

PlayList Video Tutorial Materi

https://youtube.com/playlist?list=PLNYE6uj1u6t-oxopv9GDgjtE8HUI3v6jE

Dilarang meng-Share

Pelajari dulu, setelah Anda Paham, Buatlah sesuatu yang bisa Anda share

Hargailah Hasil Karya Orang Lain, maka Anda akan berharga

Daftar Pustaka

http://blog.rosihanari.net

https://www.w3schools.com

https://www.000webhost.com

http://rosihanari.net

https://templated.co

https://www.onphpid.com

https://html-cleaner.com

Aqila Course