Contoh Aplikasi Login Form

Posted on Juli 20th, 2008 in PHP by jymmyfalsq

Melanjutkan artikel yang kemarin, yang membahas tentang session. Aplikasi ini akan memanfaatkan teknologi session untuk menyimpan data user yang login dan koneksi database. Database yang digunakan adalah langganan saya yaitu MySQL, teknis koneksinya bagaimana ? baca dulu disini. Sedang yang belum mengetahui tentang session, baca disini. Aplikasi login form ini digunakan untuk membuat sistem login keanggotaan pada sebuah website, dimana data-data membernya akan disimpan dalam sebuah table database. Untuk validasi login tidak ada, artinya tidak ada validasi di sisi client, validasi hanya ada pada server, menggunakan PHP. Aplikasi ini hanya merupakan contoh pemanfaatan database dan session. Bagaimana cara membuatnya ?

Pertama, akan dibuat HTML form, yaitu form yang digunakan untuk login. Beri nama dengan form.html (sebenarnya terserah sih, saya hanya menyarankan saja). Berikut kode yang digunakan untuk membangun form sederhana.

<form action=”proseslogin.php” method=”post”>

    Username

<input name="user" type="text" />

Password

<input name="password" type="password" />

<input value="Login" type="submit" />

</form>

Struktur dasar HTML

Posted on Juli 14th, 2008 in HTML, Tutorial by jymmyfalsq

Struktur dasar HTML

HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda “/”).

Sebuah halaman web minimal mempunyai empat buat tag, yaitu :

<HTML> Sebagai tanda awal dokumen HTML.

<HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.

<TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).

Contoh :

<TITLE>Tips HTML —  www.klik-kanan.com</TITLE>

<BODY> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.

Atribut :
BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.

Contoh :

<BODY bgcolor=”#000000″ background=”images/pcb.gif” text=”#FFFFFF” link=”#FF0000″ vlink=”FFFF00″ alink=”#0000FF”>

Sebuah contoh sederhana dokumen HTML :

    <HTML>
    <HEAD>
    <TITLE>Halaman pembuka
    </TITLE>
    </HEAD>
    <BODY bgcolor=”#FFFFFF” background=”images/gambar1.gif” text=”#FF0000″>
    Letakkan text, images, dan link Anda di sini
    </BODY>
    </HTML>

Dasar Elektronika dan Mikrokontroller

Posted on Juli 12th, 2008 in Download, HTML, Tutorial by jymmyfalsq

file pdf tentang Dasar elektronika dan mikrokontroller

Full Download (1,2,3,4,5,6,7,8,9,10)

download semua nya disini.

Aplikasi Visual Basic

  1. Wartel
  2. Warnet
  3. Reliability System….(komplete)

Simulasi Electronika

  1. Proteus

Tutorial & contoh project PHP

  1. PHP

Membuat Polling di PHP

Posted on Juni 27th, 2008 in PHP by jymmyfalsq

Sebenarnya aplikasi polling berbasis web sudah banyak disediakan secara gratis. Aplikasi ini menjadi semacam widget yang bisa dilepas dan dipasang secara mudah, bahkan tanpa pengetahuan bahasa pemrograman yang detail. Tetapi, ada baiknya untuk mengetahui cara pembuatan aplikasi polling berbasis web. Aplikasi polling ini menggunakan PHP sebagai bahasa utamanya dan MySQl sebagai database yang berguna untuk menampung data-data poling. Berikut ini cara membuatnya.

Yang pertama dilakukan adalah berdoa dan membuat tabel. Berikut ini kode SQL yang digunakan untuk membangun tabel. Nama tabel dan databasenya terserah anda, nanti harus disesuaikan ketika menghubungkan PHP dan MySQL.

 
CREATE TABLE tb_poling (
  id int(3) NOT NULL AUTO_INCREMENT,
  nama varchar(40) ,
  rating tinyint(3) ,
  PRIMARY KEY (id)
);

Setelah itu, sekarang buat sebuah script yang digunakan untuk menampilkan dan menghandel proses masukan poling. Berikut kode PHP yang digunakan

