Belajar Materialize #2 : Cara Install dan menggunakan Materialize – Halo semua saya ucapkan selamat datang di kodngin.com, situs belajar web bahasa Indonesia. Kali ini saya akan melanjutkan seri tutorial belajar materialize bahasa indonsia.
Sebelumnya kita sudah membahas Belajar Materialize #1 : Pengenalan dan Pengertian Materialize. Jika temen-temen belum paham, silahkan klik link di atas agar pembelajaran tutorial materialize secara terstruktur dan mudah diserap informasinya.
Tidak usah kwatir kodingin.con akan bahas tuntas tutorial belajar materialize.
Pada tutorial seri kedua ini akan membahas cara melakukan instalasii dan menggunakan framework materialize.
Bingung harus belajar dari ?
Cara Install dan menggunakan Materialize
Pasti anda sudah tidak asing lagi mengenai struktur HTML, nah jika anda sudah memahaminya akan lebih mudah belajar materialize.
Sudah paham mengenai struktur tag HTML secara umum.
Sebelum memulai melakukan instalasi dan menggunakan materialize, mari kita lihat struktur tag HTML nya secara dasar.
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Belajar Materialize - Kodingin</title> </head> <body></body> </html> |
Kode di atas merupakan sintaks dasar HTML.
Untuk menggunakan materialize kita harus menghubungkan tag HTML ke file Materialize. Cara menghubungkan materialize dan projek website kita yaitu dengan menggunakan CDN, selain itu anda dapat menginstall materialize menggunakan NPM ata Bower.
Untuk menghubungkan website tag html kita juga bisa melakukan donwload source sehingga kita dapat memanggilnya di lokal komputer kita secara OFFLINE.
Yuk kita bahas.
Cara menghubungkan Materialize dengan halaman Web menggunakan CDN
Sudah paham tentang CDN, secara singkat CDN kependekan cari cloud delivery network, dimana kita mengambil source file dari server paling dekat. Sehingga kita hanya memanggil file CSS yang telah ada.
Namun sebelumnya anda harus terhubung dengan jaringan internet.
Untuk menggunakan CSS materialize dengan memanggil sumber file yang di letakkan pada bagian head.
Cara Memanggil CSS pada Materialize CDN
1 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> |
Bukan hanya CSS materialize saja yang kita panggil, melainkan CDN file JS / Javascript materialize.
Cara Memanggil Javascript pada Materialize CDN
Ada 2 opsi untuk meletakan file javascript, yang pertama dapat meletekan di bagian body dan yang kedua dapat meletakkan sebelum penutup body.
1 | <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> |
Sehingga kode lengkapnya seperti kode berikut ini.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <h1>Cara menggunakan materialize</h1> <p>Cara menggunakan materialize itu sangat gampang.</p> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </body> </html> |
Silahkan simpan file di atas dengan format .html kemudian lihat hasilnya.

kita sudah berhasil memanggil class CSS materialize menggunakan CDN.
Coba lihat perbedaannya antara menggunakan materialize atau tidak. Terlihat gaya font nya sudah berbeda dan tentunya lebih terlihat keren.
Cara menghubungkan Materialize dengan halaman Web menggunakan Donwload
Sudah tahu kekurangan menggunakan CDN yaitu harus tersambung dengan jaringan internet. Jika anda tidak ingin menggunakan jaringan internet dan mengakses semua file di lokal komputer anda maka solusinya kita harus mengunduh file materializenya.
Silahkan anda donwload di https://materializecss.com/getting-started.html.

Anda dapat mengunduh semua sourcenya maupun menguduh file SASS dan JS nya saja, sebaiknya anda donwload yang materialize untuk semua source yang terdapat file CSS dan JS.
Setelah itu anda dapat mengekstark hasil donwload an anda. Di dalam folder hasil eksrakan anda terdapat folder dengan nama materialize. File-file itu lah yang nanti nya kita panggil.
Silahkan anda buat saatu folder dengan nama belajar_materialize. Selanjutnya bikin folder dengan nama assets. Folder asssets ini lah yang digunakan untuk menaruh file materialize kita. Pindah file hasil ekstrakan anda ke dalam folder assets.

Setelah itu silahkan bikin file dengan nama index.html yang isinya kosong dulu.
Sehingga strukturnya seperti di bawah ini.
Struktur Folder Materialize
├── asseets
│ ├── css
│ │ ├── materialize.css
│ │ └── materialize.min.css
│ ├── js
│ │ ├── materialize.js
│ │ └── materialize.min.js
│ ├── LICENSE
│ └── README.md
└── index.html
Cara melakukan pemanggilan file CSS Materialize secara lokal
Untuk memanggil file CSS dengan cara seperti kode di bawah ini.
1 | <link rel="stylesheet" href="asseets/css/materialize.css" /> |
Cara melakukan pemanggilan file Javascript Materialize secara lokal
Sedangkan untuk JS seperti kode di bawah ini.
1 | <script src="asseets/js/materialize.js"></script> |
Perlu di ketahui di dalam folder css dan js terdapat pada nama file terdapat file sebelum ekstensi terdapat nama .min. misalnya materialize.min.css. Sebenernya itu sama dengan materialize.css hanya saja kode nya sudah di buat menjadi rapat dengan tujuan mempercepat halaman website.
Jika sudah sama dengan milik sama silahkan edit halaman index.html menjadi kode di bawah ini.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="asseets/css/materialize.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <h1>Cara menggunakan materialize via donwload</h1> <p>Cara menggunakan materialize itu sangat gampang.</p> <script src="asseets/js/materialize.js"></script> </body> </html> |
Kemudian buka file index.html di browser kesayangan anda. dan lihat hasilnya.

Tampilan halaman wesbite hampir sama dengan menggunakan via CDN hanya saja saya mengganti teksnya, sampai sini kita sudah berhasil menghubungkan materialize secara offline/tidak terhubung internet.
Kesimpulan …..
Untuk menggunakan materialize secara umum dan mudah digunakan dapat menggunakan 2 cara yaitu menggunakan CDN dan melakukan donwload ke lokal kita.
Keunggulan dengan melakukan donwload file CSS dan JS materialize yaitu dapat digunakan secara OFFLINE / tidak terhubung dengan internet.
Pemanggilan file materialize dapat di letakkan di bagian head untuk file CSS atau JS dan dapat dilakukan sebelum penutup body untuk file Javascript.
Anda dapat melihat sourcenya di https://github.com/kodingindotkom/materialize
Belajar Materialize #2 : Cara Install dan menggunakan Materialize.
Semoga Bermanfaat.
Apa yang selanjutnya anda pelajari ?
Baca Juga :
- Belajar Materialize #1 : Pengenalan dan Pengertian Materialize
- Perbandingan Penggunaan Memory pada Ubuntu 19,04
- Cara Hapus Isi Data pada Tabel Database MySQL
- Situs Download Game Android Gratis Selain Playstore yang Bisa Dicoba
- Beberapa Game Android yang Hemat Kuota, Wajib Anda Coba