SK Herdersem football website, the story

SK Herdersem is a team from the 4th (lowest) regional division in East-Flanders of the Belgian Football Federation. 11 seasons ago I got involved with the team when my eldest son (then 6 years old) wanted to play football. Last Saturday, 5 January 2008, he played his first match for the Reserven-team. 5 years ago my youngest son also started to play football with them. He is currently a Preminiem -10.

2 seasons ago I builded my first website for them. It was a static site since my employer then wouldn't let me run a Smalltalk Webserve on their machines. At that time I was a representative of the Knapen team and with the trainer I wanted a quick overview of the results of all the team in our competition. My original idea was to create a spreadsheet but this wasn't a good solutions because there were some problems:

Not every user has a spreadsheet program installed or knows how to use it;
Keeping all results up to date isn't a simple task. Entering the results each week is not hard but sometimes the results of a few weeks ago is changed because of some procedures (passports not ok, fighting, etc...) and it's hard to check all results each week.

So I had to find a way to automate all this. It appeared that the Belgian Football Federation had a webpage http://www.footbel.com/nl/Competitites/downloads.html where you could download a zipped csv file with the calendar and results of all competition games for a region. So I decided to create a database, some VisualWorks programs to import the data from www.footbel.com, to edit some data manually and to create the static pages.This worked well but it wasn't really what I wanted to do. In 2007 I finally found some time to create a real dynamic website and experiment with some things I never worked with before.

The current website has 6 main parts, 4 are visual, the other 2 are hidden and only for administration :

Algemeen : this involves the entire club.
- The first page has the last result of each team of the club.
- - 1e ploeg = First team
  - Reserven = Reserve team (mostly substitutes for the first team)
  - Scholieren = Players from 14-16 years
  - Knapen = Players from 12-14 years
  - Miniemen = Players from 10-12 years
  - Preminiemen -10 = Players who where not 10 years on 1 January 2007
  - Preminiemen -9 = Players who where not 9 years on 1 January 2007
  - Duiveltjes -8 = Players who where not 8 years on 1 January 2007
  - Duiveltjes -7 = ...
  - Duiveltjes -6 = ...

From Miniemen up there is a regular competition. They play 11 against 11 on a full field and the results are gathered and logged by the Football Federation. Preminiemen play 8 against 8 and they play from side line to side line on one half of the field. They have a competition but results are not logged by the Federation. If I get have a result I enter it manually. Duiveltjes play 5 against 5 on one quarter of a field and as the Preminiemen they have no competition.

The second part of the first screen has some newsitems that are of interest for the whole club.

The second page 'Agenda' has two tabs. The first 'Agenda' is an iframe of the referee assignment of the Federation. It contains the exact date, hour and location of the next matches of all teams of a club. This page is updated daily. The second tab 'Afgelastingen' is another iframe from the Federation and contains cancelations because of weather conditions. The frequency of updating this page is weather depending.
The third page 'Foto's' is a linking page to photo's from the teams. Most picture are taken by myself but if people give me their photo's I'll publish them. I don't want to limit my disk space because of the pictures, so I placed them on an external server. If I ever find budget for a new server I'll probably bring it into Aida.
The 'Contact' page has some info on address, registration number, a map with the location of the 2 fields and an entry form to keep updated on website changes.

Teams: I already described the difference between the teams. Each team has a page with 7 tabs:
- 'Resultaten' has the results of a team and a calendar of the future games of the team. There can be 3 types of games:
  - Competitie = Competition
  - Vriendschappelijk = Friendly game
  - Tornooi = Tournement
- 'Stand' is the table that shows the current ranking. If you click on a team in the table you get another page, but this is discussed later. The columns in the table are:
  - Gesp = Games played
  - Win = Number of winning games
  - Ver = Number of lost games
  - Gel = Number of draws
  - Sco = Number of goals scored
  - Teg = Number of goals against
  - Sal = Sco - Teg
  - Ptn = Number of points
- 'Nieuws' can contain information that is specific for a team. In many cases this page is empty right now but I hope to involve more people into the site and have more newsitems available.
- 'Matrix' is a table that shows all results of each team. The rows are the home teams and the columns are the away teams. In the intersection is the result of the game. If the game still has to be played you see the date that they will play against each other. AF means that the team has withdrawn from the competition.
- 'Training' tells you on which days and what hour that team normally has his training practices.
- 'Grafiek' is some experimenting with the EyeSee packages from the public Cincom Repository. The first graph shows the goals scored in yellow and the goals they got against in blue. The second graph shows the goals scored by each team in the competition. Teams of SK Herdersem are in yellow the others are blue. I create the graphs in EyeSee and save the graph in a png file with a fixed name. The class that generated the graph has an instance variable graphSource. I assign the source code of the png file into that instance variable with the instruction 'graphfile' asFilename contentsAsMethod. On WebImage I've made an additional creation method png:on: with the following code:

png: aSymbol on: anObject
    "this method will be called in your webStyle and this method
    should return a png in byte array format"
    | methodImage image |
    image := self new.
    methodImage := WebMethodImage
        fromMethod: aSymbol
        on: anObject
        contentType: 'image/png'
        site: image site.
    ^image image: methodImage

I then call WebImage png: #graphSource on: (GraphObject createScoredGoalsForTeam: aTeam). This will be quicker if I don't save the graph and immediatly save the graphSource from EyeSee but this is one of the things on my to do list.

- 'Info' is an empty page for now. I wanted to put a picture there of the team but it's probably sometime for the future.

Third part is 'Archief'. This a link to the site of the previous years. Right now this is not working but I just learned this should be possible with Swazoo so I'll have to copy the old pages from my old server to my new one and this should be working.
If you are on a 'Stand' or 'Matrix' page and you click on one of the teams then you get some info on that team. Here you have 4 tabs:
- Info : this has the address, registration number and colors of the club. There can also be a link to the website of that team if I have the required info.
- Uitslagen: These are the results of that team. Probably I'll show a calendar in the future since I have the info it's not that much work.
- Grafiek: is the same as the first graph for our own teams.
- Kaart has info on the location of the terrain of that team (address, phone, etc...) It also shows the roadmap from the terrains of SK Herdersem to that team.
Import: I delete all competion games from 1e Ploeg, Reserven, Scholieren, Knapen and Miniemen from the database. Results of games may change because of complaints for irregularities. Finding the correct game to update is probably more work than simply deleting everything and recreating it afterwards. I Read the zip file from the footbel site. Extracts the zip file by using the winzip command prompt. I couldn't make this work with the VW zip libraries, so I used the one from winzip. I then process the entire CSV file. This whole process takes about 15 minutes and the import is mostly done on Thursday evening or on Friday. It takes that long for the federation to create the file.
Email : On the 'Contact' page users can give their email to be warned about updates on the site. This is currently still triggered manually but it's one of my to do's to do it periodically.

The whole site is made with ObjectStudio 8 (this is the one that uses the VisualWorks VM), Aida/Web and Swazoo. The database I used is a PostgreSql and it all runs on an old Windows XP machine that none of my kids wanted. The PC also runs my email server and my other website www.verleysen.net.

Dirk Verleysen