modul junior web programmer

Modul Junior Web Programmer 1

MODUL PELATIHAN JUNIOR WEB PROGRAMMER

BALAI PELATIHAN DAN PENGEMBANGAN TEKNOLOGI INFORMASI DAN KOMUNIKASI (BPPTIK)

KEMENTERIAN KOMUNIKASI DAN INFORMATIKA 2013


DAFTAR ISI KOMPETENSI ......................................................................................... ERROR! BOOKMARK NOT DEFINED.

KODE PROGRAM ......................................................................................................................................... 4

1.1 TUJUAN INSTRUKSIONAL UMUM ................................................................................................................. 4 1.2 TUJUAN INSTRUKSIONAL KHUSUS ................................................................................................................ 4 1.3 URAIAN SINGKAT MATERI .......................................................................................................................... 5 1.4 BEBERAPA PENGERTIAN DALAM UNIT KOMPETENSI INI : .................................................................................. 5 1.5 INFORMASI MASING-MASING ELEMEN KOMPETENSI ........................................................................................ 5

APLIKASI BASIS DATA ................................................................................................................................ 32

2.1 TUJUAN INSTRUKSIONAL UMUM ............................................................................................................... 32 2.2 TUJUAN INSTRUKSIONAL KHUSUS .............................................................................................................. 32 2.3 SEKILAS TENTANG BASIS DATA.................................................................................................................. 33 2.4 TABEL .................................................................................................................................................. 33 2.5 VIEW ................................................................................................................................................... 42 2.5 FORM .................................................................................................................................................. 50 2.6 REPORT ................................................................................................................................................ 57 2.7 MODUL ................................................................................................................................................ 63

DASAR-DASAR BASIS DATA ....................................................................................................................... 71

3.1 TUJUAN INSTRUKSIONAL UMUM ............................................................................................................... 71 3.2 TUJUAN INSTRUKSIONAL KHUSUS .............................................................................................................. 71 3.3 SEKILAS TENTANG FILE-BASED SYSTEM. ...................................................................................................... 72 3.4 DBMS (DATABASE MANAGEMENT SYSTEM) ............................................................................................... 72 3.5 SEKILAS TENTANG PEMODELAN DATA ........................................................................................................ 75 3.6 DATABASE APPLICATION LIFECYCLE. ........................................................................................................... 75 3.7 NORMALISASI ........................................................................................................................................ 86 3.8 ENTITY RELATIONSHIP DIAGRAM (ERD) ...................................................................................................... 89 3.9 FAKTOR KESUKSESAN RANCANGAN DATABASE. ............................................................................................ 96 3.10 KAMUS DATA ........................................................................................................................................ 96 3.11 IMPLEMENTASI DENGAN TOOLS ................................................................................................................ 97 3.12 MEKANISME BACKUP DAN RESTORE DATABASE. ......................................................................................... 104 3.13 MONITOR DAN TUNNING SISTEM OPERASIONAL......................................................................................... 106

DOKUMEN HTML .................................................................................................................................... 108

4.1 TUJUAN INSTRUKSIONAL UMUM ............................................................................................................. 108 4.2 TUJUAN INSTRUKSIONAL KHUSUS ............................................................................................................ 108 4.3 SEKILAS TENTANG HTML ...................................................................................................................... 108 4.4 SEKILAS TENTANG PEMBUATAN DOKUMEN DENGAN HTML ......................................................................... 109 4.5 BENTUK UMUM HTML ......................................................................................................................... 110 4.6 PEMFORMATAN TEKS ............................................................................................................................ 113 4.7 LIST HTML ......................................................................................................................................... 118 4.8 IMAGE HTML ..................................................................................................................................... 122 4.9 TABEL HTML ...................................................................................................................................... 123 4.10 LINK HTML ........................................................................................................................................ 129

KEAMANAN WEB STATIK ........................................................................................................................ 132

5.1 TUJUAN INSTRUKSIONAL UMUM ............................................................................................................. 132 5.2 TUJUAN INSTRUKSIONAL KHUSUS ............................................................................................................ 132 5.3 URAIAN SINGKAT MATERI ...................................................................................................................... 133 5.4 BEBERAPA PENGERTIAN DALAM UNIT KOMPETENSI INI : .............................................................................. 133 5.5 INFORMASI MASING-MASING ELEMEN KOMPETENSI: ................................................................................... 133

