Memperindah Tampilan web dengan JQuery Menu yang variatif dan enak di lihat

Assalamu'ailakum wr.wb dan Salam Sejahtera Bagi kita semua

Banyak sekali para programer yang tentunya membuat suatu aplikasi berbasis web sering melibatkan javascript, Seperti membuat dropdown menu, membuat prompt alert, sampai mengimplementasikan ajax biasanya dilakukan dengan menggunakan javascript. Nah, berkaitan dengan javascript ada sebuah library javascript bernama jQuery yang akan memudahkan anda dalam menggunakan javascript. Untuk memahami jQuery, sebaiknya anda sudah terlebih dahulu tahu cara penggunaan javascript. Namun, tenang saja, disini anda tinggal mendownload Jquery tersebut dan menempelkannya di Web yang sedang anda buat tersebut. Di jamin tampinlan web anda akan menjadi indah dan keren.

Ilmu ini saya dapatkan dari pengalaman-pengalaman di waktu saya sedang bimbingan Tugas Akhir, kebetulan waktu itu pembimbing saya adalah dosen yang sangat baik dan pengertian pada mahasiswa, singkat cerita dia menganjurkan tugas akhir saya menggunakan Jquery menu dan Dosen pembimbing pun memberikan refrensi sebuat situs tentang JQuery Menu..!! Situs itu adalah "www.apycom.com" di situs itu banyak sekali JQuery Menu dengan berbagi bentuk dan warna sehingga kita tinggal menyesuaikan dengan web yang akan di bangun oleh kita..Oke Cekidot tanpa harus panjang lebar, panjang tangan atau pun panjang kumis (kaya Tukul arwana) langsung ajah ini screenshoot dari situ www.apycom.com

                                 


Semoga postingan saya bermanfaat dan menjadi refrensi pada para programer, hehehehehhehe

Tetap semangat, teruslah belajar dan jangan pantang menyerah.......Trima kasih Wassalamu'alaikum wr.wb

Template bootstrap radmin untuk mempercantik Web anda

Assalamu’alaikum wr.wb

Kali ini saya akan membagikan template Bootstrap radmin, yang sebelumnya saya sudah modifikasi sedikit sehingga lebih keren dan enak di lihat. Berhubung saya sukanya warna hitam jadi background themanya saya ganti hitam celana jin hihihihi........, dan bagin Login saya sedikit modifikasi dengan memperkecil area loginnya, sebenarnya cukup mudah untuk mengganti backgroundnya, tinggal anda cari yang pas sesuai dengan keinginan hati anda, cari di mana ya tentunya..??? ya di Mbah google masa di toko bangunan Hehehehe, Maka dari itu Hari Ini Saya akan membagikan Gratis dan Cuma2 Template Yang Power Full, Beautiful, i Love You Full yang penting jangan Saipul, hehehhe

Sebelum Mendownload template bootstrap yang gratis ini, sebaiknya anda para programer harus tau apa itu bootstrap??..oke langsung saya jelaskan di sini

Apa itu Bootstrap?
Bootstrap adalah platform baru yang dikembangkan tim twitter. Pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti perkembangan browser. Website yang menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat.
Sekumpulan javascript dan CSS yang dibutuhkan untuk banyak sekali widget ada dalam satu file yang terus di update oleh pengembang. Pemilik website tidak akan lagi disibukkan dengan pengaturan css atau javascript berlebihan. Mereka hanya perlu menentukan gadget atau elemen apa yang ingin ditampilkan dalam bentuk HTML standart bootstrap yang sangat simple.
Misalkan dulu untuk menambahkan menubar di blogspot, maka Anda perlu menyisipkan file CSS, HTML bahkan JavaScript untuk effect tertentu. Kemudian ketika Anda ingin menambahkan dropdown menu, maka per widget, paling tidak Anda butuh menambahkan CSS dan HTML lagi. Belum lagi jika ingin lebih menarik akan dibutuhkan javascript tambahan. Begitu seterusnya setiap penambahan widget selalu dibutuhkan banyak kode. Tapi setelah instalasi bootstrap, Anda hanya perlu menambahkan kode HTML nya saja.

Sudah Tau kah anda tentang Bootstrap, hehehehe Oke kalau begitu Saya akan memberikan penampakan/penggambaran atau dalam bahasa inggrisnya ScreenShoot template bootstrap yang saya akan bagikan secara gratis.....hehee Lihat di bawah ini

                                                         ini loginnya Keren sekali kan

dan ini bagian menunya saya akan tunjukan penampakannya juga, ya khadam mu khadam Ya Khadam mu gaib Ya Khadam mu Bootstrap hadir......... Kaya Jejak paranormal Ajah nieh

                                                                  Lah ini  Penampakannya

Oke untuk Yang Mau minta templatenya atau konsultasi tentang Bootstrap bisa koment dan kirim alamat email anda di blog ini di jamin saya kasih gratis templatenya dan konsultasinya juga gratis

Sekian dari saya wassamu'alaikum wr.wb

Aplikasi Inventori Sederhana Menggunakan Codeigniter

Assalamu'alaikum wr.wb

Aplikasi inventori adalah aplikasi untuk memudahkan perusahaan besar dalam pengadaan barang ataupun pengeluaran barang sehingga proses input datanya lebih efisien dan praktis

Langsung saya ini tampilan aplikasinya

 

Tampilan Pengadaan Barang

 

Tampilan Pengeluaran Barang

                                                                        Master Barang


Semoga bermanfaat dan menjadi refrensi bagi para programer, hehehehe

wangalaikum salam wr.wb

Aplikasi Membuat Surat Ijin Dosen Dan Mahasiswa Dengan Bootstrap

Assalamu’alaikum wr. Wb

Berasal dari Tugas Akhir untuk membuat aplikasi membuat surat ijin mahasiswa dan dosen, Saya bingung themanya gimana2 yaah, sampe akhirnya saya bertapa di gunung Selamet, hehehehhe (bercanda ding)

Saya pun mencari di mbah google dan akhirnya nemuin thema yang menurut saya itu keren dan bagus di mata, ahiiiiii
dan akhirnya Saya berkenalan dengan Bootstrap, hehehehe

Langsung Saja Ini hasil Tugas Akhirnya Saya Yang membuat saya lulus, Horeeeeeeee

                                                                        Tampilan Login

                                                                       Tampilan Beranda

                                                               Tampilan Data Mahasiswa

                                                      Tampilan Tambah Data Mahasiswa

                                                         Tampilan Report dengan PDF





NB: untuk mau yang mau themanya bisa koment dulu, hehehehe

Membuat Form Login Dengan Boostrap

Assalamu'alaikum wr wb

Pada kesempatan ini saya menjelaskan dan mengajarkan cara membuat Form Login Dengan Boostrap. Sebelumnya Apa itu Bootstrap...????? Bootstrap adalah platform baru yang dikembangkan tim twitter. Pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti perkembangan browser. Website yang menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat.

Oke Langsung Saja, pertama download dulu jquery Boostrapnya dulu di http://getbootstrap.comuntuk bisa menggunakan menerapkan pada form loginya, karena tanpa jquery boostap, maka tampilannya akan biasa saja.

ini Source kodenya

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Radmin - the Raddest Admin Template</title> <meta name="description" content="An admin template from Square Turtle Studios" /> <meta name="author" content="Square Turtle Studios" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Styles --> <!-- Logo Font - Molle --> <link href="css/molle.css" rel="stylesheet" type="text/css" /> <link href="css/bootstrap.css" rel="stylesheet" /> <link rel="stylesheet" href="css/icon-style.css" /> <!--[if lte IE 7]> <script src="../scripts/lte-ie7.js"></script> <![endif]--> <link href="css/bootstrap-responsive.css" rel="stylesheet" /> <link href="css/radmin.css" rel="stylesheet" id="main-stylesheet" /> <link href="css/radmin-responsive.css" rel="stylesheet" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="scripts/bootstrap.min.js"></script> <script type="text/javascript" src="scripts/jquery.cloneposition.js"></script> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script> <![endif]--> <!--[if lte IE 9]> <script src="scripts/placeholder.js" type="text/javascript"></script> <![endif]--> <script type="text/javascript" src="scripts/theme.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body id="body-login"> <div class="container-fluid"> <div class="row-fluid"> <div class="span4"> </div> <div class="span4 login-span"> <div class="login-radmin align-center"> <h1 class="brand"> <span class="rad">Rad</span>min </h1> </div> <div class="login-wrapper"> <div class="login-inner"> <h2 class="sign-in"> Sign in</h2> <small class="muted">Please sign in using your registered account details</small> <div class="squiggly-border"> </div> <div class="login-inner"> <form class="form-horizontal" /> <div class="input-prepend"> <span class="add-on"> <i class="radmin-icon radmin-user"></i> </span> <input class="input-large" id="input-username" size="16" type="text" placeholder="Username" /></div> <br /> <br /> <div class="input-prepend"> <span class="add-on"> <i class="radmin-icon radmin-locked"></i> </span> <input class="input-large" id="input-password" size="16" type="password" placeholder="Password" /></div> <div class="form-actions"> <a class="btn-link pull-left" href="#" id="lost-password">Lost your password?</a> <a class="btn btn-large btn-inverse pull-right" href="index.html" id="login">Login</a> </div> </form> </div> </div> </div> </div> <div class="span4"> </div> </div> </div> </body></html> </div>

Download source code lengkapnya Download

Penggunaan jQuery Datatables pada tabel

Assalamu'alaikum wr.wb,

Disini saya akan menjelaskan penggunaan JQuery datatables, JQuery datatables merupakan JQuery untuk tabel, yang sangat mudah di gunakan dan sangat keren apabila di terapkan di web sobat karena dengan JQuery datatables ini banyak fungsinya yaitu udah otomatis ada pagingnya, search data, dan pilihan data yang akan di tampilkan, Oke tanpa basa basi lagi langsung ajah kita ke TKP Broo....!!

1.Download JQuery datatables di http://datatables.net/download/

 2.Buatlah database sederhana, bebas isinya apa ajah, kan hanya buat contoh, Agan Pasti bisalah

3.Buatlah tabel.php sederhana

4.Kalau udah Download JQuery datatables tinggal cari folder media trus copy dan taruh bareng sama nama folder web sobat

5.Kemudian kita panggil JQuery datatablesnya dengan tabel.php yang kita buat

Ini Script Kodingnya:

<!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>DataTables live example</title> <style type="text/css" title="currentStyle"> @import "media/css/demo_page.css"; @import "media/css/demo_table_jui.css"; @import "media/themes/smoothness/jquery-ui-1.8.4.custom.css"; @import "media/css/ColReorder.css"; .style1 {color: #333333} .style2 {font-weight: bold} </style> <script type="text/javascript" charset="utf-8" src="media/js/jquery.js"></script> <script type="text/javascript" charset="utf-8" src="media/js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf-8" src="media/js/ColReorder.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready( function () { var oTable = $('#example').dataTable( { "sDom": 'R<"H"lfr>t<"F"ip>', "bJQueryUI": true, "sPaginationType": "full_numbers" } ); } ); </script> </head> <?php // panggil berkas koneksi.php require 'inc/koneksi.php'; // buat koneksi ke database mysql koneksi_buka(); ?> <body> <table class="display" id="example" cellpadding="0" cellspacing="0"> <thead> <tr> <th width="37" style="width:20px">No</th> <th width="130" style="width:120px">NIM</th> <th width="240" style="width:230px">Nama</th> <th width="348">Program Studi </th> <th width="110" style="width:100px">Angkatan</th> <th width="119" style="width:100px">Status</th> <th width="123" class="span2" style="width:90"> <div class="btn btn-mini btn-inverse btn-block disabled"> <i class="icon-th icon-white"></i> Options</div> </th> </tr> </thead> <tbody> <?php $i = 1; $query = mysql_query("SELECT * FROM mahasiswa"); // tampilkan data mahasiswa selama masih ada while($data = mysql_fetch_array($query)) { if($data['status']==1) { $status = "Aktif"; } else { $status = "Tidak Aktif"; } ?> <tr> <td><?php echo $i ?></td> <td><?php echo $data['nim'] ?></td> <td><?php echo $data['nama'] ?></td> <td><?php echo $data['program_studi'] ?></td> <td><?php echo $data['angkatan'] ?></td> <td><?php echo $status ?></td> <td> <div align="center"> <a href="#dialog-mahasiswa" id="<?php echo $data['kd_mhs'] ?>" class="btn btn-mini ubah" data-toggle="modal"> <i class="icon-pencil"></i>Edit</a> <a href="#" id="<?php echo $data['kd_mhs'] ?>" class="btn btn-mini hapus"> <i class="icon-trash"></i>Hapus </a> </div> </td> </tr> <?php $i++; } ?> </tbody> </table> <?php // tutup koneksi ke database mysql koneksi_tutup(); ?> </body> </html 

Dan ini Hasilnya:

Membuat Aplikasi Android Sederhana

1. Bikin Project Dulu Pertama kali kalo mau buat aplikasi, ya tentunya bikin dulu project-nya, gak ujug-ujug bikin gitu aja :D BTW, udah pada tahu kan cara bikin project Android? Kalo gak tau kebangetan, tinggal klik File -> New -> Android Project di Eclipse.

Silahkan kasih nama projectnya, terserah mau apa aja :D gratis kok, gak bayar :D Misal saya kasih nama projectnya dengan nama Kontak. Kok Kontak? Ya karena memang aplikasi yang mau saya buat sekarang aplikasi manajemen kontak sederhana :D Tapi perlu diinget, gak ada hubungannya dengan aplikasi kontak yang ada di Android-nya. Ini cuma aplikasi iseng aja :D hehehe Kalo udah, silahkan klik tombol Next

Kalo udah sekarang pilih target versi aplikasinya untuk Android versi berapa, karena hp saya itu sistem operasinya Android versi 2.3, jadi saya pilih yang 2.3, kalo kamu sih silahkan pilih yang sesuai dengan hp kamu, saya gak peduli :P Kalo udah, klik Next > lagi.

Sekarang tinggal kasih nama aplikasinya, disini saya kasih nama Kontak buat aplikasinya. Selain itu, masukin juga nama package nya, jangan lupa ceklis Create Activity, lalu masukin nama kelas Activity nya. Kenapa perlu di ceklis? Soalnya kalo gak diceklis, saya males kalo harus bikin kelas Activity manual, kalo ada yang otomatis ngapain manual? Bikin cape aja :P Kalo udah, klik tombol Finish, otomatis Eclipse bikinin project-nya buat kita (kita? Lho kali gw enggak :P)

Bikin Kelas Domain ato Model Kelas Domain? Kelas Model? Kalo kamu gak tau maksudnya, berarti kamu beruntung baca buku ini, kalo kamu gak pernah baca buku ini, bias celaka dua belas :D Oke, saya jelasin nih… Kelas Domain ato Model adalah kelas yang merepresentasikan data, data apaan? Ya data apa aja, bisa data entitas, tabel, atau apa aja deh terserah. Di buku ini, karena saya bikin aplikasi Kontak, artinya bakalan ada data kontak, artinya kelas Domain ato Model nya adalah kelas Kontak. Isi kelas domain itu cuma atribut-atribut aja, misal di kelas Kontak cuma bakal ada atribut, nama, telepon sama email, kalo mau ditambahin sih terserah, saya sih gak mau nambahin lagi, tar kepanjangan bikin bukunya :P Sebelum bikin kelas Kontak, sekarang kita bikin dulu package nya, jangan ditumpuk di satu package, itu gak baik? Kata siapa? Kata nenek :P Ya iyalah gak baik, kalo ditumpuk di satu package, bayangin kalo ada 1000 kelas, bisa mabok carinya :P Back to topic, buat bikin package, bisa pilih File -> New -> Package :

Isi nama packagenya, misal saya isi com.stripbandunk.android.kontak.model, kalo kamu terserah mau masukin apa aja, saya gak peduli :P Kalo sudah, sekarang tinggal bikin kelas Kontak nya, caranya pilih File -> New -> Class :

Jangan lupa masukin package yang tadi dibuat, lalu silahkan kasih nama kelas nya, missal disini saya kasih nama Kontak, soalnya memang saya mau buat kelas yang berisi data Kontak. Kalo udah, klik tombol Finish. Eclipse akan otomatis buatin kelas Kontak, isinya seperti ini :

Sekarang saatnya nambah atribut, nama, email sama telepon, semua tipe datanya saya mau pake tipe data String, kenapa? Ya gak mungkin juga nama tipe datanya angka, emang gila apa :P

Sory ya, saya sengaja pake gambar, gak pake teks, soalnya supaya kamu gak bisa copy-paste :P Enak aja, saya cape ngoding, kamu cuma copy paste :P Kalo kamu sering coding Java, pasti sedikit aneh. Kok atributnya public? Gak private? Trus mana getter dan setter nya? Tenang, tenang :D Jangan anggap kita lagi coding di aplikasi desktop atau web, sekarang kita coding di aplikasi mobile, semakin banyak code yang kita buat, otomatis akan semakin memperlambat aplikasi di mobile, soalnya mobile itu perpormanya gak seperti di computer, jadi pastikan buat codenya sehemat mungkin :D termasuk disini, gak perlu pake getter dan setter :D Bikin Database Tenang, tenang, gak usah kaget dulu :P Disini saya ga bener-bener nyuruh bikin database sendiri :P Bisa gila kalo suruh bikin database sendiri, hehehe. Maksudnya kita bikin dulu kelas database-databasan, pura-pura aja kalo datanya disimpan di database, padahal disini saya cuma simpan di List aja. Seperti biasa, bikin package dulu :

Kalo udah, sekarang bikin kelas nya :

Disini saya pake nama KontakDatabase, jadi jelas ketauan kalo kelas ini adalah kelas database buat data Kontak. Kalo udah klik tombol Finish.

Isi kelas KontakDatabase ini hanya beberapa metode, yaitu add(Kontak) dan findAll(). Metode add(Kontak) buat nambah data kontak, dan metode findAll() buat ngambil seluruh data kontak. Karena kelas KontakDatabase ini diakses dimana-mana, jadi saya buat kelas ini jadi kelas singleton.