BAB 4 DESIGN PEMODELAN GRAFIK

Contoh Pemanfaatan Software

1.1 Pembuatan Bar Chart dan Area Chart dengan LibreOffice

Pada Aplikasi LibreOffice Writter kita juga dapat melakukan proses pembuatan Chart seperti halnya Aplikasi-aplikasi pengolahan data lainnya,akan tetapi cara pembuatannya yang sedikit berbeda. 

Lalu bagaimanakah cara pembuatan Bar Chart dan Area Chart pada LibreOffice Writter ? pada materi dibawah ini akan dijelaskan bagaimana langkah-langkah pembuatan Bar Chart dan Area Chart dengan menggunakan LibreOffice Writter.

Pada contoh ini kita akan membuat sebuah Bar chart dan Area Chart dari data Rerata Nilai sebuah Universitas X dari tahun 2010 - 2013 yang terdiri dari 3 Kelas.

1. Buka LibreOffice Writter
2. Pilih Menu Insert - Chart

Setelah memilih menu chart maka akan muncul sebuah chart default pada layar Utama LibreOffice Writter seperti gambar dibawah ini.

                             Figure 1.1 Default Bar Chart

3. Untuk proses memasukkan data kedalam chart default tersebut dapat dengan cara klik Kanan pada Chart - pilih Data Table .

                                        Figure 1.2 Data Table

dan akan muncul window baru untuk memasukkan data-data yang akan ditampilkan pada Bar Chart.Lalu kita tinggal memasukkan data-data yang dibutuhkan, Categories untuk memasukkan nilai X ,Colomnname untuk memasukkan nama Kolom dan Y-Value untuk memasukkan nilai dari chart.

                              Figure 1.3 Window Input Data

jika ingin memanipulasi table bisa juga dengan cara klik menu-menu yang terdapat pada bagian atas window input data tersebut.

5. Setelah selesai memasukkan data,tutup window data table.

6. Untuk Menambahkan judul bisa dengan klik kanan chart- insert tittle,lalu masukkan judul dan sebagainya.

                                   Figure 1.4 Insert Tittle

7. Kita juga bisa memberikan label pada setiap Data yang ada agar nilai dapat diketahui dengan mudah dengan cara Klik Kanan Table - Insert Data Label.

                            

                                      Figure 1.5 Insert Data label 

Langkah diatas merupakan proses untuk membuat sebuah Bar Chart, namun pada LibreOffice kita juga bisa membuat sebuah Area Chart. Caranya Sama halnya dengan membuat sebuah Bar Chart . akan tetapi kita melakukan beberapa tahap untuk mengubah sebuah Bar Chart menjadi Tipe Area Chart. Caranya Yaitu :

1. Klik Kanan Chart - Chart Type

                                       Figure 1.6 Chart Type

2. lalu pilih tipe chart Area setelah itu klik Ok. maka chart akan menjadi Area Chart.

                                    Figure 1.7 Area Chart

Dengan Menggunakan LibreOffice Writter kita terbatas dalam pembuatan Chart dengan hanya bisa membuat Bar Chart dan Area Chart saja , sedangkan CandleStick dan Histogram tidak bisa dibuat dengan menggunakan LibreOffice.Dalam hal ini kita memerlukan aplikasi pendukung lainnya untuk melakukan pembuatan CandleStick dan Histogram.

1.2 Google Chart API

Kita akan menggunakan API chart dari google untuk membuat candlestick tanpa menggunakan tools seperti java, python atau yang lain

1. Pertama kita pilih chart Candlestick yang sudah tersedia di web google chart api

                      Figure 1.8 Tampilan Source Code Candlestick

2. Klik CODE IT YOURSELF ON JSFIDDLE maka akan muncul tampilan jsfiddle. Kemudian kita hanya mengedit2 bagian source code sehingga chart nya sesuai dengan apa yang kita buat

                                Figure 1.9 Tampilan Jsfiddle

                       Figure 1.10 Hasil Tampilan Setelah Edit

4.3 Pembuatan Histogram Menggunakan Rstudio dan GeoGebra ada contoh ini kita akan membuat sebuah histogram dari kapasitas paru-paru pada suatu rumah sakit.pada Rstudio kita dapat memasukkan data berupa .xls dan .csv ataupun format-format pengolahan data lainnya. untuk memasukkan data kita cukup klik ... pada bagian kanan layar.

Gambar 4.11: Tampilan Console pada RStudio

Setelah itu kita pilih data yang ingin kita jadikan sumber untuk membuat sebuah histogram. Jika sudah kita bisa melakukan penulisan perintah program seperti gambar di-

