*Picker

Pada postingan kali ini kita  akan membuat dropdown list atau select pada React Native. Dalam pembuatanya, ternyata tidak semudah memberikan tag tag tertentu seperti HTML. Ada package yang harus kita instal yaitu React Native Picker

Kalian bisa melihat dokumentasi seputar React Native Picker ini disini

Syntax

Props

Ada beberapa props dalam React Native Picker yang bisa kita manfaatkan. Props ini hanya bisa digunakan pada tag <Picker/>. Selebihnya kalian bisa melihat di dokumentasi yang sudah disematkan yaa

• enabled. Jika bernilai false maka pengguna tidak bisa memilih
  
• itemStyle. Untuk mengubah tampilan pada label
  
• mode. Untuk menentukan manakan item yang bisa ditampilkan
  
• onValueChanged. Sebuah callback function ketika dipilih maka Select akan menampilkan nilai yang kita pilih
  
• prompt. Judul dari dialog box dan hanya berfungsi pada Android
  
• selectedValue. Nilai yang ditampilkan
  
• style. Untuk mengubah tampilan dari Picker kita
  
• testID. Digunakan untuk melokasikan tampilan dalam end-to-end test

Ayo Kita Mulai!

Biasanya saya akan membuat Select ini ke dalam component tersendiri yang disebut atoms. Ini merupakan penerapan dari prinsip Atomic Design yang pernah saya jelaskan disini 

Install packagenya terlebih dahulu

npm install @react-native-picker/picker --save

Langkah 1: Buat folder Select berisi index.js. Lalu tulis kode berikut.

Kalian bisa meng-copy sebagian kode diatas dari dokumentasinya dari Github.

Untuk versi terbarunya ini (karena course yang saya ikuti masih menggunakan react-native-community), jangan lupa tambahkan useState. Untuk menginisiasi value pertama dari semua pilihan kita dari SelectBox kita.

Isikan useState dengan value yang sudah ada. Agar ia bisa ditampilkan sebagai data pertama kali yang muncul dari Picker

Langkah 2: Gunakan Select dengan mengimportnya. Disana tertulis import ke dalam ../../components karena saya sudah menerapkan prinsip Atomic Design

Sebenarnya kalian juga bisa mengimportnya langsung dari file index.js

Baca Juga: Berkenalan Terlebih Dahulu Apa Itu Atomic Design Sebelum Membuat Aplikasi Mobile Dengan React Native

Hasilnya

 

Kalian bisa menambahkan nilai nilai/pilihan pilihan dalam Select Box ini. 

Ikuti Serial Belajar React Native Di Sini!

Kesimpulan

Diperlukan sedikit pemahaman State Management menggunakan useState untuk menggunakan Picker. Agar setiap data yang kita pilih bisa muncul dalam sebuah Picker. Oiya, dalam pembuatanya pun ternyata dibutuhkan package tersendiri bernama react-native-picker

Ketika kita membuat aplikasi dengan React Native, tentu kita ingin aplikasi kita memiliki ilustrasi untuk menjelaskan kegunaan, pesan, atau hanya sekedar memperindah saja

Sayangnya, kita tak bisa menggunakan file JPEG, PNG, JPG atau format format lain yang kita kenal. Kita harus menggunakan file SVG. Dengan gambar SVG aplikasi kita bisa lebih mudah mengolahnya.

Mungkin untuk HTML, CSS, atau tete bengek teknologi Web lainnya, memasukkan gambar SVG di React Native tidak semudah mengisikan tag src. Ada beberapa langkah langkah yang harus dilakukan

instal beberapa package ini

npm install react-native-svg --save

npm install react-native-svg-transformer --save

Lalu isi file metro.config.js atau jika belum ada maka file baru

Maka file svg kita bisa langsung digunakan dengan mengimportnya

Hasilnya

Kesimpulan

Dibutuhkan beberapa package dan konfigurasi pada metro config kita, yang secara otomatis mengolah gambar gambar SVG kita pada aplikasi

Pernahkah kalian saat membuka suatu aplikasi, kalian akan disambut dengan tampilan dari logo perusahaan yang membuat atau melayani kalian dengan aplikasi tersebut?

Contohnya seperti aplikasi Tokopedia, dimana saat kita ingin membuka aplikasi untuk berbelanja maka aplikasi tersebut akan menyambut kita dengan tampilan seperti berikut

