PERCOBAAN 11


   POLTEKAD KODIKLATAD
JURUSAN TELEKOMUNIKASI

PRAKTIK BAHASA PEMROGAMAN

PERCOBAAN 11
MEMBUAT  GRAFIK DENGAN SCROLLBAR

1.         Tujuan Praktikum.             Agar Bamasis mampu membuat grafik dengan scrollbar menggunakan Embarcadero XE5.

2.         Alat dan Bahan.

a.         Laptop/PC; dan

b.         Software Delphi / Embarcadero XE5.

3.         Landasan Teori.
            Fungsi trigonometri merupakan suatu fungsi yang grafiknya berulang secara terus menerus dalam periode tertentu. Fungsi dari periode itu sendiri merupakan suatu jarak antara dua puncak/lembah atau jarak antara awal puncak dan akhir lembah. Selain itu, terdapat amplitudo yang merupakan setengah dari selisih nilai maksimum dan minimum dari suatu fungsi. Rumus amplitudo sebagai berikut:
Fungsi trigonometri sederhana meliputi fungsi sinus, fungsi cosinus dan fungsi tangen. Masing-masing fungsi tersebut dijelaskan dalam bentuk grafik baku fungsi trigonometri seperti berikut:






  • Grafik Fungsi Sinus, y = sin x
Nilai dari sinus adalah -1 ≤ sin (x) ≤ 1
  • Grafik Fungsi Cosinus, y = cos x
Nilai dari cosinus adalah -1 ≤ cos (x) ≤ 1 
  • Grafik Fungsi Tangen, y = tan x
Grafik tangen ini tidak mempunyai nilai maksimum.

Selain itu terdapat grafik tidak baku pada fungsi trigonometri yang lebih kompleks. Bentuk fungsinya adalah:
Fungsi trigonometri memiliki nilai minimum dan maksimum, cara menentukannya dapat menggunakan metode grafik dan melalui rumus. Metode grafik dengan cara menggambarkan grafiknya, titik puncak pada bukit adalah nilai maksimum sedangkan titik terendah pada lembah adalah nilai minimum. 
https://blog.ruangguru.com/memahami-fungsi-trigonometri-sederhana
Grafik adalah  lukisan dengan gambar/garis untuk mengetahui naik turunnya suatu keadaan data yang ada. Semua grafik memiliki tujuan yang sama yaitu memudahkan melakukan analisa sekumpulan data-data angka. Karena jika hanya angka-angka saja akan membutuhkan waktu lama untuk memahami makna dibalik angka-angka tersebut, tapi jika di wakili dengan simbol grafik bisa mempermudah pemahamannya.

Berikut pengertian grafik menurut para ahli:

a.       Menurut Soedarso, grafik adalah sajian visual untuk membandingkan jumlah data pada waktu berbeda.
b.      Menurut I Wayan Nuarsa, grafik adalah sajian data dalam bentuk gambar atau symbol.
c.       Menurut Nani Darmayanti, grafik adalah gambaran pasang surut keadaan yang dilukiskan dengan garis atau gambar.
d.      Menurut Yudhi Wicaksono, grafik adalah sajian dalam bentuk visual yang di pakai dalam berbagai bidang.
e.       Menurut Karl E. Case, grafik adalah sajian dua dimensi dari kelompok angka atau data.
f.       Menurut Lilis Rohaeni & Fikurrahman, grafik adalah gambar yang terdiri atas garis dan titik-titik koordinat.
g.      Menurut Murray, grafik adalah representasi gambar variable.
h.      Menurut J.Supranto, grafik adalah gambar visual data berupa angka dan symbol yang berasal dari table yang telah dibuat.
i.        Menurut Hery Sonawan, grafik adalah gambaran data yang diplot disebuah bidang dengan menghubungkan dua variable atau lebih.
j.        Menurut Kathleen Meehan Arias, grafik adalah metode untuk menyajikan data kuantitatif secara visual.

Menggambar di embarcadero dilakukan dengan memanipulasi canvas. Canvas dapat dianalogikan  sebagai sebuah canvas pelukis yang dapat digambar sesuai dengan kehendak pelukisnya.  Pada materi ini yang akan kita gunakan adalah canvas pada komponen TImage (ada di bagian Additional). Coba letakkan komponen Timage, letakkan satu tombol
                                 
















Sistem Koordinat Canvas. Aturan koordinat pada canvas adalah sebagai berikut:


Image.Canvas





Arah koordinat x membesar


Titik (0,0)




Arah koordinat y membesar




Semua koordinat bernilai positif dan merupakan bilangan bulat (tidak ada pecahan)

Berbagai Method Canvas untuk Menggambar. Objek canvas memiliki beberapa method lain untuk menggambar:
Nama Method
Keterangan
Arc
Menggambar lengkungan
Ellipse
Menggambar lingkaran/ellips.
MoveTo
Menggeser posisi
LineTo
Menggambar garis (digunakan bersama
MoveTo)
Rectangle
Membuat kotak
RoundRect
Membuat kotak yang memiliki sudut melengkung
Polygon
Menggambar poligon


http://file.upi.edu/Direktori/FPMIPA/JUR._PEND._MATEMATIKA/196606251990012-RINI_MARWATI/11_HandOutProgKomp12.pdf






 Obyek ScrollBar digunakan untuk menunjukkan atau menampilkan angka dengan batasan tertentu pada suatu program yang telah ditentukan.
     Gambar 11.1 Tampilan object scrollbar


Contoh Programnya :
procedure TForm1.ScrollBar1Change(Sender: TObject);
begin
edit1.Text:=inttostr(scrollbar1.Position);
form1.Color:=rgb(strtoint(edit1.Text),strtoint(edit2.Text),strtoint(edit3.Text));
end;

4.         Langkah-Langkah Percobaan.
a.    Setelah laptop telah menyala dan membuka software Embarcadero XE5;
b.    Buka program embarcadero XE5 yang sudah berjalan, lalu buatlah form pada Menu File>New>Forms application;
c.      Rangkailah lembar kerja form grafik, Setiap icon dari object pada tool Palette akan dimasukkan ke jendela form yang akan menghasilkan program yang dijalankan dengan code/syntax;
d.    Setelah itu atur object  lembar kerja form di menu properties sebelah kiri lembar kerja . Melalui Jendela Properties atur property setiap object sebagai berikut ;

    Tabel 10.1 Pengaturan setiap object pada design lembar kerja.

      Object      Tool Palette
            Properties
Value

Form

Caption

Grafik

Standart
-Button1
-Button2
-Button3

Caption

-Sinus
-Cosinus
-Pulsa
Standart
Label 1-3

-Caption


-Visible

- X
- Y
- Z
- False

Standart
Edit1
Edit2
Edit3
Text
-

Additional
Image1 Image2
Image3
Properties>Visible
-     False
Standart
Scrollbar1
Scrollbar2
Scrollbar3
-
-      
         
                              
                               Gambar 10.1 Tool palette berisikan banyak object


e.    Atur setip object yang  ingin tidak dinampakkan setelah program diplay/dijalankan dengan mengubah visible menjadi true atau false. Object image1, image2, image3, label5,label6,dan label7 gunakan pengaturan visible>false .Setelah tombol diplay akan didapatkan tampilan object tidak ada.
f.     Tambahkan object Scrollbar untuk mengatur gelombang yang diinginkan.
              11.2 Menyisipkan object scrollbar pada lembar kerja.


g.    Pada lembar percobaan kali ini Buat syntax program/coding dari setiap object Button1 (Sinus) ,Button2  (cosinus) dan ditambah kan Button3 (Pulsa )yang telah dibuat pada lembar kerja form . Program dapat berhasil dan sukses terlaksana bila kode dibuat sesuai ketentuan aritmatika.

         
Gambar 10.4 Pembuatan object Button

