Postingan lainnya

Insert Data ke database dengan ajax

kode index.php


<!DOCTYPE html>
<html>
<head>
	<title>HeadBOOK</title>
	<link rel="stylesheet" type="text/css" href="Assets/Project.css">
    <link rel="icon" type="image/png" href="Assets/icon.png">

</head>
<body>
	<!--header-->
	<div class="content content-header clearfix">
	 <div class="wrapper">
		<div id="judul">
          <h1 id="headr">HeadBook</h1>
       </div>
		<form action="login.php" method="post">
		<div class="group-form">
			<label for="email">Input Email Anda</label>
			<input type="text" name="email">

		</div>

		<div class="group-form">
			<label for="password">Input Password Anda</label>
			<input type="password" name="password">
		</div>

		<div class="group-form">
		 	<input type="submit" value="Log In" name="login">
		</div>

		</form>
	 </div>
    </div>

	<!--content-->
  <div class="content content-middle clearfix">
  <div class="wrapper">
  <div class="middle-left">
    <h2> Headbook membantu Anda terhubung dan berbagi dengan orang-orang dalam kehidupan Anda. </h2> <br>
    <img src="Assets/networking.png" height="300" width="350">
    </div>


    <div class="middle-right">
      <h3>Daftar</h3>
      <p>Gratis, Seumur Hidup</p>
      <form action="" method="post">
        <input type="text" placeholder="Nama Depan" name="depan" class="inline" id="Depan">
        <input type="text" placeholder="Nama Belakang" name="belakang" class="inline" id="Belakang">
        <input type="email" placeholder="Email" name="email" class="" id="Email">
        <input type="password" placeholder="Password" name="password" class="" id="Pass">
        <input type="date" placeholder="Tanggal Lahir" name="tanggal" class="" id="Tanggal">
        <input type="radio" name="jk" value="Laki-Laki" id="Jenis"> Laki-Laki
		<input type="radio" name="jk" value="Perempuan" id="Jenis"> Perempuan
        <br>
        <input type="submit" value="Daftar" name="register" id="input">

      </form>



    </div>



    </div>

  </div>


  <script type="text/javascript">

      $('#input').on('click',function(){
        var nama = $('#Depan').val();
        var nama1 = $('#Belakang').val();
        var email = $('#Email').val();
        var Password = $('#Pass').val();
        var tanggal = $('#Tanggal').val();
        var jenis = $('#Jenis').val();
        $.ajax({
          method: "POST",
          url: "aksi.php",
          data: { Nama_Depan : nama, Nama_Belakang : nama1,Email : email, password : Password,Tanggal : tanggal, Jenis : jenis,type:"insert"},

          }
        });
      });
  </script>


	<!--Footer-->
  <div class="content content-footer clearfix">
	 <div class="wrapper">
       <center>
       <br>
       <h4>CopyRight</h4>

       </center>

    </div>
  </div>

</body>
</html>

kode config.php

 <?php

$db_host = "localhost";
$db_user = "root";
$db_pass = "";
$db_name = "headbook";

try {
    //create PDO connection
    $db = new PDO("mysql:host=$db_host;dbname=$db_name", $db_user, $db_pass);
} catch(PDOException $e) {
    //show error
    die("Terjadi masalah: " . $e->getMessage());
}

Kode aksi.php

 <?php
include_once 'config.php';

if($_POST['type'] == 'insert'){
  $name = mysqli_real_escape_string($db, $_POST['Nama_Depan']);
  $name1 = mysqli_real_escape_string($db, $_POST['Nama_Belakang']);
  $Mail = mysqli_real_escape_string($db, $_POST['Email']);
  $pas = mysqli_real_escape_string($db, $_POST['password']);
  $tang = mysqli_real_escape_string($db, $_POST['Tanggal']);
  $jen = mysqli_real_escape_string($db, $_POST['Jenis']);
  $query = "INSERT INTO user (Nama_Depan,Nama_Belakang,Email,Password,Tanggal_Lahir,Jenis_Kelamin ) VALUES ('$name','$name1','$Mail','$pas','$tang','$jen' )";

  if(mysqli_query($db, $query)){
    $last_id = mysqli_insert_id($db);
    echo "Sukses";
  }else{
    echo "error";
  }

  ?>

ajax php jquery

@Alam99

13 Kontribusi 0 Poin

Diperbarui 5 tahun yang lalu

Tanggapan

tampilkan juga errornya di pertanyaan kamu, di ajax pake metode .done(cek di dok jquery) bisa console.log(data) yang diterima dari backend, kelihatan kalau ada masalah atau hasilnya sukses/error

@hilmanski

1 Jawaban:

Jawaban Terpilih

Coba seperti ini :

<pre> $.ajax({ method: "POST", url: "aksi.php", data: { "Nama_Depan" : nama, "Nama_Belakang" : nama1,"Email" : email, "password" : Password,"Tanggal" : tanggal, "Jenis" : jenis,"type":"insert"},

      }
    });

</pre>

atau biar lebih efisien:

Tambah atribut id pada form

<pre> <form action="" method="post" id="frmdata"> </pre> 2. Kemudian di bagian js nya :

  $(&#039;#input&#039;).on(&#039;click&#039;,function(){       
    $.ajax({
      method: &quot;POST&quot;,
      url: &quot;aksi.php&quot;,
      data: $(&quot;#frmdata&quot;).serialize(),
      success:function(data){ 
            console.log(data);                        
        },
        error:function(xhr, status, error){
            console.log(error);
        },
      }
    });
  });

</script> </pre>

@mrizkiromdoni

78 Kontribusi 26 Poin

Dipost 5 tahun yang lalu