Upload Gambar MySQL, JQuery dan Ajax

Upload Gambar MySQL, JQuery dan Ajax

upload  

Membuat Upload File dengan Progress bar (PHP, MySQL, AJAX, Bootstrap). Hai sobat SilaenTech, kali ini saya akan membuat sebuah tutorial tentang cara membuat Upload file dengan progress bar, tentu saja menggunakan PHP untuk bahasa pemrogramannya, MySQL sebagai databasenya, AJAX untuk menghandle progress barnya, dan Bootstrap untuk interfacenya biar cantik…

Nanti kita akan membuat file berikut ini sob:

• index.php (untuk tampilan awal, form dan progress bar)
• config.php (koneksi ke database)
• upload.php (proses upload file, menyimpan data ke database)
• upload.js (untuk handle progress bar)

Download Bootstrap

Pertama karena ini menggunakan Bootstrap untuk interfacenya, maka silahkan download dulu Bootstrap di webseite resminya, atau bisa klik disini. Saya masih menggunakan yang versi 3 ya.

Nah, selesai di download maka sobat akan mendapatkan file bootstrap-3.3.7-dist.zip. Silahkan di ekstrak menggunakan winrar/winzip atau sejenisnya, maka sobat akan mendapatkan 3 folder utama, yaitu css, font, dan js.

Masukkan 3 folder tersebut kedalam folder misal dengan nama upload-progressbar, dan masukkan di folder htdocs pada web server localnya (C:\xampp\htdocs\uploadprogressbar), nah jika sudah maka kita lanjutkan ke tahap selanjutnya.

Membuat Database dan Table

Untuk membuat database silahkan masuk ke alamat localhost/phpmyadmin, kemudian buat database baru dengan nama tutorialweb_upload_progressbar, jika sudah masuk ke menu SQL, dan copy paste kode di bawah ini:

CREATE TABLE `files` (
  `id` int(11) NOT NULL,
  `tgl_upload` date NOT NULL,
  `file_name` varchar(50) NOT NULL,
  `file_size` int(20) NOT NULL,
  `file_type` varchar(5) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

sobat akan mendapatkan sebuah tabel dengan nama files.

Untuk database saya rasa cukup, dan kita lanjutkan ke tahap selanjutnya.

Membuat koneksi ke database

Mudah saja sob, silahkan copy paste kode di bawah ini ya, dan simpan dengan nama config.php

<?php
error_reporting(E_ALL ^ (E_NOTICE | E_WARNING));
session_start();

//melakukan koneksi ke database
$conn = new mysqli("localhost", "root", "", "dbgbr");
if ($conn->connect_errno) {
    echo die("Gagal Koneksi Database: " . $conn->connect_error);
}
?>

Silahkan ganti koneksinya sesuai dengan server sobat sendiri ya.

Membuat Halaman index.php (form upload & progress bar)

Untuk halaman index.php tidak banyak yang bisa dijelaskan, silahkan copy paste kode di bawah ini, kemudian simpan dengan nama index.php

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Upload file progress bar dengan PHP dan MySQL">
    <meta name="author" content="fatoni arif">

    <title>Upload File dengan PHP, MySQL dan Bootstrap</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
   
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
   
    <div class="container" style="margin-top:200px;">
        <div class="well text-center">
            <h1>Upload file dengan cepat!</h1>
            <hr>
            <div class="col-md-8 col-md-offset-2">
                <form class="form-inline" method="post" action="">
                    <div class="input-group">
                        <label class="input-group-btn">
                            <span class="btn btn-danger btn-lg">
                                Browse&hellip; <input type="file" id="media" name="media" style="display: none;" required>
                            </span>
                        </label>
                        <input type="text" class="form-control input-lg" size="40" readonly required>
                    </div>
                    <div class="input-group">
                        <input type="submit" class="btn btn-lg btn-primary" value="Start upload">
                    </div>
                </form>
                <br>
                <div class="progress" style="display:none">
                    <div id="progressBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                        <span class="sr-only">0%</span>
                    </div>
                </div>
                <div class="msg alert alert-info text-left" style="display:none"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
   
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/upload.js"></script>
    <script>
    $(function() {
      $(document).on('change', ':file', function() {
        var input = $(this),
            numFiles = input.get(0).files ? input.get(0).files.length : 1,
            label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
        input.trigger('fileselect', [numFiles, label]);
      });

      $(document).ready( function() {
          $(':file').on('fileselect', function(event, numFiles, label) {

              var input = $(this).parents('.input-group').find(':text'),
                  log = numFiles > 1 ? numFiles + ' files selected' : label;

              if( input.length ) {
                  input.val(log);
              } else {
                  if( log ) alert(log);
              }

          });
      });
     
    });
    </script>
</body>
</html>
 

Membuat file upload.php

Oke sob, file upload.php ini gunanya untuk menghandle proses upload mulai dari menyimpan data ke database sampai menyalin file tersebut ke folder files. Dan berikut ini kodenya;

<?php
//memasukkan file config.php
include("config.php");

//mendefinisikan folder upload
define("UPLOAD_DIR", "files/");

if (!empty($_FILES["media"])) {
    $media    = $_FILES["media"];
    $ext    = pathinfo($_FILES["media"]["name"], PATHINFO_EXTENSION);
    $size    = $_FILES["media"]["size"];
    $tgl    = date("Y-m-d");

    if ($media["error"] !== UPLOAD_ERR_OK) {
        echo '<div class="alert alert-warning">Gagal upload file.</div>';
        exit;
    }

    // filename yang aman
    $name = preg_replace("/[^A-Z0-9._-]/i", "_", $media["name"]);

    // mencegah overwrite filename
    $i = 0;
    $parts = pathinfo($name);
    while (file_exists(UPLOAD_DIR . $name)) {
        $i++;
        $name = $parts["filename"] . "-" . $i . "." . $parts["extension"];
    }

    $success = move_uploaded_file($media["tmp_name"], UPLOAD_DIR . $name);
    if ($success) {
        $in = $conn->query("INSERT INTO files(tgl_upload, file_name, file_size, file_type) VALUES('$tgl', '$name', '$size', '$ext')");
        $q = $conn->query("SELECT id FROM files ORDER BY id DESC LIMIT 1");
        $rq = $q->fetch_assoc();
        echo $rq['id'];
        exit;
    }
    chmod(UPLOAD_DIR . $name, 0644);
}
?>

Penjelasan kode sebagian sudah saya masukkan di scriptnya, kalau kurang jelas bisa komentar ya.

Membuat file upload.js

File upload.js ini berfungsi untuk menghandle progress barnya, hingga memunculkan pesan ID terakhir yang masuk ke database, berikut ini script lengkapnya:

$(document).ready(function() {
    $('form').on('submit', function(event){
        event.preventDefault();
        var formData = new FormData($('form')[0]);

        $('.msg').hide();
        $('.progress').show();
       
        $.ajax({
            xhr : function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function(e){
                    if(e.lengthComputable){
                        console.log('Bytes Loaded : ' + e.loaded);
                        console.log('Total Size : ' + e.total);
                        console.log('Persen : ' + (e.loaded / e.total));
                       
                        var percent = Math.round((e.loaded / e.total) * 100);
                       
                        $('#progressBar').attr('aria-valuenow', percent).css('width', percent + '%').text(percent + '%');
                    }
                });
                return xhr;
            },
           
            type : 'POST',
            url : 'upload.php',
            data : formData,
            processData : false,
            contentType : false,
            success : function(response){
                $('form')[0].reset();
                $('.progress').hide();
                $('.msg').show();
                if(response == ""){
                    alert('File gagal di upload');
                }else{
                    var msg = 'File berhasil di upload. ID file = ' + response;
                    $('.msg').html(msg);
                }
            }
        });
    });
});

simpannya di folder js ya sob, beri nama upload.js

Sudah deh selesai. sekarang bisa sobat coba sendiri di rumah.

 sumber : tutorialweb.net

MENAMPILKAN RECORD DATABASE MYSQL DENGAN JTABLE MENGGUNAKAN JAVA ECLIPSE

MENAMPILKAN RECORD DATABASE MYSQL DENGAN JTABLE MENGGUNAKAN JAVA ECLIPSE

MYSQL  

Pada kesempatan ini, saya akan membagi ilmu tentang penggunakan JTabel dengan java Eclipse.
Aktifkan webserver anda, (Saya saat ini menggunakan XAMPP)

Rancang Database :
Nama Database : dbjava
Nama Tabel : tbbarang
Kode | VC | 5
nama | VC | 20
Jenis | VC | 50
Kemudian Isi Record (minimal 5 record data), pada tabel tbbarang
 

• Aktifkan Aplikasi Eclipsi Tentukan : 

JavaProject : PrjKoneksi
Package : paketkoneksi
Jframe : FrmTampilJava

• Hapus ContentPage kemudian tekan tombol [F5]
• Atur Layout Form menjadi Absolute
• Masukkan Sebuah object JscrollPane
• Masukkan object Jtable pada Viewport
• Kemudian Klik Tab Source

