Veri tabanı kullanacak mısın, kullanacaksan kafandaki tablo yapısından biraz bahsedersen çözüm bulabiliriz.
[Mail adresim] (mailto:[email protected])
Şimdi en basitinden bir örnek hazırladım, elbette geliştirilecek yerleri vardır. Daha fazla kontrol ekleme işlemi yapılmalıdır hatta. Mantık olarak fikir vereceğini düşünüyorum.
index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- <link rel="stylesheet" href="font/css/all.css">-->
<title>Document</title>
</head>
<body>
<main>
<div class="stepper">
<div class="step--1 step-active">Adım 1</div>
<div class="step--2">Adım 2</div>
<div class="step--3">Adım 3</div>
<div class="step--4">Son</div>
</div>
<form class="form form-active">
<div class="form--header-container">
<h1 class="form--header-title">
Buraya başlık gelecek.
</h1>
</div>
<p style="padding:10px; background-color:#c7ebff;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum turpis turpis, quis suscipit massa
interdum sed. Ut a nisl efficitur, tempor purus a, feugiat est. Suspendisse elementum, arcu at pellentesque
aliquet, erat massa tempor dolor, eget condimentum ipsum nibh eget est. Cras egestas dolor quis tortor
consectetur, eu rhoncus nisl scelerisque.
</p>
<img src="img1.jpg" alt="" style="width:100%;">
<button type="button" class="form__btn" id="btn-1">İLERİ</button>
</form>
<form class="form" id="mailform">
<div class="form--header-container">
<h1 class="form--header-title">
Buraya Başlık Gelecek.
</h1>
</div>
<p style="padding:10px; background:#c7ebff">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum turpis turpis, quis suscipit massa interdum sed. Ut a nisl efficitur, tempor purus a, feugiat est.
Suspendisse elementum, arcu at pellentesque aliquet, erat massa tempor dolor, eget condimentum ipsum nibh eget est.
</p>
<input type="email" placeholder="Mail adresiniz?">
<button type="submit" class="btn-onay">Maili Gönder</button>
<button type="button" class="form__btn" id="btn-2-prev">GERİ</button>
<button type="button" class="form__btn" id="btn-2-next" disabled>İLERİ</button>
</form>
<form class="form">
<div class="form--header-container">
<h1 class="form--header-title">
Buraya Başlık Gelecek.
</h1>
</div>
<p style="padding:10px; background-color:#c7ebff;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum turpis turpis, quis suscipit massa interdum sed. Ut a nisl efficitur, tempor purus a, feugiat est.
Suspendisse elementum, arcu at pellentesque aliquet, erat massa tempor dolor, eget condimentum ipsum nibh eget est.
</p>
<div class="social-icons">
<a href="#">
<i class="fab fa-facebook fa-2x"></i>
</a>
<a href="#">
<i class="fab fa-twitter fa-2x"></i>
</a>
<a href="#">
<i class="fab fa-instagram fa-2x"></i>
</a>
</div>
<div class="radio-btn">
<input type="radio" disabled>
<input type="radio" disabled>
<input type="radio">
</div>
<div style="clear: both;"></div>
<input type="text" placeholder="Yaz bir şeyler" />
<button class="form__btn" id="btn-3" style="margin-top:10px;">GÖNDER</button>
</form>
<div class="form--message"></div>
</main>
<script src="app.js"></script>
<!--<script src="font/js/all.js"></script>-->
</body>
</html>
app.js
const formBtn1 = document.querySelector("#btn-1")
const formBtnPrev2 = document.querySelector("#btn-2-prev")
const formBtnNext2 = document.querySelector("#btn-2-next")
const formBtn3 = document.querySelector("#btn-3")
const mailForm = document.querySelector("#mailform")
const mailBtn = document.querySelector(".btn-onay")
// Button listener of form 1
formBtn1.addEventListener("click", function(e) {
gotoNextForm(formBtn1, formBtnNext2, 1, 2)
});
// Next button listener of form 2
formBtnNext2.addEventListener("click", function(e) {
gotoNextForm(formBtnNext2, formBtn3, 2, 3)
});
// Previous button listener of form 2
formBtnPrev2.addEventListener("click", function(e) {
gotoNextForm(formBtnNext2, formBtn1, 2, 1)
});
// Button listener of form 3
formBtn3.addEventListener("click", function(e) {
document.querySelector(`.step--3`).classList.remove("step-active")
document.querySelector(`.step--4`).classList.add("step-active")
formBtn3.parentElement.style.display = "none"
document.querySelector(".form--message").innerHTML = `
<h1 class="form--message-text">İşlem başarıyla gerçekleşti.</h1>
`
e.preventDefault()
});
const gotoNextForm = (prev, next, stepPrev, stepNext) => {
// Get form through the button
const prevForm = prev.parentElement
const nextForm = next.parentElement
const nextStep = document.querySelector(`.step--${stepNext}`)
const prevStep = document.querySelector(`.step--${stepPrev}`)
// Add active/inactive classes to both previous and next form
nextForm.classList.add("form-active")
nextForm.classList.add("form-active-animate")
prevForm.classList.add("form-inactive")
// Change the active step element
prevStep.classList.remove("step-active")
nextStep.classList.add("step-active")
// Remove active/inactive classes to both previous an next form
setTimeout(() => {
prevForm.classList.remove("form-active")
prevForm.classList.remove("form-inactive")
nextForm.classList.remove("form-active-animate")
}, 1000);
}
// Ek javascript
function ajax(url, data, callback) {
let xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
if (typeof callback == 'function') {
mailBtn.removeAttribute("disabled")
callback(this);
}
}
}
xhr.send(data);
}
mailForm.onsubmit = function (e) {
e.preventDefault()
let mail = document.querySelector("input[type='email']").value
if (!mail.length) return false
mailBtn.setAttribute("disabled", "")
ajax('mail.php', `email=${mail}`, e => {
if (e.responseText === 'success') {
alert('Mail başarıyla gönderildi, lütfen mailinizi onaylayıp bu ekrana geri dönün')
let check = setInterval(() => {
ajax('ajax.php', `checkConfirm=${mail}`, f => {
if (f.responseText) {
formBtnNext2.removeAttribute("disabled")
clearInterval(check)
alert('Mail onaylanmış')
}
})
}, 2000)
}
});
}
style.css
@import url("https://fonts.googleapis.com/css?family=Nunito&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f5f6f7;
font-family: "Nunito", sans-serif;
}
main {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
}
.stepper {
width: 20rem;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 5%;
}
.step--1,
.step--2,
.step--3,
.step--4 {
width: 5rem;
padding: 0.5rem 0;
background: #fff;
color: #666;
text-align: center;
}
.step--1,
.step--2,
.step--3 {
border-right: 1px solid #666;
}
.form {
background: #fff;
text-align: center;
position: absolute;
width: 25rem;
box-shadow: 0.2rem 0.2rem 0.5rem rgba(51, 51, 51, 0.2);
display: none;
border-radius: 1rem;
overflow: hidden;
}
.form--header-container {
background: linear-gradient(to right, #0a354c, #95daff);
color: #fff;
height: 2.3rem;
padding: 8px 0;
}
.form--header-title {
font-size: 1rem;
}
.form--header-text {
padding: 0.5rem 0;
}
input[type="text"], input[type="email"] {
padding: 0.8rem;
margin: auto;
margin-top: 0.5rem;
width: 20rem;
display: block;
border-radius: 0.5rem;
outline: none;
border: 1px solid #bdbdbb;
}
.form__btn {
background: #333;
color: #fff;
outline: none;
border: none;
padding: 0.5rem 0.7rem;
width: 7rem;
margin: 0 auto;
margin-bottom:7px;
border-radius: 0.9rem;
text-transform: uppercase;
font-weight: 700;
cursor: pointer;
}
.form--message-text {
width: 25rem;
background: #fff;
color: #444;
padding: 2rem 1rem;
text-align: center;
font-size: 1.4rem;
box-shadow: 0.2rem 0.2rem 0.5rem rgba(51, 51, 51, 0.2);
animation: fadeIn 0.8s;
border-radius: 1rem;
}
.form-active {
z-index: 1000;
display: block;
}
.form-active-animate {
animation: moveRight 1s;
}
.form-inactive {
display: block;
animation: moveLeft 1s;
}
.step-active {
background: #666;
color: #fff;
border: 1px solid #666;
}
.btn-onay {
display:block;
margin:10px auto;
border:none;
padding:10px 15px;
border-radius:5px;
background-color:#0e4f72;
color:#fff;
font-weight:bold;
transition:all 200ms;
cursor:pointer
}
.btn-onay:hover {
background-color:#4293bf;
}
.social-icons {
display:flex;
justify-content:center;
background-color:#103c54;;
}
.social-icons a {
display:block;
padding:6px 10px;
color:#fff;
border-top:3px #c7ebff solid;
transition:all 200ms
}
.social-icons a:hover {
border-top:3px #0a354c solid
}
.radio-btn {
float:right;
margin-top:10px;
margin-bottom: 10px;
}
.radio-btn input {
width:20px;
height:20px;
margin-right:10px;
}
@keyframes moveRight {
0% {
transform: translateX(-27rem) scale(0.9);
opacity: 0;
}
100% {
transform: translateX(0rem) scale(1);
opacity: 1;
}
}
@keyframes moveLeft {
0% {
transform: translateX(0rem) scale(1);
opacity: 1;
}
100% {
transform: translateX(27rem) scale(0.9);
opacity: 0;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Ek css */
button:disabled {
cursor: not-allowed;
opacity: .6;
}
mail.php
<?php
if ($_SERVER['REQUEST_METHOD'] != 'POST')
die('Bu sayfaya sadece POST yöntemi ile erişilebilir');
require_once 'mail/src/Exception.php';
require_once 'mail/src/PHPMailer.php';
require_once 'mail/src/SMTP.php';
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
$post = $_POST;
$time = time();
$token = uniqid('random_');
$datas = [
'time' => $time,
'token' => $token,
'confirm' => false
];
$link = "http://localhost/konumun/confirmation.php?time=$time&token=$token&mail=".$post['email'];
$createLink = "<a href='$link' target='_blank'>Tıklayın</a>";
// Mail at
$mail = new PHPMailer(true);
try {
$mail->SMTPDebug = 0;
$mail->isSMTP();
$mail->CharSet = 'UTF-8';
$mail->SMTPAuth = true;
$mail->Host = 'smtp.gmail.com';
$mail->Username = '[email protected]'; // Burayı doldur
$mail->Password = 'gmailsifren'; // Burayı doldur
$mail->Port = 587;
$mail->SMTPSecure = 'tls';
$mail->setFrom($mail->Username, 'Doğrulama');
$mail->addAddress($post['email'], 'Kullanıcı');
$mail->isHTML(true);
$mail->Subject = 'Mail doğrulaması';
$mail->Body = 'Lütfen e posta adresinizi doğrulayın. <br><br>'.$createLink;
$mail->setLanguage('tr', 'mail/language/');
$mail->send();
if (file_exists(__DIR__ . DIRECTORY_SEPARATOR . 'confirmation.json')) {
$mailInfo = json_decode(file_get_contents(__DIR__ . DIRECTORY_SEPARATOR . 'confirmation.json'), true);
} else {
$mailInfo = [];
}
$mailInfo[$post['email']] = $datas;
file_put_contents(__DIR__ . DIRECTORY_SEPARATOR . 'confirmation.json', json_encode($mailInfo));
echo 'success';
} catch (Exception $e) {
echo "Mesaj gönderilemedi, Oluşan hata: {$mail->ErrorInfo}";
}
ajax.php
<?php
if (isset($_POST['checkConfirm'])) {
$mail = $_POST['checkConfirm'];
$file = json_decode(file_get_contents(__DIR__ . DIRECTORY_SEPARATOR . 'confirmation.json'), true);
$data = $file[$mail];
echo $data['confirm'];
}
confirmation.php
<?php
if (isset($_GET['time']) && isset($_GET['token']) && $_GET['mail']) {
if (file_exists(__DIR__ . DIRECTORY_SEPARATOR. 'confirmation.json')) {
$file = json_decode(file_get_contents(__DIR__ . DIRECTORY_SEPARATOR . 'confirmation.json'), true);
$mail = $_GET['mail'];
$time = $_GET['time'];
$token = $_GET['token'];
if (array_key_exists($mail, $file)) {
$data = $file[$mail];
if ($data['token'] == $token && $data['time'] == $time) {
if (!$data['confirm']) {
$data['confirm'] = true;
$file[$mail] = $data;
file_put_contents(__DIR__ . DIRECTORY_SEPARATOR . 'confirmation.json', json_encode($file));
echo 'Mailinizi başarıyla onayladınız. Şimdi bu sekmeyi kapatıp devam edebilirsiniz';
} else {
echo 'Mailinizi zaten onayladınız';
}
} else {
echo 'Değerler hatalı';
}
} else {
echo 'Bu mail adresi kayıtlı değil';
}
}
}
Phpmailer dosyaları (aynı dizinde olsun)
Link
$degerler = [
'Kurum Adı',
'01',
'02',
2022,
'Kurs Adı'
];
$txt = sprintf("%s kurumu tarafından %s.%s.%u tarihinde gerçekleştirilen '%s' eğitimini başarı ile tamamlamış olup, bu sertifikayı almaya hak kazanmıştır.", ...$degerler);
echo $txt;
Kurum Adı kurumu tarafından 01.02.2022 tarihinde gerçekleştirilen 'Kurs Adı' eğitimini başarı ile tamamlamış olup, bu sertifikayı almaya hak kazanmıştır.
index
<!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="" id="form">
<input type="text" name="name" placeholder="Ad"><br>
<input type="text" name="surname" placeholder="Soyad"><br>
<input type="password" name="password" placeholder="Şifre"><br>
<input type="file" name="resim"><br><br>
<input type="file" name="resim3"><br><br>
<input type="submit">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
[...document.querySelectorAll("form")].forEach(e => {
e.addEventListener("submit", function (f) {
f.preventDefault()
formSubmit(this)
})
})
})
function formSubmit(form) {
let data = new FormData();
$(form).find("input[type='file']").each(function (index, element) {
if(element.files.length)
data.append($(this).attr("name"), element.files[0])
})
data.append('formData', $(form).serialize())
$.ajax('ajax.php', {
method: "POST",
processData: false,
contentType: false,
data: data,
}).then(response => {
console.log(response)
})
}
</script>
</body>
</html>
ajax.php
<?php
print_r($_FILES);
print_r($_POST);
Çıktı
Array
(
[resim] => Array
(
[name] => items.sql
[type] => application/octet-stream
[tmp_name] => C:\xampp\tmp\php59FE.tmp
[error] => 0
[size] => 3294
)
[resim3] => Array
(
[name] => bolum7.pdf
[type] => application/pdf
[tmp_name] => C:\xampp\tmp\php5A0F.tmp
[error] => 0
[size] => 3648448
)
)
Array
(
[formData] => name=abdullah&surname=kaya&password=1234567
)
<?php
$query = $db->query("SELECT * FROM tbl_message", PDO::FETCH_ASSOC);
if (isset($_POST['type'])) {
if ($_POST['type'] == 'delete') {
$delete = $db->prepare("DELETE FROM tbl_message WHERE id = ?");
$delete->execute([$_POST['id']]);
$response = [
'status' => (bool) $delete->rowCount(),
'text' => $delete->rowCount() ? 'Silme işlemi başarılı' : 'Silme işlemi başarısız'
];
} elseif ($_POST['type'] == 'update') {
$update = $db->prepare("UPDATE tbl_message SET u_sub = ?, u_message = ? WHERE id = ?");
$update->execute([
$_POST['konu'],
$_POST['mesaj'],
$_POST['id']
]);
$response = [
'status' => (bool) $update->rowCount(),
'text' => $update->rowCount() ? 'Güncelleme işlem başarılı' : 'Güncelleme işlemi başarısız!'
];
} else {
$response = [
'status' => false,
'text' => 'Hatalı bir işlem gerçekleşti'
];
}
echo json_encode($response);
exit();
}
?>
<!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
table, tr, td, th {
border: 1px solid;
}
</style>
</head>
<body>
<table style="width: 100%">
<thead>
<tr>
<th>ID</th>
<th>AD</th>
<th>SOYAD</th>
<th>TELEFON</th>
<th>KONU</th>
<th>MESAJ</th>
<th>SİL</th>
<th>GÜNCELLE</th>
</tr>
</thead>
<tbody>
<?php
if ($query->rowCount()){
foreach( $query as $row ){?>
<tr id="<?= $row['id'] ?>">
<td style="width:5%"><?php echo $row['id'] ?></td>
<td style="width:20%"><?php echo $row['u_name'] ?></td>
<td style="width:20%"><?php echo $row['u_surname'] ?></td>
<td style="width:20%"><?php echo $row['u_phone'] ?></td>
<td style="width:5%">
<select name="u_konu" id="konu">
<option value="1" <?= $row['u_sub'] == 1 ? 'selected' : null ?> >Öneri</option>
<option value="2" <?= $row['u_sub'] == 2 ? 'selected' : null ?> >Talep</option>
<option value="3" <?= $row['u_sub'] == 3 ? 'selected' : null ?> >Şikayet</option>
</select>
</td>
<td style="width:20%">
<textarea name="u_mesaj" id="u_mesaj" cols="15" rows="2"><?php echo $row['u_message'] ?></textarea>
</td>
<td style="width:5%">
<button data-type="delete" class="delete"><i class="fa fa-times"></i></button>
</td>
<td style="width:5%">
<button data-type="update" class="update"><i class="fa fa-redo"></i></button>
</td>
</tr>
<?php
}
} else { ?>
<tr>
<td colspan="8" style="text-align: center">Tabloda veri bulunamadı</td>
</tr>
<?php } ?>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
$(".update, .delete").on("click", function () {
let id = $(this).parents("tr").attr("id"),
konu = $(this).parents("tr").find("select").val(),
mesaj = $(this).parents("tr").find("textarea").val(),
type = $(this).data("type")
if (type === 'delete') {
if (!confirm('Silmek istediğine emin misin?'))
return false
}
$.ajax({
method: 'post',
data: {
konu: konu,
mesaj: mesaj,
id: id,
type: type
},
dataType: "json"
}).done(e => {
alert(e.text)
if (type === 'delete' && e.status)
$(this).parents("tr").fadeOut()
})
})
})
</script>
</body>
</html>
Ben de daha evvel kullandığım iki şekli ile örnek vereyim, mantık aynı tabii de örnek çeşitliliği açısından.
Bir diziyi döngüye soktuğumuzda başka bir array daha oluşturmadan içindeki değerleri direkt olarak değiştirebilmek için foreach gibi döngülerde kullanabilirsin;
$array = ['item 1', 'item 2', 'item 3', 'item 4', 'item 5'];
foreach ($array as $index => &$item) {
$item = "item $index";
}
print_r($array);
// Array
// (
// [0] => item 0
// [1] => item 1
// [2] => item 2
// [3] => item 3
// [4] => item 4
// )
Ya da belki bazen recursive bir anonim fonkiyon yazmak istersin, fonksiyonun döndürdüğü değeri yine aynı fonksiyonda kullanmak istersin;
$func = function ($param) use (&$func) {
$return = $param * 3;
if ($return < 50)
return $func($return);
return $return;
};
echo $func(2);
// 54
Örnekler biraz garip olabilir ama aklıma ilk gelen şeyi yaptım :)
function a(int $accumulator, array $array)
{
foreach ($array as $item) {
$accumulator += $item;
echo $accumulator . '<br>';
}
}
$sayi = 100;
$array = [1, -2, 3, -4, 5, -6];
a($sayi, $array);
Şayet doğru anladıysam şöyle bir şey işinize yarayabilir
<?php
if(isset($_GET['duzenle_id'])){
$duzenle = $db->query("SELECT * FROM urun WHERE id = '{$_GET['duzenle_id']}' LIMIT 1")->fetch(PDO::FETCH_ASSOC);
}
$cek = $db->query("SELECT * FROM kategori", PDO::FETCH_ASSOC);
if($cek->rowCount()){
foreach( $cek as $c ){ ?>
<label class="checkbox" for="kategori<?= $c['id'] ?>">
<input <?= isset($duzenle) ? ($c['id'] == $duzenle['kategori_id'] ? 'checked' : null) : null ?> class="checkbox__input" type="checkbox" name="kategori[]" value="<?= $c['id'] ?>" id="kategori<?= $c['id'] ?>">
<span class="checkbox__inner">
<span class="checkbox__tick"></span>
<span class="checkbox__text"><?= $c['baslik'] ?></span>
</span>
</label>
<?php }
}
?>
$duzenle = $db->query("SELECT * FROM urun WHERE id = '{$_GET['duzenle_id']}' LIMIT 1")->fetch(PDO::FETCH_ASSOC);
Bu sorgu sonucunda kategori_id değerini elde edebilyor musunuz?