Modul Praktikum 5

Modul Praktikum Mobile
Programming
Seri 5:
Membaca Data Array
Online, FAB dan Card
Expandable
&
Framework7 Apache Cordova
Moh. Anshori Aris Widya, M.Kom

(Semester Ganjil 2020)
Modul 5 | Mobile Programming
Praktikum Membaca Data Array Online, FAB dan Card Expandable

A. Pengantar
Pada modul kali ini akan dibahas mengenai cara membuat aplikasi yang dapat membaca data array sederhana. Array tersebut ditampilkan berupa model card yang tersusun secara vertikal seperti kebanyakan konsep pembacaan data
di android.
B. Praktikum 1
Aplikasi yang dibangun hanya membaca array sederhana. Langkah – langkah yaitu adalah sebagai berikut :
1. Buat folder mobile3 di htdocs.
2. Copy folder core, css, fonts, img dan js dari folder mobile2 (folder praktikum sebelumnya) kemudian paste di folder mobile3.
Sehingga struktur didalam folder mobile3 seperti gambar disamping.
3. Buat file index.html didalam folder mobile3. Kemudian tambahkan syntax berikut kedalam file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#2196f3">
<link rel="stylesheet" href="core/css/framework7.bundle.min.css">
<link rel="stylesheet" href="css/app.css">
<link rel="apple-touch-icon" href="img/f7-icon-square.png">
<link rel="icon" href="img/f7-icon.png">
</head>
<body>
<div id="app">
<div class="statusbar"></div>
<div class="view view-main view-init safe-areas" data-master-detail-breakpoint="800" data-url="/">
<div class="page">
<div class="navbar" style="background: #43CBFF; color: white">
<div class="navbar-inner">
<div class="title sliding">Praktikum 3</div>
</div>
</div>
<div class="page-content">
</div>
</div>
</div>
</div>
<script src="core/js/framework7.bundle.min.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/routes.js"></script>
<script src="js/app.js"></script>
</body>
</html>
4. Karena konsep kita kali ini adalah membaca data array dan memunculkannya pada sebuah object Card, maka kita harus memiliki data array-nya terlebih dahulu. Data array berisi data daftar film yang telah ditempatkan secara online
di https://drive.crazycoding.info/movie.js (jika ingin membuktikan silahkan link tersebut dijalankan terlebih dahulu pada browser). Sehingga langkah berikutnya adalah menempatkan link tersebut untuk
diinclude-kan pada sistem yang dibangun. Tambahkan syntax yang berwarna biru
<script src="js/app.js"></script>
<script src="https://drive.crazycoding.info/movie.js"></script>
</body>
5. Berikutnya adalah mempelajari struktur dari Card. Card yang digunakan adalah jenis Styled Card akan tetapi nanti tanpa footer (dimodifikasi). Silahkan melihat pada cards.html pada package Framework7 atau melihat pada
dokumentasi online Framework7.
6. Tambahkan syntax berikut diantara tag <div class="page-content">……</div>. Syntax berikut digunakan untuk menampung Card hasil looping data array.
<div id="blokdata">
</div>
1 | Universitas KH. A. Wahab Hasbullah | 2020

7. Langkah berikutnya adalah membuat syntax javascript yang digunakan untuk me-looping data array online. Setiap data yang dibaca akan dibentuk dalam interface Card sehingga akan menghasilkan Card sebanyak data yang
dilooping. Untuk merealisasikan hal tersebut, maka dibuat sebuah function yang langsung dijalankan saat aplikasi pertama kali jalan (tanpa pemicu event). Tambahkan syntax yang berwana biru.
<script src="https://drive.crazycoding.info/movie.js"></script>
<script>
</script>
</body>
8. Buat function javascript dengan nama ambildata dan letakkan diantara tag <script>……</script>. Syntax sebagai berikut
function ambildata(){
var hasil = "";
var x;
for(x in film){
judul = film[x].judul;
pemain = film[x].pemain;
tahun = film[x].tahun;
rating = film[x].rating;
sinopsis = film[x].sinopsis;
sampul = film[x].cover;
hasil += "<div class='card demo-card-header-pic'><div valign='bottom' class='card-header' style='background-image:url("+ sampul +
")'></div><div class='card-content card-content-padding'><p class='date'>" + judul + "</p><p style='text-align: justify;'>"
+ sinopsis.substr(0, 125) + ".....</p></div></div>";
}
$("#blokdata").html(hasil);
}
9. Langkah berikutnya adalah memanggil function ambildata agar langsung dijalankan saat aplikasi dijalankan. Buat pemanggilan
function javascript dalam tag javascript. Tambahkan syntax yang berwarna biru
<script>
ambildata();
function ambildata(){
10. Silahkan dicoba pada mode mobile Google Chrome pada posisi jaringan online (karena data array diletakkan pada server hosting).
Jika berhasil akan tampil seperti gambar disamping

C. Praktikum 2
Praktikum selanjutnya adalah memodifikasi hasil pada prakitkum diatas dengan menambahkan pilihan tampilan data. Jika diatas menggunakan Card, maka nanti ada 2 pilihan yang disiapkan yaitu pilihan bentuk Card (default) seperti
diatas dan bentuk Card Expandable. Untuk bentuk pilihan dapat menggunakan interface FAB (Floating Action Button). Berikut langkah-langkahnya
1. Tambah syntax untuk membuat FAB berikut ke dalam tag <div class=”page”>……</div> sehingga sejajar dengan tag <div class=”navbar”>……</div> maupun <div class=”page-content”>……</div> sesuai struktur
diatas. Untuk melihat syntax yang digunakan untuk membuat FAB bisa melihat di file fab.html pada package Framework7 atau pada dokumentasi online Framework7. Syntax FAB sebagai berikut:
<div class="fab fab-right-bottom">
<a href="#">
<i class="icon f7-icons">bars</i>
<i class="icon f7-icons">viewfinder</i>
</a>
<div class="fab-buttons fab-buttons-top">
<a href="" class="fab-label-button fab-close">
<span>1</span><span class="fab-label">Card</span>
</a>
<a href="" class="fab-label-button fab-close">
<span>2</span><span class="fab-label">Card Expand</span>
</a>
</div>
</div>
Syntax diatas akan menghasilkan sesuai gambar disamping

2. Langkah berikutnya adalah memodifikasi mekanisme function ambildata dan cara pemanggilannya. Hal ini harus
dilakukan karena saat ini terdapat 2 model layout ambil data yaitu model Card dan Card Expandable. Kedua jenis ini
menggunakan function yang sama sehingga dibutuhkan sedikit modifikasi. Tambahkan syntax yang berwarna biru

function ambildata(jenis){
var hasil = "";
var x;
for(x in film){
judul = film[x].judul;
pemain = film[x].pemain;
tahun = film[x].tahun;
rating = film[x].rating;
sinopsis = film[x].sinopsis;
sampul = film[x].cover;
if(jenis == "card"){
hasil += "<div class='card demo-card-header-pic'><div valign='bottom' class='card-header' style='background-image:url("+ sampul
+ ")'></div><div class='card-content card-content-padding'><p class='date'>" + judul + "</p><p style='text-align: justify;'>"
+ sinopsis.substr(0, 125) + ".....</p></div></div>";
}else{
hasil += "<div class='card card-expandable'><div class='card-content'><div style='background: url("+ sampul +") no-
repeat center top; background-size: cover; height: 400px'><div class='card-header text-color-
white'></div><a href='#' class='link card-close card-opened-fade-in color-
white' style='position: absolute; right: 15px; top: 15px'><i class='icon f7-
icons'>xmark_circle_fill</i></a></div><div class='card-content-
padding'><p>"+ sinopsis +"</p><a href='#' class='button button-fill button-round button-large card-
close'>Close</a></div></div></div>";
}
}
$("#blokdata").html(hasil);
}

3. Kemudian langkah berikutnya memodifikasi cara pemanggilan function ambildata. Tambahkan syntax yang berwarna biru
<script>
ambildata("card");
function ambildata(jenis){
4. Langkah berikutnya adalah memberikan Event pada menu FAB. Event dihubungkan dengan function ambildata
yang telah dimodifikasi sebelumnya. Tambahkan syntax yang berwarna biru
<div class="fab fab-right-bottom">
<a href="#">
<i class="icon f7-icons">bars</i>
<i class="icon f7-icons">viewfinder</i>
</a>
<div class="fab-buttons fab-buttons-top">
<a href="" class="fab-label-button fab-close" onclick="ambildata('card')">
<span>1</span><span class="fab-label">Card</span>
</a>
<a href="" class="fab-label-button fab-close" onclick="ambildata('carde')">
<span>2</span><span class="fab-label">Card Expand</span>
</a>
</div>
</div>
5. Silahkan dicoba jika benar maka akan menghasilkan tampilan di bawah


Modul Praktikum 5

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Praktikum 5

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul Praktikum Mobile

Moh. Anshori Aris Widya, M.Kom

Praktikum Membaca Data Array Online, FAB dan Card Expandable

1 | Universitas KH. A. Wahab Hasbullah | 2020

2 | Universitas KH. A. Wahab Hasbullah | 2020

Syntax diatas akan menghasilkan sesuai gambar disamping

3 | Universitas KH. A. Wahab Hasbullah | 2020

4 | Universitas KH. A. Wahab Hasbullah | 2020

5. Silahkan dicoba jika benar maka akan menghasilkan tampilan di bawah

5 | Universitas KH. A. Wahab Hasbullah | 2020

6 | Universitas KH. A. Wahab Hasbullah | 2020

Anda mungkin juga menyukai