bawah ini.

Gambar 4.12: Penulisan Perintah Program

maka hasil dari perintah hist(LungCap) diatas adalah sebuah Histogram standar yang akan muncul di window sebelah kanan layar Rstudio. Untuk merubah Histogram tersebut masih banyak lagi jenis - jenis perintah yang bisa kita gunakan, untuk mengetahui jenis-jenis perintah apa

saja yang tersedia kita bisa mengetikkan > help(hist) atau > ?hist pada window Console maka panduan tentang histogram akan muncul di window sebelah kanan.

Beberapa Perintah dasar yang biasa digunakan :

Membuat vektor suvsLungCap <- c(0,1,1,1,0,0,0,0,0,0)

Membuat histogram untuk LungCaphist(LungCap)

Membuat histogram dengan warna biru dan sumbu y memiliki range antara 0-2 hist(LungCap, col= lightblue , ylim=c(0,2))

Memberikan Nama Histogram dan Xaxis hist(LungCap,probability = T,ylim = c(0,0.2),breaks =14,main = "Boxplot of Lung Capacity",xlab = "Lung Ca-pacity",las=1)

Berikut merupakan hasil akhir contoh pembuatan Histogram menggunakan Bahasa R dengan GUI Rstudio.

Gambar 4.13: Hasil Akhir

4.4 Pembuatan Histogram dengan GeoGebra

Menggunakan GeoGebra untuk membuat histogram dapat membantu mempermudah pekerjaan terkait dengan histogram ini. Langkah yang harus disiapkan terlebih adalah membuka lembar kerja GeoGebra yang terdiri dari tampilan input langsung, aljabar, gra k dan spreadsheet dalam satu area kerja.

1. Siapkan view spreadsheet pada geogebra

Gambar 4.14: Gambar Spreadsheet

2. Inputkan semua data yang akan dibuat Histogram pada spreadsheet di GeoGebra

Gambar 4.15: Gambar Spreadsheet Input

3. Blok semua data yang akan dibuat histogramnya, kemudian klik gambar histogram pada sebelah kiri atas dan pilih One Variable Analysis

Gambar 4.16: Tampilan Tab Menu

4. Dari pilihan yang ada klik Analysis

               Gambar 4.17: Gambar Tampilan One Variable Analysis

5. Dan berikut ini adalah hasilnya

                           Gambar 4.18:Hasil Gambar Histogram

Gambar 4.19: Konfigurasi Histogram

6. untuk memodifikasi nya

BAB 3 DESIGN PEMODELAN GRAFIK

Aplikasi Pendukung Teori

Dalam pembuatan berbagai macam chart kita tentunya memerlukan perangkat lunak pendukung untuk mempermudah proses pembuatan chart tersebut. pada materi buku ini dibahas 4 buah chart masing-masing adalah Bar Chart, Area Chart, Candlestick dan Histogram. Keempat chart tersebut memiliki karakteristik dan kegunaan yang berbeda-beda, maka dari itu diperlukan beberapa perangkat lunak yang berbeda pula untuk membantu proses pembuatannya. Pada bab ini akan membahas tentang aplikasi-aplikasi apa saja yang dapat dipakai dalam proses pembuatan Bar Chart,Area Chart, Candlestick dan Histogram.Aplikasi-aplikasi yang dapat digunakan dalam pembuatan chart-chart yang ada dapat berupa aplikasi shareware maupun opensource. Dalam materi ini digunakan beberapa aplikasi pendukung diantaranya yaitu : LibreOffice dan Google Chart API untuk pembuatan chart yang berbasi web Html.

1.1 LibreOffice

LibreOffice adalah sebuah paket aplikasi perkantoran yang opensource yang dikembangkan oleh The Document Foundation(TDF). Nama LibreOffice merupakan gabungan dari kata Libre yang berarti bebas (dalam bahasa Spanyol dan Prancis) dan Office yang berarti kantor (dalam bahasa Inggris). Aplikasi LibreOffice merupakan turunan dari OpenOffice.org pada tahun 2010. semua fitur yang terdapat pada OpenOffice ada pula di LibreOffice, dan pengembangannya dilakukan secara lebih terbuka dan bebas. LibreOffice menggunakan Format berkas OpenDocument(ODF). LibreOffice merupakan paket aplikasi bawaan pada distro-distro linux populer.Sebagai suatu perangkat lunak yang gratis . LibreOffice dapat diunduh,digunakan dan didistribusikan secara bebas,

LibreOffice memiliki beberapa komponen aplikasi untuk proses pengolahan Chart yaitu : LibreOffice Writter dan LibreOffice Calc.Pada bab ini kita akan membahas aplikasi LibreOffice Writter dan LibreOffice Calc.

