Eclipse

A while back, we published an article chock full of free apps.  There was a lot of stuff that we left out though.  One of the glaring holes was in the Programming/Development section.  We completely left out Eclipse.  One reason for this is that Eclipse isn’t really an app.  It is an entire development environment.  The project is completely open source and it is one of the most powerful resources available to developers…and it’s free!  So, what is Eclipse exactly?

About Eclipse

From their website: Eclipse is an open source community, whose projects are focused on building an open development platform comprised of extensible frameworks, tools and runtimes for building, deploying and managing software across the lifecycle. The Eclipse Foundation is a not-for-profit, member supported corporation that hosts the Eclipse projects and helps cultivate both an open source community and an ecosystem of complementary products and services.

Where to Download

You can find the Eclipse Project at http://www.eclipse.org.

What do those html hex values for colors actually mean?  Well, I intend to explain it as clearly as possible right here.  HTML colors aren’t supposed to be complex or confusing.  The hex values are six digits following a (#) sign.  The six digits are actually 3 pairs of digits.  Each pair represents either Red, Green, or Blue (RGB).  The lowest value that a pair can get is 00.  The highest value that a pair can get is FF.  So, #000000 is the lowest RGB value possible.  #00FF33 has the lowest possible value for Red (first pair), the highest possible value for Green (second pair), and the value “33″ for Blue (third pair).

With all three colors allowing values from 0 to 255, there are a total of 16 Million colors.  I know this isn’t anything ground breaking, but I have found that while many people are familiar with the #FFFFFF hex notation, very few actually know what the hex values mean and how to use that information to tweak colors.

Below is a nice color chart to help you find most of the hex values you’ll need for web sites:

Adobe Flash Player in the Android Marketplace

Today, Adobe announced that it is cutting Mobile Flash along with 750 jobs.

“Over the past two years, we’ve delivered Flash Player for mobile browsers and brought the full expressiveness of the web to many mobile devices, however, HTML5 is now universally supported on major mobile devices, in some cases exclusively. This makes HTML5 the best solution for creating and deploying content in the browser across mobile platforms.  We are excited about this, and will continue our work with key players in the HTML community, including Google, Apple, Microsoft and RIM, to drive HTML5 innovation they can use to advance their mobile browsers.”

- Danny Winokur, Adobe’s vice president of interactive development

I hate to say this, but Apple sure got this one right!  I never would have thought that HTML5 would kill Mobile Flash so quickly.  I’m happy with the forward progress of HTML5, but I will be sad to see Mobile Flash Player go.

PHP/MySQL

Have you ever tried to create a nice grid of MySQL results before? Perhaps something 4 items across and 4 items down with pagination for more than 16 results? Well, let’s go ahead and build that here so you can learn how to do it! Using tables for this is tricky and ugly. I don’t recommend it. We will be using some very straight forward PHP and CSS for this! Okay, this tutorial is not difficult to follow if you are familiar with PHP and MySQL. If you are brand new to PHP and/or MySQL, you should familiarize yourself with them by going through some more basic tutorials first! This tutorial also assumes that you have access to a web server that is running PHP 5.x and MySQL server. One last disclaimer…this tutorial doesn’t cover securing any of this stuff. I will likely create another tutorial in the future for keeping your stuff secure. So, be warned, none of what I’m giving you here is secured!

First, let’s look at the basic HTML and CSS that make this work:

<style type="text/css">
#dataGrid{
  width: 800px;
  margin: auto;
}

.thumb{
  width: 150px;
  height: 100px;
  float: left;
  clear: none;
  margin: 5px;
  background: #ccc;
}
</style>

<div id="dataGrid">
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
</div>

DEMO THE ABOVE CODE!

Okay, let’s get into the details. We need a database. I’m calling mine dbGallery. Using phpMyAdmin, or another MySQL client, create your new database and name it whatever you want. Now, inside of the dbGallery database, I’m going to create a table called tblPhotos. Again, call yours whatever you like. tblPhotos is going to have the following fields: photoID(int 11), photoName(varchar 30), category(varchar 20), active(int 1). Make sure to set photoID as the primary key and also set it to auto-increment! Next we need to add some photos to tblPhotos. So, let’s create a nice script that will make this more automated. In your web root, create a new folder called galleryScripts. In the galleryScripts folder, create a new PHP file called mysqlConnect.php and give it the following contents:

<?php  

$db_host = "";  //put your hostname in the quotes

$db_username = "";  //put your username in the quotes

$db_pass = "";  //put your password in the quotes

$db_name = "dbGallery"; //change dbGallery to whatever your db is called

mysql_connect("$db_host","$db_username","$db_pass") or die ("could not connect to mysql");
mysql_select_db("$db_name") or die ("no database");
?>

