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...

Assalamualaikum Wr.Wb
Senang sekali hari ini saya bisa berbagi kembali bersama teman-teman disini.., pada postingan kali ini saya akan membahas cara membuat aplikasi penghitung / kalkulator sederhana menggunakan bahasa php (PHP Hypertext Preprocessor) untuk menyelesaikan tugas ke-2 yang di berikan oleh bapak Mudafiq Ryan Pratama selaku dosen pada mata kuliah Pemrograman Berbasis Web.

Dalam peng-kodean pada aplikasi yang akan saya buat ini menggunakan bahasa "PHP tapi rasa Java", loh kok bisa gitu?? hehe.. iya karena saya menggunakan konsep dasar PBO (Pemrograman Berorientasi Objek) sama seperti prinsip yang digunakan pada bahasa pemrograman Java, atau sering kita kenal dengan sebutan OOP (Object Oriented Programming), awalnya... ( kalau boleh cerite dikit nih yeeee :p ), kemarin-kemarin itu saya lagi kangen ngobok-ngobok java.., niatnya pengen memperdalam, bertanyalah saya ama mbah google dengan berbagai keyword yang berhubungan dengan pemrograman berorientasi objek (PBO), dan akhirnya saya nyasar pada sebuah website yang juga membahas tentang PBO namun bukan Java melainkan bahasa pemrograman PHP.

Karena masih baru sebagai pengguna bahasa PHP saya baru tahu kalau konsep Pemrograman berorientasi objek (OOP) ini juga digunakan pada bahasa pemrograman PHP, dan menurut informasi yang saya baca sebenarnya konsep OOP pada PHP sudah di perkenalkan pada awal PHP versi 5, dan terus dikembangkan sampai saat ini (saya kok jadi keliatan banget ya udiknya hehehe..). Teringat akan tugas Pemrograman Berbasis Web yang ke 2 ini jadi saya coba aja mengimplementasikan konsep itu disini.., semoga apa yang saya pelajari dapat bermanfaat juga buat teman-teman sekalian :)

Alat yang saya gunakan :
1. Notepad++
2. XAMPP sebagai server side-nya (web server)

Langkah pertama :
Membuat baris kode php yang di dalamnya terdapat class (kelas) dengan nama Hitung

Langkah kedua :
Deklarasikan 2 variabel untuk menyimpan data yang akan di olah saat terjadi perhitungan

private adalah sebuah hak akses (encapsulation) yang diberikan pada properti dalam kelas  dan hanya dapat di akses oleh objek dalam kelasnya.

Langkah ketiga :
buat fungsi konstruktor agar fungsi yang akan kita buat didalamnya akan secara otomatis dijalankan saat kelas pertama kali di bentuk (instansiasi)

pada konstruktor ini terdapat parameter berisi 2 variabel yaitu variabel $a1 dan variabel $a2 yang fungsinya mengirimkan nilai pada variabel $angka1 dan $angka2 dalam pengaturan / pengisian nilainya agar data pada variabel $angka1 dan $angka2 dapat di proses




Langkah keempat :
Buatlah fungsi operasi matematika, (dalam tugas ini hanya menggunakan operasi pengurangan (-), perkalian (*), dan pembagian saja(/)) jika mau teman-teman bisa menambahkan sendiri tergantung jenis operasi matematika apa yang teman-teman ingini, didalam php tersedia beberapa operasi matematika antara lain penjumlahan (+), modulus (%) lebih besar (>), lebih kecil (<) dan masih banyak lagi.

Langkah kelima :
Buat form menggunakan html kode yang berisikan 2 inputan bertipe number, 1 inputan menggunakan tag select (<select>), 1 inputan bertipe text untuk menampilkan hasil, dan 1 inputan bertipe submit untuk mengeksekusi proses pada program (tombol).
Baris kodenya sebagai berikut :

Langkah enam :
Sisipkan kode PHP diantara setelah inputan angka 2 dan inputan bertipe text (hasil), dan deklarasikan variabel-variabel untuk menangkap data yang dikirim oleh inputan-inputan tersebut diantaranya nilai angka1, nilai angka2, proses yang dikirim melakui inputan bertipe submit (tombol) serta OP yang di tangkap melalui kiriman data dari tag select (<select>), baris kodenya sebagai berikut :

Langkah tujuh :
Baris selanjutnya jalankan konstruktor dengan melakukan pembuatan objek baru (instansiasi) dengan nama objek hitung yang bernilai nama kelas yang kita buat tadi (Hitung) "menggunakan huruf besa" karena OOP ini dalam penulisannya case sensitive maka antara penulisan "huruf" dan "Huruf" itu dibedakan.

