Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: Easy nav

  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    63
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Easy nav

    Hi, I am learning php and MySQL and thought I'd put my knowledge to the test. It took quite a while, but I have finally put together a nice database for my contacts. I was thinking though; it'd be nice if I could have a text area near the top of my form that would scroll and list the last and first names of all my contacts. Then maybe, make it so I could just simply click on one to have the record displayed in the form.

    Does this make any sense?

  • #2
    Regular Coder bacterozoid's Avatar
    Join Date
    Jun 2002
    Location
    USA
    Posts
    490
    Thanks
    24
    Thanked 35 Times in 35 Posts
    Sure, you could do this without too much work.

    All you need to do is create a <div> element on your page, manually set the height and width, then set the overflow-x style to none, overflow-y to scroll. Inside your div, use PHP to query your database to get all the records and display a table of all your contacts. You can set onclick events to perform an asynchronous call to a PHP script to grab the details of that contact and display them on the page.

    That may not make any sense, but that's how I would do it. If you take each of those elements one step at a time I'm positive you can get something working

  • #3
    Regular Coder funnymoney's Avatar
    Join Date
    Aug 2007
    Posts
    364
    Thanks
    17
    Thanked 24 Times in 24 Posts
    hah, bacterozoid, i belive that after zenix reads your post he's just gonna give up

  • #4
    Regular Coder bacterozoid's Avatar
    Join Date
    Jun 2002
    Location
    USA
    Posts
    490
    Thanks
    24
    Thanked 35 Times in 35 Posts

    Internet Explorer

    Lol...it is the truth, though. I'm happy to help him through step-by-step if necessary. It's actually a nice little program to help learn some basic web app stuff.

  • #5
    Regular Coder Zangeel's Avatar
    Join Date
    Oct 2007
    Location
    public_html/
    Posts
    638
    Thanks
    17
    Thanked 79 Times in 79 Posts
    Most of what he said is just technical mumbo jumbo. All you need to do, is have an onclick element to trigger an ajax function, which in turn would fill a textarea, or div or whatever with the "responseText" results. It's really a very simple thing. And thats with ajax, it can be easier achieved without it, just less fluid.
    PHP Code:
    $aString is_string((string)array()) ? true false// true :D 
    [/CENTER]

  • #6
    New Coder
    Join Date
    Jun 2009
    Posts
    63
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Thanks a lot all of you!! Yeah, I'm a bit intimidated trying to figure out exactly what the proper syntax would be for such a procedure...I would LOVE to learn it though. I've made very good headway in learning php and mysql.

  • #7
    Regular Coder bacterozoid's Avatar
    Join Date
    Jun 2002
    Location
    USA
    Posts
    490
    Thanks
    24
    Thanked 35 Times in 35 Posts
    It's not really as complicated as I may have made it seem.

    All you need to do is:

    1) Get a scrolling box on your page
    2) Use a PHP script to query your database to get the data to go inside your box
    3) Add javascript onclick events to get data from your database and display it. You can use AJAX to do this - it's not too hard, but there are other options

    Let us know if you need help with any of that. We're happy to help you build this. (I'd do it myself for you, but you won't learn anything that way )

  • #8
    Regular Coder Zangeel's Avatar
    Join Date
    Oct 2007
    Location
    public_html/
    Posts
    638
    Thanks
    17
    Thanked 79 Times in 79 Posts
    Here's how i'd do it (untested)

    PHP Code:
    <?php
    // MySql Connect Info Here
    $q mysql_query("SELECT `name` FROM `clientTable`");
    ?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <meta name="author" content="J" />

        <title>Demo</title>
    </head>

    <body>

    <style type="text/css">
    body {font-family:trebuchet ms;}
    div.contactList {border:2px solid black; padding:4px; height:300px; width:300px; overflow-x:none; overflow-y:scroll;  }
    div.resultList {border:2px solid green; padding:4px; height:100px; width:300px; margin-top:10px; }
    </style>
    <script type="text/javascript">
    function ajax(clientName) {
       var xmlhttp;
       if (window.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest();
          }
       else if (window.ActiveXObject) {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
       else {
          document.write("XMLHTTP Not Supported, functions wont work on this page.");
          }
       xmlhttp.onreadystatechange = function() {
          if(xmlhttp.readyState == 4) {
             document.getElementById('results').innerHTML = xmlhttp.responseText;
             }
          }
       xmlhttp.open("GET", "clients.php?q=" + clientName, true);
       xmlhttp.send(null);
       }
    </script>

    <div class="contactList">
    <h2>Contact List</h2>

    <ul>
    <?php
    while ($row mysql_fetch_assoc($q))
    {
        echo 
    '<li><a href="#" onclick="ajax(\''.$row['name'].'\')">' $row['name'] . '</a></li>';
    }
    ?>
    </ul>

    </div>

    <div id="results" class="resultList">Results Here</div>

    </body>
    </html>
    Add mysql connections there, then create a new file in the same directory to process the information called clients.php.

    In clients.php you'd have something like:

    PHP Code:
    <?php
    if ($_GET['q']) {
        
    $q mysql_query("SELECT * FROM `clientTable` WHERE `name` = " .
            
    mysql_real_escape_string($_GET['q']));
        
    $row mysql_fetch_assoc($q);

        echo 
    'Name:' $row['name'] . '<br />Age: ' $row['age'] . '<br/>Phone: ' $row['phone'] .
            
    '<br />Gender: ' $row['gender'];
    } else {
        die(
    'No parameters specified');
    }
    ?>
    So a quick overview of this:

    1: HTML, very basic HTML, like bacterozoid said, have a div box with a hidden x overflow, and a scrollable y overflow (this just means it'll be a scroll box, in a div with a predetermined height and width, otherwise the div would grow with the content) Then another box that will hold the results when we click on a name.

    2: PHP, again basic php, it'll loop through all the records and output their names in a bullet list.

    3. AJAX/JS: here we have a javascript function that defines the XMLHTTP object, so we can send data off the page in the background basically. It works like this:

    Code:
    onclick = " ajax('Joe') "
    Here we have a static example (the example i have above is dynamic, this is simpler just to understand). This means, when we click the link, it will trigger the function we created called "ajax" in javascript, with the parameter "clientName" defined as Joe.

    This first hunk of code:

    Code:
       var xmlhttp;
       if (window.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest();
          }
       else if (window.ActiveXObject) {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
       else {
          document.write("XMLHTTP Not Supported, functions wont work on this page.");
          }
    This just defines the XMLHTTP object. Now what this is, is an API to request a page on a web server, and then bounce that information back to your script. In our case we are going to request a file in the same directory, called clients.php, with a parameter in the url, to access information we want. It's a big hunk of code simply because browsers have many versions, and some are outdated, and how IE sucks big time, so we always need to have some special instructions to make sure it'll work on all browsers.

    Now the next piece of code:

    Code:
       xmlhttp.onreadystatechange = function() {
          if(xmlhttp.readyState == 4) {
             document.getElementById('results').innerHTML = xmlhttp.responseText;
             }
          }
    Here we are checking if the "readyState" changed, when it's changed to four it means we've got a response from the page we requested, and can now do something with the data it sent back. Now, the response can be either plain text, or an XML document, in our case it would be plain text, and in java script we're making the inner html of the div with the id "results" display the information about the person we've clicked on.

    Now this code:
    Code:
       xmlhttp.open("GET", "clients.php?q=" + clientName, true);
       xmlhttp.send(null);
    This is straight forward, this is where we open and send the request, in this case like I said it's clients.php, adding the javascript var "clientName", so the result would be:

    Code:
    clients.php?q=Joe
    Because earlier we defined that variable as

    Code:
    ajax('Joe');
    Now it's requesting out client.php page, that we created. It's holding a parameter in it's URL called "q". So lets look at this file.

    The first code block is:

    PHP Code:
    <?php
    if ($_GET['q']) {
       
    // We'll get to this later
    } else {
        die(
    'No parameters specified');
    }
    ?>
    Meaning, if the q variable is set i.e. if the url has ?q=*** in it, then we will go ahead with the code, if not, itll kill the script, and output an error.

    Now if everythings ok we'll run this code:

    PHP Code:
    <?php
        $q 
    mysql_query("SELECT * FROM `clientTable` WHERE `name` = " .
            
    mysql_real_escape_string($_GET['q']));
        
    $row mysql_fetch_assoc($q);

        echo 
    'Name:' $row['name'] . '<br />Age: ' $row['age'] . '<br/>Phone: ' $row['phone'] .
            
    '<br />Gender: ' $row['gender'];
    The q variable is holding our query, then we take the resource it gives us, and convert it into an associative array, in the variable $row. So now $row is an array, so note the syntax.

    Now we're echoing the results, so lets say the DB structure is like this

    Code:
    ID --- Name --- Age --- Gender --- Phone
    1       Joe         25         Male         5555555
    2       Fred        35         Male         5555555
    3       Gary        45         Male         5555555
    The highlighted row is what we've selected in our example. Since we've turned this into an associative array by selected that row by the name "Joe" the array looks like this now.

    PHP Code:
    $row = array("id" => 1"name" => "Joe""age" => 25"gender" => "male""phone" => "5555555"); 
    So in theory all that mysql code makes the above array, so now all we have to do is echo it to the browser. So with the example of joe, it would output

    Code:
    Name: Joe
    Age: 25
    Phone: 5555555
    Gender: Male
    So the above is now the "responseText" that's going to fill the div with the id result.

    Simple as that.
    Sorry if I went over obvious things, better safe than sorry.
    PHP Code:
    $aString is_string((string)array()) ? true false// true :D 
    [/CENTER]

  • Users who have thanked Zangeel for this post:

    whizard (09-06-2009)

  • #9
    Regular Coder sea4me's Avatar
    Join Date
    Jan 2009
    Location
    Damn, I don't know...
    Posts
    390
    Thanks
    11
    Thanked 28 Times in 27 Posts
    *thinks*

    can't you just do a dropdown??

    with multiple selection

    http://www.ironspider.ca/forms/dropdowns.htm#example2

  • #10
    New Coder
    Join Date
    Jun 2009
    Posts
    63
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Hello, so sorry it has taken me so long to respond to your suggestions. My computer died on me. Anyway, thank you all so much!! Zangeel, you put a LOT of effort into explaining this to me, I REALLY appreciate it!! I will try it this weekend.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •