membuat lightbox sendiri

14Jan09

ini ada sedikit script yang bisa digunakan untuk membuat lightbox sendiri. anda tinggal copy paste aja. save dengan extensi html, dan selamat mencoba

<html>

<head>

<title>LIGHTBOX EXAMPLE</title>

<style>

.black_overlay{

display: none;

position: absolute;

top: 0%;

left: 0%;

width: 100%;

height: 100%;

background-color: black;

z-index:1001;

-moz-opacity: 0.8;

opacity:.80;

filter: alpha(opacity=80);

}

.white_content {

display: none;

position: absolute;

top: 25%;

left: 25%;

width: 50%;

height: 50%;

padding: 16px;

border: 16px solid orange;

background-color: white;

z-index:1002;

overflow: auto;

}

</style>

</head>

<body>

<p>This is the main content. To display a lightbox click <a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block’”>here</a></p>

<div id=”light” class=”white_content”>This is the lightbox content. <a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’none’;document.getElementById(‘fade’).style.display=’none’”>Close</a></div>

<div id=”fade” class=”black_overlay”></div>

</body>

</html>


Filed under: Tutorial   |  1 Comment
Tags: , , ,

keunggulan seorang programer

30Dec08

adakalanya seorang programer di anggap sebuah profesi yang dipandang sebelah mata. padahal seorang programer itu merupakan profesi yang menakjubkan.

seorang programer dituntut untuk membuat sebuah sistem yang berubah-ubah pada setiap project-nya. programer selalu mencari sistem yang simple dan sebaik mungkin dalam melakukan pekerjaan. programer bukan seorang operator yang tinggal memakai, tapi seorang creatif yang memodivikasi dan mengembangkan.

berbeda dengan seorang operator yang kegiatan yang dilakukannya dari hari ke hari dan waktu ke waktu tetap sama. karena sudah terikat dengan alur yang baku.

namun seorang programer, harus menghadapi kasus yang berbeda-beda salam setiap project mereka. betapa anehnya jika seorang programer dianggap sebelah mata.

seorang programer akan menganalisis tentang project mereka, membuat aplikasi yang mereka buat sesuai dengan hasil yang di harapkan, menentukan sistem yang semudah mungkin dan berubah-ubah setiap setiap project.

seorang programer membuat sebuah mesin yang dapat di gunakan oleh orang lain. dan berusaha untuk membuat mesin itu sedinamis dan sebagus mungkin.

dengan kata lain, seorang programer dapat disebut sebagai seniman dalam membuat sebuah sistem.

seorang programer dipaksa untuk berfikir menggunakan otaknya dalam menyelesaikan masalah, bermodal code-code yang berujung pada kepuasan konsumen.

indonesia rasanya belum sedikit mengerti tentang sorang programer, dimana sering sekali dipandang sebelah mata.

pertanyaan yang perlu digaris bawahi, “Apakah programer merupakan sebuah mesin, ato seorang seniman ? “

marilah kita sedikit berfikir.


Filed under: News   |  1 Comment
Tags: , , ,

Make your blog/web number one

23Dec08

Adakalanya seseorang menginginkan blognya ,menjadi yang paling atas dalam mesin pencarian. Hal ini merupakan bagian dari sifat naluriah seorang manusia yang ingin lebih. Namun untuk menjadi yang pertama, banyaklah cara untuk melakukannya. Akan aku sedikit jelaskan bagai mana cara mempelajari SEO
SEO, adalah sebuah pemahaman terhadap sebuah metode untuk meningkatkan web ato blog anda. Ini adalah urutannya :

1.  bagi mereka yang menggunakan jasa penyedia blog

  • daftarkan blog anda pada penyedia blog yang handal

    • kenapa pemilihan penyedia blog sangatlah penting. hal ini didasarkan pada pemikiran bahwa, semakin handal penyedia blog, maka index-ing pada blog anda akan lebih cepat.
    “kenapa demikian ?” , sebenernya ini merupakan tahapan scripting kalo kita membuat sendiri blog. untuk masalah koding, maka penyedia yang akan menentukan bagus ato enggaknya. hal ini penting karena mesin pencara sedikit rewel dengan script yang tidak memenuhi standard pada umumnya. dengan semakin handalnya tempat kita bloging, maka akan semakin baik untuk script-ting.

  • menulis artikle yang sedang hangat di bicarakan dan bermanfaat

    • sebagai seseorang yang ikut pada jasa penyedia web, di sinilah kita menunjukan keahlian kita untuk menikan rating blog kita. pemikiran pertamanya simpe sekali. “orang melakukan pencarian di mesin pencari karena mencari informasi yang ia perlukan”. semakin kita hebat mengemas informasi dari artikel yang kita buat, dan semakin bermanfaatnya informasi yang kita buat. maka orang akan betah di blog kita, dab berusaha berpindah pada halaman yang lain dalam blog ato web kita

  • menggunakan tag kata kunci (key word) yang simple dan berisi

    • ini merupakan salah satu permainan kita dalam menentukan kata kunci yang baik. kata kuci harus relepan dengan artikel yang kita buat. gunakanlah key word yang familiar dan berisi. ha ini sangatlah penting. karena kata kunci mencerminkan artikel kita, dan mesin pencari membaca kata kunci kita.

  • update secara berkala blog anda

    • sebuah blog akan lebih berasa hidup karena sering di update. seolah olah blog ini merupakan sebuah media informasi yang up-to-date. jangan sampai seorang pengunjung yang berkunjung ke web kita karena ada artikel yang bagus, dan berkunjung di minggu berikutnya, tetapi blog kita tetep itu-itu aja. kan ga seru.

2. bagi mereka yang membuat sendiri blog

  • gunakan script sesuai dengan standard yang berlaku

    • jika kita membuat web/blog sendiri, kita harus mengikuti aturan2 yang berlaku dalam penulisan script. hal ini sangat berpengaruh sekali, terutama masalah html dll.
    mesin pencari berisi script yang yang mampu membaca tag-tag yang tampil di web kita. dan setiap mesin pencari memiliki sensitivitas yang tinggi.
    semakin baik seorang programer yang membuatnya, maka semakin cepat web tersebut di index

  • selalu menggunakan meta keyword yang sesuai dengan halaman yang bersangkutan

    • setiap mesin pencari akan mebaca tag meta keyword dari sebuah halaman, hal ini karena mesin pencari beranggapan kalo keyword tersebut mencerminkan halaman yang di index.
    jika kita hanya menggunakan 1 meta keyword yang sama untuk semua halaman, mesin pencari beranggapan kalo web kita terdiri dari 1 halaman yang sama. tidak berubah ubah.
    tidak heran kalo dalam penyedia blog, menyediakan inputan untuk menambahkan tag keyword dalam admin blog mereka.

  • pendaftaran di mesin pencari

    • sebuah web tidak semata2 akan terbaca di mesin pencari. hal ini terjadi karena terlalu banyaknya web/blog yang ada di di internet. pendaftaran merupakan salah satu media untuk memberitahukan mesin pencari kalo web kita itu ada.

  • melakukan update blog ato web

    • ini merupakan hal yang terpenting. sebuah web ato blog itu berubah secara berkala. karena web ato blog ini merupakan sebuah informasi bagi pengunjung. jangan sampai blog kita itu itu aja. kejenuhan akan terjadi kepada pengunjung. karena beranggapan kalo blog ato web kita itu tidak memiliki pengelolanya

  • design blog ato web yang cepat loadingnya dan interaktif

    • sebenernya desain tidak begitu penting. tapi ingat “mata merupakan indra pertama dalam menilai”. kita sering berdecak kagum saat melihat sebuah website yang bagus dan interaktif.
    namun untuk mewujudkannya, kita jangan melukapan pada 1 hal penting, yaitu lamanya waktu untuk membuka web ato blog kita.
    seorang pengunjung akan menutup blog ato web baru yang saat di klik lama sekali untuk muncul. jika hal ini terjadi maka, malangnya nasib web ato blog kita.

demikian sedikti wacana ato pemahaman yang aku berikan. maka untuk membuat web kita bagus dan menjadi nomer satu. di perlukan pemikiran yang matang dan informasi yang up-to-date

makasieh dah mau membaca artikle ini.
salam sukses


Filed under: News   |  2 Comments
Tags: , , , ,

list of great website

22Dec08

bagi pengembang web, ada beberapa list website yang menurut aku wajib untuk di kunjungi. Hal ini karena di dalam webtersebut berisi banyak sekali tambahan tambahan untuk mempercantik website, di antaranya adalah
1. http://www.webresourcesdepot.com
2. http://www.styledmenus.com/
3. http://www.jquery.com
4. http://web-kreation.com
5. http://nettuts.com
6. http://www.ndesign-studio.com/

mungkin ini beberapa link yang telah aku dapatkan..
untuk selebihnya, marilah kita tetep berkarya..

selamat mencoba dan makasieh dah singgah di blog-ku


Filed under: News   |  2 Comments
Tags: , , , ,

jquery validation

19Dec08

untuk membuat sebuah form, sebaiknya kita sedikit membuat validasi agar input terhadap form tersebut lebih terarah dan eror bisa di perkecil.
aku akan sedikit memberikan sedikit tutorial untuk melakukan eror handling itu.
yang di perlukan hanyalah
1. jquery-1.2.3.pack.js
2. jquery.validate.pack.js
semua itu dapat di download dengan melakukan pencarian di mbah google.

ini contoh scriptnya

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Demo JQuery Validation</title>
<script type=”text/javascript” src=”jquery-1.2.3.pack.js”></script>
<script type=”text/javascript” src=”jquery.validate.pack.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“#alumniForm”).validate({
messages: {
email: {
required: “E-mail harus diisi”,
email: “Masukkan E-mail yang valid”
}
},
errorPlacement: function(error, element) {
error.appendTo(element.parent(“td”));
}
});
})
</script>
<style type=”text/css”>
* { font: 11px/20px Verdana, sans-serif; }
h4 { font-size: 18px; }
input { padding: 3px; border: 1px solid #999; }
input.error, select.error { border: 1px solid red; }
label.error { color:red; margin-left: 10px; }
td { padding: 5px; }
</style>
</head>
<body>
<h4>JQuery Validation</h4>
<form id=”alumniForm” method=”post”>
<table>
<tr>
<td width=”100″>NIM</td>
<td>
<input name=”niu” class=”required” title=”NIM harus diisi” size=”30″ type=”text” />
</td>
</tr>
<tr>
<td>Foto</td>
<td>
<input name=”foto” size=”40″ type=”file” />
</td>
</tr>
<tr>
<td>Nama</td>
<td>
<input name=”nama” class=”required” title=”Nama harus diisi” size=”40″ type=”text” />
</td>
</tr>
<tr>
<td>Tempat Lahir</td>
<td>
<input name=”tempat_lahir” class=”required” title=”Tempat lahir harus diisi” size=”40″ type=”text” />
</td>
</tr>
<tr>
<td>Tanggal Lahir</td>

<td>
<input name=”tgl_lahir” class=”required” title=”Tanggal lahir harus diisi” size=”40″ type=”text” />
</td>
</tr>
<tr>
<td>Alamat</td>
<td>
<input name=”alamat” class=”required” title=”Alamat harus diisi” size=”60″ type=”text” />
</td>
</tr>
<tr>
<td>No. Telp</td>
<td>
<input name=”no_telp” class=”required” title=”No. Telp harus diisi” size=”30″ type=”text” />
</td>
</tr>
<tr>
<td>No. HP</td>
<td>
<input name=”no_hp” class=”required” title=”No. HP harus diisi” size=”30″ type=”text” />
</td>
</tr>
<tr>
<td>E-mail</td>
<td>
<input name=”email” id=”email” class=”required email” size=”30″ type=”text” />
</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input name=”jk” value=”L” class=”required” title=”Jenis Kelamin harus diisi” type=”radio” />Laki-laki
<input name=”jk” value=”P” type=”radio”>Perempuan
</td>
</tr>
<tr>
<td>Program Studi</td>
<td>
<select name=”prodi” class=”required” title=”Program Studi harus dipilih” />
<option value=”">– Pilih Program Studi –</option>
<option value=”1″>Teknik Informatika</option>
<option value=”2″>Teknik Komputer</option>
<option value=”3″>Sistem Informasi</option>
<option value=”4″>Manajemen Informatika</option>
<option value=”5″>Komputerisasi Akuntansi</option>
</select>
</td>
</tr>
<tr>
<td>Angkatan</td>
<td>
<input name=”angkatan” class=”required” title=”Angkatan harus diisi” size=”6″ type=”text” />
</td>
</tr>
<tr>
<td>Tahun Lulus</td>
<td>
<input name=”tahun_lulus” class=”required” title=”Tahun harus diisi” size=”6″ type=”text” />
</td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>
<input name=”pekerjaan” size=”50″ type=”text” />
</td>
</tr>

<tr>
<td>Instansi</td>
<td>
<input name=”instansi” size=”50″ type=”text” />
</td>
</tr>
<tr>
<td>Status</td>
<td>
<select name=”status” class=”required” title=”Status harus diisi”>
<option value=”">– Pilih Status –</option>
<option value=”1″>Single</option>
<option value=”2″>Double</option>
<option value=”3″>Triple</option>
<option value=”4″>It’s Complicated</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<input type=”submit” value=”Submit” />
<input type=”reset” value=”Reset” />
</td>
</tr>
</table>
</form>
</body>
</html>

script ini adalah untuk mebuat validasi tersebut

<script type=”text/javascript”>
$(document).ready(function() {
$(“#alumniForm”).validate({
messages: {
email: {
required: “E-mail harus diisi”,
email: “Masukkan E-mail yang valid”
}
},
errorPlacement: function(error, element) {
error.appendTo(element.parent(“td”));
}
});
})
</script>

selamat mencoba.

kalo mau mendownload click_disini

tutorial ini saduran dari http://gawibowo.com/


Filed under: jquery   |  Leave a Comment
Tags: , , , ,

Insert time with Javascript

20Nov08

Adakalanya format tanggal yang di masukan semisal bauat menentukan tanggal sebuah even dilakukan dengan standard. namun hal ini dapat kita kelola menggunakan javascript, sehingga eror yang diciptakan bisa diminimalisasi. hal ini sangatlah mudah dengan menggunakan “datetimepicker.js“.

mari kita mulai.

  1. pertama kita buat struktur folder seperti ini :

    2. sammple/images
    /datetimepicker.js
    /latih1.htm

  2. mulai dengan html sederhana :

    3. <html>
    <head>
    <title>My Date Time Picker</title>
    <script type=”text/javascript” language=”javascript” src=”datetimepicker.js”></script>
    <script language=”JavaScript”>
    <!–
    if (document.images)
    {
    calimg= new Image(16,16);
    calimg.src=”images/cal.gif”;
    }
    //–>
    </script>
    </head>

    <body>

    <input type=”Text” id=”demo1″ maxlength=”25″ size=”25″><a href=”javascript:NewCal(‘demo1′,’ddmmyyyy’)”><img src=”images/cal.gif” width=”16″ height=”16″ border=”0″ alt=”Pick a date”></a> Format (date:dd/MM/yyyy)

    </body>

    </html>

  3. sekarang tinggal jalankan di browser anda

bagai mana mudahnya menginputkan tanggal dengan sedikit script dan meminimalisasi eror.

untuk lebih jelasnya, contoh scriptnya dapat di download disini
 dan semua yang diperlukan sudah ada didalamnya, berikut beberapa kemungkinannya


Filed under: Tutorial, tutorial javascript   |  Leave a Comment
Tags: , ,

multiple aplication di codeigniter

19Nov08

Frame Work codeigniter terdiri dari 1 buah system dan aplication. standardnya hanya memiliki singgle aplication.
aku di sini akan membeikan sedikit pemahaman yang sederhana agar kita bisa membuat multiple aplication menggunakan CI.
1. kita menggunakan sabuah file index.php dan membuat 2 buah controler dalam aplikasi tersebut.
caranya :
asumsikan kita telah membuat 1 buah index dengan nama usersite dan satu buah index dengan nama admin.
kita merubah tampilan defaultnya dengan mengarahkan :
$route['default_controller'] = “usersite”; pada file routes, pada folder config.
dan membuat sebuah controler “usersite.php” pada folder controller dan mengarahkan tampilannya pada “usersite_view.php” pada folder views
sehingga alamat url kita “http://domain.com/codeigniter/index.php” memiliki nilai yang sama dengan “http://domain.com/codeigniter/index.php/usersite/“

setelah itu kita membuat controler dengan nama “admin.php” dan tampilan dengan nama “admin_view.php“. sehingga untuk mengakses halaman admin kita dengan url “http://domain.com/codeigniter/index.php/admin/“

2. selain prinsip lain untuk membuat multiple aplication, dengan cara memisahkan forder aplication keluar dari folder system, menduplikatkannya menjadi dua dan memberikan nama baru bagi masing masing folder menjadi folder usersite dan admin. dan membuat sebuah file admin.php yang isinya sama persis dangan index.php
sehungga struktur folder CI menjadi
codeigniter/admin
/system
/usersite
/index.php
/admin.php
setelah ini kita tinggal membuat sedikit perubahan.
- perubahan untuk menentukan usersite, diantaranya

  1. merubah file index.php

    2. script yang musti di ganti adalah:
    $application_folder = “application”; menjadi $application_folder = “usersite”;

  2. dan url usersite kita adalah

    3. “http://domain.com/codeigniter/index.php“

- perubahan untuk menentukan admin, diantaranya

  1. merubah file admin.php

    2. $application_folder = “application”; menjadi $application_folder = “admin”;

  2. merubah file config yang ada dalam admin/config/config.php

    3. $config['index_page'] = “index.php”; menjadi $config['index_page'] = “admin.php”;

  3. dan url admin kita adalah

    4. http://domain.com/codeigniter/admin.php

Selamat mencoba, da terimakasih telah berkunjung di blog aku


Filed under: Tutorial, tutorial CodeIgniter   |  1 Comment
Tags: , ,

Upgrade ubuntu in Grafis mode

18Nov08

jika kita memiliki sebuah versi lama dari Ubuntu, dan kita terhubung dengan jaringan internet. Maka melakukan sebuah upgrade terhadap ubuntu versi terbaru sangatlah mudah. Dengan tampilan grafis, cukup dengan click n click, kamu dapat melakukannya. ini adalah sedikit cara untuk melakukan hal tersebut.

  1. click Start System=>Administration=>Software Sources

    2. intrepid_upgrade1

  2. click  “Updates” dan rubah “Show new distribution release” menjadi “Normal releases”

    3. intrepid_upgrade2

  3. click  Start System=>Administration=>Update Manager

    4. intrepid_upgrade25

  4. Click Check button untuk mencari updates.
  5. jika ubuntu memiliki update terbaru maka akan tampil

    6. update-manager-upgrade-810

itu adalah salahsatu cara yang bisa anda lakukan.
terimakasih telah berkunjung ke blog ku


Filed under: News, Tutorial   |  Leave a Comment
Tags: , , , , ,

memulai CodeIgniner

14Nov08

bagi yang ingin merasakan bagai mana framework code igniter (di singkat CI), aku akan sedikit menjelaskannya.
pertama, marilah kita mondownload framework ini di http://codeigniter.com/download.php.
setelah itu, extract hasil download di root directory webserver anda. dan scemanya akan seperti ini :
CodeIgniter_x.x.x/
license.txt — Lisensi dari Codeigniter
index.php — control halaman depan dari webroot website anda
system/ — ini adalah core dari Codeigniter
application/
user_guide/ — merupakan versi ofline bagi materi pengenmabangan dan fungsi-fungsi CI.

selah selesai memahaminya, maka kita mulai untuk membuat aplikasi HALO DUNIA
- langkah pertama :
1. Bukalah file routes.php di folder CodeIgniter_1.6.0/system/application/config
2. Ganti $route['default_controller'] = “welcome”; dengan $route['default_controller'] = “halo”;

- langkah kedua :
Buatlah file halo.php di folder CodeIgniter_1.6.0/system/application/controllers/
saatnya kita membuat file halo.php. ini adalah isi dari scriptnya :
load->view(‘halo_view’);
}
}

?>

- langkah ke tiga :
Buatlah file pemula_view.php di folder CodeIgniter_1.6.0/system/application/views
Isi file halo_view.php sebagai berikut :

LATIHAN PERTAMAKU


HALO DUNIA

- langkah terakhir adalah segera buka browser anda dan arahkan alamat-nya ke folder yang telah anda buat itu. dan “BINGGO“. semuanya akan muncull..

selamat mencoba dan terimakasih


Filed under: tutorial CodeIgniter   |  Leave a Comment
Tags: ,
« Previous Entries