Modul BSI Web Programming II Pertemuan 6

Modul BSI Web Programming II Pertemuan 6

PERTEMUAN 6

Tabel dan Modifikasi Tabel

Pembuatan Tabel

• Bukalah halaman kerja baru dengan jenis halaman Basic Pages, kemudian Anda dapat memilih tipe HTML

• Untuk membuat tabel, dapat menggunakan menu Insert -> Table, selanjutnya akan tampil jendela penentuan tabel

• Setelah memilih menu tabel, maka Dreamweaver akan menyediakan jendela khusus untuk mendesain struktur tabel.

• Kemudian tampil jendela tabel. Berikut penjelas dari bagian – bagian yang diperlukan dalam pembuatan tabel :

Row        : digunakan untuk menentukan banyaknya baris, yang perlu Anda ketahui bahwa baris merupaka bagian kolom yang terbentang dari kiri ke kanan (horisontal).
Coloumn        : digunakan untuk menentukan banyaknya kolom pada tabel yang dibuat, kolom merupakan bagian dari tabel dari atas ke bawah (vertikal).
Width        : digunakan untuk menentukan seberapa besar panjang tabel, gunakan 100 dalam persen (%) jika ingin tabel yang dibuat memenuhi halaman web. Sedangkan apabila ingin membuat tabel dengan ukuran statis (tetap), maka pengaturan lebar dapat menggunakan ukuran pixel (px), sehingga dengan ukuran ini tabel tidak akan berubah saat ada perubahan ukuran pada browser.
Border         : digunakan untuk menentukan tabel border, yang perlu Anda ketahui bahwa border merupakan garis pinggir dan garis yang membatasi antar sell (cell) data.
Cell Spadding     : digunakan untuk menentukanan jarak anara karakter teks maupun objek gambar yang ada di dalam tabel degan sisi border tabel.
Cell Spacing    : digunakan untuk menentukan lebar border tabel.

• Tentukan kolom berjumlah 2 pada bagian Columns dan baris berjumlah 3 pada bagian Rows, setelah selesai Anda dapat menutup jendela desain dengan mengklik tombol OK. Berikut adalah hasilnya:

• Setelah melalui tahap di atas, berarti sekarang Anda telah memiliki tabel yang telah siap untuk digunakan.

Cara kedua:

• Selain menggunakan tabel dari menu Insert, Anda dapat mendesain tabel secara cepat melalui ikon yang ada pada tool bar Common.

• Apabila ingin menggunakan tool bar Common, maka aktifkanlah tool bar ini melalui menu Window -> Insert. Dari menu tersebut Anda dapat menggunakan ikon Tabel ( ).

Menambahkan Kolom dan Baris

• Tempatkan kursor di tengah bagian tabel, sehingga garis bantu akan ditampilkan di bagian atas atau terkadang dibagian bawah.

• Pilihlah salah satu panah yang menunjuk pada kolom tertentu, dan selanjutnya klik tanda panah tersebut, sehingga akan menampilkan menu manipulasi sebagai berikut:

• Selanjutnya pada tabel telah terjadi penambahan kolom yang berada pada bagian kanan tabel, perhatikan gambar berikut:

Memblok dan Menseleksi Tabel

Blok Seluruh Tabel
Memblok seluruh tabel sama artinya dengan mengaktifkan tabel. Berikut teknik dalam memblok seluruh tabel:

1. Untuk melakukan pengaktifan atau blok tabel dapat dilakukan dengan cara mengklik salah satu garis tepi tabel (border).
2. Setelah Anda mendekatkan pointer pada sisi luar tabel, maka pada pointer akan dikituti gambar persegi, kliklah pada saat pointer memiliki gambar persegi tersebut, maka pada tabel akan aktif. Lihat gambar berikut:

Blok Pada Kolom Tabel

1. Apabila ingin memblok (menyeleksi) kolom atau beberapa kolom, Anda dapat mulai melakukannya dari bagian atas dengan bentuk pointer berbentuk panah kecil.
2. Setelah mendapatkan tanda panah ke bawah seperti gambar di atas, kliklah mouse sebelah kiri, selanjutnya tabel akan berubah menjadi dalam keadaan terblok. Perhatikan gambar berikut:

Blok Pada Baris Tabel
Setelah berhasil menyeleksi kolom, maka untuk melakukan seleksi baris juga dapat dilakukan dengan cara yang sama seperti proses di atas.

1. Apabila ingin melakukan seleksi baris maka posisi pointer harus diletakkan pada bagian kiri tabel.
2. Klik kiri dengan posisi pointer seperti gambar di atas, sehingga pada baris ketiga dari tabel tersebut sekarang dalam keadaan terblok.

