Shawngo.com

Hotspots.php Google Map Script

Shawn — Thu, 25 Sep 2008 01:56:24 +0000

A visitor to the site had requested the Fishing Hotspots Script that I wrote several years ago. I figured it can’t hurt to give it away since the code is pretty bad and all.

I decided to throw this script on the site as a download for all to enjoy. It was one of my first attempts at some sort of Web 2.0 fishing map using Google Maps. I was big into mashups back then which lead me to create this beast!

The script hasn’t been tested after I stripped out all my database info and Google Maps key and anything else that would give away my deepest darkest secrets. So, you get what will appear like a work in progress or a PHP 101 final project. There are a few scripts included that I didn’t write, so thanks to them for those.

If you care to comment, or have any questions, feel free to post such comments/questions and I will try to respond in a reasonable fashion (time-wise, not fashion-wise).

So here it is in all of it’s “Web 1.0 in a Web 2.0 World” glory:

Download PHP Hotspots Script »

Enjoy!

heh…

JavaScript BlackBelt ISO JavaScript Ninja!

Shawn — Sat, 13 Sep 2008 14:56:57 +0000

Let it be known, I can’t wait for Secrets of the JavaScript Ninja to be released. Written by JavaScript Sage John Resig author of my all time favorite JavaScript Library jQuery, this book is sure to be phenomenal!

The new jQuery site looks great!

Animated Progress Meter using jQuery

Shawn — Sun, 13 Apr 2008 18:30:48 +0000

Need an animated progress meter for an application? This particular example is set up to accept a percentage of completion and a couple other numbers you can set. It’s super easy to use and implement, the best part, ONE line of javascript (including the 30KB that is jQuery(packed)).

View the animated jQuery progress bar in action.

KML Generator for Google Earth - written in PHP

Shawn — Sun, 13 Apr 2008 18:30:08 +0000

A What Generator?

This script is a homemade botch that I wrote because I didn’t like any of the other KML generating scripts out there.

The one that I did find is for PHP5. Hmph..

Basically this script grabs info from my Fishing Spots MySQL database and fires it out as xml, which is
in turn, read by Google Earth as a .kml file.

On with the script

Ok, enough said. Here is the source:

www.shawngo.com/xgenerator.php

And here is the actual KML File Output:
www.shawngo.com/generator.php

And last but not least, the Google Maps + Fishing Spots page:
www.shawngo.com/hotspots.php

Google Maps API; A Tutorial

Shawn — Sun, 13 Apr 2008 18:09:29 +0000

Step 1: Google Maps API Key

Note: this didn’t come out as expected during the Wordpress migration

In order to get a map on your site you must first sign up for a Google Maps API Key. There is no charge for this. Just make sure you follow the Google Maps Terms and Conditions.

The official Google Maps Documentation contains specifc API commands for more advanced users.

The “Hello World” of Google Maps
For the most part, basic Google Maps are fairly trivial. It’s when you’re handling 2 million data points is when it gets a bit tricky.

See Example
*note: I like to stick with the latest web standards, hence the strict DOCTYPE*

“http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd”>

charset=iso-8859-1″ />

My First Google Map
src=”http://maps.google.com/maps?file=api&v=2.44&key=your_map_key”
type=”text/javascript”>

Google Map Controls

In order to zoom or pan or view different versions of the map (Satellite or Hybrid) you need to add some more JavaScript.

This adds basic zoom and pan controls to your map (See Example)

function load_map() {
if (GBrowserIsCompatible()) {

// assign an id to the location in the html,
// in this case it is a div element
var map = new GMap2(document.getElementById(”map”));

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

// latitude and longitude of center of map, on load
// the 18 is for the zoom level
map.setCenter(new GLatLng(41.902277, -87.62832), 8);
}
}

Add a Marker and Info Window

Generally speaking, data points can be sent in XML format and loaded onto the map. This is just the basic way to include a data point (marker) and it’s corresponding Info Window.

// Adds a marker at the given point with an info window
function createMarker(point, data) {
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(data);
});
return marker;
}

function load_map() {
if (GBrowserIsCompatible()) {

// assign an id to the location in the html,
// in this case it is a div element
var map = new GMap2(document.getElementById(”map”));

// this will add a larger zoom control to the map
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

// latitude and longitude of center of map, on load
// the 8 is for the zoom level
map.setCenter(new GLatLng(41.902277, -87.62832), 8);

// Add a marker with an Info Window
var point = new GLatLng(41.91862,-87.86590);

// you can also style the info window
var html = ‘

’;
html += ‘Check out our other maps at ‘;
html += ‘ html += ‘title=”Fishing Locations and Google Maps”>’;
html += ‘fishing-locations.com

’;
var marker = createMarker(point,html);

// add the marker to the map
map.addOverlay(marker);
}
}

This adds a marker and corresponding info window. (See Example)

AJAX Your Google Map

One of the cool features of Google Maps API is that it allows you to grab the data using Asynchronous Javascript and XML, better known as AJAX.

This allows you to update the map without refreshing the page. This example gives a basic outline of the request and response activity when the user loads the page.

This adds a marker and corresponding info window. (See Example)

function load_map() {
var map = new GMap2(document.getElementById(”map”));
// this will add a larger zoom control to the map
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

// latitude and longitude of center of map, on load
// the 8 is for the zoom level
map.setCenter(new GLatLng(41.902277, -87.62832), 4);

// Read the data from example.xml
var request = GXmlHttp.create();
request.open(”GET”, “data.xml”, true);

// this is how the ajax is performed
// this part of the script sends a request to the server
// and receives the data.xml file
request.onreadystatechange = function() {
if (request.readyState == 4) { // when all is clear
var xmlDoc = request.responseXML;

// get the marker array and parse the data
var markers = xmlDoc.documentElement.getElementsByTagName(”marker”);

// for each marker, get the attributes and the infowindow data
for (var i = 0; i < markers.length; i++) {
// parse the marker attributes
var lat = parseFloat(markers[i].getAttribute(”lat”)); // lat
var lng = parseFloat(markers[i].getAttribute(”lng”)); // long
var point = new GLatLng(lat,lng); // create the point
// get the infowindow data
var html = GXml.value(markers[i].getElementsByTagName(”infowindow”)[0]);
// create the marker
var marker = createMarker(point,html);
// add the marker to the map
map.addOverlay(marker);
}
}
}
// this sends the ajax request
request.send(null);

} // end load_map()

Here are some of my favorite resources for building Google Maps.

Check out a few of the Google Maps Extended APIs

Tom Mangan’s Fun With Google Maps Tom has a few extended API’s that allow you to overlay images or add special labels to your markers.
Google Mapki - A Wiki for Google Maps API. Share information, different implementations and help out!
LifeHack.org - Listing of Google Maps mash-ups and some more resources. Hey, add your link! PageRank of 5, not bad
XMaps Library - Google Maps API Extension allowing you to do some nifty effects with Polylines and Trails
MGeoRss - “This extension integrates basic GeoRSS support directly into Google Maps. This work is public domain.”
Joomla Extension Directory - an API Extension for Joomla
Google Maps Instructions - Instruction guide for Google Maps Noobs I guess.
Chicago Transit Authority map on Google Maps - This guy takes trains to the extreme!
GxMagnify - GxMagnifier is a free add-in control for Google Maps that creates a moveable, magnified window on top of your map.
Using MySQL Spatial Extensions to make a Google Maps interface.
Mobile GMaps - is “a FREE application that displays Google Maps, Yahoo! Maps, Windows Live Local (MSN Virtual Earth) and Ask.com Maps and satellite imagery on Java J2ME-enabled mobile phones, PDAs and other devices.” Sweet!
DIY Real Time GPS Tracker - create a real-time GPS tracker using Google Maps API
The Toolshed - Geocoding with TIGER/Line, MySQL and PHP

PHP MySQL Connection Class

Shawn — Sun, 13 Apr 2008 17:43:22 +0000

This PHP helper class allows you to easily connect to your MySQL database.

There are a couple other functions that may prove useful such as:
mysql_result_all() - Displays results in a table

getUserIP() - returns the User’s IP address
validate_email() - returns boolean if email validates.

You must change the database information to your particular database.



/**

* DB_Connect.php
* @author Shawn McFarlane
* @version $Id$
* @copyright 2005
**/

