Senin, 22 Februari 2010

Pemrograman Web

Menggabungkan Kolom pada Tabel HTML

By Didietz Ultima • Senin, 22 Februari 2010 • 0 Comments

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table dalam HTML, digunakan tag-tag <TABLE>, <TR>, dan <TD>.

<TABLE>....<TABLE>
Atribut :
  • align – Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri (left), tengah (center) atau kanan (right).
  • bgcolor – Mendefinisikan warna latar belakang.
  • border – Mendefinisikan ukuran garis tepi (border) dalam satuan pixels.
  • cellpadding – Mendefinisikan spasi
  • cellspacing – Mendefinisikan spasi antara dua cells dalam satuan pixels.
  • width – Mendefinisikan ukuran tabel dalam pixels atau persentase.
Contoh :
<TABLE align=”center” bgcolor=”blue” border=”2? cellpadding=”5? cellspacing=”2? width=”90%”>

<TR>....<TR>, untuk menentukan baris (tabel row).
Atribut :
  • align – Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri (left), tengah (center) atau kanan (right).
  • bgcolor – Mendefinisikan warna latar belakang pada baris (rows).
  • valign – Mendifinisikan perataan vertikal pada isi dari rows, yaitu perataan top, middle atau bottom.
Contoh :
<TR align=”right” bgcolor=”red” valign=”top>

<TD>....<TD>, untuk menampilkan data pada setiap sel tabel (table data).
Atribut :
  • align – Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri (left), tengah (center) atau kanan (right).
  • background – Meletakkan image pada latar belakang tabel.
  • bgcolor – Mendefinisikan warna latar belakang.
  • colspan – Menggabungkan kolom.
  • height – Mendefinisikan tinggi cells dalam pixels.
  • rowspan – Menggabugkan baris.
  • valign – Perataan vertikal yaitu perataan pada top, middle atau bottom.
  • width – Mendefinisikan ukuran tabel dalam pixels atau persentase.
Contoh :
<TD align=”right” background=”back.gif” bgcolor=”green” colspan=”3?
height=”200? nowrap rowspan=”2? valign=”bottom” width=”300?>

Struktur tag ini adalah sebagai berikut :
<TABLE>
<TR>
<TD> data baris 1 kolom 1 </TD>
<TD> data baris 1 kolom 2 </TD>
</TR>
<TR>
<TD> data baris 2 kolom 1 </TD>
<TD> data baris 2 kolom 2 </TD>
</TR>
</TABLE>

Berikut ini adalah contoh penggunaan tabel dengan beberapa kolom yang sudah dijasikan satu pada sebuah halaman website :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title>Template Desain Web</title>
</head>

<body>
<table border="1" align="center" width="584" height="359" >
 <tr>
 <!-- Gabung kolom paling atas -->
 <th width="800" height="50" colspan=3>Header</th>
 </tr>
<tr>
 <!-- Mengatur kolom kedua yang berisi tiga baris -->
 <td width="200" height="300" valign="top">Left Menu</td>
 <td width="400" height="300" valign="top">Content</td>
 <td width="200" height="300" valign="top">Right Menu</td>
 </tr>
<tr>
 <!-- Gabung kolom paling bawah -->
 <th width="800" height="30" colspan=3>Footer</th>
 </tr>
</table>
</body>
</html>

Hasilnya dapat di lihat pada tampilan gambar di bawah ini :


Pada contoh pembuatan website di atas dapat dilihat bahwa tiga kolom paling atas digabung menjadi satu dengan menggunakan sintak colspan=3, sintak ini juga digunakan untuk menggabung tiga kolom paling bawah pada tabel. Sedangkan pada kolom kedua, sintak valign="top" digunakan untuk membuat kata/kalimat ditampilkan pada cell menjadi terletak di atas bukan di tengah cell.

Frame bertumpuk secara sederhana dapat diartikan : terdapat satu atau lebih frame di dalam sebuah halaman web. Banyaknya jumlah frame, tergantung dari kebutuhan. Disebut frame bertumpuk karena list program untuk frame sebelah kanan berada di dalam list frame kiri, frame kiri berada di dalam list frame bawah, dan frame bawah sendiri berada di bawah list frame atas.
Continue Reading…

Jumat, 19 Februari 2010

Pemrograman Visual Basic

Aplikasi NetworkEast di PT. Excelcomindo Pratama Surabaya

By Didietz Ultima • Jumat, 19 Februari 2010 • 0 Comments

PT. Excelcomindo Pratama. Tbk merupakan salah satu perusahaan yang bergerak di bidang telekomunikasi, dimana perusahaan ini memiliki project yang berhubungan dengan membangun dan merawat infrastruktur yang dimiliki oleh XL. Project yang ada tersebut biasanya dikerjakan bersama Vendor yang tidak lain adalah perusahaan / instansi lain yang bekerjasama dengan pihak XL dalam suatu project. Masing-masing project memiliki nomor Acceptance Certificate (AC) yang berbeda, adapun project yang dikerjakan seperti pembangunan tower (BTS), pembuatan jaringan kabel fiber, pengadaan genset dan lain-lain.

