Page 1 of 1

Prepared Statement - Data verification against database

Posted: Sat Jan 26, 2019 11:38 am
by abaragambi
Hello All!

Just registered for a problem i'm having, thanks for your time!

I am trying to develop a training tool for my team. Essentially what the tool does is to compare a form input against the data in database. If true creates a new record in another table, if false returns corresponding error message. This is the main engine, along with that I'll have a login and password reset system, and an admin panel where admins can add verification information to database, and see training results.

server configuration: Apache/2.4.37 (Win32) OpenSSL/1.1.1a PHP/7.3.0

This tool will be used for business purposes however there is no profit involved. So any help would be appreciated. I have come so far but hit a road block when I started with sql statements. I have an index.php where I have main divs and form data, a config.php where there is mysql connection data and a post.php which is the action of the form in index.php. Please peruse all below:


Index.php

Code: Select all

 <?php
// Include config file
require_once "config.php";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MAIN</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>

<div id="wrap">
<div id="dbconn" align="center" style="float: left">
<?php
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
echo "Database Connection Succesfull";

	
?> 
</div>
<div id="header" align="center">
	<form id="headerbutton" name="headerbutton" action='../post.php'>
	<input type="hidden" value="3" name="invid">
	<button type="button" value="original" onClick="alert('Original!')" class="headerbutton">Original</button>	
	<button type="submit" name="postinvoice" value="Post" class="headerbutton" style="background: #B04244">Post</button>
	<button type="button" value="Post" onClick="alert('Simulation')" class="headerbutton">Simulate</button>
	<button type="button" value="assistant" onClick="alert('Assistant Off!')" class="headerbutton">Assistant</button>
	<div id="goback" align="right">
		<button type="button" value="Back to Main Screen" onClick="alert('Goes Back to Main Screen')" class="headerbutton">Back</button>
	</div>
</div>
	
<div id="right">

<h2><a>Assistant</a></h2>
<iframe src="assistant.html" height="50" width="900" frameborder="0"></iframe>

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Header')">Header Data</button>
  <button class="tablinks" onclick="openTab(event, 'Further_Info')">Further Information</button>
  <button class="tablinks" onclick="openTab(event, 'Local')">Local Currency</button>
  <button class="tablinks" onclick="openTab(event, 'BankData')">Bank Data</button>
  <button class="tablinks" onclick="openTab(event, 'VendorData')">Vendor Data</button>
  <button class="tablinks" onclick="openTab(event, 'TaxData')">Tax Data</button>
</div>

