Archive for September, 2007

Personal Web Server is pretty easy to configure. Even back in 1995 when it was all web based. However in this article I am looking at the PWS version which was shipped with Windows 98 and ME software.

The basic’s to it are very simply. In fact the only page of options we will be looking at is the advanced page. Open up your personal web server consol from the system tray and click advanced down the left hand side.

You should now be presented with a tree like view with the top root document and several sub folders. From here you can add virtual directories. Virtual directories are directories which aren’t really there but are instead linked to it.

For instance if you had two directories, your main website root C:\websites and a downloads directory which you wanted to be on your server at C:\downloads. Obviously you don’t want the move this folder into your other folder. And so you create a virtual directory so that http://localhost/downloads goes to C:\downloads rather than C:\websites\downloads.

Beware: Virtual directories override physical (normal) directories. So if you had both a virtual directory called downloads and a folder in your website root called downloads, the virtual directory would be used instead of the folder when using hyperlinks, etc.

In PWS you can create as many virtual directories as you like. Click add below the list of directories. You can also add virtual directories within virtual directories so you could set up http://localhost/downloads/games to go to C:\games rather than C:\downloads\games. To do this click on the downloads virtual directory before clicking new, rather than click the root directory and then clicking new.

You can change the properties of each of the directories including the root directory by clicking it and then click properties. Here you will probably be presented with a name for the directory (unless it is the root) as well as the file path to the directory.

You also have 3 tick boxes. Read which allows people to read the files in the server. You will almost always want to keep this ticked. The second one is script which allows the web server to run scripts. This is another one you will want to keep ticked.

The final one is write. This allows files such as text files and databases to have data added and removed this one. It’s a good idea to keep this one ticked if its your own server so you can run scripts such as ones that change database’s and is required if you want to alter any files.

There are also a few options on the main page of the advanced section at the bottom. One of these is “allow directory browsing.” This means that if a user goes to a folder, for example http://localhost, they will be presented with a list of the files and folders in the directory which they can click on.

Default document allows a file to be served as a kind of homepage when a user goes to a directory. For example if your default document file name was home.htm, when a user went to http://localhost, they would get home.htm if it existed.

The standards for default documents are default and index in which you should list several file formats. I use .asp .htm and .html though if you use other formats such as php and cfm you should list these too.

Conclusion

Personal Web Server has quite a few customisation options for each directory as well as the entire site and despite its problems with not being able to cope with high traffic or indeed anything above very little traffic, makes a great testing server especially for active server page developers.

Shareware was never one of my favourite groups of software because I always had to find a new replacement application when the 15 day trial expired. Occasionally though a piece of software comes along which seems indispensable and even the guy who hasn’t paid for the last dozen pieces of software he has got, despite the fact he should, we shell out for a good bit of shareware.

Why? Because some applications really are good. The piece of software that got my digging deep (although it’s a phase seen as shareware is almost always very well priced) was Exactcom’s HTML to AnyCode Converter. Allowing you to insert HTML click a button and have it translated into a different language without all the complications of you having to work out how to change and update it as well as risking missing something and causing your new script to go horribly wrong.

It’s a very simple application, once launched it has a title image and 3 tabs below this in which control all its function. Clicking the first tab allows you to enter your code and the language you want it to be converted to. You can also load in a source file in which will then automatically populate the code box for you – just in case you are too lazy to cut and paste; a problem which often haunts me.

One click on the convert button and suddenly your code has been transformed into the language of your choice, the default being JavaScript. The code is even wrapped in <script> tags so you can copy and paste straight into your page. These are automatically removed if you save the file so you can immediately include it into your page.

A nice help tabs also backs up the application with some information on how to use the application, how to register it, about Exactcom and contact details if you are having any problems with it – their support is good too. There is a final tab for registering the application though this disappears once done.

Although the default pages which the open file looks for are .htm and .html, all formats can be selected and imported. The code is rich text too so all your code is fully colour coded – it might be the next step up from Notepad as a web editor. It seems that they have thought of everything!

The only one complaint I would have against it is the image at the top still has a big “Buy it now!” slogan on despite the fact that I purchased and registered it many moons ago. That’s not really a problem though and if they happen to change it in later versions; I have free upgrades for life so I am not worried. Free upgrades are another good reason for shareware – most applications come with it.

Twice I have asked them for support and both times I got a prompt response. The first was when I lost my registration code (wasn’t my fault, well, maybe a little bit) and the second time was one of their new versions had an error in the JavaScript output, which the solved and made a new version available in around a day. Should you be worried that there was an error? I don’t think so, after all its shareware not a huge corporate developing the software, and free upgrades mean all bug fixes are yours.

Though its functions are not huge I find them very useful – I have used it for around a year now and I have hardy ever used it for anything other than converting my HTML text into JavaScript – long story which I will tell shortly. I have hardy scratched the surface of the conversions to ASP, PHP, Perl and JSP.

My main use for the application is for stories on one of my websites. Back in the olden days when I was getting started with Microsoft Access I did not know how to fit all my HTML in a text field with a maximum character amount of 255 – luckily for Exactcom I had not discovered the memo field type and so my solution was to convert the stories into JavaScript, give them a file named based on their ID in the database and include them dynamically that way.

That made HTML to AnyCode Converter vital to my operation though – but that doesn’t make it vital to yours. Exactcom make some great software and HTML to AnyCode is the best converter around. But the use of converting code is not a wide market. Overall, if you need converting done then this software is the only buy. But if you don’t need this function then it’s a product you will sadly not want to register.

Requirements: Adobe Photoshop 7

You can proably do this with older version of photoshop but if you don’t have them or want the new version, you can download a 30 day trail.

Introduction

In this article I’m going to show you how to create a water texture in Photoshop. Although Macromedia Fireworks has some built in textures to do this, the textures you can create in Photoshop look far more realistic and is more customizable. For more infromation on image editing see my last column.

I will also make it seemless so you can tile it on your web page, background, etc as wallpaper and it won’t show the lines where the image repeats.

Step by step

1. The first thing to do is to create a new image 400 x 300 pixels. This is just my recommended size though, the size of the document is irrelevant.

2. You’ll need a layer to work with. If you don’t already have one (you probably will) then create a new one.

3. Hit D to set your colors to default: black as foreground and white as background. Go to Filter>Render>Clouds to make what will be the base of our water texture.

4. Go to Filter>Blur>Radial Blur and use these settings – Amount: 38, Blur Method: Spin, Quality: Good (unless you don’t mind waiting a little bit, in that case choose Best). Then go to Filter>Blur>Gaussian Blur with a radius of 2 because we want this to be blurry to the max.

5. Go to Filter>Sketch>Bas Relief and choose the settings – Detail: 13, Smoothness 10. Next go to Filter>Sketch>Chrome and select the following options – Detail: 5, Smoothness 2.

6. Now to add color. Duplicate the layer by going to the Layers palette and dragging the layer with the water texture onto. Click on the eyeball to the left of the new layer you just made to hide it. Select the original (lower) layer and go to Image>Adjust>Channel Mixer. You may want to make it a different color, but to copy the blue I used make these changes – in the Red Output Channel move the blue to the left; in the Green Output Channel move the green slightly to the right; in the Blue Output Channel move the blue to the right. Next click on the at the top of the layers palette and choose New Adjustment Layer. Then choose Hue/Saturation as the type. Play around with the Hue and the Saturation bars until the blue color looks the way you like it.

7. Now click the upper layer in the Layers palette. In the left drop-down box change Normal to Color Dodge and lower the Opacity real low to about 5-10%. (This layer brightens the lightest areas of the image and makes them glow a little). As a final touch you may want to adjust the Hue/Saturation layer again (just double click it) or try adjusting the Curves of the lowest layer (click it and hit Ctrl/M).