Aplikasi NetworkEast merupakan sebuah aplikasi yang digunakan untuk mengolah data Acceptance Certificate, dimana terdapat fitur untuk memasukkan data, mengubah data, menghapus data dan mencetak data. Data yang diolah tidak hanya data Acceptance Certificate saja, namun data-data yang mendukung seperti data user, area kerja, vendor, jenis order serta fitur konversi data juga mendukung sistem informasi pada aplikasi ini.

Dengan adanya aplikasi NetworkEast, diharapkan pengguna program dapat mengolah data Acceptance Certificate dengan mudah dan efisien serta dapat mengatasi masalah-masalah dalam mengolah sistem informasi yang ada pada XL.

Program ini saya buat menggunakan Visual Basic 2005 dengan database SQL Server 2005.
File aplikasinya bisa di download disini.
Continue Reading…

Kamis, 18 Februari 2010

Pemrograman Web

Membuat Frame Bertumpuk (Nested Frames)

By Didietz Ultima • Kamis, 18 Februari 2010 • 0 Comments

Kegunaan frame biasanya digunakan untuk membuat suatu halaman yang interaktif di dalam dokumen HTML. Dengan frame kita dapat menampilkan lebih dari satu halaman web dalam halaman browser yang sama. Setiap dokumen HTML dapat ditampilkan di dalam frame dan setiap frame adalah bebas antara satu dengan yang lain. Berikut cara membuat frame pada website.

Tag Frame :
<frameset>..........</frameset> = Mendefinisikan frameset.
<frameset rows>.....</frameset> = Frame baris Untuk mengatur tinggi baris frame. Ukuran dalam pixel atau %.
<frameset cols>.....</frameset> = Frame kolom Untuk mengatur lebar kolom frame. Ukuran dalam pixel atau %.
<frame>.....</frame> = Mendefinisikan jendela (sub) frame.
<noframe>.....</noframe> = Mendefinisikan browser yang tidak mendukung frame.
<iframe>.......</iframe> = Mendefinisikan inline (sub) frame.
Src = Berisi URL yang menjadi sumber dari frame.
Name = Nama yang digunakan untuk tujuan/target link.
Scrolling = Menentukan apakah frame bisa digulung atau tidak. Diisi dengan Yes/No/Auto.
Marginwidth = Jarak antara tepi kiri/kanan frame dengan tulisandalam frame (satuan pixel).
Noresize = Mencegah pengguna untuk mengubah ukuran dari frame.
Border = Mengubah ketebalan pembatas frame.
BorderColor = Memberikan warna pada pembatas frame.
FrameBorder = Pembatas frame. Dapat dihilangkan dengan memberi nilai NO.

Berikut ini adalah contoh penggunaan frame pada website :

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transition//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Demo Frame</title>
</head><frameset rows="10%, *"><!-frame atas -->
<frame src="Link 2.html" name="top" id="top" /> <frameset rows="90%, *"> <frameset cols="20%, *"> <!-frame kiri -->
<frame src="Link 1.html" name="left" id="left" /> <frameset cols="80%, *"> <!-frame tengah -->
<frame src="Link 4.html" name="main" id="main" /> <!-frame kanan -->
<frame src="Link 3.html" name="right" id="right" /> <!-- Ini ditampilkan jika browser tidak support frame -->
<noframes>
Browser Tidak Suport Frame
</noframes> </frameset> </frameset> <!-frame bawah -->
<frame src="Link 2.html" name="bottom" id="bottom" /> </frameset></frameset></html>

Hasilnya dapat di lihat pada tampilan gambar di bawah ini :


Pada contoh pembuatan website di atas dapat dilihat adanya penggunaan Frameset Horisontal (<frameset rows="10%, *">) yang ada di bagian atas dan bawah, Frameset Vertikal (<frameset cols="20%, *">) yang ada pada bagian kanan dan kiri, serta Noframes (<noframes> Browser Tidak Suport Frame </noframes>) yang muncul jika halaman web yang ditampilkan tidak ada.

Frame bertumpuk secara sederhana dapat diartikan : terdapat satu atau lebih frame di dalam sebuah halaman web. Banyaknya jumlah frame, tergantung dari kebutuhan. Disebut frame bertumpuk karena list program untuk frame sebelah kanan berada di dalam list frame kiri, frame kiri berada di dalam list frame bawah, dan frame bawah sendiri berada di bawah list frame atas.

((Frame Kanan --> Frame Kiri) --> Frame Bawah) --> Frame Atas

Biasanya, nested frames digunakan untuk membuat halaman web yang menggunakan banyak frame. Frame luar, biasanya digunakan untuk mendefinisikan frame agar tidak terpotong oleh frame lain, seperti frame atas dan frame bawah. Sedangkan frame dalam, digunakan untuk mendefinisikan frame yang terpotong oleh frame lain, seperti frame kiri dan frame kanan.

<noframes>) yang muncul jika halaman web yang ditampilkan tidak ada.

Continue Reading…