MATERI 1 PAK ARI PAMBUDI

(1)

MATERI 1 DASAR-DASAR HTML (Hypertext Markup Language)

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 dengan teknologi CGI.

T I U :

1. Mahasiswa mengenal Dasar HTML

2. Mahasiswa memahami format yang digunakan dalam dokumendan aplikasi yang berjalan pada web browser.

T IK :

1. Mahasiswa mengerti struktur dasar dokumen HTML.

(2)

Dasar-Dasar HTML

HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (hypertext markup language).

Dikatakan markup language karena HTML berfungsi untuk ’memperindah’ file 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 atribut1=”nilai_atribut1” atribut2=” nilai_atribut2” … >. Dalam penulisan tag HTML tidaklah case sensitive artinya penggunaan huruf kecil ataupun kapital tidaklah menjadi masalah.

Struktur Dasar Dokumen HTML

Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut : <html>

<head>

<title>berisi judul yang muncul pada title bar webbrowser</title> </head>

(3)

Berisi tentang text, gambar, atau apapun yang ingin anda Tampilkan pada dokumen anda ada pada bagian ini. </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 misalnya <meta> dan tag-tag lainnya yang akan kita pelajari.

Bagian kedua, yang diapit oleh tag BODY merupakan bagian yang akan ditampilkan pada halaman webbrowser nantinya. Pada bagian ini Anda akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin Anda sampaikan pada pengguna nantinya.

Pengaturan Properti Dokumen

(4)

Kode Warna

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

BACKGROUND = URI (background image for document)

BGCOLOR = Color (background color for document, default white) TEXT = Color (text color for document, default black)

LINK = Color (link color for document, default blue)

VLINK = Color (visited link color for document, default purple)

(5)

Elemen Heading <hx>

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

Elemen Paragrap <p>

Tag paragrap berfungsi layaknya untuk pengaturan antar paragrap dalam halaman

web anda. Dalam elemen paragrap terdapat atribut : ALIGN=[ left | center | right ]

yang berfungsi sebagai pengaturan perataan paragrap. Anda dapat memilih perataan kiri, tengah atau kanan.

Elemen Break <br>

Elemen Break berfungsi untuk memberikan baris baru suatu paragrap dalam halaman web anda. Elemen break tidak memerlukan elemen penutup break.

Elemen Horisontal Rules <hr>

Elemen <hr> berfungsi untuk menampilkan garis horisontal di dalam halaman web

anda. Elemen <hr> tidak memerlukan elemen penutup </hr>. Atribut Elemen Horisontal Rules

ALIGN =[ left | center | right ] (horizontal alignment, default center) SIZE =Pixels (line height, default 2)

(6)

Elemen Pemformatan Karakter <font>

Font pada halaman HTML dapat diformat sesuai dengan desain yang anda tentukan, baik ukuran, jenis maupun warna.

Atribut Elemen Font

SIZE = Number (font size adjustment, default 3)

COLOR = Color (font color adjustment, default black)

FACE = Number (font face adjustment, default Times New Roman)

Elemen Ragam Karakter

<b>bold</b> menghasilkan huruf tebal <i>italic</i> menghasilkan huruf miring

<u>underline</u> menghasilkan huruf bergaris bawah

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

<ul>) dan dalam bentuk nomor (ordered list <ol>). Atribut Elemen List

Ordered list

(7)

TYPE = [ disc | square | circle ] (bullet style, default disc)

Elemen Image <img>

Anda dapat menampilkan gambar dalam halaman HTML, format filenya berupa JPG atau GIF. Untuk menampilkanya digunakan tag IMG.

<IMG SRC=namafilegambar> Atribut Elemen Image

SRC = URI (location of image) ALT = Text (alternate text)

WIDTH = Length (image width) HEIGHT = Length (image height)

ALIGN = [ top | middle | bottom | left | right ] (image alignment) BORDER = Length (link border width)

Latihan: Menggunakan Tag Gambar

Buka contoh sebelumnya dan tambahkan tag berikut ini: <html>

<head>

<title>latihan 05</title> </head>

<body>

<img src= logo.gif> …

(8)

</body> </html>

Elemen Link/Anchor <a>

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. <a href = URL_tujuan>hypertext</A>

Latihan: Menggunakan Link

Link berfungsi untuk melompat ke halaman lain pada web atau ke URL lain (internet). hal ini dinamakan hypertext.

….. …. <ol>

<li><A HREF=../motor/sity>nginjhen</A> <li><A HREF=togar.html>togar</A>

<li><A HREF=http://www.honda.com>supra cup</A> </ol>

…. ….

(9)

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 memiliki bagian dokumen sebagai berikut:

… …

<H2><A NAME=bab2>BAB 2 Penjualan</A></H2> …

…

maka bagian lain pada dokumen Anda dapat membuat link ke bagian di atas dengan tag

sebagai berikut:

<A HREF=#bab2> BAB 2 Penjualan </A>

Elemen Tabel <table>

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 menampilkan data pada setiap set tabel (table data).

Struktur lengkap dari elemen tabel adalah sebagai berikut: <table>

<tr>

(10)

<td>data baria 1 kolom 2</td> </tr>

