Alles über Informatik-Ingenieurwesen

Minggu, 24 Oktober 2010

Pembuatan table dengan kombinasi PHP dengan javascript + HTML


PHP merupakan salah satu bahasa webscripting yang sangat simple. Merupakan suatu web yang dinamis. Sampai saat ini penggunaan /pembuatan wed dengan PHP masih di gunakan. Dalah satu contoh membuat table yang fleksibel bisa dibuat sesuai kebutuhan lewat kombinasi PHP dan HTML, kita dapat mengkombinasikan antara PHP dengan javascripct dengan metode link.
Untuk lebih singkatnya, mari kita liat kode porgram dari program tabel ini.
Simpan file dengan nama table.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Generate Table</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:178px;
height:24px;
z-index:1;
left: 284px;
top: 189px;
}
.style1 {
color: #0000CC;
font-weight: bold;
}
-->
</style>
</head>
<script language="JavaScript" type="text/javascript">
<!--
function getmax() {
var R = parseInt(document.getElementById('JumlahRow').value);
var C = parseInt(document.getElementById('JumlahColum').value);
var X = parseInt(document.getElementById('JumlahCell').value);
var cellmax = document.getElementById('maxcells');
var total = 'N/A';
total = R * C;
cellmax.value = new String(total);
if (X > total)
{
alert('Cell Total Yang Anda Masukkan Terlalu Besar, Nilai Maksimum Cells = ' + total);
document.getElementById('CellsTotal').value = new String();
}
}
//-->
</script>
<body>
<form method="post" action="tabel.php">
<h3 align="center" class="style1">Tabel Fleksibel Dengan Generate Table</h3>
<div align="center">
<table width="327" border="0" bgcolor="#FFFFFF">
<tr bgcolor="#0000ff">
<td width="121" style="text-align:center">baris</td>
<td width="196"><strong>= </strong>
<input name="JumlahRow" type="text" id="JumlahRow" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr bgcolor="#00ff00">
<td style="text-align:center"><label>kolom</label></td>
<td><strong>= </strong>
<input name="JumlahColum" type="text" id="JumlahColum" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr bgcolor="#0000ff">
<td style="text-align:center">Cell Total </td>
<td><strong>= </strong>
<input name="JumlahCell" type="text" id="JumlahCell" onKeyUp="getmax();" onFocus="this.select();"></td>
</tr>
<tr bgcolor="#00ff00">
<td style="text-align:center">Max Cells </td>
<td><strong>= </strong>
<input name="maxcells" type="text" id="maxcells" disabled="disabled" style="text-align:center"></td>
</tr>
</table>
</div>
<div id="apDiv1">
<input type="submit" name="Generate" value="G e n e r a t e"><input type="reset" name="Reset" value="R e s e t">
</div>
</form>
</body>
</html>

Simpan file PHP nya dengan nama table.php juga:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hasil Generate Tabel</title>
</head>
<body>
<div align="center">
<?php
$rows = 1;
$columns = 1;
$cells = 1;
?>

<?php $rows = (int) $_POST["JumlahRow"]; ?>
<?php $columns = (int) $_POST["JumlahColum"]; ?>
<?php $cells = (int) $_POST["JumlahCell"]; ?>

<strong>Anda Memilih</strong> <?php echo $columns; ?> <em>kolom,</em><br />
<strong>Anda Memilih</strong> <?php echo $rows; ?> <em>baris,</em><br />
<strong>Dan Anda Membutuhkan</strong> <?php echo $cells; ?> <em>cells,</em><br />
<br />
<br />
<?php
$width = $columns * 75;
echo "<table width=".$width." border=1>";
$rw = 0;
$cel = 1;
while ($rw < $rows && $cel <= $cells)
{
echo "<tr>";
$cl = 0;
while ($cl < $columns)
{
if ($cel <= $cells)
{
echo "<td><div align=center>".$cel."</div></td>";
$cel++;
}
$cl++;
}
echo "</tr>";
$rw++;
}
echo "</table>";
?>
</div>
</body>
</html>
Demikian hasilnya:


setelah di generate maka hasilnya:
 setelah di edit generate nya maka hasilnya:

--SELAMAT MENCOBA--

buat blog dengan CSS


Desain Blog Simple dengan CSS
Pertama buat kerangka dahulu dengan menggunakan CSS, lalu isi tiap tiap bagian kerangka.
Simpan file dengan nama mystyle.css
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid black;
background: grey;
}

#top {
margin:auto ;
width: 999px;
height:25px;
border: 1px solid black;
background: black;
}

#right {
float: right;
width: 200px;
height: 20px;
background: purple;
border: 2px solid black;
margin: 3px 5px 0px 0px ;
}

#right2 {
clear: both;
float: right;
width: 200px;
height: 130px;
background: black;
border: 2px solid black;
margin: 0px 5px 0px 0px ;
}

#right3 {
clear: both;
float: right;
width: 200px;
height: 20px;
background: purple;
border: 2px solid black;
margin: 3px 5px 0px 0px ;
}

#right4 {
clear: both;
float: right;
width: 200px;
height: 160px;
background: black;
border: 2px solid black;
margin: 0px 5px 5px 0px ;
}

#content {
margin: 0px 0px 0px 40px;
width: 700px;
height: 340px;
img float left padding 2px 2px 2px 2px;
border: 2px solid grey;
}



#header {
clear: both;
background-image:url(header.jpg);
height: 70px;
border: 0px solid blue;
}

#footer {
clear: both;
height: 50px;
border: 1px solid black ;
background-image:url(footer2.jpg);
}



Buat isi bagian –bagian kerangka dari web wang akan dibuat
Simpan dengan nama Desain Layout1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Desain Layout</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />

</head>
<div id = "wrapper">

<div id="header">
<table width="993" height="35">
<tr>
<td> <h2> <p align="left"><font color="white"face="Verdana">Simple Blog Desain</font> </b> <h2></td>
<td><b><h4 align="right">
<form name="form1" method="post" action="">
<label>Search
<input type="text" name="textfield">
</label>
</form>
<h4> </td>
</tr>

</table>
</div>



<div id="top">
<tr id="main">
<td><a href="index.html"> Home |</a></td>
<td><a href="#">Sitemap |</a></td>
<td><a href="#">RSS |</a></td>
<td><a href="contact.html">Contact |</a></td>
<td><a href="aboutus.html">About Us</a></td>
</tr>

</div>


<div id="right">KATEGORI</div>

<div id="right2">
<ul id="main">
<li><a href="index.html"> Program</a></li>
<li><a href="#">News & Media</a></li>
<li><a href="tutorial.html">Tutorial</a></li>
<li><a href="trik&tips.html">Trik& Tips</a></li>
</ul>

</div>
<div id="right3">LOGIN</div>

<div id="right4">
<form action="" method="post">
<table align="left" bgcolor="#000000" border="0" cellpadding="" cellspacing="0" width="10%">
<tr>
<td> <font color="white"face="TIME NEW ROMAN" size"10"> user id: </font></td>
</tr>
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td> <p align="left"><font color="white"face="TIME NEW ROMAN" size"10">password:</font> </td>
</tr>
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td> <input type="submit" value="login" /> </td>
</tr>
</table>
</form>
</div>

<div id="content"><marquee behavior="scroll">"Selamat Datang Di Warung Belajar UM"</marquee> <hr/>
<p>&nbsp;</p>
<b>Pengertian Web Browser<br/></b>
<br/><img src="browser.jpg"align="left" />
Browser adalah program aplikasi yang menterjemahkan kode HTML dan merepresentasikan halaman,</br>
website. Aplikasi inilah yang paling sering kita gunakah setiap hari untuk melakukan browsing di dunia </br>
maya. Macam browser sekarang semakin banyak saja dianataranya adalah: Internet Explorer, Netscape, </br>
Mozilla, Chrome, Safari, dll.</br>
Pendekatan fungsi ditinjau dari arah pengguna atau top down view</br>
Dilakukan berdasarkan pada kenyataan bahwa struktur internal sistem komputer pada aras bahasa mesin sangat </br>
primitif dan tidak fleksibel untuk pemrograman terutama untuk proses input/output</br>
Sistem operasi dibuat untuk menyembunyikan keadaan sesungguhnya dari perangkat keras dengan tampilan yang</br>
menyenangkan dan mudah digunakan. Disini sistem operasi berperan sebagai penyedia interface yang</br>
sesuai berupa perluasan mesin (extended machine) atau mesin semu (virtual machine)</br>


