myToDoListPHP updated: v 0.3

New function, a better interface for MyToDoListPHP a free open source ToDoList written in PHP.

Today I have completed a remarkable improvement in myToDoListPHP (read this post for more info about the project)that is passed to the version v.0.3.

1. Layout
A new layout and a better management for notes:


2. Users
Now you can add users and assign them to single tasks. You can also group task for users with a single click:


3 Search Engine
The new search engine find user and task in an very easy way wile you type:




Download Package
To download the full myToDoList package and take a look at documentation click here.

A proposal for MyBlogLog restyling

I love MyBlogLog. I am an usual user and I think it's a site that help you to create new relationships and to find new readers for your site in a fast and easy way; but I find usability and site's layout insufficient for a service very useful like this. So, I have spold latest hour to design a new layout for the site using Dreamweaver :)

This is my restyle-proposal that not change totally the site's structure but improves visually some page's elements (this is just my opinion!!!):

My suggestions (It's only a suggestion ok?)

These are my suggestions:

1. 1. Move user's description and social network links, on top of the page.
   
2. 2. Move Tag section to right
3. 3. Delete Account tool section. This can be sobstitute with a simple link edit above About Me section.
4. 4. Delete button site stat, Get Widgets and edit setting below Site and Blog I Author. These can be sobstitute with a simple links above the same section.
   
5. 5. Show / Hide sections.
6. 6. Redesign the actual logo using another font (Arial Rounded for example) and avoiding the external stroke line (blue).
7. 7. Change the topbar's background color using an image with gradient effects.
   

What you think?


Full pic and source code download
You can see the full page here.
Click here to download html package for your browser (extract the zip content on your desktop and open index.html page.

Note: I have tested the code only with Firefox and Safari on Mac.

Select and remove multiple input checkbox elements

This tutorial explains how to select multiple input checkbox elements and remove them without reload the page using javascript.

Download tutorial


An example
The code below is a simple form, with name attribute myForm, with some checkbox which we want to select and remove:

<form name="myForm">
<span id="opt0"><input type="checkbox" name="selection"> Option 1<br></span>
<span id="opt1"><input type="checkbox" name="selection"> Option 2<br></span>
<span id="opt2"><input type="checkbox" name="selection"> Option 3<br></span>
<span id="opt3"><input type="checkbox" name="selection"> Option 4<br></span>
<span id="opt4"><input type="checkbox" name="selection"> Option 5<br></span>
</form>
<div class="msg" id="msg"></div>
<br/><span id="link"><a href="javascript:selectAll()">Select all&lt;/a></span>

Select all items
This javascript function select all items contained inside myForm form:

function selectAll(){
totElements = document.forms.myForm.selection.length;
msg = document.getElementById('msg');
for(i=0; i<totElements; i++){
thisElement = document.forms.myForm.selection[i];
thisElement.checked = true;
}
document.getElementById('link').innerHTML = '<a href="javascript:deselectAll()"> Deselect all</a> / <a href="javascript:removeAll()">Remove selection</a>';
msg.innerHTML='<strong>' +totElements+ '</strong> elements selected.';
msg.style.display='block';
}

Remove all items
This javascript function remove all items selected inside myForm :

function removeAll(){
totElements=document.forms.myForm.selection.length;
countRemovedElements = 0;
for (i=0; i< totElements;i++){
thisElement=document.forms.myForm.selection[i];
if (thisElement.checked == true){
countRemovedElements++;
document.getElementById('opt'+i).style.display='none';
}
}
document.getElementById('msg').innerHTML = '<strong>' +countRemovedElements+' </strong> elements removed.';
}

Deselect all items
This javascript function deselect all items selected inside myForm :

function deselectAll(){
totElements=document.forms.myForm.selection.length;
for (i=0; i<totElements; i++){
thisElement = document.forms.myForm.selection[i];
thisElement.checked = false;
document.getElementById('link').innerHTML = '<a href="javascript:selectAll()">Select all</a>';
}
}

How to solve Internet Explorer cache issue in Ajax

This is a frequent asked question which can be solved simply with a line of code with javascript.

The problem
If you use Internet Explorer you can find an annoying problem when you send multiple requests using Ajax. All new requests after the first request (using http.open method), mantain the same value of the first request. This problem is caused by Internet Explorer use of cache.

Solution

When you call the method:

http.open

add a random variable using Math object and add it in the method's URL argument, for example:

nocache = Math.random();
http.open('get', 'page.php?url_parameter='+parameter+'&nocache = '+nocache);

In this way all the new request will have an URL parameter (&nocache) which force the browser to "refresh" the old value with the new value.

A simple search engine in Ajax and Coldfusion

In the previous lesson we have seen how to implement a simple search engine using Ajax and PHP. This is a "variation" for coldfusion lovers :)

Download tutorial


Step 1: main page
Repeat step 1 of previous lesson.

Step 2: Javascript function
Change this code line:

http.open('get', 'in-search.php?name='+searchq+'&nocache = '+nocache);

... with:

http.open('get', 'in-search.cfm?name='+searchq+'&nocache = '+nocache);

Step 3: search into database
Now create a blank .cfm page in-search.cfm and copy and paste this code inside of the page:

<cfquery name="getName" datasource="myDatasource">
SELECT * FROM USER
WHERE name LIKE '%#URL.searchq#%'
</cfquery>
<cfoutput query="getName">
#name#
</cfoutput>

The code is very simple. #URL.searchq# is a Coldfusion URL variable passed from javascript function searchNameq() to coldfusion server. How you can see, the structure is the same of previous post using PHP.

A simple search engine in Ajax and PHP

This lesson explains how to realize a simple search engine with Ajax and PHP that search an user name inside a db table "USER" and return results while you type into the input field.

Download tutorial


Step 1: main page
This page contains the search engine input field, and show the search results into the layer <div id="search-result">


Add a link to javascript function inside the <head> tag:

<script language="javascript" src="ajax_framework.js"></script>

...and copy this code into the <body> tag:

<h2>Ajax Search Engine</h2>

<form id="searchForm" name="searchForm" method="post" action="javascript:insertTask();">
<div class="searchInput">
<input name="searchq" type="text" id="searchq" size="30" onkeyup="javascript:searchNameq()"/>
<input type="button" name="submitSearch" id="submitSearch" value="Search" onclick="javascript:searchNameq()"/>
</div>
</form>

<h3>Search Results</h3>
<div id="msg">Type something into the input field</div>
<div id="search-result"></div>

Step 2: Javascript Function
This is the ajax_framework.js code:

/* ---------------------------- */
/* XMLHTTPRequest Enable */
/* ---------------------------- */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
request_type = new XMLHttpRequest();
}
return request_type;
}