1.1.1 LibreOffice Writter

LibreOffice Writer (Writer) merupakan program pemroses kata (word processing) yang memiliki fungsi sama dengan Microsoft Word. Perbedaan paling utama antara Writer dengan Word adalah Writer dapat diinstall secara bebas dan gratis tanpa biaya lisensi, sementara Word tersedia dengan harga yang cukup mahal. Secara fungsionalitas, antara Writer dan Word tidaklah jauh berbeda.

Fitur Yang Dimiliki LibreOffice Writter :

Writter memiliki beberapa fitur yang sedikit berbeda dengan Microsoft Word , diantaranya adalah :

Mengenali,mengolah,dan menyimpan file dalam format Microsoft Word (doc,docx).

Mampu mengekspor/menyimpan secara langsung dokumen kedalam format Pdf.

Writter juga dapat berfungsi sebagai penyunting teks dasar seperti halnya Notepad.

Tampilan Interface LibreOffice Writter :

Tampilan Interface LibreOffice banyak memiliki kesamaan dengan Microsoft Word 2003.meskipun dari segi tampilan terkesan kurang menarik , akan tetapi hal ini tidak mempengaruhi kelengkapan fungsi yang dimiliki writter, bahkan writter lebih disukai oleh sebagian pengguna karena dianggap lebih sederhana daripada Microsoft Word. Berikut adalah Tampilan awal dari LibreOffice.

Figure 1.1 Antar Muka LibreOffice Writter

1.1.1.1 Menu Bar

Merupakan panel yang memuat perintah standar untuk mengoperasikan program. Klik pada salah satu menu akan memuat submenu yang lain.Yang terdapat pada menu bar adalah File, Edit, View, Insert, Format, Table, Tools, Windows, Help.

a. File

Menu file berfungsi untuk membuat, membuka, menyimpan, mencetak, mengatur ukuran halaman hingga menutup suatu dokumen yang kita buat.

b. Edit

Menu Edit berfungsi untuk mengedit (melakukan perubahan dengan cara menambah, menghapus, memotong, menyalin, dan lain-lain).

c. View

Menu View berfungsi untuk mengatur tampilan layar dari dokumen yang kita kerjakan.

d. Insert

Menu insert berfungsi untuk menyisipkan teks, tanggal atau waktu, simbol, diagram, file, objeck, dan sebagainya. Selain itu dapat digunakan untuk memberi nomor halaman pada dokumen yang kita kerjakan.

e. Format

Menu Format berfungsi untuk menentukan jenis huruf, paragraf, memberikan penomoran, membuat jenis kolom dalam teks, memberi bingkai dan arsiran, mengatur huruf besar dan kecil dan berbagai hal yang berkaitan dengan format dokumen.

f. Table

Menu Table berfungsi untuk membuat tabel, menyisip tabel dalam teks dokumen, mengurutkan data, dan segala hal yang berkaitan tabel.

g. Tools

Menu Tools berfungsi untuk memeriksa ejaan, memilih bahasa yang dikehendaki, menghitung banyak kata atau karakter, memproteksi dokumen, dan sebagainya.

h. Windows

Menu Window berfungsi untuk membuka jendela baru, menyusun semua jendela yang aktif dan melihat dokumen yang sedang aktif.

i. Help

Salah satu fungsi Menu Help adalah memunculkan fasilitas help yang bisa membantu kita menyelesaikan masalah yang dihadapi pada saat menggunakan fasilitas Libre Office Writer, termasuk informasi mengenai suatu ikon.

1.1.1.2 Standart Toolbar

Merupakan panel tool standar yang terdapat pada program LibreOffice lainnya, seperti Calc, Draw, Impress. Pada panel ini terdapat salah satu tombol yang merupakan salah satu fitur utama pada LibreOffice yaitu tombol navigator. Tombol navigator disimbolkan dengan ikon berbentuk kompas. Fungsi dari navigator adalah untuk melacak elemen tertentu pada dokumen, baik berupa judul, sub judul, grafik, tabel, dan sebagainya.

1.1.1.3 Formatting Toolbar

Merupakan panel yang berfungsi untuk mengatur dokumen yang sedang dikerjakan. Apabila pengguna sedang mengerjakan dokumen yang berupa teks, maka panel ini akan menampilkan fungsi-fungsi yang berguna untuk mengatur teks, misalnya memilih font, mengatur paragraf, dan sebagainya. Jika pengguna memasukkan file gambar kedalam dokumen yang sedang dikerjakan, maka toolbar ini akan berubah menampilkan fungsi yang berguna untuk mengolah gambar tersebut, misalnya mengatur letak gambar di teks, memberi warna pada gambar, dan sebagainya.

