BKPM – WORKSHOP PEMROGRAMAN WEB

BUKU KERJA PRAKTIK MAHASISWA (BKPM)

WORKSHOP PEMROGRAMAN WEB
TKK20707

SEMESTER 2

PENGAMPU :
Lukie Perdanasari, S.Kom., M.T.
Lukman Hakim, S.Kom., M.Kom.
Yogiswara, ST, MT

PROGRAM STUDI D3 TEKNIK KOMPUTER

JURUSAN TEKNOLOGI INFORMASI
POLITEKNIK NEGERI JEMBER
TAHUN 2023
 BKPM – WORKSHOP PEMROGRAMAN WEB

Acara 3. Penggunaan HTML

Pokok Bahasan : Membuat Tabel dan Frame

Acara Praktikum/Praktik : Acara 1 / Minggu 2
Tempat : Politeknik Negeri Jember
Alokasi Waktu : 120 Menit

a. Capaian Pembelajaran Mata Kuliah (CPMK)

1. Mahasiswa mampu membuat tabel sederhana menggunakan tag pada html
2. Mahasiswa mampu menggunakan cellspacing dan cellpadding untuk mendesain
tabel
3. Mahasiswa mampu menggunakan rowspan dan colspan untuk membuat tabel
4. Mahasiswa mampu menggunakan frame untuk membagi halaman web menjadi
beberapa bagian
5. Mahasiswa mampu memanfaatkan frame untuk membuat website sederhana

b. Indikator
Kemampuan bekerja individu terkait dasar pembuatan dan aturan HTML

c. Dasar Teori

Tag yang akan digunakan pada workshop kali ini adalah :

1. <pre>…</pre>
Digunakan untuk preformatted text. Bertujuan untuk menampilkan
text sesuai dengan apa yang diketikkan.
2. <ul>…</ul>
Unordered list. Atau list tidak berurut. List ini menampilkan isi list
dengan menggunakan bullet
3. <ol>…</ol>
Ordered list. Atau list berurut. List ini menampilkan isi dengan
menggunakan angka 12. <ul>…</ul>
Unordered list. Atau list tidak berurut. List ini menampilkan isi list
dengan menggunakan bullet
4. <dl>…</dl>
Definition list digunakan untuk mendefinisikan daftar. Contoh
penggunaannya adalah untuk glosarium.
5. <li>…</li>
Digunakan untuk mengisi list yang berada di dalam ul, ol, dan dl.
 BKPM – WORKSHOP PEMROGRAMAN WEB

6. A
Anchor, untuk membuat link, baik berada di luar, maupun internal halaman
7. <table>…</table>
Untuk membuat tabel yang di dalamnya berisi tag :

• <tr>…</tr> menunjukkan row pada tabel

• <th>…</th> untuk mengisi data pada header tabel
• <td>…</td> untuk mengisi data pada sel tabel
8. <frameset>…</frameset>
Menujukkan elemen kelompok pengisi sebuah frame
9. <frame>…</frame>
Menentukan properti dari setuap frame yang berada pada frameset

d. Alat dan Bahan

