Tuesday, February 20, 2018

Cara Membuat Tabel Dengan Bootstrap

Cara Membuat Tabel Dengan Bootstrap - Bootstrap adalah sebuah framework yang paling banyak digunakan webmaster untuk membuat dan mengembangkan website, terutama untuk membuat tampilan laman web. Dengan menggunakan bootstrap anda dapat mendesain berbagai bentuk web, salah satunya adalah dengan membuat tabel.

Membuat tabel dengan bootstrap sangat mudah, karena sudah banyak dukungan tanpa anda harus membuat dari awal. Pada postingan saya sebelumnya pernah menyinggung Cara Menggunakan Bootstrap, nah yang perlu Anda lakukan adalah dengan memasukkan berbagai macam class yang telah disediakan oleh bootstrap untuk mendesain tabel yang akan anda buat. Berikut class yang dapat anda jadikan untuk mendesain tabel dengan bootstrap.
Cara Membuat Tabel Dengan Bootstrap

  1. Class (.Table): class ini digunakan untuk membuat tabel standar.
  2. Class (.Table-Striped): class table ini digunakan untuk membuat tabel dengan baris strip.
  3. Class (.Table-Bordered): class table bootstrap ini digunakan untuk membuat desain tabel dengan memiliki garis.
  4. Class (.Table-Hover): class ini digunakan untuk membuat tabel jika salah satu baris atau row disentuh oleh kursor akan memiliki efek.
Itulah beberapa class table bootstrap yang dapat anda gunakan untuk mendesain tabel di php melalui bootstrap. Class tersebut dapat anda kombinasikan dengan class table lain sehingga dapat menghasilkan tampilan tabel yang menarik dan terlihat profesional.

Untuk lebih jelasnya bagaimana cara membuat tabel dengan bootstrap, simak dibawah ini.

Cara Membuat Tabel Dengan Bootstrap


Sebelumnya anda membuat tabel dengan bootstrap pastikan telah memilki CSS bootstrap (bootstrap.cssatau bootstrap.min.css), seperti yang saya contohkan dibawah ini.

Cara Membuat Tabel Standar dengan Bootstrap


Untuk membuat tabel dengan bootstrap, buatlah file PHP atau HTML, kemudian simpan dengan index.php. berikut contoh membuat tabel standar php dengan bootstrap.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial PHP Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<h4>Cara Membuat Table Standar dengan Bootstrap | www.maxandro.com</h4>
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th> </tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Budi</td>
<td>Jl. Blogger No. 1, Semarang</td>
</tr>
<tr>
<td>2</td>
<td>Max Andro</td>
<td>Jl. Google Indonesia No. 1, Semarang</td>
</tr>
<tr>
<td>3</td>
<td>Andro Tekno</td>
<td>Jl. Blogspot No. 1 Semarang</td>
</tr> </tbody>
</table>
</body>
</html>
Dan hasilnya adalah seperti yang terlihat dibawah ini.
Cara Membuat Tabel Standar Dengan Bootstrap


Untuk dapat mendesain tampilan tabel menjadi terlihat menarik anda hanya tinggal menambahkan class tabel pada bagian kode "<table class="table">" ganti "tabel" dengan class lainnya,

Jika anda ingin membuat tabel dengan menampakkan garis secara utuh maka tambahkan seperti berikut ini.
<table class="table table-bordered">
Untuk menambahkan efek hover tambahkan class pada kode tabel menjadi seperti dibawah ini.
<table class="table table-bordered table-hover">

Cara Membuat Tabel Responsive dengan Bootstrap

Selanjutnya jika anda ingin tampilan tabel anda mengikuti tampilan layar alias responsive anda dapat menambahkan class table-responsive, seperti contoh dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial PHP Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<h4>Cara Membuat Table Responsive dengan Bootstrap | www.maxandro.com</h4>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th> </tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Budi</td>
<td>Jl. Blogger No. 1, Semarang</td>
</tr>
<tr>
<td>2</td>
<td>Max Andro</td>
<td>Jl. Google Indonesia No. 1, Semarang</td>
</tr>
<tr>
<td>3</td>
<td>Andro Tekno</td>
<td>Jl. Blogspot No. 1 Semarang</td>
</tr> </tbody>
</table>
</div>
</body>
</html>
Maka hasilnya akan terlihat seperti dibawah ini.
Cara Membuat Tabel Responsive Dengan Bootstrap


Sekian Cara membuat tabel dengan bootstrap, mulai dari yang sederhana sampai dengan yang bersifat responsive, semoga dapat berguna dan membantu dalam mendesain tampilan web aplikasi anda.

Tuesday, August 29, 2017

Pengenalan dan Cara Menggunakan Bootstrap

Pada kesempatan kali ini saya akan membahas tentang Apa Itu Bootstrap? Dan bagaimana cara menggunakan Bootstrap. Perlu Anda ketahui bersama sebelum adanya sebuah php framework yang kita kenal dengan sebutan Bootstrap, kebanyakan seorang pengembang website harus berlama-lama membuat sebuah desain yang cocok untuk project mereka. Nah, kini dengan adanya Bootstrap menjadi lebih mudah, lalu apa itu framework bootstrap sebenarnya?

Apa Itu Bootstrap?

Bootstrap adalah salah satu framework CSS yang dapat digunakan oleh setiap pengembang website karena memiliki komponen dasar antarmuka dasar web yang dirancang sedemikian rupa untuk dapat digunakan dengan mudah. Selain itu, bootsrtap juga adalah front-end yang luar biasa dan sangat memperhatikan setiap detail code agar dapat digunakan dalam berbagai bentuk layar monitor.
Apa Itu Bootstrap?


