Posts

Showing posts from 2011

HTML <div> tag revisited

Image
I was abruptly forced to revisit this topic when I discovered that my <div> tag laid out login page, which seemed to look so great in Windows Internet Explorer (see below), looked absolutely crap in Firefox (see further below). So I did some reading, and the theme seemed to be that tables were never intended to do layout. Well I reckon there should be a counter argument, that the <div> tag was never intended to present data. It seems to me that much of the orthodoxy around HTML is written by graphic artists or publishers, and most of the web sites purported to show the power of <div> tags and CSS, are littered with graphic art and fancy fonts. For anyone used to programming, meshing <div> tags and CSS is not technically difficult, but perhaps it is not second nature to graphic artists and literary publishers. The instructions emphasize the importance of closing tags, and they suggest using borders during the design phase to get a visual aid o

Bringing a Custom Swing Component to Life

Image
I am sometimes down on the Java documentation, but in the sand plains of lugubrious and often confusing material there is the occasional gem. One example is a lesson from The Java Tutorial entitled Performing Custom Painting . I was directed to it by a reply to this thread in the Oracle Java Desktop forum . When I first began my efforts to create a rainbow colored Gaussian distribution curve I began with one of the Tutorial lessons on colors. I have unfortunately lost the URL for the lesson but the code began something like this: import java.awt.Color; import java.awt.Graphics; import java.awt.Graphics2D; import javax.swing.JFrame; import javax.swing.JPanel; public class Colors extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2d = (Graphics2D) g; g2d.setColor(new Color(255, 0, 0));//vivid red g2d.fillRect(10, 15, 90, 60); ... } public static void main(String[] args) { JFrame frame = new JFrame("Colors"); frame.s

Creating a Custom Swing Component

Image
I always return to my blog when I'm stuck, and I'm stuck right now. I want to create a custom Swing component. Specifically, I want something like a JProgressBar , with the following changes: In place of a flat Foreground color, I want a rainbow spectrum, showing only the red range for low Values, and the whole spectrum for values close to the Maximum value; Instead of a rectangular box, I want the progress "bar" to take the shape of a normal, or Gaussian, distribution curve; I want progress to be displayed by the area under the curve, rather than by a simple linear scale along the x axis. It's not that there isn't stuff out there. I have five tabs open in my browser, specifically addressing the creation of custom components in Swing, as well as the source code for the JProgressBar . It is that, like everything to do with Java, it is bloody difficult to read. I shall begin from the horse's mouth as it were, with an article on the Java

Mixing and Matching

My unfamiliarity with PHP and JavaScript is illustrated by the fact that it has only just occurred to me that I don't have to choose between one or the other, but can in fact enjoy both. So for example, bringing my Add User screen into the PHP fold was simply a matter of changing the file extension and adding: session_start(); at the top of the file. Everything else remained the same. All the JavaScript remained untouched, all the business rules remained the same, and if the business rules were satisfied, the same PHP file was called to run the data transaction. For display purposes the username was called, and usertype was called to ensure only administrators added to the database. I had also been scratching my head about passing PHP variables back to the Applet to enrich the data stored in my database, but then it finally sunk into my head that they didn't need to be passed backwards and forwards. Variables (such as username, and IP) gathered by PHP, could

Security Points

The first point, about the security of my web site , is that Active Math Java is a test bed for code developed for the Rasch-ItemBank open source project . It is intended as a free resource for use by any child anywhere in the world with access to a computer connected to the Internet and running Java. So the purpose of my login page is not to secure a web resource for which users pay money. Nor is it like a forum, where the login page protects the forum from spammers. It is simply there for the convenience of certain users who have requested the ability to track the performance of their children. The second point, about the security of web sites in general, is that secure pages usually include a server side script, such as PHP, and if security is desired, all the pages have to be in the same or compatible format. Using PHP has some advantages, besides security, such as retaining variables across pages, within sessions. I have enjoyed writing business rules in JavaSc

Add User to Database

