Computer Magazine

Tuesday, March 30, 2010

Perancang Template Terbaru dari Blogger

Diposkan oleh Unknown di 8:54 AM Label: blog, tips trik

Blogger Dalam Konstruksi ini adalah fasilitas baru yang diperuntukkan pra blogger pengguna blogspot, sebagai bukti begitu besarnya perhatian blogger terhadap para pengguna blogger. Dengan fasilitas ini semua menjadi semakin mudah dalam mengolah blog dimana seorang blogger bisa melakukan konstruksi blognya sambil dapat melihat langsung hasilnya. Sebelumnya setelah melakukan perubahan pada

Monday, March 29, 2010

Javascript Checkbox Checked / Javascript Check All Checkbox

Diposkan oleh Unknown di 4:37 PM Label: cek, check, javascript, javascript check all / uncheck all, script, script check list, script checkall, tutorial html, tutorial javascript

Kalian tahu kan fungsi checkall? Yupz, ini adalah fungsi yang digunakan untuk mencentang semua kolom cek list ataupun sebaliknya untuk menghilangkan semua centang yang ada pada kolom cek list. Untuk membuat fungsi ini kita hanya memerlukan sebuah script javascript yang digunakan untuk mencentang semua cek list maupun menghilangkan semua centang pada cek list.

Secara keseluruhan script tersebut seperti dibawah ini:

<html>
<body>
<center>
<table border="1px" width="180">
<tr>
<td>
<ul>
<li>
<input type="checkbox" name="check_ctrl" onClick="Check(document.myform.check_list)" /> <b id=message>Check All</b>
</li>
<li><input type="button" name="button" id="button" onClick="Check(document.myform.check_list)" value="Check All" /></li>
</ul>
<hr>
<ol>
<li><input type="checkbox" name="check_list" value="1"> ASP</li>
<li><input type="checkbox" name="check_list" value="2"> PHP</li>
<li><input type="checkbox" name="check_list" value="3"> JavaScript</li>
<li><input type="checkbox" name="check_list" value="4"> HTML</li>
<li><input type="checkbox" name="check_list" value="5"> MySQL</li>
</ol>
</td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">

</script>
</center>
</body>
</html>

Untuk melihat demonya silahkan kunjungi:
[Demo @ catment.co.cc/demo/checkall]
Download scriptnya:
http://catment.co.cc/download/check_all.zip

Membuat Link tanpa garis bawah dengan CSS

Diposkan oleh Unknown di 6:29 AM Label: CSS, menghilangkan border pada link gambar, menghilangkan garis bawah pada text link

Sebelumnya saya sudah pernah menulis tentang CSS atau Cascading Style Sheet. Tapi kali ini saya akan sharing trik penggunaan script CSS untuk menghilangkan garis bawah pada Link Text, dan menhhilangkan border pada Link Gambar.

Menghilangkan Garis Bawah Semua Link pada Halaman Web

Pada dasarnya sebuah link otomatis akan mempunyai garis bawah. Tapi dengan menggunakan CSS/Cascading Style Sheet, garis bawah itu bisa dihilangkan dengan mudah. Caranya, tempatkan script CSS berikut di bagian <head>...</head> halaman web yang Anda buat (bersama title, description, dan keyword). Dengan menggunakan kode ini, garis bawah pada seluruh link di halaman web Anda akan hilang.

<html>

<head>

<title>menghilangkan garis bawah pada link</title>

<style type="text/css">

a {text-decoration:none;}

</style>

</head>

<body>

<a href=" http://catment.blogspot.com">Link belajar web programing</a>

</body>

</html>

Menghilangkan Garis Bawah Sebagian Link pada Halaman Web

Jika hanya ingin menghilangkan garis bawah pada link-link tertentu, bukan pada seluruh link seperti yang terjadi kalau memakai kode di atas, anda dapat menyisipkan kode script ke dalam style Link atau memanggilnya dengan class. Contoh dan kodenya seperti yang berikut ini.

<html>

<head>

<title>menghilangkan garis bawah pada link</title>

</head>

<body>

<a href=" http://catment.blogspot.com" style="text-decoration:none;">Link belajar web programing</a>

</body>

</html>

Atau

<html>

<head>

<title>menghilangkan garis bawah pada link</title>

<style type="text/css">

.tanpaGarisBawah {text-decoration:none;}

</style>

</head>

<body>

<a href="http://catment.blogspot.com" class="tanpaGarisBawah">Link belajar web programing</a>

</body>

</html>

Menghilangkan Border Semua Link Gambar pada Halaman Web

Pada dasarnya apabila kita membuat Link Gambar akan terdapat border di sekeliling gambar yang di buat Link, tapi ada sebagian browser yang tidak memunculkan border tersebut. Apabila anda pengguna Opera dan Firefox, border tersebut muncul pada browser Opera dan Firefox. Dengan CSS border tersebut dapat dihilangkan,caranya sisipkan kode CSS ke tag <head>...</head>.contoh scriptnya sebagai berikut:

<html>

<head>

<title>menghilangkan garis bawah pada link</title>

<style type="text/css">

img {border:0;}

</style>

</head>

<body>

<a href="catment.blogspot.com"><img src="catment.jpg" /></a>

</body>

</html>

Menghilangkan Border tertentu pada Link Gambar pada Halaman Web

Anda juga bisa menghilangkan border di bagian Link gambar tertentu saja, caranya sama denga menghilangkan garis pada Text Link tertentu di atas yaitu dengan cara menyisipkan sript CSS pada tag <img>. Untuk contoh bisa di lihat pada script di bawah ini:

<html>

<head>

<title>menghilangkan garis bawah pada link</title>

</head>

<body>

<a href="catment.blogspot.com"><img src="catment.jpg" style="border:0;" /></a>

</body>

</html>

Sunday, March 28, 2010

Tutorial Script Javascript: Promptbox

Diposkan oleh Unknown di 10:16 AM Label: javascript, tutorial javascript

Promtbox adalah fungsi bawaan dari javascript yang berfungsi untuk memasukan vareabel, tampilan dari promptbot dapat dilihat seperti gambar di atas,.
dan di bawah ini saya akan memberikan concoh membuat promptbox sederhana ,.

<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("masukan nama","");
if (name!=null && name!="")
{
document.write("Apa kabar " + name + "?????");
}
else if (name=="")
{
alert("anda belum memasukan nama");
}
}
</script>
</head>
<body>

</body>
</html>

keterangan dari script javascript di atas, saat di klik button prompt box maka akan membangkitkan fungsi javascript swow_prompt, dan promptboxpun muncul dan jika anda masukan nama, maka akan muncul tulisan apakabar (nama)???
dan jika nama anda kosongkan maka akan muncul javascript alert yang memberitaukan bahwa bagian nama kosong,.

[view demo via catment.co.cc/demo/promptbox.htlm]

Wednesday, March 24, 2010

Tutorial Script Ajax: Combobox dengan ajax

Diposkan oleh Unknown di 9:16 PM Label: Ajax, Combobox

Combobox mungkin bagi sebagian dari anda sudah tak asing lagi dengan istilah ini. combobox adalah 2 atau lebih menu dropdown yang mempunyai keterkaitan antara menu dropdown, yang sepesial disini adalah metode yang di gunakan adalah Ajax. Kenapa Ajax? Apa kelebihan dari Ajax??

Dengan menggunakan Ajax halaman kita tidak perlu me-reload semua halaman. Sekarang langsung saja ke study kasus, study kasus kali ini adalah saat memilih dropdown propinsi maka dropdown kabupaten berubah.
Langkah-langkah untuk membuat combobox dengan ajax adalah sebagai berikut:
Pertama-tama buatlah database dengan nama combobox beserta tabelnya..

buat database dengan nama combobox, lalu buat tabel propinsi yang di dalamnya terdapat idPropinsi dan propinsi. buat tabel kabupaten yang didalamnya terdapat idKabupaten, kabupaten dan idPropinsi

CREATE DATABASE combobox;
CREATE TABLE propinsi (
idPropinsi varchar(5) NOT NULL,
propinsi varchar(50) NOT NULL,
PRIMARY KEY (idPropinsi)
);
INSERT INTO propinsi VALUES ('001', 'propinsi A');
INSERT INTO propinsi VALUES ('002', 'propinsi B');
INSERT INTO propinsi VALUES ('003', 'propinsi C');
INSERT INTO propinsi VALUES ('004', 'propinsi D');

CREATE TABLE kabupaten (
idKabupaten varchar(5) NOT NULL,
kabupaten varchar(50) NOT NULL,
idPropinsi varchar(5) NOT NULL,
PRIMARY KEY (idKabupaten)
);
INSERT INTO kabupaten VALUES ('001', 'kabupaten A1', '001');
INSERT INTO kabupaten VALUES ('002', 'kabupaten A2', '001');
INSERT INTO kabupaten VALUES ('003', 'kabupaten A3', '001');
INSERT INTO kabupaten VALUES ('011', 'kabupaten B1', '002');
INSERT INTO kabupaten VALUES ('012', 'kabupaten B2', '002');
INSERT INTO kabupaten VALUES ('013', 'kabupaten B3', '002');
INSERT INTO kabupaten VALUES ('021', 'kabupaten C1', '003');
INSERT INTO kabupaten VALUES ('022', 'kabupaten C2', '003');
INSERT INTO kabupaten VALUES ('023', 'kabupaten C3', '003');
INSERT INTO kabupaten VALUES ('031', 'kabupaten D1', '004');
INSERT INTO kabupaten VALUES ('032', 'kabupaten D2', '004');
INSERT INTO kabupaten VALUES ('033', 'kabupaten D3', '004');

Setelah itu buat index.php

<?php
include"config.php";
?>
<html>
<head>
<title>Tes Combobox</title>
</head>
<body>
<script type='text/javascript'>
function createRequestObject()
{
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
ro = new XMLHttpRequest();
}
return ro;
}

var xmlhttp = createRequestObject();
function rubah(pilih)
{
var idPropinsi = pilih.value;

if (!idPropinsi) return;
xmlhttp.open('get', 'ambildata.php?idPropinsi='+idPropinsi, true);
xmlhttp.onreadystatechange = function()
{
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
document.getElementById("kabupaten").innerHTML = xmlhttp.responseText;
return false;
}

xmlhttp.send(null);
}
</script>
<form>
<select name="idPropinsi" onChange="javascript:rubah(this)">
<option value=''>-pilih Propinsi-</option>
<?php
$pilih="SELECT * FROM propinsi";
$query=mysql_query($pilih);
while($row=mysql_fetch_array($query))
{
echo"
<option value='$row[idPropinsi]'>$row[propinsi]</option>
";
}
?>
</select>
<select id="kabupaten">
</select>
</form>
</body>
</html>

Langkah berikutnya adalah membuat config.php untuk konfigurasi dan koneksi antara web dan databese MySQL

<?php
//tentukan host, bila anda menggunakan local biasanya localhost
$hostname_conn="host";

//username, bila anda menggunakan local biasanya root
$username_conn="username";

//password MySQL
$password_conn="password";

//nama database
$db_conn="database";

mysql_connect($hostname_conn,$username_conn,$password_conn,$db_conn) or die ("Koneksi gagal total". mysql_error());

mysql_select_db ($db_conn);
?>

Terakhir adalah membuat ambildata.php
dari index.php yang menampilkan tampilan dropdown propinsi, dan jika di pilih salah satu propinsi maka akan membangkitkan fungsi yang merequest ke ambildata.php dan selanjutnya respon dari ambildata.php akan di kirimkan ke index.php

<?php
//mengkoneksikan ke server MySQL
include"config.php";

$idPropinsi=$_GET['idPropinsi'];
//men-query yang memiliki id propinsi sama
$pilih="SELECT * FROM kabupaten WHERE idPropinsi=$idPropinsi";
$query=mysql_query($pilih);
while($row=mysql_fetch_array($query))
{
echo"
<option value='$row[idKabupaten]'>$row[kabupaten]</option>
";
}
?>

[download script] <<--->>> [view demo @ http://catment.co.cc/demo/combobox_ajax]

Mengubah Readmore menjadi Baca Selanjutnya

Diposkan oleh Unknown di 8:39 AM Label: blog, tips trik

Readmore pada awalnya tidak dilengkapi dalam blogger sehingga para pemilik blog berusaha membuatnya sendiri dengan menambah script untuk readmore.

Namun saat ini mungkin karena blogger selalu memperhatikan para pengguna blog yang menggunakan blogger maka blogger pun sudah mengikut sertakan yang namanya readmore.

Menu readmore pada jendela posting artikel terlihat seperti dalam gambar

Monday, March 22, 2010

Memasang Slideshow Pada Blogger

Diposkan oleh Unknown di 7:41 AM Label: animasi, blog

Slide merupakan tampilan berupa objek yang dalam kurun waktu tertentu selalu bergantian tampil antara objek atau image yang satu dengan image yang lainnya.

Artikel ini merupakan jawaban atas pertanyaan dari sobat kita Diktus yang menanyakan bagaimana cara menempatkan slide pada blog seperti yang ada pada blog ini. Sebenarnya sih tulisan tentang memasang slide pada blog ini sudah banyak ditulis