Building A Social Network in Wix - Building Profile Pages and Database Fields - Part 3

Hello, my future social media website owners! Michael Strauch here from wixtrainingacademy.com and I would like to thank you in joining me in part 3 of building a social network in Wix, the non-coding founder's guide. So before we get into things, let me first say, I apologize for the delay of part 3 here I was on vacation and I had to get back and finish up some important projects, but part three is coming out and we are finally here now!

Before we jumped into the meat of things, first things first hit that subscribe button below the video and turn notifications on, so you're notified when these new videos come out, along with the other Wix code in Wix website tutorials. I don't want you to miss that. Secondly, when I was thinking about the idea for building a social network in Wix, the original idea came because I wanted to create a series that's very interactive with you guys in community.

Well, in order to do that, I thought of something that would be good for everyone that's in the know right now and that can relate to Wix code, because Wix code is such a popular topic that people are wanting to learn. So my goal was to do this building this social network in Wix series. So that way you can literally go from start to finish by watching these videos and learn how to build a social network in Wix. I wanted to up the game one more step.

So with each video, I am also releasing a checklist guide. That's going to contain the content from the video. So that way you can go through, watch the video, and then while you're making live edits in your own website and building your own social network, you can go through and check off ticks and boxes as we go through based off of the video. So that way it's going to be an all-inclusive checklist and video series on moving forward. So that way, when you finish, you're going to have at least a good framework for social media website a social network website that you can take an add on to, from there.

To access these checklists guides, you must be enrolled and registered in the Wix Training Academy. To register, you simply press “ACADEMY” here on wixtrainingacademy.com, link in the description below and then it will prompt you to “REGISTER”. Now, if you've already got an account, come up here and hit “Login” and I'm going to log in myself. And what we're going to do is it's going to and redirect us to our, our Academy dashboard. Let's go ahead and do that, and then once it redirects us to the dashboard, we're going to come up here and we're going to hit “RESOURCES” because this is where the checklist lies.

So when you register for an account on the Wix Training Academy, you also get access to everything else in the Academy, the library, workshops, webinars, masterminds, everything! And then once you're in here, you'll see, I have already uploaded part 1 and part 2 checklists on the Academy. So go register for that wixtrainingacademy.com and link in the description below and follow the checklist. As you go through this series, I'm telling you it will help you and keep you organized when you're building your own social network. Now let's actually begin part 3!

So in part one, I explained what the series was all about. I explained that we're going to aim for a lite Twitter version of a social network. Are we going to hit every detail of Twitter? No, but are we going to aim for a lite version of it to get the basic functionality and get that feel? Yes.

Part one, we started planning out the databases. We started planning out the databases that we're going to need for this social network that we're building. We identified quite a few databases and realize that as we go on, if we decide to add on, we may have to add more databases, but we identified two main databases that we can create and get started with right now. And those two are the user profile data and the user statuses. In part 2, I also created those databases with you and set up the database permissions.

So once we've got that out of the way we realized UserProfileData is going to contain each user's profile information. This is the information that's going to be stored on the profile pages. Okay. And then UserStatuses is where the actual statuses are going to lie. So this is when someone posts a status, update an image, anything like that. The status database is where those posts are going to lie.

Building Profile Pages and Database Fields

In today's video, I'm going to show you the initial start and set up of the profile pages here in our social network. Now, I'm not going to hit every single item that a Twitter profile page has. And I'm also going to be breaking this profile segment up into a couple different videos for a couple of different reasons.

One, there's a lot of elements to a profile page that you want to make sure you get right when building a social network. Two, part of a profile page is actually having your statuses and other statuses that you like pop up on the page. Well, we haven't worked at all on the status as yet, so we're not going to get to that in this video. That's going to be its own separate part because that's a large topic. Okay, so we've got those two. And then finally, we just want to make sure that we take the profile page in part so that way it's very digestible for you and you can easily follow along.

So when building a profile page and starting it out, there's two different methods. So if we go into our UserProfileData database. You can see, we didn't add the fields yet because we didn't start the profile page built, so two people have two different ways of doing this. Some people like to start by adding the fields that you're going to use for your profile page and some people like to design profile page and then add the fields in the database and connect it after there's no right or wrong way to this. It's a matter of preference and how you work. However, in this example, and in this tutorial, I'm going to build out the soft design of the profile page to begin with and then add the fields in from that point.

So we're going to go ahead and add a dynamic page, because a dynamic page is going to be different for each user. So obviously it's not going to be one static page. Otherwise that each person would have the same exact profile with some random information. A dynamic page will change based off of each user in the inputs they put for the registration. So we're going to go in here and we're just simply going to click this gear icon next to UserProfileData and Add a Dynamic page.

Once that's done, we're going to display an Item Page. It's going to be one single profile per page. We'll click Next and then this is the URL for the dynamic page. We're going to keep it Title right now, although this is going to change once we actually add our database fields, and then we're going to click Create Page. So just like any other regular page, except a dataset, dynamic dataset has been added to the page. This is like the glue. This is what connects the database information to the actual dataset and profile page itself.

So now that we've got that set up and we've got our data or our dynamic page organized and initially set up, let's talk about what the design and fields going to be. So, as I told you, we're aiming for a lite Twitter version. We're not building an exact Twitter and we're not using the same exact items. But I have opened up my Twitter profile here as a reference because we are going to reference the Twitter profile pages and we are going to reference Twitter throughout this entire process, just because that's the one I decided to go with.

We see that there's a background image, that there is a profile image that there's a name, there's an @, also a little bio, location, there’s a website and it has a joined date as well. So we can use most of these methods. Well, we can use all of them. And you have to determine when you're building your social network, what your profile pages are going to be and what you want to collect, just know that we're not going to get super crazy on each profile page here, but you're going to know the steps you need to take in order to build out whatever you decide is right for your social network.

Adding a Background Image

So we're going to start by adding our background image. By doing that, I'm going to hide our size structure there. And we're going to start by adding a strip because this is a full width image that we can add here. And I'm just going to add a Strip right there. And then we're going to go ahead and drag it up to the top of the page here up to the header, because we do want to leave a little space up at the top.

As you can see on Twitter, you've got a bunch of different buttons up here, although I'm not going to be working on the header in this video, we're strictly working on the profile page design.

So now when you get your strip you can see there's an option to connect it to data, right? So there's an option to connect it to the background of the strip whatever's in the database connected to that item, right? So this is going to be our background image. I'm just going to put our dynamic dataset up here. So this will be the background image.

Adding a Profile Image

The next thing I would like to add is a profile image. So I'm just going here and I'm going to select Image. And I'm going to see if I could find my, yeah, okay. So I'm going to use this image right here, and then I'm going to change the design to have that circle design. Now, Wix changes their cropping mechanisms. So it's all oblong and I don't like that at all. So let me just change it to a square image that will actually be circle, or maybe not.

Let's see, we just got rid of the side handles. They changed it, so you could only change the proportion of the image. You can't change like you can't make it all funky and stuff like that. I don't like that new feature at all. But let's see if I can just find an image to work with to make sure we get this correct.

So we're going to have to work on the actual, making sure that becomes a circular image because right now it is not looking good. So at the time what I'm going to do is we're going to scrap the whole circle and we're just going with a basic square image. We'll go up here to no frame, and we're just going to make it a straight square image for right now. I promise you we will change this and I'll show you in an updated video how we do. So this will be the profile picture.

Adding Information

The next thing we want to add, if we're following along suit here with Twitter is we want to add our information down here under the profile picture, as well as that we're going to add another strip. This strip is going to contain the little numbers that we saw under the background image. And we're going to change this and we're going to move backward and we're going to put that behind the profile image. And just to add a little bit of difference here, we're going to change that to white.

You guys are getting to see this first-hand, how I kind of work and how my mind works. So I apologize if I rambled a little bit, I'm going to explain where I need to explain. But you know, just follow along. You can see what I'm doing.

So now we have our profile picture in this little strip here, which will contain this information when we get to that and our edit profile button. But we're not going to add this stuff yet, and we're not going to add our user statuses yet, because we haven't gone over that quite yet. We are also not going to add this information yet. This is why I'm building this into different parts of videos, because this is also all stuff that's going to relate to the statuses and follow system. And we haven't done that quite yet. So we're just getting started here.

Inserting Text Box, Styling and Designing, Choosing Font Styles

But what we can do is we can add a little box under our profile picture for the actual texts that we collect. And we'll just change the color of this box, we could change it up a little bit and we'll give it that color right there. Kind of like a light gray hue, just like Twitter does. And again, I may change up the design a little bit to make it look a little bit more sexy and appealing. But I'm not going to quite do that at this moment.

Once we get in there, we know we have to collect the name and the @. So let's add what information is going to be collected. So we know we're going to have their name, right? And we want to style it so that it's ready for when someone does come in.

So we'll go with bold and then we'll just say Full Name and right under that we’re going to have our @name. And right now guys, we’re just putting the information and how you want it to look. That's what this initial dynamic page is. We're not actually going to connect it to the dataset quite yet.

So now right here, I'm going to change the style a little bit, a little smaller. We're going with a little regular and then this will be our app. And then what do we want to call this thing? We'll just call it @Handle for right now until I get a name thought up in my head. So that'll be our @Handle.

And then under that, we want a little bio. So let's add just a little bio here. We'll add that there. Bingo! Right? Yeah, there, and then we'll change the font and everything on it. I like this Lato Regular and we'll make it a little smaller. Bingo! Right there! And this will be we'll name it, Bio. And then we've got that full text box for a bio right there.

And then under that we'll go with location, we’ll allow them to choose their location. So I'm going to pull this right here and then we'll do, like I said, Location. I'll probably even add a little icon there for that as well.

