Powered by Blogger.
facebook twitter instagram pinterest bloglovin Email

Yasya Indra Blog

Éclairage et ingénierie

 


Sekali kali kita belajar sesuatu di luar programming

Pernah ga sih ketika kita belajar sesuatu itu susah banget buat ngerti dan fahamnya? Saya serirng begitu dan ternyata mungkin ada kendala disana yang saya sedang gali juga

Hingga akhirnya saya menyadari bahwa seperti keahlian pada umumnya berfikir juga memiliki langkah langkahnya atau seninya

Garis bawahi, Berfikir itu ada seninya

Namun gimana cara memulainya?

Baca Juga: Teknologi Teknologi Yang Bisa Kamu Pelajari Dengan Laptop Kentang Di Tahun 2020

Berfikir Secara Induktif dan Deduktif


Dunia ini memiliki banyak sekali variable atau banyak sekali informasi. Kalau cara kita belajar adalah dengan menghafalnya satu persatu maka pasti kita akan pusing dan blenger juga

Sebagai contoh, bayangkan kita harus menghafal semua nama hewan hewan mamalia yang di darat maupun di air. Kita cukup mempelajari ciri ciri yang ada dari seekor mamalia

Nahh. Inilah yang disebut berfikir induktif

Pengertian Berfikir Induktif

Berfikir induktif adalah cara kita memahami bahwa terdapat sebuah pola dari segala informasi yang ada di dunia ini.

Perlu difahami bahwa cara kerja ilmu yang ada dunia adalah berawal kita mengetahui pola, teori saintifik yang terus diuji berkali kali di dunia ini

Rumus pythagoras yang kita fahami sekarang ini bukan dengan cara ujug ujug rumus tersebut ada dan kita meyakini bahwa inilah cara untuk mendapatkan ukuran panjang sisi salah satu segitiga. Namun rumus tersebut di uji, dan ada beberapa fundamental untuk memahaminya 

Kita juga bisa menerapkannya dalam belajar. Saya akan menggunakan konteksnya dengan keahlian yang saat ini saya pelajari yaitu prinsip prinsip programming/pemograman

Contohnya saat belajar tentang konsep Middleware, yang artikelnya bisa kalian baca disini

Baca Juga: Konsep Middleware dan Cara Menggunakannya Di NodeJS

Saya tidak memahami semua package middleware seperti body parser, multer, package package lain.

Namun saya hanya mengingat garis besar sebuah middleware bekerja

Sehingga tanpa perlu buang buang waktu dan tenaga untuk mengingat. Saya hanya mengingat sebagian saja dan mencoba untuk menerapkannya secara umum. 

Proses saya menerapkan sebagian pola dari sebuah sistem bekerja disebut dengan Deduktif

Pengertian Berfikir Deduktif

Proses ini adalah yang paling krusial sekaligus menantang ketika belajar. Belajar bukanlah proses satu arah dimana kita hanya menerima informasi saja. Namun kita juga harus menguji informasi yang kita terima agar mengetahui ilmu tersebut sudah valid atau belum

Tentu semua tergantung domain ilmu yang kita miliki. Bagi saya, ilmu programming mudah dibuktikan lewat baris baris kode. Seumpama salah maka kesalahan tersebut akan muncul lewat console.

Bagi ilmu ilmu yang domainnya jelas dan cenderung subjektif. Seperti seni, public speaking, dan lain sebagainya. Maka salah satu cara membuktikannya adalah dengan memiliki audience. Artinya kalian bisa menunjukkan bahwa karya yang kalian hasilkan terbukti disukai oleh pasarnya atau sudah dinilai bagus oleh ahlinya. Biasanya sih dari dosen, guru dengan sertifikasi 
Share
Tweet
Pin
Share
No comments

 


Siapa disini yang ketika ngoding sering mengalami error? Padahal semua langkah langkahnya sudah persis apa yang dilakukan dalam course video kalian?

Saya juga sering mengalaminya. Kalau kalian beruntung kalian bisa bertanya di forum Stackoverflow atau Discord. Mungkin beberapa orang yang pernah mengikuti course yang sama dengan kalian bisa memberikan jawaban yang benar. Namun gimana kalo ternyata tidak ada solusi untuk error kalian?

Maka jawabannya bisa jadi ada di dalam postingan ini. Saya akan memberi tahukannya kepada kalian. Tak hanya tips supaya kalian tak lagi mengalami error, saya juga akan menjelaskan beberapa penyebabnya

Baca Juga: Lebih Baik Langsung Bikin Project Atau Nonton Video Course Dulu?

