www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Displaying search results on webpages

  1. #1
    Join Date
    May 2014
    Posts
    30

    Displaying search results on webpages

    Hello there

    I have to make a website with a database for a CS class at university that allows the user to search for a piece of music or a particular sound effect, preview the media and then have the option to download or implement another search.

    My issue is how would I populate my web page with these results????

    do I need to create a html table for the results to be shown or is there another method that I'm missing? If any of you have seen the Spotify webplayer that's the sort functionality I'd like to go for.

    Any help offered would much appreciated.

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    An HTML table is one way to display it. Simply run some SQL with PHP and return the results into a table. There are tons of PHP/MySQL tutorials out there.

  3. #3
    Join Date
    May 2014
    Posts
    30
    Quote Originally Posted by cbVision View Post
    An HTML table is one way to display it. Simply run some SQL with PHP and return the results into a table. There are tons of PHP/MySQL tutorials out there.
    Thanks for replying.

    So a normal table (<table></table>) will do the job then? ok that's good to know.

    If you don't mind what other ways could this be done also.

    Thanks again

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    You can display it however you want. A list would be another choice:

    Code:
    <ul>
    	<li>
    		<span class="title">Song 1</span>
    		<span class="arist">Artist 1</span>
    		<span class="genre">Rock</span>
    	</li>
    	<li>
    		<span class="title">Song 2</span>
    		<span class="arist">Artist 2</span>
    		<span class="genre">Techno</span>
    	</li>
    	<li>
    		<span class="title">Song 3</span>
    		<span class="arist">Artist 3</span>
    		<span class="genre">Rap</span>
    	</li>
    </ul>

  5. #5
    Join Date
    May 2014
    Posts
    30
    Quote Originally Posted by cbVision View Post
    You can display it however you want. A list would be another choice:

    Code:
    <ul>
    	<li>
    		<span class="title">Song 1</span>
    		<span class="arist">Artist 1</span>
    		<span class="genre">Rock</span>
    	</li>
    	<li>
    		<span class="title">Song 2</span>
    		<span class="arist">Artist 2</span>
    		<span class="genre">Techno</span>
    	</li>
    	<li>
    		<span class="title">Song 3</span>
    		<span class="arist">Artist 3</span>
    		<span class="genre">Rap</span>
    	</li>
    </ul>
    Yep I think a list will work better for my purposes thanks for that.

    For previewing the media I was thinking of using jplayer just seems extremely customisable. Is that a widely used player or is there better that I should be looking at?

    Once again thanks for the help.

  6. #6
    Wow... talk about gibberish use of lists -- really this strikes me as tabular data... since then you can build proper semantic relationships using SCOPE and TH.

    Code:
    <table>
    	<caption>Song Listing</caption>
    	<thead>
    		<tr>
    			<th scope="col">Title</th>
    			<th scope="col">Artist</th>
    			<th scope="col">Genre</th>
    		</tr>
    	</thead><tbody>
    		<tr>
    			<th scope="row">Turn to Stone</th>
    			<td>Fireball Ministry</td>
    			<td>Rock</td>
    		</tr><tr>
    			<th scope="row">Funky Sea, Funky Dew</th>
    			<td>Brecker Brothers</td>
    			<td>Fusion</td>
    		</tr><tr>
    			<th scope="row">King of Rock</th>
    			<td>Run DMC</td>
    			<td>Rap</td>
    		</tr>
    	</tbody>
    </table>
    It's tabular data, treat it as such. It's actually kind of a laugh, most developers don't seem to know that there are tags other than TD and TR that can go into tables, much less what they are there to do... See every time someone does a <td colspan="7" class="title"> or <td class="heading">
    Last edited by deathshadow; 05-14-2014 at 01:09 PM.

  7. #7
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    How is a LIST of songs tabular data? A gibberish use of lists? Either option is fine ...

  8. #8
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Tables also don't work well with responsive design. A list approach is much more flexible for changing the view for mobile as you can easily change the CSS to order things vertically instead of horizontally.

  9. #9
    Quote Originally Posted by cbVision View Post
    How is a LIST of songs tabular data?
    Because there are obvious fields -- title, artist, genre... and rows of fields... Look at the markup I provided; is anything more semantically correct than that? Of course not. Simply using a flat list doesn't divide them up or tell people what each 'one' is, even using span -- since they have no headings associated with them; that the glory of the SCOPE attribute. We have a nice clean THEAD with <th scope="col"> saying that these are what the columns MEAN, the TITLE of each row being the header to say what the data that follows applies to. You even get a caption to say what the table data is so you aren't wasting a heading.

    Bunch of span - being inline-level tags, is just a run-on sentence. (not that I know ANYTHING about run-on sentences)

    Quote Originally Posted by cbVision View Post
    Tables also don't work well with responsive design. A list approach is much more flexible for changing the view for mobile as you can easily change the CSS to order things vertically instead of horizontally.
    Ever set display:block on a TD? Remember, display:table-cell is something different now. Sure, older browsers don't support doing it right, but those older browsers wouldn't see media queries to be responsive now would they?

    Remember, markup is for saying what things ARE -- these are obviously fields of data organized in rows, the later fields being 'more information' about the first one. SOUNDS like tabular data where I come from. Hence establishing the semantic relationship of the headings to their columns with SCOPE="COL" and the relationship of the title to it's data with SCOPE="ROW".

    Try it on a screen reader some time... or braille reader... or styling disabled... or lynx... After all, that's what HTML is FOR.

    Though the responses shouldn't surprise me, what with people turning "don't use tables for layout" into "don't use tables ever", which is akin to the scripttards using JS to emulate TARGET because it's deprecated (completely missing the point) or the fact that most people sleazing out HTML these days never bothered learning why headings have numbers.

  10. #10
    Join Date
    Feb 2013
    Posts
    110
    Though I usually disagree with Deathshadow (Though lately I find I agreeing with him lately - I must not be feeling well.), I have to agree with him on this one. If the data is tabular why not use a table. I even had a instructor tell me that there is nothing wrong in using a table when it obviously calls for one.

  11. #11
    Quote Originally Posted by Strider64 View Post
    Though lately I find I agreeing with him lately - I must not be feeling well.
    You're just waking up, the more you do this stuff, the closer you'll come to my point of view on things. NO joke.

    When it comes to web development, I often feel I have a much clearer view of it -- to the point I end up feeling like ... well... let's just say this is how I see the world:
    http://peteashton.com/images/they-li...615-034749.jpg

  12. #12
    Join Date
    May 2014
    Posts
    30
    Quote Originally Posted by deathshadow View Post
    You're just waking up, the more you do this stuff, the closer you'll come to my point of view on things. NO joke.

    When it comes to web development, I often feel I have a much clearer view of it -- to the point I end up feeling like ... well... let's just say this is how I see the world:
    http://peteashton.com/images/they-li...615-034749.jpg
    So bottom line you suggest I create a table similar to the one you did and then populate with the data from my MySQL table?

    OK this will be a stupid question so humour me :-)
    If I create a table will it actually display a physical table because that is not what I want on my page I just want the results.

    Secondly I want to add a preview function so there needs to be a play button or something like it alongside the results:

    Eg in theory it would be:

    Play/preview button. Track. Artist. Genre

    Can this still be done using a table alongside a player like J player or I do I need to approach it another way?

    Thanks for all the help guys.

  13. #13
    I don't see why not, just create a leading TD/column with the controls in it.

    You say "you just want the results" but displaying those results in a consistent and accessible fashion is important -- this is quite obviously tabular data, so show it in a table. You want to add controls, give them their own TD in the same TR.

  14. #14
    Join Date
    May 2014
    Posts
    30
    Hi guys not sure if this should be posted this here on in the PHP thread/s but here goes.

    I understand about displaying the results on the page but some things I still need clarifying on:

    1. Initially when the user accesses the page they should get the full contents of the database listed however once they implement a search the results will change accordingly. How would I go about implementing this?

    2. Also I have two types of audio files "music" and "fx" . All the files will go into one table in the database but will be displayed on different pages, music files on the music page and fx files on the fx page. Is this possible or even advisable from one database table?

    Thanks very much.

    My code currently:

    PHP Code:
    <?php
    //Step1
     
    $db mysql_connect("localhost","root",""); 
     if (!
    $db) {
     die(
    "Database connection failed: " mysql_error());
    }
    //Step2
    $db_select mysql_select_db("fxmas",$db);
    if (!
    $db_select){
    die(
    "Database selection failed miserably: " .mysql_error());
    }
    ?>
    Code:
    <html lang="en">
    <head>
    	<!--how browser interprets stuff-->
    	<meta charset="utf-8" />
    	<title>FXMAS</title>
    	
    	<link rel="stylesheet" href="main.css" />
    	
    </head>
    <body id="home">
    
    
    PHP Code:
    <?php$result mysql_query("SELECT * FROM music"$db);if (!$result) {die("Database query failed: " .mysql_error());}while ($row mysql_fetch_array($result)) {echo $row[1]. "" .$row[2]."<br />";}?>
    <div id="big_wrapper"> <header id="main_header"> <h1></h1> <h4></h4> </header> <nav id="menu"> <form method="get" action="/search" id="search"> <input name="q" type="text" size="40" placeholder="Search..." /> </form> <ul id=navlist> <li><a href="music.php" id="homenav">Music</a></li> <li><a href="fx.php" id="fxnav">FX</a></li> <li><a href="upload.php" id="upnav">Upload</a></li> <li><a href="forum.php" id="forumnav">Forum</a></li> <li><a href="reports.php" id="reportsnav">Reports</a></li> <li><a href="about.php" id="aboutnav">About</a></li> </ul> </nav> <section> <table class="musiclist"> <tbody/> <tr> <td> <audio controls> <source src="NTLInstr.mp3"> </audio> <t/d> <td> BC Biggz <t/d> <td> Rap <t/d> <td> <t/d> </tr> <tr> <td> <t/d> </tr> <tr> <td> <t/d> </tr> <tr> <td> <t/d> </tr> </tbody> </table> <article> <header> <hgroup> <!--when you have more than one header--> <h1></h1> <h2></h2> </hgroup> </header> <p></p> <footer> <p></p> </footer> </article> <article> <header> <hgroup> <!--when you have more than one header--> <h1></h1> <h2></h2> </hgroup> </header> <p></p> <footer> <p></p> </footer> </article> </section> <aside> <h4></h4> </aside> <footer> </footer> </div> </body> </html
    ]

    PHP Code:
    <?php
    mysql_close
    ($db);
    ?>

  15. #15
    Join Date
    Jun 2014
    Location
    San Antonio
    Posts
    5
    Simply run some SQL with PHP and return the results into a table. There are tons of PHP/MySQL tutorials out there.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles