Its has always been important for me to divide the ASP Page in two parts and I
would suggest you to do the same. Some people are mixing the asp and html code,
but I would not recommend it to you. But sometimes it isn`t possible to spilt
the ASP Page in two parts, in this case you will need to find your own and best
suitable way. But anyway, try it! Here an image of the structure how my ASP page
always looks like:
The first part contains a simple Form, and the second part contains the ASP Code
which will do the saving for us. For a better understanding we will start with
the Form.
Part I the Form:
You can create any simple form, with any controls you like. In addition to the
other controls, we also need a submit and a reset button.
In my example I have created a simple form called frmPerson, which contains
three textfields and a drop down field.
This form will use the post method to process the entered data.
Here is the code of my form:
<form action="VerifyPerson.asp" method="post" name="frmPerson" id="frmPerson">
<INPUT name=Name>
<INPUT name=Age>
<SELECT style="WIDTH: 154px" name=Gender>
<OPTION value=Male selected>Male</OPTION>
<OPTION value=Female>Female</OPTION>
</SELECT>
<INPUT name=Postalcode>
<INPUT type=submit value=Submit name=submit><INPUT
type=reset value=Reset name=reset>
</form>
It is very important to give each used TAG which will hold the data, a variable
name.
For Example: The name textfield <INPUT name=Name>
contains the variable Name. In order to retrieve
the data from the form we will use this and other variables in the next ASP paragraph.
You dont need to write down this code, because the examples covered in this Article
are available for download. To get familar with ASP and XML I suggest you download
the examples and try to work with it. To give the form a better and professional
look I have included a table with some effects, so dont get worried about the
whole code. As you can see this was the first easy part of the ASP page
and the second part will be even easier.
Part II the ASP code:
In this paragraph I will show you in 7 easy steps how you can retrieve the data
from the form and how you can save the data to a XML
file.
1. The first step is to check whether the user has pressed the submit button
or not! For this we will use the JScript function count.
var submit = Request.Form("submit").Count;
if( submit > 0 ){
// The user has pressed the submit button
// So the code to save the data will take place here.
}
else{
// We could also place our form in this part of code,
which must be then written in JScript.
//But I would not recommend that !!!
}
2. Now we need to retrieve the data from the form. This data will be stored in
some variables. To retrieve the data we will use the Request.Form("variable_name");
function. So let us create 4 variables and retrieve the required data.
var name = Request.Form("Name");
var age = Request.Form("Age");
var gender = Request.Form("Gender");
var pcode = Request.Form("PostalCode");
Join our new forums at WebProWorld! Ask your toughest questions or help your peers
solve their issues. |
|
3.The third step is to check whether the user has entered some data, or not. For
this we can just check whether the variables in step 2 are still empty or not.
var error = "";
if ( name == "" )
error = "Name ";
if ( age == "" )
error += "Age ";
if ( pcode == "")
error += "PostalCode ";
4. In step 3 we have saved the result in the var error. Now we need to
check, if "error" consists some data or not. If yes, then we have found
an error, and we will display it. If not, then we will start with the saving procedure.
if(error!=""){
//We have found an error, so display this to the user!
Response.Write("Please enter the following data:<br>");
Response.Write(<b>);
Response.Write(error);
Response.Write("</b>");
}
else{
//Everything is fine, so let us start to save the data.
5. Now we have done the nessesary checks and can start with saving the data. For
that we will load the Person.xml in a xmlDocument. Then we will load the
current node list to get the current root node. To get the current root node,
we will use the function xmlDoc.getElementsByTagName. After that we need
to create the required nodes, this can be achived with the function xmlDoc.createElement("AnyNodeName").
At last we only need to save the entered data from the form to the approriate
xml variables. So here is the code, how it could look like:
.
.
.
else{
// here we are loading the requried xml file
var xmlDoc=Server.CreateObject("MICROSOFT.FreeThreadedXMLDOM");
xmlDoc.async="false";
xmlDoc.load(Server.MapPath("Person.xml"));
// Get the current root
var nodeList = xmlDoc.getElementsByTagName("PersonList");
if(nodeList.length > 0){
var parentNode = nodeList(0) ;
// Create the required nodes
var personNode = xmlDoc.createElement("Person");
var nameNode = xmlDoc.createElement("Name");
var ageNode = xmlDoc.createElement("Age");
var genderNode = xmlDoc.createElement("Gender");
var pcodeNode = xmlDoc.createElement("PostalCode");
// Assign the variables, which we have retrieved in step 2
to the xml variables.
nameNode.text = name;
ageNode.text = age;
genderNode.text= gender;
pcodeNode.text = pcode;
.
.
.
6. We have done nearly everything to save the data, but there are still two steps
left. In this step we will append the created nodes to the parent node. This can
be done with the function parentNode.appendChild("personNode");
.
.
.
parentNode.appendChild(personNode);
personNode.appendChild(nameNode);
personNode.appendChild(ageNode);
personNode.appendChild(genderNode);
personNode.appendChild(pcodeNode);
.
.
.
7. Finally we only need to save the nodes to the xml file. For this you can use
the function xmlDoc.save(Server.MapPath("Person.xml"));.
// 7) Now save the nodes to the file
xmlDoc.save(Server.MapPath("Person.xml"));
XSL:
With this example you can save easily the data of any Person into a XML file. Right
now we have only seen how to save the data, but how do we display it ? The answer
is again easy. We will use ASP and XSL to display the data. The first thing you
need to do is to load the XML file, this can be achieved with a XML Parser. The
XML parser from Microsoft is available directly with Internet Explorer 5.0. After
you have loaded the XML file in the document Object, you can retrieve the XML
data with the help of a DOM Object. In the same way you must load the XSL file.
// This part is used to display the data
var objXMLDoc = Server.CreateObject("MICROSOFT.FreeThreadedXMLDOM");
objXMLDoc.async = false;
objXMLDoc.load(Server.MapPath("person.xml"));
var xsl=Server.CreateObject("MICROSOFT.FreeThreadedXMLDOM");
xsl.async = false;
xsl.load(Server.MapPath("person.xsl"));
Now you have loaded both files, each one DOM Object. Now you only need to create
a query which will select the nodes for us. Of course we could select some specific
nodes, but for our needs we will just select the root node, so all other nodes
will be selected automatically.
var xmlQuery="//Person";
var docHeadlines=objXMLDoc.documentElement.selectNodes(xmlQuery);
After that you only need to iterate through the nodes to display each stored item.
var numNodes;
numNodes=docHeadlines.length;
var nn;
for(var i=0;i<numNodes;i++){
nn = docHeadlines.nextNode();
Response.Write(nn.transformNode(xsl));
}
Conclusion:
That's it ! Now you have created a fully functional system which can save, read
and display data from a form. You have learned the advantages of ASP,XML and XSL.
To practice a little bit more, I suggest you to modify the ASP page, to create
your own Address book. Once you have mastered and created your own ASP page you
will understand much more.
Download examples
First published at SitePoint.com
About the Author:
Codefinger was founded 2000 by Sonu Kapoor. Sonu has studied E-Commerce in India
and currently lives in Germany. After graduation he worked for several companies
in Germany. He currently works as a Network Consultant and Software Developer.
He has written many applications in various programming languages like VC++, ASP,
ASP.NET, XML or XSL. Besides his passion for developing applications, Sonu writes
articles for several major websites like Developer.com.
He also works as a freelancer for CodeGuru.
Read this newsletter at: http://www.webproasp.com/2003/0813.html |
|
By
Sonu Kapoor
