acil yardım cardlar üst üste geliyor php
öncelikle merhaba (4 yılın ardından ilk çalışmam bu) benim bir sorunum var çalıştığım panelde ürün ekleme bölümü biraz sorunlu çalışıyor bir türlü çözemedim şu sorunu
aslında ürün eklemede mekanizmasında sorun yok
eklenen ürünler (card)lar üst üste geliyor benim istediğim yan yana gelmeleri üç card yan yana olacak dördüncü card bu üç cardın aşşağısında olacak öyle devam edecek mekanizma o şekilde yapmaya çalıştım
beceremedim 2 gündür uğraşıyorum yardım edecek varsa bunlar bahsi geçen kodlar
cardların eklendiği bölümün kodları
<?php
$sayfa = 'Ürünler';
include('inc/vt.php');
include ('inc/nav.php');
$sorgu = $baglanti->prepare("SELECT * FROM urunler where aktif=1 order by sira");
$sorgu->execute();
$yon = 'sag';
while ($sonuc = $sorgu->fetch()) {
?>
<br><br><br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>asd</title>
<link rel="icon" type="image/x-icon" href="" />
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="css/styles.css" rel="stylesheet" />
<link rel="stylesheet" href="css/card.css">
</head>
<body>
<section class="wrapper">
<div class="container-fostrap">
<div class="content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="card">
<div class="img-card">
<img width="270" height="270" src="img/<?= $sonuc['foto'] ?>"/>
</div>
<div class="card-content">
<h4 class="card-title">
<h4><?= $sonuc['baslik'] ?>
</h4>
<p class="">
<?= $sonuc['ustBaslik'] ?> </p>
</div>
<div class="card-read-more">
<a href="#" class="btn btn-link btn-block">
Satın Al
</a>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/scripts.js"></script>
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
<?php
}
bu da panelin kodları:
<script type="text/javascript" src="../js/sweetalert.min.js"></script>
<?php
$sayfa = "Ürünler";
include('../inc/vt.php');
if ($_POST) { // Sayfada post olup olmadığını kontrol ediyoruz.
$baslik = $_POST['baslik']; // Sayfa yenilendikten sonra post edilen değerleri değişkenlere atıyoruz
$icerik = $_POST['icerik'];
$ustBaslik = $_POST['ustBaslik'];
$sira = $_POST['sira'];
$aktif = 0;
if (isset($_POST['aktif'])) $aktif = 1;
$hata = "";
// Veri alanlarının boş olmadığını kontrol ettiriyoruz. başka kontrollerde yapabilirsiniz.
if ($baslik <> "" && $icerik <> "" && isset($_FILES['foto'])) {
if ($_FILES['foto']['error'] != 0) {
$hata .= 'Dosya yüklenirken hata gerçekleşti lütfen daha sonra tekrar deneyiniz.';
} else {
$dosya_adi = strtolower($_FILES['foto']['name']);
if (file_exists('images/' . $dosya_adi)) {
$hata .= " $dosya_adi diye bir dosya var";
} else {
$boyut = $_FILES['foto']['size'];
if ($boyut > (1024 * 1024 * 2)) {
$hata .= ' Dosya boyutu 2MB den büyük olamaz.';
} else {
$dosya_tipi = $_FILES['foto']['type'];
$dosya_uzanti = explode('.', $dosya_adi);
$dosya_uzanti = $dosya_uzanti[count($dosya_uzanti) - 1];
if (!in_array($dosya_tipi, ['image/png', 'image/jpeg', 'image/webp']) || !in_array($dosya_uzanti, ['png', 'jpg', 'jpeg', 'webp'])) {
//if (($dosya_tipi != 'image/png' || $dosya_uzanti != 'png' )&&( $dosya_tipi != 'image/jpeg' || $dosya_uzanti != 'jpg')) {
$hata .= ' Hata, dosya türü JPEG veya PNG olmalı.';
} else {
$foto = $_FILES['foto']['tmp_name'];
copy($foto, '../img/' . $dosya_adi);
//Eklencek veriler diziye ekleniyor
$satir = [
'foto' => $dosya_adi,
'baslik' => $baslik,
'ustBaslik' => $ustBaslik,
'sira' => $sira,
'aktif' => $aktif,
'icerik' => $icerik,
];
// Veri ekleme sorgumuzu yazıyoruz.
$sql = "INSERT INTO urunler SET foto=:foto, baslik=:baslik,aktif=:aktif,sira=:sira, ustBaslik=:ustBaslik, icerik=:icerik;";
$durum = $baglanti->prepare($sql)->execute($satir);
if ($durum) {
echo '<script>swal("Başarılı","Ürün Eklendi","success").then((value)=>{ window.location.href = "urunler1.php"});
</script>';
}
}
}
}
}
}
if($hata!=""){
echo '<script>swal("Hata","'.$hata.'","error");</script>';
}
}
?>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Ürünler</title>
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<!-- Page level plugin CSS-->
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
</head><body id="page-top">
<nav class="navbar navbar-expand navbar-dark bg-dark static-top">
<a class="navbar-brand mr-1" href="index.php">Admin Paneli</a>
<button class="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#">
<i class="fas fa-bars"></i>
</button>
<!-- Navbar Search -->
<form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
<div class="input-group">
<input type="text" class="form-control" placeholder="Panel Araması" aria-label="Search"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Navbar -->
<ul class="navbar-nav ml-auto ml-md-0">
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user-circle fa-fw"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">Çıkış</a>
</div>
</li>
</ul>
</nav><div id="wrapper">
<!-- Sidebar -->
<ul class="sidebar navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="index.php">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Ana Sayfa</span>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="hakkimizda.php">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Hakkımızda</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="urunler1.php">
<i class="fas fa-fw fa-chart-area"></i>
<span>Ürünler</span></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="iletisim.php">
<i class="fas fa-fw fa-table"></i>
<span>İletişim</span></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="kullanicilar.php">
<i class="fas fa-fw fa-table"></i>
<span>Kullanıcılar</span></a>
</li>
</ul><script src="vendor/CKEditor5/ckeditor.js"></script>
<div id="content-wrapper">
<div class="container-fluid">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Dashboard</a>
</li>
<li class="breadcrumb-item active">Ürün Ekle</li>
</ol>
<div class="card mb-3">
<div class="card-body">
<form method="post" action="urunEkle.php" enctype="multipart/form-data">
<div class="form-group">
<label for="foto">Foto</label>
<input required type="file" name="foto" class="form-control-file" id="foto">
</div>
<div class="form-group">
<label>Üst Başlık</label>
<input required type="text" class="form-control" name="ustBaslik" placeholder="Üst başlık">
</div>
<div class="form-group">
<label>Başlık</label>
<input required type="text" class="form-control" name="baslik" placeholder="Başlık">
</div>
<div class="form-group">
<label for="icerik">İçerik</label>
<textarea name="icerik" id="icerik"></textarea>
<script>
ClassicEditor
.create(document.querySelector('#icerik'))
.then(editor => {
console.log(editor);
})
.catch(error => {
console.error(error);
});
</script>
</div>
<div class="form-group">
<label>Sıra</label>
<input required type="text" class="form-control" name="sira" placeholder="Sıra">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="aktif" id="aktif">
<label class="form-check-label" for="aktif">Aktif mi?</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Kaydet</button>
</div>
</form>
</div>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
<!-- /.container-fluid -->
<script>
$(document).ready(function () {
$('#dataTable').DataTable({
language: {
info: "_TOTAL_ kayıttan _START_ - _END_ kayıt gösteriliyor.",
infoEmpty: "Gösterilecek hiç kayıt yok.",
loadingRecords: "Kayıtlar yükleniyor.",
zeroRecords: "Tablo boş",
search: "Arama:",
sLengthMenu: "Sayfada _MENU_ kayıt göster",
infoFiltered: "(toplam _MAX_ kayıttan filtrelenenler)",
buttons: {
copyTitle: "Panoya kopyalandı.",
copySuccess: "Panoya %d satır kopyalandı",
copy: "Kopyala",
print: "Yazdır",
},
paginate: {
first: "İlk",
previous: "Önceki",
next: "Sonraki",
last: "Son"
},
}
});
});
</script>
<script src="js/aktifcustom.js"></script>
<link rel="stylesheet" type="text/css" href="css/switch.css">
Ürün ekleme bölümünün HTML kodunu şu şekilde değiştir Olursa söyle
<div class="card-body">
<form method="post" action="urunEkle.php" enctype="multipart/form-data">
<div class="form-group">
<label for="foto">Foto</label>
<input required type="file" name="foto" class="form-control-file" id="foto">
</div>
<div class="form-group">
<label>Üst Başlık</label>
<input required type="text" class="form-control" name="ustBaslik" placeholder="Üst başlık">
</div>
<div class="form-group">
<label>Başlık</label>
<input required type="text" class="form-control" name="baslik" placeholder="Başlık">
</div>
<div class="form-group">
<label for="icerik">İçerik</label>
<textarea name="icerik" id="icerik"></textarea>
<script>
ClassicEditor
.create(document.querySelector('#icerik'))
.then(editor => {
console.log(editor);
})
.catch(error => {
console.error(error);
});
</script>
</div>
<div class="form-group">
<label>Sıra</label>
<input required type="text" class="form-control" name="sira" placeholder="Sıra">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="aktif" id="aktif">
<label class="form-check-label" for="aktif">Aktif mi?</label>
</div>
<div class="card-body">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="card">
<div class="img-card">
<img width="270" height="270" src="img/<?= $sonuc['foto'] ?>"/>
</div>
<div class="card-content">
<h4 class="card-title"><?= $sonuc['baslik'] ?></h4>
<p class="card-text"><?= $sonuc['ustBaslik'] ?></p>
</div>
<div class="card-read-more">
<a href="#" class="btn btn-link btn-block">Satın Al</a>
</div>
</div>
</div>
</div>
</div>
</form>
</div>