PHP to Paper.......... Where to Start - Authenticating with Google

After being tasked with getting a PHP web application to print for itself, and deciding Google Cloud Print was looking like the best solution, I set about finding the solution to my problem.

After reading the official doc's and deciding either this really isn't how Google currently intended for the service to be used or they really just hadn't had chance to put much into the doc's I widened my search.
I came across a very useful chap called Kin Lane, he has made some excellent blog posts on the subject and turns out he works in the field of printing. After a quick email and him agreeing that I *should* be able to achieve what I wanted with Google Cloud Print, I set about solving my puzzle.

At the time of writing this, there is very little in the way of code examples using Google Cloud Print, in fact the only one I had found focusing on submitting a job was this sample. This however left some questions to which I found no useful answers!

To start with, Google have provided some interfaces for working with the service. Kin Lane has covered connecting to some these services (receiving print jobs, rather than submitting print jobs, but it was a very good jump start) with PHP on his blog. The solution focuses on the use of the Zend Framework, which was handy with it being the framework the web app uses!

The Pseudo Answer:

• The web app has a dedicated Google user account (in my case, this is one of the Google App accounts which is a group email address) 
• Setup some printers for the user account as described here.
• The system requests an Authentication Token from Google to allow use of the service.
• The system can now access the printers and use the interfaces.
• The system can now get a list of printers, and
• The system can now submit jobs to be printed!

The Start of the Real Answer:

After setting up the printers for a user account, as described here.
The first step the system needs to take is getting an Authentication Token from Google which allows us to use the users services, in this case, the printers you have setup.

// Google User Email:
$G_Email = "your_google_acount@googlemail.com";
// Google User Password:
$G_Pass = "your_google_acount_password";
// Create a Gdata client for the Google Cloud Print service:
$client = Zend_Gdata_ClientLogin::getHttpClient($G_Email, $G_Pass, 'cloudprint');
// Get the Authentication Token:
$Client_Login_Token = $client->getClientLoginToken();

Picture taken from Google

You'll notice, the use of the Zend Framework makes getting the Authentication Token extremely easy, however, and this is quite a big however, there is the potential Google will deny an Authentication Token, and instead request a captcha to be completed, this is covered by the Zend Doc's and other guides on the web, but I will try to come back to it later due to this causing an error for an automated system.
Another thing to note is, once Google has served an Authentication Token, it remains valid for several days, I have read this can be anywhere from 14 days to 28 days, so to play it safe, I request a new token every 10 days to play it safe.

In the next entry I will cover the use of the different interfaces to allow us to print.

PHP to Paper..........The Introduction to Printing

Well I'm sure if you have found this blog entry, it's not because you need to be taught how to suck eggs! I recently ran into the brick wall that is, getting a PHP web application to print directly to a printer, no user dialogs, and the printer a sitting on the opposite side of the world to the server, I'm guessing if you have found this, you are looking for a solution to the very same thing.

Google Cloud Print

Imagine this for a situation, you run an online shop, the server is online in a far away place, the office is in one location where workers maintain the shop and your items listed, in another location is your warehouse, every day someone in your warehouse has to log in to print out a picking note and a delivery note.
Now how much easier would it be if every time an order came in, the printer sitting in the warehouse churned out the paperwork the minute your customer confirmed their order?!

Well this was a challenge I had been tasked with, allowing a PHP based back office system to print, no dialogs, no questions asked. So where to start, I wanted a solution which was both simple and easy to maintain. As printers come and go, I wanted a solution that was somewhat future proof and didn't need much code work to change or add printers and the possibility of printing to more than one location.

After a little thinking and a little bit of trawling, I kept coming back to one possibility which the more I thought about the more I thought it's got to hold the answer.
If you haven't heard about it yet, you soon will, the awesome giant that is Google have come up with an excellent new beta product, its called Google Cloud Print, and while at the moment I don't really think it's intended to be an answer to the problem, the more I thought about it, the more I thought it was going to be the answer. Over the next few blog posts I am going to share my findings, and show you how I've used Google Cloud Print to get my PHP system to print directly to my printers, that's the server (in this case) stateside printing directly to a printer roughly 2500 miles away from it!


