Archive for Maret, 2014

Membuat Kalkulator Sederhana dengan menggunakan PHP

Assalamualaikum Wr. Wb

Kali ini saya akan beri tutorial tentang membuat kalkulator sederhana menggunakan PHP

 

Langsung saja berikut source codenya.

Penjumlahan :


<!DOCTYPE html> <!--menunjukkkan HTML versi 5-->

<html> <!--Tag <html> memberitahu browser bahwa ini adalah dokumen HTML
Tag <html> merupakan akar dari sebuah dokumen HTML.
Tag <html> merupakan wadah bagi semua elemen HTML lain (kecuali untuk <! DOCTYPE> tag).-->

<head> <!--Tanda <head> merupakan wadah untuk semua elemen kepala-->
<title> Web Penjumlahan</title> <!--membuat judul halaman web-->
</head>

<body> <!--Tanda <body> mendefinisikan tubuh dokumen-->
<h1 align = "center">PENJUMLAHAN</h1> <!--memberikan tulisan judul Penjumlahan bertype heading 1 dengan rata tengah-->
<form method = "post"> <!--Tanda <form> digunakan untuk membuat bentuk HTML dari input pengguna-->
<!--method = "post" untuk menunjukkkan hasil submit, hanya di tampilkan saja tanpa meneruskan URL-->
<table border="5" align = "center"> <!--membuat tabel dengan frame ukuran 5 dan rata tengah-->
<tr> <!--Tanda <tr> mendefinisikan baris dalam sebuah tabel HTML-->
<td align = "center"> Angka 1 </td> <!--Baris tabel Angka 1 dengan rata tengah-->
<td><input type = "number" name = "angka1" value="<?php echo $_POST['angka1'];?>" required></td> <!--Menginputkan nomer pada textfield dgn nama angka1, Required menunjukkan peringatan bahwa kolom tidak boleh kosong-->
</tr> <!--Tanda <tr> mendefinisikan baris dalam sebuah tabel HTML-->

<tr> <!--Tanda <tr> mendefinisikan baris dalam sebuah tabel HTML-->
<td align = "center"> Angka 2 </td> <!--Kolom tabel Angka 2 dengan rata tengah-->
<td><input type = "number" name = "angka2" value="<?php echo $_POST['angka2'];?>" required></td> <!--Menginputkan nomer pada textfield dgn nama angka2, Required menunjukkan peringatan bahwa kolom tidak boleh kosong-->

<?php //menunjukkan script PHP untuk melakukan perhitungan matematika//
if(isset($_POST["penjumlahan"])) { //isset menunjukkan nilai true, apabila true akan menjalankan perhitungan//
$hasil = $_POST["angka1"]+ $_POST["angka2"]; //rumus hitung penjumlahan//
}
?>
<td align = "center">+</td> <!--Kolom untuk menulis tanda plus dgn rata tengah-->
</tr>

<tr> <!--Tanda <tr> mendefinisikan baris dalam sebuah tabel HTML-->
<td align = "center"> Hasil Penjumlahan</td> <!--Kolom untuk menulis hasil penjumlahan dgn rata tengah-->
<td><input type = "text" name = "hasil" disabled value="<?php echo $hasil;?>"></td> <!--menampilkan hasil perhitungan pada textfield yg tidak bisa di edit, tanda echo untuk mengeksekusi-->
<td><input type= "submit" name = "penjumlahan" value = "Hitung"></td> <!--membuat submit tombol hitung untuk melakukan penjumlahan-->
</tr>
</table>
</form>
<body>
</html>

 

Dan tampilannya :

jumlah

 

Pengurangan :


<!DOCTYPE html>

<html>
<head>
<title> Web Penguragan</title>
</head>
<body>
<h1 align = "center">PENGURANGAN</h1> <!--memberikan tulisan judul Pengurangan bertype heading 1 dengan rata tengah-->
<form method = "post">
<table border="5" align = "center">
<tr>
<td align = "center"> Angka 1 </td>
<td><input type = "number" name = "angka1" value="<?php echo $_POST['angka1'];?>" required></td>
</tr>

