Scribd
Unggah
178 tayangan

Modul Praktikum Pemrograman II

Modul ini membahas tentang HTML form yang digunakan untuk menerima input dari pengguna dan kemudian diproses lebih lanjut. Terdapat penjelasan tentang cara penulisan form HTML dengan menggunakan tag <form>, atribut method, dan action. Jenis-jenis kontrol form yang dijelaskan antara lain text, password, checkbox, radio button, submit button, dan file upload.

Diunggah oleh

Ahmad Charis Elyasa Hafidianto
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
178 tayangan

Modul Praktikum Pemrograman II

Modul ini membahas tentang HTML form yang digunakan untuk menerima input dari pengguna dan kemudian diproses lebih lanjut. Terdapat penjelasan tentang cara penulisan form HTML dengan menggunakan tag <form>, atribut method, dan action. Jenis-jenis kontrol form yang dijelaskan antara lain text, password, checkbox, radio button, submit button, dan file upload.

Diunggah oleh

Ahmad Charis Elyasa Hafidianto
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 57

MODUL PRAKTIKUM

Pemrograman II

PENYUSUN

Ahmad Charis Elyasa Hafidianto


(1722498497)

JURUSAN TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI


UNIVERSITAS RAHARJA

Jl. Jenderal Sudirman No.40, RT.002/RW.006, Cikokol, Kec. Tangerang, Kota Tangerang, Banten 15117
Telp: (021) 5529692

i
KATA PENGANTAR

Saat ini perubahan dan perkembangan tersebut berlangsung dengan sangat cepat. Dalam periode waktu
yang amat singkat berbagai teknologi web baru bermunculan. Situasi ini memerlukan respon yang cepat
dan bijaksana dari dunia pendidikan ranah Teknologi Informasi. Ketersediaan waktu pembelajaran yang
terbatas di satu sisi dan materi belajar yang melimpah disisi lain memerlukan pengelolaan materi belajar
secara tepat. Pedoman praktikum ini disusun sebagai jawaban terhadap situasi tersebut.

Modul praktikum ini disusun untuk memenuhi tugas Smester Pendek Pemrograman II. Dalam modul
praktikum ini dibahas mengenai praktek berbagai bahasa web yang penting untuk mengembangkan situs
web, termasuk diantaranya HTML, CSS, dan PHP. Selain itu, ada penerapan berbagai konsep yang
sangat penting bagi desainer web untuk mengembangkan situs web yang profesional dan memenuhi
berbagai standar web. Diantara konsep- konsep tersebut adalah prinsip dasar desain web, CRUD, dan
pengenalan framework.

Akhir kata, seperti kata pepatah, Tiada Gading yang Tak Retak. Demikian pula dengan modul praktikum
ini, tentunya memiliki berbagai kekurangan. Untuk itu, kami mengharapkan saran dan masukan yang
positip untuk meningkatkan kualitas pedoman praktikum ini.

Demikian sedikit pemikiran kami sebagai penulis modul praktikum ini. Semoga modul ini berguna dan
bermanfaat bagi siapapun yang sedang mempelajari mata kuliah Pemrogaraman II. Mari kita bersama-
sama memajukan kualitas diri kita masing-masing dengan bekerja keras sesuai bidang kita masing-
masing demi masa depan yang cerah Universitas Raharja kita khususnya Jurusan Teknik Informatika
Fakultas Sains dan Teknologi. Amin.

Tangerang, Agustus 2020

Ahmad Charis Elyasa Hafidianto

ii
DAFTAR ISI
Table of Contents
KATA PENGANTAR........................................................................................................................... 2
DAFTAR ISI ........................................................................................................................................ 3
MODUL 1 HTML ................................................................................................................................ 1
MODUL 2 HTML Form ....................................................................................................................... 4
MODUL 3 CASCADING STYLE SHEETS (CSS) ............................................................................ 17
MODUL 4 Java Scripts I .................................................................................................................... 29
MODUL 5 Pengenalan PHP ................................................................................................................ 36
MODUL 6 MATERI PHP LANJUT PART 2...................................................................................... 41
MODUL 7 KONEKSI PHP DENGAN MySQL .................................................................................. 45
MODUL 8 Bahasa PHP dan MySQL .................................................................................................. 49

iii
MODUL 1
HTML
HTML (Hypertext Markup Language) adalah bahasa format dari tag XML(Extended Markup
Language) yang digunakan sebagai standar tampilan dari halaman Web. HTML dapat diterima
sebagai tampilan halaman Web setelah melalui proses interpretasi dari Web browser. Selain itu
HTML memiliki struktur yang fleksibel, tanpa lojik serta toleran terhadap kesalahan.
Standar Minimum elemen HTML:
• Document Type Declaration (DTD)
• Head
• Body

<DTD>
<html>
<head>
<!—Terdiri dari elemen-elemen yang mendeklarasikan konten sebagai pendukung
ingkungan seperti title, meta dokumen, CSS, Java Script -->
</head>
<body>
<!—Terdiri dari elemen-elemen yang diinterpretasikan sebagai tampilan web -->
</body>
</html>

1.1 DTD
Sebagai standar versi dokumen W3C yang digunakan sebagai representasi
setiap elemen pada dokumenWeb,
Contoh:
· <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
· <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1 /DTD/xhtml1 - transitional.dtd">
Standar tipe dokumen tersebut dapat digunakan untuk validasi elemen halaman
Web.

1.2 Meta Dokumen


Elemen meta sebagai identitas dari halaman Web yang biasa terdiri dari owner,
keywords, l a y o u t, ataupun inisialisasi proses seperti r e f r e s h.
Contoh:
· <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
· <meta name="owners" content="myWeb" />

1
· <meta name="keywords" content="Sistem Informasi, Jurnal, Publikasi Ilmiah" />
· <meta name="layout" content="main" />
· <meta HTTP-EQUIV="REFRESH" content="0; url=/myweb/myurl">

1.3 Elemen HTML


Jenis-jenis elemen data yang akan ditampilkan pada halaman Web seperti:
Form, Text, Image, Table, Drop-Box, Button dan lainnya.
Contoh:
· Title,
Ditampilkan pada header browser
<title>Praktikum Pemrograman Web</title>

Text
<h1>Selamat Datang Di Website Kami!</h1>
<h2>Web Ini Adalah Tutorial Pemrograman Web</h2>
<h3>Praktikum Pemrograman Web</h3>
<p> <a href="http://uin-malang.ac.id"> Teknik Informatika UIN Malang </a>
</span> link for your success way </p>

Image
<img src="images/myphoto.jpg" width="180" height="200" alt="photo"/>

Form
<form method="POST" action="response2.jsp"
enctype="multipart/form-data">

