Instalasi Bootstrap

04.17 0
Instalasi Bootstrap - Berikut adalah langkah instalasi bootstrap

Langkah 1 Instalasi Bootstrap
  1. Download file Bootstrap yang ada Disini. 
  2. Hasil download berupa file .Zip yang berisikan folder CSS, JS & IMG. 
  3. Isi folder CSS : bootstrap.css , bootstrap.min.css, bootstrap-responsive.css & bootstrap-responsive.min.css
  4. Isi folder JS : bootstrap.js & bootstrap.min.js 
  5. Isi folder IMG :  glyphicons-halflings.png  & glyphicons-halflings-white.png
  6. Selanjutnya Download juga jQuery.js / jQuery.min.js , ini WAJIB ADA karena function Javascript yang ada di Twitter Bootsrap diambil dari jQuery.  Silahkan Download Disini (Direkomendasikan untuk download versi yang terbaru). 
Langkah 2 Instalasi Bootstrap
  1. Buat sebuah folder dengan nama Belajar_Bootstrap di derektori mana saja / lebih bagus lagi kalau di buat di derektori local webserver yang anda gunakan seperti Apache , XAMPP & WAMPP. 
Langkah 3 Instalasi Bootstrap
  1. Copy kan folder hasil download dari Twitter Bootstrap (Folder : JS,CSS,IMG) kedalam folde Belajar_Bootstrap. 
  2. Berikutnya copy kan hasil dowload jquery.js kedalam Folder JS
  3. Lalu, Buat file HTML dengan nama index.html, Letakan / simpan di dalam folder Belajar_Bootstrap.
  4. Jika sudah selesai, Struktur foldernya kurang lebih akan seperti ini : 

Belajar_Bootstrap
css
             bootstrap.css
             bootstrap.min.css
             bootstrap-responsive.css
             bootstrap-responsive.min.css

img
             glyphicons-halflings.png
             glyphicons-halflings-white.png

js
             bootstrap.js
             bootstrap.min.js
             jquery.js

index.html
Keterangan : Yang di Bold (Cetak Tebal) itu = Folder

Sekarang instalasi / pengaturan struktur file dan folder sudah selesai.

Sekarang instalasi / pengaturan struktur file dan folder sudah selesai. Berikut nya kita mulai untuk coding awal.

Silahkan ketikan coding berikut ini di file index.html untuk permulaan.

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

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.
(Belajar Bootstrap)

Bootstrap vs Foundation

06.18 0
Bootstrap vs Foundation - 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.

Namun ada dua framework yang paling ternama saat ini, yang paling banyak pengguna nya, yaitu Twitter Bootstrap dan Foundation.

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.

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.

Bootstrap vs Foundation

Jadi apa keuntungan dari Bootstrap vs Foudation? Infografis ini mungkin bisa menjawab pertanyaan anda tersebut.




 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.

Semoga bisa anda pahami, dan semoga menambah pengetahuan anda tentang framework.(Belajar Bootstrap)

Memulai Proyek Bootstrap

06.15 0
Memulai Proyek Bootstrap - Setelah semua dipersiapkan saatnya memulai untuk belajar bootstrap. Baik, ikuti tahap-tahapnya berikut ini:



  1. Buat Folder Baru Buatlah folder baru, beri nama misalkan "Belajar_Bootstrap". Baca : Membuat Folder untuk website localhost
  2. 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.
  3. 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.
  4. 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 

<!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>
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 Belajar Bootstrap!
(Belajar Bootstrap)

Fungsi Index dalam Website

06.02 3
Mengenal Fungsi Index Dalam Website Di localhost.

Apa Itu Index.Html ?

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.

 Letak file Index.html
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.

Isi file Index.html
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.

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.

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.

Apakah harus index.html ?
Sebetulnya ada beberapa nama file yang bisa dipakai untuk file indeks sebuah website, yaitu misalnya :
index.html
index.htm (ekstensi htm sama dengan html, namun html lebih banyak dipakai)
index.php (digunakan jika file index berisi script php)
default.htm (pada server windows)
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.
Contoh file index.html
Sebuah file index.html sederhana hanya dibuat agar memenuhi format html standar seperti head, body, title dan isi.
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 :

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

Dan lihat di browser anda dengan mengetikkan localhost/study-newbie hasil coding diatas akan nampak seperti ini :



Cara Membuat file index.html
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.

Untuk lebih jelas bisa dilihat pada tulisan sebelumnya yang khusus membahas tentang Aplikasi Teks Editor untuk Pemrograman Web.

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.(Belajar Bootstrap)

Membuat Website Localhost

05.59 1
Membuat Website Localhost - 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.

Apakah Website Itu ?
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.

1. Hosting
2. Domain

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.

Berikut bahasan yang akan kita pelajari dalam tutorial membuat website personal.

Cara Membuat hosting di localhost
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.

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.


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.



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.

Jika kamu sukses maka akan tampil index tanpa files di browser kamu. Hal ini menandakan bahwa folder kamu belum terisi oleh files apapun.

Selanjutnya anda bisa membaca di "Cara Membuat Website Localhost  part 2" (Belajar Bootstrap)
Langganan: Postingan (Atom)