@abdullahx - Cevaplar | 𝗣𝗥𝗢𝗧𝗢𝗧𝗨𝗥𝗞

abdullahx

Trabzon

Takipçi

Takip edilen

Takip et

1400 gün önce data değişkenindeki sabitle adlı elemanın değerine nasıl ulaşırım sorusunu cevapladı.

Link

#008868

1400 gün önce İcona tıklandığında div in tam ekran olması sorusunu cevapladı.

Link

#008867

1400 gün önce Siteye içerik girişi ekleme yolları sorusunu cevapladı.

İçerik girişi yapılabilmesi için dinamik bir yapıya sahip olması gerekir. Bunun için de dinamik bir dil kullanmanız gerekir. PHP olur ASP olur, javascript ile de olur ama o biraz daha ileri düzey

#008866

1401 gün önce Selectbox 'a göre form verilerini doldurma sorusunu cevapladı.

Hocam bana e posta yoluyla ulaşırsanız size yardımcı olmak isterim. [email protected]

#008851

1401 gün önce javascript ile yazdığım koddaki hata nedir sorusunu cevapladı.

Hatan, ekranda herhangi bir item yokken getelementbyclassname ile onları seçmeye çalışmak, haliyle length değeri de her zaman 0 olarak dönüyor.

https://codepen.io/Elessar61/pen/zYPKoEp

#008850

1403 gün önce Php Zaman ayarlı işlem kodu arıyorum sorusunu cevapladı.

Veri tabanı kullanacak mısın, kullanacaksan kafandaki tablo yapısından biraz bahsedersen çözüm bulabiliriz.

#008830

1404 gün önce Steppter Tasarımda Mail onayı yaptırma. sorusunu cevapladı.

[Mail adresim] (mailto:[email protected])

#008827

1405 gün önce Steppter Tasarımda Mail onayı yaptırma. sorusunu cevapladı.

Ş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

Demo

#008821

1405 gün önce Metinde Değişken Kullanımı sorusunu cevapladı.

$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.

#008818

1405 gün önce Jquery post ile file verilerini ajax ile kaydetme sorusunu cevapladı.

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
)

#008816

Önceki Sonraki

Adı-soyadı

Abdullah Kaya
Yaşadığı yer

Trabzon
Back-end bilgisi

İyi olduğumu düşünüyorum
Front-end bilgisi

Bootstrap her işimi görüyor
Tasarım bilgisi

Onun beni bildiği kadar
Meslek

...