tutorial membuat web dinamis dengan php - ilmu...
TRANSCRIPT
Lisensi Dokumen: Copyright © 2008-2017ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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.
Lisensi Dokumen: Copyright © 2008-2017ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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>
Lisensi Dokumen: Copyright © 2008-2017ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
</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>
Lisensi Dokumen: Copyright © 2008-2017ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
- 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 -->
Lisensi Dokumen: Copyright © 2008-2017ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
<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];
Lisensi Dokumen: Copyright © 2008-2017ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
$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>'
Lisensi Dokumen: Copyright © 2008-2017ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
+ '<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.
Lisensi Dokumen: Copyright © 2008-2017ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
7. Jika sudah semua maka akan tampil seperti berikut tampilannya.
- Ini data belum dimasukan mari kita masukan dengan menekan tombol yang
berbentuk tambah.
Lisensi Dokumen: Copyright © 2008-2017ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
- Isi bebas sesuai keinginan.
- Lalu save.
- Jika berhasil maka akan tampil berikut.
- Tekan kembali dan akan kembali kehalam yang awal.
Lisensi Dokumen: Copyright © 2008-2017ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
- Lalu pilih jenis kelamin yang ingin di tampilkan.
- Pertama saya pilih laki – laki.
- Lalu kedua dengan memilih perempuan.
Lisensi Dokumen: Copyright © 2008-2017ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
- Okeh jika benar semua maka akan tampil sebagai berikut.
- Selesai
-
Lisensi Dokumen: Copyright © 2008-2017ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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 : [email protected]