Tutorial Buat Aplikasi Bola Keren Terlengkap

Loading...

Halo sobat lautan, semoga sehat selalu ya.
Libur sebentar ya lautan, mengisi kegembiraan diawal tahun 2020. 1 Dekade telah berlalu, dan tak terasa lautan sebentar lagi akan berumur tiga tahun. Pahit manisnya dunia blogger IT, lautan sempat rasakan. Mulai dari keterima Adsense, hingga harus menerima kenyataan bahwa Adsense hangus. Jujur lautan, sempat menyerah untuk terus berkarya, namun, niat lautan yang pertama adalah untuk berkarya menulis trik IT. Dan niat itu, tidak akan pernah luntur. 


Mengawali dekade yang baru, lautan akan berikan tutorial yang lumayan panjang, tetapi sangat keren. Yaps, lautan akan berikan tutorial lengkap membuat aplikasi bola keren. Proses pengerjaan kali ini, akan menggunakan FrameWork Ionic. Sebuah framework yang digunakan untuk membuat aplikasi mobile, dengan bahasa yang mirip digunakan untuk Android Studio, yakni Java. Platform yang akan kita gunakan adalah Angular. 

Sebenarnya, ada banyak platform yang bisa digunakan, seperti React, JavaScript, dan Vue. Hmm, kalau dibilang platform, mungkin beberapa programmer tidak akan setuju. Atau memang tidak akan setuju. Tapi, maksud dari lautan mengatakan itu platform, untuk membedakan antara "framework" dengan "framework". Ngerti lah ya...

Oke langsung saja, aplikasi yang akan kita bangun kali ini, bernama Arefanion.


Aplikasi bertemakan berita sepakbola dengan tata gaya bahasa anak millenial. Anda mungkin akan terbayang dengan PanditFootball.com, atau aplikasi sejenis, tapi ini beda, karena apa ?, karena yang bikin adalah lautan.. :D.

  • Hal pertama, yang mesti dilakukan adalah install elemen-elemen ionic.
Ada 4 elemen yang harus dimiliki, yakni NodeJS, Java JDK, Apache Ant, dan Android SDK. NodeJS diinstall karena memiliki fungsi mengeksekusi aplikasi server, atau dengan ini, kita bisa akses perintah npm

Install Java JDK, berguna untuk proses compile aplikasi ionic. Apache ant, hanya perlu didonwload lalu diekstrak di partisi C:. Lalu yang terakhir adalah install Android SDK. Anda bisa mendapatkannya dengan download dan install Android SDK saja, atau bisa sekalian install Android Studio. Install Android Studio, otomatis Android SDK juga ikut terdownload dan terinstall.
  • Lakukan Path Enviroment
Untuk dapat mengakses fitur Path Enviroment, silahkan tekan Windows + E, lalu klik kanan pada my computer. Pilih Properties, lalu pilih Advanced system settings. Akan muncul jendela baru, pilihlah tombol Enviroment Variabel.


Klik pada variabel PATH, edit dan tambahkan C:\Users\x240\AppData\Roaming\npm.


Untuk Path Java JDK, pilih pada menu System variables, new dan tambahkan persis dengan gambar dibawah ini


Ingat, Path adalah jalur, jalur yang diminta adalah jalur file elemen ionic. Setelah itu, pada Path dimenu pertama (User Variabel for nama_laptop_anda), tambahkan bin tepat diPath. Cara seperti ini;


Setelah itu adalah memasukan Apache Ant. Sama seperti memasukkan Path NodeJS dan Java JDK, masukkan Path di Path.


Selanjutnya adalah memasukkan Path Android SDK. Klik New, pada menu di System variables, lalu masukkan seperti digambar;


Pada Path dimenu pertama, pilih Path lalu Edit, New, dan masukkan atau ketik C:\android sdk\platform-tools.

Setelah melakukan Path Enviroment, langkah selanjutnya adalah pengecekkan. Jika anda gagal, cobalah untuk memasang Path npm saja pada Path menu pertama.
  • Pengecekkan komponen
Untuk mengecek, gunakan tombol Windows + R, lalu ketiklah CMD. Jalankan perintah npm -v untuk mengecek apakah npm telah berhasil dipasang.


Cek apakah Java JDK telah berhasil dipasang atau tidak..Caranya ikutin gambar dibawah;


Gunakan perintah ant-v, untuk cek versi Apache Ant yang dipasang..
.
  • Install Ionic dan membuat Page Ionic
Jalankan perintah npm install -g ionic. Tunggu beberapa saat, lalu jika ada pilihan untuk platform, Angular. Tunggu beberapa saat, karena memang proses ini terbilang lama.

Setelah berhasil, anda dapat mengecek, versi ionic berapa yang digunakan. Caranya cukup dengan perintah ionic.


Oke, lautan lanjut. Disini ada sedikit materi mengenai template. Template adalah kerangka aplikasi yang sudah disiapkan. Ada 3 template yang bisa digunakan, yakni blank, tabs, dan sidemenu. Anda dapat menggunakan 1, 2, atau bahkan 3 template bersamaan. Namun, pada tutorial kali ini, lautan menggunakan template tabs.

Berikut adalah perintahnya,

ionic start arefanion tabs.

Tunggu beberapa saat, sampai proses selesai. Arefanion adalah nama aplikasi yang kita buat. Setelah itu berpindah pada nama aplikasi yang kita buat. Perintahnya adalah cd .\arefanion

Masukkan perintah ionic serve, untuk menjalankan framework ionic. 


Setelah itu, browser Chrome (default sistem) akan segera terbuka dengan menampilkan framework Ionic bergaya tabs.


Tekan Ctrl + C, pada CMD npm, lalu pilih Yes. Berikan perintah lengkap ionic generate page namafile. Disini, kita akan membuat 13 page, yakni arefa-artikel, arefalisis, artikel-ina, artikel-indonesia, home, indonesia, iw1, j, sejarah, sejarah-artikel, sejarah-t, transfer.

Anda akan tau langsung begitu melihat hasil tampilannya. O iya untuk menampilkan halaman ionic seperti gambar diatas, gunakan tombol Ctrl+Shift+I. 

Buka Folder Arefanion anda, dan tampilannya akan seperti gambar ini (struktur foldernya, App, ada di src, lalu app)



  • Coding
Selanjutnya adalah bagian koding. Mari kita buka satu-satu, nanti anda juga akan paham sendiri.

Page tabs.page.html


<ion-tabs>



  <ion-tab-bar slot="bottom">

    <ion-tab-button tab="tab1">

      <ion-icon name="home"></ion-icon>

      <ion-label>Home</ion-label>

    </ion-tab-button>



    <ion-tab-button tab="tab2">
           <ion-icon ios="ios-list-box" md="md-list-box"></ion-icon>
      <ion-label>J&K</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Transfer</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="indonesia" [routerLink]="['/','indonesia']">
        <ion-icon ios="ios-flag" md="md-flag"></ion-icon>
      <ion-label>Indonesia</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="arefalisis" [routerLink]="['/','arefalisis']">
    <ion-icon ios="ios-analytics" md="md-analytics"></ion-icon>
      <ion-label>Arefalisis</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="sejarah" [routerLink]="['/','sejarah']">
<ion-icon ios="ios-book" md="md-book"></ion-icon>
      <ion-label>Sejarah</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

Page tab1.page.html

<style>
    section {
        margin-left:28px;
    }
</style>
<ion-header>
    <ion-toolbar>
        <ion-title>
            Home
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
        <ion-card class="welcome-card">
            <img src="/assets/logo.png" alt="" />
<ion-searchbar></ion-searchbar>
        </ion-card>
        <ion-card class="welcome-card">
            <img src="/assets/yuhu.PNG" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
        </ion-card>
        <br>
   <ion-card class="welcome-card">
            <img src="/assets/Indo2.PNG" [routerLink]="['/','artikel-ina']"alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
        </ion-card>
        <br>
        <ion-card class="welcome-card">
            <img src="/assets/wahyu.PNG"  [routerLink]="['/','sejarah-t']" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
        </ion-card>
</ion-content>

Page tab2.page.html

<style>
    table {
        margin-left:30px;
    }
    tr {
        vertical-align:middle;
    }
    p {
        margin-left:5px;
        font-size:20px;
    }

</style>
<ion-header>
  <ion-toolbar>
    <ion-title>
      Jadwal dan Klasemen
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <br>
    <p><b>Jadwal</b></p>
<table border="1" text-align="center" width="350px">
  <tr style="height:100px">
    <td>Sabtu <br>14/12/2019
    <br>02:30 WIB</td>
    <td>Liga Jerman<br>
    Hoffenheim vs Augsburg</td>
    <td>Fox Sports</td>
  </tr>
  <tr style="height:100px">
    <td>Sabtu <br>14/12/2019
    <br>02:30 WIB</td>
    <td>Liga Jerman<br>
    Hoffenheim vs Augsburg</td>
    <td>Fox Sports</td>
  </tr>
    <tr style="height:100px">
    <td>Sabtu <br>14/12/2019
    <br>02:30 WIB</td>
    <td>Liga Jerman<br>
    Hoffenheim vs Augsburg</td>
    <td>Fox Sports</td>
  </tr>
    <tr style="height:100px">
    <td>Sabtu <br>14/12/2019
    <br>02:30 WIB</td>
    <td>Liga Jerman<br>
    Hoffenheim vs Augsburg</td>
    <td>Fox Sports</td>
  </tr>
    <tr style="height:100px">
    <td>Sabtu <br>14/12/2019
    <br>02:30 WIB</td>
    <td>Liga Jerman<br>
    Hoffenheim vs Augsburg</td>
    <td>Fox Sports</td>
  </tr>
</table>
<p><b>Klasemen</b></p>
   <ion-card class="welcome-card">
            <img src="/assets/LigaInggris.PNG" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
   </ion-card>
<br><br>
   <ion-card class="welcome-card">
            <img src="/assets/LigaSpanyol.PNG" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
   </ion-card>
<br><br>
   <ion-card class="welcome-card">
            <img src="/assets/LigaItalia.PNG" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
   </ion-card>
<br><br>
   <ion-card class="welcome-card">
            <img src="/assets/LigaJerman.PNG" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
   </ion-card>
<br><br>
   <ion-card class="welcome-card">
            <img src="/assets/LigaPrancis.PNG" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
   </ion-card>
</ion-content>

Page tab3.page.html

<style>
    p {
        margin-left:5px;
        font-size:20px;
    }

</style>
<ion-header>
  <ion-toolbar>
    <ion-title>
      Transfer
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
<p><b>List Transfer Lengkap</b></p>
<p>Liga Primer Inggris:<br>
1.Harry Maguire (Leicester City) ke Manchester United <br>
2. Daniel James (Swansea) ke Manchester United        <br>
3. Aaron Wan Bissaka (Crystal Palace) ke Manchester United  <br>
4. Christian Pulisic (nama klub lama) ke Chelsea                 <br>
5. Mateo Kovacic (Real Madrid) ke Chelsea <br>
6. Nicolas Pepe (Lille) ke Arsenal <br>
7. David Luiz (Chelsea) ke Arsenal      <br>
8. Joao Cancelo (Juventus) ke Manchester City  <br>
9. Rodri (Atletico Madrid) ke Manchester City <br>
10. Dani Ceballos (Real Madrid) ke Arsenal <br>
11. Moise Kean (Juventus) ke Everton <br>
12. Tanguy Ndombele (Olympique Lyon) ke Tottenham Hotspur <br>

</p>

<p>La Liga Spanyol: <br>

1. Eden Hazard (Chelsea) ke Real Madrid  <br>
2. Luka Jovic (Eintracht Frankfurt) ke Real Madrid  <br>
3. James Rodriguez (Bayern Muenchen) ke Real Madrid      <br>
4. Ferland Mendy (Olympique Lyon) ke Real Madrid <br>
5. Rodrygo Goes (Santos FC) ke Real Madrid <br>
6. Eder Militao (FC Porto) ke Real Madrid       <br>
7. Frenkie de Jong (Ajax Amsterdam) ke Barcelona     <br>
8. Antoine Griezmann (Atletico Madrid) ke Barcelona       <br>
9. Joao Felix (Benfica) ke Atletico Madrid                     <br>
10. Alvaro Morata (Chelsea) ke Atletico Madrid                      <br>
11. Kieran Trippier (Tottenham Hotspur) ke Atletico Madrid               <br>
12. Wissam Ben Yedder (AS Monaco) ke Sevilla <br>
13. Nabil Fekir (Olympique Lyon) ke Real betis    <br>
</p>

<p>
Serie A Italia:          <br>

1. Matthijs de Ligt (Ajax Amsterdam) ke Juventus  <br>
2. Aaron Ramsey (Arsenal) ke Juventus <br>
3. Gonzalo Higuain (Chelsea) ke Juventus   <br>
4. Adrien Rabiot (Paris Saint-Germain) ke Juventus <br>
5. Danilo (Manchester City) ke Juventus <br>
6. Gianluigi Buffon (Paris Saint-Germain) ke Juventus <br>
7. Romelu Lukaku (Manchester United) ke Inter Milan <br>
8. Alexis Sanchez (Manchester United) ke Inter Milan     <br>
9. Diego Godin (Atletico Madrid) ke Inter Milan <br>
10. Ante Rebic (Eintracht Frankfurt) ke AC Milan     <br>
11. Fernando Llorente (Tottenham Hotspur) ke Napoli <br>
12. Chris Smalling (Manchester United) ke AS Roma <br>
13. Henrikh Mkhitaryan (Arsenal) ke AS Roma <br>
14. Franck Ribery (Bayern Muenchen) ke Fiorentina  <br>
15. Radja Nainggolan (Inter Milan) ke Cagliari          <br>
</p>
<p>
Bundesliga Jerman:                                          <br>

1. Philippe Coutinho (Barcelona) ke Bayern Muenchen <br>
2. Ivan Perisic (Inter Milan) ke Bayern Muenchen         <br>
3. Lucas Hernandez (Atletico Madrid) ke Bayern Muenchen       <br>
4. Benjamin Pavard (VfB Stuttgart) ke Bayern Muenchen <br>
5. Paco Alcacer (Barcelona) ke Borussia Dortmund <br>
6. Mats Hummels (Bayern Muenchen) ke Borussia Dortmund <br>
7. Julian Brandt (Bayer Leverkusen) ke Borussia Dortmund <br>

</p>
<p>
Ligue 1 Prancis:  <br>

1. Mauro Icardi (Inter Milan) ke Paris Saint-Germain <br>
2. Ander Herrera (Manchester United) ke Paris Saint-Germain <br>
3. Keylor Navas (Real Madrid) ke Paris Saint-Germain <br>
</p>
</ion-content>

Page home.page.html

<style>
    section {
        margin-left:28px;
    }
</style>
<ion-header>
    <ion-toolbar>
        <ion-title>
            Home
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
        <ion-card class="welcome-card">
            <img src="/assets/logo.png" alt="" />
            <ion-searchbar></ion-searchbar>
        </ion-card>
        <ion-card class="welcome-card">
            <img src="/assets/yuhu.PNG" [routerLink]="['/','transfer']" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
        </ion-card>
        <br>
        <ion-card class="welcome-card">
            <img src="/assets/Indo2.PNG" [routerLink]="['/','artikel-ina']"alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
        </ion-card>
        <br>
        <ion-card class="welcome-card">
            <img src="/assets/wahyu.PNG"  [routerLink]="['/','sejarah-t']" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
        </ion-card>
</ion-content>
<ion-footer>
  <ion-toolbar>
  <ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="" [routerLink]="['/','home']">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="j" [routerLink]="['/','j']">
           <ion-icon ios="ios-list-box" md="md-list-box"></ion-icon>
      <ion-label>J&K</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="transfer" [routerLink]="['/','transfer']">
      <ion-icon name="send"></ion-icon>
      <ion-label>Transfer</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="indonesia" [routerLink]="['/indonesia']">
        <ion-icon ios="ios-flag" md="md-flag"></ion-icon>
      <ion-label>Indonesia</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="arefalisis" [routerLink]="['/','arefalisis']">
    <ion-icon ios="ios-analytics" md="md-analytics"></ion-icon>
      <ion-label>Arefalisis</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="sejarah" [routerLink]="['/','sejarah']">
<ion-icon ios="ios-book" md="md-book"></ion-icon>
      <ion-label>Sejarah</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

  </ion-toolbar>
</ion-footer>

Page indonesia.page.html

<style>
    section {
        margin-left:28px;
    }
</style>
<ion-header>
  <ion-toolbar>
    <ion-title>Indonesia</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
            <ion-card class="welcome-card">
            <img src="/assets/logo.png" alt="" />
<ion-searchbar></ion-searchbar>
</ion-card>
             <ion-card class="welcome-card">
            <img src="/assets/Indo.PNG"  [routerLink]="['/','artikel-indonesia']" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
        </ion-card>
        <br>
        <ion-card class="welcome-card">
            <img src="/assets/Indo2.PNG"  [routerLink]="['/','artikel-ina']" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
        </ion-card>

</ion-content>
<ion-footer>
  <ion-toolbar>
  <ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="" [routerLink]="['/','home']">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="j" [routerLink]="['/','j']">
           <ion-icon ios="ios-list-box" md="md-list-box"></ion-icon>
      <ion-label>J&K</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="transfer" [routerLink]="['/','transfer']">
      <ion-icon name="send"></ion-icon>
      <ion-label>Transfer</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="indonesia" [routerLink]="['/indonesia']">
        <ion-icon ios="ios-flag" md="md-flag"></ion-icon>
      <ion-label>Indonesia</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="arefalisis" [routerLink]="['/','arefalisis']">
    <ion-icon ios="ios-analytics" md="md-analytics"></ion-icon>
      <ion-label>Arefalisis</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="sejarah" [routerLink]="['/','sejarah']">
<ion-icon ios="ios-book" md="md-book"></ion-icon>
      <ion-label>Sejarah</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

  </ion-toolbar>
</ion-footer>

Page j.page.html

<style>
    table {
        margin-left:30px;
    }
    tr {
        vertical-align:middle;
    }
    p {
        margin-left:5px;
        font-size:20px;
    }

</style>
<ion-header>
  <ion-toolbar>
    <ion-title>
      Jadwal dan Klasemen
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <br>
    <p><b>Jadwal</b></p>
<table border="1" text-align="center" width="350px">
  <tr style="height:100px">
    <td>Sabtu <br>14/12/2019
    <br>02:30 WIB</td>
    <td>Liga Jerman<br>
    Hoffenheim vs Augsburg</td>
    <td>Fox Sports</td>
  </tr>
  <tr style="height:100px">
    <td>Sabtu <br>14/12/2019
    <br>02:30 WIB</td>
    <td>Liga Jerman<br>
    Hoffenheim vs Augsburg</td>
    <td>Fox Sports</td>
  </tr>
    <tr style="height:100px">
    <td>Sabtu <br>14/12/2019
    <br>02:30 WIB</td>
    <td>Liga Jerman<br>
    Hoffenheim vs Augsburg</td>
    <td>Fox Sports</td>
  </tr>
    <tr style="height:100px">
    <td>Sabtu <br>14/12/2019
    <br>02:30 WIB</td>
    <td>Liga Jerman<br>
    Hoffenheim vs Augsburg</td>
    <td>Fox Sports</td>
  </tr>
    <tr style="height:100px">
    <td>Sabtu <br>14/12/2019
    <br>02:30 WIB</td>
    <td>Liga Jerman<br>
    Hoffenheim vs Augsburg</td>
    <td>Fox Sports</td>
  </tr>
</table>
<p><b>Klasemen</b></p>
   <ion-card class="welcome-card">
            <img src="/assets/LigaInggris.PNG" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
   </ion-card>
<br><br>
   <ion-card class="welcome-card">
            <img src="/assets/LigaSpanyol.PNG" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
   </ion-card>
<br><br>
   <ion-card class="welcome-card">
            <img src="/assets/LigaItalia.PNG" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
   </ion-card>
<br><br>
   <ion-card class="welcome-card">
            <img src="/assets/LigaJerman.PNG" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
   </ion-card>
<br><br>
   <ion-card class="welcome-card">
            <img src="/assets/LigaPrancis.PNG" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
   </ion-card>
</ion-content>
<ion-footer>
  <ion-toolbar>
  <ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="" [routerLink]="['/','home']">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="j" [routerLink]="['/','j']">
           <ion-icon ios="ios-list-box" md="md-list-box"></ion-icon>
      <ion-label>J&K</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="transfer" [routerLink]="['/','transfer']">
      <ion-icon name="send"></ion-icon>
      <ion-label>Transfer</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="indonesia" [routerLink]="['/indonesia']">
        <ion-icon ios="ios-flag" md="md-flag"></ion-icon>
      <ion-label>Indonesia</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="arefalisis" [routerLink]="['/','arefalisis']">
    <ion-icon ios="ios-analytics" md="md-analytics"></ion-icon>
      <ion-label>Arefalisis</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="sejarah" [routerLink]="['/','sejarah']">
<ion-icon ios="ios-book" md="md-book"></ion-icon>
      <ion-label>Sejarah</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

  </ion-toolbar>
</ion-footer>

Page sejarah.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Sejarah</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
                <ion-card class="welcome-card">
            <img src="/assets/logo.png" alt="" />
<ion-searchbar></ion-searchbar>
        </ion-card>
             <ion-card class="welcome-card">
            <img src="/assets/Sejarah.PNG" [routerLink]="['/','sejarah-artikel']" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
        </ion-card>
        <br>
        <ion-card class="welcome-card">
            <img src="/assets/Sejarah2.PNG" [routerLink]="['/','sejarah-t']" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
        </ion-card>
</ion-content>
<ion-footer>
  <ion-toolbar>
  <ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="" [routerLink]="['/','home']">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="j" [routerLink]="['/','j']">
           <ion-icon ios="ios-list-box" md="md-list-box"></ion-icon>
      <ion-label>J&K</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="transfer" [routerLink]="['/','transfer']">
      <ion-icon name="send"></ion-icon>
      <ion-label>Transfer</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="indonesia" [routerLink]="['/indonesia']">
        <ion-icon ios="ios-flag" md="md-flag"></ion-icon>
      <ion-label>Indonesia</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="arefalisis" [routerLink]="['/','arefalisis']">
    <ion-icon ios="ios-analytics" md="md-analytics"></ion-icon>
      <ion-label>Arefalisis</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="sejarah" [routerLink]="['/','sejarah']">
<ion-icon ios="ios-book" md="md-book"></ion-icon>
      <ion-label>Sejarah</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

  </ion-toolbar>
</ion-footer>

Page transfer.page.html

<style>
        p {
                margin-left:5px;
                font-size:20px;
        }

</style>
<ion-header>
    <ion-toolbar>
        <ion-title>
            Transfer
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
<p><b>List Transfer Lengkap</b></p>
<p>Liga Primer Inggris:<br>
1.Harry Maguire (Leicester City) ke Manchester United <br>
2. Daniel James (Swansea) ke Manchester United        <br>
3. Aaron Wan Bissaka (Crystal Palace) ke Manchester United  <br>
4. Christian Pulisic (nama klub lama) ke Chelsea                 <br>
5. Mateo Kovacic (Real Madrid) ke Chelsea <br>
6. Nicolas Pepe (Lille) ke Arsenal <br>
7. David Luiz (Chelsea) ke Arsenal      <br>
8. Joao Cancelo (Juventus) ke Manchester City  <br>
9. Rodri (Atletico Madrid) ke Manchester City <br>
10. Dani Ceballos (Real Madrid) ke Arsenal <br>
11. Moise Kean (Juventus) ke Everton <br>
12. Tanguy Ndombele (Olympique Lyon) ke Tottenham Hotspur <br>

</p>

<p>La Liga Spanyol: <br>

1. Eden Hazard (Chelsea) ke Real Madrid  <br>
2. Luka Jovic (Eintracht Frankfurt) ke Real Madrid  <br>
3. James Rodriguez (Bayern Muenchen) ke Real Madrid      <br>
4. Ferland Mendy (Olympique Lyon) ke Real Madrid <br>
5. Rodrygo Goes (Santos FC) ke Real Madrid <br>
6. Eder Militao (FC Porto) ke Real Madrid       <br>
7. Frenkie de Jong (Ajax Amsterdam) ke Barcelona     <br>
8. Antoine Griezmann (Atletico Madrid) ke Barcelona       <br>
9. Joao Felix (Benfica) ke Atletico Madrid                     <br>
10. Alvaro Morata (Chelsea) ke Atletico Madrid                      <br>
11. Kieran Trippier (Tottenham Hotspur) ke Atletico Madrid               <br>
12. Wissam Ben Yedder (AS Monaco) ke Sevilla <br>
13. Nabil Fekir (Olympique Lyon) ke Real betis    <br>
</p>

<p>
Serie A Italia:          <br>

1. Matthijs de Ligt (Ajax Amsterdam) ke Juventus  <br>
2. Aaron Ramsey (Arsenal) ke Juventus <br>
3. Gonzalo Higuain (Chelsea) ke Juventus   <br>
4. Adrien Rabiot (Paris Saint-Germain) ke Juventus <br>
5. Danilo (Manchester City) ke Juventus <br>
6. Gianluigi Buffon (Paris Saint-Germain) ke Juventus <br>
7. Romelu Lukaku (Manchester United) ke Inter Milan <br>
8. Alexis Sanchez (Manchester United) ke Inter Milan     <br>
9. Diego Godin (Atletico Madrid) ke Inter Milan <br>
10. Ante Rebic (Eintracht Frankfurt) ke AC Milan     <br>
11. Fernando Llorente (Tottenham Hotspur) ke Napoli <br>
12. Chris Smalling (Manchester United) ke AS Roma <br>
13. Henrikh Mkhitaryan (Arsenal) ke AS Roma <br>
14. Franck Ribery (Bayern Muenchen) ke Fiorentina  <br>
15. Radja Nainggolan (Inter Milan) ke Cagliari          <br>
</p>
<p>
Bundesliga Jerman:                                          <br>

1. Philippe Coutinho (Barcelona) ke Bayern Muenchen <br>
2. Ivan Perisic (Inter Milan) ke Bayern Muenchen         <br>
3. Lucas Hernandez (Atletico Madrid) ke Bayern Muenchen       <br>
4. Benjamin Pavard (VfB Stuttgart) ke Bayern Muenchen <br>
5. Paco Alcacer (Barcelona) ke Borussia Dortmund <br>
6. Mats Hummels (Bayern Muenchen) ke Borussia Dortmund <br>
7. Julian Brandt (Bayer Leverkusen) ke Borussia Dortmund <br>

</p>
<p>
Ligue 1 Prancis:  <br>

1. Mauro Icardi (Inter Milan) ke Paris Saint-Germain <br>
2. Ander Herrera (Manchester United) ke Paris Saint-Germain <br>
3. Keylor Navas (Real Madrid) ke Paris Saint-Germain <br>
</p>
</ion-content>
<ion-footer>
  <ion-toolbar>
  <ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="" [routerLink]="['/','home']">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="j" [routerLink]="['/','j']">
           <ion-icon ios="ios-list-box" md="md-list-box"></ion-icon>
      <ion-label>J&K</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="transfer" [routerLink]="['/','transfer']">
      <ion-icon name="send"></ion-icon>
      <ion-label>Transfer</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="indonesia" [routerLink]="['/indonesia']">
        <ion-icon ios="ios-flag" md="md-flag"></ion-icon>
      <ion-label>Indonesia</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="arefalisis" [routerLink]="['/','arefalisis']">
    <ion-icon ios="ios-analytics" md="md-analytics"></ion-icon>
      <ion-label>Arefalisis</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="sejarah" [routerLink]="['/','sejarah']">
<ion-icon ios="ios-book" md="md-book"></ion-icon>
      <ion-label>Sejarah</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

  </ion-toolbar>
</ion-footer>

Page arefalisis.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Arefalisis</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
                         <ion-card class="welcome-card">
            <img src="/assets/logo.png" alt="" />
<ion-searchbar></ion-searchbar>
        </ion-card>
             <ion-card class="welcome-card">
            <img src="/assets/Arefa.PNG" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
        </ion-card>
        <br>
        <ion-card class="welcome-card">
            <img src="/assets/Arefa2.PNG"    [routerLink]="['/','arefa-artikel']" alt="" />
            <ion-card-header>
                <ion-card-subtitle></ion-card-subtitle>
                <ion-card-title></ion-card-title>
            </ion-card-header>
            <ion-card-content>
            </ion-card-content>
        </ion-card>

</ion-content>
<ion-footer>
  <ion-toolbar>
  <ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="" [routerLink]="['/','home']">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="j" [routerLink]="['/','j']">
           <ion-icon ios="ios-list-box" md="md-list-box"></ion-icon>
      <ion-label>J&K</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="transfer" [routerLink]="['/','transfer']">
      <ion-icon name="send"></ion-icon>
      <ion-label>Transfer</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="indonesia" [routerLink]="['/indonesia']">
        <ion-icon ios="ios-flag" md="md-flag"></ion-icon>
      <ion-label>Indonesia</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="arefalisis" [routerLink]="['/','arefalisis']">
    <ion-icon ios="ios-analytics" md="md-analytics"></ion-icon>
      <ion-label>Arefalisis</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="sejarah" [routerLink]="['/','sejarah']">
<ion-icon ios="ios-book" md="md-book"></ion-icon>
      <ion-label>Sejarah</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

  </ion-toolbar>
</ion-footer>

Page arefa-artikel.page.html

<ion-header>
  <ion-toolbar>
    <ion-title></ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
<ion-card class="welcome-card">
            <img src="/assets/logo.png" alt="" />
<ion-searchbar></ion-searchbar>
</ion-card>
             <ion-card class="welcome-card">
            <img src="/assets/Arefa2.PNG"alt="" />
            <ion-card-content>
            <p>             Masalah rekor, Ayam memang jauh diatas Si Rubah namun kekalahan ini sungguh diluar ekspekstasi Ayam. Manajer Ayam, Pochettino mengatakan bahwa kekalahan mereka tak lepas dari permainan buruk di awal laga. Hasilnya, secara mengejutkan spurs pun kalah atas Si rubah 2-1.

Gol Dicetak oleh Jamie Vardy dengan menchip bola kea rah gawang dan tertipulah Lloris sampai terjatuh dan Mahrez memperbesar keunggulan Si Rubah menjadi 2-0 dengan menyisir sisi sayap kanan Si Ayam dengan lincah lalu memplacing  bola ke sisi kanan Lloris. Si Ayam pun tak tinggal diam, mereka membalas melalui gol Harrry Kane yang seperti biasa hanya bisa menyambut umpan Lamela. Selama pertandingan berlangsung, Spurs menguasai pertandingan tetapi dewi fortuna tidak memihak mereka.

Hasil ini menjadikan Si Ayam turun ke posisi lima setelah Arsenal menang atas Huddersfield 5-0 dan kembali ke posisi ternyaman dan terindah mereka yaitu posisi empat. Musim ini kembali Pochettino harap-harap cemas karena berada dibawah Arsenal yang dimana jika Spurs berada diatas Arsenal di akhir musim akan ada sebuah perayaan khusus atas itu.</p>
            </ion-card-content>
        </ion-card>
</ion-content>
<ion-footer>
  <ion-toolbar>
  <ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="" [routerLink]="['/','home']">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="j" [routerLink]="['/','j']">
           <ion-icon ios="ios-list-box" md="md-list-box"></ion-icon>
      <ion-label>J&K</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="transfer" [routerLink]="['/','transfer']">
      <ion-icon name="send"></ion-icon>
      <ion-label>Transfer</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="indonesia" [routerLink]="['/indonesia']">
        <ion-icon ios="ios-flag" md="md-flag"></ion-icon>
      <ion-label>Indonesia</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="arefalisis" [routerLink]="['/','arefalisis']">
    <ion-icon ios="ios-analytics" md="md-analytics"></ion-icon>
      <ion-label>Arefalisis</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="sejarah" [routerLink]="['/','sejarah']">
<ion-icon ios="ios-book" md="md-book"></ion-icon>
      <ion-label>Sejarah</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

  </ion-toolbar>
</ion-footer>

Page artikel-ina.page.html

<ion-header>
  <ion-toolbar>
    <ion-title></ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
<ion-card class="welcome-card">
            <img src="/assets/logo.png" alt="" />
<ion-searchbar></ion-searchbar>
</ion-card>
             <ion-card class="welcome-card">
            <img src="/assets/Indo2.PNG"alt="" />
            <ion-card-content>
            <p>          Sriwijaya berambisi juara setelah mendatangkan pelatih anyar dan pemain baru nih. Rahmad Darmawan sebagai pelatih dan Pemain baru sepert Esteban Vizcarra, Adam Alis, Makan Konate, Alfin Tuasalamonny dan Yogi Rahadian sudah didatangkan. Dengan ini, skuad Sriwijaya makin tangguh dan solid karena masih ada nama lain yang masih bertahan di klub yang berjulukan Laskar Wong Kito ini. Sebut saja, Beto Goncalves yang merupakan Topskor musim lalu dan Yanto Basna yang konsisten permainannya sebagai salah satu pemain cabe-cabean(muda).

Menariknya, Makan Konate yang merupakan incaran utama Persib Bandung malah membelot ke Sriwijaya. Alasannya sih simple, Dia ngekor pelatihnya karena udah ngerasa Chun In sama Rahmad Darmawan. Kasian Encib pemain incarannya gak dapet.

Klub yang menjadi Juara liga pada tahun 2004 ini, telah mengagendakan latihan perdana pada 4 desember, meskipun Rahmad Darmawan belum bisa ikut dikarenakan menjalani ibadah Umroh. Wah makin seru nih Liga 1, klub kesayangan gue PSMS Medan juga udah naik kasta. Semoga menjanjikan laga-laga yang seru dan menarik.
</p>
            </ion-card-content>
        </ion-card>
</ion-content>
<ion-footer>
  <ion-toolbar>
  <ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="" [routerLink]="['/','home']">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="j" [routerLink]="['/','j']">
           <ion-icon ios="ios-list-box" md="md-list-box"></ion-icon>
      <ion-label>J&K</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="transfer" [routerLink]="['/','transfer']">
      <ion-icon name="send"></ion-icon>
      <ion-label>Transfer</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="indonesia" [routerLink]="['/indonesia']">
        <ion-icon ios="ios-flag" md="md-flag"></ion-icon>
      <ion-label>Indonesia</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="arefalisis" [routerLink]="['/','arefalisis']">
    <ion-icon ios="ios-analytics" md="md-analytics"></ion-icon>
      <ion-label>Arefalisis</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="sejarah" [routerLink]="['/','sejarah']">
<ion-icon ios="ios-book" md="md-book"></ion-icon>
      <ion-label>Sejarah</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

  </ion-toolbar>
</ion-footer>

Page artikel-indonesia.page.html

<ion-header>
  <ion-toolbar>
    <ion-title></ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
<ion-card class="welcome-card">
            <img src="/assets/logo.png" alt="" />
<ion-searchbar></ion-searchbar>
</ion-card>
             <ion-card class="welcome-card">
            <img src="/assets/Indo.PNG"alt="" />
            <ion-card-content>
            <p>Konfederasi Sepakbola Asia(AFC) udah ngumumin nih jatah untuk indonesia
            di kompetisi antar klub Asia musim depan. Jadi, Bali United yang jadi wakil Indonesia di Liga Champions Asia harus mengawali kiprahnya melalui 3 kualifikasi. Yang pertama, harus ngalahin Tampines Rovers(Singapura) untuk melaju ke fase kedua. Jika menang, Bali United maju ke Kualifikasi kedua yang dimana sudah menanti wakil Thailand Chiangrai United dan kalo menang lagi, di kualifikasi terakhir menuju fase grup harus ngalahin tim yang ada anggota avengers nya yaitu Hulk dkk(Shanghai SIPG) yang berasal dari China.
     Dengan begitu, nasib malang menghampiri tim merger Madura United. Mereka harus menunggu bagaimana jalan Bali United menuju fase Grup Liga Champions Asia mulus atau enggak. Sedangkan tim lain yang lolos ke AFC Cup, Persija Jakarta udah dipastiin akan berlaga di ajang Europa League versi Asia tersebut.So, menarik kita tunggu bagaimana perjalanan tim dari Indonesia yang berlaga di asia. Semoga bisa menyamai perolehan Persib dan Persipura yang mampu menuju semifinal AFC Cup.
</p>
            </ion-card-content>
        </ion-card>
</ion-content>
<ion-footer>
  <ion-toolbar>
  <ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="" [routerLink]="['/','home']">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="j" [routerLink]="['/','j']">
           <ion-icon ios="ios-list-box" md="md-list-box"></ion-icon>
      <ion-label>J&K</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="transfer" [routerLink]="['/','transfer']">
      <ion-icon name="send"></ion-icon>
      <ion-label>Transfer</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="indonesia" [routerLink]="['/indonesia']">
        <ion-icon ios="ios-flag" md="md-flag"></ion-icon>
      <ion-label>Indonesia</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="arefalisis" [routerLink]="['/','arefalisis']">
    <ion-icon ios="ios-analytics" md="md-analytics"></ion-icon>
      <ion-label>Arefalisis</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="sejarah" [routerLink]="['/','sejarah']">
<ion-icon ios="ios-book" md="md-book"></ion-icon>
      <ion-label>Sejarah</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

  </ion-toolbar>
</ion-footer>

Page sejarah-artikel.page.html

<ion-header>
  <ion-toolbar>
    <ion-title></ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
<ion-card class="welcome-card">
            <img src="/assets/logo.png" alt="" />
<ion-searchbar></ion-searchbar>
</ion-card>
             <ion-card class="welcome-card">
            <img src="/assets/Sejarah.PNG"alt="" />
            <ion-card-content>
            <p>Andi Ramang yang lebih dikenal sebagai Ramang, mulai memperkuat PSM Makassar pada tahun 1947, yang waktu itu masih bernama Makassar Voetbal Bond (MVB).Melalui sebuah klub bernama Persis (Persatuan Sepak Bola Induk Sulawesi) ia ikut kompetisi PSM.

    Pada sebuah pertandingan, ia mencetak sebagian besar gol dan membuat klubnya menang 9-0. Sejak itulah ia dilamar bergabung dengan PSM.
    Ramang memang sudah mulai menendang-nendang buah jeruk, gulungan kain dan bola anyaman rotan dalam permainan sepak raga sejak berusia 10 tahun.Pada tahun 1952 ia menggantikan Sunardi, kakak Suardi Arlan, mengikuti latihan di Jakarta. Ini membuatnya menjadi pemain utama PSSI. Didampingi Suardi Arlan di kanan dan Nursalam di kiri, ia bagai kuda kepang di tengah gelanggang.Permainannya sebagai penyerang tengah sangat mengagumkan. Maka setahun kemudian ia keliling di beberapa negeri asing. Namanya meroket menjadi pemain favorit penonton dan disegani pemain lawan.

     Pada lawatannya tahun 1954 ke berbagai negeri Asia, Filipina, Hongkong, Muangthai, dan juga negeri tetangga Malaysia, PSSI (timnas Indonesia, red.) hampir menyapu seluruh pertandingan dengan kemenangan besar. Mencetak 25 gol dan hanya kemasukan 6 gol. Ramang sendiri mencetak 19 gol di antara seluruh gol yang berhasil diciptakan oleh timnya. Dua di antaranya dicetak melalui tendangan salto indah. Dalam lawatan luar negeri itu, Indonesia hanya kalah dari Republik Korea.Berkat prestasi Ramang dan kawan-kawan, Indonesia masuk dalam hitungan kekuatan sepak bola di Asia. Satu demi satu kesebelasan Eropa mencoba kekuatan PSSI.

     Mulai dari Yugoslavia yang gawangnya dijaga Beara (salah satu kiper terbaik dunia waktu itu), klub Stade de Reims dengan si kaki emas Raymond Kopa, kesebelasan Rusia dengan kiper top dunia Lev Yashin, klub Locomotive dengan penembak maut Bubukin, sampai Grasshopers dengan Roger Vollentein.Ramang sendiri memilih merendah dan menegaskan itu tak hanya prestasinya, melainkan kerja sama dengan kawan-kawan satu tim, sembari menyebut nama temannya satu per satu: Maulwi Saelan, Rasjid, Chaeruddin, Ramlan, Sidhi, Tan Liong Houw, Aang Witarsa, Thio Him Tjiang, Danu, Phoa Sian Liong dan Djamiat.Ramang dikenal sebagai penyerang haus gol. Ramang memiliki tendangan yang akurat. Bisa memaksimalkan peluang sesulit apa pun dan punya lari yang kencang. Satu lagi, dia pandai melakukan tendangan salto. Trik indah yang sulit dilakukan. Keahlian itu tampaknya karunia alam untuk pribadi Ramang sebagai bekas pemain sepak raga yang ulung.

     Gol melalui tendangan salto yang indah dan mengejutkan seringkali dipertunjukkan oleh Ramang. Satu di antaranya saat PSSI mengalahkan RRC dengan 2-0 di Jakarta. Kedua gol itu lahir dari kaki Ramang, satu di antaranya tembakan salto. Itu pertandingan menjelang Kejuaraan Dunia di Swedia, 1958.Pertandingan kedua dilanjutkan di Peking, Indonesia kalah dengan skor 3-4, sedang yang ketiga di Rangoon (juga melawan RRC) yang berakhir imbang 0-0. Sayang sekali lawan selanjutnya ialah Israel (yang tak punya hubungan diplomatik dengan Indonesia) maka PSSI terpaksa tidak berangkat.Karena kehebatan Ramang di lapangan sepak bola, tak heran jika pada tahun 1950-an, banyak bayi lelaki yang lahir kemudian diberi nama Ramang oleh orang tuanya.

     Jika Ramang ditanya mengenai pertandingan paling berkesan, di sejumlah media, ia menyebut ketika PSSI menahan Uni Soviet 0-0 di Olimpiade Melbourne 1956. “Ketika itu saya hampir mencetak gol. Tapi kaus saya ditarik dari belakang,” kenang Ramang.Indonesia melawan Uni Soviet di babak kedua Olimpiade Melbourne 1956. Soviet kala itu diperkuat pemain yang hebat seperti Lev Yashin, Igor Netto, Eduard Streltsov dan Valentin Ivanov. Sebelumnya mereka mengalahkan Jerman Barat, juara bertahan dunia, di babak pertama.Namun, Uni Soviet cepat diberi tekanan ketika Ramang, pemain berposisi deep-lying forward, melewati hadangan dua dari pemain mereka dan memaksa Yashin melakukan fingertip saveuntuk mengamankan gawangnya.

     Dan meskipun anak asuh Gavril Kachalin menguasai pertandingan setelah itu, mereka frustrasi dengan kegagalan mereka untuk mengalahkan tim yang notabene adalah underdogdan oleh keterampilan Ramang pada serangan balik. Pemain berusia 32 tahun bahkan nyaris mengguncang dunia di menit ke-84, tapi upayanya digagalkan Lev Yashin yang secara luas dianggap sebagai kiper terbesar dalam sejarah sepak bola.Jika Soviet tidak tahu siapa Ramang sebelum pertandingan itu, mereka pasti membayar perhatian menuju ke laga replay. Sehingga Kachalin memerintahkan Netto, playmakertimnya, agar mengadopsi peran yang lebih defensif untuk meniadakan dampak dari No. 11 Indonesia. Itu bekerja. Uni Soviet menang 4-0.

     Fakta bahwa Uni Soviet melanjutkan kompetisi hingga final dan merebut emas di Melbourne, ditambah legenda bahwa kinerja Indonesia yang epik, tetap menjadi salah satu hasil yang paling menakjubkan dalam sejarah Olimpiade
</p>
            </ion-card-content>
        </ion-card>
</ion-content>
<ion-footer>
  <ion-toolbar>
  <ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="" [routerLink]="['/','home']">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="j" [routerLink]="['/','j']">
           <ion-icon ios="ios-list-box" md="md-list-box"></ion-icon>
      <ion-label>J&K</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="transfer" [routerLink]="['/','transfer']">
      <ion-icon name="send"></ion-icon>
      <ion-label>Transfer</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="indonesia" [routerLink]="['/indonesia']">
        <ion-icon ios="ios-flag" md="md-flag"></ion-icon>
      <ion-label>Indonesia</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="arefalisis" [routerLink]="['/','arefalisis']">
    <ion-icon ios="ios-analytics" md="md-analytics"></ion-icon>
      <ion-label>Arefalisis</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="sejarah" [routerLink]="['/','sejarah']">
