Tuesday, October 28, 2008

dropdown list with ajax

ajax drop down menu is easy to learn,
i just find how to create dropdown list.

here is the example

For This Example, I using PHP Code and MySQL Database
1. Create Dropdown List (state_dropdown.php)

<form name=sel>
States: <font id=states><select>
<option value=""> ----- </option>
</select></font>

Cities : <font id=cities><select>
<option value='0'<=== none ===>/option>
</select$gt;</font>
?$gt;

<script language=Javascript>
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
};

function dochange(src, val) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById(src).innerHTML=req.responseText; //retuen value
}
}
};
req.open("GET", "state.php?data="+src+"&val="+val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}

window.onLoad=dochange('states', -1); // value in first dropdown
</script>


2. Select States and Cities to Show in Dropdown (state.php)

<?
$data=$_GET['data'];
$val=$_GET['val'];
//set database
$dbhost = "localhost";
$dbuser = "";
$dbpass = "";
$dbname = "test";
mysql_pconnect($dbhost,$dbuser,$dbpass) or die ("Unable to connect to MySQL server");
if ($data=='states') { // first dropdown
echo "<select name='states' onChange=\"dochange('cities', this.value)\">";
echo "<option value='0'>==== choose state ====</option>";
$result=mysql_db_query($dbname,"select `id`, `state` from states order by `state`");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
} else if ($data=='cities') { // second dropdown
echo "<select name='cities' >\n";
echo "<option value='0'>====choose cities ====</option>\n";
$result=mysql_db_query($dbname,"SELECT `id`, `city` FROM cities WHERE `state_id` = '$val' ORDER BY `city` ");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
}
echo "</select>\n";
?>


Preview:

Friday, October 24, 2008

Image Transparency - Mouseover Effect

Example 2 - Image Transparency - Mouseover Effect

Mouse over the images:
klematisklematis


The source code looks like this:


<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="klematis2.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

We see that the first line of the source code is similar to the source code in Example 1. In addition, we have added an onmouseover attribute and an onmouseout attribute. The onmouseover attribute defines what will happen when the mouse pointer moves over the image. In this case we want the image to NOT be transparent when we move the mouse pointer over it.


The syntax for this in Firefox is: this.style.opacity=1 and the syntax in IE is: this.filters.alpha.opacity=100.
When the mouse pointer moves away from the image, we want the image to be transparent again. This is done in the onmouseout attribute.


Learn More at http://www.w3schools.com

Creating a Transparent Image with CSS

May you want to make a transparent image for link:hover or other.

this is the css to make the transparent image.

First we will show you how to create a transparent image with CSS.

Regular Image:


The same image with transparency:

Look at the following source code:

<img src="klematis.jpg" width="150" 
height="113" alt="klematis"
style="opacity:0.4;filter:alpha(opacity=40)" />

Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).

Tip: The CSS3 syntax for transparency is opacity:x.

