Studge » Web Development

Open Addict Blocks Internet Explorer

Studge — Thu, 19 Jul 2007 01:08:46 +0000

Rich Morgan, of Open Addict, has recently made a move to block Microsoft’s Internet Explorer from rendering his site. This move is justified by the fact the Microsoft does not seem concerned with helping to adopt web standards which causes web developers to have to tweak their sites and implement various, dirty workarounds to look the way they are intended in IE.

I just updated the theme of this blog and, to no surprise, it does not render correctly in IE 6 or IE 7. It looks exactly the same in Firefox, Opera and Konqueror though. At Rich’s forum, he suggests that more people rally with him on this cause. I am not yet prepared to cut IE users out entirely, but it is definitely in my head now. If you are interested, he has also posted the short PHP code to stop IE from browsing:

You can place this snippet at the top of any page that you do not want to be seen in an IE browser. Replace domain.com with your own domain name and be sure to create ie_reject.html with a little message explaining what just happened. Rich’s message IE page can be seen here.

It would be absolutely amazing if this type of behavior became widespread, but I don’t have much faith in the movement. Unfortunately, there are larger revolutions on the horizon.

Drunk Driving in Austin Without Insurance While Looking for a Student Loan Consolidation Deal

Studge — Tue, 05 Jun 2007 19:52:52 +0000

Listed here is the top 20 highest paying Adwords keywords of 2006. This list paints a surprising portrait of Google's user base. Prices are in US Dollars.

$78.31 austin dwi
$73.67 school loan consolidation
$72.28 college loan consolidation
$70.76 car insurance quotes
$70.62 auto insurance quotes
$70.10 school consolidation
$67.72 consolidation college
$63.67 consolidation student
$63.59 student loan consolidation rates
$63.53 sell structured settlement
$63.12 structured settlements
$62.05 federal student loan consolidation
$61.91 austin dwi attorney
$61.80 term life quote
$61.66 austin dwi attorney
$61.64 term life insurance quote
$61.54 auto insurance quote
$59.66 term insurance quote
$58.79 federal consolidation
$57.75 consolidate student loan

Create a Site Authentication Login with PHP and MySQL

Studge — Wed, 23 May 2007 16:11:55 +0000

Setting up restricted access to certain pages is a breeze. Here I will show a quick way to control who can view specific pages using a form based login system and a MySQL database of allowed users.

First we will set up the database table for storing the user login information. We will be encrypting the passwords later on, here is the SQL code for the table:

CREATE TABLE `users` (
  `id` int(4) NOT NULL auto_increment,
  `username` varchar(32) NOT NULL,
  `password` varchar(32) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM

I insert the users manually through my phpMyAdmin front-end. If I am doing a site that has multiple users, then chances are good that I will be using a content management system, such as Drupal. I use this authentication method for smaller sites and do not find it necessary to write a script for inserting users, but creating one would be relatively simple. The one thing you need to be sure to do when inserting a new user is to select MD5 under the function section for the password (see screenshot below). MD5 is a form of encryption that is easy to implement with PHP.

Now we have the MySQL end taken care of and we can focus on securing the pages. For each page that we only want to be seen by authorized eyes, we need to put in some PHP code. I put this code snippet as the first text after the tag. If you are using PHP4, then the code must be the very first text at the top of the web document.

This snippet checks to see if a user has been authenticated for this session. If not, then the user is redirected to a login form and the script dies. If the user has been authenticated for this session, then the page continues to display the contents. Now we need to create a login page. The code above specifically refers to login.php so we will name the new page just that. Here is my code for the login page:




  
    Login
  

  
    
      Username:

      
      


      Password:

You should notice in the above code that the form is posting to a file named check.php. This file will query our previously created MySQL database to verify the user's credentials. Here is how it is coded:

 0) {
      $_SESSION['is_logged_in'] = 1;
    }
  }

  if(!isset($_SESSION['is_logged_in'])) {
    header("location:login.php");
  } else {
    header("location:authenticated.php");
  }
?>

I have created a page that requires this authentication for you to view, you can visit it here. It is named authenticated.php and that is why the else statement above references that page. It will redirect you to the login.php page unless you have been authenticated. The username and password are user and password respectively. On the authenticated test page you are given to option of logging out. This was done by creating a file named logout.php with the following code:

That's all there is to it. If you have any questions you can leave a comment or use the contact page and I will get back to you as soon as possible.

Displaying Click Counts with PHP and MySQL

Studge — Sat, 19 May 2007 17:01:34 +0000

Terry at SuperAff.com has asked about a follow up to a previous post Hiding Links With PHP and Counting Clicks with MySQL. In this article I demonstrated how to hide links (affiliate or otherwise) and count how many times each was clicked. Here I will show how to throw together a simple MySQL query to show you the click count.