DASAR-DASAR PEMBUATAN WEB STATIK DASAR ................................................................................... 161

6.1 TUJUAN INSTRUKSIONAL UMUM ............................................................................................................. 161


6.2 TUJUAN INSTRUKSIONAL KHUSUS ............................................................................................................ 161 6.3 MENJELASKAN KONSEP DASAR DAN TEKNOLOGI DARI WEBPAGE ..................................................................... 162 6.4 MEMPERSIAPKAN PEKERJAAN PEMBUATAN WEB ......................................................................................... 165 6.5 MELAKUKAN PEMBUATAN DOKUMEN WEB BARU ........................................................................................ 168 6.6 MEMBUAT LINK ................................................................................................................................... 173 6.7 MENGORGANISASIKAN DOKUMEN DENGAN MENGGUNAKAN TEMPLATE ........................................................ 176 6.8 MENAMPILKAN WEB DAN BROWSER ........................................................................................................ 177

DASAR-DASAR PEMBUTATAN WEB STATIK LANJUT ................................................................................ 179

7.1 TUJUAN INSTRUKSIONAL UMUM ............................................................................................................. 179 7.2 TUJUAN INSTRUKSIONAL KHUSUS ............................................................................................................ 179 7.3 MENGIDENTIFIKASI PROSEDUR PENGOPERASIAN EDITOR TEKS ........................................................................ 179 7.4 MENGAPLIKASIKAN FITUR-FITUR DIFFERENT LEVEL HEADING, PARAGRAPH, FONT, LIST, TABLE .............................. 184 7.5 MELAKUKAN EDITING SEDERHANA........................................................................................................... 200 7.6 MENGGUNAKAN FITUR-FITUR TAMBAHAN UNTUK MEMFORMAT LAYOUT HALAMAN .......................................... 204 7.7 MENGINTEGRASIKAN DOKUMEN WEB DENGAN OBYEK LAIN SEPERTI GRAFIK, ANIMASI, AUDIO, VIDEO. DLL ............. 213

DAFTAR PUSTAKA ................................................................................................................................... 220


2.

KODE PROGRAM

1.1 Tujuan Instruksional Umum o Siswa mengetahui pentingnya dokumentasi program

o Siswa dapat membuat dokumentasi kode program yang baik dan benar

1.2 Tujuan Instruksional Khusus o Siswa mampu menjelaskan manfaat dari pembuatan dokumentasi program

o Siswa dapat memahami, mengidentifikasi data, fungsi, prosedur dan modul

dalam program

o Siswa dapat menjelaskan alur data dan algoritma pemrograman pada modul

program

o Siswa mengerti bagaimana cara membuat dokumentasi kode program

o Siswa mampu mengevaluasi sebuah dokumen kode program

o Siswa mampu melengkapi dan melakukan perbaikan pada dokumentasi kode

program

Bab

1


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 Informasi masing-masing elemen kompetensi

1.5.1 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. Programmer lain mungkin ditugaskan untuk mengembangkan proyek Anda

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


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. Anda tidak mungkin mengerjakan proyek Anda hanya dalam sekali duduk

b. 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. Perlu tahu terlebih dahulu apakah yang dimaksud dengan bilangan fibonacci tersebut.

b. 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. Pertama, Anda tentu menentukan apa yang menjadi data masukan.

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


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

comment 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


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

code 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 langkah-

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


Dokumentasi Modul


Yang perlu dijelaskan atau diikut sertakan dalam dokumentasi modul adalah

sebagai berikut:

a. Informasi programmer, seperti identitas misalnya.

b. Informasi lisensi jika perlu, misalnya hak cipta.

c. Penjelasan/deskripsi mengenai konteks atau kegunaan modul

d. Uraian tentang data-data dan referensi-referensi yang digunakan di dalam modul

e. Spesifikasi modul berupa versi, tanggal pembuatan, revisi dan sebagainya

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


/* * @(#)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 */


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.

import java.awt.*; import javax.swing.*; import javax.swing.border.*; import 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); } }


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 javax.swing.plaf.*; import javax.swing.plaf.metal.*; import javax.swing.*; import javax.swing.border.*; import java.awt.*; import java.io.*; import 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 */


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 initColors() { primary1 = super.getPrimary1(); primary2 = super.getPrimary2(); primary3 = super.getPrimary3(); secondary1 = super.getSecondary1(); secondary2 = super.getSecondary2(); secondary3 = super.getSecondary3(); black = super.getBlack(); white = super.getWhite(); }


