Scribd
Unggah
11 tayangan

Modul Web Programming I 2018

Diunggah oleh

hilman rismana
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
11 tayangan

Modul Web Programming I 2018

Diunggah oleh

hilman rismana
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 45

MODUL PRAKTIKUM

WEB PROGRAMMING I

Disusun Oleh : Khoirun Nisa, M.Kom

Sekolah Tinggi Manajemen Informatika dan Komputer


Nusa Mandiri

2018
WEB PROGRAMMING I

BAB I
Pengenalan HTML

Hypertext Markup Language (HTML) adalah sebuah bahasa untuk menampilkan konten di web.
HTML sendiri adalah bahasa pemrograman yang bebas, artinya tidak dimiliki oleh siapapun,
pengembangannya dilakukan oleh banyak orang di banyak Negara dan bias dikatakan sebagai sebuah
bahasa yang dikembangkan bersama-sama secara global. Sebuah dokumen HTML sendiri adalah
dokumen teks yang dapat diedit oleh editor teks apapun. Dokumen HTML punya beberapa elemen
yang dikelilingi oleh tag-teks yang dimulai dengan symbol < dan berakhir dengan sebuah symbol >.

1.1. Struktur Dasar HTML

Contoh penggunaan Script HTML

Kemudian simpan file di atas di dalam folder c:\xampp\htdocs\buat folder baru untuk menyimpan
file di dalam folder htdocs. Simpan file dengan nama contoh01.html. Pembuatan nama file pada saat
penyimpanan harus diakhiri dengan extention “.html”.

2
WEB PROGRAMMING I

Untuk melihat hasil dari file di atas dapat menggunakan browser Mozilla, Google Chrome, Internet
Explorer atau jenis browser lain. Ketikkan pada adress bar “localhost/namafolderpenyimpanan\”,
kemudian pilih file contoh01.html. Sebelum diketikkan alamat file tersebut, pastikan anda telah
menjalankan Module Apache pada Xampp Control Panel. Lihat gambar dibawah ini :

Hasilnya :

3
WEB PROGRAMMING I

Kode-kode dalam HTML biasanya disebut TAG. Tag adalah sesuatu yang digunakan untuk menandai
elemen-elemen dalam suatu dokumen HTML. Tag dalam HTML terdiri dari tanda tanda lebih kecil (<),
tanda lebih besar (>), dan garis miring (/).
Biasanya Tag dituliskan secara berpasangan, misalnya <h1> dan </h1>. Tag yang tidak menggunakan
garis miring (/) adalah Tag pembuka atau awal elemen. Sedangkan tag yang mengandung garis
miring(/) adalah penutup elemen atau akhir elemen. Namun ada Tag yang dalam pemakaiannya tidak
berpasangan, diantaranya adalah :
a. Tag untuk ganti paragraph yaitu <p>
b. Tag untuk ganti baris atau line break yaitu <br>
c. Tag untuk garis datar yaitu <hr>
d. Tag list item yaitu <li>
Contoh script penggunaan Tag HTML
Buat lembar baru pada Notepad, kemudian ketikkan perintah dibawah ini. Simpan dengan nama

contoh02.html.

Hasil Tampilan

4
WEB PROGRAMMING I

BAB II
PENGENALAN PHP DAN DASAR-DASAR PHP

PHP atau PHP Hypertext Preprocessor adalah sebuah bahasa pemrograman web berbasis server
(server-side) yang mampu memparsing kode php dari kode web dengan ekstensi .php, sehingga
menghasilkan tampilan website yang dinamis di sisi client (browser). Ada 4 jenis tag yang bisa
digunakan untuk memasukkan kode PHP.
Yang dapat langsung diterapkan di semua platform adalah tag standard dan tag script. Di dalam modul
ini bahasa pemrograman yang digunakan adalah PHP versi 5 sehingga jenis tag yang harus digunakan
adalah tag standar. Untuk tag lainnya perlu penyetingan di server oleh administrator server.

JENIS TAG TAG PEMBUKA TAG PENUTUP


Tag Standar <?php ?>
Tag pendek <? ?>
Tag ASP <% %>
Tag Script <script language=”php”> </script>

Bentuk skrip PHP yang berdiri sendiri : Bentuk skrip PHP yang disisipkan pada HTML :

<?php <html>
echo “Hai Aku adalah Script PHP”; <head>
?> <title>CONTOH</title>
</head>
<body>
<?php
echo “Hai Aku adalah Script PHP”;
?>
Contoh PHP : page1.php </body>
</html>
<html>
<head>
<title>SELAMAT DATANG</title>
</head>
<body>
<?php
echo"<body bgcolor=red text=white>";
echo"<center><font face=Ravie size=5></marquee>";
echo"<marquee behavior=alternate><B>SELAMAT DATANG!</B></marquee></font>";
echo"<hr>";
echo "Hari ini tanggal :" .date("d F Y");
echo"<br>Ini script PHP ku yang pertama";
echo"<br> Ini data diri saya loh..";

5
WEB PROGRAMMING I

echo "<a href=page2.php>KLIK";


echo "</center>";
echo"<hr>";
?>
</body>
</html>

Page2.php
<html>
<head>
<title>Title here!</title>
</head>
<body>
<?php
echo "<body bgcolor=white text=black>";
echo "<strong><center><h1><marquee>Data
Saya</marquee></h1></center><strong>";
echo"<hr><pre>";
echo"\t\t\t Nama : Khoirun Nisa <br>";
echo"\t\t\t Alamat : Bekasi <br>";
echo"\t\t\t Nama : Jakarta,14 Juni 1990 <br>";
echo"</pre>";
echo"<center><a href=page1.php>HOME</center>";
echo"<hr>";
?>
</body>
</html>

6
WEB PROGRAMMING I

BAB III
TIPE DATA, VARIABEL, KONSTANTA

1. Tipe Data
PHP mengenal 4 tipe data scalar dan tipe data compound. Tipe data scalar adalah tipe data integer,
floating point, string dan Boolean. Sedangkan 2 tipe data compound adalah array dan object, yaitu:
a. Integer, tipe data yang menyatakan bilangan bulat, contoh :
14
-12300 //negative
b. Floating point/double, tipe data yang menyatakan bilangan real/pecahan. Terdapat tanda titik
yang merupakan pemisah antara bagian bulat dan pecahan. Contoh :
4.567 //bentuk biasa
c. String, menyatakan tipe data teks yang berisi kumpulan beberapa karakter. Variabel dapat
digunakan untuk menyimpan berbagai jenis data. Misalnya data numeric yang dapat
dioperasikan secara matematika. Contoh :

string_numerik.php string_nonnumerik.php

<html> <html>
<head> <head>
<title>Tipe Data Numerik</title> <title>Variabel dan Tipe Data String</title>
</head> </head>
<body> <body>
<h1>Variabel dan Tipe Data Numerik</h1> <h1> Variabel dan Tipe Data NonNumerik</h1>
<? <?
$jumlah=10; $nama="Khoirun Nisa";
$harga=2000; $alamat="Bekasi Utara";
$total=$jumlah*$harga; echo"$nama,$alamat";
echo"Jumlah Beli=$jumlah<br>"; ?>
echo"Harga=$harga<br>"; </body>
echo"Total=$total<br>"; </html>
?>
</body>
</html>

d. Boolean, tipe data logika yang memiliki nilai true atau false.
e. Array, tipe data terstruktur yang berguna untuk menyimpan sejumlah data yang bertipe sama.

2. Variabel
Variabel merupakan sebuah istilah yang menyatakan sebuah tempat yang menampung nilai-nilai
tertentu di mana nilai di dalamnya bias diubah-ubah. Variabel ditandai dengan adanya tanda dolar
($) yang kemudian bias diikuti dengan angka, huruf dan underscore. Untuk mendefinisikan
variable, hanya perlu menuliskannya maka otomatis variable dikenali oleh PHP.
7
WEB PROGRAMMING I

Variabel.php
<html>
<head>
<title>Title here!</title>
</head>
<body>
<?
$nim="11082263";
$nama="NISA";
$kelas="11.6A.04";
echo "Nim Saya=$nim<br>";
echo "Nama Saya=$nama<br>";
echo "Kelas Saya=$kelas";
?>
</body>
</html>

3. Konstanta
Selain variabel, sebuah program umumnya juga memungkinkan adanya konstanta. Konstanta
fungsinya sama seperti variabel namun nilainya statis/konstan dan tidak bias berubah.

Define (“NamaKonstanta”,nilaikonstanta);

Konstanta.php
<html>
<head>
<title>Menghitung Luas Lingkaran</title>
</head>
<body>
<?
//Konstanta untuk Nilai Judul
define("Judul","Hitung Luas Lingkaran");
//Konstanta Untuk Nilai phi
define("phi",3.14);
echo Judul;
$r=10;
echo"<br>Jari-jari:$r<br>\n";
$luas=phi*$r*$r;
echo"Luas Lingkaran=$luas";
?>
</body>
</html>

8
WEB PROGRAMMING I

BAB IV
OPERATOR
1. Operator Aritmatika
Operator ini digunakan untuk melakukan perhitungan matematika.
OPERATOR FUNGSI CONTOH HASIL
+ Penjumlahan $a=7+3;echo $a; 10
- Pengurangan $a=7-3;echo $a; 4
* Perkalian $a=7*3;echo $a; 21
/ Pembagian $a=6/3;echo $a; 2
% Sisa Pembagian $a=7%3;echo $a; 1

aritmatika.php
<html>
<head>
<title>Operator Aritmatika</title>
</head>
<body>
<h3>Contoh Operator</h3>
<?
$bil1=200;
$bil2=30;
$hasil=$bil1+$bil2;
echo "$bil1+$bil2=$hasil<br>";
$hasil=$bil1-$bil2;
echo "$bil1-$bil2=$hasil<br>";
$hasil=$bil1*$bil2;
echo "$bil1*$bil2=$hasil<br>";
$hasil=$bil1/$bil2;
echo "$bil1/$bil2=$hasil<br>";
$hasil=$bil1%$bil2;
echo "$bil1%$bil2=$hasil<br>";
?>
</body></html>

2. Operator Perbandingan
Operator perbandingan digunakan untuk menghasilkan 2 nilai yang hasil akhirnya adalah nilai
Boolean true dan false.

9
WEB PROGRAMMING I

Operator Fungsi
< Lebih kecil dari
> Lebih Besar dari
<= Lebih kecil sama dengan
>= Lebih besar sama dengan
== Sama dengan
!= Tidak sama dengan

3. Operator Logika
Operator logika digunakan untuk membandingkan dua nilai variabel yang bertipe Boolean.
Hasil yang didapat dari penggunaan operator logika adalah Boolean.

Operator Fungsi
AND atau && Operasi Logika And
OR atau || Operasi Logika Or
! Ingkaran/Negasi

Berikut adalah contoh operator perbandingan dan logika :


Perbandingan.php

<html> echo "$bil1>=$bil2=$hasil<br>";


<head> $hasil=$bil1<=$bil2;
<title>Title here!</title> echo "$bil1<=$bil2=$hasil<br>";
</head> $hasil=$teks1==$teks2;
<body> echo "$teks1==$teks2=$hasil<br>";
<? $hasil=$teks1!=$teks2;
$bil1=100; echo "$teks1!=$teks2=$hasil<br>";
$bil2=20; ?>
$teks1="PHP"; </body>
$teks2="php"; </html>
$hasil=$bil1==$bil2;
echo "$bil1==$bil2=$hasil<br>";
$hasil=$bil1!=$bil2;
echo "$bil1!=$bil2=$hasil<br>";
$hasil=$bil1>=$bil2;

10
WEB PROGRAMMING I

OperatorLogika.php

<html>
<head>
<title>Title here!</title>
</head>
<body>
<?
$bil1=100;
$bil2=20;
$teks1="PHP";
$teks2="php";
$hasil=($bil1<>$bil2)or($teks1==$teks2);
echo "$bil1<>$bil2 or $teks1==$teks2 adalah $hasil<br>";
$hasil=!($teks1==$teks2);
echo"!($teks1==$teks2)adalah $hasil";
?>
</body>
</html>

4. Operator String
Dalam PHP juga tersedia operator string, yaitu digunakan untuk operasi penggabungan teks.
Adapun symbol yang digunakan yaitu berupa karakter titik (.). berikut adalah contoh file
operator string yaitu :
Operatorstring.php

<?php
$teks1=”Aku Sedang belajar”;
$teks2=”Pemrograman Web”;
$teks3=”Menggunakan Bahasa script PHP”;
$hasil=$teks1.$teks2.$teks3;

Echo “$hasil”;
?>

11
WEB PROGRAMMING I

BAB V
PENGENALAN FORM
1. Komponen Form
Sebuah website dinamis seringkali memerlukan interaksi antara browser client dan server bisa
berupa pemasukan data teks, angka, atau upload file untuk diproses oleh server. Untuk mewadahi suatu
data yang dikirimkan oleh browser client, dibutuhkan adanya FORM HTML. Penggunaan form
misalnya untuk pendaftaran keanggotaan, pemasukan kode kartu kredit, login user, transaksi
perbelanjaan, dan upload file.
Dalam FORM HTML terdapat beberapa komponen yang bisa digunakan, antara lain :

a. Form

<FORM ACTION=action METHOD=method ENCTYPE=media type> </FORM>

b. Text Box

Textbox : untuk menginput data string ataupun angka.


c. Text Area

Textarea : untuk menginput string ataupun angka yang terdiri atas banyak baris.

d. Radio button

Radio button : untuk memilih satu pernyataan dari beberapa pernyataan yang disediakan.

e. Combo Box
Combo box untuk menampilkan daftar data

12
WEB PROGRAMMING I

f. Check Box
Check box untuk memilih satu atau lebih pernyataan dari beberapa pernyataan yang
disediakan.

g. Submit
Submit untuk mengirimkan semua variable data pada komponen-komponen form yang ada.

h. Reset
Reset untuk membatalkan semua penginputan yang telah dituliskan

2. Pengolahan Data Dari Form


Form di HTML dikenal dengan adanya tag <FORM> dan ditutup dengan tag </form>. Di dalam
tag pembuka <form> diikuti dengan atribut action dan method. Action menjelaskan ke halaman yang
digunakan untuk memproses input, sementara method digunakan untuk mengatur cara mem-parsing
konten Web menerima input dari user atau pengunjung menggunakan metode GET dan POST. GET
akan mengirimkan data bersama dengan URL, sedangkan POST akan mengirimkannya secara terpisah.
User mengirimkan data input dengan mengisi teks atau pilihan pada attibut form html.
Proses Form menggunakan Metode GET :
File metodeget.php

Hasilnya :

13
WEB PROGRAMMING I

Buat file untuk memproses variable yang diberikan oleh file metodeget.php, beri nama filenya :
metodegetproses.php

Hasilnya :
Karena
menggunakan
metode GET, data
dikirmkan bersama
dengan URL

Proses form menggunakan metode = POST


Untuk membuat inputan dan beri nama file : metodepost.php

Hasilnya :

14
WEB PROGRAMMING I

Buat file untuk memproses variable yang diberikan oleh file metodepost.php beri nama filenya :
metodepostproses.php.

Latihan Pembuatan Form I


Buat file untuk menampilkan form input dan output seperti gambar di bawah ini.
Simpan dengan nama : inputmahasiswa.php dan tampilmahasiswa.php

15
WEB PROGRAMMING I

Inputmahasiswa.php

<html>
<head>
<title>Input Mahasiswa</title>
</head>
<body bgcolor="white">
<form action="tampilmahasiswa.php" method="post">
<b>PENGELOLAAN DATA MAHASISWA</b>
<br>
<pre>
Nama :<input type="text" name="nama" size="25" maxlength="50">
Alamat :<input type="text" name="alamat" size="25" maxlength="50">
</pre>
Jenis Kelamin :<input type="radio" name="jeniskel" value="Laki-laki">Laki-Laki
<input type="radio" name="jeniskel" value="Perempuan">Perempuan
<p>
Pekerjaan :
<select name="pekerjaan">
<option value="-Pilih-">
<option value="Pelajar">Pelajar
<option value="Karyawan">Karyawan
<option value="Wirausaha">Wirausaha
<option value="Lain-lain">lain-lain
</select>
<p>
Hobi :
<input type="checkbox" name="hobi1" value="olahraga">Olahraga
<input type="checkbox" name="hobi2" value="Musik">Musik
<input type="checkbox" name="hobi3" value="Jalan-jalan">Jalan-jalan
<p>
<input type="submit" value="Kirim"><input type="reset" value="Batal">
</form>
</body>
</html>

