tag:blogger.com,1999:blog-59164575363048205862024-03-14T06:08:20.075-07:00BelajarBootstrapBelajar Bootstrap FrameworkAnonymoushttp://www.blogger.com/profile/13548882296050345459noreply@blogger.comBlogger8125tag:blogger.com,1999:blog-5916457536304820586.post-53267891358010443202015-12-27T04:17:00.001-08:002015-12-27T04:41:47.214-08:00Instalasi Bootstrap<b><i><u><a href="http://belajarbootstrapframework.blogspot.com/" target="_blank">Instalasi Bootstrap</a></u></i></b> - Berikut adalah langkah <b>instalasi bootstrap</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioVtIi1dcAyto3EAXezISPDKfw50Gv658Rs2i1inM1ALlLgfu7CzwNHatZOJs-pFIbYcAj4sLuRpXI2Q4VsuVibl3EaMVgigDY_OVWLqI5rwOYZ4l6RHDXSCrsBbECp7wu8OObe2MLJiU/s1600/instalasi-bootstrap.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioVtIi1dcAyto3EAXezISPDKfw50Gv658Rs2i1inM1ALlLgfu7CzwNHatZOJs-pFIbYcAj4sLuRpXI2Q4VsuVibl3EaMVgigDY_OVWLqI5rwOYZ4l6RHDXSCrsBbECp7wu8OObe2MLJiU/s640/instalasi-bootstrap.jpg" width="640" /></a></div>
<br />
<b><span style="font-size: large;">Langkah 1 Instalasi Bootstrap</span></b><br />
<ol>
<li>Download file Bootstrap yang ada <b><a href="http://twitter.github.io/bootstrap/index.html" target="_blank">Disini</a></b>. </li>
<li>Hasil download berupa file .Zip yang berisikan folder CSS, JS & IMG. </li>
<li>Isi folder CSS : bootstrap.css , bootstrap.min.css, bootstrap-responsive.css & bootstrap-responsive.min.css</li>
<li>Isi folder JS : bootstrap.js & bootstrap.min.js </li>
<li>Isi folder IMG : glyphicons-halflings.png & glyphicons-halflings-white.png</li>
<li>Selanjutnya Download juga jQuery.js / jQuery.min.js , ini WAJIB ADA karena function Javascript yang ada di Twitter Bootsrap diambil dari jQuery. Silahkan Download <b><a href="http://jquery.com/" target="_blank">Disini </a></b>(Direkomendasikan untuk download versi yang terbaru). </li>
</ol>
<b><span style="font-size: large;">Langkah 2 Instalasi Bootstrap</span></b><br />
<ol>
<li>Buat sebuah folder dengan nama <b>Belajar_Bootstrap</b> di derektori mana saja / lebih bagus lagi kalau di buat di derektori local webserver yang anda gunakan seperti Apache , XAMPP & WAMPP. </li>
</ol>
<b><span style="font-size: large;">Langkah 3 Instalasi Bootstrap</span></b><br />
<ol>
<li>Copy kan folder hasil download dari Twitter Bootstrap (Folder : JS,CSS,IMG) kedalam folde Belajar_Bootstrap. </li>
<li>Berikutnya copy kan hasil dowload jquery.js kedalam Folder JS</li>
<li>Lalu, Buat file HTML dengan nama <b>index.html</b>, Letakan / simpan di dalam folder Belajar_Bootstrap.</li>
<li>Jika sudah selesai, Struktur foldernya kurang lebih akan seperti ini : </li>
</ol>
<br />
<b>Belajar_Bootstrap</b><br />
<b>css</b><br />
bootstrap.css<br />
bootstrap.min.css<br />
bootstrap-responsive.css<br />
bootstrap-responsive.min.css<br />
<br />
<b>img</b><br />
glyphicons-halflings.png <br />
glyphicons-halflings-white.png<br />
<br />
<b>js</b><br />
bootstrap.js<br />
bootstrap.min.js<br />
jquery.js<br />
<br />
<i>index.html</i><br />
Keterangan : Yang di <b>Bold</b> (Cetak Tebal) itu = Folder<br />
<br />
Sekarang instalasi / pengaturan struktur file dan folder sudah selesai.<br />
<br />
Sekarang instalasi / pengaturan struktur file dan folder sudah selesai. Berikut nya kita mulai untuk coding awal.<br />
<br />
Silahkan ketikan coding berikut ini di file <b>index.html</b> untuk permulaan.<br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstrap</title>
<!--Load CSS-->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
<style type="text/css"><!--Dibutukan bila anda menggunakan navbar fixed top-->
body {
padding-top:60px;
padding-bottom: 40px;
}
</style>
<!--Load jQuery-->
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<!--CODING HERE-->
<!--Load Bootstrap JS ( Diletakan dibawah merupakan rekomendasi,agar proses load page lebih cepat )-->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
</code></pre>
<br />
Coding diatas fungsinya : memanggil file-file yang dibutuhkan. Jika ada 2 file dengan nama sama dan akhirannya berbeda, contoh: dengan akhiran ---.js atau ---.min.js , panggil / load salah satu aja.<br />
(<b><i><u><a href="http://belajarbootstrapframework.blogspot.com/" target="_blank">Belajar Bootstrap</a></u></i></b>)Anonymoushttp://www.blogger.com/profile/13548882296050345459noreply@blogger.com0tag:blogger.com,1999:blog-5916457536304820586.post-877268629169109312015-12-25T06:18:00.000-08:002015-12-25T06:18:06.230-08:00Bootstrap vs Foundation<b><i><u><a href="http://belajarbootstrapframework.blogspot.com/" target="_blank">Bootstrap vs Foundation</a></u></i></b> - Saat ini HTML & CSS framework sangat banyak sekali bermunculan, website jurnalweb.com pernah mengumpulkan sampai lebih dari +100 framework html dan css yang ada saat ini, dan tentunya itu belum semua, pasti masih banyak lagi yang belum terdeteksi namanya.<br />
<br />
Namun ada dua framework yang paling ternama saat ini, yang paling banyak pengguna nya, yaitu Twitter Bootstrap dan Foundation.<br />
<br />
Jadi apakah anda sedang merencanakan untuk membuat sebuah desain web dan mempertimbangkan antara dua framework ternama tersebut? Jika iya tentunya ada kebingungan untuk menggunakan yang mana, karena keduanya cukup lengkap termasuk dukungannya untuk bisa membuat desain web responsive dengan mudah. Jawabannya tentu tergantung apa yang ingin anda capai.<br />
<br />
Namun untuk memulai, Anda harus memahami apa yang bisa dilakukan oleh sebuah framework tersebut untuk anda. Framework adalah kumpulan tools atau library untuk membuat website dan aplikasi mobile. Paket Framework termasuk file dan folder dari kode standar (HTML, CSS, JS, dll) sebagai dasar untuk memulai membangun sebuah situs website. Karena banyak situs memiliki struktur yang sama — Framework membuatnya jadi lebih mudah sehingga developer tidak perlu memulai dari awal untuk ngoding, tentunya menghemat waktu dan usaha.<br />
<br />
<b><span style="font-size: large;">Bootstrap vs Foundation</span></b><br />
<br />
Jadi apa keuntungan dari Bootstrap vs Foudation? Infografis ini mungkin bisa menjawab pertanyaan anda tersebut.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfDTPtmdt2GVUKg1SdjsOWlI3zGMvnHlBNyL9xg4Evxn49ouzFNcAro5c7MMjWhwh3lcaYscSTCo9iBt8PA1HyH6H93Y5pix-FIfoXTEAWTTh0IiDxueK8vPQHzyR-0QvS7acSZLjzUAY/s1600/bootstrap-vs-foundation.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfDTPtmdt2GVUKg1SdjsOWlI3zGMvnHlBNyL9xg4Evxn49ouzFNcAro5c7MMjWhwh3lcaYscSTCo9iBt8PA1HyH6H93Y5pix-FIfoXTEAWTTh0IiDxueK8vPQHzyR-0QvS7acSZLjzUAY/s1600/bootstrap-vs-foundation.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4NK3WxCS-xGqPIiOBoTcZNkhnWGzgb-jDAfYYpEa18fzS6Zx8kSTsJYw1EQKVFH-x-ls69PEaerjAtESM2bVt67YNy596GyD0nWnJcKewtnSLj7eyVz2zeAVHYORWKJRbB_3_Ko9spk/s1600/bootstrapvsfoundation.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4NK3WxCS-xGqPIiOBoTcZNkhnWGzgb-jDAfYYpEa18fzS6Zx8kSTsJYw1EQKVFH-x-ls69PEaerjAtESM2bVt67YNy596GyD0nWnJcKewtnSLj7eyVz2zeAVHYORWKJRbB_3_Ko9spk/s1600/bootstrapvsfoundation.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
Secara sepintas kita bisa melihat bootstrap sedikit unggul dibanding foundation, misal nya bootstrap tersedia dalam bentuk less dan sass, sedangkan foundation hanya sass, dari segi komunitas juga bootstrap lebih besar dibanding foundation.<br />
<br />
Semoga bisa anda pahami, dan semoga menambah pengetahuan anda tentang framework.(<b><i><u><a href="http://belajarbootstrapframework.blogspot.com/" target="_blank">Belajar Bootstrap</a></u></i></b>)Anonymoushttp://www.blogger.com/profile/13548882296050345459noreply@blogger.com0tag:blogger.com,1999:blog-5916457536304820586.post-88673626585165501672015-12-25T06:15:00.000-08:002015-12-27T04:42:46.741-08:00Memulai Proyek Bootstrap<b><i><u><a href="http://belajarbootstrapframework.blogspot.com/" target="_blank">Memulai Proyek Bootstrap</a></u></i></b> - Setelah semua dipersiapkan saatnya memulai untuk belajar bootstrap. Baik, ikuti tahap-tahapnya berikut ini:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwitP_r2AvID4Ag-FRzSiqkqHHIwUVkWpHP-hZTFlvUcTQI1nPXMIaW7Qs_yAH5F4V_sIjXQRnmX2vTw0IGCIgWVDmPTny_69DOCqt475PypCfFWcWAmXOu8YzNdbZk8dKHWEF8Olt4AM/s1600/belajar-bootstrap-pemula.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwitP_r2AvID4Ag-FRzSiqkqHHIwUVkWpHP-hZTFlvUcTQI1nPXMIaW7Qs_yAH5F4V_sIjXQRnmX2vTw0IGCIgWVDmPTny_69DOCqt475PypCfFWcWAmXOu8YzNdbZk8dKHWEF8Olt4AM/s640/belajar-bootstrap-pemula.jpg" width="640" /></a></div>
<br />
<br />
<ol>
<li>Buat Folder Baru Buatlah folder baru, beri nama misalkan "Belajar_Bootstrap". Baca : Membuat Folder untuk website localhost</li>
<li>Copy Seluruh file Bootstrap ke dalam Folder Baru Tersebut Copy folder css, fonts dan js yang ada pada Bootstrap yang telah kita download tadi, ke dalam folder baru tersebut (Belajar_Bootstrap). Dan sekarang hapus semua file di folder css dan sisakan file bootstrap.min.css karena kita hanya memerlukan satu file saja. Sekarang semua hapus file di js dan sisakan bootstrap.min.js.</li>
<li>Copy file jQuery ke dalam folder js Copy dan Gabungkan file jquery-2.1.4.min.js yang telah kita download kedalam folder js punya bootstrap tadi, hal ini dilakukan untuk mempermudah proses pembelajaran.</li>
<li>Buat file html Buat file baru dengan sublime text editor kemudian copy code snippet yang saya sediakan dibawah ini, kemudian save dan berilah nama seperti: index.html atau default.html dan simpanlah file tersebut ke folder </li>
</ol>
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Belajar bootstrap - study-newbie.blogspot.com</title> <!-- memanggil bootstrap.min.css kedalam index.html -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container"> <!-- Fungsi kontainer adalah menyesuaikan sisi kiri dan kanan -->
<h1>Apa Kabar Dunia?</h1>
<button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">Klik Aku</button> <!-- Membuat tombol untuk memanggil class modal -->
<!-- Class modal yang akan di panggil button -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
</div>
<div class="modal-body"> Hai sobat <strong>Study-Newbie.blogspot.com</strong>. Jika dialog ini muncul maka javascript anda berjalan. jika tidak muncul coba perbaiki integrasi pemanggilan script di java script </div>
</div>
</div>
</div>
</div>
<!-- Memanggil java script -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
</code></pre>
Setelah itu silahkan anda coba sendiri fungsi dari script di atas menggunakan bootstrap cs. Untuk mengetahui lebih lanjut tentang bootstrap anda bisa langsung membaca doc di website aslinya. Bootstrap document. Selamat <b>Belajar Bootstrap</b>!<br />
(<b><i><u><a href="http://belajarbootstrapframework.blogspot.com/" target="_blank">Belajar Bootstrap</a></u></i></b>)Anonymoushttp://www.blogger.com/profile/13548882296050345459noreply@blogger.com0tag:blogger.com,1999:blog-5916457536304820586.post-40896838582163020662015-12-25T06:02:00.003-08:002015-12-25T15:11:46.651-08:00Fungsi Index dalam WebsiteMengenal Fungsi Index Dalam Website Di localhost.<br />
<br />
<span style="font-size: large;"><b>Apa Itu Index.Html ?</b></span><br />
<br />
Index.Html Adalah Sebuah File Yang Menjadi Indeks Sebuah Website. File Ini Otomatis Dibuka Saat Kita Membuka Website Dengan Memanggil Nama Domain Website. Index Html Adalah Default File Dan Merupakan File Paling Penting Bagi Website. Tanpa File Index.Html, Jika Kita Membuka Website Maka Browser Akan Menampilkan File-File Lain Dalam Bentuk Tampilan Folder Bukan Tampilan Website Sesuai Design.<br />
<b><span style="font-size: large;"><br /></span></b>
<b><span style="font-size: large;">Letak file Index.html</span></b><br />
File index.html wajib berada pada direktori utama atau direktori root sebuah website. File index.html juga harus berada pada setiap direktori dan sub direktori dalam direktori website. Hal ini dilakukan untuk alasan keamanan agar website aman dari hacking oleh pihak-pihak yang tidak bertanggungjawab.<br />
<br />
<b><span style="font-size: large;">Isi file Index.html</span></b><br />
File index.html yang berada pada direktori root umumnya berisi tampilan homepage website, yaitu halaman default saat website dibuka dengan nama domainnya. File index.html ini berisi script-script dan tata letak website beserta isi dan link-link didalam website. Dalam sistem website dinamis file index.html menjadi sangat kompleks berbeda dengan website statis.<br />
<br />
Sedangkan file index.html pada tiap-tiap direktori dan sub direktori dalam website bisa berisi peringatan untuk tidak diijinkan mengakses halaman atau bisa juga berisi script untuk mengarahkan pengguna ke file index.html pada direktori root. Baik website statis dan website dinamis sebaiknya mewajibkan adanya file index.html pada direktori dan sub direktori dalam website.<br />
<br />
File index.html yang berada dalam direktori dan sub direktori akan otomatis dibuka saat pengguna mencoba masuk langsung ke direktori dan sub direktori tersebut. Hal ini mencegah pengguna melihat isi direktori dan sub direktori yang bisa saja menjadi celah keamanan sebuah website.<br />
<br />
<b><span style="font-size: large;">Apakah harus index.html ?</span></b><br />
Sebetulnya ada beberapa nama file yang bisa dipakai untuk file indeks sebuah website, yaitu misalnya :<br />
index.html<br />
index.htm (ekstensi htm sama dengan html, namun html lebih banyak dipakai)<br />
index.php (digunakan jika file index berisi script php)<br />
default.htm (pada server windows)<br />
Diantara ke-empat file diatas, file index.html lah yang paling banyak dan paling umum digunakan. Jika dalam file index ada beberapa atau bahkan keseluruhan mengandung script php, maka file index harus disimpan dengan ekstensi .PHP menjadi file index.php.<br />
Contoh file index.html<br />
Sebuah file index.html sederhana hanya dibuat agar memenuhi format html standar seperti head, body, title dan isi.<br />
Berikut ini contoh file index.html sederhana untuk memberitahukan bahwa situs sedang dalam tahap pembuatan. silahkan taruh file index.html nya taruh di C:>xampp>htdoc>newbie-study :<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ayo Membuat website Study-newbie.blogspot.com</title>
</head>
<body>
<p> Hello world</p>
</body>
</html>
</code></pre>
<br />
Dan lihat di browser anda dengan mengetikkan localhost/study-newbie hasil coding diatas akan nampak seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg24W-xDJzuRDsgSstwv_rtzQ0Dv2dOCUYy1A1lpatoiFOnSBSspbERZwVkjiMLdv1bhmXUZMKfOouobqZ_3HuTMf2xNe_S8mRMV2HB60X7UbJVLKrLtjVjydE4ZELH1EaLHAhWqw2W1Hs/s1600/part1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg24W-xDJzuRDsgSstwv_rtzQ0Dv2dOCUYy1A1lpatoiFOnSBSspbERZwVkjiMLdv1bhmXUZMKfOouobqZ_3HuTMf2xNe_S8mRMV2HB60X7UbJVLKrLtjVjydE4ZELH1EaLHAhWqw2W1Hs/s640/part1.png" width="640" /></a></div>
<br />
<br />
<span style="font-size: large;"><b>Cara Membuat file index.html</b></span><br />
Untuk membuat file index.html sebenarnya kita hanya memerlukan aplikasi text editor. Untuk sistem operasi Windows kita bisa gunakan notepad, notepad++ atau sublime text editor (recommeded). Dan jika kita menggunakan sistem operasi Linux malah ada banyak sekali pilihan teks editor diantaranya Geany, Bluefish, Pluma, Gedit, Kate dan masih banyak lagi aplikasi teks editor di linux.<br />
<br />
Untuk lebih jelas bisa dilihat pada tulisan sebelumnya yang khusus membahas tentang Aplikasi Teks Editor untuk Pemrograman Web.<br />
<br />
File index.html juga bisa dibuat secara online pada aplikasi teks editor yang disediakan oleh cpanel atau spanel. Jadi file index.html bisa dibuat dan diedit dimana saa asalkan ada aplikasi teks editor.(<b><i><u><a href="http://belajarbootstrapframework.blogspot.com/" target="_blank">Belajar Bootstrap</a></u></i></b>)Anonymoushttp://www.blogger.com/profile/13548882296050345459noreply@blogger.com3tag:blogger.com,1999:blog-5916457536304820586.post-39846978864751333292015-12-25T05:59:00.002-08:002015-12-27T04:42:39.836-08:00Membuat Website Localhost<b><i><u><a href="http://belajarbootstrapframework.blogspot.com/" target="_blank">Membuat Website Localhost</a></u></i></b> - Sebelumnya kenalin nih ane seorang mahasiswa tingkat akhir yang mau nyelesain skripshit sebentar lagi. Mau bikinin tutorial tentang "Cara Membuat Website Localhost Menggunakan HTML / PHP". Cara dibawah ini saya rangkum dari semua website yang saya pilih agar gampang dipelajari.<br />
<br />
<b><span style="font-size: large;">Apakah Website Itu ?</span></b><br />
Website adalah sebuah media online yang berfungsi menampilkan berbagai informasi, baik informasi berupa teks, gambar atau video. Banyak sekali orang yang berkeinginan membuat website, namun keterbatasan sumber dan pengetahuan, membuat beberapa orang mengurungkan niat membuat website personal. "Cara Membuat Website Localhost Menggunakan HTML / PHP" kali ini akan mengupas tuntas bagaimana membuat website dengan menggunakan text editor biasa, recommeded sublime text editor. Di karenakan kita berencana membuat website yang berdiri sendiri dalam hosting kita maka beberapa hal perlu di persiapkan sebelum melanjutkan tutorial.<br />
<br />
1. Hosting<br />
2. Domain<br />
<br />
Melihat dua item diatas, teman-teman mungkin bingung darimana harus mendapatkan hosting dan domain, Secara yang kita ketahui, hosting dan domain harus kita dapatkan dengan cara menyewa ke layanan hosting dan domain. Sebagai solusinya agar tutorial cara membuat website ini tidak terhambat maka kita akan menggunakan hosting yang berada pada komputer kita sendiri, atau sering disebut sebagai localhost. Kemudian nama folder yang ada di localhost akan kita gunakan sebagai pengganti nama domain. Sedangkan source wordpress dapat kita ambil dari website resmi wordpress secara gratis.<br />
<br />
Berikut bahasan yang akan kita pelajari dalam tutorial membuat website personal.<br />
<br />
<b><span style="font-size: large;">Cara Membuat hosting di localhost</span></b><br />
Untuk melakukan instalasi hosting di localhost, terlebih dahulu kamu harus mengambil atau mendownload aplikasi xampp sebagai software yang akan menjadi server kamu. Klik link di sini untuk mendapatkan software xampp.<br />
<br />
Setelah kamu mendapatkan software xampp, kamu dapat melanjutkan dengan melakukan instalasi software. Caranya cukup klik dua kali software xampp. Lalu ikuti panduan wizard yang diberikan oleh software hingga selesai.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3iwTejjlgkyQX9XWOT2AnjLj3y74yWLJ1RiTzdVLDfoKtaSJeV3CoNG8d3czfmk2NPedEtHXOkILFGlY2m1zsxv2alAhGOgVEPHTVTYieJIeIHYASE7Le8Rs88vZ8MSXTR_cuZPri2K4/s1600/instal-xampp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="434" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3iwTejjlgkyQX9XWOT2AnjLj3y74yWLJ1RiTzdVLDfoKtaSJeV3CoNG8d3czfmk2NPedEtHXOkILFGlY2m1zsxv2alAhGOgVEPHTVTYieJIeIHYASE7Le8Rs88vZ8MSXTR_cuZPri2K4/s640/instal-xampp.jpg" width="640" /></a></div>
<br />
Saya anggap kamu telah selesai melakukan instalasi xampp di komputer kamu, mari kita lanjutkan tutorial membuat website. Buka browser kesayangan kamu seperti mozilla firefox, atau google chrome. Di kotak url address browser kamu ketikkan. http://localhost. Jika instalasi xampp kamu sukses, maka akan tampil dibrowser kamu seperti gambar dibawah ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmk9ecLopdqLxZuc_sJiIG-NXFVtX0zP4193ySw_f9hybifoN59sTJfpNGIlkYUYEOuUVO4IGOEQvDQ6wS96yJzPG_OWKlWWHHhxpUluXtLT5RwpJsagKZFmrUOLSYdnofQL8oFCbrNtQ/s1600/gambar-xampp-sukses.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="434" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmk9ecLopdqLxZuc_sJiIG-NXFVtX0zP4193ySw_f9hybifoN59sTJfpNGIlkYUYEOuUVO4IGOEQvDQ6wS96yJzPG_OWKlWWHHhxpUluXtLT5RwpJsagKZFmrUOLSYdnofQL8oFCbrNtQ/s640/gambar-xampp-sukses.jpg" width="640" /></a></div>
<br />
<br />
Lanjut pada sesi dimana kamu harus membuat sebuah folder yang berfungsi untuk mengganti nama domain. Caranya seperti ini, masuk ke direktori c komputer kamu, lalu klik pada folder xampp, setelah itu klik kembali pada folder htdocs. Setelah kamu berada didalam folder htdocs, buatlah satu folder baru dengan nama yang kamu inginkan. misalnya untuk tutorial ini kita namakan study-newbie. Ingat nama yang kamu gunakan tidak boleh ada spasi antara katanya. Kemudain di lanjutkan dengan mencoba mengakses folder yang sudah kamu buat dengan mengetikkannya di browser kamu seperti ini http://localhost/study-newbie.<br />
<br />
Jika kamu sukses maka akan tampil index tanpa files di browser kamu. Hal ini menandakan bahwa folder kamu belum terisi oleh files apapun.<br />
<br />
Selanjutnya anda bisa membaca di "<b><span style="color: red;"><a href="http://belajarbootstrapframework.blogspot.co.id/2015/12/fungsi-index-dalam-website.html" target="_blank">Cara Membuat Website Localhost part 2</a></span></b>" (<b><i><u><a href="http://belajarbootstrapframework.blogspot.com/" target="_blank">Belajar Bootstrap</a></u></i></b>)Anonymoushttp://www.blogger.com/profile/13548882296050345459noreply@blogger.com1tag:blogger.com,1999:blog-5916457536304820586.post-17666999279706290702015-12-25T05:56:00.000-08:002015-12-27T04:44:14.165-08:00Belajar Bootstrap untuk Pemula<b><i><u><a href="http://belajarbootstrapframework.blogspot.com/" target="_blank">Belajar Bootstrap untuk Pemula</a></u></i></b> - Setelah mengetahui <b><span style="color: red;"><a href="http://belajarbootstrapframework.blogspot.co.id/2015/12/apa-itu-bootstrap.html" target="_blank">apa itu bootstrap</a> </span></b>dan <b><span style="color: red;"><a href="http://belajarbootstrapframework.blogspot.co.id/2015/12/untuk-apa-itu-bootstrap.html" target="_blank">kegunaan bootstrap</a></span></b>, untuk memulai <b>belajar Bootstrap</b>, Anda harus mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan belajar tersebut. Baiklah langsung saja.<br />
<br />
<b><span style="font-size: large;">Persiapan Belajar Bootstrap</span></b><br />
<br />
Untuk memulai menggunakan <b>bootstrap</b>, Anda harus mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan belajar tersebut.<br />
<br />
<b><span style="font-size: large;">1. File distribusi Bootstrap </span></b><br />
<br />
Untuk menggunakan bootstrap, terlebih dahulu Anda harus mendownload resource file atau file distribusi yang disediakan oleh bootstrap di situs resminya <b><span style="color: red;"><a href="http://getbootstrap.com/">getbootstrap.com</a></span></b>. Link disediakan adalah versi 3.3.5 jika ingin melihat update bootstrap silahkan buka situs getbootstrap.com. Pada halaman tersebut, terdapat tombol Download Bootstrap, langsung saja! klik tombol tersebut. Kemudian pilih lagi dibagian Source Code dan pilih tombol Download source code.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimwxsVGjvj3ZyuYRPLMWkfSLXZXzJhdjKLlmRghPCZZZP5uLbq4-99P7mAC-G5hrVGRIgPZrvDt_2nRAiZSMO8xCuGlzAnIZ6-Jztax_NAtOzAVBw-0PxMpfCNCyEjuRkFD5Zhc7vIiAo/s1600/belajar-bootstrap-pemula.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimwxsVGjvj3ZyuYRPLMWkfSLXZXzJhdjKLlmRghPCZZZP5uLbq4-99P7mAC-G5hrVGRIgPZrvDt_2nRAiZSMO8xCuGlzAnIZ6-Jztax_NAtOzAVBw-0PxMpfCNCyEjuRkFD5Zhc7vIiAo/s640/belajar-bootstrap-pemula.jpg" width="640" /></a></div>
<br />
Setelah didownload, kemudian extract menggunakan program seperti 7zip (Gratis) atau winRAR (shareware). Sebetulnya, Anda juga bisa membuka file tersebut dengan aplikasi bawaan windows dengan cara membuka file tersebut, kemudian copy seluruh file dan paste-kan ke folder lain.<br />
<b><span style="font-size: large;"><br /></span></b>
<b><span style="font-size: large;">2. File jQuery Library</span></b><br />
<br />
Untuk bisa mengaplikasikan bootstrap component seperti modal dialog, navigation bar dan lainnya yang membutuhkan boostrap JS, Bootstrap JS juga membutuhkan jQuery library agar bisa berjalan normal. Bootstrap tidak menyertakan jQuery di dalam file download-nya untuk itu, kita harus mendownloadnya secara terpisah.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2xB80uKGiq24ZxpUgSEg27qu7p42uYT4YEO5d8gL24JdzqcW5muTi3BPDNDBm_sH3YpQj75zsv-fMm1BrnijOww4n_KMYavR3m7F6mN1DJtdeSov2FoBMPhszxyQDS6XtRizZXbARdAs/s1600/jQuery-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2xB80uKGiq24ZxpUgSEg27qu7p42uYT4YEO5d8gL24JdzqcW5muTi3BPDNDBm_sH3YpQj75zsv-fMm1BrnijOww4n_KMYavR3m7F6mN1DJtdeSov2FoBMPhszxyQDS6XtRizZXbARdAs/s640/jQuery-logo.png" width="640" /></a></div>
<br />
Hal ini dilakukan agar kita bisa bekerja dan menggunakannya secara offline (tanpa koneksi internet). Silahkan download jQuery library dengan menuju situs resmi <b><span style="color: red;"><a href="http://jquery.com/download/" target="_blank">jQuery Download</a></span></b>, pilih jQuery 2.x kemudian, download dengan mengklik link Download the compressed, production jQuery 2.1.4<br />
<br />
<b><span style="font-size: large;">3. Code Editor</span></b><br />
<br />
Code editor penting sekali untuk memanipulasi file yang akan kita kembangkan khususnya file HTML, CSS dan Javascript sebagaimana file tersebut terdapat pada bootstrap. Anda juga bisa menggunakan Code Editor dari Sublime Text editor yang sudah saya tes atau uji coba. Jangan pernah menggunakan Word processor (Microsoft Word, dll) ataupun notepad untuk memanipulasi file-file tersebut. Karena aplikasi tersebut tidak cocok dan terdapat banyak kekurangan yang akan membingungkan kita sendiri nantinya.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4L5YrmefiRHR9CywUQ_lJSdXaRhvwx70Fa2rNpCYFSex3VFVBzthzGygcgS_lBSNN4-6UT9-lnLlq6pl3byuwkwQztfPj-PiNq82jN-lyoFM5aPzBBY5yvha5QCbp3C7E3qH1wBisH4I/s1600/sublime-text.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4L5YrmefiRHR9CywUQ_lJSdXaRhvwx70Fa2rNpCYFSex3VFVBzthzGygcgS_lBSNN4-6UT9-lnLlq6pl3byuwkwQztfPj-PiNq82jN-lyoFM5aPzBBY5yvha5QCbp3C7E3qH1wBisH4I/s640/sublime-text.jpg" width="640" /></a></div>
<br />
<br />
Ada banyak sekali code editor yang tersebar di internet yang dapat kita gunakan baik yang gratis maupun yang berbayar. Sebagai pemula, mungkin kita bisa memulai dengan menggunakan Sublime Text Editor. Aplikasi ini gratis dan banyak digunakan oleh developer. Download aplikasi <b><a href="http://www.sublimetext.com/2" target="_blank"><span style="color: red;">Sublime Text Editor</span></a></b><br />
<br />
<b><span style="font-size: large;">4. Xampp </span></b><br />
Software ini untuk kita yang ingin belajar membuat website secara offline di komputer sendiri. Baca juga : <b><span style="color: red;"><a href="http://belajarbootstrapframework.blogspot.co.id/2015/12/membuat-website-localhost.html" target="_blank">Membuat website localhost</a></span></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3oAMfkpzatBSdzlC21AQ6YlOh6oCL1lnX0RDXiZ_r66-7YTL0mbzz-vZrfELbQmX3DOZtDjb2RHy27p14YAg-B9lUcNVhcHuLcss6-9JngR0-QF7DiJTBWohomx6YfsWbZZYT_OP27zA/s1600/xampp-logo-rgb-small+%25281%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="109" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3oAMfkpzatBSdzlC21AQ6YlOh6oCL1lnX0RDXiZ_r66-7YTL0mbzz-vZrfELbQmX3DOZtDjb2RHy27p14YAg-B9lUcNVhcHuLcss6-9JngR0-QF7DiJTBWohomx6YfsWbZZYT_OP27zA/s320/xampp-logo-rgb-small+%25281%2529.jpg" width="320" /></a></div>
<br />
Materi berikutnya adalah <b><span style="color: red;"><a href="http://belajarbootstrapframework.blogspot.com/2015/12/instalasi-bootstrap.html" target="_blank">instalasi bootstrap</a></span></b> di komputer kamu.<br />
<br />
(<b><i><u><a href="http://belajarbootstrapframework.blogspot.com/" target="_blank">Belajar Bootstrap</a></u></i></b>)Anonymoushttp://www.blogger.com/profile/13548882296050345459noreply@blogger.com0tag:blogger.com,1999:blog-5916457536304820586.post-10040063764141590472015-12-25T05:42:00.000-08:002015-12-27T04:31:06.399-08:00Untuk Apa itu bootstrap?<b><i><u><a href="http://belajarbootstrapframework.blogspot.com/" target="_blank">Untuk Apa itu bootstrap?</a></u></i></b> - Setelah mengetahui <b><span style="color: red;"><a href="http://belajarbootstrapframework.blogspot.co.id/2015/12/apa-itu-bootstrap.html" target="_blank">apa itu Bootstrap</a></span></b>, selanjutnya kami akan menjelaskan fungsi Bootstrap yaitu Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnxJvomIAyKagELfJpoezMgvuedrA9pKztasEEmwgqiau6jz6Mfe6Vxl4OxPxoRPhnfTEMN7liyFjNKJAVhXNWSZqgSHvyAfwz94l_1iC98Smy40sTAEAoBrRMO11HJp8rIpysqJVBb74/s1600/belajar-bootstrap.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnxJvomIAyKagELfJpoezMgvuedrA9pKztasEEmwgqiau6jz6Mfe6Vxl4OxPxoRPhnfTEMN7liyFjNKJAVhXNWSZqgSHvyAfwz94l_1iC98Smy40sTAEAoBrRMO11HJp8rIpysqJVBb74/s320/belajar-bootstrap.jpg" width="320" /></a></div>
<br />
Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.<br />
<br />
Tutorial Berikut adalah <b><span style="color: red;"><a href="http://belajarbootstrapframework.blogspot.com/2015/12/belajar-bootstrap-untuk-pemula.html" target="_blank">Aplikasi yang dibutuhkan oleh Bootstrap</a></span></b>.<br />
(<b><i><u><a href="http://belajarbootstrapframework.blogspot.com/" target="_blank">Belajar Bootstrap</a></u></i></b>)Anonymoushttp://www.blogger.com/profile/13548882296050345459noreply@blogger.com0tag:blogger.com,1999:blog-5916457536304820586.post-70103504304152919382015-12-25T05:40:00.002-08:002015-12-27T04:27:55.790-08:00Apa Itu Bootstrap?<b><i><u><a href="http://belajarbootstrapframework.blogspot.com/" target="_blank">Apa Itu Bootstrap?</a></u></i></b> - Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_AFYfLCJK-k5xDB_DfqPJR5RLnmot2RQdHasMsJT6_Aza4J4QEic1B-qxkeV5i5Cihjqi9Z2JJYeaVn_jgImn2xHGrsJ_v1meAr_-o4LedNBA1oMwbDWcfzgCi0j_7eKmdFs3h9D76Tw/s1600/belajar-bootstrap.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_AFYfLCJK-k5xDB_DfqPJR5RLnmot2RQdHasMsJT6_Aza4J4QEic1B-qxkeV5i5Cihjqi9Z2JJYeaVn_jgImn2xHGrsJ_v1meAr_-o4LedNBA1oMwbDWcfzgCi0j_7eKmdFs3h9D76Tw/s640/belajar-bootstrap.jpg" width="640" /></a></div>
<br />
Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.<br />
<br />
Saran Membaca <b><span style="color: red;">Tutorial Bootstrap</span></b> berikut :<br />
<br />
<ol>
<li><a href="http://belajarbootstrapframework.blogspot.co.id/2015/12/untuk-apa-itu-bootstrap.html" target="_blank">Untuk Apa Bootstrap itu?</a></li>
<li><a href="http://belajarbootstrapframework.blogspot.co.id/2015/12/belajar-bootstrap-untuk-pemula.html" target="_blank">Aplikasi yang Dibutuhkan</a></li>
<li><a href="http://belajarbootstrapframework.blogspot.co.id/2015/12/instalasi-bootstrap.html" target="_blank">Instalasi Bootstrap</a></li>
<li><a href="http://belajarbootstrapframework.blogspot.co.id/2015/12/memulai-proyek-bootstrap.html" target="_blank">File Bootstrap Pertama kamu</a></li>
</ol>
<br />
<br />
<br />
(<b><i><u><a href="http://belajarbootstrapframework.blogspot.com/" target="_blank">Belajar Bootstrap</a></u></i></b>)Anonymoushttp://www.blogger.com/profile/13548882296050345459noreply@blogger.com0