Page 1 of 1

Highlight and search words in page Rate Topic: -----

#1 noorahmad  Icon User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,290
  • Joined: 12-March 09

Posted 27 October 2009 - 03:25 AM

Highlight and search words in page

Hi guys,
I am working on a Bank Website and they are creating a banking glossary in there website, banking glossary is same as a dictionary and they want to highlight words in their website, make a link to banking glossary and show full description of a word. At first it was very hard for me to search word from banking glossary. Highlight it and make it as link, after a good lunch I thought on it and my good luck that I am showing data from database and got an idea to get all words from banking glossary table to an array and search the text, replace it with the link.

OK let’s start our tutorials.
First we need to create tables

pages table
CREATE TABLE `aba_db`.`pages` (
`ID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`Title` VARCHAR( 100 ) NOT NULL ,
`Data` LONGTEXT NOT NULL ,
`Status` INT NOT NULL 
) ENGINE = MYISAM ;


glossary table
CREATE TABLE `aba_db`.`glossary` (
`ID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`Title` VARCHAR( 100 ) NOT NULL ,
`Data` LONGTEXT NOT NULL 
) ENGINE = MYISAM ;


After creating tables add some data in tables.

Our full code looks like this
config.php page
<?PHP
$host = "localhost";
$user = "root";
$pass = "";
$db = "aba_db";
//create a new object of mysqli
$mysqli = @new mysqli($host,$user,$pass,$db);
// check for connection errors
if(mysqli_connect_errno()){
	die("Connection faild: ".mysqli_connect_error());
}
?>


pages.php page
<link href="style.css" rel="stylesheet" type="text/css">
<?PHP
// include connection page
include("config.php");
// select data from pages table in database
$pages_query = $mysqli->query("SELECT * FROM pages")or die(mysqli_error($mysqli));

// fetch all data in an array
$pages_fetch = $pages_query->fetch_assoc();

// assign page data to $data variable
$data = $pages_fetch['Data'];

// select glossary from glossary table in database
$glossary_query = $mysqli->query("SELECT * FROM glossary")or die(mysqli_error($mysqli));

// array variable for searching words in ti
$search = array();

// array variable for replacing searched words
$replace = array();

// run loop to get all titles in array
while($glossary_fetch = $glossary_query->fetch_assoc()){
	// assign titles to $search variable
	$search[].="/".$glossary_fetch['Title']."/";	
	// assign title to $repacle variable with link to glossary page
	// Example: glossary.php?title=Credit Card
	$replace[] .="<a href='glossary.php?title=".$glossary_fetch['Title']."'>".$glossary_fetch['Title']."</a>";
}
//chnage all words to Title Case for searching and replacing words.
$data = ucwords($data);
// find, highlihgt and make the words as links to glossary page
echo preg_replace($search,$replace,$data);
?>


glossary.php page
<link href="style.css" rel="stylesheet" type="text/css">
<?PHP
include("config.php");
if(isset($_GET['title'])){
	$title = $_GET['title'];
	$glossary_query = $mysqli->query("SELECT * FROM glossary WHERE Title='$title'")or die(mysqli_error($mysqli));
	$fetch = $glossary_query->fetch_assoc();
	echo "<p><strong>".$fetch['Title']."</strong></b>";
	echo "<p>".$fetch['Data']."</p>";
} ?>

style.css file
a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	font-variant: normal;
	color: #0066FF;
	text-decoration: none;
	background-color: #FFFFCC;
}
a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #0033FF;
	text-decoration: underline;
	background-color: #FFFFCC;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
}


Code Explanation:
In config.php file I created a new object of mysqli class and connected to database.
In pages.php I selected data from pages table and printed in webpage.
Then I selected all data from glossary table and assigned it in $search and $replace variables using while loop, we are using preg_replace for searching and replacing the words in pages.

Before getting and adding data from database to arrays let’s look at a example for more clearance.
Example:
Let’s say we have 3 arrays one is for searching words in given string and another is for replacing searched word in string and a string which contain the paragraph for searching.
$search = array(
		"/Banking/i",
		"/Account/i",
		"/Credit Card/i"
		    );
$replace = array(
		"<b>Banking</b>",
		"<b>Account</b>",
		"<b>Credit Card</b>"
		    );
$str = "these words banking, Account and CREDIT CARD is chaning to bold";
echo preg_replace($search,$replace,$str);


Out Put: these words Banking, Account and Credit Card is changing to bold

Instate of banking, account and credit card I am getting data from database and adding it to arrays.

while($glossary_fetch = $glossary_query->fetch_assoc()){
$search[].="/".$glossary_fetch['Title']."/i";
// our other codes

We are assigning each Title from database to $search variable and rounding title with back slashes and adding i at the end of the word and it changes to a regular expression, (i) stand for case- insensitive.

$replace[] .="<a href='glossary.php?title=".$glossary_fetch['Title']."' 
>".$glossary_fetch['Title']."</a>";

Science preg_replace function needs 3 variable 1st for searching 2nd for replacing and 3rd that string which we are searching and replacing words in it.
glossary.php is our page which we can see full description of selected word.


And at the end just echo preg_replace($search,$replace,$data);

Note: You can filter your pages by using $_GET function and using the following query to filter your page data from database.
if(isset($_GET['id'])){
	$id= $_GET['id'];
	$str = "SELECT * FROM pages WHERE ID=$id";
	// run query here and it will filter your query.
}


Thanks for reading :)

Attached File(s)

  • Attached File  Doc.pdf (37.88K)
    Number of downloads: 416


Is This A Good Question/Topic? 1
  • +

Replies To: Highlight and search words in page

#2 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1642
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Posted 27 October 2009 - 10:50 PM

Excellent tutorial! Keep up the great work
Was This Post Helpful? 0
  • +
  • -

#3 noorahmad  Icon User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,290
  • Joined: 12-March 09

Posted 30 October 2009 - 11:06 PM

Quote

Excellent tutorial! Keep up the great work

Thanks :), I will try my best.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1