TEKNIK INFORMATIKA: PRAKTIKUM PEMROGRAMAN WEB #6

A. TUJUAN

Mengimplementasikan web PHP dengan gabungan CSS untuk memperindah tampilan website B. LANDASAN TEORI

Cascading Style Sheet (CSS)merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

PHP (HyperText Preprocessor) merupakan bahasa pemrograman server side programming yang berfungsi untuk membuat website bersifat dinamis. Halaman website dinamis memberikan kesempatan kepada user untuk dapat berinteraksi dengan memberikan kesempatan kepada user untuk dapat berinteraksi dengan halaman web tersebut. Contoh diperlukannya halaman web dinamis ketika ingin membuat halaman buku tamu, atau ingin membuat aplikasi-aplikasi database. Halaman Web dinamis juga mempermudah admin situs untuk merawat (maintenance) situs yang dimilikinya. Sebuah website yang interaktif dan dinamis, tentu membutuhkan penyimpanan data yang fleksibel dan cepat untuk diakses. Salah satu database untuk server adalah MySQL. Jenis database ini sangat popular dan digunakan pada banyak website di internet sebagai bank data.

XAMPP adalah perangkat lunak bebas (free) yang mendukung banyak system operasi, merupakan kompilasi dari beberapa program. Berfungsi sebagai server yang berdiri sendiri (localhost), yang terdiri dari program Apache HTTP server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (empat system operasi apapun), Apache, MySQL, PHP, dan Perl.

C. ALAT DAN BAHAN

Alat dan bahan yang digunakan untuk praktikum adalah :

1. PC (Personal Computer)

2. Sistem Operasi Windows

3. Browser (Mozila Firefox/Chrome)

4. Notepad

5. Server local XAMPP

6. Modul Praktikum Pemrograman Web

D. LANGKAH-LANGKAH PRAKTIKUM

Sebelum melakukan percobaan, ikuti langkah-langkah berikut;

1. Install software xampp

2. Buat folder di C:\htdocs\mahasiswa

3. Buat database dengan nama mahasiswa, table dengan nama mhs seperti modul 4 kemarin, atau bisa menggunakan data dari modul 4 kemarin

PERCOBAAN

1. Modifikasi script percobaan 1 modul 4 dengan menambahcss dibagian bawah tag body. berikut script lengkap

