Not A n00b » Tutorials

jQuery Slideshow

pyr0t3chnician — Wed, 12 May 2010 08:08:35 +0000

I programmed this the other day and tried to make it as user friendly as possible. Let me post the code and then I can explain it a little.

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript">script>
<script type="text/javascript">
$(document).ready(function(){
   var speed=2500;
   slideShow(speed);
});
function slideShow(speed){   
   var width = $(".slideshow").width();
   var height= $(".slideshow").height();
   var images=$("#slideshow").html();
   var overText=$("#overText").html();
   $("#slideshow").css({"width":width+"px","height":height+"px","position":"relative"});
   $("#slideshow").html("+height+"' width='"+width+"'>+height+"' width='"+width+"'>
"+overText+"
");
   $("#hiddenimages").hide().html(images);
   $("#imagea #imageb").hide();
   $("#overtext").css({"position":"absolute","right":"1px","bottom":"1px","z-index":"5"});
   $("#imagea").css({"position":"absolute","top":"1px","left":"1px","z-index":"3"});
   $("#imageb").css({"position":"absolute","top":"1px","left":"1px","z-index":"4"});
   $(".slideshow").each(function(index){
       var old=$("#imageb").attr("src");
       var newsrc=$(this).attr("src");
       setTimeout(function(){
            $("#imagea").attr("src",$("#imageb").attr("src"));
            $("#imagea").show();
            $("#imageb").hide();
            $("#imageb").attr("src",newsrc);
            $("#imageb").fadeIn(1000);
            $("#imagea").fadeOut(1000);
       }, index*speed);
   });
}

head>
<body>
<div id="slideshow">
<img src="1.JPG" class="slideshow">
<img src="2.JPG" class="slideshow">
<img src="3.JPG" class="slideshow">
<img src="4.JPG" class="slideshow">
<img src="5.JPG" class="slideshow">
<img src="6.JPG" class="slideshow">
<img src="7.JPG" class="slideshow">
<img src="8.JPG" class="slideshow">
<img src="9.JPG" class="slideshow">
<img src="10.JPG" class="slideshow">
<img src="11.JPG" class="slideshow">
<img src="12.JPG" class="slideshow">
<img src="13.JPG" class="slideshow">
<div id="overText"><img src="caption.png">div>
div>
body>
html>

So basically, copy and paste everything in the head portion. You can set the speed to what ever you would like.
In the body, create a div with the id of “slideshow”, then add your images inside the div. Add the class “slideshow” to all the pictures you add. You may want to keep them the same size as jQuery does not resize them for you.
Inside the “slideshow” div, add a div with the id “overText”. The text, or image will be displayed at the bottom right corner of the slideshow on top of them all. Format the text or image however you would like.
Final notes:
You can add as many pictures as you want, but 100 pictures might take a while to load.
It only loops once, and doesn’t loop through them again.
You can leave the “overText” div empty and no caption will be displayed on the slideshow.
You can change the speed of the slideshow by increasing or decreasing the speed.

Have fun.

Making a “frilly” border

pyr0t3chnician — Wed, 17 Feb 2010 15:59:28 +0000

Frilly border example - click to view

This is what we are working on today. There are several ways to do this, some are easier than other. The easiest way (which we will not be doing) is to make an entire header image with a border that looks like this. The only problem I have found is that you have to match up the edges of the blog perfectly if you want to make the border work. Also, you would need a decent graphics program to do anything that is decent looking (paint won’t cut it). Since a lot of people don’t have the $400 Adobe Photoshop CS4, we have come up with a different hack to get it to display.

First off, we need the image of a single border. I have gone ahead and created it and uploaded it here: http://www.notan00b.com/border.png

Second, we need to edit some serious HTML:

Copy and paste this above “#outer-wrapper{” :

#topborder{
background-image:url(‘http://www.notan00b.com/border.png’);
background-repeat:repeat-x;
background-position:bottom left;
width: 960px;
height: 20px;
}
#contentALL{
background: #fff;
padding:10px;
padding-top:30px;
}

Change #outer-wrapper to look like this:
#outer-wrapper {
width: 960px;
margin:60px auto;
text-align:left;
font: normal normal 90% Georgia, Times, serif;
}

Go to the bottom, and under “

”:

At the bottom edit this “

”:

That’s it! Save it and you will have your border. This is a specific case where the blog content was originally 950px wide. I changed it to 960px to get the full frill instead of half of one (border.png is 20px wide). Let me know if it doesn’t work or if you are experiencing problems.

What is a BLIND SQL Injection?

pyr0t3chnician — Wed, 27 Jan 2010 07:34:20 +0000

Its been awhile, and I have been pretty busy. I decided to talk a little bit about a few things I have learned and been working on. When it comes to website security, most programmers understand what SQL injections are. The user types something into a form that manipulates the SQL statement to give them access to certain areas or display the info they want. Then there are Blind Sql Injections (BSI). These are much more complicated and considered an advanced penetration technique. The funny thing is, they are 100% preventable.

So lets start out with the basics, what is it? It all has to do with the URL bar and get variables. Let’s say that my site is “http://www.mysite.com/” and I created a script that grabs info out of my database based on it’s ID in the database. For example: “http://www.mysite.com/index.php?pageid=10″. My SQL statement will look like this: “SELECT * FROM pages WHERE ID=$_GET[id]“. Just like a regular SQL Injection, a hacker can submit malicious code using the get variable.

This is where we differ a little from a basic SQL Injection. In a basic SQL Injection, you simply type ' or 'x'='x into a form and it may or may not authenticate you. Your goal is to get it to toss an error, so that you know your code is not being parsed correctly.

Because we are retrieving info about a page with my example website script, not users, it makes it difficult to authenticate yourself with one line of code like a basic SQL Injection. There is one thing we can do, and that is to make the SELECT statement true or false. If my site is vulnerable, all we would need to type in the browser is: “http://www.mysite.com/index.php?pageid=10 and 1=1″. If it isn’t parsed correctly, my vulnerable code will now look like this: SELECT * FROM pages WHERE ID=10 and 1=1. That is a true statement so our page will display normally. Now we try a false statement: “http://www.mysite.com/index.php?pageid=10 and 1=2″ and our SQL query reads as: SELECT * FROM pages WHERE ID=10 and 1=2. This statement is false, so it will not grab ANY info from pages. With no info being grabbed from the database, our page will look significantly different. Maybe some pictures won’t be there, or text will be missing, or maybe the entire page will be blank. If that is the case, then you are in business.

So why is it called BLIND Sql Injection? Well rather than executing queries directly, like a regular SQL injection, and getting your info directly, you are now blind instead. You are using true/false statements to guess what the table names are, or manually hash them out using ascii codes and substrings. It can take hours to get access to a vulnerable site, but there are programs and scripts out there that will do all the work for you so you don’t even have to think about it.

If you want to know a little bit more about how this works, lets try it out on a vulnerable example: http://www.cblpi.org

Lets say I went to Ann Coulter’s bio page: http://www.cblpi.org/programs/bio.cfm?ID=15&type=Speaker

We notice that ID=15 and may be vulnerable. So we test it by typing: http://www.cblpi.org/programs/bio.cfm?ID=15 and 1=1&type=Speaker

Nothing changes! Let’s test it again by typing 1=2: http://www.cblpi.org/programs/bio.cfm?ID=15 and 1=2&type=Speaker

Now a blank page appears, so we know that the ID variable isn’t being parsed correctly.

Lets figure out what version of MySQL it is using BSI using @@version: http://www.cblpi.org/programs/bio.cfm?ID=15 and substring(@@version,1,1)=5&type=Speaker

If its version 5.xxxx it will show up as true! Does it? No. Then lets try 4: http://www.cblpi.org/programs/bio.cfm?ID=15 and substring(@@version,1,1)=4&type=Speaker

