RENCANA PEMBELAJARAN SEMESTER PEMROGRAMAN BERBASIS WEB 1

(1)

1

RENCANA PEMBELAJARAN SEMESTER

PEMROGRAMAN BERBASIS WEB 1

Disusun Oleh : Rahmat Gunawan, M.Kom

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER ROSMA PROGRAM STUDI SISTEM INFORMASI

(2)

2

Daftar Pustaka

Daftar Pustaka ... 2

DIAGRAM ANALISIS HASIL PEMBELAJARAN MATAKULIAH PEMROGRAMAN WEB 7 RENCANA PEMBELAJARAN SEMESTER ... 8

RENCANA TUGAS MAHASISWA... 16

Tentang Client Side dan Server Side Programming ... 43

Statistik situs yang menggunakan PHP (sekitar 20 juta situs) ... 46

Instalasi AppServ ... 48

Konfigurasi Apache ... 51

Struktur Script PHP ... 54

Menyimpan File PHP ... 55

Menyisipkan Script PHP dalam Dokumen (X)HTML ... 56

Penggunaan Variabel ... 58

Menampilkan Nilai Variabel ... 59

Lebih Lanjut Tentang Echo ... 60

Menyisipkan Komentar dalam Script PHP ... 61

Assignment ... 62

$teks = "Hello World!"; $sebuah_bilangan = 4; $bilanganYangLain = 8.567; $teks2 = $teks; ... 62

Operator Aritmatik ... 65

Tingkat Presedensi ... 66

Kombinasi Operator Aritmatik dan Assignment... 67

Operator Pre/Post Increment dan Decrement ... 67

Tugas Untuk Anda ... 68

Tugas 1 ... 68

Tugas 2 ... 69

Tugas 3 ... 69

POST Request... 71

$namaVariabel = $_POST['nama komponen dalam form']; ... 71

input.htm ... 72

proses.php ... 73

proses.php ... 74

$jumlah = $bilangan1 + $bilangan2; ... 74

(3)

3

proses.php ... 75

jumlah.htm ... 76

Studi Kasus yang Lain ... 77

Operator Relasional ... 81

Operator Logika ... 82

Bentuk IF yang lain ... 84

Script untuk menentukan apakah suatu huruf termasuk huruf vokal (asumsi: huruf yang digunakan adalah kapital) ... 88

Studi Kasus Lain ... 93

FOR di dalam FOR (nested FOR) ... 107

D. Script PHP untuk membuat tabel dengan n baris dan m kolom secara otomatis ... 110

WHILE di dalam WHILE (nested WHILE) ... 119

$bil++; $jumlah = $jumlah + $bil; ... 123

include "namafilemodul"; ... 124

bilangan.php ... 125

jumlah.php ... 125

kurang.php ... 126

Penerapan Teknik Modularitas ... 127

<h1><font face="arial">…</font></h1> <p><font face="verdana"> … </font></p> ... 128

header.php ... 128 footer.php ... 128 include "header.php"; ... 129 include "header.php"; ... 129 include "header.php"; ... 129 include "footer.php"; ... 129 header.php ... 130 <body bgcolor="green"> ... 130 config.php ... 130 header.php ... 130 footer.php ... 131 include "header.php"; ... 131

(4)

4 include "header.php"; ... 131 include "header.php"; ... 131 include "footer.php"; ... 132 config.php ... 132 header.php ... 132 footer.php ... 133 form.php ... 133 proses.php ... 133

Array Asosiatif ... 139

Menambah Elemen Array ... 140

Contoh Kasus ... 142

Kasus 1. Menghitung Rata-rata beberapa bilangan ... 142

Kasus 2. Mencari Nilai Terbesar dari Kumpulan Bilangan ... 143

form1.htm ... 145

form2.php ... 145

form2.php ... 147

<td><input type='hidden' name='n' value='".$n."' /></td></tr>"; ... 148

proses.php ... 148

proses.php ... 149

“Bilangan yang Anda cari ada dalam data pada urutan ke-2” ... 151

Form pertama ... 152 Form kedua ... 152 Tampilan Output ... 152 Form Kedua ... 153 Tampilan Output ... 153 submit.php ... 154 lanjut.php... 154 submit.php ... 155 lanjut.php... 155 submit.php ... 156 lanjut.php... 157

Menghapus Variabel SESSION... 158

Penerapan SESSION ... 158

(5)

5

Cara Menyimpan Value Ke Dalam COOKIE ... 162

Membaca Value Cookie ... 164

script1.php ... 165

script2.php ... 165

functions.php ... 172

jumlah.php ... 173

kurang.php ... 173

kali.php ... 174

bagi.php ... 174

Built in Functions dalam PHP ... 174

Mathematics Built in Functions ... 175

Array Built in Functions ... 177

String Built in Functions ... 180

Data Karyawan ... 188

Tentang Database ... 189

Tentang PhpMyAdmin ... 190

Membuat Database ... 190

Membuat Tabel ... 191

Memasukkan Data/Record ke Tabel ... 193

Mengedit Record ... 196

Menghapus Record ... 197

Tentang SQL SELECT ... 198

Penggunaan Aggregate Function ... 199

Koneksi PHP ke MySQL ... 202

Menjalankan Query SQL di PHP ... 203

Studi Kasus ... 204

registrasi.php ... 205

submit.php ... 207

koneksi.php ... 211

view.php ... 212

(6)

6 list.php ... 217 list.php ... 218 <td><a href='edit.php?nim=".$data['nim']."'>Edit</a></td></tr>"; ... 219 edit.php ... 219 edit.php ... 223 $bln = $pecahTgl[1]; $thn = $pecahTgl[0]; ... 223

if ($i == $tgl) echo "<option value='".$i."' selected>".$i."</option>"; else echo "<option value='".$i."'>".$i."</option>"; ... 224

if ($i == $bln) echo "<option value='".$i."' selected>".$i."</option>"; else echo "<option value='".$i."'>".$i."</option>"; ... 224

if ($i == $thn) echo "<option value='".$i."' selected>".$i."</option>"; else echo "<option value='".$i."'>".$i."</option>"; ... 224

edit.php ... 225

update.php ... 227

Studi Kasus 1 ... 231

hapus01.php ... 231

Studi Kasus 2 ... 233

hapus02.php ... 233

(7)

7

DIAGRAM ANALISIS HASIL PEMBELAJARAN MATAKULIAH PEMROGRAMAN WEB

CAPAIAN PEMBELAJARAN MATAKULIAH PEMROGRAMAN BERBASIS WEB 1. Mahasiswa Mampu Memahami Pemrograman Web Front End (P4)

2. Mahasiswa Mampu Memahami Kaidah pembuatan Web Front End dan menggunakan web dengan benar (P4)

3. Mahasiswa mampu mengimplementasikan kode program PHP dan HTML serta CSS menjadi sebuah desain Web Front End(S6, S9, KU1, KU2, KU5, KU7, KU12, KK4)

4. Mahasiswa memahami Penulisan kode program Web dengan baik(P4)

5. Mahasiswa mampu Mengimplementasikan Pemrograman Web Front End dengan baik (S6, S9, KU1, KU2, KU5, KU7, KU12, KK4)

EVALUASI AKHIR SEMESTER (MINGGU KE – 16)

14. Memahami Dan mempraktikan managemen file bagian 3 [C3, A2, P2] – Minggu ke 15

13. Memahami dan mempraktikan managemen file bagian 2[C6, A2, P2] – Minggu ke 14

12. Memahami Dan mempraktikan managemen file bagian 1[C3, A2, P2]– Minggu ke 13

11. Memahami Dan mempraktikan Fungsi[C3, A2]– Minggu ke 12

10. Memahami Dan mempraktikan fungsi perulangan[C3, A2]– Minggu ke 11

9. Memahami Dan Mempraktikan pengecekan kondisi[C6, A2, P2]– Minggu ke 10 8. Memahami Dan mempraktikan konsep mengirim data melalui Form[C3, A2, P2] – Minggu ke 8

EVALUASI AKHIR TENGAH SEMESTER (MINGGU KE – 8) 7. Mahasiswa mampu Memahami dan mempraktikan variable dan Operator pada konsep dasar PHP[C3, A2] – Minggu ke 7

