วันจันทร์ที่ 30 มกราคม พ.ศ. 2555

แสดงข้อมูลและแบ่งหน้าข้อมูลจากฐานข้อมูลด้วยDreamweaver (PHP+MySQL)

บทความก่อนหน้านี้ได้สอนท่านใช้โปรแกรมDreamweaver ดึงข้อมูลจากฐานข้อมูลมาแสดง ซึ่งเราได้เลือกข้อมูลทั้งหมดมาแสดง แต่ถ้าหากว่าเรามีข้อมูลที่จัดเก็บไว้มีหลักพันหรือหลักหมื่นเรคคอร์ดแล้วล่ะก็ การเลือกที่จะแสดงข้อมูลทั้งหมดในหนึ่งหน้า คงจะไม่ใช่วิธีที่ดีอย่างแน่นอน เพราะจะทำให้เว็บโหลดช้า ซึ่งขึ้นอยู่กับปริมาณของข้อมูลด้วย และส่งผลต่อการทำSEO เพราะการโหลดของหน้าเว็บใดๆจะต้องไม่เกิน 10 วินาทีครับ ดังนั้นวิธีแก้ปัญหาก็คือ การแบ่งหรือแยกข้อมูลออกเป็นหลายๆหน้าครับ เพื่อช่วยลดเวลาในการโหลดข้อมูล
บทความนี้จึงจะสอนท่านใช้โปรแกรมDreamweaverแสดงข้อมูลและแบ่งหน้าข้อมูลครับ  โดยในอันดับแรกท่านจะต้องกลับไปทำตามขั้นตอนในบทความนี้ก่อนครับ->แสดงข้อมูลจากฐานข้อมูลด้วยDreameweaver ให้ทำตามขั้นตอนลงมาเรื่อยๆจนถึงหน้าต่างตัวเลือกเพื่อแสดงจำนวนข้อมูลดังรูป
ให้เปลี่ยนตัวเลือกเป็นการแสดงข้อมูลแค่ 10 แถวต่อหน้าเท่านั้น ดังรูป
จากนั้นไปที่แท็บ SEVER BEHAVIORS แล้วเลือก Recordset Paging ในส่วนของเมนูย่อย ให้เลือกทั้งหมด โดยคลิกทีละเมนูจนครบ ดังรูป

มันจะสร้างLinkให้เราขึ้นมา 4 Link คือ First( ไปหน้าเริ่มต้น) ,Previous(ไปหน้าก่อนหน้า),Next( ไปหน้าถัดไป),Last( ไปหน้าสุดท้าย)  จากนั้นให้คลิก Hightlight จาก First จนถึง Previous ดังรูป
แล้วไปที่ Show Region แล้วเลือก Show If Not First Page ดังรูปข้างล่าง
จากนั้นทำเหมือนเดิมครับ โดยคลิกHightlightที่ Next จนถึง Last ดังรูป
 แล้วให้เลือก Show Region และเลือก Show If Not Last page ครับ ดังรูป
ต่อไปเราจะให้แสดงข้อมูลอีกนิดหน่อยครับ คือแถวปัจจุบัน แถวสุดท้าย และแถวทั้งหมดครับ โดยไปที่ Display Record Count แล้วเลือกเมนูย่อยทั้งหมด ทีละรายการครับ 

 จะได้ผลลัพธุ์ดังรูปข้างล่าง และให้แทรกข้อความภาษาไทยเข้าไปตามผมได้เลยครับ ดังรูป
 ลองรันโปรแกรมดูครับ จะได้ผลลัพธุ์  ดังรูป

สำหรับวิธีแก้ไขการแสดงผลภาษาไทยให้เปิดไฟล์นี้ในมุมมอง Code แล้วให้แก้ไขโดยพิมพ์คำสั่ง mysql_query(“SET NAMES ‘utf8’”) แทรกเข้าไปให้ไฟล์ pdshow.php ต่อท้ายคำสั่ง mysql_select_db ดังรูป
จะได้ผลลัพธุ์ที่สมบูรณ์ ดังรูป

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

24 ความคิดเห็น :

  1. พี่ครับ จาก ตย. ที่พี่แสดงด้านบน พี่ใช้ tag table ในการรับ ข้อมูล และ repeat ข้อมูลลงมา เป็นแนวดิ่ง

    ผมอยากถามว่า ในกรณีนี้ จะสามารถใช้ tag div ในการรับข้อมูล และ repeat ข้อมูลลงมา เป็นแนวดิ่ง แทน table ได้หรือไม่ครับ

    คำถามผิดพลาดยังไงขออภัยด้วยครับ

    ขอบคุณมากครับ

    ตอบลบ
    คำตอบ
    1. ใช้ tag p แทนดีกว่าครับ เพราะ tag p เอาไว้ใส่เนื้อหา
      ส่วน tag div เอาไว้จัด layout หรือ จัดตำแหน่งการแสดงผลให้แก่เว็บ เช่นให้แสดงในฝั่งซ้ายของหน้าเว็บ
      ดูตัวอย่างข้างล่างครับ
      <div style="float:left;width:250;">
      <p>
      เนื้อหาที่ 1
      </p>
      <p>
      เนื้อหาที่ 2
      </p>
      <p>
      เนื้อหาที่ 3
      </p>
      </div>

      ลบ
    2. โทดทีครับ ที่เข้าใจจุดประสงค์ของคุณผิด
      ความจริงแล้วครับ tag div ใช้แทน table ได้ครับ แต่มันมีปัญหาอยู่ที่ว่ามันไม่มีอิลิเมนท์ภายในเป็นแบบตารางครับ
      ถ้า table ก็จะมี tr (แถว) กับ td(คอลัมน์)
      ดังนั้นเราต้องใช้ css ในการจัด tag div ให้แสดงผลแบบ table เอาเองครับ
      ดูตัวอย่าง -> http://linuxandfriends.com/2009/04/04/how-to-style-div-elements-as-tables/
      นอกจากนั้นยังสามารถใช้ tag ul แทน table ได้ด้วยครับ
      ตัวอย่าง -> http://stackoverflow.com/questions/3400548/how-to-vertically-align-li-elements-in-ul

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

      ลบ
  2. ขอบคุณมากครับ

    **แล้วถ้าเป็นข้อมูลประเภทรูปภาพ (ผมจะดึงข้อมูลลักษณะเป็นหัวข้อข่าว) จะจัดการกับมันยังไงดีครับ

    ตอบลบ
    คำตอบ
    1. หมายถึง คุณใช้วิธีเก็บรูปภาพลงฐานข้อมูลใช่ไหมครับ (ที่กำหนด TYPE เป็น BLOB) ผมไม่แนะนำนะครับ จะทำให้ ฐานข้อมูลบวมได้ครับ

      ผมแนะให้อัพโหลดไปไว้ในโฟลเดอร์รูปภาพดีกว่าครับ และให้เก็บแต่ชื่อของไฟล์เอาไว้ในฐานข้อมูลก็พอ เพื่อเอาไว้ใช้อ้างอิงถึงไฟล์ในโฟลเดอร์รูปภาพของเราได้ครับ

      ดูตัวอย่างได้จากที่นี่ครับ ->http://www.thaicreate.com/community/php-upload-file-mysql-edit-form.html

      ลบ
  3. http://www.game-ded.com/gamethai/page/74

    Link นี้เค้าใช้ หลักการเดียวกับ ตย. ของพี่หรือป่าวครับ

    ตอบลบ
    คำตอบ
    1. คนละแบบกันครับ เขาจะใช้ Tag UI แล้วให้มันแสดงผลทีละรายการลงมา โดยไม่ได้แบ่งเป็นคอลัมน์

      ลบ
    2. ขยายความห่าง ของ แต่ละ li ยังไงเหรอครับ

      ลบ
    3. ใช้ margin ครับ
      เช่น
      li{
      margin:5px; /*ห่าง บน 5px ขวา 5px ล่าง 5px ซ้าย 5px */
      }
      หรือ
      li{
      margin-left:10px ;/*ห่างเฉพาะด้ายซ้าย 10px*/
      }
      หรือ margin-right (ขวา) , margin-top (บน) margin-bottom (ล่าง)

      ลองประยุกต์ดูนะครับ

      ลบ
    4. ขอบคุณมากครับผม ตอนนี้ทำได้แล้วครับ

      ลบ
  4. ถ้าใช้ tag div แทน table มันจะสามารถ repeat ข้อมูลลงมาแบบนี้ได้มั้ยครับ
    ข้อความ 1 ข้อความ 2 ข้อความ 3
    ข้อความ 1 ข้อความ 2 ข้อความ 3
    ข้อความ 1 ข้อความ 2 ข้อความ 3
    ข้อความ 1 ข้อความ 2 ข้อความ 3
    ข้อความ 1 ข้อความ 2 ข้อความ 3
    [<] [page 1][page 2]....[lastpage][>]

    ตอบลบ
    คำตอบ
    1. ได้คับ ดูตามตัวอย่างที่ให้ไปเลยครับ
      http://linuxandfriends.com/2009/04/04/how-to-style-div-elements-as-tables/ ->แบบ 2 คอลัมน์
      http://www.ninenik.com/content.php?arti_id=271 ->แบบ 3 คอลัมน์ และมีความสูงเท่ากัน

      ลองประยุกต์ดูนะครับ

      ลบ
  5. ขอบคุณมาก ๆ เลยครับ ตอนนี้ มีไอเดียแล้วครับผม

    ตอบลบ
  6. หนูมีปัญหาคือว่า หน้าแรกข้อมูลขึ้นปกติ แต่พอคลิกไปหน้าที่สองข้อมูลกลับไม่ขึ้นอ่ะคะ

    ตอบลบ
    คำตอบ
    1. ผมไม่รู้จะตอบยังไงดีครับ ^^'' น่าจะทำผิดขั้นตอนนะครับ

      ลบ
    2. หนูทำตามตัวอย่างทุกอย่างแล้วนะคะ T___T แต่ก็ยังไม่ได้

      ลบ
    3. ลองดูข้อมูลในฐานข้อมูลครับ ว่ามีอยู่กี่แถว
      และดึงมาแสดงในหน้าแรกกี่แถว ถ้าดึงมาแสดงในหน้าแรกหมด หน้าที่สองจะว่างครับ

      ลบ
  7. สามารถเลือกชั้นข้อมูลที่จะแสดงได้ไหมครับเช่น มี10ข้อมูล หน้าแรกแสดงข้องมูลที่5หน้าสองแสดง 6,7,8 อย่างนี้อ่ะครับ

    ตอบลบ
    คำตอบ
    1. หมายถึง ต้องการทำให้สามารถเลือกข้อมูลมาแสดงในหน้าที่เราต้องการเหรอครับ
      เช่น หน้า 1 ต้องการเลือกข้อมูลที่ 1,3,5 มาแสดง
      หน้าที่ 2 ต้องการเลือกข้อมูลที่ 2,6,7,8
      ผมเข้าใจอย่างนี้หรือป่าวครับ

      ลบ
  8. ไม่ระบุชื่อ7 สิงหาคม 2556 10:09

    ขอบคุณมาก ๆ ค่ะ สำหรับความรู้ดี ๆ

    ตอบลบ
    คำตอบ
    1. ด้วยความยินดีครับ ขอบคุณที่แวะมาเยี่ยมเยือนนะครับ ^^

      ลบ
  9. สวัสดีครับ

    คืออยากได้ วิธีทำการสั่งซื้อสินค้า แล้วก็นำข้อมูลกลับไปยัง ดาต้าเบสของเรา

    ส่วนโปรแรมดาต้าเบสของผม ใช้ xampp มีความคิดเห็นอย่างไรโปรดแจ้งให้ทราบด้วยครับ

    ตอบลบ
  10. ไม่ระบุชื่อ6 เมษายน 2560 20:48

    ถ้าจะทำแบบเป็นหน้า 1 2 3 4 5 แทน ได้ไหมอะครับ

    ตอบลบ