Skip to content

Building a simple CRUD App with a MongoDB database

Picture of Ali Mohammad

So, here's the lowdown: When you're diving into building web apps without wanting to get your hands dirty with too much coding, MongoDB is your go-to. No kidding, it's a game changer for storing and managing your data without writing endless lines of code. But hey, there's this little hiccup when it comes to putting together the front-end part of your internal apps or admin panels. Designing from scratch? Yeah, not everyone's cup of tea.

Now, imagine if you could snap your fingers and have a sleek front-end ready to roll. That’s where GA_Universe jumps in. It’s like having a magic wand to whip up a custom front-end in minutes. Packed with ready-to-use UI widgets, it makes your app not just functional but also easy on the eyes. And connecting MongoDB as your data source is a breeze. In just a few clicks, you can start building tools on top of MongoDB, making your CRUD app come to life without the usual hassle.

This chat is all about how you can hook up MongoDB with GA_Universe to get your CRUD app up and running. Cool, right? Let's dive into making something awesome together.

1- Getting Started: Hooking up MongoDB on GA_Universe

On GA_Universe, hooking up with a datasource like MongoDB is pretty much a walk in the park.

To kick things off, you’ll need a few things: the database server URL, the database connection type, the data bank you want to use, and those all-important server account credentials. Got those? Great, let’s roll.

First off, if you haven’t already got an account on GA_Universe, now’s the time to hit that sign up button (don’t worry, it’s on the house!). Already part of the crew? Just log in to your GA_Universe account.

  1. Time to get the ball rolling on your new project. Head over to the settings area, and in your data section add a new model and then inside of that shiny new model, add a new Datasources on the right. That’s your next stop.
  2. Now, hit the road to the Create New tab and pick MongoDB as your datasource. You’ll land on a screen asking for the juicy details: your Database URL, Connection type, Data bank, and those Service Account Credentials.
  3. After writing all the information, click on the checkmark to test the connection. And just like that, you’re on your way to creating something awesome with MongoDB on GA_Universe.
    • Note: You need to get the information from the database host, for my example I use the cloud MongoDB host, so I had to create a new user as well as whitelist the IP address of the instance, if you want just whitelist everything using: 0.0.0.0/0

2- Creating a New Collection in MongoDB via GA_Universe:

With the basics out of the way, it's time to dive into something a bit more exciting. Let's set up a collection in MongoDB for a dynamic event management application. This is the perfect scenario to get hands-on with the basic CRUD operations, all within the GA_Universe platform.

  1. Navigate to the data model you've established. Seek out the "data structure" area, move on to "data objects," and then click "create new." At this juncture, select the MongoDB data source you've already prepared.
  2. Now, let's shape the foundation of your event management app by adding the following attributes along with their data types:
    • event_name: string (The title of your event. Make it snappy!)
    • organizer: string (Who's orchestrating this gathering? Their name goes here.)
    • is_active: boolean (Is the event still on? A simple True or False will suffice.)
    • event_date: datetime (When's the big day? Specify the date and time.)

And just like that, you've laid down the groundwork for managing events. With these elements in place, your path to creating, displaying, tweaking, and removing events in your innovative event management application is all set, all powered by MongoDB and GA_Universe. Let the development adventure begin!

3- CRUD on MongoDB with GA_Universe:

Time to get our hands dirty with some real action on MongoDB using GA_Universe. Follow these steps to set up a page for adding and managing events.

  1. Head over to the settings area, then find your way to "Layout." Look for the "pages" tab, and don't hesitate to hit "create new" to kick off a new page. Let's call this new kid on the block "AddEvents" and tag it with the "table details" type. After naming it, go ahead and click "continue."
  2. Next up, you're going to tie this page to your data model and zero in on the events collection you’ve prepared earlier. Click "continue" to move forward. Now, you're in the realm of table columns. This is where you pick "_Id" along with any other pieces of information you want to include. But hey, since the "_Id" field is not really for user eyes, let's keep it under wraps and hide it.
  3. Clicking "continue" takes you to the next step: choosing the types of input for each field. For the first two fields, go with a text box – straightforward and effective for inputs like 'event_name' and 'organizer.' For the next two, switch things up a bit: select a checkbox for the 'is_active' field and a datetime picker for the 'event_date.' This setup ensures that your inputs are not only accurate but also user-friendly..
  4. Once you’ve made these selections, hit "OK," and voila, your "AddEvents" page is all set up and ready to roll. This page is your gateway to adding, viewing, and managing events seamlessly in your event management application, all within the efficient and powerful ecosystem of GA_Universe and MongoDB.
  5. Continuing from setting up your "AddEvents" page, let's get this page ready for the spotlight by making it easily accessible to others. Here’s how you can create a navigation menu that includes your new page:
    • Begin by heading back to the settings area. Once there, navigate your way to "Layout" and then dive into "Navigation."
    • Now, in the "Navigation" section, find "Overview" and go ahead with "create new." This is where you'll be crafting a new pathway for your app.
    • It's naming time! Give your new navigation a name that resonates with its purpose. Since it's all about events, something straightforward would do the trick.
    • The next step is crucial: you need to link this navigation to the landing page you just created. Select the "AddEvents" page as the destination so users can jump straight to it.
    • With that done, your navigation is almost ready to go live. To access this new section of your app, simply append /Events/ to the base URL of your current instance. For instance, if your base URL is https://develop.gauniv.com, your full path to the events page will be https://develop.gauniv.com/Events/.

By following these steps, you’ve not only created a functional page for adding and managing events but also integrated it smoothly into your application's navigation. This makes it super easy for you and others to find and use the page, enhancing the overall user experience of your event management application within the dynamic environment of GA_Universe and MongoDB. Time to let the event magic happen!