Play Video

Building A Social Network in Wix | Part 5 | Posting User Statuses and Debugging Session

Wix Training Academy- https://www.wixtrainingacademy.com/
————————
Are you asking: How do I build a social networking website on Wix?

I wanted to create a series to help fill a major need in the Wix market. People want to know how to use Wix Code and what the capabilities of the platform truly are. With that in mind, I listened to my community, read comments and engaged with Wix Design Pros.

Today, I am bringing you Part 4 of a multiple part series. The series is called: “Building A Social Network In Wix | The Non-Coding Founder’s Guide”

Part 5 is dedicated to showing you how to create a user posting function. The core capability and concept of a social network is allowing users to connect with one another. This is achieved through the user posting user-generated content. In this tutorial/debugging video, I explain and debug building a status posting function. This function will allow your user to upload a text status. I will be explaining how to create a picture status as well in our next part of the series. Alongside that video, I will also begin to show the creation of the feed pages.

This series is specifically made for entrepreneurs, CEO’s, Founder’s, President’s and Co-Founder’s looking to build a website for their startup or re-design their existing website. The goal is to bring you quality Wix Code training videos while also displaying the capabilities you have in Wix.

I want this series to pioneer an issue Wix is currently tackling. I want people to understand how powerful the Wix platform is and how you can maximize your online marketing efforts within Wix.

If you are interested in hiring me for your social network or Wix website project, shoot me an email: info@wixmywebsite.com and say hello!
————————————————
Series Schedule: (x1 Video Per Week) *Variable

Sunday July 15 – Part 1 | The Introduction
Tuesday July 24 – Part 2 | Planning Databases Homepage Design
Tuesday – Part 3 | Creating Profile Pages and Database Fields
Thursday – Part 4 | Building The Registration Lightbox
Wednesday – Part 5 | Posting User Statuses Function
————————————————
Topics To Be Covered:

-Creating Profile Pages
-Creating Custom Login Pages
-Giving A User Ability To Post An Update And Edit Or Delete It
-Working With Repeaters And Dynamic Pages
-Building Feeds
-Peer-To-Peer Messaging (Direct Messaging)
——————————————————–
Stay Connected:

Email: info@wixmywebsite.com
Twitter: https://twitter.com/WixTraining
Subscribe: Wix Training Academy
Wix Training Academy: https://www.wixtrainingacademy.com/