/** * 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()); }


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 ColorUIResource parseColor(String s) { int red = 0; int green = 0; int blue = 0;


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 :

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

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); } }

/** * Load the theme name and colors from the properties * file * Items not defined in the properties file are ignored

*/

private void loadProperties(InputStream stream)

....


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


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, nama-

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


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 Assignment

o Perulangan (Looping )


o Seleksi atau kondisional ( Selection /Conditional )

b. Bagian Public dan Private di dalam Class

c. Implementasi

d. Algoritma jika dibutuhkan

e. Informasi-informasi lain yang dianggap perlu.

Perhatikan contoh berikut!

/** * Build menu bar according to the selected theme */ protected void buildMenus() { menuBar = new JMenuBar();


Dari contoh ini, Anda dapat melihat penjelasan pada setiap pernyataan-pernyataan

yang dianggap penting. Misalnya:

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); }

// 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 pernyataan-

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

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:

// 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; }


a. Bilangan bulat (integer, long, short, dsb)

b. Bilangan riil (decimal, single, float, double, dsb)

c. Bilangan Logika (boolean)

d. Karakter (char)

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


/* * 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(); } } }


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


1.5.4 Mengevaluasi Dokumen Kode Program


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.


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:


a. Semua modul harus diberi informasi tentang penulis dan versi / tanggal agar dapat

diketahui proses perkembangan atau revisi-nya

b. Setiap fungsi/prosedur harus dijelaskan secara rinci alur data dan prosesnya

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

o Fungsi/Prosedur /** nama fungsi atau prosedur **/ /** penjelasan mengenai fungsi atau prosedur * ..... */

e. Dan sebagainya

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 FUNGSI

TERMINATOR Permulaan/akhir program

GARIS ALIR (FLOW LINE) Arah aliran program

PREPARATION Proses inisialisasi/pemberian harga awal


PROSES Proses perhitungan/proses pengolahan data

DATA I/O Proses input/output data, parameter, informasi

PREDEFINED

PROCESS (SUB PROGRAM)

Permulaan sub program/proses menjalankan sub program

DECISION

Perbandingan pernyataan, penyeleksian data yang

memberikan pilihan untuk langkah selanjutnya

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 2 3 4 … N

Condition Stub

Condition Entry

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


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 2 3 4 5 6 7

a. Apakah 0< jumlah barang yang dibeli < 6? b. Apakah persediaan mencukupi? c. Apakah harga satuan > 0?

Y Y Y

Y Y T

Y T Y

Y T T

T Y T

T T Y

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

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

penjelasan di dalam dokumen Anda. Pastikan bahasa yang digunakan memenuhi beberapa

kriteria berikut:

a. Jelas, artinya menyampaikan arti dan maksud yang ingin disampaikan.

b. Mudah, artinya penyampaiannya mudah dipahami, tepat dan tidak bertele-tele.

c. Lengkap, artinya semua penjelasan sudah mencakup keseluruhan kode program.

Pada tahap inilah, Anda harus memperbaiki dan memastikan dokumen Anda telah benar-

benar 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


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


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

Bab

2


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 Keterangan

Text 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 Berguna untuk menyimpan data berbentuk tanggal dan jam.

AutoNumber 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 constrain-

constrain 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, ...])


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


ALTER TABLE siswa ADD CONSTRAINT pk_siswa PRIMARY KEY(id_siswa)


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)


Check Constraint berfungsi untuk membatasi penyisipan data pada suatu tabel agar

memenuhi kriteria-kriteria yang ditetapkan. Untuk membuat Constraint dilakukan dengan


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


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.


Gambar 2. WizardP

Gambar 3. Wizard Pembuatan View (Memasukan nama view)

Pembuatan View (Memilih tabel dan Field)


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.

http://id.wikipedia.org/w/index.php?title=Field_basis_data&action=edit


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


SELECT * FROM SISWA WHERE nama=’Albert’


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


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


SELECT * FROM Siswa WHERE nama like ‘%Putra%’ AND alamat=’Jakarta’

Untuk melihat data siswa yang mengandung kata Putra atau tinggal di Jakarta, digunakan


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


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

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


Gambar 6. Wizard untuk Membuat Form – Memilih Tabel dan Fields

Gambar 7. Wizard untuk Membuat Form – Memilih Layout


Gambar 8. Wizard untuk Membuat Form – Memilih Style

