MODUL V, WEB 1

MEMBUAT FORM
 

1.      TUJUAN
Mahasiswa mempu merancang dan membuat form dan mengkombinasikannyadengan table untuk ditampilkan dalam dokumen web sehingga menjadi web yanglebih menarik dan interaktif. Khususnya mahasiswa mampu menggunakantextinpu, pasword input, radio button, selected text, control option.
2.      TEORISINGKAT
         Perintah dasar yang digunakan untukmembuat form adalah
        

                  Statemen
        

         Statemen di sini tergantung jenis yang akan kita gunakan:
         a.      inputtype=”text”
         b.      input type=”password”
         c.      input type=”radio”
         d.      textarea cols=”30” rows=”5”
         e.      input type=”file”
         f.       input type=”submit”
         g.      input type=”reset”
         h.      select=”name”
                 

 3.      PRAKTEK         a.      Membuatform input text dan input password.Program di bawah ini digunakan untuk membuat form isianberupa text untuk dituliskan melalui keyboard. Ada dua jenis yang ditampilkanpada listing ini yaitu input type =”text” dimana data yang dapat ditampungadalah text berupa charakter maupun string. Sama halnya dengan inputtype=”password” namun pada input type password ini pada waktu usermenuliskan/mengetik secara otomatis java akan mengenscripnya menjadi kode yangtidak dapat dibaca oleh orang lain yang melihatnya.Sebagaimana tampilan hasil script form di bawah inimenunjukkan bahwa area text diisi dengan nama dan tertulis jelas, sedangkanpada area password tulisan berbentuk kode yang tidak dapat dibaca oleh oranglain.Senada dengan perintah-perintah dalam html selalu diikutidengan statemen yang mengacu pada bentuk yang diinginkan. Sehingga padapembuatan fom ini ada statemen () untuk memulai pembuatan form dan pada akhir form ditutupdengan  Script ini diberinama/title Mencoba Form sehingga akan dituliskan pada top bar Mencoba Form yangdapat dijadikan sebagai pengingat atau identifikasi file / web apa yang sedangdibuka oleh penikmat web. Username:Password:             Hasilprogram:              Praktek 2.Agak berbeda dengan perintah di atas form ini digunakanuntuk mempermudah pengguna dalam mengisikan sesuatu dengan memilih pilihan yangsudah disediakan. Pengguna dapat memilih salah satu itulah maka disebut inputtype radio dimana pengguna hanya berhak memilih salah satu dari pilihan. Dantidak diperkenankan untuk memilih lebih dari satu. Sedangkan apabila penggunadiperkenankan untuk memilih lebih dari satu maka dapat menggunakan input typeyang lain, yang akan dijelaskan sebagaimana script di bawah pada laporan ini.Selain menggunakan input type=”radio” ada script ini jugamenggunakan perintah yang akan memerintahkan untuk membuatkotak area dimana tersebut dituliskan sampai adanya penutup. Kotak yang kita buat tersebut dapat kita beri nama ataulabel berupa legend atau legenda. Ini dapat dibuat dengan perintah nama Legenda sebagaimana di bawah ini yangdituliskan setelah kita menuliskan . Dapat kita lihat tampilanscript html hasil dari praktek kedua ini bahwa ada kotak yang mengelilingi formaction radio tersebut dengan nama Agama. Pengguna tinggal mengklik mana yangmenjadi pilihan agamanya. Jelas ini menarik bagi pengguna, dan saya rasa cukupmemudahkan karena pengguna tidak perlu susah mengetik agama apa yangdipeluknya. Namun tinggal mengklik salah satu pilihan yang disediakan, tidakmerepotkan, praktis dan tampilannya menarik.  head>AgamaIslamKatolikKristenHinduBudha                        Gambarhasil eksekusi script:              Praktek 3.Script yang ketiga pada praktek ini adalah menggabungkanbeberapa jenis form. Pertama kita membuat form text dengan yang memperkenankan pengguna mengetikkan charakter/stringsebagai inisialisasi nama.Tahap yang kedua adalah membuat text area yaitu perintahinput yang hampir sama dengan input text namun mempunyai rentang masukan yanglebih banyak/besar. Data yang dimasukkan dapat sampai 255 karakter. Perintah inidigunakan adalah , artinya membuat areauntuk penulisan input dengan menampilkan panjang 30 karakter dan banyakbaris  adalah 5. Sedangkankan isinya bisatidak terbatas bahkan jika sudah melebihi area yang disediakan akan munculroll/scroll.Selanjutnya kita buat form berupa checkbox denganperintah . Input tipe ini mempunyai arti bahwakita dapat memilih lebih dari satu pilihan. Pilihan yang kita inginkan makadapat ditandai dengan tanda check/centhang. Artinya konsumen boleh memilihlebih dari satu, berlainan dengan radio. Kita dapat melihat bahwaoption/pilihan yang diberikan adalah jenis hobi sehingga name pada input typeini diberi nama hobi, sedangkan value adalah isi yang terkandung di dalamnya.Status variabel yang digunakan untuk menyimpan data tersebut adalah value, disini terdapat Makan, Tidur, Baca dan Nonton. Sedangkan adanya kata checkedberati default yang sudah ditandai adalah option ”Makan”.Script yang terakhir ditulis adalah untuk memberikankesempatan kepada user agar dapat menyimpan data berupa file dapat berupa fotoatau file doc, text atau jenis dokumen lainnya. Perintah yang digunakan adalah. Pengguna dapat memilih file foto dengan mengklikbrowse. Saat di klick browse ini akan mencari file yang diinginkan dalam datastorage yang kita miliki, mungkin saja di hardisk (di partisi C, D, E atau yanglain) dapat di cd ataupun di flash yang terakses oleh komputer yang digunakan.Langkah terakhir adalah memfasilitasi form tersebut agardapat disimpan [ada data base yaitu dengan adanya kata submit. Sedangkan katareset adalah pilihan apabila form tersebut sudah terisi sedangkan kitamenginginkan untuk menuliskan data baru. Jika hal tersebut yang kita inginkanmaka kita dapat memilih tombol reset. Kita juga dapat memberikan komentar saattanda submit tersebut diklik dengan mengarahkan ke web lain yang memangdisediakan untuk mengomentari apakah proses penyimpanan berjalan lancar atautidak. Sehingga kita perlu membuat satu web untuk komentar tersebut. Kita buataja dengan nama ”DataP5.html” sebagaimana tertulis pada perintah awal adalah script dimana apabila tombol submit dieksekusimaka akan dikomentari di web DataP5.html tersebut. Isikan datapribadi Anda       Nama :              Alamat:                                                 Hobi :              Makan       Tidur       Baca       Nonton               Foto:                                      Anda telahbelajar membuat formulir…! Terimakasih  LATIHAN:Sedangkan pada latihan ini kita akan memodifikasiscript tampilan pada praktek terakhir dengan memasukkan satu jenis form lagiyaitu jenis option value dengan  perintah. Artinya program ini diminta untuk membuat suatupilihan namun cara memilihnya cukup dengan mencari data/pilihan apa yangdiinginkan, baru setelah itu diklik untuk dimasukkan. Prinsip pekerjaannyasebenarnya sama dengan input type=”radio” namun jenis select name inimenggunakan konsep rolldown (pilihan yang tergulung) dan memilihnya dengan caramenyorot dan di klik. User hanya diperbolehkan untuk memilih satu buah saja.Yang lainnya samaSatu yang perlu kami jelaskan yaitukita dalam melayout memerlukan table karena dengan tabel kita lebih mudah dalammenempatkan form, ploting dalam membagi cell dapat dimanfaatkan untuk menatarapi form-form yang kita ciptakan. Isikan datapribadi Anda       Nama :              Alamat:                                                 Hobi :              Makan       Tidur       Baca       Nonton               Umur :                                   0-10 Tahun

             

11-20 Tahun

             

21-30 Tahun

             

31-40 Tahun

             

>40 Tahun

      

      
Foto:

      

      

      
      
      

TUGAS:

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

proses inputdata telah selesai

&nbsp       terimakasih karena anda

&nbsp &nbsp telah mengisikan data dengan benar …..!

    
5.         KESIMPULAN
a.   Formyang kita gunakan ini bagus dan representatif namun harus memerlukan banyakpembenahan dimana kita lihat bahwa kolaborasi yang menarik adalah antara formdan tabel. Dimana keduanya saling melengkapi terhadap kekurangan yang ada padakeduanya.

      Form inpur datapenduduk

     

      No. KTP
     

     

      Nama
     

     

      Alamat
     

           

           

     

      Jenis Kelamin
     

      Laki-laki
      Perempuan
     

      Agama
     

                        0-10 Tahun            11-20 Tahun            21-30 Tahun            31-40Tahun            >40 Tahun     

      Pekerjaan
     

      Wiraswasta
      Pendidik
      Buruh
      Pengusaha
      Dagang
      Lainnya
     
Foto:

     
     
     
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s