[PHP] Create a website search form 04-30-2013, 11:44 PM
#1
I am going to teach you how to write a simple search form using PHP. This is very easy and would require a web host or somewhere you can run PHP files with a MySQL database, as well as obviously having a MySQL database you want to run the search query on.
For this example I am going to use the example of searching a database for a member of a website based on their username which would then display all of their information, this would require an existing database which would have already stored member details when they signed up. You can find comments next to each part of code explaining exactly what is happening.
PHP & MySQL
MySQL Table Stucture
process.php
Now that we have the backend processing and results display/ error display out of the way, we can move onto the physical appearance of the form.
search.php
Voila! You now have a search form. Obviously the form will look a little crappy at the moment, but you can style it using basic CSS and implement it in your current site by just copy and pasting everything inside the <body> tags.
The CSS
Now we need to add some style to the form! You can see below I have added <style> tags into the head of the search.php file, everything in between these tags will be used to style the elements in the <body> section. Each style corresponds with an ID, so #usersearch will style the element in the body section when we call for it like this id="usersearch". CSS really isn't hard to understand and anyone with basic knowledge should know this already and find this part pretty easy.
search.php
Nifty HTML5 Stuff
Now I am going to use HTML5 to show default text inside the search input field which will disappear when the field is clicked by the user. We do this by simply adding a placeholder to the input box. You don't need to do anything with the code below as I will compile it after.
Now we will put everything together into the search.php file.
search.php
There you go! A fully functional styled search form. Next I will show you how to create the login/ registration system and the database which stores the user information mentioned in this tutorial.
Screenshot
![[Image: kR0xNtA.png]](http://i.imgur.com/kR0xNtA.png)
For this example I am going to use the example of searching a database for a member of a website based on their username which would then display all of their information, this would require an existing database which would have already stored member details when they signed up. You can find comments next to each part of code explaining exactly what is happening.
PHP & MySQL
MySQL Table Stucture
Code:
site_users
- user_id
-- 1
-- 2
-- 3
-- 4
- user_firstname
-- Bob
-- John
-- Bill
-- Josh
- user_name
-- bobby1
-- imjohn1990
-- billy
-- josh101
- user_age
-- 20
-- 19
-- 24
-- 16process.php
Code:
<?php
//read search term and remove any unwanted spaces
$searchTerm = trim($_GET['searchuser']);
//make sure the username field isnt left empty and display error message if it is
if($searchTerm == "")
{
echo "Enter the username you are searching for.";
exit();
}
//connect to the database
$host = "localhost"; //server
$db = "db_name"; //db name
$user = "username"; //db user name
$pwd = "password"; //password
//connect to server and link to database
$link = mysqli_connect($host, $user, $pwd, $db);
//query to search MYSQL table self explanatory
$query = "SELECT * FROM site_users WHERE user_name LIKE '%$searchTerm%'";
$results = mysqli_query($link, $query);
/* check for matching records by counting the number of results returned and display results or error message */
if(mysqli_num_rows($results) >= 1)
{
$output = "";
while($row = mysqli_fetch_array($results))
{
$output .= "ID: " . $row['user_id'] . "<br />";
$output .= "Name: " . $row['user_firstname'] . "<br />";
$output .= "Username: " . $row['user_name'] . "<br />";
$output .= "Age: " . $row['user_age'] . "<br /><br />";
}
echo $output;
}
else
echo "Sorry, there was no record for the username " . $searchTerm;
?>Now that we have the backend processing and results display/ error display out of the way, we can move onto the physical appearance of the form.
search.php
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Search by Username</title>
</head>
<body>
<h1>Search By Username</h1>
<form action="process.php" method="get">
<label>Username:
<input type="text" name="searchuser" />
</label>
<input type="submit" value="Search" />
</form>
</body>
</html>Voila! You now have a search form. Obviously the form will look a little crappy at the moment, but you can style it using basic CSS and implement it in your current site by just copy and pasting everything inside the <body> tags.
The CSS
Now we need to add some style to the form! You can see below I have added <style> tags into the head of the search.php file, everything in between these tags will be used to style the elements in the <body> section. Each style corresponds with an ID, so #usersearch will style the element in the body section when we call for it like this id="usersearch". CSS really isn't hard to understand and anyone with basic knowledge should know this already and find this part pretty easy.
search.php
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Search by Username</title>
<style>
body {
font-family:Helvetica, Arial;
}
#search {
width:400px;
padding:10px;
background:#eeeeee;
-webkit-border-radius:4px;
}
#usersearch {
width:280px;
padding:10px;
background:#ffffff;
border:1px solid #808080;
}
#submit {
width:90px;
padding:10px;
border:1px solid #808080;
background:#00aeff;
-webkit-border-radius:4px;
}
</style>
</head>
<body>
<center>
<div id="search">
<h1>Search By Username</h1>
<form action="process.php" method="get">
<input type="text" id="usersearch" name="searchuser" />
<input type="submit" id="submit" value="Search" />
</div>
</form>
</center>
</body>
</html>Nifty HTML5 Stuff
Now I am going to use HTML5 to show default text inside the search input field which will disappear when the field is clicked by the user. We do this by simply adding a placeholder to the input box. You don't need to do anything with the code below as I will compile it after.
Code:
<input type="text" id="usersearch" name="searchuser" placeholder="Enter username here">Now we will put everything together into the search.php file.
search.php
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Search by Username</title>
<style>
body {
font-family:Helvetica, Arial;
}
#search {
width:400px;
padding:10px;
background:#eeeeee;
-webkit-border-radius:4px;
}
#usersearch {
width:280px;
padding:10px;
background:#ffffff;
border:1px solid #808080;
}
#submit {
width:90px;
padding:10px;
border:1px solid #808080;
background:#00aeff;
-webkit-border-radius:4px;
}
</style>
</head>
<body>
<center>
<div id="search">
<h1>Search By Username</h1>
<form action="process.php" method="get">
<input type="text" id="usersearch" name="searchuser" placeholder="Enter username here">
<input type="submit" id="submit" value="Search" />
</div>
</form>
</center>
</body>
</html>There you go! A fully functional styled search form. Next I will show you how to create the login/ registration system and the database which stores the user information mentioned in this tutorial.
Screenshot
![[+]](https://sinister.li/images/modern/collapse_collapsed.png)
