Web development & programming 

Benchmarkchart – php example code – part 5 – benchmark chart page and further thoughts

milan.ciljak
image_pdfimage_print

Article is focused on way how to alter existing code for showing submited post as a table. But scores are ordered in descending way and first 3 higest scores are differently styled. Latest part of article list number of ways hot to improve our aplication.

Numbering posted results in a chart

Before our update to code, we displayed in first table row ID number. For proper ordering from top score to bottom we must order query in descent way by score ID. Then we create auxiliary variable $postiton.

$position = 1;   // first initialization of position
            while($row = mysqli_fetch_array($output)){ 
… output omited
//echo „<td>“ . $row[‚id‘] . „</td>“; this line is changed to incrementing number showing position of the score in chart
                    echo „<td id=\“$display\“>“ . $position++ . „</td>“; // increases number of position after disply by one
  

$position variable is increased by 1 after all pass trough while loop.

Different colors for first positions

A bit harder update must be done for marking of first three score position for further stylling into a diferent colors.

Our goal for display first scores in a chart

In our code we introduced new variable $display. Into $display variable is assigned name for <td> id first, secondandthree and others. In switch statement along value of $position variable these values are added into a $display variable.

Next part show how this update is implemented in final php code:

$position = 1;   // first initialization of position
            while($row = mysqli_fetch_array($output)){ //next rows outputed in while loop
                //echo “ <div class=\“mailinglist\“> “ ; class identification must differ first, two second and other position
                switch ($position) { // along position from first to bottom displayed rows are marked with different names and recolored in style.css
                    case 1: $display=’first‘ ; break;
                    case 2:
                    case 3: $display=’secondandthree‘ ; break;
                    default: $display=’others‘ ;

                };
                    
                echo „<tr>“;
                    //echo „<td>“ . $row[‚id‘] . „</td>“; this line is changed to incrementing number showing position of the score in chart
                    echo „<td id=\“$display\“>“ . $position++ . „</td>“; // increases number of position after disply by one
                    echo „<td id=\“$display\“>“ . $row[‚score‘] . „</td>“;
                    echo „<td id=\“$display\“>“ . $row[‚nickname‘] . „</td>“;
                    echo „<td id=\“$display\“>“ . $row[‚write_date‘] . „</td>“;
                    $image_location = IMAGE_PATH.$row[‚screenshot‘];
                        echo „<td id=\“gray_under_picture\“> <img src=\“$image_location\“ alt=\“ score image \“  height=\“95\“> </td>“; 
                echo „</tr>“;
                echo “ </div> “ ;
            }
            echo „</table>“;

CSS style.css file was altered this way:

/* ************************************************ */
/* Benchamrkchart first position list display       */
/* ************************************************ */ 
#first {
  background-color: rgb(255, 129, 129);
  text-align: center;
  font-size:18px;
 }
 #secondandthree {
  background-color: rgb(178, 255, 159);
  text-align: center;
  font-size:18px;
 }

 #others {
  background-color: rgb(218, 255, 162);
  text-align: center;
 }

 #gray_under_picture {
  background-color: rgb(88, 88, 88);
  text-align: center;
 }

 #chart_table_header {
  
  text-align: center;
 }

Full code of application can be obtained from github here.

Final version of result chart table

Further improvements

As further improvement for benchmarkchart app we encorage you:

  • add submit page for admin of the page requests (for score removal)

  • add login mechanism

  • further visual adjustment of frontend
Share the article via the network
Translate »