Laporan pratikum iv web

LAPORAN PRATIKUM IV
PRAKTIKUM PEMROGRAMAN BERBASIS WEB
PHP (Hypertext Preprocessor)
Disusun untuk Memenuhi Matakuliah Praktikum Pemrograman Berbasis Web yang
dibimbing oleh Bapak Didik Dwi Prasetya
Oleh :
GISRA RAHMADHITA
130533608259
S1 PTI 2013 Offering B
UNIVERSITAS NEGERI MALANG
FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA
MARET 2015

MODUL IV
PHP (Hypertext Preprocessor)
A. TUJUAN
Setelah melakukan praktikum tentang PHP Hypertext Preprocessor mahasiswa
diharapkan:
 Memahami struktur dasar dokumen PHP.
 Mampu membuat dokumen PHP yang baik dan benar.
 Mampu memanfaatkan elemen-elemen dasar untuk mengolah dan menampilkan
informasi.
B. ALOKASI WAKTU
4 JS (4 x 50 menit)
C. PETUNJUK
D. DASAR TEORI
1. PHP
PHP( Hypertext Prepocessor) merupakan salah satu bahasa web scripting yang sangat
powerful.Ditemukan pertama kali oleh Rasmus Lerdorf tahun 1994. Bahasa ini dimaksudkan untuk
menghasilkan
halaman – halaman web yang dinamis.
Karakteristik penulisan :
2. Tipe Data
PHP mendukung delapan tipe primitif, yang terdiri dari empat tipe skalar (boolean,
integer,float/double,dan string). Dua tipe gabungan (array dan object) dan sisanya
adalah tipe khusus(NULL dan resource). Meskipun keberadaan tipe data dalam deklarasi variabel
tidak penting, namun dalam tahp selanjutnya sangatlah penting.

3. Komentar
PHP mendukung tiga jenis sintaks untuk menuliskan baris komentar, meliputi style C, C++
dan Perl/Shell. Penggunaan sebagai berikut:
4. Tag PHP
Parser PHP bekerja dengan menggunakan instruksi – instruksi yang diletakkan di antara tag
pembuka dan penutup. Ada beberapa tag yang selalu tersedia diantaranya , ada dua dari empat
jenis tag yang selalu tersedia tanpa memerlukan konfigurasi adalah style XML dan SCRIPT.
Dua style tag lainnya memerlukan aktivasi dukungan di file konfigurasi php.
E. LATIHAN
1. Program PHP
Dalam pembuatan aplikasi web, instruksi – instruksi PHP akan dikombinasikan dengan
elemen – elemen HTML. Meskipun PHP dapat digunakan untuk membungkus keseluruhan dokumen
HTML, namun sebaiknya hal ini tidak kita lakukan. Hal ini dapat menyulitkan pembacaan kode,
langkah ini juga kurang efisien.
Pendekatan yang disarankan dalam kombinasi ini yaitu memisahkan kode program PHP dari
dokumen HTML. Sebagai contoh, ketikkan kode berikut dan simpan dengan nama php_html.php
(ekstensi file yang digunakan adalah php)
Latihan 1
Program PHP
Sorce Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org//1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Demo</title>
</head>
<body>
<?php
echo 'Kode PHP di sini';

//...
?>
<p> Dokumen HTML </p>
<?php
echo 'Kode PHP di sini';
//...
?>
</body>
</html>
Printscreen
Program PHP 2
Berkenaan dengan kombinasi ini, tag PHP menyediakan shortcut untuk meringkas
penulisan kode. Shortcut ini digunakan ketika ingin menuliskan kode – kode kecil di dalam
HTML.
Sorce Code
<head>
<title>Demo</title>
</head>
<body>
<p> Kode <?php echo "PHP";?> di HTML </p>
</body>
</html>
Printscreen

Penjelasan
Latihan Program PHP 1 dan 2 adalah membuat sebuah file html dengan menggunakan
pendekatan bahasa PHP (Hypertext Preprocessor). Dalam tata penulisan source code PHP,
diawali dengan tag <?php dan di akhiri dengan tag ?>. Untuk menampilkan teks dengan
menggunakan PHP dapat menggunakan echo diikuti dengan teks yang akan ditampilkan
dengan menggunakan PHP dengan diapit dengan tanda petik (“....”). PHP juga
memperbolehkan terjadinya kombinasi antara tag html dengan tag PHP di dalamnya
sehingga PHP menyediakan shortcut untuk meringkas penulisan kode. Shortcut ini
digunakan ketika ingin menuliskan kode – kode kecil di dalam HTML.
2. Variabel
Digunakan untuk menyimpan sebuah value, data atau informasi. Beberapa aturan penulisannya :
 Nama variabel diawali dengan tanda $
 Panjang tidak terbatas
Setelah tanda $ diawali oleh huruf atau under – score (_).Karakter berikutnya terdiri dari
huruf, angka dan karakter tertentu yang diperbolehkan (karakter ASCII dari127 -255)
 Bersifat case sensitive
 Tidak perlu dideklarasikan
 Tidak boleh mengandung spasi
 Contoh:
Benar Salah
- $_name - $3name
- $first_name - $name?
- $name - $first+name
- $name_3 - $first.name
- $first name
Simpan file berikut dengan nama demo_var.php
Latihan 2
Variabel 1
Source Code
<head>
<title>Demo Variable</title>
</head>
<body>
<?php
// Deklarasi dan inisialisasi
$bil = 3;

echo $bil;
?>
</body>
</html>
Printscreen
Di tahap pengembangan, kita bisa memanfaatkan fungsi var_dump()atau print_r()untuk
memudahkan pemeriksaan variabel. Simpan dengan nama file demo_var2.php
Variabel 2
Source Code
<head>
<title>Demo Variabel</title>
</head>
<body>
<?php
// Deklarasi dan inisialisasi
$bil = 3;
// Dumping informasi mengenai variabel
var_dump($bil);
print_r($bil);
?>
</body>
</html>
Printscreen

Penjelasan
Dalam kode program PHP, penulisan variabel diawali dengan simbol $ . Selain
itu penulisan Variable pada program PHP ini tidak memerlukan proses pendeklarasian
tipe data dari variabel tersebut (secara otomatis akan dideklarasikan pada variabel
tersebut). Untuk mengetahui jenis tipe data yang digunakan pada sebuah variable, kita
dapat menggunakan perintah var_dump. Perintah tersebut akan secara otomatis
menampilkan jenis data yang digunakan dan berapa digit data yang terletak pada
variable tersebut seperti pada program variabel 2. Setelah var_dump diikuti oleh print_r
yang digunakan untuk menampilkan variabel bil. Sama halnya dengan fungsi echo untuk
menampilkan teks namun untuk print_r ini menggunakan struktur yang berbeda dengan
fungsi echo.
3. Tipe Data dan Casting
PHP menyediakan fungsi – fungsi berawalan is_ yang dapat dimanfaatkan untuk menguji
tipe data dari suatu variabel. Kecuali fungsi is_bool(), penamaan fungsi– fungsi lainnya persis
seperti tipe data terkait, misalnya is_integer(),is_float(),is_object() dan is_null().
Latihan 3
Pengujian Tipe Data “Is”
Source Code
<head>
<title>Cek Tipe</title>
</head>
<body>
<?php
$bil = 3;
var_dump(is_int($bil));
//Output: bool(true)
$var = "";
var_dump (is_string($var));
// Output: bool(true)
?>

</body>
</html>
Printscreen
Penjelasan
Dalam kode program PHP, dapat dilakukan pengecekan / pengujian tipe data
yang digunakan dari sebuah variable dengan menggunakan fungsi is_. Source Code
PHP di atas hendak mengecek apakah variable bil bertipe Integer dan variable var
bertipe String, maka terdapat perintah is int($bil) dan is string($var). Hasil
pengecekan akan berupa boolean (jika pengecekan benar akan bernilai true,
sedangkan jika salah akan bernilai false).
Casting
Untuk menguji aplikasi web, kita mempublikasikannya ke web server,baik secara
lokal maupun internet. Lingkungan lokal tentu merupakan pilihan yang efisien, khususnya
ketika aplikasi masih dalam tahap pengembangan.
Source Code
<html>
<head>
<title>Casting Tipe</title>
</head>
<body>
<?php
$str = '123abc';
//casting nilai variabel $str ke integer
$bil = (int) $str; //$bil = 123
echo gettype ($str);

//output: string
echo gettype($bil);
//output:integer
?>
</body>
</html>
Printscreen
Penjelasan
Tipe data dapat dirubah sesuai keinginan kita dengan menggunakan perintah
Type Casting. Dalam PHP terdapat beberapa tipe data yang dapat digunakan dalam
pemrograman PHP seperti boolean, integer, float, string yang secara default
menggunakan tipe juggling yaitu pendefinisian tipe data secara otomatis dengan
melihat konteksnya. Untuk merubahnya digunakan tipe casting seperti pada latihan di
atasb yaitu merubah dari tipe data variabel str ke integer. Dimana variabel bil
memiliki tipe data integer.
4. Pernyataan Seleksi
Pernyataan seleksiuntuk pengambilan keputusan merupakan bagian dari bahasa
pemrograman yang sangat penting. Pernyataan – pernyataan pengambilan keputusan di PHP
diklasifikan ke dalam empat bagian yaitu:
a. if
Pernyataan if terdiri dari suatu ekspresidan sebuah statemen atau blok statemen yang
dieksekusi apabila
ekspresi bernilai true.
Latihan 4
Seleksi If
Source Code
<html>
<head>
<title>Seleksi</title>
</head>

<body>
<?php
$a = 10;
$b = 5;
if ($a > $b){
echo 'a lebih besar dari b';
}
?>
</body>
</html>
Printscreen
Penjelasan
Pada latihan di atas, kita menggunakan perkondisian dengan struktur If.
Perkondisian dengan Struktur if ini hanya terdiri dari satu ekspresi dan satu buah blok
statemen. Blok Statemen ini akan dieksekusi apabila sebuah ekspresi tersebut bernilai
benar (true). Pada Ekspresi pada program PHP di atas adalah variabel $a lebih besar
dari variabel $b ($a didefinisikan dengan nilai 10 dan $b didefinisikan dengan nilai
5). Karena Ekspresi bernilai benar (true), maka perkondisian akan menjalankan
perintah blok statemennya. Sehingga akan ditampilkan a lebih besar dari b.
b. if-else
Pernyataan ini sebenarnya merupakan ekspansi dari pernyataan if. Disini blok
pertama akan dieksekusi manakala ekspresi bernilai true . Jika ekspresi bernilai false ,
blok kedua yang dieksekusi.
Seleksi If - Else
Source Code
<html>
<head>
<title>Seleksi if-else</title>
</head>

<body>
<?php
$a = 10;
$b = 5;
if ($a > $b){
} else {
echo 'a TIDAK lebih besar dari b';
}
?>
</body>
</html>
Printscreen
Penjelasan
Pada latihan di atas, merupakan penyeleksian dengan menggunakan program
PHP dengan menggunakan perkondisian dengan struktur If-Else. Perkondisian
dengan Struktur if-else ini hanya terdiri dari satu buah ekspresi, akan tetapi memiliki
dua buah blok statemen. Statement tersebut adalah statement yang berisi true (pada
bagian setelah kondisi) dan berisi false (pada bagian setelah else). Dalam Ekspresi
program PHP di atas adalah $a>$b (variabel $a didefinisikan dengan 10 dan variabel
$b didefinisikan dengan 5). Jika Ekspresi bernilai benar (true), maka perkondisian
akan menjalankan sebuah blok statemen “a lebih besar dari b”. Karena kondisi benar
maka ditampilkan a lebih besar dari b.
c. if-elseif
Pernyataan ini sebenarnya merupakan ekspansi dari pernyataan if -else. Dimana di
tambahkan lagi blok if – else. Bentuk pernyataan if_elseif memungkinkan kita untuk
menciptakan seleksi yang lebih kompleks.
Seleksi If - ElseIf
Source Code
<html>
<head>
<title>Seleksi if-elseif</title>
</head>
<body>
<?php

$a = 10;
$b = 5;
if ($a > $b){
} elseif ($a == $b){
echo 'a sama dengan b';
} else {
echo 'a kurang dari b';
}
?>
</body>
</html>
Printscreen
Penjelasan
Pada latihan di atas, merupakan penyeleksian dengan menggunakan program PHP
dengan menggunakan perkondisian dengan struktur If-ElseIf. Perkondisian dengan Struktur
if-else-if ini terdiri dari dua (atau lebih) ekspresi, serta memiliki dua(atau lebih) blok
statemen. Statement tersebut adalah statement yang berisi true bila kondisi memenuhi dan
ketika kondisi lain yang terpenuhi maka akan menjalankan statement dari kondisi tersebut.
Program PHP di atas memiliki dua buah ekspresi, yaitu $a > $b dan $a==$b. Jika Ekspresi
pertama bernilai benar (true), maka perkondisian akan menjalankan sebuah blok statemen “a
lebih besar dari b”. Sedangkan jika Ekspresi kedua yang bernilai benar (true) , maka
perkondisian akan menjalankan sebuah blok statemen “a sama dengan b”. Akan tetapi jika
kedua statement bernilai salah/false (tidak ada yang memenuhi), maka perkondisian akan
menjalankan sebuah blok statemen “a kurang dari b”. Karena variabel $a lebih besar dari
variabel $b maka akan dijalankan a lebih besar dari b.
d. Pernyataan switch
Sebuah pernyataan control flow yang dimulai dengan suatu ekspresi dan mentransfer
kontrol ke satu kasus berdasarkan nilai ekspresi.
Switch
Source Code

<html>
<head>
<title>Seleksi Switch</title>
</head>
<body>
<?php
$i = 0;
if ($i == 0){
echo "i equals 0";
} elseif ($i == 1){
echo "i equals 1";
}
elseif ($i == 2){
echo "i equals 2";
}
//Ekuivalen, dengan pendekatan switch
switch ($i) {
case 0:
echo "i equals 0";
break;
case 1:
echo "i equals 1";
break;
case 2:
echo "i equals 2";
break;
}
?>
</body>
</html>
Printscreen
Penjelasan
Pada latihan di atas, membuat program PHP dengan membandingkan pengkondisian
dengan menggunakan struktur if-elseif dan switch. Dalam latihan di bandingkan hasil output
antara menggunakan struktur if-else if dan switch yang hasil outputnya sama yaitu i equals 0.
Untuk kondisi dari penyeleksian tersebut menggunakan tiga kondisi yaitu kondisi jika
variabel $i bernilai 0, 1, atau 2. Jika bernilai 0 maka akan menampilkan i equals 0, jika
bernilai 1 maka akan menampilkan i equals 1, dan jika bernilai 2 maka akan menampilkan i
equals 2. Secara logika penggunaan struktur pengkondisian if-elseif sama fungsinya dengan
penggunaan switch namun berbeda dalam hal penulisan strukturnya.

5. Pengulangan
Bagian ini akan menguraikan jenis – jenis dan implementasi struktur kontrol perulangan
Pengulangan while.
Latihan 5
Pengulangan While
Source Code
<html>
<head>
<title>Loop While</title>
</head>
<body>
<?php
$i = 0;
while ($i < 10){
echo $i;
//Inkremen counter
$i++;
}
?>
</body>
</html>
Printscreen
Penjelasan
Pada latihan di atas, kita menggunakan perulangan dengan struktur while. Pada
perulangan struktur while kondisi dilakukan perulangan terletak pada awal blok. Perintah
dilakukan selama perulangan bernilai benar dan berhenti ketika bernilai salah. Pada
latihan ini pada perulangan while terdapat kondisi dimana terjadi perulangan jika
variabel $i kurang dari10, ketika nilainya kurang dari 10 maka akan menampilkan
variabel $i dan melakukan increament pada variabel $i hingga kondisi tidak terpenuhi $i
≥10.

Pengulangan do – while
Bentuk pengulangan ini mirip dengan while, kecuali bahwa ekspresi pengontrolan pengulangan
dilakukan di akhir blok. Ini juga berarti bahwa blok pengulangan akan dieksekusi seddikitnya satu
kali, meskipun bernilai false.
Pengulangan Do-While
Source Code
<html>
<head>
<title>Loop do-While</title>
</head>
<body>
<?php
$i = 0;
do {
echo $i;
//inkremen counter
$i++;
} while ($i < 10);
?>
</body>
</html>
Printscreen
Penjelasan
Pada latihan di atas, merupakan perulangan PHP dengan menggunakan perulangan
dengan struktur do-while. Pada perulangan struktur do-while pengkondisian dilakukan
diakhir blok. Ini berarti bahwa blok perulangan akan dieksekusi sedikitnya satu kali
(meskipun pengontrolan bernilai false) karena dilakukan perulangan terlebih dahulu baru
dilakukan pengecekan kondisi. Pada latihan ini pada perulangan do-while terdapat
kondisi dimana ($i<10), dimana $i bernilai 0 dan akan melakukan increament dan
ditampilkan hingga kondisi tidak terpenuhi untuk dilakukan perulangan. Sehingga akan
menampilkan nilai 0 hingga 9.

Pengulangan for
Struktur :
1. Ekspresi inisialisasi,
2. Kondisi perulangan, dan
3. Ekspresi inkremen
Pengulangan For
Source Code
<html>
<head>
<title>Loop for</title>
</head>
<body>
<?php
for ($i = 0 ; $i < 10; $i++) {
echo $i;
}
?>
</body>
</html>
Printscreen
Penjelasan
Pada latihan di atas, merupakan pemrograman perulangan PHP dengan menggunakan
perulangan dengan struktur for. Struktur for ini umumnya memiliki tiga buah struktur,
yaitu Ekspresi inisialisasi, kondisi perulangan dan ekspresi inkremen atau dekremen.
Pada latihan ini pada perulangan for, ekspresi inisialisasi didefinisikan dimana variabel
$i = 0. Perulangan akan terus dilakukan jika kondisi perulangan $i < 10 terpenuhi dan
dilakukan inkremen pada variabel $i Sehingga akan ditampilkan nilai 0 hingga 9.
Pengulangan foreach
PHP juga menyediakan konstruksi foreach yang dapat digunkanan untuk melakukan iterasi di
array atau koleksi

Pengulangan For Each
Source Code
<html>
<head>
<title>Loop foreach</title>
</head>
<body>
<?php
$arr = array(1, 2, 3, 4);
foreach ($arr as $value) {
echo $value;
}
?>
</body>
</html>
Printscreen
Penjelasan
Pada latihan di atas, merupakan pengulangan pada pemrograman PHP dengan
menggunakan perulangan dengan struktur foreach. Perulangan dengan struktur foreach
ini digunakan untuk melakukan iterasi menggunakan array. Pada latihan ini perulangan
foreach diawali dengan mendeklarasikan sebuah array dengan nama $arr dan dilakukan
proses inisialisasi. Kemudian melakukan perulangan berdasarkan array $arr. Sehingga
akan menampilkan bilangan 1234.
6. Fungsi dan Prosedur
Definisi Fungsi/Prosedur
Latihan 6
Definisi Fungsi/Prosedure
Source Code
<?php
//contoh prosedur
function do_print(){
//mencetak informasi timestamp
echo time();

}
//memanggil prosedur
do_print();
echo'<br/>';
//contoh fungsi penjumlahan
function jumlah ($a, $b){
return ($a + $b);
}
echo jumlah(2,3);
//output: 5
?>
Printscreen
Penjelasan
Pada program latihan di atas merupakan penggunaan fungsi dan prosedur pada
pemrograman PHP. Dalam latihan di atas terdapat dua fungsi yang digunakan yaitu
prosedure do_print dan fungsi jumlah. Pada prosedure do_print dilakukan pencetakan
informasi timestamp dengan menggunakan fungsi echo time. Di luar prosedur do_print
dilakukan pemanggilan prosedur tersebut sehingga pada procedure diperlukan
pemanggilan di luar prosedur. Berbeda dengan fungsi jumlah, fungsi jumlah memberikan
nilai balikan sehingga dapat dipanggil dan dilakukan proses penjumlahan dengan
memanggil parameter ke fungsi jumlah.
Argumen Fungsi/Prosedur
Suatu fungsi dapat memiliki nol atau lebih argumen. Adapun jika diperlukan,
juga bisa dideklarasikan argumen yang sifatnya opsional. Deklarasi ini sekaligus
menginisialisasi nilai default pada argumen. Selain itu, argumen opsional harus
diletakkan di urutan paling belakang.
Argumen Fungsi/Prosedure
Source Code

<?php
/**
*Mencetak string
*$teks nilai string
*$bold adalah argumen opsional
*/
function print_teks ($teks, $bold = true){
echo $bold? '<b>'. $teks. '</b>' : $teks;
}
print_teks ('Indonesiaku');
//Mencetak dengan huruf tebal
print_teks ('Indonesiaku', false);
//Mencetak dengan huruf reguler
?>
Printscreen
Penjelasan
Sebuah fungsi dapat memiliki beberapa argumen ataupun tidak memiliki sama sekali.
Pada latihan di atas merupakan salah satu contoh pembuatan sebuah argumen dalam PHP
yang dapat dipanggil atau tidak dan sifatnya opsional. Pada latihan di atas terdapat
sebuah fungsi dengan nama print_teks. Fungsi tersebut memiliki argumen dengan
deklarasi bersifat opsional (ketebalan/bold). Jika dipanggil fungsi bold, maka teks akan
dicetak dengan tebal. Akan tetapi jika fungsi bold dipanggil dan bernilai false, maka teks
akan dicetak dengan normal.
F. Tugas Praktikum
Tugas Praktikum 1
Buat fungsi greeting yang menerima argumen integer jam (format 24 jam) dan
mengembalikan nilai string (Selamat Pagi, Selamat Siang atau Selamat malam).
Jika tidak memenuhi makan akan engembalikan string kosong.
Source Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Greeting</title>

</head>
<body>
<center>
<h1>
<?php
function greeting()
{
$date = date ("G : i : s A");
date_default_timezone_set("Asia/jakarta");
if ($date>=00 and $date<10) {
echo "Selamat Pagi";
} else if ($date>=10 and $date<14) {
echo "Selamat Siang";
echo "Selamat Sore";
echo "Selamat Malam";
}else echo "Waktu salah)";
}
?>
<?php greeting(); ?><br>
</h1>
<h2> Selamat Datang di <a href="https://Gisrarahmadhita-
padang.blogspot.com"> Nagari Minangkabau</a></h2>
<h3> Sekarang adalah
<?php
//Array Hari
$array_hari = array(1=>"Senin","Selasa","Rabu","Kamis","Jum'at",
"Sabtu","Minggu");
$hari = $array_hari[date("N")];
//Format Tanggal
$Tanggal = date ("j");
//Array Bulan
$array_bulan = array(1=>"Januari","Februari","Maret", "April", "Mei",
"Juni","Juli","Agustus","September","Oktober", "November","Desember");
$Bulan = $array_bulan[date("n")];
//Format Tahun
$Tahun = date("Y");
//Menampilkan hari dan tanggal
echo "hari $hari, Tanggal $Tanggal $Bulan $Tahun";
?>
<br>
Waktu Menunjukkan Pukul
<?php
//penulisan waktu
$date = date ("G : i : s A");
echo "$date WIB";
?>
</h3>
</body>
</html>
Print Screen

Penjelasan
Pada tugas praktikum 1 membuat sebuah program menggunakan
pemrograman PHP untuk memberikan greeting sesuai dengan waktu saat ini
(menggunakan format 24 jam). Dalam prosedur greeting dapat memperoleh
waktu saat ini dengan menggunakan fungsi date yaitu memanggil secara otomatis
waktu default dari PC . Fungsi date ini didefinisikan pada variabel date dimana
fungsi date sendiri membawa parameter G yang menunjukkan jam dan i yang
menyatakan menit. Setelah dilakukan pemanggilan fungsi date untuk
mendapatkan waktu selanjutnya dilakukan pengkondisian untuk melakukan
greeting sesuai dengan waktu yang ada dengan menggunakan pengkondisian If-
ElseIf dimana ketika jam 00.00 wib hingga 10.00 wib ($date>=0 and $date<10)
maka akan menampilkan ucapan selamat pagi. Dan ketika jam 10.00 wib hingga
15.00 wib ($date>=10 and $date<15) maka akan menampilkan ucapan selamat
siang. Dan ketika jam 15.00 wib hingga 19.00 wib ($date>=15 and $date<19)
maka akan menampilkan ucapan selamat sore. Dan ketika jam 19.00 wib hingga
00.00 wib ($date>=19 and $date<00) maka akan menampilkan ucapan selamat
malam. Ketika prosedur greeting terpenuhi kondisinya maka akan menampilkan
ucapan sesuai dengan waktu saat ini. Prosedur greeting ini selanjutnya dipanggil
pada program. Dengan melakukan kombinasi antara array dengan fungsi date
maka akan dapat menampilkan hari , bulan, dan tahun. Selain itu ditampilkan
pula waktu saat ini.
Tugas Praktikum 2

Buat fungsi sederhana untuk men generate matriks sel pada tabel. Misalkan
diberikan argumen 3 (baris) dan 4 (kolom). Maka program akan menampilkan
tabel berisi 3 baris dan 4 kolom sel.
Source Code
<head>
<title>Generate Table</title>
</head>
<body>
<h3>Generate Table</h3>
<table>
<form action="<?php $_SERVER['PHP_SELF'];?>" method="get">
<tr>
<td>Masukkan Nilai Baris</td>
<td>: <input type="text" size="15"
name="baris"></td>
</tr>
<tr>
<td>Masukkan Nilai Kolom</td>
<td>: <input type="text" size="15"
name="kolom"></td>
</tr>
<tr>
<td></td>
<td valign="top"><input type="submit"
name="submit" value=" OK "></td>
</tr>
</form>
</table>
<br />
<?php if(isset($_GET['submit'])){
$baris = $_GET["baris"];
$kolom = $_GET["kolom"];
function generate($baris, $kolom){
$cell = 0;
echo "<table border='2' cellpadding='10'>";
for($i = 0; $i < $baris; $i++){
echo "<tr>";
for($j = 0; $j < $kolom; $j++){
++$cell;
echo "<td>$cell</td>";
}
echo "</tr>";
}
echo "</table>";
}
if(isset($baris) AND isset($kolom)){
generate($baris, $kolom);
}
}
?>
</body>
Print Screen

Penjelasan
Program di atas merupakan program PHP untuk menggenerete sebuah matriks 3 x 4
dimana berupa cell tabel yang dibuat dengan menggunakan php. Untuk membuatnya
dibuatlah sebuah fungsi create_table dengan parameter baris dan kolom dimana pada fungsi
ini terdapat perulangan untuk membuat tabel yaitu perulangan untuk baris dan kolom
sehingga pada saat perulangan dilakukan generate table yang terdiri atas baris dan kolom.
Dimana fungsi Create_table ini kemudian dipanggil dan diberikan parameter 3,4 yang berarti
3 baris dan 4 kolom seperti pada printscreen di atas.

G. Studi Kasus
a. Studi Kasus 1
Uraikan secara ringkas menangani passing argumen di PHP dan berikan contoh
passing by value dan by reference.
Passing Argumen
Dalam bahasa pemrograman web yang menggunakan PHP terdapat beberapa
argumen, dimana argumen adalah parameter yang digunakan atau disertakan pada
saat pemanggilan fungsi untuk diproses dalam fungsi. Pada penjelasan kali ini
akan membahas mengenai argumen fungsi yang dilewatkan secara Pass by Value
dan Pass By Reference. Dalam hal ini akan dijelaskan bagaimana kegunaan
masing-masing fungsi ini dan contoh listing program sekaligus hasilnya...
1. Pass By Value
Argumen fungsi yang dilewatkan secara pass by value (default
dalam php) berarti membuat kopi dari argumen yang asli sehingga argumen
asli tersebut tidak ikut berubah dengan adanya proses pada fungsi terhadap
argumen tersebut. Berikut adalah salah satu contoh listing program dari pass
by value.
Source Code
Printscreen
Penjelasan
Pada saat fungsi jumlah dipanggil, jumlah($input);fungsi tersebutakanmemasukkan
nilai dari variabel $inputkedalam argumennya,jadi disini argumenfungsi jumlah
adalah8 (ini adalah nilai aslinya).selanjutnyaPHPmeng-copynilai asli

tersebut, kemudianhasil copy-nyadigunakanuntukprosesmanipulasi
fungsi, sedangkannilaiyangasli dibiarkantidakberubah.Proses manipulasinyasbb:
$nilai++;
$nilai = $nilai + 1
$nilai = 8 + 1
$nilai = 9
Untuk output, echo$input;nilai variabel $inputyangdiambil disiniadalah nilai variabel
aslinya, sehinggahasil manipulasi fungsi tadi tidakdipakai,karenabukan nilai asli.Jadi
outputnyaadalah8
2. Pass By Reference
Argumen fungsi yang dilewatkan secara pass by reference berarti membawa
argumen asli ke dalam fungsi sehingga argumen asli tersebut akan ikut berubah
dengan adanya proses pada fungsi terhadap argumen tersebut. Berikut adalah
contoh listing program dari Pass By Reference.
Source Code
Print Screen
Penjelasan
Dari listing diatas dapat dijelaskan bahwa pass by reference berbeda dengan
passing by value yang bersifat mengkopi, passing by reference memberikan nilai
aslinya untuk diakses dan dimanipulasi, dengan contoh yang sama seperti diatas,
kita akan modifikasi menjadi mekanisme passing by reference.Untuk mengubah

jadi passing by reference, kita hanya cukup menambahkan operator & pada
argumennya.Sesuai dengan penjelasan passing by reference diatas, nilai yang
diakses & dimanipulasi adalah nilai aslinya, dengan begitu hasil manipulasi
fungsilah yang gunakan sebagai outputnya, yaitu 9.
b. Studi Kasus 2
Buat program sederhana untuk men generate sel tabel secara fleksibel.
Tekniknya, buat sebuah fungsi yang menerima argumen berapa jumlah sel dan
jumlah kolom. Jadi, pembentukan sel tabel didasarkan
pada nilai jumlah sel dan jumlah kolom yang diberikan. Sebagai contoh, hasil
program dengan argumen 12 (sel) dan 5 (kolom) diperlihatkan seperti Gambar 1.
Source Code

Printscreen
Penjelasan
Kode program PHP di atas berisikan sebuah fungsi sederhana untuk men generate
sel tabel secara fleksibel Kode program PHP di atas di awali dengan
pendeklarasian variable jumlah_kolom dan jumlah_cel. Kemudian pemberian
inisialisasi jumlah_kolom=5 dan jumlah_cel=12
Kemudian menampilkan hasil pendeklarasian dan inisialisasi variable
jumlah_kolom dan jumlah_cel melalui perintah echo. Selanjutnya terjadi proses
pemanggilan fungsi jumlah, diikuti dengan nilai parameternya (jumlah_kolom
dan jumlah_cel). Di fungsi jumlah terjadi proses pembuatan kolom tabel dan baris
tabel (menggunakan perulangan struktur for). Penentuan jumlah kolom tabel di
dasarkan atas nilai variable jumlah_kolom
$a=0; $a<$jumlah_kolom; $a++ (lima buah kolom)
Sedangkan penentuan jumlah baris di dasarkan atas nilai variable jumlah_cel2.
Nilai variable jumlah_cel2 di dapat dari perhitungan
$jumlah_cel_2=($jumlah_cel/$jumlah_kolom)-2;
Kemudian ketika membuat baris tabel, terjadi proses pemanggilan fungsi
jumlah_kolom_bawah.Di fungsi jumlah_kolom_bawah ini terjadi proses
melengkapi baris tabel dengan sel-sel (menggunakan perulangan for), sehingga

tabel terlihat lebih proporsional. Setelah itu akan kembali ke fungsi jumlah. Pada
fungsi jumlah ini akan dilanjutkan dengan membuat sel sisa. Jumlah sel sisa
didapat dari perhitungan
$sisa= $jumlah_cel % $jumlah_kolom;
Sehinggajumlahsel yangterdapatpadatabel akansesuai dengannilai dari variable
jumlah_cel.Padakode programPHPdi atas terdapatdua buah fungsi,yaitufungsi
jumlahdanfungsi jumlah_kolom_bawah. Fungsi jumlahini digunakanuntuk membuat
kolomtabel,baristabel (tidaklengkap).Kolomyangdibuatmenggunakanprinsip
perulangan/repetitivedenganstrukturfor. Fungsi jumlahinijugadigunakanuntuk
menentukanjumlahsisasel yangbelumdiinputkankedalamtabel Fungsi
jumlah_kolom_bawahdigunakanuntukmelengkapi baristabel yangbelumlengkap
denganmenambahkansel-sel.Melengkapi baristabel tersebutjugamenggunakan
prinsipperulangan/repetitive denganstrukturfor.
H. Ujian Tengah Semester
Membuat halaman website dengan spesifikasi:Responsif,Menggunakan grid
sistem,dan terdapat sebuat slider gambar/foto
Source Code
About
<!DOCTYPE html>
<html>
<head>
<title>GISRA RAHMADHITA</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="main-header">
<div class="grid-container">
<h1 class="grid-2 main-logo"><a href="#">GISRA</a></h1>
<ul class="grid-8 main-nav">
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

</header>
<div class="main-banner hide-mobile">
<h1>GISRA RAHMADHITA</h1>
<p>Selamat Datang di Nagari Minangkabau,Padang - Sumatera
Barat</p>
</div>
<div class="grid-container" id="artikel">
<div class="grid-8">
<h2>BIODATA</h2>
<img class="image fit" src="image/1.jpg" />
<p><div class="col4">
<p>Nama :Gisra Rahmadhita</br> 
NIM : 130533608259</br> 
Alamat : Villa Permata Putri No.11</br> 
Prodi : S1 PTI 2013 Off. B </br> 
<li>SMPN 09 Padang (2007-2010) </li> 
<li>SMA Semen Padang (2010-2013) </li> 
<li>Universitas Negeri Malang (2013-sekarang) </li>

</p>
</div>
</p>
</div>
</div>
<footer class="main-footer">
<p>By : GISRA RAHMADHITA ©2015</p>
</footer>
</body>
</html>
Index
<!DOCTYPE html>
<html>
<head>
<title>GISRA RAHMADHITA</title>

<h1>GISRA RAHMADHITA</h1>
<p>Selamat Datang di Nagari Minangkabau,Padang - Sumatera
Barat</p>
</div>
<div class="grid-container" id="artikel">
<h3>Masakan Sumatera Barat</h3>
<h6><p>Jenis kuliner yang berkembang di provinsi Sumatera
Barat. Produk kuliner Sumatera Barat merupakan salah satu yang
dikenal luas di Indonesia dan disebut juga dengan istilah Masakan
Minangkabau yang diperkenalkan oleh para perantau Minangkabau dari
berbagai daerah di Sumatera Barat. Terdapat banyak resep dan variasi
masakan Sumatera Barat berdasarkan daerah, kota atau kabupatennya,
antara lain Bukittinggi, Padang, Padang Panjang, Payakumbuh,
Solok,Batusangkar, Agam, Dharmasraya dan sebagainya.Meskipun beraneka
ragam masakan Minangkabau bukan hanya berasal dari kota Padang,
Masakan Sumatera Barat telah terlanjur dikenal masyarakat awam dengan
sebutan Masakan Padang. Masakan Sumatera Barat dikenal banyak
menggunakan santan dan daging, memiliki rasa pedas dari penggunaaan
bumbu dan rempah-rempah. </p></h6>
<hr>
<h3>Kerajinan Tangan Minangkabau</h3>
<h6><p>Sulaman sebagai salah satu hasil kerajinan tangan
Minang sudah diakui dan diminati di negara ini dan bahkan sampai
keluar negeri. Setiap orang yang datang ke Sumatera Barat memimpikan
bisa membawa pulang buah tangan berupa kain sulaman. Mulai dari
hiasan dinding, taplak meja, sampul bantal, sendal, jilbab, mukenah
dan berbagai jenis dan motif pakaian muslim/muslimah.Diantara sekian
banyak jenis sulaman di Sumatera Barat, masih bisa kita temukan
sulaman tradisional Ampek Angkek, sebuah kecamatan di Kota
Bukittinggi. Sulaman ini merupakan sulaman tradisional yang dibawa
masuk ke Ampek Angkek pada era 1880-an oleh pedagang arab bernama
Khadijah dan Maryam. Slaman ini kemudian diajarkan pada masyarakat
setempat.</p></h6>
<hr>
</div>
<h2>Sejarah Singkat Kota Padang-Sumatera Barat</h2>
<img class="feat-img" src="image/sejarah.jpg" />
<p>Kota Padang adalah salah satu Kota tertua di pantai
barat Sumatera di Lautan Hindia. Menurut sumber sejarah pada awalnya

(sebelum abad ke-17) Kota Padang dihuni oleh para nelayan, petani
garam dan pedagang. Ketika itu Padang belum begitu penting karena
arus perdagangan orang Minang mengarah ke pantai timur melalui
sungai-sungai besar. Namun sejak Selat Malaka tidak lagi aman dari
persaingan dagang yang keras oleh bangsa asing serta banyaknya
peperangan dan pembajakan, maka arus perdagangan berpindah ke pantai
barat Pulau Sumatera.
Suku Aceh adalah kelompok pertama yang datang setelah Malaka
ditaklukkan oleh Portugis pada akhir abad ke XVI. Sejak saat itu
Pantai Tiku, Pariaman dan Inderapura yang dikuasai oleh raja-raja
muda wakil Pagaruyung berubah menjadi pelabuhan-pelabuhan penting
karena posisinya dekat dengan sumber-sumber komoditi seperti lada,
cengkeh, pala dan emas.
Kemudian Belanda datang mengincar Padang karena muaranya yang bagus
dan cukup besar serta udaranya yang nyaman dan berhasil menguasainya
pada Tahun 1660 melalui perjanjian dengan raja-raja muda wakil dari
Pagaruyung. Tahun 1667 membuat Loji yang berfungsi sebagai gudang
sekaligus tangsi dan daerah sekitarnya dikuasai pula demi alasan
keamanan.
Selanjutnya :
</br>
</p> <li>7 Agustus 1669
Puncak pergolakan masyarakat Pauh dan Koto Tangah melawan Belanda
dengan menguasai Loji-Loji Belanda di Muaro, Padang. Peristiwa
tersebut diabadikan sebagai tahun lahir kota Padang.
<ul></p></li></ul>
<li>20 Mei 1784
Belanda menetapkan Padang sebagai pusat kedudukan dan perdagangannya
di Sumatera Barat. Padang menjadi lebih ramai setelah adanya
Pelabuhan Teluk Bayur.
<ul></p></li></ul>
<li>31 Desember 1799.
Seluruh kekuasaan VOC diambil alih pemerintah Belanda dengan
membentuk pemerintah kolonial dan Padang dijadikan pusat kedudukan
Residen.
<ul></p></li></ul>
<li>1 Maret 1906.
Lahir ordonansi yang menetapkan Padang sebagai daerah Cremente (STAL
1906 No.151) yang berlaku 1 April 1906.
<ul></p></li></ul>
<li>9 Maret 1950.

Padang dikembalikan ke tangan RI yang merupakan negara bagian melalui
SK. Presiden RI Serikat (RIS), No.111 tanggal 9 Maret 1950.
<ul></p></li></ul>
<li>15 Agustus 1950.
SK. Gubernur Sumatera Tengah No. 65/GP-50, tanggal 15 Agustus 1950
menetapkan Pemerintahan Kota Padang sebagai suatu daerah otonom
sementara menunggu penetapannya sesuai UU No. 225 tahun 1948. Saat
itu kota Padang diperluas, kewedanaan Padang dihapus dan urusannya
pindah ke Walikota Padang.
<ul></p></li></ul>
<li>29 Mei 1958.
SK. Gubernur Sumatera Barat No. 1/g/PD/1958, tanggal 29 Mai 1958
secara de facto menetapkan kota Padang menjadi ibukota propinsi
Sumatera Barat.
<ul></p></li></ul>
<li>Tahun 1975
Secara de jure Padang menjadi ibukota Sumatera Barat, yang ditandai
dengan keluarnya UU No.5 tahun 1974 tentang Pokok-Pokok Pemerintahan
di Daerah, dengan Kotamadya Padang dijadikan daerah otonom dan
wilayah administratif yang dikepalai oleh seorang Walikota.*
<ul></p></li></ul>
Pada awalnya luas Kota Padang adalah 33 Km2, yang terdiri dari 3
Kecamatan dan 13 buah Kampung, yaitu Kecamatan Padang Barat, Padang
Selatan dan Padang Timur. Dengan Undang-undang Nomor 5 Tahun 1979 dan
Peraturan Pemerintah Nomor 17 Tahun 1980 tanggal 21 Maret 1980
wilayah Kota Padang menjadi 694,96 Km2, yang terdiri dari 11
Kecamatan dan 193 Kelurahan. Dengan dicanangkannya pelaksanaan
otonomi daerah sejak Tanggal 1 Januari 2001, maka wilayah
administratif Kota Padang dibagi dalam 11 Kecamatan dan 103
Kelurahan. Dengan Keluarnya Peraturan Daerah Kota Padang Nomor 16
Tahun 2004 tentang Pembentukan organisasi Kelurahan Maka jumlah
Kelurahan di Kota Padang menjadi 104 Kelurahan.
<</p>
</div>
</div>
<footer class="main-footer">
<p>By : GISRA RAHMADHITA ©2015</p>
</footer>
</body>
</html>

Grid.css
/* Global
================================ */
.grid-container {
padding-left: 10px;
padding-right: 10px;
margin-left: auto;
margin-right: auto;
}
img {
width: 100%;
}
/* Media Queries
================================ */
@media (min-width: 1px) and (max-width: 767px) {
.grid-container > [class^="grid-"] {
padding-top: 5px;
padding-bottom: 5px;
}
.hide-mobile {
display: none;
}
}
@media (min-width: 768px) {
/* Columns
================================ */
.grid-container > [class^="grid-"] {
float: left;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
margin-left: 2%;
}
.grid-container > [class^="grid-"]:first-child {
margin-left: 0;

}
.grid-container > [class^="grid-"]:last-child {
float: right;
}
/* Columns are 65px wide, with 20px gutters
=========================================== */
.grid-1 {
width: 6.5%;
}
.grid-2 {
width: 15%;
}
.grid-3 {
width: 23.5%;
}
.grid-4 {
width: 32%;
}
.grid-5 {
width: 40.5%;
}
.grid-6 {
width: 49%;
}
.grid-7 {
width: 57.5%;
}
.grid-8 {
width: 66%;
}
.grid-9 {
width: 74.5%;
}
.grid-10 {
width: 83%;
}
.grid-11 {
width: 91.5%;
}

.grid-12 {
width: 100%;
}
/* Clearfix
================================ */
.grid-container:after,
.group:after {
content: " ";
display: table;
clear: both;
}
}
.grid-container {
max-width: 1100px;
}
}
Normalize.css
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
/*
=====================================================================
=====
HTML5 display definitions
=====================================================================
===== */
/**
* Correct `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}

/**
* Correct `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9.
* Hide the `template` element in IE, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/*
=====================================================================
=====
Base
=====================================================================
===== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without
disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}

/*
=====================================================================
=====
Links
=====================================================================
===== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all
browsers.
*/
a:active,
a:hover {
outline: 0;
}
/*
=====================================================================
=====
Typography
=====================================================================
===== */
/**
* Address variable `h1` font-size and margin within `section` and
`article`
* contexts in Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}

/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Correct font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre-wrap;
}
/**
* Set consistent quote types.
*/
q {

quotes: "201C" "201D" "2018" "2019";
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/*
=====================================================================
=====
Embedded content
=====================================================================
===== */
/**
* Remove border when inside `a` element in IE 8/9.
*/
img {
border: 0;
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/*
=====================================================================
=====
Figures

=====================================================================
===== */
/**
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0;
}
/*
=====================================================================
=====
Forms
=====================================================================
===== */
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out
fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and
Chrome.
*/
button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}
/**
* Address Firefox 4+ setting `line-height` on `input` using
`!important` in
* the UA stylesheet.

*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and
`select`.
* All other form control elements do not inherit `text-transform`
values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE
8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native
àudio`
* and `video` controls.
* 2. Correct inability to style clickable ìnput` types in iOS.
* 3. Improve usability and consistency of cursor style between
image-type
* ìnput` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**

* 1. Address `appearance` set to `searchfield` in Safari 5 and
Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and
Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/*
=====================================================================
=====
Tables
=====================================================================
===== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}

/*
=====================================================================
=====
Lists
=====================================================================
===== */
/**
* Remove default list styles, margins and padding.
*/
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
Style.css
/* Page Styles
================================ */
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font: normal 1em/1.5 sans-serif;
color: #222;
background-color: #edeff0;
}
img {
border: solid 1px;
padding: 5px;
}
/* Main Layout Styles
================================ */
.main-header {
padding-top: 10px;
background-color: #384047;
}
.main-logo {

margin-top: 0;
margin-bottom: 0;
font-size: 1.5em;
}
.main-logo a,
.main-nav a {
display: block;
text-align: center;
border-radius: 5px;
color: white;
text-decoration: none;
padding: 10px 20px;
}
.main-logo a {
background-color: #5fcf80;
}
.main-nav a {
background-color: #3f8abf;
}
.main-footer {
text-align: center;
margin-top: 30px;
padding-top: 5px;
background-color: #b7c0c7;
}
/* Main Layout Styles
================================ */
.main-header {
top: 0;
width: 100%;
}
.main-nav {
text-align: right;
}
.main-nav li {
margin-top: 6px;
margin-left: 10px;

display: inline-block;
}
.main-banner {
background: #dfe2e4;
text-align: center;
padding: 50px 15px;
margin-bottom: 20px;
}
#slide{
width : 100%;
}
/* Imagery
================================ */
.feat-img {
width: 45%;
float: left;
margin: 5px 20px 10px 0;
}
.image
{
width: 30%;
float: left;
margin: 5px 20px 10px 0;
}
}
@media (min-width: 1px) and (max-width: 767px) {
.main-nav li {
margin-top: 12px;
}
}
Slider
nivo-slider.css
/*
* jQuery Nivo Slider v2.7.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.

* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}

/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
Default.css
/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: flexible
Description: The default skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
*/
.theme-default .nivoSlider {
position:relative;
background:#fff url(loading.gif) no-repeat 50% 50%;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}
.theme-default .nivo-controlNav {
position:absolute;
left:10%;
bottom:-5px;
margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {

display:block;
width:22px;
height:22px;
background:url(bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.theme-default .nivo-controlNav a.active {
background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(arrows.png) no-repeat;
border:0;
}
.theme-default a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
}
.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
color:#fff;
}
Orman.css
/*
Skin Name: Orman Theme
Skin Type: fixed
Description: A light and green skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom & Orman Clark
*/
.theme-orman.slider-wrapper {
background:url(slider.png) no-repeat;
width:722px;
height:337px;
margin:0 auto;
padding-top:18px;
position:relative;
}

.theme-orman .nivoSlider {
position:relative;
width:568px;
height:268px;
margin-left:77px;
background:url(loading.gif) no-repeat 50% 50%;
}
.theme-orman .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
width:568px; /* Make sure your images are the same size */
height:268px; /* Make sure your images are the same size */
}
.theme-orman .nivoSlider a {
border:0;
display:block;
}
.theme-orman .nivo-controlNav {
position:absolute;
left:50%;
bottom:-60px;
margin-left:-30px; /* Tweak this to center bullets */
}
.theme-orman .nivo-controlNav a {
display:block;
width:10px;
height:10px;
border:0;
margin-right:7px;
float:left;
}
.theme-orman .nivo-controlNav a.active {
}
.theme-orman .nivo-directionNav a {
display:block;
width:25px;
height:200px;
background:url(arrows.png) no-repeat 0% 50%;
border:0;
top:40px;
}
.theme-orman a.nivo-nextNav {
background-position:100% 50%;
right:-40px;
padding-right:20px;
}
.theme-orman a.nivo-prevNav {
left:-40px;
padding-left:20px;
}
.theme-orman .nivo-caption {

font-family: Helvetica, Arial, sans-serif;
}
.theme-orman .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-orman .nivo-caption a:hover {
color:#fff;
}
.theme-orman .ribbon {
background:url(ribbon.png) no-repeat;
width:111px;
height:111px;
position:absolute;
top:-3px;
left:56px;
z-index:300;
}
Pascal.css
/*
Skin Name: Pascal Theme
Skin Type: fixed
Description: A nice, light skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom & Pascal Gartner
*/
.theme-pascal.slider-wrapper {
background:url(slider.png) no-repeat;
width:668px;
height:299px;
margin:0 auto;
padding-top:17px;
position:relative;
}
.theme-pascal .nivoSlider {
position:relative;
width:630px;
height:235px;
margin-left:19px;
background:url(loading.gif) no-repeat 50% 50%;
}
.theme-pascal .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
width:630px; /* Make sure your images are the same size */
height:235px; /* Make sure your images are the same size */
}
.theme-pascal .nivoSlider a {
border:0;
display:block;
}