6. Mahasiswa mampu memahami dan mempraktikan konsep dasar PHP[C6, A2, P2] – Minggu ke 6

4. Mahasiswa mampu Memahami dan mempraktikan code HTML dan CSS bagian 3[C3, A2] – Minggu ke 4

3. Mahasiswa mampu Memahami dan mempraktikan code HTML dan CSS bagian 2 [C3, A2, P2] – Minggu ke 3

2. Mahasiswa mampu Memahami dan mempraktikan code HTML dan CSS bagian 1 [C3, A2] – Minggu ke 2

1. Mahasiswa mampu menjelaskan Pemrograman Web Front End, HTML dan CSS [C3,A2] – Minggu ke 1

5. Mahasiswa mampu Memahami dan mempraktikan teknologi code HTML5 dan CSS3 terbaru [C3, A2, P2] – Minggu ke 5

(8)

8

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER ROSMA PROGRAM STUDI SISTEM INFORMASI

RENCANA PEMBELAJARAN SEMESTER

MATA KULIAH KODE Rumpun Mata Kuliah BOBOT(sks) SEMESTER Tgl

Penyusunan

Pemrograman Berbasis Web 1

3 5

OTORISASI Dosen Pengembang RPS Koordinator RMK Kepala Program Studi

Rahmat Gunawan, M.Kom

Capaian Pembelajaran (CP)

CPL-PRODI

S6 Bekerjasama dan memiliki kepekaan sosial serta kepedulian terhadap masyarakat

S9 Menunjukkan sikap bertanggung jawab atas pekerjaan di bidang keahliannya secara mandiri KU1 Mampu menerapkan pemikiran logis, kritis, sistematis dan inovatif dalam konteks

KU2 Mampu menunjukkan kinerja mandiri , bermutu dan terukur

KU5 Mampu mengambil keputusan secara tepat dalam konteks penyelesaian masalah dibidang keahliannya, berdasarkan hasil analisis informasi dan datan

KU7 Mampu bertanggungjawab atas pencapaian hasil kerja kelompok dan melakukan supervisi dan evaluasi terhadap penyelesaian pekerjaan yang ditugaskan kepada pekerja yang berada di bawah tanggungjawbanya

KU12 Mampu mengimplementasikan teknologi dan komunikasi dalam konteks pelaksanaanan pekerjaannya

P4 Menguasai konsep dan prinsip-prinsip: perancangan dan pembangunan perangkat lunak dengan metode perencanaan, rekayasa kebutuhan, perancangan, pengimplementasian, pengujian, dan peluncuran yang baku dan ilmiah, dan menghasilkan produk perangkat lunak yang memenuhi berbagai parameter kualitas secara teknis maupun manajerial, dan berdaya guna serta menguasai konsep dan prinsip-prinsip: pembuatan program sederhana dalam bahasa pemrograman umum maupun bahasa pemrograman berorientasi objek, pembuatan aplikasi web dan aplikasi desktop, pembuatan basisdata sederhana untuk menyelesaikan permasalahan dalam konteks pengembangan perangkat lunak secara umum

(9)

9

KK4 Mampu menganalisa, merancang dan membangun perangkat lunak dengan menggunakan prinsip-prinsip proses Pemrograman Berbasis Web untuk menghasilkan perangkat lunak yang memenuhi kualitas baik secara teknis dan manajerial

CP-MK

M1 Mahasiswa memahami tentang Pemrograman Berbasis Web (P4) M2 Mahasiswa memahami proses pembuatan Web Front End(P4)

M3 Mahasiswa mampu mengimplementasikan kode program PHP dan HTML serta CSS menjadi sebuah desain Web Front End(S6, S9, KU1, KU2, KU5, KU7, KU12, KK4)

M4 Mahasiswa memahami kode program pembuatan web dengan baik(P4)

M5 Mahasiswa mampu mengimplementasikan pemrograman web Native dengan baik (S6, S9, KU1, KU2, KU5, KU7, KU12, KK4)

Deskripsi Mata Kuliah Mata kuliah Pemrograman Berbasis Web 1 ini mengajarkan kepada mahasiswa teknik – teknik pemrograman web dengan memahami makna Pemrograman Berbasis Web 1 , desain , pengkodean , pengecekan, dan manajemen file pada sebuah pembuatan Front End Web Native.

Materi Pembelajaran / Pokok Bahasan 1. Pengenalan HTML dan CSS 2. Dasar HTML dan CSS 1 3. Dasar HTML dan CSS 2 4. Dasar HTML dan CSS 3

5. Teknologi HTML dan CSS Terbaru 6. Konsep Dasar PHP

7. Variable dan Operator 8. Mengirim Data Melalui Form 9. Mengecek Kondisi 10. Perulangan 11. Fungsi 12. Manajemen File 1 13. Manajemen File 2 14. Manajemen File 3 Pustaka Utama :

Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta: Andi Offset. Sidik Betha, (2017). Pemrograman Web dengan PHP 7. Bandung : INFORMATIKA

(10)

10

Pendukung :

Media Pembelajaran Perangkat Lunak : Perangkat Keras :

Sublime Text , Google Chrome Proyektor , Papan Tulis ,Spidol, Penghapus

Tema Teaching Rahmat Gunawan, M.Kom

Matakuliah Syarat Mg

Ke-

Sub-CP-MK (sbg kemampuan akhir yang diharapkan)

Indikator Kriteria & Bentuk Penilaian Metode Pembelajaran [Estimasi Waktu] Materi Pembelajaran [Pustaka] Bobot Penilaian[%] 1 Mahasiswa mampu menjelaskan konsep dasar Pemrograman Web [C3,A2] ▪ Ketepatan menjelaskan konsep internet, web, Situs Website, HTTP, WWW, URL, dan URI ▪ Ketepatan menjelaskan perbedaan antara web statis dan dinamis serta cara kerjanya ▪ Ketepatan menjelaskan perbedaan antara client-side-scripting dan server-side-scripting ▪ Ketepatan menjelaskan perbedaan antara Kriteria : Ketepatan dan penguasaan Bentuk non-test : Chapter Report

▪ Kuliah dan diskusi [TM 2 x 50”]

▪ Tugas 1 : Quiz konsep dasar pemrograman web

[BT + BM : 1x50”]

▪ Pendahuluan Pemrograman Web Front End ▪ Dasar HTML ▪ CSS dan Style

HTML Dasar

(11)

11 pembuatan Web

Front End dan Back End 2 Mahasiswa mampu Memahami dan mempraktikan code HTML dan CSS bagian 1 [C3, A2] ▪ Ketepatan menjelaskan dan mempraktikan pembuatan Table, List, Layout, Display & Dimension menggunakan HTML dan CSS Kriteria : Ketepatan dan penguasaan Bentuk Non Test : Review HTML dan CSS Bagian 1

▪ Kuliah dan diskusi [TM 2 x 50”] ▪ Practice : mempraktikan code HTML dan CSS [BT + BM : 1x50”] ▪ Membuat Tabel ▪ Membuat List ▪ Membuat Layout ▪ Display & Dimension 5% 3 Mahasiswa mampu Memahami dan mempraktikan code HTML dan CSS bagian 2 [C3, A2, P2] ▪ Ketepatan menjelaskan dan mempraktikan pembuatan Box Model dan Overflow, CSS Float, CSS Position, CSS Background, CSS Text, CSS Font, CSS, Selector menggunakan HTML dan CSS Kriteria : Ketepatan dan penguasaan Bentuk Non Test : Review HTML dan CSS Bagian 2

▪ Kuliah dan diskusi [TM 2 x 50”] ▪ Practice :

mempraktikan code HTML dan CSS [BT + BM : 1x50”]

▪ Box Model dan Overflow ▪ CSS Float ▪ CSS Position ▪ CSS Background ▪ CSS Text ▪ CSS Font ▪ CSS Selector 5% 4 Mahasiswa mampu Memahami dan mempraktikan code HTML dan CSS bagian 3 [C3, A2] ▪ Ketepatan menjelaskan dan mempraktikan pembuatan Membuat Layout Dasar, Membuat Daftar Produk, Membuat Menu Dropdown, Kriteria : Ketepatan dan penguasaan Bentuk Non Test : Review HTML dan CSS bagian 3

