The next couple of lessons are possibly the most important in the entire course because we're going to learn how we can take some data from our users, save that into our database, and display it back out to them.

So the end result here will be something where the user can add some basic details about a trip that they've taken.

And this, of course, could be anything in your app.

This could be a task or a project or some equivalent.

And what we create, what we create is going to appear on screen after the user creates it.

And of course, over time, we're going to improve the design and the user experience of this.

But this is just the starting point for us to really understand the mechanics of how we work with data in Bubble.

So we're going to start super simple on our trips view by just adding an input onto the screen.

And I'm going to update the placeholder text as well.

Notice how that automatically updated the name of the input as well, which is one little handy thing that Bubble is doing for us.

And maybe I'll also add a date time picker input.

So this is a special type of input that lets the user select either a date or a time.
We're going to leave it as a date.

And I'm just going to set the accent color here to this light version of our primary color—that color variable that we set up earlier in the course.

And I will rename this one as our date picker, “dark date.”

This is the start date of our trip.

And maybe just add one more input here which is going to let us capture the cost of the trip.

And we can choose here a different type of content that we're going to expect in this input.

So since we're expecting a monetary value, I'm going to set this to be currency.

And so this is how our screen looks for the moment.

So when I select an input, I can add some value here.

If I select the date picker, then I get this nice little native date picker component.

And I can even click in this top left corner in order to change the month and the year.
And then I've got my currency input as well.

Note that at the time of recording there is a little bug with this where it's not showing the currency prefix.

So normally, we would have a dollar sign or whatever currency symbol that we've chosen appearing here at the front.

So this is the basics of our form for creating a trip.

But of course, we've got no logic for saving this information.

And if I was to relaunch the app, then all of that data is lost.

So we need some kind of logic, some kind of workflow in order to store this information.

So I'm just going to go and add a button because that's sort of what we need for a form.

And we'll call this label “Create Trip.”

And this button is going to be the trigger event for a new workflow.

Remember, we just learned about workflows.

So I'll create a new workflow.

And we want to choose here “Element is tapped.”

And that's just going to automatically select that button that we just created because it's the only eligible element that we have to be tapped.

And just as a quick aside here, if I just hit these three dots and delete this workflow, you have a shortcut way of creating a workflow based on an element being tapped.

And that's if you have the element selected here on the canvas, you can just hit this button Add workflow.

And that's going to do the equivalent of what we just did: create a new workflow with a trigger event when this element is tapped.

And this is where we're going to add the logic for saving this trip in the database.

And just so we can get our heads around what that actually means, I'm just going to step away from the laptop for a minute and visualize this.

So what we've got here is a form in our app, and I've represented the different inputs here as different shapes because these inputs do hold all different types of data.

This title input, for example, holds a text value like the title of the trip, right?

The title of the vacation: Italy holiday.

The start date input holds a date type value, right?

This is another type of data, is a date type.

And then we've got our cost input, which is holding a number type value, an integer type value as it's sometimes called.

And the fact that these are all different types of data is going to be really important as we build out this application because we can do different types of things, different types of manipulations to different types of data.

A text value: we can search through a text value, right?

We can search via keywords.

A date value: we could add or subtract hours, we could change the year.

A number value: we could do mathematical operators, right?

Multiplication, division, addition, all of those sorts of things.

So while we have all these different data points about a trip, each of these data points is a fundamentally different type of thing, a different type of shape.

Now the problem that we're trying to solve is we're trying to store this information somewhere so that the data persists.

We're trying to give our app a memory.

Now to store data, we need to use something called a database.

And a database is often represented as a big drum, which is how I've got it here.

And inside of this database, I want you to imagine that we've got all of these different shelving units, all these different shelves.

And each of these shelves stores different types of things.

So we might have a shelf here that is holding on to or storing all of the users in our app.

Or, of course, we might have another shelving unit that is storing all of the trips that we have in our app.

So these trips I've represented here as this little package.

And now all we're ever doing when we want to save data like from this form in our database is we're taking some empty box, some empty package, and we're taking all of these values and putting them inside, and then storing that package, that box, on the corresponding shelf in our database.

And so if I just make this one bigger, let's just imagine that this is our new trip package, right?

It's an empty box.

And then whenever we want to store this information, we just take off the lid and we just take the values and we put them in the box, right?

We take all those input values and put them in the box.

Except that we don't just throw them all in here loose like I just did, right?

Because if you see here, what we actually have is an internal structure to our trip package, to what we call a data type.

So this internal structure is just a set of compartments where each compartment is set up to hold a particular type of data like, for example, a text value or a date value or a number value.

This is just the equivalent of, like, in your cutlery drawer where you might have a compartment for the spoons and the knives and the forks, etc., right?

We've got some internal structure here that is set up to hold some particular types of data.

So what really happens then is when we're ready to store a new trip in our database, we take an empty shelf which already has these compartments predefined.

So this is our sort of template trip structure here, and it conveniently, of course, has pretty much a one-to-one map with the inputs that we have created in our app.

And so then it's just a matter of taking the values from each of those inputs, storing them in the corresponding compartment, the corresponding field as we call it, and then we close the box up and we go and store that on our database.

So that would be the equivalent here of my little box storing that on our trip shelf.

And this sending of information from our app to our database, that happens over the internet because your app is running on your user's mobile device.

But your database actually lives on some other computer somewhere else on the internet.

That type of computer we call a server.

And that's important because it doesn't matter where our user is accessing the app or what user is accessing the app.

They're all able to store data on some external location that they can then access at a later time.

And that's important because we don't really want this data to be living on the user's own mobile device because they might want to access it from multiple devices.

Or we might want to allow other users to access their data, right?

In any kind of sort of social application where multiple users can see the same data.

So it's important that we have an offsite, so to speak, storage location for our data that all of the users of our application can access.

Now, how do we actually make this connection work in Bubble where we are sending some values from inputs from our app into our database?

Well, let's jump back into the editor and I'll show you.

So to set this up in Bubble, we need to introduce ourselves to a tab that we haven't dealt with yet, and that is the Data tab.

Now, over on the left of this Data tab, we have a list of all of the data types that exist in our application.

And we've got two here that we get out of the box with every mobile app: this device data type and the user data type.

We're going to be dealing with both of these in turn.

But for now, let's just focus on our trip data type.

So to create a new data type, we just type its name into this New type and we hit Create.

There is this check box here that you will undoubtedly question.

For now, we're just going to leave that unchecked.

We are going to come back and understand what this does later on in the course, but for now, we're just going to hit create.

And so now we have this trip data type defined.

Our next job is to define what are these fields inside of this data type.

So we do that over here on the right-hand side.

So we're going to create a new field for each of these values that we want to save.

So we obviously have a title field for storing the trip title.

So this is the name of the compartment, the name of the field, and then the field type is what shaped data it is, right?

So our title field is, of course, a text-shaped thing—that's a text type.

And then, of course, we have our start date field and the type is predictably a date type.

So that's another basic type that we can work with in Bubble.

And then finally, we have a cost field and that field type is no huge surprise, a number type field.

And now that we've got this trip data type set up—this template for what all of our trips are going to look like—we can start creating unique trips in our database.

So to do this, we're going to go back to the workflow tab and we're going to add an action that lives here under Data and it is Create a new thing.

We then select what type of thing that we want to create.

We've only got one data type that we've created so far in our app called a trip.

And now just to demonstrate this, I just want to go and preview this and just forget about adding any values into any of these inputs.

I'm just going to hit create trip once.

And you didn't see anything appear on screen there but we can presume that because we set this action up, that this action ran.

And so what we can actually do just to test that a trip was created was go into our data tab and then look under this App data section which is essentially going to give us a window into all of the data in our database.

So we get a spreadsheet if you will for each data type that we have.

And so this is our trips spreadsheet.

And you can see that we actually do have a trip here and it's got a few fields filled out for us which we can inspect if we click this little pencil icon.

It's got the date that it was created, the modified date which of course is just going to be the same as the created date right now, and it's also got something called a unique ID.

So unique ID, this is just the equivalent of like a social security number or driver's license number or some personal identifier for our data that makes it totally unique in our database.

And this is what's going to allow us later on to retrieve specific entries from the database.

And these unique IDs are generated automatically by Bubble whenever we create a new data type.

So notice, of course, that we don't have any values for the fields that we created.

So all we did when we ran that action was we just grabbed an empty trip box, an empty trip package, and then we just closed the lid and put it in our database, right?
Put it on our trips shelf.

We didn't store any data inside of it.

So what we actually want to do is when we grab our empty trip, we of course want to route the corresponding values into it, store them in their appropriate slots, their appropriate compartments.

Then we close our proverbial lid on our trip package and store this in our database.

So to do that, we actually click this button here within our Create a new trip action to Set another field.

And we can now choose for each of the fields what value we want to set it to.

And what I'm going to do just to start with, I'm just going to hit the escape button here, and I'm just going to type in some static value for the title.

And if I refresh my preview here and hit create trip again, what do you think we will see if we go into our app data tab?

Of course, we will see this test trip field.

But of course, we want this value to be dynamic.

Now remember in the last lesson where we learned about dynamic expressions, that is what we're going to use here because rather than having each of our trips just have the same title, let's give them the title coming from the input that the user has filled out.

And so what we can do is we can click this magical blue button Insert dynamic data.

And we can now point this field value to the value that lives inside of input title.

So we grab input title and then the value inside of that input, right?

Not the input itself.

We can't put an input itself into a field.

But that input is just a container of sorts for—in this case—a text value.

So if we select that and then we just click off here, we'll see that this expression has turned blue.

That means that it is a valid expression.

Let's refresh our preview.

Try this again.

And if I hit create trip, what do you think's going to happen?

Well, of course, we've got an empty title because we didn't fill in any value here.

But if I say something like “Italy family holiday” and then hit create trip, if we check our app data tab, we see that the title corresponds to that value that I just typed in the input.

And now to have these other inputs be populated as well, it's just a matter of setting those fields as well.

So the start date we're going to point to that date time picker that we have on the page, and of course the value inside of that input.

And then of course for the cost, we're going to set that to the input corresponding to that cost value.

And now I can't really test this within the web preview because this date time picker won't work on the web preview.

So instead I'm going to open this in the Bubble Go app and just select some arbitrary values here and hit create trip.

And if we look in the app data tab, you now see that we have a new trip entry with those values that we just added from within our application.

And then if you wanted your users to be able to use this form again right away, we can just add in another action here after Create a new trip, which is being recommended to us actually: Reset relevant inputs.

It otherwise lives under element actions, Reset relevant inputs.

You can always search as well for actions that you can add here.

So reset relevant inputs is what we're going to add.

And note here that we now have two actions within our workflow.

So we've got a trigger event when the button is tapped, then we're going to create the new trip, and then we're going to reset the input.

So this workflow is essentially a sequence of logic.

We're going to have a trigger event and then a series of actions that are going to cascade and fire one after the other.

And now if I test this out and hit create trip, notice that the inputs are reset so that I can create another one.

So okay, cool.

We can store data in the database, but how do we actually display data from our database out to our users within our interface?

We're going to deal with that in the next lesson.