Grow your CSS skills. Land your dream job.

nooooobie needs help

  • # September 27, 2009 at 8:03 am

    I have been working on a website using PHP and MySQL and although I have knowledge in both these fields, my knowledge is quite limited and I have come across a problem I need help with.
    I am creating a videos page and I would like the videos to be displayed (using PHP) in a format similar to what is found here:

    I would like the videos to display the date headline (the date being when the videos were posted) then the thumbnails of the videos to be displayed in 4 columns. I already have the videos page set up with the pagination, mysql connection and video details. I am currently displaying the videos in a single column as I dont know how to display PHP results in multiple columns.

    So basically I am looking for the videos page to display the results like this (example):

    Thursday, August 27, 2009
    Video 1 | Video 2 | Video 3 | Video 4
    Video 5 | Video 6 | Video 7 | Video 8

    here is the search script. many thanks

    < ?php
    include './connections/c_database.php';
    //This is a working script
    //Make sure to go through it and edit database table filelds that you are seraching
    //This script assumes you are searching 3 fields

    $connections = mysql_connect($host, $user, $pass) or die ( "Unabale to connect to the database" );
    //select database
    mysql_select_db($db) or die ( "Unable to select database!" );

    //specify how many results to display per page
    $limit = 50;

    // Get the search variable from URL
    $var = @$_GET['q'] ;
    //trim whitespace from the stored variable
    $trimmed = trim($var);
    //separate key-phrases into keywords
    $trimmed_array = explode(" ",$trimmed);
    // check for an empty string and display a message.
    if ($trimmed == "") {
    $resultmsg = "

    Search Error

    Please enter a search…

    ” ;
    // check for a search parameter
    if (!isset($var)){
    $resultmsg = “

    Search Error

    We don’t seem to have a search parameter!

    ” ;
    // Build SQL Query for each keyword entered
    foreach ($trimmed_array as $trimm){

    // EDIT HERE and specify your table and field names for the SQL query
    $query = “SELECT * FROM data WHERE id LIKE “%$trimm%” OR thumb LIKE “%$trimm%” OR titel LIKE “%$trimm%” OR code LIKE “%$trimm%”ORDER BY id DESC” ;
    // Execute the query to get number of rows that contain search kewords
    $numresults=mysql_query ($query);
    $row_num_links_main =mysql_num_rows ($numresults);
    // next determine if ‘s’ has been passed to script, if not use 0.
    // ‘s’ is a variable that gets set as we navigate the search result pages.
    if (empty($s)) {
    // now let’s get results.
    $query .= ” LIMIT $s,$limit” ;
    $numresults = mysql_query ($query) or die ( “Couldn’t execute query” );
    $row= mysql_fetch_array ($numresults);

    //store record id of every item that contains the keyword in the array we need to do this to avoid display of duplicate search result.
    //EDIT HERE and specify your field name that is primary key
    $adid_array[] = $row[ ‘id’ ];
    }while( $row= mysql_fetch_array($numresults));
    } //end foreach

    if($row_num_links_main == 0 && $row_set_num == 0){
    $resultmsg = “” . $trimmed .”

    Sorry, your search returned zero results

    ” ;
    //delete duplicate record id’s from the array. To do this we will use array_unique function
    $tmparr = array_unique($adid_array);
    $i % 5 == 0;
    foreach ($tmparr as $v) {
    $newarr[$i] = $v;
    // now you can display the results returned. But first we will display the search form on the top of the page

    < ?php
    // display what the person searched for.
    if( isset ($resultmsg)){
    echo $resultmsg;
    echo "

    Search results for : $var

    ” ;

    foreach($newarr as $value){

    // EDIT HERE and specify your table and field names for the SQL query
    $query_value = “SELECT * FROM data WHERE id = ‘$value'”;
    $num_value=mysql_query ($query_value);
    $row_linkcat= mysql_fetch_array ($num_value);
    $row_num_links= mysql_num_rows ($num_value);

    //now let’s make the keywords bold. To do that we will use preg_replace function.
    //EDIT parts of the lines below that have fields names like $row_linkcat[ ‘field1′ ]
    //This script assumes you are searching only 3 fields. If you are searching more fileds make sure that add appropriate line.
    $titlehigh = preg_replace ( “‘($var)’si” , “\1” , $row_linkcat[ ‘id’ ] );
    $linkhigh = preg_replace ( “‘($var)’si” , “\1” , $row_linkcat[ ‘titel’ ] );
    $linkthumb = preg_replace ( “‘($var)’si” , “\1” , $row_linkcat[ ‘thumb’ ] );
    $datum = preg_replace ( “‘($var)’si” , “\1” , $row_linkcat[ ‘datum’ ] );
    $code = preg_replace ( “‘($var)’si” , “\1” , $row_linkcat[ ‘code’ ] );

    foreach($trimmed_array as $trimm){
    if($trimm != ‘b’ ){
    //IF you added more fields to search make sure to add them below as well.
    $titlehigh = preg_replace( “‘($trimm)’si” , “\1” , $titlehigh);
    $linkhigh = preg_replace( “‘($trimm)’si” , “\1” , $linkhigh);
    $linkdesc = preg_replace( “‘($trimm)’si” , “\1” , $datum);
    $linkthumb = preg_replace( “‘($trimm)’si” , “\1” , $thumb);
    $linkcode = preg_replace( “‘($trimm)’si” , “\1” , $code);
    //end highlight

    < ?php echo $datum; ?>
    < ?php echo $linkhigh; ?>
    < ?php echo $thumb; ?>


    # September 30, 2009 at 5:19 pm

    If I where you I would use css to put the videos in rows.

    # October 16, 2009 at 8:37 am

    use css? any ideas

    # October 16, 2009 at 11:58 am

    Each of the items on the example page you gave have their own div that is floated to the left.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.



CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by MediaTemple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.

*May or may not contain any actual "CSS" or "Tricks".