<?php
 /*koneksi ke database dulu*/
 mysql_connect("localhost","root","");
 mysql_select_db("poling");

 /*
  buat tampilan poling, datanya diambil dari database lho
  saya membuat sebuah fungsi untuk menampilkan poling, agar nantinya bisa digunakan ulang.
  ini hanya masalah cara menampilkan saja kok
  */
 function show(){
         $cmd="select * from tb_poling";
         $exe=mysql_query($cmd);
         echo "<form action='' method='post'>";
         while ($data=mysql_fetch_array($exe)){
          echo "<input type='radio' name='pilihan' value='$data[id]' />$data[nama](Nilai :$data[rating])<br />";
         }
         echo "<input type='submit' name='submit' value='Vote for me' />";
         echo "</form>";
 }
 /*
  menampilkan tampilan form di sini
 */
 if (!isset($_POST["submit"])){
  show();
 }

 if (isset($_POST["submit"])){
  $cmd="update tb_poling set rating=rating+1 where id=$_POST[pilihan]";
  $exe=mysql_query($cmd);
  if ($exe){
   echo "terimakasih telah mengikuti poling";
  }
  else{
   echo "Maafkan, ada kesalahan teknis";
  }
  show();
 }
 ?>

Begitulah cara membuat aplikasi poling, mudah kan? Anda bisa memodifikasi poling ini agar menjadi lebih baik lagi, misalkan dengan menampilkan grafik berupa bar untuk menunjukkan nilainya. Yang saya tuliskan diatas hanya dasar, inti dari sebuah aplikasi poling, tentu saja tidak ada sistem keamananya. Jika pilkada dilakukan melalui poling web, sama sekali tidak disarankan menggunakan aplikasi ini.

Sumber atau Tutorial Yang Lainnya = Klik Disini

Membuat Buku tamu

Posted on Juni 7th, 2008 in PHP by jymmyfalsq

Buku tamu ini terdiri dari 2 file, file pertama bernama guestbook.php3 yang merupakan file utama. File kedua bernama entry.dat yang
digunakan untuk menyimpan isi buku tamu.

<html>
<head>
<TITLE>Contoh Guestbook </TITLE>
<STYLE>
FONT,body,td,table {font-family : verdana;font-size : 11px;}
b {
font-family : Arial;
font-weight : bold;
}
a,a:hover,.link{font-family: verdana;font-size: 8pt;font-color: 66666;}
</STYLE>
</head>
<body bgcolor=”#FFFFFF” leftmargin=”0″ topmargin=”30″ marginwidth=”0″ marginheight=”0″>
<b><center> BUKU TAMU <br></b>
dari www.klik-kanan.com</center>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr><td height=”50″></td> </tr>
<tr>
<td><form action=”<?PHP_SELF?>” method=”post”>
<table width=”498″ border=”0″ cellspacing=”0″ cellpadding=”0″ align=”center”>
<tr> <td>Nama</td> <td> <input name=”name” size=30 value=””> </td> </tr>
<tr> <td>Email</td> <td> <input name=”email” size=30 value=””> </td> </tr>
<tr> <td>Homepage</td> <td> <input name=”url” size=30 value=”http://”> </td> </tr>
<tr> <td valign=”top”>Komentar</td> <td> <textarea name=”message” cols=50 rows=10 wrap=soft></textarea> </td> </tr>
<tr> <td valign=”top”> <input type=”hidden” value=”ok” name=”send_status”> </td>
<td>
<input type=”submit” value=”Kirim” name=”submit”>
<input type=”submit” value=”Lihat” name=”view_guestbook”>
</td>
</tr>
</table></form>
</td>
</tr>
<tr>
<td> <center>

<?
if ($name == “” || $email == “” || $message == “”)
{
for ($i=0; $i<3; $i++)
{
echo “.”;
sleep(1);
flush();
}
$filesize = filesize(”entry.dat”);
$file = fopen(”entry.dat”,”r”);
$buffer = fread($file,$filesize);
echo “$buffer”;
fclose($file);
}
else if ($send_status == “ok”)
{
$filesize = filesize(”entry.dat”);
$file = fopen(”entry.dat”,”r”);
$buffer = fread($file,$filesize);
fclose($file);

$today = getdate();
$bulan = $today[month];
$mday = $today[mday];
$tahun = $today[year];
$tanggal = “$bulan $mday, $tahun”;

$file = fopen(”entry.dat”,”w”);

$parsed_message = strip_tags($message,”<a>,<i>”);
$parsed_message_br = str_replace(”\n”,”<br>”,$parsed_message);
$today = date( “Ymd”, time() );
$message_table =”<TABLE BORDER=\”0\” CELLPADDING=\”1\” bgcolor=EEEEEE width=\”500\”><TD colspan=\”2\”></TD></TR> <TR><TD align=\”right\” colspan=\”2\”><i>$tanggal</i></TD></TR> <TR><TR><TD width=\”30%\”><B>Nama :</B></TD> <TD>$name</TD></TR> <TR><TD><B>Email :</B></TD> <TD><A href=\”mailto:$email\”>$email</A></TD></TR> <TR><TD><B>Homepage :</B></TD> <TD><A href=\”$url\” target=\”_blank\”>$url</A></TD></TR> <TR><TD valign=\”top\” colspan=\”1\”><B>Komentar :</B></TD><TD>$parsed_message_br</TD></TR> <TR><TD colspan=\”2\”></TD></TR></TABLE>”;

fputs($file,”$message_table \n $buffer”);
fclose($file);
}
else if ($view_guestbook == “View Guestbook”){

$filesize = filesize(”entry.dat”);
$file = fopen(”entry.dat”,”r”);
$buffer = fread($file,$filesize);
echo “$buffer”;
fclose($file);

}
?></center>
</td>
</tr>
</tr>

</table>
<p> </p>
</body>
</html>

Up-down Image Slideshow Script

Posted on Juni 7th, 2008 in PHP by jymmyfalsq

<script language=”JavaScript1.2″>

/*
Up down slideshow Script
By Dynamic Drive  www.dynamicdrive.com)
For full source code, terms of use, and 100’s more scripts, visit http://www.dynamicdrive.com
*/

///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth=’103px’
var scrollerheight=’106px’
//3000 miliseconds=3 seconds
var pausebetweenimages=3000

//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]=’<a href=”http://www.cnn.com”><img src=”PE01805A.gif” border=”0″></a>’
slideimages[1]=’<img src=”PE01803A.gif”>’
slideimages[2]=’<img src=”TN00411A.gif”>’
slideimages[3]=’<img src=”PE02054A.gif”>’
slideimages[4]=’<img src=”cake.gif”>’
//extend this list

///////Do not edit pass this line///////////////////////

var ie=document.all
var dom=document.getElementById

if (slideimages.length>2)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout(”move1(tlayer)”,pausebetweenimages)
setTimeout(”move2(document.main.document.second)”,pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout(”move1(tlayer)”,50)
}
else{
tlayer.top=parseInt(scrollerheight)
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout(”move2(tlayer2)”,pausebetweenimages)
setTimeout(”move1(document.main.document.first)”,pausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout(”move2(tlayer2)”,50)
}
else{
tlayer2.top=parseInt(scrollerheight)
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){
tdiv.style.top=0+”px”
setTimeout(”move3(tdiv)”,pausebetweenimages)
setTimeout(”move4(second2_obj)”,pausebetweenimages)
return
}
if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){
tdiv.style.top=parseInt(tdiv.style.top)-5+”px”
setTimeout(”move3(tdiv)”,50)
}
else{
tdiv.style.top=scrollerheight
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){
tdiv2.style.top=0+”px”
setTimeout(”move4(tdiv2)”,pausebetweenimages)
setTimeout(”move3(first2_obj)”,pausebetweenimages)
return
}
if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){
tdiv2.style.top=parseInt(tdiv2.style.top)-5+”px”
setTimeout(”move4(second2_obj)”,50)
}
else{
tdiv2.style.top=scrollerheight
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (ie||dom){
first2_obj=ie? first2 : document.getElementById(”first2″)
second2_obj=ie? second2 : document.getElementById(”second2″)
move3(first2_obj)
second2_obj.style.top=scrollerheight
second2_obj.style.visibility=’visible’
}
else if (document.layers){
document.main.visibility=’show’
move1(document.main.document.first)
document.main.document.second.top=parseInt(scrollerheight)+5
document.main.document.second.visibility=’show’
}
}

window.onload=startscroll

</script>

<ilayer id=”main” width=&{scrollerwidth}; height=&{scrollerheight}; visibility=hide>
<layer id=”first” left=0 top=1 width=&{scrollerwidth};>
<script language=”JavaScript1.2″>
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id=”second” left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language=”JavaScript1.2″>
if (document.layers)
document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1])
</script>
</layer>
</ilayer>

<script language=”JavaScript1.2″>
if (ie||dom){
document.writeln(’<div id=”main2″ style=”position:relative;width:’+scrollerwidth+’;height:’+scrollerheight+’;overflow:hidden;”>’)
document.writeln(’<div style=”position:absolute;width:’+scrollerwidth+’;height:’+scrollerheight+’;clip:rect(0 ‘+scrollerwidth+’ ‘+scrollerheight+’ 0);left:0px;top:0px”>’)
document.writeln(’<div id=”first2″ style=”position:absolute;width:’+scrollerwidth+’;left:0px;top:1px;”>’)
document.write(slideimages[0])
document.writeln(’</div>’)
document.writeln(’<div id=”second2″ style=”position:absolute;width:’+scrollerwidth+’;left:0px;top:0px;visibility:hidden”>’)
document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1])
document.writeln(’</div>’)
document.writeln(’</div>’)
document.writeln(’</div>’)
}
</script>

<p align=”center”><font face=”Arial” size=”-2″>Free DHTML scripts provided by<br>
<a href=”http://dynamicdrive.com”>Dynamic Drive</a></font></p>

Bikin Slide Show pada Website

Posted on Juni 7th, 2008 in PHP by jymmyfalsq

<script language=”JavaScript1.2″>

/*
Up down slideshow Script
By Dynamic Drive  www.dynamicdrive.com)
For full source code, terms of use, and 100’s more scripts, visit http://www.dynamicdrive.com
*/

///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth=’103px’
var scrollerheight=’106px’
//3000 miliseconds=3 seconds
var pausebetweenimages=3000

//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]=’<a href=”http://www.cnn.com”><img src=”PE01805A.gif” border=”0″></a>’
slideimages[1]=’<img src=”PE01803A.gif”>’
slideimages[2]=’<img src=”TN00411A.gif”>’
slideimages[3]=’<img src=”PE02054A.gif”>’
slideimages[4]=’<img src=”cake.gif”>’
//extend this list

///////Do not edit pass this line///////////////////////

var ie=document.all
var dom=document.getElementById

if (slideimages.length>2)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout(”move1(tlayer)”,pausebetweenimages)
setTimeout(”move2(document.main.document.second)”,pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout(”move1(tlayer)”,50)
}
else{
tlayer.top=parseInt(scrollerheight)
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout(”move2(tlayer2)”,pausebetweenimages)
setTimeout(”move1(document.main.document.first)”,pausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout(”move2(tlayer2)”,50)
}
else{
tlayer2.top=parseInt(scrollerheight)
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){
tdiv.style.top=0+”px”
setTimeout(”move3(tdiv)”,pausebetweenimages)
setTimeout(”move4(second2_obj)”,pausebetweenimages)
return
}
if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){
tdiv.style.top=parseInt(tdiv.style.top)-5+”px”
setTimeout(”move3(tdiv)”,50)
}
else{
tdiv.style.top=scrollerheight
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){
tdiv2.style.top=0+”px”
setTimeout(”move4(tdiv2)”,pausebetweenimages)
setTimeout(”move3(first2_obj)”,pausebetweenimages)
return
}
if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){
tdiv2.style.top=parseInt(tdiv2.style.top)-5+”px”
setTimeout(”move4(second2_obj)”,50)
}
else{
tdiv2.style.top=scrollerheight
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (ie||dom){
first2_obj=ie? first2 : document.getElementById(”first2″)
second2_obj=ie? second2 : document.getElementById(”second2″)
move3(first2_obj)
second2_obj.style.top=scrollerheight
second2_obj.style.visibility=’visible’
}
else if (document.layers){
document.main.visibility=’show’
move1(document.main.document.first)
document.main.document.second.top=parseInt(scrollerheight)+5
document.main.document.second.visibility=’show’
}
}

window.onload=startscroll

</script>

<ilayer id=”main” width=&{scrollerwidth}; height=&{scrollerheight}; visibility=hide>
<layer id=”first” left=0 top=1 width=&{scrollerwidth};>
<script language=”JavaScript1.2″>
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id=”second” left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language=”JavaScript1.2″>
if (document.layers)
document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1])
</script>
</layer>
</ilayer>

<script language=”JavaScript1.2″>
if (ie||dom){
document.writeln(’<div id=”main2″ style=”position:relative;width:’+scrollerwidth+’;height:’+scrollerheight+’;overflow:hidden;”>’)
document.writeln(’<div style=”position:absolute;width:’+scrollerwidth+’;height:’+scrollerheight+’;clip:rect(0 ‘+scrollerwidth+’ ‘+scrollerheight+’ 0);left:0px;top:0px”>’)
document.writeln(’<div id=”first2″ style=”position:absolute;width:’+scrollerwidth+’;left:0px;top:1px;”>’)
document.write(slideimages[0])
document.writeln(’</div>’)
document.writeln(’<div id=”second2″ style=”position:absolute;width:’+scrollerwidth+’;left:0px;top:0px;visibility:hidden”>’)
document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1])
document.writeln(’</div>’)
document.writeln(’</div>’)
document.writeln(’</div>’)
}
</script>