1. Use Flash to upload the images. (The browser only supports one image at a time) - SWFUpload
2. Use Javascript to add multiple file type fields, while hidding previous fields - the-stickman
3. Use Javascript and hidden iframes embedded on the same page to upload the images. - ajaxf1

I decided to take pieces of the mentioned methods and come up with a solution that worked for me.

Here is the idea behind what we are going to be doing.

1. Create a HTML form which has a file upload field
2. Set the target of this HTML form to an iFrame which is on the same page
3. Have Javascript submit the form everytime the “file” field changes
4. Javascript hides the form when submitted, and displays an “animation”
5. PHP takes the uploaded file, thumbnails it, and stores the image data
6. Javascript unhides the form, and re-hides the animation when upload is complete
7. Javascript and php show the thumbnail on the same page right after it was uploaded

This makes this little script appear like an ajax application. It is NOT actually AJAX, but uses css, iframes, php sessions, and javascript to make it appear so.

I’ll try to explain what is happening at each step, but keep in mind, I’m not an expert programmer like my fellow co-workers, and I borrowed most of the work from the mentioned sources above. If you just want to download all the files and take the easy way out, skip to the bottom of the post.

Steps 1 & 2 & 3 - Make Our Form

1
2
3
4
5
6
7
8
9

<form name="pictureform" action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" >
     <p id="f1_upload_process">Loading...<br/><img src="loader.gif" /><br/></p>
     <p id="f1_upload_form" align="center"><br/>
         <label>Add Pictures:  
              <input name="myfile" type="file" size="30" onchange="startUpload();document.pictureform.submit();" />
         </label>					 
     </p>
     <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>

Explanation of the mentioned code:
enctype="multipart/form-data"
Tells the browser you are submitting files, or images with your form.

onchange="startUpload();document.pictureform.submit();
The onchange event of the input field calls the function startUpload(), which will hide the form, and show the animation while uploading. The document.pictureform.submit(); Submits the form to our “action” which we have as “upload.php”

Step 4 - Make the JavaScript functions for hiding and showing

1
2
3
4
5

function startUpload(){
      document.getElementById('f1_upload_process').style.visibility = 'visible';
      document.getElementById('f1_upload_form').style.visibility = 'hidden';
      return true;
}

Explanation of the mentioned code:
By giving our HTML elements id tags,such as id=f1_upload_process
we make them available for manipulation by JavaScript via the DOM.

document.getElementById('f1_upload_process').style.visibility = 'visible';
says: “get the element in the document that has an id of “f1_upload_process” and make it visible.”

This then turns on the visibility of our “animation”

block which we have set “invisible” by default in our CSS file. The opposite occurs for the form block, we make it “invisible” or “hidden.”

Step 5 - Create our “upload.php” script to handle thumbnail and copy image to filesystem

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