dalam konstruktor jangan lupa mengisikan parameter berupa 2 variable yang akan menangkap isi dari data yang akan kita olah yaitu data dari variabel $a1 dan $a2.

Langkah delapan :
gunakan struktur kontrol if dan isset untuk mengantisipasi adanya pengeksekusian data dari variabel yang belum di seting (atur).

Dalam kasus ini eksekusi yang di handle adalah pengiriman data dari inputan bertipe submit bernama proses, agar menegaskan jika tombol belum di klik maka program pun belum di boleh eksekusi.









Langkah sembilan :
tambahkan batasan terhadap inputan angka1 dan angka2 yang mana jika inputan itu kosong maka akan memberikan peringatan berupa alert menggunakan java script yang memberitahukan kalau inputan tidak boleh kosong.

Langkah sepuluh :
Gunakan struktur kontrol switch ke dalam baris else pada struktur kontrol if tadi, untuk memberikan pilihan / penjadwalan proses yang akan dijalankan sesuai operasi matematika yang akan dipilih oleh user nantinya, didalam pemilihan casenya terdapat kode baris proses pengurangan, perkalian, dan pembagian yang sudah kita buat pada kelas Hitung tadi, dan tiap baris case menyimpan hasil proses perhitungan kedalam variabel bernama $hasil yang nantinya akan dikirimkan pada inputan bertipe text yang sudah kita buat.

Output program sederhana ini seperti berikut :

Untuk source codenya bisa di download disini

mungkin cukup sekian dulu postingan saya kali ini.. kurang lebihnya mohon di maafkan karna saya masih pemula.., semoga bermanfaat terima kasih dan Wassalam

Assalamualaikum Warohmatullahi Wabarakatuh..

Kali ini saya mendapatkan tugas pertama pada bahasa pemrograman berbasis web, yaitu membuat form registrasi menggunakan html, karna html juga salah satu bahasa pemrograman yang berbasis web. Pada mata kuliah ini dosen pengampuh saya adalah bapak Mudafiq R. Pratama S.Kom.

Apa itu html...? HTML Programing Language ini merupakan rangkaian teks tertentu dengan ciri khasnya yaitu menggunakan tag / tanda-tanda yang mempunyai interpretasi khusus. HTML dapat dipelajari bertujuan agar dapat meng-kostumisasi pada web atau pun blog. Pada dasarnya programmer web harus mengerti dahulu bahasa HTML, untuk itulah tugas kuliah pertama saya pada Pemrograman Berbasis Web ini adalah pembelajaran dasar membuat form registrasi menggunakan bahasa HTML.

Dalam perkembangannya html telah melalui beberapa revolusi dari generasi ke generasi.., dan pada saat ini telah sampai pada generasi HTML5 yang mana merupakan generasi terakhir dan mungkin akan berkembang lagi mengikuti perkembangan jaman. Beberapa fitur baru di HTML 5 seperti berikut:

- Kanvas untuk menggambar.
- Video dan elemen audio untuk media pemutar.
- Element baru, seperti artikel, footer, header, dan navigasi.
- Dukungan lebih baik untuk penyimpanan offline lokal.
- Kontrol bentuk baru, seperti kalender, tanggal, waktu, email, URL, dan Search.
- Saat ini HTML 5 belum menjadi standart resmi dan masih jarang ada browser memiliki fitur penuh terhadap HTML 5. HTML 5 akan mungkin menjadi standart baru untuk HTML dan XHTML.



Jika ingin mencoba kode html form regsitrasi yang akan saya bahas kali ini direkomendasikan untuk menggunakan browser Crhome sebagai interfacenya dikarenakan dalam penulisan beberapa kode-kode html saya ini mengandung html5 yang telah mendukung pada perangkat di Browser Crhome tersebut.


Untuk kode yang pertama :
Pendeklarasian <!DOCTYPE html> adalah sebuah instruksi kepada web browser tentang versi html apa yang sedang di gunakan pada penulisan kode-kode didalamnya

Gambar berikut menunjukkan fungsi baris komentar pada bahasa html yang diawali tanda "<!-" dan di akhiri tanda "-!>", dan didalam tanda tersebut dapat di isikan komentar-komentar, dan tidak akan di tampilkan pada web browser.

Pada baris ini adalah sebuah pendeklarasian Judul pada halaman yang di tandai dengan tag "<title>" dan berada dalam tag "<head>"



 untuk Source code lengkapnya seperti berikut :

NB: Klik pada gambar untuk melihat source lebih detail.

komponen attribut yang mengandung html5 adalah atribut "required" yang berfungsi untuk memberi batasan terhadap type inputan agar tidak boleh memiliki nilai kosong atau dapat dikatakan inputan harus terisi.

untuk penulisan jenis inputan selain menggunakan tag <input> iyalah jenis inputan bertipe comboboxyang mana dalam source code diatas di gunakan dalam baris 48 dengan penulisan tag <select> yang diikuti tag <option> di dalamnya.

Outputnya akan seperti berikut :

Sourcenya dapat didownload di sini
Sekian postingan saya kali ini, semoga bermanfaat.., mohon maaf jika ada kesalahan dan kekurangan dikarenakan saya adalah seorang pemula. Terima kasih.. Wassalam.

Assalamualaikum Warohmatullahi Wabarakatuh
pada kesempatan ini saya lagi-lagi akan membahas tentang Algoritma perulangan, dan menerapkannya pada GUI Kali ini saya akan mencoba membuat bentuk kotak (diagonal silang) seperti gambar berikut:

langsung saja berikut source code dan langkah-langkah pembuatannya:
- mendeklarasikan / meng-import paket-paket yang dibutuhkan.

- Membuat kelas dengan nama sayembara12 dan mendeklarasikan atribut-atribut yang dibutuhkan.

- Membuat Konstruktor dari kelas sayembara12 serta membuat sebuah method dengan nama AturKomponen yang didalamnya berisi pengaturan terhadap komponen-komponen GUI

- membuat method AlgoritmaDiagonal dengan isi source seperti ini

-  langkah selanjutnya Memanggil / Meng-Override method actionPerformed dari implements ActionListener, yang didalamnya berisi fungsi yang mana jika tombol1 di klik maka akan mengeksekusi method AlgoritmaDiagonal()

- Langkah Terakhir membuat kelas baru dengan nama Run, kemudian memanggil konstruktor class sayembara12 dan membuat objek baru dengan nama "obj"
Panggil fungsi setVisible pada JFrame lalu isi dengan nilai boolean "true".

Saat program dijalankan akan mengeluarkan gambar seperti berikut:

Dan ketika menekan tombol jalankan akan mengeluarkan tampilan seperti berikut:

Selesai sudah pembahasan kita tentang Algoritma perulangan yang membentuk sebuah kotak (diagonal silang).
Semoga bermanfaat. Sekian dan Terima Kasih.

Lagi lagi pada kesempatan kali ini saya akan membahas tentang algoritma program pengulangan yang akan diterapkan dalam GUI dengan tampilan output seperti berikut:

<--- (2 segitiga siku-siku)



Langkah pertama membuat class pada kasus ini saya memberi nama kelasnya sayembara6:
berikut source code pendeklarasian kelas, atribut, konstruktor kelas sayembara6 dan method AturKomponen yang didalamnya berisi pengaturan pada komponen² dan palette pada program ini.
berikut penampakannya :

Oh iya hampir lupa.. buat para pengunjung yang budiman jika anda mencoba source code saya diatas dan mengalami error pada baris pendeklarasian class.. maka anda diwajibkan untuk membaca postingan saya sebelumnya disini (disana terdapat sedikit penjelasan tentang cara pendeklarasian abstract class).

Oke Next..., untuk selanjutnya, buat method dengan nama kotakisi(), yang didalamnya mempunyai fungsi algoritma dari pemrograman ini.. yang mana hasil outpunya nanti akan tampak seperti gambar diatas yang sudah saya tunjukkan terlebih dahulu pada awal postingan tadi :)

Berikutnya kita meng-override method abstrak dari implements ActionListener.., yang didalamnya memanggil method kotakisi yang baru saja kita buat

:





Untuk langkah yang terakhir buat class lain bernama Run dan buatlah objek baru dengan nama fungsi pada konstruktor kelas sayembara6 yang kita buat tadi..

Ketika program dijalankan maka akan mengeluarkan output seperti ini:

Jika menekan tombol jalankan maka akan mengeluarkan output seperti ini:

selesai sudah kita membuat program algoritma membuat tampilan kotak dengan isi (2segitiga siku-siku) untuk source code lengkapnya bisa di download disini

Dalam sayembara bagian kelima ini masih tetap membahas tentang pembuatan program algoritma yang akan di tampilkan pada interface GUI namun untuk kali ini tampilan outputnya seperti ini:

Oke.. mumpung masih pagi.., mari kita joooossssssss...!!!!





seperti biasa langkah awal membuat class kali ini saya memberi nama kelasnya sayembara5 yang menextends pada JFrame dan implements pada ActionListener sama seperti sayembara bagian ke 4.., berhubung penjelasannya terlalu panjang mengenai abstrak kelas dan implements ini jika ingin melihat penjelasannya bisa di lihat pada postingan saya sebelumnya disini
berikut source code untuk pendeklarasian kelas, attribut dan juga konstruktor serta method yang berfungsi sebagai pengatur komponen² pada palette dalam program ini.

berikutnya source code berupa method yang di dalamnya mempunyai fungsi algoritma untuk membuat tampilan seperti diatas yang saya contohkan tadi (persegi panjang yang didalamnya kosong).

Langkah selanjutnya Menambahkan dan memanggil method actionPerformed pada implements actionListener (meng-override method) yang fungsinya nanti jika tombol JButton yang kita berinama "tombol" di tekan maka akan memanggil method persegipanjang() yang baru saja kita buat:

Langkah terakhir membuat class baru dengan nama "Main" untuk menjalankan program serta membuat objek baru dari konstruktor sayembara5 yang kita buat tadi dengan nama objek "x".

Ketika program dijalankan maka akan mengeluarkan output seperti ini:

Jika menekan tombol jalankan maka akan mengeluarkan output seperti ini:

selesai sudah kita membuat program algoritma perulangan dengan tampilan persegi panjang yang didalamnya kosong.
Untuk source code lengkapnya bisa di download disini

Assalamualaikum Warohmatullahi Wabarakatuh
kali ini saya akan menulis contoh Algoritma membuat segitiga siku-siku terbalik dengan angka menggunakan perulangan for pada Java Netbeans dan menerapkannya terhadap GUI (Graphical User Interface) menggunakan JTextArea, Langkah pertama  membuat class, dalam kasus ini sambil menyelesaikan tugas lanjutan yang di berikan oleh pak Mudafiq R. Pratama berupa sayembara maka nama Kelasnya saya beri nama "sayembara4"
namun sebelumnya saya harus mendeklarasikan Package² yang saya butuhkan terlebih dahulu...

karna saya membutuhkan Interface berupa GUI maka saya mendeklarasikan paket "swing" dalam folder javax serta javax.awt.event untuk memanipulasi komponen palette menjadi suatu fungsi eksekusi nantinya.

Berikut pendeklarasian kelas "sayembara4" yang meng-extends pada JFrame dan implements pada ActionListener. Kemudian saya mendeklarasikan atribut berupa JTextArea dengan nama JTeks, JButton dengan nama tombol, dan Border dengan nama MarginBorder.

 Terlihat bahwa terjadi error karena dalam pendeklarasiannya kita mengimplements pada ActionListener dan kelas ini membutuhkan sebuah method Abstrak.. ok next kita coba memanggil dan meng-override method actionPerformed (abstrak) yang sudah terdapat pada implements ActionListener.
kira² pendeklarasiannya pada implements ActionListener seperti ini:
------------------------------------------------------------------------
package java.awt.event;
import java.util.EventListener;

public interface ActionListener extends EventListener {
    public void actionPerformed(ActionEvent ae);
}
 ------------------------------------------------------------------------

 karna didalam method actionPerformed terdapat parameter ae bertipe ActionEvent maka saat memanggilnya kita juga harus memasukkan parameter yang bertipe ActionEvent...,
nah problem awal sudah fix.., next ke step selanjut...

membuat konstruktor dan method AturKomponen yang di dalamnya berisi pengaturan terhadap komponen-komponen GUI

Selanjutnya membuat method / fungsi Algoritma perulangan yang nantinya menghasilkan tampilan Segitiga-siku-siku terbalik dengan nama deretAngka dan output seperti ini:

berikut sourcenya:

selanjutnya memberi fungsi pada override method abstrak yang telah kita buat tadi:

Langkah terakhir kita buat class baru dengan nama "Main" untuk menjalankan program serta membuat objek baru dari konstruktor sayembara4 yang kita buat tadi dengan nama objek "x".

Ketika program dijalankan maka akan mengeluarkan output seperti ini:

Jika menekan tombol jalankan maka akan mengeluarkan output seperti ini:

selesai sudah kita membuat program algoritma membuat tampilan segitiga siku-siku terbalik dengan angka.., untuk source code lengkapnya bisa di download disini