Jadi pengembang web dapat membangun desain web secara responsive. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. 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.

Cara Menggunakan Bootstrap

Bootstrap bersifat OpenSource atau siapa pun boleh mendownload, menggunaannya dan mengembangkan. Untuk mendapatkan bootstrap secara penuh dapat anda download melalui website resminya.
http://getbootstrap.com/getting-started/#download

Agar bootstrap dapat diterapkan kedalam website anda berikut contoh dasar menggunakan bootstrap,
<!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>Bootstrap 101 Template</title>
    <!-- Link CSS Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, AndroSoftware!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Kelebihan Bootstrap

Apabila dilihat dari kode sederhana diatas dapat kita ketahui sebenarnya bootstrap memiliki banyak kelebihan dibanding dengan framework lainnya
  • Dapat menghemat waktu pengembang setiap membuat web,
  • Dari segi tampilan terlihat modern dan menarik,
  • Mobile Friendly yang artinya sudah responsive,
  • Ringan dalam artian telah dibuat dengan sangat tersetruktur,
Salah satu website besar yang telah menggunakan framework Bootstrap adalah Twitter, tentu bagi anda familiar dengan twitter, sebab BootStrap sendiri dikembangkan dan dibuat oleh seorang designer dan pengembang dari twitter. Bootstrap diciptakan di Twitter pada pertengahan 2010, sebelum menjadi kerangka kerja open-source, Bootstrap dikenal sebagai Twitter Blueprint.

Demikian tentang Apa Itu Bootstrap? semoga berguna dan bermanfaat. Dengan begitu tampilan website anda akan terlihat makin profesional dan keren dimata pengunjung.

Cara Membuat Visitor Counter dengan PHP

Cara Membuat Visitor Counter dengan PHP - Visitor Counter merupakan sebutan dari penghitung pengunjung dalam sebuah website atau blog. Yang mana berfungsi agar admin dan pengunjung lainnya mengetahui seberapa banyak jumlah pengunjung web tersebut dalam sehari, seminggu bahkan sebulan.

Dalam implementasinya untuk membuat visitor counter dengan PHP dapat menggunakan dua teknik yakni menggunakan database atau tidak menggunakan database hanya dengan file text. Untuk lebih detailnya simak cara membuat penghitung pengunjung website dengan PHP di bawah ini.

Cara Membuat Visitor Counter dengan PHP


Langkah Pertama : Buat database dan buat tabel untuk visitor counter, dalam tabel tersebut berikan satu kolom dan berinama visitor dengan type integer.

Langkah Kedua : Kemudian hubungkan kedatabase yang telah anda buat sebelumnya

Baca Juga : Cara Menghubungkan Database MySQL dengan PHP 

Langkah Ketiga : Buat script php untuk menghitung jumlah visitor. Kemudian simpan dengan nama counter.php


< ?php
// For using session variables put this function on the top.
session_start();

// Connect database
mysql_connect("localhost","","");
mysql_select_db("mypage");

/* Check for session variable "visitor".
If not exist, update database and create this session by Session ID.*/
if(!session_is_registered("visitor")){
$visitor=session_id();
session_register("visitor");

// Update value in column "all_visitor" by +1.
mysql_query("update counter set visitors=visitors+'1'");
}
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Counter</title>
</head>
<body>
Counter :
< ?
// Select data from easy_counter and put them into $result.
$result=mysql_query("select * from counter");
$row=mysql_fetch_assoc($result);

// Output all_visitor record.
echo $row['visitors'];

// Close database connection.
mysql_close();
?>
</body>
</html>


Demikian Cara Membuat Visitor Counter dengan PHP mudah dan sederhana, semoga dapat bermanfaat dan berguna bagi kita semua.

Cara Membuat Koneksi MySQL dengan PHP

Cara Membuat Koneksi MySQL dengan PHP - Untuk menghubungkan database MySQL dengan PHP sebenarnya sangat begitu mudah dilakukan. Namun sebelumnya anda harus membuat database terlebih dahulu.  Tetapi yang menjadi hal paling mendasar untuk menghubungkan MySQL dengan PHP tersebut anda harus memasang aplikasi XAMPP di komputer.

Karena dengan install aplikasi Xampp kita akan mendapatkan dua keuntungan sekaligus yaitu PhpMyadmin dan direktory untuk menyimpan file PHP agar dapat dibuka dalam browser. Untuk menjalankan file PHP tentunya berbeda dengan file HTML. Maka dari itu seperti yang saya tuliskan diatas harus telah terinstal Xampp. Karena nantinya file PHP tersebut diletakkan di folder "C://xampp/htdocs/nama_project".

Cara Membuat Koneksi MySQL dengan PHP

Hal yang paling penting sebelum menghubungkan msql dengan php adalah memastikan hostname, password dan nama database yang Anda gunakan apakah sudah sudah benar.
Basic Connection MySQL with PHP

(!) Ingat, setiap project PHP yang anda kerjakan pastikan sudah tersimpan dalam folder  "C://xampp/htdocs/nama_project."tersebut. Dan aplikasi Xampp telah berjalan dikomputer.

Kemudian tuliskan script koneksi ke dalam file koneksidatabase.php. Berikut ini adalah contoh kode standar yang dapat anda gunakan untuk melakukan koneksi PHP ke MySQL.

Kode Koneksi MySQL di PHP
<?php
$server   = "localhost";
$username = "root";
$password = "";
$database = "NAMA_DATABASE";

// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or die("Koneksi Gagal....!!!!!");
mysql_select_db($database) or die("Selamat, Koneksi Berhasil");
?>

Demikianlah Cara Membuat Koneksi MySQL dengan PHP. Semoga dapat bermanfaat dan berguna bagi kita semua.