JAVA ” Encapsulation”

Enkapsulasi/pengkapsulan(Encapsulation)

Enkapsulasi adalah pembungkus, pembungkus disini dimaksudkan untuk menjaga suatu proses program agar tidak dapat diakses secara sembarangan atau di intervensi oleh program lain. Konsep enkapsulasi sangat penting dilakukan untuk menjaga kebutuhan program agar dapat diakses sewaktu-waktu, sekaligus menjaga program tersebut.

Dalam kehidupan sehari-hari enkapsulasi dapat dimisalkan sebagai arus listrik pada generator, dan sistem perputaran generator untuk menghasilkan arus listrik. Kerja arus listrik tidak mempengaruhi kerja dari sistem perputaran generator, begitu pula sebaliknya. Karena didalam arus listrik tersebut, kita tidak perlu mengetahui bagaimana kinerja sistem perputaran generator, apakah generator berputar kebelakang atau ke depan atau bahkan serong. Begitu pula dalam sistem perputaran generator, kita tidak perlu tahu bagaimana arus listrik, apakah menyala atau tidak.

Begitulah konsep kerja dari enkapsulasi, dia akan melindungi sebuah program dari akses ataupun intervensi dari program lain yang mempengaruhinya. Hal ini sangat menjaga keutuhan program yang telah dibuat dengan konsep dan rencana yang sudah ditentukan dari awal.

Dua hal yang mendasar dalam enkapsulasi, yakni :

  1. a.      Information Hiding

Adalah proses yang menyembunyikan informasi dari suatu class sehingga class tersebut tidak dapat diakses dari luar. Yaitu dengan memberikan akses kontrol “private” ketika mendeklarasikan atribut atau method.

  1. b.      Interface to Acces data

Adalah cara melalukan perubahan terhadap atribut yang di information hiding yaitu dengan membuat suatu interface berupa method untuk menginisialisasi atau merubah nilai dari suatu atribut tersebut.

Keuntungan dari pewarisan adalah tidak perlu mengutak atik kode kelas yang membutuhkan tambahan atribut atau metode saja, karena tinggal membuat kelas turunannya tanpa harus mengubah kode kelas dasarnya. Kelas dasar akan mewariskan semua atribut dan kodenya kecuali konstruktor dan destruktor yang memiliki izin akses publicdan protectedke kelas turunannya dengan izin akses yang sama dengan pada kelas dasar.

Ketika sebuah kelas turunan dibuat objeknya saat eksekusi, maka secara implisit konstruktor kelas dasar dipanggil terlebih dahulu baru kemudian konstruktor kelas turunan dijalankan. Begitu juga saat objek dimusnahkan maka secara destruktor kelas turunan akan dijalankan baru kemudian destruktor kelas dasar dijalankan.

Mutator dan Accessor method

  1. a.      Accessor Methods digunakan untuk membaca nilai variabel pada class, baik berupa instance maupun static.
  2. b.      Mutator Methods di gunakan untuk mengubah atau memberi nilai variable pada class, baik berupa instance maupun static.

Enkapsulasi menciptakan abstraksi untuk desain kelas. Jika Anda ingin melindungi beberapa anggota dari kelas dasar maka timbullah situasi enkapsulasi. Dalam konsep ini ada tiga kata kunci yang digunakan. Konsep hak akses ini biasa di sebut Access Modifier.

Access Modifier terdiri dari private, protected, dan public.

  • Ø Private memberikan hak akses hanya kepada anggota class tersebut untuk menggunakan dan/atau mengubah nilai dari property atau method tersebut.
  • Ø Protected memberikan hak akses kepada anggota class nya dan anggota class hasil inheritance (penurunan sifat) dari class tersebut.
  • Ø Public memberikan hak akses kepada property dan method agar dapat digunakan diluar class tersebut.

Contoh penggunaan dalam bahasa pemrograman Java:

    private String name;

    protected String address;

    public String getName(){…}

Dalam hal property dan method terdapat dua jenis yaitu static dan dynamic.

Static property dan method hanya dimiliki oleh class yaitu semua nilai dari static property dan method adalah sama dalam semua obyek, maka dari itu penggunaannya cukup dengan menggunakan class bukan obyek

    deklarasi:

        public static String getStudentCount(){…}

    penggunaan:

        Student.getStudentCount();

Dynamic property adalah property dan method yang tergantung obyek yang dibentuknya sehingga penggunaannya membutuhkan obyek yang telah terbentuk. Secara default deklarasi property adalah dynamic sehingga tidak dituliskan (implisit)

    deklarasi:

        public String getName(){…}

    penggunaan:

        Student s = new Student(“Anna”);

    s.getName();

berikut ini adalah beberapa keuntungan menerapkan prinsip enkapsulasi:

Bersifat indenpenden

Suatu modul yang terenkapitulasi dengan baik akan bersifat indenpenden dari modul lainya sehingga dapat digunakan pada bagian manapun dari program. Ia tidak akan terikat pada bagian tertentu dari program.

Bersifat transparan

Bila anda melakukan modifikasi pada suatu modul, maka perubahan tersebut akan dirasakan juga oleh bagian program yang menggunakan modul tersebut.Menghindari efek yang diluar perencanaan.

Modul yang terenkapsulasi dengan baik hanya akan berinteraksi dengan bagian program lainya melalui variable-variabel input/output yang telah didefinisikan sebelumnya. Dengan demikian, akan mereduksi kemungkinan adanya hasil imbas pemrosesan yang diluar perencanaan semula.

BERIKUT MERUPAKAN CONTOH ENKAPSULASI

 sebuah class “Bola” dengan property jari-jari dan method setJarijari(), showDiameter(), showLuasPermukaan(), dan showVolume(). Gunakan double untuk presisi variable jari-jari dan gunakan library math class untuk menggunakan constanta Math.PI.

Selanjutnya buatlah file testnya dengan urutan langkah, membuat variable Jarijari, menciptakan objek Bola, memanggil method showDiameter(), showLuasPermukaan(), dan showVolume(). Selanjutnya memanipulasi objek yang telah dibuat dengan memanggil method setJarijari() dengan menggunakan variable Jarijari yang telah dibuat. Tampilkan lagi hasilnya dengan menggunakan method showDiameter(), showLuasPermukaan(), dan showVolume(). (Jangan lupa untuk menggunakan konsep enkapsulasi).

  1. a.      Source code

Lingkaran.java

public class Lingkaran {

      private double jariJari;

      public void setJariJari(double jari) {

            this.jariJari = jari;  

      }

      //method untuk menampilkan Diameter

      public void showDiameter() {

            double Diameter = this.jariJari * 2;

            System.out.println(“Diameter      = “+ Diameter);

      }

      //method untuk menampilkan keliling

      public void showKeliling() {

            double Keliling = Math.PI * this.jariJari *this.jariJari;

            System.out.println(“Keliling Lingkaran= “+ Keliling);

      }

      //method untuk menampilkan Luas

      public void showLuas() {

            double Luas = 2 * Math.PI * this.jariJari * this.jariJari;

            System.out.println(“Luas Lingkaran       = “+ Luas);

      }

}

 

UjiLingkaran.java

 

public class UjiLingkaran{

      public static void main(String[] args) {

            double jari = 7; //memasukkan nilai jari-jari

            //menampilkan nilai dan mencetak teks “Jari-jari”

            System.out.println(“Jari – jari\t: “+jari);

            //membuat objek circle dari kelas Lingkaran

            Lingkaran circle = new Lingkaran();

            //memanggil setJarijari, showDiameter, showKeliling Lingkaran, showLuas

            //melalui objek circle dari kelas Lingkaran

            circle.setJariJari(jari);

            circle.showDiameter();

circle.showKeliling();

            circle.showLuas();

      }

}

HASIL

Gambar

  Penjelasan

Program di atas merupakan program sederhana untuk menghitung diameter, keliling, dan luas lingkaran dengan menerapkan konsep enkapsulasi. Pada UjiLingkaran.java dibuat objek baru yang bernama circle dari kelas lingkaran. Pada program ini dimasukan jari-jari=7 sehingga mendapatkan hasil seperti di atas.

REFERENSI / DAFTAR PUSTAKA

Hermawan Benny:Menguasai Java 2 dan Object Oriented Programming.Andi.Yogyakarta.2004.

http://blogs.mervpolis.com/roller/pirate153/entry/oop_encapsulation_part_1.

http://cantik-is3.blogspot.com/2008/04/keuntungan-prinsip-encapsulation.html

http://johanriadi1000.blogspot.com/2012/10/information-hiding-encapsulation.html

http://rendtladyrose.blogspot.com/2012/04/encapsulation-java-pbo_10.html.

ALGORITMA DAN STRUKTUR DATA “TREE”

  1. PENGERTIAN TREE

Kumpulan node yang saling terhubung satu sama lain dalam suatu  kesatuan yang

membentuk layakya struktur sebuah pohon. Struktur pohon adalah suatu  cara

merepresentasikan suatu struktur hirarki (one-to-many) secara grafis yang mirip

sebuah pohon, walaupun pohon tersebut  hanya tampak sebagai kumpulan node-node  dari atas ke bawah. Suatu struktur data yang tidak linier yang

menggambarkan  hubungan yang hirarkis (one-to-many) dan tidak linier antara

elemen-elemennya.

Deklarasi Pohon

Jika kita memperhatikan setiap simpul dalam pohon biner, kita bisa menyusun  struktur data yang tepat dari simpul-simpul tersebut. Kita dapat melihat bahwa dalam  setiap simpul selalu berisi dua buah pointer untuk menunjuk ke cabang kiri dan cabang  kanan, dan informasi yang akan disimpan dalamsimpul tersebut. Dengan memperhatikan hal ini, simpul dalam pohon biner disajikan sebagai berikut:

Gambar

Sesuai dengan gambar 7.1, maka deklarasi list yang sesuai adalah:

typedef char TypeInfo;

typedef struct Simpul *Tree;

struct Simpul {

TypeInfo Info;

tree Kiri, /* cabang kiri */

Kanan; /* cabang kanan */

};

 ISTILAH DALAM TREE

Gambar

 

Gambar

 

  1. JENIS-JENIS TREE

BINARY TREE

Tree dengan syarat bahwa tiap node hanya boleh memiliki maksimal dua sub

pohon dan kedua subpohon harus terpisah.

Kelebihan struktur Binary Tree :

  • Mudah dalam penyusunan algoritma sorting
  • Searching data relatif cepat
  • Fleksibel dalam penambahan dan penghapusan data

Gambar

 

Gambar

 

Gambar

 

  1. KUNJUNGAN PADA POHON BINER

Sebuah pohon biner memiliki operasi  traversal  yaitu suatu kunjungan pada

suatu simpul tepat satu kali. Dengan melakukan kunjungan lengkap kita akan

memperoleh urutan informasi secara linier yang tersinpan di dalam pohon biner.

Terdapat tiga jenis kunjungan pada pohon biner, yaitu :

  1. PREORDER

Kunjungan jenis ini mempunyai urutan kunjungan sebagai berikut :

–  Cetak isi simpul yang dikunjungi.

–  Kunjungi cabang kiri.

–  Kunjungi cabang kanan.

Prosedur untuk melakukan traversal secara PREORDER adalah sebagai berikut:

Gambar

 

  1. INORDER

Kunjungan jenis ini mempunyai urutan kunjungan sebagai berikut :

–  Kunjungi cabang kiri.

–  Cetak isi simpul yang dikunjungi.

–  Kunjungi cabang kanan.

Prosedur untuk melakukan traversal secara INORDER adalah sebagai berikut:

Gambar

 

  1. POSTORDER

Kunjungan jenis ini mempunyai urutan kunjungan sebagai berikut :

–  Kunjungi cabang kiri.

–  Kunjungi cabang kanan.

–  Cetak isi simpul yang dikunjungi

BERIKUT MERUPAKN CONTOH PROGRAMNYA

#include<stdio.h>//header file

#include<conio.h>

/* Deklarasi struct */

typedef struct Node{

      int data;    //data pada tree

      Node *kiri;  //penunjuk node anak kiri

      Node *kanan; //penunjuk node anak kanan

};

/* Fungsi untuk memasukkan data ke dalam tree */

void tambah(Node **root, int databaru){

      if((*root) == NULL){       //jika pohon/subpohon masih kosong

            Node *baru;//node “baru” dibentuk…

            baru = new Node;//berdasarkan struct “Node”

            baru->data = databaru; //data node baru diisi oleh variabel databaru

            baru->kiri = NULL;//penunjuk kiri node baru masih kosong

            baru->kanan = NULL;//penunjuk kanan node baru masih kosong

            (*root) = baru; //node pohon (root) diletakkan pada node baru

            (*root)->kiri = NULL;//penunjuk kiri node root masih kosong

            (*root)->kanan = NULL; //penunjuk kanan node root masih kosong

            printf(“Data bertambah!”);

      }

      else if(databaru < (*root)->data)//jika databaru kurang dari data node root…

            tambah(&(*root)->kiri, databaru);//tambahkan databaru pada subpohon kiri

      else if(databaru > (*root)->data)//jika databaru lebih dari data node root…

            tambah(&(*root)->kanan, databaru); //tambahkan databaru pada subpohon kanan

      else if(databaru == (*root)->data)//jika databaru sama dengan data node root

            printf(“Data sudah ada!”);//databaru tidak dapat ditambahkan pada tree

}

/* Fungsi untuk menampilkan data secara pre-order

   (data ditampilkan dari node induk, node anak kiri, lalu node anak kanan)

*/

void preOrder(Node *root){

      if(root != NULL){//jika pohon/subpohon tidak kosong

            printf(“%d “, root->data);//menampilkan data node yang dikunjungi

      preOrder(root->kiri);//mengunjungi node anak kiri

      preOrder(root->kanan); //mengunjungi node anak kanan

      }

}

/* Fungsi untuk menampilkan data secara in-order

   (data ditampilkan dari node anak kiri, node induk, lalu node anak kanan)

*/

void inOrder(Node *root){

      if(root != NULL){//jika pohon/subpohon tidak kosong…

      inOrder(root->kiri);//mengunjungi node anak kiri

      printf(“%d “, root->data);//menampilkan data node yang dikunjungi

      inOrder(root->kanan);//mengunjungi node anak kanan

      }

}

              

/* Fungsi untuk menampilkan data secara post-order

   (data ditampilkan dari node anak kiri, node anak kanan, lalu node induk)

*/

void postOrder(Node *root){

     if(root != NULL){//jika pohon/subpohon tidak kosong

     postOrder(root->kiri); //mengunjungi node anak kiri

     postOrder(root->kanan);//mengunjungi node anak kanan

     printf(“%d “, root->data); //menampilkan data node yang dikunjungi

     }

}

main(){

     int pil, c;

     Node *pohon, *t;

     pohon = NULL;

     do{

           int data;

           printf(“MENU\n”);

           printf(“1. Tambah\n”);

           printf(“2. Lihat Pre-Order\n”);

           printf(“3. Lihat In-Order\n”);

           printf(“4. Lihat Post-Order\n”);

           printf(“5. Exit\n”);

           printf(“Pilihan : “); scanf(“%d”, &pil);

           switch(pil){

           case 1 :

                printf(“Data baru : “);

                scanf(“%d”, &data);

                tambah(&pohon, data);

                break;

           case 2 :

                if(pohon != NULL)

                     preOrder(pohon);

                else

                     printf(“Masih kosong!”);

                break;

           case 3 :

                if(pohon != NULL)

                     inOrder(pohon);

                else

                      printf(“Masih kosong!”);

                break;

           case 4 :

                if(pohon != NULL)

                     postOrder(pohon);

                else

                     printf(“Masih kosong!”);

                break;

           }

           getch();

           printf(“\n”);

     }

     while(pil != 5);

}

HASIL

Gambar

 

Gambar

BELAJAR HTML

