dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede...
Transcript of dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede...
![Page 1: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/1.jpg)
LAPORAN PRAKTIKUM PEMOGRAMAN WEB 1
MODUL 1 – 5
Nama :Dede Irpan
Nim :2011081037
Prodi :Tekhnik Informatika
LABORATORIUM KOMPUTER
FAKULTAS ILMU KOMPUTER(FKOM)
UNIVERSITAS KUNINGAN
2012
![Page 2: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/2.jpg)
MODUL 1 Pengaturan Huruf Dasar Teori
HTML merupakan singkatan dari Hyper Text Markup Language. Di dalam HTML dikenal adanya tag atau tanda-tanda khusus yang merupakan rangakaian perintah yang akan diproses oleh web browser. Software yang dibutuhkan untuk menulis dan menjalankan tag-tag HTML yaitu :
1. Text Editor : Notepad, Font page, Macromedia Dreamweaver dan lain-lain
2. Web browser : Interner Explorer, Netscape Navigator dll.Berikut ini adalah beberapa perintah yang biasa digunakan untuk pengaturan huruf ataupun warna dalam pembuatan script :<font parameter>Face : untuk menentukan jenis huruf, misalnya times new roman,arial,dllSize : untuk menentukan ukuran huruf, yaitu dengan memberikan angka
dari 1sampai 7 dan dari -7 sampai -1Color : untuk memberikan warna huruf yang digunakan, anda dapat
mengetikan warna yang diinginkan secara langsung ataupun dengan kode angkanya
Simpan dengan nama Contoh1.htmlJalankan dengan Mozilla firefox :
Tag – tag yang digunakan untuk melakukan pengaturan huruf adalah :<h1> sampai <h7> : untuk mengatur ukuran huruf<center> : untkuk mengatur huruf agar ditengah
![Page 3: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/3.jpg)
<b> : untuk mengatur huruf agar tebal<i> : untuk mengatur huruf agar miring<u> : untuk mengatur huruf agar memakai garis bawah<marquee> : untuk mengatur tulisan dari kanan ke kiri<hr size = n> : untuk mengatur garis horizontal, dengan n sebagai
lebar dari garis tersebut.Contoh :
Output :
Contoh 2 :
![Page 4: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/4.jpg)
Contoh 3 :
Output :
Contoh 4 :
![Page 5: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/5.jpg)
Output :
Praktikuma. Ketikan program Modul-1a.html dengan menggunakan Notepadb. Jalankan dan amati hasilnyac. Cetak listing program dan hasilnya
d. Output/hasil :
![Page 6: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/6.jpg)
Analisis:Pada tag diatas contohnya <br> itu adalah tag untuk pindah baris.
e. Ubahlah ukuran huruf pada baris pertama dengan menggunakan <h2> dan baris kedua menggunakan <h1>
f. Jalankan dan amati hasilnya, lalu cetak :
H1 dan H2 ialah untuk ukuran huruf,ukuran yang ditentukan biasanya sampai H7.
g. Buatlah semua huruf berada ditengah – tengah (centering)
![Page 7: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/7.jpg)
Outputnya :
h. Buatlah garis horizontal pada baris ketiga
i. Jalankan dan cetak hasilnya :
![Page 8: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/8.jpg)
j. Buatlah tulisan bergerak dari kanan ke kiri pada baris keempat sebagai berikut : Universitas Pertama di Kuningan
Output :
k. Ketikan program contoh 1
l. Jalankan dan amati hasilnya :
![Page 9: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/9.jpg)
Analisis :<body bgcolor="magenta"> = untuk warna pada background.<font face="arial" size="6" color=<"blue"> = untuk efek huruf, ukuran dan warna pada huruf.
m. Pada baris yang bertuliskan Office ubahlah jenis hurufnya dengan menggunakan Time New Roman dengan ukuran 10
n. Jalankan dan amati hasilnya. Mengapa demikian :
Analisis:
![Page 10: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/10.jpg)
Jenis huruf diganti dengan Times New Roman dan ukuran 10 menghasilkan output seperti diatas.
o. Buatlah warna yang menarik untuk baris huruf tersebut :
output :
p. Ketik program contoh 2 :
q. Jalankan dan amati hasilnya
![Page 11: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/11.jpg)
Analisis:Tampilan diatas menghasilkan dua gambar, yang pertama sebagai background yang kedua sebagai gambar kecil,
r. Buatlah tulisan di tengah – tengah ” PT.ALIM RUGI”, dengan ukuran huruf paling besar dan beru warna yang menarik.
Outputnya :
s. Lima baris berikutnya ketikan alamat ”Jl. Pramuka 77 Cirebon Telp. (0231)482874”
![Page 12: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/12.jpg)
t. Jalankan dan amati hasilnya
Tugas1. Bisakah anda membuat tag – tag HTML dan Microsoft word? Jelaskan.
Tidak bisa karena pada microsoft word hanya digunakan untuk mengetik huruf dan langsung dengan jenis file doc.
2. Bisakah tag – tag dalam HTML seperti untuk mempertebal, membuat garis bawah, membuat centering dan lain-lain ditulis secara bersamaan pada satu baris? Mengapa?Bisa karena pada tag-tag HTML tidak case sensitive seperti program yang lainnya.
3. Buatlah satu script yang menarik untuk sebuah perusahaan dimana didalamnya terdapat informasi:o Nama Perusahaano Alamat Perusahaan o Gambar sebagai pengganti logo perusahaan.
![Page 13: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/13.jpg)
![Page 14: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/14.jpg)
MODUL 2 Hubungan Antar Dokumen Dasar Teori :
Proses yang sering digunakan dalam pemrograman berbasis web adalah adanya fasilitias hubungan antar dokumen atau lebih dikenal dengan nama link. Proses ini akan terjadi bila user menekan tombol klik pada tulisan atau gambar yang bergaris bawah, atau pada daerah yang saat kursor digeserkan ketempat tersebut akan menampilkan penunjuk sebagai lambang link. Proses link ini bertujuan untuk melihat keterangan rincian dari kalimat atau gambar yang sedang ditampilkan dalam script. Perintahuntuk link dokumen tersebut adalah :<a href="nama—file">Digunakan untuk melakukan link ke file tertentu dengan menunjuk kata atau gambar yang diketikan setelah perintah tersebut, dan nantinya akan diakhiri dengan </a>.
Praktikum1. Ketikkan program Contoh1
2. Ketikkan program Contoh2
![Page 15: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/15.jpg)
3. Ketikkan program Contoh3
4. Jalankan program Contoh1
5. Klik pada tulisan FKOM amati hasilnya:
![Page 16: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/16.jpg)
Setelah mengklik tulisn FKOM maka muncullah file Contoh2, itu dikarenakan pada slide pertama terdapat link yang megarah pada contoh 2.
6. Buka program Modul 2b dan buat baris baru setelah baris terakhir7. Ketikan tulisan “Kembali Ke Menu Utama”8. Link tulisan tersebut ke file Contoh1.html
9. Jalankan script Contoh2 lalu klik pada tulisan yang baru dibuat:
Klik pada “Kembali Ke Menu Utama” :
![Page 17: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/17.jpg)
Hasil yang ditampilkan kembali ke awal slide karena link tersebut mengarah ke
awal slide.
1. Jelaskan fungsi dibawah ini :
<area shape="rect" coords="0,0,200,100" href="Contoh1.html" alt="kotak link">Adalah area yang ditunjuk kursor yang persegi empat dan untuk batasan are tersebut.
Pertanyaan dan Tugas1. Bisakah link antar dokumen dilakukan dengan memilih area tertentu dari sebuah
objek atau gambar? Bagaimana caranya?
Jawab:
Bisa, masukan gambar dalam script lalu masukan link ke alamat yang anda
inginkan.
2. Buatlah contoh script untuk link gambar berikut
![Page 18: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/18.jpg)
Hasil/outputnya :
Klik NEXT..!!
![Page 19: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/19.jpg)
MODUL 3 Operasi Frame
Dasar Teori
Frame merupakan fasilitas yang diberikan oleh HTML untuk membagi
script ke dalam beberapa bagian dalam bentuk baris dan kolom. Tag ini sangat
unik karena tidak disimpan diantara tag <body> dan </body>. Dengan
adanya fasilitas yang diberikan oleh tag <framset> script saat diatur
sedemikian rupa sehingga pada saat diinginkan pergantian tampilan dengan
sript yang lain, anda tinggal menunjuk script yang akan ditampilkan dan
disimpan pada bagian frame yang lain. Tag utama dari pembuatan frame ini
yaitu <frameset> dan diakhiri dengan </frameset> yang diketikan setelah tag
</head>. Tag <frameset> memiliki beberapa parameter yaitu:
<cols>
Untuk membagi script menjadi 2 bagian atau lebih, yaitu dari kiri ke kanan.
<rows>
Untuk membagi script menjadi 2 bagian atau lebih, yaitu dari atas ke bawah.
<name>
Untuk memberikan nama dari frameset yang telah dibuat, dengan urutan dari
kiri ke kanan atau dari atas ke bawah.
<src>
Untuk menyisipkan script pada frame yang telah dibuat.
<target>
Untuk menentukan target penyimpanan script ke dalam nama frameset tertentu.
Contoh 1
![Page 20: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/20.jpg)
Contoh 2
Contoh 3
Praktek !
1. Script contoh 1 – 3 sudah ada diatas sekarang menjalankan contoh 1
2. Jika ada kesalahan lakukan perbaikan.
![Page 21: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/21.jpg)
3. Ubahlah warna latar pada script contoh3.html sehingga mejadi lebih menarik
Hasil / outputnya :
Jika pada contoh 1 :
Tugas !
![Page 22: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/22.jpg)
Untuk tugas sudah dikerjakan dan dikirim melalui email beserta lampiran.
![Page 23: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/23.jpg)
MODUL 4 Tabel
Dasar Teori
Dalam HTML dikenal ada dua jenis tabel yaitu tabel konvensional dan tabel
layout. Tabel konvesional merupakan tabel yang bisa kita liat dalam kehidupan sehari-
hari, misalnya tabel tentang daftar karyawan, daftar mahasiswa dan lain-lain. Tabel
layout yaitu tabel yang digunakan untuk melakukan pengaturan tata letak tampilan
didalam monitor sehingga script akan terlihat menarik. Tag yang digunakan untuk
membuat tabel yaitu diawali dengan <table> dan diakhiri dengan </table>. Dalam tag
ini memiliki beberapa atribut yaitu :
Border : untuk mengatur ketebalan garis tabel.
Align : untuk mengatur letak tabel, dimana atribut ini memiliki parameter :
left : untuk rata kiri
center : untuk rata tengah
right : untuk rata kanan
valign : untuk mengatur letak tabel, dimana atribut ini memiliki parameter :
top : untuk rata atas
cencer : untuk rata tengah
bottom : untuk rata bawah
cellpadding : untuk memberi jarak antara tulisan dengan border
callspacing : untuk memberi jarak dengan melebarkan border
background : untuk menyisipkan gambar pada tabel
bgcolor : untuk mengatur warna latar
Di dalam tag <tabel> ini terdapat beberapa tag yang berfungsi untuk pengaturan kolom
dan baris :
<caption> : untuk membuat judul
<tr> : untuk mendefinisikan baris dalam tabel dimana didalamnya dapat
digunakan atribut align dan valign.
<td> : untuk mendefinisikan kolom dalam tabel, dimana didalamnya
![Page 24: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/24.jpg)
dapat digunakan atribut align dan valign, selain itu ada parameter
yang berfungsi untuk penggabungan baris dan kolom.
Colspan : untuk menggabungkan kolom
Rowspan : untuk menggabungkan baris
Praktek :
1. Ketik script contoh 1 lalu simpan dengan nama modul4a.html,jalankan dan
amati.
Jalankan :
Pada script diatas terdapat bg color yang menggunakan angka, itu berarti angka
tersebut merupakan angka yang bisa menggantikan huruf untuk member warna.
![Page 25: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/25.jpg)
2. Tambahkan background pada tabel tersebut.
Outputnya :
3. Beri warna pada baris pertama yang berisikan No, Barang, Agen dan Konsumen
![Page 26: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/26.jpg)
Outputnya :
4. Ketikan script contoh 2 lalu simpan dengan nama Modul4b.html, jalankan dan
amati.
![Page 27: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/27.jpg)
5. Tabel dengan tampilan sebagai berikut.
![Page 28: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/28.jpg)
KARTU HASIL STUDI
Nama : Dede Irpan
NIM : 2011081037
Fakultas : Ilmu Komputer
Jurusan : Teknik Informatika
No. Mata Kuliah SKS
Nilai
NilaiAkhirUTS UAS
1 Pancasila 2 75 85 B
2 Agama 2 50 60 C
3 Pemograman Web 1 2 80 90 A
Jumlah 6
![Page 29: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/29.jpg)
Output / hasilnya :
Tugas
Untuk tugas sudah dikerjakan dan dikirim melalui email beserta lampiran.
![Page 30: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/30.jpg)
MODUL 5 Form dan Input Html
Dasar Teori
Form merupakan salah satu fasilitas yang disediakan HTML untuk
memberikan input atau masukan data dari user ke server sehingga nantinya
terjadi komunikasi antara user dan server dalam bentuk pengiriman data.Untuk
pengiriman data tersebut biasanya menggunakan perintah-perintah aplikasi
pemograman web yang digunakan. Dalam modul ini akan dipelajari tentang
operasi-operasi form yang berada dalam batasan HTML.Bentuk umum dari tag
form adalah :
<form action= "url/nama_file " method= "post/get " name= "nam_ form>
Dalam form memiiliki beberapa tag yang berfungsi untuk memasukan data, tag-
tag tersebut adalah :
<input type="atribut">
Digunakan untuk memasukan data berupa text, radio, checkbox, button dan
image. Atribut dalam tag ini yaitu:
Text : digunakan untuk memasukan nilai yang akan dikirim kepada
server,baik berupa angka ataupun karakter.
Radio : untuk menyediakan beberapa pilihan kepada user, tetapi hanya satu
yang bisa dipilih.
Checkbox : untuk menyediakan beberapa pilihan kepada user, dan user
dapat memilih lebih dari satu pilihan.
S u b m i t : d i g u n a k a n u n t u k m e m a n g g i l a t a u f i l e y a n g
d i t u n j u k o l e h atribut action, dan data akan dimasukan sesuai
dengan perintah didalam file action tersebut.
Reset : digunakan untuk menginisialisasi setiap, elemen dalam form atau
mengembalikan tag-tag form ke dalam kondisi semula.
Image : digunakan untuk menampilkan gambar sebagai pengganti button.
Select size=”nilai”>
![Page 31: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/31.jpg)
Merupakan menu pilihan dalam bentuk drop down dimana user hanya dapat
memilih yang ada dalam menu tersebut . Untuk menentukan poin-point dari
pilihan tersebut digunakan tag<option>.
<textarea cols=”jumlah_kolom” rows=”jumlah_baris”>Digunakan untuk memasukan data berupa kalimat, memo atau pernyataan sesuai dengan keinginan user, dimana nantinya data tersebut akan dikirim ke server.
Praktek1. Ketikan script dibawah ini jalankan dan amati hasilnya :
Terdapat kolom utk mengisi inputan pada kolom Nama dan E-mail.
![Page 32: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/32.jpg)
2. Tambahkan tag berikut pada script setelah baris email jika dilihat pada browser.
<tr bgcolor="yellow"><td bgcolor="#FFCCFF">Sistem Operasi<br>yang dipakai</td><td bgcolor="FFCCFF">
<input type="radio" name="pilih" checked>Windows<br><input type="radio" name="pilih">Linux<br><input type="radio" name="pilih">Unix</td></tr>
3. Jalankan dan amati hasilnya :
![Page 33: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/33.jpg)
Tag tersebut memberikan pilihan untuk memilih salah satu pada kolom diatas.4. Tambahkan tag berikut setelah tag-tag yang ada pada praktek diatas.
<tr bgcolor="yellow"><td bgcolor="#FFCCFF">Alasan Penggunaan<br>sistem
Operasi</td><td bgcolor="FFCCFF"><input type="checkbox">Stabil<br><input type="checkbox">Bebas virus<br><input type="checkbox">Freeware</td></tr>
5. Jalankan dan amati hasilnya :
![Page 34: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/34.jpg)
Tag diatas hampir sama dengan yang sebelumnya Cuma bedanya pada yang sebelumnya hanya bisa dipilih salah satu,tag yang satu ini bisa dipilih semua.
6. Tambahkan tag berikut ;<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">Berapa Lama Anda<br>Memakai OS Tersebut?</td>
<td bgcolor="FFCCFF"><select size="1"><option>Kurang dari 1 Tahun<Option>1-5 Tahun<Option>Lebih Dari 5 Tahun</select></td></tr>
7. Jalankan dan amati hasilnya :
![Page 35: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/35.jpg)
Pada tag tersebut terdapat pilihan yang sudah ada jawabannya.8. Tambahkan tag berikut :
<tr bgcolor="yellow"><td bgcolor="#FFCCFF">Komentar</td><td bgcolor="FFCCFF">
<textarea rows="3" cols="20"></textarea></td></tr>
![Page 36: dirppan23.files.wordpress.com · Web viewLAPORAN PRAKTIKUM PEMOGRAMAN WEB 1 MODUL 1 – 5 Nama:Dede Irpan Nim:2011081037 Prodi:Tekhnik Informatika LABORATORIUM KOMPUTER FAKULTAS ILMU](https://reader033.fdocuments.net/reader033/viewer/2022051206/5b0127137f8b9a89598db7da/html5/thumbnails/36.jpg)
9. Jalankan script tersebut dalam laporan utama.
TugasTugas sudah dikerjakan dan dikirim melalui email beserta lampirannya.