LAPORAN RESMI

MODUL II
TABLE FORM DAN FRAME
PRAKTIKUM PEMROGRAMAN WEB I

NAMA : AULYA FRIDAYANTI

N.R.P : 170441100017
DOSEN : AKHMAD TAJUDDIN T.MS, M.Kom
ASISTEN : BERTHA SAMAHITA KARTIKA
TGL PRAKTIKUM :

Disetujui :
Asisten

BERTHA SAMAHITA KARTIKA

160441100020

LABORATORIUM BISNIS INTELIJEN SISTEM

JURUSAN MANAJEMEN INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
 BAB I
PENDAHULUAN

1.1 Latar Belakang Masalah

Dunia informatika akan selalu bersifat dinamis, dalam artian akan selalu
berkembang mengikuti jaman. Hal yang paling nampak adalah perkembangan
internet. Saat ini semakin banyak bermunculan website-website di dunia maya.
Sebagai user tentunya kita sangat sering menggunakan website tersebut.

Ada banyak sekali program-program yang dapat digunakan untuk membuat

website tersebut, contohnya : php, dreamwaver, joomla, dll. Namun dasar dari
pemrograman tersebut tetaplah satu yakni HTML.

Sebagai dasar pembuatan web sebaiknya bahasa pemrograman HTML harus

dikuasai oleh web maker atau pembuat web. Dengan latar belakang tersebut untuk
membuat website yang menarik dan dapat memaksimalkan informasi yang ingin
kita sampaikan ke pengguna website tersebut, kita dapat menambahkan table,
frem dan form yang akan dibahas dalam modul ini.

1.2 Tujuan

 Mampu menjelaskan dan memahami tentang table, Form, Frame pada

HTML serta membuat aplikasinya.

BAB II
 DASAR TEORI

2.1. Tabel
a. Atribut ROWSPAN
Atribut ini digunakan untuk menggabungkan beberapa baris
dalam satu kolom menjadi satu baris (merge cell).
b. Atribut COLSPAN
Atribut ini digunakan untuk menggabungkan beberapa kolom dalam
satu baris menjad i satu kolom (merge cell), dimana atribut ini juga
dapat digabungkan dengan atribut sebelumnya yaitu ROWSPAN.
c. Atribut Latar Belak ang Tabel
Untuk memberikan warna latar belakang di dalam tabel maka
dapat digunakan atribut bgcolor disertai dengan latar yang diinginkan,
misalkan latar belakang tabel akan diisi dengan warna biru, maka
dapat dilakukan BGCOLOR=”BLUE”, atau latar belakang diisi
dengan gambar maka dapat dilakukan dengan
BACKGROUND=”namafile.jpg”, file yang dapat digunakan untuk
latar belakang adalah *.JPG, *.GIF, *.BMP dan *.PNG.
d. Atribut Align
Atribut ini digunakan untuk pengaturan pelurusan dari suatu cell,
adapun macam pelurusan ini ada tiga yaitu LEFT, CENTER,
dan RIGHT. Pelurusan cell ini diperlukan terutama untuk
informasi data mengenai mata uang, atau yang berhubungan
dengan nilai uang misalkan daftar harga. Bila ada daftar harga
maka sebaiknya digunakan align RIGHT, sehingga akan
memudahkan pembacaan.

2.2. Table Bersarang (Nested Table)

Kata bersarang (nested) sering digunakan pada istilah-istilah
pemrograman dan sering dijumpai dalam setiap pemrograman. Demikian
pula dalam pembuatan script HTML yaitu table bersarang, yang artinya
adalah didalam suatu table terdapat table yang lain, kemungkinan ini bisa
saja terjadi dengan meletakkan tag <table> didalam tag <table> lainnya,
sehingga didapatkan table yang bersarang di dalam table lainnya.

2.3. Form
Di gunakan untuk menerima informasi atau meminta umpan balik
dari user dan memproses informasi tersebut di server
Standar penulisan:

<form method=“post/get” action=“. . .”> . . . </form>

a. Elemen Form
Tag <FORM> digunakan untuk membuat form dalam document HTML

Tabel 3.5. Attribut untuk membuat form dalam document HTML

Method Metode pengiriman data ke file tujuan (POST atau GET)

Action Aksi yang akan dilakukan jika user menekan tombol
Submit
Name Memerikan nama tiap masukan
Value Memberikan nilai suatu masukan
Type Tipe form yang akan digunakan

