index.php

<script src="./js/main.js"></script>
<script src="./js/jquery-3.1.1.min.js"></script>

<!DOCTYPE html>
<html>
<title>SST Typing Competition</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="fonts/raleway.css">
<link rel="stylesheet" href="fonts/font-awesome.min.css">
<style>
    html,
    body,
    h1,
    h2,
    h3,
    h4,
    h5 {
        font-family: "Raleway", sans-serif
    }
</style>

        <?php
    // Include Password File
include 'password.php';
    
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
    $nameErr = "Name is required";
  } else {
    $name = test_input($_POST["name"]);
    // check if name only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
      $nameErr = "Only letters and white space allowed"; 
    }
  }
}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>
    
<body class="sst-light-grey">

    <!-- Top container -->
    <div class="sst-container sst-top sst-black sst-large sst-padding" style="z-index:4">
        <span class="sst-right"><a href="http://sstctf.org" style="text-decoration: none">SST CTF</a></span>
    </div>

    <!-- Overlay effect when opening sidenav on small screens -->
    <div class="sst-overlay sst-hide-large sst-animate-opacity" onclick="sst_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>

    <!-- PAGE CONTENT -->
    <div class="sst-main" style="margin-left:10px;margin-top:43px;margin-right:10px;">

        <!-- Header -->
        <header class="sst-container" style="padding-top:6px">
            <h5><b><i class="fa fa-dashboard"></i> 2017 SST Typing Competition</b></h5>
        </header>
        <div class="sst-row-padding sst-margin-bottom">
            <div class="sst-quarter">
                <div class="sst-container sst-blue sst-padding-16">
                    <div class="sst-left"><i class="fa fa-calculator sst-xxxlarge"></i></div>
                    <div class="sst-right">
                        <h3>Net/Gross WPM</h3>
                    </div>
                    <div class="sst-clear"></div>
                    <h4>
                        <div id="stat_wpm">Not Started</div>
                    </h4>
                </div>
            </div>
            <div class="sst-quarter">
                <div class="sst-container sst-red sst-padding-16">
                    <div class="sst-left"><i class="fa fa-exclamation-triangle sst-xxxlarge"></i></div>
                    <div class="sst-right">
                        <h3>Entry Errors</h3>
                    </div>
                    <div class="sst-clear"></div>
                    <h4>
                        <div id="stat_errors">Waiting...</div>
                    </h4>
                </div>
            </div>
            <div class="sst-quarter">
                <div class="sst-container sst-teal sst-padding-16">
                    <div class="sst-left"><i class="fa fa-bullseye sst-xxxlarge"></i></div>
                    <div class="sst-right">
                        <h3>Accuracy</h3>
                    </div>
                    <div class="sst-clear"></div>
                    <h4>
                        <div id="stat_score">Waiting...</div>
                    </h4>
                </div>
            </div>
            <div class="sst-quarter">
                <div class="sst-container sst-orange sst-text-white sst-padding-16">
                    <div class="sst-left"><i class="fa fa-clock-o sst-xxxlarge"></i></div>
                    <div class="sst-right">
                        <h3>Remaining Time</h3>
                    </div>
                    <div class="sst-clear"></div>
                    <h4>
                        <div id="stat_timeleft">0:00</div>
                    </h4>
                </div>
            </div>
        </div>


        <!-- Begin Old Code -->
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td style="padding: 10px" class="bodya" colspan="2">
                    <FORM name="JobOp">
                        <table border="0" cellpadding="5" width="100%">
                                    <div id="expectedArea" style="display:block">
                                        <p style="margin-top: 0; margin-bottom: 0">
                                                <textarea name="given" cols=53 rows=12 wrap=on onFocus="deterCPProtect();" style="width: 100%; border: 1px solid #344270; padding: 2px; font-size:12pt" onpaste="return false;">If you see this something broke.</textarea>
                                    </div>
                                <input style="display:none" type="hidden" name="start" onType="beginTest()">
                                <input style="display:none" type="hidden" name="stop" onEnd="endTest()" >
                            <table type="hidden" id="stProg" style="display:none">
                                                <div type="hidden" id="myBar" style="display:none">
                                                <div type="hidden" id="thisProg" style="display:none"></div>
                                                </div>
                            </table>
                            
                            <tr>
                                <td style="padding: 10px" class="bodya" colspan="2">
                                    <div id="typeArea" style="display:block">
                                        <p style="margin-top: 0; margin-bottom: 0">
                                                <textarea type="hidden" onkeypress="doCheck();" onkeydown="//calcStat()" name="typed" cols=53 rows=12 wrap=on onFocus="deterCPProtect();" style="width: 100%; border: 1px solid #344270; padding: 2px; font-size:12pt" onpaste="return false;"></textarea>
                                    </div>
                                    <div id="afterAction" style="display:none"></div>
                                </td>
                            </tr>
                            <script>
                                randNum = Math.floor((Math.random() * 10)) % intToTestCnt;
                                strToTestType = strToTest[randNum];
                                document.JobOp.given.value = strToTestType;
                                document.JobOp.typed.focus();
                            </script>
                        </table>
                    </FORM>
                </td>
            </tr>
        </table>
        <!-- End Old Code -->

        <!-- Submit Results to Database -->
        <form align: center; method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
            Name: 
            <input type="text" name="name" value="<?php echo $name;?>">
            <input type="submit" name="submit" value="Submit">
        </form>
        
        
        <!-- Footer -->
        <footer class="sst-container sst-padding-16 sst-light-grey">
            <br>
            <h4>FOOTER</h4>
            <p>Powered by <a href="http://sstctf.org" target="_blank">SST CTF</a></p>
            <p>Find project on <a href="http://sstctf.org" target="_blank">GitHub</a></p>
            <br>
            <input disabled id="printB" onclick="window.print();" type="button" value="Print Results" name="printB">
        </footer>
        <!-- End page content -->

        <!-- These scripts are useful if we need to implement navigation in the future. For now deprecated. -->
    </div>
    <script>
        // Get the Sidenav
        var mySidenav = document.getElementById("mySidenav");

        // Get the DIV with overlay effect
        var overlayBg = document.getElementById("myOverlay");

        // Toggle between showing and hiding the sidenav, and add overlay effect
        function sst_open() {
            if (mySidenav.style.display === 'block') {
                mySidenav.style.display = 'none';
                overlayBg.style.display = "none";
            } else {
                mySidenav.style.display = 'block';
                overlayBg.style.display = "block";
            }
        }

        // Close the sidenav with the close button
        function sst_close() {
            mySidenav.style.display = "none";
            overlayBg.style.display = "none";
        }
    </script>
</body>
    
    <?php
        //$message = "PHP LOADED";
        //echo "<script type='text/javascript'>alert('$message');</script>";
        
        echo "<h2>Your Input:</h2>";
        echo $name;
        echo $person;
        echo "\n";

$servername = "localhost";
$username = "www";
$dbname = "typing_test";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "INSERT INTO results (name, net_wpm, gross_wpm, error, accuracy)
VALUES ('$name', '0', '0', '0', '0')";

if ($conn->query($sql) === TRUE) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
        
        
        ?>
    
</html>