First, you need to follow the aforementioned post to set up the click counter. In the interest of not repeating myself, I will omit that code from this post. Following is the PHP code that we will use:

LinkCount";

  for ($i=0; $i<$num; $i++) {
	  if ($tmp = mysql_fetch_array($result)) {
		  extract($tmp);

		  echo "$id";
		  echo "$count";
	  }
  }

  echo "";
?>

There are many different ways to code a front-end like this. I am by no means a PHP expert, but I know enough to usually get the job done. This code will give you a good starting point and you can elaborate on the code with some simple HTML to dress up the display table a bit. I would usually advise against using tables in your web development ventures, but when it comes to returning MySQL queries there really isn't a better way.

To display these results in a Wordpress post, you will need a plugin to allow running custom PHP code. Wordpress does not allow the execution of PHP code by default. In this blog I only show the code and do not have a real need to embed it – so I do not currently use one of these plugins. However, you can view the results of the above code here.

Drupal SEO

Studge — Sat, 12 May 2007 12:46:35 +0000

Drupal is hands down my favorite content management system, but in order to use it there are a few initial steps you need to follow to get it working at our expected SEO performance level.

Note: This article will not cover the installation of Drupal. The first thing I do is turn on the clean URLs. This option is available when logged in as an administrator under Administer>Site Configuration>Clean URLs. Drupal requires that you run the test first to determine whether or not your server is set up with PHP's mod_rewrite module. This will enable the use of meaningful URLs, rather than PHP posting text. To further compliment the use of clean URLs, we are going to install a Drupal module that will automatically name our posts and pages for us. This module is pathauto, download the appropriate package and upload the pathauto folder into the modules folder on your server. Be sure to enable it under Drupal's module section. If you have already created content and are only now installing this module, then it is important that you navigate to the pathauto configuration section and have it bulk generate index aliases.

One problem with Drupal is the creation of duplicate pages. For example: if you create a new post, then you will be presented with four different URLs for the same content:

http://example.com/new-post

http://example.com/new-post/

http://example.com/node/2

http://example.com/node/2/

This practice looks bad to search engines. So, we need to edit our .htaccess file, located at the root of our webserver, to prevent it from using the trailing slash. We will then edit our robots.txt file to prevent the search engines from indexing the /node area, thus preventing it from being an issue.

First we open out .htaccess file and add the following to the beginning of the file (replace example\.com with your domain name):

# remove trailing slashes
RewriteCond %{HTTP_HOST} ^(www.)?example\\.com$ [NC]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]

Next we need to edit our robots.txt file to prevent the search engines from indexing our /node area. Add the following line:

Disallow: /node/

That should take care of the basic SEO setbacks that come with a default installation of Drupal. You may also want to implement the XML Sitemap module to automatically produce a sitemap when new content is created. It will also notify several search engines when it is updated.

Top 5 Must Have Linux Web Developer Applications

Studge — Thu, 19 Apr 2007 16:54:26 +0000

I consider myself a web developer, not necessarily a web designer, but certainly a developer. As such, I do not require the latest Adobe suite of programs to get the job done. There are plenty of open source Linux applications that can help accomplish this for free.

I see five different areas of software that I use during development. I first, of course, need a development environment to generate my code. I need software to manipulate images that will be used in my sites. I need a program to encode videos into web friendly formats. After all of this, I need to get my files onto the web server. Lastly I need to be able to view the completed work to see how it turned out and determine where I need to tweak my code.

IDE

jEdit is my IDE of choice. I have tried others and could never find one the encompassed all of my needs. jEdit's robust module system allows enough expansion to cover almost any developers' needs. Most important of these is the FTP plugin for editing code directly on the server. The CSS auto complete feature is a nice plus too, though it was never a requirement that I had set out to find.

Image Manipulation

The GIMP is a no brainer here. It is the standard for image editing and creation in a Linux environment. A lot of people say that is severely handicapped in comparison to Photoshop. I am not a professional designer but have been able to do everything I have ever needed to do to an image with The GIMP. A legal version of Photoshop would cost me over $600, that's a cost I can't really justify for an individual – sans self-employed, professional designers. If you are into design that much, then you are probably a Mac elitist anyway – so why are you using Linux? I have found that I can almost always follow a good Photoshop tutorial I have found on the web and mimic it using The GIMP with equal results. I may have to add a couple more steps to the process, but that is fine considering I did not have to fork over any money to do it. Note: This argument does not acknowledge the option of Photoshop piracy.

Video Encoding

MPlayer's movie encoder is fast on the command line. I am able to take nearly any video format and then resize it and convert it into a Flash video. That makes it have a smaller filesize and also ensures that it will be in a format that is usable to most visitors.

