Titik Dua P Debora Viliana (121421016) Dina Amriyani Hsb (121421017) Rayi Setiawati (121421019) Adelina Pinem (121421030)

dinaamriyani@gmail.com

Tampilan awal

Tampilan awal halaman sangat sederhana, hanya berupa nama anggota kelompok.

Tampilan setelah nama di-klik

Setelah nama dari salah satu anggota kelompok di-klik maka data dari database akan muncul dalam bentuk tabel.

How to make it?

Pendahuluan

Pada dasarnya halaman ini terdiri dari 3 unsur utama, yaitu:

• Script PHP

untuk memanggil data dari database

• Halaman HTML

berisi script javascript untuk memanggil fungsi php dan menampilkan di

halaman web

• Javascript

efek menampilkan data ketika nama diklik

Script PHP

<?php // Connects to your Database

mysql_connect("localhost", "root", "") or die(mysql_error());

mysql_select_db("mysql") or die(mysql_error());

$data = mysql_query("SELECT * FROM anggota WHERE nim='".$_POST['nim']."'") or die(mysql_error());

echo "<table border cellpadding=3>

<thead>

<tr><th scope='col'>NIM</th>

<th scope='col'>Nama Lengkap</th>

<th scope='col'>Nama Panggilan</th>

<th scope='col'>Jenis Kelamin</th>

<th scope='col'>Tempat Lahir</th>

<th scope='col'>Tanggal Lahir</th>

<th scope='col'>Foto</th></tr>

</thead>";

while($info = mysql_fetch_array( $data ))

{

echo "<tr>";

echo "<td>".$info['nim'] . "</td> ";

echo "<td>".$info['nama_lengkap'] . "</td> ";

echo "<td>".$info['nama_panggilan'] . "</td> ";

echo "<td>".$info['jenis_kelamin'] . " </td>";

echo "<td>".$info['tempat_lahir'] . "</td> ";

echo "<td>".$info['tanggal_lahir'] . "</td> ";

echo "<td><img src='gallery/".$info['photo'] . "' ></td>";

echo "</tr>";

}

echo "</table>";

?>

password

Your host address

username

Database name

Mengambil data dari

tabel anggota sesuai nim

Pembuatan

tabel yang akan

ditampilkan

Menampilkan data

yang dipanggil dari

databsse

Memanggil javascript

<script src="./jquery-1.9.1.js"></script>

<style>

p:hover{

background-color: blue;

}

</style>

Diletakkan pada bagian head html

jquery <p class = "clickme" id="121421016">Debora Viliana</p>

<p class = "clickme" id="121421017">Dina Amriyani Hsb</p>

<p class = "clickme" id="121421019">Rayi Setiawati</p>

<p class = "clickme" id="121421030">Adelina Pinem</p>

<script>

$(".clickme").click(function () {

$('#data').html('');

$("#data").load("dataanggota.php", {nim: $(this).attr('id')}, function(){

$('#data').show('slow');

});

});

</script>

memanggil fungsi php & menampilkan di halaman web

Ketika di-klik,

memanggil

dataanggota.php

dan hasilnya

ditamplikan

Struktur tabel anggota

nim varchar(9) PK

nama_lengkap varchar(50)

nama_pangilan varchar(20)

jenis_kelamin varchar(10)

tempat_lahir varchar(20)

tanggal_lahir date

photo varchar(50)

Isi tabel anggota

Sekian dan

Terima Kasih dinaamriyani@gmail.com