Membuat Image PopUp 2

script ini saya buat untuk menampilkan image popup disini saya menggunakan html,css dan jquery.berikut scriptnya


<!DOCTYPE HTML>
<html lang="en-US">
 <head>
 <meta charset="utf-8"/>
 <meta name="author" content="Albar"/>
 <style type="text/css">
 body,div,img{
 margin:0;
 padding:0;
 }
 div.canvas{
 position:relative;
 width:580px;
 height:auto;
 background-color:#333;
 margin:100px auto 0;
 }
 div.canvas img{
 margin:20px;
 width :80px;
 height:100px;
 padding:10px;
 background-color:rgba(153,153,153,0.5);
 }
 div.canvas img:hover{
 cursor:pointer;
 -webkit-transform:scale(2,2);
 -webkit-transition:all 1s;
 -moz-transform:scale(2,2);
 -moz-transition:all 1s;
 -ms-transform:scale(2,2);
 -o-transform:scale(2,2);
 -o-transition:all 1s;
 }
 .mask{
 background-color:black;
 width:580px;
 position:absolute;
 opacity:0.6;
 display:none;
 }
 div.canvas2{
 display: none;
 z-index:50;
 position:fixed;
 top:12%;
 padding:10px;
 height:auto;
 background-color: rgba(153,153,153,0.8);
 }
 div.canvas2 img{
 margin:0 auto;
 z-index:600;
 }
 div.canvas2 span.close{
 background-image: url("../gambar/close.png");
 background-repeat:no-repeat;
 width:32px;
 height:32px;
 position:absolute;
 cursor:pointer;
 z-index:100;
 }
 .bdy{

 background-color:gray;
 opacity: 0.8;
 /* for IE */
 filter:alpha(opacity=5);

 }
 </style>
 <script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>
 <script type="text/javascript">
 <!--
 window.onload=function(){
 var tinggiCanvas=$('.canvas').height();// mendapatkan tinggi canvas
 var offSet=$('.canvas').offset();// mendapatkan posisi canvas dari document
 $('.canvas2').css("left",Math.round(offSet.left))
 // menggunakan round method untuk membulatkan hasil
 $('.mask').height(tinggiCanvas)
 $('img',$('.canvas')).click(function(){
 var gambar=$(this).attr("src")
 $('#slide').attr("src",gambar)
 $("body").addClass("bdy")
 $(".mask").show('slow')
 $(".canvas2").fadeIn('slow')
 })
 $(".close",$(".canvas2")).bind("click",function(){
 $("body").removeClass("bdy")
 $(".mask").hide('slow')
 $(".canvas2").fadeOut('slow')
 })
 }
 // -->
 </script>
 </head>

<body>
 <div class="canvas2"><span class="close" title="close"></span><img id="slide"/></div>
 <div class="canvas">
 <div class="mask"></div>
 <img src="gambar/gambar7.png"/>
 <img src="gambar/gambar2.png"/>
 <img src="gambar/gambar3.jpg"/>
 <img src="gambar/gambar4.png"/>
 <img src="gambar/gambar5.png"/>
 <img src="gambar/gambar6.png"/>
 <img src="gambar/gambar8.jpg"/>
 <img src="gambar/gambar9.jpg"/>
 </div>
 </body>
</html>

output

Ketika image di sorot

 

 

 

 

 

 

 

 

Ketika image di klik

Membuat Image PopUp

Ok kali ini saya membuat script untuk image pop up langsung saja ya,disini saya menggunakan HTML,CSS,dan Jquery

berikut scriptnya


<!DOCTYPE HTML>
<html lang="en-US">
<!-- Program Name : Image PopUp-->
<!-- Program By   : Mohamad Albar -->

 <head>
 <meta charset="utf-8">
 <style type="text/css">
 p,img,a{
 margin:0;
 padding:0;
 }
 p{
 color:black;
 font-size:20px;
 }
 .thumbinal span{
 border:1px solid black;
 padding:10px 10px 30px;
 background-color:rgba(122,122,122,0.2);
 }
 .thumbinal span{
 position: absolute;
 display: none;
 left:70px;
 top:-20px;
 }
 .thumbinal{
 position: relative;
 }

 </style>
 <!-- Load Jquery -->
 <script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>
 <script type="text/javascript">
 <!--
 $(function(){
 var has=new Array();
 /* Fix Z-index IE Only */
 var zIndexNumber = 1000;
 $(".thumbinal").each(function() {
 $(this).css('zIndex', zIndexNumber);
 zIndexNumber -= 10;
 });
 /* Browser Detect */
 var browserVer=navigator.appName;
 if(browserVer=='Microsoft Internet Explorer'){
 $('.thumbinal span').css("top","50px")
 }
 /* mendapatkan attribut alt untuk setiap image lalu simpan di variable array*/
 $('.thumbinal>img').each(function(index){
 has[index]=$(this).attr("alt");
 });
 /* mengisi tag p dengan nilai attr alt di atas*/
 $('span',$('.thumbinal')).each(function(index){
 $(this).children('p').html(has[index])
 });
 /* Event ketika gambar di hover */
 $('.thumbinal').hover(
 function(){
 $(this).children('span').fadeIn('slow')
 },
 function(){
 $(this).children('span').fadeOut('slow')
 }
 )
 });
 // -->
 </script>
 </head>

<body>
 <a href="#" class="thumbinal">
 <img src="gambar/gambar1.jpg" width="150px" alt="Gambar1"/>
 <span><img src="gambar/gambar1.jpg"/><p></p></span>
 </a>
 <a href="#" class="thumbinal">
 <img src="gambar/gambar2.png" width="150px" alt="Gambar2"/>
 <span><img src="gambar/gambar2.png"/><p></p></span>
 </a>
 <a href="#" class="thumbinal">
 <img src="gambar/gambar3.jpg" width="150px" alt="Gambar3"/>
 <span><img src="gambar/gambar3.jpg"/><p></p></span>
 </a>
</html>

Simpan di folder mana saja kasih nama dengan ekstensi (.html)

Output

Install Conky Di Ubuntu 12.04

Assalamu’alaikum ,selamat pagi kali ini saya akan mengajarkan kepada anda cara installasi dan configure conky pada ubuntu 12.04.conky apa itu conku conky ?adalah system monitor yang menampilkan semua informasi pada desktop anda seperti Clock,CPU usage,RAM usage,Swap,net dll.ada banyak thema yang tersedia untuk chonky .salah satu nya Conky-Lua .Conky-Lua ini tersedia untuk Ubuntu,Mint,Suse,Fedora dan Debian Kali ini saya akan menggunakan theme conky-lua untuk tampilan chonky

– ok pertama install conky

sudo apt-get install conky-all

– selanjutnya

Download Conky-Lua disini

– setelah itu masuklah ke folder Download extract file conky yang tadi di download dengan cara click kanan extract here

 

 

 

 

 

 

 

 

setelah di ekstract hasilnya berupa folder dengan nama Conky-lua

-Masuk ke folder Conky-lua(hasil ekstract-kan tadi) d idalamnya terdapat thema conky-lua untuk berbagai distro

 

 

 

 

 

 

 

 

dalam kasus ini saya menggunakan ubuntu 12.04 maka kita ekstact thtme conky-lua untuk ubuntu .

 

 

 

 

 

 

 

setelah di ekstract akan menghasilkan folder Conky ubuntu-lua seperti gambar di atas

-setelah itu masuk ke folde Conky ubuntu-lua  disitu ada 3 file  clock_rings.lua,conkyrc,new-ubuntu-logo.png

 

 

 

 

 

 

 

 

-setelah itu pindahkan fike conkyrc pada folder Conky ubuntu-lua ke diterktori /home lalu ganti/rename menjadi .conkyrc ,lalu tekan ctrl+h untuk melihat file yang di hide  karena file/folder yang diawawli titik(.) akan di hide

– setelah itu buat folder .conky di direktori /home lalu copy file clock_rings.lua dan new-ubuntu-logo.png di folder Conky ubuntu-lua ke direktori .conky yang ada di /home.

 

 

 

 

 

 

 

 

– Langkah selanjutnya buka file .conkyrc(yang tadi sudah diindahkan) pada direktori /home ,menggunakan text editor anda ,cari kata-kata ini


~/.lua/scripts/clock_rings.lua

Ganti menjadi


~/.conky/clock_rings.lua

 

 

 

 

 

 

 

 

 

-save file tersebut .buka terminal ketik conky 


albar@albar-AXIOO-C14:~$ conky

maka hasilnya akan seperti berikut

 

 

 

 

 

 

 

Tambahan

untuk menjalankan conky secara autostart  caranya

-buka teks editor/gedit ketikkan

#!/bin/bash
sleep 5 && conky

jadi conky akan dijalankan setiap lima detik setelah login.Save dengan nama .conky_start.sh taruh file tersebut dimana saja terserah kalo saya saya letakkan di direktori /home.lalu klik kanan file .conky_start.sh properties->permission->beri tanda centang Allow executing  file as program

-lalu cari startup application pada dash home ,klik Add pada Name isi dengan Conky lalu pada Command isi dengan /home/albar/.conky_start.sh(tempat kita menaruh file .conky_start.sh)

Ok selesai deh install conky nya 😀 semoga bermanfaat

Aplikasi Vote

Setelah mikir-mikir “mau bikin aplikasi apalagi ya” . akhirnya saya buat aplikasi vote dengan grafik gambar.Berikut file-file nya appvote.php,functionvote.php.Oh ia saya sudah kasih penjelasan dengan menambahkan komentar,jika masih kurang jelas bisa tinggalkan komentar :).Jika masih kurang puas anda bisa modifikasi script dibawah

appvote.php


<?php
include 'functionvote.php';
?>
<html>
<head>
<style>
#box{
width:400px;
height:350px;
background-color:#333;
margin:0 auto;
padding-top:5px;
padding-left:5px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#box form.vote{
position:relative;
top:10px;
}
#box form.vote label{
color:#eee;
}
#box h2{
color:#CC6600;
}
#box p{
color:#eee;
}
#hasil{
 position: relative;
 top:80px;
}
#hasil div img{
 position: relative;
 top:5px;
}
div#hasil div span:first-child{
 float:left;
 width:100px;
}
</style>
</head>
<body>
<div id="box">
<h2>Form Voting</h2>
<p>Apa Bahasa Pemrograman Web Yang anda Suka?</p>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>" class="vote" >
<input type="radio" name="vote" value="php"/><label>PHP</label><br/>
<input type="radio" name="vote" value="html"/><label>HTML</label><br/>
<input type="radio" name="vote" value="javascript"/><label>Javascript</label><br/>
<input type="radio" name="vote" value="css"/><label>CSS</label><br/><br/>
<input type="submit" name="sub" value="Submit" />
</form>
</div>
<?php if(isset($_POST['sub']) && $_POST['sub']=="Submit"){
 $file=$_POST['vote'];
 vote($file);
 // berikut saya gunakan operator ternary
 @$php=(file_exists('php.txt'))?file("php.txt"):'0';// jika file sudah ada maka isi variable $php dengan nilai dari data dalam file,jika tidak isi variable dengan 0
 @$css=(file_exists('css.txt'))?file("css.txt"):'0';
 @$html=(file_exists('html.txt'))?file("html.txt"):'0';
 @$js=(file_exists('javascript.txt'))?file("javascript.txt"):'0';
 ?>
<div id="hasil">
<h2>Hasil Vote</h2>
 <div><span>PHP&nbsp;&raquo;&nbsp;</span><img src="php.jpg" width="<?php echo $php[0] ?>" height="20px"/>&nbsp;<span><?php echo $php[0] ?>%</span></div>
 <div><span>CSS&nbsp;&raquo;&nbsp;</span><img src="css.jpg" width="<?php echo $css[0] ?>" height="20px"/>&nbsp;<span><?php echo $css[0] ?>%</span></div>
 <div><span>HTML&nbsp;&raquo;&nbsp;</span><img src="html.jpg" width="<?php echo $html[0] ?>" height="20px"/>&nbsp;<span><?php echo $html[0] ?>%</span></div>
 <div><span>Javascript&nbsp;&raquo;&nbsp;</span><img src="js.jpg" width="<?php echo $js[0] ?>" height="20px"/>&nbsp;<span><?php echo $js[0] ?>%</span></div>
</div>
<?php
}
?>
</body>
</html>

functionvote.php


<?php
#############################
 /* Function Vote */
#############################
function vote($value){
 $data=array("php.txt"=>"php","css.txt"=>"css","html.txt"=>"html","javascript.txt"=>"javascript");// siapkan data2 file.simpan di dalam array
 $hasil=array_keys($data,$value);// ambil array yang mempunyai nilai $value.dimana nilai dari $value dikirim lewat parameter
 $file=strval($hasil[0]);// ubah type data dari array jadi string

 if(!file_exists($file)){// jika file belum ada
 $fp=fopen($file,'w+');// maka buat file.ini karena mode w+
 fwrite($fp,'1');// masukkan nilai awal 1 kedalam file
 }
 else{// jika file sudah ada
 $tambah=file($file);// ambil data di dalam file
 $tambah[0]++;// setelah diambil tambahkan nilainya
 $fp=fopen($file,'w+');// setelah itu buka file
 fwrite($fp,$tambah[0]);// ganti data lama dengan data baru ,yaitu $tambah[0]
 }
 fclose($fp);// tutup file
}
?>

OUTPUT


Aplikasi Login

hhe sudah lama saya tidak posting.sekarang saya akan memberikan script untuk aplikasi login.silahkan anda pelajari dan modifikasi script tersebut hhe

pertama buatlah database dengan struktur seperti berikut


+----------+-------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+----------+-------------+------+-----+---------+----------------+
| id | int(11) | NO | PRI | NULL | auto_increment |
| username | varchar(40) | NO | | NULL | |
| password | varchar(10) | NO | | NULL | |
+----------+-------------+------+-----+---------+----------------+
3 rows in set (0.03 sec)

karena kita hanya ingin membuat login user jadi coba insert kan data,terserah anda
untuk mengetes aplikasi login yang kita buat.
seperti berikut

</pre>
mysql> insert into login (username,password) values("admin","admin");
Query OK, 1 row affected (0.04 sec)

mysql> select * from login;
+----+----------+----------+
| id | username | password |
+----+----------+----------+
| 1 | admin | admin |
+----+----------+----------+
1 row in set (0.00 sec)
<pre>

kedua.di bagian ini saya membuat 3 script

  • aplikasilogin.php=>form login untuk user
  • functionlog.php =>Fungsi-fungsi proses login
  • admin.php=>halaman admin jika sukses login
aplikasilogin.php

</pre>
</div>
<div>
<?php
session_start();// memulai session
include_once 'functionlog.php';// memanggil halaman functionlog.php
if(!isset($_SESSION['nm'])){// jika belum dibentuk $_SESSION
?>
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function popUp(){
 var a;
 a=alert("Login Gagal");
 return a;
}
</script>
<style type="text/css">
body,h1,h2,h3,a,input,label,div
{
 margin:0;
 padding:0;
}
#box{
 width:400px;
 height:250px;
 background-color:#333;
 margin:0 auto;
 -webkit-border-radius:10px;
 -moz-border-radius:10px;
}
#box form.form{
 position:relative;
 top:50px;
 left:10px;
}
#box form.form label{
float:left;
width:105px;
font-size:18px;
color:white;
font-weight:bold;
clear:both;
margin-bottom:20px;
}
#box form.form input{
height:20px;
margin-bottom:15px;
}
#box h2{
 color: #CC6600;
 position:relative;
 top:10px;
 left:5px;
}
</style>
</head>
<body>
<div id="box">
<h2>Form Login</h2>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>" class="form">
 <label>Username</label><input type="text" name="nm" placeholder="Username"/><br />
 <label>Password</label><input type="password" name="psw" placeholder="Password"/><br><br>
<input type="submit" name="sub" value="Submit"/>
</form>
</div>
<?php
$koneksi=koneksi('localhost','root','');
db($koneksi);
if(isset($_POST['sub']) && $_POST['sub']=='Submit'){// jika tombol submit sudah ditekan
 $nm=$_POST['nm'];
 $pass=$_POST['psw'];
$sql="select username,password from login where username='$nm' && password='$pass';";// query sql untuk //menmapilkan data pada database
$cekLogin=cekLogin($nm,$pass,$sql,$koneksi);// panggil fungsi cekLogin dengan melewatkan 4 parameter
if($cekLogin){// jika login sukses
 header('location:admin.php');// redirect ke halaman admin
}
else{// jika gagal
 ?>
 <script type="text/javascript">
 window.popUp();// pemanggilan javascript function
 </script>
 <?php
}
}
?>
</body>
</html>
<?php
}
else{
 header('location:admin.php');// jika sudah dibentuk $_SESSION
}
?>

