I've spent about a week now working on my website for the end of November. I finally completed it yesterday and tested it out today for bugs but for some reason I wasn't happy with it. I scrapped the whole site and now I'm back to the drawing board. Maybe this time I should take more time and attention to detail of what I'm doing. I'm also making this 100% code no Dream-weaver or any other programmes. Just notepad ++ the way I like it.
This is the initial layout of how the sites going to look I hope. The menus at the top are drop down menus so when you hover over them more options appear to different sub-categories. This time I've structured how I'm going to do everything. Start with the front end stuff how it's all going to end up looking, then when all that is done I'll be working on the back end stuff starting with Javascript(jQuery) and PHP. As this project goes on I'd like to learn a new web programming language such as Ruby, Python or Perl but that'll come at a later date.
Spending the night on how I want my site to look I'm finally happy with the outcome and can move on to other parts of the site. Some bits have changed from my initial idea but that always happens, it's not the first time I've changed it and it won't be the last. This is what the final completed piece should look like with a few changes. Just need some help on some bits though like the footer.
Getting there slowly. This is how I want the product page to look when I'm finished making the site. The pictures at the bottom on the slider is going to be suggested items for the customers based on what they've viewed before. When the site initially launches though that part won't be included because I don't know how to do it yet. There will be better buttons as well for the add to cart.. Maybe I don't know it kind of looks better like that. Not too distracting so you know exactly what it is. The next thing I'm going to add to this under the suggestions box is probably a comment/review system with a 5 star rating. I'll make a programme to receive the amount of each star clicked and get the average from that. That'll be the overall rating of the product. As for the comments I may show the name, date posted and the comment. Eventually add a thumbs up/down and a reply feature to them. Moving on to JavaScript for this soon I hope.
This is my template that I'm using to design the rest of my website. The site is keeping the same layout for nearly most of the site but now I'm stuck as to what to do for the login page. If I just include it in the main content part it'll be too little on one page. I'm thinking maybe having a widget appearing when I click log in so that a box appears under the user links (Register | Login). Ehh I'll keep experimenting and think while doing other things.
Finally got the form field layout done to a point that I'm content with. When it is fully completed the text will be slightly lighter. Next thing I need to add to this form now is JavaScript validation to make sure that all the fields are filled in. I also need to change the property of password when it is clicked but I'm not sure how to go about that. If I set it as type="password" instead of showing Password or Verify Password it would just show me ******** so I need to sort that out. (Ignore the note that was for my friend who's helping me design it)
So this is the look I want to have for the login page. I know it's not what I said it was going to be at first but I think this works better. Only problem I have though is that it looks too empty? I don't want to make the form any bigger because that'll make it look out of proportions. Ehh I don't know I'll think of something I hope. I made the first PHP programme for the site too. The logout button, a simple 3 lines of code. Hoping I can get this site finished by mid October.
Well after doing some experimenting with how I would make the login page look a bit better I decided to see how it with an image on the page. I tried it to the left and right but didn't look right so I decided to put it at the bottom. The image is going to be the company logo. Unless by the time I think of a better way to have the page layout.
I just moved onto JavaScript to do some form validation, then all of a sudden it hit me why I hate JavaScript. Case sensitivity. I can write xmlHttpRequest but nope it won't work for me, it has to be XMLHttpRequest. Ehh roll on working on PHP. Things will then be a lot easier.
Yay! I'm finally getting into the programming part of the site. Form validations, dynamic pages among more things. This should now get a little bit more interesting. First thing I'm going to be working on is user registration, then I'll work on the login system, then the comment and review section of the comments. Then I'll work on the admin systems such as adding, deleting or editing items, as well as the order summary, mass mail feature (to send out) and a mail feature so we can read what people write to us through the site contact us.
So after having a couple of months from programming I finally got back to it and tried to learn JavaScript as well to see how that would go. Unfortunatly looking online there are only limited tutorials for what I wanted to learn so I resorted to using jQuery which I have already got past experience using. I've just completed the registration form to a standard I would be happy to launch with. The reason I had to use PHP and jQuery to do this is so that the page doesn't refresh when sending the data to the database. If I just used PHP it would've refreshed the page which can be quite annoying and time consuming for other people. My aim is to make my site as fast as possible with the knowledge that I have. Eventually I will add data compression to the images so the speed of the site will be even faster. Next I'm going to work on the Log In feature or contact us feature.
Finally got the PHP script working to be able to sign a user in. Although it says in the picture there are only 26 lines of code that I had to do I have to go create another 2 functions to make sure the login system actually worked correctly. Another problem I had was redirecting the user after they have successfully logged in. If I used the PHP header function it would have loaded the page I wanted the user to go to in the status div that should say the errors. To get around this problem I used to JavaScript inside PHP and the user after successfully logging in is redirected to the home page. The top links also change when you're logged in to 'My Account | Log Out'. Eventually there will be 'Cart()' there too with the number of items you have in the brackets.
Probably had the worst day ever today but oh well, my site's coming along slowly. I just finished the add items part and I'm now currently working on the display items part. I found out how it should work I think. I'll put this to the test soon to see how it goes. Probably going to be up working on this now for a few more hours I don't particularly fancy sleeping so I use this to distract myself. Next I think I'll work on the edit items and delete items code, I'll do all the styling (CSS) another day.
I've had a short absence of working on my site but I'm getting back to it now. For this week I think I'm going to spend more attention on the styling of how the site looks. I'm still keeping to the basic layout but spicing it up a bit. This is what I came up. All the gradients are very browser compatible too. But no surprise. IE has some bugs. I'll get onto that soon.
The final layout for my site that I have chosen is that of the image below. It's not a permanent layout but for now it'll be okay. I will add some tweaks before the initial launch to make it look better. Eventually I want there to be no body scrolling for the site, you'll only be able to scroll inside the site. Not sure as to why I want it like this but I like the idea of it. I'll need to improve my CSS for this. I'll get there eventually though.
No comments:
Post a Comment