Tugas Softskill - Review Artikel Bisnis Informatika

Tugas Softskill - Kelompok :

•  Dinda Desita Wimananda
• Dita Pradistya
• Hirma Nurifia

Review Artikel “ Menkominfo : Keberadaan Perusahaan Digital akan Buka Banyak Lapangan Kerja”

Perkembangan teknologi saat ini berkembang sangat pesat. Perkembangan itu berdampak tidak hanya pada satu bidang teknologi saja tetapi memberikan pengaruh yang cukup besar kedalam bidang ekonomi atau bisnis. Seperti yang kita ketahui bersama bahwa saat ini dunia bisnis di Indonesia sudah beranjak memasuki persaingan digital.  Hal tersebut didapatkan pada salah satu artikel yang meggungapkan “Banyak perusahaan ritel konvensional mulai gulung tikar satu persatu. Hal ini disebabkan adanya pergeseran masyarakat yang beralih beli barang di via toko online.”

Tidak dapat dipungkiri lagi , memang pola kebutuhan masyarakat makin meningkat. Saat ini sudah banyak toko online yang menyediakan kebutuhan – kebutuhan masyarakat dan memberikan pelayanan yang cukup baik. Jika kita bandingkan dengan berbelanja di toko kovensional memang toko online memiliki nilai yang lebih.

Mungkin untuk sebagian orang atau masyarakat yang kurang tertarik dengan dunia bisnis digital beranggapan bahwa bisnis digital dapat memberikan kerugian untuk toko konvensional yang tidak bisa mengikuti perkembangan. Tetapi di sisi lain bisnis digital dapat menghasilkan perluang lapangan kerja yang cukup besar. Hal tersebut dinyatakan oleh Menkominfo.

Dalam bisnis digital juga dapat memberikan kemudahan kepada pembisnis pemula, contohnya pengusaha makanan dan minuman harus menyewa gerai terlebih dahulu untuk melakukan bisnis. Namun adanya digital ekonomi, para pelaku usaha kata Rudiantara cukup memasak lewat dapurnya masing-masing saja.

Menurut Rudiantara Menkominfo bahwa bisnis digital dapat memberikan peluang lapangan kerja sekitar 80% untuk setiap perusahaan e-commerce karena setiap perusahaan e-commerce dapat berkerja sama dengan banyak UMKM. Hal tersebut yang menjadi dasar bisnis digital memberikan peluang lapangan kerja.

Dengan melihat kondisi yang cukup baik ini diharapkan kita dapat memanfaatkan kesempatan ini dengan baik untuk menjadikan ekonomi di Indonesia menjadi lebih baik dan dapat bersaing dikanca Internasional.

Referensi :

http://www.tribunnews.com/bisnis/2017/10/16/menkominfo-keberadaan-perusahaan-digital-akan-buka-banyak-lapangan-kerja

-TERIMA KASIH-

Tugas Softskill - Review Jurnal Mengenai Bisnis Informatika

Judul Jurnal  : Perancangan Sistem Informasi Penjualan pada Toko Minak Singa

Jurnal            : Sistem Informasi dan Telematika ISSN 2087-2062

Penulis          : Sri Ipnuwati

Reviewer      : Dinda Dessita W,  Dita Pradistya, Hirma Nurifia

Kelas            : 4IA 17

Tahun            : 2017

Abstrak :

Sejalan dengan perkembangan ilmu dan teknologi dalam menghadapi persaingan penjualan yang terjadi, Toko Minak Singa membuat perancangan sistem informasi penjualan dengan tujuan untuk mempermudah proses penjualan dan kemudahan pada masyarakat untuk melakukan pembelian produk tanpa harus datang ke tempat penjualan serta dapat memperluas penjualan dan pemasaran. Perancangan sistem informasi dikembangkan menggunakan SDLC ( System Development Life Cycle), software yang digunakan untuk merancang dan mendesign menggunakan bahasa pemrograman PHP dan Database MySQL.

Pendahuluan:

Yang mendasari ide pembuatan jurnal ini adalah sebagai mengembangkan bisnis dengan memanfaatkan Teknologi dan informasi dengan merancang sistem informasi penjualan yang dapat membantu proses pembelian, persediaan, dan penjualan barang ( barang masuk, stok barang dan barang keluar), layanan service dan laporan berdasarkan batasan tanggal, bulan dan tahun serta memberi kemudahan konsumen dalam bertransaksi dan mengenal produk yang dipasarkan.

Tujuan Penelitian :

Tujuan dari penelitian yang dibuat oleh penulis pada jurnal ini adalah membuat rancangan aplikasi E-commerce berbasis web sehingga memudahkan konsumen untuk membeli barang tnpa harus datang ke outlet.

Metode Penelitian :

Metode penelitian dalam pengembangan sistem informasi penjualan pada jurnal ini terdiri dari :

1. Perencanaan : Pada tahap ini dilakukan pengenalan diagnosa dan mengidentifikasi masalah yang ada dan mencari alternatif pemecahannya.
2.  Analisis Sistem : Mendefinisikan dan memahami kebutuhan software. Untuk mengetahui sifat dari program yang akan dibuat, seperti fungsi yang dibutuhkan, performansi (kemampuan) dan antarmuka yang dibutuhkan. Tahapan ini harus didokumentasikan dan ditunjukkan kepada pengguna sistem.
3. Desain Sistem : Tahap ini membuat desain aliran kerja manajemen dan desain pemrograman yang diperlukan untuk pengembangan sistem informasi serta memberikan gambaran yang jelas bagaimana suatu sistem dibentuk.
4. Implementasi : Setelah sistem baru telah dibuat maka diterapkan dalam kegiatan sehari – hari tanpa meninggalkan sistem lama supaya dapat dievaluasi dan dibandingkan dengan sistem lama.
5.  Evaluasi : Pada tahap ini dilakukan evaluasi terhadap program baru apakah sudah sesuai dengan rencana atau masih perlu ada perubahan – perubahan yang diperlukan

Pembahasan dan Hasil Penelitian

Pembahasan :

• Analisis Sistem

Untuk penunjang pembuatan aplikasi web untuk mengakses pemasaran produk penulis membutuhkan beberapa komponen  yaitu: 

- Perangkat keras (Hardware): Untuk membantu dalam pembuatan aplikasi berlangsung.

- Perangkat lunak (Software) : Untuk mengerjakan perintah-perintah yang diberikan serta untuk melakukan perancangan menggunakan bahasa pemrograman PHP yang berguna untuk mendesign, MySQL untuk menampung data-data yang diperlukan dalam pembuatan, perancangan dan proses berjalannya aplikasi web.

•        Perancangan Sistem

Perancangan Sistem pada aplikasi Toko Minak Singa ini bertujuan untuk memberikan gambaran untuk mengidentifikasi komponen yang akan di desain. Tahap desain sistem secara umum dilakukan setelah tahap analisa selesai dilakukan Desain Sistem pada aplikasi.

• DFD (Data Flow Diagram)

Penulis membuat DFD untuk menjelaskan alur proses aplikasi berjalan secara konteks. Diagram konteks adalah arus data yang berfungsi untuk menggambarkan keterkaitan aliran-aliran data antara sistem dengan bagian-bagian luar. Pada sistem yang dibuat pada Toko Minak Singa terdapat empat entitas yaitu Administrator yang mempunyai wewenang untuk mengelola control panel dan hak akses pada website. Customer melakukan pembelian pada produk, yang proses transaksinya dilakukan secara online, kemudian ba

gian gudang mempunyai tugas untuk mengecek ketersediaan barang. Manajer (Pemilik) menerima semua laporan data penjualan produk pada Toko Minak Singa.

Hasil Penelitian:

Pada tampilan aplikasi, penulis membuat tampilan dengan beberapa menu yangdibutuhkan untuk proses penjualan berlangsung dengan memberikan informasi-informasi untuk membantu para pengguna dalam menggunakan aplikasi dan membeli produk.

Untuk melakukan proses pembelian konsumen diharapkan untuk membuat akun sebagai member dengan mengisi data pada halaman register member . Untuk melakukan proses pembelian konsumen harus melakukan log in menggunakan user name dan password yang telah dibuat.

Kesimpulan :

Jurnal ini membantu dalam meningkatkan pelayanan dan penjualan pada Toko di berbagai wilayah. Aplikasi penjualan online yang dibuat menyajikan laporan-laporan seperti laporan mengenai produk, member, order dan penjualan yang ditujukan kepada pemilik Toko sebagai bahan pertimbangan dalam perbaikan pelayanan.

Kelebihan dan Kekurangan

Kelebihan :

• Dalam pembuatan jurnal penulis menuliskan secara rinci sehingga pembaca paham mengenai definisi, tahapan, yang disertai dengan gambar rancangan yang dibuat bahasa yang digunakan dalam penulis menggunakan bahasa sehari-hari sehingga mudah untuk dimengerti.

Kekurangan :

•           Penulis tidak menjelaskan mengenai alur perancangan yang hanya menampilkan gambar diagram saja sehingga pembaca tidak dapat mengerti proses rancangan e-commerce yang dibuat secara rinci.

-TERIMA KASIH-

Tugas Softskill Design Grafik dengan Metode Timeline, Trendsline , dan Waterfall (BAB 5)

BAB V

Penutup

Trend lines, Timeline, dan Waterfall yaitu sebuah sistem yang merupakan bagian dari google chart, ketiga bagian dari google chart itu dapat memudahkan user atau pengguna untuk menyelesaikan pekerjaan atau masalah.

Kesimpulan

Visualisasi adalah konversi data ke dalam format visual atau tabel sehingga karakteristik dari data dan relasi di antara item data atau atribut dapat di analisis atau dilaporkan. Visualisasi adalah suatu teknik penggunaan komputer untuk menemukan metode terbaik dalam menampilkan data. Dengan menggunakan visualisasi, data yang ditampilkan dapat mempermudah peneliti untuk melihat data yang sulit dilihat dengan pemikiran sehingga peneliti bisa mengamati simulasi dan komputasi, juga memperkaya proses penemuan ilmiah dan mengembangkan pemahaman yang lebih dalam dan tak diduga, salah satu contohnya adalah dengan menampilkan data atau informasi dalam bentuk gambar, contoh : grafik, struktur tree, pola, warna.

Beberapa visualisasi grafik yang dibahas yaitu Timeline , Trendline , dan Waterfall. Sebuah Timeline adalah bagan yang menggambarkan bagaimana set sumber daya yang digunakan dari waktu ke waktu. Timeline yang sering disebut dengan gant chart digunakan dalam mengelola sebuah proyek. Sedangkan Trendline adalah garis pada grafik mengungkapkan keseluruhan arah data. Trendline digunakan untuk grafis tampilan tren dalam data dan membantu menganalisis masalah prediksi. Analisis semacam itu juga dinamai analisis regresi. Dengan menggunakan analisis regresi, kita dapat memperpanjang Trendline dalam grafik luar data aktual untuk memprediksi nilai masa depan. Google Charts mendukung tiga jenis Trendline yaitu : linear, polinomial dan eksponensial. Waterfall adalah grafik yang dapat digunakan untuk menggambarkan efek dari faktor-faktor penyebab perubahan “initial value” menjadi “end value”. Dari grafik ini bisa diketahui kontribusi masing-masing faktor sampai ke nilai akhir.

DAFTAR PUSTAKA

Bibliografi “TRENDLINE” Forex imf. 2015. Web. 6 Januari 2017. http://www.foreximf.com/belajar-forex/pemula/trendline/

Bibliografi “Pengertian HTML, Fungsi HTML serta Sejarah HTML” Faiz Agil Wirawan. 18 Mei 2015. Web. 14 Januari 2017. http://www.burung-net.com/2015/05/pengertian-html-fungsi-html-serta-sejarah-html.html

Bibliografi “Add, change, or remove a trendline in a chart” Microsoft. 2016. Web. 6 Januari 2017.https://support.office.com/en-us/article/Add-change-or-remove-a-trendline-in-a-chart-fa59f86c-5852-4b68-a6d4-901a745842ad

Bibliografi “Trend Lines” StockCharts. 2016. Web. 13 Januari 2017. http://stockcharts.com/school/doku.php?id=chart_school:chart_analysis:trend_lines

Bibliografi “Trendlines” Google. 14 Juli 2016. Web. 6 Januari 2017. https://developers.google.com/chart/interactive/docs/gallery/trendlines#fullhtml

Bibliografi “Timelines” Google. 14 Juli 2016. Web. 6 Januari 2017. https://developers.google.com/chart/interactive/docs/gallery/timeline

Bibliografi “Candlestick Charts” Google. 4 Januari 2017. Web. 6 Januari 2017. https://developers.google.com/chart/interactive/docs/gallery/candlestickchart#Waterfall

Bibliografi “Pengertian Gantt Chart dan Cara Membuatnya” Budi Kho. 21 Juni 2016. Web. 13 Januari 2017. http://ilmumanajemenindustri.com/pengertian-gantt-chart-cara-membuat-gantt-chart/

Bibliografi “TEKNIK VISUALISASI DALAM DATA MINING ” Sri Mulyana, Edi Winarko. 23 Mei 2009. Web. 6 Januari 2017. http://repository.upnyk.ac.id/275/1/E-14_Survey_jurnal__DM_-SeminarUPN'09.pdf

Bibliografi “Pengertian Candlestick” Susilo FX. 14 April 2016. Web. 17 Januari 2017. http://forexstarmoon.com/artikel-forex/519/pengertian-candlestick-414160030/

Bibliografi “Apa sih Google API itu?” Ryan Febrianto . 2016. Web. 1 Januari 2017. http://digitalindo.co.id/?page=blogdetail&ID=22

Tugas Softskill Design Grafik dengan Metode Timeline, Trendsline , dan Waterfall (BAB 4)

BAB IV

Contoh Kasus Pemanfaatan Google API

Timeline

Sebuah Timeline adalah bagan yang menggambarkan bagaimana set sumber daya yang digunakan dari waktu ke waktu. Jika Anda sedang mengelola proyek perangkat lunak dan ingin menggambarkan siapa yang melakukan apa dan ketika, atau jika Anda sedang mengatur sebuah konferensi dan perlu untuk menjadwalkan ruang pertemuan, sebuah Timeline adalah sering pilihan wajar visualisasi. Salah satu jenis Timeline yang populer adalah Gantt chart. Dibawah ini adalah contoh sederhana Timeline nama-nama presiden.

Setelah loading Timeline paket dan mendefinisikan callback untuk menggambar grafik ketika halaman diterjemahkan, metode drawChart() instantiates google.visualization.Timeline() dan kemudian mengisi sebuah dataTable dengan satu baris untuk setiap Presiden.

Di dalam dataTable, kolom pertama adalah nama Presiden, dan kolom kedua dan ketiga adalah awal dan akhir kali. Ini memiliki tipe JavaScript Date, tetapi mereka juga bisa nomor biasa.

Akhirnya, kita memanggil metode draw() bagan, yang menampilkannya dalam sebuah div dengan penciri sama (Timeline) yang digunakan bila wadah dinyatakan pada baris pertama dari drawChart(). Berikut ini adalah kodingannya.

Untuk menambahkan label pada setiap kolom kita gunakan sedikit tambahan koding. Kita berikan nama lengkap dari setiap Presiden. Pada grafik Timeline, terdapat 4 kolom dataTable, kolom pertama adalah label baris, kolom kedua sebagai bar label, kolom ketiga dan keempat sebagai awal dan akhir. Kita tambahkan kodingan tersebut dibawah Washington, adams, dan Jefferson. Berikut kodenya.

Untuk membuat Timeline kita lebih kompleks, mari kita buat Timeline Jadwal Bioskop ke kita bagan. Kita akan menambahkan jadwal mulai dari jadwal tayang, durasi film, dan lokasi tempat kita akan menonton.
Dalam jadwal, beberapa sumber akan memiliki warna yang sama bahkan dalam beberapa baris, sehingga di bagan berikut setiap orang diwakili dengan warna yang konsisten.

Beberapa bar ada yang pendek dan juga ada yang panjang sekali, maka tabel ini adalah tes yang baik dari label. Ketika label terlalu besar untuk bar, disingkat atau dihilangkan, tergantung pada ukuran bar. Kita dapat mengarahkan kursor ke bar untuk mendapatkan informasi tooltip.
Timeline akan mengurutkan mulai dari jam terlebih dahulu. Kita lihat film dimulai dari jam 12.00 hingga jam 18.00. Pada mall Margo XXI film The Avenger memiliki bar yang sangat panjang, ini dikarnakan durasi dari film The Avenger. Dari setiap Mall kita dapat lihat perbedaan warna yang ditampilkan, ini dikarnakan berbeda baris. Jika masih dalam 1 baris, maka warna akan sama. Kita dapat mengatur warna pada baris dengan mengatur backgroundColor. BackgroundColor ditentukan sebagai nilai hex. Di sini, kita memasangkannya dengan colorByRowLabel untuk menunjukkan judul film dalam satu baris:

Seperti penjelasan sebelumnya, kita load terlebih dahulu loader google chartnya. Disini kita hanya menggambar satu grafik saja, tetapi jika ingin menggambar lebih dari satu grafik, kita hanya perlu satu loader saja. Yang ditambah bukan loadernya tapi fungsi gambarnya. Kemudian disini kita gunakan versi yang sekarang (“Current”). Pada fungsi drawChart, kita panggil library container bernama example3.1, kemudian dalam array tabel kita atur terlebih dahulu tipe variabelnya yaitu string dan date. Perlu diperhatikan koma atas pada kodingan addrow atau penambahan data pada tabel dalam baris. Setelah semuanya selesai, kita tutup dengan memanggil id chartnya dengan nama example3.1. itu digunakan untuk dapat menggambar grafik Timeline, jika tidak dilakukan, maka grafik Timline tidak dapat tergambar.

Tabel Konfigurasi

Dalam pembuatan sebuah Timeline terdapat beberapa konfigurasi yang harus kita ketahui sebelum kita membuat sebuah Timeline. Timeline merupakan bagan yang menggambarkan bagaimana set sumber daya yang digunakan dari waktu ke waktu. Pada umumnya Timeline digunakan untuk memecahkan sebuah masalah proyek. 

Berikut adalah tabel konfigurasi Timeline:

Berikut penjelasan mengenai tabel konfigurasi pada Timeline.

1. avoidOverlappingGridLines bertujuan agar tidak ada garis atau bar yang saling menutupi atau tumpang tindih. Pada saat elemen display (bar di Timeline) harus menutupi garis grid maka perintah konfigurasi avoidOverlappingGridLines yang digunakan. Pada dasarnya avoidOverlappingGridLines memiliki nilai true pada default. Jika garis bar dapat terlihat maka nilia dapat diubah menjadi false. Tipe data yang digunakan adalah tipe boolean.
2. Berikutnya terdapat backgroundcolor yang berfungsi untuk memberikan warna pada latar belakang Timeline atau pada bagian grafik utama. Warna yang dapat digunakan untuk background pada Timeline dapat menggunakan warna HTML misal ingin menggunakan warna merah maka kita ketik ‘red’ atau kode HTML warna merah yaitu ‘#00cc00’. Tipe data yang digunakan untuk background adalah string atau object dengan nilai default adalah warna white. Artinya jika kita tidak memberi kode warna maka warna background akan tampil putih.
3. Colors berbeda fungsi dengan backgroundcolor , colors berfungsi untuk memberikan warna pada setiap chart elemen yang terdapat pada Timeline. Warna yang digunakan menggunakan warna HTML. Contoh pada chart elemen kita ingin memberi warna merah maka colors:['red','#004411'].
4. Pada enableInteractivity berfungsi untuk mengatur interaksi antar peristiwa terhadap pengguna. Apakah grafik melempar peristiwa berbasis pengguna atau bereaksi terhadap interaksi pengguna. Jika salah, grafik tidak akan 'pilih' atau peristiwa-interaksi berbasis lainnya (tapi akan memilih peristiwa lain), dan tidak akan menampilkan hovertext atau berubah tergantung pada input pengguna. Tipe yang digunakan dalam enableInteractivity adalah boolena dengan nilai default adalah true.
5. Fontname berfungsi untuk menampilkan atau mengubah jenis teks yang ingin digunakan. Tipe data yang digunakan adalah string. Jika pada saat kita membuat sebuah Timeline kita tidak menentukan jenis font maka secara default Timeline akan menggunakan font arial.
6. Fontsize berfungsi untuk menentukan ukuran dari teks yang kita gunakan pada Timeline. Ukuran font default, dalam piksel, dari semua teks pada grafik. Kita dapat mengganti ini dengan menggunakan properti untuk elemen grafik tertentu.
7. forcelFrame untuk menarik grafik dalam sebuah frame inline. forcelFrame memiliki tipe data boolean dengan nilai default false
8. Height adalah sebuag ketinggan chart dalam berbentuk pixel , ketinggian sebuah chart dapat ditentukan memulai propertis height.
9. Timeline.barlabelstyle digunakan untuk mengatur gaya teks per bar. Dapat digunakan untuk fontname dan fontsize.
10. Timeline colorbyrowlabel merupakan warna yang digunakan perkolom. Ini memiliki nilai default false. Jika diatur ke benar, warna setiap bar pada baris yang sama.,default adalah menggunakan satu warna per label bar.
11. Timeline groupbyrowlabel jika diatur ke false, menciptakan satu baris untuk setiap entri dataTable. Sedangkan nilai default adalah untuk mengumpulkan bar dengan label baris yang sama dalam satu baris.
12. Timeline rowlabel untuk menentukan gaya teks per label . Warna dapat berupa string warna HTML, misalnya 'merah' atau '# 00CC00' Juga lihat fontName dan fontsize.
13. Pada showbarlabel jika diatur ke false, menghilangkan bar label. Sedangkan default adalah untuk menunjukkan kepada user.
14. Pada singlecolor untuk semua warna bar menjadi satu warna. Semua warna bar sama ditetapkan dalan nilai hex. Singlecolor memiliki tipe data string dan default nilainya adalah null.Tooltip trigger adalah interaksi pengguna. Interaksi pengguna yang menyebabkan tooltip yang akan ditampilkan , seperti :

• 'Fokus' - tooltip akan ditampilkan ketika pengguna berada dekat di atas elemen. 
• 'None' - tooltip tidak akan ditampilkan. 

Tooltip memiliki tipedata string dan nilai default focus , maka tanpa diatur nilai tooltip adalah fokus atau tooltip akan ditampilkan ketika pengguna berada dekat di atas elemen.

Tabel Methods

Methods adalah sebuah tindakan yang dapat dilakukan oleh objek. Berikut kita bahas beberapa methods yang terdapat pada Timeline , sebagai berikut :

Menggambarkan grafik dengan meneriman kode lanjut dari panggilan setelah readyevent akan diterputus. Menggambarkan visualisasi pada halaman. Di belakang layar ini dapat mengambil gambar dari server atau membuat grafik pada halaman menggunakan kode visualisasi terkait. Kita harus memanggil metode ini setiap kali data atau pilihan berubah objek harus ditarik dalam elemen DOM berlalu ke konstruktor.

Data yang dipanggil pada method draw adalah sebuah DataView DataTable atau data yang akan digunakan untuk menggambar grafik. Tidak ada metode standar untuk mengekstraksi DataTable dari grafik. Sedangkan options yang dipanggil sebuah peta pasangan nama / nilai pilihan kustom. Contoh termasuk tinggi dan lebar, warna latar belakang, dan keterangan. Dokumentasi visualisasi harus daftar pilihan yang tersedia, dan harus mendukung opsi default jika kita tidak menentukan parameter ini. Kita dapat menggunakan JavaScript sintaks literal untuk lulus dalam peta pilihan: misalnya, {x: 100, y: 200, judul: 'Contoh'}.

Clearchart untuk membersihkan grafik, dan melepaskan semua sumber daya yang dialokasikan.

Mengembalikan array entitas grafik yang dipilih. entitas dipilih adalah bar, entri legenda dan kategori. Untuk grafik ini, hanya satu entitas dapat dipilih pada saat tertentu.

Ini opsional terpapar oleh visualisasi yang ingin membiarkan kita mengakses data yang sedang dipilih dalam grafik.

Selection_array, Array objek yang dipilih, masing-masing menggambarkan elemen data dalam tabel yang mendasari yang digunakan untuk membuat visualisasi (DataView atau DataTable). Setiap objek memiliki sifat baris dan / atau kolom, dengan indeks dari baris dan / atau kolom item yang dipilih dalam DataTable yang mendasari. Jika properti baris adalah nol, maka seleksi adalah kolom; jika properti kolom adalah null, maka seleksi adalah berturut-turut; jika keduanya non-null, maka itu adalah item data tertentu. Anda dapat memanggil metode DataTable.getValue () untuk mendapatkan nilai dari item yang dipilih. array diambil dapat disahkan menjadi setSelection ().
Berikut adalah contoh yang menggunakan get selection.