<tr>

<td>data baris 2 kolom 1</td> <td>data haris 2 kolom 2</td> </tr>

<tr>

<td>data baris 3 kolom l</td> <td>data baris 3 kolom 2</td> </tr>

</table>

Atribut Elemen Tabel

WIDTH = Length (table width, pixels or percentage) HEIGHT = Length (table height, pixels or percentage) BORDER = Pixels (border width)

CELLSPACING = Length (spacing between cells) CELLPADDING= Length (spacing within cells)

ALIGN = [ left | center | right ] (table alignment) BGCOLOR = Color (table background color)

Atribut Table Row

ALIGN = [ left | center | right ] (horizontal alignment of cells in group)

(11)

BGCOLOR = Color (row background color) Atribut Table Data

ROWSPAN = Number (rows spanned by the cell) COLSPAN = Number (columns spanned by the cell)

ALIGN = [ left | center | right ] (horizontal alignment) VALIGN = [ top | middle | bottom ] (vertical alignment)

WIDTH = Pixels (cell width, pixels or percentage) HEIGHT = Pixels (cell height, pixels or percentage) BGCOLOR = Color (cell background color)

Elemen Form <form>

Form HTML merupakan tag yang paling penting khususnya dalam membuat aplikasi berbasis web. Form menyediakan properti masukan yang dapat berupa textbox, check box, radio button, dan button.

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.

Atribut Elemen Form

ACTION = URI (form handler)

METHOD = [ get | post ] (HTTP method for submitting form)

Properti Masukan Pada Elemen Form <input>, <textarea>, <select> 1. Text Box <input type=”text”>

(12)

SIZE = size of the textbox in character, default 20 MAXSIZE = maximum number of character will accept NAME = name of variable to be sent to the application VALUE = will display its content as the default value

2. Password <input type=”password”> Digunakan untuk memasukkan password.

SIZE = size of the textbox in character, default 20 MAXSIZE = maximum number of character will accept NAME = name of variable to be sent to the application

3. Hidden <input type=”hidden”>

Digunakan untuk mengirim data ke suatu aplikasi yang tidak kita inginkan untuk dilihat oleh browser.

NAME = name of variable to be sent to the application VALUE = will display its content as the default value

4. Check Box <input type=”checkbox”>

Check box digunakan untuk dapat memilih lebih dari satu pilihan. NAME = name of variable to be sent to the application VALUE = usually set to a value

CHECKED (check radio button or checkbox)

(13)

Radio button digunakan untuk dapat memilih hanya salah satu pilihan. NAME = name of variable to be sent to the application

VALUE = usually set to a value CHECKED (check radio button or checkbox)

6. Push Button <input type=”button”>

Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan suatu aksi.

NAME = name of variable to be sent to the application VALUE = text label on the button

7. Submit <input type=”submit”>

Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilainya ke suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen FORM.

NAME = name of variable to be sent to the application VALUE = text label on the button

8. Image Submit Button <input type=”image” src=”url”>

Digunakan untuk menggantikan tombol standar submit dengan image. NAME = name of variable to be sent to the application

9. Reset <input type=”reset”>

(14)

VALUE = text label on the button

10. Text Area <textarea> … </textarea>

Elemen untuk memasukkan teks secara leluasa seperti notepad. NAME = name of variable to be sent to the application ROWS = number of rows

COLS = number of columns

11. Select <select> … </select>

Daftar isi dalam properti select mengunakan tag <option> SIZE = set the number of visible choices

NAME = name of variable to be sent to the application

Contoh Buat Form HTML <html>

<head><title>latihan form</title></head> <body>

Nama : <input type=text name=nama><p> Alamat :<input type=text name=alamat> <p>Telepon :<input type=text name=telepon> <p>Email :<input type=text name=email> <p>

(15)

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

<input type=radio name=anggota value=ya check>ya <input type=radio name=anggota value=bukan>bukan <p>

</form> </body> <html>

Latihan SOAL

Latihan 01 :

(16)

<h1>TOKO BUKU SERBA MURAH</h1> <h2>Toko kami menyediakan</h2>

<h3>Alat Tulis</h3>

<h4>pensil, ballpoint, penggaris dll.</h4> <h3>Buku-Buku Pelajaran</h3>

<h4>ilmu pasti, ilmu bumi, sejarah dll.</h4> <h3>Alat Kantor</h3>

<h4>meja, kursi, file manager dll.</h4> </body>

</html>

Latihan 02 :

<body bgcolor=#990066 text=#FFCCFF> <h1>TOKO BUKU SERBA MURAH</h1> <hr width=50% align=left>

<h2>Toko kami menyediakan</h2> <h3>Alat Tulis</h3>

(17)

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

<font color=#FFFF00 face=Arial>TOKO BUKU SERBA MURAH</font> </h1>

<hr width=360 align=center> <h2>Toko kami menyediakan</h2>

<h3><font color=red>Alat Tulis</font></h3>

<p align=center>pensil<br>ballpoint<br>penggaris<br>dll.</p> <h3><font color=red>Buku-Buku Pelajaran</font></h3>

