Home Posts filed under HTML
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Tuesday, 3 January 2017

Menginput Data Kedalam Tabel Tanpa Database Dilengkapi Dengan Validasi (Javascript)

Cara Memasukkan Data Kedalam Tabel Tanpa Database Dilengkapi Validasi Menggunakan Javascript (Sederhana)


Dettline, DettlineTube

 Pada artikel ini merupakan kelanjutan dari artikel “Membuat Validasi Input Menggunakan Javascript” dan “Cara Memasukan Data Kedalam Tabel Sementara Menggunakan Javascript”. Keduanya artikel tersebut akan dicoba untuk digabungkan menjadi satu. Jadi, ketika data kosong akan di input maka data tersebut tidak akan langsung masuk kedalam tabel, namun akan ada tampilan validasi yang akan memberitahu bahwa data tersebut masih salah atau masih kosong. Okey langsung saja.

Membuat Tampilan HTML Simpan Dengan Nama Tutor.html

<html>
<head>
  <title>Dettline</title>
  <script src='javascript.js'></script>
</head>
<body>
<form name='biodata' method='post' action='tutor.html'>
<pre>
Nim     : <input type='number' name='nim'><p id='val_nim'>* Hanya boleh di-isi dengan angka</p>
Nama    : <input type='text' name='nama' ><p id='val_nama'>* Masukkan Nama Mahasiswa</p>
Agama   : <select name='agama'>
      <option>Islam
      <option>Hindu
      <option>Budha
      <option>Kristen              
      <option>Konghucu        
      </select><p>* Pilih Agama</p>
</pre>
  <input type='button' onClick='terimainput()' value='Simpan'>
  <input type='reset' value='Ulangi'>

 </form>

 <table border='1' id='tabelinput'>
<tr>
  <td>NIM</td>
  <td>NAMA</td>
  <td>AGAMA</td>
</tr>
</table>

 </body>
</html>
Penjelasan mengenai codingan diatas sudah dibahas lengkap pada artikel-artikel sebelumnya. Artikel1 dan artikel2. Namun dettline akan coba mengulasnya sedikit. Pada HTML diatas bagian yang terpenting adalah name dan id serta onClick. Bagian tersebut adalah bagian yang terhubung dengan javascript. Dalam tutorial ini, Javascript itu sendiri dibuat dengan file yang berbeda (tidak ditulis langsung di dalam file tutor.html). Berikut adalah langkah untuk membuat file javascript. Menggabungkan Javascript Validasi dan Mandatory Javascript.

Membuat File Javascript Simpan Dengan Javascript.js


 Simpanlah file berikut dalam 1 lokasi penyimpanan yang sama dengan file tutor.html diatas.

               
function terimainput(){
var x=document.forms['biodata']['nim'].value;
var y=document.forms['biodata']['nama'].value;
var z=document.forms['biodata']['agama'].value;
if(x==null || x=="")
{
  document.getElementById("val_nim").innerHTML="<font color='red'><b>* Harap Isi Kolom NIM Dengan Benar</b></font>";

  if(y==null || y=="") {
  document.getElementById("val_nama").innerHTML="<font color='red'><b>* Harap Isi Kolom NAMA Dengan Benar</b></font>";
  } else {
  document.getElementById("val_nama").innerHTML="<font color='purple'>* Benar</font>";
  }
} else {
document.getElementById("val_nim").innerHTML="<font color='purple'>* Benar</font>";

if(y==null || y=="") {
  document.getElementById("val_nama").innerHTML="<font color='red'><b>* Harap Isi Kolom NAMA Dengan Benar</b></font>";
  } else {
    document.getElementById("val_nama").innerHTML="<font color='purple'>* Benar</font>";

    var tabel = document.getElementById("tabelinput");
    var row = tabel.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);

    cell1.innerHTML = x;
    cell2.innerHTML = y;
    cell3.innerHTML = z;
  }
}
}


Bila sampai tahap ini telah sobat buat, maka sobat dapat mengujinya sekarang. Secara garis besar tampilannya akan seperti ini
Dettline, DettlineTube

 Dan ada sedikit tambahan dari Dettline, semoga bermanfaat.
Dettline menambahkan lampiran kedua file diatas. Sobat dapat mengunduhnya melalui GoogleDrive > Download

Terimakasih atas kunjungan sobat. Semoga artikel ini dapat membantu.
Read more

Cara Memasukkan Data Kedalam Tabel Tanpa Menggunakan Database (Javascript)

(HTML) Membuat Tabel Sementara Menggunakan Javascript

Kali ini Dettline akan menjelaskan bagaimana “caranya untuk menginput data kedalam tabel tanpa menggunakan database”. Cara yang digunakan juga sangatlah sederhana, sobat hanya perlu menambahkan beberapa baris codingan javascript. Namun data yang nantinya sobat masukkan ini sifatnya hanya sementara. Sehingga ketika sobat merefresh ulang laman tersebut, data yang dimasukan tadi akan hilang. Hhhmm tidak permanen ya!? Benarkah isi artikel ini yang sobat cari? Sebenarnya artikel ini Dettline buat berdasarkan tugas yang admin pernah terima di kampus. Mungkin saat ini ada diantara sobat Dettline yang sedang mencarinya. Semoga bisa menjadi solusi untuk sobat.

Buat Format HTML dan Javascript



Strukturnya hampir sama dengan artikel Dettline sebelumnya, yaitu tentang “Membuat Validasi Input Menggunakan Javascript”. Kolom yang diisi hanya pada kolom NIM dan NAMA saja. Sedangkan kolom AGAMA menggunakan menu combobox. Tombol SIMPAN dan ULANGI menggunakan type “button” dan ”reset”.

Kodingan yang dibuat juga sebenarnya tidak jauh berbeda dengan artikel sebelumnya. Hanya ada sedikit pengurangan dan penambahan saja. Hasil perubahan yang Dettline lakukan isinya seperti dibawah ini. Simpan file tersebut dengan nama tutor.html
<html>
<head>
      <title>Dettline</title>
      <script src='javascript_tabel.js'></script>
</head>
<body>
<form name='biodata' method='post' action='tutor.html'>
<pre>
Nim     : <input type='number' name='nim'>
Nama    : <input type='text' name='nama' >
Agama   : <select name='agama'>
      <option>Islam
      <option>Hindu
      <option>Budha
      <option>Kristen             
      <option>Konghucu       
      </select>
</pre>
      <input type='button' onClick='terimainput()' value='Simpan'>
      <input type='reset' value='Ulangi'>

</form>

<table border='1' id='tabelinput'>
<tr>
      <td>NIM</td>
      <td>NAMA</td>
      <td>AGAMA</td>
</tr>
</table>

</body>
</html>
Perbedaan yang paling mencolok dari artikel sebelumnya adalah format yang ada pada TAG <table>. Gunanya TAG tersebut adalah untuk menampilkan data yang telah sobat input sebelumnya.

Atribut id yang ada di dalam TAG table digunakan sebagai selector penghubung javascript. Dengan id tersebut, javascript akan memiliki hak akses untuk memanipulasi tabel tersebut.

*Ket: bila sobat ingin menambahkan CSS di dalam tabel yang memiliki selector id tersebut. Sebaiknya sobat menggunakan selector CSS Class. Agar tidak mengganggu selector antara CSS dan Javascript.

Yang perlu sobat perhatikan di sini adalah atribut name yang ada didalam TAG <form> dan TAG <input>. Keduanya digunakan untuk identifikasi atau pemberian nama agar javascript dapat mengaksesnya dan menerima inputannya.


Sedangkan atribut onClick didalam tombol/button, digunakan untuk meletakkan function javascript. Berikut adalah isi dari coding javascript. Simpanlah di lokasi penyimpanan yang sama dengan file html diatas lalu simpan dengan nama javascript_tabel.js. 


function terimainput(){
       var x=document.forms['biodata']['nim'].value;
       var y=document.forms['biodata']['nama'].value;
       var z=document.forms['biodata']['agama'].value;
               
                                               
       var tabel = document.getElementById("tabelinput");
       var row = tabel.insertRow(1);
       var cell1 = row.insertCell(0);
       var cell2 = row.insertCell(1);
       var cell3 = row.insertCell(2);
               
       cell1.innerHTML = x;
       cell2.innerHTML = y;
       cell3.innerHTML = z;
}
Function terimainput() merupakan fungsi yang akan digunakan oleh tombol Simpan yang terdapat pada file tutuor.html. Saat tombol tersebut di-klik maka isi dari function terimainput() akan di-eksekusi atau dijalankan.

Lalu var x, var y, var z adalah nama variabel yang menerima isi dari data nim (var x), nama (var y) dan agama (var z). Sedangkan penulisan “biodata” adalah identifikasi dari TAG <form> yang ada di dalam file tutor.html. Maksudnya adalah variabel x,y dan z akan mengambil data dari formulir biodata, dan masing-masing diantaranya mempunyai peran penting untuk mengolah data tertentu (nim, nama, agama).

var tabel adalah nama variabel untuk mewakili tabel yang memiliki id “tabelinput” yang ada didalam tutor.html. Sedangkan var row digunakan untuk menambahkan baris pada tabel tersebut, dan kolomnya diwakili oleh variabel var cell1, var cell2, dan var cell3. Selanjutnya var cell1, var cell2, dan var cell3 diisi dengan variabel x, y dan z.


Uji Coba