Bagi yang sudah mahir dalam menggunakan bahasa HTML, mungkin tidak akan membaca tulisan ini, tetapi mungkin ada temannya atau saudaranya atau teman saudaranya atau saudara temannya atau siapanyalah, yang belum bisa menggunakan bahasa HTML, tolong diberi tahu, untuk baca tulisan ini, siapa tahu bisa jadi mengerti bahasa HTML.Sebenarnya saya sendiri ingin bagi-bagi ilmu buat pembaca, soalnya bahasa HTML itu ternyata mudah dan simple kok! Dan belajarnya gak perlu software yang macam-macam, cukup sediain  simple text editor aja, yah… NotePad itu loh… Ya udah, langsung aja nyok mulai pelajaran hari ini!!!

  • •                Pertama yang harus dimengerti adalah, bahasa HTML ini selalu menggunakan “tag” seperti ini < dan >.contoh :
    • <BoDy>tes aja ya…</bodY>
  • •                Setiap tag, akan ditutup dengan tanda / , seperti contoh diatas

<body>…..</body> Bila hal tersebut tidak dilakukan, maka efeknya akan terus terkena pada tulisan-tulisan selanjutnya

  • •                Penulisan kodenya juga gak usah rapi-rapi banget, karena efek yang keluar akan sama, contoh :
    • <head>coba coba dulu</head> akan sama dengan yang dibawah o <HEAD>Sama aja deh</HEAD>
    • Atau mau seperti ini, gak ngaruh <HeAd> bla bla blab la</hEaD>
  • •                Satu hal lagi yang berbeda dari bahasa pemrograman yang lain, bila ada kesalahan dalam penulisan, anda tidak akan mengalami crash atau yang lain dalam menjalankannya, yang terjadi hanyalah computer tidak mengerti perintah anda dan tidak akan menjalankannya. Contoh :
    • Bila anda menulis seperti ini <bodi> yah salah tulis </body> yang akan terlihat pada webpage anda hanyalah tulisan yah salah tulis tanpa menghiraukan tulisan diantara tanda < dan >.
  • •                Setelah anda semua tahu cara penulisan bahasa HTML, barulah kita mulai pembuatan webpage nya.
  • •                Langkah pertamanya adalah dengan membuka text editor yang anda miliki, kalau saya sih, pake notepad.Lalu mulailah menulis kode sebagai berikut :

<html>

<head>

<title>webpage buatan saya</title>

</head>

<body>

Tulis apa aja ya… seterah

</body>

</html>

  • •                Setelah menulis semuanya, kemudian simpan pekerjaan anda dengan nama

(terserah).html, yang perlu diperhatikan adalah ekstensinya, yaitu .html bila

anda lupa menuliskannya maka file anda tidak akan dianggap sebagai file html oleh computer.

  • •                Sekarang, tanpa menutup pekerjaan anda, buka file html anda yang baru saja anda buat.Maka akan terlihat kurang lebih seperti ini : 

Gambar

  • •                Nah, bila hasilnya sudah mirip dengan contoh, kita akan mulai belajar mengerti tulisan yang telah saya suruh anda menulisnya.
    • Yang pertama <html>…..</html> kode ini wajib dituliskan karena untuk memberitahu computer bahwa tulisan yang kita ingin tulis menggunakan bahasa html
    • Yang kedua <head>…</head> pada penulisan html, akan terbagi bagian head dan bagian body.Penggunaan tag <head> biasanya untuk menuliskan bagian awal halaman, sedangkan bagian isi biasanya dengan tag <body>
    • Karena <body> sudah dijelaskan, jadi sudah selesai deh penjelasannya, tapi untuk sedikit tambahan, anda bisa menggunakan penulisan seperti  

<!—-perhatian-perhatian baca ini dulu–!>

Untuk membuat komentar-komentar mengenai kode yang anda tulis, karena mungkin ada yang melihat kode dari webpage anda terbantu dengan komentar anda tentang kode tersebut.

Yah… segini dulu ya tulisan saya tentang belajar html, mungkin beberapa hari lagi akan saya lanjutkan, tungguin aja dijamin deh gak nyesel!!

Terima kasih untuk yang membaca, semoga dapat mencerna tulisan saya dengan mudah, bila ada kesulitan, bisa kasih komentarnya kok lewat blog ini.

Bagian kedua

Heading

Oke, setelah belajar dasar penulisan html, sekarang kita akan beralih untuk penulisan isi webpage.Untuk belajar menulis html, saya sarankan anda membuka file latihan anda dengan text editor atau notepad dan dengan browser anda.Bila anda bingung, saya akan berikan contoh, misalkan anda menyipan file latihan anda dengan nama latihan.html, buka file tersebut dengan double klik, maka file anda sekarang sedang browser anda, apakah itu Internet explorer(IE), atau firefox, opera, dll.Kemudian buka kembali file anda dengan notepad, klik kanan pada file anda dan pilih open with… dan pilih notepad.Sekarang file anda telah dibuka dengan browser anda dan notepad, bila anda melakukan perubahan pada file anda, anda tinggal menyimpan pekerjaan anda dan dapat segera melihat perubahannya dengan beralih ke browser anda dan lakukan refresh.Ya, webpage anda akan berubah sesuai perubahan yang anda lakukan, cara ini sangat berguna bagi yang sedang mencoba-coba kode baru dan langsung melihat hasilnya.Bila hasilnya kurang memuaskan, anda tinggal beralih ke notepad anda dan ubah bagian-bagian yang masih salah kemudian simpan, dan refresh lagi.

Setelah tau cara-cara diatas, sekarang saatnya memperkenalkan anda pada heading.Dengan tag ini, anda dapat mengatur bagian-bagian yang penting dari tulisan anda.Heading terdiri dari 6 bagian, makin tinggi nominalnya makin kecil tulisannya.Contoh: 

Gambar

Penggunaan heading biasanya digunakan untuk membuat judul tulisan dan subjudul.Anda dapat menambahkan tag ini pada file latihan anda yang sebelumnya, perlu diingat anda menambahkannya setelah tag <body> .

<h1>ini judulnya</h1>

Terus isisnya deh, bla bla bla bla

<h2>subjudul nih</h2>

Biasanya lebih spesifik isinya

<h3>terus isi subsubjudulnya</h3>

Udah ah, capek hihihi

Paragraf

Nah, kalau udah bisa bikin judulnya, sekarang cara buat paragraph di html, karena bila anda tekan ENTER sebanyak apapun, tidak akan berpengaruh pada webpage, kalau tidak percaya, coba saja sendiri.Maka dari itu sekarang kita akan menggunakan tag <p> untuk membuat paragraph baru, karena ini tag special, jadi tidak butuh </p> untuk tag penutup. Sekarang coba tambahkan tag ini pada file latihan anda.

<p>Ini tulisan gak penting banget Ini tulisan gak penting banget Ini tulisan gak penting banget Ini tulisan gak penting banget Ini tulisan gak penting banget Ini tulisan gak penting banget<p> Ini tulisan gak penting banget Ini tulisan gak penting banget Ini tulisan gak penting banget Ini tulisan gak penting banget Ini tulisan gak penting banget

Ini tulisan gak penting banget<p>

Tapi ada hal yang perlu diingat, anda tidak perlu menggunakan tag <p> sebelum tag heading, karena heading sudah menjadikan tulisan tersebut terpisah dari paragraph.Yah, semuanya bisa anda tahu bila anda sudah mencobanya.Bila anda telah mencobanya, akan terlihat efek dari tag <p>.Efek dari tag ini dapat dikatakan seperti menekan ENTER dua kali.Nah, satu lagi tag yang dapat digunakan untuk membuat baris baru dalam html, yaitu tag <br>, atau bisa disebut breakline.Tag ini sama halnya bila kita tekan ENTER bila sedang mengetik biasa, coba aja dulu deh, baru komentar.

Nah, dari yang sudah dipelajari diatas, anda sudah dapat membuat webpage anda sendiri, ya… walaupun masih sangat sederhana, untuk latihan sih cukup, biar anda cepet hapal kode-kodenya dan dengan lincah menulis bahasa html.

Style up your text

Yup, setelah latihan tentang pelajaran sebelumnya, sekarang anda akan diperkenalkan dengan Bold, italic, underline, dan typewriter.

  • •                Untuk membuat tulisan anda menjadi bold di html, anda dapat menggunakan tag <b>….</b>
  • •                Untuk menjadikannya italic atau miring, gunakan tag <i>….</i>
  • •                Dan anda bisa menggunakan tag <u>….</u>
  • •                Bila anda ingin tulisan anda menjadi seperti ini, dapat menggunakan tag <tt>….</tt>
  • •                Dan bila anda ingin menggunakan keempat-empatnya, tinggal tuliskan semuanya saja, <b><i><u><tt>…..</b></i></u></tt>

List

Yah.. untuk langkah selanjutnya, anda bisa latihan sendiri dulu…agar siap untuk yang selanjutnya.

Sekarang kita akan bermain dengan List, atau anda mungkin lebih kenal dengan bullet dan numbering.

Untuk bullet, lebih dikenal dengan dengan unordered list, <ul>….</ul>.Untuk penulisannya harus seperti ini :

<ul>

<li>item 1

<li>item 2

<li>item 3

</ul>

Anda pasti bingung ketika melihat tag <li>, tag ini digunakan untuk mendefinisikan setiap item yang kita tuliskan, karena <li> berarti List Item.

Untuk numbering, pada html dikenal dengan order list <ol>…</ol>.Untuk penulisannya tidak berbeda dengan yang sebelumnya :

<ol>

<li>item 1

<li>item 2

<li>item 3

</ol>

Nah, setelah tahu cara membuat bullet dan numbering yang biasa, anda bisa mencoba yang sedikit luar biasa.Cobalah gabungkan antara ordered list dengan unordered list atau antara sesama order list atau unordered list.Yah, seperti dibawah ini :

<ul>

<li>item 1

<li>item 2 <ul>

<li>item 1

<li>item 2

<li>item 3 </ul>

<li>item 3 <ol>

<li>item 1

<li>item 2

<li>item 3

</ol>

</ul>

Nah, setelah banyak belajar tentang html, sekarang waktunya bereksperimen, cobalah gabungkan ilmu-ilmu yang telah anda dapatkan dan racik menjadi sesuatu yang tidak biasa, karena dengan begitu ilmu anda akan bertambah banyak.

All about picture

Pelajaran berikutnya adalah “gambar dalam webpage”.Yang perlu diingat adalah, gambar yang ingin anda masukkan ke dalam webpage anda, sebaiknya berada di dalam folder yang sama dengan webpage anda berada.Atau terdapat folder khusus untuk menyimpan gambar, itu bisa menjadi lebih baik, untuk jelasnya dapat dilihat digambar.Perlu diperhatikan juga, tipe gambar yang efektif untuk di dalam web adalah tipe GIF.Karena gambar berekstensi GIF akan menghemat ukuran, juga ekstensi GIF dapat memberikan gambar yang lebih menarik karena biasanya dapat bergerak.

Gambar

Bila sudah jelas tentang penyimpanan gambar, sekarang kita beralih ke cara memasukkan gambar ke dalam webpage.

Tag yang akan digunakan adalah <img src=“url gambarnya”>

Disini url gambar anda bisa berbagai macam, bila anda menyimpan gambar didalam folder “picture”, urlnya dapa seperti ini “picture\gambar.gif”.Bila anda menyimpannya bersama dengan webpage anda, berarti anda tinggal memasukkan nama gambar beserta estensinya saja “gambar.gif”.

Sekarang coba masukkan tag ini :

Ini ada gambar<img src=”url gambar”> baguskan gambarnya

Maka hasilnya jadi  Gambarseperti ini kan, gambar satu baris dengan teks.

Ini ada gambar<img align=top src=”url gambar”> baguskan gambarnya

Kalau yang ini Gambar jadi seperti ini.

Ini ada gambar<img align=middle src=”url gambar”> baguskan gambarnya

Yang ini jadi ada ditengah tengahnya 

Ini ada gambar<img align=bottom src=”url gambar”> baguskan gambarnya

Yang ini jadi ada ditengah tengahnya 

Ini ada gambar<img align=bottom src=”url gambar”> baguskan gambarnya

 Gambar

Gambar

Create Link

Setelah bermain-main dengan gambar, sekarang  saatnya membuat link.Tapi sebelumnya diharapkan anda telah membuat beberapa file html, agar sapat dihubungkan satu sama lain.Tagnya gak susah kok, masukkan yang seperti ini :

<a href=”url nya”>tulisan untuk linknya</a>

Jadinya seperti ini 

Gambar

Untuk link, anda dapat membuat link tidak hanya ke sesame fiel html, anda juga dapat link ke sebuah gambar.Anda tinggal mengganti urlnya saja.Yah, pokoknya being creative aja deh!Dan jangan takut mencoba!

Pelajaran selanjutnya adalah membuat link dengan gambar, biasanya dibuat untuk menarik perhatian orang banyak.

Tagnya adalah gabungan dari yang sudah kita pelajari sebelumnya.

<a href=”url nya”> <img src=”url gambar”> kalau perlu di kasih tulisan, ya tulis</a>

Nah, kalau gambar yang ingin di pasang ternyata terlalu besar untuk sebuah link, anda bisa mengatur ukurannya dengan menambahkan tag ini WIDTH=”angka berapa aja” HEIGHT=”angka juga” , jadinya seperti ini tag nya :

<a href=”url nya”> <img src=”url gambar” width=”65” height=”70”> kalau perlu di kasih tulisan, ya tulis</a>

Preformatted

Selanjutnya, kita akan mencoba menampilkan tulisan kita apa adanya di webpage. Misalkan kita menulis seperti ini :

Coba tes pencet enter

Terus tab

——————–

    |  Eh enter lagi     | ——————–

Nah, dari pelajaran yang sebelumnya pasti anda sudah tahu kalau kita menulis seperti ini, yang akan tampil di webpage tidak akan sama.Ya, itu memang benar, maka dari itu kita butuh tag yang seperti ini <pre>…</pre> .Tag ini akan menampilkan tulisan kita apa adanya di webpage.Kalau tidak percaya, coba aja sendiri, tapi ingat! Penempatan tagnya jangan sampai salah, caranya seperti ini nih :

<pre>

Coba tes pencet enter

Terus tab

——————–

    |  Eh enter lagi     |

——————–

</pre>

Special karakter

Nah, untuk tag yang selanjutnya adalah tentang special karakter.Mungkin anda bingung untuk memasukkan karakter seperti ini ® © ke dalam webpage.

Nah ini ada tabelnya : 

Gambar

Bagian Ketiga

Bermain dengan warna

Nah, setelah tahu cara menulis yang baik dalam html, sekarang adalah waktunya untuk mempercantik tampilan webpage dengan warna.Pertama yang harus anda pahami adalah, untuk memasukkan warna, html menggunakan kode heksa decimal.Wah, pasti ada yang bingung, gak uash dipkirin banget, saya sendiri gak hapal sama kode-kode itu, yang harus anda ketahui adalah konsep dari kode tersebut.Heksa decimal terdiri dari 16 angka dan huruf (1,2,3,4,5,6,7,8,9,A,B,C,D,E,F).Satu kode hesadesimal terdiri dari 6 angka atau huruf, contoh (6699FF [biru muda] , 000000 [hitam], FFFFFF [putih])Nah, bila sudah mengerti konsep dari heksadesimal, searang saya kasih tahu cara gampangnya, juga bisa memasukkan warna hanya dengan teks contoh : black, blue, red, dll.Semuanya ada di dalam tabel di bawah ini : 

Gambar

Warnai webpagemu!

Sekarang kita akan memasukkan warna-warna yang telah kita pelajari ke dalam background webpage.tag yang digunakan adalah bgcolor=#xxxxxx.

Namun tag ini harus diletakkan bersamaan dengan tag body, jadinya seperti ini.

<body bgcolor=#34ff55>

Anda juga dapat mengganti warna teks defaultnya, yang sebelumnya hanya warna hitam, dengan menggunanakan tag text=#xxxxxx.Hal lain yang juga dapat anda ganti adalah sebagai berikut :

Bgcolor

= warna backgournd

Text 

= warna teks

Link 

= warna link, sebelumnya warna biru

Vlink

= warna link yang setelah di klik

 

Semua tag ini di tempatkan bersamaan dengan tag body.

Oh, ya.. sebagai tambahan, anda juga dapat menggunakan gambar sebagai background.Dengan menggunakan tag ini : <body background=”url gambarnya”>

Penempatan tag ini juga sama seperti tag sebelumnya, harus bersamaan dengan tag body.

Nah, setelah mewarnai background, kita akan berlanjut untuk mewarnai teks, seperti ini. 

Gambar

Caranya tinggal masukkan tag ini sebelum teks yang ingin diwarnai.

<font color=#xxxxxx>…</font>

Untuk menambah kesan menarik dari tulisan anda, dapat juga memainkan ukuran font dengan tag berikut :

<font size=N>…</font>

Dan anda pun juga dapat mengganti jenis font, tapi dengan syarat font tersebut sudah terdapat di computer anda.Gunakan tag berikut :

<font face=xxx>….</font>

Paragraf alignment

Pada pelajaran sebelumnya paragraf memang sudah dibahas, namun yang kali ini sedikit berbeda.Karena kita akan mengatur align dari suatu paragraf.Tag yang digunakan adalah sebagai berikut :

<p align=center/left/right>…</p>

Tag ini memang berbeda dengan dengan yang sebelumnya, karena yang sebelumnya tidak menggunakan tag penutup dan yang sekarang menggunakan penutup.Sebagai catatan, alignment juga bisa digunakan pada gambar, anda tinggal menambahkan tag align=center.Jadinya seperti ini : <img src”gbr.gif” align=right>

Create your own table

Mungkin pelajaran yang cukup membingungkan bagi anda, karena saya sendiri bingung waktu pertama kali mempelajarinya.Pembuatan tabel itu sendiri pada html memiliki pola 

Gambar

 

Ya, bila anda sudah memahami gmbar di atas, pembuatan tabel akan dimulai dari kiri ke kanan dan akan turun ke bawah dan dimulai dari kanan lagi.Jadi, tagnya akan seperti ini :

Tabel dengan ukuran 3×3

<table border=1>

<tr>

<td>baris 1 kolom1</td>

<td>baris 1 kolom2</td>

<td>baris 1 kolom3</td>

</tr>

<tr>

<td>baris 2 kolom1</td>

<td>baris 2 kolom2</td>

<td>baris 2 kolom3</td>

</tr>

<tr>

<td>baris 3 kolom1</td>

<td>baris 3 kolom2</td>

<td>baris 3 kolom3</td>

</tr>

</table>

 

Border=x berarti menandakan tebalnya garis yang akan membentuk tabel.

<tr> berarti Table Row, atau baris dari tabel.

<td> menandakan Table Data, dapat diisi tag html apa saja yang sudah pernah anda pelajari sebelumnya.anda bisa memasukkan link, gambar, alignment,dll.

Oh, ya… anda juga dapat menggunakan vertival alignment untuk mengatur semua item yang ada di dalam satu cell :

<td valign=top/bottom/middle>

 

Untuk menyatukan beberapa cell, dapat menggunakan tag berikut :

  • •                Untuk merger kolom :

<td colspan=x>…</td>

  • •                Untuk merger baris :

<td rowspan=x>…</td>

Anda juga dapat menambahkan judul pada tabel anda dengan tag <caption>.Tetapi harus diingat penempatannya setelah tag <table>. <table border=1><caption>judul</caption>

Berikut tag yang perlu anda ketahui mengenai pembuatan tabel :

  • •                <table…. cellspacing=x> : untuk mengatur jarak antara cell
  • •                <table….cellpadding=x> : untuk mengatur jarak antara isi tabel dengan dinding cell
  • •                <tr bgcolor=#xxxxxx> /<tr bgcolor=#xxxxxx>: untuk mengatur warna di dalam suatu cell
  • •                <td background=”gbr.gif”> : untuk menambahkan gambar background pada cell
  • •                <table…background=”gbr.gif”> : untuk menambahkan gambar background pada tabel

 

Untuk sedikit tambahan, anda dapat membuat tabel tanpa border/garis dengan mengatur border=0 atau dengan hanya menulis <table> tanpa tag border.

 

New List

 

Bila sebelumnya anda belajar membuat list dengan tampilan yang sederhana, hanya dengan angka dan sebuah lingkaran.Sekarang anda dapat membuat dengan lebih banyak pilihan, berikut tagnya : 

Gambar

 

Untuk memulai list juga tidak perlu dari awal, dari tengah juga bisa, anda dapat menggunakan tag <ol…. start=14> jumlah dari start harus berupa angka, walaupun tipe dari list yang digunakan adalah tipe huruf.Anda juga dapat merubah urutan list(khusus ordered list) langsung dengan tag <li value=5>, hasilnya dapat dicoba sendiri.

 

 

Hmm.. mungkin sampai disini dulu pelajarannya, tapi jangan bersedih hati, mungkin kita dapat bertemu kembali di tulisan saya yang lainnya.Yang penting jangan malas untuk belajar dan jangan takut untuk mencoba, semua yang saya terangkan ini masih sangat dasar, banyak kombinasi yang dapat dibuat dari semuanya.Jadi sekali lagi jangan takut untuk mencoba segala sesuatu dan Being Creative!!!. 

GRAPHIC PADA VB.NET

Seluruh form yang ada pada VB mempunyai sebuah koordinat. Koordinat ini berguna untuk menentukan posisi gambar atau graphic pada form, apakah dikiri, tengah, atas, dan sebagainya. Koordinat sebuah form terdiri atas dua bagian yaitu koordinat horizontal (x) dan koordinat vertikal (y).

Gambar

 

 

Posisi koordinat dari komponen picturebox dapat dengan mudah diatur secara manual pada properties location picturebox sesuai gambar berikut:

 GambarGambar

CLR menggunakan implementasi tingkat lanjutdari antarmuka grafik windows (GDI) yang disebut dengan GDI+. GDI+ mengijinkan kita untuk membuat grafik, menggambar teks, atau memanipulasi image grafik sebagai objek. Sebelum menggambar garis dan bentuk, merender teks, dan menampilkan gambar dengan GDI+ objek graphics harus dibuat terlebih dahulu. Objek graphics me representasikan permukaan gambar GDI+ yaitu objek yang digunakan untuk membuat gambar grafis.

Ada dua langkah dalam pemrograman grafik :

1. Membuat gambar graphics

2. Menggunakan objek graphics untuk menggambar garis dan bentuk,  

    render teks, atau menampilkan gambar.

 

Mengambar Garis pada Form

Pengambaran Graphics diatas form dapat dilakukan melalui Objek Graphics yang dapat dideklarasikan sebagai berikut :

Dim MyGraphics As System.Drawing.Graphics = Me.CreateGraphics

Objek Graphics menyediakan berbagai metode untuk menggambar seperti DrawLine, DrawRectangle, dll  

Dalam pengembaran, kita membutuhkan Objek Pen menyediakan atribut seperti Warna dan Ketebalan garis dalam ukuran pixel.

Objek Pen dapat dideklarasikan sebagai berikut :

Dim Pen As New System.Drawing.Pen(Warna,Tebal)

Dimana Warna adalah warna yang diinginkan, dan Tebal adalah tebal pen dalam ukuran point.

 

Melakukan overriding terhadap Metoda OnPaint

OnPaint Event Handle adalah event yang akan dibangkitkan setiap kali form mengalami refresh (pada saat minimize, maximize maupun ditimpa oleh form lain), jadi jika kita melakukan overriding terhadap Event ini dan menempatkan perintah pengambaran garis didalamnya ini, maka garis tersebut akan digambar setiap proses refresh.

Parameter PaintEventArgs pada Sub OnPaint merupakan objek Graphics, sehingga kita tidak perlu melakukan Me.CreateGraphics.

Mengambar grafik vector 2 dimensi

Grafik vector merupakan kemampuan menggambar bentuk-bentuk tradisional seperti garis, kurva dan bentuk berdasarkan sekumpulan titik tertentu.

Untuk pengambaran grafik vector kita dapat menggunakan objek Pen dan Brush, dimana objek Pen untuk pengambaran bentuk garis, dan Brush untuk objek isian.

