Web Development - php, mysql, ajax, jquery, SEO

Unit Testing - Installing PHPUnit

2012-10-31T09:14:00.001-07:00

The primary goal of unit testing is to take the smallest piece of testable software in the application, isolate it from the remainder of the code, and determine whether it behaves exactly as you expect. Each unit is tested separately before integrating them into modules to test the interfaces between modules. Unit testing has proven its value in that a large percentage of defects are identified during its use.

PHPUnit is a unit testing software framework for PHP, as you may guess.

At first I thought installation was something straight forward, but it was not. I had to install PEAR first, and problems appeared from the beginning.I don't want to discourage you, instead I am telling you this just to encourage you not to give up.

During the installation process, I was wondering, what I was doing wrong, so I kept googling and here I will present you the steps needed to install PEAR and PHPUnit error free on WAMP, according to the problems I have faced and the research I have done.

1) Install PEAR

1st step

First open php.ini file located at C:\wamp\bin\php\php5.3.0\php.ini
Find the following line ;phar.require_hash = On
Uncomment by removing the semi-colon
Change 'On' to 'Off'
Save the file

2nd step

Locate your php folder by writing cd C:\wamp\bin\php\php5.3.0 *** For those who don't know this, by typing cd .. in a command line, you are being moved one level up in the folder structure
On command prompt type go-pear.bat
Confirm "system" and hit enter a few times
double click PEAR_ENV.reg found at your php folder
edit php.ini again to add pear include path. Search for go-pear and you will see

;***** Added by go-pear include_path=".;C:\wamp\bin\php\php5.3.0\pear" ;*****

Copy these lines and paste them to "php.ini" file located at C:\wamp\bin\apache\apache2.2.11\bin
Restart the apache
Type pear upgrade pear and you have PEAR installed on you machine

3rd step

We are almost done here with PEAR installation. In order to use ‘pear’ command in your command prompt from anywhere, you will need to modify the windows environment variables.

Right click on "My computer" choose Properties -> Advanced > Environmental variables
Edit "Path" variable and add C:\wamp\bin\php\php5.3.0

***Be careful here, by mistake I have left a space character at the end, and coudn't find out for half an hour, what was I was doing wrong

You also need to add a new variable ‘PHP_PEAR_PHP_BIN’ and set the value to
```
C:\wamp\bin\php\php5.3.0\php.exe  
```

Close the command prompt, open it again and type pear
You will see pear command help printed for you

2) Upgrade PEAR

In order to continue to the PHPUnit installation, you first have to upgrade PEAR

Just type pear upgrade pear
Type pear -V, to see the version installed

3) Install PHPUnit

Now we can continue with the PHPUnit installation

On ‘C’ drive create a folder named ‘php5’ (I don't know why and I don't know if this is necessasy, but I did it anyway
On command prompt type following, but first be sure that you have upgraded PEAR

pear channel-discover components.ez.no
pear channel-discover pear.phpunit.de
pear channel-discover pear.symfony-project.com
pear install --alldeps phpunit/PHPUnit

We’re done! type phpunit –version to confirm installation.

4) Solutions to problems you may face

If you face a problem here, you can type

```
pear update-channels 
```

You can also clear cache by typing

```
pear clear-cache  
```
```
  
```

If you want to unistall PEAR and do the above steps again type

```
pear uninstall pear
```

If you want to unistall PHPUnit type

```
pear uninstall phpunit/PHPUnit
```
```
  
```

If you have a problem like this

Duplicate package channel://components.ez.no/ConsoleTools-1.5.1 found
Duplicate package channel://components.ez.no/ConsoleTools-1.5.2 found

or a duplicate package to another channel like

Duplicate channel://pear.phpunit.de/Whatever1.1

Duplicate channel://pear.phpunit.de/Whatever1.2

you can type

pear uninstall pear.phpunit.de/Whatever1.2
pear install pear.phpunit.de/Whatever1.1

That last thing is what made the trick for me! I don't remember exactly which version I have installed and which I have uninstalled for the duplicate packages, but the point is that I read error message and figured out what I have to install or uninstall manually!

Useful links

http://docs.moodle.org/dev/PHPUnit_installation_in_Windows
http://amiworks.co.in/talk/installing-pear-and-phpunit-on-wamp-and-windows-7/
http://www.karakas-online.de/forum/viewtopic.php?t=10459

http://stackoverflow.com/questions/2006626/installing-phpunit-via-pear

http://share.ez.no/forums/install-configuration/noob-having-trouble-installing-pear-and-ezcomponents

Fatal error: Call to undefined function pg_connect()

2012-10-23T03:03:00.001-07:00

Problem is that when you´re using a PHP version above 5.2.5 in windows, you just can´t load the pgsql extension.

