Expressing my Skill for Money (Finally)

December 8, 2009 in Life with Leave a Comment
Tags:

Well I just found a site, a very interesting site. It’s a freelancing site that allows me to earn some money over the net. Basically employers put lots of projects on this site and say how much they will pay for you to complete the project and you (with others) bid for the chance to earn that money.

Hopefully (fingers crossed) this might be able to earn me some money as well as experience standing on my CV for a job. Kind of ironic really everyone where I live says they can’t get experienced IT professionals but how do you expect to get any when you have no training jobs??

Login User for a Facebook Application

December 8, 2009 in PHP with Leave a Comment
Tags: , ,

This tutorial will teach the user how to use the Facebook platform to control user logins to their Facebook application.
//some more content

Here is an example class of what I created for some other random app. As you can see I have created a class (acting much like a wrapper really) around the Facebook login method: facebook->require_login(). This particular app required the user to be registered on their own database after connecting through Facebook. The function _f_checkRegistered($fb_user) will check first time registration, this could act like a start screen for a new player to a Facebook game for example.

<?php
class Facebook_User{

	var $db = null;
	var $msg = '&nbsp;';
	var $date;
	var $ip = '';
	var $myKey = '';
	var $facebook = null;
	var $user_details = '&nbsp;';

	function Facebook_User(&$db, &$facebook){
		$this->db = $db;
		$this->facebook = $facebook;
		$this->date = $GLOBALS['date'];
		$this->ip = $_SERVER['REMOTE_ADDR'];
		$this->myKey = "54M_i1lM4N";

		$expires = $facebook->session_expires;
		$time = time();
		if($expires < $time){
			//$facebook->expire_session();
		}
		if($_SESSION['logged']){
		}else{
			if($_SESSION['F_LOG']){
				if($_SESSION['logged']){
					$this->_f_sessionDefaults();
				}
				$this->_f_checkSession();
			}
		}
	}

	function generatePassword() {
		$length=9;
		$strength=8;
		$vowels = 'aeuy';
		$consonants = 'bdghjmnpqrstvz';
		if ($strength & 1) {
			$consonants .= 'BDGHJLMNPQRSTVWXZ';
		}
		if ($strength & 2) {
			$vowels .= "AEUY";
		}
		if ($strength & 4) {
			$consonants .= '23456789';
		}
		if ($strength & 8) {
			$consonants .= '@#$%';
		}

		$password = '';
		$alt = time() % 2;
		for ($i = 0; $i < $length; $i++) {
			if ($alt == 1) {
				$password .= $consonants[(rand() % strlen($consonants))];
				$alt = 0;
			} else {
				$password .= $vowels[(rand() % strlen($vowels))];
				$alt = 1;
			}
		}
		return $password;
	}

	function linEncrypt($pass) {
		$iv_size = mcrypt_get_iv_size(MCRYPT_RIJNDAEL_256, MCRYPT_MODE_ECB);
		$iv = mcrypt_create_iv($iv_size, MCRYPT_RAND); //Creating the vector
		$cryptedpass = mcrypt_encrypt (MCRYPT_RIJNDAEL_256, $this->mykey, $pass, MCRYPT_MODE_ECB, $iv);
		return $cryptedpass;
	}

	function _f_sessionDefaults(){
		$_SESSION['uid'] = 0;
		$_SESSION['name'] = '';
		$_SESSION['FP_TEMP'] = '';
		$_SESSION['F_LOG'] = false;
	}

	function _f_checkSession(){

		$facebook_uid = $this->db->quote($_SESSION['uid']);
		$fullName = $this->db->quote($_SESSION['name']);

		$sql = "SELECT * FROM facebook_User WHERE UID = $facebook_uid AND Name = $fullName";

		$result = $this->db->getRow($sql);

		if(is_object($result)){
			if($_SESSION['FP_TEMP'] == md5($result->TMP_PW)){
				$this->_f_login();
			}else{
				$this->_f_sessionDefaults();
				return false;
			}
		}else{
			$this->_f_sessionDefaults();
			return false;
		}

	}

	function _f_login(){

		$fb_user = $this->facebook->require_login();
		$this->_f_checkRegistered($fb_user);
	}

	function _f_Logout(){
		$this->facebook->expire_session();
		$this->facebook->clear_cookie_state();
	}

	function _f_assignCred($facebook_uid, $fullName){

		$TMP_PW = $this->linEncrypt($this->generatePassword());
		$F_PWTMP = $this->db->quote($TMP_PW);

		$_SESSION['uid'] = $facebook_uid;
		$_SESSION['name'] = $fullName;
		$_SESSION['FP_TEMP'] = md5($TMP_PW);
		$_SESSION['F_LOG'] = true;

		$sql = "UPDATE facebook_User SET TEMP_PW = $F_PWTMP WHERE UID = $facebook_uid AND Name = $fullName";
		$this->db->query($sql);

	}

	function _f_checkRegistered($fb_user){

		$user_details = $this->facebook->api_client->users_getInfo($fb_user, array('name'));
		$facebook_uid = $this->db->quote($fb_user);
		$fullName = $this->db->quote($user_details[0]['name']);

		$sql = "SELECT * FROM facebook_User WHERE UID = $facebook_uid AND Name = $fullName";
		$result = $this->db->getRow($sql);

		if(is_object($result)){
			$this->_f_assignCred($facebook_uid, $fullName);
			return true;
		}else{
			return false;
		}
	}

	function _f_URegister($fb_user){
		//XXX @todo: make registration script
	}
}
?>

I should just mention this class is incomplete so don’t blame me if all of it does not work. But this is the basic structure I use for Facebook apps.

Facebook style bottom menu concept

December 4, 2009 in Concept with Leave a Comment
Tags: , , ,

I have a Facebook style bottom menu concept for my site. Even though the JS and PHP are not behind it yet you can already see how things will sit. This bar should be perfect for my layout.

Concept Footer

Concept Footer

Zune Quickplay Inspired JQuery Gallery with Tooltips

December 1, 2009 in CSS, Firefox, Internet Explorer, JQuery, MySQL, PHP with Leave a Comment
Tags: , , , , ,

Hello and welcome I have been off recently working on something new for my video site.

I thought I would produce some sort of tutorial on here so others can understand how to customize their JQuery galleries. I will be starting to talk you through the process of producing the end product in a couple of days but I thought I would post the initial screen shot now so you can all see what the end product will look like:

Zune Inspired JQuery Gallery

Zune Inspired JQuery Gallery

What we are looking at is the big gray strip across the middle of the page, ignore the header or footer. There are three parts to the gallery, “hot” (popular) videos, default spotlight videos and editors pick. The JQuery gallery will scroll between each part when one the links is clicked and the links will change accordingly (I could have done it all by normal AJAX but I wanted the scroll effect so meh).

The sections themselves are broken down into videos. There is one main highlight video which has information about it (length and rating) and four smaller image representing other videos. When the user hovers over one of the images and tooltip will show displaying the title of the video.

In this tutorial I will be using, HTML, CSS, JQuery (Scroll and AJAX), PHP and MySQL and I will be checking this product in IE7 (IE8 is emulated as IE7) and Firefox (just the two browsers I have at hand, no IE is not running under Wine, it’s in a VM :P ).

One last tip before I say bye for a couple of days whilst I get the finishing touches done, this tutorial is really only for professionals I would recommend the newer users stick to the JQuery gallery post I uploaded some time ago. This tutorial will be using the full Monty.

IE Button Fix – Fix those stupid button widths

November 29, 2009 in CSS, Internet Explorer with Leave a Comment
Tags: , ,

I know this hack is old and everything but I thought I’d repost this on here since I forgot how to do this today and it took ages for me to find out how to do this again. This hack basically stops buttons from expanding their widths in IE to stupid levels and is standards mode compliant.

/* IE6 */
* html input {
overflow: visible;
width: 1px;
}

/* IE7 */
*+html input {
overflow: visible;
}

CSS Overlaying

November 12, 2009 in CSS with Leave a Comment
Tags: , ,

I’ve been asked more than once now, “How do I overlay images with text using CSS?”. The answer is so much simpler than the question, it is really easy and in this tutorial I will show you how to do it.

Now to make things better I will be creating this:

Stage6 Video Thumb

Okay let’s look at the HTML behind this, then we can overlay the CSS on top of it:

//this is the actual thumb div
<div class="thumbOuter">
        //link containing the image
        <a href="viewVideo" class="thumbList" >
             <img src="videoThumb" alt="videoTile">
        </a>
        //backer transparent bar
        <div class="LowerBar"></div>
              //writing on top of the bar
              <div class="LowerBarTop" style="color:white; padding-top:3px; padding-left:3px;">Length of Video</div>
              <div class="LowerBarRate" style="float:right;" id="rateInfo">
                        //post the thumbs up here
               </div>
</div>

Now that we have the HTML it is time to look at the CSS behind it all:

ul.thumbListLayoutBox{
	display:block;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}

ul.thumbListLayoutBox li{
	float:left;
	height:156px;
	margin:10px 11px 11px;
	padding:5px 5px 5px 0px;
	position:relative;
	width:216px;
	z-index:1;
}

.thumbOuter{
	display:block;
	position:relative;
	text-align:left;
	width:218px;
}

a.thumbList{
	display:block;
	height:120px;
	overflow:hidden;
	padding:1px;
	position:relative;
	text-decoration:none;
	width:214px;
	border:2px solid #848486;
}

a.thumbList img{
	height:120px;
	width:214px;
	border:0;
}

div.LowerBar{
	background:black;
	width:100%;
	height:18px;
	top:102px;
	position:absolute;
	display:block;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: .5;

}

div.LowerBarTop{
	border-top:1px solid black;
	width:100%;
	height:18px;
	top:102px;
	position:absolute;
	display:block;

}

div.LowerBarRate{
	height:24px;
	right:4px;
	top:96px;
	position:absolute;
	display:block;

}

Now what I would like to draw your attention to is:

.thumbOuter{
	display:block;
	position:relative;
	text-align:left;
	width:218px;
}

div.LowerBar{
	background:black;
	width:100%;
	height:18px;
	top:102px;
	position:absolute;
	display:block;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: .5;

}

This code is the background for the lower bar shown in the picture. Notice how I use top to position the object whilst causing it to float over the video thumb by using position:relative on the bottom div and position:absolute on the top div. There, no need for z-index’s which will confuse IE. Enjoy :) .

AJAX Forms with JQuery

November 12, 2009 in JQuery with Leave a Comment
Tags: , , ,

As requested I have written this tutorial so that readers understand exactly how to produce AJAX forms with JQuery. Now, let’s dive into the weird and wonderful world of JQuery!

Now as always you need to import your JQuery with this in your head tag:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

Now we need to make our form so within the body tag we add our form:

<form name="thisform">

<input type="text" id="myfirstname">
<input type="text" id="mylastname">
<input type="submit" value=" Submit " id="submit_AJAX">
</form>

Now comes the difficult part:- making the JQuery function and binding it to the form. You will want to put this within your head tag as well:

 $(document).ready(function() {
    $("#submit_AJAX").click(function () {
          //get our values
          var first = $("#myfristname").val();
          var last = $("#mylastname").val();

	  var dataString = 'first='+ first + '&last=' + last;

          //shows you whats being sent
	  alert (dataString);
	  $.ajax({
	    type: "POST",
	    url: "somepage.php",
	    data: dataString,
	    success: function(callback) {
		    if(!callback) return;
                    //alerts the user of the echo in the php
                    alert(callback);
           }
        });
    });
}

And lastly we need to make a simple PHP (server-side) page to handle the AJAX request:

<?php
if(isset($_COOKIE['AJAXFORM']){
     $_COOKIE['AJAXFORM'] = $_POST['first']." ".$_POST['last'];
     echo "cookie updated";
}else{
     setcookie("AJAXFORM", $_POST['first']." ".$_POST['last']);
     echo "cookie made";
}
?>

And that should do it :) You will now have an AJAX form. I should explain in this example I have binded the function via the onclick on the submit button, however, to have many forms simply turn the AJAX function into its own separate function then on the form submit just make it point to that function:

<form name="thisform" onsubmit="AJAXFUNCTION()">

Enjoy :)

PHP File Upload without Refresh (AJAX emulator)

November 10, 2009 in PHP with Leave a Comment
Tags: , ,

I have created this tutorial as a mid-way between my Simple PHP Upload post and the Multiple Files with Progress Bar Upload post. This is designed to give all visitors of my site a chance to understand the more complex version.

Ok, we are building upon the material described within a previous post. The previous post is basically simple uploader and what I am going to explain here is how to up the coding so that the page does not need to refresh in order to upload the file.

All I did was rewrite the HTML to look more like:

<html>
<head>
<title>Upload Dat File!!</title>
</head>

<form action="upload.php" method="post" target="uploadFrame" enctype="multipart/form-data">

<input type="file" name="userfile" size="30"/>
<input type="submit" value=" Upload ">

</form>

<iframe name="uploadFrame" style="display:none;"></iframe>
</html>

So this HTML shows a new iframe named uploadFrame and the form target pointing to this iframe. The reason why this form will not need to refresh is because you are in fact making the form point to the iframe, meaning the upload will take place in the iframe now instead of on a new page; kool, huh?

So as the file uploads it sends all data to the iframe which then opens upload.php and runs the script we had before. That means that uploading without refresh is now covered, enjoy :)

Next Page »