Scribd
Unggah
49 tayangan

Modul Web Dasar

Modul ini membahas dasar-dasar pembuatan halaman web menggunakan HTML, meliputi pengenalan HTML, tag-tag dasar seperti <html>, <head>, <body>, penggunaan tag-tag untuk formatting teks seperti <h1>-<h6>, <p>, <b>, <i>, dan penggunaan tag-tag untuk membuat daftar dan tabel."

Diunggah oleh

Adipati
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
49 tayangan

Modul Web Dasar

Modul ini membahas dasar-dasar pembuatan halaman web menggunakan HTML, meliputi pengenalan HTML, tag-tag dasar seperti <html>, <head>, <body>, penggunaan tag-tag untuk formatting teks seperti <h1>-<h6>, <p>, <b>, <i>, dan penggunaan tag-tag untuk membuat daftar dan tabel."

Diunggah oleh

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

MODUL PEMROGRAMAN

WEB DASAR

UNIVERSITAS BUMIGORA
MODULE 1
DASAR-DASAR HTML

A. TUJUAN
1. Mahasiswa dapat menerangkan konsep dasar web dan arsitektur html.
2. Mahasiswa dapat membuat halaman web sederhana menggunakan tag html
dasar.

B. DASAR TEORI
1. Pengenalan HTML
HTML atau HyperText Markup Language merupakan salah satu format
yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan
dihalaman web. HTML adalah file text murni yang dapat dibuat dengan editor
text apapun. Dokumen ini dikenal sebagai web page, dokumen HTML
merupakan dokumen yang disajikan pada web browser. Ada dua cara dalam
menulis sebuah dokumen HTML yang nantinya mejadi sebuah halaman
browser. Yang pertama menggunakan HTML editor atau Web editor, dan yang
kedua menggunakan teks editor biasa seperti menggunakan notepad.
Saat ini sudah banyak sekali paket aplikasi yang dapat digunakan untuk
membuat halaman web secara WYSIWYG ( What You See Is What You Get )
seperti FrontPage, Dreamweaver dan lain sebagainya, akan tetapi, anda tetap
harus menguasai tag-tag HTML terutama yang dipergunakan untuk membuat
aplikasi sederhana di internet kerena mau tidak mau Anda akan bekerja dalam
mode text editor bilamana hendak menyisipkan sebuah script HTML.
a. Dokumen HTML dan Penamaan HTML
Dalam penamaan sebuah dokumen yang akan ditampilkan pada web
browser maka nama yang digunakan harus diakhiri dengan ektensi (.html)
atau (.htm). Ekstensi dokumen HTML awalnya 3 karakter, adalah untuk
mengakomodasi sistem penamaan dalam DOS. Dalam pemberian nama
sebuah dokumen bersifat case sensitive sehingga dokumen dengan nama
a.html akan berbeda dengan dokumen A.html.
b. Penulisan struktur dasar HTML
Setiap penulisan dokumen HTML diawali dan di akhiri dengan tanda tag,
memiliki syarat penulisan yaitu :
 Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )
 Tag HTML secara normal selalu berpasangan atau ada tag pembuka
dan tag penutup, misal ( <i>…</i> )
 Tag HTML tidak case sensitif. <b> sama dengan <B>

Dalam pembuatan dokumen HTML elemen dasar yang harus dimiliki


adalah tag html, tag body dan tag head. Elemen head berisi informasi
tentang dokumen, sedangkan elemen body berisi teks dan atau elemen
lainnya. Atau lebih jelasnya sebagai berikut:

2. Tag – Tag Dasar dalam HTML


Pertama silahkan buat satu file yang diberi nama dengan
hello_world.html yang berisi coding sebagai berikut :
Penjelasan dari contoh script diatas adalah sebagai berikut :

a. DTD: Document Type Declaration


Pada baris pertama file hello_world.html, terdapat tag <!DOCTYPE html>.
Tag khusus ini dikenal dengan sebutan DTD (Document Type Declaration) atau
doctype. DTD berfungsi untuk menginformasikan web browser tentang aturan
penulisan dari suatu dokumen.
Tag diatas merupakan tag yang menandakan dokumen html yang dibuat
bertipe HTML5 sehingga nantinya akan mendapatkan tampilan yang berbeda
dengan versi lainnya.
b. HTML
Setelah penulisan DTD, struktur halaman HTML kemudian diikuti dengan tag
<html>. Dapat anda perhatikan bahwa tag <html> akan ‘membungkus’ seluruh
kode-kode HTML lain. Tag pembuka <html> berada di baris paling atas setelah
<!DOCTYPE html>, dan tag penutup </html> berada di baris paling akhir dari
kode HTML. Seluruh tag HTML lain harus berada didalam tag ini.
Di dalam tag <html>, bisa diletakkan atribut lang. Atribut ini diisi dengan dua
digit kode bahasa yang akan digunakan untuk isi website. Sebagai contoh, jika
kita membuat website dengan bahasa indonesia, bisa menulis tag <html>
sebagai: <html lang="id">. Atau <html lang="en">jika akan membuat
website dengan bahasa inggris.
Tag HTML Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah
dokumen html. Tag ini merupakan suatu keharusan bagi pemrogram web untuk
menuliskannya sebagai tag pertama dalam dokumen html.
c. Head
Merupakan tag berkutnya setelah tag html, digunakan untuk menuliskan
keterangan tentang dokumen web yang akan ditampilkan.
Tag <head> berfungsi sebagai ‘penampung’ berbagai tag yang umumnya tidak
akan terlihat dalam web browser. Tag-tag di dalam bagian <head> berfungsi
untuk memberikan informasi tambahan mengenai halaman yang sedang
diproses, atau menyediakan referensi ke file lain (seperti file CSS atau
JavaScript). Beberapa tag HTML lain yang biasa terdapat pada bagian <head>
adalah: <meta>, <title>, dan <link>.
d. Tag <meta>
Tag <meta> merupakan singkatan dari metadata. Metadata adalah data yang
berisi informasi tentang suatu dokumen. Tag <meta> berisi informasi/instruksi
mengenai halaman HTML yang sedang dijalankan. Salah satu tag <meta> yang
terdapat dalam struktur diatas adalah <meta charset="UTF-8">.
Tag ini akan mengistruksikan web browser untuk menggunakan karakter set UTF-
8 dalam memproses halaman HTML.

e. Title
Merupakan tag di dalam head yang digunakan untuk menuliskan judul dari
dokumen html, yang akan muncul pada caption halaman browser jika halaman
tersebut di akses.

f. Body
Tag <body> berfungsi sebagai penampung (container) dari seluruh kode
HTML yang tampil di dalam web browser. Disinilah terletak 90% tag-tag HTML
yang akan kita tulis nantinya.

