Gemerlap dunia menyilaukan, namun nan ibarat fata morgana, semakin dikejar semakin jauh, menyibukan, melalaikan, dan lupa kan kemana kita akan pulang.
Sadarkan sebelum telat.
Upload multi file dengan menggunakan zend framework 1
Upload file merupakan salah satu proses di dalam dunia web, berikut merupakan contoh script php untuk upload multi file dengan menggunakan framework zend 1. bagi yang tidak menggunakan framework ini, anda bisa skip.
// init upload file value
$file_1 = ”;
$file_2 = ”;
$file_3 = ”;
$file_4 = ”;
$upload = new Zend_File_Transfer_Adapter_Http();
// Limit the extensions to jpg and png files but use array notation
$upload->addValidator(‘Extension’, false, array(‘png’, ‘jpg’, ‘bmp’, ‘pdf’, ‘zip’, ‘rar’));
$adapter->addValidator(‘Size’, false, 3024000); // limit to 3 Mb
// set dest
$upload->setDestination(APPLICATION_PATH. “/../public/uploads/”);
$files = $upload->getFileInfo();
// init array info name
$arrInfoNames = array();
foreach($files as $file => $fileInfo) {
if ($upload->isUploaded($file)) {
if ($upload->isValid($file)) {
//
$info = $upload->getFileInfo($file);
// jika nama file sama dengan nama sebelumnya
// file akan dianggap sama dengan file sebelumnya
if(!in_array($info[$file][‘name’], $arrInfoNames)) {
// rename
$arrFileName = explode(‘.’,$info[$file][‘name’]);
$file_name = $this->view->SetToURI(
strtolower($arrFileName[0])) . ‘.’ . $arrFileName[1];
$file_name = date(“Ymdhis”) . rand() . “-” . $file_name;
$upload->addFilter(‘Rename’,
APPLICATION_PATH . “/../public/uploads/” . $file_name);
// And then we call receive manually
$upload->receive($file);
// simpan nama file di array info
// untuk pengecekan duplikasi nama file
$arrInfoNames[] = $info[‘name’];
// set value table
if(array_key_exists(‘file_1’, $info))
$file_1 = $file_name;
if(array_key_exists(‘file_2’, $info))
$file_2 = $file_name;
if(array_key_exists(‘file_3’, $info))
$file_3 = $file_name;
if(array_key_exists(‘file_4’, $info))
$file_4 = $file_name;
}
}
}
}
pada contoh di atas, file yang bisa diupload adalah 4 file, jika ingin lebih banyak lagi file yang akan diupload anda bisa edit kode diatas dan tambahkan file uploadnya. wassalam.
Kode untuk melihat direktori dan file di browser dengan PHP
Sekedar untuk pengetahuan dan menambah wawasan koding php anda. berikut adalah contoh script php sederhana untuk melihat direktori dan file di direktori hosting dengan memanggil url di browser.
berinama index.php
<?php
if(isset($_REQUEST[‘dir’])) {
$current_dir = strip_tags($_REQUEST[‘dir’]);
} else {
$current_dir = ‘uploads’;
}
$current_dir = str_replace(“..”, “”, $current_dir);
$current_dir = str_replace(“.”, “”, $current_dir);
if ($handle = opendir($current_dir)) {
$arr_current_dir = explode(“/”, $current_dir);
if(count($arr_current_dir) > 0) {
$arr_prev_path = array();
for($i = 0; $i < count($arr_current_dir) – 1; $i++) {
$arr_prev_path[] = $arr_current_dir[$i];
}
$prev_path = implode(“/”, $arr_prev_path);
echo ($current_dir == “uploads”) ? “” : ‘<[hapus]a href=”index.php?dir=’ . $prev_path . ‘”> … ‘ . “\n</a><br/><br/>”;
}
while (false !== ($file_or_dir = readdir($handle))) {
if(in_array($file_or_dir, array(‘.’, ‘..’))) continue;
$path = $current_dir . ‘/’ . $file_or_dir;
if(is_file($path)) {
echo ‘<[hapus]a href=”/’ . $path . ‘”>’ . “<[hapus]img src=’document-icon.png’/ > ” . $file_or_dir .”\n</a><br/>”;
} else {
echo ‘<[hapus]a href=”index.php?dir=’.$path.'”>’ . “<[hapus]img src=’folder-document-icon.png’/ > ” . $file_or_dir . “\n</a><br/>”;
}
}
closedir($handle);
}
?>
dengan kode tersebut direktori dan isi file bisa dilihat seperti di explorer dan selain itu file yang ada bisa anda download. semoga bermanfaat. wassalam…
Android Cordova – Membuat link url ke halaman sebuah web di android dengan cordova
Berbeda dengan link html biasa, untuk link di android cordova memiliki kode yang unik. setelah mempelajari dan mencari di internet, akhirnya menemukan sebuah script yang berfungsi seperti link di html. adapun scriptnya adalah seperti dibawah ini.
Html
<a href=”https://endangcahyapermana.wordpress.com” />endang</a>
Javascript
// url external script // url external script
$(document).on('mousedown','a', function(e) {
e.preventDefault();
var elem = $(this);
var url = elem.attr('href');
if (url.indexOf('http://') !== -1) {
window.open(url, '_system'); }
});
Kode diatas sudah di coba dan bisa berjalan. wassalam.
Android cordova – Cara menampilkan gambar external atau hosting di pemrograman android
Bagi yang belum mengetahui bagaimana cara memasukan dan menampilkan gambar yang berada di internet ke program android pasti akan mencari di goggle, seperti saya dulu. Namun anda tidak usah lagi pusing disini saya akan memberikan jawabannya.
Menampilkan gambar external di android dengan cordova tidak lah susah. Cukup dengan menambahkan attribut data-rel=’external’ di tag img. Seperti contoh script berikut.
Kode tag img biasa
<[hapus]img src='http://domain.com/images/logo.png' width='100%'/>
Kode tag img untuk di android
<[hapus]img src='http://domain.com/images/logo.png' width='100%' data-rel='external'/>
mudah sekali bukan, dengan demikian gambar yang berada di internet dapat tampil di aplikasi android anda.
semoga bermanfaat wassalam.
Membuat animasi text muncul bergantian dengan effek fade menggunakan css dan jquery
Melanjutkan dari postingan sebelumnya, selanjutnya saya tambahkan effek fade, sehingga terlihat lebih cantik dan menarik. silahkan di pelajari dengan seksama. Jika ingin mencobanya, jangan lupa di sertakan pula file jquerynya, biar bisa berjalan sebagai mana mestinya.
<[hapus]!DOCTYPE html>
<[hapus]html lang="en">
<[hapus]head>
<[hapus]meta charset="UTF-8">
<[hapus]title>Scroller<[hapus]/title>
<[hapus]style>
.scroller{
margin: 50px auto;
width: 300px;
}
.i-scroller{
width: 100%;
}
<[hapus]/style>
<[hapus]script src="js/jquery.min.js"><[hapus]/script>
<[hapus]/head>
<[hapus]body>
<[hapus]div class="scroller">
<[hapus]div class="i-scroller">The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.<[hapus]/div>
<[hapus]div class="i-scroller">Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection — a process known as implicit iteration. When this occurs, it is often unnecessary to explicitly iterate with the .each() method:<[hapus]/div>
<[hapus]div class="i-scroller">Basically we work our way right down to find the elements with the class 'someclass': $('#container a .someclass'), and then from there work our way back up to the enclosing anchor: .parents('a'), which is where the class 'anotherclass' needs to be added.<[hapus]/div>
<[hapus]/div>
<[hapus]script type="text/javascript">
var opacity = 0;
var incOpacity = 1;
var delay = 50;
var i = 0;
var iMax = $(".scroller").children().length;
function changeScroller() {
opacity = 0;
incOpacity = 1;
$('.scroller').css("opacity", opacity);
$(".i-scroller").each(function( index ) {
if(index == i) {
$(this).css("display", "block");
} else {
$(this).css("display", "none");
}
});
i++;
// cek if i = max
if(i == iMax) {
i = 0;
}
fadeIn();
setTimeout(changeScroller, 5000);
}
function fadeIn() {
opacity = incOpacity / delay;
if(incOpacity <[hapus]= delay) {
$('.scroller').css("opacity", opacity);
setTimeout(fadeIn, 100);
incOpacity++;
}
}
changeScroller();
<[hapus]/script>
<[hapus]/body>
<[hapus]/html>
Demikian , wassalam.
Membuat animasi text warna bergantian dengan css dan jquery
Sekedar untuk bermain main mari membuat animasi text warna bergantian menggunakan kode css dan jquery. warna berganti dari div yang satu ke div yang lain. caranya mudah copas kode dibawah dan silahkan coba modif sesuai dengan kebutuhan sobat-sobat sadaya. jangan lupa text ‘[hapus]’ nya dihilangkan dulu biar jalan.
<[hapus]!DOCTYPE html>
<[hapus]html lang="en">
<[hapus]head>
<[hapus]meta charset="UTF-8">
<[hapus]title>Scroller<[hapus]/title>
<[hapus]style>
.scroller{
margin: 50px auto;
width: 300px;
}
.i-scroller{
width: 100%;
}
<[hapus]/style>
<[hapus]script src="js/jquery.min.js"><[hapus]/script>
<[hapus]/head>
<[hapus]body>
<[hapus]div class="scroller">
<[hapus]div class="i-scroller">Helo 1<[hapus]/div>
<[hapus]div class="i-scroller">Helo 2<[hapus]/div>
<[hapus]div class="i-scroller">Helo 3<[hapus]/div>
<[hapus]div class="i-scroller">Helo 4<[hapus]/div>
<[hapus]/div>
<[hapus]script type="text/javascript">
var i = 0;
var iMax = $(".scroller").children().length;
function changeScroller() {
$(".i-scroller").each(function( index ) {
if(index == i) {
$(this).css("color", "red");
$(this).css("display", "block");
} else {
$(this).css("color", "black");
$(this).css("display", "none");
}
});
i++;
// cek if i = max
if(i == iMax) {
i = 0;
}
setTimeout(changeScroller, 5000);
}
changeScroller();
<[hapus]/script>
<[hapus]/body>
<[hapus]/html>
Membuat Animasi Fade Pada Div Dengan Gambar Bergantian
Pada tulisan sebelumnya sudah di tayangkan mengenai kode untuk membuat gambar tampil bergantian. Selanjutnya akan di jelaskan bagaimana caranya menambahkan effek fade pada saat awal gambar tersebut muncul, sehingga terlihat lebih smooth setiap kali ganti gambar.
Kode HTML
<[hapus]div class="header"></div>
Kode Javascript
<[hapus]script>
var i = 0;
// inisialisasi gambar
var img = new Array(
"bg-1.png",
"bi2.jpg",
"bi3.jpg",
"bi4.jpg");
var opacity = 0;
var incOpacity = 1;
var delay = 100;
// fungsi ganti gambar
function changeBg() {
opacity = 0;
incOpacity = 1;
$('.header').css("opacity", opacity);
$('.header').css("background-image", "url(images/" + img[i] + " )");
i++;
// cek if i = max
if(i == img.length) {
i = 0;
}
fadeIn();
setTimeout(changeBg, 10000);
}
// fungsi effek fade
function fadeIn() {
opacity = incOpacity / delay;
if(incOpacity <[hapus]= delay) {
$('.header').css("opacity", opacity);
setTimeout(fadeIn, 100);
incOpacity++;
}
}
// inisialisai fungsi gambar
changeBg();
</script>
sekian semoga tulisan ini ada manfaat. terimakasih, wassalam.
Cara sederhana membuat div berada di bawah kanan browser dengan css
Untuk membuat posisi div ingin berada di bawah kanan pada browser caranya tidak sulit. contoh kodenya adalah sebagai berikut :
<!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">
<title>Css Position Fixed Bottom</title>
<style>
.nav-fixed {
background: #FF5722;
position: fixed;
bottom: 0;
right: 0;
padding: 8px 15px;
margin-right: 5px;
color: #fff;
}
.nav-fixed-radius {
border-radius: 4px 4px 0 0;
}
</style>
</head>
<body>
</body>
</html>
Jika dilihat pada contoh kode di atas, Kunci attribut yang di pergunakan agar porsisi div dibawah adalah pada atribut position : fixed, bottom: 0, dan right: 0.
silahkan coba sendiri untuk ber eksperimen. wassalam.
Mengambil Latitude Longitude di Google Map
Bagaimana cara untuk mengambil posisi Latitude Longitude di Google Map dan memasukan nya ke form input ketika mouse di klik pada sebuat titik di map google. Berikut adalah kode untuk melakukan hal itu.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Location Picker Marker</title>
<style type="text/css">
#map {
margin: 10px;
width: 600px;
height: 300px;
padding: 10px;
}
</style>
</head>
<body>
<table>
<form>
<tr>
<td>Latitude</td>
<td> <input type="text" name='latitude' id='latitude'></td>
</tr>
<tr>
<td>Longitude</td>
<td><input type="text" name='longitude' id='longitude'></td>
</tr>
</form>
</table>
var map;
function initMap() {
var opts = { 'center': new google.maps.LatLng(-6.952928, 107.638431), 'zoom': 12, 'mapTypeId': google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById('map'), opts);
google.maps.event.addListener(map,'click',function(event) {
document.getElementById('latitude').value = event.latLng.lat();
document.getElementById('longitude').value = event.latLng.lng();
});
}
google.maps.event.addDomListener(window, 'load', init_map);
https://maps.googleapis.com/maps/api/js?key=MAP_KEY&callback=initMap
</body>
</html>
Mudah dan sederhana silahkan anda kembangkan sesuai dengan kebutuhan anda. semoga bermanfaat, wassalam.