8. First make sure you save your file. Then flatten your layers by going Layer>Flatten Image. Next go Filter>Other>Offset. Fill in the coordinates – Horizontal: 200, Vertical: 200. After that, go Filter>Distort>Twirl select 120° as the angle. Now you may be done here if you like the way it looks, but I had a poor turn out on this example – the four sections were still clearly visible. So to correct this simply add one more filter. Go Filter>Distort>ZigZag and choose – Amount: 10, Ridges: 5, Pond Ripples.

9. Just for fun, you may want to see your image in seamless-tiling glory. Hit Ctrl/A to select all, then go to Edit>Define Pattern. Create a new image (about 800×800 pixels), click the paint bucket, set Contents to Pattern in the Options palette, and click in your blank image.

The SQL update command allows you to make specific changes to one or more rows. You could in theory do this by deleting the old one and inserting a new one but this means you have to deal with all the data and can only do one row of data. Using UPDATE solves both of these problems.

Basic syntax

As with everything there is a basic command structure to allow you to sort out what you want and run the various different parts of the commands. The syntax for using UPDATE is as follows:

UPDATE table SET field1 = 'value1', field2 = somenumber WHERE field3 = 'value3'

There are three parts to this. The first is the table to update. The second is the values which you are setting. The third is the validation of which rows in the table should have the update run.

Sample table

To make this easier to do I am going to create a sample table of data from which we can work from. The table is going to be called friends and will have several bits of data in it.

Name	email	age	favourite colour
Jim	jim@mail.com	24	blue
Alex	alex@operamail.com	23	black
Josh	happy@killer.com	30	grey
Mike	mikebob@avril.com	27	blue

Ok first lets say that Josh tells me that his email has changed from happy@killer.com to josh@wiggam.com. So we need to run an update command to change the email address from the old one to the new one.

UPDATE friends SET email = 'josh@wiggam.com' WHERE name = 'Josh'

In this code, all rows where the name is Josh, will have the current email changed to match josh@wiggam.com. This would be a problem if I had two Josh’s but I don’t so only one is updated. If I did have two Josh’s I could change the statement to say:

WHERE email = 'happy@killer.com'

Or I could also try

WHERE name = 'Josh' AND age = 30

Updating multiple values

Next let’s pretend that it’s Alex’s birthday – he turns 24 and decides that his favourite colour is now green. So we need to update two values in the table at once. Luckily this is pretty simple to do.

UPDATE friends SET age = 24, favourite colour = 'green' WHERE name = 'Alex'

First thing I must stress – you should never have a column name with a space it – don’t do it. But seen as this is just an example it’s not a problem. If you really needed a name like that then using FAVOURITE_COLOUR or a dash, etc to space them out.

In the above update statement both age and favourite colour are updated in every row where the name is Alex. Also there are no hyphens around age as it’s a number and so does not require them. You will get an error if you try to put them round a number when using a number column, as you will do for not using them in a text column.

Updating multiple rows

Finally I am going to look at how to update two records at a time. Though we have really already covered it so this is more of a confirmation to make sure you have it right. Take a look at this code:

UPDATE friends SET age = 60 WHERE favourite colour = 'blue'

I decide that everyone who likes blue is an old foogy so I am going to update everyone’s age to 60 who said their favourite colour was blue. As usual the script looks for everyone who is ok by the WHERE validation. This time it finds both Jim and Mike and changes both their ages to 60.

Conclusion

The UPDATE command is fairly simple – you just specify the table to update, the values to set and the conditions a row must meet for the update to be run on that row. One final thought though – take another look at Mike’s email address and try and guess what music I was listening to when I wrote that one :).

Yep, it was of course Feeder ;).

Whether you connect to MySQL, MS Access, SQL or more databases and whether you do it via PHP, ASP or even more you still use the same basic commands of SQL to extract information from the database.

Below is a sample database table called “members”

Username	Name	Email	Posts
Jim	Jim Harris	jim@ntlworld.com	24
Mod	Toby Hunter	t.hunter@btopenworld.com	4
Happy	Simon Gates	theman2003@aol.com	12

Seen as your database connections and how you phrase the code depends on what language you are using I won’t cover that. Chances are you will have some variable such as db = “your SQL commands here”

