modul pemweb by Aplusman

VIEWS: 653 PAGES: 140

More Info
									                    KONSEP DASAR HTML


A. Over View
  HTML (Hypertext Markup Language) merupakan bahasa yang digunakan
  untuk membentuk format suatu dokumen yang tentunya dapat dibaca
  dari berbagai platform komputer manapun. Dokumen HTML merupakan
  file yang secara umumnya beresktensi .htm atau .html. HTML tersusun
  atas tag yang berformat < isi tag > Struktur Umum Dokumen HTML
  Secara umum semua dokumen HTML (halaman web), mempunyai
  struktur sebagai berikut:
          <html>
          <head>
          </head>
          <body>
               Teks yang akan ditampilkan di sini
          </body>
          </html>
  Web browser akan melakukan penerjemahan dokumen untuk diformatkan
  dalam
  bentuk HTML jika dokumen tersebut terdapat antara tag <html> dan
  </html>.


B. Document Head
  Dalam   bagian    head    kita   dapat   meletakkan   beberapa   tag   yang
  diperkenankan, yaitu
     <title></title> merupakan tag yang mendeklarasikan judul dari suatu
      dokumen html
     <link href=‖…‖> merupakan tag yang menyatakan hubungan antara
      suatu
     dokumen dengan dokumen lainnya.
      <style ahref=‖…‖> merupakan tag yang mendefinisikan style dari
       dokumen.


Contoh:
          <html>
          <head>
          <title>Belajar HTML</title>
          </head>
          <body>
          Teks dokumen di sini
          </body>
          </html>


C. Atribut pada <BODY>
   Dalam bagian body ada beberapa atribut yang diperkenankan yaitu:
   Color, Background, Text color, dan Link color.
Contoh:
        <html>
        <head>
        <title>Dokumen Body</title>
        </head>
        <body bgcolor="#00FFFF" text="#FF0000" link="#0000FF"
        link="#800080" alink="#FF0000"> Warna Teks
        </body>
        </html>


D. Format text
Teks mempunyai bentuk dalam pemformatan, berikut merupakan hal-hal
yang akan digunakan dalam pemformatan teks.
      Font, size, and color : <font face=‖…‖ size=‖..‖ color=‖…‖> </font>
      Paragraf, dalam tag       :<p> </p> memungkinkan suatu teks
       diformatkan dalam bentuk paragraf.
      Perataan (alignment), format paragraf dituliskan dengan dengan
       atribut align dengan format yang diperkenankan adalah rata kanan
       (right), rata kiri (left), rata tengah (center), dan rata kanan-kiri
       (justify).
      Preformatted Text :        <pre> </pre>    Document Division       <div
       align=‖…‖>
      Line break : <hr align="…" size="…" color="…">
      Comment : <!-- Komentar --!>


E. Image
   Gambar atau image adalah halaman Web memegang fungis yang sangat
   penting. Selain fungsinya untuk informasi image akan menambahkan
   unsur artistik yang akan membuat halaman web nampak lebih hidup
   sehingga akan lebih menarik.
   Dalam halaman web yang umum digunakan ada dua jenis format image
   yang sering dipakai yaitu format .GIF dan .JPG atau .JPE. Kedua format
   masing-masing mempunyai kelebihan dan kelemahan pada sisi tertentu.
   Untuk itu kita harus pandai-pandai dalam menentukan penggunaan
   format file image. Kedua format file ini adalah termasuk file image yang
   telah     terkompress   (dimampatkan     sehingga   menyusun      mengecil
   ukurannya).


Sintaks :
   <IMG SRC="URL image " HEIGHT="ukuran inggi image, dalam pixel"
   WIDTH="pixel_value"              ALT="Teks           Tool             Tips"
   ALIGN="left|right|top|texttop|middle|”   BORDER="lebar      border,   dalam
   pixel">


   Hyperlink dan Border pada image
   Pada image, kita dapat menambahkan hyperlink agar bila di-click akan
   menuju URL yang kita inginkan. Penambahan hyperlink ini tetap sama,
   yaitu dengan mengapitkan tag <A> dan </A> pada tag <IMG>. Sintaks
   untuk tag <A> dan tag <IMG> tetap sama.
   Namun, ketika suatu hyperlink ditambahkan pada image, pada tampilan
   browser akan mucul border yang melingkupi image tersebut. Border ini
   muncul karena adanya link, dan memiliki warna seperti halnya warna link
   pada teks. Untuk menghilangkan border ini, perlu ditambahkan atribut
   BORDER=‖0‖ pada tag <IMG>


F. HYPERLINK
Kehandalan utama HTML pada awalnya adalah terletak pada kemampuan
HTML untuk berhubungan dengan dokumen lain pada jaringan. Pedoman ini
yang melatari kelahiran hyperlink, yang hanya tinggal ―di-click‖ pada suatu
link   dengan     menggunakan      mouse,      kita   sudah      dapat   menikmati
pengembaraan di dunia WWW.
Pembuatan link di HTML dilakukan dengan menggunakan tag <A HREF>. Jika
HREF diberikan, maka antara page tersebut dengan URL yang didefinisikan
telah terdapat hubungan hyperlink.
Contoh penggunaan HREF:
<A HREF=‖http://www.jogja-it.com‖>Jogja-it.com</A>
Ada beberapa elemen dalam tag tersebut, yaitu:
Link dalam satu halaman <a href=‖#…‖>
Jika pada atribut HREF diberikan HREF=‖#identifier‖, maka link akan menuju
ANCHOR yang dimaksud, yaitu bagian pada page yang diberi identitas
―identifier‖.
<a name=‖…‖> Jika diberikan, maka atribut NAME akan mengizinkan
pemakaian       ANCHOR   ini   sebagai   target.   Tidak   ada   ketentuan   dalam
pemberian nilai untuk NAME, hanya saja nilai yang diberikan tidak boleh
mengandung spasi, case sensitive, dan harus tidak ada yang memiliki NAME
yang sama pada page tersebut.
Misalkan:
penggunaan berikut ini untuk contoh ANCHOR:
<A NAME="coffee">Coffee</A> is an example of...
Maka untuk membuat link ke ANCHOR tersebut, dilakukan dengan <A HREF=
"#coffee">coffee</A>. Untuk page lain yang hendak dibuatkan link menuju
ANCHOR tersebut, maka diberikan perintah <A HREF="drinks.html#coffee">
 Link ke halaman lain
<a href=‖..‘> Hyperlink ke halaman </a>
Contoh:
<a href=‖profil.html>Profil Perusahaan</a>
 Link ke servis internet lain


HTTP
<a href=‖http://…‖> Hyperlink ke http </a>
FTP
<a href=‖ftp://…‖> Hyperlink ke ftp </a>
Mailto
<a href=‖mailto:…‖> Hyperlink ke ftp </a>


G. F O R M
Form merupakan kumpulan dari beberapa field pada suatu page. Form
handler merupakan suatu metoda pengumpulan informasi. Field adalah
tempat pemasukan data pada suatu page. Form merupakan kunci untuk
membuat interaktivitas web dengan penggunanya. Pengguna memberikan
informasi pada field dengan menuliskan teks atau dengan memilih nilai-nilai
yang ada pada field, dan kemudian dikirimkan dengan menekan tombol yang
biasa diberi label submit, yang kemudian oleh suatu program di server, nilai
pada field dari form akan diolah dan diberikan hasilnya.
Penggunaan form di internet terus berkembang. Namun, secara umum
digunakan untuk mencari informasi nama, alamat, nomor telepon, email, dan
informasi yang lain berkenaan dengan proses registrasi pada suatu layanan
atau acara, proses umpan balik untuk suatu situs web, atau pada proses
pembelian secara online. Form juga digunakan pada search engine.
Tag <FORM>
Tag ini memiliki beberapa properti. Properti yang sering digunakan adalah:
NAME, untuk mendefinisikan identitas dari form tersebut. Penamaan ini
diperlukan untuk pengenalan form dan aksi yang dilakukan, karena dalam
satu page bisa terdapat form lebih dari satu.
ACTION, untuk mendefinisikan ke mana form akan dikirimkan. Aksi ini
biasanya berupa URL program di server yang akan melakukan proses pada
isi form. Program dapat berupa script (seperti ASP, CGI, PHP, dan lain-lain),
ISAPI, atau yang lain, misalkan bot FrontPage.
METHOD, merupakan metoda yang akan dilakukan bila form tersebut dikirim.
Ada beberapa metoda, yaitu POST dan GET. Metoda POST biasanya
digunakan pada pengiriman isi form untuk disimpan di database.
Metoda GET untuk mendapatkan hasil pengolahan yang dilakukan oleh
program di server dan hasilnya akan diberikan. Kedua metoda ini memiliki
otoritas tersendiri dalam penggunaannya. Biasanya yang dapat melakukan
metoda POST adalah yang diberi otoritas untuk mengubah database,
misalkan administrator.
ONSUBMIT, merupakan aksi yang dilakukan sebelum form benar-benar
dikirimkan, biasanya berupa validasi isi field agar sesuai dengan yang
dikehendaki pembuatnya, seperti validasi penulisan email, nomor telepon,
kode pos, nomor kartu kredit, dan lain-lain.


Contoh pengkodean HTML untuk form:
<FORM     Name="InputForm"        METHOD="POST"       ACTION="Message.asp"
onSubmit = "return Validate()"> One-line Text Boxes
Field input ini digunakan untuk mendapatkan informasi teks yang pendek,
seperti untuk pengisian nama, password, kota, atau yang lain.
Untuk membuat dua field di atas, maka digunakan:
<input type="text" name="Nama" size="20" value="Sukab">
<input type="password" name="Passoword" size="20">
Bila pada tag input tersebut diberi nilai untuk properti VALUE, maka akan
ditampilkan nilai tersebut sebagai default.
Scrolling Text Boxes
Input ini sering digunakan untuk mengisikan teks yang cukup panjang,
seperti alamat yang hingga beberapa baris, ataupun untuk menuliskan isi
berita saat kita hendak mengirimkan email.
Untuk membuat field tersebut:
<textarea rows="2" name="Alamat" cols="20">
</textarea>
Radio Buttons
Input ini menyediakan pilihan bagi pengguna yang harus dipilih salah satu,
tida bisa lebih dari satu.
Untuk memberikan nilai default, maka pada salah satu radio button diberi
properti CHECKED.
<input type="radio" value="1" checked name="Pilihan">
Pilihan Pertama<br><input type="radio" value="2" name="Pilihan">Pilihan
Kedua<br><input type="radio" value="3" name="Pilihan">Pilihan Ketiga
Untuk penggunaan beberapa klasifikasi radio button, misalkan pada
penggunaan dalam satu page pengguna harus memilih field jenis kelamin
(pria/   wanita)   dan   persetujuan   (setuju/   tidak   setuju),   maka   untuk
masingmasing
kriteria yang berbeda diberi penjelasan NAME yang berbeda, dan
untuk kriteria yang sama diberikan penjelasan NAME yang sama.
 Check Boxes
Pada input check box, pengguna diizinkan memilih lebih dari satu pilihan.
Untuk pemebrian default nilain pada salah satu box, maka diberi ptoperti
CHECKED.
Pada penggunan untuk banyak kriteria, seperti halnya pada radio button,
tinggal properti NAME yang dibedakan untuk krioteria yang berbeda.
<input type="checkbox" value="1" name="Pilihan" checked>Pilihan
Pertama<br><input type="checkbox" value="2" name="Pilihan">Pilihan
Kedua<br><input type="checkbox" value="3" name="Pilihan">Pilihan
Ketiga
 Drop-Down Menus
Dropdown menu akan membuat pengguna memberikan pilihan yang
tampilannya bisa lebih ringkas. Input ini juga memungkinkan pengguna
memilih hanya satu pilihan, atau bisa lebih dari satu dengan menambahkan
properti MULTIPLE pada tag SELECT. Penambahan pilihan diberikan dengan
menambahkan tag <OPTION>.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 7 of 107
<p><select name="Pilihan" size="1">
<option value="1">Pilihan Pertama</option>
<option value="2">Pilihan Kedua</option>
<option value="3">Pilihan Ketiga</option>
<option value="4">Pilihan Keempat</option>
</select></p>
<p><select name="Pilihan" size="3" multiple>
<option value="1">Pilihan Pertama</option>
<option value="2">Pilihan Kedua</option>
<option value="3">Pilihan Ketiga</option>
<option value="4">Pilihan Keempat</option>
</select></p>
 Push Buttons and Image Fields
Push button digunakan untuk mengirimkan form sesuai yang telah
didefinisikan. Ada dua jenis push button, yaitu untuk submit dan reset.
Submit berarti mengirimkan isi form, sedangkan reset akan menghapus
semua isi field yang kita isikan, bila kita ingin mengulangi pengisian.
<input type="submit" value="Submit" name="Submit">
<input type="reset" value="Reset" name="Submit">
Pengiriman form, tidak selamanya harus berupa tombol, dapat berupa
image, disebut image field. Pemberian properti untuk ini ada kesamaan
dengan tag IMG.
<input alt="Go" border="0" type="image" name="Go" src="images/go.gif"
WIDTH="31" HEIGHT="27">
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 8 of 107
H. T A B L E
Tabel terdiri dari sel yang tersusun atas baris dan kolom. Tabel dapat
memuat apa
saja yang kita ingin muat pada page, seperti teks, image, form, dan lain-lain.
Tabel
juga bisa digunakan untuk mengatur penampilan data secara sistematik,
ataupun
untuk mengatur layout suatu page yang kita buat.
       1. Dasar Tabel
Pada pembuatan tabel, selalu berada di lingkungan tag <TABLE> dan
</TABLE>
dan di antaranya dimasukkan perintah pembuatan baris dan kolom.
Pembuatan
baris, selalu mendahului pembuatan kolom.
       2. Alignment
 Tabel
Aligning tabel adalah posisi peletakan tabel pada paragraf, dapat berada di
kiri
(default), kanan, atau tengah.
 Pada baris, kolom, atau, sel
Dalam sel (baik baris maupun kolom), aligning dapat diset untuk kiri
(default,
kanan, ataupun tengah).
   3. Atribut table
 Pengesetan ukuran
Ukuran tabel dapat diset secara relatif terhadap page, menggunakan
persentasi,
ataupun dalam pixel.
 Space antarsel
Jarak antarsel didefinisikan dengan CELSPACING. Hal ini akan sangat terlihat
bila
pada tabel diberi atribut BORDER.
 Space dalam sel
Jarak dalams sel didefinisikan dengan CELSPADING. Jarak ini akan nampak
bila
kita menggunakan BORDER dan menunjukkan jarak elemen yang ditaruh
dalam
sel, misalkan teks, dengan border.
   4. Penggabungan Beberapa Baris atau Kolom
Pada    penggunaan     penggabungan   antarsel,   digunakan   COLSPAN   dan
ROWSPAN.
Contoh:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>></td>
<td>></td>
</tr>
</table>
             DASAR-DASAR DREAMWEAVER
A. PENDAHULUAN
Sebelum ini Anda telah diperkenalkan dengan elemen-elemen HTML,
atribut-atributnya, dan struktur dokumen HTML. Kabar baiknya adalah
bahwa
Anda tidak perlu mengetikkan semua kode HTML tersebut melalui keyboard.
Dreamweaver akan membuat pekerjaan Anda dalam membuat halaman web
HTML semakin mudah.
Macromedia Dreamweaver 4 adalah sebuah tools desain web yang penuh
dengan fasilitas. Baik designer pemula maupun designer profesional akan
dapat
menyesuaikan diri dan mengambil manfaat dari Dreamweaver. Anda dapat
menggunakan Dreamweaver untuk membuat desain secara visual dengan
Layout
view, atau mengetikkan kode HTML pada Code view. Cara apapun yang Anda
suka, Anda akan mendapati bahwa Macromedia Dreamweaver 4.0 akan
mempermudah Anda membuat dan mengatur situs Anda.
B. DASAR-DASAR DREAMWEAVER
Ketika Anda memulai Dreamweaver, Anda akan mendapati Document
window serta beberapa panel untuk menambahkan atau mengubah text dan
objects di halaman tersebut. Object panel digunakan untuk menambahkan
obyek
seperti gambar, tabel, layer, atau animasi Flash ke dalam halaman tersebut.
Semua panel dan Property inspector dapat diakses dari Window menu. Check
mark di samping nama panel pada Window menu menunjukkan panel yang
terbuka, apabila tidak terlihat, karena mungkin tertumpuk panel yang lain,
pilih
lagi panel tersebut di Window menu. Apabila masih belum terlihat, pilih
Window
> Arrange Panels untuk mengembalikan posisi setiap panel ke posisi default
nya.
   1. Document Window
Document window adalah tempat dimana Anda akan mengerjakan sebagian
besar dari pekerjaan desain Anda (lihat gambar 1.1). Di sini akan nampak
halaman yang sedang Anda kerjakan, title bar akan berisi title dan nama
halaman tersebut.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 10 of 107
Gambar – Document View.
   2. Objects Panel
Objects Panel mamuat object dan elemen yang dapat Anda tambahkan ke
dalam halaman Anda. Diantaranya, gambar, tabel, karakter khusus, form,
dan
frames. Untuk memasukkan object Anda dapat menentukan insertion point,
kemudian klik salah satu Icon pada Objects Panel, atau, drag Icon dari
Objects
Panel ke lokasi di mana Anda ingin memasukkannya. Objects panel
sebenarnya
memiliki beberapa sub panel. Contohnya, untuk membuat form, object yang
Anda butuhkan terdapat di Form Object Panel. Untuk memilihnya gunakan
popup
menu di atas Object panel (defaultnya adalah Common Objects Panel).
Gambar – Objects Panel
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 11 of 107
   3. Property Inspector
