A modern webshop is built on two parts, a database like MySQL containing data about the products offered on the shop and a webshop built with a web scripting language for example PHP or ASP.

Let’s begin with the database. In this simple example we only have a couple of tables.

Products is the table containing the different products offered in the store. Each product has its own row in the table. Customers is the table containing information about the customer that is needed to be filled in before ordering is possible.

The shop consists of a single page listing the products from the database. When a customer click on one of the products he is forwarded to a page showing the content of his cart and at the same time he added the product he clicked on to the cart.

What happened here is that each product from the database is listed with its unique ID on the shop page. When a product is clicked, the ID of the clicked product is sent to the page showing the content of the cart. The ID of the product that was clicked is then added to a session variable.

It is possible to send values to another page by hidden forms, however a session can also hold multiple values if defined as an array. So if the visitor to the webshop decides to add another product to his cart the session variable holding the previous product will grow and hold two ID numbers, the numbers of the products the visitor clicked on.

By listing every value that the session array contains it is possible to build a database query that can fetch data from the database about the chosen products, and that is how the cart page is built. If the session array is empty we simply inform the visitor that his shopping cart has no products in it.

So what happens then?

When the customer is happy with the products chosen he can then decide to register details about him in a simple form and then he submits his order by clicking on a submit button. Usually an email is directly sent out to the customer containing information about what products where ordered, how much the total sum of purchased products are and contact information.

There are off course many other possible solutions to designing a webshop and this is only a simple tutorial to give ideas of how a webshop could be built.

I should also mention that there is quite a lot of open-source webshop projects around that are very capable and updated constantly so generally it is not needed to invest time in creating a personal webshop system.

In the early days of the web there where no easy way of controlling the layout of a page because there where no way of doing that. You could have text on a page, have line breaks and some images but that was it. Sometimes those early pages can be simple and very relaxing to view since most web sites of today are so dramatically different than those simpler pages.

When tables where introduced in HTML they where originally intended to be used when making visible tables on the web (think Excel spreadsheets), as its name implies. But web designers soon became very creative when they found out that by setting the border of the table tag to zero, the table became invincible. By adding columns or rows and declaring how text or images should be positioned in them they suddenly had a rudimentary way of controlling layout.

This became even more important when an image was cut up in small parts and put into a larger table where every cell of the table corresponded to a part of the image.

By using a border less table it was suddenly possible to do proper design on the style of a homepage. By time several problems appeared.

Tables was never meant to be used as design elements

Using tables heavily can increase the size of the page dramatically

Tables are sometimes used inside other tables, this can lead to incredibly complex code that is impossible to understand

But tables did have positive things about them to!

It was very fast to whip up a quick site in Dreamweaver in tables that would look reasonable good in most browsers

Tables where easy to learn

The first example shows you a table in HTML that contains a header, a left column, a right column and a footer. The width is limited to 640 and the height is adjusted to the content. Take note that the table is not invicible.

In the second example the table is filled with text. As you can see, it is the structure of most modern sites.

Welcome to my HTML and TABLE site

Meny1

Meny2

Meny3

Meny4

Meny5

This is my content, this is the area where the content will be added and where you will learn everything there is about TABLEs and HTML

This is the area where ads will be placed at

This is my footer with my copyright and contact me link

I suggest using Dreamweaver to make a table based layout. Try to do the table I did here, it is the easiest and fastest way of learning how to do table based web sites.

Thanks for reading and check back soon for more web-related tutorials.

Sometimes you need to convert a site from ASP to PHP. This is a quick way of accomplishing that task that I have used a lot in the past.

1. Get a good text editor

Open every ASP file in an advanced text editor, for example Notepad++.

2. Search and replace ASP and PHP

Do a search and replace where you replace every instance of “.asp” with “.php” in every file. Take note that if you have a lot of ASP tutorials written for your site that text will be replaced to if you have any “.asp” there so it is best to do this by hand in files you are unsure of.

3. Include files

Most modern sites are built with include files. ASP and PHP has different syntax for including files so do a search and replace for every include tag you have but replace it with the PHP variant of the include file.

4. Go to 2

Do step 2 but this time on included files, often include files are put in a sub directory called “/includes”.

5. Change the filetype to PHP

Change the file ending of every ASP file to PHP. For example, change “index.asp” to “index.php”. There are many free tools available to do this task automatically for you.

Now your site should have been converted to PHP. Keep in mind that scripts written in ASP will not function. By having ASP code in external includes files it is easy to replace them in the future. This example works with a static site, changing a dynamic database driven site from ASP to PHP is more advanced but should be possible to do after some analyzing.

There were many guides going through the various steps and techniques on how to edit images for the web and different obscure HTML-tags never used in real life. But these guides did never teach us anything on how to structure a professional site.

This was an awkward situation since we wanted learn have to structure our sites like the big boys did. Many years later I realized that during the 90′ies the web industry was a huge mess with no clear rules so everybody came up with solutions that worked for them self.

Through experience and routine I have come up with what I think works best.

Pictures

Location: /img

Pictures should be placed in a folder called “img” in the web-server root.

Location: /img/base

Pictures that are used for the layout or template should be put in a sub folder of “/img” called “base”. These pictures are placed in their own folder since they are only used once in the beginning when the site is designed and converted to HTML.

Location: /img/portrait

Some part of the website may have a contact page dedicated to the co-workers. It is a good idea to put these portrait files in a sub folder called “portraits” under “/img”. It is very convenient to have a group of similar pictures in its own folder, especially if a picture is updated, you do not have to go through a huge folder with various images. We think it is unnecessary to do a unique folder for every page of the site but if a single page have lots of images it might be a good idea as shown above.

A big complex site may need many sub folders for images, a simpler less complex site may not need any sub folders for pictures.

HTML/ASP/PHP-files

Location: /

I have seen many examples of different page structures. The only variant we have been using is the one where we put every HTML-file (which is not “include” files) in the root of the web server. The different HTML pages are named after what they are about, so if there is a “About us” page that page will be called “about-us.php” or “about-ut.htm”. Naming pages like this will also help you out when you optimize your pages for search engines.

CSS

Location: /css

CSS files are put in the folder “css”. It is possible to run more than one stylesheet for a site and then it can be very convenient to have them put under a single folder.

Flash

Location: /flash

Flash files are put in the folder called “flash”. This is when we use a Flash-animation as a part of a HTML-layout and not if we would have developed a complete Flash site.

Includes

Location: /includes

Include files are put in the folder called “includes”. Include files can easily swell in size and having them in a separate folder is a real boon then.

Other things to keep in mind

Some web servers do not care if a file name is in upper or lower case but take for granted always to name files in lower case. Having all your files in lower case can save lots of work in the future.

MS-DOS had a serious file name limitation where it only allowed the user to name files with ten letters. MS-DOS is obscure nowadays so do not keep the old habit of trying to short cut every name of a file. What is easier to read: “links-two-our-customers.htm” or “lnks_cmr.htm ?

Spaces in filenames should be avoided. Replace the space with a “-” instead.

I think it is silly to sell this information because SEO is not difficult at all. SEO (stands for Search Engine Optimization) and is very useful to know about. To take this extreme course you will need basic HTML knowledge.

If you do not have 5 minutes to spare then take the 5 second course at the bottom of the page.

1.     Good content is good

A good article has a better chance of getting linked from another site. A good article should have around 5-700 words and should have a keyword count of 3 to 7 %.

2.     Incoming links are good

At the moment everyone in the SEO business focuses mostly on getting top 10 positions on Google, simply because Google own the search engine market right now. Google has an algorithm that calculates in what position a page should end up when a user do a search. Nobody outside of Google know the current algorithm in detail but it is well known that incoming links from high status sites (sites with good pagerank, 4-9) is very important in getting good rankings on Google for a site.

3.     Get good incoming links

A good incoming link should for example come from a page that is in the same type of interest as you page is, it should have a pagerank that is better than yours and the link should preferably be a traditional text link with a short sentence about the page the link leads to. So if you sell used cars on the page you want to boost, the incoming link should be named something like “Buy used cars..”.

4.     The little things…