</div>
<div id="footer"><h6 align="right">kikimen050@gmail.com</h6></div>
</div>
</body>
</html>

Maka hasilnya seperti gambar di bawah:
 

Senin, 11 Oktober 2010

Login Sederhana dengan php


Aplikasi login form sederhana (tanpa database) yang terdiri dari field ID/Username dan Password.

Di bawah ini merupakan contoh pembuatan login sederhana tanpa database atau SQL
Hasil dari skripnya:





bikin file login.php

Disini akan di destroy session sesuai dengan nama session untuk session nama loginnya.
$_SESSION['user'] ==> user disini maksudnya adalah nama session nya (untuk variabel)

login.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
                <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
                <meta name="author" content="" />

                <title>Login</title>
                <style type="text/css">
                <!--
table {
font-family: Courier New, Arial, Helvetica, sans-serif;
font-size: 11px;
}
input {
font-family: Courier New, Arial, Helvetica, sans-serif;
font-size: 12px;
height: 20px;
}
-->
</style>

</head>

<body>
<script language="JavaScript" type="text/javascript">
   function setFocus() {
                document.login.username.focus();
   }
      function getValue() {
                var vText;
                var vPwd;
               
                vText = document.login.username.value;
                vPwd = document.login.password.value;
                if ((vText == "") || (vPwd == "")) {
                    alert("Warning !\nUsername dan Password tidak boleh kosong");
                    setFocus();
                } else {
                    if ((!isNaN(vText)) || (!isNaN(vPwd))) {
                                alert("Warning !\nUsername dan Password tidak boleh angka");
                                setFocus();
                    }
                }
   }                          
</script>

<div align="center">
<form action="ceklogin.php" method="post" name="login">
<table width="286" border="0" cellpadding="0" cellspacing="0">

<tr bgcolor="#66FFFF">
<td height="9" colspan="2" align="center" valign="middle">
<br /><font color="#2A1F00"><h2>LOGIN DI SINI</h2></font></td>
</tr>
<tr>
<td width="106" height="27">&nbsp;</td>
<td width="180">&nbsp;</td>
</tr>
<tr>
<td height="18" align="right" valign="middle">Username :&nbsp;</td>
<td valign="middle">
<input name="username" type="text" id="username" size="20" /></td>
</tr>
<tr>
<td height="18" align="right" valign="middle">Password :&nbsp;</td>
<td valign="middle">
<input name="password" type="password" id="password" size="20" /></td>
</tr>
<tr>
<td height="19">&nbsp;</td>
<td></td>
</tr>
<tr>
<td height="18" valign="top">&nbsp;</td>
<td valign="middle">
<input name="login" type="submit" id="login" value=" Login " onclick="getValue()" /></td>
</tr>
<tr>
<td height="28">&nbsp;</td>
<td></td>
</tr>
<tr bgcolor="#66FFFF">
<td height="18" colspan="2" valign="top">&nbsp;</td>
</tr>
</table>
</form>
</div>

</body>
</html>

Dari skrip di atas akan terdapat pesan error jika login tidak di isi (USERNAME n PASSWORD)




Buat file untuk nge cek login, nah disini kita tentukan username dan password untuk login
pertama kita tentukan username dan password yang akan di accept sebagai login yang benar, nah misalnya kita buat untuk varible ini baik username dan password nya:
$acc_user ====> username yang di accept
$acc_pas ====> password yang di accept

Jadi saya mau membuat login dengan
username: risky herdy
password: dianku