Drop-Box
<select name="My Lab">
<option value=’CC’>Lab. Praktikum Computer Vision</option>
<option value=’SI’> Lab. Sistem Informasi </option>
<option value=’CAI’> Lab. Computing & AI </option>
</select>

File Browser
<input type="file" name="upload" value="" width="200" />

Table
<table border="1" width="10">
<thead>
<tr>
<th>NIM</th>
<th>Mahasiswa</th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td>Ani Rahmawati </td>
</tr>
<tr>
<td>124</td>
<td>Budi Susilo</td>
</tr>
</tbody>
</table>

2
List
Bidang Minat:
<ol>
<li>Sistem Informasi
<ul>
<li>Data Warehousing </li>
<li>Enterprise Architecture </li>
</ul>
</li>
<li>Multimedia
<ul>
<li>Komputer Grafik </li>
<li>Machinema </li>
</ul>
</li>
</ol>

1.4 Instruksi Praktek


• Buat file form1.html
• Kopikan setiap kode script html sebagaimana diatas
• Amati yang terjadi pada browser dengan melakukan refresh pada setiap perubahan kode
• Aktifkan plugin firebug pada browser Mozilla atau chrome, kemudian lakukan inspeksi sambil
melakukan perubahan-perubahan kode HTML

1.5 Jawablah pertanyaan berikut:


1. Lakukanlah perubahan pada kode HTML sesuai keinginan anda,
Pernakah terjadi error ketika adakesalahan kode?
2. Cobalah ubah nilai meta refresh <meta HTTP-EQUIV="REFRESH" content="5;
url=http://google.co.id">apa yang terjadi?, maka jelaskan apa diantara kegunaan meta
dokumen?
3. Jelaskan fungsi tag HTML pada Table: thead, tbody, tr, th serta td!

1.6 Tugas I
Dengan menggunakan HTML buatlah desain form HTML, sebagai berikut:

3
MODUL 2
HTML Form

Overview
Salah satu fasilitas yang disediakan oleh dokumen HTML memungkinkan kita untuk
melakukan “interaksi lebih” terhadap halaman dokumen tersebut. Semisal, kemampuan
dokumen HTML mampu menyediakan fasilitas yang dapat menerima masukkan atau isian data
dari user. Data isian user ini nantinya akan dapat diproses lebih lanjut menjadi informasi yang
dibutuhkan oleh user maupun oleh pemilik situs tersebut. Teknik pengisian ini dilakukan
menggunakan elemen 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.

2.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.

4
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.

2.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 :
2.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 2.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

5
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 2.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

2.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

6
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 2.3 Contoh Penggunaan Elemen Radio Button


2.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 2.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

7
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.

2.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 2.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>

8
Gambar 2.6 Contoh Penggunaan Elemen Dropdown dengan Pilihan Banyak

2.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.

2.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 2.7 Contoh Penggunaan Tombol Submit

2.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">

9
2.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.

2.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">

2.2.6.2. Fieldset
Elemen fieldset merupakan elemen yang digunakan untuk membungkus beberapa elemen
masukan form, untuk menandakan bahwa elemen-elemen tersebut merupakan elemen masukan
yang berada pada satu grup yang sama, atau saling berhubungan.
Secara standar, elemen fieldset akan memberikan border di sekitar grup elemen- elemen di
dalamnya, yang tentunya dapat diubah dengan menggunakan CSS. Berikut adalah contoh
penggunaan fieldset :

10
<fieldset>
<label for="username">Username</label>
<input type="text" name="username" id="username">
<label for="password">Password</label>
<input type="text" name="password" id="password">
</fieldset>

yang hasil eksekusinya adalah:

gambar 2.8 Contoh Penggunaan Fieldset


2.2.6.3. Legend
Elemen legend digunakan untuk memberikan judul pada sebuah fieldset. Pengunaan elemen
legend sangat sederhana, hanya dengan menambahkan elemen tersebut sebagai child pertama
dari fieldset, seperti berikut:

<fieldset>
<legend>Login</legend>
<label for="username">Username</label>
<input type="text" name="username" id="username">
<label for="password">Password</label>
<input type="text" name="password" id="password">
</fieldset>

yang akan menghasilkan tampilan seperti berikut:

Gambar 2.9 Contoh Penggunaan Legend

dan tentunya tampilan dari legend dapat diubah dengan menggunakan CSS.

11
2.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 2.10 Contoh Pesan Kesalahan Pengisian Email pada HTML

12
LATIHAN

1. Penggunaan input text dalam sebuah form.


Simpan dengan nama latihan14.html

Gambar 2.11. Contoh skrip untuk penggunaan input text dalam sebuah form

2. Penggunaan Input Text berupa Password.


Simpan dengan nama latihan15.html

Gambar 2.12. Contoh skrip untuk penggunaan input text dalam sebuah
passwordmenu

13
3. Penggunaan Input text berupa radio button
Simpan dengan nama latihan16.html

Gambar 2.13. Contoh skrip untuk penggunaan input text berupa radio button

4. Penggunaan checkbox dalam HTML.


Simpan dengan nama latihan17.html

Gambar 2.14. contoh skrip untuk penggunaan input text berupa checkbox

14
5. Penggunaan submit, reset, dan image sebagai
button. Simpan dengan nama latihan18.html

Gambar 2.15. Contoh skrip penggunaan input berupa button

6. Penggunaan Text area dalam Form.


Simpan dengan nama latihan19.html

Gambar 2.16. Contoh skrip penggunaan input berupa text area

15
7. Penggunaan Select Dropdown dalam Form. Simpan
dengan nama latihan20.html

Gambar 2.17. Contoh skrip penggunaan Select Dropdown.

16
MODUL 3
CASCADING STYLE SHEETS (CSS)
I. KONSEP
CSS Apa itu
CSS :
• Feature untuk membuat dynamic HTML.
• Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template)
• Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic
dan berwarna biru)
• Support ke semua
browser.

Aturan penulisan :
• Nilai untuk property tidak boleh dalam tanda
petik. contoh : color : green;
• Nama property bersifat case
sensitive. color : green;
property :
color value
: green

Cara penggunaan CSS :


• External Style Sheet
Bentuk :
<link rel=“stylesheet” type=“text/css”
href=“css_files.css”>
dimana :
• <link, merupakan tag pembuka diakhiri dengan tanda “>”
• rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet
• type=“text/css”, file yang dipanggil berupa css
• href=“css_files.css”, alamat dokumen stylesheet yang dipanggil

Contoh Penggunaan :
script efek.css

17
• Internal Style Sheet
Bentuk umum :
<style type=“text/css”>
…definisi style…
</style>

Contoh Penggunaan :

• Inline Style sheet


Contoh Penggunaan :
II. ATURAN PENULISAN PADA CSS
Syntaxis CSS dibagi dalam 3 bagian :

