Tahapan membuat wordpress plugin untuk menerima input panjang dan lebar dengan HTML. Menghitung menghitung luas dan keliling dengan javascript. Lalu, menampilkan hasil luas dan keliling dengan HTML. Kita gunakan fungsi referensi WordPress add_shortcode.
Contents
WordPress plugin: menghitung luas dan keliling segiempat
1. Persiapkan header plugin
<?php
/**
* Plugin Name: Segi Empat
* Plugin URI: http://www.edisonsutankayo.com/my-coding
* Description: Input panjang dan lebar. Output luas dan keliling.
* Version: 1.0
* Author: Edison Sutan Kayo
* Author URI: http://www.edisonsutankayo.com
*/
// Membuat segiempatplugin shortcode
// Masukkan shortcode [segiempatplugin] dihalaman
2. Tambahkan add_shortcode
Kita akan membuat fungsi dengan nama SegiEmpatPluginShortCode’
Kita gunakan shortcode ‘segiempatplugin’ untuk pemanggilan di halaman/pos.
add_shortcode('segiempatplugin', 'SegiEmpatPluginShortCode');
3. Buat fungsi
Kita deklarasikan fungsi dengan nama sesuai dengan yang dikirimkan oleh add_shortcode.
Berikut blok fungsi tersebut :
function SegiEmpatPluginShortCode()
{
return 'Tambahkan kode disini';
}
4. Tambahkan kode
Kita akan menambahkan kode HTML form dan javascript berikut
<h1>Menghitung luas dan keliling segiempat</h1>
<form>
<p>Panjang: <input type="text" id="panjang"></p>
<p>Lebar: <input type="text" id="lebar"></p>
<p><input type="button" value="Hitung" onclick="hitungLuasKeliling();"> </p>
<p>Luas: <input type="text" id="luas"></p>
<p>Keliling: <input type="text" id="keliling"></p>
</form>
<script type="text/javascript">
function hitungLuasKeliling()
{
var Panjang, Lebar, Keliling, Luas;
Panjang = parseInt(document.getElementById("panjang").value);
Lebar = parseInt(document.getElementById("lebar").value);
Keliling = 2 * (Panjang + Lebar);
Luas = Panjang * Lebar;
document.getElementById("keliling").value = Keliling;
document.getElementById("luas").value = Luas;
}
</script>
Kode diatas akan kita masukan kedalam return ‘ ‘;
5. Kode selengkapnya
<?php
/**
* Plugin Name: Segi Empat
* Plugin URI: http://www.edisonsutankayo.com/my-coding
* Description: Input panjang dan lebar. Output luas dan keliling.
* Version: 1.0
* Author: Edison Sutan Kayo
* Author URI: http://www.edisonsutankayo.com
*/
// Membuat segiempatplugin shortcode
// Masukkan shortcode [segiempatplugin] dihalaman
function SegiEmpatPluginShortCode()
{
return '<h1>Menghitung luas dan keliling segiempat</h1>
<form>
<p>Panjang: <input type="text" id="panjang"></p>
<p>Lebar: <input type="text" id="lebar"></p>
<p><input type="button" value="Hitung" onclick="hitungLuasKeliling();"> </p>
<p>Luas: <input type="text" id="luas"></p>
<p>Keliling: <input type="text" id="keliling"></p>
</form>
<script type="text/javascript">
function hitungLuasKeliling()
{
var Panjang, Lebar, Keliling, Luas;
Panjang = parseInt(document.getElementById("panjang").value);
Lebar = parseInt(document.getElementById("lebar").value);
Keliling = 2 * (Panjang + Lebar);
Luas = Panjang * Lebar;
document.getElementById("keliling").value = Keliling;
document.getElementById("luas").value = Luas;
}
</script>';
}
add_shortcode('segiempatplugin', 'SegiEmpatPluginShortCode');
6. Menampilkan shortcode di halaman/pos
Untuk menampilkan semua proses diatas di halaman/pos tertentu, kita tinggal masukkan shortcode sebagai berikut :
[segiempatplugin]