Hi I have this done using xml, php and css for styling.
嗨,我已经完成了使用xml,php和CSS进行样式设置。
But is it possible to have information in an xml file. And use xslt to display the information in a table. I have a PHP and javascript file as well.
但是有可能在xml文件中包含信息。并使用xslt在表中显示信息。我也有PHP和javascript文件。
XML file
XML文件
<?xml version="1.0"?>
<TT>
<BUS>
<NUMBER>120</NUMBER>
<LEAVING>Howth</LEAVING>
<DESTINATION>Dublin Airport</DESTINATION>
<TIME>06:00, 07:00, 08:10, 9:10, 10:00,
11:25, 12:00, 13:00, 14:00, 15:20, 16:00, 17:00, 18:00</TIME>
</BUS>
</TT>
PHP
PHP
<?php
$id=$_GET['q'];
$dom=new DOMDocument;
$dom->load( 'routes.xml' );
$col=$dom->getElementsByTagName('NUMBER');
if( $col ){
foreach( $col as $node ){
if( $node->nodeType==XML_ELEMENT_NODE && $node->nodeValue==$id ) {
$parent=$node->parentNode;
}
}
$html=array();
$html[]='
</br>
<table border="2">
<tr>
<th>NUMBER</th>
<th>LEAVING</th>
<th>DESTINATION</th>
<th>TIME</th>
</tr>
<tr>';
foreach( $parent->childNodes as $node ){
if( $node->nodeType==XML_ELEMENT_NODE ) $html[]='<td>'.$node- >nodeValue.'</td>';
}
$html[]='</tr><tr background-color: #f2f2f2></table>';
echo implode( PHP_EOL, $html );
}
?>
JavaScript
JavaScript的
function showBus(str){
if (str==""){
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getbus.php?q="+str,true);
xmlhttp.send();
}
HTML
HTML
<body>
<form>
<h3>Select your bus route:</h3>
<select name="NUMBER" onchange="showBus(this.value)">
<option value="">Select a Bus:</option>
<option value="15">15</option>
<option value="22">22</option>
<option value="37">37</option>
<option value="44">44</option>
<option value="120">120</option>
</select>
<div id="txtHint"><b>Bus info will be listed here...</b></div>
</form>
</body>
</html>
I want to display the xml data with each BUS Number in the menu, when you click on the number the information such as destination time is displayed in a table, but i want it using xslt not html.
我想在菜单中显示每个BUS编号的xml数据,当你点击数字时,目的地时间等信息会显示在一个表格中,但我希望它使用xslt而不是html。
2 个解决方案
#1
1
Indeed it can all be done using XSLT rather than PHP, it's a bit more involved but it can be done. I still have the original XSL file you posted with the original question and have modified it slightly here.
事实上,它可以使用XSLT而不是PHP来完成,它可以更多地参与其中,但它可以完成。我仍然使用原始问题发布了原始XSL文件,并在此稍作修改。
routes.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- we want to output html -->
<xsl:output method='html' standalone='yes' indent='yes' encoding='utf-8'/>
<!-- this is the important bit, the bus number ~ id -->
<xsl:param name="id">id</xsl:param>
<xsl:template match="/">
<table border="1">
<tr bgcolor="#9acd32">
<th>NUMBER</th>
<th>LEAVING</th>
<th>DESTINATION</th>
<th>TIME</th>
</tr>
<xsl:for-each select="TT/BUS">
<xsl:choose><!-- perform a test using the supplied id param -->
<xsl:when test="NUMBER=$id">
<tr>
<td><xsl:value-of select="NUMBER"/></td>
<td><xsl:value-of select="LEAVING"/></td>
<td><xsl:value-of select="DESTINATION"/></td>
<td><xsl:value-of select="TIME"/></td>
</tr>
</xsl:when>
</xsl:choose>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
getbus.php
<?php
$id=$_GET['q'];
/* Create DOMDocument for the xml */
$dom=new DOMDocument;
$dom->load( __DIR__.DIRECTORY_SEPARATOR.'routes.xml' );
/* Create the xslt processor & import stylesheet */
$proc=new XSLTProcessor();
$xsl = new DOMDocument;
$xsl->load( __DIR__.DIRECTORY_SEPARATOR.'routes.xsl' );
$proc->importStyleSheet( $xsl );
/* ! set the parameter to use in the stylesheet ! */
$proc->setParameter('', 'id', $id );
/* Transform the xml and display result */
if( $html = $proc->transformToXML( $dom ) ){ echo $html; }
/* tidy up */
$dom = $xsl = $proc = $html = null;
?>
To allow user to add a route
You need a form, you need to be able to identify the user, you need to have a location to store the generated xml files and probably a whole heap of other things too. So, very quickly:
你需要一个表单,你需要能够识别用户,你需要有一个位置来存储生成的xml文件,也可能是一大堆其他东西。所以,很快:
<!doctype html>
<html>
<head>
<title>Generate xml for Bus Route</title>
</head>
<body>
<form name='usrxml' method='post'>
<input type='text' name='number' placeholder='Bus number' />
<input type='text' name='depart' placeholder='Departing from' />
<input type='text' name='destination' placeholder='Travelling to' />
<input type='text' name='times' placeholder='Times of travel' />
<input type='submit' value='Create xml' />
</form>
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
/* username??? */
$username='fred.bloggs';
$filename=__DIR__.DIRECTORY_SEPARATOR.$username.'bus_route.xml';
$number = $_POST['number'];
$depart = $_POST['depart'];
$destination = $_POST['destination'];
$times = $_POST['times'];
$dom=new DOMDocument('1.0', 'utf-8' );
$root=$dom->appendChild( $dom->createElement('TT') );
$bus=$root->appendChild( $dom->createElement('BUS') );
$bus->appendChild( $dom->createElement('NUMBER', $number ) );
$bus->appendChild( $dom->createElement('LEAVING', $depart ) );
$bus->appendChild( $dom->createElement('DESTINATION', $destination ) );
$bus->appendChild( $dom->createElement('TIME', $times ) );
$dom->save( $filename );
echo 'Route added to: '.$filename;
}
?>
</body>
</html>
#2
0
Here is a pure XSLT solution without PHP. It uses no PHP, no JavaScript (except linking to an off-the-self library). It is pure Html, CSS and XSLT 2.0.
这是一个没有PHP的纯XSLT解决方案。它不使用PHP,也不使用JavaScript(除了链接到自我库)。它是纯Html,CSS和XSLT 2.0。
Given this input document, located with relative URL, buses.xml
...
给定此输入文档,位于相对URL,bus.xml ...
<TT>
<BUS>
<NUMBER>120</NUMBER>
<LEAVING>Howth</LEAVING>
<DESTINATION>Dublin Airport</DESTINATION>
<TIME>06:00, 07:00, 08:10, 9:10, 10:00,
11:25, 12:00, 13:00, 14:00, 15:20, 16:00, 17:00, 18:00</TIME>
</BUS>
<BUS>
<NUMBER>200</NUMBER>
<LEAVING>Sydney</LEAVING>
<DESTINATION>Melbourne</DESTINATION>
<TIME>06:01, 07:01, 08:11, 9:11, 10:01,
11:25, 12:00, 13:00, 14:00, 15:20, 16:00, 17:01</TIME>
</BUS>
</TT>
... the interactive bus time-tables can viewed by this host page, with URL ...
...此主机页面可以查看交互式公交车时刻表,其中包含URL ...
<html>
<head>
<title>Bus time-tables</title>
<link href="buses.css" rel=stylesheet type="text/css">
<script type="text/javascript" language="javascript" src="js/Saxonce/Saxonce.nocache.js"></script>
<script type="application/xslt+xml" language="xslt2.0" src="buses.xsl" data-source="buses.xml"></script>
</head>
<body>
<form>
<h3>Select your bus route:</h3>
<div id="bus-options"></div>
</form>
<table>
<thead>
<tr>
<th>Bus number</th>
<th>Departing from</th>
<th>Arriving at</th>
<th>Schedule</th>
</tr>
</thead>
<tbody id="bus-rows"></tbody>
</table>
</body>
</html>
... which when loaded by the browser, leverages XSLT 2.0 stylesheet located at url buses.xsl
...
...当浏览器加载时,利用位于url bus.xsl的XSLT 2.0样式表...
<xsl:transform
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:ixsl="http://saxonica.com/ns/interactiveXSLT"
xmlns:prop="http://saxonica.com/ns/html-property"
xmlns:style="http://saxonica.com/ns/html-style-property"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
exclude-result-prefixes="xs prop"
extension-element-prefixes="ixsl"
version="2.0">
<xsl:template match="/">
<xsl:result-document href="#bus-options" method="ixsl:replace-content">
<select name="NUMBER">
<option value="">Select a Bus:</option>
<xsl:apply-templates select="TT/BUS" mode="bus-option" />
</select>
</xsl:result-document>
</xsl:template>
<xsl:template match="BUS" mode="bus-option">
<option value="{NUMBER}"><xsl:value-of select="NUMBER"/></option>
</xsl:template>
<xsl:template match="select[@name='NUMBER']" mode="ixsl:onclick">
<xsl:variable name="bus" select="@prop:value"/>
<xsl:for-each select="ixsl:source()/TT/BUS[NUMBER eq $bus]">
<xsl:result-document href="#bus-rows" method="ixsl:replace-content">
<tr>
<td><xsl:value-of select="$bus"/></td>
<td><xsl:value-of select="LEAVING"/></td>
<td><xsl:value-of select="DESTINATION"/></td>
<td>
<ul>
<xsl:for-each select="tokenize(TIME,',')">
<li><xsl:value-of select="."/></li>
</xsl:for-each>
</ul>
</td>
</tr>
</xsl:result-document>
</xsl:for-each>
</xsl:template>
</xsl:transform>
A CSS stylesheet is required at relative url buses.css
. I used this content, but it is not important. ...
相对url的bus.css需要一个CSS样式表。我使用了这个内容,但并不重要。 ...
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid #999;
padding: 0.5rem;
text-align: left;
}
td {
background: hsl(150, 50%, 50%);
}
And the final resource required is the Saxon/CE library. The resource should be placed at relative url js/Saxonce/Saxonce.nocache.js
.
所需的最终资源是Saxon / CE库。资源应放在相对url js / Saxonce / Saxonce.nocache.js中。
The outcome
This is the perfect solution. The body of the table dynamically changes to match the user selection of bus. There are no call-backs. All switching is done on the client side, so performance scales very well. Data, html structure, visual styling, and business rules are neatly segregated into separate files. A user can write their own bus routes and save it in the xml file. The whole solution is small and simple.
这是完美的解决方案。表的主体动态地改变以匹配用户对总线的选择。没有回电。所有切换都在客户端完成,因此性能可以很好地扩展。数据,html结构,视觉样式和业务规则被巧妙地分隔成单独的文件。用户可以编写自己的总线路由并将其保存在xml文件中。整个解决方案小而简单。
#1
1
Indeed it can all be done using XSLT rather than PHP, it's a bit more involved but it can be done. I still have the original XSL file you posted with the original question and have modified it slightly here.
事实上,它可以使用XSLT而不是PHP来完成,它可以更多地参与其中,但它可以完成。我仍然使用原始问题发布了原始XSL文件,并在此稍作修改。
routes.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- we want to output html -->
<xsl:output method='html' standalone='yes' indent='yes' encoding='utf-8'/>
<!-- this is the important bit, the bus number ~ id -->
<xsl:param name="id">id</xsl:param>
<xsl:template match="/">
<table border="1">
<tr bgcolor="#9acd32">
<th>NUMBER</th>
<th>LEAVING</th>
<th>DESTINATION</th>
<th>TIME</th>
</tr>
<xsl:for-each select="TT/BUS">
<xsl:choose><!-- perform a test using the supplied id param -->
<xsl:when test="NUMBER=$id">
<tr>
<td><xsl:value-of select="NUMBER"/></td>
<td><xsl:value-of select="LEAVING"/></td>
<td><xsl:value-of select="DESTINATION"/></td>
<td><xsl:value-of select="TIME"/></td>
</tr>
</xsl:when>
</xsl:choose>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
getbus.php
<?php
$id=$_GET['q'];
/* Create DOMDocument for the xml */
$dom=new DOMDocument;
$dom->load( __DIR__.DIRECTORY_SEPARATOR.'routes.xml' );
/* Create the xslt processor & import stylesheet */
$proc=new XSLTProcessor();
$xsl = new DOMDocument;
$xsl->load( __DIR__.DIRECTORY_SEPARATOR.'routes.xsl' );
$proc->importStyleSheet( $xsl );
/* ! set the parameter to use in the stylesheet ! */
$proc->setParameter('', 'id', $id );
/* Transform the xml and display result */
if( $html = $proc->transformToXML( $dom ) ){ echo $html; }
/* tidy up */
$dom = $xsl = $proc = $html = null;
?>
To allow user to add a route
You need a form, you need to be able to identify the user, you need to have a location to store the generated xml files and probably a whole heap of other things too. So, very quickly:
你需要一个表单,你需要能够识别用户,你需要有一个位置来存储生成的xml文件,也可能是一大堆其他东西。所以,很快:
<!doctype html>
<html>
<head>
<title>Generate xml for Bus Route</title>
</head>
<body>
<form name='usrxml' method='post'>
<input type='text' name='number' placeholder='Bus number' />
<input type='text' name='depart' placeholder='Departing from' />
<input type='text' name='destination' placeholder='Travelling to' />
<input type='text' name='times' placeholder='Times of travel' />
<input type='submit' value='Create xml' />
</form>
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
/* username??? */
$username='fred.bloggs';
$filename=__DIR__.DIRECTORY_SEPARATOR.$username.'bus_route.xml';
$number = $_POST['number'];
$depart = $_POST['depart'];
$destination = $_POST['destination'];
$times = $_POST['times'];
$dom=new DOMDocument('1.0', 'utf-8' );
$root=$dom->appendChild( $dom->createElement('TT') );
$bus=$root->appendChild( $dom->createElement('BUS') );
$bus->appendChild( $dom->createElement('NUMBER', $number ) );
$bus->appendChild( $dom->createElement('LEAVING', $depart ) );
$bus->appendChild( $dom->createElement('DESTINATION', $destination ) );
$bus->appendChild( $dom->createElement('TIME', $times ) );
$dom->save( $filename );
echo 'Route added to: '.$filename;
}
?>
</body>
</html>
#2
0
Here is a pure XSLT solution without PHP. It uses no PHP, no JavaScript (except linking to an off-the-self library). It is pure Html, CSS and XSLT 2.0.
这是一个没有PHP的纯XSLT解决方案。它不使用PHP,也不使用JavaScript(除了链接到自我库)。它是纯Html,CSS和XSLT 2.0。
Given this input document, located with relative URL, buses.xml
...
给定此输入文档,位于相对URL,bus.xml ...
<TT>
<BUS>
<NUMBER>120</NUMBER>
<LEAVING>Howth</LEAVING>
<DESTINATION>Dublin Airport</DESTINATION>
<TIME>06:00, 07:00, 08:10, 9:10, 10:00,
11:25, 12:00, 13:00, 14:00, 15:20, 16:00, 17:00, 18:00</TIME>
</BUS>
<BUS>
<NUMBER>200</NUMBER>
<LEAVING>Sydney</LEAVING>
<DESTINATION>Melbourne</DESTINATION>
<TIME>06:01, 07:01, 08:11, 9:11, 10:01,
11:25, 12:00, 13:00, 14:00, 15:20, 16:00, 17:01</TIME>
</BUS>
</TT>
... the interactive bus time-tables can viewed by this host page, with URL ...
...此主机页面可以查看交互式公交车时刻表,其中包含URL ...
<html>
<head>
<title>Bus time-tables</title>
<link href="buses.css" rel=stylesheet type="text/css">
<script type="text/javascript" language="javascript" src="js/Saxonce/Saxonce.nocache.js"></script>
<script type="application/xslt+xml" language="xslt2.0" src="buses.xsl" data-source="buses.xml"></script>
</head>
<body>
<form>
<h3>Select your bus route:</h3>
<div id="bus-options"></div>
</form>
<table>
<thead>
<tr>
<th>Bus number</th>
<th>Departing from</th>
<th>Arriving at</th>
<th>Schedule</th>
</tr>
</thead>
<tbody id="bus-rows"></tbody>
</table>
</body>
</html>
... which when loaded by the browser, leverages XSLT 2.0 stylesheet located at url buses.xsl
...
...当浏览器加载时,利用位于url bus.xsl的XSLT 2.0样式表...
<xsl:transform
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:ixsl="http://saxonica.com/ns/interactiveXSLT"
xmlns:prop="http://saxonica.com/ns/html-property"
xmlns:style="http://saxonica.com/ns/html-style-property"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
exclude-result-prefixes="xs prop"
extension-element-prefixes="ixsl"
version="2.0">
<xsl:template match="/">
<xsl:result-document href="#bus-options" method="ixsl:replace-content">
<select name="NUMBER">
<option value="">Select a Bus:</option>
<xsl:apply-templates select="TT/BUS" mode="bus-option" />
</select>
</xsl:result-document>
</xsl:template>
<xsl:template match="BUS" mode="bus-option">
<option value="{NUMBER}"><xsl:value-of select="NUMBER"/></option>
</xsl:template>
<xsl:template match="select[@name='NUMBER']" mode="ixsl:onclick">
<xsl:variable name="bus" select="@prop:value"/>
<xsl:for-each select="ixsl:source()/TT/BUS[NUMBER eq $bus]">
<xsl:result-document href="#bus-rows" method="ixsl:replace-content">
<tr>
<td><xsl:value-of select="$bus"/></td>
<td><xsl:value-of select="LEAVING"/></td>
<td><xsl:value-of select="DESTINATION"/></td>
<td>
<ul>
<xsl:for-each select="tokenize(TIME,',')">
<li><xsl:value-of select="."/></li>
</xsl:for-each>
</ul>
</td>
</tr>
</xsl:result-document>
</xsl:for-each>
</xsl:template>
</xsl:transform>
A CSS stylesheet is required at relative url buses.css
. I used this content, but it is not important. ...
相对url的bus.css需要一个CSS样式表。我使用了这个内容,但并不重要。 ...
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid #999;
padding: 0.5rem;
text-align: left;
}
td {
background: hsl(150, 50%, 50%);
}
And the final resource required is the Saxon/CE library. The resource should be placed at relative url js/Saxonce/Saxonce.nocache.js
.
所需的最终资源是Saxon / CE库。资源应放在相对url js / Saxonce / Saxonce.nocache.js中。
The outcome
This is the perfect solution. The body of the table dynamically changes to match the user selection of bus. There are no call-backs. All switching is done on the client side, so performance scales very well. Data, html structure, visual styling, and business rules are neatly segregated into separate files. A user can write their own bus routes and save it in the xml file. The whole solution is small and simple.
这是完美的解决方案。表的主体动态地改变以匹配用户对总线的选择。没有回电。所有切换都在客户端完成,因此性能可以很好地扩展。数据,html结构,视觉样式和业务规则被巧妙地分隔成单独的文件。用户可以编写自己的总线路由并将其保存在xml文件中。整个解决方案小而简单。