Membuat Input Data Dengan Ajax Javascript Part1

Hallo teman-teman Dumet School, Kembali lagi dengan saya Shelli Ripati di Kursus Web Design. Kali ini saya akan membahas tentang cara Membuat Input Data Dengan Ajax Javascript Part1. DimanaÂ load ajax yang akan saya buat untuk melakukan input data ke dalam database.

Langkah pertama dalam Membuat Input Data Dengan Ajax Javascript Part1 yaitu teman-teman jangan lupa membuat databasenya seperti pada gambar di bawah ini.

Jika sudah selesai maka langsung saja teman-teman buat struktur html sebuah form untuk melakukan input data dan teman-teman bisa salin scriptnya seperti di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Membuat Input Data Dengan Ajax Javascript Part1</title>
	<link rel="stylesheet" href="assets/bootstrap.min.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
  <style>
  	body, .navbar-brand, h1, h2, h3, h4, h5, .btn, .nav-link {
  		font-family: 'Sawarabi Gothic', sans-serif !important;
  	}

  	.btn {font-weight: normal}
  	.hide {display: none}
  	.nav-link {font-size: 16px !important}
  	.navbar-brand {text-transform: none;}
  </style>
</head>
<body>

<!-- Modal -->
<form id="form-input">
<div id="news-modal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add News</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="alert alert-success" id="alert-input" style="padding: 5px; display: none;"></div>
      <div class="modal-body">
        <p>Title</p>
        <input type="text" class="form-control" placeholder="Enter title" id="title" name="title" >
        <small class="text-secondary">We'll never share your email with anyone else</small>
        <p>Description</p>
        <textarea id="body" class="form-control" placeholder="Description" name="desc"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal" id="btn-close">Close</button>
        <button type="submit" class="btn btn-primary btn-sm" id="btn-save">Save changes</button>
      </div>
    </div>
  </div>
</div>
</form>

<script src="assets/jquery.min.js"></script>
<script src="assets/bootstrap.min.js"></script>
</body>
</html>

Jika sudah selesai maka teman-teman simpan dengan nama index.php dan jika teman-teman buka di browser tampilannya seperti pada gambar di bawah ini.

Sampai disini pembahasan kita tentang cara Membuat Input Data Dengan Ajax Javascript Part1. Kita lanjutkan di pembahasan selanjutnya untuk membuat function ajax dengan event submit dan script sql seperti biasa untuk melakukan input data ke database.

Semoga artikel ini dapat bermanfaat untuk teman-teman dan buat teman-teman yang penasaran bisa langsung mencobanya. Selamat mencoba dan happy koding.

Membuat Input Data Dengan Ajax Javascript Part1

Kategori