16
WEB PROGRAMMING I

Tampilmahasiswa.php

<html>
<head>
<title>Data Mahasiswa</title>
</head>
<body>
<?php
$nama=$_POST['nama'];
$alamat=$_POST['alamat'];
$jeniskel=$_POST['jeniskel'];
$pekerjaan=$_POST['pekerjaan'];
$hobi1=$_POST['hobi1'];
$hobi2=$_POST['hobi2'];
$hobi3=$_POST['hobi3'];
?>
<table border=2 bgcolor="red">
<tr>
<td colspan=2 align="center"><b>DATA MAHASISWA</b></td>
</tr>
<tr>
<td>Nama</td><td><?php echo $nama;?></td>
</tr>
<tr>
<td>Alamat</td><td><?php echo $alamat;?></td>
</tr>
<tr>
<td>Jenis Kelamin</td><td><?php echo $jeniskel;?></td>
</tr>
<tr>
<td>Hobi</td><td><?php echo $hobi1,",",$hobi2,",",$hobi3;?></td>
</tr></table>
<a href="inputmahasiswa.php">INPUT DATA LAGI</a>
</body>
</html>

17
WEB PROGRAMMING I

Contoh Pembuatan Form dengan Input, Proses dan Output Dalam Satu File

Untuk membuat form input dan halaman untuk menampilkan dalam satu file, kita bisa
menggunakan statement :
If(!empty(nama_variabel))
Artinya jika variabel yang dicari tidak kosong (alias ada) maka baru ditampilkan, sementara jika tidak
ada maka tidak akan ditampilkan.
Yang perlu diketahui adalah digunakannya alamat action :
$_server [‘php_self’]
Artinya alamat action akan mengacu ke halaman itu sendiri dan bukan di halaman yang lain.
Dengan demikian jika form di submit, maka halaman yang dipanggil tetap halaman yang sama.

Datadiri.php

<html>
<head>
<title>Masukkan Data</title>
</head>
<body>
<h1>Masukkan Identitas Anda</h1>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
<pre>
Isikan Nama : <input type="text" name="nama"/>
Isikan No Telepon : <input type="text" name="telp"/>
Isikan Alamat : <textarea name="alamat" rows="5" cols="40"></textarea>
<input type="submit" value="Tampil"/><input type="reset" value="Batal"/>
</pre>
</form>
<?php
$nama=$_POST['nama'];
$telp=$_POST['telp'];
$alamat=$_POST['alamat'];
if(!empty($nama)){
echo "Nama:$nama<br>";}
if(!empty($telp)){
echo "No Telepon:$telp<br>";}
if(!empty($alamat)){
echo "Alamat:$alamat";}
?>
</body>
</html>
BAB VI

18
WEB PROGRAMMING I

PERCABANGAN

Sebagian besar bahasa pemrograman mengandung pernyataan seleksi. Pada dasarnya


pernyataan seleksi adalah suatu mekanisme yang menjelaskan apakah pernyataan akan dikerjakan atau
tidak, hal ini tergantung kondisi yang dirumuskan. Dalam bahasa pemrograman PHP pernyataan seleksi
diterapkan dengan menggunakan statement IF dan Switch Case.
1. If Tunggal
Prinsip kerjanya adalah perintah di atas akan dikerjakan apabila kondisi bernilai TRUE atau
benar sedangkan jika kondisi salah/FALSE maka statement di atas tidak akan dikerjakan.
Bentuk umum statement IF :
If (kondisi)
{
Statement;
}
2. If dan Else
Pernyataan ELSE merupakan bagian dari pernyataan if. Else digunakan untuk memberikan
alternative perintah apabila kondisi bernilai salah/FALSE.
Bentuk umum :
If (kondisi)
{
Statement1;
}
Else
{
Statement2;
}

Contoh : contohpercabanganifelse.php

Hasilnya :

19
WEB PROGRAMMING I

3. If, elseif dan else


Jika pernyataan else memberikan alternative pilihan kedua, maka untuk pernyataan elseif dapat
digunakan untuk merumuskan banyak alternative pilihan (lebih dari dua pilihan).
If (kondisi1)
{
Statement1;
}
Elseif (kondisi2)
{
Statement2;
}
Elseif (kondisi3)
{
Statement3;
}
Else
{
Statement4;
}

Contoh : contohpercabanganifmajemuk.php

20
WEB PROGRAMMING I

Hasilnya :

4. Switch
Statement untuk mengatur alur program berikutnya adalah switch. Salah satu keuntungan
switch adalah ada bisa langsung mengevaluasi satu statement dan memerintahkan aksi dalam
jumlah yang lebih banyak.
Bentuk umum :
Switch (nilai_ekspresi){
Case nilai_1 : statement_1; break;
Case nilai_1 : statement_2; break;
Default: statement_n;}
Contoh :

21
WEB PROGRAMMING I

Latihan 1.
Kasus.php

<html>
<head>
<title>Title here!</title>
</head>
<body>
<form action="bukti.php" method="get">
<center>
<h1>RS. SEHAT</h1>
<B><i>Jl. Sehat Selalu No. 14 Bekasi Utara<br></i></b>
<hr color=red>
</center>
<pre>
Nama Pasien :<input type="text" name="nama" size=25 maxlength=30><br>
Alamat Pasien :<textarea name="alamat" rows=3 cols=30></textarea><br>
Kode Obat :<select size=1 name="kdobat">
<option>KP001
<option>TB002
<option>SR003
</select><br>
</pre>
<hr color=red>
<input type="submit" name="lanjut" value="CETAK">
<input type="reset" name="reset" value="BATAL">
<hr color=red>
</form>
</body>
</html>

Bukti.php

<html>
<head>
<title>CETAK BUKTI</title>
</head>
<body>
<center>
<h1>RS. SEHAT</h1>
<B><i>Jl. Sehat Selalu No. 14 Bekasi Utara<br></i></b>
<hr color=red>
</center>
<pre>

22
WEB PROGRAMMING I

<?
$nama=$_GET['nama'];
$alamat=$_GET['alamat'];
$kdobat=$_GET['kdobat'];
if($kdobat=="KP001")
{
$harga=15000;
$jenis="Kapsul";
}
elseif ($kdobat=="TB002")
{
$harga=18000;
$jenis="Tablet";
}
else
{
$harga=20000;
$jenis="Sirup";
}
echo "***TERIMA KASIH***";
echo"<p>";
echo"Nama Pasien :$nama<br>";
echo"Alamat Pasien :$alamat<br>";
echo"Harga Obat :Rp. $harga<br>";
echo"Jenis Obat :$jenis<br>";
?>
</pre>
<hr color=red>
<a href="kasus.php">ISI DATA LAGI</a>
</body>
</html>

23
WEB PROGRAMMING I

CONTOH 2
Inputkue.php

<html>
<head>
<title>FORM INPUT</title>
</head>
<body>
<form action="buktikue.php" method="post">
<center>
<h1>TOKO KUE "ENAK BANGET"</h1>
<b><i>Jl. Merdeka No.3 Bekasi Utara<br></i></b>
<hr color=red>
</center>
<p>
<font face="courier new" size=3>
<table border=1>
<tr>
<td colspan = 3 align = center>DAFTAR HARGA KUE</td>
</tr>
<tr>
<td>CAKE</td>
<td>Rp. 10.000,00</td>
<td rowspan = 4>
<img src = "kueultah.jpg" width = 100 height = 100>
</td>
</tr>
<tr>
<td>BROWNIES</td>
<td>Rp. 12.000,00</td>
</tr>
<tr>
<td>PANCAKE</td>
<td>Rp. 15.000,00</td>
</tr>
<tr>
<td>STRAWBERRY CAKE</td>
<td>Rp. 17.000,00</td>
</tr>
</table>
</font>
<pre>
<p>
Nama Pembeli : <input type = "text" name = "nama" size = 25 maxlength = 30><br>
Alamat Konsumen : <textarea name = "alamat" rows=3 cols=30 wrap="off"></textarea><br>
Pilih Nama Kue : <Select size=1 name = "kue">
<option> CAKE
<option> BROWNIES
<option> PANCAKE
<option> STRAWBERRY CAKE
</select>
<br>
Jumlah Beli : <input type = "text" name = "jumbel" size = 25 maxlength = 30><br>
</pre>
<hr color = red>
<input type = "submit" name = "lanjut" value = "CETAK">
<input type = "reset" name = "reset" value = "BATAL">
<hr color = red>
24
</form>
</body>
</html>
WEB PROGRAMMING I

Buktikue.php

<html>
<head>
<title>CETAK BUKTI</title>
</head>
<body>
<center>
<h1> TOKO KUE "ENAK BANGET" </h1>
<b><i>Jl. Merdeka no.3 Bekasi Timur <br></i></b>
<hr color = red>
</center>
<pre>
<?
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$kue = $_POST['kue'];
$jumbel = $_POST['jumbel'];
switch($kue)
{
case "CAKE" :
$harga = 10000;
break;
case "BROWNIES" :
$harga = 12000;
break;
case "PANCAKE" :
$harga = 15000;
break;
default :
$harga = 17000;
}
$total = $harga * $jumbel;
echo "**** TERIMA KASIH *****";
echo "<p>";
echo"Nama Konsumen : $nama <br>";
echo"Alamat Konsumen : $alamat <br>";
echo"--------------------------------------------- <br>";
echo"Kue Pesanan : $kue <br>";
echo"Harga Kue : Rp. $harga <br>";
echo"Jumlah Beli : $jumbel <br>";
echo"--------------------------------------------- X <br>";
echo"Total Bayar : Rp. $total";
?>
</pre>
<hr color = red>
<a href = "inputkue.php">ISI DATA LAGI</a>
</body>
</html>

25
WEB PROGRAMMING I

26
WEB PROGRAMMING I

BAB VII

PEMBUATAN DATABASE MySQL

