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. 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');
?>
<html>
<head>
<title>Buku Tamu</title>
<link rel="icon" href=""/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<style type="text/css">
label{
float:left;
width:130px;
}
</style>
</head>
<body>
<h2>Buku Tamu Sederhana</h2>
<div>
<form name="form" action="bukuproses.php" method="post" enctype="multipart/form-data">
<label>Nama Lengkap</label><input type="text" name="nm" /><br /><br />
<label>Email</label><input type="text" name="mail"/><br /><br /><br />
<input type="hidden" name="MAX_FILE_SIZE" value="500000" />
<label for="file">Foto</label><input type="file" name="user_file" /><br /><br />
<label>Komentar</label><textarea cols="40px" rows="10px" name="stat"></textarea><br /><br />
<?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 />
<?php
$sql="SELECT * from bukutamu";
$query=mysql_query($sql,$koneksi);
?>
<!-- bagian hasil -->
<?php
while($row=mysql_fetch_assoc($query)){
?>
<div>
<div>
<h3><?php echo $row['nama']?> Says :</h3>
<p><?php echo $row['date'] ?></p>
</div>
<img src="image/<?php echo $row['foto'] ?>" alt="Gambar"/>
<p><?php echo $row['status'] ?></p>
<div></div>
</div>
<?php
}
?>
</body>
</html>

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;
}

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

 

Membuat CSS menjadi mudah dengan LESS

Berawal dari seseorang yang menshare membuat CSS dengan LESS ,saya jadi tertarik untuk mempelajarinya .Sebenarnya LESS ini sudah lama muncul tetapi saya baru tau hhe.Bagi anda yang sudah mahir dengan CSS tentu LESS ini akan sangat mudah untuk dipelajari.LESS ini merupakan library dari css dengan ekstensi .js(javascript).yang membuat saya kagum dengan LESS ini yaitu  bisa menggunakan variable dengan simbol @ ,memanggil class dari dalam class,menggunakan function dengan parameter,Operasi Matematika dan inheritance (penurunan sifat) menjadi lebih mudah dan LESS ini bisa jalan disisi Client dan disisi Server.Akan Tetapi hanya beberapa browser yang suport dengan LESS diantaranya Mozila,Safari,dan Chrome.Ok mari kita mulai mempelajarinya

Yang pertama kali harus anda lakukan anda harus mendownload less.js disini

Lalu satukan file less.js pada folder css anda.

Untuk membuat file LESS CSS ini anda harus memberikan ekstensi dot less pada file css anda, bukan ekstensi dot css . Sebenarnya yang dijalankan pada browser adalah dot css.Karena sebelumnya dot LESS akan di compile menjadi dot CSS oleh file less.js tersebut.sebelumnya anda buat dulu file style.less atau apa saja terserah untuk code-code css nya.Lalu Panggil pada File main.html dengan cara seperti berikut.


<link rel="stylesheet/less" type="text/css" href="style.less"/>
<script src="less-1.3.0.min.js" type="text/javascript"></script>

script di atas diletakkan diantara tag <head></head>.jangan di ubah urutannya,jadi tag <link> dahulu baru tag <script>

Tulis kode-kode di bawah pada file style.less

A.Variable

Variable pada LESS dimulai dengan simbol @.Perhatikan contoh berikut

Dengan less


@color:#333;/*variable*/
body{
background-color:@color;/*memanggil variable color pada properti bacground-color*/
}

Dengan css


body{

background-color:#333

}

B.Function

Nama Function harus diawali titk(.) atau pagar(#) seperti pemberian nama class dan id.Function ini berisi kumpulan properti yang nantinya jika kita ingin menggunakannya tinggal dipanggil.Function ini bisa berisi parameter-parameter yang dilewatkan dengan nilai (pass by value).Dan juga kita bisa memberikan nilai default pada parameter-parameter tersebut.

Dengan less


.rounded(@colorback,@colorborder:yellow){/*fungsi rounded*/
border:1px solid @colorborder;
background-color:@colorback;
height:200px;
width:400px;
}

#header{/*pemanggilan fungsi rounded pada id header*/
.rounded(green);

}

Dengan css


#header{

border:1px solid yellow;
background-color:green;
height:200px;
width:400px;

}

Note:Untuk parameter default harus diletakkan sebelum parameter non-default,agar tidak terjadi error.

C.Nested Rules

Dengan LESS penurunan sifat (inheritance) jadi mudah perhatikan contoh berikut

Dengan less


@color:#333;

.border(@colorder:red){

border:1px solid @colorder;

}

<strong></strong>#header{
.rounded(green);/*pemanggilan fungsi rounded*/
h2{
color:blue;
.border;
}
h3{
color:@color;/*pemanggilan variable color*/
}

}

Dengan Css


#header{

border:1px solid yellow;
background-color:green;
height:200px;
width:400px;

}

#header h2{

color:blue;

border:1px solid red;

}

#header h3{

color:#333;

}

D.Operation Math

LESS memungkinkan kita untuk melakukan manipulasi terhadap variable dengan menambah ,mengalikan,mengurangi,dan membagi.Perhatikan contoh berikut

Dengan Less


.h3(@ukuran){
border:@ukuran/2 solid red;
}

#header{

h3{

.h3(4px);

}

}

Dengan Css


#header h3{

border:2px solid red;

}

Ok sekian Tutorialnya . Tolong di koment ya :) .Semoga Bermanfaat…..

Membuat Buku Tamu Sendiri

Berikut adalah script untuk membuat buku tamu dengan beberapa validasi.Sebelumnya saya sarankan agar tidak mengcopy paste  mentah-mentah kode di bawah ini.Jika itu dilakukan maka code akan error karena kesalahan ada pada double quote(“).Untuk itu ketik ulang tanda petik dua nya pada teks editor anda.Lalu Buatlah empty file dengan nama file.txt,dan satukan file tersebut dalam satu folder dengan script-script dibawah,jangan dipisah.Boleh dipisah,tapi anda harus mengubah path nya.

disini ada 3 file yaitu bukutamuereg.php,funcbukutamu.php,dan prosesdata.php

bukutamuereg.php


<?php
include_once 'funcbukutamu.php';
/**
* Program name : bukutamuereg.php
* Program by mohamad albar
*/
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Buku Tamu</title>
<style type="text/css">
label{
float:left;
width:115px;
}
</style>
</head>
<body>
<fieldset>
<legend>Buku Tamu</legend>
<form action="prosesdata.php" method="post" name="form1">
<label>Nama Depan</label><input type="text" name="nmdp" /><br/>
<label>Nama Belakang</label><input type="text" name="nmblk" /><br/><br>
<label>Tanggal Lahir</label>
<select name="tgl">
<option value="tanggal" selected="selected">Tanggal</option>
<?php
tanggal();
?>
</select>
<select name="bln">
<option value="bulan" selected="selected">Bulan</option>
<?php
bulan();
?>
</select>
<select name="thn">
<option value="tahun" selected="selected">Tahun</option>
<?php
tahun();
?>
</select><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>Komentar</label><textarea cols="40" rows="10" name="kom" ></textarea><br><br>
<input type="submit" name="sub" value="Submit"/>
<br/><br/>
<input type="hidden" name="proses" value="form1" />
<p><b>(* wajib diisi</b></p>
</form>
</fieldset>
</body>
</html>

funcbukutamu.php


<?php

/**
* Program Name : funcbukutamu.php
* Program by : Mohamad Albar
*/

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

function tahun(){
for($i=1880;$i<=2015;$i++){
echo "<option value=$i>$i</option>";
}
}

function kirimData($namafile,$nmdp,$nmblk,$tgl,$bln,$thn,$jk,$kom){
$nmfile=$namafile;#Untuk Nama File disini anda bisa atur patch misal folder di C: maka "C://$namafile"
if(!empty($nmdp) && !empty($nmblk) && $tgl!='tanggal' && $bln!='bulan' && $thn!='tahun' && !empty($jk) && !empty($kom)){
if(preg_match("/^[a-z](\s[a-z]+)?([a-z]+\.)*([a-z]+)$/i",$nmdp) && preg_match("/^[a-z](\s[a-z]+)?([a-z]+\.)*([a-z]+)$/i",$nmblk)){
if(file_exists($nmfile)){
$fp=fopen($nmfile,'a');
echo 'Terima kasih telah menulis buku tamu &nbsp;&nbsp;';
echo "<a href=prosesdata.php?lht=Lihat>Lihat Buku Tamu</a>";
}
else{
$fp=fopen($nmfile,'w');
echo 'Terima kasih telah menulis buku tamu';
echo "<a href=prosesdata.php?lht=Lihat>Lihat Buku Tamu</a>";
}
}
else{
echo 'Penulisan nama tidak benar &nbsp;&nbsp';

}
$data=<<<DATA
Nama Depan : $nmdp
Nama Belakang   : $nmblk
Tanggal Lahir   : $tgl-$bln-$thn
Jenis Kelamin   : $jk
Komentar        : $kom\n
<hr/>
DATA;
@fputs($fp,$data);
@fclose($fp);
}
else{
echo 'Data masih ada yang kosong&nbsp;&nbsp;';
echo "<a href=bukutamuereg.php>Back</a>";
}
}

function lihat($nmfile){
$namafile=$nmfile;
$ukuran=filesize($namafile);
if($ukuran==0){
echo 'File Masih Kosong';
}
else{
$fp=fopen($namafile,'r');
while(!feof($fp)){
$data=fgets($fp,1024);
echo "<b>$data</b><br/>";
}
fclose($fp);
}
}
?>

prosesdata.php


<?php

/**
* Program Name : prosesdata.php
* Program by : Mohamad Albar
*/
include_once 'funcbukutamu.php';
if(isset($_POST['proses']) && $_POST['proses']=='form1'){
$nmdp=$_POST['nmdp'];
$nmblk=$_POST['nmblk'];
$tgl=$_POST['tgl'];
$bln=$_POST['bln'];
$thn=$_POST['thn'];
@$jk=$_POST['jk'];
$kom=$_POST['kom'];
kirimData('file.txt',$nmdp,$nmblk,$tgl,$bln,$thn,$jk,$kom);// file.txt dapat diganti sesuai nama file nya
}
if(@$_GET['lht']=='Lihat'){
lihat('file.txt');
}
?>

 

Ebook CSS Selector

Untuk membuat sebuah dokumen css kita tidak bisa lepas dari yang namanya selektor.Pada
tutorial kali ini saya akan menjelaskan macam-macam selector yang sering digunakan pada
dokumen css
Macam-macam selector css

  • Selector Tag
  • Selector Class
  • Selector ID
  • Selector Pseudo-class
  • Selector Pseudo-Elemen
  • Selector Keturunan
  • Selector Ortu-Anak
  • Selector Atribut
  • Selector Berdekatan
  • Selector Gabungan
  • Selector Universal

untuk lebih jelas download ebook nya disini

matriks untuk penggunaan array multidimesi

berikut adalah program matriks dengan php ,untuk menggambarkan array multidimensi di php

di sini ada 3 file yaitu form matriks,hasil matriks,dan function matriks

formmatriks.php


<!DOCTYPE HTML>
<?php
/*
Nama Program : Formmatriks(Main Program)
*/
?>
<html>
<head>
<title> Form Matriks </title>
<style type="text/css">
label{
float:left;
width:100px;
}
</style>
</head>
<body>
<form method="post" action="hasilmatriks.php" name="form1">
<table>
<tr>
<td>&nbsp;</td>
<td>Baris</td>
<td>Kolom</td>
</tr>
<tr>
<td>Matriks1</td><td><input type="text" name="baris1" size="5"/></td><td><input type="text" name="kolom1" size="5"/></td>
</tr>
<tr>
<td>Matriks2</td><td><input type="text" name="baris2" size="5"/></td><td><input type="text" name="kolom2" size="5"/></td>
</tr>
</table>
<input type="submit" name="sub" value="Submit"/>
<input type="hidden" name="proses" value="form1"/>
<br /><br />
<p><b>(* Hanya angka</b></p>
</form>
</body>
</html>

funcmatriks.php


<?php
/*
Nama Program : funcmatriks
Useful progran : Function for formmatriks.php and hasilmatriks.php
*/
function buatFormMasukkan($nama,$baris,$kolom){
echo "Matriks $nama<br>";
echo "<input type=hidden name=baris".$nama." value=$baris />";
echo "<input type=hidden name=kolom".$nama." value=$kolom />";
if(is_numeric($baris) && is_numeric($kolom)){
for($i=0;$i<$baris;$i++){
for($j=0;$j<$kolom;$j++){
echo "<input name=".$nama."[] type=text size=5 /> ";
}
echo '<br>';
}
}
else{
header('location:formmatriks.php');
}
}
function masukData($m1,$type){
global $m1_baris,$m1_kolom;
global $m2_baris,$m2_kolom;
$nama=array();
$var=0;
if($type==1){
$baris=$m1_baris;
$kolom=$m1_kolom;
}
else{
$baris=$m2_baris;
$kolom=$m2_kolom;
}
for($i=0;$i<$baris;$i++){
for($j=0;$j<$kolom;$j++){
$nama[$i][$j]=$m1[$var];
$var++;
}
}
return $nama;
}
function jumlah($m1,$m2){
global $m1_baris,$m1_kolom;
$hasil=array();
for($i=0;$i<$m1_baris;$i++){
for($j=0;$j<$m1_kolom;$j++){
@$hasil[$i][$j]=$m1[$i][$j]+$m2[$i][$j];
}
}
return $hasil;
}
function kurang($m1,$m2){
global $m1_baris,$m1_kolom;
$hasil=array();
for($i=0;$i<$m1_baris;$i++){
for($j=0;$j<$m1_kolom;$j++){
@$hasil[$i][$j]=$m1[$i][$j]-$m2[$i][$j];
}
}
return $hasil;
}
function tampil($hasil,$type){
global $m1_baris,$m1_kolom;
global $m2_baris,$m2_kolom;
$nama=array();
if($type==1){
$baris=$m1_baris;
$kolom=$m1_kolom;
}
else{
$baris=$m2_baris;
$kolom=$m2_kolom;
}
echo "Matriks $type<br>";
foreach($hasil as $value){
foreach($value as $nilai){
echo " [".$nilai."] ";
}
echo '<br>';
}
}
?>

hasilmatriks.php


<?php
/*
Nama Program : hasilmatriks.php
*/
require 'funcmatriks.php';
if(isset($_POST['proses']) && $_POST['proses']=='form1'){
$baris1=$_POST['baris1'];
$kolom1=$_POST['kolom1'];
$baris2=$_POST['baris2'];
$kolom2=$_POST['kolom2'];
if(empty($baris1) && empty($baris2) && empty($kolom1) && empty($kolom2)){
$baris1=2;
$kolom1=2;
$baris2=2;
$kolom2=2;
}
if(!isset($_POST['proses2']) && @$_POST['proses2']!='form2'){
?>
<form name="form2" action="" method="post">
<?php
buatFormMasukkan('m1',$baris1,$kolom1);
buatFormMasukkan('m2',$baris2,$kolom2);
?>
<input type="submit" name="sub2" value="Hitung" />&nbsp;&nbsp;
<select name="aksi">
<option value="jumlah">Penjumlahan</option>
<option value="kurang">Pengurangan</option>
</select>
<input type="hidden" name="proses2" value="form2" />
</form>
<?php
}
}
if(isset($_POST['proses2']) && $_POST['proses2']=='form2'){
$m1_baris=$_POST['barism1'];
$m1_kolom=$_POST['kolomm1'];
$m2_baris=$_POST['barism2'];
$m2_kolom=$_POST['kolomm2'];
$operasi=$_POST['aksi'];
$m1=$_POST['m1'];
$m2=$_POST['m2'];
$m1_has=masukData($m1,1);
$m2_has=masukData($m2,2);
if($operasi=='jumlah'){
$hasilawl=jumlah($m1_has,$m2_has);
}
else{
$hasilawl=kurang($m1_has,$m2_has);
}

tampil($m1_has,1);

tampil ($m2_has,2);

tampil($hasilawl,"Hasil");
}
?>

Penjelasan kode

saya akan menjelaskan kode di bagian ini


function masukData($m1,$type){
global $m1_baris,$m1_kolom;
global $m2_baris,$m2_kolom;
$nama=array();
$var=0;
if($type==1){
$baris=$m1_baris;
$kolom=$m1_kolom;
}
else{
$baris=$m2_baris;
$kolom=$m2_kolom;
}
for($i=0;$i<$baris;$i++){
for($j=0;$j<$kolom;$j++){
$nama[$i][$j]=$m1[$var];
$var++;
}
}
return $nama;
}

nah maksud disini kita akan mengembalikan variable $nama dalam bentuk array .tujuan kita membuat variable $var=0 yaitu untuk mengambil nilai array dari formmasukkan yaitu m1 dan m2.kalo kita lihat setelah di input angka untuk proses perhitungan m1 akan menjadi m1=array(input1,input2,input2…input-ke-n) ini adalah array tunggal,begitu juga m2,jadi kita tidak mungkin menggunakan $i dan $j untuk menjadi index nya.oleh sebab itu kita buat variable lagi yaitu $var

Login User Tanpa Database

berikut script yang saya buat untuk login user.saya tidak menyimpan data user di dalam database tapi saya mencoba menyimpannya di array multidimesi,dan ternyata bisa :) . berikut scriptnya disini ada 4 file yang pertama formlogin.php(form utama),register.php,funclogin.php(fungsi login),admin.php

formlogin.php


<?php session_start();?>
<?php  require 'funclogin.php'
/*
Program Name:formlogin.php
Program by : Mohamad Albar
*/
?>
<html>
<head>
<style type="text/css">
label{
float: left;
width: 100px;
}
</style>
</head>
<body>
<form method="post" action="" name="form1">
<label>Username</label><input type="text" name="user" /><br><br>
<label>Password</label><input type="password" name="pass"/><br><br>
<input type="submit" name="log" value="Login"/>&nbsp; &nbsp; &nbsp; <a href="register.php">Register</a>
<input type="hidden" name="proses" value="form1"/>
<?php
if(isset($_POST['proses']) && $_POST['proses']=='form1'){
$loginuser=$_POST['user'];
$passuser=$_POST['pass'];
login('register',$loginuser,$passuser,'admin');
}
?>
</form>
</body>
</html>

register.php


<?php session_start();?>
<?php require 'funclogin.php'
/*
Program Name:register.php
Program by : Mohamad Albar
*/
?>
<html>
<head>
<style type="text/css">
label{
float: left;
width: 100px;
}
</style>
</head>
<body>
<form method="post" name="form2" action="">
<label>Username</label><input type="text" name="userreg"/><br><br>
<label>Password</label><input type="password" name="passreg"/><br><br>
<input type="submit" name="reg" value="Register"/>&nbsp; &nbsp; &nbsp; <input type="submit" name="lihat" value="Lihat User"/>&nbsp; &nbsp; <a href="formlogin.php">Form Login</a>&nbsp;&nbsp;&nbsp;<a href="register.php?hapus=Hapus">Hapus User</a><br><br>
<?php
if(isset($_POST['reg']) && $_POST['reg']=='Register'){
$userregis=$_POST['userreg'];
$passregis=$_POST['passreg'];
registerUser('register',$userregis,$passregis);
}
if(isset($_POST['lihat']) && @$_POST['lihat']=='Lihat User'){
tampilData('register');
}

?>
</form>
<?php
if(@$_GET['hapus']=='Hapus'){
session_destroy();
echo 'Data sudah dihapus';
exit;
}
?>
</body>
</html>

funclogin.php


<?php
/*
Program Name:funclogin.php
Tujuan:register.php,formlogin.php,admin.php
Program by : Mohamad Albar
*/
function login($nama,$userlog,$passlog,$log){
$_SESSION['login']=$log;
foreach($_SESSION[$nama] as $value){
foreach($value as $pass=>$user){
if($user==$userlog && $pass==$passlog){
header('location:admin.php');
exit();
}
}
}
}
function registerUser($nama,$user,$pass){
if(!empty($user) && !empty($pass)){
$_SESSION[$nama][$user]=array($pass=>$user);

header('location:formlogin.php');
exit();
}
else {
header('location:register.php');
}
}
function tampilData($nama){
foreach($_SESSION[$nama] as $value){
foreach($value as $pass=>$user){
echo $pass.'=>'.$user.'<br>';
}
}
}
function admin($nama){
foreach($_SESSION[$nama] as $value){
foreach($value as $pass=>$user){
echo "Selamat datang $user";
}
}
}
?>

admin.php


<?php
session_start();
/*
Program Name:admin.php
Program by : Mohamad Albar
*/
require 'funclogin.php';
if($_SESSION['login']=='admin'){//jika admin
admin('register');
echo '<br>';
echo "Anda $_SESSION[login]";
echo '<br><br>';
?>
<a href="admin.php?log=logout" >Logout</a>
<?php } else {
header('location:formlogin.php');
exit();
}
if(@$_GET['log']=='logout'){
session_destroy();
header('location:formlogin.php');
}
?>

Bersihkan file sampah di linux dengan BleachBit

Mungkin bagi pengguna windows sudah tidak asing lagi dengan tune-up,ccleaner dan aplikasi lainnya untuk membersihkan file sampah.tapi sayang nya itu hanya bisa digunakan di windows,meskipun di linux sudah ada aplikasi wine.bahkan untuk ccleaner sendiri yang opensource tidak bisa digunakan di linux.Nah bagi pengguna linux tidak usah khawatir ada aplikasi di linux yang bisa membersihkan file2 sampah di hardisk kita yang tidak kalah bagusnya dengan software2 di atas yaitu BleachBit bisa didownload secara gratis melalui situs resminya http://bleachbit.sourceforge.net/ bisa juga dari synaptic atau software center.saya akan mengajarkan mendownloadnya melalui synaptic.
buka synaptic masukkan password lalu ketik di kolom search bleachbit

 

 

 

 

 

 

 

 

setelah didownload dan diinstall buka bleach bit dimenu -> system tools -> BleachBit

ada dua pilihan mau sebagai user atau sebagai root kalu untuk membersihkan system mending masuk ke mode root,kalu hanya membersihkan,seperti history web browser maka masuk yang mode biasa.

setelah itu akan muncul BleachBit

 

 

 

 

 

 

setelah itu anda bisa memilih apa saja yang ingin di bersihkan dengan memberikan tanda centang.Kalu sudah klik Delete.