ISSN: 1693-6 930                                                          9      Web Ba sed L aboratory Ta sk-Subm itter Applic atio n M odel (So e tam  Rizky  Wicakson o)  WEB BASED LABORATORY TASK-SUBMITTER  APPLICATION MODEL       Soetam Ri zk y  W i caksono   Information S y stem Study Program , Ma  Chu ng University Indone sia   Jl. Villa Puncak Tida r N-01 , Malang, Ja wa  Timu r, 65 151, Phone/F a x: (0341 ) 55 0171/5 501 75   e-mail: soetam@gm a il.com      A b st r a k  Proses b e la jar m engaja r  di dalam  laborato r iu m   m e rupakan ke wajib a n  dalam   peng ajaran di  bidang te kni k  kh ususnya bidan g tekn ol ogi inform asi  (TI). Tetapi, tidak  selam a n y a   aktifitas praktikum  di laborato r ium  dapat m enj adi hal ya ng m enari k  bagi p a ra m aha siswa,   sehi ngg a do sen wajib m e m buat latihan  yan g  b e rb asi s  latiha n. Tet api, sa at latih an suda h  sel e sai  dike rja k an, p a ra do se n sering kali m e rasa kesulitan  dalam   m engum pulka n tiap tugas  ya ng   terse b a r  di  kom puter  yan g  ad a di  lab.  Melihat  ke n dala te rsebut , m a ka tim bul gag asan u n t uk  m e m buat sebuah a p likasi  yan g  dap at m e m bantu kegi atan p r a k ti kum  di labo ratorium  kom puter  lebih n y am an bagi d o se n dan m aha siswa. Te rle b ih untu k  p a ra d o sen, sehi ngg a da pat  m engendali k an ha sil pra k tikum  dari  m ahasiswa  serta dap at m e m batasi wa ktu dari l a tihan  terse but seca ra otom atis. T e tapi, dalam  m e m bangun seb uah  aplikasi di bi dan g  sistem  inform asi   m e m butuhka n  sebu ah pro s e s  pend ahul uan ya ng din a m a kan m odeling atau pe m odelan. Dal a m  riset ini, sel a in dijela ska n  m engenai  rancang b a ngun d a ri si stem  inform asi yang a d a  di  laboratori u m  term asu k  di d a lam n ya  pro s e s  p e m odel an. Sistem  i n form asi  ya n g  dib ang un i n i,  se karang tela h sele sai di ke rjakan da n di guna ka n dala m  prose s  bel ajar m engaja r .    Kata kunci :  Task Subm itter, Labora tory, ASP .NET, Website      A b st r a ct  Teaching l e arnin g  p r o c e ss i n  lab o ratory  is  obli gatory in e ngine erin g e ducation  esp e ci ally for course in inf o rm ation tech nolog y (IT).   To m a ke labo ratory acti vities be com e  more   intere sting for the stude nts,  lect urers m u st build a ppli c ation - ba se d  exe r ci se fo r the stud ent, b u t  after stud ents accom p lish e d  their  sho r t e x erci se, it  is f ound th at lect ure r s  got difficulty to  com p i l e   and  grade  all  the  exercise s. Thi s   pap er is ba se d o n  the i dea  ho w to  o v erco m e  the p r obl em  abo ve, in ord e r to m a ke a c tivitie s  in the  labor atory com f ortable for both le cture s  and  stude nt. It  is expected t hat the l e ctures  will abl e  to fully  control all  practical acti vity and save the tim e   autom atically.  To m a ke a ppro a ch to  solve  t he p r o b lem  in IT, a m odeling   pro c e s s m u st be  con d u c ted first. There for,  firstly, thi s  pa per  e x pl ain th e m odel app roach for th e  probl em  abo ve,  then the IT   desi gn fo r p r actices in la borato r y is  d e scrib ed. Th e IT de sig n   to overcom e  the  probl em  has  been effe ctively ap plied in  the real tea c h i ng learning p r ocess.     Key w ords :  T a sk Subm itter, Laborat ory, ASP .NET, Website      1. INTRO DUCTIO N     Labo rato ry activity in higher edu catio n  is be comin g  an obligation e s pe cially in teachi ng   techni cal  cou r se s in IT fi eld. While i n  many unive rsitie s try to prop ose cre a tive comp uter  laboratory a c t i vity during it s impl ementa t ion, ther e  are also m any  barrier s i n  creating  su ch  kind  of teachin g  a c tivities [1]. Therefo r e in  Ma Chu ng University, esp e cially in Info rmation Syst em  study pro g ra m, laborato r y activity  directly being con ducte d by the le cture r  itself  rather than g i ve  it to laboratory assi stant.     Ho wever, in  orde r to m a ke labo rato ry activity beco m e mo re inte restin g for th e stud ents,   lecturers mu st build  appli c ation - ba se d  exerci se fo r the stud ents [2]. On the  other h and,  after  stude nts fini sh th eir sh o r t exer ci se,  lect ur er s alw a y s   h a v e   di ffic u lty to gather them  all.  Particul arly when the  cla ss size is  big (more th an 4 0  stude nts at  once) a nd it  must b e  colle cted  Evaluation Warning : The document was created with Spire.PDF for Python.
                                 ISSN: 16 93-6 930     TELKOM NIKA   Vol. 8, No. 1,  April 2010 : 9 - 16   10 one by  one.  Surely, this  d a ily barrie r  can ma ke   le cture r s wa ste t heir time  onl y for gath e ri ng   st ude nt s’ ex e r ci se s re sult .     The im po rtan ce  of thi s  inte ractive  sessio n  is to  create  active  involv ement from  students  in labo rato ry  activity. Since that a c tive  parti ci patio n  will g ene rat e  better resu lt for stu dent s of  informatio n system rat her  than pa ssive  activity  such as  o ne way communi catio n   [1].  Ho wev e r,  empiri cally it still become s  anothe r ob sta c le to pro d u c e su ch ki nd o f  activity.    Loo king  out this  kind  of ob stacl e  that se em  to be  not i m porta nt but  really ma ke l e cturers  more  de spe r ate in de aling  their daily a c tivity, t hus it blown up  an i dea to  solve i t. The main i dea  is ho w to m a ke a  sim p le i n terface a ppli c ation fo r  stu dents  and  also lectu r e r s, t hus th ey ca n  do   laboratory a c tivity more e n joyable. Mo reove r ,  for the lectu r e r s,  they really can m a ke the  exerci se m o re efficient, ha ving great co ntrol for t heir  stude nts’ exe r ci se s re sult  and al so ca n limit  cla ss t i me.       Comp uter l a borato r y a s  t he mai n  focu s in thi s   re search  sh ould  become  not  only as   prog ram m ing  practi ce ba se camp for  students, othe rwi s e, it sho u ld also b e come a pla c e  to   provide  stim ulating a nd  maintainin g i n tere st of su bject a s   well  as fo steri n g  stude nts’  cri t ical  awa r en ess [2 ]. Thus, the a pplication sh ould al so p r o duce stud ent s’ a w arene ss about thei r o w n   activity rather than conve n tional  metho d  that already b e ing do ne.     Therefore, to  implement t h is thou ght then  it is  con s ide r ed th at web b a sed a pplication   woul d be  the  best  ch oice. There i s  al so empi ri cal e v idence state d  that  web b a se d ap plication   sho u ld be co me gre a t ch o i ce in lab o ratory acti vity that does  not n eed big inve stment [3]. Sin c e  that web based application  will  not need any installation, thus it  i s  going to be the most effici ent  way for th e p r oblem. It will  be al so b e tter if it in clud es  AJAX feature ,  hence it can  make le cture r s  have co ntrol i n  limiting cla s s time better.     Ho wever, in  building  an in formation  system we all  m u st meet th e  requi rem ent throu g h   exact m odeli ng. Th us, i n  t h is  re sea r ch  also  in clud es mod e ling  act i vity alongsi d e the  appli c at ion  building  activi ty. Modeling itself utilized  use  case di agram as well  as activi ty diagram to clarify  what the ap pl ication  sho u ld  be built.     Use ca se  diagra m  is pa rt of UML or   Unified M ode ling Lan gua n ge that ha s been a   stand ard m o deling la ngu age for  software devel op ment sin c e 1 997 that dev elope d by Grady  Booch,  Jame s  Rum baug h, and  Ivar  Ja cob s o n . UML  as mo delin g  lang uag e th at ha s  beco m e  stand ard  wo u l d help ma ny softwa r e p r oj ects from it s f a ilure.   Un su c c e ssf ul  sof t w are p r oje c t s  f a il  in their o w n  uniqu e way s , but all su cce ssful p r oj ect s  are ali k e in  many way s . There are m any  element s that  cont ribute to  a su cce ssful  softwa r e o r g a n izatio n; one  comm on thre ad is th e u s e  of  modelin g [4].  Ho wever, a  b u sin e ss mo d e l ca n neve r   be totally accurate o r   com p lete, simply  becau se   no two ob se rvers  of a  bu siness  will h a ve an i dent i c al   perce ption of  the  bu sin e ss  or agree on an   accurate m o del. As  note d  ea rlier, th e  bu sine ss   m odel can not and sho u ld n o t  co ntain  all   the   details of the  busin ess. A model that at tempts  to do  so ri sks b e co ming just a s   compl e x and  as   hard to  comp rehe nd a s  th e bu sine ss [5 ]. Thus, mod e ling  sho u ld  be sim p le n e v erthele ss i s   must  be also com p rehe nsive fo r the audie n ce.  On the othe r hand, the mai n  rea s on to u s e UM L as b u sin e ss mod e ling me rely based o n   ideal state of  busi n e ss mo deling  which are [5] :  a.  Must u s e well  proven e s tab lishe d tech niq u e   b. Standard  not ation   c.  Short learnin g  curve   d.  Ne w and e a si er way s  to view an organi zation or a bu siness    Since that th e re sea r ch u s ed  we b ba sed ap plicatio n, it used AS P .NET 3.5 in ord e r to   simplify the i m pleme n tatio n , becau se t he lab o ra to ry  that being  use d  a s  testi ng pla c e  uses   Wind ows Se rver  as its l o cal  file server. The r efo r e it is  ea sie r  to d eploy  the web b a sed   appli c ation ju st by con s um e IIS  feature insid e  its se rver.     ASP .NET is  part of .NET  Fr amework  or c o mmonly called onl y as   .NET. .NET is  as   a   big cont rol sy stem with two key elemen ts. First is  the  .NET framework cl ass lib rary. This lib rary  has tho u sand s of cla s ses o r gani ze d into name s pa ce s.  This large se t of classes  was de sig ned t o   provide  all th e cl ass  sup p o rt for virtuall y  any appl i c a t ion a d e velo per  wo uld  wa nt to create.  This  libra ry is a  repo sito ry of reu s abl e types fo r obje c t-o r iente d  d e velopme n t. For exam pl e,  System .Web. UI   Names p ac e allows   to c r eate s e veral  different ASP.NET s e rver  c ont rols and  us er interfac es  [6].  Evaluation Warning : The document was created with Spire.PDF for Python.