And then, and then we'll do URL to our website. They have the ability to add their website and we'll do, Website. So now we've got these things added, we've got our bio, we've got our full name here. We've got our handle. We've got our location, website.

Inserting Icons

I'm going to add a little icon next to both location and website, just like Twitter does. You can see little location symbol and then a little link. So I'm going in here and I'm going to Vector Art. I'm going to Icons and see there's a location somewhere right there. So we're going ahead and add this. We'll make him a small little guy right there. Well you tend to arrange it a little better. So we got that right there. Probably make it a little bit bigger, let's see. And then want to change the design up a little bit, change the color. We'll just do a light blue for right now, that's a good one.

And then we want to get one for the website as well. I hope you're enjoying this. I know I'm just kind of talking and designing, but this is how I work and this is what you wanted to see and how I built this. Website, we'll just do this icon right here. So we'll come down here, make it nice and small. And then we'll add it here. Just like that, like we did for location. It's a little bit oblong. It's a little wider. That's okay though. We'll change the design to be the same. So we want that same design right there. We're going to move it over, just a smidge. And then the website will be there. Move the website over smidge, move location over smidge.

So now we've got our icons right here, our website, a location, bio, @Handle, and full name, all of that information. And we need to actually take this box and move it back under the profile page, our profile image here. And then what we need to do is, so we've got our background image, our profile image, and our little box here containing the full name, the @Handle, the bio, location and website.

In this video, that's about what we're going to design because the rest of the profile page has the statuses and then also activity who to follow trend for you, all that up here.

In our next series, I'm going to show you, one, how you can edit the profile page for this information. Secondly, I'm going to show you the build out of the registration and the login. So that way you have that information. So right now this is the information we're going to build out.

Adding Fields

So we're going back to our database and actually set up the correct fields. So that way we can connect it to the profile page. So we're going to open up our Site Structure. Again, we're going to UserProfileData, and now we need to actually set up the database fields.

So I'm going to name these as best as I can Profile Background Image. And the field type is going to be Image, that's our background image. We know we're going to need a Profile Picture and the field type on that is going to be Image. We know we are collecting Full Name, that's going to be a Text field type.

We know we are collecting Handle, That's also going to be a Text field type for at least right now. We may have to go back here if we're going to make that a clickable link, but for right now, it's going to be a Text field type. Then we have Bio, which will also be a Text field type. And in fact, I'm going to just make sure I'm really naming well, I'm going to name it, Profile Bio.

And then we have location, which is also going to be a Text field type. I'm just going to name it, Profile Location, Text field type. And then we have our Profile Website and that is going to be a URL. And then we'll click Add. That's going to be the field type there.

Connecting the Fields to the Dynamic Profile Page

So now we have the initial fields in the database set up. So that way, we can connect them to the dynamic profile page. So what we have to do now is actually go back to the user profile page and make sure we correctly connect each field.

So we'll come in here, we'll click this. And then on each of these, you click this little Connect to Data button. So we're going to connect the data. It already got our user profile item up here. It's got our data set. So it already detects the dataset.

Since it's a dynamic page and then column background connects to profile background image. Then profile image is going to image source connects to profile picture, a link connects to all this. We're not going to edit any of this at the moment. Full name connects to, well, full name. Handle connects to come through here, Handle. Bio connects to we're going to come through here, Profile bio. Location connects to Profile location. Website connects to Profile website.

So now we've got all of this basic information laid out, that is where we're going to hold this video. Although, I do want to make it known to you that we're going to build an actual initial setup. So in the next video, when we cover registration login and also the edit profile ability, we're really going to focus on that whole process and that how that ties into these dynamic pages, because we need to make sure it's correctly going to the dynamic page.

So in this video, you saw the basic setup. We got our background image created, we've got our profile image, created full name, handle, bio, location, and website. We added the fields in the database and we connected them to these fields. The reason I'm not going to go through and show you an example of what it will look like when we add the information into it yet is because we haven't gone through that, that process of the registering process yet. And I don't want to skip through and go here.

And then here, there's going to be a bunch of back and forth. So I'm going to show you that process in the next video. And at the end of the next video, you'll get to see at least this primary information on the profile page up and working and how it changes per each user. So that's going to be fun!

Conclusion

If this video helped you out, drop a like down below, comment if you have any questions at all. I'm here to help you out. Subscribe to Wix Training Academy, turn on notifications. Finally head to wixtrainingacademy.com, get the checklist guide for this video to follow along with what I just did, and also subscribe for all this other amazing content in here and go ahead and register a link in the description below.

I really appreciate you guys watching. I'm excited and I'm working to get part 4 out to you next week. Thank you guys again for watching and I'll catch you on the next one!

We're going to always save your work, always save your work. And then we're going to come through here and we are done.

Thank you guys again! I'll catch you on the next one.