Desain Pemberitahuan Eror dan Sukses

Pesan pemberitahuan yang gagal atau berhasil bisa dibilang sangat penting. Sebab pesan ini untuk memberitahukan kepada user tentang gagal atau berhasilkah suatu program yang dijalankannya. Kita akan membuat sebuah pesan sederhana yang dibuat menggunakan bahasa php dan css.

Untuk kode di phpnya saya memanfaatkan sebuah metode GET dan tag html meta untuk menampilkan sebuah pesan ini.Untuk css seperti biasa saya gunakan untuk desainnya.Lanjut kepemebahasan

Kode HTML

<div id="Pemberitahuan">
<?php $sukses=$_GET['sukses'];
if($sukses=="false"){
?>
<div class="eror">Eror, (Oops, ada kesalahan)</div>
<?}else if($sukses=="true"){?>
<div class="sukses">Sukses, (Selamat datang)</div>
<?}else{echo "";}?>
</div>
<div id="form">
<form action="proses.php" method="Post">
<select name="pesan">
<option value="eror">Tampilkan pesan eror</option>
<option value="sukses">Tampilkan pesan sukses</option>
</select>
<input type="submit" value="Jalankan"/>
</form>
</div>

Keterangan :

Keterangan percabangan

<?php 
$sukses=$_GET['sukses'];
if($sukses=="false"){
?>

Percabangan diatas membaca sebuah URL yang kondisinya sukses = false dan akan mengeksekusi kode dibawah ini.

Eksekusi kondisi sukses = false

<div class="eror">Eror, (Oops, ada kesalahan)</div>

Untuk percabangan selanjutnya sebuah kondisi sukses = true

Percabangan (sukses = true)

<?}else if($sukses=="true"){?>

Dengan sarat diatas akan menampilkan sebuah kode dibawah ini.

Eksekusi kondisi sukses = true

<div class="sukses">
Sukses, (Selamat datang)
</div>

Untuk terahir percabangan yang saratnya selain kondisi true atau false.

Eksekusi kondisi sukses = true

<?}else{echo "";}?>

Dengan kondisi diatas maka hasilnya tidak akan menampilkan apapun.

Berikut pengeksekusian nilai variabel yang dikirim dari sebuah form dengan metode POST.Untuk kode-kode dibawah ini anda bisa mengganti dengan kode anda, sesuai tujuan perogram anda, asalkan kondisi percabangannya seperti dibawah ini.

proses.php

<?php
$pesan=$_POST['pesan'];
if($pesan=="eror"){
    echo "<meta http-equiv='refresh' content='0; URL=index.php?sukses=false'  />";
}
else if($pesan=="sukses")
{
    echo "<meta http-equiv='refresh' content='0; URL=index.php?sukses=true'  />";
}
?>

Keterangan :

$pesan=$_POST['pesan'];

Nilai yang diambil dari form dan akan dibaca pada percabangan dan akan dikirim ketempat pemberitahuan.

if($pesan=="eror"){
    echo "<meta http-equiv='refresh' content='0; URL=index.php?sukses=false'  />";
}

Kode diatas jika kondisi false akan mengeksekusi tag html meta (<meta http-equiv='refresh' content='0; URL=index.php?sukses=false' />).

else if($pesan=="sukses")
{
    echo "<meta http-equiv='refresh' content='0; URL=index.php?sukses=true'  />";
}

Kode diatas jika kondisi true akan mengeksekusi tag html meta (<meta http-equiv='refresh' content='0; URL=index.php?sukses=true' />).

Berikut untuk kode cssnya.

styleing.css

#Pemberitahuan{
    margin-left: auto;
    margin-right: auto;
    width:300px;
    }
#Pemberitahuan .eror{
    border: 1px solid #555555;
    font-weight: bold;
    background: url(eror.png) no-repeat #9B1515;
    background-size: 30px;
    padding:5px 5px 5px 35px;
    color:#fff;
    box-shadow: 0px 3px 5px #4A4949;
    }