class DB_Connect{

// change these values

var $host = “”;

var 
$user = “”;

var 

$pass = “”;

var 
$db = “”;

function 

query_db($query)

{
    

$conn = mysql_connect($this->host, $this->user, $this->pass);

    if (!
$conn) {

        die(

‘Could not connectooo: ’ . mysql_error());

    }
    
mysql_select_db($db);

    
$results = mysql_query($query, $conn);

    

mysql_close($conn);

    return 
$results;

}
function 

mysql_insert($query)

{
    
$results = $this->query_db($query);

    return 

$results;

}

/*

 * Displays results in table format
 *
*/

function mysql_result_all($resultz, $rownumber)

{
    echo 

‘’;

    for(
$i = 0; $i < mysql_num_fields($resultz); $i++) {

        echo 

‘’;

        echo 
mysql_field_name($resultz, $i);

        echo 
‘’;

    }
    

$rowCounter = 1;

    while (

$row = mysql_fetch_array($resultz)) {

        echo 
‘’;

        for(

$i = 0; $i < $rownumber; $i++) {

            echo 
‘. $rowCounter . ‘”>’ . $row[$i] . ‘’;

        }
        echo 

‘’;

        if (
$rowCounter === 1) {

            
$rowCounter = 2;

        } else {
            

$rowCounter = 1;

        }
    }
    echo 
‘’;

    include(
‘./includes/bottom.inc’);

}

/*

 * returns the User IP Address
 *
 *
*/

function getUserIP()

{
   
$ip = “”;

   if (isset(

$_SERVER)){

       if (isset(
$_SERVER["HTTP_X_FORWARDED_FOR"])){

           
$ip = $_SERVER["HTTP_X_FORWARDED_FOR"];

       } elseif (isset(

$_SERVER["HTTP_CLIENT_IP"])) {

           
$ip = $_SERVER["HTTP_CLIENT_IP"];

       } else {
           

$ip = $_SERVER["REMOTE_ADDR"];

       }
   } else {
       if ( 
getenv( ‘HTTP_X_FORWARDED_FOR’ ) ) {

           

$ip = getenv( ‘HTTP_X_FORWARDED_FOR’ );

       } elseif ( 
getenv( ‘HTTP_CLIENT_IP’ ) ) {

           
$ip = getenv( ‘HTTP_CLIENT_IP’ );

       } else {
           

$ip = getenv( ‘REMOTE_ADDR’ );

       }
   }
   return 
$ip;

}

/*

 *
 *
 *
*/

function authenticate($field)

{
    
// To foil any possible attempts at SQL injection,

    // do the following function
    // $variable=str_replace(”what to look for”,
    //           ”what to replace it with”,$what_variable_to_use);
    // Now use the replace function on our variables
    

if(trim($field) == “” || $field == null) return false;

    

$field = str_replace(“ ”, “”, $field); //remove spaces from password

    
$field = str_replace(“%20″, “”, $field); //remove escaped spaces from password

    // And finally, add slashes to escape things like quotes and apostrophes
    // because they can be used to hijack SQL statements!
    // use the function, addslashes(), pretty self explanatory
    //$field = addslashes($field); //remove spaces from password
    

return $field;

} 

// end authenticate()

function validate_email($email)

{
   

// Create the syntactical validation regular expression

   

$regexp =

    
“^([_a-z0-9-]+)(\.[_a-z0-9-]+)*@([a-z0-9-]+)(\.[a-z0-9-]+)*(\.[a-z]{2,4})$”;

   

// Presume that the email is invalid

   
$valid = 0;

   

// Validate the syntax

   
if (eregi($regexp, $email))

   {
      list(
$username,$domaintld) = split(“@”,$email);

      

$valid = 1;

   } else {
      
$valid = 0;

   }
   return 

$valid;

}
}

?>

Simple PHP Log-in script

Shawn — Sun, 13 Apr 2008 17:40:50 +0000

This page submits to itself, queries a database, and either allows or denies the user access.

You must change the database information to your particular database.

// simple login script

// filename: login.php

$form = ‘

Simple Login Form

’;

if(isset($_POST['submit'])){

$hm = authenticate($_POST['username'], $_POST['password']);

$hm2 = mysql_num_rows($hm);

if($hm2 > 0){

echo “You are logged in”;

}else{

echo “username / password not valid
”;

echo $form;

}

}else{

echo $form;

}

function authenticate($user, $pass){

$user = str_replace(“ ”, “”, $user); //remove spaces

$pass = str_replace(“ ”, “”, $pass); //remove spaces

$user = str_replace(“%20″, “”, $user); //remove escaped spaces

$pass = str_replace(“%20″, “”, $pass); //remove escaped spaces

// add slashes to escape things like quotes and apostrophes

// because they can be used to hijack SQL statements!

$user = addslashes($user); //remove spaces from username

$pass = addslashes($pass); //remove spaces from password

// the function md5 creates a unique 32 character string,

$pass = md5($pass);

$request = “SELECT * FROM user WHERE password=’$pass’ AND userName=’$user’”;

// Pass the request to the mysql connection,

$results = query_db($request);

// if mysql returns any number of rows great than 0 there is a match

return $results;

}

