Overview
The CRUD Management Web App is a versatile and user-friendly web application designed to handle Create, Read, Update, and Delete (CRUD) operations seamlessly. This application allows users to manage various types of data efficiently, providing an intuitive interface for data manipulation and organization. Whether you're managing inventory, tracking projects, or handling any other data-centric tasks, this web app offers a robust solution to streamline your workflow.
Purpose
The primary purpose of the CRUD Management Web App is to provide a centralized platform for users to manage their data effectively. It simplifies the process of adding new records, viewing existing data, updating information, and deleting unnecessary entries. Additionally, the app supports file uploads, enabling users to associate relevant documents or images with each data record. This ensures that all pertinent information is stored in one accessible location, enhancing productivity and data organization.
Technologies Used
The CRUD Management Web App leverages a combination of powerful technologies and tools to deliver a seamless and efficient user experience. Below is a list of the key technologies used in the development of this application:
Backend:
- Google Apps Script: Serves as the backend scripting platform, enabling server-side operations and integration with other Google services.
- Google Sheets: Acts as the database for storing and managing data records, offering a collaborative and easily accessible storage solution.
- Google Drive: Utilized for storing uploaded files, ensuring secure and organized file management.
Frontend:
- HTML5: Provides the structural framework of the web application's frontend, creating the layout and essential elements.
- CSS3: Styles the web application, ensuring a visually appealing and responsive design across various devices.
- JavaScript: Powers the interactive functionalities of the web app, enabling dynamic user interactions and data processing.
Libraries & Frameworks:
- Bootstrap 5: A front-end framework used to design a responsive and mobile-friendly user interface with pre-built components and utilities.
- DataTables: Enhances data presentation with features like searching, sorting, and pagination, offering a better user experience when handling large datasets.
- SweetAlert2: Implements aesthetically pleasing and user-friendly alert dialogs for notifications and confirmations.
- Font Awesome: Supplies scalable vector icons that can be customized and integrated into the web application's interface.
Additional Tools:
- jQuery: Simplifies DOM manipulation, event handling, and AJAX interactions, facilitating smoother frontend operations.
Features
- Add New Records: Easily create new data entries with the option to upload multiple files, ensuring all relevant information is captured.
- View Records: Display all data entries in a searchable and sortable table, making it simple to access and manage information.
- Edit Records: Update existing data entries directly from the web app interface, allowing for quick modifications and corrections.
- Delete Records: Remove data entries and their associated files securely and efficiently, maintaining a clean and organized database.
- File Uploads: Supports uploading and managing PDF and image files linked to each record, providing comprehensive data management capabilities.
- Responsive Design: Ensures optimal usability across various devices, including desktops, tablets, and smartphones, offering flexibility and convenience to users.
Getting Started
To get started with the CRUD Management Web App, follow these steps:
- Setup Google Sheets and Drive:
- Create a new Google Sheet to serve as your database.
- Set up a Google Drive folder named "ASSETS" for storing uploaded files.
- Deploy the Web App:
- Open the Google Apps Script editor associated with your Google Sheet.
- Paste the provided script into the editor.
- Deploy the script as a web app, ensuring proper permissions are set.
- Access the Web App:
- Navigate to the deployed web app URL.
- Begin adding, viewing, editing, and deleting records as needed.
Support & Contributions
If you encounter any issues or have suggestions for improvements, feel free to reach out or contribute to the project. Your feedback is valuable in enhancing the functionality and usability of the CRUD Management Web App.
| Step | Instructions |
|---|---|
| Step 1 | Open the web app link provided. |
| Step 2 |
If you see a Google Sheet in view-only mode:
|
| Step 3 |
If you see a page with two options (Make a Copy and AppScript File):
|
| Step 4 | Follow the on-screen instructions to complete the setup. |
| Step 5 | Click on the Extensions menu at the top of the Google Sheet. |
| Step 6 | Select Apps Script from the dropdown menu. |
| Step 7 | In the Apps Script editor, click on the Deploy button. |
| Step 8 | Select New deployment from the dropdown menu. |
| Step 9 | In the deployment configuration, click on Select type and choose Web app. |
| Step 10 | Fill in the required fields and click on Deploy. |
| Step 11 | Grant the necessary permissions when prompted. |
| Step 12 | Once deployed, copy the web app URL provided. |