Online LSP Demos

The following examples, which are executing on this site, are implemented in Lua Server Pages (LSP). If you are interested in C/C++ Server Pages (CSP), please refer to our whitepapers. You may also be interested in our LSP and CSP comparison.

Introduction

One crucial aspect of web application design is the server’s ability to dynamically create HTML/XML on the server side. As an example, the following random number will change every time you press the refresh button: 78.

The above number is dynamically emitted into the HTML response data by the following construction: <?lsp=rnd(100)?>. The tag instructs the server to run the random function rnd(100) and emit the result returned by the function in the response message sent to the client. The code snippet is run every time a client requests this page.

LSP tags:

Code fragment: <?lsp ?>. Code between the tag is executed as Lua code.
Expression tag: <?lsp= ?>. Print dynamic data, a shorthand for <?lsp print()?>.

We recommend that you read the Lua Wikipedia page if you are new to the Lua scripting language.

Sending HTML Form Data To Server

The two form examples below are designed to be simple. After testing the examples below, download the combined LSP demo and tutorial for a better understanding of the capabilities of the product.

Example 1:

In the following example, a basic HTML form collects any information entered by the user. When the user presses the "send" button, the web browser collects the data and sends the data to the server. Lua script code executing in the server collects the information and emits the response data. Please note that the server side code must be designed such that it maintains state information between page requests since HTTP is a stateless protocol.

HTML form example 1

Source code for HTML form example 1:

   1   
<?lsp
   2      local myVariable = request:data"myVariable"
   3   ?>
   4   <fieldset>
   5     <legend>HTML form post example 1</legend>
   6     <form method="post">
   7        Enter data:
   8           <input type="text" name="myVariable"
   9                  value="
<?lsp=myVariable
  10                               and myVariable or ''?>"/>
  11           <input type="submit" value="Send to server"/>
  12           <br/>
  13           Request type: 
<?lsp=request:method()?>
  14           <br/>
  15           myVariable valid:
  16           
<?lsp=myVariable and "YES" or "NO"?>
  17           <br/>
  18           myVariable = 
<?lsp=myVariable?>
  19     </form>
  20   </fieldset>

The HTML form starts on line 6 and ends on line 19. A text input field is created on lines 8-10. The name of this input field is "myVariable". The browser sends "myVariable" to the server when the user presses the "send" button. The "myVariable" value is extracted by the Lua script on line 2 by calling method "data" in the "request" object. The "myVariable" is subsequently used when rendering the dynamic response message.

Documentation: request:data()

Example 2:

The following example shows how one can create a bar by using two HTML DIV elements. The width of the black div is fixed and the width of the red div is dynamically adjusted by using LSP.

HTML form example 2

Source code for HTML form example 2:

   1   <fieldset>
   2     <legend>HTML form post example 2</legend>
   3     <form method="post">
   4       <select name="bar">
   5         
<?lsp
   6           -- Get form data sent from browser
   7           local barVal = request:data"bar"
   8           -- set the value to 1 if data not available
   9           barVal = barVal and tonumber(barVal) or 1
  10           for i=0,10 do
  11              response:write('<option value="',i,'"')
  12              if barVal == i then
  13                 response:write' selected="true"'
  14              end
  15              response:write('>',i,'</option>')
  16           end
  17         ?>
  18       </select>
  19       <input type="submit" value="Send to server"/>
  20     </form>
  21     <div style="border-style:ridge; width:600px;
  22                 margin: 5px; background:black">
  23       <!-- Notice how we use LSP to dynamically set
  24            the div's pixel length -->
  25       <div style="height:20px; width:
<?lsp=(60*barVal)?>px;
  26                   padding:0; margin:0; background:red">
  27       </div>
  28     </div>
  29   </fieldset>

The dynamically created select tag starts on line 4 and ends on line 18. State information is preserved between page requests for the select tag by dynamically setting the HTML attribute selected="true".

Line 25 uses the select tag’s value "bar" to dynamically adjust the DIV element’s width.

BarracudaDrive Examples

This web site is powered by BarracudaDrive, a product developed by using the Barracuda Embedded Web Server. The following BarracudaDrive add-ons are specifically designed for BarracudaDrive and are using the internal BarracudaDrive theme. The page layout will therefore completely change when clicking the links below. You will find a list of all applications loaded by BarracudaDrive in the left side menu, after clicking one of the links.

This site is powered by BarracudaDrive on an embedded device server.

News

Online LSP Demos

Introduction

Sending HTML Form Data To Server

BarracudaDrive Examples