Konsep Asas Pembangunan Halaman Web Dinamik dan Interaktif

1

Konsep Asas Pembangunan Halaman Web Dinamik dan Interaktif

Bagi menghasilkan sebuah aplikasi atau halaman web yang dinamik dan interaktif, ianya perlulah berkeupayaan untuk membaca data atau masukan maklumat dari pengguna dan seterusnya menyimpan ataupun memaparkannya kembali mengikut keperluan. Apabila konsep ini dikuasai, anda boleh menggunakannya bagi tujuan menyimpan atau memaparkan maklumat, memberi maklum balas kepada pengguna, menyediakan ruangan perbincangan dalam talian (Forum atau Discussion Board), menyediakan ruangan menghantar e-mel, menyediakan ruangan buku tamu (Guestbook), menyediakan sistem pengurusan pengguna dan banyak lagi. Menerusi Dreamweaver MX, anda boleh menghasilkan halaman web interaktif menerusi kemudahan yang disediakan dengan lebih mudah dan pantas berbanding kaedah tradisi.

Bab 1 : Konsep Asas Halaman Web Dinamik & Interaktif

Macromedia Dreamweaver MX (Siri 2) 2

Teknologi penghasilan halaman web interaktif

Bagi menghasilkan sebuah aplikasi atau halaman web yang benar-benar interaktif, ianya perlulah berkeupayaan untuk membaca data atau masukan maklumat dari pengguna dan seterusnya menyimpan ataupun memaparkannya kembali mengikut keperluan. Apabila konsep ini dikuasai, anda boleh menggunakannya bagi tujuan menyimpan atau memaparkan maklumat, memberi maklumbalas kepada pengguna, menyediakan ruangan perbincangan dalam talian (Forum atau Discussion Board), menyediakan ruangan menghantar e-mel, menyediakan sistem pengurusan pengguna, menyediakan ruangan buku tamu (Guestbook) dan banyak lagi. Kalau dahulunya, seseorang pembangun halaman web perlu menguasai bahasa pengaturcaraan yang kompleks (PERL misalnya) bagi merealisasikan proses pembangunan halaman web interaktif. Kini, teknologi skrip berasaskan server seperti ASP, ASP.NET, PHP, JSP, ColdFusion dan sebagainya semakin mendapat tempat. Selain dari ianya lebih mudah untuk dipelajari, bahasa atau teknologi ini juga mempunyai pelbagai kelebihan yang lain. Atas dasar tesebut, kebanyakan pembangun halaman web interaktif masa kini mula berlumba-lumba menguasai teknologi skrip berasaskan server ini. Ini bagi memastikan halaman web yang mereka bangunkan selari dengan keperluan pengguna masa kini.

Teknologi skrip berasaskan server : Active Server Pages Buat masa ini terdapat beberapa pilihan bahasa skrip berasaskan server yang boleh dipilih bagi membolehkan sebuah halaman web interaktif dihasilkan. Antara yang popular ialah Microsoft Active Server Pages (ASP), Java Server Pages (JSP), PHP dan Macromedia ColdFusion. Bagi anda yang baru dalam bidang ini, ASP merupakan pilihan yang dicadangkan memandangkan ianya lebih mudah untuk diuruskan dan juga dipelajari. Di samping itu, keperluan sistem bagi memastikan ianya boleh digunakan adalah lebih mudah untuk disediakan (Rujuk bab 2 untuk maklumat lanjut). Atas dasar tersebut, buku ini akan menggunakan Microsoft Active Server Pages (ASP) bagi tujuan yang dinyatakan. Active Server Pages merupakan antara teknologi yang banyak memberi kesan dalam dunia pembangunan halaman web interaktif masa kini.



Bagi anda yang bekerja dalam sistem persekitaran kerja berasaskan Windows, ASP merupakan antara teknologi yang sewajarnya diberi perhatian. Bagi anda yang bekerja dalam persekitaran Linux atau Unix pula, PHP merupakan antara teknologi yang lebih sesuai untuk digunakan. Walaupun demikian, dengan sokongan perisian tambahan, PHP masih boleh digunakan di dalam persekitaran Windows. ColdFusion pula menawarkan teknologi dalam kelasnya yang tersendiri dan semakin mendapat perhatian ramai. Walau bagaimanapun, anda memerlukan sokongan pada sistem komputer pelayan (server) iaitu Macromedia ColdFusion Server bagi membolehkan ianya beroperasi dengan sempurna.

