Wednesday, October 5, 2011

Intelligent Agent (Sebuah teori Kecerdasan Buatan dalam Software Engineering)


Ternyata apa yang selama ini dijalani bukan hanya menjadikan seperti katak dibawah tempurung, tapi seperti katak dibawah tempurung dibawah helm. Dunia diluar sana jauh lebih berwarna ternyata. Hehe..

Dikira intelligent agents adalah sebuah teori baru dalam software engineering, tapi ternyata diluar sana sudah sedemikian pesat. Okelah, gak apa2. Kita shared saja apa sudah diketahui. Silahkan..

Definisi
Guralnik (1983) menjabarkan definisi agen yang diperolehnya dari kamus Webster’s New World Dictionary, sebagai :
A person or thing that acts or is capable of acting or is empowered to act, for another

Dari kalimat tersebut Wahono (2001) menjabarkan dua poin penting pengertian agen :

  • Agen mempunyai kemampuan untuk melakukan suatu tugas/pekerjaan
  • Agen melakukan tugas/pekerjaan tersebut dalam kapasitas untuk sesuatu atau untuk orang lain.

Kemudian Caglayan et al., (1997), mendefinisikan software agent sebagai : Suatu software komputer yang memungkinkan user mendelegasikan tugas/pekerjaan kepadanya dan software komputer tersebut mampu bekerja secara mandiri (autonomously).
Pada prakteknya dalam suatu sistem dimungkinkan terdapat lebih dari satu agent yang saling bekerja sama. Sistem agent dengan lebih dari satu agent disebut multi agent system (MAS). Multi agent System adalah suatu paradigma pengembangan sistem dimana dalam suatu komunitas sistem terdapat beberapa agent, yang saling berinteraksi, bernegosiasi dan berkoordinasi satu sama lain dalam menjalankan pekerjaan (Romi, 2001)

Karakteristik Agent
Wahono (2001) merangkum karakteristik yang dimiliki software-software agent saat ini :
  1. Autonomy
    Agent harus dapat melakukan tugas secara mandiri tanpa dikontrol secara langsung oleh user, agent lain ataupun oleh lingkungan (environment). Woolridge et al., (1995) menyatakan agent harus dapat mengontrol aksi yang mereka perbuat. Dan kemampuan ini berbanding lurus dengan intelligence dari agent.
  2. Intelligence, Reasoning dan Learning
    Karakteristik ini merupakan karakteristik dasar untuk bisa disebut agent. Pada konsep intelligence, ada tiga komponen yang harus dimiliki : internal knowledge base, kemampuan reasoning berdasar pada knowledge base yang dimiliki dan kemampuan learning untuk beradaptasi terhadap lingkungan.
  3. Reactivity
    Karakteristik  agent  yang lain adalah kemampuan untuk bisa cepat beradaptasi dengan adanya perubahan informasi yang ada didalam suatu lingkungan (environment). Lingkungan itu bisa mencakup:  agent lain, user, adanya informasi dari luar, dsb  (Brenner et. al., 1998)
  4. Proactivity dan Goal-Oriented
    Proactivity boleh dikata adalah kelanjutan dari sifat  reactivity.  Agent tidak hanya dituntut bisa beradaptasi terhadap perubahan lingkungan, tetapi juga harus mengambil inisiatif langkah penyelesaian apa yang harus diambil  (Brenner et. al., 1998). Untuk itu  agent  harus didesain memiliki tujuan  (goal) yang jelas, dan selalu berorientasi kepada tujuan yang diembannya (goal-oriented).
  5. Communication and Coordination Capability
    Agent harus memiliki kemampuan berkomunikasi dengan user dan juga  agent  lain. Misalkan masalah komunikasi dengan user (termasuk user interface dan perangkatnya), kemudian masalah koordinasi, dan kolaborasi dengan agent lain menjadi isu penting dalam pengembangan Multi Agent System (MAS). Untuk dapat berkoordinasi dengan agent lain dalam menjalankan tugas, diperlukan bahasa standard untuk berkomunikasi. Salah satu contoh bahasa dan protokol komunikasi antar agent adalah Knowledge Query and Manipulation Language (KQML) dan Knowledge Interchange Format (KIF).