<?php
	// keep our session
	session_start();
 
	// Check the upload file type
 
	$filetype = $_FILES['myfile']['type'];
	$gd_function_suffix = array(  
 		'image/pjpeg' => 'JPEG', 
 		'image/jpeg' => 'JPEG', 
 		'image/gif' => 'GIF', 
 		'image/bmp' => 'WBMP',
		'image/png' => 'PNG',
 		'image/x-png' => 'PNG' 
		);
		$function_suffix = $gd_function_suffix[$filetype];
 
		// Build Function name for ImageCreateFromSUFFIX 
		if(!$function_suffix){
			$err = "Unsupported file type, must be JPG|PNG|GIF|BMP";
		}
		else{
		$function_to_read = 'ImageCreateFrom' . $function_suffix;
 
	// Get the image and create a thumbnail
	$img = $function_to_read($_FILES['myfile']['tmp_name']);
	if (!$img) {
		$err =  "could not create image handle";
	}
 
	$width = imageSX($img);  // Get the image width
	$height = imageSY($img); // Get the image height
 
	if (!$width || !$height) {
		$err =  "No Width or Height";
	}
 
	// Build the thumbnail
	$target_width = 100;  // Thumnail width
	$target_height = 100; // Thumbnail height
	$target_ratio = $target_width / $target_height;  //New target ratio
 
	$img_ratio = $width / $height;  // Original ratio
 
	if ($target_ratio > $img_ratio) {
		$new_height = $target_height;
		$new_width = $img_ratio * $target_height; // Tall Image
	} else {
		$new_height = $target_width / $img_ratio; // Wide Image
		$new_width = $target_width;
	}
 
	if ($new_height > $target_height) {
		$new_height = $target_height;
	}
	if ($new_width > $target_width) {
		$new_height = $target_width;
	}
 
	$new_img = ImageCreateTrueColor($target_width, $target_height); // Create a new image handle for thumbnail
	$white = imagecolorallocate($new_img, 255, 255, 255); // Allocate the color white
	if (!@imagefilledrectangle($new_img, 0, 0, $target_width-1, $target_height-1, $white)) {	// Fill the image white
		$err = "Couldn't fill image";
	}
	// Copy the uploaded image to the newly created image
	if (!@imagecopyresampled($new_img, $img, ($target_width-$new_width)/2, ($target_height-$new_height)/2, 0, 0, $new_width, $new_height, $width, $height)) {
		$err = "couldn't copy new image";
	}
 
	// Create php Session array for image information
	if (!isset($_SESSION["file_info"])) {
		$_SESSION["file_info"] = array();
	}
 
	// Use a output buffering to load the image into a variable
	ob_start();
	imagejpeg($new_img);
	$imagevariable = ob_get_contents();
	ob_end_clean();
 
	// Create a unique id or name for the image
	$file_id = md5($_FILES["myfile"]["tmp_name"] + rand()*100000);
	$new_name = $file_id.".$function_suffix";
	$temp_name = $_FILES["myfile"]["tmp_name"];
 
	// assign upload directory, and target path for image
	$uploaddir = getcwd(); //
	$target_path = $uploaddir.DIRECTORY_SEPARATOR.$new_name;
 
 	// Move uploaded image to uploaddir location
	if(!@move_uploaded_file($temp_name, $target_path)){
		$err = "Couldn't Copy File to Filesystem";
	}
	// Create a Session array with name, type, and image object for use in displaying thumbnails
	if (!isset($_SESSION["file_info"][$file_id])) {
		$_SESSION["file_info"][$file_id] = array(										"name" => $new_name, 								"type" => $function_suffix, 
						"obj" => $imagevariable								);
	}
}
   // If no error, then pass good result and file id to Javascript for generating the thumbnail.
   // Pass our $err varialbe along
 
	if(!$err){
		$result = "'1','".$file_id."'";	
	}
	else{
	    $result = "'.$err.','".$file_id."'";
   	}
 
   sleep(1); // in case of really fast upload, sleep script to show loading animation for a bit longer
 
	// Javascript calls the "stopUpload" function with its paramaters
?>
 
<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>);</script>

Explanation of Code:
These php functions make use of the GD library. You must have that enabled in PHP in order to use this. Also make sure your current directory is writeable.

I won’t explain to many things here, as the code has inline comments. You could make this code a function and have it thumbnail and save multiple sizes to the filesytem. Currently it simply thumbnails a 100 X 100 and copies the original to the current directory the script is running from. It will do GIF, JPEG, BMP, or PNG. Error checking and Session handling could be improved.

Step 6 - Create JavaScript function to show form, and hide animation when upload is finished

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

function stopUpload(success,fileid){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
		 addImage("thumbnail.php?id=" + fileid);
      }
      else {
         result = '<span class="emsg">There was an error during file upload!' + success + '<\/span><br/><br/>'; 
      }
      document.getElementById('f1_upload_process').style.visibility = 'hidden';
      document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="myfile" type="file" size="30"  onchange="startUpload();document.pictureform.submit();" /><\/label>';
      document.getElementById('f1_upload_form').style.visibility = 'visible';      
 
	  return true;   
 
}

