Membangun Form Pendaftaran Wordpress Plugin

1. Writing a plugin Form PendaftaranWordpress Plugin AfriqYasinRamadhan Rekayasa Web Kamis 100512 10.30

2. DARI MANA SAYA HARUS MEMULAI ? DARI sini !!!

3. STEP 1 Analisisdanperancangan

4. aNalisisdanperancangan KEBUTUHAN USER DAN SISTEM Hal pertama yang haruskitalakukanadalahmenganalisadanmerancangsebuah sistem yang akankitaimplementasikanmenjadisebuah plugin di wordpresstersebut. Dalamkasus form pendaftaranini, tidakmembutuhkansebuahanalisadanperancangan yang rumit. Kita cukupmendefinisikaninputanapasaja yang akandibutuhkanoleh user dalampendaftaran. KebutuhanUsernya : - Alamat web institusi - NamaInstitusi - PimpinanInstitusi - AlamatInstitusi - Email Institusi - Tim Pengelola - Subjek - Motivasi KebutuhanSistem : - Form Alamat web institusi - Form NamaInstitusi - Form PimpinanInstitusi - Form AlamatInstitusi - Form Email Institusi - Form Tim Pengelola - Form Subjek - Form Motivasi - Tanggal

5. PERANCANGAN TABEL PERANCANGAN FORM Form : Mapping Table

6. STEP 2 Persiapan & mulaiimplementasi

7. persiapan Mulaiimplementasi • - Pastikanandasudahmendownloadwordpress (wordpress.org) • - Install wordpress di komputeranda. • - Buka site : codex.wordpress.org. writing plugin - Masukkedirektoriwp-content -> plugins - Buat folder form-pendaftaran-plugin. - Buat file form-pendaftaran-plugin.php di dalam folder tersebut

8. Step 3 Membuatdeskripsi plugin

9. Deskripsi plugin • /* • Plugin Name: Nama Plugin • Plugin URI: Website Plugin • Description: Deskripsi Plugin. • Author: NamaPembuat • Version: Versi Plugin • Author URI: Website Author • */

10. Step 4 Membuat function install plugin

11. Function instal plugin • Kita akanmembuatsebuah function dimanaketika plugin ini di install, makaakanlangsungotomatismembuattabelpada database wordpresstersebut. • function install_plugins() { • global $wpdb; • $table_name = $wpdb->prefix . "pendaftaran"; • $sql = "CREATE TABLE " . $table_name . "( • field_yangakandibuat • )”;”; • } • register_activation_hook(__FILE__, 'install_plugins');

12. Step 5 Membuat menu page & sub menu page

13. Membuat menu page • add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position ); • $page_title = title yang munculpada page tersebut • $menu_title = judul menu page • $capability = Kemampuan yang dibutuhkanmenu untukditampilkankepadapengguna • $menu_slug = Nama slug untukmerujukke menu ini • $function = Fungsi yang akan di panggilketikamengklik menu ini • $icon_url = urldari icon • $position = letak menu

14. Membuat sub menu page • add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function ); • $parent_slug = nama slug dariinduk menu (menu page) • $page_title= title yang munculpada page sub menu tersebut • $menu_title = Nama sub menu • $capability = Kemampuan yang dibutuhkan menu untukditampilkankepadapengguna • $function = Fungsi yang akan di panggilketikamengklik sub menu ini • $menu_slug = Nama slug untukmerujukke menu ini

15. Membuat function • Langkahselanjutnyakitaakanmembuatsebuah function yang nantinyaituakan di panggiloleh menu page dan sub menu page • // untuk menu page & sub menu page (setting) • function frm_pndftrn_settings() { • //statement • } • //untuk sub menu page lihatpendaftar • function show_pendaftar() { • //statement • }

16. Step 6 Membuattampilan form pendaftaran

17. Membuattampilan form • Kemudianselanjutnyakitaakanmembuattampilanuntuk form pendaftaran. Form iniakan di tampilkan di end user. • function frm_pndftrn_tampilform() { • //tampilan form • }

18. Lalubagaimanacaranya agar form dapat di tampilkan di end-user ? add_shortcode( $tag , $func ); $tag = tag yang nantidipakaibuatmenampilkan $func $func = fungsi yang dipanggilketikamenuliskan $tag

19. Step 7 Download pendaftar

20. Download pendaftar • Pada menu lihatpendaftar, adafasilitas yang diberikanuntuk download data daripesertalomba yang telahberhasilmendaftar. Kita buat function untuk download, dancaramemanggil / mengeksekusinyatinggalmemakai trigger saja • //function • download_pendaftar(){ • //statement • } • //link download • <a href="?page=form-pendaftaran&hal=download“>Download</a> • if($_GET['hal']=='download'){ • download_pendaftar(); • }

21. Step 8 Need css / js ?

22. Memanggil file css • Jikakitamemerlukan file cssuntuk di panggil, kitabisamenggunakan function : • wp_enqueue_style( $handle, $src ); • $handle = Namastylesheet • $src = URL kestylesheet • wp_enqueue_style( 'frmpndftrnStylesheet', WP_PLUGIN_URL .'/form-pendaftaran-plugin/form_pendaftaran_style.css' );

23. Memanggil file js • Sedangkanjikakitamemerlukan file jsuntuk di panggil, kitabisamenggunakan function : • wp_enqueue_script( $handle, $src ); • $handle = Namastylesheet • $src = URL kestylesheet • wp_enqueue_script( ( 'frmpndftrnScript', WP_PLUGIN_URL .'/form-pendaftaran-plugin/jquery.js' );

24. Step 9 put menu page in admin menu and finish

25. Memanggil file js • Langkahterakhir, agar menu page dapat di baca di halaman admin wordpress, kitamemberikan action terhadap menu page di halaman admin • add_action( $tag, $function_to_add); • $tag = Namadariaction yangakandihubungkan • $function_to_add = Namafungsi yang ingindipanggil • add_action( 'admin_menu', 'frm_pdftrn_admin_menu' ); FINISH

26. Daftarpustaka http://codex.wordpress.org/