function query_db($query){

$conn = mysql_connect(“localhost”, “your_username”, “your_password”);

if (!$conn) {

die(‘Could not connecteeer: ’ . mysql_error());

}

mysql_select_db(“your_database”);

$results = mysql_query($query, $conn);

mysql_close($conn);

return $results;

}

Old Ajax 4-Star Rating Script

Shawn — Sun, 13 Apr 2008 17:34:39 +0000

Ok. This needs updating!! This is how I did it back in 2005 or so.

What I’d rather this be…

First off, this script is poorly written! Get rid of the javascript inside the xhtml tags!! Say hello to behaviour.js!

Second of all, who uses document.getElementById() anymore??? Say hello to my little friend prototype.js

Third point, I already hate the new style of the site

So ya. I ought to update this script. But if you haven’t heard of the two scripts mentioned above, they’re well worth checking out! Makes writing this script a lot less painful!

I’d like feedback on this site but am too lazy to implement a site-wide, cool-a$$ Ajax comment widget. Unless someone is willing to provide on to me so they can tell me how bad some of these toot’s are :))

Ajax Rating Script using Stars Tutorial - 07-05-2006

Ajax / PHP Rating Script

This is a neato little script I wrote for Meals and Deals to rate restaurants without refreshing the page.

I figured someone out there might get a kick out of it. Feel free to use it or even learn from it A backlink would be nice but not necessary

Ok - this was old and I decided to ditch it. I might resurrect it someday.

Ajax Rating Script using Thumbs Tutorial

Shawn — Sun, 13 Apr 2008 17:31:18 +0000

Thumber - Ajax / PHP Rating Script II

I made this script because I realized how awful my other Ajax Rating Script code looks!

This is a fairly light-weight, non-degradable Ajax script for rating a specific item using the “Thumbs Up, Thumbs Down” approach.

The script uses the Prototype Javascript Framework to ligthen the load!

The script is also in object notation (JSON) style / function closure, using a Cookies object and Voter object explained below.

Here’s the Ajaxian thumb rate script example.

I use Behaviour.js to set the onclick events outside of the markup. This sort of separation leads to unobtrusive, degradable javscript, which is pretty damn cool!

On to the script!

Here is the XHTML for the page. The two images are controlled by the CSS. The anchor tags have an onclick event (handled by myrules)that fires Voter’s vote() function.

The input button is for demo only. When pressed, it erases the Cookie that is stored on the client, so you can vote one more time. This is simply for demonstrative purposes.

Rating Script - Thumbs Up Thumbs Down | Shawngo.com

Rate Me

The CSS!

Nothing fancy here. Just padding out the anchor tag to fit the image and setting font attributes.

.thumbs{ font-family: "Trebuchet MS"; font-size:15px; font-weight:bold; border: 3px solid #eee; padding:0 5px 10px 5px; width:150px; text-align:center; } .thumbs ul{ padding:0; margin:0; } .thumbs ul li{ display:inline; } .thumbs a{ text-decoration:none; padding:0 5px; border: 3px solid #feb; } a.thumberup{ background:url(up.jpg) top right no-repeat; padding-right:20px; } a.thumberdown{ background:url(down.jpg) top left no-repeat; padding-left:20px; } .thumbs a:hover{ border: 3px solid #feb300; }

The javascript!

The Voter Class in voter.js.

Clicking on the link, which fires onclick = "Voter.vote('blog1.up');", determines if there is a cookie set for this widget.

If not, the request parameters, pars, are sent to Prototype’s Ajax.Request function.

Otherwise, a message is sent to the client that they have voted.

When the function is complete, it calls Voter.showResponse function which could either substitue for $(what_in).innerHTML = parseInt($(what_in).innerHTML)+1; this line. We could return all sorts of information to relay to the user, but that is beyond the scope of this tutorial. Don’t you hate that?

Voter = { vote : function(what_in){ var what = what_in.substring(0,what_in.indexOf(".")); var up_down = what_in.substring(what_in.indexOf(".")+1,what_in.length); var voted = Cookies.read(what); if(voted == null){ $(what_in).innerHTML = parseInt($(what_in).innerHTML)+1; this.voted=true; pars="vote="+up_down+"&what="+what; Cookies.create(what,"voted",1); var myAjax = new Ajax.Request( 'vote.php', { method: 'get', parameters: pars, onComplete: this.showResponse }) }else{ $(what+'.msg').innerHTML="You already voted"; } }, showResponse : function(originalRequest){ $('result').innerHTML = originalRequest.responseText; } }

The message sent to the client can also be split into an array. This could be useful for updating several different parts of the page.

To do this in the PHP script, simply separate the response with a bar |, example echo $response1."|".$response2;.

showResponse : function(originalRequest){

$(’result’).innerHTML = originalRequest.responseText.split(”|”)[0];
$(’some_other_element’).innerHTML = originalRequest.responseText.split(”|”)[1];
}

The javascript!

The Cookies Class in cookies.js.

This is a basic javascript cookie utility class. I found it online and just rewrote it using Object Notation.

Cookies = { create : function (name,value,days){ if (days){ var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); }else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; }, read : function read(name){ var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++){ var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }, erase : function (name){ this.create(name,"",-1); } }

