Are you finally ready to learn how to create a custom member profile login page here in Wix? Well I'm finally here to give you that answer.
I know most of you have been asking me this crazy amounts and that's perfect because that goes to show that you guys are utilizing Wix code to its full capabilities too. I'm excited to finally deliver you this video. So the question asked is how do you create a custom login page? And I'm going to explain it here in this video. And when we define login page, we mean a page where they could go click login, it'll have prompt them to log in, or if they're already logged in, it'll say my account and they could click my account and go to their profile page. And you guys can style this page however you want in this video, I'll show you how we're going to do it.
Before we hop into that, guys head over to weeklywixwednesday.com. Again, that's weeklywixwednesday.com we're here on that page. Now this is an email list designed to help you guys. I created this list. So I help people just like yourself, learn new Wix tips, tricks, and tutorials. And I send them out every single Wednesday in the form of an email. I've helped so many people already. And thanks to you guys. More people just keep adding onto that list. And I love watching all of you progress over this period of time. So go check that list out and get on it if you haven't already. Now let's hop into the meat of the video.
Create A Member Profile Login Page
So before we actually get into the whole meat of everything let me first explain a few prerequisites in this video. One you need to be able to know how to create a database and already have one set up for your member profiles. And then you also need to know how to create a dynamic page off of that database. Now I'll briefly run through it in the video to explain certain elements that connect to the login page. But again, it's expected that you already know how to do these things. If you don't, I will link my two videos explaining how to do them in the description below. And you can check those out if you haven't already.
The next thing is I have provided you guys a Google drive link to the code to actually go ahead and access that code to put it on to your custom member login page. So this is the code that we're going to be using. It's JavaScript. And this is well I'll show you exactly where it goes, but this is the exact code. You will just need to change certain buttons or values as I show you in the video. So this is the code we will be using. Now let's go into the actual website.
LOGIN PAGE
So you'll see right off the bat, I created a page and I named it member login. So this would be the login page. Now you guys can design this page. However you want, just know that you need two buttons on this page to work with the code that I have provided. You need a login button and you need a, my profile button. The login is pretty self explanatory. If someone clicks this, it'll prompt them to log in. If they're already logged, it will show a log out button. You don't need to create a separate one for that. It'll show it based off of the values we provide in the code. The ‘my profile button’ will only pop up when the user is logged in this, my profile button will redirect them to their profile based off the dynamic page. Now I know that may seem a little complex, but that's where we're at so far.
DATABASE
So now we're going to need to create two things in this video, prerequisites, you need a database in our database. It's very simple. We have a database that has full name, email profile, picture bio. Now in this video, we're only going to use three of these. We're going to use full name, email, and bio, and I'll show you how to connect that to the dynamic page. So to simply create a database, you come here, click add, add database, and then it will run you through and ask you what the permissions are. Now, let me show you what those permissions will be, by the way you can name your database, whatever you want. It doesn't matter what you name it. Just make sure that you know what the code name is and how you're going to access it and know that all of your member profile information will be located in that database.
If you come here to this settings button, we're going to edit permissions. I'm just going to show you this early on in the video. So that way we can focus strictly on the login page. So you'll edit permissions and you'll change the collection type to custom use. When you get there, you'll see who can read the content from this collection. You'll choose anyone who can create the content from this collection. You'll choose site number, because again, it's going to be a member login. So you only want your site member to be able to access and edit this data who can update the content from this collection site member, author. So this means the person that originally created it is the person that can update it or edit it and who can delete it? The site member, author. Again, also the person that edited it or created it.
DYNAMIC PAGE
And then you'll click save. Once that's done, you have your database set up again. If you guys don't know how to add fields in your database like this, you simply go here to this add button, add whatever fields you need, and then choose the correct field type as follows. Again. If you haven't watched my database video, please go do that separately. Now, the next thing you'll need to do is you'll need to create a dynamic page for this database collection. You'd simply come over here to database and click add dynamic page. You can also do it by going up here to page manager, clicking manage pages, go to this right here. And it says dynamic pages normally, except I already have one connected and you would click add a dynamic page, but to ensure that you get it from the correct database collection, come here to member profile, click that little settings, add dynamic page.
Once you get that, you'll then have your dynamic page populated, and then you need to add content to this dynamic page. So to do so you're going to come in here. You're going to go to ad and you're going to go to user input and you're just going to create, use the user input forms that you need to get the data, to get the information that's needed from the database.
Now, when this dynamic paid is also created, you'll get this data set. This will automatically populate to your dynamic page. And this is your glue. This is what connects the information that's submitted in this form to your database. And what displays that information right here on this page from your database. We're going to double click on this dataset. We want to make sure it's connected to member profile, which if you do it, how I said of dynamic page and click that settings, it will automatically do that. You can name the data, set, whatever you want, and we're going to choose, read and write because whatever we display, whatever information we submit in these forms right here will display automatically after we've logged in. So it'll be kind of like we can edit that and it will also display that information. So let's use, read and write, and then you're set for the day dataset.
After that, you need to add the fields. These custom input fields should correspond with what's in your database. So you see, we have full name, email bio, and then we have a button. And this allows me simply come in here, click this little connect to data, and then you'll change it in value, connects to full name. And you'll do that as follows for each of these email, you would do that. Connect to data, email bio, you do that. Connect to data bio.
Now for the submit saving update button, you'll come in here, connect to data and you'll choose link submits to our link, connects to submit. You'll see a couple different options on here, but you want it to say, submit, click, submit. And then when successful navigate to, and I chose a link and then I just had it going back to member login. You can have it go to whatever page you'd like. So once you have that set up, you now have your dynamic page set up.
So that way, when a user inputs information here, it will be submitted to the database. And then once you come back to this page, because it's technically the, my profile page, that information will be displayed in these little fields as follows. So now that we have those two prerequisites out of the way, and you know how to create your database and then your dynamic page, we can now go into our member login and now we can start to edit the code.
MEMBER LOGIN PAGE
So we're going to open this up right down here. And that code that I provided, you'll add down here to member login your login page, the page code, not the site code, the page code you'll input, all of that code, as I did just copy and paste it in here. Simply as I have showed you and provided you. Now this top part input import, Wix users import port data import, Wix location, none of this has to be edited. This just shows the backend in Wix. So this will pull the JavaScript will automatically go pull the information from the Wix servers, which databases to ensure that it pulls the correct information from your website. So that does not need to be changed.
However, we get to a part that does need to be edited. And it's very simple. The code I have provided you is literally changing a few names to a few different buttons. Okay? So we see right here, $W.onReady and this is for the logged in button. So for this login button, you want to get the value of that. That is button four. So we want button four here. And then if the user is logged in it'll show, log out, you'll see dot label, log out. If they're logged in, we also want them to see my profile. You'll put button five or whatever your button value is right here. That will be that show.
And then it says else, this means if they're not logged in, we want that label up here to say, login and set a logout because we want them to log in. And you want that also again, to be connected to hashtag button four, you'll see that little value right there. And then my profile. We don't want that to be visible because if they're not logged in, we don't want them to be able to access a profile. So it says hide and again, button five. So it would be the same style up here. You just change, use these same button values and just do the same ones right down here. And it's that simple for that section.
Now, what we need to do is we need to create an on click function for our buttons. This means when someone clicks login, we want an on click function. So you'll see right here, we have a properties panel. So to access this properties panel, if it's not up already, you're going to go up here to tools and you'll see developer tools, you'll see properties panel. You could turn this on and off. We want it on. So for this login button, we want an on click function and you'll see down here in events, on click. In this case, I have already added mine. So you would just simply, you see if we see mouse out, you would click this add button next to you on click and you would type in your button name, whatever your button value is, and then underscore on click. And you would type that in.
It would then add an extra piece of code down here. You don't have to use the code that provides. What you need to do is you need to change this right here to whatever your button value is. So mine is button four. You change yours right here, this little section of code to whatever your button value is, make sure you add it here. And then you add it right here. And then once again, you scroll down the page and you'll see once again, we want our login button, button value here, button four, we want the label to say login and then my profile, whatever the value of that button in my case, it's button five, hide. If we scroll down, we'll also see our else property. Again, we don't have to change anything with that. So that's all set. By the way, just to show you, when you create an odd click button, it will add an export function down at the bottom of the page.
You do not need to worry about that right now because you already have it added up here. What I'm trying to say is I've already given you the code. However, when you click on click and add that value, it will add another piece of code at the bottom of your list. All you have to do is simply copy that and delete it. This is an actual piece of value I need right here, but you just delete it because you just add it up here, just make sure you change the button name to the correct value. So now you've got your login right there and then it says else, and then it will check. Let use your ID, let use your email. And this will check the Wix back in.
Now we will get into a new section where it says we're actually logged in and we need to change the next thing. This is the return query. You'll change this piece of code right here to whatever the name of your databases. Remember, this is case sensitive, JavaScript code is case sensitive. So in my case, it's member profile. So we need to create member profile. And again, it's capital M capital P. So we'll copy it in exactly how it is right here, member profile. And that will be the name of your database. You'll make sure that correlates with the name of your database.
And then we'll scroll down and we don't have to change anything for awhile, except we come back here. And again, we need to change it to the name of our database, this piece of code right here. And in this case, my database name is member profile. So you need to change it again. It's case sensitive to whatever the name of your database is. Bingo, just like that. You're good. And then we are going to update those buttons one more time. So again, we follow the same pattern, whatever the value of this button is your whatever, the value of your login button that's first, and you'll change that to button, whatever number it is. And then my profile, once again, mine's hashtag button five, yours will be whatever that button value is. And you'll put that right there.
And then we have our very last section of this code and you have to create an on click function. Again, this time you're creating an enclave function for my profile. This means when someone clicks my profile, this function will be carried out. So this is actually an important on click function. So once again, you would come in here, you would click, add on click again. The values button five. So it'd be button five underscore on click. I have already done it in mind. Once again, being that I have already provided you the code, it doesn't recognize that. So it will try to add another piece of code right under this, just delete that extra piece of code that it provides and make sure you change this value to that button value.
So if yours is button six, change it to button six. If it's button to change it to button two, but just make sure you change this value right here to button, whatever it is. And then I have already added that on click little addition for you in the code.
Once that is done, you'll see something right here. This part is very important. It says Wix location dot two. So when someone clicks this button, it needs to direct them to their member profile page in order to do so. We are using the member ID provided. So we'll see right here, it has the extension slash member profile slash update. This is the link that the dynamic page uses. So we have to make sure we use this link right here. So if we go back to our member our dynamic page and we click settings, we'll go into we'll go into our page info. And this is the dynamic page URL. We will see mine is named member profile slash update bash slash ID. Okay. So this first part of it will stay whatever your database name is. So whatever your database name is will be right here, the dynamic page will auto populate that name.
But then we'll see, we need to change it to backslash update. You have to manually put that part in and then we could change the value here. You can see, I have it as ID. You want to have it as ID as well. If it's not already ID what you do is you simply delete what you have in there already. And you could go right here to add field and you would click add ID and you can see it populates it just like that. So if we go back to our code, we'll see again, it's member profiles slash backslash update backslash ID. We go back to our code and we'll go down number login and we'll see mine is backslash member profile backslash update. And then you'll see some confusing code here, but you'll see. The main thing is ‘.id’. This ‘.id’ ensures that it transfer correctly, directs the user to their profile page based off of their ID based off of this dynamic page code. So yours should be what bash slash whatever your database name is, backslash update.
And then other than that, you just, you don't have to change a single thing in here other than making sure that it correlates to the exact URL you have in here. And it correlates to your dad database name. But if you follow what I just said, and you made sure correlates to this dynamic page URL, by going here, by going there settings, and then we're at page info and it says backslash member profile backslash update backslash ID, then you will have no problem at all. And then it will be simple as that. And then your code will spit out correctly and take you to the correct page.
So that is changing the member login page go that is creating a custom member logging page. I'm sure some of you are probably still going to have questions after this because I know it may be kind of tough to follow and I'm here to answer them. So write them in the comments. But before I finish up the video, I just want to give you a little preview of how it works.
So we're then going to go ahead and press publish. And now if we go to view site, we will see if we go to member login that I am not logged in yet. So our code is already working. You can see, we don't see that my account button yet because I'm not logged in. So we're going to click login. Bingo. It takes us, prompts us to log in we'll log in or create an account. If we haven't already created an account, put my password in and then you'll click log in. And then look at that. When you log in, it changes this to log out and to change. And it then shows my profile. If we click my profile, bingo, it takes us right to our dynamic page. And I already filled out this form. However, I could change the information if I change it to Joe Schmoe. And then I changed this to, I like this code, and then I clicked save and update. It will take us back to the member login page.
And then if I click my profile, you can see this information is now changed, just like that. And if we go back to our member login page, say we're ready to log out. We click log out and then just like that, you've logged out. And it's that simple. You can log back in, or you can then exit the site. That is how you create a custom member login page here in Wix.
Conclusion
Guys, if this video helped you out, please drop a like down below comment if you have any questions at all and also feel free to email me, my team is here to help you out and we are available for hire. So you could send me an email info at wixmywebsite.com. If you feel like you are ready to just hire out a team to build this out for you, or maybe you don't have the time, or maybe you just really like utilizing different teams or agencies to build out your custom work, we are more than happy and more than ready to take on the job. So feel free to reach out to us. I'm happy to help. We're happy to help.
And don't forget to subscribe to me here on ComputerMDofGilbert. But if you want to do it, you're yourself and you do want to learn more about Wix and how to utilize these different resources. Head over to weeklywixwednesday.com. Again, that's weeklywixwednesday.com link in the description below and get on this email list.
Guys, I send out valuable content, just like this, every single Wednesday to up your knowledge and Wix. But once again, thank you for watching this video. And again, if you're interested in having a team help you build out this work for you, send me an email info at wixmywebsite.com. Other than that, I hope you guys have an excellent rest of your day.