TELKOM NIKA   ISSN:  1693-6 930     ■     Web Ba sed L aboratory Ta sk-Subm itter Applic atio n M odel (So e tam  Rizky  Wicakson o)  11 Secon d , an d  at the core  o f  .NET, is th e co mmon  la ngua ge  runti m e. The  runti m e is  a   manag eme n t age nt for  co de a s  it  executes. All of  the  servi c e s ,  su ch  as me mory a nd th read   manag eme n t and  remotin g , are  han dled by the .NET frame w o r k. For exam ple, VB.NET ha s  ac ce ss  t o  t h e  sa me f a mily   of  cla s se s a s  doe s  C# .  It is d e si gne d to  aid i n   stri ct t y pe safety an d   other  stru ctures that secure bot h ro bu stness an d security. Micro s o ft refers to  co de that target s  the comm on  langu age run t ime as man aged  cod e  a nd refe rs to  cod e  that do es not target  th e   runtime a s  un manag ed cod e . [6,7].    Knowin g that  the ap plication is u s ing  web  ba sed  a pplication, he nce it  nee d p a rticul ar  modelin g in  it. The mai n  aim of m odelin g in  web ap plicatio n is to fulfil  a re quirem e n t   spe c ification,  whi c h i s   co nsi s ts  of do cumen t, data b a se  re co rd  a nd mo del s, that attempt to   unambi guo usly describe  a  software  system to  be   built. Each d o cum ent  usu a lly incl ude s a  descri p tion of  the docum e n t's pu rpo s e,  version n u m ber, co ntrib u tors, an d othe r admini s trati v e   informatio n, in additio n  to  a list  of sp e c ific  system  requi rem ents.   The  sp ecifi c ation can  be  a   singl e d o cu ment for  sm all sy stem s  or  ca n b e   distrib u ted  o v er multipl e  do cum ents and  databa se s. A  system 's re q u irem ent s mu st al ways  be  available to  n early eve r yon e  conn ected  to  the proj ect.  An excelle nt way to do thi s  is to m a ke  them availa ble on a n  int r anet via a  Web  serve r . If the application i s  goin g  to b e  a We b app lication, the i n frast r u c ture  for doin g  this is   prob ably alre ady in place [8].      2. RESEARCH METHOD  This resea r ch tried to m odel the  syst em usi ng UML diag ram,  particularly  use  ca se  diagram a nd  activity diagram, as  sh own in Fig u re  1  and Fi gure  2, re spe c tivel y . The diag ra ms  s h ou ld  be  ab le  to   c l a r ify bus in ess  pr oc es s in  th e a p p l ic a t io n ,  thu s  it c a n b e   mo re  p r e c is e whe n   developin g  p hase being d one. Figu re 1  is repres enti ng  use ca se diagram  as common  bu sin e ss   p r oc es s .     Le c t u r e r s U p l o ad  C o u r se M a t e r i al Up l o a d  T a s k An n o u n c e  T a s k St u d e n t s  Do w n lo a d  C o u r s e   M a t e r i a l Subm i t  T a s k M a in t e n a n c e  F i le << e x t e n d > > << e x t e nd > > La b o r a t o r y  S t a f f M a i n t e na nc e  D a t a S e t  T i me  L i mi t << i n cl u d e > >   Figure 1. Use  Case Dia g ra m  Evaluation Warning : The document was created with Spire.PDF for Python.
                                 ISSN: 16 93-6 930     TELKOM NIKA   Vol. 8, No. 1,  April 2010 : 9 - 16   12 L a b o ra t o ry  S t a f f Le c t u r e r s St u d e n t s M a i n t e n a n c e  C l a ss  D a t a G i v e  A cce s s  Pr i v i l e g e D o w n l o ad  C o u r s e  M a t e r i al Do w n l o a d  Ta s k Su b m i t  T a s k No  P r i v i l e g e U p l o ad  C o u r s e  M a t e r i al Up l o a d  T a s k Ha v e  P r i v i l e g e Reac h  t i m e  l i m i t Ch e c k  s u b m i tte d   tas k S t il l in  t i m e   l i m i t   Figure 2.  Activity Diagram       3. RESULT A ND  DISCUS SION   The develo p m ent pro c e s s of this ap p lication  p r evi ously initiate d by modelin g system  and already  shown in precedi ng sub chapter. The  development itself utilized ASP .NET 3.5 on  behalf of Visu al Basic p r o g ramming la ng uage that alre ady inclu de AJAX cap abilit y inside it.   AJAX capa bil i ty was used mainly to help time  limitation feature in  this appli c atio n. Thus,   whe n  the   stu dents try to  submit thei r ta sk fro m   ce rtai n cou r se, the y  will  have  a l i ve timer in th eir  web browser.  On the other hand, while  AJAX capabi l i ty in ASP  .NET already put in a nutshell in   a frame w o r k  named  a s  A SP .NET AJAX therefore  it  is ea sie r  t o  have it im p l emented  in t h is   appli c ation.   In the a pplication, there  are th re e u s er le vel s  th at inhe rited f r o m  use  ca se  diagram   whi c h a r e: St udent s, Lab o r atory Staff a nd Le ctu r ers.  Students’  rol e , as it  stated  previo usly, can   have  p r ivileg e   of downloa ding co urse  material   a s   well as   s u bmitting their task to their  s p ecific   cou r ses from  ce rtain le ctu r er.  While  le cture r s have  role th at all o w the m  to  set up  their  own   assignm ent  and  also u p l oadin g  thei r co urse  ma t e rial.  T hey also   can do wnlo ad stud ents’  assignm ents  that have alre ady been u p l oadin g  via task  sub m itter.   The l a st  role  is for l abo ratory  staff that  act  a s  a n  admi n istrato r  for thi s  a p p licatio n.  Labo rato ry staff can hand le data main tenan ce  process for cla ss arra ngem en t, cleaning u p   garb age  file  and  al so  resetting  u s e r  pa sswo rd   if there i s  a n y  difficulty in  login  p r o c e ss.  Labo rato ry st aff can  al so   add  additio n a l  ann oun cem ent for all  rol e s  or certai n  role, th erefo r e it  can ma ke a w aren ess for e x plicit pro c e s s su ch a s  dat a backu p or chang es in a p p licatio n.  Evaluation Warning : The document was created with Spire.PDF for Python.
