All posts by webdev

Web Maintenance

Anda mungkin tidak berhubungan langsung dengan perusahaan design website Anda, atau Anda mungkin telah mengembangkan website sendiri tetapi tidak punya waktu, peralatan atau keahlian untuk mengembangkan lebih lanjut.
Bali Web Development and Design dapat membantu anda dengan menawarkan dukungan manajemen website.
Web Development Bali mampu mendukung dan memelihara sistem dan memberikan  solusi yang dikembangkan oleh pihak ke 3, dan kami dapat mendukung, memelihara dan mengembangkan sistem atau aplikasi sesuai kebutuhan anda.
Pemeliharaan layanan web secara substansial dapat mengurangi biaya anda dengan menghilangkan kebutuhan untuk mempekerjakan programer atau web designer. 
Web Development Bali menawarkan pilihan berikut untuk pemeliharaan  :

Outsource Pemeliharaan (Maintenance)
Outsourcing pemeliharaan adalah mengontrakkan pengelolaan dan proses pengembangan kepada Web Development Bali. Dengan outsourcing kepada kami, kami akan membantu anda berkonsentrasi dalam kompetensi inti dan mencapai keunggulan yang  kompetitif.

Content Management System (CMS)
Hal ini penting bagi beberapa perusahaan untuk memperbarui dan memelihara situs mereka sendiri, Web Development Bali / Content Management Sytem menawarkan mereka solusi ideal untuk ini  yaitu Content Management System (CMS)CMS memungkinkan Anda untuk mengubah bagian yang telah ditetapkan di situs web, tanpa memerlukan pengetahuan HTML atau pemrograman. Pengalaman kami dalam memberikan layanan pemeliharaan web telah memungkinkan kami untuk menyediakan anda sistem web terbaik
.
Promosi Online (SEO/SEM)
Tim kami sangat terlatih dan berpengalaman dari desainer, programmer, dan ahli pemasaran, yang semuanya memiliki akses ke alat spesialis terbaru, akan memastikan situs web anda akan tetap menjadi alat promosi yang berharga untuk bisnis anda.

Animated Menus Using jQuery

Designing The Sprite

To begin with, you will need to build your design in Adobe Photoshop – or some other illustration program.  You will need to design a sprite.  I also quickly designed a repeating background image (just to make things look pretty):

 

Sprite 1

 

The XHTML Markup

Here is the XHTML markup that is used in the demo:

<ul id="menu">

<li><a href="#"><span></span></a></li>

<li><a href="#"><span></span></a></li>

</ul>

As you can see, an unordered list is used to structure the menu.  In this tutorial, I’m only going to create 2 links.  You can add as many links as you desire.  Notice that each link is given a unique class.  We will need to work with each class individually when we write the CSS.

The CSS

For the demo, I assigned the repeating image as a background image for the <ul> element.  I also set the height and width:

ul#menu {

width:80%;

height:102px;

background:url(bg.png) repeat-x;

list-style:none;

margin:0;

padding:0;

padding-top:20px;

padding-left:20%;

}
Notice that in the above CSS, “list-style:none;” is used to prevent styling the list using the default bullet point format.  The rest is pretty self-explanatory.  We will now need to float each <li> element so that the list elements are displayed horizontally rather than vertically:
ul#menu li {

float:left;

}

 

Now we get to the good stuff!  We’re going to need to add the sprite as a background image to each link in the menu.  However, we only want to display a section of the sprite for each link.  We do this by restraining the link to some specified dimensions and then positioning the background image accordingly.  Let’s look at the following sprite:

 

 

Each column represents a different link.  In this case, we only have 2 columns since we only want 2 links.  The bottom row defines how the link will look when you hover over it with your mouse cursor.  Now, say we define the link to have a height of 81px and a width of 159px.  If the background image is then positioned to the top left, we see that only the “Home” button is displayed:

 

This is because the “Home” button was designed such that it has a height of 81px and a width of 159px.  As the background is positioned to the top left, this is the only part of the image that will fit inside the link – which is obviously when we want! So, how do we write this using CSS?  Well… first you will need to recognise that in most cases, we will want more than a single link (in this case – 2 links).  Hence, it is easier if we write some common CSS for all the links (i.e. CSS that may be inherited by each and every link in the menu).  We can always add to (or overwrite) these common CSS attributes by later writing CSS for each specific class assigned to the link (see XHTML markup).  Here is the common CSS that is used in the demo:

ul#menu li a {

background:url(sprite.png) no-repeat scroll top left;

display:block;

height:81px;

position:relative;

}

In the above code, we position the background image to the top left.  This is fine for the “Home” link.  However, for the “Portfolio” link, we will need to overwrite the background position attribute for concerning class (see XHTML markup).  Please also note that we define the height here since all the links will have the same height.  As links by default are displayed inline, we must use “display:block” to specify the height of the link.  Finally, we must position the link relatively.  It will become apparent why we need to do this later.

We will now need to write some CSS for each individual link.  We do this by specifying the class (see XHTML markup).  This tutorial deals with just 2 links.  The “Home” link has the class: “home”.  The “Portfolio” link has the class: “portfolio”.  We can hence define CSS attributes for each individual link as follows:

ul#menu li a.home {

width:159px;

}

ul#menu li a.portfolio {

width:157px;

background-position:-159px 0px;

}

Notice that it is here where we specify the width of the links (since each link may have a different width according to the design).  It is also here that we overwrite the background position attribute if needed.  We do not need to do this for the “Home” link since the common class already has this defined as “top left”.

We will want to position the sprite differently for the “Portfolio” link.  Since the “Home” link is 159px wide, we will need to shift the background position 159px to the left in order to focus on the “Portfolio” area.  We do this by writing “background-position:-159px 0px;”.  This tells the browser to shift the background 159 pixels to the left and 0 pixels down.  You can learn more about positioning background images using CSS over at SitePoint.

 

 

We now need to create the “hover” state.  This is how the link will appear when you hover over it with your mouse cursor.  The animation will blend between the 2 states.  To create the hover state, we’re going to use a <span> tag.  We’ll then use CSS to have that span tag completely fill the link (so that it is exactly the same size as the link).  We’ll also need to shift the background image down for the span in order to display the “hover” area of the sprite.  As before, we’ll use some common CSS:

ul#menu li a span {

background:url(sprite.png) no-repeat scroll bottom left;

display:block;

position:absolute;

top:0;

left:0;

height:100%;

width:100%;

z-index:100;

}

Note that we again use “display:block;” since, by default, the <span> tag is displayed inline.  Now that the <span> is displayed as a block, we can define the height and width to 100% – completely filling the link (so that the span and link are exactly the same size).  Also notice that we position the <span> absolutely inside the relatively positioned link.  Positioning the <span> in this way allows us to define a z-index.  The assigning a high z-index ensures that the span’s background is displayed above the link’s background.  All that we are left to do is position the background for the <span> tags (contained within the links):

ul#menu li a.home span {

background-position:0px -81px;

}

ul#menu li a.portfolio span {

background-position:-159px -81px;

}

Notice that we shift the background down by 81 pixels for each span tag (since the height of the “Home” link is 81px).  This causes the “hover” state to be displayed within each span tag.  As before, we also shift the background left by 159px for the “Portfolio” link.

Using jQuery For The Animation

The animation is really quite simple.  We’ll use jQuery to animate the opacity of the <span> tag.  Remember that the <span> tag displays the “hover” state of the image.  Hence, when the <span> is visible, the link takes the “hover” appearance.  We’ll need the “hover” state to be invisible when the page loads.  We can do this by setting the opacity of the <span> tag to “0″:

$(function() {

// set opacity to nill on page load

$("ul#menu span").css("opacity","0");

// the rest of the code will go here

});

Placing the code inside of “$(function() { … });” tells the browser to execute the code when the document has loaded.  The code that we’ll use to do the animation is as follows:

// on mouse over

$("ul#menu span").hover(function () {

// animate opacity to full

$(this).stop().animate({

opacity: 1

}, 'slow');

},

// on mouse out

function () {

// animate opacity to nill

$(this).stop().animate({

opacity: 0

}, 'slow');

});

Hence the entire Javascript used is as follows:

<!-- Include jQuery Library -->

<script src="jquery-1.2.2.pack.js" type="text/javascript"></script>

<!-- Let's do the animation -->

<script type="text/javascript">

$(function() {

// set opacity to nill on page load

$("ul#menu span").css("opacity","0");

// on mouse over

$("ul#menu span").hover(function () {

// animate opacity to full

$(this).stop().animate({

opacity: 1

}, "slow");

},

// on mouse out

function () {

// animate opacity to nill

$(this).stop().animate({

opacity: 0

}, "slow");

});

});

</script>

Notice that we first include the jQuery library.  You can learn more about jQuery animations by reading up on the documentation. One final addition to the CSS is required to ensure that the mouse cursor is display as a pointer when hovering over the <span> tag:

ul#menu li a span:hover {

cursor:pointer;

}

The full source code can be accessed via the demonstration page.  I should just add that whilst this code seems to work well with FireFox and IE7, IE6 might (and probably will) be a different story.

 

Custom Login/Register/Password Code

Here is the code to display the login/register/password form anywhere in your theme:

<!-- Theme Template Code -->

<div id="login-register-password">

<?php global $user_ID, $user_identity; get_currentuserinfo(); if (!$user_ID) { ?>

<ul>
<li><a href="#tab1_login">Login</a></li>
<li><a href="#tab2_login">Register</a></li>
<li><a href="#tab3_login">Forgot?</a></li>
</ul>
<div>
<div id="tab1_login">

<?php $register = $_GET['register']; $reset = $_GET['reset']; if ($register == true) { ?>

<h3>Success!</h3>
<p>Check your email for the password and then return to log in.</p>

<?php } elseif ($reset == true) { ?>

<h3>Success!</h3>
<p>Check your email to reset your password.</p>

<?php } else { ?>

<h3>Have an account?</h3>
<p>Log in or sign up! It&rsquo;s fast &amp; <em>free!</em></p>

<?php } ?>

<form method="post" action="<?php bloginfo('url') ?>/wp-login.php">
<div>
<label for="user_login"><?php _e('Username'); ?>: </label>
<input type="text" name="log" value="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" id="user_login" tabindex="11" />
</div>
<div>
<label for="user_pass"><?php _e('Password'); ?>: </label>
<input type="password" name="pwd" value="" size="20" id="user_pass" tabindex="12" />
</div>
<div>
<div>
<label for="rememberme">
<input type="checkbox" name="rememberme" value="forever" checked="checked" id="rememberme" tabindex="13" /> Remember me
</label>
</div>
<?php do_action('login_form'); ?>
<input type="submit" name="user-submit" value="<?php _e('Login'); ?>" tabindex="14" />
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
<input type="hidden" name="user-cookie" value="1" />
</div>
</form>
</div>
<div id="tab2_login" style="display:none;">
<h3>Register for this site!</h3>
<p>Sign up now for the good stuff.</p>
<form method="post" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>">
<div>
<label for="user_login"><?php _e('Username'); ?>: </label>
<input type="text" name="user_login" value="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" id="user_login" tabindex="101" />
</div>
<div>
<label for="user_email"><?php _e('Your Email'); ?>: </label>
<input type="text" name="user_email" value="<?php echo esc_attr(stripslashes($user_email)); ?>" size="25" id="user_email" tabindex="102" />
</div>
<div>
<?php do_action('register_form'); ?>
<input type="submit" name="user-submit" value="<?php _e('Sign up!'); ?>" tabindex="103" />
<?php $register = $_GET['register']; if($register == true) { echo '<p>Check your email for the password!</p>'; } ?>
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>?register=true" />
<input type="hidden" name="user-cookie" value="1" />
</div>
</form>
</div>
<div id="tab3_login" style="display:none;">
<h3>Lose something?</h3>
<p>Enter your username or email to reset your password.</p>
<form method="post" action="<?php echo site_url('wp-login.php?action=lostpassword', 'login_post') ?>">
<div>
<label for="user_login"><?php _e('Username or Email'); ?>: </label>
<input type="text" name="user_login" value="" size="20" id="user_login" tabindex="1001" />
</div>
<div>
<?php do_action('login_form', 'resetpass'); ?>
<input type="submit" name="user-submit" value="<?php _e('Reset my password'); ?>" tabindex="1002" />
<?php $reset = $_GET['reset']; if($reset == true) { echo '<p>A message will be sent to your email address.</p>'; } ?>
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>?reset=true" />
<input type="hidden" name="user-cookie" value="1" />
</div>
</form>
</div>
</div>

<?php } else { // is logged in ?>

<div>
<h3>Welcome, <?php echo $user_identity; ?></h3>
<div>
<?php global $userdata; get_currentuserinfo(); echo get_avatar($userdata->ID, 60); ?>

</div>
<div>
<p>You&rsquo;re logged in as <strong><?php echo $user_identity; ?></strong></p>
<p>
<a href="<?php echo wp_logout_url('index.php'); ?>">Log out</a> |
<?php if (current_user_can('manage_options')) {
echo '<a href="' . admin_url() . '">' . __('Admin') . '</a>'; } else {
echo '<a href="' . admin_url() . 'profile.php">' . __('Profile') . '</a>'; } ?>

</p>
</div>
</div>

<?php } ?>