<div id="Header" class="tabcontent">
	  <div align="justify" class="wrap">
			<div align="right" id="vendordata" class="form-style-3-vendor" style="float: right">
				VendorXXXXXX <br>
				<input type="text" name="vendorname1" maxlength="15" align="right"  height="5" size="40" disabled><br>
				<input type="text" name="vendorname2" maxlength="15"  height="5" size="40" disabled><br>
				<input type="text" name="vendoraddress" maxlength="15"  height="5" size="40" disabled>
				<br>	<br>	<br>
				PO Box:<input type="text" name="vendorpobox"  height="5" maxlength="5" size="5" disabled><br>
				<input type="text" name="vendorcountry"  height="5" size="5" disabled><input type="text" name="vendorcity"  height="5" size="5" disabled><input type="text" name="vendoraddress" maxlength="2"  height="5" size="15" disabled> <br>
			</div>
			<div id="amountdata" class="form-style-3" style="float: right">
				Net Amount <input type="text" name="netmaount" maxlength="10" align="right"  height="5"><br>
				Unpl. Del. Cost<input type="text" name="delcost" maxlength="10"  height="5"><br>
				Amount <input type="text" name="amount" maxlength="10"  height="5">
				<br>	<br>	<br>
				Refernce <input type="text" name="reference" maxlength="10" height="5"><br>
				Doc. Header Text <input type="text" name="docheader" maxlength="7" height="5"><br>
				Trans. Type <input type="text" name="transtype"  height="5"><br>	
			</div>
			<div align="left" id="headerdata" class="form-style-3-left" style="float: left">
				Vendor:    <input type="text" name="vendoracc" maxlength="6" align="right" height="5" size="8"><br>
				Comp. Code:          <input type="text" name="compcode" maxlength="3"  height="5" size="5"><br>
				Invoice Doc Type<input type="text" name="doctype" maxlength="3"  height="5" size="3">
				<br>	<br>	<br>
				Document Date:<input type="date" name="docdate"  height="5" size="10" align="right"><br>
				Receipt Date:<input type="date" name="recdate"  height="5" size="10"><br>
				Posting Date:<input type="date" name="postdate"  height="5" size="10"><br>
				Post. Period:<input type="text" name="postperm" maxlength="2"  height="5" size="1"> Year:<input type="text" name="postpery" maxlength="4"  height="5" size="2"> <br>
			</div>
		</div>
	</div>
	<div id="Further_Info" class="tabcontent">
		<div align="justify" class="wrap">
			<div align="right" id="rightcolumn" class="form-style-3-vendor" style="float: right">
				Discount  Rate 1 <input type="text" name="discrate1" maxlength="2" align="right"  height="5" size="3" disabled> % <br>
				Discount  Rate 2<input type="text" name="discrate2" maxlength="2"  height="5" size="3" disabled> % <br>
				Payment Block <input type="text" name="paymentblock" maxlength="3"  height="5" size="3">
				<br>	<br>	<br>
				House Bank <input type="text" name="housebank"  height="5" size="2"  disabled><input type="text" name="reference"  height="5" size="2" disabled><br>
				Special G/L Ind. <input type="text" name="specialgl"  height="5" size="1"><br>
				Control Key <input type="text" name="cntrlkey"  height="5" size="1" disabled><br>
			</div>
			<div id="centercolumn" class="form-style-3" style="float: right">
				Days 1 <input type="text" name="day1" maxlength="6" align="right"  height="5" size="3"  disabled><br>
				Days 2<input type="text" name="days2" maxlength="3"  height="5" size="3" disabled><br>
				Days Net <input type="text" name="daysnet" maxlength="3"  height="5" size="3" disabled>
				<br>	<br>	<br>
				SupplierCntry <input type="text" name="vendorcountry"  height="5" size="3" disabled><br>
				PaymentMethod <input type="text" name="paymentmethod"  height="5" size="1"><br>
				PymntMthdSuppl. <input type="text" name="methodsupp"  height="5" size="1"><br>
			</div>
			<div align="left" id="leftcolumn" class="form-style-3-left" style="float: left">
				Term of Payment <input type="text" id="" name="paymentterm" maxlength="3" align="right" height="5" size="3"><br>
				Due Date Basis  <input type="date" name="duebase" maxlength="3"  height="5" size="8"><br>
				Due On <input type="date" name="dueon" maxlength="3"  height="5" size="8" disabled>
					<br>	<br>	<br>
				Business Area <input type="text" name="businessarea"  height="5" size="1" align="right"><br>
				SCB Indicator <input type="checkbox" name="scbind"  height="5" size="10"><br>
				Disc. Base <input type="date" name="discbase"  height="5" size="15"><br>
				Asssignment <input type="text" name="assignment" maxlength="2"  height="5" size="20">  <br>
			</div>
			<div align="right" id="bottom" class="form-style-3-text" style="float: right">
				Text <input type="text" name="furthertext" maxlength="2"  height="5" size="40">  <br>
			</div>
		</div>
	</div>
	<div id="Local" class="tabcontent">
		<div align="justify" class="wrap">
			<div align="left" id="leftcolumn" class="form-style-3-left" style="float: left">
				Translatn Date <input type="date" name="exchdate" maxlength="3" align="right" height="5" size="7">
				Exchange Rate  <input type="text" name="exchrate" maxlength="3"  height="5" size="7">
				Exchange Rate (Indirect Quot.) <input type="text" name="exchrateind" maxlength="3"  height="5" size="7" disabled>
					<br>	<br>	<br>
				Amount <input type="text" name="amount"  height="5" size="15" align="right" disabled><input type="text" name="docdate"  height="5" size="5" align="right" disabled><br>
				Am Loc Cur <input type="text" name="amountloccur"  height="5" size="15" disabled><input type="text" name="docdate"  height="5" size="5" align="right" disabled><br>
			</div>
		</div>
	</div>
	<div id="BankData" class="tabcontent">
		<div class="wrap" style="width: 640px">
			<div align="center" id="tableheader">
				<div align="left" id="country" class="table-header" style="float: left; width: 50px">
					<a class="header-text">Cntry</a>
				</div>
				<div align="left" id="bankno" class="table-header" style="float: left; width: 100px">
					<a class="header-text">Bank Number</a>
				</div>
				<div align="left" id="bankacc" class="table-header" style="float: left; width: 150px">
					<a class="header-text">Bank Account</a>
				</div>
				<div align="left" id="banktype" class="table-header" style="float: left; width: 30px">
					<a class="header-text">BnkT</a>
				</div>
				<div align="left" id="iban" class="table-header" style="float: left; width: 250px">
					<a class="header-text">IBAN</a>
				</div>
				<div align="left" id="swift" class="table-header" style="float: left; width: 60px">
					 <a class="header-text">Swift/BIC</a>
				</div>
			</div>
			<div align="center" id="tablefield">
				<div align="left" id="country1" class="table-field" style="float: left; width: 50px">
					<a class="field-text">Cntry</a>
				</div>
				<div align="left" id="bankno1" class="table-field" style="float: left; width: 100px">
					<a class="field-text">Bank Number</a>
				</div>
				<div align="left" id="bankacc1" class="table-field" style="float: left; width: 150px">
					<a class="field-text">Bank Account</a>
				</div>
				<div align="left" id="banktype1" class="table-field" style="float: left; width: 30px">
					<input type="checkbox" name="banktype1" align="middle">
				</div>
				<div align="left" id="iban1" class="table-field" style="float: left; width: 250px">
					<a class="field-text">IBAN</a>
				</div>
				<div align="left" id="swift1" class="table-field" style="float: left; width: 60px">
					 <a class="field-text">Swift/BIC</a>
				</div>
			</div>
		</div>
	</div>
	<div id="VendorData" class="tabcontent">
		<div class="wrap" style="width: 830px">
			<div align="center" id="tableheader">
				<div align="left" id="vendor" class="table-header" style="float: left; width: 60px">
					<a class="header-text">Vendor</a>
				</div>
				<div align="left" id="country" class="table-header" style="float: left; width: 30px">
					<a class="header-text">CTR</a>
				</div>
				<div align="left" id="vendorname1" class="table-header" style="float: left; width: 150px">
					<a class="header-text">Name 1</a>
				</div>
				<div align="left" id="vendorname2" class="table-header" style="float: left; width: 150px">
					<a class="header-text">Name 2</a>
				</div>
				<div align="left" id="vendorcity" class="table-header" style="float: left; width: 60px">
					 <a class="header-text">City</a>
				</div>
				<div align="left" id="vendorpostcode" class="table-header" style="float: left; width: 70px">
					 <a class="header-text">Postal Code</a>
				</div>
				<div align="left" id="vendorrg" class="table-header" style="float: left; width: 30px">
					 <a class="header-text">RG</a>
				</div>
				<div align="left" id="vendorstreet" class="table-header" style="float: left; width: 60px">
					 <a class="header-text">Street</a>
				</div>
				<div align="left" id="vendortaxno" class="table-header" style="float: left; width: 100px">
					 <a class="header-text">Tax Number 1</a>
				</div>
				<div align="left" id="vendorvat" class="table-header" style="float: left; width: 120px">
					 <a class="header-text">VAT Registration No</a>
				</div>
			</div>
			<div align="center" id="tablefield">
				<div align="left" id="vendor1" class="table-field" style="float: left; width: 60px">
					<a class="field-text">Vendor</a>
				</div>
				<div align="left" id="country1" class="table-field" style="float: left; width: 30px">
					<a class="field-text">CTR</a>
				</div>
				<div align="left" id="vendorname11" class="table-field" style="float: left; width: 150px">
					<a class="field-text">Name 1</a>
				</div>
				<div align="left" id="vendorname21" class="table-field" style="float: left; width: 150px">
					<a class="field-text">Name 2</a>
				</div>
				<div align="left" id="vendorcity1" class="table-field" style="float: left; width: 60px">
					 <a class="field-text">City</a>
				</div>
				<div align="left" id="vendorpostcode1" class="table-field" style="float: left; width: 70px">
					 <a class="field-text">Postal Code</a>
				</div>
				<div align="left" id="vendorrg1" class="table-field" style="float: left; width: 30px">
					 <a class="field-text">RG</a>
				</div>
				<div align="left" id="vendorstreet1" class="table-field" style="float: left; width: 60px">
					 <a class="field-text">Street</a>
				</div>
				<div align="left" id="vendortaxno1" class="table-field" style="float: left; width: 100px">
					 <a class="field-text">Tax Number 1</a>
				</div>
				<div align="left" id="vendorvat1" class="table-field" style="float: left; width: 120px">
					 <a class="field-text">VAT Registration No</a>
				</div>
			</div>
		</div>
	</div>
	<div id="TaxData" class="tabcontent">
		<div class="wrap" style="width: 760px">
			<div align="center" id="tableheader">
				<div align="left" id="taxprocedure" class="table-header" style="float: left; width: 40px">
					<a class="header-text">Proc</a>
				</div>
				<div align="left" id="taxcode" class="table-header" style="float: left; width: 30px">
					<a class="header-text">TX</a>
				</div>
				<div align="left" id="taxrate" class="table-header" style="float: left; width: 60px">
					<a class="header-text">Rate</a>
				</div>
				<div align="left" id="taxjuris" class="table-header" style="float: left; width: 100px">
					<a class="header-text">Tax Jurisdiction</a>
				</div>
				<div align="left" id="taxamount" class="table-header" style="float: left; width: 100px">
					 <a class="header-text">Tax Amount</a>
				</div>
				<div align="left" id="taxbase" class="table-header" style="float: left; width: 100px">
					 <a class="header-text">Base Ammount</a>
				</div>
				<div align="left" id="deducttax" class="table-header" style="float: left; width: 150px">
					 <a class="header-text">Deductible Tax Amount</a>
				</div>
				<div align="left" id="nondeducttax" class="table-header" style="float: left; width: 150px">
					 <a class="header-text">Non-Deduc. Tax Amount</a>
				</div>
				<div align="left" id="taxcur" class="table-header" style="float: left; width: 30px">
					 <a class="header-text">CUR</a>
				</div>
			</div>
			<div align="center" id="tablefield">
				<div align="left" id="taxprocedure1" class="table-field" style="float: left; width: 40px">
					<a class="field-text">Proc</a>
				</div>
				<div align="left" id="taxcode1" class="table-field" style="float: left; width: 30px">
					<a class="field-text">TX</a>
				</div>
				<div align="left" id="taxrate1" class="table-field" style="float: left; width: 60px">
					<a class="field-text">Rate</a>
				</div>
				<div align="left" id="taxjuris1" class="table-field" style="float: left; width: 100px">
					<a class="field-text">Tax Jurisdiction</a>
				</div>
				<div align="left" id="taxamount1" class="table-field" style="float: left; width: 100px">
					 <a class="field-text">Tax Amount</a>
				</div>
				<div align="left" id="taxbase1" class="table-field" style="float: left; width: 100px">
					 <a class="field-text">Base Ammount</a>
				</div>
				<div align="left" id="deducttax1" class="table-field" style="float: left; width: 150px">
					 <a class="field-text">Deductible Tax Amount</a>
				</div>
				<div align="left" id="nondeducttax1" class="table-field" style="float: left; width: 150px">
					 <a class="field-text">Non-Deduc. Tax Amount</a>
				</div>
				<div align="left" id="taxcur1" class="table-field" style="float: left; width: 30px">
					 <a class="field-text">CUR</a>
				</div>
			</div>
			</form>
		</div>
	</div>