So a final word to end the introduction, before I get stuck into the nitty gritty: What is Google Cloud Print I hear you ask:

Print anywhere, from any device.
Google Cloud Print is a new technology that connects your printers to the web. Using Google Cloud Print, you can make your home and work printers available to you and anyone you choose, from the applications you use every day. Google Cloud Print works on your phone, tablet, Chromebook, PC, and any other web-connected device you want to print from.

Quoted from http://www.google.com/cloudprint/learn/ 

A diagram showing the workflow of Google Cloud Print

Looking for the official help? Click Here for the developers doc's, but be warned as at the time of writing this, the doc's are somewhat limited due to Google Cloud Print still being in beta.

Using jQuery to perform a Bing API search - explained.....

After a recent discussion, I was asked to explain how the jQuery Bing API search found on the site vynora.com worked , so decided, if its useful to one, it maybe useful to others, so in this post I will explain line by line what's happening.

Below is an example of what you will get if you used to code (except I've added a button to clear the results), all you need to do is type! This kind of search box does have one major downside, if the user has javascript turned off, it won't work!! But for majority of users out there it will 

The Example:

Search For:

The basics of the search are:

1. An input box for your user to type what they are searching for.
2. A container to show off the results that get returned.
3. Some jQuery to perform the magic for you.
1. NOTE: You will need to get an API ID from Bing to allow you to perform searches on your own site. You can get one here.

Lets see some code then:

The input box - straight forward enough:

<input type="text" class="search_input" />

NOTE: in jQuery if you want to reference a DOM element, if it has an ID attribute use #idName, if you want to reference an element by its class name use .className

The results box - again straight forward enough:

<div id="result"></div>

Finally the jQuery magic:

1. $(document).ready(function(){
2.  $(".search_input").focus();
3.  $(".search_input").keyup(function() {
4.   var search_input = $(this).val();
5.   var keyword = encodeURIComponent(search_input);
6.   var appID = "YOUR-OWN-APP-ID-FROM-BING";
7.   var yt_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid='+appID+'&query='+keyword+'&sources=web'; 
8.   $.ajax({
9.    type: "GET",
10.    url: yt_url,
11.    dataType:"jsonp",
12.    success: function(response){
13.     $("#result").html('');
14.     if(response.SearchResponse.Web.Results.length){
15.      $.each(response.SearchResponse.Web.Results, function(i,data){
16.       var title=data.Title;
17.       var dis=data.Description;
18.       var url=data.Url;
19.       var final="<div class="webresult"><div class="title"><a href="http://www.blogger.com/%22+url+%22">"+title+"</a></div><div class="desc">"+dis+"</div><div class="url">"+url+"</div></div>";
20.       $("#result").append(final);
21.      });
22.     }
23.     else {
24.      $("#result").html("<div id="no">No results</div>");
25.     }
26.    }
27.   });
28.  });
29. }); 

OK let's break it down now......

1. When the page has finished loading, run the following code.
2. Focus the user on the input box so they can start typing straight away.
3. Bind a function onto the input box, listening for a keypress.
4. Store whats been written in the input box as a variable.
5. Encode what was in the input box so it can be passed in a URL to Bing.
6. Store your Bing application ID you got earlier on into a variable.
7. Store the URL to query as a variable. To break this down a little, we are passing our application ID, the value from the input box and also informing Bing we want results from the web.
8. Start a jQuery Ajax request.
9. Set the ajax type to a GET request.
10. Set the URL for the ajax call to contact.
11. Set the data type as jsonp (a cross browser request for JSON formated results)
12. If the ajax request was successful, perform the following (data that was returned will be available as response).
13. Clear any previous results.
14. Check we actually got some results (If there were none, the length would be 0 - 0 is equal to false. When queried like this, anything other than 0 is true)
15. Now use the jQuery .each() function to loop through each result which was returned, performing the following for each result.
16. Store this results title as a variable.
17. Store this results description as a variable.
18. Store this results URL as a variable.
19. Store a HTML snippet to display this result, putting each part into a container (this allows our CSS to make the results look pretty).
20. Use jQuery's .append() method to add the HTML snippet to the end of the results container.
21. Finished looping through the results.
22. Finished what happens if there were results.
23. Perform the following in the case no results were returned.
24. Use jQuerys .html() method to set the results container to show a message saying nothing came back. This method would clear everything else from the container leaving just what it sets.
25. Finished what happens if nothing was returned.
26. Finished what to do when the ajax is successful.
27. Finished the ajax call.
28. Finished what to do when a key is pressed on the input box.
29. Finished what to do when the page has finished loading.

The final, but optional part for this, by now, rather long post is the CSS to style the results. I won't break this lot down, there is plenty of guides out there which will help you understand CSS if you need to know:

.title{
 color:#069;
 font-size:15px;
 padding-bottom:5px
}

.title a{
 color:#2200c1;
 text-decoration:none
}

.title a:hover{
 text-decoration:underline
}

.desc{
 color:#333;
 padding-bottom:5px
}

.url{
 color:#0e774a
}

.webresult{
 margin-top:10px;
 padding-bottom:10px;
 padding-left:5px;
 border-bottom:1px dashed #dedede
} 

#result {
 text-align: left;
 font-family: arial,helvetica,sans serif;
}

One final note:
The above code is what I was asked to explain, it isn't in my opinion a fully polished example I would put into production. When I have a moment, I will polish up the jQuery code a little so it gives somewhat of a nicer user experience - i.e. advising the user when the ajax fails, and performing just one request instead of one for every letter pressed (see the post for why this can be a problem).

Scoobler.

Some jQuery books from Amazon.com:

          

Adding Fancybox to blogger.com

Fancybox for jQuery is another one of the plugins which I really like right now. I came across Fancybox one day in work whilst I was developing a web application where I wanted to show a map, but didn't really want to go down the route of using Google Maps API to showing my own map - that all seemed far too cumbersome when I could simply open Google Maps, but thats no fun now is it!!!

So along came Fancybox to save the day and make that really boring link to Google Maps so much more pleasurable.

OK so Fancybox can do so much more but for the purpose of this post I will show you how to set it up to open up a pretty iFrame popup when you click on a link you have added to your blog.

As ever with my jQuery posts, you can try this out on this very page - if you haven't clicked a link above already, go ahead and click this one below:

View: Google.com

Pretty aint it?!?!

A little preparation is key:
First things first, Fancybox doesn't appear to have a CDN, so we are going to need to download the source files, extract them and store them somewhere online where you can reference them from.

• Download from Fancybox.com
• Extract the files, you will need (at the time of writing this):
• jquery.fancybox-1.3.4.css
• jquery.fancybox-1.3.4.pack.js
• All images from the fancybox folder.
• Now you need to store the files (all in the same directory) somewhere online where you can reference them.
• You will need to know the web address in a moment (lookout for YOURDOMAIN.com)....

Let's take a look at the code:
Firstly we need to add the plugin:

1. Login to your blog. At the top right of the page (for me anyway) click Design
2. Click on the Edit HTML tab.
3. Find the line </head>
4. Just before the line, you need to add the following code:

<script src='http://YOURDOMAIN.com/hosted/fancybox/jquery.fancybox-1.3.4.js' type='text/javascript'/> 
<link href='http://YOURDOMAIN.com/hosted/fancybox/jquery.fancybox-1.3.4.css' rel='stylesheet' type='text/css'/>

5. Now we need to add some jQuery code to the section we setup in: Adding jQuery to your blogger.com. Add the following lines:

$("a.inlineLink").fancybox({
     'width'             : '75%',
     'height'            : '75%',
     'autoScale'         : true,
     'enableEscapeButton': true,
     'speedIn'  : 500,
     'speedOut'  : 500,
     'padding'  : 15,
     'overlayColor' : '#123',
     'transitionIn'      : 'fade',
     'transitionOut'     : 'fade',
     'type'              : 'iframe'
 });

That's the control's in place, now all you need to do is a little tweak in your post, and voila......

1. Create your post as you normally would, including using the Link feature to add links within your post.
2. Once completed, you will need to edit your HTML, so click on the Edit HTML tab.
3. Now find the code for the link, taking the example above link to Google.com it will look something like this:

