Building a Content Management System with Prototype - Adding the structural markup
(Page 3 of 4 )
In accordance with the concepts that were deployed in the previous section, we need to create the (X)HTML markup that belongs to this application. Therefore I have included the following code listing, which defines in a clear fashion the structural markup that comprises this Prototype-based content management system.
Here is how the (X)HTML markup of this application looks:
<h1 id="header">PROTOTYPE-BASED CMS</h1>
<div id="contents"></div>
<div id="formcontainer">
<form id="articleform">
<p>Article Title <input type="text" id="title"
class="inputbox" title="Enter article's title" /></p>
<p>Article Author <input type="text" id="author"
class="inputbox" title="Enter article's author" /></p>
<p>Enter contents of article below</p><p><textarea
id="content" title="Enter the contents of the
article"></textarea></p>
<p><input type="submit" value="Upload Article"
class="submitbox" title="Upload article" /></p>
<input type="hidden" id="id" />
<input type="hidden" id="command" value="upload" />
</form>
</div>
As shown previously, the structural markup of this CMS is in fact very easy to grasp and code. Essentially, it's composed of two primary DIVs. The first container will be responsible for housing the full list of articles published in the system, and the second one will display the corresponding insertion web form, which will be used to add new articles. Pretty simple, right?
Well, at this stage you hopefully learned how both the CSS styles and the structural markup of this CMS application were properly created. In the upcoming section I'm going to integrate the two respective modules, completing the client-side code corresponding to the content management system.
Sounds fair to you? Okay, to see how this educational journey continues, click on the link below and keep reading.
Next: The full client-side code >>
More JavaScript Articles
More By Alejandro Gervasio
/ 2 
