MoeDIA

MoeDIA - Moe is Definition of Indeterminable Arts

MoeDIA, sounds cool and moe! Yeah, this is one of my projects for this semester. I think this project is the project worth to be posted in my blog, because this project is the best project in this semester. This project was created for Internet Application Development subject's final project.

What does this site, MoeDIA, do anyway? The task of the project is to create an e-commerce website that sells photos. Sounds crazy, but this kind of website DOES exist. Try http://www.diomedia.com and you'll know what I'm saying. This diomedia site sells photos, and they mean business. MoeDIA is also a site that sells photos, MOE figure photos!

I worked this project with 3 friends as a team. The one who suggested selling figure photos was me. I know my fellow team members would directly agree with me because I'm the one providing the photos. My lecturer wanted at least 300 photos were ready and uploaded in this site. After some counting, i found out that my photos still haven't reach that number, so i asked ron~ to help, and he gave me permission to use his photos for this site. Thank you very much ron~ ! I wouldn't be able to finish this project without your help.

The basic layout design is done by my friends, I'm the one who put it up in HTML. The logo, Reinforce photo in the logo, and the banner were created by me. I used Vista wallpaper, some nice Photoshop layer masking, and Rein's photo for the banner. The rest of the layout was done by my friends.

Anyway the title was also my idea. Came from diomedia, i could only think title that revolves around "Media" word. So i came up with this MoeDIA word, yeah... moe really influenced us all, including my project. Not only that, i also came up with this line :

Moe is Definition of Indeterminable Arts

which is MoeDIA in short, cool huh? XD

Series list page, find photos by browsing the series.

Back to the topic, this site sells moe figure photos, so the first step is to create some categories. I decided to categorize the photos into some classification: Series, Characters, Figures, and Manufacturers. If you're a member of Tsuki-Board, you'll know that I'm a little bit to far with the categorizing. But this is about subjects, and i have to met the lecturer's requirement, that is to categorize the photos for at least 3 classifications.

Talk about layout, i think this is the best page I've ever think. In the left side of Series row, there's a thumbnail of photo for the particular series, selected randomly of course. And the right side of the row is the coolest feature in this site IMO. A bluescaled photo, cropped around eyes, looks cool i guess.... And if the mouse hovered on the row, it will light up and showed its real color. Look at the screenshot above for example.

The gallery page, also equipped with tags.

This is the gallery page. Just like your usual gallery / image board site, i guess... Every photo is equipped with 2 buttons, add to favorite and add to cart. I used AJAX scripting here. For the detail, see below. Maybe some of you already familiar with the photos. Yeah you've seen them. The photos are my photos and ron~'s photos. Total of 325 photos uploaded here, and all of them is my photos and ron~'s photos. Once again thanks ron~ for providing me the photos.

Some of you may wonder who's doing what here. Here I'll list who's doing what (if one of my team member sees this maybe they'll get angry because i exposed their nickname here :P) :
- welsen : Image PHP processing. Created the image upload system, which include the resize to small and medium size, cropping and resizing of thumbnail image, and also watermarking the image (using GD library).
- c_nyo_88 : Created the HTML layout for every pages in this site. Sounds tough, but that's his job. Completing layout for every pages, except without PHP script attached.
- wili_huang : Created the whole admin control panel. To view, edit, and delete things in database, like figures, manufacturers, series, manufacturers, user, etc.
As for me, i was doing the rest. Yes... the whole functionality (PHP scripting) in this site is done by me. Starting from PHP ,Javascript, and AJAX scripting, administering the database, generating the SQL scripts, etc. Pretty though, but at least i didn't have to do the layout.

Photo detail page, not very interesting, but this is where you see all kind of details.

This is the photo detail page. I forgot to mention that i also have tags system here. Too bad the tags system isn't as great as you think. It's just still the basic. I put up date uploaded, author, size, and figure - character details for the photo detail.

Notice that the photo is watermarked. The watermark logo is the same as the site logo. The one who worked the watermarking process is my friend welsen. He used GD PHP library to process this. Actually the whole image uploading and processing was done by him. That really helps a lot because i don't have to manually resize and create a thumbnail for all 300 photos myself XD.

The user profile page, it's my profile!

This is the user profile page. Not much going on here. Just a little detail of the user, without "about me" and stuffs. My target wasn't really to design a real site. This site is created just to met up with the lecturer expectation, so i decided not to get into unnecessary details. The favorite photos part is the strongest point of this page. Every user can add their favorite photos up to 6 photos, and it will show up in each user profile pages.

Some nice features in this site, such as dropdown menu, rollover image, and AJAX shopping cart.

Here are some nice notable features in this site. Rollover background images on the sidebar, dropdown menus on the menu bar above, and the AJAX shopping cart / favorite photos layer.
As for the sidebar, i used td:hover CSS scripting, as easy as you think, just change the background-image property in the td:hover part. For the dropdown menus i used Javascript, well for this part Javascript is a must.
And the last is AJAX shopping cart / fav photos layer. By clicking star / cart button in the main page, you can add the photos directly to your cart or fav photos without changing page. The shopping cart layer will appear directly after the server finished processing the cart / fav photos. You can see up to 6 fav photos there, or 6 latest items added to your cart.

Well that's my project, but that's not all. I didn't show the user CP and admin CP pages here. I'm still thinking of rearranging this site, throwing out the "e-commerce" part, and make this site become my personal figure photo gallery and host it (and once again thanks to ron~ i got a free host @ sonicver2.otadesho.com, except i haven't used this host for a real site / blog).

Well that's it for now! See you at the next post!