Daily Gadgets, Computer, and Electronics News » Programming http://www.funponsel.com/blog Daily Gadgets, Computer, and Electronics News Sun, 22 Nov 2009 17:39:30 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Hello World http://www.funponsel.com/blog/programming/hello-world-2.html http://www.funponsel.com/blog/programming/hello-world-2.html#comments Sun, 28 Aug 2005 18:34:51 +0000 cosa http://www.funponsel.com/blog/archives/2005/08/29/hello-world-2/ Hello World. One of the most popular sentence in the computer programming world. People who learn a new programming language usually write “Hello World” program first, which output a “Hello World” message on the screen. Wolfram Rösler, with help from many people around the world, managed to compile over 221 Hello World programs in many programming language, plus some human languages too. He started collecting the Hello World program on 03-Oct-1994, put on the Internet on 30-Dec-1999, and exceeded 200 entries on 14-Jul-2005. It is administered as a bunch of text files which are compiled into this single HTML file by a bash script executed under the Cygwin environment, run on Windows.

A sample of Hello World program using HTML language below:

<HTML>
<!-- Hello World in HTML -->
<HEAD>
<TITLE>Hello World!</TITLE>
</HEAD>
<BODY>
Hello World!
</BODY>
</HTML>

Hey, even Wordpress automatically post Hello World entry upon its installation.

Hello World on Wordpress

[ Visit The Hello World Collection ]

]]> http://www.funponsel.com/blog/programming/hello-world-2.html/feed 1 PHP v5.1.0 Beta 3 http://www.funponsel.com/blog/news/php-v510-beta-3.html http://www.funponsel.com/blog/news/php-v510-beta-3.html#comments Wed, 20 Jul 2005 19:35:18 +0000 cosa http://www.funponsel.com/blog/archives/2005/07/21/php-v510-beta-3/ New beta version for PHP v5.1 is released today.


Latest Changes:

- PDO (PHP Data Objects) – A new native database abstraction layer providing performance, ease-of-use, and flexibility
- Significantly improved language performance mainly due to the new Zend Engine II execution architecture
- The PCRE extension has been updated to PCRE 5.0
- Many more improvements including lots of new functionality & many bug fixes, especially in regards to SOAP, streams and SPL

Download : PHP v5.1.0 (Beta 3)

Key improvements of PHP 5.1 include:

- PDO (PHP Data Objects) – A new native database abstraction layer providing performance, ease-of-use, and flexibility.
- Significantly improved language performance mainly due to the new Zend Engine II execution architecture.
- The PCRE extension has been updated to PCRE 5.0.
- Many more improvements including lots of new functionality & many bug fixes, especially in regards to SOAP, streams and SPL.

Everyone is encouraged to start playing with this beta, although it is not yet recommended for mission-critical production use.

[ Via Go4I.net ] [ Direct Download ]

]]> http://www.funponsel.com/blog/news/php-v510-beta-3.html/feed 0 Ajax Mistakes http://www.funponsel.com/blog/news/ajax-mistakes.html http://www.funponsel.com/blog/news/ajax-mistakes.html#comments Thu, 26 May 2005 02:06:42 +0000 cosa http://www.funponsel.com/blog/archives/2005/05/26/ajax-mistakes/ From Alex Bosworth’s blog via digg:

Ajax is an awesome technology that is driving a new generation of web apps, from maps.google.com to colr.org to backpackit.com. But Ajax is also a dangerous technology for web developers, its power introduces a huge amount of UI problems as well as server side state problems and server load problems.


Will you continue using Ajax? If you ask me, *I will * Some of the points that Alex mention are probably correct, but some are not. For example:

1. Not giving immediate visual cues for clicking widgets.

and

4. Blinking and changing parts of the page unexpectedly

This can be easily done using CSS. Simply prepare a message box using DIV attribute and hide it (display:none). Whenever Ajax is in progress, make it visible (display:block). This way, visitor know if there’s a progress going on, not unexpectedly anymore. My Ajax Tutorial also cover this technique.

For me, Ajax is wonderful. It’s not 100% secure right now, but again, it’s a wonderful programming technique. I’ll stick and continue using Ajax for now :) )

]]> http://www.funponsel.com/blog/news/ajax-mistakes.html/feed 2 Dynamic Text Replacement http://www.funponsel.com/blog/web-and-graphic-design/dynamic-text-replacement.html http://www.funponsel.com/blog/web-and-graphic-design/dynamic-text-replacement.html#comments Wed, 18 May 2005 00:13:56 +0000 cosa http://www.funponsel.com/blog/archives/2005/05/18/dynamic-text-replacement/ From digg.com:

Excellent article on how to use JavaScript and PHP, to generate images from text using any font you like. All without changing the structure of your HTML or CSS.

Read the article here.

]]> http://www.funponsel.com/blog/web-and-graphic-design/dynamic-text-replacement.html/feed 0 Ajax Tutorial – Part II http://www.funponsel.com/blog/programming/ajax-tutorial-part-ii.html http://www.funponsel.com/blog/programming/ajax-tutorial-part-ii.html#comments Fri, 13 May 2005 02:21:29 +0000 cosa http://www.funponsel.com/blog/archives/2005/05/13/ajax-tutorial-part-ii/ This is it. The second part of my Ajax tutorial (original version, written in Indonesian language, is available here). This part mostly covered the scripting stuff. The original article was first published in eKelas @ May 5th, 2005.


The Easy Ajax Implementation

For our study case, we’re going to make a simple voting/rating booth application. We’re going to make 2 files, one for the front-end (vote.php, handle the user interface) and one for the back-end (sendVote.php, handle the data saving and retrieval).

First, here’s the code for vote.php (we’ll explain this later)

[php]< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Rating:


Input Rating:


[/php]

And the second file, sendVote.php

[php]< ?php
echo $_GET['value'];
?>[/php]

Before we continue, let’s try it first by calling vote.php from your web browser. Notice that after you select the rating and hit Vote button, the rating you choose will be displayed on the texbox below.

Live Demo: http://www.funponsel.com/dev/ajax_vote/vote.php

In this first sample, the process is really simple. We haven’t process the rating value yet (no database involved), instead, we just send it back as an output for the back-end process. When you hit the Vote button, the JavaScript function, updateVote() will be called. In this stage, voteId and voteValue (rating value) are taken from the form and sent to sendVote.php as a parameter through XMLHttpRequest object.

The purpose of handleHttpResponse() function is to handle any change on the request status. When the status equal to 4 (readyState == 4), then the request process is over. Or it means that the back-end process already return output. After that, return output is taken from ResponseText attribute and then displayed on the textbox.

As already mention, there is no interaction with the database yet. Hey, we haven’t even create the database :) ) sendVote.php will simply take the parameter and return the value right away (echo $_GET['value'];.

What about getHTTPObject() function? Don’t bother with it :) The point is almost the same as what we’ve learned before on the first part, but with a little bit more twist :) ) So let’s just focus on the XMLHttpRequest process :P

Notice that in this first example we only use XHTML, a simple DOM, and XMLHttpRequest. Just like what I already said before on the first part. No need to worry about learning Ajax on the hard way (with all the complexity of XMLDOM and CSS), as the easy way already exists :) )

On the next page, we will modify our code above and start communication with the database.

]]> http://www.funponsel.com/blog/programming/ajax-tutorial-part-ii.html/feed 6 Ajax Tutorial – Part I http://www.funponsel.com/blog/programming/ajax-tutorial-part-i.html http://www.funponsel.com/blog/programming/ajax-tutorial-part-i.html#comments Sat, 07 May 2005 19:53:51 +0000 cosa http://www.funponsel.com/blog/archives/2005/05/08/ajax-tutorial-part-i/ This is the English translation for my Ajax tutorial. Original article, written in Indonesian language, can be found here.

Introduction

Ajax is the current rising star in the web development field. Several popular company already started using Ajax, including: Google (Gmail, GMaps, GSuggest, GGroups), Amazon (A9.com), Flickr, and Orkut.

Ajax is not a new technology. It’s a new developing approach, based on the following existing technologies:

  • XHTML and CSS for standard presentation,
  • DOM (Document Object Model) for dynamic and interactive presentation,
  • XML and XSLT for data exchange and manipulation, and
  • XMLHttpRequest for asynchronius data retrieval
In the implementation, not all of them must be used at once. The minimal requirement are XHTML, DOM, and XMLHttpRequest. CSS is used to formating and styling the site presentation, while XML (and XSLT) is used to formatting the data being exchange.

The foundation of Ajax is XMLHttpRequest object. It was first implemented by Microsoft on Internet Explorer 5 as an ActiveX object. Later, Mozilla engineers developed a compatible native version for Mozilla 1.0 (and Netscape 7), followed by Apple on their Safari 1.2 browser.

I haven’t check it myself, but my friend said that Opera browser doesn’t support XMLHttpRequest yet. I’d be grateful if anyone can confirm this for me.