And know we know they are using version 4.xxxx of MySQL.

Lets try guessing a table name! http://www.cblpi.org/programs/bio.cfm?ID=15 and (select 1 from USERS limit 0,1)=1&type=Speaker

If table USERS exists, it will return 1 and the statement will be TRUE! Does it? No it doesn’t, but it does give us a nice error page saying it doesn’t exist, with the table name that we are currently selecting out of (PEOPLE).

So lets validate the code real quick. We know PEOPLE does exist, so http://www.cblpi.org/programs/bio.cfm?ID=15 and (select 1 from PEOPLE limit 0,1)=1&type=Speaker should be true.

And it is! The page displays normally.

You can bruteforce guess the table names, or there are many round about ways of detecting them letter by letter using substring and ascii functions. And once you figure out where the good information is stored, then you can break into those tables and grab it.

I’m not here to give you the exact methods on how to bruteforce it or use char codes, but just to give you the basics on what it is. Know that you know what it is, protect against it! How hard is it to check for a space? Add slashes? Check if it is an int? Guys common, these practices are standard when dealing with forms, why not make them standard when dealing with get variables. Recently (about 4-6 months ago) HyperVM was found to have a BSI vulnerability and within a couple of days, thousands and thousands of VPS servers were hacked and accounts deleted. It all could have been prevented with just one line of code.

PHP to create website thumbnails

pyr0t3chnician — Sat, 26 Sep 2009 00:46:20 +0000

Bing.com has an awesome feature that is popping up more and more all over the internet. Most websites charge for this, as they should. It isn’t something that can be done on a normal hosting plan, but can only be done (this way) on a Windows server, where Internet Explorer is installed and you have access to. There are several ways to do this on Linux servers, but I am going to cover the Windows version.

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:


$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.

On Vista, click the start button, and in the search box type “Services”.
At the very top, there should be a link under Programs called Services. Click that link.
It will open up all running services, and you will see Apache running (mine is Apache 2.2, and is the first entry).
Right click on it and select “Properties”
Navigate to the “Log On” tab
Click the box for “Allow service to interact with the desktop”
Save it and close the properties
Right click on Apache again
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:


$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.

jQuery, PHP, and Forms

pyr0t3chnician — Sat, 05 Sep 2009 01:56:57 +0000

I decided to put up a quick post on how I have been using jQuery and PHP to process forms for me very easily. To get started, let me give you a background on what I have been trying to do. I have a page with a list of info, and I wanted to give the user the option of editing that info using jQuery’s built in dialog box because it is awesome looking. There were a few ways to go about doing this, which is what I am going to describe.

This is the goal!

I click the link

A dialog box pops up

The text boxes have info filled in already

Something like this:
Name:

I can edit it, then submit it

I want the code to be small

The first way that I thought of was to create a form for every piece of info I pulled from the database. So lets say for ID=1, there would be 1 form with all the info preloaded into it. ID=2 would be a separate form with all different info. This works, but I had to have about 20 dialog boxes per page, and it would cause the HTML output to be about 20 times larger than I needed.

In my head, I knew there had to be a way to do this with DHTML and jQuery, and I finally figured it out. All I had to do was create a value and store it in the button that I was already using (well it was actually just a link). So I turned Edit! into Edit!. I used PHP to echo out the data already but now each link will have a different ID:

echo "\"#\" class\"editThis\" id=\"$row[UserId]\">Edit!";

So now we have 20 links, each looking the same, but each with a unique ID. This is where jQuery comes in handy. We can look up the anchor by class, and then store the ID as a variable for later use!

$(".editThis").click(function{
   var id=$(this).attr('id');
});

So now we have the ID of the info we want to manipulate. The next part was a little more difficult to figure out. I want only 1 dialog box and 1 form, but want the info auto filled. At first I was thinking we needed to do a lot of AJAX to pull out each and every variable that we want to edit, but then I figured out we could pass that info into HTML as a “HIDDEN” variable. HTML is great because you can hide all sorts of stuff and the user will never see it. I can set the style as “hidden”, or I can include it inside a tag somewhere, or better yet, and my favorite, I can create a hidden variable: Now we need to implement this into our PHP to write it to the HTML:

