Minggu, 27 April 2014

Tutorial Membuat Pemesanan Tiket Kereta dengan PHP-MySQL

assalamualaikum. .

pada tulisan saya kali ini, saya akan berbagi ilmu yang sedikit ini tentang tutorial mengkoneksikan php dan mysql. menggunakan notepad, XAMPP dan web browser, mari kita mulai.
pertama kita membuat database menggunakan salah satu bagian dari paket aplikasi XAMPP, yaitu phpmyadmin adalah salah satu fasilitas untuk mengakses dan mengelola database MySQL. saya memberi nama "pemesanan_tiket_ka" untuk database yang saya buat.

selanjutnya membuat tabel dan membuat atribut serta menentukan primary key dari tabel tersebut. nama tabel nya adalah pemesan dan yang menjadi primary key adalah "id_pemesan", primary disini harus bersifat unik, yang nantinya akan membedakan dengan atribut lainnya.


berikutnya membuat query opersi CRUD (created read update delete) dari dan ke database. hal yang paling utama adalah membuat koneksi ke php, berikut adalah source code nya :


<?php //bagian yang menandakan sintaks php

$servername = "localhost";
$username = "root";
$password = "";
$databasename = "pemesanan_tiket_ka"; //nama database yang telah dibuat

$db = mysql_connect("$servername", "$username", "$password") or die
("I cannot connect to the database because: " . mysql_error()); // membuat koneksi ke mysql

mysql_select_db("$databasename", $db) or die
("I cannot select the database '$databasename' because: " . mysql_error());  //memanggil nama databasenya

?>

koneksi disini akan menghubungkan kita ke database yang telah kita buat tadi.
kedua kita membuat tampilan didatabase terlihat di web, berikut source code keseluruhannya:


<html>

<!--javascript untuk window pemberitahuan sebelum menghapus data-->
<script language="javascript" type="text/javascript">
function deletePemesan(id_pemesan){
if (confirm('Are you sure to delete ?')) { window.location.href = '?delete&id_pemesan=' + id_pemesan;
}
}
</script>

<?php
include ("koneksi2.php"); //memanggil koneksi2.php
//sintax untuk menghapus data ke database
if(isset($_GET['delete']) && isset($_GET['id_pemesan'])){
$sqldelete = 'DELETE FROM pemesan WHERE id_pemesan="'.$_GET['id_pemesan'].'"';
mysql_query($sqldelete) or die('Delete pemesan failed. ' . mysql_error());
echo "<script>window.location.href='index.php'</script>";
}
//memanggil query select untuk tabel pemesan
$selectpemesan = 'SELECT * FROM pemesan ORDER BY id_pemesan ASC' ;
$resultselectpemesan = mysql_query($selectpemesan) or die
('Error, load data pemesan failed.' . mysql_error());
//mengecek ketersediaan data pada tabel pemesan
if (mysql_num_rows ($resultselectpemesan)==0) {echo "Data tidak tersedia";} //mysql_num_fields berfungsi untuk menghitung baris yang ada
else{
echo "<table width='70%' align='center' border='1' bgcolor='grey'> <!--membuat tabel untuk menampilkan data yang ada dalam database-->
<h2 align='center'>Tabel Pemesan Tiket Kereta</h2>
<tr>
<td bgcolor='blue'>id Pemesan</td>
<td bgcolor='blue'>Nama Pemesan</td>
<td bgcolor='blue'>Kelas KA</td>
<td bgcolor='blue'>Tujuan</td>
<td bgcolor='blue'>Tanggal Keberangkatan</td>
<td bgcolor='blue'>action</td>
<td bgcolor='blue'>delete</td>
</tr>";
//jika data tersedia
while($row = mysql_fetch_array($resultselectpemesan)){ //mysql_fetch_array berfunsi menyimpan data menjadi array
extract ($row); //mengkonversi nama array menjadi variabel
echo "<tr>
<td>".$id_pemesan."</td>;
<td>".$nama_pemesan."</td>;
<td>".$kelas."</td>;
<td>".$tujuan."</td>;
<td>".$tanggal_keberangkatan."</td>;
<td><a href='edit-pemesan.php?id_pemesan=$id_pemesan'>edit</a></td> <!--link untuk edit data pemesan-->
<td><a href='javascript:deletePemesan($id_pemesan)'>hapus</a></td> <!--link untuk menghapus data pemesan-->
 <tr/>";
}
echo "</table>";
}

?>
</html>

pada source code diatas ada beberapa bagian, yang paling atas adalah javascript dan php untuk mengapus data yang ada didatabase,ditengah adalah source code untuk menampilkan tabel data yang ada di dalam database, yang paling bawah adalah link untuk edit yang akan berhubungan dengan file edit-pemesan dan link untuk menghapus data yang berhubungan dengan source code paling atas.

ketiga kita membuat operasi menambah data ke data base, berikut adalah source code nya :

<?php
include ("koneksi2.php");//memanggil koneksi2.php
?>

<form method="post">
<body Text = "darkblue">
<table align="center">
<h2 align="center">Form Menambah Pemesan Tiket Kereta Api</h2>
<tr>
    <td>Nama Pemesan</td>
    <td>:</td> <!--untuk menginputkan nama pemesan-->
    <td><input type="text" name="nama pemesan" value="<?php echo $rowedit['nama_pemesan']; ?>"required/></td>
</tr>   
<tr>
    <td>Kelas KA</td>
    <td>:</td> <!--untuk menginputkan kelas kereta api-->
    <td><input type="text" name="kelas" value="<?php echo $rowedit['kelas']; ?>"required/></td>
</tr>
<tr>
    <td>Tujuan</td>
    <td>:</td> <!--untuk menginputkan stasiun tujuan-->
    <td><input type="text" name="tujuan" value="<?php echo $rowedit['tujuan']; ?>"required/></td>
</tr>
<tr>
    <td>Tanggal Keberangkatan</td>
    <td>:</td> <!--untuk menginputkan tanggal keberangkatan-->
    <td><input type="date" name="tanggal_keberangkatan" placeholder="yyyy-mm-dd" value="<?php echo $rowedit['tanggal_keberangkatan']; ?>"/></td>
</tr>
<tr>
    <td>
    <input type="submit" name="submit"/>
    </td>
</tr>
</table>

<?php //action untuk button submit agar ketika button submit dipilih maka akan langsung memasukkan data kedalam database
if(isset($_POST['submit'])){
$nama_pemesan = $_POST['nama_pemesan'];
$kelas = $_POST['kelas'];
$tujuan = $_POST['tujuan'];
$tanggal_keberangkatan = $_POST['tanggal_keberangkatan'];
$insertpemesan = "INSERT INTO pemesan (nama_pemesan, kelas, tujuan, tanggal_keberangkatan)
values ('$nama_pemesan','$kelas','$tujuan','$tanggal_keberangkatan')";
mysql_query($insertpemesan) or die ('Error!!'.mysql_error());
echo "<script>window.location.href='index.php';</script>";
exit;
}
?>
</body>
</form>

pada operasi menambah data ini, kita membuat beberapa form seperti yang ada pada tabel sebelumnya, setelah itu kita membuat action button agar data yang sudah kita tuliskan masuk kedalam tabel data pemesan.
yang terakhir kita membuat operasi edit atau bisa disebut juga update, berikut source code nya :

<html>
<form method="post">
<?php
include("koneksi2.php");
$id_pemesan=$_GET['id_pemesan'];
//pemanggilan data menggunakan query select untuk id_pemesan yang terpilih
$selectpemesan = "SELECT * FROM pemesan WHERE id_pemesan=$id_pemesan";
$resultselectpemesan = mysql_query($selectpemesan) or die ('Error, load data pemesan failed.' . mysql_error());
$rowedit = mysql_fetch_assoc($resultselectpemesan);
?>
<table align="center">
<h2 align="center">Form Edit Pemesan Tiket Kereta Api</h2>
<tr>
    <td>Nama Pemesan</td>
    <td>:</td> <!--untuk menginputkan nomor telepon user-->
    <td><input type="text" name="nama pemesan" value="<?php echo $rowedit['nama_pemesan']; ?>"required/></td>
</tr>   
<tr>
    <td>Kelas KA</td>
    <td>:</td> <!--untuk menginputkan nomor telepon user-->
    <td><input type="text" name="kelas" value="<?php echo $rowedit['kelas']; ?>"required/></td>
</tr>
<tr>
    <td>Tujuan</td>
    <td>:</td> <!--untuk menginputkan nomor telepon user-->
    <td><input type="text" name="tujuan" value="<?php echo $rowedit['tujuan']; ?>"required/></td>
</tr>
<tr>
    <td>Tanggal Keberangkatan</td>
    <td>:</td> <!--untuk menginputkan nomor telepon user-->
    <td><input type="date" name="tanggal_keberangkatan" placeholder="yyyy-mm-dd" value="<?php echo $rowedit['tanggal_keberangkatan']; ?>"/></td>
</tr>
<tr>
<td>
<input type="submit" name="submit"/>
</td>
</tr>
</table>
<?php //action untuk button submit
if(isset($_POST['submit'])){
$nama_pemesan = $_POST['nama_pemesan'];
$kelas = $_POST['kelas'];
$tujuan = $_POST['tujuan'];
$tanggal_keberangkatan = $_POST['tanggal_keberangkatan'];
$editpemesan = "UPDATE pemesan SET nama_pemesan='$nama_pemesan', kelas='$kelas',
tujuan='$tujuan', tanggal_keberangkatan='$tanggal_keberangkatan' WHERE id_pemesan='$id_pemesan'";
mysql_query($editpemesan) or die ('Error!!'.mysql_error());
echo "<script>window.location.href='index2.php';</script>";
exit;
}
?>
</form>
</html>

pada bagian atas, digunakan untuk memangggil data menggunakan query select, selanjutnya sama dengan form yang ada pada tambah-pemesan dan tombol submit diberi action.
hasilnya adalah :




perlu diperhatikan, setelah kita membuat file koneksi.php setiap file selanjutnya wajib menggunakan fungsi "include("koneksi.php");" karena file tersebut yang akan menghubungkan ke database yang kita buat. semua file yang kita buat juga wajib disimpan dalam folder htdocs agar dapat dieksekusi.

wassalamualaikum . .

Senin, 24 Maret 2014

Tugas2 Pemrograman WEB



Assalamualaikum. . .
Hai hai semua para blogger, jumpa lagi denga tulisan saya. Ditulisan saya kali ini, saya akan membahas tentang function dalam PHP. Sebelum membahas lebih jauh tentang function, akan lebih baik kalau kita mengetahui apa itu PHP.
PHP merupakan singkatan dari Hypertext Preposesor, adalah bahasa scripting yang terpasang dalam HTML. Bahasa PHP dapat berdiri sendiri ataupun dapat bersanding dengan HTML. File HTML yang sudah dibubuhi sintaks PHP, harus diganti dengan ekstensi .php. cara menjalankannya pun berbeda dengan file HTML, yaitu kita harus meletakkan file tersebut dalam folder XAMPP kemudian cara mengaksesnya menggunakan localhost/namafolde/namafile.php.
Setelah mengetahui apa itu PHP selanjutnya adalah function. Yang termasuk dalam function yaitu operasi aritmatika, seperti plus, minus, sum dkk. Berikut adalah source code penggunaan function.

<!DOCTYPE html>
<html>
<head>
    <title>Tugas PBW</title>
</head>
<body Text = "darkblue"> <br>

    <h2 align="center">Pengurangan,Pembagian dan Perkalian dengan PHP<h2> <br>
    <form  method="post" > <!--untuk memberi action pada textfield-->
    <table align="center">
    <tr><td>Bilangan 1 <td>=</td><td><input type="text" name="x" id="x" size="5" required /> <!-- variable 1 --> </td></tr>
      
    <tr><td>Bilangan 2 <td>=</td><td><input type="text" name="y" id="y" size="5" requiered /> <!-- variable 2 --> </td></tr>
      
      
        <!-- perintah perhitungan kalkulator -->
        <tr>
      
        <td><input type="submit" name="submit-" value="-">  <!-- tombol perkurangan -->
        <input type="submit" name="submit*" value="*">  <!-- tombol perkalian -->
        <input type="submit" name="submit/" value="/"></td>  </tr> <!-- tombol pembagian -->
      
        <tr><td><input type="reset" name="reset" value="reset"> </td>  <!-- tombol reset -->
        </tr> 
    </table>  
<?php //sintaks php
$x = $_REQUEST["x"]; //variable x
$x = $_REQUEST["y"]; //variable y

//proses pemilihan exekusi perintah operator
      
if ($_POST["submit-"]) {
$hasil = $x-$y;
echo "Hasil Pengurangan = ",$hasil; //memunculkan hasil pengurangan
}
   elseif ($_POST["submit*"]) {
            $hasil = $x*$y;
            echo "Hasil Perkalian = ",$hasil;//memunculkan hasil perkalian
        }
        elseif ($_POST["submit/"]) {
            $hasil = $x/$y;
            echo "Hasil Pembagian = ",$hasil; //memunculkan hasil pembagian
        }
      
  
    ?>


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

hasilnya adalah. .

Didalam source code diatas, saya menggunakan request dari PHP, untuk mengkondisikan text field yang kosong.
Semoga tulisan saya bermanfaat. .

Terimakasih.

wassalamualaikum

Minggu, 09 Maret 2014

Tutorial Membuat Form Registrasi dengan HTML5

Assalamulaikum,..

Kali ini saya akan menulis tentang source code format registrasi dengan HTML5. Tapi sebelum nulis nulis tentang codingan yang bikin pusing, saya mau cerita sedikit asal usul saya nulis artikel ini. Sebenernya saya jarang sekali ngisi blog ini, tapi karena banyak tugas yang mewajibkan menulis di blog, maka jadilah blog saya banyak tentang coding-coding. Baru kali ini saya kenal apa itu HTML, itu karena di semester empat ini ada mata kuliah Pemrograman Berbasis Web(PBW). Awal masuk kuliah saya gag ngeh banget sama bahasa dunia lain ini, apalagi waktu dikelas saya malah ngerjain kuis jarkom, jadi tambah gag nyambung. Hingga akhirnya dua hari setelah dapat tugas, saya nanyak sana  sini, minta ajarin temen, browsing-browsing  dan akhirnya bisa selesai juga. J

Sebelum membahas kodingnya, akan lebih baik kalo kita tahu terlebih dahulu apa itu HTML5. HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari world wide wibe, sebuah teknologi inti dari internet. Jika dibandingkan dengan versi HTML sebelumnya, HTML5 banyak sekali memiliki fitur baru yang memudahkan user dalam menggunakan website.



<!DOCTYPE html> <!--mendefinisikan jenis document yang menggunakan HTML5-->

