tutorial membuat web dinamis dengan php - ilmu...

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.

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


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

 <script type="text/javascript" src="append.js"></script>


$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 : [email protected]

tutorial membuat web dinamis dengan php - ilmu...

Documents