Gambar 9. Wizard untuk Membuat Form – Memasukan Nama Form


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


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.


Gambar 13. Ubah Property Label dan Text


Gambar 14. Layar Property


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

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


Gambar 15. Layar Report Wizard - Memilih Tabel

Gambar 16. Layar Report Wizard - Memilih Group


Gambar 17. Layar Report Wizard - Memilih Sort

Gambar 18. Layar Report Wizard - Memilih Tampilan Report


Gambar 19. Layar Report Wizard - Memilih Style

Gambar 20. Layar Report Wizard - Memasukan Judul Report


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.


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.


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


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.


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


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.


Gambar 28. Property pada text di Report


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.


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.


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.

Bab

3


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


- 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


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

2. Analisa dan Pengumpulan Kebutuhan.

3. Perancangan Database.

4. Perancangan Aplikasi.

5. Prototyping (optional).

6. Implementasi.

7. Data Conversion and Loading.

8. Testing.

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


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. Deskripsi data yang digunakan / dihasilkan

2. Detail mengenai bagaiamana data digunakan/dihasilkan

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


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.


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.


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


- 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

Mengidentifikasi Multiple User View

- Manager, Supervisor, Assistant

♦ Requirement Collection and Analysis

Mengumpulkan informasi User view

Property Sales HRM

Customer Service

Payroll

Staff

Property Advertising

Property Rentals

Marketing


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


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.


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


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


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.


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 (*:*)


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.


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.


Gambar Contoh Rancangan Database Logical


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


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.


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.


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.


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


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.


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.


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.


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


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


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

Bab

4


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

Perlukah saya tersambung ke internet untuk membuat homepage?

Anda tidak perlu tersambung ke Internet ketika membuat homepage. Anda hanya

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

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


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> Teks yang berada diantara tag disebelah akan diboldkan

<blink>....</blink>

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.

<i>....</i> Teks ini akan dimiringkan.

<sub>....</sub>

Teks di dalam tag ini akan disubscriptkan.

<sup>....</sup>

Teks di dalam tag ini akan disuperscriptkan.

<u>....</u> Teks ini akan digarisbawahkan.


<cite>....</cite>

<code>....</code>

<em>....</em>

<kbd>....</kbd>

<samp>....</samp>

<strong>....</strong>

<var>....</var>

<big>....<big> <small>....</s

mall> <tt>....</tt>

Kesemua tag-tag ini mempunyai fungsi pemformatan yang tersendiri. Anda dapat mencoba tag-tag tersebut untuk membedakan fungís masing-masing tag.

Font Teks

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.


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 Hexadecimal Color Hexadecimal Black #000000 Blue #0000FF Olive #808000 Lime #00FF00 White #FFFFFF Fuchsia #FF00FF Green #008000 Maroon #800000 Red #FF0000 Gray #808080 Teal #008080 Purple #800080 Yellow #FFFF00 Silver #COCOCO Navy #000080 Aqua #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


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.

Contoh <body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#800080">

Tag <font>

Fungsi • color - untuk mewarnai semua huruf yang berada dalam area tag <font>

Contoh <font color="#000000">

Tag <table>

Fungsi • bgcolor - warna latar belakang table • bordercolor - warna untuk border.

Contoh <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 <h1…h6>, 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 Karakter Istimewa Nomor Karakter Istimewa © ® ™ & « » ˝ < > * :

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

© ® & « » " < > × ÷

© ® ™ ¡ & « » " < = × ÷

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 Arti

I Ditampilkan dengan menggunakan angka Romawi huruf besar

I Ditampilkan dengan menggunakan angka Romawi huruf Cecil

A Diubah dengan menggunakan abjad huruf kecil

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

<!--Coba_definitionlist.html <html> <body> <h4>A Definition List:</h4> <dl> <dt>Coffe</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd>

</dl> </body> </html>

4.8 Image HTML Gambar di dalam suatu web page merupakan sebuah daya tarik bagi pengunjung

suat web site. Umumnya web site dilengkapi dengan gambar-gambar untuk membuat

orang tertarik untuk melihat dan membaca isi yang ada di suatu web site. Umumnya

browser web dapat menampilkan iniline image (yaitu, gambar yang disajikan bersamaan

dengan teks), yang mempunyai format X Bitmap (XBM), GIF, atau JPEG. Format-format

