Published - Tue, 08 Nov 2022

Manajemen Page Framework7

Berlanjut pada sesi berikutnya yaitu manajemen page, atau juga bisa disebut dengan mengelola ataupun mengurus halaman. dalam hal ini kita bisa mengarahkan setiap komponen yang di click menuju halaman yang di tentukan.

Oke langsung saja teman-teman buka kembali recent project pada tutorial sebelumnya.

Kami menggunakan text editor Visual Studio, teman teman bisa menggunakan text editor kesukaan teman-teman. oke, ditinjau dari gambar diatas saya menaruh project didalam folder framework7 di direktori C:/Xampp/htdocs/framework7. Hal ini ketika nantinya diakses melalui browser, dengan menggunakan web server local maka akan menghasilkan URL localhost/framework7.

yang perlu diperhatikan dalam manajemen page adalah pada kode <div data-name="home" class="page">. Data name mengidentifikasikan nama halaman yang kita buat, sedangkan class merupakan definisi type halaman tersebut. berarti halaman diatas mempunyai nama home dan class page, jadi ketika teman-teman mengakses localhost/framework7 maka yang ditampilkan adalah halaman tersebut.

diatas merupakan tampilan ketika teman-teman mengakses nya. panah nomor 1 menunjukkan Navbar, Sedangkan nomor 2 merupakan Content, pada panah nomor 3 merupakan Toolbar . banyak template ataupun customisasi yang disediakan. ini merupakan basic dasar untuk mengetahui tata letak kerangka framework7.

nah, pada pembahasan kali ini kita akan membuat halaman baru, agar kita bisa berpindah dari halaman satu menuju halaman lainnya. Berikut contoh sederhana listing code untuk mencoba manajemen page di dalam framework7

<!DOCTYPE html>
<html>

<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="theme-color" content="#2196f3">
  <title>My App</title>
  <link rel="stylesheet" href="assets/css/framework7-bundle.min.css">
  <link rel="stylesheet" href="assets/css/my-app.css">
</head>

<body>
  <div id="app">
    <div class="view view-main">
      <div data-name="home" class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">Aplikasi Sederhana</div>
          </div>
        </div>
        <div class="toolbar toolbar-bottom">
          <div class="toolbar-inner">
            <a href="#" class="link">Link 1</a>
            <a href="#" class="link">Link 2</a>
          </div>
        </div>
        <div class="page-content">
          <center>
            <p>Silahkan Mencoba</p>
          </center>
          <a href="/accordion/" class="inner-patient-col button button-raised color-orange">Accordion</a>
          <a href="/action/" class="inner-patient-col button button-raised color-lightblue">action sheet</a>
          <a href="/app/" class="inner-patient-col button button-raised color-pink">app bar</a>
          <a href="/area/" class="inner-patient-col button button-raised color-yellow">Area chart</a>
          <a href="/auto/" class="inner-patient-col button button-raised color-deeppurple">Auto Complete</a>
          <a href="/badge/" class="inner-patient-col button button-raised color-teal">Badge</a>
          <a href="/contentblock/" class="inner-patient-col button button-raised color-red">Content block</a>

        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="assets/js/framework7-bundle.min.js"></script>
  <script type="text/javascript" src="assets/js/my-app.js"></script>
</body>

</html>

Dari kode diatas, kita telah menambahkan beberapa button dihalaman home, hal ini sebagai contoh kecil untuk mencoba berpindah dari halaman satu menuju halaman lainnya. Salah satunya terdapat button accordion, diharapkan ketika kita melakukan click pada button tersebut maka kita akan diarahkan menuju halaman accordion.

bisa di lihat hasilnya seperti gambar dibawah ini.

kita tambahkan parameter stackPages yang berada pada file my-app.js.

var app = new Framework7({
  el: '#app',
  name: 'My App',
  id: 'com.myapp.test',
  panel: {
    swipe: true,
  },
  view: {
    stackPages: true,
  },
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
});

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

oke sampai disini kita berhasil menambahkan parameter stackPages dan merubah nilainya menjadi true. hal ini bertujuan agar pembuatan halaman bisa dilakukan dalam satu file saja, yaitu didalam file index.html.

