Tampilkan postingan dengan label Tutorial PHP. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial PHP. Tampilkan semua postingan

Jumat, 03 Januari 2020

MEMBUAT GAMBAR BERPUTAR KETIKA MOUSE DIARAHKAN DENGAN CSS

Langsung aja yaa... Berikut kode CSS nya untuk membuat gambar atau foto diblog maupun website berputar ketika mouse diarahkan :


img:hover {
-o-transform:scale(1.2) rotate(360deg) translate(0px);
-moz-transform:scale(1.2) rotate(360deg) translate(0px);
-webkit-transform:scale(1.2) rotate(360deg) translate(0px);
-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;
-webkit-transition:all 1.5s ease ;
}

Khusus untuk pengguna Blogger silhakan paste kan kode berikut sebelum kode
]]>< /b:skin>

.post img:hover {
-o-transform:scale(1.2) rotate(360deg) translate(0px);
-moz-transform:scale(1.2) rotate(360deg) translate(0px);
-webkit-transform:scale(1.2) rotate(360deg) translate(0px);
-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;
-webkit-transition:all 1.5s ease ;
}



Hasilnya kira-kira seperti ini :





Terima kasih sudah menyempatkan diri untuk berkunjung, sekali lagi untuk kritik dan saran silahkan di komentar yaa.... :)



MEMBUAT MENU DROPDOWN SEDERHANA DENGAN CSS



OK Fren... Langsung Aja yaa, Ketikkan kode berikut untuk Menunya :




Untuk mempercantik tampilannya silahkan gunaa kode CSS berikut :


/*Top level items ---------------------------------------*/
 #cssmenu >ul>li>span, #cssmenu >ul>li>a
 {
 font-size:18px;
 color:inherit;
 text-decoration:none;
 padding:10px 10px;
 font-weight:400;
 text-transform:uppercase;
 letter-spacing:2px;
 display:block;
 position:relative;
 transition:all 0.3s;
 vertical-align : bottom ;
 }

 #cssmenu li:hover > span, #cssmenu li:hover > a
 {
 color:#FFFFFF;
 background-color:#77A6F7;
 cursor : pointer ;
 border-radius : 3px ;
 }

 /*Sub level items ---------------------------------------*/
 #cssmenu .dropdown
 {
 text-align:left; left:0;
 letter-spacing:1px;
 font-size : 13px ;
 color: #222222;
 background-color:#FFFFFF;
 border:none; position:absolute;
 box-shadow: 0 2px 8px #CDCDCD ;
 display:none; opacity:0; cursor:pointer;
 }

 #cssmenu .dropdown li
{
 display: block;
 border-bottom : 0px #cdcdcd inset ;
 }

 #cssmenu .dropdown li > span, #cssmenu .dropdown li > a, #cssmenu .clm a, #cssmenu .clm h3
 {
 font-size:13px;
 font-weight:400;
 font-family:inherit;
 margin:0;
 padding:8px 10px;
 display:block;
 color:inherit;
 text-decoration:none;
 }

 #cssmenu .clm h3 {
 font-size:20px; font-weight:700;
 }

 #cssmenu .sub-item
{
 background-color:#FFFFFF;
 position:relative; transition:all 0.3s;
 }

 #cssmenu .dropdown li:hover
 {
 color:#FFFFFF;
 background-color:#77A6F7;
 cursor : pointer ;
 }

 #cssmenu .dropdown li:hover > span, #cssmenu .dropdown li:hover > a
 {
 color:#FFFFFF;
 background-color:#77A6F7;
 cursor : pointer ;
 }

 #cssmenu .clm a:hover
 {
 color:#000000; transition:color 0.2s;
 }

 #cssmenu .dropdown.right0
{
left:auto;right:0;
}

 #cssmenu .dropdown li > .dropdown.right0 {left:auto;right:100%20;} #cssmenu li.full-width{ position:static; } #cssmenu li.full-width .dropdown{ width:100%20; left:0; box-sizing:border-box; } #cssmenu li:hover > .dropdown { display:block; opacity:1; z-index:1; } #cssmenu .dropdown li > .dropdown { left:100%20; right:auto; top:0; } #cssmenu ul.dropdown { min-width:240px; /* Sub level menu min width */ } #cssmenu div.dropdown { text-align:center; } /* each column */ #cssmenu .clm { text-align:left; margin:20px; vertical-align:top;/*or middle*/ width:auto; min-width:240px; display:inline-block; *display:inline;*zoom:1; } #cssmenu .clm a:hover { color:#000000; text-decoration:underline; } /*-----------Arrows----------------*/ #cssmenu .arrow { color:inherit; border-style:solid; border-width:2px 2px 0 0; padding:5px; transform:rotate(135deg);margin-top:-10px;margin-left:5px; position:relative; display: inline-block; width: 0; height: 0; vertical-align:middle; overflow:hidden;/*for IE6*/ } #cssmenu .dropdown .arrow { transform:rotate(45deg); top:50%20;margin-top:-7px; position:absolute;left:auto;right:20px; } @keyframes topItemAnimation{ from {opacity: 0; transform:translate3d(-16%20, 0, 0);} to {opacity: 1; transform:translate3d(0, 0, 0);} } #cssmenu li a {animation:none;} #cssmenu.active li a { animation: topItemAnimation 0.5s ease 0.5s backwards;} #cssmenu.active li:nth-of-type(1) a { animation: topItemAnimation 0.5s ease 0.08333333333333333s backwards;} #cssmenu.active li:nth-of-type(2) a { animation: topItemAnimation 0.5s ease 0.16666666666666666s backwards;} #cssmenu.active li:nth-of-type(3) a { animation: topItemAnimation 0.5s ease 0.25s backwards;} #cssmenu.active li:nth-of-type(4) a { animation: topItemAnimation 0.5s ease 0.3333333333333333s backwards;} #cssmenu.active li:nth-of-type(5) a { animation: topItemAnimation 0.5s ease 0.4166666666666667s backwards;}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #cssmenu.active li a{animation:none!important;}}


Maka hasilnya akan tampak seperti berikut :





Ok Fren, demikian tutorial kali ini semoga bermanfaat buat fren-fren sekalian, jangan lupa kritik dan saran ya melalui komentar dan Kalo Mau copas silahkan aja tapi mohon sertakan link sumber.
Terima Kasih







Sabtu, 05 April 2014

Cara Memeriksa Page Rank Website



Periksa HALAMAN RANK halaman situs Web Dengan Sekejab.  
Untuk memeriksa PageRank dari sebuah situs web, halaman web atau nama domain, silahkan masukkan URL dari situs web, halaman web atau nama domain pada form di bawah ini dan klik "Periksa PR".




Check Page Rank of your Web site pages instantly:
Masukkan url yang akan di cek page rank nya, kemudian klik tombol "Check PR".
Okay,,, Sekian dulu ya.....!


Sumber : Google

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