</div>

Okay, so here are the functional highlights for this hefty chunk of code:

  • Everything is wrapped with <div id=”login-register-password”></div>
  • If the user is not logged in, the three forms are included in the markup
  • If the user is logged in, a simple welcome message is displayed
  • Success messages are displayed after both password recovery and registration
  • Each form submission sets a generic user-cookie
  • After login or registration, the script redirects the user to the same page
  • Only one form is shown at a time; JavaScript is used to show and hide forms

So if you just throw this thing into your sidebar.php file, you’ll see the login form and three links: login, register, and recover-password. The other two forms are included in the markup, but are hidden with CSS. As-is, the three links won’t do anything because they require JavaScript to work. Once we sprinkle in some jQuery, the links will toggle the three different forms.

First let’s walk through using this code in your theme.

  1. Place the custom login code in your sidebar.php file, or some other location
  2. Grab the jQuery code (no-conflict mode) and include it in your footer.php file
  3. Include the CSS code in your theme’s style.css file, or wherever your styles are located

..and done. Once these three items are in place, upload everything to your server and check it out.

for detail tutorial you can vsit http://digwp.com/2010/12/login-register-password-code/

How to write a WordPress Plugin?

In this tutorial, i will show you how to write a Hello World wordpress plugin, which unlike many believe is surprisingly easy, once you understand the very fundamentals. All you need to have is a basic knowledge of php scripting.

Before we move on coding a plugin, please make sure you remember the following coding practices.

  1. Always you chose a unique name to your plugin so that it doesnt collide with names used in other plugins.
  2. Make sure you comment wherever and whenever necessary in the code.
  3. You will to test the plugin in your localhost (using xampp) along with latest version of wordpress.

Although wordpress allows you to place the plugin php file directly into the wp-content/plugins folder, for a good plugin developer you will need to create a folder named hello-world and within place readme.txt and hello-world.php.

The readme.txt contains information about your plugin and can come in handy when you submit your plugin wordpress SVN plugin repository. See the readme sample.

Go ahead and create these files and we will add the content to these files later.

The Plugin Basics

The heart of a wordpress plugins is the below 2 functions (commonly called `hooks`)

add_action ($tag, $func) documentation
add_filter ($tag,$func) documentation

