In order to create an image for a thumbnail, we need to take a screen shot of webpage. PHP GD class allows us to take screen shots of different windows. PHP also allows us to control different windows, like Internet Explorer using the COM class. So basically what we need to do is have PHP open up a window in Internet Explorer, navigate to a website, and then take a picture of that window, then save it/display it. The tutorial shown on php.net shows exactly how to do this:

<?php
$browser = new COM("InternetExplorer.Application");
$handle = $browser->HWND;
$browser->Visible = true;
$browser->Navigate("http://www.libgd.org");
 
/* Still working? */
while ($browser->Busy) {
    com_message_pump(4000);
}
$im = imagegrabwindow($handle, 0);
$browser->Quit();
imagepng($im, "iesnap.png");
imagedestroy($im);
?>

So this is SUPPOSED to load libgd.org and take a snap shot and save it to “iesnap.png”, and it DOES work, but only if your server allows it to work. If it doesn’t you just get a black/blank picture.

Windows rarely lets one program access another program via the desktop and control it. By default, Apache isn’t allowed to open Internet Explorer on windows, so we have to add an exception.

1. On Vista, click the start button, and in the search box type “Services”.
2. At the very top, there should be a link under Programs called Services. Click that link.
3. It will open up all running services, and you will see Apache running (mine is Apache 2.2, and is the first entry).
4. Right click on it and select “Properties”
5. Navigate to the “Log On” tab
6. Click the box for “Allow service to interact with the desktop”
7. Save it and close the properties
8. Right click on Apache again
9. This time, click restart, and Apache will be restarted with the new features

Now run your script again! Vista pops up a little box alerting the user that a program is interact with the desktop. Just ignore it and it will disappear in a few seconds. After the program is complete, go to your web folder and you will see iesnap.png is now an image of a webpage!

Time to make some tweaks! You will notice that it grabs the ENTIRE screen, meaning the tool bars and everything. We will need to make a few adjustments to get rid of those. The first one I made was to make the browser show as a full screen:

$browser = new COM("InternetExplorer.Application");
$handle = $browser->HWND;
$browser->Visible = true;
$browser->FullScreen=true;

That last line will make it display in the fullscreen mode, which takes care of the tool bars at the top, but I still see the footer and the side bar that I want to get rid of. In order to do this, we need to crop a little, but GD doesn’t have a simple cropping method. What I did was copied part of this picture to a new picture and resized it. Keep in mind, my display settings are going to be different, and will require you to look at your picture and test it out:

<?php
$url = $_GET['url'];
$w = $_GET['w'];
$h = $_GET['h'];
if(empty($w))
    $w=300;
if(empty($h))
    $h=300;
if(empty($url))
    $url="www.notan00b.com";
if($w>1263)
    $w=1263;
if($h>780)
    $h=1263;
$browser = new COM("InternetExplorer.Application");
$handle = $browser->HWND;
$browser->Visible = true;
$browser->FullScreen=true;
$browser->Navigate("http://".$url);
 
 
/* Still working?*/
while ($browser->Busy) {
    com_message_pump(4000);
}
$im = imagegrabwindow($handle, 0);
$browser->Quit();
imagepng($im, "iesnap.png");
$dest = imagecreatetruecolor($w,$h);
 
// Copy
imagecopyresized($dest, $im, 0, 0, 0, 0, $w, $h,1263,780);
 
// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);
 
imagedestroy($dest);
imagedestroy($im);
?>

There we have it. Even with the GET variables so you can reuse this script for AJAX or any HTML document. My images were 1280×800. To remove the bars I scaled it down to 1263×780, and they were removed almost perfectly, but it will be different for everyone.

I would post an example of it, but I am only hosted… I don’t actually pay for a VPS or private server just for one little blog. Sorry folks. If it was up to me, and I needed this service, I would probably pay a company to do it for me for a simple little website. If you have a VPS with enough memory, this may work for you. Good luck, let me know if you have any questions.

• First name
• Last Name
• Social Security Number
• Address
• City
• State
• Zip
• Date of birth
• Salary
• Position
• Start Date

That’s probably sufficient for our purposes, and then some. So the next question we need to ask is, what are we planning on doing with this info? I would assume a lot of it would be interacting with a database. This would probably involve a lot of CRUD operations (Create, Read, Update, Delete). So we need to make functions for each. One to create a new employee in the database, one to get employee info, one to update employee info if it is changed, one to delete employees once they have been fired or never completed training or whatever. The one other thing I can think of is maybe assigning an employee an ID so he can easily be tracked in the system, in case there are two Mr. John Smith employees. Speaking of searching, maybe a search function would be nice as well. So lets set out to create our class:

<?php
class Employee
{
    var $Id=null;
    var $FirstName;
    var $LastName;
    var $DOB;
    var $Position;
    var $Salary;
    var $StartDate=date('m/d/Y');
    var $EndDate=null;
    function _construct($id=null)
    {
        if($id!=null)
            $this->LoadEmployee($id);
    }
    function LoadEmployee($id)
    {
        /*** Connect to database  ***/
        /*** Code Not Included ***/
        $query="SELECT FROM Employees WHERE Id='$id'";
        $result=mysql_query($query);
        //makes sure the user exists
        if(mysql_num_rows($result)==1)
        {
            //Sets class variables
            $row=mysql_fetch_array($query);
            $this->Id=$id;
            $this->FirstName=$row['FirstName'];
            $this->LastName=$row['LastName'];
            $this->DOB=$row['DOB'];
            $this->Position=$row['Position'];
            $this->Salary=$row['Salary'];
            $this->StartDate=$row['StartDate'];
            $this->EndDate=$row['EndDate']
        }else{
            return false;
        }
    }
    function CreateEmployee()
    {
        if(!$this->CheckVariables())
            return false;
        /*** Connect to database  ***/
        /*** Code Not Included ***/
        $query="INSERT INTO Employees (FirstName,LastName,DOB,Position,Salary,StartDate) VALUES ('".$this->FirstName."','".$this->LastName."','".$this->DOB."','".$this->Salary."','".$this->StartDate."')";
        mysql_query($query);
        //Inserted, and now lets return his ID number
        $query2="SELECT Id FROM Employees WHERE FirstName='".$this->FirstName."' AND LastName='".$this->LastName."' AND DOB='".$this->DOB."' AND StartDate='".$this->StartDate."'";
        $row=mysql_fetch_array(mysql_query($query2));
        return $row['Id'];
    }      
    function CheckVariables()
    {
        //makes sure we don't have any empty variables in the areas that matter
        if(empty($this->FirstName)||empty($this->LastName)||empty($this->DOB)||empty($this->Position)||empty($this->Salary))
            return false;
        else
            return true;
    }
    function UpdateEmployee($field, $value, $id=$this->Id)
    {
        //makes sure an ID is chosen or specified.
        if($id==null)
            return false;
        /*** Connect to database  ***/
        /*** Code Not Included ***/
        $query="UPDATE Employees SET $field='$value' WHERE Id='$id'";
        mysql_query($query);
    }
    function ToArray()
    {
        $array['Id']=$this->Id;
        $array['FirstName']=$this->FirstName;
        $array['LastName']=$this->LastName;
        $array['Position']=$this->Position;
        $array['Salary']=$this->Salary;
        $array['DOB']=$this->DOB;
        $array['StartDate']=$this->StartDate;
        $array['EndDate']=$this->EndDate;
        return $array;        
    }
}
?>

Here is the finished class minus a few things that you can add if you want. What my class does is creates employees, updates specific fields, checks information, turns the info into an array, etc. I didn’t include all the variables we listed because I am lazy, as well as the delete function. There are always improvements that can be made, but this is a good starting block for any programmer. So lets see how we use it:

<?php
require("classEmployee.php");
//create a new employee
$emp=new Employee();
$emp->FirstName="Bob";
$emp->LastName="Smith";
$emp->DOB="01/01/99";
$emp->Position="Data Entry";
$emp->Salary="$10/hr";
$empid=$emp->CreateEmployee();
//And now he was created and entered into the system.
echo $empid; //His ID;
//lets check to make sure he is still in the system.
$emp2 = new Employee($empid);
$empArray = $emp2->ToArray();
print_r($empArray);
//ok, all looks good.  Lets update his name.
$emp2->UpdateEmployee("FirstName","Bobby",$empid);
?>

Well that’s my sample. Its pure rough draft, and probably won’t even work properly, but I am conveying the IDEA of OOP and employees. Think how much smoother your code would be if you created a few forms asking for employees IDs and it loads it, or allows the HR Department to enter a new employees info straight into the database on a very simple form. Good luck with this! Let me know if there are any other problems I can help with!

<?php
$name=$_POST['name'];
$pass=$_POST['pass'];
$sql="SELECT * FROM Users WHERE Name='$name' AND Pass='$pass'";
?>

This would work perfectly, and would allow people to log in. It would also allow people to SQL inject it. What if they typed this in:

Well our SQL statement ends up looking like this:
SELECT * FROM Users WHERE Name='admin' AND Pass='admin' OR 'x'='x'
‘x’='x’ is a TRUE statement 100% of the time, so as long as ‘x’='x’, it will pull up all the info you needed, and suddenly you are logged in. This is probably the easiest SQL injection around, and does work on occasion. There are hundreds of SQL injections, and a poorly coded site will always be susceptible. Not only are people able to log into a site as an administrator, but they can display login info using UNION statements.
One other way good programmers tend to get lazy is through their “GET” variables. A lot of times programmers will pass variables in the URL bar: http://www.mysite.com/view.php?id=123. There is nothing wrong with this, in fact, everyone does it and will continue to do it because it is efficient and easy to do. The problem comes when people SQL inject that variable: view.php?id=123′ and ‘x’='y. This particular injection allows a hacker to test your site for susceptibility to injections in the URL bar. If you didn’t protect your variables, your SQL statement would look like this if it wasn’t protected: "SELECT * FROM Info WHERE Id='123' and 'x'='y'". If it wasn’t protected, the hacker would see a page with NO info on it, or an error because ‘x’ NEVER equals ‘y’ and is a FALSE statement. If they see a blank page or an error, they know they can continue their attack and eventually gain access to all of your information.

My goal is not to teach you how to hack, but rather how a simple PHP object exists and will help you avoid these types of attacks. That object is PDO. It comes standard with the latest releases of PHP and can be used to prevent SQL injections very simply. PDO is a database object, that allows you to connect to a variety of different databases, send queries, and display the results. It actually is a bit easier to code than actual mysql in PHP, but it is a complete 180 from what you have been taught using w3schools and tizag.com. I don’t really want to get into a tutorial of PDO either because there are quite a few on the internet that explain it much better than I can right now. I recommend checking out http://www.phpro.org/tutorials/Introduction-to-PHP-PDO.html to get a grip on the basics of how PDO works. The one thing that this tutorial does NOT explain is the “prepare” function. He only goes into it slightly, but doesn’t describe what it does exactly. Prepare() simply checks for all types of quotes and makes sure that no SQL injections can get through. Here is a quick example:

<?php
$mysql_host="localhost";
$mysql_user="root";
$mysql_pass='';
$mysql_database="epco";
try {
    $dbh = new PDO("mysql:host=$mysql_host;dbname=$mysql_database", $mysql_user, $mysql_pass);
    /*** create the statement ***/
    $stmt = $dbh->prepare("SELECT * FROM users WHERE user = :user AND pass = :pass");
    /*** bind the paramaters ***/
    $stmt->bindParam(':user', $_POST['user'], PDO::PARAM_STR);
    $stmt->bindParam(':pass', $_POST['pass'], PDO::PARAM_STR);
    /*** execute the prepared statement ***/
    $stmt->execute();
    /*** close the database connection ***/
    $dbh = null;    
}catch(PDOException $e){
    echo $e->getMessage();
}
?>

When we prepare our statement, we use a place-holder that will later assign a variable to. When that statement is executed, all our quotes are removed or slashed. $_POST['user']="admin' OR 1=1"; typically becomes $_POST['user']="admin\' OR 1=1"; and your database is protected from the attacks.

In conclusion, I am not advocating PDO and saying only to use that and nothing else. I use a database class that is much smaller and does what I need it to do. I have spoken with other programmers who have created their own class to add/strip slashes, rawurlencode/decode, and htmlspecialcharacters and connect to their databases. PDO was created as a “universal” database object that can do whatever you want it to do with several different databases. It is awesome and will go a long way to protect your site from SQL injections if used properly. The prepare statement is simple, but doesn’t protect against EVERY type of attack. Don’t be fooled into a false sense of security just because you are using a PHP object. XSS, javascript injections, and bruteforce, attacks are all still possible even if you use this class. Be careful in what you code, and fix any code when the holes are found by users or when you are hacked.

Step 1 – Create a new table!
Go to your MySQL database and create a table called “wp_counter” with 2 fields: Post_Id and Count. Both are Int with length 10. Here is the SQL code you can copy and paste to make it a bit shorter:
CREATE TABLE `wp_counter` (`Post_Id` INT( 10 ) NOT NULL , `Count` INT( 10 ) NOT NULL)

Step 2 – Editing post-template.php
This is the file that is used to display your posts (not the snippets on your front page, but full out posts). It is located in the “wp-includes” directory.
Open post-template.php for editing.
Search for a function called “the_content()“. It typically starts on line 165 should look like this:

165
166
167
168
169
170

function the_content($more_link_text = null, $stripteaser = 0, $more_file = '') {
	$content = get_the_content($more_link_text, $stripteaser, $more_file);
	$content = apply_filters('the_content', $content);
	$content = str_replace(']]>', ']]>', $content);
	echo $content;
}

So what we want to do is make it so that every time it shows the content, it will update the count and display it to the user. So we are going to change that function to look like this:

165
166
167
168
169
170
171
172

function the_content($more_link_text = null, $stripteaser = 0, $more_file = '') {
	$content = get_the_content($more_link_text, $stripteaser, $more_file);
	$content = apply_filters('the_content', $content);
	$content = str_replace(']]>', ']]>', $content);
	echo $content;
	update_count();
	echo"<small><i>Views: ".get_content_views()."</i></small>";
}

And immediately following that, we are going to add a couple functions:

173
174
175
176
177
178
179
180
181
182
183
184
185
186
187

function update_count(){
	global $wpdb, $id;
	if($wpdb->query($wpdb->prepare("SELECT * FROM wp_counter WHERE Post_Id='$id'"))==0)
		$wpdb->insert("wp_counter",array('Post_Id'=>$id,'Count'=>1),array('%d','%d'));
	else {
		$row=$wpdb->get_row($wpdb->prepare("SELECT * FROM wp_counter WHERE Post_Id='$id'"),ARRAY_A);
		$count=$row['Count']+1;
		$wpdb->update('wp_counter',array('Count'=>$count),array('Post_Id'=>$id),array('%d'),array('%d'));
	}
}
function content_views(){
	global $wpdb, $id;
	$row=$wpdb->get_row($wpdb->prepare("SELECT * FROM wp_counter WHERE Post_Id='$id'"),ARRAY_A);
	echo $row['Count'];
}

That’s it! So your finalized post-template.php will look like this:

function the_content($more_link_text = null, $stripteaser = 0, $more_file = '') {
	$content = get_the_content($more_link_text, $stripteaser, $more_file);
	$content = apply_filters('the_content', $content);
	$content = str_replace(']]>', ']]>', $content);
	echo $content;
	update_count();
	echo"<small><i>Views: ".get_content_views()."</i></small>";
}
function update_count(){
	global $wpdb, $id;
	if($wpdb->query($wpdb->prepare("SELECT * FROM wp_counter WHERE Post_Id='$id'"))==0)
		$wpdb->insert("wp_counter",array('Post_Id'=>$id,'Count'=>1),array('%d','%d'));
	else {
		$row=$wpdb->get_row($wpdb->prepare("SELECT * FROM wp_counter WHERE Post_Id='$id'"),ARRAY_A);
		$count=$row['Count']+1;
		$wpdb->update('wp_counter',array('Count'=>$count),array('Post_Id'=>$id),array('%d'),array('%d'));
	}
}
function content_views(){
	global $wpdb, $id;
	$row=$wpdb->get_row($wpdb->prepare("SELECT * FROM wp_counter WHERE Post_Id='$id'"),ARRAY_A);
	echo $row['Count'];
}
function get_content_views(){
	global $wpdb, $id;
	$row=$wpdb->get_row($wpdb->prepare("SELECT * FROM wp_counter WHERE Post_Id='$id'"),ARRAY_A);
	return $row['Count'];
}

Now every time someone visits the page, they will see how many other people have viewed that page!

Today I want to cover parent/child/sibling relationships and how jQuery can be very effective here. I spent a while trying to figure this out in javascript, and yes, it is completely do-able in just a little more code, but jQuery always has the UI plugins that make coding super easy. Let me show you some code I currently have:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$('div').each(function (){ 
   if($(this).is('#rows')) {
      $(this).hover(
         function() { $(this).addClass('rows-add-class'); }, 
         function() { $(this).removeClass('rows-add-class'); }
      );
      $(this).children('.section2, .section3, .section4, .section5').click(function(){
         window.location.href="viewClient.php?id="+$(this).siblings('.small').children('#cb').val();
      });
      $(this).children('.section1').click(function(){
         if($(this).siblings('.small').children('#cb').attr('checked'))
            $(this).siblings('.small').children('#cb').attr('checked',false);
         else
            $(this).siblings('.small').children('#cb').attr('checked',true);
      });
   }
});

I know this looks complicated, but lets break it down line by line.