gambar lain juga ada yang digabukangkan ke dalam browser web [misalnya: format PNG

(Portable Network Graphic)]. Setiap gambar akan membutuhkan waktu tambahan untuk di

download dan memperlambat penampilan suatu dokumen dalam browser. Karenanya hati-

hatilah memilih gambar dan menyertakannya ke dalam suatu dokumen.

Untuk menyertakan sebuah inline image dalam dokumen web anda digunakan tag

<img src=”namaimage.jpg/gif/jpeg/xbm”> dengan namaimage adalah URL dari file image

tersebut.

Image Adjustment

Dengan melihat contoh di bawah, kita akan dapat menyesuaikan image dengan

ukuran yang berbeda-beda.

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

kolom 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 Penjelasan <table>...</table> <caption>...</caption> <tr>...</tr> <th>...</th> <td>...</td>

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). Mendefinisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan ditengah. 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.

Atribut Tabel

Catatan: Atribut yang didefinisikan dalam <th>...</th> atau <td>...</td> akan

menggantikan alignment default yang didefiniskan dalam <tr>...</tr>

Elemen Penjelasan align={left | center | right} valign={top | middle | bottom} colspan=n rowspan=n nowrap

Alignment horisontal untuk sel Definisi alignment vertikal dalam sel 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”>.


Tag-tag Tabel: Tag Awal NN IE W3 Kegunaan <table> <th> <tr> <td> <caption> <colgroup> <col> <thead> <tbody> <tfoot>

3.0 3.0 3.0 3.0 3.0 4.0

3.0 3.0 3.0 3.0 3.0 3.0 3.0 4.0 4.0 4.0

3.2 3.2 3.2 3.0 3.2 4.0 4.0 4.0 4.0

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 Definisi suatu header tabel yang tidak akan scroll. Definisi suatu body tabel yang scroll dalam suatu header dan footer tabel yang pasti. Definisi suatu footer tabel yang tidak akan scroll (fixed)

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 : <a href =

”mailto:[email protected]”> 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>


• 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”>


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.

Bab

5


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 : a. CGI : program yang tidak tergantung pada bahasa pemograman

apapun yang membangun suatu spesifikasi interfac gateway

b. Interpreters : program yang menjalankan CGI

5.5 Informasi masing-masing elemen kompetensi:

5.5.1 Menentukan persyaratan keamanan bisnis


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

file 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 pihak-

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


• 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


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


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


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


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


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; kata-

kunci), 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


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

pelanggaran yang sering terjadi juga dalam lingkungan internal adalah:


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

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


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.


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.


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)

http://www.netscape.com/


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.


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.


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)


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

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

http://id.wikipedia.org/wiki/Perangkat_lunak

http://id.wikipedia.org/wiki/Virus_komputer


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

http://id.wikipedia.org/wiki/Basis_data

http://id.wikipedia.org/wiki/Intrusion_Detection_System

http://id.wikipedia.org/wiki/Intrusion_Detection_System

http://id.wikipedia.org/wiki/Basis_data

http://id.wikipedia.org/wiki/False_positive


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.


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

jenis 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

http://falcon.naw.de/


mengimplementasikan fasilitas proxy transparan hingga memungkinkan

mesin-mesin internal untuk mengakses Internet secara transparan seolah-

olah 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

http://www.zelow.no/floppyfw/

http://www.checkpoint.com/

http://www.axent.com/

http://www.trustix.com/


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.


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

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


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

Bab

6


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

file 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


Singkatan dari Uniform Resource Locator adalah standar peg-alamatan (address-

ing) 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) Server Provider (Internet)

Cakupan Cakupannya lebih kecil Cakupan lebih luas

Akses data Akses tidak dibatasi oleh

bandwih

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.


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


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.


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.


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” ALINK=”RED” 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>

Untuk menampilkan web tersebut, bukalah file html anda dengan browser (contoh :

Internet Explorer), hasilnya akan ditampilkan seperti berikut :


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 Fungsi

<FONT> Untuk mengatur tampilan karakter (jenis huruf)

<SMALL> Untuk membuat ukuran tulisan menjadi lebih kecil

<BIG> Untuk membuat ukuran tulisan menjadi lebih besar

<STRIKE> Untuk menampilkan coretan pada huruf (garis horizontal di

tengah-tengah tulisan)

<U> Untuk menggarisbawahi kata

<B> Untuk menebalkan kata/ tulisan

<I> Untuk mencetak miring kata/ tulisan

