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 ?

Daftar Isi

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.

<!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>

<!DOCTYPE html>

<head>

<title>Belajar Materialize - Kodingin</title>

</head>

</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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

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.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

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.

<!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>

<!DOCTYPE html>

<html>

<head>

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"

</head>

<body>

<h1>Cara menggunakan materialize</h1>

<p>Cara menggunakan materialize itu sangat gampang.</p>

</body>

</html>

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

Belajar Materialize #2 : Cara Install dan 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.

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.

<link rel="stylesheet" href="asseets/css/materialize.css" />

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.

<script src="asseets/js/materialize.js"></script>

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.

<!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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Cara menggunakan materialize via donwload</h1>

<p>Cara menggunakan materialize itu sangat gampang.</p>

</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 ?