Published June 20, 2020 by RIT with 0 comment

CARA MENAMPILKAN DATA DARI DATABASE MICROSOFT ACCESS


Assalamualaikum warohmatullohi wabarokatuh.
Wa alaikum salam warohmatullohi wabarokatuh.

Terima kasih telah berkunjung di media pembelajaran bahasa program online langsungkoding.blogspot.com ,

This is post writing only in my blog and my solved problem when building website.
and now, my problem on DISPLAYING DATA FROM MICROFSOFT ACCESS WITH PHP, I Have, this is script from my brain hehehe :) just kidding, I Have code when I trying code in query SELECT with clause WHERE, this is above code :




?
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
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>USERID</th>
            <th>JAM</th>
        </tr>
    </thead>
    <tbody>
        <?php
        $koneksi = odbc_connect("absen", "" , ""); // koneksi database
 
        $am = 1;
        function abc($am){
            global $koneksi;
            $query2 = ' WHERE USERID='.$am;
            $query = 'SELECT CHECKTIME, CHECKTYPE, USERID FROM checkinout '.$query2;
            return odbc_exec($koneksi, $query);
        }
        $a = abc($am);
        while ($data = odbc_fetch_array($a)){ 
        ?>
          <tr>
              <td><?php echo $data['USERID']; ?></td>
              <td><?php echo $data['CHECKTIME']; ?></td>
          </tr>
        <?php } ?>
     </tbody>
</table>

Thank's
Terima Kasih.

Tag :
Microsoft Access | Database Microsoft Access | Microsfot Access With PHP| How to SELECT data From Microsfot Access With PHP | HOW TO SELECT data With Clause WHERE in Microsoft Access | HOW TO DISPLAY DATA from Microsoft Access | SELECT data From Microsoft Access in PHP | cara menampilkan data dari Microsoft Access dengan php | script SELECT data pada Microsoft Access | Script SELECT data dengan Microsoft Access menggunakan PHP



Read More

      edit
Published June 10, 2020 by RIT with 0 comment

CARA MENAMPILKAN GAMBAR KE MODAL DENGAN JQUERY

Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salam warohmatullohi wabarokatuh,

cara menampilkan gambar ke modal dengan jquery

Tampilan awal


Tampilan setelah menekan tombol nya

di episode ini langsungkoding.blogspot.com akan berbagi cara menampilkan gambar ke modal dengan jquery, disini langsungkoding.blogspot.com menggunakan bootstrap framework css, dan library jquery. langsung saja kode nya di bawah ini, tinggal copypaste  



?
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
    <head>
    <title> parse gambar</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </head>
 
   <body>
 
      <p>tekan gambar atau tombol untuk menampilkan gambar ke modal</p>
      <a class="btn btn-warning" id="tombol_klik" data-toggle="modal" data-target="#modalGambar" data-gmbr='user-langsungkoding.blogspot.com.png'>klik saya</a>
      <br><br>
      <img src="user-langsungkoding.blogspot.com.png" width="100px">
 
   </body>
 
</html>
 
<!-- modal -->
<div class="modal fade" id="modalGambar" role="dialog">
  <div class="modal-dialog">
 
    <form method="post" action="change-goal">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Menampilkan gambar ke modal</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <img id="parse-src">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
        </div>
      </div>
    </form>
  </div>
</div>
<!-- end modal -->
 
<script>
 $(document).ready(function() {
    $("#tombol_klik").click(function(e) {
       e.preventDefault();
       var gmbr = $(this).attr('data-gmbr');
        
       $('#parse-src').attr('src',gmbr);
       $('#parse-src').attr('width','100px');
 
       $("#modalGambar").modal();
    });
 });
 
</script>

Terima Kasih
Thank's

TAG TAGS :
cara menampilkan gambar ke modal | cara oper nilai img ke modal | how to add atribut src with jquery | how to parse img to modal bootstrap | bootstrap | jquery


BACA JUGA :


Read More

,

      edit
Published May 12, 2020 by RIT with 0 comment

PENCARIAN DATA DENGAN PHP DAN DATABASE BAGIAN KE 2

Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salam warohmatullohi wabarokatuh,

cara membuat kotak pencarian dengan ajax dengan php dari database
live searching with ajax jquery



pada postingan sebelumnya adalah menampilkan data dengan dengan user memasukkan kata atau kalimat ke dalam kolom maka akan tampil data yg dicari, untuk postingan kali ini kita menambahkn 4 kolom yaitu : id, name, username,email. Saat user memasukkan kata, program menampilkan isi data dari database seperti postingan sebelumnya, namun setelah menampilkan data, saat user klik data yg di inginkan, maka kolom yg yg kosong akan terisi otomatis. 


pertama-tama buat lah table dengan nama users, dengan strutur seperti gambar di bawah ini



0 - download dulu plugin jquery ui (isi nya jquery.ui.css dan jquery.ui.js) di sini scroll hingga kebawah lalu tekan tombol download.
1 - letakkan jquery ui yg telah didownload folder dalam satu folder.
2 - buatlah file index.php
3 - buat file lagi dengan nama cari_proses.php
4 - copy script dibawah ini sesuaikan dengan file index.php dan cari_proses.php

