This website stores cookies. Click here to accept them.cookie information page

1st January 1970
link to this post - ExecScalar called by unknown with SELECT COUNT(commentid) AS comments FROM oww_blogcomment WHERE approved = 1 AND articleid = AND repldeleted IS NULL and error is You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'AND repldeleted IS NULL' at line 4.  |   Add your comment

A short introduction to Ajax

11th January 2012
Categories: ajax, basics, javascript

Web pages are old. HTTP (the protocol that browsers use to retrieve pages) has been around since the early 90's and was originally designed as a simple request/response mechanism. Unfortunately this means that any time a page needs updating, the whole thing has to be re-downloaded from the server which can be slow, tiresome and leads to annoying screen repaints. Enter AJAX (Asynchronous Javascript and XML), a methodology developed in the late 90's that allows javascript to request data from the server, this allows developer's to write cleaner, nicer and more helpful user interfaces.

Hello World

It's a tradition that your first steps in a new language should be a hello world type application/script. So without further ado here comes an Ajax Hello World Script (note, for this tutorial I'm going to be using JQuery, available from http://www.jquery.com).

If you want to skip to the result, click here.

 <!DOCTYPE html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AJAX Hello World</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function()

{

  $('#ajaxButton').click(function()

  {

    $.get('http://www.oxford-web.co.uk/blogresources/ajax-hello-world.php', function(data)

    {

      $('#ajax_target').html(data);

    });

  });

});

</script>

</head>
<body>

<div>
<div style="background-color:#373639">

<img src="http://www.oxford-web.co.uk/app/images/structure2011/logobanner-transparent.png" title="Oxford Web">

</div>

<div style="padding:24px">

  This is part of a blog post from the <a href="http://www.oxford-web.co.uk"   target="_blank">www.oxford-web.co.uk</a> site.

   <button id="ajaxButton">Click Me</button>

  </div>

  <div id="ajax_target" style="background:#c0c0c0;padding:24px">

  </div>

 </div>

</body>

</html>

The first thing we do (outside of the basic HTML template) is to include JQuery (<script ... ”jquery.js”>). We can then move on to requesting data from the server. JQuery, by default, uses the $ symbol as a shortcut to the JQuery object. In this example we are using the 'get' function (there is also a 'post' function for HTTP POST requests which works in exactly the same way), to which we pass a url and a callback that gets executed when the request is complete.

Using Parameters

Now this is fairly nice stuff but obviously we want to be able to give the server a bit more information. Now we could manually build up a GET uri (append ?field=val&field=val...) but this can get tedious and untidy, not to mention it doesn't help us much with POST requests. Fortunately JQuery can handle the tedious parts for you, just pass it a JSON object (JSON, Javascript Object Notation) and the fields will be used as request parameters.

<!DOCTYPE html>

<html>

<head>

<META http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>AJAX Hello Name</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function()

{

  $('#ajaxButton').click(function()

  {

    $.get('http://www.oxford-web.co.uk/blogresources/ajax-hello-world.php',

    {

      name: $('#name').val()

    },

   function(data)

   {

   $('#ajax_target').html(data);

   });

  });

});

</script>

</head>

<body>

<div>

<div style="background-color:#373639">

<img src="http://www.oxford-web.co.uk/app/images/structure2011/logobanner-transparent.png" title="Oxford Web">

</div>

 

<div style="padding:24px">

<p>This is part of a blog post from the <a href="http://www.oxford-web.co.uk" target="_blank">www.oxford-web.co.uk</a> site.</p>

<p>type something in the box and click go to refresh just the shaded part of the screen...</p>

<input type="text" id="name" /><br/>

<button id="ajaxButton">Click Me</button>

</div>

<div id="ajax_target" style="background:#c0c0c0;padding:24px">

</div>

</div>

</body>

</html>

 

The above returns the same as typing http://www.oxford-web.co.uk/blogresources/ajax-hello-world.php?name=danny.

Conclusion

So there we have it - a simple, basic introduction to the wonders of Ajax that allows web pages to become dynamic, auto-completing, auto-updating web applications.

What are bugs?

4th January 2012
Categories: basics, programming

Software bugs are errors in the instructions written by programmers for computers. Rather than errors in syntax, which are usually weeded out before instructions are executed, bugs tend to be logic errors that cannot be discovered by a computer.

Take for example these instructions in English:

  1. Turn hob on.
  2. Prepare mug with teabag.
  3. Pour 1 pint of water into the kettle.
  4. Put kettle on hob.
  5. When kettle boils, pour water into mug.

When tested, these instructions may be seen to work, but when carried out 'in  the field', it may be seen that the hob is still on at the end of the process, and if left, may cause a fire.

Bugs can occur in any kind of software, including markup and stylesheets, object-oriented programming languages, and higher-level tools like flowchart-driven programming - and the only way to ensure that programs are 100% bug-free is to test every part of the software for all cases.  

So for example a program which simply multiplies numbers by 2 is not fully testable - because there are an infinite number of numbers. But more complex programs are infinitely more untestable as there are a bigger range of 'input variables'.

So how do you make sure programs are bug-free enough to be put to safe use?

One way is to test 'edge cases' - for example if your program which multiplies numbers only has to deal with integers, and the integers need to be between 1 and 100, then it makes sense to test 1, 1000, and a few numbers in between to make sure.

It also helps to use automated testing - using tools like selenium for firefox, which allows you to browse a web application recording your process, and to play that process back any time you want.

Another tool is 'test driven development', where you write the tests first, and then the software to make the program work. So at first your tests will fail, which is expected, and then as you write more code, new tests begin to pass - but if you introduce any rogure code which affects other parts of the system, you can re-run the tests and see that others begin to fail - which helps you to indentify the problem.

"Dry-running" and stepping through programs is also a very useful way to pre-empt bugs. Dry running is where a human being reads the program code and tries to work out how the computer would execute it; stepping through means running the program at a speed controlled by you - so that you can see variable values and the path of the execution as it happens.

© Alberon Ltd 2018

8 Standingford House
26 Cave Street
Oxford
OX4 1BA

01865 596 144

Oxford Web is a trading name of Alberon Ltd, registered company no. 5765707 (England & Wales).