g. Tag <h1> dan <p>


Tag <h1> merupakan singkatan dari “header1”, yang digunakan untuk
membuat struktur judul di dalam HTML. HTML menyediakan 6 tipe header, mulai
dari <h1>, <h2>, sampai dengan <h6>. Tag <p> adalah singkatan dari “paragraf”
yang digunakan untuk membuat paragraf. Beberapa jenis tag akan dijelaskan
pada pembahasan selanjutnya.

3. Text Formatting element


a. Heading
Teks dalam dokumen mempunyai judul topic, pada dokumen HTML judul ini
disebut heading. Heading tulisan akan di tampilkan dengan huruf lebih besar atau
ditebalkan. Ada 6 tingkat heading yang dikenali dalam HTML, yaitu dimulai dari
<h1> sampai dengan <h6> contoh (heading.html):
Hasil dari script diatas dapat dilihat pada gambar dibawah ini:

b. Paragrapah
Tag paragraf <p> berfungsi layaknya untuk pengaturan antar paragraf dalam
halaman web anda. Dalam element paragraf terdapat atribut :
Align = [left | center | right]
Yang berfungsi sebagai pengatur perataan paragraf, jadi anda cukup memilih
dari salah satu dari tiga pilihan tanpa harus member kurung buka dan kurung
tutup, dan defaultnya adalah left. Perataan paragraph juga dapat diatur
menggunakan CSS seperti contoh (paragraph.html).

c. Format text
Dalam melakukan format tampilan text,.beberapa tag html yang dapat
digunakan antara lain : Bold, italic, underline, striketrough, sub, sup, pre, site,
quote, block quote dan banyak yang lain. Contoh penggunaan dari tag diatas
dapat dilihat pada script dibawah ini menggunakan tag strong, i, b, em, s, ins, u,
del. Contoh (format_text.html) :
Hasil dari script diatas adalah sebagai berikut :

Contoh script untuk format text menggunakan script sub, sup, pre contoh
(format_text_2.html):
Hasil dari script diatas adalah sebagai berikut :

Contoh script untuk format text menggunakan script sub, sup, pre. Contoh
(format_text_3.html):
Hasil dari script diatas adalah sebagai berikut :

d. List element
Dalam HTML, terdapat 3 jenis list, yakni ordered list, unordered list, dan
description list.
1) Ordered list
Ordered list adalah list yang berurutan. List ini menggunakan angka atau
huruf sebagai penentu urutan. Contoh (ordered_list.html).

Hasil dari script diatas adalah sebagai berikut :

Ordered list dapat menggunakan penanda lain seperti I, i, A, a, atau 1 yang


merupakan penanda default. Untuk mengganti penanda, dapat menggunakan
attribut type. Contoh type=”A”. Attribut lain yang dapat digunakan adalah start
yang berfungsi menentukan list dimulai dari angka berapa. Contoh : start=’4’
2) Unordered List
Unordered tidak jauh berbeda dengan ordered list, perbedaan dari keduanya
hanya pada tipe penanda yang digunakan. Contoh (unordered_list.html).

Hasil dari script diatas adalah sebagai berikut :


3) Description List
description list. Jenis list ini digunakan untuk struktur list seperti ‘kamus’, yakni
list yang memiliki judul beserta keterangannya. Jenis list ini tidak terlalu sering
digunakan. Contoh (description_list.html)

Hasil dari script diatas adalah sebagai berikut :


e. Tag Image
Untuk dapat menginput gambar ke dalam halaman web, HTML menyediakan
img element untuk bisa menampilkan gambar ke dalam web browser. Contoh
(image.html)

Hasil dari script diatas adalah sebagai berikut :


LATIHAN
1. buatlah semua contoh diatas, kemudian dikumpulkan kepada asisten berupa
file html atau dapat dinilai langsung oleh asisten.
2. Sebutkan minimal 20 tag HTML?
3. Buatlah sebuah dokumen berisi biodata anda dengan memanfaaatkan tag table
HTML
MODULE 2
Tabel

Tabel

Tabel diperlukan untuk menampilkan data yang tersusun secara sistematis


seperti hasil laporan, daftar nilai, dan daftar peserta. Untuk membuat tabel,
setidaknya diperlukan 3 jenis element, yakni <table>, <tr>, dan <td>. Ketiga
tag ini hanyalah syarat minimal. HTML masih menyediakan beragam tag yang
bisa digunakan untuk membuat tabel. Berikut contoh pembuatan tabel dengan 2
kolom dan 3 baris. Contoh (Table.html)
30

Hasil dari script diatas adalah sebagai berikut :

LATIHAN
1. Buatlah sebuah dokumen berisi biodata anda dengan memanfaaatkan tag table
HTML
MODULE 3
Form

Seluruh objek form (text box, radio button, checkbox, dll) harus berada diantara tag
pembuka <form> dan tag penutup </form>. Tag ini berguna sebagai container atau
penampung dari form. Berapapun jumlah objek form yang berada diantara tag ini,
masih dianggap sebagai satu form.

Atribute utama yang wajib ada pada sebuah form yaitu method dan action.
a.Method Atribut method berfungsi untuk memberitahu web browser bagaimana cara pengiriman
data form. Atribut ini dapat diisi dengan nilai get atau post. Perbedaan antara get dan post
lebih bersifat teknis. Sebagai gambaran, jika kita menulis atribut method="get",
maka isian data form akan ditambahkan ke dalam alamat URL (terlihat pada address
bar web browser). Sedangkan jika menggunakan method="post", isi data form ini tidak
akan terlihat.
b.Action Atribut action digunakan untuk menulis alamat file yang menjadi tujuan pengiriman data.
Biasanya nilai dari atribut action berupa alamat sebuah halaman PHP (atau bahasa
pemrograman server lain) yang digunakan untuk memproses isi form.

3.1 Menu Form


Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau
masukan dari pengguna yang kemudian akan diproses atau diolah untuk dapat
digunakan sesuai dengan kebutuhan. Contohnya proses pengiriman data,
browse, hapus, penyuntingan data dan lain sebagainya. Cara penulisan form
dalam html adalah.
Pada penulisan form "nama form" adalah nama form yang sedang digunakan,
method adalah metode atau cara yang digunakan untuk menyimpan data ke server
sedangkan action adalah alamat atau bisa juga file lain yang digunakan untuk
memproses input dari form kedalam server.

3.2 Jenis-jenis media input dalam Form


Pada bagian form tersedia kontrol-kontrol input yang digunakan untuk masing-
masing keperluan dalam memasukan data input. Dan kontrol form terdiri dari :

3.2.1 Kontrol Berupa Text


Pengisian informasi dalam bentuk teks pada form HTML dapat dilakukan dengan
menggunakan dua buah elemen:textarea dan input. textarea digunakan untuk
masukan teks yang terdiri dafi beberapa baris, sementara inputdigunakan untuk
masukan teks yang hanya satu baris.

Penggunaan elemen textarea dapat dilakukan dengan sangat sederhana, hanya


langsung memasukkan tag-nya saja:

<textarea>
</textarea>

selain memberikan tag kosong seperti di atas, kita juga dapat mengisikan tag
untuk mendapatkan nilai masukan standar:

<textarea>
Contoh isi textarea
</textarea>

Gambar 3.1 Contoh Penggunaan Elemen TextArea


Pengaturan panjang dan lebar dari textarea dapat dilakukan melalui CSS, dengan
menggunakan properti height danwidth.

Walaupun dapat mengisikan teks dengan banyak sekaligus, textarea tentunya


tidak dapat digunakan untuk seluruh kasus pengisian data. Seringkali kita
menginginkan pengguna hanya mengisikan data singkat, tanpa isi teks yang
banyak. Untuk jenis masukan seperti itu, kita dapat menggunakan elemen input:

<input type="text">

yang akan menghasilkan elemen masukan seperti berikut:

Gambar 3.2 Contoh Penggunaan Elemen Input


Perhatikan juga bahwa kita menggunakan atribut type pada elemen ini untuk
menentukan data-data yang akan diisikan. Terdapat banyak jenis tipe data yang
dapat kita isikan, dan browser akan menyesuaikan jenis masukan teks yang ada,
sesuai dengan atribut type yang kita tentukan. Nilai-nilai yang dapat diisikan pada
atribut type yaitu:
1. color 9. time
2. datetime-local 10. datetime
3. number 11. month
4. tel 12. search
5. week 13. url
6. date 14. password
7. email 15. text
8. range 16. file

3.2.2 Kontrol Berupa Radio Button


Radio button di gunakan untuk menyatakan pilihan yang bersifat tunggal, umumnya
pada web di gunakan untuk kelengkapan pertanyaan seperti pada pendaftaran
online, biasanya pertanyaan itu adalah pilihan untuk menyetakan jenis kelamin ,
agama, ataupun sebagainya. Radio Button ini akan sering kita temui saat kita
berselancar di dunia maya yang terkait dengan proses input data seperti
pendaftaran dll.

Radio button dibuat dalam HTML dengan menggunakan elemen input, dengan
atribut type bernilai : code`radio`:

<input type="radio" name="sex" value="pria"> Pria <br>


<input type="radio" name="sex" value="wanita"> Wanita
dalam pembuatan elemen radio button, kita juga wajib menambahkan dua atribut
lainnya, yaitu name dan value. Atribut name digunakan untuk memberitahukan
browser bahwa radio button dengan atribut name yang sama adalah merupakan
kumpulan radio button yang sama, sehingga pengguna tidak boleh memilih dua
buah pilihan pada radio button tersebut.

Atribut value digunakan untuk menyimpan nilai yang ingin kita kirimkan ke server.

Gambar 3.3 Contoh Penggunaan Elemen Radio Button


3.2.3 Kontrol Berupa Checkbox
Berbeda dengan radio button yang hanya memungkinkan user memilih satu pilihan,
pada input type checked box Anda dapat memilih satu atau beberapa pilihan, atau
tidak memilih sama sekali. Pilihan ini biasanya dipakai untuk memasukkan data
yang sifatnya opsional. Anda dapat menggunakan “Checkbox” pada atribut. Input
checkbox adalah sebuah masukan untuk memilih sesuatu opsi/ pilihan. Jika dipilih
maka pengguna akan men-check (mencentang) dan jika tidak memilih akan
dibiarkan saja.
Elemen ini sama seperti radio button, dibuat dengan elemen input yang nilai
atribut type-nya berisikancheckbox.

<input type="checkbox" name="day" value="senin"> Senin <br>


<input type="checkbox" name="day" value="selasa"> Selasa <br>
<input type="checkbox" name="day" value="rabu"> Rabu

Seperti yang dapat dilihat, atribut name dan value juga wajib dimiliki oleh checkbox,
dengan alasan yang sama untuk radio button.

Gambar 3.4 Contoh Penggunaan Elemen Checkbox


Meskipun dapat memberikan pilihan nilai kepada pengguna, radio button maupun
checkbox sangat tidak ideal untuk digunakan pada pilihan yang memiliki nilai yang
sangat banyak. Misalnya, pilihan negara yang ditinggali oleh pengguna dari ratusan
negara yang ada di dunia akan jika ditampilkan pada radio button akan
menyebabkan daftar yang dipaparkan sangat banyak dan sulit dibaca oleh
pengguna. Dalam kasus seperti ini lebih baik kita menggunakan dropdown list.

3.2.4 Dropdown list


Pembuatan elemen dropdown dilakukan dengan menggabungkan dua elemen,
yaitu select dan option. Elemenselect membungkus seluruh elemen option yang ada,
untuk membentuk sebuah dropdown. Elemen option sendiri merupakan nilai dari
dropdown yang diinginkan. Perhatikan kode di bawah:

<select name="country">
<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="filipina">Filipina</option>
<option value="vietnam">Vietnam</option>
</select>

yang akan menghasilkan:

Gambar 3.5 Contoh Penggunaan Elemen Dropdown


dan jika ingin memungkinkan pengguna memilih beberapa pilihan kita dapat
menambahkan atribut multiple pada elemen select:

<select name="country" multiple>


<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="filipina">Filipina</option>
<option value="vietnam">Vietnam</option>
</select>
Gambar 3.6 Contoh Penggunaan Elemen Dropdown dengan Pilihan Banyak

3.2.5 Button
Pada saat kita melakukan browsing di dunia maya, dan mengakses sebuah website.
Sering kita menemui tombol-tombol fungsi seperti reset, submit, send dan lain
sebagainya. Dan sering pula kita sering menemui gambar yang dibuat fungsi seperti
tombol.
3.2.5.1 Submit
Tombol ini berfungsi untuk memanggil url yang sudah didefisikan di atribut action.
Pembuatan tombol submit juga dilakukan dengan menggunakan elemen input, yang
atribut type-nya diisikan dengan nilai submit, seperti berikut:

<input type="submit" name="submit" value="Masukkan Form">

Perhatikan bahwa berbeda dengan elemen-elemen input sebelumya, nilai dari


atribut value diproses menjadi teks dari tombol yang ditampilkan ke pengguna. Hal
ini menyebabkan kita tidak lagi perlu menambahkan teks setelah elemen form,
seperti pada radio button ataupun checkbox.

Gambar 3.7 Contoh Penggunaan Tombol Submit

3.2.5.2 Reset
Tombol ini berfungsi untuk mengembalikan form ke kondisi awal (mengosongkan
nilai semua elemen yang ada pada form). Pembuatan tombol dilakukan sama persis
seperti pada tombol submit, dengan perbedaan nilai pada atribut type, yang diisikan
dengan reset pada tombol penghapusan ini.

<input type="reset" name="reset" value="Kosongkan Form">


3.2.6 Organisasi Elemen Form
Mengetahui bagaimana membuat elemen-elemen masukan / input pada form masih
merupakan langkah awal dalam pembuatan form HTML. Elemen-elemen masukan
form jika ditampilkan tanpa informasi tambahan tidaklah berguna, karena pengguna
tidak dapat mengetahui data apa yang harus diisikan ke dalam elemen-elemen
tersebut.
Untuk memberikan informasi tambahan kepada pengguna, HTML juga menyediakan
elemen-elemen yang dapat digunakan sebagai penanda dari elemen masukan form.
Adapun elemen-elemen yagn dapat digunakan untuk tujuan tersebut
yaitu label, fieldset, dan legend.

3.2.6.1 Label
Elemen label memberikan fasilitas untuk menambahkan teks pada elemen masukan
form. Elemen ini diisikan dengan deskripsi dari elemen masukan yang ingin
ditambahkan, dan harus memiliki atribut for. Atribut for pada elemenlabel berisikan
nilai yang sama dengan atribut id pada elemen masukan form. Pengisian nilai yang
sama akan mengikatkan elemen label dengan elemen masukan, sehingga pengguna
dapat langsung mengisikan nilai dengan melakukan klik pada teks yang dihasilkan
oleh elemen label.
Perhatikan kode berikut di mana isi dari atribut for pada label adalah sama dengan
isi atribut id pada elemen input.

<label for="username">Username</label>
<input type="text" name="username" id="username">
3.2.7 Validasi Masukan pada Form
Seringkali dalam pengembangan form pada aplikasi, terdapat elemen-elemen yang
tidak wajib diisikan oleh pengguna dan elemen-elemen yang wajib diisikan oleh
pengguna. Aplikasi kemudian akan melakukan pengecekan terhadap nilai masukan
dari pengguna, apakah nilai yang wajib ada sudah diisikan atau belum. Jika nilai
belum diisikan maka aplikasi akan menolak form pengguna, dengan pesan kesalahan
yang menjelaskan bahwa terdapat isian yang wajib diisi oleh pengguna. Proses
pengecekan kewajiban isi atau berbagai batasan lain ini dikenal dengan nama
validasi.
Validasi pada elemen-elemen form HTML dilakukan dengan beberapa cara, yaitu:
1. Atribut requied pada elemen-elemen masukan yang wajib diisikan. Jika
pengguna tidak mengisikan elemen maka browser secara otomatis akan
memberikan peringatan kepada pengguna dan membatalkan pengiriman
form. Contoh penggunaan atribut ini yaitu:

<input type="text" name="username" requied>

2. Pengunaan atribut type yang benar, untuk memastikan browser dapat


melakukan pengecekan nilai yang diisikan pengguna dengan format sesuai
dengan yang dispesifikasikan pada standar HTML. Misalnya, jika
menggunakantype="email", maka pengguna tidak dapat
mengisikan bukanemail sebagai masukan form.

Gambar 3.10 Contoh Pesan Kesalahan Pengisian Email pada HTML


MODULE 4
STYLESHEET

4.1 RINGKASAN

Setelah semua yang Anda ketahui tentang dasar pembuatan halaman web, kini
tiba saatnya untuk membuat halaman web Anda tampil lebih meyakinkan. Untuk
keperluan tersebut, Anda dapat menggunakan style sheet/CSS. CSS tidak hanya dapat
membuat tampilan nampak lebih baik, tetapi dapat membuat pengembangan halaman
web menjadi jauh lebih efisien karena menghilangkan semua kesulitan yang muncul
pada halaman web biasa tanpa style.

a Style

Start Tag NN IE W3C Kegunaan

<style> 4.0 3.0 3.2 Mendefinisikan style dalam sebuah dokumen

<link> 4.0 3.0 3.2 Mendefinisikan relasi antara dua dokumen yang berhubungan

4.2 LATIHAN

Bagian ini mencakup penggunaan CSS untuk mengubah tampilan standar pada
halaman web Anda. Tidak semua tag style digunakan disini karena jumlahnya sangat
banyak, silakan Anda cari referensi lain sebagai tambahan untuk mempelajari CSS.
Seperti biasa, simpan file-file Anda dalam folder Anda sendiri, kemudian cobalah
langsung untuk melihat hasil setiap contoh, lalu ubahlah isinya untuk melihat variasi
tampilannya yang memungkinkan. Perhatikan bahwa semua contoh disini
menggunakan CSS internal, silakan Anda berlatih untuk mengubahnya menjadi CSS
eksternal. Gunakan sembarang gambar yang dapat Anda temui untuk contoh yang
memerlukan gambar (sesuaikan dulu dengan nama file dalam contoh).
32

1) Pengaturan latar belakang

1. <html>
2. <head>
3. <style type="text/css">
4. body{
5. background: #00ff00 url("gambar.gif") no-repeat fixed center;
6. }
7. </style>
8. </head>
9. <body>
10. <p>
11. <b>Catatan:</b>
12. Properti background-attachment dan background-
position tidak bisa digunakan dalam browser Netscape 4.0.
13. </p>
14. <p>Ada teks disini</p>
15. <p>Tuliskan sekehendak kalian</p>
16. <p>Terserah apa saja</p>
17. <p>Yang penting ada tulisannya</p>
18. </body>
19. </html>

2) Penanganan font

1. <html>
2. <head>
3. <style type="text/css">
4. p.normal {font-weight: normal; }
5. p.tebal {font-weight: bold; }
6. p.teballl {font-weight: 900; }
7. p.lengkap{
8. font: italic small-caps 900 12px arial;
9. }
10. </style>
11. </head>
12. <body>
13. <p class="normal">
14. Perhatikan paragraf ini</p>
15. <p class="tebal">
16. Bandingkan dengan paragraf diatasnya</p>
17. <p class="teballl">
18. Bandingkan yang ini juga</p>
19. <p class="lengkap">
20. Paragraf dengan semua atribut font dimasukkan</p>
21. </body>
22. </html>

3) Pembuatan border

