Hello Zotonic

Handling a simple form in Zotonic

After spending sometime getting to know the frontend stuff that comes with Zotonic, I am still only scraping the surface, but eventually I have to start writing some Erlang code.

If you are new to Erlang like me, you probably still find it a bit hard to read the code. I find the best way around this is to get rid of as much code as possible and learn by extending a really basic example.

Here is such an example that I created for myself, it is a form with a textarea, it accepts strings and will echo them back to you in the web-browser:

• In the modules directory of my site, I created a new sub directory called mod_hello.
• In mod_hello I created a file mod_hello.erl which contains this code:

  %% @author Michael Connors <michael@b**ng42.net>
  %% @date 2010-08-07%
  %% @doc Simple hello module. 
  -module(mod_hello).
  -author("Michael Connors <michael@bri**42.net>").
  -mod_title("Hello").
  -mod_description("A very simple module.").
 
  %% interface functions-export([    event/2]).
  -include_lib("zotonic.hrl").
  %% @doc Handle the submit event of hello
  event({submit, {newmessage, _}, _TriggerId, _TargetId}, Context) ->    
      Message = z_context:get_q_validated("message", Context),    
      Context1 = z_render:update("hello-text", Message, Context),  
      Context1.

• I created a templates directory in the mod_hello directory
• In the templates directory I created a template file called _hello.tpl

   <h2>{_ Hello _}</h2>
   <div id="hello-text">Hello World</div>
   {% wire id="hello-form" type="submit" postback={newmessage id=id} 
                                                       delegate="mod_hello" %}
   <form id="hello-form" method="post" action="postback">
       <div>
           <div class="form-item">
               <label for="message">{_ Message _}</label>
               <textarea name="message" id="message" cols="60" rows="8"></textarea>
               {% validate id="message" type={presence} %}
           </div>
           <div class="form-item button-wrapper">
               <button type="submit">{_ Write _}</button>
           </div>
       </div>
   </form>
    

• Once you have created this, you need to run make and then reload zotonic.
• You should now see the module in your list of modules in the admin(if you don't, you need to rescan)
• Activate the module, and paste this into the template in which you would like the form to appear:
• {% include "_hello.tpl" %}

You should now be able to test the module by passing it strings, and watching them get printed above the textarea in place of "Hello, World".

So, that leaves me with a nice simple module, I can understand every line of code, and now I have something I can extend to help me learn about other features of Zotonic.