Selasa, 21 Februari 2017

PHP System CRUD (Create - Read - Update - Delete) With Modal Popup Bootstrap

  1 komentar
17.13



CRUD (Create, Read, Update, Delete), ngomongin soal PHP System memang ga ada habisnya, para developers website selalu saja mengeluarkan ide dan disandingi dengan project baru, namun System CRUD bukanlah baru.

Menurut saya, system ini yang 95% sering digunakan oleh kebanyakan developers web, untuk melengkapi projectnya.

Langsung saja ya, dan sedikit penjelasan, sesuai judul memang system CRUD ini berbeda dengan CRUD lain, karna CRUD ini mengandalkan popup (tanpa pindah halaman). Mungkin bagi anda dan saya juga tertarik untuk mengembangkannya di project masing-masing.

Mari saya jelaskan infonya.

Screenshot Halaman Utama (index.php)

Screenshot Halaman Tambah Data

Screenshot Halaman Edit Data

Screenshot Halaman Hapus Data

PHP Version : 5.x (XAMPP 3.x.x)
Material : Bootstrap 3 & Font Awesome 4.7

Read More

Senin, 13 Februari 2017

Mengenal Dasar Variabel Dalam PHP

  Tidak ada komentar
16.49



Semua bahasa pemrograman menyediakan variabel, yang berfungsi untuk menyimpan suatu nilai dan nilai yang ada di dalamnya dapat diubah sewaktu-waktu. Dibawah ini contoh script dasar latihan membuat variabel.



<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Variabel</title>
  </head>

  <body>
    <?php
      $nama = "Sogi Mardianto";
      printf("Halo, %s", $nama);
    ?>
  </body>
</html>


Penjelasan kode diatas, $nama adalah nama variabel, pada pemrograman PHP, variable selalu ditulis dengan diawali tanda $ pada baris


$nama = "Sogi Mardianto";


bisa juga kalian sebut "string" untuk simbol awal dari variabel. Baris di atas merupakan pernyataan yang digunakan untuk memberikan string "Sogi Mardianto" ke variabel $nama dan pada kode


printf("Halo, %s", $nama);


merupakan pernyataan untuk menampilkan tulisan 'Halo,' diikuti dengan nilai yang terletak disebelah kanan koma, yaitu isi dari variabel yang telah dibuat yakni $nama.

Untuk tanda %s merupakan tanda format untuk string, artinya, data yang akan menggantikan tanda tersebut adalah data string. Dan jika kalian praktekan kode di atas, akan menjadi seperti ini.



Dengan menggunakan PHP kalian juga bisa mengirimkan suatu nilai yang ditangani melalui formulir (dientri oleh pemakai melalui keyboard) dan buat script berikut.


<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Pemasukan Data</title>
  </head>

  <body>
    <form action="salam.php" method="get">
      Silahkan masukan nama anda:
        <br>
        <input type="text" name="nama_pemakai">
          <br>
        <input type="submit" value="Kirim">
    </form>
  </body>
</html>


Sebenarnya, kode di atas adalah kode HTML murni, mungkin kalian juga berfikir demikian, karna kalian sadar tidak adanya tag PHP pada kode di atas. Namun, tentu saja kalian bisa menyimpan dengan ekstensi (.php), dan jika anda jalankan, akan menampilkan seperti gambar di bawah ini.



Bila pemakai memasukan nama, maka nama tersebut akan disimpan pada variabel HTML bersama nama_pemakai (yang dinyatakan dengan nama_pemakai pada name).

Catatan: Pada kode di atas, nama_pemakai tidak di awalai oleh $, sebab variabel tersebut tidak berada dalam kode PHP, tetapi merupakan variabel yang berbeda dalam kode HTML.


Bila selanjutnya pemakai mengklik tombol berjudul Kirim maka berkas salam.php akan dijalankan.