<TT> 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 Hexadecimal Color Hexadecimal

Black #000000 Blue #0000FF

Olive #808000 Lime #00FF00

White #FFFFFF Fuchsia #FF00FF

Green #008000 Maroon #800000

Red #FF0000 Gray #808080

Teal #008080 Purple #800080

Yellow #FFFF00 Silver #COCOCO

Navy #000080 Aqua #00FFFF

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

http://www.yahoo.com/


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:[email protected]"

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


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

http://www.yahoo.com/


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

sama 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


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

http://www.google.com/

http://www.google.com/

http://www.google.com/home

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.


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 Mengidentifikasi prosedur pengoperasian editor teks

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

Bab

7


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:


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 Macromedia Dream weaver o MS-FrontPage/FrontPage Express o Adobe Go Live o Netscape Composer o Allaire Home Site


Berikut merupakan contoh GUI editor yang menggunakan MS-FrontPage:


Berikut merupakan contoh GUI editor yang menggunakan Macromedia

Dreamweaver:


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 Mengaplikasikan fitur-fitur different level heading, paragraph, font, list, table

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


<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 Contoh Deskripsi

size=”number” size=”2” Mendefinisikan ukuran font.

size=”+number” size=”+1” Menaikkan ukuran font.

size=”-number” size=”-1” Menurunkan ukuran font.

face=”face-name” face=”tahoma” Mendefinisikan nama font.

color=”color-value” color=”#EEFF00” Mendefinisikan warna font.

color=”color-name” color=”red” 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=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>


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 Arti

I Ditampilkan dengan angka Romawi huruf besar.

i Ditampilkan dengan angka Romawi huruf kecil.

a Ditampilkan dengan abjad huruf kecil.

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


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>


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>


Tag-tag dalam list:

Tag Kegunaan

<OL> Mendefinisikan ordered list.

<UL> Mendefinisikan unordered list.

<LI> Mendefinisikan list item.

<DL> Mendefinisikan definition list.

<DT> Mendefinisikan definition term.

<DD> Mendefinisikan definition description.

7.4.4.2 Style dalam HTML Berikut adalah tag-tag style dalam HTML:

Tag Kegunaan

<STYLE> Mendefiniskan suatu style dalam sebuah dokumen.

<LINK> Mendefinisikan relasi antara dua dokumen yang terhubung.

<DIV> Mendefiniskan suatu divisi/bagian dalam suatu dokumen.

<SPAN> Mendefinisikan suatu section dalam suatu dokumen.

<FONT> Mendefinisikan tulisan yang ingin dipakai dalam suatu dokumen.

<CENTER> Membuat posisi suatu tulisan, gambar berada ditengah.

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="text-decoration:none">

<H2>Ini adalah Link yang tidak digarisbawahi</H2>

</A>

</BODY>

</HTML>


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 Penjelasan

<TABLE>...</TABLE> Mendefinisikan sebuah tabel dalam HTML. Jika atribut border dituliskan, maka browser akan menampilkan


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

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

<TH>...</TH> Mendefinisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan ditengah.

Atribut-atribut Table: Atribut Keterangan

ALIGN={left | center | right} Alignment horisontal untuk sel.

VALIGN={top | middle | bottom} Definisi alignment vertikal dalam sel.

COLSPAN=n Jumlah n kolom sel diperlebar.

ROWSPAN=n Jumlah n baris sel diperbesar.

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


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 Kegunaan

<B> Definisi teks yang ditebalkan.

<BIG> Definisi teks yang besar ukurannya.

<EM> Definisi teks yang miring.

<I> Definisi teks yang miring- italic.

<SMALL> Definisi teks yang kecil ukurannya.

<STRONG> Definisi teks yang ditebalkan.

<SUB> Definisi teks yang menjadi subscript.

<SUP> Definisi teks yang menjadi superscript.

<INS> Definisi teks yang disisipkan.

<DEL> Definisi teks yang dihapus.

<S> Definisi teks yang dihapus.

<STRIKE> Definisi teks yang dihapus.


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


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

web 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


bukan <B>cinta</B>.</LI>

</UL>

</FONT>

</BODY>

</HTML>

7.6 Menggunakan fitur-fitur tambahan untuk memformat layout halaman

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


Hexadecimal Color

#FF0000 Red

#00FF00 Green

#0000FF Blue

#000000 Black

#FFFFFF 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>


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