Image
Having created an HTML layout and an external CSS page, and having written business rules for a login page, creating a page with a form to add users to the database was relatively easy. The layout was almost identical to the login screen, except for what I call combo boxes for the age of the student users, and to comply with convention, a password confirmation field. But for that convention, the business rules could have been cut and pasted verbatim from the login page, and that would have made the job nice and easy. Identification of users is not mission critical for me, and if teachers can't record and type in accurately a password on the first attempt, my first instinct was to say "who cares?". But part of the point of this exercise is to make my web site/application look "professional", so I put in the second field. The login rules comprised four independent conditions nested within a super condition, triggered by any of the four being met

Check Login Details against the Database

Image
After rewriting my business rules in JavaScript , the time now really had come to create the live database interface. So I busily changed the file extension back to .php and added back the include() statement, and started adding PHP code to the JavaScript function called by the button click event, and paused when I needed to pass a javascript variable to PHP. I had a feeling that what I was doing would not work, and a quick Google search confirmed that it would not. The whole point of converting my business rules to JavaScript was to keep the field input checking local. But as PHP scripts run on the server, you need to call something on the server, and pass any variables to that. It was a bit frustrating because neither of the login page examples I'd found on the web used any business rules at all; they just called a PHP script from the form submit button, one on the same page, one on another. As a first pass I tried AJAX. I had sidestepped the issue in my busine

JavaScript Business Rules

In my last two entries, I created the front end interface for a login screen, and wrote a couple of simple business rules in a PHP script to ensure both username and password fields are filled before running a query on the database. The time has now come to write the query and check it against the field entries. Reading tutorials on the topic, I am first fascinated by the level of paranoia and then I become paranoid myself. So instead of getting on with writing a query, I add another business rule prohibiting usernames or passwords over eight characters. Eight is the length of the fields in the database, so it is as silly for users to enter 9 characters as no characters, so I might as well stop them doing it. It won't stop every SQL injection exploit, but it will preclude them from attempting to write essays. I'm looking at a couple of tutorials for inspiration. They both use different SQL injection protection code. One uses the ereg() function, which i

PHP Business Rules

Image
The purpose of the business rules layer is to prevent gibberish being written to a database. If you have a field designated to record currency values, you don't want someone posting a long letter to their mother to it. Of course if you try to write text to a numeric field the database itself will probably reject it, but doing so wastes server resources and risks corrupting the database. And in an age of web applications, where servers and clients are separated by long distance and heavy traffic, sending redundant requests to the server wastes time and annoys the user. There are two aspects to the business rules layer: The coded rules; The front end manifestation when one or more of the conditions set out in the rules is not met. In the olden days, if you tried to make an illegal entry into a database field, a new window or dialog box opened up with a rude message, and sometimes the computer would beep at you. The dialog box would then have to be closed manually b

Creating a login page

Image
There are three steps to creating a login page, or really any page which exchanges information with a database. Creating the front end interface; Writing the business rules; Writing the interface with the database. In a previous post I already described a form which added records to a data table. In that example I was a bit sloppy, because I omitted any business rules code. My excuse was that the data table in that example was intended to be populated automatically, so the input form would never be used in real life. I am now dealing with a request from a school to track student performance, so I have to create a manual database portal or interface for them. The first step is the login screen. At a trivial level, this is just a couple of fields and a button, so not much thought needs to go into it. But as I am using the exercise to stimulate a web site redesign, I have chosen to go a little deeper. My usual method of making forms look reasonably neat is to shove the

Web site redesign

