How To Create Wix Code Databases and Dynamic Pages | Wix.com Tutorial

Hello fellow entrepreneurs, Michael Strauch here from the Wix Training Academy! And in today's video, we're going to do a refresher on how to create databases and dynamic pages in Wix, because Wix has added some new elements to their databases and also have made some of their dynamic pages integrate with more Wix apps. So we're going to just do a quick refresher on that. So that way we have a good base because everybody watching this video knows that every good business, every good website starts with a solid foundation. So we need to get this foundation down before we could create anything more advanced.

So with that said, if you're just joining us, thank you very much. Hit that subscribe button. So you don't miss any Wix training content here, head over to wixtrainingacademy.com guys right here and click. “Yes, I Want Free Wix Content” to enroll in our free Wix Training Academy. And if you're interested in hiring out our team to help you build your Wix project, head to that same website and click “Contact”.

Let's jump into today's video and talk about how we create Wix code database and dynamic pages.

Create Wix Code Databases and Dynamic Pages

So first and foremost, once you're in the Wix editor, you have to activate what we call developer tools to do this. You go up here to these top settings and you'll see Code down there you'll see, Turn On Developer Tools. Very simply turn that on. And then it'll say “Welcome To Wix Code” you could either press Start Now or X that out.

So once that happens, we see a couple of things open up. Number one, we see our Properties panel, our Site Structure down here to the left and then our page manager or Page Code manager pop up down at the bottom. So you can actually get rid of this site structure here on the left by clicking this little arrow button and then it does that. And to open it back up, because we're going to need to for today's video, you just click that button back in, it will open it.

So now how to manage and create databases? So first and foremost, you'll see in this side structure all of your pages, your public and backend codes. If you have any API integrations, anything like that, you'll likely be utilizing the public and backend codes and web modules, but then under that you see Database.

So database is where you store customer information. It's where you store information that's displayed on your dynamic pages. It's where you store member information. If you're creating a site with members and having member profiles, all of that type of information that we'll use be used dynamically all along your website is going to be stored in your database. Custom user input forms, if you're collecting input forms may be a custom contact us form a custom lead evaluation form, a new prospect form. Any of these types of things are going to be stored in our database. So we have to create a database in order to store it.

Creating Database

So how do we create a database? Well, to start, you can either click Add new collection or hover over here and click this plus (+) button. So I'm going to click the plus and then you'll see New Collection, you'd simply click that. And then it gives you this little introducing database collections. You can breeze your list through it if you want and then Start Creating.

So now what we have to do is we have to create a name for our database. So whatever you do here, it does not truly matter. Just make sure you make it a name that you could remember and that way when you're utilizing it in your code, if you use code at all on your website, it's easy to remember and easy to name.

So in this case, I will just call this “MemberProfileData”. You'll notice I didn't space, anything. It's all one character, technically one whole phrase here. There's no spaces allowed. And I named mine MemberProfileData. Then you're going to see ‘What's this database collection for?’ this is a very important step. So this is where you set up the permissions for your database, depending on what you choose here, depends on how who and how your database is viewed.

Setting Permissions

So if you choose Site Content, that means anybody can view data from this collection. Anyone that comes to your website can view this data. If it's dynamically displayed, anyone can. And then if you choose Form Submission, that means if you have a custom user input form, anybody could submit data to this database. So anyone that comes to your website can submit the data.

Now you use some of these site member, permissions ones like Member-Generated Content. That means only members can be the one. So only site members, people that have registered to your Wix website through the Wix registration, I also have some custom registration feature videos that I have that I'll throw on the description or in a card can display data and submit data to this database.

The same goes for Members-Only Content, so that means only members, if you choose this, can view the content that's been added to this database. So if you've got like a membership website and you're displaying content that you only want your members to see, this would be a good database to store that Members-only content in.

Then you have Members-Only Form Submission and this is where only members could submit that data. So the Member-generated content means they could also modify, edit or delete that data. Members-only form submission means they could submit the data to the database member-only.

Then you have Private Data, so this is access to that only admins get. So if you have an exclusive page and maybe you have a couple admins for your website and you want to submit data and display like admin dashboards, this is where you would choose Private data. So only the admin of the website gets to access this data and view it, edit it, update it, delete it, whatever that may be.

So if this is something you're building out for an admin, or let's just say, you're building a peer-to-peer marketplace, for example, and you have the admin of the website, so the owner of the website and then obviously you have two different style member accounts. You have the consumer and then the other peer. So the other consumer, one selling one's buying, while you might want an admin dashboard where you get access over everything. So that way you can view all that data. And that's only exclusive to you.

And then the last, which gives you the most versatility is Custom Use. I'm going to click custom use and show you how this works. So when we click Custom Use, it says right here, “Set Up Custom Permissions”. So then you can come in here, set up custom permissions. And essentially you choose who gets to view what. So who can read content from this collection? Well, if you choose Admin, that's private data. If you choose Site Member Author that means the person that wrote that data is the only one that could view it. If you choose Site Member, it means anyone registered on your site can view it in. Anyone means anyone who comes to your website can view it.

So I'm just going to go through here and put Anyone for the sake of this video. Who can create content for this collection?, who could submit to the database? Anyone, and then corresponding, as I just mentioned for all the rest of them Site Members. Site Member Author, who can delete? Anyone, site member, site member author, admin.

However you set that up, just be aware of how that works as I just explained with all the other ones. So then you press that Set & Create Collection and then it's going to go ahead and populate your database. When it populates, you're going to see one field already in here, Title. This field cannot be touched, cannot be deleted, cannot be altered. It's a default Wix field, which is totally fine. It doesn't really mean anything. You could utilize it if you wanted to, but you don't have to. It's just sat there as a placeholder.

Adding Fields

To start adding fields and getting familiar with the database, this is the portion I wanted to show you. So I'm not doing a complete database video in here. I'm going to show you how to at least set up a basic database. So say we're collecting member profile data, say we want to collect someone's full name, their email, maybe their phone number, and then a profile picture and a description. I'm going to show you how to add all those fields.

So you're going to come in here, click Add. Then we're going to say for field name, “Full Name”, and then you could keep the field key as is. I would keep it as is, keep it easier on yourself. So it just matches the field name.

And then now we have a couple new options here under field type. So for full name, we're going to choose Text. But you'll see, we've got a few new options. We've got video in here which can be displayed on strip backgrounds only. Currently you've got URL. You've got rich texts, which is new, which means you can actually edit how that text looks in the database and then how it spits out on a dynamic page. So it gives you more editing capabilities over the text.

You've got a media gallery, so picture gallery or a video gallery and stuff like that. Galleries, you've got images. This collects images, documents, collect documents, date and time. So this'll take timestamps and date stamps a Boolean. So this is like radio buttons, check boxes, stuff like that. It's a Boolean numbers, number pretty self-explanatory, and then reference. So you can now reference other databases in Wix.

So say you are you're building a, an eCommerce store and you've got a product page, but you want to make sure that someone posts a review only for that specific product on that page while you would reference the product database and then reference that specific product field. So then that's how it knows. Okay. When something submitted here, reference X and then Y is posted short correlates with X. That's what that reference field is for, but Full Name. We would click Text. We would click Add. Then we'll go to Email. And once again, we're going to choose Text, technically in some of the user input fields, you could specify email, I’ll show you that in a minute. So we're going to choose texts there.

Then for Phone Number, we're also going to go with Text. Sometimes it's makes your life easier when dealing with people, because sometimes they make mistakes when entering data into databases. So adding texts just makes it easier, but sometimes you may want number. If you choose number, that means you can't have any dashes. So if you've ever gone to a website to put in your phone number and they won't let you put the dashes in between your numbers, that's because they're only accepting numbers into that database. So I'm going to put texts because I like being able to put those dashes.

Let’s do Bio, we'll just say they have a bio or once again, we’re going to choose Texts. Technically you could choose Rich Text here, it's up to you. We're going to utilize text. Then Profile Picture this one is going to be the Image field type. So we're going to go here and click Image because it's going to be a profile picture. So now that we've got these things, guys, we've added fields into our database.

Creating Dynamic Page

Now what we have to do and how I told you, we're going to create a dynamic page that will enable us to display the data, to create a dynamic page specific to this member profile data. You're simply going to click on this gear icon and click Add a Dynamic Page. So what this does is it will start creating a dynamic page specific to the data on that database. You're then going to click Start Creating, and then you choose whether you want an Item Page or a Category Page, being that we're collecting an individual profile data page here, we're going to want an Item Page because it's an individual's page. So then we're going to click Next.

We're going to choose and set our URL. So you can have this as the URL for that specific user. So it will always say the name of the database, MemberProfileData. And then you could choose what this ending a little field type is here. So if you want to Title, you can do title. If you don't, you could change it up. You could change it and click Add Field, and maybe you want it to be their Full Name. So you want it to be ‘/MemberProfileData/FullName’, whatever that full name is in the database that they input we'll use full name. And then you click Create Page it's then going to go ahead and add a completely blank page here.