You have to install php 5.2.5 or an older version, or just install a newer one and overwrite php_pgsql.dll with the one from PHP 5.2.5.

Localhost redirects to online wordpress site and vice versa - Multisite

2012-10-07T08:39:00.000-07:00

If you have installed multisite for wordpress and your localhost installation redirects you to your online version, then you have to check following tables using phpMyadmin:

wp_options

siteurl
home

wp_2_options

siteurl
home

wp_site -> change domain to localhost and path to your path

Animate to a specific div using jquery

2012-09-04T07:33:00.000-07:00

I am really impressed about sites tha have a fixed menu and when user clicks on it, whole page animates to a specific div.

Have a look at this wonderful site, to see what I mean (click onto the image)

Really impressive, ha! Are you still here? Well for those you came back to learn this technique, it's time to realize how simple it is.

We just use jquery's animate method, and all magic happens to the site. Really cool! But to be more specific, you can read the following function:

Let me just explain it a little bit.

This function takes the id of the targeting div as parameter (we will explain how we call it later).

First of all we define the animation speed and the easing type. So, you have to dowload Jquey Easing Plugin first.

After defining the variables, we just check if it's a webkit browser (Google Chrome), because webkit browsers do not support animate-html.

We then call the animate method (be careful!! before calling animate(), we call stop() ), and that's all.

The HTML
Just put an anchor tag on your page and on click, call the Animate2id('#news') function, which animates to a div with id=news.

How to center a div inside a div

2012-08-30T16:26:00.001-07:00

If you want to center a div inside another width and the content of the inner div is dynamic (so you don't know the exact width), you can do something like this:

Put an image on the Canvas

2012-08-29T06:26:00.001-07:00

To draw an image on a canvas, we use the drawImage(image,x,y) method

HTML5 Canvas for beginners

2012-08-29T05:42:00.003-07:00

The canvas element is used to draw graphics, on the fly, on a web page. It is only a container for graphics. We must use a script to actually draw the graphics.

***Internet Explorer 8 and earlier versions do not support the canvas element.

How can we create the canvas element

In order to create a canvas element, use the following markup:

As you can see above, I used an id attribute in order to referrence it later using javascript.If you want to style your canvas you can use the style attribute.

How can we draw onto the canvas using javascript

As I mentioned earlier, after we create the canvas, we use javascript in order to draw something onto it. For example if we want to draw a red rectangle we use following markup, inside a script javascript tag.

I will briefly explain the code. First we find the canvas element with the id attribute, and then we call its getContext() method, passing the string "2d" as an arguement.

***The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more.

At last we set the red color and draw the rectangle.

Read more examples

*** For more examples visit http://www.w3schools.com/html5/html5_canvas.asp

HTML5 new features

2012-08-29T05:03:00.000-07:00

My first question, when started learning HTML5, was "What are the new features of this new version of HTML"? What new things can I do with HTML5, or how easier can I do some things I used to, while using HTML?

So, in this quick post, we will see the new interresting features in HTML5.

The canvas element for 2D drawing
New content-specific elements, like article, section, header, footer
The video and audio elements for media playback
Support for local storage
New form controls, like calendar, date, time, email, url, search

In the following posts, I will explain each feature seperately in more detail.

Print a div with javascript which opens in a new window using Javascript

2012-08-23T08:10:00.000-07:00

Today I had to put a print button into a web application, which when clicked, should open a new window and print the contents of a certain div.

I found this very useful link http://sarwarhossain.com/2010/10/05/print-a-div-open-new-window-print-and-close-using-javascirpt/. I used the code and everything worked great in Firefox, but I noticed that it doesn’t work well with Chrome, launches straight to blank Print screen and doesn’t load content in new window first. Same in Safary (I didn't try IE, I was sure that it wouldn't work as well).

Here is the code I found from the above link and right after I will post 2 solutions for this problem.

Javascript Function

HTML

1st solution

The first thing I thought was to remove following lines
in order to let Chrome and Safari open the new window with print button in the contents, but this relies on user to manually push print. I found this thought in the comments area too.

Everything worked great, but I wanted to open the new window and after that automatically invoke the print dialog window. So I did the following.

2nd solution

I just put onLoad=”self.print()” inside body element and everything worked like a charm:-) See the new code of the printContent function below. Hope it helps!

2012-05-26T05:27:00.000-07:00

To make your javascript code beautiful, just use jsbeautifier.

Paste your compressed, unreadable code into the text-editor, and simply push "Beautify Javascript or Html" on the top.

Jquery split & join example

2012-02-17T15:24:00.004-08:00

Here I will show you how you can use jquery in order to wrap every 2nd word of a paragraph in a span.

So, if you have for example the following paragraph into your html:

and your stylesheet is:

by putting this:

your final result will be:

This is a test paragraph.

First you use split method, to split your sentence into single words. Then you store into a variable called numWords the size of the array. In a for loop, you check if your number is even and if that's the case, you wrap the specific element in a span. After this iteration, you use join, in order to show whole sentence.

Fireworks Favicon

2012-02-08T00:59:00.000-08:00

If you are using Adobe Fireworks CS4 and want to create a favicon for your site, just follow the steps below.

Go to http://johndunning.com/fireworks/about/ExportAsFavicon and download the favicon extension
Open Fireworks -> click Help -> Manage Extensions
Choose Fireworks from the left side and then the install button on top
Locate the extension you downloaded before and you are ready.

How can we use it

Go to Commands -> Favicon -> New Favicon - 16x16 to create your favicon
Choose Commands->Favicon -> Export as Favicon to export it

Responsive Web design

2012-02-07T16:33:00.000-08:00

Take a look at the following link and watch a very good video (25 minutes) about Responsive Web Design!
http://css-tricks.com/video-screencasts/102-braindump-on-responsive-web-design/

jsfiddle.net

In the above picture you can see jsfiddle.net, an online editor for the web, which allows you to see how your code runs in action. Really very helpful!

Jquery fadeToggle

2012-02-07T14:30:00.000-08:00

In this example, I will show you how we can use jquery fadeToggle function to achieve the behaviour described below!

What we have here, is some menu blocks, which show a lager block with more details, when we click on them. You can see a demo here. Only first block works, as it is under construction.

Before we click the first menu block

After we click the first menu block

Html markup

As you can see below, we have a div with class "box", and inside this div we have 2 main elements:

an anchor tag, with a background-image as you can see in the css style later
div with class "box_details" , which has an absolute position.

Css styles

Below you can see the css styles for our example. Just to say, that box_details has an absolute position. (accordingly, div with id "box1", has relative position) and display:none, which will change to block, when div with class box is clicked.

Javascript

Finally, we use javascript and fadeToggle function. I think it's pretty easy and self-explanatory. Wheneverer we click the box div, we find next box_details div, and make it fade in. When we click on the appeared div, it fades out. This is achieved with the use of fadeToggle.

Media Queries and Internet Explorer

2012-02-07T05:27:00.000-08:00

Media queries, which are part of the CSS3 draft spec, don’t work in Internet Explorer 6, 7 or 8. Hardly surprising, but certainly annoying. So, we need a JavaScript solution.

Css3-mediaqueries.js is a JavaScript library , which makes CSS3 Media Queries work in all browsers. I dowloaded the plugin, but I had no success.

Fortunately I found the following article, http://richardshepherd.com/css-media-queries-jquery/ and downloaded the plugin from there!

Now everything works great, even using Internet Explorer! I will post an example of implementing media queries, when I have some free time:-)

PhotoFluid - fluid layouts and adaptive CSS using Media Queries

2012-02-07T04:10:00.000-08:00

ProtoFluid simplifies the development of fluid layouts and adaptive CSS using Media Queries. It works within your website, HTML5 app or game in the form of a single JavaScript include. ( http://protofluid.com/).

All you have to do, is include jquery and photofluid in your head, BEFORE any other javascript.

ProtoFluid does not automatically launch. Type #protoFluid after your web address and refresh the page!

Site Inspiration using Media Queries

2012-02-07T01:11:00.000-08:00

http://foodsense.is/

http://foodsense.js in a smaller device

http://www.bostonglobe.com/

http://www.bostonglobe.com in a smaller device

http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign

http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign in a smaller devive

You can also checkout http://mediaqueri.es/popular/. The site contains a curated collection of responsive web designs!

So, have a look and get inspired!

Browser detection using Jquery

2012-02-06T01:40:00.000-08:00

The $.browser property provides information about the web browser that is accessing the page, as reported by the browser itself. It contains flags for each of the four most prevalent browser classes (Internet Explorer, Mozilla, Webkit, and Opera) as well as version information. (http://api.jquery.com/jQuery.browser/).

Available flags are:

webkit (as of jQuery 1.4)
safari (deprecated)
opera
msie
mozilla

Well, in my case, when I tested my code to all browsers, there was no problem, except from Internet Explorer:-(

I had a div (class=box_details) with height 306px, which should be higher in IE. So, I wrote the following code and the problem was solved:-)

Click & Hover Effect with Jquery

2012-02-02T17:18:00.000-08:00

Suppose you have a menu at your site, and you don't want to reload the whole page to see the content of a certain div. Instead, you want to load it using jquery and ajax!

What I will show you here is, how we can achieve the hover effect, without affecting the clicked element. Don't you understand what I mean?

Go to http://www.snap2design.com, and have a look at the menu. When you mouseover a menu item, you see that its background-color becomes black and when you mouseout, it becomes grey again, except of course from the clicked menu, which remains black!

How can we achieve this? The answer is by using Jquery! A fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Here we will use the click and hover function of this wonderful library.

Click Function

Seems all this strange to you? Well, let me explain you a little bit what I am doing here.

Firstly, when we click the h3 element of a navigation_item,

we remove "selected" class and
change background color of each item to #424242

***Just to say that selected class is defined in a seperate css file

Finally we add "selected" class to the clicked item.

***I want to clarify that I refer to the situation of a menu which loads content via AJAX, and not by reloading whole page. The link with the example I gave you above, has a menu with submenus. I explain the case of the first level menu. The same technique is used for the second level as well. You can see the html markup below:

So til now, when we click a navigation item, its background-color becomes black(selected class). The other ones have a grey background-color (#424242).

Hover Effect

Well, let's explain the hover effect now! When we mouseover a menu item, we make its backround-color black. That's easy!
When we mouseout, we have to make a check. The menu item that has "selected" class, keeps its black background-color, otherwise it becomes grey (#424242).

What would happen, if we didn't make the check? Every menu item would become grey and we wouldn't know, which one was the selected one.

Conclusion

Well, in the above example I wanted to show you the technique I use, in order to check which menu item is the selected one when we use AJAX, and keep its "selected" class, when we mouseover that!

I am glad to hear, what you do in a similar situation!

Adding an App to a Facebook Page

2012-02-01T04:20:00.001-08:00

If you want to add an app to your Facebook page and for some reason you can't find View App Profile Page at the left part of the page when you registered it at http://www.facebook.com/developers, you can do it by typing in the addess bar the following:

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

where YOUR_APP_ID and YOUR_URL can be found in your app settings.

Implementing Facebook Share in 2 different ways

2012-01-25T03:22:00.000-08:00

Well, how often do we see in every website the commonly used "Share" button?

Don't you know how to integrate it into your website? Don't worry, I suggest you 2 ways, you can choose the one that suits you most!

Facebook Share button - No1

You can render the Facebook Share button in an anchor (a) tag that takes the following 3 attributes:

name: You must specify fb_share for this attribute.
type: The type of Share button or link to render, with or without a count included
share_url: The URL for the page you want to share

You can do this by firstly including following lines in the head section of your code:

and then by using the anchor tag with the appropriate attributes, exactly where you want it to appear on your page.

From the above attributes, only first one- name - is mandatory, the other ones are optional.

The "type" attribute can have one of the following values:

box_count
button_count
button
icon_link or
icon

If none of them is specified, then the button defaults to the "button count" type. Experiment with them, and see which you like most!

Finally, regarding the anchor tag, if you don't specify a share_url, then this attribute defaults to the current page.

Facebook Share button - No2

Are you working with graphic designers, that want every button in your page to be customized according to the general design of your website?

Well in this situation, you can include your own button this way:

Let me explain a little bit. As you can see, you have an anchor tag, which, on click, calls a javascript function "fbs_click". Inside img tag, you locate your own image!

In your head section or just above the anchor tag, you define "fbs_click" function the way I did. The function, takes the url of your current page.

The url that is passed to the Facebook servers looks up certain HTML tags within it. If you don't tag your page, Facebook Share will grab the title of your page as specified in the title tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.

In order to control the exact title, description, and thumbnail that Facebook Share uses, add the following meta tags to the head element in your page:

Conclusion
If you want to do this the simple way, use the first solution! If you want to put your own button, just use the second way!

There is also a third way to include a share button in your website. You have to include the Facebook JS SDK and invoke stream.publish or stream.share from the FB.ui() method. But I will explain it in more detail, in another post!

***You can read more about "Share button" at the official Facebook site.

Import large sql dump into Wamp

2012-01-22T12:16:00.000-08:00

Do you want to import a huge sql file locally at Wamp?

Edit php.ini file and change(increase) the values of following variables

upload_max_filesize
post_max_size

Ckeditor & Greek entities

2012-01-05T07:13:00.000-08:00

If you type a greek word in ckeditor and in source view you take some weird characters, then put this code in the config.js file and problem is gone:

Transparent PNG in Fireworks

2011-12-28T03:48:00.000-08:00

Having problem with png transparency in Fireworks? Solution is to save it in 32 Bit mode and not in 24 Bit mode!

In more detail

Choose Window -> Optimize
Select PNG32 and Matte->Transparent button
File -> Export

How to backup your information from Facebook

2011-11-10T12:11:00.000-08:00

Are you afraid of loosing your photos, videos and posts you share on Facebook? You can simply backup all this information by following the steps below:

Click the account menu at the top right of any Facebook page
Choose Account Settings
Click on "Download a copy" of your Facebook data
Click the Download button on the following page