Wednesday, June 25, 2014

Pengenalan Kepada Sejarah Web Service (Servis Web)

---

Internet and Worldwide Web

1) Internet adalah gabungan rangkaian komputer serata dunia.

2) Gabungan ini melibatkan penggunaan berbagai jenis perkakasan dan perisian komputer yang dimiliki oleh syarikat telekomunikasi, organisasi awam dan orang persendirian.

3) Melalui gabungan rangkaian ini, pelbagai perkhidmatan berasaskan pertukaran data dapat diwujudkan termasuklah Worldwide Web (Web).

4) Antara teknologi utama yang digunakan di dalam Internet ialah TCP/IP. TCP bermaksud Transfer Control Protocol. Ia merangkumi aspek pemindahan data dari satu peranti komunikasi (communication device) ke peranti yang lain. IP bermaksud Internet Protocol. Ia merangkumi aspek penentuan lokasi setiap komputer yang berada di dalam rangkaian Internet (atau mana2 rangkaian setempat yang menggunakan teknologi TCP/IP).

5) Melalui teknologi TCP/IP, maklumat elektronik dapat dihantar dari satu komputer ke komputer yang lain dengan cekap meskipun jarak perhubungan ini sangat jauh.

6) Lihat klip video ini untuk memahami bagaimana teknologi TCP/IP berfungsi (http://www.youtube.com/watch?v=Ve7_4ot-Dzs)

Worldwide Web (Web)

7) Worldwide Web atau WEB adalah sejenis perkhidmatan perkongsian dokumen dan aplikasi elektronik melalui rangkaian Internet.

8) Pertukaran data elektronik dilakukan dengan berdasarkan teknologi HTTP (Hyper Text Transfer Protocol). Apabila dua komputer berhubung melalui kaedah HTTP, kedua-duanya akan melalui kitaran yang dipanggil HTTP Request/Response

HTTP Request/Response Basics

9) HTTP Request/Response adalah sebahagian dari kitaran perhubungan di antara dua mesin yang berinteraksi menggunakan teknologi HTTP melalui rangkaian Internet. Maklumat lanjut tentangnya boleh dibaca di http://devhub.fm/http-requestresponse-basics/.

Ringkasnya:

1. Perhubungan bermula apabila pengguna melawat sesebuah tapak web melalui URL tapak tersebut, e.g google.com

2. Komputer pengguna akan menghantar HTTP Request untuk mendapatkan laman web di komputer google.com.

3. Komputer google.com menerima HTTP Request, lalu memprosesnya dan mengembalikan data yang diperlukan melalui HTTP Response.

Client-Server Architecture

10) Client-Server Architecture adalah satu senibina perhubungan komputer di mana peranan dua komputer yang sedang berinteraksi melalui rangkaian komputer (seperti Internet) ditakrif sebagai Client (komputer yang memohon data, iaitu HTTP Request) dan Server (komputer yang melayan permohonan data, iaitu HTTP Response).

11) Sesebuah komputer Client perlu mempunyai perisian Web Client seperti perisian Web Browser untuk membolehkannya menghantar isyarat HTTP Request dan memaparkan isyarat HTTP Response yang diterima dari Server.

12) Sesebuah komputer Server pula perlu mempunyai perisian Web Server seperti Apache, Microsoft IIS atau Apple OS X untuk membolehkannya menerima isyarat HTTP Request, memproses permohonan dan memulangkan isyarat HTTP Response ke komputer Client.

History of Web Browsers

13) Terdapat berbagai perisian Web Browser yang digunakan pada hari ini. Sejarah perisian ini bermula pada tahun 1990 pada Tim Berners Lee memperkenalkan teknologi Web.

14) Lihat infografik berikut untuk mengikuti perjalanan sejarah Web Browser, http://sixrevisions.com/web-development/the-history-of-web-browsers/

History of Web Server Software

15) Web Server pertama di dunia terletak di URL http://info.cern.ch/. Jika anda melawatnya, anda berpeluang membaca kisah tentangnya termasuklah komputer pertama (komputer NEXT) yang menjadi hos perkhidmatan ini.

16) Perisian Web Server yang pertama dikenali sebagai CERN HTTPD (http://en.wikipedia.org/wiki/CERN_httpd), kemudiannya diikuti oleh NCSA HTTPD (http://en.wikipedia.org/wiki/NCSA_HTTPd). Pembangunan perisian NCSA HTTPD diteruskan oleh projek Apache (http://en.wikipedia.org/wiki/Apache_HTTP_Server). Projek Apache terus berkembang sehingga sekarang. Pada tahun 2009, ia telah mencatat rekod melepasi jumlah penggunaan oleh 100 juta

---

Monday, June 2, 2014

Cara Mudah Belajar JavaScript

---

Cara Mudah Belajar JavaScript

LANGKAH2

1) Layari http://www.compileonline.com/try_javascript_online.php

2) Perhatikan Panel Tetingkap Kod dan Output.

3) Laksanakan arahan JavaScript.