<p align=right>ilmu pasti<br>ilmu bumi<br>sejarah<br>dll.</p> <h3><font color=red>Alat Kantor</font></h3>

(18)

</html>

Latihan 04 :

<body bgcolor=#990066 text=#FFCCFF> <h1>TOKO BUKU SERBA MURAH</h1> <hr width=50% align=left>

Toko kami menyediakan <h2>Alat Tulis</h2> <ol>

<h2>Buku-Buku Pelajaran</h2> <ol type=A>

<li>ilmu pasti <ul>

(19)

<li>biyologi

(20)

<body>

berikut contoh tabel dengan rowspan dan colspan

<td>baris 1 kolom 1</td> <td>baris i kolom 2</td> </tr>

<tr>

<td colspan=2>baris 2 kolom 1</td> </tr>

<tr>

<td rowspan=2>baris 3 kolom 1</td> <td>baris 3 kolom 2</td>

</tr> <tr>

<td>baris 4 kolom 2</td> </tr>

(21)

MATERI II - IV DESAIN TAMPILAN WEB

Pada pertemuan ini akan dipelajari tentang pengaturan tampilan atau desain pada web. Salah satu tool yang digunakan untuk pengaturan tersebut adalah perangkat lunak yang bernama Dreamweaver. 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 seperti team collaboration dan peningkatan kemampuan multimedia.

T I U :

(22)

2. Mahasiswa memahami format yang digunakan dalam pengaturan tanmpilan web dengan dreamweaver.

T IK :

1. Mahasiswa mampu menggunakan pemakaian dreamweaver beserta sintak-sintaknya.

2. Mahasiswa mampu mengatur tampilan site dengan dreamweaver.

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 desiner. Macromedia Dreamweamer (mulai versi 4) mungkin merupakan editor pertama dengan fitur-fitur lengkap yang memenuhi semua grup diatas.

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 seperti team collaboration dan peningkatan kemampuan multimedia.

(23)

Memulai Dreamweaver

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, Property Inspector, dan Site Panel.

Catatan: Jika Insert Bar dan Property Inspector tidak tampil pada Dreamweaver, maka bisa ditampilkan dengan klik menu:

- Window - Insert Bar (Ctrl+F2), atau - Window - Property Inspector (Ctl+F3).

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 dengan mudah berpindah antara dokumen satu dengan lainnya.

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-masing terdiri dari beberapa icon yang berkesesuaian.

(24)

Sedangkan Site Panel memungkinkan kita untuk menampilkan dan mengatur semua file dan folder yang merupakan bagian dari website kita.

Gambar 10.1. Elemen window dari Dreamweaver MX 6.0

Dreamweaver dapat menampilkan dokumen dalam tiga cara: Design View, Code View,

(25)

Pada Design View, kita bisa menampilkan dan mengedit dokumen secara visual. Tampilan dari Design View sama seperti bila kita menampilkannya dengan web browser (seperti Microsoft Internet Explorer).

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 View secara bersamaan dalam satu tampilan window.

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 juga link ke dokumen-dokumen yang lain.

(26)

Gambar 10.2. Site Panel pad Dreamweaver

Untuk memulai membuat website, kita buat suatu site pada Dreamwever dengan

mengklik link Define a Site pada Site Panel. Kemudian akan muncul wizard untuk mendefinisikan suatu site.

Dibawah ini adalah beberapa langkah untuk mendefinisikan suatu site, yaitu: 1. Langkah pertama: kita diminta untuk mengisikan nama dari website kita.

Gambar 10.3. Langkah pertama untuk mendefinisikan site

(27)

Gambar 10.4. Langkah kedua untuk mendefinisikan site 3. Langkah ketiga: ada 3 pilihan untuk meletakkan file-file dari website kita.

 Pertama, adalah diletakkan pada drive lokal.

 Kedua, diletakkan pada server secara langsung menggunakan local network.  Ketiga, diletakkan pada server dengan menggunakan FTP atau RDS.

(28)

Pilih yang pertama (local), lalu tentukan lokasi dimana kita ingin menyimpan file dokumen web kita.

4. Langkah keempat: kita akan diminta mengisikan beberapa informasi yang dibutuhkan, sesuai dengan pilihan kita pada langkah ketiga.

Gambar 10.6. Langkah keempat untuk mendefinisikan site

(29)

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.

(30)

Gambar 10.7. Informasi site pada Site Panel.

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 gambar site dan folder resources untuk menyimpan file-file lain.

Untuk itu perlu adanya manajemen file pada dokumen web yang kita buat melalui pembuatan folder.

Cara membuat folder:

(31)

2. Ketikkan nama folder yang kita buat (misal: images) kemudian tekan Enter.

Bekerja dengan File

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.

Cara membuat file:

(32)

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 file yang akan kita edit pada Site Panel.

Untuk mengganti title dari website kita, bisa kita isikan pada edit box tittle pada deretan icon pada toolbar di bagian atas Dreamweaver.

(33)

Memasukkan Teks

Memasukkan teks ke dalam dokumen yang kita buat menggunakan Dreamweaver sangat mudah. Setelah dokumen kita buka, tempatkan kursor pada Document Window dan kita bisa langsung mengetikkan teks ke dalam dokumen tersebut.

