apa mbuh: website

Showing posts with label website. Show all posts

Saturday, October 22, 2011

Membuat halaman login

Halaman login adalah fitur yang sering kita temui ketika mengunjungi website, fitur login diperlukan untuk membedakan hak akses, dan di setiap hak akses terdapat layanan yang berbeda. Jika Anda tergelitik hatinya untuk mengetahui proses pembuatan halaman login, maka Anda bisa menyimak langkah-langkah membuat halaman login di bawah ini.

1) Buatlah database bernama pengunjung

2) Didalam database pengunjung buatlah tabel bernama akun dengan rincian field sebagai berikut

Field	Type
ausernamea	varchar(50)
apassworda	varchar(50)

Jika sudah, masukkan data dibawah ini kedalam table akun yang sudah dibuat

ausernamea= joko23
apassworda= pasjoko12

3) Kemudian buka text editor yang biasa Anda gunakan untuk pemrograman, lalu salin kode yang berada didalam kotak teks dibawah ini

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Halaman Login</title><style type="text/css"></style></head><p> <p></p><p> <p></p><p> <p></p><p> <p></p><table width="100%" border="0" cellspacing="0"><form action="konfirmlogin.php" method="post">  <tr>    <td width="28%" rowspan="4"> </td>    <td colspan="2" bgcolor="#FF9900"><div align="center"><strong>Login</strong></div></td>    <td width="26%" rowspan="4"> </td>  </tr>  <tr>    <td width="16%" bgcolor="#0066FF"><div align="right" class="style1">User Name </div></td>    <td width="30%" bgcolor="#0066FF"><label>      <input name="username" type="text" id="username" />    </label></td>  </tr>  <tr>    <td bgcolor="#0066FF"><div align="right" class="style1">Password</div></td>    <td bgcolor="#0066FF"><input name="password" type="password" id="password" /></td>  </tr>  <tr>    <td colspan="2" bgcolor="#0066FF"><label>      <div align="center">        <input type="submit" name="Submit" value="Login" />      </div>    </label></td>  </tr>  </form></table>

4) Simpan file tersebut dengan nama login.php

5) Kemudian buat file baru lalu salin kode di bawah ini

6) Simpan file tersebut dengan nama koneksi.sql

7) Buat kembali file baru lalu salin kode di bawah ini

8) Simpan file tersebut dengan nama konfirmlogin.php

Sekarang jalankan alamat login.php lalu login menggunakan username diisi joko23 dan password diisi pasjoko12

Jika Anda berhasil login maka Anda akan melihat tulisan: Anda berhasil login ^_^

Jika Anda gagal login maka Anda akan melihat tulisan: Anda gagal login

Sebuah fitur halaman login berhasil Anda buat, Anda bisa mengembangkan skrip yang saya berikan untuk membuat halaman login yang lebih bagus.

Silahkan bereksperimen dan jika Anda ingin membahasnya bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada dibawah artikel ini.

Friday, August 26, 2011

Membuat validasi form website dengan Java Script, data tidak boleh kosong

Pada artikel ini akan kita bahas cara membuat validasi form di website. Maksudnya validasi adalah memeriksa apakah data yang dimasukkan oleh User sesuai dengan yang kita inginkan atau tidak, kalau iya maka data akan dikirim ke Server, jika sebaliknya maka akan ditahan sampai User memasukkan data sesuai dengan yang diminta. Di artikel ini kita akan membuat user tidak bisa mengirim data form jika masih ada field yang kosong(tidak diisi). Berikut langkahnya

1) Buka Macromedia Dreamweaver atau Web editor yang biasa Anda pakai

2) Buat proyek baru

3) Ketik skrip berikut

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Validasi Form data kosong</title>

</head>

<script language="javascript">

function validasi(){

return cekKosong('nama','Nama') &&

cekKosong('negara','Negara') &&

cekKosong('email','E-Mail') &&

cekKosong('alamat','Alamat Rumah') &&

cekKosong('umur','Umur');

}

function cekKosong(id,nama){

var isi= document.getElementById(id).value;

if(isi.length==0){

alert("Data "+nama+" tidak boleh kosong!!");

return false;

}

return true

}

</script>

<body>

<form id="form1" name="form1" method="post" action="" onsubmit="return validasi()">

<label> </label>

<table width="349" height="239" border="1" align="center">

<tr>

<td width="185"><div align="right">Nama</div></td>

<td width="148"><input name="nama" type="text" id="nama" /></td>

</tr>

<tr>

<td><div align="right">Asal Negara </div></td>

<td><input name="negara" type="text" id="negara" /></td>

</tr>

<tr>

<td><div align="right">E-Mail</div></td>

<td><input name="email" type="text" id="email" /></td>

</tr>

<tr>

<td><div align="right">Alamat Rumah </div></td>

<td><input name="alamat" type="text" id="alamat" /></td>

</tr>

<tr>

<td><div align="right">Umur</div></td>

<td><input name="umur" type="text" id="umur" /></td>

</tr>

<tr>

<td height="28" colspan="2"><label>

<div align="center">

<input type="submit" name="Submit" value="Submit" />

</div>

</label></td>

</tr>

</table>

<label></label>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p>  </p>

</form>

</body>

</html>

4) Simpan skrip tersebut kemudian jalankan di browser, Anda akan melihat contoh form yang membutuhkan validasi sebelum dikirim ke Server. Skrip yang saya berikan ini hanyalah skrip dasar, Anda bisa mengembangkan lebih jauh skrip tersebut agar bisa membuat validasi form yang lebih canggih.

Jika ada yang ingin Anda tanya silahkan isi pertanyaan di kotak komentar yang berada di bawah artikel ini

Membuat kalkulator dengan Java Script

Kali ini kita akan membuat aplikasi kalkulator yang berjalan di Web dengan menggunakan bahasa pemrograman Java Script. Ikuti langkah berikut

1) Buka Macromedia Dreamweaver atau Web Editor yang biasa Anda pakai

2) Buat proyek baru

3) Masukkan skrip dibawah ini

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Kalkulator</title>

</head>

<script language="javascript">

function operasi(jenis){

var angka1=document.getElementById('angka1').value;

var angka2=document.getElementById('angka2').value;

var hasil;

if(jenis=='plus'){

var hasil= Number(angka1)+Number(angka2);

}

if(jenis=='min'){

var hasil= Number(angka1)-Number(angka2);

}

if(jenis=='kali'){

var hasil= Number(angka1)*Number(angka2);

}

if(jenis=='bagi'){

var hasil= Number(angka1)/Number(angka2);

}

document.getElementById('hasil').value=hasil;

}

</script>

<body>

<form id="form1" name="form1" >

<label>

<div align="center">Angka 1

<input name="angka1" type="text" id="angka1" />

</div>

</label>

<p align="center">

<label>

Angka 2

<input name="angka2" type="text" id="angka2" />

</label>

</p>

<p align="center">

<label>

<input type="button" name="Submit" value="+" onclick="operasi('plus')" />

</label>

<label>

<input type="button" name="Submit2" value="-" onclick="operasi('min')" />

</label>

<label>

<input type="button" name="Submit3" value="X" onclick="operasi('kali')" />

</label>

<label>

<input type="button" name="Submit4" value=":" onclick="operasi('bagi')" />

</label>

</p>

<p align="center">

<label>

Hasil

<input name="hasil" type="text" id="hasil" />

</label>

</p>

</form>

</body>

</html>

4) Simpan skrip tersebut kemudian jalankan di web browser. Anda telah berhasil membuat aplikasi kalkulator untuk website

Jika ada yang tidak Anda pahami dari skrip di atas, silahkan isi pertanyaan pada kotak komentar yang berada di bawah artikel ini

Sunday, June 5, 2011

Menginstal XAMPP di Windows

1) Download XAMPP dari situs aslinya di: http://www.apachefriends.org/en/xampp.html

2) Jalankan file installernya

3) Pilih bahasa Inggris sebagai bahasa softwarenya

4) Klik OK

5)

Klik Next >

6)

Pilih Folder untuk menyimpan program Xampp dengan mengklik tombol Browse.. tetapi jika Anda ingin menggunakan alamat folder asli yang sudah ditetapkan. Lanjutkan saja dengan mengklik tombol Next >

7) Kasih tanda cek pada bagian Install Apache as service dan Install MySQL as service