Catatan: Baris yang dimulai dengan <form> hingga </form> merupakan perintah HTML yang berfungsi untuk menangani formulir, yang memungkinkan pemakai memasukan data dari keyboard. Pada contoh di atas, formulir tersusun atas sebuah kotak text yang di tangani melalui code <input type="text" name="nama_pemakai"> dan sebuah tombol yang di tangani melalui code <input type="submit" value="Kirim">. Perhatikan bahwa kata text membentuk kotak text dan submit membentuk sebuah tombol. Pada formulir, yang terletak sesudah name= adalah variabel, yang akan menerima data yang dimasukan pemakai pada kotak text. Adapun yang terletak sesudah value= pada type="submit" adalah keterangan yang akan ditaruh pada tombol.


Beberapa kode lainya yang perlu kalian ketahui :

  • Kode
    
    <br>
    
    adalah kode HTML untuk berpindah baris, bisa kalian sebut juga dengan "Enter" pada keyboard.
  • Yang terletak sesudah kata
    
    action=
    
    adalah nama berkas yang akan dijalankan sekiranya tombol submit telah diklik.
  • Yang terletak disebelah kanan
    
    method=
    
    adalah metode yang digunakan untuk mengirim variabel ke script yang di panggil. Salah satu metode yang bisa digunakan adalah get. Metode ini akan membuat nama variabel dan isinya dilewatkan dalam panggilan script (terlihat pada baris alamat di browser).


Sebelum kalian mencoba klik tombol submit, buat terlebih dahulu file bernama salam.php, isinya sebagai berikut.


<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Menampilkan Variabel</title>
  </head>

  <body>
    <?php
      $nama_pemakai = $_GET['nama_pemakai'];
      print("Selamat Belajar PHP, <b>$nama_pemakai</b>");
    ?>
  </body>
</html>


    Catatan:

  • <b> dan di akhiri dengan </b> adalah code HTML yang berfungsi untuk menebalkan tulisan.
  • Pernyataan $nama_pemakai = $_GET["nama_pemakai"]; digunakan untuk memperoleh isi dari variabel nama_pemakai yang berasal dari isi script index.php (script yang pertama kalian buat di atas)
  • Perhatikan pula, pernyataan yang digunakan untuk menampilkan nilai bukanlah printf() melainkan print(). melainkan printf() biasa digunakan kalau ada format seperti (%s) yang disertakan dalam string. Adapun melainkan print() biasa digunakan kalau tidak ada format semacam tadi.


Setelah anda menuliskan kode di atas, cobalah untuk memanggil index.php melalui browser dan ketikan sebuah nama atau apalah terserah kalian, kemudian klik tombol Kirim.



Setelah anda memasukan sebuah nama atau apalah, dan klik tombol Kirim, maka, akan nampak seperti gambar di bawah ini.



Catatan: Perhatikan URL di depan. Terlihat bahwa pemanggilannya berupa http://localhost/latihan/salam.php?nama_pemakai=Sogi+Mardianto, ini disebabkan metode yang digunakan adalah get, kalau menggunakan metode post, bagian nama_pemakai=Sogi+Mardianto tidak akan muncul, perlu kalian ketahui pada bentuk di atas nama_pemakai menyatakan variabel dan yang berada di sebelah kanan tanda sama dengan (=) adalah nilainya. Variabel dan nilai dipisahkan oleh tanda sama dengan (=).


Pernyataan Berkondisi

PHP mendukung pengambilan keputusan yang melibatkan pemilihan lebih dari satu alternatif. Contoh berikut memberikan gambaran penggunaan pernyataan if yang dapat memberikan komentar hari ini berupa hari Minggu atau tidak (bukan hari minggu).

Buat file baru dan berinama dengan namahari.php. Kemudian kalian isikan sesuai dengan kode dibawah ini.



<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Menentukan Nama Hari</title>
  </head>

  <body>
    Hari ini
    <?php
      $nama_hari = date("D");
      if ($nama_hari == "Sun")
        print(" hari Minggu");
      else
        print(" bukan hari Minggu");
    ?>
  </body>
</html>


Penjelasan dari kode di atas:

  • Pernyataan $nama_hari = date("D"); digunakan untuk memperoleh nama hari (dalam bahasa inggris) dan di simpan ke variabel $nama_hari.
  • Pernyataan if digunakan untuk melakukan pengambilan keputusan. Kalau isi variabel $nama_hari berupa "Sun" (hari minggu dalam bahasa inggris) maka pernyataan print(" hari Minggu"); akan dijalankan, sedangkan kalau tidak maka pernyataan print(" bukan hari Minggu"); yang akan dijalankan.
Bila kalian menjalankan script namahari.php yang sudah kalian buat tadi, hasilnya akan seperti gambar di bawah ini.



Pada gambar di atas menunjukan tulisan Hari ini bukan hari Minggu, karena saya mengujinya di hari selain minggu, di hari minggu coba kalian uji, seharusnya tampil dengan Hari ini hari Minggu.

Pengulangan Dalam PHP

Pengulangan merupakan salah satu aspek yang banyak digunakan dalam pemrograman. Sebagai contoh, akan saya tulisankan untuk membuat angka 1 hingga 10 yang di tangani dengan menggunakan pengulangan. Adapun pernyataan yang digunakan adalah for.

Buat file baru bernama angka.php dan tuliskan kode seperti di bawah ini.



<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Menentukan Nama Hari</title>
  </head>

  <body>
    <?php
      for($i = 1; $i <= 7; $i + 1)
        print("<font size=$i> $i </font><br>");

      print("Mantab!");
    ?>
  </body>
</html>


Pada pernyataan for di atas, variabel $i secara berturut-turut akan bernilai 1, 2, 3, 4, 5, 6, dan 7. Nilai awal ditentukan oleh $i = 1. Nilai akhir ditentukan oleh kondisi $i <= 7.

Ungkapan $i = $i + 1 digunakan untuk menaikan nilai dari $i (dari 1 menjadi 2, 2 menjadi 3, dan seterusnya). Adapun pernyataan yang akan diproses dari nilai $i bernilai 1 hingga bernilai 7, yaitu:

print("<font size=$i> $i </font><br>");

Pada saat $i bernilai 1, akan terbentuk string:

<font size=1> 1 </font><br>

begitu juga jika pada saat $i bernilai 7, akan terbentuk string:

<font size=7> 7 </font><br>


Sebagaimana diketahui, tag <font size> adalah kode HTML yang digunakan untuk mengatur ukuran font. Dengan demikian angka 1 sampai 7 akan ditampilkan dengan ukuran yang berbeda beda.

Perlu juga kalian ketahui, kode <br> adalah kode HTML untuk berpindah baris, seperti yang dibahas sebelumnya. Bila kalian memanggil script angka.php yang telah kalian buat tadi, maka hasilnya seperti gambar di bawah ini.



Komentar Pada PHP

komentar merupakan bagian yang penting di dalam program, terutama kalau kodenya berbentuk besar. Komentar tidak berarti apa-apa bagi komputer, tetapi sangat berguna bagi pemrogram atau pembaca program dalam memahami isi program mengingat komentar biasanya berisi keterangan-keterangan penjelas.

Selain itu komentar juga diperlukan untuk keperluan debugging, yaitu untuk mematikan kode tertentu selama pengembangan program.

Pada PHP, komentar dapat diimplementasikan dengan menggunakan tanda # atau // (garis miring 2 kali). Bila terdapat tanda seperti itu, semua karakter dimulai posisi simbol tersebut hingga akhir baris akan di anggap sebagai komentar.

Berikut saya berikan contoh script pemodifikasian program angka.php yang telah dilengkapi dengan komentar.



<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Menentukan Nama Hari</title>
  </head>

  <body>
    # Contoh pengulangan pada PHP
    <?php
      for($i = 1; $i <= 7; $i + 1)
        print("<font size=$i> $i </font><br>");

      print("Mantab!"); // Ditampilkan setelah for berakhir.
    ?>
  </body>
</html>


Komentar pertama berupa # Contoh pengulangan pada PHP, komentar kedua diletakan satu baris dengan pernyataan print("Mantab!");.

Bila dilihat dari browser, hasilnya tetap sama saja meski kalian menambahkan banyak sekali komentar, karna komentar tidak akan di proses oleh browser, tugas komentar hanya sebagai penjelas script saja.

Selain tanda # dan //, PHP juga mendukung penggunaan pasangan /* dan */ untuk membentuk komentar multi baris. Contoh:


/*
Ini merupakan komentar
yang panjang melebihi
satu baris
*/


Komentar seperti di atas sangat berguna untuk mematikan sejumlah baris perintah pada script PHP sewaktu melakukan pengembangan program.

Read More

Memulai Dasar Pemrograman Web Dengan PHP

  29 komentar
13.06



Script PHP berkedudukan sebagai tag dalam bahasa HTML, sebagaimana diketahui HTML adalah bahasa standar untuk membuat halaman-halaman web.

Sebagai contoh, berikut adalah kode HTML untuk dasar memulai pemrograman web dengan PHP. Dan jangan lupa untuk menyimpan file nya harus ber-ekstensi (.htm atau bisa juga .html)



<!DOCTYPE html>
  <html>
    <head>
      <title>Latihan Pertama</title>
    </head>
    <body>
      Selamat Belajar Pemrograman Web dengan PHP.
    </body>
  </html>


Dan saat kalian jalankan di browser, akan menjadi seperti gambar dibawah ini hasilnya.



Adapun sisipan PHP ke dalam kode HTML, contohnya lihat kode dibawah ini.


<!DOCTYPE html>
  <html>
    <head>
      <title>Latihan Pertama</title>
    </head>
    <body>
      Selamat Belajar Pemrograman Web dengan PHP.
        <br>
      <?php
        printf ("Tgl. Sekarang: %s ", Date("d F Y"));
      ?>
    </body>
  </html>


Dan hasilnya akan seperti ini.



Catatan: Untuk yang kedua, menyimpan filenya harus ber-ekstensi (.php) dan menjalankanya dengan XAMPP atau Apache, atau mungkin yang lainya, disini saya menggunakan XAMPP.


Kode diatas itulah yang dinakan kode PHP yang tersisip dalam kode HTML, bisa kalian lihat kode PHP di atas yang di awali dengan

<?php


dan di akhiri dengan

?>


Pasangan kedua kode itulah yang berfungsi sebagai tag kode PHP. Berdasarkan tag inilah, pihak server dapat memahami kode PHP dan kemudian akan memprosesnya.

Dan hasilnya dikirim ke browser, dimana yang gunanya untuk menjalankan kode-kode yang kalian deklarasikan.

Konsep Kerja PHP

Model kerja HTML diawali dengan permintaan suatu halaman web oleh browser, berdasarkan URL (Uniform Resource Locator) atau dikenal dengan sebutan alamat Internet.

Browser mendapatkan alamat dari web server, mengidentifikasi halaman yang dikehendaki, dan menyampaikan segala informasi yang dibutuhkan oleh web server.


Catatan: Informasi yang disampaikan ke web server antara lain adalah nama browser, versi, dan sistem operasi.


Selanjutnya, web server akan mencarikan file yang diminta dan memberikan isinya ke web browser (atau yang biasa juga disebut browser saja). Browser yang telah mendapatkan isi dari deklarasian kalian akan segera melakukan proses penerjemahan kode HTML dan menampilkannya ke layar pemakai. Dibawah ini adalah gambar skema HTML.



Catatan: Contoh browser yang bisa kalian gunakan yaitu Internet Explorer, Mozilla Firefox, Opera Browser dan Google Chrome.


Bagaimana halnya kalau yang diminta adalah sebuah halaman PHP?
Prinsipnya serupa dengan kode HTML, hanya saja ketika berkas PHP yang diminta didapatkan oleh web browser isinya akan segera dikirimkan ke mesin PHP dan mesin inilah yang akan memproses dan memberikan hasilnya (berupa kode HTML) ke web server, dan selanjutnya web server akan menyampaikan ke klien.

PHP dan Database

Salah satu kelebihan dari PHP adalah mampu berkomunikasi dengan berbagai database yang terkenal, dengan demikian menampilkan data yang bersifat dinamis.

Yang diambil dari database, merupakan hal yang mudah untuk diimplementasikan, itulah sebabnya sering dikatakan bahwa PHP sangat cocok untuk membangun halaman-halaman web dinamis.

Pada saat ini PHP sudah dapat berkomunikasi dengan berbagai database meskipun dengan kelengkapan yang berbeda-beda, beberapa diantaranya BASE :
  • DBM.
  • FilePro (Personix Inc).
  • Informix.
  • Ingres.
  • InterBase.
  • Microsoft Access.
  • MSQL.
  • MySQL.
  • Oracle.
  • PostgreSQL.
  • Sybase.

Read More

Selasa, 31 Januari 2017

Template Blog Terpopuler APMNews v1.0

  Tidak ada komentar
11.06

Sumber: AMPTemplates



Detail Template
Nama Template : AMPNews
Pengembang : Lagioke
Tanggal Rilis : 4 Desember 2016
Versi : 1.0

AMPNews Blogger Template yang dibuat oleh Lagioke adalah AMP template yang berkualitas untuk para pengguna Blogger.com (Blogspot) website. Tata letaknya yang sederhana namun terlihat indah dan praktis, dan itu pasti akan menarik lebih banyak orang ke blog atau situs web anda dengan kombinasi tepi pemotongan desain material dan kecepatan loading yang sangat cepat dibanding template blog biasanya.

AMPNews HTML Blogger Template, AMPNews merupakan desain ulang yang menakjubkan dari template MDCamp. Versi update ini sangat meningkat dan pengembangnya telah menambahkan dukungan AMP tambahan untuk template ini.

Pembaruan lainnya dapat ditemukan di bagian header, homepage, sidebar, footer, serta perbaikan ArticleBody yang mana menyebabkan masalah pada bagian Pages Ponsel Accelerated di Google Search Console. Berbeda dengan template sebelumnya, AMPNews menggunakan desain bahan untuk template yang membuat memuat cukup cepat. Di samping ini adalah kerangka AMP ini yang dilengkapi dengan super optimasi SEO pos tag, sifat barang valid schema.org dan sepenuhnya valid AMP HTML.

Dengan Template AMP ini, pemula dapat merancang sebuah AMP situs mencengangkan dan cepat valid. Bersiap-siap untuk menjadi ahli AMP semalam, seperti AMP Blogger Template yang sangat user-friendly. Template ini benar-benar responsif dan dapat digunakan untuk website bisnis, pribadi, portofolio atau situs lain yang Anda butuhkan untuk mendapatkan banyak pengunjung. Bagi mereka yang ingin mempelajari lebih lanjut tentang AMP HTML dan template ini, panduan kustomisasi rinci telah ditambahkan di bawah ini.

Fitur dari template AMPNews :


  1. AMP Ready all pages
  2. Fully Responsive
  3. Super SEO Friendly
  4. 3 Column on Homepage
  5. 2 Column on Page
  6. 1 Column on Static Page
  7. Customize AMP Social Share button
  8. Cool drop down menu
  9. Slot ads (iklan) ready
  10. Material Icon
  11. Custom Related Post
  12. dan masih banyak lagi...


Mengubah Template AMPNews ini :

Detail kustomisasi rinci untuk AMP Blogger Template ini dapat ditemukan di blog pengembangnya sendiri yakni di blog Lagioke. Anda akan menemukan tips bagaimana mengubah icon logo dari blog Anda, Verifikasi Situs Google, OpenGraph Facebook dan pengaturan pratinjau Twitter.

Ia juga menjelaskan cara memperbarui ID Google Analytics dalam potongan kode yang sudah terintegrasi. Mudah mengubah isi sidebar dengan mengedit kode AMP di bagian atau Mengganti nama pengguna Disqus untuk bagian komentar. Tapi mulai dengan tips instalasi berikut.



Unduh Template Via
Ukuran file 97,5 KB

Read More

UC Browser (10.10.8.820)

  Tidak ada komentar
10.04



UC Browser
Bagikan Aplikasi Ini
Author
UCWeb Inc.
Version
10.10.8.820
Publish Date
22 - 01 - 2017
Android Requirement
4.0 or Higher
Description :

UC Browser is a mobile browser from Chinese mobile Internet company UCWeb. UCWeb is Firstly launched in April 2004 as a J2ME-only application, it is available on platforms including Android, iOS, Windows Phone, Symbian OS for Nokia, Java ME, and BlackBerry.

With a huge user base in China, India, Indonesia, Pakistan and continued growth in emerging regional markets, UC Browser reached 100 million global users in March 2014. According to StatCounter,UC browser is the second most used smartphone or "mobile" web browser worldwide, passing Safari in the October 2015.