Mengambar garis  dengan Pen

Perintah DrawLine(pen, x1,y1, x2,y2) digunakan untuk menggambar garis dari koordinat awal (x1,y1) ke koordinat akhir (x2,y2)

Mengambar persegi  dengan Pen

Kita dapat menggunakan metoda DrawRectangle(Pen, x,y,lebar,tinggi) pada objek grafik untuk mengambar persegi pada koordinat x,y dengan lebar dan tinggi tertentu.

Mengambar Ellipse pada Form dengan Pen

Kita dapat menggunakan metoda DrawEllipse(Pen,x,y,lebar,tinggi) pada objek grafik untuk mengambar ellipse pada koordinat x,y dengan ukuran lebar dan tinggi tertentu

Mengambar Arc pada Form dengan Pen

Kita dapat menggunakan metoda DrawArc(Pen,x,y,lebar,tinggi,sudutawal,sudutakhir) untuk mengambar arcus, adapun perbedaan antara Ellipse dengan Arc adalah, kalau ellipse adalah gambar kurva tertutup, sedangkan Arc ditentukan oleh sudut awal dan akhir pengambaran kurva.

Mengambar Pie pada Form dengan Pen

Kalau Arc adalah kurva dengan sudut awal dan akhir, demikian juga pie, bedanya adalah pie merupakan kurva tertutup. Untuk menggambar pie dapat digunakan metoda DrawEllipse(Pen,x,y,lebar,tinggi).

Menggunakan structure Point

Kita juga dapat menggunakan structure point untuk penentuan koordinat (x,y) awal dan akhir pada perintah DrawLine(pen, point1, point2).

Menggambar poligon dengan array dari point

DrawPolygons(Pen,PointArray) merupakan kurva tertutup yang dibentuk oleh garis-garis, untuk menggambar poligon anda perlu menyediakan array yang berisi koordinat (x,y) dari sudut-sudut polygon.

 

 

Menggambar cardinal splines dengan array dari point

Jika polygon merupakan kurva tertutup yang dihubungan oleh garis lurus pada setiap koordinat (x,y) sudutnya, maka DrawCurve(Pen, PointArray, Tangen) merupakan kurva terbuka yang dibentuk dengan garis lengkung yang memiliki nilai tangent tertentu.

Menggambar Bezier splines dengan array dari point

DrawBezier(pen, x1, y1, x2, y2, x3, y3, x4, y4) merupakan kurva dengan dari koordinat (x1,y1) awal ke koordinat (x2,y2), dengan dua koordinat control (x3,y3) dan (x4,y4).

Menggunakan Path

Path dibentuk oleh kombinasi dari berbagai bentuk seperti :

  • Lines
  • Rectangles
  • Ellipses
  • Arcs
  • Polygons
  • Cardinal splines
  • Bézier splines

Menggunakan structure rectangle

Sebagaimana dengan structure point, kita dapat juga menggunakan struktur rectangle untuk mengambar bentuk yang membutuhkan koordinat x,y dan ukuran lebar, tinggi, misalnya

DrawRectangle(pen, rectangle), DrawArc(Pen,x,y,rectangle,sudutakhir),

DrawEllipse(Pen,rectangle), DrawEllipse(Pen,rectangle)

Mengambar objek isian pada Form dengan Brush

Kalau kita mengambar bentuk dengan Pen, maka hasilnya tidak disertai dengan isian, sedangkan untuk menghasilkan gambar dengan isian kita membutuhkan Brush. 

Menggunakan SolidBrush

SolidBrush(warna) dapat digunakan untuk menggambarkan objek isian seperti FillRectangle(brush, rectangle), FillEllipse(brush, rectangle), FillPie(brush, rectangle, sudutawal, sudutakhir),  dengan warna yang ditentukan pada brush.

Menggunakan HatchBrush

HatchBrush(pola, warnagaris, warnalatarbelakang), dapat digunakan untuk menggambar objek isian dengan pola isian tertentu seperti :

  • HatchStyle.Horizontal
  • HatchStyle.Vertical
  • HatchStyle.ForwardDiagonal
  • HatchStyle.HatchStyleBackwardDiagonal
  • HatchStyle.HatchStyleCross
  • HatchStyle.HatchStyleDiagonalCross

HatchBrush terdefinisi pada namespace System.Drawing.Drawing2D

 

  • Pembuatan Objek Graphics

Sebuah objek graphics dapat dibuat dengan cara :

ü  Menerima sebuah reference ke sebuah objek graphics sebagai bagian dariPaintEventArgs pada event Paint dari sebuah form atau control.

ü  Dengan cara memanggil method CreateGraphics dari sebuah control atau form untuk memperoleh sebuah reference ke sebuah objek Graphics yang merepresentasikan permukaan gambar.

ü  Membuat sebuah objekGraphics dari objek yang diturunkan dari image.Pendekatan ni berguna ketika ingin menambahkan/memodifikasi gambar yang sudah ada.

Untuk memperoleh sebuah reference ke objek Graphics dan PaintEventArgs pada paint Event:

ü  Deklarasi objek Graphics

ü  Berikan variable untuk mereference ke objek Graphics yang dilewati sebagai bagian dari PaintEventArgs

ü  Masukkan kode untuk menggambar ke form atau control

Kode berikut contoh bagaimana merefer sebuah objek Graphics dari Paint Event Args

pada event paint :

Private Sub Form1_Paint(sender As Object,pe As PaintEventArgs) Handles MyBase.Paint

Deklarasi objek Graphics dan set ke objek Graphics pada PaintEventArgs

Dim g As Graphics = pe.Graphics

Masukkan kode untuk menggambar ke form di sini

End Sub

  • Method CreateGraphics

Untuk membuat sebuah graphic pada vb tentukan lebih dahulu container yang mendeklarasikan dimana graphic tersebut diletakkan misalnya dalam form, panel, dan sebagainya dengan menggunakan method createGraphics. CreateGraphics dari form atau control yang anda ingin gambar :

Contoh method creategraphics pada form:

Gambar

 

Membuat dari objek Image

Sebagai tambahan, pembuatan objek Graphics dari objek yang diturunkan dari kelas

Image dengan cara memanggil method Graphics.FormImage.

Gambar

 

 

Menggambar dan manipulasi bentuk dan image

Setelah dibuat objek Graphics bias digunakan untuk menggambar garis dan bentuk, render teks, ataumenampilkan gambar. Objek yang diperlukan untuk digunakan pada objek Graphics adalah :

  • Kelas Pen, digunakan untuk menggambar garis, bentuk, atau menggambar bentuk geometris lainnya.
  • Kelas Brush,digunakan untuk mengisi area graphics, seperti mengisi bentuk, gambar atau teks.
  • Kelas Font, digunakan untuk menentukan font dari teks.
  • Structure Color,digunakan untuk mengeset warna yang akan ditampilkan.

 

GDI+ dapat digunakan untuk menggambar image yang berada pada sebuah file pada aplikasi dengan membuat sebuah objek baru sebagaikelas image(seperti bitmap),membuat objek Graphics yang merefer permukaan gambar yang ingin digunakan, dan memanggil method DrawImage dari objek Graphics. Untuk menggambar sebuah image dengan GDI+ langkahnya sebagai berikut:

  • Buat sebuah objek yang merepresentasikan image yang ingin ditampilkan. Objek harus sebuah anggota dari sebuah kelas yang diturunkan dari image seperti bitmap atau metafile. Sebagai contoh berikut:

Dim mybitmap as new Bitmap(“C:/MyImages\TestImages.bmp)

  • Buat sebuah objek Graphics yang merepresentasikan permukaan gambar yang ingin digunakan.

Dim g as Graphics=Button1.createGraphics

  • Panggil method Graphics.DrawImage dari objek graphics anda untuk menggambar image. Image yang akan digambar dan koordinat dimana akan digambar harus ditentukan. g.DrawImage(myBitmap,1,1)
  • Menggambar Garis dan Bentuk dengan GDI+

Objek graphics menyediakan method untuk menggambar berbagai jenis garis atau bentuk. Bentuk yang simple maupun komplek dapat digambar menggunakan warna yang transparan atau solid, garis, kurva, dan bentuk lainnya dapat digambar menggunakan objek pen. Untuk mengisi sebuah area seperti segi empat atau curve tertutup, objek brush digunakan. Untuk menggambar garis atau bentuk garisan lain :

  1. Ambil sebuah reference atau objek Graphics yang akan akan digunakan Dim g as graphics = Button1.CreateGraphics
  2.  Buat instance dari kelas Pen yang diinginkan untuk menggambar garis dan set property lainnya Dim mypen as new Pen(Color.Red) myPen.width=5
  3. Panggil method yang sesuai untuk bentuk yang anda inginkan, beserta parameter lain yang dibutuhkan. Tabel berikut berisi daftar method yang umum digunakan:Gambar

Menggambar Bentuk Berisi

  • Ambil sebuah referensi ke objek grafik
  • Buat sebuah instance dari Brush yang ingin digunakan untuk menggambar bentuk

Dim g as Graphics= Button1.CreateGraphics

Dim myBrush as new SolidBrush(Color.Red)

Panggil method yang sesuai dengan bentuk yang diinginkan.Sebagai contoh,untuk FillPolygon dibutuhkan array titik untuk menjelaskan bentuknya. Method lain seperti FillRectangl atau FillPath, dibutuhkan sebuah objek yang menjelaskan area yang akan diisi.

Gambar

 

BERIKUT INI MERUPAKAN SEBUAH PROGRAM UNTUK MEMBUAT PIE CHART

Public Class Form1

    Public Sub DrawPieChart(ByVal percents() As Integer, ByVal colors() As Color, ByVal surface As Graphics, ByVal location As Point, ByVal pieSize As Size)

        Dim sum As Integer = 0

        For Each percent As Integer In percents

            sum += percent

        Next

        Dim percentTotal As Integer = 0

        For percent As Integer = 0 To percents.Length() – 1

            surface.FillPie( _

            New SolidBrush(colors(percent)), _

            New Rectangle(location, pieSize), CType(percentTotal * 360 / 100, Single), _

            CType(percents(percent) * 360 / 100, Single))

            percentTotal += percents(percent)

        Next

        Return

    End Sub

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

Dim percents() As Integer = {TextBox1.Text, TextBox2.Text, TextBox3.Text}

Dim colors() As Color = {Color.Blue, Color.Green, Color.Black}

        Dim graphics As Graphics = Me.CreateGraphics

        Dim location As Point = New Point(0, 0)

        Dim size As Size = New Size(200, 200)

        DrawPieChart(percents, colors, graphics, location, size)

    End Sub

End Class

HASILNYA

Gambar

 

BERIKUT MERUPAKAN SEBUAH PROGRAM UNTUK MEMBUAT BERMACAM-MACAM BENTUK GRAPHIC

Public Class Form1

 

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

        Dim gambar As System.Drawing.Graphics

        Dim pena1 As New Pen(Color.Cyan, 2)

        Dim pena3 As New Pen(Color.Red, 2)

        gambar = Me.CreateGraphics

        gambar.DrawRectangle(pena1, 5, 5, 150, 275)

        gambar.DrawRectangle(pena3, 200, 80, 250, 150)

 

        Dim gambar1 As System.Drawing.Graphics

        Dim pena2 As New Pen(Color.Yellow, 2)

        Dim pena4 As New Pen(Color.Cyan, 2)

        gambar1 = Me.CreateGraphics

        gambar1.DrawEllipse(pena2, 5, 5, 150, 275)

        gambar1.DrawEllipse(pena4, 200, 80, 250, 150)

 

    End Sub

 

    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click

        PictureBox1.Visible = True

        Dim G As Graphics

        G = PictureBox1.CreateGraphics

        Dim points() As Point = {New Point(20, 20), New Point(100, 200), New Point(250, 100), New Point(350, 200)}

        G.DrawCurve(Pens.Black, points, 0.1)

        G.DrawCurve(Pens.GreenYellow, points, 0.5)

        G.DrawCurve(Pens.Green, points, 1)

        G.DrawCurve(Pens.Red, points, 1.5)

 

    End Sub

 

    Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click

        PictureBox1.Visible = True

        Dim G As Graphics

        Dim blackPen As New Pen(Color.Blue, 2)

        Dim start As New Point(40, 100)

        Dim control1 As New Point(150, 10)

        Dim control2 As New Point(240, 20)

        Dim [end] As New Point(300, 80)

 

        Dim start1 As New Point(40, 100)

        Dim control4 As New Point(100, 40)

        Dim control3 As New Point(200, 60)

        Dim [end1] As New Point(300, 80)

 

        Dim start2 As New Point(40, 100)

        Dim control5 As New Point(100, 60)

        Dim control6 As New Point(250, 140)

        Dim [end2] As New Point(300, 80)

 

        Dim start3 As New Point(40, 100)

        Dim control7 As New Point(100, 80)

        Dim control8 As New Point(250, 180)

        Dim [end3] As New Point(300, 80)

 

        G = PictureBox1.CreateGraphics

        G.DrawBezier((blackPen), start, control1, control2, [end])

        G.DrawBezier((blackPen), start1, control4, control3, [end1])

        G.DrawBezier((blackPen), start2, control5, control6, [end2])

        G.DrawBezier((blackPen), start3, control7, control8, [end2])

 

    End Sub

End Class

 

HASIL

Gambar

Gambar

 

Penjelasan

Dalam program ini  terdapat tiga button jika diklik button Ellipses akan muncul dua buah persegi panjang yang didalamnya terdapat masing-masing satu lingkaran elips, untuk membuatnya digunakan fungsi DrawRectangle untuk persegi panjang dan DrawEllipse untuk lingkaran elipsnya. Untuk menetukan warna dan besarnya garis dibuat variabel pena1,2,3 dan 4.Kemudian saat diklik button Ordinal Curves akan tercipta garis-garis yang membentuk kurve untuk membuatnya digunakan fungsi DrawCurve, untuk posisi titik koordinat dari kurvenya diisikan dalam variabel point. Lalu dipanggil dengan variabel G. Dibuat juga picturebox untuk menampung hasil dari penggambaran kurva tersebut.Saat ditekan button Bezier Curves akan muncul gambar garis denga lengkungan-lengkungan, untuk membuatnya digunakan fungsi DrawBezier. Dibuat juga picturebox untuk menapung hasil dari penggambaran lengkurang garis-garis tersebut.

Grafika Komputer “Lighting dan Material”

  1. Bentuk Solid

Fungsi Solid merupakan implementasi dari object 3D yang berpusat pada asal pemodelan sistem koordinat. Utara dan kutub selatan bola berada di Z positif dan negatif sumbu-masing-masing dan meridian utama persimpangan sumbu X positif.

Berikut adalah list untuk bangun 3D:

  1. Kubus Solid

void glutSolidCube(GLdouble size);

  1. Fungsi glutSolidSphere membuat bola berpusat pada asal pemodelan sistem koordinat. Utara dan kutub selatan bola berada di Z positif dan negatif sumbu-masing-masing dan meridian utama persimpangan sumbu X positif.
  2. Kerucut Solid.
  3. Torus Solid.
  4. Dodecahedron Solid
  5. Tetra Hedron solid.
void glutSolidSphere(GLdouble radius,GLint slices, GLint stacks);
void glutSolidCone(GLdouble base, GLdouble height,GLint slices, GLint stacks);
void glutSolidTorus(GLdouble innerRadius, GLdouble outerRadius, GLint nsides, GLint rings);
void glutSolidDodecahedron(void);

glutSolidTetrahedron void (void);

  1. Oktahedron solid.
  2. Icosahedron solid.
  3. Poci teh solid
void glutSolidOctahedron(void);
void glutSolidIcosahedron(void);
void glutSolidTeapot(GLdouble size);
2.    Lengkapi pada fungsi init seperti di bawah ini.
Gambar

