Belajar Instalasi Bootstrap
Sedang pengen share cara penggunaan bootstrap di web , siapa tau bisa bermanfaat dan sekaligus buat bahan pengingat klo kapan-kapan lupa cara pakenya :D
Nah , langsung aja deh penjelasannya ...
Untuk menggunakan Bootstrap kita bisa menggunakan dengan 2 cara , yaitu :
1. Akses langsung ke internet.
Untuk cara yang satu ini sangat mudah dalam penggunaannya , tetapi kekurangnya kita harus terkoneksi ke internet karena kita mengakses file-file bootstrapnya secara langsung via Internet.
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><!-- Optional theme --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"><!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
2. Download file nya dan kita akses melalui file lokal kita .
Cara yang kedua ini sedikit lebih ribet dari cara yang pertama , karena kita harus menyesuaikan projek kita dengan lokasi file bootstrap yang sudah kita download .
Berikut ini akan saya coba sampaikan beberapa langkah-langkah yang kita perlukan untuk melakukan instalasi Bootstrap ke projek kita .
- Download File Bootstrap di http://getbootstrap.com/getting-started/#download
 |
| Struktur file bootstrap |
- Selanjutnya simpan file kita di folder bootstrap yang barusan kita download , maka kurang lebih letaknya akan seperti ini :
index.html merupakan nama file yang barusan kita buat dengan menggunakan kode HTML diatas.Nah setelah dijalankan di browser , maka hasilnya kurang lebih akan seperti gambar dibawah :
Nah , demikian post dari saya tentang Instalasi Bootstrap nya , jika ada pertanyaan , kritik dan saran , silahkan disampaikan , jangan sungkan untuk menyampaikan pendapat
Terima Kasih .
Percantik Tampilan Web dengan CSS Framework Metro UI
 |
| Metro UI |
Nah , Metro UI mengusung tema seperti Windows 8 , jadi kita bisa melihat Flat Design nya Windows 8 pada website kita jika menggunakan CSS Framework ini . Hehehe
Berikut ini saya tampilkan beberapa tampilan yang ditawarkan oleh Metro UI :
 |
| Navigation Bar |
Nah , gambar diatas merupakan contoh Navigation Bar yang ditawarkan oleh Metro UI .
 |
| Side Bar |
Kemudian selanjutnya merupakan Side Bar ...
 |
| Carousel |
 |
| Window |
 |
| Calendar |
Nah beberapa gambar diatas merupakan beberapa tampilan yang bisa kita dapatkan dengan menggunakan Metro UI , jadi buat teman-teman yang berminat mempelajari Metro UI , atau mungkin ingin menambahkan beberapa fungsi tambahan dari Metro UI .
Silahkan mengunji :
http://metroui.org.ua/
Nah buat teman-teman , silahkan mencoba ... :D
Terima Kasih
Tag :
Bootstrap,
CSS,
CSS Framework,
Desain,
HTML,
informasi,
Metro UI,
Programmer,
projek,
Tips,
UI,
Web Design
Membuat Prototype Mobile Apps Online dengan Fluid UI
Nah di postingan kali ini , saya ingin sedikit share referensi website buat teman-teman yang lagi pengen buat Desain UI dari Apps yang ingin teman-teman buat . Nah tanpa basa basi langsung aja deh kita review :
 |
| https://www.fluidui.com/ |
Nah berikut ini saya sampaikan beberapa fitur yang disediakan :
- Tools yang cukup lengkap , sehingga memudahkan kita bereksperimen dengan UI yang kita bayangkan
- Pengaturan OS dari Device yang ingin kita buat UI nya
- Kemudahan dalam pengoperasian
- Terdapat Fitur Upload jika kita ingin meng upload gambar
- Gratis 10 screen
- Kemudahan dalam registrasi
- Kemudahan dalam export Prototype yang kita buat
- dll
Nah , apa yang saya sebutkan diatas hanya beberapa fitur yang sempat saya coba dari Fluid UI , mungkin untuk teman-teman yang ingin lebih jelasnya bisa lagsung mengunjungi website nya di :
Bagi teman-teman yang ingin langsung mencoba bisa langsung mengunjungi :
Nah , demikian sedikit share informasi dari saya , semoga bisa bermanfaat bagi teman-teman yang membaca . :)
Terima Kasih
Membuat Read More di Blogspot
Buat
temen-temen yang lagi pada belajar nge-Blog . Di postingan ini , saya mencoba
membagi cara membuat read more ke postingan blog kita , karena secara
defaultnya biasanya postingan kita dimunculkan semuanya sehingga home blog kita
pasti penuh dan panjang ke bawah ... Hehe .
 |
| Read more picture |
Nah
tanpa basa-basi langsung aja deh ini cara nya .
- Masuk ke Dashboard Blog kita
- Pilih Menu Template
- Pilih Edit HTML
- Maka akan muncul tampilan
script dari template yang kita gunakan .
- Nah mulai lah proses edit kita
disini
- Cari </head>
- Tambahkan
script dibawah ini tepat di atas </head> .
<!--ReadMore -->
<b:if
cond='data:blog.pageType != "static_page"'>
<b:if
cond='data:blog.pageType != "item"'>
<style>
.post-body{text-align:justify;}
.post-body
img{max-width:none;width:auto;}
.read-more{float:left;
padding-top: 10px;}
.read-more a{ color:
#fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;
text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more
a:hover{text-decoration:none;background:#666;}.pic{border: 10px solid
#fff;float:left;height:165px;width:250px;margin-right:
20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow
img{height:165px;width:250px;transition: all 2s ease;}
.grow
img:hover{width:400px;height:250px;}
</style>
<script
type='text/javascript'>
var thumbnail_mode =
"yes"; //yes -dengan gambar, no -tanpa gambarsummary_noimg =
300; //banyaknya huruf jika tidak ada gambarsummary_img = 250; //banyaknya
huruf jika ada gambarimg_thumb_height = 165;img_thumb_width = 250;
</script>
<script
type='text/javascript'>
//<![CDATA[function
removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s =
strx.split("<");for(var
i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] =
s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}chop
= (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!='
' && strx.indexOf(' ',chop)!=-1) chop++;strx =
strx.substring(0,chop-1);return strx+'...';}function
createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag =
"";var img = div.getElementsByTagName("img");var summ =
summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag
= '<div class="grow pic"><img src="'+img[0].src+'"
width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px"/></div>';summ =
summary_img;}}var summary = imgtag + '<div>' +
removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML =
summary;}//]]>
</script>
</b:if>
</b:if>
<!--Auto Read More Akhir-->
- Jika sudah , coba SAVE terlebih dahulu template anda .
Selanjutnya Coba cari potongan script dibawah ini :
<b:widget id='Blog1'
locked='true' title='Blog Posts' type='Blog'>...</b:widget>
- Nah kata kuncinya adalah Blog Posts / Postingan Blog . disesuaikan
dengan settingan bahasa yang digunakan pada Blog kita . Nah klo sudah
ketemu , mari kita lanjutkan proses nya .
- Klik pada anak panah yang ada di
sebelah nomor baris . kemudian cari script berikut ini :
<data:post.body/>
- Nah , klo sudah ketemu . ganti
script barusan dengan script berikut ini :
<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType ==
"item"'>
<data:post.body/>
<b:else/>
<b:if
cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div
expr:id='"summary" + data:post.id'>
<data:post.body/>
</div><script
type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");</script>
<div
class='read-more'>
<a
expr:href='data:post.url'>Baca Selengkapnya
»</a>
</div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->
- Nah klo sudah , silahkan di SAVE dan lihat hasilnya . :D
Nah semoga panduan ini
bermanfaat bagi teman-teman . Saya dapat referensi nya dari website di bawah
ini nih :
Terima Kasih .
Menambahkan Fitur Search Pada ComboBox dengan Select2
Pada postingan kali ini , saya akan membahas tentang membuat ComboBox kita lebih kaya fitur dengan beberapa tambahan fitur yang sangat mudah dalam penerapannya. Apa yang akan saya bahas disini adalah tentang Plugin Select2 .
Select2 sendiri merupakan salah plugin hasil pengembangan JQuery . Pada deskripsi plugin ini pun dijelaskan jika " Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. " . nah ini plugin ini merupakan hasil pengembangan dari Igor Vanyberg . pada penerapannya , kita akan mendapati hal-hal yang luar biasa hanya dengan beberapa baris kode . Jadi silahkan dicoba , dan mungkin bisa ditambahkan ke beberapa projek yang sedang anda kembangkan saat ini . :D
 |