<tr>
<td align = "center"> Angka 2 </td>
<td><input type = "number" name = "angka2" value="<?php echo $_POST['angka2'];?>" required></td>

<?php
if(isset($_POST["pengurangan"])) {
$hasil = $_POST["angka1"]- $_POST["angka2"]; //rumus hitung pengurangan//
}
?>
<td align = "center">-</td>
</tr>

<tr>
<td align = "center"> Hasil Pengurangan</td>
<td><input type = "text" name = "hasil" disabled value="<?php echo $hasil;?>"></td>
<td><input type= "submit" name = "pengurangan" value = "Hitung"></td> <!--membuat submit tombol hitung untuk melakukan pengurangan-->
</tr>
</table>
</form>
<body>
</html>

[/soucecode]

&nbsp;

Dan tampilannya :

<a href="https://abdulwafi6661.wordpress.com/wp-content/uploads/2014/03/kurang.jpg"><img class="alignnone size-full wp-image-123" src="https://abdulwafi6661.wordpress.com/wp-content/uploads/2014/03/kurang.jpg" alt="kurang" width="507" height="227" /></a>

<strong>Perkalian : </strong>



<!DOCTYPE html>

<html>
<head>
<title> Web Perkalian</title>
</head>
<body>
<h1 align = "center">PERKALIAN</h1> <!--memberikan tulisan judul Perkalian bertype heading 1 dengan rata tengah-->
<form method = "post">
<table border="5" align = "center">
<tr>
<td align = "center"> Angka 1 </td>
<td><input type = "number" name = "angka1" value="<?php echo $_POST['angka1'];?>" required></td>
</tr>

<tr>
<td align = "center"> Angka 2 </td>
<td><input type = "number" name = "angka2" value="<?php echo $_POST['angka2'];?>" required></td>

<?php
if(isset($_POST["perkalian"])) {
$hasil = $_POST["angka1"]* $_POST["angka2"]; //rumus hitung perkalian//
}
?>
<td align = "center">x</td> <!--Kolom untuk menulis tanda kali dgn rata tengah-->
</tr>

<tr>
<td align = "center"> Hasil Perkalian</td> <!--Kolom untuk menulis hasil perkalian dgn rata tengah-->
<td><input type = "text" name = "hasil" disabled value="<?php echo $hasil;?>"></td>
<td><input type= "submit" name = "perkalian" value = "Hitung"></td> <!--membuat submit tombol hitung untuk melakukan perkalian-->
</tr>
</table>
</form>
<body>
</html>

 

Dan tampilannya :

kali

 

Pembagian : 


<!DOCTYPE html>

<html>
<head>
<title> Web Pembagian</title>
</head>
<body>
<h1 align = "center">PEMBAGIAN</h1> <!--memberikan tulisan judul Pembagian bertype heading 1 dengan rata tengah-->
<form method = "post">
<table border="5" align = "center">
<tr>
<td align = "center"> Angka 1 </td>
<td><input type = "number" name = "angka1" value="<?php echo $_POST['angka1'];?>" required></td>
</tr>

<tr>
<td align = "center"> Angka 2 </td>
<td><input type = "number" name = "angka2" value="<?php echo $_POST['angka2'];?>" required></td>

<?php
if(isset($_POST["pembagian"])) {
$hasil = $_POST["angka1"]/ $_POST["angka2"]; //rumus hitung pembagian//
}
?>
<td align = "center">:</td>
</tr>

<tr>
<td align = "center"> Hasil Pembagian</td>
<td><input type = "text" name = "hasil" disabled value="<?php echo $hasil;?>"></td>
<td><input type= "submit" name = "pembagian" value = "Hitung"></td> <!--membuat submit tombol hitung untuk melakukan pembagian-->
</tr>
</table>
</form>
<body>
</html>

 