echo "\"#\" class\"editThis\" id=\"$row[UserId]\">Edit!";
echo "\"hidden\"";
echo " name=\"editinfo{$row['UserId']}\""; 
echo " id=\"editinfo{$row['UserId']}\""; 
echo " value=\"$row[Name]::$row[Address]::$row[Age]\">";

So now our HTML will look like this:

All our info is now conveniently stored for jQuery to access later!

$(".editThis").click(function{
   var id=$(this).attr('id');
   var variables=$("#editinfo"+id).val();
   var info=variables.split('::');
   alert(info[0]+"\n"+info[1]+"\n"+info[2]);
});

Now for the fun part, using jQuery to dynamically change the values of our SINGLE form!
Our form might look like this:

And our jQuery would look like this:

$(".editThis").click(function{
   var id=$(this).attr('id');
   var variables=$("#editinfo"+id).val();
   var info=variables.split('::');
   $("#eusername").val(info[0]);
   $("#eaddress").val(info[1]);
   $("#eage").val(info[2]);
   $("euid").val(id);
   $("#dialog").dialog("open");
});
$('#dialog').dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        position: 'top',
        buttons: {
            "Update user": function() {
                document.edituserform.submit();
            }, 
            "Cancel": function() { 
                $(this).dialog("close"); 
            } 
        }
    });

That’s it! Hopefully it was easy to understand. Let me know if you need anything cleared up a little! Thanks!

More with PHP Classes

pyr0t3chnician — Sat, 08 Aug 2009 20:13:19 +0000

I got a comment on my PHP OOP tutorial to explain how to relate what I taught to real life scenarios. His scenario was Human Resources Information. The first thing we will need to decide is what info is important, so lets list a few items:

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:


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:


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 PDO and SQL injections

pyr0t3chnician — Sat, 08 Aug 2009 18:22:42 +0000

MySQL and MsSQL are huge when it comes to internet sites. They are probably the easiest databases to set up and the most universal when it comes to internet apps. The only problem is that programmers are sometimes lazy and forget to think about things like security when it comes to programming the forms and site. When people are lazy, they leave their sites open to SQL injections. I don’t really want to make this an SQL injection tutorial, but just want to touch on it briefly. Lets start with a standard SQL statement that a form uses to find an Administrator password:
mysql> SELECT * FROM Users WHERE Name='Admin' AND Pass='MyP4ssw0rd';
Now if we add a login form and use php, we might have code structured similar to this:


$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:

Name:
Pass:

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:


$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.

Wordpress page views hack

pyr0t3chnician — Tue, 28 Jul 2009 19:54:22 +0000

I created this pretty quick, and it is by far, not the prettiest thing out there. This uses an extra table in the MySQL table to keep track of pages that get viewed and how many times they are viewed. Here is what I did:

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:

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:

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"Views: ".get_content_views()."";
}

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

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"Views: ".get_content_views()."";
}
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!

Nifty PHP/AJAX tricks

pyr0t3chnician — Sun, 26 Jul 2009 21:03:52 +0000

These are a couple awesome AJAX/PHP tricks I learned to make coding just slightly easier on myself.

Exit

Lets say we had an index page, and when the user click a button, it would display the time. Typically, in the past I would have it go to another “remote procedure call” (RPC) page, like “time.php” where the main portion of the script would be “echo time();”. This tends to clutter my folders with miscellaneous scripts if I have multiple AJAX events. I may have a different RPC for every page, which could mean I have like 50 php files in one folder and I’m not sure which ones are the RPC and which ones are the main files.

I then started condensing them, making one large script for a few files, and using a $_POST['action'] to decide what to do. So if I had an ajax.php page it might look something like this:


if($_POST['action']=='time'){
   echo time();
}else if($_POST['action']=='hello'){
   echo "hello!";
}?>

So now it will execute the portion of the script that it is told. So if I point my AJAX to ajax.php and pass a post variable called “action=time”, it will return the time. We have now condensed it slightly.

We can condense it even further by using the php function “exit();”. This function completely stops (exits) the script. If my script looked like this:


echo "hello ";
exit();
echo "world!";
?>

The output would look like this: hello
Exit will abort the script and not run anything after it.

Exit also has the capability to display (echo) a message as to why it is quitting, so you could essentially use exit() and let people know they aren’t logged in if you wanted. Here is an example:


session_start();
$notlogged="\"login.php\">Please log in to view this page";
if(!$_SESSION['loggedin'])
   exit($notlogged);
/* Main Content Starts Here */
?>

So if we had never logged into the site, all we would see is “Please log in to view this page” as a link that we could click.

Lets put this all together. The exit function allows you to point the ajax script to the current page, as it will “exit” and echo the data you want without running the main content of the page over again. Let me show you what I mean, using jQuery ajax, with a time.php.


//time.php
if($_GET['do'] && $_GET['do']=='time')
   exit(date('g:i A'));
if($_GET['do'] && $_GET['do']=='hello')
   exit("Hello World!");
?>




AJAX Example

Pretty simple stuff right? You can reduce the number of extra files by simply putting the AJAX commands at the top of the file. If you put “echo(time());”, it would continue to run the entire page and mess up your AJAX. This has made my life easier and my code a little more succinct.

Arrays

Because AJAX only accepts strings to be echo, and returned to the AJAX function, so a lot of people struggle with returning an array to Javascript through AJAX. There are 2 ways to do this that don’t require JSON.

The first is simply to break the array up and make it into a string using the “implode” function:


$array[1]="hello";
$array[2]="world";
$array[3]="!";
$newarray=implode("::",$array);
echo $newarray;
?>

On the Javascript end, just split it up into an array again!

var myArray=data.split('::');

That is by far the easiest way to return arrays.

There is one problem. What if in PHP, your arrays didn’t have numerical keys, but strings: $array['name']='bob'. This is where we run into a problem. There is a way around this fairly easy. Most languages have an “evaluate” command, which will take a string, and execute it as though it were code. In PHP and Javascript, it is eval(). Here is a PHP example: eval("echo 'Hello World!';");. This would output “Hello World!”. In Javascript, it is exactly the same thing. So lets use eval() to return a Javascript array!


$array['name']='bob';
$array['age']='96';
$array['sex']='male';
$return='var myArray={"name":"'.$array['name'].'", "age":"'.$array['age'].'", "sex":"'.$array['sex'].'"};
echo $return;
?>

And on the Javascript side, all you need to do is evaluate the string:

function handler(data){
   eval(data);
   alert(myArray['name']);
}

Its a bit lengthy to do it this way, but will definitely get the job done. One thing to watch out for would be quotes, plus signs, slashes, especially if the user gets to define some of the stuff that is being returned.

I hope this has helped out a little with using PHP and AJAX. I spent hours trying to figure this stuff out the first time, but when I did, it made my life a lot simpler.

jQuery – Lesson 2

pyr0t3chnician — Sat, 18 Jul 2009 00:05:25 +0000

I have been working pretty intensely with jQuery and have learned a lot. It is a difficult language to work with because it is picky. But once you understand it, it is actually quite simple to manipulate.

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:

$('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.

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

This code goes through each

in my code, and with each

it finds, it executes a function, which is the remainder of the code.

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

So when it finds a

, it checks to see if the

that was found “is” (or has the property of) ‘#rows’. The # in the front means the

id. If there is a “.” in front, it means the

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

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.


   
   1 (Clients ID)
   Bob (Clients Name)
   123 Fast Lane (Clients Address)
   12345 (Clients Zip)
   (123)555-1212 (Clients Phone)

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.