Kemudian klik tombol Install

8) Anda akan melihat proses penginstalan seperti gambar dibawah ini

Tunggu beberapa saat hingga proses selesai

9) Anda akan melihat tampilan yang memberitahu bahwa proses install telah selesai

Tekan tombol Finish

Penginstalan telah selsai dilakukan ^_^

Tuesday, May 3, 2011

Membuat Text Field dengan HTML

Text Field adalah kotak berukuran kecil yang digunakan untuk memasukkan data. Dibawah ini adalah skrip HTML untuk membuat Text Field

<INPUT TYPE TEXT>

Hasilnya

Jika ingin menambahkan isi yang muncul otomatis saat website dibuka maka gunakan tambahan Value='isi text field' seperti contoh dibawah ini

<INPUT TYPE TEXT VALUE='tulisan'>

Hasilnya

Jika ingin agar Text Field yang dibuat tidak bisa diedit ketika dibuka di browser maka tambahkan skrip readonly='true' seperti contoh dibawah ini

<INPUT TYPE TEXT VALUE='tulisan' readonly='true'>

Hasilnya

Memasukkan gambar kedalam file HTML dengan Macromedia Dreamweaver

1. Jalankan program Macromedia Dreamweaver

2. Buat proyek baru kemudian pilih tab design

3. Klik Insert -> Image

4. Pilih gambar yang ingin dimasukkan kedalam HTML

3. Jika sudah, pilih gambar itu kemudian klik OK

4. Gambar berhasil di import kedalam HTML

Membuat tabel HTML dengan Macromedia Dreamweaver

1. Jalankan Macromedia Dreamweaver kemudian buat proyek baru

2. Pilih tab Design

3. Klik Inset -> Table

4. Masukkan jumlah kolom dan jumlah baris, Anda juga bisa menentukan hal lainnya seperti luas(width) tabel tetapi tidak di wajibkan

5. Jika sudah, klik OK maka sebuah tabel telah tercipta

Monday, May 2, 2011

AllWebMenus

Membuat menu untuk sebuah website adalah hal wajib, karena menu merupakan sarana navigasi pengunjung untuk menjelajahi konten suatu website. Bagi para pembuatnya bisa menggunakan program-program pembuat menu web, salah satunya adalah AllWebMenus. Software ini membantu Anda dalam membuat menu-menu yang interaktif dan indah dilihat. Anda tidak perlu pusing akan pemrograman karena hanya diperlukan klik untuk membuat menu dan bisa langsung di pasang di website Anda.

Bisa di download di http://allwebmenus-pro.en.softonic.com/

ZZEE ART HTML

Bisa di download di http://www.zzee.com/

Sunday, May 1, 2011

Trendy Flash Site Builder

Berfungsi untuk membuat tampilan website dalam bentuk animasi flash yang mengagumkan, membantu Anda yang bergerak dalam bidang web developing

Bisa di download di http://trendy-flash-site-builder.en.softonic.com/

Saturday, April 30, 2011

Membuat Buku Tamu dengan PHP

Ketika kita mengunjungi sebuah website/blog kadang kita melihat menu bertuliskan Guest Book, Buku Tamu, atau Pesan yang mengarah ke halaman di mana kita bisa menulis pesan kepada pengunjung lain atau kepada administrator. halaman tersebut kadang bisa kita dapatkan dengan bantuan jasa situ pembuatan Buku Tamu atau membuat sendiri.

Dengan bantuan PHP dan database MySQL hal ini bisa di wujudkan. Pada Artikel ini kita akan membuat halaman Buku Tamu, halaman tersebut meminta pengunjung untuk memasukkan Nama, EMail, Judul Pesan dan Pesan. Berikut langkahnya yang di buat dengan menggunakan Macromedia Dreamweaver 8.

1. Jalankan Macromedia Dreamweaver atau program lain yang biasa Anda gunakan untuk membuat Web. Kemudian buat file baru

2. Klik tombol Insert -> Table

3. Masukkan 5 pada Rows dan 2 pada Columns

4. Klik OK

5. Susun tabel supaya mirip dengan gambar berikut

6. Klik pada kolum sebelah kanan Nama, kemudian klik Insert -> Form -> Text Field

7. Jika muncul window berjudul Input Tag Accessibility Attributes pilih OK, jika muncul pertanyaan Add form tag?? pilih No

8. Sekarang terdapat Field Teks di samping Nama

9. Lakukan hal yang sama pada bagian E-Mail dan Judul Pesan

10. Jika sudah klik kolom sebelah kanan kolom Pesan

11. Klik Insert -> Form Textarea

11. Jika muncul window berjudul Input Tag Accessibility Attributes pilih OK, jika muncul pertanyaan Add form tag?? pilih No

12. Sekarang terdapat Field Area di samping Pesan

13. Klik kanan pada Text Area kemudian klik Properties

14. Pada Char width isi 28, pada Num Lines 8, pada TextField isi pesan

15. Klik kolom yang berada di bawah Text Area

16. Klik Insert -> Form -> Button

17. Jika muncul window berjudul Input Tag Accessibility Attributes pilih OK, jika muncul pertanyaan Add form tag?? pilih No

18. Sekarang sebuah tombol telah terbentuk

Ini adalah gambar Form yang sudah jadi

Sebuah Form telah kita bentuk, sekarang kita harus mengatur proses kerja Form, ikuti langkah berikut

1. Pindah ke Tab Code

2. Carilah tulisan kode

3. Ketikkan kode <form action="kirimPesan.php" method="post" enctype="multipart/form-data">

Pada bagian Text Field isi dengan nama

9. Klik kanan Text Field pada bagian E-Mail kemudian pilih properties

Pada bagian Text Field isi dengan email

10. Klik kanan Text Field pada bagian Judul Pesan kemudian pilih properties

Pada bagian Text Field isi dengan judulPesan

Save file dengan nama form.php

Form dan Prosesnya telah selesai dibuat, sekarang saatnya membuat kode PHP yang akan menyimpan data yang dimasukkan dari halaman Form.

1. Buat sebuah file baru, pilih tab Code kemudian hapus semua kode yang ada

2. Ketik kode di bawah ini

=============================================

<?php

$sql=mysql_connect("localhost","root","");

mysql_select_db("proyekPHP",$sql);

$nama=$_POST['nama'];

$email=$_POST['email'];

$judulPesan=$_POST['judulPesan'];

$pesan=$_POST['pesan'];

$entri=mysql_query("INSERT INTO bukutamu VALUES('$nama','$email','$judulPesan','$pesan')",$sql);

if($entri){

print("Terimakasih $nama, Pesan Anda sudah kami simpan<br>");

include("form.php");

} else {

print("Terdapat kesalahan<br>");

}

?>

==================================================

Save file dengan nama kirimPesan.php

Oke mari kita cek lagi, Form telah dibuat, Skrip PHP telah dibuat, maka langkah terakhir adalah menyiapkan database yang akan menyimpan Pesan yang dimasukkan. Sebelumnya Anda harus menginstal MySQL, biasanya server lokal seperti Xampp sudah menyediakan service install MySQL saat melakukan penginstalan, sehingga tidak menyulitkan Anda untuk mencari MySQL.

Jika MySQL sudah siap, lakukan langkah berikut.

1. Masuk ke localhost

2. Klik phpMyAdmin

3. Pada Create new database masukkan proyekPHP, kemudian klik Create

4. Pada Create new table on database proyekPHP masukkan bukutamu, pada Number of fields masukkan 4, kemudian klik Go

5. Masukkan field dan Type sesuai dengan gambar berikut

6. Jika sudah klik Save

7. Sekarang table bukutamu yang berfungsi untuk menyimpan pesan telah tercipta

Lakukan ceklist!!!

-Form= Sudah

-Skrip PHP=Sudah

-Database=Sudah

Oke semuanya sudah kita buat, sekarang lakukan test.

Apakah semuanya sesuai dengan yang diharapkan?? Jika iya maka Anda telah berhasil membuat buku tamu sendiri, jika tidak, bahas di blog ini melalui kotak komentar yang berada di bawah Artikel ini agar kita semua bisa mengEvaluasi.

Perhatian: Tutorial pada Artikel ini hanya membuat buku tamu dalam tampilan yang sederhana, Anda bisa mengembangkan buku tamu ini agar menjadi lebih baik