Tag: squirrelmail

เทคนิคในการบันทึกความเร็วของ Web Browser มาเก็บไว้ที่ Web Server
ต่อจาก

วิธีพัฒนา Squirrelmail Plugin – กรณี pagespeed

เทคนิคการส่งค่าจาก PHP ให้ JavaScript

เมื่อรู้ระยะเวลาที่ Web Browser ประมวลผลแล้ว ต่อไปก็ต้องการเก็บข้อมูลต่างๆมาเก็บที่ Web Server เพื่อบันทึกเก็บไว้วิเคราะห์ต่อไป สามารถทำได้โดยการใช้ JavaScript ส่งค่่าผ่าน HTTP GET Method มายัง PHP

เริ่มจากสร้าง PHP ให้ชื่อว่า getdata.php สำหรับรับค่าจาก JavaScript ที่ทำงานจาก Web Browser ของผู้ใช้ ดังนี้
```
<?php
  $data=$_GET['data'];
  $h = fopen('/var/log/userview.log', 'a');
  fwrite($h, $data . "\n" );
  fclose($h)
?>
```
สมมุติ เรียกใช้ผ่าน URL ต่อไปนี้
```
http://myserver.com/getdata.php?data=xxyyzz
```
ก็จะเอาค่า xxyyzz เขียนใส่ไฟล์ /var/log/userview.log และต่อท้ายไปเรื่อยๆ

ในฝั่งของ JavaScript ให้เขียนโค๊ดดังนี้
```
<SCRIPT LANGUAGE="JavaScript">
var xmlhttp;
var url;
var data;

data=servertime + ":" + second + ":" + total ;

url="http://myserver.com/getdata.php?data=" + data;

 if (window.XMLHttpRequest)
    xmlhttp = new XMLHttpRequest();
 else
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

xmlhttp.open(\'GET\',url, true);
xmlhttp.send();

</script>
```
เท่านี้ก็จะสามารถเก็บค่าต่างๆจาก Web Browser มาไว้ที่ Web Server ได้
January 16, 2013
เทคนิคการส่งค่าจาก PHP ให้ JavaScript
ต่อจากตอนที่แล้ว “วิธีพัฒนา Squirrelmail Plugin – กรณี pagespeed”

จากการพัฒนา pagespeed plugin สำหรับ Squirrelmail เพื่อแสดงให้ผู้ใช้เห็นถึง “ความเร็ว” ในการประมวลผลจากฝั่ง server ได้แล้ว

ต่อไปเราต้องการเอาดูว่า “ความเร็ว” ในการเดินทางและแสดงผลบน Web Browser ของผู้ใช้ เป็นเท่าไหร่
ทำได้โดยการใช้งาน JavaScript จับเวลาการทำงาน

โดยเขียนโค๊ดต่อไปนี้ ใน ฟังก์ชั่น pagespeed_top
```
echo ' <SCRIPT LANGUAGE="JavaScript">
 beforeload = (new Date()).getTime();
 </script>
 ';
```
และส่วนนี้ไปในฟังก์ชั่น pagespeed_bottom
```
echo ' <SCRIPT LANGUAGE="JavaScript">
 afterload = (new Date()).getTime();
 seconds = (afterload-beforeload)/1000;
 document.write("Browser Speed: " + seconds + " s");
</script>
';
```
เท่านี้ก็จะทราบระยะเวลาในการเดินทางและแสดงผลเสร็จบน Web Browser แล้วแสดงผลต่อผู้ใช้

ต่อไปหากต้องการ รวมเวลาทั้งสิ้นที่ผู้ใช้ต้องรอ ตั้งแต่การทำงานที่ Squirrelmail จนกระทั้ง แสดงผลเสร็จ
ก็ต้องเอาค่าตัวแปรจาก PHP ที่ชื่อว่า $showtime มาบวกกับตัวแปรของ JavaScript ที่ชื่อว่า seconds

จะส่งค่าจาก PHP ให้ JavaScript อย่างไร ???

ดูเหมือนยาก แต่จริงๆแล้ว ก็เพียงแค่ให้ PHP แสดงผลเป็นตัวแปรของ JavaScript เท่านั้น ก็สามารถทำให้ JavaScript เอาไปใช้งานต่อได้แล้ว ดังนี้
```
echo ' <SCRIPT LANGUAGE="JavaScript">
   servertime = ' . $showtime . ';</SCRIPT>'  ;
```
แล้วปรับแต่งโค๊ดใน pagespeed_bottom ข้างต้นเป็น
```
echo ' <SCRIPT LANGUAGE="JavaScript">
   servertime = ' . $showtime . ';</SCRIPT>'  ;

echo ' <SCRIPT LANGUAGE="JavaScript"> 
afterload = (new Date()).getTime(); 
seconds = (afterload-beforeload)/1000; 
document.write("Browser Speed: " + seconds + " s"); 

total=servertime + seconds;

document.write("Total:" + total + " s");
</script> ';
```
เป็นตัวอย่างเทคนิคในการส่งค่าระหว่างการคำนวนของ PHP และ JavaScript เบื้องต้น

