Apr 2011
10

Google AJAX Map API

By Bryse Meijer

Want to include a map directly on your site? The solu­tion is rather easy using the Google AJAX Map API.

To use the Google AJAX Map API we’ll first include the JS (JavaScript) file to make it possible.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

We can include that JS file any­where on your page as long as it’s valid markup. Along with that we’re going to use some helper JS func­tions to make things easier.

  var geocoder;
  var map;
  var hide = false;
  function initialize() 
  {
      geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress(map_loc) {
    if(document.getElementById('map_canvas').style.display == '')
    {
      document.getElementById('map_canvas').style.display = 'none';
      hide = true;
    }
    else
    {
      if(hide == false)
      {
        initialize();
        var address = map_loc;
        if (geocoder) {
          document.getElementById('map_canvas').style.display = '';
          geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              map.setCenter(results[0].geometry.location);
              var marker = new google.maps.Marker({
                  map: map, 
                  position: results[0].geometry.location
              });
            } else {
              alert("Geocode was not successful for the following reason: " + status);
            }
          });
        }
      }
      else
      {
        document.getElementById('map_canvas').style.display = '';  
      }
    }
  }

These helper func­tions will allow us to take a reg­u­lar address and use them in the Google AJAX Map API. With all that behind us let’s get to the sim­ple code dis­play our map.

<a href="javascript:codeAddress('3730 Las Vegas Blvd S, Las Vegas, NV 89109');">3730 Las Vegas Blvd S, Las Vegas, NV 89109 (Map)</a>
<div id="map_canvas" style="width: 100%;height:480px;display:none;"></div>

Lets see how it looks by click­ing the fol­low­ing link: 3730 Las Vegas Blvd S, Las Vegas, NV 89109 (Map)

That is all!

Posted in AJAX, JavaScript, Tutorial, Uncategorized | Tagged , , , , | 1 Comment
Mar 2011
30

Sorting a Multidimensional Array In PHP

By Bryse Meijer

Those mul­ti­di­men­sional arrays sure are handy! What if we wanted to sort through them? It’s rather sim­ple so hang back and take a sip of your favorite drink.

To start off with we’ll use an exam­ple mul­ti­di­men­sional array of peo­ple with their names and age:

$people = array(
  array('name' => 'Bob', 'age' => 27),
  array('name' => 'Mary', 'age' => 22),
  array('name' => 'Clint', 'age' => 29),
  array('name' => 'Adam', 'age' => 42),
  array('name' => 'Sarah', 'age' => 24)
);

Now lets write the func­tion that will sort our array for us:

/***
* arraySubSort, takes a multidimensional array and sorts it by values of $subkey using $sort function.
* 
* @param array    $array
* @param string   $subkey
* @param function $sort
*/
function arraySubSort($array, $subkey, $sort = asort) {
  foreach($array as $key => $value) {
    $temp[$key] = strtolower($value[$subkey]);
  }
  
  $sort($temp);
  foreach($temp as $key => $value) {
    $result[] = $array[$key];
  }
  return $result;
}

The func­tion arraySubSort($array, $sub­key, $sort = asort) will take our array as the first para­me­ter, the sec­ond para­me­ter the key we’re sort­ing by, and the last para­me­ter can be left blank for the default asort() or you can use another sort function.

Lets sort by age.

print_r(arraySubSort($data,'age'));
/* arraySubSort Result
Array
(
    [0] => Array
        (
            [name] => Mary
            [age] => 22
        )

    [1] => Array
        (
            [name] => Sarah
            [age] => 24
        )

    [2] => Array
        (
            [name] => Bob
            [age] => 27
        )

    [3] => Array
        (
            [name] => Clint
            [age] => 29
        )

    [4] => Array
        (
            [name] => Adam
            [age] => 42
        )

)
*/

As you can tell this can prove to be quite use­ful.
Using the third para­me­ter we can use other sort func­tions, click here to read more about the others.

Enjoy!

Posted in PHP | Tagged , , , | 3 Comments
Mar 2011
29

Discounted GoDaddy Domain Trick

By Bryse Meijer

One week­end after­noon I fig­ured I’d buy a domain name for a project I was work­ing on. When I’m in need of a domain name my usual place to stop is the front page of GoDaddy. I’ve always liked their domain ser­vices; cheap prices and excel­lent sup­port, all though I wouldn’t say the same about their host­ing. As nor­mal I type in the domain name I wanted and go to check­out. That is when I had my doubts.

Should I really buy it now? The domain name is rather unique. As such I decided not to pur­chase; when this all hap­pened I was already logged into my GoDaddy account. A cou­ple of days later I noticed an email giv­ing me 15% off of the very same domain pur­chase I wanted to make that day.

You might think 15% isn’t much?! If you’re penny pinch­ing this is a great way to save just a lit­tle extra money.

To sum­ma­rize the trick:

  • Log into GoDaddy.
  • Select your domain.
  • Get to the last stage of check­out before actu­ally paying.
  • Leave that check­out page open for a minute or two. (Just to be sure, they may track your ses­sion in real-time using JS.)
  • Close page.
  • Wait a few days for an email to arrive in your inbox with 15% savings.
  • Buy your domain and enjoy the 15% off!

“A penny saved is a penny earned.” — Ben­jamin Franklin

Posted in Discounts | Tagged , , | 2 Comments
Mar 2011
29

JQuery Get Visibility/Toggle State of an Element

By Bryse Meijer

Hello every­one! Today I bring you a small tuto­r­ial to deter­mine the vis­i­bil­ity state of an ele­ment using the JQuery Frame­work. There are two func­tions that you’ll end up using that will require this easy but awe­some trick. The two meth­ods are: .tog­gle() and .slideToggle()

Both of these meth­ods pro­vide a lot of use­ful func­tion­al­ity to your website’s UI; such exam­ples include hid­ing forms, ele­ments, and other parts of pages by click­ing another ele­ment. In this tuto­r­ial I’ll show you how to deter­mine the state of a “div” element.

To start off with we’ll write some sim­ple code bind­ing a click event to a han­dle (in this exam­ple, anchor) and the div that we’re going to tog­gle.

<script type="text/javascript">
$(function() {
  $('#handle').click(function() {
    $('#my_div').toggle();
  }); 
});
</script>
<div id="my_div" style="display: none;">Hello, Using toggle you can now see me!!</div>

We now have a div with the iden­ti­fier “my_div” which has its css dis­play set to none.
Let’s write that han­dle to tog­gle its vis­i­bil­ity.
<a id="handle" href="javascript:return false;">Click me to toggle 'my_div'</a>

Click me to tog­gle ‘my_div’

Finally! We have our anchor (link) to tog­gle the vis­i­bil­ity of that pesky “div.” Don’t tell the “div” that I said that, okay? Let’s move on. We’ll now write the sim­ple con­di­tional state­ment that will tell us if that pesky– I mean lovely div is vis­i­ble or not.

<input onclick="if($('#my_div').is(':visible') == true) { alert('is visible'); } else { alert('is not visible'); }" type="button" value="What State is the toggle?" />

You could also save the result in a vari­able such as:

var status = $('#my_div').is(':visible'); // Will return true or false.
Now go have some fun. :)

Posted in JavaScript, JQuery, Tutorial | Tagged | Leave a comment
Mar 2011
29

ANDDING Notes

By Bryse Meijer

Some notes from when I was still learn­ing the basics of net­work­ing and the IP struc­ture. Maybe these could be of some use to anyone.

IP Address -> 2 parts (Net­work + Host)
192.168.0.1 -> Pub­lic Address
255.255.255.0 -> SUb­net Mask (Used to deter­mine net­work portion)

Binary Scale = 128 — 64 — 32 — 16 — 8 — 4 — 2 — 1

And­ding Process
Works with binary
[ Octect ]
– IP in Binary         = 4x8bits = 32 bits
[192.168.0.1]      1 1 0 0 0 0 0 0 . 1 0 1 0 1 0 0 0 . 0 0 0 0 0 0 0 0 . 0 0 0 0 0 0 0 1

- Sub­net Mask in Binary = 4x8bits = 32 bits
[255.255.255.0]      1 1 1 1 1 1 1 1 . 1 1 1 1 1 1 1 1 . 1 1 1 1 1 1 1 1 . 0 0 0 0 0 0 0 0

- Net­work Por­tion (IP)    = 4x8bits = 32 bits [Replaces Host part of IP]
[192.168.0.0]      1 1 0 0 0 0 0 0 . 1 0 1 0 1 0 0 0 . 0 0 0 0 0 0 0 0 . 0 0 0 0 0 0 0 0

Exam­ple
– IP      [192.168.241.38]
– Sub­net [255.255.224.0]  224 (Binary) = 1 1 1 0 0 0 0 0
[Last digit 1 in the binary is equal to 32]
.0
.32
.64
.96
.128
.160
.192
.224
.256 [Invalid it passes 255]

8bits  8bits 8bits
Class A     [Net­work . Host . Host . Host]
^- 0–126 (127)

Always Starts [Binary] = 0 _ _ _ _ _ _ _

