#13 Development of Dynamic Website

Salam & hii guys... Rasa legaa minggu ni sbb da pon submit Flash Project Group. Hopefully bole laa score & dpt A ye Prof. Zaida. Hehe Berbalik kpd pembelajaran hari ini..Dr. Ashikin memberi masa kepada kami untuk explore sendiri apps 3 yg telah di install ke dalam ipad kami. Antaranya ialah perbandingan ASP & PHP.

ASP dan PHP

Disini saya akan kesimpulan daripada hasil pencarian 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

ASP - IIS - ACCESS

Selepas itu, kami belajar cara untuk create a contact form in Dreamweaver using ASP. 

1st step : setup/install IIS. 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.

2nd step : Untuk develop ASP dan PHP didalam dreamweaver, kami perlu setup a site. Site juga boleh dibuat sekiranya kita menggunakan HTML, kerana site akan manage file kita. Hal ini demikian kerana, site adalah koleksi file dan folder yang berkaitan dengan website didalam server. Satu site hanya untuk satu website sahaja. 

3rd step : 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. 

4th step : Setup a connection untuk menghubungkan database dengan asp file. 

5th step : Apabila connection sudah berjaya, kami perlu setup the contact form dengan menggunakan dreamweaver. 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. 

6th step : 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. 

7th step : Untuk membaca atau view data dari database, recordset perlu dibuat. Disini kami perlu buat satu lagi file asp didalam dreanweaver untuk fungsi view. 

8th step : Menggunakan connection yang telah dibuat sebelum ini, masukkan recordset ke dalam file view.asp. 

9th step : Untuk view semua data yang diisi oleh pengguna dalam satu file, repeat region boleh digunakan. 

10th step : 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. Dan akhir sekali ini link untuk dynamic application dengan MS access. Byeeee!

#12 Web Host, Data Base & PHP My Admin

Hii..guys. Bertemu kembali kita.hehe Orait..utk minggu ni, kami akan mengikuti dua kelas Authoring iaitu pada hari ini (26/11/2013) dan lusa (28/11/2013). Kenapa ade dua kelas? Hah..sebabnya Dr. Asyikin akan bercuti  selama 3 minggu pada bulan 12 nnt. Jadi kami perlu menghabiskan syllabus seawal yang boleh. :)


Task 1

Baiklaa..utk aktiviti pertama, kami belajar mengenai Web Host. Apa itu Web Host? Web Hosting adalah tempat penyimpanan file,baik itu berupa tulisan,gambar,script dll.yang biasanya hosting itu disewa dan jangka sewanya biasanya dihitung pertahun.

Kalau Menurut Wikipedia adalah sebagai berikut:

Web Hosting adalah salah satu bentuk layanan jasa penyewaan tempat di Internet yang memungkinkan organisasi menampilkan layanan jasa atau produknya di web / situs Internet. Selain itu, ia juga ditakrifkan sebagai tempat penyimpanan data berupa megabytes (mb) hingga terabytes (tb) yang memiliki koleksi ke internet sehingga data tersebut dapat direquest atau diakses oleh user dari semua tempat secara simultan. Inilah yang menyebabkan sebuah website dapat diakses bersamaan dalam satu waktu oleh multi user.

Pada dasarnya sebuah server web hosting menggunakan adalah sebuah komputer biasa namun menggunakan beberapa komponen dan program dasar sebuah server serta disarankan harus mampu untuk online 24 jam setiap hari dan tanpa harus dimatikan dalam jangka waktu lebih lama daripada komputer biasa.

Oleh itu, Dr. Asyikin mengajar kami cara-cara utk membuat web hosting dengan Free.Hehe Di bawah ini adalah account yang telah sy create.

Task 2

Selepas itu, aktiviti kedua pula Dr, Asyikin mengajar kami cara-cara utk memasukkan info melalui Data Base. Seperti gambar dibawah :

Design View

Datasheet View

Task 3

Utk aktiviti yang ketiga..kami perlu memasukkan info melalui PHP My Admin. Bi bawah adalah langkah-langkahnyaa :

Step 1

Step 2

Step 3

Step 4

Step 5

Okay laa..sampai disini sahaja coretan saya. Jumpa lagi khamis ni ye kawan-kawan. Byeee! :)

#11 Apps Adobe Dreamweaver CS3

Hii..utk minggu ni, apps Adobe Dreamweaver CS3 baru di install ke dalam ipad kami. Apps yang telah di installkan oleh kak farhana ke dalam ipad kami ialah Introduction Dreamweaver CS3 dan Development of static Website.

Dr. Asyikin memberi kami masa untuk melihat apps yang telah di installkan ke dalam ipad kami. Segala pertanyaan boleh dikemukan terus kepada Dr. Asyikin andai tidak jelas dan ingin mengetahui dengan lebih lanjut.

Itu sahaja utk kelas hari ini. Jumpa lagi minggu depan! Byeeee. :)

#10 Introduction To Web-Based Development

Hii..guys! Untuk minggu ni, kami belajar 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.Asyikin, 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.

Rasanya sampai sini saja entry untuk kali ini. Tak sabar menanti untuk kelas yang akan datang dan berkongsi lagi ilmu yang diperoleh. Bye! :D

#9 Mid Sem Break

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

#8 Last Class Bersama Prof. Dr Zaida

Hii..Minggu ini adalah minggu terakhir bagi kelas Flash bersama Prof. Zaida.huhu Kejap je masa berlari kn. Next week da mula cuti mid sem. Untuk kelas yang terakhir ni, Prof. Zaida memberi peluang kepada kami untuk berbincang mengenai Project Flash yang akan di hantar 2 minggu dari tarikh sekarang. Saya satu kumpulan dengan Uzailun. 

Selain itu, Prof. Zaida ada juga membuat refleksi sedikit apa yang kita telah belajar sepanjang minggu Flash ini.

#7 Drag & Drop

Hii..bertemu kembali! Untuk minggu ni kami telah belajar mengenai drag and drop yang menggunakan koordinat. Berikut merupakan langkah-langkah bagi menghasilkan drag and drop :

1. First of all we need to create the 'place' where we want to drag the object. 

2. Click on Menu 'Insert', and choose 'New Symbol'. Name it as place and choose movie clip and click Ok.

3. Choose rectangular shape in the first frame of the movie clip to create the box.

4. Right click on the keyframe and choose 'Actions' and type action script.

stop ( );

5. Right click on the second frame and choose insert keyframe and then also put the stop action script.

6. Draw the "tick" symbol  at the corner of the rectangle.

7. Go back to scene and drag the movie clip name place to the stage and named the layer as response.

8. Rename the instance name of the rectangle as box1. 

9. Repeat step 8 and named the second rectangle as box2.

10. Create movie clip symbol and draw a rectangle and named it as rec. Create another movie clip symbol and named it as circle.

11. Insert action script behind each rectangle and circle.

Action script for rectangle:

on(press){

startDrag(this);

}

on(release){

stopDrag();

if((this._x>=296.4)&(this._x<=481.4)&(this._y>=261.9)&(this._y<=310.9))

{

_root.box2.gotoAndStop (2);

}else{

_root.box2.gotoAndStop (1);

this._x=97.5;

this._y=285.9;

}

}

Action script for circle :

on(press){

startDrag(this);

}

on(release){

stopDrag();

if((this._x>=303.4)&(this._x<=479.4)&(this._y>=98.8)&(this._y<=136.8))

{

_root.box1.gotoAndStop (2);

}else{

_root.box1.gotoAndStop (1);

this._x=99.5;

this._y=97.8;

}

}

12. Test the movie.

Here I capture my result :

#6 Apps 4 : Type of Interactions

Hi guys! What a tired week. Hmm. Setiap hari ada assignment nak kene siapkan. huhu. Jadi kenalah rajinkan diri untuk membuat segala tugasan. Nama pon master student kan? So, be positive ! hehe. 

Okay untuk minggu ini, kak farhana telah menginstallkan kami apps 4 untuk ipad dan kami juga diberi tugasan bagi apps 4 untuk dibuat dan diupload ke facebook. 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.