index.html

<!DOCTYPE html>
<html>
<head>
  <title>Functional Dependency Calculator Web Service</title>
  <link href="//current.bootstrapcdn.com/bootstrap-v204/css/bootstrap-combined.min.css" rel="stylesheet">

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript">
    function nl2br(input_string)
    {
      return input_string.replace(/(\r\n|\r|\n)/g, '<br>');
    }

    $(document).ready(function(){
      $('#submit').click(function() {

        var rString = 'r=' + $('#r').val();
        var fString = 'f=' + $('#f').val();

        $.ajax({
          type : 'GET',
          url : 'nf?' + rString + '&' + fString,
          success : function(text) { $('#nf').html(text); }
        });

        $.ajax({
          type : 'GET',
          url : 'fmin?' + fString,
          success : function(text) { $('#fmin').html(nl2br(text));  }
        });

        $.ajax({
          type : 'GET',
          url : 'keys?' + rString + '&' + fString,
          success : function(text) { $('#keys').html(text); }
        });

        $.ajax({
          type : 'GET',
          url : 'primaryattributes?' + rString + '&' + fString,
          success : function(text) { $('#primaryattributes').html(text); }
        });

        $.ajax({
          type : 'GET',
          url : 'secondaryattributes?' + rString + '&' + fString,
          success : function(text) { $('#secondaryattributes').html(text); }
        });

        $.ajax({
          type : 'GET',
          url : 'bcnfs?' + rString + '&' + fString,
          success : function(text) { $('#bcnfs').html(nl2br(text)); }
        });

        $.ajax({
          type : 'GET',
          url : 'd3nfs?' + rString + '&' + fString,
          success : function(text) { $('#d3nfs').html(nl2br(text)); }
        });

        return false;
      });
    });
  </script>

</head>

<body>
  <h1>Functional Dependency Calculator Web Service</h1>
  <h2>AJAX form</h2>
  <div id="form_wrapper">
      <form action="" id="demoForm" method="get">
          <fieldset>
              <legend>Input</legend>
              <div>
                  <label for="r">relational schema:</label>
                  <input type="text" name="r" id="r" value="abcde" />
              </div>
              <div>
                  <label for="f">functional dependency set:</label>
                  <input type="text" name="f" id="f" value="ab->cd, b->e, d->e" />
              </div>
              <div>
                  <input type="submit" name="submit" id="submit" value="Submit" />
              </div>
          </fieldset>

          <fieldset>
              <legend>Results</legend>
              <table border="1" cellspacing="0" cellpadding="3">
                  <tr><td>normal form</td><td id="nf"></td></tr>
                  <tr><td>fmin</td><td id="fmin"></td></tr>
                  <tr><td>keys</td><td id="keys"></td></tr>
                  <tr><td>primary attributes</td><td id="primaryattributes"></td></tr>
                  <tr><td>secondary attributes</td><td id="secondaryattributes"></td></tr>
                  <tr>
                    <td>BCNF decompositions</td>
                    <td id="bcnfs"></td>
                  </tr>
                  </tr>
                  <tr>
                    <td>3NF decompositions</td>
                    <td id="d3nfs"></td>
                  </tr>
              </table>
          </fieldset>

      </form>
  </div>

  <h2>HTTP examples</h2>
  <ul>
    <li><a href="json?r=abcde&f=ab->cd, b->e, d->e,e->d">json</a></li>
    <li><a href="nf?r=abcdef&f=a->b,b->c,c->a,d->e,e->f,f->d">nf</a></li>
    <li><a href="fmin?f=a->b,b->d,a->d">fmin</a></li>
    <li><a href="keys?r=abcdef&f=a->b,b->c">keys</a></li>
    <li><a href="primaryattributes?r=abcdef&f=a->b,b->c">primaryattributes</a></li>
    <li><a href="secondaryattributes?r=abcdef&f=a->b,b->c">secondaryattributes</a></li>
    <li><a href="bcnfs?r=abcde&f=ab->cd, b->e, d->e">bcnf</a></li>
    <li><a href="bcnfs?r=itkoscmpd&f=it->os">bcnf timeout</a></li>
    <li><a href="d3nfs?r=abcde&f=ab->cd, b->e, d->e">d3nfs</a></li>
  </ul>
</body>
</html>