Apakah kita bisa membuatnya? Pada kesempatan kali ini saya akan menjelaskan bagaimana membuat SplashScreen. Betul, tampilan pertama saat kita membuka sebuah aplikasi. 

Splashscreen sangat bermanfaat untuk memberikan persona, impresi, kesan pertama saat membuka sebuah aplikasi. 

Selain menjadikan aplikasi kita unik. Splashscreen juga berfungsi agar pengguna bisa bersiap siap saat memutuskan memakai aplikasi kita untuk apa. Jadi, tampilan menu utama tidak langsung ditampilkan tiba tiba, begitu saja. 

Namun kita memberikan waktu sekian detik agar user bisa bersiap siap

Bagaimana cara membuat Splashscreen ini. Apakah sulit? Simak langkah langkahnya dibawah

Langkah Langkah

Buat dan buka project React Native kalian dan install package dibawah ini

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Lalu install juga react-navigation/stack. Saya disini menggunakan versi 5.x

npm install @react-navigation/stack@^5.x

Buat UI Splashscreen terlebih dahulu. Dengan cara kita membuat folder SplashScreen dan berisi index.js. Di file ini lah segala bentuk tampilan akan dibangun menggunakan kode

useEffect() berisi timeout seberapa lama SplashScreen muncul saat pertama kali membuka aplikasi. Untuk case kali ini saya memberikan waktu sekitar 2000 ms atau 2 detik

fontFamily menggunakan font Poppins-Medium, ini merupakan font dari font pihak ketiga dari situs Dafont 

navigation adalah props yang dikirimkan pada komponen Splashscreen kita ini. Navigation sudah berisi segala yang kita butuhkan dari package React Navigation. Salah satu fungsi yang akan kita gunakan adalah navigate() yang akan kita masukkan parameter 'Sign In' atau nama komponen yang sudah kita tentukan 

Buat folder bernama router berisi index.js

Stack berisi function createStackNavigator yang akan mengalihkan halaman satu ke halaman lain

options berisi headerShown bernilai falsse untuk menyembunyikan komponen tambahan default.

name bisa kita isi dengan nilai apapun (usahakan nama yang menjelaskan komponen kita), ini akan menjadi penanda agar halaman satu bisa pergi ke halaman lain

Pada file App.js isikan kode berikut

App disini kita tulis kodenya seperti diatas, karena file App menjadi root yang menginisiasi apa saja yang kita perlukan. Salah satunya Router yang kita bungkus dengan NavigationContainer. Jangan lupa untuk mengimport NavigationContainer dari  '@react-navigation/native';

Khusus untuk file App.js tambahkan kode 

import 'react-native-gesture-handler';

di paling atas

Hasilnya

Kesimpulan

Dibutuhkan React Navigation agar aplikasi android bisa beralih dari halaman satu ke halaman lain. Anggaplah SplashScreen adalah halaman dari sebuah aplikasi android. Namun bedanya, SplashScreen kita harus mengatur durasi ia muncul di hadapan kita saat membuka aplikasi

gambar: unsplashed

Terkadang saat kita membuat aplikasi di React Native untuk keperluan mobile. Untuk memperindah dan mempercantk tampilan, kita membutuhkan custom font. Hal ini bisa menjadikan UI aplikasi kita lebih bervariasi dan gak itu itu aja

Secara default, React Native sudah memiliki gaya font tersendiri. Namun ga ada salahnya, kalo kita ingin menambahkannya dan meng custom dari pihak ketiga seperti Google Font, Dafont atau font font yang kita download

Bagaimana Caranya?

Langkah Langkah

Download Font Yang Diinginkan

Kalian bisa pergi ke situs situs yang menyediakan font font gratis. Salah satu situs yang paling kita kenal adalah Dafont

dafont

Buat Folder Baru Bernama assets

Letakkan di folder ./android/app/src/main
 

.android/app/src/main

Isi folder assets dengan font yang sudah kita download dan extract. Untuk font biasanya ia berbentuk .ttf

Gunakan Pada Style Sesuai Dengan Nama Font

fontFamily:'nama font yang diinginkan'

Kita lihat bagaimana hasilnya

hasil akhir

Kesimpulan

Sebenarnya sangat sederhana sekali untuk menambahkan font suka suka pada project React Native. Hanya dengan memindahkan ke dalam folder tertentu saja, dan mengetikkan nama font yang diinginkan. Kini aplikasi kita bisa memiliki font sesuai dengan selera

Sumber: instagram.com/komputisme