▪ Kuliah dan diskusi [TM 2 x 50”] ▪ Practice : mempraktikan code HTML dan CSS [BT + BM : 1x50”] ▪ Membuat Layout Dasar ▪ Membuat Daftar Produk ▪ Membuat Menu Dropdown ▪ Menambahkan Jumbotron 5%

(12)

12 Menambahkan Jumbotron menggunakan HTML dan CSS 5 Mahasiswa mampu Memahami dan mempraktikan teknologi code HTML5 dan CSS3 terbaru [C3, A2, P2] ▪ Ketepatan dalam membandingkan praktik Fitur CSS3 dengan CSS, dan HTML5 dengan HTML Kriteria : Ketepatan dan penguasaan Bentuk Non Test : Practice code HTML5 dan CSS3 terbaru

▪ Kuliah dan diskusi [TM 2 x 50”] ▪ Tugas 5 : Quiz perbandingan CCS dan HTML lama dengan CSS3 dan HTML5 terbaru [BT + BM : 1x50”] ▪ Mengenal Fitur CSS3 ▪ Mengenal Fitur HTML5 10% 6 Mahasiswa mampu memahami dan mempraktikan konsep dasar PHP [C6, A2, P2] ▪ Ketepatan dan penguasaan dalam mempraktikan dengan baik penulisan Kode PHP yang digabungkan dengan HTML Kriteria : Ketepatan dan penguasaan Bentuk Non Test : Practice penggabungan Bahasa PHP dengan HTML

▪ Kuliah dan diskusi [TM 2 x 50”] ▪ Practice : Praktik penggabungan PHP dan HTML [BT + BM : 1x50”] ▪ Hello World ▪ Variable ▪ Mix HTML ▪ Mengenal Fungsi 10% 7 Mahasiswa mampu Memahami dan mempraktikan variable dan Operator pada konsep dasar PHP [C3, A2] ▪ Ketepatan dan penguasaan dalam mempraktikan Integer Float, String, Boolean, Array, Array Asosiatif, Array Multidimensi, Tipe Data Null

Kriteria : Ketepatan dan penguasaan Bentuk Non Test : Practice Variable dan Operator

▪ Kuliah dan diskusi [TM 2 x 50”] ▪ Practice : Praktik

pemahaman dasar HTML, PHP dan CSS dalam membuat Web Front End [BT + BM : 1x50”] ▪ Integer Float ▪ String ▪ Boolean ▪ Array ▪ Array Asosiatif ▪ Array Multidimensi ▪ Tipe Data Null

5%

UJIAN TENGAH SEMESTER 8 Memahami Dan mempraktikan konsep ▪ Ketepatan dan penguasaan dalam Kriteria : Ketepatan dan penguasaan

▪ Membuat Form ▪ Query String

GET

(13)

13 mengirim data melalui

Form [C3, A2, P2]

mempraktikan pembuatan Form, Method POST dan GET serta Parsing Array Bentuk Non Test : Review mengirim data melalui Form ▪ Tugas 3 : Membuat Form pendaftaran dengan method GET dan POST serta Parsing Array [BT + BM : 1x50”] ▪ Global Variable POST ▪ Parsing Array 9 Memahami Dan Mempraktikan pengecekan kondisi [C6, A2, P2] ▪ Ketepatan dan penguasaan dalam mempraktikan pengecekan kondisi If Else, If Else If, If Bersarang, Swith, Pengecekan Kondisi Ganda, dan Ternary Operator Kriteria : Ketepatan dan penguasaan Bentuk Non Test : Review pengecekan kondisi

▪ Kuliah dan diskusi [TM 2 x 50”] ▪ Tugas 4 : Mengembangkan fungsi form pendaftaran dengan penambahan kondisi [BT + BM : 1x50”] ▪ If Else ▪ If Else If ▪ If Bersarang ▪ Switch ▪ Pengecekan Kondisi Ganda ▪ Ternary Operator 15% 10 Memahami Dan mempraktikan fungsi perulangan [C3, A2] ▪ Ketepatan dan penguasaan dalam mempraktikan fungsi perulangan for, for array, while, foreach, break, continue, menampilkan data ke table Kriteria : Ketepatan dan penguasaan Bentuk Non Test : Review fungsi perulangan

▪ Kuliah dan diskusi [TM 2 x 50”] ▪ Review : mengimplementasikan fungsi perulangan pada form [BT + BM : 1x50”] ▪ For ▪ For Array ▪ While ▪ Foreach ▪ Break ▪ Continue ▪ Menampilkan Data Ke Table 5% 11 Memahami Dan mempraktikan Fungsi [C3, A2] ▪ Ketepatan dan penguasaan dalam mempraktikan membuat Kriteria : Ketepatan dan penguasaan Bentuk Non Test :

▪ Kuliah dan diskusi [TM 2 x 50”] ▪ Review :

implementasi fungsi sendiri dengan form

▪ Membuat Fungsi Sendiri

▪ Skup Variabel

(14)

14 fungsi sendiri, skup variable, mengembalikan hasil proses fungsi, dan parameter referensi Review praktik fungsi [BT + BM : 1x50”] ▪ Mengembalikan Hasil Proses Fungsi ▪ Parameter Referensi 12 Memahami Dan mempraktikan

managemen file bagian 1 [C3, A2, P2] ▪ Ketepatan dan penguasaan dalam mempraktikan menulis dan membaca file, menyimpan dalam format serialize dan json Kriteria : Ketepatan dan penguasaan Bentuk Non Test : Studi Kasus

▪ Tugas 3 : Studi kasus membuat web pendaftaran [BT + BM : 1x50”] ▪ Menulis dan Membaca File ▪ Menyimpan dalam format serialize dan Json

10%

13 Memahami dan mempraktikan

managemen file bagian 2 [C6, A2, P2] ▪ Ketepatan dan penguasan dalam mempraktikan membuat aplikasi to do membuat template, membuat aplikasi to do menyimpan data ke file, membuat aplikasi to do menampilkan list to do Kriteria : Ketepatan dan penguasaan Bentuk Non Test : Studi Kasus

▪ Kuliah dan diskusi [TM 2 x 50”] ▪ Tugas 4 :

Studi kasus membuat web pendaftaran [BT + BM : 1x50”] ▪ Membuat Aplikasi Todo Membuat Template ▪ Membuat Aplikasi Todo Menyimpan data ke File ▪ Membuat Aplikasi Todo Menampilkan List Todo 10% 14 Memahami Dan mempraktikan

managemen file bagian 3 [C3, A2, P2] ▪ Ketepatan dan penguasaan dalam mempraktikan membuat aplikasi Kriteria : Ketepatan dan penguasaan Bentuk Non Test :

▪ Kuliah dan diskusi [TM 2 x 50”] ▪ Tugas 5 :

Studi kasus membuat web pendaftaran ▪ Membuat Aplikasi Todo Memperbaharui Status 5%

(15)

15 to do memperbaharui status dan membuat aplikasi to do menghapus data

Studi kasus [BT + BM : 1x50”] ▪ Membuat Aplikasi Todo Menghapus Data

UJIAN AKHIR SEMESTER

Catatan :

1) TM : Tatap muka , BT : Belajar Terstruktur , BM : Belajar Mandiri 2) [TM 3x50”] dibaca : 2 sks x 50 menit = 100 menit

3) [BT+BM: (1x50”)]dibaca : belajar terstuktut dan mandiri 1x 50 menit

4) Mahasiswa mampu melakukan Pemrograman Berbasis Web 1 dan mengimplementasikannya [C6,A2,P2] : menunjukkan bahwa sub-CPMK ini mengandung kemampuan ranah taksonomi kognitif level 6(creating), ranah taksonomi afektif level 2 (responding) dan ranah taksonomi psikomotorik level 2(manipulation)

(16)

16

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER ROSMA

PROGRAM STUDI SISTEM INFORMASI

RENCANA TUGAS MAHASISWA

MATA KULIAH Pemrograman Berbasis Web 1

KODE SKS 3 SEMESTER 6

DOSEN PENGAMPU

Rahmat Gunawan, M.Kom

BENTUK TUGAS

Chapter Report

JUDUL TUGAS

Tugas 1 – Quiz konsep dasar pemrograman web SUB CAPAIN PEMBELAJARAN MATA KULIAH

Mahasiswa mampu menjelaskan Pemrograman Web Front End, HTML dan CSS [C3,A2]

DISKRIPSI TUGAS

Menjawab pertanyaan tentang konsep dasar pemrograman web

METODE PENGERJAAN TUGAS

1. Pilihlah jawaban yang paling benar dari lima pilihan 2. Jawablah pertanyaan dengan singkat dan jelas

BENTUK DAN FORMAT LUARAN

a. Obyek garapan : Soal pilihan ganda dan essay b. Bentuk Luaran :

Jawab pertanyaan dengan benar pada aplikasi e-learning

INDIKATOR , KRITERIA DAN BOBOT PENILAIAN

a. Hasil jawaban (100%)

Ketepatan dari hasil menjawab pertanyaan tentang konsep pemrograman web dasar

JADWAL PELAKSANAAN

Pertemuan pertama perkuliahan

LAIN – LAIN

Tugas wajib

DAFTAR RUJUKAN

Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta:

Andi Offset.

(17)

17

RENCANA TUGAS MAHASISWA MATA KULIAH Pemrograman Berbasis Web 1

BENTUK TUGAS

Practice Report

JUDUL TUGAS

Tugas 2 – Mempraktikan code HTML dan CSS bagian 1 SUB CAPAIN PEMBELAJARAN MATA KULIAH

Mahasiswa mampu Memahami dan mempraktikan code HTML dan CSS bagian 1 [C3, A2]

DISKRIPSI TUGAS

Tulislah kode program untuk membuat Table, List, Layout, Display and Dimension

Lakukan penulisan dan buat dokumen kode program untuk membuat table, list, layout, display and dimension pada modul yang sudah ditentukan

a. Obyek garapan : Practice penulisan kode program HTML dan CSS bagian 1 b. Bentuk Luaran :

Kumpulkan hasil dokumen HTML dan CSS bagian 1 pada perkuliahan pertemuan kedua

a. Hasil praktik (100%)

Ketepatan dari hasil penulisan kode program HTML dan CSS

Pertemuan kedua perkuliahan

LAIN – LAIN

Tugas wajib

DAFTAR RUJUKAN

Andi Offset.

(18)

18

BENTUK TUGAS

Practice Report

JUDUL TUGAS

Tugas 3 – Mempraktikan kode HTML dan CSS bagian 2 SUB CAPAIN PEMBELAJARAN MATA KULIAH

Mahasiswa mampu Memahami dan mempraktikan code HTML dan CSS bagian 2 [C3, A2, P2]

DISKRIPSI TUGAS

Tulislah kode program untuk membuat Box model dan overflow, CSS Float, CSS Position, CSS Background, CSS Text, CSS Font, CSS Selector

Lakukan penulisan dan buat dokumen kode program untuk membuat Box model dan overflow, CSS Float, CSS Position, CSS Background, CSS Text, CSS Font, CSS Selector pada modul yang sudah ditentukan

c. Obyek garapan : Practice penulisan kode program HTML dan CSS bagian 2 d. Bentuk Luaran :

Kumpulkan hasil dokumen HTML dan CSS bagian 2 pada perkuliahan pertemuan ketiga

Hasil praktik (100%)

Pertemuan ketiga perkuliahan

LAIN – LAIN

Tugas wajib

DAFTAR RUJUKAN

Andi Offset.

(19)

19

BENTUK TUGAS

Practice Report

JUDUL TUGAS

Tugas 4 -- Mempraktikan kode HTML dan CSS bagian 3

SUB CAPAIN PEMBELAJARAN MATA KULIAH

Mahasiswa mampu Memahami dan mempraktikan code HTML dan CSS bagian 3 [C3, A2]

DISKRIPSI TUGAS

Tulislah kode program untuk membuat Layout Dasar, Daftar Produk, Menu Dropdown, dan menambahkan Jumbotron

Lakukan penulisan dan buat dokumen kode program untuk membuat Layout Dasar, Daftar Produk, Menu Dropdown, dan menambahkan Jumbotron pada modul yang sudah ditentukan

e. Obyek garapan : Practice penulisan kode program HTML dan CSS bagian 3 f. Bentuk Luaran :

Kumpulkan hasil dokumen HTML dan CSS bagian 3 pada perkuliahan pertemuan keempat

Hasil praktik (100%)

Pertemuan keempat perkuliahan

LAIN – LAIN

Tugas wajib

DAFTAR RUJUKAN

Andi Offset.

(20)

20

BENTUK TUGAS

Practice Report

JUDUL TUGAS

Tugas 5 -- Quiz teknologi code HTML5 dan CSS3 terbaru

Mahasiswa mampu Memahami dan mempraktikan teknologi code HTML5 dan CSS3 terbaru [C3, A2, P2]

DISKRIPSI TUGAS

Menjawab pertanyaan tentang perbandingan Teknologi HTML5 dan CSS3 terbaru dengan yang lama

1. Pilihlah jawaban yang paling benar dari lima pilihan 2. Jawablah pertanyaan dengan singkat dan jelas

a. Obyek garapan : Soal pilihan ganda dan essay b. Bentuk Luaran :

Jawab pertanyaan dengan benar pada aplikasi e-learning

Hasil jawaban (100%)

Ketepatan dari hasil menjawab pertanyaan tentang teknologi code HTML5 dan CSS3 terbaru

Pertemuan kelima perkuliahan

LAIN – LAIN

Tugas wajib

DAFTAR RUJUKAN

Andi Offset.

(21)

21

BENTUK TUGAS

Practice Report

JUDUL TUGAS

Tugas 6 -- Praktik penggabungan PHP dan HTML

Mahasiswa mampu memahami dan mempraktikan konsep dasar PHP [C6, A2, P2]

DISKRIPSI TUGAS

Buatlah Layout Dasar, Daftar Produk, Menu Dropdown, dan tambahkan Jumbotron

Lakukan penulisan dan buat dokumen kode program untuk membuat Layout Dasar, Daftar Produk, Menu Dropdown, dan menambahkan Jumbotron pada modul yang sudah ditentukan

a. Obyek garapan : Practice penulisan kode program dasar PHP b. Bentuk Luaran :

Kumpulkan hasil dokumen PHP dan HTML pada perkuliahan pertemuan keenam

Hasil jawaban (100%)

Ketepatan dari menulis kode program PHP dan HTML

Pertemuan keenam perkuliahan

LAIN – LAIN

Tugas wajib

DAFTAR RUJUKAN

Andi Offset.

(22)

22

BENTUK TUGAS

Practice Report JUDUL TUGAS

Tugas 7 -- Praktik pemahaman dasar HTML, PHP dan CSS dalam membuat Web Front End

Mahasiswa mampu Memahami dan mempraktikan variable dan Operator pada konsep dasar PHP [C6, A2, P2]

DISKRIPSI TUGAS

Buatlah dokumen kode program Integer Float, String, Boolean, Array, Array Asosiatif, Array Multidimensi, Tipe Data Null

Lakukan penulisan dan buat dokumen kode program untuk membuat Integer Float, String, Boolean, Array, Array Asosiatif, Array Multidimensi, Tipe Data Null pada modul yang sudah ditentukan

a. Obyek garapan : Practice penulisan kode program variable dan operator pada konsep dasar PHP b. Bentuk Luaran : Kumpulkan hasil dokumen PHP dan HTML pada perkuliahan pertemuan ketujuh

Bentuk Luaran :

Kumpulkan hasil dokumen PHP dan HTML pada perkuliahan pertemuan keenam

Pertemuan kedelapan perkuliahan

LAIN – LAIN

Tugas wajib

DAFTAR RUJUKAN

Andi Offset.

(23)

23

BENTUK TUGAS

Studi Kasus

JUDUL TUGAS

Tugas 8 – Membuat form biodata

Memahami Dan mempraktikan konsep mengirim data melalui Form [C6, A2, P2]

