ตัวอย่างการสร้าง form แก้ไข หรือ Update ข้อมูลจาก Form

ตาราง User
ID Username Password Email การจัดการ
1 packky 2229999dsf apirawut@gmaaakol Update
2 student2 1122334455 student01@gmail.com Update
3 student2 1010101010 student02@gmail.com Update
24 apirawut 123456789 apirawut@gmail.com Update
25 เอ็กซ์ 123456789 x@gmail.com Update
26 เอ็กซ์ 123456789 x@gmail.com Update
27 เอ็กซ์ 123456789 x@gmail.com Update
28 uhl 55 mm Update
29 dd777 5555 rrrr Update
30 ratdxyci g00dPa$$w0rD sample@email.tst Update
31 5828758 865876 8568756 Update
32 pppppppp 255555 xjxmlkmlxm Update
33 9999999 999999 99oooooo Update


Code ตัวอย่าง

  • 
    <-?php
    $Showdata = "SELECT * FROM tb_ex_update ";     // คำสั่งค้นหาข้อมูลใน ตาราง tb_ex_update
    $ShowdataRS = $Connection->query($Showdata);
    ?>
    
      <div class="jumbotron">
        <p class="lead">ตัวอย่างการดึงข้อมูลจาก Database ออกมาโชว์</p>
          <div class="container">
            <table class="table">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Username</th>
                  <th>Password</th>
                  <th>Email</th>
                </tr>
            </thead>
            <-?php
            while ($row = $ShowdataRS->fetch_assoc()) {
            ?>
                <tr>
                  <th><-?php echo $row['Ex_update_id']; ?></th>
                  <td><-?php echo $row['Username']; ?></td>
                  <td><-?php echo $row['Password']; ?></td>
                  <td><-?php echo $row['Email']; ?></td>
                </tr>
            <-?php }?>
            </table><br>
          </div>
      </div>
                    
                          


ตัวอย่างการแก้ไข หรือ Update ข้อมูลจาก Form
โดย Select ข้อมูลออกมาโชว์ในตาราง เพื่อเลือกข้อมูลที่ต้องการแก้ไข

ให้ลองกรอกข้อมูลลงในฟอร์ม InputForm

จากนั้นระบบจะทำการจัดเก็บข้อมูลที่กรอกลงไปยัง Database ใน PHPMyadmin

แล้วโชว์ข้อมูลออกมาตามตารางที่กำหนดหรือ ตามที่เขียนคำสั่งให้โชว์ข้อมูลไว้

จากนั้นให้ (กด) เลือกที่ปุ่ม ของข้อมูลที่ต้องแก้ไขใน colum (การจัดการ) ดังรูปตัวอย่าง


InputForm

วิธีการสร้าง Form Update ข้อมูลจาก Form

ขั้นตอนที่ 1

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

  •                             
    $servername = "localhost";
    $username = "root";
    $password = " ";  //ให้ใส่รหัสผ่านของ Php myadmin
    $dbname = " ";  //ให้ใส่ชื่อของ Database ที่สร้างไว้
    
    $Connection = new mysqli($servername, $username, $password, $dbname);
    $Connection->set_charset("utf8");
      if ($Connection->connect_error) {
          echo "Connect Failed".$Connection->connect_error;
      }
          echo "Connect Successful";
    
                                


ขั้นตอนที่ 2

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


ขั้นตอนที่ 3

         เป็นการรับค่าที่ส่งมาจาก Form Input จากนั้นจะนำเอาค่าที่รับมาประมวลผลและทำการบันทึกข้อมูลลงไปยังฐานข้อมูล (Database) คลิกที่นี้ เพื่อดูตัวอย่างโค้ดโปรแกรม การใช้คำสั่ง INSERT INTO ในการเพิ่มข้อมูลไปยังฐานข้อมูล   ในขั้นตอนนี้ให้นักเรียนสร้างไฟล์งานและตั้งชื่อว่า Inputprocess.php

  • if (isset($_POST['Button_Save'])) { $Studentname = $_POST["Studentname"]; $Lastname = $_POST["Lastname"]; $Classroom = $_POST['Classroom']; $Statusname = $_POST['Statusname']; $Student = "INSERT INTO tb_student(Firstname,Lastname,Class,Status) VALUES ('$Studentname','$Lastname','$Classroom','$Statusname')"; $studentQR = $Connection->query($Student); if ($studentQR) { echo "<script> alert('---บันทึกข้อมูลสำเร็จ---'); location='Showdata.php';</script>"; }else{ echo "เกิดข้อผิดพลาดในการเพิ่มข้อมูล".$Connection->erron(); } $Connection->close(); }


ขั้นตอนที่ 4

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

         เมื่อดึงข้อมูลออกมาโชว์ที่ตารางในหน้า Form ได้แล้ว ต้องมีการสร้างปุ่ม เพื่อที่จะให้ผู้ใช้งานได้กด Update ข้อมูลใหม่ดังรูปภาพด้ายล่างนี้

         เมื่อสร้างปุ่ม เสร็จแล้วต้องใส่คำสั่งให้ปุ่มสามารถเก็บค่าของ ID ที่เราคลิกเพื่อที่จะต้องการแก้ไขข้อมูล จากนั้นส่งค่า ID ของแถวที่เราคลิกส่งไปประมวลผลยังหน้า Form Update_process.php ตัวอย่างโค้ดด้านล่าง

href="Update_process.php&update_id=<-?=$row['Ex_update_id'];?>"

  • <-?php $Showdata = "SELECT * FROM tb_ex_update "; $ShowdataRS = $Connection->query($Showdata); ?> <div class="jumbotron"> <p class="lead">ตัวอย่างการแก้ไข หรือ Update ข้อมูลจาก Form</p> <div class="container"> <div class="panel panel-info"> <div class="panel panel-heading" align="center">ตาราง User</div> <div class="panel panel-body"> <div class="table-responsive"> <table class="table"> <thead> <!--line คั่นระหว่างหัวข้อกับข้อมูล--> <tr> <th>ID</th> <th>Username</th> <th>Password</th> <th>Email</th> <th>การจัดการ</th> </tr> </thead> <-?php while ($row = $ShowdataRS->fetch_assoc()) { ?> <tr> <th><-?php echo $row['Ex_update_id']; ?></th> //code บรรทัดนี้ให้ลบ - ที่อยู่ด้านหน้า <-?php> ออก <td><-?php echo $row['Username']; ?></td> <td><-?php echo $row['Password']; ?></td> <td><-?php echo $row['Email']; ?></td> <td><a class="btn btn-success btn-sm" href="Update_process.php&update_id=">Update</a></td> //code บรรทัดนี้คือการสร้างปุ่ม Update </tr> <-?php }?> </table><br> </div> </div> </div><!--end class="panel panel-info"--> </div> */ ให้ตรวจเช็คคำสั่งที่เขียนดีๆ นะครับ ว่าเขียนถูกต้องตามหลักการเขียนหรือไม่ เช่น การเปิด-ปิด tag ค่าง ๆ */ ตัวอย่าง code นี้ tag php ผิดเพราะมี ขีด (-) อยู่ที่ด้านหน้าถ้าไม่เอาออกโปรแกรมจะ Error


ขั้นตอนที่ 5

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

         ตัวอย่าง เช่น  ถ้าเราคลิกที่แถวแรก คือ ID 1 Apirawut 123456789 apirawut@gmail.com ปุ่มที่เราเขียนโค้ดไว้ก็จะเก็บค่า ID นี้ส่งไปยัง From Update_process.php

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

if (isset($_GET['update_id']) && $_GET['update_id']!="") { $show_data_update = "SELECT * FROM tb_ex_update WHERE Ex_update_id='".$_GET['update_id']."' "; $updateQR = $Connection->query($show_data_update); if ($updateQR) { $RS = $updateQR->fetch_assoc(); $Update_form_id = $RS['Ex_update_id']; $update_Username = $RS['Username']; $update_Password = $RS['Password']; $update_Email = $RS['Email']; }

         เมื่อ SELECT ข้อมูลออกมาแล้วเพื่อที่จะให้ข้อมูลนั้นโชว์ออกมาทาง ช่อง Input นั้นเราต้องใส่คำสั่ง

value="<-?=$update_Username?>" //ตัวแปรในตัวอย่างนี้จะเอามาจาก ตัวอย่างที่เก็บค่าไว้ตอนที่เรา SELECT ข้อมูลออกมาดังรูปตัวอย่าง

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

if (isset($_POST['Update_data'])) { $Update_data = "UPDATE tb_ex_update SET Username='".$_POST['Username']."', Password='".$_POST['Password']."', Email='".$_POST['Email']."' WHERE Ex_update_id='".$_POST['Update_form_id']."' "; $UpdateQR = $Connection->query($Update_data); if ($UpdateQR) { echo "<script> alert('---Update ข้อมูลสำเร็จ---'); location='Showdata.php';</script>"; } }

คลิกที่นี้ เพื่อดูตัวอย่างโค้ดโปรแกรม การใช้คำสั่ง SELECT และ UPDATE ในการโชว์และแก้ไขข้อมูลใหม่   ในขั้นตอนนี้ให้นักเรียนสร้างไฟล์งานและตั้งชื่อว่า update_process.php

  • //comment เนื่องจากการนำโค้ดมาแสดงผลที่หน้า Form มีข้อจำกัดเรื่องของการเปิด tag php ดังนั้นครูจึงลบ tag php ออกให้นักเรียนตรวจเช็คการเปิด-ปิด tag ให้ละเอียดนะครับ include '..ใส่ที่อยู่ของไฟล์ Connect.php..'; if (isset($_GET['update_id']) && $_GET['update_id']!="") { $show_data_update = "SELECT * FROM tb_ex_update WHERE Ex_update_id='".$_GET['update_id']."' "; $updateQR = $Connection->query($show_data_update); if ($updateQR) { $RS = $updateQR->fetch_assoc(); $Update_form_id = $RS['Ex_update_id']; $update_Username = $RS['Username']; $update_Password = $RS['Password']; $update_Email = $RS['Email']; } } if (isset($_POST['Update_data'])) { $Update_data = "UPDATE tb_ex_update SET Username='".$_POST['Username']."', Password='".$_POST['Password']."', Email='".$_POST['Email']."' WHERE Ex_update_id='".$_POST['Update_form_id']."' "; $UpdateQR = $Connection->query($Update_data); if ($UpdateQR) { echo "<script> alert('---Update ข้อมูลสำเร็จ---'); location='Showdata.php';</script>"; } } <div class="row featurette"> <div class="col-md-4"> <div class="panel panel-primary"> <div class="panel-heading" align="center">UpdateForm</div> <div class="panel-body"> <form class="form-group" method="POST"> <div class="form-row"> <div class="form-group"> <input type="hidden" name="Update_form_id" value="<-?=$Update_form_id?>"> <label for="inputFirstname" class="col-form-label">Username</label> <input type="text" autocomplete="off" name="Username" value="<-?=$update_Username?>" class="form-control" placeholder="Username" required=""> </div> <div class="form-group"> <label for="inputLastname" class="col-form-label">Password</label> <input type="text" autocomplete="off" name="Password" value="<-?=$update_Password?>" class="form-control" placeholder="Password" required=""> </div> <div class="form-group"> <label for="inputStudent_id" class="col-form-label">E-mail</label> <input type="text" autocomplete="off" name="Email" value="<-?=$update_Email?>" class="form-control" placeholder="E-mail" required=""> </div> </div> <center> <button class="btn btn-info btn-sm" name="Update_data" type="submit">OK</button> </center> </form> </div> </div><!--end class="panel panel-primary"--> </div> <div class="col-md-8"> <div class="media-body"> <div class="well well-lg"> <p class="lead">เมื่อกดปุ่ม <button class="btn btn-success btn-sm">Update</button> </p> <p></p> <p></p> <br><br><br><br><br><br><br> <center><a class="btn btn-danger btn-sm" href="Showdata.php">ย้อนกลับ</a></center> </div> </div> </div> </div> <br><br><br><br> <hr class="featurette-divider">