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 IVPHP (Hypertext Preprocessor)

A. TUJUANSetelah 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 TEORI1. 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 menghasilkanhalaman – halaman web yang dinamis.Karakteristik penulisan :

2. Tipe DataPHP 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. KomentarPHP mendukung tiga jenis sintaks untuk menuliskan baris komentar, meliputi style C, C++

dan Perl/Shell. Penggunaan sebagai berikut:

4. Tag PHPParser 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. LATIHAN1. 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 daridokumen 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>

<?phpecho '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


<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 dari 127 -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


<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

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

<!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>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 seleksi untuk 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 ekspresi dan 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-elsePernyataan 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){echo 'a lebih besar dari 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-elseifPernyataan 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){echo 'a lebih besar dari 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 switchswitch ($i) {

case 0:echo "i equals 0";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><?phpfunction 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";} else if ($date>=14 and $date<18) {echo "Selamat Sore";} else if ($date>=18 and $date<00) {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 tanggalecho "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 tersebut akan memasukkan

nilai dari variabel $input kedalam argumennya, jadi disini argumen fungsi jumlah

adalah 8 (ini adalah nilai aslinya). selanjutnya PHP meng-copy nilai asli tersebut,

kemudian hasil copy-nya digunakan untuk proses manipulasi fungsi, sedangkan nilai

yang asli dibiarkan tidak berubah. Proses manipulasinya sbb:

$nilai++;

$nilai = $nilai + 1

$nilai = 8 + 1

$nilai = 9

Untuk output, echo $input; nilai variabel $input yang diambil disini adalah nilai variabel

aslinya, sehingga hasil manipulasi fungsi tadi tidak dipakai, karena bukan nilai asli. Jadi

outputnya adalah 8

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;

Sehingga jumlah sel yang terdapat pada tabel akan sesuai dengan nilai dari variable

jumlah_cel. Pada kode program PHP di atas terdapat dua buah fungsi, yaitu fungsi

jumlah dan fungsi jumlah_kolom_bawah. Fungsi jumlah ini digunakan untuk membuat

kolom tabel, baris tabel (tidak lengkap). Kolom yang dibuat menggunakan prinsip

perulangan/repetitive dengan struktur for. Fungsi jumlah ini juga digunakan untuk

menentukan jumlah sisa sel yang belum diinputkan kedalam tabel Fungsi

jumlah_kolom_bawah digunakan untuk melengkapi baris tabel yang belum lengkap

dengan menambahkan sel-sel. Melengkapi baris tabel tersebut juga menggunakan

prinsip perulangan/repetitive dengan struktur for.

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>

<meta name="viewport" content="width=device-width">

<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 ThemeSkin URI: http://nivo.dev7studios.comSkin Type: flexibleDescription: The default skin for the Nivo Slider.Version: 1.0Author: Gilbert PellegromAuthor 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;text-indent:-9999px;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 ThemeSkin URI: http://nivo.dev7studios.comSkin Type: fixedDescription: A light and green skin for the Nivo Slider.Version: 1.0Author: Gilbert Pellegrom & Orman ClarkAuthor URI: http://dev7studios.com*/

.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; background:url(bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:7px; float:left;}.theme-orman .nivo-controlNav a.active { background-position:0 -10px;}

.theme-orman .nivo-directionNav a {display:block;width:25px;height:200px;background:url(arrows.png) no-repeat 0% 50%;text-indent:-9999px;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 ThemeSkin URI: http://nivo.dev7studios.comSkin Type: fixedDescription: A nice, light skin for the Nivo Slider.Version: 1.0Author: Gilbert Pellegrom & Pascal GartnerAuthor URI: http://dev7studios.com*/

.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; background:url(bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left;}.theme-pascal .nivo-controlNav a.active { background-position:0 -22px;}

.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

Tampilan Untuk Tab

TampilanUntuk Mobail

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

http://arum104.blogspot.com/2010/03/dasar-dasar-phppass-by-value-dan-pass.html

http://arum104.blogspot.com/2010/03/dasar-dasar-phppass-by-value-dan-pass.html

http://amarullz.blog.unikom.ac.id/php-mengenal-tipe.h6

laporan pratikum iv web

Data & Analytics