The PHP!

I didn’t do very much on the PHP-side. This just returns the $_GET variables for demonstrative purposes.

This script was intented to be used wherever you want. Just assign the name of the item in the 2nd parameter when calling Voter.vote().

You’ll also need to use PHP (or whichever server-side language you choose) to set the initial value for ‘number of votes’. For this tutorial I have the example set to 10 for both.

Ideally you’d write a simple database query function with a bit of error checking for fun.

HTACCESS Wrappers Tutorial

Shawn — Sun, 13 Apr 2008 07:37:17 +0000

Instead of naming your PHP .php, you have the option of keeping the file extension as .html or .htm.

This only takes a few lines of code in the .htacces file, and a few more lines of code in the PHP script that runs the show.

Here is the code for the .htaccess file:

AddHandler pagex.htm AddHandler pagex.html Action pagex/page.php

The first two lines tell Apache to designate files of type .htm or .html to a type called ‘pagex’.

The last line instructs the web server to execute the page.php script when either of the files listed above are requested.

The path is relative, so if the script was in directory http://www.example.com/scripts/page.php, the line would read Action pagex /scripts/page.php

Now the magic…

In this tutorial we will identify the name of the file being requested, and serve the relevant content (wrapped in valid XHTML of course!).

The following is the code for page.php:



$file = $_SERVER["PATH_INFO"];

switch($file){

  case “/index.html”:

    include(‘index.php’);

    break;
  case “/shawngo.html”:

      include(’shawngo.php’);

    break;
}

?>

$file = $_SERVER["PATH_INFO"]; returns the file name of the requested file in the form “/filename.html”. We could do some fancy string work, but that is out of scope.

The switch statement switches on $file and the corresponding .php file is included using the include statements.

Here is an example of the index.php file:




// define a few variables

$title=“Web Development is Fun!”;

$description = “PHP Scripts, Google Maps API Tutorials And More!”;

$keywords = “KML, Google Maps API, Tutorials”;

?>



“http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd”>


<font color="#0000bb"><?=$title?></font>

” />

” />

” />



  
Hello World

Wasn’t That Fun?

There are many different applications for this type of modifications. This offers the ability to insert ads into the header or footer of any or all pages of your webste. This is how some of the free hosts add advertising to the free websites they host.

My most recent application of this obfuscation is I See You Marketing where all the html pages are served up this way.

Shawngo.com

Hotspots.php Google Map Script

Download PHP Hotspots Script »

Enjoy!

JavaScript BlackBelt ISO JavaScript Ninja!

Animated Progress Meter using jQuery

KML Generator for Google Earth - written in PHP

A What Generator?

On with the script

Google Maps API; A Tutorial

Step 1: Google Maps API Key

Google Map Controls

Add a Marker and Info Window

AJAX Your Google Map

PHP MySQL Connection Class

Simple PHP Log-in script

Old Ajax 4-Star Rating Script

Ok. This needs updating!! This is how I did it back in 2005 or so.

What I’d rather this be…

Ajax / PHP Rating Script

Ajax Rating Script using Thumbs Tutorial

Thumber - Ajax / PHP Rating Script II

HTACCESS Wrappers Tutorial

Now the magic…

Hello World

Wasn’t That Fun?

Have fun and share your code!