In Firefox (opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent.

In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.



Learn More at http://www.w3schools.com

Javascript Countdown Script

This code is simply and easy to use,
you can use for download script, website popUp, and other think. :D

let's see the script.

<div id="alpha"><a href="#" onclick="return false;">
link for what you want to go</a></div><br>
<script>
d4li = 5;
function countdown(){
if ((0 <= 100) || (0 > 0)){
d4li--;
if(d4li == 0){
document.getElementById('alpha').innerHTML =
"<a href=\"#\" onclick=\"return false;\"> "
+"Alpha Link </a>";
}
if(d4li > 0){
document.getElementById('alpha').innerHTML =
'Harap tunggu <font color="#FF0000"><b> '
+d4li+'</b></font> detik...';
setTimeout('countdown()',1000);
}
}
}
countdown();
</script>

let's try this one ;)

Tuesday, October 21, 2008

The ideal PHP Framework

The ideal PHP Framework
http://dody.ws/framework-php-yang-ideal.html

Why do we need the framework?
For those of you not familiar with the framework, framework is a set of functions, classes, and rules. Unlike the library, which is only for a particular purpose, a comprehensive framework of how we manage to build applications.

Framework allows us to build applications more quickly because as a developer we will be more focus on the core issues, while matters such as supporting the other database connection, form validation, the GUI, and security; generally has been provided by the framework. Besides, the rules are clear and must be followed, the application of our more solid, more readable, and in kolabarasi team can be more easily implemented.

We as a software developer can dianalogikan as a fortune-building. When you see a fortune-building can make a home. Will not be a problem if only to build a house with one or two floors. But will be a problem when he got the job to build a multistory building. Problems will become more complex, more labor and material involved, yet again with a tight schedule. We also like that. Building a small application is not necessarily a problem. However, what if the application how small we are with the longer increasingly requirementnya in line with the needs of the user. Here is a very important role in building a framework application.

Framework, which according to my ideal

Since the phenomenon of Ruby on Rails, a framework for the Ruby language, which can provide exceptional facilities for the developer to build a web application; grow mushroom framework, which adopted a similar framework the ability of Ruby on Rails to other languages. For PHP itself, there is PHP on Track, symfony, PHPCake, CodeIgniter, and many others.

I have tried symfony, PHPCake, and CodeIgniter. Symfony have the most complete facilities, there is a command line interface to build relational Object Model (ORM), which translate into relational database program code; support AJAX; scaffolding, which is to create mechanisms CRUD (create, retrieve, update, and delete). Unfortunately symfony only run on PHP5. Is not a problem, because it has a lot of web hosting that provides PHP5. What I feel is that the symfony framework is very solid. I love the facilities ORMnya, scaffolding complex, and the tutorials and documentation that is very good and comprehensive. How not good, other than that provided User Guide contains the API reference, also provided a case study book contains askeet start making applications from the initial design to finished encoding according. In addition, there are also tutorials in the form of movie files, but because of the size of a large, I uncooperative downloading, I feel sufficiently with the manual pdf form. In contrast, I also feel that symfony is as heavy weapons grade. For allowing it to take the learning curve is quite long. I also feel the strength out of control, which happens when I want a change, which is rather different from the tutorial provided, as I do not have to know where and how. I'm trying to survive for 3 days to try to make the application simple, but in the end I decided to stop.

Next is CakePHP, this framework also has the ORM and scaffolding as well as symfony. There are also command line interface, known as the Baker, however, are not absolute use. Overall CakePHP have the ability not far from symfony, but more simple glance and smaller size, and that no less interesting is the compatibility with PHP4. Unfortunately, the documentation is less complete, so I find difficulty in more information. Chantal is CakePHP IRC channels open so that we can consult directly with the pakarnya. I have tried to ask the problems in the IRC channels provided. I get a satisfactory response from pakarnya (CakePHP developers), so I permasalahn when it can be overcome. However, at other opportunities, I did not get a response at all, I find people who have helped me before, but he is not online. I feel CakePHP can not give what I want, though I have tried the tutorial and read the other, I still do not great what I want, or can be my confusion, such as when trying to symfony.

CodeIgniter, this framework does not enter the list I will try. This is because by fiturnya far fewer than symfony and CakePHP. No ORM, scaffolding is very simple, no AJAX, no user authentication. So what can I expect from it? Ranging from reading the various reviews php framework in others, they said that CodeIgniter have a better performance than symfony and CakePHP, due by the library that is loaded by the framework fewer. After I try, the framework is very different. It feels lighter and more free. Although CodeIgniter also use the MVC design pattern, but it is absolutely not to use the M (model). So I can freely use the style that I like. Dish is quite complete documentation, although not as complete as symfony, but very adequate. I can do this after I read the guide in the online manual. It's fun, and where symfony CakePHP can not give it to me. Although they have the ability under the framework of other, but CodeIgniter very easy to learn. Perhaps this is the best lightweight framework. Very light and easy, but it does not have the facilities of other framework. When I observed the forum and a wiki page, CodeIgniter community to provide solutions to problems such as User Authentication and Ajax. It seems that the manufacturer deliberately CodeIgniter user to provide freedom to develop their own in accordance with the needs of each different, whereas CodeIgniter responsible for the tasks to other, more major.

For me CodeIgniter interesting, easy to learn, and very solid to build large applications. Regulations and it provides the library does not restrict me to keep menggunkan programming style that I like. This point is important. Who set up, programmers manage the program or programs set programmers?

source: mamat.amikom.ac.id

Monday, October 20, 2008

create a calendar with PHP

<?php
//Months now
$month=date("m");
//Years now
$year=date("Y");
//Days now
$day=date("d");
//check the number of years now
$endDate=date("t",mktime(0,0,0,$month,$day,$year));
//table style
echo '
<style>
td {
font-size:11;
font-family:verdana;
}
</style>
';
//table to write the date now
echo '<table align="center" border="0" width="100%" cellpadding=2 cellspacing=1 style=""><tr><td align=center>';
echo date("D, d M Y ",mktime(0,0,0,$month,$day,$year));
echo '</td></tr></table>';
//table for the day
echo '
<table align="center" border="0" width="100%" cellpadding=2 cellspacing=1 style="border:1px solid #CCCCCC">
<tr bgcolor="#EFEFEF">
<td align=center><font color=red>Su</font></td>
<td align=center>Mo</td>
<td align=center>Tu</td>
<td align=center>We</td>
<td align=center>Th</td>
<td align=center>Fr</td>
<td align=center><font color=blue>Sa</font></td>
</tr>
';
/*
1 month to check the date on the current day to how
then add the cell td's as much as $ var
*/
$s=date ("w", mktime (0,0,0,$month,1,$year));
for ($ds=1;$ds<=$s;$ds++) {
echo "<td style=\"font-family:arial;color:#B3D9FF\" width=\"15%\" align=center valign=middle bgcolor=\"#FFFFFF\"></td>";
}
for ($d=1;$d<=$endDate;$d++) {
//start writing date
if (date("w",mktime (0,0,0,$month,$d,$year)) == 0) { echo "<tr>"; }
//if value $d (date) is sunday (0) create new line <tr>
//default text-color
$fontColor="#000000";
if (date("D",mktime (0,0,0,$month,$d,$year)) == "Sun") { $fontColor="red"; }
//if the date is sunday then text color is red
if (date("D",mktime (0,0,0,$month,$d,$year)) == "Sat") { $fontColor="blue"; }
//if the date is saturday then text color is blue
//writing date
echo "<td style=\"font-family:arial;color:#333333\" width=\"15%\" align=center valign=middle> <span style=\"color:$fontColor\">$d</span></td>";
//jika tanggal adalah hari sabtu (6) akhiri baris </tr>
if (date("w",mktime (0,0,0,$month,$d,$year)) == 6) { echo "</tr>"; }
}
//table end
echo '</table>';
?>

Somewhere
You can modify the CSS with your own creation ;)


