Reflection: Week 14

Reflection Week 14


Assalamualaikum

Minggu ini kelas kami dimulakan dengan membuat 4 aktiviti di facebook iaitu:


Aktiviti 1
Develop a motion tween animation of pendulum

Aktiviti 2
Develop a morphing animation of butterfly lifecycle. Start from lava to butterfly.

1. Sketch the egg, caterpillar, pupa and butterfly using onion skin tool.
2. On first layer, type the text, box and arrows.
3. Create a new layer.
4. Import egg,caterpillar, pupa and butterfly image to library. Then convert to graphic symbol.
5. On frame 1 insert egg graphic, then break apart. Next insert keyframe on frame 25, add caterpillar graphic and break apart. Create motion tween between the frames.
6. Next continue insert keyframe on frame 50,add pupa graphic and break apart. Create motion tween between the frames.
7. Then add butterfly graphic on frame 75 and break apart. Create motion tween between the frames.
8.Lastly, add egg graphic on frame 100 and dont forget to break apart. Create motion between the frames.
9. Save your file and test movie.


Aktiviti 3
Implementing frame by frame skill, sketch a cartoon and animate it.

1. Sketch animated panda by using onion skin tool.
2. Then insert the panda sequence images from frame 1 until frame 20. Dont forget to insert keyframe for each image.
3. To make panda moving, we must insert motion tween between the keyframes.
4. Thats all, save and test movie =D

This is another frame by frame movie

Aktiviti 4
Animate the process of pollinating agent


Seterusnya, kami diberi tugasan App 4 untuk disiapkan dan dimuat naik di dalam google sites.Sebelum itu, mari kita lihat apa yang terdapat dalam App4.

Terdapat empat types of interaction dalam flash iaitu:

1. Creating Main Menu

Creating main menu buttons is essential for interactive website to navigate from one page to another.

2. Multiple Choice Questions

This type of applications allow students to get interactive feedbacks from the content. Users could also could create flash-based quizzes with multimedia elements, such as images, sounds, narrations, movies and so on.

3. Text Entry Questions

Allow users to develop quizzes and allow interactive communication between the user and the content. 

4. Drag and Drop

It is another applications that users could build in flash to make learning activities more fun and interesting.

Aktiviti 4

Seperti biasa kami akan diberikan aktiviti setelah habis kelas. Aktiviti 4 ini boleh dilihat dari google site saya nadeeya.Berikut merupakan hasil aktiviti yang telah saya lakukan:

Question 1

Creating Multiple Choice Questions

1. Rename the layer as question > select text tool > change to static text at properties windows > type your question.
2. Insert a new layer named buttons > create four oval tool (A,B,C,D)  > Then convert to symbol as button > OK.Then click text tool > type the answer.
3. Create a new layer renamed as response. In the layer, select text tool > change to dynamic text at properties windows.
4. Create another layer named as actions, write this command at actions script.

         stop();

         var response

         response = “ “

    5.  On the right answer button, write this command at actions script.

         on(release)  

        {respon = “Congrates, your answer is correct”);}

    6.  Do the same command to other buttons but this time change the respon as below:

         on(release)  

        {respon = “Your answer is wrong”);}

    7. Test your movie and finished!!!

Inilah hasilnya selepas mengikuti langkah-langkah dalam Apps 4.

Paparan skrin ini menunjukkan apabila pengguna memilih jawapan yang tepat.

Manakala, paparan skrin tersebut akan keluar jika pengguna memilih jawapan yang salah.

Question 2

Text Entry Question