TELKOM NIKA   ISSN:  1693-6 930     ■     Web Ba sed L aboratory Ta sk-Subm itter Applic atio n M odel (So e tam  Rizky  Wicakson o)  13 After gra s pin g  up the  role s, then it can  be ge nerate d  into sitem a ps that  will repre s e n t  each role in  web  ba sed  a pplication. Th e sitem a p s  th at also  be co me the me nu  in we b ap plication  are de scri bed  in Figure 3,  Figure 4 and  Figure 5.        Figure 3. Sitemap men u  for  Labo rato ry Staff        Figure 4. Sitemap men u  for  Lectu re r          Figure 5. Sitemap men u  for  Students          Figure 6. Layout for Maste r  Page s      In we b ba se d ap plicatio n  develo p men t  pro c e ss, th ere  are  stag es th at have  alre ady   compl e ted to finish its deve l opi n g  pr oc ess .  T h os e  s t age s  a r e :   1.  Cre a ting site map as m enu   Sitemap in ASP .NET is  implemented  as  an XML file for each role, therefore it is  not only a   pape r ba se d  model b u t it sho w s the  re al flow  in  we bsite. Th e sit e  implem enta t ion alre ady  decl a re d in previous pi ctures a s  menu s  for each rol e .  2.  Develo p Mast er Page s.   Webs ite implementation in ASP .NET c a n  be  han dled as  one big  obje c t  template  c a lled  Evaluation Warning : The document was created with Spire.PDF for Python.
                                 ISSN: 16 93-6 930     TELKOM NIKA   Vol. 8, No. 1,  April 2010 : 9 - 16   14 Maste r  Pag e s . In this  app lication, o n ly use  one  Ma ster Page s to  be the  ancho r of all  web   page s in the web s ite. The  Master Pag e  itself  use s  a CSS (Ca s cading Style Sheet) file in  orde r to creat e its layout.   Layout of M a ster P age s in  this  web s ite  only consi s t o f  three  part s ,  whi c h a r e  : h eade r, main   part and m e nu part. Header parts  only hold the  websi t e’s logo, whil e me nu part  will become  the contain e r of men u  fro m  sitem ap’ s f iles. Mai n  p a rt itself be com e  a  Conte n t Place Hol der   that will  be the foremo st contai ner  of other   web pages. Layout  stru cture of   Master Page  descri bed in  Figure 6.  3. Implement  da tabase   Datab a se  server that  bein g  u s ed  in  this a ppli c ation   is SQ L Se rver  2005  Express Editio n.   The choi ce  merely based on  default database that come  with ASP .NET and also that   Express Edition is a free e d ition, thus it  can be im ple m ented with o u t any additional co st at  all.  4.  Implement da tabase co nne ction   Datab a se co nne ction in this web a ppli c ation bei ng p r epa re d in co nfiguratio n file of website.  Usi ng A D O . N ET a s  p a rt  of .NET F r am ewo r k,  wh ole  co nne ction i n  we bsite  si m p ly being  put  at  we b.co nfig  file, hence it will  be  easi er if in the future deve lopment database  server is  going to be u pgra ded in b e tter databa se  serve r  such a s  SQL Serve r  Enterpri se E d ition.           Figure 7. Screen shot Sam p le  for Le cturers’  Cla ss Li st    Figure 8. Screen shot Sam p le for Le cturers’  Uplo ad Course Mate ria l       5. Develo p  pag es    Web p age d e velopme n t is co nsi s t of two mai n  ele m ents  whi c h  are: we b pa ges that h a s  Evaluation Warning : The document was created with Spire.PDF for Python.
