Codepedia

Yii Framework

CodeIgniter

Update Article - Kangpepe.com

Menapilka System Opearsi Member Dalam APP Anda

Menapilka System Opearsi Member Dalam APP Anda
Default
kangpepe.com | Anda pasti pernah mengtahui bahwasanya ada member atau user yang mengunjungi sistem informasi anda dengan memantau menggunakan sistem operasi apa yang digunakan seperti Windows, Linux, MacOSx dan lainnya. Nah unuk saat ini kita membuat pelacak untuk sistem operasi terlebih dahulu sebelum melanjutkan member menggunakan browser apa pada pertemuan berikutnya.

# CARA PENERAPAN CODING

Jika anda menggunakan CodeIgniter anda hanya menambahkan function sederhana ini pada controller view yang ada pada framework anda atau pada halaman admin anda, anda dapat meletakan fuction ini ini dimanapun anda inginkan. Copy aja coding dibawah ini :


function getPlatform() {
    $u_agent = $_SERVER['HTTP_USER_AGENT'];
    $platform = 'Unknown';
 
    //Get the platform
    if (preg_match('/linux/i', $u_agent)) {
        $platform = 'linux';
    } elseif (preg_match('/macintosh|mac os x/i', $u_agent)) {
        $platform = 'mac';
    } elseif (preg_match('/windows|win32/i', $u_agent)) {
        $platform = 'windows';
    }
    
    return $platform;
}
 
echo getPlatform();
Sesuaikan penerapan function ini pada sistem aplikasi anda berdasarkan bentuk yang anda inginkan. Funcintion ini biasanya berada pada halaman admin agar melihat sumbr trafik APP anda.

Proses CRUD Tanpa Refresh atau Loading Menggunakan AJAX

Proses CRUD Tanpa Refresh Loading Pada Menggunakan AJAX
Contoh Proses CRUD Tanpa Refresh

kangpepe.com | Pada kesempatan ini saya kembali membuat proses Penyimpanan data atau yang biasa disebut CRUD menggunkana AJAX tanpa melakukan proses Refresh pada brouser, Ini saya praktekan ketika melakukan penemuan saat melakukan registrasi data pada sebuah situs namun kecepatan internet saya sangat tidah stabil nah disini baru lah saya melakukan browsing untuk membuat proses CRUD tanpa loading ini.

# INTRUCTION 

Bagaiman caranya ? nah sekarang saya akan membagikanya pada blogs ini untuk rekan-rekan yang ingin mengetahuinya, namun pada Artikel ini saya hanya memberikan contoh sederhana saja, yuk kita mulai melakukan praktek langsung dalam penerapanya :

# FILE PHP

Anda siapkan 3 file.php dan copy coding dibawah ini pada masing-masing file yang saya buat,siapkan file index.php, ajax.js dan proses.php pada suatu direktori webroot anda.

1. index.php


<h4>AJAX Form</h4>
<div id="loading" style="display:none;"><img src="loading.gif" alt="loading..." /></div>
<div id="result" style="display:none;"></div>
<form id="myForm" method="post" action="proses.php">
    <table>
        <tr>
            <td width="100">NIM</td>
            <td>
                <input name="nim" size="30" type="text" />
            </td>
        </tr>
        <tr>
            <td>Nama</td>
            <td>
                <input name="nama" size="40" type="text" />
            </td>
        </tr>
        <tr>
            <td>Tempat Lahir</td>
            <td>
                <input name="tempat_lahir" size="40" type="text" />
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="Submit" />
                <input type="reset" value="Reset" />
            </td>
        </tr>
    </table>
</form>



2. ajax.js


<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $().ajaxStart(function() {
        $('#loading').show();
        $('#result').hide();
    }).ajaxStop(function() {
        $('#loading').hide();
        $('#result').fadeIn('slow');
    });

    $('#myForm').submit(function() {
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) {
                $('#result').html(data);
            }
        })
        return false;
    });
})
</script>


3.proses.php


<?php
//validasi
if (trim($_POST['nim']) == '') {
    $error[] = '- NIM harus diisi';
}
if (trim($_POST['nama']) == '') {
    $error[] = '- Nama harus diisi';
}
if (trim($_POST['tempat_lahir']) == '') {
    $error[] = '- Tempat Lahir harus diisi';
}
//dan seterusnya

if (isset($error)) {
    echo '<b>Error</b>: <br />'.implode('<br />', $error);
} else {
    /*
    jika data mau dimasukkan ke database,
    maka perintah SQL INSERT bisa ditulis di sini
    */

    $data = '';
    foreach ($_POST as $k => $v) {
        $data .= "$k : $v<br />";
    }

    echo '<b>Form berhasil disubmit. Berikut ini data anda:</b><br />';
    echo $data;
}
die();
?> 



Untuk jquery-1.2.3.min.js dapat anda download versi terbarunya, da disini saya tidak menyediakan file downloadny untuk jquery-1.2.3.min.js, bagi anda yang bergelut dengan Bootstrapt bisa mengopikanya langsung pada directori assets/js/jquery-1.2.3.min.js

Menampilkan Gambar Sebelum Upload Menggunakan JQuery

Example

kangpepe.com | Selam Sejahtera sahabat Kelascoding, kali ini kita akan melakukan experimen dimana sebelum upload gambar dalam server maka sebaiknya kita menampilkanya terlebih dahulu. Dimana pada tutorial kali ini kita memanfaatkan Javascrip dalam melakukan eksperiment ini.

Baiklah untuk codingnya anda kita menggunakan sedikit dari coding javascrip namun padahalaman form inputnya nanti, anda dapat mencocokan dengan coding yang anda buat.

LANGKAH PEMBUATAN

Buat sebuah file index.php pada directori localhost anda

Copy coding dibawah ini dan letakan pada posisi head dalam html anda.


<head>
<script type="text/javascript">
 function fileValidation(){
  var fileInput = document.getElementById('file');
  var filePath = fileInput.value;
  var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
  if(!allowedExtensions.exec(filePath)){
   alert('Please upload file having extensions .jpeg/.jpg/.png/.gif only.');
   fileInput.value = '';
   return false;
  }else{
   //Image preview
   if (fileInput.files && fileInput.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
     document.getElementById('imagePreview').innerHTML = '<img src="'+e.target.result+'"/>';
    };
    reader.readAsDataURL(fileInput.files[0]);
   }
  }
 }
</script>
</head>


Dan selanjutnya masukan coding dibawah ini kedalam area body halaman website anda atau halaman form input sesuai nama file anda lalu simpan perubahan.


<body>
 <table width='37%' border='1'>
  <tr><td>CONTOH UPLOAD FOTO KANGPEPE.COM</td></tr>
  <tr><td><input type="file" id="file" onchange="return fileValidation()"/></td></tr>
  <tr><td><div id="imagePreview"></div></td></tr>
 </table>
</body>


Lalu jalankan project anda pada localhost seperti contoh yang saya buat dengan nama directori http://localhost/kangpepe.com/index.php dan upload gambar yang ingin anda upload pada server anda.

Contoh Upload Data


Demikian tutorial singkat ini kita bahas semoga dapat berjumpa di lain waktu, semoga bermanfaat untuk kita pelajari semua. Aminn Allahhumma Amin.