Selasa, 25 Februari 2014

Tutorial Dasar PHP : Membuat Aplikasi CRUD Sederhana Dengan PHP

Dalam memmbuat sebuah program berbasis web, hal yang paling penting dan paling utama untuk dikuasai adalah membuat aplikasi CRUD (CREATE, READ, UPDATE dan DELETE). Nah untuk kesempatan kali ini saya akan membahas bagaimana cara membuat aplikasi CRUD, Dalam tutorial ini saya sudah menganggap para pembaca paham dan mengerti cara penggunaan aplikasi XAMPP dan membuat database di phpmyadmin. Okayy langsung aja ke tutorialnya, berikut langkah langkahnya :

1. Buatlah sebuah database dengan nama data_warga kemudian buat sebuah tabel beri nama database_warga dengan ketentuan sebagai berikut :

 id = int(11) auto increment
nama = varchar(50)
status = varchar(50)
pekerjaan = varchar(50)
umur = varchar(50)

2. Langkah selanjutnya adalah buka notepad kesayangan anda dan buat sebuah file bar lalu tulis kode berikut ini :

<?php
$host = "localhost" ;
$user = "" ;
$pass = "" ;
$db = "data_warga" ;
mysql_connect ($host, $user, $pss) ;
mysql_select_db ($db) ;
?>

kemudian simpan file dengan nama koneksi.php.

3.  Langkah selanjutnya adalah membuat file baru yang fungsnya menginput data ke dalam database, buka notepad anda dan buat file lalu tulis kode berikut ini :


<!DOCTYPE html>
<head><title>Form Input Data</title>
<body>
<center>
<h1>FORM INPUT DATA</h1>
<form method="post" action="simpandata.php">
<table>
<tr>
<td>Nama</td><td> : </td><td><input type="text" name="nama" required/></td></tr>
<tr>
<td>Status</td><td> : </td><td><input type="text" name="status" required/></td></tr>
<tr>
<td>Pekerjaan</td><td> : </td><td><input type="text" name="pekerjaan" required/></td></tr>
<tr>
<td>Umur</td><td> : </td><td><input type="text" name="umur" required/></td></tr>
</table>
<br>
<input type="submit" value="Simpan"> <input type="reset" value="Reset"> <input type="button" value="Back" onclick="top.location='index.php'" />
<br>
</form>
</center>
</body>
</html>

Lalu simpan file dengan nama inputdata.php.

4. Sesuai dengan form input data yang telah kita buat tahap selanjutnya adalah membuat file baru, buka notepad anda lagi lalu tulis script berikut ini dan simpan file dengan nama simpandata.php.


<?php
include "koneksi.php" ;

$simpan = "insert into database_warga set nama='$_POST[nama]' , status='$_POST[status]' , pekerjaan='$_POST[pekerjaan]' , umur='$_POST[umur]' " ;

mysql_query ($simpan) ;

header ('location:inputdata.php') ;

?>

5. Tahap selanjutnya adalah menampilkan data yang telah kita inputkan, buat lagi file baru lalu uliskan kode berikut ini :

<!DOCTYPE html>
<head><title>Tampil Data</title>
<body>
<center>
<h1>DATA WARGA</h1>
<table border='1'>
<tr>
<td>No</td>
<td>Nama</td>
<td>Status</td>
<td>Pekerjaan</td>
<td>Umur</td>
<td>Pilihan</td>
</tr>
<?php
include "koneksi.php" ;

$sql = "select * from database_warga order by id" ;
$query = mysql_query($sql) ;
$no = 1 ;
while ($data=mysql_fetch_array($query)) { ?>
<tr>
<td><?php echo $no++ ; ?></td>
<td><?php echo $data['nama'] ; ?></td>
<td><?php echo $data['status'] ; ?></td>
<td><?php echo $data['pekerjaan'] ; ?></td>
<td><?php echo $data['umur'] ; ?></td>
<td><a href="editdata.php?id=<?php echo $data['id'] ; ?>">Edit</a> | <a href="hapusdata.php?id=<?php echo $data['id'] ; ?>">Hapus</a></td>
</tr>
<?php } ?>
</table>
<br>
 <input type="button" value="Input Data" onclick="top.location='inputdata.php'" />
</center>
</body>
</html>

lau simpan dengan nama index.php.

6. Untuk mengedit data kita butuh sebuah file, okay langsung saja buat sebuah file baru beri nama editdata.php lalu tulis script berikut ini :

<!DOCTYPE html>
<head><title>Form Edit Data</title>
<body>
<center>
<h1>FORM EDIT DATA</h1>
<form method="post" action="updatedata.php">
<table>
<tr>
<?php
include "koneksi.php" ;
$sql = "select * from database_warga where id='$_GET[id]' " ;
$query = mysql_query ($sql) ;
$data = mysql_fetch_array ($query) ;
?>
<input type="hidden" name="id" value="<?php echo $data['id'] ; ?>">
<td>Nama</td><td> : </td><td><input type="text" name="nama" value="<?php echo $data['nama'] ; ?>" required/></td></tr>
<tr>
<td>Status</td><td> : </td><td><input type="text" name="status" value="<?php echo $data['status'] ; ?>" required/></td></tr>
<tr>
<td>Pekerjaan</td><td> : </td><td><input type="text" name="pekerjaan" value="<?php echo $data['pekerjaan'] ; ?>" required/></td></tr>
<tr>
<td>Umur</td><td> : </td><td><input type="text" value="<?php echo $data['umur'] ; ?>" name="umur" required/></td></tr>
</table>
<br>
<input type="submit" value="Simpan"> <input type="reset" value="Reset"> <input type="button" value="Back" onclick="top.location='index.php'" />
<br>
</form>
</center>
</body>
</html>

7. Langkah selanjutnya adalah membuat file updatedata.php yang fungsinya adalah mengupdate data yang telah kita edit, buat sebuah file baru beri nama updatedata.php lalu tulis kode berikut ini :

<?php
include "koneksi.php" ;

$update = "update database_warga set nama='$_POST[nama]' , status='$_POST[status]' , pekerjaan='$_POST[pekerjaan]' , umur='$_POST[umur]' where id ='$_POST[id]' " ;

mysql_query($update) ;

header ('location:index.php') ;
?>

8. Langkah terakhir adalah membuat file delete.php yang fungsinya untuk menghapus data yang telah kita inputkan, tulis kode berikut lalu simpan file dengan nama delete.php :

<?php
include "koneksi.php" ;

$delete = "delete from database_warga where id='$_GET[id]' " ;

mysql_query($delete) ;

header ('location:index.php') ;
?>

9. Selamat mencoba, kini giliran anda untuk mengembangkannya,,,,,,!

Hargailah karya orang lain dengan menyertakan link sumber saat COPAS....!

Salam
Harley Daoelay

Sabtu, 22 Februari 2014

Tutorial Blog : Memasang Kotak Komentar Facebook Di Blog



Mungkin kamu sering berselancar di blog orang lain dan menemukan kotak komentar facebook pada blog tersebut, Nah untuk kali ini kita akan membahas bagaimana caranya Memasang komentar facebook pada Blog, berikut langkah - langkahnya :

1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Tekan Ctrl F dan cari kode ]]></b:skin>
4. Taruh kode berikut di atas ]]></b:skin>


.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px;cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;} 

 5. Kemudian cari kode </head>
6. Taruh kode berikut tepat di atas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content=' ID FACEBOOK ANDA' property='fb:admins'/> <script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();}
</script>


7. Ganti tulisan warna merah dengan ID sendiri (facebook.com/IDfacebook)
8. Kemudian cari kode <div class='comments' id='comments'>
9. Kamu akan menemukan 2 kode yang sama. Letakkan kode di bawah ini tepat di bawah 2 kode tersebut

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div><div class='clear'/></div><div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/><fb:comments expr:href='data:post.url' num_posts='5' width='450'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'>


10. 5 adalah banyaknya komentar yang ditampilkan dan 450 adalah lebar kotak komentar facebook.
11. Simpan Template dan lihat perubahannya...!


Sekian tutorial tentang Membuat kotak komentar facebook di blog semoga bermanfaat.


source : http://xpress-community.blogspot.com/2013/08/membuat-kotak-komentar-facebook-dan.html

Belajar Dasar HTML : Kode Warna HTML




#000000 #300007 #300000 #300700
#0F0F0F #60001F #600000 #601F00
#272727 #900037 #900000 #903700
#3F3F3F #C0004F #C00000 #C04F00
#575757 #F00067 F00000 #F06700
#6F6F6F #FF007F FF0000 #FF7F00
#878787 #FF3097 #FF3030 #FF9730
#9F9F9F #FF60AF #FF6060 #FFAF60
#B7B7B7 #FF90C7 #FF9090 #FFC790
#CFCFCF #FFC0DF #FFC0C0 #FFDFC0
#E7E7E7 #FFF0F7 #FFF0F0 #FFF7F0

#003007 #003000 #073000 #303000
#00601F #006000 #1F6000 #606000
#009037 #009000 #379000 #909000
#00C04F #00C000 #4FC000 #C0C000
#00F067 #00F000 #67F000 #F0F000
#00FF7F #00FF00 #7FFF00 #FFFF00
#30FF97 #30FF30 #97FF30 #FFFF30
#60FFaF #60FF60 #aFFF60 #FFFF60
#90FFC7 #90FF90 #C7FF90 #FFFF90
#C0FFdF #C0FFC0 #dFFFC0 #FFFFC0
#F0FFF7 #F0FFF0 #F7FFF0 #FFFFF0

#070030 #000030 #000730 #003030
#1F0060 #000060 #001F60 #006060
#370090 #000090 #003790 #009090
#4F00C0 #0000C0 #004FC0 #00C0C0
#6700F0 #0000F0 #0067F0 #00F0F0
#7F00FF #0000FF #007FFF #00FFFF
#9730FF #3030FF #3097FF #30FFFF
#aF60FF #6060FF #60aFFF #60FFFF
#C790FF #9090FF #90C7FF #90FFFF
#dFC0FF #C0C0FF #C0dFFF #C0FFFF
#F7F0FF #F0F0FF #F0F7FF #F0FFFF