Pages

Sabtu, 30 Juni 2012

Website Pencari Jalur Angkot dan Jalur Busway

Website Pencari Jalur Busway. http://carijalurbusway.web44.net

Website Pencari Jalur Angkot. http://tanyaangkot.16mb.com



Untuk membahas website tersebut bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawah artikel ini ^_^

Website Pencari Jalur Angkot

Website Pencari Jalur Angkot.

Pada artikel ini Anda akan mendapatkan URL Website yang menyediakan Jasa Pencarian Jalur Angkutan Umum.


http://tanyaangkot.16mb.com/index.php


Kunjungi website tersebut lalu isi nama, email dan pertanyaan jalur. Kemudian Anda akan mendapatkan email konfirmasi pertanyaan, balas iya apabila Anda memang ingin mendapatkan pertanyaan jalur yang Anda kirimkan.


Sebagai Contoh.

Nama : Tono

E-Mail : tono@yahoo.com

Pertanyaan:

Mas Admin, saya tinggal di dekat Stasiun Tebet, angkot apa saja yang harus saya naiki untuk sampai ke Pasar Blok M.


Untuk membahas website tersebut bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawah artikel ini ^_^

Jumat, 29 Juni 2012

Menggambar garis lurus dengan canvas di HTML5

Berikut skrip Javascript untuk menggambar garis lurus di canvas yang disediakan oleh HTML5.


context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.lineWidth = 1;
context.strokeStyle='';
context.stroke();

Penjelasan

Baris pertama: Memulai Penggambaran

Baris kedua: Membuat titik awal penggambaran di kordinat x1,y1.

Baris ketiga: Menggambar garis dari titik awal ke kordinat x2,y2.

Baris keempat: Menentukan luas garis.

Baris kelima: Memilih warna pada garis agar bisa terlihat, karena tidak diberi kode gambar, otomatis menggunakan warna hitam.

Baris terakhir: Memasang warna pada garis.



Keseluruhan kode


<html>

<head>

<title>Membuat garis lurus dengan HTML5</title>

</head>

<script language="javascript">


window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");


context.beginPath();

context.moveTo(100, 150);

context.lineTo(450, 50);

context.lineWidth = 15;

context.strokeStyle='';

context.stroke();

};


</script>

<body>

<canvas id="myCanvas" width="578" height="200"></canvas>

</body>

</html>






Jika ingin membahas artikel ini bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawah artikel ini ^_^

Langganan Artikel Komputer

Anda akan mendapatkan berbagai info menarik seputar dunia IT. Info-info tersebut akan terus berdatangan ke email Anda.


So, update wawasan IT Anda secara rutin, yuk langganan artikel dari Komunitas Bahas Komputer



Kunjungi http://bahaskomputer.blogspot.com/feeds/posts/default

Kamis, 28 Juni 2012

Tanya Jalur Busway

Website Pencari Jalur Busway

http://carijalurbusway.web44.net

Source Code Web Pembuat Kartu




Salah satu yang menarik dari HTML 5 adalah adanya fitur bernama Canvas. Dengan fitur ini Anda dapat mengolah gambar secara interaktif. Sebagai contohnya Website Pembuat Kartu. Website ini menggunakan kanvas sebagai tempat menggambar dan javascript untuk mengolah gambar. Pengolahan gambar dapat dilakukan secara interaktif. Tidak hanya pengolahan gambar, canvas juga bisa digunakan untuk pengolahan tulisan.


Download source code dan sql: http://www.mediafire.com/?caibpzfvfiwv19c

Untuk membahas source ini bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawah artikel ini ^_^.

Rabu, 27 Juni 2012

Pesan Artikel




Komunitas Bahas Komputer melayani Permintaan Artikel.

Kirimkan permintaan Anda ke email anhar_tasman@yahoo.com

Website Profil Guru




Website ini adalah Web Elearning Minimalis. Digunakan oleh perseorangan guru. Berfungsi menampung bahan pelajaran yang dimiliki Guru untuk para muridnya. Di website ini guru bisa menaruh materi, foto, video, file dan permainan yang berhubungan dengan pelajaran. Selain itu juga tersedia fitur ujian agar murid bisa mengetahui kemampuan mereka.

Jika website ini digunakan, para murid tidak perlu menjelajah internet terlalu luas karena konten yang mereka butuhkan sudah disediakan oleh guru mereka di website ini. Hal itu dapat melindungi mereka dari "pengunjungan website negatif". Selain itu juga bisa menambah kredibilitas para guru.

Tertarik untuk mencoba? Silahkan download lalu hosting ke server Anda.

Untuk download, hubungi Admin


Admin website tersedia di folder webguru/gudang/


Untuk membahas Website ini bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawah artikel ini atau dengan cara email ke anhar_tasman@yahoo.com ^_^

Semoga Bermanfaat.

Selasa, 26 Juni 2012

Permainan Attack Turn Based dengan Jquery




Di zaman Web 2. Web Game bisa dibuat tidak hanya menggunakan flash, tetapi juga bisa menggunakan Javascript. Pada artikel ini Anda akan mendapatkan link game yang dibuat dengan menggunakan Jquery.

Nama Game : Mafia War, Fight Your Enemy

Genre : Attack Turn Based.

Download: http://www.mediafire.com/?v56cikybdqno55v

Untuk membahas game ini bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawah artikel ini ^_^.

Membuat Gerakan Sederhana Animasi Flash

Pada artikel ini kita akan mempelajari cara membuat animasi pesawat bergerak menggunakan fungsi "Tween" di dalam Program Macromedia Flash. Berikut langkah-langkahnya.


1) Jalankan Macromedia/Adobe Flash lalu buat file baru.

2) Import gambar pesawat ke dalam stage.


3) Buat MovieClip pesawat tersebut, beri nama pesawat.

4) Buat lagi MovieClip dari movieClip pesawat, beri nama AnimasiPesawat.


5) Edit In Place AnimasiPesawat.


6) Klik kanan layer 1 di Frame 1, klik Create Motion Tween.


7) Klik kanan layer 20 di Frame 1, klik Insert Keyframe.



8) Geser Pesawat ke kanan



Pencet Ctrl+Enter untuk memutar animasi. Anda akan melihat animasi pesawat terbang.

Animasi Gerakan selesai dibuat.


Untuk membahas artikel ini bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawah artikel ini ^_^.

Merubah Posisi Objek dengan Jquery

Objek di dalam website seperti contohnya gambar, biasanya mempunyai posisi fix(tidak bisa diganti oleh pengunjung). Yang artinya dalam posisi ini pengunjung hanya berperan sebagai penerima informasi, bukan pengatur tampilan sumber informasi. Bayangkan jika pengunjung bisa merubah layout website sesuka hati mereka, mereka akan merasa lebih dihargai. Tentunya Anda tidak perlu cemas karena perubahan layout hanya terjadi di komputer pengunjung yang merubah, artinya tidak secara global.

Di dalam artikel ini Anda akan belajar cara membuat mainan remot control menggunakan jquery. Anda bisa mengendalikan suatu objek. Seru kan? Yuk langsung dipelajari.


1) Download UI Jquery di http://jqueryui.com/download

2) Jalankan Dreamweaver dan buat file html baru.

3) Masukkan CSS dan JS Jquery dengan cara mengetikkan skrip di bawah ini

<link type="text/css" href="css/black-tie/jquery-ui-1.8.21.custom.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>

Perhatikan tulisan black-tie pada baris skrip pertama, ganti dengan nama theme Jquery yang Anda pilih. Misalnya UI Lightness.

4) Buat folder bernama gambar. Siapkan sebuah gambar PNG dengan nama objek kemudian masukkan ke folder gambar.

5) Ketikkan kode di bawah ini pada bagian style.

body {

background-color: #3A8D17;

}

#gambar {

position:absolute;

width:128px;

height:104px;

z-index:1;

left: 334px;

top: 3px;

}

6) Ketikkan kode di bawah ini pada bagian Javascript




var x=334;

var y=3;



$(document).ready(function(){



$("#tombolkiri").click(function () {



x-=20;

$("#gambar").css("left",x+"px");

});




$("#tombolkanan").click(function () {



x+=20;

$("#gambar").css("left",x+"px");

});





$("#tombolbawah").click(function () {



y+=20;

$("#gambar").css("top",y+"px");

});




$("#tombolatas").click(function () {



y-=20;

$("#gambar").css("top",y+"px");

});





});




7) Ketikkan kode di bawah ini pada bagian body.


<p>&nbsp;</p>

<p><table width="150" border=0" id="gambar" name="gambar">

<tr>

<td width="24"><div align="center"></div></td>

<td width="80"><div align="center">

<input name="tombolatas" type="submit" id="tombolatas" value="^" />

</div></td>

<td width="24"><div align="center"></div></td>

</tr>

<tr>

<td><div align="center">

<input name="tombolkiri" type="submit" id="tombolkiri" value="&lt;" />

</div></td>

<td><div align="center"><img src="gambar/objek.png" width="80" height="73" /></div></td>

<td><div align="center">

<input name="tombolkanan" type="submit" id="tombolkanan" value="&gt;" />

</div></td>

</tr>

<tr>

<td><div align="center"></div></td>

<td><div align="center">

<input name="tombolbawah" type="submit" id="tombolbawah" value="v" />

</div></td>

<td><div align="center"></div></td>

</tr>

</table>

</p>


Simpan dan jalankan file tersebut. Anda segera melihat permainan move dengan Jquery.




Aplikasi Dasar Pemindahan Objek dengan Jquery telah selesai dibuat.

Download Source : http://www.mediafire.com/?fz75uibjf5cz59k


Jika Anda ingin membahas artikel ini bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawaha artikel ini ^_^.

Senin, 25 Juni 2012

Membuat Animasi Loading dengan Jquery

Di zaman web 2 ini, kita tidak terlalu sulit untuk membuat website super interaktif. Berkat bantuan Jquery, kita bisa membuat pertunjukan seindah flash atau aplikasi desktop. Salah satu bentuk website modern adalah yang terdapat animasi loading. Selain mempercantik halaman, juga bisa membantu pengunjung memprediksi berapa lama lagi halaman atau aplikasi yang diminta akan terbuka.


Berikut langkah-langkah membuat Animasi Loading dengan Jquery


1) Download UI Jquery di http://jqueryui.com/download

2) Jalankan Dreamweaver dan buat file html baru.

3) Masukkan CSS dan JS Jquery dengan cara mengetikkan skrip di bawah ini

<link type="text/css" href="css/black-tie/jquery-ui-1.8.21.custom.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>

Perhatikan tulisan black-tie pada baris skrip pertama, ganti dengan nama theme Jquery yang Anda pilih. Misalnya UI Lightness.

5) Ketikkan skrip di bawah ini


<script type="text/javascript">



var proses=0;



var henti=0;

$(document).ready(function(){





mulai();







});




function mulai(){



myVar=setInterval(function(){tambahProses()},1000);

}





function tambahProses(){



proses+=1;

$( "#progressbar" ).progressbar({

value: proses

});



}



function ganti(){



if(henti==0){

henti=1;

document.getElementById('tombol').innerHTML='<img src="gambar/PlayHot.png" name="kotak1" width="50" height="50" id="kotak1" onclick="ganti()" />';

document.getElementById('tulisTombol').innerHTML='Play';

clearInterval(myVar)

}else{

henti=0;

document.getElementById('tombol').innerHTML='<img src="gambar/player-pause.png" name="kotak1" width="50" height="50" id="kotak1" onclick="ganti()" />';

mulai();

document.getElementById('tulisTombol').innerHTML='Pause';

}





}




</script>




6) Carilah 2 buah ikon. Satu ikon pause dan satu lagi ikon play. Beri nama masing-masing file tersebut sebagai player-pause.png dan PlayHot.png kemudian taruh di dalam folder gambar



7) Ketikkan skrip berikut pada bagian body.


<p align="center">Loading dengan Jquery </p>

<div id="progressbar"></div>



<div style="display: none;" class="demo-description">

<p>Default determinate progress bar.</p>

</div>

<table width="173" border="0" align="center">

<tr>

<td><div align="center" id="tombol"><img src="gambar/player-pause.png" name="kotak1" width="50" height="50" id="kotak1" onclick="ganti()" /></div></td>

</tr>

<tr>

<td width="167"><div align="center" id="tulisTombol">Pause</div></td>

</tr>

</table>





8) Buka halaman tersebut di browser. Anda akan melihat animasi loading. Anda juga dapat mengklik pause dan play pada halaman tersebut untuk memberhentikan dan memulai animasi loading.




Animasi Loading telah selesai dibuat.

Download Source Code : http://www.mediafire.com/?5wycj7cjj4ty4d7

Jika Anda ingin membahas artikel ini bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawah artikel ini ^_^.

Permainan Drag dengan Jquery

Di dalam Jquery, terdapat sebuah fungsi bernama "drag", jika kita memakai efek tersebut, kita bisa melakukan drag terhadap semua elemen html yang kita mau. Keren kan? Sudah saatnya elemen-elemen di html website kita bisa kita gerakan. Selain tampilannya lebih keren, juga bisa membuat pengunjung betah berada di website kita.

Untuk membuat suatu elemen bisa digerakkan, ikuti langkah-langkah berikut.

1) Download UI Jquery di http://jqueryui.com/download

2) Jalankan Dreamweaver dan buat file html baru.

3) Masukkan CSS dan JS Jquery dengan cara mengetikkan skrip di bawah ini

<link type="text/css" href="css/black-tie/jquery-ui-1.8.21.custom.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>

Perhatikan tulisan black-tie pada baris skrip pertama, ganti dengan nama theme Jquery yang Anda pilih. Misalnya UI Lightness.

4) Pilih salah satu elemen, pada artikel ini saya memilih gambar pohon.

5) Klik gambar pohon tersebut, lalu berikan tulisan "kotak1" pada kotak name.




6) Tuliskan skrip Javascript berikut.

<script type="text/javascript">



$(document).ready(function(){



for(var a=1;a<21;a++){

$("#kotak"+a).draggable({disabled: false});

bisadrag=1;


}

});




</script>

7) Perhatikan tulisan a<21; pada skrip di atas. Itu menandakan bahwa Anda bisa memasang fungsi drag pada 20 elemen yang mempunyai id dari "kotak1" sampai "kotak20". Angka tersebut bisa dirubah sesuai kebutuhan Anda.


8) Jalankan file html tersebut di browser. Anda bisa menikmati fungsi Drag.



Download Source Code : http://www.mediafire.com/?78q0to9c6cox1k7


Untuk membahas artikel ini bersama saya dan pengunjung lain, silahkan isi kotak komentar yang berada di bawah artikel ini ^_^.

Selasa, 19 Juni 2012

Membuat Movie Clip di Macromedia Flash

1) Gambar sebuah objek




2) Blok gambar tersebut.

3) Pencet F8, akan muncul Window seperti gambar di bawah ini.




4)
Pada bagian Name, tuliskan nama movie clip.

Pada bagian behavior, pilih movie clip.

Pada bagian registration, tentukan titik tengah dari objek tersebut.

5) Tekan OK.

6) Movie Clip sudah berhasil dibuat.

Kamis, 14 Juni 2012

Komunitas Bahas Komputer

Hay para anggota!!! Udah jadi Anggota Aktif belum??!! Aktif juga donk jangan cuman jadi pembaca.

Sekarang Bahas Komputer sedang menuju Komunitas. Gue membutuhkan orang-orang yang mempunyai keinginan untuk saling berbagi ilmu. Lu bisa menjadi Anggota Aktif Komunitas Bahas Komputer. Membantu memberikan informasi tentang dunia komputer kepada masyarakat.

Caranya mudah kok. Lu buat artikel atau video yang berisi pelajaran dunia IT, terus lu kirim ke email gue, nanti apabila oke, langsung gue posting di blog ini dengan mencantumkan data diri lu berupa email, akun sosial, URL dan nama lu.

Gue tunggu tulisan-tulisan lu.

Yuk kita berbagi ilmu....

E-Mail Pengurus Blog ini : anhar_tasman@yahoo.com