Welcome back to part 4 in this series where we are creating our own little twitter clone. In the last post, we got the My Profile page customised to resemble twitter’s My Profile page and I think we did a pretty good job. This week we are going to do a mix of coding the back-end and improving the front-end. So tasks for this week:
1. Implement “Tweet Button” which bring up a pop-up menu where you can post a new Tweet.
2. Search bar ( in nav bar) only when logged in – Improve our navbar layout to include the search bar
3. Edit profile ( user actual name, description, profile pic change, header image change) – Implement the ability for a user to edit their profile information, this will involve working with Jquery again.
So let’s get started…
Implementing the tweet button
So how is this working? After inspecting the code it looks like it is using a model which is part of twitter bootstrap so it’s going to be very easy to implement. Let’s get started with the placing our tweet button inside our navbar:
So first we place our actual modal popup outside our navbar code, we do this because if you place it inside the navbar that has a fixed position it causes the dialog to be completely faded when it pops up. So it needs to be placed outside any divs that have formatting like so:
Then inside our navbar, we have a button that when clicked it will display our the modal with the id of “myModal”
The result is:
Right we have that done and it helps our profile page look a lot better.
2. Search bar
Very straight forward to implement we just need some HTML code for now:
So we have a ul that is another navbar inside our existing navbar…that is aligned to the right. We have a simple inline-form with a search field and a submit button.
Here is the result:
Now we will leave the search bar as is, twitter has auto complete we will implement this later.
3. Editing the user profile
On the user profile twitter page, they are able to edit a bunch of their own fields inline here is a picture of what it looks like:
As you can see they can mainly edit their name and their description, it also has this nice background fade that brings all the editable fields into focus. We will work on prettying it up later but lets get the functionality started:
Here is the existing HTML code for the user details
We have a 2 main user details fields that the user should be able to customise which will be their actual name and their description. Twitter does allow to add an URL or add a location I don’t think this is necessarily needed as all that can be covered inside the user’s description field.
Now we have our fields with a className (after looking maybe I should have used ID’s) anyway let’s see the code for the edit profile button:
This might be a bit more than you expected for just a button, well this whole time we were missing the user statistics row that twitter has:
After looking at the code and messing around with scrolling it’s actually a navbar that follows you down the page there is some customising that happens as you scroll such as the image changes to a small image with your username beside it. From what I can see it seems to work in that when the navbar is at the top of the viewport it gets a class of fixed so it sticks with you the whole time. If fixed is added at the start it jumps straight to the top of the page which is not what we want. I won’t be implementing this but I taught I would explain how I taught it works.
Here the result of our navbar code:
Next, what do we need to do when the edit profile is clicked? We can do the same thing we did for when the user edits a status we replace the existing HTML code with a textarea/textbox so the user can edit inline without reloading the page. Here is that code:
What happens when we click save changes? As stated earlier it has an onClick handler which will do the following:
Although this looks complicated all its doing is making a post request to /editUser with the updated user’s details. In detail
1.Pull the updated user’s name and user description
2. Create an ajax call that makes a POST request to /editUser with our new user’s details data encoded in JSON. We also have three functions based on how the requests go. When it’s complete we output a message, when it succeeds we output a message then redirect to our /myProfile page. We need to do the redirect inside this because an ajax call doesn’t cause a redirect itself no matter how hard you try.
Note: One issue I ran into was anytime I made this post request it kept thinking there was an error even after specifically returning a 200 or 302 response code. After looking around it was due to the contentType when it does the post request in JSON it expects JSON back, so I returned JSON object of success and it fixed the issue.
Now that we have our client side code here is our server side code for /editUser:
This code is pretty boilerplate code we find the user by their unique ID. Once we have the user we update their name and description with the updated body parameters that we posted via our ajax POST request. We then save the user new details to the database and return success.
After all that, here is the result:
Woo it works with small little bug 🙂
Well, that is it for this walkthrough/tutorial. I taught it was very interesting especially the way they allow the user to edit their details in-line easily. Doing this is teaching me loads about twitter and web design. I am trying to fit as much as I can into each tutorial although they might seem all over the place. Join me next week where we continue on again… 🙂