Explanation of Code:
From our upload.php script, we passed two varialbes to this JavaScript function, Success and File Id.
If we had a successful file upload, we throw up a message saying “success” and call another function called addImage("thumbnail.php?id=" + fileid); <- More on this later...

If we didn't have a successful upload, we return a message saying so.

The last few lines of the function hide the "animation" bar, and recreate our form input element so we can upload another image, and do the whole thing over again. All without leaving the page!

Step 7 - Our Thumbnail.php script and our addImage() Javascript function

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

<?php
	// This script accepts an ID and looks in the user's session for stored thumbnail data.
	// It then streams the data to the browser as an image	
session_start();
 
$image_id = isset($_GET["id"]) ? $_GET["id"] : false; // get the id from the URL
if ($image_id === false) {
		exit(0);
	}
	if (!is_array($_SESSION["file_info"]) || !isset($_SESSION["file_info"][$image_id])) {
 
	}
	header("Content-type: image/jpeg") ;
	header("Content-Length: ".strlen($_SESSION["file_info"][$image_id]));
	echo $_SESSION["file_info"][$image_id][obj];
	exit(0);
?>

Code Explanation:
This bit of code simply gets the image id from the URL and pulls the image thumbnail data we saved into our session in our upload.php script, and outputs the image to the browser.

addImage() Javascript Function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

function addImage(src) {
	var newImg = document.createElement("img");
	newImg.style.margin = "5px";
 
	document.getElementById("thumbnails").appendChild(newImg);
	if (newImg.filters) {
		try {
			newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
		} catch (e) {
			// If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
			newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
		}
	} else {
		newImg.style.opacity = 0;
	}
 
	newImg.onload = function () {
		fadeIn(newImg, 0);
	};
	newImg.src = src;
}
 
function fadeIn(element, opacity) {
	var reduceOpacityBy = 5;
	var rate = 30;	// 15 fps
 
 
	if (opacity < 100) {
		opacity += reduceOpacityBy;
		if (opacity > 100) {
			opacity = 100;
		}
 
		if (element.filters) {
			try {
				element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
			} catch (e) {
				// If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
				element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
			}
		} else {
			element.style.opacity = opacity / 100;
		}
	}
 
	if (opacity < 100) {
		setTimeout(function () {
			fadeIn(element, opacity);
		}, rate);
	}
}

Code Explanation:
I borrowed most of this code from the SWFUpload project. The basic idea is that we create a new image tag via javascript, give it a src of “thumbnail.php?id=XXXXX” XXXXX being our image name, and call a “fadeIn” function which does just that, fade the image in for a lovely effect. I have this javascript included in my index.php page via

<script type="text/javascript" src="handlers.js"></script>

Thats it! Hope you learned as much as I did from this tutorial.

Important Notes:

-This script does not check file size, or limit the number of files that can be uploaded.
-You will need to add in appropriate error checking on the uploaded files for security.
-You will want to clean out the data from the session when done with the uploading.
-Make sure you have write permission the directory where images are being saved
-You must have GD library installed for this script to work

All the files you need to be up and running are found here -> ajax-file-upload-mokisystems

Free VMWare server limits running virtual servers to 4. Our solution was to purchase new servers equipped with 1 SATA disk for the OS and 4 SCSI disks, 1 for each virtual machine (VM). While VMWare offers an option to write to the disk directly I opted not to do that because the virtual disk files VMWare uses make your VM’s highly portable and easy to duplicate. Disaster recovery practice becomes far easier when you can easily make a duplicate of your production server.

This architecture’s utility was brought to light when one of your servers died. We were able to pull the disks containing our production servers, copy the VM’s to another server, then get those servers running again quickly. There was no need for OS reinstall or recovery from backup and because of this portability downtime was minimized.

I have VMWare server installed on my Windows workstation with a Centos 5 VM running in the background. I use it for some MySQL and PHP stuff so it isn’t used a whole lot but I hardly know it’s there. The beauty of this that the Windows guys can have a Linux VM and the Linux guys can have a Windows VM. That can help quite a bit when testing browser compatibility on a website or getting access to a tool not available for your OS of choice.

VMWare server has helped us utilize our server resources better at a very minimal cost. Running 4 servers for the price of one saves us time and money. What else could you ask for?

Benchmark.bm do |x|
  x.report do
    100.times do
      (1...1000).to_a.sum
    end
  end
end

So I tossed this into my ~/.irbrc file:

class Integer
  def ti(&block)
    Benchmark.bm do |x|
      x.report do
        self.times do
          yield
        end
      end
    end
  end
end

And now I can “time it” like this:

>> 100.ti {(1...1000).to_a.sum}
      user     system      total        real
  0.540000   0.050000   0.590000 (  0.597664)
=> true

Much nicer!

<r:cache name="rss_fragment" time="60">
  <r:feed:items url="[feed_url]" limit="1">
    <h3><r:feed:link /></h3>
    <p><r:feed:content max_length="300" no_html="true" /></p>
  </r:feed:items>
</r:cache>

The code is at github.

As we support and help various customers with Postgresql related database issues, we still find users who are encoding their databases in SQL_ASCII. Perhaps there is a reason for this, if there is I haven’t figured it out yet.

In many cases, this eventually causes them problems and they end up having to switch from SQL_ASCII or some other encoding over to UTF8.

There may be more, but I know of two different ways of converting the encoding of the database to UTF8.

One way is

iconv -f iso-8859-1 -t utf-8 dump_file dump_file_recoded

The preferred way however is to use the -E option of the pg_dump command like this:

pg_dump -U postgres -W -E UTF8 -d pg_bench >pgbench.backup.

the -W command forces you to put in a password.

For more details on how to use the pg_dump command, here are the docs:

http://www.postgresql.org/docs/8.3/interactive/app-pg_dump.html

$ svn copy -r 1234 url/to/deleted/file path/to/recovered/file

This will copy the file at the revision specified to the new file in the “restore to path” part. You can find the revision by doing an ’svn log –verbose’ of the directory it was in. That’s all there is to it!

My theme seems to be restoring and recovering… is that a bad thing?

Background

Sometime back I wiped my development box clean and reinstalled the OS from scratch. It’s a wonderful feeling to start fresh and get rid of all the old whacky configs and random junk that collects on a filesystem. Prior to this cleansing, I backed up all the junk I considered save-worthy. One thing I saved was they MySQL data directory. Many of the databases were old projects and at the time I didn’t think I’d need to look at them anytime soon. Well, anytime soon arrived yesterday in the form of me really wanting to see how I had implemented a particular feature in an old project. The database component of that project was essential, so I couldn’t just glance at the code, I wanted to get it running again with the database backend.

Problem

I probably should have known better, but I decided to just try to shutdown mysql and copy the files directly to my new data directory. After some permission and user adjusting, that seemed to work… until I actually tried to access the restored database I needed, which used mostly InnoDB tables. They were not showing up or working properly. A quick glance revealed a file I hadn’t copied which seemed like it *might* be something important:

$ ls -lh /Backup/mysql/data/
-rw-rw----    1 brian  staff   1.0G May 21 10:05 ibdata1

Yeah, oops. So InnoDB stores things a bit differently than MyISAM.

Solution

The solution turns out to be simple and is what I should have done in the first place.

First, shutdown the mysql server:

$ mysqladmin -u root -p shutdown

Next, startup mysqld with the –datadir option pointing to your old data directory:

$ mysqld --datadir=/Backup/mysql/data/

It may complain about some issue with writing to log files, but that doesn’t matter for this quick export.

Now just dump your database as you normally would (or should have originally):

$ mysqldump -u root -p database_name > database_name.sql

Lastly, shutdown mysqld again, start mysqld normally and then do the import as usual:

$ mysql -u root -p database_name < database_name.sql

(you’ll likely need to create the database first)

There you have it - the way to get your old database files restored into your current setup. There is probably some better easier way to do this, and if someone knows it, clue me in will ya?

Install Slony

Configure pgAdmin file/options and set the slony path

G:\Program Files (x86)\PostgreSQL\8.2\share

Create the master db

create the slave db

Initialize the master database. From the command line
pgbench.exe -U postgres -i pb

copy the master to the slave: from command line

pg_dump.exe -U postgres -h localhost pb |psql =U postgres -h localhost pbslave

Add a new cluster on the master

Add a node on the slave db

Add a path on both the master to the slave

host=localhost port=5432 dbname=pbslave user=postgres password=a

Add a path on the slave to the master

host=localhost port=5432 dbname=pb user=postgres password=a

Add a replication set on the master

Add accounts, branches, tellers

From the master Subscribe the slave

from the all tables set, right click subscribe set

Slony is configured, now we have to make windows start the engines correctly.

Create two text files in c:\slony

master.conf and slave.conf which look like this:

cluster_name='pgbench'
conn_info='dbname=pgbench user=postgres password=a'


From the command line register the engines

slon -addengine slony g:\slony\slave.conf
lon -addengine slony g:\slony\master.conf

if this hasn’t been done register slony as a service

slon -regservice slony

go to services and start slony

check event log for errors

if there are none then run a test from the master:

insert into accounts values (100001, 1, 0, 'test');

from the slave

select count(*) from accounts;

• Created a new Fla and add a font to the library.
• In the Library pane(F11), click the options dropdown, and choose ‘New Font’
• Select a font, size and style–size is not important ( arguably)–however, I believe you will have to create separate fonts for each style you require. The name is not important really either.
• Right click the new font in the Library and select ‘Linkage…’
  • Check ‘Export for ActionScript’ and ‘Export in first frame’.
  • Give it a Class:–this name is important and you will need to remember it. I used ‘EFont01′ fig. 1
  • 

• Publish the swf as ‘/font-Fontname.swf’.

Step 2: Create the Application:

• Create a new Flash CS3/As3 application set the Document class as ‘Main’ and save it as ‘/myapp.fla’
• Create a new AS3 script and save it as ‘/Main.as’

Main.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

package {
 	import flash.display.Sprite;
 	import flash.text.*;
 	import flash.events.*;
 	public class Main extends Sprite {
 	 	var t:TextField = new TextField();
 	 	var f = new TextFormat();
 	 	public function Main() {
 	 	 	var font = new LoadFont("font-Zapfino.swf",["EFont01"]);
 	 	 	font.addEventListener(LoadFont.COMPLETE, successLoadFont);
 	 	 	font.addEventListener(LoadFont.ERROR, failLoadFont);
 	  	}
 	 	private function failLoadFont(e:Event){
 	 	 	f.font="Arial"; //default font if load fails.
 	 	 	t.embedFonts = false;
 	 	 	post();
 	 	}
 	 	private function successLoadFont(e:Event){
 	 	 	var embeddedFonts:Array = Font.enumerateFonts(false);
 	 	 	f.font=embeddedFonts[0].fontName;
 	 	 	t.embedFonts = true;
 	 	 	post();
 	 	}
 	 	public function post(){
 	 	 	f.size = 36;
 	 	 	t.defaultTextFormat = f;
 	 	 	t.x = 100;
 	 	 	t.y = 100;
 	 	 	t.background = true;
 	 	 	t.autoSize = TextFieldAutoSize.LEFT;
 	 	 	t.text = "We are in loaded Font";
 	 	 	addChild(t);
 	 	}
 	}
}