Active Server Pages sepintas lalu Fail yang dihasilkan oleh Active Server Pages biasanya mempunyai format atau sambungan fail .ASP. Bagi anda yang menggunakan Active Server Pages versi baru (ASP.NET), format fail yang dihasilkan ialah .aspx. Fail ASP boleh mengandungi kod HTML, skrip atau kod aturcara dan komponen-komponen yang lain. ASP boleh dihasilkan dengan menggunakan bahasa skrip seperti VBScript (Edisi Skrip bagi Visual Basic), Javascript dan juga Jscript (JavaScript versi Microsoft). Anda boleh membina kod atau skrip ASP dengan menggunakan perisian tradisi seperti Notepad ataupun dengan sokongan teknologi perisian seperti Macromedia Dreamweaver MX, Homesite, Microsoft Visual Interdev dan sebagainya Bagi membolehkan proses pembangunan skrip ASP boleh digunakan pada sistem komputer anda (semasa proses pembangunan), komputer anda perlulah bertindak selaku komputer pelayan atau server. Oleh yang demikian, perisian seperti Microsoft IIS (Internet Information Server) atau Internet Information Services boleh digunakan bagi anda yang bekerja menggunakan sistem berasaskan Windows NT, Windows 2000 atau Windows XP. bagi anda yang menggunakan sistem Windows yang lebih terdahulu (seperti 95, 98, ME), perisian Microsoft Personal Web Server boleh dimanfaatkan. Contoh skrip ASP Selain dari membangunkan bahasa skrip ASP anda sendiri, terdapat juga banyak halaman web yang menyediakan kemudahan yang



membolehkan anda memuat turun skrip ASP secara percuma. Berikut merupakan antara contoh skrip ASP yang diperolehi menerusi Internet yang boleh digunakan bagi memproses data berbentuk borang komen atau pendapat pengguna di halaman web anda.

Contoh Connecting to the Database and inserting data into it through ASP <% '---------------This file is the GuestBookSendCode.asp file-------------- 'Start Declaring all variable used by you (you can do this as you code) Dim DBConn, strDB, strDate,strInsertSQL, strName, strEmail, strMess 'Give the Database Connection String strDB = "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath("dbGuestbook.mdb") & ";DefaultDir=" & Server.MapPath(".") & ";DriverId=25;FIL=MS Access;MaxBufferSize=512;PageTimeout=5" 'Get today's Date and the data sent from web (Replace is used to replace a ' with '' (2 quotes together) because a database doesn't allow insertion of strings with a single ' ) strDate=CDate(Date) strName=Replace(request("name"), "'", "''") strEmail=Replace(request("email"),"'", "''") strMess=Replace(request("mess"), "'", "''") 'Give the SQL Insert Statement strInsertSQL="Insert Into tblGuestBook (fldDate,fldName,fldEmail,fldMessage) Values ('" & strDate & "','" & strName & "','" & strEmail & "',' " & strMess & "' )" 'Open the database and insert the data if strName<>"" and strEmail<>"" then Set DBConn = Server.CreateObject("ADODB.Connection") DBConn.Open strDB DBConn.execute strInsertSQL response.write "iSuccess=1" 'Send a success response to web Else response.write "iFailed=1" 'Send a failed response coz' the name



or/and email field was null. End If 'Close the database connection DBConn.close Set DBConn=Nothing %>

Macromedia Dreamweaver MX dan teknologi web interaktif Kehadiran Macromedia Dreamweaver MX menjadikan proses penghasilan skrip berasaskan server seperti mana yang dinyatakan tadi menjadi semakin mudah. Kalau dahulunya, seseorang pengaturcara atau pembangun halaman web perlu menghafal serta menaipkan skrip yang diperlukan satu persatu, kini ianya telah semakin dipermudahkan menerusi kemudahan pilihan menu yang disediakan. Macromedia Dreamweaver MX kemudiannya akan menghasilkan skrip yang diperlukan secara automatik. Macromedia Dreamweaver MX berkeupayaan membantu anda menghasilkan skrip ASP, ASP.NET, JSP, PHP atau ColdFusion anda sendiri. Ianya dapat dihasilkan dengan lebih mudah tanpa perlunya anda menghafal dan menulis setiap kod tersebut seperti mana proses penghasilan skrip secara tradisi. Skrin berikut misalnya menunjukkan bagaimana Macromedia Dreamweaver MX membantu dalam proses menetapkan DSN (hubungan dengan pangkalan data).

Berikutnya pula merupakan skrip ASP yang terhasil secara automatik bagi membolehkan hubungan dengan fail pangkalan data dilaksanakan:



Menerusi kemudahan yang disediakan oleh Dreamweaver MX, anda juga mampu menghasilkan halaman web yang mempunyai interaktiviti pada peringkat yang lebih tinggi dengan lebih mudah. Walaupun pengetahuan dalam menghasilkan bahasa skrip seperti mana yang telah dibincangkan sebelum ini amat diperlukan bagi tujuan tersebut, proses kerja yang terbabit telah semakin dipermudahkan.

