Fix Fix Fix

Now the email has gone out for uses testing we have had about 10 people sign up on the site and test it out as well as 15 reply in the feedback form and couple direct emails back to me and some posted on the forums I posted on. The feedback has been great. The ratings for the site have been varied from good to bad but overall mostly good.

As well then users have picked up on a lot of little and big bugs, issues in different browsers and even typos on the site so I have been collecting them together and trying to fix what I can get done.

Now I had a very minor server issue with the server set back a hour (Germany time) and so when articles where getting date created and updated text applied to them they was out by a hour.

Links across the bottom for about us, T&C and more was not currently made. To create these static pages won't take long but will be done shortly! On the create a portfolio page is a image in the background which is now faded a bit more to stop it conflicting with text. I also create a link to the browse page which reads "Don't want to sign up just yet? try checking out other portfolioshere" So users know they can browse a little before signing up.

I've added some text explaining to users what to put in the about me section of their overview page on request of a user which made good sense as it can be confusing.

The calendar has been removed from the date of birth, It didn't have a background on when it went live making it hard to see and users complained but also the issue with only going to 1990 before reselecting it and it going further back was a issue so its now replaced with a textbox and two drop down boxes for it (with a hidden textbox which joins it all together and it posted away)

Now when entering incorrect username and password that don't match you get a alert saying so. And the tutorial page has been fixed so it doesn't display all videos at once but just one at a time with javascript changing it on clicks!

Live time to push forward

Well its been a while since a post and ill make it a short one. I was planning and was actually a head of schedule to get my site online and my 200 emails sent out by 1st march but as always when you think you are ahead something nips you in the arse.

The IE problems with ajax were slowly getting fixed with IE having a caching problem which is now solved and also the $.POST of jquery was having problems in all but chrome. This was down to a null value getting passed into the function but this has now been fixed.

The issue with my server not having permissions to convert have now been solved simply by giving Network_Service permissions over the folder that the fvec.exe file was sitting in.

Only real problem now is for some reason emails to the @brunel.ac.uk domain are not coming through. This has caused issues with my mass email idea and I'm currently working with Brunel computer centre to get this sorted.

So to get around this I have asked Brunel to email for me a invite message asking people to sign up as well as posting on a couple forums that I go on regularly this will get the testing started without having to wait for the brunel.ac.uk emailing issue to be resolved.

I have also created 6 video tutorials and a page for them to sit on. These talk and explain quickly how to do different tasks on your portfolio page such as adding items and pages. This should hopefully make the site more userfriendly and I will continue to add more tutorials over time (and make the interface nicer then it currently is)

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.

More Bugs to fix!

Been knocking off a few of the bugs list yesterday. When on a portfolio page the name link wasn't correctly directing on the live page but was on the editing page so that has been changed and fixed.

The uploading of a gallery, because of the unlimited upload inputs which keep growing I have set a max height so it doesn't disappear off the screen and a scroll bar is introduced. The logout button was error if the user had timed out. Now instead the user just looks as if they did the logout!

I looked at IE and Firefox for first proper time, and there was some major issues with it. With the whole of the portfolio page not displaying due to self closing script tags so I had to change a self closing tag for a normal tag for it to work in IE and Firefox. (odd bug if I do say so) Also some javascript/ajax issues in IE but firefox seems fine. So I Will leave them to a later date but its good to know its there.

Also I have changed the background to fixed so it doesn't move when scrolling this means we shouldn't have a tiling issue when users pick their own background!

Progression is a wonderful thing

After yesterday mass recoding and restructuring that was taking place, Today I can actually show off something that is useable. The buttons on the edit tab page has small change. So now Image/Video buttons are now merged into one and the code behind deals with it as one item until it tries to deal with the files. Which it then works out if the user has uploaded a video or image and deals with it correctly. Still some work needs to be done on the title, text and youtube at moment. Ideally I would like to be able to merge it into one.

One idea for doing this is giving the user a Textbox for general text and a tick of a checkbox turns it into a title instead of paragraph text. So we would have four buttons

• Text (supports titles and paragraphs)
• Image/Video
• Gallery (for multiple Images)
• Embedded Video (for users to paste youtube/Vimdeo links etc)

