Testing the site

Well long time since a post due to the database assignment due in on Wednesday. I have been doing bit's and bobs. The major update is that I know have a server with a domain at www.StudentFile.co.uk Which is now up and running. It's taken a while to get things working on it but it's still not quite there. As the video converting currently fails to work. Hopefully this will be done by the weekend.

As I get closer and closer to the 1st of March deadline (aiming to have it done before) start of testing date I am getting thing's ready for it. I run a script to create 193 users from the questionnaire earlier in the project. With this I also set up a mass email which will invite all those users to come use the site giving them their username and password details to login. Hopefully this will give me some good user data.

I've made it so now when a user signs up it will email them automatically with details and a welcome message. Also a small thing made which is on the login page which users can enter their username or email and it will email them there lost password.

It's a simple but important thing for users to be able to get their password back without contacting the site directly.

Lastly as well as getting video converting working there is one big other issue currently sitting needing fixing ideally before testing but not a must. That is the issue of Internet Explorer. The general look of the site is somewhat lost on IE with the lack of css3 but this is more of taking the shine off the site and doesn't break the layout any way.

There are some other issues with Ajax which needed fixing. Dragging items on the MyTabPage was not working with flash items getting in the way (video's and Youtube items) To get around this easily I have taken off videos and Youtube off the MyTabPage and replaced them with text. Viewing the live site still works as expected.

The Editing tab name and order was working first time the button was clicked in IE but after that it failed to reload this was because IE will cache data like a normal page for Ajax calls so a small snippet of code was put in place to fix this.

The Create Tab textbox was not working for IE this was because I was trying to do a find replace on the html of a div which is returned different for IE then all other browsers. The Find Replace also meant I needed to reload the jQuery onClicks and hovers among other things. I found a way around this was a lovely function in jQuery called .insertAfter which can be used on any element. So I gave all the editable tabs a class then used jQuery to get all elements with that class. Then used .last() to get the last element and then .insertAfter to add it to the end. This works as much cleaner and works in IE as well as Firefox/Chrome browsers.

IE still needs some fixing for IE such as adding text and titles with the Ajax fails which is a big issue.

Minor Updates and Tidy up

Ive tried to tidy up the site today, cleaning up code, files and general layout of the site as well. One thing done was that now the items are styled like the rest of the site as you can see in their curved purple boxes for clear and easy to see separate itemsThere was a lot of included javaScript files, double inserts and a lot more which I have worked my way through to tidy and remove any not needed files. So this should help speed the site up a little. The first forum page now has a jQuery linking table rows so you can click anywhere in the highlighted area instead of just the text to take you to the correct page.

After adding a tab the sorting of tabs in the edit tab box was breaking. This has now been resolved. This was introduced when I was fixing the position of the pop up box.

Due to a reuse of the btn_jQ class across the site for buttons to make them look nicer, and it was also used on portfolio page for some jQuery meant that on submitting or clicking other buttons not related to the "add item" section, The box would open before taking you to the page you had clicked or submitted. This is now resolved by spliting the classes to "btn" and "jQ" with the items that meant to have the jQuery on have both classes.

Now if you delete a tab which you are currently on. It will take you to the overview page after the Ajax has finished! This stops users being able to add, delete and edit items on the already deleted tab page.

I also got the sample collection of users I will be asking to test my site. A email will go out to around 200 users who took part in my questionnaire earlier in the year.

I did a quick build on the contact us page so that it has some more text as well as a small form that posts a email to me just like the feedback one does.

Also now on the add items I have added a small paragraph explaining each one, How it works, what file types are accepted to help guide the user through the site.

I have also now order a server which I was hoping I would get details to today, but I have yet to receive them. Once I do the server will be put on-line and I will try to get my testing stage started as soon as possible with the sample users shown above.

Validation for Fun

This is a double post for today and last Friday as I failed to blog about what I have completed back then. I have decided that after fixing the break spaces in text that I could go further with implementation of text. So now if a user enters a url for example "http://www.google.com" in there text. I will replace it with a A tag to make the link clickable.

Also to take this further if a user types in @tabname, The code will hunt down to see if that name fits with a live tab they have on their portfolio and it links to it. so now users can talk about their other portfolios and maybe sites they have created as well as talk about one tab from another and create direct easy to use links between tabs.

Some layout fixing I have done such as the edit tab button has now been floated to the far side and the position of the box that appears is fitted nicely to it's side so that it doesn't have any flash z-depth problems. Also a smaller fix was the delete button for tabs has been fixed so that if users resize the window it will stay in position which is done by using relative position on it and a absolute on its parent.

I have fixed a small bug with the add items textboxes that now when you open/close them they clear themselves so that if you go from title where you have typed something to Youtube. It will not have the title text in the Youtube textbox.

Now the big one. The issue that's been sitting on my to do list the longest out of anything I have done so far. The validation issue which has now been resolved with a use of a transactional method which rolls back changes if they fail. This means I was free to add and use the RuleViolation method on all classes and post them to the page as seen below.

There is alot of text inputs around the site which could easily be errored on so this is the list where its implemented:-

• Edit/Create portfolio page
• Login
• Sign up account
• Add tab
• Add text/title
• edit tabs names
• Edit Links
• Add Links
• Post Article
• Change Account Details (email/password)

As there are different types of validation, and different ways to implement it, I have been flexible. For example above is a js alert as a user didn't enter text for added a tab(they just hit enter) as its a json response I have responded in the above example instead of a post on a page.

The plan is to implement Javascript jQuery validation which can take over for alot of the validation done on the background so things like this could be alot cleaner as well as saving post backs to the database. Sometimes a post back is required such as checking email/usernames are not in use.

Portfolio Updating

The bugs list is tumbling and tumbling fast.

I have today added a feature as well which had been sitting on my list for ages nearly as long as getting validation sorted. (That is the biggest must have feature left to do) Now the editing tab did use to work until you deleted or added a new tab without a refresh. Now when you click on the edit button its populated with a Ajax call to get all tabs. I've also added the neat arrows on the side which let it you drag and drop the tabs new order. Hitting save will update the names and also the order in which you have placed them. Meaning adding, deleting, editing and moving all now work for tabs. Hurrah!!

The add item has been changed a lot. Issues with position have now been resolved so that instead of a floating div it will now expand below the buttons like the below image. Pushing all items down for the time being. Clicking on the same button twice will close it but clicking on a different button will close it then open the new one. Also I have re-added the Title button to clean up the form that appears. Also there is a close button as shown in the top right of the box which is more natural and clear way to close the box for users.

I coding side note is that the title and the YouTube link use the same textbox as they both only need textboxes. It now looks 100% better fits in nicely no overlapping issues with z-index and flash videos. Also a title has been added to each. E.g. Upload Image/Video as shown in the below. I plan to actually more more details in these boxes. Such as image/video maximum sizes and accepted file types and for YouTube to tell users what type of link they need to enter!
Lastly I fixed a small bug with issues of when using Ajax to upload titles or text it was not clearing the box after it was posting back. This was resolved but a another small bug was noted form this. Which is if you type something into a title textbox then go to Youtube without submitting you will have its text displaying there (to the user it should look like two different menu).

Nearly There. Meeting tomorrow with Supervisor to discuss progress. I've done a lot this last two weeks so I'm sure he will be happy with the improvements.

Another day another bug

Its been a bug fixing day today and I'm very pleased with the progress. Finally my bugs list that sits on the side of my desktop has shrunk to about half size with only about 4 things currently left on it. So what has changed? Well For a start the browse page which I said yesterday needed to have its "view all" links working with the search page they now do and one is shown below with it displaying all portfolio in order of latestI have fixed the layout of the search page as well with the table header text made bold, aligned correctly and capitalized. As well from the picture below you can see the textbox has been nicely intergrated into the sites style. I also implemented the "Must contain" buttons at the bottom of the search box. So After a result has been collected it is filtered to only bring back the correct ones.
Also the search now remembers the "Search by" radio button correctly, a small but nice to have fix. I also fixed a bug which had been sitting on my list for a while. Which is the issue with editing tab names. This was a issue created when I first put in the functionality for editing tab names that after you delete or create new tabs it would not work correctly. Now when you click on the tab it actually uses ajax to get the tabs and populate the textboxes correctly.
The feedback form that was created the other day is now working. It simply meant setting up a smtp server with relay working on my server. My local pc points towards it and when I publish the onto the server it uses its webconfig to point to itself (localhost). This means I can start sending out mass emails with it as well as using it for collecting feedback
Last real big fix was that of the forum erroring when users posted on it before the had created a portfolio. Now comments box is not displayed for these users and tells them to create a portfolio first. Also if they try hit the New article page they get redirected to the create portfolio page.

Browse, Search and feedback

Well its been a productive day today with great new things and features getting created. I Started from scratch the search page which can be seen in the below to images. A simple textbox for the search pre-set to search by name but also allows for search by tab name and user. This will look for part names so if you type "will" like in the example image you will get results of "Williamson". This search at moment brings back only portfolios so if searched by tab name it will returns portfoliosI also have included a "must contain" section for images, video and links. This is not implemented but will be changed so only portfolios that have the checked items will be returned. For example you are looking for portfolios with videos on. As often a portfolio with no text/gallery or videos might not be of interest.

Now the search builds on the browse page which I had started to develop before the weekend but today again I have done a lot to improve it with the hover over the rows of results works like the forum for clicking anywhere not just the text of the links. The images and video results work nicely as well with the nice use of the jpg that is outputted in a small 100px size when the video converter is run for uploaded videos.

As you can see below this is a example of what it looks like when hovering one of the image links. This link takes you directly to the tab of the portfolio which this image comes from so you can see it easily and simply! At the bottom of the two portfolio sections there is currently a "view all.." button this is not implemented but the idea is to port this at a page which will get the appropriate portfolios ordered in the correct order and pass it to the search page to display as a set of search results. Making good use of a pre made page and lets the user then search and filter that result down with the search functionality.

So I went off to work at 5pm and managed to get a nice bit of functionality pretty much completed while there. This is the feedback form which lets users rate different sections of the site as seen below with the use of a star rating system and also post comments on the site or about bugs as they wish. At the moment it should send a email (though my pc doesn't have a localhost smtp server to do this) but I may change it to a database thing which I can then use in the admin behind the scene section which might be a nice thing extra to add.

It works by sitting in to top right corner displaying a image. When clicked on the below box appears and clicking on its header makes it return to a feedback image in the corner. This is on the master page so that it will be shown on every page across the site but can easily be removed when out of testing and beta stages. This is mainly for when I do live testing at start of march so users can easily contact me without any hassle.
As you can see there is alot of things needing fixing with this.

• The search must contain
• Browse "view all" section links
• Feedback email testing or change to database

But Still this is very good progression. And I have fixed the routing so I can now have

• www.domain.com/contact
• www.domain.com/about
• www.domain.com/feedback

All work nicely which means I can start to create these simple separate stand alone pages which have alot of static content on meaning they will take matter of minutes to create. These are only little things but a must for the live beta which I am planning. This will be as mentioned earlier in early march. (ideally 1st of March) I plan to spend the second half of march completely on bug fixing from my list I have so it is in a most workable state as possible before giving it to users as I don't want them to just be telling me about bugs I know. I want to find new bugs and changes to features they want.

Side note the logo has had a "Beta" tag attached to it for preparation of the beta launch in March.

So things are going good but really need to tidy up everything now!

Progress The Forum

So quick update as these late nights just keep going on and on, I've updated the forum so now you can edit Articles as well as Replies. So you will see a "(edit)" button next to either the word "you" or next to the date for article. Clicking on this takes you to a quick page to update the post.

The Update text on the topic page was having issues now that I enabled editing. So this had to be reworked heavily and now it will correctly display if the article was lasted edited or a reply was last edited or added.

Datetime has taken a great improvement, I added a extension method for the date format which takes a date and returns one of the following types of examples. Idea was to show a nice "Today" type example or to only display what is needed. E.g. year is only displayed if its was over a year old.

• Minutes ago
• Today at 12:03am
• Yesterday at 12:03am
• 2 Feb at 12:03am
• 2 Feb 09 at 12:03am

Finally the text break issue has been solved with the use of extension method like above but this case for string object. So I simply apply a "ReplaceBreaks" option to string that is to be displayed on the page, Else if its going in a textbox leave it as normal with blackslash n's to create the breaks in textboxes.

Latest thing done late tonight was I started to redesign the browse page looking to add a number of sections such as New Portfolios, Latest Portfolios, New Images, New Videos and more. This will be the basic way of browsing the website as well as there will be a search implemented hopefully if there is time!

Forum for all

Well well, its been one long day and its been one productive day. Today I decided that I wanted to get some really visual stuff done (its a good feel good feeling) so I decided that I had designed my discussion board enough that I could start on it. I put together the 4 new tables

Sections$lt;topics$lt;articles$lt;replies

This is the structure of the board. With sections such as Admin, Public and users. And each has a number of topics which users can then post articles in the topic about the topic. From which any users can reply and comment on it. Below you can see the main page of the forum. I have currently gone with a very heavy Css3 design style. I know this will not work correctly with all browsers (mainly IE7 and less) but I will go back and code it in a way that means it will still be functional even if the corners are curved and faded colours don't work.

This next image is once you have clicked on a topic in this case its "Networking" it will list all the articles in that topic. It will display total replies to that article and who was the last to comment on it (if no replies then its when article was created)

Here is the article page with all the replies underneath the coloured Article. So you can clearly see the main article. There is also links for each users name linking directly to there portfolio and date stamps on each comment posted.

There is also a breadcrumb across the top of the forum all the way through so you can go back a step or two if required. I used opacity for hover overs and displaying of the forum itself. I wanted the best I could staying away from the fixed boring look of a table design. I managed it on the "sections" page but not on the "topic" page as I needed to show author, updated time and replies in lines of data.

Also something that was completed other night was making backgrounds pickable by the user who can now upload a background as they wish, It will resize and overlay a semi transparent white over the top to dull it down as I don't want completely bright images on the site.