Tutorial Membuat WEB Dinamis Dengan PHP

Ukuran: px

Mulai penontonan dengan halaman:

Download "Tutorial Membuat WEB Dinamis Dengan PHP"

Bambang Indradjaja
6 tahun lalu
Tontonan:

1 Tutorial Membuat WEB Dinamis Dengan PHP Muhammad Dede Soleman 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.

2 Pembahasan Perangkat atau alat yang diperlukan : 1. PC. 2. Notepad 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">  <table style="font-size:10px"> <tr> <form method='post' action='index.php'> <td>jenis Kelamin &nbsp</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>

3 </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>

4 - 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>  <script type="text/javascript" src="append.js"></script>

5 <link rel="stylesheet" href="style.css" type="text/css">  <link href="bootstrap/css/bootstrap.css" rel="stylesheet">  </head> <body> <div id="wrapper"> <div id="single">  <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" >  <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">  </tbody> </table> <td><input type="button" name="add_btn" value="add" id="add_btn"></td>  <td><input type="submit" name=submit value="save"></td>  </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];

6 $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>'

7 + '<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= DEFAULT CHARSET=latin1; /*Data for the table `siswa` */ insert into `siswa`(`nim`,`nama`,`jp`,`alamat`) values ( ,'diqowhoidqhq','Perempuan','fhoahfaoufhaudfsj'), ( ,'Anggun','Perempuan','Kp. Cikupa'), ( ,'Saripudin','Laki - Laki','Kp. Dukuh'), ( ,'Muhammad Dede Soleman','Laki - Laki','Kp. Cilongok'), ( ,'Bagus Saepul','Laki - Laki','Kp. Pondoh'), ( ,'','',''), ( ,'','',''); - Jika queri benar maka akan menjadi tampilan seperti ini. - Dengan nama database local dan nama tabel siswa. Isinya sebagai berikut.

8 7. Jika sudah semua maka akan tampil seperti berikut tampilannya. - Ini data belum dimasukan mari kita masukan dengan menekan tombol yang berbentuk tambah.

9 - Isi bebas sesuai keinginan. - Lalu save. - Jika berhasil maka akan tampil berikut. - Tekan kembali dan akan kembali kehalam yang awal.

10 - Lalu pilih jenis kelamin yang ingin di tampilkan. - Pertama saya pilih laki laki. - Lalu kedua dengan memilih perempuan.

11 - Okeh jika benar semua maka akan tampil sebagai berikut. - Selesai -

12 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 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 : atau Muhammad.dede@raharja.info

dokumen-dokumen yang mirip

Tutorial Membuat Combobox di PHP

Tutorial Membuat Combobox di 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