Dalam menjalankan aplikasi React Native, ada prinsip yang bisa kita lakukan untuk mempermudah segala konfigurasi.

Prinsip yang akan kita bahas postingan kali ini adalah Atomic Design

Apa Itu Atomic Design?

Menurut halaman dari situs Binus University, Atomic Desain yang dibuat oleh Brad Frost adalah salah satu metodelogi yang dapat digunakan untuk mempercepat proses pembuatan modular desain. Konsep ini pertama kali dirilis 5 tahun lalu. Brad Frost dan Dave Olsen menyatakan untuk membuat system, tidak hanya sekedar laman. 

Kabar baiknya, prinsip ini bisa kita terapkan dalam pembuatan aplikasi terutama aplikasi mobile yang dibangun menggunakan React Native

Langkah Langkah

Buat folder src yang berisi folder folder berikut

• assets

Assets adalah folder yang berisi file file gambar, audio, css, javascipt yang berguna untuk mengolah tampilan atau material yang mendukung tujuan aplikasi kita dibuat

• components

Components berisi file file yang bisa kita gunakan lagi. Salah satu filenya adalah file component react yang memiliki konsep class based atau functional based

• config

Config akan berisi file yang menjalankan beberapa pengaturan konfigurasi aplikasi ini. Bisa fungsi API, library, atau hal yang bermanfaat untuk menjalankan aplikasi ini

• pages

 Berisi halaman halaman yang dibuat dari UI dari AdobeXD atau slicing

• redux

Redux berisi folder yang bermanfaat untuk mengolah state pada aplikasi kita, sehingga memori tidak cepat terisi penuh sehingga menyebabkan aplikasi kita menjadi lemot

• router

Router berisi file yang mengantarkan halaman aplikasi ke aplikasi lain

• utils

Utils berisi script atau kode yang memiliki fungsi tertentu dan dapat dipindahkan ke framework manapun, project manapun. 

Ketika kita membuat aplikasi Laravel, terkadang proses tidak semulus apa yang kita bayangkan. Akan ada beberapa kendala yang dihadapi, salah satunya adalah ketika kita sudah memiliki data di database namun halaman Laravel kita tidak mau mengirimkan

Apa Yang Sebenarnya Terjadi?

Kendala terdapat di dalam file controller kita. Semisal kita ingin mengirimkan data ke dalam halaman index, create, atau edit. Namun ternyata halaman kita tidak mengirimkan apa apa, kita harus menganalisa file controller terlebih dahulu

Lalu melacaknya, dan lihat apa yang salah. Biasanya, file controller memiliki parent dengan file Model. Dimana disana, segala rule berkaitan dengan field, data, relasi database diatur sedemikian rupa. Jangan jangan disana lah letak errornya

Solusi

Pertama, coba kita return terlebih dahulu controller kita untuk melihat, apakah betul data tidak terkirimkan

Lalu kita hasilnya di web kita

 

 

Dan coba kita hasilnya, apakah mengembalikan sesuatu?

WAHHH. TERNYATA BERHASIL

Edit file controller transaction, dan kembalikan view seperti semulanya, dan lihat apakah view berhasil menampilkan semua data data kita?

Kali ini saya akan menjelaskan bagaimana membuat tombol upload file terutama gambar kepada file kita

Pastikan kita sudah mempunyai field image di dalam tabel

Tentukan bahwa field tersebut bertipe data string dan nullable. Kita bisa mengaturnya pada file migration

            $table->string('image')->nullable();

Konfigurasi .env

Buat tombol upload file

Buat kode script dimana file yang kita upload akan memunculkan previewnya di samping tombol upload tersebut

Kita coba

Lalu masukkan data gambar yang ada dengan kode ini di dalam file controller, method store().

post-images merupakan nama folder, kita bisa merubahnya dengan nama apapun

Jangan lupa untuk memasukkan kode ke dalam HTML kita dengan function dari php

Lalu kita masukkan perintah di cmd

Perintah ini berguna untuk melokasikan path gambar kita di dalam sistem, sehingga bisa terbaca pada source di dalam HTML

Kita lihat hasilnya

Melanjutkan serial Laravel sebelumnya, Kali ini saya akan membeberkan langkah langkah memasukkan data ke dalam database MySQL.

Jika kalian mengikuti tutorial persiapan ngoding menggunakan Laravel di blog ini. Pastinya, MySQL Workspace sudah terinstal. MySQL Workbenche sangat berguna untuk memantau perubahan database, isi dari sebuah database, beserta tata bengek fiturnya yang membantu kita untuk pengelolaannya

Ketika kita membuat aplikasi CRUD (Create, Read, Update, Delete) maka hal yang paling terpenting adalah bagaimana kita bisa menyimpan data data ini ke dalam database. 

Berita baiknya, Laravel kini memiliki cara yang sangat mudah untuk melakukan itu semua

Baca Juga: Convert Judul Blog Menjadi Permalink Dengan Cara Ini!

Langkah Langkah

Pertama. Membuat Form 

Pertama kita harus membuat Form beserta field dan name nya

Kedua. Buka DasboardPostController.php

yang berada di /app/Http/Controllers

Penjelasan

$request->validate() berisi array yang memiliki rule validation dari setiap data yang akan dimasukkan. Seperti jumlah karakter, atau harus diisi (required)

Post::create. 

Post merupakan model dari database yang sudah kita buat

Post::create, create adalah method yang berfungsi untuk memasukkan data ke dalam tabel database

redirect. adalah function dimana ia akan mengembalikan halaman yang kita inginkan. Dalam kasus ini, setelah data berhasil ditambahkan, web akan langsung mengembalikan halaman /dashboard/posts yang berisi semua post yang pernah dibuat

with(), adalah fungsi dimana kita bisa mengirimkan message berserta isinya

Jika Post tidak berfungsi atau memberikan pesan error, maka klik kanan dan pilih Import Class

Dalam membuat program terkadang kita membutuhkan sekumpulan karakter sederhana namun itu bisa mewakili apa yang kita inginkan. Termasuk saat kita ingin memproses data data tertentu dari database kita. Untuk beberapa kasus, kita takkan mungkin menunjukan keseluruhan nama, alamat, nomer handphone secara gamblang pada pengguna. 

Selain hal ini bisa menjadikan aplikasi kita tidak aman dan rentan disusupi hacker. Cara ini juga sangat mempermudah kita untuk merepresentasikan data yang kita inginkan hanya dengan beberapa kata atau karakter saja

Salah satu praktek yang biasa dilakukan oleh para programmer adalah dengan menggunakan sesuatu yang disebut, Slug

Apa Itu Slug? Apa Kegunaannya?

Slug adalah sekumpulan karakter yang bertujuan menjadikan sebuah URL menjadi lebih bersih.

Jika kalian pernah menulis blog maka slug ini mirip mirip dengan permalink

Katakan kalian memiliki sebuah postingan blog berjudul. Cara Menumbuhkan Rambut Dalam 30 Hari. Beberapa dari kalian ada yang tidak berminat langsung menuliskan keseluruhan judul tersebut di papan URL, seperti ini

yasyaindra.com/cara-menumbuhkan-rambut-dalam-30-hari

Karena kalian mengetahui lebih singkat menuliskan URL diatas dengan cara seperti ini

yasyaindra.com/rambut-tumbuh-30-hari

Lebih sederhana, singkat, dan ramah di mesin pencari Google

Ramah di mesin pencari artinya postingan yang kalian tulis bisa menjadi hasil pencarian teratas di Google. Dan pundi pundi traffic semakin ramai

Di sebagian kasus, menggunakan slug juga bisa sebagai ID. Contohnya, jika kalian membuat aplikasi database mahasiswa. Alih alih kita menggunakan id sebagai representasi data yang diinginkan, kita bisa menggunakan slug yang berisi (barang kali) namanya

Ini jauh lebih efektif dan aman. Karena dengan ini hacker akan lebih kesulitan menebak identitas seseorang

Begini Langkah Langkah Membuatnya

Pertama

Instal Eloquent Sluggable

composer require cviebrock/eloquent-sluggable

Kedua

Masukkan kode ini ke dalam Model data yang telah dibuat. Dalam kasus ini saya telah membuat model Student

Ketiga

Buat dua field. Field pertama berguna untuk nama yang ingin diconvert sebagai slug. field kedua berguna untuk melihat apakah nama tersebut berhasil dibuat

Keempat

Masukkan kode javascript dibawah form tersebut

Kelima

Buat route agar kita bisa mengirimkan request kepada API yang telah tertanam pada Sluggable

Keenam

Kita belum membuat method checkSlug pada Controller. Mari kita buat dulu

Ketujuh

Mari kita coba

Baca Juga: Baru Mulai Ngoding Pake Laravel 8? Yuk Cari Tahu Apa Saja Persiapannya!