Bila kita ingin memformat teks yang sudah kita masukkan, caranya adalah dengan memblok teks tersebut, kemudian ubah properti dari teks tersebut dengan menggunakan panel Property Inspector.

(34)

Memasukkan Objek

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 suatu objek oleh Dreamweaver.

(35)

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 dengan mengklik icon Draw Layer pada Insert Bar  Common.

Page Properties

Ketika pertama kali kita memulai Dreamweaver, halaman web kita secara default mempunyai title Untitle Document dan tidak mempunyai background. Kita bisa mengeditnya dengan mengakses ke Page Properties.

Caranya adalah dengan mengklik menu Modify, kemudian pilih Page Properties. Atau bisa juga dengan menggunakan mouse, caranya: taruh kursor mouse pada dokumen kita, kemudian klik kanan mouse dan pilih Page Properties.

(36)

Gambar 10.8. Kotak dialog Page Properties

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.

(37)

dimana kita bisa mendefinisikan beberapa parameter disini (misal: jumlah baris, jumlah kolom, dll).

Gambar 10.9. Kotak dialog untuk memasukkan tabel. Merge Tabel

Untuk menggabungkan antar cell dalam tabel, dapat dilakukan melalui langkah berikut:

(38)

Membuat Link

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 yang sangat mudah.

Untuk membuat suatu link, baik link ke halaman web maupun link ke file dokumen (seperti file Microsoft Word, file PDF, dll), yaitu:

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.

(39)

LATIHAN SOAL

Berikut ini latihan dasar HTML, dimana design interface meliputi font, warna, paragraph, background, dan isi halam web ini, dipersilahkan mahasiswa untuk mengembangkan dengan asumsi-asumsi yang dimiliki.

1. Buatlah halaman web untuk menampilkan informasi identitas mahasiswa dan deskripsi (hoby, kemampuan, foto, dll) dengan layout sebagai berikut :

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 mahasiswa tersebut yang terletak di frame bagian kanan.

Layout sebagai berikut :

MATERI IV Foto

Identitas

Deskripsi lain

Nama Universitas dan Logo List nama

mahasiswa, jika di-klik akan memiliki link ke frame sebelah kanan

(40)

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 memperluas kemampuan HTML.

T I U :

1. Mahasiswa mengenal mengenai pemrograman web dengan m,enggunakan Style CSS

T IK :

1. Mahasiswa mampu membuat halaman web dengan menggunakan kode HTML secara sederhana.

2. Mahasiswa mampu membuat tampilan dokumen HTML denggan permainan warna dan berbagai jenis tampilan teks.

A. DASAR TEORI

(41)

Misalnya diinginkan untuk mengatur ukuran font pada setiap sel sebesar 2. Dengan menggunakan tag <FONT>, semua sel harus diformat dengan menggunakan <FONT SIZE=”2”>, tentu saja tindakan seperti ini tidak praktis. Namun, dengan menggunakan CSS, anda hanya perlu mendefinisikan style sekali saja dan style akan berlaku untuk setiap sel dalam tabel.

Mengenali kode Css:

1. Pasangan tag <STYLE> dan </STYLE> digunakan untuk mendefinisikan 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 adalah definisi style.

Sintaks Css terdiri dari tiga bagian yaitu selector, properti dan nilai, penulisannya seperti dibawah:

nama_tag {properti_1:nilai_1;...;properti_n:nilai_n}

(42)

body {color:black}

Jika Anda ingin menentukan lebih dari satu properti, Anda harus memisahkan masing-masing properti dengan titik koma. Contoh di bawah ini menunjukkan bagaimana untuk mendefinisikan sebuah paragraf dengan text rata tengah dan warna teks merah:

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 tengah, maka penulisannya adalah sebagai berikut:

Anda harus menggunakan atribut class dalam dokumen HTML Anda seperti berikut:

Penggunaan atribut ID dalam Tag

Dalam pasangan tag <STYLE> dan </STYLE>, Anda bisa mendefinisikan suatu nama ID dengan bentuk seperti berikut:

#nama_ID{properti_1:nilai_1;....;properti_n:nilai_n;} Pada pendefinisian ini, awalan # selalu digunakan Cara memberi nama ID:

1. Dapat mengandung huruf, angka, atau karakter garis bawah 2. Karakter pertama harus berupa huruf atau karakter garis bawah

p.right {text-align:right}

p.center {text-align:center}

(43)

Contoh: membuat style bernama tebal yang mengatur teks agar dalam

keadaan ditebalkan dan warnanya biru.

#tebal { font-weight:bold;color:blue;}

LATIHAN SOAL

1. Bukalah lembar kerja baru dengan menggunakan notepad/ textpad lalu ketikkan script berikut:

body {background-color: yellow} h1 {font-size: 36pt}

h2 {color: blue} p {margin-left: 50px}

Simpan fle tersebut dengan nama ex1.css. lalu ketikkan script

dibawah, simpan dengan nama fle.htm.

type="text/css" href="ex1.css" /> </head>

<body>

<h1>Tulisan ini berukuran 36</h1> <h2>Tulisan ini berwarna biru</h2>

(44)

</html>

