Quickstarters
How to Create a CRUD App with jQuery?

39min
Introduction
This guide will walk you through building a complete CRUD (create, read, update, delete) application using jQuery. 
We'll use Back4app as our backend service to simplify data management. In this tutorial, you'll explore how to configure a Back4app project, design a flexible schema, and implement CRUD functionalities with jQuery through REST API calls.
We begin by setting up a Back4app project titled Basic-CRUD-App-jQuery. This project provides a scalable non-relational data storage solution. You’ll define your data model by creating classes and fields directly within Back4app, either manually or with the help of Back4app’s AI Agent.
After that, you'll learn to manage your data using the Back4app Admin App—a user-friendly, drag and drop interface. 
Finally, you'll connect your jQuery-powered front-end to Back4app via REST API calls, ensuring that secure access is maintained.
By the end of this tutorial, you'll have a production-ready jQuery application that can perform basic CRUD operations along with secure user authentication and data management.
Key Takeaways
Build a jQuery-based CRUD application using a robust low-code backend.
Understand how to design a scalable backend and integrate it with your jQuery front-end.
Learn to use the intuitive Back4app Admin App for efficient data manipulation.
Discover deployment strategies including containerization to smoothly launch your application.
﻿
Prerequisites
Before diving in, make sure you have:
A Back4app account and a new project set up.
Need guidance? Visit Getting Started with Back4app.
A working web development environment.
Use a code editor like VSCode, Sublime Text, or similar, and ensure you have modern browsers for testing.
Basic knowledge of jQuery, JavaScript, and REST APIs.
For a refresher, check out the jQuery documentation.
﻿
Step 1 – Project Setup
Creating a New Back4app Project
Log into your Back4app account.
Click the “New App” button on your dashboard.
Name your project: Basic-CRUD-App-jQuery and follow the on-screen instructions to complete the setup.
Create New Project
﻿
After creation, your project will appear on the dashboard, laying the foundation for your backend configuration.
﻿
Step 2 – Designing the Data Model
Defining Your Data Structures
For this CRUD application, you will create several classes (collections) in Back4app. Below are the primary classes and their fields essential for CRUD operations.
1. Items Class
This class stores information about each item.
Field
Data Type
Description
_id
ObjectId
Auto-generated unique identifier.
title
String
The name of the item.
description
String
A brief description of the item.
createdAt
Date
Timestamp of when the item was added.
updatedAt
Date
Timestamp of the last modification.
2. Users Class
This class handles user credentials and authentication details.
Field
Data Type
Description
_id
ObjectId
Auto-generated unique identifier.
username
String
Unique identifier for the user.
email
String
User’s email address.
passwordHash
String
Encrypted password for secure login.
createdAt
Date
Account creation timestamp.
updatedAt
Date
Timestamp for the last account update.
You can manually add these classes and fields via the Back4app dashboard.
Create New Class
﻿
To add fields, select the data type, enter the field name, set a default value if necessary, and mark it as required if needed.
Create Column
﻿
Utilizing the Back4app AI Agent for Schema Generation
The integrated Back4app AI Agent can automatically generate your schema based on a brief description. This simplifies project initialization and ensures your model supports CRUD operations.
How to Use the AI Agent:
Open the AI Agent:
Sign into your Back4app dashboard and navigate to the AI Agent section under project settings.
Describe Your Schema:
Provide detailed information about the classes and fields required.
Review and Confirm:
Once the AI Agent processes your input, it will suggest a schema. Review and approve it to finalize your configuration.
Example 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)
﻿
This AI-assisted process not only saves time but also ensures a consistent and optimized data schema.
﻿
Step 3 – Activating the Admin App & Handling CRUD Operations
Getting Started with the Admin App
The Back4app Admin App offers a no-code solution for efficient backend data management. Its intuitive drag-and-drop interface simplifies the process of performing CRUD operations such as adding, viewing, editing, and deleting records.
Enabling the Admin App
Go to the “More” menu on your Back4app dashboard.
Select “Admin App” and click on “Enable Admin App.”
Set up your admin credentials by creating an initial admin account, which will also establish roles (like B4aAdminUser) and system classes.
Enable Admin App
﻿
Once activated, log in to the Admin App to manage your application data.
Admin App Dashboard
﻿
Using the Admin App for CRUD Operations
Within the Admin App, you can:
Insert Records: Click “Add Record” within a class (e.g., Items) to add new data.
View and Edit Records: Select a record to review its details or modify its fields.
Delete Records: Remove entries that are no longer needed.
This streamlined tool simplifies data management, allowing you to focus on your front-end logic.
﻿
Step 4 – Linking Your jQuery Application with Back4app
Now that your backend is configured, it’s time to connect your jQuery-based application to Back4app.
Making AJAX Calls with jQuery
Instead of using a Parse SDK, you will make direct REST API calls using jQuery's AJAX methods. Below are examples of how to perform CRUD operations.
Fetching Items
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);
  }
});
﻿
Creating an 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);
  }
});
﻿
Updating an 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);
  }
});
﻿
Deleting an 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);
  }
});
﻿
Integrate these AJAX calls into your jQuery scripts as needed to manage CRUD operations in your application.
﻿
Step 5 – Securing Your Backend
Configuring Access Control Lists (ACLs)
Protect your data by setting up ACLs for your objects. For example, to create an item that only the owner can read and write:
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);
  }
});
﻿
Setting Class-Level Permissions (CLPs)
Use the Back4app dashboard to configure CLPs, ensuring that only authenticated users have access to sensitive classes.
﻿
Step 6 – Implementing User Authentication
Managing User Accounts
Back4app uses the built-in User class for handling authentication. In your jQuery app, you can manage user sign-ups and logins with REST API calls.
Registering a New User
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);
  }
});
﻿
Logging In a User
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);
  }
});
﻿
You can expand on these methods to manage sessions, password resets, and other authentication features.
﻿
Step 7 – Deploying Your jQuery Application
Back4app offers an easy deployment process. You can deploy your jQuery application using various approaches, including static site hosting or containerization.
7.1 Preparing Your Application
Build and Minify:
Use tools like webpack or gulp to bundle and minify your jQuery scripts.
Verify Assets:
Ensure that all your HTML, CSS, and JavaScript files are correctly compiled.
﻿
7.2 Organizing Your Project Structure
A typical project layout might look like this:
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
﻿
Example: AJAX CRUD in 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 Deploying Your Application
Static Hosting
Upload your project files to a static hosting provider such as GitHub Pages, Netlify, or Vercel.
Dockerizing Your Application
If you prefer containerization, include a Dockerfile in your project root:
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", "."]
﻿
After setting up your Docker environment, link your GitHub repository in the Back4app dashboard under the Web Deployment section, configure build commands if necessary, and deploy your application.
﻿
Step 8 – Conclusion and Next Steps
Congratulations! You have successfully built a jQuery-based CRUD application integrated with Back4app. 
In this tutorial, you set up a project named Basic-CRUD-App-jQuery, defined your data schema for Items and Users, and managed your data through the Back4app Admin App. 
Additionally, you connected your jQuery front-end via REST API calls and implemented essential security measures.
Next Steps:
Expand the Application:
Add features like advanced filtering, detailed views, or live updates.
Enhance Backend Capabilities:
Explore cloud functions, integrate third-party APIs, or implement role-based access.
Further Your Skills:
Dive into the Back4app documentation and explore additional tutorials for more advanced functionalities.
Happy coding and best of luck with your jQuery CRUD application!
Field	Data Type	Description
_id	ObjectId	Auto-generated unique identifier.
title	String	The name of the item.
description	String	A brief description of the item.
createdAt	Date	Timestamp of when the item was added.
updatedAt	Date	Timestamp of the last modification.
Field	Data Type	Description
_id	ObjectId	Auto-generated unique identifier.
username	String	Unique identifier for the user.
email	String	User’s email address.
passwordHash	String	Encrypted password for secure login.
createdAt	Date	Account creation timestamp.
updatedAt	Date	Timestamp for the last account update.
Updated 17 Feb 2025
Did this page help you?
How to Create a CRUD Application with Svelte?
How to Build a CRUD App with Node.js?