Creating Advance Global Announcement Plugin for ClipBucket

I hope you have reviewed my previous “Getting Started With Plugins Tutorial” before start reading this post.

Well, lets do some practical work,in this tutorial i will create an advance Global Announcement Plugin for ClipBucket that will be displayed all over in ClipBucket with Database and Admin Control Panel

Things we cover in this tutorial

1. Setting Up The Files
2. Editing Plugin Details
3. Writing Basic Plugin Code
4. Setting up an anchor
5. Adding Admin Control
6. Enhancing Editor with WYSIWYG
7. Author’s Tip

Setting Files is very basic, please review my file setup tutorial here

1. create a folder in /plugins directory named “my_global_announcement”
2. create a file in this folder named “my_global_announcement.php” (main file)
3. now create two more files “install_my_global_announcement.php” and “uninstall_my_global_announcement.php”

as their name tells, “my_global_announcement.php” is the main file that has basic details of a plugin that we will add later in the file. and install and uninstall files are related with the main file.

now we will add details in our main file “my_global_announcement.php”

/*
Plugin Name: My Global Announcement
Description: This Plugin will display an announcement on every page of the website
Author: Arslan Hassan
Author Website: http://clip-bucket.com/arslan-hassan
ClipBucket Version: 2
Version: 1.0
Website: http://clip-bucket.com/
Plugin Type: global
*/

now, goto admin panel > Manage Plugins , you will see your plugin listing there, ok now lets move to real thing.

things we need in our plugin

• Displays on each page
• Easily Editable Via Admin Panel
• WYSIWYG editor
• Pop-up announcement, if required, for new visitors

lets write down our very basic code that deals with our announcement.

if(!function_exists("my_global_announcement"))
{
	/**
	 * This function is used to display an announcement on
	 * each page
	 */
	function my_global_announcement()
	{
		echo "<div align='center'>This is our test announcement</div>";
	}
	register_anchor_function("my_global_announcement","global");
}

ok, great, good work so far. we have successfully created a plugin that alteast do something, now its time to go little dynamic, in order to do this. we have to uninstall the plugin, write the installation code that will actually do is, create new table in database which will be used to store the global announcement.

now, open “install_my_global_announcement.php” and write down the following code.

<?php
  //Creating Table for announcement if not exists
  function install_global_announcement()
  {
  global $db;
  $db->Execute(
  'CREATE TABLE IF NOT EXISTS '.tbl("my_global_announcement").' (
  `announcement` text NOT NULL
  ) ENGINE=MyISAM;'
  );
  //inserting new announcement
  $db->Execute("INSERT INTO  ".tbl('my_global_announcement')." (announcement) VALUES ('Hello World!')");
  }
  install_global_announcement();
?>

as you can see, it only does is create new table in database, nothing special, you can write your own codes such as create new directories, setting up the configurations etc, if you are planning to create other plugins.

ok , now we have finished with the installation file, lets write down some uninstallation code, we just have to write things that will undo the installation.

<?php
//Function used to uninstall Plugin
	function un_install_global_announcement()
	{
		global $db;
		$db->Execute(
		'DROP TABLE '.tbl("my_global_announcement")
		);
	}
	un_install_global_announcement();
?>

Your global announcement installation and uninstallation code is done, now lets edit our main code that will get announcement from database.

our main object is to load global announcement from database that we can update any time. so heres how we will do that, first we will right code for getting data from database and then we will write admin area code for updating global announcement

now, we will update our main file and it will be look like this

<?php
/*
Plugin Name: My Global Announcement
Description: This Plugin will display an announcement on every page of the website
Author: Arslan Hassan
Author Website: http://clip-bucket.com/arslan-hassan
ClipBucket Version: 2
Version: 1.0
Website: http://clip-bucket.com/
Plugin Type: global
*/
if(!function_exists("my_global_announcement"))
{
    /**
     * This function is used to display an announcement on
     * each page
     */
    function my_global_announcement()
    {
    	global $db;
    	$result = $db->select(tbl("my_global_announcement"),"*");
    	$announcement = $result[0][0];
    	echo '<div>'.$announcement.'</div>';
    }
    /**
     * Simply gets the announcement from database
     */
    function get_my_global_announcement()
    {
    	global $db;
    	$result = $db->select(tbl("my_global_announcement"),"*");
    	return $announcement = $result[0][0];
    }
    /**
     * Registering function so that we can call it in our SMARTY TEMPLATES
     */
    $Smarty->register_function('get_my_global_announcement','get_my_global_announcement');
    /**
     * Registering Anchor Funtion
     */
    register_anchor_function("my_global_announcement","global");
    /**
     * Addin Admin Menu
     */
    add_admin_menu('My Global Announcement','Edit My Announcement','admin_global_announcement.php','my_global_announcement');
}
?>