ติดตามต่อไปในเรื่องของ “เทคนิคในการบันทึกความเร็วของ Web Browser มาเก็บไว้ที่ Web Server”
January 16, 2013
วิธีพัฒนา Squirrelmail Plugin – กรณี pagespeed
Squirrelmail เป็น IMAP Client Webmail แบบมาตราฐาน ทำงานบน PHP ซึ่งติดตั้งง่าย ใช้งานได้รวดเร็ว ไม่ต้องกังวลเรื่องความเข้ากันได้กับ Web Browser ของผู้ใช้หลากหลาย เพราะไม่ค่อยมีการใช้งานพวก JavaScript

มีความง่ายในการต่อขยายความสามารถ โดยผู้พัฒนาเปิดให้เขียน Plugin ได้ง่าย โดยไม่ต้องแก้ไข Code ของระบบโดยตรง ด้วยวิธีการเสียบ Code ผ่านจุดที่กำหนด ที่เรียกว่า “Hook” ทำให้ Plugin ที่เขียนขึ้น สามารถใช้งานต่อไปได้ แม้มีการปรับรุ่นของ Squirrelmail ต่อไป

ตัวอย่างการเขียน Squirrelmail Plugin เพื่อแสดงความเร็วในการประมวลผลในแต่ละส่วนของ Squirrelmail
ใช้ชื่อว่า pagespeed (ทำงานบน Squirrelmail 1.4.x)
1. สร้าง folder ชื่อ pagespeed
2. สร้างไฟล์ index.php เอาไว้เฉยๆ
3. สร้างไฟล์ setup.php , ต่อไปนี้ จะกล่าวถึงการเขียนโค๊ตในไฟล์นี้
4. สร้าง function แรกที่จะเสียบเข้ากับ Hook ต่างๆ ชื่อว่า squirrelmail_plugin_init_pagespeed
```
$starttime=0;

function squirrelmail_plugin_init_pagespeed() {
    global $squirrelmail_plugin_hooks;
   // Code Go Here
}
```
  ชื่อฟังกชั่นต้องเป็น squirrelmail_plug_init_xxx() โดยที่ xxx ต้องตรงกับชื่อ folder ในที่นี้คือ pagespeed
5. ต่อไป บอกให้ Squirrelmail รู้ว่า เราจะเสียบฟังก์ชั่น “pagespeed_top” และ “pagespeed_bottom” ที่่จะเขียนต่อไป ไว้ที่ Hook ใดบ้าง ในที่นี้ จะเสียบไว้ที่หน้า Login บริเวณ Hook ชื่อว่า login_top และ login_bottom, จะเขียนโค๊ดดังนี้ใน function squirrelmail_plugin_init_pagespeed ดังนี้
```
$squirrelmail_plugin_hooks['login_top']['pagespeed'] = 'pagespeed_top';
$squirrelmail_plugin_hooks['login_bottom']['pagespeed'] = 'pagespeed_bottom';
```
  รูปแบบการเขียนคือ
  $squirrelmail_plugin_hooks[‘ตำแหน่งที่จะเสียบ’][‘ชื่อ plugin’] = ‘ชื่อฟังก์ชั่น’;
6. ต่อไปมาเขียนรายละเอียดของฟังก์ขั่น pagespeed_top และ pagespeed_bottompagespeed_top ทำหน้าที่ดูเวลาเริ่มต้น มีรายละเอียดดังนี้
```
function pagespeed_top() {
   global $starttime;

   $gentime = microtime();
   $gentime = explode(' ',$gentime);
   $gentime = $gentime[1] + $gentime[0];

   $starttime=$gentime;
}
```
  ส่วน pagespeed_bottom ทำหน้าที่ ดูเวลาสิ้นสุด แล้วคำนวนเวลาที่ใช้ไป
  จากนั้น ก็แสดงผลการคำนวนได้
```
function pagespeed_bottom() {
   global $starttime;

   $gentime = microtime();
   $gentime = explode(' ',$gentime);
   $gentime = $gentime[1] + $gentime[0];
   $pg_end = $gentime;
   $totaltime = ($pg_end - $starttime);
   $showtime = number_format($totaltime, 4, '.' , '');

   echo 'Speed: ' . $showtime . ' s' ;
}
```
เท่านี้ก็ได้ plugin แล้ว ต่อไปก็เอาไปติดตั้งได้

หากต้องการวัดความเร็วในหน้าอื่นๆ เช่น ในส่วนของ right_main (ส่วนแสดงรายการ email ที่อยู่ใน mailbox) ก็สามารถเพิ่มเข้าไปในฟังก์ชั่น squirrelmail_plugin_init_pagespeed ดังนี้
```
$squirrelmail_plugin_hooks['right_main_after_header']['pagespeed'] = 'pagespeed_top';
$squirrelmail_plugin_hooks['right_main_bottom']['pagespeed'] = 'pagespeed_bottom';
```
รายละเอียดเกี่ยวกับตำแหน่งของ Hook ดูได้ที่นี่ http://squirrelmail.org/docs/devel/devel-4.html#ss4.4
January 8, 2013