MODUL V, WEB 1

MEMBUAT FORM
 

1.      TUJUAN
Mahasiswa mempu merancang dan membuat form dan mengkombinasikannya dengan table untuk ditampilkan dalam dokumen web sehingga menjadi web yang lebih menarik dan interaktif. Khususnya mahasiswa mampu menggunakan textinpu, pasword input, radio button, selected text, control option.
2.      TEORI SINGKAT
         Perintah dasar yang digunakan untuk membuat form adalah
        

                  Statemen
        

         Statemen di sini tergantung jenis yang akan kita gunakan:
         a.      input type=”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.      Membuat form input text dan input password. Program di bawah ini digunakan untuk membuat form isian berupa text untuk dituliskan melalui keyboard. Ada dua jenis yang ditampilkan pada listing ini yaitu input type =”text” dimana data yang dapat ditampung adalah text berupa charakter maupun string. Sama halnya dengan input type=”password” namun pada input type password ini pada waktu user menuliskan/mengetik secara otomatis java akan mengenscripnya menjadi kode yang tidak dapat dibaca oleh orang lain yang melihatnya. Sebagaimana tampilan hasil script form di bawah ini menunjukkan bahwa area text diisi dengan nama dan tertulis jelas, sedangkan pada area password tulisan berbentuk kode yang tidak dapat dibaca oleh orang lain. Senada dengan perintah-perintah dalam html selalu diikuti dengan statemen yang mengacu pada bentuk yang diinginkan. Sehingga pada pembuatan fom ini ada statemen () untuk memulai pembuatan form dan pada akhir form ditutup dengan  Script ini diberi nama/title Mencoba Form sehingga akan dituliskan pada top bar Mencoba Form yang dapat dijadikan sebagai pengingat atau identifikasi file / web apa yang sedang dibuka oleh penikmat web.   Username: Password:               Hasil program:                 Praktek 2. Agak berbeda dengan perintah di atas form ini digunakan untuk mempermudah pengguna dalam mengisikan sesuatu dengan memilih pilihan yang sudah disediakan. Pengguna dapat memilih salah satu itulah maka disebut input type radio dimana pengguna hanya berhak memilih salah satu dari pilihan. Dan tidak diperkenankan untuk memilih lebih dari satu. Sedangkan apabila pengguna diperkenankan untuk memilih lebih dari satu maka dapat menggunakan input type yang lain, yang akan dijelaskan sebagaimana script di bawah pada laporan ini. Selain menggunakan input type=”radio” ada script ini juga menggunakan perintah yang akan memerintahkan untuk membuat kotak area dimana tersebut dituliskan sampai adanya penutup . Kotak yang kita buat tersebut dapat kita beri nama atau label berupa legend atau legenda. Ini dapat dibuat dengan perintah nama Legenda sebagaimana di bawah ini yang dituliskan setelah kita menuliskan . Dapat kita lihat tampilan script html hasil dari praktek kedua ini bahwa ada kotak yang mengelilingi form action radio tersebut dengan nama Agama. Pengguna tinggal mengklik mana yang menjadi pilihan agamanya. Jelas ini menarik bagi pengguna, dan saya rasa cukup memudahkan karena pengguna tidak perlu susah mengetik agama apa yang dipeluknya. Namun tinggal mengklik salah satu pilihan yang disediakan, tidak merepotkan, praktis dan tampilannya menarik.     head> Agama Islam Katolik Kristen Hindu Budha                         Gambar hasil eksekusi script:                 Praktek 3. Script yang ketiga pada praktek ini adalah menggabungkan beberapa jenis form. Pertama kita membuat form text dengan yang memperkenankan pengguna mengetikkan charakter/string sebagai inisialisasi nama. Tahap yang kedua adalah membuat text area yaitu perintah input yang hampir sama dengan input text namun mempunyai rentang masukan yang lebih banyak/besar. Data yang dimasukkan dapat sampai 255 karakter. Perintah ini digunakan adalah , artinya membuat area untuk penulisan input dengan menampilkan panjang 30 karakter dan banyak baris  adalah 5. Sedangkankan isinya bisa tidak terbatas bahkan jika sudah melebihi area yang disediakan akan muncul roll/scroll. Selanjutnya kita buat form berupa checkbox dengan perintah . Input tipe ini mempunyai arti bahwa kita dapat memilih lebih dari satu pilihan. Pilihan yang kita inginkan maka dapat ditandai dengan tanda check/centhang. Artinya konsumen boleh memilih lebih dari satu, berlainan dengan radio. Kita dapat melihat bahwa option/pilihan yang diberikan adalah jenis hobi sehingga name pada input type ini diberi nama hobi, sedangkan value adalah isi yang terkandung di dalamnya. Status variabel yang digunakan untuk menyimpan data tersebut adalah value, di sini terdapat Makan, Tidur, Baca dan Nonton. Sedangkan adanya kata checked berati default yang sudah ditandai adalah option ”Makan”. Script yang terakhir ditulis adalah untuk memberikan kesempatan kepada user agar dapat menyimpan data berupa file dapat berupa foto atau file doc, text atau jenis dokumen lainnya. Perintah yang digunakan adalah . Pengguna dapat memilih file foto dengan mengklik browse. Saat di klick browse ini akan mencari file yang diinginkan dalam data storage yang kita miliki, mungkin saja di hardisk (di partisi C, D, E atau yang lain) dapat di cd ataupun di flash yang terakses oleh komputer yang digunakan. Langkah terakhir adalah memfasilitasi form tersebut agar dapat disimpan [ada data base yaitu dengan adanya kata submit. Sedangkan kata reset adalah pilihan apabila form tersebut sudah terisi sedangkan kita menginginkan untuk menuliskan data baru. Jika hal tersebut yang kita inginkan maka kita dapat memilih tombol reset. Kita juga dapat memberikan komentar saat tanda submit tersebut diklik dengan mengarahkan ke web lain yang memang disediakan untuk mengomentari apakah proses penyimpanan berjalan lancar atau tidak. Sehingga kita perlu membuat satu web untuk komentar tersebut. Kita buat aja dengan nama ”DataP5.html” sebagaimana tertulis pada perintah awal adalah script dimana apabila tombol submit dieksekusi maka akan dikomentari di web DataP5.html tersebut.   Isikan data pribadi Anda        Nama :               Alamat :                                                  Hobi :               Makan        Tidur        Baca        Nonton                 Foto:                                          Anda telah belajar membuat formulir…! Terimakasih     LATIHAN: Sedangkan pada latihan ini kita akan memodifikasi script tampilan pada praktek terakhir dengan memasukkan satu jenis form lagi yaitu jenis option value dengan  perintah . Artinya program ini diminta untuk membuat suatu pilihan namun cara memilihnya cukup dengan mencari data/pilihan apa yang diinginkan, baru setelah itu diklik untuk dimasukkan. Prinsip pekerjaannya sebenarnya sama dengan input type=”radio” namun jenis select name ini menggunakan konsep rolldown (pilihan yang tergulung) dan memilihnya dengan cara menyorot dan di klik. User hanya diperbolehkan untuk memilih satu buah saja. Yang lainnya sama Satu yang perlu kami jelaskan yaitu kita dalam melayout memerlukan table karena dengan tabel kita lebih mudah dalam menempatkan form, ploting dalam membagi cell dapat dimanfaatkan untuk menata rapi form-form yang kita ciptakan.   Isikan data pribadi 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 input data telah selesai

&nbsp        terimakasih karena anda

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

    
5.         KESIMPULAN
a.   Form yang kita gunakan ini bagus dan representatif namun harus memerlukan banyak pembenahan dimana kita lihat bahwa kolaborasi yang menarik adalah antara form dan tabel. Dimana keduanya saling melengkapi terhadap kekurangan yang ada pada keduanya.

      Form inpur data penduduk

     

      No. KTP
     

     

      Nama
     

     

      Alamat
     

           

           

     

      Jenis Kelamin
     

      Laki-laki
      Perempuan
     

      Agama
     

                        0-10 Tahun             11-20 Tahun             21-30 Tahun             31-40 Tahun             >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