Friday, November 16, 2007

Populate a select form with a SQL query using PHP

This is another frequent asked question which I receive frequently. The solution is very simple and is illustrated step-by-step in the code below

Solution using PHP
Image a simple query SQL which get all users' names on a generic database's table, in this case USER, which have two attributes: ID_USER_PK (primary key) and NAME (the user name):

<?php
$getUser_sql = 'SELECT * FROM USER';
$getUser = mysql_query($getUser_sql);
?>


If you want to display the query's results into a SELECT form you can use this simple code:

<select name="select" name="userName">
<?php while ($row = mysql_fetch_array($getUser)) {?>
<option value="<?php echo $row['id_user_pk']; ?>">
<?php echo $row['name']; ?></option>
<?php } ?>


Wile statement creates a number of option elements equal to number of total records contained into the table and assigns them a value equal to primary key (in this simple case id_user_pk.


If you want select an option equal to a parameter in input
Now, image if you have a parameter in input, for example a URL variable idUser:

&_GET['idUser']


...passed to the page in this way:

http://localhost/index.php?idUser=1


If you want your SELECT form select the option equal to the value of parameter in input, you have only add a line of code (in bold):

<select name="select" name="userName">
<?php while ($row = mysql_fetch_array($getUser)) {?>
<option <?php if($row['id_user_pk'] == $_GET['idUser']) { echo 'selected="selected"';} ?> value="<?php echo $row['id_user_pk']; ?>">
<?php echo $row['name']; ?></option>
<?php } ?>
</select>

In this way, you force to set the "selected" attribute, in your SELECT form, equal to "selected" if the current record has an id_user_pk equal to the parameter in input.

Thursday, November 15, 2007

myToDoListPHP updated: v 0.5

A new interface and new features for myToDoListPHP

Another day, another update... In this update I added set priority for each task and current percentage of completion.

This is a screenshot of task view:

...and this is a screenshot of modify task view:


For more info about myToDoListPHP and to download the full package read the related post.
Thanks to all for your support!

Wednesday, November 14, 2007

myToDoListPHP updated: v 0.4

This update solves some issue with Internet explorer and add some new features to MyToDoListPHP

I have released another update of myToDoListPHP. The current update solve some issue with Internet Explorer and improves its functionalities with a function that modify inserted tasks:


This is modify task panel:



For more info about this project take a look here.

Custom script to calculate a digg-like date difference with Coldfusion

This post explains how you can develope a coldfusion script that calculates difference between two date (the current date, and a reference date) and display the difference in a digg-like style:

2 hour and 10 mins ago


Download Tutorial

Coldfusion code
The code is very simple. You don't have to change nothing, a part #reference_date_here# (in bold) with a reference date, for example the date of a post in your blog.

<cfset currentTime = now()>
<cfset referenceDate = #reference_date_here#>
<cfset difference = dateDiff('n',referenceDate, currentTime)>
<!--- Hours --->
<cfif difference GT 59>
<cfset minuts = difference>
<cfset difference = dateDiff('h',referenceDate, currentTime)>
<cfset divisione = nt(minuts/60)>
<cfset currentMinuts = minuts - (divisione*60)>
<cfif difference EQ 1>
<cfset textDifference = ' hour and '&currentMinuts&' mins ago'>
<cfelse>
<cfset textDifference = ' hours and '&currentMinuts&' mins ago'>
</cfif>
<cfset datadifference = difference&textDifference>
<!--- Days --->
<cfif difference GT 24>
<cfsetdifference EQ 1>
<cfset textDifference = ' day ago'>
<cfset>
<cfsettextDifference = ' days ago'>
</cfif>
<cfset difference = dateDiff('d',referenceDate, currentTime)>
<cfset datadifference = difference&textDifference>
</cfif>
<cfelse>
<cfset datadifference = difference&' mins ago'>
</cfif>

Tuesday, November 13, 2007

myToDoListPHP updated: v 0.3a

A small update to myToDoListPHP: new interface and new features.

This is a minor release of myToDoListPHP, the free/open source to-do-list application written in Ajax and PHP. In this release I have solved various bugs and adding a function to filter completed/incompleted tasks:


If you click on hide complete task option the result is:



... and the application filter only not completed tasks.

For more info about myToDoListPHP and to download the source code please read this post.
If you want to collaborate, adding new functions you are welcome!

I want to say thanks to Dennis, for its support. Thanks very much!

Add an item from a SELECT field into a layer using javascript

This tutorial explains how to realize a simple effect that use javascript to add an item contained into a list in a select html element, inside a layer without reload the page. The added item can be removed anytime click on remove link. The result is something like this:


Download this tutorial


Step 1: HTML elements
Create a new page and add the code in step 1 and step 2
Page elements' structure is very simple. We have a select element with some option :

<select id="listItems">
<option value="USB Pen Drive">Usb Pen Drive</option>
<option value="MacBook">MacBook</option>
<option value="iPhod">iPhod</option>
<option value="Microsoft Zune">Microsoft Zune</option> </select>
<input type="button" name="add" value="add element" onClick="javascript:addElement()">

<h3>My Shopping Chart <small><span id="totalItem">0</span> elements</small></h3>
<!-- Display a message when you add or remove an item-->
<div id="msg"></div>
<!-- Items will be added here -->
<div id="myElements">|
</div>


You can also add this simple CSS code inside <head> tag:

<style>
body{font-family:'Lucida Grande', Verdana, sans-serif; font-size:14px; color:#666666;}
a:link, a:visited{color:#0033CC; }
h3{border-bottom: solid 2px #DEDEDE; padding:6px 0; color:#000000; }
#msg{background:#FFFFCC; margin:10px; padding:4px; display:none; }
small {font-size:11px; margin-left:10px;}
</style>


Step 2: Javascript Functions
This is the code for addElement() and removeElement() functions:

<script language="javascript">
numItem=1;
totalItem=0;
function addElement(){
// Define Elements
listItem = document.getElementById('listItems');
myElement = document.getElementById('myElements');
msgLayer = document.getElementById('msg');
totalItemLayer = document.getElementById('totalItem');
currentItem = listItem.value;
var newItem = document.createElement('li');
newItem.setAttribute('id','item'+numItem)
numOfItem = numItem++;
newItem.innerHTML = currentItem + ' <small><a href = "javascript:removeItem('+numOfItem+')">remove</a> </small>';
myElement.insertBefore(newItem, myElements.firstChild);
// Update total
totalItem++;
totalItemLayer.innerHTML= totalItem;
// Show Message
msgLayer.innerHTML='Item added!';
msgLayer.style.display="block";
}
function removeItem(idItem){
document.getElementById('item'+idItem).style.display = "none";
numItem= numItem-1;
totalItem--;
msgLayer.innerHTML='Item removed!';
msgLayer.style.display="block";
}
</script>

Save and try it!

Monday, November 12, 2007

Place Google AdSense below post's title on Blogger

I use Google AdSense to add some income from my site, but if you use the option show ads between posts, default position where ads are placed (below te post), isn't a good place for a good result in terms of revenue.

So I have decided to change the position of AdSense and in my Blogger Template, I have find this "suspect" code in the post's footer:

<b:if cond="'data:post.includeAd'">
<data:adend/>
<data:adcode/>
<data:adstart/>
</b:if>

... that is what I'am searching: the AdSense code, placed on template, from Blogger when I have selected show ads between posts option. After some tentatives I have find a good position where to place AdSense, below the title's post, before this line's code (check expand widget in your blogger template):

<p><data:post.body/></p>

So, I have changed AdSense code position above this line, adding an if statement (on bold) to show sponsored links only into the single post, not when an user visits my home page, or browse categories (over 96% of my actual clicks cames from internal pages):

<b:if cond='data:blog.pageType=="item"'>
<b:if cond="'data:post.includeAd'">
<data:adend/>
<data:adcode/>
<data:adstart/>
</b:if>
</b:if>


In this way, AdSense is more visible and in just two day I have improved the number of clicks and my CTR for the most visited pages. If you use Blogger platform for your blog, I suggest to try it.