In short, the purpose of this XMLHttpRequest object is to handle data request asynchronously in the background for any web application who need to exchange and manipulate data on-the-fly without reloading the page. In traditional data processing, user submits the data through form, browser sends the data to the server, then server return the output through a new page, so browser need to load that new page in order to display the result to user.

To see what Ajax looks like, just login to your GMail account (if you don’t have one, get it free here :) ), and check your inbox. You’ll see a “Loading” message on the top right of the screen. Then the message disappear, and a list of your inbox message is displayed. All of them happen without reloading the page. Compare the process with Yahoo! Mail or HotMail. Google’s GMail used Ajax, and that’s what you get with Ajax implementation. Cool, huh? :) )

On the next page, we will discuss more about XMLHttpRequest object.

]]> http://www.funponsel.com/blog/programming/ajax-tutorial-part-i.html/feed 1 15 Things You Can Do With RSS http://www.funponsel.com/blog/article/15-things-you-can-do-with-rss.html http://www.funponsel.com/blog/article/15-things-you-can-do-with-rss.html#comments Fri, 06 May 2005 02:26:31 +0000 cosa http://www.funponsel.com/blog/archives/2005/05/06/15-things-you-can-do-with-rss/ Tim Yang wrote a nice article titled 15 Things You Can Do With RSS. Go there and read it. It’s amazing to find out what RSS can do these days :) )

]]> http://www.funponsel.com/blog/article/15-things-you-can-do-with-rss.html/feed 0 Tutorial Ajax – Part II http://www.funponsel.com/blog/programming/tutorial-ajax-part-ii.html http://www.funponsel.com/blog/programming/tutorial-ajax-part-ii.html#comments Thu, 05 May 2005 15:52:10 +0000 cosa http://www.funponsel.com/blog/archives/2005/05/05/tutorial-ajax-part-ii/ Second and final part of my Ajax tutorial. This part mostly covered the scripting stuff. This article first published in eKelas @ May 5th, 2005. And yes, I’ll translate this into English asap :D


Implementasi

Untuk percobaan, kita akan membuat sebuah aplikasi voting/rating booth sederhana. Secara umum, kita akan menyiapkan 2 buah file, yaitu sebuah file HTML (atau PHP) untuk presentasi ke layar dan sebuah file script PHP untuk melakukan proses backend (retrieve & save data).

File pertama, vote.htm

[html]< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Nilai:


Nilai yang Anda masukkan:


[/html]

File kedua, sendVote.php

[php]< ?php

echo $_GET['value'];

?>[/php]

Sebelum dibahas, coba jalankan dulu dng cara memanggil file vote.htm. Perhatkan, pada saat Anda memilih nilai rating dan menekan tombol Vote, beberapa saat kemudian nilai tersebut akan muncul pada textbox di bawahnya.

Live Demo: http://www.funponsel.com/dev/ajax_vote/vote.php

Pada contoh pertama ini, proses berlangsung sangat sederhana. Pada saat tombol Vote ditekan, maka akan dilakukan pemanggilan function JS updateVote(). Dalam fungsi ini dilakukan pemanggilan thd file sendVote.php dng parameter id dan value yg diambil dari form. Proses pemanggilan dilakukan melalui obyek XMLHttpRequest.

Function handleHttpResponse bertujuan untuk menangani perubahan status request. Apabila status adalah 4, berarti proses telah selesai. Selanjutnya data akan diambil dari atribut ResponseText dan ditampilkan dlm textbox.

Script sendVote.php saat ini masih belum melakukan interaksi dng database. Prosesnya hanyalah menerima parameter value dan mengembalikannya sbg output. Itu sebabnya yg muncul pada textbox adalah nilai yg kita pilih.

Bagaimana dng function getHTTPObject()? Tidak perlu dipikir :) Intinya hampir sama dng fungsi yg ada pada bagian sebelumnya, hanya sedikit lebih detil (mbulet :) )

Perhatikan bahwa dlm contoh ini kita hanya menggunakan XHTML, DOM, dan XMLHttpRequest. Sesuai dng yg saya sebutkan sebelumnya :) DOM yg digunakan pun sangat sederhana, sekedar method getElementById saja.

