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

ตาราง User
ID Username Password Email การจัดการ
1 123 5555 126 Update
2 asf 5655 boo@gmail.com Update
3 student2 1010101019 student02@gmail.com Update
24 apiraw 123456789 apirawut@gmail.com Update
25 ;;;;;;; 123456786 x@gmail.com Update
26 lll 123456789 x@gmail.com Update
27 hhh55 123456789 x@gmail.com Update
28 too too stpkowy@hotmail.com Update
29 d876 5555 rrrr Update
30 ratdxyci g00dPa$$w0rD sample@email.tst Update
31 5828758 865876 8568756 Update
32 pppppppp 255555 xjxmlkmlxm Update
33 696969 696969 69@69. Update
34 memyzelf ---- zelfy@gmail.com Update
35 qwerqwer weerqwer fgg@gmail.com Update
36 cwfwfwfwfwfwfwfwfw vvvvvvv fgg@gmail.com Update
37 888 fw1 fwfw Update
38 admin fw 11 Update
39 administratorrtret passwordert password@gmail.comtt Update
40 iiiiuuuuyyyy 1234567 nnn@gmail.com Update
41 hi 1515 nknk Update
42 dasf 12345 s.s@h.c Update
43 ฟฆ๐ห กฟหกฟหกฟ ๆห Update
44 Samanwong.B 987 dfgdf Update
45 iiiii gre gfbfbfgb Update
46 111 222 555@gmail.com Update
47 หห กก ำำ Update
48 asd asd asd Update
49 a a a Update
50 test test test Update
51 เกดเกด เกดเกเjuu เดกเก Update
52 า่เ้ีกริ ่รยเ่หพาก หรยนิดกรจ้ กพะ Update
53 iii sdf dsf Update
54 ds sds sds Update
55 oritout L1pnn92#lnN no-reply@seoturbina.ru Update
56 Sprinoritout iwF23!7ypoY adamribson@cleanings.pro Update
57 taxioritout L1pnn92#lnN samara@centrsnab163.ru Update
58 oritout gnJ24ff^6hK no-reply@vape4style.com Update
59 Free Software Downloads !dY9nvq46xN khagankassk@hotmail.com Update
60 taxioritout L1pnn92#lnN samara@centrsnab163.ru Update
61 bbzoritout nzQdyr48%9U bbzmos@gmail.com Update
62 oritout xQg7ju33w^L noreply@hobook.ru Update
63 oritout L1pnn92#lnN no-reply@seoturbina.ru Update
64 oritout L1pnn92#lnN no-reply@seoturbina.ru Update
65 oritout L1pnn92#lnN no-reply@seoturbina.ru Update
66 oritout qf#r6I5e1xE no-reply@akvasos.ru Update
67 Cleanoritoutdasd iwF23!7ypoY maids1@maidsmanhattan.club Update
68 oritout qf#r6I5e1xE efahtiacochi5843@gmail.com Update
69 Cleanoritout iwF23!7ypoY maids1@maidsmanhattan.club Update
70 oritout qf#r6I5e1xE efahtiacochi5843@gmail.com Update
71 ฟฟ ฟฟ 123 Update
72 MMoritout iwF23!7ypoY sanya@prestig-okno.com Update
73 1 A Adghjk Update
74 oritout qf#r6I5e1xE efahtiacochi5843@gmail.com Update
75 Praew 123456789 pok_praew@gmail.com Update
76 ประยุด dd kk 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">