Useful Links
·
A working copy of this
application.(http://www.boogienet.com/photoalbum)
·
JavaScript Tutorial
(http://hotwired.lycos.com/webmonkey/programming/javascript/tutorials/tutorial1.html)
The Application Description
The whole backbone of the
application is the database, which maintains a set of links to images and the
comments to the images. The database will have 4 fields: pic_id, thumbnail,
pic_url, and comment. Each record will represent 1 picture that the database
maintains. Each set of pictures has 2 physical files (thumbnail and the actual
picture url).
There are 2 asp pages to the
whole application. One page, will be the index of the pictures and the second
will display the actual picture. We use javascript to open the actual picture
up from the index page, passing it the actual address of the picture.
The Database
The database only maintains
a set of links and does NOT store images in the fields themselves. There are 4 fields in the database:
1. Pic_id, is the unique identifier of the picture and
how the pictures are ordered on the index page. (number, also the primary key)
2. The thumbnail field is the url of the thumbnail of
the picture in the index page. (text)
3. The pic_url page maintains the links to the actual
picture. This will be passed from the index page to the display page. (text)
4. The pic_description, is used to have a comment
associated with every picture. (memo)
The Index Page
The index page is a
combination server-side asp (to process the database) and client-side
javascript (to pass the url to the display page).
The code of the page looks
like this:
<html>
<head>
<title>Album Index Page</title>
<script
language=”JavaScript”>
function OpenPic(url){
//format url of the picture
var newwindow = "pic.asp?pic_url=" +
escape(pic_url);
//properties of the new window
var window_properties =
"title=false,width=400,height=400";
//open the window
var PicWindow =
window.open(newwindow,"Album",window_properties);
};
</script>
</head>
<body>
<%
Dim dbConnection,
rsRecordSet, strSQL
StrSQL = “SELECT * FROM
tblAlbum ORDER BY pic_id ASC”
Set dbConnection =
Server.CreateObject(“ADODB.Connection”)
Set rsRecordSet =
Server.CreateObject(“ADODB.RecordSet”)
‘open the database with the
connection string (dsn or dsn-less) - replace “connection_string with your
database connection string
DbConnection.Open
“connection_string”
RsReocrdSet.Open strSQL,
dbConnection
If not(rsRecordSet.EOF and
rsRecordSet.BOF) then
RsRecordSet.MoveFirst
While not rsRecordSet.EOF
%>
<a
href=”javascript:OpenPic(‘<%Response.Write(rsRecordSet.Fields.Item(“pic_url”))%>’)”>
<img
src=”<%Response.Write(rsRecordSet.Fields.Item(“thumbnail”))%>”></a>
<br>
<%Response.Write(rsRecordSet.Fields.Item(“pic_description”))%>
<br><br>
<%
RsRecordSet.MoveNext
wend
End if
RsRecordSet.Close
DbConnection.Close
Set rsRecordSet = Nothing
Set dbConnection = Nothing
%>
</body>
</html>
Ok, simple databases query
page, but here’s the cool part. In the “<a href” tag, it calls the
javascript function to open the new window and pass the url to the display page.
The Display Page
The only thing the display
page does is display a picture url. The picture url is passed through the
querystring calling this page. Of course there are 2 ways to do this, one is
javascript and the other of course is server-side vbscript. To keep things
simple and consistent, we’ll learn the “easier” vbscript first.
<html>
<head>
<title>Display Picture</title>
</head>
<body>
<center>
<img
src=”<%Response.Write(Request.QueryString(“pic_url”))%>”>
<br><br>
<form>
<input type=”Button” OnClick=”self.close();”
value=”Close Window”>
</form>
</center>
</body>
</head>
</html>
That’s all there is to that
page.