First of all, you may want to extract all the data. A basic command would be:

SELECT * FROM members

The SQL commands such as SELECT and FROM are always in capitals. SELECT is the first thing you put whenever you are reading or extracting data. It tells you what to take out. For instance you may only want certain columns.

SELECT name FROM members

Or

SELECT name,email FROM members

* tells the script to take all the columns from the database.

FROM tells you what table in the database to take the data from. So for instance if you had a table called “stats” you would use:

SELECT * FROM stats

Next you may want to add conditionals onto the data to only take certain rows:

SELECT * FROM members WHERE name = "Jim Harris"

This would give you the result:

Jim Jim Harris jim@ntlworld.com 24

You can also add several conditional values on:

SELECT * FROM members WHERE username = "jim" and name = "Jim Harris"

That would produce:

Jim Jim Harris jim@ntlworld.com 24

As with most mathematical type equations you don’t have to use the = sign all the time. For instance:

SELECT * FROM members WHERE posts > 10

This would produce

Jim Jim Harris jim@ntlworld.com 24
Happy Simon Gates theman2003@aol.com 12

The guy with the username “mod” would be missed out as his has not made more than 10 posts.

Finally you can also order the rows. For instance if you wanted to order then by the number of posts they made:

SELECT * FROM members ORDER BY posts DESC

This would produce:

Jim Jim Harris jim@ntlworld.com 24
Happy Simon Gates theman2003@aol.com 12
Mod Toby Hunter t.hunter@btopenworld.com 4

By contrast:

SELECT * FROM members ORDER BY posts ASC

Would produce:

Mod Toby Hunter t.hunter@btopenworld.com 4
Happy Simon Gates theman2003@aol.com 12
Jim Jim Harris jim@ntlworld.com 24

ASC sorted them lowest first or alphabetically and DESC sorts them highest first or reverse alphabetically.

Sometimes you want to make an area clickable, say part of an image or you have some animation that you do not want to have to convert to a button. What you need is an invisible one.

First draw a square (or whatever shape you want) onto your page. Double click the shapes border and delete it. You don’t need it and it makes the button look weird when you resize it.

Now convert the box into a button. Once you have done this double click it, and add keyframes for up, over, down and hit like you would any normal button.

Go back to the first 3 stages (up, over, down) and delete anything in these frames. The only thing you should leave is the box in the hit keyframe. Now go back to editing the movie (Ctrl + E).

If it worked the button should now appear as a half tranparent blue box. And if it does you have yourself one invisible button. You can now resize this to any area you want it to cover.

Large movies take a long time to load, especially for users who are not blessed with a high speed broadband connection. Therefore just giving them a screen which says loaded or just giving them nothing at all can leave them a little dazed and wondering what to do. The solution – give them some feedback on what is being loaded.

Movie modifications

The first thing you need to do is have an empty frame at the top. You don’t need anything else – just an empty frame before you content. If it’s easier you could even create a separate scene to house this frame. Make sure it’s a key frame and the next frame where you content begins is a key frame too.

Next create a text box which says loading, or the name of the movie or something similar. This will be our loading object. It should only exist in that first fame. Now with the object selected go to Insert > Convert to Symbol and save it as a movie clip. I recommend the name ‘preloader’ but it has no affect what so ever. It just makes it easier for you to identify it in the library.

The scripting

Now double click on your newly created movie clip and watch it zoom into editing mode. There should currently only be one frame in the timeline now – extend this to three by inserting two new frames. Call this layer text or graphic or something similar. This layer will just remain the normal static text. The scripting will go in a different layer – create a new one for the scripting and make each of the three frames, key frames.

Now we have three key frames in the script layer which we can insert code to. This is expert field so we need expert view on. If you’re not working in expert code view then open the actions panel and click the options view icon. It looks like a little square with an arrow pointing to the top right hand corner. Then click the line which says expert view rather than normal view. This will turn the action scripts window into more of a text editor style window to allow us to insert code.

The first thing we want to do here is to stop the main movie from going any further before it’s loaded. So click on the first frame in the script layer and put the following code in:

_parent.stop();

This tells the main movie to stop. Generally commands like this use the model: object.command. In this example the object is the main movie or _parent as its known and the command is to stop it.

Now click on frame two of the script layer. He we are going to set some variables so we can give the user feedback on how far the movie has loaded so far. We do this by using a few functions built into ActionScript which allow us to get certain values.

kBytesLoaded = getBytesLoaded()/1024;
kBytesTotal = getBytesTotal()/1024;
kBytesRemaining = kBytesTotal - kBytesLoaded;
percentLoaded = 100 * kBytesLoaded / kBytesTotal;
progress = Math.floor(percentLoaded) add "%";

This script works out what has been loaded and how much is to load and then works out the percentage. It’s a great script although I can’t claim responsibility for it. Insert this script into the second frame and that will give us plenty of variables to work with.

Finally click on the third frame in the scripts layer. In here we check to see if the movie has loaded and if it has we send them on their way. If not we continue to loop and give them feedback on what has been loaded so far.

if (percentLoaded < 99){
gotoAndPlay(2);

} else {

_parent.play();
stop();
}

Here you can see if that if less the 99% has loaded then the movie is not fully loaded then the movie clip is sent back to recalculated the variables. If 99% or more has loaded then the movie clip is stopped and the main movie starts again. I use 9% rather than 100% as if there is a little data left which cannot be loaded it will never reach 100% and therefore loop for ever.

Giving feedback

Finally we need to tell the user what is going on. So create a new layer, call it something like feedback. Then insert a text box. This will display the percentage that has been loaded so far. This box needs to be set to dynamic. In Flash MX you can change this in the properties box - look for the drop down menu saying static text and change it to dynamic text.

Also look for the input text box which says var next to it. This stands for variable and will let us make the text box fill with a variable we set. So in the box write:

Progress

This will fill the box with the process variable telling the user what percentage of the movie has loaded. You're done - hit Control + E to return to editing the main movie. You can now export your movie save in the knowledge that users will see how much percentage of the movie has been loaded.

Not all web hosts grant access to web server logs. And even if you do have access to them they may not be that useful. The solution is to write your own script which will log your own stats. And it can all be done without the use of a database. Though databases are great for this not everyone has a spare one so I am going to use nothing more complex than a text file to show the information.

The logging file

The first thing we need is a file to record each hit and log the information in a text file. This is done by creating a function and adding all the variables into it. We can then add information for these variables later in the tutorial.

<?php
function logthis ($sessionid, $pagevisited, $ip, $browser, $refer)
{
$log = fopen("log.txt","a");

$countryfile = fopen("http://ip-to-country.com/gert-country/?ip=$ip&user=guest&password=guest","r");
$country = fgets($countryfile,50);
fclose($countryfile);

This sets up the basic information for the log. I also used a tool which allows you to send an IP address and the site will return the country which that user is from. And therefore we can log which country each visitor comes from.

$now = date("d F Y h:i:s A");

fwrite($log,"$now,$sessionid,$pagevisited,$ip,$country,$browser,$refer\n");
$log = fclose($log);

}

?>

This code writes in the information. Well the top bit gets the date. But the second part at least does the interesting things. All the variables are lined up and the data is separated by comma’s to allow it to be analysed later. There is also the \n to indicate a new line should be gone to after the data is written in.

That is all the code for the logging file. Save it as log.php. We are now done with this file so you can close it down as everything else will be done from the other pages.

Code for the pages

For each of the pages you want to log the stats on you need to insert some code above the <html> tag to allow us to track the visitors to that page. So you will probably want to insert the code into all your pages.

There are two parts to the code that needs to be inserted into your pages. The first includes the log.php file into your page so we have the function. The second gives all the information to be included.

<?php

require 'log.php';
session_start();

logthishit(session_id(), $PHP_SELF, $REMOTE_ADDR, $HTTP_USER_AGENT, $HTTP_REFERER);

?>

After the include line there is a line telling PHP to start a session. Sessions are new to PHP4 and allow each user to be treated individually so you can work out when duplicate users are visiting different pages.

This code can be pasted into all your pages and remain relatively unchanged. The only bit which will need some tinkering with is the path to log.php. So for instance if you had a page in a games folder and log.php was in a folder called stats you would need to change log.php next to require to ../stats/log.php.

A few small tasks

You are almost done! Just a few small things to do and then we are finished. First open up your text editor, Notepad is fine, and save a blank file as log.txt in the same folder as you saved log.php. Once that is done upload the two files and any files which you added the code into to your web space.

It’s best to upload your files to the root directory of your website if you can. You then need to make sure that that text file has read and write properties. It may have already although if it doesn’t or your not sure then make sure by right clicking on it in your FTP client and look for a properties menu or something similar. This is usually how it’s accessed though it may vary depending on your FTP client.

Finally there is one more thing you may want to do. If all your files use .htm or a similar extension and you can only run PHP scripts on .php pages you will have a problem as you may not want to rename all the files. So if you can’t rename the pages and PHP scripts don’t work in .htm pages you need to edit your .htaccess file.

If you don’t already have one then you can copy the following code into a blank text file, save it as .htaccess and upload it to your web space. If you already have one then download the current one and add this code or modify the existing code to look like this.

AddType application/x-httpd-php .php .html .htm

You can add any other extensions you use to the end of these too.

Analysis & Conclusion

Now your server log is complete and the script will begin counting all your visitors and saving them in log.txt. When you want to view the log all you have to do is either point your browser to the file or download it using your FTP client and open it in a text editor.

That is your basic view, however if you would like something more complex then use a spreadsheet application such as Excel. You can open log.txt up in a spreadsheet and it should display fine as we added in the comma’s to separate the data.

You can also use the AutoFilter which can be found in the Tools menu at the top of Excel so you can select one piece of data to filter in the logs such as one users session id or one browser to display all the data from.

Now you not only have great logs but they look shiny too.

So you have your shiny new MySQL database your web host has given you and you are already to begin your PHP scripting. If not then you can get an account with all this from www.tripod.lycos.co.uk. Or you could when I wrote this anyway.

For those of you used to connecting to Microsoft Access Databases, like I am, the difference here is that rather than the database being a normal file like a word document or a music file which can be easily opened, etc, MySQL databases are stored on the server. So rather than connecting to a file you connect to the server.

First I am going to jump straight in to the code and then explain it after.

<?php
$db = mysql_connect("localhost", "username", "password");
mysql_select_db("database",$db);
?>

That is a basic connection. Ignoring the php open and close tags, the second link in the code makes the connection to the database of your choose. In this case it connects to a database simply called “database” so change this to your database name.

The top line tells the script where the database is. In most cases you can leave this as “localhost” as most hosts keep this as standard. If you get told your MySQL host is different though replace localhost with the new address your web host gives you.

Once you have established a connection you can then enter SQL underneath:

<?php
$db = mysql_connect("localhost", "username", "password");
mysql_select_db("database",$db);

$sql="SELECT * FROM members WHERE posts > 10";
$query=mysql_query($sql);
?>

In five lines you have connected to a database and even prepaed some SQL to select a record set from it. That is pretty simple I recon.

Worfolk Desktop News was an application which downloaded the latest news from Worfolk and displayed it in the application. The original application was built in flash and loaded the variables in from a text file stored on the Worfolk servers.

The text file was simple:

news=the news story...

Create a text file like this and upload it somethere, or even just leave it on your hard drive as long as you know the file path. Now to load it into the flash movie you use LoadVariables. Go to the first frame in your movie and go into actionscript. Now add a LoadVariables command and add in the url path or file path to your text file.

Once this is done you have the variables stored in your movie. Next create a text area and set it to dynamic text. Where it says “var” and has a space to enter a name such as “news,” or whatever name you gave your variable in the text file.

Now run your movie. If it worked right the text area should now display the value you have the variable. If you copied my text into your text file you should come out with “the news story…” If its blank you have probably given the wrong url or you have got different names for the variable in your text file then you do in your movie.