selector {property : value}

dimana :
selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah

Cara penulisan :
FONT-FAMILY : sans-serif;
FONT-SIZE : small;

Cara penulisan yang salah :


FONT-FAMILY : “sans-serif”;
FONT-SIZE : „small‟;

Cara mendeklarasikan kelompok : (tanda koma serta &)


H1, H2 {color : green};
H3, H4 & H5 {color : red};

Cara menuliskan komentar :


• Menggunakan tanda : /* ….. */
• Menggunakan tanda : <! -------------->
Bentuk ukuran :
Ukuran Keterangan
em Untuk menentukan ukuran yang pecahan (desimal)
ex x-height, digunakan untuk menentukan ukuran yang
sifatnya vertikal
px Pixels, menentukan ukuran yang bersifat pixel (layar
monitor) seperti ukuran huruf.

III. SELECTOR SEBAGAI PENGONTROL DESIGN


1. Selector untuk merubah body. color: red;
BACKGROUND-COLOR: green;
<HTML> }
<HEAD> </style>
<TITLE> Selector </TITLE> </HEAD>
<style type="text/css">
body <BODY>
{ Halaman efect CSS
FONT-FAMILY: Geneva, Arial; </BODY>
FONT-SIZE: 20px; </HTML>

19
2. Jenis-jenis selector </HEAD>
a. Selector bebas
<BODY id="BODY_115">
<HTML>
Menggunakan ID Selector
<HEAD>
</BODY>
<TITLE> Selector </TITLE>
</HTML>
<style type="text/css">
gbawah{
IV. MEMFORMAT HALAMAN WEB
TEXT-DECORATION: underline; 1. Format dengan margin
} <HTML>
</style>
<HEAD>
</HEAD>
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css">
<BODY>
BODY
<gbawah> Efect Garis Bawah dengan
{
Selector Bebas </gbawah>
margin-top : 1cm;
</BODY>
margin-right : 2cm;
</HTML>
margin-bottom : 1cm;
margin-left : 2cm;
b. Selector dengan class
}
<HTML>
</STYLE>
<HEAD>
</HEAD>
<TITLE> Selector </TITLE>
<BODY>
<style type="text/css">
Pengaturan Margin Halaman
.right { text-align : right }
(1cm,2cm,1cm,2cm)
</style>
</BODY>
</HEAD>
</HTML>
<BODY>
2. Pemetaan menggunakan padding
<h2 class="right">Class Heading 2 </h2>
Padding hampir sama dengan margin :
<p class="right"> Class Paragraf</p>
a. Margin hanya digunakan untuk membuat
batasan-batasan sisi halaman.
</BODY>
b. Padding dapat membuat batasan-batasan pada
</HTML>
komponen web lain seperti tabel, disamping
pengaturan batas halaman.
c. Selector Id
<HTML>
<HTML>
<HEAD>
<HEAD>
<TITLE> Selector </TITLE>
<TITLE>Pengaturan Margin</TITLE>
<style type="text/css">
<STYLE ="text/css">
#BODY_115 {
BODY {
FONT-SIZE: 20px;
padding-top : 10%;
TEXT-DECORATION: underline;
padding-right : 20%;
COLOR: blue;
padding-bottom : 40%;
FONT-FAMILY:Comic Sans MS;
padding-left: 20%;
}
}
</style>