DISKRIPSI TUGAS

Buatlah desain form input biodata dan proses input biodata

1. Buatlah form biodata sesuai komponen-komponen yang sudah ditentukan

2. Buatlah dokumen form biodata dan proses biodata agar dapat menampilkan hasil input fom biodata

a. Obyek garapan : desain form biodata b. Bentuk Luaran :

Kumpulkan hasil desain form dan proses dalam bentuk .zip pada pertemuan ke sembilan

a. Hasil Output (75%)

Ketepatan dari hasil form input b. Hasil dokumentasi (25%)

Kerapian desain form input

Pertemuan kesembilan perkuliahan

LAIN – LAIN

Tugas wajib

DAFTAR RUJUKAN

Andi Offset.

(24)

24

BENTUK TUGAS

Studi Kasus

JUDUL TUGAS

Tugas 9 – Mengecek kondisi pada proses biodata

Memahami Dan Mempraktikan pengecekan kondisi [C6, A2, P2]

DISKRIPSI TUGAS

Buatlah kondisi pada file proses biodata

1. Lakukan proses input biodata sesuai kondisi yang sudah ditentukan 2. Buatlah dokumen beberapa kondisi yang sudah ditentukan

a. Obyek garapan : pengaplikasin pengecekan kondisi b. Bentuk Luaran :

Kumpulkan hasil file pengecekan kondisi yang sudah dibuat dalam bentuk .zip

a. Hasil analisis (75%)

Ketepatan dari hasil pengecekan kondisi b. Hasil dokumentasi (25%)

Kerapian penulisan code program

Pertemuan kesepuluh

LAIN – LAIN

Tugas wajib

DAFTAR RUJUKAN

Andi Offset.

(25)

25

BENTUK TUGAS

Practice Report

JUDUL TUGAS

Tugas 10 – Praktik fungsi perulangan

Memahami Dan mempraktikan fungsi perulangan [C3, A2, P2]

DISKRIPSI TUGAS

Buatlah dokumen baru untuk mempraktikan fungsi perulangan menggunakan Bahasa PHP7

Tuliskan kode program yang telah ditentukan pada modul kedalam tools editor sublime text dan simpan file dengan ekstensi .PHP

c. Obyek garapan : mempraktikan fungsi perulangan d. Bentuk Luaran :

Kumpulkan hasil dokumen fungsi perulangan dalam bentuk .zip

c. Hasil analisis (75%)

Ketepatan dari hasil fungsi perulangan d. Hasil dokumentasi (25%)

Kerapian penulisan kode program

Pertemuan kesepuluh

LAIN – LAIN

Tugas wajib

DAFTAR RUJUKAN

Andi Offset.

(26)

26

RENCANA UJIAN TENGAH SEMESTER MAHASISWA MATA KULIAH Pemrograman Berbasis Web 1

BENTUK UJIAN TENGAH SEMESTER

Take Home

JUDUL UJIAN TENGAH SEMESTER

Membuat desain web front end menggunakan CSS, HTML dan PHP

DISKRIPSI UJIAN TENGAH SEMESTER

Membuat desain web front end sesuai dengan jenis web yang ditentukan

METODE UJIAN TENGAH SEMESTER

1. Carilah contoh desain web dari jenis web seperti web e-commerce, e-ticketing, e-learning, dll.

2. Pilih salah satu yang dapat kalian buatkan desainnya 3. Buatlah form input pada proses web tersebut

4. Dokumentasikan hasil desain dalam bentuk .zip

5. Kumpulkan pada saat jadwal ujian tengah semester dilaksanakan

a. Obyek garapan : Membuat desain web front end b. Bentuk Luaran :

Kumpulkan hasil desain dalam bentuk .zip

e. Hasil analisis (75%) Ketepatan dari desain web f. Hasil dokumentasi (25%)

Kerapian kode program dan desain web

Ujian tengah semester

LAIN – LAIN

Antar teman maksimal satu orang boleh sama

DAFTAR RUJUKAN

Andi Offset.

(27)

27

RENCANA UJIAN AKHIR SEMESTER MAHASISWA MATA KULIAH Pemrograman Berbasis Web 1

BENTUK UJIAN AKHIR SEMESTER

Take Home

JUDUL UJIAN AKHIR SEMESTER

Project Pemrograman Berbasis Web 1

DISKRIPSI UJIAN AKHIR SEMESTER

Buat aplikasi To Do

METODE UJIAN AKHIR SEMESTER

1. Buatlah desain aplikasi to do berdasarkan jenis kasus yang ditentukan

2. Buatlah aplikasi to do yang dapat membuat template, meyimpan data ke file, menampilkan list to do, memperbaharui status, dan menghapus data

3. Desain menggunakan CSS

4. Kirim dokumen dalam bentuk .zip

c. Obyek garapan : Projek pengembangan aplikasi to do dengan Json d. Bentuk Luaran :

Aplikasi to do dengan desain CSS dan Json

g. Hasil analisis (75%)

Ketepatan dari pembuatan desain web dan proses web h. Hasil dokumentasi (25%)

Kerapian penulisan kode program

Ujian akhir semester

LAIN – LAIN

Antar teman maksimal satu orang boleh sama

DAFTAR RUJUKAN

Andi Offset.

(28)

(29)

(30)

(31)

(32)

(33)

(34)

(35)

(36)

(37)

(38)

(39)

(40)

(41)

(42)

(43)

43

BAB 1

Pengenalan PHP

Pada bab ini Anda akan dikenalkan dengan PHP sebagai salah satu server side programming, pengertian server side programming dan client side programming, serta alasan mengapa memilih PHP. Tak lupa pula akan dijelaskan tool apa saja yang diperlukan untuk belajar PHP.

Tentang Client Side dan Server Side Programming

PHP atau merupakan singkatan rekursif dari PHP : Hypertext Preprocessor adalah suatu bahasa pemrograman yang termasuk kategori server side programming. Wah… apaan tuh maksudnya server side programming? OK… server side programming adalah jenis bahasa pemrograman yang nantinya script/program tersebut akan dijalankan oleh server. Selanjutnya hasil pengolahan script/program tersebut akan dikirim ke client sebagai output.

(44)

44

Misalkan Anda ingin membuat script/program untuk menjumlahkan dua buah bilangan dengan menggunakan PHP. Nah… andaikan Anda telah membuat form untuk input kedua bilangan dan membuat script PHP untuk mengolah penjumlahan kedua bilangan. Dalam hal ini, keduanya (form dan script PHP) sama-sama diupload ke server.

Selanjutnya misalkan ada seorang user yang ingin menjumlahkan dua bilangan, maka user tadi akan mengakses ke server. Apa yang diakses? Tentunya form input bilangan yang akan dijumlahkan. Dalam hal ini posisi si user adalah sebagai client. Nah… setelah si user mengisi bilangan pada form, selanjutnya dia mensubmitnya. Trus… kemana mensubmitnya? Karena Anda tadi membuat script PHP dan form input telah diarahkan ke script PHP tersebut, maka data input akan disubmit ke server untuk diolah menggunakan script PHP yang telah Anda buat tadi. Setelah input diolah (dijumlahkan), maka hasilnya akan kembali dikirim ke client sebagai output sehingga si user mengetahui hasil penjumlahan dua bilangan yang diinputkan melalui form tadi.

Penjelasan detail tentang cara mengkaitkan antara form dan script PHP sebagai pengolahnya akan dijelaskan di bab tentang pemrosesan form.

Trus… selain server side programming, apakah ada jenis yang lain? Oh.. Ada donk yaitu client side programming. Jenis programming ini merupakan kebalikan dari server side programming. Untuk client side programming, script/program akan diproses di dalam client sendiri.

Untuk menggambarkan client side programming, kita ambil contoh kasus yang sama dengan sebelumnya yaitu script menjumlahkan dua bilangan. OK… misalkan Anda membuat form input untuk memasukkan dua bilangan, serta script untuk menjumlahkannya. Selanjutnya keduanya ditaruh/diupload ke server. Misalkan ada user yang ingin menjumlahkan dua bilangan, maka dia akan mengakses ke server form input.