h.    Desain embarcadero  
Tampilan jendela kode dapat muncul bila di jendela form icon yang dibuat dari toolbox dilklik dua kali atau klik menu view- setelah itu pilih klik code. Setelah kode dibuat klik tombol design dibawah jendela kode tersebut, maka Form dapat dibuktikan dengan klik tombol play pada menu toolbar

i.      Tunggu sampai jendela form memunculkan UI (User interface) dengan klik tombol play atau Run F9.












5.         Hasil Percobaan.

a.    Nyalakan laptop, sampai muncul tampilan utama pada laptop/PC;

   
                                       Gambar 10.5 Menjalankan embarcadero

b.    Buka program embarcadero XE5;

          
Gambar 10.6 Lembar kerja form

c.    Rangkailah lembar kerja form sesuai yang diharapkan, Setiap icon dari tool palette akan dimasukkan ke jendela form yang akan menghasilkan program yang dijalankan dengan code/syntax. Sesuai Tabel Jendela Properties atur property setiap object . Maka akan mendapatkan lembar kerja seperti pada tampilan berikut ini;

             
                           Gambar 11.7 Tampilan Design yang diinginkan


d.    Atur setip object yang  ingin tidak dinampakkan setelah program diplay/dijalankan dengan mengubah visible menjadi true atau false. Object image1, image2, image3 label5,label6,dan label7 gunakan pengaturan visible>false .Setelah tombol diplay akan didapatkan tampilan object tidak.




e.    Buat syntax program/coding, Program dapat berhasil dan sukses terlaksana bila code/syntax dibuat sesuai ketentuan yang berlaku.




Code/syntax pada button1(Sinus) :

procedure TForm1.Button1Click(Sender: TObject);
Var X,Y :integer;
sx,T,A : Integer;
sy:real;
i,tanda,tanda1 :Integer;
begin
Label5.visible:=True;
Label6.visible:=True;
Label7.visible:=True;
Image1.Visible:=True;
Image2.Visible:=False;

 image1.Picture:=nil;
begin
for Y := 1 to 500 do
begin
Image1.Canvas.Pixels[200,Y]:=clred;
end;

for X := 1 to 800 do
begin
Image1.Canvas.Pixels[X,200]:=clred;
end;

begin
for sx := 1 to 800 do
begin
T:=strtoint (Edit1.Text);
A:=strtoint (Edit3.Text);
sy:=sin(sx*pi/180*T)*A;

Form1.Image1.Canvas.Pixels[sx+T,200-round(sy)]:=clblack;
end;
end;
end;

for i := 1 to 100 do
begin
tanda:=(10*i)-10;
Image1.Canvas.Pixels[tanda,100]:=clgreen;

for tanda1 := 1 to 10 do
Begin
Image1.Canvas.Pixels[tanda,195+tanda1]:=clgreen;
End;
end;


for i := 1 to 100 do
Begin
tanda:=(10*i)-10;
Image1.Canvas.Pixels[tanda,100]:=clgreen;

for tanda1 := 1 to 10 do
Begin
Image1.Canvas.Pixels[195+tanda1,tanda]:=clgreen;
End;
End;
end;
1)    Code/syntax pada button2(Cosinus) :
procedure TForm1.Button2Click(Sender: TObject);

Var X,Y :integer;
sx,T,A : Integer;
sy:real;
i,tanda,tanda1 :Integer;
begin
Label8.visible:=True;
Label9.visible:=True;
Label7.visible:=True;
Image2.Visible:=True;
Image1.Visible:=False;


image2.Picture:=nil;
begin
for Y := 1 to 500 do
begin
Image2.Canvas.Pixels[200,Y]:=clred;
end;

for X := 1 to 800 do
begin
Image2.Canvas.Pixels[X,200]:=clred;
end;

begin
for sx := 1 to 800 do
begin
T:=strtoint (Edit1.Text);
A:=strtoint (Edit3.Text);
sy:=Cos(sx/pi/T)*A;

Form1.Image2.Canvas.Pixels[sx+T,200-round(sy)]:=clblack;
end;
end;

for i := 1 to 100 do
begin
tanda:=(10*i)-10;
Image2.Canvas.Pixels[tanda,100]:=clgreen;