Trendlines

Trendline adalah garis pada grafik mengungkapkan keseluruhan arah data. Google Charts dapat secara otomatis menghasilkan Trendlines untuk Scatter Charts, Bar Charts, Column Charts dan Line Charts. Trendlines digunakan untuk grafis tampilan tren dalam data dan membantu menganalisis masalah prediksi. Analisis semacam itu juga dinamai analisis regresi. Dengan menggunakan analisis regresi, kita dapat memperpanjang Trendline dalam grafik luar data aktual untuk memprediksi nilai masa depan.

Google Charts mendukung tiga jenis Trendlines yaitu : linear, polinomial dan eksponensial.

Linear Trendlines

Sebuah Trendline Linear adalah garis lurus yang paling mendekati data dalam grafik. (Tepatnya, garis yang meminimalkan jumlah jarak kuadrat dari setiap titik). Trendline Linear merupakan Trendline yang terbaik. Trendline ini cocok digunakan dengan set data linier sederhana. Trendline linier biasanya menunjukkan bahwa sesuatu yang meningkat atau menurun pada tingkat yang stabil.

Pada contoh kasus grafik diatas merupakan contoh dari Linear Trenlines pada Scatter Chart. Pada Linear Trendlines ini dapat dilihat perkembangan Rupiah dari tahun ke tahun berbeda. Di tahun 2009 Rupiah menginjak angka 8900. Seiring berjalannya waktu, rupiah di tahun 2017 naik ke angka 13450. Perkembangan rupiah disini menunjukkan kestabilan dalam peningkatan dan penurunan dari tahun ke tahun. Rata-rata dari tahun ke tahun rupiah mengalami kenaikan, hanya beberapa kali saja mengalami penurunan.

Untuk membuat sebuah Trendlines, kita menggunakan Google Linear Trendlines yang hanya memanggil fungsinya saja. Berikut resource codenya :

Dengan sedikit pengecualian, semua halaman web dengan Google grafik harus memasukkan baris berikut dalam <head> halaman web:

Baris pertama dari contoh ini adalah loader itu sendiri. Kita hanya dapat memuat loader satu kali tidak peduli berapa banyak grafik yang ingin di gambar. Setelah loading loader, kita dapat memanggil fungsi google.charts.load satu atau lebih kali untuk memuat paket untuk jenis bagan yang tertentu.

Argumen pertama untuk google.charts.load adalah versi nama atau nomor, sebagai string. Jika kita menentukan 'current', hal ini menyebabkan rilis resmi terbaru dari Google grafik yang akan dimuat. Jika kita ingin mencoba kandidat untuk rilis berikutnya, gunakan 'upcoming'. Secara umum akan ada sangat sedikit perbedaan antara keduanya, dan mereka akan benar-benar identik. Alasan umum untuk menggunakan mendatang adalah bahwa kita ingin menguji jenis grafik baru atau fitur bahwa Google akan rilis pada bulan berikutnya atau lebih. Google mengumumkan rilis mendatang di forum Google dan merekomendasikan kita untuk memakai rilis Chart terbaru Google. Itu digunakan untuk memastikan perubahan grafik yang kita terima.

Pada fungsi drawchart() di atas, kita memasukkan variable dengan nama data dan memanggil fungsi dari google kembali untuk membuat array dalam table. Kita masukkan data dalam array table sesuai dengan gambar diatas. Kemudian variable options itu digunakan untuk memberikan keterangan pada grafik. Tittle merupakan judul grafik. Tittle hAxis dan vAxis adalah judul pada arah vertikal dana rah horizontal. Jika kita ingin menggabar garis Trendline maka kita set Trendlinesnya 0, jika tidak digambar maka set Trendlines menjadi 1. Kemudian kita memanggil kembali fungsi google dengan model scatter chart dengan nama ‘chart_div’.

Pada bagian penutup, kita akan memanggil nama id dari grafik linear Trendlines yang akan kita gambar. Sebelumnya kita tutup terlebih dahulu bagian script dan bagian headnya. Kita buat body dan panggil idnya untuk dapat menggambar Linear Trendline. Nama idnya adalah chart_div. Kemudian kita atur pajang dan tinggi dari grafik tersebut. Setelah itu kita tutup bagian body dan bagian htmlnya.

Exponential Trendlines

Trendline eksponensial adalah garis melengkung yang digunakan saat nilai data naik atau turun terus-menerus. Kita tidak dapat membuat Trendline eksponensial jika nilai data kita berisi nol atau negatif.

Contoh kasus diatas merupakan hubungan antara kecepatan berkendara mobil dan konsumsi bahan bakar yang dihasilkan. Data di atas menandakan meningkatnya konsumsi bahan bakar setiap kali pengendara meningkatkan kecepatan kendaraannya. Kita tidak bisa membuat Trendline eksponensial apabila bahan bakar dan kecepatan pengendara berisi nol atau negatif.

Untuk membuat sebuah eksponensial Trendline, kita hanya memanggil fungsi yang sudah disediakan oleh google chart. Berikut resource codenya :

Sama halnya dengan Linear Trendlines, kita harus memasukkan terlebih dahulu head yang memanggil fungsi javascript dari google chart, kemudian kita load loader google chart tersebut tanpa pengecualian. Berapapun grafik yang ingin kita buat pada eksponensial Trendlines, kita hanya butuh satu loader saja. 

Setelah kita deskripsikan loader, maka kita akan men setting callback dan packages tetapi sebelum kita dapat menggunakan salah satu paket yang dimuat oleh google.charts.load kita harus menunggu loading selesai. Tetapi kita tidak cukup untuk hanya menunggu dokumen selesai loading, karena dapat mengambil beberapa waktu sebelum loading ini selesai, kita perlu mendaftarkan fungsi callback. Ada dua cara yang ini dapat dilakukan. Menentukan pengaturan callback dalam panggilan google.charts.load atau memanggil setOnLoadCallback melewati sebuah fungsi sebagai argumen.

Perhatikan bahwa kita perlu memberikan definisi fungsi, dari pada memanggil fungsi. Fungsi yang kita berikan dapat berupa fungsi bernama atau fungsi anonim. Bila paket telah selesai loading, fungsi panggilan balik ini akan dipanggil tanpa argumen. Loader juga akan menunggu untuk dokumen selesai loading sebelum memanggil callback.

Jika kita ingin menarik lebih dari satu tabel, kita juga dapat daftarkan lebih dari satu fungsi callback, atau kita dapat menggabungkan mereka ke dalam salah satu fungsi. 

Dalam fungsi arrat data, kita memanggil fungsi array tabel pada library yang sudah di sediakan oleh google chart. Kemudian kita masukkan data yang diinginkan. Setelah itu kita masuk ke pengaturan. Atur judul awal dengan nama tittle, kemudian atur judul grafik untuk garis X dan Y secara horizontal dan vertikal dengan max value yang sesuai. Panggil fungsi pada type dengan fungsi exponential. Setelah itu kita gambar grafik menggunakan fungsi scatter chart dan panggil juga id dari chart eksponensialnya bernama chart_div2.

Pada bagian penutup ini, kita akan menutup bagian script dan head terlebih dahulu, kemudian kita buat body yang isinya memanggil id grafik eksponensialnya tersebut yaitu chart_div2, kemudian atur panjang dan tinggi grafik. Setelah itu tutup body dan tutup htmlnya.

Polynomial Trendlines

Trendline Polinomial adalah garis melengkung yang digunakan saat data berfluktuasi. Sangat berguna, misalnya, untuk menganalisis keuntungan dan kerugian atas kumpulan data besar. Urutan polinomial dapat ditentukan oleh jumlah fluktuasi dalam data atau oleh berapa banyak tikungan (bukit dan lembah) muncul dalam kurva. Order 2 polinomial Trendline umumnya memiliki hanya satu bukit atau lembah. Memesan 3 umumnya memiliki satu atau dua bukit atau lembah. Urutan 4 umumnya memiliki hingga tiga hills atau lembah. Berikut ini adalah contoh kasus umur dengan berat badan.

Ini merupakan contoh kasus perbandingan umur dengan berat badan dari tahun ke tahun. Dalam grafik menunjukkan semakin tua seseorang, semakin naik berat badannya. Untuk penjelasan kode grafik di atas adalah berikut ini.

