Code of MySQL_Demo

See the previous page for an introduction to this demonstration. This page shows the code of the main unit, the XML representation of the form and some additional CSS code to format the display. The next page shows the code of four PHP scripts that we used in the project.

unit Form1;

interface

uses
  w3system, w3graphics, w3components, w3forms, w3fonts, w3borders,
  w3application, W3Elements, W3Button, W3EditBox, W3Time, W3Panel,
  W3ComboBox, W3ScrollBox, W3Label, W3Storage;
type
  TForm1=class(TW3form)
  private
    {$I 'Form1:intf'}
    strPrograms, strPHP, strSurnames, strIDs : String;
    Surnames, IDs : array of String;
    FTimerSurnames, FTimerIDs, FTimerPrograms: TW3Timer;
    panel1: TW3Panel;
  protected
    procedure InitializeObject; override;
    procedure GetIDs;
    procedure GetSurnames;
    procedure GetPrograms;
    procedure HandleClicks(Sender:TObject);
    procedure HandleUpdateIDs(Sender:TObject);
    procedure HandleUpdateSurnames(Sender:TObject);
    procedure HandleUpdatePrograms(Sender:TObject);
  end;

implementation

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  panel1 := TW3Panel.Create(W3ScrollBox1.Content);
  panel1.SetBounds(0, 0, 650, 2200);
  panel1.Color := clGray;
  FTimerSurnames := TW3Timer.Create;
  FTimerIDs := TW3Timer.Create;
  FTimerPrograms := TW3Timer.Create;
  FTimerPrograms.Enabled := False;
  FTimerSurnames.Enabled := False;
  W3ComboBox1.OnClick := HandleClicks;
  GetIDs;
  FTimerIDs.OnTime := HandleUpdateIDs;
  FTimerSurnames.OnTime := HandleUpdateSurnames;
  FTimerPrograms.OnTime := HandleUpdatePrograms;
  FTimerIDs.Delay := 100;
  FTimerPrograms.Delay := 100;
  FTimerSurnames.Delay := 100;
  FTimerIDs.Enabled := True;
end;

procedure TForm1.HandleClicks(Sender : TObject);
begin
  strPHP := 'get_programs.php?q=' + IDs[W3ComboBox1.SelectedIndex];
  FTimerPrograms.Enabled := True;
  GetPrograms;
end;

procedure TForm1.GetIDs;
begin
  asm
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
    @strIDs = '';
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      @strIDs = xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","get_ids.php",true);
    xmlhttp.send();
  end;  //asm
end;

procedure TForm1.GetSurnames;
begin
  asm
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
    @strSurnames = '';
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      @strSurnames = xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","get_surnames.php",true);
    xmlhttp.send();
   end;  //asm
end;

procedure TForm1.GetPrograms;
begin
  asm
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
    @strPrograms = '';
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      @strPrograms = xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET",@strPHP,true);
    xmlhttp.send();
  end;  //asm
end;

procedure TForm1.HandleUpdateIDs(Sender:TObject);
begin
  if strIDs <> '' then
    begin
      FTimerIDs.Enabled := False;
      IDs := strSplit(strIDs, ',');
      GetSurnames;
      FTimerSurnames.Enabled := True;
    end;
end;

procedure TForm1.HandleUpdateSurnames(Sender:TObject);
var
  strCurrent : string;
begin
  if strSurnames <> '' then
    begin               // populate controls soon as data received
      FTimerSurnames.Enabled := False;
      strPHP := 'get_programs.php?q=' + IDs[1];
      FTimerPrograms.Enabled := True;
      GetPrograms;
      Surnames := strSplit(strSurnames, ',');
      for strCurrent in Surnames do
         W3ComboBox1.add(strCurrent);
      W3ComboBox1.SelectedIndex := 1;
    end;
end;

procedure TForm1.HandleUpdatePrograms(Sender:TObject);
begin
  if strPrograms <> '' then
    begin
      FTimerPrograms.Enabled := False;
      panel1.InnerHTML := strPrograms;
    end;
end;

end.

We use a single form, combo box and label so use their default names.

XML Code of the form

<?xml version="1.0" encoding="utf-16"?>
<SFM>
  <W3Form clsid="TW3Form">
    <name>Form1</name>
    <left>0</left>
    <top>0</top>
    <width>200</width>
    <height>64</height>
    <enabled>1</enabled>
    <visible>1</visible>
    <angle>0</angle>
    <border.radius>0</border.radius>
    <alpha.blend>0</alpha.blend>
    <opacity>255</opacity>
    <zoom>1</zoom>
    <style.name>TW3Form</style.name>
    <tag.value>0</tag.value>
    <color>clNone</color>
    <transparent>0</transparent>
    <children>
      <W3ComboBox clsid="TW3ComboBox">
        <name>W3ComboBox1</name>
        <left>16</left>
        <top>48</top>
        <width>200</width>
        <height>24</height>
        <enabled>1</enabled>
        <visible>1</visible>
        <angle>0</angle>
        <border.radius>0</border.radius>
        <alpha.blend>0</alpha.blend>
        <opacity>255</opacity>
        <zoom>1</zoom>
        <style.name>TW3ComboBox</style.name>
        <tag.value>0</tag.value>
        <color>clNone</color>
        <transparent>0</transparent>
      </W3ComboBox>
      <W3ScrollBox clsid="TW3ScrollBox">
        <name>W3ScrollBox1</name>
        <left>16</left>
        <top>88</top>
        <width>696</width>
        <height>600</height>
        <enabled>1</enabled>
        <visible>1</visible>
        <angle>0</angle>
        <border.radius>0</border.radius>
        <alpha.blend>0</alpha.blend>
        <opacity>255</opacity>
        <zoom>1</zoom>
        <style.name>TW3ScrollBox</style.name>
        <tag.value>0</tag.value>
        <color>clNone</color>
        <transparent>0</transparent>
      </W3ScrollBox>
      <W3Label clsid="TW3Label">
        <name>W3Label1</name>
        <left>256</left>
        <top>8</top>
        <width>321</width>
        <height>24</height>
        <enabled>1</enabled>
        <visible>1</visible>
        <angle>0</angle>
        <border.radius>0</border.radius>
        <alpha.blend>0</alpha.blend>
        <opacity>255</opacity>
        <zoom>1</zoom>
        <style.name>TW3Label</style.name>
        <tag.value>0</tag.value>
        <color>clNone</color>
        <transparent>0</transparent>
        <text>&lt;h2&gt;Student Programs&lt;/h2&gt;</text>
      </W3Label>
    </children>
  </W3Form>
</SFM>

Code added to CSS File

table, td, th
{
border:1px solid red;
}
th
{
background-color:red;
color:white;
padding: 8px;
}
td
{
padding: 5px;
color:yellow;
}

a:link {color:#0000FF;}    /* unvisited link */
a:visited {color:purple;}  /* visited link */
a:hover {color:#00FF00;}   /* mouse over link */
a:active {color:#FFFFFF;}  /* selected link */
Programming - a skill for life!

Loading data from a MySQL database on the website