Cara Membuat Paging Dengan PHP MySQL

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

 

ketemu lagi dengan saya selaku admin codingpintar.blogspot.com disini kita semua akan belajar coding baik itu html css javascript jquery php mysql dll
nah pada kesempatan kali ini saya tidak akan membahas tutorial mengenai CSS Melainkan PHP  dan MySQL.
pada tutorial PHP dan MySQL sebelumnya saya telah membuat tutorial tentang Cara Membuat Pencarian Data Dengan PHP MySQL Yang bisa anda lihat tutorialnya DISINI

Nah di tutorial kali ini saya masih menggunakan PHP Native dan MySQL Sebagai databasenya.
Tutorial yang akan saya bahas disini yaitu Cara Membuat Paging Dengan PHP MySQL
Paging yang saya maksud di sini adalah paging dalam menampilkan data dari database mysql. Jika misalkan anda ingin menampilkan data yang terdapat pada suatu tabel dimana tabel tersebut mempunyai 100 record data, tentu anda harus memecahnya menjadi beberapa bagian misalkan hanya menampilkannya 10 data perhalaman.
Tutorial ini masih sangat sederhana sehinga sangat mudah di pahami oleh pemula. pada tutorial kali ini saya hanya membutuhkan 1 file php yang berisi koneksi maupun proses pagingnya
Baiklah tidak usah berlama-lama lagi, silahkan ikuti langkah-langkah di bawah ini dengan benar.

1. Database
Silahkan anda pilih database yang akan anda buat sebagai bahan percobaan, disini saya menggunakan database negara yang saya dapet dari google. atau anda bisa mendownloadnya DISINI
sesudah di download silahkan anda import file .sqlnya ke phpMyAdmin atau lihat tutorialnya disini
Cara Import dan Export Database MySQL dengan PhpMyadmin
Jika database sudah siap silahkan anda ikuti langkah selanjutnya

2. Membuat File index.php
karena kita hanya membutuhkan satu file, maka buatlah file bernama index.php setelah itu ikuti langkah selanjutnya

3. Menambahkan Script Koneksi ke Database
Silahkan anda ketik script di bawah ini untuk mengkoneksikan ke database

<?php
 
$koneksi = mysql_connect("localhost","root","");
mysql_select_db("negara",$koneksi);
 
?>

Jika script koneksi sudah di buat silahkan ikuti langkah selanjutnya

4. Menambahkan Script Untuk Menampilkan Data Dari Database
silahkan ketikkan script di bawah ini Untuk Menampilkan Data Dari Database

<table border="1" style="border-collapse:collapse" cellpadding="5px">
<tr>
<th>No</th>
<th>Nama Negara</th>
<th>Kode Negara</th>
</tr>
<?php
$sql = mysql_query("SELECT * FROM countries");
$no = 1;
while ( $r = mysql_fetch_assoc( $sql ) ) {
?>
<tr>
<td><?= $no; ?></td>
<td><?= $r['country_name']; ?></td>
<td><?= $r['country_code']; ?></td>
</tr>
<?php
$no++;
}
?>
</table>

Script diatas adalah script umum untuk menampilkan data dari database. Script php tersebut akan menampilkan seluruh data dari database. Kode ini nantinya akan kita modifikasi sehingga menampilkan jumlah data berdasarkan batas atau limit yang kita tentukan.
jika script diatas sudah anda ketik, silahkan anda ikuti langkah selanjutnya

5. Menambahkan Script Paging 
pada langkah ini kita akan menuliskan script untuk membuat proses pagingnya script paging ini akan kita tambahkan di script sebelumnya yaitu menampilkan data untuk lebih jelasnya langsung saja kita praktekan,Silahkan anda ketik script di bawah ini untuk mendapatkan proses pagingnya

<table border='1' style="border-collapse:collapse" cellpadding="5px">

<tr>
<th>No</th>
<th>Nama Negara</th>
<th>Kode Negara</th>
</tr>
 
<?php
$batas = 10;
$pg = isset( $_GET['pg'] ) ? $_GET['pg'] : "";
 
if ( empty( $pg ) ) {
$posisi = 0;
$pg = 1;
} else {
$posisi = ( $pg - 1 ) * $batas;
}
 
$sql = mysql_query("SELECT * FROM countries limit $posisi, $batas");
$no = 1+$posisi;
while ( $r = mysql_fetch_assoc( $sql ) ) {
?>
<tr align="center">
<td><?= $no; ?></td>
<td><?= $r['country_name']; ?></td>
<td><?= $r['country_code']; ?></td>
</tr>
<?php
$no++;
}
?>
<tr>
<td colspan="3">
<?php
//hitung jumlah data
$jml_data = mysql_num_rows(mysql_query("SELECT * FROM countries"));
//Jumlah halaman
$JmlHalaman = ceil($jml_data/$batas); //ceil digunakan untuk pembulatan keatas
 
//Navigasi ke sebelumnya
if ( $pg > 1 ) {
$link = $pg-1;
$prev = "<a href='?pg=$link'>Sebelumnya </a>";
} else {
$prev = "Sebelumnya ";
}
 
//Navigasi nomor
$nmr = '';
for ( $i = 1; $i<= $JmlHalaman; $i++ ){
 
if ( $i == $pg ) {
$nmr .= $i . " ";
} else {
$nmr .= "<a href='?pg=$i'>$i</a> ";
}
}
 
//Navigasi ke selanjutnya
if ( $pg < $JmlHalaman ) {
$link = $pg + 1;
$next = " <a href='?pg=$link'>Selanjutnya</a>";
} else {
$next = " Selanjutnya";
}
 
//Tampilkan navigasi
echo $prev . $nmr . $next;
?>
</td>
</tr>
</table>
<br />
Total Data Anda adalah :<b> <?php echo $jml_data; ?> </b>

SELECT * FROM countries limit $posisi, $batas
Nilai default dari $posisi adalah 0, dan $batas bernilai batas yang kita masukkan. Sehingga query mysqlnya akan seperti ini
SELECT * FROM countries limit 0, 10
Pada saat kita ke halaman selanjutnya maka secara otomatis posisi akan berubah berdasarkan rumus yang telah kita terapkan ( Lihat script sebelum melakukan query diatas ), sehingga query akan seperti ini:
SELECT * FROM countries limit 10, 10
Begitu seterusnya.
Adapun pada navigasi, anda bisa melihat penjelasannya pada komentar yang saya sertakan dalam script.

dan berikut adalah Script lengkap Membuat Paging Dengan PHP MySQL

<?php
 
$koneksi = mysql_connect("localhost","root","");
mysql_select_db("negara",$koneksi);
 
?>
 
<table border='1' style="border-collapse:collapse" cellpadding="5px">

<tr>
<th>No</th>
<th>Nama Negara</th>
<th>Kode Negara</th>
</tr>
 
<?php
$batas = 10;
$pg = isset( $_GET['pg'] ) ? $_GET['pg'] : "";
 
if ( empty( $pg ) ) {
$posisi = 0;
$pg = 1;
} else {
$posisi = ( $pg - 1 ) * $batas;
}
 
$sql = mysql_query("SELECT * FROM countries limit $posisi, $batas");
$no = 1+$posisi;
while ( $r = mysql_fetch_assoc( $sql ) ) {
?>
<tr align="center">
<td><?= $no; ?></td>
<td><?= $r['country_name']; ?></td>
<td><?= $r['country_code']; ?></td>
</tr>
<?php
$no++;
}
?>
<tr>
<td colspan="3">
<?php
//hitung jumlah data
$jml_data = mysql_num_rows(mysql_query("SELECT * FROM countries"));
//Jumlah halaman
$JmlHalaman = ceil($jml_data/$batas); //ceil digunakan untuk pembulatan keatas
 
//Navigasi ke sebelumnya
if ( $pg > 1 ) {
$link = $pg-1;
$prev = "<a href='?pg=$link'>Sebelumnya </a>";
} else {
$prev = "Sebelumnya ";
}
 
//Navigasi nomor
$nmr = '';
for ( $i = 1; $i<= $JmlHalaman; $i++ ){
 
if ( $i == $pg ) {
$nmr .= $i . " ";
} else {
$nmr .= "<a href='?pg=$i'>$i</a> ";
}
}
 
//Navigasi ke selanjutnya
if ( $pg < $JmlHalaman ) {
$link = $pg + 1;
$next = " <a href='?pg=$link'>Selanjutnya</a>";
} else {
$next = " Selanjutnya";
}
 
//Tampilkan navigasi
echo $prev . $nmr . $next;
?>
</td>
</tr>
</table>
<br />
Total Data Anda adalah :<b> <?php echo $jml_data; ?> </b>

Bagaimana cukup simple bukan. ? ^_^
silahkan anda coba dan anda kembangkan sendiri sesuai kebutuhan anda.
mohon maaf apabila tidak ada demonya.
dan apabila ada hal yang ingin di tanyakan silahkan bertanya di komentar,
Mungkin itu saja yang dapat saya sampaikan,kurang lebihnya mohon maaf. :)
Semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :)

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Read More

• Share

Membuat I-Phone Dengan CSS

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ 

Berjumpa lagi dengan saya selaku admin codingpintar.blogspot.com . .
masih semangat kan untuk belajar coding nya heheh  ^_^

pada kesempatan kali ini saya masih ingin membagikan sesuatu yang di buat oleh css.
kalau pada tutorial sebelumnya kita sudah membuat animasi yang terakhir adalah Membuat Animasi Kucing Berjalan Dengan CSS yang bisa anda lihat tutorial dan demonya DISINI 
Nah pada hari ini saya tidak akan bahas mengenai pembuatan animasi lagi melainkan sebuah karya yang  cukup indah yaitu Membuat I-Phone Dengan CSS,  I-Phone yang di buat disini adalah I-Phone 6, oh iya sekali lagi saya ingatkan karya ini bukan buatan saya melainkan salah seorang programmer samapai sekarang saya belum mengetahui namanya, seperti biasa karya beliau sengaja saya share disini karena saya menyukainya dan supaya kita semua dapat menikmati karyanya,
tidak usah berlama-lama lagi langsung saja ikuti tutorial Cara Membuat I-Phone Dengan CSS pada kali ini dengan baik dan benar.