Sama dengan grafik sebelumnya, pertama kita harus memasukkan loadernya terlebih dahulu. Setelah itu baru kita masukkan google chart load. Dalam google chart load, terdapat versi load atau nomor untuk di load, yaitu versi sekarang dan versi yang akan dating. Argumen pertama dari panggilan google.charts.load adalah versi dari google chart. Ada dua versi khusus untuk sekarang dan beberapa versi frozen. Untuk me-load versi frozen ketik kode berikut ini.

Menurut google chart, versi frozen tidak disarankan karena memiliki masalah keamanan. Google Chart menyarankan sebaiknya menggunakan versi yang baru saja.

Ini merupakan array tabel dalam fungsi drawChart. Kita masukkan umur dan berat badan sesuai dengan data yang diinginkan.

Kemudian kita setting optons pada grafik. Tittle merupakan judul dari grafik yang kita gambar, hAxis dan vAxis merupakan judul dalam horizontal dan vertikal yang memiliki value max 50. Kita dapat menambahkan judul sesuai dengan keiinginan kita. Kemudian kita panggil fungsi scatter chart dengan nama grafik polynomial2_div. itu digunakan untuk memanggil library pada google chart agar kita dapat menggambar grafik polynomial.

Setelah semua pengaturan sudah dilakukan, maka kita tinggal menutup script dan headnya saja. Kemudian kita buat body yang isinya memanggil kembali id dari grafik polynomial tersebut dengan nama polynomial2_div. atur juga panjang dan tinggi pada grafik. Setelah itu tutup body dan tutup htmlnya. 

Waterfall

Waterfall Chart adalah bentuk visualisasi data yang membantu dalam memahami efek kumulatif dari berurutan memperkenalkan nilai-nilai positif atau negatif. Waterfall Chart juga dikenal sebagai Flying Bricks Chart atau Mario Chart karena jelas seperti suspensi kolom (bricks) di udara. Pada bidang keuangan, itu disebut sebagai jembatan.

Waterfall Chart biasanya digunakan untuk memahami bagaimana nilai awal dipengaruhi oleh serangkaian nilai-nilai positif atau negatif menengah. Biasanya nilai awal dan akhir yang diwakili oleh seluruh kolom, sedangkan nilai menengah dilambangkan dengan kolom mengambang. Kolom yang berbeda warna untuk membedakan antara nilai-nilai positif dan negatif.

Sebuah Waterfall chart yang khas digunakan untuk menunjukkan bagaimana nilai awal meningkat dan menurun serangkaian nilai menengah, yang mengarah ke nilai akhir.

Mari kita ambil contoh sederhana untuk memahami hal-hal yang lebih baik. Contoh paling sederhana akan audit inventarisasi pria t-shirt di outlet ritel. Anda perlu mencari tahu berapa banyak dijual t-shirt Anda miliki di tangan untuk memulai bulan depan dengan. Biasanya, akan ada beberapa unit dalam stok untuk memulai bulan dengan. Seiring jalannya t-shirt berada di layar dan berbagai orang mencoba keluar, beberapa unit akan rusak. Beberapa unit-unit yang rusak dapat diperbaharui untuk menambah saham, dan akhirnya kami tiba di jumlah unit yang terjual.

Jadi dalam grafik air terjun ini, nilai awal dari "unit di saham" melewati serangkaian pasang surut, satu dan satu ke bawah tepatnya untuk mendapatkan nilai akhir dari unit yang terjual.

Varian Waterfall Chart

Grafik Waterfall memiliki sejumlah varian. Sementara varian ini mungkin tidak melakukan keadilan untuk definisi grafik air terjun, tetapi mereka datang sangat berguna dalam beberapa situasi.

Mari kita mempertimbangkan situasi di mana Anda perlu untuk merencanakan laba tahunan perusahaan Anda. Jadi Anda akan menunjukkan berbagai sumber Anda pendapatan, tambahkan mereka dan memotong semua biaya Anda untuk tiba di total keuntungan (atau kerugian).

varian minor lain dari grafik terjun adalah mungkin di mana Anda menunjukkan jumlah menengah sepanjang jalan sebelum menunjukkan jumlah kumulatif akhir. Dalam contoh di atas, kita bisa menunjukkan jumlah perantara untuk total pendapatan dan total biaya sebelum menunjukkan total keuntungan.

Jumlah menengah datang sangat berguna ketika ada banyak data untuk meringkas banyak sebelum nilai akhir pada grafik. Misalnya, alih-alih pendapatan produk jika kita menunjukkan pendapatan dari produk berbasis web dan produk berbasis desktop secara terpisah, dan serta kustomisasi layanan dan dukungan bukannya layanan secara keseluruhan, total jumlah pendapatan akan sangat berguna di sana.

Tugas Softskill Design Grafik dengan Metode Timeline, Trendsline , dan Waterfall (BAB 3)

Berikut adalah termasuk tugas T3 yang akan membahas tentang perangkat lunak yang berhubungan dengan Google API.

BAB 3

Perangkat Lunak Yang Berhubungan Dengan Google API

Google chart

Google Chart API memungkinkan Anda secara dinamis menghasilkan grafik dengan string URL dan menanamkan grafik ini pada halaman web, atau men-download gambar untuk penggunaan lokal atau offline. Google Chart Tools memungkinkan menambahkan grafik hidup untuk setiap halaman web. Mereka memberikan keuntungan seperti galeri yang kaya visualisasi disediakan sebagai grafik gambar dan grafik interaktif dan mereka dapat membaca data langsung dari berbagai sumber data. Pengguna menanamkan data dan parameter format dalam permintaan HTTP, dan Google mengembalikan citra PNG dari grafik. Banyak jenis grafik yang didukung, dan dengan membuat permintaan ke tag gambar grafik dapat dimasukkan dalam halaman web.

Google Chart API

Google Chart API adalah alat yang memungkinkan orang dengan mudah membuat grafik dari beberapa data dan menanamkan dalam sebuah halaman web. Google menciptakan PNG gambar grafik dari data dan parameter format dalam permintaan HTTP. Banyak jenis grafik yang didukung, dan dengan membuat permintaan ke tag gambar, orang hanya dapat mencakup grafik dalam halaman web.

Awalnya itu adalah perangkat internal untuk mendukung embedding cepat grafik dalam aplikasi Google sendiri (seperti Google Finance misalnya). Google pikir itu akan menjadi alat yang berguna untuk membuka untuk pengembang web. Secara resmi diluncurkan pada tanggal 6 Desember 2007.

Saat ini, line charts, bar charts, pie charts, and radar charts, serta Venn diagrams, scatter plots, sparklines, maps, google-o-meters, and QR codes yang didukung.

API ini ditinggalkan pada tahun 2012 dengan jaminan ketersediaan hingga April 2015. Setelah periode itu, Google berhak untuk mematikannya tanpa pemberitahuan, meskipun hingga April 2016, tidak ada rencana untuk melakukannya. Alternatif yang direkomendasikan oleh Google adalah Google Charts.

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. Misalnya saja kita bisa menambahkan fitur Google Map pada website kita.

Google API dapat dipelajari langsung melalui Google Code. Melalui Google Code kita dapat belajar tentang Google API dan dapat mengimplementasikan pada aplikasi web atau website yang kita kembangkan.

Ada banyak API yang disediakan oleh Google, beberapa diantaranya adalah:

1. Language API: untuk memanfaatkan fitur translation yang dimiliki Google.

2. Earth API: memanfatkan fitur yang ada pada Google Earth.

3. Javascript API.

4. Maps API: memanfaatkan fitur yang ada pada Google Maps.

5. Search API: memanfaatkan fitur pencarian pada Google Search.

6. Visualization API: membuat grafik maupun chart dengan Google API.

7. YouTube API: memanfaatkan fitur yang ada pada YouTube misalnya untuk pencarian video.

Salah satu cara mudah mempelajari Google API adalah dengan memanfaatkan Google AJAX APIs Playground. AJAX APIs playground adalah sebuah situs yang disediakan oleh Google bagi kita untuk mencoba secara langsung sejumlah Google API yang berbasis AJAX (Asynchronous Javascript and XML). Karena berbasis AJAX maka tentunya semua kode program dalam sintaks Javascript yang bisa kita lihat, copy dan paste secara langsung untuk digunakan pada website kita.

Dengan menggunakan Google AJAX API, kita bisa mengintegrasikan data pada website kita dengan API yang disediakan oleh Google.

HTML 

HTML adalah bahasa markup internet (web) berupa kode dan simbol yang dimasukkan kedalam sebuah file yang ditujukan untuk ditampilkan didalam sebuah website. Singkatnya, HTML adalah bahasa markup yang digunakan untuk membuat website. Website yang dibuat dengan HTML ini, dapat dilihat oleh semua orang yang terkoneksi dengan internet. Tentunya dengan menggunakan aplikasi penjelajah internet (browser) seperti Internet Explorer, Mozilla Firefox dan Google Chrome.

HTML adalah kepanjangan dari HyperText Markup Language, merupakan bahasa interpretasi yang digunakan pada sebuah halaman web. HTML mendeskripsikan struktur halaman web yang ditulis dengan element atau tag yang yang mengapit konten atau teks didalamnya.

Penjelasan lebih rinci mengenai arti kata-perkata dari HTML adalah sebagai berikut :

• HyperText: adalah istilah teks aktif, yang apabila diklik akan meloncat atau menuju halaman lain. Ini merupakan kemampuan dari sebuah halaman web yang dapat saling berhubungan antara halaman satu dengan lainnya.

• Markup: Merupakan tag-tag yang biasanya diawali dengan tag pembuka (opening tag) dan tag penutup (closing tag) yang memberi kemampuan untuk menata layout atau memformat struktur halaman web pada sebuah konten teks sederhana didalam file HTML itu sendiri.

• Language: yaitu bahasa yang digunakan oleh HTML itu sendiri. Perintah-perintah tag menggunakan bahasa yang dapat dimengerti oleh browser atau interpreter lainnya. HTML bukanlah sebuah bahasa pemrograman pada umumnya, seperti Java, C, C++, visual basic dan sejenisnya, melainkan bahasa markup / markah yang ditulis dengan perintah tag-tag atau element yang menaungi (mengapit) konten didalamnya yang akan ditampilkan pada sebuah halaman web oleh browser atau HTML interpreter (penerjemah HTML) lainnya.

HTML berguna untuk menampilkan konten, menghubungkan (link) antar halaman, memberi struktur dan informasi terkait dengan sebuah halaman web. konten sebuah web tidak hanya terbatas pada teks saja, melainkan konten interaktif lainnya seperti video, audio, gambar dan animasi dapat disisipkan dan ditampilkan pada halaman web.

Saat ini bahasa HTML masih terus dikembangkan Hal ini dikarenakan pengguna internet semakin hari semakin berkembang pesat. Oleh karena itu bahasa HTML harus ditingkatkan lagi agar bisa menciptakan halaman web yang lebih berkualitas. Untuk itulah dibentuk sebuah organisasi yang bertanggungjawab mengembangkan bahasa HTML. Organisasi ini bernama W3C.

Fungsi dan Kegunaan HTML

Sebagai bahasa markup internet, HTML memiliki banyak fungsi dan kegunaan. Beberapa manfaat dari HTML diantaranya

• Untuk Membuat Halaman Web. Bahasa HTML digunakan untuk membuat halaman web. Semua halaman web pasti dibuat dengan menggunakan HTML.

• Sebagai Pondasi Bagi Sebuah Website. Sebuah rumah jika tidak memiliki pondasi maka akan cepat roboh. Begitu juga dengan website. Jika tidak memiliki HTML sebagai pondasi, kita tidak dapat mengimplementasikan bahasa lainnya seperti CSS (bahasa untuk mendesain website), Javascript (bahasa untuk menambah prilaku website), dan PHP (bahasa pemrograman server website).

• Untuk menandai teks pada halaman web. Misalnya, kita dapat menandai sebuah teks menjadi bergaris bawah dengan menggunakan tag html.

• Untuk menandai elemen/bagian pada halaman web. Sebuah website memiliki beberapa bagian seperti header, navigasi, main dan footer. Kita dapat menandai setiap bagiannya dengan HTML.

• Untuk menampilkan informasi dalam bentuk tabel.

• Untuk menambahkan objek seperti audio, video, gambar, dll dalam halaman web.

• Untuk membuat online form.

Sejarah HTML

HTML pertama kali diciptakan oleh IBM pada tahun 1980. Saat itu tercetus ide untuk menempatkan elemen-elemen yang berguna untuk menandai bagian suatu dokumen seperti judul, alamat dan isi dokumen. Pada akhirnya elemen-element tersebut dibentuk menjadi suatu program untuk melakukan pemformatan dokumen secara otomatis.

Bahasa pemrograman untuk melakukan tugas ini disebut sebagai bahasa markup. IBM menamai program ini sebagai Generalized Markup Language. Pada tahun 1986, konsep ini disetujui oleh ISO (International Standard Organization) sebagai standar untuk pembuatan dokumen. Bahasa ini dinamai oleh ISO sebagai Standard Generalized Markup Language (SGML)

HTML sendiri, adalah bagian dari SGML. Tim Berners-Lee dari CERN mengemukakan sebuah ide tentang pembuatan skrip bahasa pemrograman dan dokumen yang dapat diakes oleh semua komputer tanpa melihat jenis platformnya. Sejak saat itu HTML menjadi lebih populer dibandingkan SGML.

HTML 5 

HTML5 adalah kepanjangan dari HyperText Markup Language versi 5, merupakan HTML baru penerus dari HTML 4, XHTML1, dan DOM Level 2 HTML. HTML5 merupakan pengembangan bahasa HTML yang lebih baik, lebih berarti atau semantik (semantic meaning) yang sebelumnya adalah bahasa markup sederhana menjadi sebuah flatform canggih, penuh fitur dan kaya akan antarmuka pemrograman aplikasi yang disebut API (Application Programming Interface).

HTML 5 adalah versi terakhir dari HTML saat artikel ini ditulis. HTML 5 membawa banyak sekali perubahan terhadap versi sebelumnya. Banyak tag baru yang diperkenalkan seperti <header>, <aside> , <section>, <footer>, dan tag menarik lainnya. Selain itu, HTML 5 mendukung streaming video tanpa menggunakan flash.

Kelebihan HTML 5 sebagai versi terbaru dari HTML, adalah dengan hadirnya fitur fitur menarik. Fitur tersebut diantaranya.

Doctype dan Meta yang lebih pendek

Doctype dan Meta di HTML 5 menjadi lebih pendek dan mudah diingat. Bentuk Doctype di html 5 seperti ini

<!doctype html>

Sedangkan meta tagsnya

<meta charset=”utf-8”>

Jauh lebih pendek daripada versi sebelumnya.

Struktur Baru

Pada versi sebelumnya, ketika kita ingin membuat struktur website dengan html, kita akan membuatnya dengan tag . Namun di HTML5 ini, hadir beberapa tag yang dikhususkan untuk membuat struktur suatu halaman web.

• <header> untuk mendefinisikan header halaman.

• <nav> untuk mendefinisikan navigasi halaman.

• <section> untuk mendefinisikan bagian dari sebuah halaman.

• <article> untuk mendefiniskan artikel atau konten utama dari sebuah halaman.

• <aside> untuk mendefinisikan konten tambahan seperti sidebar dari sebuah halaman.

• <footer> untuk mendefinisikan footer dari sebuah halaman.

Form Web Baru

Tag <input> pada HTML 5 memiliki banyak tipe baru. Beberapa diantaranya yaitu :

• email : untuk mendefinisikan input yang berupa email.

• tel : untuk mendefinisikan input yang berupa nomor telpon.

• date: untuk mendefinisikan input yang berupa tanggal.

Dan masih banyak lagi. Selain itu ada juga atribut baru required . Dengan atribut ini kita dapat menandai sebuah input wajib diisi, dan jika dikosongi akan mendapat peringatan.

Tidak Membutuhkan Flash

Sebelumnya, web sangat membutuhkan flash terutama untuk konten seperti video. Namun pada versi baru ini, hadir tag baru seperti <video> dan <audio> yang dapat diimplementasikan tanpa menggunakan flash. Selain itu ada juga tag <canvas> yang memfasilitasi profuksi grafik permainan interaktif, aplikasi paint, dan grafis lain dengan cepat, tentunya tanpa menggunakan flash.

JSON

JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript, Standar ECMA-262 Edisi ke-3 - Desember 1999. JSON merupakan format teks yang tidak bergantung pada bahasa pemprograman apapun karena menggunakan gaya bahasa yang umum digunakan oleh programmer keluarga C termasuk C, C++, C#, Java, JavaScript, Perl, Python dll. Oleh karena sifat-sifat tersebut, menjadikan JSON ideal sebagai bahasa pertukaran-data.

JSON dibangun dalam dua struktur:

1. Beberapa pasangan dari nama/nilai. Dalam beberapa bahasa perograman biasa disebut dengan istilah object, record, struct, tabel hash, key list atau associative array.

2. Nilai-nilai yang terusun secara ordered list. Biasa disebut dengan array, vector, list atau daftar dalam bahasa pemrograman.

JSON adalah struktur data yang universal, dalam artian bisa digunakan dalam berbagai bahasa pemrograman. Hampir semua bahasa pemrograman mendukung penuh JSON dalam berbagai format. Hal ini memungkinkan format data yang dapat dipertukarkan menggunakan bahasa pemrograman juga menggunakan dasar dari struktur JSON.

Format data JSON mempunyai aturan sebagai berikut:

• Object adalah satu set nama / nilai yang tidak terurut (An object is an unordered set of name / value pairs). Penulisan object dimulai dengan tanda { (left brace) dan diakhiri dengan tanda } (right brace). Setiap nama diikuti oleh tanda : (colon) dan pasangan nama / nilai dipisahkan dengan tanda , (comma).

• Array adalah sekumpulan nilai yang teratur (An array is an ordered collection of values). Penulisan sebuah array dimulai dengan tanda [ (left bracket) dan diakhiri dengan tanda ] (right bracket). Nilai dipisahkan menggunakan tanda , (comma).

• Nilai bisa berupa string dalam tanda kutip, atau number (angka), TRUE atau FALSE atau NULL, sebuah object atau sebuah array. Struktur ini dapat ditulis menggunakan metode bersarang.

• String adalah rangkaian atau urutan karakter unicode yang berada dalam tanda kutip, bisa juga hanya berisi karakter kosong, menggunakan tanda \ (backslash) untuk escape. Karakter di representasikan sebagai string tunggal. Tipe data string pada JSON sangat mirip dengan definisi pada bahasa C atau Java.

• Number sangat mirip dengan definisi pada bahasa C atau Java, hanya saja tipe bilangan oktal dan heksadesimal tidak digunakan.

• Ruang kosong (Whitespace) dapat diselipkan diantara pasangan atau token apa saja. Kecuali detail encoding, yang secara jelas akan berfungsi untuk menjelaskan bahasa yang digunakan.

JSON sangat berguna saat kita sering melakukan pertukaran data pada sebuah aplikasi. Contoh nyata adalah penggunaan tabulasi menggunakan JqGrid, yang merupakan salah satu plugin jQuery untuk menampilkan data dalam bentuk spreadsheet. Plugin ini juga mendukung format JSON, selain format XML.

Format JSON sering digunakan untuk mentransmisikan data terstruktur melalui suatu koneksi jaringan pada suatu proses yang disebut serialisasi. Aplikasi utamanya adalah pada pemrograman aplikasi web AJAX dengan berperan sebagai alternatif terhadap penggunaan tradisional format XML.

Walaupun JSON didasarkan pada subset bahasa pemrograman JavaScript (secara spesifik, edisi ketiga standar ECMA-262, Desember 1999) dan umumnya digunakan dengan bahasa tersebut, JSON dianggap sebagai format data yang tak tergantung pada suatu bahasa. Kode untuk pengolahan dan pembuatan data JSON telah tersedia untuk banyak jenis bahasa pemrograman. Situs json.org menyediakan daftar komprehensif pengikatan JSON yang tersedia, disusun menurut bahasa berbagai macam negara.

PHP

PHP adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. Selain itu, PHP juga bisa digunakan sebagai bahasa pemrograman umum. PHP di kembangkan pada tahun 1995 oleh Rasmus Lerdorf.

PHP disebut bahasa pemrograman server side karena PHP diproses pada komputer server. Hal ini berbeda dibandingkan dengan bahasa pemrograman client-side seperti JavaScript yang diproses pada web browser (client).

Pada awalnya PHP merupakan singkatan dari Personal Home Page. Sesuai dengan namanya, PHP digunakan untuk membuat website pribadi. Dalam beberapa tahun perkembangannya, PHP menjelma menjadi bahasa pemrograman web yang powerful dan tidak hanya digunakan untuk membuat halaman web sederhana, tetapi juga website populer yang digunakan oleh jutaan orang seperti wikipedia, wordpress, joomla, dll.

Saat ini PHP adalah singkatan dari PHP: Hypertext Preprocessor, sebuah kepanjangan rekursif, yakni permainan kata dimana kepanjangannya terdiri dari singkatan itu sendiri: PHP: Hypertext Preprocessor.

PHP dapat digunakan dengan gratis (free) dan bersifat Open Source. PHP dirilis dalam lisensi PHP License, sedikit berbeda dengan lisensi GNU General Public License (GPL) yang biasa digunakan untuk proyek Open Source. Kemudahan dan kepopuleran PHP sudah menjadi standar bagi programmer web di seluruh dunia.

Fungsi PHP Dalam Pemrograman Web

Untuk membuat halaman web, sebenarnya PHP bukanlah bahasa pemrograman yang wajib digunakan. Kita bisa saja membuat website hanya menggunakan HTML saja. Web yang dihasilkan dengan HTML (dan CSS) ini dikenal dengan website statis, dimana konten dan halaman web bersifat tetap.

Sebagai perbandingan, website dinamis yang bisa dibuat menggunakan PHP adalah situs web yang bisa menyesuaikan tampilan konten tergantung situasi. Website dinamis juga bisa menyimpan data ke dalam database, membuat halaman yang berubah-ubah sesuai input dari user, memproses form, dll.

Untuk pembuatan web, kode PHP biasanya di sisipkan kedalam dokumen HTML. Karena fitur inilah PHP disebut juga sebagai Scripting Language atau bahasa pemrograman script.

Kelebihan PHP dari bahasa pemrograman lain

• Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaanya.

• Web Server yang mendukung PHP dapat ditemukan dimana-mana dari mulai apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi yang relatif mudah.

• Dalam sisi pengembangan lebih mudah, karena banyaknya milis-milis dan developer yang siap membantu dalam pengembangan.

• Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah karena memiliki referensi yang banyak.

• PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (Linux, Unix, Macintosh, Windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-perintah system.

Sejarah PHP

PHP pertama kali dibuat oleh Rasmus Lerdroft, seorang programmer C. Pada waktu itu PHP masih bernama FI (Form Interpreted), yang wujudnya berupa sekumpulan script yang digunakan untuk mengolah data form dari web. Jadi semula PHP digunakannya untuk menghitung jumlah pengunjung di dalam webnya.

Kemudian ia mengeluarkan Personal Home Page Tools versi 1.0 secara gratis. Versi ini pertama kali keluar pada tahun 1995. Isinya adalah sekumpulan script PERL yang dibuatnya untuk membuat halaman webnya menjadi dinamis. Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP / FI, kependekan dari Hypertext Preprocessing / Form Interpreter.

Dengan perilisan kode sumber ini menjadi open source, maka banyak programmer yang tertarik untuk ikut mengembangkan PHP.

Kemudian pada tahun 1996 ia mengeluarkan PHP versi 2.0 yang kemampuannya telah dapat mengakses database dan dapat terintegrasi dengan HTML. Pada rilis ini interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.Pada tahun 1998 tepatnya pada tanggal 6 Juni 1998 keluarlah PHP versi 3.0 yang dikeluarkan oleh Rasmus sendiri bersama kelompok pengembang softwarenya.

PHP versi 4.0 keluar pada tanggal 22 Mei 2000 merupakan versi yang lebih lengkap lagi dibandingkan dengan versi sebelumnya. Perubahan yang paling mendasar pada PHP 4.0 adalah terintegrasinya Zend Engine yang dibuat oleh Zend Suraski dan Andi Gutmans yang merupakan penyempurnaan dari PHP scripting engine. Yang lainnya adalah build in HTTP session, tidak lagi menggunakan library tambahan seperti pada PHP. Tujuan dari bahasa scripting ini adalah untuk membuat aplikasi-aplikasi yang dijalankan di atas teknologi web. Dalam hal ini, aplikasi pada umumnya akan memberikan hasil pada web browser, tetapi prosesnya secara keseluruhan dijalankan web server.

PHP 4.0 adalah versi PHP yang paling banyak dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan kemampuannya untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi. Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi objek.

Angular JS

Angular JS merupakan framework javascript open souce yang dirilis oleh google pada tahun 2009. Konsep dari Angular JS adalah meningkatkan fungsi dari HTML untuk membangun web app. Bayangkan awalnya HTML hanya digunakan untuk membuat halaman website statis dan kini bisa berfungsi untuk membuat web app dengan menggunakan Angular JS. Angular JS bukan berupa libary melainkan framwork yang solid. Sama seperti framwork lainnya. Angular JS memiliki onsep MVC (Model, View, Control) meskipun dengan cara yang berbeda.

Angular JS adalah framework terstruktur untuk aplikasi web yang dinamis. Framework ini mendukung penggunaan HTML sebagai bahasa template Anda dan memberikan Anda keleluasan pada pengembangan sintak HTML untuk mengekpresikan komponen dari aplikasi Anda secara baik dan ringkas. Data binding dan dependency injection dapat mengeliminasi banyak kode yang harus Anda tulis. Semua ini dibebankan kepada web browser, membuatnya menjadi partner ideal dengan teknologi server.

Angular JS memiliki banyak keunggulan

Berikut ini beberapa keunggulan dari Angular JS :

1. Mengenalkan browser dengan sintak HTML baru.

HTML5 telah menawarkan elemen baru seperti video, audio, canvas dan sebagainya. Dengan Angular JS kita dapat menambah banyak lagi elemen baru yang dimengerti oleh browser seperti draggable yang berfungsi agar elemen bisa di drag, zippy yang membuat akordion, juga sintak bisa dibuat dalam bahasa indonesia seperti <sembunyikan> yang berfungsi jika diklik maka elemen akan disembunyikan. Fungsi ini disebut Directive. Kitalah yang bertanggung jawab dalam pembuatan atau penambahan fungsi elemen HTML atau dengan kata lain kita mengajari browser mengerti bahasa sintak HTML yang kita buat.

2. HTML Template.

Template yang digunakan Angular JS adalah template HTML biasa dengan penambahan ekspresi, tidak perlu template yang memiliki engine khusus

3. Dependency Injection.

Developer dapat membuat beberapa komponen kode yang bisa digunakan fungsinya berulang kali. Komponen ini disebut juga reusable komponen. Developer dapat memanggil komponen yang dibuat secara terpisah.

Fitur umum Angular JS

Berikut ini adalah fiture umum dari Angular JS :

1. Angular JS adalah framework yang efisien untuk membangun Rich Internet Applications (RIA).

2. Angular JS memberikan developer pilihan untuk menulis aplikasi pada sisi client dengan Javascript dan pendekatan MVC (Model, View, Controller).

3. Aplikasi dengan menggunakan Angular JS bisa digunakan di segala web browser. Angular JS secara otomatis menghandle Javascript supaya cocok dengan web browser yang digunakan.

4. Angular JS adalah open source, gratis telah digunakan oleh ribuan developer di seluruh dunia.

Fitur Core dalam Angular JS

Berikut Fitur Core yang ada pada Angular JS :

1. Data binding : sinkronisasi data otomatis antara model dan view.

2. Scope : objek yang mengacu pada model, sebagai perekat antara controller dan view.

3. Controller : kumpulan fungsi-fungsi dari Javascript.

4. Services : Angular JS datang dengan beberapa built-in services seperti $http untuk membuat sebuah XMLHttpRequests.

5. Filters : pilihan item dari sebuah array dan mengembalikan sebuah array baru.

6. Directives : marker dari DOM elemen seperti element, attribute, css dan lainnya.

7. Templates : tampilan yang dirender dengan informasi dari controller dan model.

8. Routing : perpindahan tampilan.

9. Model View Whatever : Angular JS tidak mengimplementasikan MVC secara umum, melainkan sesuatu yang lebih dekat sebagai MVVM (Model View View Model).

10. Deep Linking : mengijinkan Anda untuk meng-encode keadaan dari aplikasi pada URL, sehingga bisa dibookmark. Aplikasi bisa direstore dari URL dari keadaan terakhir.

11. Dependency Injection : terdapat built in dependency injection sehingga membantu developer untuk membuat dan mencoba aplikasi secara mudah.

Angular JS memiliki kelemahan

Angular JS memiliki 2 kelemahan, yaitu :

1. Tidak aman, autentifikasi dari server harus tetap dijaga untuk menjaga keamanan aplikasi.

2. Kebergantungan dengan web browser, jika javascript di-disable dari web browser maka semua kode tidak bisa bekerja.

Framework Angular JS bisa dibagi menjadi tiga bagian utama

Bagian utama dari Angular JS, yaitu :

1. ng-app : definisi arahan dan link dari aplikasi Angular JS ke html.

2. ng-model : arahan data dari aplikasi Angular JS ke input kontrol html.

3. ng-bind : arahan data dari aplikasi Angular JS ke tag html.

AJAX

Istilah AJAX (Asynchronous JavaScript And XML) dalam pengembangan web menjadi populer pada beberapa tahun belakangan ini. AJAX ini sendiri bukan merupakan bahasa pemrograman baru, AJAX hanya merupakan sebuah teknik pemanfaatan object XMLHttpRequest dengan Javascript untuk berkomunikasi dengan server secara Asynchronous, dengan pemanfaatan object XMLHttpRequest ini kita dapat membuat proses berjalan secara background atau bekerja dibelakang layar sementara user dapat tetap berinteraksi dengan halaman web yang ada. Pemanfaatan tehnik Asynchronous ini jugalah yang telah mendorong pengembangan web menjadi lebih kaya atau banyak yang menulisnya dengan istilah pengembangan Rich Internet Application (RIA) atau WEB 2.0

AJAX pertama kali di perkenalkan oleh Jesse James Garrett pada tulisannya yang berjudul AJAX: A New Approach To Web Applications. Jesse James memberi istilah AJAX untuk singkatan dari   Asynchronous JavaScript And XML, namun pada perkembangannya data yang dikomunikasikan secara Asynchronous tidaklah harus berupa XML data, kita mengunakan format data lain untuk dikomunikasikan secara Asynchronous dengan server seperti PLAIN TEXT FILE, HTML DATA atau juga berupa SWF data (Flash file).

AJAX bukan merupakan bahasa pemrograman baru, namun hanya sebuah istilah untuk tehnik pemanfaatan Javascript dalam mengontrol class object XMLHttpRequest untuk berkomunikasi dengan server kemudian merefresh / mengupdate content yang ada dalam halaman web tanpa melakuan Reload keseluruhan halaman web seperti pada metode Tradisional sebelumnya, AJAX sendiri merupakan singkatan dari "Asynchronous JavaScript And XML".

Sejarah singkat AJAX

Tehnik komunikasi Asynchronous dengan server sendiri pertama kali dikembangkan oleh microsoft pada tahun 1997, kemudian pertama kali XMLHttpRequest Object diperkenalkan pada IE5 (circa 1998) dan kemudian dipergunakan secara luas pada Outlook web access. Jesse James Garrett's kemudian memberikan istilah AJAX untuk tehnik Asynchronous ini pada salah satu tulisannya di tahun 2005. Dan hingga saat ini telah banyak yang mengimplementasikan tehnik ini dalam pengembangan web, sebagai contoh pengunaan AJAX dalam web application bisa dilihat pada beberapa link berikut:

• Google Map

• Flickr.com

• gmail.com

• google sugest

• yahoo.com

dan masih banyak lagi contoh lainnya yang dapat ditemukan pada aplikasi web  saat ini.

Kombinasi Dari Ajax

Berikut ini adalah beberapa kombinasi dari Ajax :

• XHTML (atau HTML) dan CSS untuk bahasa mark up dan tampilan.

• DOM yang diakses dengan client side scripting language, khususnya implementasi ECMAScript seperti JavaScript dan JScript, untuk menampilkan secara dinamis dan berinteraksi dengan informasi yang ditampilkan.

• Objek XMLHttpRequest untuk melakukan pertukaran data asinkronus dengan web server. Pada beberapa framework dan kasus Ajax, objek IFrame lebih dipilih daripada XMLHttpRequest untuk melakukan pertukaran data dengan web server.

• XML umumnya digunakan sebagai format untuk pengiriman data, walaupun format lain juga memungkinkan, seperti HTML, plain text, JSON dan EBML.

Seperti halnya DHTML, LAMP, atau SPA, Ajax bukanlah teknologi spesifik, melainkan merupakan gabungan dari teknologi yang dipakai bersamaan. Bahkan, teknologi turunan/komposit yang berdasarkan Ajax, seperti AFLAX sudah mulai bermunculan.