PHP Dersleri

jQuery Ajax İle Sayfa Yenilenmeden Veri Ekleme

Yayınlanan

9 ay Önce

İcerisinde

Ağustos 30, 2022

Tarafından

Mustafa Salman YT

jQuery Ajax İle Sayfa Yenilemeden Veri Ekleme – diveebi.com

Bu rehberde sayfa yenilenmeden jQuery Ajax kullanarak MySql veritabanına veri kaydı yaptık. Kısaca ilk olarak oluşturduğumuz index.php dosyasında Ajax ile ikinci oluşturduğumuz ajax.php dosyasına, formdaki verileri gönderdik. Veritabanı kayıt işlemi için config.php‘i ajax.php dosyasına dahil ettik.

index.php

<!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.0">
    <title>Mustafa Salman YT</title>
</head>
<body>
    <form action="#" id="form">
        <label for="val1">İsim Soyisim:</label><br>
        <input type="text" id="val1" name="name-surname"><br>

        <label for="val2">E-Mail:</label><br>
        <input type="text" id="val2" name="email"><br>

        <label for="val3">Mesaj:</label><br>
        <textarea name="message" id="val3" cols="30" rows="10"></textarea><br><br>

        <input type="button" id="button" value="Gönder">
    </form>

    <div id="mydiv"></div>

<!-- jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
        $('#button').on('click',function(){
            var form = $('#form').serialize();
            var name = $('#val1').val();
            var mail = $('#val2').val();
            var message = $('#val3').val();
            var formdata = 'name=' + name + '&mail=' + mail + '&msg=' + message;

            $.ajax({
                url: 'ajax.php',
                type: 'POST',
                data: formdata,
                success:function(e){
                    $('#mydiv').html("").html(e);
                }
            });
        });
    });
</script>

</body>
</html>

ajax.php

<?php
    require_once(__DIR__.'/config.php');
    if($_POST){
        $name = $_POST["name"];
        $email = $_POST["mail"];
        $message = $_POST["msg"];
        if((!empty($name)) AND (!empty($email)) AND (!empty($message))){
            $insert = $db->prepare("INSERT INTO messages SET fullname=?, email=?, msg=?");
            $x = $insert->execute(array($name, $email, $message));
            if(!empty($x)){
                echo '<span style="color:blue">İşlem Başarılı. Ajax İle Sayfa Yenilenmden VeriTabanına Kayıt Yapıldı</span>';
            }else{
                echo "Hata Oluştu";
                die();
            }
        }else{
            echo '<span style="color:red">Gerkli Alanları Doldurun!</span>';
        }
    }
?>

config.php

<?php
    try{
        $host = 'localhost';
        $dbname = 'mustafasalmanyt';
        $username = 'root';
        $password = '';

        $db = new PDO("mysql:host=$host; dbname=$dbname; charset=utf8", "$username", "$password");

    }catch(PDOException $m){
        echo $m->getMessage();
        die("Hata Oluştu");
    }
?>

Up Next

PHP İle Web Sitelerde Çoklu Dil Yapısı

Don't Miss

PHP Veritabanı (PhpMyAdmin) Üye Kayıt İşlemi

Mustafa Salman YT

Merhabalar! Ben Osmaniye'nin Bahçe ilçesinde doğdum ve şu anda 17 yaşındayım. Kendimi bir web yazılım geliştiricisi ve SEO uzmanı olarak olarak tanımlıyorum ve Diveebi.com ve Youtube kanalımda web site eğitimleri, SEO, Photoshop dersleri, Python projeleri, HTML, CSS, JavaScript, PHP, Grafik dersleri ve benzeri içerikler paylaşıyorum. Kişisel Web Sitemi ziyaret et: https://mustafa.diveebi.com/

1 Yorum

yunus atış
Aralık 29, 2022 at 01:56
Birkaç üniversite arasından açılır menu yardımıyla üniversite seçilecek. Daha sonar “Bölümleri Getir” butonuna tıklandığında o üniversiteye ait bölümler ekrana gelecek. Getirme işlemi butona basıldığında veya seçim değiştiğinde yapılabilir. Sonuçlar aynı sayfada gelebileceği gibi, link yardımıyla farklı sayfada da gösterebilirsiniz.
2. Bölümler ekrana geldikten sonra yine aynı şekilde bölümlerden biri seçilecek ve “Bölüme Ait Öğrencileri Getir” butonuyla (veya seçim değiştiğinde otomatik olacak şekilde) veritabanından o bölüme ait öğrenciler çekilerek ekrana yazdırılacaktır.
nasıl yapıcam acaba
Cevapla

ChatGPT

ChatGPT API Kendi Yapay Zeka Sohbet Robotunuzu Yapın

Yayınlanan

2 ay Önce

İcerisinde

Nisan 18, 2023

Tarafından

Mustafa Salman YT

ChatGPT API Kendi Yapay Zeka Sohbet Robotunuzu Yapın

Bu projemizde, ChatGPT API‘sini kullanarak kendi yapay zeka sohbet robotumuzu oluşturduk. ChatGPT, OpenAI tarafından geliştirilen bir dil modeli ve doğal dil işleme teknolojisi kullanarak insanlarla etkileşim kurabilen bir sohbet robotu oluşturmak için kullanılan bir araçlar arasında.

Bu projede, ChatGPT API‘sini kullanarak, kullanıcılarla gerçek zamanlı olarak sohbet edebilen bir yapay zeka sohbet robotu oluşturacağız. Ayrıca, ChatGPT‘nin eğitimli olduğu geniş dil verileri sayesinde, robotun doğal bir şekilde konuşması ve kullanıcılara gerçekçi cevaplar vermesi sağlıyor.

Bu projenin amacı, yapay zeka teknolojilerini kullanarak farklı projeler oluşturmak ve insanlarla yapay zeka arasındaki etkileşimi artırmak.

İndex.php

<!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.0">
    <title>Mustafa Salman YT</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
    <style>
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 'Poppins', sans-serif;
            background-color: #f9f9fa;
        }
        .container {
            justify-content: center;
            max-height: 80%;
            padding: 12px 20px;
            width: 500px;
        }
        .media-chat {
            display: block;
            padding: 8px 10px;
            margin: 6px 0;
            background-color: #f5f6f7;
            border: 1px solid #41414120;
            border-radius: 6px;
            color: #414141;
            font-weight: 400;
        }
        .media-chat-reverse {
            background-color: #7c84cf;
            color: white;
        }
        .publisher {
            position: relative;
            display: flex;
            align-items: center;
            padding: 4px 6px;
            background-color: #41414120;
        }
        .chat-input {
            border: none;
            flex-grow: 1;
            outline: none;
            height: 100%;
            padding: 9px 8px;
        }
        .chat-box {
            overflow-y: scroll;
            height: 450px;
        }

    </style>
    <div class="container">
        <div class="card">
            <div class="card-header">
                <span>ChatGPT & Mustafa Salman YT</span>
            </div>
            <div class="p-4 chat-box" id="chat-box">
                <div class="media-chat">
                    <p>
                        <b>AI:</b>
                        Merhaba ben ChatGPT size nasıl yardımcı olabilirim?
                    </p>
                </div>
                <div tabindex="0" style="top:0;"></div>
            </div>
            <div class="publisher border-ligth">
                <input type="text" class="chat-input" id="input-msg" placeholder="Mesajınızı Giriniz...">
                <button class="btn btn-primary" id="send-btn">Gönder</button>
            </div>
        </div>
    </div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>

var input = $('#input-msg');
var btn = $('#send-btn');
var chat = $('#chat-box');

btn.click('on',function(){
    if(input.val().length == 0){
        alert('Litfen Bir şeyler girin !');
    }
    else{
        var value = input.val();
        chat.append(`
            <div class="media-chat media-chat-reverse">
                <p>
                    <b>Human:</b>
                    ` + value + `
                </p>
            </div>
        `);
        input.val('');
        $.ajax({
            type: "POST",
            url: "/MustafaSalmanYT/chat-api.php",
            data: {prompt: value},
            dataType: "json",
            success:function(response){
                var data = JSON.parse(response);
                chat.append(`
                    <div class="media-chat">
                        <p>
                            <b>AI:</b>
                            ` + data.choices[0].text + `
                        </p>
                    </div>
                `);
                console.log(data);
            },
            error:function(e){
                console.error('Hata Oluştu:' + e);
            }
        });
    }
});

setInterval(() => {
    chat.scrollTop(chat.prop('scrollHeight'));
}, 200);

</script>
</body>
</html>

chat-api.php

<?php

/*
 * 
 *  BU PROJEDE HİÇ BİR GÜVENLİK ÖNLEMİ ALINMAMIŞTIR
 * 
*/
if(@$_POST){

    $api_key = "Kendi api anahtarınızı girin";
    $prompt = $_POST['prompt'];
    
    $stop = array(" Human:", " AI:");
    $data = array(
        "model" => "text-davinci-003",
        "prompt" => $prompt,
        "temperature" => 0.9,
        "max_tokens" => 500,
        "top_p" => 1,
        "frequency_penalty" => 0,
        "presence_penalty" => 0.6,
        "stop" => $stop
    );

    
    $payload = json_encode($data);
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'https://api.openai.com/v1/completions');
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);
    curl_setopt($ch, CURLOPT_HTTPHEADER, array(
        'Content-Type: application/json', 
        'Authorization: Bearer ' . $api_key
    ));
    $resault = curl_exec($ch);
    curl_close($ch);

    $response = json_encode($resault, true);
    print_r($response);

}

?>

Okumaya devam et