Pastikan Kalian Menggunakan Versi Package, Libary, Tool, Yang Sama

Tak bisa dipungkiri libray, framework, atau tools yang digunakan oleh guru guru course kita menggunakan versi lawas. Karena bayangkan saja, jika video yang kita ikuti itu sudah 1 tahun yang lalu, maka ada beberapa perubahan yang terjadi. Teknologi semakin berubah, informasi semakin berubah, paradigma pemograman sudah berubah, sehingga kita perlu menggunakan library yang pesis sama dan setidaknya saat ngoding, langkah langkah yang kita ikuti sudah sesuai

Coba bayangkan kalo kalian menggunakan versi yang berbeda atau versi yang paling terbaru (apalagi kalau masih beta dan unstable) maka error akan terus menimpa kita

Bagaimana Cara Mengetahuinya?

Kalian bisa melihatnya di file package.json atau perhatikan versi yang digunakan dalam course tersebut. Meskipun guru guru kita tidak menyebutkannya

Kalau kalian sampai tidak tahu sama sekali mungkin karena tidak ada package.json atau minim informasi dari course yang kalian ikuti



Seumpama berupa node package, kalian bisa mampir ke situs npm dan lihat tab version. Lalu perhatikan versi berapa dengan jumlah download terbanyak

 


Gambar diatas merupakan detail download dari package yang bernama body-parser. Kalian bisa menyesuaikan dengan mencari package yang kalian inginkan

Kesimpulan

Kebanyakan error yang dialami saat kita mengikuti online course adalah kita tidak menggunakan peralatan perang yang sama. Sehingga hasil atau cara penggunaannya pun barang kali bisa jadi berbeda. Maka pastikan kalian menggunakan versi yang persis digunakan di dalam course online kalian

Share
Tweet
Pin
Share
No comments

Barang kali disini ada yang sering menggunakan MySQL dalam meng-query atau mengambil data dari database dengan syntax seperti ini

Select * from students where (class = '11A' or class = '11B') and gender='M'

Ternyata kita bisa menggunakan syntax yang berbentuk object untuk mendapatkan query yang kita inginkan. Tanpa harus menggunakan syntax yang blibet seperti diatas

MongoDB adalah salah satu database berbasis object yang mendukung hal tersebut. Dikarenakan MongoDB adalah database yang setiap datanya berbasis object alias key dan value. Maka dalam mengambil data datanya pun semudah kita menggunakan data yang berbentuk object

Baca Juga: Cara Membuat CRUD API (Create, Read, Update, Delete) Dengan NodeJS dan MongoDB

Postingan kali ini akan membahas beberapa hal antara lain

  • Apa Itu MongoDB?
  • Apa Itu Mongoose?
  • Apa Itu ODM (Object Document Mapping) dan Penerapannya?
  • Perbedaan Antara ODM dan ORM?
  • Function MongoDB Yang Sering Digunakan Untuk CRUD

Apa Itu MongoDB?

MongoDB adalah database berbasis document-oriented. Artinya dalam database MongoDB segala data itu ditunjukkan sebagai object JSON bukan beberapa field ya
ng kita jumpai dalam MySQL (Sengaja saya kasih perbandingan terus supaya gampang difahami)

contoh file JSON yang diambil dari MongoDB

Akan tetapi untuk bisa mendapatkan data seperti ini kita perlu menerapkan sebuah metode yang berbeda dengan pengambilan data dari MySQL (ORM) yaitu ODM (Object Document Mapping). Penjelasan lebih lengkapnya bisa dibaca disini

Mongoose adalah tool yang memungkinkan kita melakukan hal demikian

Apa Itu Mongoose?

sesuai dengan defisini yang tertulis di website resminya. elegant mongodb object modeling for node.js

modelling object mongodb yang elegan

Well, definisi tersebut memang apa adanya. Kalo kalian mencoba mengambil object dengan MongoDB Client kalian dipusingkan dengan berbagai macam syntax yang jlimet
Contohnya seperti ini


Kita bisa menggunakan ODM untuk mempermudah memasukkan data, mengambil data, menghapus dan mengubah data. Dengan kode yang sederhana

Baca Juga: Cara Cara Menginstal MongoDB di Docker dan Menggunakannya

Apa Itu ODM dan Bagaimana Cara Menggunakannya? Cara Menerapkannya?

ODM adalah teknik dimana kita mengambil data yang berbentuk JSON atau object. Katakan ODM ini merupakan ORM tapi data yang diambil adalah json atau object (key value) lahhh