.theme-pascal .nivo-controlNav {
background:url(controlnav.png) no-repeat;
width:251px;
height:40px;
position:absolute;
left:200px; /* Tweak this to center bullets */
bottom:-42px;
padding:8px 0 0 82px;
z-index:20;
}
.theme-pascal .nivo-controlNav a {
display:block;
width:22px;
height:22px;
border:0;
margin-right:3px;
float:left;
}
.theme-pascal .nivo-controlNav a.active {
}
.theme-pascal .nivo-directionNav a {
display:none;
}
.theme-pascal .nivo-caption {
bottom:40%;
left:auto;
right:0px;
width:auto;
max-width:630px;
overflow:hidden;
background:#fff;
text-shadow:none;
font-family: arial, serif;
color:#4c4b4b;
}
.theme-pascal .nivo-caption p {
padding:5px 15px;
color:#333;
font-weight:bold;
font-size:27px;
text-transform:uppercase;
}
.theme-pascal .nivo-caption a {
color:#333;
font-weight:bold;
font-size:27px;
text-transform:uppercase;
}
.theme-pascal .ribbon {
background:url(ribbon.png) no-repeat;
width:111px;
height:111px;
position:absolute;
top:-8px;

left:-8px;
z-index:300;
}
Prinscreen
Untuk PC

Penjelasan
Pada bagian ini berisi Home,About,Articel. . Setiap menu memiliki link untuk
menuju halaman yang berbeda ,web yang tersaji dengan komposisi dari aturan
pemograman web , yang telah valid, hanya saja web ini di berikan tambahan fungsi
responsive yang berguna untuk memudahkan user dalam melihat dan mengoprasikan ,
web yang terjamah, sebagaimana yang di ketahui, browser web tidak hanya pada
dekstop saja, namun terdapat juga di dalam tablet , dan SmartPhone, hingga user
menambahkaan pada fungsi responsive untuk menjadikan semua perangkat dapat
mengoprasikannya dengan sangat interaktif , komunikatif dan flexibel.
Untuk Desain layout diatas menghasilkan bentuk layout dengan align kiri,
dengan menggunakan CSS dengan melakukan pengaturan pada style.css sehingga
terbentuk header navigation, sidebar dan footernya.nivoSlider berguna untuk
tampilan slide pada image.

I. KESIMPULAN.
 PHP( Hypertext Prepocessor) merupakan salah satu bahasa web scriptingyang sangat
powerful
 PHP mendukung delapan tipe primitif, yang terdiri dari empat tipe skalar (boolean,
integer, float/double, dan string). Dua tipe gabungan (array dan object) dan sisanya
adalah tipe khusus (NULLdan resource).
 PHP mendukung tiga jenis sintaks untuk menuliskan baris komentar, meliputistyle C,
C++ dan Perl/Shell
 Parser PHP bekerja dengan menggunakan instruksi – instruksi yang diletakkan di
antara tag pembuka dan penutup. Ada beberapa tag yang selalu tersedia diantaranya ,
ada dua dari empat jenis tag yang selalu tersedia tanpa memerlukan konfigurasi
adalah style XML dan SCRIPT.
 Variable digunakan untuk menyimpan sebuah value, data atau informasi.
 Tiap variable mempunyai tipe data yang bermacam-macam sesuai kebutuhan seperti
is_integer(), is_float(), is_object() dan is_null().
 Ada 4 macam pengklasifikasian pernyataan seleksi pada PHP yaitu if, if-else, if-elseif
dan switch.
 Ada 4 jenis perulangan pada PHP yaitu while, do-while, for dan for-each.
 Pada PHP juga terdapat fungsi dan prosedur. Fungsi adalah sebuah blok perintah yang
mengembalikan nilai. Prosedur adalah sebuah perintah yang dapat digunakan untuk
membagi beberapa kejadian dalam suatu kumpulan perintah yang lebih kecil tanpa
mengembalikan nilai.
J. Daftar Pustaka
o Sidik, Betha. 2012. Pemrograman Web dengan HTML revisi keempat.
Bandung:Informatika.
o Modul 4 Praktikum Pemrograman Berbasis Web. PHP. Malang: Pendidikan
Teknik Informatika Universitas Negeri Malang.
o http://amarullz.blog.unikom.ac.id/php-mengenal-tipe.h6 diakses tanggal 20
Maret 2014
o http://arum104.blogspot.com/2010/03/dasar-dasar-phppass-by-value-dan-
pass.html diakses tanggal 25 Maret 2014

Laporan pratikum iv web

More Related Content

What's hot

Similar to Laporan pratikum iv web

More from rahmi wahyuni

Recently uploaded

Laporan pratikum iv web