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

maps-google-picker-location

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.

Membuat effect background gambar pada div bergantian di halaman web

Bagaimana cara membuat atribut background pada div bisa bergantian dengan menggunakan css dan jquery atau javascript selama interval tertentu. misal pertama yang muncul background gambar kucing terus kemudian setelah 5 detik gambar gajah dan seterusnya.

cara membuat efek gambar bergantian dengan menggunakan css dan javascript caranya adalah mudah, ikuti contoh kode berikut ini.

kode html :

<[hapus]div class="header"> 
...
<[hapus]/div>

kode javascript :

<[hapus]script> 
 var i = 0;
 var img = new Array( "bg-1.png", "bg-2.png", "bg-3.jpg", "bg-4.jpg", "bg-5.jpg");

function changeBg() {
 $('.header').css("background-image", "url(images/" + img[i] + " )"); 
 i++;

if(i == img.length) {
 i = 0;
 }

setTimeout(changeBg, 5000);
 }

changeBg();
</script>

keterangan . replace [hapus] .

 

Tata cara pemeliharaan sistem (aplikasi, website dll)

Sistem informasi atau aplikasi yang sudah dibangun agar dapat berjalan dengan baik harus di pelihara atau di maintenance dengan alasan yang sudah dijelaskan pada bahasan sebelumnnya. Bahkan mungkin ini sudah menjadi rumus supaya sistem atau aplikasi yang sudah dibangun dapat berjalan tanpa masalah, maka harus ada maintenance, tidak cukup di bangun saja selesai.

Mengingat resiko jika tidak di maintenance atau dipeliharan kemungkinan sewaktu-waktu bisa ada masalah dapat menghambat berjalannya bisnis perusahaan dan mengakibatkan kerugian. Hal ini tentu sangat tidak diharapkan.

Proses cara apa saja yang biasa dilakukan untuk pemeliharaan. Jenis-jenis pemeliharaan ada berbagai macam, seperti pada point-point berikut :

1. Pemeliharaan Korektif
Pemeliharaan korektif adalah bagian pemeliharaan sistem yang tidak begitu tinggi nilainya dan lebih membebani, karena pemeliharaan ini mengkoreksi kesalahan-kesalahan yang ditemukan pada saat sistem berjalan. Umumnya pemeliharaan korektif ini mencakup kondisi penting atau bahaya yang memerlukan tindakan segera. Kemampuan untuk mendiagnosa atau memperbaiki kesalahan atau malfungsi dengan cepat sangatlah berharga bagi perusahaan.

2. Pemeliharaan Adaptif
Pemeliharaan adaptif dilakukan untuk menyesuaikan perubahan dalam lingkungan data atau pemrosesan dan memenuhi persyaratan pemakai baru. Lingkungan tempat sistem beroperasi adalah dinamik, dengan demikian, sistem harus terus merespon perubahan persyaratan pemakai. Misalnya, Undang-Undang Perpajakan yang baru mungkin memerlukan suatu perubahan dalam kalkulasi pembayaran bersih. Umumnya pemeliharaan adatif ini baik dan tidak dapat dihindari.

3. Pemeliharaan Perfektif (Penyempurnaan)
Pemeliharaan penyempurnaan mempertinggi cara kerja atau maintainabilitas (kemampuan untuk dipelihara). Tindakan ini juga memungkinkan sistem untuk memenuhi persyaratan pemakai yang sebelumnya tidak dikenal. Ketika membuat perubahan substansial modul apapun, petugas pemeliharaan juga menggunakan kesempatan untuk meng-upgrade kode, mengganti cabang-cabang yang kadaluwarsa, memperbaiki kecerobohan, dan mengembangkan dokumentasi. Sebagai contoh, kegiatan pemeliharaan ini dapat berbentuk perekayasaan ulang atau restrukturisasi perangkat lunak, penulisan ulang dokumentasi, pengubahan format dan isi laporan, penentuan logika pemrosesan yang lebih efisien, dan pengembangan efisiensi pengoperasian perangkat.

4. Pemeliharaan Preventif
Pemeliharaan Preventif terdiri atas inspeksi periodik dan pemeriksaan sistem untuk mengungkap dan mengantisipasi permasalahan. Karena personil pemeliharaan sistem bekerja dalam sistem ini, mereka seringkali menemukan cacat-cacat (bukan kesalahan yang sebenarnya) yang menandakan permasalahan potensial. Sementara tidak memerlukan tindakan segera, cacat ini bila tidak dikoreksi di tingkat awal, jelas sekali akan mempengaruhi baik fungsi sistem maupun kemampuan untuk memeliharanya dalam waktu dekat.

Sekian pembahasan untuk kali ini, bahasan selengkapnya akan menyusul, semoga bermanfaat… wassalam.

Contoh Excel Untuk Perhitungan AHP (Analitycal Hierarchy Process)

Istilah AHP pada umumnya setiap mahasiswa yang belajar tentang Sistem Pengambilan Keputusan sudah mengetahuinya.

Sekedar untuk mengingatkan saja, Analitycal Hierarchy Process (AHP) Adalah metode untuk memecahkan suatu situasi yang komplek tidak terstruktur kedalam beberapa komponen dalam susunan yang hirarki, dengan memberi nilai subjektif tentang pentingnya setiap variabel secara relatif, dan menetapkan variabel mana yang memiliki prioritas paling tinggi guna mempengaruhi hasil pada situasi tersebut.

Untuk materi lebih jelasnya tentang AHP ini, anda bisa cari lagi di google, sudah banyak bahan materinya.

Disini saya akan memberikan contoh file untuk perhitungan metoda AHP dalam bentuk excel yang mudah untuk dipelajari. silahkan download link berikut. FIle excel nya klik link di bawah.

contoh cara hitung metode ahp

Selain file excel, penulis memiliki contoh aplikasi untuk perhitungan metode AHP dengan menggunakan pemrograman PHP atau web, kasus AHP dalam aplikasi ini adalah untuk menentukan Sekolah yang terbaik. sesuai juga untuk Aplikasi bahan skripsi atau tugas akhir mahasiswa.

Namun untuk aplikasi ini tidak gratis, akan tetapi tidak pake mahal, hanya dengan pulsa 50ribu sebagai ganti untuk biaya kirim via internet dan secangkir kopi, Jika anda berminat ada bisa kontak admin untuk mendapatkannya.

wassalam.

 

Pemeliharaan Sistem di Web atau Aplikasi Perlukah ?

maintenance-web

Sebuah pertanyaan yang akan menentukan sebuah tindakan kedepan pada sebuah sistem web atau aplikasi. Pertanyaan tersebut biasanya di hadapkan kepada pemilik sistem terkait. Jika melihat kebutuhan akan kepentingan sistem karena dianggap vital maka pemeliharaan bisa jadi wajib, atau sebaliknya apabila tidak dianggap vital, maka akan masuk kategori tidak wajib.

Pengertian Pemeliharaan Sistem
Pemeliharaan Sistem adalah suatu kombinasi dari berbagai tindakan yang dilakukan untuk menjaga suatu sistem dalam, atau memperbaikinya sampai, suatu kondisi yang bisa diterima. Pada bulan April 1970 didefinisikan sebuah istilah untuk Teknologi Pemeliharaan yang mencakup pengertian yang lebih luas dari pada pengertian Pemeliharaan diatas. Istilah ini adalah Teroteknologi.

Sistem perlu dipelihara karena beberapa hal, yaitu :
1. Sistem memiliki kesalahan yang dulunya belum terdeteksi, sehingga kesalahan-kesalahan sistem perlu diperbaiki.
2. Sistem mengalami perubahan-perubahan karena permintaan baru dari pemakai sistem.
3. Sistem mengalami perubahan karena perubahan lingkungan luar (perubahan bisnis).
4. Sistem terinfeksi malware aktif
5. Sistem berkas corrupt
6. Perangkat keras melemah.

Bersambung …

Cara Mudah Koneksi PHP dengan Database Postgree

Berikut adalah cara mudah untuk membuat kode koneksi dari program php dengan database Postgree atau Pgsql.

Syaratnya sudah pasti php dan database postgree sudah terpasang.

Bagaimana script kodenya, caranya adalah seperti dibawah ini.

<?php

// connecting, selecting database
// anda harus sesuaikan dbnam, user dan password sesuai dengan setting pada database server anda

$conn_string = “host=127.0.0.1 port=5432 dbname=nama_database user=nama_user password=password_user”;

$connection = pg_connect($conn_string);

if (!$connection) {
print(“Connection Failed”);
exit;
}
else print(“Connection Success”);
?>

Selamat mencoba, semoga bermanfaat, wassalam