maka untuk pengecekan login saya buat:
$acc_user = 'risky herdy';
$acc_pas = 'dianku';

Karena di form tadi tujuan post nya adalah ceklogin.php
Code:
<form action="ceklogin.php" method="post">
$username ====> username buat login di form login
$password ====> password buat login di form login
maka nama file nya untuk mencek login saya buat ceklogin.php

ceklogin.php
<?php

$acc_user = 'risky herdy';
$acc_pas = 'dianku';
    if (isset($_POST['login']))
{
        $username = $_POST['username']; // diambil dari nama input di form login
        $password = $_POST['password']; // diambil dari nama input di form login
          
        if (($username==$acc_user) && ($password==$acc_pas))
            {
            session_start();
            $_SESSION['user'] = $username;
            echo 'Login berhasil, silahkan lanjutkan......'.
                '<br/>'.
                '<a href="index.script.php">Lanjutkan</a>'.
                '<br/>';
            } else {
            echo 'Username dan password salah'.
                '<br/>'.
                '<a href="login.php">Coba lagi</a>'.
                '<br/>';
            }
        }

?>

OK, terakhir buat halaman index nya yang hanya bisa di akses jika sudah di accept session dengan nama $_SESSION['user'] yang kita buat tadi, jika tidak akan di redirect ke halaman login.php
terlebih dahulu kita set variable session bernama $_SESSION[‘usern’] dan $_SESSION[‘passw’]. Variabel ini digunakan untuk memeriksa apakah user tertentu sudah memasukkan username dan password ataukah tidak.
index.script.php
<?php
session_start();
if (isset($_SESSION['user'])) // karena nama session buat login kita buat namanya adalah 'user' maka if isset($_SESSION['user']) ===> varibel penentu
    {
    $user = $_SESSION['user'];
    echo '<p align="center">'.
            '<b></b>'.
            '<br/><br/>
<h3 id="Pemrosesan Form">Pemrosesan Form</h3>
<p>
Buat aplikasi login form sederhana (tanpa database) yang terdiri dari field
   ID/Username dan Password. Gunakan variabel di PHP untuk mensimulasikan
   verifikasi data yang dimasukkan.
   Spesifikasi:
       <br> Terdapat scripting JavaScript untuk validasi awal (field tidak boleh
         kosong, masukan id dan password harus huruf). </br>
        <br>Jika field kosong dan langsung di-submit, kembalikan fokus kursor ke
         field pertama (id)
        Ada validasi sisi server (dari PHP) untuk memastikan bahwa nilai
         field adalah string. </br>
        <br>Jika nilai id dan password sesuai dengan pre-defined value di variabel,
         munculkan pesan selamat datang dan cetak nilai id. Sebaliknya, jika
         tidak sesuai, tampilkan pesan kegagalan. </br>
.<br/><br/>'.

            '<a href="login.php">Logout</a>'.
            '</p>';
    echo $user;
    } else {
    header('location: login.php');
    exit;
    }
?>
__Selamat Mencoba__


 

Senin, 27 September 2010

Membuat Aplikasi Form Pemesanan menggunakan JavaScript


Apa itu JavaScript????:D
Scripting merupakan jenis lain dari pemrograman, yang umumnya lebih mudah dipahami. Script dapat disisipkan ke dalam dokumen HTML dengan fmenggunakan tag <script>. Tidak seperti style sheet, script bisa terlihat didalam <head> ataupun <body>

Elemen Dasar JavaScript
  1. Kotak Dialog
JavaScript memungkinkan kita untuk menampilkan kotak dialog melalui fungsi alert(). Kotak dialog ini dapat dimanfaatkan untuk menyampaikan informasi atau konfirmasi.
  1. Merujuk Elemen
Salah satu kemampuan utama JavaScript adalah mengontrol objek-objek di halaman web. Sehubungan dengan hal ini, pendekatan yang bisa digunakan untuk mengacu atau mengakses elemen-elemen objek yaitu;
<form>
<input type="text" name="myName" id="myID" />
</form>
  1. Event
Setiap objek HTML mendefinisikan properti-properti, method-method, dan event-event. Salah satu event yang sangat populer dan frekuensi penggunaannya cukup tinggi adalah onclick. Event ini akan dipicu manakala objek—misalnya button atau teks—diklik.
  1. Me-retrieve Nilai
  • Text Field
Elemen text field menyediakan properti value yang bisa digunakan untuk menetapkan atau mendapatkan nilai elemen.
  • Select (Combo Box)
Secara umum, properti value tersedia di semua elemen HTML. Dengan demikian, kita juga bisa memanfaatkannya untuk mendapatkan nilai select atau combo box.
Untuk operasi cepat—tanpa perlu klik button—pada select, kita bisa menambahkan event onchange.
  • Check Box
Khusus untuk pengambilan nilai check box, terlebih dahulu kita perlu mengidentifikasi item yang dipilih.
OK, sekarang Qt ke penulisan tagnya ya.,,.

Contoh untuk form pemesanan. Simpan dengan mana form pemesanan.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Warung Mahal</title>
</head>

<body>
<script language="JavaScript" type="text/javascript">

<!--

function hitungPesan(){

var nota = document.form2;
var hargaBakso = 12000 * eval(nota.qBakso.value);
var hargaSoto = 10000 * eval(nota.qSoto.value);
var hargaMie = 15000 * eval(nota.qMie.value);
var hargaDegan = 5000 * eval(nota.qDegan.value);
var hargaCampur = 7000 * eval(nota.qCampur.value);
var jumlahTotal = hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;

if (jumlahTotal > 50000){

nota.Total.value = jumlahTotal;
nota.Diskon.value = 10000;
nota.Bayar.value = jumlahTotal - eval(nota.Diskon.value);

} else {

nota.Total.value = jumlahTotal;
nota.Diskon.value = 0;
nota.Bayar.value = jumlahTotal - eval(nota.Diskon.value);

}

}

function resetForm(){
document.form2.reset();

}

//-->

</script>

<!--Letakkan Listing Code JavaScript disini-->
<h3>Form Pemesanan Berbasis JavaScript</h3>
<form name="form2" action="#">
<table border="1px">

<tr>
<th>No</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>

<tr>
<td width="15px">1</td>
<td width="200px">Bakso Istimewa</td>
<td width="85px" bgcolor="#0000000">&#64; <input type="text" name="bakso" value="12000" size="6"disabled="true"/></td>
<td width="150px"><input type="text" name="qBakso" value="0" onChange="hitungPesan()"/></td>
</tr>

<tr>
<td>2</td>
<td>Soto Spesial</td>
<td bgcolor="#0000000">&#64; <input type="text" name="soto" value="10000" size="6" disabled="true"/></td>
<td><input type="text" name="qSoto" value="0" onChange="hitungPesan()"/></td>
</tr>

<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td bgcolor="#0000000">&#64; <input type="text" name="mie" value="15000" size="6" disabled="true"/></td>
<td><input type="text" name="qMie" value="0" onChange="hitungPesan()"/></td>
</tr>

<tr>
<td>4</td>
<td>Es Degan</td>
<td bgcolor="#0000000">&#64; <input type="text" name="degan" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="qDegan" value="0" onChange="hitungPesan()"/></td>
</tr>

<tr>
<td>5</td>
<td>Es Campur</td>
<td bgcolor="#0000000">&#64; <input type="text" name="campur" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="qCampur" value="0" onChange="hitungPesan()"/></td>
</tr>

<tr >
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="Total" disabled="true" /></td>
</tr>

<tr >
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="Diskon" disabled="true" /></td>
</tr>

<tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="Bayar" disabled="true" align="right"/></td>
</tr>

</table><br/>

<input type="button" value="BATAL" onClick="resetForm()" />

</form>

</body>
</html>


Demikian hasilnya :D…:



Ok, selamat mencoba ya… apabila belum puas… akan aQ perbaiki… Thanks Uda di baca.