Membuat Desain Web Responsive dengan Materializecss

Assalamu'alaikum Wr. Wb.

Udah tau gak apa itu materializecss ?
Materializecss adalah sebuah framework css buatan google yang tergolong baru. Saat artikel ini dibuat versinya saja masih v0.96.1 (download materializecss v0.96.1), wow masih fresh dan akan terus berkembang. Saya suka dengan materializecss karena desainnya sudah sesuai dengan material desainnya google (pastilah kan yang buat google sendiri, hehe). Framework ini simple, elegan dan pastinya responsive seperti framework yang lebih populer lebih dahulu yaitu bootstrap.

Pada tutorial saya kali ini saya akan membuat desain halaman web responsive dengan menggunakan materializecss. Screenshot simplenya bisa dilihat dibawah :


Untuk belajar materializecss lebih dalam lagi bisa Anda pelajari langsung pada dokumentasi webnya di alamat materializecss.com.

Karena tutorialnya berbentuk video di youtube, jadi saat menonton videonya setting dulu agar kualitasnya bagus dengan cara play dulu videonya dan setting seperti gambar dibawah :

Klik gambar untuk memperbesar

Untuk melihat bagaimana cara membuat desain web responsive dengan materializecss video nya bisa dilihat dibawah :


Gimana keren bukan ?
Jika ada yang ingin ditanyakan silahkan tinggalkan pertanyaan di komentar dibawah. Jangan lupa like dan share artikel serta video kami.

Note :
Jangan lupa tambahkan init.js dan jquery.js.
- Link download materializecss v0.96.1
- Salah satu link referensi jQuery.js
- Isi file init.js :
   (function($){
    $(function(){
     $('.button-collapse').sideNav();
    });
   })(jQuery);

Baca tutorial selanjutnya : Membuat CRUD dengan PHP Mysqli Prosedural

Baca jugaMembuat CRUD dengan PHP Mysqli OOP

Semoga bermanfaat, happy coding :)

Wassalamu'alaikum Wr. Wb.
Membuat Desain Web Responsive dengan Materializecss
Item Reviewed: Membuat Desain Web Responsive dengan Materializecss 9 out of 10 based on 10 ratings. 9 user reviews.

58 comments

Mas ko saya gabisa tampil menu tambah data ya? mohon bantuan mas :)

Coba diteliti lagi codemu khususnya html bagian menu. Kalo bisa samakan persis dengan tutorial saya.

sudah mas, terus menu yang kaya playstore ga muncul ? -_-

Jangan lupa tambahkan css dan js nya materialize, terus tambahkan juga jquery. Untuk menu yg kayak di playstore biar bisa muncul tambah kan script init.js, ditengah2 tutorial init.js nya pernah tak buka kok.

Mas cara ubah ukuran lebar dan panjang kolom table di materialize css gimana ya ?

Pahami dulu dasar2 html dan css serta stylenya materialize, coba buat style sendiri kasih !important, kalo gak coba aja oprek css bawaan materialize. Dicoba2 aja gan nanti bakalan seru dan dapat ilmu baru :)

mas mau nanya, saya udah berhasil tapi pas ukuran layar saya kecilin menu nya ga bisa kebuka yah? script jquery.js nya gmn?

Untuk menu biar bisa muncul tambah kan script di file init.js, ditengah2 tutorial file init.js nya pernah tak buka kok gan, silahkan dibuka lagi tutorialnya.

udah mas, trs untuk form inputan ko ga work yah efek nya?pas coba input nama field ga ada efeknya malah ketimpa sama text inputan

udah di panggil belum jquery nya ?

script yg ini bukan mas?
script type="text/javascript" src='js/jquery.js'
script type="text/javascript" src='js/materialize.js'
script type="text/javascript" src='js/init.js'

nahh isi file jquery.js nya gmn mas?maaf banyak nanya newbi mas

di internet banyak mas, di website resmi nya jquery juga ada.
ni ane kasih referensi : http://goo.gl/qEUrRb

mas fawaiq, biar ukuran width container atau kotak ditengah yd ada shadownya bisa diperbesar(dirubah) gimana ya mas??,,,saya udah coba cari dan edit di file materialize.css nya tpi belom berhasil mas,, maklum nyubi mas.. :malu

setelah div container kasih aja lagi didalamnya semisal div class="row" kemudian div class="col l4 m6 s12" (disini baru tabelnya, tetapi class col di table hilangin aja) tutup div 2 kali

Mas cara meletakkan icon untuk materialize secara offline gimana ya mas?
klo download gede banget filenya ampe 50MB
apa emang cuma bisa ngelink ke google buat dapetin file iconnya?

Yang ente maksud icon yg mana ya gan ?

Siip mas nanti di coba hehehehe :D

agak kepotong itu sebelah kanannya menu i class juga ga keliahatan penutupnya

mass init.js ny dmna mas..
kasih link dong mas..

Di dalam tutorial ada mas, udah aku perlihatkan, tinggal ngetik ulang :)

Mas, mau tanya,
1. sy udh download materialize nya & udh d ekstrak , tp di dlm folder "js" gak ada file "init" dan "jquery" nya mas, yg ada cuma file "materialize" & "materialize.min".
itu gmn mas? dmn dapetin file init dan jquery nya?

2. sy udh coba bikin sesuai dengan tutorial, tp kok pas bagian page tambah, isi form (nama, jk, almt) nya knp gak ada effect label nya gitu ya? padahal kodingnya udh sesuai dengan tutorial. Posisinya jg terlalu ke kiri, jadi mepet bgt sm shadow. Gimana cara perbaikinya spy enak di liat?

Terimakasih

mas, kok table sama judul saia keluar dari container nya ya?
padahal udah bener2 disamain coding nya,

btw, ngaruh ga: waktu bikin tutorial kan pake 0.96, nah punya saia ini 0.97

Coba teliti lagi pada bagian div class row dan col nya gan.

Gak ngaruh kok gan, sama aja.

om tombol navigation saya kok gak ngaruh ya. padahal koding udah sama persis :sorry

udah ada jquery.js dan init.js nya belum gan ?

saya udah berhasil bikinnya, tapi pas di tampilan index.php div class="section" ini tulisan "Selamat Datang di halaman utama" terlalu rapat dengan garis div section nya. cara mengatasinya gimana?

Konsultasi via fb saja gan biar lebih nyaman :)

This comment has been removed by the author.

mas saya mau tanya, kalo mau memunculkan icon tanpa haru ngelink ke google, bagaimana ya caranya?
contohnya kaya gini nih
< link href="http:// fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
jadi saya ga perlu ngelink ke google. Mohon pencerahannya

Kamu buka link nya, kamu copy css nya, buat file baru .css dan copykan di local web mu, buka link font di dalam css tadi, download font nya (biasanya ekstensi nya .ttf / .woff / .woff2), font nya pindahkan ke direktori web mu, panggil manual di dalam css yg tadi.

Bang yang file init.js sama jquery.js nya ga ada di tutorial nyaa

gan , file init.js di tutorial yg mana? desain web responsive atau mysqli prosedural??

File init.js isinya cuma ini :

(function($){
$(function(){
$('.button-collapse').sideNav();
});
})(jQuery);

Untuk isi dari file init.js lihat dikomentar bawah.
Kalo file jquery.js bisa anda download darimana saja, dari web resminya jquery bisa, dari sinipun juga bisa : http://fawaiq.url.ph/js/jquery.js

ko saya tampilan nya yg selamat datang di halaman utama mepet ke kiri knpa ya? padahal coding udh sma.. sama table yg nma no tlpon di lihat data jga lebih dari size background nya..itu knpa ya? mhon bantuannya

gan....,ada gak materialize yg offline, agak susah kalau yg onlinenya....jd harus buka internet terus,.....kalau ada tolong linknya ya gan.....

Teliti lagi pada bagian class col dan row nya di tiap2 bagian mas :)

Maksudnya documentation nya atau apa gan ?

This comment has been removed by the author.

mas, ane udh ngikutin semua tutorialnya
semua lancar kecuali untuk css di tampilan versi mobile (bagian nav-mobile). button-collapse nya kaga jalan mas
udh ane utak atik kaga mau juga gan, cuma muncul tanda "#" di urlnya
mohon bantuannya mas

ane juga bingung di tutorial mas ada init.js sama jquery.js
itu bawaan atau gimana ya mas?

Silahkan tambahkan init.js dan jquery.js nya gan.
Ini salah satu referensi jquery-nya : http://fawaiq.url.ph/js/jquery.js

Ini isi file init.js :
(function($){
$(function(){
$('.button-collapse').sideNav();
});
})(jQuery);

Jangan lupa dipanggil di halaman web anda kedua file tersebut :)

Materializecss sangat tergantung dengan JS untuk banyak aspek desainnya. tanpa JS, tampilan akan berantakan semua. Maksud saya disini adalah di bagian user, bukan di websitenya. Umpama ada visitor yang mengakses website pakai Opera Mini atau browser yang JSnya dimatikan, tampilan yang awalnya bagus jadi gak karuan atau gak berfungsi.

Kalau mau ngetes pakai browser biasa, coba aja matiin JS di settingan browser. Tampilan website dengan framework Materializecss akan berantakan

Ok akan saya jawab :)
1. memang begitu gan, script init.js dan jquery.js itu tambahan sendiri. kalo jquery.js terserah anda mau dapetin dari mana aja boleh, ni saya kasih referensi : http://fawaiq.url.ph/js/jquery.js
untuk init.js bisa anda dilihat di dalam tutorial saya, beberapa kali saya perlihatkan isinya, script nya cuma dikit kok, silahkan dicermati lagi dan diketik ulang

2. bisa dikirim gambar nya langsung saja biar saya tau, bisa konsul disini : https://fb.com/yukcoding

Yaps betul gan. Maka dari itu tetap pakai js. Tidak materializecss saja, bootstrap pun sama.

https://fb.com/yukcoding

gan, saya buat web company trus disuru buat halaman admin, halaman adminnya nanti berisi semua hal yang ada di web company nya, di halaman adminnya nanti kita bisa edit atau delete isi yang ada dalam web company tersebut, itu caranya gimana gan?
minta tutorialnya gan ;)

Maaf tutorialnya belum ada. Aplikasi2 di YukCoding hampir semua ada halaman utama dam halaman admin nya.

gan, kalo saya mau liat tutorial lengkapnya, dimana ?

mengkin bisa dikasi referensinya mas, saya mau belajar.

https://yukcoding.blogspot.com/p/daftar-isi.html

gan,saya dah buat sama persis,tapi di tampilan yang lihat data itu gambar di opsinya ga muncul gan,gimana tu gan ? tolong di jawab gan

Ada yang salah script-mu gan. Coba teliti lagi.
Atau kalo mau konsultasi bisa disini https://fb.com/yukcoding :)

mas ko waktu dikecilin gk bisa muncul menu kaya di playstore yah , padahal file init.js nya udah tak buat dan tak panggil tapi ttp gk bisa gmana solusinya mas

Cek lagi gan. Pastikan jquery.js dan init.js nya juga sudah terpanggil.

Emoticon? nyengir

Berkomentarlah dengan bahasa yang relevan dan sopan.. #ThinkHIGH! ^_^

Info

Just load it!