20
</STYLE> 3. Background gambar
Properties Value Keterangan
</HEAD> background- url Alamat gambar
<BODY> image yang dituju
Text ini berada di tengah halaman , background- repeat Diulang dlm hal
repeat repeat-x Diulang sumbu x
karna di lakukan pengaturan halaman repeat-y Diulang sumbu y
dengan menggunakan padding atas 10%, no-repeat Tampil 1 gbr
kanan 20%,bawah 40%,dan kiri 20%.
Background- top left Atas kiri hal
</BODY> position top center Atas tngh hal
</HTML> top right Atas kanan hal
center left Tgh kiri hal
center center Pusat hal
V. MEMBUAT BACKGROUND center right Tngh kanan hal
1. Background warna bottom left Bwh kiri hal
<HTML> bottom center Bwh tgh hal
bottom right Bwh kanan hal
<HEAD> x-% y-% Pakai nilai %
<TITLE>Menggunakan Background x-pos y-pos
Warna</TITLE> Contoh 1 :
<STYLE type="text/css"> <HTML>
BODY { background-color : yellow} <HEAD>
</STYLE> <TITLE>Menggunakan Background
</HEAD> Gambar</TITLE>
<BODY> <STYLE ="text/css">
Halaman ini di buat Berwarna Kuning BODY
</BODY> {
</HTML> background-image:
url("drums.jpg");
2. Background campuran background-repeat: repeat-x;
<HTML> }
<HEAD> </STYLE>
<TITLE>Menggunakan Background </HEAD>
Warna</TITLE> <BODY>
<STYLE ="text/css"> Background Berulang pada Sumbu X
body {background-color : #99CCFF} </BODY>
h2 {background : green} </HTML>
h3 {background-color : transparent}
p {background : rgb(240,248,255)} Contoh 2 :
</STYLE> <HTML>
</HEAD> <HEAD>
<BODY> <TITLE>Menggunakan Background
<h2>Header 2,Background Hijao</h2> Gambar</TITLE>
<h3>Header 3 , Bakground Transparan</h3> <STYLE ="text/css">
<p>Background pada paragraph</p> BODY
</BODY> {
</HTML> background-image:url ("motor.jpg");
background-repeat: no-repeat;
background-position: center center;
}

21
</STYLE> Contoh 2 :
</HEAD> <HTML>
<BODY> <HEAD>
Background di Pusat Halaman <TITLE>Format Text </TITLE>
</BODY> <STYLE ="text/css">
</HTML> h1 {text-align: center}
h2 {text-align: left}
VI. FORMAT TEXT PADA WEB h3 {text-align: right}

Properties Value Keterangan </STYLE>


Pengaturan warna </HEAD>
color green, dll <BODY>
Pengaturan Spasi (jrk antar karakter)
letter-spacing Normal Ukrn standar HTML <h1>Header 1,Di tengah</h1>
Length Ukrn panjang <h2>Header 2 , Di kiri</h2>
(cm,px) <h3>Header 3 ,Di kanan</h3>
Perataan Text
text-align left
</BODY>
right </HTML>
center
justify
text-decoration none Bentuk standar
Contoh 3 :
underline Bergaris bwh <HTML>
overline Bergaris atas <HEAD>
line-through Text dicoret <TITLE>Format Text </TITLE>
blink Text berkedip
<STYLE ="text/css">
Pengaturan text indentasi em {text-decoration : overline}
text-indent length Dengn cm, px h2 {text-decoration: blink}
% Dengan persentase
Pengubahan Bentuk Karakter h3 {text-decoration: underline}
text-transform capitalize a {text-decoration: none}
uppercase </STYLE>
lowercase
none </HEAD>
<BODY>
Contoh 1 : <em>Bentuk Overline</em>
<HTML> <h2>Header 2, Bentuk Line-
<HEAD> through</h2>
<TITLE>Format Text </TITLE> <h3>Header 3,Bentuk Underline</h3>
<STYLE ="text/css"> <p> <a href="http://lecturer.eepis-
p {color : green; letter-spacing: 0.5cm} its.edu/~zenhadi">
h4 {letter-spacing: -2px} Penggunaan Dalam Link,Nilai NONE</a></p>
</STYLE> </BODY>
</HEAD> </HTML>
<BODY>
<p>Pengaturan Spasi Pada Paragraph Contoh 4 :
</p> <HTML>
<h4> Header 4</h4> <HEAD>
</BODY> <TITLE>Format Text </TITLE>
</HTML> <STYLE ="text/css">
p.besar {text-transform: uppercase}

22
p.kecil {text-transform: lowercase} <BODY>
</STYLE> <P class="italic">Menggunakan Style
</HEAD> Italic</P>
<BODY> <P class="normal">Menggunakan Style Normal
<p class="besar"> </P>
pengubahan kedalam hurup Besar <P class="oblique">Menggunakan Style
</p> Oblieque</P>
<p class="kecil"> </BODY>
PENGUBAHAN KEDALAM HURUF KECIL </HTML>
</p>
</BODY> Contoh 2 :
</HTML> <HTML>
<HEAD>
VII. PENGATURAN FONT <TITLE>Pengaturan Font</TITLE>
<STYLE ="text/css">
Properties Value Keterangan p.normal
Jenis Font {
font-family arial, dll
Ukuran Huruf
font-family : verdana ;
Font-size Small Kecil font-weight: normal;
Medium Menengah }
Large Besar p.thick
Length Besar font (pt,px)
% Persentase {
Pengaturan gaya pada font font-family : verdana ;
font-style normal font-weight: bold;
italic
oblique }
p.thicker
Ketebalan huruf {
font-weight normal
bold font-family : times ;
100 ~ 900 font-weight: 900;
}
Contoh 1 : </STYLE>
<HTML> </HEAD>
<HEAD> <BODY>
<TITLE>Pengaturan Font</TITLE> <p class="normal">
<STYLE ="text/css"> This is a paragraph</p>
p.italic <p class="thick">
{ This is a paragraph</p>
font-size :200 % ; <p class="thicker">
font-style: italic; This is a paragraph</p>
} </BODY>
p.n ormal{ </HTML>
font-family : verdana ;
font-style: normal;
}
p.o blique {font-style: oblique}
</STYLE>
</HEAD>

23
VIII. PENGATURAN TABEL background-color : #E6E6FA;
border-width: 1px ;
Yang perlu diperhatikan adalah border-style:solid;
pengaturan border, padding dan margin suatu border-color :blue ;
tabel. font-size: 9pt;
1. Pengaturan padding }
<HTML>
<HEAD> File html yang akan memanggil file css
<TITLE>Pengaturan Padding Table</TITLE> <HTML>
<style type="text/css"> <HEAD>
td.kiri{ <TITLE>Pengaturan Table spec</TITLE>
padding-top: 2cm; <LINK REL="STYLESHEET"
padding-right: 2cm; TYPE="text/css"
padding-bottom: 2cm; HREF="table_specbody.css">
padding-left: 2cm ;
background-color : #F0F8FF; </HEAD>
} <BODY>
</style> <table width="468" border="0"
</HEAD> cellpadding="5" cellspacing="0" >
<BODY> <tr>
<TABLE BORDER="1"> <th width="112" >Nama Computer</th>
<TR> <th width="91">Prossesor</th>
<TD class="kiri">Pading dengan jarak 2cm <th width="96">Ram</th>
dari kiri,atas,kanan,dan bawah</TD> <th width="137" >System Operasi</th>
<TD>Tanpa jarak </TD> </tr>
</TR> <tr>
</TABLE> <td>Clnt-1</td>
</BODY> <td >IP 4 1,8 Ghz</td>
</HTML> <td >10 GB</td>
<td >Redhat Linux</td>
2. Menggunakan file css untuk </tr>
mempercantik pembuatan tabel. <tr>
<td >Clnt-2</td>
File table_specbody.css <td >IP 2 Ghz C</td>
/* CSS Document */ <td >6 GB</td>
<td >Mandrake Linux</td>
TH { </tr>
color : #FFFFFF; <tr>
background-color : #336699; <td >Clnt-2</td>
border-width: 1px ; <td >XP 2000+ </td>
border-style:solid; <td >20 GB</td>
border-color :red ; <td>Windows</td>
font-size: 9pt; </tr>
} </table>
TD { </BODY>
color : red; </HTML>

24
IX. PENGATURAN HYPERLINK &
TOMBOL YANG MENARIK </STYLE>

Syntax penulisan pada CSS : </HEAD>


a:link {property : value} <BODY>
<TABLE border="1">
Selector Keterangan <TR>
a:link Keadaan awal pemicu link aktif
<TD width="144">
a:visited Keadaan pemicu link setelah
dikunjungi <a href="#">Arahkan Mouse ke
a:active Keadaan pemicu yang sedang aktif sini</a>
a:hover Kejadian pada pemicu link saat mouse </TD>
digerakkan diatasnya
</TR>
1. Penggunaan property selector <TR>
<HTML>
<HEAD> <TD width="144">
<TITLE>Pengaturan pada link</TITLE> <a href="#">Arahkan Mouse ke
sini</a>
<STYLE type="text/css"> </TD>
/*Konversi pengaturan Link pada contoh </TR>
sebelumya menggunakan css */ </TABLE>
</BODY>
A:link {color : green;}
A:hover { color : pink;} </HTML>
</STYLE>
</HEAD>
<BODY>
<a href="http://lecturer.eepis-its.edu/~zenhadi" 3. Membuat tombol visual 3D
target="_self">Contoh Hyperlink menggunakan a. Pembuatan file css
CSS</a> /* CSS Document */
</BODY> .leftlinks {
</HTML> border:1px solid #22476C;
padding:5px;
2. Pembuatan tombol dengan tabel margin:5px;
text-align:middle;
<HTML> background-color:#336699;
<HEAD> width:150px;
<TITLE>Pengaturan Pada Link }
background</TITLE> .leftlinks a {
display:block;
<STYLE ="text/css"> margin:3px 0px;
A:link {text-decoration: none} border-top:1px solid #4C86C0;
A:visited {text-decoration: none} border-left:1px solid #4C86C0;
A:active {text-decoration: none} border-right:1px solid #22476C;
A:hover { border-bottom:1px solid #22476C;
padding: 4px 10px;
font-weight:none;
color: red; text-align:center;
background-color:#336699;
background-color:blue;}

25
color:#EDEDED; </BODY>
text-decoration:none; </HTML>
}
.leftlinks a:link { Fungsi tag <div> : hampir sama dengan tag
color:#EDEDED; paragraf <p>, berguna untuk mengelompokkan
} sejumlah baris teks yang memiliki karakteristik
.leftlinks a:visited { yang sama.
color:#EDEDED;

26
}
.leftlinks a:hover { display:block; margin:3px 0px;
border-top:1px solid #22476C; border-left:1px solid #22476C; border-
bottom:1px solid #4C86C0; border-right:1px solid #4C86C0; padding: 5px 9px
3px 11px;
text-align:center; background-color:#336699; color:#EED929;
text-decoration:none;
}

b. Pembuatan file HTML utk memanggil css


<HTML>
<HEAD>
<TITLE>Pengaturan Pada Link Visualisasi tombol</TITLE>

<LINK REL="STYLESHEET" TYPE="text/css"


HREF="link_frtombol.css">

</HEAD>
<BODY>

<div class="leftlinks">
<a href="index.htm">Teras Wamika</a>
<a href="profil.htm">Pssrofil Organisasi</a>
<a href="struktur.htm">Struktur</a>
<a href="pembimbing.htm">Pembimbing
Org</a>
<a href="dpo.htm">DPO Organisasi</a>
<a href="kegiatan.htm">Kegiatan Rutin</a>
<a href="berita.htm">Berita UKM</a>
</div>

27
TUGAS :
Buatlah web pribadi anda, lengkapi dengan pembuatan tombol link menggunakan css.
FASILITAS MENU :
1. HOME : Informasi sekilas tentang diri anda.
2. PENDIDIKAN : Pendidikan yang telah anda tempuh, termasuk pelatihan dan training
yang pernah diikuti.
3. JADWAL KULIAH : Gunakan pemakaian tabel dengan css seperti diatas.
4. AKTIVITAS : Pengalaman organisasi yang pernah anda ikuti selama kuliah atau di
luar.
5. Tambahkan informasi lain, untuk menambah nilai anda.

28
MODUL 4
Java Scripts I

4.1 Teori
Sekilas tentang JavaScript
Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan
adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan
menggunak an JavaScript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum
formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang
berbeda. avascript diinterpretasikan oleh klien (kodenya bis a dilihat pada sisi klien), edangkan kode
java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

Struktur JavaScript
Struktur dari JavaSc ript adalah sbb :
<SCRIPT LANGUAGE = ”JavaScri pt”>
<!- -
Penulisan kode javascript
// – - >
</SCRIPT>
Keterangan :
Kode <!- - // – - >
umumnya disertak an dengan tujuan agar sekiranya browser tidak mengenali JavaScript maka browser
akan memperlakukannya sebagai komentar sehingga tidak ditampilkan pada jendela browser.

JavaScript sebagai bahasa berorientasi pada obyek


Properti
Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil.
Penulisan :
Nama_objek.nama_properti = nilai
window. defaultStatus = ”Selamat Belajar JavaScript”;
Metode
Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan
terhadap objek.
Penulisan :

29
Nama_objek.nama_metode(parameter)
document.write (”Hallo”)

Letak JavaScript dalam HTML


Skrip Javascript dalam dokumen HTM L dapat diletakkan pada :
1. Bagian Head
2. Bagian Body (jarang digunakan).

Latihan :
DASAR-DASAR JAVASCRIPT
1. Pemakaian alert sebagai property window
2. Pemakaian metode dalam objek.
3. Pemakaian prompt

30
Pemrograman di Java Scripts
Operasi dasar aritmatika

Operasi relational
Seleksi kondisi (if..else)

31
Penggunaan operator switch untuk seleksi kondisi Pemakaian looping < for >

32
Pemakaian looping < do..while >
Pemakaian looping < while >

33
Form
1. Form input :
2. Form button :

34
4.2 Latihan
1. Buat halaman html untuk mengkonversi nilai angka menjadi nilai huruf dengan menggunakan
javascript . Konversi : 0-40 =E
41-55=D
56-60=C
61-65=BC
66-70=B
71-80=AB
81-100=A
2. Buat halaman html untuk menampilkan aplikasi program kalkulator sederhana dengan
menggunakan javascript. Contoh tampilan :
Bil 1 dan Bil 2 merupakan text box, dapat diisi angka, bila tombol + atau – atau x atau / ditekan,
maka akan keluar bilangan pada text box hasil, dimana bilangan ini merupakan operasi arithmetic
sesuai dengan tombol yang ditekan.
<SCRIPT LANGUAGE = “JavaScript”>
<!–
document.write(“Dimodifikasi terakhir pada ” +
document.lastModified);
//–> </SCRIPT>
</BODY>
</HTML>

35
MODUL 5
Pengenalan PHP
7.1 Dasar Teori
PHP (Preprocesor Hypertext) adalah bahasa scripting yang menyatu dengan HTML dan
dijalankan pada server side. Artinya semua sintaks yang diberikan akan sepenuhnya
dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja
berupa HTML. Untuk membedakan perintah HTML dan PHP digunakan tanda
<?…?>atau <?php … ?>

PHP dapat diaplikasikan dengan berbagai macam database, seperti MySQL,


PostgreSQL,, Oracle, dan lainnya. Beberapa script dasar PHP
g. Menampilkan text
echo "..text …. <br>"
<br> : ganti baris

h. Variabel
Untuk membuat variabel diberi tanda dollar ($). Variabel berfungsi untuk
menyimpan suatu nilai dan dapat berubah-ubah. Penulisan variable yang benar
adalah :
o Karakter pertama tidak boleh berupa angka (harus berupa huruf atau garis
bawah)
o Tidak mengandung spasi
o Pemakaian huruf kapital dan huruf kecil dibedakan
Contoh penulisan variable :
$data, $data1, $data_ku

Array
Array merupakan suatu variabel yang dapat berisi banyak data dalam waktu yang sama.
Pendefinisian Array dapat dibentuk dengan format berikut :
$nama_array = array(elemen_1, …, elemen_n);
Untuk menghitung jumlah elemen array digunakan fungsi count(), dengan format
count($nama_array)

36
Operator

Dalam PHP juga dapat melakukan proses operasi, baik itu penjumlahan, operasi logika,
ataupun operasi pembanding.Operator Matematika yang digunakan dalam PHP yaitu :

Operator Pembanding yang digunakan dalam PHP yaitu :

Selain itu, operator Logika juga dapat digunakan di PHP, antara lain, and (&&), or (||),
xor, dan !.

Penulisan Karakter Khusus dengan tanda \

Karakter yang ditulis dengan diawali tanda (\) yaitu:

• Tipe Data

Tipe data yang dikenal pada pemrograman PHP yaitu :

• Konversi Tipe Data


Fungsi-fungsi yang digunakan dalam PHP untuk mengkonversikan tipe data ke tipe
data yang lain yaitu dengan memberikan fungsi intval, doubleval, dan strval. Atau
dengan menggunakan teknik cast, yaitu dengan mengubah tipe ekspresi yang akan
dikonversi.

Menampilkan Tanggal dan Waktu


Untuk menampilkan tanggal dan waktu secara update, dapat menggunakan perintah
datedengan format-format berikut :

37
7.2 Pelaksanaan Praktikum

1. Ketikkan program berikut ini :

C
a
t
a
t
a
n

:
Nama Agung Teguh Wibowo Almais dan NIM : 146060300111010 diatas ganti
dengan nama masing-masing).
3. Simpan dengan menggunakan ekstensi php (misalnya mod_1.php), dan jalankan di
web browser.