GOOD LUCK!

Examples of Ajax Applications

These applications use Ajax and give you a good overview of what can be done with the technology.

Basecamp - 37signals
Basecamp is an AJAX project management tool.

Backpack - 37signals
Backpack is an AJAX personal information management tool.

Flickr - A Yahoo! Company
Flickr is a photo storage and display program that uses AJAX.

Gmail - Google
Gmail is an AJAX powered email system.

Google Maps - Google
Google Maps uses AJAX to power it's interactive map.

Book Review: Ajax by Edmond Woychowsky
This is a very technical book for Web developers who want to learn Ajax. It covers the basics of Ajax including XHTML, XML, JavaScript, and the XMLHttpRequest. It also goes into detail about other technologies like Xpath, XSLT, and Ruby on Rails.

Book Review: Build Your Own Ajax Web Applications By Matthew Eernisse
While not a book for beginners, this book will teach intermediate and advanced Web developers how to implement Ajax on their Web sites.

Book Review: Head Rush Ajax by Brett McLaughlin
Ajax is fun, and this book makes Ajax fun. I read this Ajax book cover-to-cover. And then I read it again. It's easy to read and packs a lot of information in a small space. There might be more comprehensive books on Ajax out there, but this will be the only one you want to read cover-to-cover.

What is AJAX?