1. <html>
2. <head>
3. <style type="text/css">
4. p.borderous {
5. border-style: double;
6. border-width: 5px 10px 1px medium;
7. border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
8. }
9. </style>
10. </head>
11. <body>
12. <p class="borderous">
13. <b>Catatan:</b> tidak didukung oleh internet explorer versi lama</p>
14. </body>
15. </html>

4) Pengaturan margin

1. <html>
2. <head>
3. <style type="text/css">
4. p.margin {margin: 2cm 4cm 3cm 80px}
5. </style>
6. </head>
7. <body>
8. <p>
9. Yang ini adalah paragraf biasa tanpa pengaturan margin, sepertinya biasa saja.

10. </p>
11. <p class="margin">
12. Bandingkan dengan tampilan paragraf ini. Coba Anda kecilkan ukuran window brows
er agar terlihat lebih jelas perbedaannya.
13. </p>
14. <p>
15. This is a paragraph
16. </p>
17. </body>
18. </html>

5) Mengatur padding pada sel tabel

1. <html>
2. <head>
3. <style type="text/css">
4. td {padding: 1.5cm}
5. td.value2 {padding: 0.5cm 2.5cm}
6. </style>
7. </head>
8. <body>
9. <table border="1">
10. <tr>
11. <td>
12. Ini adalah tabel dengan sel yang menggunakan padding sama pada setiap s
isinya (1,5cm).
13. </td>
14. </tr>
15. </table>
16. <br>
17. <table border="1">
18. <tr>
19. <td class="value2">
20. Bandingkan dengan tampilan tabel ini. Padding atas dan bawah memiliki n
ilai 0,5cm, sedangkan padding kanan dan kiri nilainya 2,5cm.
21. </td>
22. </tr>
23. </table>
24. </body>
25. </html>

6) Menggunakan list

1. <html>
2. <head>
3. <style type="text/css">
4. ul {
5. list-style: square outside url("gambarkecil.gif");
6. }
7. </style>
8. </head>
9. <body>
10. <p>Disini Anda menggunakan gambar berukuran kecil sebagai bullet untuk list. Pr
operti outside akan menyebabkan list menjadi lebih rapi bila terdiri atas item yang
berupa kalimat panjang dan window browser berukuran kecil.</p>
11. <ul>
12. <li>Kopi</li>
13. <li>Teh</li>
14. <li>Coca Cola</li>
15. </ul>
16. </body>
17. </html>

7) Elemen latar depan dan latar belakang

1. <html>
2. <head>
3. <style type="text/css">
4. img.x1{
5. position:absolute;
6. left:0;
7. top:0;
8. z-index:1;
9. }
10. img.x2{
11. position:absolute;
12. left:0;
13. top:100;
14. z-index:-1;
15. }
16. </style>
17. </head>
18. <body>
19. <p><b>Catatan:</b> Netscape 4 tidak mendukung properti "z-index".</p>
20. <h1>Sepertinya Heading ini terhalang oleh gambar</h1>
21. <img class="x1" src="gambar.bmp" width="100" height="80">
22. <p>Nilai default z-index adalah 0. Z-
index 1 memiliki prioritas lebih tinggi, sedangkan Z-index –
1 memiliki prioritas lebih rendah.</p>
23. <p></p>
24. <img class="x2" src="gambar.bmp" width="100" height="80">
25. <p>Sekarang Anda bisa membandingkan dengan tampilan di bagian bawah ini. Apakah
masih terhalang gambar?</p>
26. </body>
27. </html>

8) Mengubah tampilan Link

1. <html>
2. <head>
3. <style type="text/css">
4. a:link {color: #ff0000}
5. a.one:visited {color: #0000ff}
6. a.one:hover {color: #ffcc00}
7. a.two:visited {color: #0000ff}
8. a.two:hover {font-size: 150%}
9. a.three:visited {color: #0000ff}
10. a.three:hover {background: #66ff66}
11. a.four:visited {color: #0000ff}
12. a.four:hover {font-family: fixedsys}
13. a.five:visited {color: #0000ff; text-decoration: line-through}
14. a.five:hover {text-decoration: overline}
15. </style>
16. </head>
17. <body>
18. <p>Gerakkan pointer mouse di atas link-
link di bawah ini untuk membuat link tersebut berubah tampilannya.</p>
19. <p><a class="one" href="hlm1.htm">Mengubah properti color</a></p>
20. <p><a class="two" href="hlm2.htm"> Mengubah properti font-size</a></p>
21. <p><a class="three" href="hlm3.htm"> Mengubah properti background-
color</a></p>
22. <p><a class="four" href="hlm4.htm"> Mengubah properti font-family</a></p>
23. <p><a class="five" href="hlm5.htm"> Mengubah properti text-decoration</a></p>
24. </body>
25. </html>
MODULE 5
DASAR PHP

5.1 RINGKASAN

Pada modul-modul sebelumnya telah mempelajari client-side programming.


Pada modul ini dan seterusnya akan fokus untuk menggunakan server-side
programming yakni PHP. Akan tetapi untuk memformat keluaran tentu menggunakan
HTML dan CSS.

5.2 LATIHAN

Bagian ini mencakup penggunaan dasar tentang PHP seperti menampilkan text,
menampilkan HTML pada PHP, PHP dan HTML, komentar pada PHP, variabel, operasi
aritmatika, string dan manipulasi string. Simpanlah semua file-file dalam folder
tersendiri, cobalah dan pahami serta eksplorasi latihan-latihan yang diberikan pada
modul ini.

1) Ouput dengan PHP

<?php
echo "Hello World";
?>

2) PHP dengan HTML

1. <!DOCTYPE html>
2. <html>
3. <body>
4.
5. <?php
6. echo "Hello world";
7. ?>
8.
9. </body>
10. </html>
3) Komentar pada PHP

1. <!DOCTYPE html>
2. <html>
3. <body>
4.
5. <?php
6. // This is a single-line comment
7.
8. # This is also a single-line comment
9.
10. /*
11. This is a multiple-lines comment block
12. that spans over multiple
13. lines
14. */
15.
16. // You can also use comments to leave out parts of a code line
17. $x = 5 /* + 15 */ + 5;
18. echo $x;
19. ?>
20.
21. </body>
22. </html>

4) PHP Case Sensitive

1. <!DOCTYPE html>
2. <html>
3. <body>
4.
5. <?php
6. $color = "red";
7. echo "My car is " . $color . "<br>";
8. echo "My house is " . $COLOR . "<br>";
9. echo "My boat is " . $coLOR . "<br>";
10. ?>
11.
12. </body>
13. </html>

5) Deklarasi Variabel

1. <?php
2. $txt = "Hello world!";
3. $x = 5;
4. $y = 10.5;
5. ?>
6) Output Variabel 1

1. <?php
2. $txt = "W3Schools.com";
3. echo "I love $txt!";
4. ?>

7) Output Variabel 2

1. <?php
2. $txt = "W3Schools.com";
3. echo "I love " . $txt . "!";
4. ?>

8) Ouput Variabel 3 dengan operasi aritmatika

1. <?php
2. $x = 5;
3. $y = 4;
4. echo $x + $y;
5. ?>

9) Mengetahui panjang string

1. <?php
2. echo strlen("Hello world!"); // outputs 12
3. ?>

10) Menghitung jumlah kata pada kalimat

1. <?php
2. echo str_word_count("Hello world!"); // outputs 2
3. ?>

11) Membalikan String

1. <?php
2. echo strrev("Hello world!"); // outputs !dlrow olleH
3. ?>
12) Pencarian dalam string (Posisi)

1. <?php
2. echo strpos("Hello world!", "world"); // outputs 6
3. ?>

13) Mengganti Text

1. <?php
2. echo str_replace("world", "Dolly", "Hello world!"); // outputs Hello Dolly!
3. ?>

14) Fungsi (dasar)

1. <?php
2. function writeMsg() {
3. echo "Hello world!";
4. }
5.
6. writeMsg(); // call the function
7. ?>

15) Fungsi dengan argumen

1. <?php
2. function familyName($fname) {
3. echo "$fname Refsnes.<br>";
4. }
5.
6. familyName("Jani");
7. familyName("Hege");
8. familyName("Stale");
9. familyName("Kai Jim");
10. familyName("Borge");
11. ?>

16) Fungsi dengan lebih dari satu argumen

1. <?php
2. function familyName($fname, $year) {
3. echo "$fname Refsnes. Born in $year <br>";
4. }
5.
6. familyName("Hege", "1975");
7. familyName("Stale", "1978");
8. familyName("Kai Jim", "1983");
9. ?>

17) Fungsi dengan nilai default pada argumen

1. <?php
2. function setHeight($minheight = 50) {
3. echo "The height is : $minheight <br>";
4. }
5.
6. setHeight(350);
7. setHeight(); // will use the default value of 50
8. setHeight(135);
9. setHeight(80);
10. ?>

18) Fungsi yang mengembalikan nilai

1. <?php
2. function sum($x, $y) {
3. $z = $x + $y;
4. return $z;
5. }
6.
7. echo "5 + 10 = " . sum(5, 10) . "<br>";
8. echo "7 + 13 = " . sum(7, 13) . "<br>";
9. echo "2 + 4 = " . sum(2, 4);
10. ?>
MODULE 6
KONTROL KONDISI

6.1 RINGKASAN

Pada praktikum kali ini, anda akan mempelajari kondisi dan perulangan pada PHP.
Tetapi, sebelumnya anda harus tahu operator-operator yang ada pada PHP seperti
operator aritmatika, assigment, perbandingan, logika dan sebagainya.

a Operator Aritmatika

Operator Name Example Result

+ Addition $x + $y Sum of $x and $y

- Subtraction $x - $y Difference of $x and $y

* Multiplication $x * $y Product of $x and $y

/ Division $x / $y Quotient of $x and $y

% Modulus $x % $y Remainder of $x divided by $y

** Exponentiation $x ** $y Result of raising $x to the $y'th


power (Introduced in PHP 5.6)

b PHP Assignment Operators

Assignment Same as... Description

x=y x=y The left operand gets set to the value of the
expression on the right

x += y x=x+y Addition

x -= y x=x-y Subtraction

x *= y x=x*y Multiplication

x /= y x=x/y Division

x %= y x=x%y Modulus
c Operator Perbandingan

Operator Name Example Result

== Equal $x == $y Returns true if $x is equal to $y

=== Identical $x === $y Returns true if $x is equal to $y, and they


are of the same type

!= Not equal $x != $y Returns true if $x is not equal to $y

<> Not equal $x <> $y Returns true if $x is not equal to $y

!== Not identical $x !== $y Returns true if $x is not equal to $y, or


they are not of the same type

> Greater than $x > $y Returns true if $x is greater than $y

< Less than $x < $y Returns true if $x is less than $y

>= Greater than or $x >= $y Returns true if $x is greater than or equal


equal to to $y

<= Less than or $x <= $y Returns true if $x is less than or equal to


equal to $y

d Operator Increment / Decrement

Operator Name Description

++$x Pre-increment Increments $x by one, then returns $x

$x++ Post-increment Returns $x, then increments $x by one

--$x Pre-decrement Decrements $x by one, then returns $x


$x-- Post-decrement Returns $x, then decrements $x by one

e Operator Logika

Operator Name Example Result

and And $x and $y True if both $x and $y are true

or Or $x or $y True if either $x or $y is true

xor Xor $x xor $y True if either $x or $y is true, but


not both

&& And $x && $y True if both $x and $y are true

|| Or $x || $y True if either $x or $y is true

! Not !$x True if $x is not true

f Operator String

Operator Name Example Result

. Concatenation $txt1 . $txt2 Concatenation of $txt1


and $txt2

.= Concatenation $txt1 .= $txt2 Appends $txt2 to $txt1


assignment

6.2 LATIHAN

Bagian ini mencakup kondisi dan perulangan, dimana mereka memiliki beberapa
style penulisan kode. Simpanlah semua file-file dalam folder tersendiri, cobalah dan
pahami serta eksplorasi latihan-latihan yang diberikan pada modul ini. Setiap style
perulangan dan kondisi diterapkan pada kasus yang berbeda.
a Percabangan

1) If Stement

1. <?php
2. $t = date("H");
3.
4. if ($t < "20") {
5. echo "Have a good day!";
6. }
7. ?>

2) if…else statement

1. <?php
2. $t = date("H");
3.
4. if ($t < "20") {
5. echo "Have a good day!";
6. } else {
7. echo "Have a good night!";
8. }
9. ?>

3) if…elseif…else statement

1. <?php
2. $t = date("H");
3.
4. if ($t < "10") {
5. echo "Have a good morning!";
6. } elseif ($t < "20") {
7. echo "Have a good day!";
8. } else {
9. echo "Have a good night!";
10. }
11. ?>

4) Switch statement

1. <?php
2. $favcolor = "red";
3.
4. switch ($favcolor) {
5. case "red":
6. echo "Your favorite color is red!";
7. break;
8. case "blue":
9. echo "Your favorite color is blue!";
10. break;
11. case "green":
12. echo "Your favorite color is green!";
13. break;
14. default:
15. echo "Your favorite color is neither red, blue, nor green!";
16. }
17. ?>

b Perulangan

1) While

