| |
| |
In this tutorial you will learn how to create a page that contains the KTML control and which saves edited content to a file on the disk.
In order to follow this tutorial you need:
The KTML standalone package for your particular server model, Dreamweaver extension or Visual Studio control.
Coding knowledge for the scripting language you intend to use. Code is provided, but in order to customize it to your exact needs, you should know how to change it.
In this tutorial you will create two files:
index - in the site root, displays content from the file
edit - also in the site root, contains the KTML control applied on a form, and logic to save content into the file.
To create the site structure, follow the next steps:
Using a file explorer of choice, browse to the folder that is also the document root for your server.
Create a new folder, named as the site you intend to create - e.g. KTMLWrite.
Open the folder and create two empty files - index and edit.
Note: Do not forget to add the correct extension for these files, according to the language script to use.
Note: If using ASP .NET 1.1 or 2.0 you will have to name the first file default.
Also create an empty html file where content will be saved - name it out.htm.
First you will build the page that displays content already saved within the out.htm file.
To create this page, follow the instructions below:
Open the index/default file with a text editor. This page will have to contain two sections: code above the <html> tag that will open and read the file, check if a form has been submitted and if true, saves the content to the file. The second section contains HTML code for the page, with a link to edit the content and server-side code that displays the dynamic content in the file.
On top of the file add the following code (pick the snippet that is appropriate for your scripting language):
For PHP:
<?php
//assign the name of the file to a variable
$contentRepository = "out.htm";
//check if any content has been submitted to this page; if so, write it to the file
if(isset($_POST['Submit'])) {
$fout = fopen($contentRepository, 'wb+'); //open the file in write mode
fwrite($fout, stripslashes($_POST['ktml1'])); //write content from the ktml1 form field to the file
fclose($fout); //close the file for later use
}
//open the file and read the content into a variable
$content = file_get_contents($contentRepository);
?>
For ASP_VBScript:
<%
' assign the name of the file to a variable
content_repository = "out.htm"
Set f = new KT_File
'check if any content has been submitted to this page; if so, write it to the file
If Request.Form("ktml1") <> "" Then
' write content from the ktml1 form field to the file
f.writeFile Server.MapPath(content_repository), "truncate", Request.Form("ktml1")
End If
'open the file and read the content into a variable
fcontent = f.readFile(Server.MapPath(content_repository))
%>
For ColdFusion:
//check if any content has been submitted to this page; if so, write it to the file
<cfif isDefined("FORM.ktml1")>
//write content from the ktml1 form field to the file
<cffile action="write" file="#GetDirectoryFromPath(GetBaseTemplatePath()) & 'out.htm'#" output="#FORM.ktml1#">
</cfif>
//open the file and read the content into a variable
<cffile action="read" file="#GetDirectoryFromPath(GetBaseTemplatePath()) & 'out.htm'#" variable="fcontent">
For JSP - saving the file content is done in the same page as the editing form. The main page only contains code to display the content
<%
// assign the name of the file to a variable
String filePath = pageContext.getServletContext().getRealPath("out.txt");
KT_File theFile = new KT_File(pageContext);
// open the file and read the content into a variable
String content = theFile.readFile(filePath);
if(content == null) {
// if the file was not found, return empty content
content = "";
}
%>
For ASP .NET - you have to create a <script runat="server"> tag that is executed on the server, and which loads the file. Beforehand, you must add the statements that declare the name space to import:
<%@ Page Language="C#" ContentType="text/html" ValidateRequest="False" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Web.Configuration" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
public string content;
protected void Page_Load(object sender, EventArgs e)
{
string filePath = Server.MapPath("out.htm");
StreamReader sr = File.OpenText(filePath);
try
{
content = sr.ReadToEnd();
}
catch (Exception) { }
sr.Close();
}
</script>
Next you have to add code that displays the content and a link to the edit page. This is added after the code above:
For PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Show file content</title>
<link href="includes/ktm/styles/KT_styles.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<?php echo $content; ?>
<p> <a href="edit.php" title="Edit this page's content">Edit content</a></p>
</body>
</html>
For ASP_VBScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Show file content</title>
</head>
<body>
<% response.write fcontent %>
<p><a href="edit.asp">Edit content</a></p>
</body>
</html>
For ColdFusion:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Show file content</title>
<link href="includes/ktm/styles/KT_styles.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<cfoutput>#fcontent#</cfoutput>
<p><a href='edit.cfm'>Edit content</a></p>
</body>
</html>
For JSP:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Show file content</title>
</head>
<body>
<%= content %>
<a href="edit.jsp">Edit contentt</a>
</body>
</html>
For ASP.NET:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Show file content</title>
</head>
<body>
<form name="form1" runat="server" IsPostBack = "No">
<% Response.Write(content); %>
<p><a href="edit.aspx">Edit content</a></p>
</form>
</body>
</html>
With this you are done creating the page that displays file content. Save it and you can test it by loading it in a browser. Because the out.htm file does not contain anything yet, the page will simply display the edit link.
Next you must create the page that contains the KTML control.
In this section only instructions on how to build the basic page are provided. For instructions on how to actually apply the KTML control, see the topic under Manually Install KTML 4 in Your Site that is appropriate to your particular scripting language.
To create the page that contains the form and saves the content to a file, follow the instructions below:
Open the edit file in a text editor.
On top of the page add code that will open the file and load the content into the editor:
For PHP:
<?php
$contentRepository = "out.htm";
$content = file_get_contents($contentRepository);
?>
For ASP_VBScript:
<%
content_repository = "out.htm"
Set f = new KT_File
fcontent = f.readFile(Server.MapPath(content_repository))
%>
For ColdFusion:
<cffile action="read" file="#GetDirectoryFromPath(GetBaseTemplatePath()) & 'out.htm'#" variable="fcontent">
For JSP: the code must perform two actions: check if the form submitted and save the content to the out.htm file, then redirect the user to the index, or open the file and load its content into the editor.
<%
String filePath = pageContext.getServletContext().getRealPath("out.txt");
KT_File theFile = new KT_File(pageContext);
String kontent = request.getParameter("ktml1");
String content = "";
if(kontent != null) {
theFile.writeFile(filePath, kontent);
%>
<jsp:forward page="index.jsp" />
<%
} else {
content = theFile.readFile(filePath);
if(content == null) {
// file not found;
content = "";
}
content = content.replace("&", "&");
content = content.replace("<", "<");
content = content.replace(">", ">");
content = content.replace("\"", """);
content = content.replace("'", "'");
%>
For ASP .NET: the same approach as for JSP is used: if the page form submitted already, the content is saved, and the user forwarded to the main page. Otherwise, content from the file is loaded into the editor.
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string filePath = Server.MapPath("out.htm");
string content = "";
if (IsPostBack)
{
StreamWriter sw = File.CreateText(filePath);
content = ktml1.Value;
sw.Write(content);
sw.Close();
Response.Redirect("default.aspx", true);
}
StreamReader sr = File.OpenText(filePath);
try
{
content = sr.ReadToEnd();
}
catch (Exception) { }
ktml1.Value=content;
sr.Close();
}
</script>
Next you have to add the form that will allow editing content. Since the only thing to change is the file content, the form will only have a textarea and a submit button. The HTML code is:
For PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="index.php">
<textarea name="ktml1"><?php echo KT_escapeAttribute($fcontent, ENT_COMPAT); ?></textarea>
<br />
<input type="submit" name="Submit" value="Save changes" />
</form>
</body>
</html>
For ASP_VBScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="index.asp">
<textarea name="ktml1"><%=KT_escapeAttribute(fcontent)%></textarea>
<br />
<input type="submit" name="Submit" value="Save changes" />
</form>
</body>
</html>
For ColdFusion:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="index.asp">
<textarea name="ktml1"><cfoutput>#Request.KT_escapeAttribute(fcontent)#</cfoutput></textarea>
<br />
<input type="submit" name="Submit" value="Save changes" />
</form>
</body>
</html>
For JSP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="index.asp">
<textarea name="ktml1"><%=content%></textarea>
<br />
<input type="submit" name="Submit" value="Save changes" />
</form>
</body>
</html>
For ASP .NET:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form name="formaspnetx" action = "default.aspx" method="POST" runat="server">
<textarea name="ktml1"></textarea>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" PostBackUrl="Default.aspx" />
</form>
</body>
</html>
The last thing to do is to enhance the page by applying the KTML control as shown here. When editing content thereafter, it will be saved to the file instead of a database field.