1.1.1.4 Status Bar

Menampilan keterangan dokumen yang sedang dikerjakan, misalnya jumlah kata dan jumlah halaman, serta terdapat pula beberapa fungsi pengaturan seperti mengatur tampilan zoom halaman serta melihat layout halaman.

1.1.2 LibreOffice Calc

LibreOffice Calc merupakan komponen aplikasi LibreOffice yang berfungsi untuk membuat dan memanipulasi data angka, teks dan rumus-rumus matematis. Selanjutnya menampilkannya menjadi sebuah tabel data yang terstruktur atau berupa gambar grafik yang menarik dan mudah dipahami.Fitur dan tampilan pada Libre Office Calc tidak jauh berbeda dengan Microsoft Excel yang ada di Microsoft Office. Sehingga kita dapat menggunakan fitur ini untuk hitung menghitung. Dengan demikian dapat dikatakan Libre Office Calc dapat menjadi alternatif untuk menggantikan Microsoft Excel.Calc memiliki beberapa fitur unik, termasuk sebuah sistem yang secara otomatis mendefinisikan beberapa elemen grafik sesuai dengan informasi yang diberikan oleh pengguna. Calc masih memiliki fungsi bernama “Solver”, tetapi memiliki cara kerja yang berbeda dengan fungsi serupa di OpenOffice.org.Tidak hanya untuk proses perhitungan matematis , LibreOffice Calc juga bisa melakukan proses pembuatan grafik berdasarkan data-data yang sudah ada. Chart yang tersedia pada LibreOffice Calc tidak banyak berbada dengan LibreOffice Writter yang dibahas sebelumnya. hanya saja ada beberapa tambahan yaitu Stock Chart/CandleStick , Net Chart , Donut Chart dsb.

Figure 1.2 Tampilan LibreOffice Calc

Secara keseluruhan proses kerja di LibreOffice Calc untuk pembuatan Chart hampir sama dengan LibreOffice Writter hanya saja kita harus memasukkan data terlebih dahulu sebagai parameter untuk gambar dari Chart yang akan kita buat, berbeda dengan LibreOffice Writter yang bisa membuat jenis Chartnya terlebih dahulu baru di masukkan datanya. Jika kita ingin membuat Grafik dengan menggunakan data yang banyak dan rumit sangat dianjurkan menggunakan LibreOffice Calc ini , karena kita dapat dengan mudah dalam memproses data yang banyak karena sudah tersedianya kolom-kolom secara default.

Figure 1.3 Tampilan Jenis-jenis chart pada LibreOfice Calc

1.2 Google Chart API

Secara Umum Google API bisa di katakan bagian dari Framework Google.Google menyediakan berbagai API (Application Programming Interface) yang sangat berguna bagi pengembang web maupun aplikasi desktop untuk memanfaatkan berbagai fitur yang disediakan oleh Google seperti misalnya: AdSense, Search Engine, Translation maupun YouTube. API secara sederhana bisa diartikan sebagai kode program yang merupakan antarmuka atau penghubung antara aplikasi atau web yang kita buat dengan fungsi-fungsi yang dikerjakan. Misalnya dalam hal ini Google API berarti kode program (yang disederhanakan) yang dapat kita tambahkan pada aplikasi atau web kita untuk mengakses/menjalankan/memanfaatkan fungsi atau fitur yang disediakan Google. Ada banyak jenis Google API salah satunya adalah Google Chart API. Google Chart API merupakan API yang khusus untuk membuat grafik maupun chart, Kelebihan Google Chart API adalah kita dapat langsung menggunakan semua kode program dalam sintaks javascript dengan mencopynya kedalam website kita.

Pada Google Chart API kita diberikan banyak pilihan tipe chart termasuk Bar Chart,Area Chart,CandleStick dan Histogram yang menjadi pokok bahasan kita. Namun Google Chart API hanya bisa di lihat saat kita terkoneksi dengan internet dan juga chart yang dibuat bersifat Web Html jadi terbatas hanya untuk web saja.Pada materi ini kita akan menampilkan proses pembuatan CandleStick menggunakan Google Chart API.kita dapat mengakses Google Chart API

BAB 2 DESIGN PEMODELAN GRAFIK

Bar Chart 

Figure 1.1 Contoh Gambar Bar Chart 

