#14 APPS 4 : TYPES OF INTERACTIONS


Hi guys! What a tired week. Tiap-tiap hari pon ada assignment nak kene siapkan. huhu. Mungkin memang macam ni la kan gaya hidup student di akhir-akhir semester. So, be positive ! hehe. Okay untuk minggu ini kami diberikan 4 aktiviti yang perlu diabuat di dalam kelas.

Aktiviti 1 : Develop a motion tween animation of pendulum

http://www.youtube.com/watch?v=_jNkzlQhr5E

Aktiviti 2: Upload a morphing animation of butterfly life cycle. Start from lava to butterfly.

http://www.youtube.com/watch?v=cAvtj5I6kxk&feature=youtu.be

Aktiviti3: Implementing frame-by-frame skill, sketch a cartoon and animate it.

http://www.youtube.com/watch?v=eF9ykG0DCkY&feature=youtu.be

Aktiviti 4: Animate the process of pollinating agent.

http://www.youtube.com/watch?v=lHOFU3TT_-w&feature=youtu.be


Pada akhir kelas, kak farhana telah menginstallkan kami apps 4 untuk ipad dan kami juga diberi tugasan bagi apps 4 untuk dibuat dan diupload pada google site. Berikut merupakan tugasan bagi apps 4...

TASK 1: Create a multiple choice questions that will provide a correct or incorrect response upon your answer.
Steps:


  1. Name layer as Question.
  2. Choose text tool -->choose static text-->start typing the question
  3. Insert new layer-->name layer as buttons
  4. Create button using oval tool-->drag it on stage-->choose appropriate color-->resize the button
  5. Choose text tool-->Put 'A' on top of the button
  6. Select whole button-->click modify-->convert it to symbol-->name the button as button A-->choose button type-->OK
  7. Same goes to others 3 button (buttonB,buttonC,buttonD)-->choose appropriate color and resize each button(same size as buttonA)-->convert all the buttons to symbol and choose button type.
  8. Insert new layer-->name as respon.
  9. Choose text tool-->choose dynamic text-->put respon as it variable
  10. Inser another layer-->name as action-->put action script by right click and choose actions.The action script:
stop();
var respon;
respon = " "

    11. Since the answer is A-->right click-->choose actions-->type in the action script below: The action  script:

on(release){
respon = "Congrates, Your answer is correct!";
}

    12. Do the same step for buttonB,C and D (repeat right click-->choose actions-->type in the action script-->just edit the respon according what you want it to be.
    13. Control-->test movie-->done.

TASK 2 : Create one application that allows user to type an input of question provided.
Steps:

  1. Prepare your background
  2. Choose rectangel tool-->fill with color-->drag on to the stage
  3. Choose text tool to type in topic question by make sure it is static type-->name layer as background
  4. Insert new layer-->name as question
  5. Choose text tool-->choose static type-->type in questions
  6. Then, select rectangle tool and create a box on stage
  7. Select text tool-->preposotion ir and make sure selecting input text in the properties
  8. SElect text tool again-->but now choose dynamic text
  9. Insert new layer-->name as buttons
  10. From library paner-->choose play button-->drag to stage-->resize the button
  11. Insert new ;ayer and name it as stop.
  12. Right click on first keyframe and choose actions.Type in the action script below.
         The action script:
         stop();
         var answer;
         answer =" "
         respon = " "

   13. Select button-->right click-->choose actions.Type in the action script below.

         The action script:
         on(release){ if(answer =="print client") {respon="Correct!";}
         else{
         respon ="Incorrect,your answer"+answer+"is wrong";
         }
         }
         on(release,kerPress"<Enter>"){if(answer=="print client"){respon="Correct!";}
         else{
         respon ="Incorrect,your answer"+anwser+"is wrong";
         }
        }

    14. In the input text field-->type in 'answer' for it variable
    15. In the dynamic text field-->type in 'respon' for it variable
    16. Control-->test movie-->done.

TASK 3: Create a Main Menu that contain following actions:
  • A button that navigate from one page to another.
  • A button that navigate from one scene to particular frame of different scene.
  • A button that navigate users to other webpage.
  1. Create the background-->insert logo image,header for the website and button(home,the novels and about)
  2. Next, click on the 'Home' button--> go to properties-->type in 'home' in the instance name field. Repeat this for the other two button, but do change the instance name according to the button name.
  3. Duplicate scene. To do this, go to window-->other panels-->scene--> rename it from scene1 to scene2
  4. Select scene2-->choose text tool-->type in the description
  5. Do the same step as step 4 for scene 1.
  6. Test the movie.Here we can see that the description that we create are keep repeating non-stop. Hence, we insert the action script at the button frame.
            Action script : stop();
     7.  Testing again.
     8.  Before we do that, we insert frame for all layer (until frame no 15) in scene1. Same goes to scene 2.
     9.  In scene 2, insert new layer-->name as novel-->go to properties-->in the same field, type 'novel'. On            the novel layer, it shows the name of frame that we type in.
     10.  Still in the scen2, insert new layer-->name as stop-->right click on the first frame-->choose actions--type action script 'stop();'.
     11.  Now, change to scene 1, right click on the 'The novels' button-->choose actions. Type action script:
     12.  The action script :

              on (release){
     gotoAndPlay("Scene2", 1);
                     }  

     13.  Test the movie-->click on the'The novels' button, it will show novel page. But when click on the home button, nothing happen. It is because we not insert the action script yet.
     14.  To do this, we change from scene 1 to scene 1, then we right click the 'home' button-->choose      actions. Type in the action script.
             on(release){
                    gotoAndStop("Scene1", 1);
              }

     15. Testing the movie again. Now try click on the home button and novel button. It will show the pages.
     16. To activate button 'About' in scene 1-->right click the about button-->choose action. Type in the action script.
          on(release) {
                getURL("http://www.jemariseni.com/");
          }

TASK 4 : Based on your own creativity, create a simple flash application that involves drag and drop function.
Steps:

  1. Draw 3 rectangle named red, yellow and blue.
  2. Select the rectangle-->click modify-->convert it to symbol-->name as redrec-->choose movie clip type-->ok
  3. Repeat step 2 for each rectangle.
  4. Insert new layer-->name as round
  5. Draw 3 circle-->select the image-->convert it to symbol-->name as redround,yellowround and blueround-->choose movie clip-->ok.
  6. Since we want to drag the circle to the rectangle, then, right click on the redround-->choose actions. Type in the action script below.
  7. The action script : on (press) { startDrag(this,true);} on (release) { stopDrag(); }
  8. Repeat step 5 and apply to yellowround and blueround.
  9. Control-->test movie--> done.
You can access my .swf file by go to my site. :)

#13 ANIMATION

Helloooo! Untuk minggu ke-13 ni kami mula belajar untuk apps 3 di dalam Ipad yang diberi. Kami diberi tugasan atau aktiviti untuk dilakukan didalam kelas dengan menggunakan apps 3 tersebut. Berikut merupakan hasil tugasan yang saya lakukan berserta langkah-langkahnya sekali :)

Task 1 : Motion tweening



Steps :
1. Draw a circle. double click it to make sure the shape and the stroke is together.
2. Go to frame 25 and insert keyframe. Drag the circle to the place that u want to move it.Resize the circle if u want. You also can change the alpha, brightness and many more to change the color of the circle.
3. Repeat step 2 according to the number of times you want to move the circle.
4. Go to any frame between 1 to 25; for example  12, then right click and select create motion tweet. Repeat this step at every range of frame that you have done.
5. Next, click control on the menu bar and select test movie to view your animation.
6. Finally, you can save your animation.

Task 2 : Shape Tweening



Steps:
1.Type the text you want using text tool.
2. Go to modify and then click break apart.
3. Repeat step 2.
4. Go to frame 25 and insert keyframe.
5. Delete the text.
6. Draw the star using polystar tool. Double click at it to make sure the shape and the stroke are together.
7.Go to the center between frame 1 until 25, for example frame 12; then go to properties and click tween and change it to shape.
8. Next, click control on the menu bar and select test movie to view your animation.
9. Finally, you can save your animation.

Task 3 : Motion Guided






Steps:
1. Draw the ant.
2. Convert the ant to movie clip.
3. Choose a key frame (example: keyframe no.50)
4. Place the and at the new position at keyframe 50.
5. Right click between the keyframe and create motion tween.
6. Rename the layer as ant.
7. Create motion guide.
8. Use pencil to draw the guide
9. Select first key frame and click the ant at the cente and move it at the starting point of the guide.
10. For the last key frame, move it at the last point of the guide.
11. Use transform tool to adjust the position for certain keyframe,
12. Tick the orient to path at the first key frame.
13. Test movie.




Task 4 : Frame by frame






Steps:

1. Design the cartoon (same cartoon) with different expression..
2.Save every image in the library by convert it to symbol.
3.Put the first image in keyframe 1..
4.For next keyframe which are keyframe 2 and so on, insert another image.
5. Test movie.
6. Save.




#12 WACOM : DIGITAL DRAWING TABLET

Hai2! Minggu ni lambat sikit update sebab buzy sikit dengan assignment yang semuanya dah menghampiri due date. hehe. Lepas tu demam pulak sehari. Mungkin tak cukup rehat kot. huhu. Okay untuk minggu ni Dr.Zaida telah memberi kami wacom drawing tablet sorang satu untuk memudahkan proses kami melukis di dalam adobe flash ini. Haaa...ni la dia rupa WACOM digital drawing tablet tu....



