Postingan lainnya

Buku Ini Koding!

Baru!

Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!

Kelas Premium!
Belajar bikin website dari nol sekarang

Gunakan kupon "lebihcepat" untuk diskon 25%!

Input Data ke Database Dengan Ajax tanpa reload

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">
    <script type="text/javascript" src="Assets/jquery.js"></script>

</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" class="forminput">
        <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: "register.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>

    </div>
  </div>

</body>
</html>

Kode register.php

 <?php
  require_once("config.php");
  if($_POST['type'] == 'insert'){
  $depan = $_POST['Nama_Depan'];
  $belakang = $_POST['Nama_Belakang'];
  $email = $_POST['Email'];
  $pass = $_POST['password'];
  $md5 = md5($pass);
  $tanggal = $_POST['Tanggal'];
  $jenis = $_POST['Jenis'];
  $conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name) or die ("Koneksi gagal");



  $mysqli = "INSERT INTO user (Nama_Depan, Nama_Belakang, Email, Password, Tanggal_Lahir, Jenis_Kelamin) VALUES ('$depan', '$belakang', '$email', '$md5', '$tanggal', '$jenis')";
  $result = mysqli_query($conn, $mysqli);
  mysqli_close($conn);
  }
?>

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());
}

ajax php html

@Alam99

13 Kontribusi 0 Poin

Diperbarui 6 tahun yang lalu

2 Jawaban:

Jawaban Terpilih

Kita harus mencegah sifat normal dari browser, yaitu ketika di klik dia akan reload halaman. Caranya :

<pre> $('#input').on('click',function(){ //kode kamu return false })

//atau terima event di parameter

$( "#input" ).click(function( event ) { event.preventDefault(); //kodekamu }) </pre>

@hilmanski

2712 Kontribusi 2145 Poin

Dipost 6 tahun yang lalu

Tanggapan

silahkan belajar dasar ajax disini https://sekolahkoding.com/kelas?search=ajax

@hilmanski

saya pake yg return false berhasil tidak reload, tp datanya ga kesimpan di database. gimana ya nanganinnya? di bagian "//kode kamu" itu isinya apa ya?

@syarika19

11 Kontribusi 0 Poin