It is very important to know the difference between the above functions.

  • add_action –> does an action at various points of wordpress execution
  • add_filter –> does filtering the data (eg. escaping quotes before mysql insert, or during output to browser.

Refer to the WordPress Plugin API for more better understanding.

Plugin Information

Open your hello-world.php and in the first line, add this commented plugin information to your file.

<?php
/*
Plugin Name: Hello-World
Plugin URI: http://yourdomain.com/
Description: A simple hello world wordpress plugin
Version: 1.0
Author: Balakrishnan
Author URI: http://yourdomain.com
License: GPL
*/
?>

Save this php file,

  • Place the plugin folder to wordpress > wp-content > plugins,
  • Go to your wordpress admin > plugins and you will see the new plugin listed, waiting to get activated.

simple ain’t it?

 

But this plugin had to do something right?

Why not we make it print  “Hello World” when we call it from wordpress theme template files.

for that we write the code using add_action below the commented plugin information in the hello-world.php

<?php
/*
Plugin Name: Hello-World
Plugin URI: http://yourdomain.com/
Description: A simple hello world wordpress plugin
Version: 1.0
Author: Balakrishnan
Author URI: http://yourdomain.com
License: GPL
*/
/* This calls hello_world() function when wordpress initializes.*/
/* Note that the hello_world doesnt have brackets.
add_action('init','hello_world');
function hello_world()
{
echo "Hello World";
}
?>

Thats it! Our Hello World plugin is nearly done and with just few lines of code. When our plugin is activated, add_action command calls our hello_world() function when wordpress starts loading.

 

Lets Test our Hello World Plugin

We really dont know whether our plugin works or not. To test our plugin, go to plugins, activate the hello-world plugin.

Then open your worldpress theme wp-content > themes > default, open any of index.php, archive.php or single.php and place the following code anywhere.

<?php
if(function_exists('hello_world')) {
hello_world();
}
?>

The key here is function_exists() call which checks whether plugin loaded or not and then allows the hook into the plugin function.  Call to hello_world() in the theme files without checking it, often leads to “Fatal error: call to undefined function” and our blog would crash, if the hello world plugin is not activated or deleted.

 

Right now, the plugin outputs hello world (its pretty much static) and if somebody wants to output ‘Hello Example’, they need to open the php file and make changes everytime to print different text.

Asking the user to edit plugin files isnt a good idea!  As a wordpress plugin developer, it is you, who has to provide a good wordpress options interface in the wp-admin area.

 

Writing Plugin Options Page

We now create  Hello World options page in the wordpress admin area.

Here is what we do….

  • When plugin gets activated, we create new database field `wp_hello_world_data` using set_options() function.
  • When plugin gets deactivated, we delete the database field `wp_hello_world_data`
  • We create a options menu for Hello World in WordPress Admin > Settings.
  • We save the user entered data in the wordpress database.
  • We retrieve the data stored in wordpress database and output it using get_options() function.

Why we are creating database field? because the saved data must be saved somewhere? ie. in wordpress database. This way the plugin outputs user entered text, instead of the static “Hello World”.

 

Activating/Deactivating Plugin

It is very easy to write a function on what plugin does, when it gets activated. WordPress offers 4 very important functions

<?php
/* Runs when plugin is activated */
register_activation_hook(__FILE__,'hello_world_install'); 

/* Runs on plugin deactivation*/
register_deactivation_hook( __FILE__, 'hello_world_remove' );

function hello_world_install() {
/* Creates new database field */
add_option("hello_world_data", 'Default', '', 'yes');
}

function hello_world_remove() {
/* Deletes the database field */
delete_option('hello_world_data');
}

?>

The above code creates the new database field `hello_world_data` using add_options and it runs when we activate the plugin. It has the value ‘default’ since we explicitly define it.

Similarly when the plugin gets deactivated or removed, we need to clean up things, so we remove the created database field using delete_option.

 

Plugin Settings Page

This is our final step.  All we need to create is plugin settings page in the wordpress admin area.  The settings page will update and save the data to the database field `hello_world_data` which we created while activating the plugin. Be sure to checkout creating options page in wordpress codex.

Here is a very important thing to remember:

The add_action for admin_menu should call a function hello_world_admin_menu() containing add_options_page, which in turn should call a function hello_world_html_code() containing html code. This is how the code should flow! Refer to wordpress administration menus

 

<?php
if ( is_admin() ){

/* Call the html code */
add_action('admin_menu', 'hello_world_admin_menu');

function hello_world_admin_menu() {
add_options_page('Hello World', 'Hello World', 'administrator',
'hello-world', 'hello_world_html_page');
}
}
?>

The above code, is placed under is_admin() which means it only runs in the wordpress admin area.

The below function has the html code for the settings page, containing the form and notice how the php tag is split to accomodate the htm

 

and the coding part is..

<?php
function hello_world_html_page() {
?>
<div>
<h2>Hello World Options</h2>

<form method="post" action="options.php">
<?php wp_nonce_field('update-options'); ?>

<table width="510">
<tr valign="top">
<th width="92" scope="row">Enter Text</th>
<td width="406">
<input name="hello_world_data" type="text" id="hello_world_data"
value="<?php echo get_option('hello_world_data'); ?>" />
(ex. Hello World)</td>
</tr>
</table>

<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options" value="hello_world_data" />

<p>
<input type="submit" value="<?php _e('Save Changes') ?>" />
</p>

</form>
</div>
<?php
}
?>

 

You must remember 2 things in the above code.

1. Specify the database field we created before in the input text box as `hello_world_data`

<input name=”hello_world_data” type=”text” id=”hello_world_data” value=”<?php echo get_option(‘hello_world_data’); ?>” />

2. If your form has number of fields (like textbox, selectbox etc), all those should be listed in the value field of page_options, separated by commas. For more information, refer to wordpress documentation

<input type=”hidden” name=”page_options” value=”hello_world_data” />

 

Now, the plugin outputs whatever the user specifies in the hello world settings page.

Thats it! Our plugin is READY!

Dont forget to add documentation to readme.txt.

Enjoy!