8.8.09

มาติด Hit Counter ให้เว็บกันเหอะ

Hit Counter

       เพื่อนๆหลายคนที่ทำเว็บไซต์ด้วยตนเอง อาจจะมีหลายๆคนพยายามมองหาโค๊ด PHP counter เพื่อนำจำนวนคนที่มาเยี่ยมชมหน้าเว็บไซต์ของเรา ซึ่งก็มีโค๊ด PHP Hit Counter หลายตัวที่เก็บสถิติจำนวนคนที่เข้ามาชมหน้าเว็บเราลงบน text file บางโค๊ดก็เก็บลงดาต้าเบส ก็แตกต่างกันออกไปแล้วแต่ feature ที่ต้องการ

       แต่สำหรับวันนี้ ผมอยากจะแนะนำตัวเก็บสถิติที่เรียกว่า Hit Counter แบบฟรีๆ  ที่มีบริการอยู่ตามเว็บไซต์ที่ให้บริการฟรีทั่วไป ขอย้ำว่าฟรีจริงๆครับ ไม่ได้เสียเงินเสียทองอะไรเลย แถมไม่ต้องมานั่งคอยเช็คด้วยว่าจะเก็บลงดาต้าเบสได้ไหม ส่วนเรื่องความถูกต้อง ก็ใช้ได้เลยครับ ประมาณ 99.999% (หายไปไหนอีก 0.001% หนอ…อิอิ ล้อเล่นหน่ะครับ)

Hit Counter map

       วิธีการสมัครของเข้าใช้บริการ ก็แสนจะง่ายได้ เพียงแค่กรอกสมัครเป็นสมาชิก แล้วเรา code java script ที่เราได้จากการสมัครสมาชิกในแต่ละเว็บไซต์ที่เรานำไปอ้างอิง แล้วก็นำลงมาแปะในหน้าที่เราต้องการให้นับ โดยปกติผมก็จะแปะไว้หน้าแรกเลยครับ โดยให้วางโด๊ด tag html เพียงเท่านี้ จำนวนการเช้าชมเว็บของเรา ก็จะเรานำไปเก็บเป็นสถิติ โดยสถิติที่แสดงให้ดู จะโชว์เป็นรายชั่วโมง และรายวัน  และรวบรวมไว้ให้ดูเป็นกราฟย้อนหลังไปสามสิบวัน ในบางเว็บไซต์ที่ให้บริการ สามารถแสดงได้ด้วยว่า ผู้เข้าชมว่าจากประเทศอะไรบ้าง และในขณะนั้นมีจำนวนผู้เข้าชม online เป็นจำนวนเท่าไหร่

        ส่วนลูกเล่นการแสดงผล ที่หน้าต่างเว็บเรานั้น ก็จะแสดงผลเป็น flash animation ช่วยเพิ่มสีสันของเว็บเราเข้าไปอีก นอกจากนี้เราสามารถเลือกได้ว่า จะให้บุคคลอื่นทั่วไป สามารถมองเห็นสถิติย้อนหลังไหม เราสามารถตั้งค่าได้ นับว่าเป็นประโยชน์อย่างมาก สำหรับเหล่าบรรดาเว็บมาสเตอร์ทั้งหลาย เพราะหากมีใครถามว่าเว็บไซต์มีจำนวนคนเข้าชมเท่าไหร่ต่อวัน เราสามารถตอบคำถามได้ และยังช่วยให้เราวิเคราะห์จำนวนผู้เข้าชมเว็บไซต์ได้อีกตั้งหาก

ผมเห็นหลายๆเว็บนะครับที่ติดของ Hitstats.com นะครับ แต่เพื่อนๆหลายคนลืมเอา check box ออก ซึ่งถ้าไม่เอาออกจะทำให้เพื่อนๆคนอื่นเข้าดูสถิติไม่ได้ จะดูได้เฉพาะเจ้าของเว็บคนนั้นเท่านั้น บางทีเราล๊อกอินทิ้งไว้ ก็เลยเข้าได้ปกติ อาจจะทำให้เพื่อนๆเข้าใจผิดคิดว่าตัว stat นี้ได้โชว์แล้ว แท้จริงมันยังไม่โชว์ครับ ให้เอาออกตามรูปข้างล่างนี่ด้วยครับ จึงจะทำให้ stat ของเพื่อนๆโชว์สู่สายตาสาธารณชนครับ

stat check box        

stat

ก็เป็นทิปเล็กๆน้อยๆที่ผมเอามาเล่าสู่กันฟังครับ หากเพื่อนๆสนใจก็ลองหามาติดเว็บไซต์ดูครับ แต่ละเจ้าที่ให้บริการ ก็มีลูกเล่นที่ต่างๆกันไปในการนำเสนอ สนใจเจ้าไหนก็เลือกกันเลยครับ ฟรีทั้งนั้นครับ ไม่คิดเงิน ใครว่าของฟรีไม่มีในโลก ไม่จริงเลยใช่ไหมครับ วันนี้ขอลาไปก่อนครับ สวัสดีครับ

อ่านเพิ่มเติม...

3.8.09

“Web Hosting” คืออะไร




สวัสดีครับเพื่อนๆ ช่วงนี้ข่าวเรื่องไข้หวัดใหญ่ สายพันธุ์ใหม่2009 ก็ออกข่าวให้เห็นอยู่ทุกวัน ก็เลยทำให้เพื่อนๆหลายคนไม่อยากออกจากบ้าน จริงๆผมก็ไม่ค่อยจะเห็นด้วยเท่าไหร่ที่เพื่อนจะเอาแต่เก็บตัวอยู่ในบ้าน เพราะนอกจากจะทำให้เราพลาดในหลายๆโอกาสแล้ว ผมยังคิดว่า มันยิ่งทำให้เศรษฐกิจบ้านเราทรุดลงตามไปด้วยนะครับ ยังงัยๆ ก็ช่วยๆกันออกไปจับจ่ายใช้สอยสักหน่อยนะครับ แล้วก็อย่าลืมสวมหน้ากากอนามัย ล้างมือบ่อยๆด้วยนะครับ

เพื่อนๆหลายคนที่เคยเขียนโปรแกรมประเภท web programing จำพวกภาษา PHP, Python, Ruby, ASP คงหนีไม่พ้นเลยที่จะต้องรู้จักโปรแกรมประเภทที่ทำhosting server ให้เครื่องเรากลายเป็นเว็บ Web Server เพื่อจำลองการทำงานของโปแกรมเรา เพราะภาษาโปรแกรมที่เราเขียนจะต้องทำงานที่ฝั่ง server ก็เลยมีความจำเป็นที่จะต้องสั่งรันบนฝั่ง server เพื่อดูผลการทำงาน แล้วถ้าเราต้องการจะลองทำงานกับ server จริงๆหล่ะ เพื่อนๆจะทำยังงัย วันนี้ผมอยากจะพาเพื่อนๆมาแนะนำให้รู้จักกับความหมายของเว็บโฮสติ้ง เพื่อเป็นแนวทางให้เพื่อนๆที่สนใจจะเป็นเว็บมาสเตอร์จริงๆ สามารถเลือกเว็บโฮสติ้งได้ถูกตามความต้องการ หลังจากเพื่อนๆได้อ่านบทความที่ผมนำมาเสนอแล้ว เพื่อนๆก็ลองเข้าไปดูเงื่อนไขที่แต่ละเว็บโฮสติ้งโฆษณากันดูนะครับ ว่าแต่ละเจ้ามีเงื่อนไขอะไรดีๆมานำเสนอบ้าง ลองเข้าไปทดสอบดูครับว่าผู้ให้บริการเว็บโอสติ้งเจ้าไหน เร็วบ้าง ก็โดยการลองเข้าไปดูตามลิ้งค์ที่ปรากกฏอยู่ ถ้าอันไหนแสดงผลได้เร็ว เราก็พอจะประมาณได้ว่า server ที่ให้บริการนั้น ค่อนข้างที่จะใหม่และมีการวางระบบที่ค่อนข้างทำงานได้เร็ว ซึ่งจะช่วยทำให้เพื่อนๆสามารถตัดสินใจได้ระดับหนึ่ง เรามาเริ่มกันเลยครับ

เว็บโฮสติ้งคือ

web hosting เว็บโฮสติ้ง คือ การเช่าพื้นที่โฮสติ้ง เพื่อเก็บข้อมูลและเพื่อให้ผู้ใช้งานสามารถเข้ามายังเว็บไซต์ของเราได้ อธิบายง่ายๆ ก็คือ เหมือนกับเราเช่าพื้นที่เพื่อฝากข้อมูล เนื้อหาต่างๆ ที่อยู่ภายในเว็บไซต์ของเรากับผู้ให้บริการเช่าพื้นที่โฮสติ้งนั่นเอง ถ้าเปรียบเทียบให้เห็นภาพก็จะเหมือนกับการที่เราเช่าโกดังเพื่อเก็บสินค้าของเรานั่นเอง

เมื่อเรารู้จักกับเว็บโฮสติ้งกันแล้วว่าคืออะไร แล้วเพื่อนๆ เคยสงสัยกันบ้างไหมคะว่าแล้วโฮสติ้งที่เราเข้าใจและใช้งานกันอยู่ทุกวันเนี่ย มีความเป็นมาอย่างไร แล้วเริ่มต้นมาได้อย่างไร ใครเป็นผู้ที่คิดค้นหรือค้นพบกันนะ วันนี้เพื่อนๆ จะหายข้องใจแล้วค่ะ เพราะวันนี้เราจะนำเรื่องราวของที่มาที่ไปของเว็บโฮสติ้งมาเล่าให้เพื่อนๆ ฟังกันค่ะ

สำหรับความเป็นมาของเว็บโฮสติ้งนั้นถือกำเนิดมาพร้อมๆ กับการใช้งานอินเทอร์เน็ท ส่วนในประเทศไทยกลุ่มผู้ใช้งานกลุ่มแรกๆ นั้นจะอยู่ในกลุ่มของมหาวิทยาลัย และองค์กรที่ไม่แสวงหาผลประโยชน์ต่างๆ รวมไปถึงหน่วยงานราชการเป็นส่วนใหญ่ โดยเชื่อมต่อผ่านทางการสื่อสารแห่งประเทศไทย หรือ (CAT) ต่อมาเมื่อความนิยมการใช้อินเทอร์เน็ตมีเพิ่มมากขึ้น การให้บริการเว็บโฮสติ้งในรูปแบบเชิงพาณิชย์จึงเริ่มต้นขึ้น โดยมีผู้ให้บริการรายใหญ่อย่าง ISP ที่กระจายการให้บริการไปยังกลุ่มภาคธุรกิจขนาดกลาง และขนาดเล็ก

และในปัจจุบันด้วยความนิยมในการใช้อินเทอร์เน็ตมีมากขึ้นอย่างต่อเนื่อง จนแทบจะเรียกได้ว่าเป็นส่วนของหนึ่งของชีวิตประจำวันกันไปแล้ว ผู้ให้บริการเว็บโฮสติ้งก็จะมีอยู่ด้วยกัน 2 ประเภทนั่นก็คือ

Web Hosting