Cara menggunakannya lumayan sederhana yaitu

  • Pastikan MongoDB Server sudah menyala (saya biasanya menggunakan Docker)
  • Buat file app.js (semacam file root yang menginisiai file lain)
  • Koneksikan Mongoose
  • Buat Schema (skema)
  • Buat router
Semua langkah diatas sudah saya terapkan ketika membuat aplikasi CRUD menggunakan MongoDB dan NodeJS. Bisa dilihat disini

Pertama kita harus tahu bagaimana cara kita mengambil dengan mongoose dan tanpa mongoose

Tanpa Mongoose


Pembahasan:

Tanpa mongoose atau teknik ODM kita harus menchaining response yang diberikan function collection. Ini sangat melelahkan apalagi kalo response yang dikembalikan sangat banyak

Dengan Mongoose dan teknikk ODM. (Sudah termasuk menggunakan route, dan model)



Pembahasan:

Dengan mongoose promise diterima dengan sistem async await dimana ia menjadikan konsep asyncronous terlebih syncronouos dan mudah dipahami. Mau seberapa banyak pun promise yang diterima, semuanya bisa ditangani dengan menambah code await
Function MongoDB yang biasanya digunakan untuk meng-query data data dari mongodb diterima sebagai promise

Perbedaan ODM dan ORM?

Perbedaan utama antara ODM dan ORM adalah ORM adalah teknik dimana kita mengambil data dari spreadsheet dimana dan field field layaknya Ms Excel sedangkan ODM adalah teknik yang persis seperti ORM namun bedanya dengan ODM kita tak perlu memikirikan harus menambahkan field apa saja seumpama ingin menambahkan data, dan lain sebagainya. Dengan kata lain, ODM adalah teknik dimana kita bisa memasukkan data apapun tanpa harus menambahkan skema

Penjelasan ini bisa dibaca dalam bahasa inggris lewat tulisan Juliana Tyler di Medium
Share
Tweet
Pin
Share
No comments




Pada postingan kali ini saya akan menshare cara membuat API CRUD sederhana menggunakan MongoDB.

Dalam pengimpelementasiannya. Saya akan menggunakan tool
  • MongoDB (Sudah pasti)
  • NodeJS
  • ExpressJS
  • Mongoose
  • Postman
  • Robot 3T
  • Docker

Apa Itu CRUD?

CRUD merupakans sebuah konsep aplikasi dimana sebuah aplikasi memungkinkan membuat (create), membaca (read), mengubah (update), dan menghapus (delete). Meskipun terdengar sangat sederhana konsep CRUD ini menjadi pondasi awal pada setiap aplikasi di dunia ini.

Coba sebutkan ada ga aplikasi yang sama sekali tidak mempunyai fitur yang CRUD tawarkan? Tidak ada kan?

Hanya saja semakin canggih sebuah aplikasi terkadang konsep CRUDnya menjadi lebih rumit. Contohnya saat menambah data (create) kita harus menambahkan sistem validasi terlebih dahulu. Lalu untuk update, kita harus mengecheck apakah data yang kita ingin ubah sudah pernah mengalami perubahan atau tidak

Kali ini kita akan belajar bersama membuat aplikasi CRUD menggunakan MongoDB

Kenapa MongoDB?

MongoDB merupakan database yang menggunakan schema object document. Dimana setiap data data yang disimpan itu berbentuk object. Selama ini mungkin kita mengenal MySQL sebagai database yang sifatnya table dan harus dischemakan terlebih dahulu, artinya kita harus mengatur dulu. Field ini harus berisi integer, dan itu harus string. Sedangkan MongoDB kita bebas memasukkan field dan value apapun. Sedangkan pembuatan schema itu sangatlah opsional

Langkah Langkah Membuat CRUD Menggunakan MongoDB dan NodeJS

Pertama, nyalakan server MongoDB kalian

Pastikan kalian sudah menginstal mongodb dan sudah mengetahui manakah port yang bisa diakses. Saya sudah menginstal MongoDB di Docker. Kalian bisa membacanya disini atau melalui channel Youtube Programming Zaman Now

Baca Juga: Cara Membuat REST API Hanya Dengan NodeJS. Tanpa Framework!

Untuk memastikan apakah MongoDB server kita sudah berjalan kita cek melalui Robo 3T


Kedua, Buat folder dan ketikkan perintan npm init -y dan npm install di dalam folder tersebut lewat terminal/cmd
npm init -y
npm install
npm init berfungsi folder kita mempunyai fitur fitur yang disediakan nodejs dan npm install berfungsi agar folder kita memiliki berbagai macam node modules yang beberapa tool di dalamnya akan kita gunakan
PASTIKAN SUDAH MENGINSTAL NODEJS

Ketiga, install package yang akan kita butuhkan. express mongoose nodemon dotenv.
Saya juga akan menyisipkan versinya agar meminimalisir kendala saat kalian mengikuti tutorial di blog ini
npm i dotenv@12.0.3 express@4.17.2 mongoose@6.1.6 nodemon@2.0.15
  • dotenv akan berfungsi untuk menyimpan variabel environment
  • mongoose akan berfungsi sebagai package yang menghubungkan mongodb
  • nodemon akan berfungsi melihat atau mengawasi server berjalan secara real time tanpa harus kita harus menjalankan file entry

Keempat, buat file app.js dan masukkan kode dibawah


Pembahasan:
  • Pertama kita membuat variabel dari package express dan juga membutuhkan variabel yang berisi port dan router (kita akan membahasnya dibawah) semua variabel ini akan kita gunakan dari fungsi yang tersimpan dari variabel/module tersebut (contohnya express) atau port itu sendiri sehingga kita tak lagi susah susah mengganti port di banyak file. Begitu pula router yang akan kita gunakan untuk menunjukan url api kita. Seperti /create, /delete, /update, dan lain sebagainya (kurang lebih) 

Kelima, buat file yang berfungsi untuk konek dengan mongodb menggunakan mongoose.
berikan file itu nama mongoose.js dengan kode berikut


Pembahasan:
  • Sepertinya komentar yang ada diatas cukup menjelaskan hehehehe. Namun saya ingin menjabarkan sedikit tentang mongoose.connect(). Ia menerima dua parameter yaitu url mongodb kita (bisa dilihat di Docker kalian, kalo kalian menggunakan Docker) dan opsi dimana ia menjadi aturan yang belaku saat komunikasi data antar mongodb dan nodejs terjadi

Keenam. Buat schema sebagai wadah data

Seperti yang sudah dijelaskan sebelumnya bahwa pembuatan schema dalam MongoDB sifatnya sangat opsional, sehingga sebenarnya tidak apa apa seumpama kita tidak membuatnya. Namun untuk kasus ini kita harus membuatnya dulu untuk memudahkan penerapan ODM dalam aplikasi kita. Apa Itu ODM? Coba deh baca postingan saya yang ini biar faham


Pembahasan

  • Schema dalam MongoDB itu dibuat dalam bentuk object. Key pertama (name, age, status) itu merupakan nama field yang kita inginkan.
  • Lalu key key ini berisi value (atau barang kali object lagi (jadi ada object dalam object)) yang berisi menggambarkan tipe data dari field field ini. Bisa string, atau integer. Biasanya si saya menggunakan string dan integer (yang dituliskan dengan Number)
  • Namun jika field kita memiliki opsi atau sifat field  yang lebih maka kita harus menggunakan object lagi yang berisi
    • type, tipe data
    • enum, beberapa data yang diterima
    • default, adalah nilai yang akan diisikan secara otomatis apabila filed tersebut ternyata dikosongkan
    • required, menandakan bahwa field tersebut harus diisi. Kita juga bisa memberikan pesan error dengan cara menuliskan array. index 0 = true, index 1 = isi pesan errornya
  • mongoose.model menerima dua parameter. Yang pertama nama model yang diinginkan (bebas) dan yang kedua adalah schema data yang sudah kita buat

Ketujuh, kita buat file router. Inilah bagian krusial karena setiap route akan memiliki fungsinya masing masing

Sebelum kita lanjut kita harus faham dulu url mana saja yang akan menjadi API kita untuk menghapus, membuat, mengubah, dan membaca data

Method: GET
URL: http://localhost:3000/users
Kegunaan: Membaca data data user

Method: POST
URL: http://localhost:3000/users
Kegunaan: Mengirimkan data data user

Method: PUT
URL: http://localhost:3000/users/:id
Kegunaan: Mengubah data data user berdasarkan id user

Method: DELETE
URL: http://localhost:3000/users/:id
Kegunaan: Menghapus data berdasarkan id user (maka dari itu kita membutuhkan paramater id di dalam url). Nantinya :id akan diganti dengan id user yang sembarangan misal. http://localhost:3000/users/7832837824

Setelah kita mengetahui macam macam kegunaan api diatas, kita bisa menuliskannya menjadi kode dibawah

Kedelapan, kita nyalakan server kita menggunakan nodemon

Tambahkan kode berikut di file package.json. Sehingga package.json akan terlihat sebagai berikut

    "start": "nodemon app.js"


Kalo sudah kita ketikkan perintah npm run start di terminal/cmd kita. Dan akan muncul seperti ini