Penjelasan:

saya akan menjelaskan maksud dari kondisi

if(!isset($_SESSION['nm'])){// jika belum dibentuk $_SESSION

// pernyataan-pernyataan

}

else{

header('location:admin.php');// jika sudah dibentuk $_SESSION

}

maksud kondisi di atas yaitu gunanya jika kita tekan tombol back pada browser sesudah login,tidak bisa kembali ke form login sebelum anda logout

functionlog.php

<?php</pre>
################
## Setting database ##
################
function koneksi($server="localhost",$username="root",$pass=""){
 $server="localhost";// your server
 $username="root";// your username
 $pass="";// your password
 $koneksi=mysql_connect($server,$username,$pass) or die ("Koneksi error".mysql_error());
 return $koneksi;
}
function db($koneksi){
 $db="login";// your database
 return mysql_select_db($db,$koneksi) or die ("Database Gagal Dibuka");
}
####################
## Cek Login User ##
####################
function cekLogin($nm,$pass,$sql,$koneksi){
 $query=mysql_query($sql,$koneksi);// eksekusi query sql yang kita kirim lewat parameter
 $row=mysql_fetch_assoc($query);// tangkap baris,simpan di variable $row

#cek login

if($nm==$row['username'] && $pass==$row['password']){// jika username dan password yang kita inputkan sama //dengan username dan password di database
 $_SESSION['nm']=$nm;// buat session nm
 $_SESSION['adm']='admin';// buat session admin
 return 1;// mengembalikan nilai satu atau true
 }
 else{
 return 0;// mengembalikan nilai nol atau false
 }
}
?>

admin.php

</pre>
<?php
session_start();// mulai session
include_once 'functionlog.php';// pemanggilan file functionlog.php
if($_SESSION['adm']=='admin'){
echo "Hello $_SESSION[nm]";
?>
<br />
<a href="admin.php?log=logout">Logout</a>
<?php
}else{
 header('location:aplikasilogin.php');
}
if(isset($_GET['log'])){
 session_destroy();
 header('location:aplikasilogin.php');
}
?>
<pre>

penjelasan:
saya akan menjelaskan pernyataan kondisi

if($_SESSION['adm']=='admin'){
// pernyataan-pernyataan
}
else{
header('location:aplikasilogin.php');
}

kondisi di atas pada file admin.php gunanya untuk mengalihkan user yang belum login ke aplikasilogin.php
sehingga user yang belum login tidak bisa mengakses file admin.php

lalu pada kondisi

<pre>if(isset($_GET['log'])){
 session_destroy();
 header('location:aplikasilogin.php');
}</pre>

kondisi diatas pada admin.php gunanya untuk jika user klik link logout maka session akan dihancurkan dan user akan di arahkan ke aplikasilogin.php

Tampilan

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ok sampai sini dulu aplikasi login.ini masih sederhana dan dari segi keamanan pun belum aman,pada tutorialberikutnya kita akan modifikasi form login tersebut dengan menambahkan validasi-validasi sehingga bisa dikatakan aman 🙂 semoga bermanfaat

Buku Tamu Dengan Foto

Sekarang saya akan menunkkan script untuk membuat Buku Tamu dengan Foto.Disini kita akan megkoneksikannya dengan database.Karena Data tersebut Akan Kita simpan di Database.
Buat Struktur database nya seperti berikut


+---------+-------------+------+-----+---------+----------------+

| Field   | Type        | Null | Key | Default | Extra          |

+---------+-------------+------+-----+---------+----------------+

| id_user | int(11)     | NO   | PRI | NULL    | auto_increment |

| nama    | varchar(40) | NO   |     | NULL    |                |

| email   | varchar(40) | NO   |     | NULL    |                |

| date    | varchar(30) | YES  |     | NULL    |                |

| foto    | varchar(40) | NO   |     | NULL    |                |

| status  | text        | NO   |     | NULL    |                |

+---------+-------------+------+-----+---------+----------------+

6 rows in set (0.02 sec)

disini ada 3 File

  1. bukutamu.php
  2. modulfunctionbuku.php
  3. bukuproses.php
  4. style.css

modulfunctionbuku.php


<!--?php ######################### #### MODUL FUNCTION   ### #### By Mohamad Albar ### ######################### //koneksi function koneksi($server,$user,$password){ $koneksi=mysql_pconnect($server,$user,$password) or exit("Koneksi Error".mysql_error($koneksi)); if($koneksi){ return $koneksi; } } function db($coon,$dbname){ $db=mysql_select_db($dbname,$coon); $has=($db)?'database sudah bisa dibuka':'database gagal dibuka'; //echo $has; } function name($tmp){ $name=$_FILES[$tmp]['name']; return $name; } function destination($tmp){ $name=name($tmp); $tujuan="image\\".$name; return $tujuan; } function cektype($tmp){ $type=$_FILES[$tmp]['type']; if(stristr($type,'jpeg') || stristr($type,'png')){ return $type; } else{ return 0; } } function upload($tmp,$error){ $temp=$_FILES[$tmp]['tmp_name']; $name=name($tmp); $cektype=cektype($tmp); $destination=destination($tmp); switch($error){ case 0: if($cektype){ move_uploaded_file($temp,$destination); return $name; } else{ echo "Type Bukan JPEG/PNG"; } break; case 2: echo "Ukuran Lebih dari 490MB"; break; } } ?-->

bukutamu.php


<!--?php include 'modulfunctionbuku.php'; $koneksi=koneksi('localhost','root',''); db($koneksi,'bukutamu'); ?-->


Buku Tamu</pre>
<h2>Buku Tamu Sederhana</h2>
<div><form action="bukuproses.php" method="post" name="form" enctype="multipart/form-data"><label>Nama Lengkap</label><input type="text" name="nm" />

<label>Email</label><input type="text" name="mail" />


<input type="hidden" name="MAX_FILE_SIZE" value="500000" />
<label for="file">Foto</label><input type="file" name="user_file" />

<label>Komentar</label><textarea name="stat" rows="10px" cols="40px"></textarea>

<!--?php $date=date("D,d-F-Y"); ?-->
<input type="hidden" name="date" value="<?php echo $date ?>" />
<input type="submit" name="sub" value="Submit" /></form></div>

<hr />

<pre>
<!--?php $sql="SELECT * from bukutamu"; $query=mysql_query($sql,$koneksi); ?-->
<!-- bagian hasil -->
<!--?php while($row=mysql_fetch_assoc($query)){ ?--></pre>
<div>
<div>
<h3><!--?php echo $row['nama']?--> Says :</h3>
<!--?php echo $row['date'] ?--></div>
<img src="image/<?php echo $row['foto'] ?>" alt="Gambar" />

<!--?php echo $row['status'] ?-->
<div></div>
</div>
<pre>
<!--?php } ?-->



style.css


/*
CSS DOCUMENTS

Nama Program    : Style.css
Author            : Mohamad Albar
Tanggal            : 19-4-2012
*/
div,h1,h2,h3,h4,h5,h6,a,label,input,textarea,
form,p,img{
margin:0;
padding:0;
}
body{
background-color: #333;
margin:0;
padding:0;
}
h2{
text-align: center;
color:white;
font-family: arial;
font-weight: bold;
text-shadow:0px 5px 5px #000;
}
div.form{
width:600px;
margin:20px auto 30px;
height:500px;
background-color:#444;
-moz-border-radius:10px;
box-shadow:0px 0px 2px 2px #000;
position:relative;
}
div.form form{
position : relative;
top:30px;
left:10px;
}
div.form form input{
margin: 0 10px;
box-shadow:0px 0px 2px 2px #333;
}
div.form form textarea{
margin-left: 10px;
box-shadow:0px 0px 2px 2px #000;
}
div.form form label{
font-size:18px;
font-family:arial;
}

/* Komentar */
div.komwrap{
width:600px;
height:auto;
border:1px solid #000;
margin:10px 10px;
background-color:#222;
padding-bottom: 15px;
}
div.komwrap .header{
width:600px;
height:auto;
background-color:#111;
float:left;
}
div.komwrap .header h3{
color:white;
margin:5px 10px;
}
div.komwrap .header p{
color:#00c;
margin:5px 10px;
}
div.komwrap img{
width:100px;
height:150px;
margin:10px 10px;
border:3px solid #000;
float:left;
}
div.komwrap p.komen{
color:#eee;
margin:15px 10px;
float:left;
width:450px;
text-align:justify;
}
.clear{
clear:both;
}

bukuproses.php

<?php
require 'modulfunctionbuku.php';
$koneksi=koneksi('localhost','albar','albar');
db($koneksi,'bukutamu');
if(isset($_POST['sub']) && $_POST['sub']=="Submit"){
    $nm=$_POST['nm'];
    $mail=$_POST['mail'];
    $error=$_FILES['user_file']['error'];   
    $stat=$_POST['stat'];
    $date=$_POST['date'];
    $image=upload('user_file',$error);
    if(!empty($nm) && !empty($mail) && !empty($stat)){
        //if($image==0 && stristr($image,'jpeg') && stristr($image,'png')){
            //$image='defaultphoto.jpg';
        //}
        $sql="INSERT into bukutamu(nama,email,date,foto,status) values('$nm','$mail','$date','$image','$stat');";
        $query=mysql_query($sql);
        if($query){
            header('location:bukutamu.php');
        }
        else{
            echo '<br />Terjadi Kesalahan Input Data!!<br />';
            echo "<a href=bukutamu.php>Back</a>";
            
        }
    }
    else{
        echo 'data masih ada yang kosong<br />';
        echo "<a href=bukutamu.php>Back</a>";
    }
}
?>

Output

Program CRUD File

Program kali ini adalah program yang saya buat ketika mendapat tugas dari dosen ,yaitu program CRUD file (create,read,update,delete) .disini ada 4 file yaitu coba.php,form.php(main program),func.php(function),proses.php.Sebelumnya buat direktori untuk menyimpan file-file yang dibuat dengan nama data.Satukan direktori data,dan 4 file tersebut dalam satu folder.Berikut programnya.

main.php


<?php
include_once 'func.php';
/**
* Author : Mohamad Albar
* Name Program : form.php (main program)
*/
?>
<html>
<head>
<title>Form Data Mahasiswa</title>
<style type="text/css">
label{
float: left;
width: 120px;
}
</style>
</head>
<body>
<fieldset>
<legend>Form Data Mahasiswa</legend>
<form method="post" action="proses.php" name="form1">
<label>Nama Mahasiswa</label><input type="text" name="nm" /><br /><br />
<label>NPM</label><input type="text" name="npm" maxlength="8"/>&nbsp;&nbsp;<b>(*Max 8 Digit Angka</b><br /><br />
<label>Kelas</label><input type="text" name="kls"/><br /><br />
<label>Jenis kelamin</label><input type="radio" name="jk" value="Laki-Laki"/>Laki-Laki
<input type="radio" name="jk" value="Perempuan" />Perempuan<br /><br />
<label>Tanggal Lahir</label>
<select name="tgl">
<option selected="selected">Tanggal</option>
<?php
tgl(1,31);
?>
</select>
<select name="bln">
<option selected="selected">Bulan</option>
<?php
bln();
?>
</select>
<select name="thn">
<option selected="selected">Tahun</option>
<?php
thn(1880,2015);
?>
</select><br /><br />
<input type="submit" name="sub" value="Submit" />&nbsp;
<input type="submit" name="data" value="Lihat Data"/><br />
</form>
</fieldset>
</body>
</html>

func.php


<?php
/**
* Author : Mohamad Albar
* Name Program : func.php
*/
function tgl(){
$start=func_get_arg(0);
$end=func_get_arg(1);
for($i=$start;$i<=$end;$i++){
echo "<option value=$i>$i</option>";
}
}

function bln(){
$bln=array(1=>"Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember");
foreach($bln as $key=>$value){
echo "<option value=$key>$value</option>";
}
}

function thn(){
$awal=func_get_arg(0);
$akhir=func_get_arg(1);
for($i=$awal;$i<=$akhir;$i++){
echo "<option value=$i>$i</option>";
}
}

function proses($userfile,$nama,$npm,$kls,$jk,$tgl,$bln,$thn){
$userfile="C://wamp//www//tugas//data//".strtolower($npm).".txt";
if(!empty($nama)&&!empty($npm)&&!empty($kls)&&!empty($jk)&& $tgl!='Tanggal'&& $bln!='Bulan'&& $thn!='Tahun'){//validasi pertama
if(preg_match("/^([a-z]+)('[a-z]+)*(\.[a-z]+)*(\s[a-z]+)*([a-z]+)$/i",$nama) && preg_match("/^[0-9]{8}+$/",$npm)){
if(checkdate($bln,$tgl,$thn)){
if(!file_exists($userfile)){
$fp=fopen($userfile,'w');
}
else{
$fp=fopen($userfile,'r+');
}
$date=date("F-d-Y   H : i : s.",fileatime($userfile));
$data=<<<DATA
Tanggal   $date
Nama    : $nama
NPM     : $npm
Kelas   : $kls
Jenis Kelamin : $jk
Tanggal Lahir : $tgl-$bln-$thn \n\n
DATA;
fputs($fp,$data);
fclose($fp);
header('location:coba.php');
}#end validasi ketiga
else{
echo 'Tanggal salah<br />';
echo "<a href=form.php>Back</a>";
}
}//end validasi kedua
else{
echo 'Inputan salah<br />';
echo "<a href=form.php>Back</a>";
}
}//end validasi pertama
else{
echo 'Data Masih ada yang Kosong !!!<br />';
echo "<a href=form.php>Back</a>";
}
}

function edit($file){
$nmfile="data//".$file;
$fp=fopen($nmfile,'r+');
echo "<textarea cols=40 rows=10 name=".basename($nmfile,'.txt').">";
while(!feof($fp)){
$data=fgets($fp,1024);
echo $data;
}
fclose($fp);
echo "</textarea>";
}
function lihatIsi($file){
$nmfile="data//".$file;
$fp=fopen($nmfile,'r');
while(!feof($fp)){
$data=fgets($fp,'1024');
echo $data.'<br/>';
}
fclose($fp);
}
function delete($file){
@$direktori="data//".$file;
if(@unlink($direktori)){
header('location:coba.php');
}
}
function lihat($dir){
$direktori=$dir;
$arrdir=scandir($direktori);
$jumlah=sizeof($arrdir);
if($jumlah!=2){
echo "<h2>Data Mahasiswa</h2>";
echo "<table border=1>";
echo "<thead><th>No</th><th>File</th><th colspan=3>Action</th>";
$no=1;
for($i=2;$i<sizeof($arrdir);$i++){
echo "<tr><td>$no</td><td>$arrdir[$i]</td><td><a href=coba.php?del=$arrdir[$i]>Delete</a></td>
<td><a href=coba.php?edit=$arrdir[$i]>Edit</a></td>
<td><a href=coba.php?isi=$arrdir[$i]>Lihat</a></td>
</tr>";
$no++;
}
echo "</table>";
echo "<br/><a href=form.php>Back To Form</a>";
}
else{
echo 'Direktori Kosong';
echo "<br/><a href=form.php>Back To Form</a>";
}
}
?>

proses.php


<?php
/**
* Author : Mohamad Albar
* Name Program : Proses.php
*/
include_once 'func.php';
if(isset($_POST['sub']) && $_POST['sub']=='Submit'){
$nama=$_POST['nm'];
$npm=$_POST['npm'];
$kls=$_POST['kls'];
@$jk=$_POST['jk'];
$tgl=$_POST['tgl'];
$bln=$_POST['bln'];
$thn=$_POST['thn'];
proses($nama,$nama,$npm,$kls,$jk,$tgl,$bln,$thn);
}
if(isset($_POST['data']) && $_POST['data']=='Lihat Data'){
header('location:coba.php');
}
?>

coba.php


<?php
/**
* Author : Mohamad Albar
* Name Program : coba.php (action program)
*/
include_once 'func.php';
lihat('data');
echo '<br/><br/>';
@$del=$_GET['del'];
if($del){
delete($del);
}
@$isi=$_GET['isi'];
if($isi){
echo "<h3>Data $isi</h3><br/>";
lihatIsi($isi);
}
@$edit=$_GET['edit'];
if($edit){
?>
<form method="post" action="">
<?php
edit($edit);
?>
<br /><input type="submit" value="Update" name="upt" />
</form>
<?php
}
if(isset($_POST['upt']) && $_POST['upt']=='Update'){
$upt=basename($edit,'.txt');
$tangkapupt=$_POST[$upt];
$file="data//".$edit;
$fp=fopen($file,'r+');
fputs($fp,$tangkapupt);
fclose($fp);
echo '<h3>Hasil Update</h3>';
lihatIsi($edit);
}
?>

Tampilan

Form utama

 

 

 

 

 

 

 

 

Action file