langkah selanjutnya kita cukup membuat div baru di dalam file index.html tepatnya dibawah div penutup dari class page pertama. Listing code dibawah ini merupakan contoh sederhana untuk halaman accordion.

 <div data-name="accordion" class="page stacked">
     <div class="navbar">
         <div class="navbar-bg"></div>
         <div class="navbar-inner">
             <div class="title">Accordion</div>
         </div>
     </div>
     <div class="toolbar toolbar-bottom">
         <div class="toolbar-inner">
             <a href="#" class="link">Link 1</a>
             <a href="#" class="link">Link 2</a>
         </div>
     </div>
     <div class="page-content">
         <center>
             <p>Ini Halaman Accordion</p>
         </center>
         <div class="list accordion-list">
             <ul>
                 <li class="accordion-item">
                     <a href="" class="item-link item-content">
                         <div class="item-inner">
                             <div class="item-title">Item 1</div>
                         </div>
                     </a>
                     <div class="accordion-item-content">Item 1 content ...</div>
                 </li>
                 <li class="accordion-item">
                     <a href="" class="item-link item-content">
                         <div class="item-inner">
                             <div class="item-title">Item 2</div>
                         </div>
                     </a>
                     <div class="accordion-item-content">Item 2 content ...</div>
                 </li>
             </ul>
         </div>
     </div>
 </div>

<div data-name="accordion" class="page stacked"> data name accordion untuk nantinya kita gunakan dalam proses routing atau pengarahan halaman didalam file my-app.js sedangkan class page stacked bertujuan agar ketika halaman home diakses maka halaman ini tidak akan tampil bisa dikatakan untuk memaniplasi halaman ini dibawah halaman home. Untuk daftar lengkap code index.html bisa dilihat seperti dibawah ini.

<!DOCTYPE html>
<html>

<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="theme-color" content="#2196f3">
  <title>My App</title>
  <link rel="stylesheet" href="assets/css/framework7-bundle.min.css">
  <link rel="stylesheet" href="assets/css/my-app.css">
</head>

<body>
  <div id="app">
    <div class="view view-main">
      <div data-name="home" class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">Aplikasi Sederhana</div>
          </div>
        </div>
        <div class="toolbar toolbar-bottom">
          <div class="toolbar-inner">
            <a href="#" class="link">Link 1</a>
            <a href="#" class="link">Link 2</a>
          </div>
        </div>
        <div class="page-content">
          <center>
            <p>Silahkan Mencoba</p>
          </center>
          <a href="/accordion/" class="inner-patient-col button button-raised color-orange">Accordion</a>
          <a href="/action/" class="inner-patient-col button button-raised color-lightblue">action sheet</a>
          <a href="/app/" class="inner-patient-col button button-raised color-pink">app bar</a>
          <a href="/area/" class="inner-patient-col button button-raised color-yellow">Area chart</a>
          <a href="/auto/" class="inner-patient-col button button-raised color-deeppurple">Auto Complete</a>
          <a href="/badge/" class="inner-patient-col button button-raised color-teal">Badge</a>
          <a href="/contentblock/" class="inner-patient-col button button-raised color-red">Content block</a>
        </div>
      </div>
      <div data-name="accordion" class="page stacked">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">Accordion</div>
          </div>
        </div>
        <div class="toolbar toolbar-bottom">
          <div class="toolbar-inner">
            <a href="#" class="link">Link 1</a>
            <a href="#" class="link">Link 2</a>
          </div>
        </div>
        <div class="page-content">
          <center>
            <p>Ini Halaman Accordion</p>
          </center>
          <div class="list accordion-list">
            <ul>
              <li class="accordion-item">
                <a href="" class="item-link item-content">
                  <div class="item-inner">
                    <div class="item-title">Item 1</div>
                  </div>
                </a>
                <div class="accordion-item-content">Item 1 content ...</div>
              </li>
              <li class="accordion-item">
                <a href="" class="item-link item-content">
                  <div class="item-inner">
                    <div class="item-title">Item 2</div>
                  </div>
                </a>
                <div class="accordion-item-content">Item 2 content ...</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="assets/js/framework7-bundle.min.js"></script>
  <script type="text/javascript" src="assets/js/my-app.js"></script>
</body>

</html>

setelah teman-teman berhasil menggabungkan antara page dan stack page, langkah selanjutnya adalah menambahkan parameter route di file my-app.js.

var app = new Framework7({
  el: '#app',
  name: 'My App',
  id: 'com.myapp.test',
  panel: {
    swipe: true,
  },
  view: {
    stackPages: true,
  },
  routes: [{
    path: '/accordion/',
    pageName: 'accordion'
  }, ],
});

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

pada baris routes diatas kita bisa melihat ada path dan juga pageName, path disini berarti kita harus mencantumkan dimana nantinya halaman ini kita akses, pada kode seblumnya kita melettakan pada button dengan kode <a href="/accordion/" nah ini harus sama dengan path di route kita. Sedangkan pageName adalah page stacked yang tadi kita tambahkan di halaman index.html. jika button accordion kita click, maka kita akan diarahkan menuju halaman accordian yang baru saja dibuat .kurang lebih seperti gambar dibawah ini.

Sampai disini semoga teman-teman berhasil melakukan percobaan manajemen page . Jika teradapat problem, mari sama sama kita selesaikan dikolom komentar untuk berdiskusi