Bar chart lebih menampilkan banyak informasi dibandingkan dengan line chart, dengan menambahkan beberapa kunci informasi di setiap poin datanya. Bar chart terdiri dari serangkaian garis vertikal yang mewakili setiap titik data. Tiap batang memiliki empat informasi kurs yaitu open,high,low dan close untuk periode tertentu. Misal bar untuk periode satu ja atau timeframe H1. Kurs awal pembentukan batang yaitu open, merupakan kurs pembukaan yang dicatat pertama kali. selama satu jam, tercapai kurs tertinggi yaitu high dan terendah yaitu low. Diakhiri oada menit ke enam puluh dengan kurs penutupan yaitu close yang merupakan kurs terakhir untuk periode satu jam.

Bar chart sedikit lebih menarik daripada line chart. Chart jenis ini memberikan informasi mengenai harga pembukaan, penutupan, harga tertinggi dan terendah dalam satu periode waktu tertentu. Karena memiliki informasi tersebut, chart ini juga disebut dengan OHLC chart (Open-High-Low-Close). Pada grafik ini harga pembukaan selalu ditunjukkan dengan batang yang menjorok ke sebelah kiri dan harga penutupan ditunjukkan dengan batang yang menjorok ke sebelah kanan. Sedangkan untuk harga tertinggi dan terendahnya ditunjukkan dengan garis vertikal yang berada di antara harga pembukaan dan penutupan.

Bar Chart pada dasarnya menginformasikan semua harga yang terjadi, berbeda dengan line chart yang hanya menunjukkan harga terakhir atau penutupan. Bar chart terdiri dari garis vertikal yang menunjukkan harga tertinggi (High) dan harga terendah (Low) dalam periode waktu tertentu. Harga pembukaan dan harga penutupan ditunjukkan dengan garis pendek horizontal. Garis horizontal kiri adalah harga pembukaan dan sebelah kanan adalah harga penutupan.

Tentu saja bar chart menjadi lebih informatif terhadap pergerakan kurs selama satu jam. Rentang pergerakan kurs selama satu jam dapat diketahui dari jarak nilai kurs tertinggi dan terendah. Contoh bar chart dan posisi kurs open,high,low dan close pada bar ditunjukkan pada Gambar dibawah

Figure 1.2 Contoh Gambar Bar Chart

1.2 Area Chart

Figure 1.3 Contoh Gambar Area Chart

Daerah bagan mendefinisikan batas semua elemen yang terkait dengan grafik termasuk plot sendiri dan judul dan teks penjelasan. Itu menekankan bahwa elemen-elemen ini harus dipertimbangkan bersama-sama dan mereka terpisah dari teks sekitarnya. Sempadan daerah bagan dapat imajiner daripada didefinisikan oleh bingkai.

·                     Plot daerah

Daerah plot adalah daerah berisi data. Dibatasi oleh x - dan y - axes ke bawah dan kiri. Frame dapat diselesaikan dengan menggambar di sekitar bagian atas dan sisi kanan juga, tetapi hal ini tidak penting.

·                     Sumbu-x

Sumbu-x adalah garis horisontal yang mendefinisikan dasar daerah plot. Tergantung pada jenis grafik adalah dianggap sebagai lokasi yang berbeda pada x-sumbu mewakili kategori yang berbeda (seperti tahun) atau posisi yang berbeda sepanjang skala numerik (misalnya suhu atau pendapatan). Rincian ditempatkan tepat di bawah sumbu x dan sumbu label biasanya disediakan untuk memperjelas unit pengukuran. Namun, jika rincian kategori yang disebutkan di tempat lain seperti dalam judul grafik, atau sangat jelas (seperti tahun) maka tidaklah perlu untuk memasukkan label sumbu.

·                     Sumbu y

Sumbu y adalah garis vertikal yang biasanya mendefinisikan sisi kiri area plot, tetapi jika lebih dari satu variabel sedang diplot pada grafik kemudian garis vertikal di sebelah kiri dan kanan sisi daerah plot dapat digunakan sebagai y-axes. Sumbu y selalu memiliki skala numerik dan digunakan untuk menunjukkan nilai-nilai seperti hitungan, frekuensi atau persentase. Interval pada skala yang ditandai dengan tanda nomor dan kutu, menunjukkan divisi utama, di sebelah kiri dari sumbu y. Seperti sumbu x, sumbu y biasanya memiliki label yang memberikan rincian unit pengukuran. Label sering ditulis secara vertikal untuk mengikuti garis sumbu y tetapi sebaliknya akan ditempatkan tepat di atas bagian atas sumbu y. Untuk terbaik menyoroti tren di data, mungkin diperlukan untuk memulai skala sumbu y titik selain nol. Dalam kasus-kasus seperti nilai awal pada sumbu y harus dengan jelas dilabel dan perhatian pembaca tertarik bukan nol awal dengan melanggar sumbu y hanya di bawah nilai pertama seperti yang ditampilkan dalam contoh berlawanan.

·                     GridLines

GridLines adalah jalur vertikal dan horisontal yang ditempatkan di wilayah plot untuk membantu membaca nilai dari grafik. Gridlines harus halus dan tidak mengurangi dari data. Dalam kasus sederhana grafik hal ini tidak selalu perlu untuk memasukkan mereka. GridLines biasanya diambil secara berkala berdasarkan divisi utama skala sumbu.

·                     Judul

Semua grafik harus menyertakan judul yang menyimpulkan grafik yang menunjukkan. Judul harus mengidentifikasi apa yang dijelaskan (misalnya mempercepat pelanggaran terdeteksi oleh kamera otomatis) dan unit pengukuran (misalnya persentase, jumlah, frekuensi). Judul dapat ditempatkan dalam daerah bagan, seperti pada contoh di atas, atau di atas atau di bawah grafik.

BAB 1 DESIGN PEMODELAN GRAFIK

1. Chart

Menurut wikipedia, chart adalah sejenis informasi dengan visual yang mewakili data numerik dan/atau fungsi. Chart biasa dipakai agar data dalam kuantitas besar bisa lebih mudah dimengerti, serta hubungan antara bagian data yang berbeda bisa lebih jelas dilihat. Chart biasanya bisa dibaca lebih mudah dan cepat ketimbang membaca data yang masih mentah atau masih dalam tabel.

1.1 Pengenalan Chart

Pengaturan Data

Sebelum membuat chart, kita wajib mengetahui bagaimana cara mengatur atau meletakkan data di worksheet. Karena kalau tidak sesuai, chart yang akan kita hasilkan menjadi berantakan. Untuk jenis chart yang sudah umum sepert area dan bar, kita dapat mengatur data secara sederhana pada baris dan kolom di worksheet. tetapi untuk jenis chart sepert pie dan bubble, dibutuhkan pengaturan data tersendiri.

Media pembelajaran banyak jenisnya dan dapat digunakan dalam kegiatan pembelajaran. penggunaan media harus ditentukan jenisnya berdasarkan jenis materi pelajaran yang akan diajarkan. salah satu jenis media yang dianggap efektif digunakan adalah media chart. Penggunaan media pembelajaran dalam bentuk chart akan memudahkan penyampaian pesan yang biasanya dirubah dalam bentuk ringkasan visual suatu proses, perkembangan atau berupa gambar yang dapat memperjelas suatu konsep. Penggunaan medi achart akan menguraikan secara jelas garis besar atau tahapan-tahapan dari suatu proses dan menyajikannya sekaligus pada satu konsep.

indonesia.com

Disini saya akan men-Review ulang tentang suatu interface website yang sudah kelompok kami bikin.

INDONESIA.COM adalah situs web yang menampilkan budaya khas Indonesia sebagai latar belakang nyaDi dalam website tersebut terdapat banyak kategori seperti

Disini kita membuat menu dengan cara sederhana menggunakan shape yang ada dalam photoshop itu sendiri. Perpaduan warna yang kita buat harus lah menarik dan inovatif. Berbagai artikel kami rangkum dan kami muat dalam satu kesatuan interface di dalam web itu sendiri. Tata letak website di buat sedemikian rupa haruslah memuat kolom iklan, bursa saham dan gallery foto. Di lengkapi dengan berita terkini/breaking news yang membuat para pembaca merasa menarik untuk membuka artikel tersebut.

Ini halaman tampilan awal dari website yang kelompok kami buat, semoga bermanfaat.

me-review sebuah website

Beritasatu.com

Disini saya akan me-review sebuah website dari www.beritasatu.com

BeritaSatu (sebelumnya bernama QTV dan Q Channel) adalah salah satu stasiun televisi swasta nasional di Indonesia. Saluran ini juga berguna sebagai saluran khusus untuk mengenai soal-soal keuangan dan informasi. Saluran ini hanya bisa disaksikan melalui satelit dan kabel dan juga siaran digital terestrial DVB-T2 yang bisa disaksikan via Set Top Box DVB-T2 atau Nexmedia.

Setelah saya pahami mengenai website ini, beritasatu.com mempunyai banyak kategori dalam website nya yaitu berita mengenai nasional maupun internasional di antara nya tentang ekonomi, properti, pasarmodal, olahraga, otomotif, maupun dunia makanan&wisata, dan hiburan dan lain lain.

Berita terkini yang update dan tertera jam update nya, berita utama, kurs mata uang, berita satu news video, berita terpopuler. seperti yang saya lihat di dalam tersebut untuk kategori berita nasional terdapat berbagai berita tentang dalam negri sebagai contoh di beritakan tentang pendapat wakil presiden sby soal wacana dihidupkannya GBHN. berita di dunia mencangkup berita tentang internasional yaitu sebagai contoh bom lahore, menlu pastikan tidak ada korban WNI.

Di dalam beritasatu.com juga terdapat beritasatu TV, beritasatu Video, beritasatu Advertorial, galeri foto, opini, tajuk, figur maupun indeks. Di dalam beritasatu TV terdapat streaming, jadwal, presenters, program dan advertorial. BeritaSatu TV merupakan saluran Televisi Berita berbayar yang hanya bisa disaksikan melalui satelit dan TV kabel, siaran digital terestrial DVB-T2 via Set Top Box DVB-T2 atau Nexmedia, dan juga bisa dinikmati melalui Internet. BeritaSatu menjadi salah satu pesaing TV Berita yang sudah ada, seperti MetroTV,tvOne, SINDOtv dan Kompas TV. Awalnya saluran ini siaran selama empat jam per hari, ditingkatkan menjadi 7-8 jam per hari. Sekarang BeritaSatu tayang selama 24 jam.

pengenalan AJAX

AJAX

Seperti perkembangan teknologi saat ini saya akan membahas lebih detail lagi mengenai AJAX, apakah itu AJAX? Yuk kita bahas bersama. Beberapa web komersial sudah menggunakan teknologi AJAX untuk menaikkan pelayanan terhadap user. Apa itu AJAX? AJAX adalah aplikasi web yang lebih baik. Aplikasi web menambah keuntungan disbanding aplikasi desktop yang dapat menjangkau pengguna yang luas dan mudah di install. Seperti yang kita ketahui aplikasi internet tidak selalu susah dan user friendly, dengan AJAX aplikasi internet semakin cepat dan mudah. Berikut ini beberapa contoh web yang menggunakan AJAX yaitu yang seperti kita tahu adalah gmail, google maps, dan lain lain. Sebelum membahas lebih detail mari kita cari tahu sejarah nya terlebih dahulu. AJAX di perkenalkan oleh jesse james garret dari Adaptive Path pada tahun 2005. Ia mendeskripsikan bagaimana mengembangkan web yang berbeda dengan metode tradisional. Aplikasi web yang bekerja dengan AJAX secara asynchronously, yang berarti mengirim dan menerima data dari user ke server tanpa perlu me-load kembali seluruh halaman, melainkan hanya melakukan penggantian pada bagian web yang hendak di ubah. Penggunaan AJAX ini ini mulai popular ketika di gunakan google pada tahun 2005. AJAX bukan saja sebagai bahasa pemrograman baru melainkan teknik baru penggunaan standar yang telah ada. AJAX berbasiskan pada JavaScript dan request HTTP. AJAX berbasiskan standar terbuka seperti: JavaScript, XML, HTML/XHTML, & CSS. Dengan menggunakan JavaScript AJAX dapat mengirim dan menerima data antara web server dan web browser, dengan teknik yang dimiliki AJAX ini akan bergantian bertukar data dan mereload ulang seluruh halaman.dengan demikian untuk mempelajari AJAX harus memahami pula konsep standar di atas. AJAX menggunakan asyncronouse data transfer (pada HTTP request) antara browser dan web server, yang memperbolehkan halaman web me-request bit yang kecil atau seluruh informasi dari server. Untuk mengetahui bagaimana konsep dari Ajax anda perlu mengetahui bagaimana sebuah web browser memproses sebuah request dan menerima sebuah response dari web server. Standar yang digunakan web browser pada saat ini adalah HTTP(HyperText Transfer Protocol). HTTP digunakan oleh web browser untuk mengirim request dari website ke web server dan kemudian menerima response dari web server. HTTP request berkerja seperti email, memberitahukan kapan request dikirim, berisi header yang memberitahu apa yang harus dilakukan server dan bagaimana menghandle request tersebut.

Sekali sebuah request diterima, web server kemudian menentukan response apa yang akan diberikan.

Terdapat banyak request method yang ada, tetapi yang paling sering digunakan adalah GET dan POST. Sekarang anda telah memiliki bayangan bagaimana request dikirim ke web server dan kemudian web server mengirim response dari request tersebut ke web browser, akan mudah bagi anda untuk memahami bagaimana XMLHttpRequest berkerja. Keduanya sangat mirip, tetapi XMLHttpRequest dioperasikan di belakang layar dan tanpa memerlukan refresh halaman.

Ajax bisa dibilang adalah sebuah konsep untuk menerangkan interaksi antara client-side XMLHttpRequest Object dengan script server-side. Untuk membuat request ke web server menggunakan Ajax, anda harus membentuk Object XMLHttpRequest terlebih dahulu. Untuk membentuk object XMLHttpRequest berbeda pada setiap browser. Pada microsoft internet explorer object dibentuk sebagai ActiveX control, sedang pada browser seperti Firefox dan safari menggunakan basic javascript object. Setelah XMLHttpRequest terbentuk, terdapat beberapa method atau fungsi yang bisa digunakan. Method-method tersebut dijelaskan di bawah ini.

1. abort()
   Method abort() digunakan untuk menghentikan request yang sedang berjalan. Method ini sangat berguna jika anda memperhitungkan lama waktu koneksi, misalnya jika waktu koneksi melebihi rentang waktu tertentu anda bisa menggunakan method abort() untuk menghentikan request secara prematur.
2. getAllResponseHeader()
   Anda dapat menggunakan method ini untuk memperoleh semua informasi dari semua header HTTP yang sedang diberikan oleh server
3. getResponseHeader("headername")
   Method ini dapat digunakan untuk memperoleh isi dari begian sebuah header, sebagai contoh untuk memperoleh ukuran dari document yang sedang direquest, anda dapat menggunakan getResponseHeader("Content-Length").
4. open("method","URL","async","username","pswd")
   Method ini merupakan method yang paling penting dan berguna pada XMLHttpRequest. Method ini digunakan untuk membuka koneksi dengan document yang ada di server. Dengan method ini anda memberitahukan kepada web server method apa yang digunakan untuk membuka file ("GET" atau "POST"). Sebagai catatan tidak semua argument pada method ini harus diisi, tergantung dengan situasi dan kebutuhan.
5. setRequestHeader("label","value")
   Method ini dapat digunakan untuk menentukan header pada saat melakukan request. Sebagai catatan, method ini hanya bisa dipanggil setelah methodopen digunakan dan sebelum method send dipanggil.
6. send("content")
   method ini digunakan untuk mengirim request ke server. Jika request dikirim secara asynchronous, maka response akan datang secepatnya. Jika tidak, response akan datang setelah response diterima oleh web browser. Parameter pada method ini tidak harus diisi, parameter ini sangat berguna untuk memproses HTML form dan memberikan anda untuk mengirim nilai dari element form ke web server.

XMLHttpRequest memiliki properti yang dapat digunakan dan dimanipulasi, seperti dijelaskan di bawah.

1. onreadystatechange
   Properti ini adalah sebuah event handler yang memberikan anda untuk men-trigger sebuah blok kode atau function, ketika state (sampai dimana proses request berlangsung pada waktu tertentu) berubah. Contoh, misalnya anda ingin menampilkan pesan (alert) pada saat state telah berubah menjadicomplete state.
2. readyState
   berisi informasi state dari object XMLHttpRequest pada saat properti ini digunakan (0: uninitialized, 1: loading,
   2: loaded, 3: interactive, 4: complete). Properti ini bisa digunakan untuk menangani kesalahan, memanggil blok kode atau function untuk setiapreadyState. Misalnya, untuk menampilkan text "loading" pada saat readyState sama dengan 1 (fase loading) dan memanggil sebuah function pada saat readyState=4 (complete).
3. responseText
   Properti ini akan dihasilkan pada saat request telah berhasil/complete. Misalnya anda melakukan request terhadap sebuah document di server, respon dari server akan disimpan pada properti ini. Biasanya properti ini digunakan untuk mengganti properti innerHTML dari sebuah element HTML.
4. responseXML
   Properti ini sama dengan responseText, tetapi respon yang dihasilkan dalam format XML.
5. status
   Properti ini memberitahukan response code yang dihasilkan dari direquest yang dilakukan. Misalkan, jika file yang direquest ke server tidak ditemukan maka status akan berisi 404.
6. statusText
   Properti ini merupakan textual dari properti status, misal status sama dengan 404 maka statusText akan sama dengan Not Found.

Setelah selesai membuat object XMLHttpRequest anda dapat mengirim request ke server. Saat mengirim request ke server anda harus menentukan request method yang digunakan, apakah akan menggunakan GET atau POST. Jika anda ingin menampilkan informasi dari server maka anda akan menggunakan method GET, sedangkan jika anda mengirim informasi ke server maka gunakan method POST

sekian dari informasi mengenai AJAX kali ini semoga bermanfaat.