ข้ามไปที่เนื้อหาหลัก

บทความ

มาทดสอบโครงสร้างหน้าเว็บ HTML ด้วยโปรแกรม BlueGriffon กันเถอะ

       การสร้างเว็บไซต์นั้น นอกจาก notepad หรือ gedit ที่เป็น text editor มาพร้อมระบบปฏิบัติการ(OS)ที่ติดตั้งแล้วนั้น ยังมีโปรแกรมอีกมากมายหลายตัวที่ช่วยให้เราเขียนโค๊ด HTML ได้ง่ายขึ้น จึงทำให้การสร้างเว็บเพจขึ้นมาแต่ละหน้านั้น ง่ายขึ้นกว่าการเขียนเว็บด้วยซอร์สโค๊ด HTML ล้วนๆเพียงอย่างเดียว        สำหรับโปรแกรมที่ผมจะนำเสนอควบคู่ไปกับทุกบทความที่เกี่ยวกับการสร้างเว็บไซต์ ผมจะใช้โปรแกรมที่ชื่อว่า BlueGriffon   ซึ่งเป็นโปรแกรมที่เรียกว่า WYSIWYG คือสามารถปรับแต่งหน้าเว็บของเราผ่านการคลิกที่เมนูต่างๆ ได้สะดวกยิ่งขึ้นโดยไม่ต้องเสียเวลากับการพิมพ์โค๊ดแท็กต่างๆ        โปรแกรมที่ใช้ออกแบบหน้าเว็บเหล่านี้ (รวมถึง Dreamweaver ด้วย) จะมีข้อเสียอยู่เล็กน้อยคือ การสร้างโค๊ดที่เกินความจำเป็นให้กับหน้าเว็บเพจของเรามากเกินไป เช่นการกำหนดสไตล์ต่างๆ มักจะกำหนดลงไปที่แท็กแต่ละแท็กไปเลย ที่จริงปัญหานี้เราสามารถแก้ไขได้โดยการเขียน css ควบคุมหน้าเว็บเอง แล้วมากำหนด class ให้กับแท็กต่างๆที่ต้องปรับเปลี่ยน...

ทำความรู้จักกับ HTML

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

ตัวอย่างการสร้างตารางเรียน ตารางสอน แบบไฮไลท์ช่วงเวลาที่กำหนด

ต่อเนื่องจากการใช้ข้อมูลในรูปแบบอาร์เรย์ของ PHP มาสร้างตารางแสดงผลวันเวลาที่มีประชุมในห้องประชุมแต่ละห้อง ( ส่วนแสดงผล แบบระบายสีตามช่วงเวลา ระบบจองห้องประชุม ) นำมาดัดแปลงเป็นตารางแสดงวันเวลาที่มีการอบรม โดยดึงข้อมูลมาจากฐานข้อมูล MySQL ซึ่งมีตัวอย่างโครงสร้างฐานข้อมูล และปรับเปลี่ยนวิธีการเขียนโค๊ดดังตัวอย่างต่อไปนี้

แวะมาทักทาย และขอเกริ่นนำบทความต่อไปที่จะนำมาเผยแพร่เร็วๆนี้

๋ในหัวข้อ ปรับแต่ง Code ให้เป็นมิตรกับ Server ผมได้นำเสนอเกี่ยวกับการเขียนโปรแกรมแบบประหยัดแบนด์วิธในแบบต่างๆ รวมถึงการลดจำนวนครั้งในการคิวรี่ และการสร้าง Template Engine ด้วย Javascript ซึ่งที่ผมให้ความสนใจเป็นพิเศษก็คือ Ajax Template Parser : เรียกใช้งานเทมเพลต CodeIgniter ด้วย Ajax ซึ่งได้แสดงผลการเปรียบเทียบการคืนค่ากลับมายังหน้าเว็บบราวเซอร์ดังภาพตัวอย่างในบทความนั้นแล้ว สำหรับในหัวข้อนี้ยังมีเรื่องที่ผมจะกล่าวถึงอีกสองเรื่องที่ยังไม่มีเวลาได้ลองเขียนโค๊ดทดสอบการทำงาน นั่นก็คือ การสร้างตัวแบ่งหน้าสำหรับแสดงข้อมูลรายการที่มีหลายบรรทัด แบบใช้ Javascript + AJAX ในการตรวจสอบจำนวนข้อมูลที่แสดงอยู่ในหน้าปัจจุบัน และหน้าที่จะต้องเริ่มโหลดข้อมูลชุดใหม่ด้วย AJAX อีกครั้งก่อนจะแสดงผลด้วย Javascript แบบซ่อนและแสดงผลอีกครั้ง สำหรับอีกเรื่องหนึ่งก็คือ การนำ Javascript Template Engine ที่ใช้สำหรับ CodeIgniter มาสาธิตการทำงานแบบเต็มรูปแบบ โดยจะแนะนำวิธีการเรียกใช้งาน ซึ่งไม่ได้มีหลักการอะไรยุ่งยาก เพียงแค่โหลดไฟล์ HTML มาเก็บไว้ในตัวแปร Javascript แล้วก็รอเรียกข้อมูลผ่าน AJAX ด้วย jQuery...

