Modul Junior Web Programmer

MODUL PELATIHAN JUNIOR WEB PROGRAMMER
B A L A I P E L AT IH A N D A N P E N G E M BA N G A N T E K N O L O G I IN F O RM AS I D A N KO M U N IK AS I ( BP P T IK ) KEMENTERIAN KOMUNIKASI DAN INFORMATIKA 2013
Modul Junior Web Programmer
DAFTAR ISI
KOMPETENSI ......................................................................................... ERROR! BOOKMARK NOT DEFINED. KODE PROGRAM ......................................................................................................................................... 4 1.1 1.2 1.3 1.4 1.5 2.1 2.2 2.3 2.4 2.5 2.5 2.6 2.7 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 3.13 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 4.10 5.1 5.2 5.3 5.4 5.5 6.1 TUJUAN INSTRUKSIONAL UMUM ................................................................................................................. 4 TUJUAN INSTRUKSIONAL KHUSUS ................................................................................................................ 4 URAIAN SINGKAT MATERI.......................................................................................................................... 5 BEBERAPA PENGERTIAN DALAM UNIT KOMPETENSI INI : .................................................................................. 5 INFORMASI MASING-MASING ELEMEN KOMPETENSI ........................................................................................ 5 TUJUAN INSTRUKSIONAL UMUM ............................................................................................................... 32 TUJUAN INSTRUKSIONAL KHUSUS .............................................................................................................. 32 SEKILAS TENTANG BASIS DATA.................................................................................................................. 33 TABEL .................................................................................................................................................. 33 VIEW ................................................................................................................................................... 42 FORM .................................................................................................................................................. 50 REPORT ................................................................................................................................................ 57 MODUL ................................................................................................................................................ 63 TUJUAN INSTRUKSIONAL UMUM ............................................................................................................... 71 TUJUAN INSTRUKSIONAL KHUSUS .............................................................................................................. 71 SEKILAS TENTANG FILE-BASED SYSTEM. ...................................................................................................... 72 DBMS (DATABASE MANAGEMENT SYSTEM) ............................................................................................... 72 SEKILAS TENTANG PEMODELAN DATA ........................................................................................................ 75 DATABASE APPLICATION LIFECYCLE. ........................................................................................................... 75 NORMALISASI ........................................................................................................................................ 86 ENTITY RELATIONSHIP DIAGRAM (ERD) ...................................................................................................... 89 FAKTOR KESUKSESAN RANCANGAN DATABASE. ............................................................................................ 96 KAMUS DATA ........................................................................................................................................ 96 IMPLEMENTASI DENGAN TOOLS ................................................................................................................ 97 MEKANISME BACKUP DAN RESTORE DATABASE.......................................................................................... 104 MONITOR DAN TUNNING SISTEM OPERASIONAL......................................................................................... 106 TUJUAN INSTRUKSIONAL UMUM ............................................................................................................. 108 TUJUAN INSTRUKSIONAL KHUSUS ............................................................................................................ 108 SEKILAS TENTANG HTML ...................................................................................................................... 108 SEKILAS TENTANG PEMBUATAN DOKUMEN DENGAN HTML ......................................................................... 109 BENTUK UMUM HTML ......................................................................................................................... 110 PEMFORMATAN TEKS ............................................................................................................................ 113 LIST HTML ......................................................................................................................................... 118 IMAGE HTML ..................................................................................................................................... 122 TABEL HTML ...................................................................................................................................... 123 LINK HTML ........................................................................................................................................ 129 TUJUAN INSTRUKSIONAL UMUM ............................................................................................................. 132 TUJUAN INSTRUKSIONAL KHUSUS ............................................................................................................ 132 URAIAN SINGKAT MATERI...................................................................................................................... 133 BEBERAPA PENGERTIAN DALAM UNIT KOMPETENSI INI : .............................................................................. 133 INFORMASI MASING-MASING ELEMEN KOMPETENSI: ................................................................................... 133 TUJUAN INSTRUKSIONAL UMUM ............................................................................................................. 161 2
APLIKASI BASIS DATA ................................................................................................................................ 32
DASAR-DASAR BASIS DATA ....................................................................................................................... 71
DOKUMEN HTML .................................................................................................................................... 108
KEAMANAN WEB STATIK ........................................................................................................................ 132
DASAR-DASAR PEMBUATAN WEB STATIK DASAR ................................................................................... 161
6.2 6.3 6.4 6.5 6.6 6.7 6.8 7.1 7.2 7.3 7.4 7.5 7.6 7.7
TUJUAN INSTRUKSIONAL KHUSUS ............................................................................................................ 161 MENJELASKAN KONSEP DASAR DAN TEKNOLOGI DARI WEBPAGE ..................................................................... 162 MEMPERSIAPKAN PEKERJAAN PEMBUATAN WEB......................................................................................... 165 MELAKUKAN PEMBUATAN DOKUMEN WEB BARU ........................................................................................ 168 MEMBUAT LINK ................................................................................................................................... 173 MENGORGANISASIKAN DOKUMEN DENGAN MENGGUNAKAN TEMPLATE ........................................................ 176 MENAMPILKAN WEB DAN BROWSER........................................................................................................ 177 TUJUAN INSTRUKSIONAL UMUM ............................................................................................................. 179 TUJUAN INSTRUKSIONAL KHUSUS ............................................................................................................ 179 MENGIDENTIFIKASI PROSEDUR PENGOPERASIAN EDITOR TEKS ........................................................................ 179 MENGAPLIKASIKAN FITUR-FITUR DIFFERENT LEVEL HEADING, PARAGRAPH, FONT, LIST, TABLE .............................. 184 MELAKUKAN EDITING SEDERHANA........................................................................................................... 200 MENGGUNAKAN FITUR-FITUR TAMBAHAN UNTUK MEMFORMAT LAYOUT HALAMAN .......................................... 204 MENGINTEGRASIKAN DOKUMEN WEB DENGAN OBYEK LAIN SEPERTI GRAFIK, ANIMASI, AUDIO, VIDEO. DLL............. 213
DASAR-DASAR PEMBUTATAN WEB STATIK LANJUT ................................................................................ 179
DAFTAR PUSTAKA ................................................................................................................................... 220
Bab
1
KODE PROGRAM
1.1 Tujuan Instruksional Umum o o 1.2 Siswa mengetahui pentingnya dokumentasi program Siswa dapat membuat dokumentasi kode program yang baik dan benar Tujuan Instruksional Khusus o o Siswa mampu menjelaskan manfaat dari pembuatan dokumentasi program
2.
Siswa dapat memahami, mengidentifikasi data, fungsi, prosedur dan modul dalam program
Siswa dapat menjelaskan alur data dan algoritma pemrograman pada modul program
o o o
Siswa mengerti bagaimana cara membuat dokumentasi kode program Siswa mampu mengevaluasi sebuah dokumen kode program Siswa mampu melengkapi dan melakukan perbaikan pada dokumentasi kode program
1.3
Uraian Singkat Materi Ada banyak alasan dan aspek mengapa dokumentasi kode program sangat penting
dan diperlukan. Secara garis besar, dokumentasi menyediakan kita sebuah jalan pintas untuk mengetahui sebuah sistem dalam gambaran besar atau agar kita mengerti kode-kode program pada fungsi, prosedur atau modul-modul tertentu. Ketika kita berbicara tentang dokumentasi kode program maka kita tidak hanya berbicara tentang satu bahasa pemrograman, tetapi untuk seluruh bahasa pemrograman yang ada. Salah satu bentuk dokumentasi yang paling sederhana adalah comment pada program. Fungsi dari comment ini sendiri sangat signifikan untuk menjelaskan dan mengklarifikasikan kode program kita baik untuk mengingatkan kita sendiri maupun orang lain yang memeriksanya.
1.4
Beberapa Pengertian dalam Unit Kompetensi Ini :
Beberapa pengertian yang dipergunakan di dalam unit kompetensi ini, yaitu : Dokumentasi kode program adalah suatu bagian penting dalam pemrograman yang seringkali terabaikan, dianggap tidak perlu atau bahkan hanya menambah beban kerjaan. Namun, dokumentasi ini sebenarnya tidak boleh dihilangkan.
1.5 1.5.1
Informasi masing-masing elemen kompetensi Mengidentifikasi Kode Program
1) Pengetahuan Kerja Dahulu banyak perusahaan menganut konsep Hero Programmer, yaitu seorang programmer yang menulis kode program untuk satu kesatuan perusahaan. Tetapi
sekarang, mereka telah berpindah pada konsep tim dimana ada beberapa programmer yang bekerja di dalamnya. Sehingga kini programmer tidak lagi bekerja sendiri untuk menyelesaikan sebuah proyek, tetapi proyek tersebut dibagi ke dalam unit-unit kecil dan masing-masing di kerjakan secara tim. Untuk kasus ini, dokumentasi menjadi sangat penting karena: a. b. Programmer lain mungkin ditugaskan untuk mengembangkan proyek Anda Proyek yang Anda selesaikan mungkin saja digunakan lagi sebagai bagian untuk penyempurnaan proyek lain c. Programmer lain mungkin perlu untuk membaca dan memahami kode program Anda.
Modul Junior Web Programmer 5
Apakah hanya ini saja alasan mengapa dokumentasi itu penting? Tentu tidak. Ketika Anda menulis program, Anda mungkin dapat menyelesaikannya dalam waktu beberapa jam saja. Namun untuk program-program yang lebih komplek tentu Anda membutuhkan waktu lebih lama, misalnya beberapa hari, beberapa minggu atau beberapa bulan. Untuk kasus ini, sekali lagi dokumentasi menjadi penting, karena: a. b. Anda tidak mungkin mengerjakan proyek Anda hanya dalam sekali duduk Dokumentasi dapat memberitahu Anda apa yang telah Anda lakukan terakhir kali pada kode-kode program Anda c. Dokumentasi memungkinkan Anda untuk mencatat mengapa Anda memutuskan untuk menulis kode tersebut, atau mengapa Anda memilih untuk tidak mencari solusi tertentu lainnya. d. Dokumentasi memberitahu Anda keterbatasan atau bug yang ada untuk perbaikan selanjutnya e. Dokumentasi memungkinkan pencarian dan referensi yang lebih mudah di dalam program f. Dokumentasi adalah praktek pemrograman yang dianjurkan
2) Ketrampilan Kerja Nah, sekarang Anda sudah tahu mengapa dokumentasi kode program itu sangat penting. Sekarang mari kita lanjutkan dengan bagaimana langkah-langkah yang baik untuk membuat dokumentasi kode program tersebut. Dokumentasi program sendiri bisa menggunakan comment pada program, notasi algoritma atau tabel keputusan yang akan dibahas pada sub-bab berikutnya.
Identifikasi Modul Program Sebelum memulai sebuah dokumentasi, Anda perlu mengidentifikasi dulu modul program Anda. Sebuah program bisa terdiri dari satu modul atau lebih. Yang dimaksud dengan modul program adalah sekumpulan fungsi dan atau prosedur dalam sebuah program yang memiliki tujuan yang sebangun. Contohnya: modul program untuk membaca data dari basis data. Di dalam modul program ini terdapat fungsi atau prosedur untuk melakukan dan memutuskan koneksi ke basis data. Modul program ini juga memiliki fungsi atau prosedur untuk meng-ekstrak data dari basis data dan mungkin juga fungsi atau prosedur untuk menampilkan data yang telah
di-ekstrak tersebut. Artinya fungsi dan prosedur inilah yang membentuk modul program untuk membaca data dari basis data.
Parameter Data I/O Pada Fungsi atau Prosedur Jika tadi kita membahas bagaimana mengidentifikasi modul program maka sekarang kita melihat ke dalam modul tersebut, yaitu pada fungsi atau prosedur yang terdapat di dalam modul tersebut. Anda tentu sudah mengetahui perbedaan antara fungsi dan prosedur. Secara singkat, perbedaannya adalah bahwa fungsi dapat mengembalikan nilai sedangkan prosedur tidak mengembalikan nilai. Namun keduanya dapat memiliki parameter data masukan atau keluaran (Input/Output). Agar lebih jelas, marilah kita perhatikan fungsi C++ dibawah ini! long fibonacci (unsigned long n) { if (n <= 1) { return n; } else { return fibonacci(n - 1) + fibonacci(n 2); } } Fungsi diatas adalah fungsi untuk menampilkan bilangan fibonacci, yaitu bilangan yang setiap angkanya merupakan penjumlahan dari dua angka di depannya. Urutan bilangan fibonacci adalah sebagai berikut: 1, 1, 2, 3, 5, 8, 13, 21, ... Tapi yang ingin kita bahas bukanlah fungsi fibonacci ini, mengidentifikasi parameter di dalam fungsi tersebut. Fungsi fibonacci ini memiliki 1 parameter data masukan/input yaitu n yang memiliki tipe data unsigned long (bilangan bulat positif) dan mengembalikan 1 nilai keluaran/output. Jika Anda memanggil fungsi fibonacci(8), maka hasilnya adalah 21. Angka 8 merupakan parameter yang menjadi data masukan dan angka 21 merupakan data keluaran dari fungsi tersebut dimana bilangan ke-8 dari deret fibonacci adalah 21. Data dan Algoritma Pada Fungsi atau Prosedur Ketika Anda menulis sebuah kode program, baik itu berupa suatu fungsi atau prosedur, Anda tentu memikirkan algoritma pemrograman atau alur proses dari fungsi maupun prosedur tersebut. Algoritma itu sendiri merupakan urutan langkah-langkah logis penyelesaian masalah yang disusun secara sistematis.
Ketika Anda menulis kode program anda juga tidak akan pernah terlepas dari data. Dan data ini juga secara tidak langsung Anda pikirkan dan gunakan di dalam algoritma Anda. Misalkan Anda diminta untuk membuat fungsi yang dapat menampilkan bilangan fibonacci seperti yang kita bahas sebelumnya. Maka langkah yang Anda ambil tentu saja: a. b. Perlu tahu terlebih dahulu apakah yang dimaksud dengan bilangan fibonacci tersebut. Setelah Anda tahu bahwa bilangan fibonacci adalah urutan angka dimana sebuah angka merupakan hasil jumlah 2 angka sebelumnya, maka Anda mulai memikirkan logika pemrogramannya. c. d. Pertama, Anda tentu menentukan apa yang menjadi data masukan. Kedua, Anda memikirkan proses bagaimana data yang menjadi masukan dapat menghasilkan data keluaran yang benar. Dalam hal ini proses itu adalah bagaimana kode program untuk menjumlahkan 2 angka sebelumnya berdasarkan data masukan Anda. e. Terakhir, Anda mengevaluasi kode di dalam fungsi atau prosedur Anda untuk melihat apakah hasilnya sudah benar. Lalu, apakah yang dapat kita simpulkan dalam hal ini? Jika kita lihat secara garis besar maka suatu fungsi, prosedur, program adalah hanya menyangkut 3 unsur dasar yang sering disebut IPO, yakni: 1. Masukan (Input ) 2. Proses (Process ) 3. Keluaran (Output ) Maka dari itu, sebuah algoritma tak lebih merupakan sekumpulan logika untuk memproses data masukan sehingga menghasilkan data keluaran yang diinginkan.
Gambar Model Elemen-Elemen Pembentuk Aplikasi 3) Sikap Kerja Sikap kerja perlu diperhatikan dalam lingkungan kerja, yaitu : 1. Mengidentifikasi modul sesuai dengan fungsi dan prosedur dengan benar. 2. Meninjau parameter data yang menjadi masukkan dengan tepat. 3. Menjelaskan data dan algoritma sesuai dengan deskripsi fungsinya.
1.5.2
Membuat Dokumentasi Modul Program
1) Pengetahuan Kerja Anda sudah mengerti bagaimana mengidentifikasi modul program, menentukan parameter data pada fungsi dan prosedur serta telah mampu menjelaskan data dan algoritma pemrograma pada fungsi dan prosedur. Maka saat ini kita akan mulai menyusun dokumentasi untuk modul program. Seperti yang telah disebutkan pada sub-bab sebelumnya, modul program merupakan kumpulan dari beberapa fungsi atau prosedur dengan tujuan sama. Modul juga
memiliki data-data berupa variabel-variabel, referensi dan sebagainya untuk mendukung komunikasi atau interaksi antara fungsi-fungsi dan atau prosedur-prosedur di dalamnya. Oleh karena itu dalam dokumentasi modul, kita menjelaskan secara garis besar kegunaan dari modul ini. Dokumentasi dapat dibuat dengan menambahkan commentcomment secara langsung bersama kode-kode lain di dalam program. Keuntungan
penggunaan comment adalah Anda dapat sekaligus memahami kode-kode di dalam program tersebut. Bentuk penulisan comment ini sendiri bergantung pada bahasa pemrograman masing-masing. Berikut adalah contoh penulisan comment pada beberapa bahasa pemrograman: a. Pada Microsoft Visual Basic, comment dapat dideklarasikan dengan diawali simbol apostrophe ( ' ) atau keyword REM. b. Pada bahasa pemrograman Java, JavaScript, ActionScript,C, C++ dan C#, comment dideklarasikan dengan simbol double-slash ( // ) untuk comment dalam 1 baris dan dengan notasi /* comment */ untuk comment 1 baris atau lebih. c. Pada bahasa scripting seperti HTML, comment dapat dideklarasikan dengan notasi . d. Pada CSS, anda bisa menggunakan notasi /* comment */ untuk mendeklarasikan comment. e. Pada PHP, anda dapat mendeklarasikan comment dengan menggunakan simbol dan notasi seperti pada Java dan C pada poin b diatas. Untuk comment dalam 1 baris, PHP juga mendukung penggunaan simbol ( # ) seperti bahasa pemrograman Perl dan Shell. f. Pada bahasa rakitan atau Assembly, Anda dapat mendeklarasikan comment dengan diawali simbol titik koma / semicolon ( ; ). g. Pada SQL Server, Anda dapat menggunakan notasi /* comment */ atau simbol ( -- ) untuk mendeklarasikan comment. Tentang bagaimana format penulisan comment, Anda dapat mengacu pada referensi manual atau dokumentasi dari bahasa pemrograman yang Anda gunakan. Referensi ini biasanya dapat Anda temukan pada dokumen bantuan bahasa pemrograman yang bersangkutan. Dokumentasi juga dapat dibuat terpisah dari kode program, menggunakan beberapa notasi algoritma berikut: a. Notasi I Menyatakan algoritma dengan kalimat-kalimat deskriptif
10
Dengan notasi kalimat deskriptif, penjelasan setiap langkah akan menjadi lebih mudah dan tidak dibatasi oleh bahasa. Misalnya proses diawali dengan kata kerja seperti baca, cetak, tulis, ganti, set dan sebagainya. Sedangkan untuk pernyataan kondisional dinyatakan dengan jika ..., maka ..., dan sebagainya. Untuk algoritma yang pendek, notasi ini masih layak untuk dipergunakan. Namun, untuk masalah yang lebih komplek, notasi ini tidak dianjurkan. Selain itu, proses pengubahan dari notasi algoritma ini ke dalam bahasa pemrograman cenderung sulit untuk dilakukan. b. Notasi II Menyatakan algoritma dengan Pseudo-code Pseudo artinya tidak sebenarnya atau semu. Jadi yang dimaksud dengan Pseudocode adalah notasi-notasi yang menyerupai bahasa pemrograman tetapi bukan kode program itu sendiri. Jika Anda mengamati secara seksama, maka Anda akan menjumpai bahwa bahasa pemrograman umumnya memiliki sintaks atau notasi yang hampir sama untuk beberapa instruksi umum. Contohnya if-then-else, while-do, repeat-until, read, write, print, dan sebagainya. Dari pengamatan inilah berawal notasi algoritma pseudo-code yang dapat menjelaskan langkah-langkah algoritma secara lebih jelas tanpa membingungkan pembaca dan sekaligus lebih dekat dengan bahasa pemrograman. c. Notasi III Menyatakan algoritma dengan diagram Notasi bentuk ketiga ini menggunakan diagram untuk menggambarkan langkahlangkah algoritma pemrograman sebagai dokumentasi kode program. Pada awal era pemrograman salah satu diagram yang paling populer adalah Diagram Alir ( Flow Chart ). Diagram ini cenderung menjelaskan aliran instruksi di dalam program secara visual dibanding memperlihatkan struktur program. Diagram ini cocok untuk algoritma sederhana. Untuk algoritma yang lebih komplek, penggunaan diagram ini menjadi kurang efektif karena perlu berlembar-lembar halaman hanya untuk menggambarkan aliran proses program. Saat ini, penggunaan diagram alir ( Flow Chart ) sudah mulai ditinggalkan dan mungkin hanya digunakan untuk proses-proses yang sederhana. Sedangkan untuk proses-proses yang lebih komplek, kini cenderung menggunakan konsep UML (Unified Modeling Language).
2) Ketrampilan Kerja Dokumentasi Modul
11
Yang perlu dijelaskan atau diikut sertakan dalam dokumentasi modul adalah sebagai berikut: a. b. c. d. e. f. Informasi programmer, seperti identitas misalnya. Informasi lisensi jika perlu, misalnya hak cipta. Penjelasan/deskripsi mengenai konteks atau kegunaan modul Uraian tentang data-data dan referensi-referensi yang digunakan di dalam modul Spesifikasi modul berupa versi, tanggal pembuatan, revisi dan sebagainya Penjelasan singkat mengenai fungsi-fungsi dan prosedur-prosedur yang ada, meliputi kegunaan dan cara penggunaannya Contoh: Berikut adalah contoh modul program Metalworks.java dari Sun Microsystem yang menyertakan dokumentasi penjelasan dengan bentuk comment.
12
/* * @(#)Metalworks.java 1.17 05/11/17 * * Copyright (c) 2006 Sun Microsystems, Inc. * All Rights Reserved. * * Redistribution and use in source and binary forms, * with or without modification, are permitted provided * that the following conditions are met: * * -Redistribution of source code must retain the above * copyright notice, this list of conditions and the * following disclaimer. * * -Redistribution in binary form must reproduce the above * copyright notice, this list of conditions and the * following disclaimer in the documentation and/or other * materials provided with the distribution. * * Neither the name of Sun Microsystems, Inc. or the names * of contributors may be used to endorse or promote * products derived from this software without specific * prior written permission. * * This software is provided "AS IS," without a warranty of * any kind. ALL EXPRESS OR IMPLIED CONDITIONS, * REPRESENTATIONS AND WARRANTIES, INCLUDING ANY IMPLIED * WARRANTY OF MERCHANTABILITY, FITNESS FOR A PARTICULAR * PURPOSE OR NON-INFRINGEMENT, ARE HEREBY EXCLUDED. SUN * MIDROSYSTEMS, INC. ("SUN") AND ITS LICENSORS SHALL NOT BE * LIABLE FOR ANY DAMAGES SUFFERED BY LICENSEE AS A RESULT * OF USING, MODIFYING OR DISTRIBUTING THIS SOFTWARE OR ITS * DERIVATIVES. IN NO EVENT WILL SUN OR ITS LICENSORS BE * LIABLE FOR ANY LOST REVENUE, PROFIT OR DATA, OR FOR * DIRECT, INDIRECT, SPECIAL, CONSEQUENTIAL, INCIDENTAL OR * PUNITIVE DAMAGES, HOWEVER CAUSED AND REGARDLESS OF THE * THEORY OF LIABILITY, ARISING OUT OF THE USE OF OR * INABILITY TO USE THIS SOFTWARE, EVEN IF SUN HAS BEEN * ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. * * You acknowledge that this software is not designed, * licensed or intended for use in the design, construction, * operation or maintenance of any nuclear facility. */ /* @(#)Metalworks.java 1.17 05/11/17 */
13
import import import import
java.awt.*; javax.swing.*; javax.swing.border.*; javax.swing.plaf.metal.MetalLookAndFeel;
/** * This application is a demo of the Metal Look & Feel * * @version 1.17 11/17/05 * @author Steve Wilson */ public class Metalworks { public static void main( String[] args ) { UIManager.put("swing.boldMetal", Boolean.FALSE); JDialog.setDefaultLookAndFeelDecorated(true); JFrame.setDefaultLookAndFeelDecorated(true); Toolkit.getDefaultToolkit().setDynamicLayout(true); System.setProperty("sun.awt.noerasebackground","true"); try { UIManager.setLookAndFeel(new MetalLookAndFeel()); } catch ( UnsupportedLookAndFeelException e ) { System.out.println ("Metal Look & Feel not supported on this platform. \nProgram Terminated"); System.exit(0); } JFrame frame = new MetalworksFrame(); frame.setVisible(true); } } Dari contoh diatas Anda akan mendapatkan informasi nama modul tersebut adalah Metalworks.java, versinya adalah 1.17 dengan tanggal rilis 17 November 2005. Programmer-nya adalah Steve Wilson. Tujuan dari modul tersebut adalah sebagai demo untuk menampilkan antarmuka Metal . Anda juga melihat lisensi dari Sun Microsystem menyangkut hak cipta dan penggunaan modul tersebut.
Penjelasan Fungsi Dan Prosedur Dalam Dokumentasi Modul Bila Anda sudah membuat deskripsi tentang modul program, maka yang perlu Anda lakukan sekarang adalah menjelaskan bagian bagian yang terdapat dalam modul program itu yaitu berupa penjelasan Singkat mengenai fungsi-fungsi dan prosedur-prosedur di dalamnya berupa kegunaan dan atau cara penggunaannya. Jika terdapat data-data yang berada dalam ruang lingkup modul, maka kegunaan data-data tersebut juga dijelaskan.
Untuk lebih jelasnya mari kita tinjau bersama-sama contoh dokumentasi modul PropertiesMetalTheme.java berikut.
/* * @(#)PropertiesMetalTheme.java */
1.12 05/11/17
/* * Import class using in this module from packages * swing and awt for user interface * io for file input/output operation * util for utilities */ import import import import import import import javax.swing.plaf.*; javax.swing.plaf.metal.*; javax.swing.*; javax.swing.border.*; java.awt.*; java.io.*; java.util.*;
/** * This class allows you to load a theme from a file. * It uses the standard Java Properties file format. * To create a theme you provide a text file which contains * tags corresponding to colors of the theme along with a * value for that color. For example: * * name=My Ugly Theme * primary1=255,0,0 * primary2=0,255,0 * primary3=0,0,255 * * This class only loads colors from the properties file, * but it could easily be extended to load fonts or even * icons. * * @version 1.12 11/17/05 * @author Steve Wilson */
15
public class PropertiesMetalTheme extends DefaultMetalTheme { private String name = "Custom Theme"; private ColorUIResource primary1; private ColorUIResource primary2; private ColorUIResource primary3; private ColorUIResource secondary1; private ColorUIResource secondary2; private ColorUIResource secondary3; private ColorUIResource black; private ColorUIResource white; /** * pass an inputstream pointing to a properties file. * Colors will be initialized to be the same as the * DefaultMetalTheme, and then any colors provided in * the properties file will override that. */ public PropertiesMetalTheme( InputStream stream ) { initColors(); loadProperties(stream); } /** * Initialize all colors to be the same as the * DefaultMetalTheme. */ private void primary1 primary2 primary3 initColors() { = super.getPrimary1(); = super.getPrimary2(); = super.getPrimary3();
secondary1 = super.getSecondary1(); secondary2 = super.getSecondary2(); secondary3 = super.getSecondary3(); black = super.getBlack(); white = super.getWhite(); }
16
/** * Load the theme name and colors from the properties * file * Items not defined in the properties file are ignored */ private void loadProperties(InputStream stream) { Properties prop = new Properties(); try { prop.load(stream); } catch (IOException e) { System.out.println(e); } Object tempName = prop.get("name"); if (tempName != null) { name = tempName.toString(); } Object colorString = null; colorString = prop.get("primary1"); if (colorString != null){ primary1 = parseColor(colorString.toString()); } colorString = prop.get("primary2"); if (colorString != null) { primary2 = parseColor(colorString.toString()); } colorString = prop.get("primary3"); if (colorString != null) { primary3 = parseColor(colorString.toString()); } colorString = prop.get("secondary1"); if (colorString != null) { secondary1 = parseColor(colorString.toString()); } colorString = prop.get("secondary2"); if (colorString != null) { secondary2 = parseColor(colorString.toString()); }
17
colorString = prop.get("secondary3"); if (colorString != null) { secondary3 = parseColor(colorString.toString()); } colorString = prop.get("black"); if (colorString != null) { black = parseColor(colorString.toString()); } colorString = prop.get("white"); if (colorString != null) { white = parseColor(colorString.toString()); } } public String getName() { return name; } protected ColorUIResource getPrimary1() { return primary1; } protected ColorUIResource getPrimary2() { return primary2; } protected ColorUIResource getPrimary3() { return primary3; } protected ColorUIResource getSecondary1() { return secondary1; } protected ColorUIResource getSecondary2() { return secondary2; } protected ColorUIResource getSecondary3() { return secondary3; } protected ColorUIResource getBlack() { return black; } protected ColorUIResource getWhite() { return white; } /** * parse a comma delimited list of 3 strings into color */ private int int int ColorUIResource parseColor(String s) { red = 0; green = 0; blue = 0;
18
try { StringTokenizer st = new StringTokenizer(s, ","); red = Integer.parseInt(st.nextToken()); green = Integer.parseInt(st.nextToken()); blue = Integer.parseInt(st.nextToken()); } catch (Exception e) { System.out.println(e); System.out.println("Couldn't parse color :" + s); } return new ColorUIResource(red, green, blue); } }
Modul ini adalah modul yang bertujuan untuk membaca konfigurasi tampilan dari file properties. Pada modul ini, Anda akan menemukan penjelasan pada setiap fungsi dan prosedur yang mendeskripsikan kegunaan dari masing-masing fungsi dan prosedur tersebut. Misalnya : /** * Load the theme name and colors from the properties * file * Items not defined in the properties file are ignored */ private void loadProperties(InputStream stream) ....
Dari keterangan yang diberikan, kita dapat mengetahui bahwa kegunaan dari prosedur loadProperties adalah untuk mengambil nama theme dan warna dari file properties. Bayangkan jika tidak ada keterangan mengenai prosedur ini. Dari nama prosedur, mungkin Anda tahu bahwa fungsinya adalah untuk me-load properties. Tetapi bagaimana jika nama prosedur yang dibuat tidak jelas sedangkan nama prosedur yang jelas seperti ini saja akan memunculkan pertanyaan seputar properties apa yang di-load. Jika tidak ada penjelasan seperti diatas, maka Anda terpaksa harus menelusuri kode program di
19
dalam prosedur ini baris demi baris hanya untuk mengetahui apa sebenarnya yang diproses oleh prosedur bersangkutan. Tentu ini sudah menghabiskan waktu dan tenaga Anda. 3) Sikap Kerja Beberapa sikap kerja yang perlu diperhatikan saat berada di lingkungan kerja, yaitu: a. Membuat dokumentasi modul untuk memudahkan pelacakan b. Menjelaskan fungsi dan prosedur dalam modul
1.5.3
Membuat Dokumentasi Fungsi atau Prosedur Program
1) Pengetahuan Kerja Sama halnya dengan dokumentasi modul program, dokumentasi fungsi dan prosedur program, menjelaskan isi dari fungsi dan prosedur yang bersangkutan mulai dari data masukan dan keluaran, tipe data hingga proses di dalamnya. Dokumentasi untuk fungsi dan prosedur program dapat dibuat dengan menggunakan paduan antara comment dengan notasi algoritma kalimat deskriptif misalnya. Jika perlu Anda juga dapat membuat dokumen terpisah berupa diagram yang menjelaskan aliran proses prosedur atau fungsi yang bersangkutan atau menggunakan metode standar, UML. Dalam pelatihan ini, kita akan coba mempelajari keduanya yaitu mengggunakan comment dan menggunakan diagram. Jika Anda menggunakan comment, seperti yang sudah dijelaskan sebelumnya, maka harus menjelaskan fungsi dan prosedur itu, namanama variabel (yaitu data masukan dan keluaran) atau menjelaskan alasan mengapa pilihan atas metode tertentu digunakan dalam fungsi dan atau prosedur yang bersangkutan. Comment di dalam kode program akan sangat membantu, menghemat waktu dan energi serta memastikan baik penulis program dan orang lain memahami struktur dan tujuan program secara keseluruhan.
2) Ketrampilan Kerja Dokumentasi Fungsi dan Prosedur Di dalam dokumentasi fungsi dan prosedur, selain menjelaskan kegunaan, Anda juga menjelaskan detil di dalamnya meliputi: a. Penyataan-pernyataan (statement) baik yang berupa: o o Assignment Perulangan (Looping )
20
o b. c. d. e.
Seleksi atau kondisional ( Selection /Conditional )
Bagian Public dan Private di dalam Class Implementasi Algoritma jika dibutuhkan Informasi-informasi lain yang dianggap perlu.
Perhatikan contoh berikut!
/** * Build menu bar according to the selected theme */ protected void buildMenus() { menuBar = new JMenuBar();
21
menuBar.setOpaque(true); JMenu file = buildFileMenu(); JMenu edit = buildEditMenu(); JMenu views = buildViewsMenu(); JMenu speed = buildSpeedMenu(); JMenu help = buildHelpMenu(); // load a theme from a text file MetalTheme myTheme = null; try { InputStream istream = getClass().getResourceAsStream ("/resources/MyTheme.theme"); myTheme = new PropertiesMetalTheme(istream); } catch (NullPointerException e) { System.out.println(e); } // build an array of themes MetalTheme[] themes = { new OceanTheme(), new DefaultMetalTheme(), new GreenMetalTheme(), new AquaMetalTheme(), new KhakiMetalTheme(), new DemoMetalTheme(), new ContrastMetalTheme(), new BigContrastMetalTheme(), myTheme }; // put the themes in a menu JMenu themeMenu = new MetalThemeMenu("Theme", themes); menuBar.add(file); menuBar.add(edit); menuBar.add(views); menuBar.add(themeMenu); menuBar.add(speed); menuBar.add(help); setJMenuBar(menuBar); } Dari contoh ini, Anda dapat melihat penjelasan pada setiap pernyataan-pernyataan yang dianggap penting. Misalnya: // put the themes in a menu JMenu themeMenu = new MetalThemeMenu("Theme", themes); menuBar.add(file); menuBar.add(edit); menuBar.add(views); menuBar.add(themeMenu); ...
Dari penjelasan itu, kita tahu bahwa pernyataan tersebut berguna untuk mem-format menu yang dibuat sesuai dengan tema yang dipilih. Demikian halnya dengan pernyataanpernyataan lainnya.
Penjelasan Parameter Data I/O Jika fungsi atau prosedur Anda memiliki parameter maka parameter ini juga harus dijelaskan. Mengapa parameter ini diperlukan? Yang perlu dijelaskan dalam bagian ini adalah aliran data masukan dari parameter hingga mendapatkan hasil keluaran. Perhatikan fungsi berikut: // // // // // // Menghitung luas segitiga dan mengembalikan nilai integer Fungsi menerima 2 parameter bertipe float fBase sebagai nilai alas segitiga fHeight sebagai nilai tinggi segitiga Contoh: Print iTriangleArea(3.2, 4.3) Hasilnya adalah 7 (6.88 di-cast ke int)
int iTriangleArea(float fBase, float fHeight) { // Luas Segitiga = alas x tinggi / 2 // Hasil kali diubah dari float ke integer return (int) fBase * fHeight / 2; } Dengan membaca penjelasan tersebut maka orang lain akan mengerti bagaimana aliran data dan bagaimana parameter data tersebut diproses sehingga menghasilkan output seperti itu.
Penjelasan Data dan Tipe Data Pada Fungsi atau Prosedur Seperti yang telah diuraikan, semua fungsi dan prosedur akan selalu berhubungan dengan pengolahan data yang dinyatakan sebagai variabel-variabel dalam kode program. Variabel-variabel inilah yang mengacu pada memori komputer dimana data-data yang dimanipulasi oleh fungsi dan prosedur itu tersimpan. Sebagaimana kita ketahui, bentuk data cukuplah bervariasi. Ada yang berupa angka, karakter, teks, tabel dan sebagainya. Bentuk-bentuk data inilah yang kemudian dikenal sebagai tipe data. Data-data yang digunakan di dalam fungsi dan prosedur harus dijelaskan tipenya. Tipe data dibedakan ke dalam 2 kelompok yaitu tipe data dasar dan tipe data bentukan. Yang merupakan tipe data dasar adalah:
a. b. c. d. e.
Bilangan bulat (integer, long, short, dsb) Bilangan riil (decimal, single, float, double, dsb) Bilangan Logika (boolean) Karakter (char) Teks (string) Sedangkan tipe data bentukan adalah tipe data yang didefiniskan sendiri oleh
pemrogram menggunakan satu atau lebih tipe data dasar. Tipe data ini sering kita kenal dengan User-defined Type. Contoh, kita ingin membuat tipe data yang dapat menampung posisi x dan y. Public Type POINTAPI x As Long y As Long End Type Tipe data diatas ditulis dalam Visual Basic dan diberi nama POINTAPI. Artinya jika kita mendeklarasikan sebuah variabel Z dengan tipe data ini, maka variabel Z akan menyimpan nilai x dan y. Cara-cara pembuatan tipe data bentukan dapat Anda pelajari pada bahasa pemrograman masing-masing. Nah, apa kaitan antara tipe data dengan dokumentasi fungsi dan prosedur. Anda tentu harus menjelaskan secara rinci data dan tipe data yang digunakan untuk mendeskripsikan proses di dalam fungsi dan prosedur tersebut. Misalnya: Anda tentu harus menjelaskan tipe data parameter yang dapat diterima oleh fungsi atau prosedur Anda, termasuk data hasil keluaran yang diterima. Bisa saja parameter yang menjadi masukan harus berupa bilangan bulat integer. Dan keluarannya bisa berupa tipe data logika, benar atau salah (True or False). Marilah kita buat sebuah program sederhana untuk menghitung harga total dari jumlah barang yang dibeli sekaligus mencoba membuat dokumentasi untuk program tersebut. Misalnya kita menggunakan C#.
24
/* * * * * */
TotalHarga 1.0 13/09/2007 Oleh by SHa Menghitung total harga dengan C# Untuk TIK.PR02.019.01 - Membuat Dokumen Kode Program
// Menggunakan Class Package System using System; namespace TotalHarga { class Program {
// Fungsi untuk menghitung harga total // dan mengembalikan hasilnya dalam string // parameter jb untuk jumlah barang // dengan tipe short // dan hs untuk harga satuan dengan tipe single // tipe disamakan dengan data masukan yang dikirim static String hargaTotal(short jb, Single hs) { return Convert.ToString(jb * hs); // Konversi ke string sebelum dikembalikan } // Fungsi utama static void Main(string[] args) { // Minta input jumlah barang yang // dibeli dari Console Console.Write("Masukkan jumlah barang yang di beli: "); // Simpan input ke dalam variabel n // dengan tipe short // Karena input kita adalah string maka // diubah ke Int16 // Int16 identik dengan tipe short short n = Convert.ToInt16(Console.ReadLine()); // Minta input harga satuan Console.Write ("Masukkan harga satuan: "); // Simpan input ke dalam variabel harga // dengan tipe single // single berarti dapat menerima bilangan // pecahan (desimal) Single harga = Convert.ToSingle(Console.ReadLine()); // Panggil fungsi hargaTotal dengan // mengirimkan parameter // n sebagai jb dan harga sebagai hs // Hasil yang dikembalikan di cetak ke // layar Console Console.Write("\nTotal harga yang harus dibayar: " + hargaTotal(n, harga)); // Minta input apa saja untuk keluar // dari program Console.ReadKey(); } } }
25
Contoh diatas menunjukkan bagaimana kita menjelaskan modul program, data dan tipe data, fungsi dan prosedur dalam bentuk comment. Bagaimana jika kita ingin menggambarkan aliran prosesnya dengan diagram alir misalnya? Diagram alir untuk modul diatas dapat digambarkan seperti gambar berikutnya.
Gambar Diagram Alir ( Flow Chart ) Program Total Harga Jika Anda menggunakan UML maka Class Program di dalam modul TotalHarga Anda akan digambarkan sebagai berikut:
Gambar Class Program dalam Modul Total Harga Pembahasan mengenai UML dapat Anda dapatkan dari buku-buku lain mengenai UML. Dalam pelatihan ini kita hanya membahas pembuatan dokumen kode program dalam lingkup internal program itu sendiri. UML sendiri umumnya digunakan untuk perancangan (Architecture/Design Documentation). 3) Sikap Kerja Memperhatikan sikap kerja sangat diperlukan dalam lingkungan kerja, yaitu : a. Membuat dokumentasi fungsi dan prosedur sesuai dengan identitasnya b. Menjelaskan parameter data keluaran dan masukkan pada dokumen c. Menjelaskan data dan tipe datanya pada dokumen
26
1.5.4
Mengevaluasi Dokumen Kode Program
1) Pengetahuan Kerja
Apabila seluruh kode program (fungsi, prosedur dan modul program) telah terdokumentasi, maka langkah terakhir adalah melakukan evaluasi terhadap dokumentasi tersebut. Pada tahap ini, Anda harus memeriksa kelengkapan, kebenaran dan tata bahasa di dalam dokumentasi Anda. Mungkin saja ketika Anda membuat dokumentasi, comment misalnya, Anda hanya menulis secara singkat dengan bahasa atau simbol yang mungkin hanya Anda sendiri yang mengerti. Jika demikian, maka di tahap inilah Anda harus memperbaikinya agar dapat dibaca dan dimengerti oleh orang lain.
Agar dokumentasi yang ditulis dapat dipahami oleh semua pihak yang terkait, maka diperlukanlah suatu standar dokumentasi baik dari sisi penulisan (berupa notasi, tata bahasa), bahkan suatu konvensi penulisan kode, seperti penamaan fungsi, prosedur, variabel, modul, dsb. Konvensi penulisan kode ini selalu Anda jumpai pada manual bahasa pemrograman. Memang bukan sesuatu aturan yang wajib diikuti. Namun, akan sangat membantu dalam kaitannya dengan dokumentasi kode program. Penamaan yang jelas, jelas akan memudahkan pembaca. Ditambah dengan dokumentasi yang baik tentu akan semakin baik lagi.
2) Ketrampilan Kerja Standar Dokumen Dokumen kode program dikenal sebagai dokumen teknis (Technical
Documentation) yang merupakan bagian dari dokumentasi piranti lunak (software documentation). Umumnya dikenal 3 metode dokumentasi program yaitu penggunaan comment, diagram dan tabel keputusan (decision table). Ketika Anda mulai membuat dokumentasi, baik dengan metode apapun, maka Anda harus mengikuti aturan standar penulisan yang telah disepakati bersama oleh tim atau mengikuti standar internasional yang diakui. Jika Anda menggunakan comment di dalam program, maka standar penulisan comment ini dapat Anda tentukan sendiri bersama tim Anda mengikuti panduan dari bahasa pemrograman yang bersangkutan dengan tambahan misalnya seperti berikut:
27
a.
Semua modul harus diberi informasi tentang penulis dan versi / tanggal agar dapat diketahui proses perkembangan atau revisi-nya
b. c.
Setiap fungsi/prosedur harus dijelaskan secara rinci alur data dan prosesnya Jika ada kode program yang diubah, maka kode yang lama tidak boleh dihapus tetapi diberi komentar, serta ditambahkan alasan perubahan, dan siapa yang mengubah. Tujuannya agar jika sewaktu-waktu kode itu diperlukan kembali maka kode tersebut masih ada.
d.
Penulisan menggunakan format seperti dibawah ini: o Modul // ------------- nama modul -------------- // // informasi mengenai modul .............. // // ....................................... // // --------------------------------------- //
e.
Fungsi/Prosedur /** nama fungsi atau prosedur **/ /** penjelasan mengenai fungsi atau prosedur * ..... */ Dan sebagainya o Pilihan lain, Anda juga dapat menggunakan alat-alat bantu dokumentasi yang
sudah banyak tersedia saat ini, diantaranya Doxygen, JavaDoc, ROBODOC, GenHelp, TwinText, Document!X, dan lain-lain. Aplikasi-aplikasi ini tersedia dan memiliki dukungan bahasa pemrograman yang bervariasi serta beberapa fitur untuk mengekspor dokumentasi ke beberapa format seperti file teks atau file HTML. Bila Anda menggunakan diagram alir (Flow Chart ), maka Anda perlu memperhatikan standar penggunaan simbol-simbol seperti ditunjukkan dalam tabel berikut ini: SIMBOL NAMA TERMINATOR FUNGSI Permulaan/akhir program
GARIS ALIR (FLOW LINE)
Arah aliran program
PREPARATION
Proses inisialisasi/pemberian harga awal