are you guys ready for part six of building a social network in Wix guys I am stoked before we get into it for those of you who don’t know one I’m a coffee fanatic okay and especially when you get to college it hits you a little harder for those of you that have obviously gone through college already you probably have had some coffee in your life if not that’s totally fine but a little shameless plug it’s fall time here we’re almost at
Halloween so some pumpkin spice iced coffee necessary for today’s video alrighty guys part 6 what are we going to discuss well before we discuss anything let’s jump right into subscribing here on which training academy hit that subscribe button right down below if you haven’t already I’m thrilled that you’re here with me I’m happy to have you here please join our community it’s an awesome place with some amazing talented people to further your
enrichment in our community head over to witch training academy dot-com click this academy button right here to register and then you can also click login obviously if you’re already a member which if you are congratulations once you get on there you get access to all my webinars courses training materials checklists a community masterminds roadmaps all this great exclusive Wix content but you have to be a member to receive it so head over there
to check that out guys let’s jump into today’s video part 6 of building a social networking Wyck so if you remember where we left off last time I showed you how to build a registration button and build that lightbox or page whatever one you decided in that video I told you that in today’s video we’re gonna build out you know the statuses feature as far as the the feed and also the login feature well you know I’ve had a lot of requests lately so
let me address one thing I apologize for the lack of you know weekly content for this series I am now back on track with that I’ve got a hold of everything back here at college it’s been a hectic six weeks getting back into I’ve released a couple videos as you’ve seen I’m but not once a week I’m hoping now to get back into my once a week schedule with that I’ve also had some requests to start doing some certain things quicker than others in this
series and I’m weighing in those options so obviously if 10 people tell me that they want this done in the series but a thousand people tell me wait no can you do this first and it’s still in line with my structure a little bit I’m gonna go with the thousand people and put that in next so with that said I’m gonna show you in today’s video how to actually build out posting a status so we’re gonna get at least the initial framework built out the
database built out and then obviously we’ll fine-tune that whole posting status as we go I will show you an image uploaded into the status next time whether that’s next video or in part 8 because next video will likely be the login in the status feed so I’m gonna show you at least how to put in a text status for right now so let’s hop into it what I’m gonna do is I’m gonna go to our profile page here ok this is where we left off with the profile
page as you can see it’s nothing sexy at all ok it’s actually very basic right now once it’s actually designed out and user generated it’s gonna look a lot more appealing but what I’m gonna do is I’m gonna add just a little icon up here I’m gonna go to add and then let’s see let’s find some vector art and actually let’s use an icon what one do we want to use let’s just say message okay so we will do this little icon right here and what this is
gonna be is when someone clicks this it’s gonna prompt the actual post a status feature so I’m gonna change the color on this just a little bit we’ll go with go this blue right here again we’re following a Twitter like format so this is not the direct message feature this is a posting a status feature so now we’ve got the icon in place let’s build out the database for boot building this whole status out so if we cut back a second here when
someone you have to start thinking in terms of this development so when someone clicks on that button something should pop up whether that brings them to a new page or a light box is up to you now what you typically see on social networks is you’ll see a lightbox pop-up and that’s where someone has the ability to actually go ahead and write their status I’m gonna show you an example this so I’m gonna go to Twitter like we are kind of mirroring
off of Twitter as I’ve mentioned to you several times and if I go and click this right here and I click tweet you see what happens a light box appears now obviously Twitter’s got a few more enhanced features in their actual tweeting abilities such as adding gifts adding polls adding location adding pictures I will get to the pictures and depending on how deep we get into this series I may even show you some features like adding a gift or adding
polls or location that kind of thing I may go that deep it depends how deep you guys want me to go into the series and how much you’re enjoying it and how frequently you’re watching it and how engaged you are and all that good stuff so this is what I’m kind of looking to build out here right now now if we think in terms of the development of this we know that for this text status in these different features right here in the tweet a database is
required the information has to be stored somewhere when someone tweets something it has to be stored somewhere in order for that to happen we have to have a database for it to be stored once it’s in there we also want people to be able to view the statuses right so we need the database to have permissions for people to view that content but also use or generate that content so I’ll show you how that works right now so if we go back to our site
here what I’m gonna do is I’m gonna go to add right here okay and I’m gonna go down to lightbox and we’re gonna go ahead and we’re just gonna pick one little random one to pull on here right now we’ll use this one right here and I’m gonna delete everything in here at the moment because we’re gonna build our own so I’m gonna change the overlay background I’m going to drop the opacity to nothing however I’m going to add a box in here and I’m gonna
go with the rounded design kind of like Twitter had there we could use this as a reference you can see it’s got rounded corners I’m gonna make it a little bigger and then what I’m gonna do is I decided you know I might make that overlay a little bit visible do that and then I’m gonna change the color of this box to this grayish whitish color and it still looks like we’ve got kind of pointy corners so that’s changed that right now we’ll go back up
here to our rounded box that was in the error on my part I was just supposed to change the color and not change the actual design of the box and we’ll come in here and we’ll add a similar color of wilton and I’ve done that there we go we’ll go with just the white we have a more off-white these aren’t bad let’s go with that card right there we’ll go that right there okay so now we’ve got this box here guys I’m gonna drag it out to the edge of our
little light box parameters which you can change and then now I’m gonna add a another portion of the box I’ll show you guys this I’m gonna come in here and just like Twitter you’ll see exactly what I’m doing I’m coming up here and I’m adding that not gonna say compose a tweet because this is not Twitter we’re not building Twitter but I will what do I want to say I will say hmm what do I want to say we’ll just say write a status we’ll keep it very
simple right now we might come in and change some of the verbage on this later but at the moment we’re just gonna keep it very simple and it will say write a status so I’m gonna come in here I’m gonna grab some text will come in here I’m gonna change this text because I do not like that font personally some of you may and I’m gonna choose one of the fonts that I use and I’ll just we’ll go with us and we’ll just write compose a status okay and
then what we’ll do is we’ll make sure it’s centered here and then I’m going to bold it and I’m gonna make sure it’s black text and okay so we’ve got compose a status that perfect so now we have the basic framework of this light box that’s gonna pop up when someone presses that button the other thing you have to do as soon as you get this light box up is go to set triggers and then make sure you click automatically display out light box on pages 2
no this means that is not automatically gonna pop up as soon as it hits the users profile page in order for it to pop up some button must be clicked in this case they’re gonna click that little icon up in the right in order to pull this little post a status light box up coffee break you gotta love pumpkin spice all right guys thumbs up for pumpkin spice okay now that we’ve got the initial little framework out let’s build the database of this so
you get the idea of that framework so what we’re gonna do is we’re gonna go up to code here and it’s already got the developer tools on however if your developer tools are not on it’ll say turn on developer tools here just to show you where that’s at and how that works what we’re gonna do is we’re going to click this little arrow it’s gonna pull out our side structure here and then we are going to have our two databases if you remember correctly
in one of the the second video we did we created a database ahead of time because we planned out our website for users statuses however we never actually built out the database we just set it up so that way we had it and knew it was over there as a placeholder because we needed to have that database as one of the main ones in this website but let’s double check something here let’s check what our permissions are and see if we got that right the
first time so we’re gonna go click Edit permissions and let’s review and see if we got them right in that first one so who can read content from this collection okay so this is a very good point here guys if your site requires a user to be a member to view statuses and post content this who can read content from this collection needs to be site member and that’s how I’m gonna set this website up so that means only site members can read the
content and only site members can post the content anyone else cannot view the content from the outside in this in particular social network that I’m building if you do want anyone to be able to view statuses or content on your website which this comes down to personal preference and whatever type of social network you’re building out you would change that to anyone so that way any site visitor could view the content that does not mean any site
visitor could post the content that means any site visitor excuse me could view the content now if we come down who can create content for this collection this is where you’re gonna want to have site member on there maybe you’re not going to want to have site member so I put the site number for this and then who can update the content the site member author so the person that wrote that tweak is the person that can update or edit that tweak and
who can delete content from this collection the person that wrote that tweet can edit delete or update that tweak and then we will click Save once we update our permissions and get those set correctly for our social network let’s build out this first set of the database now I’m gonna blow your mind with this one guys we’re only doing the text portion of the status update right now so with that said we only need to upload a status field right now
so we’re gonna name this field status and then the field type is going to be text and we’re gonna click Add now you may be sitting here like is that it is that really all we’re doing and the answer is yes that’s all we need to do right now all we have to do is create that status field and this entire database is gonna be full of users statuses text statuses only right now when we get ready to add the image section of it we will go ahead and
actually add an image section as well that will go with the text status but we’re not quite there yet because there’s a little bit of in between coding that has to happen there and I want to save that for a topic in of itself so we’re gonna do the text status right now so now that we have that built out what we can do is we can go back to our lightbox here and it’s still set to this welcome logo one and I’m gonna go back and we need to now get a
text input field so this has to be a user input field so what we’ll do is we’ll go to add and then we’ll see database and user input we want the user input now this is a text status guys so you’re gonna want a text box we will select this one right here so we add our text box now and what we’re gonna do is we’re gonna drag it out so obviously we want a text box because they’re posting a status and if we’re following a twitter like format they’re
not posting a crazy long status which Twitter is limited to 144 characters I believe they also extended that to an 280 characters for select accounts pumpkin spice baby and we can actually set a character limit on this which if you’re running a Twitter style website I do recommend doing because you’re gonna want to make sure that you maintain some sort of uniformity to your social network so you know you don’t want it to be a complete
free-for-all when you build a social network you want to build into a certain niche I don’t recommend going to build another Twitter or another Facebook or another Instagram those are three top dogs in the market now what I would recommend is if you have an idea like that but you have a unique spin to it or a unique niche or industry then go for it um but if you try to go straight up against the top dogs you’re likely you know gonna just get beat
down is the truth behind it so you got to make sure you keep a unique edge and part of that is maintaining uniformity in a good solid base to your social network um so I definitely recommend you do that so we get our text box here and then next to our text box what I want to do is I want to add the user’s profile picture so let’s go back to image here and we’ll just go to my image uploads let’s see if we could find the good old me um we can look
at that handsome fellow right there alrighty you know I definitely did not want to do that reset crop now let’s change this to the circle I’m still working Wix is still working on changing back this whole new image process I’ll be honest with you guys obviously you know I love which you know I support Wix I hate this new image cropping Bs honestly reset to original proportions sure let’s see don’t keep proportions all right there we go and you
know it’s gonna look like junk for right now it’s okay we’ll remove it later so yeah so you see what happens to the picture now on Wix when that happens but anyway it gets the point across for the point of this video we want the profile picture to be right there so we’re gonna connect this right here to create a data set choose a collection user profile data so essentially what I’m doing guys is I want to make sure that the profile image right
here is the one connected to the current logged in users account so I’m gonna add the data set and then what I’m gonna do is I’m going to double click this data set I’m gonna choose read-only on it and add a filter and I’m gonna choose is logged in user so the field owner is logged in user I’m gonna add that filter and what I’m gonna do here is I’m gonna make sure that that is linked to the profile picture so now by doing that did you guys catch
what I did there so that’s a very important step this is actually gonna save you a lot of times and a lot of different things I didn’t mean to just breeze over that so what I did is I want this profile picture right here to be the profile picture of the current logged in user tweeting in order for me to get that what I had to do was I had to add a dataset why did I have to add well I had to add a data set because I was connecting to the profile
picture that’s currently residing in the user profile database now there’s no actual user profile in that database right now so there is no picture to pull from because there’s no data in there at the moment but what would happen is is it would pull the picture profile picture that’s connected to the current logged in user now how did I make it the current logged in user well I’ve clicked on the data set it’s gonna be a read-only because the
person’s not uploading any information as far as their picture goes it’s already uploaded and I went down to filter I added a filter I choose I would choose owner the condition is owner is logged in user so that’s how it makes sure that the profile picture connects and pulls from the current logged in the user’s profile picture that’s how that works that’s a very giant step that can be applied to all of the different elements in your social
network especially in one working with profile pages and statuses and everything like that that does not just apply to this picture I’m drilling that in because that’s a very important aspect to this and you’ve got to know how to do that so hopefully you caught that if you did drop a thumbs up and we’ll take another sip of coffee a new series coffee and code brought to you by Michael Strout owner at which training academy guys this coffee is very
good anyway sorry for the break so now we have our profile picture current logged in user profile picture again when we go to preview there’s likely not going to be a picture there because there’s no profile pictures in the database so there’s nothing to pull from we have our text box here now let’s edit the settings on our text box so if we go in here we could choose settings and you can actually see here something limit length pretty cool right
so I’ll show you that in a second so placeholder text add your status here obviously guys if you’re building a legit social network get creative with what you put in these make sure people know that this is where they type their status but get more credit add your status here is kind of boring I’m sorry I couldn’t think of anything funky add your status here well feeling funky feelin pumpkiny we’re creating words now guys feelin fresh you know
get creative with it add some creative stuff there if you’re actually building out a legit social network here you you want to draw people’s attention that’s the whole goal you should have fun when you’re building out a website especially a social network you’re helping people connect and you want that to be a fun experience so you as a developer have to have fun in building that so now that we have that we’re gonna make this a required field and
the only reason we’re making it required this does not mean that the user hat as soon as they click on this has to upload something this simply means that in order for that submit button to be pressed there’s got to be something in this textbox otherwise it’s just gonna submit a blank blank something and we don’t want that we don’t want blank statuses all over our social network so we’re gonna make that required and then the next thing we’re
gonna do is we’re gonna limit link so just like Twitter we could choose how many number of characters each individual status has now I sometimes don’t like just the dish 144 character limit it’s 140 or 144 on Twitter so what I’m gonna do is I’m gonna go the to 80 so I’m gonna pretend like we have one of those select Twitter accounts and we have a match of 280 characters so what this does is it limits this in particular user to writing only two
hundred and eighty characters in that text box so they’re match they can tweet is two hundred tweet status whatever you want to call it is two hundred and eighty characters I’m gonna exit out and the last and final thing we need to add to this posting a status is the submit button they have to be able to post it so we’re gonna come here to add we’re gonna go to button and let’s find what one we want to add this is kind of that round design that
we’ve got going on so we’ll come down here we’ll put that here and then we’ll change the texture to say post status and then let’s change that color up a little bit you know something a little bit more funky as I like to say um kind of like that one for right now it’s got that lighter color schemes like a lighter purple on hover it could be that and non-disabled it could be that but on regular will have this color right here and that text again I
don’t like that font let’s come up here and let’s go with some monster at regular and now we’ve got that post status button now what has to happen guys we have to add another data set why because let’s see if you can figure this out pause the video right now take three seconds to think about why we need to add another data set and I’m gonna take a sip of coffee good so why do we have to add another data set well we have to add another data set
because this information has to be submitted to that database so we have to make sure there’s a database or a data set connecting the actual button and what’s in that text box to the database again how I reference the data set and all my past which code videos is the data sets kind of like the glue it’s what glues together the in the post so the user generated content and the database so what we do is we’ll come up here and to add and then we
will go to database and we’re gonna at a data set we’re gonna take this data set we’re gonna put it wherever we want these data sets are invisible which means that nobody can see these on the published version of the website so even if you have it smack dab in the middle the page no one can see that and we’re gonna go ahead and double click on that from there we’re gonna connect a collection so we’re gonna connect to user statuses because it’s
submitted into that text box we’re gonna choose the mode to write only so because they’re writing a status and number of I don’t know that doesn’t really apply then we click off that and now what we’re gonna do is we’re gonna change this text box we’re gonna have this connect to user statuses and the value connects to status now that that’s connected we need the button to act as a submission so we’re gonna click the button we’re going to connect
to data it’s going to connect to the user statuses data set and the label is going to connect to status no no does not know it is absolutely not it’s going to link to connect the label is not connected and then when successful let’s just for the sake of this video say that it will go back to the home page so we’ll just have it go back to the home page you can add a success message as well or a failure message just so you know but what’s gonna
happen now is the users gonna post something it’s gonna submit and then it’s gonna take us back to the home page and just so we can see the mechanism work a little bit I’ve decided I’m gonna extend this video a little bit further and show you briefly a status upload page so where the status will actually be displayed this is gonna be a very basic version we’re gonna have a whole entire probably to three part series on this alone but what I’m
gonna do is I’m gonna go back up here so this is our status update light box this is set we’re gonna save that okay so we’re gonna save that there and now I’m gonna go back to manage pages I’m gonna go to site menu and I’m just gonna put here status page actually statuses page and then I’m just gonna keep this nice and simple okay guys I’m not gonna use for the purpose of this in particular I just want to show you that it actually posts the
status this is gonna show you where the stat how the status will be posted so we’ll have that there and then we well definitely a hundred percent change the color of this box let’s just change it to that similar color that we had there we’ll kind of change it to that baby blueish color here and then what will happen is one will change that and then I’ll just show you for the sake here how this will work we’ll add our text here we’ll change the
font on it and guys this is a very very quick preview but I want to show you cuz it’ll be cool and I think you guys will be impressed and you’ll like it and I’m all for that so our status is gonna be posted here this text is gonna be our status now how do we actually make it so that the status is posted there well again I’m gonna have a full tutorial on this but I’ll show you quickly so we have our database so just like the data set acted as the
glue when connecting the text box to the database we’re now going to use another data set to connect the database to our statuses page so we’re gonna go back into add we’re gonna go to database we’re gonna go to data set we’re gonna click on data set this time it’s gonna be read-only again I’m gonna show you a whole design of this page with the ability to edit all that good stuff after the fact but for this purpose I’m just gonna show you how
this will work we’re gonna choose a collection it’s gonna be pulling from user statuses be read-only and then what we want is we now want this text right here to connect to status in the status update so now what’s gonna happen is as soon as we post the status that status is gonna be uploaded here on this page now essentially when we actually build out the page we’re gonna use repeaters to actually build out individual statuses I’m not showing
you the full build out of this page yet but I want to show you that it’ll work so I’m gonna save that and I’m gonna go back to the home page because it’s actually you know what what I’m gonna show you now is we’re gonna go back to that lightbox and instead of having the submit button send us back to the home page I’m gonna have the submit button link us to the statuses page click that ok so now I’m gonna go back yep and then what I’m gonna do is
just for the purpose of this you can see up at the top it’s in the header I’m gonna press publish and then we’re gonna go ahead and give this a nice little test okay view site let’s see our work in action ladies and gentlemen whoo coffee for this one okay we click our little status icon here let’s make sure it’s still linked no it’s not okay so we want it to link to a lightbox and we want it to link to the status update my bad let’s publish that
let’s view site lets X out of this one okay guys so we’ve got our little huh I did that on the testing page my apologies so let’s go back to the home page and do it on the home page so let’s make sure that’s linked okay that’s linked to the status update box good we should be good to go now just in case it has something we’re doing – doing the header let’s just do this and we’ll give this another go okay there we go so when we click this aha
we’ve got composed of status right here add your status here I am having an absolute blast recording this next part of building a social network in Wix the non coding founders guide please check out my newest video and do not forget to subscribe here on youtube also head oh by the way guys what I’m trying to do is I’m trying to hit the character limit to show you how that will work also head over to the Wix training academy website and register
for an account I am okay did you see that and register for an account it won’t let me type account you hit the character limit so you can see how that works it stopped me right there so head over to the wish Bank Adam II website and register now if I press post status well maybe it’s not gonna post let’s uh let’s take a peek at this let’s go debugging phase now status we want this this is connected to user status yep status text this is a right
only user statuses and now we want this connected to the data we want it to link so we wanted to submit and link to the statuses page linked to these statuses page is read-only so we shouldn’t have any problem there let’s just give it another another peek let me just copy that okay let’s take a peek here you’re just giving me a pain aren’t you now okay let’s try to figure this out let’s try to debunk here is that one we want the information to
submit let’s just see if we change the page how that’ll work submits wink why aren’t you posting Haho guys okay so you just experienced firsthand I believe why this thing was not posting so thank you for being a part of my also debunking session in this video so you just got to witness me working through the debunking session why is this not posting well let’s take a step back what are our database permissions you have to be a site member that’s
logged in to write a status right that’s that’s that database permission so for the purpose of this since I don’t have the login feature built yet I’m gonna go back to the database and just as a process of elimination see if that’s what the issue so if I go to user status this year I edit permissions if I change this to any one on each one I believe we will have our problem solved let’s take it so did anyone catch that because I had it set
everything set to site member and I wasn’t actually logged into the live site you know I didn’t have an account and I wasn’t logged in on the live site it wouldn’t let me post anything now I haven’t shown you guys how to actually add an error message that tells them that’s the reason why which is why I was tripping up on my own website but I believe that’s what our that’s what our reasoning was the database permissions literally would not let us
post it because we weren’t a logged in member so now if we click Save and we click publish I believe we’re gonna get a different type of reaction here I’m gonna go back here view site let’s let’s take a peek I believe that’s what we had happen aha yes yes yes yes now let’s have a redirect to the user statuses page to show you how that works okay so I try to change this the the status location button because I thought it was a problem with what
where it was going but it’s not there’s a problem with database permissions statuses page let’s go back let’s publish this again Booya don’t you what it’s so satisfying guys once you get to that point where you’re actually writing some code this isn’t coding in particular but you’re making a lot of connections between databases and you could debunk the issue you’re having it’s a very very satisfying feeling so let’s try this again and right here
I’m just gonna put that same thing and now there it is our status was posted we posted the status it went straight to that statuses page now this is just a complete mock up version to show you how that works but you can see that that exact status was posted right here on this page because that is how you create a status uploading system for your social network this is a very very helpful tutorial please utilize this please utilize this this goes
for any text content I will show you how to do the image content as well it’s the same exact format it’s setup except you also have an image upload as well and you have an image upload spot in your database I will show you that in a separate video probably our next video since we’re on the topic of statuses but this is how you do it guys we did it we did it we debunked it together we got it together this is an exciting stuff if this video helped
you out please throw me a thumbs up if not for me at least throw a thumbs up for shameless plug here Starbucks and their pumpkin iced coffee subscribe here on computer excuse me on which training academy if you haven’t already comment if you have any questions or you’re like wow that was helpful that was helpful comment that down below and also head over to wicks training academy comm link in the description below go click that Academy button
following all my building and social networks series videos I upload a checklist into the Academy that you can follow step by step to make sure you hit all these proper necessities on the list and you make sure you don’t skip any steps so I will upload a full checklist on building out that status function so make sure you go check that out sign up just click Academy register and you’ll see the register pop up and go ahead and get in there
everything’s completely free in there maximize and utilize that content as much as you want otherwise thank you guys for watching this has been a fun video I will catch you on our next building a social network in which series the non coding founder guide on our next week’s tutorial thank you guys very much catch on the next one