PHP My SQL Form
Index.php
<?php
$insert = false;
if(isset($_POST['name'])){
// Set connection variables
$server = "localhost";
$username = "root";
$password = "" ;
// Create a database connection
$con = mysqli_connect($server, $username, $password);
// Check for connection success
if(!$con){
die("connection to this database failed due to" . mysqli_connect_error());
}
// echo "Success connecting to the db";
// Collect post variables
$name = $_POST['name'];
$gender = $_POST['gender'];
$age = $_POST['age'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$desc = $_POST['desc'];
$sql = "INSERT INTO `trip`.`trip` (`name`, `age`, `gender`, `email`, `phone`, `other`, `dt`) VALUES ('$name', '$age', '$gender', '$email', '$phone', '$desc', current_timestamp());";
// echo $sql;
// Execute the query
if($con->query($sql) == true){
// echo "Successfully inserted";
// Flag for successful insertion
$insert = true;
}
else{
echo "ERROR: $sql <br> $con->error";
}
// Close the database connection
$con->close();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Travel Form</title>
<link href="https://fonts.googleapis.com/css?family=Roboto|Sriracha&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<img class="bg" src="bg.jpg" alt="IIT Kharagpur">
<div class="container">
<h1>Welcome to IIT Kharagpur US Trip form</h3>
<p>Enter your details and submit this form to confirm your participation in the trip </p>
<?php
if($insert == true){
echo "<p class='submitMsg'>Thanks for submitting your form. We are happy to see you joining us for the US trip</p>";
}
?>
<form action="index.php" method="post">
<input type="text" name="name" id="name" placeholder="Enter your name">
<input type="text" name="age" id="age" placeholder="Enter your Age">
<input type="text" name="gender" id="gender" placeholder="Enter your gender">
<input type="email" name="email" id="email" placeholder="Enter your email">
<input type="phone" name="phone" id="phone" placeholder="Enter your phone">
<textarea name="desc" id="desc" cols="30" rows="10" placeholder="Enter any other information here"></textarea>
<button class="btn">Submit</button>
</form>
</div>
<script src="index.js"></script>
</body>
</html>
Style.css
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.container{
max-width: 80%;
padding: 34px;
margin: auto;
}
.container h1 {
text-align: center;
font-family: 'Sriracha', cursive;
font-size: 40px;
}
p{
font-size: 17px;
text-align: center;
font-family: 'Sriracha', cursive;
}
input, textarea{
border: 2px solid black;
border-radius: 6px;
outline: none;
font-size: 16px;
width: 80%;
margin: 11px 0px;
padding: 7px;
}
form{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.btn{
color: white;
background: purple;
padding: 8px 12px;
font-size: 20px;
border: 2px solid white;
border-radius: 14px;
cursor: pointer;
}
.bg{
width: 100%;
position: absolute;
z-index: -1;
opacity: 0.6;
}
.submitMsg{
color: green;
text-align: justify;
}
Index.html but not in use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Travel Form</title>
<link href="https://fonts.googleapis.com/css?family=Roboto|Sriracha&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<img class="bg" src="bg.jpg" alt="IIT Kharagpur">
<div class="container">
<h1>Welcome to IIT Kharagpur US Trip form</h3>
<p>Enter your details and submit this form to confirm your participation in the trip </p>
<?php
if($insert == true){
echo "<p class='submitMsg'>Thanks for submitting your form. We are happy to see you joining us for the US trip</p>";
}
?>
<form action="index.php" method="post">
<input type="text" name="name" id="name" placeholder="Enter your name">
<input type="text" name="age" id="age" placeholder="Enter your Age">
<input type="text" name="gender" id="gender" placeholder="Enter your gender">
<input type="email" name="email" id="email" placeholder="Enter your email">
<input type="phone" name="phone" id="phone" placeholder="Enter your phone">
<textarea name="desc" id="desc" cols="30" rows="10"
placeholder="Enter any other information here"></textarea>
<button class="btn">Submit</button>
</form>
</div>
<script src="index.js"></script>
</body>
</html>
Comments
Post a Comment