38
3. Ketikkan program berikut :

4. Simpan script diatas lalu lihat hasilnya di web browser. Perhatikan urutan nama-
nama yang tampil dari perintah echo $nama[1] . $nama[2] . $nama[0];
5. Tambahkan fungsi count untuk menghitung jumlah elemen array $nama dengan
menambahkan script berikut :
//menghitung jumlah elemen array
$jum_array = count($nama);
echo "jumlah elemen array = ". $jum_array;
6. Ketikkan script berikut ini untuk mengkonversi tipe data.

3. Ketikkan script berikut untuk menampilkan tanggal dengan mengambil tanggal di


server.

7.3 Latihan

39
• Buatlah aplikasi sederhana untuk menghitung luas persegi panjang

7.4 Tugas
• Modifikasilah program pada praktik 7 untuk menampilkan informasi tanggal dan
waktu dengan mencoba menggunakan format-format date lainnya.
• Buatlah program sederhana tentang biodata tanpa database.

40
MODUL 6
MATERI PHP LANJUT PART 2

Pada minggu lalu, kita telah mengenal perintah-perintah dasar PHP, fungsi- fungsi PHP, dsb.
Praktikum kali ini akan sedikit mengulang materi minggu lalu. Pertemuan kali ini kita
akan sedikit mengenal variabel yang dideklarasikan melalui form melalui dokumen HTML.
Variabel tersebut diantaranya adalah $_POST [“variable”], $_GET [“variable”], dan
$_REQUEST [“variable”].
1. $_POST [“variable”]
Berfungsi untuk mengambil nilai variabel karena pengaruh method = post pada suatu
form. Contoh :

Buatlah file
post.php
seperti di
bawah ini
sebagai form
input.
Kemudian
hasil dari
input akan
dikirim ke
file php lain dengan nama postAct.php seperti file di bawah ini :

2. $_GET
[‟variable”]
Berfungsi untuk mengambil nilai variabel karena pengaruh method = get pada
suatu form. Untuk penggunaan $_POST dan $_GET hampir sama, silahkan ubah file
dengan menggunakan $_POST di atas dengan menggunakan $_GET.

3. $_REQUEST [“variable”]
Berfungsi untuk mengambil nilai variabel karena pengaruh dari hasil link.
Contoh : <a href=”http://localhost/cek.php?nama=rahmi”>Link ke Cek</a>
Include dan Require
Fungsi inc lude dan require berfungsi utnuk mengeksekusi suatu fila degnan file
lainnya. Dengan kedua fungsi ini, dapat dibuat fungsi- fungsi, konstanta, atau
perintah operasi biasa pada file terpisah yang dapat dipanggil dengan menggunakan file lain.
Bentuk umum penulisannya :
Include “nama file”
Require “nama file”
Contoh :
41
Buatlah dua buah file dimana file pertama merupakan file sumber sedangkan file kedua
merupakan file pengeksekusi file sumber.
File sumber bernama inc.php

File pengeksekusi bernama proses.php

Cookies
Cookies merupakan proses penyimpanan nilai sementara dari suatu variable pada
client browser. Fungsi yang dibutuhkan untuk menerapkan fungsi cookies adalah setcookie().
Cookies merupakan bagian dari HTTP sehingga diperlukan pendeklarasian cookies agar dapat
mengirimkan output ke client browser.
Bentuk umum penulisan :
Setcookie(variable cookies, nilai cookies) atau
Setcookie(variable cookies, nilai cookies, lama waktu)
Contoh penerapan cookies :
Buatlah dua buah file yaitu file linkcookies.php dan cekcookies.php.
File linkcookies.php :

File cekcookies.php
:

Redirect Halaman
Redirect halaman merupakan bentuk pengalihan halaman ke halaman lain. Fungsi
redirect halaman sangat diperlukan apabila pada suatu situs sedang mengalami perbaikan
sehingga homepage kita dapat dialihkan ke halaman lain. Misalnya file index.php
kita sedang diperbaiki, maka ketika seseorang melakukan browsing ke halaman
index.php akan dialihkan ke halaman lain misalnya repair.php. Redirect halaman dapat juga
diterapkan dengan menggunakan tag html.

42
Penjelasan ;
Ketika anda melakukan browsing terhadap halaman redirect.html, maka secara otomatis
akan dialihkan ke halaman tes.php dalam waktu 2 detik. Untuk pengaturan redirect dengan php
script menggunakan aturan sbb :
Bentuk umum penulisan : header(“Location:halaman tujuan”);

Contoh :
Silahkan buat tiga buah file, file pertama merupakan form yang menerima inputan
silahkan beri nama input.php.

Kemudian file kedua untuk melakukan pengecekan beri nama hasilkirim.php.

File terakhir adalah file redirect silahkan beri nama kosong.php.

Penjelasan :
Ketika kita memasukkan data, maka akan tampil nama hasil inputan pada browser.
Akan tetapi ketika data kosong maka akan mer-redirect ke halaman lain yaitu
kosong.php.

TUGAS :
43
1. Buatlah form login dengan melakukan include pada halaman web anda yang
akan menampilkan nama anda, email, jam, hari, dan tanggal login setela login
tanpa menggunakan database dengan menggunakan method get atau post!
2. Dari soal nomor satu, buatlah halaman lain untuk redirect yang menunjukkan
bahwa data tidak lengkap ketika user tidak memasukkan nama atau email pada saat login!

44
MODUL 7
KONEKSI PHP DENGAN MySQL
Dasar Teori
• Mengapa menggunakan Mysqli Extension ??

