Quickstarters
Cara Membuat Aplikasi CRUD dengan jQuery?

39min
Pendahuluan
Panduan ini akan memandu Anda melalui pembuatan aplikasi CRUD lengkap (buat, baca, perbarui, hapus) menggunakan jQuery. 
Kami akan menggunakan Back4app sebagai layanan backend kami untuk menyederhanakan manajemen data. Dalam tutorial ini, Anda akan menjelajahi cara mengonfigurasi proyek Back4app, merancang skema yang fleksibel, dan menerapkan fungsionalitas CRUD dengan jQuery melalui panggilan REST API.
Kami mulai dengan menyiapkan proyek Back4app berjudul Basic-CRUD-App-jQuery. Proyek ini menyediakan solusi penyimpanan data non-relasional yang dapat diskalakan. Anda akan mendefinisikan model data Anda dengan membuat kelas dan bidang langsung di dalam Back4app, baik secara manual atau dengan bantuan AI Agent Back4app.
Setelah itu, Anda akan belajar mengelola data Anda menggunakan Aplikasi Admin Back4app—antarmuka yang ramah pengguna, seret dan lepas. 
Akhirnya, Anda akan menghubungkan front-end yang didukung jQuery Anda ke Back4app melalui panggilan REST API, memastikan bahwa akses yang aman tetap terjaga.
Pada akhir tutorial ini, Anda akan memiliki aplikasi jQuery yang siap produksi yang dapat melakukan operasi CRUD dasar bersama dengan otentikasi pengguna yang aman dan manajemen data.
Poin Penting
Membangun aplikasi CRUD berbasis jQuery menggunakan backend low-code yang kuat.
Memahami cara merancang backend yang dapat diskalakan dan mengintegrasikannya dengan front-end jQuery Anda.
Belajar menggunakan Aplikasi Admin Back4app yang intuitif untuk manipulasi data yang efisien.
Menemukan strategi penyebaran termasuk kontainerisasi untuk meluncurkan aplikasi Anda dengan lancar.
﻿
Prasyarat
Sebelum memulai, pastikan Anda memiliki:
Akun Back4app dan proyek baru yang sudah disiapkan.
Butuh panduan? Kunjungi Memulai dengan Back4app.
Lingkungan pengembangan web yang berfungsi.
Gunakan editor kode seperti VSCode, Sublime Text, atau yang serupa, dan pastikan Anda memiliki browser modern untuk pengujian.
Pengetahuan dasar tentang jQuery, JavaScript, dan REST API.
Untuk penyegaran, lihat dokumentasi jQuery.
﻿
Langkah 1 – Pengaturan Proyek
Membuat Proyek Back4app Baru
Masuk ke akun Back4app Anda.
Klik tombol “Aplikasi Baru” di dasbor Anda.
Beri nama proyek Anda: Basic-CRUD-App-jQuery dan ikuti instruksi di layar untuk menyelesaikan pengaturan.
Buat Proyek Baru
﻿
Setelah dibuat, proyek Anda akan muncul di dasbor, meletakkan dasar untuk konfigurasi backend Anda.
﻿
Langkah 2 – Merancang Model Data
Mendefinisikan Struktur Data Anda
Untuk aplikasi CRUD ini, Anda akan membuat beberapa kelas (koleksi) di Back4app. Di bawah ini adalah kelas utama dan bidangnya yang penting untuk operasi CRUD.
1. Kelas Item
Kelas ini menyimpan informasi tentang setiap item.
Bidang
Tipe Data
Deskripsi
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
judul
String
Nama item tersebut.
deskripsi
String
Deskripsi singkat tentang item tersebut.
dibuatPada
Tanggal
Stempel waktu ketika item ditambahkan.
diperbaruiPada
Tanggal
Stempel waktu dari modifikasi terakhir.
2. Kelas Pengguna
Kelas ini menangani kredensial pengguna dan detail otentikasi.
Bidang
Tipe Data
Deskripsi
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna
String
Pengidentifikasi unik untuk pengguna.
email
String
Alamat email pengguna.
hashKataSandi
String
Kata sandi terenkripsi untuk login yang aman.
dibuatPada
Tanggal
Stempel waktu pembuatan akun.
diperbaruiPada
Tanggal
Timestamp untuk pembaruan akun terakhir.
Anda dapat menambahkan kelas dan bidang ini secara manual melalui dasbor Back4app.
Buat Kelas Baru
﻿
Untuk menambahkan bidang, pilih jenis data, masukkan nama bidang, atur nilai default jika perlu, dan tandai sebagai wajib jika diperlukan.
Buat Kolom
﻿
Memanfaatkan Agen AI Back4app untuk Generasi Skema
Agen AI Back4app yang terintegrasi dapat secara otomatis menghasilkan skema Anda berdasarkan deskripsi singkat. Ini menyederhanakan inisialisasi proyek dan memastikan model Anda mendukung operasi CRUD.
Cara Menggunakan AI Agent:
Buka AI Agent:
Masuk ke dasbor Back4app Anda dan navigasikan ke bagian AI Agent di bawah pengaturan proyek.
Deskripsikan Skema Anda:
Berikan informasi rinci tentang kelas dan bidang yang diperlukan.
Tinjau dan Konfirmasi:
Setelah AI Agent memproses input Anda, ia akan menyarankan skema. Tinjau dan setujui untuk menyelesaikan konfigurasi Anda.
Contoh Prompt
Text
Create these classes in my Back4app project:

1) Class: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Class: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create these classes in my Back4app project:

1) Class: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Class: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
Proses yang dibantu AI ini tidak hanya menghemat waktu tetapi juga memastikan skema data yang konsisten dan teroptimasi.
﻿
Langkah 3 – Mengaktifkan Aplikasi Admin & Menangani Operasi CRUD
Memulai dengan Aplikasi Admin
Aplikasi Admin Back4app menawarkan solusi tanpa kode untuk manajemen data backend yang efisien. Antarmuka drag-and-drop yang intuitif menyederhanakan proses melakukan operasi CRUD seperti menambahkan, melihat, mengedit, dan menghapus catatan.
Mengaktifkan Aplikasi Admin
Pergi ke menu “Lainnya” di dasbor Back4app Anda.
Pilih “Aplikasi Admin” dan klik pada “Aktifkan Aplikasi Admin.”
Atur kredensial admin Anda dengan membuat akun admin awal, yang juga akan menetapkan peran (seperti B4aAdminUser) dan kelas sistem.
Aktifkan Aplikasi Admin
﻿
Setelah diaktifkan, masuk ke Aplikasi Admin untuk mengelola data aplikasi Anda.
Dasbor Aplikasi Admin
﻿
Menggunakan Aplikasi Admin untuk Operasi CRUD
Di dalam Aplikasi Admin, Anda dapat:
Menyisipkan Catatan: Klik “Tambahkan Catatan” dalam sebuah kelas (misalnya, Item) untuk menambahkan data baru.
Melihat dan Mengedit Catatan: Pilih sebuah catatan untuk meninjau detailnya atau mengubah bidangnya.
Menghapus Catatan: Hapus entri yang tidak lagi diperlukan.
Alat yang disederhanakan ini menyederhanakan manajemen data, memungkinkan Anda untuk fokus pada logika front-end Anda.
﻿
Langkah 4 – Menghubungkan Aplikasi jQuery Anda dengan Back4app
Sekarang setelah backend Anda dikonfigurasi, saatnya untuk menghubungkan aplikasi berbasis jQuery Anda ke Back4app.
Melakukan Panggilan AJAX dengan jQuery
Alih-alih menggunakan Parse SDK, Anda akan melakukan panggilan REST API langsung menggunakan metode AJAX jQuery. Di bawah ini adalah contoh cara melakukan operasi CRUD.
Mengambil Item
JS
$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items',
  method: 'GET',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
  },
  success: function(response) {
    console.log('Items retrieved:', response.results);
  },
  error: function(error) {
    console.error('Error fetching items:', error);
  }
});
$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items',
  method: 'GET',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
  },
  success: function(response) {
    console.log('Items retrieved:', response.results);
  },
  error: function(error) {
    console.error('Error fetching items:', error);
  }
});
﻿
Membuat Item
JS
$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items',
  method: 'POST',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    title: 'New Item',
    description: 'A brief description of the new item.'
  }),
  success: function(response) {
    console.log('Item created:', response);
  },
  error: function(error) {
    console.error('Error creating item:', error);
  }
});
$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items',
  method: 'POST',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    title: 'New Item',
    description: 'A brief description of the new item.'
  }),
  success: function(response) {
    console.log('Item created:', response);
  },
  error: function(error) {
    console.error('Error creating item:', error);
  }
});
﻿
Memperbarui Item
JS
$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items/YOUR_ITEM_ID',
  method: 'PUT',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    title: 'Updated Title',
    description: 'Updated description.'
  }),
  success: function(response) {
    console.log('Item updated:', response);
  },
  error: function(error) {
    console.error('Error updating item:', error);
  }
});
$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items/YOUR_ITEM_ID',
  method: 'PUT',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    title: 'Updated Title',
    description: 'Updated description.'
  }),
  success: function(response) {
    console.log('Item updated:', response);
  },
  error: function(error) {
    console.error('Error updating item:', error);
  }
});
﻿
Menghapus Item
JS
$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items/YOUR_ITEM_ID',
  method: 'DELETE',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
  },
  success: function(response) {
    console.log('Item deleted:', response);
  },
  error: function(error) {
    console.error('Error deleting item:', error);
  }
});
$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items/YOUR_ITEM_ID',
  method: 'DELETE',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
  },
  success: function(response) {
    console.log('Item deleted:', response);
  },
  error: function(error) {
    console.error('Error deleting item:', error);
  }
});
﻿
Integrasikan panggilan AJAX ini ke dalam skrip jQuery Anda sesuai kebutuhan untuk mengelola operasi CRUD dalam aplikasi Anda.
﻿
Langkah 5 – Mengamankan Backend Anda
Mengonfigurasi Daftar Kontrol Akses (ACL)
Lindungi data Anda dengan mengatur ACL untuk objek Anda. Misalnya, untuk membuat item yang hanya dapat dibaca dan ditulis oleh pemilik:
JS
var acl = {
  "*": { "read": false, "write": false },
  "OWNER_USER_ID": { "read": true, "write": true }
};

$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items',
  method: 'POST',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    title: 'Private Item',
    description: 'This item is only accessible by its owner.',
    ACL: acl
  }),
  success: function(response) {
    console.log('Private item created:', response);
  },
  error: function(error) {
    console.error('Error creating private item:', error);
  }
});
var acl = {
  "*": { "read": false, "write": false },
  "OWNER_USER_ID": { "read": true, "write": true }
};

$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items',
  method: 'POST',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    title: 'Private Item',
    description: 'This item is only accessible by its owner.',
    ACL: acl
  }),
  success: function(response) {
    console.log('Private item created:', response);
  },
  error: function(error) {
    console.error('Error creating private item:', error);
  }
});
﻿
Mengatur Izin Tingkat Kelas (CLP)
Gunakan dasbor Back4app untuk mengonfigurasi CLP, memastikan bahwa hanya pengguna yang terautentikasi yang memiliki akses ke kelas sensitif.
﻿
Langkah 6 – Menerapkan Autentikasi Pengguna
Mengelola Akun Pengguna
Back4app menggunakan kelas Pengguna bawaan untuk menangani autentikasi. Dalam aplikasi jQuery Anda, Anda dapat mengelola pendaftaran dan login pengguna dengan panggilan REST API.
Mendaftarkan Pengguna Baru
JS
$.ajax({
  url: 'https://parseapi.back4app.com/users',
  method: 'POST',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    username: 'newUser',
    password: 'securePassword',
    email: '[email protected]'
  }),
  success: function(response) {
    console.log('User registered:', response);
  },
  error: function(error) {
    console.error('Registration error:', error);
  }
});
$.ajax({
  url: 'https://parseapi.back4app.com/users',
  method: 'POST',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    username: 'newUser',
    password: 'securePassword',
    email: 'newUser@example.com'
  }),
  success: function(response) {
    console.log('User registered:', response);
  },
  error: function(error) {
    console.error('Registration error:', error);
  }
});
﻿
Masuk sebagai Pengguna
JS
$.ajax({
  url: 'https://parseapi.back4app.com/login',
  method: 'GET',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
  },
  data: {
    username: 'newUser',
    password: 'securePassword'
  },
  success: function(response) {
    console.log('User logged in:', response);
  },
  error: function(error) {
    console.error('Login error:', error);
  }
});
$.ajax({
  url: 'https://parseapi.back4app.com/login',
  method: 'GET',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
  },
  data: {
    username: 'newUser',
    password: 'securePassword'
  },
  success: function(response) {
    console.log('User logged in:', response);
  },
  error: function(error) {
    console.error('Login error:', error);
  }
});
﻿
Anda dapat mengembangkan metode ini untuk mengelola sesi, pengaturan ulang kata sandi, dan fitur otentikasi lainnya.
﻿
Langkah 7 – Menerapkan Aplikasi jQuery Anda
Back4app menawarkan proses penerapan yang mudah. Anda dapat menerapkan aplikasi jQuery Anda menggunakan berbagai pendekatan, termasuk hosting situs statis atau kontainerisasi.
7.1 Mempersiapkan Aplikasi Anda
Bangun dan Minify:
Gunakan alat seperti webpack atau gulp untuk menggabungkan dan meminimalkan skrip jQuery Anda.
Verifikasi Aset:
Pastikan bahwa semua file HTML, CSS, dan JavaScript Anda telah dikompilasi dengan benar.
﻿
7.2 Mengorganisir Struktur Proyek Anda
Tata letak proyek yang khas mungkin terlihat seperti ini:
Text
Basic-CRUD-App-jQuery/
|-- index.html
|-- css/
|   |-- styles.css
|-- js/
|   |-- app.js
|   |-- jquery.min.js
|-- assets/
|   |-- images/
|       |-- logo.png
|-- README.md
Basic-CRUD-App-jQuery/
|-- index.html
|-- css/
|   |-- styles.css
|-- js/
|   |-- app.js
|   |-- jquery.min.js
|-- assets/
|   |-- images/
|       |-- logo.png
|-- README.md
﻿
Contoh: AJAX CRUD di app.js
JS
$(document).ready(function() {
  // Fetch and display items
  function loadItems() {
    $.ajax({
      url: 'https://parseapi.back4app.com/classes/Items',
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      success: function(response) {
        $('#itemsContainer').empty();
        $.each(response.results, function(index, item) {
          $('#itemsContainer').append('<div>' +
            '<h3>' + item.title + '</h3>' +
            '<p>' + item.description + '</p>' +
          '</div>');
        });
      },
      error: function(error) {
        console.error('Error loading items:', error);
      }
    });
  }

  // Call the function on page load
  loadItems();
});
$(document).ready(function() {
  // Fetch and display items
  function loadItems() {
    $.ajax({
      url: 'https://parseapi.back4app.com/classes/Items',
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      success: function(response) {
        $('#itemsContainer').empty();
        $.each(response.results, function(index, item) {
          $('#itemsContainer').append('<div>' +
            '<h3>' + item.title + '</h3>' +
            '<p>' + item.description + '</p>' +
          '</div>');
        });
      },
      error: function(error) {
        console.error('Error loading items:', error);
      }
    });
  }

  // Call the function on page load
  loadItems();
});
﻿
7.3 Menerapkan Aplikasi Anda
Hosting Statis
Unggah file proyek Anda ke penyedia hosting statis seperti GitHub Pages, Netlify, atau Vercel.
Dockerisasi Aplikasi Anda
Jika Anda lebih suka kontainerisasi, sertakan sebuah Dockerfile di root proyek Anda:
Dockerfile
# Use an official Node image to serve static files
FROM node:14-alpine