for tanda1 := 1 to 10 do
Begin
Image2.Canvas.Pixels[tanda,195+tanda1]:=clgreen;
End;
end;


for i := 1 to 100 do
Begin
tanda:=(10*i)-10;
Image2.Canvas.Pixels[tanda,100]:=clgreen;

for tanda1 := 1 to 10 do
Begin
Image2.Canvas.Pixels[195+tanda1,tanda]:=clgreen;
End;
End;
end;
end;


2)    Code/syntax pada button3(Pulsa) :
procedure TForm1.Button3Click(Sender: TObject);
Var X,Y :integer;
sx,T,A : Integer;
sy:real;
i,tanda,tanda1 :Integer;
begin
   Label8.visible:=True;
Label9.visible:=True;
Label7.visible:=True;
Image1.Visible:=True;
Image2.Visible:=False;


image1.Picture:=nil;
image2.Picture:=nil;
begin
for Y := 1 to 500 do
begin
Image1.Canvas.Pixels[200,Y]:=clred;
end;

for X := 1 to 800 do
begin
Image1.Canvas.Pixels[X,200]:=clred;
end;

begin
for sx := 1 to 800 do
begin
T:=strtoint (Edit1.Text);
A:=strtoint (Edit3.Text);
sy:=sin(sx*pi/180*T)*A;

if (round(sy)>0) and (round(sy)<=a) then
begin

form1.Image1.Canvas.pixels[sx+T,200-A]:=clblack;
end;

if round(sy)=0 then
begin
form1.Image1.Canvas.Pen.Color:=clblack;
form1.Image1.Canvas.MoveTo(sx+T,200-A);
form1.Image1.Canvas.LineTo(sx+T,200+A);
end;

if (round(sy)<0) and (round(sy)>=-a) then
begin
form1.Image1.Canvas.Pixels[sx+T,200+a]:=clblack;
end;
end;
end;

for i := 1 to 100 do
begin
tanda:=(10*i)-10;
Image1.Canvas.Pixels[tanda,100]:=clgreen;

for tanda1 := 1 to 10 do
Begin
Image1.Canvas.Pixels[tanda,195+tanda1]:=clgreen;
End;
end;


for i := 1 to 100 do
Begin
tanda:=(10*i)-10;
Image1.Canvas.Pixels[tanda,100]:=clgreen;

for tanda1 := 1 to 10 do
Begin
Image1.Canvas.Pixels[195+tanda1,tanda]:=clgreen;
End;
End;
end;
end;



4) Code/syntax pada Scrollbar1
procedure TForm1.ScrollBar1Change(Sender: TObject);
Var X,Y :integer;
sx,T,A : Integer;
sy:real;
i,tanda,tanda1 :Integer;
begin
 edit1.Text:=Inttostr(Scrollbar1.Position);


Label5.visible:=True;
Label6.visible:=True;
Label7.visible:=True;
Image1.Visible:=True;
Image2.Visible:=False;

image1.Picture:=nil;

begin
for Y := 1 to 500 do
begin
Image1.Canvas.Pixels[200,Y]:=clred;
end;

for X := 1 to 800 do
begin
Image1.Canvas.Pixels[X,200]:=clred;
end;

begin
for sx := 1 to 800 do
begin
T:=strtoint (Edit1.Text);
A:=strtoint (Edit3.Text);
sy:=sin(sx*pi/180*T)*A;

Form1.Image1.Canvas.Pixels[sx+T,200-round(sy)]:=clblack;
 end;

 end;
end;

 for i := 1 to 100 do
 begin
 tanda:=(10*i)-10;
 Image1.Canvas.Pixels[tanda,100]:=clgreen;

 for tanda1 := 1 to 10 do
 Begin
 Image1.Canvas.Pixels[tanda,195+tanda1]:=clgreen;
   End;
  end;


 for i := 1 to 100 do
 Begin
 tanda:=(10*i)-10;
 Image1.Canvas.Pixels[tanda,100]:=clgreen;

 for tanda1 := 1 to 10 do
 Begin
   Image1.Canvas.Pixels[195+tanda1,tanda]:=clgreen;
 End;
 End;