You must not forget about the little things. Every page should have a header with the keyword of that page in it, the header should be in the H1 tag. The keyword should appear in bold and/or italics one time in the page. Another H2 tag with the keyword is good. Put meta and description in header, do not run the same meta and description for every page. If you can, you should rename the filename for the page with the keyword for the page. Create a sitemap and a contact page with contact information on your site. Randomize everything, do not always follow every SEO tip for every page, and make pages look man-made and not machine made.

5.     Repeat

Create new articles, add them to your sitemap and create a blog post about new articles added. Ping your blog out so Google indexes your new page fast. Do not expect incoming links to come by itself, getting incoming links for your site can be both a manual and an automatic task. If your content is good a link to the article (and your site) will spread itself through hundreds of blogs. Otherwise contacting webmasters on sites in the same interest field as yours can produce good incoming links.

5 second course in SEO

Try to get a lot of incoming links from quality sites to your site and/or individual pages of your site

I was slightly wrong because I could not find a good module to download from www.drupal.org. So I decided to analyze the database to see how the data was structured and to see if it was possible to create a custom PHP snippet that would provide a visitor a page where he makes a detailed search of members of a site.

The first thing I did was to see if I could run MySQL queries straight from a node in Drupal. I made a test node and pasted a short MySQL query embedded in PHP printing out the name of all the users registered from the database and I was happy to get a short list of all four users currently signed up on my test site.

select name from users

This was a really simple query.

Then I had to find out how Drupal stores profile fields. There are two tables of importance here, first “profile_fields” which holds the name and ID of all profile fields. The second field is the “profile_values” which holds all data from the fields in the profile that users have submitted.

Data in the “profile_values” table is stored in the “value” column, the column “fid” points to the ID of the field. The column “uid” points to the ID of the user in the “users” table.

So it was fairly clear to see the relationship between all the tables, however making an actual search form seemed to be a bit more advanced. I know that you could probably run some really fancy left, right and upper join to get the search info, but I have never been that good at complicated joins in SQL and the clock was ticking.

Programming is breaking down a problem into many smaller problems and solving them one after another.

The first part was making a small standard search form that listed two fields from the “profile_values” table in two separate drop down lists. This turned out to be a no brainer. I added a new column to the “profile_values” table called “search”, then I flagged all the rows holding interesting profile values to be searched with a “1″, for example age and hair color. In order to fill the drop down list with options to be chosen you need to use the PHP function “explode” on the data that is stored in the “options” column in “profile_fields”.

Anyone working with dynamic websites such as Drupal should be able to know how to pass values around pages, so if one option in a drop down list is “30″ it is fairly easy to do a query in the database on the “profile_values” table for all rows that hold “30″ for the “fid” of 4 (in this example the profile field “Age” has a “fid” of 4).

select * from profile_values where value=’30′

That is still basic query stuff over there. Nothing advanced at all.

So when I run this query I also stuff the output into an array. Say a user wants to search for all users who are 30 years old and who lives in Stockholm. That would produce two queries, one like above, and the next almost the same “value=’Stockholm’. If you stuff the output from these queries into two different arrays you can then compare these and find similarities. The output you want to input into the array is the “uid” from the “profile_values” table where a match has occurred.

In the example above I named one array $uid_age and the other $uid_city.

Alright, we now have two arrays containing the matches, the first array contains every member ID that is 30 years old, and the second array holds every member ID who lives in Stockholm.

We are interested in the members who are both 30 years old and lives in Stockholm so we need to compare both arrays to find the “UID”, member ID:s, that are the same in both arrays.

The PHP function array_intersect does that nicely.

$result = (array_interserc($uid_age,$uid_city))

The above PHP snippet gives us an array called $result that holds the matches of member ID:s from both arrays who are 30 years old and who lives in Stockholm.

With this data in an array it is possible to further make a query that fetches the thumbnail image of the user and prints it out row by row column by column.

Hopefully someone will make a good profile field searcher module for Drupal in the future, until then, you will need to create your own. I hope you got inspiration and guidance from this short article.

I download quite a lot of files through P2P networks and unpacking archives and renaming files takes a lot of time out of my free time in the evenings/weekends.

So what if you could automate the process of unpacking downloaded archives, renaming files, moving files, putting files in ready to burn folders with the maximum size of 4.5 GB and creating the file list automatically. Sounds like a dream?

Not at all, its reality (almost).

Anyway the almost finished prototype was run yesterday and it was successful in renaming a directory with 44 GB of files in various subdirectories. The process took about 1 second thanks to PHP, if I would do that manually it would easily have taken me 20 minutes.

I thought I would walk you through the process.

A directory is scanned, say “/movies”.

Most movies are released accord to “scene”-standards. Say it is a DivX movie, there are then two folders called “CD1″ and “CD2″ in the individual movie directory.

movie/latest.movie.divx.screener.omg.wtf.lol/CD1

movie/latest.movie.divx.screener.omg.wtf.lol/CD2

Each archive contains a set of RAR packed files. Unpack these files and you might get two “AVI”-files in each “CD” directory. These files may be called something like “prd-bfma.omg.wtf.lol.avi” and “prd-bfmb.omg.wtf.lol.avi”.

movie/latest.movie.divx.screener.omg.wtf.lol/CD1/prd-bfma.avi

movie/latest.movie.divx.screener.omg.wtf.lol/CD2/prd-bfmb.avi

Directories

The first task is renaming the directory. Take a look at the name of the directory of the movie again:

latest.movie.divx.screener.omg.wtf.lol

By analyzing lots of names of scene released movies I found out that the first part of the directory name was always the name of the move, this is the part we want to keep.

So how do you know what to chop of the name?

By analyzing lots of “scene”-releases I could build a small database of words that indicate the beginning part of the directory name we did not want to keep.

Check out these examples:

lord.of.da.rings.screener.we.are.a.cool.rlz.group.lol

terminater.4.divx.dmning.2007.da.bst.rlz.group.omg

wargamez.vcd.complete.repack.rofl

The names are fictional (maybe you noticed that). Anyway, in example one “.screener” is the word that indicates where the nonsense in the directory name begins. In the second example “.divx” is the word that indicates where nonsense text begins. In example three “.vcd” is the indicator for where the text begins we do not want to keep.

So the database of words we want to erase now contains:

.screener

.divx

.vcd

Everytime one of the words is found in a directory name, that directory name gets chopped keeping everything to the left of the word we did not want to keep. I put this process in a loop that goes round and round until no words are detected anymore

So…

lord.of.da.rings.screener.we.are.a.cool.rlz.group.lol -> lord.of.da.rings

terminater.4.divx.dmning.2007.da.bst.rlz.group.omg -> terminater.4

wargamez.vcd.complete.repack.rofl -> wargamez

Directories are now renamed but personally I do not like punctuation in filenames and directories. So I put the array of directory names in another loop and replace every instance of “.” with ” “, result: no punctuations in filenames anymore.

lord.of.da.rings -> lord of da rings

terminater.4 -> terminater 4

wargamez -> wargamez

Files

Lets assume that RAR-archives are already unpacked (there are some RAR-unpackers available that can monitor a directory and automatically unpack files).

So in every movie directory there is a CD1 and CD2 (and CD3, CD4 if there are more than two AVI-files).

For example

movie/ terminater 4/CD1/prd-trmora.avi

movie/ terminater 4/CD2/prd-trmorb.avi

However my RAR-unpacker puts the files like the example below since I do not like files of a release in different sub folders, instead every AVI-file is put directly in the movie folder…

movie/ terminater 4/prd-trmora.avi

movie/ terminater 4/prd-trmorb.avi

See the above example, the directory name is right, that is the way we want filenames to be renamed. By analyzing filenames of movies I found out that if there are more than one AVI-file the last character of the filename before the punctuation is always “a” for CD1, “b” for CD2 etc.

So the first task is to determine which file is CD1 and which file is CD2.

prd-trmora.avi -> prd-trmora -> a -> CD1 ->  terminater 4 CD1 -> terminater 4 CD1.avi

prd-trmorb.avi -> prd-trmorb -> b -> CD2 -> terminater 4 CD2 -> terminater 4 CD2.avi

Check out the flow of the above example. First I stripped out the last four characters (.avi), then I got the last character of the filename (either a or b), then I put that character in an “if else” string to decide which one is CD1 and CD2. Then I built a string out of the name of the directory (terminater 4) + the CD type (CD1 or CD2) + the filetype “.avi”. Finally a quick rename function which renames old string to new string and the filenames are automatically renamed.

Covers and cleaning up

Do not forget that there is two more folders in the movie directory. One is the “sample” directory. This one we can delete because we do not need a sample of the movie when the movie is already downloaded.

Sample

So..

movie/ terminater 4/sample

contains…

movie/ terminater 4/sample/prd.trmor-sample.avi

But we do not need it so we delete this directory and all content in it…

movie/ terminater 4/

Covers

How about covers?

Covers usually resides in the “covers” directory like so..

movie/ terminater 4/covers

The “cover” directory usually contains two files called something like this..

movie/ terminater 4/covers/prd-trmorb.jpg

movie/ terminater 4/covers/prd-trmorf.jpg

Some people like to keep covers, if you have a HTPC usually you can automatically show the picture of files you browse in your movie directory.  I do not have a HTPC but I still like to keep covers.

The first thing to do is to determine which jpg file is front and which is back. That one is very easy to figure out because the first letter before the punctuation in the filename is either “b” or “f”. “b” is back and “f” is front. Renaming these files is a piece of cake then.

Improvements

Currently I have the basic renaming engine up and running. It is coded in PHP and is controlled through a browser. One thing I would really like to do is incorporate automatic file list creator which put in name of the movie in a database so I can keep track of files I already have.

I am also brainstorming about the possibilities of letting a PHP-script take care of moving each file in folders with the maximum size of 4.5-4.6 GB in order to erase yet another tedious manual step.

A final though I had was to build a kind of scraper, a script that automatically every day download relevant .torrent files from a tracker page and puts them in a Bit torrent client. The downloaded .torrent files are compared to files already downloaded through a database. The Bit torrent client then downloads not downloaded files which the RAR-unpacker automatically unpacks when the download finishes. Once the files are unpacked my automatic rename PHP script is run which renames files and put them in directories ready to burn at the same time as the databases are updated with the new entries. The possibilities are endless.

My initial thought was to combine OSCommerce, an open source web shop written in PHP/MySQL, with the rest of the site. OSCommerce is well known and well documented and is relatively easy to modify if you know your way around PHP code and SQL tables.

I thought this was going to be an easy project but right from the start I found out that converting OSCommerce to work according to the specified design was going to be a lot tougher than first expected.

Typically I would not want to build a web shop from scratch but in this case the shop part of the site was very streamlined and adapted to just this site so it became a major hassle trying to use the code of OSCommerce. The shop was designed as a grid that lead into smaller grid of clickable spots, no scrolling was allowed so content had to fit the screen every time and larger pages had to be split up into smaller ones. Previously I had already made a web shop from scratch, although slightly more advanced than the one I made for this project, so I had some former experience on the subject.

A very basic web shop tutorial

One of the first things we learned in computer science was to break down a problem and write a solution in our own logical words. This tutorial is not going to focus on actual code or even an example because it is better to come up with workable solutions to problems yourself.

A web shop is an online store where visitors of a page can add products to a virtual cart and then order them.

A modern web shop is built on two parts, a database like MySQL containing data about the products offered on the shop and a web shop built with a web scripting language for example PHP or dot net.

Let’s begin with the database. In this simple example we only have a couple of tables.

“Products” is the table containing the different products offered in the store. Each product has its own row in the table. “Customers” is the table containing information about the customer that is needed to be filled in by a customer before ordering is possible.

This fictional web shop consists of a single page listing the products from the database. When a customer click on one of the products he is forwarded to a page showing the content of his cart and also the product that was clicked since it was added to the cart.

What happened here is that each product from the database is listed with its unique ID on the shop page. When a product is clicked, the ID of the clicked product is sent to the page showing the content of the cart. The ID of the product that was clicked is then added to a session variable.

A session variable holds information (a variable) tied to a user and will not disappear unless the user empties the product from his cart or visits another page or closes the browser.

It is possible to send values to another page by hidden forms, however a session can also hold multiple values if defined as an array. So if the visitor to the web shop decides to add another product to his cart the session variable holding the previous product will grow and hold two ID numbers, the numbers of the products the visitor clicked on.

By listing every value that the session array contains it is possible to build a database query that can fetch data from the database about the chosen products, and that is how the cart page is built. If the session array is empty we simply inform the visitor that his shopping cart has no products in it.

