Building a functioning mini website with dynamic contactlist

A beginner tutorial describing from beginning to end how to set up a three page website with a dynamic contact list combined with a detail page, the finished project is included for study.
This tutorial covers: Defining the site, building a page and copying it, setting up a quick Database, creating the connection, using the dynamic data and creating a detail page in full detail, no live objects here.

This tutorial is compatible with Dreamweaver MX, in MX the databindings panel is upgraded to what is now the Application panel.

Building a basic site with Contact page

Part 4:Building a detail page

Copying another page and adding Dbase fields:
Open up your About page and do again a "save as" command, save it as details.asp and clear out all text in the center cell so that it's empty and ready for table insertion...
Make the about link into a link, by selecting the <li> tag again and using the folder to locate it's page and save again. Now open up your database again and click once on the table name, what info do we want to add ? it's a company contact list, so add these...

PhoneNR
BuildingCode
FloorNR
RoomNR

feel free to add more of you like, but i keep it like that, it's sufficient for this tutorial, click close ( X ) and add some more data into it, like so:

Copying Queries and making the list tell our detailpage what to display:
Open the contact.asp page, move the pointer to the Data Bindings panel and use the small arrow in the top right of the window (next to the help button) to copy your query !
Click on the Dynamic name value in our repeated contact list, switch back in the data bindings window to server behavior mode and + a goto detail page behavior, you could also apply this to last name if you want, you can even apply it to the position value so you could make a detail page for that position in the company, what it does, if there are vacancies in your company for it, much fun to be had with one entry being dynamically redirected in so many directions, but if you loose track of how it works then as designer you have a "small" problem on your hands.

This is something to REALLY pay attention to, if you start using dynamic links to static pages or other dynamic pages and you ever want to delete them, then check the page you're about to delete, make sure all links pointing to it are removed from the database, UDev may have this cool function to adjust links accordingly in all STATIC pages if you delete or rename a page, but this is not static and UDev doesn't keep track of these links, how can it ? it is not in your site folder so it doesn't even know it's there. So remember to keep track of your pages that end with a ?id=value parameter(or any other url parameter). You could find yourself on the receiving end of many dead link reports. But as webdesigners we encounter plenty of problems and as usual we will solve that one too, just set some rules for the site and everyone working on it has to obey them then everything will be cool.

We added this to our first name value and that brought up a screen, which is almost self explainatory (i bet i miss-spelled that), the link value is our first name, the item that triggers the server to build us a new page and send it to us, the page in question is called details.asp, so set the Detail page as that destination, the parameter or value we want to pass to that page's Record Query is the Id of our employee, so we Pass the Name of the Field to retrieve and with the two menu's we select which recordset and which column it has to get the value from, clicking on my name in the list would pass a parameter Id=1, in our browser's adress that becomes ...domain/details.asp?Id=1, with the two checkboxes at the bottom we could pass allready exisiting parameters that the server gave us from earlier pages, like this ?UserGrp=UDev&UserId=3000 or something, that would tell a page to look in both table UserGrp, probably a big site, and in UserId, but you didn't need me to tell you that. After changing the settings to resemble the image below click on ok.

Ok, let's get busy, save our changes and open the detail page, using the copied recordset from our list page (this page can be duplicated easily using live object master + detail page, our contact list is basically a master list, i just never use live objects). Now we have the recordset, we have to filter one employee out of there. The page is receiving a parameter allready, we just need to adjust the query, tell it what specific data we want. Double click on the Query in the Data bindings window and look at what we want to change in this data request command.

I allready mentioned we have to filter one specific Id out that is passed through the URL parameter, so let's look at the filter at the bottom, set it to url parameter like in this picture, you can turn the Sort off if you like, i did, no unnecessary actions, it might break you up on the long run as your site grows and demands more from your server(s).

So, your query is looking like that now, with the filter anyway, i think up the weirdest connection names for some reason...Let's ok it and display our details :-)

We cleared out all text earlier from the center so click in it and do another table insert or CTRL + ALT + T, i gave mine 4 columns and 100% width with the same 5 cellpadding, so it hooks in nicely with the rest of the table.
In the first column i bound from top to bottom: FirstName, Department, PhoneNR, EmailAdress, in the second column i did LastName in the cell behind FirstName, the top one, the last column is from top to bottom, Position, BuildingCode, FloorNR, RoomNR.

here's my endresult:

I hope you found this tutorial usefull, i know sometimes i get a bit off topic, but i try to be as detailed as i can, i saw some tutorials around that don't teach, they show you and you don't understand anythink about their actions that they made you repeat, in my opinion a tutorial is to learn from, not to reproduce and still don't understand.

If mine still leaves questions then please mail me at djvgalen@wanadoo.nl

And for later, happy developing.

Download my finished version

Dennis van Galen

Dennis van GalenDennis started his career as order picker in warehouses. In the past 10 years he did alot of data-entry work for Government agencies and around the age of 20 he helped clean the KPN Telecom customer databases. At the age of 27 Dennis returned to KPN Telecom where he was a full time webmaster / webdeveloper. In his spare time he used to be a voluntary Manager for DMXzone.com. After leaving KPN in 2012 Dennis worked for Tevreden.nl on webbased customer satisfaction platforms.

In the past 12 years Dennis became experienced with various webtools, web-languages and database systems.

See All Postings From Dennis van Galen >>

Comments

Fantastic!

August 13, 2001 by Waldo Smeets
Fantastic tutorial. Thanks for taking the time to write and share it with us!

Marvellous

August 20, 2001 by Richard Davies

Well done. This tutorial sets an excellent benchmark to be lived up to. I am going to brush up my efforts as this tute is making mine look bad!

R

RE: Marvellous

August 25, 2001 by Dennis van Galen

Is it really that good ?
I tried writing this as detailed and understandable as possible.

I think I succeeded :-)

Dennis

Recommended Reading

March 23, 2002 by Everett Padgett
Excellent work my friend! I am a very novice user of ultra dev and the whole application server concept and live data options were kind of fuzzy to me. I completed several pages with a clear understanding of dynamic content while using your tut. Thanks for the excellent details for a newbie like me.

You must me logged in to write a comment.