28
PROSES
Proses perhitungan/proses pengolahan data
DATA I/O
Proses input/output data, parameter, informasi Permulaan sub program/proses menjalankan sub program Perbandingan pernyataan, penyeleksian data yang memberikan pilihan untuk langkah selanjutnya
PREDEFINED PROCESS (SUB PROGRAM)
DECISION
ON PAGE CONNECTOR
Penghubung bagian-bagian flowchart yang berada pada satu halaman
OFF PAGE CONNECTOR
Penghubung bagian-bagian flowchart yang berada pada halaman berbeda
Jika Anda juga ingin menggunakan decision table (tabel keputusan), yaitu suatu alat bantu untuk memodelkan logika-logika yang komplek dalam program, untuk melengkapi dokumen Anda, maka perhatikan format standar berikut ini. Rules 1 Condition Stub 2 3 4 Condition Entry N
Action Stub
Action Entry
Misalnya kita ingin membuat tabel keputusan untuk kasus menghitung harga total seperti pada sub-bab 4.5 tapi dengan tambahan validasi terhadap persediaan dan pembelian
29
tidak boleh lebih dari 5 unit. Berikut adalah tabel keputusan untuk menunjukkan kemungkinan apa saja yang akan terjadi jika terdapat kondisi-kondisi seperti ini. Rules 1 a. Apakah 0< jumlah barang yang dibeli < 6? b. Apakah persediaan mencukupi? c. Apakah harga satuan > 0? Y Y Y 2 Y Y T 3 Y T Y 4 Y T T 5 T Y T 6 T T Y 7 T T T
a. Hitung harga total b. Jual semua yang dibeli c. Jual yang ada saja d. Buat catatan kekurangannya
X X -
X X
Kesempurnaan Teknis dan Tata Bahasa Dokumen Memastikan kesempurnaan teknis dan tata bahasa juga merupakan bagian dari evaluasi dokumen kode program. Jika Anda sudah menggunakan standar yang ditetapkan, maka tinjaulah kembali format teknis dan penggunaan tata bahasa pada penjelasanpenjelasan di dalam dokumen Anda. Pastikan bahasa yang digunakan memenuhi beberapa kriteria berikut: a. b. c. Jelas, artinya menyampaikan arti dan maksud yang ingin disampaikan. Mudah, artinya penyampaiannya mudah dipahami, tepat dan tidak bertele-tele. Lengkap, artinya semua penjelasan sudah mencakup keseluruhan kode program.
Pada tahap inilah, Anda harus memperbaiki dan memastikan dokumen Anda telah benarbenar siap dan sempurna.
Kelengkapan Dokumen Bila dokumen Anda telah sempurna secara teknis, baik dari sisi standar, format penulisan dan tata bahasa, maka langkah terakhir adalah memeriksa kelengkapan dokumen kode program Anda. Yang dimaksud lengkap disini selain kelengkapan isi dokumentasi seperti yang dijelaskan pada sub-bab sebelumnya, juga mencakup kelengkapan seluruh dokumen kode program yang Ada, misalnya diagram dan tabel keputusan disamping comment di dalam
30
program. Semua dokumen ini kemudian dikelompokkan menjadi satu sehingga menjadi satu dokumentasi kode program yang lengkap dan sempurna.
3) Sikap Kerja Sikap kerja perlu diperhatikan dalam lingkungan kerja, berupa : a. Merevisi dokumen sesuai dengan standar kerja b. Memperbaiki dokumen untuk menjamin kesempurnaan tata bahasa c. Melengkapi dokumen sehingga memenuhi syarat teknis
31
Bab
APLIKASI BASIS DATA

2.1 Tujuan Instruksional Umum
o Siswa mampu menceritakan dan menjelaskan dan mengoperasikan aplikasi basis data 2.2 Tujuan Instruksional Khusus o Siswa mengerti dan mampu menjelaskan apa yang dimaksud dengan basis data o Siswa dapat mengoperasikan aplikasi basis data dan dapat menjelaskan fitur-fitur yang terdapat pada aplikasi basis data tersebut o Siswa dapat mengerti dan mampu menjelaskan apa yang dimaksud dengan basis data, tabel, view, form dan modul o Siswa dapat membuat tabel dengan menggunakan wizard maupun dengan menggunakan bahasa data deskripsi o Siswa dapat memilih tipe data setiap field sesuai dengan kebutuhan o Siswa dapat membuat query / view sesuai dengan kebutuhan o Siswa dapat membuat query / view dengan menggunakan wizard o Siswa dapat membuat form dengan menggunakan wizard o Siswa dapat menampilkan field-field dari tabel/view pada form o Siswa dapet membuat modul untuk digunakan di form / report o Siswa dapat mengidentifikasi fitur-fitur modul
32
2.3
Sekilas Tentang Basis Data Basis data diartikan sebagai kumpulan informasi yang disimpan di dalam komputer
secara sistematik sehingga dapat diperiksa menggunakan suatu program komputer untuk memperoleh informasi dari data tersebut. Data dalam basis data terbagi-bagi ke dalam tabel-tabel. Tabel merupakan set data dalam basis data yang berguna untuk menampilkan data dalam bentuk matriks. Masing-masing tabel merupakan satu kesatuan yang terdiri dari beberapa kolom yang biasa disebut field. Field-field ini bisa memiliki tipe data yang berbeda-beda, bisa berupa string, number, date time dan lain-lain. Aplikasi basis data adalah sistem atau perangkat lunak yang dirancang untuk mengelola suatu basis data dan menjalankan operasi terhadap data yang diminta oleh pengguna. Dengan kata lain, aplikasi basis data adalah alat atau program yang digunakan untuk mengolah data menjadi informasi. Contoh aplikasi basis data yang telah berkembang sekarang ini adalah Oracle, SQL Server 2000/2005, Ms Access, MySQL dan sebagainya. Aplikasi basis data biasanya dilengkapi oleh autentifikasi user, yang berguna untuk mengidentifikasi siapa yang akan menggunakan aplikasi basis data. Hal ini dimaksudkan agar aplikasi basis data ini hanya bisa digunakan oleh orang-orang yang berhak dan tidak disalahgunakan untuk kepentingan yang salah. Semua aplikasi basis data mempunyai fasilitas untuk membuat tabel dan view, baik dengan menggunakan wizard, design view maupun dengan menggunakan bahasa data deskripsi. Beberapa fasilitas tambahan seperti membuat form dan report ada pada sebagian aplikasi basis data yang akan digunakan untuk menampilkan data. Setiap aplikasi basis data mempunyai menu-menu windows yang umum seperti new, open, save, dan print untuk membuat baru, membuka, menyimpan dan mencetak tabel, view, form, report dan lain-lain. Selain menu-menu windows umum, ada beberapa menu khusus aplikasi basis data seperti execute yang digunakan untuk menjalankan sebuah query, cancel yang digunakan untuk membatalkan sebuah query yang sedang dijalankan, export data yang bisa digunakan untuk mentransfer data dari satu basis data ke basis data yang lain. Menu-menu pada aplikasi basis data sangat tergantung dengan jenis aplikasi basis data yang digunakan.
2.4
Tabel Seperti yang telah dijelaskan sebelumnya, tabel merupakan set data dalam basis
data. Setiap basis data bisa mempunyai lebih dari satu tabel, tergantung dari keperluannya.
Tabel biasanya dibuat berdasarkan sebuah benda/kegiatan baik benda/kegiatan yang konkret maupun yang abstrak. Contoh dari tabel adalah tabel Siswa yang berfungsi untuk mendatakan siswa-siswa yang mengikuti sebuah pelatihan. Tabel-tabel tersebut mempunyai satu atau lebih kolom-kolom yang digunakan untuk mendeskripsikan tabel tersebut, kolom-kolom tersebut disebut field. Contoh-contoh field yang bisa ditambahkan pada tabel Siswa contohnya id siswa, nama, alamat, no ktp, no telepon dan hp. Masing-masing field bisa mempunyai tipe data yang berbeda-beda, tergantung dari keperluan datanya. Beberapa tipe-tipe data yang terdapat pada aplikasi basis data adalah sebagai berikut:
Tipe Data Text Keterangan Berguna untuk menyimpan data berupa karakter, bisa menentukan panjangnya karakter yang diinginkan dengan mengatur field size nya. Number Berguna untuk menyimpan data berupa angka, tipe data numerik bermacam-macam seperti integer, single, double, dan decimal. Date/Time AutoNumber Berguna untuk menyimpan data berbentuk tanggal dan jam. Berguna untuk menyimpan data berbentuk angka berurut yang akan dibuat secara otomatis oleh aplikasi basis data setiap kali data dimasukan.
Untuk membuat tabel, field-field dan constrain-constrain yang terdapat didalamnya, bisa digunakan beberapa cara seperti wizard, design view atau dengan menggunakan bahasa data deskripsi. Membuat tabel dengan menggunakan wizard lebih mudah karena sudah terdapat contoh tabel dan contoh fields untuk setiap tabel. Tetapi apabila ingin membuat tabel yang belum ada pada contoh tabel tersebut, sebaiknya menggunakan design view atau menggunakan bahasa data deskripsi. Pada wizard, tinggal diikuti saja langkah-langkahnya dan tekan finish. Setelah itu beri nama pada tabel yang dibuat dan tekan finish. Dengan mengikuti langkah-langkah tersebut, sebuah tabel sudah tercipta. Pembuatan tabel dengan menggunakan design view juga tidak terlalu rumit. Dengan menggunakan design view, kita tidak dituntut untuk mengerti bahasa data deskripsi, yang perlu dilakukan hanya memasukan nama field-field pada tempat yang disediakan dan memilih tipe-tipe data dari list yang ada serta memasukan constrainconstrain yang ada. Dan terakhir kita perlu menyimpannya. Dengan langkah-langkah tersebut, sebuah tabel sudah tercipta. Gambar 1 merupakan contoh pembuatan tabel dengan menggunakan design view. Kita tinggal memasukan nama-nama field di kolom
Field Name, memilih tipe data di kolom Data Type dan memasukan deskripsi field tersebut di kolom Description. Kemudian kita tinggal memberi nama dan menyimpan tabel ini.
Gambar 1. Pembuatan Tabel dengan Design View Pembuatan tabel dengan menggunakan bahasa data deskripsi lebih rumit dibandingkan dengan kedua cara sebelumnya. Untuk membuat tabel dengan menggunakan bahasa data deskripsi, atau yang biasa dikenal sebagai DDL (Data Definition Language), kita harus mempunyai pengetahuan tentang SQL (Structured Query Language). Kita harus membuat query dari bahasa data deskripsi tersebut, kemudian meng-execute query tersebut. Sintaks-sintaks yang harus diketahui untuk membuat, mengubah dan menghapus tabel dengan menggunakan bahasa data deskripsi adalah sebagai berikut: -
CREATE TABLE Sintaks ini digunakan untuk membuat tabel baru di basis data, sintaksnya adalah sebagai berikut: CREATE TABLE nama_tabel ( nama_field tipe data field, [nama_field tipe data field, ...])
35
Contoh: Untuk membuat tabel siswa dengan field-field id siswa, nama, alamat, no ktp, no telepon dan hp, dilakukan dengan membuat sintaks sebagai berikut: CREATE TABLE Siswa (id_siswa CHAR(10), nama VARCHAR(30), alamat VARCHAR(30), no_ktp varchar(20), no_telp VARCHAR(15), hp varchar(15)) ALTER TABLE Sintaks ini digunakan untuk mengubah tabel yang sudah ada sebelumnya, baik untuk menambahkan field baru, menghapus field atau mengubah field yang sudah ada. Sintaks untuk mengubah tabel adalah sebagai berikut: Untuk menambahkan field: ALTER TABLE nama_tabel ADD COLUMN nama_field tipe data field Untuk mengubah field: ALTER TABLE nama_tabel ALTER COLUMN nama_field tipe data field Untuk menghapus field: ALTER TABLE nama_tabel DROP COLUMN nama_field Contoh: Untuk menambahkan field kota di tabel siswa, dilakukan dengan membuat sintaks sebagai berikut: ALTER TABLE Siswa ADD COLUMN kota char(15) Untuk mengubah field kota dari panjang data dari 15 menjadi 20 di tabel siswa, dilakukan dengan membuat sintaks sebagai berikut: ALTER TABLE Siswa ALTER COLUMN kota char(20) Untuk mengubah field ID_SISWA dari char(10) menjadi integer di tabel siswa, dilakukan dengan membuat sintaks sebagai berikut: ALTER TABLE Siswa ALTER COLUMN id_siswa int Untuk menghapus field kota di tabel siswa, dilakukan dengan membuat sintaks sebagai berikut:
ALTER TABLE Siswa DROP COLUMN kota DROP TABLE Sintaks ini digunakan untuk menghapus tabel yang sudah ada sebelumnya, sintaksnya adalah sebagai berikut: DROP TABLE nama_tabel Contoh: Untuk menghapus tabel siswa yang sudah dibuat sebelumnya, dilakukan dengan membuat sintaks sebagai berikut: DROP TABLE Siswa
Selain field-field, sebuah tabel biasanya memiliki aturan-aturan (rule) yang membatasi data yang dimasukan. Hal ini berguna agar data yang terdapat pada basis data benar dan valid. Aturan-aturan ini pada basis data disebut sebagai constraint dan rule. Constraint adalah obyek yang merupakan bagian dari tabel dan fungsinya adalah untuk mengecek data agar memenuhi kondisi tertentu. Terdapat 5 jenis constraint yang ada pada setiap aplikasi basis data. Contraint-contraint tersebut adalah:
a.
Primary Key (PK)
Primary Key adalah suatu kunci utama yang dibuat dari sebuah kolom atau lebih yang menjadikan setiap data itu bersifat unik. Primary Key tidak boleh bernilai null. Contoh pada tabel Siswa adalah Id Siswa. Tidak ada 2 siswa atau lebih yang mempunyai 1 id yang sama. Untuk menambahkan primary key dapat dilakukan dengan sintaks sebagai berikut: ALTER TABLE nama_tabel ADD CONSTRAINT nama_constraint PRIMARY KEY(nama_field) Contoh: Untuk menambahkan id_siswa sebagai primary key pada tabel siswa, dilakukan dengan sintaks sebagai berikut: ALTER TABLE siswa ADD CONSTRAINT pk_siswa PRIMARY KEY(id_siswa)
37
b.
Foreign Key (FK)
Foreign Key adalah kunci asing yang terdapat pada satu kolom atau lebih di dalam suatu tabel yang merujuk pada kunci di tabel lainnya sebagai link antara tabel-tabel tersebut. Foreign Key digunakan untuk mengatur hubungan dua tabel atau lebih. Foreign Key tidak bersifat unik dan biasanya mengacu pada primary key di tabel lain. Untuk menambah Foreign Key dapat dilakukan dengan sintaks sebagai berikut: ALTER TABLE nama_tabel ADD CONSTRAINT nama_constraint FOREIGN KEY(nama_field) REFERENCES nama_tabel(nama_field)
Contoh: Pada tabel Siswa terdapat Id Siswa yang berfungsi sebagai Primary Key, sedangkan pada tabel Jadwal terdapat kolom Id_Siswa yang berfungsi sebagai Foreign Key. Id Siswa pada tabel Jadwal merujuk pada Id Siswa yang ada pada tabel Siswa. Untuk membuat Foreign Key dilakukan dengan sintaks sebagai berikut: ALTER TABLE Jadwal ADD CONSTRAINT fk_jadwal_siswa FOREING KEY(id_siswa) REFERENCES Siswa(id_siswa)
c.
Unique Constraint
Unique Constraint biasanya dikenal juga sebagai Alternate Key (AK), merupakan kandidat dari primary key yang tidak terpilih menjadi primary key. Sifatnya unik, artinya hampir tidak ada data yang sama. Untuk membuat Unique Constraint dilakukan dengan sintaks sebagai berikut: ALTER TABLE nama_tabel ADD CONSTRAINT nama_constraint UNIQUE(nama_field) Contohnya: No KTP tiap Siswa bisa dijadikan Unique Constraint dengan sintaks sebagai berikut: ALTER TABLE siswa ADD CONSTRAINT ak_siswa UNIQUE(no_ktp)
d.
Check Constraint (CK)
38
Check Constraint berfungsi untuk membatasi penyisipan data pada suatu tabel agar memenuhi kriteria-kriteria yang ditetapkan. Untuk membuat Constraint dilakukan dengan sintaks sebagai berikut: ALTER TABLE nama_tabel ADD CONSTRAINT nama_constraint CHECK (kondisi) Contoh: ID Siswa pada tabel Siswa harus diawali dengan S ALTER TABLE siswa ADD CONSTRAINT ck_siswa CHECK (LEFT(kdAbsensi,1)=)
e.
Default Constraint (DF)
Default Constraint berfungsi untuk memberikan nilai default pada data dalam suatu tabel. Jika kita tidak menginisialisasikan nilai pada sebuah data maka nilai pada data tersebut akan berisi nilai default yang ditentukan sebelumnya pada DF. Untuk membuat Default Constraint dilakukan dengan sintaks sebagai berikut: ALTER TABLE nama_tabel ADD CONSTRAINT nama_constraint DEFAULT nilai FOR nama_field Contoh: No Telp pada tabel Siswa akan berisi 0 apabila tidak diisi ALTER TABLE Siswa ADD CONSTRAINT df_pegawai DEFAULT 0 FOR no_telp
Untuk menghapus constraint-constraint yang telah dijelaskan diatas, dilakukan dengan sintaks sebagai berikut: ALTER TABLE nama_tabel DROP CONSTRAINT nama_constraint Selain constraint, ada juga yang dinamakan rule. Rule adalah bentuk lain dari Check Constraint dan merupakan sebuah obyek dalam SQL. Berikut adalah cara membuat rule adalah sebagai berikut: CREATE RULE nama_rule AS kondisi Untuk menerapkan rule pada kolom yang sesuai gunakan fungsi berikut: Exec sp_bindrule nm_rule,nm_tabel,nm_kolom Sedangkan untuk memutuskan hubungan rule dari kolom yang bersangkutan digunakan fungsi :
Exec sp_unbindrule nm_tabel,nm_kolom Sedangkan untuk menghapus rule yang telah dibuat, semua kolom yang terhubung dengan rule tersebut harus diputuskan terlebih dahulu. Sintaks : DROP RULE nama_rule Contoh: ID Siswa pada tabel Siswa harus diawali dengan S CREATE RULE ruleIDSiswa AS LEFT(@kdAbsensi,1) =S sp_bindrule ruleIDSiswa, Siswa, ID_siswa sp_unbindrule Siswa, ID_siswa DROP RULE ruleIDSiswa Setelah tabel selesai dibuat, kita bisa memanipulasi data didalam tabel tersebut dengan cara memasukan, mengubah, menghapus dan melihat data tersebut. Memanipulasi data tersebut bisa dilakukan secara langsung dengan membuka tabel-tabel tersebut atau dengan sintaks-sintaks SQL. Apabila memanipulasi data secara langsung, maka kita cukup membuka tabel tersebut dan langsung mengisikan data-data untuk tabel tersebut. Apabila memanipulasi dengan menggunakan sintaks-sintaks SQL, kita harus membuat terlebih dahulu sintaks-sintaks yang digunakan kemudian meng-execute-nya. Sintaks-sintaks yang digunakan untuk memanipulasi data adalah: -
INSERT Sintaks ini digunakan untuk memasukan data ke dalam tabel, sintaksnya adalah sebagai berikut: INSERT INTO nama_tabel (nama_field [, nama_field, ...]) VALUES (nilai [, nilai, ...]) Contoh: Untuk memasukan data siswa Albert ke tabel siswa, dilakukan dengan membuat sintaks sebagai berikut: INSERT INTO Siswa (id_siswa, nama, alamat, no_ktp, no_telp, hp) VALUES (S000000001, Albert, Jakarta, 001.284.63, 5344421, 0818996321)
UPDATE Sintaks ini digunakan untuk mengubah data yang ada di tabel. Sintaks untuk mengubah data adalah sebagai berikut:
Untuk mengubah semua data di tabel: UPDATE nama_tabel SET nama_field=nilai [, nama_field=nilai, ...] Untuk mengubah data tertentu di tabel: UPDATE nama_tabel SET nama_field=nilai [, nama_field=nilai, ...] WHERE nama_field=nilai Contoh: Untuk mengubah field alamat menjadi Jakarta Barat di tabel siswa, dilakukan dengan membuat sintaks sebagai berikut: UPDATE Siswa SET alamat=Jakarta Barat Untuk mengubah alamat siswa bernama Albert menjadi Jakarta Barat di tabel siswa, dilakukan dengan membuat sintaks sebagai berikut: UPDATE Siswa SET alamat=Jakarta Barat WHERE nama=Albert -
DELETE Sintaks ini digunakan untuk menghapus data di tabel yang sudah ada sebelumnya, sintaksnya adalah sebagai berikut: Untuk menghapus semua data di tabel: DELETE FROM nama_tabel Untuk menghapus data tertentu di tabel: DELETE FROM nama_tabel WHERE nama_field=nilai Contoh: Untuk menghapus semua data di tabel siswa, dilakukan dengan membuat sintaks sebagai berikut: DELETE FROM siswa Untuk menghapus data siswa dengan nama Albert di tabel siswa, dilakukan dengan membuat sintaks sebagai berikut: DELETE FROM siswa WHERE nama=Albert
SELECT Sintaks ini digunakan untuk melihat data yang sudah ada di tabel, sintaksnya adalah sebagai berikut: SELECT nama_field [, nama_field ...]
FROM nama_tabel [WHERE nama_field=nilai [ AND/OR nama_field=nilai ... ]] Contoh: Untuk melihat semua data yang sudah ada di tabel siswa, digunakan sintaks sebagai berikut: SELECT * FROM SISWA * bisa digunakan untuk menggantikan nama-nama field apabila yang ditampilkan adalah semua field Untuk melihat data siswa dengan nama Albert yang sudah ada di tabel siswa, digunakan sintaks sebagai berikut: SELECT * FROM SISWA WHERE nama=Albert Select akan dijelaskan dengan lebih detail di bagian selanjutnya.
2.5
View View adalah salah satu objek di aplikasi basis data yang berguna untuk melihat
data-data dalam tabel (bisa lebih dari satu tabel) dengan tampilan-tampilan tertentu sesuai dengan kebutuhan. View biasa digunakan untuk menampung query untuk memperlihatkan sebuah data tertentu yang sering digunakan, sehingga setiap kali ingin melihat data tersebut, tidak perlu lagi dibuat query ulang, hanya cukup dengan menjalankan view tersebut. Dengan kata lain, view merupakan query yang disimpan. View dapat dibuat dengan menggunakan wizard, query design grid atau dengan bahasa SQL. Membuat view dengan wizard sangat mudah. Kita tinggal memilih tabel yang akan digunakan dan field-field yang akan ditampilkan seperti pada gambar 2. Kemudian tekan tombol Next >, beri nama pada View tersebut seperti pada gambar 3 dan kemudian tekan tombol Finish. Dengan mengikuti langkah-langkah tersebut kita sudah membuat sebuah view. Untuk menjalankan view tersebut, kita tinggal meng-execute-nya saja.
42
Gambar 2. WizardP
Gambar 3. Wizard Pembuatan View (Memasukan nama view) Pembuatan View (Memilih tabel dan Field)
43
Untuk membuat view dengan menggunakan query design grid, kita bisa membuat query tanpa harus mengetahui bahasa SQL. Di dalam query design grid, kita dapat
memperlihatkan tabel basis data sumber dari query, dan memilih field-field mana yang hendak dikembalikan oleh proses dengan mengklik dan menyeretnya ke dalam grid. Penggabungan antara dua tabel atau lebih (join) juga bisa dilakukan dengan cara mengklik dan menyeret field-field dalam tabel ke dalam field dalam tabel lainnya. Contoh penggunaan query design grid bisa dilihat pada gambar 4. Setelah selesai memilih-milih tabel dan field-field yang akan digunakan, kita tinggal menyimpan dan memberi nama view ini.
Gambar 4. Query Design Grid Untuk membuat view dengan menggunakan bahasa SQL, terlebih dahulu kita harus memahami tentang sintaks SELECT, WHERE dan operasi-operasi logika yang terdapat pada SQL. Untuk membuat view dengan menggunakan bahasa SQL, kita terlebih dahulu harus masuk ke SQL View dan kemudian membuat query seperti pada gambar 5. Setelah kita membuat query dengan bahasa SQL, kita tinggal menyimpannya sehingga query tersebut dapat dijalankan kembali sewaktu-waktu sesuai dengan kebutuhan.
44
Gambar 5. SQL View
Sintaks SELECT sudah dijelaskan sekilas pada bagian sebelumnya. Select digunakan dengan sintaks:
SELECT nama_field [, nama_field ...] FROM nama_tabel [WHERE nama_field=nilai [ AND/OR nama_field=nilai ... ]] Nama-nama field dapat diganti dengan * apabila yang ditampilkan adalah semua field. WHERE pada SELECT berfungsi untuk memfilter data yang akan ditampilkan sesuai dengan kebutuhan yang ada. WHERE disini bisa lebih dari satu filter, bisa merupakan gabungan dari filter-filter dengan menggunakan beberapa operasi logika sebagai berikut: = / < / > / <= / >= / <> Operator logika ini berfungsi untuk membandingkan nilai sebuah field dengan nilai tertentu. Contoh: Untuk melihat data siswa dengan nama Albert yang sudah ada di tabel siswa, digunakan sintaks sebagai berikut: SELECT * FROM SISWA WHERE nama=Albert
45
Untuk melihat data siswa yang tinggi badannya lebih dari 170 yang ada di tabel Tinggi_Siswa, digunakan sintaks sebagai berikut: SELECT * FROM Tinggi_Siswa WHERE tingg > 170 -
BETWEEN Operator logika ini berfungsi untuk membandingkan nilai sebuah field yang berada diantara nilai tertentu. Contoh: Untuk melihat data siswa yang tinggi badannya antara 170 dan 180 yang ada di tabel Tinggi_Siswa, digunakan sintaks sebagai berikut: SELECT * FROM Tinggi_Siswa WHERE tingg between 170 and 180
IN Operator logika ini berfungsi untuk mendapatkan data yang nilainya sesuai dengan salah satu nilai yang diberikan. Contoh: Untuk melihat data siswa yang alamatnya di Jakarta, Serpong atau Tangerang, digunakan sintaks sebagai berikut: SELECT * FROM Siswa WHERE alamat in (Jakarta, Serpong, Tangerang)
LIKE Operator logika ini berfungsi untuk mendapatkan data yang nilainya seperti nilai yang diberikan atau mengandung nilai yang diberikan. Contoh: Untuk melihat data siswa yang mengandung kata Putra, digunakan sintaks sebagai berikut: SELECT * FROM Siswa WHERE nama like %Putra%
AND dan OR
Operator logika ini berfungsi apabila ada dua filter atau lebih yang akan digunakan untuk memfilter data yang akan ditampilkan. Operator AND akan memunculkan data yang untuk kedua filter tersebut bernilai Benar, sedangkan operator OR akan memunculkan data apabila kedua filter bernilai Benar atau salah satunya Benar. Contoh: Untuk melihat data siswa yang mengandung kata Putra dan tinggal di Jakarta, digunakan sintaks sebagai berikut: SELECT * FROM Siswa WHERE nama like %Putra% AND alamat=Jakarta
Untuk melihat data siswa yang mengandung kata Putra atau tinggal di Jakarta, digunakan sintaks sebagai berikut: SELECT * FROM Siswa WHERE nama like %Putra% OR alamat=Jakarta
View seringkali digunakan untuk mengambil data lebih dari 1 tabel. Untuk menggabungkan beberapa tabel digunakanlah sintaks JOIN. Join terdapat beberapa jenis yang dapat digunakan sesuai dengan keperluannya, jenis-jenis Join tersebut adalah: -
INNER JOIN Inner Join adalah penggabungan dua atau lebih tabel yang hanya akan menampilkan item data yang terdapat pada semua tabel tersebut. Sintaks untuk melakukan INNER JOIN adalah sebagai berikut: SELECT nama_tabel_1.nama_field [,nama_tabel_2.nama_field, ...] FROM nama_tabel_1 INNER JOIN nama_tabel_2 ON nama_tabel_1.nama_field = nama_tabel_2.nama_field [WHERE nama_tabel_1.nama_field=nilai [ AND/OR nama_tabel_2.nama_field=nilai ... ]] Nama field disebelah sintaks ON adalah nama field yang menggabungkan kedua tabel tersebut, nama-nama field tersebut bisa berbeda dikedua tabel tersebut. Contoh: Data pada tabel Siswa dan tabel Jadwal seperti pada tabel 1 dan tabel 2. Untuk mengambil data semua siswa yang mempunyai jadwal, dibuatlah query sebagai berikut: SELECT siswa.id_siswa, siswa.nama, jadwal.hari, jadwal.jam, jadwal.ruang, jadwal.topik FROM siswa INNER JOIN jadwal ON siswa.id_siswa = jadwal.id_siswa
Hasil yang ditampilkan adalah siswa yang ada di tabel Siswa dan di tabel Jadwal, sedangkan untuk siswa yang hanya ada di salah satu tabel (misalnya S000000004 yang hanya ada di tabel Siswa dan S000000003 yang hanya ada pada tabel Jadwal) tidak ditampilkan, seperti pada tabel 3.
Tabel 1. Tabel Siswa
Tabel 2. Tabel Jadwal
Tabel 3. Hasil Query Inner Join
LEFT JOIN Left Join adalah penggabungan dua atau lebih tabel yang akan menampilkan semua item data yang terdapat pada tabel sebelah kiri (yang disebut terlebih dahulu) walaupun item data tersebut tidak ada di tabel sebelah kanan (yang disebut selanjutnya). Bila item data tersebut tidak ada di sebelah kanan, maka akan diisi dengan NULL. Sintaks untuk melakukan LEFT JOIN adalah sebagai berikut: SELECT nama_tabel_1.nama_field [,nama_tabel_2.nama_field, ...] FROM nama_tabel_1 LEFT JOIN nama_tabel_2 ON nama_tabel_1.nama_field = nama_tabel_2.nama_field [WHERE nama_tabel_1.nama_field=nilai [ AND/OR nama_tabel_2.nama_field=nilai ... ]] Contoh: Data pada tabel Siswa dan tabel Jadwal seperti pada tabel 1 dan tabel 2. Untuk mengambil data semua siswa baik yang mempunyai jadwal maupun tidak, dibuatlah query sebagai berikut:
SELECT siswa.id_siswa, siswa.nama, jadwal.hari, jadwal.jam, jadwal.ruang, jadwal.topik FROM siswa LEFT JOIN jadwal ON siswa.id_siswa = jadwal.id_siswa Hasil yang ditampilkan adalah semua siswa yang ada di tabel Siswa baik yang ada di tabel Jadwal maupun tidak, sedangkan untuk siswa yang ada pada tabel Jadwal saja, tidak ditampilkan. Hasil dari query ini ditampilkan pada tabel 4. Tabel 4. Hasil Query Left Join
RIGHT JOIN Right Join adalah penggabungan dua atau lebih tabel yang akan menampilkan semua item data yang terdapat pada tabel sebelah kanan (yang disebut belakangan) walaupun item data tersebut tidak ada di tabel sebelah kiri (yang disebut pertama). Bila item data tersebut tidak ada di sebelah kiri, maka akan diisi dengan NULL. Right Join merupakan kebalikan dari Left Join. Sintaks untuk melakukan RIGHT JOIN adalah sebagai berikut: SELECT nama_tabel_1.nama_field [,nama_tabel_2.nama_field, ...] FROM nama_tabel_1 RIGHT JOIN nama_tabel_2 ON nama_tabel_1.nama_field = nama_tabel_2.nama_field [WHERE nama_tabel_1.nama_field=nilai [ AND/OR nama_tabel_2.nama_field=nilai ... ]] Contoh: Untuk mengambil data semua jadwal baik yang sudah ada siswanya maupun belum, dibuatlah query sebagai berikut: SELECT siswa.id_siswa, siswa.nama, jadwal.hari, jadwal.jam, jadwal.ruang, jadwal.topik FROM siswa RIGHT JOIN jadwal ON siswa.id_siswa = jadwal.id_siswa Hasil yang ditampilkan adalah semua siswa yang ada di tabel Jadwal baik yang ada di tabel Siswa maupun tidak, sedangkan untuk siswa yang ada pada tabel Siswa saja, tidak ditampilkan. Hasil dari query ini ditampilkan pada tabel 5. Tabel 5. Hasil Query Right Join
49
2.5
Form Data pada tabel-tabel di basis data, dapat ditampilkan ke dalam form-form. Data
tersebut ditampilkan ke dalam form agar data ditampilkan dalam format yang lebih mudah dilihat dan dimengerti serta dapat digunakan oleh orang-orang yang tidak mengerti akan basis data. Sebuah tabel bisa ditampilkan pada lebih dari satu form dan sebuah form bisa mengambil dan menyimpan data di lebih dari satu tabel. Untuk menampilkan data lebih dari satu tabel, sebaiknya dibuat view terlebih dahulu untuk memudahkan pembuatan form. Form bisa dibuat dengan menggunakan wizard. Membuat form dengan menggunakan wizard cukup mudah, hanya tinggal mengikuti instruksi yang ada. Pertamatama buka wizard untuk membuat form pada object Form, kemudian pilih Create Form by Using Wizard, yang akan menampilkan layar seperti pada gambar 6. Pilih tabel atau view dan field yang akan digunakan. Urutan field-field yang akan ditampilkan di form disesuaikan dengan urutan pemilihan field-field tersebut pada urutan selected field. Setelah memilih tabel/view dan field, tekan Next > yang akan menampilkan gambar 7. Pada gambar 7, pilih layout data yang akan ditampilkan di form. Bisa berbentuk kolom-kolom, tabular, data sheet ataupun pivot. Pada contoh ini, layout dipilih Columnar. Setelah memilih layout, tekan Next > dan akan ditampilkan pemilihan style background seperti pada gambar 8. Pilih style dan background yang diinginkan kemudian tekan Next > dan akan menampilkan gambar 9 untuk memasukan nama form. Masukan nama form dan kemudian tekan Finish. Dengan mengikuti langkah-langkah tersebut terbuatlan sebuah form yang apabila dijalankan akan menampilkan data siswa seperti pada gambar 10. Pada saat form dijalankan, apabila dilakukan perubahan pada salah satu text maka akan langsung tersimpan ke tabel yang bersesuaian.
50
Gambar 6. Wizard untuk Membuat Form Memilih Tabel dan Fields
Gambar 7. Wizard untuk Membuat Form Memilih Layout
51
Gambar 8. Wizard untuk Membuat Form Memilih Style
Gambar 9. Wizard untuk Membuat Form Memasukan Nama Form
52
Gambar 10. Form hasil dari Wizard
Setelah form tersebut terbuat, apabila ingin mengubahnya, bisa dilakukan dengan membuka form pada Design View, seperti pada gambar 11, yang akan membuka design form seperti pada gambar 12.
Gambar 11. Membuka Form dengan Design View
53
Gambar 12. Edit Form dengan Menggunakan Design View
Posisi masing-masing label dan text dapat diubah sesuai dengan keinginan. Property masing-masing list dan text pun dapat diubah sesuai dengan keinginan, tinggal klik kanan pada list atau text yang ingin diubah, kemudian tekan Property seperti pada gambar 13. setelah memilih property, maka akan ditampilkan layar Property seperti pada gambar 14 yang bisa diubah-ubah. Setelah selesai mengubah-ngubah property, tutup form tersebut dan tekan save untuk menyimpan form. Apabila ingin menambahkan field yang akan ditampilkan di form, bisa dimasukan dari list field-field yang tersedia.
54
Gambar 13. Ubah Property Label dan Text
55
Gambar 14. Layar Property
56
2.6
Report Selain dengan menggunakan form, data dapat ditampilkan dalam bentuk report.
Tetapi data yang ditampilkan dalam bentuk report tidak bisa diubah, hanya bisa ditampilkan dan dicetak. Report ini berguna untuk menampilkan data dengan keperluan pelaporan dan pencetakan. Data yang ditampilkan bisa berupa data asli ataupun informasi hasil manipulasi data. Sebuah tabel bisa ditampilkan pada lebih dari satu report dan sebuah report bisa mengambil data di lebih dari satu tabel. Untuk menampilkan data lebih dari satu tabel, sebaiknya dibuat view terlebih dahulu untuk memudahkan pembuatan report. Report bisa dibuat dengan menggunakan wizard. Membuat report dengan menggunakan wizard cukup mudah, hanya tinggal mengikuti instruksi yang ada. Pertamatama buka wizard untuk membuat report pada object Reports, kemudian pilih Create Report by Using Wizard, yang akan menampilkan layar seperti pada gambar 15. Pilih tabel atau view dan field yang akan digunakan. Setelah memilih tabel/view dan field, tekan Next > yang akan menampilkan gambar 16. Pada gambar 16, pilih pengelompokan data akan dilakukan berdasarkan apa. Bila data tersebut tidak ingin dikelompokan, bagian ini bisa dilewatkan dan langsung melanjutkan ke bagian selanjutnya. Setelah memilih layout, tekan Next > dan akan ditampilkan pemilihan urutan data yang akan ditampilkan seperti pada gambar 17. Pilih field yang akan diurutkan dan aturan pengurutannya apakah akan ascending atau descending. Bila data tidak ingin diurutkan, bagian ini bisa dilewatkan. Setelah selesai, tekan Next > dan akan menampilkan gambar 18 untuk memilih format tampilan report dan format kertas. Dalam contoh ini dipilih format laporan Tabular sehingga data akan ditampilkan dalam bentuk kolom-kolom. Setelah itu, tekan tombol Next > untuk memilih style tampilan yang akan digunakan seperti pada gambar 19, kemudian tekan tombol Next >. Kemudian masukan judul report seperti pada gambar 20 dan tekan Finish. Setelah mengikuti langkah-langkah ini, maka akan dibuatlah sebuah report seperti pada gambar 21.
57
Gambar 15. Layar Report Wizard - Memilih Tabel
Gambar 16. Layar Report Wizard - Memilih Group
58
Gambar 17. Layar Report Wizard - Memilih Sort
Gambar 18. Layar Report Wizard - Memilih Tampilan Report
59
Gambar 19. Layar Report Wizard - Memilih Style
Gambar 20. Layar Report Wizard - Memasukan Judul Report
60
Gambar 21. Layar Report Wizard - Memilih Tabel
Setelah report tersebut terbuat, apabila ingin mengubahnya, bisa dilakukan dengan membuka report pada Design View, seperti pada gambar 22, yang akan membuka design report seperti pada gambar 23.
61
Gambar 22. Layar untuk Memilih Design View Report
Gambar 23. Layar Design View Report
Judul report dapat diubah sesuai dengan keinginan dan field-field yang dimasukan ke report pun bisa diubah-ubah, hanya cukup menghapus dan memasukan field-field yang ingin ditampilkan.
62
2.7
Modul Masih berkaitan dengan form, beberapa fungsi-fungsi umum yang biasa digunakan
oleh beberapa form disimpan ke dalam modul. Tujuan dari modul ini agar fungsi-fungsi yang sering digunakan di form-form tidak perlu ditulis ulang berkali-kali. Hanya cukup ditulis satu kali di dalam modul. Contoh fungsi-fungsi umum yang biasa digunakan adalah fungsi untuk menghitung penjumlahan 2 bilang, fungsi untuk mengkonversi format tanggal dan waktu serta masih banyak lagi yang lainnya. Cara untuk membuat modul adalah dengan memilih objects Modules dan memilih New seperti pada gambar 24, maka akan dimunculkan layar seperti pada gambar 25.
Gambar 24. Cara Membuat Modul
63
Gambar 25. Layar Modul
Di bawah Option Compare Database itulah kita bisa memasukan fungsi-fungsi yang akan kita gunakan. Sintaks fungsi tersebut adalah sebagai berikut: [ACCESS IDENTIFIER] JENIS FUNGSI nama_fungsi ([nama_paramater as tipe paramter [, ...]]) [as tipe parameter] Instruksi 1 Instruksi 2 Instruksi 3 ... END JENIS FUNGSI Keterangan sintaks: ACCESS IDENTIFIER ACCESS IDENTIFIER bisa berisi Public atau Private. Sintaks Public digunakan agar fungsi ini bisa digunakan oleh form-form yang lain. Sedangkan sintaks Private digunakan agar fungsi ini hanya bisa digunakan oleh fungsi-fungsi yang ada di modul. Apabila ACCESS IDENTIFIER tidak dicantumkan maka secara default fungsi tersebut akan dibuat Public. JENIS FUNGSI JENIS FUNGSI bisa berupa Function atau Sub. Function digunakan apabila Sintaks Function digunakan agar fungsi yang dibuat bisa mengembalikan nilai, sedangkan sintaks Sub digunakan apabila fungsi yang dibuat tidak mengembalikan nilai.
64
Contohnya kita akan memasukan fungsi menghitung 2 bilangan, kita tinggal menambahkan fungsi ini didalam modul tersebut: Public Function HitungBilangan(Bilangan1 As Double, Bilangan2 As Double) HitungBilangan = Bilangan1 + Bilangan2 End Function Fungsi ini dibuat public agar bisa digunakan di form-form di luar modul tersebut dan jenisnya dipilih Function karena fungsi ini mengembalikan nilai berupa penambahan dua bilangan yang dimasukan. Setelah menambahkan fungsi-fungsi dalam modul, tekan Save untuk menyimpan modul dan masukan nama modul tersebut. Setelah modul tersebut selesai dibuat, untuk menggunakannya tinggal menambahkan event pada object di form (object bisa beruba text atau label atau yang lainnya). Caranya sama seperti mengubah propery text, tinggal klik kanan pada list atau text yang ingin diubah, kemudian tekan Build Event seperti pada gambar 13. Contohnya, buatlah sebuah form baru dengan 3 buah text didalamnya. Text pertama berjudul Bilangan Pertama dengan nama textbox text 2, text kedua berjudul Bilangan Kedua dengan nama textbox text 4 dan text ketiga berjudul Jumlah dengan nama textbox text6. Klik kanan pada textbox4 dan pilih Build Event untuk membuat event di textbox text6. Pilih Builder untuk membuat event seperti pada gambar 26, dalam contoh ini dipilih Code Builder. Kemudian masukan sintaks dibawah ini untuk memanggil fungsi yang sudah disimpan di modul. Setelah dimasukan sintaks ini, tekan Save. Private Sub Text4_AfterUpdate() Text6 = HitungBilangan(Text2, Tex4) End Sub
Gambar 26. Contoh Form Menggunakan Modul
65
Gambar 27. Memilih Builder untuk Event Setelah itu, kita coba jalankan form tersebut, apabila text Bilangan kedua berubah, maka secara otomatis akan dimunculkan penjumlahan kedua bilangan tersebut. Untuk menggunakan fungsi dari modul ini di report, kita akan membuat contoh fungsi CariHari seperti dibawah ini: Public Function CariHari(Tanggal As Date) As String If Weekday(Tanggal) = 1 Then CariHari = "Minggu" Elseif Weekday(Tanggal) = 2 Then CariHari = "Senin" Elseif Weekday(Tanggal) = 3 Then CariHari = "Selasa" Elseif Weekday(Tanggal) = 4 Then CariHari = "Rabu" Elseif Weekday(Tanggal) = 5 Then CariHari = "Kamis" Elseif Weekday(Tanggal) = 6 Then CariHari = "Jumat" Elseif Weekday(Tanggal) = 7 Then CariHari = "Sabtu" End If End Function Kita akan menggunakan fungsi ini di report untuk menampilkan nama hari dari tanggal absensi seperti pada report di gambar 21. Cara untuk memasukan fungsi tersebut ke dalam report adalah sebagai berikut: 1. Klik kanan pada text hari di report, kemudian pilih Property seperti pada gambar 28. Property text akan ditampilkan seperti pada gambar 29.
66
Gambar 28. Property pada text di Report
67
Gambar 29. Property Text pada Report
2. Ganti Control Source pada text tersebut dengan cara menekan tombol ... pada sebelah kanan Control Source sehingga akan ditampilkan gambar 30. Di bagian bawah, bagian sebelah kiri adalah kelompok object yang terdapat dalam basis data kita, mulai dari tabel, view, form, report dan fungsi-fungsi dalam modul. Di bagian tengah berisi object-object sesuai dengan kelompok object yang dipilih pada bagian kiri. Dan bagian kanan berisi property-property atau fungsi-fungsi yang ada pada object yang dipilih di bagian tengah.
68
Gambar 30. Expression Builder untuk Control Source Text 3. Dibagian kiri, pilih Functions nama database (dalam contoh ini db1). Di text tengah akan dimunculkan nama-nama modul yang ada di database dan di sebelah kiri akan dimunculkan fungsi-fungsi yang ada pada modul tersebut. Pilih fungsi CariHari. Fungsi CariHari ini membutuhkan parameter <<tanggal>>. Kita akan isi tanggal tersebut dengan text Tanggal, caranya dengan dibagian kiri, pilih Report, Loaded Report, nama Report yang kita gunakan (dalam contoh ini Absensi). Kemudian dibagian tengah akan muncul semua object yang digunakan, pilih Tanggal dan di bagian kanan pilih <<Value>> sehingga ditampilkan expression sebagai berikut: CariHari ( [Tanggal] ) Kemudian tekan OK
Gambar 31. Expression Builder menggunakan fungsi pada Modul

4. Setelah itu, apabila kita menjalankan report kita, kolom Hari akan diisi sesuai dengan hasil dari fungsi CariHari tersebut.
70
Bab
3
DASAR-DASAR BASIS DATA
3.1 Tujuan Instruksional Umum o Siswa mampu menceritakan dan menjelaskan bagaimana merancang dan menggunakan basis data. o Siswa dapat menerapkan teknik pemodelan. o Siswa dapat mengintegrasikan konsep pemodelan data dengan tools. 3.2 Tujuan Instruksional Khusus o Siswa dapat mengetahui apa sebenarnya yang dimaksud dengan DBMS (Database Management System). o Siswa mampu melakukan perancangan basis data. o Siswa mampu mengidentifikasi kebutuhan yang akan digunakan untuk pemodelan data. o Siswa mampu membuat diagram dan kamus data. o Siswa mengetahui dan mampu mengidentifikasi tools yang sesuai untuk mengimplementasikan pemodelan. o Siswa mampu mengimplementasikan pemodelan data dengan tools yang digunakan. o Siswa dapat mengidentifikasi kebutuhan komputer yang sesuai dengan platform basis data. o Siswa mampu melakukan backup dan restore pada aplikasi basis data.
71
3.3
Sekilas Tentang File-based system. File-based system adalah kumpulan program-program aplikasi yang
menyediakan layanan untuk end Users. Setiap program mendefinisikan dan mengatur datanya masing-masing. Adapun keterbatasan dari File-based system adalah : 1. Data terpisah-pisah dan terisolasi Setiap program mengatur datanya masing-masing User dari program yang satu tidak dapat menggunakan data/program yang lain
2. Duplikasi data Data yang sama terdapat pada program yang berbeda Pemborosan ruang penyimpanan dan kemungkinan terjadi format yang berbeda untuk data yang sama 3. Ketergantungan data 4. Ketidaksesuaian format file Program ditulis dalam bahasa yang berbeda sehingga tidak mudah untuk mengakses data yang satu dengan yang lainnya 5. Program aplikasi dengan query/pengembangan terbatas - Program dibuat untuk mendukung fungsi-fungsi tertentu - Kebutuhan baru yang muncul, memerlukan program baru pula
3.4
DBMS (Database Management System) Setelah sebelumnya kita mengetahui tentang File-based system, selanjutnya kita
akan membahas mengenai Database Management System (DBMS). Sebelumnya akan diberikan sedikit penjelasan tentang Database (basis data). Database adalah kumpulan rlasi Logical dari data yang dapat digunakan bersama dan dibuat untuk memperoleh informasi yang dibutuhkan oleh perusahaan. Sedangkan DBMS adalah sistem software yang memungkinkan User untuk mendefinisikan, membuat, dan memelihara Database serta menyediakan kontrol akses untuk Database ini. Adapun komponen-komponen DBMS adalah 1. Data Data pada sebuah sistem Database baik itu single-User system maupun multi-User system harus terintegrasi dan dapat digunakan bersama. 2. Hardware
72
Penyimpanan secondary (magnetic disk, CD), device controller, I/O Channels, dan lainnya.
Hardware processor dan main memory, digunakan untuk mendukung saat ekseskusi system software Database.
3. -
Software DBMS, sistem operasi, network software (jika diperlukan) dan program aplikasi pendukung lainnya.
4. -
Users Application Programmers, bertanggung jawab membuat aplikasi Database dengan menggunakan bahasa pemrograman yang ada. End Users, siapapun yang berinteraksi dengan sistem secara online. Data Administrator, bertanggung jawab membuat keputusan strategis dan kebijakan mengenai data yang ada. Database Administrator, bertanggung jawab atas keseluruhan kontrol sistem pada level teknis.
Keuntungan DBMS. 1. Penggunaaan data bersama 2. Mengurangi kerangkapan data 3. Menghindari ketidakkonsistenan data 4. Integritas data terpelihara 5. Keamanan terjamin 6. Kebutuhan User yang kompleks dapat teratasi 7. Pelaksanaan standarisasi 8. Meningkatkan produktivitas 9. Layanan backup semakin baik
Kerugian DBMS. 1. Rumit 2. Memerlukan tempat penyimpanan dan memory yang besar 3. Biaya mahal
Pemilihan DBMS Pemilihan DBMS yang sesuai akan mendukung Database application.
Perancangan Logical Database design yang dilakukan sebelumnya menyediakan informasi yang cukup berharga dalam menentukan system requirements.
Langkah utama dalam pemilihan DBMS: 1. Definisikan waktu untuk melakukan studi referensi 2. Catat dua atau tiga produk yang akan dievalusi untuk digunakan 3. Evaluasi produk tersebut 4. Rekomendasikan produk yang dipilih dan buat report yang mendukungnya.
Fitur-Fitur Evaluasi DBMS
74
3.5
Sekilas Tentang Pemodelan Data
Data model adalah kumpulan konsep-konsep yang terintegrasi untuk menggambarkan data, hubungan antar data, dan batasan-batasan data pada suatu organisasi. Data model digunakan untuk merepresentasikan data ke dalam bentuk yang lebih mudah untuk dipahami serta menetapkan konsistensi dalam memandang, mengorganisir,
menginterpretasikan dan memperlakukan basis data. Tujuan utama data modelling : Memahami maksud dari data; Memudahkan komunikasi untuk memahami kebutuhan informasi.
Membuat data model membutuhkan jawaban dan pertanyaan tentang entities, Relationships, dan Attributes.
3.6
Database Application Lifecycle. Database application lifecycle merupakan komponen mendasar suatu sistem
informasi, dimana pengembangan/pemakaiannya harus dilihat dari perspektif yang lebih luas berdasarkan kebutuhan organisasi.
Database application lifecycle terdiri dari Perencanaan Database. 1. 2. 3. 4. 5. 6. 7. 8. 9. Definisi Sistem. Analisa dan Pengumpulan Kebutuhan. Perancangan Database. Perancangan Aplikasi. Prototyping (optional). Implementasi. Data Conversion and Loading. Testing. Operational Maintenance.
3.6.1 Perencanaan Database Merupakan aktivitas manajemen yang memungkinkan tahapan dari Database application lifecycle direalisasikan se-efektif dan se-efisien mungkin. Perencanaan Database harus trerintegrasi dengan keseluruhan strategi sistem informasi dari organisasi. Terdapat 3 hal pokok yang berkaitan dengan strategi sistem informasi yaitu : Identifikasi rencana dan sasaran dari enterprise termasuk mengenai sistem informasi yang dibutuhkan Evaluasi sistem informasi yang ada untuk menetapkan kelebihan dan kekurangan yang dimiliki Penaksiran kesempatan IT yang mungkin memberikan keuntungan kompetitif
Metodologi dalam perencanaan Database : Mendefinisikan tujuan utama dari aplikasi Database Mengidentifikasi tugas khusus yang harus didukung oleh Database Bagaimana data akan dikumpulkan Bagaiamana menspesifikasikan format/bentuk data Dokumentasi penting apa yang diperlukan Bagaimana desain dan implementasi harus dilakukan
76
3.6.2
Definisi Sistem Yaitu menjelaskan batasan-batasan dan cakupan dari aplikasi Database dan sudut
pandang (User view) yang utama. 3.6.3 Analisa dan Pengumpulan Kebutuhan Database Suatu proses pengumpulan dan analisa informasi mengenai bagian organisasi yang didukung oleh aplikasi Database, dan menggunakan informasi tersebut untuk identifikasi kebutuhan User akan sistem yang baru. Informasi dikumpulkan untuk setiap User view utama meliputi : 1. 2. 3. Deskripsi data yang digunakan / dihasilkan Detail mengenai bagaiamana data digunakan/dihasilkan Beberapa kebutuhan tambahan untuk aplikasi Database yang baru
Informasi dianalisa untuk identifikasi kebutuhan agar disertakan dalam aplikasi Database yang baru. Aktifitas penting lainnya adalah menentukan bagaimana mengatur aplikasi Database dengan multiple uer view (Manajer, Supervisor, dll), yaitu : Pendekatan Terpusat Kebutuhan untuk setiap User view digabungkan menjadi sekumpulan kebutuhan. Sebuah global data model dibuat berdasarkan penggabungan kebutuhan (dimana merepresentasikan seluruh User view) Pendekatan Integrasi View Kebutuhan untuk setiap User view digunakan untuk membangun model data terpisah untuk merepresentasikan User view tersebut. Hasil dari model data tersebut nantinya digabungkan dalam tahapan desain Database. Kombinasi Keduanya Multiple User View
77
Gambar Multiple User View
Fact Finding Techniques. Penting untuk mendapatkan fakta (fact) yang diperlukan untuk membuat/membangun Database application yang diperlukan. Fakta (fact) didapatkan menggunakan fact-finding techniques. Proses formal yang digunakan pada teknik tersebut meliputi interview dan questionnaire untuk mengumpulkan fakta (fact) mengenai sistem, requirements, dan preferences. Fact-finding digunakan pada seluruh Database application lifecycle. Terutama pada tahap awal Database planning, system definition, dan requirements collection serta tahap analysis. Memungkinkan developer belajar mengenai terminology, masalah (problem), (kesempatan) opportunities, Constraints, requirements, dan prioritas organization dan Users sistem. Database developer menggunakan beberapa teknik fact-finding dalam mengerjakan suatu proyek Database, yang terdiri dari : Examining documentation Digunakan untuk : Memperoleh beberapa pengertian akan kebutuhan Database yang dibuat; Mengidentifikasi bagian dari organisasi yang terkait dengan suatu masalah; Memahami sistem yang ada saat ini.
78
Interviewing Umumnya digunakan dan berguna pada fact-finding technique. Memungkinkan mengumpulkan informasi dari tiap individu secara langsung. Memperoleh, memeriksa, menjelaskan fakta, menimbulkan semangat
keterlibatan end-User, identifikasi kebutuhan, mengumpulkan ide dan opini end-User.
Dua tipe interview : Tidak terstruktur dan terstruktur.

