IKMAL MAULANA Web Programming Developmen

IKMAL MAULANA | Web Programming Development

1

BAB 1

Modul : Membangun Aplikasi berbasis Web
Mengenal Arsitektur Aplikasi berbasis PHP

PHP ( PHP Hypertext Preprocessor ) yang digunakan sebagai bahasa script server-side dalam
pengembangan aplikasi berbasis web. PHP dapat berinteraksi langsung dengan database, file
dan folder, sehingga membuat PHP bisa menampilkan konten yang dinamis dari sebuah struktur
aplikasi.

Kelebihan Bahasa PHP :
1. PHP termasuk dalam Open Source Product sehingga penggunanya tidak dibebani dengan
biaya lisensi.
2. Aplikasi PHP cukup cepat dibandingkan dengan aplikasi CGI dengan Perl atau Phyton
bahkan lebih cepat dibanding dengan ASP maupun Java dalam berbagai aplikasi web
3. PHP dapat dijalankan di berbagai system operasi / Multi OS ( Linux, Windows, dll ).
4. Tidak membutuhkan spesifikasi hardware yang tinggi dalam proses pembuatan maupun

implementasinya.
5. Banyak dukungan software open source dalam proses pengembangannya
Untuk membuat aplikasi / software dengan bahasa pemrograman PHP, ada beberapa yang harus
dipersiapkann :
1. Instalasi Web server
Web server merupakan engine yang digunakan untuk menjalankan file php. Beberapa
web server yang banyak di gunakan oleh para developer PHP diantaranya Apache, IIS,
Nginx, GWS, dll.
2. Instalasi Database Server
Database server merupakan database center yang digunakan untuk menyimpan file
record dari sebuah form. Database server yang mendukung PHP diantaranya MySQL,

Oracle, Microsoft Access , Interbase, dBase, PostgreSQL , dan lain-lain.
3. Penguasaan bahasa HTML dan CSS
Bahasa HTML, CSS, Java script merupakan bahasa yang digunakan untuk mendukung
pembuatan desain layout, form, dan interface aplikasi.
4. Instalasi Browser
Browser adalah perangkat lunak yang digunakan untuk membuka dan membaca tipe file
data tertentu. Contoh browser yang sering digunakan Mozilla, Internet Explorer, Opera,
dll.

5. Instalasi software pengolah interface dan script coding PHP seperti Blue fish,
Dreamwever, Notepad, dll.

Arsitektur Aplikasi
INPUT
Menampilkan form
input untuk merekam
variable data

PROSES

OUTPUT

Proses mengolah data
( Save, Delete, Update )

Report Data

STORAGE
Pusat Penyimpanan

Data
IKMAL MAULANA | Web Programming Development

2

BAB 2

Modul : Membangun Aplikasi Berbasis Web
Instalasi Web Server dan Database Server

Pada tutorial ini akan dijelaskan langkah-langkah instalasi web server Apache dan database
server MySQL menggunakan paket aplikasi AppServ. AppServ ini salah satu aplikasi gratis yang
dapat di unduh di link http://www.appservnetwork.com. Sampai dengan saat ini, AppServ
sudah sampai pada versi 2.5.10.
Jalankan file appserv-win32-2.5.10.exe. Double klik > Next sampai dengan layar Licence
Agrement. Berikutnya klik next akan masuk ke tahap pemilihan direktori ( Lihat gambar dibawah
), disarankan ganti direktori selain C, agar data system tetap aman saat system operasi
bermasalah.

Pada tahap berikutnya, pilih semua komponen ( checklist )

IKMAL MAULANA | Web Programming Development

3

Berikutnya, masukan server localhost dan administrator’s Email Address bebas. Biarkan port 80.

Berikutnya, masukan password untuk database MySQL. Untuk mempermudah, gunakan
password yang biasa dipakai

IKMAL MAULANA | Web Programming Development

4

