Archive for the ‘Programming’ Category

Log your visitors to a text file using PHP

Sunday, September 16th, 2007 | Programming, Tech

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.

Connecting to MySQL in PHP

Sunday, September 16th, 2007 | Programming, Tech

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.

Loading variables into a Flash movie

Sunday, September 16th, 2007 | Programming, Tech

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.

Styling text in CSS

Sunday, September 16th, 2007 | Programming, Tech

You can easily add CSS styles to your text. All you need to do is add a <p> style.

p {color: #000099; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif
}

Now whenever you have text inside the paragragh tag, it will use the above style. You can also add special headings.

p.h {color: #CC0000; font-size: large; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif
}

To use this in your text just add the code:

<p class="h">Some Headline</p>

You need to use CSS Styles for your texr as the W3C are cutting out the <font> tag from XHTML 1.0 Strict upwards. Although you can still use it in XHTML 1.0 Transitional, we think this will not be the case in later versions.

You can also use CSS to change the font of other tags such as your links. These include rollover, hit and visited pages. Take a look at this code that can be copied and pasted staight into your HTML pages.

<Style>
<!-- A {text-decoration: none}
A:hover {text-decoration: underline; color: #0DC450} -->
</Style>

This produces the blue to green underlined rollovers on this page.

CSS in web pages

Sunday, September 16th, 2007 | Programming, Tech

There are 3 ways to add CSS into your web pages:

* External Style Sheets
* Internet Style Sheets
* Style Tags

External Style Sheets

These are style sheets saved as .css. You then link these into your page using the following tag.

<link href="global.css" type="text/css" rel="stylesheet" />

This style sheet is then included in your page when its in the browser.

Internal Style Sheets

This used a style tag, as you may have seen in serveral tutorials. Here is one we have for image rollovers.

<style type="text/css">
<!-- A {text-decoration: none}
A:hover {text-decoration: underline; color: #0DC450} -->
</style>

They are seperate from everything else but are included in the heag tag of your web page.

Style Tags

These are included inside your actual element. For instance if you wanted to change the border, of just one table, you could use the following code:

style='BORDER-BOTTOM: #84B953 1px solid'

This would just be included in the actual tag of your HTML element. Eg:

<table style='BORDER-BOTTOM: #84B953 1px solid'>...</table>

What is CSS?

Sunday, September 16th, 2007 | Programming, Tech

CSS stands for Cascading Style Sheets.

CSS Styles are used to define how to display HTML elements. Styles are normally stored in internet or external style sheets. Styles were added to HTML 4.0 because developers disliked having to define every bit of text using tags like <font>. External CSS files are stored using the .css extention though they can be saved in HTML format. Multiple style definitions will cascade into one,

External style sheets can save you a lot of time, as you can change the look of the page, just by changing the external file. CSS Style Sheets are supported by both Nescape 4.0 and Internet Explorer 4.0.

CSS cascades

You may have multiple style sheets saying different things in your document. In this case they will be ordered in priority as follows:

1) Inline Style Sheets (inside an element)
2) Internal Style Sheets (inside the head tag)
3) External Style Sheets
4) Browser Default

So for instance an inline style tag would overrule and internal style sheet, but a browser default would not overrule an external style sheet.

HTML image tag

Sunday, September 16th, 2007 | Programming, Tech

Images can be embedded in a page using only one tag. There are examples of images on this page – the top header secton contains three images.

The basic syntax is as follows.

<img src="location.gif" width="300" height="100" border="0" alt="Description text">

For a basic image tag all you need is <img src=”location.gif” alt=”description”>. If you do this the image will display at its normal size although it is always a good idea to add a width and height tag.

The alt property defines the text that is displayed when the image is missing, it is displayed where the image should be. An example is shown below.

<img src="fakelocation.gif" width="200" height="100" alt="Here is an example">

Would produce:

Here is an example

To add a link round an image simply do it like a normal hyperlink

<a href="targetpage.html"><img src="location.gif" border="0></a>

Doctype tags in HTML

Sunday, September 16th, 2007 | Programming, Tech

The doctype tag tells the browser what standard the page conforms to. Until now doctypes did not have to be including but with the creation of XHMTL 1.0, they must know be put in. Doctype tags go above your head tag. There are three types of doctype tags. Strict, transitional and frameset.

Strict

Strict is the hardest standard to compy with. If you add a strict doctype to your document, you can’t use deprecated tags, and traditionally a lot of websites have stayed away – but more and more are coming round to the idea of tigher standards.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional

This is the most commonly used doctype as it allows you to keep some of the old tags but still lets you move on to XHTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset

This is for frameset pages (as you have probably guessed).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Basic tags in HTML

Sunday, September 16th, 2007 | Programming, Tech

This page covers the tags you will most commonly use in HTML that are the most basic although it does not cover page structure. See the next page for that.

Paragraphs

This signifies that the text within should be in its own paragraph. There is a break between each paragraph such as the space between the introduction text and this section.

<p>Your text goes here</p>
<p>Putting more text here would create a gap between them</p>

Line breaks

This is where you want to start a new line but do not want a gap in between them.
Such as here. The previous line was not finished but a new one was started. This is a single tag which does not require closing.

Some text here<br />
This text would be on the line below

Comments

If you want to add some notes into your page you can do it using a comment tag. These are good to remind you what every does or where a particular section starts.

<!-- your comment goes here -->

Comments will not display in the browser although if anyone goes through your sourcecode they will be able to see it so do not put private information in there.

Horizontal Lines

With the advent of borders and more color options in HTML, the horizontal line has become less used these days but is still good to easily section off different parts of the page.

<hr />

Headings

Rather than having to change title text with color, size and weight you can simply replace your <p> tags with title tags. There are 6 different titles that are built into HTML.

<h1>Here is a heading</h1>
<h2>Here is a heading</h2>
<h3>Here is a heading</h3>
<h4>Here is a heading</h4>
<h5>Here is a heading</h5>
<h6>Here is a heading</h6>

CSS has made these tags less needed although they are easy to use and help with search engine optimisation. A blank line is also automatically added after a heading.

HTML elements

Sunday, September 16th, 2007 | Programming, Tech

As we have already seen, HTML is made up of elements such as <p> or <br>. HTML elements are surrdouned by < and > characters, which is why if you want to use these in text you must use code.

The first > signifies the start of a tag and the > shows the end. HTML tags are not case sensative so <BR> is the same as <br>. They usually come in pairs although several are just one.

For example:

<u>This text would be underlined</u>

EDIT: Since this article was originally written, the u tag has since been deprecated. Underlining should now be done using CSS instead.

You have the opening tag <u> which starts the underlining, the content which is the text saying “this text would be underlined” and the closing tag </b>. It would produce:

This text would be underlined

HTML tags should be layered inside each other, for example:

<p><u>This is correct</u></p>

Whereas:

<p><u>This is not correct</p></u>

Sometimes you do not have a closing tag you only have a single tag such as is the case with horizontal lines:

<hr />

Would produce:


There is no need for a closing tag.