Jalankan file.htm di browser

2. Ketikkan script berikut:

(45)

Ini text yang menggunakan tag div

<p>Ini paragraf yang mempunyai background</p> Ini masih di tag div

</div> </body> </html>

Jalankan script tersebut dengan browser, lalu amati hasilnya.

3. Modifikasi script tersebut dengan menambahkan properti pada selektor h1 untuk mengubah warna text menjadi putih.

<html>

<p class="normal">Ini paragraf, dengan font normal.</p> <p class="italic">Ini paragraf, dengan font miring.</p> </body>

</html>

(46)

h1 {font-size:40px} h2 {font-size:30px} p {font-size:14px} </style>

</head> <body>

<h1>Ini heading ukuran 40</h1> <h2>Ini heading ukuran 30</h2> <p>Ini paragraf ukuran 14</p> </body>

</html>

6. Tambahkan properti pada masing-masing selektor untuk warna text (warna sesuai keinginan)

KASUS

(47)

Keterangan:

Header dengan teks rata tengah, dan warna teks biru.

Satu bagian paragraf dengan format teks rata kanan, dan satu bagian paragraf lain menggunakan rata kanan kiri

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 teks, warna, border, dll.

MATERI VI JAVASCRIPT

(48)

Bahasa ini memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah-perintah disisi user, yang artinya disisi browser bukan disisi server web.

T I U :

2. Mahasiswa mengenal mengenai javascript.

T IK :

3. Mahasiswa mampu membuat halaman web dengan disisipkan javascript didalamnya.

4. Mahasiswa mampu membuat tampilan dokumen HTML denggan permainan warna dan berbagai jenis tampilan teks.

JavaScript

(49)

sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web.Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasaHTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisibrowser bukan di sisi server web.Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skripskrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya (pada kenyataannyakompilator Javascript sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan bahasa“Java” (dengan mana JavaScript selalu di banding bandingkan) yang memerlukan kompilator khususuntuk menterjemahkannya di sisi user/ klien.Versi Javascript

JavaScript adalah bahasa yang“case sensitive”artinya membedakan penamaan variabel 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 (;).

Definisi Java Script

 Java script adalah suatu script yang diinsetkan kedalam HTML sebagai script.  Browser yang mengenal javaScript akan menterjemahkan kode-kode java dan

hasilnya ditampilkan menyatu dengan kode-kode HTML.

 Java Script bekerja pada sisi clien (yaitu pada browser).

(50)

<Script Language=Javascript> isi kode java script

</Script>

 Isi kode java script dapat berupa statemen-statemen java script yang tidak sepenuhnya sama dengan statemen java .

 Dalam java jika kita akan mencetak kelayar akan menggunakan

system.out.println() jika dalam modus command line, atau g.drawString(string,x,y) jika dalam modus window. Dalam java Script kita menggunakan document.write(teks).

 Seperti dalam bahasa pemrograman Java, javascript juga case sensitif dimana huruf

besar dan kecil dibedakan.

 teks : dapat berupa string, variabel atau tag HTML.

Tipe Data, Operator dan variabel dalam Javascript

 TIPE DATA pada javascript yaitu: string, number, boolean, null, object dan function

 OPERATOR dalam javascript terdiri dari Operator Aritmatika ( + , - , * , / , % , ++ , -- ) dan Operator logika ( && , || , ! , == , != , > , < , >= , <= ), penggunaan dari operator tersebut sama persis seperti dalam pemrograman Java.

 VARIABEL dalam javascript variable cukup dideklarasikan dengan var (tidak harus). Tidak dibedakan apakah variabel itu bilangan(int, float) atau string. Contoh : var A=10; var B=”JOKO” , atau cukup A=10; B=”JOKO”

Comentar

(51)

// awal satu baris komentar

/*…*/ akhir dari beberapa baris komentar Kondisi

Seperti dalam bahasa pemrograman Java, kondisi dalam Javascript yaitu

 If (if, if-else, if-else if-else)

 Switch-case

Fungsi Tanggal dan waktu

 Membuat objek tanggal dengan new Date()

 Beberapa fungsi tanggal:

getDay() = angka hari getDate() = angka tanggal

getMonth() =angka bulan 0,1,..,11 getYear() = angka tahun

 Untuk mengakses jam : getHours()

getMinutes() getSeconds() Masukan data dari form

 Masukan data dari form diawali dengan mendefinisikan form dengan tag <form name=…>

 Selanjutnya dalam form dapat diletakkan komponen GUI seperti TextField atau

(52)

 Pada button didefinisikan kode javascript yang akan mengambil data dari form dan

memprosesnya

 Hasil proses ditampilkan kembali melalui form

Seleksi dengan radio

 Seleksi dengan radio adalah alternatif pada pilihan tunggal seperti menu  Definisi komponen radio :

input type=radio name=name value=nilai onClick=namafungsi(value)>

 Seleksi radio mana yang dipilih dengan :

 seleksi dilakukan dalam fungsi javaScript , misalnya  Nama fungsi adalah : pilih(value)

 Dalam definisi javaScript function pilih(arg)

{if(arg=value1) tindakan1 if(arg=value2) tindakan2 }

BASIC penulisan javascript <html>

<body>

(53)

</html> Contoh:

document.write("Belajar Javascript") </script>

</body> </html>

Jenis penulisan javascript

1. Head section

Format penulisan: <html>

<head>

</script> </head>

Contoh: <html> <head>

(54)

function message() {

alert("This alert box was called with the onload event") }

</script> </head>

</html>

2. Body section Format penulisan: <html>

document.write("Tulisan ini akan tampil pada saat loding ") </script>

</body> </html>

(55)

Penggunaan Variabel pada Javascript Format penulisan variabel:

Var namavar = “value” atau

Namavar = “value”

Contoh: <html> <body>

document.write("<h1>"+name+"</h1>") </script>

(56)

</body> </html>

JavaScript Popup Boxes

Di dalam bahasa JavaScript kita dapat membuat kotak pesan popup. Kotak pesan dalam javascript mempunyai 3 type yaitu:

1. Alert box

2. Alert box with line breaks 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")

(57)

alert("I am an alert box!!") }