end;



5) Code/syntax pada Scrollbar2
procedure TForm1.ScrollBar2Change(Sender: TObject);
Var X,Y :integer;
sx,T,A : Integer;
sy:real;
i,tanda,tanda1 :Integer;
 begin
edit1.Text:=Inttostr(Scrollbar2.Position);

   Label8.visible:=True;
Label9.visible:=True;
Label7.visible:=True;
Image2.Visible:=True;
Image1.Visible:=False;


image2.Picture:=nil;
begin
for Y := 1 to 500 do
begin
Image2.Canvas.Pixels[200,Y]:=clred;
end;

for X := 1 to 800 do
begin
Image2.Canvas.Pixels[X,200]:=clred;
end;

begin
for sx := 1 to 800 do
begin
T:=strtoint (Edit1.Text);
A:=strtoint (Edit3.Text);
sy:=Cos(sx/pi/T)*A;

Form1.Image2.Canvas.Pixels[sx+T,200-round(sy)]:=clblack;
 end;
end;

 for i := 1 to 100 do
 begin
 tanda:=(10*i)-10;
 Image2.Canvas.Pixels[tanda,100]:=clgreen;

 for tanda1 := 1 to 10 do
 Begin
 Image2.Canvas.Pixels[tanda,195+tanda1]:=clgreen;
   End;
  end;


 for i := 1 to 100 do
 Begin
 tanda:=(10*i)-10;
 Image2.Canvas.Pixels[tanda,100]:=clgreen;

 for tanda1 := 1 to 10 do
 Begin
   Image2.Canvas.Pixels[195+tanda1,tanda]:=clgreen;
 End;
 End;
end;
end;
6) Code/syntax pada Scrollbar3(Pulsa)
procedure TForm1.ScrollBar3Change(Sender: TObject);
 Var X,Y :integer;
sx,T,A : Integer;
sy:real;
i,tanda,tanda1 :Integer;
 begin
 edit1.Text:=Inttostr(Scrollbar3.Position);
   Label8.visible:=True;
Label9.visible:=True;
Label7.visible:=True;
Image1.Visible:=True;
Image2.Visible:=False;


image1.Picture:=nil;
image2.Picture:=nil;
begin
for Y := 1 to 500 do
begin
Image1.Canvas.Pixels[200,Y]:=clred;
end;

for X := 1 to 800 do
begin
Image1.Canvas.Pixels[X,200]:=clred;
end;

begin
for sx := 1 to 800 do
begin
T:=strtoint (Edit1.Text);
A:=strtoint (Edit3.Text);
sy:=sin(sx*pi/180*T)*A;

if (round(sy)>0) and (round(sy)<=a) then
begin

form1.Image1.Canvas.pixels[sx+T,200-A]:=clblack;
end;

if round(sy)=0 then
begin
form1.Image1.Canvas.Pen.Color:=clblack;
form1.Image1.Canvas.MoveTo(sx+T,200-A);
form1.Image1.Canvas.LineTo(sx+T,200+A);
end;

 if (round(sy)<0) and (round(sy)>=-a) then
 begin
   form1.Image1.Canvas.Pixels[sx+T,200+a]:=clblack;

 end;





 end;
end;

 for i := 1 to 100 do
 begin
 tanda:=(10*i)-10;
 Image1.Canvas.Pixels[tanda,100]:=clgreen;

 for tanda1 := 1 to 10 do
 Begin
 Image1.Canvas.Pixels[tanda,195+tanda1]:=clgreen;
   End;
  end;


 for i := 1 to 100 do
 Begin
 tanda:=(10*i)-10;
 Image1.Canvas.Pixels[tanda,100]:=clgreen;

 for tanda1 := 1 to 10 do
 Begin
   Image1.Canvas.Pixels[195+tanda1,tanda]:=clgreen;
 End;
 End;