UC Browser is compatible with a number of operating systems, including Android, iOS, Windows, Windows Phone 8, BlackBerry and Symbian. Android represents the largest user-base for the browser, with 300 million of its 500 million total on Google's mobile OS. There are three versions of UC Browser available on Google Play, including UC Browser Mini for Android, UC Browser for Android, and UC Browser HD for Android.

UC browser uses cloud acceleration and data compression technology. UC Browser's servers act as a proxy which compresses the data of web pages before sending it to users. This process helps load web content faster. The browser can adapt to same network environments and support multi-file format downloading. In addition, UC Browser has HTML5 web app and cloud syncing features.


Feature :
  1. Fast and stable navigation, With UC Browser does not have this history of "hang". Navigation a good flowing.
  2. Fast mode, UC Browser compresses data, speeds up navigation and saves precious MBs of your internet package.
  3. ADBlock, With helps from our users, UC Browser adBlock will block out most annoying Ads on Main sites.
  4. Facebook mode, This unique feature speeds up Facebook. No matter the speed of your internet, UC Browser finds a way to increase the speed.
  5. Smart downloading, Our servers speed up and stabilize downloads. In addition, if any dropped connections UC Browser continues downloading from the breakpoint.
  6. Video for all tastes, UC Browser will display any movie and TV series! The menu has categories with videos for all tastes: the humor, the clips, girls, anime, trailers and even war films.
  7. Control video with gestures, Volume, brightness, progress, etc. can all be controlled by gestures in UC Browser.
  8. Night mode, Switch to night mode to read more comfortably at night.

Unduh Via
Ukuran file 17,2 MB

Read More

Mobileuncle MTK Tools (02-02-2016)

  4 komentar
05.13



Mobileuncle MTK Tools
Bagikan Aplikasi Ini
Author
njava
Version
20160202 Final
Publish Date
02 - 02 - 2016
Android Requirement
2.2 or Higher
Description :

Mobileuncle Tools is power tools for MTK android device.

  1. Display device info
  2. Information of device and running status
  3. Easy open engineer mode and MTK engineer mode
  4. Backup IMEI for MTK mobile
  5. Recovery online update
  6. Easy update tool via sdcard
  7. Enable USB Mass Storage Device,connect cable first
  8. Crack operator GPRS lock for MTK
  9. Free the network access limited via GPRS
  10. Power GPS search
  11. Power the gps search satellite ability
  12. Enable AP
  13. Easy reboot to recovery

Unduh Via
Ukuran file 1,2 MB

Read More

Senin, 30 Januari 2017

[Material Design] Custom Button Ripple Effect Dengan CSS dan Javascript

  1 komentar
16.34



Material Design Button Ripple Effect

Contoh yang sudah jadi (klick button untuk lihat effect)


Baiklah akan saya tunjukan bagaimana cara membuat Custom Button seperti Demo di atas, jangan hanya Copy Paste saja loh, kalian juga harus memahami sebisa kalian. Karna disini saya hanya menuliskan kode HTML, CSS dan Javascript nya.

HTML :

  1. Buat folder baru, nama foldernya bebas terserah anda, yang penting buat folder baru dan buka Sublime Text Editor (Terserah anda menggunakan text editor apa saja, disini saya menggunakan Sublime Text).
  2. Setelah buka Text Editornya, Copy HTML di bawah ini, dan Paste ke Text Editor anda
  3. Kemudian Save atau Simpan ke folder yang baru saja kalian buat tadi, dan berinama file nya "index.html".
  4. Lanjut simak bagian CSS dibawah...

<!DOCTYPE html>
<html >
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="description" content="Material Design Button Ripple Effect Snippet">
    <title>Material Design Button Ripple Effect</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class="header">
      <h1 class="title">Material Design Button Ripple Effect</h1>
    </div>
    <div class="container btn-space">
      <a class="ripple red" href="#">Button</a>
      <a class="ripple pink" href="#">Button</a>
      <a class="ripple blue" href="#">Button</a>
      <a class="ripple cyan" href="#">Button</a>
      <a class="ripple teal" href="#">Button</a>
      <a class="ripple yellow" href="#">Button</a>
      <a class="ripple orange" href="#">Button</a>
      <a class="ripple brown" href="#">Button</a>
      <a class="ripple grey" href="#">Button</a>
      <a class="ripple black" href="#">Button</a>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/index.js"></script>
  </body>
</html>


CSS :

  1. Buat folder baru lagi, nama foldernya harus "css" tanpa tanda petik, dan masuk ke text editor lagi.
  2. Setelah buka Text Editornya, Copy CSS di bawah ini, dan Paste ke Text Editor anda
  3. Kemudian Save atau Simpan ke folder bernama "css" yang baru saja kalian buat tadi dan berinama file nya "style.css".
  4. Lanjut simak bagian Javascript dibawah...

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}
.header {
  background-color: #2196F3;padding:55px 0px;text-align:center;margin-bottom: 10px;
}
.header > .title {
  line-height: 48px;
    font-size: 48px;color: #FFF;margin-top: 0px;margin-bottom: 0px;
}
@media only screen and (min-width: 993px) {
    .container {
        width: 85%;
    }
}
@media only screen and (min-width: 993px) {
    .container {
        width: 70%;
    }
}
@media only screen and (min-width: 601px) {
    .container {
        width: 85%;
    }
}
.container {
    margin: 0 auto;
    max-width: 1280px;
    width: 90%;
}
.btn-space{
    text-align: center;
} 
.ripple {
    text-align: center;
    display: inline-block;
    padding: 8px 30px;
    border-radius: 2px;
    letter-spacing: .5px;
    border-radius: 2px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    position: relative;
    z-index: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.ripple:hover {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.ink {
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 100%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
.animate {
    -webkit-animation: ripple 0.55s linear;
    -moz-animation: ripple 0.55s linear;
    -ms-animation: ripple 0.55s linear;
    -o-animation: ripple 0.55s linear;
    animation: ripple 0.55s linear;
}
@-webkit-keyframes ripple {
    100% {
        opacity: 0;
        -webkit-transform: scale(2.5);
    }
}
@-moz-keyframes ripple {
    100% {
        opacity: 0;
        -moz-transform: scale(2.5);
    }
}
@-o-keyframes ripple {
    100% {
        opacity: 0;
        -o-transform: scale(2.5);
    }
}
@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}
.red {
    background-color: #F44336;
}
.pink {
    background-color: #E91E63;
}
.blue {
    background-color: #2196F3;
}
.cyan {
    background-color: #00bcd4;
}
.teal {
    background-color: #009688;
}
.yellow {
    background-color: #FFEB3B;
    color: #000;
}
.orange {
    background-color: #FF9800;
}
.brown {
    background-color: #795548;
}
.grey {
    background-color: #9E9E9E;
}
.black {
    background-color: #000000;
}


Javascript :

  1. Buat folder baru, nama foldernya harus "js" tanpa tanda petik, dan lagi-lagi kalian masuk text editor.
  2. Setelah buka Text Editornya, Copy Javascript di bawah ini, dan Paste ke Text Editor anda
  3. Kemudian Save atau Simpan ke folder "js" yang baru saja kalian buat tadi, dan beri nama file nya "index.js".
  4. Selesai, anda tinggal buka file "index.html" dengan browser anda.

$(function() {
    var ink, d, x, y;
    $(".ripple").click(function(e) {
        if ($(this).find(".ink").length === 0) {
            $(this).prepend("<span class='ink'></span>");
        }
        ink = $(this).find(".ink");
        ink.removeClass("animate");
        if (!ink.height() && !ink.width()) {
            d = Math.max($(this).outerWidth(), $(this).outerHeight());
            ink.css({
                height: d,
                width: d
            });
        }
        x = e.pageX - $(this).offset().left - ink.width() / 2;
        y = e.pageY - $(this).offset().top - ink.height() / 2;
        ink.css({
            top: y + 'px',
            left: x + 'px'
        }).addClass("animate");
    });
});

Terima Kasih telah berkunjung kesini, jangan bosan kesini ya, jika saya tidak punya apa yang anda cari, anda bisa request ke saya melalui chat facebook disini

Read More