Setelah dua file tersebut telah sobat buat, sekarang silakan jalankan file tutor.html lalu cobalah sobat praktikan, Bisakah tampil seperti ini?


Berhasil bukan? Selamat, selamat.
Berikutnya Dettline akan coba untuk membuat artikel gabungan antara artikel ini dengan artikel “Membuat Validasi Input Menggunakan Javascript”. Terimakasih atas kunjugan sobat. Semoga artikel ini dapat membantu.
Read more

Membuat Validasi Input Menggunakan Javascript (Mandatory Javascript)

Mandatory Javascript

Bagi sobat yang sedang mencari tahu bagaimana caranya untuk membuat validasi sebuah kolom inputan (HTML). Mungkin kehadiran sobat pada artikel ini bisa menjadi pilihan yang tepat. Namun, sebelum membahas isi dari tema artikel ini, ada 1 hal yang perlu sobat ketahui terlebih dahulu, yaitu Mandatory Javascript. Pernah mendengarnya? 2 Kata tersebut adalah sebutan umum untuk codingan yang sejenis ini atau codingan yang digunakan untuk membuat validasi (menggunakan javascript). Untuk cara-caranya juga beragam, Mandatory Javascript tidak hanya ada 1 jenis, beberapa diantaranya memiliki caranya tersendiri. Namun pada artikel ini akan Dettline coba untuk menyajikan codingan yang menurut Dettline mudah untuk dimengerti. Okey langsung saja kita bahas codingannya.


Buatlah Format Form Seperti Dibawah Ini


Jadi, kolom yang dapat diisi hanya pada kolom NIM dan NAMA saja. Sedangkan kolom AGAMA menggunakan menu combobox. Tombol SIMPAN dan ULANGI menggunakan type “button” dan ”reset”. Button nantinya akan digunakan untuk menjalankan Mandatory Javascript, lalu type reset digunakan untuk menghapus semua karakter yang terisi pada kolom input (NIM dan NAMA).

Untuk membuat tampilan seperti gambar diatas, lakukan koding seperti dibawah ini. Buka notepad sobat lalu simpan dengan nama tutor.html
<html>
<head>
      <title>Dettline</title>
</head>
<body>
<form name='biodata' method='post' action='tutor.html'>
<pre>
Nim     : <input type='number' name='nim'><p id='val_nim'>* Hanya boleh di-isi dengan angka</p>
Nama    : <input type='text' name='nama' ><p id='val_nama'>* Masukkan Nama Mahasiswa</p>
Agama   : <select name='agama'>
      <option>Islam
      <option>Hindu
      <option>Budha
      <option>Kristen              
      <option>Konghucu        
      </select><p>* Pilih Agama</p>
</pre>
      <input type='button' onClick=' ' value='Simpan'>
      <input type='reset' value='Ulangi'>

</form>

</body>
</html>

*Ket :
Perlu sobat ketahui, berdasarkan kalimat diatas tadi. Dettline akan mencoba untuk memberikan tutorial yang sederhana agar sobat dapat lebih mudah untuk memahaminya. Maka dari itu codingan diatas menggunakan TAG <PRE>. Gunanya adalah mencetak tampilan halaman apa adanya.

Maksudnya <pre> adalah bila sobat memberi karter “space” atau “spasi”, baik “enter” maupun “tab”, semua itu akan dibaca oleh mesin dan akan ditampilkan kedalam tampilan web. Sehingga sobat dapat lebih mudah untuk membuat baris baru atau mengatur kesamaan posisi dari symbol ( : ) agar menjadi seimbang dan sesuai dengan keinginan.

Input type=’number’ merupakan sebuah atribut yang menandakan bahwa inputan harus berupa angka. (Kemungkinan bila melaui Chrome, macam-macam karakter tidak dapat diketik, sedangkan lewat Firefox karakter tetap bisa diinput namun saat klik tombol simpan, kolom akan berubah menjadi merah. Yang menandakan bahwa inputan salah).

<p id=’val_nim’> dan <p id=’val_nama’>
Digunakan untuk memberi notif bila ada kesalahan inputan. <P> sendiri maksudnya adalah paragraf. Paragraf tersebut akan di-replace ketika ada kesalahan input.

Setelah itu yang perlu diketahui oleh sobat selanjutnya adalah atribut “NAME”. Kenapa ada atribut tersebut? Atribut tersebut digunakan untuk pemberian nama identitas atau dapat disebut juga sebagai variabel yang akan digunakan untuk keperluan javascript.

Lalu untuk apa perintah “onClick” dan “Value”?
Gunanya onClick yaitu sebagai perintah yang akan dijalankan ketika tombol tersebut di-klik.
Sedangkan Value fungsinya untuk memberikan tulisan yang akan ditampilkan pada tombol.