<html> <!--mendefinisikan document html-->
                <head> <!--informasi tentang document-->
                                <title>Format Registrasi</title> <!--judul document-->
                <form> <!--mendefinisikan formulir-->
                <nav> <!--link navigasi-->
               
                <p><a href="/beranda.html">Beranda</a> - <!--tag <p> mendefinisikan paragraph-->
                <a href="/registrasi.html">Registrasi</a> -<!--tag <a> mendefinisikan hyperlink-->
                <a href="/aplikasi.html">Aplikasi</a> - <!--source code ini berfungsi menampilkan teks hyperlink-->
                <a href="/profil.html">Profil</a></p>
                </nav>
               
               
                <body background="beautiful.jpg" Text = "darkblue">  <!--memberi background dan warna teks-->
                <B> <!--untuk menebalkan text-->
                <i> <!--untuk memiringkan text-->
                                <form method = "get"> <!—tag digunakan untuk mengumpulkan informasi dari user-->
                                                <table align="center"> <!--membuat tabel dan menempatkannya ditengah halaman-->
                                               
                                                <h2 align="center">Formulir Registrasi</h2> <!--ukuran font dan menempatkan teks ditengah halaman-->
                                                <p align="center"> silahkan mengisi data dibawah ini </p>
                                               
                                                                <tr> <!--baris pada tabel-->
                                                                                <td>Nama</td> <!--kolom pada tabel-->
                                                                                <td>:</td>
                                                                                <td><input type="text" name ="nama" placeholder="nama lengkap anda"/></td>
                                                                </tr> <!--tag <input> mendefinisikan input field pada form, -->
                                                                <!--placeholder berfungsi memunculkan petunjuk untuk user didalam input field-->
                                                                <tr>
                                                                                <td>Alamat</td>
                                                                                <td>:</td> <!--input field berupa text-->
                                                                                <td><input type="text" name ="Alamat" /></td>
                                                                </tr>
                                                               
                                                                <tr>
                                                                                <td>Tanggal Lahir</td>
                                                                                <td>:</td>
                                                                                <td>
                                                                                <select name="tanggal" > <!--mendefinisikan select tabel list tanggal-->
                                                                                <option value="****"></option>
                                                                                <option value="1">1</option>
                                                                                <option value="2">2</option>
                                                                                <option value="3">3</option>
                                                                                <option value="4">4</option>
                                                                                <option value="5">5</option>
                                                                                <option value="6">6</option>
                                                                                <option value="7">7</option>
                                                                                <option value="8">8</option>
                                                                                <option value="9">9</option>
                                                                                <option value="10">10</option>
                                                                                <option value="11">11</option>
                                                                                <option value="12">12</option>
                                                                                <option value="13">13</option>
                                                                                <option value="14">14</option>
                                                                                <option value="15">15</option>
                                                                                <option value="16">16</option>
                                                                                <option value="17">17</option>
                                                                                <option value="18">18</option>
                                                                                <option value="19">19</option>
                                                                                <option value="20">20</option>
                                                                                <option value="21">21</option>
                                                                                <option value="22">22</option>
                                                                                <option value="23">23</option>
                                                                                <option value="24">24</option>
                                                                                <option value="25">25</option>
                                                                                <option value="26">26</option>
                                                                                <option value="27">27</option>
                                                                                <option value="28">28</option>
                                                                                <option value="29">29</option>
                                                                                <option value="30">30</option>
                                                                                <option value="31">31</option>
                                                                                </select>
                                                                                <select name="bulan"> <!--mendefinisikan select tabel list nama bulan-->
                                                                                <option value="****">month</option>
                                                                                <option value="1">Januari</option>
                                                                                <option value="2">Februari</option>
                                                                                <option value="3">Maret</option>
                                                                                <option value="4">April</option>
                                                                                <option value="5">Mei</option>
                                                                                <option value="6">Juni
                                                                                <option value="7">Juli</option>
                                                                                <option value="8">Agustus</option>
                                                                                <option value="9">September</option>
                                                                                <option value="10">Oktober</option>
                                                                                <option value="11">November</option>
                                                                                <option value="12">Desember</option>
                                                                                </select>
                                                                                <select name="tahun"> <!--mendefinisikan select tabel list tahun-->
                                                                                <option value="****">year</option>
                                                                                <option value="2000">2000</option>
                                                                                <option value="1999">1999</option>
                                                                                <option value="1998">1998</option>
                                                                                <option value="1997">1997</option>
                                                                                <option value="1996">1996</option>
                                                                                <option value="1995">1995</option>
                                                                                <option value="1994">1994</option>
                                                                                <option value="1993">1993</option>
                                                                </tr>
                                                               
                                                                <tr>
                                                                                <td>Jenis Kelamin</td>
                                                                                <td>:</td>
                                                                                <td> <!--tag <input type radio untuk radio buttons, memungkinkan user hanya memilih salah satunya-->
                                                                                <input type=radio name ="gender" value="Cowok" ></input> Cowok
                                                                                <input type=radio name ="gender" value="Cewek" ></input> Cewek
                                                                                </td>
                                                                </tr>
                                               
                                                                <tr>
                                                                                <td>Nomor Telepon</td>
                                                                                <td>:</td> <!--untuk menginputkan nomor telepon user-->
                                                                                <td><input type="tel" name ="usrtel" placeholder="+6281234555666"/></td>
                                                                </tr>                                    
                                                                                                                                                                                                                                               
                                                                <tr>
                                                                                <td>URL</td>
                                                                                <td>:</td> <!--merupakan field URL user-->
                                                                                <td><input type="url" name ="homepage" placeholder="www.example.com"/></td>
                                                                </tr>
                                                               
                                                                <tr>
                                                                                <td>Email</td>
                                                                                <td>:</td> <!--merupakan field untuk alamat email, akan otomatis memvalidasi ketika submit-->
                                                                                <td><input type="email" name ="usremail" placeholder="example@yahoo.com"/></td>
                                                                </tr>
                                                               
                                                                <tr>
                                                                                <td>Password</td>
                                                                                <td>:</td> <!--merupakan field untuk password, karakter akan tersembunyi-->
                                                                                <td><input type="password" name ="pwd" required/></td>
                                                                </tr> <!--atribut required dapat menentukan input field yang wajib diisi dengan data-->
                                                                                                               
                                                                <tr>
                                                                                <td>Kecamatan</td>
                                                                                <td>:</td>
                                                                                <td> <!--input kecamatan menggunakan combobox-->
                                                                                <select name="Kecamatan">
                                                                                <option value="********"></option>
                                                                                <option value="Rambipuji">Rambipuji</option>
                                                                                <option value="Bangsal">Bangsalsari</option>
                                                                                <option value="Panti">Panti</option>
                                                                                <option value="Panti">Balung</option>
                                                                                <option value="Panti">Tanggul</option>
                                                                                </td>
                                                                </tr>
                                                               
                                                                <tr>
                                                                                <td>
                                                                                <input type="submit" value=Submit> <!--submit button-->
                                                                                <input type="reset"> <!--reset buttton,akan menghapus semua data dan menjadikannya dalam keadaan default-->
                                                                                </td>
                                                                </tr>
                                                </table>
                                </B>
                                </i>
                                <footer><font color="#000000"> <!--tag footer mendefinisikan footer halaman, color untuk memberi warna text-->
                                <p>Posted by : Naily Fi <img src="animasi.gif" alt="animasi" height="42" width="42"></p> <!--menambahkan animasi-->
                                <p>Contact information : 08123456789 <a href="mail_to:naily@example.com">
                                naily@example.com</a>.</p> <!--menampilkan email address dengan hyperlink---->
                                </footer><!—penutup tag footer-->
                </body> <!--penutup dari tag body-->                                  
                </form>                              
                </head>                             
</html>




 Di awal koding HTML 5 wajib menggunakan adalah singkatan dari “Document Type Declaration”. Fungsinya untuk mengidentifikasi dokumen yang digunakan oleh sebuah situs. Berikut adalah source code dan penjelasan singkatnya.

Dalam koding saya tersebut saya menggunakan beberapa  fitur HTML5 terbaru, antara lain footer, placeholder, required. 


Tag <footer> biasanya digunakan ibagian bawah sebuah halaman isinya biasanya berupa info konten seperti author website atau copyright.

Tag <input> placehoder attribute dapat memunculkan petunjuk untuk user didalam input field, supaya memasukkan data sesuai dengan data yang dibutuhkan. Petunjuk pendek dimunculkan sebelum user mengetikkan data.

Tag <input> required attribute dengan atribut ini, data tidak akan bisa di submit sebelum input field beratribut required diisi. Atrinut ini bertipe Boolean. Atribut ini dapat digunakan pada input type.

Setelah dijalankan maka hasilnya . .
tada . . 




KESIMPULAN :
HTML5 menawarkan banyak fitur. Di tulisan saya ini hanya beberapa yang saya gunkan, dan semoga bermanfaat untuk anda.

wassalamualaikum. .
terimakasih. .