Tutorial Membuat WEB Dinamis Dengan PHP Muhammad Dede Soleman muhammad.dede@raharja,info Abstrak Dalam sisi programming kita dituntut untuk membuat sebuah program semenarik mungkin agar dapat dilihat oleh client lebih menarik dan dapat mengambil banyak minat dari seorang client. Dalam hal ini saya akan membuat sebuah web yang saya gabungkan dari awal saya membuat artikel ini dari menggunakan kombobox, membuat appendgrid, dan tabel, kemudian saya akan menampilkan hasil penyimpanan data dalam database yang disimpan menggunakan data yang diinput melalui inputtan yang banyak. Kata Kunci: Programming, Web, appendgrid Pendahuluan Dalam pemrograman ada yang namanya pemrograman web. Nah disini saya akan membuat sebuah web yang cukup dinamis dan dapat diubah oleh pembaca sekalian agar dapat membuat sebuah web dinamis dari awal pembuatan. Tapi disini saya hanya meneruskan dari artikel yang lalu yang saya buat bisa dibaca di artikel sebelumnya. Nah dalam pembuatan web ini cukup menarik menurut saya karena saya dulu membuatnya cukup pusing dan sekarang saya membuatnya dengan tutorial plus kodingnya jadi bisa langsung dipraktekan didalam pc anda. Okeh itu pendahuluannya sekarang kita mulai pembuatannya.
Pembahasan Perangkat atau alat yang diperlukan : 1. PC. 2. Notepad ++. 3. Library Bootstrap. 4. Library Javascrip. 5. Segelas kopi. :D Yuk mari kita lakukan pembuatannya. 1. Buat Koding seperti dibawah ini dan save dengan nama index.php <html> <head> <title>belajar Web</title> <link rel="stylesheet" href="style.css" type="text/css"> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> </head> <?php error_reporting(0); //membuat koneksi ke database include "koneksi.php";?> <body> <div id="wrapper"> <div id="single"> <!-- Script untuk membuat tabel --> <table style="font-size:10px"> <tr> <form method='post' action='index.php'> <td>jenis Kelamin  </td> <td> <select name="jp"> <option value="laki - Laki">Laki - Laki</option> <option value="perempuan">perempuan</option> </select> </td> </tr> <tr> <td> <input type='submit' name='submit' value='oke'> </td> </form> </tr>
</table> <table class="table-striped table-bordered table-condensed table table-hover" style="font-size:10px"> <thead> <tr> <th colspan="5">menampilkan DATA GUDANG </th> </tr> <tr> <th style="padding:10px;width:10px"> NO </th> <th style="padding:11px;width:50px"> NIM </th> <th style="padding:11px;width:140px"> Nama Mahasiswa </th> <th style="padding:10px;text-align:center;width:60px"> Jenis Kelamin </th> <th style="padding:11px;width:240px"> Alamat </th> </tr> </thead> <?php $jp = $_POST['jp']; $queri="select * FROM siswa where jp='$jp'"; //menampikan SEMUA data dari tabel siswa $nomor = 1; $hasil=mysql_query ($queri); //fungsi untuk SQL while ($data = mysql_fetch_array ($hasil)){?> <tbody> <tr> <td style="width:10px"><?php echo $nomor++;?></td> <td style="width:50px"><?php echo $data['nim'];?></td> <td style="width:140px"><?php echo $data['nama'];?></td> <td style="width:60px;"><?php echo $data['jp'];?></td> <td style="width:240px;text-align:center"><?php echo $data['alamat'];?></td> </tr> </tbody> <?php }?> </table> <center> <form action='input.php' method='post'> <td><input type='image' class='s-images' name='tambah' src='tambah.jpg'> </td> </form> </center> </div> </div> </body> </html>
- Jangan lupa simpan file tersebut didalam satu folder. Disini saya menggunakan folder bel. - Simpan semua disitu Bootstrap, Javascript. Dan AppendGridnya. - Semuanya bisa dibaca diartikel yang sebelumnya dari saya bisa di cek di ilmuti.org. 2. Setelah itu buat koding seperti berikut untuk input.php <html> <head> <title>belajar Web</title> <script type="text/javascript" src="jquery.js"></script> <!-- ini disesuaikan --> <script type="text/javascript" src="append.js"></script> <!-- yang ini juga disesuaikan -->
<link rel="stylesheet" href="style.css" type="text/css"> <!-- yang ini juga disesuaikan --> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> <!-- yang ini juga disesuaikan --> </head> <body> <div id="wrapper"> <div id="single"> <!-- ///////////////////////////// Script untuk membuat tabel///////////////////////////////// --> <center> <form id="id_form" action="save.php" method="post"> <table class="table-striped table-bordered table-condensed table table-hover" style="font-size:12px" > <!-- Header Pada Tabel --> <thead> <tr> <td width="100px">nim</td> <td width="200px">nama Mahasiswa</td> <td width="100px">jenis Kelamin</td> <td width="300px">alamat</td> </tr> </thead> <tbody id="container"> <!-- nanti rows nya muncul di sini --> </tbody> </table> <td><input type="button" name="add_btn" value="add" id="add_btn"></td> <!-- Untuk Membuat Button Add-nya --> <td><input type="submit" name=submit value="save"></td> <!-- Untuk Membuat Button Savenya buat disini --> </form> </center> </div> </div> </body> </html> 3. Lalu buat file save.php seperti koding berikut. <?php if(isset($_post['submit'])){ $connection = mysql_connect("localhost","root","") or die(mysql_error()); mysql_select_db("lokal") or die(mysql_error()); foreach ($_POST['rows'] as $key => $count ){ $nim = $_POST['nim_'.$count]; $nama = $_POST['nama_'.$count]; $jp = $_POST['jp_'.$count]; $alamat = $_POST['alamat_'.$count];
$query_2 = "INSERT INTO siswa (nim,nama,jp,alamat) VALUES ('$nim','$nama','$jp','$alamat')"; } mysql_query($query_2) or die(mysql_error()); echo "Data Berhasil disimpan <br>"; echo "<a href=\"..\bel\">kembali</a>"; mysql_close($connection);?> }else{ header('location: index.php'); } 4. Lalu buat sebuah file koneksi.php untuk menghubungkan dengan database. <?php error_reporting(0); $host = 'localhost'; $user = 'root'; $password = ''; $database = 'lokal';?> $konek_db = mysql_connect($host, $user, $password); $find_db = mysql_select_db($database) ; 5. Lalu buat file appendgridnya seperti ini dan save dengan nama append.js. $(document).ready(function() { var count = 0; $("#add_btn").click(function(){ count += 1; $('#container').append( '<tr class="records" id="row_' + count + '">' + '<td><input id="nim_' + count + '" name="nim_' + count + '" type="text" style="width:100px;"></td>' + '<td><input id="nama_' + count + '" name="nama_' + count + '" type="text" style="width:200px;"></td>' + '<td><input id="jp_' + count + '" name="jp_' + count + '" type="text" style="width:100px;"></td>' + '<td><input id="alamat_' + count + '" name="alamat_' + count + '" type="text" style="width:300px;"></td>'
+ '<input id="rows_' + count + '" name="rows[]" value="'+ count +'" type="hidden"></td></tr>' ); }); }); 6. Lalu kita buat databasenya dengan queri sebagai berikut. CREATE DATABASE /*!32312 IF NOT EXISTS*/`lokal` /*!40100 DEFAULT CHARACTER SET latin1 */; USE `lokal`; /*Table structure for table `siswa` */ DROP TABLE IF EXISTS `siswa`; CREATE TABLE `siswa` ( `nim` int(12) NOT NULL AUTO_INCREMENT, `nama` varchar(32) NOT NULL, `jp` varchar(15) NOT NULL, `alamat` varchar(32) NOT NULL, PRIMARY KEY (`nim`) ) ENGINE=InnoDB AUTO_INCREMENT=1422833631 DEFAULT CHARSET=latin1; /*Data for the table `siswa` */ insert into `siswa`(`nim`,`nama`,`jp`,`alamat`) values (121162712,'diqowhoidqhq','Perempuan','fhoahfaoufhaudfsj'), (1238179238,'Anggun','Perempuan','Kp. Cikupa'), (1238274827,'Saripudin','Laki - Laki','Kp. Dukuh'), (1422481558,'Muhammad Dede Soleman','Laki - Laki','Kp. Cilongok'), (1422833628,'Bagus Saepul','Laki - Laki','Kp. Pondoh'), (1422833629,'','',''), (1422833630,'','',''); - Jika queri benar maka akan menjadi tampilan seperti ini. - Dengan nama database local dan nama tabel siswa. Isinya sebagai berikut.
7. Jika sudah semua maka akan tampil seperti berikut tampilannya. - Ini data belum dimasukan mari kita masukan dengan menekan tombol yang berbentuk tambah.
- Isi bebas sesuai keinginan. - Lalu save. - Jika berhasil maka akan tampil berikut. - Tekan kembali dan akan kembali kehalam yang awal.
- Lalu pilih jenis kelamin yang ingin di tampilkan. - Pertama saya pilih laki laki. - Lalu kedua dengan memilih perempuan.
- Okeh jika benar semua maka akan tampil sebagai berikut. - Selesai -
Penutup Cukup sekian dari saya pembelajaran tentang membuat web agar lebih dinamis dan mudah digunakan oleh user. Tujuan saya membuat artikel ini agar saya dapat membagi ilmu pada orang yang baru dalam melakukan pembuatan web agar dapat digunakan disemua kalangan dan lebih enak dilihat. Referensi( PENGALAMAN PRIBADI ) Biografi Nama saya Muhammad Dede Soleman, kelahiran Tegal, 09 Juni 1995. cita cita saya menjadi ahli dalam bidang networking. Saya sangat menyukai pembahasan dalam bidang network, karna menurut saya dalam bidang network itu mengasikkan dapat jalan jalan sekaligus berkerja apa lagi kalau tempat berkerjanya jauh, bisa sekalian refreshing sehingga tidak stress setelah bekerja. Kedepannya saya harap bisa berkontribusi dalam bidang networking untuk Indonesi. Ketinggian yak tapi tidak apa apa, namanya juga harapan harus yang tinggi :D. jika ada pertanyaan atau kesalahan dalam menulis dari saya bisa hubungi WA/Telpon : 0856-9175-6869 atau E-mail : Muhammad.dede@raharja.info