CSC 486: My Second Merge – The Break Down

TL: DR

On Friday, I had my second pull request merged into our master repo. As I explained before, I am in charge of the views in our project (You can read this post for more information). As such, I have maintained the views and make sure the all view follow along with the rest of the project. The last few weeks we are being merging features into the project and thus, I have been integrating the features very step of the way. Sorry, I have not been blogging but it been a busy semester at Berea College. Below, I am going to explain the progress that we have had so far, we almost were done.

The following pictures below are the current version of our the project.

Linking the Q&A Forum to main CodeWorkout project

Title Page.png

As you see above we made a link to the Q&A Forum in the form of a button on the navbar. This was pretty simple.

The _navbar file is located in the app/views/layouts directory. This file in a partial meaning that it is used to be called as part of a view. Plus the _navbar is a html.haml file means that it use the HAML markup to encode HTML. This is the same for all the files involving views.

Here is a link to the file on our Master on Github: _navbar file

If you want to read more about the navbar read this post by myself.

Title Page 2.png

Above you see that you can’t just access the Q&A Forum unless you a have authorization. In order to get authorization, the user has to do is log in as shown below. The authorization was done was Jacob, who used cancan which is a software that authorized users.

Title Page 3.png

Now, that the user has logged in they can now process to the Q&A forum. Which bring us to the next part.

Index View:

At this moment, we have logged on and are now in the Q&A Forum as shown by the breadcrumb bar shown below the navbar.

This is the Breadcrumb bar  – >  Home /  Q&A Forum

You can find the _breadcrumb file in the app/views/layouts directory just like the _navibar file. Just like the _navibar file, the _breadcrumb file is a partial layout which means that it is used to be called as part of a view.

You can find the index view in the app/views/questions/ directory. This file is a view means the is the template that is shown to the user through the browser.

Here is a link to the files on our Master on Github: _breadcrumb file  &  Index View file

Index Page.png

Now, that we are identified where we are as a user in the project. Let discuss what new and different  about the index view. Now the index view has a new question button that leads the user to another view to where they can make a question. Shown below:

New Question View:

You can find the new question view in the app/views/questions/ directory. This file is a view means the is the template that is shown to the user through the browser.

Here is a link to the file on our Master on Github: New Question View file

New View.png The new question, now allows the user to type in a title, text, and tags where is be added to the database.

Search Bar:

You can find the search is located in the app/views/questions/ directory. This file is a view means the is the template that is shown to the user through the browser.

Here is a link to the file on our Master on Github: Search file

The Search was done was Austin. To read more about the search read his blog post.

Index Page 2.png

Index Page 3.pngOur newest feature the search allows the user to select and search for exercises as seen above and to select and search tags. Both these two features will update the index view.

Index Page 4.pngIndex Page 5.png

Last but not least a user can type a keyword(s) into a the search bar and that will also update the page with questions surrounding the given keyword. This seen below.

Index Page 6.pngIndex Page 7.png

Show View:

The show is a the still being updated but this is the most updated version of the view. As you see the new version has a breadcrumb bar, like button, dislike button, edit button, delete button, flag dropdown menu with a submit button, exercise listing, user listing, posted listing and tags listing then the rest is the expect for the new respond button. I will explain that and why the Buttons for this page below.

You can find the show view is located in the app/views/questions/ directory. This file is a view means the is the template that is shown to the user through the browser.

Here is a link to the file on our Master on Github: Show View file

To start off, both like and dislike button add the number of users picked these buttons.

The Search was done was . To read more about the search read his blog post.

Show View.png

Next is the flag drop-down menu and submit button. The purse for this button is to flag inappropriate question. This category includes Flag, Duplicate, Off Topic, and Contains inappropriate language. We believe this will allow the users the opportune to notify the admin of these issues.

Show View 2.png

Next is the New Response button. This button allows the user to create a response to the question by a pop-up text box (Shown Below). Which will update the show view as shown below along with the text box

Show View 5.pngShow View 6.png

Going back to the index lets look at the edit view and delete action.

Edit Question View:

The new edit question view has a the breadcrumb that shows the question and the prefilled in the text box from the question selected. Plus, it now updates with the changes in the text box when to submit is clicked.

You can find the edit view is located in the app/views/questions/ directory. This file is a view means the is the template that is shown to the user through the browser.

Here is a link to the file on our Master on Github: Edit View file

Edit View.png

Delete Action:

Now, this action show a pop-up box question the user “are you sure?” which allow the user to give a second to the action and then deletes the question from the view, not the database.

Delete.png

Conclusion:

This is the first of many to posts to follow this week explain very us part of this project, now that I have time to write posts. Plus, I will be making a portfolio page for this project. The next two posts will be explaining the different part of my portfolio and a reflection of my work working with my team using this post along with my group’s contract.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s