Image
In my quest to get my Applet talking to a commercially hosted MySQL database, I was forced to update my knowledge of a number of related areas, including HTML. Coincidentally, I get a lot of spam telling me how dreary and old fashioned my MS Front page designed website is. A school has asked for a private portal to the Applet , and I want the page to remain outside the main website navigation structure. I could just give them a form on a plain page. Or I could use the opportunity to play with HTML layouts and CSS. My favorite tutorial site, W3schools , has a nice sample layout , similar to their own. I have adapted this with my own colors and text. I have also changed the behavior of links, so that they look more like surrounding test, except when they are hovered over. My HTML was as follows: <html> <head> <title>Active Math Java Private Portal</title> <style type="text/css"> a:link {text-decoration:none;} /* unvisited

Applet to AJAX to PHP methodology

I have an Applet, which adds lines to a database one at a time, by sending an SQL string via AJAX to a PHP script. The Applet data insertion method is as follows: private void addItem3(String newWord) { if(LIVE) { if(jso != null ) try { jso.call("updateWebPage", new String[] {newWord}); } catch (Exception ex) { addItem2("jso call failed... "); ex.printStackTrace(); } } } Where the parameter newWord being passed to that method might look like: INSERT INTO mytable (Partid, OpCode, ItemLeft, ItemRight, Raw, Rate) VALUES (684, 1, 2, 5, 1, 34) The JavaScript function updateWebPage and the PHP script were given in my previous post , so I won't repeat them here. The thing is, even a single instance of the Applet can generate new lines very quickly, sometimes once a second. So a classroom of 25 students might generate 25 lines a second. How will my ISP server react to all these requests to open a connection, insert a single line of data, and close the c

Applet to JavaScript to PHP post to Database

Image
This post brings together the previous two. In the first , I called PHP code from a JavaScript function using an AJAX command. In the second , I passed an SQL command to a JavaScript function. In this post I describe bringing the two together. Instead of simply displaying the SQL in a text box on the web page, passing it to a PHP file. The applet code was unchanged, but the JavaScript function was extended from: <script type="text/javascript"> function updateWebPage(myArg) { document.getElementById("txt1").innerHTML=myArg; } </script> to: <script type="text/javascript"> function updateWebPage(myArg) { document.getElementById("txt1").innerHTML=myArg; if (myArg=="") { document.getElementById("cbxItem").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObje

Pass SQL command from Applet to JavaScript function

Image
My last post recorded an important milestone for me, because I managed to call PHP code from a JavaScript function. On an earlier occasion, I had managed to call a JavaScript function from an Applet. My next task was to put the two together, and I did this in two steps the first of which (reported in the current post) was to adapt the previous Applet to JavaScript example to display an SQL command. This was essentially a cosmetic exercise, but it acted as a refresher on the code. The only change to the Applet code was to replace "Hello World" with an SQL string. There is no need to reprint that here as it was given in my previous post on the topic. In the HTML, I modified the table to display the Applet above the text box, and I widened them both. I also removed the update Applet function, as it was not required for the current exercise. It was then as follows: <html> <body> <script type="text/javascript"> function updateWeb

PHP and JavaScript/AJAX database query

Image
Including the term JavaScript here is tautologous really because AJAX written out in full is Asynchronous JavaScript and XML. But as combining PHP and JavaScript has become something of a holy grail for me, I thought I'd include it anyway. In fact my September 9 blog entry was originally posted under the title PHP and JavaScript (so keen was I to use it), until I reflected on the text overnight and realised there was actually nothing about JavaScript in the post. I have been running around in circles a bit over the last couple of months, but they have been good circles, because they have enriched my understanding of a number of web related topics. And my current circle has taken me back to the generally excellent and easy to follow W3Schools website. In my post on their AJAX tutorial, I bemoaned that fact that their exchanging data with a server example only read data from a "measly old text file", rather than a database. However, had I dug deeper i

Simple Web Application – Delete Data line

Image
Once again I should like to acknowledge the Virginia Tech Simple Web Application sample code, which provided a template for this little project, which has really helped to improve my practical understanding of PHP. Having said that, the code, required to delete lines from the database, is pretty slim. Once again I bloated it out with some diagnostic HTML, just to check the query. I hate running blind. The bloated code was as follows: <?php $id = $_GET['id']; if (empty($id)) { Header("Location: listcontacts.php"); exit; } include('dbinfo.php');// collect database variables and connect. $con = mysql_connect( $dbhost, $dbuser, $dbpass ); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db($dbname, $con); $query = "DELETE FROM mytable WHERE Itemid=".$id; $result = mysql_query($query) or die(mysql_error()); mysql_close($con); //close connection because job finished // Header("Location: jsphp4.php"); //r