<ion-icon ios="ios-book" md="md-book"></ion-icon>
      <ion-label>Sejarah</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

  </ion-toolbar>
</ion-footer>

Page sejarah-t.page.html

<ion-header>
  <ion-toolbar>
    <ion-title></ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
<ion-card class="welcome-card">
            <img src="/assets/logo.png" alt="" />
<ion-searchbar></ion-searchbar>
</ion-card>
             <ion-card class="welcome-card">
            <img src="/assets/Sejarah2.PNG"alt="" />
            <ion-card-content>
            <p>Pada 5 Oktober 1973, penyerang kenamaan Argentina, Mario Kempes memulai perjalanannya di Argentina Primera Division. Ketika itu ia membela klub Instituto de Cordoba, dan mengantarkan klub ini menang atas Newell`s Old Boys dengan skor 1-0. Itu adalah awal dari perjalanan Mario Kempes menjadi salah satu penyerang terbaik Argentina.Ketika itu ia masih berusia 19 tahun, dan sudah menghabiskan tiga musim berseragam Cordoba. Ia berhasil mengantarkan Cordoba masuk Argentina Primera Division pada 1973, sekaligus merupakan yang pertama kalinya bagi klub berkompetisi di Argentina Primera Division.

     Pada musim itu, Kempes mencatatkan 13 kali penampilan bersama Cordoba dan mencetak 11 gol, sebelum akhirnya pindah ke Rosario Central pada 1974. Di klub barunya, ia berhasil mencetak 85 gol dalam masa tiga musimnya bersama Rosario Central. Penampilan impresifnya bersama Rosario Central membuat ia dilirik oleh klub Spanyol, Valencia.Di Spanyol, penampilannya pun masih tetaplah luar biasa. Ia menjadi top skorer La Liga Primera Division selama dua tahun berturut-turut, yaitu pada 1977 dan 1978. Kempes juga sukses mengantarkan Valencia meraih berbagai macam trofi utama, seperti Copa del Rey (1970), Cup Winners` Cup (1980), dan UEFA Super Cup (1980).

     Tapi, nama Kempes lebih dikenal karena berhasil mengantarkan Argentina menjuarai Piala Dunia 1978 (yang katanya diatur oleh junta militer Argentina). Dalam turnamen tersebut, Kempes berhasil menjadi pencetak gol terbanyak dengan mencetak enam gol, termasuk dua gol yang ia sumbangkan pada babak final saat Argentina mengalahkan Belanda dengan skor3-1.Usai membela Valencia, ia masih membela klub-klub di Eropa dan Amerika Latin, mesti klub itu bukan klub yang berkompetisi di level tertinggi. Mulai dari Hercules CF, First Vienna FC, Kremser SC, dan Arturo Fernandez Vial. Bahkan, ia pernah membela klub Indonesia, Pelita Jaya pada akhir masa kariernya.
</p>
            </ion-card-content>
        </ion-card>
</ion-content>
<ion-footer>
  <ion-toolbar>
  <ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="" [routerLink]="['/','home']">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="j" [routerLink]="['/','j']">
           <ion-icon ios="ios-list-box" md="md-list-box"></ion-icon>
      <ion-label>J&K</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="transfer" [routerLink]="['/','transfer']">
      <ion-icon name="send"></ion-icon>
      <ion-label>Transfer</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="indonesia" [routerLink]="['/indonesia']">
        <ion-icon ios="ios-flag" md="md-flag"></ion-icon>
      <ion-label>Indonesia</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="arefalisis" [routerLink]="['/','arefalisis']">
    <ion-icon ios="ios-analytics" md="md-analytics"></ion-icon>
      <ion-label>Arefalisis</ion-label>
    </ion-tab-button>

        <ion-tab-button tab="sejarah" [routerLink]="['/','sejarah']">
<ion-icon ios="ios-book" md="md-book"></ion-icon>
      <ion-label>Sejarah</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

  </ion-toolbar>
</ion-footer>

Dan berikut adalah tampilan, dari aplikasinya di Ionic






Setelah tampilan di Ionic selesai, saatnya untuk meng-compile file Arefanion agar menjadi file extension .apk, biar bisa diinstall di smartphone Android. Berikut caranya;

Atur pada Enviroment Variables, lalu ikuti gambar dibawah ini





Keterangan tambahan ;

CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL https://services.gradle.org/distributions/gradle-4.10.2-bin.zip

Path 
JAVA_HOME%\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\platformstools;%ANDROID_HOME%\ gradle-4.10.2;%ANDROID_HOME%\ gradle-4.10.2\bin; C:\android sdk\gradle-4.10.2\lib;C:\android sdk\gradle-4.10.2\bin;C:\Program Files\Java\jdk1.8.0_45;C:\android sdk\tools\bin

Setelahnya adalah langkah terakhir yakni publish android.

Gunakan perintah dibawah secara berurutan

ionic cordova build --release android. Gunakan perintah npm update jika gagal.


Lalu lanjut pada perintah

keytool -genkey -v -keystore app.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

Bagian app.keystore, dapat diganti dengan sembarang nama. Lalu dengan cepat dan gak lebay, Isi password dengan terserah anda, Masuk pada folder release di folder android di dalam folder arefanion.

Jalankan perintah dibawah ini;

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore app.keystore app-release-unsigned.apk alias_name

ganti app.keystore sesuai dengan nama keystore yang di buat tadi dan text app-release-unsigned,apk sesuai dengan nama aplikasi hasil release tadi, defaultnya app-release-unsigned.apk. Lakukan sampai muncul seperti gambar dibawah;


Copy app-release-unsigned.apk ke folder build-tools\29.0.2. Pastikan didalam folder itu ada zipalign.exe. Jalankan perintah terakhir yakni

zipalign -v 4 app-release-unsigned.apk arefanion.apk

Arefanion.apk adalah nama akhir dari apk yang ingin dijadikan. O iya berikut adalah link untuk file-file Android Buildnya, silahkan hubungin kontak lautan diweb. Sekedar info, proyek ini telah lautan gunakan untuk pameran Fpex 2020 Universitas Ahmad Dahlan. Tapi anda bisa gunain kodingnya untuk dikembangkan lebih lanjut

Semoga bermanfaat :)

Post a Comment

0 Comments