Percantik Paging dengan Bootstrap

Percantik Paging dengan Bootstrap

By nn   07:49   No comments:

Hallo...
Semangat pagi !

Selain PHP, minggu ini saya juga akan posting tentang Bootstrap. Bagi kalangan awam di dunia programming seperti saya, pasti menganggap bahwa Bootstrap itu sangat susah. Tapi ketika Saya lebih mendalaminya lagi, ternyata Bootstrap itu cukup gampang, ketika kita tahu logikanya.

Pengertian

Bootstrap adalah gabungan HTML, CSS dan JavaScript atau framework yang paling populer untuk mengembangkan web responsive yang pertama. Bootstrap bersifat open source, dan gratis untuk di download dan menggunakannya.

Latar Belakang

Dalam pembuatan pemrograman berbasis web ataupun berbasis dekstop, responsive sangat di perlukan duna menunjang tampilan ketika dibuka di handphone, tablet ataupun lainnya. Dengan penggunaan Bootsrap tampilan yang kita lihat di PC otomatis akan menyesuaikan ketika dibuka di Handphone, tablet, ataupun yang lainnya.

Maksud dan Tujuan

Untuk memberi wawasan dan referensi kepada teman-teman tentang Bootstrap dan tag-tag dalam Bootstrap.

Jangka Waktu Kegiatan

Untuk membuat tampilan paging dengan Bootstrap tidak membutuhkan waktu yang lama, kurang dari 10 menit pembuatan paging dengan Bootstrap telah selesai.

Alat dan Bahan 

1. Komputer atau Laptop.
2. Sublime text atau text editor lainnya.

Tahapan dan Langkah kegiatan

Berikut adalah tahap-tahap pelaksanaannya :

1. Download terlebih dahulu tamplate Bootstrap disini.

2. Ekstract filenya dan pindahkan folder js, css, dan fonts.

3. Buat file index.php.

4. Tulislah kode berikut :



5. Jangan lupa memberi koneksi css nya.

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
6. Simpan, dan selesai.

Hasil

Telah memuat paging dengan tampilan dari Bootstrap.

Kesimpulan

Bootstrap adalah tamplate yang dapat digunakan ketika Kita akan membuat website ataupun yang lainnya, dan Bootstrap merupakan tamplate yang responsive.

Referensi

-

Read More

Membuat Pagination Dengan PHP

Membuat Pagination Dengan PHP

By nn   20:00   No comments:

Hallo...
Semangat pagi !

Lagi dan lagi saya akan share tentang bahasa pemrograman yang pasti sudah tidak asing lagi di kalangan pecinta coding, apalagi kalau bukan PHP. Yang masih awam jangan salah sangka ya, PHP yang dimaksud itu bukan Pemberi Harapan Palsu. Tapi adalah .... Simak kebawah saja ya untuk lebih mengetahuinua.

Yuk simak !

Pengertian

Apa itu paging ? Paging atau Pagenation adalah teknik menampilkan data perhalaman yang di inginkan. Teknik ini digunakan jika data yang akan ditampilkan terlalu banyak, sehingga merusak tampilan. Paging dalam PHP dapat menampilkan data perrecord, perhalaman atau menampilkannya dalam bentuk yang pisah-pisah menjadi beberapa halaman sesuai yang kita inginkan.

Latar Belakang

Dengan paging atau pagenation, loading halaman lebih cepat karena PHP hanya memanggil beberapa data saja. Selain itu dengan menggunakan paging

Maksud dan Tujuan

Untuk memberi wawasan dan referensi kepada teman-teman dalam pembuatan paging atau pagenation.

Jangka Waktu Kegiatan

Untuk pembuatan paging atau pagenation ini tidak membutuhkan waktu lama, Saya hanya membutuhkan waktu sekitar 5 menit untuk membuat paging, dan mengkombinasikan kepostingan-postingan saya di website yang telah saya buat.

Alat dan Bahan 

1. Komputer atau Laptop.
2. Sublime text atau text editor lainnya.
3. Web Server (LAMP atau XAMPP).

