WordPress plugin: menghitung luas dan keliling segiempat

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.

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]

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.