Vorige week stonden we nog te trillen voor een groot auditorium, vandaag kan ik de Grammoshop eens rustig online voorstellen.
Voor het project van het 3de jaar multimedia moesten we in een cluster van 9 mensen een “uitvinding” voorstellen. Elke cluster werd opgedeeld in 3 groepen: een online, offline en video groep. De online groepen moesten een dynamische webshop rond de uitvinding maken, de offline een flex applicatie, en de video groep.. guess what.. die moesten een video produceren.

Wij kozen als uitvinding voor de grammofoon.
Gelukkig had ik in het begin van het jaar het vragenblad omtrent onze hobbies en interesses eerlijk ingevuld, want daarop hebben de lectoren zich gebaseerd om ons in te delen. En dus kwam ik in het online gedeelte terecht. Joepie!

Idee

Een webshop voor grammofonen maken leek logisch. Maar het is niet zo gemakkelijk om goed fotomateriaal te bekomen aangezien dit geen alledaags voorwerp meer is. Maar op een webshop moet wel beeldmateriaal komen om potentiële klanten te verleiden met ons product dat we aanbieden. Daarom moesten we eigenlijk een stapje verder gaan in het brainstormen over het concept over onze webshop.
We kregen ook de opdracht om een 3D-object van onze grammofoon in de webshop te integreren. Daardoor kwamen we op het idee om een webshop te maken waarbij mensen zelf hun grammofoon kunnen samenstellen. Door het digitaliseren van de grammofoon konden we deze opsplitsen in verschillende onderdelen zoals de hoorn, hoornhouder, plaatopleg … Deze onderdelen vormen de basis van onze webshop. En zo kunnen mensen dus hun eigen unieke grammofoon samenstellen.

.NET

Het slechte nieuws: De site moest in .NET worden gemaakt, omdat de andere multimedia student enkel dat kende, wat ik hem niet kwalijk kon nemen. En uiteindelijk valt .NET goed mee. Iedereen klaagt altijd over Microsoft producten, maar van .NET en Visual Studio kan je niet zeggen dat ze slecht gemaakt zijn. Waar PHP uitblinkt in vrije en flexibele code, kon .NET me vooral overtuigen met de taal C# en de debugger van Visual Studio. De kans dat je in C# onduidelijke en onveilige code schrijft is veel kleiner dan bij PHP. Generieke klassen, sterke controles op datatypen en een gestandariseerde manier van structureren. Bovendien is Visual Studio een van de weinige IDE’s die zo mooi integreert met de code (in source view uiteraard)
Het enige nadeel heb je met .NET wanneer je websites moet programmeren met zeer veel vereisten, zoals complexe lay-outs waar gewone .NET datagrids niet aan voldoen.

Technisch

Natuurlijk, ik ga er niet om liegen, ik heb al .NET sites gemaakt voor het Computerwinkeltje en de universiteit van Halmstad. De technieken die ik daar geleerd heb kon ik overnemen, maar er zitten ook veel nieuwigheden in. Een overzicht van de technische kanten van de site:

• MS Server Express, met Stored Procedures
• Volledig 3-tier, met generieke klassen (BOL, DAL, BLL)
• Aparte class-library voor de database klassen
• Volledige integratie met .NET Membership. De databaseklassen werden gebouwd op Membership (dus niet overschreven), wat voor meer flexibiliteit zorgt.
• De eigen tabellen zijn gekoppeld aan de Membership tabellen. Dit zorgde natuurlijk voor een leuk database diagram.
• Save-methode voor elke klasse die zowel voor opslaan als creëeren dient
• Caching
• Gebruik van .NET Profiles om de adresgegevens op te slaan
• Formulieren zitten in Usercontrols, met Usercontrol templates

• Intensief gebruik van jQuery met plugins zoals Accordion
• De meeste javascript referenties staan onderaan in de broncode om snelheid te winnen
• Schuifeffecten in de adminpagina’s om plaats te winnen
• Propere leesbare CSS files, waarbij print.css en screen.css van mekaar gescheiden zijn
• Aparte stylesheet style.css, die enkel opmaak code bevat
• Integratie met ASP.NET Themes, met conditional comments voor IE css bestanden
• HTML 4.0 Strict, weinig table tags, title en alt tags voor usability, valideert in de mate van het mogelijke (door .NET)
• Controle op cookies en javascript
• Cross-browser: Firefox, IE6 (enkel front-end), IE7, Safari. Opera voorlopig nog niet

Functionaliteiten

De site bevat ook veel functionaliteit. Centraal staat het shopproces. Verder ontwikkelden we ook

• Nieuwsberichten, met RSS feed
• Statische pagina’s voor de geschiedenis van de grammofoon, en het filmpje van de video groep
• Contact pagina
• Beheerpagina’s voor de admin en winkelbeheerder(s):
  • Beheren van nieuwsberichten
  • Beheren van de onderdelen van de shop (nieuwe afbeeldingen toevoegen)
  • Beheren van gebruikers en veranderen van rechten
  • Beheren van modellen
  • Beheren van orders
  • Kunnen zoeken op orders, modellen, gebruikers, en kunnen filteren op datum, gebruiker, order, model,..
  • Backup’en van de database
  • Controle op integriteit: een model kan je niet verwijderen als er nog lopende orders voor bestaan, enz..

Groepswerking

Ik heb meestal niet veel geluk met groepswerking, maar deze keer verliep de samenwerking enorm vlot. Nicky spitste zich als ontwerper toe op het uiterlijk van de site, Filip maakte de 3D afbeeldingen en zorgde voor de slicing en de algemene html en css, en ik voor het dynamische gedeelte, de css en de javascript. Het leuke was dat ze niet enkel wilden doen wat opgelegd was, maar de site duidelijk een meerwaarde wilden laten geven. En dat terwijl ik voor een vorig projectwerk nog bijna werd verweten te diep te willen gaan.

Resultaat

Het resultaat is geslaagd. Shoppen was nog nooit zo plezierig. Uiteraard konden nog veel dingen beter (zoals betere toegankelijkheid, ajax, modellen van anderen kunnen kopen en op kunnen stemmen,  enz..) maar daar was geen tijd meer voor. In ieder geval zal ik de code kunnen gebruiken een van m’n volgende projecten: Stage Digitaal.

Website: www.screenager.be/grammoshop
Demo admin: username: demo, wachtwoord: demo
Alles is fictief! geen echte betalingen, geen echte levering. Demo account kan geen wijzigingen doorvoeren.