Pada halaman selanjutnya, kita akan melakukan sedikit modifikasi untuk berkoneksi dng database.

]]> http://www.funponsel.com/blog/programming/tutorial-ajax-part-ii.html/feed 0 Tutorial Ajax http://www.funponsel.com/blog/programming/tutorial-ajax.html http://www.funponsel.com/blog/programming/tutorial-ajax.html#comments Thu, 05 May 2005 15:41:47 +0000 cosa http://www.funponsel.com/blog/archives/2005/05/05/tutorial-ajax/ I just wrote a tutorial for Ajax on eKelas and I post it here as a backup for my writing :) Sorry, still in Indonesian language. I’ll try to translate it to English as soon as possible.


Pendahuluan

Ajax adalah sebuah development approach yg saat ini sedang naik daun. Beberapa perusahaan yg sudah menggunakan Ajax, al: Google (GMail, GMaps, GSuggest, GGroups), Amazon (A9), Flickr, dan Orkut.

Ajax bukan sebuah teknologi baru, melainkan sebuah tehnik pengembangan aplikasi web dengan menggabungkan dan memanfaatkan beberapa teknologi yg sudah ada, yaitu:
- standard presentasi menggunakan XHTML dan CSS
- tampilan dinamis dan interaktif dengan menggunakan DOM (Document Object Model)
- pertukaran dan manipulasi data dengan menggunakan XML dan XSLT
- pengambilan data asinkron dengan menggunakan XMLHttpRequest

Pada prakteknya nanti, tidak semua teknologi di atas harus digunakan scr bersamaan. Yg wajib dipakai adalah XHTML, DOM, dan XMLHttpRequest. CSS adalah tambahan untuk lebih mempercantik tampilan dan interaksi dng user, sedangkan XML adalah untuk memformat data saja.

Dasar dari Ajax sendiri adalah obyek ActiveX XMLHttpRequest yg diimplementasikan oleh Microsoft pada IE5. Mozilla sendiri kemudian menyusul pada Mozilla 1.0 (Netscape 7) dan selanjutnya Apple pada Safari 1.2. Secara singkat, tujuan dari obyek ini adalah menangani pembuatan aplikasi yg dapat melakukan proses2 pertukaran dan manipulasi data XML scr on-the-fly tanpa perlu adanya proses reload halaman. Proses2 manipulasi data tradisional yg ada selama ini menggunakan konsep form, dmn apabila form di-submit, data dikirimkan, dan user akan dibawa ke halaman baru untuk melihat hasilnya. Dng memanfaatkan Ajax, khususnya XMLHttpRequest ini, user tidak akan dibawa ke halaman baru krn hasil dari proses submit akan langsung muncul di halaman yg sama.

Kalo bingung ngebayangin, coba login ke GMail (kalo belum punya GMail, klik link yg ada di signature-ku). Perhatikan baik2. Proses cek inbox, baca email, dsb, semuanya berlangsung tanpa ada proses loading halaman. Bahkan saat proses, akan muncul tulisan “Loading” di pojok kanan atas. Keren kan? Ya itulah salah satu contoh nyata pemanfaatan Ajax.

Bagian berikut akan membahas mengenai obyek XMLHttpRequest dan method2nya.

]]> http://www.funponsel.com/blog/programming/tutorial-ajax.html/feed 1 Tutorial Smarty – Bagian III http://www.funponsel.com/blog/programming/tutorial-smarty-bagian-iii.html http://www.funponsel.com/blog/programming/tutorial-smarty-bagian-iii.html#comments Tue, 03 May 2005 17:47:26 +0000 cosa http://www.funponsel.com/blog/archives/2005/05/04/tutorial-smarty-bagian-iii/ script utama, berisi [...]]]> Bagian ketiga dari tutorial ini diambil dari posting gw di eKelas tanggal 23 April 2005.


Sekarang kita akan mencoba mendalami Smarty lebih jauh, yaitu dng membuat aplikasi guestbook :) Konsepnya adalah sebuah guestbook sederhana dng pilihan tampilan 2 bahasa. Proyek yg dbuat ini akan terdiri dari 4 bagian, yaitu:
1. Main (guestbook.php) –> script utama, berisi parsing ke template dan proses2 database. Letakkan di direktori utama (mis: path-to-web-server\guestbook)
2. Konfigurasi –> file konfigurasi. Letakkan di subdir configs (mis: path-to-web-server\guestbook\configs)
2.a. Indonesia.conf –> berisi konfigurasi untuk mode bahasa Indonesia
2.b. Inggris.conf –> berisi konfigurasi untuk mode bahasa Inggris
3. Template (guestbook.tpl) –> file template, berisi template tampilan. Letakkan di subdir templates (mis: path-to-web-server\guestbook\templates)
4. Style sheet (style.css) –> CSS file, untuk pendukung tampilan. Letakkan di direktori utama (mis: path-to-web-server\guestbook)

