Pada saat berselancar di dunia maya terkadang kita menemukan sebuah halaman web yang me-refresh secara otomatis dengan interval waktu tertentu. Fungsi refresh di gunakan untuk membuat “penyegaran” kembali halaman blog ataupun website. Fungsi refresh ini sama dengan fungsi refresh yang ada pada browser internet, perbedaannya yaitu fungsi ini di buat bekerja secara otomatis, yakni pengguna tidak perlu menekan tombol refresh yang ada pada tool bar. Untuk kalangan pebisnis fitur auto refresh ini sangat membantu produktivitas mereka karena dapat mengetahui dengan cepat perubahan-perubahan nilai apa saja yang terjadi pada halaman web yang sedang dikunjungi atau untuk mengetahui apakah ada email yang masuk ke kotak suratnya atau tidak. Untuk dapat melakukan fitur auto refresh ini pada web browser yang kita gunakan ada beberapa cara yang dapat digunakan, yaitu:
Cara nomor 1 biasanya digunakan oleh beberapa blogger atau webmaster untuk meningkatkan jumlah page view atau page load atau mungkin untuk meningkatkan penghasilannya lewat ad (iklan) yang berbasis CPM (Cost Per Impression), pihak blogger akan dibayar oleh pemilik Iklan tergantung jumlah iklan yg dilihat dengan perhitungan page view/page load lewat refresh dari browser pengunjung. Untuk para blogger atau webmaker yang ingin menggunakan fitur ini dapat memasukkan kode HTML seperti di bawah ini: <meta http-equiv=refresh content=5;url=index.php>
Untuk cara nomor 2 biasanya digunakan oleh para pengunjung halaman web tertentu untuk mengetahui perubahan yang terjadi pada halaman web yang sedang dikunjunginya, contohnya untuk situs email client seperti yahoo, gmail, dsb sehingga dapat segera mengetahu jika ada email yang masuk. Cara pada nomor 2 ini dapat kita lakukan dengan cara menambahkan plugin (pengaya) pada web browser yang digunakan. Bagi yang belum punya plugin-nya dapat download disini atau untuk pengguna mozilla dapat download disini. Setelah proses download selesai ekstrak filenya lalu jalankan proses instalasi. Tunggu hingga proses instalasi selesai lalu restart web browser. Buka halaman web apa saja setelah itu klik kanan pada sembarang tempat di halaman web untuk mengatur interval waktu yang diinginkan. Untuk pengguna plugin tambahan pada mozilla setelah me-restart mozilla klik tanda panah kecil disamping icon refresh untuk mengatur interval waktunya atau untuk men-disable interval waktunya.
untuk meload atau menambahkan isi dari suatu halaman lain kedalam halaman kita secara ajax dapat digunakan fungsi load pada jquery misal kita punya 2 halaman a.php dan b.php kita akan meload/memasukkan isi halaman b.php kedalam a.php secara ajax save sebagai a.php <!DOCTYPE html> <html> <head> <style> body{ font-size: 12px; font-family: Arial; } </style> <script src="../jquery-1.4.1.min.js"></script> </head> <body> <b>Successful Response (should be blank):</b> <div id="success"></div> <b>Error Response:</b> <div id="error"></div> <script> $("#success").load("http://localhost/jquery/load/not-heire.php", function(response, status, xhr) { if (status == "error") { var msg = "Sorry but there was an error: "; $("#error").html(msg + xhr.status + " " + xhr.statusText); } }); </script> </body> </html>save sebagai b.php <?php echo "hasil loading"; //echo site_url(); ?>
Kadang kala kita ingin menampilkan suatu informasi update dari database saat itu juga (real time) ke suatu halaman website. Caranya adalah dengan merefresh query ke database setiap beberapa detik secara otomatis untuk menampilkan informasi terbaru. Sebagai contoh penerapannya dalam aplikasi web/ halaman php misalnya:
Untuk menerapkannya dalam halaman web, perlu adanya perintah refresh secara berkala secara otomatis. Namun jika yang merefresh tersebut adalah keseluruhan halaman web dengan loading halaman lagi, maka tentunya akan sangat mengganggu pengunjung, karena halaman yang dilihatnya akan refresh dan loading terus menerus. Nah, supaya user tidak terganggu dengan proses reload content, maka proses reload content halaman dilakukan tanpa berganti halaman. Ada solusi supaya halaman web tidak perlu direfresh setiap saat, yaitu dengan ajax atau dengan cara kedua yaitu dengan merefresh elemen halaman web berupa div. Jadi bagian div saja yang melakukan refresh tiap beberapa detik, tanpa menganggu bagian halaman web lainnya. Informasi maupun query ke database diletakan ke dalam div yang selalu merefresh secara otomatis. Berikut ini script yang digunakan untuk merefresh div [cc lang=”javascript”] <script src=”jquery-latest.js”></script> <script> var refreshId = setInterval(function() { $(‘#responsecontainer’).load(‘oo.php’); }, 1000); </script>[/cc] Penjelasan script:
Script tersebut diletakkan di bagian head halaman php anda. Sedangkan untuk div nya sendiri diletakkan di bagian body. Berikut script lengkapnya dalam halaman php. [cc lang=”php”]<html> <head> <script src=”jquery-latest.js”></script> <script> var refreshId = setInterval(function() { $(‘#responsecontainer’).load(‘oo.php’); }, 1000); </script> </head> <body> <div id=”responsecontainer”> </div> </body> </html> [/cc] Dari script di atas, halaman oo.php akan direfresh tiap 1 detik, jadi jika di halaman oo.php tersebut terdapat query ke database, maka akan dilakukan eksekusi ke database tiap 1 detik. Sehingga update yang terjadi pada database tersebut akan dimunculkan secara realtime. Sedangkan untuk halaman oo.php saya memberikan contoh seperti di bawah ini. Nantinya Anda dapat memasukkan query ke halaman oo.php ini sesuai dengan kebutuhan aplikasi php Anda. [cc lang=”php”] isi akan berubah berdasarkan hasil update … <br/> silahkan ganti tulisan ini beberapa kali dan lihat hasilnya di halaman index.php <br/> tulisan akan berganti secara otomatis begitu anda ganti tulisan dan save <?php //jika menggunakan query //silahkan masukan query mysql anda di sini // ?> [/cc] untuk lebih jelasnya bisa dilihat di video di bawah ini. Saat tulisan pada halaman oo.php diganti/dirubah , maka halaman index.php akan berubah secara otomatis, tanpa harus refresh halaman index.php. Pada video ini hanya demo perubahan secara manual pada halaman oo.php, karena memang tidak saya hubungkan ke databse mysql. Ini untuk memberikan gambaran saja tentang refresh div otomatis secara realtime. Tapi jika di halaman oo.php tersebut anda memasukan query database atau script lainnya, maka akan dieksekusi secara otomatis juga. Silahkan download script ini untuk anda pelajari,
Auto Refresh disini adalah disaat melakukan reload atau loading suatu halaman dilakukan secara otomatis tanpa kita harus melakukan refresh manual. Dalam kesempatan ini saya akan membagikan tutorial Membuat Auto Refresh Menggunakan AngularJs di PHP. Saat kita melakukan input data maka secara otomatis data yang baru dimasukan atau diinput akan menampilkan data yang terupdate. Jadi tanpa harus melakukan refresh browser untuk melihat data yang baru di input. Baiklah bagaimana cara membuat auto refresh menggunakan AngularJs di PHP, yuk simak langkah-langkah berikut ini: Pertama sahabat buat file PHP baru ,lalu ketikkan struktur HTML seperti berikut: <!DOCTYPE html> <html> <head> <title>Auto Refresh Div Content using AngularJS in PHP</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> </head> <body> <div class="container mt-5"> <div class="row"> <div class="col-md-8 offset-md-2"> <h2 class="text-center">Membuat Auto Refresh Dengan AngularJS di PHP</h2> <br /> <div ng-app="myApp" ng-controller="autoRefreshController" class="container" style="width:100%; max-width:600px;"> <div class="alert alert-success alert-dismissible py-3" ng-show="success"> <a href="#" class="close" aria-label="close">×</a> {{ successMessage }} </div> <form method="post" ng-model="form_data" ng-submit="submitForm()"> <div class="form-group"> <label>Input Paket Kursus</label> <input name="kursus" class="form-control" ng-model="form_data.kursus"> </div> <div class="form-group" align="right"> <input type="submit" name="submit" class="btn btn-info" value="Save" /> </div> </form> <div class="list-kursus"> <ul> <li ng-repeat="messageData in messagesData"> {{ messageData.nama_paket }} </li> </ul> </div> </div> </div> </div> </div> </body> </html>Pada syntax diatas saya gunakan Bootstrap agar mudah digunakan , kemudian terdapat form input dan ada tag ul li yang nanti akan menampilkan hasil inputan pada expression {{ messageData.nama_paket }} Kedua yaitu membuat controller, dimana didalamnya terdapat fungsi submitForm() untuk proses tambah data dan fetchData() untuk menampilkan data. <script> var app = angular.module('myApp', []); app.controller('autoRefreshController', function($scope,$interval,$http){ $scope.success = false; $scope.submitForm = function(){ $http({ method:"POST", url:'insert.php', data:$scope.form_data }).success(function(data){ if(data.message != '') { $scope.form_data = null; $scope.success = true; $scope.successMessage = data.message; $interval(function(){ $scope.success = false; }, 1000); } }); }; $scope.fetchData = function(){ $http.get('view_data.php').success(function(data){ $scope.messagesData = data; }); }; $interval(function(){ $scope.fetchData(); }, 1000); }); </script>Pada script diatas ada file proses data serta umtuk menampilkan data ,tapi sebelumnya saya meyetel interval waktu 1000 agar lebih cepat,jika sahabat ingin sedikit lama tinggal diubah saja nilai intervalnya. Langkah selanjutnya membuat code dari file insert.php dan view.php seperti dibawah ini: insert.php <?php // konfigurasi koneksi ke database include("config.php"); $form_data = json_decode(file_get_contents("php://input")); if(!empty($form_data->kursus)) { $data = array( ':kursus' => $form_data->kursus ); $query = " INSERT INTO pkt_kursus (nama_paket) VALUES (:kursus) "; $statement = $connect->prepare($query); if($statement->execute($data)) { $output = array( 'message' => 'Data Berhasil Disimpan' ); echo json_encode($output); } } ?>view_data.php <?php // konfigurasi koneksi ke database include("config.php"); $query = "SELECT * FROM pkt_kursus ORDER BY id_kursus DESC"; $statement = $connect->prepare($query); if($statement->execute()) { while($row = $statement->fetch(PDO::FETCH_ASSOC)) { $data[] = $row; } echo json_encode($data); } ?>Apabila sudah simpan semua file yang sudah diketikkan, sekarang buka pada browser masing-masing dan berikut tampilan yang sudah saya buat:  saya kira cukup dalam pembahasan artikel ini mengenai cara Membuat Auto Refresh Menggunakan AngularJs di PHP. Semoga bermanfaat dan sampai jumpa lagi dengan pembahasan lainnya. selamat mencoba, |
Apa fungsi refresh di php
Pos Terkait
Copyright © 2024 ketiadaan Inc.