Karena Anda menggunakan script pengolah berjenis client side programming, maka script tersebut juga akan terakses oleh si user. Biasanya script ini diletakkan dalam satu halaman yang sama dengan form. Oleh karena itu bila si user mengakses form, maka script juga otomatis akan terakses. Setelah si user memasukkan bilangan ke dalam form, lalu dia mensubmitnya. Trus… kemana

submitnya? Yap… submit ini tidak ditujukan ke server melainkan ke client itu sendiri dan diolah oleh script yang ikut terakses tadi. Kemudian hasilnya ditampilkan sebagai output.

Salah satu contoh bahasa pemrograman web yang berjenis client side programming adalah Javascript.

Untuk melihat perbedaan yang kentara antara bahasa pemrograman web yang berjenis server side programming dan client side programming adalah bisa atau tidaknya script/program itu ditampilkan ke dalam browser ketika mengaksesnya. Apa maksudnya?

(45)

45

Cobalah akses suatu halaman situs yang di dalamnya terdapat Javascript, misalnya

http://detik.com. Ketika Anda lihat source halaman web tersebut (klik kanan, klik View Page Source pada Firefox atau klik nanan, klik View Source pada IE), maka dapat Anda lihat isi kode script Javascriptnya, yang biasanya ditandai dengan

dan diakhiri dengan tanda

</script>

Mengapa kode Javascript itu bisa terlihat? Ya… karena script itu nantinya akan diproses oleh komputer client, sehingga kode itu ibaratnya harus didownload terlebih dahulu ke dalam client.

