Date and File

Kali ini kita akan membuat aplikasi pengolah data berbasis file ini adalah ptongan scriptnya :
<div id="form">
<h2 align="center">Data Mahasiswa</h2>
<hr style="color:#3ebee9; border:double;" align="center" width="300"/>
<form action="<?php $_SERVER['PHP_SELF'];?>" method="post">
<div id="Input">
No:<br /> <input type="text" name="no"/><br />
Nama:<br /> <input type="text" name="nama"/><br />
Alamat:<br /> <input type="text" name="alamat"/><br />
</div>
<div id="btnLogin">
<input type="submit" name="OK" value="OK"/>
</div>
</form>
</div>


<?php
$id=mysql_connect("localhost", "root", "");
$db=mysql_select_db("mahasiswa",$id);
if(!$db)
echo "gagal<br>";
else
echo "berhasil koneksi ke data base<br>";
echo("<table width=250 align=center border=1 cellspacing=0 cellpadding=0 bordercolor=#0000FF><tr>");
echo("<th align='center'>No</th>");
echo("<th align='center'>Nama</th>");
echo("<th align='center'>Alamat</th>");
if (isset($_POST['OK'])){
$no = $_POST['no'];
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$proses = "insert into nama set no ='$no', nama='$nama',
alamat='$alamat'";
$simpan= mysql_query($proses);
if ($simpan) {
echo "<font size=5>Data Disimpan </font><br>";
}else{
echo "<font size=5>Data Gagal Disimpan </font><br>";
}
}
$hasil = mysql_query("select* from nama", $id);
while($row=mysql_fetch_array($hasil)){
$isino = $row["no"];
$isinama=$row["nama"];
$isialamat=$row["alamat"];
echo("<tr><td align='center'>$isino</td>");
echo("<td align='center'>$isinama</td>");
echo("<td align='center'>$isialamat</td></tr>");
}

?>

Selengkapnya......

Membuat Login form sederhana

Kali ini saya akan coba sharing tentang cara membuat Login form sederhana tanpa menggunakan database. Form yang akan dibuat terdiri dari userid dan password dan memiliki spesifikasi:
1.Terdapat scripting JavaScript untuk validasi awal (field tidak boleh kosong, masukkan id dan password harus huruf)
2.Jika field kosong dan langsung di-submit, kembalikan fokus kursor ke field pertama (id)
3.Ada validasi sisi server (dari PHP) untuk memastikan bahwa nilai field adalah string
4.Jika nilai id dan password sesuai dengan pre-defiined value di variabel

ini adalah potongan script untuk PHPnya
<script language="JavaScript" type="text/javascript">
function cekuser(a)
{
re = /^[A-Za-z]{1,}$/;
return re.test(a);
}
function cekpassword(a)
{
re = /^[A-Za-z]{8,}$/;
return re.test(a);
}
function checkForm(b)
{
if (!cekuser(b.username.value))
{
alert("Isi username dan password dengan benar!!!keduanya harus berupa huruf!! ");
b.username.focus();
return false;
}
if (!cekpassword(b.password.value))
{
alert("Masukkan Password yang benar!! Password minimal terdiri dari 8 huruf!!");
b.password.focus();
return false;
}
return true;
}
</script>

<div id="wrapper">
<div id="opo1">
<form name="form1" action="<?php $_SERVER['PHP_SELF'];?>" method="post" onsubmit="return checkForm(this)">
<div id="Login">Login</div>
<hr align="center"width="370"color="red">
<div id="user">Username<br/> <input type ="text" name ="username" /></div>
<div id="pass">Password<br/> <input type ="text" name ="password" /></div>
<div id="ok"><input type ="submit" value="LOGIN" /></div>
</form>
</div>
<div id="opo2">
<?php
if (is_string($_POST['username'])){
if (($_POST['password']=='teknikum')&&($_POST['username']=='elektroum')){echo 'welcome : ' .$_POST['username'];}
else{echo 'Username dan Password SALAH!!!';}
}
?>
</div>
</div>