• Create a new AS3 script and save it as ‘/LoadFont.as’

LoadFont.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

package {
 	import flash.display.*;
 	import flash.events.*;
 	import flash.text.*;
 	import flash.errors.*;
 	import flash.system.*;
 	import flash.net.*;
 	public class LoadFont extends EventDispatcher {
 	 	public static const COMPLETE:String = "complete";
 	 	public static const ERROR:String = "error loading font";
 	 	private var loader:Loader = new Loader();
 	 	private var _fontsDomain:ApplicationDomain;
 	 	private var _fontName:Array;
 	 	public function LoadFont(url:String,fontName:Array):void {
 	 	 	_fontName = fontName;
 	 	 	trace("loading");
 	 	 	loader.addEventListener(IOErrorEvent.IO_ERROR, font_ioErrorHandler);
 	 	 	loader.contentLoaderInfo.addEventListener(Event.COMPLETE,finished);
 	 	 	loadAsset(url);
 	 	}
 	 	private function loadAsset(url:String):void {
 	 	 	var request:URLRequest = new URLRequest(url);
 	 	 	loader.load(request);
 	 	 }
 	 	function finished(evt:Event):void {
 	 	 	_fontsDomain = loader.contentLoaderInfo.applicationDomain;
 	 	 	registerFonts(_fontName);
 	 	 	dispatchEvent(new Event(LoadFont.COMPLETE));
 	 	}
 	 	function font_ioErrorHandler(evt:Event):void {
 	 	 	dispatchEvent(new Event(LoadFont.ERROR));
 	 	 }
 	 	public function registerFonts(fontList:Array):void {
 	 	 	for (var i:uint = 0; i < fontList.length; i++) {
 	 	 	 	Font.registerFont(getFontClass(fontList[i]));
 	 	 	}
 	 	}
 	 	public function getFontClass(id:String):Class {
 	 	 	return _fontsDomain.getDefinition(id)  as  Class;
 	 	 }
 	 	public function getFont(id:String):Font {
 	 	 	var fontClass:Class = getFontClass(id);
 	 	 	return new fontClass    as  Font;
 	 	}
 	}
}

In response to the question “How can I improve my site’s ranking?” Google has given the answer. “In general, webmasters can improve the rank of their sites by increasing the number of high-quality sites that link to their pages.”

Hundreds of factors go into determining a sites rank within a search engine, however, possibly the most important is the number of high-quality inbound links to your website. By high-quality we mean sites that themselves rank high in search engines, and are relevant and similar to your websites content.

A simple search on “Link Submission” on Google will turn up thousands of websites that will accept, and dispay a link to your site on their site. You could go about submitting to hundreds of these sites, but it will likely not increase you position within any search engine. These submissions can actually hurt your site’s ranking, not improve it.

So who should I submit my link to?

While trying to avoid submitting your link to a hundred places, there are a few key places that you should submit to. You will want to add your site to the Google Index. Yahoo also provides a free site submission into their index here. You may want to consider adding your site to DMOZ.org. DMOZ is a web directory which is human edited. Getting your site listed here will also get your site listed in the Google Directory (Google uses DMOZ.org’s directory). You can submit your site to DMOZ here.

Great. Now What?

After you have submitted your site to the major search engines, you’ll want to trade links with websites that are well placed within your industry. Do a google search on a few keywords that pertain to your website. Lets say “poodle puppies.” Get the list of the top 15-20 websites that currently appear on Google or Yahoo under that keyword. Next, write an individual email to each of them asking to trade links with them. You may even consider buying a link on their site.

As soon as they add the links and the search engines become aware that they link to your site, your site’s ranking will dramatically increase.

The key to success here is not to give up. You should be continually trying to get high quality links to your site as you grow. My Next article will deal with internally improving your website to increase your ranking on Search Engines. We’ll talk about layout, structure, meta tags, alt tags and title tags that will affect your site’s ranking.

Stay Tuned!