Scribd Logo
Carica

Benvenuto in Scribd!

  • Irfan Maulana Akbar Bab7

    Caricato da

    IrfanMaulana
    30 visualizzazioni8 pagine
    ppk

    Titolo originale

    175150201111075 Irfan Maulana Akbar Bab7

    Copyright

    © © All Rights Reserved

    Formati disponibili

    DOCX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    ppk

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    30 visualizzazioni8 pagine

    Irfan Maulana Akbar Bab7

    Caricato da

    IrfanMaulana
    ppk

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 8

    LABORATORIUM PEMBELAJARAN ILMU KOMPUTER

    FAKULTAS ILMU KOMPUTER


    UNIVERSITAS BRAWIJAYA
    BAB : PEMROGRAMAN MOBILE – DATA ACCESS WITH AJAX
    NAMA : IRFAN MAULANA AKBAR
    NIM : 175150207111036
    TANGGAL : 12/11/2018
    ASISTEN : - ANANDA PRIATAMA
    - INDAH RATNA SARI

    TUGAS 1
    A. Soal
    1. Ubah kode pada aplikasi frontend (hasil dari tugas Bab 7)
    sehingga dapatmengkonsumsi data JSON hasil dari tugas Bab 6!
    2. Build kode tersebut menggunakan phonegap menjadi aplikasi
    android (.apk)!
    3. Install pada smartphone anda!
    4. Screenshot hasil dari program anda!
    5. Jelaskan kode yang telah anda ubah!
    B. Source Code

    app.js
    1 var
    2 dataObject={"nim":"125060400111044","nama":"Is
    3 yana Sarasvati",
    "jurusan":"Teknik
    Informatika","fakultas":"Filkom","alamat":"Jl.
    Suka Nyanyi","noHP":"081234567890"};
    var Application = {
    initApplication : function(){
    $(window).load('pageinit','#page-
    4 one',function(){
    5 Application.initShowMhs();
    6 })
    $(document).on('click','#detail-
    7 mhs',function(){
    8 var nim = $(this).data('nimmhs');
    9
    Application.initShowDetailMhs(nim);
    10 })
    },
    11 initShowMhs : function(){
    12
    13 $.ajax({
    14 url : 'http://lapidary-
    15 stream.000webhostapp.com/praktikumppk/bab7/php
    16 /web_service.php',
    17 type : 'GET',
    18 dataType: 'json',
    19 beforeSend : function(){
    20 $.mobile.loading('show', {
    21 text : 'please wait
    22 while retrieving data...',
    textVisible : true
    23 });
    24 },
    25 success :
    26 function(dataObject){
    for(var i = 0; i <
    27 dataObject.length; i++){
    var appendList =
    '<li><a href="#page-two?id=' +
    28 dataObject[i].NIM+'"
    29 target="_self" id="detail-mhs" data-nimmhs="'+
    30
    dataObject[i].NIM+'"><h2>' +
    31 dataObject[i].Nama+'</h2><p>'+dataObject[i].NI
    M+
    32
    '</p><p><b>'+dataObject[i].Fakultas+'</b></P><
    33 /a></li>';
    $('#list-
    34 mhs').append(appendList);
    $('#list-
    35 mhs').listview('refresh');
    }
    36 },
    37 complete : function(){
    38 $.mobile.loading('hide');
    39 }
    40 });
    41 },
    42 initShowDetailMhs : function(nim){
    43 $.ajax({
    44 url : 'http://lapidary-
    45 stream.000webhostapp.com/praktikumppk/bab7/php
    46 /web_service.php',
    47 type : 'GET',
    48 beforeSend : function(){
    49 $.mobile.loading('show', {
    text : 'please wait
    50 while retrieving data...',
    51 textVisible : true
    52 });
    53 },
    success :
    54 function(dataObject){
    for(var i =
    55 0;i<dataObject.length;i++){
    if(dataObject[i].NIM
    56 == nim){
    $('#p-nim,#p-
    57 nama,#p-jurusan,#p-fakultas,#p-alamat,#p-
    nohp').empty();
    $('#p-
    58 nim').append('<b>NIM:
    </b>'+dataObject[i].NIM);
    $('#p-
    59 nama').append('<b>Nama:
    </b>'+dataObject[i].Nama);
    $('#p-
    60 jurusan').append('<b>Jurusan:
    </b>'+dataObject[i].Jurusan) ;
    $('#p-
    61 fakultas').append('<b>Fakultas:
    </b>'+dataObject[i].Fakultas);
    $('#p-
    62 alamat').append('<b>Alamat:
    </b>'+dataObject[i].Alamat);
    $('#p-
    63 nohp').append('<b>NoHp:
    </b>'+dataObject[i].NoHp);
    }
    64 }
    65 },
    66 complete : function(){
    67 $.mobile.loading('hide');
    68 }
    69 })
    70 }
    71 };
    72

    Index.html
    1 <!DOCTYPE <!DOCTYPE html>
    2 <html>
    3 <head>
    4 <title>Aplikasi Daftar Mahasiswa</title>
    5 <meta charset="utf-8" />
    6 <meta http-equiv="X-UA-Compatible"
    content="IE=edge" />
    7 <meta http-equiv="Content-Security-Policy"
    content="default-src *; style-src * 'unsafe-
    inline'; script-src * 'unsafe-inline'; media-
    src *">
    8 <meta name="viewport"
    content="width=device-width, initial-scale=1"
    />
    9 <link
    rel="stylesheet"
    type="text/css"
    media="screen"
    href="css/jquery.mobile-1.4.5.min.css"
    />
    10 <script
    11
    12 src="js/jquery-1.11.1.js"
    13 type="text/javascript"
    14 ></script>
    15 <script
    16 src="js/jquery.mobile-1.4.5.min.js"
    17 type="text/javascript"
    18 ></script>
    19 </head>
    20 <body>
    21 <div data-role="page" id="page-one">
    22 <div data-role="header"><h1>Daftar
    Mahasiswa</h1></div>
    23 <div role="main" class="ui-content">
    24 <ul
    25 id="list-mhs"
    26 data-role="listview"
    27 data-inset="true"
    28 data-filter="true"
    29 ></ul>
    30 </div>
    31 </div>
    32 <div data-role="page" id="page-two" data-
    theme="b">
    33 <div data-role="header"><h1>Detail
    Mahasiswa</h1></div>
    34 <div role="main" class="ui-content"
    id="main2">
    35 <p id="p-nim"></p><br>
    36 <p id="p-nama"></p><br>
    37 <p id="p-jurusan"></p><br>
    38 <p id="p-fakultas"></p><br>
    39 <p id="p-alamat"></p><br>
    40 <p id="p-nohp"></p><br>
    41 </div>
    42 </div>
    43 <script src="js/app.js"
    type="text/javascript"></script>
    44 <script>
    Application.initApplication();
    45 </script>
    46 </body>
    47 </html>

    Config.xml
    1 <?xml version='1.0' encoding='utf-8'?>
    2
    <widget id="com.phonegap.helloworld" version="1.0.0"
    xmlns="http://www.w3.org/ns/widgets"
    3 xmlns:gap="http://phonegap.com/ns/1.0">
    <gap:plugin name="cordova-plugin-whitelist"
    4 source="npm" />
    5
    6 <allow-navigation href="http://*/*" />
    7 <allow-intent href="https://*/*" />
    8
    9 <name>tes</name>
    10 <description>
    11 A blank PhoneGap app.
    12 </description>
    <author email="support@phonegap.com"
    13 href="http://phonegap.com">
    14 PhoneGap Team
    15 </author>
    16 <content src="index.html" />
    17 <access origin="*" />
    </widget>
    C. Screenshot
    1.Tampilan ketika apk diinstall pada smartphone

    2. ketika mengklik salah satu menu


    D. Penjelasan

    Kode yang diubah ada pada index.html, app.js, dan juga config.xml,
    pada index.html diubah sesuai yang ada pada perintah di modul dan
    ditambahkan kode <meta http-equiv="Content-Security-
    Policy" content="default-src *; style-src * 'unsafe-
    inline'; script-src * 'unsafe-inline'; media-src *">
    agar program dapat dibuild dengan phonegap, sementara di app.js saya
    menambahkan agar ajax dapat membaca array dari file php web_service
    yang sudah kita buat, sementara pada config.xml menambahkan kode
    <gap:plugin name="cordova-plugin-whitelist"
    source="npm" />
    <allow-navigation href="http://*/*" />

    <allow-intent href="https://*/*" />

    untuk keperluan build phonegap.

    Potrebbero piacerti anche