Instalasi & Inisialisasi Framework7


Kurnia Andi Nugroho
Semoga kita semua diridhoi
Instalasi & Inisialisasi Framework7

Kemarin kita semua telah mempelajari sekilas tentang pengenalan mobile programing, kali ini kita akan masuk pada sesi berikutnya yaitu proses instalasi. karena terdapat beberapa opsi instalasi, ada opsi instalasi via terminal dengan bantuan node js dengan cara mengetikkan perintah di terminal npm install framework7. tapi pada langkah kali ini kita akan melakukan instalasi via github saja, agar lebih mudah dan cepat.

teman-teman bisa mengunduh via link https://github.com/framework7io/framework7/releases

Pastikan teman-teman mengunduh file dengan nama Source Code.tar.gz. jika sudah lakukan extract pada file yang sudah du download. kurang lebih akan ada beberap folder dan file seperti dibawah ini

disana terdapat beberapa versi yang disediakan ada yang menggunakan vue,react dan juga natural javascript. kali ini kita akan menggunakan versi natural javascript sebagai langkah awal untuk memahami alur dari framework7. setelah teman-teman mengunduh file dengan ekstensi tar.gz kemudian lakukan extract file kedalam direktori yang telah disediakan. dalam hal ini kami sarankan untuk menaruh didalam direktori xampp, karena akan berkelanjutan untuk project berikutnya.

penjelasan singkat yang akan kami uraikan dalam hal ini akan menuju pada yang inti saja, agar lebih mempersingkat pembelajaran. didalam direktori utama kita akan membuat sebuah file dengan extensi file html. dalam hal ini kami menyimpan di folder C:\xampp\htdocs\framework7 . berikut listing kode index.html

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags-->
    <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">
    <!-- Color theme for statusbar (Android only) -->
    <meta name="theme-color" content="#2196f3">
    <!-- Your app title -->
    <title>My App</title>
    <!-- Path to Framework7 Library Bundle CSS -->
    <link rel="stylesheet" href="path/to/framework7-bundle.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="path/to/my-app.css">
  </head>
  <body>
    <!-- App root element -->
    <div id="app">

      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Initial Page, "data-name" contains page name -->
        <div data-name="home" class="page">

          <!-- Top Navbar -->
          <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="title">Awesome App</div>
            </div>
          </div>

          <!-- Bottom Toolbar -->
          <div class="toolbar toolbar-bottom">
            <div class="toolbar-inner">
              <!-- Toolbar links -->
              <a href="#" class="link">Link 1</a>
              <a href="#" class="link">Link 2</a>
            </div>
          </div>

          <!-- Scrollable page content -->
          <div class="page-content">
            <p>Page content goes here</p>
            <!-- Link to another page -->
            <a href="/about/">About app</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Path to Framework7 Library Bundle JS-->
    <script type="text/javascript" src="path/to/framework7-bundle.min.js"></script>
    <!-- Path to your app js-->
    <script type="text/javascript" src="path/to/my-app.js"></script>
  </body>
</html>

Seperti yang sudah kita ketahui dalam bahasa HTML terdapat beberapa tag yang nantinya juga akan diterapkan di framework7. yang patut digaris bawahi adalah div dengan id app, bahwasanya id ini akan berhubungan dengan file javascript kita. penamaan ini tidak harus menggunakan kata app, bisa dengan sesuai keinginan teman-teman.

oke selanjutnya pada instalasi file javascript. pada listingan kode index.html diatas, pada baris ke-3 sebelum akhir terdapat sebuah source path/to/my-app.js. perlu diketahui bahwasanya penyimpanan source atau sumber file mengarah langsung pada direktori project kita. dalam hal ini kita akan merubah nya menjadi assets/js/my-app.js hal ini juga berlaku untuk file tambahan lainnya seperti css, bootstrap dll.

berikut listing kode my-app.js.

var app = new Framework7({
  // App root element
  el: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});

var mainView = app.views.create('.view-main');

Variable app mewakili semua perintah yang nantinya akan ditampilkan di index.html. dibawahnya terdapat beberapa parameter yang nantinya bisa kita tambahkan seperti Page Stack, Routes Dsb.

sampai pada langkah ini teman-teman sudah berhasil melakukan instalasi Framework7. uuntuk mencoba kita bisa menggunakan browser. maka akan tampil seperti gambar dibawah ini

perlu diketahui untuk mendapatkan tampilan landscape seperti diatas.teman-teman bisa membuka inspect elemen di browser teman-teman, kemudian pilih dan coba dimensi yang cocok :D.

Sampai disini semoga teman-teman berhasil melakukan instalasi dengan benar. jika teradapat problem, mari sama sama kita selesaikan dikolom komentar untuk berdiskusi :D. sekian yang bisa kami sampaikan .semoga membuahkan ilmu yang bermnafaat. Aamiin :D Selamat Belajar.


Kurnia Andi Nugroho
Semoga kita semua diridhoi

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami