Web AJAX UK Street Finder using PHP

Demo of this integration

Please note : This demonstration uses demonstration data unlike the live system

Demonstration Video - Street PHP

UK Street Finder functionality installed in minutes

The above UK Street Finder functionality can be added to a PHP capable web server in minutes, floowing 5 easy steps, by simply dropping the supplied files into your Web project.   

Advantages

Requirements

Web server capable of running PHP code, which is most web servers.

Web Site UK Street Finder in 5 steps:

Step 1 Sign up for 30 day trial

Simply use the "Sign Up for Trial" link at top right of this page to open a trial account.   We will then send you a data key, which is used to identify your account, when using the following service.

Step 2 Download the Example Code 

Simply download the example code.  The code is in the "AJAX PHP Street" directory of our example downloads. Simply copy, into the same directory as your web page which requires Street Finder Software , "SPL_AJAX_Street.js" and "SPLGetStreetAddress.php" files.   Download code

If you wish to have two Street address postcode seaches on one web page, then please use the example in the “AJAX/AJAX ASP Full Address 2 Addresses” directory. It is significantly different from the single address fill example.

Step 3 Add reference to our JavaScript file to your page

Then on your own web page header, add the following reference to the JavaScript file you copied. 

This line is showen in the "index.html" file included in the example download, as is the rest of the code.

Reference the JavaScript file

                        HTML Code 
                          in  in section   
                          
                          
                      
                    

Step 4 Add a Link, button or image to activate UK Street Finder

Then add either a link, or button image, using the following code to activate the Postcode Lookup Web pop-up:

Example link to activate Street Finder Software

              HTML   
                
                

                Lookup Address from link
            
          

Example button to activate Finder Software

    HTML   
      
      
      onClick= "javascript:SPLGetAddressData(document.getElementById('postcode').value)">
  

This could easily be changed to use an image button.  

  Note: In the above example the Postcode Text field must have an ID of "postcode"

Step 5 Map your Address fields

Now edit the JavaScript at the end of file SPL_AJAX_Street.js", to write the correct address lines, which result from the Street Finder, back to your target web page address fields:

Example address field mappings

                    JavaScript (SPL_AJAX_Street.js)   
                      
                      document.getElementById("line1").value=LINE1;

                      document.getElementById("line2").value=LINE2;

                      document.getElementById("line3").value=LINE3;

                      document.getElementById("town").value=TOWN;

                      document.getElementById("county").value=COUNTY;

                      document.getElementById("country").value=COUNTRY;

                  
                

Where the fields on your web page all have ID'd expressed:

                HTML   
                  
                  line1 
                  size=45>
                      
                            line2 size=45>

              
            

When using ASP Text boxes

Simply run up your page. Right click on page, select view source, and find the ID that ASP has assigned to your ASP Textbox controls.

Probably “MainContent_” is added to start and “ASP” at end if ID you have designated. Thus we could edit the writeback section to read:

                            JavaScript code (SPL_AJAX_Full.js)   
                              
                              document.getElementById("MainContent_line1ASP").value = LINE1;

                              document.getElementById("MainContent_line2ASP").value = LINE2;

                              document.getElementById("MainContent_line3ASP").value = LINE3;

                              document.getElementById("MainContent_townASP").value = TOWN;

                              document.getElementById("MainContent_countyASP").value = COUNTY;

                            document.getElementById("MainContent_countryASP").value = COUNTRY;
                          
                        

Please note, if a major structure change, liek change in Master Page may change the ID's, but otherwise it should remain the same.

Step 6 Specify the Data Key

Open an account with us. Within seconds you will then receive a data key, by e-mail, which should be entered at the top of the "SPLGetStreetAddress.php" file. This key will enable your account, for a 30 day evaluation period, for one postcode area.  

Identify your account

              PHP code SPLGetStreetAddress.php   
                
                $datakey = "PUT YOUR DATA KEY 
                HERE";

            
          

Enter Postcode "ZZ99" to use test data.   Test postcodes for various address formats.

Why do you have to have extra pages on your server?

Reason 1

Some browsers, especially if the client has turned up the security settings, may stop the client web page talking to a server from different domain.  So by adding a page into your web domain, to relay the query to our Postcode address lookup server, removes this security problem.

Reason 2

Hides your account information from the Client Web Browser

This example could easily be converted to any other server side language, since the PHP pages are simply used to relay XML data from our server.  The clients side JavaScript would remain the same.

Important PHP switches

In order to allow communication between your server and ours, a PHP setting must be set to allow communication PHP.INI file:

The following should be on:
; Whether to allow the treatment of URLs (like https:// or ftp://) as files.
allow_url_fopen = On

If this is off, then the code cannot get the address information from our server!

On most servers it is ON

How it Street Finder Software works

When the customer presses the Find button, then the function SPLGetAddressData is called, passing the Postcode entered in your Postcode field.   This then calls the SPLGetStreetAddress.php page with the Postcode in the parameters, using the xmlHttp object created when the page was opened on the browser.   This xmlHttp object provides AJAX (Asynchronous JavaScript and XML) to perform a Asynchronous call the SPLGetStreetAddress.php page, without a complete page refresh.

SPLGetStreetAddress.php code on your web server then calls our Street Finder Software web server for the address information, adding your account information, etc.  This means the client browser never sees your account information.

When the SPLGetStreetAddress.php page receives address information from our server it simply relays it back to the web page (your page with address fields on the customers computer) on the client computer. 

The result of SPLGetStreetAddress.php is then handled by the JavaScript function SPLhandleRequestStateChange which calls SPLhandleServerResponse when fully complete.

Function SPLhandleServerResponse then reads the XML, if it contains tag "" and writes the address information to your address fields on your web page.   If the response does not contain "", because of invalid postcode entered, then it is not processed.

Related "Web Site Postcode Finder" topics

Simple HTML Popup	JQuery Popup Address Finder
AJAX Full Address Finder	AJAX UK Street Finder Software
Download Example Code	Request a Quote and Brochure
Open a 30 day evaluation account