4) Perhatikan kod HTML dan JavaScript.

5) Cuba dapatkan input nama dan paparkan nilainya di dalam Web Browser.

LANGKAH2

1) Layari http://www.compileonline.com/try_javascript_online.php

2) Perhatikan Panel Tetingkap Kod dan Output.

Terdapat dua tetingkap di dalam tetingkap utama; di sebelah kiri tetingkap mengandungi kod HTML dan JavaScript manakala di sebelah kanan tetingkap mengandungi kod output.

3) Laksanakan arahan JavaScript.

Klik butang Execute Script.

Anda akan melihat output berikut:

4) Perhatikan kod HTML dan JavaScript.

Kod JavaScript diselitkan ke dalam dokumen HTML melalui penggunaan tag <script>.

Tag <script …> pada baris no.4 memulakan arahan JavaScript dan tag </script> menutupnya.

Tag no. 5 dan no. 13 pula digunakan untuk memberitahu Web Browser jenis lama yang tidak faham bahasa JavaScript agar mengabaikan baris no.6 hingga no.12.

Hanya Web Browser jenis baru seperti Chrome, Firefox, Safari dan IE yang akan memproses baris ini (no.6 hingga 12).

5) Cuba dapatkan input nama dan paparkan nilainya di dalam Web Browser.

Sebagai satu latihan mudah, kita akan ubahsuai kod di atas supaya ia bersifat dinamik iaitu memaparkan nama pengguna dokumen web ini.

5.1) Gantikan kod pada baris no. 10 di atas dengan kod berikut:

var user = prompt("Enter your name"," ");

5.2) Tekan butang “Execute Script”.

5.3) Hasilnya:

5.4) Taipkan nama anda di dalam kotak teks yang tersedia.

5.5) Hasilnya,

Nama yang dipaparkan akan mengikut input yang diberikan dalam langkah 5.4.

6) Kesimpulan

Dengan menggunakan JavaScript, dokumen web di atas akan berinteraksi dengan pengguna, mengambil input nama pengguna dan memaparkannya di skrin. Dengan ciri-ciri yang terhasil ini, dokumen web ini diistilahkan sebagai dinamik.

---

Tuesday, May 27, 2014

Cara Mudah Buat Calculator Apps dengan jQuery Mobile

---

Cara Mudah Buat Calculator Apps dengan jQuery Mobile

LANGKAH2

1) Layari URL http://www.compileonline.com/try_jquerymobile_online.php

2) Kod untuk menghasilkan Apps ini diambil dari GitHub

3) Bina User Interface

4) Masukkan kod skrip memproses

5) Jalankan Apps

LANGKAH2

1) Layari URL http://www.compileonline.com/try_jquerymobile_online.php

2) Kod untuk menghasilkan Apps ini diambil dari https://github.com/j-shepard/calculator/tree/master/src

3) Bina User Interface

Salin semua kod dari https://github.com/j-shepard/calculator/blob/master/src/calculator.html dan paste ke dalam CompileOnline Editor.

4) Masukkan kod skrip memproses

Salin semua kod dari https://github.com/j-shepard/calculator/blob/master/src/calculator.js .

Gantikan baris kod “<script src="calculator.js"></script>” dengan kod yang anda salin seperti berikut:

Kod pernuh akan jadi seperti berikut:

<!DOCTYPE html>

<head>

<title>Calculator</title>

var displayField;

$(document).ready(function() {

displayField = $('#display')

$("button").bind('tap', function() {

buttonPressed()

})

function buttonPressed() {

var buttonText = event.target.innerText

if (isCompute(buttonText)) {

compute()

} else if (isClear(buttonText)) {

clear()

} else if (isBackSpace(buttonText)) {

backSpace()

} else {

display(buttonText)

}

function isClear(buttonText) {

return "C" == buttonText

}

function isBackSpace(buttonText) {

return "\u21D0" == buttonText

}

function isCompute(buttonText) {

return "=" == buttonText

}

function display(buttonText) {

var newDisplay = displayField.val() + buttonText

displayField.val(newDisplay)

}

function clear() {

displayField.val("")

}

function backSpace() {

var display = displayField.val()

if (display.length > 0) {

var newDisplay = display.substr(0, display.length - 1)

displayField.val(newDisplay)

}

function compute() {

try {

var newDisplay = eval(displayField.val())

displayField.val(newDisplay)

} catch (error) {

displayField.val("Error")

}

</script></script>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</fieldset>

</div>

</body>

</html>

5) Jalankan Apps.

---

Cara Mudah Buat eBook Apps

---

Cara Mudah Buat eBook Apps

PENGENALAN

Panduan ini menunjukkan anda bagaimana membuat eBook “Jom Makan” mengandungi 1 halaman hadapan dan 3 halaman kandungan.

LANGKAH2

1) Layari URL CompileOnline

2) Perhatikan struktur dokumen jQuery Mobile (jQM).

3) Bina 3 halaman kandungan.

4) Masukkan gambar.

LANGKAH2

1) Layari URL CompileOnline

http://www.compileonline.com/try_jquerymobile_online.php

2) Perhatikan struktur dokumen jQuery Mobile (jQM).

2.1) Pernyataan dokumen HTML5.

2.2) Pernyataan pautan ke jQuery Mobile Reference Code Files.

2.3) Pernyataan untuk membina halaman (pertama dan kedua).

2.4) Jika anda tekan butang “Result Preview” anda akan mendapat hasil seperti berikut:

2.5) Kita boleh ubahsuai contoh di atas untuk membuat satu eBook ringkas mengandungi 1 halaman hadapan yang dihubungkan dengan 3 halaman kandungan.

3) Bina 3 halaman kandungan.

3.1) Pada baris 27, tukar id dari “second” kepada satay.

3.2) Highlight baris 27 hingga 39. Copy baris-baris ini.

3.3) Pergi ke baris 40 dan tekan ENTER dua kali untuk beri ruang kosong.

3.4) Pada baris 41, Paste kod yang telah di Copy tadi.

3.5) Gantikan id pada baris 41 dari “satay” kepada “sambal”.

3.6) Ulang langkah Copy-Paste untuk membuat Page “sotong”.

3.7) Tukar id page hadapan dari “page” kepada “hadapan”.

3.8) Copy-Paste baris kepada 2 baris baru di bawahnya.

3.9) Ubahsuai kod pada baris 18 – 21 seperti berikut:

3.10) Klik “Result Preview” untuk melihat hasilnya.

4) Masukkan gambar.

4.1) Untuk memasukkan gambar anda perlu mendapatkan link untuk gambar yang dikehendaki.

4.2) Di bawah ini terdapat contoh gambar beserta link masing2.

http://goo.gl/bsHVUy

http://goo.gl/WxhWHz

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNlOvfNMtq64_jOp-NGiXiQAMA7gk2lfaTPFmRG3TXSu6cjKJqps-xGcoBCS7v4nWoNLbGOQMBWAwvfPJUhbtIQngYDWCDVpHWb011g_4D005onEBRnt1irrw-1ZwjTKJcv0w55Zsl3Ek/s1600/sannakji-live-octopus-korea-xl.jpg

http://goo.gl/kFlxMO

4.3) Dari link di atas, kita boleh tulis kod untuk paparkan gambar seperti berikut:

4.4) Masukkan baris-baris di atas ke dalam page masing-masing seperti yang ditunjukkan di bawah:

4.5) Hasilnya:

4.6) Kod penuh adalah seperti berikut:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Page Title1</h1>

</div>

<p>Page content goes here.</p>

<a href="#satay">Satay</a>

<a href="#sambal">Sambal</a>

<a href="#sotong">Sotong</a>

</div>

<h4>Page Footer1</h4>

</div>

</div>

<h1>Page Title2</h1>

</div>

<p>Page content goes here.</p>

</div>

<h4>Page Footer2</h4>

</div>

</div>

<h1>Page Title2</h1>

</div>

<p>Page content goes here.</p>

</div>

<h4>Page Footer2</h4>

</div>

</div>

<h1>Page Title2</h1>

</div>

<p>Page content goes here.</p>

</div>

<h4>Page Footer2</h4>

</div>

</div>

</body>

</html>

4.7) Dengan kod sampel ini, anda boleh lakukan dua perkara:

a) Pindahkan kod ini ke website tetap anda, ia akan dipanggil mobile web apps.

b) Muat turun kod dan compile untuk Android (apk) atau iOS (ipa), ia akan dipanggil mobile apps.

---

Tutorial Pantas

Labels

Wednesday, June 25, 2014

Pengenalan Kepada Sejarah Web Service (Servis Web)

Internet and Worldwide Web

Worldwide Web (Web)

HTTP Request/Response Basics

Client-Server Architecture

History of Web Browsers

History of Web Server Software

Monday, June 2, 2014

Cara Mudah Belajar JavaScript

LANGKAH2

1) Layari http://www.compileonline.com/try_javascript_online.php

2) Perhatikan Panel Tetingkap Kod dan Output.

3) Laksanakan arahan JavaScript.

4) Perhatikan kod HTML dan JavaScript.

5) Cuba dapatkan input nama dan paparkan nilainya di dalam Web Browser.

Tuesday, May 27, 2014

Cara Mudah Buat Calculator Apps dengan jQuery Mobile

LANGKAH2

1) Layari URL http://www.compileonline.com/try_jquerymobile_online.php

2) Kod untuk menghasilkan Apps ini diambil dari https://github.com/j-shepard/calculator/tree/master/src

3) Bina User Interface

4) Masukkan kod skrip memproses

5) Jalankan Apps.

Cara Mudah Buat eBook Apps

PENGENALAN

LANGKAH2

1) Layari URL CompileOnline

2) Perhatikan struktur dokumen jQuery Mobile (jQM).

3) Bina 3 halaman kandungan.

4) Masukkan gambar.

Blog Archive

Total Pageviews

Followers

...