Pada PHP versi 5.5, extension mysql tidak direkomndasikan lagi karena berstatus
deprecated, yang kemungkinan besar akan dihapus pada versi PHP berikutnya.

• Apa perbedaan mysql extension dan mysqli extension ??

Secara umum tidak ada perbedaan yang signifikan. Sebagian besar fungsi – fungsi
sangat mirip dengan mysql extension.
Sebagai contoh dalam membuat sebuah koneksi dengan MySQL Server, di dalam
mysql kita menggunakan fungsi mysql_connect(); sedangkan dalam mysqli berubah
menjadi mysqli_connect(); Kita tinggal menambahkan „i‟ saja dalam penulisan
fungsinya. Ada satu lagi perbedaan dalam menuliskan sebuah argument di dalam
sebuah fungsi. Dalam mysql argument resources diletakkan di akhir, sedangkan
mysqli diletakkan di awal.

Langkah-langkah koneksi PHP- MySQL

1. Membuka koneksi ke server MySQL


mysql_connect()
Digunakan untuk melakukan uji dan koneksi kepada server database MySQL.
Sintaks :
$conn = mysql_connect (”host”,”username”,”password”);
$conn adalah nama variabel penampung status hasil koneksi kepada database.
host adalah nama host atau alamat server database MySQL.
username adalah nama user yang telah diberi hak untuk dapat mengakses server
database.
password adalah kata sandi untuk username untuk dapat masuk ke dalam database

2. Memilih database yang akan digunakan di server


mysql_select_db()
Digunakan untuk melakukan koneksi kepada database yang dalam server yang
berhasil dikoneksi dengan perintah mysql_connect().
Sintaks :
$pilih = mysql_select_db(”namadatabase”,$conn);
$pilih berisi status koneksi kepada database.
$conn merupakan koneksi kepada server database yang berhasil.
namadatabase adalah nama database yang akan dikenai proses.

3. Mengambil sebuah query dari sebuah database.

45
mysql_query()
Digunakan untuk melakukan eksekusi perintah SQL untuk memanipulasi database
yang berhasil dilakukan koneksinya menggunakan mysql_select_db().
Sintaks :
$hasil = mysql_query(”SQL Statement”);
$hasil akan berupa reco rd set apabila SQL Statement berupa perintah select.

4. Mengambil record dari tabel


a. mysql_fetch_array()
Digunakan untuk melakukan pemrosesan hasil query yang dilakukan dengan
perintah mysql_query(), dan memasukkannya ke dalam array asosiatif, array
numeris atau keduanya.
Sintaks :

$row adalah array satu record dari record $hasil yang diproses nomor record
sesuai dengan nomor urut dari proses mysql_fetch_array yang sedang dilakukan.
$hasil adalah record set yang akan diproses.
b. mysql_fetch_assoc()
Fungsi ini hampir sama dengan fungsi mysql_fetch_array(), hanya saja array yang dihasilkan
hanya array asosiatif.
Sintaks :
$row = mysql_fetch_assoc($hasil);
c. mysql_fetch_row()

Fungsi ini hampir sama dengan fungsi mysql_fetch_array(), hanya saja array yang dihasilkan
hanya array numeris.
Sintaks :
$row = mysql_fetch_row($hasil);
d. mysql_num_rows()
Fungsi ini digunakan untuk menghitung jumlah record yang ada pada database.
Sintaks :
$jml = mysql_num_rows($hasil);
$jml akan memiliki nilai sesuai dengan jumlah record yang ada.

46
A. PERCOBAAN

1. Menguji interkoneksi PHP dengan MySQL.

2. Melihat perbedaan antara mysql_fetch_array(),mysql_fetch_assoc(), mysql_fetch_row().


a. Buatlah tabel liga berikut ini, dengan 3 field : kode, negara, champion.
Create table liga (
kode char(3) not null,
negara char(15),
champion int
);
b. Isilah tabel dengan data berikut ini :

c. Akses databases menggunakan mysql_fetch_array()

d. Akses databases menggunakan mysql_fetch_row()

47
B. TUGAS
1. Buatlah buku tamu dengan menggunakan mysqli extension. Dengan nama tabel
buku_tamu dan tabel yang kalian butuhkan terdapat 3 field seperti dibawah ini:

2. Pada pembuatan buku tamu Tugas No.1 gunakan fungsi include untuk menggabungkan
file koneksi database dengan file yang lainnya.

48
MODUL 8
Bahasa PHP dan MySQL

Pokok Bahasan
• Program Menambah Data
• Program Mencetak Data
• Program Login
• Program-program Administrator

Indikator Keberhasilan
Mahasiswa memahami langkah-langkah pengolahan data menggunakan PHP dan dapat
menerapkannya untuk membuat program input dan cetak data

Penjelasan
Php merupakan bahasa script yang dijalankan pada sisi server (SSS : Server Side Scripting). Database
yang didukung PHP antara lain : MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic
ODBC.
PHP adalah software Open Source, bebas untuk diunduh dan digunakan.

File PHP dapat berisi teks, tag HTML, dan Script. File PHP dikembalikan ke browser dalam bentuk
plain HTML. File PHP dapat berekstensi .php, .php3, atau .phtml.

Kelebihan PHP sebagai bahasa script adalah dapat dijalankan pada berbagai platform (windows, linux,
dan sebagainya), kompatibel terhadap hampir semua server yang digunakan saat ini, bebas

49
diunduh dari situs resmi PHP www.php.net, mudah dipelajari dan berjalan dengan efisien pada sisi
server.

Untuk menggunakan PHP harus menginstall terlebih dahulu web server Apache (atau IIS) pada
komputer/server yang akan digunakan, serta menginstall PHP dan MySQL. Atau dapat menggunakan
layanan hosting yang menyediakan dukungan terhadap PHP dan MySQL.

Proses mengolah data menggunakan PHP pada dasarnya menggunakan tiga langkah berikut:

1. Membuat sambungan dari PHP ke server database (MySQL)


Langkah pertama memerlukan fungsi mysql_connect() dengan tiga parameterrnya yaitu: nama
host tempat server database mysql berada, nama user yang terdaftar pada server database
MySQL, dan password dari nama user. Sintaksnya:

mysql_connect(“nama_host”,”nama_username”, “password_username”);

Contoh:

mysql_connect(“192.168.10.250”,”a121204567”,””);

2. Menentukan dan membuka database yang akan digunakan


Langkah kedua menggunakan fungsi mysql_select_db() dengan parameter tunggal yaitu nama
database yang akan digunakan. Sintaks:

mysql_select_db(“nama_db”);

Contoh:

mysql_select_db(“a121204567”);

3. Menjalankan query
Langkah ketiga menggunakan fungsi mysql_query() dengan parameter berupa perintah sql
yang akan dijalankan. Sintaksnya:

mysql_query(“perintah_sql”);

Contoh:

mysql_query(“insert mahasiswa set nim=’$nim’, nama=’$nama’, ipk=’$ipk’”);

Jika untuk membuat program cetak, maka ditambah satu langkah lagi yaitu menguraikan data yang akan
dicetak dengan menggunakan fungsi mysql_fetch_row() dengan parameter tunggal yaitu hasil query.

Contoh:

50
$sql=”select * from mahasiswa”;
$qry=mysql_query($sql)
While($hasil=mysql_fetch_row($qry)){
echo “Nim :”.$hasil[0].”<br />
Nama: “.$hasil[1].”<br />
IPK:”.$hasil[2].”<br />”;
}

Praktikum
Pada praktikum kali ini Anda akan dituntun untuk membuat program-program dasar menggunakan PHP.
Salah satu program dasar tersebut adalah program input data. Untuk membuat program input data ini,
silahkan gunakan form yang telah dibuat pada praktikum sebelumnya (kontak.html) yang berisi inputan
data kontak untuk pengguna, yaitu NAMA, JENIS KELAMIN, EMAIL, ALAMAT, KOTA, PESAN.
Form tersebut belum dilengkapi dengan file pengolah datanya. Oleh karena itu pada praktikum ini, form
tersebut akan dilengkapi dengan program pengolah data. Selanjutnya ikuti instruksi-instruksi berikut ini:
1. Buat tabel dengan nama kontak dalam database Anda (database Anda biasanya sudah dibuatkan
dengan nama sesuai username, a12xxxxxxx. Jika belum, buat database dengan nama username
Anda). Field-fieldnya adalah:

Field Tipe Data Panjang Keterangan


id integer 4 Not null, auto_increment
Nama Varchar 30 Not null
jkel Varchar 10 -
Email Varchar 40 -
Alamat Varchar 50 -
Kota Varchar 20 -
Pesan text - -

2. Tambahkah pada atribut action form nama file pengolah datanya yaitu simpan_kontak.php.
File ini yang akan dibuat pada praktikum kali ini.
3. Buat file simpan_kontak.php dan simpan pada direktori yang sama dengan direktori dimana
file kontak.html tersimpan.
4. Tulis kode berikut pada file simpan_kontak.php:
<?php
$host="nama_host";
$username="nama_username";

51
$password="passwor_username";
mysql_connect($host, $username, $password) or die("Koneksi gagal dibangun");
mysql_select_db("situspersonal") or die("Database tidak dapat dibuka");
//memindahkan nilai data form ke variabel sederhana agar mudah ditulis
$vnama=$_POST['nama'];
$vjkel=$_POST['jkel'];
$vemail=$_POST['email'];
$valamat=$_POST['alamat'];
$vkota=$_POST['kota'];
$vpesan=$_POST['pesan'];

$sql="insert kontak set nama='$vnama',


jkel='$vjkel',
email='$vemail',
alamat='$valamat',
kota='$vkota',
pesan='$vpesan'";
mysql_query($sql) or die("Proses simpan ke database gagal");
mysql_close();
header("location:kontak.html");
?>

Sebelumnya, ganti nilai nama_host dengan dinus.net atau 192.168.10.250, nama_username


dengan nama user Anda (a12xxxxxxx), dan password_username untuk username Anda biasanya
dikosongkan. Pada program diatas, perintah sql disimpan dulu dalam sebuah variabel, kemudian
variabel ini yang digunakan pada fungsi mysql_query(). Perintah terakhir, yaitu
header("location:kontak.html"), digunakan untuk mengarahkan browser agar menampilkan
form setelah proses penyimpanan ke database selesai
5. Jalankan form kontak lalu isi dengan data kemudian tekan tombol submitnya. Jika program
sudah benar maka sebuah rekod akan ditambahkan kedalam database.
6. Setelah program input selesai, berikutnya adalah membuat program cetak untuk menampilkan
data yang sudah tersimpan dalam database. Buat sebuah file php baru beri nama cetak.php.
Simpan file ini dalam direktori baru yang perlu Anda buat terlebih dahulu yaitu admin. Program
cetak disimpan dalam direktori admin karena program ini tergolong program administrator situs
yang hanya boleh dibuka oleh pemilik situs.
7. Sebelum melanjutkan membuat program cetak, buat terlebih dahulu file php dan beri nama
koneksi.inc.php serta simpan dalam direktori admin, yang berisi kode:
$host="isi_dengan_nama_host";
$username="isi_dengan_username";
$password="";
mysql_connect($host, $username, $password) or die("Koneksi gagal dibangun");
mysql_select_db("situspersonal") or die("Database tidak dapat dibuka");

52
Perintah-perintah yang ada didalam file koneksi.inc.php ini adalah perintah yang selalu
digunakan setiap kali kita membuat program php. Oleh karena itu, biasanya perintah-perintah
ini disimpan dalam file terpisah lalu dipanggil dari file php yang membutuhkannya.
Hapus perintah-perintah yang sama dalam file simpan_kontak.php dan ganti dengan perintah:
include “admin/koneksi.inc.php”;
Perintah ini akan memuat isi file koneksi.inc.php kedalam file simpan_kontak.php sehingga
dapat digunakan olehnya.
8. Pada file cetak.php tulis kode berikut:
<?php
include "koneksi.inc.php";
$sql="select * from kontak order by nama;";
$qry=mysql_query($sql) or die("Proses cetak gagal");
echo "<table width='75%' cellpadding='2' cellspacing='0' border='1'>
<tr>
<th>No</th>
<th>Nama</th>
<th>Email</th>
<th>Alamat</th>
<th>Kota</th>
<th>Pesan</th>
<th></th>";
$no=1;
while($hasil=mysql_fetch_row($qry)){
echo "<tr>
<td>$no</td>
<td>$hasil[0]</td>
<td>$hasil[1]</td>
<td>$hasil[2]</td>
<td>$hasil[3]</td>
<td>$hasil[4]</td>
<td>$hasil[5]</td>
</tr>";
$no++;
}
echo "</table>";
?>
<a href="index.html">Kembali</a>

Tugas
Cari di Internet program login. Setelah diperoleh ganti namanya dengan index.php dan simpan dalam
direktori admin. Buatkan tabel mysql yang diperlukan oleh program login ini dalam database Anda.
Modifikasi kodenya agar Jika program login ini dijalankan kemudian diisi dengan username

53
dan password yang benar, maka akan menampilkan program cetak.php milik Anda. Jadi program
cetak.php milik Anda hanya bisa dibuka melalui program login.

54

Anda mungkin juga menyukai