This would be a much nicer and improve what the user can do on the site.

Fixes have come in many forms today one being that the gallery item was not letting users pick more then 2 files. Due to javascript issue this has been resolved. Also I have dropped the moving tab idea using jQuery dialogs. Instead replacing it with a box that is absolute position this means I can have the options out the way of flash which may cause issues.

The design is far from set in stone, I do like the curve CSS3 and the shadow from CSS3 which I am happy not working in other browsers as it would result in just no shadow and no curve and only result is a slightly less attractive interface with no real issues.

Another small tweak to match what I had not looked at in a while was the links on the portfolio. Which I am sure I will ajax up at some point but its at the bottom of the list at the moment. I did some photoshop to turn the icons into nicer png curved boxes as well as when you hover over it will read

"Visit my {site} profile"

So you have links for facebook will read "Visit my facebook profile" Simple improvement but a nice one in case users don't know what the logos are of. Such as less known ones like linkedIn.

Below is a profile for myself I created today in a serious way. Showing just what you could do for a tab page. The example is based around my 3d assignment project and showing the progression of the project with images and galleries with texts explaining it along the way.

Rewrite and Reread!

Today has felt like a very unproductive day even thought in reality it hasn't been. I took the MyPortfolioController and rewritten the add item section which was a huge section and a big mess. Now what happens is from the page data it will create a NewItem which is from the Item class and in the item class I have many methods and variables which I can set and get to create a complete new Item. It will work out if its type of text, title, gallery, video or image and work correctly with each. It will set all the rowstatus, created and updated values as well as detailed and type.

When setting detailed it will realise if it has one file or more. If its more then one it look at creating a gallery. If its one then it looks at extensions and decides if its a video or a image and again takes the approicate directions. From here it will call a File class which does with the dealing with working out image or video and converting or compressing apporiately.

All of this hard aching work should mean its easier in future and the files look atlot clearer. UI changes have come in form that now i can merge title and text into one item and Video and Image(infact for this one you can just ask a user for Video/Image) and what ever they upload the code will work it out correctly.

I have also added a youtube option which is in its early stages but at the moment will take a normal youtube url with no extras on the end of it and add it to database of type youtube and then will display it correctly and of correct size.

Thats it for now but alot of testing to do on this area, Changing the UI buttons with some more JS and also adding other video site types like Vidmeo!

Bugs Bugs Bugs

Few small updates that have been done last week, (still working on 3d assignment sadly) one change was to fix the top images section of the website which instead of just getting images items from a user but will now get the gallery images as well so there is a larger range to choose from.

The bug I had when you was looking and editing one of your own tab pages that meant videos where not displayed have now been fixed as well.

Last change done today was that I have created a means of editing tab names so clicking a edit button displays all the tabs you have in text boxes and you can change the names and hit save. The page will refresh and new names will be displayed.

Bugs which have been introduced from this are that when you create a new tab it stops the onclick working (which is a simple Ajax fix) and also that when you delete a tab it will still be displayed on the edit form. To solve this I plan to change the way the form is created. So instead of it building it on page load it will build it from JavaScript when the button is actually clicked...

Something to think about, On Deleting a tab or creating one. If the form is currently open for display then it needs to close otherwise it will be displaying a out of date form. Thus forcing the user to re-click on it to open it and there for will rebuild again!

Simple and small

Partly drunk so this will be a very short post,

Today I managed to change the animation of the adding and removing of items so instead of fading out and in nicely it now slides up and down accordingly. Which means the page expands and 'what ever the opposite of expand is' so the page transitions nicely.

Also I made sure that when you change the password or email that it will not force you or error if you do not enter any values into the other field so you can change one without changing the other!!

Galleries Galore

Today has been a productive day on the final year project front (same can't be said about the 3d assignment).

One issue left over from yesterday was the deleting of a tab was not possible if you had just created it (via Ajax), the page needed a full refresh. Now this is not the case and it deletes and creates tabs as will without refreshing.

One thing that is not a massive feature but is a must which was the reason it was on my main To do list of 15 things needed to be completed by the end of this project was the letting a user edit their email or their password. This page and feature has now been added. One bug I have just noticed is that it will not let you change password or email without changing the other. Leaving one blank will cause a error! So this needs to be fixed! (simple fix really of just checking to see if the user has not filled one and if so reset it in the code behind getting the old values out the database).

The next thing was to get the gallery to accepting uploading of number of images, This needs to be heavily bug tested but at moment when you click the gallery button it will give you what looks just like the image/video upload dialogs but with the "add another image" button. Which by clicking gives the extra "choose file" uploader. (I plan to change this so after you picked a image for the first uploader it will automatically give the user another one. So when they hit "save" it they will have how ever many images they want to upload plus one extra blank one.

This does some complex calculations and database work to build a "Gallery" item which links to images in the gallery table (In hindsight naming it Gallery was probably not the best name for it). This works well and although it took me a long time to get working I am very very happy it is now done.

Next thing just like the flash player for videos was to get a gallery to display my images nicely no matter how many of them there was. A scrolling option was the best bet for this and I found a nice simple jQuery gallery which I adapted to fit with my website styling.

As you can see in the above image is in period of changing from one image to the next by sliding sideways. It moves when either the image is clicked (it moves to the next image) or when one of the numbers are clicked which relate to the images part of the gallery.

I minimized the styling so that the gallery would look alot like the image item. So the page looks more fluent.

A example of a complete profile tab page sporting two galleries, a title and couple text sections!

Removal of Tabs

Been working on a small feature that I have been meaning to get done for a while now. That is the removal of tabs from a portfolio as at moment you can add and remove objects, You can add tabs but you cannot remove them.

The design I settled on was having the delete icon appear just to the right of the tab link you was currently hovering over. This would only display on the current/last tab link that was hovered over instead of displaying one for each.

I used some jQuery animation to move the div across the page, Fading it out and back in at the new location. Simple hidden textbox has been used to take the tabId value to the form and from there it is deleted. I streamlined a bit of jQuery functions for deleting objects after ajax returns a object so now the item delete and tab delete use the same jQuery functions to find the element and fade it out in a nice animation.

This took a fair bit of work through out today as I was working on UI designs for it, the jQuery I had not done before and a little bit of Ajax editing. It currently is working but buggy as if you create a tab, The jQuery that builds the new navigation to display the new tab buggers up the delete hover and Ajax call. So I will need to reinitialise to stop this happen like I did with a previous example but will leave that till tomorrow.

Fade for Fun

Not alot done of late due to the other assignments that are around. Today I managed to get a few little things done and working nicely. The first thing that was done was that after I had Ajax working on sorting items and the creation of tabs in the portfolio I decided to continue building on using Ajax to make the fluent and easy to use UI that I promised in my design.

So I turn the pop up dialogs that create items (title, text, images and videos) into Ajax. Although along this route I found that Ajax is not possible for uploading files which puts a stop to this method for images and videos (although there are work arounds). So I turned it into a half Ajax after normal uploading method. So the text and title will work with Ajax.

I wanted to make the UI again look as nice for the user to use as possible. So I thought when editing the items, create and delete should have a nice fading animation. With the help of jQuery this was very easy to do. So when you now delete, after Ajax has got back to the browser confirming it has been deleted then it will fade out slowly. Also when creating a item it will fade in, in the same method.

I also managed to do a lot of tidying up as I learn more and more jQuery I can turn the vanilla javascript code into jQuery more tidy.

Something that I will need to do soon is make it more clear that A item is being deleted, Or has just been created or edited. To do this I may use a flashing animation before the item fades out or after it has faded in. In a bright colour of yellow or maybe the brands purple.

Re-design Re-direct

Minor updates as been working *hard* at university today. Now when a user tries to move around the website to authorized areas and they are no longer logged in then it will take the page they was trying to get to from Querystring, and redirect them there after they have logged in.

Other minor update is I remove the dialog popup for creating a tab and replaced the button with just a textbox. With the words "Create Tab" in it, When user clicks on it, it removes the text for users to put in the new tab name. After user hits 'enter' Ajax will post it to the controller and save the new tab. Then ajax will return the name back to the page as well as the new tabs Id from that it can rebuild the navigation so its easier to create many tabs without page relogging over and over.

Move to where?

Nice and early blog post today instead of a 1am post as its Friday and who knows where the day will take me. First things first, bug fixes. The video on the overview page was not working due to missing the .js file. This has been added and solved that simple problem. I double checked that when creating email's and password's for your account that it does indeed is case sensitive so

(Hello = hello) would not be allowed it must be (Hello = Hello). No so important for emails but very important for passwords.

The date pickers has been changed from the USA (mm-dd-yy) format to the UK (dd-mm-yy) format and works nicely now (though still sitting oddly large) .

The big bit of functionality today was the drag and drop feature of sorting items into the order you wish for. This involves a bit of jQuery to allow the items to be ordered then serializing the array which can then be posted via Ajax (first bit I have done on this project but definitely not the last) to the MyPortfolio Controller. This then takes the string, places it into a array and re-saves the items orderId's to their new values.

This works very quickly as it happens as the user drops the items. Its very quick and the user doesn't even know it has just happened. The reason this is the first bit of Ajax to be applied to the website is because I didn't wish to step into it sooner then I needed and as this is really the only way of sorting the items without writing a load of code not actually needed (for example using drop downs etc)

It was very painless which was a surprise but mainly thanks to jQuery which helped make it that easy. I will now look to be doing alot more and changing the dialog tabs that add text/titles etc into Ajax for a smoother interface.

Now that's done it really comes down to two major parts for the portfolio until I have a fully functional portfolio for users to take, add tabs, items and control fully. Those are the Gallery idea which still needs a little thinking about it but with images uploading done, it shouldn't be all to hard and second is editing items(mainly title and text but it would be nice to be able to remove gallery images one at a time)

Change Change Change

Straight into it, The date of birth in users profiles has now got a jQuery date picker, Though it currently not 100% perfect as its very oddly large (unsure why) and it gives the date in USA form which can create a error as the DD and MM are swapped.

Images and Videos when uploaded are restricted to extensions limits and if they aren't of the correct type then a null is returned and the controller deals with it appropriately.

Main point of today is settings, Which meant creating a new table, I was first going to add it all the the members table but found validation, email/username causing issues when changing settings. So I have separated it into two, members and settings table which works nicely and the settings primary key is simple the memberId, So in reality its actually a foreign key making it a one to one relation.

Now hitting the "Account" button at the top of page bring you to picture shown which at moment only gives you two options. Contact number and Email hide or show. Which update correctly on the portfolio view!

To stop errors I had to make sure a new settings record was created and attached to the member record when a new user first signs up. This also works, as I did quick run through test of the sign up and edit portfolio process.

Users can now sign up, Create the portfolio, Edit settings, Add tabs, Add text,title,images and videos to that tab and delete any of them items as well. Which if done 100% correctly works but there is still Alot of validation which can produce errors if filled in incorrectly. This will be addressed at a later date.

Current Mini ToDo List

• Work on Gallery uploading
• Ability to move items
• Implement jQuery validation
• Overview Video fails when browsing other peoples portfolios
• Must check that when the Email/Password check is done that its test case sensitive
• Change the date picker to UK
• Maybe add a Last Login field to a member and update it on logging in

Remove and Delete

Ill keep this short as its currently 2:26am and I want to go to bed. Today apart from being awesomely snowy there was a number of little things completed, Video uploader was not working on the Create page only the Tab and Edit page yesterday so that was easily fixed today.

Also because I'm running windows 7 64 bit but my server is not when I publish to it the video converter program was not getting found due to file paths were different. My pc had "/Program Files (x86)" while my server missed the "(x86)" So now it gets the value from the web.config as a global variable and I can have it different for my server and my computer. Also while I was trying to get my video converting working on my server I noticed the program wasn't installed so that was done as well.

A small issue with my jQuery/Flash player for my video was that two couldn't work on the same page because of them having the same id, This is resolved but in a bit of a ugly way so may adjust this later on.

Finally and what has kept me up this late is working on implementing deletion of items. It took some time but I managed to get it working again in a bit of a ugly way as there is currently a form for each item on the page. I will be looking to reduce it down to one with some clever jQuery, which today for first time properly I coded in, inside of just taking the bare bones of the program. (and I love it, very easy to pick up on)

While I was at it I changed the submit button to a delete image I had from the other day and with some clever css moved it into a sexy position floating to the left of each item. (there is also a edit button which does nothing at the moment though)

I will most likely put some more jquery that changes the location of the form, currently at Delete but if I change it between delete and edit when hovering different buttons means I can keep one form to edit every item and to delete every item on the page.

Right its now 2:35am and bed time

All for Video and Video for All

What started off as a very slow day soon progressed into a very successful day on StudentFile. Yesterday and early today I was working on some small icons that I will be implementing across the website. Due to the highly flexibliness of the website with options to add Title, Text,Image,Gallery and Videos each with a button at top and bottom of tabs. And need for Delete and Edit on each Item in a tab as well as possibility a move button the page will start to get crowded so small slick icons with hover overs will be a nice method to reduce the clutter!

A small but issue that has been around from pretty much day one was resolved in the most simplest of methods today. Which was the encoding of text into html was meaning
's were not getting displayed. This is now resolved so when user adds text and hits enter, after saving the breaks will still be displayed.

Now onto the awesome stuff I found a jQuery/Flash player viewer called FlowPlayer free under the GPL which means I am free to use it for my website. It only has a small logo of theres on the bottom right at start of player loading which doesn't bother me at all. It is very simply to use, couple scripts and then place a A tag on the page which points to a flv file. The jQuery will grab it replace the a tag with the flash player and use that flv video to play. It works a charm.

Of course this doesn't help unless users can upload videos, and ideally as most users won't know how to, need to provide a method for users to upload files such as AVI,mpg,quicktime etc not just a FLV. Which I have also managed to do today. That comes in the format of a SoThink Video Encoder for Adobe Flash. It is a command line program which lets me pass it parameters about type of video to save, where to save it, size, codecs etc and a lot more. After much much much messing around I managed to get it working and now users can upload their Overview CV video as well as videos on their tabs.>

The limitation with the software's free version is that it will only convert 3minutes at the moment. Which I feel is a accept amount at moment and I could purchase it at a later date. Something beautiful about this program is that it will use a heap of codecs if you have them installed. So while it mainly does mpg, avi, h264 at first once I installed Windows media player home cinema and the codecs that are free with it, Quicktime, WMV, realplayer automatically started working.

So very successful day - Peace out!

Quiet one in the office

Small update today as it was the first day back to university which resulted in me trying to get my StudentFile project back onto my laptop which caused issues with the difference between the SQL server on my desktop and laptop and it was only resolved @ 10pm not long ago.

Couple very minor things but still count that have been completed today was now if you hit the "Create" page of MyPortfolio and you are logged in with a portfolio already created then you will be redirected to the edit page instead.

A important change made was now when registering it will check to make sure your email and user name is not in use. To make sure that even when users are soft deleted it still doesn't cause issue I have not checked the users row status so you cant even take soft deleted user names and emails.

So really its now to look forward to my progression so major things to get working

• Users moving Items
• Users Deleting Items
• Upload Videos(for overview and tabs)
• Upload Gallery(should be fairly easy now have images upload done)

Target Date for all These things 2 weeks time (19th January)

Small updates for this week/Next couple days

• Get spacing working on loading text
• Get Validation back to a working state
• Create images for buttons for edit/newtab/ etc

Sign Up and Start

Today was a very productive day indeed when it comes to the StudentFile. First minor update was to the top images sidebar as mentioned in the previous blog post, needed setting to only display 12 which it now does.

Now onto something far more bigger. The registration page was created today so now when you first hit the website you are show this small sign-up fields. Once filled in you are then Logged in automatically

From here you are taken to the create portfolio page. If a user leaves now with a half made profile when they return to the website and sign in. If they try to visit their portfolio they will be redirected to the create portfolio page, which the simple questions like name, contact number and about you is asked.

From their they can then save that and they have a live portfolio with ability to add links, tabs with text,titles and images(as explained yesterday). A nice but small update is the buttons on the pages where you now have a add tabs button even when on the overview as this was a bug which meant if you didn't have at least one tab you was unable to create one. The button has been moved in-line with the portfolio navigation. While the previous add item button which gave a drop down has now been replaced with just 5 buttons one for each item at the bottom of the tab.

• Title
• Text
• Image
• Gallery (not implemented as of yet)
• Video (not implemented as of yet)

A big chance also which I managed to implement today is to split the Portfolio Controller up into two controllers the "Portfolio" and the "MyPortfolio" For example we have these two types of URL.

MyPortfolio has:

• /MyPortfolio
• /MyPortfolio/1012 - Viewing your own tab
• /MyPortfolio/Create - to first create your portfolio
• /MyPortfolio/Edit - to edit portfolio
• /MyPortfolio/Links - to edit links
• /MyPortfolio/Links/Add - to add a link (though this will be removed and put onto the links page as one)

Portfolio has:

• /Portfolio/1004 - To view user 1004's portfolio
• /Portfolio/1004/8 - To view tab with id 8 of user 1004's portfolio
• /Portfolio - displays list of portfolios (will change as searching is implemented

Other Urls

• /Account/Login
• /Account/Logout
• / - Homepage with signup on

So thats all for now heres a small preview of WIP that is the StudentFile

Up-ing your Pictures

day 2 of blogging my progression and the site is coming along nicely. I continued where I left off from yesterday by getting the tab ages to work correctly when on the "mine" part of the portfolio. Rearranged the site slightly so now only when on your own portfolio that you will see the options to add items or tabs to your portfolio. Taking the users login details to add and check permissions instead of taking a hidden text-box field from the posted page to decide where a item should go.

After which, the big thing I completed today is the implementation of uploading images to tabs. Firstly I started with just getting the image saved onto the server and saving the correct URL into the database so it would be displayed correctly. After which I used 3 class files I had from another project to help compress the files. So now when a user uploads a images it saves in three ways

1. Saved in a "full" folder which is fullsize image (this might be changed to a large but not fullsize image due to space and currently there is no file limit on it).
2. A size perfect to fit the width of a tab page
3. A size for the side bar. So that three images can sit side by side

This was one of the major parts of the website needing to be completed. There can be a-lot more flexibility and control over this section but at least the main part of it is now running good and proper. A part I made to help fail-safe it, is that it checks to see if a file exists with that name in all the folders before saving and if so it will append a number to the end of its name.

Last part done today was the "Top images" section (most likely be renamed) currently grabs all images a user has on their tabs and displays them in the right bar, Some work needs to be done on this as at moment its just displaying all. I might pick to have the newest or the most viewed for example. Also a limit needs to be put on how many is displayed such as 12 would probably be a good number (4 rows).

I'm very happy now that I can as a user Log in/out, put my details into the overview page of my profile, Add links to my portfolio and create tabs as well as add text/titles and now Videos!!

Plans for tomorrow will be to create the registration page which most likely will be put on the homepage of all pages. From there users will be able to register up and create a portfolio first main details. If a user logged in hits this page they will be automatically redirected to their own portfolio!

thats all for now !!!

Back Tracking

This is my first post of this blog, and it will be based on my progression through building my final year project for my university course. It is based on a portfolio website for students.

currently The general design of the website has been made as well as ability to browse portfolios and to edit small details. it still has a long way till it goes live.

Today I put together the login process, for the website which meant I was able to link portfolios to user accounts. Now when editing a portfolio you are only able to edit your own portfolio as it should be. If you try edit a portfolio it will first check and redirect if needed to login page if user isn't logged in. And if they try edit a portfolio which isn't theirs then they will be greeted with a unauthorized page (through links this should be impossible anyway)

The logoff deleting of cookies has also now been introduced. So the website is coming along nicely.

The next couple things needed to do are:

• Enable/Create the tabs pages when on your own portfolio (and allow editing of them)
• Add the upload code for images and galleries
• Create the register page for new Students and redirect them to their own portfolio from start!