Penggunaan Properties Di Dalam Tabel
Menambahkan Kolom dan Baris

• Untuk melakukan perubahan pada tabel, Anda harus bersifat mengaktifkan (memblok) tabel yang ada, dimana terdapat dua teknik blok.

• Hampir sama dengan beberapa aplikasi yang lain, bahwa untuk memblok tabel dapat dilakukan dengan cara drop dan drag di atas objek tersebut. Perhatikan gambar berikut:

• Selanjutnya ubahlah struktur tabel tersebut dengan mengganti jumlah baris (Rows) dan kolom (Cols) dari jendela Properties, perhatikan contohnya:

Tata Letak dan Perataan Tabel

• Mengaktifkan/ memblok terlebih dahulu tabel yang ingin diatur atau dengan menempatkan kursor pada salah satu sel yang hendak diatur.

• Kemudian pilih jenis perataan pada kolom Align yang ada di halaman Properties.

Pengaturan Spacing dan Padding
Bagian Cell Space adalah ketebalan border luar dengan border bagian dalam, dengan memasukkan nilai border yang besar maka akan menyebabkan border tabel menjadi renggang dan tebal. Sedangkan Cell Pad adalah jarak antara border dalam dengan teks, sehingga apabila ingin membuat jarak objek data dalam tabel dengan garis border, maka Anda harus memasukan nilai yang lebih pada bagian Cell Pad. Untuk memperjelasnya Anda dapat memperhatikan gambar berikut:

Pengaturan Cell Padding dan Cell Spacing dapat dilakukan dengan menggunakan jendela Properties, syaratnya adalah posisi tabel harus dalam keadaan terseleksi (terblok). Perhatikan tab untuk menentukan nilai Cell Padding dan Cell Spacing.

Merge Cell Untuk Menggabungkan Data

• Tentukan terlebih dahulu cell mana saja yang akan digabungkan. Sebagai latihan bloklah dua buah cell yang ada seperti gambar berikut:

• Selain itu dapat juga menggunakan gabungan antara baris dan untuk menggabungkan dua bentuk cell dari gambar di atas dapat menggunakan menu Modify -> Table -> Merge Cell.

• Selain dari menu modify, juga dapat menggunakan ikon yang ada pada jendela Properties yang bersimbol Merger . Untuk lebih jelasnya perhatikan gambar berikut:

• Setelah ikon Merger Cell diklik maka pada gambar table sekarang akan terdapat penggabungan 2 sel yang menjadi satu cell, perhatikan gambar berikut:

Spilt Cell Untuk Membagi Data

• Untuk membagi salah satu cell menjadi beberapa cell, letakkan kursor pada cell yang akan dipecah. Sebagai contoh kita akan membagi cell yang telah dimerger sebelumnya, maka letakkan kursor pada cell yang telah dimerger.

•  Split Cell.à Table àSelanjutnya untuk memecahkan cell, dapat menggunakan Menu Modify

• Selain itu juga dapat menggunakan ikon Split (  ) yang ada pada jendela Properties, letaknya tepat di sebelah kanan ikon Merger.

• Dengan mengklik ikon Split (    ), maka akan dihadapkan pada sebuah jedela yang menanyakan berapa jumlah pecahannya. Perhatikan gambar berikut:

Pada jendela di atas dapat dijelaskan seperti berikut:

Rows        : Untuk menentukan bahwa menginginkan membagi Cell tersebut dalam bentuk baris.
Coloumns    : Untuk menentukan bahwa menginginkan membagi Cell ke dalam bentuk kolom.
Numbered of Row    : Adalah jumlah baris atau kolom yang ingin ditambahkan pada Split Cell, sehingga pada Cell akan terbagi menjadi beberapa kolom atau baris sebanyak data yang dimasukkan pada isian ini.

• Untuk latihan cobalah untuk memasukkan nilai 3 pada kolom Number of Rows dan pilihlah Coloumn pada kolom Split Cell. Kliklah tombol OK bila telah selesai. Maka hasilnya dapat dilihat seperti gambar berikut:

• Apabila pada jendela penentuan Split Cell memilih Rows, maka hasilnya akan tampak seperti gambar berikut:

Mengubah Ukuran Tabel
Anda juga dapat mengubah ukuran panjang dan lebar table dengan sangat mudah. Cara standar yang dapat dilakukan adalah dengan memblok table den mengubah nilai panjang pada jendela Properties. Selain itu, untuk mengubah panjang maupun tinggi table, Anda dapat melakukannya dengan cara menarik salah satu garis yang ada pada tepi, perhatikan gambar berikut:

Dan apabila ingin mengubah ukuran tinggi table atau Cell dapat dilakukan dengan cara yang sama, perhatikan gambar berikut:

Membuat Tabel Di dalam Tabel
Di dalam table, Cell merupakan tempat untuk meletakkan berbagai objek atau data. Data yang dapat dimasukkan dapat berupa gambar, teks, form maupun table itu sendiri. Saat mendesain struktur web, Anda dapat menambahkan lagi table baru di dalam Cell tabel sebelumnya. Berikut adalah contohnya:

Modul BSI Web Programming II Pertemuan 5

Modul BSI Web Programming II Pertemuan 5

PERTEMUAN 5

Form

Perancangan Awal Form dengan Tabel
Seperti yang dijelaskan sebelumnya, bahwa kita akan menggunakan table sebagai kerangka peletakkan form.

• Pertama kali Anda dapat membuka halaman kerja baru pada editor Dreamweaver, kemudian mengaktifkan halaman dasar HTML.

• Tambahkan objek Form ( ), atau melalui menu Insert -> Form -> Form. Maka pada halaman kerja akan tampak bentuk persegi dengan garis merah putus – putus seperti gambar berikut :

• Setelah objek Form terbentuk, Anda harus memasukkan alamat hyperlink yang menjadi target eksekusi data saat tombol Submit diklik. Pengaturannya dapat menggunakan jendela Properties, berikut adalah contohnya:

Dari bentuk properties di atas dapat dijelaskan bagiannya sebagai berikut:
Form Name          : digunakan untuk memberikan nama pengenal form, dalam  hal ini dapat dikatakan sebagai variabel form.
Action              : digunakan untuk memberikan pengalamatan file program   eksekusi pada saat tombol Submit diklik.       
Method              : adalah metode pengiriman file dari form, apabila Anda   berkeinginan mengirimkan data dari satu form ke dalam halaman eksekusi Anda harus menggunakan Metode POST.
Target           : digunakan untuk menentukan jenis halaman eksekusi, yaitu  pakah ingin menggunakan jendela Browser atau jendela baru (_blank).

• Saat posisi kursor masih di dalam area kotak bergaris putus – putus (form) tersebut, kemudian buatlah tabel dengan jumlah kolom sebanyak 2 dan baris disesuaikan dengan kebutuhan. Sehingga hasilnya akan tampak seperti gambar berikut:

Menggunakan Objek Text Field

Objek Text Field adalah objek form yang digunakan untuk memasukkan data yang tidak terlalu banyak. Untuk lebih jelasnya perhatikan cara memasukannya:

• Pertama kali Anda dapat dapat membuka halaman kerja baru pada editor Dreamweaver, kemudian memilih jenis halaman dasar HTML.

• Masukan objek Form ( ) ke dalam proyek kerja Anda melalui Insert -> Form -> Form

• Buatlah tabel di dalam objek Form yang telah terbuat dengan kolom berjumlah 2 dan 5 baris.

• Aturlah tata letak dan judul tabel, sehingga desain tabel akan tampak seperti gambar berikut:

• Dari tool bar Forms, Anda dapat memasukkan Objek Text Field yang ditandai dengan ikon atau dari menu Insert -> Form -> Text Field.

• Setelah objek Text Field ( ) masuk dalam tabel, kliklah salah satu objek Text Field tersebut untuk melakukan penyetingan pada jendela Properties. Perhatikan gambar berikut:

Dari gambar di atas dapat dijelaskan :
TextField    : digunakan untuk memberikan variable kepada objek yang  telah dimasukkan, secara standar objek ini akan diberi variable TextField1, TextField2, … dan selanjutnya tergantung banyaknya objek di dalam form.
Max char    : merupakan batasan data (maksimal karakter) yang   dimasukkan ke dalam Text Field.
Char width: merupakan lebar dari Text field yang tampak pada layar,  lebar ini tidak berpengaruh denga Max Char.
Single Line  : Text Field secara standar akan dibentuk sebagai media  input yang bersifat single line, artinya Kita hanya dapat memasukkan data berupa satu baris data saja. Sedangkan apabila memilih multiline Kita dapat memasukkan data lebih dari satu baris.
Password    : Bentuk ini biasanya digunakan untuk membuat media  validasi berupa masukkan data password, data yang dimasukkan dalam objek. Data karakter di sini tidak dapat dilihat karena akan ditampilkan dalam bentuk enkrip seperti tanda binta (*).
In Val   : Kolom ini digunakan untuk memberi nilai isi, apabila ingin membuat formulir masukkan data maka kolom ini boleh dikosongkan.

• Untuk selanjutnya masukan objek Form dengan lengkap, berikut adalah daftar objeknya.

• Simpan Form tersebut pilih menu file -> save -> pilih drive C:\ -> pilih xampp-> pilih htdocs -> buat folder baru dengan nama nim anda -> buat folder baru dengan nama anggota -> nama file form_anggota.php.

 

Menggunakan Objek Hidden Field
Objek Hidden Field adalah sebuah objek form yang disembunyikan, penggunaan objek ini sebenernya sama dengan Tex field, akan tetapi pada objek ini tidak dapat digunakan untuk memasukan data. Untuk lebih jelasnya perhatikan langkah – langkahnya:

1. Untuk memasukan objek ini dapat menggunakan ikon hidden field ( ) dari tool bar Forms atau melalui menu Insert -> Form -> Hidden field.
2. Kemudian jendela properties akan ditampilkan. Untuk memberikan nilai data, biasnya objek ini sangat berhubungan dengan kode program seperti PHP maupun ASP.

Menggunakan Objek Text Area
Objek Text area merupakan objek form yang digunakan untuk memasukan data teks dengan kapasitas besar. Biasanya digunakan untuk memasukan data pesan, keterangan atau berita. Untuk lebih jelasnya berikut langkah – langkah pembuatannya

• Pertama buka Form anggota yang telah anda buat sebelumnya melalui menu File -> Open -> masuk kedalam drive dimana file tersebut disimpan -> form_anggota.php -> Open.

• Dari tool bar Forms, Anda dapat memasukan objek Text Field yang ditandai  dengan ikon ( ) atau dari menu Insert -> Form -> Text Field.

• Memasukan objek yang digunakan untuk memasukan data anggota, gunakan objek Text Area ( ) atau melalui menu Insert -> Form -> Text Area. Pengaturan kedua objek tersebut adalah

• Untuk pengaturan objek Text Area, Anda dapat mengaktifkannya dengan cara mengklik objek. Berikut adalah contoh pengaturan properti dan hasil tampilan formnya.

• Simpanlah objek tersebut, kemudian Anda dapat melihat hasil pemakaian objek ini dengan menjalankannya, tekanlah F12 atau Preview dari browser.

Menggunakan Objek Check Box
Check Box adalah salah satu komponen form yang difungsikan agar pengguna dapat memilih menu yang tersedia dengan cara mengklik salah satu menu yang ada. Perhatikan teknik pembuatannya:

• Bukalah halaman kerja baru pada editor Dreamweaver, kemudian memilih jenis halaman dasar HTML.

• Masukan objek form kedalam proyek kerja Anda melalui Insert -> Form -> Form atau menggunakan ikon Form ( )

• Setelah Form dimasukan, tulislah di dalam area Form dengan bertuliskan ”Apakah hobi Anda?”

• Selanjutnya masukanlah objek Check Box melalui tool bar Forms dengan gambar ikon Check Box ( ), atau dapat melalui menu Insert -> Form -> Check Box.

• Masukanlah beberapa daftar hobi anda, diantaranya adalah (memancing, berenang, makan, membaca komik, chatting, berkenalan) serta tambahkan satu tombol pada bagian bawah. Sehingga kondisi form Anda akan tampak seperti berikut:

• Setiap objek Check box dibuat dalam satu form, apabila digunakan dalam satu daftar data pilihan harus diberi nama variabel yang sama (Chhobi) kecuali pada nilainya (Checked value) harus dibuat berbeda.

Menggunakan Objek Radio Button
Jika objek Check box akan mengijinkan Anda menggunakan pilihan lebih dari satu, maka Radio Button tidak. Pada objek ini hanya akan mengijinkan Anda untuk menentukan salah satu pilihan saja dan tidak boleh ada dua atau tiga serta tidak boleh untuk tidak memilih. Dan hanya boleh memilih satu pilihan, pemahaman ini sering disebut dengan Single Choice. Contoh pemakaiannya adalah jenis kelamin, golongan darah, setuju atau tidak, agama dan lain sebagainya:

• Pertama buka Form anggota yang telah anda buat sebelumnya melalui menu File -> Open -> masuk kedalam drive dimana file tersebut disimpan -> form_anggota.php -> Open.

• Tambahkan 2 objek Radio Button dari tool bar Forms dengan ikon ( ) atau dapat diperoleh melalui menu Insert -> Form -> Radio Button.

• Tuliskan keterangan Pria, Wanita, kemudian tambahkan satu tombol melalui menu Insert -> Form -> Button. Hasilnya akan tampak seperti gambar berikut:

• Dari setiap objek pilihan yang dibuat, Anda dapat melakukan pengaturan menggunakan jendela Properties. Berikut adalah contohnya:

• Simpanlah objek tersebut, kemudian Anda dapat melihat hasil pemakaian objek ini dengan menjalankannya, tekanlah F12 atau Preview dari browser.

1. Radio Button       : Kolom ini digunakan untuk menentukan variabel kelompok Radio, di dalam satu kelompok pilihan anda harus memberi nilai variabel yang sama.
2. Checked Value    : Kolom ini digunakan untuk membedakan antara radio satu dengan yang lain, satiap radio harus diberikan nilai yang berbeda (disesuaikan dengan bentuk pilihannya).
3. Inisial State       : Kolom ini merupakan kondisi Radio, apabila Unchecked akan dipasang dalam keadaan tidak terpilih.

Menggunakan Objek List Menu/ Drop List
Objek List Menu sama dengan ComboBox, yaitu bentuk pilihan yang hampir sama dengan Radio Button, akan tetapi tampilannya berbeda. Objek ini juga hanya mengijinkan untuk memilih salah satu dari anggota yang dimilikinya.
Sebagai latihan untuk mencoba membuat rancangan Daftar yang digunakan untuk menampilkan daftar nama bulan, ikuti langkah – langkah berikut:

• Bukalah halaman kerja baru pada editor Dreamweaver, kemudian pilih jenis halaman dasar HTML.

• Masukan objek form ke dalam proyek kerja Anda melalui Insert -> Form -> Form atau menggunakan ikon Form ( ).

• Setelah Form ditambahkan, tulislah di dalam area Form dengan bertuliskan ”Apakah bulan lahir anda?”.

• Selanjutnya tambahkan objek List Menu dari tool bar Forms dengan mengklik ikon ( ), atau dapat diperoleh dari menu Insert -> Form -> List Menu. Sekarang kondisi Form adalah :

• Di dalam objek List Menu kita dapat memberikan nilai pilihan, yang dalam hal ini adalah daftar bulan. Untuk mengisi nilai daftar bulan, Anda dapat menggunakan jendela List Values.

• Cara masuk pada jendela List Values, Anda dapat mengaktifkan objek List Menu, kemudian klik tombol List Values ( ) yang ada pada jendela Properties.

Masuklah data daftar nama bulan dengan menekan tombol + ( ) dan tanda– ( ) untuk menghapusnya, perhatikan gambar berikut:

• Untuk pindah daftar Anda dapat menggunakan ikon panah atas dan panah bawah. Masukan tombol Submit pada bagian bawah setelah menu daftar. Jika telah selesai simpanlah kembali dan tekan F12 untuk melihat hasilnya.

Menggunakan Objek File Field/ Media Upload
Objek File Field digunakan untuk memasukkan data alamat file (path file) untuk keperluan pengkopian file, istilah yang sering digunakan adalah Upload. Untuk mencobanya Anda dapat mengikuti pilihan berikut:

• Bukalah halaman kerja baru editor Dreamweaver, kemudian pilih jenis pilihan halaman dasar HTML

•  Form atau menggunakan ikon Form ( ).à Form àMasukan objek form ke dalam lembar kerja Anda melalui Insert

• Setelah Form ditambahkan, tulislah di dalam area Form dengan bertuliskan ”Pengkopian file dengan Program PHP : ”.

• Masukan objek File Field dari toolbar Forms dengan ikon ( ), atau  File Field. Hasilnya adalah :à Form àdapat melalui menu Insert

• Pengaturan variabel dapat dilakukan dengan cara mengaktifkan objek File Field tersebut, maka Anda akan melihat tampilan properti berikut:

Pada gambar di atas dapat dijelaskan:
File Field name    : digunakan untuk mendefinisikan nama variabel pada File Field.
Char width           : digunakan untuk menentukan lebar objek.
Max char          : digunakan untuk memberi batasan panjang file data yang dimasukan, batasan ini berdasarkan jumlah karakter alamat.

• Simpanlah dengan nama formfile.php, untuk melihat hasilnya dapat menekan F12 pada keyboard, maka akan tampak seperti gambar berikut:

• Pada program ini menghasilkan kolom masukan yang berupa alamat file, untuk mendapatkan data alamat dari file yang hendak di upload ke dalam web dapat menggunakan tombol Browse, sehingga akan muncul halaman pengambilan file seperti gambar berikut:

• Setelah selesai memilih file yang hendak di upload, maka Anda dapat mengklik tombol OK. Saat ini Anda telah mendapatkan alamat lengkap file yang dimasukan pada objek File field