Tutorialzine - PHP MySQL CSS jQuery XHTML tutorials, resources, roundups and freebies. The answer to your development needs.

Introduction

The configuration list

This time we are generating the configuration list on the site with PHP, which is used in the BloggyBits site. This is the first tutorial about PHP of the series. We are also building upon the jQuery foundations we laid last time, when we created a jQuery & CSS navigation menu.

The idea

The configuration list is the first step of a three step process in which the widget is generated. Here are all the supported services, which you can include in the widget by checking them, and filling in some data. In the case of the custom RSS feed, it is the tab title, the rss address and address of the site, that the feed belongs to. In all the other cases we have just a tab title and your username on the respective social site.

The implementation

We will need the PHP back-end to generate all the necessary XHTML code, which will trigger the jQuery functionality we will build on the site.

The PHP back-end

Lets take a look at the PHP code we have used in our index.php file.

$serv = array();
$serv[]=array('name'=>'twitter','title'=>'Tweets');
$serv[]=array('name'=>'digg','title'=>'Diggs');
$serv[]=array('name'=>'flickr','title'=>'Flickr');
$serv[]=array('name'=>'stumbleupon','title'=>'Stumbles');
$serv[]=array('name'=>'delicious','title'=>'Delicious');
$serv[]=array('name'=>'','title'=>'Custom');

This is our list represented as a multidimensional array. That is, we have an array composed of other arrays. This is an extremely easy to implement and light solution to the problem of storing all the necessary data. We can easily edit the list or add new services. We just have to follow the same structure for every new service that we add. That would be: ‘title‘ (used to fill the default value of the title text field) and ‘name‘, used in the label of the text field.
Note that our custom service doesn’t have a name – this way we can differentiate it from the other services, as you will see later on.

Another important aspect of this implementation is to remember that every service is assigned an unique key in the $serv array automatically – $serv[]=… ads a new element with a unique key starting from 0.

Now lets see how the list is generated.

foreach($serv as $k=>$v)
{
	if($v['name'])
	{
		$usernameSm = $v['name'].' username';
	}
	else
	{
		$usernameSm = 'URL of the custom feed (rss only)';
	}

?>

<div class="tabs" align="left">
<div class="tabsCheck"><input type="checkbox" title="Use this!" id="check<?=$k?>" onclick="checkIt(<?=$k?>)" checked="false"  /></div>
<div class="tabsIcon"><img src="/images/iconsBig/<?=$k+1?>.gif" /></div>
<div class="tabData">
<small>tab title</small>
<input type="text" name="title<?=$k?>" value="<?=$v['title']?>" id="title<?=$k?>" disabled />

<small><?=$usernameSm?></small>

<input type="text" name="user<?=$k?>" value="" id="user<?=$k?>" <?=!$v['name']?'onfocus="$(\'#customURL\').show()"':''?> disabled />

<?

	if(!$v['name'])
	{
	?>

		<span id="customURL" style="display:none" title="This URL will show up in the widget as a link above the entries of the feed">
		<small>URL of the site itself</small>

		<input type="text" name="cUF" value="" id="cUF" />

		</span>

	<?
	}

?>

</div>
</div>

<?
}

Here we use a different approach. We rapidly go in and out of PHP when creating the looks of the site. This approach is appropriate for projects like this one, but is not recommended for bigger projects. If your site has a lot more pages you’d probably split the design into separate template files. However for the needs of BloggyBits such a strategy would be an overkill.

As a web developer you always have to choose a strategy that brings you the best results with the work you put in (you will notice that I am not using object oriented programming as well).

Now lets get back to the code. We start with a foreach statement which assigns the unique keys in $k and the arrays with each service in $v. In the first 10 lines of code we are forming the $usernameSm, which is used later. It takes the form of ‘twitter username’ if we have a name of the service and ‘URL of the custom feed (rss only)’ in the case of it being our custom RSS.

In line 15 we assign check<?=$k?> as the id of the checkbox, where $k is a unique key. On line 16 we use an image /images/iconsBig/<?=$k+1?>.gif which is an icon of each service (the images start with 1.gif, and so the services keys need to be incremented with 1).

It is basically the same down to line 23 where we have <?=!$v['name']? ‘onfocus=”$(\’#customURL\’).show()” ‘ : ” ?>. This is the triple operand that sets the onfocus event in the case that the current service is the custom one. And what this line does is that when we click on the url of the feed in the custom RSS section, a text box appears beneath  it.

The appearing box itself is created on the following lines.

The CSS

.tabs{
	float:left;
	width:300px;
	background-color:#2b2b2b;
	border:1px solid #363636;
	padding:10px;
	margin:10px 20px 10px 0px;
}

.tabsCheck{
	float:left;
	width:20px;
}

.tabsIcon{
	float:left;
	width:64px;
}

.tabData{
	float:left;
	margin-left:15px;
}

.tabData input, .emailField{
	margin:2px 0px 4px 0px;
	background-color:#333333;
	border:1px solid #666666;
	color:#CCCCCC;
	width:150px;
}

These are the CSS styles from main.css, that we use in our list. You can see from the PHP/XHTML source code pasted before that every service is wrapped in a DIV with a class name of tabs. It is floated left and this way two columns of equal width and height emerge with all the supported services.

The jQuery source

Here is the jquery code, taken from main.js

function checkIt(id)
{
	var el=$('#check'+id).attr('checked');

	if(!el)
	{
		$('#li'+id).remove();
	}
	else
	{
		$("#sortable").append('<li id="li'+id+'"><div class="smallTab"><img src="/images/iconsBig/'+(id+1)+'.gif" class="handle" /></div></li>');
		$("#sortable").sortable('refresh');
	}

	$('#title'+id).attr('disabled',!el);
	$('#user'+id).attr('disabled',!el);

}

This is the function that gets called when you check the checkbox next to one of the services. What this does is get the attribute of the checkbox (either we have checked or unchecked it) and store it in el, and after that in a if construct where we either create or remove a new sortable list object in the sortable container (we’ll talk more about this next time).

Another peace of javascript code is the one that is executed after the document has loaded.

$(document).ready(function(){
	var i=0;

	while(document.getElementById('check'+i))
	{
		$('#check'+i).attr('checked',false);

		i++;
	}
});

What this does is it loops through the checkboxes we use for the services (every checkbox has an id that is formed by check and the id of the service, starting from 0).

We could do that alternatively with a jQuery selector. Something like this:

$(document).ready(function(){
	$('.tabs input[type=checkbox]').attr('checked',false);
});

Conclusion

Today we made the configuration list and opened the door for the next tutorial in which we will use jQuery sortable to create a sortable list, which will determine the order of the tabs when they are shown in the widget.

Related: