Sigma Hosting
Menu
Weekly Wix Wednesday Tips- https://www.weeklywixwednesday.com/
————————
I have finally released a video that you have all been waiting for about creating a custom log member profile log in page in Wix. Wix Code gives users the ability to create a custom log in page so that users can conveniently log in and out. In addition, it gives users the ability to access their profile pages.
That brings up the second phase of this video. You can now use the custom member log in page to create a profile page in Wix or custom member dashboard. Either way, they all start with a user creating an account and logging in.
I hope this video finally clears the air for some of you out there. If you have any questions, please comment below or email us at: info@wixmywebsite.com
Also, if you are ever interested, my team does build custom Wix websites and we are Wix Certified as well as Wix Megastar Winner from 2017. We are Wix Code developers that can also build you websites utlizing the newest tools available on the platform. If you are interested, feel free to reach out via email: info@wixmywebsite.com
———————————————
Custom Log In Page Code: https://docs.google.com/document/d/1m3-ogA8dGjt3jXMxFVawUYlAe55ZI7CvlJhF_2SEVbc/edit?usp=sharing
Building A Database In Wix: https://www.youtube.com/watch?v=ALKWeTQO-PE
Creating A Member Log-In Page: https://www.youtube.com/watch?v=C0tYSODE50k&t=2s
Wix Certified Trainer- https://www.wixmywebsite.com/wix-certified-trainer
——————————————————————————–
Topics Covered:
-Weekly Wix Tips Email List
-Wix My Website New Design
-Create A Custom Client Dashboard in Wix
-Adding Custom Member Log In Page in Wix
-Using Wix Code
-Signing Up For Weekly Wix Tips and Forum
——————————————————–
Stay Connected:
Email: computermdofgilbert@gmail.com
Twitter: http://www.twitter.com/WhizOfComputers
Subscribe: ComputerMDofGilbert
————————————————
Wix My Website Series:
This Wix series will have multiple Wix tutorials uploaded EVERY WEEK of 2018! Email me for any Wix troubles you may have.
——————————————–
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 amount and that’s perfect because that goes to show that you guys are utilizing Wix code to its full capabilities so 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 gonna 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 login 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 gonna do it before we hop into that guys head over to weekly Wix Wednesday comm again that’s weekly Wix Wednesday comm 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 on to 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 so before we actually get into the whole meat of everything let me first explain a few pre-record prerequisites to 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 could 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 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 someone clicks this it’ll prompt them to login if they’re already logged in it will show a logout 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 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 the database you come here click add add database and then it’ll 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 and how you’re gonna 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 gonna 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 society member author again also the person that edited or created it and then you’ll click Save once
that’s done you have your database setup 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 field 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 can 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 gonna go to add 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 page 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 data set 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 gonna 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 we’ll choose read and write and then you’re set for the data set 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 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 save an 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 wanted to
say submit click Submit and then when successful navigate to and I chose a link and then I just have it going back to member login you can have a go to whatever page you’d like so once you have that set up you now have your dynamic page setup 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 so we’re gonna 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 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 which users import which data import Wix location none of this has to be edited this just shows the back end 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 ok so we see right here SW on ready and this is for the logged in button so for this login button you want to get the value of that that is button 4 so we want button 4 here and then if the user is logged in it’ll show logout you’ll see dot label logged 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 login and you want that also again to be connected to hashtag button 4 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 dot hide and again button 5 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 can 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 and events on click in this case I have already added mine so you just simply you see if we see Mouse out you would click this add button next to on click and you would type in your
button name whatever your button value is and then underscore on clicked 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 it provides what you need to do is you need to change this right here to whatever your button value is so mine is button for you change yours right here this little section of code to whatever your button value is make sure you add it 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 is but if I 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 on 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 user ID let user email and this will check the winch 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 database is 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 remember profile and that will be the name of your database so 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 a non click function again this time you’re creating an on-click 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 are you an 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 wicks 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 our SC AR will go into our page info and this is the dynamic page URL we will see mine is named member profile slash update back
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 okay but then we’ll see we need to change it to back slash 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 can 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 profile slash back slash update back slash ID we go back to our code and we’ll go down number login and we’ll see mine is back slash member profile bash last update and then you’ll see some confusing code here but you’ll see the main thing is dot ID this dot
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 when it back slash whatever your database name is back slash 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 your that database name but if you follow what I
just said and you make sure it correlates to this dynamic page URL by going here whoops by going there settings and then we’re at page info and it says back slash member profile bash / update bash slash 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 cost member login page I’m sure
some of you are probably still gonna 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 gonna 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 gonna click login bingo it takes us prompts us to log in will 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 a change in 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 change this to I like this code and then I click 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 which 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 Wix my website comm if you feel like you’re ready to just hire out a team to build this out for you or maybe
you don’t have the time or maybe you 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 computer MD of Gilbert but if you want to do it your honor yourself and you do want to learn more about Wix and how to utilize these different
resources head over to weekly Wix Wednesday comm again that’s weekly Wix Wednesday calm link in the description below and get on this email list guys I sent 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 shoot me an email info at Wix my website comm other than that I hope
you guys have an excellent rest of your day