Tuesday, November 22, 2016

cara membuat upload edit gambar dengan php

hy,,guys
Sebelum memulai pengkodean silahkan buat folder didalam htdocs dengan nama upload dan buat 1 folder lagi dengan nama gambar yang akan dibuat untuk menyimban file gambarnya
4. Silahkan buka editor kalian bisa memakai C++ DW dll buatlah page index dan simpan kode dibawah ini diatas kode </head>

CSS DAN JQUERY

<style>
input {width:95%;border:solid 1px #eeeeee;padding:6px 5px;}
input:hover {border:solid 1px #0099FF}
.group { margin:10px;}
.label2{ display:table}
.button {text-align:center;background:#0099FF;color:#ffffff; padding:5px; border:0px; width:100px; cursor:pointer; border: solid 3px #eeeeee;}
.button:hover{border: solid 3px #0099FF;}
.gambar-container { width:980px;margin:auto;}
.gambar-container h3 { text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#999999}
.gambar {float:left;width:190px;height:200px; padding:1px;border: dotted 1px #eeeeee;}
.gambar h3 {text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#333333; margin:0px; padding:4px;}
.gambar img { width:100%;height:170px;}
.img-thumbnail {border: solid 1px #eeeeee; padding:3px; margin:10px;}
#tampil {background:#eeeeee; padding:5px; color:#333333;left:0px;}
.edit{float:left; text-align:center;font-size:14px; color:#fff; font-family:Arial, Helvetica, sans-serif; background:#0066FF; padding:4px; display:block}
.hapus {float:right;text-align:center;font-size:14px; color:#ffffff; font-family:Arial, Helvetica, sans-serif; background:#FF0000; padding:4px; display:block; width:80px;}
a{text-decoration:none;}
.container {width:400px; margin:auto;padding:10px;border:dotted 1px #cccccc;}
</style>
<script language="javascript">
function toggle() {
var ele = document.getElementById("sembunyi");
var gmbr = document.getElementById("gmbr");
var text = document.getElementById("tampil");
if(ele.style.display == "block") {
ele.style.display = "none";
gmbr.style.display = "block";
text.innerHTML = "Change Image";
}
else {
ele.style.display = "block";
gmbr.style.display = "none";
text.innerHTML = "Cancel";
}
}
</script>

5. dan buatlah sebuah koneksi terapkan dipaling atas

PHP

<?php error_reporting(E_ALL ^ (E_NOTICE | E_WARNING));
$host="localhost";
$user="root";
$pass="";
$db="dbupload";//nama database

$koneksi=mysql_connect($host,$user,$pass);
mysql_select_db($db,$koneksi);
if($koneksi){
//echo "Berhasil koneksi";
}else{
echo'KONEKSI GAGAL';// jika koneksi salah
}
?>

6. Buatlah sebuah form seperti dibawah ini
 

lebih lengkapnya form insert dan form edit lihat dibawah ini

HTML / PHP

<?PHP $id=abs((int)$_GET['id']);if($id!= ''){
$sql=mysql_query("select * from tb_upload where id='$id'");
while($post=mysql_fetch_array($sql)){?>
<form name="form1" action="" method="post" enctype="multipart/form-data">
<div class="group">
<label class="label2">Nama Gambar :</label><input type="text" name="nama" value="<?PHP echo $post['nama'];?>" required>
</div>
<div class="group">
<label class="label2">Gambar :</label>
<img id="gmbr" class="img-thumbnail" src="gambar/<?PHP echo $post['gambar'];?>" width="70" height="70"/>
<br>
<span><div id="sembunyi" style="display: none;">
<label for="reg_input_name" class="req">Images</label>
<input name="gambar" type="file" id="gambar" accept="image/*" style="width:65%">
</div><br>
</span>
<span><a id="tampil" href="javascript:toggle();" rel="nofollow">Change Image</a></span>
</div>
<div class="group">
<input name="edituploadgambar" class="button" type="submit" value="UPDATE">
</div>
</form>
<?PHP }} else { ?>
<form name="form1" action="" method="post" enctype="multipart/form-data">
<div class="group">
<label class="label2">Nama Gambar :</label><input type="text" name="nama" required>
</div>
<div class="group">
<label class="label2">Gambar :</label><input name="gambar" type="file" required>
</div>
<div class="group">
<input name="uploadgambar" class="button" type="submit" value="SIMPAN">
</div>
</form><?PHP }?>

7. Sekrang kita mulai membuat script insert gambar dan terapkan diatas form yang baru kita buat tadi

PHP

<?PHP if (isset($_POST['uploadgambar'])) {//// UNTUK MENAMBAH
$nama=strip_tags($_POST['nama']);
$gambar=$_FILES['gambar']['name'];
$tgl=date("h:i:s-j-m-Y");
$fileError = $_FILES['gambar']['error'];
$typeGambar = array('image/bmp', 'image/gif', 'image/jpg', 'image/jpeg', 'image/png');
if(!in_array($_FILES['gambar']['type'],$typeGambar)){
echo' <ecnter>FORMAT GAMBAR SALAH</center>';//gambar sallah
}elseif($fileSize=$_FILES['gambar']['size']< 20000 || $fileError < 20000){
$sql=mysql_query("insert into tb_upload values('','$nama','$gambar')");
$move = move_uploaded_file($_FILES['gambar']['tmp_name'],'gambar/'.$gambar);
if(!$sql)
{ echo '<script language="javascript" type="text/javascript">
alert("upload gambar gagal !");</script>';
echo "<meta http-equiv='refresh' content='0; url=./'>";
} else
{
echo '<script language="javascript" type="text/javascript">
alert("upload gambar berhasil !");</script>';
echo "<meta http-equiv='refresh' content='0; url=./'>";
}
}
}
?>


Perhatikan baik-baik script yang berwarna if (isset($_POST['uploadgambar'])) {, script ini diambil dari nama button bukan nama form.

8. Setelah selai membuat script insert sekarang kita membuat sebuah script Update gambar/edit gambar

PHP

<?PHP if (isset($_POST['edituploadgambar'])) {// UNTUK MENGEDIT
$id=$_GET['id'];
$nama=strip_tags($_POST['nama']);
$gambar=$_FILES['gambar']['name'];
$tgl=date("h:i:s-j-m-Y");
if($gambar == ""){
$edit=mysql_query("UPDATE tb_upload SET nama='$nama' WHERE id='$id'");
if(!$edit-portofolio){ echo '<script language="javascript" type="text/javascript">
alert("edit gambar berhasil !");</script>';
echo "<meta http-equiv='refresh' content='0; url=./'>";
} else
{ echo '<script language="javascript" type="text/javascript">
alert("edit berhasil !");</script>';
echo "<meta http-equiv='refresh' content='0; url=./'>";
}
}
else{
$cari=mysql_query("select * from tb_upload where id='$id'");
$dt=mysql_fetch_array($cari);
$gambar=$dt['gambar'];
$tmpfile = "./gambar/$gambar";

$typeGambar = array('image/bmp', 'image/gif', 'image/jpg', 'image/jpeg', 'image/png');
if(!in_array($_FILES['gambar']['type'],$typeGambar)){
echo' FORMAT GAMBAR SALAH';
}elseif($fileSize=$_FILES['gambar']['size']< 20000 || $fileError < 20000){
unlink ($tmpfile);
$edit2=mysql_query("UPDATE tb_upload SET nama='$nama',gambar='$gambar' WHERE id='$id'");
$move = move_uploaded_file($_FILES['gambar']['tmp_name'],'./gambar/'.$gambar);
if(!$edit2)
{ echo '<script language="javascript" type="text/javascript">
alert("edit gambar gagal !");</script>';
echo "<meta http-equiv='refresh' content='0; url=./'>";
} else
{ echo '<script language="javascript" type="text/javascript">
alert("edit gambar berhasil !");</script>';
echo "<meta http-equiv='refresh' content='0; url=./'>";
}
}
}
}
?>
9. Proses pengerjaan hampir selesai, sekarang kita buat script untuk menghapus data/gambar

PHP

<?PHP $act=$_GET['act'];//UNTUK MENHAPUS
$id=abs((int)$_GET['id']);
if ($act=='del'){
$cari=mysql_query("select * from tb_upload where id='$id'");
$dt=mysql_fetch_array($cari);
$gmbr=$dt['gambar'];
$tmpfile = "./gambar/$gmbr";
$sql=mysql_query("delete from tb_upload where id='$id'");
if(!$sql){
echo '<script language="javascript" type="text/javascript">
alert("delete gambar gagal !");</script>';
echo "<meta http-equiv='refresh' content='0; url=./'>";
}else{
unlink ($tmpfile);
echo '<script language="javascript" type="text/javascript">
alert("delete gambar berhasil !");</script>';
echo "<meta http-equiv='refresh' content='0; url=./'>";
}
}
?>


Perhatikan baik-baik proses penghapusan ini berdasarkan id yang ditemukan dan lihat script unlink ($tmpfile); script ini berfungsi untuk menghapus gambar yang berada didalam direktori gambar

10. Yang terakhir sekarang membuat script untuk menampilkan gambar lihat dibawah ini

HTML DAN PHP

<div class="gambar-container"><h3>GALERY GAMBAR</h3>
<?php $sql=mysql_query("select * from tb_upload order by id desc");$no=0;
while($datapost=mysql_fetch_array($sql)){$no++?>

<div class="gambar"><h3><?PHP echo $datapost ['nama'];?></h3>
<img src="gambar/<?PHP echo $datapost['gambar'];?>"/>
<a class="edit" href="./?id=<?PHP echo $datapost['id'];?>">EDIT GAMBAR</a>
<a class="hapus" href="./?id=<?PHP echo $datapost['id'];?>&act=del">HAPUS</a>
</div>
<?php }?>

Selesai....terimakasih
bila ada yang tidak ngerti dengan tag diatas mohon komentari dibwah ini

Monday, November 21, 2016

Cara Submit Artikel Blog Ke Social Bookmarking

1. Dengan Menggunakan Website Social Bookmarking SocialMarker.
Website ini menyediakan tools untuk mensubmit artikel sobat ke Social Bookmarking secara otomatis. SocialMarker mensubmit artikel blog sobat ke situs berbagi artikel seperti Reddit, Slashdot, Digg dan masih banyak lagi. Berikut adalah list situs berbagi artikel yang ditargetkan oleh SocialMarker.

cara daftar social bookmark

Langsung saja saya jelaskan bagaimana cara memasukkan artikel blog ke Social Bookmarking SocialMarker. Berikut tutorialnya :

Langkah 1 - Buka situs SocialMarker.
Langkah 2 - Disebelah kanan website, terdapat sebuah form, form tersebut harus diisi sesuai dengan artikel mana yang ingin sobat submit ke situs berbagi artikel.

cara mudah social bookmarking

Keterangan :
Title - Isi dengan judul artikel sobat.
Link (URL) - Isi dengan url artikel sobat.
Text - Isi dengan deskripsi artikel sobat.
Tags - Isi dengan kategori artikel sobat membahas tentang apa. (ex : SEO, Blogging)

Langkah 3 - Klik Submit.
Langkah 4 - Akan muncul sebuah form lagi, isi sesuai artikel sobat.

cara perbanyak visitor

Keterangan :
Story Title : Isi dengan judul artikel sobat.
YourScoop : Isi dengan deskripsi artikel sobat.
URL : Isi dengan URL artikel sobat.

Langkah 5 - Klik preview.
Langkah 6 - Akan muncul sebuah captcha, isi dengan benar lalu klik Submit.
Langkah 7 - Selesai. Sobat tinggal menunggu hasil review. kemungkinan besar pasti diterima.

Itulah cara yang saya pakai untuk mensubmit artikel saya di social bookmark. Sebetulnya, masih banyak lagi website Social Bookmark yang bagus. Berikut adalah daftar Social Bookmark Website Yang Berkualitas :
Dalam mensubmit artikel di situs Social Bookmarking, ada beberapa hal yang perlu diperhatikan. Kebanyakan penyebab kurang maksimalnya kerja social bookmarking pada blog kita karen tidak diperhatikan cara yang baik dan benar. Jadi, seperti apa hal yang harus diperhatikan saat mensubmit artikel di Social Bookmarking? Berikut ulasannya:

1. Padatkan kata kunci saat mensubmit artikel, Contohnya, saat sobat memasang judul, pastikan keyword utama yang ditargetkan sobat sudah masuk dan pada kolom tags juga, keyword perlu sobat sertakan.

2. Isi teks deskripsi yang cukup panjang. Hal ini diperlukan juga untuk menarik perhatian pada user Social Bookmarking yang lainnya untuk mengunjungi website sobat. Jika sobat malas menulis deskripsinya, sobat bisa copas kata-kata yang terdapat pada artikel tersebut, namun jika sobat menginginkan hasil yang maksimal, usahakan deskripsi berbeda dengan isi artikel sobat.

Nah, Itulah tutorial singkat saya mengenai cara submit artikel blog ke social blogmarking otomatis. Semoga, artikel ini dapat membantu sobat yang masih kebingungan bagaimana cara submit artikel ke social bookmarking. dan semoga artikel ini bisa jadi referensi para pembaca. Terima kasih.

Sunday, November 20, 2016

menu navigasi melayang untuk bloger

Apakah telah terdapat menu navigasi pada Blog sobat. Perlu diketahui bahwa menu navigasi adalah salah satu bagian penting yang harus sobat terapkan dalam blog sobat. Maka jika dalam blog sobat belum dipasang menu navigasi, saya akan berikan cara membuatnya. Namun untuk kali ini menu navigasi yang akan saya bagikan posisinya melayang (fixed). Jadi akan selalu terdapat di bagian atas pada layar, dan mengikuti ke mana pun layar digulir.

Menu Navigasi Melayang

Kecil kemungkinan tampilan menu navigasi yang saya berikan ini akan cocok dengan tampilan Blog sobat. Jadi sobat harus pintar-pintar lagi dalam mengedit kode CSS yang nanti saya berikan.


Tapi jika dalam Blog sobat telah terdapat menu navigasi, dan sobat ingin membuatnya melayang, sobat tidak perlu membuat menu navigasi baru. Sobat hanya perlu mengubah menu navigasi yang telah ada menjadi melayang. Jadi dengan tidak dibuatnya menu navigasi yang baru, tentunya tampilan menu navigasi yang telah ada akan cocok dengan tampilan Blog sobat.

Cara Membuat Menu Navigasi Baru Dengan Posisi Melayang.

  • Login ke akun Blogger sobat.
  • Masuk ke bagian Template dan klik Edit HTML.
  • Dengan tombol ctrl + F untuk mencari kode ]]></b:skin> dan letakan kode berikut di atas kode ]]></b:skin>.
#top-nav{background:#333;box-shadow:0 1px 3px rgba(0,0,0,0.4);
height:28px;width:100%;min-width:970px;position:fixed;top:0;left:0;
z-index:9999;overflow:hidden;border-bottom:1px solid #000}
#top-nav ul{margin:0 auto;width:970px}
#top-nav ul li{float:left}
#top-nav ul li a{line-height:28px;padding:0 15px;color:#aaa;font-size:13px;
text-shadow:0 -1px 0 #000;display:block;text-decoration:none}
#top-nav ul li a:hover{color:#fff}nav{position:relative;
font:bold 16px Calibri,Arial,Sans-Serif}nav *{margin:0;padding:0;list-style:none}nav ul{background:#0054bb;background:-webkit-linear-gradient(top,#0054BB,#175093);
background:-moz-linear-gradient(top,#0054BB,#175093);background:-ms-linear-gradient(top,#0054BB,#175093);background:-o-linear-gradient(top,#0054BB,#175093);
background:linear-gradient(top,#0054BB,#175093);height:40px;-webkit-box-shadow:inset 0 1px 0 rgba(0,0,0,0.4),inset 0 2px 0 rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0 1px 0 rgba(0,0,0,0.4),inset 0 2px 0 rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4);box-shadow:inset 0 1px 0 rgba(0,0,0,0.4),inset 0 2px 0 rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4)}
nav li{float:left;display:inline}nav li a{padding:0 15px;line-height:40px;color:#111!important;
text-shadow:0 1px 0 rgba(255,255,255,0.3);display:block;text-decoration:none;-webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,0.1),inset -1px 0 0 rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 0 0 rgba(255,255,255,0.1),inset -1px 0 0 rgba(0,0,0,0.1);box-shadow:inset 1px 0 0 rgba(255,255,255,0.1),inset -1px 0 0 rgba(0,0,0,0.1)}
nav li a:hover{background:rgba(0,0,0,0.1)!important}nav li a:active{background:#0054bb;background:-webkit-linear-gradient(bottom,#0054BB,#175093);background:-moz-linear-gradient(bottom,#0054BB,#175093);
background:-ms-linear-gradient(bottom,#0054BB,#175093);background:-o-linear-gradient(bottom,#0054BB,#175093);background:linear-gradient(bottom,#0054BB,#175093)}
nav li ul{display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;-webkit-transition:all .26s ease-out .2s;-moz-transition:all .26s ease-out .2s;-ms-transition:all .26s ease-out .2s;-o-transition:all .26s ease-out .2s;transition:all .26s ease-out .2s}
nav li li{display:block;float:none;width:100%}nav li:hover>ul{visibility:visible;width:200px;opacity:1}nav li li ul{left:200px;margin-top:-40px}nav li.sub>a{position:relative;padding-right:30px}nav li.sub>a:after{content:"";width:0;height:0;border-width:4px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:20px;right:10px}
nav li.sub li.sub>a:after{content:"";width:0;height:0;border-width:4px;border-style:solid;border-color:transparent transparent transparent #eee;position:absolute;top:16px;right:10px}

  • Customize CSS di atas agar tampilan menu navigasi cocok dengan tampilan Blog sobat, terutama warna Background.

Mengetahui kode elemen dan posisi Header pada Blog

  • Masuk ke bagian Tata Letak.
  • Sentuhkan kursor pada tulisan Edit pada Widget Header.
Cara Membuat Menu Navigasi Melayang di Blog
    Widget ID diketahui = Header1
    • Masuk ke bagian Template dan klik Edit HTML.
    • Cari tulisan "Header1" dan diketahui kode elemen Header adalah <div id='header'>.
    Cara Membuat Menu Navigasi Melayang di Blog
    • Cari kode <div id='header'> dan letakan kode berikut di atas kode <div id='header'>
    <div id='top-nav'>
    <ul>
    <li><a href='/' title='Kembali ke Beranda'>Home</a></li>
    <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>
    <li><a href='#'>Menu 6</a></li>
    <li><a href='#'>Menu 7</a></li>
    <li><a href='#'>Menu 8</a></li>
    </ul>
    </div>

    • Ubah # menjadi URL sebuah halaman.
    • Ubah menu 1, menu 2, dengan nama menu yang sobat inginkan.
    • Sobat bisa menambah dan mengurangi menu navigasi dengan menghapus atau menambah kode dari <li>sampai</li>
    Menu navigasi ini akan menghalangi bagian atas blog sepanjang 30px. Jadi sobat harus memberi ruang untuk menu navigasi yang baru sobat buat sepanjang 30px.
    • Cari kode body{} atau kode yang seperti berikut.
    Cara Membuat Menu Navigasi Melayang di Blog
    • Pada elemen wrap, atau elemen yang mewakili tubuh blog, tambahkan kode top:30px;
    • Simpan Template

    Register | Login | Logout Dengan Php

    Saya yakin teman-teman sekalian pasti sudah tahu tentang Register, login, dan logout. Atau
    mungkin juga ada sebagian teman yang belum terlalu paham. Baiklah, Saya akan menjelaskan secara
    singkat saja yah.. Biasanya pada saat kita memasuki sebuah situs, kita diwajibkan untuk login
    terlebih dahulu. Tetapi sebelum login, kita harus mendaftar dulu nama, email, dan password yang
    kita inginkan untuk login nantinya. Baiklah, saya akan langsung menjelaskan scriptnya.
    Dalam contoh kali ini, saya membuat register, login, dan logout dalam 6 buah script.
    Yakni :
    1. Index.php
    2. Config.php
    3. Daftar.php
    4. Daftar2.php
    5. Login.php
    6. Dan logout.php
    Pertama -tama yang harus dilakukan tentu saja adalah membuat database-nya terlebih dahulu.
    Buatlah database dengan nama ?reglog?. Lalu buat table dengan nama ?members?. Lalu masukkan
    field berikut:
    “Id” type = bigint(20)
    “nama” type = varchar(50)
    “email” type = varchar (50)
    “password” type = varchar(8)
    Jika sudah, masukkan script berikut :
    Ini untuk mengkoneksikan dengan database…
    Config.php

    Index.php

    Daftar.php

    Daftar2.php

    Login.php

    Logout.php

    Notes :
    Bila anda berhasil, maka pada saat anda telah mendaftar dan login sebagai nama yang anda daftarkan,
    maka pada halaman index akan tampil nama anda disamping teks welcome