1. Langkah Pertama Adalah Membuat Script HTML
seperti tutorial-tutorial sebelumnya untuk membuat sesuatu yang menarik jangan lupa untuk membuat file htmlnya terlebih dahulu, file html memang sangat penting untuk membuat aplikasi berbasis web, jadi silahkan anda buat file html bernama index.html, lalu ketikkan script di bawah ini :

<!DOCTYPE html>
<html>
<head>
 <title>Animasi I-Phone Dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
  <div id="iphone">
    <div id="shadow"></div>
    <div id="side"></div>
    <div id="lines">
      <div>
        <div>
          <div></div>
        </div>
      </div>
      <div>
        <div>
          <div></div>
        </div>
      </div>
    </div>
    <div id="toggler">
      <div></div>
    </div>
    <div id="aux"></div>
    <div id="lightning"></div>
    <div id="bottom-speaker">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div id="skrews">
      <div></div>
      <div></div>
    </div>
    <div id="volume">
      <div></div>
      <div></div>
    </div>
    <div id="front">
      <div id="front-cover"></div>
      <div id="camera">
         <div></div>
      </div>
      <div id="speaker"></div>
      <div id="screen">
        <div id="reminder">
          <div></div>
          <div>Made by @_fbrz</div>
          <div>now</div>
        </div>
        <div id="circle"></div>
        <div id="time">12:42</div>
        <div id="date">Saturday, January 4</div>
        <div id="bottom"></div>
        <div id="top"></div>
        <div id="slide">
          <div></div>
          slide to unlock
        </div>
        <div id="signal">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div id="battery">
          <div>86%</div>
          <div>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
      <div id="home">
        <div></div>
      </div>
    </div>
  </div>
</div>
</body>
</html> 

Seperti biasa sebelum membuat stylenya silahkan anda coba dulu membuka file htmlnya,
ya benar hasilnya hanya berupa titik yang gak jelas
agar terbentuk I-Phone nya Silahkan ikuti langkah selanjutnya

2. Membuat File CSS
file css memang sangat penting untuk membuat hal yang menarik di website, ya karena tanpa file css kita tidak akan bisa membuat I-Phone tersebut. silahkan anda buat file bernama style.css setelah itu ketikkan script di bawah ini :

/* No images in this pen :D */

@font-face {
    font-family: Helvetica;
    src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/HelveticaNeue-UltraLight.otf) format('TrueType');
  font-weight: 300;
}

body {
  font-family: 'Helvetica', sans-serif;
  background: #f5f5f5;
  color: #333;
  letter-spacing: 1px;
}
html,body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#wrapper {
  height: 520px;
  width: 800px;
  margin-left: -400px;
  margin-top: -260px;
  position: absolute;
  perspective: 6000px;
  top: 50%;
  left: 50%;
}
#iphone {
  height: 760px;
  width: 372px;
  border-radius: 50px;
  position: absolute;
  background: none; 
  box-shadow: none;
  left: 206px;
  top: -140px;
  transform: rotateX(54deg) rotateZ(-46deg);
  transform-style: preserve-3d;
}
#side {
 background: #CDD0D5;
  width: 393px;
  height: 780px;
  border-top-left-radius: 77px;
  border-bottom-left-radius: 49px;
  border-bottom-right-radius: 86px;
  border-top-right-radius: 70px;
  position: absolute;
  top: 5px;
  left: -26px;
  box-shadow: inset #3D3E42 0 0 15px 9px;
}
#front {
  width: 362px;
  height: 750px;
  border-radius: 49px;
  position: absolute;
  background-image: -webkit-linear-gradient(-27deg,#444,#000 10%, #000 42%, #333, #000 57%, #000 91%, #444);
  left: 5px;
  top: 5px;
  box-shadow: inset #000 0 0 0 4px, #555 0px 0 3px 0px, #222 -3px 2px, #000 -5px 5px, #E0E0E0 -7px 6px 1px, #6D6D6D -7px 6px 9px;
   transform: translateZ(1px);
}
#front-cover {
  width: 344px;
  height: 734px;
  background: #000;
  border-radius: 39px;
  position: absolute;
  top: 8px;
  left: 9px;
}

#home {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(32deg,#666,#000,#666);
  top: 684px;
  left: 160px;
}
#home div {
  background: #000;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  position: absolute;
  left: 3px;
  top: 3px;
}

#camera {
  width: 11px;
  height: 11px;
  background: #000;
  position: absolute;
  top: 35px;
  left: 124px;
  border-radius: 50%;
  box-shadow: inset #666 -5px 2px 9px -2px;
}
#camera div {
  width: 6px;
  height: 6px;
  background: radial-gradient(#E1E4F5,#0D2B69 33%);
  background-position: -1px -1px;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 50%;
}

#speaker {
  width: 50px;
  height: 4px;
  border-radius: 2px;
  background: #555;
  position: absolute;
  top: 39px;
  left: 156px;
  box-shadow: inset #222 0 0px 4px;
}

#volume {
  height: 128px;
  width: 11px;
  border-radius: 10px;
  position: absolute;
  background: #F9F9FA;
  top: 171px;
  left: -20px;
  transform: rotateY(95deg);
  transform-style: preserve-3d;
  box-shadow: inset #292A2F 4px 0 8px 1px, #D5D5D5 -1px 0px 2px;
}
#volume div {
  width: 8px;
  height: 55px;
  background: #BBBCC0;
  border-radius: 10px;
  position: absolute;
  box-shadow: #eee -1px 1px, #777 -1px 3px,  #505057 -3px 3px, inset #909197 -3px 0 3px;
}

#volume div:first-child {
  top: 2px;
  left: 4px;
}
#volume div:last-child {
  top: 69px;
  left: 4px;
}

#toggler {
  height: 34px;
  width: 8px;
  border-radius: 10px;
  position: absolute;
  background: #2B2C31;
  top: 105px;
  left: -20px;
  transform: rotateY(95deg);
  transform-style: preserve-3d;
  box-shadow: inset #292A2F 4px 0 8px 1px, #D5D5D5 -1px 0px 2px;
}
#toggler div {
  width: 4px;
  height: 31px;
  background: #BBBCC0;
  border-radius: 10px;
  position: absolute;
  box-shadow: #eee -1px 1px, #777 -2px 3px, #505057 -3px 3px, inset #909197 -3px 0 3px;
  top: -1px;
  left: 3px;
}

#aux {
  width: 19px;
  height: 19px;
  background: #3B3B3B;
  border-radius: 50%;
  transform: rotateX(90deg) translateZ(1px);
  transform-style: preserve-3d;
  position: absolute;
  top: 766px;
  left: 45px;
  box-shadow: inset #000 6px -3px 10px 1px, #C7C7C7 1px 0px 1px;
}

#lightning {
  width: 48px;
  height: 12px;
  border-radius: 10px;
  background: #3F3F3F;
  transform: rotateX(90deg) translate3d(0px,1px,0px);
  top: 771px;
  position: absolute;
  left: 139px;
  box-shadow: inset #8E8F94 -1px 1px 0px 2px, #515258 0px 0px 0 1px, inset #000 0 -3px 10px, #DADADA 1px 0 0 1px;
}

#bottom-speaker {
  position: absolute;
  transform: rotateX(90deg);
  top: 781px;
  left: 70px;
}
#bottom-speaker div {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6C6D72;
  position: absolute;
  box-shadow: inset #000 1px -1px 4px 1px, #DADADA 1px 0px;
}
#bottom-speaker div:nth-child(2) { left: 150px; }
#bottom-speaker div:nth-child(3) { left: 162px; }
#bottom-speaker div:nth-child(4) { left: 174px; }
#bottom-speaker div:nth-child(5) { left: 186px; }
#bottom-speaker div:nth-child(6) { left: 198px; }
#bottom-speaker div:nth-child(7) { left: 210px; }

#skrews {
  position: absolute;
  top: 780px;
  left: 120px;
  transform: rotateX(90deg);
}
#skrews div {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgb(95, 92, 92);
  border-radius: 50%;
  top: 0;
  z-index: 4;
  box-shadow: inset #999AA0  0 0 0px 2px, #444 1px 0px;
}

#skrews div:last-child {
  left: 70px;
}

#lines {
  position: absolute;
  top: 82px;
  left: -32px;
}
#lines > div:last-child {
  top: 634px;
}

#lines div {
  width: 7px;
  height: 11px;
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: 100% 100%;
}

#lines > div {
  background: linear-gradient(right,#393A3C,#5A595E);
  transform: rotateY(90deg);
}
#lines > div > div {
  background: linear-gradient(right,#5A595E,#87868A);
  transform: rotateY(17deg);
  left: -6px;
}
#lines > div > div > div {
  background: linear-gradient(right,#87868A,#A8A6AD);
  transform: rotateY(17deg);
  left: -6px;
}

#shadow {
  width: 350px;
  height: 755px;
  background: black;
  position: absolute;
  top: 5px;
  left: 0;
  transform: translateZ(-17px);
  transform-style: preserve-3d;
  box-shadow: #000 0 0 10px 15px;
  opacity: 0.4;
  border-top-left-radius: 76px;
  border-top-right-radius: 200px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 56px;
}

#screen {
  background: linear-gradient(#A1E5E5,#1987AA);
  width: 336px;
  height: 589px;
  position: absolute;
  top: 80px;
  left: 13px;
  font-weight: 300;
  color: #fff;
  background-size: 200% 100%;
  overflow: hidden;
}

#time {
  font-size: 86px;
  left: 57px;
  top: 37px;
  position: absolute;
}
#date {
  font-size: 20px;
  left: 85px;
  top: 130px;
  position: absolute;
}

#bottom {
  width: 37px;
  height: 7px;
  border-radius: 5px;
  background: #2AB1DB;
  position: absolute;
  top: 573px;
  left: 149px;
}
#top {
  width: 37px;
  height: 7px;
  border-radius: 5px;
  background: #D7FFFF;
  position: absolute;
  top: 10px;
  left: 149px;
}
#slide {
  position: absolute;
  top: 489px;
  left: 88px;
  font-size: 28px;
  color: #2AB1DB;
  background: linear-gradient(left,#2EC4F3 30%,#fff,#2EC4F3 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 350px;
  animation: slide 5s linear infinite;
}

@keyframes slide {
  0% { background-position: 100px 0; }
  40% { background-position: 440px 0; }
  100% { background-position: 440px 0; }
}

#slide div {
  transform: rotate(135deg);
  border-left: 2px solid #2AB1DB;
  border-top: 2px solid #2AB1DB;
  width: 15px;
  height: 15px;
  position: absolute;
  left: -29px;
  top: 10px;
}

#signal {
  position: absolute;
  top: 9px;
  left: 7px;
}
#signal div {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #fff;
  position: absolute;
}
#signal div:nth-child(2) {
  left: 9px;
}
#signal div:nth-child(3) {
  left: 18px;
}
#signal div:nth-child(4) {
  left: 27px;
}
#signal div:nth-child(5) {
  left: 36px;
  background: none;
}

#battery {
  position: absolute;
  top: 3px;
  left: 270px;
  font-size: 13px;
}
#battery > div:last-child {
  width: 27px;
  height: 9px;
  border: 1px solid #fff;
  position: absolute;
  top: 4px;
  left: 27px;
  border-radius: 2px;
}
#battery div div:first-child {
  width: 21px;
  height: 7px;
  background: #fff;
  position: absolute;
  top: 1px;
  left: 1px;
}
#battery div div:last-child {
  width: 1px;
  height: 6px;
  background: #FFF;
  position: absolute;
  left: 29px;
  top: 2px;
  border-radius: 0 1px 1px 0;
}

#fabrizio {
 border-top: 100px solid black; 
 border-right: 63px solid transparent;
 width: 0;
 transform: scale(.33);
 transform-origin: 0 0;
 margin: 20px;
 opacity:.6;
  position: absolute;
  bottom: -130px;
}
#fabrizio:before {
 background: black;
 width: 20px;
 height: 30px;
 content: '';
 display: block;
 transform: skewX(-32deg);
 position: relative;
 top: -65px;
 left: 29px;
}
#fabrizio:after {
 background: black;
 width: 40px;
 height: 36px;
 content: '';
 display: block;
 transform: skewX(-32deg);
 position: relative;
 top: -130px;
 left: 49px;
}

#circle {
  width: 50px;
  height: 50px;
  background: none;
  border-radius: 50%;
  box-shadow: rgba(255,255,255,0.1) 160px 335px,rgba(255,255,255,0.1) 120px 275px 0 12px,rgba(255,255,255,0.1) 60px 355px 0 23px,rgba(255,255,255,0.1) 230px 445px 0 -8px,rgba(255,255,255,0.1) 60px 125px,rgba(255,255,255,0.1) 260px 145px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 50px 155px,rgba(255,255,255,0.1) 150px 273px 0 -2px,rgba(255,255,255,0.1) 50px 555px 0 23px,rgba(255,255,255,0.1) 180px 5px 0 -8px;
  animation: circle 30s linear infinite alternate;
}

@keyframes circle {
  0%{
    box-shadow: rgba(255,255,255,0.1) 160px 335px,rgba(255,255,255,0.1) 120px 275px 0 12px,rgba(255,255,255,0.1) 60px 355px 0 23px,rgba(255,255,255,0.1) 230px 445px 0 -8px,rgba(255,255,255,0.1) 60px 125px,rgba(255,255,255,0.1) 260px 145px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 350px 555px,rgba(255,255,255,0.1) 350px 273px 0 -2px,rgba(255,255,255,0.1) 150px 355px 0 23px,rgba(255,255,255,0.1) 180px 205px 0 -8px,rgba(255,255,255,0.1) 0px 0px 0 -8px,rgba(255,255,255,0.1) 100px 555px 0 10px;
  }
  100%{
    box-shadow: rgba(255,255,255,0.1) 70px 10px,rgba(255,255,255,0.1) 300px 205px 0 12px,rgba(255,255,255,0.1) 0px 155px 0 23px,rgba(255,255,255,0.1) 330px 45px 0 -8px,rgba(255,255,255,0.1) 460px 325px,rgba(255,255,255,0.1) 0px 445px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 50px 155px,rgba(255,255,255,0.1) 150px 273px 0 -2px,rgba(255,255,255,0.1) 0px 555px 0 23px,rgba(255,255,255,0.1) 180px 5px 0 -8px,rgba(255,255,255,0.1) 300px 555px 0 -8px,rgba(255,255,255,0.1) 350px 355px 0 10px;
  }
}

#reminder {
  position: absolute;
top: 230px;
left: 40px;
width: 296px;
height: 50px;
border-top: 1px solid #86E2F0;
border-bottom: 1px solid #86E2F0;
line-height: 50px;
font-weight: 400;
  opacity: 0;
  animation: reminder .1s linear forwards 15s;
}
#reminder div:first-child {
  background: #fff;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  position: absolute;
  top: 18px;
}
#reminder div:nth-child(2) {
  position: absolute;
  left: 30px;
}
#reminder div:last-child{
   position: absolute;
left: 251px;
font-size: 11px;
  color: #86E2F0;
}

@keyframes reminder {
  100% {
    opacity: 1;
  }
} 


#awwwards {
  position: absolute;
  bottom: 30px;
  left: 70px;
}
#awwwards a {
  color: #444;
  text-decoration: none;
  border-bottom: 1px solid #888;
}

#coolors {
  position: absolute;
  bottom: 30px;
  right: 30px;
  color: #444;
  text-decoration: none;
  border-bottom: 1px solid #888;
  animation: coolors 1s infinite;
  opacity: 1;
}
@keyframes coolors {
  50% { right: 40px; }
} 

panjang banget yah scriptnya :D
baiklah jika sudah selesai silahkan anda simpan file cssnya lalu cobalah jalankan file index.html nya,
dan lihat lah hasilnya  :D

Demikianlah Cara Membuat I-Phone Dengan CSS, keren bukan ? :D
Silahkan anda coba dan anda edit sesuka hati anda. .

Namun kali ini saya minta maaf karena tidak menyediakan demonya :D
Mungkin itu saja yang dapat saya sampaikan kurang lebihnya mohon maaf .
Semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Read More

• Share

Source Code Web Sekolah Sederhana Dengan PHP MySQL

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

 

berjumpa lagi dengan saya, selaku admin codingpintar ^_^  

pada kesempatan kali ini saya tidak akan membuat tutorial, melainkan membagikan sebuah Source Code Web Sekolah Sederhana yang di buat menggunakan PHP native dan MySQL sebagai databasenya
sehingga sangat mudah di pahami untuk pemula seperti saya :D

aplikasi ini bukan buatan saya, saya hanya memperolehnya dari mbah google,

aplikasi ini free atau gratis
untuk melihat penampakannya, silahkan lihat Screen Shoot di bawah ini


* gambar di atas merupakan dashboard atau halaman awal

* gambar diatas merupakan login untuk mengakses sebagai administrator

*gambar di atas merupakan halaman admin

baiklah mungkin cukup segitu panampakan dari Source Code Web Sekolah Sederhana Dengan PHP MySQL, untuk selebihnya silahkan anda download dan lihat sendiri :D

untuk aplikasinya silahkan anda download DISINI

Silahkan anda download dan pelajari juga script"nya,

dan jangan lupa download aplikasi yang pernah saya share juga yaitu Aplikasi Tagihan Internet PHP 
silahkan klik DISINI untuk mendownload Aplikasi Tagihan Internet PHP

mungkin itu saja yang dapat saya sampaikan
kurang lebihnya mohon maaf  ^_^
semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Read More

• Share

Membuat Animasi Kucing Berjalan Dengan CSS

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ 

Berjumpa lagi dengan saya selaku admin codingpintar.blogspot.com . .
masih semangat kan untuk belajar coding nya heheh  ^_^

alhamdulillah saya masih di beri kesehatan dan kesempatan untuk menulis lagi di blog ini :D
karena kurangnya waktu luang saya maka dari itu saya masih ingin membagikan suatu animasi yang di buat oleh css.
kalau pada tutorial sebelumnya animasi yang terakhir kita buat adalah Membuat Animasi Semut Berjalan Dengan CSS yang bisa anda lihat tutorial dan demonya DISINI 
Nah pada hari ini animasi yang akan saya buat adalah animasi binatang yaitu Animasi Kucing Berjalan Dengan CSS, Pada animasi kali ini saya masih menggunakan fitur terbaru dari css 3, oh iya sekali lagi saya ingatkan animasi ini bukan buatan saya melainkan salah seorang programmer yang berasal dari negara USA yang bernama Rachel Nabors
seperti biasa karya beliau sengaja saya share disini karena saya menyukainya dan supaya kita semua dapat menikmati karyanya,
perlu di ingatkan animasi css ini hanya dapat di lihat pada browser yang sudah support HTML5 dan CSS3.
Oke, tidak usah berlama-lama lagi langsung saja ikuti tutorial Cara Membuat Animasi Kucing Berjalan Dengan CSS dengan baik dan benar..

1. Membuat File HTML
seperti tutorial-tutorial sebelumnya untuk membuat animasi jangan lupa untuk membuat file htmlnya terlebih dahulu, file html memang sangat penting untuk membuat aplikasi berbasis web, jadi silahkan anda buat file html bernama index.html, lalu ketikkan script di bawah ini :

<!DOCTYPE html>
<html>
<head>
 <title>Kucing Berjalan</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="foreground"></div>

<div class="midground">
  <div class="tuna"></div>
</div>

<div class="background">
</div>
</body>
</html> 

Cukup simple kan file HTML nya :D
Seperti biasanya sebelum membuat stylenya silahkan anda coba dulu membuka file htmlnya,
ya benar hasilnya tidak ada apa-apa alias blank dan belum ada animasi Kucing Berjalan nya
agar terbentuk Animasi Kucing Berjalan nya Silahkan ikuti langkah selanjutnya

2. Membuat File CSS
file css memang sangat penting untuk membuat hal yang menarik di website, ya karena tanpa file css kita tidak akan bisa membuat animasi tersebut. silahkan anda buat file bernama style.css setelah itu ketikkan script di bawah ini :

.tuna {
  animation: walk-cycle 1s steps(12) infinite;
  background: url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0 no-repeat; 
  height: 200px;
  width: 400px;
  position: absolute;
  bottom: 1px;
  left: 50%;
  margin-left: -200px;
  transform: translateZ(0); /* offers a bit of a performance boost by pushing some of this processing to the GPU in Safari*/
}

@keyframes walk-cycle {  
  0% {background-position: 0 0; } 
  100% {background-position: 0 -2391px; } 
}

