MODUL
6
MENGGABUNGKAN
WEB
PHP & CSS
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
1. Laptop
2. Sistem Operasi Windows 7
3. Browser Chrome
4. Notepad ++
5. Web server XAMMP
6. Lembar kerja percobaan
D.
LANGKAH-LANGKAH PRAKTIKUM
Percobaan
1
1.
Modifikasi
script percobaan 1 modul 4 dengan menambahkan css dibagian bawah tag body.
<html>
<head>
<title>Data Mahasiswa</title>
</head>
<body>
<?php
//koneksi ke database
$koneksi=mysql_connect ('localhost', 'root', '');
//host, user, password
$db=mysql_select_db ('mahasiswa');
//nama database
?>
<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="form.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 type="radio" name="radiokelamin" value="Laki-laki" />Laki-laki
<input type="radio" name="radiokelamin" 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>Jurusan</td>
<td><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
//menyimpan data ke database
if (isset($_POST['simpan'])) {
$nim = $_POST['txtnim'];
$nama = $_POST['txtnama'];
$jeniskelamin = $_POST['radiokelamin'];
$alamat = $_POST['txtalamat'];
$jurusan = $_POST['txtjurusan'];
//query input
$input="insert into mhs (nim, nama, jenis_kelamin, alamat, jurusan)
value ('$nim', '$nama', '$jeniskelamin', '$alamat', '$jurusan')";
//kondisi inputan
if($nim =='') {
echo "</br>NIM tidak boleh kosong, diisi dulu";
}elseif($nama==''){
echo "</br>Nama tidak boleh kosong, diisi dulu";
}elseif($jeniskelamin==''){
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
//buat warna table
$warna1 = "#ffffff";
$warna2 = "#ccffff";
$warna = $warna1;
//menampilkan data
$sql = mysql_query("SELECT * FROM mhs ORDER BY nim");
if(!$sql)
die(mysql_error());
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>
</tr>";
$no=+1;
while ($baris = mysql_fetch_row($sql)) {
$nim = $baris[0];
$nama = $baris[1];
$jeniskelamin = $baris[2];
$alamat = $baris[3];
$jurusan = $baris[4];
if($warna == $warna1){
$warna = $warna2;}
else{
$warna = $warna1;
}
echo "<tr>
<td align=center>$no</td>
<td align='center'>$nim</td>
<td align=center>$nama</td>
<td align=center>$jeniskelamin</td>
<td align=center>$alamat</td>
<td align=center>$jurusan</td>
</tr>";
$no++;
}
echo "</table>";
?>
</body>
</html>
<head>
<title>Data Mahasiswa</title>
</head>
<body>
<?php
//koneksi ke database
$koneksi=mysql_connect ('localhost', 'root', '');
//host, user, password
$db=mysql_select_db ('mahasiswa');
//nama database
?>
<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="form.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 type="radio" name="radiokelamin" value="Laki-laki" />Laki-laki
<input type="radio" name="radiokelamin" 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>Jurusan</td>
<td><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
//menyimpan data ke database
if (isset($_POST['simpan'])) {
$nim = $_POST['txtnim'];
$nama = $_POST['txtnama'];
$jeniskelamin = $_POST['radiokelamin'];
$alamat = $_POST['txtalamat'];
$jurusan = $_POST['txtjurusan'];
//query input
$input="insert into mhs (nim, nama, jenis_kelamin, alamat, jurusan)
value ('$nim', '$nama', '$jeniskelamin', '$alamat', '$jurusan')";
//kondisi inputan
if($nim =='') {
echo "</br>NIM tidak boleh kosong, diisi dulu";
}elseif($nama==''){
echo "</br>Nama tidak boleh kosong, diisi dulu";
}elseif($jeniskelamin==''){
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
//buat warna table
$warna1 = "#ffffff";
$warna2 = "#ccffff";
$warna = $warna1;
//menampilkan data
$sql = mysql_query("SELECT * FROM mhs ORDER BY nim");
if(!$sql)
die(mysql_error());
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>
</tr>";
$no=+1;
while ($baris = mysql_fetch_row($sql)) {
$nim = $baris[0];
$nama = $baris[1];
$jeniskelamin = $baris[2];
$alamat = $baris[3];
$jurusan = $baris[4];
if($warna == $warna1){
$warna = $warna2;}
else{
$warna = $warna1;
}
echo "<tr>
<td align=center>$no</td>
<td align='center'>$nim</td>
<td align=center>$nama</td>
<td align=center>$jeniskelamin</td>
<td align=center>$alamat</td>
<td align=center>$jurusan</td>
</tr>";
$no++;
}
echo "</table>";
?>
</body>
</html>
2.
Simpan
file dengan nama form.php pada folder yang sudah dibuat sebelumnya.
3.
Buka
file menggunakan browser dengan mengetikkan alamat http://localhost/l200120077/form.php pada kolom alamat.
4.
Lihat
hasilnya dan isikan data-data yang diperukan.
5. Print screen hasilnya lampirkan dalam laporan.
E.
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 ke database
$koneksi=mysql_connect ('localhost', 'root', '');
//host, user, password
$db=mysql_select_db ('mahasiswa');
//nama database
?>
<style type="text/css">
body
{background-image: url('gfc.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
color:#ffffff}
table
{border: 1px solid #ff0000;
background-color: pink
color:#000000}
th
{background-color: #ff0000;
color: #ffffff;}
tr:hover
{ background-color: #f08080;}
</style>
<table width="600" cellpadding="3" cellspacing="3" align="center" border="1">
<tr>
<th colspan="2">Input Data Mahasiswa</th>
</tr>
<form action="form.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 type="radio" name="radiokelamin" value="Laki-laki" />Laki-laki
<input type="radio" name="radiokelamin" 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>Jurusan</td>
<td><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
//menyimpan data ke database
if (isset($_POST['simpan'])) {
$nim = $_POST['txtnim'];
$nama = $_POST['txtnama'];
$jeniskelamin = $_POST['radiokelamin'];
$alamat = $_POST['txtalamat'];
$jurusan = $_POST['txtjurusan'];
//query input
$input="insert into mhs (nim, nama, jenis_kelamin, alamat, jurusan)
value ('$nim', '$nama', '$jeniskelamin', '$alamat', '$jurusan')";
//kondisi inputan
if($nim =='') {
echo "</br>NIM tidak boleh kosong, diisi dulu";
}elseif($nama==''){
echo "</br>Nama tidak boleh kosong, diisi dulu";
}elseif($jeniskelamin==''){
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
//buat warna table
$warna1 = "#ffffff";
$warna2 = "#ccffff";
$warna = $warna1;
//menampilkan data
$sql = mysql_query("SELECT * FROM mhs ORDER BY nim");
if(!$sql)
die(mysql_error());
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=+1;
while ($baris = mysql_fetch_row($sql)) {
$nim = $baris[0];
$nama = $baris[1];
$jeniskelamin = $baris[2];
$alamat = $baris[3];
$jurusan = $baris[4];
if($warna == $warna1){
$warna = $warna2;}
else{
$warna = $warna1;
}
echo "<tr>
<td align=center>$no</td>
<td align='center'>$nim</td>
<td align=center>$nama</td>
<td align=center>$jeniskelamin</td>
<td align=center>$alamat</td>
<td align=center>$jurusan</td>
<td align=center>
<a href='hapus.php?nim=$nim'>Hapus</a> |
<a href='edit.php?nama=$nama&nim=$nim&jeniskelamin=$jeniskelamin&alamat=$alamat&jurusan=$jurusan'> Edit</a></td>
</tr>";
$no++;
}
echo "</table>";
?>
</body>
</html>
<head>
<title>Data Mahasiswa</title>
</head>
<body>
<?php
//koneksi ke database
$koneksi=mysql_connect ('localhost', 'root', '');
//host, user, password
$db=mysql_select_db ('mahasiswa');
//nama database
?>
<style type="text/css">
body
{background-image: url('gfc.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
color:#ffffff}
table
{border: 1px solid #ff0000;
background-color: pink
color:#000000}
th
{background-color: #ff0000;
color: #ffffff;}
tr:hover
{ background-color: #f08080;}
</style>
<table width="600" cellpadding="3" cellspacing="3" align="center" border="1">
<tr>
<th colspan="2">Input Data Mahasiswa</th>
</tr>
<form action="form.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 type="radio" name="radiokelamin" value="Laki-laki" />Laki-laki
<input type="radio" name="radiokelamin" 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>Jurusan</td>
<td><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
//menyimpan data ke database
if (isset($_POST['simpan'])) {
$nim = $_POST['txtnim'];
$nama = $_POST['txtnama'];
$jeniskelamin = $_POST['radiokelamin'];
$alamat = $_POST['txtalamat'];
$jurusan = $_POST['txtjurusan'];
//query input
$input="insert into mhs (nim, nama, jenis_kelamin, alamat, jurusan)
value ('$nim', '$nama', '$jeniskelamin', '$alamat', '$jurusan')";
//kondisi inputan
if($nim =='') {
echo "</br>NIM tidak boleh kosong, diisi dulu";
}elseif($nama==''){
echo "</br>Nama tidak boleh kosong, diisi dulu";
}elseif($jeniskelamin==''){
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
//buat warna table
$warna1 = "#ffffff";
$warna2 = "#ccffff";
$warna = $warna1;
//menampilkan data
$sql = mysql_query("SELECT * FROM mhs ORDER BY nim");
if(!$sql)
die(mysql_error());
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=+1;
while ($baris = mysql_fetch_row($sql)) {
$nim = $baris[0];
$nama = $baris[1];
$jeniskelamin = $baris[2];
$alamat = $baris[3];
$jurusan = $baris[4];
if($warna == $warna1){
$warna = $warna2;}
else{
$warna = $warna1;
}
echo "<tr>
<td align=center>$no</td>
<td align='center'>$nim</td>
<td align=center>$nama</td>
<td align=center>$jeniskelamin</td>
<td align=center>$alamat</td>
<td align=center>$jurusan</td>
<td align=center>
<a href='hapus.php?nim=$nim'>Hapus</a> |
<a href='edit.php?nama=$nama&nim=$nim&jeniskelamin=$jeniskelamin&alamat=$alamat&jurusan=$jurusan'> Edit</a></td>
</tr>";
$no++;
}
echo "</table>";
?>
</body>
</html>
2. Buatlah css baru untuk memodifikasi tabel input pada percobaan 1 modul 6.
Berikut contoh script cssnya.
3. Silahkan download tamplate css dilink http://www.templatemo.com/page/1 silahkan modifikasi template tersebut dan gabungkan dengan form input dan print screen hasil percobaan 1 modul 6 lampirkan dalam laporan
<html>
<head>
<title>Data Mahasiswa</title>
</head>
<body>
<?php
//koneksi ke database
$koneksi=mysql_connect ('localhost', 'root', '');
//host, user, password
$db=mysql_select_db ('mahasiswa');
//nama database
?>
<style type="text/css">
table tr td{
font-size: 10pt;
padding: 0.5em;
vertical-align: top;
border-width: 0px;
padding: 5px;
border: 1px solid}
table th{
background: url("gf.jpg");}
table{
background-color:violet;
color: #0000cc;
font-size: 12pt;
padding: 0.5em;
border-width: 2px;
border-style: solid;
border-color: #969ba5;}
tr:hover{
background-color:pink;}
</style>
<table width="600" cellpadding="3" cellspacing="3" align="center" border="1">
<tr>
<th colspan="2">Input Data Mahasiswa</th>
</tr>
<form action="form.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 type="radio" name="radiokelamin" value="Laki-laki" />Laki-laki
<input type="radio" name="radiokelamin" 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>Jurusan</td>
<td><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
//menyimpan data ke database
if (isset($_POST['simpan'])) {
$nim = $_POST['txtnim'];
$nama = $_POST['txtnama'];
$jeniskelamin = $_POST['radiokelamin'];
$alamat = $_POST['txtalamat'];
$jurusan = $_POST['txtjurusan'];
//query input
$input="insert into mhs (nim, nama, jenis_kelamin, alamat, jurusan)
value ('$nim', '$nama', '$jeniskelamin', '$alamat', '$jurusan')";
//kondisi inputan
if($nim =='') {
echo "</br>NIM tidak boleh kosong, diisi dulu";
}elseif($nama==''){
echo "</br>Nama tidak boleh kosong, diisi dulu";
}elseif($jeniskelamin==''){
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
//buat warna table
$warna1 = "#ffffff";
$warna2 = "#ccffff";
$warna = $warna1;
//menampilkan data
$sql = mysql_query("SELECT * FROM mhs ORDER BY nim");
if(!$sql)
die(mysql_error());
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=+1;
while ($baris = mysql_fetch_row($sql)) {
$nim = $baris[0];
$nama = $baris[1];
$jeniskelamin = $baris[2];
$alamat = $baris[3];
$jurusan = $baris[4];
if($warna == $warna1){
$warna = $warna2;}
else{
$warna = $warna1;
}
echo "<tr>
<td align=center>$no</td>
<td align='center'>$nim</td>
<td align=center>$nama</td>
<td align=center>$jeniskelamin</td>
<td align=center>$alamat</td>
<td align=center>$jurusan</td>
<td align=center>
<a href='hapus.php?nim=$nim'>Hapus</a> |
<a href='edit.php?nama=$nama&nim=$nim&jeniskelamin=$jeniskelamin&alamat=$alamat&jurusan=$jurusan'> Edit</a></td>
</tr>";
$no++;
}
echo "</table>";
?>
</body>
</html>
<head>
<title>Data Mahasiswa</title>
</head>
<body>
<?php
//koneksi ke database
$koneksi=mysql_connect ('localhost', 'root', '');
//host, user, password
$db=mysql_select_db ('mahasiswa');
//nama database
?>
<style type="text/css">
table tr td{
font-size: 10pt;
padding: 0.5em;
vertical-align: top;
border-width: 0px;
padding: 5px;
border: 1px solid}
table th{
background: url("gf.jpg");}
table{
background-color:violet;
color: #0000cc;
font-size: 12pt;
padding: 0.5em;
border-width: 2px;
border-style: solid;
border-color: #969ba5;}
tr:hover{
background-color:pink;}
</style>
<table width="600" cellpadding="3" cellspacing="3" align="center" border="1">
<tr>
<th colspan="2">Input Data Mahasiswa</th>
</tr>
<form action="form.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 type="radio" name="radiokelamin" value="Laki-laki" />Laki-laki
<input type="radio" name="radiokelamin" 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>Jurusan</td>
<td><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
//menyimpan data ke database
if (isset($_POST['simpan'])) {
$nim = $_POST['txtnim'];
$nama = $_POST['txtnama'];
$jeniskelamin = $_POST['radiokelamin'];
$alamat = $_POST['txtalamat'];
$jurusan = $_POST['txtjurusan'];
//query input
$input="insert into mhs (nim, nama, jenis_kelamin, alamat, jurusan)
value ('$nim', '$nama', '$jeniskelamin', '$alamat', '$jurusan')";
//kondisi inputan
if($nim =='') {
echo "</br>NIM tidak boleh kosong, diisi dulu";
}elseif($nama==''){
echo "</br>Nama tidak boleh kosong, diisi dulu";
}elseif($jeniskelamin==''){
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
//buat warna table
$warna1 = "#ffffff";
$warna2 = "#ccffff";
$warna = $warna1;
//menampilkan data
$sql = mysql_query("SELECT * FROM mhs ORDER BY nim");
if(!$sql)
die(mysql_error());
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=+1;
while ($baris = mysql_fetch_row($sql)) {
$nim = $baris[0];
$nama = $baris[1];
$jeniskelamin = $baris[2];
$alamat = $baris[3];
$jurusan = $baris[4];
if($warna == $warna1){
$warna = $warna2;}
else{
$warna = $warna1;
}
echo "<tr>
<td align=center>$no</td>
<td align='center'>$nim</td>
<td align=center>$nama</td>
<td align=center>$jeniskelamin</td>
<td align=center>$alamat</td>
<td align=center>$jurusan</td>
<td align=center>
<a href='hapus.php?nim=$nim'>Hapus</a> |
<a href='edit.php?nama=$nama&nim=$nim&jeniskelamin=$jeniskelamin&alamat=$alamat&jurusan=$jurusan'> Edit</a></td>
</tr>";
$no++;
}
echo "</table>";
?>
</body>
</html>
3. Silahkan download tamplate css dilink http://www.templatemo.com/page/1 silahkan modifikasi template tersebut dan gabungkan dengan form input dan print screen hasil percobaan 1 modul 6 lampirkan dalam laporan
Halo kak. Terimakasih atas ilmu baru yang diberikan kepada saya yang baru belajar HTML ini . Semoga kedepan dapat memberikan ilmu baru dan cara baru tentang HTML yang lebih dapat dimengerti dengan cepat ya kak hehe. Terimakasih kak,sukses kedepannya. Salam kenal kak. Perkenalkan saya Ardila Yunita, NIM 1922500096 , Kelompok SI2J , link kampus https://www.atmaluhur.ac.id/
BalasHapusHai kak, Terimakasih atas ilmu nya kak, tulisan kakak sangat bermanfaat bagi saya dan bisa membantu saya dalam menggabungkan web PHP dan CSS. Semangat terus kak. Perkenalkan nama saya Ranum Fatwa Aulia, NIM 1922500033, dan jangan lupa kunjungi website kampus saya di https://www.atmaluhur.ac.id/
BalasHapusPagi kak, terimakasih atas artikel yang anda buat dan terimakasih atas ilmunya, ini sangat membantu saya dalam proses belajar dan cukup jelas dan bisa dipahaami, terus membuat artikel yang bermanfaat terus menebar kebaikan
BalasHapusNama:edo renaldi
Kls:si2j
Nim:1922500004
Website kampus saya https://www.atmaluhur.ac.id
Sangat membantu sekali bagi saya seorang pemula Sangat bermanfaat sekali Semangat upload artikel terbarunya.Perkenalkan nama saya mjainuri 1922500045 SI2J dan web kampus saya https://www.atmaluhur.ac.id/ jangan lupa di kunjungi ya kak.
BalasHapus