#Pemberitahuan .sukses{
    border: 1px solid #555555;
    font-weight: bold;
    background: url(sukses.png) no-repeat #519066;
    color: #fff;
    background-size: 30px;
    padding:5px 5px 5px 35px;
    box-shadow: 0px 3px 5px #4A4949;
    }
#form{
    margin-left: auto;
    margin-right: auto;
    width:300px;
    margin-top: 20px;
    }
#form select{
    color:#555555;
    padding:5px;
    font-weight: bold;
}
#form input[type=submit]{
    color:#555555;
    padding:5px;
    font-weight: bold;
    cursor: pointer;
}
#info{
    margin-left: auto;
    margin-right: auto;
    width:300px;
    margin-top: 20px;
}

Untuk kode css diatas silahkan copy paste. Untuk keterangan kegunaan mohon ditanyakan saja. Soalnya banyak banget tuh kalau diterangin satu-satu.hehehe
Bagi yang ingin mendownload silahkan klik tombol dibawah ini

Baca Selengkapnya »

Menu Drop Down dengan Css v.0.1

Hi teman-teman semua, mari belajar dropdown menu bersama-sama. Kali ini saya memberikan tutorial menu dropdown dengn css. Ada juga menu dropdown ini dibuat menggunakan jquery namun lebih mudah kita membuatnya menggunakan css. Langsung ke pokok pembahasan.
Disini saya menggunakan metode pemanggilan external style sheet. Apa yang dimaksud metode ini? metode ini adalah dimana penulisan kode css disimpan di file pribadi dengan ektensi *.css.
Dan berikut cara pemanggilannya.Pasang kode dibawah ini diantara <head> dan </head>.

Pemanggilan file css

<link href="gayaTutorMenu.css" rel="stylesheet" type="text/css"/>

Selanjutnya pasang kode-kode HTML dibawah ini dan letakkan dimana anda ingin menaruh menu dropdown tersebut.

Kode HTML menu dropdown

<div id="exam_menu">
<div id="tutorMenuDropDown">
Beranda
</div>
<div id="tutorMenuDropDown">link
<div class="dropTMDD">
<a href="http://mmlpro21.blogspot.com/"><div>blog mmlpro21</div></a>
<a href="http://animepeople.twomini.com/"><div>animepeople</div></a>
<a href="http://owlscript.zz.mu/"><div>owlscript</div></a>
</div>
</div>
<div id="tutorMenuDropDown">About
<div class="dropTMDD">
<div>mmlpro21</div>
<div>free all</div>
</div>
</div>
</div>

Buat file css dengan nama gayaTutorMenu. Dan berikut kode cssnya. Anda bisa mengganti nama file cssnya dengan sarat pemanggilan external style sheet tadi juga diganti sesuai nama file css dropdown.

gayaTutorMenu.css

#exam_menu{
    background: #555555;
    border: 1px solid #555555;
    color:#fff;
    width:500px;
    font-family: sans-serif;
    }
#exam_menu #tutorMenuDropDown{
    display: inline-table;
    padding: 5px;
    font-weight: bold;
    }
#exam_menu #tutorMenuDropDown:hover{
    background: #fff;
    cursor: pointer;
    color:#555555;
    }
#tutorMenuDropDown .dropTMDD{
    display: none;
    background:#fff;
    border-right:2px solid #555555;
    border-bottom:2px solid #555555;
    border-left:2px solid #555555;
    margin-top: 5px;
    margin-left:-7px;
    }
#tutorMenuDropDown .dropTMDD a{text-decoration: none;}
#tutorMenuDropDown:hover .dropTMDD{
    z-index:30;
display: block;
position: absolute;
-webkit-border-radius:0px 0px 7px 7px;
-o-border-radius:0px 0px 7px 7px;
-moz-border-radius:0px 0px 7px 7px;
-ms-border-radius:0px 0px 7px 7px;
border-radius:0px 0px 7px 7px;
padding-bottom:5px;
}
#tutorMenuDropDown .dropTMDD div{
    padding:5px;
    font-weight: normal;
    min-width: 120px;
    transition: 1s;
    }
#tutorMenuDropDown .dropTMDD div:hover{
    background: #ccc;
    cursor: pointer;
}

Pembahasan :
A : Mengapa menu jika kita sorotkan oleh mouse dapat muncul menu dibawahnya?
B : itu karena dikode cssnya selector diberi hover.
A : Lantas kenapa menu dropdown dibawahnya bisa muncul dan hilang?
B : Pada selector menu drop akan hilang atau hidden jika kita memberikan propertis display dan valuenya none. Dan kita perintahkan jika disorot diselectornya propertis display dengan value none diganti dengan value block.

Amati contoh dibawah ini :

sorot disini

Ini dia menu dropdown.

Kode HTML

<div id="contohDropdownv01">sorot disini
<div>Ini dia menu dropdown.</div>
</div>

Kode CSS

#contohDropdownv01{
    cursor: pointer;
    border: 1px solid black;
    width:100px;
    }
#contohDropdownv01:hover div{
    display: block;
    cursor: pointer;
    }
#contohDropdownv01 div{
    background:#ccc;
    border:1px solid black;
    display: none;
    position: absolute;
    }

Lihat selector #contohDropdownv01 div. Arti dari kode ini adalah tag Div yang berada di dalam tag berselector #contohDropdownv01 akan mengeksekusi perintah background:#ccc;border:1px solid black;display: none;position: absolute;

• background:#ccc; = warna background pada menu drop.
• border:1px solid black; = garis batas pada menu drop.
• display: none; = kode ini yang membuat menu drop hilang jika tidak tersorot oleh cursor.
• position: absolute; = berposisi absolute.

Lihat pada selector #contohDropdownv01:hover div. Arti dari kode tersebut adalah jika tag yang mengandung selector #contohDropdownv01 disorot maka tag div didalam tag berselector #contohDropdownv01 akan mengeksekusi perintah display: block;cursor: pointer;

• display: block; = kode ini yang membuat menu drop akan muncul.(tidak terhiden lagi oleh display none.)
• cursor: pointer; = mengganti tampilan cursor menjadi bentuk tangan yang menunjuk.

Demikian pembahasan dari saya tentang menu dropdown css, kurang lebihnya mohon maaf. Bagi yang ingin mengunduh filenya, anda bisa klik download dibawah ini.
O iya dimohon jangan copy paste diblog anda, kalau ingin copy mohon diberi referensi.

Baca Selengkapnya »

Belajar Css part1 (Aplikasi android)

Menggunakan android untuk media belajar dan menambah wawasan? ya, kali ini belajar kode segala program bisa dibilang sangat mudah, karena menggunakan android kini sudah banyak aplikasi yang mengajarkan berbagai bahasa program. Nah kali ini saya ikut share kepada siapapun secara free dan selalu free untuk app dari saya.







Untuk yang satu ini saya membuat "Belajar Css part 1".

Isi dari app ini :

1. Sejarah
2. Pengenalan
3. Comment Css
4. Menyisipkan Css
5. Text Css
6. Font Css
7. Border Css
8. Margin
9. Padding

Silahkan anda download di : DOWNLOAD NOW

Baca Selengkapnya »

Membuat Pencarian Menggunakan Ajax dan Php

Hi teman-teman, kali ini saya ingin berbagi kode cara membuat pencarian yang otomatis muncul jika diketik di form pencarian. Munkin bisa dikatakan seperti di facebook. Tau kan facebook? Saya rasa kalian sudah tau.(Sapa sih yang gak kenal sama Om facebook???hehehehe)

Kembali ke pembahasan. Disini saya membuat dengan ajax, php dan css untuk tampilannya.

Seperti biasa kita membuat table databasenya terlebih dahulu. koneksi databasenya buat sendiri ya. Untuk contoh disini saya mengincludekan koneksi.php.

Kode SQL

CREATE TABLE `datamahasiswa` (
  `id_dtamhs` int(11) NOT NULL auto_increment,
  `nama` varchar(50) NOT NULL,
  `alamat` varchar(80) NOT NULL,
  `email` varchar(90) NOT NULL,
  PRIMARY KEY  (`id_dtamhs`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

Keterangan :
Table di atas saya memberikan nama datamahasiswa.

Langkah selanjutnya mari kita buat indexnya.

index.php

<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Boomer" />

<title>search dengan ajax</title>
    <link type="text/css" href="kostumCss.css" rel="stylesheet"/>
    <script type="text/javascript" src="ajax-pencarian.js"></script>
</head>

<body>
<div id="headerSdAEXP">
<div class="classHeadSdAEXP">
<b>mmlpro21 : Search tutorial</b><?include "cari.php";?>
</div>
</div>

</body>
</html>

Keterangan :
<link type="text/css" href="kostumCss.css" rel="stylesheet"/>
Kode diatas ini untuk pemanggilan cssnya.
<script type="text/javascript" src="ajax-pencarian.js"></script>
Kode di atas ini untuk pemanggilan ajaxnya.

Selanjutnya pembuatan form

cari.php

<div id="kotakCariSdAEXP">
<form method="GET" action="#">
<input type="text" id="cari" placeholder="Pencarian ..." onkeyup="cariAjax(this.value)"/>
</form>
</div>
<div id="myDivHasilCari"></div>

Keterangan :
onkeyup="cariAjax(this.value)"
Kode diatas untuk pemanggilan function diajaxnya.
Yang tadinya name sekarang menggunakan id saja.

eksekusi_pencarian.php

<?php include "koneksi.php";
$cari=$_GET['cari'];
$pencarian=mysql_query("SELECT * FROM datamahasiswa WHERE nama like '%$cari%' ORDER BY id_dtamhs DESC");
$jum_cari=mysql_num_rows($pencarian);
    if($jum_cari==0){echo "
    <div class='kotakHasilEksekusi'>
    Hasil pencarian tidak ditemukan...
    </div>";}
    else{
    echo "<div class='infoCari'>Ditemukan : <b>$jum_cari</b> data mahasiswa.Dengan kata kunci $cari.</div>";
while($p=mysql_fetch_array($pencarian)){
?>
<div class="kotakHasilEksekusi">
<div><?echo "$p[nama]";?></div>
<div><?echo "$p[alamat]";?></div>
<div><?echo "$p[email]";?></div>
</div>
<?}}?>

Keterangan :
include "koneksi.php";
Kode diatas ini ganti dengan kode koneksi ke database anda.
Where nama bisa anda ganti berdasarkan pencarian yang ingin di cari, misal alamat, atau email.

ajax-pencarian.js

function cariAjax(str)
{
var xmlhttp;
if (str=="")
  {
  document.getElementById("myDivHasilCari").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// kode untuk IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// kode untuk IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDivHasilCari").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","eksekusi_pencarian.php?cari="+str,true);
xmlhttp.send();
}

Terahir kita membuat tampilannya biar lebih bagus dengan css.

kostumCss.css

body{background: #fff;margin: 0;padding: 0;font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;font-size: 12px;color:#555555;} #headerSdAEXP{width:100%;background: #eb5200;} .classHeadSdAEXP{background: #eb5200;width:970px;margin-left: auto;margin-right: auto;padding:5px;} .classHeadSdAEXP b{display: inline-block; margin-right: 10px;color:#fff;} #kotakCariSdAEXP{width:300px;display: inline-block;} #kotakCariSdAEXP input[type=text]{border:1px solid #fff;width:90%;padding-left:26px;padding-bottom:5px;padding-right:5px;padding-top:5px;background: url(iconcari.png)no-repeat #fff;background-size: 20px;background-position: 5px;} #myDivHasilCari{position: absolute;background: #fff;margin-top:5px;margin-left: 175px;box-shadow: 0px 3px 5px #555555;} .kotakHasilEksekusi{width:400px;padding:5px;} .kotakHasilEksekusi div{display: inline-block;padding:5px;border-right: 1px #ccc solid;min-width:100px;background: #f7f7f7;} .infoCari{padding:5px;margin-bottom: 10px;} .infoCari b{color:#555555;}

Gimana teman-teman?cukup mudah bukan?? Jika ada yang belum dimengerti ditanyakan saja.
Bagi master-master kalau ingin menambahkan juga boleh.hehehe
Sekian pembahasan hari ini. Kurang lebihnya mohon dimaafkan. Semoga bermanfaat.

Bagi yang ingin mendownload silahkan klik di bawah ini :




Salam hangat

mmlpro21

Baca Selengkapnya »

Cara membuat Login, Daftar, dan Logout dengan Php

Dalam suatu website tentu saja pasti terdapat sebuah form login untuk member ataupun admin.

kali ini saya akan memberikan kode login,daftar dan logout. Saya kasih juga sessionnya.

Buat tampilan mohon buat sendiri.hehehe. Disini saya membuatnya yang sederhana saja.

Pertama kalian sudah harus membuat table databasenya yha..Semisal kita buat nama table user seperti pada gambar dibawah ini.

kode table

CREATE TABLE `user` (
  `id_user` int(11) NOT NULL auto_increment,
  `nama_user` varchar(50) NOT NULL,
  `email` varchar(80) NOT NULL,
  `password` varchar(80) NOT NULL,
  PRIMARY KEY  (`id_user`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Nama field bisa anda tambahkan atau edit sesuai yang dimau.asal nanti nyambung antara database dengan form-formnya.
Setelah itu kita buat form daftarnya.

O iya buat tambahan jika kamu belum membuat koneksi ke database. Buat folder untuk tempat setelah user login. Saya memberikan contoh dengan nama folder user. Masukkan koneksi di dalam folder tersebut. Berikut kode koneksi ke database :

koneksi.php

<?php
$h="localhost";
$u="root";
$p="root";
$db="myblog";
$cdb=mysql_connect($h,$u,$p);
if(!$db)
die ("connected eror");
if(!mysql_select_db("$db",$cdb))
die("database eror");
?>

$db sesuaikan dengan nama databasenya kalian sendiri.dan juga $p

Nah sekarang kita buat form daftar.

daftar.php

<form action="simpandaftar.php" method="POST">
<input type="text" placeholder="Nama" name="nama_user"/><br />
<input type="text" placeholder="Email" name="email"/><br />
<input type="password" placeholder="Password" name="password"/><br />
<input type="submit" value="Mendaftar"/>
</form>

action adalah alamat tempat exsekusi pendaftaran.method adalah jenis pengiriman variabelnya.

simpandaftar.php

<?php include "user/koneksi.php";
$nama_user=$_POST['nama_user'];
    $email=$_POST['email'];
    $konvert_pass=$_POST['password'];
    $enkrip=md5($konvert_pass);

$lihat_user=mysql_query("SELECT * FROM `user` WHERE email='$email' ");
$lu=mysql_num_rows($lihat_user);
if($lu==0)
{                                      
    $mendaftar=mysql_query("INSERT INTO `user` (id_user,nama_user,email,password)
    VALUES('','$nama_user','$email','$enkrip') ");
    if(!$mendaftar){
        echo "tidak bisa memasukkan data.";
    }
    else
    {
       echo "<html><head><meta http-equiv='refresh' content='0;url=login.php'></head><body></body></html>";
       //kode di atas jika user berhasil mendaftar akan dilarikan ke login.php...
    }
}
else
{
    echo "Email yang anda masukkan sudah dipakai.";
}
mysql_close($cdb);
?>

logika diatas user yang mendaftar akan di cek dahulu,apakah email sudah ada di table user. Jika sudah ada akan menampilkan email yang anda masukkan sudah di pakai. kalau belum akan di insert pada table user.
Saya sengaja pada password tidak saya perintahkan untuk mengisi ulang password karna biar mudah untuk dipahami.

Langkah selanjutnya buat login.

login.php

<form action="cek_login.php" method="POST">
<input type="text" placeholder="Email" name="email"/><br />
<input type="password" placeholder="Password" name="password"/><br />
<input type="submit" value="Login"/>
</form>

action ke cek_login.php untuk eksekusi user apakah di table user terdapat email dan password yang dimasukkan. Jika tidak ada tidak akan bisa masuk.

cek_login.php

<? include "user/koneksi.php";
session_start();

if(isset($_POST['email']) AND isset($_POST['password'])){
    $username = addslashes($_POST['email']);
    $password = addslashes($_POST['password']);
    $enkrip=md5($password);          
    $check    = mysql_query('select * from user where email="'.$username.'" AND password="'.$enkrip.'" ');
    if(mysql_num_rows($check)==0){
        echo 'email atau password Salah ! Mohon cek.';
    }
    else{
        $_SESSION['login']['email'] = $username;
        $_SESSION['login']['password'] = $enkrip;
        echo "<html><head><meta http-equiv='refresh' content='0;url=user/index.php'></head><body></body></html>";
       //kode di atas jika user berhasil mendaftar akan dilarikan ke folder user, file index.php...
    }
}
?>

Berikutnya, Buat cek user dengan session. Ini yang dimaksud session. Dengan kode ini kita bisa menuliskan sapa yang login tersebut.. Simpan dalam folder user yang dibuat tadi.

cek_user.php

<?php
session_start();
//cek jika user tidak login akan dialihkan ke halaman login...
if(!isset($_SESSION['login']['email'])){
header("location:../login.php");
exit();
}
?>

Next code... buat index pada folder user yang dibuat tadi.

index.php

<? session_start(); ?>
<?php include "cek_user.php"; ?>
<html>
<head>
<title>belajar membuat login, daftar, logout</title>
</head>
<body>
<?include "koneksi.php";
$user=mysql_query("SELECT * FROM user where email='".$_SESSION['login']['email']."'");
$u=mysql_fetch_array($user);?>

Selamat datang : <b><?echo "$u[nama_user]";?></b><br /><br />
Silahkan <a href="logout.php">logout</a>

</body>
</html>

Di atas tag <html> itu adalah sessionnya dan untuk cek user yang sedang login. Setiap file di dalam folder user dikasih kode seperti itu.Agar dapat terbaca data usernya yang sedang login.Misal nama, email seperti itu bisa di tampilkan.

Terahir ne,hehehe buat logoutnya.dimana agar bisa menghapus data disession. Simpan didalam folder user.

logout

<?
session_start();
unset($_SESSION['login']['email']);
session_destroy();

echo "<head><meta http-equiv='refresh' content='0;url=../index.php'></head><body></body>";
?>

Tambahan :
buat yang tidak tau kode bagian ini ../index.php   itu maksudnya index yang diluar folder.
tadi kan file logout didalam folder user kan.nah setelah klik logout akan dilarikan ke index yang diluar folder user.

Nah gimana ne teman-teman, silahkan mencoba.Semoga bermanfaat.Jika ingin ditanyakan tulis komentar kamu dibawah ini..
Kurang lebihnya mohon maaf.

Klik download untuk unduh filenya :

Baca Selengkapnya »

Membuat Tombol dengan Css

Tombol merupakan kebutuhan disuatu website, di setiap website atau blog pasti terdapat tombol entah satu ataupun dua... Nah kali ini saya ingin berbagi cara membuat tombol menggunakan css, dengan cara ini sangatlah mudah dan akan terkesan bagus tinggal kreatifitas anda.

Contoh tombol pertama :

Kode Html

<input id="myButtonSatu" type="submit" value="Download"/>

Disini saya mengambil input sebagai tagnya. Anda bisa saja memakai button atau div,dan sebagainya. Tinggal kemauan anda.

Kode Css

#myButtonSatu{
color:black;
font-weight:bold;
border:1px solid #eb5230;
box-shadow: 0px 3px 5px #555555;
cursor: pointer;
 -webkit-border-radius:10px 10px 10px 10px;
-o-border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-ms-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
/* backCOlor */
  background-color: #eb5200;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eb5200), to(#fff));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #fff, #eb5200);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #fff, #eb5200);

  /* IE 10 */
  background: -ms-linear-gradient(top, #fff, #eb5200);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #fff, #eb5200);
}
#myButtonSatu:hover{box-shadow: 0px 2px 3px #555555;}

Contoh Tombol Kedua :

Kode Html

<button id="myButtonDuaDemo">Demo</button>
<button id="myButtonDuaDownload">Download</button>

Kode Css

#myButtonDuaDemo{
color:black; font-weight:bold;
border:1px solid #eb5230;
box-shadow: 0px 3px 5px #555555; cursor: pointer;
-webkit-border-radius:10px 0px 0px 10px;
-o-border-radius:10px 0px 0px 10px;
-moz-border-radius:10px 0px 0px 10px;
-ms-border-radius:10px 0px 0px 10px;
border-radius:10px 0px 0px 10px;
/* backCOlor */
  background-color: #eb5200;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eb5200), to(#fff));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #fff, #eb5200);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #fff, #eb5200);

  /* IE 10 */
  background: -ms-linear-gradient(top, #fff, #eb5200);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #fff, #eb5200);}
#myButtonDuaDemo:hover{box-shadow: 0px 2px 5px #555555; background: #eb5200;}

#myButtonDuaDownload{
margin-left:-1px;
color:black;
font-weight:bold;
border:1px solid #eb5230;
box-shadow: 0px 3px 5px #555555;
cursor: pointer;
-webkit-border-radius:0px 10px 10px 0px;
-o-border-radius:0px 10px 10px 0px;
-moz-border-radius:0px 10px 10px 0px;
-ms-border-radius:0px 10px 10px 0px;
border-radius:0px 10px 10px 0px;
/* fallback */
  background-color: #eb5200;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eb5200), to(#fff));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #fff, #eb5200);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #fff, #eb5200);

  /* IE 10 */
  background: -ms-linear-gradient(top, #fff, #eb5200);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #fff, #eb5200);}
#myButtonDuaDownload:hover{box-shadow: 0px 2px 5px #555555; background: #eb5200;}

Contoh Tombol ke tiga :

Kode Html

<button id="myButtonTiga">Read more</button>

Kode Css

#myButtonTiga{
background:#f7f7f7;
color:#555555;
text-shadow:3px 3px 5px #ccc;
font-weight:bold;
border:1px solid #ccc;
cursor: pointer;
padding:5px;
}
 #myButtonTiga:hover{
background:#eb5200;
color:#fff;
text-shadow:3px 3px 5px #555555;
box-shadow: 0px 3px 5px #555555;
border:1px solid #eb5200;}

Keterangan :
Seperti di posting sebelumnya border-radius itu yang membuat tombol bisa melengkung. Semakin besar pixel atau persen ukurannya semakin melengkung.
Hover yang terdapat di dalam kode css itu adalah jika tombol itu disorot oleh mouse maka akan terjadi seperti yang diperintahkan di kode setelah hover

Gimana teman-teman?cukup mudah bukan?
Sekian pembuatan tombol dengan css ini.Kurang lebihnya mohon maaf. Semoga bermanfaat dan jika ada yang kurang jelas silahkan ditanyakan.

Baca Selengkapnya »

Konversi Bilangan Integer ke Rupiah dengan Php

Hi brother,Posting kedua saya ingin berbagi kode tentang cara merubah bilangan integer ke bentuk rupiah.

Kali ini kita menggunakan bahasa program php.

Disini saya mengambil sebuah bilangan  integer 20000. Jika kamu ingin mengganti bilangannya ganti saya pada angka 20000 tersebut.

Berikut kodenya :

Kode Php

<?php
function buatrp($angka)
{
 $hasilKonversi = "Rp " . number_format($angka,2,',','.');
echo "$hasilKonversi";
}
?>
<? $angkaInteger=20000; echo buatrp($angkaInteger);?>

Bilangan integer dari 20000 akan menjadi Rp 20.000,00 Nah, gimana teman-teman semua?cukup mudah bukan?Semoga bermanfaat.

Baca Selengkapnya »

Mempercantik Tampilan Gambar Dengan Css

Hai teman-teman semua, di posting pertama ini saya memberikan beberapa koding mempercantik gambar dengan css. Saya memberikan sedikit kode dan mungkin kalian bisa menambahkan kode sesuai keinginan kamu.Berikut kodenya :

Contoh 1 :

Kode Html

<div id="myDivExpFotoSatu">
<img src="gambarmu.jpg"/>
</div>

Kode Css

#myDivExpFotoSatu img{width:100px;border: 1px solid #ccc;padding:5px;}

Keterangan :
width : 100px; adalah panjang gambar.
border:1px solid #ccc; adalah lebar garis 1px, type garis solid, warna #ccc
padding : 5px; adalah lebar dalam border 5px.

Contoh 2 :

Kode Html

<div id="myDivExpFotoDua">
<img src="gambarmu.jpg"/>
</div>

Kode Css

#myDivExpFotoDua img{width:100px;border: 1px solid #ccc;padding:5px;-webkit-border-radius:20px 20px 20px 20px;-moz-border-radius:20px 20px 20px 20px;-o-border-radius:20px 20px 20px 20px;-ms-border-radius:20px 20px 20px 20px;border-radius:20px 20px 20px 20px;}

Keterangan :
border-radius:20px 20px 20px; adalah bergaris lengkung seperti di gambar.
-webkit-, -o-, -ms-, -moz- adalah jenis-jenis browser agar dapat menampilkan seperti yang diperintahkan di border-radius..

Contoh 3 :

Kode Html

<div id="myDivExpFotoTiga">
<img src="gambarmu.jpg"/>
</div>

Kode Css

#myDivExpFotoTiga{width:112px;}
#myDivExpFotoTiga img{width:100px;border: 1px solid #ccc;padding:5px;
-webkit-border-radius:50% 50% 50% 50%;-moz-border-radius:50% 50% 50% 50%;-o-border-radius:50% 50% 50% 50%;-ms-border-radius:50% 50% 50% 50%;border-radius:50% 50% 50% 50%;
}

Untuk contoh ketiga pada dasarnya sama hanya pada border radius di ganti 50%.tapi jangan lupa kotak luar diatur panjang lebarnya agar lingkaran gambar seimbang.


Demikian tutorial mempercantik tampilan gambar dengan css.
Terimakasih sudah membaca.
Mohon tulis komentarmu.

Baca Selengkapnya »

Tentang Saya

Nama : Michael Maryon Langitan
Tgl Lahir : 13 Juli 1990
Alamat : Seneng,Siraman,Wonosari,Gunungkidul,DI.Yogyakarta
Hoby : Bermain script kode program sampai lupa waktu.hehehe


Pendidikan :

• TK : Masitoh Seneng
• SD : SD N Siraman 1
• SMP : SMP N 2 Wonosari
• SMK : SMK Ma'arif (TI : Rekayasa Perangkat Lunak)
• Perguruan tinggi : STMIK AMIKOM Yogyakarta

Cita-cita :

Menjadi Programmer bersejarah..hehehe (Semua berawal dari mimpi dan tinggal kita yang mengambil sikap kedepannya.)

Terimakasih sudah membaca biodata saya

Salam hangat :

   mmlpro21

Baca Selengkapnya »