Berikut tampilannya

bagi

 

Sekian terimakasih, semoga bermanfaat..!!

Tugas 1 PBW – Membuat Form Registrasi dengan HTML5

…………………..

Salam Sejahtera untuk semua….

Kalin ini saya akan berikan contoh untuk membuat tampilan form registrasi dengan menggunakan bahasa HTML5.
Tidak panjang2 lagi, langsung saja berikut tampilan dan source code nya.

HTML

Tampilan Form Pendaftaran

Berikut Source Code nya :

<!DOCTYPE html> <!--menunjukkkan HTML versi 5-->
<html> <!--Tag <html> memberitahu browser bahwa ini adalah dokumen HTML.
Tag <html> merupakan akar dari sebuah dokumen HTML.
Tag <html> merupakan wadah bagi semua elemen HTML lain (kecuali untuk <! DOCTYPE> tag).-->

<head> <!--Tanda <head> merupakan wadah untuk semua elemen kepala-->
<title>Form Registrasi Pembuatan SIM</title> <!--membuat judul halaman web-->
</head>

<body background = "2.jpg"> <!-- memberikan background halaman dgn nama 1.png --> <!--Tanda <body> mendefinisikan tubuh dokumen-->
<p> <!--Tanda <p> menunjukkkan baris untuk membuat paragraf-->
<img align = "left" src="E.gif" alt="E.gif" width="120" height="150"></p> <!--memberikan gambar animasi bergerak dgn lebar 120 & tinggi 150-->

<p>
<img align = "right" src="Yes.gif" alt="Yes.gif" width="120" height="120"></p> <!--memberikan gambar animasi bergerak dgn lebar 120 & tinggi 120-->

<h1 align = "center"> <font color = "red">Pendaftaran Pembuatan SIM</h1> <!--memberikan tulisan bertype heading 1 dgn warna merah dan rata tengah-->

<form method = ""get> <!--Tanda <form> digunakan untuk membuat bentuk HTML dari input pengguna-->
<table bgcolor = "white" border="1" align = "center"> <!--membuat tabel dgn warna putih dan rata tengah-->
<tr> <!--Tanda <tr> mendefinisikan baris dalam sebuah tabel HTML-->
<td>Nama</td> <!--Baris tabel Nama-->
<td>:</td> <!--Tag <td> mendefinisikan sel standar dalam tabel HTML.-->
<td><input type = "text" name = "name" size="50" autofocus required placeholder = "Ketikan Nama Anda"></td>
<!--membuat Textfield nama bertype teks dgn ukuran 50 dan diberikan keterangan yg samar-->
</tr>

<tr> <!--Tanda <tr> mendefinisikan baris dalam sebuah tabel HTML-->
<td>Alamat</td> <!--Baris tabel alamat-->
<td>:</td>
<td><input type = "text" name = "Alamat" size="50" autofocus required placeholder = "Ketikan Alamat Anda"></td>
<!--membuat Textfield alamat bertype teks dgn ukuran 50 dan diberikan keterangan yg samar-->
</tr>

<tr>
<td>Jenis Kelamin</td> <!--Baris tabel Jenis Kelamin-->
<td>:</td> <!--Tag <td> mendefinisikan sel standar dalam tabel HTML.-->
<td>
<input type = "radio" name = "gender" value="Cowok">Laki-Laki<br/> <!--Tanda <br> menyisipkan baris berhenti tunggal-->
<input type = "radio" name = "gender" value="Cewek">Perempuan <!--menginputkan pilihan jenis kelamin bertype radio button-->
</td>
</tr>

<tr>
<td>Tanggal Lahir</td> <!--Baris tabel Tanggal Lahir-->
<td>:</td>
<td><input type = "date" name = "date" ></td> <!--membuat Texfield untuk inputkan Tanggal Lahir bertype date-->

</tr>