Maka, pada minggu ini kami pun mula belajar dan menyesuaikan diri melukis dengan menggunakan WACOM ini. Pada yang tidak mahir dan tidak pernah menggunakan WACOM seperti saya ini agak sukar ye untuk melukis menggunakan WACOM ni. hehe.Tapi, bak kata orang "practices makes perfect". Jadi saya perlu banyak praktis lagi untuk menjadikan lukisan saya lebih cantik dan sempurna. Rasanya itu sahaja yang ingin saya kongsikan unutk minggu ini. Dibawah ini merupakan contoh gambar yang saya lukis dengan menggunakan WACOM ini. Saya cuba melukis burung twitter kerana saya adalah pengguna tegar twitter! hehehe


Ouh ya. Minggu lepas Dr.Zaida ada buat competition untuk siapa yang dapat lukis gambar sendiri samaada menggunakan onion skin tool atau menggunakan tablet serta menjelaskan langkah-langkah yang digunakan untuk melukis gambar tersebut. Saya terfikir untuk join the competition. Due date untuk penghantaran gambar adalah pada 1 Disember 2012 sebelum jam 4petang. Tetapi malangnya saya tidak sempat unutk menyiapkan drawing muka saya tuhh. huhu sedey. Jadi saya hanya mampu upload gambar tersebut kat sini je. Susah juga ya nak buat gambar ni berhari2 baru siap. huhuu. Dan ini lah hasilnyaaaa. Saya rasa saya nampak tuaaa :( Saya tak berapa nak pandai lukis muka siap ada shadow2 macam dewi dan idi. Cuba untuk buat tp kurang berjaya nampaknya. huhu. 

Ini adalah hasil lukisan saya...


Dan ini adalah gambar asal...



#11 BASIC ADOBE FLASH CS3 PROFESSIONAL

Helloooo...! This week kitorang mula belajar flash. Untuk kali ini, Dr.Zaida telah memberi kami ipad bagi membantu proses pembelajaran kami dalam flash. Satu ipad akan dikongsi dua orang dan saya berkongsi dengan farhah.  Kemudian, Dr.Zaida memberi kami test untuk mengetahui tahap pengetahuan asas kami mengenai flash. Bagi saya yang tiada basic mengenai flash, memang agak sukar la untuk menjawab soalan-soalan yang diberikan. hehe. Nasib sebelum ini saya ada pengalaman menggunakan adobe photoshop dan ada beberapa tools yang hampir sama function dengan adobe flash. Itu pon sikit2 je lah kan. hehe. So, lepas ni harus belajar lebih lagi pasal flash ni. huhu.

Dalam ipad yang diberi telah di'install'kan beberapa apps yang akan membantu pembelajaran kami mengenai flash. Untuk minggu ini, kami belajar apps 1 dan 2 dan membuat dua aktiviti yang berkaitan dengan apps tersebut. Bagi apps 1, ia lebih kepada pengenalan kepada interface dalam Adobe Flash. Dibawah ini merupakan interface bagi apps 1 di dalam ipad...


Seperti yang dapat dilihat dalam gambar di atas, dalam apps 1 kami banyak belajar mengenai interface dalam flash, aplikasi dalam flash serta jenis-jenis interaksi. Dibawah ini pula adalah interface bagi apps 2. Secara umumnya dalam apps 2 ini kami belajar mengenai basic drawing, coloring dan juga drawing button.


Macam yang saya dah katakan sebelum ini, setiap satu apps ini kami diberikan satu aktiviti. Untul apps 1, kami diberi aktiviti satu iaitu berkaitan dengan pengenalan berkenaan interface dalam flash. Kami juga perlu menyatakan jenis interaksi yang ada serta fungsinya. Manakala, aktiviti 2 yang berkaitan dengan apps 2, kami telah membuat aktiviti berkaitan dengan drawing. Dalam aktiviti ini, kami perlu melukis mengikut guide gambar yang diberikan serta menjelaskan jenis tool yang kami gunakan dalam melukis dan mewarna. Dibawah ini merupakan gambar yang perlu kami lukis.


Maka, saya pun mencuba la untuk membuat aktiviti ini.  Dalam aktiviti ini saya menggunakan line tool dan shape tool untuk melukis dan paint bucket tool untuk mewarna. Untuk mendapatkan tone warna, kita boleh mengubah warna tersebut di ruangan 'color'. Dibawah ini merupakan hasil lukisan saya yang tak pandai dalam art ni. hehehe. jangan gelak k? :P


Selain itu, dalam aktiviti 2, kami juga perlu meng'explore' serta menggunakan onion skin tool dan menukarkannya kepada graphic symbol. Konsep bagi onion skin tool adalah 'tracing' ataupun menekap. Dalam onion skin tool ini kita akan menghasilkan satu grafik dari grafik yang asal dengan mengurangkan opacity untuk frame semasa dan mula menekap pada frame kedua. Gambar dibawah ini merupakan hasil  percubaan pertama tracing saya :)


Seperti yang ditunjukkan diatas, lukisan grafik yang sebelah kanan merupakan hasil tracing saya manakala yang sebelah kiri merupakan gambar original. Antara tools yang saya gunakan untuk melukis pikachu ini adalah line tool, oval tool dan pencil tool. Bagi proses mewarna pula, seperti biasa saya menggunakan paint bucket tool dan juga mengurangkan opacity warna yang dipilih bagi mendapatkan warna yang lebih pudar untuk bayang-bayang pada badan pikachu tersebut.

Sebenarnya saya buat aktiviti tracing ni bila kat rumah. So, adik-adik pon datang tengok dan berminat pulak. hehe. Jadi kami pon bekerjasama untuk mencuba trace gambar orang pulak. Kami cuba untuk trace gambar aaron aziz serta gambar adik saya sendiri Yuhanis Khalida dan dibawah ini adalah hasilnya..hehe :)





Rasanya itu sahaja yang ingin saya kongsikan untuk minggu ini. Kalau nak tengok hasil lukisan classmate saya yang lebih cantik dan artistik dari saya boleh la ke laman facebook kami! hehe. Untuk penerangan lebih lanjut dan dalam mengenai apps 1 dan 2 di dalam ipad seperti yang saya ceritakan sebelum ini boleh ke blog kakwan. Kak wan ada ceritakan details yang ada dalam apps tersebut. Till then! Sambung minggu depan pulak. hehehe

#10 MID SEMESTER BREAK

Haaaiiii! This week is semester break! So, happy holidayyyy! :D

#9 ONLINE SURVEY & INTRO TO FLASH

Hai2! Untuk minggu ke-9 ni adalah minggu terakhir kami belajar dreamweaver. So, untuk sesi yang terakhir ini, Prof.Zaida telah mengajar kami cara-cara membuat online survey/quiz. Berikut merupakan antara contoh online survey...



Haaa... tu la dia rupanya online survey...maka,dalam kelas ini kami belajar untuk membuat online survey ini menggunakan PHP dan MySQL. Pertama sekali, untuk membuat online survey ini sudah pasti kita perlu membuat satu table baru dalam database. Kemudian, seperti biasa, kita perlu membuat satu fail php di dalam dreamweaver untuk membuat form survey yang diingini. Dalam kelas ini, kami belajar membuat online survey form ini dengan menggunakan radio group. Maka, setelah memasukkan soalan yang dikehendaki, kita perlu pergi ke insert -> form -> Radio Group. Simple kan? Seterusnya, setelah selesai boleh lah simpan dan tambah apa-apa lagi yang anda kehendaki mengikut citarasa sendiri. heheheh... 

Okay...now move to adobe flash. 



Sebenarnya aku quite excited nak blaja flash ni sebab tgk mcm best je hasil dari orang yang guna flash. huhu. Orang xde basic la katakan..hehe. So, in this class i will try my best to learn about flash. Dalam kelas minggu ini, kami hanya diperkenalkan dengan adobe flash. Kemudian, Prof.Zaida menyuruh kami untuk mempelajari dengan sendiri sedikit sebanyak tentang flash. Prof . Zaida juga ada menerangkan serba sedikit mengenai sejarah adobe flash yang sebelum ini dipunyai oleh macromedia dan kemudiannya telah dibeli oleh adobe pada tahun 2005. Mungkin setakat ini sahaja untuk kali ini...kita tunggu minggu depan untuk pelajaran selanjutnya mengenai flash. :)

#8 ADMINISTRATION PAGE

Salam...Untuk post kali ini saya aku bercerita berkenaan dengan apa yang kami belajar dalam minggu ke-8. Bagi minggu ini, kami belajar untuk membuat administration page bagi sesebuah laman web. Seperti yang kita sedia maklum, sesebuah laman web biasanya akan di buat oleh seorang atau beberapa admin. Maka, harus untuk seseorang admin itu untuk mempunyai page mereka sendiri untuk menguruskan laman web tersebut seperti menguruskan data pengguna.

Sebelum mula untuk membuat page untuk admin ni, Prof.Zaida mengarahkan kami untuk install FXPHPMissingTools121.mxp. Fail ini boleh didapati dengan memuatturunnya daripanda link ini. Untuk memastikan tools ini telah di'install' dengan betul, anda boleh pergi ke dreamweaver dan terus ke server behaviour lepas tu pergi ke go to detail page/go to related page. Extension ini berguna untuk menyenaraikan atau mengedit maklumat lengkap mengenai pengguna laman web kita.

Seterusnya, kita boleh teruskan dengan membuat admin page. Secara umumnya admin page tidak banyak beza dengan laman pengguna. Untuk membuat admin page kita boleh edit daripada apa yang telah kita buat pada laman pengguna. Maka, dari laman pengguna yang telah kita buat, kita boleh edit dan sesuaikan ia dengan keperluan admin seperti login for admin, edit user, delete user, view user dan logout.

#7 ASSIGNMENT PHP

Hehai semua! Minggu ini tiada kelas seperti minggu-minggu lepas. Dr Zaida ada tugasan luar. Akan tetapi, tiada kelas tidak bermakna tidak belajar! hehe. Dr. Zaida telah tinggalkan tugasan untuk kami lakukan pada minggu ini. Tugasan ini adalah tugasan berkumpulan yang mana kami perlu membuat registration page untuk pengguna seperti yang telah diajar di dalam kelas. Dalam tugasan ini kami diberi pilihan sama ada ingin menggunakan languange ASP atau PHP. Kumpulan kami telah memutuskan untuk membuat tugasan ini dalam PHP kerana kami dapati MySQL lebih user-friendly dan senang di fahami. Tugasan kali ini agak mudah dan senag untuk difahami kerana kami telah membuatnya di dalam kelas. Kami hanya mengulang kaji semula apa yang telah di lakukan didalam kelas dengan mengikut langkah-langkah yang telah di berikan di dalam handout yang diberikan oleh Dr.Zaida. Di sini saya kongsikan link video bagi langkah mudah untuk membuat registration page. 

#6 USER AUTHENTICATION


Salam...

Sedar tak sedar dah minggu ke-6 dah. Minggu ni kelas start dengan agak kelam kabut sikit kerana ramai yang ada masalah nak copy balik file yang buat pada kelas minggu lepas kat dalam local disk C. Mungkin masing-masing masih dalam mood konvo? hehe. Tapi semuanya dapat diselesaikan dengan tunjuk ajar dari Dr.Zaida dan kerjasama dari rakan-rakan.

Untuk minggu ini, kami sambung belajar mengenai PHP dan MySQL dan kelas kali ini adalah lebih fokus kepada membuat page untuk registration dan user authentication. Terdapat 4 jenis user authetication iaitu log in user,log out user, restrict access to page dan check new username.

Log In User

Pertama sekali, page untuk pendaftaran haruslah dibuat untuk membenarkan pengguna memasukkan details mereka. Seterusnya, dengan menggunakan fungsi log in user pada user authentication, pengguna boleh mengakses sesuatu laman web dengan memasukkan username dan password.

Restrict Access to Page

Fungsi ini pula membolehkan admin menghadkan akses laman web tersebut mengikut level akses. Contohnya, page bagi maklumat peribadi pengguna hanya boleh di akses oleh admin pertama sahaja dan tidak boleh di akses oleh admin kedua atau ketiga. Maklumat lanjut mengenai restrict access to page ini boleh didapati di sini dan ini video untuk step restrict access to page.

Check New Username

Fungsi ini pula adalah untuk mengelakkan pengguna baru menggunakan username yang sama dengan pengguna sedia ada. Satu username hanya untuk satu pengguna sahaja. Sekiranya terdapat pengguna baru yang ingin menggunakan username yang sama dengan pengguna sedia ada, satu message akan dikeluarkan untuk menyatakan bahawa username itu telah digunapakai. Akan tetapi, fungsi check new username ini tidak boleh digunakan untuk PHP. Ia hanya boleh digunakan sekiranya menggunakan ASP languange. Saya ada terbaca sekiranya ingin menggunakan fungsi ini dalam PHP, anda perlu menggunakan GET and POST method. Tapi sejauh mana kebenarannya masih belum saya ketahui sebab saya sendiri masih belum mencubanya! haha.

Setakat ini yang dapat saya kongsikan untuk minggu ini. Till then. Wasalam..




#5 PHP & MySQL

Hai2! Seperti yang dijanjikan pada minggu lepas, minggu ini kami belajar mengenai PHP dan MySQL. Sebelum kita pergi lebih lanjut, saya akan terangkan apa itu MySQL dan PHP. MySQL adalah database yang merupakan tempat untuk menyimpan data. Fungi MySQL adalah sama seperti Mic.Access yang telah kami pelajari dalam kelas-kelas yang lepas. Maklumat lanjut mengenai MySQL boleh didapati di http://www.mysql.com/. PHP pula adalah language yang digunakan untuk membuat web yang mempunyai sama fungsi seperti ASP. phpMyAdmin pula adalah sejenis software yang ditulis dalam bentuk PHP yang membenarkan anda menggunakan fungsi database MySQL. Ini pula link untuk belajar lebih lanjut lagi mengenai phpMyAdmin.