end;
end.
e.    Jalankan program dengan menekan tombol play/ run F9 , sampai jendela form memunculkan UI (User interface) .
                         
                               Gambar 10.9 Cara menjalankan form




f.     Dapat diketahui Percobaan berhasil dengan baik setelah mengetahui hasil dari project lembar kerja yang telah dibuat . Hasil aritmatika pada lembar kerja sesuai dengan program yang dipilih pada setiap object button. Data input yang diolah sesuai ketentuan aritmatika akan muncul di data hasil atau “Z”

                                  
                                    Gambar 11.10 Contoh hasil grafik sinus
                                    Gambar 11.11 Contoh hasil grafik cosinus

             
              
                               Gambar 11.12 Contoh hasil grafik penambahan scrollbar

g.    Desain embarcadero  
Tampilan jendela kode dapat muncul bila di jendela form icon yang dibuat dari toolbox dilklik dua kali atau klik menu view- setelah itu pilih klik code. Setelah kode dibuat klik tombol design dibawah jendela kode tersebut, maka Form dapat dibuktikan dengan klik tombol play pada menu toolbar
h.    Tunggu sampai jendela form kalkulator memunculkan UI (User interface) dengan klik tombol play atau Run F9.
                                        Gambar 11.14 Tampilan form grafik saat di run F9

6.         Analisa Percobaan.
Pada percobaan grafik dengan tambahan object scrollbar, dengan grafik gelombang pulsa pada software embarcadero XE5 yang telah  dipelajari.  Hasil desain yang telah dibuat akan berjalan sesuai yang diharapkan bila pada object edit1, edit2 dan edit3 telah dimasukkan angka yang ingin diproses menjadi grafik, baik grafik berupa sinus,cosinus dan Pulsa. Pada desain ketika dijalankan tidak akan memunculkan object image dan object label untuk keterangan titik koordinat, akan muncul setelah memasukkan input data di object edit dan menekan atau double klik object Button sinus, cosinus atau Pulsa  sesuai apa yang diinginkan. Program pada grafik akan berjalan sempurna setelah code yang dimasukkan sesuai dengan ketentuan pada grafik.
Penambahan Object Scrollbar pada setiap fungsi trigonometri pada sinus,cosinus dan pulsa/gelombang digital. Program penambahan scrollbar dapat berhasil bilamana data yang dimasukkan pada code sudah sesuai ketentuan . Pemasanagn scrollbar pada setiap fungsi dapat mempermudah membaca perubahan gelombangnya.

7.         Kesimpulan dan Saran.
Kesimpulan :
Pada percobaan membuat grafik dengan tambahan scroolbar dapat dijalankan bila code yang dimasukkan pada object button dan scrollbar sesuai dengan ketentuan grafik , fungsi sinus cosinus , dan pulsa bahasa pemrogaman .Hasil dari gelombang yang dihasilkan berbeda dengan sinus dan cosinus bentuknya gelombang analog sedangkan pada square wave bentuknya gelombang digital . Ketelitian pada peletakkan code juga mempengaruhi hasil atau jalannya suatu pemrogaman grafik yang telah dibuat. Code yang telah dibuat harus sesuai dengan apa yang diinginkan pada caption button. Hasil grafik yang telah dibuat harus menerapkan system trigonemetri fungsi nilai dari sinus dan fungsi nilai dari cosinus. Pada object scrollbar ini membantu mengetahui bentuk perubahan gelombang setiap fungsi yang berbeda.
Saran :
Disarankan bagi mahasiswa untuk mempelajari dengan benar mengenai code perhitungan grafik aritmatika trigonometri fungsi sinus, cosinus dan tangen pada bahasa pemrogaman. Setiap code penyelesaian aritmatika memiliki ketentuan yang berbeda-beda dan diharapkan dapat mengembangkan program tersebut menjadi lebih detail dan lebih baik. Dengan mengetahui dasar bagaimana gelombang analog dan digital terbentuk diharapkan lebih mengembangkan kembali dari fungsi program tersebut.
Langganan: Postingan (Atom)