Corvid Basics: Create a Database, Presets, Dynamic Item vs Category, Import Data

Wix code was released in 2017 since then it has received a major facelift super enhanced functions and features and a rebranding with a totally new name corvid by Wix I'm going to take you back to the basics it may be overwhelming to start using a brand new system that you've never used before whether you've coded in the past or whether you're brand new to coding i'm Coquina le let me walk you through Corbin and show you how it inspired totally codable [Music] first things first let's dive right into the editor and start exploring so I can explain to you where to find all the bits and pieces that Corbett has to offer what they're called where they are and I promise this time I won't do it like my first video in 2017 I will try not to use words like glue or doorway or Wow somehow this is working and I don't know why this time I will try to use all of the correct and technical terms so that Wix approves this video if you haven't already go ahead and open up a blank editor page or sit back and relax because you can pause this video and return to it at any time or if you're watching this on YouTube go ahead and click on add to playlist so you can come back to it whenever you have a little bit of extra time to watch it in the editor the very first thing that you have to do to access Corbett is click on developer mode up at the top menu and enable it this turns it on and off it does not mean that it shuts corvid down it does not mean that any code stops working all it does is launch all the Corvette's system so you can start using it if you are a developer and you have experience coding then let me explain to you corvid on wigs is magical you don't have to code every little single piece and every single element on the left hand side you will see a menu I call it the bubble menu I have no idea what Wix calls it and further to the left you'll see a site structure panel this site structure can be toggled on and off so that what you can basically open it and close it you do this by clicking on this little arrow at the very bottom of the page you hide it and then you show it when you have Corbett enabled on your site you can navigate your site through either this menu the site structure or the menu up at the top in the bubble menu if you click the Add button to add an element to your page look down towards the bottom of the list and you will see user input elements when you click on this you will see many different options to use try not to get too disappointed if you don't see some of these in your editor some of these are still in beta testing so they're only available on some accounts from here you basically choose any elements that you want so that way you can start building whatever it is that you want to build using corvid for example if you want to build a form you can add some user input elements this means you don't have to hard code the elements they already exist for you you can only use the elements that are available here you cannot recreate new ones unless you're using HTML code which is possible from the menu you go down to the bottom click on more and then click on HTML iframe from here you can add code in the HTML iframe and then manipulate that code or work with the code via corvid now let's go to the site structure on the site structure you'll be able to add public back-end node modules and any databases the node modules are basically packages you click on install the package and then you can search through all the node modules that Wix already has pre-installed in their system or pre-configured so for example if you want to go search for lodash you click install so that it installs it on this site and then uninstall anything that you no longer want to use oh wait this video would not be complete if I did not have my daughter peek in and say hello same as she did two years ago when my first videos came out back to the tutorial this is where you would add any back-end code the public files would be here you can add a new file here or by using the plus sign for the databases you can add a new collection now this is where it gets a little bit confusing because Wix changed this set up I'm going to walk you through adding a database right now click on at new collection and from here we're gonna start creating it will give you the option to use the preset or to start from scratch I personally don't like using the presets because they're not as customizable let me show you the difference between the two it'll give you different options they'll look like templates team project nears a list a portfolio the most popular is a list so let's click on list and open that up it'll explain to you a little bit about what it has and what it will consist of it'll have page it'll have an item page and it'll have collection once you click Add to site it will create those components for you now that it's been added I'm gonna click preview this is the page that was automatically created because I clicked on the preset notice that it has a basic layout not much of a design you get to design it however you want from here because we're creating a list template it has a repeater this repeater has different objects that are already connected to a data set this data set makes the connection between the page and the database it tells the database what information you want to pull and display on this page because we're creating a list page more than likely you're going to want to display that one single item in its own page a dynamic page was created a dynamic page will show one item at a time but it will be this same exact layout and design for all of the items so because it's the same page the only way to identify between one item and the next is a unique URL because we created the preset a URL was automatically created for us let's check out the pattern by clicking on the Settings and viewing this part as you can see the URL dub is chosen for us was dot-com slash items with a capital I slash title this URL pattern is assuming that every single one of our titles will be completely unique and it'll never be the same meaning if I had a title that was called Girl Scout cookies on sale I will never be able to use that title again because then it will break the connection and the Paige will appear to have an error even though it is two completely different items but because they have the exact same title our database is not going to know which one it's supposed to show so therefore your title in this case with this URL pattern will always have to be unique another way to make it unique is by removing the title field clicking add field and selecting the ID the ID is a unique number that will never be repeated that gets automatically assigned to each item notice here that our unique ID is a bunch of zeros with one in the end and then a 2 and a 3 and a 4 and so on this is what happens when you use a preset those are the types of ID numbers that you get now can we rename this database no all we can do is remove the collection and start over again but because this was a preset on this database is collect connected to this dynamic page and this list as soon as we click remove it'll remove all of the connections I'm going to go ahead and remove the collection now remove the dynamic page and remove the list the list must be removed from the regular site menu and so now let's go back and create a custom database collection from scratch first I'm going to give it a name preferably I'm not going to use any capital letters why what we just saw the URL pattern from the preset and capital letters don't really look good at the end of URLs people are not used to them they're not easy to memorize if the capitalization is wrong the URL will be marked as a broken link and we don't want that let's go ahead and select a name I'm going to choose the word product all lowercase from here this might get a little bit confusing because it'll ask you what type of collection is it going to be site content form submission etc etc etc all of these are very confusing I usually just go all the way to the very bottom and click custom because now I can read every single one other permission and select the ones that I do want and skip the ones that I John so let's set custom permissions from here who's going to read the content from this collection once I insert information into the database collection and it's being displayed on a page who do I want to read that information anyone I'm going to select any one because it's going to be a public page it'll be a listing so I want all the public to view that information on my page now who's going to create it it depends on who your audience is going to be how you're going to receive and store that data for now I'm going to select a site member meaning they have to be logged in they will have to be prompted to log in in order to save that information in my database collection who can update it well since a member is creating it and I want them to come back and continue editing only the information that they created I'm going to select site member author and who can delete it I'm gonna select admin for this one I'm going to click set and create collection now our database collection has been created it's completely blank and if you notice it looks sort of like a spreadsheet so from here you're able to add as many columns as you want these will be fields inside of the database collection so for example if I'm creating a listing site I'm going to ask for maybe basic information the person's title the person's first name the person's last name and all I'm doing is clicking the plus sign just so I can have a field oops I misspelled this one let me go back and move to the trash and now it's gone let me add it again notice that in the field name I can add spaces this is just a label this is so you can know what this field is but down here depending on what you type on the top a field key will be created the field key has to be unique think of it like a URL every URL has to be unique so we need the field key to be unique because if we're going to be connecting it through code either through a data set that we saw before or connecting it manually we have to have a unique field key that way our code knows what database collection is looked through and what column to look for since I typed in the word last name a field key of last name no spaces with a capital n was created for me but I can change this if I want to I can remove the word name and just leave the word last my label stays the same so that way I know it's a last name but my field key is a lot shorter now the field type is very important you have to tell the database collection what type of information is going to be stored in this spot is it a regular text is it a number an address audio a boolean basically a means true or false maybe they've accepted Terms and Conditions then they'll put a check mark and it'll be true or if they did not it'll be false because it'll be blank maybe it's a date and time document and image and on and on and on you can look through all of these references these keep changing for sample audio is completely brand-new media gallery now we have the ability to add multiple images in one spot in one field versus only one single image so keep coming back to these and look at all the new types of fields that are being released so that way you can upgrade and update your database collection let's say I choose number 4 now and I click add but I changed my mind I accidentally added number but it's the last name so I need a text I can go back click manage field and change it a text it will give you a warning don't be scared this warning is simply to tell you hey you're about to change this so it might break some stuff in different pages or in different places where you have this field connected do you want to continue just put yes if you know you messed it up then you're going to have to return and check all those other places to make sure that all the connections are correct so you continue adding as many fields as you want this is one record you can add a second line to make a second record third fourth and so on you can add each record manually or you can import records the way that you import right now is through this import button there is no other way of mass importing unless you do it manually via code and you run a loop through your code that way it triggers each record and it starts inserting one by one so the import button is on the top right corner if you click on that and you click import file you'll be able to choose a file and you have to choose a CSV if it's not in CSV format you will not be able to select it I'm gonna click a sample this sample was provided by Wix from here you have to carefully go through each column that was detected in the CSV so it found a column called first name and now it's telling you where do you want that column to be associated with it can be an existing field or it can be a brand new field well it automatically selected existing field because it noticed that I already had a column that I labeled first name so this one is done then the second one last name existing field it's going to be connected to last name an email is a brand new field I don't have an email field just yet so it's going to give me the option to label it update the field key if I need to and select what type of field it is it auto-detected that an email is going to be plain text so it already selected text for me and you go down the list one by one once you verified and check that each one is correct you continue to the next screen you'll be able to visually see where each item will be imported make sure that that's correct and then click import there are limits to the import and those limits keep changing but your database can hold as many records as you need there is no limit except now that we know of once it's done importing you will see all of the new records that were imported John Doe John demo at wix.com you will also see a lot of blank rows I created those rows with you only a few minutes ago because I don't need these and I don't want it to cause errors in my dynamic page I can right click and delete or let's say I needed a copy of all these because I was going to edit a few details I can highlight the rows right-click and click duplicate and now I have two let's check under the visible fields this will allow you to basically hide and show different columns maybe I don't want to see their name their phone their address country or company I just want to see their favorite color and what city they're from and I want to see the ID the ID is the unique number that was created when we created that record notice how it's a really long number dashes in the middle there will never be a duplicate because Wix native code automatically creates this ID for us let's go back to the visible fields from here there's an owner field this is associated with the person that is either logged in or is a guest on the site and is not logged in but created a record for your database this ID is mine it belongs to me I noticed that I am the owner of all of these records basically I'm the author so if I had a setting on one of my pages that said only the author is allowed to edit their information then I will be allowed to edit all of these records because I am the owner of the records can add a filter and look for maybe just John because let's say I have like 10,000 records and I want to find John well John was not found because I was searching the title field I don't want to search title I want to search first name and now it'll show me all the John's in my database from here you can remove the filter and see all of the records again you can sort so you can view them in a different order but sorting them here will not sort them on different places on your page each page will probably have a data set connected or manual code so either in the manual code you will physically type in the word a send title or descend last name that way you can tell it what ordered or in the data set you would just select native filters that it has changed the settings and then change the order now while we're still in the back end of the database let's talk about the sink it was so confusing for me two years ago no idea what it was I just knew that I had to click it your sandbox is like your play area this is where you're gonna test code sometimes you're going to test with fake information like this sometimes you're going to test with real information meaning you imported all of your data from a CSV but it's stuck here in the editor until you send it over to your live website we cannot sync it just yet because we have not published our site if we click on the sync button it'll give us different options it will allow you to select an option and you'll be able to click sync and it'll supposedly do it it gave us a little check mark I didn't do it if you click on the live button it does not know how many databases I have it does not know what fee I want in my database collection until I published first so let's publish and now it's live so the sandbox is now matching the live version so now it performed the sync I can't edit this live information it is all grayed out this sandbox data lives in your editor so if you were to change this name it will not change it in your live database now you could sync it every single time but that wouldn't be really efficient the best way to do it is go straight to the live data click on that little button it'll open up your dashboard now if you notice there's the big giant plus sign over here it makes you think that you can add a new database collection from your dashboard but right now you can't try back again later maybe they will release this function soon you'll see a big giant grid of all of your collections right now we only have one the product one so I'm going to open it and this is a live information from here I will be able to edit the info now that I changed the name if you notice up here it says all changes saved saves automatically so you don't have to worry about pressing the Save button if I make the change here Harry to and I go back to the sandbox it will not update that info again cuz it's not syncing and click on sync and then I'm going to replace everything with all of my items from my live database back into the sandbox voila now we have Harry - now let's create a dynamic page we can create a dynamic page from a couple of ways first let me duplicate this home page from here I can click on the settings wheel and then I can set it as a dynamic page it'll ask me which one of your database collections do you want to link it to I'm going to select the one that I have and I'm going to create an item page it gives me the option to set the URL pattern remember it has to be unique in my case I select the ID to be part of the URL so right now my URL pattern for my dynamic page will be calm slash product slash ID I'm going to create the page the page went from the regular pages and got bumped down to the dynamic area I cannot change this label I don't know why and I cannot change this label either let me go to the database called product and click on that settings wheel I'm going to click on add a dynamic page this time let's choose category page I'm going to click on next then I'm going to set the pattern product and let me try selecting the ID once again it'll give me an error it's there's a conflict there's another URL that has that same exact pattern product slash ID well let me try changing the last variable once again and let me select country there's still an error but why well even though we did select a brand new variable the product slash is being used by a different dynamic page so we actually have to change that so let's add another word group slash country now it's completely unique there is no other pattern that is matching the same one now I can click create page the first one was a dynamic item page it will display only one single item every single item will have its own page this secondary page that I created is a dynamic category page well that means the specific variable that I selected in the URL pattern will act as a filter because I selected the word country it's going to go through all of my items in my database collection and it's going to find all the ones from the same country and group them together so that way when I display them on this page I will see all of Israel all of Lithuania Ukraine United States right now I don't have any good thing on my page so let me add a quick repeater you can look at my repeater videos on YouTube I'm going to connect this dynamic data set to this repeater so I click on the repeater let me make the connections really quickly let me hit preview here buy me a group of everyone that matches the United States this little drop-down thing might be a little bit confusing because it's not going to appear on your life website this is just for your editor so that way you can use the drop-down to preview what it would look like this is a category page it categorized or it grouped although the matching records that had this one variable in common the country so this is an overview of what Corbett is where everything's at and how to get started I know it might have been a lot and a bit confusing but it was absolutely necessary to give you the complete information based on my experience using Corbett for the past two years my name is Cody Nayeli make sure you visit totally quotable calm to practice and learn how to make your website totally codable [Music]

Channel: Code Queen

Views: 18,971

Keywords: wix code tutorials, code queen, totally codable, code queen nayeli, webix designs, wix expert, wix database, wix code for beginners, wix code search code, wix code, wix code tutorial, wix code database, wix code javascript, wix code basics, wix code queen, wix code drop down menu, wix code dynamic page, wix code let's talk basics, wix code forum, wix code community, wix code examples, download wix code, wix code page, corvid basics, corvid presets, corvid tutorial

Id: a_B-Wcdhh9E

Length: 26min 15sec (1575 seconds)

Published: Fri Oct 25 2019