Manajemen Page Framework7

Kurnia Andi Nugroho
tutorial framework7, framework7 bahasa, framework7 page, framework7 layout, crud framework7
0 comment
dilihat 248 kali
09 Feb, 2025

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

. 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





  
  
  
  
  My App
  
  



  
    
      
        
          
          
            Aplikasi Sederhana
          
        
        
          
            Link 1
            Link 2
          
        
        
          
            Silahkan Mencoba
          
          Accordion
          action sheet
          app bar
          Area chart
          Auto Complete
          Badge
          Content block

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.

 
     
         
         
             Accordion
         
     
     
         
             Link 1
             Link 2
         
     
     
         
             Ini Halaman Accordion
         
         
             
                 
                     
                         
                             Item 1
                         
                     
                     Item 1 content ...
                 
                 
                     
                         
                             Item 2
                         
                     
                     Item 2 content ...

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.





  
  
  
  
  My App
  
  



  
    
      
        
          
          
            Aplikasi Sederhana
          
        
        
          
            Link 1
            Link 2
          
        
        
          
            Silahkan Mencoba
          
          Accordion
          action sheet
          app bar
          Area chart
          Auto Complete
          Badge
          Content block
        
      
      
        
          
          
            Accordion
          
        
        
          
            Link 1
            Link 2
          
        
        
          
            Ini Halaman Accordion
          
          
            
              
                
                  
                    Item 1
                  
                
                Item 1 content ...
              
              
                
                  
                    Item 2
                  
                
                Item 2 content ...

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 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.