b. HTML Input Elemen

Pada saat membuat form anda bisa meletakkan control-control pada
form untuk memperbolehkan inputan dari user . semua control biasanya di
letakkan di antara tag <FORM></FORM> tapi anda juga bias meletakkan
control diluar tag tersebut. Untuk menambahkan control gunakan tag <input>.
Berikut macam-macam component input:
1. Textbox
Textbox digunakan untuk membuat single line text control. Attribute
size digunakan untuk menentukan jumlah character yang bisa
ditampilkan, sementara maxlength attribute digunakan untuk
menentukan maximum character yang bisa di masukkan.
 Contoh Penulisan syntax textbox :

<INPUT TYPE=”TEXT” NAME=”textbox” VALUE=” SIZE=”20”>

2. Submit dan Reset

Tombol Submit digunakan ketika user mengisi form dan ingin
mengirimkan ke server, sedangkan Tombol Reset digunakan ketika
user ingin menghapus/ mengosongkan semua masukan yang ditulis dalam
form.

3. Checkbox
Checkbox digunakan untuk memberi beberapa pilihan kepada user.

4. Radio button
Radio button digunakan untuk memberi (hanya) satu pilihan kepada user,
Setiap radio button control harus memiliki nama yang sama, sehingga
user hanya bisa memilih satu option saja. Radio button juga harus secara
explisit memberikan nilai ke atribut value.

5. Text Area
Text area digunakan sebagai field masukan untuk pengunjung (dapat
menerima lebih dari satu baris teks). Biasa disebut sebagai kotak komentar.
Untuk membuat textarea gunakan tag <TEXTAREA>...</TEXTAREA>

6. Daftar Drop Down

Drop down digunakan untuk memberikan menu pilihan kepada user (cara
kerjanya seperti radio button yang hanya mengijinkan user untuk
memilih 1 pilihan saja).
2.4. Tag FrameSet

Sesuai dengan namanya frame yang berarti bingkai, adalah

berhubungan dengan pengaturan bingkai sebagai pembentuk jendela
tampilan pada browser. Sehingga jendela browser dibagi menjadi
beberapa frame. Ada tiga pengaturan frame, yaitu secara vertikal,
horizontal dan kombinasi dari vertikal dan horizontal. Script HTML yang
digunakan untuk pengaturan frame maka tidak dapat digunakan untuk
membuat halaman tampilan web, untuk itu diperlukan file yang berisi script
HTML lain dan disisipkan kedalam script frame tesebut. Jadi bila ada dua
frame maka diperlukan dua file HTML. Untuk dapat menyisipkan ketiga file
HTML tesebut kedalam frame, diperlukan nama yang jelas dan benar serta
dimana letak folder/ direktorinya, karena informasi tersebut digunakna
didalam tag <frameset>.
 BAB IV
IMPLEMENTASI

4.1. Tugas Praktikum

Kerjakan tugas praktikum berikut :
a. Ketiklah dokumen di bawah ini dan simpan dengan nama form2.html
untuk menampilkan seperti berikut :

b. Gabungkan antara praktikum 4.1.a (form2.html) dengan nomor 2.a

pada kegiatan praktikum (form3.html) dalam satu halaman
menggunakan frame, sehingga menampilkan tampilan berikut:
JAWAB:

 Pertama kita buat form2 dengan koding berikut:

 Kemudian buatlah form3 dengan koding berikut:

 Kemudian untuk memberi frame diantara from2 dan form3 maka buatlah
koding berikut:
 BAB V
PENUTUP

5.1. Analisi
Kita dapat membuat tampilan website yang akan kita buat semenarik
mungkin agar pesan yang ingin kita sampaikan kepada pengguna dapat maksimal
tersampaikan. Ada beberapa hal yang dapat kita tambahkan ke dalam website
yang kita buat, misalkan dengan menambahkan table yang mempermudah
pengguna untuk memahami informasi, menggunkan frame untuk membatasi
informasi tertentu hingga menggunakan form untuk menggabungkan beberpa
website.

5.2. Kesimpulan
Tag Tables memainkan peranannya yang sangat penting dalam
pendesainan sebuah halaman Web. Disamping fungsi utamanya untuk bisa
menampilkan data dalam format baris dan kolom, tables dapat dimanfaatkan
untuk sarana utama dalam melakukan penataletakan guna penempatan secara tepat
teks maupun gambar.