?
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!doctype html>
<html>
<head>
    <title>Langsung Koding</title>
     
    <!-- jQuery -->
    <script src='jquery.min.js' type='text/javascript'></script>
 
    <!-- jQuery UI -->
    <link href='jquery-ui.min.css' rel='stylesheet' type='text/css'>
    <script src='jquery-ui.min.js' type='text/javascript'></script>
     
</head>
<body>
 
    Nama : 
    <input type='text' class='nama_user'> <br><br>
 
    Id     :
    <input type='text' class='id_user'> <br><br>
            
    Email:
    <input type='text' class='email_user'><br><br>
 
    Username :
    <input type='text' class='username'><br><br>
 
</body>
</html>
    <!-- Script -->
<script type='text/javascript' >
    $( function() {
   
        $( ".nama_user" ).autocomplete({
            source: function( request, response ) {
                 
                $.ajax({
                    url: "fetchData.php",
                    type: 'post',
                    dataType: "json",
                    data: {
                        cari: request.term
                    },
                    success: function( data ) {
                        response( data );
                    }
                });
            },
            select: function (event, ui) {
                $('.nama_user').val(ui.item.label); // menampilkan data dari inputan
                $('.id_user').val(ui.item.isi_id); // menyimpan id yg telah terpilih sesuai dengan
                $('.email_user').val(ui.item.isi_email);
                $('.username').val(ui.item.isi_username);
                 
                return false;
            }
        });
    });
 
    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }
 
</script>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php 
 
include "koneksi.php";
 
if(isset($_POST['cari'])){
    $cari = $_POST['cari'];
 
    $query = "SELECT * FROM users WHERE name like'%".$cari."%'";
    $result = mysqli_query($con,$query);
     
    while($row = mysqli_fetch_array($result) ){
        $response[] = array(
                             
                            "label"=>$row['name'],
                            "isi_id"=>$row['id'],
                            "isi_email"=>$row['email'],
                            "isi_username"=>$row['username']
                            );
    }
 
    echo json_encode($response);
}
 
exit;

setelah user klik nama yg diinginkan maka kolom yang yang kosong akan terisi otomatis


Terima Kasih
Thank's

TAG TAGS :
cara membuat kotak pencarian data dari database dengan ajax | cara pencarian dengan ajax php dan mysqli | kotak pencarian data dengan ajax di php | pencarian Data dengan table dari Database dengan AJAX jQuery | PENCARIAN DATA DENGAN AJAX PHP DAN DATABASE BAGIAN KE 2 | AUTOMPELETE WITH JQUERY UI | HOW TO AUTOCOMPLETE DATA JQUERY |


BACA JUGA :


Read More

,

      edit
Published May 05, 2020 by RIT with 0 comment

HOW TO DISPLAY MODAL IN BULMA


Assalamualaikum warohmatullohi wabarokatuh.
Wa alaikum salam warohmatullohi wabarokatuh.

Terima kasih telah berkunjung di media pembelajaran bahasa program online langsungkoding.blogspot.com ,

This is post writing only in my blog and my solved problem when building website.
and now, my problem on modal with framework bulma, because in doc web bulma I do not Understand :) hehehe, at last, I Have code from stackoverflow and google, this is above code :


?
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<button class="button is-success has-background-primary" id="open_modal"> OPEN MY MODAL </button>
 
<div id="myModal584" class ="modal">
  <div class = "modal-background"></div>
  <div class = "modal-content">
    <div class="box has-background-primary">
      <section class="hero">
      <h1 id='jdl_a' class=" title has-text-centered"></h1>
        <div class="hero-body has-background-light ">
          <div class="container">
 
                <form method='post' class="">
                  <div class='hiddden' >
                      <div class="field">
                        <label for="" class="label">Your Name :</label>
                          <input type="text" class="input" >
                          <div id="results" ></div>
                          <input type="hidden" class="input">
                      </div>
                      <div class="field">
                        <label for="" class="label">Your Address :</label>
                          <input type="text" class="input" >
                      </div>
                      <div class="field">
                        <button class="button is-success has-background-danger " id="close_modal">
                          Close
                        </button>
                      </div>
                  </div> 
                </form>
 
          </div>
        </div>
      </section>
    </div>
  </div>
</div>
 
<script type="text/javascript">
$(document).ready(function() {
        $("#open_modal").click(function(e) {
            e.preventDefault();
            $("#myModal").addClass("is-active");
          });
        $("#close_modal").click(function(e) {
            e.preventDefault();
            $("#myModal").removeClass("is-active");
          });
      });
</script>

Thank's
Terima Kasih.

Tag :
Bulma css | Framework css | Modal in bulma| How to open modal in bulma | open modal in bulma | HOW TO DISPLAY MODAL IN BULMA | open modal with jquery | cara membuka modal pada bulma | cara modal pada bulma | cara membuat modal pada bulma


Read More

      edit
Subscribe to: Posts (Atom)