MySQL adalah sebuah software database. Database merupakan sebuah tempat penyimpanan data yang
jenisnya beraneka ragam. MySQL merupakan tipe data relasional yang artinya MySQL menyimpan datanya
dalam bentuk tabel-tabel yang saling berhubungan. Keuntungan menyimpan data di database adalah
kemudahannya dalam penyimpanan dan menampilkan data karena dalam bentuk tabel. Untuk melakukan
pengolahan terhadap tabel, kita dapat menggunakan perintah SQL.
Salah satu fitur unggulan PHP adalah kemudahannya untuk diintegarasikan dengan database. Di PHP, sangat
mudah mengoneksikan diri dengan database. Database paling lazim yang digunakan untuk dipadukan dengan
PHP adalah MySQL. PHP dan MySQL ibarat roti dan selai, saling melengkapi. PHP tanpa MySQL tidak akan
powerful karena tidak bisa digunakan untuk menyimpan data dalam jumlah banyak. Keuntungan menggunakan
database MySQL :
1. Gratis dan Open Source
2. Ada versi komersialnya juga, digunakan jika ingin memberikan dukungan teknis
3. Biaya yang harus dikeluarkan jauh lebih murah dibandingkan merek lainnya
4. Tersedia di banyak platform
5. Menggunakan standar penulisan SQL ANSI
PHP-MySql adalah suatu fungsi yang menjembatani antara php sebagai programming web server dan mysql
sebagai database, sehingga data-data yang terdapat pada database mysql dapat ditampilkan pada browser.
1. MYSQL_CONNECT()
Menghubungkan ke server mysql. Fungsi ini merupakan fungsi awal yang akan dijalankan sebelum
melakukan fungsi-fungsi lain.
Bentuk umum penulisan :
Mysql_connect(host,user,password)

2. MYSQL_CREATE_DB()
Fungsi yang sangat jarang di gunakan karena pada umumnya setiap programmer web, lebih cenderung
dalam membuat database pada console atau phpmyadmin pada browser. Fungsi ini untuk membuat
database baru.
Bentuk umum penulisan :
Mysql_create_db(nama_database)

3. MYSQL_SELECT_DB()
Fungsi ini untuk mengaktifkan database yang telah tersedia pada mysql server.
Bentuk umum penulisan :
Mysql_select_db(nama_database)

4. MYSQL_QUERY()
Fungsi ini untuk memasukkan perintah-perintah SQL.
Bentuk umum penulisan :
Mysql_query(perintah-perintah SQL)

5. MYSQL_NUM_ROWS()
Fungsi ini untuk mengetahui berapa jumlah record terkini. Fungsi ini berguna apabila akan membuat
tabel yang bercorak.
Bentuk umum penulisan : Mysql_num_rows(variabel) ;

27
WEB PROGRAMMING I

6. MYSQL_FETCH_ROW()
Fungsi ini untuk mengambil data per record atau per baris dalam suatu tabel, berdasarkan sistem urutan
nomor index field.
Bentuk umum penulisan : Mysql_fetch_rows(variabel) ;

7. MYSQL_FETCH_ARRAY()
Fungsi ini memiliki fungsi yang sama dengan mysql_fetch_row() yaitu mengambil data per record.
Yang membedakan adalah jika mysql_fetch_row() mengambil data berdasarkan nomor urut index
sedangkan fungsi ini adalah nama fieldnya.
Bentuk umum penulisan : Mysql_fetch_rows(variabel) ;

Untuk mengakses database MySQL digunakan software MySQL Client. Ada banyak MySQL Client,
dari mulai yang berbasis command line, aplikasi GUI hingga berbasis web. PHPMyAdmin adalah MySQL
Client yang berupa aplikasi web dan umumnya tersedia di server PHP seperti XAMPP maupun server komersial
lainnya. Berikut ini cara mengakses PHPMyAdmin :
1. Buka browser kemudian ketikkan alamat URL : http://localhost/phpmyadmin. halaman ini bisa diakses
menggunakan webserver local.

2. Untuk membuat database baru. Klik tab database. Kemudian ketikkan nama database di kolom “Create
Database”. Nama database :db_berita.

28
WEB PROGRAMMING I

3. Setelah membuat database, langkah berikutnya adalah pembuatan tabel. Buat tabel dengan nama tabel
“artikel” di kolom Create Table dan number of columns : 4. Jika sudah diinput, klik tombol GO.

4. Isikan data untuk struktur tabel artikel sebagai berikut :


Field Name Type Data Length Keterangan
idartikel int Auto increment, Primary Key
judul Varchar 50
Isi Text
gambar Varchar 100

Tipe-tipe data yang sering digunakan adalah :


a. INT untuk menyatakan data berupa angka
b. VARCHAR untuk menyatakan data berupa karakter atau string (batasnya sampai 255 karakter)
c. DATE untuk menyatakan data berupa tanggal
d. TIME untuk menyatakan data berupa waktu
e. TEXT untuk menyatakan data berupa karakter dalam jumlah yang banyak (lebih dari 255 karakter)
misalnya untuk isi berita dan pesan
f. CHAR untuk menyatakan data berupa string yang tetap

29
WEB PROGRAMMING I

BAB VIII
MENGENAL ADOBE DREAMWEAVER CS5

8.1. Keuntungan Menggunakan Adobe Dreamweaver CS5


