Belajar Materialize #2 : Cara Install dan menggunakan Materialize

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.

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

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.

Sehingga kode lengkapnya seperti kode berikut ini.

Silahkan simpan file di atas dengan format .html kemudian lihat hasilnya.

Cara Install Menggunakan Materialize
Belajar Materialize #2 : Cara Install Menggunakan Materialize

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.

Cara Install Menggunakan Materialize
Cara Install Menggunakan Materialize

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.

Cara Install Menggunakan Materialize
Belajar Materialize #2 : Cara Install Menggunakan Materialize

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.

Cara melakukan pemanggilan file Javascript Materialize secara lokal

Sedangkan untuk JS seperti kode di bawah ini.

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.

Kemudian buka file index.html di browser kesayangan anda. dan lihat hasilnya.

Cara mudah menggunakan materializeme CSS
Belajar Materialize #2 : Cara Install Menggunakan Materialize

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 :

Avatar
Didik
Saya Seorang Developer khususnya pada Bidang Website menggunakan Sistem Operasi Linux dan menyukai Pemrograman Website dan System Administrator. Selain itu saya pemilik website kodingin.com.
Leave a Reply