1. $('div').each(function (){

This code goes through each <div> in my code, and with each <div> it finds, it executes a function, which is the remainder of the code.

2. if($(this).is('#rows')) {

So when it finds a

, it checks to see if the <div> that was found “is” (or has the property of) ‘#rows’. The # in the front means the <div> id. If there is a “.” in front, it means the <div> class. If there is nothing, then it means that it is a tag itself. So when it finds the div tag with the id=”rows”, it will execute the following code.

$(this).hover(

Simply, it adds a hover class to the div with the id=”rows”. When you add a hover, you need to have it do 2 things, mouseover and mouseout. So the next parts of the code describe mouseover and mouseout respectively.

function() { $(this).addClass('rows-add-class'); },

So on mouseover, it will execute this function, which is, it will add a class called ‘rows-add-class’ to the div we have selected. Note the “,” at the end, which means that this is the next line is also part of hover().

function() { $(this).removeClass('rows-add-class'); }

On mouseout, it will remove the class. We could have it add another class or give us an alert if we wanted, but typically when you hover over something with the mouse, you want to emphasize/change something, and when you move it out, you want it to return to normal.

);

So finally we start closing stuff up. This closes up the hover statement.

$(this).children('.section2, .section3, .section4, .section5').click(function(){

Here we are getting into children. If you have a div, and inside that div, you have multiple other divs, you may want to do something to those divs. What I am doing here is adding an “onclick” function to the children divs with classes “section2″, “section3″, “section4″, “section5″. Notice how here I used ‘.section1, etc’, the “.” signifies classes. So this is statement, I am adding an “onclick” to the child tags under &ltldiv id=”rows”>. The next line will tell me what exactly I am going to do when I click on one of those 4 child divs.

window.location.href= "viewClient.php?id="+$(this).siblings('.small').children('#cb').val();

Wow, thats a long line of code! window.location.href= is a redirect, so basically, when you click the divs, it will act like a link and take you somewhere else. It looks like it will take you to a viewClient.php page with the id= whatever $(this).siblings(‘.small’).children(‘#cb’).val(); equals. It gets a little confusing here. So <div id=”rows”> is set up with a few children tags, and those children have a few tags. All of the children are siblings. So if I was to click on one of the children, say one with the class “section2″, I want to find out info about his sibling, with the class “small”. Now “small” has a child with the id=”cb”. Cb stands for check box. Basically, when you click on the div, it will find its sibling’s, child’s value, which is the ID # we are looking for. At the bottom of the page you can see the layout of the div with children and grandchildren. So to recap, this line redirects us to “viewClient.php?id=1″.
Why did I do this? Well I am pulling data out of a database, and I don’t want to make a link in every div so they have to click on the words to be redirected. These couple lines of code make it much easier for the user to redirect to the page they want.

});

Just closing up the “onclick” that we added to those 4 divs.

$(this).children('.section1').click(function(){

Here is the div with class=”section1″ and we are adding a different “onclick” function to it. Let’s see what we want it to do.

if($(this).siblings('.small').children('#cb').attr('checked'))

This looks similar to line 8 where we locate the sibling with the class=”small” and the child it has with the id=”cb”. So we are locating our checkbox. If our checkbox is checked (.attr(‘checked’) returns true if checked, false if not checked), we are going to do something. That was pretty easy now that siblings and children make a little sense.

$(this).siblings('.small').children('#cb').attr('checked',false);

Ok, so if it was checked, all this will do is set ‘checked’ to false, meaning it will un-check the check box.

else

If it wasn’t checked, then what.

$(this).siblings('.small').children('#cb').attr('checked',true);

Well then, check it! So why did I add this code? Well just to add it really. It makes clicking the check box slightly easier. They can click on this div, and it will check/uncheck the checkbox for them.

The rest of the code simply closes up the function that I created. This is something I would have it do on start up, rather than allowing the user to click a button to enable these features.

This is the HTML markup that was used in the code. The classes are easily created and is something you can do on your own.

<div id="rows">
   <div class="small"><input type="checkbox" id="cb" value="1"></div>
   <div class="section1">1 (Clients ID)</div>
   <div class="section2">Bob (Clients Name)</div>
   <div class="section3">123 Fast Lane (Clients Address)</div>
   <div class="section4">12345 (Clients Zip)</div>
   <div class="section5">(123)555-1212 (Clients Phone)</div>
</div>

Pretty simple layout causes pretty intense code. Hopefully my explanation shows you some of what jQuery can do for you and provides a plan of attack for you. If you want any help, let me know and I will be willing to explain something, review your code, etc.