Open-ended questions memungkinkan pihak yang diinterview memberikan tanggapan yang sesuai dari pertanyaan yang diajukan. Closed-ended questions membatasi jawaban dengan pilihan tertentu atau berupa jawaban singkat dengan tanggapan langsung. Observing Organization in Operation Teknik yang efektif untuk memahami sistem. Mungkin untuk dilakukan oleh orang yang terlibat langsung atau mengamati untuk mempelajari suatu sistem. Berguna saat data yang valid dikumpulkan melalui pertanyaan atau saat aspek yang rumit dari suatu sistem dicegah User untuk diterangkan dengan jelas.
Research Berguna untuk menyelidiki aplikasi dan masalahnya. Menggunakan computer trade journals, buku referensi dan internet (termasuk User groups dan bulletin boards).Menyediakan informasi bagaimana orang/pihak lain mengatasi
masalah yang samadan apakah ada paket software yang tersedia untuk mengatasi keseluruhan atau sebagian masalah tersebut.
80
Questionnaires Melakukan survei dengan menggunakan questionnaires dokumen khusus untuk megumpulkan fakta dari sejumlah orang dengan menetapkan pengendalian atas jawaban mereka. Dua tipe pertanyaan, free-format dan fixed-format.
Contoh Kasus : The Dream House Case Study Overview Dreamhouse adalah perusahaan property management, sebagai perantara antara owner dan client Tiap branch memiliki staff, termasuk Manager dan Assistant
81
Tiap branch menawarkan property untuk disewa Property yang mau disewakan diregister dahulu Client yang akan menyewa property diregister dahulu Client yang sudah diregister akan mendapatkan report mingguan berupa daftar property yang dapat disewa
Client boleh meminta untuk melihat property yang akan disewa Client memutuskan menyewa property yang diinginkan dan staff memproses transaksinya
Database Planning - Memelihara data yang digunakan dan digunakan untuk menunjang bisnis penyewaan property bagi client dan owner dan memudahkan koordinasi dan berbagi informasi antar cabang. - Memelihara data Branch, Staff, Property fo rent,Property owner, Client, Property viewing, Lease dan Newspaper advert - Melakukan pencarian data Branch, Staff, Property fo rent, Property owner, Client, Property viewing, Lease dan Newspaper advert - Menelusuri data Property for rent, Client yang akan menyewa dan Lease - Membuat laporan dari data Branch, Staff, Property fo rent, Property owner,Client, Property viewing, Lease dan Newspaper advert System Definition
Marketing Payroll
Property Sales
Property Rentals
Staff
HRM
Property Advertising
Customer Service
Mengidentifikasi Multiple User View Manager, Supervisor, Assistant Requirement Collection and Analysis Mengumpulkan informasi User view
- Tipe data apa yang diperlukan - Apa yang akan dilakukan terhadap data tersebut Mengumpulkan informasi system requirement - Transaksi apa yang rutin dilakukan - Transaksi apa yang penting dalam bisnis tersebut - Kapan terjadinya transaksi dengan frekwensi rendah, sedang dan tinggi - Tipe sekuriti apa yang digunakan untuk mengamankan aplikasi System Specification Feature apa saja yang diperlukan dalam aplikasi System Requirements - Database size - Database rate of growth - Tipe dan jumlah record - Networking and shared access search - Performance, Security, Back up & Recovery, Legal issue Database Design Conceptual Design Entity, Relationship, Attribute, Domain, Primary Key, Foreign Key Logical Design Validasi Relationship menggunakan normalisasi, Integrity constraint Physical Design Analisa transaksi, file organization, indexes, disk space requirement, security
3.6.4
Perancangan Database Merupakan suatu proses pembuatan sebuah desain Database yang akan
mendukung tujuan dan operasi suatu enterprise. Tujuan utamanya adalah : 1. Merepresentasikan data dan Relationship antar data yang dibutuhkan oleh seluruh area aplikasi utama dan User group 2. Menyediakan model data yang mendukung segala transaksi yang diperlukan pada data 3. Menspesifikasikan desain minimal yang secara tepat disusun untuk memenuhi kebutuhan performa yang ditetapkan pada sistem.
83
Pendekatan dalam perancangan Database : Top-Down Dimulai dengan membuat data model. Pendekatan Top-down dapat diilustrasikan menggunakan Entity-Relationship (ER) model, dimulai dengan
mengidentifikasikan entity dan Relationship antar entity organisasi. Pendekatan ini sesuai bagi Database yang kompleks. Bottom-Up Dimulai dari level dasar Attribute (properti entity dan Relationship), menganalisa hubungan antar Attribute, mengelompokannya dalam suatu relasi yang
menggambarkan tipe entity dan relasi antara entity. Pendekatan ini sesuai bagi Database dengan jumlah Attribute yang sedikit. Inside Out Berhubungan dengan pendekatan bottom-up tetapi sedikit berbeda dengan identifikasi awal entitas utama dan kemudian menyebar ke entitas, Relationship dan atribut terkait lainnya yang lebih dulu diidentifikasi. Mixed Menggunakan pendekatan top-down dan bottom-up.
Tiga tipe Database desain : Conseptual Database design mendeskripsikan data apa yang disimpan dalam Database dan relasi antar data Logical Database design bagaimana data disimpan dalam Database (struktur data, organisasi file) Physical Database design Proses menghasilkan deskripsi untuk disimpan dalam secondary storage.
3.6.5
Merancang Aplikasi Desain interface User dan program aplikasi yang menggunakan dan memproses
Database. Fungsi dari aplikasi ini adalah untuk memanggil data untuk ditampilkan di layar, menghasilkan suatu laporan, menambah, menghapus atau memodifikasi data yang sudah ada di dalam basis data.
84
3.6.6
Prototyping Membuat model kerja suatu aplikasi Database. Tujuan utama dari pembuatan
prototyping adalah : a. Mengidentifikasi feature dari sistem yang berjalan dengan baik atau tidak b. Memberikan perbaikan atau penambahan feature baru c. Klarifikasi kebutuhan User d. Evaluasi feasibilitas (kemungkinan yang akan terjadi) dari desain sistem khusus
Terdapat 2 strategi prototyping yang digunakan saat ini yaitu : 1. Requirements prototyping,menggunakan prototype untuk menentukan kebutuhan dari aplikasi Database yang diinginkan dan ketika kebutuhan itu terpenuhi maka protoytype akan dibuang. 2. Evolutionary prototyping, digunakan untuk tujuan yang sama. Perbedaannya prototype tidak dibuang tetapi dengan pengembangan kelanjutan menjadi apliakasi Database yang digunakan.
3.6.7
Implementasi Merupakan realisasi fisik dari Database dan rancangan aplikasi.
3.6.8
Data Conversion and Loading Pemindahan data yang ada ke dalam Database baru dan mengkonversikan aplikasi
yang ada agar dapat digunakan pada Database yang baru. Tahapan itu dibutuhkan ketika sistem Database baru menggantikan sistem yang lama. DBMS biasanya memiliki utilitas yang memanggil ulang file yang sudah ada ke dalam Database baru.
3.6.9
Testing Suatu proses eksekusi program aplikasi dengan tujuan untuk menemukan
kesalahan. Dengan menggunakan strategi tes yang direncanakan dan data yang sesungguhnya. Pengujian hanya akan terlihat jika terjadi kesalahan software. Mendemonstrasikan Database dan program aplikasi terlihat berjalan seperti yang diharapkan.
3.6.10 Operational Maintenance Suatu proses pengawasan dan pemeliharaan sistem setelah instalasi meliputi : Pengawasan performa sistem Pemeliharaan dan pembaruan aplikasi Database (jika dibutuhkan) Penggabungan kebutuhan baru ke dalam aplikasi Database
3.7
Normalisasi Adalah suatu teknik untuk menghasilkan sekumpulan relasi dengan sifat-sifat
(properties) yang diinginkan, memenuhi kebutuhan data pada enterprise. Bentuk normal yang biasa digunakan adalah 1NF (First Normal Form), 2NF (Second Normal Form) dan 3NF (Third Normal Form). Akan tetapi bentuk normal tidak hanya sebatas sampai 3NF saja. Normalisasi digunakan sebagai langkah awal dalam perancangan Database.
3.7.1
UNF Merupakan suatu tabel yang berisikan satu atau lebih groups yang berulang.
Membuat tabel UNF yaitu dengan memindahkan data dari sumber informasi (Form) ke dalam format tabel.
3.7.2
1NF Merupakan sebuah relasi dimana setiap irisan antara baris dan kolom berisikan satu
dan hanya satu nilai. Langkah-langkah UNF ke 1NF : Tunjuk satu atau sekumpulan atribut sebagai kunci (primary Key) untuk tabel UNF Identifikasikan groups yang berulang dalam tabel UNF yang berulang untuk kunci atribut. Hapus group yang berulang dengan cara : 1. Masukkan data yang semestinya ke dalam kolom yang kosong pada baris yang berisikan data yang berulang. 2. Menggantikan data yang ada dengan copy dari kunci atribut yang sesungguhnya ke dalam relasi terpisah
86
3.7.3
2NF Merupakan sebuah relasi dalam 1NF dan setiap atribut non primary Key bersifat
fully functionally dependent pada primary Key. Langkah-langkah 1NF ke 2NF : Identifikasikan primary Key untuk relasi 1NF Identifikasikan functional dependencies salam relasi Jika terdapat partial dependencies terhadap primary Key, maka hapus dengan menempatkannya dalam relasi yang baru bersama dengan salinan determinannya
3.7.4
3NF Sebuah relasi dalam 1Nf dan 2NF dan dimana tidak terdapat atribut non-primary-
Key atribut yang bersifat transitif dependent pada primary Key. Langkah-langkah 2NF ke 3NF : Identifikasikan primary Key pada relasi 2NF Identifikasikan functional dependencies dalam relasi Jika terdapat transitif dependencies terhadap primary Key, hapus dengan menempatkannya dalam relasi yang baru bersama dengan salinan determinannya
Contoh Normalisasi. YEL-YEL Fitness & Caf adalah sebuah fitness center yang cukup ternama di wilayah Jakarta. Fitness center ini memiliki banyak instruktur terlatih dan peralatan fitness yang sangat lengkap. Selain itu, YEL-YEL Fitness & Caf juga menyediakan sebuah Caf yang dapat digunakan sebagai tempat beristirahat maupun tempat bersantai yang menjual berbagai makanan dan minuman. Fungsi bisnis yang terdapat pada YEL-YEL Fitness & Caf mencakup: Transaksi Pendaftaran Member, Transaksi Pembelian Peralatan Fitness, Transaksi Penjualan pada Caf dan Transaksi Pembelian Bahan Baku Caf.
Proses Pendaftaran Member Untuk menikmati fasilitas yang disediakan oleh YEL-YEL Fitness & Caf, hal pertama yang harus dilakukan adalah melakukan registrasi member, dengan mengisi form registrasi member. Pada saat registrasi, calon member dapat memilih jenis member yang diinginkan. Jenis member yang tersedia terdiri dari VIP member dan Reguler member. VIP member memiliki iuran bulanan sebesar Rp. 500.000,- dan diskon sebesar 15%.
87
Sedangkan Reguler member memiliki iuran bulanan sebesar Rp. 300.000,- dan diskon sebesar 10%. Calon member juga dapat memilih instruktur yang mereka inginkan untuk membimbingnya dalam latihan. Biaya pendaftaran sebesar Rp.50.000,-. Pendaftaran dan pembayaran iuran dapat dilakukan pada bagian kasir. Form
Soal. Buatlah 1NF, 2NF dan 3NF!
Jawab : UNF TrPendaftaran = noPendaftaran + tanggal + biaya + namaMember + jenisKelamin + alamat + noTelp + namaJenisMember + iuranPerBulan + namaInstruktur + namaBagian + namaKaryawan 1NF TrPendaftaran = @noPendaftaran + tanggal + kodeMember + namaMember + jenisKelamin + alamat + noTelp +kodeJenisMember + namaJenisMember +
iuranPerBulan + namaInstruktur + kodeBagian + namaBagian + kodeKaryawan + namaKaryawan

2NF TrPendaftaran = @noPendaftaran + tanggal + kodeMember + namaMember + jenisKelamin + alamat + noTelp +kodeJenisMember + namaJenisMember +
iuranPerBulan + namaInstruktur + kodeBagian + namaBagian + kodeKaryawan + namaKaryawan 3NF TrPendaftaran = @noPendaftaran + tanggal + kodeMember + kodeKaryawan MsMember = @kodeMember + namaMember + jenisKelamin + alamat + noTelp + kodeJenisMember + kodeInstruktur MsJenisMember = @kodeJenisMember + namaJenisMember + iuranPerBulan MsInstruktur = @kodeInstruktur + namaInstruktur MsKaryawan = @kodeKaryawan + namaKaryawan + kodeBagian MsBagian = @kodeBagian + namaBagian
3.8
Entity Relationship Diagram (ERD)
Entity Types : Entity type Group objects yang memiliki properti yang sama, mengidentifikasikan enterprises sebagai independent existence. Tiap entity diidentifikasikan dengan nama dan propertinya Entity occurrence Mengidentifikasikan secara unik object dari tipe entity.
Nama entity berupa singular noun, sedangkan nama Relationship berupa verb dan sebaiknya unik.
Relationship Types : Relationship type Kumpulan dari suatu hubungan yang memiliki arti diantara tipe-tipe entity. Relationship occurrence Mengidentifikasikan secara unik suatu hubungan, yang melibatkan tiap tipe entity yang berpartisipasi
Attributes. Adalah property dari entity. Attribute Domain Kumpulan nilai yang diizinkan bagi satu atau beberapa Attribute. Misal : room number (rooms) yang merupakan Attribute entity PropertyForRent dapat diisi dengan nilai integer antara 1 dan 15 Simple Attribute Attribute yang terdiri atas single component dengan independent existence. Misal : Attribute position dan salary pada entity Staff Composite Attribute Attribute yang terdiri atas multiple components, masing-masing dengan independent existence. Misal : Attribute address pada entity Branch
(163 Main St, Glasgow, G11 9QX) (street, city, postcode) Single-valued Attribute Attribute yang menampung single value untuk tiap tipe entity. misal : entity Branch mempunyai single value untuk Attribute branchNo (misal : B003) Multi-valued Attribute Attribute yang menampung multiple values untuk tiap tipe entity. misal : entity Branch mempunyai multiple value untuk Attribute telNo (misal : branchNo B003 memiliki telpNo 0141-339-2578 dan 0141-339-4439) Derived Attribute Attribute yang menggambarkan suatu nilai yang berasal dari nilai Attribute yang terkait, atau kumpulan Attribute (tidak memiliki arti penting dalam satu tipe entity yang sama). misal : Attribute deposit pada entity Lease, nilai Attribute tersebut merupakan perkalian dua dari nilai Attribute rent pada entity PropertyForRent).
Keys Candidate Key Kumpulan Attributes yang secara unik mengidentifikasikan tiap tipe entity. occurrence of an entity type.
Primary Key Candidate Key yang dipilih untuk mengidentifikasi tiap tipe entity secara unik.
Composite Key Candidate Key yang terdiri dari 2 atau lebih Attribute.
91
Structural Constraints. Tipe utama constraint dalam Relationships disebut multiplicity. Multiplicity jumlah (atau range) kejadian yang mungkin dari tipe entity yang terkait dengan satu kejadian dari serangkaian tipe entity pada suatu Relationship tertentu. Menggambarkan kebijaksanaan (business rules) yang dibuat oleh User atau company. Degree Relationship yang umum adalah binary. Binary Relationships secara umum terdiri atas : one-to-one (1:1) one-to-many (1:*) many-to-many (*:*)
92
Multiplicity disusun atas 2 tipe peembatasan Relationships: Cardinality Mendeskripsikan jumlah maksimum dari Relationship yang mungkin bagi entity yang berpatisipasi dalam suatu tipe Relationship. Participation Memastikan apakah semua atau hanya beberapa entity yang berpartisipasi dalam suatu relasi.
93
Rancangan Database Conceptual Proses konstruksi model informasi dengan menggunakan sumber dari perusahaan secara independen.
Gambar Contoh Rancangan Database Conceptual
Rancangan Database Logical. Proses konstruksi model informasi dengan menggunakan spasifik model basis data perusahaan ( relasional), tapi tidak tergantung kebutuhan DBMS dan pertimbangan physical.
94
Gambar Contoh Rancangan Database Logical
95
3.9
Faktor Kesuksesan Rancangan Database. Kemungkinan bekerja secara interactively dengan Users. Kelengkapan mengikuti seluruh proses metodologi pembangunan model data. Kelengkapan penggunaan pendekatan data-driven. Pertimbangan Sturktur perusahaan dan kendala integrity kedalam model data. Pengkombinasian conceptualization, normalization, dan teknik validasi transaksi kedalam metodologi pemodelan data.
3.10
Kamus Data Membangun kamus data : Identifikasi tipe entity Mengidentifikasi tipe entity yang terutama dibutuhkan oleh view. Identifikasi tipe Relationship Mengidentifikasi hubungan penting yang terjadi antara entiti yang telah diidentifikasi. Mengidentifikasi dan menggabungkan Attributes pada tiap entity atau relasi Mengidentifikasi dan menggabungkan Attributes yang dibutuhkan entity atau relasi, dan mendokumenkan setiap Attribute secara details. Menentukan domain Attribute Menentukan domains Attributes dalam model konseptual lokal dan
mendokumentasikan secara detai setiap domain.
Contoh Kamus Data Relationship Yang Mendeskripsikan Relatioship
96
Contoh Kamus Data Entity Yang Mendeskripsikan Entity
Contoh Kamus Data Attribute Yang Mendeskripsikan Attribute
3.11
Implementasi Dengan Tools Berikut ini adalah langkah-langkah mengimplementasikan perancangan data
model ke dalam tools (Microsoft SQL Server 2000): 1. Nyalakan Service Manager pada Microsoft SQL Server 2000.
97
2. Bukalah program Enterprise Manager pada Microsoft SQL Server 2000
3.
Buatlah Database baru dengan cara klik kanan tulisan Database pada Enterprise Manager kemudian pilih New Database.
98
4. Isikan nama Database pada field Name kemudian klik OK
5. Explore Database Anda kemudian klik kanan nama Database yang telah Anda buat sebelumnya. Kemudian pilih New -> Table.
99
6. Isi nama kolom, tipe data, dan panjang karakter yang diijinkan. Kolom diisi berdasarkan dari rancangan Database yang telah Anda buat.
7. Jika telah diisi semua, maka klik tanda silang di pojok kanan atas (kedua dari atas), maka akan muncul warning, klik Yes.
8. Beri nama tabel kemudian klik OK.
9. Ulangi langkah 5 sampai 8 sampai Anda memasukkan semua tabel dalam Database rancangan Anda (yang terdapat pada ERD Anda).
101
10. Setelah selesai semua, klik kanan nama Database Anda dan pilih New -> Database Diagram
11. Klik Next.
12. Pilih tabel-tabel yang akan Anda bikin relasi. Klik Add. Jika sudah, klik Next kemudian Finish maka layar akan tampil seperti berikut.
102
13. Jika sudah terhubung, klik tanda silang di sebelah kanan atas (kedua dari atas). Kemudian akan muncul warning Do You Want To Save changes to diagram Diagram 1?. Klik Yes dan berikan nama Database Diagram kemudian klik OK.
14. Jika Anda ingin mengisi tabel-tabel, explore Database Anda, klik tables kemudian kilk kanan nama tabel yang akan Anda isi, pilih Open Table dan Return all rows.
103
15. Isikan data-data pada kolom yang tersedia.
3.12
Mekanisme Backup dan Restore Database.
3.12.1 Backup Database Berikut ini adalah langkah-langkah yang dilakukan pada backup Database :
1.
Buka Enterprise Manager. Kemudian klik kanan Database-> All Tasks > Backup Database.
2.
Pilih Database yang akan Anda backup kemudian klik Add dan tentukan lokasi tempat penyimpanan. Jika sudah, klik Ok,kemudian OK. Jika sukses, akan muncul tulisan sepert berikut ini.
105
3.12.2 Restore Database Berikut ini adalah langkah-langkah yang dilakukan pada restore Database : 1. Buka Enterprise Manager. Kemudian klik kanan Database-> All Tasks > Restore Database. 2. Tentukan nama Database yang akan direstore. Pilih From device, Select Device, kemudian Add. Pilih lokasi Database yang pernah Anda backup. Klik OK. Jika berhasil, akan muncul dialog box seperti berikut.
3.13
Monitor dan Tunning Sistem Operasional Memonitor sistem operasional dan meningkatkan unjuk kerja sistem pada
keputusan perancangan atau direfleksikan pada perubahan kebutuhan. Tidak semua DBMS menyediakan fitur-fitur untuk memonitor dan tunning Database. Salah satu DBMS yang
106
menyediakan fitur tersebut adalah Oracle. Berikut ini adalah keuntungan-keuntungan dari tunning Database : Dapat menghindari penambahan hardware yang tidak dibutuhkan. Dapat menurunkan kebutuhan konfigurasi hardware, sehingga membuat biaya lebih rendah dan memudahkan perawatan. Menghasilkan sistem dengan response time yang cepat dan lebih baik throughputnya membuat User lebih produktif. Dengan response time yang cepat membuat moral staf lebih tinggi (senang). Dengan response time yang cepat membuat customer puas atas pelayanan
107
Bab
DOKUMEN HTML
4.1 Tujuan Instruksional Umum o Siswa mampu menjelaskan penggunaan HTML dalam dokumen. o Siswa mampu membuat dokumen dengan HTML sesuai spesifikasi.
o Siswa dapat menyelesaikan persoalan-persoalan yang muncul pada saat. pembuatan dokumen dengan HTML. 4.2 Tujuan Instruksional Khusus o Siswa dapat mengetahui apa sebenarnya yang dimaksud dengan HTML dan penggunaannya. o Siswa dapat mengidentifikasi penggunaan bahasa HTML dan syarat
penggunaannya o Siswa dapat merancang dan membuat dokumen dengan HTML sesuai persyaratan pengguna. o Siswa dapat melakukan konfigurasi ulang pada HTML dokumen yang tidak berjalan dengan baik.
4.3
Sekilas Tentang HTML Sebelum membahas tentang bagaimana membuat dokumen dengan HTML, terlebih
dahulu diketahui apa sebenarnya yang dimaksud dengan HTML. HTML adalah singkatan dari Hyper Text Markup Language. HTML merupakan bahasa (kode-kode) yang digunakan untuk membuat halaman web. HTML bukanlah bahasa pengaturan seperti C, C++ atau Pascal, ia lebih kepada bahasa yang menetapkan corak paparan dokumen. Jika anda menggunakan Internet Explorer atau Netscape Navigator anda dapat melihat kode-kode halamannya dengan right-click dan memilih menu View Source. Bahasa HTML ini ditulis dengan menggunakan teks editor seperti Windows Notepad, Ms-Edit, dan file di simpan menggunakan extensi .htm ataupun .html. Browser HTML seperti Internet Explorer atau Netscape Navigator akan menterjemahkan kode-kode
html dan membuat paparan seperti apa yang telah dikodekan. Anda juga dapat membuat halaman web dengan menggunakan HTML Editor seperti Netscape Composer, Ms-Word 97 ataupun Microsoft FrontPage. Walapun demikian, terdapat kelebihan serta kekurangan jika anda menggunakan HTML Editor yang disebutkan.
Mengapa saya perlu belajar HTML? Walaupun pada zaman yang canggih ini terdapat banyak Editor HTML WSYWIG seperti Microsoft FrontPage, Netscape Composer dan Microsoft Word 97, adakalanya terdapat beberapa keadaan yang tidak dapat dibiarkan. Masalah-masalah yang kerap berlaku seperti gambar yang tidak muncul, link yang mengarah ke arah lain dan beberapa masalah-masalah lain yang akan terjadi pada HTML Editor anda sendiri. Kadangkala masalah ini terjadi setelah anda meng-upload halaman-halaman anda ke Internet. Jadi, untuk menyelesaikan masalah-masalah ini, anda memerlukan sedikit banyak pengetahuan mengenai bahasa HTML. Apa yang dilakukan sebenarnya oleh Microsoft FrontPage atau Netscape Composer ialah menuliskan kode-kode HTML untuk anda. Caranya sama jika anda menulis kode sendiri dengan menggunakan Notepad. Disamping itu ada juga HTML Editor yang tidak optimum, ia menulis kode-kode yang tidak perlu secara berlebihan dan memungkinkan file HTML anda menjadi terlalu besar, mengambil waktu yang lama untuk di download. Anda juga boleh bergerak selangkah lebih dari orang lain. Ini karena, apabila perusahaan-perusahaan seperti Microsoft atau Netscape mengeluarkan browser HTML
4.4
Sekilas Tentang Pembuatan Dokumen dengan HTML Anda tidak perlu tersambung ke Internet ketika membuat homepage. Anda hanya
Perlukah saya tersambung ke internet untuk membuat homepage?
perlu menyediakan file-file html dan disimpan dalam direktori komputer anda dengan menggunakan Microsoft FrontPage, Netscape Composer ataupun Windows Notepad dan file disimpan dengan ekstensi .htm atau .html. Apabila selesai, sambungkan ke Internet anda, upload file-file tersebut ke Internet (web hosting).
Apa yang perlu saya ketahui? Selain Internet Explorer dan Netscape Navigator, terdapat banyak lagi browser HTML yang dapat digunakan untuk menjelajah Internet. Oleh kerana browser HTML ini
dicipta oleh perusahaan-perusahaan yang berlainan, penterjemahan bahasa HTML oleh setiap web browser berbeda antara satu sama lain. Sebagai contoh, paparan sesuatu halaman web melalui Netscape Navigator tidak sama dengan paparan melalui Internet Explorer. Walaupun demikian dalam tutorial ini anda akan diajarkan menggunakan fungsifungsi global yang dapat digunakan oleh semua browser HTML. Tetapi, untuk membuat halaman yang bagus terdapat keadaan di mana anda perlu mengetahui apakah fungsi tersebut di dukung dalam sesuatu web browser atau tidak.
Apa yang perlu saya miliki? Untuk mengikuti tutorial ini, anda hanya memerlukan teks editor seperti Windows Notepad dan browser HTML seperti Internet Explorer. Perlu diingatkan disini bahwa Microsoft Word dan WordPad bukanlah teks editor yang asli, beberapa penambahan yang tidak kelihatan telah dilakukan kepada file jenis doc dan wri. Sebaiknya anda mempunyai 3 browser HTML. Internet Explorer 3, Internet Explorer 4 dan Netscape Navigator 4. Ini bertujuan supaya anda dapat mencoba halaman yang anda buat pada 3 browser yang berlainan.
4.5
Bentuk Umum HTML
Dibawah ini ada contoh/bentuk umum dari sebuah dokumen HTML yang akan terlihat pada waktu kita membukanya dengan menggunakan Text Editor atau NotePad: <HTML> <TITLE>Contoh Homepage</TITLE> <BODY>Hallo apa kabar?<BR> Mudah-mudahan kabarnya Baik. </BODY> </HTML> Dari contoh diatas jika anda membuka file ini dengan menggunakan MicroSoft Internet Browser atau Netscape, anda hanya akan melihat tulisan: Hallo apa kabar? Mudah-mudahan kabarnya Baik. Kode-kode html terdiri dari tag-tag. Setiap huruf yang terkandung di dalam '<' dan '>' dinamakan tag. Dalam contoh di atas anda telah diperkenalkan dengan tag.
<HTML> dan </HTML> <HEAD> dan </HEAD> <BODY> dan </BODY>
Permulaan tag diletakkan dengan <nama tag> dan penutup tag diletakkankan dengan </nama tag>. Perhatikan tanda '/' yang berada di depan nama penutup tag. Tag-tag ini diperlukan karena menunjukkan bahwa dokumen itu adalah dokumen html dan akan dibaca oleh browser HTML anda. Tanda '/' atau "</>" menandakan akhir perintah tag, entah itu untuk </HEAD>, </TITLE> dsb. Perlu diingat bahwa nama dalam tag tidaklah case sensitive. Jika ada Pembuka, harus ada Penutupnya juga! Keterangan: <HTML>Pembuka/Awal setiap membuat suatu dokumen HTML. </HTML>Penutup/Akhir dari suatu dokumen HTML. <TITLE>Tag Pembuka untuk Judul Halaman/dokumen HTML. </TITLE>Tag Penutup untuk Judul Halaman/dokumen HTML. <BODY>Tag Awal dari Apa yang akan diketikan/diisi pada Dokumen HTML. </BODY>Tag Penutup dari isi dokumen HTML. <BR> Tag untuk memisahkan satu baris menjadi dua baris
Yang harus diingat adalah: Apa yang kita ketikan di NotePad dengan yang akan ditampilkan sebagai suatu dokumen di Internet akan kelihatan beda.
Mengapa perlu pembuka dan penutup tag? Untuk menjawab pertanyaan tersebut, lihatlah contoh kedua. <html> <head></head> <body> <b>Ini adalah</b> halaman <i>pertama</i> saya. </body> </html> Akan keluar hasil seperti berikut: Ini adalah halaman pertama saya Terdapat 2 perubahan yaitu kata-kata "Ini adalah" telah ditebalkan (bold) dan perkataan "pertama" telah dimiringkan (italic). Ini terjadi karena kata-kata "Ini adalah" tersebut
berada di antara tag <b> dan </b> (<b> untuk bold) dan perkataan "pertama" berada di antara tag <i> dan </i> (<i> untuk italic). Saya mau kata-kata tersebut ditebalkan dan dimiringkan! Untuk menjawab persoalan tersebut, lihatlah contoh ketiga. <html> <head></head> <body> <b><i>Ini adalah halaman pertama saya</i></b> </body> </html> Akan keluar hasil seperti berikut: Ini adalah halaman pertama saya
Apa gunanya tag head? Untuk menjawab persoalan tersebut, lihatlah contoh keempat. <html> <head> <title> Mari Belajar HTML </title> </head> <body> <b>Ini adalah</b> halaman <i>pertama</i> saya. </body> </html> Apabila anda melihat dokumen ini dengan menggunakan browser HTML anda. Anda mungkin tidak melihat adanya perubahan. Tetapi jika anda teliti, perkataan "Mari Belajar HTML" akan kelihatan pada title bar browser html anda. Ini gunanya tag <head>, di antara tag <head> ini anda letakkan tag-tag yang mempunyai fungsi khas. Terdapat banyak lagi fungsi-fungsi khas yang akan anda pelajari kemudian.
112
Anak panah menunjukkan title bar 4.6 Pemformatan Teks Terdapat banyak cara untuk memformat teks. Pemformatan teks ini seperti bold, italic, subscript, superscript yang biasa anda lakukan dengan menggunakan Microsoft Word atau Word Perfect bisa juga dilakukan dalam dokumen html tetapi dengan cara berbeda. Pada bagian ini terdapat contoh contoh cara pemformatan teks yang akan diterangkan. Jika anda biasa menggunakan Microsoft Word maka tidak akan ada masalah untuk menggunakan formatan teks seperti di bawah. Untuk memformat teks seperti bold, italic, subscript atau superscript pada halaman html, tag-tag berikut digunakan: <b>.</b> <blink>....</b link> Teks yang berada diantara tag disebelah akan diboldkan Menjadikan kata-kata yang berada diantara tag itu berkelip-kelip. Perhatian!, jika anda mengelipkan keseluruhan teks, maka teks itu akan susah dibaca!. Disamping itu, tag blink ini didukung oleh Netscape Navigator saja. Teks ini akan dimiringkan. Teks disubscriptkan. di <u>....</u>
superscript
<i>....</i> <sub>....</su b> <sup>....</su p>
di
dalam dalam
tag tag
ini ini
akan akan
Teks di kan.
Teks ini akan digarisbawahkan.

113
<cite>....</cite > <code>....</co de> <em>....</em > <kbd>....</kb d> <samp>....</s amp> <strong>....</ strong> <var>....</var > <big>....<big> <small>....</s mall> <tt>....</tt> Font Teks
Kesemua tag-tag ini mempunyai fungsi pemformatan yang tersendiri. Anda dapat mencoba tag-tag tersebut untuk membedakan fungs masing-masing tag.
Jika anda mengerti cara menggunakan Microsoft Word, anda pasti bisa menggunakan berbagai macam font pada dokumen Word anda. HTML juga bisa menggunakan font yang bermacam-macam. Caranya adalah dengan penggunaan tag <font>...</font>. Tag font ini tidak akan berfungsi tanpa penggunaan fungsi face. ----------------------------------------------------------------------<font face="Arial, Times New Roman, Lucida Sans"> kata-kata ini telah ditentukan font nya</font> ----------------------------------------------------------------------Jika anda perhatikan, terdapat 3 nilai untuk fungsi face. Ini bermaksud, jika komputer pengunjung itu tidak mempunyai font Arial, maka browser pengunjung akan mencari font Times New Roman, jika tidak ada maka Lucida Sans akan menjadi penggantinya. Kalau ketiga-tiga jenis font itu tidak ada, maka browser akan menggantinya dengan apa yang dianggap pantas. Tidak ada batas untuk font yang boleh diletakkan. Jika anda tidak meletakkan fungsi face maka font yang digunakan akan ditetapkan oleh configurasi komputer pengunjung.
114
Warna Teks Untuk menjadikan teks berwarna, fungsi color digunakan pada tag <font>. Terdapat 256 warna yang dapat digunakan untuk mewarnai kata-kata. Lihat contoh di bawah. ----------------------------------------------------------------------<font color="#FF0000">baris ini berwarna merah</font> ----------------------------------------------------------------------Warna dalam html dapat diklasifikasikan menjadi 3 warna dasar yaitu merah, hijau dan biru. warna-warna tersebut jika dicampurkan akan menghasilkan warna-warna yang lain. Sistem nomor heksadecimal digunakan untuk mewakili warna-warna tersebut. Sebagai contoh, untuk menjadikan teks halaman anda sebagai warna putih, maka nilai #FFFFFF digunakan pada fungsi text. 2 huruf pertama dari 6 huruf di atas mewakili warna merah, 2 huruf di tengah mewakili warna hijau dan 2 huruf terakhir mewakili warna biru. Tabel warna dasar bilangan heksadesimal. Color Black Olive White Green Red Teal Yellow Navy Hexadecimal #000000 #808000 #FFFFFF #008000 #FF0000 #008080 #FFFF00 #000080 Color Blue Lime Fuchsia Maroon Gray Purple Silver Aqua Hexadecimal #0000FF #00FF00 #FF00FF #800000 #808080 #800080 #COCOCO #00FFFF
Bagian-bagian yang dapat diwarnai adalah: Latar belakang Homepage Teks Link Link yang telah digunakan Latar belakang table Border table Font
Disamping itu Netscape Navigator serta Internet Explorer telah menggunakan satu cara khas untuk penggunaan warna-warna. Anda tidak perlu menggunakan nomor-nomor
115
untuk menentukan warna yang dikehendaki, sebaliknya nomor-nomor ini telah digantikan dengan kata-kata untuk memudahkan anda. Tag-tag yang berkaitan Tag <body>

Fungsi
bgcolor - untuk mewarnai background halaman anda text - untuk mewarnai semua teks. Perlu diingat bahwa teks yang berada di area tag <font> dan pengaktifan fungsi color tidak dipengaruhi oleh fungsi ini. link - untuk menjadikan warna link lain dari yang telah ditetapkan oleh browser. vlink - untuk menjadikan warna link yang telah digunakan berbeda dari yang telah ditetapkan oleh browser. <body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#800080">
Contoh
Tag Fungsi Contoh
<font>
color - untuk mewarnai semua huruf yang berada dalam area tag <font> <font color="#000000">
Tag Fungsi Contoh
<table>