Tahapan dan Langkah kegiatan

Sebagai langkah-langkah pembuatan paging adalah sebagai berikut :

1. Buat databasenya terlebih dahulu seperti pada gambar dibawah ini.

2. Inputkan data, lebih dari 3.

3. Buat koneksi ke database. Seperti pada postingan saya sebelumnya, Membuat koneksi Database.

4. Membuat kode untuk menampilkan halamannya.



5. Selesai.

Hasil

Telah membuat paging dan menerapkannya dalam suatu halaman website di web server.

Kesimpulan

Referensi

- http://www.carikode.com/tutorial-php-membuat-paging-dengan-php/
- http://www.candra.web.id/teknik-paging-halaman-php/

Read More

Membuat Text Editor dengan Bootstrap dan Jquery

Membuat Text Editor dengan Bootstrap dan Jquery

By nn   21:46   No comments:

Hallo...
Semangat Pagi !

Kali ini saya posting tentang text editor nihh.. Sedikit cerita ya, dari kelas XI saya udah pengen tau kodenya dan pengen bisa buat text editor seperti gambar di bawah, tapi gak tau kenapa baru kali ini, saat saya berada di BLC. Saya baru menemukan kode dan cara membuat text editor. Haha... perjuangan yang hampir satu tahun.

Yuk simak !

Pengertian
Text editor adalah sebuah tool tambahan yang memiliki banyak fitur, dan membantu memberi format penulisan posting yang ingin kita tulis.

Latar Belakang
Sangat membantu, jika dalam membuat posting artikel menggunakan tool-tool dalam Text Editor.

Alat dan Bahan
1. Komputer atau Laptop
2. Sublime text atau text editor lainnya.

Tahap Pelaksanaan
 1. Tahap pertama, download terlebih dahulu bootstrapnya, jika sudah mempunyai bootstrap, berarti tidak usah mendownload. Download bootstrap di sini 
2. Download juga jquernya, Download Jquery Text Editor disini
3. Tuliskan kode berikut ini, pastikan berada di dalam tag <body>..</body>

---

     <script type="text/javascript" src="assets/ckeditor/ckeditor.js"></script>
     <label>Input Berita Terkini</label>
                              <section class="panel">
                                      <div class="form">
                                          <form action="#" class="form-horizontal">
                                              <div class="form-group">
                                                  <div class="col-sm-10">
                                                      <textarea class="form-control ckeditor" name="editor1" rows="6"> </textarea>
                                          </form>
                                      </div>
                                      <button></button>
                              </section>

---

 4.  Simpan dengan ekstensi html ataupun php. Lalu buka di browser anda, dan lihat hasilnya.

Referensi
 -

Penutup 
Terimakasih telah berunjung di blog saya hari ini, sampai jumpa di postingan selanjutnya.
Selamat mencoba dan selamat belajar !

Read More

Mengenal Grid System Bootstrap

Mengenal Grid System Bootstrap

By nn   19:48   No comments:

Hallo...

Semangat Pagi !

Hari ini cerah dengan kehadiran kalian *eaaaa....

Trimakasih telah berkunjung di web saya :)

 

 

Seperti yang telah dijelaskan di atas, grid system bootstrap dibagi dalam 12 kolom dan empat macam ukuruan. empat ukuran tersebut adalah :

1. col-xs-* ini digunakan pada ukuran kurang dari 768px atau seukuran mobile.
2. col-sm-* ini digunakan pada ukuran lebih dari atau sama dengan 768px atau seukuran tablet.
3. col-md-* ini digunakan pada ukuran lebih dari atau sama dengan 992px atau selebar monitor.
4. col-lg-* ini lebih dari atau sama dengan 1200px atau monitor besar.

dari grid diatas kita bisa mengkombinasikan agar kita bisa memperoleh layout web sesuai keinginan kita.
misalkan :

<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3"> ...</div>

1	<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3">...</div>

akan membuat tiga kolom apapun ukuran layarnya. sedangkan

<div class="col-md-3"> ...</div>