Kita coba API kita menggunakan Postman


Misal. Kita mencoba untuk melihat seluruh data. dan ternyata sudah works! ✅

Mengirimkan data ✅
Jangan lupa untuk mengisi body data di x-www-form-urlencoded


Menghapus data ✅
id diambil dari data user yang kita lihat barusan ya

Mengubah data ✅

Seumpama kita lihat database kita melalui Robo 3T, semua data yang kita kirimkan tersimpan dengan aman ✅


Kesimpulan

Kita sudah berhasil membuat API yang berfungsi untuk membaca, mengubah, menghapus dan membaca data dan mengujinya di Postman. 

Kalau bisa kita rangkum proses yang banyaknya diatas, ternyata membuat CRUD API itu dimulai dengan memastikan apakah mongodb sudah konek dan selanjutnya kita merangkai agar setuap route yang dikirim memiliki controller atau fungsinya masing masing untuk berbagai macam CRUD

Tentunya semua itu tak semudah kelihatannya. Membutuhkan banyak latihan dan percobaan gagal berkali kali

Namun tenang saja, kalau kalian bingung kalian bisa tanyakan di kolom komentar dibawah atau tanya lewat DM

Sourcecode dari project ini bisa kalian akses melalui melalui link berikut
Dokumentasi dari API diatas juga bisa dibaca disini

Share
Tweet
Pin
Share
No comments

 


Ketika membuat aplikasi web kita membutuhkan middleware untuk mengolah segala transaksi data, antar request dan response

Contoh lumrahnya adalah ketika kita menerima sebuah response dan di dalamnya berisi body yang akan kita tampilkan dalam view html kita. Namun, kita tidak bisa menampilkannya begitu saja. Kita perlu mengubahnya menjadi file json dengan middleware

Salah satu contoh middleware yang kerap digunakan untuk hal itu adalah urlencoded dan json yang merupakan middleware bawaan dari ExpressJS

Postingan ini akan membahas beberapa hal

  • Konsep dan Cara Kerja Web
  • Apa Itu Middleware
  • Illustrasi Middleware Dan Penerapannya Kedalam Kode Kita
  • Uji Coba
  • Case Yang Barang Kali Rumit
  • Kesimpulan Yang Di Dapat

Namun untuk bisa memahami hal sejauh itu. Kita harus faham dulu konsepnya

Konsep Web Bekerja

Web (seperti yang kita tahu) itu menerima response dan mengirimkan request. Setiap web. Bahkan web Facebook yang biasa kita pake itu juga harus mengirimkan request.

Request biasanya berisi data data yang kita masukkan melalui form

Sedangkan response merupakan segala data yang kita terima, data data yang muncul di layar monitor kita

Namun apakah benar benar semudah itu konsep web bekerja. Hanya dengan transaksi request dan response?

Untuk beberapa kasus, bisa jadi iya. Namun, untuk cases yang lebih besar dan rumit lagi. Kita memerlukan middleware untuk mengolah tengah tengah request dan response saling berkomunikasi

Apa Itu Middleware?

Seperti namanya, middle (tengah) dan ware (perangkat) berarti middleware artinya perangkat yang ada di tengah tengah. Tengah tengah mana? tengah tengah antar komunikasi 

illustrasi konsep middleware

Lalu bagaimana menerapkan konsep diatas ke dalam kode program kita? Berikut langkah langkahnya

Langkah Langkah

Kita memerlukan library dari express dan nodemon. Instal dulu menggunakan npm

npm i express nodemon

Lalu kita buat script untuk web server kita dengan kode berikut

./app.js

Kode diatas bisa kalian lihat disini

Lalu kita buat middleware dengan kode berikut. Letakkan diatas app.get agar sebelum kita masuk ke route yang dituju


Untuk memahmi middleware ini. Ayo kita coba dari percobaan sederhana contohnya adalah dengan mengubah sebuah kalimat dengan middleware

Untuk dapat melakukan itu. Kita harus nyalakan aplikasi kita. 

Buka file package.json dan tambahkan baris kode berikut


Lalu ketikkan command berikut di terminal

npm run start

Ketika server sudah berjalan. Kita akan mencoba agar request berisi nama dan umur, lalu kita akan membuat sebuah kalimat yang diambil dari kedua variabel ini

Caranya buat route seperti ini


Kita juga akan mengubah middleware menjadi berikut


Lalu kita coba di browser



Lalu di terminal akan menunjukkan hasil berikut

wkwkwk maaf kalo kalimatnya ga jelas

Dari sini apa yang bisa disimpulkan?

Artinya kita mengubah dan mengolah request yang dikirimkan dan menerikam response menjadi sebuah kata kata lain.

Kesimpulan

Ini merupakan pengimplementasian yang sangat sederhanaaa. Untuk case yang lebih rumit middleware akan membantu segala komunikasi request response agar bisa bermanfaat untuk kebutuhan web

Contohnya adalah ketika response dari sebuah API yang belum berbentuk JSON. Sedangkan kita butuh data yang berbentuk JSON agar bisa kita deklarasikan kedalam tampilan view website

Share
Tweet
Pin
Share
No comments

 


Saat kita masuk dalam sebuah halaman web terkadang kita membutuhkan semacam indikator di halaman manakah kita berada. Contohnya, saat kita masuk ke halaman Home. Maka kita melihat apakah navbar di atas web itu terdapat warna tertentu yang menandakan kita berada di halaman web

Begitu pula saat di halaman transaction, maka navbar juga akan menunjukan bahwa kita ada di halaman transaction

Bagaimana cara membuatnya di project NextJS kita?

  • Menggunakan next/router
  • Menggunakan classnames
  • Menggunakan pengkondisian ternary

Langkah Langkah

next/router berisi library yang membantu kita mengengineer apapun yang terkait dengan routing pada NextJS. Termasuk saat kita ingin menentukan manakah halaman aktif dimana kita berada di dalamnya

Cara untuk menggunakannya mudah. Ketika  kode berikut

import {useRouter} from 'next/router'

Lalu masukkan kedalam sebuah const dengan nama router

const router = useRouter()

useRouter akan berisi method pathname dimana ia akan mengembalikan/memberi tahu kita dimana url kita berada

console.log(router.pathnames)

Lalu kita terapkan segala variabel ini kedalam sebuah pengkondisian. Yang mana hasilnya nanti akan kita letakkan kedalam sebuah class

Sayangnya menggunakan class dalam component React berbeda dengan HTML biasa. Kita harus menggunakan classname. Semua itu sudah pernah saya terapkan ketika membuat component Navbar disini

Kita juga akan menggunakan classname ini untuk meletakkan class active. Agar Navlink memiliki warna berbeda saat kita masuk kedalam sebuah halaman website


href diambil dari dari props link yang dimiliki oleh component navbar

Pengkondisian diatas memiliki alur dimana jika router.pathname yang ada itu sama dengan isi href yang client pinta. Maka akan mengembalikan class active dan akan mengakibatkan navlink berubah warna

Jika kita melihat kode secara penuh bisa dilihat sebagai berikut


Kesimpulan

Menggunakan pengkondisian untuk mengimbuhkan active kedalam class component dalam NextJS jauh lebih mudah. Cukup dengan mencocokan router.pathname dengan href yang kita miliki dengan operator
Share
Tweet
Pin
Share
No comments

 

Ketika kita ingin membuat website, terkadang website kita masih berbentuk struktur HTML polos biasa yang tidak tersentuh dengan framework apapun

Lalu kita ingin mengubahnya kedalam project NextJS agar segala fungsionalitas seperti routing dari halaman satu ke halaman lain bisa cepat. Atau kita ingin menghubungkan tampilan HTML tersebut dengan sistem backend yang sudah disediakan

Namun bagaimana caranya? Bagaimana mengubah susunan HTML menjadi struktur NextJS? 

Kali ini, saya akan menjelaskannya yang terdiri dari beberapa poin berikut

  • Memindahkan Kode HTML Kedalam div Yang Dikembalikan Oleh Functional Component
  • Membuat Struktur Folder
  • Menyusun Props Yang Dibutuhkan
  • Menggunakan Link
  • Membuat Interface Dengan Typescript
  • Menginstall package classname
  • Menggunakan Component Menu Dan Mengexport Value Untuk Props
Jika komponen HTML kalian mempunyai style maka kita bisa menggunakan global CSS. Penjelesan tersebut juga pernah dibahas di blog ini

Baca Juga: Cara Menggunakan Global CSS dan Module CSS Untuk Memberikan Style Pada NextJS

Langkah Langkah

Memindahkan Kode HTML Kedalam div Yang Dikembalikan Oleh Functional Component


Misalnya saya mempunyai project HTML dengan tampilan navbar berikut

Dan Navbar ini memiliki kode html seperti berikut

Lalu kita akan membuat sebuah folder bernama components yang berisi beberapa folder dan file di dalamnya
Ini merupakan konsep/prinsip atomic design yang pernah kita terapkan dalam project React Native. Kalau kalian belum mengerti apa itu konsep/prinsip atomic habit kalian bisa membacanya disini

