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:

Space Elevators and Lunar Landers

There is a top secret lab in the Bay Area called Google X.  Some might think that this is where top secret proprietary software and search algorithms are researched and developed.  In reality, Google X has nothing to do with Google’s current software or search engine interests.  The lab is devoted to planning the future of the human race.

Lofty projects including space elevators and personal robots are rapidly being researched and developed at Google X.  There is an elite group of engineers working on a list of 100 of these projects.  Many of them are focused on robots, and with security that is run as “mysteriously as the CIA”, you could only imagine how advanced some of this research must be!

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!

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

PHP while loop with MySQL

I have been coming across a lot of “Essential Tools For Web Developers” lists lately and I noticed that they are all really extensive.  Some of them have as many as 100 tools listed!  This begs the question, “Do you understand what ‘essential’ means?”.  So here is my EXTENSIVE list of essential tools for web developers.  This is literally every essential tool you will need to develop web applications.

Web Server Software and Extensions

First and foremost, you’re going to need a web server.  If you have a web host, disregard this tool because this is essentially the service that they provide.  If you plan to run your own web server, check out WAMP for Windows and LAMP for Linux.

Text Editor

Notepad will work.  However, I would recommend getting a better one than that since it doesn’t really have any features!  There are a ton of free options.  Some people swear by Eclipse.  I prefer Notepad++ on Windows, TextWrangler on Mac, and VIM on Linux.

FTP Client

After you have created a new script or app using your awesome text editor, you will have to upload it to the web server.  Again, there are several free FTP clients out there.  I prefer FileZilla personally.  It was originally written for Windows, but has since been ported to Mac and Linux.  The Mac version can be a tad buggy from time to time but it’s super fast still and I love it!

Ummmm…yeah…that’s it.  Nothing else is needed to develop web applications.  There are lots of helpful tools out there and they should certainly be used, but they are NOT essential!

PHP and MySQL were made for each other!

Hi Everyone!  I wanted to post a very basic tutorial series on using PHP and MySQL.  This tutorial is Part 1 and it will not focus on anything complicated, rather it will break down the process of connecting to your MySQL database.  This tutorial assumes that you know how to create a MySQL database and it also assumes that you have web hosting with PHP and MySQL installed.  For MySQL database management, I personally prefer using phpMyAdmin.  Some people prefer other MySQL clients, while some hardcores prefer doing all of their database management from within their PHP script.  I’ll leave the decision as to which method you’ll use up to you.

We will be using the following database throughout this entire tutorial series, so don’t delete it after you complete this tutorial! You’ll need it for Part 2 and so on!

Now, the first thing we need to do is create a database.  So, using whatever method you prefer, create a database called “test_data” (without the quotes) and give it one table called “test_table” with 3 fields.  The first field should be labeled “id”, and it should be set to INT, Auto-Increment, and set it as the primary key.  The second field should be labeled “name”, and it should be set to VARCHAR with a length of 32.  The third field should be labeled “city”, and it should be set to VARCHAR with a length of 64.

Okay, so now we have our database and table all set up!  So, the next thing we need to do is create our PHP script!  Open a good text editor such as Notepad++, Dreamweaver, etc.  The first thing we need to do is create a PHP code block.  Here’s how it should look:

<?php

?>

Next, we need to establish a connection to the database. We do this using the mysql_connect function that is built in to PHP. You will need to know the hostname of your MySQL server, as well as the username and password for the database. Typically, the hostname is “localhost”.

<?php
//connect to mysql database server
mysql_connect("hostname","username","password");
?>

Replace hostname with your actual hostname, username with your actual username, and password with your actual password. This code attempts to connect to your database with the credentials that you provided. The problem is, there is nothing in place to inform you if your script was successful or not! So, we will need to add some error handling.

<?php
//connect to mysql database server
mysql_connect("hostname","username","password") or die (mysql_error());
?>

Now, if you get an error, then there is something wrong with your connection script. If nothing happens at all, that means the connection is successful!

Next, we will want to make this script a little cleaner and add some code that will tell you if the connection to the database was successful or not. So we will want to create three variables at the top of our script. db_host, db_user, and db_pass. We will also create an echo for a successful database connection.

<?php
$db_host = ""; //place your hostname in this variable
$db_user = ""; //place your username in this variable
$db_pass = ""; //place password in this variable

//connect to mysql database server
mysql_connect($db_host, $db_user, $db_pass) or die (mysql_error());
echo "Successfully connected to MySQL Database!";
?>

Now that our script is connecting to our MySQL server, we just need to tell it which database we want to use. Do this using the mysql_select_db function in PHP. So, we will add one more variable at the top of our script called db_name. We will add the mysql_select_db function at the bottom of the script with an echo for a successful selection. You will notice that the success message is dynamic which will allow you to use it on other scripts without changing the code.

<?php
$db_host = ""; //place your hostname in this variable
$db_user = ""; //place your username in this variable
$db_pass = ""; //place password in this variable
$db_name = ""; //place your database name in this variable

//connect to mysql database server
mysql_connect($db_host, $db_user, $db_pass) or die (mysql_error());
echo "Successfully connected to MySQL Database!";

//Select Database
mysql_select_db($db_name) or die (mysql_error());
echo '<h2>Successfully selected ' . $db_name . ' database!</h2>';
?>

And there you have it! A perfectly respectable MySql connection script! The next tutorial will focus on the basic while loop for pulling data from the database!