Thursday, March 10, 2011

Perancangan Sistem Informasi (TI-Genap 2010/2011)

Guys, berikut ini saya sampaikan beberapa link untuk kalian download :



    • Nilai
    No
    Nama
    Harian
    UTS
    UAS
    1
    Ahyudin
    80
    2
    Ali Sofyan Marzuki
    62
    3
    Anthony Prasetya
    85
    4
    Tri Pranoto
    74
    5
    Agus Sudaryanto
    73
    6
    Tri Putra Bangsawan
    59
    Nilai MK ini cukup baik jika dibandingkan dengan MK lain yang saya ampu, hanya saya menginginkan ada peningkatan kinerja kalian agar nilai akhirnya bisa lebih baik.. OK?!
    Anda bisa mendownload jawaban mid disini dan mendownload contoh dokumen perancangan sistem informasi disini.

    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.