Ada satu contoh aplikasi sederhana yang cukup menarik. Namanya Ant Lines. 
Screen shootnya seperti berikut :

Contoh program ini memodelkan perilaku semut ketika mengikuti pemimpinnya menuju sumber makan. Si pemimpin bergerak menuju makanan secara acak, kemudian dengan jeda kecil, semut kedua mengikuti dengan jalur langsung menuji sipemimpin berada. Setiap semut berikutnya mengikuti semut didepannya dengan cara yang sama.
Meskipun si semut pemimpin mungkin mengambil jalur yang sangat memutar untuk menuju sumber makanan, secara mengejutkan jejak semut mengadopsi bentuk yang halus. Meskipun belum jelas apakah model ini adalah model biologis akurat dari perilaku semut, ini adalah eksplorasi matematika dari perilaku yang muncul dari serangkaian agen yang saling mengikuti secara serial.

Friday, September 23, 2011

Artificial Intelligence (Gasal 2011)

Materi Perkuliahan :
  1. Kontrak Kuliah
    GBPP MK Artificial Intelligence/Kecerdasan Tiruan bisa download disini : http://www.4shared.com/document/GdwlUC5_/gbpp-kecerdasan-buatan.html
  2. Pengantar dan Penjelasan Umum AI
    Materi Penjelasan Umum AI bisa didownload disini : http://www.4shared.com/document/Yeefm4x3/Pert1-PendahuluanAI.html
    Pada bagian ini dibahas mengenai definisi dan history dari bidang ilmu AI. Kemudian ada pembahasan mengenai komponen dasar AI, perbedaan antara AI dan kecerdasan alami serta contoh-contoh penerapan teknologi AI yang telah ada di dunia ini.
  3. Masalah dan Ruang Keadaan (atau Problems and State Space)
    Materi Masalah dan Ruang Keadaan bisa didownload disini : http://www.4shared.com/document/qiTb60Uc/pert2-MasalahDanRuangKeadaan.html
    Inti dari bagian ini adalah sharing mengenai teknik penyelesaian masalah. Bagaimana kita dapat mendefinisikan sebuah masalah dengan tepat. Ruang keadaan atau state space dibahas tuntas untuk menguraikan masalah hingga tujuan yang diharapkan.
  4. Pelacakan/Pencarian (Searching)
    Materi bisa didownload disini : http://www.4shared.com/document/7SJS9xfZ/pert3-PencarianDanPelacakan.html
    Inti dari materi ini adalah mencari solusi dari suatu permasalahan melalui sekumpulan kemungkinan ruang keadaan (state space)

    Oke, sebelum kita lanjutkan ke materi selanjutnya. Saya ingin anda-anda mengerjakan tugas mandiri ini terlebih dahulu.

    Jelaskan dengan disertai contoh kasus, mengapa permasalahan harus dijabarkan ke dalam ruang keadaan dan diperdalam dengan teknik pencarian? Bagaimana jika tidak menggunakan kedua metode tersebut?

    Anda jawab bersama teman (1 lembar jawaban dikerjakan oleh 2 mahasiswa) dan dikirim ke email saya paling lambat hari Kamis 27 Okt 2011 jam 17.00 WIB.
  5. Representasi Pengetahuan

    ==================================
    Kisi-kisi ujian mid AI gasal 2011 :
    • Dua soal mengenai logika teori. Anda akan diminta untuk menjelaskan sebuah teori yang ada didalam dunia AI disertai dengan contoh.
    • Anda juga diminta membuat ruang keadaan untuk dua buah kasus yang sudah saya tentukan di soal. Jadi banyak latihan membuat ruang keadaan akan sangat membantu
    • Anda juga akan diminta untuk membuat pencarian terhadap sebuah kasus.
    • Total soal ada 4 untuk dikerjakan selama 90 menit.
    • Semoga sukses..
    ==================================
    Jawaban mid gasal 2011, bisa anda download disini : http://www.4shared.com/document/NBoPqxAL/mid__ganjil_1112_ai-jawaban.html
    Untuk nilainya sabar ya.. Sedang saya perjuangkan.. :)
    ==================================
    • Ketidakpastian
      Inti dari materi ini adalah bagaimana merepresentasikan permasalahan yang mengandung unsur ketidakpastian. Materi ini bisa anda download disini : http://www.4shared.com/document/dvMcHir5/pert6-representasi-ketidakpast.html
    • Sistem Pakar
      Slide kuliah bisa didownload disini : http://www.4shared.com/office/aPCNJHdj/pert7-sistem-pakar.html. Silahkan juga dibaca suplement bacaan yang saya ambil dari tulisan Ari Fadli di web IlmuKomputer.Com : http://www.4shared.com/office/C249viP1/pert7-Supl-Ari_Fadli_Sistem_Pa.html.
    • Logika Samar
    • Jaringan Syaraf Tiruan
      Slide kuliah silahkan didownload disini : http://www.4shared.com/office/f40rilEI/pert9-jst.html
    • Algoritma Genetika
    ===========================
    Nilai akhir anda :
    UAS MID Harian Skala 100 Skala 5 Huruf
    anthony 70 72 80 85 4 A
    eksyan 65 56 69 72.85714 3.2 B
    pranoto 73 62 83 85 4 A
    ali 60 68 69 73.42857 3.4 B
    tri putra 78 87 79 85 4 A
    maryanto 69 67 75 80 3.7 B
    agus 67 73 67 78.28571 3.7 B
    bayu 70 69 69 79.42857 3.7 B
    febri 55 64 56 65.71429 2.6 C
    hendra 57 38 60 60.57143 2.1 C

    DSS (Gasal-2011)

    Materi Pertemuan :

    1. Kontrak Kuliah, Penjelasan Materi secara global (GBPP dan SAP)
      GBPP DSS untuk semester gasal 2011/2012 bisa didownload disini : (http://www.4shared.com/file/kWEyzVSQ/gbpp-dss.html)
    2. Dasar Konseptual DSS
      Materi bisa didownload disini : http://www.4shared.com/document/DGva-S2d/pert1-PengantarDSS.html
    3. Kerangka DSS
      Materi bisa didownload disini : http://www.4shared.com/document/w0lVlCL2/pert2-Kerangka_DSS.html 

      Sebelum masuk ke sub-bab berikutnya, saya ingin ada tugas mandiri mahasiswa terlebih dahulu. Berikut deskripsi tugasnya :
      Ada banyak metode single DSS : promethe, fuzzy, AHP, topsis, dll. Sedang metode-metode untuk group DSS : borda, Delphi group, criteria rating, dll. Anda dan seorang teman saya minta mencari artikel, paper, jurnal yang membahas kasus single DSS dan group DSS.

      Dari kedua paper yang anda peroleh, saya minta anda buat artikel mengenai case dan metode cara penyelesaiannya.

      Artikel tersebut, harus sudah anda emailkan ke saya paling lambat hari Kamis 27 Okt 2011 sore pukul 17.00 WIB agar Sabtu depan bisa kita diskusikan. Oke Guys, silahkan anda kaji secara mandiri terlebih dahulu..
    4. Model-model/metode single DSS
      • Fuzzy
        Saya menggunakan file yang saya temukan di internet untuk menyampaikan materi fuzzy pada anda semua.
        - Slide kuliah bisa anda download disini
        - Sebagai supplement, anda bisa membaca pengantar fuzzy yang bisa didownload disini

      =======================================
      Untuk kisi-kisi ujian mid gasal 2011 :
      • Persiapkan paper terkait DSS, paper nantinya ikut dikumpulkan
      • Pelajari skema sistem DSS
      • Pelajari kasus-kasus DSS dengan metode fuzzy
      • Pelajari komponen sistem DSS
      • Total ada 6 soal, dengan point maksimal 100 dalam waktu maksimal 100 menit
      • Semoga sukses..
      =======================================
      Jawaban UTS, bisa anda download disini : http://www.4shared.com/document/Jmi0cbTb/mid_ganjil_1112_spk-jawaban.html
      =======================================

      • Pengantar GDSS (Group Decision Support System)
        - Materi kuliah bisa didownload di sini : http://www.4shared.com/office/mqgf8sbF/pert6-GDSS.html
        /pert61-ModellingGDSS-Borda.html
      • Model-model/metode GDSS
        - Modelling perhitungan GDSS bisa didownload disini : http://www.4shared.com/office/AI7FWTem
      =================================
      Jawaban ujian akhir, bisa anda download disini : http://www.4shared.com/office/MvCnfVYG/jawaban-uas_ganjil_1112_spk-fo.html
      Nilai akhir anda :
      UAS MID harian Skala 100 Skala 5 Huruf
      anthony 64 91 75 73.5 3.4 B
      eksyan 41 50 75 51.75 1.7 D
      pranoto 59 83 85 71.5 3.2 B
      ali 40 52 65 49.25 1.5 D
      tri putra 80 90 80 82.5 3.9 B
      maryanto 70 80 80 75 3.5 B

      Thursday, September 22, 2011

      Profil, Sejarah dan Arsitektur Android OS


      Android adalah sebuah Operating System (OS) yang dikembangkan oleh Google untuk mobile device atau yang lebih kita kenal sebagai smartphone. OS ini bersifat open source.

      Salah satu kelebihan dari Android adalah ketersediaan aplikasi dari berbagai macam kategori: sosial, hiburan, permainan, dsb. Para developer bisa mengembangkan aplikasi sesuai dengan minat mereka masing-masing menggunakan Software Development Kit (SDK) yang telah didistribusikan oleh Google. Karena Android adalah OS dengan bentuk open source, OS ini dapat terus dikembangkan dan memiliki evolusi yang sangat cepat sesuai dengan pertambahan jumlah aplikasi.

      Sejarah Android

      Pada bulan Juli tahun 2005, Google mengakuisisi banyak perusahaan start-up, termasuk sebuah perusahaan kecil perancang software untuk mobile phones bernama Android Inc. Salah satu pendiri Android Inc adalah Andy Rubin, yang sekarang menjabat sebagai Director of Mobile Platforms di Google.

      Akuisisi Android Inc. diikuti oleh rumor tentang rencana Google membuat handsetnya sendiri untuk membantu pengembangan fungsi mobile searchnya. Kabarnya juga, handset ini akan menghadirkan location-based servicesserta mengimplementasikan semua ide dari Google Labs, termasuk dua aplikasi terfavorit, Maps dan Mail.

      Setelah penantian cukup panjang, akhirnya perusahaan yang berbasis di California ini mengumumkan pada 5 November 2007 bahwa mereka sedang merancang sebuah open-source OS baru bernama Android untuk bersaing dengan Symbian, Microsoft, dan lain-lain.

      Arsitektur Android

      Google menggambarkan Android seperti sebuah tumpukan software. Setiap lapisan dari tumpukan ini terdiri dari beberapa program yang mendukung fungsi-fungsi spesifik dari sistem operasi. Inilah susunan Android dilihat dari lapisan dasar hingga lapisan paling atas!

      Di lapisan teratas ada aplikasi itu sendiri. Di lapisan inilah kamu akan menemukan fungsi-fungsi dasar smartphone seperti menelepon dan mengirim pesan singkat, menjalankan web browser, mengakses daftar kontak, dan lain-lain. Inilah lapisan yang akan sering diakses oleh para pengguna. Mereka mengakses fungsi-fungsi dasar tersebut melalui user interface.

      Google menjabarkan aplikasi ke dalam empat blok bangunan dasar (tidak semua aplikasi mempunyai keempatnya) yaitu :

      • Activities ketika sebuah aplikasi memunculkan screen di layar. Sebagai contoh, sebuah aplikasi GPS mempunyai screen peta dasar, screen rencana perjalanan, dan screen rute di atasnya. Ketiga penampakan screen inilah yang disebut activities.
      • Intents mekanisme perpindahan dari suatu activity ke activity lainnya. Sebagai contoh ketika merencanakan perjalanan pada aplikasi GPS, intents akan menginterpretasi input dan mengaktifkan screen rute di atas screen peta.
      • Services serupa dengan service di PC dan server, program yang berjalan di belakang layar, tanpa interferensi dari pengguna.
      • Content Provider yaitu mekanisme yang memungkinkan sebuah aplikasi berbagi informasi dengan aplikasi lainnya.

      Fitur-Fitur Android :

      • Application framework mendukung pemakaian komponen-komponen yang mudah diganti dan digunakan kembali
      • Dalvik virtual machine dioptimalkan untuk perangkat mobile
      • Integrated browser dirancang berdasarkanengine browser open source WebKit
      • Optimized graphics didukung oleh custom 2D graphics library; 3D graphics berdasarkan OpenGL ES 1.0 specification (dukungan hardware acceleration optional)
      • SQLite untuk penyimpanan database terstruktur
      • Media support : unuk mendukung berbagai audio, video, dan still image formats (MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, GIF)
      • GSM Telephony, Bluetooth, EDGE, 3G, and WiFi (hardware dependant)
      • Kamera, GPS, compass, and accelerometer (hardware dependant)
      • Rich development environment meliputi device emulator, tools untuk debugging, memory dan performance profiling, serta plugin untuk Eclipse IDE.


      #Disadur dari http://apac.sec.samsung.com/id/galaxyseries/

      Thursday, June 30, 2011

      Aplikasi Komputer (Pras Khusus D3 Farmasi Progsus)

      Materi Perkuliahan :
      1. Pengoptimalan Penggunaan Laptop (sudah tersedia panduannya)
      2. Pengenalan Windows Explorer (sudah tersedia panduannya)
      3. Pengenalan Ms. Word (sudah tersedia panduannya)
      4. Pengenalan Ms. Excel
      5. Pengenalan Ms. PowerPoint
      6. Pengenalan SPSS
      Materi silahkan anda download disini.

      Monday, June 6, 2011

      Mobil Impian..

      Banyak kalimat petuah yang mengajarkan untuk menuliskan segala sesuatu yang diingin agar hal tersebut tertanam di dunia bawah sadar otak kita. Tujuannya adalah agar pikiran kita, sadar dan bawah sadarnya, termotivasi untuk memenuhi impian yang telah kita tanamkan pada otak bawah sadar kita.

      Karenanya saya mencoba menuliskan beberapa mobil impian ini. Harapannya : Tentu saja.. Suatu saat saya menginginkannya.. hahahaaa.. Amin..

      Ford Raptor

      Kia Optima 2011

      Ferrari-458

      Lexus LFA

      Porsche Panamera 2011

      Terakhir, impian dari kecil : Dodge Challenger SR.

      Wednesday, May 11, 2011

      Mesin Turing untuk deteksi string input

      Aaaaaakkkhhhhh... Minggu kemarin dapat tugas Komputasi untuk membuat rancangan mesin Turing yang dapat mendeteksi string input 0 dan 1 yang berjumlah sama..

      Skenarionya : Jika inputan memiliki jumlah nol dan satu (ex : 01, 0011, 0101) maka string input tersebut diterima. Jika tidak, maka mesin turing harus Halt..

      Cukup lama untuk mencari bahan tugas tersebut, walau akhirnya dengan cukup malu, ternyata dibuku pegangan wajiblah kutemukan jawabannya.. (Padahal sumpah.. Buku tuh bolak-balik kubaca.. Tapi baru di detik terakhir kubaca dengan cermat penjelasannya.. He..)

      Anda bisa mendownload skema mesin turing tersebut di sini, dan semoga bisa membantu..

      Monday, May 2, 2011

      Praktek statistik (TI - Genap 2010/2011)

      Guys, seperti yang saya sampaikan di kelas kemarin, berikut saya postingkan beberapa untuk kita diskusikan pada tanggal 8 Mei 2011 :

      Rencana materi 14x pertemuan kita :

      Pertemuan
      Materi
      1
      Kontrak belajar dan pendahuluan (penjelasan peranan SPSS dalam penelitian)
      2
      Transformasi data dalam SPSS
      3
      Teknik membuat tabel statistik dengan SPSS
      4
      Statistik Deskriptif
      5
      One sample T Test
      6
      Paired sample T Test
      7
      Independent Sample T Test
      8
      Korelasi Bivariate
      9
      Korelasi Spearman dan Kendall
      10
      Korelasi Partial
      11
      Regresi Sederhana
      12
      Regresi Berganda
      13
      Review dan Tugas
      14
      Ujian Akhir
      1. Modul Praktikum Statistik, bisa anda download disini.
      2. Data tugas transformasi data, bisa anda download disini.
      Tugas anda adalah :
      1. Carilah mean dan median untuk setiap pertanyaan yang ada di file nomor 2 di atas.
      2. Hitunglah nilai t tabel satu sisi dan dua sisi, f tabel satu sisi dan r tabel satu sisi dan dua sisi, untuk alpha 1%, N=50, df1=1.
      ===============================================
      Guys, untuk persiapan ujian akhir praktek SPSS, berikut saya berikan contoh-contoh soal :
      1. Soal latihan analisa validitas dan reliabilitas dan simulasi analisa terkait validitas dan reliabilitas. (Bisa anda download disini).
      2. Soal latihan analisa T-Test (Bisa anda download disini
      3. Soal latihan analisa korelasi dan regresi (Bisa anda download disini
      ===============================================
      Guys, ini soal ujian kalian. Bisa didownload disini. Batas waktu pengumpulannya adalah hari Sabtu, 11 Juni 2011 jam 09.00 via email. Selamat mengerjakan..

          Saturday, March 19, 2011

          Analisa Keputusan - Genap 2010/2011

          Sumber belajar utama : Analisa Keputusan (Pendekatan Sistem dalam Manajemen Usaha dan Proyek), Penulis : Dr. Ir. Kuntoro Mangkusubroto., M.Sc.

          Rencana Pembelajaran (Setengah Semester)
          • Deskripsi Keputusan
          • Teori Pengambilan Keputusan
          • Formalisasi Keputusan
          • Siklus Analisa Keputusan
          • Diagram Keputusan
            • Notasi
            • Penggambaran
          ===================================
          Pertemuan 1 : Pendahuluan (Definisi, sistem, review keputusan secara umum)
          Pertemuan 2 : Teori-teori pengambilan keputusan
          Pertemuan 3 : Formalisasi Keputusan
          Pertemuan 4 : Siklus Pengambilan Keputusan
          Pertemuan 5 : Diagram Keputusan
          Nilai :
          No
          Nama
          Harian
          UTS
          UAS
          1
          Ahyudin
          56
          2
          Andriyanto
          46
          3
          Ali Sofyan Marzuki
          47
          4
          Anthony Prasetya
          79
          5
          Tri Pranoto
          72
          6
          Agus Sudaryanto
          50
          7
          Tri Putra Bangsawan
          84
          Bagi mahasiswa yang mendapatkan nilai kurang memuaskan, mohon untuk lebih giat lagi dalam belajarnya...
          Anda bisa mendownload jawaban mid disini.

          Pertemuan 6 : Pengantar Pengambilan Keputusan Kelompok
          Pertemuan 7 : Pengambilan Keputusan Kelompok

          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>