bgcolor - warna latar belakang table bordercolor - warna untuk border.
<table bgcolor="#800080" bordercolor="#FFFFFF">
Ukuran Teks Untuk menjadikan ukuran teks lebih besar atau lebih kecil dari biasa. Anda dapat menggunakan fungsi size pada tag font.
Contoh:
----------------------------------------------------------------------<font size=4>Baris ini berukuran 4</font> ----------------------------------------------------------------------Terdapat 1 hingga 7 nilai ukuran yang dapat digunakan untuk fungsi size ini dan nilai 1 merupakan ukuran yang paling kecil. Ukuran header / topik juga dapat dirubah dengan menggunakan tag <h1h6>, tetapi penggunaan header berlawanan dengan font size, yaitu h1 sampai h6 dimana h1 adalah ukuran yang paling besar hingga h6 yang paling kecil. Selain itu, pada tag header tulisan dengan sendirinya sudah menjadi tebal, atau sudah di boldkan
Bagaimana cara memulai baris baru? Untuk memulai baris baru, anda dapat menggunakan tag <br>. Jika anda meletakkan tag ini, memiliki fungsi seperti menekan tombol Enter pada Microsoft Word. Contoh: ----------------------------------------------------------------------Baris pertama<br>Teks ini akan dimulai pada baris berikutnya. Bagaimana cara membuat rata tengah? Untuk merata tengahkan, anda perlu menggunakan tag <center>...</center>. Tag center ini berfungsi untuk menengahkan apa saja yang berada di dalamnya, seperti gambar, table, teks dan lain-lain. Contoh: ----------------------------------------------------------------------<center>Teks ini berada di tengah</center> ----------------------------------------------------------------------Paragraf Untuk memformatkan paragraf anda dapat menggunakan tag <p>...</p>. Letakkan <p> pada permulaan paragraf dan </p> diakhir paragraf. Browser HTML secara otomatis akan membuat jarak antar paragraf pertama dan kedua, dan paragraf baru akan dimula dengan baris baru. Contoh: --------------------------<p> Ini adalah paragraf pertama untuk teks ini. </p> <p> Ini adalah paragraf kedua untuk teks ini. </p>
-------------------------Untuk menjajarkan paragraf anda rata kiri atau ke kanan, anda dapat menggunakan fungsi align. Untuk menjajarkan paragraf anda rata kiri anda letakkan nilai left atau bila ingin merata kanankan, letakkan nilai right. --------------------------<p align=left> Ini adalah paragraf pertama untuk teks ini, dan dibuat rata kiri. </p> <p align=right> Ini adalah paragraf kedua untuk teks ini dan dibuat rata kanan. </p> -------------------------Bagaimana cara memasukkan special character? Special character adalah huruf-huruf yang tidak terdapat pada keyboard komputer anda. Untuk menuliskan special karakter anda perlu menggunakan cara lain. Huruf-huruf seperti harus ditype dengan menggunakan © dan browser pengunjung akan menerjemahkan © kepada . Di bawah merupakan contoh beberapa spesial character yang dapat digunakan dalam pembuatan HTML:
Hasil & < > * : Keterangan Copyright Registered trademark Trademark Non-breaking space ampersand angle quotation mark (left) angle quotation mark (right) tanda kutip lebih kecil lebih besar tanda kali tanda bagi Karakter Istimewa © ® & « » " < > × ÷ Nomor Karakter Istimewa © ® ™ ¡ & « » " < = × ÷
4.7
List HTML List merupakan bentuk umum yang biasa kita gunakan untuk membuat daftar
sesuatu, misalnya jenis-jenis list dalam HTML: List dengan nomor List tanpa nomor
List definisi List dengan nomor adalah model daftar yang setiap itemnya diberi nomor. Pada contoh list diatas merupakan contoh penggunaan list tanpa nomor. Selain list bernomor dan tanpa nomor, ada sebuah list lagi yang dapat digunakan untuk membuat list yang memberi uraian terhadap suatu item dalam daftar, disebut list definisi
Ordered List Ordered list / List bernomor secara umum dimulai dengan menggunakan 1,2,3..., dst sampai dengan sejumlah item dalam list tersebut. Tetapi, kita juga dapat merubah susunan nomor dalam OL dengan model angka yang lain dengan mengisi atribut type pada tag <ol>. Berikut adalah nilai-nilai yang dapat digunakan untuk mengubah penomoran dalam ordered list: Type I I A A Arti Ditampilkan dengan menggunakan angka Romawi huruf besar Ditampilkan dengan menggunakan angka Romawi huruf Cecil Diubah dengan menggunakan abjad huruf kecil Diubah dengan menggunakan abjad huruf besar
Selain atribut type, ada juga atribut start, digunakan untuk mendefinisikan nomor awal yang akan digunakan pada ordered list. Jika ingin menggunakan list dari nomor 7 maka berikut adalah contoh penggunaannya <ol start=7>...</ol> Contoh ini menunjukkan berbagai jenis ordered list yang berbeda: <!Coba_orderedlist.html--> <html> <body> <h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li>
</ol> <h4>Letters list:</h4> <ol type = A> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Roman numbers list:</h4> <ol type= I> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </body> </html> Unordered List Unordered list sering disebut sebagai bulleted list, mempunyai bullet default berupa noktah. Tetapi, jenis bullet tersebut dapat diubah dengan menggunakan atribut type seperti pada ordered list. Berikut adalah daftar jenis bullet yang bisa digunakan untuk mengubah bullet default pada bulleted list. Disc, bentuk noktah tetapi tidak diarsir di tengahnya Square, bentuk kotak. Berikut contoh berbagai jenis unordered list.  <html> <body> <h4>Disc bullets list:</h4> <ul type=disc> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Square bullets list:</h4> <ul type=square>
<li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html> Nested List Bullet dapat digunakan secara bersarang, maksudnya bahwa di dalam list ada list lagi. Contoh ini akan mendemonstrasikan bagaimana membuat nested list.  <html> <body> <h4>A Nested List:</h4> <ul> <li>Coffe</li> <li>Tea</li> <ul> <li>Black Tea</li> <li>Green Tea</li> </ul> <li>Milk</li> </ul> </body> </html> Definition List Adalah list yang digunakan untuk memberikan uraian pada sebuah list. Contoh berikut akan menunjukkan sebuah definition list:  <html> <body> <p> <img src=.../images/test_image.gif width=20 height=20> </p> <p> <img src=.../images/test_image.gif width=45 height=45> </p> <p> <img src=.../images/test_image.gif width=70 height=70> </p> <p> Kamu dapat membuat sebuah gambar menjadi lebih besar atau lebih kecil dengan merubah nilai height dan width dalam sebuah tag <img> </p> </body>
</html> Image Sebagai Suatu Link Dengan melihat contoh di bawah, kita akan mengetahui bagaimana cara membuat image sebagai suatu link.  <html> <body> <p> Kamu juga dapat menggunakan sebuah image sebagai suatu link. <a href=lastpage.htm> <img border=0 src=buttonnext.gif width=65 height=38> </a> </p> </body> </html> Pembuatan image sebagai suatu link merupakan alternatif dari link-link yang biasanya dibuat dalam bentuk list atau teks biasa, tujuannya agar dengan gambar suatu menu dapat terlihat lebih interaktif dan langsung dapat memberi gambaran tentang apa yang didapat jika memilih menu tersebut.
Background Image Suatu image juga dapat digunakan sebagai latar belakang selain warna latar belakang. Contoh berikut akan memaparkan cara pemasangan image sebagai background:  <html> <body background=.../images/spiderman3.jpg> <p> Kamu dapat mengisi tampilan latar belakang dengan image. </p> </body> </html>
4.9
Tabel HTML Tabel digunakan dalam penyajian data dalam bentuk kolom dan baris. Umumnya
setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolomkolom menunjukkan kelompok data dalam satu kesatuan. Sebuah tabel umumnya mempunyai judul, tempat anda menjelaskan kolom/baris yang dilibatkan. Baris untuk informasi, dan sel untuk setiap itemnya. Pada tabel berikut,
kolom pertama berisi informasi header, setiap baris menjelaskan sebuah tag tabel HTML, dan setiap sel berisi sebuah pasangan tag atau penjelasan dari fungsi tag.
Elemen-elemen Tabel
Elemen <table>...</table> Penjelasan Mendefiniskan sebuah tabel dalam HTML. Jika atribut broder dituliskan, maka browser akan menampilkan tabel dengan border. Mendefinisikan tulisan untuk judul tabel. Posisi default dari judul adalah ditengah pada bagian paling atas tabel. Atribut align=bottom dapat digunakan untuk menempatkan judul pada bagian bawah tabel. Catatan: Judul dapat diberi tag apa saja. Menspesifikasikan sebuah baris tabel dalam tabel. Anda dapat mendefinisikan atribut untuk seluruh baris: align (left,center,right) dan/atau valign (top,middle,bottom). <tr>...</tr> Mendefinisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan ditengah. <th>...</th> Mendefinisikan sebuah sel data tabel. Secara default teks dalam sel ini ditampilkan rata kiri, dan ditengah secara vertikal. Sel data tabel dapat berisi atribut untuk mendefinisikan karakterisiktik dari sel dan isinya.
<caption>...</caption >
<td>...</td>
Atribut Tabel Catatan: Atribut yang didefinisikan dalam <th>...</th> atau <td>...</td> akan menggantikan alignment default yang didefiniskan dalam <tr>...</tr>
Elemen align={left | center | right} Penjelasan Alignment horisontal untuk sel
valign={top | middle | Definisi alignment vertikal dalam sel bottom} colspan=n rowspan=n nowrap Jumlah n kolom sel diperlebar Jumlah n baris sel diperbesar Matikan wrapping dalam sel
Contoh ini mendemonstrasikan bagaimana membuat tabel dalam sebuah dokumen HTML. <!Coba_tabel.html--> <html> <body> <p>Setiap tabel dimulai dengan sebuah tag table. Setiap baris dimulai dengan sebuah tag tr. Setiap data dimulai dengan sebuah tag td.
</p> <h4>Satu kolom:</h4> <table border=1> <tr> <td>100</td> </tr> </table> <h4>Satu baris dan tiga kolom:</h4> <table border=1> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>Dua baris dan dua kolom:</h4> <tr> <td>100</td> <td>200</td> </tr> <tr> <td>300</td> <td>400</td> </tr> </table> </body> </html> Catatan: Jumlah baris tabel ditentukan dengan banyaknya <tr>...</tr> yang dituliskan dalam elemen tabel, dari <table>...</table> Jumlah kolom dalam tabel ditentukan dengan banyaknya <td>...</td> di dalam setiap definisi baris, dari <tr>...</tr> Setiap baris dalam tabel akan mempunyai jumlah kolom yang berbeda.
Border Tabel Border sebuah tabel dapat ditentukan dalam atribut border=n dalam tag <table> semakin besar nilai n, maka semakin tebal border sebuah tabel yang akan dihasilkan. Apabila nilai n diisi dengan 0 maka sebuah tabel akan menjadi tabel tanpa border.
Header Contoh berikut akan menjelaskan cara penggunaan header tabel. 
<html> <body> <h4>Table headers:</h4> <table border=1> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> <h4>Vertical headers:</h4> <table border=1> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table> </body> </html> Colspan dan Rowspan Contoh berikut akan mendemonstrasikan bagaimana mendefinisikan sel tabel yang dilebarkan lebih dari satu baris atau satu kolom.  <html> <body> <h4>Cell that spans two columns:</h4> <table border=1> <tr> <th>Name</th> <th colspan=2>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> <h4>Cell that spans two rows:</h4>
<table border=1> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan=2>Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html> Tag di dalam suatu Tabel Contoh berikut akan mendemonstrasikan bagimana menampilkan elemen lain di dalam tabel.  <html> <body> <table border=1> <tr> <td> <p>Sebuah paragraf</p> <p>Paragraf lain</p> </td> <td>Sel ini mengandung sebuah tabel: <table border=1> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>Sel ini mengandung list <ul> <li>Apples</li> <li>Bananas</li> <li>Pineapple</li> </ul> </td>
<td> </td> </tr> </table> </body> </html> Cellpadding dan Cellspacing Cellpadding adalah atribut di dalam tag <table> yang berfungsi untuk menambahkan jarak spasi dari antara sel dan bordernya misal: <table border=1 cellpadding=10> berarti menandakan bahwa jarak antar sel dan bordernya adalah 10 spasi. Cellspacing juga merupakan atribut di dalam tag <table> yang berfungsi untuk menambah jarak antar sel, misal : <table border=1 cellspacing=10> maka jarak antar sel yang terjadi adalah 10 spasi.
Background Tabel Seperti elemen yang lain, tabel juga dapat diberi latar belakang, baik itu warna ataupun gambar. Dalam tabel, latar belakang dapat diubah dalam setiap selnya maupun keseluruhan tabelnya misal: <table bgcolor=red /
background=.../images/background.jpg> ataupun di dalam sel: <td bgcolor=yellow / background=.../images/background.jpg>.
128
Tag-tag Tabel:
Tag Awal <table> <th> <tr> <td> <caption> <colgroup > 4.0 <col> 4.0 <thead> 4.0 <tbody> 4.0 <tfoot> 4.0 Definisi suatu body tabel yang scroll dalam suatu header dan footer tabel yang pasti. Definisi suatu footer tabel yang tidak akan scroll (fixed) 4.0 Definisi suatu header tabel yang tidak akan scroll. NN 3.0 3.0 3.0 3.0 3.0 IE 3.0 3.0 3.0 3.0 3.0 3.0 3.0 W3 3.2 3.2 3.2 3.0 3.2 4.0 4.0 Kegunaan Definisi tabel Definisi header tabel. Defiinisi baris tabel. Definisi sel tabel. Definisi caption tabel. Definisi kelompok kolom tabel. Definisi nilai atribut satu atau lebih kolom dalam tabel
4.10
Link HTML Kelebihan utama dari suatu dokumen HTML adalah kemampuannya memberikan
link dari satu teks dan / atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser web akan menyorot (highlight) teks atau gambar yang diidentifikasi sebagai link dengan warna dan / atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link (hyperlink) Tag yang dipakai untuk membuat hyperlink adalah <a> dan tag penutupnya adalah </a>. Contoh: <a href=http://www.yahoo/com> Link ke yahoo </a>. Atribut <href> digunakan untuk mendefinisikan lokasi link. Ada beberapa jenis link yang bisa anda gunakan, berdasarkan lokasi tujuannya link dibedakan: Link relatif yang menuju bagian lain dari halaman web anda Link relatif yang menuju halaman lain dalam satu website
Karena link menuju ke web yang sama, maka tidak perlu dituliskan alamat URL web tersebut, hanya perlu menuliskan URL file-nya. Berikut adalah beberapa variasi penulisan link berdasarkan letak penempatan file-nya.
Bila file berlokasi pada folder yang sama dengan file dari link tersebut maka cukup dituliskan nama file-nya, misalnya: <a href=modul1.htm> Bila file yang dituju itu berada dalam folder yang lain di bawah folder yang ditempati oleh link tersebut, maka harus dituliskan nama folder-nya. Misalnya:<a href=" modul1/test001.htm"> Bila file yang dituju itu berada dalam folder yang lain di atas folder yang ditempati oleh file dari link tersebut maka dituliskan seperti
berikut:<a href="../rainbow.gif">Lihat gambar</a> Bila file yang dituju letaknya dua tingkat di atas maka dituliskan dua kali titik dua seperti ini: <a href = "../../rainbow2.gif"> Contoh gambar ke 2</a> dan seterusnya Link menuju ke website lain atau resource yang berbeda Link yang menuju ke bagian tertentu (bookmark) Link yang menuju ke suatu file yang dapat ditampilkan dalam browser, misalnya file image atau animasi Link yang menuju ke suatu file tertentu yang tidak bisa ditampilkan atau dijalankan dalam browser misalnya: file program (EXE), file kompresi (ZIP), file audio (seperti MP3, RM), file video, dan lain-lain. Bila link semacam ini di-klik, akan muncul dialog box yang menanyakan apakah anda akan menyimpan (save) file itu dalam hardisk atau menjalankannya dengan program yang sesuai. Proses pengambilan dan penyimpanan file disebut download. Cara penulisan alamat link ini sama saja dengan cara penulisan link biasa. Link yang mengarah ke alamat email. Bila link ini diklik akan membuka jendela pengiriman email dari program email yang terinstall pada komputer user (misalnya Microsoft Outlook). Pada kotak tujuan email (To:) sudah tercantum alamat email tujuan. Contoh penulisan seperti : mailto:ar1f@gmail.com> Kirim email! </a> Link yang membuka window baru. Link ini akan mengantar kita ke halaman lain dengan membukanya pada window baru, sehingga pengunjung tidak harus meninggalkan halaman sebelumnya. Link ini dapat dibuat dengan penggunaan atribut <target=_blank>. Contoh penulisan seperti : <a href = http://www.microsoft.com target = _blank> Microsoft </a> <a href =
130
Link pada lokasi halaman yang sama. Link ini akan membawa kita tetap kepada halaman yang sama, misal dari halaman yang paling bawah ke atas, dan sebaliknya. Link ini dibuat dengan memakai atribut penamaan link <a name = top>. Jadi setelah penamaan tersebut, jika dibuat link <a href = #top >Kembali ke atas</a> maka halaman tersebut akan kembali ke bagian yang telah diberi nama top. Link yang tidak digarisbawahi. Link ini dapat dibuat dengan penambahan atribut <style = text-decoration:none>
131
Bab
5
KEAMANAN WEB STATIK
5.1 Tujuan Instruksional Umum o Siswa mengetahui apa itu sebenarnya keamanan pada web statik dan hal-hal yang berhubungan dengan keamanan web statik. o Siswa dapat menentukan persyaratan keamanan bisnis. o Siswa dapat menjamin keamanan web server. 5.2 Tujuan Instruksional Khusus o Siswa dapat mengidentifikasi tingkat keamanan yang dibutuhkan berdasarkan maksud bisnis dari website. o Siswa dapat memproteksi password untuk semua situs dibutuhkan atau bagian dari situs. o Siswa dapat mengetahui teknik-teknis penerapan keamanan melalui penggunaan password yang aman. o Siswa mampu memeriksa formulir web sebelum memasukkannya ke server. o Siswa mampu memproteksi sumber jaringan yang dibagi dari gangguan
sesuai dengan persyaratan bisnis.
132
5.3
Uraian Singkat Materi Pada bagian ini akan dibahas tentang tingkat keamanan yang di butuhkan
berdasarkan maksud bisnis dari website tersebut di identifikasi, proteksi password untuk semua situs diburuhkan atau bagian dari situs yang di identifikasi, dan Solusi password secara minimum atau maksimum berdasarkan persyaratan bisnis di putuskan. Selain itu dalam buku informasi ini juga akan dibahas tentang password web server tidak dikenal, interpreters (program yang menjalankan CGI) tidak di simpan di dalam direktori cgi-bin, formulir web memeriksa data sebelum memasukannya ke server, dan sumber jaringan yang di bagi di proteksi dari gangguan sesuai dengan persyaratan bisnis 5.4 Beberapa Pengertian dalam Unit Kompetensi Ini : : program yang tidak tergantung pada bahasa pemograman apapun yang membangun suatu spesifikasi interfac gateway b. Interpreters 5.5 5.5.1 : program yang menjalankan CGI
a. CGI
Informasi masing-masing elemen kompetensi: Menentukan persyaratan keamanan bisnis
1) Pengetahuan Kerja Sekilas tentang Web Statik Munculnya web berawal dari adanya kebutuhan-kebutuhan perorangan terutama bisnis untuk menampilkan file-file yang mereka miliki kepada orang, klien atau pihak lain. Berikut ini merupakan perkembangan web secara singkat, yaitu:
Di masa awal web (awal 1990-an), web server yang ada praktis berfungsi hanya sebagai file server (bedanya, protokol yang dipakai adalah HTTP, sehingga bisa diakses oleh khalayak luas melalui jaringan computer yang sudah berkembang).
Yang dikerjakan oleh web server saat itu hanyalah mentransfer file, terutama filefile HTML dan gambar GIF atau JPEG, kepada klien yang memintanya. Jadi hanya terbatas pada permintaan klien atau keinginan pembuat web tersebut. Memang pada masa awal munculnya web fasilitas ini sangat berguna terutama kepada pihakpihak bisnis atau komersial. Server dalam hal ini masih bersifat pasif. Pasif dalam hal ini adalah server hanya menerima dari satu sisi, yaitu sisi pengelola, tetapi tidak bisa menerima dari sisi klien atau pihak lain.
133
Tampilan dan isi halaman web yang tetap. Selama file yang bersangkutan tidak diubah oleh pembuat situs, maka data atau file-file yang ditampilkan akan tetap sama dari request ke request. Jadi tampilan web tergantung kepada si pembuat web, orang lain boleh dikatakan hanya sebagai pembaca dan penonton saja, atau pengolah data di luar system. Situs yang menampilkan jenis-jenis halaman-halaman seperti yang diuraikan di
atas adalah situs web statik. Namun, karena situs web semakin kompleks, terutama berkat kalangan komersial yang berbondong-bondong online, di sisi server web mulai berubah. Muncullah kebutuhan-kebutuhan baru untuk:
Interaksi dengan pengunjung situs akan lebih mudah, dengan frekuensi komunikasi yang sering. Antara situs (sebenarnya secara tidak langsung adalah pihak yang mengelola dan memiliki situs) dan pengunjung dapat berkomunikasi secara langsung, dan mudah. Pengunjung tidak hanya sebagai sebatas pembaca saja, tetapi sudah dapat memberikan masukan secara langsung ke dalam situs web. Bahkan pengunjung bisa berkomunikasi tanpa dibatasi oleh waktu. Pengunjung bebas mengunjungi situs dengan frekuensi yang sering.
Menampilkan informasi perusahaan yang berasal dari database. Data yang ditampilkan dalam web sudah berasal dari database. Data yang ditampilkan tidak harus menunggu update dari pengelola situs, sehingga data yang ditampilkan up to date. Jadi pada saat data dalam database berubah, maka data akan ditampilkan berubah kepada pengunjung. Boleh dikatakan penyajian data ini Just In Time.
Menampilkan halaman yang memproses informasi dari klien, terupdate otomatis, berbeda tampilan sesuai kondisi tertentu. Infomasi yang ditampilkan dalam situs web sudah berubah-berubah, tergantung dari data yang terdapat dalam database. Bagian ini berhubungan erat dengan point kedua. Data yang ditampilkan dalam situs web selalu berubah-ubah tanpa menunggu administrator jaringan. Hal ini sangat penting terutama website yang dibutuhkan adalah website yang berhubungan dengan klien. Sebagai contoh, pada saat si klien sudah menginput data pemesanan kepada suatu perusahaan penyedia barang melalui website perusahaan penyedia, maka diharapkan website akan dengan cepat menginformasikan hasilnya kepada klien. Hasil ini dapat
134
digambarkan dalam proses bolak-balik antara perusahaan penyedia barang dengan klien yang terjadi pada waktu yang hampir bersamaan, yaitu: a. Informasi kertersediaan barang pesanan (situs perusahaan penyedia barang) b. Jenis-jenis barang yang tersedia, dan meminta pilihan kepada klien (situs perusahaan penyedia barang) c. Jenis pembayaran yang akan dilakukan (situs perusahaan penyedia barang klien) d. Konfirmasi pembelian barang kepada klien (situs perusahaan penyedia barang klien) e. Waktu dan lokasi tujuan pengiriman barang (situs perusahaan penyedia barang - klien). Dari point-point di atas dapat dilihat bagaimana kebutuhan website yang lebih maju dan dinamik, dan fleksibel. Apa yang harus berada di sisi server kini tak cukup lagi hanya kumpulan file statik, tapi program aplikasi dan database. Situs web seperti ini yang disebut situs web dinamik. Namun, pada tulisan ini kita hanya membahas web dinamis secara singkat, karena pokok pembahasan yang disajikan adalah tentang web statik.
Tingkat keamanan yang dibutuhkan berdasarkan maksud bisnis dari website tersebut Dalam pembahasan ini kita akan berbicara tentang bagaimana menerapkan keamanan website. Berbicara tentang keamanan website maka tidak boleh terlepas dari masalah keamanan jaringan internet. Keamanan website ini tentu saja bertujuan untuk menjada keamanan data yang ada di dalamnya. Faktor yang sangat penting yang perlu dijaga dalam perlindungan data/informasi tersebut adalah: Confidetiality (Kerahasiaan data), Interity (Integritas atau Keutuhan data) dan Availability (Ketersediaan) data/informasi. Peningkatan kebutuhan internet pada saat sekarang ini kian hari kian semakin pesat. Peningkatan ini bukan hanya dilatarbelakangi oleh perusahaan-perusahaan komersial saja, tetapi juga individu perorangan yang tidak dibatasi oleh usia muda. Bahkan pada saat sekarang ini yang banyak kita lihat pengguna internet adalah anak-anak sekolahan. Mereka sibuk membuat website pribadi mereka, baik itu website static maupun website dinamik.Website static adalah website yang sangat laris dalam kalangan
135
perorangan, tapi tidak jarang juga kita lihat perusahaan-perusahaan yang masih menggunakan website static untuk perkembangan bisnis perusahaan tersebut. Oleh karena peningkatan penggunaan jaringan internet semakin meningkat maka masalah keamanan jaringan Internet juga semakin hari menjadi issue yang penting dan berkembang. Hal ini juga dikarenakan pada saat sekarang ini internet telah mengambil bagian, posisi, dan peranan yang sangat besar bagi perkembangan bisnis dan perekonomian. Peranan jaringan internet ini telah memacu ketertarikan orang kepada pengetahuan akan jaringan dan internet semakin besar karena issue tentang jaringan dan internet tidak akan berhenti, tetapi malah akan semakin berkembang. Oleh karena itu, banyak pihak yang belajar dan tertarik pada teknik-teknik jaringan komputer yang sangat kompleks termasuk pengertian & pengetahuan tentang berbagai lubang (hole) yang ada di perangkat lunak Internet yang umumnya digunakan di server. Sayangnya beberapa pihak mengarahkan dan menggunakan pengetahuan yang mereka miliki untuk mencoba-coba dan menunjukan kepakarannya kepada umum dengan menggunakan cara-cara yang kurang baik dan bahkan merusak sistem jaringan dan berperan sebagai cracker yang kurang baik. Demikian juga halnya dengan keamanan pada web statik, karena web statik juga berhubungan dengan jaringan, walaupun data yang ditampilkan bersifat statik. Tolak ukur tingkat keamanan web statik adalah terlihat dari adanya keamanan data yang ada di dalam web tersebut. Data bebas dari crackers, heckers, virus atau campur tangan orang lain yang tidak berwenang atas web site. Pada pembahasan ini kita akan berbicara tentang keamanan website yang berarti juga keamanan jaringan. Ketika kita berbicara tentang keamanan suatu website, jaringan, internet, sistem atau benda apapun itu pertama kali yang harus kita telusuri dan perlu ketahui adalah hal-hal di bawah ini, yaitu:
Sistem apa sebenarnya yang ingin kita selamatkan dari gangguan orang lain
atau sistem lain? Kita harus tahu sistem yang akan kita terapkan keamanan website. Jenis website apa yang harus kita gunakan, website statis atau dinamis (dalam pembahasan ini kita focus ke website statis). Bagaimana system yang akan disajikan dan ditampilkan dalam website. Siapa-siapa saja pihak yang terkait dengan website tersebut, dan data-data apa saja yang akan disajikan dalam website statis tersebut. Apakah berupa profile semata atau data lainnya.
Seberapa penting website itu bagi pihak pemilik ataupun orang lain yang masih
mempunyai andil? Kita harus tahu sejauh mana peranan website tersebut untuk memenuhi keinginanan atau kebutuhan bisnis perusahaan atau keinginan seseorang individu. Atau lebih jauh dan ekstrim lagi seberapa besar peranan website dalam memberikan keuntungan kepada seseorang atau perusahaan. Apakah website tersebut satu-satunya jalan komunikasi lewat internet dengan klien, contohnya untuk promosi barang, profile perusahaan dan lain-lain, atau website tersebut hanya sebagai jalur komunikasi tambahan.
Jika website itu ternyata menghadapi gangguan keamanan seberapa besar

kerugian yang ditimbulkan bagi pemilik ataupun orang lain yang masih mempunyai andil? Dalam mendefinisikan bagian atau point ini, kita harus bertindak seolah-olah sebagai pemilik website, dimana pribadi kita atau perusahaan kita akan ditampilkan datanya. Dengan demikian kita akan mengetahui kerugian yang dialami jika ternyata website ini mengalami gangguan keamanan. Jika website ini adalah website bisnis, maka jelas akan membawa kerugian yang sangat banyak. Berbeda halnya jika website tersebut merupakan website personal atau pribadi. Apabila gangguan keamanan website bisnis terjadi, maka akan membawa pengaruh kepada bisnis proses yang ada dalam perusahaan, contohnya gangguan terhadap data. Hal ini akan membawa dampak yang sangat besar.
Ancaman-ancaman saja yang harus diantisipasi dalam menghindarkan website

tersebut dari gangguan keamanan? Kita harus mengetahui ancaman-ancaman apa saja yang akan menyerang keamanan website yang kita miliki. Apakah ancaman yang muncul hanya sebatas virus, worm, troyan horse atau malicious software/program lainnya. Atau apakah website yang kita miliki berpeluang untuk disinggahi oleh heckers ataupu cracker? Kita harus tahu seberapa besar ancaman-ancaman tersebut merusa data yang kita miliki. Bagi perusahaan terutama perusahaan bisnis, data
merupakan jantung perusahaan, ketika data perusahaan bisa diakses oleh orang lain yang tidak berwenang, hal ini merupakan awal dari kehancuran jika tidak langsung dicegah.
Bagaimana cara menghadapi gangguan keamanan yang timbul?

Sebelum membangun website, maka sudah seharusnya juga keamanan terhadap website tersebut dibangun. Tapi walaupun dari awal keamanan website sudah diterapkan, tidak menutup kemungkinan kalau website kita juga pada akhirnya mengalami gangguan keamanan yang disebabkan oleh ancaman-ancaman yang telah diterangkan pada point sebelumnya. Ketika website kita menghadapi gangguan, maka kita harus tahu mengambil langkah yang tepat. Sebagai contoh, ketika kita menemukan adanya data yang ngawur di sana sini, maka sudah seharusnya langsung mengambil tindakan instalasi anti virus untuk membuang virus-viru yang ada. Untuk menjaga keamanan data
daripengaksesan pihak-pihak yang tidak berwenang, perlu disediakan firewall, sebagai jalur penyaring otorisasi pengguna terhadap suatu system. Langkah yang sudah sangat umum, untuk memfiter pengguna yang berhak masuk ke website kita adalah, dengan menggunakan password. Maka point-point di atas adalah suatu hal yang sangat kritikal dan mutlak untuk diperhatikan jika Anda tidak mahu bahwa website Anda akan menjadi lubang atau pintu masuk untuk merusak diri Anda sendiri atau usaha Anda sendiri. Point-point di atas juga akan menentukan tingkat keamanan yang akan diterapkan dalam suatu website static, walaupun sebenarnya bisa juga digunakan dalam website dinamis. Jika kita melihat lebih jauh lagi dari segi kepemilikan website, tingkat keamanan yang dibutuhkan dalam suatu website saling berbeda tergantung pada kebutuhan dan tujuan pembuatan website tersebut. Antara web personal/pribadi berbeda dengan website bisnis. Tingkat keamanan untuk website bisnis lebih tinggi daripada website personal/pribadi. Oleh karena itu, kita harus bisa mengidentifikasi kebutuhan keamanan untuk website tersebut sesuai kebutuhannya. Untuk lebih jelasnya berikut ini akan disajikan hal-hal yang harus ditelurusi dan yang perlu diketahui untuk menentukan dan mengidentifikasi tingkat keamanan yang
138
dibutuhkan dan perlu diterapkan dalam suatu website. Di bawah ini akan dicoba untuk menyajikan perbandingan antara website static personal dan bisinis (komersial). 1. Website Statik Pribadi atau Personal Untuk melihat seberapa tinggi tingkat keamanan yang perlu diterapkan dalam suatu website static pribadi, maka hal-hal yang perlu dikaji dan diperhatkan, adalah: a. Terlebih dahulu kita harus mengetahui data apa saja yang biasanya ditampilkan dalam website tersebut. Data yang ditampilkan dalah sebagai berikut:
Home, berisi profile tentang orang yang memiliki website tersebut. Galeri, berisi foto-foto yang berhubungan dengan pemilik.
Dengan melihat data yang ditampilkan dalam website static pribadi, maka terlihat bahwa tingkat kemanan website yang dibutuhkan tidak menjadi hal yang terlalu ktitikal. Apabila website mengalami gangguan keamanan memang akan membawa kerugian bagi pemiliknya, tapi perbaikan juga hanya mencakup ruang atau batasan yang sempit. b. Pada dasarnya website personal ini dibuat untuk sarana hiburan atau mencari teman lewat internet. Dengan menyebarkan profile seseorang di internet dengan tampilan yang menarik, diharapkan dia mendapat banyak teman. c. Biaya yang digunakan untuk pembuatan website pribadi relatif murah, karena spesifikasi yang dibutuhkan tidak banyak. Sebagai contoh biaya domain yang menyangkut penyediaan memori bisa menggunakan spesifikasi minimum, karena data yang disimpan tidak terlalu banyak, biaya hosting juga tidak terlalu mahal. Oleh karena dari segi biaya yang tidak terlalu tinggi pada umumnya kita tidak terlalu memberikan perhatian tingkat keamanan yang tinggi terhadap ha tersebut. d. Target pembuatan website adalah menarik perhatian individu-individu yang juga mempunyai tujuan yang sama dengan pemilik website statik pribadi tersebut, yang tentu saja jumlahnya tidak terlalu besar. Jadi kemungkinan orang yang berniat untuk mengganggu data dalam website sangat kecil. Walauun itu tergantung pada posisi seseorang dalam masyarakat. Sebagai contoh, website pribadi seorang tokoh partai, seperi ketua partai suatu partai politik tertentu akan lebih riskan untuk mendapat gangguan keamanan daripada website statik seorang mahasiswa, karena orang yang mengunjugi website tokoh partai tersebut akan lebih banyak dan persaingan tidak sehat antar partai juga boleh
memicu hal-hal yang tidak baik melalui pembobolan sistem website suatu lawan partai.
2. Website Statik Bisnis (Komersial) Sama halnya dengan website static pribadi, kita juga perlu untuk memperhatikan terlebih dahulu hal-hal di bawah ini, yaitu: a. Mengetahui data apa saja yang biasanya ditampilkan dalam website bisnis (komersial). Data yang ditampilkan dalah sebagai berikut:
Home, biasanya akan menampilkan produk-produk andalan perusahaan

untuk menarik perhatian pengunjung.
Fasilitas, berisi fasilitas-fasilitas layanan yang disediakan oleh perusahaan,

contoh fasilitas cara pembayaran yang mempermudah transaksi baik dari sisi perusahaan maupun klien.
Produk, berisi produk-produk secara keseluruhan yang disediakan atau

ditangani oleh perusahaan.
Perusahaan, berisi profile tentang perusahaan keseluruhan yang memiliki

website tersebut, baik itu visi maupun misi perusahaan.
Contact Person, berisi alamat-alamat email, nomor telepon maupun telepon

selular dari orang-orang yang bisa dihubungi untuk menanyakan informasi tentang perusahaan.
Seperti yang kita baca dalam point-point di atas tentang website statik bisnis (komersial), website ini secara totalitas menampilkan data perusahaan, baik data produk terutama data promosi. Coba kita bayangkan apabila data promosi suatu perusahaan dimonopoli oleh pihak yang tidak berwenang, seperti hackers. Mereka mengubah kalima-kalimat promosi menjadi kalimat-kalimat yang lain. Mereka mengganti gambar-gambar produk menjadi gambar-gambar lain yang aneh. Apa yang akan terjadi pada perusahaan? Mereka akan kehilangan klien dan citra perusahaan bagi pengunjung akan buruk. Oleh karena itu pada website statik bisnis (komersial) dibutuhkan suatu tingkat keamanan yang tinggi. Selain itu, penerapan tingkat keamanan ini juga dipengaruhi oleh besar kecilnya perusahaan atau bisnis yang dijalankan oleh perusahaan. Walaupun sebenarnya
140
siapapun tidak akan ada yang mahu kehilangan data, karena data sangat penting dalan proses bisnis suatu bidang usaha. b. Website bisnis (komersial) ini dibuat untuk menampilkan data produk yang dijual oleh suatu perusahaan. Di website ditampilkan berbagai promosi dan tawaran-tawaran lain dengan harapan bisnis yang dijalankan oleh perusahaan tersebar ke seluruh penjuru. Dengan demikian dari hal tersebut diharapakan tingkat penjualan produk akan semakin meningkat yang tentu saja berpengaruh kepada banyaknya keuntungan perusahaan. c. Biaya yang digunakan untuk pembuatan website bisnis membutuhkan biaya yang lebih besar dibanding dengan pembuatan website statik pribadi karena spesifikasi yang dibutuhkan banyak. Sebagai contoh biaya domain yang menyangkut penyediaan memori harus besar, karena data yang disimpan tidak banyak, biaya hosting juga tidak terlalu mahal. Oleh karena itu dari segi biaya yang tinggi tentu saja kita akan memberikan usaha yang tinggi juga untuk menjaga keamanan data dalam website. d. Target pembuatan website adalah menarik perhatian orang-orang yang terlibat dalam dunia bisnis, yang tentu saja jumlah pengunjung akan lebih banyak. Jadi kemungkinan orang atau pihak yang berniat untuk mengganggu data dalam website besar. Kemanan website juga bias dipengaruhi oleh persaingan yang tidak sehat dalam dunia bisnis, yang dapat diterapkan dengan mengganggu data yang ada dalam website pesaing bisnis.
Proteksi password untuk semua situs dibutuhkan atau bagian dari situs yang diidentifikasi Salah satu cara yang paling umum untuk melindungi data atau system yang kita miliki dari orang-orang atau pihak-pihak yang tidak berwenang untuk mengakses data adalah dengan membuat password. Password merupakan suatu kata unik yang hanya diketahui oleh pemilik password yang dibuat untuk bsa masuk ke dalam suatu system. Password bersifat rahasia, tidak boleh ada orang yang berhak mengetahuinya kecuali yang empunya password sendiri. Password merupakan cara yang tepat dalam menjaga keamanan suatu data. Tetapi dengan adanya perkembangan ilmu pengetahuan dan ketertarikan orang-orang untuk mempelajari keamanan suatu sistem, maka password juga sudah bisa dilacak oleh orang lain. Banyak sudah perangkat lunak yang dibuat untuk melacak password orang lain. Perangkat lunak ini seperti perangkat lunak biasa yang
berguna untuk membantu suatu perusahaan dalam menangani masalah-masalah tertentu, tetapi sebenarnya disipkan suatu program yang bisa melacak password orang lain. Sebagai contoh yang paling umum dalam mencuri username dan password adalah suatu program yg menyamar sebagai program biasa dengan tujuan untuk mencuri informasi. Sebagai contoh, program yg berlaku seperti system log-on padahal sebenarnya untuk mengambil informasi username (nama-peguna) dan password, sehingga pembuat program ini kelak dapat menggunakan username dan password tersebut untuk membobol system. Serangan ini lebih dikenal dengan sebutan Troyan Horse. Oleh karena itu, password yang kita miliki juga harus diproteksi dari hal-hal yang tidak diinginkan, sehingga password kita tidak tersebar ke tangan orang lain dan data kita tetap aman. Untuk menjaga keamanan website beserta data yang ada di dalamnya, username dan password kita, maka perlu dilakukan proteksi password. Hal ini dapat dilakukan dengan konsep keunikan yang dimiliki oleh computer atau system. Tiap komputer adalah unik, telebih di internet, krn masing-masing memiliki IP/N (internet protocol number, nomor protokol antarjaringan) unik, baik IP statik yg senantiasa tersambung maupun IP dinamik yang hanya kadang-kadang tersambung ke internet. Tanpa IP/N unik, tak mungkin komputer dapat saling berhubungan dan berkomunikasi. Proteksi password dapat dilakukan dengan cara-cara di bawah ini:
1.
Digital Cibernetic Immunity Cara ini memanfaatkan kemampuan computer untuk mengenali mana yang menjadi bagian dari dirinya, mana yang biasa keluar masuk system dan mana yang bukan. O/S Microsoft Windows membangun imunitas sibernetik digital dengan tiga komponen berikut, yaitu:
S/A: Sign-in Authentication | Otentikasi Tanda-masuk: user identification D/S: Digital Signature | Tandaan Angkani: file identification D/C: Digital Certificate | Sertifikat Angkani: identification approval
Satu cara digunakan utk mencegat virus dan kuda Troya dan program asing adalah FSV, file signature verification (pemeriksaan tandaan berkas), krn Windows tlh menetapkan digital signature (tandaan angkani) dgn digital certificates (sertifikat angkani) utk tiap berkas sistem. Dgn demikian O/S akan dpt menolak tiap berkas
142
tanpa signature, berkas tanpa cerificate, dan berkas dgn invalid signature (tandaan tak-berlaku) dan atau invalid certificate (sertifikat tak-berlaku).
Berikut adalah definisi dan fungsi masing-masing, dan peran mrk dlm O/S Microsoft Windows. a. Sign In Authentication Sign-in authentication adalah proses dimana sistem memvalidasi informasi sign-in | log-in | log-on peguna, dimana U/N (username; nama-peguna) dan P/W (password) dibandingkan terhadap satu daftar terotorisasi. Jika cocok, maka access control (kendali raih) dikabulkan pada peringkat sesuai dengan authority (otoritas, kewenangan) dan daftar permission (permisi, perkenan, izin) untuk peguna tersebut. Jika peguna sign-in | log-in | log-on ke satu account (rekening) pada suatu jaringan kerja, maka otentikasi dilakukan oleh server. b. Secure Password Authentication Sign-in authentication dimana tingkat security (sekuritas, pengamanan) terhadap password dijamin dalam satu cara sulit untuk dapat ditembus, atau dimana, untuk alasan sekuritas data, P/W encoded (disandikan) menggunakan digital encryption (enkripsi angkani) ketika ditulis, dan decoded
(diawasandikan) menggunakan digital decryption (dekripsi angkani) ketika dibaca. Authentication dalam bentuk U/N dan P/W diperiksa tiap kali peguna akan memasuki O/S atau subsistem, seperti penggunaan authority, permission, access control, e-mail message tranception (transepsi pesan surat-elektronik), penggunaan program tertentu, dan lain-lain.
Pemeriksaan otentikasi ini analogus mirip dengan pemeriksaan secret code (sandi rahasia) dalam misi militer dan spionase. Tanpa K/W (keyword; katakunci), seseorang tidak mungkin memasuki area yang sudah diproteksi, kecuali ia masuk secara paksa atau secara rahasia dengan melakukan pembobolan sistem pertahanan. c. Digital Signature Salah satu cara yang digunakan oleh sumber-asal berkas, pesan, atau informasi lain disandikan secara angkani, utk menanamkan identitas | ciri ke informasi. Proses penandaan mencakup pemindahbentukan informasi hingga beberapa
143
sandi rahasia dimiliki sumber ke dalam satu tag (etiket) atau label (plakat) dalam berkas, pesan, atau informasi tersandi tersebut. Pemberian D/S ini analogus yang mirip dengan pemberian KTP (kartu tanda penduduk), SIM (surat izin mengemudi), dan kartu pengenal lain kpd org; STNK (surat tanda nomor kendaraan) utk kendaraan; TDP (tanda daftar perusahaan), SUIP (surat izin usaha perdagangan), NPWP (nomor pokok wajib pajak), dan tanda pengenal lain kpd perusahaan; atau lbh sederhana lagi, seperti ticket (karcis) kereta-api, kapal-laut, atau kapal-udara; atau karcis masuk arena pertunjukan. d. File Signature Verification Proses dgn mana sistem memvalidasi informasi signature berkas, pesan, atau informasi lain disandikan secara angkani, dan membandingkannya dengan satu daftar terotorisasi. Jika cocok, maka berkas tersebut lolos pemeriksaan, untuk dieksekusi. Seperti telah diuraikan di atas, FSV analogus mirip dengan razia pemeriksan KTP, SIM, dan STNK, kartu identitas lain atau tanpa pengenal lain, dimana tanpa keterangan identitas tersebut dinyatakan ilegal.
2.
Password Protection Manager Selain dengan cara seperti di atas proteksi password dapat dilakukan dengan menggunakan perangkat lunak tertentu seperti Password Protection Manager. Para web hosting juga biasanya sudah menyediakan fitur Password Protection Manager untuk melindungi password website yang mereka kelola, yang tentu saja fitur ini akan menambah biaya bagi para pemilik website static.
Solusi password secara minimum atau maksimum berdasarkan persyaratan bisnis diputuskan Setelah membaca bagian sebelumnya, kita mengetahui bagaimana peranan password dalam menjaga keamanan data dan bagaimana cara melindungi password dari pencurian pihak lain. Cara yang dimaksud adalah Digital Cibernetic Immunity dan dengan menggunakan suatu progam seperti Password Protection Manager. Tetapi satu hal yang mungkin sepele yang harus kita ketahui, terkadang orang lain mencuri password kita dengan cara mencoba-coba combinasi angka dan huruf atau yang berhubungan dengan
profile kita sendiri. Contoh ini lebih familiar pada pencurian PIN ATM orang tertentu yang dilakukan oleh pihak-pihak yang tidak bertanggung jawab. Oleh karena itu kita harus mengambil solusi dalam pembuatan password sehingga tidak mudah untuk dilacak atau dicoba-coba oleh orang lain. Perusahaan harus membuat peraturan dalam pembuatan password, sehingga para karyawannya tidak sembarangan dalam membuat kombinasi password. Beberapa aplikasi atau perangkat lunak pada saat ini sudah banyak yang menerapkan konsep kombinasi pembuatan password dengan formula tertentu. Formula password dapat berupa: 1. Menetapkan berapa minimum panjang password yang akan dibuat. 2. Menetapkan berapa maksimum panjang password yang boleh dibuat. Hal ini tentu saja untuk menghindari pembuatan password yang terlalu panjang, sehingga bisa mempersulit pemilik password untuk mengingat password-nya sendiri. 3. Menetapkan formula password melalui penetapan kombinasi password yang harus terdiri dari huruf, angka dan symbol 4. Menetapkan umur penggunaan password, sesudah mencapai umur password, maka dilakukan penggantian password. 5. Password yang digunakan tidak boleh mengandung unsur-unsur nama pemilik password, tanggal lahir atau yang lain yang berhubungan dengan profile pemilik password. 6. Pada saat melakukan penggantian password menetapkan frekuensi berapa kali password diubah agar bisa menggunakan kembali password yang lama. 7. Password seseorang hanya diketahui oleh orang itu sendiri.Tidak ada orang lain yang berhak mengetahui password karyawan lain bahkan bagian administrator juga. Aturan ini memang sudah merupakan aturan yang umum keamanan suatu password. Kesalahan yang sering terjadi dalam perusahaan dalam penerapan etika penggunaan password adalah, menggunakan computer account (username dan password) yang bukan milik anda. Mendapatkan password tanpa diizinkan oleh pemilik account tersebut.
Pembuatan formula password yang ditentukan seperti di atas akan memperkecil penyebaran password. Memang cara mencoba-coba ini pada umumnya terjadi dalam lingkungan internal suatu instansi atau perusahaan. Kesalahan-kesalahan dan pelanggaranpelanggaran yang sering terjadi juga dalam lingkungan internal adalah:
145
a. Menggunakan computer account (username dan password) yang bukan milik anda. Mendapatkan password tandapa diizinkan oleh pemilik account. b. Menggunakan jaringan internal untuk melakukan unauthorized access atau akses ilegal ke sistem lain. c. Para karyawan secara sadar melakukan tindakan yang akan mengganggu kelancaran system komputer, terminal, peripherals atau jaringan. d. Para karyawan secara sadar menyuruh orang untuk atau menlakukan sendiri: menjalankan, meng-install suatu program yang berujuan untuk merusak sistem komputer. Hal ini termasuk melakukan penyebaran virus, worm, Trojan horse atau bentuk lainnya. e. Para karyawan secara sadar menghabiskan resource komputer. f. Menggunakan e-mail untuk mengganggu user lain, didalam maupun diluar. g. Melakukan posting si bulletin board perusahaan atau portal perusahaan bahanbahan yang bertentangan dengan hukum dan norma yang berlaku. h. Mencoba untuk mengutak-utik komunikasi elektronik yang dilakukan user lain atau membaca, mengkopi, merubah, menghapus data user lain tanpa izin secara eksplisit dari user yang bersangkutan.
2) Ketrampilan Kerja Mengidentifikasi tingkat keamanan yang dibutuhkan berdasarkan maksud bisnis dari website tersebut Mengumpulkan informasi mengenai tingkat keamanan yang dibutuhkan berdasarkan maksud bisnis dari website Mengidentifikasi tingkat keamanan yang dibutuhkan berdasarkan maksud bisnis dari website tersebut
Proteksi password untuk semua situs dibutuhkan atau bagian dari situs yang diidentifikasi Mengumpulkan informasi mengenai proteksi password. Mengidentifikasi proteksi password untuk semua situs dibutuhkan atau bagian dari situs.
146
Solusi password secara minimum atau maksimum berdasarkan persyaratan bisnis diputuskan Mengumpulkan informasi mengenai solusi password secara minimum atau maksimum berdasarkan persyaratan bisnis. Memutuskan solusi password secara minimum atau maksimum berdasarkan persyaratan bisnis.
3) Sikap Kerja Sikap kerja ditunjukkan pada saat praktek di lingkungan kerja.
Mengumpulkan informasi mengenai tingkat keamanan, proteksi password, dan solusi password secara minimum atau maksimum berdasarkan persyaratan bisnis.
Belajar mengidentifikasi proteksi password untuk semua situs dibutuhkan atau bagian dari situs dan proteksi password untuk semua situs dibutuhkan atau bagian dari situs.
Berlatih untuk memutuskan solusi password secara minimum atau maksimum berdasarkan persyaratan bisnis.
5.5.2
Menjamin keamanan web server
Pada bagian ini akan dibahas tentang bagaimana mengenal dan mendeteksi password dan web server yang tidak dikenal, tidak menyimpan interpreters (program yang menjalankan CGI) di dalam direktori cgi-bin, formulir web memeriksa data sebelum memasukkan ke server, dan memproteksi sumber jaringan yang dibagi dari gangguan-gangguan keamanan dengan persyaratan bisnis.
1) Pengetahuan Kerja Password dan Web Server Tidak Dikenal Web server merupakan service yang harus dijalankan apabila kita ingin agar website yang telah dibangun dapat diakses melalui Internet. Berikut ini adalah beberapa program web server yang banyak digunakan :

Apache (www.apache.org) IIS (www.microsoft.com) Netscape (www.netscape.com)

147
Pada saat kita mengambil keputusan untuk memasang web server sehingga website yang kita miliki dapat diakses oleh banyak orang, maka kita juga harus berani mengambil resiko, karena dengan kita memasang web server maka akan terbuka peluang bagi attacker untuk menyerang web server tersebut. Untuk mengurangi kemungkinan attacker menyerang data yang terdapat pada web server, maka sebaiknya data yang ditaruh pada web server tidaklah bersifat rahasia, namun dokumen publik. Selain itu, komputer yang berfungsi sebagai web server sebaiknya meminimalkan software-software yang terinstal, karena dengan semakin banyaknya software yang terinstal, kemungkinan terdapatnya bugs yang mengganggu sistem akan semakin besar. Selain itu kita juga harus minimalkan service-service yang terinstalasi. Sebagai contoh, jika suatu komputer hanya berfungsi sebagai web server maka beberapa service berikut dapat ditiadakan :

lpd (line printer daemon) r services (rshd, rlogin, rwhod, dan rexec) ftp finger NFS (Network File System) SMB (Server Message Block) ypbind dan ypserv amd portmap
Selain itu, setelah mengamankan web server anda, kita juga perlu memperhatikan dan mengamankan software yang terdapat dalam web server, karena software yang terdapat dalam web server juga berpengaruh pada cara kerja dan performansi dari web server. Yang akan dibicarakan di sini adalah Apache, karena Apache merupakan software web server yang paling banyak digunakan dan diminati pada saat ini, bahkan seluruh distribusi Linux telah menyertakan Apache sebagai software web servernya. Apache merupakan pengganti httpd dari National Center for Supercomputer Applications. Apache telah menyediakan mekanisme keamanan yang telah built-in. Dalam mekanisme tersebut sudah mencakup ketiga hal di bawah ini, yaitu :