<script>
function openTab(evt, postingtab) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(postingtab).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>

<br /><br />

	<div id="lineposting">
		<iframe src="linelevel.html" height="200" width="900" frameborder="0"></iframe>
	</div>	
</div>
<div id="left">
<h2>Left Panel</h2>
</div>

<div style="clear: both;"> </div>


</div>

</body>
</html>
config.php

Code: Select all

<?php
/* Database credentials*/
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', 'localhost');
define('DB_NAME', 'training_test');
 
/* Attempt to connect to MySQL database */
$link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
 
// Check connection
if($link === false){
    die("ERROR: Databse Connection Failed. " . mysqli_connect_error());
}
?>
post.php

Code: Select all

<?

// Include config file
require_once "config.php";

//select invoice data on database
$sqlpost = mysqli_query("SELECT vendor_no, com_code, doc_type FROM tra_test_1 WHERE ID=" . $invid ."");
$sqlinvdata = mysqli_fetch_array($sqlpost);

//form input variables
//first check if value exists - if so assign variable
if(isset($_POST['vendoracc'])){ $vendoracc = $_POST['vendoracc']; }
if(isset($_POST['compcode'])){ $compcode = $_POST['compcode']; }
if(isset($_POST['doctype'])){ $doctype = $_POST['doctype']; }
if(isset($_POST['docdate'])){ $docdate = $_POST['docdate']; }
if(isset($_POST['recdate'])){ $recdate = $_POST['recdate']; }
if(isset($_POST['postperm'])){ $postperm = $_POST['postperm']; }
if(isset($_POST['postpery'])){ $postpery = $_POST['postpery']; }
if(isset($_POST['paymentterm'])){ $paymentterm = $_POST['paymentterm']; }
if(isset($_POST['duebase'])){ $duebase = $_POST['duebase']; }
if(isset($_POST['businessarea'])){ $businessarea = $_POST['businessarea']; }
if(isset($_POST['scbind'])){ $scbind = $_POST['scbind']; }
if(isset($_POST['assignment'])){ $name = $_POST['assignment']; }
if(isset($_POST['paymentblock'])){ $paymentblock = $_POST['paymentblock']; }
if(isset($_POST['specialgl'])){ $specialgl = $_POST['specialgl']; }
if(isset($_POST['paymentmethod'])){ $paymentmethod = $_POST['paymentmethod']; }
if(isset($_POST['methodsupp'])){ $methodsupp = $_POST['methodsupp']; }
if(isset($_POST['furthertext'])){ $furthertext = $_POST['furthertext']; }
if(isset($_POST['banktype'])){ $banktype = $_POST['banktype']; }
if(isset($_POST['invid'])){ $invid = $_POST['invid']; }

$forminput = array($vendoracc, $compcode, $doctype);

if($_SERVER["REQUEST_METHOD"] == "POST"){
	// Validate Vendor Account
	 if(empty(trim($_POST["vendoracc"]))){
        $vendorno_err = "Please enter a Vendor Account."; }
	 // Validate Company Code
    if(empty(trim($_POST["compcode"]))){
        $compcode_err = "Please enter a Company Code."; }
	// Validate Doc Type
    if(empty(trim($_POST["doctype"]))){
        $doctype_err = "Please enter a Document Type."; }
	// Check input errors before inserting in database
    if(empty($vendorno_err) && empty($compcode_err) && empty($doctype_err)){
		if($sqlinvdata == $forminput) {
			 // Prepare an insert statement
			$sqlinsert = "INSERT INTO `c230136` (`id`, `invid`, `country`, `doctype`, `com_code`, `doc_date`, `currency`, `amount_net`, `del_cost`, `amount_gr`, `reference`, `doc_header`, `trans_type`, `po_no`, `paym_term`, `due_base`, `due_on`, `paym_block`, `bus_area`, `scb_ind`, `assignment`, `paym_method`, `spec_gl`, `paym_meth_supp`, `text`, `exch_date`, `bank_type1`, `bank_type2`, `bank_type3`, `vendor_no`, `tax_code`, `tax_rate`, `tax_base`, `tax_deduct`, `tax_nondeduct`, `result`) 
			VALUES (NULL, '?', '?', '?', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '')"	;
			if($stmt = mysqli_prepare($link, $sqlinsert)){
			// Bind variables to the prepared statement as parameters
			mysqli_stmt_bind_param($stmt, "iis", $param_vendoracc, $param_compcode, $param_doctype);
			// Set parameters
            $param_vendoracc = $vendoracc;
            $param_compcode = $compcode;
			$param_doctype = $doctype;
			if(mysqli_stmt_execute($stmt)){
                // Redirect to invoice list page
                header("location: index.php");
            	} else{
                echo "Connection Error.";
            	}
			}
		} else {
		echo "Posting error! Please try again!";
		}
	}
}

