Posts Tagged ‘client’

Making an easy to update site on a server without any server-side code

Saturday, December 9th, 2006

I guess you could call this part three of the “ajax, json, html, css, easy to update non-server-scripted website series!” This time I will get into my design plans for the client application. It has not been created yet, so there will be some guess work here. Writing this will also help me figure out what exactly I am trying to accomplish here.

Now that the website is:
A simple xhtml page that uses javascript to fetch json text files. That means all of the content is now separate from the main structure of the site.

Next up is deciding on how to make the client application. I have decided to use Visual C# or VB.net 2005 Express Edition. It’s completely free, yeah I was surprised when I found that out… Anyways, A few weeks ago I created an application (which I will post about here in the future) with that development environment and enjoyed using it a lot.

The program may have features like:
- add/update/delete the main page links
- add/update/delete content pages
- modify existing content pages
- upload changes by way of FTP
- Possibly keeps track of what needs to be added/deleted and performs the necessary FTP commands when updating the server. For example, deleting a jpg image when none of the pages use it.
- have a easy to use interface

Underlying functionality:
be able to parse json files
be able to write json files
be able to add/update/delete files from a server

The great thing about newer programming languages like C# and VB.net is that there is probably a lot of that functionality already built into the language or easily accessible.

References:
JSON Website
JSON and Visual Studio 2005
Visual C# 2005 Express Edition

Tags: , , , ,
No Comments »

No, but there is more…much more thanks to my new friend ajax.

Saturday, December 9th, 2006

As I mentioned in the previous post, I made a static website in html, css, javascript, and json. It works pretty good and that’s great. The problem is my sister is the one who should be adding/editing content because it is her site. So the question is, how can I make an easily update-able site that is on a server without any server-side coding functionality?

I had figured out pretty much how I wanted it to work even before I finished coding the first version of the site. Sure, I could just write a client application that spits out html\css code and uploads it to the server, but no, that isn’t cool enough.

I wanted to break up the site data and formatting. That way the client application would only need to create json files and upload them along with any new content.

That means the json data needs to be removed from the html files and the html page now needs to allow fetching of the data whenever the person using the site needs it. What does this mean? It means that I now have a site that is comprised of: index.htm, a css file, and a javascript file. This is pretty much the whole website (not including the json files)! How can this be possible? Thank our new friend ajax (Asynchronous JavaScript and XML). What that does is allow javascript code to fetch data from the server (in my case text files containing json data) when the user does some type of action.

Lets get on to a few examples, shall we!

The whole index page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <link rel="stylesheet" type="text/css" href="sapphirearts.css" />
 <script src="sapphirearts.js" type="text/javascript"></script>
</head>

<body onload="getJsonFromServer('links.json', 'init');">
<div id="divcontainer">
 <div id="divbanner"></div>

 <div id="divlinks"></div>

 <div id="divbody">
   <div id="divbodycontent"></div>
 </div>

 <div id="divfooter"></div>
</div>
</body>
</html>

What happens when this page is loaded on to a client computer? The javascript function getJsonFromServer() is called. This function downloads a block of json data that defines the main links for the site. Pretty cool, eh? When you click one of these main links, they call getJsonFromServer() again, but with different parameters and ends up filling the content area of the page.


function getJsonFromServer(filename, newstate)
{
 xmlHttp = getXmlHttpObject();

 if (xmlHttp != null){
   currentState = newstate; // save the state so we can process it later
   xmlHttp.onreadystatechange = stateChanged;
   xmlHttp.open("GET", filename, true);
   xmlHttp.send(null);
 }
}

Which relies on the function:

function getXmlHttpObject(){
 var objXMLHttp = null;

 if(window.XMLHttpRequest){
   objXMLHttp = new XMLHttpRequest();
 } else if(window.ActiveXObject){
   objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }

 return objXMLHttp;
}

The getXmlHttpObject() function needs to execute different functions based on what bowser the user is using. Just one of the multitude of problems getting cross browser compatibility.

Tags: , , , , , , , ,
No Comments »





 

 
Stock Photo Website
Tech Learning Site

Popular Article Tags

Recent Article Comments

Archives