Published July 18, 2019 by RIT with 0 comment

CARA MENAMPILKAN GAMBAR DARI DATABASE KE MODAL BOOTSTRAP

Assalamualaikum warohmatullohi wabarokatuh.
Wa alaikum salam warohmatullohi wabarokatuh.

Episode ini akan berbagi script koding MENAMPILKAN GAMBAR DARI DATABASE ke modal Bootstrap sesuai dengan id.
-Disaat user klik tombol lihat/tombol detail
-Muncul Pop Up Modal yang berisi infomrasi tentang user yang ingin dilihat


-Buatlah folder didalam htdocs dengan nama modal_bootstrap
-Buatlah 2 file php. index.php dan form_edit_modal.php
-lalu Buatlah folder dengan nama img didalam folder modal_bootstrap
-seperti gambar di bawah ini struktur foldernya

-siapkan gambar atau foto yg bereksitensi PNG atau JPG.
-Dan simpan gambar tersebut kedalam folder img yang telah dibuat tadi
-sehingga seperti gambar di bawah ini.


-buatlah database test.selain itu bebas
-buatlah table pada database seperti gambar di bawah ini.


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
    <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
 
</head>
<body>
 
<?php 
    $koneksi = mysqli_connect('localhost','root','','test'); 
    $query   = "SELECT * FROM user";
    $query2   = mysqli_query($koneksi, $query);
?>
<br>
<br>
<br>
    <table border="1" width="100%">
        <tr>
            <td>id_db</td>
            <td>nama</td>
            <td>operation</td>
        </tr>
    <?php while ($row = mysqli_fetch_array($query2)){ ?>
        <tr>
        <td><?php echo $row['userid']; ?></td>
            <td><?php echo $row['firstname']; ?></td>
            <td>
          <a href="#id<?php echo $row['userid']; ?>" data-toggle="modal" class="btn btn-primary"><span class="glyphicon glyphicon-eye-open"></span> Lihat</a>
      <?php include('form_edit_modal.php'); ?>
        </td>
      </tr>
    <?php } ?>
    </table>
 
</body>
</html>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
  <!-- Modal -->
  <div class="modal fade" id="id<?php echo $id=$row['userid'];  ?>" role="dialog">
          <?php 
            // $koneksi = mysqli_connect('localhost','root','','test'); 
              $q_modal   = "SELECT * FROM user WHERE userid = $id";
              $q_modal2  = mysqli_query($koneksi, $q_modal);
              $row2       = mysqli_fetch_array($q_modal2);
               
          ?>
 
    <div class="modal-dialog">
     
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"><?php echo $row2["firstname"]; ?></h4>
        </div>
        <div class="modal-body">
          <img src="<?php echo $row2['picture']; ?>" width='50%' height='50%'><br>
          id  = <?php echo $row2["userid"]; ?><br>
          nama depan = <?php echo $row2["firstname"]; ?><br>
          nama belakang = <?php echo $row2["lastname"]; ?><br>
          alamat = <?php echo $row2["address"]; ?>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
       
    </div>
  </div>
   
</div>

Dan hasilnya akan seperti gambar dibawah ini.



Muncul modal saat klik tombol lihat.


Terima Kasih.
Thank's.

SOURCE : https://www.sourcecodester.com/php/11629/phpmysqli-crud-operation-bootstrapmodal.html

Tag :
cara oper data pada modal bootstrap | oper data pada modal | menampilkan gambar pada modal | how to passing data to modal in bootstrap |

Baca Juga :
  • LINK 1
  • LINK 2

Read More

, ,

      edit
Published July 16, 2019 by RIT with 0 comment

HOW TO UPDATE/EDIT AJAX IN PHP

CARA INSERT PHP dengan ajax Jquery

Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salam warohmatullohi wabarokatuh.

Di episode sebelumnya memberikan koding cara menampilkan data pada php dengan dengan ajax Jquery,

dan pada episode kali ini akan memberikan kepada pembaca berupa koding edit data pada php dengan menggunakan ajax Jquery,

disaat user ingin mengubah data maka, user klik / menekan tombol edit yang ada pada tabel,

lalu user melihat data yang lama pada kolom input, setelah isi data yang terbaru, user klik tombol simpan / tombl update untuk memperbarui data yang lama atau data yang salah.

berikut script edit data pada php dengan ajax Jquery.


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php 
$koneksi = mysqli_connect('localhost','root','','test'); 
 
$q  = 'SELECT * FROM tb_siswa';
$q2 = mysqli_query($koneksi, $q);
 
?>
 
<table border="1" >
    <tr bgcolor="yellow" align="center">
        <td>NAME</td>
        <td>OPERATION</td>
    </tr>
 
<?php while ( $row = mysqli_fetch_array($q2)) { ?>
    <tr>
        <td><?php echo $row['nama']; ?></td>
        <td><button><a href="update_ajax_form.php?id=<?php echo $row['id']; ?>">edit</a></button></td>
    </tr>
<?php } ?>
 
</table>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php 
$koneksi = mysqli_connect('localhost','root','','test');
$id = $_GET['id'];
$qu = "SELECT * FROM tb_siswa WHERE id='$id'";
$reu =mysqli_query($koneksi, $qu);
$row =mysqli_fetch_array($reu);
?>
<script type="text/javascript" src="jquery.js"></script>
 
<form method='POST' class='formUpdate'>
 
  <input type='text' name="nama" value='<?php echo $row['nama']; ?>'>
  <input type='hidden' name="id" value='<?php echo $row['id']; ?>'>
  <input type='submit'  class='btn_update' value='update'>
 
</form>
 
<script type="text/javascript">
  $(document).ready(function(){
    $(".btn_update").click(function(id){
           var data = $('.formUpdate').serialize();
            $.ajax({
              type: 'POST',
              data: data,
              url: "update_proses.php",
              success: function(){
                location.href="index.php";
              } 
          });       
      });
  });
</script>

?
1
2
3
4
5
6
7
8
9
<?php
$koneksi = mysqli_connect('localhost','root','','test'); 
 
$id   = $_POST['id'];
$nama = $_POST['nama'];
$query    = "UPDATE tb_siswa SET nama='$nama' WHERE id='$id'";
$query2   = mysqli_query($koneksi,$query);
return $query2;
 ?>



berikut hasil dari koding diatas :




pada gambar ini saat user memilih data yg ingin di edit / update, makan akan tampil nama yg ingin di edit atau rubah.



user menambahkan tulisan update di akhir namanya, lalu tekan atau klik tombol update untuk memperbarui datanya



dan hasilnya adalah pada nama yg barusan telah di edit akan bertambah tulisan update sesuai yg di tulis sebelumnya, bisa dilihat pada gambar yg berkotak warna merah


Terima Kasih.
Thank's

BACA JUGA :


TAGS :
CARA UPDATE DAN EDIT DATA DENGAN AJAX JQUERY | CARA UPDATE FORM DENGAN AJAX | SCRIPT UPDATE AJAX PHP | CARA UPDATE AJAX DENGAN JQUERY | CARA UPDATE PHP DENGAN AJAX | CARA AJAX UPDATE DENGAN PHP | CARA AJAX UPDATE DENGAN JQUERY | HOW TO UPDATE PHP WITH AJAX

Read More

, , ,

      edit
Published July 05, 2019 by RIT with 0 comment

HOW TO CREATE DATABASE IN PHPMYADMIN

Assalamualaikum Warohmatullohi wabarokatuh
Wa alaikumsalam warohmatullohi wabarokatuh

CARA MEMBUAT DATABASE DI PHPMYADMIN
 How to create database in php myadmin
Buka XAMPP, bisa lihat disini cara membuka XAMPP nya.
setelah terbuka tampilan nya akan seperti ini.

Klik atau pilih tombol start yang lurus dengan tulisan APACHE dan MYSQL
jika sudah di klik tampilannya akan seperti gambar di bawah ini.

lalu buka browser terserah chrome, mozilla(firefox),dll
dan tulis / ketik alamat localhost/ di bar url ,lalu tekan enter
lalu pilih menu phpMyadmin.
Tampilan akan seperti gambar di bawah ini.

Setelah pilih menu PhpMyadmin maka tampilan akan seperti ini.

lalu pilih atau klik baru seperti di gambar bawah ini. untuk membuat database baru.

isi kan nama database nya, saya memberikan nama db_tutorial
lalu pilih/ klik tombol buat.

setelah pilih dan klik tombol buat, tampilan akan seperti ini,
lalu buat table nya. Bisa anda lihat disini Cara membuat table di database.


Terima Kasih
Thank's

cara membuat database di phpMyadmin | cara membuat database di php myadmin |

cara membuka xampp cara membuat table di database

Read More
      edit
Published July 03, 2019 by RIT with 0 comment

HOW TO LOAD DATA USING AJAX IN PHP

Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salama warohmatullohi wabarokatuh,

cara menampilkan data dari database dengan ajax
load data php with ajax jquery

1 - buatlah file index.php
2 - buat file lagi dengan nama read_proses.php
3 - copy script dibawah ini sesuaikan dengan file index.php dan read_proses.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript" src="jquery.js"></script>
 
    <div class="data_kita">
        <!-- DISINI AKAN MENAMPILKAN DATA DARI DB MYSQL -->
    </div>
 
<script type="text/javascript">
  $(document).ready(function(){
        app = {
            show: function(){
                $(".data_kita").load("read_proses.php",{type: 'view'}, function(response){
                    $('.data_kita').html(response);
                });
            }
        }
        app.show()
 
          });
 
</script>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php 
 
$koneksi = mysqli_connect('localhost','root','','test'); 
$q  = 'SELECT * FROM tb_siswa';
$q2 = mysqli_query($koneksi, $q);
 
?>
 
<table border="1" class="data_kita">
    <tr bgcolor="yellow" align="center">
        <td>id</td>
        <td>NAME</td>
    </tr>
 
<?php while ( $row = mysqli_fetch_array($q2)) { ?>
    <tr>
        <td><?= $row['id']; ?></td>
        <td><?= $row['nama']; ?></td>
    </tr>
 
<?php } ?>
</table>

Terima Kasih
Thank's

TAG TAGS :
cara menampilkan data dari database dengan ajax | menampilkan data dari database | menampilkan data dengan ajax di php | Menampilkan Data dari Database dengan AJAX jQuery | load data with ajax | load data from database without refresh page | ajax retrieve data from database | HOW TO LOAD DATA USING AJAX IN PHP


BACA JUGA :

SOURCE :
https://kursuswebdesign.org/cara-menampilkan-data-dari-database-dengan-ajax-jquery

Read More

, , ,

      edit
Subscribe to: Posts (Atom)