TELKOM NIKA   ISSN:  1693-6 930     ■     Web Ba sed L aboratory Ta sk-Subm itter Applic atio n M odel (So e tam  Rizky  Wicakson o)  15 function ality to view data ,  and web  page s that  has fun c tion ality to view as well a s   maintainin g t he data.  We b pag es whi c h o n ly can  view d a ta  comm only compo s ed  of  GridVie w  co mpone nt as i t s main com pone nt. Whil e se con d  type of web p a g e s con s ist of  GridVie w  an d  al so  Fo r m Vi e w  that  will  give  cap abili ty to inse rt a nd to  edit d a t a in tabl es.  Each web pa ges  sampl e  can be seen in  Figure 7 a n d  Figure 8.   6.  Adding AJAX  capability  After all web  page s h a ve a l ready  being  i m plem e n ted  and b e ing te sted as compl e te we bsite,  last step i n  developme n t  stages i s   addin g   AJA X  capa bility. There  are  many AJAX  frameworks t hat can be applied i n  a web a pplication, however,  ASP  .NET already provide  great built-in  framework c a lle d ASP .NET AJ AX.  This   eas y  and s i mple framework  als o   come s with it s additio nal e x tender that can b e  do wnl oade d freely and come in  open  sou r ce  format call ed  AJAX Control  Toolkit.   Mainly, AJAX cap ability added into t w o co re featu r es  which a r e   Students ’  ta sk  su bm itter   and al so  L e c ture r ta sk  download er .  In task  sub m itter feature, AJAX bei ng u s ed a s   cou n tdo w n ti mer  and  sim p lify uploadi ng  pro c e s s, thu s   stude nts  wil l  not h a ve a n y difficulty to   uploa d their t a sk. Whil e in  task  do wnloa der featu r e, A J AX wa s a ppl ied in  Gr id View  that can  handl e do wn loadin g  process, t hus l e cture r s will  not have to  refre s h th eir we b pa ge s  whe never th ey wa nt to d o wnl oad  stud ents’ ta sk fil e . Screen sh o t  of main fe a t ure  can  be  see n  in Figu re 9.        Figure 9. Screenshot  for A J AX Timer  capability      4. CONCLUS I ON AND FUTURE  DEVELOPMENT  After mod e lin g an d d e vel oping  process fini she d  fo r the  appli c ati on, the r e  are  so me  con c lu sio n s t hat can b e  drawn, which are:  1.  After we bsite   being  teste d , there  are so me mi no r   r e qu ir e m e n t s th at mu s t  be   r e vis e d in  ne xt  pha se. Tho s e  are:   a.  Uplo ad a ssi g n ment featu r e sh ould b e   more  pre c i s e  in timer  count down calcul ation, thus  it can be only  seen in  certa i n time t hat already bei ng set up by lectu r ers.   b.  AJAX Timer  can b e  de cei v ed usin g da te/time modification in  clie nt side; ho we ver, the   timestamp al ready bein g  n o ted in file up l oad log, therefore the tri c k is usel ess.   2.  AJAX ca pabil i ty can  be  cra s he d d o wn  wheneve r   it i s  i m pleme n ted i n  a  com pon e n t that ne ed  full postba c k pro c e ss  su ch  as file deleti on or f ile uplo ad pro c e s s. Ho wever, it can be solved   usin g  po stba ck tri gge r  pro perty from A SP .NET AJAX. On the other ha nd, in  a contain e r   based compo nent like G r id View, it can b e  modified a s   template fiel d  to s o lve this barrier [7].  3.  Web s ite  alre ady bei ng  im plemente d   an d bei ng   teste d   a s   l o cal live application in laboratory,  and so far th ere is n o  maj o r revi sion n e eded fro m  le cture r s or  stu dents role. T hus it ca n b e   assume d that modeling of  busi n e ss p r o c e ss  can fulfil l user  req u ire m ent [8].  4.  On the oth e r  hand, eve n th ough th e ap pl ication  onl y set up a s  exercise ba se d a pplication, in  its testin g a nd impl emen tation it alre ady ca n p r o duce inte ra ctivity that can enlig hte n   lecturers in  creating  scaffo lded g oal-ba s ed sce nari o . This  scena rio  is commo n  pra c tice i n   Evaluation Warning : The document was created with Spire.PDF for Python.
                                 ISSN: 16 93-6 930     TELKOM NIKA   Vol. 8, No. 1,  April 2010 : 9 - 16   16 informatio n system teachi ng techni que  that  lead students un de rstand com put er labo rato ry  fas t er and bet ter [9].  Then in th e future d e velo pment of this web  a ppli c at ion, there  are som e  modi fication s  and ad ditiona l features that  can be ma de :  1.  Web  ap plication  can  be  mo dified to  meet  SC O R M  sta ndard, h ence  it can  be i n te grated  in  e- learni ng po rta l  that us e the same  stand ard.  2.  Web  appli c at ion ca n be  merg ed into  existing  a c ad emic  p o rtal, thus stude nts  sco r e can   easily integ r a t ed in aca d e m ic po rtal system.  3.  The a ppli c ati on al so  be co me initiation   step i n  cre a ting  collab o rative learning  proje c t fo r  researcher, since that the framework  of the  future project of collaborative learni ng will  inclu de this a pplication a s  its start up  ste p  [10].      REFERE NC ES   [1].   Fellers , JW. Firs t Impressions : An Alte rnative Way to Start a  Systems De velopment  Cou r s e .  Jou r nal of Inform ation System s  Educatio n . 20 08; 19(1 ) : 5-1 0 .  [2].  Micha e l  N.  An Empiri cal  Study Co m parin g T he  L earni ng E n vironm ents of  Open  an d   Clo s ed Com puter La boratorie s.  Jou r nal  of Inform atio n System s Education . 200 2; 13(4 ) :   303-314.   [3].  Cha o  L. Lab  Developm en t for Deliveri ng  Informatio n Systems Course s Onlin e at Small  Camp uses.  Journ a l of Ca ses on Info rm ation Tech nolo g y  (JCIT ) . 20 06; 8(1 ) : 16-3 0 .  [4].  Booch  G,   Ru mbaug h  J,  Ja cob s o n  I.  The   Unifie d  Mo d e ling Lang ua ge User Guid e , Sec o nd  Edition. New  York: Addi so n We sley; 20 05.  [5].   Erikk s on  HE, Penk er M.  Bu s i ne ss  Mode lin g   w i th  UML :  Bu s i ne ss Pa tte r n s   a t  W o r k , Ne w  York: John  Wiley and Sons; 2000.  [6]. William  S.  ASP .NET 3.5 B eginners  Guide . Ne w York: Mc Gra w  Hil l ; 2009.  [7].  Wicaks ono  SR.  Im plementasi  Te kni k  Aja x   Dala m  Situs Web 2.0  De n gan Atla s  Fram ewo r k . SNIKA, UPB. Bandung. 20 06.  [8].  Conallen  J .   Building  We b  Appli c ation s  with  UM L .  Secon d  Editi on. New York: Addi so n  We sley; 2002 .  [9].  Bunch  JM. An App r oa ch  to Redu cing   Cog n itive Lo ad in  the T e achi ng  of Introdu cto r y  Database Conc epts .  Jo urn a l of Inform ation Syst em s Educatio n . 20 09; 20(3 ) : 26 9–27 5.  [10]. Wicaks ono  SR.  A Fra m ework of  E-Coll abo rati ve  Lea rnin g  In Hi ghe r Edu c ation  Environm ent . IIS. UIN Sunan Kalijaga.  Yogyaka r ta. 2009.         Evaluation Warning : The document was created with Spire.PDF for Python.