Writing a plugin

WRIT

ING A

PLUGIN

Form

Pen

dafta

ran W

ordpre

ss P

lugin

Afriq

Yasin

Ram

adha

n

Rekay

asa

Web

Kam

is

1005

12 1

0.30

DARI SINI !!!

DARI MANA

SAYA H

ARUS

MEMULAI ?

STEP

1

AN

AL I S

I S D

AN

PE

RA

NC

AN

GA

N

Hal pertama yang harus kita lakukan adalah menganalisa dan merancang sebuah sistem yang akan kita implementasikan menjadi sebuah plugin di wordpress tersebut.

Dalam kasus form pendaftaran ini, tidak membutuhkan sebuah analisa dan perancangan yang rumit. Kita cukup mendefinisikan inputan apa saja yang akan dibutuhkan oleh user dalam pendaftaran.

ANALISIS DAN PERANCANGANKEBUTUHAN USER DAN SISTEM

Kebutuhan Usernya :

- Alamat web institusi- Nama Institusi- Pimpinan Institusi- Alamat Institusi- Email Institusi- Tim Pengelola- Subjek- Motivasi

Kebutuhan Sistem :

- Form Alamat web institusi- Form Nama Institusi- Form Pimpinan Institusi- Form Alamat Institusi- Form Email Institusi- Form Tim Pengelola- Form Subjek- Form Motivasi- Tanggal

PERANCANGAN TABEL

Mapping Table

PERANCANGAN FORM

Form :

STEP

2

PE

RS

I AP A

N &

MU

LA

I I MP

LE

ME

NT A

SI

PERSIAPAN

- Pastikan anda sudah mendownload wordpress (wordpress.org)

- Install wordpress di komputer anda.

- Buka site : codex.wordpress.org. writing plugin

MULAI IMPLEMENTASI

- Masuk ke direktori wp-content -> plugins

- Buat folder form-pendaftaran-plugin.

- Buat file form-pendaftaran-plugin.php di dalam folder tersebut

STEP

3

ME

MB

UA

T D

ES

KR

I PS

I P

L UG

I N

/*

Plugin Name: Nama Plugin

Plugin URI: Website Plugin

Description: Deskripsi Plugin.

Author: Nama Pembuat

Version: Versi Plugin

Author URI: Website Author

*/

DESKRIPSI PLUGIN

STEP

4

ME

MB

UA

T F

UN

CT

I ON

IN

ST A

L L PL U

GI N

Kita akan membuat sebuah function dimana ketika plugin ini di install, maka akan langsung otomatis membuat tabel pada database wordpress tersebut.

function install_plugins() {

global $wpdb;

$table_name = $wpdb->prefix . "pendaftaran";

$sql = "CREATE TABLE " . $table_name . "(

field_yang akan dibuat

)”;”;

}

register_activation_hook(__FILE__, 'install_plugins');

FUNCTION INSTAL PLUGIN

STEP

5

ME

MB

UA

T M

EN

U P

AG

E &

SU

B M

EN

U P

AG

E

add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );

$page_title = title yang muncul pada page tersebut

$menu_title = judul menu page

$capability = Kemampuan yang dibutuhkan menu untuk ditampilkan kepada pengguna

$menu_slug = Nama slug untuk merujuk ke menu ini

$function = Fungsi yang akan di panggil ketika mengklik menu ini

$icon_url = url dari icon

$position = letak menu

MEMBUAT MENU PAGE

add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function );

$parent_slug = nama slug dari induk menu (menu page)

$page_title = title yang muncul pada page sub menu tersebut

$menu_title = Nama sub menu

$capability = Kemampuan yang dibutuhkan menu untuk ditampilkan kepada pengguna

$function = Fungsi yang akan di panggil ketika mengklik sub menu ini

$menu_slug = Nama slug untuk merujuk ke menu ini

MEMBUAT SUB MENU PAGE

Langkah selanjutnya kita akan membuat sebuah function yang nantinya itu akan di panggil oleh menu page dan sub menu page

// untuk menu page & sub menu page (setting)

function frm_pndftrn_settings() {

//statement

}

//untuk sub menu page lihat pendaftar

function show_pendaftar() {

//statement

}

MEMBUAT FUNCTION

STEP

6

ME

MB

UA

T T

AM

PI L

AN

FO

RM

PE

ND

AF

TA

RA

N

Kemudian selanjutnya kita akan membuat tampilan untuk form pendaftaran. Form ini akan di tampilkan di end user.

function frm_pndftrn_tampilform() {

//tampilan form

}

MEMBUAT TAMPILAN FORM

LALU BAGAIMANA CARANYA AGAR FORM DAPAT DI

TAMPILKAN DI END-USER ?

$tag = tag yang nanti dipakai buat menampilkan $func$func = fungsi yang dipanggil ketika menuliskan $tag

add_shortcode( $tag , $func );

STEP

7

DO

WN

L OA

D P

EN

DA

F T AR

Pada menu lihat pendaftar, ada fasilitas yang diberikan untuk download data dari peserta lomba yang telah berhasil mendaftar. Kita buat function untuk download, dan cara memanggil / mengeksekusinya tinggal memakai trigger saja

//function

download_pendaftar(){

//statement

}

//link download

<a href="?page=form-pendaftaran&hal=download“>Download</a>

if($_GET['hal']=='download'){

download_pendaftar();

}

DOWNLOAD PENDAFTAR

STEP

8

NE

ED

CS

S /

JS

?

Jika kita memerlukan file css untuk di panggil, kita bisa menggunakan function :

wp_enqueue_style( $handle, $src );

$handle = Nama stylesheet

$src = URL ke stylesheet

wp_enqueue_style( 'frmpndftrnStylesheet', WP_PLUGIN_URL .'/form-pendaftaran-plugin/form_pendaftaran_style.css' );

MEMANGGIL FILE CSS

Sedangkan jika kita memerlukan file js untuk di panggil, kita bisa menggunakan function :

wp_enqueue_script( $handle, $src );

$handle = Nama stylesheet

$src = URL ke stylesheet

wp_enqueue_script( ( 'frmpndftrnScript', WP_PLUGIN_URL .'/form-pendaftaran-plugin/jquery.js' );

MEMANGGIL FILE JS

STEP

9

PU

T M

EN

U P

AG

E I N

AD

MI N

ME

NU

AN

D F

I NI S

H

Langkah terakhir, agar menu page dapat di baca di halaman admin wordpress, kita memberikan action terhadap menu page di halaman admin

add_action( $tag, $function_to_add);

$tag = Nama dari action yang akan dihubungkan

$function_to_add = Nama fungsi yang ingin dipanggil

add_action( 'admin_menu', 'frm_pdftrn_admin_menu' );

MEMANGGIL FILE JS

FINISH

DAFTAR PUSTAKA

http://codex.wordpress.org/