| Element Select dengan Select2 |
Untuk lebih lengkapnya , silahkan mengunjungi :
Hal-hal yang lebih penting dari pada Deadline Projek
Bagi seorang mahasiswa IT , dikejar-kejar Deadline projek mungkin memang bukan sesuatu hal yang asing lagi , kalo boleh dimisalkan mungkin rasanya itu kayak pas jaman sekolah ketika kita lagi dikejar-kejar tugas yang kalo gak dikerjain pengaruh ke nilai Semesteran ... :D .
Pada postingan ini , saya akan membahas beberapa hal yang mungkin sebenarnya berbeda-beada untuk setiap orang yang senang mengambil projek dalam bidang IT .
Nah berikut ini beberapa hal yang saya rasa lebih penting dibandingkan dengan Deadline Projek yang begitu membebani pikiran tentunya . silahkan disimak dengan seksama :
1. Ibadah
Untuk hal yang satu ini merupakan hal yang tidak boleh diganggu gugat , untuk alasan apapun tentunya . karena tujuan awal kita ada didunia ini kan untuk beribadah . jadi buat temen-temen jangan pernah taro hal ini diprioritas selain nomor 1 .
Karna , hal ini saya rasa tidak akan menggangu deadline projek kita , apakah kita tidak mau mengorbankan 5 menit waktu kita untuk beribadah dan berdoa kepada Tuhan Yang Maha Esa yang sudah memberikan rahmat dan karunianya kepada kita .
Jadi untuk hal ini , selalu letakkan pada Prioritas No. 1 dalam hidup kita , Biar Dunia dapet dan Akhirat pun kita dapet . :D
2. Keluarga
Bagi saya yang kedua adalah keluarga , karna keluarga lah salah satu hal yang paling menentukkan diri kita . jangan sampai kita menyesali sesuatu yang sudah terlewatkan , karna waktu terus berjalan . dan keluarga pun tak akan selamanya seperti saat yang kita alami sekarang ini .
Hidup itu terlalu Berharga jika hanya kita gunakan untuk menghabiskan waktu didepan laptop dengan projek-projek kita yang tidak ada habisnya itu . Jadi buat temen-temen jangan sampe deh karna tuntutan Deadline kita jadi melupakan keluarga , kalo bisa tetap sisipkan waktu untuk keluarga kita. :D
Nah, contohnya gini deh , misalkan kita lagi ngerjain projek , terus nyokap minta anterin ke pasar . kira - kira apa yang kita lakukan ?
a. Pura-pura Ngantuk.
b. Nyari Adek atau Kakak kita buat Tumbal kita.
c. Nganterin Nyokap dengan Ikhlas .
Saya rasa sebagian besar hati nuraninya akan milih yang ( C ) . tapi pada kenyataannya gak sedikit yang memilih (A) atau (B) . hehehe .
Misalkan kita berpikiran positif dan memilih (C) , mungkin kita bakal makan waktu kita buat nganterin nyokap . tapi mungkin ketika kita nganterin nyokap tadi , ada malaikat yang liat , jadi dibantu deh dikasih inspirasi buat projeknya . hehehe :D . Langsung lanjut aja deh ke No. 3 , takut kepanjangan nanti pembahasannya .
3. Makan & Minum
Nah yang ini gak kalah pentingnya nih , karna saya rasa banyak dari temen-temen yang saking sibuknya sampe lupa makan dan minum , baru inget makan klo emang badannya udh mau K.O .
Untuk hal ini sangat perlu diperhatiin , karena jangan sampe lah saking pengennya cepet selesai , sampe makan & minum dianggap wasting time ( buang-buang waktu ).
4. Istirahat Secukupnya
Untuk nomor 4 juga kudu diperhatiin nih buat temen-temen , jangan sampe kita gak perhatiin karna ini perlu loh . sadar atau gak sadar , tubuh kita ini kan punya hak buat istirahat , jadi jangan sampe istirahat baru setelah emang badannya gak sanggup lagi nerusin .
Isitirahat disini yang dimaksud tuh bukannya istirahat yang kerjaannya tidur mulu juga, tapi istirahat secukupnya , cukup istirahat yang bisa istirahatin mata, tangan, pikiran . Tapi dari pembahasan ini , bukannya mengatakan jika begadang itu gak boleh , karna terkadang Begadang itu bukannya pilihan , tapi keperluan buat memanfaatkan setiap waktu kita . Tapi jangan terus-terusan juga , karna tubuh kan punya hak istirahat .
Nah Demikian Hal-hal yang lebih penting dari pada Deadline Projek menurut saya , mungkin buat temen-temen ada yang punya pandangan yang berbeda untuk hal ini , tapi ya setiap orang punya cara pikir yang berbeda dalam mengahadapi suatu hal masalah . Tapi kalo versi saya untuk masalah yang kita bahas barusan , ya itu jawaban saya , silahkan dibaca dan dicocokan dengan versi anda .
Terima kasih .
Masalah Pada Instalasi Oracle Form (ODS)
Pernah kah anda melakukan instalasi software Oracle Developer Suiter (ODS) atau yang biasa disebut Oracle Form ? . jika pernah , mungkin masalah yang akan saya sampaikan pada postingan ini adalah masalah yang mungkin pernah anda alami ketika melakukan proses instalasi Oracle Form ini .
Pada saat instalasi Program ini , saya menggunakan OS Windows 7 diserta dengan Browser Mozilla Firefox 3.0 .
Tanpa basa -basi , langsung saja saya sebutkan masalah-masalah instalasi yang saya temui ketika melaukan Instasli Program ini :
1. Operating System tidak support
hal ini mungkin merupakan masalah yang paling awal kita temui ketika melakukan proses instalasi di OS windows diatas versi Windows XP SP2.
nah untuk masalah ini , solusinya cukup mudah , cukup lakukan proses berikut ini :
- Klik kanan pada Setup.exe
- Pilih Properties
- Pilih tab Compatibility
- Check Run the program in compatibility mode for :
- Pilih Windows XP (Service Pack 2)
- Klik Apply
- Klik OK
Nah setelah melakukan proses di atas , seharusnya program sudah tidak mengalami kendala lagi dengan masalah Operating System.
2. Memory Virtual belum tersedia atau tidak cukup
nah , untuk masalah yang ini , agak susah jelasin penyebabnya . tapi setidaknya ada solusinya deh. nah coba ikutin langkah berikut ini :
- Masuk ke Control Panel
- Pilih System and Security
- Pilih System
- Pilih tab Advanced system settings yang ada di sebelah kiri
- Pilih tab Advanced
- Pilih Performance -> Settings ..
- Pilih tab Advanced
- Pilih Virtual Memory -> Change
- Uncheck Automatically manage paging file size for all drives
- Pilih Custom size
- Isikan sesuai kebutuhan si Oracle Form , sebagai saran , isikan sebesar 2x memory RAM anda
- Klik Set
- Klik OK
- Klik Apply
- Klik OK
3. Gagal ketika melakukan koneksi ke Server Database Oracle
dari pengalaman saya , untuk masalah ini , biasanya terjadi dikarenakan, pada tnsname.ora di Oracle Form tidak memiliki alamat dari Server Oracle Database yang ingin dihubungkan . untuk masalah ini , biasanya saya menggunakan solusi sebagai berikut :
- Copy tnsname.ora dari database server oracle pada <Directory Oracle>/db_1/network/admin
- Paste di komputer anda , pada <Directory Oracle Form>/NETWORK/ADMIN
- Silahkan replace tnsname.ora yang lama dengan yang baru .
Pada permasalahan ini , kita juga harus memastikan jika Server Database Oracle memang siap untuk digunakan.
4. Browser Missing Plugin ketika running Oracle Form
selanjutnya masalah missing plugin pada browser ya , untuk masalah ini biasanya terjadi karna browser kita belum memiliki plugin yang diperlukan untuk menjalankan Oracle Form pada Browser kita , karena pada Oracle Developer Suite ini program kita akan dirunning menggunakan browser .
nah untuk memastikan apakah browser kita sudah memiliki plugin yang dibutuhkan atau belum, silahkan cek pada Add-ons nya . pada panduan ini , saya menggunakan Browser Mozilla Firefox 3.0 .
nah pada gambar diatas , bisa dilihat jika ada Plugin JInitiator 1.3.1.22 pada add-ons browser yang saya gunakan .
nah untuk teman-teman yang mau download plugin nya silahkan mengakses link dibawah ini :
file nya tidak terlalu besar kok .
5. Browser Crash ketika running Oracle Form
Nah untuk yang terakhir , adalah masalah ketika kita melakukan running form , form yang kita running justru menyebabkan browser kita Crash .
nah untuk solusinya , setelah pernah sibuk cari - cari solusi untuk masalah ini ,akhirnya dapet juga solusinya , nah untuk masalah ini ternyata kita perlu mengganti file jvm.dll yang ada dengan jvm.dll yang benar.
nah kita hanya perlu mencopy jvm.dll yang baru ke :
C:\Program Files\Oracle\JInitiator 1.3.1.22\bin\hotspot\ .
paste kan pada direktori tersebut , timpa saja jvm.dll yang sudah ada denga yang baru .
Nah demikian postingan saya mengenai Masalah Pada Instalasi Oracle Form (ODS) Pada Windows 7 . semua masalah yang saya sampaikan disini , merupakan murni masalah yang pernah saya temui selama beberapa kali melakukan proses Instalasi Oracle Developer Suite di OS WIndows 7.
Semoga apa yang saya sampaikan bisa bermanfaat bagi teman-teman yang mengalami masalah yang sama seperti saya , tetapi belum mempunya solusi untuk masalah-masalah diatas.
Terima kasih.
Tag :
Instalasi,
Installation,
Masalah,
ODS,
Oracle,
Oracle Developer Suite,
Panduan,
Trouble,
Windows 7
