บทความ

กำลังแสดงโพสต์จาก กรกฎาคม, 2012

เขียน Codeigniter แนะนำให้ใช้ site_url เพื่อแก้ปัญหาเรื่อง Path

คำถามเกี่ยวกับ :เขียน Codeigniter แนะนำให้ใช้ site_url เพื่อแก้ปัญหาเรื่อง Path      การเขียน Web Programming หนีไม่พ้นเรื่องของ HTML กับการใช้งานไฟล์ประกอบไม่ว่าจะเป็น javascript ,css  , รูปภาพต่างๆ หรือ การ include , import  PHP ด้วยกัน อะไรเหล่านี้ย่อมจะต้องอ้างอิงด้วย Path และ ชื่อไฟล์  แต่ก่อนถ้าเราเขียนดวย PHP ปรกติ ก็เรียกใช้ได้เลยดูเอาว่ายึดตามไฟล์ PHP ที่จะใช้เป็นหลักถ้าอยู่ใน Sub เดียวกันก็ใช้ได้เลย แต่ถ้าอยู่ซ้อนเข้าไปใน folder ก็ว่ากันไปตามเรื่อง ซึ่งเหล่านี้หลายท่านคงจะพอรู้กันดี      แต่พอหันมาใช้ Framework มันก็เหมือนเป็นดาบสองคมเรื่องที่ยากๆ ช่วยให้เราง่ายขึ้นแต่บางทีเรื่องที่เราเคยทำง่ายๆ แต่ถ้าไม่รู้วิธีใช้ใน framework ก็จะกลายเป็นเรื่องยากทันที       ยกตัวอย่าง เรื่องการ แทรกรูปลงใน HTML เรื่องหมูๆสำหรับทุกคน แต่พอมาใช้ Framework มัน Mapping ผ่าน View ผ่าน controller ที่บางที แค่ เครื่องหมาย  / ตัวเดียวทำให้ Path ไฟล์หาไม่เจอ ทางแก้ไม่ยากสำกรับ Codeigniter เพียงแค่หมั่นใช้ function site_url()   ยกตัวอย่างเช่น จากที่เราเคย เรียกง่าย ๆ  <img src="

วิธี Get Value จาก Raido Button ด้วย Java Script

วิธี Get Value จาก Raido Button ด้วย Java Script คำถามเกี่ยวกับ :วิธี Get Value จาก Raido Button ด้วย Java Script  Input box ที่เป็น radio button นั้นจะถูกมองเป็น Array ใน JavScript ทำให้เราไม่สามารถ  Get Value ได้ง่ายๆ เหมือน input  ตัวอื่น ที่เพียงแค่ ใช้คำสั่ง  vInput.value Radio Button จะต้องใช้ วิธี วน Loop Array  แล้วดูว่า Radio ตัวใหนที่ ถูก Checked ไว้ค่อย Get Value ออกมา ตามตัวอย่าง ตัวอย่างการ Get Value จาก Radio Button <script>     function testRadio(){          radio_val= getRadioValue(document.myform.my_radio_input);          alert(val);      }     function getRadioValue(radioObj) {         for(var i = 0; i < radioObj.length; i++) {             if(radioObj[i].checked) {                 return radioObj[i].value;             }         }         return "";     }      </script> ลองเอาไปปรับใช้ดูครับผม

วิธี Submit form แล้วให้ เปิด หน้าต่างใหม่ New Pop Up

คำถามเกี่ยวกับ :วิธี Submit form แล้วให้ เปิด หน้าต่างใหม่ New Pop Up วิธี Submit form แล้วให้ เปิด หน้าต่างใหม่ด้วย Java Script ครับ บ่อยครั้งที่เรา จะ Open Pop up window มักจะใช้  Link แล้วแปะ Parameter ไป แต่ถ้าเกิดว่าเรามีค่าใน form เยอะๆ มานั่งแปะก็คงไม่ไหวครับ วันนี้จะแนะนำวิธีการ Submit form ที่เป็น method="post" แล้วให้ หน้าที่เรา Action ไป Open popup ใหม่ครับ ตามตัวอย่างนี้เลย ก่อนอื่นเขียน Function javascript ตามนี้ <SCRIPT TYPE="text/javascript"> <!-- function submitpopup(myform){ window.open('', 'test popup', 'height=200,width=400,scrollbars=yes'); myform.target='test popup'; return true; } //--> </SCRIPT> ส่วนของ HTML Form ก็เรียกใช้ง่ายๆ แค่นี้ครับ <FORM METHOD=POST ACTION="test.html"  onSubmit="submitpopup(this)"> ลองไปใช้กันดูครับผม

ตัวอย่าง Java List Value จาก Select Box

