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!