Klik install, tunggu beberapa saat sampai muncul layar seperti dibawah ini. Instalasi sudah
selesai, klik Finish.

Untuk mengecek webserver aktif, masuk ke browser dan ketik url : localhost

IKMAL MAULANA | Web Programming Development

5

Untuk mengecek database MySQL aktif, ketik di browser localhost/phpmyadmin. Masukan
username : root dan password yang digunakan pada saat instalasi.

Dimana kita menyimpan file php dan MySQL?




Buka folder AppServ di direktori yang kita pilih saat instalasi.
File php disimpan di folder www > [Folder nama system]
File MySQL disimpan di folder MySQL > Data > [Folder nama database]

IKMAL MAULANA | Web Programming Development

6

BAB 3

Modul : Membangun Aplikasi Berbasis Web
Dasar – dasar HTML, PHP, dan Query MySQL

Form pada aplikasi berbasis PHP dibuat dengan menyisipkan beberapa tag HTML sesuai
kebutuhan, seperti tabel, input, button, dll.
Contoh Form input
Jenis barang
Merek

3 rows
Simpan

2 column
Kalau dibuat dengan bahasa HTML, tabel dengan 3 rows 2 kolom diatas diatur seperti ini :



column
Jenis barang

rows



Merek merek


row
zs







rows
s

Contoh tabel view data
No
Jenis barang
1
Hardisk
2
Monitor

Merek
Seageate
Compaq

3 column

3 rows

Catatan :
No



No
Jenis barang
Merek


1
Hardisk
Seageate


2
Monitor
Compaq

Align, digunakan untuk mengatur
posisi text horizontal :
- center
- left
- right

valign, digunakan untuk
mengatur posisi text vertical :
- top
- bottom
- middle

IKMAL MAULANA | Web Programming Development

7

Tag HTML yang sering di gunakan pada perancangan form
1. Field Text
Contoh penggunaan : Merekam data nama, jabatan, tempat lahir, dll

Code :


2. Combo box
Contoh penggunaan : merekam data pekerjaan yang sudah tersedia pilihannya

Code :

-- Pilih --
PNS
Karyawan
Wiraswasta


3. Radio button
Contoh penggunaan : merekam data jenis kelamin yang hanya memilih salah satu dari
beberapa pilihan

Code :
Pria
Wanita

4. Checkbox
Contoh penggunaan : Merekam data keahlian yang bisa memilih lebih dari satu pilihan

Code :

Web Programming

Sistem operasi

Networking

IKMAL MAULANA | Web Programming Development

8

5. Textarea
Contoh penggunaan : Merekam data alamat

Code :


6. Submit dan Reset
Submit : tombol untuk memproses form
Reset : tombol untuk mengosongkan value yang sudah diinput ke form

Code :



7. Insert Image / Menyisipkan gambar


8. Link / Menyisipkan link halaman
Home
9. Font Setting
Font dengan ukuran 2
di bold
huruf miring
underline

Latihan : Membuat form pengolahan variable text

INPUT DATA KARYAWAN



NIK


Nama



Jabatan



Alamat


IKMAL MAULANA | Web Programming Development

9











Penjelasan :
If($proses) : ketika tombol bernama proses di
klik
echo : Tampilkan data/value
$nik : Variable yang diisi pada field nik
$nama : Variable yang disi pada field nama

Jika file ini dijalankan, dan diisi datanya, dan klik tombol Simpan akan tampil form input seperti
dibawah ini

Latihan : Membuat form pengolahan variable angka
INPUT DATA PENJULAN

Penjelasan :


$jumlah=$_POST[‘jumlah’]
Variable jumlah memiliki value/nilai
sama dengan yang diinput ke field
bernama jumlah
*
+
/

: Operator perkalian
: Operator penguragan
: Operator penambahan
: Operator pembagian

IKMAL MAULANA | Web Programming Development

10





Kode transaksi

Monitor
Hardisk
Motherboard




Jumlah