Contoh penggunaan Macromedia Dreamweaver MX dalam menghasilkan web interaktif

Menerusi Dreamweaver MX anda boleh menghasilkan pelbagai peluang interaktiviti di halaman web anda seperti buku tamu, forum perbincangan, kedai elektronik, sistem pengundian, sistem pengurusan pengguna, borang soal selidik, sistem navigasi lanjutan dan banyak lagi. Buku ini akan membincangkan konsep-konsep utama yang perlu difahami dan di akhir penerangan setiap konsep, pembaca akan dibimbing untuk menggunakan konsep tersebut di dalam projek interaktif yang sebenarnya. Berikut merupakan sebahagian daripada projek halaman interaktif yang akan anda hasilkan menerusi latihan kerja di dalam bab-bab yang seterusnya :



Sistem pendaftaran pengguna baru

Sistem login pengguna



Kelab ahli atau pengguna halaman web (pendaftaran)

Paparan senarai ahli mengikut turutan



Ruangan bagi Admin meminda data peribadi ahli

Enjin Pencarian



Ruangan komen pengguna atau GuestBook (masukan data)

Ruangan komen pengguna atau GuestBook (paparan data)



Peti pengundian (undi)

Peti pengundian (paparan keputusan)

Beberapa contoh penghasilan halaman web interaktif yang lain Berdasarkan contoh yang dibincangkan sebelum ini, jelas dapat dikatakan bahawa Dreamweaver MX mampu membantu anda menghasilkan pelbagai halaman web interaktif seperti mana yang diperlukan. Menerusi latihan kerja serta projek yang akan anda usahakan menerusi buku ini, terdapat banyak lagi projek yang boleh dihasilkan.dengan menggunakan konsep yang serupa. Berikut merupakan beberapa contoh halaman web yang telah dihasilkan berdasarkan konsep utama yang dinyatakan.



Pendapat Anda Halaman web “Pendapat Anda” membolehkan seseorang pengguna memberikan pendapat mereka dan seterusnya pendapat tersebut dipaparkan kembali bagi tatapan umum.



Bezanya di sini, ialah pelbagai maklumat tambahan seperti IP address pengguna, tarikh dan waktu pendapat dimasukkan, alamat halaman web pengguna dan sebagainya turut diperolehi sama. Selain dari itu, setiap pengguna juga akan dihadkan jumlah perkataan yang boleh dimasukkan bagi mengelakkan berlakunya limpahan data yang tidak dikehedaki. Sistem Mesej Dalaman Halaman web “Sistem Mesej Dalaman” pula merupakan sistem yang bertindak sebagai sistem menghantar, menerima mesej seperti mana penggunaan sistem e-mel yang biasa.

Halaman web “Sistem Mesej Dalaman” ini juga membolehkan seseorang pengguna untuk login atau masuk ke dalam sistem menerusi kata laluan yang ditetapkan. Ianya menyediakan kemudahan bagi membolehkan seseorang pengguna menghantar serta menerima mesej dari pengguna lain yang berada di dalam sistem yang sama.



Pengguna boleh membaca, memadam, membalas mesej yang diterima Koleksi Pautan Peribadi Halaman web “Koleksi Pautan Peribadi” merupakan sistem yang membolehkan anda membuat pautan (Bookmark) bagi mana-mana halaman web kesukaan anda. Pautan tersebut pula boleh dicapai serta diubahsuai bila-bila masa di mana sahaja.



Jurnal Peribadi Halaman web “Jurnal Peribadi” pula merupakan sistem yang bertindak sebagai jurnal elektronik atau diari peribadi pengguna. Setiap pengguna akan memiliki jurnal elektronik mereka sendiri yang dikawal oleh nama ahli serta kata laluan yang dikhaskan. Menerusi jurnal peribadi ini pelajar boleh menambah maklumat, meminda maklumat, membaca maklumat serta memadam maklumat mengikut keperluan masing-masing.



Adalah diharapkan buku Macromedia Dreamweaver MX (Siri 2) ini mampu memberi pendedahan kepada anda mengenai kemampuan sebenar perisian Macromedia Dreamweaver MX. Adalah diharapkan juga pengetahuan yang diperolehi menerusi latihan kerja serta projek yang akan dihasilkan boleh diubahsuai serta digunakan bagi projek-projek interaktif lain yang diperlukan.

Konsep Asas Pembangunan Halaman Web Dinamik dan Interaktif

Documents

Transcript of Konsep Asas Pembangunan Halaman Web Dinamik dan Interaktif