cell 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 Value Margin-top [length | <percentage> | auto] Margin-right [length | <percentage> | auto] Margin-bottom [length | <percentage> | auto] Margin-left [length | <percentage> | auto] Padding- top [length | <percentage>] Padding- right [length | <percentage>] Padding- bottom [length | <percentage>] Padding- left [length | <percentage>] Border-top-width [medium | thin | thick | <length>] Border-right-width [medium | thin | thick | <length>] Border-bottom-width [medium | thin | thick | <length>] Border-left-width [medium | thin | thick | <length>] Border-color [<color>] Border-style [none | dotted | dashed | solid | double | groove |

ridge | inset | outset] Border-top [<border-top-width> || <border-style> || <color>] Border-right [<border-right-width> || <border-style> || <color>] Border [<border-width> || <border-style> || <color>] Width [auto | <length> | <percentage>] Height [auto | <length> | <percentage>] Float [none | left | right] Clear [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 Deskripsi

_self Digunakan apabila target frame adalah tempat link berada.

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

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

_blank Target blank digunakan untuk membuka windows baru.

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>


7.7 Mengintegrasikan dokumen web dengan obyek lain seperti grafik, animasi, audio, video. dll

7.7.1 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 non-

ASCII, images, audio, video, binary files, PostScript, dan multimedia lainnya dan format


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 Microsoft Windows BitMaP file

CUR Microsoft Windows CURsor file

EPS Encapsulated PostScript

GIF CompuServe Graphics Image Format file

HDF Hierarchical Data Format file

ICO Microsoft Windows ICOn file

ICON Sun Icon and Cursor file

MPNT Apple Macintosh MacPaint file

PBM Portable BitMap file

PGM Portable Grayscale Map file

PIC PIXAR PICture file

PICT Apple Macintosh QuickDraw/PICT file

PICT SoftImage PICT file

PIX Alias PIXel image file

PNM Portable aNy Map file

PPM Portable Pixel Map file

PS PostScript


RAS Sun RASterfile

RGB Silicon Graphics RGB image file

RGBa 4-component Silicon Graphics image file

RGBA 4-component Silicon Graphics image file with generated alpha

RLA Wavefront raster image file

RLE Utah Runlength-encoded image file

RPBM Raw Portable BitMap file

RPGM Raw Portable Grayscale Map file

RPNM Raw Portable aNy Map file

RPPM Raw Portable Pixel Map file

SYNU Synu image file

TGA Truevision Targa image file

TIFF Tagged Image File

VIFF Khoros Visualization Image File Format

X Stardent AVS X image file

XBM X11 Bit Map file

XWD X Window Dump image file

Seperti graphics atau images, berikut format file untuk audio dan video yang

diizinkan penggunaannya:

AIF(6), AIFF Apple/SGI

AIF(6), AIFC Apple/SGI

AU or SND NeXT/Sun, µ-law format

IA Illustrated audio (http://debra.dgbt.doc.ca/ia/ia.html)

MOD or NST MIDI Amiga

IFF, IFF/8SVX Amiga

MPEG or MPG, RealAudio sound (http://www.realaudio.com/) RA or RAM

http://debra.dgbt.doc.ca/ia/ia.html

http://www.realaudio.com/


SF IRCAM

TSP True Speech (http://www.dspg.com/)

VOC Creative Voice

WAV, WAVE 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 Values

SRC="filename" 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.

WIDTH=integer The control console width in pixels. Required.

HEIGHT=integer The control console height in pixels. Required.

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.

http://www.dspg.com/


STARTTIME="mm:ss" The start time in minutes and seconds from the start of the clip. The default is 00:00.

ENDTIME="mm:ss" The end time in minutes and seconds from the start of the clip. The default is the end of the clip.

VOLUME=percentage Playback volume expressed as a percentage of the maximum. The default is the last previously set volume.

ALIGN="value" 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.

CONTROLS="value" 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.

CONSOLE A full set of controls: Play, Pause, Stop, and Volume.

SMALLCONSOLE A reduced set of controls consisting of Play, Stop, and Volume. AUTOSTART defaults to True.

PLAYBUTTON The Play button only.

PAUSEBUTTON The Pause button only.

STOPBUTTON The Stop button. Also, the sound file unloads.

VOLUMELEVER The Volume control only.

CONSOLE="name" 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.

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.


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) Don’t 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/

http://www.w3schools.com/

modul junior web programmer

Documents

bookmark not defined

unit kompetensi