var http = createObject();

/* -------------------------- */
/* SEARCH */
/* -------------------------- */
function searchNameq() {
searchq = encodeURI(document.getElementById('searchq').value);
document.getElementById('msg').style.display = "block";
document.getElementById('msg').innerHTML = "Searching for <strong>" + searchq+"";
// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'in-search.php?name='+searchq+'&nocache = '+nocache);
http.onreadystatechange = searchNameqReply;
http.send(null);
}
function searchNameqReply() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('search-result').innerHTML = response;
}
}

Step 3: search into database
This code searching for the name in input into the database. Take a look here to see dbconnection.php code:

<?php
include('dbconnection.php');
$searchq = $_GET['searchq'];
$getName_sql = 'SELECT * FROM USER
WHERE name LIKE "%' . $searchq .'%"
$getName = mysql_query($getTask_sql);
$total = mysql_num_rows(getTask);

while ($row = mysql_fetch_array($getName)) {
echo $row.name . '<br/>';
}
?>

Save all files and test them in your localhost! Remember to create a db table USER with a field name.

Ajax search engine added to myToDoListPHP

Another update for myToDoListPHP.

Today I have added a search engine that use ajax to find a task while you type a query string into the input field and a small tab navigation. This is the result:

For more info about myToDoListPHP and to download the package read this post