File Transfer

I can edit my code directly on the server with jEdit, but I have to get my images, videos and whatever else I am delivering up on the server. gFTP is the only FTP client I have ever used in Linux. I have never found a reason to look elsewhere because it does everything I need. It allows bookmarking so I can connect to my sites with a click and get my files up.

Web Browser

Of course I use Firefox to test sites with. It is also my main browser for surfing the web. But Firefox is not representative of the users who will be visiting sites. Unfortunately most people still use Microsoft's travesty of a browser – Internet Explorer. Luckily I do not need to keep that OS available as an option on my machines just to use that broken browser. IEs4Linux is a script developed by Sérgio Lopes that enables the download and installation of IE 5, 5.5 and 6 through Wine, the Windows emulator. I do not use all of the versions of IE that he makes available, just IE 6 and 7. To get IE 7 you currently need to use the beta version of IEs4Linux.

Creating Flash Video in Linux

Studge — Sat, 14 Apr 2007 11:46:19 +0000

Serving videos on your sites can really eat up your bandwidth. This can cost a lot of money, but so can buying Adobe's Flash software just to create videos in their format. It currently sells for about $700.

I personally use MPlayer as my video player of choice in Linux. It has an encoding program call MEncoder that we will use to convert our video. MEncoder should convert any video that MPlayer will play. If you are using Fedora Core, as I do, then you can find both MPlayer and MEncoder in the Fedora repositories. First we need a video to start with. For the purpose of this example we will use this video. It is a short, 2.4MB video of Built To Spill front-man Doug Martsch doing an acoustic version of “Car” somewhere, I do not recall the specific details. The video is DivX 4 with MP3 audio and is 480 x 360 pixels at approximately 15 frames per second. The following command will convert it to the Flash video (FLV) format. NOTE The backslash at the end of each line is used to break up commands in the shell:

[user@localhost ~]$ mencoder testvid.avi \
-ofps 15 -o testvid.flv -of lavf \
-oac mp3lame -lameopts abr:br=64 -srate 22050 -ovc lavc \
-lavfopts i_certify_that_my_video_stream_does_not_use_b_frames -lavcopts \
vcodec=flv:keyint=50:vbitrate=300:mbd=2:mv0:trell:v4mv:cbp:last_pred=3 -vf scale 320:240

This produces a Flash video that is the same resolution as our source video. One thing you should look out for is matching the frame-rate of your source video. The section in the second line of the command, -ofps 15, tells MEncoder to make the new video have 15 frames per second. You can find your video's frame-rate easily with the file command:

[user@localhost ~]$ file testvid.avi
testvid.avi: RIFF (little-endian) data, AVI, 480 x 360, ~15 fps,
   video: DivX 4, audio: MPEG-1 Layer 3 (stereo, 44100 Hz)

We are also changing the output video's resolution, when we convert it, from 480 x 360 pixels to 320 x 240 pixels. You can omit the last line, -vf scale 320:240, if you do not wish to alter the resolution.

We are finished. You just need to upload your new FLV file to your server and integrate it into your site. I will not cover that process because it will be different for each user dependent upon your particular hosting service and/or CMS. We have managed to reduce the filesize of our video from 2.4MB down to 933.2KB. We have also managed to standardize our video so that it does not depend on the vast array of browser video plugins that our site visitors could be using – just Flash. Here's the video we have produced:

JavaScript Validation for HTML Forms

Studge — Tue, 10 Apr 2007 13:07:19 +0000

One of the most frustrating things with using forms on a site is getting back bad information in your results. Probably the most common instance is when a user enters a bad email address, such as webmaster#studgecom. We can utilize JavaScript to check for composition error such as this and to make sure that certain, required fields are filled in.

First, we are going to write up a simple form that requests a user's name, email address and favorite color. Here is the essence of the form:


  
    Form for JavaScript Validation - 1st version
  

  
    
    	Name:

	Email address:

	Favorite color:

You can try it here. It sends the form data to a PHP script named jstest.php. This script merely displays the information that the user put into the form. Here is code for it:

" . $_POST['name'] . "
";
  echo "We will contact you at " . $_POST['email'] .
    " regarding the color " . $_POST['color'] . "";
?>

As it is written now, the form provides no sort of validation and the user can submit anything or nothing in the availabe fields. So we need to write a JavaScript script to handle the validation. We will require the user to input their name, email address and favorite color. The user must also input the email address in a valid format. We will call this file jstest.js and here is what it looks like:

function validate_required(field,alerttxt) {
	with (field) {
		if (value==null||value=="") {
			alert(alerttxt);
			return false;
		}
		else {
			return true;
		}
	}
}

function validate_email(field,alerttxt) {
	with (field) {
		apos=value.indexOf("@")
		dotpos=value.lastIndexOf(".")
		if (apos<1||dotpos-apos<2) {
			alert(alerttxt);
			return false;
		} else {
			return true;
		}
	}
}

function validate_form(thisform) {
	with (thisform) {
		if (validate_required(name,"Please specify your name!")==false) {
			name.focus();
			return false;
		}
		if (validate_required(email,"Email must be filled out!")==false) {
			email.focus();
			return false;
		}
		if (validate_email(email,"Not a valid e-mail address!")==false) {
			email.focus();
			return false;
		}
		if (validate_required(color,"Forgot favorite color!")==false) {
			color.focus();
			return false;
		}
	}
}

Now we have a script to validate the form, but it does nothing until we implement it into the form's code. Here is the full form code (sans styling):



  



  
    Name:

    Email address:

    Favorite color:

You can try the finished, with validation, here. You should be able to adapt the above code to your specific form needs.

Hiding Links With PHP and Counting Clicks with MySQL

Studge — Sat, 07 Apr 2007 17:44:57 +0000

There are many reasons why one might want to hide their links – perhaps you are are an affiliate marketer, the link is really long and dirty or you are simply wanting to implement a system that counts how many times a certain link is clicked (more on that later).

Affiliate marketers like to make their links appear to be on their site and handle the redirection themselves, it improves the overall trustworthiness and cleanliness of the site in general. In keeping with the clean URLs process, though I’m not sure if this really counts, you may want to clean up a link for whatever reason. The last reason I can think of, and the most useful, is that you what to implement a system to manage your links and count them at the same time. This can be a valuable tool in any online marketing campaign as you try to feel out what works on your sites. First off, we are going to need a PHP script to send all of our link requests to. For this example, we will create a script at the root of our domain called redirect.php. The following is the first bit of code that will handle the actual redirection for the links, for our example it will redirect to Google, Yahoo and Wikipedia:

 "http://google.com",
    "yahoo" => "http://yahoo.com",
    "wikipedia" => "http://wikipedia.org"
    );

  header("Location:".$links[$id]);
  exit;
?>

Now we can use the following links to get to our specified locations:

Google http://studge.com/testbed/redirect.php?id=google
Yahoo! http://studge.com/testbed/redirect.php?id=yahoo
Wikipedia http://studge.com/testbed/redirect.php?id=wikipedia

Now we can also set up a system to count how many clicks our new links are getting. I am going to use a MySQL database for this feature. I will need to set up the following table:

CREATE TABLE `linkcount` (
`id` VARCHAR( 50 ) NOT NULL ,
`count` INT( 10 ) NOT NULL default '0' ,
PRIMARY KEY ( `id` )
) ENGINE = MYISAM ;

We are going to edit the redirection code to access the database and create an entry for the link if it does not already exist. Then we will increment the count field by one each time it is called. This example uses the fictional database server mysql.example.com, using a database called database with a table called linkcount:

 "http://google.com",
    "yahoo" => "http://yahoo.com",
    "wikipedia" => "http://wikipedia.org"
    );

  header("Location:".$links[$id]);
  exit;
?>

That is all it takes. From here you may want to write a front-end to display your click results or you could even display the count next to the specific link in your sites navigation menu to rank the most popular outgoing links.

Edit: A follow-up has been written to this post that describes a simple script for displaying the click results: Displaying Click Counts with PHP and MySQL.

301 Redirect and Dreamhost

Studge — Sun, 25 Mar 2007 01:45:19 +0000

I recently needed to redirect a domain name to another domain name. This was due to having both the .com and the .net extension. I wanted to forward the .net domain to the .com domain. Dreamhost provides a redirect option in their control panel. I implemented this feature and then started testing it a bit – what I came to find out was not very encouraging. If I typed in http://example.net/ in my browser, then I was flawlessly redirected to http://example.com/. Great – that is naturally what I expected. However, a problem arose when I went to specific locations of the .net domain.

The domain had already been submitted to the search engines and, as such, had already been indexed. This meant that there were locations that may be checked. While using Dreamhost's redirect option, users trying to go to http://example.net/contact/ would be redirected to http://example.comcontact/. This is, of course, a completely bogus URL and would return a page error. Having a request redirected to a location like this would lower your sites standing in the search engines' indexes. The solution came by implementing my own 301 Redirect in the domain's .htacess file. I wiped out the existing .htaccess file from that domain (it was leftover from the previously installed CMS). I then created a new one in its place that only consisted of the following one line:

Redirect 301 / http://example.com/

That was it. After that, any specific requests sent to the .net domain were translated over to the .com URL and redirected accordingly.