mmlpro21: Februari 2014

Rabu, 26 Februari 2014

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

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

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 »

Senin, 24 Februari 2014

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

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.

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 »

Minggu, 23 Februari 2014

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

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

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 »

Sabtu, 22 Februari 2014

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

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

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

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 »

Jumat, 21 Februari 2014

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 »