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
Comments
Fantastic!
Marvellous
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
Is it really that good ?
I tried writing this as detailed and understandable as possible.
I think I succeeded :-)
Dennis
Recommended Reading
You must me logged in to write a comment.