by Tutorial Cara Menggunakan Semantic UI
 |
| image source |
Tutorial Cara Menggunakan Semantic UI
Postingan atau artikel ini merupakan tutorial cara menggunakan semantic ui, yang saya tujukan untuk para pemula saja, karena saya juga merupakan seorang pemula. Untuk para master yang sudah ahli, mohon dikoreksi apabila saya masih banyak kesalahan. Supaya lebih jelas, langsung saja untuk tutorial cara meggunakan semantic ui seperti uraian dibawah ini.
Sebelum masuk ke bagian tutorial, saya akan
menjelaskan sedikit tentang apa itu semantic ui, menurut pengetahuan saya.
Jadi, semantic ui adalah sebuah framework css, yang fungsinya sebagai template
untuk mempermudah dan mempercepat pekerjaan programmer web. Intinya, semantic
ui ini sama dengan bootstrap, yang membedakan hanyalah tampilan webnya nanti,
dan juga class-class pada css semantic ui dan juga cara penginstalan semantic
ui. Ya, semantic ui biasanya harus diinstall terlebih dahulu, untuk penginstalan biasanya secara online, meski ada juga
yang sudah disediakan css semantic ui yang sudah jadi.
Baik, langsung saja masuk ke tutorial membuat web
menggunakan semantic ui. Sebelum itu, disini saya hanya membuat tutorialnya
untuk platform windows. Untuk langkah-langkahnya seperti pada langkah di bawah
ini:
- Pertama, masuk ke situs ini http://semantic-ui.com/introduction/getting-started.html, disana ada semantic ui yang bisa langsung didownload dengan format zip dan juga bisa menginstall menggunakan node js.
- Selanjutnya, untuk menginstall node js, download terlebih dahulu node js untuk windows disini https://nodejs.org/download/release/latest/, kemudian pilih win-x64/x86 dan download node js dengan format sesuai keinginan. Misalnya dengan format .exe.
- Setelah di download, install node js tadi dan tunggu hingga selesai.
- Kemudian buat folder project, misalnya namanya "BelajarSemanticUI" dimana dalam folder project tersebut ada buatlah sebuah folder dengan nama “semantic”, atau terserah mau dikasih nama apa. Setelah itu buka cmd pada folder project, yang namanya folder BelajarSemanticUI tadi, dengan cara pencet tombol shift dan klik kanan pada folder tersebut, kemudian pilih command here.
- Setelah jendela cmd terbuka, maka ketik perintah “npm install –g gulp” dengan syarat harus terkoneksi internet.
- Kemudian setelah install gulp selesai, selanjutnya ketik perintah “npm install semantic-ui --save”, tunggu proses selesai, lalu perintah “cd /semantic” untuk masuk ke direktori semantic yang ada dalam folder project tadi. Kemudian build gulp dengan cara “gulp build”, tunggu proses hingga selesai.
- Setelah selesai maka didalam folder semantic tersebut akan terdapat semantic ui hasil install menggunakan node js tadi. Jika menggunakan semantic ui yang langsung jadi, maka tinggal copy folder semantic ui tersebut ke dalam folder project web yang dibuat.
- Setelah poin-poin diatas selesai, maka tinggal membuat file index.html di dalam folder project yang telah dibuat tadi.
- Kemudian, di dalam folder tersebut, buatlah
sebuah dile index.html, yang isinya adalah html web yang akan dibuat, contohnya:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Belajar Semantic UI</title>
</head>
<body>
//Isi dari content web
</body>
<html> - Setelah
itu, buat link untuk memanggil css dan js, dimana link pemanggilannya diletakkan didalam tag <head>#</head>. File css dan js yang dipanggil yaitu seperti pada gambar.
- Kemudian,
dalam body tag pada semantic bisa dituliskan script seperti berikut.
<div class="ui medium top fixed hidden menu">
Seperti itulah sedikit bagian dari kode semantic, dan kode diatas adalah sebuah contoh top menu pada semantic ui, dimana disetiap pembuatan div-div kebanyakan selalu diawali dengan ui, yang berfungsi sebagai user interface, untuk tampilan yang lebih baik. Untuk bagian yang lain silakan berkreasi sendiri . ^_^
<div class="ui container">
<a href="#" class="header item">
<img class="logo" src="images/Robot-3d.jpg">
Ozese Rose
</a>
<a class="active item">Home</a>
<div class="ui simple dropdown item">
Category<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="#">Category 1</a>
<a class="item" href="#">Category 1</a>
<div class="item">
<i class="dropdown icon"></i>
Sub Menu
<div class="menu">
<a class="item" href="#">Sub Category 1</a>
<a class="item" href="#">Sub Category 1</a>
</div>
</div>
</div>
</div>
<a class="item">About</a>
<a class="item">Contact Me</a>
<div class="right menu">
<div class="item">
<button class="ui button" data-modal="modal1" id="call-modals">Log In</button>
</div>
<div class="item">
<a class="ui primary button">Sign Up</a>
</div>
</div>
</div>
</div> - Setelah semua selesai, maka coba untuk menjalankan project web yang telah dibuat tadi. Selamat mencoba.