Tambahkan class componen berikut ini dibawah package …
import javax.wing.table.DefaultTableModel;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;

Deklarasikan koneksi variabel ke koneksi database setelah public class (namaform) extends JFrame {
    public static Connection Conn;
    public static Statement stat;
    public ResultSet Rs;
    //membuat header table
String header[] = {"Kode Barang","Nama Barang","Jenis Barang"};
static DefaultTableModel tabeLModel;

Pada public (namaform) ketik script berikut ini dibawah dari table = new JTable();

tabeLModel = new DefaultTableModel(null,header);
table.setModel(tabeLModel);
Kemudian ketik script berikut ini dibawah private Jtable table;
public static void TampilData() {
try {
Class.forName("com.mysql.jdbc.Driver");   
Conn = DriverManager.getConnection( "jdbc:mysql://localhost:3306/dbjava", "root", "");
String sql = "select * from tbbarang";
stat = Conn.createStatement();
ResultSet Rs = stat.executeQuery(sql);
while (Rs.next()) {
    Object obj[] = new Object[3];
    obj[0]=Rs.getString(1);
    obj[1]=Rs.getString(2);
    obj[2]=Rs.getString(3);
    tabeLModel.addRow(obj);
}
    Rs.close();
    stat.close();
} catch(Exception e) {
javax.swing.JOptionPane.showMessageDialog(null, "Gagal Koneksi Database "+e);
System.exit(0);
    }
}

Untuk Menampilkan hasil koneksi dalam bentuk Jtable, Cari Script berikut ini : public static void main(String[] args) {
Kemudian tambahkan script berikut ini dibawah penutup Catch {..}
finally
    {
    TampilData();
    }
   

Setelah Script Program Cari Data dan Script Program Update Data selesai ditambahkan, tambahkan library Koneksi Database MySQLdengan cara,

• Pada project java klik kanan JRE System Library [JavaSE-1.8]
• Pilih Bulit Path => Configure BuiltPath
• Pada Kotak dialog Propertis for Package klik tombol Add External JARs yang ada disebelah kiri
• Cari Lokasi File mysql-connector-java-5.1.38-bin, kemudian klik OK => OK

Jalankan program Cari & Edit Data yang baru dirancang (Ctrl + F11)

Multiple Insert Data Dengan jQuery dan PHP

Multiple Insert Data Dengan jQuery dan PHP

PHP  

Aplikasi pembayarannya berbasis web, dan yang membuat menarik adalah metode inputnya yang dinamis. Field-field inputnya bersifat dinamis, dalam artian jumlahnya tidak terbatas. Dimana data yang diinputkan ke dalam database, bisa lebih dari satu data.  Sudah gak sabar untuk membuat metode input seperti input Nilai atau di sebuah program kasih.

Setelah mencari refrensi di web jQuery.com,  Yaitu dengan menggunakan fungsi .append() yang sudah disediakan oleh jQuery. Silahkan baca dokumentasi selengkapnya di jQuery (http://api.jquery.com/append/). Setelah membaca dokumentasinya, kira-kira script yang berhasil saya buat kira-kira seperti di bawah ini :


$(document).ready(function() {
            var nomor = 0;
            $(".tambah").click(function(){
            nomor ++;
                $('#konten').append(
                             '<tr class="baris">'
                         + '<input name="nomor[]" value="'+ nomor +'" type="hidden"></td>'
                         + '<td><input name="kode_barang_'+ nomor +'" type="text"></td>'
                         + '<td><input name="nama_barang_'+ nomor +'" type="text"></td>'
                         + '<td><input name="harga_barang_'+ nomor +'" type="text"></td>'
                         + '<td><input type="button" id="hapus" value="Hapus"></tr>'
                    );
                });
        });


Saya tambahkan sebuah textbox nomor, yang berfungsi untuk menjumlahkan berapa baris yang  dikirimkan, nama textbox ini saya buat array, sehingga penamaannya menjadinomor[]. Sehingga akan lebih mudah menentukan berapa kali perulangan yang akan dilakukan ketika menyimpannya ke dalam database. Untuk tombol tambah data, saya tempatkan pada sebuah link yang saya beri class dengan nama tambah. Dengan fungsi $(‘#konten’).append(), saya menambahkan beberapa field ke dalam tbody dengan id konten.


Jika field yang disiapkan terlalu banyak, maka perlu ditambahkan tombol untuk menghapus. Nah, disini saya fungsi hapusnya, yaitu $(this).parents(“.baris”).remove();. Script selengkapnya kira seperti di bawah ini :

$(document).ready(function() {
            var nomor = 0;
            $(".tambah").click(function(){
            nomor ++;
                $('#konten').append(
                             '<tr class="baris">'
                         + '<input name="nomor[]" value="'+ nomor +'" type="hidden"></td>'
                         + '<td><input name="kode_barang_'+ nomor +'" type="text"></td>'
                         + '<td><input name="nama_barang_'+ nomor +'" type="text"></td>'
                         + '<td><input name="harga_barang_'+ nomor +'" type="text"></td>'
                         + '<td><input type="button" id="hapus" value="Hapus"></tr>'
                    );
                });
                $("#hapus").live('click', function () {
   $(this).parents(".baris").remove();
             });
        });


Dan yang terakhir, script php untuk menyimpannya ke dalam database. Buat sebuah file baru dengan nama simpan.php, disini saya menggunakan foreach sebagai perulangannya, kira-kira script php untuk menyimpannya ke dalam database seperti di bawah ini :


<?php
foreach ($_POST['nomor'] as $i)
{
 /*query insert ke database taruh disini
 mysql_query = "insert into tbl_barang (kd_brng,nm_brng,hrga)
 values('$_POST['kode_barang_'.$i]','$_POST['nama_barang_'.$i]','$_POST['harga_barang_'.$i]')";
 */
 echo '<tr>
 <td>'.$_POST['kode_barang_'.$i].'</td>
 <td>'.$_POST['nama_barang_'.$i].'</td>
 <td>'.$_POST['harga_barang_'.$i].'</td>
 </tr>';
}
?>

 Saya berikan perintah perulangan, agar mudah untuk menentukan berapa kali proses penyimpanan dilakukan ke database sesuai dengan jumlah data yang  dikirimkan dari form. Bagaimana, mudah kan??? Bagi yang belum jelas, di bawah postingan ini silahkan tinggalkan komen kawan-kawan.

 
Selamat meng-coding yo....

Perbedaan MySQL atau MySQLi ?

Perbedaan MySQL atau MySQLi ?

PHP  

MySQL sudah sampai pada php versi 5.5.0, sudah usang dan ke depannya akan dihapus dari internal command php. Jadi bagi anda yang scriptnya coding manual menggunakan database mysql sepertinya sudah harus siap-siap dari sekarang untuk merombak scriptnya memakai MySQLi.

Sebenarnya apa sih perbedaan antara MySQL dengan MySQLi? Pada dasarnya databasenya masih sama dengan SQL dan phpMyAdmin juga masih sama, hanya saja pada MySQLi suport object oriented maupun prosedural. Object oriented nya sendiri sudah build in, jadi tidak perlu untuk membuat class sendiri. Tapi yang menurut saya keren karena MySQLi tidak perlu diinstall, sehingga saat menggunakan hosting gratisan ext nya sudah ada, dan bisa dilihat dari phpinfo. Sedangkan di localhost bisa dilihat di php.ini, di situ sudah ada extension=php_mysqli.dll

Oh iya, trend saat ini, terutama situs-situs besar sudah mulai migrasi ke MariaDB 10, Namun bagi anda penggemar hosting gratisan tentu tidak bisa menginstall MariaDB, jadi MySQLi saya pikir solusi yang tepat. Kelebihan lain dari MySQLi dibandingkan dengan MySQL adalah support prepared statement, yang mana banyak orang menggunakannya untuk menangkal SQL Injection. Untuk prepared statement ini akan saya bahas di lain waktu (gak janji).

Soal proseduralnya, MySQLi sebenarnya tidak berbeda jauh dengan MySQL

MySQL $conect = mysql_connect($host, $user, $pass); 

MySQLi 

$conect = mysqli_connect($host, $user, $pass, $db);

MySQL $user = mysql_query(‘SELECT * FROM `user` WHERE `nama`=”robby”‘, $conect); $data = mysql_fetch_row($user); echo $data[1]; MySQLi  $user = mysqli_query($conect, ‘SELECT * FROM `user` WHERE `nama`=”robby”‘); $data = mysqli_fetch_row($user); echo $data[1]; mysqli_close($conect); MySQL mysql_real_escape_string($nama) MySQLi  mysqli_real_escape_string($conect, $nama)

Untuk bagian yang bersifat fundamental masih sama, seperti:

$user = “root”; $pass = “root”; $host = “localhost”; $db = “mydb”;

semoga tutorial ini bermanfaat buat agan2 semua.