Hampir lupa mengenai method dan action.
Gunanya adalah untuk menentukan parsing data dan juga untuk menentukan lokasi tujuan yang akan menerima inputan. Untuk method/parsing data ada yang menggunakan GET (Menampilkan data didalam link address) ataupun POST (Menyembunyikan data agar tidak tampil pada link address).
Sebenarnya penggunaan method dan action tidak berpengaruh penting pada tutor kali ini, namun hal ini bisa menjadi gambaran untuk sobat nantinya, bahwa data (inputan) dapat dikirim melalui atribut method dan action.

Membuat Coding Javascript Mandatory

Buatlah koding seperti berikut, simpan dengan nama javascript.js

function terimainput(){
    var x=document.forms['biodata']['nim'].value;
    var y=document.forms['biodata']['nama'].value;
    var z=document.forms['biodata']['agama'].value;
               
    if(x==null || x=="")
    {
         document.getElementById("val_nim").innerHTML="<font color='red'><b>* Harap Isi Kolom NIM Dengan Benar</b></font>";
                               
         if(y==null || y=="") {
         document.getElementById("val_nama").innerHTML="<font color='red'><b>* Harap Isi Kolom NAMA Dengan Benar</b></font>";                                      
         } else {
         document.getElementById("val_nama").innerHTML="<font color='purple'>* Benar</font>";
         }
    } else {
                               
         document.getElementById("val_nim").innerHTML="<font color='purple'>* Benar</font>";
                               
         if(y==null || y=="") {
         document.getElementById("val_nama").innerHTML="<font color='red'><b>* Harap Isi Kolom NAMA Dengan Benar</b></font>";                                      
         } else {
                               
         //PROSES INPUT             
                               
         }
    }
}

*Ket:
Untuk lokasi penyimpanan, sebaiknya disimpan di lokasi penyimpanan yang sama dengan tutor.html yang tadi telah sobat buat.

Penjelasannya.
Function terimainput() merupakan fungsi yang akan digunakan oleh tombol Simpan yang terdapat pada file tutuor.html. Saat tombol tersebut di-klik maka isi dari function terimainput() akan di-eksekusi atau dijalankan.

Lalu var x, var y, var z adalah nama variabel yang menerima isi dari data nim (var x), nama (var y) dan agama (var z). Sedangkan penulisan “biodata” adalah identifikasi dari TAG <form> yang ada di dalam file tutor.html. Maksudnya adalah variabel x,y dan z akan mengambil data dari formulir biodata, dan masing-masing diantaranya mempunyai peran penting untuk mengolah data tertentu (nim, nama, agama). Mudah dipahami kan sobat?

Lalu if – else, if – else tersebut adalah opsi penentu. Logikanya adalah
if(x==null || x==””)    ---> Jika variabel x sama dengan kosong atau variabel x tanpa sebuah isi.
if(y==null || y==””)    ---> Jika variabel y sama dengan kosong atau variabel y tanpa sebuah isi.

Sedangkan else adalah pengecualian. Maksudnya yaitu bila keadaan yang ditentukan (seperti contoh opsi penentu tersebut) tidak sesuai atau dapat diartikan bahwa x memiliki nilai, atau y memiliki isi. Maka perintah else –lah yang akan dijalnkan.

Struktur javascript diatas memiliki if – else di dalam if – else.

 Oh iya, pada bagian //PROSES INPUT. Di bagian tersebut dapat digunakan untuk eksekusi lanjut bila data yang diinput semuanya bernilai true/benar. Bila sobat masih kurang paham mengenai alur tersebut dapat sobat sampaikan melalui kolom komentar, atau hubungi admin langsung.

Singkronisasi HTML dan Javascript

Bila masing-masing file telah dibuat, sekarang adalah waktunya untuk menggabungkan kedua file tersebut. Dengan cara sisipkan TAG

<script src='javascript.js'></script>

Dibawah TAG <title>Dettline</title>
Setelah itu isikan onClick yang ada pada button simpan dengan isi ‘terimainput()’. Maka akan tersusun seperti ini:

<input type='button' onClick='terimainput()' value='Simpan'>

Bila semua cara telah sobat ikuti dengan lancar, maka sobat dapat melihat langsung prosesnya. Buka HTML sobat, lalu silakan uji coba file tersebut. Hasilnya mungkin tidak akan jauh berbeda seperti ini:

Setiap ada kolom yang belum di-isi atau data yang dimasukkan salah (seharusnya angka, namun diinput huruf) lalu tombol Simpan di-klik maka akan menampilkan validasi pada bagian yang salah.

 Demikian tutorial pertama pada kategori HTML versi Dettline. Terimakasih atas kunjungan sobat, semoga artikel ini dapat membantu. Bila ada pertanyaan yang ingin disampaikan, sobat dapat bertanya melalui komentar atau hubungi akun Dettline langsung.




Read more
Subscribe to: Posts (Atom)