So what happens then?

When the customer is happy with the products chosen he can then decide to register details about him in a simple form and then he submits his order by clicking on a submit button. Usually an email is directly sent out to the customer containing information about what products where ordered, how much the total sum of purchased products are and contact information.

There are off course many other possible solutions to designing a web shop and this is only a very simple introduction tutorial to give ideas of how a web shop could be built.

I should also mention that there is quite a lot of open-source web shop projects around as mentioned above that are very capable and updated constantly so generally it is not needed to invest time in creating a personal web shop system. But in special occasions like in the project described above it could be good to know the inner structure of such a system.

The browser for the PSP is very capable, a surprising amount of websites work very good with the PSP browser and browsing forums and normal day to day sites generally works good. Many sites with heavy data will show an error on the PSP since memory is limited and the PSP can not swap out to the memory stick. Also in today’s world dominated by Internet Explorer, some sites will render wrong in the PSP browser. But that is to be expected since Internet Explorer is the defacto browser of today.

A tedious task with the PSP is to type in web addresses because letters have to be typed in with the keypad on a virtual keyboard. The solution to this problem is to make a startup page which contains all your favorite links in order to reduce the amount of links to be typed in.

About the PSP screen, from a viewpoint of a web designer

The PSP is well known for its amazing widescreen display. The display has a resolution of 480×272 which is a lot smaller than standard VGA resolutions but larger than typical cell phone displays. A dedicated site for a PSP should not be wider than 480 pixels but can be taller than 272 pixels.

Just for facts, 800×600 or 779×570 used to be the resolution your site should have around the millennium. Today most computers ship with displays of higher quality so 480×272 is tiny in comparison with typical computer screens.

A web designer’s view on the page styles of PSP sites

A site for the PSP can be made in two ways, either it is made up of different screens with the resolution 480×272 (no scrolling) or it is made up of a taller page that scrolls vertically. We prefer to make a site for PSP with different screens, or cards as we like to call them (web designers who have done WAP sites will remember calling pages “cards”). Every page or card sans the start page should have a home link for the start page, a forward link for the next card and a backwards link for the previous card.

Make a startup page for your PSP in 5 easy steps:

1.     Start your favorite WYSIWYG design package or notepad and create a table that is 480 pixels wide and 272 pixels tall.

2.     Place your content inside the table you just created and be sure that the width of the table does not increase.

3.     Add the following code in the header of your HTML file. You need to set the margin and padding to zero otherwise the table will not be perfectly centered in your PSP browser.

<style>
body {
margin: 0;
padding: 0;
}
</style>

4.     Upload the HTML file to your web server of choice. Many ISP’s give you some free space where you can put up your personal homepage. Your PSP page will work perfectly from there.

5.     Configure your PSP browser to open your page as the startup page. Now you have easy access to your favorite websites.

Improvements

You can add a clock with JavaScript to your startup page. You can make a very advanced looking page, you do not need to make a basic looking site just because it is designed for the PSP so go crazy with some nice background effects made in Photoshop. Test size is very important considering the screen for the PSP is smaller than normal, try to experiment with different size fonts to find the one that works best for your site.

With that said when you try to please everyone things can become quite large and complex which anyone will notice who begins to customize Drupal beyond adding modules.

So I have actually been thinking of finishing my half finished CMS I made back in the summer of 2006.

I have been thinking of including:

Ad rotation – so ads show up in random pre specified places on the template.
Large, content rich footer – modern footers are more complex than your typical one line of the obligatory email address, copyright notice and year. I want to be able to show the last few posts on the site, the last comments, the most viewed articles at the moment and also ads – and that is just the beginning.
Faster page loads – You can tweak Drupal to be faster, no matter how much I tweak I still think a homemade system will be faster.
More control of page/content – Well this is self explanatory. It is obvious that you will get more control with a system you have coded yourself.

There are actually good things with Drupal to.

For example there is a specific sitemap module that automatically builds a sitemap.xml file in your site root when you add articles. I noticed almost instantly how much faster Googlebot visited my pages after having installed that module. However you could actually code a similar function yourself but as always it is a matter of time versus money.