Konsep Pages dan Routes pada Framework7 – Transcript

00:01Assalamualaikum warahmatullahi wabarakatuh. Selamat pagi, selamat siang, selamat sore, dan selamat malam. Salam sejahtera untuk kita semuanya. Eh, kita lanjutkan materi pembahasan tentang pemrograman mobile yang menggunakan Framework 7 ya. Kalau sebelumnya kita sudah menginstalasi Framework 7 dengan cara yang paling mudah gitu ya, hanya diekstrak. Kemudian

00:25apa namanya? Kemudian di jalankan begitu ya. Nah, kita masuk berikutnya membahas tentang eh kalau halaman web itu, terutama mobile juga ya, itu biasanya punya halaman lebih dari satu.

00:40Ya, lebih dari satu. Nanti kalau kita punya beberapa halaman atau beberapa file, nah itu tidak bisa seperti web biasa yang kita tinggal tambahkan terus buatkan link nanti diklik dia langsung nyambung gitu enggak bisa. Kita harus eh memahami konsep page dan routes ini ya. Jadi, setiap halaman baru atau setiap file baru atau setiap komponen baru yang ingin kita akses itu harus dibuatkan

01:06routes-nya, harus dibuatkan path-nya, jalurnya seperti itu ya. Nah, kita lihat dulu eh kode kita sebelumnya ya. Nah, ini ini yang setelah diinstal yang setelah diinstal kalau kita perhatikan, kita kan punya dua buah eh ini ya dua buah file ya, index dan home.

01:29Nah, yang tampil itu adalah yang dieksekusi adalah index.html. Kalau kita lihat di halaman ini yang diakses itu sebenarnya index.html ya, tetapi yang tampil itu dia di dalam index.html itu tampil file yang namanya home.html ini.

01:47Nah, itu sudah kita bahas di materi sebelumnya ya. Yang membentuknya itu adalah yang di sini ya. Jadi, di sini navigate ya, navigate-nya itu ke tanda slash. Nah, tanda slash itu ada di sini ya, di di bagian routes ini tanda slash itu adalah merujuk ke mana? Ke URL home.html.

02:07Jadi, pada saat indeks ini diakses, dia nge-load, bahasanya memuat file home.html pertama kali ketika dia diakses. Ya, seperti itu. Nah, ketika kita mau bikin halaman-halaman baru, maka kita harus menambahkan page ini baru lagi sesuai dengan nama file-nya nanti ya di dalam routes ini.

02:27Adapun yang di sini, ini nanti tergantung ya. Biasanya sih tanda slash ini di awal. Tapi kita nanti bisa rubah ya. Nah, itulah konsep yang namanya eee routes tadi ya dan page.

02:41Nah, sederhananya penjelasannya seperti ini. Jadi, kita tuh punya link. Kalau kita pengin pindah-pindah halaman gitu ya atau pindah file, itu kita menggunakan yang namanya link. Link itu menggunakan tanda A seperti ini kalau di HTML. Ya, dan di Framework 7 juga menggunakan yang sama seperti itu.

02:59Nah, ada dua jenis ya, ada dua bentuk link. Yang pertama adalah internal, yang kedua eksternal. Nah, saya bahas dulu yang eksternal ya. Yang eksternal ini artinya kita akan mengakses yang di luar dari aplikasi atau di luar dari web kita gitu ya.

03:19Nah, itu penulisannya menggunakan A dan href juga, yaitu sama dengan link biasa, tetapi ada tambahan class sama dengan ada dua ya, link sama eksternal. Nah, dua inilah yang menyebabkan kalau nanti ada tulisan di halaman itu tulisan banghaji.com yang jadi link kalau diklik dia akan membuka halaman web baru.

03:45Jadi, ini di luar daripada aplikasi kita. Dia akan membuka website-nya banghaji.com. Seperti itu ya. Kalau tanpa link, tanpa kelas link, tanpa kelas eksternal, dia tidak akan bisa. Dia dianggap itu internal link-nya.

04:00Nah, itu penting diperhatikan ya di sini. Ini untuk eksternal. Berikutnya kita bahas yang internal. Setelah ini kita akan coba ya, kita akan buat halaman baru, bagaimana cara ngaksesnya gitu ya.

04:13Halaman internal itu ada dua. Ada dua. Yang pertama adalah page. Ini yang pertama. Page itu halaman di dalam satu buah file. Jadi, satu buah file itu bisa saja di Framework 7 itu berisi beberapa halaman sekaligus.

04:30Dipisahkan dengan apa? Dengan page dan data name untuk memi mema apa mendefinisikan atau mengidentifikasi ini page namanya apa gitu ya. Nah, yang penting diketahui itu adalah ini, cara nulisnya ya. href itu pakai tanda kayak gini semua.

04:46Ya. Jadi, tanda slash, kemudian namanya ini sebut saja alias. Alias atau nama. Ya, nama halamanlah kayak gitu ya. Lalu di sini ada teksnya, apa nih? Ini tulisannya yang bisa diklik nanti. Nah, kemudian ditutup dengan slash A.

05:06Nah, yang pertama yang bentuknya page, yang satu file bisa beberapa halaman, itu nulisnya nanti di bagian routes, routes ini yang ini tadi ya. Nih. Baris 31 sampai 33. Nanti di sini, ini nulisnya harus kayak gini nih.

05:23Ya. Nulisnya harus seperti itu pakai pet. Nah, tandanya adalah harus sama persis. Ada tanda slash di depan dan di belakang. Ya, jadi untuk menandakan itu nanti sebagai identifier-nya, identifikasinya ya. Jadi, pet satu bahasa kasarnya ya, yang di di routes-nya itu pet satu, itu nanti akan mengakses page name biodata.

05:50Nah, seperti itu. Oke, yang ini kita lewati ya, karena Framework 7 versi terbaru sepertinya sudah tidak menggunakan ini lagi. Ya, tidak pakai yang satu file bisa beberapa halaman.

06:04Dia menggunakan URL. Oke, karena dia menggunakan URL maka kita gunakan yang kedua ya, yang ini. Nah, ini sama persis dengan yang kita tuliskan di sini.

06:19Nah, seperti ini ya. Ini kan ada tanda pet ya, karena ini slash saja. Nah, itu mewakili apa? Kalau tanda slash saja kode link-nya adalah slash. Nanti yang dibuka adalah home HTML.

06:32Ya, kalau di sini contohkan eh pet-nya adalah slash, pet 2 slash. Itu cara nulisnya di routes-nya. Nah, dia akan manggil apa nanti kalau kita panggil pet 2? Yang dipanggil adalah file profil HTML.

06:48Ya, ini harus dipahami ya, karena nanti eh akan saya minta untuk membuat beberapa halaman yang harus bisa bolak-balik nanti. Kalau diklik link-nya dia bisa harus bolak-balik ke posisi yang benar. Nah, untuk memanggil halaman 2 ini tadi, pet 2 atau membuka file profil, kita harus bikinkan kayak gini link-nya. Ada tanda slash pet 2 slash. Jadi, tanda slash-nya itu harus ada ya.

07:12Nanti ada link pet pet 2 link, kalau diklik dia akan membuka profil. Nah, seperti itu caranya ya atau kita lihat di sini, ini yang akses. Tanda slash katanya. Oh, pada saat di akses Framework 7 kita setelah di-install tanda slash ini dia buka apa sih? Nah, lihat di sini, di routes ini ada tanda slash. Oh, ternyata yang dibuka adalah home HTML.

07:38Seperti itu. Nah, untuk membuktikan halaman ini adalah halaman home.html kita bisa edit nih yang isi yang ada di dalam file home. Bentar ya.

07:54Oke, kita bisa edit nih. Nih file home, buka aja file home ya. Nah, di sini bisa kita tambahkan nih. Ini kan welcome to framework 7 dan seterusnya ya. Nah, misalnya saya ubah nih yang di sini ya, hai. Nah, seperti ini saya nulisnya. Saya ganti nih ya, hai saya Muhammad Erpan sedang belajar web mobile menggunakan

08:20framework 7. Oke, seperti itu ya. Ini saya save. Nah, kemudian tampilannya tadi yang framework 7 kita di-refresh. Kita lihat ya perubahannya. Nah, seperti ini sudah berubah ya. Hai, saya Muhammad Erpan itu ada.

08:37Nah, padahal di sini bukan home.html yang diakses. Tetapi dia adalah indeks. Ya, indeks tapi indeks itu luarnya aja, bungkusnya aja. Bungkusnya, nanti dalamnya ganti-ganti itu tergantung apa? Ya, tergantung ini.

08:50Tergantung routes-nya yang dipanggil apa. Nah, seperti itu ya. Oke. Jadi ada yang buat link-nya ya. Yang memanggil, kemudian yang dipanggil harus sama namanya ini.

09:06Jadi kalau link-nya pet 2, nah cara nulisnya harus sama. Harus ada tanda slash di depan dan di belakang. Kalau pet 2, dia cari tuh pet 2 itu apa sih? Oh, file ini gitu misalnya ya. Oke, ini routes ya. Kita akan coba buat satu halaman baru seperti ini ya. Ini ada halaman home.