</script> </head> <body>

</html>

Alert Box and line breaks <html>

<head>

{

alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!") }

(58)

</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 tombol “Cancel” maka halaman tidak akan diproses.

Syntax:

confirm("sometext")

(59)

if (r==true) {

document.write("You pressed OK!") }

else {

document.write("You pressed Cancel!") }

} </script> </head> <body>

(60)

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 input oleh user sesuai dengan pertanyaan yang di ajukan.

Setelah di input kemudian user mengklik tombol "OK" atau "Cancel". Untuk melanjutkan proses pilih tombol “OK” dan browser akan menampilkan hasil. Jika tombol “Cancel” kotak box akan kembali kosong untuk mengulang.

Syntax:

prompt("sometext","defaultvalue")

Contoh:

{

var name=prompt("Please enter your name","Harry Potter") if (name!=null && name!="")

{

document.write("Hello " + name + "! How are you today?") }

(61)

</html>

Fungsi pada JavaScript

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 jalankan oleh browser pada saat loading sebuah halaman web.

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 tempatkan script itu di bagian <head>

Contoh:

(62)

{

alert("Hello World!") }

</script> </head> <body> <form>

</body> </html>

Output dari scrip di atas adalah akan muncul tombol yang harus di clik bila ingin menampilkan pesan nya.

Bagaimana cara mendefinisikan sebuah Fungsi Sintak untuk membuat fungsi adalah:

function namafungsi (var1,var2,...,varX) {

kode teks

}

(63)

 var1, var2, adalah variable atau nilai suatu fungsi.

 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 di sarankan untuk menggunakan huruf kecil semua.

Contoh:

function prod(a,b) {

x=a*b return x } Jenis Fungsi:

Bahasa Javascript mempunyai beberapa type penulisan function. Di antaranya adalah:

1. Function Basic

How to call a function. 2. Function with arguments

How to pass a variable to a function, and use the variable in the function.

3. Function with arguments 2

(64)

4. Function that returns a value How to let the function return a value.

5. A function with arguments, that returns a value

How to let the function find the product of two arguments and return the result.

Contoh Fungsi:

{

alert("HELLO") }

<p>Tekan tombol untuk memanggil Function.</p> </body>

(65)

Contoh 1: Fungsi dengan argumen:

alert(txt) }

<p>Tekan tombol untuk memanggil function nya</p> </body>

(66)

Contoh 2: Fungsi dengan argumen

alert(txt) }

<p>Pilih Tombol untuk memanggil Function nya.</p> </body>

(67)

Output:

Contoh fungsi dengan nilai kembalian

return ("Hello, have a nice day!") }

(68)

</body> </html>

Contoh fungis dengan nilai kembalian

{

return a*b }

<p>Script dalam bagian body memanggil fungsi dengan 2 parameter (4 and 3).</p>

<p>fungsi akan memanggil kembali sesuai nilai parameter.</p> </body>

(69)

Latihan

1. Coba Jalan kan Program dibawah ini bagaimana hasilnya Event handler

<title>Contoh JS event Handler</title> </head>

<body>

<a href=”#” onclick=”alert(’Hallo. ini pesan dari JS Event Handler’)”>Klik

Disini…</a>

</body>

</html>

(70)

(71)

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.

T I U :

1. Mahasiswa mengenal mengenai mysql dan desain database.

T IK :

1. Mahasiswa mampu membuat database dengan mysql.

2. Mahasiswa mampu membuat desain database yang dapat digunakan dalam Mysql.

8.1. Pengantar 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 sebagai aktifitas dari satu atau lebih organisasi yang berelasi.

(72)

berguna bagi pihak tertentu misalnya manajer. Bagi pihak manajemen, informasi merupakan bahan bagi pengambilan keputusan.

MYSQL termasuk jenis RDBMS (Relasional Database Management System). Sedangkan RDBMS sendiri akan lebih banyak mengenal istilah seperti tabel, baris dan kolom digunakan dalam perintah-perintah di MYSQL. MYSQL merupakan sabuah basis 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 menghubungkan maupun memutuskan koneksi dengan server database MySQL sebagai sarana untuk mengumpulkan informasi.

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 MYSQL AB. MYSQL AB merupakan perusahaan komersial yang dibiayai oleh pengembang MYSQL.