dan untuk css-nya:
#wrapper{
margin:auto;
width:750px;
height : 600px;
background: #69e0f5;
}
#opo1{
margin:50px auto;
width:400px;
height : 305px;
background: #b4edf7;
border: 4px solid red;
}
#opo2{
margin:auto;
width:400px;
height : 90px;
font-family: garamond;
font-size: 30px;
color:red;
}
#ok{
margin:30px 60px auto;
}
#Login{
margin: 30px 60px auto;
font-family: arial;
font-size: 45px;
color:blue;
}
#user{
margin: 30px 60px auto;
font-family: timesnewroman;
font-size: 15px;
color:black;

}
#pass{
margin: 20px 60px auto;
font-family: timesnewroman;
font-size: 15px;
color:black;
}

Selengkapnya......

Buat tabel fleksibel dengan php

PHP mempunyai fitur untuk membuat tabel yang fleksibel. Sehingga kita akan dimudahkan dalam membuat tabel yang baik.
Kali ini saya akan mencoba untuk sharing tentang cara membuat tabel fleksibel dengan PHP. DI sini akan disiapkan kode html dan php. Kode html untuk mengenerate tabel yang digunakan yaitu berapa jumlah kolomnya,jumlah barisnya, dan jumlah total cellnya. Dan kode php sebagai hasil dari generate tabel yang dilakukan pada kode html. Berikut adalah screenshotnya:

dan ini adalah potongan scriptnya untuk yg html
<body>
<form method="post" action="generate.php">
<p><strong>TABEL GENERATOR</strong></p>
<table width="277" border="0">
<tr>
<td width="89">Rows</td>
<td width="172"><strong>: </strong><input name="RowsTotal" type="text" id="RowsTotal" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr>
<td><label>Columns</label></td>
<td><strong>: </strong><input name="ColumnsTotal" type="text" id="ColumnsTotal" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr>
<td>Cell Total </td>
<td><strong>: </strong><input name="CellsTotal" type="text" id="CellsTotal" onKeyUp="getmax();" onFocus="this.select();"></td>
</tr>
<tr>
<td>Max Cells </td>
<td><strong>: </strong><input name="maxcells" type="text" id="maxcells" readonly="readonly" style="background-color:#999999">
</td>
</tr>
<tr>
<td>
<div align="center">
<br />
<input type="reset" name="Reset" value="Reset">
</div></td>
<td>
<div align="right">
<br />
<input type="submit" name="Generate" value="Generate!">
</div></td>
</tr>
</table>
</form>

<script language="JavaScript" type="text/javascript">
<!--
function getmax() {
var R = parseInt(document.getElementById('RowsTotal').value);
var C = parseInt(document.getElementById('ColumnsTotal').value);
var X = parseInt(document.getElementById('CellsTotal').value);
var cellmax = document.getElementById('maxcells');
var total = 'N/A';
total = R * C;
cellmax.value = new String(total);
if (X > total)
{
alert('Limit Exceed, max cells is ' + total);
document.getElementById('CellsTotal').value = new String();
}
}
//-->
</script>


dan ini adalah script untuk yang PHPnya
<body>
<?php
$rows = 1;
$columns = 1;
$cells = 1;
?>

<?php $rows = (int) $_POST["RowsTotal"]; ?>
<?php $columns = (int) $_POST["ColumnsTotal"]; ?>
<?php $cells = (int) $_POST["CellsTotal"]; ?>

You pick <?php echo $rows; ?> rows,<br />
You pick <?php echo $columns; ?> columns,<br />
and you need <?php echo $cells; ?> cells,<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>";
?>
</body>

Selengkapnya......

Pass by value dan Pass by reference PHP

Passby1.php
function pass($value, $tambah = 1)
{
$value = $value +$tambah;
}
$value = 10;
pass ($value);
echo $value;
?>
//print out
10
Script diatas akan menghasilkan $value = 10 bukan $value = 11 mengapa ? hal ini disebabkan karena peraturan scope variable. Kode $value = 10 akan membuat sebuah variable bernama value dan bernilai 10, kemudian pada baris pass ($value); fungsi pass dipanggil. Selanjutnya $value = 10 diproses, $value = $value +$tambah;, dengan begitu nilai dari $value = 11, sesuai dengan peraturan scope varibel, $value = 11 hanya akan sampai pada baris terakhir pada fungsi, nilai yang telah diolah tidak akan dapat dipakai di luar, singkatnya bersifat local variable.

Pass by value dan Pass by reference adalah cara bagaimana variable diolah.
Pass by value, variable yang diberikan oleh parameter hanya akan diolah didalam fungsi,
variable yang berada diluar fungsi akan tetap. Dengan kata lain variable yang dipakai oleh suatu
fungsi tidak akan mempengaruhi variable yang ada diluar.
Pass by reference, jika pada pass by value, nilai hasil olahan tidak dapat digunakan diluar fungsi, maka pass by reference sebaliknya, hasil olahan yang telah diproses di dalam fungsi dapat digunakan di luar fungsi, dengan kata lain value yang di luar fungsi akan turut berubah seiring
perubahan yang terjadi pada variable didalam fungsi.
Passbyrefence.php
Function passref(&$value, $tambah=1)
{
$value = $value + $tambah;
}
$x = 10;
Echo “nilai sebelum fungsi ”. $x.”
”;
Passref($x);
Echo “nilai sesudah fungsi ”. $x.”
”;
?>
//print out
nilai sebelum fungsi 10
nilai sesudah fungsi 11

Note :
Pemahaman yang mendalam mengenai scope variable, pass by value dan pass by reference
amatlah penting, karena dalam web development skala besar hal-hal diatas amatlah diperlukan, terutama dalam hal efisiensi kode program.

Selengkapnya......

Membuat Form Pemesanan dengan Javascript

Ini merupakan lanjutan dari postingan saya yang sebelumnya. Kali ini kita akan membuat form pemesanan makanan dengan javascript. Ini adalah screenshotnya (klik gmbr untuk memperbesar)

Kolom harga bersifat read only,jadi nilainya tetap dan tidak akan bisa di edit nilainya.
Sedangkan kolom Pesan bisa berubah sesuai dengan jumlah makanan yang kita pesan. Setelah itu harga yang harus di bayar akan tampil di baris paling bawah. Harga tersebut sudah dikuranngi dengan diskon Rp5000. Dan jika ingin membatalkan pesanan kita dapat menekan tombol "reset". Inilah adalah script dari tombol reset

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

Dan ini adalah script yang ditulis di antara tag <script>...</script> yg merupakan ciri khas dari 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();
}

Selengkapnya......

Membuat Kalkulator sederhana dengan JavaScript

Kali ini saya akan mencoba untuk membhahas tentang java script. Sebelum mencoba javascript alangkah baiknya kita mengenal lebih dulu apa itu javasvript. Karena ada pepatah "tak kenal maka tak sayang".
JavaScript adalah nama implementasi Netscape Communications Corporation untuk ECMAScript standar, suatu bahasa skrip yang didasarkan pada konsep pemrograman berbasis prototipe. Bahasa ini terutama terkenal karena penggunaannya di situs web (sebagai JavaScript sisi klien) dan juga digunakan untuk menyediakan akses skrip untuk objek yang dibenamkan (embedded) di aplikasi lain.
Walaupun memiliki nama serupa, JavaScript hanya sedikit berhubungan dengan bahasa pemrograman Java, dengan kesamaan utamanya adalah penggunaan sintaks C. Secara semantik, JavaScript memiliki lebih banyak kesamaan dengan bahasa pemrograman Self.
Skrip JavaScript yang dimasukkan di dalam berkas HTML ataupun XHTML harus dimasukkan di antara tag <script>...</script>.
Ouwke karena kita sudah mengenal apa itu javascript. Mari sekarang kita langsung menerapkannya. Kita akan membuat kalkulator sederhana. Di bawah ini contoh tampilannya (klik gmbr untuk memperbesar)


berikut ini adalah
script yang ditulis diantara tag <script>...</script>

