Recently I've given a task to create a data inquiry system. The system required user to fill in the form. When it is submitted, the data will be validated by the admin and connected to the database.
This is my form.html:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>data</title>
<link rel="stylesheet" media="screen" href="styles.css" >
</head>
<body bgcolor="#13b4ff">
<div id="header" style="background-color: #4169E1;"><hr>
<form class="form" action="submit.php" method="post" name="form" >
<ul>
<li>
<span class="required_notification">* Denotes Required Field</span>
</li>
<li>
<label for="name">Name:</label>
<input type="text" name="name" required />
</li>
<li>
<label for="position:">Jawatan:</label>
<input type="text" name="position" />
</li>
<li>
<label for="unit">Unit:</label>
<input type="text" name="unit" required />
</li>
<li>
<label for="institute">Institute:</label>
<input type="text" name="institute" required />
</li>
<li>
<label for="telefon">No. Telefon:</label>
<input type="number" name="telefon" placeholder="eg: 012-345-6789" required />
</li>
<li>
<label for="faks">No. Faks:</label>
<input type="number" name="faks" placeholder="eg: 03-12345678" />
</li>
<li>
<label for="email">E-mail:</label>
<input type="email" name="name" placeholder="name@something.com"/ required>
<span class="form_hint">proper format<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script></span>
</li>
<li>
<label for="data">Data Required:</label>
<input type="text" name="data" required/>
</li>
<li>
<label for="purpose">Purpose:</label>
<input type="text" name="purpose" required/>
</li>
<li>
<button class="submit" type="submit">Submit</button>
</li>
</ul>
</form>
</body>
</html>
This is the styles.css for the form:
.form {
background-color:#ffffff;
margin: 0 auto;
width:750px;
height: 825px;
}
body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
.form h2, .form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 11px;}
.form ul {
width:750px;
list-style-type:none;
list-style-position:outside;
margin:0px;
padding:0px;
}
.form li{
padding:13px;
border-bottom:1px solid #eee;
position:relative;
}
.form li:first-child, .form li:last-child {
border-bottom:2px solid #777;
}
/*header*/
.form h2 {
margin:0;
display: inline;
}
.required_notification {
color:#d45252;
margin:5px 0 0 0;
display:inline;
float:right;
}
.form label {
width:200px;
margin-top: 3px;
display:inline-block;
float:left;
padding:3px;
}
.form input {
height:20px;
width:220px;
padding:5px 8px;
}
.form textarea {padding:8px; width:300px;}
.form button {margin-left:156px;}
.form input, .form textarea {
border:1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius:2px;
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s;
padding-right:30px;
}
.form input:focus, .form textarea:focus {
padding-right:70px;
background: #fff;
border:1px solid #555;
box-shadow: 0 0 3px #aaa;
}
button.submit {
margin: 250 auto;
width:100px;
}
button.submit {
background-color: #2F68B1;
background: -webkit-gradient(linear, left top, left bottom, from(#2F68B1), to(#10468B));
background: -webkit-linear-gradient(top, #2F68B1, #10468B);
background: -moz-linear-gradient(top, #2F68B1, #10468B);
background: -ms-linear-gradient(top, #2F68B1, #10468B);
background: -o-linear-gradient(top, #2F68B1, #10468B);
background: linear-gradient(top, #2F68B1, #10468B);
border: 1px solid #2C6BB8;
border-bottom: 1px solid #5b992b;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #9fd574;
-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
-o-box-shadow: 0 1px 0 0 #9fd574 inset;
color: white;
font-weight: bold;
padding: 7px 20px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
opacity:.85;
cursor: pointer;
}
button.submit:active {
border: 1px solid #20911e;
box-shadow: 0 0 10px 5px #356b0b inset;
-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
-moz-box-shadow: 0 0 10px 5px #356b0b inset;
-ms-box-shadow: 0 0 10px 5px #356b0b inset;
-o-box-shadow: 0 0 10px 5px #356b0b inset;
}
input:required, textarea:required {
background: #fff url(asterisk.jpg) no-repeat 98% center;
}
/*invalid, valid*/
.form input:focus:invalid, .form textarea:focus:invalid { /* when a field is considered invalid by the browser */
background: #fff url(invalid.jpg) no-repeat 98% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
.form input:required:valid, .form textarea:required:valid { /* when a field is considered valid by the browser */
background: #fff url(valid.jpg) no-repeat 98% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
.form_hint {
background: #d45252;
border-radius: 3px 3px 3px 3px;
color: white;
margin-left:8px;
padding: 1px 6px;
}
And the form will be transfered to submit.php (I did the database using mysql). I use wampserver.
<?php
//debug mode
error_reporting(E_ALL);
ini_set('display_errors', 'On');
//to show some error is smthng went wrong
$errors = array();
function connect(){
$connection = mysql_connect(localhost, root, "" ); //I have no idea what the password is. where could I set one?
$db = mysql_select_db(permohonan_data,$connection);
if (!$connection || !$db){
return false;
}
else{
return true;
}
}
echo "first stage";
//will run if user did submit the form
if (!empty($_POST)){
echo "second stage";
//connect sql server:
if (!connect()){
$errors[] = "Can't establish link to MySql server";
}
$name = $_POST['name'];
$position = $_POST['position'];
$unit = $_POST['unit'];
$institute = $_POST['institute'];
$telefon = $_POST['telefon'];
$faks = $_POST['faks'];
$email = $_POST['email'];
$data = $_POST['data'];
$purpose = $_POST['purpose'];
echo "third stage";
//no error til here
if (empty($error)){
//prevent SQL injection
$name = mysql_real_escape_string($name);
$position = mysql_real_escape_string($position);
$unit = mysql_real_escape_string($unit);
$institute = mysql_real_escape_string($institute);
$telefon = mysql_real_escape_string($telefon);
$faks = mysql_real_escape_string($faks);
$email = mysql_real_escape_string($email);
$data = mysql_real_escape_string($data);
$purpose = mysql_real_escape_string($purpose);
}
echo "fourth stage";
//try insert value
$query = "INSERT INTO 'user'
(name,position,unit,institute,telefon,faks,email,data,purpose)
VALUES ('$name', '$position', '$unit', '$institute', '$telefon', '$faks', '$email', '$data', '$purpose')";
if (!mysql_query($query)){
//
//die(mysql_error());
$errors[] = "Can't insert the values";
}
else {
//on success
header('location:C:\wamp\www\FORM\thankyou.php');
}
}
?>
Which the result gives no errors, I've put the reporting error syntax, but also nothing is displayed to the screen. The script are still visual at the page source though. And when I put the echo part, the script just runs until "first stage". It didn't redirect to thankyou.php. What did I do wrong? And how can I connect this to the database? I did the $connect part, but it still vague to me. please help.
This is the thankyou.php:
<html>
<head>
<meta charset="utf-8">
<title>thank you!</title>
<link rel="stylesheet" media="screen" href="stylesphp.css" >
</head>
<body bgcolor="#13b4ff">
<div class="boxed";>
<div id="thankyou" style= "text-align:center; font-size:50px;">THANK YOU</div><br>
Your inquiry has been submitted. Please wait 24 hours. <br>
You will be notify by email.
<p> return to <a class="a" href="http://www.moe.gov.my/en/home" target="_self">main page.</a>
</div>
</body>
</html>
EDIT, thanks to Fred -ii- and Joni Salmi, I have fix the error.
but it shows this instead:
Notice: Undefined index: email in C:\wamp\www\FORM\submit.php on line 39.
this is line 39
$email = $_POST['email'];