Ajax (sometimes called Asynchronous JavaScript and XML) is a way of programming for the Web that gets rid of the hourglass. Data, content, and design are merged together into a seamless whole. When your customer clicks on something on an Ajax driven application, there is very little lag time. The page simply displays what they're asking for. If you don't believe me, try out Google Maps for a few seconds. Scroll around and watch as the map updates almost before your eyes. There is very little lag and you don't have to wait for pages to refresh or reload.

What is Ajax?

Ajax is a way of developing Web applications that combines:

In the traditional Web application, the interaction between the customer and the server goes like this:

  1. Customer accesses Web application
  2. Server processes request and sends data to the browser while the customer waits
  3. Customer clicks on a link or interacts with the application
  4. Server processes request and sends data back to the browser while the customer waits
  5. etc....

There is a lot of customer waiting.

ajax script

this is basic of ajax code.
(ajax.js)


var xmlhttp = false;

//check if using IE

try {
//check if IE > IE 5
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
//use activeX
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}

//check if not using IE
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
//function request
function makeRequest ( serverPage, objID, msgLoad ) {
var obj = document.getElementById(objID);
var msg = msgLoad;
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
obj.innerHTML = xmlhttp.responseText;
} else {
obj.innerHTML = "<br /><br /><div align ='center'><img src='images/ajax.gif' alt='Loading' /><br />"+msg + "</div>";
}
}
xmlhttp.send(null);
}
//function download
function download ( serverPage, objID, msgLoad ) {
var obj = document.getElementById(objID);
var msg = msgLoad;
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
window.location = serverPage;
} else {
obj.innerHTML = "<br /><br /><div align ='center'><img src='images/ajax.gif' alt='Loading' /><br />"+msg + "</div>";
}
}
xmlhttp.send(null);
}
//function for search
function searchRequest ( serverPage, objID, msgLoad, formName , getcari ) {
var obj = document.getElementById(objID);
var msg = msgLoad;
var cari = document.forms[formName].elements[getcari].value;
var t = new Date()

xmlhttp.open("GET", serverPage+"?search="+cari+"&t="+t.getTime());
xmlhttp.onreadystatechange = function() {
if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
obj.innerHTML = xmlhttp.responseText;
} else {
obj.innerHTML = "<br /><br /><div align ='center'><img src='images/ajax.gif' alt='Loading' /><br />"+msg + "</div>";
}
}
xmlhttp.send(null);
}

Sunday, October 19, 2008

What is PHP?

PHP (recursive acronym for "PHP: Hypertext Preprocessor") is a widely-used Open Source general-purpose scripting language that is especially suited for Web development and can be embedded into HTML.

Example:
    <html>
<head>
<title>Example</title>
</head>
<body>

<?php
echo "Hi, I'm a PHP script!";
?>

</body>
</html>

Notice how this is different from a script written in other languages like Perl or C -- instead of writing a program with lots of commands to output HTML, you write an HTML script with some embedded code to do something (in this case, output some text). The PHP code is enclosed in special start and end tags that allow you to jump into and out of "PHP mode".

What distinguishes PHP from something like client-side JavaScript is that the code is executed on the server. If you were to have a script similar to the above on your server, the client would receive the results of running that script, with no way of determining what the underlying code may be. You can even configure your web server to process all your HTML files with PHP, and then there's really no way that users can tell what you have up your sleeve.

The best things in using PHP are that it is extremely simple for a newcomer, but offers many advanced features for a professional programmer. Don't be afraid reading the long list of PHP's features. You can jump in, in a short time, and start writing simple scripts in a few hours.