Praktek

Pemrograman Web
dwi sakethi
dwijim@unila.ac.id
http://www.dwijim.wordpress.com
0816-403-432
25 Mei 2012

.

.

.
.
.
.

.
.

.
.
.

.
.
:

.

_
.
.
.

.

.
.

.
.

.
.
.

.
.
:

.
_

.
.
-

.
.
.
_

.
..

. .

.
.
.

.
.
.

.
.

.
.

_.

..

.
.

.
.
.

_.

.
.
.
..

.

.

.



.

.
.
.
.

..
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.

.

. v

.
_.

.
.
.

.
_

.

. v

.
.
.

.
.

.
.

_.
.

.
.

_.

.
.

.
.

.

.

.
.

.

.
_

.
.

_

.

.
,

.
.
.

.
.
.

.



.

.
.

.

.

.

.
.
.
.

.
.
.

.
.
.

<
.

.
.

.
.
.

. _

: .

.

.
.
.

.
.
.

<
.
.
.

.

_

.
.
.

.
.
,

.
.
_

:
.

.
,

,

..

.
.
.

.

.
.

.
.
..

.
.

.
.

..

.
:

.
.

.


.
.
.

.
.

.
.
.

_.
.
.

.
.

.
.
.

.
.

. .

.
.
.
.

.

.

_.

_
.

_
.

.
.

.
.

.

.
.

.
.
.

.
.
.
.

.
_

: .

.

.
.
.

.
.
.

.
.
.
.

. .

..

.
.

.
.

.

.

.
..

.
.
..

.
.

.
.
..

seratan meniko dipun ketik ngangge L

A
T
E
X
1
Daftar Isi
1 Praktek #1-Menginstal XAMPP 3
1.1 Pendahuluan . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 Langkah Kerja . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 Hasil Proses . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4 Catatan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2 Praktek #2-Membuat Basis Data 6
2.1 Langkah Kerja . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2 Catatan Penting . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3 Praktek #3-Membuat Program Input/Hapus Data 9
Daftar Gambar
1 Master XAMPP . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2 Ikom XAMPP . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3 XAMPP via Start . . . . . . . . . . . . . . . . . . . . . . . . . 4
4 Panel XAMPP . . . . . . . . . . . . . . . . . . . . . . . . . . 5
5 Tampilan DOS Prompt . . . . . . . . . . . . . . . . . . . . . . 6
6 Pemasukan Data Saksi . . . . . . . . . . . . . . . . . . . . . . 9
2
1 Praktek #1-Menginstal XAMPP
Tujuan dari materi praktek pertama ini adalah untuk memasang perangkat
lunak XAMPP ke dalam sistem berbasis Windows. Perangkat lunak XAMPP
ini sudah mencakup perangkat lunak Apache, PHP dan MySQL. Alternatif
lainnya, bisa juga perangkat lunak Apache, PHP dan MySQL dipasang pada
sistem operasi lainnya seperti GNU Linux.
1.1 Pendahuluan
Buku ini merupakan buku panduan untuk melakukan praktek pembela-
jaran materi kuliah Pemrograman Berbasis Web. Dalam materi ini perangkat
yang akan digunakan terutama adalah XAMPP. Perangkat lunak yang diper-
lukan yaitu: program Apache, PHP, dan MySQL yang sudah dipaket dalam
bentuk program XAMPP atau PHP Triad atau LAMP. Yang penting dalam
sistem tersedia Apache, Mysql, dan PHP. Sedangkan dalam contoh ini, digu-
nakan XAMPP. Jika menggunakan GNU Linux maka paket-paket tersebut
sudah tersedia tinggal diinstal saja. Pada contoh di sini digunakan Xampp
Versi 1.6.8. Paket Xampp ini bisa diunduh di alamat http://www.apachefriends.org.
1.2 Langkah Kerja
Program ApacheFriends XAMPP (Basispaket) version 1.6.8 merupakan
suatu paket program yang berisi Apache+PHP+MySQL yang merupakan
program-program yang dibutuhkan dalam sistem berbasis web. Bisa juga
menggunakan versi terbaru dari XAMPP. Selain itu, alternatif lain juga bisa
menggunakan paket program AppServ atau PHPTriad. Kedua program ini,
mempunyai fungsi yang sama dengan XAMPP. Untuk melakukan instalasi
pada contoh ini, carilah berkas bernama xampp-win32-1.6.8-installer ke-
mudian diklik ganda atau menekan tombol Enter .
Gambar 1: Master XAMPP
Instalasi program sebaiknya diletakkan pada drive D. Untuk memudahkan
proses, ikuti nilai-nilai bawaan (default) pada saat instalasi. Jika ada pertanyaan-
pertanyaan, tinggal klik tombol Next atau Install , tidak perlu mengklik
3
pilihan lain. Pada tahap akhir proses di layar akan ada keterangan Finish ,
sebagai tanda bahwa proses instalasi sudah selesai.
1.3 Hasil Proses
Pada layar Desktop terdapat ikon XAMPP seperti berikut :
Gambar 2: Ikom XAMPP
Jalankan program XAMPP dengan mengklik ganda ikon XAMPP tersebut
sehingga keluar menu Control Panel dari XAMPP. Dengan cara lain, bisa ju-
ga dengan mengklik Start-All Programs-Apache Friends-XAMPP dan seterus-
nya seperti pada gambar berikut :
Gambar 3: XAMPP via Start
Pada menu Control Panel dari XAMPP, kemudian aktifkan program Apache
dan MySQL dengan mengklik tombol Start di samping kanan dari tulisan
Apache dan MySQL.
4
Gambar 4: Panel XAMPP
Untuk GNU Linux instalasi paket Apache+PHP+MySQL bisa dilakukan
dengan mudah menggunakan Synaptic Package Manager atau bagi yang ter-
biasa dengan text based bisa menggunakan perintah apt-get-install.
1.4 Catatan
Materi praktek pertama ini tidak boleh dilewati. Materi praktek berikut-
nya tidak akan bisa dilaksanakan jika materi praktek pertama ini belum di-
laksanakan.
5
2 Praktek #2-Membuat Basis Data
Tujuan dari materi praktek kedua ini adalah untuk membuat basis data
yang akan digunakan selama praktek.
2.1 Langkah Kerja
Untuk membuat basis data ini, maka perangkat Xampp atau alternat-
ifnya sudah terpasang dan siap digunakan. Pada perintah berikut ini, di-
asumsikan bahwa program Xampp dipasang pada drive D dengan posisi
direktori d : \xampp . Selanjutnya perhatikan contoh-contoh berikut :
1. Jalankan DOS Prompt dengan cara klik Start-Run atau
Start-All Program-Accecories-Command Prompt .
Gambar 5: Tampilan DOS Prompt
2. Melakukan proses pindah drive ke D karena program Xampp ada di D.
Perintahnya adalah d: [enter] .
Microsoft Windows [Version 6.1.7600]
Copyright (c) 2009 Microsoft Corporation. All rights reserved.
C:\Users\dwisuketi>d:
D:\>
3. Pindah ke direktori tempat program MySQL client disimpan. Perin-
tahnya cd xampp\mysql\bin [enter]
6
D:\>cd xampp\mysql\bin
D:\xampp\mysql\bin>
4. Menjalankan program MySQL client untuk mengakses MySQL database
server. Dengan perintah mysql -u root -p [enter] .
D:\xampp\mysql\bin>mysql -u root -p
Enter password:
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 1
Server version: 5.5.16 MySQL Community Server (GPL)
Copyright (c) 2000, 2011, Oracle and/or its affiliates. All rights reserved.
Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.
Type help; or \h for help. Type \c to clear the current input statement.
mysql>
5. Membuat basis data.
Untuk membuat basis data perintahnya adalah create nama basis
data. Pada praktek ini, basis data yang dibuat bernama pilkada.
mysql> create database pilkada;
Query OK, 1 row affected (0.04 sec)
Untuk berikutnya, jika basis data sudah tersedia, maka basis data terse-
but tinggal digunakan dengan perintah:
mysql> use pilkada;
Database changed
6. Membuat tabel-tabel dengan struktur seperti berikut:
7
mysql> desc saksi;
+-----------------+-------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+-----------------+-------------+------+-----+---------+----------------+
| nomor_entri | int(5) | NO | PRI | NULL | auto_increment |
| nama_saksi | char(33) | YES | | NULL | |
| jenis_kelamin | char(1) | NO | | NULL | |
| nomor_handphone | varchar(17) | YES | | NULL | |
| alamat | char(100) | YES | | NULL | |
| kabupaten | char(1) | YES | | NULL | |
+-----------------+-------------+------+-----+---------+----------------+
mysql> desc kode_kabupaten;
+-------+-----------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+-------+-----------+------+-----+---------+-------+
| kode | char(1) | NO | PRI | NULL | |
| nama | char(100) | YES | | NULL | |
+-------+-----------+------+-----+---------+-------+
7. Mengisi tabel dengan sebanyak 10 buah data untuk data saksi, sedan-
gkan untuk data kabupaten diisi sesuai dengan banyaknya kabupaten
yang ada di Lampung. Untuk mengisi data, perintah yang digunakan
jelas adalah insert into.
2.2 Catatan Penting
Dilarang keras untuk menggunakan perangkat lunak PHP MyAdmin di
dalam seluruh pekerjaan ini.
8
3 Praktek #3-Membuat Program Input/Hapus
Data
Untuk membuat pemasukan dan penghapusan data maka dasar-dasar
tentang SQL, HTML dan PHP menjadi syarat mutlak. Dengan dasar-dasar
yang sudah diberikan pada materi kuliah, maka pada praktek kali ini, maha-
siswa bertugas untuk membuat program untuk memasukkan data baru dan
menghapus data yang sudah ada. Untuk pemasukan data, sesuai dengan
struktur data yang ada pada praktek #2, maka ada pemasukkan yang beru-
pa teks biasa, radio button serta select option. Contoh tampilan bisa dilihat
seperti berikut. Karena di dalam basis data terdapat dua buah tabel, maka
Gambar 6: Pemasukan Data Saksi
program yang dibuat juga mencakup kedua tabel tersebut. Jadi jelasnya
program yang mesti dikembangkan meliputi :
1. Pemasukan data saksi.
2. Penghapusan data saksi.
3. Pemasukan data nama-nama kabupaten.
4. Penghapusan data nama-nama kabupaten.

_
.
.
.

.

.
.

.
.

.
.
.

.
.
: