Program Toko Sederhana - Download Aplikasi dan Source Code

Rabu, 16 April 2014
Download program dan source code di sini.
  • Form Login


  • Form Utama


  • Form Barang


  • Form Tambah Data Barang


  • Form Cari Kategori


  • Form Cari Satuan


  • Form Ubah Data Barang


  • Form Penjualan


  • Form Cari Barang


  • Nota Penjualan


  • Form Kas


  • Form Tambah Kas


  • Form Kategori Kas


  • Form Ubah Kas


  • Laporan Kas


  • Form Laporan


  • Laporan Penjualan


  • Form Pengaturan


  • Form Tambah Data User


  • Form Ubah Data User


  • Form Ubah Password


  • Form Laporan



















Cara Download Program dan Source Code

Untuk mendownload program silahkan kirim email ke herdikayan@gmail.com.

Membuat Form Login [Aplikasi Perpustakaan dengan C#]

Jumat, 14 Maret 2014
  1. Buka kembali project Perpus, langkah pertama adalah mengubah nama Form1.cs. Pada Solution Explorer > Pilih Form1.cs > klik kanan > Rename.
    Gambar 2.9 Rename Form1.cs
  2. Ubah nama menjadi frmLogin.cs. Ketika ada pesan dialog, pilih Yes untuk menyesuaikan reference dan element pada code sesuai dengan nama baru yang diberikan.
  3. Langkah berikutnya adalah mendesain form login dengan menambahkan objek dari Toolbox, dengan cara doubleklik object yang ingin ditambahkan pada Toolbox atau dengan cara drag langsung ke form, sesuaikan tampilannya seperti gambar 2.10.
    Gambar 2.10 Design Awal Form Login
  4. Ubah properti setiap object dengan cara klik pada object kemudian sesuaikan pada Jendela Properties:
    Gambar 2.11Properties Form Login
    Property PasswordChar pada txtPassword berfungsi untuk menyembunyikan inputan pada textbox dengan karakter tertentu, sehingga ketika user mengetikkan password, hanya muncul karakter bintang.
    Property FormBorderStyle diisi FixedToolWIndow sehinnga form tidak bisa diubah ukurannya.
  5. Atur juga property Font - Name untuk semua object menjadi Verdana. Kemudian start form dengan cara klik menu Debug - Start Debugging (F5), sehingga tampilan form seperti gambar 2.12.

    Gambar 2.12 Form Login
  6. Buatkan fungsi ketika user klik tombol Batal maka form akan ditutup, caranya pilih btnBatal - pada jendela Properties - klik icons Events  - double klik pada event Click.

    Gambar 2.13 Properties - Events - Click
  7. Kemudian isikan code berikut:

  8. Pilih btnLogin - Properties - Events - Click - isi dengan:



    Start form, kemudian masukkan username: admin dan password:admin, maka akan muncul pesan Login berhasil! dan form akan tertutup, sedangkan jika salah, maka akan muncul pesan Login Gagal!.
  9. Simpan Project - Selesai.

Membuat Aplikasi Perpustakaan dengan C# dan MySQL

Membuat dan Menyimpan Project Perpus

  1. Buka aplikasi Visual Studio 2012, kemudian buat project baru dengan cara klik pada menu File - New - Project (Ctrl+Shift+N).

    Gambar 2.1 File - New - Project
  2. Selanjutnya akan ditampilkan jendela New Project. Pada panel kiri pilih Installed - Templates - Visual C# - Windows, kemudian pilih Windows Forms Application.
    Gambar 2.2 Jendela New Project
  3. Isi nama project pada field Name dengan “Perpus”. Jika ingin mengubah lokasi penyimpanan project, pada field Location klik tombol Browse. Kemudian klik tombol OK.
  4. Berikut adalah tampilan project yang anda buat:

    Gambar 2.3 Tampilan Awal Project
    • Toolbox adalah bagian yang berguna sebagai tempat alat-alat (Tools) yang berupa object yang digunakan untuk mendesign sebuah form, misalnya Textbox, Button, DataGridView, Label, dan sebagainya, lihat gambar 2.4.

      Gambar 2.4 Toolbox
    • Solution Explorer adalah tempat untuk melihat item-item yang ada pada project, atau yang sudah ditambahkan pada project, misalnya Form dan kodenya, Class, Module, Class Diagram, File XML, File Project, File Report, dll. Lihat gambar 2.5.

      Gambar 2.5 Solution Explorer
    •  Ketika membuat project baru, maka akan dibuatkan form “Form1.cs”, sebuah class “Program.cs”, dan file konfigurasi “App.config”. Double klik pada form, maka akan ditampilkan design Form1, lihat gambar 2.6.

      Gambar 2.6 Form1.cs [Design]
    • Properties adalah tempat untuk melihat dan mengubah property dari sebuah object/class, misalkan property Name, Text, dan lain sebagainya. Properti untuk setiap objek akan berbeda dengan objek lainnya. Berikut adalah property pada Form1.cs.
      Gambar 2.7 Jendela Properties
    • Main Menu berguna sebagai tempat untuk mengkses fungsi-fungsi pada pemrograman c#.
    • Toolbar berguna sebagai shortcut bagi fungsi-sungsi yang sering diakses di Main Menu.
      Gambar 2.8 Jendela Properties
  5. Simpan Project, Selesai

C# – Hello World

Senin, 29 Juli 2013
Bagi anda yang masih baru pada Visual C# atau Miccosoft Visual Basic, atau mungkin baru tentang bahasa pemrograman, ini adalah tempat yang bagus untuk memulai. Tutorial ini akan mengenalkan anda pada Visual C# dan Visual Basic dari yang paling dasar, Have fun! dan buat sebuah software yang bagus.

untuk Membuat dan Menjalankan Console Application
  1. Buka Aplikasi Visual Studio.
  2. Pada menu bar, pilih File, New, Project.
    Kotak dialog New Project terbuka.
  3. Expand(pilih) Installed, expand Templates, expand Visual C#, dan kemudian pilihConsole Application.
  4. Pada Name box, tentukan nama project (misalnya HelloWorld), dan kemudian pilih tombol OK.Project baru akan muncul di Solution Explorer.
  5. Jika Program.cs tidak terbuka di Code Editor, double click pada Program.cs in Solution Explorer.
  6. Ganti semua kode pada Program.cs dengan kode berikut.

    //Program Hello World pada C#
    using System;
    namespace HelloWorld
    {
        class Hello
        {
            static void Main()
            {
                Console.WriteLine("Hello World!");
            }
        }
    }

  7. Tekan F5 untuk menjalankan program. Jendela Command Prompt akan muncul berisi tulisan “Hello World!”.
  8. Command prompt akan menghilang otomatis setelah program selesai dieksekusi. Untuk memberikan jeda anda bisa menambahkan baris baru setelah baris WriteLine. Kemudian ulang jalankan program.

    //Program Hello World pada C#
    using System;
    namespace HelloWorld
    {
        class Hello
        {
            static void Main()
            {
                Console.WriteLine("Hello World!");
                Console.ReadLine();
            }
        }
    }

Comment (Komentar)

Baris pertama merupakan komentar. Tanda // untuk mengubah teks setelahnya sebagai komentar dan tidak akan dieksekusi oleh program. Tanda ini hanya untuk satu baris saja.

//Program Hello World pada C#

Anda juga bisa membuat komentar pada dua atau lebih baris dengan mengapit dengan tanda /* dan */. Contoh penggunaan:

/*Program Hello World pada C#
Program ini akan mencetak "Hello World" pada command Prompt
Belajar C# sangant mudah*/

Main Method

Sebuah C# console application harus mempunyai sebuah Main method, untuk mengkontrol mulai dan berakhirnya program, anda bisa membuat object atau memanggil method lain pada Main Method, singkatnya Main Method merupakan method yang dijalankan pertama kali. Main method merupakan static method (dibahas pada tutorial berikutnya) di dalam sebuah class. Anda dapat mendeklarasikan Main Method dengan berbagai cara.

Tanpa mengembalikan nilai (void)

static void Main()
{
    //...
}

Mengembalikan sebuah nilai angka (return)

static int Main()
{
    //... 
    return 0;
}

Dengan argument (dibahas pada tutorial berikutnya)

static void Main(string[] args)
{
    //...
}

-atau-

static int Main(string[] args)
{
    //... 
    return 0;
}

Parameter pada Main Method, args, adalah string array yang berisi argumen-argumen baris perintah digunakan untuk invoke program. Penjelasan lebih lanjut tentang argumen akan dibahas pada tutorial berikutnya.

INPUT / OUTPUT

C # program umumnya menggunakan input / output yang disediakan dari library . NET Framework. Statement (pernyataan) System.Console.WriteLine (“Hello World!”);Menggunakan metode WriteLine. Ini adalah salah satu metode output dari class Console. Jika anda menggunakan using System pada bagian atas anda dapat langsung memanggil class Console, sedangkan jika tanpa itu anda harus menulis legkap.

System.Console.WriteLine("Hello World!");

Mengcompile dan Menjalankan Program dengan Command Prompt
Anda dapat menjalankan program C# menggunakan command prompt selain menggunakan Visual Studio. untuk mengcompile dan menjalankan dari command prompt:
  1. Paste code pada text editor (misalnya notepad), kemudian simpan dengan nama Hello.cs. File C# menggunakan ekstensi .cs. 
  2. Gunakan langkah berikut untuk membuka command prompt:
    • Pada Windows 8, pada Start Screen, cari Developer Command Prompt, dan kemudian tap atau pilih Developer Command Prompt for VS2012. Sebuah Jendela Developer Command Prompt window akan muncul. 
    • Pada Windows 7, pilih Start, All Programs, pilih folder Visual Studio, pilih Visual Studio Tools, dan kemudian pilih Developer Command Prompt for VS2012. Sebuah Jendela Developer Command Prompt window akan muncul. 
    • Menjalankan pada standard command prompt (dibahas pada tutorial berikutnya) 
  3. Pada jendela command-prompt, pindah ke direktori tempat anda menyimpan file Hello.cs. 
  4. Ketikan perintah berikut untuk mengcompile file Hello.cs.
    csc Hello.cs
    Jika tidak ada error pada program, maka akan dibuat file baru bernama Hello.exe di folder yang sama. 
  5. Pada jendela command-prompt, masukkan perintah berikut untuk menjalankan program:
    Hello

Tutorial C# Array untuk Pemula

Apa itu Array?

Array digunakan untuk menyimpan lebih dari satu nilai dengan tipe data yang sama dalam satu variabel. Tutorial ini akan menjelaskan tentang jenis-jenis array dan bagaimana penggunaannya dalam C#.

Anda dapat mendeklarasikan array dengan menentukan tipe dari setiap elemennya.

type[] arrayName;

Berikut adalah contoh pembuatan array:

class ContohArray
{
    static void Main()
    {
        // Membuat a single-dimensional array  
        int[] array1 = new int[5];

        // Membuat dan mengisi elemen array
        int[] array2 = new int[] { 1, 3, 5, 7, 9 };

        // alternatif penulisan array
        int[] array3 = { 1, 2, 3, 4, 5, 6 };

        // membuat Multidimentional array
        int[,] multiDimensionalArray1 = new int[2, 3];

        // Membuat dan mengisi elemen Multidimentional array
        int[,] multiDimensionalArray2 = { { 1, 2, 3 }, { 4, 5, 6 } };

        // Membuat jagged array 
        int[][] jaggedArray = new int[6][];

        // mengisi elemen pertama dari jagged array
        jaggedArray[0] = new int[4] { 1, 2, 3, 4 };
    }
}

Sebuah array memiliki sifat sebagai berikut:
  • Setiap elemen dari array harus memiliki tipe data yang sama.
  • Sebuah array dapat berupa Single-Dimensi, Multidimensional atau Jagged.
  • Jumlah dimensi dan panjang masing-masing dimensi ditetapkan ketika ketika array dibuat. Nilai-nilai tersebut tidak dapat diubah jika sudah dideklarasikan.
  • Nilai default dari elemen array numerik adalah 0, dan elemen string diatur ke null.
  • Jagged array adalah array di dalam array, artinya elemen dari array tersebut berupa array juga.
  • Array adalah sebuah zero indexed, artinya elemen dari array itu diindex dari 0 sampai jumlah elemen-1. Misalkan jumlah elemen 5, maka indeknya adalah 0, 1, 2, 3, 4.
Dalam tutorial ini akan dibahas:
  • Array Secara Umum
  • Mendeklarasikan Array
  • Inisialisasi Array
  • Mengakses Anggota Array
  • Array sebagai Object
  • Penggunaan Foreach pada Array

Array Secara Umum

Array dalam C# bekerja layaknya array dalam bahasa pemrograman secara umum. Bagaimanapun ada beberapa perbedaan yang anda harus perhatikan, ketika mendeklarasikan sebuah array, tanda kurung siku ([]) ditaruh di belakang tipe data bukan di belakang nama variabel. Jika anda tempatkan di belakang variabel, maka akan muncul error pada C#.

int[] nilai; //Bukan int nilai[];

Anda juga bisa menentukan panjang array atau jumlah elemen dalam suatu array.

int[] nilai; //Mendeklarasikan array;
nilai = new int[5] //Menentukan panjang array sebanyak 5

Mendeklarasikan Array

C# mendukung Single-Dimensional Array, Multidimensional Array, dan Jagged Array. Berikut cara mendeklarasikan berbagai jenis array:

Single-dimensional

array:int[] nilai;

Multidimensional array

string[,] nama;

Jagged array (array di dalam array)

int[][] angka;

Mendeklarasikan array seperti diatas sebenarnya belum membuat sebuah array, karena kita belum menentukan panjang arraynya. Untuk menentukan panjang array kita bisa menambahkan:

Single-dimensional Array:

int[] angka = new int[5];

Multidimensional array:

string[,] nama = new string[5,4];

Jagged array:

byte[][] angka= new byte[5][];
for (int x = 0; x < angka.Length; x++) 
{
 angka[x] = new byte[4];
}

Inisialisasi Array

C# menyediakan berbagai cara untuk mengisi nilai dari setiap elemen array, dimana pengisian elemen diapit dengan tanda kurung korawal ({}). Berikut cara-cara pengisian array:

Single-dimentional array:

int[] nilai = new int[5] { 1, 2, 3, 4, 5 };
string[] nama = new string[3] { "John", "Jesica", "David" };

atau

int[] nilai = new int[] { 1, 2, 3, 4, 5 };
string[] nama = new string[] { "John", "Jesica", "David" };

atau

int[] nilai = { 1, 2, 3, 4, 5 };
string[] nama = { "John", "Jesica", "David" };

Multidimentional array:

int[,] nilai = new int[3, 2] { { 1, 2 }, { 3, 4 }, { 5, 6 } };
string[,] nama = new string[2,2] { {"John", "Jessica"}, {"David", "Marry"} };

atau

int[,] nilai = new int[,] { { 1, 2 }, { 3, 4 }, { 5, 6 } };
string[,] nama = new string[,] { {"John", "Jessica"}, {"David", "Marry"} };

atau

int[,] nilai = { { 1, 2 }, { 3, 4 }, { 5, 6 } };
string[,] nama = { {"John", "Jessica"}, {"David", "Marry"} };

Jagged Array

int[][] angka = new int[2][] { new int[] { 1, 2, 3 }, new int[] { 4, 5, 6 } };

atau

int[][] angka = new int[][] { new int[] { 1, 2, 3 }, new int[] { 4, 5, 6 } };

atau

int[][] angka = { new int[] { 1, 2, 3 }, new int[] { 4, 5, 6 } };

Mengakses Anggota Array

Berikut adalah cara untuk mengambil nilai yang ke 4 dari sebuah single-dimentional array:

int[] angka = { 1, 2, 3, 4, 5, 6, 7, 8, 9 };
System.Console.WriteLine(angka[3]);

output:

4

Berikut adalah cara untuk mengambil elemen pada posisi 2, 1 dari sebuah multi dimentional array:
int[,] angka = { { 1, 2 }, { 3, 4 }, { 5, 6 } };
System.Console.WriteLine(angka[2,1]);

output:

6

Berikut adalah cara untuk mengambil elemen pada posisi 0, 0 dan 1, 2 dari sebuah jagged array:

int[][] angka = { new int[] { 1, 2 }, new int[] { 3 , 4, 5 } };
System.Console.WriteLine(angka[0][0]);
System.Console.WriteLine(angka[1][2]);

output:

1
5

Array adalah Object

Pada C#, array sebenarnya adalah object. System.Array adalah base dari semua jenis array. Anda dapat menggunakan properti, dan class lainnya yang memiliki System.Array. Misalnya kita gunakan property length untuk menentukan size atau panjan dari suatu array.

int[] angka = { 1, 2, 3, 4, 5, 6, 7, 8, 9 };
System.Console.WriteLine(angka.Length);

output

9

System.Array mempunyai banyak method yang sangat berguna dalam pengaplikasian array seperti copy, sorting dan searching.

Penggunaan Foreach pada Array

C# juga menyediakan statement foreach. Statement ini biasanya digunakan untuk mengakses setiap eleman pada array. Contoh penggunaan:

int[,] angka = { { 1, 2 }, { 3, 4 }, { 5, 6 } };
foreach (int i in angka)
{
    System.Console.Write("{0} ", i);
}

output:

1, 2, 3, 4, 5, 6

Namun jika anda ingin melakukan kontrol lebih pada sebuah array kita bisa menggunakan statement for (dibahas pada tutorial berikutnya).

jQuery - Membatasi Jumlah Karakter pada Textarea

Sabtu, 23 Juli 2011

Untuk suatu alasan kita perlu membatasi kareakter yang diinputkan oleh user atau pengunjung pada textarea. Misalnya pada shoutbox, sehingga pesannya yang muncul tidak terlalu panjang. Di bawah textarea akan ditampilkan karakter yang tersisa untuk bisa diinputkan. Lihat contoh berikut:


Maksimal 150 karakter


Source Code
<!DOCTYPE html>
<html>
<head>
<title>Limit Textarea</title>
<script src="jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
  $("#message").keyup(function(){
   if(this.value.length>150){
    this.value=this.value.substring(0,150);
   }
   $("#remaining").text("Karakter tersisa : " + (150-this.value.length));
    })
  })
</script>
</head>

<body>
<textarea cols="30" id="message" rows="8" >Tulis pesan di sini</textarea>
<p id="remaining">Maksimal 150 karakter</p>
</body>
</html>

Pertama kita cek apakah value dari textarea lebih besar dari 150, gunakan event keyup. Bila lebih maka kita ambil 150 karakter saja dengan fungsi substring(awal, jumlah). Terakhir kita tampilkan karakter tersisa pada tag p dengan id remaining.

JQuery UI - Membuat List Sortable



Sortable Standard


  • Microsoft Office
  • Visual Foxpro
  • PHP
  • jQuery
  • Visual Basic

Source code
<link href='development-bundle/themes/base/jquery.ui.all.css' rel='stylesheet' type='text/css'/>
<script src='development-bundle/jquery-1.5.1.js'></script>
<script src='development-bundle/ui/jquery.ui.core.js'></script>
<script src='development-bundle/ui/jquery.ui.widget.js'></script>
<script src='development-bundle/ui/jquery.ui.position.js'></script>
<script src='development-bundle/ui/jquery.ui.mouse.js'></script>
<script src='development-bundle/ui/jquery.ui.sortable.js'></script>
<script language="javascript">
 $(function() {
  $( "#sortable" ).sortable();
  $( "#sortable" ).disableSelection();
 });
</script>
<style>
 ul#sortable{list-style-type: none ; margin: 0; padding: 0; width:200px; font-size:12px;}
 ul#sortable li{list-style:none; margin: 0 3px 3px 3px; padding: 0.4em; padding-left:20px; height:20px;}
</style>
<h3>Sortable Default</h3>
<ul id="sortable">
 <li class="ui-state-default">Microsoft Office</li>
 <li class="ui-state-default">Visual Foxpro</li>
 <li class="ui-state-default">PHP</li>
 <li class="ui-state-default">jQuery</li>
 <li class="ui-state-default">Visual Basic</li>
</ul>

Sortable dengan PlaceHolder


  • Microsoft Office
  • Visual Foxpro
  • PHP
  • jQuery
  • Visual Basic

Source code
<link href='development-bundle/themes/base/jquery.ui.all.css' rel='stylesheet' type='text/css'/>
<script src='development-bundle/jquery-1.5.1.js'></script>
<script src='development-bundle/ui/jquery.ui.core.js'></script>
<script src='development-bundle/ui/jquery.ui.widget.js'></script>
<script src='development-bundle/ui/jquery.ui.position.js'></script>
<script src='development-bundle/ui/jquery.ui.mouse.js'></script>
<script src='development-bundle/ui/jquery.ui.sortable.js'></script>
<script language="javascript">
 $(function() {
  $( "#sortable" ).sortable({
   placeholder: "ui-state-highlight"
  });
  $( "#sortable" ).disableSelection();
 });
</script>
<style>
 ul#sortable{list-style-type: none ; margin: 0; padding: 0; width:200px; font-size:12px;}
 ul#sortable li{list-style:none; margin: 0 3px 3px 3px; padding: 0.4em; padding-left:20px; height:20px;}
</style>
<h3>Sortable dengan Placeholder</h3>
<ul id="sortable">
 <li class="ui-state-default">Microsoft Office</li>
 <li class="ui-state-default">Visual Foxpro</li>
 <li class="ui-state-default">PHP</li>
 <li class="ui-state-default">jQuery</li>
 <li class="ui-state-default">Visual Basic</li>
</ul>

Dua Sortable yang Berhubungan


  • Microsoft Office
  • Visual Foxpro
  • PHP
  • jQuery
  • Visual Basic
  • Microsoft Office
  • Visual Foxpro
  • PHP
  • jQuery
  • Visual Basic

Source code
<link href='development-bundle/themes/base/jquery.ui.all.css' rel='stylesheet' type='text/css'/>
<script src='development-bundle/jquery-1.5.1.js'></script>
<script src='development-bundle/ui/jquery.ui.core.js'></script>
<script src='development-bundle/ui/jquery.ui.widget.js'></script>
<script src='development-bundle/ui/jquery.ui.position.js'></script>
<script src='development-bundle/ui/jquery.ui.mouse.js'></script>
<script src='development-bundle/ui/jquery.ui.sortable.js'></script>
<script language="javascript">
 $(function() {
  $( "#sortable1, #sortable2" ).sortable({
   connectWith: ".connected"
  }).disableSelection();
 });
</script>
<style>
 ul#sortable1,ul#sortable2{list-style-type: none ; margin: 0; padding: 0; width:200px; font-size:12px;float:left}
 ul#sortable1 li, ul#sortable2 li{list-style:none; margin: 0 3px 3px 3px; padding: 0.4em; padding-left:20px; height:20px;}
</style>
<h3>Dua List Sortable yang  Berhubungan</h3>
<ul id="sortable1" class="connected">
 <li class="ui-state-default">Microsoft Office</li>
 <li class="ui-state-default">Visual Foxpro</li>
 <li class="ui-state-default">PHP</li>
 <li class="ui-state-default">jQuery</li>
 <li class="ui-state-default">Visual Basic</li>
</ul>
<ul id="sortable2" class="connected">
 <li class="ui-state-highlight">Microsoft Office</li>
 <li class="ui-state-highlight">Visual Foxpro</li>
 <li class="ui-state-highlight">PHP</li>
 <li class="ui-state-highlight">jQuery</li>
 <li class="ui-state-highlight">Visual Basic</li>
</ul>

Sortable dalam Grid


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Source code
<link href='development-bundle/themes/base/jquery.ui.all.css' rel='stylesheet' type='text/css'/>
<script src='development-bundle/jquery-1.5.1.js'></script>
<script src='development-bundle/ui/jquery.ui.core.js'></script>
<script src='development-bundle/ui/jquery.ui.widget.js'></script>
<script src='development-bundle/ui/jquery.ui.position.js'></script>
<script src='development-bundle/ui/jquery.ui.mouse.js'></script>
<script src='development-bundle/ui/jquery.ui.sortable.js'></script>
<script language="javascript">
 $(function() {
  $( "#sortable" ).sortable({
   placeholder: "ui-state-highlight"
  }).disableSelection();
 });
</script>
<style type="text/css">
 ul#sortable{list-style-type: none ; margin: 0; padding: 0; width:200px; font-size:12px;}
 ul#sortable li{width:50px; height:50px; text-align:center; line-height:50px; font-size:30px; float:left; margin:2px;list-style:none; }
</style>
<h3>Sortable dalam Grid</h3>
<ul id="sortable">
 <li class="ui-state-default">1</li>
 <li class="ui-state-default">2</li>
 <li class="ui-state-default">3</li>
 <li class="ui-state-default">4</li>
 <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
 <li class="ui-state-default">7</li>
 <li class="ui-state-default">8</li>
 <li class="ui-state-default">9</li>
</ul>

jQuery UI - Membuat Tabs View

Kamis, 21 Juli 2011

Tabs atau Tab view merupakan control untuk menampilkan beberapa content dan dikelompokkan ke dalam tab-tab. Tabs berisi navigasi untuk menampilkan atau berpindah dari konten satu ke konten lainnya..


Tabs Standar


Untuk mambuat tabs standar kita memerlukan tige jenis script


  1. CSS jQuery UI jquery.ui.all.css.
  2. Library jQuery jquery-1.5.1.js.
  3. Script jQuery UI:
    • jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.position.js, jquery.ui.mouse.js yang merupakan script utama setiap memanggil widget jquery ui. dan 
    • jquery.ui.tabs.js untuk widget tabs.