Dengan Property inspector (lihat gambar 1-3), Anda dapat melihat dan
mengubah atribut dari suatu object. Isi Property inspector berubah ubah
sesuai
dengan apa yang Anda select di Document window. Apabila ada property
yang
belum nampak, klik expander arrow di sudut kanan bawah Property
inspector.
Gambar – Property Inspector
C. MEMBUAT SITUS LOKAL
Sebelum Anda membuat halaman-halaman web, Anda perlu membuat situs
untuk memuat halaman-halaman tersebut. Situs lokal pada Harddisk akan
mencerminkan keberadaannya pada Web Server. Di situs lokal inilah Anda
akan
dapat melakukan pengembangan dan pengetesan. Untuk membuat situs
lokal,
langkah pertamanya adalah membuat sebuah folder baru di Harddisk Anda.
Setelah Anda membuat situs lokal, root folder yang Anda pilih akan memuat
seluruh sub-folder dan isi website Anda seluruhnya. Ketika Anda perlu untuk
memuatnya di web server, yang perlu Anda lakukan adalah mengupload
folder
root tersebut dan seluruh isinya ke folder root di web server. Dan semua link
serta gambar akan bekerja sama seperti kondisi di situs lokal. Anda harus
menyimpan (save) pekerjaan Anda di situs lokal sebelum link site-root-
relative
atau link document-relative akan bekerja dengan baik.
Site-root-relative path – merujuk sebuah dokumen dengan path yang
bermula di root folder menuju ke lokasi dokumen di dalam sebuah situs.
Dapat
digunakan untuk link ke sebuah halaman di dalam situs dengan root folder
yang
sama.
Absolute path – merujuk sebuah dokumen dengan URL lengkap, termasuk
protocol yang digunakan (biasanya http:// untuk halaman web). Dapat
digunakan untuk link ke luar situs atau dokumen di sebuah server yang
terpisah.
Document-relative path- merujuk sebuah dokumen dengan path dari
dokumen yang sedang terbuka. Sebuah file html di folder yang sama akan
berupa ‗file.html‘, sedangkan jika berada di sub folder ‗pages‘ akan berupa
‗/pages/file.html‘ dan jika berada di parent folder ‗../file.html‘.
Membuat situs lokal baru:
1. Pilih Site > Define Sites.
Dialog box Define Sites (lihat gambar 1-4) akan terbuka, menunjukkan situs
lokal yang telah ada. Anda dapat membuat situs lokal baru dari sini.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 12 of 107
Gambar - Dialog box Define Sites
2. Klik New untuk membuat situs lokal baru.Dialog box Site Definition akan
terbuka seperti pada gambar 1-5.
Gambar – Dialog box Site Definition
3. Nama situs yang Anda berikan dapat berupa apa saja (hanya untuk
referensi
Anda). Untuk pelatihan ini, tuliskan Nama Anda di Site Name pada dialog
box Site Definition.
4. Klik icon folder di samping text box Local Root Folder.
5. Pilih folder NEXTECH di drive C yang telah disediakan untuk pelatihan ini.
6. Dalam Dialog box Site Definition pilih Refresh Local File List
Automatically. Agar daftar file lokal akan secara otomatis refresh jika Anda
menambahkan atau membuat file baru.
7. Pilih Enable Cache kemudian klik OK.
8. Jika message box ‗The initial site cache will be created‘ muncul, klik OK,
kemudian klik Done.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 13 of 107
D. MENYIMPAN FILE ANDA
Anda sebaiknya langsung menyimpan (save) file Anda segera setelah Anda
membuat file HTML baru pada Dreamweaver. Jangan menunggu hingga
halaman
tersebut terisi text dan obyek grafis. Dengan demikian ketika Anda
memasukkan
obyek grafis, semua referensi (termasuk path) akan terbentuk dengan benar.
Penamaan file HTML
Sebaiknya Anda mengetahui Sistem operasi pada web server yang akan
Anda gunakan karena kemungkinannya penamaan file yang digunakan
berbedabeda.
Web server UNIX akan memerlukan nama yang case-sensitive sehingga
FILE.html akan berbeda dengan file.html. Sementara web server berbasis
Windows tidak. Dengan demikian, cara yang paling aman, terlebih jika Anda
tidak mengetahui dengan pasti jenis system operasi yang ada pada web
server
adalah, gunakan huruf kecil, nama file pendek, jangan gunakan spasi,
gunakan
underscore atau dash untuk mensimulasikan spasi (contoh: my_home.html)
E. GAMBARAN PELATIHAN 1
Dalam pelatihan ini, Anda akan membuat halaman web sederhana dan
mempelajari cara-cara untuk memformat text. Berikut ini adalah garis besar
praktek pembuatan halaman web sederhana tersebut, bentuk jadi dari
halaman
tersebut dapat Anda lihat di nextech_fin.html di C:\NEXTECH\. Langkah
detail
dari pelajaran ini akan diberikan di halaman selanjutnya.
1. Buka file nextech.htm pada folder NEXTECH
2. Ubah warna backgroundnya menjadi 00CCFF.
3. Ketik NEXTECH, Inc. pada halaman tersebut, tag sebagai Heading 2
4. Indent 6 paragraf pertama.
5. Pilih text dari ‗Recruit core-code-programmer‘ hingga ‗overall project work‘
buat menjadi ordered list, ubah tipe list menjadi Alphabet Small.
6. Pilih text dari ‗Jokja High-speed internet‘ hingga ‗Tourism Promotional
Website‘ buat menjadi unordered list.
7. Pilih text dari ‗C++ software development‘ hingga ‗Adobe Photoshop‘, buat
definition list, dan buat definition term menjadi bold.
8. Buat paragraf baru pada kata-kata ‗Sign up at‘ dan sebuah line break
setelah
text tersebut.
9. Penggal-penggal dengan line break, alamat pada Sign up at.
10. Ketengahkan Heading pada awal halaman ubah font dan warnanya, pilih
warna 003366 pada Color Favorites di Assets Panel.
Memberi title
Setiap halaman web seharusnya memiliki Title. Digunakan untuk
identifikasi, title ditampilkan di title bar browser dan nama bookmark. Pilih
frase
pendek yang mencerminkan isi halaman web.
Biasakan untuk langsung memberi title pada halaman baru Anda, jika Anda
lupa Dreamweaver memiliki default ―Untitled Document‖–yang tidak akan
pernah
Anda inginkan untuk menjadi title halaman web Anda.
Untuk menambahkan title:
1. Buka file nextech.htm pada folder NEXTECH.
2. Jika anda tidak melihat text box Title di bagian atas Document window,
pilih
View > Toolbar.
3. Ketik ‗Nextech, Inc. - Company Profile‘ pada text box Title kemudian tekan
Enter, atau klik pada dokumen.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 14 of 107
Memilih warna background, font dan link
Dalam Dreamweaver, mengubah warna background, font dan link dapat
dilakukan dengan mudah, cukup memilih dari Web-safe color pallete yang
telah
tersedia pada Page Properties.
Untuk mengubah Page Properties:
1. Pilih Modify > Page Properties.
Dialog box Page Properties akan muncul seperti pada gambar 1-6
Gambar – Dialog Box Page Properties
2. Klik kotak Background Color.
Sebuah palet warna muncul.
3. Gerakkan eyedropper di atas warna, nilai heksadesimal equivalen dari
warna
tersebut akan tertera di bagian atas palet warna.
4. Klik warna 00CCFF atau ketikkan pada text box Background. Anda tidak
perlu
menambahkan tanda # di awal warna.
5. Klik Apply untuk melihat perubahan dokumen Anda.
6. Lakukan perubahan untuk Text menjadi warna 000066
7. Lakukan perubahan untuk Links menjadi warna 003399
8. Lakukan perubahan untuk Visited Links menjadi warna CC3333
9. Klik Apply untuk melihat perubahan dokumen Anda.
Memasukkan text dalam halaman HTML
Anda dapat melakukan drag and drop atau copy-paste dari aplikasi lain,
misalnya notepad, untuk memasukkan text. Pada pelatihan 1 ini kita akan
terus
menggunakan nextech.htm untuk mempelajari bagaimana menambahkan
dan
cara format text.
Menambahkan text pada halaman web:
1. Tambahkan baris baru pada bagian paling atas halaman
2. Ketikkan ‗NEXTECH, Inc.‘ pada baris tersebut.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 15 of 107
3. Dari Pop-up-menu Format pada Property Inspector pilih Heading 2 (lihat
gambar).
Anda kini telah memformat teks tersebur sebagai Heading 2.
Gambar – Pop-up-menu Format pada Property Inspector
Memberi text indent
Memberi Indent pada Paragraf:
1. Pilih enam paragraf pertama dari nextech.html.
2. Klik Text Indent pada Property Inspector atau pilih Text > Indent.
Gambar – Text Indent dan Outdent pada Property Inspector
Menghapus Indent pada Paragraf:
1. Pilih dua paragraf pertama dari nextech.html.
2. Klik Text Outdent pada Property Inspector atau pilih Text > Outdent.
3. Simpan file Anda dan preview di browser (F12).
Membuat list
Ordered List:
1. Pilih text dari ‗Recruit core-code-programmer‘ hingga ‗overall project
work‘.
2. Buat menjadi ordered list dengan klik icon ordered list pada Property
Inspector atau pilih Text > List > Ordered List.
Gambar – Unordered dan Ordered List pada Property Inspector
3. Ubah tipe list menjadi Alphabet Small dengan cara klik List Item pada
Property inspector atau pilih Text > List > Properties.
4. Pada Style pilih Small Alphabet, klik OK.
Gambar –Memilih Style pada List Properties
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 16 of 107
Unordered List:
1. Pilih text dari ‗Jokja High-speed internet‘ hingga ‗Tourism Promotional
Website‘
2. Buat menjadi unordered list dengan klik icon unordered list pada Property
Inspector atau pilih Text > List > Unordered List.
3. Ubah tipe list menjadi Square dengan cara klik List Item pada Property
inspector atau pilih Text > List > Properties.
4. Pada Style pilih Square, klik OK.
Definition List:
1. Pilih text dari ‗C++ software development‘ hingga ‗Adobe Photoshop‘.
2. Pilih Text > List > Definition List.
Kini Posisi berada di batas kiri, dan penjelasannya ada di indent baris
berikutnya
3. Simpan File dan Preview di browser.
Menambahkan format karakter
Bold:
1. Pilih text ‗C++ software development coordinator‘ dari definition list yang
baru Anda buat.
2. Klik Bold (huruf B kapital gelap) pada property inspector atau pilih Text >
Style > Bold.
Sekarang format Bold sudah ditambahkan.
Seringkali Anda akan memerlukan pengulangan perintah, gunakan Repeat
(CTRL+Y)     untuk   mengulang      perintah,   dan   Undo    (CTRL+Z)      untuk
membatalkan
perintah.
Mengulang perintah:
1. Pilih text ‗Delphi software development coordinator‘ dari definition list.
2. Gunakan CTRL+Y.
Format bold (perintah terakhir yang Anda gunakan) kini ditambahkan.
3. Ulangi Perintah Bold untuk dua Posisi lainnya.
Pengaturan teks
Adakalanya kita membutuhkan untuk pindah baris namun bukan untuk
membuat paragraf baru, maka kita memerlukan line break. Atau mungkin
meletakkan beberapa kata seperti Judul agar berada di tengah halaman,
bukan
Rata kiri.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 17 of 107
Membuat Line Break:
1. Letakkan kursor sebelum kalimat yang akan diberi garis.
2. Tekan Shift+Enter dan text tersebut akan pindah satu baris ke bawah
namun tidak membentuk paragraf baru, hanya seperti 1 spasi.
4. Taruh kursor di awal ‗Sign up at‘, kemudian tekan Enter untuk membuat
paragraf baru.
5. Simpan file dan preview di Browser.
Mengetengahkan text:
1. Letakkan Kursor di awal kata-kata ‗Our running projects‘.
2. Klik Align Center pada Property Inspector (lihat gambar 1-11)
Kini Judul tersebut berada di tengah.
Gambar –Icon Align Center pada Property Inspector
Property Font
Pada Web, Anda tidak dapat sepenuhnya mengontrol agar apa yang Anda
buat dilihat sama oleh semua pengunjung situs Anda. Bahkan pada browser
yang
berbeda, hasilnya dapat nampak sangat berbeda. Namun kita dapat
setidaknya
membuat agar tulisan kita lebih mudah dibaca misalnya dengan mengganti
font.
Walaupun karena perbedaan perbedaan dukungan browser, dan perbedaan
Sistem Operasi, hal ini tetap terbatas.
Mengubah font text:
1. Pilih kata-kata ‗Our running projects‘.
2. Dari Pop-up-menu Font pada Property Inspector (lihat gambar 1-12) Pilih
Arial, Helvetica, Sans-serif.
Font berubah sesuai dengan font yang terinstall pada komputer Anda.
Gambar –Pop-up-menu Fonts pada Property Inspector
Untuk mengubah font text lainnya cukup select dan ulang langkah 2
Menghapus format font text:
1. Pilih kata-kata yang ingin Anda hapus format font nya
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 18 of 107
2. Dari Pop-up-menu Font pada Property Inspector (lihat gambar) Pilih
Default
Font atau pilih Text > Font > Default Font.
Gambar –Property Inspector dengan Default Font terpilih
Mengubah warna text:
1. Pilih kata-kata ‗Our running projects‘.
2. Di kotak warna pada Property Inspector pilih #003366.
Warna judul kini berubah menjadi Biru tua.
HTML Styles
Jika Anda ingin membuat situs Anda lebih menarik tentunya Anda akan
menggunakan Font dan warna yang menarik. Misalkan Anda menemukan
sebuah
setting font ukuran     dan warna yang       menarik, Anda mungkin perlu
mengingatnya
untuk halaman halaman berikutnya jika Anda mengerjakannya bukan dengan
Dreamweaver. Pada Dreamweaver tersedia HTML Styles yang menyimpan
format
text tersebut untuk dapat Anda tambahkan ke text yang lainnya.
Membuat HTML Styles berdasarkan text yang sudah ada:
1. Kembali pilih text ‗C++ software development coordinator‘ dari definition
list
yang sebelumny telah Anda buat Bold.
2. Tambahkan warna #003366 seperti pada ‗Our running projects‘.
3. Pilih Window > HTMLStyles untuk mengakses Panel HTML Styles seperti
pada gambar .
4. Klik New Style (ada tanda tambah) di bagian bawah panel
Gambar - Panel HTML Styles
Dialog Box Define HTML Styles nampak seperti pada gambar dibawah
Gambar-Dialog Box Define HTML Styles
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 19 of 107
5. Beri nama Boldit dan pilih Paragraph dari Apply To, Klik OK
6. Pilih Judul ‗NEXTECH, Inc.‘ Klik Boldit dari Panel HTML.
7. Tambahkan pula pada posisi posisi coordinator yang ditawarkan.
Kini formatnya sama dengan judul di bawah.
8. Buat HTML Style baru ‗RedBold‘ dengan ukuran 5 dan warna #660000 dan
Apply to Selection.
9. Tambahkan pada Our Vision, Our Mission, Our Product dan Our
Community.
Menambahkan horizontal rule, karakter khusus, E-mail link, dan
tanggal
Membuat Horizontal Rule:
1. Drag Horizontal Rule dari Common Objects Panel ke bagian paling bawah
halaman, atau pilih Insert > Horizontal Rule.
2. Pada Property Inspector, ketikkan 90 dalam text box W (width), pilih
persen
(%) (lihat gambar).
Gambar – Property Inspector dengan Properties untuk Horizontal Rule
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 20 of 107
Menambahkan Karakter Khusus:
1. Dari Character Objects Panel, drag Copyright ke bagian paling
bawah halaman (lihat gambar 1-17)
2. Di sebelah kanannya ketikkan ‗2001 Nextech, Inc.‘
Gambar– Dialog Box Insert Email Link
Gambar Character Objects Panel
Menambahkan Email Link:
1. Klik Email Link pada Common Object Panel, Isi seperti pada gambar 1-18.
Menambahkan Tanggal:
1. Setelah Email Link beri line break lalu ketikkan Last Updated on.
2. Pilih Date pada Common Object Panel, pilih ‗Thursday,‘,‘7 March,
1974‘,‘10:18 PM‘ dan Update Automatically on Save..
Membuat text Flash
1. Di bagian paling bawah halaman, buat baris baru.
2. Pilih Flash Text pada Common Object Panel.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 21 of 107
Dialog Box Insert Flash Text akan muncul seperti pada gambar 1-19
Gambar –Dialog box Insert Flash Text
3. Lakukan perubahan sebagai berikut:
• Pilih Dungeon pada Font Pop-up-menu (atau yang lain bila tidak ada
pada komputer Anda)
• Pada Ukuran ketik 30, pada Color pilih #6666CC, Rollover Color
#3333FF, dan Bg Color #00CCFF.
• Pada Text ketikkan Prepare to be one of us
4. Pada Save As, ketikkan prepare.swf
5. Save, dan preview pada browser.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com

         BEKERJA DENGAN ELEMEN GRAFIS
A. FORMAT GRAFIS
Saat ini semua browser mendukung format grafis GIF dan JPEG. Secara
garis besar, gunakan GIF jika grafik Anda memiliki blok warna yang cukup
besar
dan tanpa gradasi, dan gunakan JPEG untuk foto atau grafik dengan gradasi
dan
perubahan tone yang mencolok.
GIF tersimpan dengan format warna 8-bit, hanya 256 warna tersimpan
(bahkan untuk Web hanya 216 warna yang dipakai, membuat masalah
semakin
rumit). JPEG menyimpan dalam format 24-bit, jauh lebih banyak warna.
Berbagai kegunaan dan cara menambahkan Image
Image yang telah disiapkan dapat kita gunakan untuk berbagai keperluan,
sebagai background, sebagai informasi visual, juga sebagai link ke suatu
halaman lain.
B. GAMBARAN PELATIHAN 2
Dalam pelatihan ini, Anda akan memasukkan grafis ke halaman Web. Berikut
ini adalah garis besar praktek pembuatan halaman web tersebut, bentuk jadi
dari
halaman       tersebut     dapat   Anda   lihat   di   travel_log_fin.html   di
C:\p2\COMPASS\.
Langkah detail dari pelajaran ini akan diberikan di halaman selanjutnya.
1. Definisikan situs baru dengan nama compass, dengan root folder C:\p2
2. Buat file baru, file travel_log.htm, pada folder p2\COMPASS di drive C
3. Beri title Compass Extreme Adventures dan ubah warna backgroundnya
menjadi #006699, serta font color putih (#FFFFFF).
4. Masukkan file C:\p2\Images\banner.gif, beri nama banner.
5. Ketengahkan banner tersebut dan beri alternative text banner graphics.
6. Dibawahnya ketik My diving travel log dan format sebagai heading 2,
dengan
font italics, rata kiri.
7. Drag diver.jpg dari panel Assets dan letakkan dibawah Heading.
8. Select dan copy text dari C:\p2\Text\, paste di sebelah kanan image diver,
buat text wrap di sebelah kanan gambar.
9. Drag fish.gif setelah text
10. Taruh kursor di sebelah kanan fish.gif dan ketik ‗Check out some of the
fish
we saw.
11. Buat agar text secara vertical segaris dengan bagian tengah gambar.
12. Tambahkan Flash Button pada baris berikutnya, pilih Beveled Rect-Blue
untuk
style button dan ketik Return Home untuk textnya. Ketengahkan.
13. Pada baris berikutnya masukkan anmasi Flash C:\p2\Flash\surfAd.swf
C. DETAIL PELATIHAN 2
1. Definisikan situs baru bernama COMPASS, dengan root directory C:\p2
2. Buat file HTML baru, beri nama travel_log.html, beri title Compass
Extreme
Adventure, dengan Background Color #006699, Text Color #FFFFFF, simpan
(save) file ini.
Memasukkan grafik melalui Objects Panel:
1. Taruh kursor di bagian awal halaman,
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 23 of 107
2. Klik Image pada Common Objects Panel atau pilih Insert > Image untuk
memasukkan grafik ke dalam halaman Web.
Gambar –Dialog box Select Image Source
3. Pilih Preview Images untuk melihat thumbnail dari image yang dipilih.
4. Pilih banner_head.gif dari folder C:\p2\Images\
5. Pada Relative To, pilih Document. Klik Select.
6. Pada Property Inspector, ketikkan banner pada text box Name.
Ini adalah nama internal, digunakan umumnya untuk Dynamic HTML,
walaupun bukan hal utama, ini baik untuk dibiasakan.
7. Ketikkan banner graphics pada text box Alt. Ini adalah text alternatif yang
ditampilkan apabila browser tidak mendukung grafik.
8. Pada Property Inspector, klik Align Center.
Gambar – Property Inspector untuk banner_head.gif setelah pengeditan
9. Di bawah banner_head.gif, ketikkan My Diving Travel Log buat menjadi
heading 2, italics, dengan font Verdana, rata-kiri.
10. Buat baris baru, ubah baris tersebut menjadi paragraf.
Memasukkan grafik melalui Assets Panel:
1. Pada Assets panel, klik Images. (jika Assets panel belum terbuka, pilih
Window > Assets.)
2. Drag gambar diver.jpg dari Assets panel ke halaman Web, di bawah
heading.
Ketik diver pic di text box Alt.
Membuat text ter-wrap di sekitar gambar:
1. Copy dan Paste di sebelah kanan diver, text dari C:\p2\Text\diving.txt.
2. Pilih diver, pada Property Inspector pilih Left dari Pop-up-menu Align.
3. Simpan file, preview pada browser.
Memberi jarak dan border pada image:
1. Pilih diver, pada Property Inspector ketik 15 pada text box H Space. Ini
memberi jarak horizontal 15 pixel di kedua sisi horizontal gambar. (tidak bisa
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 24 of 107
hanya satu sisi saja). Ketik 2 pada text box V Space. Ini memberi jarak
vertikal 2 pixel di kedua sisi vertikal gambar.
2. Pada Property Inspector ketik 2 pada text box Border. Sebuah border
dengan warna sama dengan text selebar 2 pixel telah ditambahkan.
Menjajarkan text dan image:
1. Masukkan image fish.gif dengan Assets panel, beri nama fish dan ketik
fish
pic sebagai text alternatifnya.
2. Taruh kursor di kanan fish. Ketik Check out some fish we saw.
Text berjajar dengan bagian bawah rata, dan terlalu dekat dengan fish.
3. Pilih fish, tambahkan border 2 pixel dan 15 pixel space horizontal.
4. Dari Pop-upmenu Align, pilih Middle. Text berjajar dengan gambar di
bagian
tengah gambar. Save, kemudian preview.
Menambahkan Flash Button:
1. Pada travel_log.html, letakkan kursor dibawah fish.gif, di tengah halaman.
2. Pada Common Objects Panel klik Flash Button.
3. Lakukan perubahan:
Pilih Beveled Rect-Blue dari Pop-up-menu Style. Pada text box Button
Text
ketikkan Return Home. Pilih Verdana dari Pop-up-menu Font. Pada text box
Size ketikkan 12. Pada Bg Color pilih warna background halaman Web
dengan eyedropper. Pada text box Save As ketikkan home_button.swf, klik
OK.
4. Pada Property Inspector pilih Play, button pada posisi awal.
5. Arahkan mouse ke Button tersebut pada dokumen. Button kini mengalami
keadaan Rollover. Klik Button tersebut, Button berubah ke status clicked.
6. Simpan dan Preview di browser untuk melihat apakah button berfungsi.
Gambar – Dialog box Insert Flash Button untuk
button_home.swf
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 25 of 107
Menambahkan animasi Flash:
1. Letakkan kursor di bawah button_home di tengah (centered).
2. Pada Assets panel pilih Flash, pilih surfAd, dan klik Insert.
Gambar – Memasukkan Flash animation melalui Assets Panel
3. Pada Property Inspector pilih Loop dan Autoplay. Klik Play untuk melihat
Animasi Flash tersebut pada Dreamweaver.
Gambar – Property Inspector dengan Loop dan Autoplay ter-select.
4. Save, Preview pada Browser.
Note: Ketika memasukkan File Animasi Flash, pastikan Anda memilih file
.SWF, sebab, file .FLA dan .SWT tidak akan tampil pada Browser
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 26 of 107
LINK, LAYOUT DAN INTERACTIVITY
LINK
Satu keunggulan HTML adalah kemampuannya untuk menghubungkan
bagian dari suatu text atau image ke halaman Web yang lain. Ini disebut
hyperlink.
Membuat link ke halaman lain:
1. Buka halaman baru pada C:/p2/COMPASS. Beri nama welcome.html dan
beri
title Welcome to COMPASS. Save file tersebut
2. Ketik Travel Log, kemudian select text tersebut.
3. Pada Property Inspector, pilih icon folder di sebelah kanan text box Link.
4. Pilih travel_log.html
Anda baru saja membuat hyperlink yang akan membawa Anda ke Travel Log
jika Anda meng-klik-nya.
Cara di atas juga dapat digunakan untuk image. Untuk link ke luar situs,
ketik
URL lengkapnya.
Gambar
Property Inspector, ketik URL lengkap untuk referensi ke luar situs
Membuat link dengan anchor:
1. Buat anchor dengan memilih Insert > Invisible Tags > Named Anchor.
2. Ketikkan nama pada Anchor Name.
3. Pada Link untuk menuju Anchor tersebut, ketikkan #nama_anchor pada
text
box link di Property Inspector.
Dalam Dreamweaver Anda dapat dengan mudah mengubah lokasi dimana
tujuan link akan ditampilkan menggunakan targer sebagai berikut.(Target
selain
_blank hanya akan bekerja bila Anda menggunakan frames pada halaman
Web
Anda)
_blank: Memuat dokumen tujuan link pada window browser baru.
_parent: Memuat dokumen tujuan link pada parent frameset atau window
dari
frame yang memuat link tersebut.
_self: Memuat dokumen tujuan link pada window yang sama dengan
window yang memuat link.Biasanya tidak perlu dispesifikkan.
_top: Memuat dokumen tujuan link pada full browser
window,menghilangkan semua frame yang ada.
Menggunakan tracing image:
Anda Dapat menggunakan image untuk membantu Anda membuat Layout
halaman Web Anda. Dalam pelajaran III ini akan kita gunakan tracing.gif
yang
terdapat di folder C:\p2\Images Untuk praktek membuat tabel dengan
Layout
View. Buat file HTML baru, pilih View > Tracing Image > Load dan pilih
file
tersebut   untuk   dijadikan   tracing   image   kita   pada   langkah   langkah
berikutnya.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 27 of 107
MENGGUNAKAN TABLE UNTUK DESAIN
Hingga saat ini Anda telah menggunakan Indent, serta Text-
Wrapping pada halaman Anda. Namun, kemampuan tag-tag tersebut
sangat terbatas. Bayangkan ketika anda membuat electronic
magazine yang harus menampilkan beberapa kolom pada satu
halaman, Table akan mempermudah pekerjaan Anda.
Jika Anda pernah membuat tabel langsung dengan kode HTML
(diketik tag demi tag) Anda akan merasakan bagaimana rumitnya
membuat kode untuk sebuah tabel yang kompleks. Dalam
Dreamweaver Anda cukup menggunakan Layout View.
Berpindah ke Layout View:
• Pilih View > Table View > Layout View atau klik Layout
View pada Objects Panel.
Gambar – Icon Layout View pada Objects Panel
Buatlah tabel tabel menyerupai susunan pada Tracing Image yang
Anda pergunakan.
ROLLOVER IMAGE
Membuat rollover Image:
1. Pilih Insert > Interactive Images > Rollover Image
Gambar – Dialog box Insert Rollover Image
2. Original image adalah kondisi ketika tidak ada event mouse over.
3. Rollover Image adalah kondisi yang ditampilkan ketika ada mouse over.
4. ‗When clicked, go to URL‘ adalah link yang diasosiasikan kepada rollover
image tersebut
FITUR FITUR LAIN DREAMWEAVER 4.0
• Dreamweaver 4.0 menyediakan referensi lengkap untuk HTML, JavaScript,
dan Cascading Style Sheet, dapat Anda akses dengan memilih Help >
Reference.
• Jika Anda merasa perlu untuk merubah HTML langsung dengan mengedit
code nya, pilih View > Code.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 28 of 107
• Panel panel floating dapat Anda atur agar dengan panel sesedikit mungkin
(yang berarti ruang kerja lebih luas) Anda tetap dapat mengakses panel
favorite anda melalui tab di dalamnya.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 29 of 107
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 30 of 107
MODUL ADOBE® PHOTOSHOP 6.0
Dasar-dasar Photoshop 6.0
Gb1. Tampilan Adobe Photoshop 6.0
Penggunaan ToolBox dan Pallete
Saat pertama kita menjalankan Adobe Photoshop 6.0, maka toolbox secara
otomatis
akan muncul dilayar. Tools pada toolbox mempunyai fungsi yang bermacam-
macam
seperti type, select, paint, draw, annote, move dan view image. Tool yang
lainnya
digunakan untuk mengubah warna foreground/background.
The marquee
tools make
rectangular,
elliptical, single
row, and single
column selections.
The move tool
moves selections,
layers, and
guides.
The lasso tools
make freehand,
polygonal
(straight-edged),
and magnetic *
(snap-to)
selections.
The magic
wand tool
selects similarly
colored areas.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 31 of 107
The crop tool
trims images.
The slice tool
creates slices.
The airbrush
tool paints softedged
strokes.
The
paintbrush
tool paints
brush strokes.
The history
brush tool *
paints a copy of
the selected state
or snapshot into
the current image
window.
The pencil tool
paints hard-edged
strokes.
The clone stamp
tool paints with a
sample of an
image.
The eraser
tool erases
pixels and
restores parts
of an image to
a previously
saved state.
7
The paint bucket
tool * fills similarly
colored areas with
the
The smudge tool
smudges data in
an image.
The dodge tool
lightens areas in
an
The path
selection
tools * make
shape or
segment
The type tool
creates type on an
image.
The pen tools *
let you draw
smooth-edged
paths.
The custom
shape tool *
makes customized
shapes selected
from a custom
shape list.
The
eyedropper
tool samples
colors in an
image.
Gb2. Macam-macam Toolbars
Untuk menampilkan atau menyembunyikan pallete dapat diatur dari menu
Windows
> Show….atau Hide….
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 32 of 107
Pallete navigator dan info, digunakan untuk
mengatur tampilan/ukuran image pada layar
monitor
Pallete color, styles, swatches, digunakan
untuk memilih warna dan style image
Pallete layers, history, actions, path,
channel, digunakan untuk memanipulasi
pengaturan layers.
Gb3. Macam-macam Pallete
Pengenalan Image Bitmap dan Grafik Vector
Grafik pada komputer dibedakan dalam dua kategori vekor dan bitmap, kita
dapat
mengaplikasikannya dengan menggunakan Photoshop dan ImageReady.
Image Bitmap sering disebut juga raster image, yang menggunkan grid
warna
(pixel) untuk menggambarkan image. Masing-masing pixel ditandai pada
lokasi dan
nilai warna tertentu.
Bitmap image mampu menggambarkan gradasi dengan sangat halus.
Resolusi dari
bitmap image bergantung pada jumlah pixelnya. Bila dilakukan perubahan
skala
image akan kelihatan pecah dan kehilangan ditailnya.
Grafik Vektor dibuat dari garis dan kurva yang ditentukan dengan obyek
matematika yang disebut vektor. Vektor menggambarkan image berdasarkan
pada
karakteristik   geometrisnya.   Kita   dapat   memindah,   mengubah   ukuran,
mengubah
warna tanpa kehilangan kualitas grafisnya.
Grafik vektor mempunyai resolusi yang bebas, sehingga skalanya dapat
diubah
terserah kita, tanpa harus menurangi kulaitas. Biasanya grafik vektor
digunakan
untuk logo-logo, yang ukurannya dapat diubah-ubah.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 33 of 107
Gb4.a. Contoh Image dengan grafik vekor Gb4.b. Contoh Image dengan
bitmap image
Layer
Layer merupakan dasar dari Image pada Adobe Photoshop. Saat kita
membuat
image baru maka akan secara otomatis akan muncul sebuah layer yang
menjadi
background layer dari image kita. Dengan layer kita mengubah-ubah image
tanpa
harus merubah data image yang asli. Bila kita memasukkan foto, teks, atau
element
lain maka akan ditempatkan pada layer yang berbeda. Di tiap layer kita
dapat
mengatur opacity, blending mode, dll. Untuk menggabungkan menjadi
sebuah layer
maka kita dapat merge layer-layer tersebut, dengan perintah Flatten Image.
Image yang kita buat merupakan tumpukan layer-layer yang dapat diatur
posisinya.
Dengan mengatur dari pallete layer maka kita dapat meletakkan image pada
layer
kita berada di depan atau di belakang image yang lain. Dalam satu file layer
mempunyai resolusi, channel, dan mode (RGB, CMYK, dan Grayscale) yang
sama.
Gambar Zebra berada pada layer yang paling atas
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 34 of 107
Area yang transparant membuat kita bisa melihat daerah/layer yang
dibawahnya.
Kita dapat menggunakan pallete Layer untuk create, hide, display, merge.
Link, lock,
dan delete layer. Semua layer akan nampak apad pallete layer. Dan kita juga
bisa
menambahkan style, mask, adjustment, fill dan clipping path pada layer
A. Layer lock options (dari kiri ke kanan): Transparency, Image,
Position, All
B. Layer set
C. Clipping group
D. Text layer
E. Show/Hide
F. Base of clipping group
G. Paintbrush icon
H. Link/Unlink
I. Fully locked layer
J. Show/Hide layer style
K. Effects bar
L. Selected layer
M. Partially locked layer
N. New layer styles
O. New layer mask
P. New layer set
Q. New adjustment or fill layer
R. New layer
S. Trash
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 35 of 107
Memulai Adobe Photoshop
A. Membuka Gambar Baru
Untuk membuka gambar baru di dalam Photoshop, ikuti langkah barikut :
1. Klik menu File > New. Kotak dialo New akan tampil.
2. Ketikan nama file gambar yang anda enginkan pada kotak isian Name.
3. Pilih satuan ukuran yang Anda inginkan dari tombol daftar pilihan Width
dan
Height
4. Masukan ukuran Width (lebar) dan Height(tinggi) gambar yang Anda
inginkan.
5. Masukan nilai resolusi untuk hasil cetakan gambar pada kotak isian
Resolution.
6. Pilih modus gambar yang Anda inginkan dari tombol daftar pilihan Mode.
7. Pada kelompok Contents pilih salah satu jnis content yang Anda inginkan,
misalnya White, Background Color, atau Transparent.
8. Klik OK
B. Menyimpan File Gambar
Untuk menyimpan gambar baru, ikutilah lagnkah berikut :
1. Klik menu File>Save As. Kotak dialog Save As akan tampil. Lihat gambar
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 36 of 107
2. Ketikan nama gambar yang Anda inginkan pada kotak isian File Name
3. Pilih lokasi penyimpanan gambar melalui tombol daftar pilihan Save in lalu
pilih drive atau folder yang Anda inginkan.
4. Pilih format yang Anda inginkan seperti TIFF, JPEG, PICT, EPS, format
Photoshop yaitu PSD dan PDD, dan masih banyak lagi yang laen pada kotak
daftar pilihan Format. Setelah itu klik Save.
C. Mengatur Ukuran Tampilan Gambar
Untuk mengatur ukuran tampilan dengan menggunakan paket Navigator,
ikuti
langkah berikut :
1. Pastikan gambar telah dibuka.
2. Aktifkan Navigator pallete dari menu Window > Show Navigator.
3. Apabila anda ingin memperkecil tampilan gambar, klik tombol Zoom out.
4. Apabila Anda ingin memperbesar tampilan gambar, klik tombol Zoom in.
5. Masukan skala ukuran yang Anda inginkan pada Zoom percentage lalu
tekan Enter.
Thumbnail
Vie Box
Zoom in Zoom slider Zoom out
Zoom percentage
D. Manipulasi Ukuran Gambar
D.1. Mengubah Ukuran Pixel Gambar
Anda dapat mengatur ukuran gambar yang akan tampil pada bagian layar
dengan
mengubah ukuran pixel gambar . Ukuran pixel gambar mencakup tinggi dan
lebar
gambar.
Contoh :
Kita akan mencoba mengubah gambar ke ukuruan tertentu melalui kotak
dialog
Image Size.
1. Klik menu Image > Image Size. Kotak dialog Image Size akan tampil.
2. Pilih atau klik cek Constrain Proportions, untuk pengaturan secara
proporsional terhadap lebar dan tinggi pixel gambar.
3. Pada kelompok Pixel Dimensions, masukan ukuran panjang dan lebar yang
baru misal 600x400 pixel.
4. Klik OK.
5. Untuk mengubah resolusi gambar Anda dapat mengganti nilai pada kotak
isian Resolution, kemudian Klik OK.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 37 of 107
Kotak dialog Image Size
D.2. Menambah/mengurangi Ukuran gambar
Perrintah Canvas Size digunakan untuk menambah dan menghapus area
kerja di
sekitar gambar. Anda dapa memotong gambar dengan cara menguarngi area
kanvas. Apabila anda menambah area kanvas melebihi ukuran gambar,
kelebihan itu
tersebut dianggap sebagai background.
Contoh:
1. Klik menu Image > Canvas Size. Kotak dialog Canvas Size akan tampil.
2. Pada bagian Anchor, pilih tombol kotak sebelah kiri yang lainnya sebagai
titik
orientasi kanvas terhadap gambar.
3. Pilih satuan ukuran inches pada tombol daftar pilihan yang ada di kolom
kedua sebela kanan kota isian Width dan Height.
4. Masukan ukuran masing-masing, klik OK
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 38 of 107
E. Memahami Cara Kerja Layer
Layer adalah unsur yang sangat penting di dalam Adobe Photoshop . Dengan
layer
Anda      dapt   mebuat    suatu   komposisi   gambar   dengan   mudah.   Layer
merupakan sheetsheet
atau lembaran yang saling bertumpuk antara satu lapisan dengan lapisan
yang
lain. Lapisan satu dapat anda buat transparan sehingga layer di bawahnya
tampak.
Layer yang diedit tidak mempengaruhi terhadap layer yang lainnya.
Anda dapat membuat kurang lebih 100 layer dalam satu gambar. Namun hal
itu
tergantung dari jumlah memori komputer Anda. Gambar dengan layer hanya
dapat
sisimpan dalam format Photoshop Document (PSD). Anda dapat mengimpor
PSD ini
ke dalam aplikasi CorelDraw tanpa harus kehilangan lapisan layer-layernya.
E.1 Menggunakan Palet Layer
Palet layer akan menampilkan semua lapisan layer yang membentuk suatu
gambar,
diawali oleh layer yang paling dasar, yaitu layer background. Anda dapat
menggunakan        palet    ini    untuk   mebuat,   menyalin,   menampilkan,
menyembunyikan,
menempelken (merge) dan menghapus layer. Layer yang aktif akan tersorot
(high
light).
Untuk menampilkan palet layer, pilihlah menu Windows > Show Layer.
Tanda ikon
mata pada sisi kiri palet menandakan bahwa layer tersebut diperlihatkan.
Apabila
Anda menyembunyikannya, klik ikon mata tersebut. Untuk mengubah posisi
urutan
layer anda dapat melakukan drag pada layer tersebut.
E.2 Mengubah Urutan Layer
Urutan layer menandakan posisi atau letak gambar satu dengan yang lain.
Layer
yang paling atas akan menutupi obyek yang ada di bawahnya. Anda dapat
mengubah satu posisi yang lainnya dengan cara :
1. Pilih layer yang akan Anda pindah urutannya.
2. Klik menu Layer | Arrange, kemudian pilihlah :
- Bring to Front; untuk memindahkan layer ke sisi paling muka atau
paling atas
- Bring Forward; memindahkan layer satu level dari obyek layer atasnya
- Send Backward; memindahkan layer satu level ke sisi bawah obyeknya
- Send to Back; memindahkan layer ke sisi paling bawah.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 39 of 107
E.3 Menggabungkan Layer (Merge)
Layer-layer yang telah diedit dan sesuai dengan keinginan Anda dapat
dijadikan satu
(merge)     agar   file   yang   Anda   hasilkan   menjadi lebih   kecil sehingga
menghemat
tempat. Berikut ini adalah cara-cara untuk menggabungkan layer.
Menggabungkan dengan layer di Bawahnya
Cara untuk menggabungkan layer dengann layer yang dibawahnya adalah
sebagai
berikut:
1. Pilihlah layer dimana anda akan menggabungkan dengan layer di
bawahnya.
2. Gabungkan dengan mengkilk menu Layer > Merge Down. Seperti pada
gambar
Layer yang Dimerge
Menggabungkan Link Layer
Untuk menggabungkan link layer, Anda dapat menggunakan langkah-
langkah
berikut ini:
1. Tampilkan layer layer yang akan Anda gabung dan kemudian link layer-
layer
tersebut.
2. Klik menu Layer > Merge Linked.
Menggabungkan Layer yang Terlihat
Untuk menggabungkan layer yang terlihat, gunakan langkah-langkah sebagai
berikut
:
1. Sembunyikan layer-layer yang tidak ingin Anda gabungkan. Pastikan layer
tersebut tidak di link.
2. Klik menu Layer > Merge Visible.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 40 of 107
E.4 Menghapus Layer
Untuk menghapus layer, ikutlah langkah berikut ini :
1. Pilih layer yang akan dihapus
2. Pilih salah satu cara di bawah ini :
- Klik ikon sampah di sisi bawah kanan palet Layer
- Klik menu Layer > Delete Layer.
E.5 Alignment pada Layer
Di dalam Adobe Photoshop 6.0 terdapat fasilitas baru untuk layer yaitu align,
memakai fasilitas Move tool dengan acuan pada layer tempat Anda
melakukan
seleksi.
Cara menggunakan fasilitas ini adalah dengan menggunakan link layer untuk
melakukan seleksi pada beberapa layer yang Anda align. Beberapa mode
align
antara lain adalah : Align vertikal, Align horizontal, Distribute vertikal,
Distribute horizontal.
F. Memilih dan Mengedit Obyek.
F.1 Lasso Tool
Lasso adalah salah satu dari beberapa tool-tool selectinh yang tersedia pada
toolbox seperti Magic Wand. Lasso, Lasso, dan Marquee tool. Bedanya
dengan
Lasso tool Anda dapat memilih objek dengan bentuk yang tidak beraturan.
Contoh :
1. Klik Lasso tool . Pada Toolbox atau tekan tombol L.
2. Mulain menggambar selection dengan mouse mengikuti bentuk obyek.
Setelah selesai lepaskan tombol mouse, bingkai pilihan putus-putus akan
mengelilingi objek.
3. Klik menu Select > Inverse
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 41 of 107
4. Klik menu Edit > Cut. Setelah selesai hasilnya akan terlihat seperti
gambar
dibawah.
F.2 Marquee Tool
Marquee tool adalah selecting yang memungkinkan Anda memilih dengan
bentuk
bingkai beraturan seperti segi empat (Rectanguler marquee tool), elips
(Elliptical
marquee tool), dan Single row/column marquee tool.
Contoh
1. Klik Rectanguler Marquee tool pada toolbox atau tekan M.
2. Lakukan drag mouse untuk membuat bingkai pilihan pada bagian kepala
bebek.
3. Klik menu Select > Inverse
4. Klik menu Edit > Cut.
F.3 Magic Wand
Magic wand adalah tool yang sangat bermanfaat sekali dan sering digunakan
dalam
pengeditan maupun penyuntingan gambar foto. Dengan Magic Wand tool
Anda dapat
memilih warna-warna spesifik.
Contoh :
1. Buka file gambar
2. Klik Magic Wand tool pada toolbox atau tekan tombol W. Pointer
mouse akan berubah menjadi bentuk tongkat magic wand.
3. Arahkan tongkat magic wand ke bagian warna putih diluar obyek
kemudian
klik satu kali. Hasilnya warna putih di sekeliling obyek akan terseleksi.
4. Klik menu Edit > Clear. Obyek warna putih akan terhapus.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 42 of 107
G. Bekerja dengan Teks
G.1 Membuat Teks dengan Type tool
Untuk membuat teks caranya sangat mudah. Anda cukup memilih Type tool
pada
toolbox, lalu klik di area kanvas kemudian ketik teks yang Anda inginkan.
Contoh :
1. Klik Type tool pada toolbox atau tekan T kemudian klik pada area
kanvas. Setelah itu perhatikan layer baru secara otomatis akan tampil
dengan
menampilkan huruf atau iconT pada palet Layers.
2. Mulai ketik teks yang diinginkan, misalnya Pelatihan.
3. Apabila anda ingin mengatur atau memindahkan posisi teks pada area
kanvas
klik Move tool, setelah itu pilih teks kemudian drag ke posisi lain atau di
tengah-tengah area kanvas. Untuk memodifikasi format teks seperti
mengubah jenis font, ukuran dan type style, pilih Type tool lalu lakukan klik
dan drag mulai dari huruf awal hingga akhir untuk menyorot teks yang anda
inginkan.
G.2 Memodifikasi dan memformat Teks
Anda dapat memformat teks secara lebih bervariasi dengan menggunakan
Palete
Character, dengan cara Windows > Show Character atau menggunakan
tombol
Pallete pada Type tool options bar.
1. Anda akan mencoba mengganti jenis font lain. Caranya, klik tombol daftar
pilihan font family pada Type tool options bar. Setelah daftar font tampil pilih
jenis font yang diinginkan misal Arial.
Daftar font Style Sze Align Color
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 43 of 107
2. Untuk mengubah style font, klik tombol, daftar pilihan Font Style pada
Type
tool pada options bar, setelah itu daftar pilihan style akan tampil yang terdir
atas :
a. Reguler, style normal
b. Italic, style huruf miring
c. Bold, style huruf tebal
d. Bold Italic, style huruf tebal dan miring
3. Berikutnya Anda akan mengubah ukuran font. Caranya tombol daftar
pilihan
Font size pada Type tool option bar kemudian pilih ukuran yang diinginkan
misalnya 48 pt.
4. Untuk mengubah warna teks, klik kotak daftar warna Text Color pada
Type
tool options bar.
5. Untuk mengatur ulang posisi text atau Anda ingin memindahkan letak
teks,
gunakan Move tool. Kemudian drag atau pindahkan. Anda dapat mengedit
kembali dengan mengeklik Type tool lagi pada toolbox.
6. Untuk mengatur jarak antarkarakter, jarak antarbaris, lebar dan tinggi
karakter, serta memformat paragraph maka anda harus menggunakan
Pallete Character dengan cara Windows > Show Character.
Leading Point Size
Style Font
Kerning
7. Untuk mengubah jarak antar karakter (kerning), ubah pada palet
Character
di bagian Kerning.
8. Untuk mengubah jarak antarkarakter atau sering disebut leading, sorot
teksnya kemudian ubah setting Leading pada palet Character.
G.3 Mengatur Format Paragraf
Kadang selain mebuat teks singkat Anda juga perlu membuat teks paragraph
caranya hampir sama seperti membuat teks singkat. Hanya saja Anda perlu
menyiapkan bingkai teks block terlebih dahulu dengan cara melakukan klik
dan
drag mouse di area kanvas, setelah itu baru ketik teks yang diinginkan.
Contoh :
1. Klik Type tool pada toolbox
2. Lakukan klik dan drag secara diagonal mulai dari sudut kiri atas ke kanan
bawah area kanvas
3. Tulis beberapa kalimat yang agak penjang.
4. Untuk mengtur fotmat teks paragraf Anda akan sering menggunakan palet
Paragraph. Ada beberapa macam perataaan teks paragraf yang disediakan
seperti : Left Align, Center Align, Right Aling, dan Justify Align.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 44 of 107
Indent Left margin
Alignmrnt
Indent right
margin
Indent first
margin
5. Untuk mengatur ukuran bingkai text block, caranya dengan melakukan
drag
kotak kecil di bagian bawah da tengah block teks.
6. Untuk pengaturan margin kiri dan margin kanan suatu teks paragraf ,
Anda
dapat menggunakan Indent pada palet Paragraph.
H. Desain Teks dengan Efek Khusus
Di bagian ini anda akan mendesain teks dengan menggunakan efek-efek
khusus
y7ang sering dan umum digunakan seperti bevel, emboss, drop shadow,
gradient,
glow, dan lain sebagainya. Anda dapat melakukan dengan cara Layer >
Layer
Style. Di palet ini akan muncul berbagai macam pilihan efek. Anda tinggal
memilih
dengan cara mengeklik pada check box yang ada kemudian lakukan
beberapa
penyetingan untuk memperhalus efek pada teks. Selain untuk teks anda
dapat
menggunakan efek ini ke obyek lain seperti shape dan image.
Di bawah ini adalah beberapa contoh efek menggunakan Layer style :
1. Drop Shadow
2. Inner/Outer Bevel
3. Emboss
4. Inner atau Outer Glow
5. Gradient Overlay
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 45 of 107
Hasil contoh :
1. Drop Shadow
2. Bevel & Emboss
3. Outer Glow
I. Menggunakan Filter
Filter adalah efek yang diterapkan pada image atau dapat juga diterapkan
pada layer
image maupun teks. Adobe Photoshop 6.0 mendukung filter Plug In yang
dikembangkan oleh perusahaan maupun pengembang software di luar
Adobe.
Beberapa sifat Filter yang anda perlu ketahui adalah :
 Filter yang terakhir Anda gunakan akan terlihat pada menu paling atas
(Last
Filter atau Ctr + F)
 Filter diterapkan pada layer yang aktif dan yang terlihat
 Beberapa filter hanya bekerja pada gambar RGB
 Setiap filter diproses dahulu di dalam RAM
 Penerapan filter pada gambar yang berukuran besar akan memakan waktu
lama dalam pemrosesannya.
Cara menerapkan filter secara umum adalah sebagai berikut :
1. Pilih daerah seleksi atau layer yan Anda beri efek filter ini seperti pada
contoh
tampilan berikut ini.
2. Anda dpat memberikan pilihan Feather untuk diterapkan pada seleksi
Anda,
yaitu dengan mengklik kanan pada daerah seleksi kemudian feather.
3. Tuliskan besarnya seperti pada contoh.
4. Pilih menu Filter kemudian pilih filter yang akan anda gunakan. Setelah
kotak
dialog Filter ini muncul, masukan beberapa nilai pada kotak option yang ada.
Setiap filter akan mempunyai bentuk kotak option yang berlainan.
5. Anda dapat melakukan klik dan drag pada daerah preview untuk melihat
dan
memindahkan daerah preview window.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 46 of 107
6. Klik tanda (+) Plus atau (-) untuk melakukan Zoom in/out preview image.
7. Klik OK untuk menerapkan filter tersebut. Hasil akhir akan terlihat sebagai
berikut.
J. Memotong (Slice) image untuk Web
Slice adalah fasilitas baru dari Adobe Photooshop 6.0 yang digunakan untuk
memecah image menjadi bagian yang terpotong-potong. Tool ini sangat
berguna
sekali pada pengelolaan image web. Dengan image yang terpotong kecil-kecil
akan
lebih mempercepat penampilan web di browser ketika di akses di internet.
1 Langkah pertama kita membuat image yang akan diiris, sebagai contoh
kita
membuat ―menu‖ web. Untuk mempermudah kita tampilkan guide :
View>Show Guides dan View>Snap to Guides dan View > Show
SlicesKemudian kita tampilkan skala dengan View>Show Rulers. Dengan
menggunakan mouse, kita click dan drag guide dari ruler ke tempat yang
kita
inginkan.Bila grafik kita masih dalam bentuk layer(terpisah-pisah), kita bisa
menjadikannya satu layer dengan, Layer>Flatten Image
Dengan menggunakan Slice tool, kita memulai memotong kotak di image
kita. Proses pemotongan image ini harus memperhatikan pada kemudahan
dalam pelayoutan di dalam HTML. Hasil akhir akan terlihat seperti berikut :
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 47 of 107
Setelah selesai memotong maka untuk mengekspor image potongan tersebut
dapat kita gunakan File > Save for Web. Angka-angka yang muncul dalam
area kanvas ketika melakukan pemotongan adalah menunjukan banyaknya
potongan image. Dengan fasilitas ini kita dapat mengekspor file HTML nya
yang isinya berupa tabel yang akan menyatukan image itu kembali.
Kemudian dengan menggunakan software pelayoutan HTML seperti
Dreamweaver dan Front Page kita bisa mengolah potongan image yang
tertata dalam sebuah tabel secara otomatis.
Maka hasilnya akan terlihat sebagai berikut :
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 48 of 107
Aplikasi Adobe Photoshop 6.0 dalam Pembuatan WEB
Bevelled Button
Dimulai dengan membuka file baru dengan ukuran 100x100 pixel. Kemudian
sebagai contoh buat lingkaran yang ukurannya 75x75
Pilih radial gradient tool pada toolbar, kemudian ubah warna foreground
menjadi putih dan warna background hitam. Letakkan gradient pada daerah
selection lingkaran dari kiri atas ke kanan bawah. Sehingga gambar akan
menjadi :
Sekarang buat lingkaran yang lebih kecil di dalam lingkaran yang tadi,
kirakira
8 pixel lebih kecil diameternya, dan letakkan pada pusatnya. Lingkaran
ini akan menjadi bevelnya. Kemudian pilih gradient tool dengan arah yang
berlawanan dengan yang tadi yaitu dari kanan bawah ke kiri atas. Cara lain
untuk membuat lingkaran yaitu dengan cara : Select>Contract. Tetapi
kadang
tepian image tidak bisa halus.
Kemudian pilih menu Select>Modify>Contract, masukan nilai 2 pixel.
Kemudian jalankan radial gradient seperti langkah perta,am, dari kiri atas ke
kanan bawah. Sekarang kita telah memiliki button baru.Kita dapat mengatur
warna lingkaran dalam dengan Adjust>Hue/Saturation, dan atur
pewarnaannya.
Pembuatan Pop Dot
Langkah pertama pilih pallete channel dan mulai dengan channel baru. Kita
bisa namai terserah kita, misal alpha1. Sebagai contoh kita buat lingkaran
(107x107 pixel). Kemudian warnai dengan warna putih.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 49 of 107
Kemudian gunakan Filters>Blur>GaussianBlur pada channel yang ada
lingkarannya. Kita gunakan nilai 10.0
Sekarang lakukan Filter>Pixelate>Color Halftone. Kita dapat menggunakan
erase tool untuk menhapus titik putih diluar lingkaran pop dot
Kemudian dengan pallete layer kita buat layer baru. Pada layer ini, lakukan
Select>Load Selection. Load dengan alpha channel lingkaran yang kita buat
tadi, kemudian fill/warnai dengan warna sesuka kita. Maka akan terlihat hasil
seperti dibawah ini :
Background WEB “Deep Space StarField”
Mulai dengan file baru, ukuran terserah kita sesuai lebar halaman. Buat
warna background hitam dan foreground merah. Warna foreground akan
menjadi warna space cloudsnya (nebula), jadi kamu bisa memilih warna
dasar seperti biru , hijau, merah.
Sekarang kita membuat nebula dengan : Filter>Render>Clouds.
Kemudian Filter>Render>DifferenceClouds. Kita dapat menggunakan
different clouds sebanyak mungkin sampai terlihat hasil yang bagus. Hasil
dibawah ini dengan melakukan pengulangan lima kali (gunakan CTRL+F)
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 50 of 107
Kemudian kita buat bintang-bintang sehingga seperti benar-benar luar
angkasa. Buat layer baru diatas layer cloud, dan warnai dengan hitam.
Lalu diberi filter : Filter>Noise>Add noise, dengan setting sebagai berikut
:
Kita juga dapat menambahkan kesan kabur dengan Filter>Blur>Blur dan
untuk menghaluskan atau mengurangi warna putih kita dapat mengatur
level dari warna, yaitu dengan :
Langkah berikutnya membuat beberapa bintang ruang angkasa ukuran
besar. Buat layer baru dengan diwarnai hitam. Letakkan layer diatas yang
lainnya, dengan cara mengedragg layer ini pada pallete layer ke bagian
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 51 of 107
atas sendiri. Kemudian Filer>Render>Lens Flare. Setting yang digunakan
sebagai berikut :
Gunakan stting yang berbeda untuk Lens Flare untuk mendapatkan efek
yang berbeda. Setting layer menjadi Screen sehingga layer dibelakang
flare akan terlihat.
TV Scan Line
Langkah pertama buka image/foto sebagai contoh.
Kemudian kita membuat channael baru dari pallete channel. Sebagai
default diberi nama ―Alpha1. Pada channel yang baru ini kita gambar
garis, dengan ukuran 1 pixel dengan panjang terserah kita
Untuk melihat dengan jelas kita Zoom dan kemudian kita select dengan
rectanguler marquee tool, yang mencakup 1 pixel hitam dan 1 pixel garis
putih. Pada contoh ini kita gunakan lebar 10 pixel dan tinggi 2 pixel.
Untuk memastikannya kita gunakan pallete ―Info‖ untuk memastikan
ukuran pixel.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 52 of 107
Dengan selection yang masih aktif, kita membuat polanya dengan
Edit>Define Pattern. Kemudian kita deselect, dan Edit>Fill>Pattern. Maka
channel kita akan namapak seperti berikut :
Sekarang lakukan CTR-Click pada channel Alpha1. Kita select scan line.
Denagan scan line yang sudah di select, click channel RGB, dan buat layer
baru. Kemudian layer tersebut kita warnai : Go to Edit>Fill, dan gunakan
opocity 50%. Maka image kta sekarang akan nampak seperti :
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 53 of 107
Macromedia
FLASH
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 54 of 107
BAGIAN 1
MENGENAL MACROMEDIA FLASH
Macromedia Flash, selanjutnya disebut Flash saja, merupakan suatu aplikasi
untuk membangun halaman web menjadi lebih menarik. Dengan Flash kita
bisa
membuat grafik dan animasi di web dengan mudah dan menyenangkan. Kita
bisa
menggambar grafik, menyisipkan gambar bitmap, dan menyertakan suara
pada
halaman web yang kita buat layaknya menggunakan aplikasi semacam
Adobe
Photoshop ataupun Corel Draw.
Sebuah file yang dibuat dalam Flash dikenal dengan movie. File movie ini
berekstensi SWF. File ini bisa dijalankan di dalam Aplikasi Flash ataupun
menggunakan Flash Player. File lain yang dihasilkan dari Flash adalah file
berekstensi
FLA. File ini hanya bisa dijalankan di dalam program Flash itu sendiri. Kita
bisa
mengedit ataupun melakukan perubahan terhadap movie yang kita buat
melalui file
FLA ini.
Berikut adalah pengenalan terhadap lingkungan kerja dari Macromedia Flash.
Lingkungan Kerja Flash
TimeLine
Tool Box Stage Jendela Library
Pada saat membuat sebuah movie di Flash, terdapat beberapa bagian dari
lingkungan kerja Flash, seperti dalam gambar, yang sering digunakan:
• Stage, yaitu suatu area persegi panjang tempat movie dibuat dan
dijalankan.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 55 of 107
• Timeline, di sini kita bisa mengatur timing animasi dan membagi area
kerja
dalam layer-layer yang terpisah. Pada Timeline ini ditampilkan tiap frame
dari
movie yang sedang dibuat.
• Symbol, merupakan elemen yang digunakan di dalam movie. Symbol ini
bisa
berupa grafik, tombol, movie clip, file suara, ataupun text/huruf-huruf.
• Jendela Library, untuk mengatur symbol-symbol.
• Tool Box, kumpulan tool-tool untuk membuat objek yang digunakan
dalam
movie.
Symbol dan Instance
Yang menarik pada Flash adalah kita bisa membuat grafik dan animasi
dengan ukuran file yang kecil. Hal ini bisa dilakukan karena dalam Flash
sebuah
objek bisa dibuat menjadi symbol, dimana symbol ini nantinya bisa kita
gunakan
beberapa kali tanpa harus menggambar/membuat ulang objek tersebut. Dan
meskipun symbol ini digunakan beberapa kali tetapi yang disimpan di dalam
file
hanya satu symbol saja. Kemampuan ini sangat berpengaruh dalam hal
ukuran file
yang dihasilkan nantinya.
Pada saat sebuah symbol diletakkan pada Stage, artinya kita sudah
membuat
sebuah instance dari symbol tersebut. Kita bisa merobah sebuah instance
tanpa
berpengaruh terhadap master symbol, dan juga kita bisa merobah semua
instance
dengan hanya merobah master symbolnya saja. Pada pembuatan animasi di
Flash,
peran symbol ini sangat penting, karena kita hanya bisa menganimasi objek
jika
objek tersebut telah kita robah menjadi sebuah symbol.
Layer
Layer merupakan bagian penting dalam pembuatan movie di Flash.
Memahami layer bisa dianalogikan seperti susunan kertas-kertas di mana
pada
setiap   kertas   tersebut   kita   bisa   menggambar,    menggerakkan   serta
melakukan
pengeditan secara terpisah tanpa mengganggu kertas yang lain.
Demikian halnya layer. Kita dapat membuat beberapa layer pada sebuah
movie    di Flash dan pada setiap          layer kita   bisa membuat gambar,
menambahkan
objek-objek, serta menganimasi objek-objek tersebut secara terpisah dari
objekobjek
pada layer yang lain.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 56 of 107
BAGIAN 2
MENGGAMBAR DI FLASH
Untuk mempercantik halaman web yang akan kita buat, dengan Flash kita
bisa
menggambar grafik atau bentuk (shape) dengan menggunakan peralatan
(tool)
yang sudah disediakan. Cara dan peralatan menggambar ini hampir sama
seperti
pada aplikasi Corel Draw ataupun pada Paint Brush. Adapun Toolbox beserta
bagianbagiannya
ditunjukkan pada gambar berikut:
Fungsi dari tool-tool tersebut antara lain:
Arrow, Subselection, Lasso tool, untuk memilih objek, ataupun bagian dari
objek.
Pencil tool, untuk menggambar garis dan bentuk bebas.
Pen tool, untuk menggambar objek secara lebih tepat dan teliti.
Line, Oval, Rectangle tool, digunakan untuk membuat bentuk-bentuk
geometrik
dasar seperti garis, lingkaran, ataupun segi empat.
Text tool, berfungsi untuk membuat teks.
Paint Bucket, Ink Bottle, Brush tool, untuk mewarnai objek.
Eraser tool, untuk penghapusan.
Eyedropper tool, berfungsi mengambil sampel atau contoh warna dari objek
lain
untuk mendapatkan warna yang sama.
Perhatikan pada bagian Tool Modifiers. Untuk pemilihan tool yang berbeda,
pada
bagian ini akan mengalami perubahan sesuai dengan tool yang dipilih.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 57 of 107
BAGIAN 3
MEMBUAT MOVIE DI FLASH
Pada bagian ini akan diberikan contoh sederhana bagaimana membuat
sebuah movie
di Flash. Dimulai dengan membuat teks, grafik, symbol, serta bagaimana
menganimasikan objek-objek yang kita buat tersebut. Di sini juga akan
dijelaskan
tentang penggunaan layer, timeline, frame, keyframe, serta bagaimana
menggunakan symbol pada library.
Mengatur Properti Movie
Hal pertama yang umumnya dilakukan pada saat membuat movie adalah
mengatur
propertinya melalui kotak dialog Movie Properties, seperti ditunjukkan pada
gambar
di bawah. Lewat kotak dialog ini kita bisa mengatur setingan untuk movie
secara
keseluruhan, seperti misalnya jumlah frame perdetik (fps, frame per
second), ukuran
stage, dan juga warna background. Untuk mengakses kotak dialog Movie
Properties
adalah sebagai berikut:
Pilih menu Modify   Movie.
Dalam kotak dialog Movie Properties atur Frame Rate 12. Artinya movie
nantinya
akan dimainkan dalam 12 frame per detik.
Dimensions diisi dengan ukuran Stage.
Pilih Background Color.
Klik OK untuk mengaktifkan perubahan.
Membuat Teks Judul
Setelah Properti dari Movie diatur, sekarang kita akan mengisi movie dengan
objekobjek
yang akan kita gunakan di dalamnya. Kita mulai dengan membuat teks.
Atur jenis huruf yang dipakai melalui menu Text Font. Pilih misalnya Arial.
Atur Font Size 24.
Atur warna huruf dari Fill Color tool.
Pilih Bold juga dari menu Text Style.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 58 of 107
Klik Text tool di sembarang tempat di Stage. Ketikkan: Macromedia Flash,
misalnya.
Menggambar Bentuk
Untuk menggambar di Flash tinggal memilih tool yang digunakan. Dalam
contoh ini
akan dibuat sebuah lingkaran.
Pilih Oval tool.
Atur warna lingkaran lewat Fill Color tool dengan warna biru.
Klik sembarang tempat pada Stage, lalu drag mouse sampai terbentuk
sebuah
lingkaran dengan ukuran sedang.
Untuk membuat bentuk segi empat sama dengan cara di atas. Tinggal pilih
Rectangle tool.
Membuat Symbol
Objek yang sudah kita buat di atas dapat kita rubah menjadi symbol.
Keuntungan
merubah objek menjadi symbol adalah untuk menghemat penyimpanan file,
karena
sebuah symbol bisa digunakan beberapa kali namun yang disimpan di file
hanya
sebuah symbol saja. Di samping itu untuk membuat link ataupun tombol
serta
menyisipkan action script hanya bisa dilakukan pada symbol saja. Untuk
merubah
objek text di atas menjadi symbol ikuti langkah berikut:
Pilih teks dengan mengklik pada objek.
Pilih menu Insert   Convert to Symbol.
Sesaat kemudian muncul kotak dialog Symbol Proprties. Pada kotak dialog
ini kita
mengisikan nama symbol yang kita buat, kemudian menentukan behaviour
dari
symbol, apakah Movie Clip, Button, atau Graphic.
Pilih type behaviour Graphic.
Klik OK. Tampak pada teks sekarang ada tanda ‗+‘ di tengahnya. Tanda ini
disebut
Registration Point. Hanya ada pada symbol saja.
Untuk lebih jelasnya, kotak dialog Symbol Properties ditunjukkan seperti di
bawah
ini:
Perhatikan, terdapat 3 type atau behaviour dari symbol:
Movie Clip, type ini untuk membuat movie kecil di dalam movie utama. Jadi
animasi
di dalam movie clip ini berjalan sendiri tanpa perlu di atur dari movie utama.
Button, type ini untuk objek yang dibuat sebagai button atau link.
Graphic, type ini dipakai untuk objek biasa yang berupa gambar atau bentuk
saja.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 59 of 107
Menambahkan Layer
Misalkan kita akan memisahkan objek teks dan lingkaran yang sudah kita
buat tadi
dalam layer terpisah. Langkahnya:
Pilih objek teks. Dari menu Edit pilih Cut.
Klik tanda ‗+‘ di bawah nama layer untuk menambah layer baru.
Dari menu Edit pilih Paste in Place.
Sekarang teks tersebut terletak pada sebuah layer baru.
Kita bisa mengganti nama layer dengan cara klik dua kali pada nama layer,
lalu
isikan nama yang baru.
Membuat Animasi
Untuk membuat animasi di Flash sangatlah gampang. Karena kita hanya
menentukan posisi awal dan posisi berikutnya dari sebuah objek yang akan
di
animasi. Bagaimana proses animasi dan gerakannya, semua dilakukan oleh
Flash.
Pada contoh berikut kita akan membuat animasi teks yang berjalan dari
sebelah kiri
layar dengan ukuran kecil, kemudian secara perlahan ukuran teks menjadi
besar dan
posisi akhirnya akan berada di tengah layar. Ikuti langkah berikut:
Pilih teks judul yang sudah kita buat di atas. Letakkan posisinya pada
sebelah kiri
atas.
Ubah scalanya menjadi seperempatnya.
Pada TimeLine, tambahkan KeyFrame di frame ke15, yaitu dengan klik kanan
pada
frame ke 15, lalu pilih Insert Keyframe.
Pilih frame ke 15 dengan klik pada keyframe yang baru kita buat tadi.
Lalu pindahkan posisi teks ke tengah layar, dan ubah scala/ukurannya 4 kali
ukuran
semula.
Pilih frame ke 1, klik kanan, pada menu yang muncul pilih Create Motion
Tween.
Jalankan animasi lewat menu Control        Play. Perhatikan teks berjalan dari kiri
ke
tengah layar dengan perubahan ukuran menjadi lebih besar.
Untuk lebih jelas tentang komponen pada Timeline, ditunjukkan pada
gambar
berikut:
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 60 of 107
Jendela Library
Semua symbol yang kita buat akan tampil pada jendela Library. Bila jendela
ini
belum tampak, melalui menu Window pilih Library. Untuk menggunakan
symbolsymbol
pada Library tersebut ikuti langkah ini:
Pada jendela Library, pilih sebuah symbol. Misalnya Lingkaran.
Lalu dengan mouse tarik/drag symbol tersebut ke Stage.
Sesaat kemudian, pada stage akan tercipta sebuah Instance dari symbol
lingkaran
yang kita buat tadi.
Jumlah instance tersebut bisa kita tambahkan sesuai kebutuhan.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 61 of 107
BAGIAN 4
MEMBUAT MOVIE LANJUTAN
Pada bagian ini, kita membuat movie dengan kemampuan lanjutan dari
bagian
sebelumnya. Kemampuan itu antara lain: membuat tombol, menambahkan
suara,
menambahkan action script pada tombol.
Membuat Tombol
Pada contoh ini kita akan membuat objek lingkaran yang sudah kita buat tadi
menjadi sebuah tombol. Untuk membuat tombol, caranya:
Pilih objek lingkaran. Jika belum menjadi sebuah symbol, rubahlah menjadi
symbol
lewat menu Insert   Convert to Symbol.
Pilih Button untuk behaviour-nya.
Saat ini Lingkaran tersebut sudah menjadi sebuah tombol.
Pada menu Control   Enable Simple Button diaktifkan.
Coba letakkan mouse pada Tombol lingkaran tersebut. Kursor mouse
berubah
menjadi tangan.
Menambahkan Suara
Pada saat tombol diklik kita bisa memunculkan suara. Untuk melakukannya
adalah:
Pada menu File    Import. Tentukan suara yang ingin dimasukkan. File suara
ini bisa
dalam format WAV, MP3, ataupun AIFF untuk komputer Macintosh.
Setelah suara dimasukkan, perhatikan pada jendela Library, file suara tadi
telah ada
di sini.
Klik dua kali pada tombol lingkaran. Akan muncul mode editing symbol untuk
objek
button lingkaran. Pada mode editing ini, pada timelinenya, sebuah button
mempunyai 4 kejadian yang bisa dilakukan padanya, yaitu: Up, Over, Down,
dan
Hit. Karena kita ingin memasukkan suara pada saat tombol diklik, pilih
kejadian
Down. Klik kanan di sini, pilih Insert Keyframe.
Pada jendela Library, drag file suara yang kita import tadi ke stage.
Suara untuk tombol ini sudah dimasukkan.
Untuk mengujinya, dari menu Control pilih Test Movie.
Coba klik pada tombol, jika terdengar suara, proses tadi berhasil dilakukan.
Memasukkan Action Script
Action Script adalah bahasa script pada Flash. Dengan Action Script kita bisa
membuat objek-objek pada movie menajadi lebih interaktif. Pada contoh ini
kita
akan memasukkan script pada tombol lingkaran pada saat diklik untuk
melakukan
lingk ke sebuah halaman web ataupun URL.
Pilih Tombol lingkaran.
Pilih menu Window    Actions.
Lalu muncul jendela Object Actions seperti gambar di bawah.
Pada sebelah kanan atas jendela ini terdapat sebuah tombol dengan tanda
‗+‘. Klik
tombol ini untuk menambah script. Pilih Basic Actions   Get URL.
Lalu pada bagian bawah, isikan alamat letak sebuah file di komputer kita
ataupun
sebuah alamat internet seperti: www.yahoo.com.
Tutup jendela Object Actions.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 62 of 107
Coba jalankan lewat Control   Test Movie.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 63 of 107
BAGIAN 5
APLIKASI FLASH
EFEK RIAK AIR
Pada Contoh Latihan ini kita akan menggunakan Layer Mask
Langkah-langkah pembuatannya :
1. Buat symbol graphic ―mask‖
Lingkaran-lingkaran tersebut dibuat dengan menggunakan stroke dari oval
tool
dengan berbagai ketebalan yang dapat dipilih dari panel stroke. Pergunakan
panel Align untuk membuat lingkaran-lingkaran tersebut terpusat di tengah
stage.
Seperti telah diketahui bahwa stroke tidak dapat dipergunakan dalam layer
mask. Oleh karena itu Anda harus mengubahnya ke dalam bentuk fill,
caranya
pilih seluruh lingkaran dan ubah stroke lingkaran tersebut menjadi fill dengan
menggunakan menu Modify Shape Convert Lines to Fills.
Simbol ―Mask‖ ini akan digunakan untuk efek riak air.
2. Buat symbol graphic ―Warna Air‖
Buat kotak dengan rectangle tool dan beri warna jenis radial gradient dari
putih
ke biru.
3. Ambil/Import gambar dari file yang kita miliki (disarankan gambar yang
memiliki nilai pemandangan contoh : picture1.JPG).
4. Buat layer ―Gambar Asli‖, dan letakkan gambar ―picture1.JPG‖ di stage
tepat
pada posisi atas. Buat menjadi 30 frame.
5. Buat layer ― Gambar Cermin‖, dan letakkan gambar ―picture.JPG‖ di stage
tepat
pada posisi bawah. Buat menjadi 30 frame.
Kemudian pilih menu Modify Transform Flip Vertikal agar gambar
―picture.JGP‖ tersebut menjadi terbalik antar atas dan bawah.
6. Buat layer ―Warna Air‖, dan letakkan gambar ―picture.JPG‖ di stage tepat
pada
posisi bawah menutupi gambar ―picture.JPG‖ terbalik pada layer ―Gambar
Cermin‖. Buat menjadi 30 frame.
7. Buat layer ―Gambar Riak‖, dan letakkan gambar ―picture.JPG‖ di stage
tepat
pada posisi bawah. Buat menjadi 30 frame.
8. Buat layer ―Mask‖ dan letakkan symbol graphic ―mask‖ di stage. Buat
menjadi
30 frame.
Kemudian buat animasi riak dari kecil menjadi besar dengan menggunakan
Transform Scale.
9. Layer ―Gambar Riak‖ dan ―Gambar Cermin‖ mempunyai isi yang sama
persis.
Oleh kartena itu, klik gambar ―Picture.JPG‖ pada layer ―Gambar Riak‖.
Kemudian tekan tombol keyboard panah atas dua kali untuk menggeser
gambar tersebut ke atas.
10. Klik kanan layer ―Mask‖, kemudian pilih Mask.
11. Test Movie (CTRL+ENTER) untuk melihat animasi riak air tersebut.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 64 of 107
PHP
PHP (atau resminya adalah PHP: Hypertext Preprocessor) merupakan
bahasa
script yang digunakan untuk membuat halaman web yang dinamis. Dinamis
berarti
halaman yang akan ditampilkan dibuat saat halaman itu diminta oleh client.
Mekanisme ini menyebabkan informasi yang diterima client selalu yang
terbaru. PHP
(Personal Home Page tools) merupakan server-side scripting language yang
akan
dieksekusi di dalam web server ketika script-nya dipanggil. Semua script PHP
dieksekusi pada server dimana script tersebut dijalankan. Oleh karena itu,
spesifikasi
server lebih berpengaruh pada eksekusi dari script PHP daripada spesifikasi
client.
Namun tetap diperhatikan bahwa halaman web yang dihasilkan tentunya
harus
dapat dibuka oleh browser pada client. Keunggulan dari sifatnya yang server
side
adalah:
1. Tidak diperlukan kompatibilitas browser atau harus menggunakan browser
tertentu, karena serverlah yang akan mengerjakan skrip PHP. Hasil yang
dikirimkan ke browser umumnya bersifat teks atau gambar saja sehingga
pasti
dikenal oleh browser apapun.
2. Dapat memanfaatkan sumber-sumber aplikasi yang dimiliki oleh server,
misalnya
koneksi ke database.
3. Skrip tidak dapat ―diintip‖ dengan menggunakan fasilitas view source. Jadi
dari
segi keamanan, jelas lebih aman dengan server-side scripting, sebab klien
tidak
akan dapat melihat script atau source code asli yang ada di server, sebab
yang
ditampilkan di browser adalah hasil eksekusi script tersebut.
PHP termasuk dalam HTML-embedded, artinya code PHP dapat kita sisipkan
pada
sebuah halaman HTML.
1.1 Hal-hal yang diperlukan untuk mempelajari PHP
1. Dasar-dasar internet dan html
2. Web server yang mendukung PHP. Web server ini dinstall pada komputer
server kita. Saat ini PHP dapat dijalankan pada berbagai macam web server
seperti PWS, IIS, XITAMI maupun APACHE
3. Pengalaman dengan C, Perl atau Java akan sangat membantu
1.2 Struktur Skrip PHP
Ada 4 pasangan tag yang dapat digunakan untuk menyatakan sebuah blok
code PHP. Diantara keempat ini 2 pasangan tag berikut umumnya digunakan
dan
dimengerti oleh interpreter, yaitu :
1. <?PHP … ?>
2. <script language="PHP"> … </script>.
Yang lainnya merupakan bentuk tag yang pendek yang kadang juga
digunakan
untuk menyatakan tag ASP(Active Server pages), yaitu
3. <% … %>
4. <? … ?>
Untuk amannya kita gunakan dua tag pertama saja. Selain itu, jika kita ingin
menempelkan code PHP pada document xml atau xhtml maka kita harus
menggunakan tag <?PHP … ?> .
Contoh penggunaan :
1. <?PHP echo "This tag used for standard tag" ?>
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 65 of 107
2. <script language="PHP">
echo "Frontpage tidak menggunakan tag ini";
</script>
3. <% echo "Tag ini juga digunakan oleh script ASP" %>
4. <? echo "PHP for general purpose and easy to use" ?>
Cara pertama adalah yang paling tepat dan aman digunakan (selain cara
kedua). Sedangkan cara ketiga kadang menjadi rancu karena tag ini sama
dengan
tag yang digunakan pada script ASP dan tag ini hanya tersedia pada PHP
versi 3.0.4
ke atas. Cara keempat hanya dapat jalan jika pilihan short tags diaktifkan.
Ini dapat
dilakukan dengan menggunakan fungsi short_tags() (Hanya pada PHP 3).
1.3 Pemisahan Instruksi
Instruksi-instruksi pada PHP dipisahkan dengan tanda titik koma (;). Contoh:
<?PHP
Skrip PHP;
Skrip PHP;
?>
1.4 Komentar
Komentar adalah bagian dalam skrip PHP yang tidak dieksekusi, tugasnya
hanya     menjelaskan   bagian   program/skrip.    Dalam   PHP    kita   bisa
menggunakan tiga
jenis komentar :
• C style : komentar diapit oleh tanda ―/*‖ dan ―*/‖
• C++ style : komentar dimulai dengan tanda ―//‖
• Unix shell : komentar diawali dengan tanda ―#‖
Contoh:
<?PHP
skrip PHP; // Komentar satu baris gaya C++
skrip PHP; // Komentar lebih dari satu baris gaya C
skrip PHP; // Komentar gaya shell UNIX
?>
Jika tanda /* … */ digunakan maka semua code didalam pasangan tanda ini
akan diabaikan . Untuk tanda // maka code setelah tanda ini pada baris yang
sama
dengan tanda ini akan diabaikan . Sedangkan tanda # kerjanya sama seperti
tanda
//.
1.5 Membuat skrip PHP sederhana
File Test.php
<HTML>
<HEAD>
<TITLE>Skrip PHP pertamaku</TITLE>
</HEAD>
<BODY BGCOLOR=#FFCCDD>
Teks berikut ini dihasilkan dengan PHP<br>
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 66 of 107
<?PHP
$nama=‖Niken‖; //isikan variable diatas dengan nama anda
echo "<B>Hallo, $nama. Saya sedang belajar PHP untuk membuat halaman
web
yang dinamis</B>";
?>
</BODY>
</HTML>
Kemudian simpan dengan nama ―Test.php‖ di public directory web server,
misalnya htdocs untuk Apache, wwroot untuk windows atau webpages untuk
Xitami.
Sebagai tambahan, jika system operasi anda adalah Windows dan anda
menggunakan notepad sebagai editor, kadang secara otomatis file yang anda
simpan
disimpan     diberi   tambahan   ekstensi   txt.   Oleh   karena   itu   pada   saat
menyimpan file,
anda harus menyimpannya dengan tipe all files, dan jangan text document.
Buka browser, dan panggil URL dengan alamat: http://localhost/Test.php,
Jika tidak
ada kesalahan atau error, maka kita akan melihat sebuah halaman web yang
berisi
tulisan:
Teks berikut ini dihasilkan dengan PHP
Hallo, Niken. Saya sedang belajar PHP untuk membuat halaman web
yang
dinamis
2. Data dan Variabel
2.1 Tipe Data
PHP memiliki 8 tipe data dasar yaitu boolean, integer, float (floating-point),
string, array, object, resource dan NULL. Biasanya tipe variable pada PHP
tidak
ditentukan oleh programmer, namun ditentukan berdasarkan untuk apa
variable itu
digunakan saat program dijalankan. PHP memiliki kemampuan yang baik
dalam
mengoperasikan variable. Jika kita mengoperasikan variable tipe data yang
berbeda,
PHP dapat melakukan operasi tersebut tanpa ada kesalahan pengeksekusian.
2.1.1 Tipe Data Boolean
Sintak : bool atau boolean
Tipe ini baru dikenalkan pada PHP versi 4. Tipe ini memiliki dua nilai yaitu
TRUE or FALSE. Kedua nilai ini dapat ditulis tanpa memperhatikan huruf
besar
ataupun kecil. Tipe ini biasanya digunakan untuk menguji suatu ekspresi
bersyarat.
Adapun nilai TRUE atau FALSE dapat dinyatakan dengan suatu nilai pada tipe
data
lainnya.
Contoh :
<?PHP
$sandi = true;
if($sandi == TRUE){
echo "Anda berhak menggunakan fasilitas dari kami";
} else {
echo "Maaf, anda tidak berhak menggunakan fasilitas dari kami ";
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 67 of 107
}
?>
Script akan melakukan pengujian terhadap nilai dari variable $sandi.
Pertama-tama $sandi diberi nilai true. Kemudian dilakukan pengecekan nilai
variable
$sandi. Jika $sandi = true maka ditampilkan "Anda berhak menggunakan
fasilitas
dari kami" selain itu ($sandi tidak sama dengan true, berarti false) maka
ditampilkan
"Maaf, Anda tidak berhak menggunakan fasilitas dari kami".
2.1.2 Tipe Data Integer
Sintak : int atau integer
Tipe ini merupakan tipe bilangan bulat. Untuk menyatakan suatu nilai
bilangan bulat kita bisa menggunakan format desimal, octal maupun
hexadecimal.
Penulisan bilangan dengan basis octal diawali dengan angka nol, dan
penulisan
bilangan dengan basis heksadesimal diawali dengan angka nol dan huruf x.
Contoh
penulisan nilai integer pada berbagai format :
$a = 1234; # desimal positif
$a = -123; # desimal negatif
$a = 0123; # octal (sama dengan 83 dalam desimal)
$a = 0x1A; # hexadecimal (sama dengan 26 dalam desimal)
Ukuran dari jangkuan integer sangat tergantung pada platform yang
digunakan. Biasanya integer memiliki ukuran 32 bits atau bisa menampung
nilai
dengan jangkauan 2 milyar(giga). Yang perlu diketahui bahwa PHP tidak
menyediakan tipe unsigned integer (bilangan integer tak bertanda).
Jika seandainya kita memberikan suatu nilai di luar jangkauan integer ke
suatu
variable, maka variabel tersebut akan dikonversi ke tipe float. Selain itu tidak
ada
pembagian integer karena pembagian integer atau tipe numeric lainnya akan
menghasilkan nilai float.
2.1.3 Tipe Data Float
Sintak : float
Tipe ini merupakan tipe bilangan real. Pada bahasa pemrograman seperti
C/C++, tipe float terdiri dari single, double. Pada PHP jangkauan float juga
tergantung pada platform yang digunakan, dimana maksimum bisa mencapai
1.8e308 dengan presisi 14 digit (64 bits). Contoh penulisan nilai float :
$a = 1.234;
$a = 1.2e3;
$a = 7E-10;
2.1.4 Tipe Data String
String merupakan kumpulan karakter. Semua karakter dapat dimasukkan ke
dalam tipe strings, termasuk huruf, angka maupun karakter-karakter khusus
seperti
+, -, %, $, &, dan lain-lain. Penulisan string pada PHP dapat diapit dengan
tanda
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 68 of 107
petik tunggal ('), petik ganda ("), atau tanda lebih kecil yang dituliskan tiga
kali
(<<<).
Perbedaan penggunaan dari ketiga karakter tersebut adalah sebagai berikut:
Jika digunakan tanda kutip ganda (―), maka variable yang terletak dalam
string
tersebut akan dinyatakan sebagai nilainya, bukan nama variabelnya. Contoh:
$nama = ―Niken‖;
echo ―Namaku adalah $nama‖;
Hasil dari contoh tersebut adalah ―Namaku adalah Niken‖.
Selain itu di dalam string juga bisa terdapat karakter escape. Karakter
escape
merupakan karakter yang diawali oleh tanda '\'. Kegunaan dari karakter ini
adalah
menyatakan suatu karakter khusus. Contoh cara mencetak string "Apa
kabar?"
(tanda kutip termasuk dicetak) :
echo " \"Apa kabar?\"";
Daftar katakter escape lainnya
Karakter escape Keterangan
\n Linefeed / baris baru
\r Cariagge return / enter (13)
\t Tab Horizontal
\\ Backslash
\$ Tanda dollar
\" Petik ganda
\[0-7]{1,3}
Urutan karakter yang sesuai dengan ekspresi reguler adalah
karakter yang berada dalam notasi octal
\x[0-9A-Fa-f]{1,2}
Urutan karakter yang sesuai dengan ekspresi reguler adalah
karakter yang berada dalam notasi heksa
Jika digunakan petik tunggal (‗‘) maka semua huruf yang ada di dalam tanda
petik tunggal akan dicetak apa adanya. Contoh :
$nama = ―Niken‖;
echo ‗Namaku adalah $nama‘;
Hasil dari contoh tersebut bukanlah ―Namaku adalah Niken‖, tetapi ―Namaku
adalah
$nama‖.
Tanda lebih kecil yang dituliskan sebanyak tiga kali (<<<). Tanda ini disebut
here doc syntax. Here doc syntax sangat berguna untuk menuliskan string
yang
panjang, karena dapat dipisahkan dalam beberapa baris tapi hasil yang
ditampilkan
tetap dalam satu baris. Variable akan dinyatakan sebagai isinya. Penggunaan
here
doc syntax diikuti dengan semacam penanda yang dituliskan pada awal dan
akhir
string.
Contoh:
$nama1 = ―Niken‖;
$nama2 = ―Dewi‖;
$nama = ―Juwita‖;
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 69 of 107
Echo <<<simbol
Jika namaku adalah $nama1
maka namamu adalah Snama2
dan namamnya adalah $nama3
simbol;
Perhatikan bahwa string yang terletak di dalam here doc syntax tidak perlu
menggunakan tanda ; pada akhir baris. Hasil dari contoh tersebut:
Jika namaku adalah Niken maka namamu adalah Dewi dan namanya adalah
Juwita
2.1.5 Tipe Data Array
Array adalah sebuah data yang mengandung satu atau lebih data, dan dapat
diindek berdasarkan numerik maupun string. Pada PHP tipe masing-masing
data
variable array tidak harus sama dan variable array juga bisa menyimpan
suatu
variable array didalamnya. Array dapat dibuat dengan menggunakan fungsi
array()
dan list() atau dapat dideklarasikan secara eksplist. Contoh pendeklarasian
secara
eksplisit:
Sintak : $nama_var_array[key];
$a[0] = ―string‖;
$a[1] = 7277;
Pada contoh tersebut, $a adalah nama variable yang digunakan, sedangkan
angka atau string di dalam kurung siku merupakan indeksnya. Jika
digunakan angka
sebagai indeks, maka angka yang digunakan dimulai dari nol. Untuk
mendeklarasikan array denga indeks banyak dapat dipersingkat dengan
mengosongka kurung siku. PHP akan otomatis memberikan angka yang
berurutan.
Array yang telah disebutkan diatas adalah array satu dimensi, karena hanya
mempunyai satu indeks. Array multi dimensi merupakan array dengan indeks
lebih
dari satu, masing-masing indeks dituliskan dalam kurung siku terpisah.
Untuk memperjelas penggunaan array, silakan coba skrip penggunaan array
berikut:
File Array.php
<HTML>
<HEAD>
<TITLE>Contoh Array</TITLE>
</HEAD>
<BODY BGCOLOR=#FFCCDD>
<?PHP
$a[0]="Saya";
$a[]="belajar";
$a[]="berhitung";
echo "$a[0]";
echo "$a[1]";
echo "$a[2]";
echo "<br>";
$a["aku"]["kamu"][3]="array lho";
echo "Saya belajar {$a["aku"]["kamu"][3]}";
?>
</BODY>
</HTML>
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 70 of 107
Simpanlah skrip tersebut dengan nama Array.php, jalankan skrip tersebut
dan perhatikan hasilnya.
2.1.5 Casting Tipe Data
Kadang - kadang kita perlu mengubah integer ke float atau float ke
integer,atau kita juga perlu mengubah suatu obyek dari sebuah class ke
class yang
lain. Proses inilah yang kita sebut casting.
Sintak :
(tipe data tujuan) nilai yang akan dirubah.
Contoh, misal variable $b berisi data float. Kemudian kita ingin menyimpan
nilai ini
ke dalam integer maka :
$b = 2.55;
$a = (int) $b; // variable $a akan bernilai 2
Nilai dari variable $b akan diubah dahulu kedalam tipe float, kemudian baru
disimpan dalam variable $a.
2.2 Variabel
Variable merupakan penampung sebuah data dan memiliki sifat datanya
dapat berubah-ubah. Pada PHP semua variable dituliskan dengan tanda $ di
belakang nama variable. Aturan penamaan variable sama dengan aturan
penulisan
variable pada bahasa lainnya yaitu :
1. Nama variable bisa terdiri dari angka,huruf dan underscore. Selain itu
tidak
boleh digunakan.
2. Huruf pertama nama variable tidak boleh berupa angka.
3. Pada PHP nama variable bersifat case-sensitive yaitu memperhatikan
huruf
besar dan kecil.
Contoh :
//penamaan berikut benar
$nama
$test
$_TEST
$Test
//penamaan yang salah
$1nama //diawali dengan angka
$round-it //menggunakan karakter "-"
$deni&didan // menggunakan karakter "&"
Yang perlu diingat deklarasi tipe variable biasanya tidak ditentukan oleh
programmer. PHP akan secara otomatis mengubah atau memberi tipe data
berdasarkan kontek penggunaannya.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 71 of 107
Contoh :
$nama = "Ini tipe String" ; //deklarasi tipe string;
$numeric = 123 ; //deklarasi integer
$numeric = 456.123 ; //Sekarang $numeric bertipe float
$bollean = true ; // deklarasi tipe Boolean
2.1.6 Scope variable
Scope suatu variable adalah di bagian mana dari program variable itu
berlaku
atau dinyatakan. Penting bagi kita untuk mengetahui scope dari sebuah
variable.
Variable yang dinyatakan di dalam fungsi memiliki scope lokal saja artinya
variable
itu hanya dikenali atau digunakan di dalam fungsi itu saja.
Contoh :
<?PHP
$A = 123 ; // variable global
function Test() {
$A = "Test"; // variable local
echo "Nilai A dalam fungsi = $A \n";
}
Test();
echo "Nilai A luar fungsi = $A \n";
?>
Jika dijalankan maka akan tercetak :
Nilai A dalam fungsi = "Test"
Nilai A luar fungsi = 123
Untuk menyatakan suatu variable global dari dalam fungsi dapat digunakan
kata kunci global.
Contoh :
<?PHP
$A = 123 ; // variable global
function Test() {
global $A ; // variable local
echo "Nilai A dalam fungsi = $A \n";
}
Test();
echo "Nilai A luar fungsi = $A \n";
?>
Jika dijalankan maka akan tercetak :
Nilai A dalam fungsi = 123
Nilai A luar fungsi = 123
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 72 of 107
2.2 Konstanta
Konstanta mirip dengan variable. Bedanya nilai konstanta tidak pernah
berubah sejak dideklarasikan. Untuk mendeklarasikan konstanta digunakan
fungsi
define().
Sintak : define("nama_konstanta",nilai);
Contoh :
<?PHP
define("phi",3.14) ;
$r = 5;
$luas = phi * $r * $r ;
echo "Luas = $luas" ;
?>
Perbedaan mendasar antara konstanta dengan variable adalah:
1. Nama konstanta tidak menggunakan tanda $
2. Konstanta tidak mengenal scope variable dengan demikian dapat diakses
di
mana saja
3. Konstanta tidak dapat didefinisikan ulang atau dihapus
4. Konstanta hanya bersifat scalar
2.3 Operator
Operator digunakan untuk melakukan suatu operasi. Secara umum, operasi
pada PHP dapat dikelompokkan pada 7 jenis, yaitu:
2.3.1 Operator Aritmatika
Operator ini berhubungan dengan operasi aritmatik.
Operator Penggunaan Contoh
+ Penjumlahan $a + $b
- Pengurangan $a - $b
* Perkalian $a * $b
/ Pembagian $a / $b
% Modulus $a / $b
Contoh penggunaan operator aritmatik:
File Aritm.php
<HTML>
<HEAD>
<TITLE>Contoh operator aritmetika</TITLE>
</HEAD>
<BODY BGCOLOR=#FFCCDD>
<?PHP
$a=10;
$b=3;
echo "\$a = $a <BR>";
echo "\$b = $b <BR>";
echo '$a + $b = ';
print $a+$b;
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 73 of 107
echo "<BR>";
echo '$a - $b = ';
print $a-$b;
echo "<BR>";
echo '$a % $b = ';
print $a%$b;
echo "<BR>";
?>
</BODY>
</HTML>
2.3.2 Operator Assignment
Operator ini digunakan untuk memberikan/mendefinisikan nilai ke sebuah
variable.
Operator Analogi Contoh
= $a = $a $a = 3
+= $a = $a + 1 $a += 1
-= $a = $a - 1 $a -= 1
*= $a = $a * 1 $a *= 2
/= $a = $a /1 $a /= 2
Contoh penggunaan operator assigment:
File Assigm.php
<HTML>
<HEAD>
<TITLE>Contoh operator assigment</TITLE>
</HEAD>
<BODY BGCOLOR=#FFCCDD>
<?PHP
$a=10;
$b=3;
$a += 5;
$b = ($c=11) + 2;
echo "Nilai variabel a adalah $a";
echo " <BR>";
echo "Nilai variabel b adalah $b";
echo " <BR>";
echo "Nilai variabel c adalah $c";
echo " <BR>";
?>
</BODY>
</HTML>
2.3.3 Operator Bitwise
Operator ini digunakan untuk operasi-operasi bilangan biner.
Operator Keterangan Contoh
& And 11 & 13 = 9
| Or 11 | 13 = 15
^ Xor 11 ^ 13 = 6
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 74 of 107
~ Not ~11 = 12
<< Shift Left 11 << 2 = 2
>> Shift Right 11 >> 2 = 44
2.3.4 Operator Perbandingan
Operator ini digunakan untuk melakukan suatu operasi perbandingan dan
biasanya diletakkan di struktur kontrol program seperti if, elseif.
Operator Keterangan Contoh
== Sama dengan $a == $b
===
Identik / Sama dengan dan
sama tipe
$a === $b
!= Tidak sama dengan $a != $b
< Lebih kecil dari $a < $b
> Lebih besar dari $a > $b
<=
Lebih kecil dari atau sama
dengan
$a <= $b
>=
Lebih besar dari atau sama
dengan
$a >= $b
Hasil dari suatu perbandingan selalu antara nilai true atau false saja. True
jika
perbandingannya benar dan sebaliknya akan bernilai salah.
Contoh penggunaan operator perbandingan:
File Banding.PHP
<HTML>
<HEAD>
<TITLE>Contoh operator perbandingan</TITLE>
</HEAD>
<BODY BGCOLOR=#FFCCDD>
<?PHP
$a=10;
$b=3;
echo "\$a = $a";
echo " <BR>";
echo "\$b = $b";
echo " <BR>";
($a < $b) ? ($c = '$a < $b') : ($c = '$a > $b');
echo " $c";
?>
</BODY>
</HTML>
2.3.4 Operator Logika
Operator ini digunakan untuk melakukan suatu operasi logika.
Operator Keterangan Contoh
And And ($a > $b) and ($a < $c)
Or Or ($a > $b) or ($a < $b)
Xor Xor ($a = 2) xor ($a = 3)
! Not !($a >= $b)
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 75 of 107
2.3.5 Operator Decrement dan Increment
Operator ini diadopsi dari bahasa C++. Digunakan untuk menambahkan atau
mengurangi nilai suatu variable dengan 1.
Operator Keterangan Contoh
++$a Pre-increment $a = ++$b
--$a Pre-decrement $a = --$b
$a++ Post-Increment $a = $b++
$a-- Post-decrement $a = $b--
Maksud pre adalah nilai dari suatu variable ditambahkan/dikurangi dulu
dengan satu baru operasi lainnya dijalankan. Sedangkan post adalah operasi
dilaksanakan dulu , kemudian setelah semua operasi selesai baru nilai dari
variable
itu ditambahkan/dikurangi dengan satu.
Contoh :
$b = 10 ;
$a = ++$b ; // $a = 11 dan $b = 11
$a = --$b ; // $a = 10 dan $b = 10
$a = $b++ ; // $a = 10 dan $b = 11
$a = $b-- ; // $a = 11 dan $b=10
$a = $b-- + 3 ; // $a=13 dan $b=9
$a = $b++ + ++$b ; // $a= 20 dan $b = 11
2.3.6 Operator String
Operator string digunakan untuk menggabungkan dua buah string dan
dilambangkan dengan titik (.). Contoh:
File str.php
<HTML>
<HEAD>
<TITLE>Contoh operator string</TITLE>
</HEAD>
<BODY BGCOLOR=#FFCCDD>
<?PHP
$a ="Negaraku";
$b =" Indonesia";
$c = $a . $b;
echo " $c";
?>
</BODY>
</HTML>
Hasil dari scrip tersebut adalah ―Negaraku Indonesia‖.
2.3.7 Operator Presendence
Aturan ini digunakan untuk menentukan urutan atau level dari operator ,
dimana operator dengan level lebih tinggi akan dikerjakan lebih dahulu.
Operator Associativity
New Non-associative
[ Right
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 76 of 107
! ~ ++ -- (int) (double)(string)(array)(object)
@
Right
* / Left
+ - . Left
<< >> Left
< <= > >= Non-associative
== != === Non-associative
& Left
^ Left
| Left
&& Left
|| Left
?: Left
= += -= *= /= .= %= &= |=^= ~= <<=
>>=
Left
Print Right
And Left
Xor Left
Or Left
, Left
Bab 3 Struktur Kontrol Program
Selain statemen sederhana yang telah kita pelajari di atas terdapat beberapa
statemen yang digunakan untuk proses khusus. Lebih detail lagi dalam PHP
seperti
bahasa C maupun java memiliki beberapa struktur kontrol program. Dengan
menggunakan struktur-struktur ini maka jalannya program tidak selalu
berurutan
sesuai dengan kondisi yang ditemui.
3.1 Struktur Berurutan
Struktur ini merupakan struktur yang paling sederhana. Program akan
dijalankan secara urut dari awal program ke akhir program . Contoh :
<?PHP
echo "Statemen 1";
echo "Statemen 2";
echo "Statemen 3";
?>
Disini dikenal istilah blok program , yaitu sebuah potongan program yang
diapit oleh tanda { }. Contoh :
If(true) { // awal blok
$kata = "test";
echo "Ini tercetak\n";
echo "Jika kondisi bernilai true";
} // akhir blok
Variable yang dideklarasikan pada suatu blok bersifat lokal di dalam blok
tersebut. Blok biasanya digunakan untuk menyatakan bagian pada struktur
kontrol
lainnya.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 77 of 107
3.2 Struktur Seleksi
Struktur ini digunakan untuk mengatur aliran program berdasarkan kondisi
tertentu yang ditetapkan. Struktur ini terdiri dari struktur if … else dan
switch.
Struktur if … else digunakan untuk masalah percabangan proses.
3.2.1 if – else
Sintak :
If(syarat/kondisi){
Operasi yang dijalankan;
} else {
Operasi yang dijalankan;
}
Nilai dari syarat / kondisi adalah true atau false. True jika syarat terpenuhi
dan false
jika syarat tidak terpenuhi.
Contoh:
<?PHP
$nilai = 60;
if($nilai >= 50)
echo "Anda Lulus";
else
echo "Anda tidak lulus";
?>
Karena $nilai >= 50 maka kalimat "Anda Lulus" yang akan dicetak.
3.2.1 If – elseif – else
Sintak :
If ($syarat 1) {
proses 1
}
elseif ($syarat 2) {
proses 2
}
else {
proses 3
}
Contoh:
$hari = 3;
if($hari == 1) echo "Senin";
elseif($hari == 2) echo "Selasa";
elseif($hari == 3) echo "Rabu";
elseif($hari == 4) echo "Kamis";
elseif($hari == 5) echo "Jumat";
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 78 of 107
elseif($hari == 6) echo "Sabtu";
elseif($hari == 7) echo "Minggu";
else echo "Salah kode hari";
Hasil dari eksekusi program ini adalah Rabu.
3.2.3 Switch
Untuk seleksi dengan alternatif banyak digunakan struktur switch.
Sintak :
switch(variable) {
case nilai 1 : perintah yang dijalankan ; break;
case nilai 2 : perintah yang dijalankan ; break;
...
default : perintah yang dijalankan ; break;
}
Contoh :
<?PHP
$bulan = 2;
Switch ($bulan) {
Case 1 : echo "Januari"; break;
Case 2 : echo "Februari"; break;
Case 3 : echo "Maret"; break;
Case 4 : echo "April"; break;
Case 5 : echo "Mei"; break;
Case 6 : echo "Juni"; break;
Case 7 : echo "Juli"; break;
Case 8 : echo "Agustus"; break;
Case 9 : echo "September"; break;
Case 10 : echo "Oktober"; break;
Case 11 : echo "November"; break;
Case 12 : echo "Desember"; break;
}
?>
Hasil dari eksekusi program ini adalah Januari.
3.3 Struktur Perulangan
Perulangan     adalah   sebuah   proses   eksekusi   operasi   program   secara
berulangulang
sampai ditemui kondisi untuk mengakhiri eksekusi tersebut.
3.3.1 While loop
Sintak :
while(syarat) {
operasi program ;
}
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 79 of 107
Operasi program akan dieksekusi terus-menerus selama syarat bernilai true.
Bagian blok while mungkin dapat tidak dieksekusi jika pada awal looping
syarat telah
bernilai false. Contoh :
<?PHP
$a = 0 ;
while($a < 5){
echo $a ;
$a++ ;
}
Hasil dari eksekusi program ini adalah 0134.
3.3.2 Do - While loop
Sintak :
do {
proses program ;
}while(syarat);
Proses program minimal dijalankan sekali karena pengujjian syarat dilakukan
diakhir struktur. Blok do-while akan dieksekusi lagi jika syarat bernilai true;
Contoh :
$a = 0;
do {
echo $a;
$a++;
} while ($a < 5);
Hasil dari eksekusi program ini adalah 01234.
4.3.3 For loop
Sintak :
for( nilai awal loop, syarat , penambahan ) {
operasi program ;
}
Contoh :
for ( $a = 0 ; $a < 5 ; $a++ ) {
echo $a ;
}
Hasil dari eksekusi program ini adalah 01234.
3.4 Break
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 80 of 107
Untuk menghentikan perulangan dari suatu loop digunakan kata kunci break.
Break diikuti dengan numeric argumen menunjukkan berapa tingkatan loop
yang
dihentikan perulangannya. Contoh :
<?PHP
$i = 0 ;
while(true) {
switch($i) {
case 0 : echo "Break pertama"; break 1 ;
case 1 : echo "Break kedua"; break 2 ;
default : break ;
}
$i++ ;
}
?>
3.4 Continue
Kata kunci continue digunakan untuk kembali ke awal loop atau dilanjutkan
ke loop berikutnya dimana sisa operasi program di bawahnya akan
diabaikan.
Continue diikuti argumen numerik menunjukkan tingkatan loop yang akan
dikerjakan.
Contoh :
<?PHP
for($i = 1 ;$i < 11 ;$i++) {
if ($i % 2 == 0 ) continue ;
else echo $i ;
}
?>
Program di atas akan menampilkan nilai $i yang ganjil saja.
4.1 Deklarasi Fungsi
Fungsi adalah sekumpulan perintah operasi program yang dapat menerima
argumen input dan dapat memberikan hasil output yang dapat berupa
sebuah nilai
ataupun sebuah hasil operasi. Fungsi dideklarasikan dengan statemen
function
diikuti nama fungsi dan beberapa argumen input.
Sintak :
function nama_fungsi( argumen_input ) {
operasi fungsi;
return nilai;
}
Contoh :
function kali( $bil1 ,$bil2 ) {
$hasil = $bil1 * $bil2;
return $hasil;
}
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 81 of 107
Dalam pemberian sebuah nama fungsi, maka nama fungsi itu tidak boleh
sama dengan nama fungsi yang telah disediakan oleh PHP contohnya fungsi
echo,
print dan lain-lain.
4.3 Argumen Fungsi
Secara default, argumen dikirimkan ke fungsi adalah berupa nilai saja. Jadi
kita tidak bisa mengubah nilai variable yang dipakai sebagai argumen di
dalam
fungsi. Jika kita mengubah nilai argumen di dalam fungsi maka nilai asli pada
variable tetap. Agar kita dapat mengubah nilai asli variable di dalam fungsi
maka
kita harus mengirimkan argumen berdasarkan reference. Caranya dengan
menambahkan tanda "&" didepan variable saat kita memanggil fungsi.
Contoh :
function tambah_satu ( $a ) {
$a++ ;
}
$a = 10;
tambah_satu ( &$a ) ; // tanda & digunakan untuk mereferencekan variabel
echo $a ; // output 11
?>
Bab 5 Operasi File
Pada bagian ini kita akan mempelajari operasi dasar file, yaitu : membuka,
membaca, menulis dan menutup file.
5.1 Membuka dan Menutup File
Untuk membuka file dari system file, HTTP atau FTP digunakan fungsi
fopen().
Sintak :
fopen(nama file , mode akses);
Mode akses menunjukkan operasi yang akan kita lakukan terhadap file
tersebut. Berikut mode akses yang disediakan :
1. "r" - membuka file untuk dibaca , pointer file diletakkan di awal file.
2. "r+" - membuka file untuk dibaca dan diubah, pointer file diletakkan di
awal
file.
3. "w" - membuka file untuk diubah, pointer file diletakkan di awal file.
4. "w+" - membuka file untuk diubah dan dibaca, pointer diletakkan di awal
file.
5. "a" - membuka file untuk diubah, pointer diletakkan di akhir file.
6. "a+" - membuka file untuk diubah dan dibaca, pointer terletak pada akhir
file.
Contoh :
<?php
$MyFile = fopen("fileku.txt","r");
?>
Jika file yang kita buka tidak ada maka nilai dari variable $MyFile ( file
pointer
) tadi akan bernilai NULL. Hal ini penting kita perhatikan, karena jika kita
melakukan
operasi file terhadap file yang tidak ada maka akan muncul pesan kesalahan
dan hal
ini tidak baik bagi seorang web master. Untuk itu kita harus melakukan
pengecekkan
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 82 of 107
suatu file dengan menggunakan fungsi file_exists(). Nilai yang dihasilkan dari
fungsi
ini berupa nilai boolean.
Contoh :
<?php
if(file_exists("fileku.txt")) {
$MyFile = fopen("fileku.txt","r");
fclose($MyFile);
}
else {
echo "File fileku.txt tidak ada dalam system kami";
exit(1);
}
Dengan cara ini kesalahan pembacaan file tidak akan muncul. Fungsi fclose()
digunakan untuk menutup file.
5.2 Membaca File
Untuk membaca isi file dapat digunakan fungsi fread() atau fgets(). Fungsi
fread() lebih terformat dan biasanya dipasangkan dengan fungsi fwrite().
Sedangkan
fgets() membaca perblok dan biasanya dipasangkan dengan fungsi fputs().
Sintak :
fread(file_pointer,panjang string);
fgets(file_pointer,besar buffer);
Contoh:
<?php
if(file_exists("fileku.txt")) {
$MyFile = fopen("fileku.txt",'r');
while( !feof($MyFile)) {
$buffer = fgets($MyFile,4096) ; // Membaca per baris
echo "<BR>$buffer";
}
fclose($MyFile);
}
?>
Fungsi feof() digunakan untuk mengetahui apakah pointer file ada di akhir
file. Nilai
yang dihasilkan bertipe boolean.
5.3 Menulis ke File
Untuk menulis ke file digunakan fungsi fwrite() atau fputs(). Fungsi fwrite()
digunakan berpasangan dengan fread() sedangkan fungsi fputs() dengan
fungsi
fgets().
Sintak :
fread(file pointer, string , panjang string);
fputs(file pointer, string );
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 83 of 107
Contoh :
<?php
if(file_exists("fileku.txt")) {
$MyFile = fopen("fileku.txt",'a');
fputs($MyFile,$kalimat) ;
fclose($MyFile);
}
?>
Penanganan Session
Suatu aplikasi web umumnya memilki lebih dari satu halaman web.
Seseorang yang mengunjungi suatu situs hampir dapat dipastikan akan
bolak-balik
dari   satu   halaman   web    ke   halaman   yang   lain.   Sebuah   rangkaian
perkunjungan
seperti ini menggambarkan sebuah session.
Penanganan session diperlukan karena protocol HTTP tidak dapat mencatat
data-data yang terdapat pada sebuah rangkaian perkunjungan halaman web
yang
terdiri atas banyak halaman.
6.1 Beberapa fungsi-fungsi session yang disediakan oleh PHP:
session_start() untuk memulai session
session_destroy() untuk mengakhiri session
session_name([name]) untuk mengambil atau menentukan
nama sebuah session, jika argument
nama disertakan, fungsi digunakan
untuk memberi nama session.
session_id() untuk mengambil atau menentukan
identitas sebuah session
session_register(namavar1[namavar2…]) untuk mendaftarkan variable ke
dalam
sebuah session
session_unregister(namavar) untuk menghilangkan sebuah variable
dari sebuah session
session_unset() untuk menghilangkan nilai semua
variable yang ada dalam session
session_is_registered(namavar) untuk memeriksa apakah sebuah
variable telah didaftarkan pada sebuah
session
6.2 Contoh penggunaan session
File session.php
<?php
session_start();
session_register(‗nama‘, ‘umur‘, ‗email‘, ‗waktu‘ );
?>
<html>
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 84 of 107
<head><title>proses</title></head>
<body bgcolor=#ccddee>
<?php
echo ―<h1> Hallo $nama </h1>‖;
?>
<h2> SELAMAT DATANG DI SITUS KAMI</h2>
<?php
echo ―Umur anda saat ini adalah‖;
echo ―$umur tahun <br>‖;
echo ―Alamat email anda adalah‖;
echo ―$email <br>‖;
$waktu = date (―h : I ‖);
echo ―Anda login pada jam $waktu‖;
?>
<a href=next.php> Klik di sini </a> untuk menuju ke halaman berikut.
</body>
</html>
File next.php
<html>
<head><title>proses</title></head>
<body bgcolor=#ccddee>
<?php
echo ―<h1> Hallo $nama </h1>‖;
?>
<h2> ANDA MEMASUKI HALAMAN KEDUA</h2>
<?php
echo ―Umur anda saat ini adalah‖;
echo ―$umur tahun <br>‖;
echo ―Alamat email anda adalah‖;
echo ―$email <br>‖;
echo ―Anda login pada jam $waktu‖;
session_destroy();
?>
</body>
</html>
Bab 7 Membuat aplikasi dengan PHP
7.1 Membuat form sederhana
Salah satu keunggulan yang dimiliki oleh php adalah kemampuan untuk
memproses form html. Konsep dasar yang penting untuk dimengerti adalah
bahwa
setiap elemen form secara otomatis akan menghasilkan variabel yang
namanya
sama dengan nama elemen form tersebut. Sedikit membingungkan memang.
Mungkin akan lebih jelas jika langsung diterapkan pada script php.
Seperti sebelumnya, buatlah script berikut ini dan simpan dengan nama
form.html. Mengapa namanya bukan form.php ? Memang bukan, sebab
script ini
berisi dokumen html biasa. Namun jika Anda lebih suka dengan nama
form.php tidak
akan ada masalah.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 85 of 107
File form.php
<html>
<title>
Form Data
</title>
<body>
<br>Isilah data-data berikut ini :
<br><br>
<form action=‖action.php‖ method=‖POST‖>
<table>
<tr>
<td>Nama</td><td><input type=text name=nama></td>
</tr>
<tr>
<td>Alamat</td><td><input type=text name=alamat></td>
</tr>
<tr>
<td>E-mail</td><td><input type=text name=email></td>
</tr>
<tr>
<td><input type=submit value=SubmiT></td<td>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>
File action.php.
<?php
echo ―<html><title>Hasil</title><body>
echo ―Data-data yang Anda masukkan adalah sbb :<br>‖;
echo ―<p><li>Nama : ―.$nama;
echo ―<li>Alamat : ―.$alamat;
echo ―<li>E-mail : ―.$email;
echo ―</p></body></html>‖;
?>
Jalankan browser dan arahkan ke alamat http://localhost/form.html atau
http://localhost/form.php tergantung nama yang Anda berikan pada script
pertama.
Akan tampil di browser sebuah tampilan form yang meminta Anda untuk
mengisikan
beberapa data. Ketika data-data telah diisi dan tombol ―Submit‖ ditekan,
form akan
memanggil ―action.php‖ dan mengembalikan data-data yang Anda masukkan
pada
halaman yang berbeda.
Script ―action.php‖ sebenarnya hanya bertugas menerima input dari form,
dan menampilkannya dalam bentuk yang lain di halaman yang berbeda.
Ketika
―action.php‖ dipanggil oleh sebuah form, secara otomatis akan dibuat
beberapa
variabel sesuai dengan nama elemen form yang memanggil. Misalnya,
variabel
$nama berisi value dari elemen input yang bernama ―nama‖, variabel
$alamat berisi
value dari elemen input yang bernama ―alamat‖, dan variabel $email akan
berisi apa
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 86 of 107
yang ada di dalam kotak input ―email‖. Oleh ―action.php‖, variabel-variabel
tersebutlah yang ditampilkan.
7.2 Guestbook
Aplikasi ini terdiri dari 4 buah file, yaitu :
1. guestbook.html : form input data
2. isigb.php : skrip php untuk pemasukan data
3. lihatgb.php : skrip php untuk melihat isi guestbook
4. data.dat : data-data guestbook
File guestbook.html
<html>
<head>
<title>Buku Tamu</title>
</head>
<body bgcolor="#ffffff" text="#000000">
<h2><u>Buku Tamu</u></h2><p>
Silakan mengisi buku tamu saya<p>
<form action="isigb.php" method="post">
<table>
<tr>
<td>
<font face="Arial, Helvetica" size="2"><b>Nama</b></font>
</td>
<td>
<font face="Arial, Helvetica" size="2">
<input type="text" name="nama" size="45"></font>
</td>
</tr>
<tr>
<td>
<font face="Arial, Helvetica" size="2"><b>Alamat Email</b></font>
</td>
<td>
<font face="Arial, Helvetica" size="2">
<input type="text" name="email" size="45"></font>
</td>
</tr>
<tr>
<td>
<font face="Arial, Helvetica" size="2"><b>Komentar</b></font>
</td>
<td rowspan="2">
<font face="Arial, Helvetica" size="2">
<textarea name="komentar" rows="7" cols="45" wrap="soft">
</textarea></font>
</td>
</tr>
<tr>
<td>
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 87 of 107
&nbsp;
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
</tr>
<tr>
<td>
<font face="Arial, Helvetica" size="2">
<input type="submit" name="submit" value="Kirim">
<input type="reset" name="reset" value="Reset"></font>
</td>
</tr>
</table>
</form>
</body>
</html>
File isigb.php
<?php
if(file_exists("data.dat"))
$isi_lama = file("data.dat");
$tambahan = "<tr><td>
<font face=\"Arial, Helvetica\" size=\"2\">
<b>$nama</b></font>
(<a href=\"$email\">$email</a>)<br>
<font face=\"Arial, Helvetica\" size=\"1\">
<i>" . date("l, d F Y H:i:s") . "</i>
</font></td></tr><tr><td bgcolor=\"#eeeeee\">
<font face=\"Arial, Helvetica\" size=\"2\">" .
nl2br(strip_tags($komentar)) .
"</font></td></tr><tr><td><br></td></tr>";
$i = 0;
while ($isi_lama[$i]) {
$tambahan = $tambahan . $isi_lama[$i];
$i++;
}
$tulis_isi = fopen("data.dat", "w");
fputs($tulis_isi, $tambahan);
fclose($tulis_isi);
?>
<html>
<head>
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 88 of 107
<title>Buku tamu</title>
</head>
<body bgcolor="#ffffff" text="#000000">
<h2><u>Buku Tamu</u></h2>
<p>Terima kasih telah mengisi buku tamu saya
<p><a href="lihatgb.php">Klik sini untuk melihat isi buku tamu</a>
</body>
</html>
Lihatgb.php
<html>
<head>
<title>Buku Tamu</title>
</head>
<body bgcolor="#ffffff" text="#000000">
<h2><u>Buku Tamu</u></h2><p>
Inilah isi buku tamu saya.<br><br>
<a href="guestbook.html">Mengisi buku tamu di sini</a><br><br>
<table cellpadding="3" width="80%">
<?php
$i = 0;
$isi = file("data.dat");
while ($isi[$i]) {
echo $isi[$i];
$i++;
}
?>
</table>
</body>
</html>
Bab 8 Koneksi PHP –MySQL
PHP memiliki banyak fungsi yang dapat digunakan sebagai interface pada
MySQL, sehingga data yang tersimpan dalam database MySQL dapat dilihat
secara
interaktif melalui media internet. Interaksi PHP dengan database MySQL,
yang
terjadi ketika client mengakses web server yang mendukung PHP dan
database
MySQL melalui browser, antara lain ketika server menerima dan membaca
permintaan dari browser, server akan mengeksekusi perintah-perintah dalam
kode
PHP. Kemudian PHP akan melakukan query pada database MySQL melalui
Aplication
Programming Interface (API) dan mengkompilasi hasilnya. Selanjutnya web
server
akan mengirim halaman hasil browser ke klien.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 89 of 107
Internet
Browser
HTTP Web Server
+
PHP Scripts
Database
MySQL
API
Fungsi-fungsi API MySQL yang didukung PHP
Nama Fungsi Kegunaan
mysql_connect membuka koneksi dengan MySQL server
mysql_pconnect membuka koneksi permanen dengan MySQL server
mysql_close menutup koneksi dengan MySQL server
mySQL_create_db membuat sebuah database baru pada database server
MySQL
mysql_drop_db mendrop atau menghapus sebuah database pada
server database MySQL
mysql_select_db memilih sebuah database sebagai database aktif
mysql_query mengirim perintah SQL ke server MySQL untuk
dieksekusi
mysql_db_query mengirim perintah SQL ke server MySQL pada
database aktif
mysql_fetch_array mengambil baris hasil sebagai array assosiatif
mysql_result menampilkan data hasil query
mysql_fetch_row mengambil baris hasil array satu per satu
mysql_ affected_row menampilkan nomor baris akibat dari insert, update,
delete yang terakhir
mysql_num_rows menampilkan nomor baris pada hasil. Hanya bisa
digunakan pada select
mysql_fetch_field mencari informasi kolom dari hasil, dan
menampilkannya sebagai obyek
mysql_fetch_length menampilkan panjang beberapa field pada baris
terakhir
mysql_field_name menampilkan nama field tertentu
mysql_list_field menampilkan daftar field
mysql_num_fields menampilkan nomor field
mysql_field_seek mencari field tertentu
mysql_errno menampilkan pesan error dari operasi yang dilakukan
terakhir kali
mysql_list_db menampilkan daftar database pada database MySQL
mysql_list_tables menampilkan daftar tabel pada database MySQL
8.1 Mengakses Database
Agar dapat menggunakan database, tentunya pertama kali akan dibangun
sebuah
akses pada database yang diinginkan. Dalam file akses.php, coba ketikkan:
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 90 of 107
<?PHP
$connect = mysql_connect("localhost","root","php");
mysql_select_db("coba");
if (mysql_errno()) {
echo mysql_errno().": ".mysql_error()."\n";
exit;
}
mysql_close($connect);
?>
Kemudian, coba jalankan file akses.php tersebut. Jika file ini berhasil
melakukan akses ke database coba, maka pada layar tidak akan tampak
pesan
apapun. Kita akan memahaminya baris demi baris.
$connect = mysql_connect("localhost","root","php");
Baris ini merupakan kunci untuk membuka koneksi dengan database.
'localhost' menunjukkan host dimana database tersebut berada. 'root'
merupakan
login user yang digunakan untuk masuk ke database. 'php' merupakan
password dari
user 'root' dalam contoh di atas. Bagian password ini dapat dikosongkan jika
login
user     bersangkutan   tidak   memiliki   password.    Sedangkan    '$connect'
merupakan
variabel yang berisi perintah 'mysql_connect( … )' tersebut. Variabel ini akan
digunakan untuk mengakses server database seperti untuk melakukan
query, dan
juga untuk menutup koneksi nantinya.
mysql_select_db("coba");
Baris ini akan memilih database yang akan digunakan. Baris ini setara
dengan:
use coba;
jika berada di prompt MySQL.
Baris-baris berikutnya merupakan error trap. Jika saja terjadi kesalahan,
misalnya ternyata database coba tidak ada, maka error tersebut akan
ditampilkan
pada browser, lengkap dengan penjelasan mengenai kesalahan yang terjadi
tersebut.
mysql_close($connect);
Baris terakhir ini akan melakukan pemutusan koneksi ke database.
8.2 Memasukkan Data Ke Dalam Database
Sebelum menyinggung mengenai PHP-nya, Anda dapat membuat terlebih
dahulu    tabelnya   pada   MySQL   (meskipun   dapat    pula   dibuat   dengan
menggunakan
PHP). Pada prompt MySQL, ketikkan perintah berikut:
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 91 of 107
create table coba(angka int);
Perintah ini akan membuat tabel bernama coba dengan satu kolom bernama
angka.Kemudian kita akan membuat sebuah file, katakanlah bernama
masukkan.php, dengan isi sebagai berikut:
<?PHP
$connect = mysql_connect("localhost","root","php");
mysql_select_db("coba");
if (mysql_errno()) {
echo mysql_errno().": ".mysql_error()."\n";
exit;
}
mysql_query("insert into coba values(10)");
mysql_close($connect);
?>
Pada file ini, yang menjadi kuncinya adalah baris perintah:
mysql_query("insert into coba values(10)");
Perintah ini akan memasukkan nilai "10" pada tabel coba. Untuk memastikan
bahwa
proses memasukkan data tadi berhasil, kita dapat melihatnya langsung
melalui
MySQL.
select * from coba;
8.3 Melihat (Dan Mengambil) Data Dari Database
Untuk membahas hal ini, kita akan mencoba melanjutkan dari contoh
sebelumnya. Kita akan mencoba "mengambil" nilai "10" yang tadi telah kita
masukkan ke dalam database.
Kita akan membuat file lihat.php dengan isi:
<?PHP
$connect = mysql_connect("localhost","root","php");
mysql_select_db("coba");
if (mysql_errno()) {
echo mysql_errno().": ".mysql_error()."\n";
exit;
}
$result=mysql_query("select angka from coba");
$hasil=mysql_fetch_row($result);
echo $hasil[0];
mysql_close($connect);
?>
Anda akan melihat bahwa ada tiga baris perintah yang "baru". Kita akan
memahaminya satu per satu.
$result=mysql_query("select angka from coba");
Baris perintah ini akan mengambil data yang kita inginkan (seluruh field
angka dari tabel coba), dan memasukkannya ke dalam variabel $result.
$result ini
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 92 of 107
tidak dapat ditampilkan secara langsung, karena di dalam satu variabel ini,
semua
field (dengan bermacam tipe data yang ada) bercampur menjadi satu. Kita
dapat
"mengambil" data yang kita inginkan itu dengan banyak cara, salah satunya
adalah
dengan:
$hasil=mysql_fetch_row($result);
Dengan baris perintah ini, $result yang pada mulanya bercampur-campur
isinya
(dapat kita bayangkan bahwa isi dari $result ini adalah sebuah tabel) akan
diambil
satu baris (record). Sedangkan $hasil sendiri sebetulnya adalah sebuah
array,
dimana elemen-elemennya berisi satu sel (data dari sebuah field dan sebuah
record).
Karena data yang kita ambil tadi hanya berisi satu field, maka dengan:
echo $hasil[0];
saja sudah cukup bagi kita untuk menampilkan hasil yang kita inginkan.
Lalu, bagaimana jika data yang akan kita tampilkan lebih dari satu baris -
yang
berarti lebih dari satu record? Maka file lihat.php akan menjadi:
<?PHP
$connect = mysql_connect("localhost","root","php");
mysql_select_db("coba");
if (mysql_errno()) {
echo mysql_errno().": ".mysql_error()."\n";
exit;
}
$result=mysql_query("select angka from coba");
while($hasil=mysql_fetch_row($result)) {echo $hasil[0];}
mysql_close($connect);
?>
Kita dapat melihat bahwa terdapat sedikit tambahan, yaitu pada:
while($hasil=mysql_fetch_row($result)) {echo $hasil[0];}
Baris perintah ini akan mengerjakan 'mysql_fetch_row' hingga keseluruhan
baris/record selesai diproses.
Cara lain yang dapat digunakan untuk ―mengambil‖ data tersebut adalah
menggunakan :
mysql_fetch_array($result)
mysql_fetch_object($result)
Dengan         menggunakan    mysql_fetch_array(),   maka     variabel      yang
menampungnya
(misalnya $hasil) akan merupakan sebuah array, yang berisi semua elemen-
elemen
yang diminta dalam query. Kita bisa mengakses elemen/field tertentu dari
variabel
$hasil   itu    dengan   menambahkan   parameter,    yaitu   nama   field   yang
diinginkan.
Misalnya untuk mengakses field angka, dapat digunakan sintaks:
$hasil[―angka‖]
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 93 of 107
Sebetulnya cara ini mirip dengan mysql_fetch_row().Dengan menggunakan
mysql_fetch_object(), maka variabel penampungnya akan menjadi sebuah
obyek
(sebuah instans dari kelas). Dimana fiel-field yang ada akan menjadi atribut
dari
obyek ini. Cara mengaksesnya juga cukup mudah, dan mirip dengan cara
kita
mengakses atribut dari kelas dalam bahasa C, yaitu memakai operator ->.
Misalnya
untuk mengakses field angka, dapat digunakan sintaks: $hasil->angka.
8.4 Contoh Aplikasi
Semua teori di atas hanyalah potongan-potongan yang dapat digunakan
untuk menyusun sebuah aplikasi yang lengkap. Oleh karena itu, dalam
bagian ini
akan dicoba dibuat sebuah aplikasi sederhana yang menggabungkan PHP,
HTML, dan
MySQL.
Contoh aplikasi ini berupa sebuah model polling on-line. Pengguna akan
diminta untuk memasukkan data dari pilihan yang tersedia. Setelah itu,
setiap kali
seorang pengguna selesai memasukkan data, maka akan langsung muncul
pula
persentase hasil isian kumulatif yang telah ada (termasuk yang baru saja
dimasukkan).
Pertama kali, kita akan membuat tabel dalam database bernama 'modul'
pada
MySQL. Pada prompt MySQL dapat diketikkan sebagai berikut:
CREATE TABLE modul (data varchar(10));
Dengan mengetikkan baris di atas, maka dalam database akan terbentuk
sebuah
tabel bernama 'modul' dengan satu field yaitu 'data'. Setelah itu, kita akan
membuat
file modul.php dengan isi sebagai berikut:
<?
echo "Tentukan pilihan dari tiga pilihan yang tersedia:<p>";
echo "<form method=post action='tampil.php'>";
echo "<input type=radio name=nilai value='Satu'>Satu<br>";
echo "<input type=radio name=nilai value='Dua'>Dua<br>";
echo "<input type=radio name=nilai value='Tiga'>Tiga<br>";
echo "<input type=submit value=Kirim><br>";
echo "</form>";
?>
File modul.php ini sangat sederhana, ia hanya akan menampilkan 3 buah
radio button dengan isian Satu, Dua, dan Tiga. Melalui file ini, pengguna
dapat
memasukkan data yang dipilihnya. Data dari file ini akan dikirimkan ke file
tampil.php.
Berikut ini adalah isi dari file tampil.php
<?
$connect = mysql_connect("localhost","root","");
mysql_select_db("modul",$connect);
mysql_query("insert into modul values('$nilai')");
$baris=mysql_query("select count(*) from modul");
$jumlah=mysql_fetch_row($baris);
$baris=$jumlah[0];
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 94 of 107
$isian=array("Satu","Dua","Tiga");
echo "Hasil isian yang sudah ada:<p><table>";
for ($i=0;$i<count($isian);$i++) {
$result=mysql_query("
select count(*) from modul where data='$isian[$i]'
");
$hasil=mysql_fetch_row($result);
$besar=$hasil[0];
$persen=$besar*100/$baris;
$gambar=$persen*2;
echo "<tr><td>".$isian[$i]."</td><td>";
printf ("%6.2f",$persen);
echo " %</td><td><img src='statbar".$i.".gif' height='5'
width='$gambar'></td></tr>";
}
echo "</table>";
?>
Kita akan memahaminya per bagian.
$connect = mysql_connect("localhost","root","");
mysql_select_db("modul",$connect);
Bagian ini akan melakukan koneksi ke database 'modul'.
mysql_query("insert into modul values('$nilai')");
Kemudian bagian ini akan memasukkan data yang dipilih oleh pengguna.
Data ini
dikirimkan oleh file modul.php. Data ini dikirimkan dalam wujud sebuah
variabel,
yaitu '$nilai'. Pada baris perintah di atas, isi dari variabel $nilai ini
dimasukkan ke
dalam tabel modul.
$baris=mysql_query("select count(*) from modul");
$jumlah=mysql_fetch_row($baris);
$baris=$jumlah[0];
Pada bagian ini, akan diambil dari MySQL data mengenai jumlah seluruh data
yang
telah dimasukkan. Data ini disimpan dalam variabel $baris.
$isian=array("Satu","Dua","Tiga");
Baris perintah ini akan membentuk sebuah array $isian dengan elemen-
elemen:
Satu, Dua, dan Tiga.
echo "Hasil isian yang sudah ada:<p><table>";
for ($i=0;$i<count($isian);$i++) {
$result=mysql_query("
select count(*) from modul where data='$isian[$i]'
");
$hasil=mysql_fetch_row($result);
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 95 of 107
$besar=$hasil[0];
$persen=$besar*100/$baris;
$gambar=$persen*2;
echo "<tr><td>".$isian[$i]."</td><td>";
printf ("%6.2f",$persen);
echo " %</td><td><img src='statbar".$i.".gif' height='5'
width='$gambar'></td></tr>";
}
Pada bagian ini, terjadi sebuah looping, dengan bagian yang di-loop yaitu
bagian yang berada di dalam kurung "{}" sesudah for …. Looping dilakukan
sebanyak jumlah elemen array $isian, dalam hal ini tiga (3).
Pada setiap kali perulangan, yang dilakukan adalah:
1. Mengambil jumlah data dari tabel 'modul' yang sesuai dengan elemen
array.
2. Misalnya: Pada looping pertama, dihitung jumlah data 'Satu' yang ada
dalam
tabel 'modul', dan seterusnya.
3. Menghitung persentase data tersebut di atas jika dibandingkan dengan
keseluruhan data.
4. Menampilkan angka persentase berikut grafiknya.
Demikian penjelasan mengenai contoh aplikasi yang disajikan. Contoh
aplikasi tersebut akan mudah dipahami setelah dicoba bersama.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 96 of 107
MySQL
MySQL adalah server basis data yang kompak dan kecil yang ideal untuk
banyak aplikasi basis data on-line. MySQL mendukung SQL standar (ANSI),
meskipun tidak selengkap subset yang menjadi standar seperti PostgreSQL.
MySQL dapat dijalankan di banyak platform dan memiliki kemampuan
multithreading pada server UNIX. Pada lingkungan bukan UNIX, MySQL
dapat
dijalankan sebagai servis pada Windows NT dan sebagai proses normal pada
mesin Windows 95/98. MySQL adalah server DBMS relasional SQL yang
mendukung multithreading dan multi-user. MySQL mengimplementasikan
client/server yang terdiri dari sebuah daemon server (servis di server) dan
banyak
program dan pustaka klien yang berbeda-beda.
MySQL      dikembangkan   untuk   menyediakan   server   SQL   yang     dapat
menangani
transaksi dalam basis data yang sangat besar dengan kecepatan tinggi.
Kenali Tipe Kolom (field) dari suatu Tabel
Terdapat sejumlah tipe data (column types) yang disediakan oleh database
MySQL
untuk mendukung programer dalam mendisain suatu tabel agar sesuai
dengan
proyek yang sedang dikerjakan.
Hirarki sebuah database
Pada dasarnya semua tipe data MySQL dapat dikelompokkan menjadi 3
kategori
yaitu;
1. tipe String
2. tipe Numerik
3. tipe Date & Time
Berikut ini akan dijelaskan beberapa tipe data yang umumnya sering
digunakan
Kelompok tipe String
CHAR(M), sebuah string dengan panjang yang tetap. Jangkauan nilai M
adalah
1-255 karakter
VARCHAR, string dengan panjang berupa variable.
MEDIUMTEXT, sebuah text dengan panjang maksimum 16777215
LONGTEXT, sebuah text dengan panjang maksimum 4294967295
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 97 of 107
Kelompok tipe Numerik
TINYINT, integer yang sangat kecil. Jika signed jangkauannya -128 sampai
127.
Jika unsigned jangkauannya 0 sampai 255.
INT, integer dengan ukuran normal. Jika signed jangkauannya -2147483648
sampai 2147483647. Jika unsigned jangkauannya 0 sampai 4294967295.
BIGINT, jika signed jangkauannya -9223372036854775808 sampai
9223372036854775807. Jika unsigned jangkauannya 0 –
184467440073709551615.
DOUBLE, bilangan floating point dengan ukuran normal (presisi ganda).
Jangkauan nilai dari -1.7976931348623157E+308 sampai -
2.2250738585072014E-308, 0, dan 2.2250738585072014E-308 sampai
1.7976931348623157E+308
Kelompok tipe Date & Time
DATE, data berupa tanggal. Formatnya YYYY-MM-DD
TIME, data berupa waktu. Formatnya hh:mm:ss.
DATETIME, kombinasi dari tanggal dan waktu. Formatnya YYYY-MM-DD
hh:mm:ss.
TIMESTAMP, formatnya YYYYMMDDhhmmss, YYMMDDhhmmss, YYYYMMDD
atau
YYMMDD
Buat Database Baru berikut Tabelnya
MySQL       merupakan   SQL   database   server.Beberapa   fitur   dari   MySQL
diantaranya,
tabel pada database dapat menampung sampai dengan 50.000.000+ record.
Crossplatform
antar operating sistem. Kemampuan tanpa batas dalam jumlah user, yang
bisa mengakses database dalam waktu bersamaan.
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 98 of 107
Tampilan MySQL Monitor, sepintas seperti program zaman dahulu (full
commandline).
Disini akan dibahas hal dasar, step-by-step, di fokuskan pada proses
pembuatan
Database & struktur Table (SQL DDL - data defenition language). Studi kasus
yang
digunakan adalah pembuatan database rumah sakit serta tabel pasien.
MEMBUAT DATABASE
Sebelum membuat database baru, kita bisa melihat database apa saja yang
telah
ada. Untuk melihat semua database yang ada pada sistem gunakan perintah
SHOW
DATABASES;
mysql> SHOW DATABASES;
+------------+
| Database |
+------------+
| dbboro |
| dbfooinfo |
| mysql |
| test |
+------------+
4 row in set (0.01 sec)
Sebagai ilustrasi kita akan membuat database 'dbrumahsakit'. Jika kita
berkerja
secara lokal maka database yang dibuat akan diletakkan oleh MySQL pada
folder
C:\mysql\data (diasumsikan kita menginstall MySQL ke drive C:\MySQL).
mysql > CREATE DATABASE dbrumahsakit;
Query OK, 1 row affected (0.01 sec)
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 99 of 107
Setelah selesai proses pembuatan database 'dbrumahsakit', maka database
yang
ada pada sistem adalah;
mysql> SHOW DATABASES;
+--------------+
| Database |
+--------------+
| dbboro |
| dbfooinfo |
| dbrumahsakit|
| mysql |
| test |
+--------------+
5 row in set (0.01 sec)
Menghapus database bernama 'dbfooinfo'
mysql > DROP DATABASE dbfooinfo;
Query OK, 1 row affected (0.01 sec)
Melihat database yang ada pada sistem;
mysql> SHOW DATABASES;
+--------------+
| Database |
+--------------+
| dbboro |
| dbrumahsakit|
| mysql |
| test |
+--------------+
4 row in set (0.01 sec)
Memilih atau mengaktifkan database 'dbrumahsakit'
mysql > USE dbrumahsakit;
Database changed
MEMBUAT TABEL
Pilih atau aktifkan database sebelum kita bekerja dengan tabel. Jika kita
belum
memilih atau mengaktifkan sebuah database maka pada saat pembuatan
tabel,
MySQL akan menampilkan pesan error.
mysql > CREATE TABLE pasien;
ERROR 1046: No Database Selected
Untuk memilih atau mengaktifkan database gunakan perintah.
mysql > USE <nama_database_yg_akan_dipilih>
Mengaktifkan database 'dbrumahsakit';
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 100 of 107
mysql > USE dbrumahsakit;
Database changed
Melihat semua tabel yang berada pada database aktif (database terpilih —
dipilih
dengan perintah USE).
mysql > SHOW TABLES;
Empty set (0.01 sec)
Karena 'dbrumahsakit' adalah sebuah database baru, maka belum ada tabel
didalamnya (empty set).
Kita akan membuat tabel 'pasien' dengan struktur ;
Nama Field Type Size Null Keterangan
nocm
nama
sex
tglahir
VARCHAR
VARCHAR
CHAR
DATE
6
30
1
NOT NULL
NULL
NULL
NULL
Primary Key
Catatan: nocm adalah no catatan medis, tidak boleh NULL dan bersifat
unique.
Perintah berikut akan membuat tabel 'pasien', tanpa disertai pendefenisian
primary
key;
mysql> CREATE TABLE pasien
-> (nocm VARCHAR (6) NOT NULL,
-> nama VARCHAR (30),
-> sex CHAR (1),
-> tglahir DATE );
Query OK, 0 rows affected (0.01 sec)
Tidak seperti contoh diatas, contoh dibawah ini akan membuat tabel 'pasien'
langsung disertai dengan pendefenisian primary key.
Membuat tabel 'pasien', tanpa disertai pendefenisian primary key;
mysql> CREATE TABLE pasien
-> (nocm VARCHAR (6) NOT NULL,
-> nama VARCHAR (30),
-> sex CHAR (1),
-> tglahir DATE,
-> PRIMARY KEY (nama));
Query OK, 0 rows affected (0.01 sec)
Membuat primary key pada tabel 'pasien'.
mysql> ALTER TABLE pasien ADD PRIMARY KEY(nocm);
Query OK, 0 rows affected (0.11 sec)
Records:0 Duplicates: 0 Warnings: 0
Perlu diperhatikan hanya boleh terdapat satu primary key pada sebuah tabel,
jika
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 101 of 107
kita pendefenisian primary key pada tabel yang telah memilikinya, maka
MyQSL
akan menampilkan pesan error. Contoh dibawah ini mengasumsikan kita
telah
memiliki primary key pada tabel pasien;
mysql> ALTER TABLE pasien ADD PRIMARY KEY(nocm);
Error 1068: Multiple primary key defined
Sebagai alternatif saat pembuatan primary key, kita bisa menggunakan
perintah
dibawah ini. Perintah ini akan menghapus (DROP) primary key yang mungkin
telah
ada, kemudian pendefenisian primary key baru;
mysql> ALTER TABLE pasien DROP PRIMARY KEY, ADD PRIMARY
KEY(nocm)
Query OK, 0 rows affected (0.11 sec)
Records: 0 Duplicates: 0 Warnings: 0
Setelah tabel dibuat dengan perintah CREATE TABLE, selanjutnya kita bisa
melihat
tabel tersebut pada database aktif (dalam hal ini adalah dbrumahsakit).
mysql > SHOW TABLES;
+-------------------------+
| Tables_in_dbrumahsakit |
+-------------------------+
| pasien |
+-------------------------+
1 row in set (0.01 sec)
Melihat struktur dari tabel 'pasien'. Gunakan perintah DESCRIBE untuk
melihat
struktur tabel.
mysql> DESCRIBE pasien;
+---------+-------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+---------+-------------+------+-----+---------+-------+
| nocm | varchar(4)| | PRI | | |
| nama | varchar(30)| YES | | NULL | |
| sex | char(1) | YES | | NULL | |
| tglahir| date | YES | | NULL | |
+---------+-------------+------+-----+---------+-------+
4 rows in set (0.04 sec)
Membuat secondary key.
Diasumsikan kita akan membuat secondary key yang bersifat tidak unique —
pada
Visual FoxPro dikenal dengan istilah Regular Index— Index yang akan
dibuat kita
namakan 'nama' dimana expresinya adalah field nama.
mysql> ALTER TABLE pasien ADD INDEX(nama);
Query OK, 0 rows affected (0.11 sec)
Records:0 Duplicates: 0 Warnings: 0
Lihat perubahan struktur tabel :
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 102 of 107
mysql> DESCRIBE pasien;
+---------+-------------+------+------+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+---------+-------------+------+------+---------+-------+
| nocm | varchar(4) | | PRI | | |
| nama | varchar(30) | YES | MUL | NULL | |
| sex | char(1) | YES | | NULL | |
| tglahir | date | YES | | NULL | |
+---------+-------------+------+------+---------+-------+
4 rows in set (0.04 sec)
MEMODIFIKASI STRUKTUR TABEL (RE-STRUKTUR)
Ubah nama field.
Kadang-kadang kita juga perlu merestruktur tabel yang telah dibuat
sebelumnya.
Masih    menggunakan       tabel   'pasien'   yang   berada   pada   database
'dbrumahsakit' untuk
semua contoh dibawah ini.
Karena dirasa nama field 'sex' kurang begitu tepat, lantaran sex adalah kata
kerja,
maka kita mencoba mengganti nama field 'sex' tersebut menjadi field
'gender'.
mysql> ALTER TABLE pasien CHANGE sex gender CHAR (1);
Query OK, 0 rows affected (0.51 sec)
Records:0 Duplicates: 0 Warnings: 0
Ubah ukuran (lebar) field.
Ukuran field nama pasien saat ini adalah 30, akan diubah menjadi 40;
mysql> ALTER TABLE pasien CHANGE nama nama VARCHAR(40);
Query OK, 0 rows affected (0.43 sec)
Records:0 Duplicates: 0 Warnings: 0
Ubah jenis (tipe) field.
Tipe field 'gender' saat ini adalah CHAR dengan lebar 1, akan kita ubah
menjadi type
data interger dengan range terkecil yang tersedia pada MySQL yaitu type
TINYINT,
dengan asumsi nantinya data yang akan dimasukan bernilai 1 untuk laki-laki,
dan
nilai 2 untuk perempuan.
Untuk merubah jenis / tipe field dari CHAR ke TINYINT untuk field 'gender'
pada
tabel pasien adalah;
mysql> ALTER TABLE pasien CHANGE gender gender TINYINT(1);
Query OK, 0 rows affected (0.53 sec)
Records:0 Duplicates: 0 Warnings: 0
Tambah field baru : pada akhir struktur tabel.
Perintah dibawah ini akan menambah field baru diberi nama 'catatan' dengan
tipe
data MEDIUMTEXT (pada MS Access / FoxPro MEDIUMTEXT dikenal dengan
nama
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 103 of 107
MEMO).
Dibawah ini adalah struktur tabel saat ini, sebelum dilakukan penambah field
baru
pada bagian akhir dari struktur tabel.
mysql> DESCRIBE pasien;
+---------+-------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+---------+-------------+------+-----+---------+-------+
| nocm | varchar(4) | | PRI | | |
| nama | varchar(40) | YES | MUL | NULL | |
| gender | tinyint(1) | YES | | NULL | |
| tglahir | date | YES | | NULL | |
+---------+-------------+------+-----+---------+-------+
4 rows in set (0.04 sec)
Menambah field baru : pada akhir struktur tabel;
mysql> ALTER TABLE pasien ADD catatan MEDIUMTEXT;
Query OK, 0 rows affected (0.53 sec)
Records:0 Duplicates: 0 Warnings: 0
Setelah melakukan perubahan, maka struktur tabel pasien menjadi;
mysql> DESCRIBE pasien;
+---------+------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+---------+------------+------+-----+---------+-------+
| nocm | varchar(4) | | PRI | | |
| nama | varchar(40)| YES | MUL | NULL | |
| gender | tinyint(1) | YES | | NULL | |
| tglahir | date | YES | | NULL | |
| catatan | mediumtext | YES | | NULL | |
+---------+------------+------+-----+---------+-------+
5 rows in set (0.05 sec)
Tambah field baru : sesudah field tertentu.
Contoh dibawah ini akan menambahkan field baru, dengan nama field
'alamat'
diletakan sesudah field 'tglahir'.
mysql> ALTER TABLE pasien ADD alamat VARCHAR (50) AFTER
tglahir;
Query OK, 0 rows affected (0.53 sec)
Records:0 Duplicates: 0 Warnings: 0
Struktur tabel pasien menjadi;
mysql> DESCRIBE pasien;
+---------+-------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+---------+-------------+------+-----+---------+-------+
| nocm | varchar(4) | | PRI | | |
| nama | varchar(40) | YES | MUL | NULL | |
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 104 of 107
| gender | tinyint(1) | YES | | NULL | |
| tglahir | date | YES | | NULL | |
| alamat | varchar(50) | YES | | NULL | |
| catatan | mediumtext | YES | | NULL | |
+---------+-------------+------+-----+---------+-------+
6 rows in set (0.04 sec)
Hapus field tertentu.
Contoh dibawah ini akan menghapus (DROP) field 'alamat';
mysql> ALTER TABLE pasien DROP alamat;
Query OK, 0 rows affected (0.53 sec)
Records:0 Duplicates: 0 Warnings: 0
Hapus primary key.
mysql> ALTER TABLE pasien DROP PRIMARY KEY;
Query OK, 0 rows affected (0.12 sec)
Records:0 Duplicates: 0 Warnings: 0
Hapus secondary key (regular index).
Contoh dibawah ini akan menghapus (DROP) index 'nama';
mysql> ALTER TABLE pasien DROP INDEX nama;
Query OK, 0 rows affected (0.22 sec)
Records:0 Duplicates: 0 Warnings: 0
PENAMBAHAN RECORD BARU
mysql>      INSERT   INTO   TABLE      [(daftar   kolom)]   VALUES   (nilai)
[,(nilai)…];
Nama-nama kolom sesudah atribut adalah optional apabila pengisian nilai ke
semua
atribut dengan urutan yang sesuai dengan pendefinisian struktur saat
pembuatan
table.
mysql> INSERT INTO TABLE ( nocm, nama, gender, tglahir, alamat,
catatan )
values (‗C001‘, ‗Norma‘,‘1‘, ‗2000-12-10‘,‘Tegalmulyo‘,‘sudah membaik‘);
MERUBAH ISI RECORD
mysql> UPDATE TABEL SET kolom=nilai,…[klausa WHERE];
Jika klausa WHERE tidak disertakan, perubahan akan dilakukan pada seluruh
record.
mysql> UPDATE pasien SET nama=’normasari’ WHERE nocm=‘C001‘;
MENGHAPUS ISI RECORD
mysql> DELETE FROM TABEL [klausa WHERE];
mysql> DELETE FROM pasien WHERE nocm=‘001‘;
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 105 of 107
MENAMPILKAN ISI RECORD
mysql> SELECT (daftar kolom) [fungsi agregasi] FROM (DAFTAR
TABEL)
[klausa WHERE] [GROUP BY(kolom agregasi)[HAVING(kondisi
agregasi][ORDER BY(daftar kolom)]
Pernyataan klausa WHERE digunakan untuk mencari data yang diinginkan di
dalam
MySQL dengan menggunakan fungsi-fungsi berikut:
( ) Mengumpulkan data dengan prioritas lebih
tinggi
+ Menambahkan nilai
* Mengalikan nilai
/ Membagi nilai
% Memberi nilai persentasi
| OR antara dua nilai integer
& AND antara dua nilai integer
NOT Memberi perintah logic NOT
OR Memberi perintah logic OR
AND Memberi perintah logic AND
= Untuk kesamaan nilai atau hasil
<> Untuk ketidaksamaan nilai
<= Untuk nilai di kiri <= nilai di kanan
>= Untuk nilai di kiri >= nilai di kanan
> Untuk nilai di kiri > nilai di kanan
< Untuk nilai di kiri < nilai di kanan
Nilai BETWEEN nilai1 AND nilai2 Mencari baris dengan niali diantara niali1
dan nilai2
Nilai IN (nilai1,nilai2,…) Mencari baris dengan nilai-nilai sesuai yang
diberikan
Nilai1 LIKE nilai2 Untuk membandingkan kemiripan pola
nilai1 dan nilai2 dan mencari baris yang
merupakan hasilnya
GROUP BY (daftar kolom) Untuk mengumpulkan semua baris yang
berisi data didalam kolom yang dituju
Kalusa HAVING Untuk mencari data(misal data agregat),
pada data yang sudah diambil dari
database
ORDER BY (daftar kolom) Untuk mengurutkan data pada kolom yang
telah disebutkan
Mysql> SELECT nama FROM pasien WHERE tgllahir BETWEEN ‗1994-1-1‘ AND
‗2003-1-1‘ ORDER BY nama;
IT Center Fasnet FT. UGM
www.itcenter-ftugm.com
info@itcenter-ftugm.com
Modul ―Young Programmer & Network Administrator‖
Materi : ―WEBMASTER‖
Page 106 of 107
FUNGSI AGREGASI
Count Mendapatkan nilai banyaknya record yang
dihasilkan query
Sum Mendapatkan nilai total suatu atribut numeric
yang dihasilkan query
Avg Mendapatkan nilai rata-rata suatu atribut
numeric yang dihasilkan query
Max Mendapatkan nilai maksimum suatu atribut
yang dihasilkan query
Min Mendapatkan nilai minimum suatu atribut
yang dihasilkan query
PENGENALAN POLA
Untuk menemukan nama yang dimulai dengan ‗b‘:
mysql> SELECT * FROM pasien WHERE nama LIKE "b%";
Untuk menemukan nama yang diakhiri dengan ‗ng‘:
mysql> SELECT * FROM pasien WHERE nama LIKE "%ng";
Untuk menemukan nama yang mengandung sebuah ‗w‘:
mysql> SELECT * FROM pasien WHERE nama LIKE "%w%";
Untuk menemukan nama yang berisi tepat lima karakter, gunakan karakter
pola ‗_‘ :
mysql> SELECT * FROM pasien WHERE nama LIKE "_____";
MENGGUNAKAN LEBIH DARI DUA TABEL
mysql> CREATE TABLE pet (name VARCHAR(20), owner VARCHAR(20),
-> species VARCHAR(20), sex CHAR(1), birth DATE, death DATE);
Tabel pet menunjukkan hewan apa saja yang anda miliki. Jika anda ingin
menyimpan     informasi   lain   mengenai   mereka,   seperti   kejadian   pada
kehidupan
mereka, anda membutuhkan tabel lain. Table ini perlu berisi:
• nama hewan jadi anda tahu hewan mana yang mengalaminya.
• tanggal jadi anda tahu kapan hal ini terjadi.
• field yang menggambarkan kejadian ini
• Jika anda ingin bisa mengkategorikan kejadian, akan sangat berguna untuk
memiliki field jenis kejadian.
Berdasarkan pertimbangan diatas, perlu dibuat sebuah table lagi:
mysql> CREATE TABLE event (name VARCHAR(20), date DATE,
-> type VARCHAR(15), remark VARCHAR(255));
Anggaplah anda ingin menemukan umur untuk tiap hewan ketika mereka
melahrikan
(litter).   Tabel   event   menunjukkan   kapan   ini   terjadi,   tetapi   untuk
menunjukkan umur
dari induknya, anda butuh tanggal lahirnya. Karena ini disimpan dalam tabel
pet,
anda butuh kedua tabel untuk querynya:


mysql> SELECT pet.name, (TO_DAYS(date) - TO_DAYS(birth))/365 AS
age,
remark
-> FROM pet, event
-> WHERE pet.name = event.name AND type = "litter";
Ada beberapa hal yang harus diperhatikan tentang query ini:
• Pada klausa FROM terdapat dua tabel karena query ini butuh mengambil
data
dari keduanya.
• Ketika menggabungkan (join) informasi dari multiple tabel, anda harus
menspesifikasi bagaimana record dalam satu tabel dapat cocok dengan
record
dari tabel lain. Ini mudah karena mereka keduanya memiliki kolom name.
Query
ini menggunakan klausa WHERE untuk mencocokkan record dari kedua tabel
berdasarkan value name.
• Karena kolom name terdapat pada kedua tabel, anda harus menspesifikasi
dari
tabel mana kolom ini yang akan ditampilkan. Ini dilakukan dengan
menambahkan nama tabel sebelum nama kolom.
Anda tidak harus memiliki dua tabel yang berbeda untuk melakukan join.
Kadangkadang
ada gunanya untuk menggabungkan sebuah tabel ke dirinya sendiri, jika
anda ingin membandingkan record dalam suatu tabel ke record lain dalam
tabel
yang      sama.   Contohnya,   untuk   menemukan   hewan   yang   merupakan
pasangan
diantara hewan anda, anda dapat menggabungkan tabel pet dengan dirinya
sendiri
untuk memadukan hewan jantan dan betina yang sejenis:
mysql> SELECT p1.name, p1.sex, p2.name, p2.sex, p1.species
-> FROM pet AS p1, pet AS p2
-> WHERE p1.species = p2.species AND p1.sex = "f" AND p2.sex = "m";

								
To top