Fadhil Nur Mahardi

Pernahkah kalian kebingungan dalam memanagement project ? dari segi deadline ? status project ? note revisi ? sampai terkadang dibikin widget notes di desktop kalian untuk mengingatnya hahaha. Dan lagi folder htdocs yang sampai menumpuk karena banyak project sampai lupa mana yang paling baru mana yang lama karena banyak revisi.

Hari ini saya akan mengeshare sebuah Aplikasi berbasis web khusus untuk para web developer yakni Sistem Management Project. Dalam hal ini masih saya coba di XAMPP saja. 

Apa sih fungsi Sistem Management Project?

Fitur v0.5 :

• Management Project (nama,status,deadline,notes)
• Reminder / notifikasi (dari h-7 sampai hari h deadline jika status belum selesai)
• .zip backup (backup project berupa zip)

• Extract semua file ke folder yang kamu inginkan di htdocs. 
• Akses via localhost/nama_folder
• Ikuti instruksi install
• Selesai
• Sekarang setiap kalian akses localhost akan otomatis ke redirect

Berikut adalah Codenya :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script>
var i=0;
$(document).ready(function () {
 $('.slidertitle, #slider img').hide();
 showNextImage();
  setInterval('showNextImage()', 3000);
    });
    function showNextImage() {
  i++;
              $('#sliderImage' + i).appendTo('#slider').fadeIn(1100).delay(1100).fadeOut(1100);
     $('#title' + i).appendTo('#slider').fadeIn(1100).delay(1100).fadeOut(1100);
  if(i==3){
   i=0;
  }
    };
</script>
<style type="text/css">
#slider {
 padding:10px 0 10px;
 position:relative;
 width:630px;
 height:310px;
}
#slider img{
 width:630px;
 height:300px;
 position:absolute;
 -webkit-border-radius:5px 5px 5px 5px;
 border-radius:5px;
 -moz-border-radius:5px 5px 5px 5px;
}
.slidertitle{
 width:630px;
 margin-top:265px;
 text-align:center;
 position:absolute;
 padding:10px;
 -webkit-border-radius:0px 0px 5px 5px;
 border-radius:0px 0px 5px 5px;
 -moz-border-radius:5px 5px 5px 5px;
 color:#FFF;
 background-color:rgba(12, 22, 23, 0.50);
}
</style>
<div id="slider">
  
<img id="sliderImage1" 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJcfcAZOAJOd8dkRJXp6bPFZu10YYjkPDmTQlAFpxd0Gyw01X86qMHb6iCx3AGhhnGfx9_izuUy-pJrBzrEvo2dkwp2Az8gE3q940HzxSHPPVQMtsBq2g7uXuUELjwzAMLG8dSt1p-qQ/s1600/Screenshot+(36).png'>
        <div class="slidertitle" id="title1">Sublime Text 3</div>
   
<img id="sliderImage2" 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-avBA1PsQjm5wQ0guh4sqK44RvadUqDk9A7ORTOsJTGLcyepWGCKOU2Lr5Wz8nhQWqnrazfsGmqfKP7YlERdxieGoULDRsfOPWtgODOVQ1X-6yRQD7_VkXbRnU61NFUAB_we0rlFSCg/s1600/Screenshot+(35).png'>
        <div class="slidertitle" id="title2">Zebra Tabel</div>
   
<img id="sliderImage3" 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtGMfEwkQbfbV6hxAwRiidNbldeXY4Iekuff12-nXFaZoQ4how6DLgnX9E7gdItrvJTxuhSDrbcP6fVwAp02K8pSPIMIpRyLViWnHjHHXVTxjDzRUxjU_s89RaZJTqy9TW1d2gbQXG2A/s1600/2.png'>
        <div class="slidertitle" id="title3">phpmyadmin</div>
</div>

Dan Beginilah Hasilnya :

Sekian artikel tentang Cara Membuat Slide Gambar / Slideshow JQuery Simple Semoga bermanfaat untuk agan agan semuanya..

Jangan Lupa Berikan Komentar ya!