javascript

Mengakses Kamera Web dengan JS

9/14/2019 11:03:00 pm

Cara mengakses kamera webcam dari web dengan javascript 


Untuk kali ini kita akan membahas mengenai cara mengakses kamera web dengan bantuan javascript, jadi fitur ini akan berjalan dihalaman website

Mengakses Kamera Web dalam JS
Mengakses Kamera Web dalam JS



Bagaimana caranya ?

OK lansung saja kita mulai.

Source Html




<video id="video"></video>
<canvas id="canvas"></canvas><br>
<button onclick="snap();">Snap</button>


Source Javacript 



var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.oGetUserMedia || navigator.msGetUserMedia;
 
if(navigator.getUserMedia){
 navigator.getUserMedia({video:true}, streamWebCam, throwError);
}
 
function streamWebCam (stream) {
 video.src = window.URL.createObjectURL(stream);
 video.play();
}
 
function throwError (e) {
 alert(e.name);
}
 
function snap () {
 canvas.width = video.clientWidth;
 canvas.height = video.clientHeight;
 context.drawImage(video, 0, 0);
}



Hore.. Done...

Cara Mendeteksi Perangkat yang digunakan dengan Javascript

9/14/2019 09:33:00 pm

Deteksi perangkat dengan menggunakan Javascript

Script ini berguna untuk mengetahui perangkat apa yang sendan kita gunakan. Cara ini cukup simple untuk di praktekkan karena skript (source) kode yang kita berikan bisa di bilang sangat sedikit
Cara Mendeteksi Perangkat yang digunakan dengan Javascript
Cara Mendeteksi Perangkat yang digunakan dengan Javascript


OK langsung saja kita tempur.. wkwkw

Untuk Source Html

<h1 id="platform"></h1>

Untuk Source Javacript
  1. var platform = document.getElementById('platform');
  2.  
  3. if (navigator.userAgent.match(/iPhone/i)) {
  4.  platform.textContent = "Sekarang kamu sedang menggunkan iPhone";
  5. } else if (navigator.userAgent.match(/iPad/i)) {
  6.  platform.textContent = "Sekarang kamu sedang menggunkan iPad";
  7. } else if(screen.width <= 699) {
  8.  platform.textContent = "Sekarang kamu sedang menggunkan Handphone";
  9. } else if(navigator.userAgent.match(/Mac OS X/i)) {
  10.  platform.textContent = "Sekarang kamu sedang menggunkan Mac!!";
  11. } else {
  12.  platform.textContent = "Sekarang kamu sedang menggunkan PC!!";
  13. }

Hore Done .....

Cara Cepat Setting Form Input untuk Angka Saja dengan Javascript

8/18/2019 10:43:00 am

Membuat Input Hanya Dapat Diisi angka saja dengan menggunkan Javascript





Teknik ini merupakan cara yang sering digunakan oleh para programmer untuk membatasi validasi huruf yang berada di textbox agar tidak bisa dipakai. Membuat form input angka di javascript  sangat mudah akan tetapi KITA sering melupakannya karena skripnya yang panjang. 

input hanya angka javascript
textbox hanya bisa diisi angka di html

Membuat inputan di javascript

Untuk Cuplikan hasilnya boleh di coba di bawah ini


Membuat Inputan Hanya Angka Dengan Javascript




Hal yang terbesit 
"kok bisa gitu  ya ??"

Ok langsung aja ini dia

Kodenya :

  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Indianaweb.blogspot</title>
  6.   </head>
  7.   <style>.textbox-angka{padding: 5px 10px;}</style>
  8.   <body>
  9.     <h1>Membuat Inputan Hanya Angka Dengan Javascript</h1>
  10.     <input class="textbox-angka" type="text" name="" value="" placeholder="Silahkan di test disini"  onkeypress="return isNumberKey(event)">
  11.     <script type="text/javascript">
  12.       function isNumberKey(evt) {
  13.           var charCode = (evt.which) ? evt.which : event.keyCode
  14.           if (charCode > 31 && (charCode < 48 || charCode > 57))
  15.           return false;
  16.       }
  17.     </script>
  18.   </body>
  19. </html>

Hore... Done....

Menambah Value Di Dalam Dropdown Dengan Append Child Javascript

