Home

Getting Started with BeepBeep

This is a quick tutorial of creating a web application with BeepBeep. For more details on BeepBeep see the documention and a complete blog example included with the source code.

The tutorial covers:

1. How to create a new application
2. How to implement a controller
3. How to create a template

Creating a new application

Assuming you’ve cloned BeepBeep, open up a terminal, ‘cd’ into the BeepBeep directory, and run ‘make’ to build the code. With the code built let’s create a new application called ‘hello’.

In the same terminal run:

 
  ./script/new_beepbeep.erl  hello [your directory]
where ‘hello’ is the name of the app and [your directory] is the place you want to put it.

Once that’s done, ‘cd’ into [your directory]/hello.

Creating a Controller and View

BeepBeep has already created some code for you as a starting point, specifically the ‘home_controller.erl’ . This is the root entry point
into your app. In otherwords, requests to ‘/’ are mapped to the home_controller. It also created some default Django templates in the ‘view’ directory as well as a stylesheet in ‘www/stylesheets’. Of course you are free to change this content to fit your needs. For the sake of the tutorial, we’ll create a new controller to display some information in the request.

Here’s our new controller:

info_controller.erl:

-module(info_controller,[Env]).
-export([handle_request/2,before_filter/0]).

handle_request("show",[Name]) ->
    {render, "info/show.html",[]}.

before_filter() ->
    ok.

This is the basic outline. We’ll be working with the ‘handle_request(“show”,[Name])" function. For this example, we won’t implement the “before_filter” you can find an example of it in the code generated for ‘hello’, and the example blog app included with the source code.

One thing important to note: The module declaration contains and extra parameter “[Env]”. This is an undocumented Erlang “trick” to make a term available to all functions in the module. In our case “Env” is the environmental variables.

With what we have above, a request to “/info/show/dave” will map to our “handle_request” and bind the value “dave” to the Name variable.

Next we need to create a template. Under the “views” directory, create a directory “info”. Now, we don’t need to put all our templates in a directory with the same name of the controller. We can put the templates anywhere we want. After all you tell BeepBeep what template to
use in the “{render,View,Data}” call. I do this just to keep things organized. In the “views/info” directory create a template named “show.html”. Here’s an example:

{% extends "../base.html" %}
{% block content %}

   My content here...

{% endblock %}

This is the Django language. You can read more about it here:

erlydtl

and here:

Django templates

Basically the {% extends ../base.html } and { block content %} call allows us to wrap our templates inside a layout template.

At this point, we can compile the app and try it out. First run “make” then run “./start_server.sh” and open a browser to “http://localhost:8000/info/show/dave”. If all worked, you should see the page.

Let’s add a bit more to show the BeepBeep api. Here’s the updated controller and template:

info_controller.erl:

-module(info_controller,[Env]).
-export([handle_request/2,before_filter/0]).

handle_request("show",[Name]) ->
    Sid = beepbeep_args:get_session_id(Env),
    Headers = beepbeep_args:get_all_headers(Env),
    {render, "info/show.html",[{name, Name},{session,Sid},{headers,Headers}]}.

before_filter() ->
    ok.

Here we pull out the session id, and the headers using the beepbeep_args api, We also pass the Name variable on to the template. The important structure here is the third argument to the “render” term:

[{name, Name},{session,Sid},{headers,Headers}]

This binds “Name” to the atom “name”, “Sid” to the atom “session”, and an array of Header information to the atom “headers”. Now in the template we can pull that information out like this:

{% extends "../base.html" %}
{% block content %}

  <p>You passed {{ name }} in the path</p>
  <p>The session id is: {{ session }}</p>
  <h2>Headers</h2>
  <ul>

  {% for k,v in headers %}
    <li>Key: {{ k }} Value: {{ v }}</li>
  {% endfor %} 
 </ul>

{% endblock %}

Here we use the Django language to pull out the values and show a simple example of looping over and displaying the Header information.
Now, run “make” and restart the server.

One final note, you can modify your templates while the server is running. For example wrap the name in bold tags:

<b>{{ name }}</b> 

and refresh the browser…

Hope that helps get you started with BeepBeep. Now go and create cool the next killer app…