Secara umumnya, cara membina laman web menggunakan PHP hampir sama dengan ASP. Bezanya adalah, testing server yang digunakan untuk PHP adalah apache dan bukan IIS seperti ASP. Peringatan kepada semua, untuk mengaktifkan testing server apache, IIS perlu dihentikan dahulu kerana kedua-dua testing server ini menggunakan port yang sama iaitu port 80. Sekiranya anda ingin menggunakan kedua-dua testing server anda perlu menggunakan port yang berlainan. Setelah anda hentikan IIS, anda boleh mula run apache dan MySQL dengan menggunakan xampp. Xampp adalah sejenis virtual server yang digunakan untuk run program atau fail php dan mysql. 

Langkah seterusnya, seperti ASP, kami perlu create site, insert form, connection, insert record , recordset dan lain-lain di dalam dreamweaver. Rasanya itu sahaja yang ingin saya kongsikan untuk minggu ini. Ouh ya, saya sebenernya pernah belajar serba sedikit mengenai PHP semasa degree dahulu. Tetapi ia sedikit berbeza kerana dahulu lebih banyak menggunakan coding instead of using design in dreamweaver. hehe :)

#4 REVISION & ASSIGNMENT

Hai2! Minggu keempat. Kejap je dah minggu empat. Rasa macam baru je daftar masuk semalam. hehe. Okay, untuk kelas authoring minggu ini Dr Zaida telah membuat ulangkaji berkaitan kelas yang lepas kerana ramai yang bermasalah dalam tugasan yang diberi minggu lepas. So, Dr Zaida ulang balik lesson minggu lepas yang macam saya cerita dalam ini. Untuk itu, saya tak akan cerita balik la apa yang Dr Zaida dah ajar. Untuk entry kali ini, saya akan cerita mengenai tugasan yang diberikan kepada kami minggu lepas. Tugasan ini adalah tugasan berkumpulan. Kami perlu develop satu page berkenaan registration. Alhamdulillah, kumpulan saya (nadiah, farhah, ana) telah berjaya menyiapkan tugasan ini sebelum dateline walaupun terdapat beberapa masalah yang kami hadapi. 

Dibawah ini adalah registration page untuk kumpulan kami.


Dan ini adalah registration details. (view)


Haaa, cantik tak page kami? Cantik kan? hahaha. Tak cantik pon kene kata cantik gak :p

Kalau perasan, dekat registration details kitorang tu, dari nombor 3 terus lompat nombor 11. hehe. Ceritanya macam ni, masa kami testing untuk page kami ni, pakai hentam je masukkan data merepek. Lepas tu masa nak hantar kat Dr Zaida, kami  kekonon nak delete la data yang merepek tu. Tapi lupa pulak yang database guna ID autonumber. Then, hasilnya jadi la macam tu. haha. Pengajaran untuk lepas2 ni. hehehe

Rasanya itu sahaja yang dapat saya kongsikan disini untuk kali ini. Kami diberitahu untuk kelas seterusnya kami akan belajar mengenai PHP. Masa degree dulu ada lah belajar sikit2 pasal PHP ni. Harap2 masih ada la dalam ingatan. hehehe






#3 ASP - IIS - ACCESS

25 September 2012. Kelas ketiga untuk subjek authoring system. Kali ni aku rasa kelas ini makin best! Walaupun dah lalui hari dengan jadual yang penuh dan penat aku tetap boleh nak fokus dalam kelas. Ni semua kerana usaha gigih dan cara pengajaran Dr.Zaidatun. Seperti yang Dr.Zaida ada sebut dalam kelas, tiada lecturer dari FSKSM akan ajar satu-satu macam dia ajar.I'm impressed! Biasanya kami dalam FSKSM akan mudah lost bila lecturer ajar step2 macam ni. Sebab apa lost? Sebab bila error atau terlepas lecturer tak akan ulang balik dan rakan-rakan pon tak berapa pasti macam mana nak solve. So, aku sangat bersyukur dapat lecturer seperti Dr.Zaida. Thanx a lot! :)

Okay, sekarang kita cerita pengisian untuk kelas kali ini. . minggu ini kami belajar cara untuk create a contact form in Dreamweaver using ASP. Step pertama yang perlu dilakukan mesti lah setup/install IIS dulu. IIS stands for Internet Information Server. Kita perlu setup IIS dulu kerana IIS akan membantu kita untuk view project kita di testing server/localhost. Cara setup IIS berbeza mengikut jenis OS yang digunakan untuk komputer itu. Dalam lab, kami belajar untuk install IIS dengan menggunakan windows xp. Manakala, dengan bantuan youtube dan rakan-rakan saya berjaya install IIS di dalam laptop saya yang menggunakan windows 7.

Seterusnya, untuk develop ASP dan PHP didalam dreamweaver, kami perlu setup a site. Site juga boleh dibuat sekiranya anda menggunakan HTML, kerana site akan manage file anda. Hal ini demikian kerana, site adalah koleksi file dan folder yang berkaitan dengan website didalam server. Satu site hanya untuk satu website sahaja. Step seterusnya adalah setup database file dalam microsoft access. Perlu diingat dalam database kita perlu tambah satu item iaitu primary key untuk database yang mana ia akan menjana identiti yang unik untuk setiap data. Satu database hanya untuk satu connection to ASP sahaja. Kemudian, kami perlu setup a connection untuk menghubungkan database dengan asp file. Apabila connection sudah berjaya, kami perlu setup the contact form dengan menggunakan dreanweaver. Layout untuk contact form boleh di design dengan menggunakan kombinasi label, text box dan text area. Properties untuk setiap text fields juga perlu diambil kira mengikut kesesuaian contact form yang ingin dihasilkan. Kemudian, untuk memasukkan data ke dalam database, kami menggunakan insert record. Dalam langkah ini, kami perlu pastikan setiap item dalam text field dimasukkan dengan betul ke dalam ruangan di MS access. Untuk membaca atau view data dari database, recordset perlu dibuat. Disini kami perlu buat satu lagi file asp didalam dreanweaver untuk fungsi view. Selepas itu, menggunakan connection yang telah dibuat sebelum ini, masukkan recordset ke dalam file view.asp. Tambahan lagi, untuk view semua data yang diisi oleh pengguna dalam satu file, repeat region boleh digunakan. Akhir sekali, kami perlu execute the file dan preview di dalam browser.

Ini saja yang saya dapat kongsikan dari apa yang telah saya belajar dalam kelas authoring pada minggu ini. Disini ada sedikit link untuk rujukan . Ini pula link untuk setup IIS menggunakan windows 7. Dan akhir sekali ini link untuk dynamic application dengan MS access.

#2 INTRODUCTION TO WEB-BASED DEVELOPMENT

18 September 2012. Hari lahir bonda yang ke-56. Juga kelas kedua untuk subjek authoring system. Seperti biasa kelas ini bermula jam 4.00 petang dan berakhir pada 6.30 petang. Kelas yang selama 2 jam setengah ini aku rasa menarik sebab bukan saja datang dan duduk dengar lecture macam masa kelas degree dulu. Kali ni kami banyak melakukan perbincangan dalam kelas yang membuatkan kelas menjadi lebih interaktif. Tajuk perbincangan untuk kali ini adalah mengenai pebezaan antara webpage, website dan portal, perbandingan antara static website dan dynamic website serta perbandingan antara ASP dan PHP.

Website, Webpage dan Portal

Daripada lecture yang disampaikan oleh Dr.Zaidatun, saya dapat simpulkan maksud bagi website, webpage dan portal. Pertama sekali, website adalah gabungan atau koleksi beberapa laman web, gambar atau video yang boleh di akses melalui internet. Manakala, webpage pula adalah sebuah dokumen yang biasanya ditulis dalam bentuk HTML dan boleh di akses melalui HTTP. HTTP pula adalah protokol yang memindahkan maklumat daripada web server ke web browser seperti yang dilihat oleh pengguna. Kesimpulannya, web page adalah satu laman tunggal manakala website adalah gabungan bagi beberapa web page. Web page adalah lebih simple daripada website.

Seterusnya adalah berkenaan dengan portal. Portal adalah sebuah laman web yang berfungsi sebagai laman utama untuk laman-laman yang lain dan juga dikenali sebagai "start page" yang mudah untuk pautan-pautan laman lain. Biasanya sesebuah portal akan mempunyai banyak pautan seperti kewangan, kesihatan, hiburan email, serta pautan untuk pelbagai apklikasi online yang lain. Contoh bagi portal adalah seperti Yahoo, Portal Jabatan Pelajaran Johor, dan Portal Kementerian Pengajian Tinggi.

Static vs Dynamic Website

Static website adalah sebuah laman web yang tidak memerlukan banyak perubahan. Sekiranya ia memerlukan perubahan, ia perlu dilakukan secara manual dan hanya melibatkan isi kandungannya sahaja. Selain itu, statik website dibuat dari simple HTML dan kemudian akan dimuaturun ke dalam server. Biasanya extension bagi statik website adalah .html atau .htm.