Membuat Struktur Folder


Buat folder components lalu buat folder organisms lalu di dalamnya buat folder bernama Navbar yang berisi file index.tsx



Isikan fle index.tsx dengan kode berikut


Kalian bisa menggunakan snipper untuk menggenerate kode diatas dengan cara mengetikan rfc

Lalu kita copykan section navbar ke dalam div yang dikembalikan pada function Navbar()


Sorry kalo kodenya banyak banget begitu yaa . Wkwkwkw

Namun tenang saja kita akan menyederhanakannya satu persatu

Coba amati. Mana kode yang bisa kita pisah, atau kita sendirikan menjadi komponen terpisah? Sepertinya list Home, Games, dan Reward ....., bisa kita pisah menjadi menu

List ini merupakan komponen menu yang ada dalam Navbar. Kita bisa memisahkan komponen tag ul ke dalam file lain. Kita akan menamakan komponen itu Menu.tsx

Menyusun Props Yang Dibutuhkan


Sekarang buat file Menu.tsx


Agar nama list dari navbar ini bisa dinamis maka kita bisa menggunakan props. Caranya dengan memasukkan parameter props pada function Menu() dan destructure props dengan nama props yang diinginkan, saya akan menggunakan title

Tidak hanya title kita juga perlu beberapa props yang lain untuk agar navbar kita bisa menerima props secara dinamis. Yaitu, href, dan isActive

Menggunakan Link

Nahhh karena kita sedang membuat Navbar maka kita memerlukan sebuah tool yang memungkinkan apabila sebuah komponen atau link ketika diklik akan pindah ke halaman yang lain

Betul!, kita sebenarnya sudah mempunyai tag a dimana kita juga bisa pindah halaman satu ke halaman lain akan tetapi tag a memiliki kekurangan dimana setiap kali kita mengkliknya ia akan mereload halaman, meskipun kita mengkliknya secara berulang ulang

Ini sangat menganggu performa web. Maka dari itu NextJS menyediakan sebuah library bernama  next/link dimana ketika kita ingin pindah ke sebuah halaman maka web kita tidak akan mereload halaman yang sama. Artinya NextJS akan menyimpan memori atau halaman/komponen yang sudah digunakan lalu akan menggunakannya lagi jika ada request ke halaman tersebut

Ini sangat bermanfaat karena ini akan meminimalisir memori yang digunakan

Bagaimana cara menggunakannya?

Kita harus mengimport Link dari next/link dengan cara memasukkan kode berikut

import Link from 'next/link'

Lalu kita terapkan dengan dengan cara memberikan href pada Link tersebut yang berisi href dari props kita


Membuat Interface Dengan Typescript

Setelah itu kita membuat interface dengan typescript agar props hanya menerima tipe data yang sudah ditentukan

Lalu kita ubah parameter menjadi kode berikut sehingga interface bisa dimanfaatkan oleh props


setelah itu kita harus mengolah class dalam tag a. Kalo kita amati tag a memiliki class bernama active yang berfungsi untuk menunjukan mana link yang aktif atau link yang menunjukan apakah kita sudah berada di halaman yang dituju

Menginstall package classname

Sayangnya, di file Menu.tsx tidak bisa membaca class tersebut, kita harus menginstall package yang lain bernama classname. Caranya dengan mengetikan perintah berikut

npm i classnames

Setelah itu kita gunakan classname ini dengan cara mengimportnya dan mengisikan variabel dengan object

import cx from 'classnames'


Lalu kita masukkan classTitle kedalam className yang ada di dalam tag a


Lalu kita coba component ini ke dalam file index.tsx. Jangan lupa untuk mengimport component Menu.tsx dengan perintah

Menggunakan Component Menu Dan Mengexport Value Untuk Props

import Menu from './Menu'


Dan kita bisa melihat hasil akhir file Menu.tsx seperti berikut


Kesimpulan

Hal yang harus diperhatikan adalah kita bisa memilah mana komponen yang bisa dipisahkan dan dikembalikan oleh function component. Karena Navbar memiliki link atau komponen yang berfungsi untuk pindah ke halaman tertentu maka kita harus menggunakan Link dari library next/link. 

Tak hanya itu kita juga harus memanfaatkan props yang dinamis dan tipe data yang sesuai. Dan perlu diingat bahwa karena di dalam function kita tidak bisa menggunakan class, maka dari itu kita harus menginstal package tersendiri yang bernama classname dan menginisiasikannya kedalam sebuah variabel dan mengisikannya pada sebuah props
Share
Tweet
Pin
Share
No comments

 

Ketika membuat web kita perlu memberikan style agar tampilan web kita menarik. Tak hanya untuk faktor keindahan, memberikan style juga bisa memberikan petunjuk kepada user agar bisa intuituf ketika aplikasi web kita digunakan

Pada postingan kali ini kita akan belajar bagaimana menggunakan style pada framework NextJS. 

Selain itu ada beberapa poin yang akan kita bahas

  • Jenis Jenis CSS
  • Bagaimana Cara Menggunakan Global CSS
  • Bagaimana Cara Menggunakan Module CSS
  • Manakah Yang Harus Kita Gunakan?

Memberikan style pada NextJS kurang-lebih mirip dengan kita memberikan style pada html biasa. Kita perlu membuat file css dan memberikan kode kode didalamanya

Yang membedakan adalah sifat CSS dalam NextJS yang global dan specific

Jenis Jenis CSS

Global CSS

CSS dimana kita bisa memberikan style pada component component manapun asal memiliki nama class yang sesuai di dalam file css kita

Semisal kita mempunya component

lalu kita membuat file global.css yang ditempatkan pada folder style

Namun css tidak bisa langsung berjalan begitu saja. Kita perlu mengimportnya terlebih dahulu pada file _app.tsx

Sebenarnya Bagaimana Sih Cara Kerja Request Dan Response Bekerja? Cari Tahu Jawabannya Disini!

Kenapa file _app.tsx karena file ini merupakan file root yang menginisiasi segala library, function built-in yang dibutuhkan agar NextJS bisa berjalan dengan baik

Maka style bisa memberikan efek pada tulisan tersebut

Namun efek Global CSS tidak akan berpengaruh apabila ia memiliki Module CSS di dalamnya

Dengan kata lain, apabila kita menggunakan Module CSS makan Global CSS tidak akan berfungsi karena Module CSS lebih spesifik. Meskipun kita menggunakan nama class yang sama

Module CSS

CSS yang sifatnya lebih spesifik daripada Global CSS, cara menggunakannya kita bisa mengimportnya langsung didalam file index.tsx (tidak perlu di file _app.tsx)

./components/Footer/index.tsx


./components/Footer/Footer.module.css  

Kesimpulan

Menggunakan Global CSS atau Module CSS sebenarnya bebas dan tidak harus condong hanya satu prinsip saja. Saya sendiri gemar menggunakan Module CSS karena beberapa komponen html polos yang harus diubah menjadi project dengan prinsip prinsip NextJS memiliki file css masing masing. Sehingga tidak mungkin rasanya menggunakan css global untuk mencangkup segala komponen yang ada. Jadi, jika ditanya manakan model css yang harus digunakan? sesuai kebutuhan


Share
Tweet
Pin
Share
No comments
Newer Posts
Older Posts

About me

About Me

Techbros Writer. Educactor, you name it

Follow Us

  • instagram
  • youtube

Categories

Materi Kuliah Buku Internet Stuff

recent posts

Sponsor

Blog Archive

  • March 2025 (4)
  • February 2025 (1)
  • November 2024 (3)
  • October 2024 (1)
  • January 2024 (1)
  • December 2023 (12)
  • November 2023 (9)
  • October 2023 (1)
  • September 2023 (3)
  • August 2023 (14)
  • July 2023 (3)
  • June 2023 (11)
  • May 2023 (3)
  • April 2023 (1)
  • March 2023 (1)
  • February 2023 (8)
  • January 2023 (6)
  • December 2022 (3)
  • November 2022 (2)
  • October 2022 (3)
  • September 2022 (3)
  • August 2022 (1)
  • July 2022 (1)
  • June 2022 (1)
  • May 2022 (1)
  • March 2022 (4)
  • February 2022 (8)
  • January 2022 (8)
  • December 2021 (4)
  • November 2021 (11)
  • October 2021 (6)
  • August 2021 (9)
  • July 2021 (5)
  • June 2021 (5)
  • May 2021 (4)
  • April 2021 (4)
  • March 2021 (6)
  • February 2021 (2)
  • January 2021 (7)
  • December 2020 (5)
  • November 2020 (2)
  • October 2020 (5)
  • September 2020 (6)
  • July 2020 (1)
  • June 2020 (1)
  • May 2020 (6)
  • March 2020 (1)
  • January 2020 (3)
  • December 2019 (3)
  • November 2019 (12)
  • October 2019 (8)
  • September 2019 (6)
  • August 2019 (8)
  • July 2019 (6)
  • June 2019 (3)
  • May 2019 (8)
  • April 2019 (2)

Report Abuse

Created with by ThemeXpose