Membuat Web Sederhana Menggunakan PHP dan MQSQL

Website Dinamis

Website dinamis adalah website yang dapat menampilkan hamalan-halaman web dengan informasi yang selalu berubah secara atraktif dan dapat berinterkasi dengan user. PHP sangat bagus digunakan untuk membuat website dinamis. Karena, PHP tidak dapat menyimpan informasi sendiri, maka diperlukan sebuah database untuk menyimpan informasi yang ditampilkan. MySQL adalah salah satu pilihan dalam mengembangkan website dinamis dengan PHP. MySQL sangat mudah diakses dari PHP. Kelebihan PHP dan MySQL adalah dapat berjalan di semua sistem operasi.

Mulai Dari tutorial ini akan dijelaskan bagaimana cara Membuat Website Dinamis Menggunakan PHP dan MySQL. Tutorial ini akan berseri, dan setiap seri tutorial akan berhubungan dengan seri tutorial lainnya. Untuk itu disarankan untuk membaca tutorial dari awal.

Halaman yang menampilkan informasi yang selalu berubah disebut dengan halaman dinamis. Halaman web dinamis juga di bentuk dari HTML tapi tidak sesimpel halaman statis. HTML ini dibentuk menggunakan bahasa pemrograman misalnya PHP, dimana informasi yang ditampilkan disimpan dalam sebuah "tempat penyimpanan", yang umumnya dalam sebuah database seperti MySQL. Website yang menampilkan halaman dinamis disebut website dinamis, misalnya website yang menampilkan berita sehari-hari yang tiap harinya menampilkan informasi yang berbeda.

PHP

Larry Ullman dalam Visual QuickPro Guide PHP 6 and MySQL 5 for Dynamic Web Sites (2008) mengatakan, PHP originally stood for “Personal Home Page” as it was created in 1994 by Rasmus Lerdorf to track the visitors to his online résumé. As its usefulness and capabilities grew (and as it started being used in more professional situations), it came to mean“PHP: Hypertext Preprocessor.”.

PHP adalah bahasa pemrograman yang didesain untuk menghasilkan halaman web secara interaktik pada komputer yang menyimpannya / mengeksekusinya, yang disebut dengan web server. PHP dapat di-embedded dengan HTML, yang artinya anda dapat menggunakan HTML di dalam PHP atau menaruh script PHP dalam HTML tag. PHP dijalankan di server untuk membentuk tag HTML, kemudian server mengirimkan halaman yang diminta oleh pengguna.

MySQL

MySQL adalah database manangement system untuk relational database atau RDBMS. Database secara ringkas adalah kumpulan data yang mungkin bisa text, bilangan, binari file, yang disimpan dan diorganisir oleh DBMS. MySQL adalah RDBMS gratis yang merupakan saingan dari RDBMS yang berbayar seperti Oracle dan Microsoft SQL Server.

Walapun PHP sangat bagus dalam membangun website dinamis tetapi PHP tidak dapat menyimpan informasi pada dirinya sendiri. Karena PHP adalah bahasa pemrograman. Sehingga anda memerlukan database untuk menyimpan informasi tersebut. MySQL adalah salah statu pilihan dalam mengembangkan website dinamis dengan PHP. MySQL sangat mudah diakses menggunakan PHP.

Apa yang Anda Perlukan untuk Membangun Website Dinamis?

·         Sebuah aplikasi web server, misalkan Apache, Abyss, atau IIS

·         PHP

·         MySQL

·         Sebuah Browser seperti microsoft internet explorer, mozilla, opera, safari.

·         Sebuah text editor (dalam membuat tutorial ini digunakan macromedia dreamweaver).

untuk lebih mudahnya anda bisa menginstall XMAPP yang sudah berisi PHP, MySQL, dan Apache dalam satu paket. Dan XAMPP ini bisa didownload gratis. (Dalam menulis tutorial ini penulis menggunakan XAMPP 1.6.4) . Cara menginstall dan Menggunakan XAMPP bisa ada lihat dihttp://www.apachefriends.org/en/xampp.html

Website Hello World

Setelah semua kebutuhan di atas terpenuhi anda bisa memulai untuk belajar membuat website dengan PHP. Seperti pembelajaran bahasa pemograman lainnya tutorial ini akan dimulai dengan website hello world, yang akan menampilkan text "hello world". Seperti disebutkan di atas PHP dapat ditaruh dalam HTML tag. Untuk menambahkan code PHP dalam sebuah halaman, tempatkan code PHP di dalam PHP tag:

<?PHP

?>

segala sesuatu yang diletakkan di dalam PHP tag akan dieksekusi oleh web server dan text di luar PHP tag akan segera dikirim ke web browser sebagai HTML biasa. Tetapi anda harus ingat,  file yang berisi code PHP harus disimpan dengan ektensi .php agar web server mengeksekusinya sebagai php script. Untuk membuat website hello world ikutilah langkah-langkah di bawah ini:

1.     Buatlah document baru pada text editor anda (tidak masalah editor apa yang anda gunakan).

2.     Mulai dengan mengetik document HTML dasar seperti di bawah ini :

3.    

	<!DOCTYPE html <html "> <head> <title>hello world</title> </head> <body> <p>Belajar PHP</p> </body> </html>

 

Sebelum penutup tag body (</body>) tambahkan kode PHP di bawah ini :
<?php
echo  "<p>hello world my name is PHP</p><p>This is generate using PHP</p>";

?>

4. Jadi hasil akhirnya seperti di bawah ini :

	<!DOCTYPE html> <html "> <head> <title>hello world</title> </head> <body> <p>Belajar PHP</p> <?php echo "<p>hello world my name is PHP</p><p>This is generate using PHP</p>"; ?> </body> </html>

 

echo digunakan untuk mengirim text / HTML tag ke web browser, text / tag HTML yang dikirim diletakkan dalam tanda petik dua ". PHP adalah case-insensitive jika yang ditulis adalah nama dari sebuah fungsi, jadi ECHO, eCho, dan echo semuanya akan berfungsi, tapi tentunya echo jauh lebih mudah dalam menulisnya bukan? setiap baris kode php diakhiri dengan tanda titik kome ;. Di atas, echo digunakan untuk mengirim text dan tag HTML "hello world my name is PHP<br>This is generate using PHP ". "hello world my name is PHP" dan "This is generate using PHP" adalah text dan "<br>" adalah tag HTML untuk membuat line break (enter).

5.     Simpan document tersebut dengan nama hello.php dan taruh pada direktori web server anda. Jika anda menggunakan XAMPP, anda akan menaruhnya di direktori c:/xampp/htdocs/

6.     Untuk melihat hasilnya, buka web browser anda dan ketik URL "http://localhost/hallo.php" atau "http://127.0.0.1/hallo.php". Anda harus menggunakan URL untuk melihat hasilnya, karena PHP perlu diekseskusi oleh web server. Anda tidak bisa hanya dengan membukanya di browser seperti mebuka document HTML. Jika anda sudah melakukanya dengan benar maka hasilnya akan seperti berikut:

Demikianlah Tutorial Membangun Website Dinamis Dengan PHP dan MySQL - Bagian hello world. Pada tutorial selanjutnya  akan dijelaskan lebih mendalam lagi tentang PHP.

Membuat WebDinamis dengan PHP dan MYSQL

SELAMAT MENCOBA dan SUKSES

DOM

<!DOCTYPE html>
<html>
<head>
<style>
p {
width:100px;
}

   .err {
color:red;
font-style:italic;
font-size:10px;
   }
 </style>
 <script>
   function cek(){
status_oke = true;
// cek NIM tidak boleh kosong
if (surat.nama.value.trim() == ""){
 document.getElementById("err_nama").innerHTML="Nama Harus Diisi";
 status_oke = false;
} else {
 document.getElementById("err_nama").innerHTML="";
}  
// cek nama tidak boleh kosong
if (surat.email.value.trim() == ""){
 document.getElementById("err_email").innerHTML="Email Harus Diisi";
 status_oke = false;
} else {
 document.getElementById("err_email").innerHTML="";
}
// cek komentar tidak boleh kosong
if (surat.komen.value.trim() == ""){
 document.getElementById("err_komen").innerHTML="komentar Harus Diisi";
 status_oke = false;
} else {
 document.getElementById("err_komen").innerHTML="";
}
     return status_oke;
   }

function validateForm()
{
var x=document.forms["surat"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
 {
 alert("Not a valid e-mail address");
 return false;
 }
}
function tutup_form_komen(){
document.getElementById("komen").innerHTML="";
  }
  function form_komen(){
    cForm  = "<form action='#' method='post' onsubmit='return cek(), validateForm();' name='surat'>";
    cForm += "email : <input type='text' name='email' /><span class = 'err' id='err_email' ></span><br/>";
cForm += "Nama : <input type='text' name='nama' /><span class = 'err' id='err_nama' ></span><br/>";
    cForm += "Komentar : <br/>";
    cForm += "<textarea name='komen'></textarea><span class = 'err' id='err_komen' ></span><br/>";
    cForm += "<br/><input type='submit' value='Publish' />";
    cForm += "</form>";
    document.getElementById("komen").innerHTML=cForm;
  }
</script>
</head>
<body>
  <input type="button" value="Komen" onClick="form_komen()">
  <input type="button" value="Tutup Komen" onClick="tutup_form_komen()">
  <div id="komen"></div>

</body>
</html>

Penggunaan function javascript

<!DOCTYPE html>
<html>
<head>
<script language="javascript">
function hargaKamar(){
f1.harga.value=f1.jenis.value;
 }
function total1(){
f1.tot1.value=(parseInt(f1.harga.value))*(parseInt(f1.hari.value));
 }
 function hargaKamar1(){
f1.harga1.value=f1.meeting.value;
 }
 function total2(){
f1.tot2.value=(parseInt(f1.harga1.value))*(parseInt(f1.hari1.value));
 }
 function hargaKamar2(){
f1.harga2.value=f1.extra.value;
 }
 function total3(){
f1.tot3.value=(parseInt(f1.harga2.value))*(parseInt(f1.hari2.value));
 }
  function hargaKamar3(){
f1.harga3.value=f1.air.value;
 }
 function total4(){
f1.tot4.value=(parseInt(f1.harga3.value))*(parseInt(f1.hari3.value));
 }
 function Brutto(){
f1.brutto.value=parseInt(f1.tot1.value)+parseInt(f1.tot2.value)+parseInt(f1.tot3.value)+parseInt(f1.tot4.value);
 }
  function totaldisk(){
if (f1.diskon[0].checked){
f1.totdisk.value=(f1.diskon[0].value)*(f1.brutto.value);
}
else if(f1.diskon[1].checked){
f1.totdisk.value=f1.diskon[1].value*f1.brutto.value;
}
else{
f1.totdisk.value=f1.diskon[2].value*f1.brutto.value;
}
  }
  function Netto(){
  f1.netto.value=parseInt(f1.brutto.value)-parseInt(f1.totdisk.value);
  }
  function total(){
  f1.kembali.value=parseInt(f1.bayar.value)-parseInt(f1.netto.value);
  }
 </script>
</head>
<body>
<table border="1px">
<form name="f1">
<tr>
<th>Jenis Kamar</th>
<th>Harga</th>
<th>Banyak Hari</th>
<th>Total Biaya kamar</th>
</tr>
<tr>
<th><select name="jenis" onChange="hargaKamar()">
<option value="0">.::PILIHAN::.</option>
<option value="100000">Standar</option>
<option value="200000">VIP</option>
<option value="300000">President Suite</option>
</select>
</th>
<th><input type="text" name="harga" disabled /> </th>
<th><input type="text" name="hari" onChange="total1(),Brutto()"></th>
<th><input type="text" name="tot1" value="0" disabled></th>
</tr>
<tr >
<td colspan="4">Fasilitas Tambahan</td>
</tr>
<tr>
<td><input type="checkbox" name="meeting" value="2000000" onChange="hargaKamar1()"/>Meeting</td>
<th><input type="text" name="harga1" value="0" disabled /> </th>
<th><input type="text" name="hari1" onChange="total2(),Brutto()"></th>
<th><input type="text" name="tot2" value="0" disabled></th>
</tr>
<tr>
<td><input type="checkbox" name="extra" value="100000" onChange="hargaKamar2()"/>Extra Bed</td>
<th><input type="text" name="harga2" value="0" disabled /> </th>
<th><input type="text" name="hari2" onChange="total3(),Brutto()"></th>
<th><input type="text" name="tot3" value="0"disabled></th>
</tr>
<tr>
<td><input type="checkbox" name="air" value="50000" onChange="hargaKamar3()" />Air Panas</td>
<th><input type="text" name="harga3" value="0" disabled /> </th>
<th><input type="text" name="hari3" onChange="total4(),Brutto()"></th>
<th><input type="text" name="tot4" value="0" disabled></th>
</tr>
<tr >
<td colspan="4">PEMBAYARAN</td>
</tr>
<tr >
<td colspan="3">Total Biaya/Brutto</td>
<td><input type="text" name="brutto"  value="0" disabled></td>
</tr>
<tr >
<td colspan="3">Diskon <input type ="radio" name="diskon" value="0" onChange="totaldisk(),Netto()">No Diskon
<input type ="radio" name="diskon" value="0.1" onChange="totaldisk(),Netto()">10%
<input type ="radio" name="diskon" value="0.2" onChange="totaldisk(),Netto()">20%</td>
<td><input type="text" name="totdisk"  disabled></td>
</tr>
<tr >
<td colspan="3">Netto</td>
<td><input type="text" name="netto"  value="0" disabled></td>
</tr>
<tr >
<td colspan="3">Pembayaran</td>
<td><input type="text" name="bayar"  value="0" onChange="total()"></td>
</tr>
<tr >
<td colspan="3">Kembali</td>
<td><input type="text" name="kembali"  value="0" disabled></td>
</tr>
</form>
</table>
</body>
</html>

Cara Hosting Website menggunakan idhostinger

buka idhostinger.com

isi bagian subdomain

 setelah berhasil akan muncul seperti di bawah ini

cek/ melakukan kofirmasi pendaftaran

membuat form dan menampilkan

form.html
<!DOCTYPE html>
<html>
<body>
<form action="proses.php" method="post">
No. KTP : <input type="text" name="noktp" size="16" maxlength="16"/><br/>
NAMA : <input type="text" name="nama"/><br/>
ALAMAT : <textarea  name="alamat"></textarea><br/>
JENIS KELAMIN : <input type="radio" name="seks" value="L" checked>Laki-laki
<input type="radio" name="seks" value="P">Perempuan<br/>
No Handphone : <input type="text" size="36" name="nohp" id="nohp"/><br/>
ID : <input type="text" name="id" size="10"maxlength="10" value="masukkan id"><br/>
PASSWORD : <input type="password" id="password" size="10" maxlength="10" name="pass"><br/>
<input type="submit" name="submit" value="Daftar">
<input type="reset" name="reset" value="Reset">

</form>
</body>
</html>

proses.php
<?php
echo " <h1>DATA MEMBER </h1>";
echo "<br/>No. KTP: ".$_POST['noktp'];
echo "<br/>NAMA  :".$_POST['nama'];
echo "<br/>ALAMAT :".$_POST['alamat'];
echo "<br/>JENIS KELAMIN :".$_POST['seks'];
echo "<br/>No. Hp :".$_POST['nohp'];
echo "<br/>ID :".$_POST['id'];
echo "<br/>PASSWORD :".$_POST['pass'];
?>

<table border="1px">
<tr>
<td colspan="6" align="middle">EVENT</td>
</tr>
<tr align="middle">
<td>Tempat</td>
<td>Acara</td>
<td>Hari/tanggal</td>
<td>Jam</td>
<td colspan="2">Status</td>
</tr>
<tr>
<td rowspan="3">Parangtritis</td>
<td>Peringatan 1 suro</td>
<td>Kamis, 14 mei 2015</td>
<td>15.00 s/d selesai</td>
<td bgcolor="red">Tertutup</td>
<td>Terbuka</td>
</tr>
<tr>
<td rowspan="2">Tolak Bala</td>
<td>Sabtu, 23 mei 2015</td>
<td rowspan="2">10.00 s/d 12.00</td>
<td rowspan="2">Tertutup</td>
<td rowspan="2" bgcolor="green">Terbuka</td>
</tr>
<tr>
<td>Sabtu, 30 mei 2015</td>
</tr>
<tr>
<td colspan="6" align="right">Penanggung Jawab : Panitia Penyelenggara</td>
<tr>
</table>

Image dan hyperlink pada image

<div id="news">

<h1>Wisata Merapi</h1>

<img src="pict/merapi.jpeg" vspace="20" hspace="50" align="left">

Merapi Sunrise Trip adalah salah satu paket yang kami layani bagi para anda yang suka menikmati serta menginginkan menikmati terbit matahari di lereng Merapi sekaligus menikmati pemandangan Merapi dan kota Yogyakarta dari lereng Merapi sebelah selatan. Banyak hal yang dapat anda nikmati di paket ini seperti Keindahan Merapi nan agung di pagi hari, menikmati terbitnya matahari pagi di Kaliadem, Obyek Wisata Batu Alien atau Gumuk Boll (Opsional), menikmati segarnya udara pagi di Merapi, menikmati sensasi petualangan dan perjalanan dengan jeep di pagi hari, menikmati keindahan kota Yogyakarta dan sekitarnya dari Merapi (5 kilo meter dari Puncak Merapi), menikmati berburu foto matahari terbit sambil menikmati coffeebreak.</br>

<a href="home.html"><img src="pict/back.jpg" width="60px" height="50"></a>

</div>