Num­ber of use­able host 2^power(n) — 2 [n = # of bits]
2^power(24) = 16,777,214 Host

Default Sub­net: 255.0.0.0
Net­work Por­tion: 8bits
Host Por­tion: 24bits

8bits  8bits
Class B     [Net­work . Net­work . Host . Host]
^- 128–191 [Range]

Always Starts [Binary] = 1 0 _ _ _ _ _ _

Default Sub­net: 255.2550.0.0
Net­work Por­tion: 16bits
Host Por­tion: 16bits

8bits
Class C     [Net­work . Net­work . Net­work . Host]
^ — 192–223 [Range]

Always Starts [Binary] = 1 1 0 _ _ _ _ _

Default Sub­net: 255.2550.255.0
Net­work Por­tion: 24bits
Host Por­tion: 8bits

Class D
^ — 224–239 [Range] [Mul­ti­cast Chan­nel]
Always Starts [Binary] = 1 1 1 0 _ _ _ _

Class E
^ — 240–247 [Range] [Exper­i­men­tal Chan­nel]
Always Starts [Binary] = 1 1 1 1 0 _ _ _

NAT– Net­work Address Trans­la­tor
Wire Address = First num­ber in the class range
Broad­cast Address = Last Num­ber in the class range
Exam­ple Class A
– 0 = Wire Address
– 127 = Broad­cast Address [Loopback]

Break­points = Class start­ing binary — 255
Exam­ple Class A = 0 _ _ _ _ _ _ _
0 1 1 1 1 1 1 1 -> 255 — 128 = 127

Binary          Dec­i­mal                Total
[1] -> 1 1 1 1 1 1 1 1 = 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1    = 255
[5] -> 1 1 0 1 1 1 0 1 = 128 + 64 + 16 + 8 + 4 + 1        = 221
[2] -> 0 0 1 1 0 1 0 1 = 32  + 16 + 4  + 1            = 53
[3] -> 1 1 1 0 0 1 0 0 = 128 + 64 + 32 + 4            = 228
[4] -> 1 1 1 0 1 1 1 1 = 128 + 64 + 32 + 8 + 4 + 2 + 1        = 239
5  -> 1 0 1 0 1 0 1 0 = 128 + 32 + 8  + 2            = 170

192.168.2.1/24 -> 24 = Num­ber of net­work bits or sub­net mask bits
24/8 = 3 Octects = 3 Net­works and 1 Host
N     N    N   H   [N = Net­work, H = Host]
192 . 168 . 2 . 1

Pos­si­ble Sub­nets /24
/16
/8
/30

[32 bits = total bits in an IP Address]
Num­ber of pos­si­ble host -> /24 -> 32 — 24 = 8 bits 2^8 — 2 = 254 Pos­si­ble Host

Pri­vate Net­work Address’s [Not allowed to access the internet]

Class A [10.0.0.0] /8 Sub­net Mask

Class B [172.16.0.0 <-> 172.31.0.0] /16 Sub­net Mask

Class C [192.168.0.0] /24 Sub­net Mask

Local Area Netork [Pri­vate Address] -> NAT (Net­work Address Trans­la­tion) -> Inter­net
Pri­vate IP                Pub­lic IP

Uni­cast        Source Des­ti­na­tion 202.18.1.4/24    Network-[202.18.1.0] Host-[4]
IP    Mul­ti­cast    Source Des­ti­na­tion 168.21.1.14/16    Network-[168.21.0.0] Host-[14]
Broad­cast    Source Des­ti­na­tion 168.21.1.14/16    Network-[168.21.0.0] Host-[14]

168.21.1.14 = 1 0 1 0 1 0 0 0 . 0 0 0 1 0 1 0 1 . 0 0 0 0 0 0 0 1 . 0 0 0 0 1 1 1 0
Sub­net        = 1 1 1 1 1 1 1 1 . 1 1 1 1 1 1 1 1 . 0 0 0 0 0 0 0 0 . 0 0 0 0 0 0 0 0
ANND        = 1 0 1 0 1 0 0 0 . 0 0 0 1 0 1 0 1 . 0 0 0 0 0 0 0 0 . 0 0 0 0 0 0 0 0
IP Host    =         168   . 21              . 0               . 0

Wire Address (Net­work Address) 192.168.0.0 Never assigned to a com­puter, the 0.0 presents the wire address.

. 0 0 0 0 0 0 0 0 . 0 0 0 0 0 0 0 1 [First usable host]
. 1 1 1 1 1 1 1 1 . 1 1 1 1 1 1 1 1 [Broad­cast Address]

124.10.11.2/28
255.255.255.240
124.10.11.0 (net­work use ANNDING to find it)

1 1 1 1 0 0 0 0 0 = 240    1 1 0 1 1 1 1 1 = 224 [IP]
0 0 0 0 0 0 0 1 0 = 2    1 1 1 1 0 0 0 0 = 240 [Sub­net]
0 0 0 0 0 0 0 0 0 = 0    1 1 0 1 0 0 0 0 = 208

124.0.11.0    1    14    15 Broad­cast
.16    2
.32    3
.48    4
.64    5
.80    6
.96    7
.112    8
.128    9
.144    10
.160    11
.176    12
.192    13
.208    14
.224    15
.240    16
.256    -> Broadcast

10.10.21.38/9 What is the wire Address?
What is the sub­net mask?

13 bits for net­work /13 _ _ _ _ _ _ _ _ | _ _ _ _ _ [Last digit in binary string = the amount of steps.

Mul­ti­cast — Group of host MAC (GET THIS INFO)
Broad­cast — All MAC FFFF FFFF FFFF
255.255.255.255

IP Address Sys­tems
– Sta­tic [Man­u­ally Assigned]
– Assigned man­u­ally
IP Address
Sub­net Mask
Default Gate­way
– Dynamic [Auto­mat­icly assigned by soft­ware — DHCP Sever]
– Assigned Auto­mat­icly
IP Address
Sub­net Mask
Default Gateway

These notes are prop­erty of Bryse Meijer

Posted in Networking | Leave a comment

Powered by WordPress; Theme by Bryse Meijer.