Aplikasi Pemesanan Tiket Kereta Api Sederhana (Tugas3

Assalamualaikum Wr. Wb.
Alhamdulillah.. puji syukur pada Allah SWT atas rahmat dan karunia-Nya karena hari ini saya masih diberi kesempatan untuk berbagi, sembari menyelesaikan tugas lanjutan dari mata kuliah saya yaitu pemrograman berbasis web. Semoga kita semua selalu diberi kesehatan dan selalu dalam perlindungan-Nya Amin...!

Okeee.. seperti biasa, saya akan mencoba berbagi pada teman-teman khususnya kali ini saya akan membahas tentang cara membuat aplikasi sederhana yaitu "aplikasi pemesanan tiket kereta api secara online" menggunakan bahasa pemrograman html dan bantuan framework css bootstrap dari segi interfacenya, sedangkan dalam pengolahannya saya menggunakan bahasa pemrograman php juga sedikit menggunakan javascript serta Mysql dalam pengolahan databasenya.

Sebelumnya ini adalah tampilan hasil aplikasinya.

Untuk melihat live demonya klik disini

Alur.
setelah mencoba demo diatas maka dapat diketahui alur dari aplikasi ini masih sangat sederhana sekali yaitu :
1. User (Pemesan) menginputkan data-data pada form pencarian untuk mencari jadwal keberangkatan kereta api dan pemesanan kursi. Pada pemesanan kursi khususnya untuk kategori "bayi" maka tidak akan mendapatkan kursi karena tidak dikenakan biaya.
2. Selanjutnya jika tersedia maka akan menghasilkan output berupa informasi jadwal keberangkatan, beserta nama kereta yang akan di pesan. Aplikasi juga akan melakukan perulangan pembuatan form input secara otomatis dan dinamis untuk pengisian data calon penumpang yang jumlahnya telah disesuaikan dengan pemesanan kursi. Jika tidak tersedia maka akan menghasilkan output berupa Teks "Tidak tersedia".
3. User (pemesan) diwajibkan mengisi data calon penumpang untuk melangkah ke step selanjutnya.
inputan terbagi menjadi 2 kategori yaitu dewasa dan anak-anak yang di tandai dengan inputan tidak bisa di edit untuk kategori anak karena belum mempunyai nomor identitas, dan inputan yang bisa di isikan dengan type numerik untuk kategori dewasa.
4 Pada langkah selanjutbya berupa halaman untuk melihat data-data yang sudah di inputkan mulai dari langkah pertama sampai langkah ke tiga. Pada halaman ini user juga dapat mengolah datanya seperti mengedit inputan ataupun menghapusnya. Jika sudah yakin dengan data reservasinya user harus menekan tombol "Pesan Tiket", maka data akan dikirim kedalam database dan akan memberikan informasi bahwa reservasi tiket anda sedang di proses, lalu user diarahkan kembali ke halaman awal.

Buatlah Database baru dengan nama "keretaapi" (tanpa tanda kutip). lalu ketikkan perintah sql berikut pada sql-query:


-- phpMyAdmin SQL Dump
-- version 3.1.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Apr 28, 2014 at 02:45 PM
-- Server version: 5.1.30
-- PHP Version: 5.2.8

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `keretaapi`
--

-- --------------------------------------------------------

--
-- Table structure for table `data_penumpang`
--

CREATE TABLE IF NOT EXISTS `data_penumpang` (
  `id_penumpang` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(60) NOT NULL,
  `no_identitas` char(20) NOT NULL,
  `jkel` varchar(20) NOT NULL,
  `kelas` varchar(20) NOT NULL,
  `id` int(10) NOT NULL,
  PRIMARY KEY (`id_penumpang`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=18 ;

--
-- Dumping data for table `data_penumpang`
--


-- --------------------------------------------------------

--
-- Table structure for table `harga`
--

CREATE TABLE IF NOT EXISTS `harga` (
  `id_harga` int(11) NOT NULL,
  `id_perjalanan` int(11) NOT NULL,
  `Ekonomi` varchar(20) NOT NULL,
  `Bisnis` varchar(20) NOT NULL,
  `Eksekutif` varchar(20) NOT NULL,
  PRIMARY KEY (`id_harga`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 ROW_FORMAT=FIXED;

--
-- Dumping data for table `harga`
--

INSERT INTO `harga` (`id_harga`, `id_perjalanan`, `Ekonomi`, `Bisnis`, `Eksekutif`) VALUES
(1, 1, '9000', '20000', '32000'),
(2, 2, '9000', '20000', '32000'),
(3, 3, '95000', '120000', '190000'),
(4, 4, '95000', '120000', '190000'),
(5, 5, '20000', '55000', '120000'),
(6, 6, '20000', '55000', '120000'),
(7, 7, '35000', '85000', '150000'),
(8, 8, '35000', '85000', '150000'),
(9, 9, '45000', '90000', '120000'),
(10, 10, '45000', '90000', '120000');

-- --------------------------------------------------------

--
-- Table structure for table `pemesan`
--

CREATE TABLE IF NOT EXISTS `pemesan` (
  `id_pemesan` int(11) NOT NULL AUTO_INCREMENT,
  `nama_pemesan` varchar(30) NOT NULL,
  `telepon` char(20) NOT NULL,
  `tanggal_berangkat` date NOT NULL,
  PRIMARY KEY (`id_pemesan`),
  UNIQUE KEY `telepon` (`telepon`),
  UNIQUE KEY `tanggal_pesan` (`tanggal_berangkat`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=40 ;

--
-- Dumping data for table `pemesan`
--


-- --------------------------------------------------------

--
-- Table structure for table `rute_perjalanan`
--

CREATE TABLE IF NOT EXISTS `rute_perjalanan` (
  `id_perjalanan` int(5) NOT NULL,
  `rute` varchar(100) NOT NULL,
  `nm_kereta` varchar(50) NOT NULL,
  `jam` varchar(10) NOT NULL,
  PRIMARY KEY (`id_perjalanan`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 ROW_FORMAT=DYNAMIC;

--
-- Dumping data for table `rute_perjalanan`
--

INSERT INTO `rute_perjalanan` (`id_perjalanan`, `rute`, `nm_kereta`, `jam`) VALUES
(1, 'Jakarta Kota (JAKK) - Bandung (BD)', 'Argo Parahyangan', '05.30'),
(2, 'Bandung (BD) - Jakarta Kota (JAKK)', 'Argo Parahyangan', '19.45'),
(3, 'Surabaya Pasar Turi (SBI) - Jakarta Kota (JAKK)', 'Gumarang', '17.00'),
(4, 'Surabaya Jakarta Kota (JAKK) - Pasar Turi (SBI)', 'Gumarang', '15.15'),
(5, 'Malang (ML) - Surabaya Pasar Turi (SBI)', 'Gajayana', '12.45'),
(6, 'Surabaya Pasar Turi (SBI) - Malang (ML)', 'Gajayana', '18.20'),
(7, 'Malang (ML) - Bandung (BD)', 'Malabar', '12.45'),
(8, 'Bandung (BD) - Malang (ML)', 'Malabar', '15.35'),
(9, 'Jember (JR) - Surabaya Gubeng (SGU)', 'Logawa', '17.20'),
(10, 'Surabaya Gubeng (SGU) - Jember (JR)', 'Logawa', '02.40');

Lanjut pada code interface dan pengolahan datanya :
Dikarenakan kode yang terlalu panjang maka tidak memungkinkan untuk menulis semua kode dalam postingan ini.
Saya akan menjelaskan sedikit dalam pengkodean bagian poin-poinnya saja sesuai alur yang sudah saya tuliskan di atas.
Untuk Source code lengkapnya nanti bisa di download dibawah setelah postingan ini untuk di coba sendiri dirumah. :)

Dalam pembuatan aplikasi ini saya membutuhkan beberapa file antara lain :
1. bootstrap.css & bootstrap.min.css : File yang berisikan class-class css yang sudah disediakan oleh framework bootstrap.
2. style.css : Berisikan pengaturan tata letak agar menghasilkan tampilan yang menarik dan atraktif
3. koneksi.php : Didalamnya berisikan perintah mysql untuk mengkoneksikan diri ke database.
4. index.php : Berisikan form-form input yang berada pada halaman paling depan.
5. proses.php : Berisikan perintah untuk menangkap nilai dari form input calon penumpang dan memprosesnya kedalam database.
6. index2.php : Berisikan perintah-perintah yang akan mengelola datake database untuk kemudian ditampilkan, di inputkan serta update ataupun untuk dihapus
7. edit.php & hapus.php : berisikan perintah-perintah untuk mengolah data di database yang mendapatkan kiriman dari file index2.php

- berikut sepenggal code html form pencarian jadwal keberangkatan kereta api.

<form method="GET">
<table width="100%">
<tr>
<th class="warna1">JADWAL KERETA</th>
</tr>
<tr>
<td>Nama Pemesan :
<input type="text" name="pemesan" placeholder="Masukkan Nama" required style="width:95%;">
</td>
</tr>
<tr>
<td>Nomor Telepon :
<input type="number" name="telp" placeholder="Telepon yang bisa dihubungi" required style="width:95%;">
</td>
</tr>
<tr>
<td>Tanggal Berangkat :
<input type="date" name="tanggal" required style="width:95%;">
</td>
</tr>
<tr>
<td>Stasiun Asal :
<select name="asal">
<option value="null">- Stasiun Asal -</option>
<option value="Bandung (BD)">Bandung (BD)</option>
<option value="Jakarta Kota (JAKK)">Jakarta Kota (JAKK)</option>
<option value="Jember (JR)">Jember (JR)</option>
<option value="Malang (ML)">Malang (ML)</option>
<option value="Surabaya Gubeng (SGU)">Surabaya Gubeng (SGU)</option>
<option value="Surabaya Pasar Turi (SBI)">Surabaya Pasar Turi (SBI)</option>
</select>
</td>
</tr>
<tr>
<td>Stasiun Tujuan :
<select name="tujuan">
<option value="null">- Stasiun Tujuan -</option>
<option value="Bandung (BD)">Bandung (BD)</option>
<option value="Jakarta Kota (JAKK)">Jakarta Kota (JAKK)</option>
<option value="Jember (JR)">Jember (JR)</option>
<option value="Malang (ML)">Malang (ML)</option>
<option value="Surabaya Gubeng (SGU)">Surabaya Gubeng (SGU)</option>
<option value="Surabaya Pasar Turi (SBI)">Surabaya Pasar Turi (SBI)</option>
</select>
</td>
</tr>
</table>

<table width="100%">
<tr>
<td class="min-size">Dewasa</td>
<td class="min-size">Anak-anak</td>
<td class="min-size">Bayi</td>
</tr>
<tr>
<td>
<select name="dewasa">
<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>
</select>
</td><td>
<select name="anak">
<option value="0"></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>
</select>
</td><td>
<select name="bayi">
<option value="0"></option>
<option value="0">1</option>
<option value="0">2</option>
<option value="0">3</option>
<option value="0">4</option>
</select>
</td>
</tr>
<tr>
<td colspan="3"><center>
<button class="btn btn-primary btn-block" name="submit" value="CARI">
Cari</button>
</td>
</tr>
</table>
</form>

- Code pengulangan form input untuk pengisian data calon penumpang
untuk code yang pertama membuat variabel dengan nilai berupa code inputan html


$formdewasa = "

<tr><td width='37%'><input type='text' name='nm_penumpang[]' placeholder='Penumpang Dewasa' required></td><td width='25%'><input type='number' name='ktp[]' placeholder='(KTP / SIM / Paspor)' required></td><td width='17%'><select name='jkel[]'><option value='pria'>Pria</option><option value='wanita'>Wanita</option></select></td><td><select name='kelas[]'><option>Ekonomi</option><option>Bisnis</option><option>Eksekutif</option></select></td></tr>

";



$formanak = "

<tr><td width='37%'><input type='text' name='nm_penumpang[]' placeholder='Penumpang Anak-anak' required></td><td width='25%'><input type='number' name='ktp[]' placeholder='Belum Memiliki' disabled></td><td width='17%'><select name='jkel[]'><option value='pria'>Pria</option><option value='wanita'>Wanita</option></select></td> <td><select name='kelas[]'><option>Ekonomi</option><option>Bisnis</option><option>Eksekutif</option></select></td></tr>";

       

$tmbl_lanjut = "

<tr><td colspan='5'><button class='btn btn-primary' name='kirim' style='float:right;'>Lanjutkan</button</td></tr>";

lalu tuliskan pengulangannya dalam tag html seperti berikut :


<form method="POST" action="proses.php">

<input type="hidden" name="id_perjalanan" value="<?php echo $id_perjalanan; ?>">

<input type="hidden" name="lasid" value="<?php echo $lastID; ?>">

<?php

for($i = 1;$i <= $dewasa;$i++){

echo $formdewasa;

}

for($i = 1;$i <= $anak;$i++){

echo $formanak;

}

echo $tmbl_lanjut;

?>

</form>

- untuk pengolahan data dengan database tentunya memerlukan koneksi ke database, dengan itu kita harus meng-includkan file koneksi.php pada setiap script php yang mengandung pengolahan ke databasenya.
berikut isi dari file koneksi.php :


<?php

 mysql_connect("localhost","root","");

 mysql_select_db("keretaapi");

?>

localhost adalah nama dari host server yang di gunakan, root adalah username dan nilai "" (tanpa isi) pada password

dan kode dibawah ini adalah cara meng-includkan file koneksi.php kedalam file php lainnya yang membutuhkan koneksi ke database :


<?php



 include "koneksi.php";



?>

Untuk selanjutnya adalah code pengolahan data pada database menggunakan mysql (insert, select, update dan delete / CRUD)


$rute_kereta = mysql_query("select * from rute_perjalanan where rute='$perjalanan'");

$data = mysql_fetch_assoc($rute_kereta);

$id_perjalanan = $data['id_perjalanan'];

$rute = $data['rute'];

$jam = $data['jam'];

$nm_kereta = $data['nm_kereta'];



if(mysql_num_rows($rute_kereta)==1){

mysql_query("insert into pemesan values('','$pemesan','$telepon','$tanggal')");

$query = mysql_query("select * from pemesan

where nama_pemesan='$pemesan' and telepon='$telepon' and tanggal_berangkat='$tanggal'");

$baris = mysql_fetch_array($query);
}

- mysql_num_rows adalah mengambil jumlah total baris data yang ada pada database - mysql_fetch_assoc adalah pengambilan data pada database lalu di konversi kedalam sebuah array asosiatif.

Mungkin cukup sekian penjelasan dari saya.. untuk lebih jelasnya bisa download source code lengkapnya disini
Saya mohon maaf karena keterbatasan waktu dan dikejar deadline maka banyak sekali terdapat kekurangan penjelasan pada postingan ini... mohon di maklumi :)

Sekian Dan Terima kasih Wassalam...