Sebenarnya software MYSQL mempunyai dua macam lisensi. Lisensi pertama 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.

(73)

(RDBMS). Database terhubung menyimpan data pada tabel-tabel terpisah. Hal tersebut akan menambah kecepatan dan fleksibilitasnya.

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 platform, menyediakan mesin penyimpan transaksi dan nontransaksi, mempunyai library 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.

8.1.2. Tipe Data

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 field yaitu :

 Tipe data numerik

(74)

untuk bilangan desimal. Tipe data numerik selengkapnya dapat dilihat pada tabel 8.1 berikut ini:

Tabel 8.1 Tipe Data Numerik Tipe Data Kisaran Nilai

TINYINT (-128)-127 atau (0-255)

SMALLINT (-32768)-32767 atau (0-65535)

MEDIUMINT (-3888608)-8388607 atau 0-16777215

INT, INTEGER (-2147683648)-(21447683647) atau 0-4294967295 FLOAT (-3.4 E+38)-(-1.17E-38), 0 dan 1.175E-38-3.4e+38

DOUBLE (-1.79E+308)-(-2.225E-308), 0 dan 2.225E-308 – 1.79E+308

 Tipe data string

String adalah rangkaian karakter. Tipe-tipe data yang termasuk dalam tipe data string dapat dilihat pada tabel 8.2 berikut:

Tabel 8.2 Tipe Data String

Tipe Data Kisaran Nilai CHAR 1-255 karakter

 Tipe data char() dan varchar()

(75)

Tabel 8.3 Letak Perbedaan Jumlah Memori

’abcd’ ’abcd’ 4 bytes ’abcd’ 5 bytes

’abcdefgh’ ’abcd’ 4 bytes ’abcd’ 5 bytes

 Tipe data tanggal

Untuk tanggal dan jam, tersedia tipe-tipe data field berupa DATETIME, DATE, TIMESTAMP, TIME dan YEAR. Masing-masing tipe mempunyai kisaran nilai 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:

Tabel 8.4 Tipe Data Tanggal

Tipe Data Kisaran Nilai Memori

Penyimpanan DATETIME 1000-01-01 00:00 sampai 9999-12-31

23:59:59

3 byte

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

8.1.3. Operator MYSQL

MYSQL mendukung penggunaan operator-operator dan fungsi-fungsi diantaranya:  Operator Aritmetika

(76)

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 pembanding pada MYSQL berikut ini:

Tabel 8.6 Operator Pembanding MYSQL

Operator Keterangan

= Sama Dengan

> Lebih Besar

< Lebih Kecil

>= Lebih Besar atau Sama Dengan <= Lebih Kecil atau Sama Dengan <> Tidak Sama Dengan

Contoh:

(77)

Operator ini digunakan untuk membandingkan dua nilai variabel yang bertipe boolean. Tabel 8.7 berikut menunjukkan operator logika pada MYSQL:

Tabel 8.7 Operator Logika MYSQL 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:

Tabel 8.8 Tabel Operator Karakter

Operator Keterangan

% Sembarang karakter berapapun jumlahnya

_ Sembarang satu karakter

(78)

 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:

Tabel 8.9 Operator lain-lain

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. Untuk lebih jelasnyadapat dilihat dalam tabel 8.10 berikut ini:

Tabel 8.10 Fungsi Agregat

Operator Keterangan

(79)

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:

8.2. Perintah-Perintah Pada MYSQL

Query sebenarnya berarti permintaan atau perintah. Dengan menggunakan query, 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 bahkan halaman web.

Yang dimaksud dengan query pada MYSQL adalah query yang diciptakan dengan pernyataan-pernyataan SQL. SQL (Structured Query Language) adalah bahasa pemrograman yang digunakan untuk mengakses basis data relasional. SQL diciptakan oleh perusahaan IBM sekitar tahun 1970, pada waktu yang bersamaan dengan diperkenalkannya konsep relasional database. Setelah mengalami banyak perkembangan, 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 atas tiga golongan yaitu:

(80)

- CREATE – untuk membuat - ALTER – untuk mengubah - DROP – untuk menghapus

 Data Manipulation Language (DML) yang dapat mencari (query) dan mengubah (modify) suatu tabel. Perintah-perintah SQL yang tergolong DML diantaranya:

- SELECT – untuk membaca - INSERT – untuk memasukkan - UPDATE – untuk mengubah - DELETE – untuk menghapus

 Data Control Language (DCL) yang mengatur hak-hak (privilege) untuk seorang pemakai database.Perintah-perintah SQL yang trgolong DCL diantaranya:

- GRANT - REVOKE

Semua bahasa pemrograman mempunyai aturan gramatika. Beberapa aturan perlu diperhatikan pada saat menuliskan perintah-perintah bahasa SQL pada MYSQL adalah: 1. Semua pernyataan SQL ditutup dengan tanda koma (,).

2. Perintah SQL dapat ditulis dalam satu baris atau dipisah-pisah dalam beberapa baris agar mudah dibaca.

(81)