<tr>
<td>Nomor Handphone</td> <!--Baris tabel nomor Handphone-->
<td>:</td>
<td><input type = "number" name = "number" size="50" autofocus required placeholder = "08xxxxxxxxx"></td>
<!--membuat Texfield untuk inputkan nomer HP dan diberikan keterangan samar2-->
</tr>

<tr>
<td>Alamat Web</td> <!--Baris tabel alamat web-->
<td>:</td>
<td><input type = "URL" name = "URL" size="50" autofocus required placeholder = "http://www.contoh.com"></td>
<!--membuat Texfield untuk inputkan alamat web bertype URL dan diberikan keterangan samar2-->
</tr>

<tr>
<td>Email</td> <!--Baris tabel Email-->
<td>:</td>
<td><input type = "email" name = "email" size="50" autofocus required placeholder = "sdj@contoh.com"></td>
<!--membuat Texfield untuk inputkan alamat email bertype email dan diberikan keterangan samar2-->
</tr>

<tr>
<td>Kecamatan</td> <!--Tanda <td> mendefinisikan sel standar dalam tabel HTML.--> <!--Baris tabel Kecamatan-->
<td>:</td>
<td>
<select name = "Kecamatan"> <!-- membuat daftar kecamatan dengan banyak pilihan-->
<option value="null">--- Pilih Kecamatan ---</option> <!--nilai dari pilihan-->
<option value="Jenggawah">Jenggawah</option> <!--nilai dari pilihan-->
<option value="Sumber Sari">Sumber Sari</option> <!--nilai dari pilihan-->
<option value="Balung">Balung</option>
<option value="Mangli">Mangli</option>
<option value="Bondowoso">Bondowoso</option>
<option value="Maesan">Maesan</option>
<option value="Arjasa">Arjasa</option>
<option value="Wringin">Wringin</option>
<option value="Jatiroto">Jatiroto</option>
</select>
</td> <!--Tanda <td> mendefinisikan sel standar dalam tabel HTML.-->
</tr>
<tr>
<td colspan = "3" align = "center"> <input type = "Submit" value = "Submit"> </td> <!--memberikan tombol submit untuk menyimpan data dalam tabel-->
<!--colspan artinya mengelompokkan kolom-->
</tr>
</table>
</form> <!--Tag <form> digunakan untuk membuat bentuk HTML dari input pengguna-->

<audio controls> <!--memberikan tempat untuk memainkan audio/lagu-->
<source src="Broken Hands.mp3" type="audio/mpeg">
Browser anda tidak mendukung elemen suara <!--Pemberitahuan kesalahan-->
</audio>

<audio controls> <!--memberikan tempat untuk memainkan audio/lagu-->
<source src="Lamb of God.mp3" type="audio/mpeg">
Browser anda tidak mendukung elemen suara <!--Pemberitahuan kesalahan-->
</audio>

<audio controls> <!--memberikan tempat untuk memainkan audio/lagu-->
<source src="Hourglass.mp3" type="audio/mpeg">
Browser anda tidak mendukung elemen suara <!--Pemberitahuan kesalahan-->
</audio>

<audio controls> <!--memberikan tempat untuk memainkan audio/lagu-->
<source src="Black Label.mp3" type="audio/mpeg">
Browser anda tidak mendukung elemen suara <!--Pemberitahuan kesalahan-->
</audio>

<video width="420" height="360" controls> <!--memberikan tempat untuk memainkan video dengan resolusi 640x420-->
<source src="Walk With Me In Hell.mp4" type="video/mp4">
Browser anda tidak mendukung elemen video <!--Pemberitahuan kesalahan-->
</video>

</body>

<footer align = "center"> <font color = "white">Terimakasih Sudah Mampir ke Halaman Ini
</footer> <!--Meberikan footer atau halaman bawah dgn warna putih rata tengah-->

</html>

 

    .........................

 Demikian tutorial membuat form registrasi dengan menggunakan bahasa HTML5.
Semoga bermanfaat. Terimakasih.