Solved

DHTML & XML project

Posted on 2002-05-27
9
188 Views
Last Modified: 2013-11-19
Hi,

I Would like to know how to design an application that using information on an Access Database shows information in Html page. When data changes into my database, active pages must be updated. I would like two know too how to limit access to this page only to a few users (using login and password).

Could the page work with Https?
Is it a good Idea to use XML to update pages?

Any example code?

Best Regards,
0
Comment
Question by:coprytel
  • 6
  • 2
9 Comments
 
LVL 10

Expert Comment

by:smegghead
ID: 7037562
Your best bet is to read up on ASP (active server pages), they're basically dynamic html pages that can contain either javascript or vbscript (and conventional html).

Within the script, you can open a database using ADO and generate the appropriate html script which will be sent to the client.

There are millions of tutorials / descriptions of ASP with proper examples, so I won't go into anymore detail.
0
 
LVL 5

Expert Comment

by:kcm76
ID: 7037677
well, to limit access to the page by using session variable. once the password is right u set the session variable some value. in asp file check whether it exists if so, execute other codes otherwise do nothing.

U can also use XML. meaning whenever there is a change in the database (after add/mod/delete operation) rewrite the xml file in the server.

then using XMLDOM read the xml file and display it.

ALL THE BEST.
KCM.

0
 
LVL 5

Expert Comment

by:kcm76
ID: 7037686
500 points is really worth of posting the code. do u want the entire code to be posted?
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 7038521
To use XML/XSLT/HTML/ASP/Access.
=================================

employees.asp
------------
<%@language="VBScript"%>
<object id="oCon" progid="ADODB.Connection" runat="server"></object>
<object id="oRS" progid="ADODB.Recordset" runat="server"></object>
<object id="oPayload" progid="Msxml2.DOMDocument.3.0" runat="server"></object>
<%
 On Error Resume Next
 Response.ContentType = "text/xml"
 Response.Buffer = True
 'ENSURE DOCUMENT IS NEVER CACHED AT CLIENT
 Response.AddHeader "Pragma","no-cache"
 Response.Expires = -1
 Response.CacheControl = "no-cache"
 oPayload.async = False
 oPayload.appendChild oPayload.createProcessingInstruction("xml","version='1.0' encoding='iso-8859-1'")
 oPayload.appendChild oPayload.createElement("payload")
 oPayload.documentElement.setAttribute "timestamp", Now
 oCon.Provider = "Microsoft.Jet.OLEDB.4.0"
 oCon.Properties("Data Source") = "C:\Program Files\Microsoft Office\Office\Samples\Northwind.mdb"
 oCon.Open
 Dim szParam, oElement, oField, szFields
 If Request.QueryString("id").Count > 0 And _
  IsNumeric(Request.QueryString("id")) Then
  szParam = " WHERE EmployeeID = " & CLng(Request.QueryString("id"))
 End If
 If Request.QueryString("details").Count > 0 Then
  oPayload.documentElement.setAttribute "details",1
  szFields = " * "
 Else
  oPayload.documentElement.setAttribute "details",0
  szFields = " EmployeeId,FirstName,LastName,Title,TitleOfCourtesy "
 End If
 Set oRS.ActiveConnection = oCon
 oRS.Open "SELECT" & szFields & "FROM employees" & szParam
 While Not oRS.EOF
  Set oElement = oPayload.createElement("employee")
  For Each oField In oRS.Fields
    If Not oField.Type = 205 Then
      oElement.setAttribute LCase(oField.Name),CStr(oField.Value)
    End If
  Next
  oPayload.documentElement.appendChild oElement
  Set oElement = Nothing
  oRS.MoveNext
 Wend
 oRS.ActiveConnection.Close
 oRS.Close
 oPayload.Save Response
%>

Notes for employees.asp
=======================
This is the important ASP page that runs server-side and for which data from Access is presented in XML Format.
1. It returns XML Documents.
2. It is multi-entried.
 employees.asp?id=1 gives a different result then
 employees.asp?id=1&details=1