Selanjutnya bandingkan ‘penampakannya’ ☺ bila Anda mengakses script PHP, misalkan script yang telah saya buat untuk percobaan (http://rosihanari.net/test.php). Ketika Anda lihat dibrowser, maka yang tampil adalah hanyalah berupa teks pesan saja. Dan apabila Anda lihat sourcenya, maka tidak tampak perintah-perintah yang berupa kode PHP. Padahal isi dari script test.php ini adalah sebagai berikut:

<?php

echo "Hello apa kabar?<br />";

echo "Terimakasih atas kepercayaan Anda pada Rosihan Ari sebagai pembimbing belajar PHP Anda";

?>

Mengapa bisa demikian? Ya… karena script test.php ini telah dijalankan atau diproses di server dan bukan di client. Dalam hal ini client hanya menerima output hasil pengolahan script di server.

Mudah-mudahan dari uraian di atas Anda sudah bisa membedakan apa itu server side programming dan client side programming.

Kenapa PHP?

Di samping PHP, sebenarnya ada beberapa jenis pemrograman lain yang termasuk server side programming yaitu JSP (Java Server Pages), ASP (Active Server Pages), Phyton, dan Perl, serta masih ada lagi beberapa yang lain. Namun mengapa saya rekomendasikan PHP untuk Anda pelajari? Ya… karena PHP memiliki beberapa kelebihan antara lain:

(46)

46

2. PHP mudah diimplementasikan karena software PHP servernya 100% Free

3. Kebanyakan server web hosting mensupport PHP

4. PHP paling banyak digunakan oleh web programmer di seluruh dunia

Statistik situs yang menggunakan PHP (sekitar 20 juta situs)

Sumber : http://www.php.net/usage.php

Menurut TIOBE index, PHP merupakan bahasa pemrograman yang memiliki tingkat rating no. 4 setelah Java, C dan C++ di akhir tahun 2008 ini (Sumber:

http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html).

Selain itu trend penggunaan PHP sebagai bahasa pemrograman selama kurun waktu 2002 s/d 2008 adalah sebagai berikut

(47)

47

Sumber : http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html Dari grafik di atas tampak bahwa PHP masuk dalam 10 besar bahasa pemrograman yang paling banyak digunakan, dan PHP termasuk urutan nomor 2 pemrograman favorit.

5. Anda bisa melakukan instalasi PHP server sendiri dengan mudah di komputer pribadi Anda untuk belajar.

6. Integrasi antara PHP dan database mudah untuk diimplementasikan karena PHP mensupport banyak database (DBMS), seperti MySQL, MS. Access, Oracle, DB2, Dbase, Interbase dll.

Tool Apa Saja Yang Diperlukan Untuk Belajar PHP?

Untuk memudahkan Anda belajar PHP, berikut ini beberapa tool yang sebaiknya Anda miliki :

1. Software web server, bisa dipilih salah satu antara Apache, IIS, PWS (100 % free)

2. Software PHP server (100% free)

3. Software database, sebaiknya pilih MySQL karena 100% free. Bila sudah menguasai PHP + MySQL bisa dikembangkan dengan database yang lain.

4. Text Editor, misalkan Notepad atau Notepad++. Dalam hal ini saya merekomendasikan Notepad++ karena selain software ini 100% free, juga mensupport untuk memudahkan penulisan bahasa program.

5. Web Editor, misalnya Dreamweaver atau Frontpage (sifatnya optional) sebagai pendukung saja.

Untuk tool no. 1 s/d 3 sebenarnya Anda tidak perlu mencarinya atau menginstalasi secara terpisah, karena ada software paket yang di dalamnya sudah tersedia web server Apache, PHP server dan MySQL. Dalam hal ini saya merekomendasikan AppServ (http://www.appservnetwork.com), XAMPP atau EasyPHP sebagai softwarenya, yang kesemuanya absolutely FREE.

BAB 2

Instalasi PHP dan Software

Pendukungnya

(48)

48

Pada bab ini Anda akan mempelajari bagaimana cara melakukan instalasi PHP server dan juga pendukungnya.

Agar script PHP yang Anda buat bisa berjalan, Anda terlebih dahulu harus sudah menginstall PHP server di komputer Anda. Oya... dalam hal ini kita akan belajar menginstal PHP server ini di

komputer Anda sendiri untuk keperluan belajar. Anda tidak perlu menjalankan script PHP di server khusus yang spesifikasinya besar atau di server hosting, tapi cukup di komputer Anda pribadi.

OK... kita mulai masuk ke pokok bahasan utama. Untuk bisa menjalankan PHP, Anda butuh beberapa software pendukungnya antara lain: Web Server, dan juga database sebagai pelengkapnya. Database di sini diperlukan ketika Anda ingin membuat aplikasi web yang diintegrasikan dengan database.

Ada beberapa macam software yang bisa digunakan sebagai web server, diantaranya adalah : Apache, IIS, dan Personal Web Server. Sedangkan untuk software database, atau sering disebut dengan istilah DBMS (Database Management System), Anda bisa menggunakan MySQL, SQL Server, MS. Access, dll.

Nah... di sini saya hanya akan mengajarkan bagaimana melakukan instalasi PHP server, Apache sebagai web servernya dan juga MySQL sebagai DBMS nya. Mengapa saya memilih Apache dan MySQL? Ya... karena hampir seluruh server hosting telah mendukung kedua software. Selain itu keduanya adalah free sehingga tidak perlu khawatir lagi terkait lisensinya.

OK... untuk menginstal PHP dan pendukungnya, Anda tidak perlu melakukan instalasi satu persatu, namun bisa langsung sekaligus semuanya. Lho kok bisa? Ya... karena saat ini banyak tersedia software bundling yang di dalamnya sudah ada PHP server, Apache dan MySQL nya. Beberapa di antaranya adalah AppServ, XAMPP dan EasyPHP. Tapi dalam hal ini saya sangat merekomendasikan AppServ karena konfigurasinya yang sangat mudah dibandingkan yang lain.

Instalasi AppServ

Berikut ini cara melakukan instalasi AppServ di komputer Anda.

1. Download software AppServ ini di http://appservnetwork.com

2. OK... setelah Anda mendownloadnya, silakan double click file hasil downloadnya.

3. Secara default, letak file AppServ untuk instalasi ini adalah di C:\AppServ

4. Bila pada instalasi AppServ muncul kotak dialog seperti ini, maka pilihlah semua option yang ada

(49)

49

Option tersebut menunjukkan software apa saja dalam AppServ yang ingin diinstal, dalam hal ini pilihlah semuanya (Apache, MySQL, PHP server dan phpMyAdmin).

Catatan: phpMyAdmin adalah software untuk mempermudah pengelolaaan database MySQL

5. Bila sampai pada tahap tampilan instalasi seperti di bawah ini

Isikan Name Server nya dengan nama Anda atau apalah sebarang. Nama itu nantinya dipakai sebagai nama server webnya. Sebaiknya jangan ada spasi untuk nama servernya. Nama server nanti bisa dipanggil di browser, misal kalau nama servernya ‘rosihanari’, maka Anda dapat mengakses http://rosihanari di browser Anda.

6. Selanjutnya apabila instalasi telah sampai pada tampilan berikut ini

(50)

50

Isikan password untuk username: root guna mengakses database MySQL. Oya… sebaiknya option Enable InnoDB Anda aktifkan supaya MySQL bisa mensupport relasi dan integritas antara tabel. Apa kelebihan InnoBD? Silakan baca artikel saya di

http://blog.rosihanari.net/foreign-key-relationship-dan-referential-integritydi-mysql/

7. Apabila proses instalasi selesai, maka selanjutnya cobalah buka browser Anda dan arahkan URLnya ke http://namaserver atah http://localhost yang telah Anda berikan sebelumnya pada proses instalasi. Bila browsernya menampilkan halaman berikut ini, maka instalasi AppServ sukses.

8. Halaman yang tampil di atas adalah hasil dari akses file index.php yang terletak dalam direktori C:\AppServ\www. Jadi... file-file web dan juga script PHP yang nantinya akan Anda buat harus diletakkan di direktori tersebut. Apakah bisa diletakkan di tempat lain? Oh bisa saja... bagaimana caranya, simak di Bab 3 tentang bagaimana mengatur konfigurasi di PHP dan Web Server (Apache)

(51)

51

BAB 3

Konfigurasi Apache, PHP dan MySQL

Pada bagian ini, Anda diharapkan bisa memahami bagaimana cara melakukan konfigurasi pada Apache, PHP dan MySQL.

Konfigurasi Apache

Secara default, file web dan script PHP yang nantinya Anda buat akan diletakkan di direktori C:\AppServ\www. Akan tetapi jika menghendaki direktori tersebut dipindahkan, maka hal ini bisa dilakukan. Sebagai contoh, misalkan Anda membuat folder di D:\ dengan nama webku atau membuat direktori D:\webku untuk meletakkan file-file web dan script PHPnya. Nah.. supaya file web dan script PHP ini bisa diakses melalui browser dan web server maka terlebih dahulu Anda harus melakukan setting di bagian konfigurasi Apache.

Bagaimana cara melakukan setting konfigurasi Apache untuk memindahkan default direktori untuk meletakkan file web dan script PHPnya? OK ini dia langkah-langkahnya:

1. Klik START > AppServ > Configuration Server

2. Pilih “Apache Edit The httpd.conf Configuration File”

3. Carilah baris bertuliskan DocumentRoot "C:/AppServ/www" pada isi file httpd.conf tersebut. Gunakan fasilitas Find pada Notepad

4. Ubahlah baris tersebut dengan DocumentRoot "D:/webku".

5. Cari juga baris <Directory "C:/AppServ/www"> dan ubahlah menjadi <Directory "D:/webku">

6. Cari juga baris <Directory "C:/AppServ/www/cgi-bin"> dan ubahlah menjadi <Directory "D:/webku/cgi-bin">

(52)

52

8. Lakukan Restart pada Apache dengan cara klik START > AppServ > Control Server by Service > Restart Apache

Untuk melihat perubahannya, silakan Anda coba buat file web berikut ini pada Notepad.

<title>Ini halaman pertama</title> </head>

<body>

<h1>Ini halaman web pertamaku</h1> </body>

</html>

Simpan file tersebut dengan nama index.htm dan letakkan ke direktori D:\webku. Selanjutnya panggil file web tersebut menggunakan web server melalui browser dengan URL http://localhost

atau http://namaserver. Bila halaman web muncul tampilan berisi teks Test.. Test sebagai mana yang kita tulis di atas, maka konfigurasi sukses. Sedangkan bila tidak muncul apa-apa atau error, maka coba cek lagi langkah-langkah konfigurasi di atas. Pastikan nama direktorinya benar.

Sekarang coba buat lagi halaman web yang lain.

<title>Ini halaman kedua</title> </head>

<body>

<h1>Ini halaman web keduaku</h1> </body>

</html>

Sekarang simpan file di atas dengan nama hal2.htm dan letakkan ke D:\webku. Kemudian panggil file web tersebut dengan URL http://localhost/hal2.htm atau http://namaserver/hal2.htm.

Anda juga bisa membuat folder di dalam D:\webku. Apabila Anda meletakkan file web ke dalam folder tersebut, maka cara mengakses ke file web tersebut melalui browser adalah

http://localhost/namafolder/namafile.

(53)

53

Oya… meskipun Anda bisa langsung membuka kedua file web yang telah dibuat di atas melalui proses double click pada file melalui Windows Explorer, tapi proses ini tidak melibatkan web server. Beda prosesnya ketika Anda mengakses file web melalui http://localhost seperti di atas. Ketika Anda mengakses file web melalui http://localhost, maka pada prinsipnya proses request web yang dilakukan client (dalam hal ini Anda) akan diproses oleh web server. Proses yang dimaksud adalah mencari file web yang diinginkan pada root direktori (D:\webku). Setelah ketemu, hasilnya akan dikirim ke web browser untuk ditampilkan.

(54)

54

BAB 4

Struktur Dasar Script PHP

Pada bab ini kita akan mempelajari struktur dasar script PHP, aturan penulisan statement PHP, cara menyisipkan script PHP ke dalam tag (X)HTML dan juga kebalikannya, tentang variabel, aturan penamaan variabel, sampai dengan penulisan komentar.

Struktur Script PHP

Kode-kode PHP dituliskan di antara tanda berikut ini: <?php ... ... ... ?> atau <? ... ... ... ?>

Tips : diantara kedua aturan struktur di atas, sebaiknya gunakan struktur yang pertama (diawali dengan <?php dan diakhiri dengan ?>). Mengapa? Ya... karena tidak semua web server mengenali struktur yang kedua.

(55)

55

Menyimpan File PHP

Script PHP yang dibuat harus disimpan dalam ekstensi .php. Apabila tidak, maka script tidak akan bisa dijalankan dan hanya dianggap teks biasa saja. Dahulu script PHP dapat juga disimpan dalam bentuk ekstensi .php3, namun hal ini berlaku untuk PHP versi 3.x saja. Sejak rilis 4.x ke atas, ekstensi tersebut tidak digunakan lagi.

Dimanakah letak script PHP ini harus disimpan supaya bisa dijalankan? Script PHP yang Anda buat harus diletakkan dalam root direktori dari web server. Apabila Anda menggunakan AppServ, script PHP diletakkan dalam direktori C:\AppServ\www. Bisa juga Anda mengubah letak root direktori web servernya ke tempat lain. Untuk melakukan hal ini baca kembali Bab III.

Selanjutnya coba buat script PHP pertama Anda berikut ini:

<?php

echo "Hello World"; echo "Hello World"; echo "Hello World <br />"; echo "Hello World <br />";

?> Tips :

Dalam membuat script PHP, sebaiknya text editor NOTEPAD++ supaya lebih mudah mengetahui baris mana dalam kode PHP yang salah.

Simpan script PHP tersebut dengan nama test.php, dan letakkan ke dalam root direktori web server. Perhatikan apa yang tampak ketika script di atas dibuka pada browser (panggil script di atas dengan URL http://localhost/test.php) !

Sekarang kita akan lihat misalkan ada kesalahan perintah atau sintaks dalam kode PHP nya. Misalkan ada perintah echo yang salah dalam penulisannya seperti pada script berikut ini:

<?php

eho "Hello World"; echo "Hello

World"; echo "Hello World <br />"; echo "Hello World <br />"; ?>

(56)

56

Bila script di atas dijalankan di browser, maka akan muncul pesan error:

Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in

C:\AppServ\www\test.php on line 3

Dari pesan tersebut tampak adanya kesalahan pada baris ke-3 (on line 3). Dengan demikian Anda harus segera memperbaikinya. Dengan menggunakan Notepad++ Anda dapat dengan cepat menemukan nomor baris dari script PHP yang dibuat.

Selanjutnya jawab dalam hati pertanyaan berikut ini:

1. Apa gunanya perintah echo?

2. Mengapa teks “Hello World” yang kedua terletak sebaris dengan “Hello World” yang pertama?

3. Mengapa teks “Hello World” yang ketiga terletak pada baris yang kedua?

4. Setiap baris statement kode PHP selalu diakhiri dengan tanda semicolon/titik koma. Apa efeknya bila tanda ini dihapus?

5. Bisakah Anda membuat script PHP untuk menampilkan teks dengan format di bawah ini pada browser hanya dengan menggunakan sebuah echo saja?

Hello World Hello World Hello World Hello World

Simpan script Anda ini dengan nama test2.php dan letakkan ke dalam folder bernama ‘test’ yang terlebih dahulu dibuat pada root direktori web server. Panggil script ini dengan nama URL http://localhost/test/test2.php

Menyisipkan Script PHP dalam Dokumen (X)HTML

Script PHP dapat juga disisipkan ke dalam dokumen (X)HTML. Berikut ini contohnya:

<title>Halaman PHP pertamaku</title> </head>

(57)

57 <body>

<h1>Script PHP dalam (X)HTML</h1> <?php echo "Hello

World!"; echo "Hello World!"; echo "Hello World!"; echo "Hello World!"; echo "Hello World!"; ?> </body> </html>

Karena dalam dokumen (X)HTML di atas terdapat script PHP, maka file di atas nantinya juga harus disimpan menggunakan ekstensi .php, bukan .htm atau .html.

Coba tulis script di atas dan simpan dengan nama test3.php. Letakkan script ke dalam folder ‘test’ seperti sebelumnya dan panggil dengan URL http://localhost/test/test3.php

Kita juga bisa menyisipkan lebih dari satu script PHP dalam sebuah dokumen (X)HTML seperti contoh di bawah ini

<?php echo "<title>Halaman PHP pertamaku</title>"; ?> </head>

<body>

<h1>Script PHP dalam (X)HTML</h1>

<?php

echo "<p>Ini paragraph yang dibuat dengan script PHP</p>"; echo "<p>Ini paragraph yang dibuat dengan script PHP</p>";

?>

<p>Ini paragraph yang dibuat tanpa script PHP</p> <p>Ini paragraph yang dibuat tanpa script PHP</p>

(58)

58

echo "<p>Ini paragraph yang dibuat dengan script PHP</p>"; echo "<p>Ini paragraph yang dibuat dengan script PHP</p>";

?>

</body> </html>

Coba simpan file di atas dengan nama test4.php dan lihat hasilnya di browser.

Penggunaan Variabel

Variabel dalam pemrograman digunakan untuk menyimpan suatu nilai dan jika suatu saat nilai tersebut diperlukan kembali untuk proses perhitungan, maka cukup memanggil nama variable tersebut.

Dalam PHP, nama suatu variabel ditandai dengan tanda dollar ($). Berikut ini adalah sintaks untuk menyimpan nilai ke dalam suatu variabel.

$namaVariabel = nilai;

Adapun beberapa aturan penulisan nama variabel adalah sebagai berikut:

• Nama variabel harus diawali dengan huruf atau underscore ( _ )

• Nama variabel hanya boleh dituliskan dengan alpha numeric a-z, A-Z, 0-9 dan underscore

• Nama variabel yang terdiri lebih dari satu kata, dapat dipisahkan dengan underscore

Berikut ini beberapa contoh menyimpan nilai ke dalam variabel.

<?php

$teks = "Hello World!"; $sebuah_bilangan = 4; $bilanganYangLain = 8.567; $teks2 = $teks;

?>

(59)

59

Keterangan:

• Perintah pertama digunakan untuk menyimpan nilai berupa string ke dalam variabel bernama $teks.

• Perintah kedua digunakan untuk menyimpan nilai berupa bilangan bulat 4 ke dalam variabel bernama $sebuah_bilangan.

• Perintah ketiga digunakan untuk menyimpan nilai berupa bilangan riil 8.567 ke dalam variabel bernama $bilanganYanglain.

• Perintah keempat digunakan untuk menyimpan nilai yang tersimpan dalam variabel $teks, dalam hal ini juga “Hello World!”.

Catatan Penting:

Besar kecilnya huruf dalam nama variabel sangat berpengaruh. Maksudnya misalnya kita membuat variabel $a dengan $A, keduanya adalah berbeda. Sifat ini dinamakan case sensitive. Jadi hati-hati dalam menuliskan nama variabel.

Menampilkan Nilai Variabel

Untuk menampilkan nilai yang telah tersimpan dalam variabel, kita gunakan echo. Berikut ini contohnya:

<?php

$teks = "Hello World!"; $sebuah_bilangan = 4; $bilanganYangLain = 8.567; $teks2 = $teks; echo $teks; echo "<br />" . $sebuah_bilangan;

echo "<br />Isi dari variabel \$bilanganYangLain : " . $bilanganYangLain; echo "<br />Isi dari variabel \$teks2 adalah : " . $teks2;

?>

Keterangan:

(60)

60

• Tanda titik (dot) digunakan untuk menggabungkan string. Dalam hal ini, nilai yang akan ditampilkan dianggap sebagai suatu string.

• Tanda backslash (\) di depan $ pada script di atas digunakan untuk menampilkan tanda $ ke dalam browser. Coba lihat efeknya apabila tanda backslash ini dihapus.

Lebih Lanjut Tentang Echo

Sekarang… misalkan kita akan menampilkan tag HTML berikut ini ke dalam browser menggunakan script PHP.

<font color="red">I love using PHP!</font>

Tag di atas digunakan untuk menampilkan teks ‘I love using PHP!’ berwarna merah.

Kira-kira bagaimana bentuk script PHP nya? Apakah seperti berikut ini?

<?php

echo "<font color="red">I love using PHP!</font>";

?>

Bila script di atas dijalankan di browser, maka akan terdapat pesan kesalahan. Mengapa demikian? Ya… karena string yang akan di’echo’ kan terdapat tanda petik dua (double quotes).

Trus… bagaimana solusinya? Ada 2 solusi yang bisa digunakan. Solusi pertama adalah ubahlah tanda double quotes pada "red" menjadi single quote 'red'.

<?php

echo "<font color='red'>I love using PHP!</font>"; ?>

Cara yang kedua, tambahkan tanda backslash di depan setiap double quotesnya.

(61)

61 <?php

echo "<font color=\"red\">I love using PHP!</font>";

?>

Menyisipkan Komentar dalam Script PHP

Seperti halnya bahasa pemrograman yang lain, komentar dalam suatu kode PHP tidak akan dieksekusi atau diproses. Biasanya komentar digunakan untuk memberikan deskripsi tentang script secara keseluruhan atau memberikan penjelasan pada baris perintah tertentu.

Terdapat dua cara memberikan komentar dalam PHP, yaitu

• Menggunakan tanda // di depan teks komentar. Perintah ini hanya bisa berlaku untuk komentar dalam satu baris

• Menggunakan tanda /* di depan teks komentar dan diakhiri dengan */. Perintah ini dapat digunakan untuk komentar yang terdiri lebih dari satu baris.

Contoh:

<?php echo "Hello World!"; // perintah ini akan mencetak Hello World! ?>

Contoh yang lain:

<?php /*

Berikut ini adalah perintah untuk menampilkan teks Hello World pada browser

*/

echo "Hello World!"; ?>

Contoh yang lain:

(62)

62 // Berikut ini adalah perintah

// untuk menampilkan teks Hello World // pada browser

echo "Hello World!"; ?>

BAB 5.

Assignment & Operator Aritmatika

Pada bab ini akan dijelaskan lebih mendalam mengenai proses assignment serta pengenalan beberapa operator aritmatika.

Assignment

Seperti yang telah disinggung pada bab sebelumnya (Bab IV) bahwa proses pemberian suatu nilai kepada suatu variabel diistilahkan ‘assignment’. Tinjau kembali script yang telah diberikan sebelumnya pada Bab IV berikut ini

<?php