Dreamweaver CS5 adalah software yang luar biasa untuk membuat website. Dengan
menggunakan Dreamweaver CS5, kita dapat membuat hamper dari semua tipe halaman web. Selain itu,
proses penggunaannya pun mudah dan cepat, bahkan bisa menghasilkan tampilan halaman web yang
canggih. Selain itu, Dreamweaver CS5 juga dilengkapi dengan toolbar Browser Navigation semacam
tool seperti yang ada pada browser yang terdiri dari back, forward, stop, home, address, dan live view
option.
8.2. Mengenal Document Window
Document window adalah halaman utama Dreamweaver CS5 yang digunakan untuk
memasukkan teks dan gambar, serta skrip-skrip tertentu. Sebelum memasuki halaman ini, kita harus
memilih 2 pilihansebelum bekerja dengan Dreamweaver CS5. Dua pilihan itu seperti berikut :
1. Open a Recent Item : digunakan untuk bekerja dengan dokumen yang telah ada.
2. Create New : digunakan untuk bekerja dari awal, yakni dengan membuat dokumen baru

Berikut adalah tampilan area kerja pada Dreamweaver CS5 :

30
WEB PROGRAMMING I

a. Properties Bar
Bagian ini berisi sekumpulan menu yang digunakan untuk menampilkan menu-menu toolbar yang akan
digunakan sesuai dengan kebutuhan serta mengatur tampilan dokumen dan fungsi lainnya.
b. Document Bar
Bagian ini berisi lembar yang kan digunakan untuk menampilkan file-file dokumen yang akan dibuat
berupa jendela dokumen (berbentuk tab).
c. Dokumen Windows
Bagian ini berupa jendela dokumen yang digunakan untuk meletakkan objekobjek untuk membentuk
dan merancang website.
d. Properties Inspector
Properti tab yang digunakan untuk mengatur properties dari objek-objek yang digunakan seperti
mengatur jenis font, warna dan ukuran dari teks dan lain sebagainya
e. Panel Group
Kumpulan panel-panel pelengkap dan berfungsi untuk mengorganisir, mengatur serta pelengkap website
yang akan dibuat
f. Search & CS Live
Search adalah menu toolbar yang digunakan sebagai pencarian informasi yang kaan menuju ke kontak
dialog sebagai pencarian informasi yang kan menuju ke kotak dialog Adobe Communiti Help.
Sedangkan CS Live adalah kumpulan menu-menu tertentu dari CS Service seperti Adobe Browser Live.
CS Review dan sebagainya.

31
WEB PROGRAMMING I

BAB XI
PERANCANGAN WEB INFORMASI

1. Studi Kasus I Pengolahan Form Buku Tamu


Form Input Buku Tamu

Script tambahbukutamu.php

tambahbukutamu.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<form method="post" action="?page=simpanbukutamu">
<table width="410" height="267" border="0" align="center">
<tr>
<td colspan="3"><div align="center">BUKU TAMU </div></td>
</tr>
<tr>
<td width="97">Nama </td>
<td width="15">:</td>
<td width="284">
<input name="nama" type="text" id="nama"></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td>
<input name="email" type="text" id="email" size="50"></td>
</tr>
<tr>
<td>Pesan</td>
<td>:</td>
<td>
<textarea name="pesan" id="pesan" cols="50" rows="4"></textarea></td>
</tr>
<tr>
<td height="41">&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="KIRIM">
<input type="reset" name="Reset" value="BATAL">
<a href="?page=tampilbukutamu"> [Lihat Buku Tamu]</a></td>
</tr>
32
</table></form></body></html>
WEB PROGRAMMING I

Buat file untuk menyimpan data buku tamu. Simpan file dengan nama simpanbukutamu.php.

Script simpanbukutamu.php

Simpanbukutamu.php

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<?php
include "koneksi.php";
$a=$_POST['nama'];
$b=$_POST['email'];
$c=$_POST['pesan'];
mysql_query("insert into buku_tamu values ('','$a','$b','$c')");
echo "<script>window.alert('Buku Tamu Sudah Tersimpan');
window.location='?page=tampilbukutamu'</script>";
?>
</body>
</html>
Penjelasan script simpanbukutamu.php
a. mysql_connect digunakan Menghubungkan ke server mysql. Fungsi ini merupakan fungsi awal
yang akan dijalankan sebelum melakukan fungsifungsi lain. Bentuk umumnya adalah
mysql_conncet (“host”,”user name”,”password”). Untuk user name dan password diisi dengan
user name dan password yang digunakan untuk masuk ke dalam PHPMyAdmin.
b. mysql_error digunakan untuk mendeteksi kesalahan yang terjadi pada saat menghubungkan
server ke mysql.
c. mysql_select_db (“db_berita”) digunakan untuk mengaktifkan database db_berita.
d. $a=$_POST['nama'];
Diambil dari nama object yang ada di form tambahbukutamu.php
$b=$_POST['email'];
$c=$_POST['pesan'];
Script diatas yang digunakan untuk pendeklarasian variable a, b dan c.

Buat file untuk menampilkan data yang sudah tersimpan ke dalam tabel buku_tamu.

33
WEB PROGRAMMING I

Script tampilbukutamu.php

