Cara Membuat Tabel Database Online

Tabel database yang dibahas ini walaupun dibuat pada halaman posting blog akan tetapi terlihat seperti tabel yang dibuat menggunakan microsoft office excel dan atau access. Model tabel database ini dikenal dengan istilah Google code type Visualization.

Cara membuat tabel database online pada halaman posting dapat dilakukan sebagai berikut, yaitu:

1. Sign in di blog
2. Klick Rancangan
3. Klick Edit HTML
4. Cari kode </head> dalam template
5. Tempatkan kode berikut ini pada di atas kode </head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

6. Klick Simpan template untuk menyimpan perubahan
7. Klick Edit entry baru jika ingin langsung membuat posting dari kode di bawah ini.

Langkah-langkah yang diuraikan diatas jika ingin membuat fungsi default atau berlaku secara keseluruhan pada halaman posting. Atau jika ingin membuat tabel-tabel lainnya pada halaman posting media blog yang kita kelola. Sementara jika hanya ingin membuat secara manual dapat menempatkan kode script di atas sebelum (diatas) kode tabel pada bagian bawah halaman posting ini.

Sekarang masuk pada tahap cara menulis kode tabel online pad halaman posting blog dapat dilakukan dengan langkah sebagai berikut yaitu:

1. Klick Edit HTML pada halaman edit entry (membuat posting/artikel) blog
2. Tempatkan kode di bawah ini
3. Klick Compose setelah selesai edit. Hasil dari kode ini belum dapat terlihat pada halaman edit entry blog. Langkah ini hanya diperlukan saja karena untuk menampilkan hasil posting ini dapat langsung diterbitkan/publikasikan pada halaman Edit HTML
4. Klick pratinjau jika ingin melihat hasil sementara
5. Klick Terbitkan Entry jika ingin mempublikasikannya
6. Klick Lihat untuk melihat hasilnya

Hasil dari kode ini dapat meilihat tabel di atas pada halaman posting ini

<script type="text/javascript">       google.load('visualization', '1', {packages: ['table']});     </script> <script type="text/javascript">     function drawVisualization() {       // Create and populate the data table.       var data = google.visualization.arrayToDataTable([         ['Nama', 'Umur', 'Merokok'],         ['Bayu', 22, true],         ['Srina', 21, false],         ['Imut', 20, false]       ]);       // Create and draw the visualization.       visualization = new google.visualization.Table(document.getElementById('table'));       visualization.draw(data, null);     }         google.setOnLoadCallback(drawVisualization);     </script> <div id="table"> </div>

Sumber: Google Code Playground