So when it adds a completely blank page, what this means is you have a completely created freedom, so you can do whatever you'd like on this page, but you'll see it added a dataset to the page. So by clicking added dynamic page from that database, it'll automatically create a dataset from that database. So that way you don't have to reorganize it specific and go into the dataset settings and then assign it to that database. But this is just a quicker method to that. So it gives you a dataset and the rest is up to you.

So let's just go into Text. I'll just add a bunch of just, I'm not going to design this all sexy guys. I'm going to keep it very simple. So we'll just say Full Name right here and you can style this. I need to emphasize this. You can style your dynamic page however you want. The only reason it's different is because the data is dynamic. So each page will change data-wise. The design will not change across your dynamic pages, whatever your first initial dynamic pages is what the design will be across all of them connected to that specific database. The only thing that changes is the data displayed on each of those pages.

So we'll do ‘Full Name’ then we'll do ‘Email’ and then let's just go right under it. Then we'll do ‘Phone Number’ and then I'll get a bigger piece of text for our bio and I'll make it wider. I'll add it in here. I'm going to go ahead and I'm going to center it. We're going to go back up here to ‘Lato Light’, ’Bio’.

Then we need our profile picture. And for this, you could just bring in a random image for a placeholder, know that whatever you choose in here does not matter. It is just simply a placeholder image for right now. So it does not matter what picture you come in here and choose. I'm at least going to get one that represents me. So that way I can help you better understand this and get a scope for what this is, but it does not have to be anything that you want across all the pages. The only thing that has to be set is the style you want it to be. So if you don't want it to take up the whole page like that, you could come in here to Settings and you can change the proportions, auto fill it.

But what I'm going to do is I'm going to click it, double, click it, and then it'll open the image settings and you could actually choose a shape. So I'm going to choose that circle kind of like the profile page. And I'm going to crop it up a little bit, to be like a profile. Then you can drag the picture. Now I don't want it to necessarily be that big. I'm going to go ahead, do just like that. And then I'll press that Apply. And then bam! Now I've got the picture right there. I could resize it and we'll just throw it right there, we'll throw it under for the sake of this.

Connecting Data

So now we've got our information, what we have to do to actually make it a dynamic page is connect this information, these little fields to the fields in the database, and the dataset here is our glue. It's what helps us connect these text fields and these image fields to the data in the database. So by doing that, we're going to click Full Name. We're going to press Connect to Data on these three little buttons. We're going to see it's already connected to that dataset and texts connects to Full Name, and then you'll know it's successfully connected when it turns green.

We're going to go through it and we're going to do that for each one. We're just going to correlate it to the corresponding field in the database, Email connects to Email (Text), Phone Number connects to Phone Number (Text) in the database, and then Bio connects to Bio (Text) in the database. And then finally Profile Picture connects to Profile Picture (Image) in the database and just like that, you're all set. And then you could click Save. And we'll just say ‘mysite-9’, I guess we'll save and continue.

And then now I'm going to show you what it will look like if I throw some data in the database, just as a sample. So I'm going to go into the Database. I'm going to go in. That's about it for building it out. Now, I'm just going to show you the finished product. So now I'm going to go in, I'll just name my name, email, If you guys want to email my team and I to build out a project for you, go ahead and feel free. Let's throw a number in here. “Hey! We are a creative agency!” And then our profile picture, I am going to go ahead for the sake of this and use a different picture. I do like that picture of myself, but I'm going to use a different one, just so you could see how it changes. I'm going to go ahead and use that one right there. It's going to upload.

Then I'm going to add it to a database now to make sure it worked. I'm going to go ahead and press Sync up here. And I'm going to Copy all items (Sandbox). This backend editor database is the sandbox to the live database. So now if I do this correctly, what I can do is I could go to Publish, right? And then I could go to View Site and remember what that URL was for the dynamic page. It was ‘/MemberProfileData/Michael-Strauch’. And now you could see that the dynamic page has been created. And I have a unique URL for my specific page. I said, anyone on the site can go to it, which means if I type this in and it was members-only, I would have to sign up to be a member in order to view this. But since I clicked Anyone for the database permissions, I could just type it in directly and see it. And we could see our data changed on our dynamic page to the corresponding data in the database. That's exactly how that's done.

Conclusion

If you have any questions or you want to get more creative with this build out a sophisticated Wix website go ahead and email my team and I link in the description below. If you guys enjoy this video, throw a thumbs up. Subscribe, if you haven't already, I really appreciate it. I love you guys so much! You're an awesome community and I will go ahead and catch you on our next video! Comment if you have any questions, whatsoever. Thank you!