神刀安全网

SQL Back End for the Static Web and Mobile Apps

Hello World

May 28, 2016 by Mark

The are many advantages to building websites with static html, css, and javascript files, but working with forms and dynamic content isn’t one of them. How can the site track usage, submit forms, allow user login, and authorize resource access without a server running to process and coordinate these requests? This is why we createdLite Engine, a simple, easy to use CORS backend to a SQL database for static websites. In this example we’ll implement a simple Hello World service.

  • Create a Saved Query This is the sql we’ll execute by calling the API.
  • Create an Authorization Token This gives us an Authorization Key to use in the API call.
  • Implement the HTML What to include to make an api call.

About Testing Locally

When testing html files that call the Lite Engine API, the files must be served by an http server. When an html file on the filesystem (ie the users Desktop for example) is opened by a browser, the browser doesn’t populate the Origin header when making CORS xhr reqeusts. This is due to browsers enforcing the ‘same origin’ policy on the local filesystem. Lite Engine relies on the Origin header being populated to whitelist the calling domain.

If you’re just starting your web development journey, or simply want to experiment using our API in a webpage, we recommend setting up a free account at neocities.org were html can be edited, in the browser.

Step 1: Create a Saved Query

First, login in theadmin application and create new Saved Query name "hello_world.sql", and click to open it. Then paste the SQL below into the textarea and save. Note the flavor of SQL we’re using here is the one spoken by Sqlite , there are lots of tutorials online.

select ('Hello ' || :name) as message;

You can test execute the query by clicking the ‘exec’ button. Note the API requires an offset and limit value be passed with each exec or mexec call, and if not provided default to 0 and 10 respectively. Put a value in the ‘name’ field and click the Test button. The result will be displayed.

SQL Back End for the Static Web and Mobile Apps

Step 2: Create an Authorization Token

Calls to the API require an Account Key, and an Authorization Key. The Account Key is available in the admin application under Settings -> Basic Information. Next, we need an Authorization Key for this service. Calling queries in Lite Engine is restricted two ways: by manually managing Authorization Tokens, or by setting User permissions if using the User API. Here we will create an Authorization Token, with an Authorization Key for this query specifically.

In the admin applciation, navigate to Settings -> Auth Tokens. Click the ‘+’ button to add an Authorization Token. Give the token a name, and specify the permissons as the name of the query, minus the ‘.sql’. Be sure to set the token as Active by clicking the checkbox.

At this point we can execute our Hello World service with the following curl:

curl -d "name=World" -H "Authorization: $acct_key $authorization_key" /      https://www.lite-engine.com/api/exec/hello_world

SQL Back End for the Static Web and Mobile Apps SQL Back End for the Static Web and Mobile Apps

Step 3: Implement the HTML

For this page, we’re using Bootstrap, and JQuery. First, download and save the Lite Engine javascript file, le.js. Then include the line below in the head of the html.

&ltscript src="js/le.js"></script>

Then we’ll need a form to post to our hello_world service. This should be an ajax form submission (using jquery, see below).

&ltform id="helloForm" role="form">     &ltdiv class="form-group">         &ltlabel for="name"&gtName:</label>         &ltinput type="text" class="form-control" id="name" name="name" placeholder="Enter name">     </div>     &ltbutton id="helloFormSubmit" type="submit" class="btn btn-default" onclick="$('#helloForm').submit();"&gtSubmit</button> </form>

Next is the javascript to setup Lite Engine and submit the form. We obtained the account key and authorization key in Step 2. For the full details, checkout the Lite Engine Javascript API documentation .

&ltscript type='text/javascript'>    $( document ).ready(function() {     // set account key and authorization key     LiteEngine.init('your_account_key', 'your_authorization_key');   });      $("#helloForm").submit(function(event) {     event.preventDefault();     var params = $("#helloForm").serialize();     LiteEngine.exec('hello_world', params, null,       function(data){         var result = data.rows[0];         $('#greeting').text(result.message);       },        function() {         alert("Error calling service");       });        }); </script>

SQL Back End for the Static Web and Mobile Apps

Summary

The final result can be found here . This has been a basic, bare bones introduction making CORS requests with Lite Engine. Subsequent documents will build on this, stay tuned!

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » SQL Back End for the Static Web and Mobile Apps

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址