1. โฮสติ้งแบบให้บริการฟรี
สำหรับผู้ให้บริการเว็บโฮสติ้งฟรีนั้น เราสามารถค้นหารายชื่อผู้ให้บริการได้ตามเสิร์ชเอนจิ้นทั่วไปได้ค่ะ ซึ่งก็มีผู้ให้บริการอยู่หลายเจ้าเหมือนกัน ทั้งนี้ก็แล้วแต่ว่าผู้ให้บริการแต่ละเจ้านั้นจะให้พื้นที่ในการเก็บข้อมูลเป็นจำนวนเท่าไหร่ มากหรือน้อย ส่วนวิธีการเลือกผู้ให้บริการเว็บโฮสติ้งนั้น คุณสามารถติดตามอ่านได้ที่บทความ “มือใหม่หัดเลือกโฮสติ้ง”

2. โฮสติ้งแบบเสียค่าบริการ
ในปัจจุบันก็มีผู้ให้บริการหลายหลายเจ้า ให้เลือกได้ตามความต้องการ ความเหมาะสมของผู้ใช้งาน นอกจากจะมีผู้ให้บริการมากมายหลายเจ้าให้เราเลือกใช้บริการแล้ว รูปแบบของใช้บริการเว็บโฮสติ้งก็ยังสามารถแยกออกมาได้ดังนี้อีกด้วยค่ะ

         2.1 Dedicated Server การเช่าแบบนี้เป็นการเช่าแบบเหมาทั้งตัวเครื่อง เช่นหากเปรียบเทียบให้เซอร์ฟเวอร์เป็นเครื่องหนึ่งเครื่องก็เท่ากับเราเช่าหมด ยกทั้งเครื่องนั่นเอง สำหรับการเช่าในรูปแบบนี้จะเหมาะกับเว็บไซต์ขององค์กรที่มีขนาดใหญ่

        2.2 Colocation เป็นการเช่าแบบพื้นที่ โดยการนำตัวเครื่องเซอร์ฟเวอร์ของเราทั้งเครื่องไปเช่าพื้นที่ในการติดตั้งอีกทีนึง หากเปรียบเทียบให้เห็นภาพก็คล้ายกับการที่เราเช่าผืนที่ดินแล้วไปปลูกบนที่ดินที่เราเช่านั่นเอง สำหรับการเช่าในรูปแบบนี้จะเหมาะกับเว็บไซต์ขององค์การที่มีขนาดใหญ่มากๆ เนื่องจากมีค่าใช้จ่ายที่ค่อนข้างสูงมากทีเดียว

        2.3 Shared Hosting เป็นการเช่าในลักษณะที่เรียกว่าเช่าพื้นที่เพียงบางส่วน คล้ายๆ กับการที่เราเช่าห้องพักในคอนโดหรือหอพักนั่นเองค่ะ ซึ่งการเช่าโฮสติ้งในแบบนี้จะเหมาะกับบุคคลทั่วไป เนื่องจากมีค่าใช้จ่ายที่ต่ำกว่าทั้ง 2 รูปแบบข้างบน นอกจากนี้การเช่าในลักษณะนี้ยังมีให้เลือกอีกถึง 3 ชนิด ทังนี้ทางทีมงานได้ทำการอธิบายและเปรียบเทียบการทำงานของทั้ง 3 ชนิดขึ้นมาเพื่อเข้าใจได้ง่ายมากขึ้นนะคะ

รูปแบบของโฮสติ้งความหมายของแต่ละลักษณะการใช้งาน
Windowsเป็นรูปแบบที่นิยมใช้มากที่สุดเนื่องจาก ใช้คำสั่งแบบตัวอักษร เหมาะกับการใช้ใช้งานง่าย เป็นการพัฒนาต่อจาก DOS  งานร่วมกับ Software ที่พัฒนาด้วย .asp, .net หากคุณเลือกแบบ Windows จะมีข้อเสียตรงที่การกำหนดสิทธิ์ค่อนข้างมีความยุ่งยาก
Unix, Linuxถูกพัฒนาขึ้นมาเพื่อใช้ร่วมกับงานวิจัย สำหรับการใช้งานจะเหมาะกับ Software และภาคธุรกิจ เนื่องจากการมีความที่พัฒนาด้วย .php ค่าใช้จ่ายในการใช้งานสะดวกในการใช้งานมากกว่า จะมีราคาถูกกว่า Windows ราคาถูกกว่า Windows และสามารถทำงานได้หลายงานในเวลาพร้อมๆ กัน

ดังนั้นคุณผู้อ่านท่านใดที่สร้างเว็บไซต์ด้วย CMS ไม่ว่าจะเป็น Joomla, WordPress ก็ควรเลือกโฮสติ้งแบบ Unix, Linux จะดีที่สุดค่ะ ทั้งนี้ก็เนื่องจาก Joomla, WordPress นั้นใช้ภาษา .php นั่นเองค่ะ และสิ่งที่สำคัญอีกข้อหนึงที่เราควรพิจารณานั่นก็คือ การวิเคราะห์ว่าผู้เข้าเยี่ยมชมเว็บไซต์เราส่วนใหญ่นั้นมาจากในประเทศหรือต่างประเทศด้วยนะคะ ทั้งนี้ก็เพื่อความรวดเร็วในการเข้าเว็บไซต์นั่นเองค่ะ นอกจากนี้ ผู้เขียนเชื่อว่าสำหรับมือใหม่ๆ เวลาจะเข้าไปใช้บริการเว็บโฮสติ้งจากที่ไหนสักแห่งอาจจะเกิดอาการงงกับคำศัพท์ทั้งหลายที่เกี่ยวกับโฮสติ้ง ไม่ว่าจะเป็น DNS, Banwidth etc. ว่าคืออะไร แต่ไม่ต้องห่วงค่ะ ทางทีมงานได้อธิบายคำศัพท์ไว้ให้แล้ว เรามาดูกันดีกว่าแต่ละคำศัพท์นั้นมีหมายถึงอะไร เพื่อที่จะได้ทำความเข้าใจได้อย่างง่ายขึ้น