1. Komputer Kerja
2. Ms. Word
3. Browser (Mozila/Chrome)
4. Instaler Xampp dapat di download di
https://www.apachefriends.org/download.html
5. Instaler IDE (tidak mengikat)\
- notepad++ (https://notepad-plus-plus.org/downloads/)
- visual studio (https://code.visualstudio.com/download)

e. Prosedur Kerja

1. Tabel
Pada bagian ini, kita akan pelajari tabel dan atributnya pada html. Untuk
membuat tabel, diperlukan tag <table>…</table>. Di dalam tag table ada tag
<tr> yang menunjukkan row atau baris pada tabel, <th> yang berisi header
pada tabel, dan <td>yang merupakan data pada tabel.
 BKPM – WORKSHOP PEMROGRAMAN WEB

Buat file baru, kemudian ketik dan jalankan kode program di bawah ini.

Selanjutnya, tambahkan atribut pada tag table berupa border, align,

cellspacing dan cellpadding.
 BKPM – WORKSHOP PEMROGRAMAN WEB

Setelah di jalankan pada browser, amati apa yang terjadi, apa

guna atribut cellspacingdan cellpadding?

Selanjutnya akan mempelajari cara menggabungkan cell dalam

tabel pada html.Ketikkan kode, kemudian jalankan pada browser.
 BKPM – WORKSHOP PEMROGRAMAN WEB

Amati hasil dari kode diatas (jangan lupa SS kode dan hasil untuk laporan).
Kemudian, modifikasi tag th menggunakan atribut rowspan dan colspan
 BKPM – WORKSHOP PEMROGRAMAN WEB

Apa yang dapat anda simpulkan mengenai colspan dan rowspan?

Latihan selanjutnya adalah mengubah warna background gambar dan

mengatur lebardari cell tabel, ubah background gambar menggunakan
kode heksadesimal warna.
 BKPM – WORKSHOP PEMROGRAMAN WEB

2. Frame
HTML memiliki elemen untuk menampilkan beberapa halaman sekaligus pada
layar, yaitu menggunakan frame. Frame membutuhkan tag
<frameset></frameset>. Tag tersebut menujukkan elemen kelompok pengisi
sebuah frame. Selain itu, dibutuhkan juga tag <frame> untuk menentukan
properti dari setuap frame yang berada pada frameset.

Pertama, buat 3 file yaitu frame1.html, satu.html, dan dua.html. kemudian,

jalankanframe1.html pada browser.
 BKPM – WORKSHOP PEMROGRAMAN WEB

Selanjutnya, buat file tiga.html

Modifikasi file frame1.html menjadi :

 BKPM – WORKSHOP PEMROGRAMAN WEB

Setelah dijalankan pada browser maka hasilnya :

3. Tugas Praktikum

Dengan memanfaatkan yang sudah kalian pelajari, buat halaman

website sederhanadengan layout seperti dibawah ini :
Spesifikasi :
1. Tema bebas, tidak harus sama dengan contoh.
2. Frame di bawah logo digunakan untuk link Buat sekreatif mungkin
 BKPM – WORKSHOP PEMROGRAMAN WEB

f. Hasil dan Pembahasan

1. Tambahkan dasar teori yang menunjang kegiatan workshop

2. Screenshot kode program dan hasil
3. Analisa program dan Jawab jika ada pertanyaan pada BKPM
4. Beri kesimpulan
5. Kumpulkan tepat waktu disertai kode program/source coude (file html) yang
sudah dibuat (berupa archive bisa rar/zip)

6. Dasar teori, proses pengerjaan, hasil dan pembahasan, penulisan kesimpulan,

referensi, keunikan laporan memperoleh apresiasi.

g. Rubrik Penilaian

Bobot Nilai
No. Indikator Kinerja Penilaian
Penilaian Akhir
1 Keberhasilan dalam membuat tabel di 15%
html
2 Keberhasilan dalam menggunakan cell 15%
spacingdan cell padding pada html
3 Keberhasilan dalam menggunakan 25%
rowspandan colspan pada html
4 Keberhasilan menggunakan frame untuk 15%
membagi halaman web menjadi beberapa
bagian
5 keberhasilan memanfaatkan frame untuk 30%
membuat website sederhana
Total 100%
 BKPM – WORKSHOP PEMROGRAMAN WEB

Acara 4. Form

Pokok Bahasan : Membuat Form Sederhana

Acara Praktikum/Praktik : Acara 2/ Minggu 2
Tempat : Politeknik Negeri Jember
Alokasi Waktu : 120 Menit

a. Capaian Pembelajaran Mata Kuliah (CPMK)

1. Mahasiswa mampu membuat form sederhana menggunakan HTML.

2. Mahasiswa mampu memvalidasi isian form sesuai dengan spesifikasi yang
dibutuhkan.

b. Indikator

Kemampuan bekerja individu terkait dasar pembuatan dan validasi form

menggunakan HTML

c. Dasar Teori

Form dalam HTML adalah sebuah fasilitas berupa halaman web yang
dapat digunakan untuk menerima masukan dan/atau data dari pengguna.
Masukan dari pengguna website selanjutnya dapat diolah menggunakan
bahasa pemrograman web lainnya, baik oleh server-side (contoh : php)
ataupun client-side (contoh : java script). Form dapat digunakan untuk
berbagai keperluan seperti form pendaftaran, form login, transaksi penjualan,
mengumpulkan informasi atau meminta feedback dari pengguna, menawarkan
barang/jasa secara on-line dan sebagainya. Form sangat sering kita jumpai
dalam satu aplikasi sistem informasi berbasis web.
Tag yang digunakan untuk membuat form pada HTML adalah <form></form>

d. Alat dan Bahan

1. Komputer Kerja
2. Ms. Word
3. Browser (Mozila/Chrome)
4. Instaler Xampp dapat di download di
https://www.apachefriends.org/download.html
5. Instaler IDE (tidak mengikat)
- notepad++ (https://notepad-plus-plus.org/downloads/)
- visual studio (https://code.visualstudio.com/download)
 BKPM – WORKSHOP PEMROGRAMAN WEB

e. Prosedur Kerja

Pada workshop kali ini, kita akan belajar membuat form sederhana
menggunakan HTML. Form yang akan dibuat, tidak berisi aksi tertentu
(tidak dapat disubmit) tetapi bisa diisi dan bisa divalidasi sesuai
kebutuhan.
Buka notepad++ atau IDE yang anda gunakan, kemudian ketikkan kode
dibawah ini, simpan, kemudian jalankan pada browser. Jangan lupa
screenshot kode dan hasilnya untuk digunakan sebagai laporan. Jangan lupa
analisa kode program yang dibuat.

1. Membuat Form Isian

 BKPM – WORKSHOP PEMROGRAMAN WEB

2. Menambahkan Tombol Sumbit dan Cancel pada Form

Isi form tersebut, lalu coba klik cancel. Apa yang terjadi? Mengapa Demikian?
Ps : form tidak bisa di submit karena tidak ada aksi yang didefinisikan pada
file

3. Menambahkan Atribut Placeholder

 BKPM – WORKSHOP PEMROGRAMAN WEB

Apa perbedaan tampilan form diatas dan sebelumnya?

4. Menggunakan required

Apakah ada perbedaan tampilan?

Klik tombol submit dalam kondisi NIK kosong dan nama terisi, apa yang
terjadi?
Klik tombol submit dalam kondisi nama kosong dan NIK terisi, apa yang
terjadi?

5. Menambahkan Radio Button, Tanggal, Dropdown dan Checkbox

 BKPM – WORKSHOP PEMROGRAMAN WEB

Isikan form diatas dengan data dummy, setelah terisi, klik cancel, apa yang terjadi?
 BKPM – WORKSHOP PEMROGRAMAN WEB

e. Hasil dan Pembahasan

1. Tambahkan dasar teori yang menunjang kegiatan workshop
2. Screenshot kode program dan hasil
3. Analisa program dan Jawab jika ada pertanyaan pada BKPM
4. Beri kesimpulan
5. Kumpulkan tepat waktu disertai kode program/source code (file html)yang sudah
dibuat (berupa archive bisa rar/zip)

6. Dasar teori, proses pengerjaan, hasil dan pembahasan, penulisan kesimpulan,

referensi, keunikan laporan memperoleh apresiasi.

f. Rubrik Penilaian
Bobot Nilai
No. Indikator Kinerja Penilaian
Penilaian Akhir
1 Keberhasilan dalam membuat form sederhana 50%
menggunakan HTML.
2 Mahasiswa mampu memvalidasi isian form 50%
sesuai dengan spesifikasi yang dibutuhkan.
Total 100%