Thursday, October 26, 2017

Membuat Tabel Responsive dengan bootstrap

10/26/2017 05:19:00 AM web 1 comment

Hai... Jumpai lagi..
Kali ini saya akan membuat saya membuat tutorial bagaimana cara membuat tabel responsive menggunakan bootstrap pada perangkat yang kecil atau mempunyai ukuran setara atau lebih kecil dari 768px, maka akan terdapat scroll yang secara horizontal.
Dalam pembuatan tabel responsive di bootstrap, ada beberapa class untuk membuat berbagai style atau bentuk pada tabel yang akan dibuat. beberapa perbedaan tabel :

dan dari beberapa class diatas ada juga class untuk mengubah warna setiap kolom dan baris pada tabel. Class ini dapat digunakan sesuai dengan kebutuhan. Untuk dapat lebih memahaminya, anda dapat menerapkan script dibawah ini.

Dalam pembuatan tabel, file bootstrap yang dibutuhkan adalah

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/css/table-responsive.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

script css letakkan setelah <head> dan sebelum </head>
Gimana gan, cukup mudah bukan ?. Semoga bermanfaat !

Cara Show-hide Password menggunakan bootstrap show-password js Plugin

10/26/2017 03:53:00 AM web 2 comments

Ingin melihat password yang anda ketik ? Fasilitas ini memastikan anda untuk mengisi password dengan benar. Anda dapat melihat hasil ketikan password pada form login. Bagaimana cara membuat fasilitas ini ? Jangan khawatir, di tutorial ini saya akan membagikan script gratis yang bisa anda gunakan pada form login.

Coba pelajari layout dan kodenya. Untuk melihat hasil priview silahkan anda isi terlebih dahulu username dan password maka akan terlihat simbol mata. Klik dan tahan simbol ini untuk melihat password yang baru saja anda ketik. Selamat Mencoba.

Script < / > :
=========|

css dan js nya letakkan setelah <head> dan sebelum </head>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>

dan html nya letakkan setelah <body> dan sebelum </body>

<div class="container">
<form>
<div class="form-group">
<label>Username:</label>
<input type="text" name="username" class="form-control">
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="password" name="password" class="form-control" data-toggle="password">
</div>
<div class="form-group">
<button class="btn btn-success">Submit</button>
</div>
</form>
</div>
<script type="text/javascript">
$("#password").password('toggle');
</script>

Semoga berhasil !

Mengkonversi Waktu menjadi waktu lampau

10/25/2017 12:27:00 AM web No comments

Pada sebuah web sangat tidak menarik jika pada tanggal atau waktu posting sebuah artikel atau apalah namanya masih menggunakan tanggal format dari database.

Sangat lebih baik lagi jika artikel yang diposting memiliki sebuah tanggal atau waktu tapi lebih baik lagi jika waktu atau tanggal tersebut di konversikan menjadi waktu lampau kapan artikel itu di posting. Misalnya kita posting artikel seperti saat ini dan beberapa detik atau jam atau mungkin hari, bulan, tahun maka akan menjadi sebuah waktu yang lampau saat artikel tersebut di posting ketika dilihat di waktu yang berbeda.

Oke langsung TKP aja biar simpel dan gak membingungkan,

 
<?php
date_default_timezone_set("Asia/Jakarta");

function datediff($tgl1, $tgl2){
$tgl1 = strtotime($tgl1);
$tgl2 = strtotime($tgl2);
$diff_secs = abs($tgl1 - $tgl2);
$base_year = min(date("Y", $tgl1), date("Y", $tgl2));
$diff = mktime(0, 0, $diff_secs, 1, 1, $base_year);
return array( 
 date("Y", $diff) - $base_year, 
 "months_total" => (date("Y", $diff) - $base_year) * 12 + date("n", $diff) - 1, 
 "months" => date("n", $diff) - 1, 
 "days_total" => floor($diff_secs / (3600 * 24)), 
 "days" => date("j", $diff) - 1, 
 "hours_total" => floor($diff_secs / 3600), 
 "hours" => date("G", $diff), 
 "minutes_total" => floor($diff_secs / 60), 
 "minutes" => (int) date("i", $diff), 
 "seconds_total" => $diff_secs, 
 "seconds" => (int) date("s", $diff) 
);
}
$tgl1 = '2017-10-24 23:39:00';
$tgl2 = date("Y-m-d H:i:s");
$a = datediff($tgl1, $tgl2);
echo 'tanggal 1 = '.$tgl1; echo '
';
echo 'tanggal 2 = '.$tgl2; echo '
';
echo 'Selisih = '.$a['years'].' tahun '.$a['months'].' bulan '.$a['days'].' hari '.$a['hours'].' jam '.$a['minutes'].' menit '.$a['seconds'].' detik';
?>

Kurang lebih script nya seperti itu dan silahkan dicopas lalu dicoba !
itu hanya sesimpel-simpelnya aja gan, untuk lebih bagus nya kembangkan lagi biar sama-sama belajar. Hehehehe...
Semoga Bermanfaat !

Membuat Kotak Galeri

4/29/2017 08:38:00 AM web No comments