<a href="http://www.google.com/">View: Google.com</a>

4. Now we need to add the trigger, so when the user clicks the link it open Fancybox:

class="inlineLink"

5. The final code will look something like this:

<a href="http://www.google.com/" class="inlineLink">View: Googlee.com</a>

Simple, but so effective! Great for when you want to show a reader something without them disappearing off from your blog!

NOTE: Make sure you check your links once you have added the effect, there are the odd sites out there which won't work in an iFrame, take YouTube.com for example (go on give it a click).....

Scoobler.

Some jQuery books from Amazon.com:

          

Adding a jQuery UI Dialog to your blogger.com

One item I find very useful from the jQuery UI range is the .dialog(), its a much nicer sight than the typical browser alert() box!

In this little tutorial I will show you how to add a jQuery wrapper function which will allow you to show a dialog with a custom title and contents from anywhere in your blog. I have opted for a wrapper function as I generally don't change my dialog's, you could, if you wanted change things to allow you to customize the dialog a little more. But for now, I'll stick with the simple stuff!

If you have looked at my post on "Adding jQuery to your blogger.com"  and you were keen, you may have noticed, in the demo towards the bottom of the page, where I used the jQuery UI .button() effect to change a boring button for a nice pretty one, I also changed what happens when you click the button (just in case you wanted to see it really does work) yep, its a dialog.

Just in case you want to see it again:


Lets see some code:


Firstly lets add the HTML needed for the dialog:

1. Login to your blog. At the top right of the page (for me anyway) click Design 
2. Click on the Edit HTML tab.
3. Now search for the line </body>
4. Just before the line, add the following code, this will be the holder for the dialog:

<div id='dialogMsg' style='display:none;'/>

Now its time for the jQuery wrapper function which will do the work of displaying the default dialog:

1. Whilst still in the Edit HTML section, we are going to add some code to our jQuery block we setup if you followed "Adding jQuery to your blogger.com".
2. Find the line $(document).ready(function(){ 
3. Just after the line, add the following code:

$.fn.dialogPopup=function(title, content) {
  $(this).html('');
  $(this).dialog('destroy');
  $(this).html(content);
  $(this).dialog({
   title:title, 
   modal:true,
   autoOpen:true,
   buttons: {
    "Close": function() {
     $(this).dialog("close");
    }
   },
   destroyOnEscape:true
  });
 };

OK so now all the codes in place lets see how we could use our new wrapper function.

A basic button example:

1. Start by creating a New Post, or Editing an existing one.
2. Complete your page first using the Compose tab (if thats how you normally do things).
3. Click on the Edit HTML tab. Now we'll add the HTML and jQuery code which does the niceties.
4. Find the part of the code where you want to add the, in this case button and add the following HTML:

<input id="myNewButton" type="button" value="Nice jQuery UI Button" />

5. Finally add a little script block which will allow us to setup the jQuery code just for this post:

<script type="text/javascript">
 $(function(){
  $("#myNewButton").click(function(){
   $("#dialogMsg").dialogPopup("This is the title...", "And this is the contents of the dialog!"); 
  }).button();
 });
</script>

The results from above:

What else could we use this for? What every you can think of!!! How about stopping someone right licking on the page (go on, you should know by now that you can try it out).
Wanna see how I did it:

$(this).mousedown(function(event) {
   switch (event.which) {
    case 3:
     $(document).bind("contextmenu",function(){return false;});
     $("#dialogMsg").dialogPopup("No right clicking....", "I do hope that was a test and ya ain't trying to pinch my code ya cheeky bugger :p ");
     break;
    }
  });

Scoobler.

Some jQuery books on Amazon.com:

          

Adding a scollTop link to blogger.com

After "Adding jQuery to your blogger.com" I decided it was time to add my first little hack to every blog post I make. So the first item on the agenda is a link to scroll to the top of the page (see it in action at the bottom right of this page...) this isn't something new, but I decided I would do things my way, so I'll share how I have achieved this.

The beauty of this link and it is a link, not an image ;) is, it will only appear once the visitor has scrolled down from the top of the page and disappear again once they are back at the top. And it uses jQuery's .animate() function to make the users experience that little bit more pleasant. 

Lets get started:

OK so to start with, we will need to add a link to the page. It isn't really too important where on the page its added as we will be using CSS to move its location and make it look pretty, but inside the <body>..</body> tags will be best.

1. Login to your blog. At the top right of the page (for me anyway) click Design
2. Click on the Edit HTML tab.
3. Now search for the line: </body>
4. Now just above the tag you want to add the line (set the text to what ever you want to appear):

<a href='#' id='toTop'>Scroll to Top</a>

Next we want to add the CSS to the page to make our link look a little more appealing. We can use the Template Designer to add the CSS, this will ensure the code is in the correct place.

1. Now click on the Template Designer tab.
2. On the list (top left) click on Advanced.
3. Now scroll down and click on Add CSS.
4. In the input box, add the following (change the colors and things to suite) and click Apply to Blog:

/* to top */
#toTop {
  width: 100px;
  background: #99d9f2;
  border: 1px solid #bce1a6;
  text-align: center;
  padding: 5px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
  color: #333333;
  text-decoration: none;
}

Now we will have a link appear on the page at the bottom right, it will technically return the visitor to the top of the page, but not in a nice way, so onto the jQuery that will do the niceties for us:

1. Return to the Edit HTML tab, in the Design section.
2. Now we need to add some jQuery code to the section we setup in: Adding jQuery to your blogger.com. Add the following lines:

$("#toTop").hide().removeAttr("href");
 if($(document).scrollTop()!="0") {
  $("#toTop").fadeIn("slow");
 }
 $(window).scroll(function(){
  if($(window).scrollTop()=="0"){
   $("#toTop").hide("slow");
  }
  else{
   $("#toTop").show("slow"); 
  }
 });

 $("#toTop").click(function(){
  $("html, body").animate({ scrollTop: "0px" });
 });

3. The result will be something like this:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
 $("#toTop").hide().removeAttr("href");
 if($(document).scrollTop()!="0") {
  $("#toTop").fadeIn("slow");
 }
 $(window).scroll(function(){
  if($(window).scrollTop()=="0"){
   $("#toTop").hide("slow");
  }
  else{
   $("#toTop").show("slow"); 
  }
 });

 $("#toTop").click(function(){
  $("html, body").animate({ scrollTop: "0px" });
 });
});
//]]>
</script>

4. Now save the template, and take a look at your work!!

If you have followed everything, you should have a link appear once you scroll away from the top of a post, and if you click the link, you will be scrolled to the top of the page.

Scoobler.

Some jQuery books from Amazon.com:

          

Adding jQuery to your blogger.com

jQuery is one of my favorite frameworks available today. The sheer versatility of the framework is outstanding. So you can expect to see a fair few posts on jQuery throughout this blog. Hopefully you will find them useful - please feel free to ask questions, I will help out if and where I can!

I will dive straight in, with this being the first blog on the site, I may as well make it about my experience with setting up the blog, preparing it for the many posts to come.

Adding jQuery to blogger.com:

1. Login to your blog. At the top right of the page (for me anyway) click Design 
2. Click on the Edit HTML tab.
3. Now search for the line <head>
4. Now you need to add the jQuery core (I will be using the Google CDN version), after <head> add the following lines - you will notice I am also adding the jQuery UI aswell:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js' type='text/javascript'/>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'/>

5. Next is to add any jQuery code you want to load with EVERY page:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {

});
//]]>
</script>

6. Now you can place anything you want to run when the blog loads in the normal way. 

For example:

If you wanted to turn all buttons that you place on your blog:

<input type="button" id="myButton" value="This Button" />

Into jQuery UI buttons you could do this:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$(":button").button();
});
//]]>
</script>

Note:
The reason for adding the code between:

//<![CDATA[
.....
//]]>

Is that when you submit the code, it stops the code being interpreted, and characters being swapped for their ASCII representation. This isn't really a problem for most browsers, but it makes the code much harder to read next time you fancy changing something!

Scoobler.

Some jQuery books on Amazon.com: