DASAR-DASAR HTML
Padap pertemuan ini akan dipelajari tentang HTML (hypertext markup language)
merupakan salah satu format yang digunakan dalam dokumen dan aplikasi yang
berjalan di web browser. Karena itu, untuk bisa melakukan pemrograman aplikasi di
atas web Anda harus terlebih dahulu menguasai HTML. Walaupun sekarang telah
banyak terdapat tool yang dapat Anda gunakan untuk membuat halaman secara
WYSIWYG (what you see is what you get) seperti Frontpage dan Netscape Editor,
namun Anda tetap harus menguasai HTML terutama untuk membuat aplikasi
TIU:
T IK :
mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen-
dokumen web yang ditulis atau berformat HTML (hypertext markup language).
teks biasa untuk ditampilkan pada program web browser. Hal ini dilakukan dengan
menambahkan elemen atau sering disebut sebagai tag-tag pada file teks biasa tersebut.
Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai dengan simbol
< dan >. Pasangan dari sebuah tag ditandai dengan tanda /. Misalnya pasangan dari tag
<contoh> adalah </contoh>. Dalam hal ini <contoh> kita sebut sebagai elemen dan
biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi
misalnya elemen <contoh> bila ditulis dengan atributnya adalah sebagai berikut : <contoh
tidaklah case sensitive artinya penggunaan huruf kecil ataupun kapital tidaklah menjadi
masalah.
Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut :
<html>
<head>
</head>
<body>
Berisi tentang text, gambar, atau apapun yang ingin anda
</body>
</html>
Seperti terlihat, struktur file HTML diawali dengan sebuah tag <html> dan ditutup
dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit
oleh tag <head> ... </head> dan tag <body> ... </body>.
Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan
tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <title> ... </title>
yang berfungsi untuk mengeluarkan judul pada title bar window web browser. Tag lain
Bagian kedua, yang diapit oleh tag BODY merupakan bagian yang akan
ditampilkan pada halaman web browser nantinya. Pada bagian ini Anda akan menuliskan
semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin
<body>. Sebagai contoh adalah pengaturan warna latar belakang halaman, warna teks,
Dalam pengaturan warna menggunakan kode RGB yan mana ditampilkan dalam
nilai heksadesimal. Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari
kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti
tidak ada warna merah dalam kombinasi warna. Berikut ini adalah contoh kode warna :
Warna Heksadesimal
White #FFFFFF
Black #000000
Red #FF0000
Green #00FF00
Blue #0000FF
Magenta #FF00FF
Cyan #00FFFF
Yellow #FFFF00
Aquamarine #70DB93
Chocolate #5C3317
Violet #9F5F9F
Brass #B5A642
Copper #B87333
Pink #FF6EC7
Orange #FF7F00
purple)
Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari suatu
halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading.
Ada tujuh buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h7>.
Tag paragrap berfungsi layaknya untuk pengaturan antar paragrap dalam halaman
yang berfungsi sebagai pengaturan perataan paragrap. Anda dapat memilih perataan kiri,
Elemen Break berfungsi untuk memberikan baris baru suatu paragrap dalam
halaman web anda. Elemen break tidak memerlukan elemen penutup break.
Elemen <hr> berfungsi untuk menampilkan garis horisontal di dalam halaman web
Font pada halaman HTML dapat diformat sesuai dengan desain yang anda
Elemen List
Propertis <li> digunakan untuk menampilkan informasi dalam bentuk daftar (list).
Ada dua jenis daftar yang dikenal di HTML, yaitu list dalam format bullet (unordered list
Ordered list
Unordered list
TYPE = [ disc | square | circle ] (bullet style, default disc)
Anda dapat menampilkan gambar dalam halaman HTML, format filenya berupa
<IMG SRC=namafilegambar>
<html>
<head>
<title>latihan 05</title>
</head>
<body>
</body>
</html>
Elemen link berfungsi sebagai penghubung antara suatu halaman dengan halaman
lain, atau ke URL lain bahkan dalam satu halaman untuk berpindah ke sub judul yang lain.
Link berfungsi untuk melompat ke halaman lain pada web atau ke URL lain
..
<ol>
<li><A HREF=../motor/sity>nginjhen</A>
<li><A HREF=togar.html>togar</A>
</ol>
Pada contoh diatas apabila anda mengklik supra cup maka akan di link ke
www.honda.com. dan apa bila anda mengklik togar maka akan di link ke halaman
togar.html
Link satu halaman
Untuk membuat link pada satu halaman, digunakan kombinasi tag <A
NAME=tujuan1>... </A> dengan tag <A HREF=#tujuan1> ... </A>. Contohnya jika Anda
maka bagian lain pada dokumen Anda dapat membuat link ke bagian di atas dengan tag
sebagai berikut:
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri
atas baris dan kolom. Untuk menampilkan data dalam bentuk tabel pada HTML,
digunakan tag <table> ... </ table >. Elemen tabel berisi properti <tr> ... </tr> untuk
menentukan baris (table row) yang di dalamnya terdapat properti <td> ... </td> untuk
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
group)
Form HTML merupakan tag yang paling penting khususnya dalam membuat
aplikasi berbasis web. Form menyediakan properti masukan yang dapat berupa textbox,
Untuk mendeklarasikan sebuah form digunakan tag <form> ... </form>. Di dalam
tag ini kita akan mendefinisikan elemen-elemen form seperti yang telah disebutkan di atas.
Selain tag elemen form kita juga dapat menuliskan sembarang teks, tag, image.
Digunakan untuk mengirim data ke suatu aplikasi yang tidak kita inginkan untuk
Check box digunakan untuk dapat memilih lebih dari satu pilihan.
Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan
nilainya ke suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen
FORM.
<html>
<head><title>latihan form</title></head>
<body>
<p>
<select name=pekerjaan>
<option value=mahasiswa>mahasiswa
<option value=pelajar>pelajar
<option value=peg_negeri>peg_negeri
<option value=presiden>presiden
<option value=menteri>menteri
</select>
<p>Anggota :
<p>
</form>
</body>
<html>
Latihan SOAL
Latihan 01 :
<html>
<head>
<title>latihan 01</title>
</head>
<h3>Alat Tulis</h3>
<h3>Buku-Buku Pelajaran</h3>
<h3>Alat Kantor</h3>
</body>
</html>
Latihan 02 :
<html>
<head>
<title>latihan 02</title>
</head>
<h3>Alat Tulis</h3>
<p>pensil<br>ballpoint<br>penggaris<br>dll.</p>
<h3>Buku-Buku Pelajaran</h3>
<p>ilmu pasti<br>ilmu bumi<br>sejarah<br>dll.</p>
<h3>Alat Kantor</h3>
<p>meja<br>kursi<br>file manager<br>dll.</p>
</body>
</html>
latihan 03 :
<html>
<head>
<title>latihan 03</title>
</head>
<h1 align=center>
</h1>
<p align=center>pensil<br>ballpoint<br>penggaris<br>dll.</p>
</body>
</html>
Latihan 04 :
<html>
<head>
<title>latihan 04</title>
</head>
<h2>Alat Tulis</h2>
<ol>
<li>pensil
<li>ballpoint
<li>penggaris
<li>dll.
</ol>
<h2>Buku-Buku Pelajaran</h2>
<ol type=A>
<li>ilmu pasti
<ul>
<li>Fisika
<li>kimiya
<li>biyologi
</ul>
<li>ilmu bumi
<li>sejarah
<li>dll.
</ol>
<h2>Alat Kantor</h2>
<ol type=i>
<li>meja
<li>kursi
<ul type=square>
<li>kusi lipat
<li>kursi plastik
<li>kursi-kursian
</ul>
<li>file manager
<li>dll.
</ol>
</body>
</html>
latihan 05 :
<html>
<head>
<title>latihan 05</title>
</head>
<body>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
MATERI II - IV
Pada pertemuan ini akan dipelajari tentang pengaturan tampilan atau desain pada
web. Salah satu tool yang digunakan untuk pengaturan tersebut adalah perangkat
penting dalam pembuatan suatu halaman web, seperti Layout View yang
memungkinkan para designer halaman web dapat langsung menempatkan table dan
sel di halaman webnya. Juga terdapat beberapa fungsi tambahan seperti team
TIU:
dengan dreamweaver.
T IK :
sintaknya.
Mengenal Dreamweaver
Beberapa waktu yang lalu, tool yang digunakan untuk membuat suatu halaman web dibagi
menjadi 3 jenis, yaitu: editor HTML berbasis teks, editor yang mengkombinasikan
tampilan grafik WYSIWYG (What You See Is What You Get) dengan tampilan kodenya,
dan editor yang benar-benar berbasis grafik. Tiap-tiap jenis editor tersebut memiliki grup
penggemarnya sendiri, para programmer, para webmaster part-time, dan para grafik
Dreamweaver mempunyai beberapa fungsi penting dalam pembuatan suatu halaman web,
seperti Layout View yang memungkinkan para designer halaman web dapat langsung
menempatkan table dan sel di halaman webnya. Juga terdapat beberapa fungsi tambahan
Pada bab ini, kita akan menggunakan Macromedia Dreamweaver MX versi 6.0. Yang
Bila kita membuat sebuah halaman web dengan Dreamweaver, maka selain document
window, kita juga akan bekerja dengan tiga toolbar dan panel utama, yaitu: Insert Bar,
Catatan: Jika Insert Bar dan Property Inspector tidak tampil pada Dreamweaver, maka
Document window: menampilkan dokumen atau halaman web yang sedang kita buat.
Pada bagian bawah dari Document window, kita bisa melihat nama file dari semua
dokumen yang sedang kita buka. Dengan meng-klik nama file tersebut maka kita akan
Insert Bar terdiri dari beberapa macam icon untuk memasukkan berbagai macam objek
web seperti gambar, layer, dan tabel. Insert Bar ini terdiri dari beberapa tab yang masing-
Property Inspector menampilkan property dari objek yang kita pilih didalam dokument.
Dreamweaver dapat menampilkan dokumen dalam tiga cara: Design View, Code View,
Tampilan dari Design View sama seperti bila kita menampilkannya dengan web browser
Pada Code View, kita bisa mengedit langsung halaman web kita dengan menuliskan
kode HTML, javascript, PHP, ASP, dan berbagai macam kode-kode yang lain. Tidak
terlalu diperlukan untuk bekerja dengan Code View ini, karena hampir semua fungsi yang
kita perlukan untuk membuat suatu halaman web dapat di buat lewat Design View.
Sedangkan pada Code and Design View, kita bisa melihat Code View dan Design
Pengaturan Site
Suatu website merupakan kumpulan dari beberapa dokumen yang saling berhubungan
(linked). Dengan Dreamweaver kita dapat membuat dan mengelola suatu dokumen
website, termasuk memperbaikinya. Dokumen adalah halaman yang dilihat user ketika
mereka mengunjungi website kita. Dokumen bisa berisi teks, gambar, suara, animasi, dan
Dreamweaver menampilkan suatu site sebagai kumpulan dari file-file yang terdapat
didalamnya. Kumpulan file ini bisa dilihat pada Site Panel yang secara default berada di
Untuk memulai membuat website, kita buat suatu site pada Dreamwever dengan
mengklik link Define a Site pada Site Panel. Kemudian akan muncul wizard untuk
Dibawah ini adalah beberapa langkah untuk mendefinisikan suatu site, yaitu:
1. Langkah pertama: kita diminta untuk mengisikan nama dari website kita.
2. Langkah kedua: terdapat pilihan apakah kita akan menggunakan server technology
3. Langkah ketiga: ada 3 pilihan untuk meletakkan file-file dari website kita.
Window terakhir yang muncul adalah summary dari site yang telah kita buat. Setelah
kita mengklik tombol Done, maka website kita langsung akan dibuat.
Gambar 10.7. Langkah terakhir sebagai summary dokumen web yang dibuat.
Catatan: pada topik kali ini kita akan memfokuskan pada pembuatan suatu website secara
offline.
Setelah semua langkah tersebut kita lakukan, maka pada pada Site Panel akan tampil
Membuat Folder
Dreamweaver menyediakan tampilan visual dari website kita melalui Site Panel. Website
akan lebih mudah dikelola dan manajemen jika kita mengatur file-file kedalam folder-
folder. Contoh, kita buat dua folder yang, yaitu folder images untuk meletakkan file-file
Untuk itu perlu adanya manajemen file pada dokumen web yang kita buat melalui
pembuatan folder.
1. Klik kanan pada folder site kita (misal: My Website), kemudian pilih New Folder.
2. Ketikkan nama folder yang kita buat (misal: images) kemudian tekan Enter.
Dalam suatu website, kita bisa mempunyai satu atau lebih file dokumen. File dokumen ini
yang biasa juga disebut sebagai page. Bila kita mengakses suatu website, biasanya file
dokumen yang pertama kali akan diakses adalah file index.htm (tergantung dari setting di
Web server). Untuk itu, simpan file dokumen web pertama kali anda dengan nama
index.htm.
1. Klik kanan pada folder site kita (misal: My Website), kemudian pilih New File.
2. Ketikkan nama file yang kita buat (misal: index.htm) kemudian tekan Enter.
Untuk mulai bekerja dengan file yang telah kita buat, kita bisa me-double-klik pada nama
Untuk mengganti title dari website kita, bisa kita isikan pada edit box tittle pada
Title tersebut akan tampil pada bagian paling atas dari web browser bila kita
Memasukkan teks ke dalam dokumen yang kita buat menggunakan Dreamweaver sangat
mudah. Setelah dokumen kita buka, tempatkan kursor pada Document Window dan kita
Bila kita ingin memformat teks yang sudah kita masukkan, caranya adalah dengan
memblok teks tersebut, kemudian ubah properti dari teks tersebut dengan menggunakan
Ada beberapa properti dari teks yang bisa kita atur menggunaka panel Property Inspector
tersebut. Yaitu: format teks, ukuran, bentuk huruf, warna, ketebalan, alignment, bullet dan
Ada banyak sekali objek yang bisa kita masukkan ke dokumen web kita, gambar, tabel,
frame, form, flash, dan banyak lagi yang lainnya. Pada Dreamweaver, objek-objek itu
dapat kita masukkan kedalam dokumen web kita dengan sangat mudah. Pilih pada Insert
Bar, objek apa yang kita inginkan, kemudian klik dan kita tinggal mengikuti instruksi
yang ditampilkan oleh Dreamweaver. Teks pada dokumen web kita juga dianggap sebagai
Untuk memasukkan suatu objek kedalam halaman web kita juga bisa dilakukan dengan
mengklik menu Insert kemudian pilih objek yang akan kita masukkan kedalam halaman
web kita.
Sedangkan untuk mengedit objek yang sudah berada pada dokumen web kita, bisa kita
lakukan dengan mengklik objek tersebut kemudian kita bisa mengubah propertynya pada
Property Inspector, sesuai dengan yang kita inginkan. Property yang dapat kita ubah
pada Property Inspector akan berbeda-beda, tergantung dari jenis objek yang akan kita
edit.
Kita juga bisa menggunakan klik kanan mouse pada suatu objek untuk menampilkan
daftar menu favorit yang bisa kita pilih, sesuai dengan objek yang bersangkutan.
Kita juga bisa menggunakan objek layer sebagai tempat dari teks kita. Sehingga kita bisa
dengan mudah untuk memformat dan memindah-mindahkna teks kita tersebut. Untuk
menggambar suatu layer bisa dilakukan dengan memilih menu Insert Layer, atau
Page Properties
Ketika pertama kali kita memulai Dreamweaver, halaman web kita secara default
mempunyai title Untitle Document dan tidak mempunyai background. Kita bisa
Caranya adalah dengan mengklik menu Modify, kemudian pilih Page Properties. Atau
bisa juga dengan menggunakan mouse, caranya: taruh kursor mouse pada dokumen kita,
Pada Page Properties kita bisa mengedit banyak hal yang berhubungan dengan halaman
web kita, seperti warna latar belakang dokumen, warna teks, gambar pada latar belakang,
Membuat Tabel
Penggunaan tabel sangat berguna untuk pengaturan data. Tabel juga bisa digunakan untuk
mengontrol dimana harus meletakkan gambar dan teks pada halaman web. Dengan tabel
juga memungkinkan kita untuk memodifikasi isi dari tiap sel pada tabel. Atau kita bisa
memblok beberapa sel, kolom, atau baris yang ingin kita atur dengan setting yang sama.
Kita bisa mengontrol hampir semua fitur dari suatu tabel menggunakan Property
Inspector. Untuk memasukkan tabel kedalam dokumen web kita, bisa dilakukan dengan
cara memilih menu Insert Table atau dengan memilih icon Insert Table pada panel
Insert Bar Tables. Kemudian akan muncul kotak dialog untuk memasukkan tabel
dimana kita bisa mendefinisikan beberapa parameter disini (misal: jumlah baris, jumlah
kolom, dll).
Merge Tabel
Untuk menggabungkan antar cell dalam tabel, dapat dilakukan melalui langkah berikut:
Pada Dreamweaver, kita bisa menambahkan link yang menghubungkan antar halaman
web pada website kita, link ke website lain, maupun link ke file dokumen dengan cara
Untuk membuat suatu link, baik link ke halaman web maupun link ke file dokumen
1. Pilih teks, gambar, atau objek yang ingin kita jadikan sebagai link.
2. Pilih menu Modify Make Link akan muncul kotak dialog Select File.
3. Ketikkan alamat URL dari tujuan link kita kedalam teks box URL atau dengan
memilih file menggunakan kotak browser yang ada. Setelah selesai klik OK.
Catatan: Bila file yang kita pilih berada diluar dari folder root dari website kita
maka akan muncul dialog yang menanyakan apakah kita akan mengcopy file
Berikut ini latihan dasar HTML, dimana design interface meliputi font, warna,
paragraph, background, dan isi halam web ini, dipersilahkan mahasiswa untuk
Foto
Identitas
Deskripsi lain
2. Buatlah halaman web untuk kumpulan informasi data mahasiswa yang terdiri dari
3 frame, dimana frame paling atas untuk header dan logo universitas, frame paling
kiri untuk list nama-nama mahsiswa yang memiliki link untuk detail identitas
frame sebelah
kanan
MATERI IV
PENGENALAN CSS
Pada pertemuan ini akan dipelajari tentang pengaturan tampilan atau desain pada
web dengan style CSS. CSS (Cascading Style Sheets) digunakan dalam kode HTML
untuk menciptakan suatu kumpulan style yang terkadang dapat digunakan untuk
TIU:
CSS
T IK :
secara sederhana.
A. DASAR TEORI
setiap sel dan bahkan tag <BASEFONT> pun tak berpengaruh pada sel-sel tabel.
Misalnya diinginkan untuk mengatur ukuran font pada setiap sel sebesar 2. Dengan
menggunakan CSS, anda hanya perlu mendefinisikan style sekali saja dan style
sheet menggunakan Css. Oleh karena itu, dalam tag <style> terdapat atribut
TYPE dengan nilai berupa teks/CSS. Pasangan tag tersebut harus diletakkan
dalam pasangan tag <HEAD> dan </HEAD>. Umumnya setelah tag <TITLE>
dan </TITLE>.
2. Pasangan <!dan -->merupakan komentar dalam HTML. Biasa digunakan
dengan tujuan agar sekiranya browser tidak mendukung atau tidak mengenali
style sheet maka yang terdapat dalam pasangan tersebut akan diabaikan, tetapi
penulisan pasangan ini tidak diharuskan. Dan yang berada dalam pasangan ini
seperti dibawah:
nama_tag {properti_1:nilai_1;.....;properti_n:nilai_n}
Selektor biasanya adalah elemen HTML / tag yang Anda inginkan untuk
mendefinisikan, properti adalah atribut yang ingin Anda ubah, dan setiap properti dapat
mengambil nilai. Properti dan nilai dipisahkan dengan tanda titik dua, dan dikelilingi oleh
body {color:black}
Jika Anda ingin menentukan lebih dari satu properti, Anda harus memisahkan
p { text-align:center;color:red }
Dengan kelas selektor Anda dapat menetapkan berbagai gaya dalam elemen
HTML, misalkan Anda ingin memiliki dua tipe paragraf dalam dokumen Anda,
yang pertama paragraf dengan format rata kanan, dan yang kedua paragraf rata
p.right {text-align:right}
Anda harus menggunakan atribut class dalam dokumen HTML Anda seperti
p.center {text-align:center}
berikut:
#nama_ID{properti_1:nilai_1;....;properti_n:nilai_n;}
Pada pendefinisian ini, awalan # selalu digunakan
Contoh: membuat style bernama tebal yang mengatur teks agar dalam
#tebal { font-weight:bold;color:blue;}
LATIHAN SOAL
1. Bukalah lembar kerja baru dengan menggunakan notepad/ textpad lalu ketikkan
script berikut:
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}
Simpan file tersebut dengan nama ex1.css. lalu ketikkan script dibawah, simpan
<html>
<head>
<link rel="stylesheet"
</head>
<body>
</body>
</html>
Jalankan file.htm di browser
<html>
<head>
<style type="text/css">
h1
{
background-color:#FF0000;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>Contoh background Css</h1>
<div>
Ini text yang menggunakan tag div
<p>Ini paragraf yang mempunyai background</p>
Ini masih di tag div
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
p.normal {font-style:normal}
p.italic {font-style:italic}
</style>
</head>
<body>
<p class="normal">Ini paragraf, dengan font normal.</p>
<p class="italic">Ini paragraf, dengan font miring.</p>
</body>
</html>
<html>
<head>
<style>
h1 {font-size:40px}
h2 {font-size:30px}
p {font-size:14px}
</style>
</head>
<body>
</body>
</html>
sesuai keinginan)
KASUS
Buatlah file html yang ada sintaks Cssnya untuk membuat halaman web seperti
tampilan di bawah:
Keterangan:
Header dengan teks rata tengah, dan warna teks biru.
Satu bagian paragraf dengan format teks rata kanan, dan satu bagian paragraf lain
B. TUGAS
Dari tugas modul 2, Aturlah tabel anda tersebut pada tag <table>, <tr>, <td>, <th>
(tergantung tag yang anda pakai) yang diatur dalam Css baik mengenai pengaturan
MATERI VI
JAVASCRIPT
Pada pertemuan ini akan dipelajari tentang javascript pada web. Javascript
adalah bahasa yang berbentuk kumpulan script yang pada fungsinya berjalan
pada suatu dokumen HTML. Bahasa ini merupakan bahasa pertama untuk web.
TIU:
T IK :
3. Mahasiswa mampu membuat halaman web dengan disisipkan javascript
didalamnya.
JavaScript
Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya
pengembangannya yangterkesan buru buru dan tidak ada pesan kesalahan yang di
tampilkan setiap kali kita membuatkesalahan pada saat menyusun suatu program.
berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatudokumen HTML,
sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web.Bahasa ini
browser(navigator) yang memanggil halaman web yang berisi skripskrip dari Javascript
dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan
user/klien.Versi Javascript
dan fungsi yang menggunakan huruf besar dan huruf kecil, contoh variabel atau fungsi
dengan nama TEST berbeda dengan variabel dengan namatest. Dan yang terakhir
seperti bahasa Java ataupun C, setiapinstruksi diakhiri dengan karakter titik koma (;).
Java script adalah suatu script yang diinsetkan kedalam HTML sebagai script.
Tag HTML untuk memperkenalkan bahwa kode-kode adalah java script adalah :
<Script Language=Javascript>
</Script>
Isi kode java script dapat berupa statemen-statemen java script yang tidak
document.write(teks).
Seperti dalam bahasa pemrograman Java, javascript juga case sensitif dimana huruf
TIPE DATA pada javascript yaitu: string, number, boolean, null, object dan
function
+ , -- ) dan Operator logika ( && , || , ! , == , != , > , < , >= , <= ), penggunaan dari
harus). Tidak dibedakan apakah variabel itu bilangan(int, float) atau string. Contoh
Comentar
Simbol untuk mendefinisikan komentar dalam javascript yaitu // atau /* ....*/
Kondisi
Switch-case
getMinutes()
getSeconds()
name=>
Selanjutnya dalam form dapat diletakkan komponen GUI seperti TextField atau
button dengan:
<input type=>
Pada button didefinisikan kode javascript yang akan mengambil data dari form dan
memprosesnya
Hasil proses ditampilkan kembali melalui form
<body>
<script type="text/javascript">
...
</script>
</body>
</html>
Contoh:
<html>
<body>
<script type="text/javascript">
document.write("Belajar Javascript")
</script>
</body>
</html>
1. Head section
Format penulisan:
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
Contoh:
<html>
<head>
<script type="text/javascript">
function message()
</script>
</head>
<body onload="message()">
</body>
</html>
2. Body section
Format penulisan:
<html>
<head>
</head>
<body>
<script type="text/javascript">
</body>
</html>
3. External script
Contoh:
<html>
<head>
<script src="xxx.js"></script>
</head>
<body>
</body>
</html>
atau
Namavar = value
Contoh:
<html>
<body>
<script type="text/javascript">
var name = "Hege"
document.write(name)
document.write("<h1>"+name+"</h1>")
</script>
</body>
</html>
Di dalam bahasa JavaScript kita dapat membuat kotak pesan popup. Kotak pesan
1. Alert box
3. Confirm box
4. Prompt box
Alert Box
Alert box di gunakan untuk memberikan informasi pesan kepada user dan bila user
yakin dengan pilihannya. Alert box ini mempunyai satu tombol OK untuk melanjutkan
proses.
Syntax:
alert("sometext")
Contoh:
<html>
<head>
<script type="text/javascript">
function disp_alert()
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!")
</script>
</head>
<body>
</body>
</html>
Confirm Box
Confirm box biasanya di gunakan jika kita ingin memberikan penyataan kepada
user untuk memberikan pilihan jawaban apakah akan terus di lanjutkan atau di batalkan.
Kotak confirm box memberikan dua tombol pilihan kepada user berupa tombol OK dan
tombol Cancel. Jika pilihan tombol OK maka halaman web akan diproses jika pilihan
Syntax:
confirm("sometext")
Contoh:
<html>
<head>
<script type="text/javascript">
function disp_confirm()
if (r==true)
else
</script>
</head>
<body>
</body>
</html>
Prompt Box
Prompt box biasanya di gunakan untuk memberikan pesan kepada user agar user
memberikan inputan sebelum halaman web itu diproses. Ketika prompt box muncul, dan
user diminta untuk mengklik tombol awal yang kemudian akan muncul box yang harus di
Setelah di input kemudian user mengklik tombol "OK" atau "Cancel". Untuk
melanjutkan proses pilih tombol OK dan browser akan menampilkan hasil. Jika tombol
Syntax:
prompt("sometext","defaultvalue")
Contoh:
<html>
<head>
<script type="text/javascript">
function disp_prompt()
</script>
</head>
<body>
</body>
</html>
Fungsi merupakan blok kode yang akan di jalankan pada saat nama function itu
jalankan oleh event tertentu atau pada saat function itu di panggil. Fungsi ini juga dapat di
Function juga bisa di panggil di halaman web mana saja dengan cara kita
membuat file external berupa file .JS (extention file javascrip). Yang berisi syntak
javascript. File itu kita panggil pada halaman web yang yang mau sisipkan javacscript.
Function dapat di definisikan di bagian <head> dan bagian <body> dari halaman
web. Jika kita menginginkan script itu di panggil pada saat halaman web di load maka kita
<html>
<head>
<script type="text/javascript">
function displaymessage()
alert("Hello World!")
</script>
</head>
<body>
<form>
</form>
</body>
</html>
Output dari scrip di atas adalah akan muncul tombol yang harus di clik bila ingin
kode teks
Keterangan:
Nilai fungsi harus di awali dan di akhiri dengan tanda kurung kurawal. { }
Bila variable, parameter atau nilai tidak ada maka tanda kurung harus tetap di
gunakan.()
Di sarankan untuk tidak menggunakan huruf capital pada javascript lebih baik
gunakan huruf kecil semua. Untuk nama fungsi, nama variable, parameter dan lainya
Contoh:
function prod(a,b)
x=a*b
return x
}
Jenis Fungsi:
1. Function Basic
How to pass a variable to a function, and use the variable in the function.
How to pass variables to a function, and use these variables in the function.
How to let the function find the product of two arguments and return the result.
Contoh Fungsi:
<html>
<head>
<script type="text/javascript">
function myfunction()
alert("HELLO")
</script>
</head>
<body>
<form>
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
alert(txt)
</script>
</head>
<body>
<form>
</form>
</body>
</html>
Output:
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
alert(txt)
</script>
</head>
<body>
<form>
</form>
</body>
</html>
Output:
<html>
<head>
<script type="text/javascript">
function myFunction()
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(myFunction())
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function product(a,b)
return a*b
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3))
</script>
3).</p>
</body>
</html>
Latihan
Event handler
<html>
<head>
</head>
<body>
Disini</a>
</body>
</html>
2. Buatkan Program dengan tampilan sbb :
a.
MATERI VII DAN IX
Pada pertemuan ini akan dipelajari tentang Mysql dan desain database. Database
adalah sekumpalan informasi yang diatur agar mudah dicari. Dalam arti umum
basis data adalah sekumpulan data yang diproses dengan bantuan komputer yang
memungkinkan data dapat diakses dengan mudah dan tepat, yang dapat
digambarkan sebagai aktifitas dari satu atau lebih organisasi yang berelasi.
TIU:
T IK :
Mysql.
Basis data adalah sekumpalan informasi yang diatur agar mudah dicari. Dalam arti
umum basis data adalah sekumpulan data yang diproses dengan bantuan komputer yang
memungkinkan data dapat diakses dengan mudah dan tepat, yang dapat digambarkan
sumber daya penting yang setara dengan sumber daya manusia, uang, mesin dan material.
Informasi adalah suatu bentuk penyajian data yang melalui mekanisme pemrosesan,
berguna bagi pihak tertentu misalnya manajer. Bagi pihak manajemen, informasi
Sedangkan RDBMS sendiri akan lebih banyak mengenal istilah seperti tabel, baris dan
data yang mengandung satu atau sejumlah tabel. Tabel terdiri atas sejumlah baris dan
setiap baris mengandung satu atau beberapa kolom. Didalam PHP telah menyediakan
fungsi untuk koneksi ke basis data dengan sejumlah fungsi untuk pengaturan baik
8.1.1. Pengertian
Database MYSQL merupakan sistem manajemen basis data SQL yang sangat
terkenal dan bersifat Open Source. MySQL dibangun, didistribusikan dan didukung oleh
pengembang MYSQL.
bersifat open source dengan menggunakan GNU General Public Lisensi dan lisensi kedua
berupa lisensi komersial standar (standard commercial license) yang dapat dibeli dari
MYSQL AB.
merupakan struktur penyimpanan data. Untuk menambah, mengakses dan memproses data
yang disimpan dalam sebuah database komputer, diperlukan sistem manajemen database
seperti MYSQL Server. Selain itu MYSQL dapat dikatakan sebagai basis data terhubung
(RDBMS). Database terhubung menyimpan data pada tabel-tabel terpisah. Hal tersebut
Server database MYSQL mempunyai kecepatan akses tinggi, mudah digunakan dan
andal. MYSQL dikembangkan untuk menangani database yang besar secara cepat dan
telah sukses digunakan selama bertahun-tahun sehiingga membuat server MYSQL cocok
untuk mengakses database diinternet. Dan MYSQL juga merupakan sistem client-server
yang terdiri atas multithread SQL Server yang mendukung software client dan library yang
berbeda.
Fitur utama MYSQL adalah ditulis dalam bahasa C dan C++, bekerja dalam berbagai
yang dapat ditempelkan pada aplikasi yang berdiri sendiri sehingga aplikasi tersebut dapat
digunakan pada komputer yang tidak mempunyai jaringan dan mempunyai sistem
password yang fleksibel dan aman, dapat menangani basis data dalam skala besar.
Data yang terdapat dalam sebuah tabel berupa field-field yang berisi nilai dari data
tersebut. Nilai data dalam field memiliki tipe sendiri-sendiri. MYSQL mengenal beberapa
Tipe data numerik dibedakan dalam dua macam kelompok, yaitu integer dan floating
point. Integer digunakan untuk data bilangan bulat sedangkan floating point digunakan
untuk bilangan desimal. Tipe data numerik selengkapnya dapat dilihat pada tabel 8.1
berikut ini:
1.79E+308
String adalah rangkaian karakter. Tipe-tipe data yang termasuk dalam tipe data string
Tipe data char() dan varchar() pada prinsipnya sama, perbedaannya hanya terletak
dibutuhkan untuk tipe data char() bersifat statis, besarnya bergantung pada berapa
jumlah karakter yang ditetapkan pada saat field tersebut dideklarasikan. Pada tipe data
Penyimpanan Penyimpanan
4 bytes 1 byte
ab ab 4 bytes ab 3 bytes
abcd abcd 4 bytes abcd 5 bytes
abcdefgh abcd 4 bytes abcd 5 bytes
Untuk tanggal dan jam, tersedia tipe-tipe data field berupa DATETIME, DATE,
tertentu. MYSQL akan memberikan peringatan kesalahan (error) apabila tanggal atau
waktu yang dimasukkan salah. Kisaran nilai dan besar memori penyimpanan yang
diperlukan untuk masing-masing tipe dapat dilihat pada tabel 8.4 berikut ini:
Penyimpanan
DATETIME 1000-01-01 00:00 sampai 9999-12-31 3 byte
23:59:59
DATE 1000-01-01 sampai 9999-12-31 8 byte
TIMESTAMP 1970-01-01 00:00:00 sampai 2037 4 byte
TIME -839:59:59 sampai 838:59:59 3 byte
YEAR 1901 sampai 2155 1 byte
Operator Aritmetika
Suatu ekspresi yang melibatkan tipe data bilangan (NUMERIK) dan tanggal (DATE)
menggunakan ekspresi aritmatika. Dapat dilihat pada tabel 8.5 berikut ini:
Tabel 8.5 Operator aritmatika MYSQL
Operator Keterangan
+ Tambah
- Kurang
* Kali
/ Bagi
Mod () Modulus
Contoh:
Operator Pembandingan
Suatu ekspresi yang dapat digunakan pada klausa WHERE dan mempunyai sintax
sebagai berikut: WHERE expr operator value. Tabel 8.6 menunjukan operator
Operator Keterangan
= Sama Dengan
> Lebih Besar
< Lebih Kecil
>= Lebih Besar atau Sama Dengan
<= Lebih Kecil atau Sama Dengan
<> Tidak Sama Dengan
Contoh:
Operator Logika
Operator ini digunakan untuk membandingkan dua nilai variabel yang bertipe boolean.
Operator Keterangan
AND Dan
OR Atau
NOT Tidak
Contoh:
Operator Karakter
Operator untuk membentuk pencarian string yang sesuai dengan nilai yang
mencantumkan pada kondisi. Kondisi pencarian dapat berisi karakter , ada 3 symbol
khusus berikut ini dapat dilihat pada tabel 8.8 berikut ini:
Operator Keterangan
% Sembarang karakter berapapun jumlahnya
_ Sembarang satu karakter
[] Sembarang karakter yang terletak dalam kurung siku
Contoh:
Operator Lain-lain
Operator yang digunakan untuk menguji nilai-nilai yang ada dalam list (tanda kurung)
dan dapat juga untuk menampilkan baris berdasarkan suatu jangkauan (range) nilai.
Ada 2 symbol tersebut dapat dilihat pada tabel 8.9 berikut ini:
Operator Keterangan
IN Dalam
BETWEEN Diantara
Contoh:
Fungsi Agregat
Fungsi agregat (kadangkala disebut fungsi grup atau fungsi ringkasan) adalah fungsi
yang disedikan oleh SQL untuk menghasilkan sebuah nilai berdasarkan sejumlah data.
Fungsi sendiri adalah seuatu kumpulan instruksi yang menghasilkan sebuah nilai jika
dipanggil. Fungsi ini juga digunakan pada data numeric untuk menghitung nilai baik
rata-rata dan jumlah dari sekumpulan data maupun pencarian jumlah baris dalam tabel.
Operator Keterangan
COUNT Menghitung jumlah baris suatu field
SUM Menjumlahkan data-data numerik pada suatu tabel
AVG Menghitung rata-rata suatu field
MAX Menghitung nilai maksimum suatu field
MIN Menghitung nilai minimum suatu field
Contoh:
maka dapat melihat, mengubah dan menganalisis data dengan berbagai titik pandang yang
dikehendaki. Selain itu, query juga dapat dipakai sebagai data bagi formulir, laporan dan
Yang dimaksud dengan query pada MYSQL adalah query yang diciptakan dengan
pemrograman yang digunakan untuk mengakses basis data relasional. SQL diciptakan oleh
perusahaan IBM sekitar tahun 1970, pada waktu yang bersamaan dengan
pada masa kini SQL sudah merupakan bahasa yang lazim digunakan dalam dunia
database.
Bahasa SQL dapat digolongkan bahasa generasi ke-4 yang tidak berupa bahasa yang
berstruktur dan beraturan seperti C dan Pascal (golongan bahasa generasi ke-3). Oleh
karena itu bahasa SQL mudah dipelajari. Pernyataan (statement) SQL dapat digolongan
Data Definition Language (DDL) yang mendefinisikan struktur suatu data. Perintah-
Data Manipulation Language (DML) yang dapat mencari (query) dan mengubah
Data Control Language (DCL) yang mengatur hak-hak (privilege) untuk seorang
- GRANT
- REVOKE
diperhatikan pada saat menuliskan perintah-perintah bahasa SQL pada MYSQL adalah:
2. Perintah SQL dapat ditulis dalam satu baris atau dipisah-pisah dalam beberapa baris
3. SQL tidak membedakan huruf besar atau kecil (not case sensitive), tergantung
dimasukkan.
6. Pernyataan SQL dapat diberikan baris komentar untuk dokumentasi serta menjelaskan
maksud pemrograman.
Dengan menggunakan SQL, maka bisa membuat tabel. Pernyataan yang digunakan
......
Sebuah pernyataan pada SQL berupa perintah yang meminta sesuatu tindakan
DBMS. Sebuah pernyataan diakhiri dengan tanda titik koma (;). Seperti:
- PERINTAH SELECT:
SELECT adalah pernyataan yang berguna untuk memperoleh data dari sebuah atau
beberapa table. Dengan dukungan berbagai klausa seperti WHERE dan GROUP BY,
SELECT dapat digunakan untuk memperoleh data dalam bentuk yang sederhana
Contoh:
- PERINTAH INSERT:
Pernyataan INSERT digunakan untuk menambah data. Perintah INSERT dalam SQL
adalah:
INSERT INTO nama table [(nama kolom 1, nama kolom 2, .., nama kolom n)]
Contoh :
- PERINTAH DELETE:
Perintah DELETE digunakan untuk menghapus data pada table. Bentuk umum
pernyataan DELETE :
Contoh:
- PERINTAH UPDATE:
UPDATE :
UPDATE nama table SET kolom 1 = nilai baru 1, kolom 2 = nilai baru 2, ., kolom
Contoh :
- PERINTAH ALTER:
Perintah ini digunakan untuk mengubah (modify) table yang telah dibuat, seperti:
menambah kolom baru, mengubah ukuran kolom, dan mengubah aturan-aturan yang
berlaku untuk suatu kolom. Syntaxnya yang dapat dipakai sebagai berikut:
ALTER TABLE nama table [ADD (nama kolom) MODIFY (nama kolom) DROP
nama constraint ];
Contoh:
- PERINTAH DROP:
Apabila bermaksud untuk menghapus suatu table karena table tersebut tidak
Dengan syntaxnya:
Contoh:
Predikat diletakkan setelah klausa WHERE untuk pencarian record database agar
pencarian yaitu mencari data yang menyerupai atau seperti. Perintah LIKE sering
2. BETWEEN
Digunakan untuk menyeleksi nilai-nilai yang berada dalam kisaran (range), misalnya
menampilkan student yang mempunyai IPK antara 3,00 sampai 3,50. Sintaks
3. LIMIT
4. INNER JOIN
JOIN digunakan bersama SELECT untuk mengkombinasikan kolom dari satu tabel
dengan kolom pada tabel lain. Proses utama yang dilakukan oleh JOIN adalah
mencocokkan nilai pada field kunci pada kedua table. INNER JOIN mengembalikan
5. LEFT JOIN
Suatu LEFT JOIN mengembalikan semua baris sisi kiri kondisional bahkan jika tidak
Suatu RIGHT JOIN akan menampilkan baris-baris sisi kanan kondisional yang
7. UNION
Untuk menggabung dua tabel, menempatkan dua query terpisah secara bersama
membentuk satu table. UNION akan memberikan hasil terbaik saat menggunakan
dua tabel dengan kolom serupa karena setiap kolom harus mempunyai tipe data
UNION
8. UNION ALL
Memilih semua baris dari setiap tabel dan mengkombinasikannya ke dalam satu tabel.
Perbedaan antara UNION dan UNION ALL yaitu UNION ALL tidak akan menghapus
baris dari semua tabel sesuai query yang dikirim ke server database.
9. Sub-Query
Merupakan query SELECT yang ditempatkan di dalam suatu pernyataan SQL lain.
Dapat diletakkan sebagai bagian dari query utama : SELECT, INSERT, UPDATE,
PHP menyediakan fungsi untuk koneksi ke database dengan sejumlah fungsi untuk
MySQL. Fungsi koneksi ke server database mengunakan pola yang sama yaitu server,
1. mysql_connect(host,user,password)
Fungsi ini digunakan untuk membuka koneksi dengan server MySQL. Parameter
Host: nama server dengan server local dapat dengan menggunakan localhost.
User: user yang terdaftar dalam MySQL yang digunakan untuk login ke server.
Contoh:
2. mysql_select_db(nama_database,nama_koneksi)
Fungsi ini digunakn untuk memilih database yang akan digunakan. Contoh:
3. mysql_query(perintah_query,nama_koneksi)
Perintah ini digunakan untuk mengirimkan query ke server database melalui link
nama koneksi. Fungsi ini mengembalikan nilai FALSE baik CREATE, UPDATE, DELETE,
4. mysql_fetch_array(hasil_query)
Fungsi ini digunakan untuk melakukan pembacaan record hasil query yang
dilakukan. Pembacaan ini dilakukan mulai dari record pertama sampai nilai terakhir. Tiap
record dibaca, dibentuk menjadi array dengan index numeric dari 0 sampai dengan n-1 dan
5. mysql_fetch_row(hasil_query)
Fungsi ini mempunyai hampir sama dengan mysql_fetch_array tetapi array hasil
pembacaan data hanya menggunakan index numeris saja yang dimulai dari 0 untuk kolom
6. mysql_result(hasil_query, no_record,nama_field),
Fungsi ini berguna untuk mengambil langsung nilai hasil query pada suatu baris dan
kolom tertentu (satu sel) dengan menyebutkan parameter variabel hasil proses query,
7. mysql_num_field(hasil_query)
8. mysql_num_rows(hasil_query)
Fungsi ini berguna untuk mendapatkan jumlah baris dari hasil query. Menghasilkan
suatu array yang berisi seluruh kolom dari sebuah baris pada suatu himpunan hasil.
Mengambil data secara baris per baris. Data yang diambil dalam bentuk array (elemen
8.5. Kesimpulan
Database MYSQL merupakan sistem manajemen basis data SQL yang sangat terkenal
dan bersifat Open Source. MYSQL mengenal beberapa tipe data field yaitu : Tipe data
numerik, Tipe data string, Tipe data char() dan varchar() serta Tipe data tanggal.
Dengan menggunakan query, maka dapat melihat, mengubah dan menganalisis data
dengan berbagai titik pandang yang dikehendaki. Yang dimaksud dengan query pada
mengakses basis data relasional. Pernyataan (statement) SQL dapat digolongan atas
tiga golongan yaitu: Data Definition Language (DDL), Data Manipulation Language
(DML) dan Data Control Language (DCL). Predikat diletakkan setelah klausa
WHERE untuk pencarian record database agar mendapatkan string, karakter atau
range tertentu. Seperti : LIKE dan Not Like, Between, Limit, Inner Join, Left Join,
Right Join, Union dan lain sebagainya. PHP juga menyediakan fungsi untuk koneksi
Fungsi koneksi ke server database mengunakan pola yang sama yaitu server, port, user,
Latihan Soal
FROM pegawai;
4. Buatlah query untuk menampilkan nama dan gaji dari pegawai yang memiliki gaji
5. Tampilkan nama dan gaji untuk semua pegawai yang memiliki gaji yang tidak berada
MATERI X DAB XI
PENGENALAN PHP
Pada pertemuan ini akan dipelajari tentang PHP. PHP (PHP : Hypertext
untuk membuat halaman web yang dinamis. Karena PHP merupakan server-side
T IK :
1. PENGANTAR PHP
PHP (PHP : Hypertext Preprocessor) adalah bahasa server-side scripting yang menyatu
dengan HTML untuk membuat halaman web yang dinamis. Karena PHP merupakan
server-side scripting maka sintaks dan perintah-perintah PHP akan dieksekusi di server
kemudian hasilnya dikirimkan ke browser dalam format HTML. Dengan demikian kode
program yang ditulis dalam PHP tidak akan terlihat oleh user sehingga keamanan halaman
web lebih terjamin. PHP dirancang untuk membentuk halaman web yang dinamis, yaitu
halaman web yang dapat membentuk suatu tampilan berdasarkan permintaan terkini,
PHP termasuk dalam Open Source Product, sehingga source code PHP dapat dirubah dan
didistribusikan secara bebas. Versi terbaru PHP dapat didownload secara gratis di situs
resmi PHP : http://www.php.net. PHP juga dapat berjalan pada berbagai web server
seperti IIS (Internet Information Server), PWS (Personal Web Server), Apache, Xitami,
dll. PHP juga mampu lintas platform. Artinya PHP dapat berjalan di Sistem Operasi
Windows dan beberapa versi Linux, dan PHP dapat dibangun sebagai modul pada web
server Apache dan sebagai binary yang dapat berjalan sebagai CGI (Common Gateway
Interface). PHP dapat mengirim HTTP header, dapat mengatur cookies, mengatur
Salah satu keunggulan yang dimiliki oleh PHP adalah kemampuannya untuk melakukan
koneksi ke berbagai macam software basis data, sehingga dapat menciptakan suatu
halaman web yang dinamis. PHP mempunyai koneksitas yang baik dengan beberapa basis
data antara lain Oracle, Sybase, mSQL, MySQL, Microsoft SQL Server, Solid,
PostgreSQL, Adabas, FilePro, Velocis, dBase, Unix dbm, dan tak terkecuali semua
database ber-interface ODBC. PHP juga memiliki integrasi dengan beberapa library
eksternal yang dapat membuat Anda melakukan segalanya dari dokumen PDF hingga
mem-parse XML. PHP mendukung komunikasi dengan layanan lain melalui protokol
IMAP, SNMP, NNTP, POP3 atau bahkan HTTP. Bila PHP berada dalam halaman web
Anda, maka tidak lagi dibutuhkan pengembangan lingkungan khusus atau direktori
khusus. Hampir seluruh aplikasi berbasis web dapat dibuat dengan PHP. Namun kekuatan
utama adalah konektivitas basis data dengan web. Dengan kemampuan ini kita akan
mempunyai suatu sistem basis data yang dapat diakses dari web.
Tips :
- Sebelum anda mencoba script-script yang ada dihalaman berikut, buatlah
- Folder ini menjadi tempat penyimpanan file-file php anda. Setiap mengetikkan
script di tiap sesi simpanlah sesuai dengan nama file yang ada diatas script
tersebut.
- Contoh : File : Lat01.php berarti anda harus menyimpan file tersebut dengan
nama Lat01.php.
- Jangan lupa untuk memberi ekstensi *.PHP disetiap nama file yang anda
simpan.
Script PHP termasuk dalam HTML-embedded, artinya kode PHP dapat disisipkan pada
sebuah halaman HTML. Ada beberapa cara untuk menuliskan script PHP, yaitu:
?> </script>
2. <? 4. <%
?> %>
Cara pertama merupakan format yang dianjurkan tetapi mungkin cara kedua akan sering
digunakan karena lebih ringkas. Cara yang ketiga digunakan untuk mengantisipasi editor-
editor yang tidak dapat menerima kedua cara di atas. Selain itu kita juga bisa
menggunakan cara penulisan ASP, tetapi tentu saja ada beberapa konfigurasi yang perlu
dilakukan.
Parser PHP bekerja membaca file HTML sampai ditemukan penanda khusus yang
memberitahukan untuk menerjemahkan skrip berikutnya sebagai kode PHP. Parser PHP
Lat01.php
<?
echo 'hasil penulisan tag PHP yang pertama <? ....... ?>';
?>
<?php
echo 'hasil penulisan tag PHP yang kedua <?php ....... ?>';
?>
<script language="php">
echo 'hasil penulisan tag PHP yang ketiga <script language="php"> ....... </script>';
</script>
<%
echo 'hasil penulisan tag PHP yang keempat <% ....... %>';
%>
Bila ingin menyisipkan dalam tag HTML maka tinggal meletakkan parser PHP pada
<html>
<head>
<title>Lat02.php</title>
</head>
<body>
<tr>
<td>
<? echo 'hasil penulisan tag PHP yang pertama <? ....... ?>'; ?>
</td>
</tr>
<tr>
<td>
<?php echo 'hasil penulisan tag PHP yang kedua <?php ....... ?>'; ?>
</td>
</tr>
<tr>
<td>
<script language="php">
echo 'hasil penulisan tag PHP yang ketiga <script language="php"> .......
</script>';
</script>
</td>
</tr>
<tr>
<td>
<% echo 'hasil penulisan tag PHP yang keempat <% ....... %>'; %>
</td>
</tr>
</table>
</body>
</html>
3. VARIABEL
Pada setiap bahasa pemrograman pasti akan kita temui konsep variabel. Variabel adalah
sebuah tempat di memori untuk menyimpan data yang nilainya dapat berubah-ubah selama
program dijalankan. Tetapi tidak seperti pada kebanyakan bahasa pemrograman lain yang
mengharuskan kita untuk mendeklarasikan variabel terlebih dahulu, variabel dalam PHP
tidak harus dideklarasikan sebelum variabel tersebut digunakan. Varabel diwakili oleh kata
Lat03.php
<html>
<head>
<title>Lat03.php</title>
</head>
<body>
<?php
?>
<tr>
<td>Jurusan</td>
</tr>
<tr>
<td>Jurusan</td>
</tr>
</table>
</body>
</html>
Berikut ini adalah sebuah contoh mengenai betapa luwesnya penggunaan variabel dalam
PHP.
Lat04.php
<?php
// Contoh variabel $a
$a = "Testing";
$a = 55;
$a = 7.5;
?>
4. KONSTANTA
Konstanta adalah variabel yang nilainya tetap. Konstanta hanya diberi nilai pada awal
program dan nilainya tidak pernah berubah selama program berjalan. PHP telah
memberikan informasi tentang versi PHP yang digunakan. Selain konstanta yang telah
disediakan oleh PHP kita juga dapat membuat konstanta sendiri. Aturan penulisan
define(nama_konstanta,nilai_konstanta)
<html>
<head>
<title>Lat05.php</title>
<head>
<body>
<?php
print(KAMPUS);
?>
</body>
</html>
5. TIPE DATA
PHP mengenal beberapa macam tipe data antara lain : integer, floating point, dan string.
Floating point lebih dikenal dengan nama double atau desimal. Penulisan string selalu
diawali dengan tanda petik ganda () atau tanda petik tunggal ().
$nilai = -5;
Doble $skor = 90.00; Bilangan real
$bunga = 12.50;
String $kota = Yogyakarta Karakter, kalimat
$motto = Nyaman
Latihan
1. Jalankan koding yang ada dalam latihan dan amati serta gambarkan
hasilnya
2. Sebagai tugas buatlah sebuah halaman .php yang bila dijalankan akan
pemanggilan konstanta
menggunakan php.
MATERI 12, & 13
Pada MATERI ini akan dipelajari tentang session pada PHP. PHP mempunyai
meningkatkan layanan situs web. Setiap pengunjung akan diberi sebuah id yang
TIU:
T IK :
Saat berinternet, kita tentu sering menjumpai situs yang mengharuskan pengunjung
melakukan login terlebih dahulu agar dapat mengakses informasi mereka. Misalnya saja
pada situs e-mail, disitu kita perlu mengisikan user name dan password sebelum
mengakses email, kemudian melakukan logout setelah selesai. Pada PHP terdapat fitur
bernama session handling yang bisa dipakai untuk keperluan otentikasi seperti di atas.
Pada dasarnya session adalah cara untuk menjaga suatu variabel tetap ada selama sesi
kunjungan user. Meskipun berpindah-pindah halaman, variabel session tetap ada dan bisa
diakses sampai session ditutup. Fasilitas session handling ini baru ada secara built-in mulai
PHP versi 4.
PHP mempunyai session (catatan aktivitas) yang digunakan untuk menjaga / memelihara
informasi akses dari seorang pengakses / pemakai aplikasi web. Session memungkinkan
pelacakan akses pemakai, pangaturan pemakaian aplikasi oleh pemakai dan meningkatkan
layanan situs web. Setiap pengunjung akan diberi sebuah id yang unik, yang disebut
dengan id session (session_id). ID ini dapat disimpan dalam suatu cookie pada sisi user
atau disertakan dalam URL. Session koneksi antara klien dan server akan hilang atau
putus apabila browser ditutup. Apabila browser dijalankan kembali dan koneksi ke server
Fungsi-fungsi session :
Description
berdasarkan pada pengidentifikasi session via GET atau POST atau cookie
Untuk menggunakan session yang memiliki nama, panggil session_name()
Jika pengguna menggunakan ob_gzhandler atau mirip dengan ob_start(), urutan fungsi
sangatlah penting untuk hasil yang sesuai. Sebagai contoh, ob_gzhandler haruslah
Return Values
Fungsi ini akan mengembalikan nilai TRUE jika sebuah session berhasil berjalan, dan
Examples
- Mulai session dengan login terlebih dahulu (Script kode login bisa dilihat di lampiran)
<?
session_start();
if ($_SESSION['access']==false) {
exit;
}
?>
<html>
<body>
<?php
// page1.php
session_start();
$_SESSION['favcolor'] = 'green';
$_SESSION['animal'] = 'cat';
$_SESSION['time'] = time();
?>
<br><br><a href=logout.php>logout</a><br><br>
</body>
</html>
Setelah menampilkan page1.php, halaman kedua yaitu page2.php akan berisi data dari
session.
<?php
// page2.php
session_start();
?>
2. session_destroy()
Description
Hal ini tidak merubah variabel global yang berhubungan dengan session tersebut, Hal ini
juga tidak merubah cookie dari session. Untuk menggunakan lagi variabel sssion tersebut,
Untuk membunuh session secara bersamaan, seperti proses log out user, id dari
session haruslah dalam keadaan tidak aktif. Jika sebuah cookie digunakan untuk
menciptakan session_id (sifat dasar), maka cookie dari session tersebut haruslah dihapus.
Return Values
Examples
- Mulai session dengan login terlebih dahulu (Script kode login bisa dilihat di lampiran)
<?php
session_start();
$_SESSION = array();
// If it's desired to kill the session, also delete the session cookie.
// Note: This will destroy the session, and not just the session data!
if (ini_get("session.use_cookies")) {
$params = session_get_cookie_params();
$params["path"], $params["domain"],
$params["secure"], $params["httponly"]
);
session_destroy();
?>
id).
Description
SID yang konstan dapat juga digunakan untuk mengambil nama dari SID saat ini
dan session_id dalam bentuk string cocok untk ditambahkan kedalam URL.( lihat juga
session handling ).
Parameters
id
Jika id telah dispesifikasi, maka id tersebut akan menggantikan session_id saat ini.
Untuk itu, session_id() haruslah dipanggil sebelum session_start(). Tidak semua karakter
diperbolehkan untuk menjadi bagian dari session id . Hal ini bergantung pada session
handler. Sebagai contoh, session handler hanya memperbolehkan karakter a-z A-Z 0-9 ,
session_id() akan selalu mengirimkan sebuah cookie baru ketika session_start() dipanggil,
tak peduli jika session id saat ini sama dengan session id yang baru.
Return Values
session_id() mengembalikan session id untuk session saat ini atau strting kosong () jika
Changelog
Version Description
5.0.0 karakter koma (,) dan minus (-) diperbolehkan dalam file dari session
handler .
Mengetahui apakah sebuah variabel telah terdaftar atau belum dalam sebuah session.
Warning
Fungsi ini tidak diperkenankan oleh PHP 5.3.0 dan dihapus pada PHP 6.0.0.
Parameters
name
Nama Variabel.
Return Values
memiliki nama name terdaftar pada session saat ini, Jika sebaliknya akan mengembalikan
nilai FALSE.
Notes
Catatan: Jika $_SESSION (atau $HTTP_SESSION_VARS untuk PHP 4.0.6 atau kurang)
digunakan, gunakan isset() untuk mengecek variabel yang terdaftar dalam $_SESSION.
Caution
Jika menggunakan $_SESSION (or $HTTP_SESSION_VARS), maka jangan gunakan
Bila suatu variabel didefinisikan secara global pada skrip PHP, maka variabel itu memiliki
lingkup hanya sebatas dalam skrip PHP itu saja. Variabel itu tidak dapat diakses dari file
PHP lain dengan cara biasa. Bila kita menginginkan variabel yang bisa diakses dari
Untuk itu, variabel harus dipropagasi atau dikirim ke server terlebih dahulu. Ada beberapa
cara untuk melakukannya. Pertama, variabel tersebut dikirim secara langsung melalui
string yang ditambahkan ke URL, seperti halnya metode GET dalam pengiriman data.
utama.php?halaman=1&userid=100
URL ini akan menuju ke file utama.php dan pada utama.php akan terdapat variabel
Cara lain yaitu menggunakan cookies. Cookies adalah mekanisme penyimpanan data atau
variabel di sisi klien (browser). Dengan menyimpan variabel sebagai cookie, data tersebut
akan tetap ada sampai waktu kadaluarsa yang bisa ditentukan. Cookie biasa dipakai di
pada aplikasi polling, dimana satu pengunjung hanya bisa melakukan vote satu kali dalam
sehari.
Session Handling di PHP
session_register(userid);
$HTTP_SESSION_VARS["userid"] = 100;
Atau
$_SESSION[userid] = 100;
$userid = 100;
Cara yang terakhir bisa dilakukan bila option register_globals bernilai on (pada file
konfigurasi php.ini). Dengan begitu userid tersedia sebagai variabel global $userid dan
dapat diakses langsung. Pada PHP versi 4.2 ke atas, biasanya option ini dinonaktifkan
dengan alasan keamanan. Setiap skrip yang ingin memakai variabel session, harus
memulai session dahulu dengan fungsi session_start() yang dipanggil di awal skrip sebagai
header.
session_unregister()
session_destroy()
Menghancurkan semua variabel yang berhubungan dengan session.
Pengunjung tadi kemudian diberi pengenal berupa session id, Session id ini adalah
rangkaian karakter yang unik, misalnya 12345678xx.. Bersamaan dengan itu, pada sisi
server juga dibuat file ses_12345678xx yang berisi variabel-variabel session milik si
Metode di atas adalah default. Sebenarnya anda juga bisa menentukan lokasi
pengunjung memulai atau melanjutkan session (melalui session_start()) maka dia tinggal
Pengiriman session id ke server bisa melalui 2 cara. Yang pertama, yaitu cara default,
Ada kalanya dengan alasan tertentu, si pengunjung menonaktifkan cookies (bisa dilakukan
melalui setting browsernya). Bila hal ini terjadi, maka pengiriman session id dilakukan
dengan cara kedua, yaitu melalui query string (string yang ditambahkan ke URL, seperti
Session akan berakhir saat fungsi session_destroy() dipanggil atau sewaktu user menutup
web browsernya.
Dari cara kerja session tadi, terlihat bahwa yang menjadi kunci pegangan si pengunjung
(di sisi client) hanyalah variabel session id, sedangkan variabel-variabel lain miliknya di
server. Adanya fasilitas session handling di PHP menjadikan proses diatas menjadi
Dengan menggunakan fungsi2 session, kita bisa membangun suatu mekanisme login.
Skenarionya begini: Pengunjung mengakses halaman utama index.php, disana dia disodori
form user dan password untuk login. Ia harus memasukkan username dan password yang
valid agar dapat mengakses informasi utama di situs ini. Kemudian setelah selesai,
Untuk itu kita membutuhkan satu tabel database untuk menampung data user yang
terdaftar. Dalam contoh ini dipilih MySQL karena telah umum dipakai serta gratis.
Pertama-tama kita siapkan dahulu sebuah database bernama session dan tabel bernama
us_nama varchar(32),
us_email varchar(50),
us_angkatan varchar(4),
us_url varchar(100),
us_password varchar(32)
VALUES
(1,Sarifah,Sarifahriz@operamail.com,2002,http://Sarifahriz.cjb.net,passwordku);
index.php
1 <?php
3 session_start();
7 if (!session_is_registered("status"))
8 { session_register("userid");
9 $userid = "";
10 session_register("status");
11 $status =0;
12 }
13
14 if ($status != "1")
18 <input type=submit>
19 </form>
20 <?}
21 else
25
die("");
28 { $u_nama = $row[us_nama];
29 $u_email = $row[us_email];
30 $u_angkatan = $row[us_angkatan];
31 $u_url = $row[us_url];
32 }
$u_email
35 <br><a href=logout.php>logout</a>";
36 }
37 ?>
Pada skrip ini variabel session yang dipakai adalah userid dan status. Bila belum login,
maka nilai status=0, sedangkan bila sudah login, maka status=1. Saat pengunjung berhasil
login, userid akan diberi nilai sama dengan user id yang disimpan di database. Jika tidak,
maka userid kita biarkan kosong.Pertama-tama skrip memulai suatu session dengan
dipanggilnya fungsi session_start(), selanjutnya pada baris 7 akan dicek apakah variabel
userid dan status telah diregister. Jika belum, maka lakukan register.
Kemudian pada baris 14 dilakukan pengecekan status. Bila status=0, berarti user belum
login, maka form login dicetak, sebaliknya jika status=1, informasi utama akan
ditampilkan.
login.php
1 <?php
5 $namaid = addslashes($namaid);
7
8 $cheklogin = mysql_query("SELECT us_id FROM user WHERE (us_nama =
10 if (!mysql_num_rows($cheklogin))
12 }
13 else
14 { session_start();
15
16 // set user id
18 { $userid = $row[us_id];
19 }
20
23 }
24 ?>
Pada baris 8 dilakukan pengecekan username dan password dalam database. Jika cocok,
maka nilai status=1, sedangkan userid=user id yang sesuai dalam database. Perhatikan
bahwa session_start(); juga dipanggil di awal, hal ini supaya skrip ini bisa mengenali
1 <?php
2 session_start();
3 {
4 $userid = "";
5 $status = "0";
8 }
9 ?>
Dalam proses logout, pada baris 3, variabel userid dan status akan dikosongkan, sehingga
LATIHAN SOAL
2. Buat sebuah buku tamu yang terdiri dari nama, email dan komentar, kemudian submit
3. Dari soal no. 2, kembangkan dengan membuat sebuah file C untuk membaca data
Pada MATERI ini akan dipelajari tentang konektivitas PHP dengan Mysql.
TIU:
T IK :
mysql_connect()
Digunakan untuk melakukan uji dan koneksi kepada server database MySQL.
Sintaks :
$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.
mysql_select_db()
Digunakan untuk melakukan koneksi kepada database yang dalam server yang berhasil
Sintaks :
$pilih = mysql_select_db(namadatabase,$conn);
mysql_query()
Digunakan untuk melakukan eksekusi perintah SQL untuk memanipulasi database yang
Sintaks :
$hasil = mysql_query(SQL Statement);
$hasil akan berupa record set apabila SQL Statement berupa perintah select.
a. mysql_fetch_array()
Digunakan untuk melakukan pemrosesan hasil query yang dilakukan dengan perintah
keduanya.
Sintaks :
$row = mysql_fetch_array($hasil);
$row adalah array satu record dari record $hasil yang diproses nomor record
sesuai dengan nomor urut dari proses mysql_fetch_array yang sedang dilakukan.
b. mysql_fetch_assoc()
Fungsi ini hampir sama dengan fungsi mysql_fetch_array(), hanya saja array yang
Sintaks :
$row = mysql_fetch_assoc($hasil);
c. mysql_fetch_row()
Fungsi ini hampir sama dengan fungsi mysql_fetch_array(), hanya saja array yang
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.
LATIHAN LATIHAN :
1. Menguji interkoneksi PHP dengan MySQL.
<html>
<head>
<title>Koneksi Database MySQL</title>
</head>
<body>
<h1>Demo koneksi database MySQL</h1>
<?
$conn=mysql_connect ("localhost","root","");
if ($conn) {
echo "OK";
} else {
echo "Server not connected";
}
?>
</body>
</html>
mysql_fetch_row().
a. Buatlah tabel liga berikut ini, dengan 3 field : kode, negara, champion.
<HTML>
<HEAD>
<title>Koneksi Database MySQL</title>
</HEAD>
<BODY>
<h1>Koneksi database dengan mysql_fetch_array</h1>
<?
$conn=mysql_connect ("localhost","root","")
or die ("koneksi gagal");
mysql_select_db("faruq",$conn);
$hasil = mysql_query("select * from liga",$conn);
while ($row=mysql_fetch_array($hasil)) {
echo "Liga " .$row["negara"]; //array asosiatif
echo " mempunyai " .$row[2]; //array numeris
echo " wakil di liga champion <br>";
}
?>
</BODY>
</HTML>
d. Akses databases menggunakan mysql_fetch_assoc()
<HTML>
<HEAD>
<title>Koneksi Database MySQL</title>
</HEAD>
<BODY>
<h1>Koneksi database dengan mysql_fetch_assoc</h1>
<?
$conn=mysql_connect ("localhost","root","")
or die ("koneksi gagal");
mysql_select_db("faruq",$conn);
$hasil = mysql_query("select * from liga",$conn);
while ($row=mysql_fetch_array($hasil)) {
echo "Liga " .$row["negara"];
echo " mempunyai " .$row[champion];
echo " wakil di liga champion <br>";
}
?>
</BODY>
</HTML>
e. Akses databases menggunakan mysql_fetch_row()
<HTML>
<HEAD>
<title>Koneksi Database MySQL</title>
</HEAD>
<BODY>
<h1>Koneksi database dengan mysql_fetch_assoc</h1>
<?
$conn=mysql_connect ("localhost","root","")
or die ("koneksi gagal");
mysql_select_db("faruq",$conn);
$hasil = mysql_query("select * from liga",$conn);
while ($row=mysql_fetch_row($hasil)) {
echo "Liga " .$row[1];
echo " mempunyai " .$row[2];
echo " wakil di liga champion <br>";
}
?>
</BODY>
</HTML>
3. Membuat Buku Tamu
<HTML>
<HEAD>
<title>Buku Tamu</title>
</HEAD>
<BODY>
<h1>Buku Tamu untuk database MySQL</h1>
b. Buat<form
form untuk buku tamu, beri nama bukutamu.htm
action="bukutamu_add_form.php" method="post">
Nama : <input type="text" name="nama" size="35"
maxlength="50"> <br>
Email : <input type="text" name="email" size="35"
maxlength="50"> <br>
Komentar : <textarea name="komentar" rows="5"
cols="30"></textarea> <br>
<input type="submit" value="Simpan">
<input type="reset" value="Reset">
</form>
</BODY>
</HTML>
c. Buat file bukutamu_add_form.php untuk memproses data dari bukutamu.htm dan
<HTML>
<HEAD>
<title>Simpan Buku Tamu</title>
</HEAD>
<BODY>
<h1>Simpan Buku Tamu MySQL</h1>
<?
$nama = $_POST["nama"];
$email = $_POST["email"];
$komentar = $_POST["komentar"];
$conn=mysql_connect ("localhost","root","")
or die ("koneksi gagal");
mysql_select_db("faruq",$conn);
echo "Nama : $nama <br>";
echo "Email : $email <br>";
echo "Komentar : $komentar <br>";
$sqlstr="insert into bukutamu (nama,email,komentar)
values ('$nama','$email','$komentar')";
$hasil = mysql_query($sqlstr,$conn);
echo "Simpan bukutamu berhasil dilakukan";
?>
</BODY>
</HTML>
<?
$conn = mysql_connect("localhost","root","");
mysql_select_db("faruq",$conn);
$hasil = mysql_query("select * from bukutamu",$conn);
$jumlah = mysql_num_rows($hasil);
echo "<center>Daftar Pengunjung</center>";
echo "Jumlah pengunjung : $jumlah";
$a=1;
while($baris = mysql_fetch_array($hasil))
{
echo "<br>";
echo $a;
echo "<br>";
echo "Nama : ";
echo $baris[0];
echo "<br>";
echo
d. Buat file "Email
view.php untuk: menampilkan
"; isi buku tamu.
echo $baris[1];
echo "<br>";
echo "Komentar : ";
echo $baris[2];
$a++;
}
?>
4. Membuat program searching database dengan menggunakan tabel no 3a
<HTML>
<HEAD>
<title>Cari Database</title>
</HEAD>
<BODY>
<h1>Searching Buku Tamu untuk database MySQL</h1>
<form action="hasilsearch.php" method="post">
<select name="kolom">
<option value="nama">nama</option>
<option value="email">email</option>
</select>
Masukkan kata yang anda cari
<input type ="text" type ="text" name="cari">
<input type ="submit" value="cari" >
</form>
</BODY>
</HTML>
b. Buat file hasilsearch.php untuk menampilkan data
<?
$kolom=$_POST['kolom'];
$cari=$_POST['cari'];
$conn=mysql_connect("localhost","root","");
mysql_select_db("faruq", $conn);
$hasil=mysql_query("select * from bukutamu where $kolom like
'%$cari%'", $conn);
$jumlah=mysql_num_rows($hasil);
echo "<br>";
echo "Ditemukan: $jumlah";
echo "<br>";
while($baris=mysql_fetch_array($hasil))
{
echo "Nama : ";
echo $baris[0];
echo "<br>";
echo "Email : ";
echo $baris[1];
echo "<br>";
TUGAS :
1. Buat database dengan nama Toko,kemudian buat table dengan nama Transaksi
DAFTAR PUSTAKA
1. Michele E.Davis & Jhon A. Phillips, Learning PHP & MySQL, OReilly
2007.
2. David R. Brooks, Guide To HTML, JavaScript and PHP, Springer 2011.
,OReilly 2006