1. Create a layer named background, make sure that the topic as static text.
2. Insert a new layer and named as question, type the questions. Draw a text tool as input text for the user to input the answer. Then draw another text tool under it as dynamic text.
3. After that, create a new layer named as button. Then choose a playback button from the library and create besides the text.
4. Create a stop layer, type this command to the actions script.

         stop();

         var answer;

         var respon;

         answer = “ “

         respon = “ “

     5. Select the playback button, right click and type this command to the actions script.

         on (release)  { if(answer == ”print client”) { respon = “Correct!”;

         } else {

         respon = “Incorrect. Your answer “+ answer +” is incorrect.”;

         }

         }

         on (release, keyPress “<Enter>”) {

         if (answer == “print client”){ respon = “Correct!”;

         } else {

         respon = “Incorrect. Your answer “+ answer +” is incorrect.”;

         }

         }

     6. In the input text field, type the var as answer meanwhile in the dynamic text field as respon.       

              Don’t forget to untick Auto kern in the window properties.
          7. Test your movie by press Ctrl+ Enter and done!!!!

Inilah hasilnya selepas mengikuti langkah-langkah dalam Apps 4.

Paparan skrin ini menunjukkan apabila pengguna memilih jawapan yang tepat.

Manakala, paparan skrin tersebut akan keluar jika pengguna memilih jawapan yang salah.

 Question 3

Creating Main Menu

1. Create the basic interface such as insert logo image, header for the website and button          (home, about us and services).
2. For each button, field the instance name. For example, the home button will named as home in the instance button. And goes to another buttons.
3. Create a new scene for another section, by click Windows > Other Panels > Scene> Scene Windows will appear. Click duplicate symbol to copy a new scene. Rename the scene as Scene 2 and close the Window.
4. Insert some text in Scene 1 and Scene 2 to differentiate the scene. Then test the movie to see whether the scenes are different.
5. Put stop(); command in actions script in the buttons layer so that the two scenes will not keep on blinking.
6. Insert frame at frame 15 for each layer so that if we click the button, it will direct to the required scene.  Do this on Scene 1 and Scene 2.
7. In Scene 2, create a new layer and named it as about us. Then, renamed the frame as aboutpage. Create another layer for stop command in actions script.
8. Go back to Scene 1, right click on about us button and click actions.Type

         on(release)  

         {gotoAndPlay (“Scene 2”, 1);}

     9. To make the the home button activated, go to scene 2 and right click on home button to write       

         command in actions script.

         on(release)  

         {gotoAndStop (“Scene 1”, 1);}

   10. Press Ctrl+Enter to test the movie, you can see that if you click Home button, it will go to   

         Scene 1 and Scene 2 if you click About Us button.

        11.  Create a new button in Scene 2 for more information about the library. On the frame 10 in
              about us layer,named the frame as moreinfo. Then type text for the more information. After
              that, renamed the more button as moreBtn.

        12.  Right click on the More button, then add command actions script.

         on(release)  

        {gotoAndStop (“Scene 2”, “moreinfo”);}

        13. Lastly, steps on how to navigate the Services button to other website. Go back to Scene 2,
             then add actions script in Services button. Repeat step 13 for Scene 2.

        on(release)  

        {getURL (“http://web.utm.my/psz/”);}
   14. Test your movie whether it is working or not and finished!!!

Inilah hasilnya selepas mengikuti langkah-langkah dalam Apps 4. Paparan skrin ini menunjukkan pengguna berada di skrin home.

 

Manakala paparan skrin ini menunjukkan pengguna berada di skrin about.

Apabila pengguna tekan button more, paparan skrin ini akan keluar.

Seterusnya, pengguna akan ke website lain jika menekan button service.

Question 4

Drag and Drop

1. Create your interface by insert 3 rectangle named as dog,cat and rat in the rectangle layer. Then convert them to symbol as movie clip.

         2.   Then insert another layer and named as pictures. Insert the image of dog,cat and rat to the
              stage. Convert them to symbol as movie clip.
         3.  Next step, right click on the dog rectangle shape and insert this command.Repeat this step for    
              another rectangle shape and pictures.

        on (press)  {

        startDrag(this,true);

        }

        on(release) {

        stopDrag();

        }
    4. Don't forget to test your movie okay =D

Inilah hasilnya selepas mengikuti langkah-langkah dalam Apps 4. Pengguna boleh menggerakkan gambar haiwan tersebut ke tempat jawapan yang disediakan.

Paparan ini menunjukkan jika pengguna sudah selesai menjawab soalan.

Akhir sekali, ini merupakan paparan apabila saya telah memuat naik aktiviti-aktiviti tersebut di dalam Google Site =D

Reflection: Week 13

Reflection Week 13

Assalamualaikum

Kelas pada minggu ini lebih mencabar dari sebelum ini sebab kita dh start untuk buat animation. Creating animation ini dijelaskan lebih lanjut dalam Apps 3. Terdapat dua jenis dalam menghasilkan animation iaitu types of symbol dan types of animation.

Types of Symbol:

1. Graphic - A static images that are used mainly to create an animation.

2. Button - The only interactive symbol that can detect mouse events in Flash.

3. Movie Clip - Consist of one or more graphic / button symbols, they are flash movie inside your flash project.

Types of Animation:

1. Motion Tweening 

    i. Object Motion Position

       One of the method that allows objects to be change to different position.

   ii. Brightness & Color

       Allow users to change the brightness & colors of the tweened objects.

  iii. Object size

       Allows users to manipulate the size of their tweened objects.

2. Shape Tweening

    i. Object to object - Allows users to change the objects from it's original shape to a new shape.

   ii. Text to object - Allows text to be transform to an object.

  iii. Image to image - Apply in transforming one image to another different image.

3. Motion Guide

4. Frame by frame

Aktiviti 3

1. Motion Tweening

1. First layer named as stair, draw a stair
2. Then insert a new layer named as ball, draw a ball

3. Then convert ball to symbol as graphic
4. Insert keyframe at frame 15 and frame 30 Go back to frame 15 and moved your ball as required
5. Don’t forget to Create Motion Tween between frame 15 and frame 30
6. Repeat the steps to another ball movement at different frame
7. Besides that, we also can change brightness and the size of the ball

8. I add some blur effect when the ball reach the floor by click Insert > Timeline Effects > Effects >Blur

9. Test your movie and done!!!!

2. Shape Tweening

1. Use text tool > CONVERSE 

2. Modify > Break Apart (repeat again)

3. After that go to frame 25 and draw a star

4. Go to frame 12, select tween by shape

5. Go to frame 35,select File > Import >Import to stage > select shoe picture > open

6. Lastly, press Ctrl+Enter to test your movie

3. Motion Guide

Allows users to move an objects on predefined path, such as in circles or curves.

1. On the first layer, create a chocolate box. Rename as ground

2. Then, erase the path using the eraser

3. After that, create a new layer and rename as ant

4. Insert the ant image

5. Create motion tween between the frames

6. Add guide motion, draw the path using pencil tool

7. On the ant layer, drag the ant at the beginning of line in frame 1, meanwhile drag the ant at the ending of the line in last frame

8. Lastly, test your movie

4. Frame by Frame
Frame by frame animation is similar with traditional cel-styles in animating a cartoon by drawing different movements in each frame.

1.       The first layer you renamed as animation. Go to File > Import > Import to Stage > Select hello kitty > OK.
2.       Then right click on frame 5 for adding some movement to hello kitty and insert  keyframe. In this frame you can adjust your image as required. For inserting text, I use Text Tool to write hungry.
3.       Then continue adding some movement by just right click on another frame and insert keyframe. Make sure you are not adding frame very close because when you test the movie, it will run too fast and people cannot see it clearly.
4.       Insert a new layer and named as rat. This layer where you put rat image. For my exercise, I insert keyframe at frame 16 and end at frame 64. Between this frames, you right click and select Create Motion Tween. The result is you can see that the rat will move from frame 16 and end at frame 64.
5.       But then I want the rat not to move in straight line. So I must Add Motion Guide in same frame as rat layer. So that it will synchronized with the rat movement. After you add motion guide, draw the path using pencil tool.
6.       On the rat layer, drag the rat at the beginning of line in frame 16, meanwhile drag the rat at the ending of the line in frame 64.
7.       Test you movie whether it is working or not and finished.

Reflection: Week 12

Reflection: Week 12

Assalamualaikum

Minggu ini kami dikejutkan lagi apabila Prof Zaida ada memberikan WACOM digital drawing tablet tu hehehe.. Jadi masa dalam kelas tu kami semua pon mencuba la untuk menggunakan WACOM tersebut.agak susah menggunakan WACOM ni sebab cursor akan bergerak-gerak apabila kita tengah tracing image.Tetapi kalau kita memang  pandai melukis, memang sangat senang ada WACOM ni. Ini kerana pelukis akan rasa seperti melukis menggunakan pencil di atas kertas.Di bawah menunjukkan WACOM untuk tatapan kepada sesiapa yang tidak pernah lihat.

Dr Zaida juga ada buka pertandingan untuk melukis diri sendiri di Facebook tetapi apa kan daya kerja bertimbun-timbun jadi tak dapat la saya menyertai pertandingan tersebut. Tahniah kepada Idi, Dewi dan kak Azizah sebagai pemenang.. They desserve to win because lukisan dia orang sangat cantik. 

Reflection: Week 11

Reflection Week 11

Assalamualaikum

Hi friends, kelas pada hari ini memang sangat excited seperti yang dijangkakan. Sebelum kelas bermula, Dr Zaida menyuruh kami menandatangani perjanjian untuk proses peminjaman iPad yeay!!! Saya bersetuju untuk berkongsi iPad bersama Masarrah. Kami terus berbincang jadual untuk giliran menggunakan iPad.Tujuan Dr Zaida memberikan iPad ini adalah untuk pembelajaran Adobe Flash di luar waktu kelas pada bila-bila masa sahaja. Setelah itu, kami dikejutkan dengan adanya set soalan berkaitan dengan Adobe Flash. Adoyai matilah macam ni tapi nasib baik Dr Zaida cakap ini hanyalah soalan untuk mengetahui pengetahuan sedia ada kami dalam mengenali Adobe Flash dan tiada markah fuuhhh. Umm soalan banyak berkaitan dengan tools dalam Adobe Flash. Mula-mula blank bila dpt soalan tp tiba-tiba teringat Dr Zaida ada mengatakan bahawa interface dia lebih kurang dengan Adobe Photoshop. Jadi blank tu pon hilang sbb nasib baik saya familiar dengan Adobe Photoshop. Nak taram pon boleh la hampir-hampir dengan jawapan sebenar. Sesetengah soalan okay la tp mana tak tahu tu x dapat jawab la =(


Kelas pada hari lebih kepada pengenalan kepada Adobe Flash, kami telah diberikan dua aktiviti iaitu  1. berkaitan dengan Apps 1 dan 2. berkaitan dengan Apps 2 - Drawing in Flash. Aktiviti kali ini, kami mestila explore kedua-dua Apps ini untuk mendapatkan jawapan bagi soalan-soalan yang diberikan. Bagus jugak sekali sekala belajar macam ni menggunakan teori konstruktif iaitu membina  pengetahuan menggunakan pengetahuan sedia ada dan mendapatkan pengetahuan melalui penerokaan secara hand on dan mind on.


Apps 1 mengandungi modul pengenalan kepada interface dalam Adobe Flash dan banyak lagi.Apps 2 pulak berkaitan menunjukkan cara-cara untuk melukis dalam Adobe Flash dan banyak lagi. Kedua-dua Apps ini memang sangat membantu kepada sesiapa yang xder basic langsung dalam Adobe Flash ni. Di dalamnya terdapat contoh gambar, nota,animasi dan video tutorial bagi setiap topik. 


Aktiviti kelas 1 adalah soalan berkaitan dengan Apps 1 iaitu kepada pengenalan kepada interface dalam Adobe Flash. Manakala, aktiviti kelas 2 adalah drawing in flash. Kami perlu melukis gambar seperti yang diberikan dan menjelaskan apa tools yang digunakan untuk melukis dan mewarnakan gambar tersebut. Seterusnya, kami perlu melukis lukisan kartun dengan menggunakan Onion Skin Tools dan menukarkan kepada graphic symbol. Di bawah merupakan contoh gambar yang perlu kami lukis:

 

Aktiviti 2

Untuk menghasilkan gambar di atas, saya melukis menggunakan tools seperti berikut:

1. Line Tool - Melukis garis lurus.

2. Selection Tool - Digunakan selepas menggunakan line tool untuk melukis garis lurus. Letakkan cursor pada garis lurus, lepas tu simbol melengkung akan keluar. Pada masa tu kita boleh melengkungkan garis dengan menarik garis ke atas atau bawah. Dalam gambar ini, saya menggunakan tools ini untuk melukis gunung, pelangi,laut.

3. Shape Tool - Dalam shape tool ini terdapat rectangle tool, oval tool dan polystar tool. Dalam gambar ini, saya menggunakan rectangle tool untuk melukis kerusi dan payung, manakala oval tool untuk melukis bola.

4. Pencil Tool - Selebihnya saya menggunakan pencil untuk melukis. Ini kerana dengan menggunakan pencil tool,kita boleh melukis secara bebas =D

Tools yang digunakan untuk mewarna pula seperti berikut:

1. Paint Bucket Tool - Paint bucket tool sangat best digunakan sebab apabila bahagian tersebut ditutupi oleh garis, tool ini akan mewarnakan seluruh bahagian tersebut.

2. Eyedropper Tool - Kadang kala kita akan terlupa warna yang telah digunakan jadi gunalah eyedropper tool ini. Senang je nk gunakan tool ini, kita guna eyedropper ini dan letak pada warna yang kita nk. Apabila kita tengok balik kt fill color, kita dapati warna tersebut telah tukar kepada warna yang kita kehendaki.

Onion Skin Tools

ORIGINAL

After Onion Skin Tool

 Cara-cara melukis menggunakan Onion Skin Tool:

1. File > Import > Import to Library > Select picture > Open. Then drag the picture to the stage.

2. Click frame 2 > Right click > Insert Keyframe > Click Onion Skin.

3. Trace your image.

4. Click frame 1 > Right click > Remove Frames.

5. Select image > Modify > Convert to Symbol > Give name > OK.

  

Reflection: Week 10

Assalamualaikum

Minggu ini mid term break!!!! Namun saya kena update reflection yang lama terkubur huhuhu. Selain itu, Dr Zaida pesan suruh familiar dulu dengan Adobe Flash supaya nanti masa kelas minggu depan xder la rasa janggal. Happy Holiday you allss =D

Reflection: Week 9

Reflection Week 9

Assalamualaikum

Pada minggu ini sama saperti minggu lepas jugak, saya stress lagi apabila PHPMyAdmin x boleh nak buka walaupun masukkan username dan password yang betul. Namun, perkhabaran gembira buat saya apabila Dr Zaida kata minggu ini kali terakhir kami belajar ASP,PHP dan Dreamweaver. Selepas ini, kami akan belajar menggunakan Adobe Flash CS3. Nak tau kenapa saya gembira?? Sebabnya xderla saya tertinggal semasa Dr Zaida tgh buat di depan kerana PHPMyAdmin x boleh buka. Namun, saya juga rasa x puas lagi untuk belajar ASP, PHP dan Dreamweaver =( Pasni kena la explore sendiri. I think it is more fun if we could learn together with friends and a lecturer. Kita boleh saling bantu membantu antara satu sama lain. Let’s move on to our reflection this week.

Minggu ini, Dr Zaida mengajar untuk membina borang soal selidik. Rasional membina borang soal selidik ini adalah memudahkan anda semasa membuat research study. Selalunya kita akan membina soal selidik untuk mendapatkan feedback daripada responden. Jadinya, kita x payah la membazir duit untuk photostat soal selidik yang banyak. Dengan adanya borang soal selidik ini, kita boleh menghantar ke responden melalui email. Untuk membuat borang soal selidik ini boleh digunakan beberapa elemen seperti text fields, multi line text fields, radio buttons, check boxes dan drop-down lines. Namun kali ini, Dr Zaida mengajar menggunakan elemen Radio Group di dalam soal selidik, membina database di dalam PHPMyAdmin. Radio Buttons mesti diletakkan di dalam group, supaya hanya satu sahaja jawapan yang akan dipilih oleh responden berdasarkan soalan yang diberikan dalam satu-satu masa.

Langkah-langkah membuat Radio Group adalah seperti berikut:

1. Kita bina dahulu soalan dan diikuti dengan Radio Group ini untuk memudahkan menyusun antara soalan dengan jawapan.  

Menu > Insert > Form > Radio Group

    2.  Setelah siap membuat soalan dan pilihan jawapan, simpan fail tersebut dan buat     connection database.

Server Behavior > Insert Record

    3.  Membuat Submit Button untuk menghantar dan menyimpan data di dalam pangkalan data.

Nah ini la hasilnya selepas membuat Borang Soal Selidik dalam kelas 

Hasil jawapan survey di dalam database

Adobe Flash CS3

Sebelum mengakhiri kelas pada minggu ini, Dr Zaida ada masuk sedikit pasal Adobe Flash CS3 ni.. Adobe Flash CS3 ini mempunyai Flash Action Script 2.0 kerana lebih mudah dan sesuai untuk pengguna baru. Owh x lupa juga, belajar Adobe Flash ini juga ada group FB (Learning Adobe Flash 2012 / 2013) seperti belajar Dreamweaver.

Bila terkenang balik project yang pernah buat dulu masa Matrik mesti gelak sowang2.. Sebabnya buat flash ni memang fun, excited, easy la,terasa mcm kanak-kanak ribena. Dulu masa Matrik, ada buat kereta akan menaiki gunung. Tp bila run flash, lain plak jadinya. Kete menaiki di udara tanpa ada gunung. Gunung hilang ke mana la plak. Lepas tu, kete x naik secara smooth, dia naik tunggang langgang. Bila tgk memang klalar hbs la.. Umm windu plak saat tu =( Tapi kali ini mesti membuat flash yang lebih complicated. Saya pun kena fokus pada flash ni sebab research study saya ada berkaitan dengan membina flash huhuhu..

Kemudian, Dr Zaida menyuruh kami untuk explore sendiri tentang flash semasa mid term break supaya nanti pada kelas akan datang, xder la rasa janggal. Dr 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.

Reflection: Week 8

Reflection Week 8

Assalamualaikum

Okay pada minggu ni saya sgt stress!!! Ini disebabkan oleh PHPMyAdmin xley buka walaupun saya dh masukkan username dan password yang betul huhuhu… argghhh!!!! Sgt tension apabila tidak dapat mengikuti langkah-langkah yang diajar oleh Dr Zaida semasa dlm kelas. Tetapi itu tidak bermakna saya hanya duduk diam dan lihat sahaja. Saya masih mengikuti Dr apabila membina page dalam Dreamweaver. Manakala tulis dalam buku langkah-langkah semasa membina database.

Kelas kali ini, kami belajar untuk menambahkan security dan membina administration page kepada laman web. Sesebuah laman web mungkin mempunyai seorang atau beberapa admin yang menguruskan laman web dan data pengguna. Namun, setiap admin mempunyai level access yang tertentu, maka Dr Zaida mengajar kami untuk setkan security mengikut level access tertentu bagi admin yang berbeza. Selain itu, kita juga boleh tentukan laman mana yang boleh dilihat oleh pengguna biasa dan pengguna berdaftar.Ini secara tidak langsung dapat membezakan level antara setiap pengguna.Kandungan laman web boleh dikawal melalui Restricting Access. .

                                                                                                          

Dalam laman administration, admin boleh insert user, view user, edit user,delete user dan logout seperti:-

Insert User        - untuk menambahkan pengguna baru

View User          - untuk memaparkan senarai pengguna berdaftar

Edit User           - untuk mengemaskini data pengguna

Delete User      - untuk memadamkan rekod pengguna

Logout               - untuk keluar dari sistem

Akhir sekali, kami belajar pasal :-

Go to Details Page - server behavior is used in master-detail Web applications to navigate from a chosen link on the master page to a designated detail page.

Go to Related Page - server behavior links to a new page that conveys the form and/or URL variables previously passed to the current page.

Reflection: Week 7

Reflection Week 7

Assalamualaikum

Pada minggu ini,kelas tiada kerana Dr Zaida ada tugasan luar dan Dr ada tinggalkan tugasan luar kami semua iaitu menyiapkan assignment “Inserting Security into the System". Dalam tugasan berkumpulan ini kami diberi pilihan sama ada ingin menggunakan languange ASP atau PHP. Kumpulan kami telah membuat tugasan ini dalam PHP kerana kelas masih menggunakan PHP. Tugasan kali ini agak mudah dan senang untuk difahami kerana kami hanya perlu mengikut langkah-langkah yang telah di berikan di dalam handout yang diberikan oleh Dr.Zaida. Objektif tugasan ini adalah untuk membina sebuah laman web di mana pelajar perlu login sebelum memasukki laman web tersebut. Jika pengguna tidak mempunyai akaun, dia perlulah membuat pendaftaran.  Antara langkah-langkahnya ialah:

1.Connecting to a database file

2.Creating a register page

3.Inserting text field

4.Inserting data to a database

5.Check username

6.Creating a checkuser.php file

Semasa membuat checkuser.php file, kami mengalami masalah kerana dalam Binding tab tidak mempunyai  Request Variable selepas click plus sign.. Mengikut pendapat rakan sekelas, dia mengatakan bahawa Request Variable terdapat dalam ASP. Jadi untuk bahagian ini, kami tidak dapat selesaikan.

7.   Creating a login page

8.   Inserting Flash Button

9.   Creating a login-failed file

10. Restricting Access

11.  Creating a logout link

12. Creating restricted.php

Reflection: Week 6

Reflection Week 6

Assalamualaikum

Kelas pada minggu ini saya tidak dapat hadir atas sebab kesihatan yang tidak mengizinkan. Maklumla sekarang musim hujan panas hujan panas huhuhu… Sedih sebab tertinggal kelas Dr Zaida. Walaupun tak dapat datang, tetapi saya tetap kena belajar sendiri. Terima kasih pada Ana sebab tolong ambilkan nota untuk saya dan membawa perkhabaran gembira iaitu minggu depan xder kelas hehehe.. Ehem2 kata Dr Zaida, mesti la banyak kerja yang dia akan bagi. Jadinya pada minggu depan walaupun tidak ada kelas tetapi kami ada tugasan yang perlu dibincangkan sebelum balik Raya Haji yeay!!!!

Okay2 kita balik semula pada topik yang asal, Ana kata minggu ini belajar pasal membina page untuk registration dan user authentication. Setelah apa yang Ana terangkan, saya dpt simpulkan terdapat 4 jenis user authetication iaitu:

1.    Log In User

Sebelum pengguna login ke dalam laman web atau sistem, mereka mestilah terlebih dahulu membuat pendaftaran dengan mengisi maklumat peribadi.  Setelah itu, pengguna boleh login pada user authentication, supaya boleh mengakses sesuatu laman web atau sistem dengan memasukkan username dan password.

2.    Restrict Access to Page

Fungsi ini pula membolehkan admin menghadkan akses laman web tersebut mengikut tahap akses yang tertentu. Contohnya, admin boleh edit, view, delete, insert maklumat pada page tersebut manakala pengguna hanya boleh akses page yang tertentu sahaja.

3.    Check New Username

Username merupakan sesuatu yang unik iaitu satu username hanya untuk satu pengguna sahaja. Jadi “check new username” akan berfungsi untuk mengelakkan pengguna baru menggunakan username yang sama dengan pengguna sedia ada.  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.

4.   Log Out User

Apabila pengguna telah selesai menggunakan laman web atau sistem, pengguna mestilah logout supaya akaun anda tidak digunakan oleh orang lain. Contoh: apabila anda telah selesai berurusan menggunakan cimbclicks, sudah semestinya anda perlu logout supaya pengguna lain tidak menyalahgunakan akaun cimbclicks anda. Namun, pereka laman web telah set kan sekiranya pengguna tidak membuat apa-apa dalam 10 minit, akaun tersebut akan automatik logout.

Reflection: Week 5

Reflection Week 5

Assalamualaikum

Minggu ini kami beralih arah pula kepada penggunaan PHP dan MySQL bersama dreamweaver CS2.  Apa itu PHP dan MySQL??? PHP sebenarnya adalah singkatan bagi Hypertext Preprocessor. PHP websites adalah lebih dinamik di mana pengguna boleh berinteraksi dan bertukar maklumat apabila menggunakan pangkalan data website tersebut. Kelebihan menggunakan PHP adalah kebanyakkan tools berkaitan dengannya adalah open source jadi kita tidak perlu bayar apa-apa pun. Oleh sebab itu, kebanyakkan lebih gemar menggunakan PHP daripada ASP. Tetapi mana yang lebih mudah dan selesa digunakan adalah bergantung kepada pendapat pengguna itu sendiri.

Sebelum ini, kita telah menggunakan  Microsoft Access sebagai pangkalan data untuk ASP tetapi untuk PHP kita menggunakan pangkalan data MySQL. MySQL digunakan untuk menyimpan, menyusun, mengatur dan memaparkan maklumat. Di dalam MySQL, terdapat beberapa RESERVED WORD (link contoh) yang tidak boleh digunakan bagi nama table dan column kerana MySQL menggunakan ayat spesifik tersebut untuk pemprosesan arahan. Jadi apabila anda menggunakan reserved word tersebut, MySQL akan menjadi keliru. PHP boleh install di dalam Windows tetapi perlu la install Apache server dan MySQL terlebih dahulu. Sekiranya kita install WAMP atau XAMPP, komputer anda akan automatik akan install sekali dengan PHP, Apache server, PHPMyAdmin,  MySQL dan SQLiteManager. Untuk pengetahuan anda WAMP adalah singkatan bagi “Windows”, “Apache”, “MySQL”, dan “PHP”. Manakala XAMPP adalah singkatan bagi “X= cross platform”, “A= Apache”, “M= MySQL”, “P= PHP”, “P= Perl”. Klik ini untuk memuat turun WAMP. Manakala klik ini untuk memuat turun XAMPP.

Antara WAMP dan XAMPP, mana satu yang bagus? Sesetengah mengatakan XAMPP lebih mudah digunakan berbanding dengan WAMP dan sebaliknya. Kebanyakkan pereka web pula memilih XAMPP kerana XAMPP mempunyai Perl dan kedua-dua versi PHP4 dan PHP5. Malah pereka web boleh menukar versi-versi tersebut.  

Nak tau tak kenapa kita perlu install Apache?? Apache adalah web server untuk PHP yang berfungsi macam IIS dalam ASP. Peringatan kepada semua, untuk mengaktifkan web server Apache, IIS perlu dihentikan dahulu kerana kedua-dua web server ini menggunakan port yang sama iaitu port 80. Sekiranya anda ingin menggunakan kedua-dua web 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. 

Dalam kelas, Dr Zaida mengajar kami untuk saya belajar untuk

1.     Setup a Site

Semasa setup site,kita perlu memilih untuk menggunakan server technology. Untuk kelas minggu ini, sudah tentu kita harus memilih PHPVBSricpt sebab belajar tentang PHP.

            2.     Setup the Database file in PHPMyAdmin

Saya belajar create database & tables,insert, edit dan delete data dalam table pangkalan data MySQL menggunakan PHPMyAdmin. Perlu diingatkan bahawa jika kita mempunyai 5 perkara yang perlu diletakkan contoh (surname, firstname, email, website, message), bilangan field adalah 6. Formula bagi bilangan field adalah

field = n+1 (ID-Primary Key)

field = 5+1

field = 6

3.    Setup Contact Form

                     Seperti kelas sebelum ini, saya belajar memasukkan form,label, text boxes, text  
                     area dan submit button.  

2.     Setup the Connection

3.     Writing a data into a database using Insert Record

4.     Reading/viewing a data from a database using RecordSet
5.     Execute the file