The Server page...
Good stuff towards the top, database stuff at the bottom.
This week I will mostly be....
Click this link to check out my new weekly planner 'wot I wrote'.
I'll never forget to put the bins out again.
Serial port control
using CodeIgniter.... should be interesting.
Here goes...
COM Port Settings - Hard coded to start with (set to COM 5).
Port No - Not connected
Baud Rate - Not connected
Parity - Not connected
Data bits - Not connected
Stop bits - Not connected
Flow Control - Not connected
Com Port control.
Message sent to com port will appear below.
Not connected
To test this, the serial port of the browsing laptop (COM 5 via a USB to serial converter) is hooked up to an old IBM thinkpad running hyperterminal with a standard 2-3-5 null modem cable.
Click 'on' or 'off', and the message is sent via the serial port to our thinkpad.
E' voila'.
Big deal...
It might be a bit more useful if we can hook it up to an xml feed for something like the beeb's backroom weather feed.
Salisbury weather feed from the BBC
It'll tell us that today's maximum temperature is going to be
13°C.
So we can be proactive and use that info to do something useful, like sending some control data via our serial port to save our seedlings. i.e.
Conditions are forecast to perfect for growing. Leave the greenhouse alone.
I took this screengrab on a cold day in February. The temp was forecast to be 6°C. So the following message was sent to my dummy greenhouse controller.
In real life we'd obviously send it some 0's and 1's, but that'll do for now.
The javascript page touched on client-side operations, or stuff that happens in your browser to keep things slick and user-friendly.
Here, we'll have a look at server-side scripting; primarily using a database.
Let's say your site contains a huge amount of information that, when you examine your source code is quite frankly lost in HTML. This makes it tricky for your
users to find what they're looking for and a real pain for you to update.
So what can we do about it. For demo purposes, we'll have a look at a really simple glossary.
We draw a table on a piece of paper, with the following headings at the top of each column:-
- Term - the subject that we want to talk about.
- Explanation - The actual content or the wordy bit.
Now, each row in the table can represent one of our glossary entries. Chances are, your web host will provide this feature on their server, so if we can store the information there; it can be retrieved as and when it's required. Here's a screen grab from the actual database table on the intstix server.
Note the headings that match our paper scribblings, and an additional id column. This new column will allow us to perform all sorts of operations of the data, as well a keeping things tidy.
With the data on the server, we need a server-side script to access it. Preferably a script that can communicate with the database in it's own language, SQL. Step up PHP.
Take a look at the dropdown box below. In fact, click on it to view the options that are available for selection.
Notice that the options match the entries in the term column in our database table. This the php script in action. When the page loads, the script runs throught the database table gathering, in this case, all the entries.
We can then select the term that we want an explanation for. When we click FIND, our script requests from the server the explanation that matches the term we're looking for. In this case we use the id column to do the matching.
Glossary
Make it dynamic
So this is pretty smart, but what makes all this database interaction really clever is the ability to dynamically interact with the data on the server.
Let's say we want to add entry to our glossary.
Now I might look daft, and it's not that you can't be trusted to keep it clean, but just click on the boxes and I'll fill them in.
Click the 'Submit Entry' box.
This will add a new entry to the database. An important thing to note here is the fact the we need to update our dropdown box; as we need to request the info again, from the server. The easiest way to do this is to refresh the page. So press the trusty F5 key, and check the dropdown box again for the latest entry. You'll see that a time stamp has been concatenated on the end of the explanation, to prove I'm not lying.
COM Port Settings - Hard coded to start with (set to COM 5).
Port No - Not connected
Baud Rate - Not connected
Parity - Not connected
Data bits - Not connected
Stop bits - Not connected
Flow Control - Not connected
Com Port control.
Message sent to com port will appear below.
Not connected
To test this, the serial port of the browsing laptop (COM 5 via a USB to serial converter) is hooked up to an old IBM thinkpad running hyperterminal with a standard 2-3-5 null modem cable.
Click 'on' or 'off', and the message is sent via the serial port to our thinkpad.
E' voila'.
Big deal...
It might be a bit more useful if we can hook it up to an xml feed for something like the beeb's backroom weather feed.
Salisbury weather feed from the BBC
It'll tell us that today's maximum temperature is going to be 13°C.
So we can be proactive and use that info to do something useful, like sending some control data via our serial port to save our seedlings. i.e.
Conditions are forecast to perfect for growing. Leave the greenhouse alone.
I took this screengrab on a cold day in February. The temp was forecast to be 6°C. So the following message was sent to my dummy greenhouse controller.
In real life we'd obviously send it some 0's and 1's, but that'll do for now.
Let's say your site contains a huge amount of information that, when you examine your source code is quite frankly lost in HTML. This makes it tricky for your users to find what they're looking for and a real pain for you to update.
So what can we do about it. For demo purposes, we'll have a look at a really simple glossary.
We draw a table on a piece of paper, with the following headings at the top of each column:-
- Term - the subject that we want to talk about.
- Explanation - The actual content or the wordy bit.
Now, each row in the table can represent one of our glossary entries. Chances are, your web host will provide this feature on their server, so if we can store the information there; it can be retrieved as and when it's required. Here's a screen grab from the actual database table on the intstix server.
Notice that the options match the entries in the term column in our database table. This the php script in action. When the page loads, the script runs throught the database table gathering, in this case, all the entries.
We can then select the term that we want an explanation for. When we click FIND, our script requests from the server the explanation that matches the term we're looking for. In this case we use the id column to do the matching.
Now I might look daft, and it's not that you can't be trusted to keep it clean, but just click on the boxes and I'll fill them in.
Click the 'Submit Entry' box.
This will add a new entry to the database. An important thing to note here is the fact the we need to update our dropdown box; as we need to request the info again, from the server. The easiest way to do this is to refresh the page. So press the trusty F5 key, and check the dropdown box again for the latest entry. You'll see that a time stamp has been concatenated on the end of the explanation, to prove I'm not lying.
Quick sharp data transfer...
Enter data in the box and submit. Sends data to the server formatted as JSON and back the page.