1. <?php
2. $x = 1;
3.
4. while($x <= 5) {
5. echo "The number is: $x <br>";
6. $x++;
7. }
8. ?>

2) do…while

1. <?php
2. $x = 1;
3.
4. do {
5. echo "The number is: $x <br>";
6. $x++;
7. } while ($x <= 5);
8. ?>

3) for

1. <?php
2. for ($x = 0; $x <= 10; $x++) {
3. echo "The number is: $x <br>";
4. }
5. ?>

4) foreach

1. <?php
2. $colors = array("red", "green", "blue", "yellow");
3.
4. foreach ($colors as $value) {
5. echo "$value <br>";
6. }
7. ?>
MODULE 7
ARRAY

7.1 RINGKASAN

Array merupakan variabel spesial yang dapat menampung lebih dari satu nilai
pada saat yang bersamaan. Pada array terdapat beberapa istilah umum yakni: (1)
variabel array, (2) key/index array dan (3) nilai array. Untuk membuat array dengan
mendeklarasikan variabel dan mengeset nilainya dengan array() seperti $mobil =
array(), dimana array() menandakan array kosong.

7.2 LATIHAN

Pada latihan ini mencakup pendeklarasian array, pengakesan array, panjang


array, array associative dan mutidemensional array.

1) Mendeklarasikan dan mengakses array

1. <?php
2. $cars = array("Volvo", "BMW", "Toyota");
3. echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
4. ?>

2) Mengetahui panjanga array

1. <?php
2. $cars = array("Volvo", "BMW", "Toyota");
3. echo count($cars);
4. ?>

3) Mengakses array melalui perulangan (loop)

1. <?php
2. $cars = array("Volvo", "BMW", "Toyota");
3. $arrlength = count($cars);
4.
5. for($x = 0; $x < $arrlength; $x++) {
6. echo $cars[$x];
7. echo "<br>";
8. }
9. ?>

4) Mendeklarasikan Associative array dan mengaksesnya

1. <?php
2. $age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");
3. echo "Peter is " . $age['Peter'] . " years old.";
4. ?>

5) Mengakses semua nilai associative array dengan perulangan

1. <?php
2. $age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");
3.
4. foreach($age as $x => $x_value) {
5. echo "Key=" . $x . ", Value=" . $x_value;
6. echo "<br>";
7. }
8. ?>

6) Array Multidimensi

1. <?php
2. $cars = array
3. (
4. array("Volvo",22,18),
5. array("BMW",15,13),
6. array("Saab",5,2),
7. array("Land Rover",17,15)
8. );
9. for ($row = 0; $row < 4; $row++) {
10. echo "<p><b>Row number $row</b></p>";
11. echo "<ul>";
12. for ($col = 0; $col < 3; $col++) {
13. echo "<li>".$cars[$row][$col]."</li>";
14. }
15. echo "</ul>";
16. }
17. ?>
MODULE 8
DATABASE

8.1 RINGKASAN

Database digunakan untuk menyimpan data pada aplikasi. Database terdiri dari
satu atau banyak table dan setiap table terdiri dari baris dan kolom. Untuk
memanipulasi database, PHP memiliki perintah-perintah yang digunakan untuk meng-
eksekusi SQL.

8.2 LATIHAN

Latihan pada pada praktikum ini secaumum mencakup koneksi database,


menjalankan perintah SQL dan mengambil keluaran dari perintah tersebut.

1) Koneksi database

1. <?php
2. $servername = "localhost";
3. $username = "root";
4. $password = "";
5.
6. // Create connection
7. $conn = mysqli_connect($servername, $username, $password);
8.
9. // Check connection
10. if (!$conn) {
11. die("Connection failed: " . mysqli_connect_error());
12. }
13. echo "Connected successfully";
14. ?>

2) Membuat database di PHP

1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5.
6. // Create connection
7. $conn = mysqli_connect($servername, $username, $password);
8. // Check connection
9. if (!$conn) {
10. die("Connection failed: " . mysqli_connect_error());
11. }
12.
13. // Create database
14. $sql = "CREATE DATABASE myDB";
15. if (mysqli_query($conn, $sql)) {
16. echo "Database created successfully";
17. } else {
18. echo "Error creating database: " . mysqli_error($conn);
19. }
20.
21. mysqli_close($conn);
22. ?>

3) Membuat Table di PHP

1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5. $dbname = "myDB";
6.
7. // Create connection
8. $conn = mysqli_connect($servername, $username, $password, $dbname);
9. // Check connection
10. if (!$conn) {
11. die("Connection failed: " . mysqli_connect_error());
12. }
13.
14. // sql to create table
15. $sql = "CREATE TABLE MyGuests (
16. id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
17. firstname VARCHAR(30) NOT NULL,
18. lastname VARCHAR(30) NOT NULL,
19. email VARCHAR(50),
20. reg_date TIMESTAMP
21. )";
22.
23. if (mysqli_query($conn, $sql)) {
24. echo "Table MyGuests created successfully";
25. } else {
26. echo "Error creating table: " . mysqli_error($conn);
27. }
28.
29. mysqli_close($conn);
30. ?>

4) Insert data pada table

1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5. $dbname = "myDB";
6.
7. // Create connection
8. $conn = mysqli_connect($servername, $username, $password, $dbname);
9. // Check connection
10. if (!$conn) {
11. die("Connection failed: " . mysqli_connect_error());
12. }
13.
14. $sql = "INSERT INTO MyGuests (firstname, lastname, email)
15. VALUES ('John', 'Doe', '[email protected]')";
16.
17. if (mysqli_query($conn, $sql)) {
18. echo "New record created successfully";
19. } else {
20. echo "Error: " . $sql . "<br>" . mysqli_error($conn);
21. }
22.
23. mysqli_close($conn);
24. ?>

5) Mendapatkan ID dari data yang dimasukan

1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5. $dbname = "myDB";
6.
7. // Create connection
8. $conn = mysqli_connect($servername, $username, $password, $dbname);
9. // Check connection
10. if (!$conn) {
11. die("Connection failed: " . mysqli_connect_error());
12. }
13.
14. $sql = "INSERT INTO MyGuests (firstname, lastname, email)
15. VALUES ('John', 'Doe', '[email protected]')";
16.
17. if (mysqli_query($conn, $sql)) {
18. $last_id = mysqli_insert_id($conn);
19. echo "New record created successfully. Last inserted ID is: " . $last_id;
20. } else {
21. echo "Error: " . $sql . "<br>" . mysqli_error($conn);
22. }
23.
24. mysqli_close($conn);
25. ?>

6) Eksekusi multiple Kueri