<html>
<head>
<title>Data Mahasiswa</title>
</head>
<body>
<?Php
$koneksi=mysql_connect('localhost','root','');
$db=mysql_select_db('mahasiswa');
?>
<style type="text/css">
table{border:1px solid #000000;}
th{background-color:#2B95EC; color:#FFFFFF;}
tr:hover{background-color:#00ccff;}
</style>

<table width="600" cellpadding="3" cellspacing="3" align="center" border="1">
<tr><th colspan="2">Input Data Mahasiswa</th></tr>

<form action ="forml.php" method="post" enctype="multipart/form-data">
<tr>
<td width="500">NIM</td>
<td width="600"><input type="text" name="txtnim" size="25"></td>
</tr>

<tr>
<td width="500">NAMA</td>
<td width="600"><input type="text" name="txtnama" size="45"></td>
</tr>

<tr>
<td width="500">Jenis Kelamin</td>
<td width="600">
<input name="radiokelamin" type="radio" value="Laki-Laki"/>Laki-Laki
<input name="radiokelamin" type="radio" value="Perempuan"/>Perempuan
</td>
</tr>

<tr>
<td width="500">Alamat</td>
<td width="600"><textarea name="txtalamat" rows="5" cols="45"></textarea></td>
</tr>

<tr>
<td width="500">Jurusan</td>
<td width="600"><input type="text" name="txtjurusan" size="45"></td>
</tr>

<tr>
<td width="500"></td>
<td width="600">
<input id="submit" type="submit" name="simpan" value="simpan">
<input id="submit" type="Reset" value="Batal"></td></tr>
</form></table>

<?Php
if(isset($_POST['simpan'])){
   $Nim =$_POST['txtnim'];
   $Nama =$_POST['txtnama'];
   $Jenis_Kelamin =$_POST['radiokelamin'];
   $Alamat =$_POST['txtalamat'];
   $Jurusan =$_POST['txtjurusan'];

$input ="insert into mhs (Nim,Nama,Jenis_Kelamin,Alamat,Jurusan) values ('$Nim','$Nama','$Jenis_Kelamin','$Alamat','$Jurusan')";

if($simpan&&$Nim==''){
   echo "</br> NIM tidak boleh kosong, diisi dulu";}elseif($Nama=='')
   {echo "</br> Nama tidak boleh kosong, diisi dulu";}
   elseif($Jenis_Kelamin==''){
   echo "</br> Jenis Kelamin tidak boleh kosong, diisi dulu";}
   elseif($Alamat==''){
   echo "</br> Alamat tidak boleh kosong, diisi dulu";}
   elseif($Jurusan==''){
       echo "</br> Jurusan tidak boleh kosong, diisi dulu";}
       else{mysql_query($input);echo'</br> Data berhasil dimasukkan';}}
?>

<hr>
<H2 align="center">Data Mahasiswa</H2>

<?Php
$warna1 = "FFFFFF";
$warna2 = "CCFFFF";
$warna = $warna1;

$sql=mysql_query("SELECT * FROM mhs ORDER BY Nim");
       if(!$sql)
       die("Query Salah");

echo "<table cellpadding=4 border=1 align=center><tr>
<th>No</th>
<th>Nim</th>
<th>Nama</th>
<th>Jenis_Kelamin</th>
<th>Alamat</th>
<th>Jurusan</th>
<th>Pilihan</th></tr>";

$no=$posisi+1;
   while ($baris = mysql_fetch_row($sql)){
   $Nim =$baris[0];
   $Nama =$baris[1];
   $Jenis_Kelamin =$baris[2];
   $Alamat =$baris[3];
   $Jurusan =$baris[4];

   if($warna == $warna1){
   $warna = $warna2;}
   else{
   $warna = $warna1;}
   echo "<tr bgcolor=$warna>
   <td align=center>$no</td>
   <td align=center>$Nim</td>
   <td align=center>$Nama</td>
   <td align=center>$Jenis_Kelamin</td>
   <td align=center>$Alamat</td>
   <td align=center>$Jurusan</td>
   <td align=center><a href=?proses=bltdel&&kddetail=$id_balita>ubah</a>
   <a href=?proses=bltubh&&kdubah=$id_balita>hapus</a></td>
   </tr>";
   $no++;
   }
   echo "</table>";

?>
</body>
</html>

2. Simpan dengan nama forml.php

3. hasilnya

TUGAS

1. Modifikasi hasil tugas modul 4 dengan menambahkan script css yang berbeda dari percobaan 1 modul 6

<html>
<head>
<title>Data Mahasiswa</title>
</head>
<body>
<?Php
$koneksi=mysql_connect('localhost','root','');
$db=mysql_select_db('mahasiswa');
?>
<style type="text/css">
body{background:red}
table{border:1px solid;}
th{background-color:pink; color:#FFFFFF;}
tr:hover{background-color:#00ccff;}
td{font-weight:bold; background:grey; border:solid}
</style>

<table width="600" cellpadding="3" cellspacing="3" align="center" border="1">
<tr><th colspan="2">Input Data Mahasiswa</th></tr>

<form action ="forml.php" method="post" enctype="multipart/form-data">
<tr>
<td width="500">NIM</td>
<td width="600"><input type="text" name="txtnim" size="25"></td>
</tr>

<tr>
<td width="500">NAMA</td>
<td width="600"><input type="text" name="txtnama" size="45"></td>
</tr>

<tr>
<td width="500">Jenis Kelamin</td>
<td width="600">
<input name="radiokelamin" type="radio" value="Laki-Laki"/>Laki-Laki
<input name="radiokelamin" type="radio" value="Perempuan"/>Perempuan
</td>
</tr>

<tr>
<td width="500">Alamat</td>
<td width="600"><textarea name="txtalamat" rows="5" cols="45"></textarea></td>
</tr>

<tr>
<td width="500">Jurusan</td>
<td width="600"><input type="text" name="txtjurusan" size="45"></td>
</tr>

<tr>
<td width="500"></td>
<td width="600">
<input id="submit" type="submit" name="simpan" value="simpan">
<input id="submit" type="Reset" value="Batal"></td></tr>
</form></table>

<?Php
if(isset($_POST['simpan'])){
   $Nim =$_POST['txtnim'];
   $Nama =$_POST['txtnama'];
   $Jenis_Kelamin =$_POST['radiokelamin'];
   $Alamat =$_POST['txtalamat'];
   $Jurusan =$_POST['txtjurusan'];

$input ="insert into mhs (Nim,Nama,Jenis_Kelamin,Alamat,Jurusan) values ('$Nim','$Nama','$Jenis_Kelamin','$Alamat','$Jurusan')";

if($simpan&&$Nim==''){
   echo "</br> NIM tidak boleh kosong, diisi dulu";}elseif($Nama=='')
   {echo "</br> Nama tidak boleh kosong, diisi dulu";}
   elseif($Jenis_Kelamin==''){
   echo "</br> Jenis Kelamin tidak boleh kosong, diisi dulu";}
   elseif($Alamat==''){
   echo "</br> Alamat tidak boleh kosong, diisi dulu";}
   elseif($Jurusan==''){
       echo "</br> Jurusan tidak boleh kosong, diisi dulu";}
       else{mysql_query($input);echo'</br> Data berhasil dimasukkan';}}
?>

<hr>
<H2 align="center">Data Mahasiswa</H2>

<?Php
$warna1 = "FFFFFF";
$warna2 = "CCFFFF";
$warna = $warna1;

$sql=mysql_query("SELECT * FROM mhs ORDER BY Nim");
       if(!$sql)
       die("Query Salah");

echo "<table cellpadding=4 border=1 align=center><tr>
<th>No</th>
<th>Nim</th>
<th>Nama</th>
<th>Jenis_Kelamin</th>
<th>Alamat</th>
<th>Jurusan</th>
<th>Pilihan</th></tr>";

$no=$posisi+1;
   while ($baris = mysql_fetch_row($sql)){
   $Nim =$baris[0];
   $Nama =$baris[1];
   $Jenis_Kelamin =$baris[2];
   $Alamat =$baris[3];
   $Jurusan =$baris[4];

   if($warna == $warna1){
   $warna = $warna2;}
   else{
   $warna = $warna1;}
   echo "<tr bgcolor=$warna>
   <td align=center>$no</td>
   <td align=center>$Nim</td>
   <td align=center>$Nama</td>
   <td align=center>$Jenis_Kelamin</td>
   <td align=center>$Alamat</td>
   <td align=center>$Jurusan</td>
   <td align=center><a href=?proses=bltdel&&kddetail=$id_balita>ubah</a>
   <a href=?proses=bltubh&&kdubah=$id_balita>hapus</a></td>
   </tr>";
   $no++;
   }
   echo "</table>";

?>
</body>
</html>

2. Simpan dengan nama forml.php

3. hasilnya

2. Buat css baru untuk memodifikasi tabel input pada percobaan 1 modul 6. Berikut script

<html>
<head>
<title>Data Mahasiswa</title>
</head>
<body>
<?Php
$koneksi=mysql_connect('localhost','root','');
$db=mysql_select_db('mahasiswa');
?>
<style>
table#tabelmodul1 tr td{
font-size: 9pt;
padding: 0.5em;
vertical-align: top;
border-width: 0px;
padding: 5px;
border: 1px solid #ccc;
}

table#tabelmodul1 th{
background-color: #f7a302;
}
table#tabelmodul1{
color: #000000    ;
font-size: 9pt;
padding: 0.5em;
border-width: 1px;
border-style: solid;
border-color:#969BA5;
border-collapse: collapse;
}

table#tabelmodul1 tr td {
padding: 0.5em;
vertical-align: top;
border-width: 0px;
padding: 5px;
border: 1px solid #ccc;
}

</style>

<table width="600" cellpadding="3" cellspacing="3" align="center" id="tabelmodul1">
<tr><th colspan="2">Input Data Mahasiswa</th></tr>

<form action ="forml.php" method="post" enctype="multipart/form-data">
<tr>
<td width="500">NIM</td>
<td width="600"><input type="text" name="txtnim" size="25"></td>
</tr>

<tr>
<td width="500">NAMA</td>
<td width="600"><input type="text" name="txtnama" size="45"></td>
</tr>

<tr>
<td width="500">Jenis Kelamin</td>
<td width="600">
<input name="radiokelamin" type="radio" value="Laki-Laki"/>Laki-Laki
<input name="radiokelamin" type="radio" value="Perempuan"/>Perempuan
</td>
</tr>

<tr>
<td width="500">Alamat</td>
<td width="600"><textarea name="txtalamat" rows="5" cols="45"></textarea></td>
</tr>

<tr>
<td width="500">Jurusan</td>
<td width="600"><input type="text" name="txtjurusan" size="45"></td>
</tr>

<tr>
<td width="500"></td>
<td width="600">
<input id="submit" type="submit" name="simpan" value="simpan">
<input id="submit" type="Reset" value="Batal"></td></tr>
</form></table>

<?Php
if(isset($_POST['simpan'])){
    $Nim =$_POST['txtnim'];
    $Nama =$_POST['txtnama'];
    $Jenis_Kelamin =$_POST['radiokelamin'];
    $Alamat =$_POST['txtalamat'];
    $Jurusan =$_POST['txtjurusan'];

$input ="insert into mhs (Nim,Nama,Jenis_Kelamin,Alamat,Jurusan) values ('$Nim','$Nama','$Jenis_Kelamin','$Alamat','$Jurusan')";

if($simpan&&$Nim==''){
    echo "</br> NIM tidak boleh kosong, diisi dulu";}elseif($Nama=='')
    {echo "</br> Nama tidak boleh kosong, diisi dulu";}
    elseif($Jenis_Kelamin==''){
    echo "</br> Jenis Kelamin tidak boleh kosong, diisi dulu";}
    elseif($Alamat==''){
    echo "</br> Alamat tidak boleh kosong, diisi dulu";}
    elseif($Jurusan==''){
        echo "</br> Jurusan tidak boleh kosong, diisi dulu";}
        else{mysql_query($input);echo'</br> Data berhasil dimasukkan';}}
?>

<hr>
<H2 align="center">Data Mahasiswa</H2>

<?Php
$warna1 = "FFFFFF";
$warna2 = "CCFFFF";
$warna = $warna1;

$sql=mysql_query("SELECT * FROM mhs ORDER BY Nim");
        if(!$sql)
        die("Query Salah");

echo "<table cellpadding=4 border=1 align=center><tr>
<th>No</th>
<th>Nim</th>
<th>Nama</th>
<th>Jenis_Kelamin</th>
<th>Alamat</th>
<th>Jurusan</th>
<th>Pilihan</th></tr>";

$no=$posisi+1;
    while ($baris = mysql_fetch_row($sql)){
    $Nim =$baris[0];
    $Nama =$baris[1];
    $Jenis_Kelamin =$baris[2];
    $Alamat =$baris[3];
    $Jurusan =$baris[4];

    if($warna == $warna1){
    $warna = $warna2;}
    else{
    $warna = $warna1;}
    echo "<tr bgcolor=$warna>
    <td align=center>$no</td>
    <td align=center>$Nim</td>
    <td align=center>$Nama</td>
    <td align=center>$Jenis_Kelamin</td>
    <td align=center>$Alamat</td>
    <td align=center>$Jurusan</td>
    <td align=center><a href=?proses=bltdel&&kddetail=$id_balita>ubah</a>
    <a href=?proses=bltubh&&kdubah=$id_balita>hapus</a></td>
    </tr>";
    $no++;
    }
    echo "</table>";

?>
</body>
</html>

2. Simpan dengan nama forml.php

3. hasilnya

3. download tamplate css di link berikut http://www.templatemo.com/page/1 silahkan modifikasi tamplate tersebut dan gabungkan dengan form input dan hasil view percobaan 1 modul 6

TEKNIK INFORMATIKA

Selasa, 11 November 2014

PRAKTIKUM PEMROGRAMAN WEB #6

Tidak ada komentar:

Posting Komentar