This tutorial discusses the basics of putting together a form in Obyx. We'll look at building the form, populating it and managing posts.
We will start with a ver simple form, it simply allows you to enter a film title and director and saves to the database. We compose the HTML for the form in a single file called form_view.html. The HTML can be considered the view of our MVC model, hence its name
form_view.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Edit Form Example</title></head>
<body>
<h1>My Example Form</h1>
<form method="post" enctype="multipart/form-data" action="#">
<fieldset>
<input type="hidden" name="id" value="0"/>
<ul id="segmentData">
<li>
<label>Title: <input name="title" value="" /></label>
</li>
<li>
<label>Director: <input name="director" value="" /></label>
</li>
<li>
<input type="submit" value="Save" />
</li>
</ul>
</fieldset>
</form>
</body>
</html>If you save this file to your web server you should be able to load it directly in your browser. Its a bit ugly but hey, this ai'nt a design tutorial.
Form posts are not all that useful without somewhere to store the data being posted. So we'll store the data from our form post in a mysql database. You could store it in a file, a cookie or send it through twitter. The database provides the model component of our MVC. Its pretty straightforward so just create it as below.
mysql> create table simpleFormDB (id int auto_increment, title varchar(255), director varchar(255), primary key(id));
mysql> insert into simpleFormDB set title="Fellowship of the Ring", director="Peter Jackson";
mysql> select * from simpleFormDB;
+----+------------------------+---------------+
| id | title | director |
+----+------------------------+---------------+
| 1 | Fellowship of the Ring | Peter Jackson |
+----+------------------------+---------------+We will start by simply loading the view and displaying it. This code has two key Obyx instructions, The first loads the view we created above into the store called 'mainView'. The last instruction simply outputs the store 'mainView' to screen.
showform.obyx:
<instruction xmlns="http://www.obyx.org">
<input>
<!-- Load the view template into store called mainView -->
<instruction>
<output space="store" value="mainView" />
<input space="file" value="form_view.html" />
</instruction>
<!-- rest of code will go here -->
<!-- output the view to screen -->
<instruction>
<input space="store" value="mainView" release="true" />
</instruction>
</input>
</instruction>We want to populate the form with with the data from the database. To do that we need to connect to the database, run a query and then populate our view object with the data. Fortunately this is very easy in Obyx. We need to use the iteration flow-function to access the database. The default operation of iteration is 'repeat' but we need to use 'sql' as we want to do a mysql query. The iteration flow function has two key elements: control and body.
The control element allows us to specifiy the controlling statement for our iteration. In this case this is an sql query. Its very simple: select id
The body element is where the work gets done. For each result returned by the query the body will get executed. A simple example of how this element is used is as follows:
<iteration operation="sql">
<control>select director from simpleFormDB where id=1</control>
<body>
<instruction>
<input space="field" value="director" />
</instruction>
</body>
</iteration>Peter Jackson
You can see here that the query runs (returns only one result in this case) and the body simply outputs the 'director' field. So we reference SQL query fields with space="field" value="FIELDNAME"
We don't want to output the field values directly however, we want to insert them into our view. We do this by setting an output on the instruction in the body. The output needs to point to the 'mainView' store and to the location within that store of where we want the value. If you take another look at our view object, form_view.html, you can see we need to insert the value for director into the with a name of 'director'. This can be referenced by the following XPath:
//h:input[@name='director']/@valueThis XPath targets the value attribute of the input that has a name of 'director'
Using the above XPath, we simply need to add in the output to our previous code block, remembering to include the name of the store 'mainView' sepereated by a hash (#) in our XPath:
<iteration operation="sql">
<control>select id, title, director from simpleFormDB where id=1</control>
<body>
<instruction>
<output space="store" value="mainView#//h:input[@name='director']/@value" />
<input space="field" value="director" />
</instruction>
</body>
</iteration>The field value 'director' is inserted into the store called mainView at the XPath location //h:input[@name='director']/@value
The XPath uses XML namespacing. This is discussed elsewhere in more detail, but in this case we used a prefix of 'h' in front of any HTML element. We need to inform Obyx that we have chosen 'h', which the following code does. (Add it in right at the top of your displayform.obyx file)
<instruction>
<output space="namespace" value="h" />
<input value="http://www.w3.org/1999/xhtml" />
</instruction>Putting all the code together so far you should have an .obyx file that looks similar to that below.I have added in the additional instruction to populate both the Title and id inputs in the view. If you run this in a browser you should see the page now has values in the form elements
showform.obyx: (complete file so far)
<instruction xmlns="http://www.obyx.org">
<input>
<!-- set the html naespace prefix for xpaths -->
<instruction>
<output space="namespace" value="h" />
<input value="http://www.w3.org/1999/xhtml" />
</instruction>
<!-- Load the view template into store called mainView -->
<instruction>
<output space="store" value="mainView" />
<input space="file" value="form_view.html" />
</instruction>
<!-- Populate the form -->
<iteration operation="sql">
<control>select id,title, director from simpleFormDB where id=1</control>
<body>
<instruction>
<output space="store" value="mainView#//h:input[@name='title']/@value" />
<input space="field" value="title" />
</instruction>
<instruction>
<output space="store" value="mainView#//h:input[@name='director']/@value" />
<input space="field" value="director" />
</instruction>
<instruction>
<output space="store" value="mainView#//h:input[@name='id']/@value" />
<input space="field" value="id" />
</instruction>
</body>
</iteration>
<!-- output the view to screen -->
<instruction>
<input space="store" value="mainView" release="true" />
</instruction>
</input>
</instruction>Next we want to manage the form post to let us update the database. This warrants a new page!
Part 2: Managing the Form Post >>>