Now

1. Uninstall the plugin (if installed)
2. Reinstall it

now, you will see “Hello World!” on every page under menu.

ok, now we have almost accomplished the goal, now lets add some admin controls, to add admin menu we use this function

add_admin_menu(STRING[menu head],STRING[menu name],STRING[file name],STRING[file path relative to plugins directory (optional)]);

This function is used to add menu in admin panel
1 parameter creates menu head i.e "Videos"
2 parameter create menu name i.e "Videos Manager"
3 Parameter used to tell the file name i.e "video_manager.php"
4 Parameter is optional, it tells the path of the file , relative to PLUGINS directory, if it is empty, file will be loaded from admin_area folder

we will create two more files

1. admin_my_global_announcement.php (File that will handle global announcement form)
2. admin_my_global_announcement.html (Template of the php file that will display the form)

we will add pretty simple code for admin panel which will update the global announcement, here is the code for admin_my_global_announcement.php

<?php
  /*
  * @author : Arslan Hassan
  */
  //this will check weather logged in user has admin_access or not , otherwise block the page
  $userquery->login_check('admin_access');
  //setting redirect page cookie
  $pages->page_redir();
  //if form is submit then follow the code inside the parenthesis
  if(isset($_POST['update']))
  {
  //retrieve data from "announcement" field
  $text = $_POST['announcement'];
  //Update the database
  $db->Execute("UPDATE ".tbl("my_global_announcement")." SET announcement='$text'");
  //Add announcement message
  $msg = e("Announcement has been updated",'m');
  }
  //Add Subtitle of admin panel
  subtitle("My Global Annoucment Manager");
  //Loads the template file
  template_files('admin_global_announcement.html',PLUG_DIR.'/my_global_announcement');
?>

we have finished the admin code, lets work with its template, open admin_global_announcement.html, and paste the code below

<h2>Edit My Global Announcement</h2>
<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<form id="form1" name="form1" method="post" action="">
Announcement<br />
<label for="textarea"></label>
<textarea name="announcement" id="announcement" cols="75" rows="6" style="width:100%;">{get_my_global_announcement}</textarea>
<br />
<input type="submit" name="update" value="Update" />
</form></td>
</tr>
</table>

Ok, now save and goto admin panel, you will see My Global Announcement Menu, if you can see it, it means, you have done a perfect job.

we have created a global announcement plugin, what if we want to add some JS and some WYSIWYG editor? its pretty simple. ClipBucket already has some JS plugins such niceEDIT so it wont be a difficult task. all you have to do is, open your “admin_global_announcement.html” and paste the code below

<h2>Edit My Global Announcement</h2>
<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<form id="form1" name="form1" method="post" action="">
Announcement<br />
<label for="textarea"></label>
<textarea name="text" id="page_content" cols="75" rows="6" style="width:100%;">{get_my_global_announcement}</textarea>
<script type="text/javascript">
	  	{literal}
			new nicEditor({fullPanel : true,maxHeight:350}).panelInstance('announcement');
		{/literal}
		</script>
<br />
<input type="submit" name="update" value="Update" />
</form></td>
</tr>
</table>

finally, you are done with a fully featured Global Announcement Plugin. Hope you have understand the basic idea of “How to create clipbucket plugin”

here is a tip for you guys

$Cbucket->add_admin_header(STRING[path to file you want to include in head tag],STRING[file scope](optional))

This function used to include files in <head> tag, in-case you want to execute some javascript or style sheet etc.
this will help you without modifying the original source
1st Parameter is to pass Include File
and 2nd parameter is to tell the file scope
default value of this parameter is "global" which means, it will be included in every page
but if you set it like "my_global_announcement", it will only include in your page where you have defined
THIS_PAGE as "my_global_announcement"

Comments are closed.