คำถามเกี่ยวกับ :ตัวอย่าง Java List Value จาก Select Box โพสก่อนหน้านี้ กล่าวถึงเรื่องการกำหนดความกว้างให้กับ Select Box มาโพสนี้ขอกล่าวต่อเกี่ยวกับเรื่องการ List ค่าใน Select Box ด้วย Request ใน Java เราอาจคุ้นเคยการใช้งาน request.getParameter("p_name") เพื่อรับค่าที่ส่งผ่านจาก form มาให้ ตามชื่อ input box ที่ตั้งไว้   แต่ถ้าเกิดว่าเราอยากจะ List ทุกค่าที่อยู่ใน Select Box ล่ะ จะทำยังไง ยกตัวอย่างเรามี Select Box อยู่ประมาณนี้ Option 1 Option 2 Option 3 Option 4 Option 5 ตาม Code HTML <select multiple="multiple" name="select1" size="5">                 <option>Option 1</option>                 <option>Option 2</option>                 <option>Option 3</option>                 <option>Option 4</option>                 <option>Option 5</option>            </select>

Select Box Width วิธีกำหนดความกว้างให้ Select Box

คำถามเกี่ยวกับ :Select Box Width วิธีกำหนดความกว้างให้ Select Box พอดีมีน้องคนนึงมีปัญหาว่า Select box มันกว้างยาวตาม Data มันจะกว้างตาม Data ที่กว้างที่สุดในนั้น แล้วถ้าเกิดว่าเราไม่อยากให้เป็นอย่างงั้น จะทำยังไง แบบว่าอยากจะกำหนดความกว้างได้เอง ตอนแรกผมก็ตอบไปแบบไม่คิดอะไร ก็ใส่ tab Width เข้าไปสิ เช่น <select  width="10">  อะไรทำนองนี้น่ะ แต่ผลปรากฏว่าทำแล้วไม่มีผลอะไรแฮะ เรื่องที่คิดว่า่ง่ายๆ กลายเป็นไม่ง่ายซะแล้ว นั่งเทียนซักพักก็รู้ว่าถ้าเราจะ กำหนด ความกว้างให้ Select Box ต้องใช้ CSS เท่านั้น T_T ง่ายๆ ก็ตามนี้เลย <SELECT NAME="select1" SIZE="5" MULTIPLE style="width: 200px"> ต้องทำประมาณนี้แหละครับ หรือจะกำหนด CSS ไว้ก่อนก็ได้เช่น <style type="text/css"> .box { width: 200px; height: 200px;} </style> แล้วก็ค่อยเรียกใช้แบบนี้ก็ได้ผลเหมือนกัน <SELECT NAME="select1" SIZE="5" MULTIPLE class="box"> อืมห์นะจะว่าไปไม่บอกก็ไม่รู้เหมือนกันนะเนี่ย

สร้าง กราฟบนเว็บง่ายๆ ด้วย Google API

คำถามเกี่ยวกับ :สร้าง กราฟบนเว็บง่ายๆ ด้วย Google API พอดีไปรับงานมางานนึงมีให้ทำกราฟด้วย ตอนแรก็กลัวๆ ว่าจะช้าก็เพราะกราฟนี่แหละ แต่มาึค้นเจอพอดีเห็นแล้วง่ายมากครับ เพียงแค่ทำ HTML ง่ายๆ ตามนี้เลย เริ่มจาก import  API Google มาครับ <script type="text/javascript" src="https://www.google.com/jsapi"></script> จากนั้นก็ เขียน Script  ตามตัวอย่างใน URL นี้เลยครับ https://google-developers.appspot.com/chart/interactive/docs/quick_start ทำตามนั้นแล้ว เปิด HTML ด้วย Browser ก็จะได้กราฟออกมาเลยครับ ตาม Link ข้างบนเราสามารถดึงข้อมูลจาก Data base มาแทนที่ค่าที่กำหนดใน java script ส่วนนี้ครับ  var data = new google.visualization.DataTable();         data.addColumn('string', 'Topping');         data.addColumn('number', 'Slices');         data.addRows([           ['Mushrooms', 3],           ['Onions', 1],           ['Olives', 1],           ['Zucchini', 1],           ['Pepperoni&#

ทำ TAB ง่ายๆ ดัวย jQuery UI ครับ

คำถามเกี่ยวกับ :ทำ TAB ง่ายๆ ดัวย jQuery UI ครับ พอดีวันนี้มีงาน ที่ต้อง Design เป็น Tab ก็เลยลองโหลด Jquery มาลองเล่นดูครับ ง่ายๆ ครับ หลังจาก โหลดมาแล้วก็ เขียน HTML ตามนี้เลย ส่วนของการ include Library & CSS ตามนี้เลยครับ     <link rel="stylesheet" href="js/themes/base/jquery.ui.all.css">     <script src="js/jquery-1.7.2.js"></script>     <script src="js/ui/jquery.ui.core.js"></script>     <script src="js/ui/jquery.ui.widget.js"></script>     <script src="js/ui/jquery.ui.tabs.js"></script>         <script>     $(function() {         $( "#tabs" ).tabs();     });     </script> เสร็จแล้วก็สร้าง TAB ได้ด้วย HTML Code ง่ายๆ สะอาดตา <div id="tabs">     <ul>         <li><a href="#tabs-1">TAB1</a></li>         <li><a href="#tabs-2">TAB2</a></li>