PHP MYSQL VERİ LİSTELEME, GÖRÜNTÜLEME

Merhaba..

Veri tabanındaki verileri düzgün bir tasarımla listleyebiliriz. Örneğin tablo içerisinde , kartlar şeklinde vs... Sayfanın, projenin yapısına göre istediğiniz şekilde yapabilirsiniz. Örneğin sitem veri tabanındaki üyeler tablosu'nun içeriği aşağıdaki gibi olsun. Uyeler.php sayfasında tüm üyeleri tablo ile listelemeye çalışalım..

Veri tabanı ile çalışacağımız için öncelikle veri tabanı bağlantısını yapmamız gerekiyor.

<?php

// baglan.php

$host="localhost";
$user="root";
$pass="";
$db="sitem";

//mysql bağlantı
$baglan=@mysql_pconnect($host,$user,$pass);

//veri tabanına bağlantı
$vt_baglanti=mysql_select_db($db);

//mysql türkçe problemi için
mysql_query("SET NAMES UTF8");


?>

Veri tabanı işlemlerinde yaptığımız gibi yine yukarıdaki baglan.php sayfasını uyeler.php sayfasına include edeceğiz..

<?php  include ("baglan.php"); ?>

ÜYELERİ TABLO İLE LİSTELEME

Üyeleri tablo içerisinde listelemek için Bootstrap 5.0 yapısından yararlanalım.. Bildiğiniz üzere Tablodaki bilgiler satırlar (tr) halinde tutulur , dolayısıyla while döngüsü içerisinde tekrarlanan kısım satır olacak. Veri tabanından gelen bilgileri ise satır içindeki sütunlara yerleştireceğiz.

<?php include("baglan.php"); ?>

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<title>ÜYELER</title>
</head>
<body> 

	<div class="container">

		<div class="mt-5 mb-5">
			<h1 class=" ">ÜYELER 
				<a href="uyeekle.php" class="btn btn-primary float-end "> YENİ ÜYE </a> 
			</h1>
		</div>

		<table class="table mt-5">
			<thead>
				<tr>
					<th>id</th>
					<th>Ad Soyad</th>
					<th>Mail</th>
					<th>Şifre</th>
					<th>Yaş</th>
					<th>Resim</th>
					<th width="170px"> </th>
				</tr>
			</thead>
			<tbody>

				<?php  
				 
				$uyeler=mysql_query("select * from uyeler order by id asc"); 
				$toplamuye=mysql_num_rows($uyeler);

				while($uye=mysql_fetch_array($uyeler)) { 

					echo "
					<tr>
					   <td>".$uye["id"]."</td>
					  <td><b>".$uye["adsoyad"]."</b></td>
					   <td>".$uye["mail"]."</td>
					   <td>".$uye["sifre"]."</td>
					   <td>".$uye["yas"]."</td>
					   <td>".$uye["resim"]."</td>
					   <td align='right'>
					   <a href='?msj=sil&id=".$uye["id"]."' class='btn btn-danger btn-xs'
					    onclick='return confirm(\"Silinsin mi?\")'> Sil</a>
					   <a href='uyeguncelle.php?id=".$uye["id"]."' class='btn btn-info btn-xs'> GÜncelle</a>
					   </td> 
					</tr> ";
				}

				?> 

			</tbody>
		</table>

		<div class="mt-5 mb-5">
			<h4><?php echo $toplamuye." Üye"; ?> </h4>
		</div>

	</div>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
	integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>
</html>

Yukarıdaki kodlarla uyeler.php sayfasının görünümü aşağıdaki gibi olacaktır. Satır sonlarına SİL ve GÜNCELLE linkleri ile sağ üste bir YENİ ÜYE butonu ekledim. İlgili makalelerde o işlemlerin detayına bakabilirsiniz.

ÜYELERİ KARTLAR ŞEKLİNDE GÖRÜNTÜLEME

Üyeleri kartlar şeklinde görüntülemek için yine Bootstrap 5.0 yapısından yararlanalım.. Bu kez veri tabanından gelen blgileri card class'lı divlerin uygun yerlerine PHP ile yazdırıp , bu kartları row sınıfı içerisinde while döngüsü ile tekrar ettireceğiz.

<?php include("baglan.php");?>

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<title>ÜYELER</title>
</head>
<body>


	<div class="container">
		<div class="mt-5 mb-5">
			<h1 class=" ">ÜYELER 
				<a href="uyeekle.php" class="btn btn-primary float-end "> YENİ ÜYE </a> 
			</h1>
		</div>


		
		<!-- CARD İLE GÖSTERİM-->

		<?php 

			$uyeler=mysql_query("select * from uyeler order by id desc");
			$toplamuye=mysql_num_rows($uyeler);

			echo  "<h3>".$toplamuye." Üye</h3>";   // Toplam Üye Sayısı Yazdırılıyor

		?>

		<div clasS="row mt-5">


			<?php 

				while($uye=mysql_fetch_array($uyeler)) { ?>

			    <!-- card -->		
				<div class="col-md-3 mb-5">
					<div class="card">
						<img src="uyeresimleri/<?php echo $uye['resim']; ?>" class="card-img-top">
						<div class="card-body">
							<h5 class="card-title"><?php echo $uye['adsoyad']; ?></h5>
							<p class="card-text"><?php echo $uye['mail']; ?></p>
							<a href='?msj=sil&id=<?php echo $uye['id']; ?>"' class="btn btn-primary">Detay</a>
							<a href='?msj=sil&id=<?php echo $uye['id']; ?>"' class='btn btn-danger btn-xs'
								onclick='return confirm("Silinsin mi?")'> Sil</a>
								<a href='uyeguncelle.php?id=<?php echo $uye['id']; ?>' class='btn btn-info btn-xs'> GÜncelle</a>
						</div>
					</div>
				</div>
				<!-- card -->	


				<?php } ?> 

		</div> 

	</div>


	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
	integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>
</html>

Yukarıdaki kodlarla uyeler.php sayfasının görünümü aşağıdaki gibi olacaktır. Kartların altına tablo ile listelemede olduğu gibi DETAY, SİL ve GÜNCELLE linkleri ile sağ üste bir YENİ ÜYE butonu ekledim. İlgili makalelerde o işlemlerin detayına bakabilirsiniz.

Ben burada tasarım için bootstrap 5.0 yapısı kullandım ancak sizler bootstrap kullanmak yerine kartlarınızı css ile kendiniz düzenleyebilirsiniz.. Sonuçta verileri alıp yazdırma , listeleme mantığını anladıktan sonra, sayfanın tasarımı, link kurgusu tamamen sizin bakış açınıza , sayfanızın yapısına bağlı olacaktır.