galianNet: 2012

Tuesday, September 25, 2012

Membuat Scroll Bar seperti Apple Mac OS X Lion pada website dengan jQuery nanoScroller

Pernahkah anda memperhatikan Scroll bar yang ada pada Ticker Facebook (Gambar 0.)

Gambar 0. Nano Scroller pada Ticker Facebook

Menurut saya Scroll bar nya mempunyai nilai estetika, tidak pernah terpikir akan scroll bar seperti itu. Scroll bar pada facebook tersebut terinspirasi dari Sistem Operasi besutan Apple yaitu Mac OS X Lion dimana scroll bar seperti itu sudah tertanam di dalam sistem operasi Apple tersebut. Terkait dengan scroll bar pada Ticker facebook yang mirip dengan scroll bar pada system operasi Mac OS X Lion besutan Apple terdapat javascript library yang di kembangkan dari jQuery yaitu nanoScroller yang di prakarsai oleh James Florentino berlisensi freeware yang dapat diterapkan pada website. Hal tersebut dapat membantu kita sebagai programmer web yang menginginkan tampilan web yang indah dengan salah satunya menambahkan plugin nanoScroller tersebut. Tidaklah sulit bagi anda yang terbiasa dengan menggunakan jQuery dengan hanya menambahkan beberapa file yang dapat di unduh di github. Untuk dapat membuatnya berikut di bawah akan di jelaskan caranya.

Pertama – tama kita harus mengetahui struktur html nya terlebih dahulu (lihat gambar di bawah)

Gambar 1. Skema HTML

Dari gambar diatas dapat kita lihat pada bagian header (<head>) terdapat file-file yang di ikut sertakan pada Nano Scroller ini, gambar berikut di bawah ini merupakan file – file yang di sertakan pada header :

Gambar 2. File yang di sertakan pada nano Scroller

Dapat kita lihat dari gambar 2 diatas bahwa ada 6 file yang di ikut sertakan dalam pembuatan nano scroller ini diantaranya berupa file css yang terdiri dari nanoscroller.css, main.css dan style.css, dan juga ada 3 file javascript yang terdiri dari jquery-1..3.2.min.js, jquery.nanoscroller.min.js dan main.js.

Dari file – file yang di sertakan tersebut nanoscroller.css merupakan file yang mengatur tampilan content scroll bar, file main.css berfungsi mengatur tampilan seluruh halaman sedangkan file style.css merupakan file yang mengatur tampilan nano scroll.

Selain file css terdapat pula file javascript yang di sertakan diantaranya file jquery-1.3.2.min.js merupakan core javascript library, file jquery.nanoscroller.min.js berfungsi sebagai javascript library yang lebih sfesifik untuk nano scroller, sedangkan file main.js bisa dikatakan sebagai constructor agar elemen <div> pada html mempunyai scroll bar nanoscroller.

Fungsi dari masing – masing file yang di sertakan pada header tersebut diatas sedikitnya telah saya jelaskan selanjutnya kita harus mengetahui bagaimanakah kode program pada body html. Berikut gambar kode program pada body html.

Gambar 3. Body Program

Dapat kita lihat pada body program hanya ada elemen <div> dengan id=main dan di dalamnya terdapat <div> dengan class=nano kemudian didalamnya terdapat <div> dengan class=content dan class=pane, di dalam <div> dengan class=pane terdapat <div> dengan class=slider. Kita dapat menaruh isi dari nano scroller tersebut di dalam <div> dengan class=content dan scroll bar akan otomatis muncul pada saat kursor mouse berada diatas scroll bar tersebut.

Demikian cara pembuatan scroll bar Mac OSX Lion yang dapat di terapkan pada website. Anda dapat melihat demo nya di sini, atau unduh di sini.

semoga bermanfaat.

Wednesday, August 29, 2012

Membuat Elemen Table pada Web mempunyai sudut lengkung

Perkembangan teknologi web dalam mempercantik tampilan sudah semakin berkembang dengan hadirnya CSS3, CSS3 dapat membentuk elemen Table atau elemen lainnya pada website mempunyai sudut lengkung, contohnya seperti gambar di bawah :

Gambar 1. Contoh

kebutuhan sistem dalam tutorial ini adalah :
- OS Windows atau lainnya yang telah terinstall XAMPP atau WAMP atau sejenisnya
langkah - langkahnya sebagai berikut :
sebelum kita terjun ke kode program alangkah baiknya kita mengetahui struktur File program nya :

Gambar 2. Struktur File

seperti kita lihat diatas hanya ada 2 file (index.html dan css.css). sekarang kita lihat file index.html

Gambar 3. File Index.html

Gambar 4. File CSS.css

dari gambar - gambar diatas dapat kita ketahui bahwa file index.html (Gambar. 3) menyertakan file css.css (Gambar. 3 baris ke 3) dengan kode seperti ini "<link rel="stylesheet" href="css/css.css" type="text/css">" untuk penanganan table pada index.html yang akan kita rubah sudut - sudutnya menjadi melengkung.

sedangkan kode table pada file index.html seperti berikut ini :

<tr>

</tr>

</table>

pada kode table diatas terdapat class="round" nah kode inilah yang akan jadi pengenal file css.css untuk mengenali table yang akan dirubah sudutnya, sedangkan file css nya seperti pada gambar 4. ".round" pada file css tersebut mengacu pada class="round" yang terdapat pada fileindex.html

semoga bermanfaat, demo aplikasinya dapat di unduh di sini

Tuesday, July 17, 2012

Membuat Instalasi Windows 7 menggunakan USB secara manual

Kita tahu bahwa Media Disc (CD/DVD) mempunyai kelemahan apabila sering digunakan, hal itu dikarenakan proses pembacaan optik media disc dan perputaran dari media disc tersebut, tidak seperti USB Flash Disk yang tahan lebih lama (merk tertentu ada juga yang umurnya tidak lama).

Nah, hal tersebut membuat saya untuk berinisiatif memindahkan media instalasi windows 7 dari CD/DVD ke USB Flash Disk. caranya tidaklah sulit hanya dengan mengetikan beberapa perintah DOS Command kemudian Copy content yang ada dalam DVD instalasi Windows 7 ke USB Flash Disk.

Kebutuhan :

USB Flash Disk berkapasitas minimun 8Gb
DVD Instalasi Windows 7

Langkah - langkah :

Tancapkan USB Flash Disk yang akan dijadikan Instalasi Windows 7
Tekan WIN+R kemudian ketik CMD lalu OK
Ketik diskpart dan tekan ENTER.
Ketik list disk, tekan ENTER dan pilihlah yang mana adalah USB flashdisk anda, apabila hanya satu USB Flash Disk yang di colokan maka yang di pilih adalah disk1.
Ketik select disk 1 dan tekan ENTER.
Ketik clean dan tekan ENTER.
Ketik create partition primary lalu tekan ENTER.
Ketik select partition 1 dan tekan ENTER
Ketik active dan tekan ENTER.
Ketik format fs=fat32 dan tekan ENTER
Ketik assign dan tekan ENTER
Ketik exit dan tekan ENTER.
Masukkan disk DVD windows 7 dan copy lah semua isi DVD tadi ke USB Flaskdisk anda.

Monday, April 9, 2012

Membuat Autocomplete Sederhana menggunakan jQuery

Perkembangan teknologi web saat ini semakin dimudahkan dengan hadirnya Javascript Library yang sangat bermanfaat bagi para Programmer Web, seperti halnya jQuery. jQuery adalah sebuah Javascipt Library yang berjalan untuk penanganan Event dalam HTML. jQuery sedikitnya telah mempermudah interaksi halaman Web yang dulu mungkin hanya DOM (Document Object Model) yang digunakan untuk penanganan event HTML bagi saya.

Dalam jQuery juga tidak hanya basic Library Javascript tetapi ada Library User Interface (jQuery UI) yang di dalam nya terdapat beberapa UI Widget, Interaction, Utilities dan Effects, saya tidak akan menjelaskan satu persatu tentang jQuery UI karena pada bahasan kali ini kita akan membahas jQuery UI Widgets Autocomplete.

jQuery Widgets Autocomplete adalah sebuah fasilitas yang memberikan saran dalam pencarian selagi kita mengetikan apa yang kita cari atau inginkan pada input text HTML seperti Input Text Pencarian Google. awalnya saya pun tidak mengetahui nama dari fasilitas yang memudahkan pencarian ini, tetapi lama kelamaan dengan terus menerus searching di web akhirnya dapat.

Yang di butuhkan dalam eksperimen ini adalah :

XAMPP atau WAMP atau apa lah yang penting Apache, PHP, Mysql sudah terinstall di OS tapi yang saya gunakan dalam artikel ini adalah XAMPP
jQuery

Kasus dalam ekpresimen ini adalah kita akan mencari data mahasiswa

yang harus kita siapkan adalah Database Autocomplete yang di dalam nya terdapat Tabel Mahasiswa dengan menggunakan Phpmyadmin.

setelah itu buatlah tabel Mahasiswa dengan field NRP Integer(11), Nama Varchar(40) sehinngga Tabel data mahasiswa nya akan tampak seperti gambar dibawah.

Gambar 1. Tabel Mahasiswa

setelah Database siap, selanjutnya kita siapkan file index.html, kode HTML nya seperti di bawah,



jQuery Autocomplete


 


Nama  :

setelah itu kita siapkan file PHP untuk menangani request dari halaman index diatas, berikut kode file PHP nya,

Ok, aplikasi autocomplete sederhana telah selesai, untuk kode lengkap nya silahkan download di sini.
selamat mencoba, terima kasih

Thursday, April 5, 2012

Cek Nomor HP

Seiring dengan persaingan layanan dari operator - operator Seluler maupun Fixed Phone saat ini yang menyebabkan seseorang memiliki lebih dari satu Nomor HP, dan hal itu menyebabkan tidak tahu nomor HP nya sendiri. ini terjadi ketika saya diminta untuk mengisikan pulsa internet teman, cara untuk mengetahui Nomor HP sendiri tidak lah sulit hanya menggunakan USSD call (semua operator GSM) dari HP atau Modem keluaran sekarang sudah menyediakan USSD Call.

Berikut Cara Untuk Mengetahui Nomor HP :

Telkomsel : Ketik *808# lalu tekan OK/Yes
Indosat : Ketik *777*8# lalu tekan OK/Yes
XL : Ketik *123*7*1*1*1# lalu tekan OK/Yes