Berbeza dari statik website, dinamik website menggunakan keupayaan "server programming"  berbanding statik yang menggunakan HTML. Dinamik website juga terlibat dengan database. Perubahan kandungan pada dinamik website biasanya akan melibatkan perubahan pada bahagian-bahagian lain akan tetapi ia tidak akan menjejaskan struktur laman web tersebut. 

Untuk mengetahui kelebihan dan kekurangan bagi static dan dinamik website anda boleh ke sini.

ASP dan PHP

Sebelum kelas ini berakhir, kami ada membuat perbandingan antara ASP dan PHP. Disini saya akan kesimpulan daripada hasil perbincangan yang dilakukan dildalam kelas.

ASP
  • work with Microsoft Server
  • run in windows-based (boleh didalam Linux sekiranya ada ASP-Apache program)
  • programming language : visual basic
  • costing : lebih mahal (perlu beli additional tools)
  • flexibility to database connection : cannot connect to MySQL (perlukan MS-SQL)
  • speed : lebih lambat dati PHP
PHP
  • works with Linux/Unix server and NT server
  • run in windows,solaris,Unix and Linux based
  • programming language : C/C++
  • costing : tiada kos. (open source)
  • flexibility to database connection : boleh menggunakan MySQL
  • speed : lebih cepat
Mahukan lebih maklumat mengenai ASP dan PHP anda boleh ke sini dan sini. Rasanya sampai sini saja entry untuk kali ini. Tak sabar menanti untuk kelas yang akan datang dan berkongsi lagi ilmu yang diperoleh. Bye! :D


#1 AUTHORING SYSTEM - 110912

Assalamualaikum wbt.

Lama sudah aku tinggalkan zaman menulis blog ni. Dah tak reti dah rasanya macam mana. By the way, tujuan aku kembali blogging ini adalah kerana ia merupakan salah satu tugasan dalam subjek authoring system. tugasan? subjek? Ya, aku telah membuat keputusan untuk mengambil master dalam bidang teknologi pendidikan. PENDIDIKAN? Ya, aku lompat fakulti. Dari sains komputer ke pendidikan. hehe. Rasa macam nak beralih arah dalam bidang pengajaran. Atas dorongan parent dan rakan-rakan, akhirnya aku kini berada disini. Okay, kembali ke tujuan asal aku menulis blog ini. Authoring system. Kelas kedua yang aku hadiri sebagai pelajar master Teknologi Pendidikan di UTM ni. Pertama sekali aku dengar subjek ni aku tak tahu apa isi kandungan subjek ni. Memandangkan subjek ini adalah subjek core dan rakan-rakan dari fakulti pendidikan kata yang Dr.J ni best, aku pun membuat keputusan untuk mengambil subjek ini pada semester ini. Sebenarnya aku tak kenal pun siapa Dr.J ni, follow saja mereka2 yang dari fakulti pendidikan ini. Tentulah mereka lebih kenal pensyarah dari fakulti mereka daripada aku yang lompat fakulti ni kan. huhu. Tapi bila masuk kelas, pensyarah lain pulak yang masuk dan pensyarah yang mengajar aku sekarang adalah salah seorang pensyarah yang mendorong dan menarik minat untuk menyambung pelajaran dalam fakulti pendidikan iaitu Dr.Zaidatun. Fuhhhh. dah terlebih panjang pulah introduction aku ni. So, sekarang aku nak cerita apa yang aku dapat dalam kelas pertama authoring system ini. Seperti biasa, kelas pertama akan diterangkan mengenai learning outline. Dari learning outline ini, aku dapati subjek ini terbahagi kepada dua bahagian iaitu scripting in Flash (menggunakan Adobe Flash) dan develop interactive web base application using ASP & PHP in  Adobe Dreamweaver. Flash. Sesuatu yang aku tidak tahu dan aku sangat ingin belajar. Jadi aku berasa seronok untuk mula belajar mengenai flash. Akan tetapi, flash merupakan bahagian kedua dalam subjek ini. Bahagian pertama kami akan belajar menggunakan adobe dreamweaver. Sebelum ini aku pernah menggunakan adobe dreamweaver dalam tugasan semasa degree dahulu. Tapiiiii... lupa dah. haha. So, aku kene study balik untuk ingatkan semula apa yang pernah buat dulu. huhu. Selain itu, kami juga diterangkan mengenai tugasan-tugasan yang perlu kami lakukan untuk mendapatkan carry mark yang membawa 70% daripada markah keseluruhan kami untuk subjek ini dan salah satu tugasan adalah membuat blog ini! hehe. Secara keseluruhannya, aku berminat dengan subjek ini dan cara pensyarah yang mengajar. Semoga subjek authoring system ini akan menjadi subjek yang aku gemari serta mudah untuk aku mendapat markah yang tinggi nanti. aminnnnn....

up