Instructions to Add Bootstrap to OfficeSales.php

Start with OfficeSales.php and follow these directions.

1.
<?php include('_global.php'); ?>
<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Office Sales Bootstrap</title>

  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
  <center>
  <font face="helvetica,arial">

<div class="container panel panel-default">
  <header class="jumbotron">
    <a href="javascript:window.location.href=window.location.href"><img class="img-fluid" style="max-width:100%; height:auto;" src="logo.jpg"></a>
  </header>
  <main>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="form-horizontal">
      <div class="form-group">
        <label class="col-xs-5 col-sm-offset-1 col-sm-3 text-right control-label">
          Choose an Office:
        </label>
        <div class="col-xs-6 col-sm-3">
          <select name="OfficeID" onchange="javascript:this.form.submit()" class="form-control">
<?php
            $OfficeID = $_REQUEST['OfficeID']*1;

            $return = mysql_query("SELECT * FROM OFFICE ORDER BY OfficeLocation", $conn);
            $message = mysql_error($conn);

            while($record = mysql_fetch_assoc($return))
            {
              if($OfficeID == 0) $OfficeID = $record['OfficeID'];

              echo '<option ';

              if($OfficeID == $record['OfficeID']) echo 'selected="selected"';

              echo ' value="'.$record['OfficeID'].'">'.$record['OfficeLocation']."</option>\n";
            }
?>
          </select>
          <br><br>
        </div>
      </div>

      <div class="form-group">
        <div class="col-xs-12 col-sm-offset-1 col-sm-9">
          <table width="900" border="1" cellspacing="0" cellpadding="5" class="table table-bordered table-striped table-condensed">
            <tr>
              <th>
                <th align="left"><span class="col-xs-3">Agent Name</span></th>
                <th><span class="col-xs-2 text-center">SaleID</span></th>
                <th align="right"><span class="col-xs-2 text-right">Amount</span></th>
                <div class="col-xs-5">
                  <div class="form-group">
                    <th align="left"><span class="col-xs-10 col-xs-offset-2 col-sm-5 col-sm-offset-1">Date</span></th>
                    <th align="left"><span class="col-xs-10 col-xs-offset-2 col-sm-5 col-sm-offset-0">Destination</span></th>
                  </div>
                </div>
              </th>
            </tr>
<?php
            $sql = "SELECT * 
                FROM SALE LEFT JOIN AGENT ON AgentKey=AgentID LEFT JOIN DESTINATION ON DestinationID=DestinationKey
                WHERE OfficeKey='$OfficeID'
                ORDER BY AgentName, SaleDate";

            $sales = mysql_query($sql, $conn);
            $message = mysql_error($conn);
            $t = 0;
            while($sale = mysql_fetch_assoc($sales))
            {
?>
              <tr>
                <td>
                  <td><span class="col-xs-3"><?php echo $sale['AgentName']; ?></span></td>
                  <td align="center"><span class="col-xs-2 text-center"><?php echo $sale['SaleID']; ?></span></td>
                  <td align="right"><span class="col-xs-2 text-right"><?php echo '$'.number_format($sale['Amount'],2); $t += $sale['Amount']; ?></span></td>
                  <div class="col-xs-5">
                    <div class="form-group">
                      <td><span class="col-xs-10 col-xs-offset-2 col-sm-5 col-sm-offset-1"><?php echo date('M j, Y',strtotime($sale['SaleDate'])); ?></span></td>
                      <td><span class="col-xs-10 col-xs-offset-2 col-sm-5 col-sm-offset-0"><?php echo $sale['DestinationName']; ?></span></td>
                    </div>
                  </div>
                </td>
              </tr>
<?php
            }
?>
            <tr>
              <th>
                <th align="left"><span class="col-xs-3">Total</span></th>
                <th><span class="col-xs-2"></span></th>
                <th align="right"><span class="col-xs-2 text-right"><?php echo '$'.number_format($t,2); ?></span></th>
                <th><span class="col-xs-5"></span></th>
              </th>
            </tr>
          </table>
          
        </div>  
      </div>
    </form>
    </font>
    </center>
  </main>
</div>

</body>
</html>

When you are done your file should look something like OfficeSalesBootstrap.php.



Back