HALAMAN khusus galeri, gambar, atau image diperlukan bagi blog toko online untuk menampilkan koleksi produk atau barang jualan.

Web pribadi juga bisa membuat halaman statis berisi galeri atau koleksi gambar pilihan.

Cara membuatnya cukup mudah, dan biasanya masalah yang sering ditemui jika kita memasukkan gambar lebih dari satu, maka posisi gambar tidak akan sejajar horizontal, tapi akan berderet vertikal.

Tutorial kali ini saya akan membagikan solusinya, mau tau ?

copas kode dibawah :



<html>

<head>
<title>Galeri</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}

body {
background: #333;
}

div {
width: 900px;
margin: 0 auto;
overflow: auto;
}

ul {
list-style-type: none;
}

li img {
float: left;
margin: 10px;
border: 5px solid #fff;

-webkit-transition: box-shadow 0.5s ease;
-moz-transition: box-shadow 0.5s ease;
-o-transition: box-shadow 0.5s ease;
-ms-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
}

li img:hover {
-webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9); 
box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
}
-->
</style>
</head>
<body>
<div>
<ul>
<li><img src="150x150.gif"></li>
<li><img src="150x150.gif"></li>
<li><img src="150x150.gif"></li>
<li><img src="150x150.gif"></li>
<li><img src="150x150.gif"></li>
<li><img src="150x150.gif"></li>
<li><img src="150x150.gif"></li>
<li><img src="150x150.gif"></li>
<li><img src="150x150.gif"></li>
<li><img src="150x150.gif"></li>
<li><img src="150x150.gif"></li>
<li><img src="150x150.gif"></li>
<li><img src="150x150.gif"></li>
<li><img src="150x150.gif"></li>
<li><img src="150x150.gif"></li>
</ul>
</div>
</body>
</html>

Jadinya bakal seperti gambar

Semoga Bermanfaat !

Menu Vertikal Dengan Gambar

4/29/2017 08:21:00 AM web No comments

Dalam membangun sebuah web, menu memiliki peran yang sangat penting, selain mempermudah mencari artikel atau info dari sebuah web yang dituju, menu juga berperan mempercantik halaman web.
Disini saya akan membuat menu navigasi vertikal disertai dengan gambar.
kodenya dibawah, langsung copas aja biar cepat, hehehehee...



<html><head>

<title>Menu Dengan Gambar</title>

<style type="text/css">

<!--

* {margin: 0; padding: 0;}


div {

margin: 20px;

}


ul {

list-style-type: none;

width: 500px;

}


h3 {

font: bold 20px/1.5 Helvetica, Verdana, sans-serif;

}


li img {

float: left;

margin: 0 15px 0 0;

}


li p {

font: 200 12px/1.5 Georgia, Times New Roman, serif;

}


li {

padding: 10px;

overflow: auto;

}


li:hover {

background: #eee;

cursor: pointer;

}

-->

</style>

</head>

<body>

<div>

<ul>

<li>

<img src="1.jpg">

<h3>Headline</h3>

<p>Lorem ipsum dolor sit amet...</p>

</li>


<li>

<img src="2.jpg">

<h3>Headline</h3>

<p>Lorem ipsum dolor sit amet...</p>

</li>


<li>

<img src="3.jpg">

<h3>Headline</h3>

<p>Lorem ipsum dolor sit amet...</p>

</li>


<li>

<img src="4.jpg">

<h3>Headline</h3>

<p>Lorem ipsum dolor sit amet...</p>

</li>

</ul>

</div>

</body>

</html>

kalau copasnya benar gambarnya bakal begini nih

OKE.........

DEMO

Membuat Menu Navigasi Vertikal Sederhana

4/29/2017 07:49:00 AM web No comments

Pada sebuah web perlu adanya menu navigasi guna untuk mempermudah user atau pengguna dalam mencari artikel dala halaman web yang dituju, tanpa adanya menu user akan mengalamai kesulitan mendapatkan info atau artikel yang dicari.
Nah, disini saya akan berbagi sedikit tutorial membuat menu navigasi vertikal yang sederhana dan semoga saja bermanfaat bagi agan yang membaca tutorial ini.
kodenya sebagai berikut :



<html><head>

<title>Menu Navigasi Sederhana</title>

<style type="text/css">

<!--

div {

width: 200px;

}


h2 {

font: 400 40px/1.5 Helvetica, Verdana, sans-serif;

margin: 0;

padding: 0;

}


ul {

list-style-type: none;

margin: 0;

padding: 0;

}


li {

font: 200 20px/1.5 Helvetica, Verdana, sans-serif;

border-bottom: 1px solid #ccc;

}


li:last-child {

border: none;

}


li a {

text-decoration: none;

color: #000;

display: block;

width: 200px;


-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;

-moz-transition: font-size 0.3s ease, background-color 0.3s ease;

-o-transition: font-size 0.3s ease, background-color 0.3s ease;

-ms-transition: font-size 0.3s ease, background-color 0.3s ease;

transition: font-size 0.3s ease, background-color 0.3s ease;

}


li a:hover {

font-size: 30px;

background: #f6f6f6;

}


-->

