Titik Dua P

dinaamriyani@gmail.com

Debora Viliana Dina Amriyani Hsb Rayi Setiawati Adelina Pinem

(121421016) (121421017) (121421019) (121421030)

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());

password username
Your host address Database name

while($info = mysql_fetch_array( $data ))

{
echo "<tr>"; echo "<td>".$info['nim'] . "</td> "; echo "<td>".$info['nama_lengkap'] . "</td> "; "</td> "; echo "<td>".$info['nama_panggilan'] . echo "<td>".$info['jenis_kelamin'] . " </td>"; echo "<td>".$info['tempat_lahir'] . "</td> ";

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

Mengambil data dari tabel anggota sesuai nim

Pembuatan tabel yang akan ditampilkan

echo "<td>".$info['tanggal_lahir'] . "</td> "; echo "<td><img src='gallery/".$info['photo'] . "' ></td>"; echo "</tr>"; } echo "</table>"; ?>
Menampilkan data yang dipanggil dari databsse

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

Memanggil javascript
Diletakkan pada bagian head html

<style> p:hover{ background-color: blue; } </style>

<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(){

jquery
memanggil fungsi php & menampilkan di halaman web

$('#data').show('slow'); }); }); </script>

Ketika di-klik, memanggil dataanggota.php dan hasilnya ditamplikan

Struktur tabel anggota

nim nama_lengkap varchar(9) PK varchar(50)

nama_pangilan
jenis_kelamin tempat_lahir tanggal_lahir

varchar(20)
varchar(10) varchar(20) date

photo

varchar(50)

Isi tabel anggota

Sekian dan Terima Kasih

dinaamriyani@gmail.com