Yasya Indra Blog

  *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 tampil

  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 Lan

  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 Extract font yang sudah didownload. Biasanya berbentuk file .zip 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 ya

  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 f

  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   Lihat, ternyata benar. Data yang kirimkan tak mengirimkan apapun. Kita hanya menerima data

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 Langkah Langkah 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 set

  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 lan