Host-based network access control Kendali untuk mengkonfigurasi lokasi script CGI Kendali untuk mengkonfigurasi ulang setting anda.
148
Berikut ini adalah beberapa options yang dapat mempengaruhi keamanan web server :
ExecCGI : menspesifikasikan bahwa script CGI dapat dijalankan pada hierarki direktori ini.
FollowSymlink : membolehkan user membuat symbolic link hanya dengan meng-click pada hyperlink mereka.
Includes : menspesifikasikan bahwa Apache akan memproses server side include.
Index : memungkinkan ditampilkannya listing direktori ketika tidak ada halaman default yang ditemukan.
Apache dapat pula dikonfigurasi dengan menambahkan proteksi password dan akses kendali pada tingkat direktori dengan htpasswd. Proteksi password akan bertugas untuk mengijinkan akses terhadap web server. Pada saat pengguna memasukkan password maka proteksi password akan melakukan pengecekan atau melakukan pengendalian apakah password tersebut terdapat dalam database password. Jika memang terdapat dalam database password, maka pengguna diijinkan masuk, tetapi jika password tidak dikenal, maka kendali ini tidak akan mengijinkan pengguna untuk mengakses web server. Sistem htpasswd memberikan kendali akses pada level pemakai dan kelompok melalui tiga buah file konfigurasi, yaitu :
.htpasswd. File ini merupakan database password dan menyimpan nama user dan passwordnya. Ia menyerupai file /etc/passwd.
.htgroup. File ini merupakan file database password kelompok. Ia menyimpan informasi keanggotaan kelompok dan dalam hal ini menyerupai file /etc/group. .htgroup adalah optional, diperlukan bila ingin
mengimplementasikan kendali akses kelompok. .htaccess. File ini merupakan file akses htpasswd. Ia menyimpan aturan-aturan akses (allow, deny), lokasi file-file konfigurasi, metode autentikasi, dan sebagainya. Web server merupakan bagian yang sangat penting dalam website statik, karena web server merupakan tempat darimana website mengambil data untuk ditampilkan kepada pengunjung. Pada web server inilah bagian administrator atau pengelola website
akan menambah, membuang atau mengubah data. Oleh karena web server adalah merupakan pusat data yang akan ditampilkan maka, web server tidak boleh diakses oleh sembarang orang, dan web server harus benar-benar dijaga keamanannya. Sama halnya dengan kemampuan komputer biasa untuk mengenali mana yang menjadi bagian dari dirinya, mana yang biasa keluar masuk system dan mana yang bukan, maka web server juga sebenarnya komputer hanya spesifikasinya yag lebih tinggi. Maka web server juga mempunyai kemampuan untuk mengenal web server mana yang menajdi bagiannya dan mana yang tidak menjadi bagiannya.
Interpreters (program yang menjalankan CGI) tidak di simpan di dalam direktori cgi-bin CGI merupakan program yang menggenerate file autoconfig berdasarkan sumber alamat dari permintaan site (request) dan CGI ini juga berperan untuk menyajikan tampilan web yang dinamik dan interaktif, oleh karena itulah banyak website-website yang populer yang menggunakan program / aplikasi CGI. CGI adalah program yang tidak tergantung pada bahasa pemograman apapun yang membangun suatu spesifikasi interface gateway. Gambar di bawah ini menunjukkan bagaimana cara kerja CGI yang dijalankan oleh interpreters. Cara kerja CGI ini, konsepnya adalah, Web server akan mengambil URL yang mengatakan supaya Web server menjalankan suatu aplikasi yang disebut helloworld.cgi. Kemudian web server akan menampilkan aplikasi tersebut, menunggu sampai proses menampilkan selesai dan kemudian mengembalikan hasil (output). Kemudian web server mentransfer hasil tersebut ke web client yang me-request site tersebut.
150
Gambar 1 cara kerja CGI (Elemen Kompetensi 2 : Menjamin keamanan web server)
Dan berikut ini merupakan gambar dari bagaimana pemrosesan yang terjadi dalam server CGI :
Gambar 2 Proses dalam server CGI (Elemen Kompetensi 2 : Menjamin keamanan web server)
151
Pada gambar Pemrosesan yang terjadi pada server CGI dijelaskan: 1. Membaca variable untuk REQUEST_METHOD 2. Menentukan apakah method GET digunakan atau tidak sedang menggunakan nilai yang tersimpan dalam variable REQUEST_METHOD 3. Mengambil data yang tersimpan dalam variable QUERY_STRING, jika metode GET digunakan. 4. Membaca sandi dalam data 5. Memproses sandi dalam data. 6. Menulis tipe tampilan (Content-type) dari hasil (output) ke dalam perlengkapan hasil yang standar (standard output device/STDOUT), setelah prose benar-benar selesai. 7. Menulis hasil (output) data ke dalam STDOUT dan keluar. Kemudian gambar di bawah ini merupakan bagaimana pemrosesan dalam program CGI itu sendiri.
Gambar 3 Proses dalam program CGI (Elemen Kompetensi 2 : Menjamin keamanan web server)
CGI program ini terdapat pada permintaan HTTP (HTTP request) yang benar. Permintaan HTTP ini normalnya terdiri tiga komponen yaitu: 1. Tipe dari transfer (normalnya adalah metode GET), bagian ini digunakan untuk download file. 2. Alamat dan nama file yang akan diambil atau yang akan dieksekusi/dijalankan (dalam bagian ini adalah program cgi). 3. Versi HTTP, yaitu versi HTTP mana yang akan digunakan oleh pengguna yang mengakses website. Program CGI ini diset oleh suatu ScriptAlias directive, yang mana pengesetan ini diarahkan /cgi-bin/ ke /usr/local/apache/cgi-bin/ (%ServerRoot%/cgi-bin/). Jika Anda ingin menggnakan program CGI dari server utama maka Anda harus benar-benar bisa menjaga keamanannya. Tetapi karena CGI merupakan program yang penting dalam permintaan (request) site dan berhubungan dengan alamat data, maka sebaiknya pada saat menjalankan dan menyimpan Interpreters (program yang menjalankan CGI), maka interpreter ini jangan disimpan di direktori /cgi-bin/, karena direktori file sudah umum untuk penyimpanan interpreters program CGI. Hal ini untuk menghindarkan bahwa orang yang tidak bertanggung jawab bisa dengan mudah untuk mengetahui alamat data Anda dan mencuri data tersebut atau lebih fatal lagi mengubah data Anda menjadi data yang tidak berguna atau bahkan menjadi data yang tidak benar yang bisa mengancam perusahaan. Apabila hendak memindahkan alamat interpreters ini dari server utama ke direktori lain, maka Anda juga harus mengganti alamat fisiknya (physical path) dan disesuaikan dengan lokasi atau direktori yang akan kita buat.
Formulir Web Memeriksa Data Sebelum Memasukkan ke Server Untuk menjaga keamanan server berarti kita juga harus memperhatikan data yang akan dimasukkan ke dalam server. Data yang kita masukkan ke dalam server belum tentu terjamin keamanannya. Bisa jadi suatu data diinfeksi oleh suatu virus, worm atau malicious software lainnya yang tidak kita ketahui. Jadi pada saat Anda hendak memasukkan data ke dalam server, jangan langsung percaya bahwa data Anda tersebut sehat. Oleh karena itu, sebelum memasukkan data ke dalam server, maka terlebih dahulu data tersebut sebaiknya diperiksa oleh formulir web. Formulir web akan memeriksa data yang akan dimasukkan ke dalam server dan memastikan bahwa data tersebut aman. Jika ternyata data tersebut diperiksa telah diinfeksi oleh virus, maka formulir file akan
menemukan dan menangkap adanya file-file asing yang menempel pada data, dan data ini dinilai menjadi data yang tidak sehat. File-file asing ini biasanya dikenali melalui ekstensiekstensi file yang tidak wajar. Data tidak sehat tidak dimasukkan ke dalam server, karena jika dibiarkan akan membawa dampak yang lama kelamaan akan merusak web server Anda secara totalitas. Oleh karena itu sebaiknya Anda hati-hati dalam memasukkan data ke dalam server, tetap jalankan pemeriksaan lewat formulir web, apalagi data yang Anda masukkan tersebut berasal dari suatu media penyimpanan eksternal (seperti disket, USB) dan data berasal dari hasil download dari internet.
Sumber Jaringan yang Dibagi Diproteksi dari Gangguan Sesuai dengan Persyaratan Bisnis. Sumber jaringan yang dibagi adalah bagian yang sangat rentan terhadap gangguan kejahatan teknologi informasi. Hal ini dikarenakan bagian ini seolah-olah dipercayakan untuk publik. Tapi walaupun demikian bukan berarti bagian ini bebas digunakan untuk semua tujuan dan perlakukan. Oleh karena itu, untuk menghindari gangguan-gangguan keamanan oleh pihak-pihak tertentu, maka bagian sumber jaringan yang dibagi ini harus diproteksi dari gangguan. Proteksi untuk website statik ini tentu saja dilakukan oleh pihak perusahaan atau pelaku bisnis, yang pasti jika perusahaan tidak ingin website statik-nya menjadi bahan perlakukan tidak benar oleh pihak-pihak hackers, maka perusahaan juga harus menentukan syarat bisnis atau keputusan untuk melakukan proteksi terhadap sumber jaringan mereka. Sumber jaringan ini dapat diproteksi dengan menggunakan banyak cara tergantung dengan ancaman-ancaman yang menyerang sumber jaringan kita. Tetapi umumnya, masalah keamanan internet tidak terlepas dari malicious softawe (malware program), yaitu virus, worm, troyan horse, seerti yang telah disinggung pada bagian sebelumnya. Untuk menjaga keamanan data dari bagian ini perlu diinstall perangkat lunak antivirus. Antivirus adalah sebuah jenis perangkat lunak yang digunakan untuk mendeteksi dan menghapus virus komputer dari sistem komputer. Disebut juga Virus Protection Software. Aplikasi ini dapat menentukan apakah sebuah sistem komputer telah terinfeksi dengan sebuah virus atau tidak. Umumnya, perangkat lunak ini berjalan di latar belakang (background) dan melakukan pemindaian terhadap semua berkas yang diakses (dibuka, dimodifikasi, atau ketika disimpan). Sebagian besar antivirus bekerja dengan beberapa metode seperti di bawah ini:
154
Pendeteksian dengan menggunakan basis data virus signature (virus signature database): Cara kerja antivirus ini merupakan pendekatan yang banyak digunakan oleh antivirus tradisional, yang mencari tanda-tanda dari keberadaan dari virus dengan menggunakan sebagian kecil dari kode virus yang telah dianalisia oleh vendor antivirus, dan telah dikatalogisasi sesuai dengan jenisnya, ukurannya, daya hancurnya dan beberapa kategori lainnya. Cara ini terbilang cepat dan dapat diandalkan untuk mendeteksi virus-virus yang telah dianalisia oleh vendor antivirus, tapi tidak dapat mendeteksi virus yang baru hingga basis data virus signature yang baru diinstalasikan ke dalam sistem. Basis data virus signature ini dapat diperoleh dari vendor antivirus dan umumnya dapat diperoleh secara gratis melalui download atau melalui berlangganan (subscription).
Pendeteksian dengan melihat cara bagaimana virus bekerja: Cara kerja antivirus seperti ini merupakan pendekatan yang baru yang dipinjam dari teknologi yang diterapkan dalam Intrusion Detection System (IDS). Cara ini sering disebut juga sebagai Behavior-blocking detection. Cara ini menggunakan policy (kebijakan) yang harus diterapkan untuk mendeteksi keberadaan sebuah virus. Jika ada kelakuan perangkat lunak yang "tidak wajar" menurut policy yang diterapkan, seperti halnya perangkat lunak yang mencoba untuk mengakses address book untuk mengirimkan e-mail secara massal terhadap daftar e-mail yang berada di dalam address book tersebut (cara ini sering digunakan oleh virus untuk menularkan virus melalui e-mail), maka antivirus akan menghentikan proses yang dilakukan oleh perangkat lunak tersebut. Antivirus juga dapat mengisolasi kode-kode yang dicurigai sebagai virus hingga administrator menentukan apa yang akan dilakukan selanjutnya. Keuntungan dari cara ini adalah antivirus dapat mendeteksi adanya virus-virus baru yang belum dikenali oleh basis data virus signature. Kekurangannya, jelas karena antivirus memantau cara kerja perangkat lunak secara keseluruhan (bukan memantau berkas), maka seringnya antivirus membuat alarm palsu atau "False Alarm" (jika konfigurasi antivirus terlalu "keras"), atau bahkan mengizinkan virus untuk berkembang biak di dalam sistem (jika konfigurasi antivirus terlalu "lunak"), terjadi false positive. Beberapa produsen menyebut teknik ini sebagai heuristic scanning.
155
Dengan melihat cara kerja software Antivirus di atas, dapat dipastika bahwa software itu akan sangat berguna untuk mendukung keamanan sistem dari virus. Selain menggunakan antivirus, perusahaan juga dapat menggunakan firewall. Firewall pada saat sekarang ini sudah mudah diperoleh, bahkan sudah banyak firewall yang gratis dan dapat di download melalui internet. Firewall adalah sistem atau sekelompok sistem yang menetapkan kebijakan kendali akses antara dua jaringan. Secara prinsip, firewall dapat dianggap sebagai sepasang mekanisme, yaitu: mekanisme yang pertama adalah mekanisme yang memblok lalu lintas, yang kedua mekanisme yang mengijinkan lalu lintas jaringan. Firewall dapat digunakan untuk melindungi jaringan anda dari serangan jaringan oleh pihak luar, namun firewall tidak dapat melindungi dari serangan yang tidak melalui firewall dan serangan dari seseorang yang berada di dalam jaringan anda, serta firewall tidak dapat melindungi anda dari program-program aplikasi yang ditulis dengan buruk. Secara konseptual, terdapat dua macam firewall yaitu: 1. Network level Network level mendasarkan keputusan mereka pada alamat sumber, alamat tujuan dan port yang terdapat dalam setiap paket IP. Network level firewall sangat cepat dan sangat transparan bagi pemakai. 2. Application level. Application level firewall biasanya adalah host yang berjalan sebagai proxy server, yang tidak mengijinkan lalu lintas antar jaringan, dan melakukan logging dan auditing lalu lintas yang melaluinya. Application level firewall menyediakan laporan audit yang lebih rinci dan cenderung lebih memaksakan model keamanan yang lebih konservatif daripada network level firewall. Pada gambar di bawah ini kita dapat melihat gambar firewall itu sendiri dan posisinya dalam suatu kesatuan sistem yang terhubung ke jaringan.
156
Gambar 4 Jaringan dengan firewall (Elemen Kompetensi 2 : Menjamin Keamanan Web Server)
Dari gambar di atas dapat kita lihat bagaimana firewall berfungsi sebagai tembok atau gerbang yang mengatur keluar masuknya data dari komputer internal ke eksternal, yaitu ke internet. Seperti yang telah dikatakan sebelumnya, bahwa firewall sudah tersedia sebagai aplikasi yang gratis. Sebagai referensi untuk pembaca berikut ditampilkan jenisjenis firewall yang gratis dan komersial. 1. Firewall gratis, yaitu:
ipchains. Ipchains adalah user-space portion dari kode terbaru paket filter Linux yang diperkenalkan dalam kernel versi 2.1.102.
Falcon Project (Free Application-Level CONnection kit) adalah proyek open firewall dengan tujuan mengembangkan sistem firewall yang free, aman dan OS-independent. Falcon terdiri dari tiga modul utama yaitu proxy Falcon (ditulis dalam Perl), 3rd-party proxy (squid/qmail/BIND8) yang dimodifikasi untuk lingkungan chroot dan konsep umum untuk OS hardening. Informasi lebih lanjut silakan lihat http://falcon.naw.de/
Juniper adalah produk firewall toolkit. Ia ditujukan sebagai alat untuk membangun Internet firewall yang aman dan efektif. Dengan kata lain, Juniper didesain agar bekerja pada dual homed bastion host yang tidak memforwarrd paket-paket antara interface. Juniper
157
mengimplementasikan fasilitas proxy transparan hingga memungkinkan mesin-mesin internal untuk mengakses Internet secara transparan seolaholah mereka terhubung secara langsung ke Internet. Homepage : http://www.obtuse.com/juniper/
floppyfw adalah sebuah router dan firewall sederhana dalam sebuah floppy. Ia menggunakan kemampuan firewall dasar Linux dan memiliki sistem packaging yang sederhana. Sangat sesuai untuk masquerading dan mengamankan jaringan pada ADSL dan kabel menggunakan IP statik dan DHCP. Homepage: http://www.zelow.no/floppyfw/
T.Rex Open Source Firewall berjalan pada Linux, Solaris, dan AIX. Fitur yang ditawarkan mencakup dukungan untuk VPN (Virtual Private Network), NAT (Network Address Translation), dan aplikasi proxy tinggi, Web caching, workload balancing, content filtering, high availability, dukungan SOCKS dan masih banyak lagi. Homepage http://www.opensourcefirewall.com/
2.
Komersial firewall, yaitu:
Checkpoint Firewall-1 (www.checkpoint.com). Checkpoint Firewall-1 adalah suite produk keamanan yang telah mendukung enterprise security, access control, autentikasi, content security, NAT, Reporting Module, VPN, Intrusion Detection, High Availability, LDAP User Account Management, dan Third Party Security Device Management.
Raptor (www.axent.com). Raptor didasarkan pada arsitektur proxy based yang memonitor seluruh lalu lintas pada level aplikasi, menscan seluruh aplikasi dan protokol yang keluar dan masuk jaringan perusahaan.
XSentry (www.trustix.com). XSentry 1.1 Firewall terdiri dari XSentry Administration Client dan XSentry Firewall Server. XSentry Internet Firewall Administration Client menawarkan user interface yang unik dan baru, yang memungkinkan pemodelan grafis entitas jaringan secara cepat dan aman, dan berkomunikasi secara aman dengan XSentry Firewall Server. User interface yang unik ini meminimalkan bahaya kesalahan konfigurasi.
Jadi, jika perusahaan Anda merupakan perusahaan yang masih mulai bertumbuh, atau bahkan lebih ekstrim adalah untuk website statik pribadi / personal, Anda tidak perlu
kuatir untuk menjaga keamanan sumber jaringan yang dibagi Anda dengan program keamanan yang bagus dan tinggi, karena tools untuk menerapkan keamanan website statik itu sendiri tidak lagi mahal, seperti yang telah dijabarkan pada penjelasan di atas. Sebenarnya cara untuk menjaga keamanan sumber jaringan tidak hanya terbatas pada pengadaan antivirus dan firewall, tetapi masih banyak lagi, seperti penjagaan keamanan data yang berasal dari internal perusahaan itu sendiri. Selain itu dapat juga dilakukan dengan melakukan penjagaan keamanan password seperti yang telah dijelaskan sebelumnya. 2) Ketrampilan Kerja Password dan Web Server Tidak Dikenal Mengumpulkan informasi mengenai password dan web server tidak dikenal. Mengidentifikasi password dan web server tidak dikenal.
Interpreters (program yang menjalankan CGI) tidak di simpan di dalam direktori cgi-bin Mengumpulkan informasi mengenai proteksi password. Mengidentifikasi proteksi password untuk semua situs dibutuhkan atau bagian dari situs.
Formulir web memeriksa data sebelum memasukannya ke server Mengumpulkan informasi mengenai formulir web. Memeriksa data dengan menggunakan formulir web sebelum memasukannya ke server.
Sumber jaringan yang dibagi diproteksi dari gangguan sesuai dengan persyaratan bisnis Mengumpulkan informasi mengenai sumber jaringan yang dibagi dan gangguangangguan yang ada. Memproteksi sumber jaringan yang dibagi dari gangguan sesuai dengan persyaratan bisnis.
3) Sikap Kerja Sikap kerja ditunjukkan pada saat praktek di lingkungan kerja.
Mengumpulkan informasi mengenai password dan web server tidak dikenal, proteksi password, interpreters, dan formulir web.
Mengidentifikasi password dan web server tidak dikenal, dan proteksi password Memeriksa data dengan menggunakan formulir web sebelum memasukannya ke server dan memproteksi sumber jaringan yang dibagi dari gangguan.
160
Bab
6
DASAR-DASAR PEMBUATAN WEB STATIK DASAR
6.1 Tujuan Instruksional Umum o Siswa mampu menceritakan dan menjelaskan konsep pembuatan web dasar (web statis) o Siswa dapat mengoperasikan atau membangun web sederhana dengan bahasa pemrograman dasar HTML 6.2 Tujuan Instruksional Khusus o Siswa mengerti dan mampu menjelaskan apa yang dimaksud dengan HTML (Hypertext Markup Languange), HTTP, Internet, browser o Siswa dapat menggolongkan perintah apa saja yang temasuk pemrograman dasar/ HTML o Siswa mengerti dan mampu Situs Web dengan bahasa HTML o Siswa dapat menggolongkan perintah apa saja yang termasuk HTML o Siswa dapat menjelaskan penggunaan Web o Siswa mengerti perbedaan client server dan web server o Siswa mengerti apa yang dimaksud dengan perencanaan web o Siswa mengerti penerapan Macromedia Dreamweaver dalam desain web lanjutan o Siswa mengerti penggunaan template untuk penyamaan layout web o Siswa dapat mengelola dan membuat pemrograman web dasar dengan baik dan benar
161
6.3
Menjelaskan konsep dasar dan teknologi dari webpage HTML atau lengkapnya disebut Hypertext Markup Languange adalah bahasa
yang mengatur/ membangun fungsi-fungsi perintah untuk ditampilkan dalam halaman web. Yang bisa dimunculkan dalam tampilan web antar lain berupa teks, gambar, dan multimedia. Kombinasi dari ketiganya akan menghasilkan tampilan web yang menarik.
6.3.1
Konsep-konsep dan teknologi web HTML HTML adalah bahasa standard dalam pembuatan website. Sebuah website umumnya terdiri dari beberapa halaman. Halaman-halaman website itu adalah filefile HTML yang di dalamnya berisi perintah-perintah yang anda tulis.
HTTP HTTP singkatan dari HyperText Transfer Protocol. Adalah protokol jaringan dengan fitur-fitur Web-specific yang berjalan pada bagian teratas dari dua lapisan protokol lain, TCP dan IP.
TCP & IP TCP adalah sebuah protokol yang bertanggung jawab untuk memastikan file yang dikirim dari akhir network telah lengkap dikirimkan, berhasil pada tujuannya. IP merupakan sebuah protokol yang mengarahkan (me-routing) file dari satu host ke host lain pada jalannya untuk tujuan. HTTP menggunakan dua protokol ini untuk memastikan bahwa permintaan dan respond telah lengkap dikirimkan diantara masing-masing akhir komunikasi. HTTP menggunakan urutan Request/Response: Sebuah HTTP client membuka koneksi dan mengirim sebuah pesan permintaan pada HTTP server; server kemudian mengirimkan pesan respon, biasanya berisikan resource yang diminta. Setelah mengirimkan respon, server menutup koneksi (membuat HTTP menjadi protokol tanpa status, contoh, tidak memelihara beberapa informasi koneksi diantara transaksi).
URL
162
Singkatan dari Uniform Resource Locator adalah standar peg-alamatan (addressing) sebuah file di Internet yang dirancang khusus untuk digunakan dengan browser WWW seperti Netscape, Internet Explorer, Opera, dan lain-lain
WWW Merupakan sebuah sistem dimana informasi (teks, gambar, suara, dan lain-lain) dipresentasikan dalam bentuk hypertext dan dapat diakses oleh sebuah peraga WWW (yang sering disebut sebagai browser). Informasi di WWW pada umumnya ditulis dalam bentuk HTML (Hypertext Markup Language). Selain itu, informasi lain dapat berupa gambar (dalam format GIF, JPG, PNG), suara (dalam format AU, WAV), dan objek multimedia lainnya (seperti MIDI, Shockwave, Quicktime Movie, 3D World).
Javascript Javascript adalah bahasa pemrograman yang bila diaplikasikan ke halaman web akan membuat halaman tersebut menjadi lebih interaktif karena kemampuannya mengakses objek (object oriented). Umumnya untuk halaman web sederhana, aplikasi javascript digunakan untuk validasi form, membuat tampilan gambar yang lebih interaktif, menampilkan pesan pada status bar, dan fungsi-fungsi lainnya.
Internet Internet adalah hubungan antar jaringan dimana dalam jaringan tersebut, komputer yang terkoneksi di dalamnya mampu melakukan komunikasi. Untuk
menghubungkan koneksi internet dibutuhkan sebuah mesin yang dsebut gateway. Gateway akan menyambungkan hubungan antar jaringan dan melaksanakan terjemahan yang diperlukan, baik perangkat keras maupun perangkat lunaknya.
6.3.2
Perbedaan antara klien dan server Sistem operasi jaringan Client Server memungkinkan jaringan untuk
memusatkan fungsi dan aplikasi kepada satu atau dua dedicated file server. File server memungkinkan untuk mengakses sumber daya, dan menyediakan keamanan. Aplikasi web adalah jenis aplikasi yang menggunakan arsitektur client-server. Pada jenis arsitektur ini, program client terhubung pada sebuah server untuk informasi
yang dibutuhkan untuk melengkapi tugas-tugas yang telah diset oleh user. Ada 2 jenis client, yaitu: 1. Thin client Thin client adalah clients yang hanya berisikan sedikit dari apa yang diperlukan untuk pengalaman user, kebanyakan hanya interface. Semua logika bisnis, semua data, terkecuali yang disediakan oleh user, berada di dalam server. 2. Thick client Thick clients adalah clients yang sama, kecuali pada interface, juga berisi logika pengolahan yang diperlukan untuk tugas-tugas user yang spesifik. Client digunakan untuk aplikasi web thin client. Proram client, pada hal ini adalah browser, hanya sebuah interface yang oleh user digunakan untuk melaksanakan tugas-tugas. Sedangkan data yang diperlukan untuk dijalankan dan logika yang
menjalankan program berada di server. Logika dasarnya adalah, server menerima permintaan dari web browser dan kemudian meresponnya. Beberapa permintaan yang datang dari client disertai nama dan alamat item yang dicari computer client. Server akan menerima permintaan tersebut, memprosesnya dan kemudian merespon data yang dicari oeh client. Bila server gagal merespond, akan ditampilkan kode error yang mengindikasikan bahwa item yang dicari tidak terdapat pada server (atau mungkin akan diberikan kode error lain sesuai dengan jenis error yang terjadi).
Web Client Ketika user me-request suatu permintaan (seperti mengisi form, mencari gambar, dll), user akan melakukannya dalam browser, dan browser akan memformat permintaan tersebut menjadi suatu kode yang dapat dimengerti oleh server. Kemudian server akan memproses permintaan tersebut dan mengirimkan respond. Browser akan mengambil data yang dibutuhkan dari respond yang diberikan server dan kemudian menampilkannya untuk user.
6.3.3
Cara bagaimana bandwidth mempengaruhi transmisi data dan gambar pada layer
Bandwith adalah sarana transmisi dalam sebuah jaringan. Besarnya bandwith akan mempengaruhi seberapa cepat sebuah data atau gambar dapat ditransmisikan.
6.3.4
Software teks editor yang tersedia untuk merancang web page Penulisan perintah HTML dapat dituliskan di software yang telah tersedia dalam
komputer pada umumnya, yaitu word processor seperti Microsoft Word, Word Pad atau NotePad. Yang banyak digunakan orang sebagai media penulisan HTML adalah Notepad.
6.3.5
Keuntungan dan kerugian running dari server yang di miliki dibandingkan server provider
Dibawah ini tabel mengenai perbedaan running web dari server yang dimiliki dengan server provider.
Server Sendiri (LAN) Cakupan Akses data Cakupannya lebih kecil Akses tidak dibatasi oleh bandwih
Server Provider (Internet) Cakupan lebih luas Akses data dibatasi oleh bandwith
6.4
Mempersiapkan pekerjaan pembuatan web
Sebelum membuat web, beberapa point dibawah ini perlu diperhatikan dahulu.
6.4.1
Software teks editor dan browser sesuai dengan kebutuhan Software teks editor yang paling sederhana dan paling banyak digunakan adalah
teks editor yang telah tersedia dari program windows, yaitu Notepad. Untuk membuka program Notepad, klik Start, kemudian Program, cari Accessories, dan klik Notepad. Lebih jelasnya anda bisa lihat di gambar berikut.
165
Buka program Notepad anda dan aktifkan menu Wordwrap. Penulisan kode HTML umumnya panjang dan melebar ke samping, untuk mengatasi hal tersebut dalam menu Notepad ada fitur Wordwrap yang bila diaktifkan maka secara otomatis akan memformat baris-baris tersebut dalam ukuran window sehingga lebih mudah dibaca. Untuk mengaktifkan caranya anda klik menu Format lalu Wordwrap (lihat gambar di bawah ini).
166
6.4.2
Software beroperasi sesuai dengan standar operasi software Beberapa jenis software hanya bisa digunakan dengan standar tersendiri, biasanya
menyangkut kemampuan dari komputer yang digunakan, seperti memori komputer, prosesor, ataupun media VGA nya. Hal yang sama juga berlaku pada software pembuat web, seperti Macromedia Dreamweaver, Microsoft Frontpage. Standar yang diperlukan tergantung pada versi dari software tersebut.
6.4.3
Sketsa desain untuk web yang akan di buat Suatu disain web yang baik memiliki kesatuan disain, atau kesamaan tema dalam
halaman-halaman web nya. Hal ini sangat penting untuk diperhatikan supaya pengunjung web tidak mengalami kebingungan dalam menelurusuri halaman-halaman web anda. Kesamaan disain yang harus anda perhatikan biasanya adalah dari segi kesamaan jenis huruf, background, warna link, menu, letak menu, dan hal-hal umum lainnya. Beberapa hal yang harus diperhatikan dalam mendisain web, seperti: 1. Isi dari web tersebut 2. Link-link yang tersambung (link tersebut tidak error bila di klik) 3. Kemudahan navigasi web, jangan sampai membingungkan user 4. Besar file dari halaman web yang akan di download untuk ditampilkan di browser. Ada baiknya anda menentukan prioritas atas web anda, tentunya tergantung pada target dari web tersebut. Misalnya anda membuat web tentang promosi barang, maka anda akan cenderung lebih mementingkan disain yang semenarik mungkin untuk mendapatkan perhatian pengunjung web.
6.4.4
Data yang akan di tampilkan di web tersedia Siapkan data-data yang hendak anda tampilkan, misalnya anda ingin membuat web
tentang promosi barang, maka siapkan rancangan disain web anda, gambar-gambar yang hendak ditampilkan, warna serta gambar background dan isi tulisan dari web tersebut.
167
6.4.5
Area kerja untuk membuat dokumen web baru Tentukan lingkup atau batasan dari web anda, dalam arti jangan sampai web yang
anda buat pada akhirnya tidak jelas maksud dan tujuannya. Misalnya anda ingin membuat web tentang katalog barang perusahaan, maka fungsikan web anda seperti halnya sebuah katalog yang memberikan informasi kepada pelanggan, tidak perlu ditambahkan berbagai macam fitur yang tidak ada hubungannya yang justru akan membingungkan user.
6.5
Melakukan pembuatan dokumen web baru Secara umum, langkah-langkah persiapan untuk membuat suatu web baru adalah: 1. Merumuskan tujuan pembuatan web Berdasarkan isi/ tujuan, umumnya web dapat digolongkan menjadi beberapa jenis, yaitu : Web marketing Faktor paling penting dalam web ini adalah disain, yang harus bisa menarik pengunjung untuk mampir ke web anda. Web customer service Berfungsi sebagai media untuk melayani konsumen. Web e-commerce Sebagai media transaksi online Web berita Sebagai media informasi dan berita dimana keakuratan informasi yang disampaikan menjadi faktir paling penting. 2. Menentukan isi web Isi web yang hendak anda tampilkan tentunya tergantung pada jenis web yang hendak anda buat. 3. Menentukan target web Anda perlu membuat suatu gambaran target yang akan dituju, karena para pengakses web menggunakan browser yang berbeda, kecepatan koneksi internet yang berbeda, serta monitor dengan resolusi internet yang berbeda pula. 4. Menentukan struktur web Struktur web akan menentukan kemudahan manajemen web, struktur yang baik akan memudahkan pengelolanya untuk mengontrol web tersebut.
168
6.5.1
Proses pembuatan web sesuai dengan standar operasi aplikasi di lakukan
Ada beberapa standar aplikasi yang perlu diperhatikan untuk menjalankan sebuah web, seperti : 1. Nama domain Yang berfungsi sebagai alamat dari web tersebut. Seperti www.google.com. Nama domain ini harus melalui proses registrasi terlebih dahulu agar terdaftar di internet. 2. Web Hosting Tempat untuk meletakkan file-file web agar bisa diakses di internet. 3. Upload hasil disain web ke internet.
6.5.2
Web yang di buat tampil di layar sesuai dengan disain Untuk memastikan web yang dibuat tampil sesuai dengan disain, cara paling mudah
adalah dengan menjalankan web tersebut. Contoh paling sederhana adalah dengan menggunakan editor Notepad. Ketikkan perintah HTML sederhana seperti berikut ini, dan simpanlah file tersebut dengan ekstention .html. <HTML> <HEAD> <TITLE>Perintah Body Sederhana</TITLE> </HEAD> <BODY BGCOLOR=Blue TEXT=Black VLINK=#FF0000 LINK=Green> <B>huruf tebal</B> <I>huruf miring</I> <U>garis bawah</U> <B><I>huruf tebal dan cetak miring</B></I> </BODY> </HTML>
ALINK=RED
Untuk menampilkan web tersebut, bukalah file html anda dengan browser (contoh : Internet Explorer), hasilnya akan ditampilkan seperti berikut :
169
6.5.3
Data yang tersedia tampil di layar web
Data untuk web tersebut akan ditampilkan sebagaimana yang anda kehendaki saat menuliskan tag-tag html nya. Seperti contoh di atas, sebagaimana perintah html untuk membuat warna background menjadi biru dan tulisan menjadi kuning, maka data tersebut akan ditampilkan seperti contoh di atas. Contoh data di bawah ini dan tampilannya di halaman web : <HTML> <HEAD> <TITLE>Belajar HTML</TITLE> </HEAD> <BODY> <UL> List Hari: <BR> <L1> Monday <BR> <L1> Tuesday <BR> <L1> Wednesday <BR> <L1> Thursday <BR> <L1> Friday <BR> <L1> Saturday <BR> </UL> Modul Training <BR> <A HREF=coba.htm>LINK</A> </BODY> </HTML>
Tampilan dari perintah HTML di atas adalah:
Di bawah ini beberapa tag dasar untuk menampilkan karakter fisik HTML : Tag <FONT> <SMALL> <BIG> <STRIKE> Fungsi Untuk mengatur tampilan karakter (jenis huruf) Untuk membuat ukuran tulisan menjadi lebih kecil Untuk membuat ukuran tulisan menjadi lebih besar Untuk menampilkan coretan pada huruf (garis horizontal di tengah-tengah tulisan) <U> <B> <I> <TT> Untuk menggarisbawahi kata Untuk menebalkan kata/ tulisan Untuk mencetak miring kata/ tulisan Untuk membuat tampilan huruf di web seperti huruf pada mesin ketik
Untuk mengatur data berupa gambar, gunakan tag berikut ini : a. Align = untuk pemerataan / margin kanan atau kiri b. Width = Untuk mengatur lebar gambar
c. Border = Untuk memberi bingkai pada gambar d. Height = Untuk menentukan tinggi gambar e. Alt = Untuk memberikan text alternatif bila gambar tidak berhasil ditampilkan pada web. f. Title = Untuk memberikan keterangan tentang gambar. (Bila pointer mouse diarahkan ke gambar, maka akan muncul tulisan yang menjelaskan gambar tersebut). Dalam mendefiniskan jenis warna pada perintah HTML digunakan bilangan heksadesimal. Misalnya kode #FF0000 mewakili warna merah. Penggunaan bilangan heksadesimal dilakukan karena keterbatasan kata-kata dalam mendefinisikan jenis warna, misalnya merah muda, coklat muda. Dengan kode heksadesimal, bisa diperoleh 256 jenis warna yang berbeda. Kode warna ditulis dengan format heksa #rrggbb. Berikut ini adalah 16 kode warna dasar.
Anda bisa mengkombinasikan angka-angka untuk mendapatkan campuran warna yang diinginkan. Komposisinya adalah sebagai berikut, 2 digit pertama mewakili warna merah, 2 digit berikutnya mewakili warna hijau, dan 2 digit terakhir mewakili warna hijau.
Tabel warna dasar bilangan heksadesimal. Color Black Olive White Green Red Teal Hexadecimal #000000 #808000 #FFFFFF #008000 #FF0000 #008080 Color Blue Lime Fuchsia Maroon Gray Purple Silver Aqua Hexadecimal #0000FF #00FF00 #FF00FF #800000 #808080 #800080 #COCOCO #00FFFF
Yellow #FFFF00 Navy #000080
Dalam melakukan pengeditan dokumen HTML, ada fitur praktis yang bisa digunakan, yakni CSS. CSS atau kepanjangan dari Cascading Style Sheet adalah kumpulan atribut yang dapat digunakan untuk mengatur tampilan banyak dokumen bersamaan. Dengan menggunakan CSS kita bisa mengubah format keseluruhan dokumen
atau file-file html tanpa mengeditnya satu per satu, karena CSS dapat menjadi suatu file yang terpisah dari dokumen-dokumen lain yang terhubung dengannya. Ada 2 cara penggunaan CSS yaitu: 1. Dengan menyisipkan kode CSS langsung dengan kode HTML 2. Membuat file terpisah (dengan ekstensi .css).
6.6
Membuat Link Pengertian Link adalah sebuah teks atau gambar yang bila di-klik akan membawa anda menuju ke bagian lain dalam web. Link biasanya ditandai dengan teks warna biru bergarisbawah. Tag pembuka untuk membuat link adalah <HREF> dan tag penutupnya adalah </A>. Kode dasarnya adalah: <A HREF=Link tujuan>nama link anda</A> Contoh penggunaan, anda ingin membuat link dalam web anda yang bila diklik akan memunculkan halaman yahoo.com. <A HREF=www.yahoo.com>Klik yahoo.com</A> Ada beberapa jenis link yang bisa anda gunakan, berdasarkan lokasi tujuannya link dibedakan : Link menuju bagian lain dari halaman web anda Link menuju halaman lain dalam satu website
Karena link menuju ke web yang sama, maka tidak perlu dituliskan alamat URL web tersebut, cukup dituliskan lokasi file-nya. Ada beberapa variasi penulisan kode link tergantung pada letak file disimpan. Bila file berlokasi pada folder yang sama dengan file dari link tersebut maka cukup dituliskan nama file-nya, misalnya: href="modul1.htm" Bila file yang dituju itu berada dalam folder yang lain di bawah folder yang ditempati oleh link tersebut, maka harus dituliskan nama folder-nya. Misalnya: href="modul1/test001.htm" Bila file yang dituju itu berada dalam folder yang lain di atas folder yang ditempati oleh file dari link tersebut maka dituliskan seperti
berikut: href="../rainbow.gif" Bila file yang dituju letaknya dua tingkat di atas maka dituliskan dua kali titik dua seperti ini: href="../../rainbow2.gif" dan seterusnya 1. Link menuju ke website lain atau resource yang berbeda
2. Link yang menuju ke bagian tertentu (bookmark) 3. Link yang menuju ke suatu file yang dapat ditampilkan dalam browser, misalnya file image atau animasi 4. Link yang menuju ke suatu file tertentu yang tidak bisa ditampilkan atau dijalankan dalam browser misalnya: file program (EXE), file kompresi (ZIP), file audio (seperti MP3, RM), file video, dan lain-lain. Bila link semacam ini di-klik, akan muncul kotak dialog yang menanyakan apakah anda akan menyimpan (save) file itu dalam hardisk atau menjalankannya dengan program yang sesuai. Proses pengambilan dan penyimpanan file disebut download. Cara penulisan alamat link ini sama saja dengan cara penulisan link biasa. 5. Link yang mengarah ke alamat email. Bila link ini diklik akan membuka jendela pengiriman email dari program email yang terinstall pada komputer user (misalnya Microsoft Outlook). Pada kotak tujuan email (To:) sudah tercantum alamat email tujuan. Contoh penulisan seperti : href="mailto:adifitrah@maktoob.com" Penambahan link dimaksudkan agar pengguna dapat mencari informasi yang dibutuhkan secara cepat tanpa harus terlebih dahulu membaca keseluruhan isi. Penambahan link dapat diimplementasikan pada sekelompok kata, frase, atau gambar.
6.6.1
Link antar dokumen
Anda juga bisa membuat link dengan dokumen lain, caranya dengan mengarahkan perintah <A HREF> ke dokumen yang hendak anda sambungkan. Contoh <A
HREF=coba.htm>LINK</A>. Artinya perintah ini akan menampilkan tulisan LINK di web anda yang bisa di klik akan membawa me-link ke dokumen coba.htm. Untuk memunculkan halaman yang dituju oleh link ada 2 cara, yaitu: 1. Pemunculan pada halaman yang sama. Ini adalah cara default, artinya bila tidak dituliskan perintah apapun, maka cara pemunculan halaman tempat link akan menggantikan halaman yang saat itu sedang dibuka. 2. Pemunculan pada window (jendela) baru, artinya akan muncul window baru yang menampilkan halaman link yang di klik, sementara itu halaman yang sebelumnya masih dibuka. Untuk membuat pemunculan
174
seperti itu, anda cukup menampilkan atribut TARGET=_blank dalam isi tag <A HREF>. Contoh: <A HREF=www.yahoo.com target=_blank>link</A>
6.6.2
Perbedaan Client Side Image Mapping dan Server Side Image Mapping Ada 2 jenis mapping, yaitu: 1. Server Side Image Mapping Mapping jenis ini diwakili oleh web server, cara mapping tergantung pada software yang di-install ke web server. Dalam server side image map, ketika user meng-klik, maka browser akan mentransfer koordinat dari sumber klik tersebut (user) ke program yang dijalankan di web server. Program ini kemudian memeriksa map data dan menentukan link-nya. 2. Client Side Image Mapping Mapping jenis ini diwakili oleh web browser (mapping ditambahkan pada halaman host page). Web browser akan memproses tanpa perlu berinteraksi dengan server. Cara ini akan mengurangi beban server sehingga bisa memberikan feedback yang lebih baik pada halaman web pengunjung (host page). Perbedaan paling mendasar antara client side dan server side adalah pada client side mapping semua link dan perintah (map files) disimpan langsung di dokumen HTML. Jadi browser memproses semua pekerjaan secara lokal. Kelemahannya adalah hanya beberapa jenis browser yang mendukung pilihan ini.
6.6.3
File index. HTML pada sebuah web server di identifikasi
Untuk menempatkan web yang anda buat (web hosting), gunakan nama file index.html. Yang perlu anda perhatikan adalah selalu gunakan nama index.html untuk file awal yang hendak anda munculkan ketik web dibuka.
6.6.4
In line image dengan perbedaan bagian yang di link
Dalam membuat web, anda juga bisa menambahkan image yang anda ambil dari internet, dimana bila image tersebut di klik akan me-refer penggunanya ke web asli dari image
tersebut. Ini yang disebut sebagai In line image. Misalnya dalam web anda menambahkan icon google yang bila icon tersebut di klik akan membawa penggunanya masuk ke halaman www.google.com.
6.7
Mengorganisasikan Dokumen Dengan Menggunakan Template Template adalah dokumen yang bisa digunakan untuk membuat banyak
dokumen lain dengan layout yang sama. Dengan menggunakan template, kita dapat membuat web yang memiliki kesamaan disain. Selain itu, kita juga dengan mudah dapat mengubah disain secara keseluruhan karena dengan mengubah template, maka secara otomatis semua dokumen web yang dibuat dengan template tersebut secara otomatis ikut berubah juga. Template sangat berguna terutama bila sebuah web dikerjakan secara bersamasama dalam sebuah tim. Dengan adanya template, maka setiap halaman web yang dikerjakan oleh disainer yang berbeda akan menghasilkan tampilan web yang sama.
6.7.1
Fitur-Fitur Template Macromedia Dreamweaver menyimpan file template dengan ekstensi .dwt pada
folder Templates pada folder root dari situs lokal anda. Jika folder ini belum ada, maka Dreamweaver akan membuatnya secara otomatis. File template tidak boleh diletakkan diluar folder Templates, karena bila diletakkan di luar folder Templates, maka akan mengakibatkan error saat anda bekerja dengan templates. Saat membuat file template, anda harus mendefinisikan daerah yang hendak anda kunci (lock) dan daerah yang bisa di-edit. Daerah yang di-lock tidak dapat di-edit saat digunakan untuk membuat dokumen lain dengan template tersebut, sedangkan daerah yang dapat di-edit dapat digunakan. Untuk membuat file template, anda bisa menggunakan dokumen web yang sudah ada untuk anda simpan sebagai template. Cara menyimpan dokumen sebagai template adalah sebagai berikut : 1. Pilih file yang hendak anda jadikan template 2. Simpan file tersebut dengan memilih menu File > Save as Template
176
6.8
Menampilkan Web dan Browser Rancanglah agar web anda bisa ditampilkan oleh semua browser. Beberapa
browser mempunyai kelebihan dan kekurangan yang berbeda. Suatu halaman web yang indah di browser Internet Explorer kadang-kadang hanya tampak sebagai gambar kosong (blank) di browser lain, seperti Netscape Navigator. Oleh karena itu, ada baiknya anda mengetes web anda dengan menampilkannya di beberapa browser yang berbeda.
6.8.1
Format URL
Seperti telah dijelaskan di bagian sebelumnya, pada dasarnya semua web yang ada diinternet memiliki alamat sendiri. URL digunakan sebagai alamat suatu web di dunia internet. Format URL dapat disederhanakan sebagai berikut : Bagaimana://Siapa/Dimana/Apa atau Protokol://hostname/direktori/nama file Bagaimana Bagian ini menunjukkan bagaimana cara data dikirimkan. Dalam bahasan internet disebut sebagai protokol. Untuk aplikasi World Wide Web (WWW) digunakan protokol http. Oleh karena itu pada bagian awal URL dideklarasikan sebagai berikut: http:// Siapa Bagian ini berisi nama komputer tempat resource berada atau disebut dengan hostname. Misalkan suatu halaman web diletakkan di www.google.com, maka penambahan URL pada bagian ini menjadi : http://www.google.com Dimana Bagian ini menunjukkan lokasi yang lebih spesifik tempat menyimpan resource internet tersebut. Secara fisik bagian ini berisi nama direktori tempat penyimpanan resource yang bersangkutan. http://www.google.com/home Apa Bagian ini menunjukkan nama file yang akan digunakan. Untuk aplikasi web, file ini berisi kode-kode HTML dan teks. Contoh URL yang digunakan : http://www.google.com/home/index.html
6.8.2
Peran Dari Browser Dalam Membaca File-File Web
Dalam membuat web, anda bisa membuat web yang bisa ditampilkan disemua browser ataupun yang hanya bisa ditampilkan di beberapa browser tertentu. Beberapa fungsi atau elemen yang anda tambahkan pada saat membuat web mungkin tidak bisa ditampilkan dalam browser tertentu. Misalnya elemen layer, merupakan salah satu elemen yang hanya didukung oleh browser versi 4 ke atas, sehingga bisa pengguna membuka halaman web dengan browser versi sebelumnya, elemen ini tidak akan tampak (blank).
6.8.3
Perbedaan Browser Mempengaruhi Tampilan Dari Halaman Web Dapat Diidentifikasi Dalam Dreamweaver, anda bisa mengecek apakah halaman web yang dibuat
compatible
atau tidak dengan versi browser tertentu. Fasilitas cek target browser
melakukan pengecekan pada kode html dari halaman web. Dreamweaver menyediakan fasilitas cek browser untuk browser Netscape Navigator versi 2.0, 3.0 dan 4.0. sedangkan pengecekan browser untuk keluaran Microsoft adalah Microsoft Internet Explorer versi 2.0 hingga 5.0. Cara menjalankan cek target browser : 1. Pilih salah satu cara berikut : a. Bila ingin mengecek dokumen yang sedang anda kerjakan sekarang, simpanlah file anda untuk memastikan perubahan terakhir yang anda buat ikut di cek. b. Bilaingin mengecek suatu direktori atau situs, pilih Window > Site Files untuk membuka window site FTP, kemudian pilih folder dari direktori lokal. 2. Pilih menu File > Check Target Browsers 3. Pilih primary browser yang hendak di test 4. Dari daftar browser yang ada, pilih target browser, klik Do Check 5. Laporan target browser akan dibuka pada primary browser 6. Untuk menyimpan laporan ini, pilih menu File > Save pada browser Biasakan diri anda untuk melakukan preview halaman web yang anda buat di untuk melihat tampilan sebenarnya dari dokumen web yang anda buat.
Bab
7
DASAR-DASAR PEMBUTATAN WEB STATIK LANJUT
7.1 Tujuan Instruksional Umum o Siswa dapat menerapkan dasar-dasar pembuatan web statik pada tingkat lanjut. o Siswa dapat melakukan pembuatan web statik dengan berbagai fitur yang ada. 7.2 Tujuan Instruksional Khusus o Siswa dapat mengidentifikasi prosedur pengoperasian editor teks. o Siswa dapat mengaplikasikan fitur-fitur different level heading, paragraph, font, list, table pada dokumen web. o Siswa dapat melakukan editing sederhana pada dokumen web. o Siswa dapat menggunakan fitur-fitur tambahan untuk memformat layout halaman pada dokumen web. o Siswa mengintegrasikan dokumen web dengan obyek lain seperti grafik, animasi, audio, video, dan lain-lain.
7.3 7.3.1
Mengidentifikasi prosedur pengoperasian editor teks Prosedur pengoperasian software editor teks sesuai dengan standar operasi software diidentifikasi Untuk membuat suatu dokumen web, kita memerlukan text editor dan editor GUI
(Graphical User Interface). Text Editor Untuk membuat suatu dokumen web pada text editor, kita harus mengetik kode HTML secara manual. Dan untuk membuat dokumen HTML, tidak terbatas pada penggunaan satu text editor namun banyak jenis text editor yang dapat kita gunakan, misalnya Notepad, WordPad, Textpad, dsb.
Selain ada hal yang perlu diperhatikan, untuk menyimpan (save) dokumen HTML, kita perlu menyimpan file text dengan filename extension berupa .htm atau .html.
Berikut adalah tampilan text editor menggunakan Notepad:
Berikut adalah tampilan text editor menggunakan WordPad:
180
Berikut adalah tampilan text editor menggunakan Textpad:
Layout editor Selain menggunakan text editor untuk membuat suatu dokumen web, kita dapat pula menggunakan layout editor dimana layout editor adalah GUI (Graphical User Interface) yang merupakan program yang menyediakan navigasi visual dengan menu-menu dan icon dan menampilkan fungsi otomatisasi ketika kita mengklik suatu tombol (button). GUI editor memungkinkan kita untuk membuat halaman HTML tanpa perlu untuk mengetikkan kode HTML pada text editor. Untuk menggunakan GUI editor, kita hanya perlu mengklik icon yang memiliki fungsi yang kita inginkan lalu kode HTML akan secara otomatis di-generate oleh program. Berikut adalah beberapa contoh GUI editor, seperti: o o o o o Macromedia Dream weaver MS-FrontPage/FrontPage Express Adobe Go Live Netscape Composer Allaire Home Site
181
Berikut merupakan contoh GUI editor yang menggunakan MS-FrontPage:
182
Berikut merupakan contoh GUI editor yang menggunakan Macromedia Dreamweaver:
183
7.3.2
Pengoperasian software disesuaikan dengan standar operasi Dalam pembuatan suatu dokumen web, kita harus memperhatikan bahwa web
tersebut dapat dioperasikan atau dijalankan dalam browser manapun, dimana bila suatu web semakin dapat dijalankan pada berbagai browser maka web tersebut semakin memiliki portabilitas yang tinggi. Hinggi saat ini seperti yang kita ketahui, browser-browser yang ada sudah semakin banyak, seperti: Microsoft Internet Explorer, Mozilla Firefox, Opera, dan lain-lain. Selain itu, kita harus yakin bahwa suatu dokumen web harus mudah diakses oleh pengunjungnya. Aksesibilitas suatu website mempunyai dua karakteristik, yaitu: dari segi front-end memiliki interface yang user-friendly, hal ini meliputi grafik yang eye-catching dan struktur informasi yang baik sehingga pembaca dapat memperoleh keuntungan yang maksimum dari isi dalam website. Karakteristik lainnya, yaitu dari segi back-end, website harus mudah untuk di download oleh komputer pengunjung, kemampuan ini didasarkan pada web server dan jaringan yang digunakan.
7.4 7.4.1
Mengaplikasikan fitur-fitur different level heading, paragraph, font, list, table Fitur-fitur different level heading diidentifikasi dan diaplikasikan Teks dalam dokumen mempunyai judul topik, pada dokumen HTML judul ini
disebut heading. Heading tulisan akan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading juga dimanfaatkan untuk menunjukkan tingkat keberartian dari teks yang akan dituliskan. Ada 6 tingkat heading dalam HTML yang dinomori dari satu sampai dengan 6. Nomor satu merupakan heading yang terbesar. Setiap heading dalam dokumen harus diberi tag, tergantung pada kebutuhan/keberartian teks tersebut, jika dianggap sangat penting kita bisa menganggap sebagai heading 1 digunakan tag <H1>. Sintaks elemen heading: <Hy>teks yang menjadi heading</H>teks yang menjadi heading</Hy>, dimana y adalah nomor heading. Berikut adalah contoh untuk mendemonstrasikan berbagai level dalam heading: <HTML> <HEAD> <TITLE>Contoh Heading</TITLE> </HEAD>
<BODY> <H1> Ini heading 1</H1> <H2> Ini heading 2</H2> <H3> Ini heading 3</H3> <H4> Ini heading 4</H4> <H5> Ini heading 5</H5> <H6> Ini heading 6</H6> </BODY> </HTML>
7.4.2
Fitur-fitur paragraph diidentifikasi dan diaplikasikan Informasi yang disajikan dalam dokumen harus mengikuti kaidah-kaidah dalam
penulisan, misalnya satu pikiran utama disimpan dalam satu paragraf. Setiap paragraf harus dimulai dengan memberi tag <P>. Di akhir paragraf tidak diharuskan menuliskan </P> sebagai akhir paragraf, karena tag <P> tidak didefinisikan harus memiliki tag akhir. Setiap pergantian paragraf harus dimulai dengan tag <P> kembali. Berikut adalah contoh untuk mendemonstrasikan tag paragraf: <HTML> <HEAD> <TITLE>Contoh Penggunaan Tag Paragraf</TITLE> </HEAD> <BODY> <H3>Hanya yang bisa memahami...</H3>
185
<P ALIGN="justify">Menurut sahibul hikayat,pada suatu masa tersebutlah sebuah pulau yang dihuni semua perasaan. Mulai dari kebahagiaan,kesedihan,cinta dan semua perasaan lainnya. Semua perasaan ini merasa nyaman tinggal dipulau ini. Tapi suatu hari mendadak muncul suatu pengumuman,pulau tempat tinggal mereka akan tenggelam. Semua penghuni pulau disuruh menyiapkan dan memperbaiki perahunya lalu meninggalkan pulau itu.</P> <P ALIGN="justify">Semua perasaan mengikuti saran pengumuman. Memperbaiki perahu dan menyiapkan segala yang diperlukan,lalu bergegas meninggalkan pulau itu. Satu-satunya perasaan yang memutuskan tinggal dipulau itu adalah Cinta. Dengan kegigihan,Cinta mencoba bertahan dipulau kediamannya.</P> </BODY> </HTML>
7.4.3
Fitur-fitur font diidentifikasi dan diaplikasikan. Atribut-atribut dalam tag font, antara lain:
Atribut size=number size=+number size=-number face=face-name color=color-value color=color-name Contoh size=2 size=+1 size=-1 face=tahoma color=#EEFF00 color=red Deskripsi Mendefinisikan ukuran font. Menaikkan ukuran font. Menurunkan ukuran font. Mendefinisikan nama font. Mendefinisikan warna font. Mendefinisikan warna font.
Berikut contoh penerapan atribut-atribut dalam tag font: Font size

<HTML> <HEAD> <TITLE>Font Size</TITLE> </HEAD> <BODY> <FONT SIZE=1>Font Size 1</FONT><BR> <FONT SIZE=2>Font Size 2</FONT><BR> <FONT SIZE=3>Font Size 3</FONT><BR> <FONT SIZE=4>Font Size 4</FONT><BR> <FONT SIZE=5>Font Size 5</FONT><BR> <FONT SIZE=6>Font Size 6</FONT> </BODY> </HTML>
Font face <HTML> <HEAD> <TITLE>Font Face</TITLE> </HEAD> <BODY> <P><FONT FACE="Times">Ini font face times</FONT></P> <P><FONT FACE="Verdana">Ini font verdana</FONT></P> <P><FONT FACE="Comic Sans Ms">Ini font face comic sans ms</FONT></P> <P><FONT FACE="Microsoft Sans Serif">Ini font face microsoft sans serif</FONT></P> </BODY>
</HTML>
Font color <HTML> <HEAD> <TITLE>Font Face</TITLE> </HEAD> <BODY> <H2><FONT COLOR="Red">Ini warna merah</FONT></H2><BR> <H2><FONT COLOR="#3333FF">Ini warna biru</FONT></H2><BR> <H2><FONT COLOR="Green">Ini warna hijau</FONT></H2><BR> <H2><FONT COLOR="#FF00FF">Ini warna ungu</FONT></H2> </BODY> </HTML>
188
7.4.4
Fitur-fitur bullets, numbers dan style diidentifikasi dan diaplikasikan 7.4.4.1 Bullets & Numbers List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu, misalnya jenis-jenis list dalam HTML: Ordered List Nomor item secara default adalah angka 1,2,3,, dst sampai dengan sejumlah item dalam list tersebut. Untuk keperluan penyajian tertentu kita dapat mengubah nomor dalam ordered list dengan model angka yang lain, dengan mengisi atribut type pada tag <OL>. Selain atribut type, ada juga atribut start yang digunakan untuk mendefinisikan nomor awal yang akan digunakan pada ordered list. Jika ingin supaya list dimulai dari nomor 7, maka contoh penggunaannya sebagai berikut <OL start=7></OL>. Berikut adalah nilai-nilai yang dapat digunakan untuk mengubah penomoran dalam ordered list:
Type I i a A Arti Ditampilkan dengan angka Romawi huruf besar. Ditampilkan dengan angka Romawi huruf kecil. Ditampilkan dengan abjad huruf kecil. Ditampilkan dengan abjad huruf besar.
Berikut adalah contoh untuk mendemonstrasikan ordered list: <HTML> <HEAD> <TITLE>Ordered List</TITLE> </HEAD> <BODY> <H4>Numbered list:</H4> <OL> <LI>Apple</LI> <LI>Grape</LI> <LI>Orange</LI> </OL>
<H4>Letters list:</H4> <OL TYPE="A"> <LI>Apple</LI> <LI>Grape</LI> <LI>Orange</LI> </OL> <H4>Lowercase letters list:</H4> <OL TYPE="a"> <LI>Apple</LI> <LI>Grape</LI> <LI>Orange</LI> </OL> <H4>Roman numbers list:</H4> <OL TYPE="I"> <LI>Apple</LI> <LI>Grape</LI> <LI>Orange</LI> </OL> <H4>Lowercase Roman numbers list:</H4> <OL TYPE="i"> <LI>Apple</LI> <LI>Grape</LI> <LI>Orange</LI> </OL> </BODY> </HTML>
190
Unordered List Unordered list sering disebut sebagai bulleted list, mempunyai bullet default berupa noktah. Jenis bullet dapat diubah, berikut adalah daftar jenis bullet yang dapat digunakan untuk mengubah bullet default pada bulleted list: Disk, bentuk noktah tetapi tidak diarsir ditengahnya. Box, bentuk kotak. Untuk mengubah jenis bullet dapat didefinisikan pada atribut type pada tag <UL>, berikut adalah contoh penggunaan untuk mengubah jenis bullet menjadi kotak <UL
type=box>...</UL>. Berikut adalah contoh untuk mendemonstrasikan unordered list: <HTML>

<HEAD> <TITLE>Unordered List</TITLE> </HEAD> <BODY> <H4>Disc bullets list:</H4> <UL TYPE="disc"> <LI>Apple</LI> <LI>Grape</LI> <LI>Orange</LI> </UL> <H4>Circle bullets list:</H4> <UL TYPE="circle"> <LI>Apple</LI> <LI>Grape</LI> <LI>Orange</LI> </UL> <H4>Square bullets list:</H4> <UL TYPE="square"> <LI>Apple</LI> <LI>Grape</LI> <LI>Orange</LI> </UL> </BODY> </HTML>
192
Nested List Bullet dapat digunakan secara bersarang, dimana maksudnya di dalam list ada list lagi. Berikut adalah contoh untuk mendemonstrasikan nested list: <HTML> <HEAD> <TITLE>Nested List</TITLE> </HEAD> <BODY> <H4>Nested List:</H4> <UL> <LI>Coffee</LI> <LI>Tea</LI> <UL> <LI>Black Tea</LI> <LI>Green Tea</LI> </UL> <LI>Milk</LI> </UL> </BODY>
</HTML>
Definition List Berikut adalah contoh untuk mendemonstrasikan definiton list: <HTML> <HEAD> <TITLE>Definiton List</TITLE> </HEAD> <BODY> <H4>Definition List:</H4> <DL> <DT>Coffee</DT> <DD>Black hot drink</DD> <DT>Milk</DT> <DD>White cold drink</DD> </DL> </BODY> </HTML>
194
Tag-tag dalam list:

Tag <OL> <UL> <LI> <DL> <DT> <DD> Kegunaan Mendefinisikan ordered list. Mendefinisikan unordered list. Mendefinisikan list item. Mendefinisikan definition list. Mendefinisikan definition term. Mendefinisikan definition description.
7.4.4.2
Style dalam HTML Berikut adalah tag-tag style dalam HTML:

Tag <STYLE> <LINK> <DIV> <SPAN> <FONT> Kegunaan Mendefiniskan suatu style dalam sebuah dokumen. Mendefinisikan relasi antara dua dokumen yang terhubung. Mendefiniskan suatu divisi/bagian dalam suatu dokumen. Mendefinisikan suatu section dalam suatu dokumen. Mendefinisikan tulisan yang ingin dipakai dalam suatu dokumen. Membuat posisi suatu tulisan, gambar berada ditengah.
<CENTER>
Berikut adalah contoh penerapan style dalam dokumen HTML: Style dalam HTML <HTML> <HEAD> <TITLE>Style dalam HTML</TITLE> <STYLE>
H1{color: red} H3{color: blue} </STYLE> </HEAD> <BODY> <H1>Ini Header Level 1</H1> <H3>Ini Header Level 3</H3> </BODY> </HTML>
Link yang tidak digaris bawahi <HTML> <HEAD> <TITLE>Link yang tidak digarisbawahi</TITLE> </HEAD> <BODY> <A HREF="Halaman_dua.html" STYLE="textdecoration:none"> <H2>Ini adalah Link yang tidak digarisbawahi</H2> </A> </BODY> </HTML>
196
Link ke style sheet <HTML> <HEAD> <TITLE>Link Ke Style Sheet</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="styles.css"> </HEAD> <BODY> <H1>I am formated with a link style sheet</H1> <P>Me too!</P> </BODY> </HTML>
7.4.5 Fitur-fitur table diidentifikasi dan diaplikasikan Table digunakan untuk menyajikan data dalam bentuk kolom dan baris. Pada umumnya setiap kolom menunjukkan data yang sejenis dan setiap baris yang terdiri atas kolom-kolom yang menunjukkan kelompok data dalam kesatuan. Elemen-elemen Table:
Elemen <TABLE>...</TABLE>
Penjelasan Mendefinisikan sebuah tabel dalam HTML. Jika atribut border dituliskan, maka browser akan menampilkan
197
tabel dengan border. <CAPTION>...</CAPTION> Mendefinisikan tulisan untuk judul tabel. Posisi default dari judul adalah ditengah pada bagian paling atas tabel. Atribut ALIGN=bottom dapat digunakan untuk menempatkan judul pada bagian bawah tabel. <TR>...</TR> Menspesifikasikan sebuah baris tabel dalam tabel. Kita dapat mendefinisikan atribut untuk seluruh baris: ALIGN (Left, Center, Right) atau VALIGN (Top, Middle, Bottom). Mendefinisikan sebuah sel data tabel. Secara default teks dalam sel ini ditampilkan rata kiri, dan ditengah secara vertikal. Sel data tabel dapat berisi atribut untuk mendefinisikan karakteristik dari sel dan isinya. Mendefinisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan ditengah.
<TD>...</TD>
<TH>...</TH>
Atribut-atribut Table:
Atribut ALIGN={left | center | right} VALIGN={top | middle | bottom} COLSPAN=n ROWSPAN=n NOWRAP Keterangan Alignment horisontal untuk sel. Definisi alignment vertikal dalam sel. Jumlah n kolom sel diperlebar. Jumlah n baris sel diperbesar. Matikan wrapping dalam sel.
Berikut contoh penerapan elemen dan atribut dalam Table: <HTML> <HEAD> <TITLE>Contoh Tabel</TITLE> </HEAD> <BODY> <P ALIGN="Justify">Setiap tabel dimulai dengan sebuah tag table. Setiap baris dimulai dengan sebuah tag TR. Setiap data dimulai dengan sebuah tag TD. </P> <H4>Satu kolom:</H4> <TABLE BORDER="1"> <TR> <TD>One</TD> </TR>
</TABLE> <H4>Satu baris dan tiga kolom</H4> <TABLE BORDER="6"> <TR> <TD>One</TD> <TD>Two</TD> <TD>Three</TD> </TR> </TABLE> <H4>Satu baris dan tiga kolom</H4> <TABLE BORDER="6"> <TR> <TD ROWSPAN="2">One</TD> <TD>Two</TD> <TD>Three</TD> </TR> <TR> <TD COLSPAN="2">Four</TD> </TR> </TABLE> </BODY> </HTML>
199
7.5
Melakukan editing sederhana
7.5.1 Fitur-fitur manipulasi teks diaplikasikan. Teks dalam dokumen web dapat diformat atau dimanipulasi seperti tag-tag lainnya. Berikut adalah tag-tag yang digunakan untuk memanipulasi teks:
Tag <B> <BIG> <EM> <I> <SMALL> <STRONG> <SUB> <SUP> <INS> <DEL> <S> <STRIKE> Kegunaan Definisi teks yang ditebalkan. Definisi teks yang besar ukurannya. Definisi teks yang miring. Definisi teks yang miring- italic. Definisi teks yang kecil ukurannya. Definisi teks yang ditebalkan. Definisi teks yang menjadi subscript. Definisi teks yang menjadi superscript. Definisi teks yang disisipkan. Definisi teks yang dihapus. Definisi teks yang dihapus. Definisi teks yang dihapus.
200
<U>
Definisi teks yang digarisbawahi.
Contoh penerapan manipulasi teks: <HTML> <HEAD> <TITLE>Manipulasi Teks</TITLE> </HEAD> <BODY> <H3> <FONT COLOR="Blue"> <PRE> <B>Definisi teks yang ditebalkan.</B> <BIG>Definisi teks yang besar ukurannya.</BIG> <EM>Definisi teks yang miring.</EM> <I>Definisi teks yang miring - italic.</I> <SMALL>Definisi teks yang kecil ukurannya.</SMALL> <STRONG>Definisi teks yang ditebalkan.</STRONG> <SUB>Definisi teks yang menjadi subscript.</SUB> <SUP>Definisi teks yang menjadi superscript.</SUP> <INS>Definisi teks yang disisipkan.</INS> <DEL>Definisi teks yang dihapus.</DEL> <S>Definisi teks yang dihapus.</S> <STRIKE>Definisi teks yang dihapus.</STRIKE> <U>Definisi teks yang digarisbawahi.</U> </PRE> </FONT> </H3> </BODY> </HTML>
201
7.5.2
Fitur-fitur editing sederhana digunakan seperti format teks, bullets, background diaplikasikan Untuk melakukan editing pada suatu browser web, maka yang perlu dilakukan
adalah hanyalah menganti value dari atribut pada suatu tag. Kita sangat perlu untuk mengetahui value apa saja yang dimiliki oleh suatu atribut supaya kita dapat sering melakukan editing untuk memperindah web milik kita karena semakin suatu web memiliki tampilan yang menarik maka web tersebut semakin memiliki nilai lebih dibanding webweb lainnya. Berikut adalah contoh singkat untuk editing: Halaman web sebelum di-edit: <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR="#99FFFF"> <FONT SIZE="3" COLOR="#FF0000"> <UL> <LI>Perasaan datang dan pergi. Perasaan berubah-ubah, tapi <B>Cinta</B> bertahan dan menetap sampai selamanya.</LI> <LI><B>Cinta</B> adalah satu-satunya perasaan yang melahirkan kesanggupan untuk bertahan,untuk gigih sampai detik terakhir.</LI>
<LI>Sesudah ditempa berbagai kesulitan,mengalami suka dan duka, serta dengan berjalannya waktu,kita akhirnya bisa memahami kebesaran <B>cinta</B>. </LI> <LI><B>Cinta</B> tak menyakitkan. Jika menyakitkan pasti bukan <B>cinta</B>.</LI> </UL> </FONT> </BODY> </HTML>
Halaman web setelah di-edit: <HTML> <HEAD> <TITLE>Contoh editing</TITLE> </HEAD> <BODY BGCOLOR="#FFCCFF"> <FONT SIZE="3" COLOR="#3366FF" FACE="Comic Sans Ms"> <UL TYPE="circle"> <LI>Perasaan datang dan pergi. Perasaan berubah-ubah, tapi <B>Cinta</B> bertahan dan menetap sampai selamanya.</LI> <LI><B>Cinta</B> adalah satu-satunya perasaan yang melahirkan kesanggupan untuk bertahan,untuk gigih sampai detik terakhir.</LI> <LI>Sesudah ditempa berbagai kesulitan,mengalami suka dan duka, serta dengan berjalannya waktu,kita akhirnya bisa memahami kebesaran <B>cinta</B>. </LI> <LI><B>Cinta</B> tak menyakitkan. Jika menyakitkan pasti
203
bukan <B>cinta</B>.</LI> </UL> </FONT> </BODY> </HTML>
7.6 7.6.1
Menggunakan fitur-fitur tambahan untuk memformat layout halaman Fitur-fitur background color digunakan seperti: solid color atau nilai kode heksadesimal, background dengan sebuah file grafik, warna untuk teks dan hyperlink, diidentifikasi dan diaplikasikan Color merupakan atribut yang dapat kita tambahkan pada beberapa elemen seperti
pada tag BODY (dengan atribut BGCOLOR), FONT (dengan atribut COLOR), LINK (dengan atribut COLOR), dan lainnya. Color terbagi ke dalam tiga kategori warna primer, yaitu: Red(R), Green(G), dan Blue(B). Masing-masing color didefinisikan dalam dua digit hexadecimal number (#RRGGBB). Selain itu, untuk menyisipkan gambar grafik sebagai background dalam suatu web kita dapat menyisipkan atribut BACKGROUND pada tag BODY.
204
Hexadecimal #FF0000 #00FF00 #0000FF #000000 #FFFFFF
Color Red Green Blue Black White
Berikut contoh background dengan color: <HTML> <HEAD> <TITLE>Background yang berwarna</TITLE> <STYLE> A:link { color: #00FFFF } A:visited { color: #336600 } A:active { color: #FF0000 } A.external:link { color: #FF9900 } </STYLE> </HEAD> <BODY BGCOLOR="#66FFFF"> <H4> <FONT COLOR="#FF0066"> Ini merupakan contoh background yang diwarnai.<BR><BR> Yang selain itu, teks juga di disain berwarna.<BR><BR> <A HREF="go.html">Ini HYPERLINK yang berwarna juga. </A> </FONT> </H4> </BODY> </HTML>
205
Berikut contoh background dengan grafik: <HTML> <HEAD> <TITLE>Background dengan grafik</TITLE> </HEAD> <BODY BACKGROUND="Forever_Friends_5.jpg"> </BODY> </HTML>
7.6.2
Fitur-fitur table seperti size dan warna border, warna background, penggunaan background gambar, cell dengan warna yang berbeda-beda, diidentifikasi dan diaplikasikan Untuk memformat atau membuat suatu dokumen web yang isinya memuat tentang
table, maka tidak ada salahnya jika kita menambah kesan menarik dengan mewarnai cellcell dan border yang ada dengan warna yang berbeda. Selain itu juga dapat didukung
dengan variasi background yang berwarna atau dapat pula background dengan grafik atau gambar. Berikut adalah merupakan atribut-atribut dari table dan macam-macam value yang dapat kita isi untuk atribut-atribut dari table tersebut:
Atribut Margin-top Margin-right Margin-bottom Margin-left Padding- top Padding- right Padding- bottom Padding- left Border-top-width Border-right-width Border-bottom-width Border-left-width Border-color Border-style Border-top Border-right Border Width Height Float Clear Value [length | <percentage> | auto] [length | <percentage> | auto] [length | <percentage> | auto] [length | <percentage> | auto] [length | <percentage>] [length | <percentage>] [length | <percentage>] [length | <percentage>] [medium | thin | thick | <length>] [medium | thin | thick | <length>] [medium | thin | thick | <length>] [medium | thin | thick | <length>] [<color>] [none | dotted | dashed | solid | double | groove | ridge | inset | outset] [<border-top-width> || <border-style> || <color>] [<border-right-width> || <border-style> || <color>] [<border-width> || <border-style> || <color>] [auto | <length> | <percentage>] [auto | <length> | <percentage>] [none | left | right] [none | left | right | both]
Berikut contoh penerapannya: <HTML> <HEAD> <TITLE>Borders</TITLE> <STYLE TYPE=text/css> BODY { background-color: #CCFFCC } DIV { text-align: center; margin-bottom: .1em; padding: .5em } .thick { border-width: thick } .medium { border-width: medium } .thin { border-width: thin } .groove { border-width: groove } .inset { border-width: inset } .outset { border-width: outset } .red { border-color: red }
.blue { border-color: blue } </STYLE> </HEAD> <BODY> <DIV CLASS= thick groove>This text has a border</DIV> <DIV CLASS=medium groove>This text has a border</DIV> <DIV CLASS= thin groove>This text has a border</DIV> <P CLASS=thin red inset>A thin red line...</P> <P CLASS=medium blue outset>And a thicker blue line</P> </BODY> </HTML>
Berikut adalah jenis-jenis border yang ada: <HTML> <HEAD> <TITLE>Borders</TITLE> <STYLE TYPE=text/css> BODY { background-color: #CCFFCC } DIV { text-align: center; margin-bottom: .3em; width: 50%; position: relative; left: 25%; padding: .3em }
</STYLE> </HEAD> <BODY> <DIV STYLE=border-style: solid>Solid border</DIV> <DIV STYLE=border-style: double>Double border</DIV> <DIV STYLE=border-style: groove>Groove border</DIV> <DIV STYLE=border-style: ridge>Ridge border</DIV> <DIV STYLE=border-style: inset>Inset border</DIV> <DIV STYLE=border-style: outset>Outset border</DIV> </BODY> </HTML>
7.6.3
Fitur-fitur frame pada halaman untuk pengorganisasian informasi seperti footer, header, horizontal split, vertical split diidentifikasi dan diaplikasikan Elemen dalam HTML digunakan untuk membangun web page yang
memungkinkan penampilan beberapa web page ditampilkan dalam satu window browser. Window dalam browser dibagi menjadi beberapa windows yang disebut frame. Model ini sering digunakan untuk lebih memperjelas penyajian informasi, dengan menu sajian selalu ditampilkan. Namun penggunaan frame hanya terbatas pada browser Microsoft Internet Explorer versi 3.0 ke atas dan Netscape Navigator versi 2.0 ke atas. Sintaks: <FRAMESET BORDER=# {[ROWS|COLS]={#,[#[...]]}> <FRAME SRC=url NAME=namaFrame>
</FRAMESET> Atribut NAME merupakan atribut wajib, jika frame yang bersangkutan akan dijadikan sebagai tempat untuk menampilkan URL suatu link. Target Frame Nama frame predefined: _self, _top, _parent, _blank, sering digunakan untuk menunjukkan target penampilan dari suatu link.
Nama Frame _self _top Deskripsi Digunakan apabila target frame adalah tempat link berada. Digunakan apabila target frame adalah windows tempat frame berada. Dengan menggunakan _top sebagai target maka definisi frame yang ada pada windows browser akan hilang, diganti dengan definis frame yang baru jika ada. Target frame adalah setingkat di atas frame link berada. Akibat dari target frame _parent akan sama jika tempat frame link berada hanya satu level di bawah definisi frame windows. Target blank digunakan untuk membuka windows baru.
_parent
_blank
Berikut contoh penerapan FRAME: soal02.html <HTML> <HEAD> <TITLE>BELAJAR SOAL02</TITLE> <HEAD> <frameset rows="35%,65%" scrolling="NO"> <frame src="atas.html" name="atas" scrolling="NO" noresize> <frameset cols="15%,85%" scrolling="NO"> <frame src="button.html" name="kiri" noresize > <frame src="tengah.html" name="tengah" noresize > </frameset> </frameset> <BODY></BODY> </HTML> atas.html <HTML> <HEAD>
<TITLE>SOAL02 Header</TITLE> <HEAD> <BODY> <center><img src="02Header.gif"></center> </BODY> </HTML> button.html <HTML> <HEAD> <TITLE>Button SOAL02</TITLE> <HEAD> <BODY> <TABLE BORDER="0"> <TR><TD> <a href="tengah.html" target="tengah"><font color="#336699"> <b>Home</b></font></a></TD></TR> <TR><TD> <a href="#"><font color="#336699"> <b>Book</a></b></font></TD></TR> <TR><TD> <a href="#"><font color="#336699"> <b>About Us</a></b></font></TD></TR> <TR><TD> <a href="reg.html" target="tengah"><font color="#336699"> <b>Register</a></b></font></TD></TR> </TABLE> </BODY> </HTML> tengah.html <HTML> <HEAD> <TITLE>BELAJAR SOAL02</TITLE> <HEAD>
<BODY> <FONT COLOR="#336699"> <H3><B>Welcome To Madagaskar Book Store (dot) Com</B></H3> <PRE> Welcome to our 1th anniversary party! As the guest of honor at this 1-day celebration, every day you are invited to enjoy our Hall of Fame, Wish List Spree, and brand-new Special Deliveries. The festivities wrap up on May 24, when we'll bring you A Show of Thanks, a live concert event featuring Ricky Alamsyah, Rostan, and other all-time customer favorites.</pre> Our new Store is: <UL> <LI>Automotive</LI> <LI>Sport</LI> <LI>Health & Personal Care</LI> <LI>Flora and Founa</LI> </UL> <HR WIDTH="100%" SIZE="10" COLOR="#336699"> <CENTER>Copyrigth By Bluejack 2005</CENTER> </FONT> </BODY> </HTML>
212
7.7 7.7.1
Mengintegrasikan dokumen web dengan obyek lain seperti grafik, animasi, audio, video. dll Obyek lain seperti grafik, animasi, audio, video disisipkan ke dalam halaman web. Multimedia merupakan salah satu komponen andalan yang menyebabkan web
menjadi cepat populer. Selain informasi menjadi mudah disajikan, penyajian informasi dalam web juga menjadi sangat menarik dan dapat menjadi interaktif, tidak sekedar teks, karena dilengkapi dengan kombinasi warna dan kelengkapan media lain untuk mendukung presentasi seperti gambar atau grafik, animasi, audio, dan video. Sehingga dengan adanya hal ini, mendorong multimedia untuk diintegrasikan ke dalam dokumen web. Mengintegrasikan images, audio, graphics, dan lain-lain dengan HTML memerlukan kemampuan teknis dalam manipulasi audio dan images, mampu memahami dan mengetahui dengan format file, dan mengintegrasikan multimedia ke dalam dokumen web. Area dari spesifikasi teknis untuk penggunaan multimedia dengan browser web dan aplikasi pembantu adalah Multipurpose Internet Mail Extensions (MIME). MIME adalah spesifikasi untuk bagaimana system computer dapat mengubah informasi multimedia menggunakan standarisasi mail internet. MIME meliputi spesifikasi untuk karakter nonASCII, images, audio, video, binary files, PostScript, dan multimedia lainnya dan format
213
file binary. MIME juga memperkenankan user untuk mendefinisikan suatu tipe format dan pertukaran informasi. Spesifikasi MIME menggunakan system dari tipe message dan subtypes untuk mengidentifikais format dari message. Tipe-tipe MIME antara lain image, audio, text, video, application, multipart, dan message. Subtype MIME mengidentifikasi lebih spesifik content dari message. Tipe/Subtype MIME text/html, sebagai contoh: mengidentifikasi text file yang seharusnya diwujudkan sebagai dokumen HTML. Tipe/subtype MIME video/mpeg mengidentifikasi MPEG movie file. Web server menggunak file extension untuk menentukan tipe dan subtype MIME dari suatu file multimedia ketika dikirim dalam memberikan respon untuk request browser web. File-file menggunakan extension .html (.htm untuk pengguna PC) merupakan text/html, selain itu file-file menggunakan extension .mpeg (.mpg untuk pengguna PC) merupakan video/mpeg. Web server mengirim message permulaan dengan
mengidentifikasi dari MIME content type untuk browser. Sebagi contoh, mengirim dokumen HTML, dimana message diawal dengan Content-type: text/html.
7.7.2
Sebagian atau keseluruhan web halaman dapat disisipkan obyek lain
Berikut adalah contoh penempatan image dalam dokumen web: <HTML> <HEAD> <TITLE>Image Placement and Size Example</TITLE> </HEAD> <BODY BGColor="white"> <P> <HR>Text before <IMG Align="left" Src="stats.gif">Align="left" <BR Clear="all"> <HR>Text before <IMG Align="right" Src="stats.gif">Align="right" <BR Clear="all"> <HR>Text before <IMG Align="top" Src="stats.gif">Align="top" <BR Clear="all"> <HR>Text before <IMG Align="middle" Src="stats.gif">Align="middle" <BR Clear="all"> <HR>Text before <IMG Align="bottom" Src="stats.gif">Align="bottom"
<BR Clear="all"> <HR>Text before <IMG Width="200" Height="100" Align="middle" Src="stats.gif"> Align="middle" Width="200" Height="100" <BR Clear="all"> <HR></P> </BODY> </HTML> Format image dapat dibuat dan ditampilkan dalam berbagai format. Berikut dua style untuk tampilan images, antara lain: a. Image yang menggunakan inline image: <IMG ALIGN=bottom SRC=stats.gif> b. Image yang menggunakan tujuan dari hypertext link: <A HREF=stats.gif>Statistik</A> Berikut beberapa format image yang mungkin untuk image viewers:
BMP CUR EPS GIF HDF ICO ICON MPNT PBM PGM PIC PICT PICT PIX PNM PPM PS Microsoft Windows BitMaP file Microsoft Windows CURsor file Encapsulated PostScript CompuServe Graphics Image Format file Hierarchical Data Format file Microsoft Windows ICOn file Sun Icon and Cursor file Apple Macintosh MacPaint file Portable BitMap file Portable Grayscale Map file PIXAR PICture file Apple Macintosh QuickDraw/PICT file SoftImage PICT file Alias PIXel image file Portable aNy Map file Portable Pixel Map file PostScript
215
RAS RGB RGBa RGBA RLA RLE RPBM RPGM RPNM RPPM SYNU TGA TIFF VIFF X XBM XWD
Sun RASterfile Silicon Graphics RGB image file 4-component Silicon Graphics image file 4-component Silicon Graphics image file with generated alpha Wavefront raster image file Utah Runlength-encoded image file Raw Portable BitMap file Raw Portable Grayscale Map file Raw Portable aNy Map file Raw Portable Pixel Map file Synu image file Truevision Targa image file Tagged Image File Khoros Visualization Image File Format Stardent AVS X image file X11 Bit Map file X Window Dump image file
Seperti graphics atau images, berikut format file untuk audio dan video yang diizinkan penggunaannya:
AIF(6), AIFF AIF(6), AIFC AU or SND IA Apple/SGI Apple/SGI NeXT/Sun, -law format Illustrated audio (http://debra.dgbt.doc.ca/ia/ia.html)
MOD or NST MIDI Amiga IFF, IFF/8SVX MPEG or MPG, Amiga RealAudio sound (http://www.realaudio.com/) RA or RAM
216
SF TSP VOC WAV, WAVE
IRCAM True Speech (http://www.dspg.com/) Creative Voice RIFF WAVE
Microsoft memperluas HTML untuk menspesifikasi dokumen web pengguna sehingga memperkenankan untuk mendengarkan sound secara otomatis bersamaan ketika membuka dokumen web. Browser Internet Explorer memperkenankan elemen
BGSOUND, yang memainkan soundtrack ketika dokumen ditampilkan. Selain itu, format sound yang diakui dalam Internet Explorer adalah WAV, AU, dan MIDI. Berikut atribut BGSOUND: SRC=url of sound file LOOP=numbers of times to replay file Movie dalam web dapat memberikan kekuatan informasi visual yang lebih untuk user. Microsoft Internet Explorer memperkenankan beberapa atribut untuk penggunaan IMG untuk inline movie. Berikut atribut-atributnya: DYNSRC=url of the AVI movie LOOP=number of times to play the movie Start=mouseover|fileopen
7.7.3
Teknik-teknik manipulasi audio didemonstrasikan Berikut beberapa atribut yang digunakan dalam tag EMBED yang digunakan untuk
memanipulasi audio yang ditampilkan dalam suatu dokumen web:

Attribute SRC="filename" Values A file name with an extension associated with a MIME type assigned to be played by LiveAudio (.AU, .AIFF, .AIF, .WAV, .MIDI, or .MID). Required. The control console width in pixels. Required. The control console height in pixels. Required.
WIDTH=integer HEIGHT=integer
AUTOSTART=TRUE|FALSE If True, the sound clip plays automatically. The default is False. AUTOLOAD=TRUE|FALSE If False, the sound clip does not automatically load. The default is True.
217
STARTTIME="mm:ss" ENDTIME="mm:ss" VOLUME=percentage ALIGN="value"
The start time in minutes and seconds from the start of the clip. The default is 00:00. The end time in minutes and seconds from the start of the clip. The default is the end of the clip. Playback volume expressed as a percentage of the maximum. The default is the last previously set volume. The point at which to align the control panel with respect to adjoining text. The possible values are CENTER, BASELINE, TOP, LEFT, and RIGHT. BASELINE is the default. The controls to include on the control panel. The values can be CONSOLE, SMALLCONSOLE, PLAYBUTTON, PAUSEBUTTON, STOPBUTTON, or VOLUMELEVER. The remainder of this table describes the sets of controls associated with each of these values. The default is CONSOLE. A full set of controls: Play, Pause, Stop, and Volume. A reduced set of controls consisting of Play, Stop, and Volume. AUTOSTART defaults to True. The Play button only. The Pause button only. The Stop button. Also, the sound file unloads. The Volume control only. A combination of controls that enables you to include multiple sound clips on a page. For example, you could specify CONSOLE="MySetup" as an attribute on two <EMBED> lines on a single HTML page; then each line would use the controls defined by the other as well as its own.
CONTROLS="value"
CONSOLE SMALLCONSOLE PLAYBUTTON PAUSEBUTTON STOPBUTTON VOLUMELEVER CONSOLE="name"
Untuk memanipulasi audio yang ditampilkan pada dokumen web, kita hanya perlu menganti value (nilai) pada atribut pada tag EMBED. Sebagai contohnya: <EMBED SRC=audio.aif WIDTH=144 HEIGHT=60 AUTOSTART=false VOLUME=100 CONTROLS=console>
7.7.4 Teknik-teknik kompresi audio dan video didemonstrasikan. Untuk membuat proses saat suatu web di-load oleh browser maka diharapkan penggunaan multimedia yang tidak memakan size yang terlalu besar untuk itu perlu
dilakukan kompresi atau converting menuju file type yang memiliki size yang lebih kecil sehingga akan membuat user lebih nyaman saat melihat suatu dokumen web. Selain itu, converting dibutuhkan karena browser hanya dapat menerima multimedia dengan file type tertentu. Berikut beberapa contohnya: SmartVid oleh Intel dimana bagus untuk system operasi Windows 95 yang memperkenankan konversi antara AVI dan MOV. Sparkle: Pemiliki Mac dapat dengan mudah untuk melakukan konversi movie antara MPEG dan QuickTime MOVies dengan Sparkle.
219
DAFTAR PUSTAKA
Buku : Arensburger, Andrew. 2001. You Are Expected to Understand This. OSTG Bass, L. Clements, P. Kazman, R. 1998. Software Architecture in Practice. Addison-Wesley Connolly, Thomas and Carolyn Begg, Database System : A Practical Approach to Design, Implementation, and Management, Third Edition, 2002. Forta Ben. Teach Yourself SQL in 10 Minutes. SAMS Publishing Krug, Steve (2000) Dont Make Me Think: A Common Sense Approach to Web Usability. Que/Circle.com Library. Kurniawan, Yahya., Belajar sendiri microsoft office access 2003 : Menjadi mahir tanpa guru., Elex Media Komputindo McConnell, Jeffrey J. 1997. Coding and Documentation Standard. Nielsen, Jakob (2000) Designing Web Usability: The Practice of Simplicity. New Riders Publishing Nielsen, Jakob & Tahir, Marie (2001) Homepage Usability: 40 Web Sites Deconstructed. New Riders Publishing Rob, Peter, Semaan, Elie, Database design : development and deployment using microsoft access., McGraw-Hill Shneiderman, Ben (1998) Designing the User Interface: Strategies for Effective Human-Computer Interaction. Third Edition. Addison-Wesley Sikora, Drew. The Art of Code Documentation. Gdev.net
Online Help Microsoft Access 2003
Website : www.binusmaya.binus.ac.id www.ilmukomputer.com http://www.wikipedia.org http://www.w3schools.com/

221

Modul Junior Web Programmer

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Modul Junior Web Programmer

Uploaded by

Copyright:

Available Formats

MODUL PELATIHAN JUNIOR WEB PROGRAMMER

B A L A I P E L AT IH A N D A N P E N G E M BA N G A N T E K N O L O G I IN F O RM AS I D A N KO M U N IK AS I ( BP P T IK ) KEMENTERIAN KOMUNIKASI DAN INFORMATIKA 2013