Pull Daten aus der DB und Anzeige in einer Rangliste

ich eine Rangliste mit dem HTML- und CSS-Codes unten angegeben:Pull Daten aus der DB und Anzeige in einer Rangliste

/*-------------------- 
 
Body 
 
--------------------*/ 
 
*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    min-height: 450px; 
 
    height: 100vh; 
 
    margin: 0; 
 
    background: radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%); 
 
    color: #fff; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 

 
/*-------------------- 
 
Leaderboard 
 
--------------------*/ 
 
.leaderboard { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 285px; 
 
    height: 308px; 
 
    background: linear-gradient(to bottom, #3a404d, #181c26); 
 
    border-radius: 10px; 
 
    box-shadow: 0 7px 30px rgba(62, 9, 11, .3); 
 

 
    h1 { 
 
    font-size: 18px; 
 
    color: #e1e1e1; 
 
    padding: 12px 13px 18px; 
 

 
    & svg { 
 
     width: 25px; 
 
     height: 26px; 
 
     position: relative; 
 
     top: 3px; 
 
     margin-right: 6px; 
 
     vertical-align: baseline; 
 
    } 
 

 
    } 
 

 
    ol { 
 
    counter-reset: leaderboard; 
 

 
    li { 
 
     position: relative; 
 
     z-index: 1; 
 
     font-size: 14px; 
 
     counter-increment: leaderboard; 
 
     padding: 18px 10px 18px 50px; 
 
     cursor: pointer; 
 
     backface-visibility: hidden; 
 
     transform: translateZ(0) scale(1.0, 1.0); 
 

 

 
     &::before { 
 
     content: counter(leaderboard); 
 
     position: absolute; 
 
     z-index: 2; 
 
     top: 15px; 
 
     left: 15px; 
 
     width: 20px; 
 
     height: 20px; 
 
     line-height: 20px; 
 
     color: #c24448; 
 
     background: #fff; 
 
     border-radius: 20px; 
 
     text-align: center; 
 
     } 
 

 
     mark { 
 
     position: absolute; 
 
     z-index: 2; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
     padding: 18px 10px 18px 50px; 
 
     margin: 0; 
 
     background: none; 
 
     color: #fff; 
 

 
     &::before, &::after { 
 
      content: ''; 
 
      position: absolute; 
 
      z-index: 1; 
 
      bottom: -11px; 
 
      left: -9px; 
 
      border-top: 10px solid #c24448; 
 
      border-left: 10px solid transparent; 
 
      transition: all .1s ease-in-out; 
 
      opacity: 0; 
 
     } 
 

 
     &::after { 
 
      left: auto; 
 
      right: -9px; 
 
      border-left: none; 
 
      border-right: 10px solid transparent; 
 
     } 
 
     } 
 

 
     small { 
 
     position: relative; 
 
     z-index: 2; 
 
     display: block; 
 
     text-align: right; 
 
     } 
 

 
     &::after { 
 
     content: ''; 
 
     position: absolute; 
 
     z-index: 1; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
     background: #fa6855; 
 
     box-shadow: 0 3px 0 rgba(0, 0, 0, .08); 
 
     // transform: scaleX(1.06) scaleY(1.03); 
 
     transition: all .3s ease-in-out; 
 
     opacity: 0; 
 
     } 
 

 
     &:nth-child(1) { 
 
     background: #fa6855; 
 
     &::after { 
 
      background: #fa6855; 
 
     } 
 
     } 
 

 
     &:nth-child(2) { 
 
     background: #e0574f; 
 
     &::after { 
 
      background: #e0574f; 
 
      box-shadow: 0 2px 0 rgba(0, 0, 0, .08); 
 
     } 
 

 
     & mark { 
 
      &::before, &::after { 
 
      border-top: 6px solid #ba4741; 
 
      bottom: -7px; 
 
      } 
 
     } 
 
     } 
 

 
     &:nth-child(3) { 
 
     background: #d7514d; 
 
     &::after { 
 
      background: #d7514d; 
 
      box-shadow: 0 1px 0 rgba(0, 0, 0, .11); 
 
     } 
 

 
     & mark { 
 
      &::before, &::after { 
 
      border-top: 2px solid #b0433f; 
 
      bottom: -3px; 
 
      } 
 
     } 
 
     } 
 

 
     &:nth-child(4) { 
 
     background: #cd4b4b; 
 
     &::after { 
 
      background: #cd4b4b; 
 
      box-shadow: 0 -1px 0 rgba(0, 0, 0, .15); 
 
     } 
 

 
     & mark { 
 
      &::before, &::after { 
 
      top: -7px; 
 
      bottom: auto; 
 
      border-top: none; 
 
      border-bottom: 6px solid #a63d3d;; 
 
      } 
 
     } 
 
     } 
 

 
     &:nth-child(5) { 
 
     background: #c24448; 
 
     border-radius: 0 0 10px 10px; 
 
     &::after { 
 
      background: #c24448; 
 
      box-shadow: 0 -2.5px 0 rgba(0, 0, 0, .12); 
 
      border-radius: 0 0 10px 10px; 
 
     } 
 

 
     & mark { 
 
      &::before, &::after { 
 
      top: -9px; 
 
      bottom: auto; 
 
      border-top: none; 
 
      border-bottom: 8px solid #993639; 
 
      } 
 
     } 
 
     } 
 

 
    } 
 

 
    // hover 
 
    li:hover { 
 
     z-index: 2; 
 
     overflow: visible; 
 

 
     &::after { 
 
     opacity: 1; 
 
     transform: scaleX(1.06) scaleY(1.03); 
 
     } 
 

 
     & mark { 
 
     &::before, &::after { 
 
      opacity: 1; 
 
      transition: all .35s ease-in-out; 
 
     } 
 
     } 
 
    } 
 

 
    } 
 
} 
 

 
* { 
 
    //display: none; 
 
}

<div class="leaderboard"> 
 
    <h1> 
 
    <svg class="ico-cup"> 
 
     <use xlink:href="#cup"></use> 
 
    </svg> 
 
    Most active Players 
 
    </h1> 
 
    <ol> 
 
    <li> 
 
     <mark>Jerry Wood</mark> 
 
     <small>315</small> 
 
    </li> 
 
    <li> 
 
     <mark>Brandon Barnes</mark> 
 
     <small>301</small> 
 
    </li> 
 
    <li> 
 
     <mark>Raymond Knight</mark> 
 
     <small>292</small> 
 
    </li> 
 
    <li> 
 
     <mark>Trevor McCormick</mark> 
 
     <small>245</small> 
 
    </li> 
 
    <li> 
 
     <mark>Andrew Fox</mark> 
 
     <small>203</small> 
 
    </li> 
 
    </ol> 
 
</div> 
 

 

 
<svg style="display: none;"> 
 
    <symbol id="cup" x="0px" y="0px" 
 
\t width="25px" height="26px" viewBox="0 0 25 26" enable-background="new 0 0 25 26" xml:space="preserve"> 
 
<path fill="#F26856" d="M21.215,1.428c-0.744,0-1.438,0.213-2.024,0.579V0.865c0-0.478-0.394-0.865-0.88-0.865H6.69 
 
\t C6.204,0,5.81,0.387,5.81,0.865v1.142C5.224,1.641,4.53,1.428,3.785,1.428C1.698,1.428,0,3.097,0,5.148 
 
\t C0,7.2,1.698,8.869,3.785,8.869h1.453c0.315,0,0.572,0.252,0.572,0.562c0,0.311-0.257,0.563-0.572,0.563 
 
\t c-0.486,0-0.88,0.388-0.88,0.865c0,0.478,0.395,0.865,0.88,0.865c0.421,0,0.816-0.111,1.158-0.303 
 
\t c0.318,0.865,0.761,1.647,1.318,2.31c0.686,0.814,1.515,1.425,2.433,1.808c-0.04,0.487-0.154,1.349-0.481,2.191 
 
\t c-0.591,1.519-1.564,2.257-2.975,2.257H5.238c-0.486,0-0.88,0.388-0.88,0.865v4.283c0,0.478,0.395,0.865,0.88,0.865h14.525 
 
\t c0.485,0,0.88-0.388,0.88-0.865v-4.283c0-0.478-0.395-0.865-0.88-0.865h-1.452c-1.411,0-2.385-0.738-2.975-2.257 
 
\t c-0.328-0.843-0.441-1.704-0.482-2.191c0.918-0.383,1.748-0.993,2.434-1.808c0.557-0.663,1-1.445,1.318-2.31 
 
\t c0.342,0.192,0.736,0.303,1.157,0.303c0.486,0,0.88-0.387,0.88-0.865c0-0.478-0.394-0.865-0.88-0.865 
 
\t c-0.315,0-0.572-0.252-0.572-0.563c0-0.31,0.257-0.562,0.572-0.562h1.452C23.303,8.869,25,7.2,25,5.148 
 
\t C25,3.097,23.303,1.428,21.215,1.428z M5.238,7.138H3.785c-1.116,0-2.024-0.893-2.024-1.99c0-1.097,0.908-1.99,2.024-1.99 
 
\t c1.117,0,2.025,0.893,2.025,1.99v2.06C5.627,7.163,5.435,7.138,5.238,7.138z M18.883,21.717v2.553H6.118v-2.553H18.883 
 
\t L18.883,21.717z M13.673,18.301c0.248,0.65,0.566,1.214,0.947,1.686h-4.24c0.381-0.472,0.699-1.035,0.947-1.686 
 
\t c0.33-0.865,0.479-1.723,0.545-2.327c0.207,0.021,0.416,0.033,0.627,0.033c0.211,0,0.42-0.013,0.627-0.033 
 
\t C13.195,16.578,13.344,17.436,13.673,18.301z M12.5,14.276c-2.856,0-4.93-2.638-4.93-6.273V1.73h9.859v6.273 
 
\t C17.43,11.638,15.357,14.276,12.5,14.276z M21.215,7.138h-1.452c-0.197,0-0.39,0.024-0.572,0.07v-2.06 
 
\t c0-1.097,0.908-1.99,2.024-1.99c1.117,0,2.025,0.893,2.025,1.99C23.241,6.246,22.333,7.138,21.215,7.138z"/> 
 
     </symbol> 
 
</svg>

Ich versuche, Daten aus der Db und Anzeige zu ziehen die Top 5 in der leaderboard.here ist die PHP in der HTML, die ich versucht auszuführen:

<?php 
 
\t session_start(); 
 

 
    mysql_connect('localhost','cl29-demodb','*****') or die(mysql_error()); 
 
\t mysql_select_db('cl29-demodb') or die(mysql_error()); 
 

 
    $sql = "select EmployeeName,Total_points_Rewarded from EmployeeTable 
 
    order by LevelFieldTotal desc 
 
    LIMIT 10 "; 
 
    $result = mysql_query($sql); 
 

 
    while($data = mysql_fetch_array($result)) { 
 

 
    echo "" . $data['EmployeeName'] . " " . $data['Total_points_Rewarded'] . "."; 
 

 
    } 
 

 

 
?> 
 

 

 
<!DOCTYPE html> 
 
<html > 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>DailyUI #019 - Leaderboard</title> 
 

 

 
    <link rel="stylesheet" href="lbred/css/reset.css"> 
 

 
    <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'> 
 

 
     <link rel="stylesheet" href="lbred/css/style.css"> 
 

 

 

 

 

 
    </head> 
 

 
    <body> 
 

 

 
<div class="leaderboard"> 
 
    <h1> 
 
    <svg class="ico-cup"> 
 
     <use xlink:href="#cup"></use> 
 
    </svg> 
 
    Leaderboard 
 
    </h1> 
 
    <ol> 
 
    <li> 
 
     <mark>Jerry Wood</mark> 
 
     <small>315</small> 
 
    </li> 
 
    <li> 
 
     <mark>Brandon Barnes</mark> 
 
     <small>301</small> 
 
    </li> 
 
    <li> 
 
     <mark>Raymond Knight</mark> 
 
     <small>292</small> 
 
    </li> 
 
    <li> 
 
     <mark>Trevor McCormick</mark> 
 
     <small>245</small> 
 
    </li> 
 
    <li> 
 
     <mark>Andrew Fox</mark> 
 
     <small>203</small> 
 
    </li> 
 
    </ol> 
 
</div> 
 

 

 
<svg style="display: none;"> 
 
    <symbol id="cup" x="0px" y="0px" 
 
\t width="25px" height="26px" viewBox="0 0 25 26" enable-background="new 0 0 25 26" xml:space="preserve"> 
 
<path fill="#F26856" d="M21.215,1.428c-0.744,0-1.438,0.213-2.024,0.579V0.865c0-0.478-0.394-0.865-0.88-0.865H6.69 
 
\t C6.204,0,5.81,0.387,5.81,0.865v1.142C5.224,1.641,4.53,1.428,3.785,1.428C1.698,1.428,0,3.097,0,5.148 
 
\t C0,7.2,1.698,8.869,3.785,8.869h1.453c0.315,0,0.572,0.252,0.572,0.562c0,0.311-0.257,0.563-0.572,0.563 
 
\t c-0.486,0-0.88,0.388-0.88,0.865c0,0.478,0.395,0.865,0.88,0.865c0.421,0,0.816-0.111,1.158-0.303 
 
\t c0.318,0.865,0.761,1.647,1.318,2.31c0.686,0.814,1.515,1.425,2.433,1.808c-0.04,0.487-0.154,1.349-0.481,2.191 
 
\t c-0.591,1.519-1.564,2.257-2.975,2.257H5.238c-0.486,0-0.88,0.388-0.88,0.865v4.283c0,0.478,0.395,0.865,0.88,0.865h14.525 
 
\t c0.485,0,0.88-0.388,0.88-0.865v-4.283c0-0.478-0.395-0.865-0.88-0.865h-1.452c-1.411,0-2.385-0.738-2.975-2.257 
 
\t c-0.328-0.843-0.441-1.704-0.482-2.191c0.918-0.383,1.748-0.993,2.434-1.808c0.557-0.663,1-1.445,1.318-2.31 
 
\t c0.342,0.192,0.736,0.303,1.157,0.303c0.486,0,0.88-0.387,0.88-0.865c0-0.478-0.394-0.865-0.88-0.865 
 
\t c-0.315,0-0.572-0.252-0.572-0.563c0-0.31,0.257-0.562,0.572-0.562h1.452C23.303,8.869,25,7.2,25,5.148 
 
\t C25,3.097,23.303,1.428,21.215,1.428z M5.238,7.138H3.785c-1.116,0-2.024-0.893-2.024-1.99c0-1.097,0.908-1.99,2.024-1.99 
 
\t c1.117,0,2.025,0.893,2.025,1.99v2.06C5.627,7.163,5.435,7.138,5.238,7.138z M18.883,21.717v2.553H6.118v-2.553H18.883 
 
\t L18.883,21.717z M13.673,18.301c0.248,0.65,0.566,1.214,0.947,1.686h-4.24c0.381-0.472,0.699-1.035,0.947-1.686 
 
\t c0.33-0.865,0.479-1.723,0.545-2.327c0.207,0.021,0.416,0.033,0.627,0.033c0.211,0,0.42-0.013,0.627-0.033 
 
\t C13.195,16.578,13.344,17.436,13.673,18.301z M12.5,14.276c-2.856,0-4.93-2.638-4.93-6.273V1.73h9.859v6.273 
 
\t C17.43,11.638,15.357,14.276,12.5,14.276z M21.215,7.138h-1.452c-0.197,0-0.39,0.024-0.572,0.07v-2.06 
 
\t c0-1.097,0.908-1.99,2.024-1.99c1.117,0,2.025,0.893,2.025,1.99C23.241,6.246,22.333,7.138,21.215,7.138z"/> 
 
     </symbol> 
 
</svg> 
 

 

 

 

 
    </body> 
 
</html>

Das Problem ist, dass ich die top5 in der Rangliste echo. Im Moment ist es so, wie es aussieht.

Bitte help.Ich verwende mysql hier.

Quelle

2016-10-20 Shivam Sharma

Was wäre das Problem? –

1: Was ist das Problem? 2: Beenden Sie die Verwendung von mysql_ * -Funktionen !!!!! Verwenden Sie stattdessen mysqli oder PDO, da mysql veraltet ist und nicht mehr unterstützt wird. Oh und wo willst du die $ Daten anzeigen? Sie füllen die Variable, aber Sie zeigen sie nirgends an ... – Twinfriends

Danke. Ich werde sqli in Zukunft verwenden. Hier ist das Problem, ich bin nicht in der Lage, die Fetch-Variable in der Rangliste zu wiederholen, um die Top 5 anzuzeigen. –

Diese Arbeit sollte nur mit diesem Ihrem PHP-Code ersetzen:

<?php 
    session_start(); 

    mysql_connect('localhost','cl29-demodb','*****') or die(mysql_error()); 
    mysql_select_db('cl29-demodb') or die(mysql_error()); 

     $sql = "select EmployeeName,Total_points_Rewarded from EmployeeTable 
     order by LevelFieldTotal desc 
     LIMIT 10 "; 
     $result = mysql_query($sql); 

    $html = ''; 
    while($data = mysql_fetch_array($result)) { 
     $html .= '<li><mark>'.$data['EmployeeName'].'</mark>'; 
     $html .= '<small>'.$data['Total_points_Rewarded'].'</small></li>'; 
    } 
?> 

<!DOCTYPE html> 
<html > 
    <head> 
    <meta charset="UTF-8"> 
    <title>DailyUI #019 - Leaderboard</title> 


    <link rel="stylesheet" href="lbred/css/reset.css"> 

    <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'> 

     <link rel="stylesheet" href="lbred/css/style.css"> 

    </head> 

    <body> 


<div class="leaderboard"> 
    <h1> 
    <svg class="ico-cup"> 
     <use xlink:href="#cup"></use> 
    </svg> 
    Leaderboard 
    </h1> 
    <ol> 

    <?php echo $html;?> 
    </ol> 
</div> 


<svg style="display: none;"> 
    <symbol id="cup" x="0px" y="0px" 
    width="25px" height="26px" viewBox="0 0 25 26" enable-background="new 0 0 25 26" xml:space="preserve"> 
<path fill="#F26856" d="M21.215,1.428c-0.744,0-1.438,0.213-2.024,0.579V0.865c0-0.478-0.394-0.865-0.88-0.865H6.69 
    C6.204,0,5.81,0.387,5.81,0.865v1.142C5.224,1.641,4.53,1.428,3.785,1.428C1.698,1.428,0,3.097,0,5.148 
    C0,7.2,1.698,8.869,3.785,8.869h1.453c0.315,0,0.572,0.252,0.572,0.562c0,0.311-0.257,0.563-0.572,0.563 
    c-0.486,0-0.88,0.388-0.88,0.865c0,0.478,0.395,0.865,0.88,0.865c0.421,0,0.816-0.111,1.158-0.303 
    c0.318,0.865,0.761,1.647,1.318,2.31c0.686,0.814,1.515,1.425,2.433,1.808c-0.04,0.487-0.154,1.349-0.481,2.191 
    c-0.591,1.519-1.564,2.257-2.975,2.257H5.238c-0.486,0-0.88,0.388-0.88,0.865v4.283c0,0.478,0.395,0.865,0.88,0.865h14.525 
    c0.485,0,0.88-0.388,0.88-0.865v-4.283c0-0.478-0.395-0.865-0.88-0.865h-1.452c-1.411,0-2.385-0.738-2.975-2.257 
    c-0.328-0.843-0.441-1.704-0.482-2.191c0.918-0.383,1.748-0.993,2.434-1.808c0.557-0.663,1-1.445,1.318-2.31 
    c0.342,0.192,0.736,0.303,1.157,0.303c0.486,0,0.88-0.387,0.88-0.865c0-0.478-0.394-0.865-0.88-0.865 
    c-0.315,0-0.572-0.252-0.572-0.563c0-0.31,0.257-0.562,0.572-0.562h1.452C23.303,8.869,25,7.2,25,5.148 
    C25,3.097,23.303,1.428,21.215,1.428z M5.238,7.138H3.785c-1.116,0-2.024-0.893-2.024-1.99c0-1.097,0.908-1.99,2.024-1.99 
    c1.117,0,2.025,0.893,2.025,1.99v2.06C5.627,7.163,5.435,7.138,5.238,7.138z M18.883,21.717v2.553H6.118v-2.553H18.883 
    L18.883,21.717z M13.673,18.301c0.248,0.65,0.566,1.214,0.947,1.686h-4.24c0.381-0.472,0.699-1.035,0.947-1.686 
    c0.33-0.865,0.479-1.723,0.545-2.327c0.207,0.021,0.416,0.033,0.627,0.033c0.211,0,0.42-0.013,0.627-0.033 
    C13.195,16.578,13.344,17.436,13.673,18.301z M12.5,14.276c-2.856,0-4.93-2.638-4.93-6.273V1.73h9.859v6.273 
    C17.43,11.638,15.357,14.276,12.5,14.276z M21.215,7.138h-1.452c-0.197,0-0.39,0.024-0.572,0.07v-2.06 
    c0-1.097,0.908-1.99,2.024-1.99c1.117,0,2.025,0.893,2.025,1.99C23.241,6.246,22.333,7.138,21.215,7.138z"/> 
     </symbol> 
</svg> 




    </body> 
</html>

Quelle

2016-10-20 10:44:20 krasipenkov

Was haben Sie geändert ..? Und immer noch keine gute Antwort, mysql_ * Funktionen sollten nicht mehr verwendet werden. Ach ja und auch für Sie: Ihre Daten werden nirgends angezeigt. – Twinfriends

danke, aber nicht funktioniert –

@Twinfriends Ich legte 'ol' und' li' Tags ... genau wie das gewünschte Ergebnis. – krasipenkov

So, hier ist eine (meiner Meinung nach) besser Version Ihres Code:

$link = mysqli_connect("localhost", "cl129-demodb", "**************", "cl129-demodb"); 

/* check connection */ 
if (mysqli_connect_errno()) { 
    printf("Connect failed: %s\n", mysqli_connect_error()); 
    exit(); 
} 

$query = "select EmployeeName,Total_points_Rewarded from EmployeeTable 
    order by LevelFieldTotal desc 
    LIMIT 5"; 
$result = mysqli_query($link, $query); 


while($row = mysqli_fetch_array($result, ASSOC)) { 
    echo '<mark>'.$row["EmployeeName"].'</mark><br>'; 
    echo '<small>'.$row["Total_points_Rewarded"].'</small><br>'; 
} 

/* close connection */ 
mysqli_close($link);

ich es neu geschrieben für du mit mysqli. Auch habe ich ein Echo in der While-Schleife hinzugefügt, so dass die Daten angezeigt werden. Wenn Sie es in einer Variablen speichern möchten, fügen Sie einfach erneut Ihren $ data-Teil hinzu und verwenden Sie dann echo $ data; überall dort, wo die Liste angezeigt werden soll. Hoffe es hat geholfen.

Quelle

2016-10-20 10:54:45 Twinfriends

Vielen Dank. Aber Ihr Code funktioniert nicht. Ich habe den größten Teil meines Codes in der Web-App sql, so wird später auf sqli ändern. –

Danke, dass du es umgeschrieben hast. Ich schätze es. –

Pull Daten aus der DB und Anzeige in einer Rangliste

Antwort

Verwandte Themen