Tuesday, March 8, 2011

Membuat horizontal scroll bar dan vertical scroll bar

Ketika sedang mempelajari optimasi waktu loading dari aplikasi website, terdapat banyak teknik yang bisa diterapkan pada skrip yang kita buat. Salah satunya adalah "menyembunyikan" (karena tidak persis disembunyikan aslinya) konten di dalam scroll bar.
Nah, ternyata ada satu permasalahan yang saya hadapi. Di internet, tidak banyak tutorial yang menjelaskan cara membuat scroll bar yang mendatar (horizontal scroll bar). Karenanya saya tertarik untuk men-sharing-kannya di blog ini.
Berikut ini adalah skrip-nya :

<div style="border:1px solid white;width:200px;height:100px;overflow-y:hidden;overflow-x:scroll;">
<p style="width:250%;">
Dengan menggunakan overflow-x, kita dapat membuat scroll bar ketika kontent pada div ini lebih lebar dari pada kotakan yang kita buat. Dengan menyeting paragraf menjadi 250%, maka hal ini akan membuat content lebih lebar 250% daripada kotakannya - akibatnya hal ini akan memaksakan terjadinya overflow (menyebabkan munculnya scroll bar).
</p>
</div>

Contoh tampilan : anda bisa lihat langsung pada tulisan yang saya buat ini (he..he..)

Sedang untuk vertikal scroll bar, tidak terlalu sulit. Bahkan ada banyak sekali tutorialnya jika kita search di mbah Google. Berikut ini adalah skripnya :
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid white">
Jika tanpa Setingan "paksaan" di tag paragraf <p>, maka cukup mudah untuk membuat scroll bar vertikal seperti ini. Tutorial diinternetnya pun cukup banyak.
</div>

Hasilnya?
Ah, anda sudah melihatnya secara langsung. He.. he..

Cat: Anda bisa mengkreasikan besaran width dan height pada kotakan scroll bar di atas.
Selamat mencoba..

Monday, March 7, 2011

Pagination dengan PHP

Pagination atau membuat halaman adalah suatu teknik membuat segmentasi pada hasil query dari perintah SELECT.
Seperti pada phpmyadmin yang langsung menambahkan skrip limit ketika mengeksekusi suatu pencarian atau mengeksekusi perintah SELECT. Saya baru menyadarinya.. Dan ternyata fungsinya adalah untuk mempercepat loading ketika eksekusi suatu query.
Tujuan pagination sama persis dengan skrip limit, yaitu mempercepat loading dari pada aplikasi PHP kita..

Berikut adalah skriptnya :
<?
// Halaman yang akan ditampilkan untuk pertengahan?
$adjacents = 3;

$sql= mysql_query("select count(a.no_bib) as jumlah from master_buku as a");
$hitung=mysql_fetch_array($sql);
$total_pages = $hitung[jumlah];

/* variabel query. */
$targetpage = "index.php"; //nama file (nama file ini)
$limit = 5; //Jumlah record database yang akan ditampilkan setiap halaman
$page = $_GET['page'];
if($page)
$start = ($page - 1) * $limit;
else
$start = 0;

if ($page == 0) $page = 1;//jika variabel kosong maka defaultnya halaman pertama.
$prev = $page - 1;//tombol prev; halaman sebelumnya
$next = $page + 1;//tombol next; halaman berikutnya
$lastpage = ceil($total_pages/$limit); //tombol hal terakhir
$lpm1 = $lastpage - 1; //tombol sebelum hal terakhir (hal terakhir-1)

$pagination = "";
if($lastpage > 1)
{
$pagination .= "<div class=\"pagination\">";
//Link halaman sebelumnya
if ($page > 1)
$pagination.= "<a href=\"$targetpage?page=$prev\">« Prev</a>";
else
$pagination.= "<span class=\"disabled\">« Prev</span>";

//halaman
if ($lastpage < 5 + ($adjacents * 2))
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
}
}
elseif($lastpage > 5 + ($adjacents * 2)) //enough pages to hide some
{

if($page < 1 + ($adjacents * 2))
{
for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
}
$pagination.= "...";
$pagination.= "<a href=\"$targetpage?page=$lpm1\">$lpm1</a>";
$pagination.= "<a href=\"$targetpage?page=$lastpage\">$lastpage</a>";
}

elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
{
$pagination.= "<a href=\"$targetpage?page=1\">1</a>";
$pagination.= "<a href=\"$targetpage?page=2\">2</a>";
$pagination.= "...";
for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
}
$pagination.= "...";
$pagination.= "<a href=\"$targetpage?page=$lpm1\">$lpm1</a>";
$pagination.= "<a href=\"$targetpage?page=$lastpage\">$lastpage</a>";
}

else
{
$pagination.= "<a href=\"$targetpage?page=1\">1</a>";
$pagination.= "<a href=\"$targetpage?page=2\">2</a>";
$pagination.= "...";
for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
}
}
}

//link halaman selanjutnya
if ($page < $counter - 1)
$pagination.= "<a href=\"$targetpage?page=$next\">Next »</a>";
else
$pagination.= "<span class=\"disabled\">Next »</span>";
$pagination.= "</div>\n";
}

//untuk memanggilnya, cukup meletakkan variabel $pagination pada posisi yang anda inginkan
echo "<table width='100%' border='0'>
<tr>
<td>
<div class='judul_pen'>Daftar Skripsi Mahasiswa</div><br>
Jumlah : $total_pages Records
</td>
</tr>
<tr bgcolor='#B0C4DE'><td><div align='center'>$pagination</div></td></tr>
</table>";
?>

Dan berikut ini adalah cssnya :
div.pagination {
padding: 3px;
margin: 3px;
}

div.pagination a {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #AAAADD;

text-decoration: none; /* no underline */
color: #000099;
}

div.pagination a:hover, div.pagination a:active {
border: 1px solid #000099;

color: #000;
}

div.pagination span.current {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #000099;

font-weight: bold;
background-color: #000099;
color: #FFF;
}

div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #EEE;

color: #DDD;
}
Kode css ini silahkan anda paste-kan di antara tag <head> atau anda pasang pada file css tersendiri.

Hasilnya adalah seperti berikut :

Sunday, March 6, 2011

Bikin tampilan spoiler pada website kita

Anda pernah windows shooping di Kaskus? Mungkin anda pernah melihat iklan yang disembunyikan dalam spoiler.. Sehingga informasi yang ada didalamnya dapat disembunyikan/ditampilkan. Keuntungannya adalah beban loading bisa dikurangi. Tertarik untuk menirunya? Berikut ini adalah kode htmlnya

<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Lihat'; }" name="button" type="button" value="Lihat" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">
<p style="text-align: justify;">
Pesan anda
</p>
</div><div id="hide"></div></div></div>



Sunday, October 17, 2010

Aplikom Teori D3 Ankim (Gasal 2010)

Silabi Teori Aplikasi Komputer untuk semester Gasal 2010 program studi D3 Analis Kimia :
  • Pengenalan perkembangan hardware komputer
  • Pengenalan OS dan Sistem Aplikasi
  • Pengenalan teknologi internet dan mobile
  • (Kompetensi tambahan)
Slide kuliah I (Pengenalan Hardware) : Silahkan anda download disini
Slide kuliah II (Pengenalan RAM) : Silahkan anda download disini
Slide Kuliah III (Pengenalan Harddisk) : Silahkan anda download disini
Slide Kuliah IV (Pengenalan VGA) : Silahkan anda download disini
        Slide tambahan mengenai VGA (ditulis oleh Matthias Schumacher) : Silahkan anda download disini
Slide Kuliah V (Pengenalan input-output device) : Silahkan anda download disini
Slide Kuliah VI (Pengenalan perangkat jaringan) : Silahkan anda download disini

Daftar Nilai Anda :
No
NIM
Nama
Tgs 1
Nilai MidTgs 2Tgs 3PresentasiUASNilai Akhir
122091095FRichard SaputroFotokopi (0)
82
70
70
60
71
C (2.4)
222091094FRani WiduriFotokopi (0)
81
70
70
60
62
C (2.1)
322091085FAbednego Giwangkara
70
81
70
70
70
64
B (3.2)
422091089FGalih Panji P.Fotokopi (0)
86
70
75
70
74
C (2.7)
522091087FAnita Christin Eva H.
80
89
70
75
60
85
B (3.7)
622091096FSariyati
80
92
70
75
60
69
B (3.5)
722091099FSelviana
80
91
75
75
70
88
B (3.9)
822091098FPristika Ayu W.Fotokopi (0)
78
70
70
60
72
C (2.3)
922091097FWahab Isnan Jumdu
75
89
70
70
60
82
B (3.6)
1022091093FNola KurniawanFotokopi (0)
83
70
70
50
63
C (2.1)
1122091092FNiko P.
75
86
0
70
65
89
B (3)
1222091090FHendrik Kuncoro Adhi
75
80
70
70
75
82
B (3.6)
1322091088FDaniel D.P.
80
74
0
70
60
67
C (2.2)

Jawaban ujian mid : Silahkan anda download disini.
Slide kuliah VI (Pengenalan Prosesor; blm selesai sempurna) : bisa anda download disini
Slide kuliah VII (Pengenalan BIOS dan Proses Booting) : bisa anda download disini
Slide kuliah VIII (Pengenalan Sistem Operasi) : bisa anda download disini
Slide kuliah IX (Pengenalan Internet) : bisa anda download disini

Catatan :
Tugas 2 (Membuat artikel tentang BIOS yang pengumpulannya via email) sudah saya cek pada 11 Desember 2010 malam. Hasilnya : Yang baru masuk hanyalah email dari Hendrik dan Selviana. Yang lain, saya beri kelonggaran waktu hingga Senin, 13 Desember 2010 jam 17.00.
Mohon diperhatikan !! Terima kasih
Tugas sudah saya terima dan saya nilai. Agar adil, maka saya beri perbedaan nilai sesuai dengan perbedaan ketaatan mengumpulkan tugas. Dan yang melewati batas waktu serta yang tidak mengumpulkan, mohon maaf saya beri nilai NOL.

Slide kuliah X (Sosial-Computing) : bisa anda download disini 
Rumus Penilaian (Nilai Skala 100): (2*Nilai Harian ((Tugas1+Tugas2+Tugas3+Presentasi)/4))+Mid+UAS)/4
Berikutnya untuk merubah nilai dari Skala 100 ke Skala 5 dan Nilai Huruf digunakan tabel konversi yang ada dibuku pedoman akademik.

Sunday, October 10, 2010

Pemrograman Komputer (Teori) S1 Teknik Industri - 2010

Materi / SAP untuk Mata Kuliah kita di tahun 2010 ini :
  1. Elemen dasar dalam pemrograman komputer
  2. Studi kasus penyusunan algoritma
  3. Penerapan algoritma ke bahasa program
  4. Studi kasus penyusunan program komputer
Bahan pustaka : Berbagai buku, slide kuliah atau artikel yang membahas teori - teori pemrograman komputer.
  • Slide kuliah pertemuan I : Silahkan anda download di sini.
  • Slide kuliah pertemuan II (pengantar pemrograman komputer) : Silahkan anda download disini
  • Slide kuliah pertemuan III (struktur bahasa pemrograman : javascript) : Silahkan anda download disini
Guys, mohon maaf untuk pertemuan tanggal 25 Oktober 2010 saya tidak bisa memberikan kuliah di depan kelas karena ada acara di UGM yang tidak bisa saya tinggalkan. Sebagai pengganti : mohon kalian meminta kunci laboratorium komputer di BAAK/PUSKOM dan kerjakan tugas berikut ini.
Klik disini untuk men-download tugas yang harus dikerjakan.

Guys, hari Senin tanggal 1 November 2010 saya adakan kuliah tambahan untuk menggenapi jumlah pertemuan sebelum mid-semester. Kuliah saya adakan di laboratorium komputer mulai 09.00 sampai selesai. Sekalian kita bahas, kisi-kisi soal yang akan saya ujikan pada mid-semester besok.
Terima kasih.
  • Jawaban tugas (tanggal 25 Oktober 2010) : Silahkan anda download disini
  • Jawaban Ujian MID : Silahkan anda download disini
Daftar Nilai Anda :

No NIM Nama Total Tugas Nilai MIDUASNilai Akhir
1 10100060E Febri Hermantoro 75 8171B (3.5)
2 09100058E Yosefin M 75 6871B (3.3)
3 06080054E Anthony Prasetya 74 7577B (3.5)
4 06080053E Ali Sofyan M. 73 4964C (2.5)
5 09100057E Bayu Wuryaning Sundhari 77 7985B (3.7)
  • Slide kuliah pertemuan IV : Bisa anda download disini. Sedangkan untuk master program notepad++ bisa anda download disini.
  • Bahan pertemuan VI : Bisa anda download disini.
Guys, mohon maaf saya tidak dapat mendampingi perkuliahan, sebagai gantinya saya pandu kalian melalui file yang saya buat (Silahkan kalian download terlebih dahulu)..
Kemudian kalian coba melanjutkan praktek kita yang kemarin belum selesai. Saya sudah membuat langkah-langkahnya, silahkan kalian ikuti.
Jangan lupa untuk mengirimkan hasilnya ya.. Kemudian juga ada tugas, waktunya 1 minggu. Silahkan kalian coba analisa ya..

Kesepakatan Kelas : Perpanjangan waktu pengumpulan tugas hingga hari Rabu (15 Desember 2010 pukul 19.00). Mohon menjadi perhatian..!

  • Bahan pertemuan VII (Pendalaman Javascript, saya ambil dari materi e-learningnya PENS-ITS) : Silahkan anda download disini (Tugas yang tertera pada modul tersebut, silahkan dikirimkan via email paling lambat hari Minggu, 19 Desember 2010 jam 10.00).

Rumus Penilaian (Nilai Skala 100): (2*Nilai Harian ((Tugas1+Tugas2+Tugas3+Presentasi)/4))+Mid+UAS)/4
Berikutnya untuk merubah nilai dari Skala 100 ke Skala 5 dan Nilai Huruf digunakan tabel konversi yang ada dibuku pedoman akademik. 

    Thursday, August 5, 2010

    Powerpoint (D3 Farmasi Progsus - Genap 0910)

    Saya punya dua buah file Power Point hasil karya mahasiswa :
            Bisa anda download disini.

    Pada powerpoint tersebut, anda bisa mempelajari teknik penggunaan Microsoft Power Point mulai dari dasar/pengenalan hingga tingkat lanjut.

    Tugas Bapak/Ibu pada hari ini (Kamis/5 Agustus 2010) : Membuat slide power point tentang tugas dan kewajiban Bpk/Ibu sekalian ditempat kerja.

    Jumat esok (6 Agustus 2010), silahkan Bapak/Ibu presentasikan didepan kelas untuk mendapatkan penilaian.
    Terima kasih.