function hitung()
{
var myForm = document.form1;
var x=eval(myForm.x.value);
var y=eval(myForm.y.value);
var pil= myForm.tanda.value;
if (pil == "tambah")
{
var z = x + y;
}
else if (pil == "kurang")
{
var z = x - y;
}
else if (pil == "kali")
{
var z = x * y;
}
else if (pil == "bagi")
{
var z = x / y;
}
myForm.hasil.value = z;

}
function resetForm()
{
document.form1.reset();
}

Selengkapnya......

css part 3

Tampilan web pada postingan saya yang sebelumnya masih belum menarik, karena itu hanya merupakan kerangkanya saja. Kali ini saya akan mencoba untuk mengisi kerangka tersebut sehingga akan tampak lebih menarik dan atraktif.

berikut adalah potongan scriptnya:

<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Sitemap | RSS | Contact | About Us
</div>
<div id="logo">
<img src="UM.png" width="65"/>
</div>
<div id="site-title">
<h2>TEKNIK ELEKTRO</h2>
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content-top">
<img src="rektor.jpg" width="420"height="150"/>
<img src="h5.jpg" width="355"height="150"/>
</div>
<div id="content-main">
<h3>Presentasi dari TecQuipment Ltd, UK</h3>
<hr />
<p class="style1">
Minggu, 28 Februari 2010
<p>
Hari Selasa kemarin (16/02/2010) Universitas Negeri Malang kedatangan tamu dari TecQuipment Ltd, United Kingdom. Tamu dari perusahaan produsen peralatan pendukung pembelajaran keteknikan ini bermaksud menjalin hubungan kerjasama sekaligus mempresentasikan produk-produknya. Secara kebetulan, lokasi kegiatan dipusatkan di Jurusan Teknik Elektro, tepatnya di Lab. Multimedia.Kegiatan presentasi selain dihadiri bapak ibu dosen Jurusan Teknik Elektro juga dihadiri oleh beberapa undangan dari jurusan-jurusan lain. [...]
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Lomba Fotografi</a></li>
<li><a href="#">Pelantikan KORPS ASISTEN</a></li>
<li><a href="#">Lomba Desain Grafis</a></li>
<li><a href="#">Seminar Nasional</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<br />
<p><b>&#169; 2010 Teknik Elektro UM. Malang, Indonesia.</b></p>
</div>
</div>

Selengkapnya......

css part 2

Kali ini saya akan sharing tentang mengatur halaman web dengan menggunakan division.
ini adalah contoh web yang menggunakan division

sekilas memang terlihat pengaturannya menggunakan tabel,tetapi sebenarnya adalah memakai division.Karena cara ini lebih fleksibel dalam mengatur halaman web sehingga nanti tampilannya tidak akan kaku.

Berikut adalah cuplikan sriptnya:

<head>
<title>Tugas 2.1</title>
<link type="text/css" rel="stylesheet" href="layout2.css" />
</head>
<body >
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="content">
<div id="content-top">
top
</div>
<div id="content-main">
content
</div>
<div id="content-right">
right
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>

Selengkapnya......

CSS part 1

Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).
Berikut ini adalah contoh header web dengan menggunakan css:

Berikut ini adalah potongan dari scriptnya:

Selengkapnya......

AYO MEMBUAT WEB part 3

yaaaaa...ketemu lagi....!!!
kali ini saya akan mencoba untuk sharing tentang membuat tabel pada halaman web.....
Daripada terlalu banyak bosa-basi,mari kita langsung to the point.....,,,

ini adalah contoh gambarnya:






untuk code tabel pertama bisa di download di sini


dan untuk yang kedua di sini

Selengkapnya......

AYO MEMBUAT HALAMAN WEB part 2

A. Membuat Dokumen HTML
1. Buka editor teks (notepad)
2. Ketikkan kode-kode HTML berikut:


3. Simpan dokumen HTML dengan format “nama.html” (tanpa tanda petik) dan letakkan di lokasi direktori web, misal C:\wamp\www\coba (coba merupakan sub direktori yang ada di dalam folder www)

B. Membuat Dokumen HTML Standar
1. Buka editor teks (notepad)
2. Ketikkan kode-kode HTML berikut:


3. Simpan dokumen HTML dengan format “nama.html” (tanpa tanda petik) dan letakkan di lokasi direktori web, misal C:\wamp\www\coba (coba merupakan sub direktori yang ada di dalam folder www)