1.      Fungsi di atas adalah fungsi inisialisasi untuk pencahayaan dimana efek pencahayaan bersifat menyeluruh dan menyebabkan semua obyek memiliki warna serupa. Agar warna tiap obyek 3d berbeda dengan efek pencahayaan yang aktif maka fungsi dasarnya pada inisialisasi adalah glColorMaterial(GLenum face,Glenum mode); Fungsi di atas dapat diaktifkan setelah glEnable(GL_COLOR_MATERIAL) Parameter face adalah variabel untuk menentukan bagaimana material warna obyek 3D ditampilkan, pilihannya antara lain GL_FRONT atau GL_BACK, Sedangkan parameter mode adalah variabel untuk memilih material warna jenis apa yang diaktifkan pilihannya antara lain:

Gambar

KODE PROGRAM UNTUK MEMBUAT GAMBAR RUMAH YANG MENGGUNAKAN LIGHTING dan MATERIAL

#include <stdlib.h>

#include <gl/glut.h>

int w=600, h=600, z=0;

int x1=0, y1=0, sudut=0, z1=0;

float skalaX=1, skalaY=1, skalaZ=1;

int cx, cy;

void myKeyboard(unsigned char key, int x, int y){

 if (key ==’a’) z+=5;

 else if (key == ‘s’) z-=5;

 else if (key == ‘d’) skalaX+=0.5;

 else if (key == ‘w’) skalaX-=1;

 else if (key == ‘e’) skalaY+=0.5;

 else if (key == ‘r’) skalaY-=1;

 else if (key == ‘t’) skalaZ+=0.5;

 else if (key == ‘u’) skalaZ-=1;

 else if (key == ‘x’) {

  x1=1;

  y1=0;

  z1=0;

  sudut+=10;

 }

 else if (key == ‘y’) {

  y1=1;

  x1=0;

  z1=0;

  sudut+=-10;

 }

 else if (key == ‘z’) {

  y1=0;

  x1=0;

  z1=1;

  sudut+=-10;

 }

}

void init(){

 GLfloat LightPosition[] = {10.0f, 10.0f, 20.0f, 0.0f};

 GLfloat LightAmbient[] = {0.0f, 1.0f, 0.0f, 1.0f};

 GLfloat LightDiffuse[] = {0.7f, 0.7f, 0.7f, 1.0f};

 GLfloat LightSpecular[] = {0.5f, 0.5f, 0.5f, 1.0f};

 GLfloat Shine[] = { 80 };

 glShadeModel(GL_SMOOTH);

 glClearColor(0.0f,0.0f,0.0f,0.5f);

 glClearDepth(1.0f);

 glEnable(GL_DEPTH_TEST);

 glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);

 glMaterialfv(GL_FRONT, GL_SPECULAR, LightSpecular);

 glMaterialfv(GL_FRONT, GL_SHININESS, Shine);

 glEnable(GL_LIGHTING);

 glEnable(GL_LIGHT0);

 return;

}

void pagar(){

//pagar

glPushMatrix();

glEnable(GL_COLOR_MATERIAL);

glTranslatef(3,-1,1);

glColor3f(1,1,0);

glPushMatrix();

glTranslatef(-1,0.2,0);

glScalef(5.4,0.2,0.1);

glutSolidCube(1);

glPopMatrix();

glPushMatrix();

glTranslatef(-1,-0.2,0);

glScalef(5.4,0.2,0.1);

glutSolidCube(1);

glPopMatrix();

glScalef(0.2,1,0.1);

//glutSolidCube(1);

glTranslatef(2,0,0);

glutSolidCube(1);

glTranslatef(2,0,0);

glutSolidCube(1);

glTranslatef(2,0,0);

glutSolidCube(1);

glTranslatef(2,0,0);

//glutSolidCube(1);

glTranslatef(2,0,0);

//glutSolidCube(1);

glTranslatef(2,0,0);

//glutSolidCube(1);

glTranslatef(2,0,0);

//glutSolidCube(1);

glTranslatef(-12,0,0);

glutSolidCube(1);

glTranslatef(-2,0,0);

glutSolidCube(1);

glTranslatef(-2,0,0);

glutSolidCube(1);

glTranslatef(-2,0,0);

glutSolidCube(1);

glTranslatef(-2,0,0);

glutSolidCube(1);

glTranslatef(-2,0,0);

glutSolidCube(1);

glTranslatef(-2,0,0);

glutSolidCube(1);

glTranslatef(-2,0,0);

glutSolidCube(1);

glTranslatef(-2,0,0);

glutSolidCube(1);

glTranslatef(-2,0,0);

glutSolidCube(1);

glDisable(GL_COLOR_MATERIAL);

glPopMatrix();

}

void renderScene(void){

 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

 glClearColor(1,1,1,1);

 glLoadIdentity();

 glTranslatef(0,0,z);

 glRotatef(sudut,x1,y1,z1);

 glScalef(skalaX, skalaY, skalaZ);

 //tembok

 glPushMatrix();

 glEnable(GL_COLOR_MATERIAL);

 glColor3f(0.5,0.5,0.5);

 glRotatef(50,0,1,0);

 glutSolidCube(3);

 glDisable(GL_COLOR_MATERIAL);

//pagar

glPushMatrix();

glTranslatef(-2,0,-3.5);

pagar();

glPopMatrix();

glPushMatrix();

glRotatef(-90,0,1,0);

glTranslatef(-2,0,1.5);

pagar();

glPopMatrix();

glPushMatrix();

glRotatef(-90,0,1,0);

glTranslatef(-2,0,-3.5);

pagar();

glPopMatrix();

 //pintu

glPushMatrix();

glEnable(GL_COLOR_MATERIAL);

glColor3f(0.2,0,1);

glTranslatef(-0.6,-1,1.46);

glScalef(7,10,1);

glutSolidCube(0.1);

glDisable(GL_COLOR_MATERIAL);

glPopMatrix();

//jendela

glPushMatrix();

glEnable(GL_COLOR_MATERIAL);

glColor3f(1,0.5,0);

glTranslatef(0.5,0.1,1.46);

glScalef(3,3,1);

glutSolidCube(0.1);

glDisable(GL_COLOR_MATERIAL);

glPopMatrix();

glPushMatrix();

glEnable(GL_COLOR_MATERIAL);

glColor3f(1,0.5,0);

glTranslatef(0.9,0.1,1.46);

glScalef(3,3,1);

glutSolidCube(0.1);

glDisable(GL_COLOR_MATERIAL);

glPopMatrix();

glPushMatrix();

glEnable(GL_COLOR_MATERIAL);

glColor3f(1,0.5,0);

glTranslatef(0.9,-0.3,1.46);

glScalef(3,3,1);

glutSolidCube(0.1);

glDisable(GL_COLOR_MATERIAL);

glPopMatrix();

glPushMatrix();

glEnable(GL_COLOR_MATERIAL);

glColor3f(1,0.5,0);

glTranslatef(0.5,-0.3,1.46);

glScalef(3,3,1);

glutSolidCube(0.1);

glDisable(GL_COLOR_MATERIAL);

glPopMatrix();

glPopMatrix();

//atap

 glPushMatrix();

 glEnable(GL_COLOR_MATERIAL);

 glColor3f(0.5,0,1);

 glRotatef(5,0,1,0);

 glTranslatef(0,1.5,0);

 glScalef(3,1.3,3);

 glutSolidOctahedron();

 glDisable(GL_COLOR_MATERIAL);

 glPopMatrix();

 glutSwapBuffers();

}

void resize(int w1, int h1){

 glViewport(0,0,w1,h1);

 glMatrixMode(GL_PROJECTION);

 glLoadIdentity();

 gluPerspective(45.0,(float) w1/(float) h1, 1.0,300.0);

 glMatrixMode(GL_MODELVIEW);

 glLoadIdentity();

}

void timer(int value){

 glutPostRedisplay();

 glutTimerFunc(50,timer,0);

}

void main (int argc, char **argv){

 glutInit(&argc, argv);

 glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA);

 glutInitWindowPosition(100,100);

 glutInitWindowSize(w,h);

 glutCreateWindow(“MODUL 9”);

 glutDisplayFunc(renderScene);

 glutReshapeFunc(resize);

 glutKeyboardFunc(myKeyboard);

 glutTimerFunc(1,timer,0);

 init();

 glutMainLoop();

}

HASIL PROGRAMNYA

Gambar