1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5. $dbname = "myDB";
6.
7. // Create connection
8. $conn = mysqli_connect($servername, $username, $password, $dbname);
9. // Check connection
10. if (!$conn) {
11. die("Connection failed: " . mysqli_connect_error());
12. }
13.
14. $sql = "INSERT INTO MyGuests (firstname, lastname, email)
15. VALUES ('John', 'Doe', '[email protected]');";
16. $sql .= "INSERT INTO MyGuests (firstname, lastname, email)
17. VALUES ('Mary', 'Moe', '[email protected]');";
18. $sql .= "INSERT INTO MyGuests (firstname, lastname, email)
19. VALUES ('Julie', 'Dooley', '[email protected]')";
20.
21. if (mysqli_multi_query($conn, $sql)) {
22. echo "New records created successfully";
23. } else {
24. echo "Error: " . $sql . "<br>" . mysqli_error($conn);
25. }
26.
27. mysqli_close($conn);
28. ?>

7) Prepared Statement dan Bound Parameter

1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5. $dbname = "myDB";
6.
7. // Create connection
8. $conn = new mysqli($servername, $username, $password, $dbname);
9.
10. // Check connection
11. if ($conn->connect_error) {
12. die("Connection failed: " . $conn->connect_error);
13. }
14.
15. // prepare and bind
16. $stmt = $conn-
>prepare("INSERT INTO MyGuests (firstname, lastname, email) VALUES (?, ?, ?)");
17. $stmt->bind_param("sss", $firstname, $lastname, $email);
18.
19. // set parameters and execute
20. $firstname = "John";
21. $lastname = "Doe";
22. $email = "[email protected]";
23. $stmt->execute();
24.
25. $firstname = "Mary";
26. $lastname = "Moe";
27. $email = "[email protected]";
28. $stmt->execute();
29.
30. $firstname = "Julie";
31. $lastname = "Dooley";
32. $email = "[email protected]";
33. $stmt->execute();
34.
35. echo "New records created successfully";
36.
37. $stmt->close();
38. $conn->close();
39. ?>

8) Select Data

1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5. $dbname = "myDB";
6.
7. // Create connection
8. $conn = mysqli_connect($servername, $username, $password, $dbname);
9. // Check connection
10. if (!$conn) {
11. die("Connection failed: " . mysqli_connect_error());
12. }
13.
14. $sql = "SELECT id, firstname, lastname FROM MyGuests";
15. $result = mysqli_query($conn, $sql);
16.
17. if (mysqli_num_rows($result) > 0) {
18. // output data of each row
19. while($row = mysqli_fetch_assoc($result)) {
20. echo "id: " . $row["id"]. " -
Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
21. }
22. } else {
23. echo "0 results";
24. }
25.
26. mysqli_close($conn);
27. ?>

9) Hapus Data

1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5. $dbname = "myDB";
6.
7. // Create connection
8. $conn = mysqli_connect($servername, $username, $password, $dbname);
9. // Check connection
10. if (!$conn) {
11. die("Connection failed: " . mysqli_connect_error());
12. }
13.
14. // sql to delete a record
15. $sql = "DELETE FROM MyGuests WHERE id=3";
16.
17. if (mysqli_query($conn, $sql)) {
18. echo "Record deleted successfully";
19. } else {
20. echo "Error deleting record: " . mysqli_error($conn);
21. }
22.
23. mysqli_close($conn);
24. ?>
25. <?php
26. $servername = "localhost";
27. $username = "username";
28. $password = "password";
29. $dbname = "myDB";
30.
31. // Create connection
32. $conn = mysqli_connect($servername, $username, $password, $dbname);
33. // Check connection
34. if (!$conn) {
35. die("Connection failed: " . mysqli_connect_error());
36. }
37.
38. // sql to delete a record
39. $sql = "DELETE FROM MyGuests WHERE id=3";
40.
41. if (mysqli_query($conn, $sql)) {
42. echo "Record deleted successfully";
43. } else {
44. echo "Error deleting record: " . mysqli_error($conn);
45. }
46.
47. mysqli_close($conn);
48. ?>

10) Ubah Data

1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5. $dbname = "myDB";
6.
7. // Create connection
8. $conn = mysqli_connect($servername, $username, $password, $dbname);
9. // Check connection
10. if (!$conn) {
11. die("Connection failed: " . mysqli_connect_error());
12. }
13.
14. $sql = "UPDATE MyGuests SET lastname='Doe' WHERE id=2";
15.
16. if (mysqli_query($conn, $sql)) {
17. echo "Record updated successfully";
18. } else {
19. echo "Error updating record: " . mysqli_error($conn);
20. }
21.
22. mysqli_close($conn);
23. ?>
MODULE 9
SESSION DAN SECURITY

9.1 RINGKASAN

Dalam suatu aplikasi, terdapat bagian-bagian yang hanya boleh diakes oleh
pengguna tertentu, dikarenakan terdapat data sensitive ataupun rahasia. Sehingga
untuk menjaga hal itu maka area tersebut perlu diproteksi hanya orang yang berhak
saja yang boleh mengakses data tersebut.

9.2 LATIHAN

Latihan ini mencakup pembuatan form login, proses login, session, set session,
proteksi halaman dan unset session.

a Login

1) Form Login (login.php)

1. <form action="proses-login.php" method="POST">


2. Username <input type="text" name="username" placeholder="Enter the username">
3. Password <input type="password" name="password" placeholder="Enter the password
">
4. <input type="submit" value="Login">
5. </form>

2) Proses Login (proses-login.php)

1. <?php
2. session_start();
3.
4. if($_POST['username'] == 'rofil' && $_POST['password'] == '12345'){
5. // Login process is by assining session variable
6. $_SESSION['login'] = true;
7. $_SESSION['username'] = $_POST['username'];
8. echo "Login berhasil klik
9. <a href='admin.php'>Halaman Admin</a> untuk melihat data sensitif
10. atau <a href='logout.php'>logout</a> untuk keluar";
11. }else{
12. echo "Kombinasi username dan password salah. Silahkan login lagi!";
13. }
b Session untuk proteksi halaman (admin.php)

1. <?php
2. session_start();
3.
4. if(!isset($_SESSION['login']) && $_SESSION['login'] != true ){
5. echo "Anda tidak berhak mengakses halaman ini. Silahkan <a href='login.php'>log
in</a> terlebih dahulu";
6. }else{
7. echo "Ini halaman admin!! Informasi/halaman sensitif diletakan disini";
8. }

c Logout (logout.php)

1. <?php
2. session_start();
3.
4. unset($_SESSION['login']);
5. unset($_SESSION['username']);
6.
7. echo "Sukses logout. Silahkan <a href='login.php'>login</a> untuk masuk kehalaman a
dmin";

Anda mungkin juga menyukai