Perhatikan perbedaan 2 kode di atas. Apa perbedaannya?
Ya benar, perbedaannya terletak pada tanda di pojok kanan bawah. Jika tanda berupa tanda seru seperti pada gambar ke-1 berarti halaman web tersebut belum valid. Sedanagkan jika tanda berupa tanda centang seperti pada gambar ke-2 berarti halaman web tersebut sudah valid atau well-formed (tanda itu hanya akan muncul jika anda telah menginstal HTML validator)

Selengkapnya......

AYO MEMBUAT HALAMAN WEB part 1

Sebelum kita belajar membuat halaman web alangkah baiknya kita mengenal dulu apa itu web. Secara terminologi, website adalah kumpulan dari halaman-halaman situs, yang biasanya terangkum dalam sebuah domain atau subdomain, yang tempatnya berada di dalam World Wide Web (WWW) di Internet. Sebuah halaman web adalah dokumen yang ditulis dalam format HTML (Hyper Text Markup Language), yang hampir selalu bisa diakses melalui HTTP, yaitu protokol yang menyampaikan informasi dari server website untuk ditampilkan kepada para pemakai melalui web browser. Semua publikasi dari website-website tersebut dapat membentuk sebuah jaringan informasi yang sangat besar.

Halaman-halaman dari website akan bisa diakses melalui sebuah URL yang biasa disebut Homepage. URL ini mengatur halaman-halaman situs untuk menjadi sebuah hirarki, meskipun, hyperlink-hyperlink yang ada di halaman tersebut mengatur para pembaca dan memberitahu mereka sususan keseluruhan dan bagaimana arus informasi ini berjalan.

Beberapa website membutuhkan subskripsi (data masukan) agar para user bisa mengakses sebagian atau keseluruhan isi website tersebut. Contohnya, ada beberapa situs-situs bisnis, situs-situs e-mail gratisan, yang membutuhkan subkripsi agar kita bisa mengakses situs tersebut.

HTML dan XHTML
HTML (Hypertext Markup Language) merupakan sebuah bahasa markup, bukan bahasa pemrograman. Bahasa markup (Indonesia: markah) adalah bahasa yang mengombinasikan teks dan informasi tambahan mengenai teks tersebut. HTML merupakan dokumen standar yang digunakan untuk mendesain halaman web.
Pada awal tahun 2000, W3C (World Wide Web Consortium) membuat perubahan besar melalui XHTML (eXtensible Hypertext Markup Language). Ide dasarnya, dalam upaya meningkatkan kompatibilitas dokumen HTML, W3C menambahkan struktur dan ekstensibilitas XML (eXtensible Markup Language) ke HTML.
2. Struktur Dokumen HTML
Setiap dokumen HTML harus diawali dengan tag dan diakhiri dengan komplemennya, yakni tag tag. Sebagai tambahan, dokumen HTML juga menyertakan tiga pasang tag.
• Tag dan : digunakan untuk menyatakan informasi mengenai dokumen HTML.
• Tag : digunakan untuk menambahkan title di title bar browser.
• Tag dan : digunakan untuk melingkupi semua teks yang terdapat di halaman HTML.
Di samping elemen utama di atas, masih terdapat berbagai jenis elemen yang dapat digunakan di dalam dokumen HTML. Salah satu elemen yang perlu diperhatikan adalah untuk penulisan komentar. Di HTML, komentar dinyatakan dengan tag .
Berikut ini adalah kebutuhan-kebutuhan yang minimal diperlukan:
a. WampServer
Paket web server Apache, PHP, dan MySQL. Alasan pemilihan paket bundel seperti ini dikarenakan praktis sehingga tinggal memfokuskan pada pemrograman.
b. Web Browser
disarankan menggunakan browser utama Mozilla Firefox.
c. Editor Teks
Editor teks untuk menuliskan kode-kode HTML pembentuk halaman aplikasi web
d. HTML Validator
Untuk menghasilkan dokumen HTML yang valid, sebaiknya memasang validator, misalnya berupa add-on pada browser Firefox.

Selengkapnya......