Now, back in the web root, create a folder called galleryPhotos. Also in the web root, create a new PHP file called addPhotos.php and give it the following contents:

<?php
include "galleryScripts/mysqlConnect.php";

//Parser for Add Photo Form
if (isset($_POST["photoName"])){
	$photoName = mysql_real_escape_string($_POST["photoName"]);
	$category = mysql_real_escape_string($_POST["category"]);

	//add photo to db
	$sql = mysql_query("
			   INSERT INTO
			   	tblPhotos (
				photoName,
				category,
				active
			   )VALUES(
				'$photoName',
				'$category',
				'1'
			   )") or die(mysql_error());
	$pid = mysql_insert_id();
	$newname = "$pid.jpg";
	move_uploaded_file($_FILES['fileField']['tmp_name'],"galleryPhotos/$newname");
	header("location: addPhotos.php");
	exit();
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add Photos</title>

</head>
<body>

<h3>Add New Photo</h3>
<form action="addPhotos.php" enctype="multipart/form-data" name="myForm" id="myForm" method="post">
	Photo Name: <input name="photo_name" type="text" id="photoName" size="64" /><br />
	Category: <input name="category" type="text" id="category" size="64" /><br />
	Upload Image (jpg only):
    <label>
    	<input type="file" name="fileField" id="fileField" />
    </label>
    <label>
    	<input type="submit" name="button" id="button" value="Add Photo" />
    </label>
</form>

</body>
</html>

And now, in your web root, create a new PHP file called gallery.php and give it the following contents:

<?php
//connect to db
include "galleryScripts/mysqlConnect.php";

//check for a page number. If not, set it to page 1
if (!(isset($_GET['pagenum']))){
	$pagenum = 1;
}else{
	$pagenum = $_GET['pagenum'];
}

//query for record count to setup pagination
$data = mysql_query("SELECT * FROM tblPhotos WHERE active = 1");
$rows = mysql_num_rows($data); 

//number of photos per page
$page_rows = 16; 

//get the last page number
$last = ceil($rows/$page_rows); 

//make sure the page number isn't below one, or more than last page num
if ($pagenum < 1){
	$pagenum = 1;
}elseif ($pagenum > $last){
	$pagenum = $last;
}

//Set the range to display in query
$max = 'limit ' .($pagenum - 1) * $page_rows .',' .$page_rows;

//get all of the photos
$dynamicList = "";
$sql = mysql_query("SELECT * FROM tblPhotos WHERE active = 1 $max");
//check for photos
$photoCount = mysql_num_rows($sql);

if ($photoCount > 0){
	while($row = mysql_fetch_array($sql)){
			$photoID = $row["photoID"];
			$photoName = $row["photoName"];
			$category = $row["category"];

			$dynamicList .= '
							<div class="thumb">
								<a href="photo.php?id=' . $photoID . '"><img class="clip" src="galleryPhotos/' . $photoID . '.jpg" alt="' . $photoName . '" width="175" border="0" /></a>
							</div>
							';
	}
}else{
	$dynamicList = "There are no photos at this time!";
}

mysql_close();
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tech Remedy Grid Gallery Demo</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<?php
	    echo '<p style="text-align:center; font-weight:bold;">Page ' . $pagenum . ' of ' . $last . '</p>';

        if ($pagenum == 1){
          	echo '<div class="pagination" align="center"><ul>';
        }else{
            echo '<div class="pagination" align="center"><ul><li><a href="' . $_SERVER['PHP_SELF'] . '?pagenum=1">« first</a></li>';
            $previous = $pagenum-1;
        }       

		//check if number of pages is higher than 1
		if($last != 1){
			//Loop from 1 to last page to create page number links
			for($i = 1; $i <= $last; $i++){
				echo '<li><a href="' . $_SERVER['PHP_SELF'] . '?pagenum=' . $i . '">' . $i . '</a></li>';
			}
		}

        if ($pagenum == $last){
            echo '</div>';
        }else{
            $next = $pagenum+1;
            echo '<li><a href="' . $_SERVER['PHP_SELF'] . '?pagenum=' . $last . '">last »</a></li></ul></div>';
        }
    ?>

    <div id="dataGrid">
		<?php echo $dynamicList; ?>
    </div>

</body>
</html>

Okay, we are ready to start adding some photos to our gallery! Open a browser and navigate to your addPhotos.php file. Fill out the form and add a photo. Repeat the process until you have added several photos. Make sure to add more than 16 if you want to see the pagination working!

Now, if you go to gallery.php in your browser, your images should be displayed in a vertical list. It doesn’t look all that great. So, let’s create a CSS file that will make the images appear in a grid and clip them to all fit real nicely! In the web root, create a new CSS file called style.css and give it the following contents:

#dataGrid{
  width: 800px;
  margin: auto;
}

.thumb{
  width: 175px;
  height: 100px;
  float: left;
  clear: none;
  margin: 5px;
}

.clip {
	position: absolute;
	clip:rect(0px 175px 100px 0px);
}

.pagination{
	padding: 2px;
}

.pagination ul{
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 16px;
}

.pagination li{
	list-style-type: none;
	display: inline;
	padding-bottom: 1px;
}

.pagination a, .pagination a:visited{
	padding: 0 5px;
	border: 1px solid #9aafe5;
	text-decoration: none;
	color: #2e6ab1;
}

.pagination a:hover, .pagination a:active{
	border: 1px solid #2b66a5;
	color: #000;
	background-color: #FFFF80;
}

Now, just navigate to your gallery.php file in your browser and you should see a nice paginated grid of photos! All of the photos links are broken though! Let’s fix that. Create a new PHP file called photo.php and give it the following contents:

<?php
//connect to db
include "galleryScripts/mysqlConnect.php";

//initialize some vars
$photoID = '';
$photoName = '';

//check what photo we are looking for
if(isset($_GET['id'])){
	$photoID = mysql_real_escape_string($_GET['id']);
	//get the photo
	$sql = mysql_query("SELECT * FROM tblPhotos WHERE photoID='$photoID' LIMIT 1");
	while($row = mysql_fetch_array($sql)){
		$photoName = $row['photoName'];
		$category = $row['category'];
	}
}else{
	echo 'No photo was selected!';
	exit();
}

mysql_close();

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tech Remedy Gallery Demo - <?php echo $photoName; ?></title>
</head>

<body>
<div id="photo">
	<img src="galleryPhotos/<?php echo $photoID; ?>.jpg" alt="<?php echo $photoName; ?>" width="400" /><br />
    <h2><?php echo $photoName; ?></h2>
    <p><?php echo $category; ?></p>
</div>
</body>
</html>

And that’s it! Now, when you click on a photo in your gallery it will take you to a page that nicely displays your photo along with some photo information. Pretty cool, huh?

DEMO

Let me know in the comments if you come across any problems!

<!---First we lock the ColdFusion Server to prevent any other scripts from messing us up--->
<cflock scope="server" type="exclusive" timeout="5">
    <!---now we open the cftry--->
    <cftry>
        <!---here's where we start the cftransaction--->
        <cftransaction action="begin" isolation="read_uncommitted">
            <!---ALL OF OUR QUERIES GO HERE--->
            <cfquery name="insert1" datasource="#application.datasource#">
                INSERT INTO
                    tableName (
                        firstName,
                        lastName
                    )VALUES(
                        <cfqueryparam cfsqltype="cf_sql_varchar" value="#form.firstName#">,
                        <cfqueryparam cfsqltype="cf_sql_varchar" value="#form.lastName#">
                    )
            </cfquery>
            <!---rest of inserts would go here...--->
        </cftransaction>
        <!---open a catch--->
        <cfcatch>
            <!---this cftransaction will rollback any sql changes if the script errors--->
            <cftransaction action="rollback" />
            <cfrethrow>
        </cfcatch>
    </cftry>

    <cftransaction action="commit">
</cflock>

Let me know in the comments if you have any questions!

Starting at 8pm EDT on June 7, many major players on the internet (think Google, Yahoo, Bing, Facebook and others) will be lighting up IPv6 versions of their websites. Many ISPs, transport, and hosting companies will also be testing out IPv6 functionality during this period.

According to most estimates, less than 1% of global users will see any negative impact due to the event. This will mainly be due to misconfigured networking equipment in the home, or out of date or unpatched operating systems.

So why is this important? Well, we are rapidly depleting the last of the pool of Ipv4 addresses used by most devices to connect to the web. IPv4 addresses, with 4 octets of 3 numbers provides 32 bits of addressing possibility, while IPv6 moves all the way to 128-bit. That’s 2^64 number of IPv6 addresses. That will allow all of our new PCs, laptops, tablets and smart phones to continue to have connectivity, along with the growth of actual web sites and static devices like modems and routers.

For more information, including a full list of partcipants, please check out the following links:

http://www.worldipv6day.org/

http://www.worldipv6day.org/participants/index.html

http://googleblog.blogspot.com/
And to test your IPv6 readiness try this:

http://ipv6test.google.com/
And if you fail the test and have an out of date Microsoft OS, click here:

http://support.microsoft.com/kb/2533454

Have fun and be safe out there in IPv6 land!

Google Maps API

I’ve been coming across some pretty cool implementations of the Google Maps API recently and I thought that I would share 3 of them with you.

1.  gMap Workout Tracker

The gMap Workout Tracker tracks a users workout routes through the use of GPS coordinates.

2.  Earthquakes In The Last Week

This one is pretty self explanatory.  It shows the locations of earthquakes around the world in the last week.  It utilizes custom markers and infoboxes too!

3.  Love All Ways Share Map

Love All Ways is a clothing company that uses the Google Maps API to show the locations of images that the sites users have uploaded.  Basically, they sent stickers with their logo all over the world and told people to take photos of them and upload them.  Pretty cool!

All of these show the power of this particular API.  The ability to place dynamic markers on the map in specific locations is crazy cool to me!  Feel free to comment if you know any others!

Adobe ColdFusion

After working with Adobe ColdFusion for about a month now, I have to say that I’m really impressed.  I had this expectation that it would leave me longing for my beloved PHP.  It’s actually a very cool server side language that allows for insanely fast development of dynamic web applications!  I know, I sound like a commercial…so, let’s start with the negatives of ColdFusion just so you know I’m not getting paid by Adobe or something!

First, ColdFusion is very proprietary.  In order to use it, the web server must have Adobe’s ColdFusion Server software installed and running.  That software isn’t free.  Many web hosts don’t bother with it for this reason…why pay for ColdFusion when PHP is free?  I get that…there is an open source alternative called Railo and it is pretty good too!  Unfortunately, trying to convince your web host to install this is a different story!

The next negative aspect of ColdFusion is that it is overly simplified. For example, there is only one loop tag. CFLOOP is your only option! There are different parameters to set what kind of loop it is, but this causes confusion when reading over someone else’s code. In PHP it is always very clear what kind of loop I’m looking at. If it’s a while loop, it says ‘while’.

So, the CFLOOP tag was supposed to make things easier. You only need to remember one LOOP tag and then just set the parameters for the loop to determine what kind of loop it will be.

Now, what I LOVE about ColdFusion how elegantly it interacts with SQL databases!  So much can be done with very little code and that makes for insanely fast development!  Let’s look at a comparison of a simple SQL query with some output in both PHP and ColdFusion.  First, in PHP:

<?php
  //connect to db
  mysql_connect("localhost","username","password") or die ("Failed to connect to mysql");
  mysql_select_db("databaseName") or die ("database not found!");

  //check url for id variable
  if (isset($_GET['id'])){
    $id = $_GET['id];
    $sql = mysql_query("SELECT * FROM products WHERE id='$id' LIMIT 1");
    while($row = mysql_fetch_array($sql)){
        $product_name = $row["product_name"];
        $product_details = $row["product_details"];
        $product_price = $row["product_price"];
    }
  }else{
    echo "No product was selected!";
    exit();
  }

  mysql_close();

  //dynamic output
  $output = '
                 <table>
                   <tr>
                     <th>Product Name</th>
                     <th>Product Details</th>
                     <th>Product Price</th>
                   </tr>
                   <tr>
                     <td>' . $product_name . '</td>
                     <td>' . $product_details . '</td>
                     <td>' . $product_price . '</td>
                   </tr>
                 </table>';
?>

<html>
<body>
<?php echo $output; ?>
</body>
</html>

Next, let’s look at the exact same thing done in ColdFusion:

<!---Check url for id variable--->
<cfif isDefined url.id>
  <cfquery name="products" datasource="store">
    SELECT *
    FROM products
    WHERE id = '#url.id#'
    LIMIT 1
  </cfquery>
<cfelse>
  <cfoutput>No Product Was Selected!</cfoutput>
  <cfabort>
</cfif>

<!---Dynamic Output--->
<html>
<body>
  <table>
    <tr>
      <th>Product Name</th>
      <th>Product Details</th>
      <th>Product Price</th>
    </tr>
    <tr>
      <cfoutput query="products">
        <td>#product_name#</td>
        <td>#product_details#</td>
        <td>#product_price#</td>
      </cfoutput>
    </tr>
  </table>
</body>
</html>

The ColdFusion took me half as much time to write as the PHP and it works just as well.  So, overall, I am very impressed with ColdFusion.  A lot of my web developer friends talk crap about ColdFusion, and that’s okay…Most of them have never actually developed with it, so I take those opinions with a giant grain of salt!

Keep on the lookout for some ColdFusion Tutorials in the near future!

When To #:

• Within a string
• Within CFOUTPUT
• Within CFQUERY
• In the CFDUMP var attribute
• When Referencing an Array or List as a Parameter

When Not To #:

• Within a CFSET
• Within a CFIF
• ANYWHERE ELSE

Math Symbols Supported by HTML

Greek Letters Supported by HTML

Other Entities Supported by HTML