How to Make Crush Website Using PHP Database

In this tutorial i will show you How to Make Crush Website Using PHP Database. You can see demo on click below button and source code also available.

Demo Download

Step to Make Crush Website Using PHP Database

To make crush website we need to follow below all steps:

  1. Write an HTML and PHP
  2. Write CSS
  3. Create Database Connection

1: Index.html

First of all we create a index.php file for write content, connect to style.css file in head section and following code paste in body section.

<body>
	<div class="container">
		<h1>Check Your Crush</h1>
		<form action="" method="post" class="input">
			<div class="txt">
				<input type="text" name="username" placeholder="Enter your name" required>
			</div>
			<div class="radio-group">
				<label class="radio">
					<input type="radio" value="male" name='gender' required>
					male
					<span></span>
				</label>
				<label class="radio">
					<input type="radio" value="female" name='gender' required>
					female
					<span></span>
				</label>
			</div>
			<input type="submit" name="submit" class="btn" value="Click to Display">
		</form>
<?php
require_once('db.php');

if(isset($_POST['submit'])){

$username = $_POST['username'];
$gender = $_POST['gender'];

$query = "SELECT * FROM 028_crush WHERE user_name='$username' AND user_gender='$gender'";
$data = mysqli_query($conn, $query);
$results = mysqli_fetch_assoc($data);
if($results){

	$image_crush = $results['image_crush'];
	echo "<img src='$image_crush' class='img'>";

}else{

	$query = "SELECT * FROM 028_data WHERE user_gender = '$gender' order by rand() limit 0,1";
	$run = mysqli_query($conn, $query);
	$result = mysqli_fetch_assoc($run);

	$user_crush = $result['user_crush'];


	$queryy = "insert into 028_crush (user_name,user_gender,image_crush) VALUES('$username','$gender','$user_crush')";
	$resultt = mysqli_query($conn, $queryy);
		if($resultt){

			$query2 = "SELECT * FROM 028_crush WHERE user_name='$username'";
			$data2 = mysqli_query($conn, $query2);
			$resultss = mysqli_fetch_assoc($data2);
			if($resultss){

				$image_crush = $resultss['image_crush'];
				echo "<img src='$image_crush' class='img'>";

			}

		}else{
			echo "<h3>Error</h3>";
	}
}     
}
?>

	</div>
</body>

As you can see in above code we make a form tag for input name and radio button for select gender then create php code for data display.

2: Style.css

Now create a style.css file and connect in html head section or you create a style tag in head section of index.html file and write all style code in it.

*{
	margin: 0;
	padding: 0;
}
body{
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(180deg,#bad1f5,#ffcec2);
	display: flex;
	justify-content: center;
	align-items: center;
}
.container{
	width: 90%;
}
.container h1{
	text-align: center;
}
.txt{
	border-bottom: 2px solid #adadad;
	position: relative;
	width: 50%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 10px;
}
.txt input{
	font-size: 15px;
	color: #333;
	border: none;
	width: 100%;
	outline: none;
	background: none;
	padding: 0 5px;
	height: 40px;
}
.radio-group{
	position: relative;
	width: 50%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 10px;
}
.radio{
	font-size: 24px;
	font-weight: 500;
	text-transform: capitalize;
	display: inline-block;
	vertical-align: middle;
	color: #fff;
}
.radio + .radio{
	margin-left: 20px;
}
.radio input[type="radio"]{
	height: 20px;
	width: 20px;
}
.btn{
	position: relative;
	display: block;
	width: 25%;
	height: 50px;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 10px;
	border: 1px solid #adadad;
	border-radius: 20px;
	background: linear-gradient(120deg,#bad1f5,#ffcec2);
	background-size: 300%;
	color: #fff;
	cursor: pointer;
	font-size: 30px;
}
.btn:hover{
	background-position: right;
	border: none;
}
.img{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	border-radius: 20px;
}

Above css coding very easy to understand, you can just copy and paste.

2: Create Database Connection

Now create a database connection and link to index file.

<?php
$servername="localhost";
$dbname="teswesmc_demo_teswesm";
$username="teswesmc_demo_teswesm";
$password="1234567";

$conn = mysqli_connect($servername,$username,$password,$dbname);

if($conn)
{
	echo "";
}
else
{
	die ("Connection failed because ".mysqli_connect_error());
}

?>

In above code you must fill database name, username and password as per your setup.

Conclusion

Today we learnt how to make crush website using php database.

If you found this tutorial helpful, share it with your friends and developers group.

Demo Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts

Leave a Reply

Your email address will not be published. Required fields are marked *