Skrypt php oraz baza danych

Question

Witam.

Tworze sobie od czasu do czasu stronki, by nałapać troszkę praktyki. Ostatnio naleciała mnie fantazja by zrobić stronę, która pokazywałaby użytkowników z bazy danych. Ale tutaj pojawia się problem. 

W jaki sposób pobrać informacje z danych i osadzić na stronie, a potem ostylizować by każdy "kafelek" z uzytkownikiem na stronie zachowywał powiedzmy 200px odstępu od siebie?

(moja wizja takiego kafelka (zrobiona na szybko w paincie) dostepna pod tym linkiem - imgur.com)

Answer 1

Zakładam, że nawiązanie połączenia z bazą danych i  wykonanie polecenia sql w php-ie są Tobie znane.

Dla przykładowego polecenia sql

$sql = 'SELECT user_name, user_avatar FROM users';

w pętli while, dla "stworzenia kafelków" z danymi użytkownika możesz zapisać kod np. tak

  /*
      Tu kod php do połączenia się z bazą danych
  */

    przykładowy kod SQL do pobrania danych dla kafelka

    $sql = 'SELECT user_name, user_avatar FROM users';
    $result = $mysqli->query($sql);
    $mysqli->close();
    
    $user_tile_html = '';
    while ($row = $result->fetch_assoc()) {
      $user_tile_html .= "<div class='user-tile-wrap'>
                            <div>
                              <img class='user-icon' src='image/avatars/{$row['user_avatar']}' />
                            </div>
                            <div>
                              <span class='user-name'>{$row['user_name']}</span>
                            </div>
                          </div>";
    }

 i później umieszczenie w kodzie html

    <div class="users-container">
      <?php echo $user_tile_html; ?>
    </div>

i teraz możesz użyć "stylowania" za pomocą klas np.

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .users-container {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        column-gap: 2em;
        row-gap: 2em;
        width: 90vw;
        margin: 1em auto;
      }
      .user-tile-wrap {
        text-align: center;
        width: 200px;
        height: 250px;
        border: 2px solid black;
        border-radius: 5%;
        background-image: linear-gradient(transparent 10%, black);
        box-shadow: none;
        transition: box-shadow 0.4s ease-in-out;
      }
      .user-tile-wrap:hover {
        box-shadow: 0 10px 10px rgba(0,0,0,0.9);
      }
      .user-tile-wrap div {
        margin: 2em auto;
      }
      .user-tile-wrap .user-icon {
        width: 140px;
        height: 90px;
        border: 3px solid black;
        border-radius: 48%;
      }
      .user-tile-wrap .user-name {
        font: 900 1.6em monospace;
        color: white;
      }

 

dane w bazie danych pod nazwą:  user_avatar ( $row['user_avatar'] ) mogą zawierać nazwy obrazków z folderu: image/avatars np. u12345.png lub 12sd34oW56.jpg itp.

położenie folderu avatars względem pliku index.php dla tego przykładu.

cały kod przykładu

index.php

<?php

  /*
      Tu kod php do połączenia się z bazą danych
  */


  /*
    przykładowy kod SQL do pobrania danych dla kafelka

    $sql = 'SELECT user_name, user_avatar FROM users';
    $result = $mysqli->query($sql);
    $mysqli->close();
    
    $user_tile_html = '';
    while ($row = $result->fetch_assoc()) {
      $user_tile_html .= "<div class='user-tile-wrap'>
                            <div>
                              <img class='user-icon' src='https://picsum.photos/{$row['user_avatar']}' />
                            </div>
                            <div>
                              <span class='user-name'>{$row['user_name']}</span>
                            </div>
                          </div>";
    }
  */
     
     
  // Dla celów demonstracyjnych, wiersze zwrócone z zapytania SQL zapisałem
  // w postaci tablicy.
  // Multidimensional Associative Array in PHP
  // https://origin.geeksforgeeks.org/multidimensional-associative-array-in-php/

  // Dla celów demonstarcyjnych obrazki są pobierane z
  // https://picsum.photos/

  $users = [ 
    [ 'user_name'=>'Artur',     'user_avatar'=>'1' ],
    [ 'user_name'=>'Piotr',     'user_avatar'=>'2' ],
    [ 'user_name'=>'Ania',      'user_avatar'=>'3' ],
    [ 'user_name'=>'Waldemar',  'user_avatar'=>'4' ],
    [ 'user_name'=>'Agata',     'user_avatar'=>'5' ],
    [ 'user_name'=>'Krzysztof', 'user_avatar'=>'6' ],
    [ 'user_name'=>'Tadeusz',   'user_avatar'=>'1' ],
    [ 'user_name'=>'Grażyna',   'user_avatar'=>'7' ],
    [ 'user_name'=>'Martyna',   'user_avatar'=>'8' ],
    [ 'user_name'=>'Izabela',   'user_avatar'=>'9' ],
    [ 'user_name'=>'Bogdan',    'user_avatar'=>'1' ],
    [ 'user_name'=>'Celina',    'user_avatar'=>'10' ],
    [ 'user_name'=>'Damian',    'user_avatar'=>'11' ],
    [ 'user_name'=>'Ewelina',   'user_avatar'=>'12' ],
    [ 'user_name'=>'Gerard',    'user_avatar'=>'5' ],
  ];

  $user_tile_html = '';
  foreach ($users as $row) {
      $user_tile_html .= "<div class='user-tile-wrap'>
                            <div>
                              <img class='user-icon' src='https://picsum.photos/150/80/?random={$row['user_avatar']}' />
                            </div>
                            <div>
                              <span class='user-name'>{$row['user_name']}</span>
                            </div>
                          </div>";
  }
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .users-container {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        column-gap: 2em;
        row-gap: 2em;
        width: 90vw;
        margin: 1em auto;
      }
      .user-tile-wrap {
        text-align: center;
        width: 200px;
        height: 250px;
        border: 2px solid black;
        border-radius: 5%;
        background-image: linear-gradient(transparent 10%, black);
        box-shadow: none;
        transition: box-shadow 0.4s ease-in-out;
      }
      .user-tile-wrap:hover {
        box-shadow: 0 10px 10px rgba(0,0,0,0.9);
      }
      .user-tile-wrap div {
        margin: 2em auto;
      }
      .user-tile-wrap .user-icon {
        width: 140px;
        height: 90px;
        border: 3px solid black;
        border-radius: 48%;
      }
      .user-tile-wrap .user-name {
        font: 900 1.6em monospace;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="users-container">
      <?php echo $user_tile_html; ?>
    </div>
  </body>
</html>

 

przykładowy css dla wersji z grid

:root {
  --width-user-tile: 200px;
    --gap-user-tile: 1em;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.users-container {
  display: grid;
  grid-template-columns: repeat(4, var(--width-user-tile));
  grid-column-gap: var(--gap-user-tile);
  grid-row-gap: 1em;

  width: calc((4 * var(--width-user-tile)) + (3 * var(--gap-user-tile)));
  margin: 1em auto;
}
.user-tile-wrap {
  text-align: center;
  width: 200px;
  height: 250px;
  border: 2px solid black;
  border-radius: 5%;
  background-image: linear-gradient(transparent 10%, black);
  box-shadow: none;
  transition: box-shadow 0.4s ease-in-out;
}
.user-tile-wrap:hover {
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.9);
}
.user-tile-wrap div {
  margin: 2em auto;
}
.user-tile-wrap .user-icon {
  width: 150px;
  height: 80px;
  border: 3px solid black;
  border-radius: 48%;
}
.user-tile-wrap .user-name {
  font: 900 1.6em monospace;
  color: white;
}

 

Answer 2

A jest jakiś problem w stylizowaniu kafelków tak, aby miały margines wielkości 200 pikseli? Lub też użycie do wyświetlenia kafelków pojemnika z nadamy display: grid oraz odpowiednią wartością grid-gap?