?>
I don't have much knowledge, I am just trying to make stuff up as I go :) sql statement is in post.php obviously. If anybody can tell me what I am doing wrong, I would be really thankful! Thank you very much.

Lastly I want to add that this is the exact same thing that I use in register page and there I don't have any problem. register.php below for your reference:

Code: Select all

<?php
// Include config file
require_once "config.php";
 
// Define variables and initialize with empty values
$username = $password = $confirm_password = "";
$username_err = $password_err = $confirm_password_err = "";
 
// Processing form data when form is submitted
if($_SERVER["REQUEST_METHOD"] == "POST"){
 
    // Validate username
    if(empty(trim($_POST["username"]))){
        $username_err = "Please enter a username.";
    } else{
        // Prepare a select statement
        $sql = "SELECT id FROM users WHERE username = ?";
        
        if($stmt = mysqli_prepare($link, $sql)){
            // Bind variables to the prepared statement as parameters
            mysqli_stmt_bind_param($stmt, "s", $param_username);
            
            // Set parameters
            $param_username = trim($_POST["username"]);
            
            // Attempt to execute the prepared statement
            if(mysqli_stmt_execute($stmt)){
                /* store result */
                mysqli_stmt_store_result($stmt);
                
                if(mysqli_stmt_num_rows($stmt) == 1){
                    $username_err = "This username is already taken.";
                } else{
                    $username = trim($_POST["username"]);
                }
            } else{
                echo "Oops! Something went wrong. Please try again later.";
            }
        }
         
        // Close statement
        mysqli_stmt_close($stmt);
    }
    
    // Validate password
    if(empty(trim($_POST["password"]))){
        $password_err = "Please enter a password.";     
    } elseif(strlen(trim($_POST["password"])) < 6){
        $password_err = "Password must have atleast 6 characters.";
    } else{
        $password = trim($_POST["password"]);
    }
    
    // Validate confirm password
    if(empty(trim($_POST["confirm_password"]))){
        $confirm_password_err = "Please confirm password.";     
    } else{
        $confirm_password = trim($_POST["confirm_password"]);
        if(empty($password_err) && ($password != $confirm_password)){
            $confirm_password_err = "Password did not match.";
        }
    }
    
    // Check input errors before inserting in database
    if(empty($username_err) && empty($password_err) && empty($confirm_password_err)){
        
        // Prepare an insert statement
        $sql = "INSERT INTO users (username, password) VALUES (?, ?)";
         
        if($stmt = mysqli_prepare($link, $sql)){
            // Bind variables to the prepared statement as parameters
            mysqli_stmt_bind_param($stmt, "ss", $param_username, $param_password);
            
            // Set parameters
            $param_username = $username;
            $param_password = password_hash($password, PASSWORD_DEFAULT); // Creates a password hash
            
            // Attempt to execute the prepared statement
            if(mysqli_stmt_execute($stmt)){
                // Redirect to login page
                header("location: login.php");
            } else{
                echo "Something went wrong. Please try again later.";
            }
        }
         
        // Close statement
        mysqli_stmt_close($stmt);
    }
    
    // Close connection
    mysqli_close($link);
}
?>
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign Up</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
    <style type="text/css">
        body{ font: 14px sans-serif; }
        .wrapper{ width: 350px; padding: 20px; }
    </style>
</head>
<body>
    <div class="wrapper">
        <h2>Sign Up</h2>
        <p>Please fill this form to create an account.</p>
        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
            <div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
                <label>Username</label>
                <input type="text" name="username" class="form-control" value="<?php echo $username; ?>">
                <span class="help-block"><?php echo $username_err; ?></span>
            </div>    
            <div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
                <label>Password</label>
                <input type="password" name="password" class="form-control" value="<?php echo $password; ?>">
                <span class="help-block"><?php echo $password_err; ?></span>
            </div>
            <div class="form-group <?php echo (!empty($confirm_password_err)) ? 'has-error' : ''; ?>">
                <label>Confirm Password</label>
                <input type="password" name="confirm_password" class="form-control" value="<?php echo $confirm_password; ?>">
                <span class="help-block"><?php echo $confirm_password_err; ?></span>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Submit">
                <input type="reset" class="btn btn-default" value="Reset">
            </div>
            <p>Already have an account? <a href="login.php">Login here</a>.</p>
        </form>
    </div>    
</body>
</html>
ps. I searched for similar questions but couldn't find one, sorry if it's a repeat of a previous topic :)