</style>

</head>

<body>

<div>

<h2>Navigasi Vertikal Sederhana</h2>

<ul>

<li><a href="#">Menu 1</a></li>

<li><a href="#">Menu 2</a></li>

<li><a href="#">Menu 3</a></li>

<li><a href="#">Menu 4</a></li>

<li><a href="#">Menu 5</a></li>

</ul>

</div>

</body>

</html>

kalau sudah dicopas dan disimpan dengan benar maka tampilannya akan seperti gambar dibawah :

DEMO

Membuat CardFan Pada Image Dengan CSS

4/13/2017 09:14:00 PM web No comments

Animasi dalam sebuag website itu sangatlah penting untuk membuat content web lebih interaktif , terlebih lagi animasi yang digunakan sangat menarik, misalnya slider, pop up gambar dan juga animasi-animasi lainnya. Tapi, dikesempatan kali ini saya akan berbagi trik membuat cardfan pada gambar, itu seperti membuat latar gambar dibalik gambar. Contoh seperti pada gambar :

Untuk kodingnya tidak terlalu panjang dan ribet, kodingnya dibawah :




<!doctype html>

<html><head>

<title>Cardfan</title>

<style type="text/css">

<!--

#cardfan, #cardfan img { width: 400px; height: 350px; }

#cardfan { margin: 0 auto; }

#cardfan img { border: 32px solid #ffe;

box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2);

position: absolute;

transform-origin: center 300px;

}

#cardfan:hover img:first-child {

transform: rotate(25deg);

}

#cardfan:hover img:last-child {

transform: rotate(âˆ’25deg);

}

-->

</style>

</head>

<body>

<div id="cardfan">

<img src="gambar agan. disini" alt="terserah agan">

<img src="gambara agan disini" alt="terserah agan">

</div>

</body>

</html>

Catatan:
Untuk tulisan berwarna merah ganti dengan nama gambar yang ingin ditampilkan
misalnya, /image/gambar.jpg

Selamat mencoba dan semoga berhasil !

DEMO

Membuat Tabel Keren Dengan Caption

4/12/2017 11:40:00 PM web No comments

Pada tutorial kali ini saya akan membagikan contoh membuat tabel sederhana yang mudah dipahami struktur syntaxnya. Untuk membuat membuat desain tabel ini silahkan ikuti langkah-langkah berikut :

kode CSS :

table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 5px;

        table-layout: auto;

}
caption { background: #444;

          caption-side: top;

          color: #fff;

          font-weight: bold;

          line-height: 1.4;

          margin: 0 5px;

          padding: 15px;

}

caption h2 { font-size: 20px;

             margin: 0 0 10px 0;

}

caption p { font-size: 16px;

            margin: 0;

}

thead th,

tfoot th,

tfoot td { background: #eee;

}

th, td { padding: 10px;

}

thead th:first-child {

  text-align: left;

}

tbody th,

tfoot th { text-align: left;

}

#kuantitas-column { width: 200px;

}

#harga-column { background: #ddd;

}

kode html :

<body>



<table>

  <caption>

    <h2>Tabel Inventarisasi Barang</h2>

    <p>Anda dapat memanfaatkan tabel ini untuk menginventarisasi

       semua barang kebutuhan Anda.</p>

  </caption>

  <colgroup>

    <col id="produk">

    <col id="kuantitas">

    <col id="harga">

    <col id="total">

  </colgroup>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>
</body>

karena css nya tidak banyak sebaiknya diibuat dalam satu file saja agar tidak terlalu banyak membuat file pada directory

untuk kode lengkapnya :

<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<title>Tabel Keren Dengan Caption</title>

<style type="text/css">

<!--

table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 5px;

        table-layout: auto;

}



caption { background: #444;

          caption-side: top;

          color: #fff;

          font-weight: bold;

          line-height: 1.4;

          margin: 0 5px;

          padding: 15px;

}
caption h2 { font-size: 20px;
    margin: 0 0 10px 0;

}
caption p { font-size: 16px;
          margin: 0;

}
thead th,
tfoot th,
tfoot td { background: #eee;
}
th, td { padding: 10px;
}
thead th:first-child {
  text-align: left;
}
tbody th,
tfoot th { text-align: left;
}
#kuantitas-column { width: 200px;
}
#harga-column { background: #ddd;
}
-->

</style>

</head>

<body>

<table>

  <caption>

    <h2>Tabel Inventarisasi Barang</h2>

    <p>Anda dapat memanfaatkan tabel ini untuk menginventarisasi

       semua barang kebutuhan Anda.</p>

  </caption>

  <colgroup>

    <col id="produk">

    <col id="kuantitas">

    <col id="harga">

    <col id="total">

  </colgroup>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>

</body>
</html>

setelah semua telah selesai maka akan menghasilkan tampilan seperti pada gambar

Selamat mencoba dan semoga bermanfaat !

Menampilkan Value Combobox Dengan Javascript

4/11/2017 12:04:00 PM web No comments

Combobox memiliki banyak manfaat salah satunya untuk menampilkan data saat kita klik,
Langsung saja ke koding, dibawah ini :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>
 
<script>
function tampilkan(){
 
  var nama_data=document.getElementById("form1").select1.value;
  var p_kontainer=document.getElementById("container");
 
  if (nama_data=="my web1")
    {
        p_kontainer.innerHTML="Klik untuk melihat <a target='_blank' onclick='new windows' href='http://www.semuaadalahpengetahuan.blogspot.co.id'>My Website</a>";
    }
  else if (nama_data=="my web2")
    {
        p_kontainer.innerHTML="Klik untuk <a target='_blank' href='http://www.semuaadalahpengetahuan.blogspot.co.id'>My Website</a>";
    }
  else if (nama_data=="my web3")
    {
        p_kontainer.innerHTML="Klik disini <a target='_blank' href='http://www.semuaadalahpengetahuan.blogspot.co.id'>My Website</a>";
    }else{
  p_kontainer.innerhtml="";
 }
}
</script>
</head>
<body>
<h2>Menampilkan Hasil Form HTML dengan JavaScript</h2>
 
<form id="form1" name="form1" onsubmit="return false">
  <label for="select1">Pilih : </label>
  <select id="select1" name="select1" onclick="tampilkan()">
 <option value="">Pilih
    <option value="my web1">My Website</option>
    <option value="my web2">My Website</option>
    <option value="my web3">My Website</option>
  </select>
  
</form>
 
<p id="container"></p>
 
</body>
</html>

DEMO

Membuat Form Login Keren Dengan HTML dan CSS

4/11/2017 11:39:00 AM web No comments

Dalam pemebuatan sebuah web perlu form login untuk membedakan user dengan admin, untuk itu perlu form yang keren dan enak dilihat mata serta simple.
langsung saja ke koding css nya sebagai berikut :

<!--
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #404040;
  background: #2d4259;
}

.register-judul {
  width: 270px;
  line-height: 43px;
  margin: 50px auto 20px;
  font-size: 19px;
  font-weight: 500;
  color: white;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  background: #d7604b;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #dc745e, #d45742);
  background-image: -moz-linear-gradient(top, #dc745e, #d45742);
  background-image: -o-linear-gradient(top, #dc745e, #d45742);
  background-image: linear-gradient(to bottom, #dc745e, #d45742);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
}

.register {
  margin: 0 auto;
  width: 230px;
  padding: 20px;
  background: #f4f4f4;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
}

input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.register-masukan {
  display: block;
  width: 100%;
  height: 38px;
  margin-top: 2px;
  font-weight: 500;
  background: none;
  border: 0;
  border-bottom: 1px solid #d8d8d8;
}
.register-masukan:focus {
  border-color: #1e9ce6;
  outline: 0;
}

.register-tombol {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 25px;
  font-size: 16px;
  font-weight: bold;
  color: #494d59;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  background: #fcfcfc;
  border: 1px solid;
  border-color: #d8d8d8 #d1d1d1 #c3c3c3;
  border-radius: 2px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
  -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
}

.register-tombol:active {
  background: #eee;
  border-color: #c3c3c3 #d1d1d1 #d8d8d8;
  background-image: -webkit-linear-gradient(top, #eeeeee, #fcfcfc);
  background-image: -moz-linear-gradient(top, #eeeeee, #fcfcfc);
  background-image: -o-linear-gradient(top, #eeeeee, #fcfcfc);
  background-image: linear-gradient(to bottom, #eeeeee, #fcfcfc);
  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);
}

.register-tombol:focus {
  outline: 0;
}

.register-tukar {
  height: 32px;
  margin-bottom: 15px;
  padding: 4px;
  background: #6db244;
  border-radius: 2px;
  background-image: -webkit-linear-gradient(top, #60a83a, #7dbe52);
  background-image: -moz-linear-gradient(top, #60a83a, #7dbe52);
  background-image: -o-linear-gradient(top, #60a83a, #7dbe52);
  background-image: linear-gradient(to bottom, #60a83a, #7dbe52);
  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);
}

.register-tukar-input {
  display: none;
}

.register-tukar-label {
  float: left;
  width: 50%;
  line-height: 32px;
  color: white;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.register-tukar-input:checked + .register-tukar-label {
  font-weight: 500;
  color: #434248;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  background: white;
  border-radius: 2px;
  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
}

:-moz-placeholder {
  color: #aaa;
  font-weight: 300;
}

::-moz-placeholder {
  color: #aaa;
  font-weight: 300;
  opacity: 1;
}

::-webkit-input-placeholder {
  color: #aaa;
  font-weight: 300;
}

:-ms-input-placeholder {
  color: #aaa;
  font-weight: 300;
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

-->

dan untuk koding htmlnya dibawah ini :

<body>
  <h1 class="register-judul">Selamat Datang</h1>
  <form class="register" action="" method="post">
    <!--div class="register-tukar">
      <input type="radio" name="web" value="GPIB EKKLESIA DUMAI" id="gpib" class="register-tukar-input" checked>
      <label for="gpib" class="register-tukar-label">GPIB</label>
      <input type="radio" name="web" value="APRIL YANTONIUS SIHURA" id="aprilucyanto" class="register-tukar-input">
      <label for="aprilucyanto" class="register-tukar-label">YANTONIUS S.</label>
    </div-->
    <input type="email" class="register-masukan" placeholder="Alamat Email">
    <input type="password" class="register-masukan" placeholder="Password">
    <input type="submit" value="Login" class="register-tombol">
  </form>
</body>

Kalau Untuk kode Lengkapnya :

<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>contoh css 8.1</title>

<style type="text/css">

<!--

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

}



article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

  display: block;

}



body {

  line-height: 1;

}



ol, ul {

  list-style: none;

}



blockquote, q {

  quotes: none;

}



blockquote:before, blockquote:after,

q:before, q:after {

  content: '';

  content: none;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



body {

  font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;

  color: #404040;

  background: #2d4259;

}



.register-judul {

  width: 270px;

  line-height: 43px;

  margin: 50px auto 20px;

  font-size: 19px;

  font-weight: 500;

  color: white;

  color: rgba(255, 255, 255, 0.95);

  text-align: center;

  text-shadow: 0 1px rgba(0, 0, 0, 0.3);

  background: #d7604b;

  border-radius: 3px;

  background-image: -webkit-linear-gradient(top, #dc745e, #d45742);

  background-image: -moz-linear-gradient(top, #dc745e, #d45742);

  background-image: -o-linear-gradient(top, #dc745e, #d45742);

  background-image: linear-gradient(to bottom, #dc745e, #d45742);

  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

}



.register {

  margin: 0 auto;

  width: 230px;

  padding: 20px;

  background: #f4f4f4;

  border-radius: 3px;

  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

}



input {

  font-family: inherit;

  font-size: inherit;

  color: inherit;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



.register-masukan {

  display: block;

  width: 100%;

  height: 38px;

  margin-top: 2px;

  font-weight: 500;

  background: none;

  border: 0;

  border-bottom: 1px solid #d8d8d8;

}

.register-masukan:focus {

  border-color: #1e9ce6;

  outline: 0;

}



.register-tombol {

  display: block;

  width: 100%;

  height: 42px;

  margin-top: 25px;

  font-size: 16px;

  font-weight: bold;

  color: #494d59;

  text-align: center;

  text-shadow: 0 1px rgba(255, 255, 255, 0.5);

  background: #fcfcfc;

  border: 1px solid;

  border-color: #d8d8d8 #d1d1d1 #c3c3c3;

  border-radius: 2px;

  cursor: pointer;

  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);

  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);

  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);

  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);

  -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);

  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);

}



.register-tombol:active {

  background: #eee;

  border-color: #c3c3c3 #d1d1d1 #d8d8d8;

  background-image: -webkit-linear-gradient(top, #eeeeee, #fcfcfc);

  background-image: -moz-linear-gradient(top, #eeeeee, #fcfcfc);

  background-image: -o-linear-gradient(top, #eeeeee, #fcfcfc);

  background-image: linear-gradient(to bottom, #eeeeee, #fcfcfc);

  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);

  box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);

}



.register-tombol:focus {

  outline: 0;

}



.register-tukar {

  height: 32px;

  margin-bottom: 15px;

  padding: 4px;

  background: #6db244;

  border-radius: 2px;

  background-image: -webkit-linear-gradient(top, #60a83a, #7dbe52);

  background-image: -moz-linear-gradient(top, #60a83a, #7dbe52);

  background-image: -o-linear-gradient(top, #60a83a, #7dbe52);

  background-image: linear-gradient(to bottom, #60a83a, #7dbe52);

  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);

  box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);

}



.register-tukar-input {

  display: none;

}



.register-tukar-label {

  float: left;

  width: 50%;

  line-height: 32px;

  color: white;

  text-align: center;

  text-shadow: 0 -1px rgba(0, 0, 0, 0.2);

  cursor: pointer;

}



.register-tukar-input:checked + .register-tukar-label {

  font-weight: 500;

  color: #434248;

  text-shadow: 0 1px rgba(255, 255, 255, 0.5);

  background: white;

  border-radius: 2px;

  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);

  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);

  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);

  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);

  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);

  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);

}



:-moz-placeholder {

  color: #aaa;

  font-weight: 300;

}



::-moz-placeholder {

  color: #aaa;

  font-weight: 300;

  opacity: 1;

}



::-webkit-input-placeholder {

  color: #aaa;

  font-weight: 300;

}



:-ms-input-placeholder {

  color: #aaa;

  font-weight: 300;

}



::-moz-focus-inner {

  border: 0;

  padding: 0;

}



-->

</style>

</head>

<body>

  <h1 class="register-judul">Selamat Datang</h1>

  <form class="register" action="" method="post">

    <!--div class="register-tukar">

      <input type="radio" name="web" value="GPIB EKKLESIA DUMAI" id="gpib" class="register-tukar-input" checked>

      <label for="gpib" class="register-tukar-label">GPIB</label>

      <input type="radio" name="web" value="APRIL YANTONIUS SIHURA" id="aprilucyanto" class="register-tukar-input">

      <label for="aprilucyanto" class="register-tukar-label">YANTONIUS S.</label>

    </div-->

    <input type="email" class="register-masukan" placeholder="Alamat Email">

    <input type="password" class="register-masukan" placeholder="Password">

    <input type="submit" value="Login" class="register-tombol">

  </form>

</body>

</html>

DEMO

Membuat Tabel Keren dengan HTML dan CSS

4/04/2017 07:22:00 PM web No comments

Pada tutorial kali ini saya akan membuat Tabel pada HTML dengan CSS.

Berikut adalah tampilan gambar dari tutorial ini :

Langsung saja elemen css dibawah ini :

<!--

table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 10px 5px;

        table-layout: auto;

        empty-cells: hide;

}

thead th,

tfoot th,

tfoot td { background: #eee;

}

th, td { border: 1px solid #ccc;

         padding: 10px;

}

thead th:first-child {

  text-align: left;

}

tbody th,

tfoot th { text-align: left;

}

tbody tr:nth-child( even ) {

  background: #ddd;

}

-->

dan berikut adalah kode untuk tabel standar :

<table>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>

dan untuk kode lengkapnya :

<html>

<head>

<title>Tabel Keren dengan CSS</title>

<style type="text/css">

<!--

table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 10px 5px;

        table-layout: auto;

        empty-cells: hide;

}



thead th,

tfoot th,

tfoot td { background: #eee;

}



th, td { border: 1px solid #ccc;

         padding: 10px;

}



thead th:first-child {

  text-align: left;

}



tbody th,

tfoot th { text-align: left;

}



tbody tr:nth-child( even ) {

  background: #ddd;

}

-->

</style>

</head>

<body>



<table>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>

</body>

</html>

Membuat Menu Horizontal

2/18/2017 05:17:00 PM web No comments

Cara yang paling sederhana untuk membuat menu horizontal dengan menggunakan list ialah
mengubah properti display dari elemen li menjadi bernilai inline. Dengan mengubah
properti ini, elemen li yang awalnya merupakan block level element akan berubah menjadi inline
level element, dan dapat saling tersusun secara horizontal.

Begitu mengubah nilai properti display menjadi inline, penanda daftar akan langsung hilang,
dan setiap elemen dalam daftar akan saling bergabung. Idealnya, kita harus memberikan jarak
secara manual menggunakan padding ataupun margin.
Kode HTML di bawah:

Dipadukan dengan script CSS berikut :

akan menghasilkan seperti gambar dibawah

Kita dapat memodifikasi sedikit CSS untuk membuat menu menjadi lebih indah
berikut script CSS:

dengan hasil seperti gambar dibawah

semoga bermanfaat !!

DEMO

Cara Membuat Menu Navigasi

2/18/2017 02:34:00 PM web No comments

List sebagia Menu

Membuat sebuah website yang terdiri dari beberapa atau banyak halaman. Untuk mempermudah pengguna dalam melakukan navigasi pada website kita, tentunya kita harus menyediakan menu yang diakses dan dilihat oleh pengguna.
Karena hal tersebut, elemen navigasi merupakan salah satu yang paling penting dan hampir selalu ditemukan dalam sebuah website.

Menu Vertikal Menggunakan List
Sebuah menu dikatakan vertikal jika menu tersebut ditampilkan secara menurun kebawah. Misalkan

Kita dapat mengaplikaskan CSS untuk menggantikan warna latar belakang sari setiap li, kemudian menghilangkan penanda daftar, memberikan lebar yang sama dan berbagai pengukuran lainnya sehingga didapatkan kotak penuh yang menyerupai menu, seperti berikut :

Sehingga kita akan mendapatkan tampilan seperti gambar dibawah

Teks dari menu diatas masih belum selesai, kita perlu menambahkan sedikir kode untuk mengubah teks didalam menjadi terlihat dengan jelas, tidak bergaris bawah, serta memnuhi seluruh blok, scriptnya :

Sehingga hasil akhir dari script menu navigasi diatas seperti gamabar dibawah

Oiya, hampir kelupaan
Unutk membuat menu perlu diingat dalam pembuatan menu ialah bahwa kita harus memberitahukan pengguna dengan mudah dimana menu yang dipilihnya, misal kita dapat merubah warna warna latar dan teks serta menebalkan teks ketika pengguna sedang berada dalam satu halaman. Keberadaan pengguna dapat ditandai dengan sebuah class baru, yang diberikan secara dinamis sesuai dengan halamannya.
script css untuk mendapatkan efek tersebut

hasil yang akan kita dapatkan ,

Semoga bermanfaat !

DEMO

Cara Menghubungkan HTML, PHP dan Database

2/18/2017 01:38:00 PM web No comments

Bingung bagaimana cara menghubungkan database ke html dan php dan database agar web menjadi lebih dinamis. Oke, disini saya akan menuliskan caranya, tapi kalau masih ada yang kurang benar tolong dikoreksi ya, karena saya juga masih belajar hehehehe.....

Berikut langkah-langkahnya :
1. Buat Database dengan nama biodata, nama tabel biodata

2. Buat file baru dengan ekstensi.php. (contoh.php)
3. Isikan kode html pada file yang telah dibuat. Misal

4. Setelah coding html selesai tambahkan script PHP, berikut scriptnya

Silahkan mencoba, semoga bermanfaat !

Cara Upload File PHP dan Database Mysql ke Idhostinger

2/13/2017 01:27:00 AM web No comments

Idhostinger merupakan salah satu solusi untuk menyimpan file web secara online atau lebih sering dikenalh dengan hosting.
File berbasis web yang sudah kita buat pastinya ingin bisa diakses dari berbagai lokasi, tidak terbatas untuk lokal saja misalnya dilaptop atau pc kita. Hosting ini juga bisa dijadikan alat bantu untuk menyimpan database web secara online. Untuk itu pada kesempatan kali ini saya akan mencoba memandu rekan semua untuk mengupload file berbasis web sehingga web tersebut bisa diakses secara online. Berikut ulasannya :

1. Langkah Pertama. Kunjungi official site Idhostinger.com, tentunya rekan harus login terlebih dahulu menggunakan Email dan Password yang sudah di buat di Idhostinger. Apabila belum punya silahkan register terlebih dahulu atau melalui Google+. Jika sudah silahkan login menggunakan email dan password yang sudah dibuat tersebut.

2. Langkah Kedua. Sesudah anda masuk kedalam Control Panel Hosting Idhostinger (Cpanel Hosting). Di dalam navigasi menu. Pilih Hosting kemudian pilih Order Hosting Baru.

3. Langkah Ketiga. Di halaman ini rekan akan dihadapkan dengan 3 jenis paket hosting ada yang Gratis, Premium maupun Bisnis. Seperti yang saya katakan di awal tadi karena tujuannya kita buat belajar dan ngirit pilih paket yang gratis saja. Lalu Klik Order.

4. Langkah keempat. Halaman ini merupakan halaman Setup Hosting diamana anda memilih alamat domain agar nantinya aplikasi anda bisa diakses secara online. Kemudian gunakan subdomain yang sudah tersedia atau bawaan dari Idhostinger. Buat juga password untuk aplikasi web kita. Kemudian kita Pilih Lanjutkan.

Cara Upload File Web dan Database Mysql di Idhostinger

5. Langkah kelima. Di Halaman Ringkasan Order ini ketikkan kode Captcha atau kode verifikasi bukan robot, beserta checklist atau centang tulisan persetujuan kemudian klik Order.

6. Langkah Keenam. Di halaman Akun Hosting ini subdomain yang anda buat tadi sudah selesai dibuat. Klik pada nama subdomain yang kita buat tadi lalu klik tombol kelola. Semisal nama subdomainnya belum muncul coba anda refresh ulang halamannya.

7. Langkah Ketujuh. Anda akan dibawa di halaman Cpanel Hosting dari Subdomain yang dibuat tadi. Scroll ke bawah pada menu Database. Klik tombol Database MySQL untuk membuat nama database, nama user, dan password database. Isikan pada kolom yang tersedia lalu klik Buat. Hingga datanya tergenerate seperti gambar di bawah.

8. Langkah Kedelapan. Masuk Kembali ke halaman Cpanel Hosting dari Subdomain dibuat. Scroll ke bawah pada menu Database. Klik PhpMyAdmin untuk mengupload file database sql kita yang sebelumnya sudah kita buat di local. Jika belum ada database anda juga bisa membuatnya melalui menu tersebut. Tapi disini saya menggunakan cara meng import database yang sudah ada saja. Kemudian tunggu hingga tabel dari database yang kita import masuk ke dalam database servernya cpanel.

Jika proses import database sudah selesai anda bisa kembali lagi ke halaman utama cpanel subdomain anda.

9. Langkah Sembilan. Kembali lagi di halaman Cpanel Hosting dari Subdomain yang dibuat tadi. Jika anda bingung dimana letaknya mungkin gambar ini bisa membantu.

Setelah masuk ke halaman cpanel hosting, scroll ke bawah pada menu File. Kemudian pilih File Manajer 2.

10. Langkah Sepuluh. Kemudian anda klik folder public_html. Dan jika sudah berada di dalam folder public_html silahkan klik upload

11. Langkah Sebelas. Upload file aplikasi web nya dalam bentuk .zip kemudian klik icon centang warna hijau. Jika proses upload sudah selesai klik icon kembali warna biru.

12. Langkah Duabelas. Jika aplikasi menggunakan database sql, klik edit pada directory file koneksi.php anda, sesuaikanlah dengan nama server database, user dan password yang sudah kita buat di langkah B nomor 7 diatas. Kemudian anda klik icon save. Abaikan langkah ini jika aplikasi web anda tidak menggunakan database.

13. Terakhir jangan lupa untuk menghapus file default.php agar aplikasi web yang anda upload bisa dijalankan. Letaknya ada di dalam folder public_html.

Sampai disini anda sudah sukses mengupload begitu pula mengkonfigurasi aplikasi web anda di hosting idhostinger. Akses Aplikasi yang anda menggunakan subdomain yang buat tadi melalui address bar web browser anda.

Semoga dapat bermanfaat bagi rekan - rekan yang membutuhkan.

Selamat mencoba . . . .

Zona Media

Semua adalah Pengetahuan

Thursday, October 26, 2017

Membuat Tabel Responsive dengan bootstrap

Cara Show-hide Password menggunakan bootstrap show-password js Plugin

Wednesday, October 25, 2017

Mengkonversi Waktu menjadi waktu lampau

Saturday, April 29, 2017

Membuat Kotak Galeri

Menu Vertikal Dengan Gambar

Membuat Menu Navigasi Vertikal Sederhana

Thursday, April 13, 2017

Membuat CardFan Pada Image Dengan CSS

Wednesday, April 12, 2017

Membuat Tabel Keren Dengan Caption

Tuesday, April 11, 2017

Menampilkan Value Combobox Dengan Javascript

Membuat Form Login Keren Dengan HTML dan CSS

Tuesday, April 4, 2017

Membuat Tabel Keren dengan HTML dan CSS

Saturday, February 18, 2017

Membuat Menu Horizontal

Cara Membuat Menu Navigasi

Cara Menghubungkan HTML, PHP dan Database

Monday, February 13, 2017

Cara Upload File PHP dan Database Mysql ke Idhostinger

Popular Posts

Blog Archive


	<html> <head>
	<title>Galeri</title>
	<style type="text/css">
	<!--
	* {
	margin: 0;
	padding: 0;
	}

	body {
	background: #333;
	}

	div {
	width: 900px;
	margin: 0 auto;
	overflow: auto;
	}

	ul {
	list-style-type: none;
	}

	li img {
	float: left;
	margin: 10px;
	border: 5px solid #fff;

	-webkit-transition: box-shadow 0.5s ease;
	-moz-transition: box-shadow 0.5s ease;
	-o-transition: box-shadow 0.5s ease;
	-ms-transition: box-shadow 0.5s ease;
	transition: box-shadow 0.5s ease;
	}

	li img:hover {
	-webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
	box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
	}
	-->
	</style>
	</head>
	<body>
	<div>
	<ul>
	<li><img src="150x150.gif"></li>
	<li><img src="150x150.gif"></li>
	<li><img src="150x150.gif"></li>
	<li><img src="150x150.gif"></li>
	<li><img src="150x150.gif"></li>
	<li><img src="150x150.gif"></li>
	<li><img src="150x150.gif"></li>
	<li><img src="150x150.gif"></li>
	<li><img src="150x150.gif"></li>
	<li><img src="150x150.gif"></li>
	<li><img src="150x150.gif"></li>
	<li><img src="150x150.gif"></li>
	<li><img src="150x150.gif"></li>
	<li><img src="150x150.gif"></li>
	<li><img src="150x150.gif"></li>
	</ul>
	</div>
	</body>
	</html>


	<html><head>
	<title>Menu Dengan Gambar</title>
	<style type="text/css">
	<!--
	* {margin: 0; padding: 0;}

	div {
	margin: 20px;
	}

	ul {
	list-style-type: none;
	width: 500px;
	}

	h3 {
	font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
	}

	li img {
	float: left;
	margin: 0 15px 0 0;
	}

	li p {
	font: 200 12px/1.5 Georgia, Times New Roman, serif;
	}

	li {
	padding: 10px;
	overflow: auto;
	}

	li:hover {
	background: #eee;
	cursor: pointer;
	}
	-->
	</style>
	</head>
	<body>
	<div>
	<ul>
	<li>
	<img src="1.jpg">
	<h3>Headline</h3>
	<p>Lorem ipsum dolor sit amet...</p>
	</li>

	<li>
	<img src="2.jpg">
	<h3>Headline</h3>
	<p>Lorem ipsum dolor sit amet...</p>
	</li>

	<li>
	<img src="3.jpg">
	<h3>Headline</h3>
	<p>Lorem ipsum dolor sit amet...</p>
	</li>

	<li>
	<img src="4.jpg">
	<h3>Headline</h3>
	<p>Lorem ipsum dolor sit amet...</p>
	</li>
	</ul>
	</div>
	</body>
	</html>


	<html><head>
	<title>Menu Navigasi Sederhana</title>
	<style type="text/css">
	<!--
	div {
	width: 200px;
	}

	h2 {
	font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
	margin: 0;
	padding: 0;
	}

	ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}

	li {
	font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
	border-bottom: 1px solid #ccc;
	}

	li:last-child {
	border: none;
	}

	li a {
	text-decoration: none;
	color: #000;
	display: block;
	width: 200px;

	-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
	-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
	-o-transition: font-size 0.3s ease, background-color 0.3s ease;
	-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
	transition: font-size 0.3s ease, background-color 0.3s ease;
	}

	li a:hover {
	font-size: 30px;
	background: #f6f6f6;
	}

	-->
	</style>
	</head>
	<body>
	<div>
	<h2>Navigasi Vertikal Sederhana</h2>
	<ul>
	<li><a href="#">Menu 1</a></li>
	<li><a href="#">Menu 2</a></li>
	<li><a href="#">Menu 3</a></li>
	<li><a href="#">Menu 4</a></li>
	<li><a href="#">Menu 5</a></li>
	</ul>
	</div>
	</body>
	</html>