Selengkapnya tentang cara download dan instalasi jquery UI.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • List satu
  • List dua
  • List tiga

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Source code

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.tabs.js"></script>
<script src="development-bundle/ui/jquery.ui.sortable.js"></script>
<script>
 $(function() {
   $("#tabs").tabs()
 });
</script>
<style>
 .ui-widget{
  font-size:11px;
 }
</style>
<h3>Tabs Standar</h3>

<div id="tabs" style="width:400px;">
    <ul>
        <li><a href="#tabs-1">Section 1</a></li>
        <li><a href="#tabs-2">Section 2</a></li>
        <li><a href="#tabs-3">Section 3</a></li>
    </ul>
    <div id="tabs-1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="tabs-2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <ul>
        <li>List satu</li>
        <li>List dua</li>
        <li>List tiga</li>
    </ul>
    </div>
    <div id="tabs-3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Tabs on Mouseover


Tabs bisa juga dibuka saat mouseover dengan menambahkan event:"mouseover".


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • List satu
  • List dua
  • List tiga

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Source code

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.tabs.js"></script>
<script src="development-bundle/ui/jquery.ui.sortable.js"></script>
<script>
 $(function() {
   $("#tabs").tabs({
     event:"mouseover"
   })
 });
</script>
<style>
 .ui-widget{
  font-size:11px;
 }
</style>
<h3>Tabs on Mouseover</h3>

<div id="tabs" style="width:400px;">
    <ul>
        <li><a href="#tabs-1">Section 1</a></li>
        <li><a href="#tabs-2">Section 2</a></li>
        <li><a href="#tabs-3">Section 3</a></li>
    </ul>
    <div id="tabs-1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="tabs-2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <ul>
        <li>List satu</li>
        <li>List dua</li>
        <li>List tiga</li>
    </ul>
    </div>
    <div id="tabs-3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Tabs Collapse


Collapse maksudnya, semua konten dapat ditutup (collapsed). Coba klik dua kali pada salah satu tab.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • List satu
  • List dua
  • List tiga

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Source code

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.tabs.js"></script>
<script src="development-bundle/ui/jquery.ui.sortable.js"></script>
<script>
 $(function() {
   $("#tabs").tabs({
     collapsible:true
   })
 });
</script>
<style>
 .ui-widget{
  font-size:11px;
 }
</style>
<h3>Tabs Collapse</h3>

<div id="tabs" style="width:400px;">
    <ul>
        <li><a href="#tabs-1">Section 1</a></li>
        <li><a href="#tabs-2">Section 2</a></li>
        <li><a href="#tabs-3">Section 3</a></li>
    </ul>
    <div id="tabs-1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="tabs-2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <ul>
        <li>List satu</li>
        <li>List dua</li>
        <li>List tiga</li>
    </ul>
    </div>
    <div id="tabs-3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Tabs Sortable


Tabs juga bisa diurutkan atau dipindah-pindah dengan men-drag tab. Untuk itu perlu dipanggil script jquery.ui.sortable.js.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • List satu
  • List dua
  • List tiga

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Source code

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.tabs.js"></script>
<script src="development-bundle/ui/jquery.ui.sortable.js"></script>
<script>
 $(function() {
  $( "#tabs" ).tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" });
 });
</script>
<style>
 .ui-widget{
  font-size:11px;
 }
</style>
<h3>Tabs Sortable</h3>

<div id="tabs" style="width:400px;">
    <ul>
        <li><a href="#tabs-1">Section 1</a></li>
        <li><a href="#tabs-2">Section 2</a></li>
        <li><a href="#tabs-3">Section 3</a></li>
    </ul>
    <div id="tabs-1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="tabs-2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <ul>
        <li>List satu</li>
        <li>List dua</li>
        <li>List tiga</li>
    </ul>
    </div>
    <div id="tabs-3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>