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

what's going on which nation MPs here from which training academy and today I am going to reveal to you a skill and a tool in Wix that will open your website to endless opportunities that's right I'm gonna teach you how to create Wix code or corvid by Wix databases and dynamic pages using Wix and I promise you this tool is absolutely insane once you start to master it because you can create anything on your website hey if you're excited to get into this I'm excited to present it to you and I would love to have you join our Wix nation community if you haven't yet already it starts by clicking that subscribe button turning those Bell notifications on and you'll instantly plug in to a thriving and engaging Wix nation community in fact the largest global witch training community here on YouTube I'd love to see you in there but until then and tell you click that subscribe button let's jump into the content okay so we're here in the Wix editor and before you can even start using the databases and dynamic pages what you have to do is you have to go up here to dev mode you'll hover over it turn on dev mode this activates your corvid by which or wicks code development tools you'll see your page code comes up your properties panel on your side structure that's not what we're gonna be spending our time where we're gonna spend our time today first and foremost is over here at our Content Manager your Content Manager is your database manager this is where all of your data is stored to create your very first database what you're gonna do is you're gonna go ahead and create new collection you'll go ahead you'll start creating the collection a collection is a database that's what Rick which refers to as your database you can use a preset which is actually a really nifty tool it comes preset with dynamic pages already set with your database but if you'd prefer to start from scratch which is what we're gonna do so that way you get the full in-depth lesson that is fine too and you'll just take it from scratch because sometimes you don't need dynamic pages for every data set you create perfect we'll start from scratch we're gonna go ahead and give this collection a name we're just gonna call it profile and we'll just mess around with like a user profile in this database set collection ID we'll keep it profile and then what's this collection used for I'm gonna go here and I'm gonna change it to custom use however you have a couple options you've got site content this means any data that's in here anyone can view it form submission means that anybody that comes to your site member or not member can submit data if you have a way for them to submit data into your database member generated content means only members that are registered to your site can submit data to this database via a form or whatever upload submission tool you have given them to upload the data members only content means only members can view content from this database and then members only form submission again only members can submit data to this database and by the way member generating content means that member can also edit the data that they submit in the database then you've got private data and the data means that only admin or site managers can actually see the data that's submitted to the database and lastly custom use the reason I like custom use is because you get to set each of their permissions so I'm gonna go ahead and press custom use set up custom permissions we get to choose who reads content from this collection for right now I'm gonna say anyone can read content who can create content I'm just gonna say a anyone as well and then who can update anyone anyone just for the sake of this video however if I wanted to I can say the site member is the one that can create content then the person that can update that content site member author it makes sense that the person that created it has the ability to upload it and then who can delete content I'll just say so I member author because in a lot of cases it makes sense if the site member author the person that originally created it can edit that data and also delete that data but we're gonna go ahead and make it easy and we're just gonna keep it at any one so that means anyone that wants to upload view update or delete the content kind of like Wikipedia can come in here and do it and then we're gonna set and create collection once we do that which is gonna work its magic and what's gonna happen is its database is gonna open up it's gonna open up here in our dashboard because Wix has a new system that they're actually opening databases in all which apps natively in the dashboard for just a more clean modern user friendly look so now that it's open in here we see there's a title field no matter what you do this title field will always be there it cannot be deleted you can use it if you want but otherwise you can just keep it there and it'll be rendered null if you don't use it at all it doesn't make or break but it's default by Wix one of the first things I want to tell you about databases is you'll see this sandbox right here this is a very key indicator if it is in sandbox mode this is like your playground which means that any data in here can be viewed in preview mode on the editor and it'll be used in the editor to view and make sure you're on the right track when you're building out in developing however any data that's in your sandbox mode is not in your live database so if we click the sandbox you can see there's also a live version when we click this live version we can see nothing exists currently because what happens is what's in the sandbox means it stays in the sandbox it's only testing data whatever is sink or sunk over to live will show on your published website so there's two key distinctions there and you need to know that know those distinctions especially if you try to go test some of the data you've just worked with in your editor and then you go to your published website and it's not showing up that's the reason now here's the way to combat that if we go back to our sandbox simply what you would do is once you have data in here you would sink sandbox to live and then you would go ahead and sink that data from your sandbox to your live version your website has to be published in order for you to do that there's tip one with the databases tip two this is how you add fields so let's just say we're creating a user profile page with a name a profile picture and a bio what we would do is we would go ahead press this ad and then I'm just gonna name this full name and now for the field type I'm gonna choose text because it's just gonna be text it's just gonna be name so I'm gonna click Save and that's how you add a field then you can go ahead click off of that or you can manage all of your fields here you'll notice there's a bunch of hidden fields to ID owner create a date updated date these are default in which as well and this is how we extract some of your user data ID owner create a date updated date these become really useful when you're building out a website that requires a lot of member orientation a lot of member-directed content because it'll allow you to create you know client portals that shows data only to that logged in user so it shows only their data to that user stuff like that and that's where it starts to get a little bit more sophisticated but if you'd like to see a video on that just let me know so we got full name then we're also gonna add one called profile picture and I'm gonna come in here add profile picture except the field type on this one is gonna be image now if we go back to fuel-type I just want to show you this right now you can see there's a variety of different field types we can add we can add a boolean this is like a checkbox we can add numbers dates and times time itself rich text which is different than text because rich text actually allows the text to be styled in the day based at different fonts font sizes colors paragraphs bold italicized underlined stuff like that regular text cannot be changed like that in the database and will then only show as text on the dynamic page we've got multi reference which allows you to multi reference databases reference multiple databases this is a brand new field URL this allows you to pull a URL documents allows you to upload documents video allows you to upload video audio allows you to upload audio address you're able to pull from Google Maps and if you use the API PT you can actually directly go right to Google and pull up directions to an address tags allows you to create tags maybe you're creating the next YouTube there's video tags you can group stuff via tags and then media gallery this allows you to add multiple images in one time and that's what all the fields do this is a profile picture we're gonna keep it in image and then lastly we're gonna add one more and we're gonna call this bio this one we are gonna use our rich text give the person the ability to style their bio rather than just keep it standard plain old text and we're gonna click Save now we have multiple fields here in the database these fields are ready to go now we need a way for people to submit data to them and then we obviously need a way to display them which is the dynamic page however before we do that I want to direct your attention to a couple of the things if you want to go ahead and click this you can import items from a CSV file straight into your database if you've already got the fields matched up makes it really easy secondary to that you can actually export your entire database to a CSV file as well this is nifty if you're updating data a lot or pulling data a lot from your website from your database if you want to add a new item in your database you would click new item and there's a nifty upload tool right here allows you to enter full main profile picture bio this is only on the admin side if you want to give site members a way to do this you have to create a way to actually upload that submission and then lastly if you see we can sort data you can add sorting by names titles the order A to Z Z to a or you can also filter data and you can come in here you can choose tied contains name contains and you can figure out what exact data you want to filter so that way you've got some searching and filtering capabilities right here in your database you can see you can also search it as well and then that gives you the ability to search through your database filter your data do more in-depth research on the data in your database that's how you create your database now let's go back to our site and create a way to upload into that database so what we need to do to allow someone to upload into the databases we have to create a custom user input form gonna do this really quickly really easily what you'll do is you'll go to add and then you'll go down to input okay so we've got a name input so we need one for our name we're gonna go back to this we've got a upload we need an upload button so that way someone can upload a profile picture and then lastly if we go back there we also need a rich text field so we go - excuse me we go to text and we scroll down to rich text box and we pull in a rich text box this covers all three fields that we have in the database full name profile picture bio now what we need is we need to add a data set to the page to do this we're gonna go to content manager add content elements and we are going to add a form data set because someone is uploading data on the page what we do is we now connect this data set to the database itself so we'll double-click it and we will connect this collection to the profile database and it will be right only mode because people are submitting data okay so now the reason we added data set is the data set is like the glue between the data on this page that's being submitted in the database the data sets the thing that helps it carry the data to the database so that way it's stored but what we have to do is we have to connect these fields to that data set so to do this we're gonna click this little connected data button we are going to do value connects to full name because this is the full name field and you'll see it says element was successfully connected and it'll turn green when it's successfully connected then we'll come in here we'll do the same thing for profile picture connect to data connects to profile picture and it's an image field and then lastly we'll come in here we will connect to data and we will connect this one to bio which is the rich text now all we're missing on this page to make this a complete user input form that will submit data to the database is a submit button so we'll come in here we'll go to button and you can add any button you'd like I'm just gonna go ahead add this button right here and what we will do is we will connect to data this click action connects to submit and we will click Submit then here's what's cool after the data is submitted you can choose if it was successfully submitted where the user goes after that you can choose to have them stay on this page go to a dynamic page or link it to another page or web address or anchor on your website or even a document and that's the beautiful thing with the database in the data set and the sophistication behind the submit button for right now we're just gonna have it go back to the home page which is the page were on so nothing fancy is gonna happen so now we've got our form here this will submit data to the database now our last step is to create the dynamic page that will accept the data and display the data okay so how we're gonna do that is we're gonna go up here to profile and then we're gonna click these three little dots and we are going to click add a dynamic page this happens right off of our database and we'll click add dynamic page which is gonna work its magic it's gonna add a dynamic page you'll see it gives you a preset dynamic page which is nice it has a repeater on it it has some text it's got the goods on it however we're not gonna use that I'm gonna delete that I'm gonna delete this and I'm gonna delete that and you can see it already comes preloaded with our dynamic data set if we click on this it'll pull up to manage content because it's already connected to the database however we're gonna click settings and what I want to show you is the details here so you can see it's already connected and the that this data set is already on the pages because we went straight to the content manager and created a dynamic page for that specific database so we didn't have to manually do it and add the data set and all that good stuff however you'll notice that the mode is set to read only this means all the data on this page is only able to be read it's not able to be manipulated edited or added to that's what that means and the number of items this is just if you have a repeater how many items will be displayed in that repeater this is the data set for that page now we have three fields that we want displayed we want full name we want a profile picture and we want a bio the way we're gonna do this is we're gonna go to add we are gonna add text and this text is gonna be for our full name okay I will go ahead and type in full name next we're gonna go to add we're gonna go to image we're gonna go to my image uploads and for the time being you can just pull any random image you'd like I will go ahead upload I'll come pull by I'll type in MPs and there's a picture of me in Boston so we'll take this and we'll use it as a placeholder now if you'd like to edit the image on this page you can come in here you can go to crop and you can crop it you can crop it into a circle just like that and then you can press good and then bam you've got a propped circle Euler circular excuse me image for a profile picture aesthetic and then lastly what we're gonna do is we're gonna come in here to add and we're gonna add text for our bio except we're gonna use a paragraph for this because it's a rich text file usually a little lengthier and then we're gonna add that now the data set is already on the page just like with a form submission into the database we need to pull the data out of the database and display it on the page which means we have to connect these different elements to the data set which will pull from the database to do that you're gonna go over here to full name you're gonna connect to data and then you are see it's already connected to profile and this text connects to full name right here we're gonna go to profile we are gonna come in here image source connects to profile picture you can also link it if you want as well and then last we're we're gonna come in here we're gonna connect the data and text connects to bio rich text so now what we have is we have just in one simple video created a solution for you to create a database for you to have your user submit data to the database and for that data to be displayed on a dynamic page and if we go ahead and walk you through it I'll show you how it works so if we go to site menu I'm gonna go ahead I'm gonna press save and then I'm gonna go to preview and I'm gonna do it so we've got our name Michael Strauss I'm gonna add a file let's see if I can just pull a random picture I'll just pull my last thumbnail and then I'm gonna add a bio my name is MPs I love creating content and then BAM will come in here content just to throw it off make it a little different than regular text now we would click Submit or this button would typically say submit and you would design this how you want to design it well click that and then the data has been submitted and it stayed here on the home page now typically you could link this submit button to like a dynamic page or a different page on your website however what we're gonna do now is I'm gonna go to the published version or I should say the preview version of that dynamic page and see if we got our data on that page and if we preview we can see the data was now added to this as a dynamic page the full name is shown that thumbnail or profile picture is shown and then that bio is shown just like that you have created a seamless solution in this one system can open a world of opportunity on your website to create a bunch of Magnificent things using databases in dynamic pages this video helped you out I would kindly ask you drop a like down below comment you've got any questions whatsoever and lastly I would love to have you in our Wix nation community it all starts by hitting that subscribe button turning those Bell notifications on so that way you never miss any content here on the channel and you'll instantly join a thriving witch Nation community better yet we are the largest Wix nation Wix training community on the Internet and I would love to have you we would love to have you as a community and again it starts by hitting that subscribe button turning those Bell notifications on I appreciate you watching this video hope you're staying safe and healthy during these unprecedented times and I will catch you on our next one

Channel: Wix Training Academy

Views: 50,473

Keywords: Wix code tutorials, social network wix, is wix good for websites, wix training, wix training videos, profile pages wix, membership websites wix, wix client dashboards, build profile pages in wix, build social media website in wix, learn wix code, databases in wix, custom input forms wix, social media website wix, social network, create a social network, wix dynamic pages, wix.com, wix database, wix corvid, corvid databases, dynamic pages wix, wix, wix code, wix for beginner

Id: tjuBjWFBnEY

Length: 19min 47sec (1187 seconds)

Published: Tue Apr 14 2020