Scribd Logo
Unggah

Selamat datang di Scribd!

  • Rifda Laporan Praktikum 3

    Diunggah oleh

    Rifda Qurrotul 'Ain
    16 tayangan18 halaman

    Judul Asli

    3321600012 Rifda Laporan Praktikum 3

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    16 tayangan18 halaman

    Rifda Laporan Praktikum 3

    Diunggah oleh

    Rifda Qurrotul 'Ain

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 18

    LAPORAN PRAKTIKUM 3

    TEKNOLOGI WEB SERVICE

    Disusun oleh:
    Rifda Qurrotul 'Ain (3321600012)

    Program Studi Sains Data Terapan PENS


    A. Percobaan 1 : Menghitung Luas Lingkaran

    <head>
    <title>Circle Area (1)</title>
    <script language="javascript" type="text/javascript">
    function getArea(r) {
    return Math.PI * r * r;
    }
    </script>
    </head>

    Pada tag <head> berisi tag <title> dan <script>. Tag <title> untuk memberikan judul Web, tag
    <script> untuk miginterpretasikan Bahasa yg digunakan adalah javascript dan type nya adalah text.

    <body>
    <h1>Cicle Area (1)</h1>
    <p>
    <form>
    enter radius, then press tab key or click on "area"
    box.<br />
    radius (cm):
    <input type="text" name="radius" size="6" maxlength="7" value="-99" ,
    onblur="area.value=getArea(parseFloat(radius.value));">
    area (cm<sup>2</sup>):
    <input type="text" name="area" size="6" maxlength="7" value="-99">
    </form>
    </body>
    pada tag <body> berisi tag <h1> dan <form>. tag <h1> untuk memperkenalkan konten yang ada di
    halaman web, disini tag h1 yaitu ‘circle area (1)’. tag <form> untuk membuat input nilai dari user.
    fungsi ‘onblur’ pada input radius adalah memberikan nilai pada input area, selanjutnya function
    getarea() adalah sebagai nilai yang diinputkan user pada radius dikonversikan secara otomatis selain
    itu juga sebagai nilai dari luas lingkaran.
    B. Percobaan 2 : Melihat Data Kalibrasi

    Pertama kita membuat file.dat dengan nama WVdata yang berisi Water Vapor data.

    Pada tag <head> berisi tag <title> dan <script>. Tag <title> untuk memberikan judul Web, tag
    <script> berisikan fungsi untuk menuliskan output ke dokumen html yaitu”waktu terakhir dokumen
    diubah” menggunakan Bahasa JavaScript. Pada tag <body> berisi tag <h2> dan <form>, Tag <h2>
    merupakan fungsi tag untuk judul artikel blog(heading) , yaitu ‘Get calibration constant for water
    vapor instrument’. Tag <form> merupakan fungsi untuk membuat formular isian bagi user. Fungsi
    action =”getCalib.php” adalah method penghubung HTML dengan PHP dengan operasi yaitu nilai
    inputan user dikirim dari HTML ke PHP untuk selanjutnya dilakukan operasi tampilan dll.

    file PHP berikut berfungsi untuk membuat tabel konstanta kalibrasi berdasarkan Instrument ID
    inputan user. $SN merupakan nama variable yang memiliki nilai dari form yang diinputkan user.
    $inFile = “WVdata.dat” berfungsi untuk penghubung PHP dengan file data Konstanta Kalibrasi.
    Apabila $SN yang diinputkan user sesuai dengan yang ada di dalam data Wvdata.dat, web akan
    menampilkan hasil tabel konstanta kalibrasinya, namun apabila tidak sesuai maka akan otomatis
    menampilkan pesan ‘Couldn’t find this instrument.
    Sebelum menjalankan getCalib pada localhost terlebih dahulu kita menjalankan apache pada xampp
    dan pastikan file WVdata.dat , getCalib.php berada pada file direktori local / htdocs.
    Hasilnya akan seperti ini:
    Percobaan 3 Visualisasi Line Chart
    Buat file bar.html tambahkan struktur HTML seperti berikut. Untuk library JavaScript bisa dicari di
    internet.
    Pada <body> terdapat tag <div> merupakan divisi atau wadah element html yang dapat ditata dengan
    CSS atau dimanipulasi dengan JavaScript, tag <script> merupakan pernyataan skrip yang merujuk
    pada file script eksternal (file flotr2.min.js. flotr2.js) melalui atribut src pada HTML.Var co2 dan var
    tempt merupakan kumpulan data yang nantinya akan divisualisasikan.

    Pada bagian ini, terdapat variabel kosong bernama zero. Kemudian, lanjut untuk membuat chartnya
    dengan code flotr.draw() dengan menentukan ukuran chartnya. Lalu, untuk mengisi data chart,
    membuat judul , membuat grid, membuat titik minimal dan maksimal y2axis dan yaxis.
    Hasil Output HTML akan seperti ini:

    Percobaan 4 : Visualisasi Pie Chart


    Buat file pie.html tambahkan struktur HTML seperti berikut. Untuk library JavaScript bisa dicari di
    internet.
    Pada <body> terdapat tag <div> merupakan divisi atau wadah element html yang dapat ditata dengan
    CSS atau dimanipulasi dengan JavaScript, tag <script> merupakan pernyataan skrip yang merujuk
    pada file script eksternal (file flotr2.min.js. flotr2.js) melalui atribut src pada HTML flotr2 js adalah
    Graph dan Chart untuk canvas di dalam JavaScript.
    Baris kode 18-21, berfungsi untuk manggambar data chart pie beserta labelnya,function pie ( ) untuk
    membuat Pie Chart.
    Hasil Output pie.html sebagai berikut:
    Latihan:
    A. Keliling dan Luas lingkaran

    Pada tag <head> berisi tag <title> dan <script>. Tag <title> untuk memberikan judul halaman Web,
    tag <script> element digunakan untuk menulis script, atau menyisipkan script (JavaScript) pada
    sisi client, tertulis secara langsung di dalam element <script>, atau merujuk sumber file eksternal
    berattribute src. function getArea( ) berfungsi untuk konversi otomatis nilai inputan user pada form
    jari-jari. Dan function getAround( ) untuk mendapatkan nilai yang akan ditampilkan pada keliling
    lingkaran menggunakan bahasa JavaScript. Pada tag <body> berisi tag <h1> dan <form>. Tag <h1>
    untuk memberikan judul paling penting pada halaman web yaitu”menghitung luas dan keliling
    Lingkaran”. Tag <form> untuk membuat formular inputan user. Fungsi ‘onblur’ adalah fungsi saat
    pengguna meninggalkan kolom input.
    Hasil Keliling&Luas .html sebagai berikut:

    Misalkan kita memberikan inputan pada form jari-jari sebesar 7 cm maka otomatis akan keluar output
    perhitungan dengan function getArea() dan getAround() sebesar 43.98cm dan 153.93cm.

    B. Kalibrasi

    Langakah pertama adalah kita membuat data kalibrasi dengan nama file calibration.dat
    Pada tag <head> berisi tag <title> dan <script>. Tag <title> untuk memberikan judul pada halaman
    web, tag <script> digunakan untuk menyematkan skrip sisi klien (JavaScript).Elemen <script>berisi
    pernyataan skrip, atau menunjuk ke file skrip eksternal melalui atribut src. Pada tag <body> berisi tag
    <h2> dan <form>, Tag <h2 biasa digunakan untuk membuat subheading/subjudul yaitu ‘Get
    Calibration Constant Statistics’. Tag <form>merupakan formular untuk inputan user. Fungsi action
    =”kalibrasi.php” adalah untuk mengambil file PHP kedalam HTML. Didalam kalibrasi.php terdapat
    form inputan user yg nantinya oleh fungsi action akan diambil dan ditampilkan pada html nya.$SN
    berfungsi untuk menginisialisasi variable inputan user. $inFile = “calibration.dat” berfungsi untuk
    variabel bernama "inFile" dan memberikan nilai string berdasarkan file"calibration.dat" ke variabel
    tersebut. Setelah itu apabila Station yang diinputkan user ada di dalam file data calibration.dat, akan
    ditaampilkan tabel konstanta kalibrasinya, namun apabila tidak ada di dalam data, maka akan
    menampilkan pesan ‘Couldn’t find this instrument.

    Hasil Output dari kalibrasi,html sebagai berikut:


    Tugas

    Buatlah program data visualisasi secara dinamis.

    <!DOCTYPE HTML> adalah deklarasi pada dokumen HTML5 yang berfungsi untuk memberikan
    informasi kepada web browser tentang versi dokumen HTML yang bersangkutan,<head> merupakan
    element HTML yang berfungsi sebagai tempat untuk meletakkan metadata yaitu informasi-informasi
    halaman web yang tidak ditampilkan pada halaman tersebut, <script> merupakan tag yag berfungsi
    untuk menyematkan script dari sisi klient (javascript) Elemen <script> berisi pernyataan skrip, atau
    menunjuk ke file skrip eksternal melalui atribut src. Window.onload = function () merupakan untuk
    mengeksekusi skrip setelah halaman web memuat semua konten sepenuhnya (termasuk gambar, file
    skrip, file CSS, dll.).

    Var digunakan untuk mendefinisikan variable ,kode diatas membuat canva chart js baru dan chart
    container. Kode diatas merupakan kode untuk membuat animasi ,judul, format isi , batas atas dan
    bawah yaitu X dan Y dan tampilan visualisasi dari data yang disimpan bertipe candlestick pada canvas
    .
    kode diatas merupakan kode untuk var data yag akan ditampilkan pada canvas berupa grafik
    candlestick. Berdasarkan kode diatas nama variable nya adalah (“ADRO”) merupakan inisialisasi dari
    nama Saham ADARO Energy dan Bayan Resource dengan parameter y value adalah berkonstanta
    rupiah dan x value bertipe date (tanggal/waktu), data point merupakan data dari harga saham Adaro
    dan Bayan berdasarkan Tahun, Bulan dan Tanggal (x) dan Harga Saham Pembuka,tertinggi, terendah
    dan penutup (y).
    Kode diatas merupakan kode Chart.render() merupakan method pada canvas yang berguna untuk
    merender atau membangun garfik chart. Function toogleDataSeries pada CanvasJS mendukung
    pengaturan visibilitas rangkaian data tertentu dalam bagan menggunakan properti
    "terlihat".tag</script> berfungsi sebagai tanda akhir dari element script, </head> berfungsi
    mengakhiri element head yg ditampilkan pada halaman website. <div> merupakan divisi atau
    container berinisialisasi id “chartContainer” dengan style = “height 300px max-width = 920px margin
    0px auto. Dan <scrip> element tersebut merujuk pada file eksternal yaitu
    scrhttps://canvasjs.com/assets/script/canvajs.min.js dan </html> merupakan penutup script html.
    Hasil Output

    Kita dapat melihat grafik candlestick sesuai data yg dimasukan pada var (harga saham x
    bulanan) , dimana ouput akan menghasilkan analisis sederhana apabila kursor didekatkan
    pada candlestick yang berisi harga saham pembukaan, tertinggi,terendah dan penutup
    berdasarkan bulan.
    Dikarekan grafik ini dinamis maka kita dapat memilik tampilan visualisasi grafik mana yang
    ingin kita tampilkan misalkan gambar outuput kedua saya hanya memilih grafik candlestick
    dari Harga saham “ADRO” , dan pada gambar output ketiga saya hanya memilih
    menampilkan grafik candlestick pada data Saham “BYAN” saja.

    Anda mungkin juga menyukai