4. Isi dari tabel peka terhadap huruf besar atau kecil tergantung bagaimana isi tabel dimasukkan.

5. Pernyataan SQL harus ditulis menurut sintaks tertentu.

6. Pernyataan SQL dapat diberikan baris komentar untuk dokumentasi serta menjelaskan maksud pemrograman.

8.2.1. Create Database

Untuk membuat database dapat dilakukan dengan perintah sebagai berikut: CREATE DATABASE <nama_database>;

Jika ada komentar ”Query OK” berarti database telah terbuat. Contoh: CREATE DATABASE universitas;

8.2.2. Create Tabel

Dengan menggunakan SQL, maka bisa membuat tabel. Pernyataan yang digunakan berupa CREATE TABLE. Syntaxnya:

CREATE TABLE nama_tabel (

nama kolom 1 tipe data ([ukuran]), nama kolom 2 tipe data ([ukuran]), ...

(82)

8.2.3. Perintah Select, Insert, Delete, Update, Alter dan Drop

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 hingga bentuk yang kompleks seperti untuk memperoleh ringkasan data.

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)] VALUE ( Ekspresi [.Ekspresi]….) | Query);

(83)

- PERINTAH DELETE:

Perintah DELETE digunakan untuk menghapus data pada table. Bentuk umum pernyataan DELETE :

DELETE FROM nama table [WHERE kondisi]; Contoh:

- PERINTAH UPDATE:

Pernyataan UPDATE berguna untuk mengubah data. Bentuk umum perintah UPDATE :

UPDATE nama table SET kolom 1 = nilai baru 1, kolom 2 = nilai baru 2, …., kolom n = nilai baru n [WHERE kondisi];

Contoh :

- PERINTAH ALTER:

(84)

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 diperlukan maka bisa melakukannya dengan memakai pernyataan DROP TABLE. Dengan syntaxnya:

DROP TABLE nama table [CASCADE CONSTRAINTS]; Contoh:

8.3. Predikat MYSQL

Predikat diletakkan setelah klausa WHERE untuk pencarian record database agar mendapatkan string, karakter atau range tertentu.

1. LIKE dan NOT LIKE

- LIKE digunakan untuk mendapatkan record yang memenuhi sebagian kriteria pencarian yaitu mencari data yang menyerupai atau seperti. Perintah LIKE sering dikombinasikan dengan tanda “persen” (%) dan “underscore” (_). “%” digunakan di awal atau akhir teks kriteria sedangkan “_” dimanapun diinginkan. Syntax dasar dari SELECT yang melibatkan LIKE adalah:

(85)

- NOT LIKE merupakan lawan dari LIKE. Semua data yang masuk kriteria LIKE secara otomatis tidak masuk kriteria NOT LIKE.

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 perintah SELECT dengan BETWEEN adalah

select kolom1, kolom2, […] FROM NAMA_TABEL WHERE nama_kolom BETWEEN nilai1 and nilai2;

3. LIMIT

Memungkinkan pembatasan jumlah record yang diambil dari database. Sintaks: select kolom1, kolom2, […]FROM NAMA_TABEL LIMIT jumlah_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 semua baris sebagai hasil yang memenuhi suatu kondisi

5. LEFT JOIN

(86)

6. RIGHT JOIN

Suatu RIGHT JOIN akan menampilkan baris-baris sisi kanan kondisional yang memenuhi atau tidak memenuhi kondisi.

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

sama. Sintaks dasar:

select kolom1, kolom2 FROM NAMA_TABEL UNION

select kolom1, kolom2 FROM NAMA_TABEL;

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 (mengeliminir) baris-baris yang sama (duplicate rows) – hanya mengambil semua 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, DELETE, SET, DO. Sintaks:

select kolom1, kolom2, kolom3 […] FROM NAMA_TABEL

(87)

NAME_TABEL_LAIN);

8.4. Fungsi Pada MYSQL

PHP menyediakan fungsi untuk koneksi ke database dengan sejumlah fungsi untuk pengaturan baik menghubungkan maupun memutuskan koneksi dengan server database MySQL. Fungsi koneksi ke server database mengunakan pola yang sama yaitu server, port, user, password. Fungsi-fungsi tersebut adalah:

1. mysql_connect(host,user,password)

Fungsi ini digunakan untuk membuka koneksi dengan server MySQL. Parameter yang digunakan sebagai berikut:

Host: nama server dengan server local dapat dengan menggunakan localhost. User: user yang terdaftar dalam MySQL yang digunakan untuk login ke server. Password: password dari user yang melakukan koneksi.

Contoh:

2. mysql_select_db(nama_database,nama_koneksi)

Fungsi ini digunakn untuk memilih database yang akan digunakan. Contoh:

(88)

Perintah ini digunakan untuk mengirimkan query ke server database melalui link

nama koneksi. Fungsi ini mengembalikan nilai FALSE baik CREATE, UPDATE, DELETE,

DROP, dll. Contoh:

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 index assosiatif dengan index adalah nama field dari table.

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 pertama samapai n-1 untuk kolom terakhir hasil query.

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, no_record, untuk nomor baris (dimulai dari 0) dan nama field.

7. mysql_num_field(hasil_query)