8/04/2019 05:23:00 pm

Tutorial Value Di Dalam Dropdown (select-option) Dengan Append Child Javascript.

Append Child merupakan sebuah fungsi yang biasa digunakan untuk menambahkan sebuah value atau nilai ke sebuah variabel. Ok tanpa BASI BASA kita pratekkan cara ini.

Menambah Value Di Dalam Dropdown Dengan Append Child Javascript
Menambah Value Di Dalam Dropdown Dengan Append Child Javascript


Cuplikan Hasilnya





Hal yang terbesit

Gimana itu., kok bisa begitu ??

Kodenya :

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <title></title>
  5. </head>
  6. <body>
  7. <select class="sebab">
  8.   <option class="opsi" value="satu">Data Satu</option>
  9.   <option class="opsi" value="dua">Data Dua</option>
  10.   <option class="opsi" value="tiga">Data Tiga</option>
  11. </select>
  12.  
  13. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  14.  
  15. <script type="text/javascript">
  16.   $(".sebab").change(function(){
  17.     var named     = document.getElementsByClassName("opsi")[1];
  18.     var plusName  = document.createTextNode(" Ditambahkan");
  19.  
  20.     if (named.innerHTML == 'Data Dua') {
  21.         alert('Berhasil Ditambahkan ');
  22.         named.appendChild(plusName);
  23.      }else{
  24.         alert('Data Sudah Ditambahkan');
  25.      }
  26.   });
  27. </script>
  28. </body>
  29. </html>

Hore... Done...

Memisahkan kata dengan explode di javascript

8/04/2019 10:34:00 am

Memotong Kalimat Perkata dengan Method  EXPLODE di Javascript

Explode adalah fungsi yang biasanya di gunakan untuk memotong-motong value atau nilai pada suatu ilmu programing. MAAF JIKA pengertiannya ada yang salah. 

Memisahkan kata dengan explode di javascript
Memisahkan kata dengan explode di javascript



Kodenya :

  1. <script>
  2.  var url = "9 Maret 2019";
  3.  var explode = url.split(' ');
  4.  var namaDomain = explode[0];
  5.  var tipeRequest = explode[1];
  6.  var requestValue = explode[2];
  7.  document.writeln("Depan = " + namaDomain);
  8.  document.writeln("<br>");
  9.  document.writeln("Tengah = " + tipeRequest);
  10.  document.writeln("<br>");
  11.  document.writeln("Belakang    = " + requestValue);
  12. </script>

Hasilnya:



Hore... Done...

Cara Mengurutkan Data Di Dropdown Dengan Javascript

8/04/2019 09:53:00 am

Tips Mengurutkan Data Di Dropdown Dengan Javascript

Ok tanpa BASI BASA keburu di kejar DEADLINE kita langsung aja ke TKP.

Cara Mengurutkan Data Di Dropdown Dengan Javascript
Cara Mengurutkan Data Di Dropdown Dengan Javascript
Dalam kasus ini kita akan mengurutkan data yang berada di dalam option select atau sering disebut dengan dropdown.

Tampilan Normal:

  • Oslo
  • tockholm
  • Helsinki
  • Berlin
  • Rome
  • Madrid

Setelah diurutkan:

  • Oslo
  • tockholm
  • Helsinki
  • Berlin
  • Rome
  • Madrid

Hal yang terbesit

Bagaimana Caranya ya kok bisa begitu ?

Kodenya HTML :

  1. <ul id="id01">
  2.   <li><span>Oslo</span></li>
  3.   <li><span>tockholm</span></li>
  4.   <li><span>Helsinki</span></li>
  5.   <li><span>Berlin</span></li>
  6.   <li><span>Rome</span></li>
  7.   <li><span>Madrid</span></li>
  8. </ul>

Kodenya :

  1. <script  src="https://code.jquery.com/jquery-3.4.1.js"></script>
  2. <script>
  3. $(document).ready(function(){
  4. var list, i, switching, b, shouldSwitch;
  5.    list = document.getElementById("id01");
  6.   switching = true;
  7.   /* Make a loop that will continue until
  8.   no switching has been done: */
  9.   while (switching) {
  10.     // start by saying: no switching is done:
  11.     switching = false;
  12.     b = list.getElementsByTagName("li");
  13.     // Loop through all list-items:
  14.     for (i = 0; i < (b.length - 1); i++) {
  15.       // start by saying there should be no switching:
  16.       shouldSwitch = false;
  17.       /* check if the next item should
  18.       switch place with the current item: */
  19.       if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
  20.         /* if next item is alphabetically
  21.         lower than current item, mark as a switch
  22.         and break the loop: */
  23.         shouldSwitch = true;
  24.         break;
  25.       }
  26.     }
  27.     if (shouldSwitch) {
  28.       /* If a switch has been marked, make the switch
  29.       and mark the switch as done: */
  30.       b[i].parentNode.insertBefore(b[i + 1], b[i]);
  31.       switching = true;
  32.     }
  33.   } 
  34. })
  35. </script>

Hore..... Done...

Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js

8/03/2019 10:48:00 pm

Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js


Kali kita membuat preview file pdf ketika akan di upload ke server menggunakan plugin mengunakan PDF Worker.js, PDF Option.js, PDF.js


Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js
Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js

Langsung saja tanpa pikir panjang di source codenya.

Kodenya :

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <link rel="stylesheet" type="text/css" href="pdf-preview/pdf.style.css">
  6. </head>
  7. <body>
  8. <div id="preview-container">
  9.     <button id="upload-dialog">Pilih PDF</button>
  10.     <input type="file" id="pdf-file" name="pdf" accept="application/pdf" />
  11.     <div id="pdf-loader">Loading Preview ..</div>
  12.     <canvas id="pdf-preview" width="250"></canvas>
  13.     <span id="pdf-name"></span>
  14.     <button id="upload-button">Upload</button>
  15.     <button id="cancel-pdf">Cancel</button>
  16. </div>
  17. <script src="pdf-preview/pdf.js"></script>
  18. <script src="pdf-preview/pdf.worker.js"></script>
  19. <script src="pdf-preview/pdf.option.js"></script>
  20. </body>
  21. </html>


Hasilnya Seperti:

Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js
Tutorial Membuat PDF Preview mengunakan PDF Worker.js, PDF Option.js, PDF.js

Jika masih bingung silahkan download SOURCE CODENYA disini
 Server  [SF] Server  [MF]

Hore.... Done....

Tutorial Membuat PDF Preview mengunakan plugin dari mozilla.github.io

8/03/2019 10:20:00 pm

Tutorial Membuat PDF Preview mengunakan plugin dari mozilla.github.io

Kali kita membuat preview file pdf ketika akan di upload ke server. Ok langsung aja ke tkp


Tutorial Membuat PDF Preview mengunakan plugin dari mozilla.github.io
Tutorial Membuat PDF Preview mengunakan plugin dari mozilla.github.io

Langsung saja tanpa pikir panjang di source codenya

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

Kodenya :

  1. <input type="file" id="myPdf" /><br>
  2. <canvas id="pdfViewer" ></canvas>
  3. <script type="text/javascript">
  4. $(document).ready(function(){
  5.     document.getElementById("myPdf").value = "";
  6. })
  7.     // Loaded via <script> tag, create shortcut to access PDF.js exports.
  8. var pdfjsLib = window['pdfjs-dist/build/pdf'];
  9. // The workerSrc property shall be specified.
  10. pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
  11. $("#myPdf").on("change", function(e){
  12.     var file = e.target.files[0]
  13.     if(file.type == "application/pdf"){
  14.         var fileReader = new FileReader();  
  15.         fileReader.onload = function() {
  16.             var pdfData = new Uint8Array(this.result);
  17.             // Using DocumentInitParameters object to load binary data.
  18.             var loadingTask = pdfjsLib.getDocument({data: pdfData});
  19.             loadingTask.promise.then(function(pdf) {
  20.               console.log('PDF loaded');
  21.  
  22.               // Fetch the first page
  23.               var pageNumber = 1;
  24.               pdf.getPage(pageNumber).then(function(page) {
  25.                 console.log('Page loaded');
  26.  
  27.                 var scale = 0.3;
  28.                 var viewport = page.getViewport({scale: scale});
  29.                 // Prepare canvas using PDF page dimensions
  30.                 var canvas = $("#pdfViewer")[0];
  31.                 var context = canvas.getContext('2d');
  32.                 canvas.height = viewport.height;
  33.                 canvas.width = viewport.width;
  34.                 // Render PDF page into canvas context
  35.                 var renderContext = {
  36.                   canvasContext: context,
  37.                   viewport: viewport
  38.                 };
  39.                 var renderTask = page.render(renderContext);
  40.                 renderTask.promise.then(function () {
  41.                   console.log('Page rendered');
  42.                 });
  43.               });
  44.             }, function (reason) {
  45.               // PDF loading error
  46.               console.error(reason);
  47.             });
  48.         };
  49.         fileReader.readAsArrayBuffer(file);
  50.     }
  51. });
  52. </script>


Hasilnya Seperti

Tutorial Membuat PDF Preview mengunakan plugin dari mozilla.github.io
Jika masih bingung silahkan download SOURCE CODENYA disini
 Server  [SF] Server  [MF]

Hore.... Done....

Cara mengatasi duplikasi atau pengulangan kata di dropdown dengan javascript

7/28/2019 08:41:00 pm

Mengatasi Nilai yang sama di Dropdown atau Select Option HTML  dengan Javascript


Mengatasi duplikasi atau REMOVE DUPLICATE di dropdown ??. Mungkin cukup aneh bagi kita, tapi hal ini biasa sering kita jumpai dan bingung untuk mengatasainya. Ok langsung saja kita praktekkan.


Cara mengatasi duplikasi atau pengulangan kata di dropdown dengan javascript
Cara mengatasi duplikasi atau pengulangan kata di dropdown dengan javascript


Untuk penguunan SKRIPT dibawah pastaikan kita terkoneksi internet, untuk bisa menjalankan JQUERY nya atau, bisa download JQUERY  CDN di internet dulu jika koneksi internet tidak stabil.


Kode Opsi Pertama :

  1. <select class="sub_jenis_group">
  2.         <option class="ini-itu">abc</option>
  3.         <option class="ini-itu">abc</option>
  4.         <option class="ini-itu">bcd</option>
  5.         <option class="ini-itu">xyz</option>
  6.         <option class="ini-itu">bcd</option>
  7.         <option class="ini-itu">xyz</option>
  8.         <option class="ini-itu" value="0">dodo</option>
  9.         <option class="ini-itu">dodo</option>
  10.         <option class="ini-itu" value="1">dodo</option>
  11.         <option class="ini-itu" value="2">dodo</option>
  12.  </select> 
  13.  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  14.  <script type="text/javascript">
  15.   var move = {};
  16.         $(".ini-itu").each(function () {
  17.             if(move[$(this).text()]) {
  18.                 $(this).remove();
  19.                 console.log('Ada yang itu');
  20.             } else {
  21.                 move[$(this).text()] = $(this).val();
  22.                 console.log('Ada yang ini');
  23.             }
  24.         });
  25.     </script>
Jika SCKRIP di atas masih kurang pas boleh di coba cara kedua yang ada di bawah..

Kode Opsi Kedua :

  1. <select class="sub_jenis_group_2">         
  2.   <option id="ginjal_ginjal">abc</option>         
  3.   <option id="ginjal_ginjal">abc</option>         
  4.   <option id="ginjal_ginjal">bcd</option>         
  5.   <option id="ginjal_ginjal">xyz</option>         
  6.   <option id="ginjal_ginjal">bcd</option>        
  7.   <option id="ginjal_ginjal">xyz</option>        
  8.   <option id="ginjal_ginjal" value="0">dodo</option>       
  9.   <option id="ginjal_ginjal">dodo</option>        
  10.   <option id="ginjal_ginjal" value="1">dodo</option>       
  11.   <option id="ginjal_ginjal" value="2">dodo</option>  
  12. </select>     
  13.  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>    
  14.  <script type="text/javascript">  
  15.  var usedNames = {};    
  16.  $("select[class='sub_jenis_group_2'] > option").each(function () { 
  17.  if(usedNames[this.text]) {        
  18.   $(this).remove();     
  19.  } else {       
  20.   usedNames[this.text] = this.value;     
  21.  }   
  22.  });  
  23. </script>
  24.