Scribd
Upload
230 views

Tugas 3 - MSIM4401

Uploaded by

RABIATUL ADAWIYAH
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
230 views

Tugas 3 - MSIM4401

Uploaded by

RABIATUL ADAWIYAH
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

MSIM4401 - Tugas 3 / Indra Lingga Saputra - 043912294

Berikut jawaban saya untuk nomor 1

A. Source code pada folder src/services/EndPointAccess/index.ts


import axios from "axios";

export default class EndPointAccess {


theUrl: string;
constructor(url: string) {
this.theUrl = url;
}

async getRes() {
const response = await axios.get(this.theUrl);
return response;
}
}

B. Source code pada folder src/router/index.ts


import { createRouter, createWebHistory } from "@ionic/vue-router";
import { RouteRecordRaw } from "vue-router";
import HomePage from "../views/HomePage.vue";

const routes: Array<RouteRecordRaw> = [


{
MSIM4401 - Tugas 3 / Indra Lingga Saputra - 043912294

path: "/",
redirect: "/home",
},
{
path: "/home",
name: "Home",
component: HomePage,
},
];

const router = createRouter({


history: createWebHistory(import.meta.env.BASE_URL),
routes,
});

export default router;

C. Source code pada folder src/views/HomePage.vue


<template>
<ion-page>
<ion-content :fullscreen="true">
<div id="container">
<p><ion-button @click="ambilData">Refresh</ion-button></p>
<table class="center">
<tr v-for="item in dataUsers" :key="item.id">
<td>
<span class="top">Rank</span>
<span class="bottom">{{ item.rank }}</span>
</td>
<td style="text-align: left">
<span class="top">{{ item.name }}</span>
<span class="bottom">{{ item.symbol }}</span>
</td>
<td style="text-align: left">
<span class="top">USD</span>
<span class="bottom">{{ item.price_usd }}</span>
</td>
</tr>
</table>
</div>
</ion-content>
</ion-page>
</template>

<script lang="ts">
import { IonContent, IonPage, IonButton } from '@ionic/vue';
import { defineComponent } from 'vue';
import EndPointAccess from '@/services/EndPointAccess';
MSIM4401 - Tugas 3 / Indra Lingga Saputra - 043912294

let resData: any;

export default defineComponent({


name: 'HomePage',
data() {
return {
dataUsers: null
}
},
methods: {
ambilData() {
resData = new
EndPointAccess('https://api.coinlore.net/api/tickers/');
resData.getRes()
.then((response: any) => (this.dataUsers = response.data.data))
}
},
components: {
IonContent, IonPage, IonButton
}
})
</script>

<style scoped>
#container {
text-align: center;

#container strong {
font-size: 20px;
line-height: 26px;
}

#container p {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
}

#container a {
text-decoration: none;
}

.center {
margin-left: auto;
margin-right: auto;
}
MSIM4401 - Tugas 3 / Indra Lingga Saputra - 043912294

ion-button {
padding: 10px;
}

table {
width: 100%;
table-layout: fixed;
background-color: #fff2cc;
}

tr {
border: 2px solid #E5CC81;
border-bottom: thin;
padding: 5px;
}

span {
padding: 1px;
}

td {
padding: 2px;
margin-bottom: auto;
}

.top {
display: block;
font-size: smaller;
font-weight: 500;
}

.bottom {
display: block;
font-size: x-large;
font-weight: 500;
}
</style>

You might also like