มาเริ่มกันที่คำศัพท์ตัวแรกเลยนะคะ

- DNS คือ Domain name system ระบบที่ใช้เก็บช้อมูลของชื่อโดเมน ระบบที่ใช้เก็บข้อมูลของชื่อโดเมน แปลงหมายเลขไอพีซึ่งเป็นชุดตัวเลขประจำเครื่องที่จดจำยากให้เหลือเพียงแค่ชื่อเว็บไซต์ที่จำง่ายนั่นเอง


- Bandwidth คือ พื้นที่ในการส่งข้อมูล ถ้าหากมีพื้นที่ที่กว้าง ก็จะสามารถส่งข้อมูลได้ง่าย และสะดวกมากยิ่งขึ้น เปรียบเสมือนกับถนน หากถนนมีความกว้างหรือมีเลนให้รถวิ่งมาก ก็จะเดินทางได้สะดวก และสะดวกมากขึ้นนั่นเอง


- Storage คือ การจัดเก็บข้อมูล การนำข้อมูลที่ผ่านกระบวนการการทำงานทั้งการนำเข้า การประมวลผล และการแสดงผลเป็นที่เรียบร้อยแล้วมาทำการบันทึกลงในอุปกรณ์จัดเก็บข้อมูล Storage Device เพื่อให้สามารถนำกลับมาใช้ได้เมื่อต้องการค่ะ

- OS คือ operating system ซอฟแวร์ที่ทำหน้าที่เป็นตัวกลางระหว่างฮาร์ดแวร์และซอฟต์แวร์ประยุกต์ทั่วไป / ระบบปฏิบัติการของคอมพิวเตอร์ ซึ่งเป็นระบบที่ใช้ในการจัดการและควบคุมการทำงานต่างๆ ของเครื่องคอมพิวเตอร์


- ISP คือ บริษัทที่ให้บริการอินเทอร์เน็ต ย่อมาจาก Interner Service Provide เป็นหน่วยงานที่บริการให้เชื่อมต่อเครื่องคอมพิวเตอร์ส่วนบุคคลหรือเครือข่ายคอมพิวเตอร์ของบริษัท เข้ากับเครือข่ายอินเทอร์เน็ตทั่วโลก อาทิ KSC, TRUE, TOT เป็นต้น

- DOS คือ Disk Operation System เป็นระบบปฏิบัติการที่ถูกพัฒนาขึ้นโดยบริษัท IBM เป็นระบบปฏิบัติการสำหรับเครื่อง PC โปรแกรม DOS จะถูกโหลดหรืออ่านจากแผ่นดิสก์เข้าไปเก็บไว้ในหน่วยความจำ หลังจากนั้นจะไปทำหน้าที่เป็นผู้ประสานงานต่างๆ โดยอัตโนมัติ การทำงานเป็นแบบ Text mode สั่งงานโดยการกดคำสั่ง

- CMS คือ Content Management System ระบบจัดการเนื้อหา หรือ เว็บสำเร็จรูปนั่นเองค่ะ เช่น Worpresss Joomla Drupal mambo เป็นต้น

- PHP คือ personal home page ภาษาที่นำไปพัฒนาเว็บไซต์ สามารถทำงานร่วมกับภาษา HTML ได้

- Asp คือ Active server page เทคโนโลยีการพัฒนาแอพพลิเคชั่นสำหรับเว็บเพจ พัฒนาโดยบริษัท ไมโครซอฟต์ มีจุดเด่นในการพัฒนาและจัดการแอพพลิเคชั่นบนเว็บเซิร์ฟเวอร์ โดยจะทำงานในลักษณะของโปรแกรมภาษา Interpreter ที่ใช้ในการตีความเว็บเพจที่เขียนขึ้นมาโดยใช้ภาษา VBScript, JSCript เป็นต้น

- .net คือ โดเมนเนมสากลที่ทุกประเทศสามารถจดได้ แต่จะต้องสำหรับเว็บไซต์ทางด้านเน็ตเวิร์ก หรือ กลุ่มบริหารเครือข่าย (Network Services) เท่านั้น

เป็นอย่างไรกันบ้างคะ กับความหมายและที่มาที่ไป รวมถึงรูปแบบของเว็บโฮสติ้ง ว่าทั้งหมดมีกี่ประเภท และแต่ละประเภทนั้นมีการทำงาน และแตกต่างกันออกไปอย่างไรบ้าง นี่ก็เป็นเพียงความรู้และข้อมูลคร่าวๆ เท่านั้นนะคะ หากคุณผู้อ่านที่ต้องการจะเลือกผู้ให้บริการเว็บโฮสติ้งก็สามารถติดตามอ่านได้ที่บทความ “มือใหม่หัดเลือกโฮสติ้ง” ได้นะคะ และสำหรับฉบับหน้านั้นทางทีมงานจะนำเรื่องอะไรมานำเสนอให้ได้อ่านกันคงต้องติดตามกันนะคะ แล้วพบกันใหม่ฉบับหน้าค่ะ ^ ^

ที่มา iBusiness Magazine http://www.trawutspace.com

เป็นงัยมั่งครับ บทความที่ผมนำมาเสนอ หลังจากที่เพื่อนๆได้อ่านกันแล้ว ถ้าเพื่อนๆสนใจอยากจะทดสอบความเร็วของผู้ให้บริการเว็บโฮสติ้ง ก็อย่างที่ผมแนะนำไปแหละครับ ลองเข้าไปทดสอบกันดูครับ แล้วเจอกันใหม่ครับ ต้องไปอ่านหนังสือเตรียมสอบ Math Applied ก่อนครับ สวัสดีครับ

