student info: John S. js123 \"Snowing\" Create a webpage that include your stude
ID: 3863939 • Letter: S
Question
student info:
John S.
js123
Explanation / Answer
Listing 1. Adding a colon using jQuery
1
2
3
4
5
<script type="text/javascript">
$(document).ready(function(){
$("label").append(":");
});
</script>
This function is simple: It waits until the page is ready and fully loaded (that's the$(document).ready() part), runs an anonymous function that finds all DOM label elements, then appends a colon to the end of the text it finds. The $() function allows you to access DOM elements with their native names, making this interface an ideal choice for those developers already familiar with the DOM.
Of course, there are plenty of other things you can do with jQuery, but this is a good first glance. With a simple built-in function, jQuery ensures that your code will work because it waits for the page to load. With another single line of code, you make sweeping changes to all the DOM labelelements the code finds, all in the client, without having to tediously go through all your markup and make changes there.
Create a simple application: A phone book
Now that the basics of jQuery are out of the way, let's build a simple phone-book application with PHP and MySQL. This application consists of three pieces:
You build each element one at a time.
Create the database table
Creating the database table in MySQL is perhaps the easiest part. What you want for this application is a table that contains the bare minimum of information — for example, an ID (the table's key), a name field, and a phone number field. The last two fields can be alphanumeric, so you'll use the varchar() function. You'll create the ID field as an autoincrement primary key. Call this table directory and use the following Structured Query Language (SQL) code to create it:
Listing 2. Use SQL to create directory table
1
2
3
4
5
6
CREATE TABLE `directory` (
`id` INT NOT NULL AUTO_INCREMENT ,
`name` VARCHAR( 64 ) NOT NULL ,
`phone` VARCHAR( 16 ) NOT NULL ,
PRIMARY KEY ( `id` )
) TYPE = MYISAM ;
As you can see, there's nothing complex here. In fact, later on, you'll have plenty of chances to update this application on your own. One way to extend this application is to add a keyword or location field, for example, either of which would allow you to further refine searches. For now, though, let's work with what we have.
Now that you've created the table, you need to populate it. You can use phpMyAdmin or the command line to enter a names and phone numbers. You can also use the following SQL instruction set:
Listing 3. Use SQL to populate the table
1
2
3
4
5
insert into `directory` (name,phone) values ('Tom Smith', '512-555-0111');
insert into `directory` (name,phone) values ('Bill Smith', '512-555-0112');
insert into `directory` (name,phone) values ('John Smith', '512-555-0113');
insert into `directory` (name,phone) values ('Jane Smith', '512-555-0114');
insert into `directory` (name,phone) values ('Sara Smith', '512-555-0115');
When you're done inputting these values, make sure you get back a list of records if you run a select * from directory operation from the command line or click Browse in phpMyAdmin.
Create an index.php file
Next, you create a simple home page for your application. This page is a PHP file called index.php, but it mostly contains HTML code at this point. When you're done with the find.php file (the next step), you'll circle back around and finish this piece.
For the moment, all you need is a bare-bones HTML file that contains a form. Each element in the form contains a unique ID because you want to be able to identify each piece using jQuery.
Listing 4. HTML file with form
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h1>Search our Phone Directory</h1>
<form id="searchform" method="post">
<div>
<label for="search_term">Search name/phone</label>
<input type="text" name="search_term" id="search_term" />
<input type="submit" value="search" id="search_button" />
</div>
</form>
<div id="search_results"></div>
</body>
</html>
Two things should jump out at you right away. First, no action is associated with the form. That's OK: Remember, this form isn't going to follow the traditional synchronous pattern of "click, wait, view." Instead, you'll be adding functionality that will watch user activity in the search_term field.
The second thing you should notice is the search_results DOM element — the empty one right underneath the form. That's the DOM element that will contain any responses you get from your search. Before digging any further into that, however, create your find.php page.
Create the find.php file
The find.php file is where all your action occurs. It's where the application connects to the database and runs the query against the directory table.
The first part of the find.php file contains your connection information. For purposes of this article, I've embedded that information in the file. For most of you, this information will be in an included or required file or be part of a much larger framework.
Listing 5. Create the find.php file
1
2
3
4
5
6
7
8
9
10
11
<?php
define(HOST, "your.host.here");
define(USER, "your-user-name");
define(PW, "your-password");
define(DB, "your-db-name");
$connect = mysql_connect(HOST,USER,PW)
or die('Could not connect to mysql server.' );
mysql_select_db(DB, $connect)
or die('Could not select database.');
Next, you'll be getting a search term from the form in the index.php file. Take that incoming search term and do some simple processing on it before you insert that value into your database. I'm choosing to use thestrip_tags() and substr() functions to remove all HTML tags from the search term and to cut it down to size. This kind of preprocessing is a good idea — you can never really trust user input 100 percent.
In fact, when you have a clean search term, take the extra step of running it throughmysql_escape_string(), which further removes any other gotchas (such as single quotation marks) that might screw up your database.
1
2
$term = strip_tags(substr($_POST['search_term'],0, 100));
$term = mysql_escape_string($term);
Now build your SQL statement. You want to retrieve any names and phone numbers from the directory table that match your search term. You'll make it so that your search term is matched against both the name and phone fields using LIKE, then run the query using mysql_query().
Listing 6. Build your SQL statement
1
2
3
4
5
6
7
$sql = "select name,phone
from directory
where name like '%$term%'
or phone like '%$term%'
order by name asc";
$result = mysql_query($sql);
After you run the query, you can print the results. Initialize a $string variable to hold your results, then use mysql_num_rows()to check whether you get any rows back. If you don't get results for the search term, set $string to equal "No matches!" If you do get results, print each name and phone number in the result set. At the end of the process, print the entire string using the echo command:
Listing 7. Print string using echo command
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$string = '';
if (mysql_num_rows($result) > 0){
while($row = mysql_fetch_object($result)){
$string .= "<b>".$row->name."</b> - ";
$string .= $row->phone."</a>";
$string .= "<br/> ";
}
}else{
$string = "No matches!";
}
echo $string;
?>
Of course, this bit of PHP functionality is fairly useful in itself, but right now, there's nothing pointing to it. You need to be able to feed this script a search term. In the next section, you do just that.
1
2
3
4
5
<script type="text/javascript">
$(document).ready(function(){
$("label").append(":");
});
</script>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.