How To Implement Searching Field On Your Web Page Using PHP-MySql

in #utopian-io7 years ago (edited)

What Will I Learn?

  • You will learn how to create seacring field on your web page
  • You will learn how to connecting your web page to MySQL database
  • You will learn how to create tabel structure

Requirements

  • you must understand basic of PHP programming
  • you must understand about SQL query
  • you must understand how to connect PHP file with MySQL database

Difficulty

  • Intermediate

Tutorial Contents

search columns are necessary on a web page, because with a search field on a web page it will make it easier for visitors to search for the desired data or items, such as search fields in an online shop website.

  • the first step you should do is create a database, then enter some data into the database you have created.
    Screenshot_3.jpg
  • the next step is to create a table in your database.
    image
  • then add the data into the table we have created. type the query below into the sql column.
INSERT INTO `song` (`list`, `title`) VALUES
(1, 'love yourself'),
(2, 'hello'),
(3, 'pillow talk'),
(4, 'dark horse'),
(5, 'hotel california'),
(6, 'still loving you'),
(7, 'gang nam style')

image
data inserted


  • okay database we have successfully created, then we are a form, type the script below in your text editor.
<?php 
include 'connect.php';
?>
<h3><center>MY TUBE SEARCH FIELD</center></h3>
<form action="index.php" method="get">
    <label>search :</label>
    <input type="text" name="cari">
    <input type="submit" value="Cari">
</form>
<?php 
if(isset($_GET['cari'])){
    $cari = $_GET['cari'];
    echo "<b>searching result : ".$cari."</b>";
}
?>
<table border="1">
    <tr>
        <th>LIST</th>
        <th>TITLE</th>
    </tr>
    <?php 
    if(isset($_GET['cari'])){
        $cari = $_GET['cari'];
        $data = mysql_query("select * from song where title like '%".$cari."%'");               
    }else{
        $d = mysql_query("select * from song");     
    }
    $no = 1;
    while($data = mysql_fetch_array($data)){
    ?>
    <tr>
        <td><?php echo $list++; ?></td>
        <td><?php echo $d['title']; ?></td>
    </tr>
    <?php } ?>
</table>
  • I will explain a bit about the script above.
  • this is the part to give the action to the database via the connect.php file
<?php 
include 'connect.php';
?>
  • then this serves as a GET method call that we declared before.
<?php if(isset($_GET['cari'])){
$cari = $_GET['cari'];
echo "<b>searching result : ".$cari."</b>";}?>
  • okay then we will make a connection between the form we have created with our database. type the script below and intersect with the name connect.php.
<?php 
mysql_connect("localhost","root","");
mysql_select_db("search");
?>
  • okay ,, now we try to run the form we have created by typing the file name in our browser search field and press enter button as shown below.
    utop.jpg
    then type the file you want to search, then press the search button

  • then we try to fill in the search field whether the results will appear.
    utop.jpg
  • all files containing the hello word are displayed, then we will check whether the data displayed matches the data in the database.
    image
    the data corresponds to the data contained in database

  • Okay, we've managed to create a search field on our web page, now it's your turn to try it, I'm sure you'll succeed by following this tutorial carefully.

Curriculum

  • it's my first tutorial, I hope this is acceptable..!



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Memang bereh bang :D

Hey @voters I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • This is your first accepted contribution here in Utopian. Welcome!

Suggestions

  • Contribute more often to get higher and higher rewards. I wish to see you often!
  • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

  • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x