1	<div class="col-md-3">...</div>

akan membuat tiga kolom saat berada di layar monitor seperti laptop tapi menjadi satu kolom saat berada dilayar smartphone.
Selain empat macam ukuran di atas di dalam bootstrap terdapat dua macam class lain yang berguna dalam membuat layout web yaitu .container dan .row

container membantu kita membuat layout website kita berada di tengah-tengah browser seperti gambar dibawah ini

Tanpa container

dengan container

dan berikut cara membuat layout web dengan container dan tanpa container
Dengan container

<div class="continer"> <div class="row"> <div class="col-md-12"> ...</div> </div> </div>

1 2 3 4 5

<div class="continer">    <div class="row">      <div class="col-md-12">...</div>     </div> </div>

Tanpa container

<div class="col-md-12"> <div class="row"> <div class="col-md-12"> ...</div> </div> </div>

1 2 3 4 5

<div class="col-md-12">    <div class="row">      <div class="col-md-12">...</div>    </div> </div>

row membantu kita untuk membuat baris baru dalam membuat layout. Selain untuk membuat baris baru layout biasa digunakan ketika kita hendak menambahkan grid di dalam grid seperti berikut :
cara yang BENAR

<div class="col-md-3"> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-3"> ...</div> <div class="col-md-9"> ...</div> </div> </div> <div class="col-md-6"> ...</div> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12

<div class="col-md-3">   <div class="row">      <div class="col-md-6">         <div class="row">           <div class="col-md-3">...</div>           <div class="col-md-9">...</div>         </div>       </div> <div class="col-md-6">...</div>     </div> </div>

Cara yang SALAH

<div class="col-md-3"> <div class="col-md-6"> <div class="col-md-3"> </div> <div class="col-md-9"> </div> </div> <div class="col-md-6"> </div> </div>

1 2 3 4 5 6 7

<div class="col-md-3">     <div class="col-md-6">         <div class="col-md-3"></div>         <div class="col-md-9"></div>      </div>      <div class="col-md-6"></div> </div>

Apabila kita menggunakan cara yang SALAH layout web yang kita buat akan rusak terutama saat dibuka di mobile dan layout yang seharusnya responsive justru akan kacau dan ancur.

Membuat Layout Web dengan Bootstrap

Agar lebih mengena kita akan mencoba membuat langsung layout website dengan bootstrap. kita akan membuat sebuah desain website yang sederhana saja seperti header, navigasi, content, sidebar dan footer.

baca juga Membuat Landing Page di wordpress dengan bootstrap

Pertama bayangkan lebar layar kita dibagi ke dalam 12 kolom, jika sudah kita akan membanginya header 12 kolom lalu di bawahnya ada navigasi sebanyak 12 kolom kemudian body 12 kolom, di dalam body kita bagi lagi 9 kolom untuk konten dan 3 kolom untuk sidebar, dibawah body adalah footer dengan 12 kolom. bagaimana bingung ? coba lihat gambar berikut.

kemudian kita bagi sesuai keterangan di atas tadi sehingga jadi seperti berikut.

yang perlu diperhatikan adalah ketika kita berpindah baris atau menulis grid didalam grid hendaklah gunakan .row .

jadi kalau kita kodekan maka layout web di atas akan seperti ini

<div class="col-md-12"> <div class="row"> <header class="col-md-12"> code header di sini </header> </div> <!-- end header --> <div class="row"> <div class="col-md-12"> code navigasi di sini </div> </div> <!-- end navigasi --> <div class="row"> <div class="wrapper"> <div class="col-md-9"> <article> code content di sini </article> </div> <!-- end posting area --> <div class="col-md-3"> <aside> code widget / sidebar di sini </aside> </div> <!-- end sidebar --> </div> </div> <!-- end wrapper --> <div class="row"> <div class="col-md-12"> <footer class="footer"> code footer di sini </footer> </div> </div> <!-- end footer --> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

<div class="col-md-12">     <div class="row">         <header class="col-md-12">           code header di sini         </header>     </div>     <!-- end header -->          <div class="row">         <div class="col-md-12">          code navigasi di sini         </div>     </div>     <!-- end navigasi -->     <div class="row">         <div class="wrapper">             <div class="col-md-9">                <article>                   code content di sini                </article>               </div>             <!-- end posting area -->             <div class="col-md-3">                <aside>                   code widget / sidebar di sini                </aside>             </div>             <!-- end sidebar -->         </div>     </div>     <!-- end wrapper -->          <div class="row">         <div class="col-md-12">             <footer class="footer">                code footer di sini             </footer>         </div>     </div>     <!-- end footer --> </div>

Sekian artikel belajar bootstrap dalam mengenal system grid bootstrap 3. selain mempermudah kita dalam membagi ruang grid pada bootstrap juga membantu dalam mengatur layout web yang responsive, kuncinya adalah pada penggunaan ke empat macam col, penggunaan container dan row yang benar.


Sumber : https://www.onphpid.com/

Read More

Membuat Table Responsive dengan Bootstrap Secara Mudah

Membuat Table Responsive dengan Bootstrap Secara Mudah

By nn   00:56   No comments:

Hallo...
Semangat Pagi !

Terimakasih telah berkunjung di blog saya, kali ini saya akan posting tutorial membuat table responsive menggunakan bootstrap.

Yuk simak !

Pengertian 
Bootstrap adalah front-end framework untuk membuat sebuah website yang responsive.

Alat dan Bahan 
1. Komputer atau laptop.
2. Sublime text atau text editor lainnya.

Tahap Pelaksanaan 
1. Tahap awal buka text editor anda, di sini saya memakai sublime text 3, karena lebih memudahkan dari pada text editor lainnya.
2. Salinlah kode berikut

---

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Table</h2>
  <p>Ini adalah table responsive</p>                                                                                     
  <div class="table-responsive">         
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

</body>
</html>

---

3. Simpan dengan nama_file sesuai dengan keinginan anda, ekstensi harus berupa .html ataupun .php
Jika anda mencoba membuat, pastikan laptop dalam keadaan online.
jika tidak online, ubahlah kode yang saya cetak tebal sesuai file anda, usahakan mendownload terlebih dahulu bootstrap.min.css,bootstrap.min.js, dan
jquery.min.js.

Referensi
www.w3schools.com

Penutup
Trimakasih telah menyimak postingan saya kali ini, sampai jumpa di postingan saya selanjutnya. Selamat mencoba dan selamat belajar !

Read More

Mengenal Bootstrap

Mengenal Bootstrap

By nn   23:20   No comments:

Hallo...
Semangat Pagi !

Hari ini saya belajar bootstrap, bagi temen-temen rekayasa perangkat lunak pasti mengetahui apa itu bootstrap. Tapi sebagaian dari kita, taunya bootstrap itu sudah berbentuk tamplate, ya memang ada yang berbentuk tamplate, tapi ada juga bootstrap yang kita buat sendiri.

Nah, apa sih bootstrap itu ?
Bootstrap adalah gabungan HTML, CSS dan JavaScript atau framework yang paling populer untuk mengembangkan web responsive yang pertama. Bootstrap bersifat open source, dan gratis untuk di download dan menggunakannya.


 Sejarah Bootstrap
Bootstrap di kembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan di rilis sebagai produk open source pada bulan Agustus 2011 oleh GitHub.

Keuntungan menggunakan bootstrap adalah :
1. Mudah di gunakan oleh siapa saja, dengan pengetahuan HTML dan CSS yang masih dasar dapat menggunakan bootstrap.
2. Memiliki fitur responsif, dapat di menyesuaikan di ponsel, tablet, dan dekstop.
3. Bootstrap dapat di gunakan di semua browser (chorme, fireox, internet explorer, safari dan opera).



Nah, bagaimana ? sudahkah teman-teman mengetahui tentang bootstrap ?

Semoga artikel yang saya posting kali ini bermanfaat. Trimakasih telah menyimak postingan saya kali ini, sampai jumpa di postingan selanjutnya.

Read More