[Catatan : Untuk XL selalu Berubah, jika kode diatas tidak mengeluarkan hasil yang diharapkan gunakan *123# terus pilih Info Layanan, terus pilih My Info, terus pilih Cek Profile , terus pilih Info Nomor]

Axis : Ketik *2# lalu tekan OK/Yes
Tri : Ketik *998# lalu tekan OK/Yes

jika anda menggunakan Modem GSM masukan kode - kode diatas pada menu USSD,

semoga bermanfaat.

Friday, February 3, 2012

Membuat Flash Disk menjadi Instalasi Windows XP SP3

suatu ketika laptop saya DVD-Rom nya tidak dapat berfungsi dengan baik dikarenakan termakan waktu dan sering digunakan untuk menonton DVD bajakan yang secara tidak langsung merusak Optik dari DVD-Rom tersebut. hal tersebut dihadapkan pada saat System Windows yang nampaknya sudah harus di Install ulang sedangkan DVD-Rom nya tidak berfungsi, akhirnya Flash Disk lah satu-satunya harapan saya untuk menginstall ulang Windows XP SP3.

agar Flash Disk dapat Bootable Windows XP kita membutuhkan Software FlashBoot yang bisa anda unduh di sini, tapi sebelumnya format dulu flash disk yang akan digunakan dengan menggunakan HP USB Disk yang dapat di download di sini. dan juga siapkan File ISO Windows XP SP3 nya.

setelah anda download software yang dibutuhkan berikut langkah - langkah teknis nya :

1. Formatlah Flash Disk dengan menggunakan HP USB Disk, pilih FAT32 untuk File System nya.

2. Jalankan Flashboot yang telah anda download dan Install, tampilannya awalnya seperti gambar di bawah, kemudian klik Next.

3. Pilihlah Pilihan yang pertama yaitu CD - USB, seperti pada gambar dibawah :

4. selanjutnya pilih Image File dan masukan File ISO Windows XP, Klik Next, seperti gambar di bawah :

5. kemudian centang pada "Ignore CD/DVD Autodetection result (show all option)" sehingga akan merubah menu pilihan diatas nya dan pilih "Convert Windows XP/2000 Installation CD" dan klik Next seperti pada gambar dibawah :

6. pilih Media USB Device yang akan anda gunakan sebagai Instalasi Windows XP, klik Next seperti pada gambar di bawah :

7. Masukan Volume Label untuk Flash Disk anda dan pilih File System nya FAT32 dan klik Next seperti pada gambar di bawah :

8. Klik Format Now

selanjutnya akan muncul dialog yang memuat log di dalamnya, Tunggulah hingga selesai.

setelah itu restart laptop dan aturlah Boot Order di BIOS anda dan pastikan USB Flash Disk dapat di BOOT pertama kali untuk sementara.

selamat mencoba, semoga bermanfaat

Perbaiki Flashdisk yg tidak bisa di format

suatu ketika teman sekantor memindahkan data dari Notebook ke Flashdisk yang ternyata data yang dia pindahkan menyebabkan Flashdisk menjadi lambat apabila di baca, data yang dia pindahkan tersebut berupa file transfer video dan gambar dari Handycam yang menggunakan media DVD berukuran kecil DoubleSided Single Layer.
file tersebut apabila di pindahkan lagi akan muncul pesan "Cyclic Redundancy" besar kemungkinan menurut saya karena file video tersebut berasal dari media DVD hasil transfer dari Handycam, pengalaman saya waktu dulu ketika belum ada flashdisk dan media penyimpanan yang sering digunakan adalah CD/DVD Disk. CD/DVD apabila sering di baca akan tergores pada bagian bawahnya yang akan menyebabkan data yang berada pada CD/DVD tersebut rusak dan akan menyebabkan "Cyclic Redundancy" pada saat di copy.

lama-kelamaan saya lihat properties dari file yang di salin ke FlashDisk tersebut merupakan Read-Only File System kalau Windows yang baca mah, Linux Slax juga sama. dan untuk merubah Access Rights dari Read only ke read and write tidak berhasil, akhirnya yang punya FlashDisk menyuruh saya untuk memformatnya.

pada saat memformat pertama kali komputer malah hang, coba format menggunakan Linux Slax juga sama, pake program dari HP USB FORMAT TOOL juga tidak bisa malah muncul pesan error "Device Media Write Protected", akhirnya browsing di internet dan ternyata FlashDisk juga bisa di Flash (kayak HP aja).

OK, Lets go to the RIOT

cara cara perbaiki FlashDisk nya adalah :

pertama kita harus tahu VID (Vendor ID) dan PID (Product ID) dari Flash Disk tersebut dengan menggunakan Software USB View yang bisa di unduh di sini seperti pada gambar di bawah :

penjelasan VID dan PID nya ada di sini.

kemudian bukalah situs http://flashboot.ru kemudian cari software untuk Flash yang cocok dengan Flash Disk anda dengan melakukan pencarian berdasarkan VID dan PID flash disk anda, download dan Flash UFD anda.

semoga bermanfaat dan semoga berhasil.