.foreground, .midground, .background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  translate3d(0,0,0); 
}

.foreground {
  animation: parallax_fg linear 10s infinite both;
  background:  url(http://stash.rachelnabors.com/24ways2012/foreground_grass.png) 0 100% repeat-x;
  z-index: 3;
}

@keyframes parallax_fg {  
  0% { background-position: -3584px 100%;} 
  100% {background-position: 0 100%; } 
}

.midground {
  animation: parallax_mg linear 20s infinite;
  background:  url(http://stash.rachelnabors.com/24ways2012/midground_grass.png) 0 100% repeat-x;
  z-index: 2;
}

@keyframes parallax_mg {  
  0% { background-position: -3000px 100%;} 
  100% {background-position: 0 100%; } 
}

.background {
  background-image:
    url(http://stash.rachelnabors.com/24ways2012/background_mountain5.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain4.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain3.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain2.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain1.png);
  background-repeat: repeat-x;
  background-position: 0 100%;
  z-index: 1;
  animation: parallax_bg linear 40s infinite;
}

@keyframes parallax_bg {
  100% { background-position-x: 2400px, 2000px, 1800px, 1600px, 1200px;}
}

body {
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),
    #d2d2d2 url(http://stash.rachelnabors.com/24ways2012/background_clouds.png);
} 

Lihat scriptnya lebih pendek dari animasi-animasi sebelumnya kan . :D
jika sudah selesai silahkan anda simpan file cssnya lalu cobalah jalankan file index.html nya,
dan lihat lah hasilnya  :D

Demikianlah Cara Membuat Animasi Kucing Berjalan Dengan CSS, keren bukan ? :D
sebelumnya saya mohon maaf karena pada animasi kali ini saya tidak sempat membuat demonya,
jadi silahkan anda coba sendiri untuk mengetahui hasilnya.
Baiklah mungkin itu saja yang dapat saya sampaikan kurang lebihnya mohon maaf :D
Semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Read More

• Share

Membuat Animasi Semut Berjalan Dengan CSS

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ 

Berjumpa lagi dengan saya selaku admin codingpintar.blogspot.com . .
masih semangat kan untuk belajar coding nya heheh  ^_^

pada kesempatan kali ini entah mengapa saya masih ingin membagikan suatu animasi yang di buat oleh css.
kalau pada tutorial sebelumnya animasi yang terakhir kita buat adalah Membuat Animasi Motor Dengan CSS yang bisa anda lihat tutorial dan demonya DISINI 
Nah pada hari ini animas yang akan saya buat adalah Animasi Semut Berjalan Dengan CSS, Pada animasikali ini saya masih menggunakan fitur terbaru dari css 3, oh iya sekali lagi saya ingatkan animasi ini bukan buatan saya melainkan salah seorang programmer yang berasal dari negara Denmark yang bernama Peter Klein seperti biasa karya dia sengaja saya share disini karena saya menyukainya dan supaya kita semua dapat menikmati karyanya,
perlu di ingatkan animasi css ini hanya dapat di lihat pada browser yang sudah support HTML5 dan CSS3.
Oke, tidak usah berlama-lama lagi langsung saja ikuti tutorial Cara Animasi Semut Berjalan Dengan CSS pada kali ini dengan baik dan benar.

1. Membuat File HTML
seperti tutorial-tutorial sebelumnya untuk membuat animasi jangan lupa untuk membuat file htmlnya terlebih dahulu, file html memang sangat penting untuk membuat aplikasi berbasis web, jadi silahkan anda buat file html bernama index.html, lalu ketikkan script di bawah ini :

<!DOCTYPE html>
<html>
<head>
 <title>Animasi Semut Berjalan CSS</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>CSS Walking Ant<span>
Inspired by the image from <a href="http://www.reddit.com/r/gifs/comments/22yvqs/how_ants_walk/" target="_blank">this reddit post</a></span></h2>
<div class="floor">
 <div class="ant">
  <div class="head">
   <div class="mandibles"></div>
   <div class="antlerleft"></div>
   <div class="antlerright"></div>
  </div>
  <div class="body">
   <div class="legs">
    <div class="leg frontleft">
     <div class="segment"><div class="segment"><div class="segment"></div></div></div>
    </div>
    <div class="leg frontright">
     <div class="segment"><div class="segment"><div class="segment"></div></div></div>
    </div>
    <div class="leg centerleft">
     <div class="segment"><div class="segment"><div class="segment"></div></div></div>
    </div>
    <div class="leg centerright">
     <div class="segment"><div class="segment"><div class="segment"></div></div></div>
    </div>
    <div class="leg backleft">
     <div class="segment"><div class="segment"><div class="segment"></div></div></div>
    </div>
    <div class="leg backright">
     <div class="segment"><div class="segment"><div class="segment"></div></div></div>
    </div>
   </div>
  </div>
  <div class="tail"></div>
 </div>
</div>

<br><br>
</body>
</html> 

Seperti biasa sebelum membuat stylenya silahkan anda coba dulu membuka file htmlnya,
ya benar hasilnya hanya berupa teks dan belum ada animasi Semut Berjalan nya
agar terbentuk Semut Berjalan nya Silahkan ikuti langkah selanjutnya

2. Membuat File CSS
file css memang sangat penting untuk membuat hal yang menarik di website, ya karena tanpa file css kita tidak akan bisa membuat animasi tersebut. silahkan anda buat file bernama style.css setelah itu ketikkan script di bawah ini :

body {
  font: normal 80% Arial;
  text-align: center;
  background: -webkit-radial-gradient(center, ellipse, #929eba 0%, #717e9d 100%);
  background: radial-gradient(ellipse at center, #929eba 0%, #717e9d 100%);
}

h2 {
  font-size: 3.5vmax;
}
h2 span {
  display: block;
  font-size: 1.5vmax;
  color: #333;
}
h2 a {
  text-decoration: none;
  color: #339;
}

h3 {
  font-size: 2vmax;
  color: #aaa;
}
h3 a {
  color: #1D7DAA;
}

.floor {
  margin: 0 auto;
  display-inline: block;
  text-align: left;
  width: 60%;
  min-width: 300px;
  min-height: 300px;
  background-image: -webkit-linear-gradient(top, #bf6e4e 0%, #bf6e4e 47%, #752201 50%, #752201 50%, #bf6e4e 53%, #bf6e4e 100%);
  background-image: linear-gradient(to bottom, #bf6e4e 0%, #bf6e4e 47%, #752201 50%, #752201 50%, #bf6e4e 53%, #bf6e4e 100%);
  background-size: 100% 50%;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  -webkit-animation: floor-move 0.69s linear infinite;
          animation: floor-move 0.69s linear infinite;
  border: 2px solid rgba(0, 0, 0, 0.3);
}

.ant {
  position: relative;
  margin: 0 auto;
  display-inline: block;
  text-align: left;
  width: 250px;
  height: 250px;
  top: 34px;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-animation: body-move 0.345s linear infinite;
          animation: body-move 0.345s linear infinite;
  -webkit-filter: drop-shadow(12px 6px 5px rgba(0, 0, 0, 0.5));
          filter: drop-shadow(12px 6px 5px rgba(0, 0, 0, 0.5));
}
.ant .head {
  position: absolute;
  width: 38px;
  height: 45px;
  top: 50px;
  left: 100px;
  background-color: black;
  background-image: -webkit-radial-gradient(center, ellipse, #3b3d42 0%, #000000 100%);
  background-image: radial-gradient(ellipse at center, #3b3d42 0%, #000000 100%);
  border-radius: 50%;
  -webkit-transform-origin: bottom center;
      -ms-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-animation: head-move 0.69s ease-in-out infinite;
          animation: head-move 0.69s ease-in-out infinite;
}
.ant .head:before, .ant .head:after {
  /* Eyes */
  position: absolute;
  content: "";
  width: 12px;
  height: 16px;
  top: 5px;
  background-color: #919168;
  background-size: 3px 3px;
  border-radius: 50%;
}
.ant .head:before {
  left: 3px;
  -webkit-transform: rotate(35deg);
      -ms-transform: rotate(35deg);
          transform: rotate(35deg);
  box-shadow: inset 2px 1px 5px rgba(0, 0, 0, 0.5);
  background-image: -webkit-repeating-linear-gradient(225deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 1px, transparent 2px, transparent 2px, rgba(0, 0, 0, 0.5) 3px);
  background-image: repeating-linear-gradient(-135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 1px, transparent 2px, transparent 2px, rgba(0, 0, 0, 0.5) 3px);
}
.ant .head:after {
  right: 3px;
  -webkit-transform: rotate(-35deg);
      -ms-transform: rotate(-35deg);
          transform: rotate(-35deg);
  box-shadow: inset -2px 1px 5px rgba(0, 0, 0, 0.5);
  background-image: -webkit-repeating-linear-gradient(315deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 1px, transparent 2px, transparent 2px, rgba(0, 0, 0, 0.5) 3px);
  background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 1px, transparent 2px, transparent 2px, rgba(0, 0, 0, 0.5) 3px);
}
.ant .head .mandibles {
  z-index: -1;
  width: inherit;
  position: absolute;
}
.ant .head .mandibles:before, .ant .head .mandibles:after {
  position: absolute;
  content: "";
  width: 17px;
  height: 30px;
  top: -7px;
  -webkit-animation: mandibles-move 0.69s steps(2) infinite;
          animation: mandibles-move 0.69s steps(2) infinite;
}
.ant .head .mandibles:before {
  background: -webkit-radial-gradient(ellipse at bottom right, #3b3d42 0%, #000000 100%);
  background: radial-gradient(ellipse at bottom right, #3b3d42 0%, #000000 100%);
  border-top-left-radius: 100%;
}
.ant .head .mandibles:after {
  background: -webkit-radial-gradient(ellipse at bottom left, #3b3d42 0%, #000000 100%);
  background: radial-gradient(ellipse at bottom left, #3b3d42 0%, #000000 100%);
  right: 0;
  border-top-right-radius: 100%;
}
.ant .head .antlerleft {
  position: absolute;
  width: 25px;
  height: 3px;
  top: 0;
  left: -20px;
  background-color: black;
  -webkit-transform-origin: center right;
      -ms-transform-origin: center right;
          transform-origin: center right;
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.ant .head .antlerleft:before {
  position: absolute;
  content: "";
  width: 26px;
  height: 25px;
  top: -34px;
  left: -21px;
  border-width: 3px;
  border-style: solid;
  border-color: black black transparent transparent;
  border-top-right-radius: 100%;
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.5);
}
.ant .head .antlerright {
  position: absolute;
  width: 25px;
  height: 3px;
  top: 0;
  right: -20px;
  background-color: black;
  -webkit-transform-origin: center left;
      -ms-transform-origin: center left;
          transform-origin: center left;
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.ant .head .antlerright:before {
  position: absolute;
  content: "";
  width: 26px;
  height: 25px;
  top: -34px;
  right: -21px;
  border-width: 3px;
  border-style: solid;
  border-color: black transparent transparent black;
  border-top-left-radius: 100%;
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg);
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
}
.ant .body {
  position: absolute;
  width: 30px;
  height: 35px;
  top: 93px;
  left: 105px;
  background-color: black;
  background-image: -webkit-radial-gradient(center, ellipse, #3b3d42 0%, #000000 100%);
  background-image: radial-gradient(ellipse at center, #3b3d42 0%, #000000 100%);
  border-radius: 50%;
}
.ant .body:before, .ant .body:after {
  position: absolute;
  content: "";
  background-color: black;
}
.ant .body:before {
  width: 18px;
  height: 25px;
  border-radius: 45%;
  top: 25px;
  left: 6px;
  background-image: -webkit-radial-gradient(ellipse at top, #3b3d42 0%, #000000 100%);
  background-image: radial-gradient(ellipse at top, #3b3d42 0%, #000000 100%);
}
.ant .body:after {
  width: 8px;
  height: 16px;
  top: 45px;
  left: 11px;
  background-image: -webkit-radial-gradient(center, ellipse, #3b3d42 0%, #000000 100%);
  background-image: radial-gradient(ellipse at center, #3b3d42 0%, #000000 100%);
}
.ant .body .legs {
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 12px;
}
.ant .body .legs .leg {
  position: absolute;
  width: 6px;
  height: 6px;
  left: -3px;
  background: -webkit-linear-gradient(top, black 0%, #46494e 50%, #383a3e 50%, black 100%);
  background: linear-gradient(to bottom, black 0%, #46494e 50%, #383a3e 50%, black 100%);
  -webkit-transform-origin: center right;
      -ms-transform-origin: center right;
          transform-origin: center right;
}
.ant .body .legs .leg .segment {
  position: absolute;
  width: 45px;
  height: 6px;
  bottom: 1px;
  left: -43px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
  background: inherit;
  -webkit-transform-origin: center right;
      -ms-transform-origin: center right;
          transform-origin: center right;
  -webkit-animation: none 0.69s linear infinite;
          animation: none 0.69s linear infinite;
}
.ant .body .legs .leg .segment .segment {
  height: 4px;
}
.ant .body .legs .leg .segment .segment .segment {
  height: 2px;
}
.ant .body .legs .frontleft {
  display: block;
  top: 10px;
}
.ant .body .legs .frontleft .segment {
  -webkit-animation-name: front-left-segment1;
          animation-name: front-left-segment1;
}
.ant .body .legs .frontleft .segment .segment {
  -webkit-animation-name: front-left-segment2;
          animation-name: front-left-segment2;
}
.ant .body .legs .frontleft .segment .segment .segment {
  -webkit-animation-name: front-left-segment3;
          animation-name: front-left-segment3;
}
.ant .body .legs .centerleft {
  top: 23px;
}
.ant .body .legs .centerleft .segment {
  -webkit-animation-name: center-left-segment1;
          animation-name: center-left-segment1;
}
.ant .body .legs .centerleft .segment .segment {
  -webkit-animation-name: center-left-segment2;
          animation-name: center-left-segment2;
}
.ant .body .legs .centerleft .segment .segment .segment {
  -webkit-animation-name: center-left-segment3;
          animation-name: center-left-segment3;
}
.ant .body .legs .backleft {
  top: 30px;
}
.ant .body .legs .backleft .segment {
  -webkit-animation-name: back-left-segment1;
          animation-name: back-left-segment1;
}
.ant .body .legs .backleft .segment .segment {
  -webkit-animation-name: back-left-segment2;
          animation-name: back-left-segment2;
}
.ant .body .legs .backleft .segment .segment .segment {
  -webkit-animation-name: back-left-segment3;
          animation-name: back-left-segment3;
}
.ant .body .legs .frontright {
  top: 10px;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.ant .body .legs .frontright .segment {
  -webkit-animation-name: front-right-segment1;
          animation-name: front-right-segment1;
}
.ant .body .legs .frontright .segment .segment {
  -webkit-animation-name: front-right-segment2;
          animation-name: front-right-segment2;
}
.ant .body .legs .frontright .segment .segment .segment {
  -webkit-animation-name: front-right-segment3;
          animation-name: front-right-segment3;
}
.ant .body .legs .centerright {
  top: 23px;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.ant .body .legs .centerright .segment {
  -webkit-animation-name: center-right-segment1;
          animation-name: center-right-segment1;
}
.ant .body .legs .centerright .segment .segment {
  -webkit-animation-name: center-rightt-segment2;
          animation-name: center-rightt-segment2;
}
.ant .body .legs .centerright .segment .segment .segment {
  -webkit-animation-name: center-right-segment3;
          animation-name: center-right-segment3;
}
.ant .body .legs .backright {
  top: 30px;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.ant .body .legs .backright .segment {
  -webkit-animation-name: back-right-segment1;
          animation-name: back-right-segment1;
}
.ant .body .legs .backright .segment .segment {
  -webkit-animation-name: back-right-segment2;
          animation-name: back-right-segment2;
}
.ant .body .legs .backright .segment .segment .segment {
  -webkit-animation-name: back-right-segment3;
          animation-name: back-right-segment3;
}
.ant .tail {
  position: absolute;
  width: 40px;
  height: 68px;
  top: 148px;
  left: 100px;
  background-color: black;
  background-image: -webkit-radial-gradient(circle at bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0.2) 100%), -webkit-radial-gradient(center, ellipse, #3b3d42 0%, #000000 100%);
  background-image: radial-gradient(circle at bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(ellipse at center, #3b3d42 0%, #000000 100%);
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  -webkit-transform-origin: top center;
      -ms-transform-origin: top center;
          transform-origin: top center;
  -webkit-animation: tail-move 0.69s ease-in-out infinite;
          animation: tail-move 0.69s ease-in-out infinite;
}

/* Leg Tripod L */
@-webkit-keyframes front-left-segment1 {
  0%,100% {
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
  }
  50% {
    -webkit-transform: rotate(22deg) scaleX(0.7);
            transform: rotate(22deg) scaleX(0.7);
  }
  75% {
    -webkit-transform: rotate(36deg) scaleX(0.5);
            transform: rotate(36deg) scaleX(0.5);
  }
}
@keyframes front-left-segment1 {
  0%,100% {
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
  }
  50% {
    -webkit-transform: rotate(22deg) scaleX(0.7);
            transform: rotate(22deg) scaleX(0.7);
  }
  75% {
    -webkit-transform: rotate(36deg) scaleX(0.5);
            transform: rotate(36deg) scaleX(0.5);
  }
}
@-webkit-keyframes front-left-segment2 {
  0%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
}
@keyframes front-left-segment2 {
  0%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
}
@-webkit-keyframes front-left-segment3 {
  0%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
}
@keyframes front-left-segment3 {
  0%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
}
@-webkit-keyframes center-right-segment1 {
  0%,100% {
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
  }
  50% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  75% {
    -webkit-transform: rotate(-10deg) scaleX(0.5);
            transform: rotate(-10deg) scaleX(0.5);
  }
}
@keyframes center-right-segment1 {
  0%,100% {
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
  }
  50% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  75% {
    -webkit-transform: rotate(-10deg) scaleX(0.5);
            transform: rotate(-10deg) scaleX(0.5);
  }
}
@-webkit-keyframes center-right-segment2 {
  0%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
}
@keyframes center-right-segment2 {
  0%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
}
@-webkit-keyframes center-right-segment3 {
  0%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
}
@keyframes center-right-segment3 {
  0%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
}
@-webkit-keyframes back-left-segment1 {
  0%,100% {
    -webkit-transform: rotate(-20deg) scaleX(0.7);
            transform: rotate(-20deg) scaleX(0.7);
  }
  50% {
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
  }
  75% {
    -webkit-transform: rotate(-50deg) scaleX(0.5);
            transform: rotate(-50deg) scaleX(0.5);
  }
}
@keyframes back-left-segment1 {
  0%,100% {
    -webkit-transform: rotate(-20deg) scaleX(0.7);
            transform: rotate(-20deg) scaleX(0.7);
  }
  50% {
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
  }
  75% {
    -webkit-transform: rotate(-50deg) scaleX(0.5);
            transform: rotate(-50deg) scaleX(0.5);
  }
}
@-webkit-keyframes back-left-segment2 {
  0%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-13deg);
            transform: rotate(-13deg);
  }
}
@keyframes back-left-segment2 {
  0%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-13deg);
            transform: rotate(-13deg);
  }
}
@-webkit-keyframes back-left-segment3 {
  0%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}
@keyframes back-left-segment3 {
  0%,100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}
/* Leg Tripod R */
@-webkit-keyframes front-right-segment1 {
  50% {
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
  }
  0%, 100% {
    -webkit-transform: rotate(-22deg) scaleX(0.7);
            transform: rotate(-22deg) scaleX(0.7);
  }
  25% {
    -webkit-transform: rotate(-36deg) scaleX(0.5);
            transform: rotate(-36deg) scaleX(0.5);
  }
}
@keyframes front-right-segment1 {
  50% {
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
  }
  0%, 100% {
    -webkit-transform: rotate(-22deg) scaleX(0.7);
            transform: rotate(-22deg) scaleX(0.7);
  }
  25% {
    -webkit-transform: rotate(-36deg) scaleX(0.5);
            transform: rotate(-36deg) scaleX(0.5);
  }
}
@-webkit-keyframes front-right-segment2 {
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  0%,100% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
}
@keyframes front-right-segment2 {
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  0%,100% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
}
@-webkit-keyframes front-right-segment3 {
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  0%,100% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
}
@keyframes front-right-segment3 {
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  0%,100% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
}
@-webkit-keyframes center-left-segment1 {
  0%,100% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
  25% {
    -webkit-transform: rotate(10deg) scaleX(0.5);
            transform: rotate(10deg) scaleX(0.5);
  }
  50% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
}
@keyframes center-left-segment1 {
  0%,100% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
  25% {
    -webkit-transform: rotate(10deg) scaleX(0.5);
            transform: rotate(10deg) scaleX(0.5);
  }
  50% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
}
@-webkit-keyframes center-left-segment2 {
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  0%,100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
}
@keyframes center-left-segment2 {
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  0%,100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
}
@-webkit-keyframes center-left-segment3 {
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  0%,100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}
@keyframes center-left-segment3 {
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  0%,100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}
@-webkit-keyframes back-right-segment1 {
  50% {
    -webkit-transform: rotate(20deg) scaleX(0.7);
            transform: rotate(20deg) scaleX(0.7);
  }
  0%, 100% {
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
  }
  25% {
    -webkit-transform: rotate(50deg) scaleX(0.5);
            transform: rotate(50deg) scaleX(0.5);
  }
}
@keyframes back-right-segment1 {
  50% {
    -webkit-transform: rotate(20deg) scaleX(0.7);
            transform: rotate(20deg) scaleX(0.7);
  }
  0%, 100% {
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
  }
  25% {
    -webkit-transform: rotate(50deg) scaleX(0.5);
            transform: rotate(50deg) scaleX(0.5);
  }
}
@-webkit-keyframes back-right-segment2 {
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  0%,100% {
    -webkit-transform: rotate(13deg);
            transform: rotate(13deg);
  }
}
@keyframes back-right-segment2 {
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  0%,100% {
    -webkit-transform: rotate(13deg);
            transform: rotate(13deg);
  }
}
@-webkit-keyframes back-right-segment3 {
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  0%,100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
}
@keyframes back-right-segment3 {
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  0%,100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
}
@-webkit-keyframes head-move {
  0%,100% {
    -webkit-transform: translateX(-3px) rotate(3deg);
            transform: translateX(-3px) rotate(3deg);
  }
  50% {
    -webkit-transform: translateX(3px) rotate(-3deg);
            transform: translateX(3px) rotate(-3deg);
  }
}
@keyframes head-move {
  0%,100% {
    -webkit-transform: translateX(-3px) rotate(3deg);
            transform: translateX(-3px) rotate(3deg);
  }
  50% {
    -webkit-transform: translateX(3px) rotate(-3deg);
            transform: translateX(3px) rotate(-3deg);
  }
}
@-webkit-keyframes mandibles-move {
  0%,100% {
    width: 17px;
  }
  50% {
    width: 18px;
  }
}
@keyframes mandibles-move {
  0%,100% {
    width: 17px;
  }
  50% {
    width: 18px;
  }
}
@-webkit-keyframes body-move {
  0%,100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
}
@keyframes body-move {
  0%,100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
}
@-webkit-keyframes tail-move {
  0%,100% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}
@keyframes tail-move {
  0%,100% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}
@-webkit-keyframes floor-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}
@keyframes floor-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}
 

panjang banget yah scriptnya :D
jika sudah selesai silahkan anda simpan file cssnya lalu cobalah jalankan file index.html nya,
dan lihat lah hasilnya  :D

Demikianlah Cara Membuat Animasi Semut Berjalan Dengan CSS, keren bukan ? :D
Jika anda ingin melihat hasilnya atau demonya Silahkan anda buka halaman demonya di bawah ini

Demo
click to view

Mungkin itu saja yang dapat saya sampaikan kurang lebihnya mohon maaf :D
Semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Read More

• Share

Membuat Gedung Sate Dengan CSS

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ 

Berjumpa lagi dengan saya selaku admin codingpintar.blogspot.com . .
masih semangat kan untuk belajar coding nya heheh  ^_^

pada kesempatan kali ini saya masih ingin membagikan sesuatu yang di buat oleh css.
kalau pada tutorial sebelumnya kita sudah membuat animasi yang terakhir adalah Membuat Animasi Motor Dengan CSS yang bisa anda lihat tutorial dan demonya DISINI 
Nah pada hari ini saya tidak akan bahas mengenai pembuatan animasi lagi melainkan sebuah karya yang  cukup indah yaitu Membuat Gedung Sate Dengan CSS, oh iya sekali lagi saya ingatkan karya ini bukan buatan saya melainkan salah seorang programmer yang hebatnya dia berasal dari INDONESIA yang bernama Khamil Aryansyah anda bisa melihat profilnya melalui twtternya di @arkhlima
seperti biasa karya dia sengaja saya share disini karena saya menyukainya dan supaya kita semua dapat menikmati karyanya,
tidak usah berlama-lama lagi langsung saja ikuti tutorial Cara Membuat Gedung Sate Dengan CSS pada kali ini dengan baik dan benar.

1. Langkah Pertama Adalah Membuat Script HTML
seperti tutorial-tutorial sebelumnya untuk membuat sesuatu yang menarik jangan lupa untuk membuat file htmlnya terlebih dahulu, file html memang sangat penting untuk membuat aplikasi berbasis web, jadi silahkan anda buat file html bernama index.html, lalu ketikkan script di bawah ini :

<!DOCTYPE html>
<html>
<head>
 <title>Gedung Sate</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
        <div class="container">
            <ul class="sky">
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="gedung-sate">
                <div class="bd bd1">
                    <div></div>
                    <div>
                        <div>
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="bd2-wrap">
                    <div class="bd bd2">
                        <div></div>
                        <div>
                            <div>
                                <ul>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                                <ul>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                        
                    <div class="bd cbd absolutely">
                        <div></div>
                        <div>
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                        <div></div>
                    </div>

                    <div class="bd bd2">
                        <div></div>
                        <div>
                            <div>
                                <ul>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                                <ul>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bd bd3 absolutely">
                    <div></div>
                    <div>
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>

                <div class="bd bd4 absolutely">
                    <div>
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <div></div>
                    <div></div>
                </div>

                <div class="bd bd5 absolutely">
                    <ul>
                        <li>
                            <div></div>
                        </li>
                        <li>
                            <div></div>
                        </li>
                        <li>
                            <div></div>
                        </li>
                    </ul>
                    <ol>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                </div>
            </div>
            <hgroup>
                <h1>Gedung Sate</h1>
                <h4>Bandung, Indonesia</h4>
            </hgroup>
        </div>
</body>
</html> 

Seperti biasa sebelum membuat stylenya silahkan anda coba dulu membuka file htmlnya,
ya benar hasilnya hanya berupa titik yang gak jelas
agar terbentuk Gedung Sate nya Silahkan ikuti langkah selanjutnya

2. Membuat File CSS
file css memang sangat penting untuk membuat hal yang menarik di website, ya karena tanpa file css kita tidak akan bisa membuat gedung sate tersebut. silahkan anda buat file bernama style.css setelah itu ketikkan script di bawah ini :

@import url(http://fonts.googleapis.com/css?family=Roboto:300);

*,
*:after,
*:before {
    box-sizing:border-box;
}
body,
h1,
h4 {
    margin:0;
    padding:0;
}
body {
    color:#607d8b;
    font-family:"Roboto",sans-serif;
    background:#263238;
}
h1,
h4 {
    font-weight:300;
}
h1 {
    font-style:italic;
}
ul,
ol {
    margin:0;
    padding:0;
}
li {
    list-style:none;
}
hgroup {
    margin-top:25px;
    text-align:center;
}

/* container */
.container {
    margin:75px auto;
}

/* gedung sate */
.gedung-sate {
    margin:auto;
    width:939px;
    height:335px;
    position:relative;
}

/* bd */
.bd:before,
.bd:after,
.bd,
.sky:before,
.sky,
.sky li:before,
.sky li:after,
.sky li,
.sky div {
    position:absolute;
}
.bd:before,
.bd:after,
.bd5 ul li:before,
.bd5 ul li:after {
    z-index:1;
    top:-65px;
    width:38px;
    height:128px;
}
.bd:before,
.bd:after,
.bd > div:before,
.bd > div:after,
.bd5 ul li:before,
.bd5 ul li:after,
.bd5 ul li div:before,
.bd5 ul li div:after,
.bd5 ol:before,
.sky:before,
.sky li:before,
.sky li:after {
    content:'';
    display:block;
    border:1px solid;
}
.bd > div:before,
.bd > div:after,
.bd > div {
    background:#263238;
}
.bd > div:first-child:before,
.bd > div:first-child:after {
    z-index:2;
    height:4px;
}
.bd > div:first-child:after {
    height:6px;
    width:100%;
}
.bd > div:last-child:before,
.bd > div:last-child:after {
    width:12px;
    bottom:-1px;
    position:absolute;
}
.bd > div:last-child:before {
    left:-5px;
}
.bd > div:last-child:after {
    right:-5px;
}
.bd div,
.bd ul {
    width:100%;
    display:flex;
    display:-ms-flexbox;
    display:-webkit-box;
    display:-webkit-flex;
}
.bd {
    bottom:0;
    overflow:hidden;
}
.bd > div {
    border:1px solid;
    position:relative;
}
.bd > div:first-child {
    border:0;
    flex-direction:column;
    -ms-flex-direction:column;
    -webkit-flex-direction:column;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-pack:justify;
    -webkit-box-pack:justify;
    justify-content:space-between;
    -webkit-justify-content:space-between;
    align-items:center;
    -ms-flex-align:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
}
.bd > div:nth-child(2) {
    margin:auto;
    border-top:0;
}
.bd ul {
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
}
.bd > div:nth-child(2) li:before,
.bd > div:nth-child(2) li:after {
    content:'';
}
.bd > div:nth-child(2) li {
    width:21px;
    height:21px;
    margin:0 5px;
    border:1px solid;
}
.absolutely {
    left:0;
    right:0;
    margin:auto;
}

/* bd1 */
.bd1:before {
    left:21px;
    transform:rotate(77deg);
    -ms-transform:rotate(77deg);
    -webkit-transform:rotate(77deg);
}
.bd1:after {
    right:21px;
    transform:rotate(-77deg);
    -ms-transform:rotate(-77deg);
    -webkit-transform:rotate(-77deg);
}
.bd1 {
    left:0;
    right:0;
    margin:auto;
    width:794px;
    height:183px;
}
.bd1 > div:first-child:before {
    width:590px;
}
.bd1 > div:first-child {
    height:33px;
}
.bd1 > div:last-child:before,
.bd1 > div:last-child:after {
    height:30px;
}
.bd1 > div:last-child {
    width:760px;
    padding:6px 32px 8px;
}
.bd1 > div:last-child div {
    -ms-flex-pack:justify;
    -webkit-box-pack:justify;
    justify-content:space-between;
    -webkit-justify-content:space-between;
}
.bd1 ul {
    width:auto;
}

/* bd2-wrap */
.bd2-wrap {
    bottom:0;
    z-index:3;
    width:100%;
    position:absolute;
    display:flex;
    display:-ms-flexbox;
    display:-webkit-box;
    display:-webkit-flex;
    -ms-flex-pack:justify;
    -webkit-box-pack:justify;
    justify-content:space-between;
    -webkit-justify-content:space-between;
}
.bd2-wrap .bd:last-child {
    transform:scaleX(-1);
    -ms-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
}

/* bd2 */
.bd2:before {
    left:-3px;
    transform:rotate(72deg);
    -ms-transform:rotate(72deg);
    -webkit-transform:rotate(72deg);
}
.bd2:after {
    right:-3px;
    transform:rotate(-72deg);
    -ms-transform:rotate(-72deg);
    -webkit-transform:rotate(-72deg);
}
.bd2 {
    z-index:2;
    width:448px;
    height:121px;
    position:relative;
}
.bd2 > div:first-child:before {
    width:326px;
}
.bd2 > div:first-child {
    height:29px; 
}
.bd2 > div:last-child:before {
    left:-6px;
    width:14px;
    height:83px;
}
.bd2 > div:last-child:after {
    display:none;
}
.bd2 > div:last-child {
    width:418px;
    height:90px;
    padding:12px 0 8px;
}
.bd2 > div:last-child div {
    margin-left:14px;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    flex-direction:column;
    -ms-flex-direction:column;
    -webkit-flex-direction:column;
    -ms-flex-pack:justify;
    -webkit-box-pack:justify;
    justify-content:space-between;
    -webkit-justify-content:space-between;
}
.bd2 > div:last-child ul:last-child li:before,
.bd2 > div:last-child ul:last-child li:after {
    left:0;
    width:100%;
    border:1px solid;
    position:absolute;
}
.bd2 > div:last-child ul:last-child li:before {
    top:0;
    height:23px;
    border-radius:40%;
}
.bd2 > div:last-child ul:last-child li:after {
    bottom:0;
    height:19px;
    background:#263238;
}
.bd2 > div:last-child ul:last-child li {
    border:0;
    height:32px;
    position:relative;
}

/* cbd */
.cbd:before,
.cbd:after {
    top:-24px;
}
.cbd:before {
    left:-49px;
    transform:rotate(40deg);
    -ms-transform:rotate(40deg);
    -webkit-transform:rotate(40deg);
}
.cbd:after {
    right:-49px;
    transform:rotate(-40deg);
    -ms-transform:rotate(-40deg);
    -webkit-transform:rotate(-40deg);
}
.cbd {
    z-index:1;
    top:-138px;
    width:45px;
    height:107px;
}
.cbd div:first-child:before {
    width:7px;
    height:10px;
}
.cbd div:first-child:after {
    height:8px;
}
.cbd div:first-child {
    height:40px;
}
.cbd div:nth-child(2):before,
.cbd div:nth-child(2):after {
    display:none;
}
.cbd div:nth-child(2) {
    border:0;
    padding:0;
    z-index:2;
    height:41px;
}
.cbd div:nth-child(2) ul,
.cbd div:last-child {
    margin:auto;
}
.cbd div:nth-child(2) ul,
.bd4 div:nth-child(1) ul {
    width:39px;
    height:100%;
    margin:auto;
    padding:7px 0 1px;
    border-left:1px solid;
    border-right:1px solid;
}
.cbd div:nth-child(2) li {
    width:7px;
    height:inherit;
    margin:0px 1px;
}
.cbd div:last-child:before,
.cbd div:last-child:after {
    top:-10px;
    z-index:-1;
    width:22px;
    height:22px;
}
.cbd div:last-child:before {
    left:-1px;
    border-right:0;
    transform:skew(0,38deg);
    -ms-transform:skew(0,38deg);
    -webkit-transform:skew(0,38deg);
}
.cbd div:last-child:after {
    right:-1px;
    border-left:0;
    transform:skew(0,-38deg);
    -ms-transform:skew(0,-38deg);
    -webkit-transform:skew(0,-38deg);
}
.cbd div:last-child {
    top:0;
    width:43px;
    height:4px;
}

/* bd3 */
.bd3:before,
.bd3:after {
    top:-60px;
}
.bd3:before {
    left:-17px;
    transform:rotate(72deg);
    -ms-transform:rotate(72deg);
    -webkit-transform:rotate(72deg);
}
.bd3:after {
    right:-17px;
    transform:rotate(-72deg);
    -ms-transform:rotate(-72deg);
    -webkit-transform:rotate(-72deg);
}
.bd3 {
    z-index:3;
    width:198px;
    height:81px;
    background:none;
}
.bd3 div:first-child:before {
    width:75px;
}
.bd3 div:first-child {
    height:30px; 
}
.bd3 div:last-child:before,
.bd3 div:last-child:after {
    height:43px;
}
.bd3 div:last-child {
    width:161px;
    height:49px;
    padding:8px 18px 0;
}
.bd3 div:last-child ul {
    width:100%;
    align-items:center;
    -ms-flex-align:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-pack:distribute;
    justify-content:space-around;
    -webkit-justify-content:space-around;
}
.bd3 div:last-child li:first-child,
.bd3 div:last-child li:last-child {
    width:6px;
    height:17px;
    margin-top:-3px;
}
.bd3 div:last-child li:nth-child(2):before,
.bd3 div:last-child li:nth-child(2) {
    border-bottom:0!important;
}
.bd3 div:last-child li:nth-child(2):before {
    left:0;
    right:0;
    bottom:0;
    width:36px;
    height:28px;
    margin:auto;
    border:1px solid;
    position:absolute;
}
.bd3 div:last-child li:nth-child(2) {
    width:50px;
    height:38px;
    position:relative;
    align-self:flex-end;
    -ms-flex-item-align:end;
    -webkit-align-self:flex-end;
}

/* bd4 */
.bd4:before,
.bd4:after {
    top:auto;
    bottom:-58px;
    background:#263238;
}
.bd4:before {
    left:-66px;
    transform:rotate(-74deg);
    -ms-transform:rotate(-74deg);
    -webkit-transform:rotate(-74deg);
}
.bd4:after {
    right:-66px;
    transform:rotate(74deg);
    -ms-transform:rotate(74deg);
    -webkit-transform:rotate(74deg);
}
.bd4 {
    z-index:2;
    height:83px;
    width:160px;
    bottom:149px;
}
.bd4 div:first-child:before,
.bd4 div:first-child:after {
    display:none;
}
.bd4 div:first-child {
    width:94px;
    height:31px;
    margin:auto;
}
.bd4 div:first-child ul {
    padding:0;
    width:100%;
    border-top:1px solid;
    align-items:center;
    -ms-flex-align:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
}
.bd4 div:first-child li {
    width:11px;
    height:18px;
    margin:0 3px;
    border:1px solid;
}
.bd4 div:nth-child(2):before,
.bd4 div:nth-child(2):after {
    bottom:0;
    position:absolute;
}
.bd4 div:nth-child(2):before {
    z-index:2;
    left:-15px;
    height:6px;
    width:179px;
    border-left:0;
    border-right:0;
}
.bd4 div:nth-child(2):after,
.bd4 div:nth-child(2) {
    border-bottom:0;
}
.bd4 div:nth-child(2):after {
    left:0;
    right:0;
    z-index:3;
    height:6px;
    width:125px;
    margin:auto;
    border-top:0;
}
.bd4 div:nth-child(2) {
    width:151px;
    height:51px;
    border-top:1px solid;
}
.bd4 div:last-child:before,
.bd4 div:last-child:after {
    height:38px;
    bottom:29px;
}
.bd4 div:last-child:before {
    left:0;
}
.bd4 div:last-child:after {
    right:0;
}
.bd4 div:last-child {
    border:0;
    z-index:2;
    height:11px;
}

/* bd5 */
.bd5:before,
.bd5:after {
    display:none;
}
.bd5 {
    top:0;
    bottom:auto;
    width:175px;
    height:116px;
    overflow:unset;
}
.bd5 ul,
.bd5 ul li div {
    width:100%;
}
.bd5 ul,
.bd5 ul li:before,
.bd5 ul li:after,
.bd5 ul li,
.bd5 ol:before,
.bd5 ol,
.bd5 div:before,
.bd5 div:after,
.bd5 > div {
    position:absolute;
}
.bd5 ul {
    bottom:0;
    height:67px;
}
.bd5 ul li,
.bd5 ol:before,
.bd5 ol,
.bd5 ol li,
.bd5 div:before,
.bd5 div:after,
.bd5 > div {
    left:0;
    margin:auto;
    border:1px solid;
    right:0!important;
}
.bd5 ul li {
    border:none;
    overflow:hidden;
}
.bd5 ul li div:before {
    bottom:0;
}
.bd5 ul li div:after {
    border:none;
    border-bottom:1px solid;
}
.bd5 ul li:first-child:before {
    left:-29px;
    transform:rotate(68deg);
    -ms-transform:rotate(68deg);
    -webkit-transform:rotate(68deg);
}
.bd5 ul li:first-child:after {
    right:-29px;
    transform:rotate(-68deg);
    -ms-transform:rotate(-68deg);
    -webkit-transform:rotate(-68deg);
}
.bd5 ul li:first-child {
    top:34px;
    width:127px;
    height:34px;
}
.bd5 ul li:first-child div,
.bd5 ul li:nth-child(2) div {
    height:16px;
}
.bd5 ul li:first-child div:before {
    width:123px;
    height:20px;
    transform:perspective(150px)rotateX(-28deg);
    -ms-transform:perspective(150px)rotateX(-28deg);
    -webkit-transform:perspective(150px)rotateX(-28deg);
}
.bd5 ul li:first-child div:after {
    width:55px;
}
.bd5 ul li:nth-child(2):before,
.bd5 ul li:nth-child(2):after {
    top:-65px;
}
.bd5 ul li:nth-child(2):before {
    left:-29px;
    transform:rotate(69deg);
    -ms-transform:rotate(69deg);
    -webkit-transform:rotate(69deg);
}
.bd5 ul li:nth-child(2):after {
    right:-29px;
    transform:rotate(-69deg);
    -ms-transform:rotate(-69deg);
    -webkit-transform:rotate(-69deg);
}
.bd5 ul li:nth-child(2) {
    top:14px;
    width:95px;
    height:28px;
}
.bd5 ul li:nth-child(2) div:before,
.bd5 ul li:last-child div:before {
    border-bottom:0;
}
.bd5 ul li:nth-child(2) div:before {
    width:93px;
    height:14px;
    transform:perspective(150px)rotateX(-32deg);
    -ms-transform:perspective(150px)rotateX(-32deg);
    -webkit-transform:perspective(150px)rotateX(-32deg);
}
.bd5 ul li:nth-child(2) div:after {
    width:19px;
}
.bd5 ul li:last-child:before,
.bd5 ul li:last-child:after {
    top:-69px;
}
.bd5 ul li:last-child:before {
    left:-32px;
    transform:rotate(71deg);
    -ms-transform:rotate(71deg);
    -webkit-transform:rotate(71deg);
}
.bd5 ul li:last-child:after {
    right:-32px;
    transform:rotate(-71deg);
    -ms-transform:rotate(-71deg);
    -webkit-transform:rotate(-71deg);
}
.bd5 ul li:last-child {
    top:0;
    z-index:1;
    width:57px;
    height:23px;
}
.bd5 ul li:last-child div {
    height:10px;
}
.bd5 ul li:last-child div:before {
    width:55px;
    height:15px;
    border-bottom:0;
    transform:perspective(150px)rotateX(-45deg);
    -ms-transform:perspective(150px)rotateX(-45deg);
    -webkit-transform:perspective(150px)rotateX(-45deg);
}
.bd5 ul li:last-child div:after {
    width:0;
}
.bd5 ol:before,
.bd5 ol {
    margin:auto;
}
.bd5 ol:before {
    width:0;
    height:100%;
    border-left:0;
}
.bd5 ol {
    width:7px;
    height:49px;
    border:none;
    transform:scaleY(-1);
    -ms-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
}
.bd5 ol li {
    width:4px;
    height:4px;
    display:block;
    margin:1px auto;
    background:#263238;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}

/* sky */
.sky:before {
    top:28px;
    width:30px;
    height:30px;
    right:295px;
    border-radius:30px;
}
.sky {
    left:0;
    right:0;
    margin:auto;
    width:888px;
    height:152px;
}
.sky li:before,
.sky li:after {
    z-index:1;
    bottom:-1px;
    border-bottom:0;
    background:#263238;
}
.sky li {
    border-bottom:1px solid;
}
/* cloud 1 */
.sky li:first-child:before {
    left:20px;
    width:50px;
    height:25px;
    border-radius:25px 25px 0 0;
}
.sky li:first-child:after {
    left:53px;
    width:30px;
    height:15px;
    border-radius:15px 15px 0 0;
}
.sky li:first-child {
    bottom:30px;
    width:190px;
    height:25px;
}
/* cloud 2 */
.sky li:nth-child(2):before {
    left:74px;
    width:24px;
    height:12px;
    border-radius:12px 12px 0 0;
}
.sky li:nth-child(2):after {
    left:38px;
    width:40px;
    height:20px;
    border-radius:20px 20px 0 0;
}
.sky li:nth-child(2) {
    top:0;
    left:285px;
    width:110px;
    height:25px;
}
/* cloud 3 */
.sky li:last-child:before {
    left:60px;
    width:48px;
    height:24px;
    border-radius:24px 24px 0 0;
}
.sky li:last-child:after {
    left:48px;
    width:20px;
    height:10px;
    border-radius:10px 10px 0 0;
}
.sky li:last-child {
    right:80px;
    bottom:53px;
    width:180px;
    height:25px;
} 

jika sudah selesai silahkan anda simpan file cssnya lalu cobalah jalankan file index.html nya,
dan lihat lah hasilnya  :D

Demikianlah Cara Membuat Gedung Sate Dengan CSS, keren bukan ? :D
Dan ternyata karya Anak Bangsa pun tidak kalah dengan karya orang luar, ini menunjukkan bahwa kita sudah sepatutnya mencintai buatan lokal yang kualitasnya pun tidak kalah dengan buatan luar. .

Namun kali ini saya minta maaf karena tidak menyediakan demonya :D
Mungkin itu saja yang dapat saya sampaikan kurang lebihnya mohon maaf .
Semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Read More

• Share

Cara Membuat Pencarian Data Dengan PHP MySQL

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

 

ketemu lagi dengan saya selaku admin codingpintar.blogspot.com disini kita semua akan belajar coding baik itu html css javascript jquery php mysql dll
nah pada kesempatan kali ini saya tidak akan membahas tutorial mengenai CSS Melainkan PHP  dan MySQL.
pada tutorial PHP dan MySQL sebelumnya adalah Cara Membuat Login Multi User Dengan PHP MySQL Yang bisa anda llihat tutorialnya DISINI

Nah di tutorial kali ini saya masih menggunakan PHP Native dan MySQL Sebagai databasenya.
Tutorial yang akan saya bahas disini yaitu Cara Membuat Pencarian Data Dengan PHP MySQL
Tutorial ini masih sangat sederhana sehinga sangat mudah di pahami oleh pemula. pada tutorial kali ini saya hanya membutuhkan 2 file php yaitu koneksi.php dan index.php
Baiklah tidak usah berlama-lama lagi, silahkan ikuti langkah-langkah di bawah ini dengan benar.

1. Database
Silahkan anda pilih database yang akan anda buat sebagai bahan percobaan, disini saya menggunakan database negara yang saya dapet dari google.

Jika database sudah siap silahkan anda ikuti langkah selanjutnya

2. Membuat koneksi.php
Langkah yang ke 2 yaitu membuat file koneksi.php file koneksi ini bertujuan untuk menghubungkan php ke database mysql silahkan ketikkan script berikut ini :

<?php
 
$host_name = "localhost"; 
$user_name = "root";
$password = "";
$database = "negara"; //sesuaikan dengan database anda

mysql_connect($host_name, $user_name, $password);
mysql_select_db($database);
 
?> 

Silahkan anda tes dengan menjalankan koneksi.php apabila koneksi berhasil, maka layar pada browser akan blank.
Silahkan Ikuti langkah selanjutnya .

3. Membuat index.php
Didalam file ini saya memasukkan semua proses mulai dari tampil data sampai query pencarian. Silahkan anda buat file php bernama index.php lalu anda ketik script di bawah ini disini penjelasan scriptnya sudah saya cantumkan langsung sebagai komentar, jadi anda dapat mengerti maksud dari script berikut

<?php
include "koneksi.php"; // menghubungkan ke file koneksi.php agar terhubung dengan database
?>

<!DOCTYPE html>
<html>
<head>
 <title>Lihat Data</title>
<!-- CSS untuk mempercantik tampilan-->
 <style type="text/css">
td{
 text-align: center;
}
</style>

</head>

<body>
<fieldset>
<legend><h1>Cari Data Negara</h1></legend>
 <div style="margin-bottom:15px;" align="right">
  <form action="" method="post">
   <input type="text" name="input_cari" placeholder="Cari Berdasar Nama Negara" class="css-input" style="width:250px;" />
   <input type="submit" name="cari" value="Cari" class="btn" style="padding:3px;" margin="6px;" width="50px;"  />
  </form>
 </div>

 <table width="100%" border="1px solid #000" style="border-collapse:collapse;">
  <tr style="background-color:#fc0;">
   <th>Kode Negara</th>
   <th>Nama Negara</th>
   <th>Aksi</th>
  </tr>
   <?php 

   $input_cari = @$_POST['input_cari']; 
   $cari = @$_POST['cari'];

   // jika tombol cari di klik
   if($cari) {

    // jika kotak pencarian tidak sama dengan kosong
    if($input_cari != "") {
    // query mysql untuk mencari berdasarkan nama negara. .
    $sql = mysql_query("select * from countries where country_name like '%$input_cari%'") or die (mysql_error());   
    } else {
    $sql = mysql_query("select * from countries") or die (mysql_error());
    }
    } else {
    $sql = mysql_query("select * from countries") or die (mysql_error());
    }

   // mengecek data
   $cek = mysql_num_rows($sql);
   // jika data kurang dari 1
   if($cek < 1) {
    ?>
     <tr> <!--muncul peringata bahwa data tidak di temukan-->
      <td colspan="7" align="center style="padding:10px;""> Data Tidak Ditemukan</td>
     </tr>
    <?php
   } else {

   // mengulangi data agar tidak hanya 1 yang tampil
   while($data = mysql_fetch_array($sql)) {

   ?>
   <tr>
    <td><?php echo $data['country_code'] ?></td>
    <td><?php echo $data['country_name'] ?></td>
    
    <!--Hanya pemanis tampilan-->
    <td align="center">
    <button>Edit</button> 
    <button>Hapus</button>
    </td>
   </tr>
  <?php 

  } 
 }
?>
 </table>
</fieldset>
</body>
</html>

sebelumnya mohon maaf apabila scriptnya berantakan. silahkan anda rapikan jika memang perlu. .
oke jika kalian sudah membuat file index.php coba anda jalankan filenya dan lihat di browsermu, maka akan tampil seperti gambar berikut.

Nah coba deh anda cari dengan kata " Ind " pasti akan muncul semua negara yang ada huruf " ind " nya. . seperti gambar berikut. .

nah apabila negara yang anda cari tidak terdaftar atau tidak terdata maka muncul peringatan bahwa " Data Tidak Ditemukan " Lihat gambar berikut ini . .

Bagaimana cukup simple bukan. ? ^_^
silahkan anda coba dan anda kembangkan sendiri sesuai kebutuhan anda.
mohon maaf apabila tidak ada demonya.
dan apabila ada hal yang ingin di tanyakan silahkan bertanya di komentar,
Mungkin itu saja yang dapat saya sampaikan,kurang lebihnya mohon maaf. :)
Semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :)

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Read More

• Share