Entah kenapa, Smarty memberikan pesan error saat menggunakan metode

untuk memasukkan kode CSS. Sedangkan pada penggunaan inline style (tag style) dan embedded style (link rel) tidak ada masalah.

Berikut source code-nya:
1. guestbook.php

[php]< ?php
require 'libs/Smarty.class.php';
$smarty = new Smarty;
$smarty->assign(”content”,”Smarty says, “Hello World”");
$smarty->display(’guestbook.tpl’);
?>[/php]

2. a. Indonesia.conf

[code]# Konfigurasi untuk bhs Indonesia
pageTitle = "Demo Pembuatan Buku Tamu menggunakan Smarty"
textTitle = "Buku Tamu dengan Smarty"
textDesc = "Demo ini menunjukkan penggunaan pustaka Smarty. Dengan Smarty. kita dapat memisahkan bagian logika dengan bagian presentasi dari aplikasi kita. Selain itu kita juga dapat memisahkan konfigurasi dari aplikasi tersebut. Hasilnya adalah manajemen proyek yg lebih baik efektif dan efisien."
formTextName = "Nama"
formTextEmail = "Email"
formTextComment = "Komentar"
formTextSubmit = "Isi Buku Tamu"
formTextDiv = ":"[/code]

2. b. Inggris.conf

[code]# Konfigurasi untuk bhs Inggris
pageTitle = "Guestbook Demo Using Smarty"
textTitle = "Guestbook with Smarty"
textDesc = "This demo shows how Smarty library works. With Smarty, you can easily split your application coding/logic, design/layout, and configuration, thus make project management much more easier."
formTextName = "Name"
formTextEmail = "Email"
formTextComment = "Comment"
formTextSubmit = "Submit"
formTextDiv = ":"[/code]

3. guestbook.tpl

[html]{config_load file=”inggris.conf”}


{#textTitle#}
{#textDesc#}
{#formTextName#}
{#formTextDiv#}

{#formTextEmail#}
{#formTextDiv#}

{#formTextComment#}
{#formTextDiv#}

{$content}


[/html]

4. style.css

[css]body {
background-color: #f4f4f4;
color: #000;
margin: 0px;
}

#main {
width:90%;
background-color:#ffffff;
float:left;
border-right:2px dashed #333333;
border-bottom:2px dashed #333333;
padding-bottom:40px;
}

#main #textTitle {
text-align: center;
margin-top:10px;
margin-bottom:10px;
font-weight:bolder;
font-size:1.5em;
}

#main #textDesc {
font-size:0.8em;
padding:5px;
margin-left:10%;
margin-right:10%;
margin-bottom:20px;
text-align:center;
border:2px solid #cccccc;
background-color:#e9e9e9;
-moz-border-radius:7px;
}

#main #formPost {
float:left;
margin-left:5%;
margin-right:5%;
padding:10px;
border:1px solid #999999;
width:250px;
background-color:#f9f9f9;
}

#main #formPost #tableRow {
border-bottom:1px solid #cccccc;
padding-bottom:5px;
margin-bottom:5px;
}

#main #formPost #tableCol1 {
float:left;
margin-left:10px;
width:60px;
}

#main #formPost #tableCol2 {
float:left;
margin-left:10px;
width:10px;
text-align:center;
}

#main #formPost #tableCol3 {
float:left;
margin-left:10px;
width:80px;
}

input,textarea {
background-color:#f3f3cc;
border:1px solid #333333;
}

#main #content {
float: left;
font-size: 0.9em;
}[/css]

Sekarang coba kita jalankan (http://localhost/guestbook/guestbook.php). Contoh hasilnya dapat dilihat di screenshot di bawah. Cobalah untuk mengganti “inggris.conf” dengan “indonesia.conf” pada baris pertama dari index.tpl dan lihat hasilnya. Secara otomatis buku tamu Anda akan berganti bahasa.

Smart Demo Screenshot

Pada bagian ini kita hanya akan membahas masalah penggunaan Smarty pada tampilan utama saja. Pada bagian selanjutnya, bagian terakhir, akan dibahas sisanya, yaitu ttg pemilihan bahasa (konfigurasi) yg digunakan, proses2 database, serta output dari database.

]]> http://www.funponsel.com/blog/programming/tutorial-smarty-bagian-iii.html/feed 5