อ่านเพิ่มเติม...

23.7.09

ตัวอย่างการใช้งาน ChartDirector (ตอนที่ 2)

     จากใน ตอนที่1 เราได้ทราบหลักการทำงานของ ChartDirector ไปแล้ว ขอสรุปให้ฟังอีกครั้งว่าการทำงานของ Chartdirector มันจะเริ่มจากตอนไหน ส่วนเพื่อนๆที่เพิ่งเปิดเข้ามา ยังไม่ทราบว่า ChartDirector ติดตั้งอย่างไร ขอให้กลับไปอ่านบทความ "มาสร้างกราฟให้ PHP ด้วย ChartDirector กันเหอะ" กันก่อนนะครับ  ส่วนตัว library ChartDirector ก็หาได้จากโฆษณาที่ขึ้นอยู่ตามเว็บนี้เลยนะครับ อันเดียวกัน ไม่ต้อง ไป search ไป  hack  ไป crack ที่ไหนหรอกครับ จัดหามาให้แล้ว

ขั้นตอนการทำงานคร่าวๆ
1. user ส่ง request เข้าไปหา web server โดยผ่านหน้าเว็บที่เราเขียน script PHP เอาไว้
2. Web server รับ request เข้ามาประมวลผล อาจจะทำการค้นหาข้อมูลที่ดาต้าเบส หรือ text file
3. PHP script ทำการสกัดข้อมูลออกมา เพื่อจัดข้อมูลก่อนส่งเข้าไปใน function ของ ChartDirector
4. ChartDirector ทำการส่ง output ออกมาเป็น image file สังเกตที่บรรทัดล่างสุดของตัวอย่าง ChartDirector
    header("Content-type: image/png");
    print($c->makeChart2(PNG));
5. Web server ทำการส่ง Respond กลับไปหา user ในรูปแบบ image

จริงๆแล้ว มันเหมือนกับเราเปิดดูรูป ตามเว็บที่เค้าทำ link ไว้ให้นั่นแหละ ต่างกันตรงที่ รูปที่เราเปิดนั่นมันสามารถเปลี่ยนแปลงได้ (dynamic) ตลอดเวลา ขึ้นอยู่กับเงื่อนไขที่ user ส่งเขาไปหา seerver ซึ่งทั้งหมดนี้  มันขึ้นอยู่กับการออกแบบและวาง algorithm ในการให้ script ทำงานตามที่เราต้องการ

ต่อไปเรามาลองสร้างตัวอย่างง่ายๆเพื่อให้เกิดความเข้าใจในการนำ ChartDirector ไปใช้งานกันดีกว่า โดยผมจะแยกการทำงานของ script PHP ออกเป็นสองฝั่ง แต่ script ทั้งหมดก็ยังอยู่บน server นะครับ อย่าสับสนนะครับ (เพราะ PHP เป็น server side script) โดยทั้งหมดวางไว้ตาม folder ที่ผมกำหนดไว้นะครับ แล้วก็เรียก http://localhost/simple/ เมื่อทุกอย่างถูกติดตั้งเรียบร้อยแล้ว

image

ก่อนอื่นขอแนะนำให้ไปสร้างข้อมูลไว้ในดาต้าเบสก่อนนะครับ แล้วจัดการเรื่องของ user/password ที่เอาไว้ connect กับดาต้าเบสให้เรียยบร้อย ให้เหมือนกับโค๊ดที่เขียนไว้ให้ดู ไม่งั้นมันจะรันไม่ออกนะครับ โดยเฉพาะ ถ้ามีการ error ใน file chart.php มันจะไม่โชว์ error ในบางครั้ง เพราะมันเป็นรูปภาพหน่ะครับ ให้ระวังตรงนี้ด้วย

โค๊ดในการสร้าง table สำหรับเก็บข้อมูล ผมเขียนนไว้ให้แล้ว เพื่อนๆสามารถนำไปวางไว้ที่ phpMyadmin ได้เลย หรือจะใช้ mysql front ก็ได้ ถนัดแบบไหนก็เลือกเลยนะครับ ในที่นี้ผมสร้างตาราง simple ไว้ในดาต้าเบส test ด้วย mysql front  ดูตามรูปประกอบนะครับ

image

โค๊ดการสร้างตาราง simple และใส่ข้อมูล

#
# Table structure for table 'simple'
#

CREATE TABLE IF NOT EXISTS simple (
  Xyear varchar(4) ,
  Xvalue int(6) unsigned DEFAULT '0'
);

#
# Dumping data for table 'simple'
#

INSERT INTO simple VALUES("1990", "1600");
INSERT INTO simple VALUES("1991", "1950");
INSERT INTO simple VALUES("1992", "850");
INSERT INTO simple VALUES("1993", "500");
INSERT INTO simple VALUES("1994", "800");
INSERT INTO simple VALUES("1995", "500");
INSERT INTO simple VALUES("1996", "450");
INSERT INTO simple VALUES("1997", "560");
INSERT INTO simple VALUES("1998", "630");
INSERT INTO simple VALUES("1999", "800");
INSERT INTO simple VALUES("2000", "1100");
INSERT INTO simple VALUES("2001", "1350");
INSERT INTO simple VALUES("2002", "1600");
INSERT INTO simple VALUES("2003", "1950");
INSERT INTO simple VALUES("2004", "2300");
INSERT INTO simple VALUES("2005", "2700");
INSERT INTO simple VALUES("2006", "630");
INSERT INTO simple VALUES("2007", "800");
INSERT INTO simple VALUES("2008", "1100");
INSERT INTO simple VALUES("2009", "1350");

ฝั่ง user
มีหน้าที่ในการส่ง request เข้าไป เราจะสร้าง หน้าเว็บขึ้นมา 1 หน้าเพื่อให้ user ส่ง request เข้ามา ในตัวอย่างนี้เราจะทำกันแบบง่ายๆนะครับ
ไฟล์ที่เกี่ยวข้องคือ index.php และ display.php มีโค๊ดดังต่อไปนี้

index.php :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Simple Bar Chart</TITLE>
</HEAD>

<BODY bgcolor="#CCFFFF">
<TABLE width="1003" border="1" cellspacing="0" cellpadding="0">
<TR>
    <TD height="100" align="center" bgcolor="#99CCFF">
    <FORM METHOD=GET ACTION='display.php' METHOD='GET' TARGET="FrameChart">
    <SELECT NAME="YEAR" width="200">
        <OPTION VALUE="1990">1990</OPTION>
        <OPTION VALUE="1991">1991</OPTION>
        <OPTION VALUE="1992">1992</OPTION>
        <OPTION VALUE="1993">1993</OPTION>
        <OPTION VALUE="1994">1994</OPTION>
        <OPTION VALUE="1995">1995</OPTION>
        <OPTION VALUE="1996">1996</OPTION>
        <OPTION VALUE="1997">1997</OPTION>
        <OPTION VALUE="1998">1998</OPTION>
        <OPTION VALUE="1999">1999</OPTION>
        <OPTION VALUE="2000">2000</OPTION>
        <OPTION VALUE="2001">2001</OPTION>
        <OPTION VALUE="2002">2002</OPTION>
        <OPTION VALUE="2003">2003</OPTION>
        <OPTION VALUE="2004">2004</OPTION>
        <OPTION VALUE="2005">2005</OPTION>
        <OPTION VALUE="2006">2006</OPTION>
        <OPTION VALUE="2007">2007</OPTION>
        <OPTION VALUE="2008">2008</OPTION>
        <OPTION VALUE="2009">2009</OPTION>
    </SELECT>
    &nbsp;&nbsp;&nbsp;<INPUT TYPE="submit" value="Click">
    </FORM>
    </TD>
</TR>
<TR>
    <TD height="400" bgcolor="#000099">
    <iframe id='FrameChart' name= 'FrameChart' width='100%' height='500' frameborder='0' src='display.php' scrolling='auto'></iframe>
    </TD>
</TR>
</TABLE>
</BODY>
</HTML>

display.php :

<?php

$year = $_GET['YEAR'];

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>

<BODY>
<TABLE width="100%">
<TR>
    <TD align="center">
        <IMG SRC="chart.php?YEAR=<?php echo $year;?>" BORDER="0">
    </TD>
</TR>
</TABLE>
</BODY>
</HTML>

ฝั่ง server รับ request จาก user แล้วไปค้นหาข้อมูลในดาต้าเบสแล้วทำการจัดข้อมูลส่งเข้าไปใน function ของ ChartDirector แล้วทำการวาดรูปส่งกลับมาให้ user (กลับมาที่หน้า display.php บริเวณที่เป็น iframe อีกครั้ง) ไฟล์ที่เกี่ยวข้องได้แก่ chart.php

chart.php :

<?php
require_once("../ChartDirector/lib/phpchartdir.php");

if(isset($_GET['YEAR'])){
    $year = $_GET['YEAR'];
}else{
    $year = date("Y");
}

$hostname = "localhost";
$user = "root";
$password = "merlin";
$dbname = "test";
mysql_connect($hostname,$user,$password) or die("Can't connect database ".mysql_error());
mysql_select_db($dbname) or die("Can't select database ".mysql_error());

$sql = " SELECT * FROM simple where Xyear <= '$year' order by Xyear asc limit 1,10 ";
$db_query=mysql_db_query($dbname,$sql);
$num_rows=mysql_num_rows($db_query);
for($i=0;$i<$num_rows;$i++){
    $row=mysql_fetch_array($db_query);
    $Ayear[] = $row['Xyear'];
    $Avalue[] = $row['Xvalue'];
}

# The data for the bar chart
$data = $Avalue;

# The labels for the bar chart
$labels = $Ayear;

# Create a XYChart object of size 600 x 380 pixels. Set background color to brushed
# silver, with a 2 pixel 3D border. Use rounded corners of 20 pixels radius.
$c = new XYChart(600, 380, brushedSilverColor(), Transparent, 2);

# Add a title to the chart using 18pts Times Bold Italic font. Set top/bottom margins
# to 8 pixels.
$textBoxObj = $c->addTitle("Annual Revenue for Star Tech", "timesbi.ttf", 18);
$textBoxObj->setMargin2(0, 0, 8, 8);

# Set the plotarea at (70, 55) and of size 460 x 280 pixels. Use transparent border
# and black grid lines. Use rounded frame with radius of 20 pixels.
$c->setPlotArea(70, 55, 460, 280, -1, -1, Transparent, 0x000000);
$c->setRoundedFrame(0xffffff, 20);

# Add a multi-color bar chart layer using the supplied data. Set cylinder bar shape.
$barLayerObj = $c->addBarLayer3($data);
$barLayerObj->setBarShape(CircleShape);

# Set the labels on the x axis.
$c->xAxis->setLabels($labels);

# Show the same scale on the left and right y-axes
$c->syncYAxis();

# Set the left y-axis and right y-axis title using 10pt Arial Bold font
$c->yAxis->setTitle("USD (millions)", "arialbd.ttf", 10);
$c->yAxis2->setTitle("USD (millions)", "arialbd.ttf", 10);

# Set y-axes to transparent
$c->yAxis->setColors(Transparent);
$c->yAxis2->setColors(Transparent);

# Disable ticks on the x-axis by setting the tick color to transparent
$c->xAxis->setTickColor(Transparent);

# Set the label styles of all axes to 8pt Arial Bold font
$c->xAxis->setLabelStyle("arialbd.ttf", 8);
$c->yAxis->setLabelStyle("arialbd.ttf", 8);
$c->yAxis2->setLabelStyle("arialbd.ttf", 8);

# Output the chart
header("Content-type: image/jpeg");
print($c->makeChart2(JPG));
?>

จริงๆตัวย่างที่ยกมาให้ดูนี้ มันค่อนข้างถึกๆ นิดนึง แต่สำหรับใครที่มือใหม่ จะได้มองออกหน่ะครับ ส่วนมือโปรก็ตามสบายครับ  ในส่วนของการใช้งาน ChartDirector ผมขอหยุดไว้เท่านี้หล่ะกัน ก้ไม่น่าจะมีอะไรมาก พยายามดูที่ demo ที่ chartDirector ให้มา แล้วลองแก้ไขดัดแปลงดูครับ ขอให้สนุกครับ สวัสดีครับ

อ่านเพิ่มเติม...

17.7.09

ตัวอย่างการใช้งาน ChartDirector (ตอนที่ 1)

เห็นถามกันมามาก หลังจากที่บทความเรื่อง “ มาสร้างกราฟให้ PHP ด้วย ChartDirector กันเหอะ ” ก็เลยอดไม่ได้ที่จะไม่เขียนต่อ เพราะถามกันมาเยอะมาก เอาเป็นว่าเรามาดูวิธีการใช้งานจริงๆ (เพราะผมทำอยู่เป็นประจำ) ของ ChartDirector กันดีกว่า เอาแบบทีละขั้นตอน หมดไส้หมดพุงไปเลย แต่ต้องขอออกตัวไว้ก่อนนะครับ ผมไม่ได้เป็นโปรแกรมเมอร์แต่กำเนิด ฉะนั้นบางครั้งโค๊ดของผม มันจะดูถึกๆ ไปบ้าง แต่อย่าได้ไปมองสาระตรงนั้น ผมอยากให้มองแนวคิดการเขียนโปแกรม และการนำไปใช้งานมากกว่า ก็อย่างที่บอก เรามัน “โปรแกรมเมอร์(จำเป็น)” นี่ครับ  ถ้าใครยังไม่ได้ติดตั้ง ChartDirector ก็ให้กลับไปอ่านบทความ “ มาสร้างกราฟให้ PHP ด้วย ChartDirector กันเหอะ ” ก่อนนะครับ  ผมทดลองแล้วใช้ได้ ติดตั้งได้จริง ส่วนตัว library ของ ChartDirector ก็หาดาวน์โหลดได้จากแบนเนอร์ที่ขึ้นตามอยู่ในเว็บนี่แหละครับ ไม่ต้อง search หาเอาใหม่ เจ้าของบริษัทเค้ามาเอง รับรองของแท้ ไม่ต้อง crack ไม่ต้อง hack จัดไปอย่ามัวลังเล ให้เสียของ

เรามาเริ่มต้นด้วยแนวคิดที่ว่า ผมมีงานประจำที่จะต้องดึงข้อมูลจาก Oracle server จากของบริษัทตัวเอง ซึ่งเป็นดาต้าเบสหลัก ดาต้าเบสใหญ่ แล้วเข้ามาเก็บไว้ใน ดาต้าเบส Mysql แผนกของตัวเอง ซึ่งวันหลังผมจะมาอธิบาย การใช้ PHP ติดต่อกับ Oracle server โดยให้ PHP ทำงานแบบเป็น period ดึงข้อมูลมาเป็นระยะๆ ส่วนเจ้าของเว็บก็นั่งกระดิกนิ้วรอ  ผิวปากด้วยอย่าลืม อิอิอิ.

เผลอแพล๊บเดียว โม้อีกแหละ เอาเป็นว่า พอเราได้ข้อมูลจาก Oracle server แล้วมาเก็บใน MySQL server แล้ว (ในส่วนของการออกแบบฐานข้อมูลในการเก็บ ไม่ขออธิบายนะ) เราก็จะทำการดึงข้อมูลจาก Mysq ให้มาทำการแสดงผล ตาม condition ที่ user หรือผู้ใช้งาน ทำการกำหนดจากการคลิ๊กเลือกว่าจะให้แสดงข้อมูลจากวันไหน เลือกดูค่าใดบ้าง ค่าไหนไม่ต้องการ ซึ่งข้อกำหนดที่ได้จาก user นั้น เราจะเอาไปเป็นตัว select ข้อมูลจาก MySQL server โดยใช้ความรู้ด้านภาษา SQL (ภาษาที่เอาไว้ค้นหาข้อมูลในดาต้าเบส) เมื่อเราได้ข้อมูลจากการ query (ค้นหา)  แล้ว ซึ่งข้อมูลที่ได้มักจะมาในรูป array (ข้อมูลที่มีมิติ)  เราก็จะอาศัยการจัดและสกัดข้อมูลออกมาจะ for loop while loop  if elese  อะไรก็ตามแต่ แล้วจับยัดใส่ไปใน function  ของ  ChartDirector เพียงเท่านี้ เราก็จะได้รายงานที่เหนือชั้นบนหน้า web application (ปลายปี ก็รอเลื่อนตำแหน่งได้เลยครับ พี่น้อง ได้มาแล้ว 2 ขั้น)

อธิบายด้วยคำพูด อาจจะงง มาดูรูปภาพประกอบกันดีกว่า มีคนเค้าบอกว่า “รูปหนึ่งรูปอธิบายได้มากกว่าคำพูดล้านคำ” (อยากให้เป็นอย่างงั้นมั่งจัง แต่ google ไม่ชอบแน่ๆ)

database_structure รูปนี้ เป็นฐานข้อมูลที่ผมวางโครงสร้าง โดยอาศัยข้อมูลหลักจาก Oracle server แล้วเอาบางส่วนของข้อมูลที่ต้องการมาเก็บไว้ที่เครื่องตัวเองที่เป็น MySQL

ในส่วนของหน้า web application ซึ่งเป็นส่วนที่ต้องทำการโค๊ดโปรแกรม PHP script ลงไป เพื่อทำการดึงข้อมูลจาก MySQL server ตาม condition ที่ user เลือกจากหน้าเว็บ แล้วส่ง request เข้ามาที่ Appache server ของเราให้ทำการ query ข้อมูล ตามที่ user ต้องการอยากดู ตรงจุดนี้ เป็นการออกแบบหน้าตา web application ว่าจะให้ user สามารถเลือกอะไรได้มั่ง อะไรเลือกถูกบังคับให้เลือก ต้องอาศัยศิลปะ เข้ามาเกี่ยวข้อง เพราะเราต้องทำให้ user ใช้งานได้ง่าย ไม่เกิดความสับสน

imageรูปนี้แสดงให้เห็นกระบวนการในการสร้างรายงานที่เป็นกราฟ 

เดี๋ยววันนี้ขอจบกระบวนการสร้างไว้ก่อน คราวหน้ามาว่ากันต่อ เรื่องของโค๊ดล้วนๆ เหนื่อยแหละ แล้วก็ใกล้จะสอบแล้วด้วย ขอตัวไปอ่านหนังสือก่อนแล้วกันครับ

อ่านเพิ่มเติม...

5.7.09

วิธี Download จาก MEGAUPLOAD

วันนี้มีเทคนิคเล็กๆน้อย มานำเสนอสำหรับขาโหลดทั้งหลายแล สำหรับท่านที่ชอบดาวน์โหลดใน MEGAUPLOAD

สำหรับเทคนิคนี้นะครับ ต้องใช้ FireFox เจ้าหมาย่าง ตัวเก่งมาช่วยซะแล้ว จะว่าไปแล้วผมก็ค่อนข้างชอบ FireFox เพิ่มขึ้นทุกวัน เพราะอะไรหน่ะเหรอครับ เพราะเจ้า add-on ที่เค้าทำออกมาให้ใช้หน่ะสิครับ ไม่ว่าจะเป็นงาน web developer หรืองาน debugging เจ้า add-on ของ FireFox มีให้ใช้เพียบ ใครยังไม่เคย ก็ไปโหลดมาลองซะ เดี๋ยววันหลังผมจะมาพูดเรื่องการปรับแต่งเจ้า FireFox ให้แรงสุดขั้วด้วย รับรองว่าลืม IE ไปเลยหล่ะกัน

อันดับแรก ก็ไปโหลด FireFox มาก่อนเลย คลิ๊กซะสิ

ต่อมาก็ให้เข้าไปที่ http://addons.mozilla.org/firefox/59/ เพิ่มไปเพิ่ม add-on มาใส่ใน FireFox ของเรา หลังจากติดตั้งแล้ว ก็ให้ restart FireFox อีกครั้ง (ตามระเบียบ)

image

จากนั้นให้ไปตั้งค่าตามนี้ ที่เมนู Tool->User Agent Switcher->Options->Options 

image

Click User Agents->New แล้วเลือก New User Agent

image

จากนั้นให้เพิ่มค่า (เอาเฉพาะตัวหนา นะครับ)

+ Description: MEGAUPLOAD
+ User Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; FDM; MEGAUPLOAD 1.0

image

คงไม่ต้องบอกนะว่า ถ้าใส่ค่าเสร็จแล้ว ให้กด “ตกลง” ออกมาเลย

ต่อไป ถ้าต้องการดาวน์โหลดไฟล์ที่เค้าไปฝากไว้ที่ MEGAUPLOAD ก็ให้เลือกไปที่ Tools->User Agent Switcher->MEGAUPLOAD ได้เลย เพียงเท่านี้ เจ้า MEGAUPLOAD จะคิดว่า เครื่องคุณมี Alexa ซึ่งจริงๆแล้วเครื่องเราไม่มี เพียงแค่นี้ เราก็จะสามารถโหลดได้เรื่อยๆ ไม่จำกัด

อ่านเพิ่มเติม...
 

เกี่ยวกับฉัน(ไหมเนี้ย)

รายการบล๊อกอื่นๆ

  • Solved: error: 'TKD2' was not declared in this scope, LIFA_Base compile error - วันนี้ จะมาเล่าถึงปัญหาที่เจอในการเบิร์นโค๊ด LIFA_Base ที่เราใช้ในการทำให้ Arduino ของเราสามารถรับคำสั่งจาก LabVIEW ได้ ปัญหานี้ เริ่มเกิดขึ้นตอนที่ Ard...
  • Type-Fu : Typing practice game online - หากใครที่สนใจ หรือจะต้องทำงานเกี่ยวกับคอมพิวเตอร์ หนึ่งในความจำเป็นก็คือ จะต้องเรียนรู้ที่พิมพ์สัมผัสได้ เพราะการที่พิมพ์สัมผ้สได้ มันได้ประโยชน์หลายๆ อย...

Blog อื่นๆ ที่น่าติดตาม

เหล่าบรรดา Blogger