#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 :