การใช้งานฟังก์ชั่น foreach(), array_walk() และ array_map() กับการทำงานกับอาร์เรย์

สำหรับบทความนี้จะมาสอนเขียน PHP เพื่อวนลูปทำงานตามที่ต้องการด้วยฟังก์ชั่น foreach(), ฟังก์ชั่น array_walk() และฟังก์ชั่น array_map() ซึ่งตัวอย่างนี้จะทำงานร่วมกับข้อมูลที่เป็นอาร์เรย์ ข้อมูลเพิ่มเติมที่เว็บไซต์ php.net foreach() array_walk() array_map() ลองมาดูผลลัพธ์ที่ได้จากการเรียกใช้งานฟังก์ชั่นดูกันก่อนจะลองทำแล็ปเล็กๆท้ายบทความนะครับ <?php $data = array('name' => 'Songchai Saetern', 'age' => '29', 'level' => '1'); echo '<b>ข้อมูลในตัวแปร $data</b><pre>', print_r($data, true), '</pre>'; echo "<pre><b>ตัวอย่างการใช้ forech()</b>"; foreach($data as $key => $value) {     echo "<br/>$key : <input type=\"\" name=\"$key\" value=\"$value\" />"; } echo '</pre>'; echo "<pre><b>ตัวอย่างการใช้ array_walk()</b>"; array_walk($data, function($value, $...

PHP การล็อกอิน กับปัญหา SQL Injection

       หลังจากได้เข้าร่วมอบรม Website Security Monitoring ที่ทางสำนักวิทยบริการและเทคโนโลยีสารสนเทศ ของมหาวิทยาลัยจัดขึ้น ก็ได้ความรู้เรื่องการสร้างระบบล็อกอินเพื่อป้องกันปัญหา SQL Injection มาฝากกับผู้เริ่มต้นทุกท่าน สำหรับการป้องกันนั้นจะมีอยู่หลายวิธี และวิธีหลักที่ใช้กันก็คือ กรองด้วยฟังก์ชั่น mysql_real_escape_string() , mysqli_real_escape_string() , (ดูเพิ่มเติมได้ที่ http://php.net/manual/en/function.mysql-real-escape-string.php ) ในกรณีของ id ที่เป็นตัวเลขล้วน ก็สามารถใช้ (int) วางไว้ข้างหน้าตัวแปรเพื่อป้องกันข้อมูลในหน้าอื่นๆได้เช่นกัน แต่ในตัวอย่างของบทความนี้ จะอธิบายทีละส่วนเพื่อให้เห็นถึงวิธีการต่างๆ ที่จะโยงไปยังเรื่องของการใช้ md5 ในบทความต่อๆไปด้วยครับ จากบทความที่เคยนำเสนอเกี่ยวกับการ สร้างแบบฟอร์มล็อกอิน จะใช้ SQL ในการตรวจสอบข้อมูลแบบเบื้องต้นดังนี้ $sql = "SELECT * FROM tb_user WHERE user_name = '$_POST[username]'            AND user_password = '". $_POST['password'] ."' ";...

การติดตั้ง HMVC สำหรับ CodeIgniter

Step 1. เปิดไปที่หน้าเว็บ codeigniter-modular-extensions-hmvc . ที่แท็ป Downloads จะมีไฟล์สำหรับดาวน์โหลด หรือดาวน์โหลดไฟล์ที่บีบอัดไว้จาก ที่นี่ . (ในตัวอย่างจะเป็นการติดตั้ง HMVC สำหรับ CodeIgniter 2.1.0 ดาวน์โหลดเมื่อวันที่ 20 พ.ค. 2012 แต่ผมลองกับตัวเวอร์ชั่น 2.2 ก็ใช้งานได้) Step 2. คลายซิปไฟล์ที่ดาวน์โหลดแล้วคัดลอกไปไว้ที่โฟลเดอร์ ที่ติดตั้งตั้ง CodeIgniter เอาไว้ (คัดลอกเฉพาะโฟลเดอร์ core และ third_party ไปวางที่โฟลเดอร์ application ของ CodeIgniter โดยวางทับไปได้เลย) Step 3. สร้างโฟลเดอร์ชื่อ modules_core ในโฟลเดอร์ applications เพื่อใช้เก็บไฟล์ของ Module ต่างๆ Step 4. ขั้นตอนต่อไปให้เปิดไฟล์ application/config/config.php แล้วเพิ่มบรรทัดต่อไปนี้ $config['modules_locations'] = array(APPPATH.’modules_core/’ => ‘../modules_core/’,); (ต้องเปลี่ยนเครื่องหมาย ‘ เป็นแบบที่ใช้ในการเขียนโปรแกรมด้วยนะครับ ไม่งั้นจะเกิด error วิธีก็คือ ลบแล้วพิมพ์ลงไปใหม่) ทดสอบการทำงาน     ให้ลองสร้างโฟลเดอร์ใหม่ใน modules_core แล้วตั้งชื่อเป็น...