-->

K.E ^_~ Yang lagi galau ini penawarnya link

Cara sederhana membuat mesin genertor html



Salah satu fungsi javascript yang sangat penting adalah kemampuannya mengambil nilai dari suatu input dan menjadikannya sebagai nilai dari sebuah variable. Nilai ini sendiri dapat dijadikan sebagai patokan utama untuk membangun grid. Bagaimana caranya?

Tulisan ini akan mencoba membahas implementasi itu yaitu tentang cara sederhana membuat mesin generator html. Kebetulan bahasan kemarin tentang kotak yang berubah warna saat di klik, agar lebih terarah maka hasil dari mesin generator kita juga berupa kotak-kotak warna kuning.

Dasar Pengetahuan: memanggil value input
Untuk dapat menangkap input value kita dapat memanggil id maupun class dari elemen input diikuti dengan penangkapan value-nya.

Syntax
document.getElementById("idDariInput").value;

 <input type="text" id="inputvalue" value="ini isi dari input" />

Penangkapan value dari input di atas dapat dilakukan dengan cara

 var coba = document.getElementById("inputvalue").value;

 document.write(coba);


Dasar Pengetahuan: property innerHTML

Dengan innerHTML kita dapat mengganti teks pada sebuah element yang sudah ada sebelumnya, bahkan dengan properti ini pula kita dapat membuat (generate) satu set dokumen html secara utuh.

Syntax
sesuatu.innerHTML = "apapun";
Contoh Penggunaan

<!-- elemen yang hendak dimanipulasi -->
<div id="angel">ada</div>
<input type="button" value="coba" onclick="foo()"/>

<!-- Saat tombol diklik jalankan fungsi ini -->
<script type="text/javascript">
    function foo(){
      document.getElementById("angel").innerHTML = "tidak ada"; 
    }
</script>


Penerapan

Dari dua hal tersebut dan sedikit pemanfaatan looping kita dapat membuat mesin sederhana pembangun grid, dimana jumlah grid yang terbentuk sesuai dengan keinginan user.

Buat elemen html


<div id="cangkang">
    Jml Kolom: <input type="text" name="kolom" id="kolom"/>
    Jumlah Baris: <input type="text" name="baris" id="baris"/>
    <input type="button" value="Buat grid tts!" onclick='buatgrid();'/>
    <br /><br />
  
    <div id="aanops"><!-- hasil generate --></div>
</div>


Fungsi generator grid


function buatgrid(){
    var jmklm = document.getElementById('kolom').value;
    var jmbrs = document.getElementById('baris').value;
        
    var grid = '';
    for( var i=0; i<jmbrs;i++) 
    {
        grid += '<div id="kotakwrap">'; //tiap baris diapit oleh element dg id kotakwrap
        for( var j=0; j<jmklm;j++)
    {
      grid += '<div id="kotak"></div>'; 
    }
    
    grid += '</div>';
    grid += '<div style="clear:both;"></div>'; //menetralkan float: left;
  }
  
  document.getElementById('aanops').innerHTML = grid;
}


Atur tampilan grid melalui css


#cangkang {
    background: #444444;
    min-height: 200px;
    padding: 20px;
    color: white;
}

#cangkang > input[type="text"] {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    height: 20px;
    line-height: 25px;
    margin: 12.5px 0;
    vertical-align: middle;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
#cangkang > input[type="text"]:focus {
  border-color: rgba(82, 168, 236, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
    outline: 0 none;
}

#kotakwrap {
    width: 100%;
}

#kotak {
    background:white;
    width: 36px;
    height: 36px;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    float: left; /* melekatkan tiap kotak ke sisi kiri */
}



Jml Kolom: Jumlah Baris:

comment 0 komentar:

Poskan Komentar

Catatan:
Seluruh komentar yang masuk akan dimoderasi terlebih dahulu. Komentar yang berbau spam, kasar, menghina, seluruhnya yang bersifat menghancurkan bukan membangun tidak akan ditampilkan. Silahkan bertanya dan memberi pendapat dengan sopan dan sesuai aturan.

Anda diperbolehkan mempublikasikan ulang artikel ini, dengan syarat:
1. Mintalah izin dengan cara berkomentar di bawah artikel ini
2. Wajib menyertakan link ke artikel ini dan menyertakan nama penulis

 
© Klikedukasi 2008 - 2013 | Design by Panembahan Satyapradana | 170p3x