Tampilbukutamu.php

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<?php
include "koneksi.php";
$query=mysql_query ("select * from buku_tamu order by id") or die ("Gagal". mysql_error());
$jumlah=mysql_num_rows($query);
?>
<table width="70%" border="1" align="center" bgcolor="#FFFF00">
<tr><td colspan="6" align="center"><h1>DATA BUKU TAMU</h1></td></tr>
<tr align="center">
<td>No</td>
<td>Nama</td>
<td>Email</td>
<td>Pesan</td>
<td colspan="2" align="center">Action</td></tr>
<?php
while ($row=mysql_fetch_array($query))
{
$a=$row['id'];
$b=$row['nama'];
$c=$row['email'];
$d=$row['pesan'];
?>
<tr align="center">
<td><?php echo $a; ?></td>
<td><?php echo $b; ?></td>
<td><?php echo $c; ?></td>
<td><?php echo $d; ?></td>
<td><a href="?page=hapusbukutamu&id=<?php echo $a;?>" onclick="return confirm('Anda Yakin
Ingin Menghapus Item Ini?');">HAPUS</a></td>
<td><a href="?page=editbukutamu&id=<?php echo $a;?>">EDIT</a></td>
</tr>
<?php } ?>
<tr><td colspan="6"><div align="left">Jumlah Record : <?php echo $jumlah; ?> </div> <div
align="right"><a href="?page=bukutamu">Input Data Lagi</a></div></td>
</tr>
</table>
</body>
</html>

34
WEB PROGRAMMING I

Buat file untuk membuat perintah hapus buku tamu.

Buat file untuk mengubah/mengedit data buku tamu.

35
WEB PROGRAMMING I

Script editbukutamu.php

Buat script untuk mneyimpan data yang sudah diubah dari file editbukutamu.php

36
WEB PROGRAMMING I

Script updatebukutamu.php

2. Studi Kasus II pengolahan Form Artikel


Buat tampilan form untuk halaman tambah artikel. Seperti di bawah ini :

37
WEB PROGRAMMING I

Script tambahartikel.php

Buat script untuk penyimpanan artikel. Halaman simpanarikel.php

38
WEB PROGRAMMING I

Outputnya :

Penjelasan Script simpanartikel.php

a. Baris ke-9 mysql_connect digunakan Menghubungkan ke server mysql. Fungsi ini


merupakan fungsi awal yang akan dijalankan sebelum melakukan fungsifungsi lain. Bentuk
umumnya adalah mysql_conncet (“host”,”user name”,”password”). Untuk user name dan
password diisi dengan user name dan password yang digunakan untuk masuk ke dalam
PHPMyAdmin.
b. Baris ke-9 mysql_error digunakan untuk mendeteksi kesalahan yang terjadi pada saat
menghubungkan server ke mysql.
c. Baris ke-10 mysql_select_db (“db_berita”) digunakan untuk mengaktifkan database
db_berita.
d. Baris ke-11 sampai 13 adalah script yang digunakan untuk pendeklarasian variable a, b dan
c.
e. $a = $_POST[‘judul’]; dan $b = $_POST[‘isi’]; fungsi $_POST digunakan untuk
mengumpulkan nilai dari object judul dan isi yang akan dikirimkan ke variable a dan b
menggunakan method POST.

f. Baris ke – 13 $c = $_FILES[‘gambar’][‘name’] digunakan untuk upload file dari object


gambar. Nilai yang disimpan ke dalam variable $c adalah name dari gambar yang diupload.

g. Baris ke – 14 adalah script untuk menyisipkan data ke dalam tabel artikel yang ditampung
di variable $perintah.
h. Baris ke – 15 adalah script untuk meng-copy atau menyalin gambar yang sudah diupload ke
dalam Folder Gambar yang ada di htdocs. Nilai yang diambil berdasarkan nilai yang ada di
$c.
i. Baris ke – 16 adalah perintah mysql_query yaitu script yang digunakan untuk menjalankan
perintah SQL yang ada di $perintah dan $koneksi yang disimpan ke dalam variable
$simpan.
j. Baris ke – 17sampai ke – 20 adalah script percabangan dengan kondisi variable $simpan
jika dijalankan dan berhasil maka akan mencetak pesan “DATA BERHASIL DISIMPAN”.
Jika tidak maka akan tercetak GAGAL.
39
WEB PROGRAMMING I

k. Baris ke – 22 adalah script yang digunakan untuk membuat link menuju halaman
tambahartikel.php dan tampilartikel.php.

Buat file untuk menampilkan data yang ada di tabel artikel. Simpan dengan nama
tampilartikel.php.

Script tampilartikel.php

40
WEB PROGRAMMING I

Penjelasan script tampilartikel.php

a. Baris ke-9 mysql_connect digunakan Menghubungkan ke server mysql. Fungsi ini


merupakan fungsi awal yang akan dijalankan sebelum melakukan fungsifungsi lain. Bentuk
umumnya adalah mysql_conncet (“host”,”user name”,”password”). Untuk user name dan
password diisi dengan user name dan password yang digunakan untuk masuk ke dalam
PHPMyAdmin.
b. Baris ke-9 mysql_error digunakan untuk mendeteksi kesalahan yang terjadi pada saat
menghubungkan server ke mysql.
c. Baris ke-10 mysql_select_db (“db_berita”) digunakan untuk mengaktifkan database
db_berita.
d. Baris ke – 11 adalah script SQL perintah SELECT yang digunakan untuk menampilkan data
yang ada di tabel artikel dengan pengurutan data berdasarkan idartikel secara descending.
e. Baris ke – 12 adalah script yang digunakan menjalankan perintah SQL yang ada di $tampil
dan tertampung di variable $query.

41
WEB PROGRAMMING I

3. Studi Kasus III Halaman Index Pengunjung


Buat file untuk halaman home.

Script halaman home.php

42
WEB PROGRAMMING I

Buat file untuk mengakses halaman ke dalam file index.


Script bukafile.php

Buat tampilan halaman index bentuk seperti di bawah ini :

43
WEB PROGRAMMING I

Script index.php

Hasilnya :

44
WEB PROGRAMMING I

45

Anda mungkin juga menyukai