Solved

DHTML & XML project

Posted on 2002-05-27
9
187 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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Background What I'm presenting in this article is the result of 2 conditions in my work area: We have a SQL Server production environment but no development or test environment; andWe have an MS Access front end using tables in SQL Server but we a…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

758 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

24 Experts available now in Live!

Get 1:1 Help Now