3. It uses ADO, Jet.OLEDB.4.0 for Access.
4. It creates the XML Tree without saving the Recordset straightaway into the DOM. Reason is this will cause unnecessary schema to be inside the document plus most beginners are not familiar with handling namespaces.
5.

employees.html
=============
<html>
<head>
<title>Employees</title>
<script language="javascript">

var oXML = new ActiveXObject("Msxml2.DOMDocument.3.0");
var oXSLT = new ActiveXObject("Msxml2.DOMDocument.3.0");
oXML.async = true;
oXSLT.async = true;
var bolLock = true;
oXML.load("employees.asp");
oXSLT.load("employees.xsl");
window.onload = transform;

function transform() {
  if (oXML.readyState == 4 && oXSLT.readyState == 4) {
    document.getElementById("data").innerHTML = oXML.transformNode(oXSLT);
    bolLock = false;
  } else {
    window.setTimeout("transform()",100);
  }
}

function showDetails(el) {
 if (bolLock) return;
 oXML.load("employees.asp?details=1&id=" + el.getAttribute("employeeid"));
 bolLock = true;
 window.setTimeout("transform()",100);
}

function showSummary() {
  if (bolLock) return;
  oXML.load("employees.asp");
  bolLock = true;
  window.setTimeout("transform()",100);
}
</script>
<style>
table.employees {border-top:1px solid #000000; border-right:1px solid #000000; border-left:1px solid #000000;table-layout:fixed;}
body, td {font-family:Verdana;font-size:9pt;}
table.employees td {border-bottom:1px solid #000000;}
tr.headers td {background:#eeeeee;letter-spacing:0.3mm;text-transform:uppercase;}
.even td {background:#e6e6fa;}
.odd td {background:#f5deb3;}
.details {text-transform:uppercase;letter-spacing:0.3mm;border-right:1px solid #000000;background:#e6e6fa}
a {color:#0000ff;text-decoration:none;}
a:hover {text-decoration:underline;}
</style>
<body>
<div id="data"></div>
</body>
</html>


Notes for employees.html
=======================
1. It will show the list of employees from the Northwind Database.
2. When you click on any employee row, you get to see further details of that employee.
3. This page is loaded by the client.

employees.xsl
=============
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" indent="yes" />
<xsl:template match="/">
  <xsl:apply-templates select="payload/@details" mode="start" />
</xsl:template>
<!--summary templates-->
<xsl:template match="@details[. = 0]" mode="start">
<table width="100%" cellspacing="0" cellpadding="4" class="employees">
<col width="30%" />
<col width="20%" />
<col width="50%" />
<tr class="headers">
  <td nowrap="nowrap">name</td>
  <td nowrap="nowrap">title</td>
  <td nowrap="nowrap">position</td>
</tr>
<xsl:apply-templates select="//employee" mode="summary">
<xsl:sort select="@lastname" />
<xsl:sort select="@firstname" />
</xsl:apply-templates>
</table>
</xsl:template>

<xsl:template match="employee" mode="summary">
<tr employeeid="{@employeeid}" onclick="showDetails(this);" style="cursor:hand;"><xsl:call-template name="class" />
  <td nowrap="nowrap"><xsl:value-of select="concat(@lastname,', ',@firstname)" /></td>
  <td nowrap="nowrap"><xsl:value-of select="@titleofcourtesy" /></td>
  <td nowrap="nowrap"><xsl:value-of select="@title" /></td>
</tr>
</xsl:template>
<xsl:template name="class">
<xsl:attribute name="class">
<xsl:choose>
<xsl:when test="position() mod 2 = 0">even</xsl:when>
<xsl:otherwise>odd</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</xsl:template>
<!--end of summary templates-->

<!--detail templates-->
<xsl:template match="@details[. = 1]" mode="start">
<div style="padding:5px;"><a href="javascript:showSummary();">Go Back</a></div>
<table width="100%" cellspacing="0" cellpadding="4" class="employees">
<col width="50%" valign="top"/>
<col width="50%" />
<tr class="headers">
  <td nowrap="nowrap">Property</td>
  <td nowrap="nowrap">Value</td>
</tr>
<xsl:apply-templates select="//employee[1]/@*" mode="details" />
</table>
</xsl:template>

<xsl:template match="@*" mode="details">
<tr>
  <td nowrap="nowrap" class="details"><xsl:value-of select="name()" /></td>
  <td><xsl:value-of select="." /></td>
</tr>
</xsl:template>

<!--end of detail templates-->

</xsl:stylesheet>


Notes for employees.xsl
=======================
1. This stylesheet shows the power of using XML Data on the web.

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 23

Expert Comment

by:b1xml2
ID: 7038527
Explanation
=============
1. When the page is opened by the client for the first time, the XML Document loaded is via the url:
employees.asp is:-

<?xml version="1.0" encoding="iso-8859-1"?>
<payload timestamp="5/28/2002 2:33:21 PM" details="0"><employee employeeid="1" firstname="Nancy" lastname="Davolio" title="Sales Representative" titleofcourtesy="Ms."/><employee employeeid="2" firstname="Andrew" lastname="Fuller" title="Vice President, Sales" titleofcourtesy="Dr."/><employee employeeid="3" firstname="Janet" lastname="Leverling" title="Sales Representative" titleofcourtesy="Ms."/><employee employeeid="4" firstname="Margaret" lastname="Peacock" title="Sales Representative" titleofcourtesy="Mrs."/><employee employeeid="5" firstname="Steven" lastname="Buchanan" title="Sales Manager" titleofcourtesy="Mr."/><employee employeeid="6" firstname="Michael" lastname="Suyama" title="Sales Representative" titleofcourtesy="Mr."/><employee employeeid="7" firstname="Robert" lastname="King" title="Sales Representative" titleofcourtesy="Mr."/><employee employeeid="8" firstname="Laura" lastname="Callahan" title="Inside Sales Coordinator" titleofcourtesy="Ms."/><employee employeeid="9" firstname="Anne" lastname="Dodsworth" title="Sales Representative" titleofcourtesy="Ms."/></payload>

2. The XSLT stylesheet rearranges the data in a table. What the client sees after the transformation
inside the <div id="data"></div> element is: -

<table width="100%" cellspacing="0" cellpadding="4" class="employees">
<col width="30%">
<col width="20%">
<col width="50%">
<tr class="headers">
<td nowrap>name</td>
<td nowrap>title</td>
<td nowrap>position</td>
</tr>
<tr employeeid="5" onclick="showDetails(this);" style="cursor:hand;" class="odd"><td nowrap>Buchanan, Steven</td>
<td nowrap>Mr.</td>
<td nowrap>Sales Manager</td>
</tr>
<tr employeeid="8" onclick="showDetails(this);" style="cursor:hand;" class="even"><td nowrap>Callahan, Laura</td>
<td nowrap>Ms.</td>
<td nowrap>Inside Sales Coordinator</td>
</tr>
<tr employeeid="1" onclick="showDetails(this);" style="cursor:hand;" class="odd"><td nowrap>Davolio, Nancy</td>
<td nowrap>Ms.</td>
<td nowrap>Sales Representative</td>
</tr>
<tr employeeid="9" onclick="showDetails(this);" style="cursor:hand;" class="even"><td nowrap>Dodsworth, Anne</td>
<td nowrap>Ms.</td>
<td nowrap>Sales Representative</td>
</tr>
<tr employeeid="2" onclick="showDetails(this);" style="cursor:hand;" class="odd"><td nowrap>Fuller, Andrew</td>
<td nowrap>Dr.</td>
<td nowrap>Vice President, Sales</td>
</tr>
<tr employeeid="7" onclick="showDetails(this);" style="cursor:hand;" class="even"><td nowrap>King, Robert</td>
<td nowrap>Mr.</td>
<td nowrap>Sales Representative</td>
</tr>
<tr employeeid="3" onclick="showDetails(this);" style="cursor:hand;" class="odd"><td nowrap>Leverling, Janet</td>
<td nowrap>Ms.</td>
<td nowrap>Sales Representative</td>
</tr>
<tr employeeid="4" onclick="showDetails(this);" style="cursor:hand;" class="even"><td nowrap>Peacock, Margaret</td>
<td nowrap>Mrs.</td>
<td nowrap>Sales Representative</td>
</tr>
<tr employeeid="6" onclick="showDetails(this);" style="cursor:hand;" class="odd"><td nowrap>Suyama, Michael</td>
<td nowrap>Mr.</td>
<td nowrap>Sales Representative</td>
</tr>
</table>
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 7038533
Next,

when the user clicks on a row, the showDetails() method is called.

for e.g. user clicks on Peacock, Margaret. This will call the showDetails method which results in the url being:
"employees.asp?details=1&id=6"

the HTML inside <div id="data"></div> is now:

<div style="padding:5px;"><a href="javascript:showSummary();">Go Back</a></div>
<table width="100%" cellspacing="0" cellpadding="4" class="employees">
<col width="50%" valign="top">
<col width="50%">
<tr class="headers">
<td nowrap>Property</td>
<td nowrap>Value</td>
</tr>
<tr>
<td nowrap class="details">employeeid</td>
<td>6</td>
</tr>
<tr>
<td nowrap class="details">lastname</td>
<td>Suyama</td>
</tr>
<tr>
<td nowrap class="details">firstname</td>
<td>Michael</td>
</tr>
<tr>
<td nowrap class="details">title</td>
<td>Sales Representative</td>
</tr>
<tr>
<td nowrap class="details">titleofcourtesy</td>
<td>Mr.</td>
</tr>
<tr>
<td nowrap class="details">birthdate</td>
<td>7/2/1963</td>
</tr>
<tr>
<td nowrap class="details">hiredate</td>
<td>10/17/1993</td>
</tr>
<tr>
<td nowrap class="details">address</td>
<td>Coventry House
Miner Rd.</td>
</tr>
<tr>
<td nowrap class="details">city</td>
<td>London</td>
</tr>
<tr>
<td nowrap class="details">postalcode</td>
<td>EC2 7JR</td>
</tr>
<tr>
<td nowrap class="details">country</td>
<td>UK</td>
</tr>
<tr>
<td nowrap class="details">homephone</td>
<td>(71) 555-7773</td>
</tr>
<tr>
<td nowrap class="details">extension</td>
<td>428</td>
</tr>
<tr>
<td nowrap class="details">notes</td>
<td>Michael is a graduate of Sussex University (MA, economics) and the University of California at Los Angeles (MBA, marketing).  He has also taken the courses "Multi-Cultural Selling" and "Time Management for the Sales Professional."  He is fluent in Japanese and can read and write French, Portuguese, and Spanish.</td>
</tr>
<tr>
<td nowrap class="details">reportsto</td>
<td>5</td>
</tr>
</table>
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 7038537
and the XML Data from employees.asp is
======================================
<?xml version="1.0" encoding="iso-8859-1"?>
<payload timestamp="5/28/2002 2:41:00 PM" details="1"><employee employeeid="4" lastname="Peacock" firstname="Margaret" title="Sales Representative" titleofcourtesy="Mrs." birthdate="9/19/1958" hiredate="5/3/1993" address="4110 Old Redmond Rd." city="Redmond" region="WA" postalcode="98052" country="USA" homephone="(206) 555-8122" extension="5176" notes="Margaret holds a BA in English literature from Concordia College and an MA from the American Institute of Culinary Arts. She was temporarily assigned to the London office before returning to her permanent post in Seattle." reportsto="2"/></payload>


0
 
LVL 23

Accepted Solution

by:
b1xml2 earned 500 total points
ID: 7038539
Slight errata with the HTML For the Details, it's for Suyama and not for Peacock. I wont repost the actual HTML becos you can get the drift.

Regards,

Brandon Driesen
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 7038637
thanks coprytel =)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Computer crashes, following error message in event manager 5 134
Visual Studio 2005 text editor 10 35
clicking a shape in a frame array vb6 3 39
Advice in Xamarin 21 47
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Since upgrading to Office 2013 or higher installing the Smart Indenter addin will fail. This article will explain how to install it so it will work regardless of the Office version installed.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now