Resume PTI #2 ( Perangkat Keras Komputer )

Posted on by

Perangkat Keras Komputer ( hardware ) adalah semua bagian fisik komputer, dan dibedakan dengan data yang berada di dalamnya atau yang beroperasi di dalamnya, dan dibedakan dengan perangkat lunak (software) yang menyediakan instruksi untuk perangkat keras dalam menyelesaikan tugasnya.

Komputer pada umumnya adalah komputer pribadi (PC) dalam bentuk desktop yang terdiri dari bagian berikut:

  • Papan sistem/papan induk yang merupakan tempat CPU, memori dan bagian lainnya, dan memiliki slot untuk kartu tambahan.
    • RAM – tempat penyimpanan data jangka pendek, sehingga komputer tidak perlu selalu mengakses hard disk untuk mencari data. Jumlah RAM yang lebih besar akan membantu kecepatan PC
    • Buses:
      • Bus PCI
      • Bus ISA
      • USB
      • AGP
    • ROM (Read Only Memory) di mana firmware diletakkan
    • CPU (Central Processing Unit) sebagai otak dan bagian utama komputer
  • Power supply – sebuah kotak yang merupakan tempat transformer, kontrol voltase
  • Pengontrol penyimpanan, dari jenis IDE atau lainnya, yang mengontrol hard disk, Floppy disk, CD-ROM dan drive lainnya. Ini ada yang internal ada juga yang eksternal.
  • Pengontrol penampilan video yang memproduksi output untuk display
  • Pengontrol komputer bus (paralel, serial, USB) untuk menyambung komputer dengan alat tambahan luar lainnya seperti printer atau scanner
  • Beberapa jenis penyimpanan komputer:
    • CD – tipe paling umum media yang dapat dilepas, murah tapi mudah rusak.
      • CD-ROM
      • CD-RW
      • CD-R
    • DVD
      • DVD-ROM
      • DVD-RW
      • DVD-R
    • Floppy disk
    • Falshdisk
    • Multimedia Card
  • Penyimpanan dalam – menyimpan data dalam komputer untuk penggunaan jangka panjang.
    • Hard disk – untuk penyimpanan data jangka panjang
    • Disk array controller
  • Soundcard – untuk output suara melalui speaker, dan memiliki terminal untuk mencolok kabel suara speaker.
  • Jaringan komputer – untuk menghubungkan komputer ke internet dan/atau komputer lainnya.
    • Modem – untuk koneksi tekan-tombol.
    • Kartu network – untuk internet DSL / kabel, atau menghubungkan ke komputer lain.
  • Alat lainnya. Continue reading →

Input Numeric Only

Posted on by

Untuk validasi ketika ngetik di suatu textbox jadi hanya numerik saja yang bisa diinputkan. Ni buat jaga – jaga, kan biasanya di form telepon di suatu pendaftaran online, kadang user yang ngawur di isi aja pake abjad.

function isNumeric ( evt ) {
    var charCode = ( evt.which ) ? evt.which : event.keyCode;
    if ( charCode > 31 && (charCode < 48 || charCode > 57) ) return false;
    return true;
}

<input type=”text” name=”phone” onkeypress=”return isNumeric(event)”>

if ( charCode > 31 && (charCode < 48 || charCode > 57) )

Untuk charCode > 31 dan lainnya itu adalah range suatu karakter entah apa namanya, aku juga lupa :p . Pokonya di antara range itu adalah range untuk tipe data numerik. Kalo masih penasaran coba aja googling tentang hal ini.

onkeypress=”return isNumeric(event)”

Onkeypress menandakan saat kita sedang ngetik di suatu form. Nah pas sedang ngetik, si fungsi isNumeric itu tadi juga sekalian ngecek apakah yang kita input itu numerik atau buka. Kalo bukan ya ndak akan tampil apa – apa, tapi kalo numerik akan muncul sesuai angka yang kita inputkan.

Ya semoga bermanfaat. Terima Kasih.

Countdown Timer Javascript

Posted on by

Hemh,,, mumpung lagi minat posting …
Kali ini aku mau berbagi pengetahuanku tentang javascript, bagi yang udah tau, mohon sarannya ya,,, 😉

Gini, script ini nantinya akan menampilkan Waktu yang berjalan mundur dan akan berhenti jika nilainya 0. Mulai ya …

<div id="show_time"></div>

<script>
var milidetik = 0; // awal mula mili detik dihitung 0 = 9, 1 = 8 ...
var detik = 30; // lama waktu timer
document.getElementById('show_time').value=detik;

function timerCountdown(){
   if (milidetik<=0){
       milidetik = 9;
       detik -= 1 ;
   }

   if (detik <=- 1){
       milidetik = 0;
       detik += 1;
   }else{
       milidetik -= 1;
       document.getElementById('show_time').value = detik+"."+milidetik;
       setTimeout("timerCountdown()",100);
   }
}

timerCountdown();
</script>

Nah, di bagian div nanti akan muncul countdown timernya,,, lumayan gampang kan … silahkan dicoba, semoga bermanfaat.

Resume PTI #1

Posted on by

Kuliah pertama untuk Mata Kuliah Pengenalan Teknologi Informasi ( PTI ) oleh Pak Tikno, kesan pertama yang ada hanyalah ” hemh … banyak banget ketentuannya, rumit …  “.

Tapi, setelah beberapa lama setelah kuliah pertama mulai, suasana KBM yang berbeda dari Mata kuliah lain yang ada.

  1. Mata kuliah ini menuntut kita untuk bermimpi dan mewujudkannya.
  2. Tempat melontarkan ide ide gila ( kreatif & inovatif ) dalam IPTEK
  3. Jika ndak bisa mimpi, Mata kuliah ini bisa jadi inspirasi kita.

Untuk proses KBM nya juga sedikit berbeda, untuk yang ini, teknologi yang dipakai lebih canggih. Kenapa ? Karena, pas pertama presentasi dengan PPT, saya kira delay waktu untuk tiap animasi itu diatur sedemikian rupa. Tapi ternyata tidak, Sang Dosen ( Pak Tikno ) memegang alat kendali untuk Notebooknya. Wahhh … Mantap ! Continue reading →

Expand / Collapse Paragraph

Posted on by

Yaaahhh, daripada nganggur posting iseng2an ah … 🙂

Hemhh,,, kali ini aku mau bahas tentang Toogle Paragraph atau Expand / Collapse Paragaraf, atau bisa juga disebut Paragraf yang kembang kempis … hehehehe …

Pertama buat dulu javascript lalu taruh script ni di bagian head

function toogle(a){
	var b = document.getElementById(a);
	if(!b) return true;
	if(b.style.display == "none"){
		b.style.display = "block";
	}else{
		b.style.display = "none";
	}
	return true;
}

Nah, sekarang kita buat contoh paragrafnya, ni paragraf taruh di bagian body yaaa …

<input onclick="return toogle('paragraf');" type="button" value="lihat full" />
<div id="paragraf" style="display:none;">Hahahaha, ini gua</div>

Keterangannya, onclick=”return toogle(‘paragraf’);” , ini maksudnya kita panggil fungsi javascript:toogle. Nah fungsi toogle tadi mengontrol paragraf yang id nya paragraf . Yang di kontrol yaitu <div id=”paragraf” . Begitu … Udah gitu coba dah di klik button nya, pasti paragrafnya ilang muncul ilang muncul … hehehe kayak Hantu.

Udah ah, sekian …

HTML 5 Video

Posted on by

Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya :

  • section serupa seperti h1-h6.
  • article bisa berupa entri blog atau tulisan konten.
  • aside menyajikan konten pelengkap.
  • header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.
  • footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.
  • dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.
  • yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas, dan elemen terkait berkas multimedia lainnya.

Dan kali ini aku bahas tentang Embed video tanpa flashplayer, cukup pake HTML 5 Tag Element aja! Continue reading →

Make Copy File / Image From Another URL

Posted on by

Kali ini aku mo kasih sebuah code untuk mengcopy image dari URL. Seperti halnya “imageshack.us” menggunakan url untuk mengupload images.

Celakanya cara menguploadnya tidak bisa disamakan dengan upload dari komputer kita yang sangat simple dengan menggunakan syntax :

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile))

lebih rumit memang, karena ini juga terbatas pada aturan hosting masing-masing. Contoh hosting yang gw pakai sekarang tidak bisa menggunakan copying file via syntax copy. Seperti contoh berikut : Continue reading →

Grayscale Image With Javascript

Posted on by
Gambar Asli

Gambar Asli

After

After

function grayscale(image, bPlaceImage)
{
  var myCanvas=document.createElement("canvas");
  var myCanvasContext=myCanvas.getContext("2d");

  var imgWidth=image.width;
  var imgHeight=image.height;
  // You'll get some string error if you fail to specify the dimensions
  myCanvas.width= imgWidth;
  myCanvas.height=imgHeight;
  //  alert(imgWidth);
  myCanvasContext.drawImage(image,0,0);

  // This function cannot be called if the image is not rom the same domain.
  // You'll get security error if you do.
  var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight);

  // This loop gets every pixels on the image and
    for (j=0; j<imageData.height; i++)
    {
      for (i=0; i<imageData.width; j++)
      {
         var index=(i*4)*imageData.width+(j*4);
         var red=imageData.data[index];
         var green=imageData.data[index+1];
         var blue=imageData.data[index+2];
         var alpha=imageData.data[index+3];
         var average=(red+green+blue)/3;
   	    imageData.data[index]=average;
         imageData.data[index+1]=average;
         imageData.data[index+2]=average;
         imageData.data[index+3]=alpha;
       }
     }

    if (bPlaceImage)
	{
	  var myDiv=document.createElement("div");
	     myDiv.appendChild(myCanvas);
	  image.parentNode.appendChild(myCanvas);
	}
	return myCanvas.toDataURL();
  }

The function takes two parameters: an image (from <img> element), which must have been loaded. In this example, I made sure that the image has been loaded by attaching the function call to onload. The other parameter is a flag I added to indicate whether the image should be placed on the html page next to the original image. The function returns an Image object (you can see this being used on the Using Canvas for Mouse Over example below). Continue reading →