# Set the working directory
WORKDIR /app

# Copy your project files into the container
COPY . .

# Install a simple static server
RUN npm install -g serve

# Expose the port used by the static server
EXPOSE 3000

# Command to run the server
CMD ["serve", "-s", "."]
# Use an official Node image to serve static files
FROM node:14-alpine

# Set the working directory
WORKDIR /app

# Copy your project files into the container
COPY . .

# Install a simple static server
RUN npm install -g serve

# Expose the port used by the static server
EXPOSE 3000

# Command to run the server
CMD ["serve", "-s", "."]
﻿
Setelah menyiapkan lingkungan Docker Anda, tautkan repositori GitHub Anda di dasbor Back4app di bawah bagian Web Deployment , konfigurasikan perintah build jika perlu, dan terapkan aplikasi Anda.
﻿
Langkah 8 – Kesimpulan dan Langkah Selanjutnya
Selamat! Anda telah berhasil membangun aplikasi CRUD berbasis jQuery yang terintegrasi dengan Back4app. 
Dalam tutorial ini, Anda menyiapkan proyek bernama Basic-CRUD-App-jQuery, mendefinisikan skema data Anda untuk Items dan Users, dan mengelola data Anda melalui Aplikasi Admin Back4app. 
Selain itu, Anda menghubungkan front-end jQuery Anda melalui panggilan REST API dan menerapkan langkah-langkah keamanan yang penting.
Langkah Selanjutnya:
Kembangkan Aplikasi:
Tambahkan fitur seperti penyaringan lanjutan, tampilan rinci, atau pembaruan langsung.
Tingkatkan Kemampuan Backend:
Jelajahi fungsi cloud, integrasikan API pihak ketiga, atau terapkan akses berbasis peran.
Tingkatkan Keterampilan Anda:
Selami dokumentasi Back4app dan jelajahi tutorial tambahan untuk fungsionalitas yang lebih lanjut.
Selamat coding dan semoga sukses dengan aplikasi CRUD jQuery Anda!
Bidang	Tipe Data	Deskripsi
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
judul	String	Nama item tersebut.
deskripsi	String	Deskripsi singkat tentang item tersebut.
dibuatPada	Tanggal	Stempel waktu ketika item ditambahkan.
diperbaruiPada	Tanggal	Stempel waktu dari modifikasi terakhir.
Bidang	Tipe Data	Deskripsi
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna	String	Pengidentifikasi unik untuk pengguna.
email	String	Alamat email pengguna.
hashKataSandi	String	Kata sandi terenkripsi untuk login yang aman.
dibuatPada	Tanggal	Stempel waktu pembuatan akun.
diperbaruiPada	Tanggal	Timestamp untuk pembaruan akun terakhir.
Diperbarui 19 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membuat Aplikasi CRUD dengan Svelte?
BERIKUTNYA
Bagaimana Cara Membangun Aplikasi CRUD dengan Node.js?