Modul Pengenalan Teknologi Informasi - E

MAGISTER TEKNIK INFORMATIKA
Modul Pengenalan
Teknologi Informasi
Pengenalan Pemrograman web
Kusrini
1
DAFTAR ISI
Daftar Isi ................................................................................................................................................................. 2
Daftar Gambar ........................................................................................................................................................ 2
Kebutuhan .............................................................................................................................................................. 3
Menghidupkan Server ............................................................................................................................................ 3
Membuat Database ................................................................................................................................................ 3
Pembuatan Interface .............................................................................................................................................. 6
INDEX.php ........................................................................................................................................................... 6
database.php ...................................................................................................................................................... 6
input.php ............................................................................................................................................................ 7
simpan.php ......................................................................................................................................................... 7
daftar.php ........................................................................................................................................................... 8
Menjalankan aplikasi .............................................................................................................................................. 8
DAFTAR GAMBAR
Gambar 1 Halaman XAMPP Control Panel ............................................................................................................. 3
Gambar 2 Halaman MySql ...................................................................................................................................... 4
Gambar 3 Halaman Database pti ............................................................................................................................ 4
Gambar 4 Halaman Create Table Mahasiswa ......................................................................................................... 5
Gambar 5 Halaman Table Mahasiswa .................................................................................................................... 5
Gambar 6 Halaman Utama ..................................................................................................................................... 9
Gambar 7 Halaman Input Mahasiswa .................................................................................................................... 9
Gambar 8 Halaman Daftar Mahasiswa ................................................................................................................. 10
2
PENGENALAN PEMROGRAMAN WEB
KEBUTUHAN
Untuk mengikuti modul ini diperlukan:
1.
2.
Xampp
Browser
MENGHIDUPKAN SERVER
Server web Apache dan MySql harus dalam keadaan hidup supaya aplikasi web dapat dijalankan. Untuk
menghidupkannya jalankan XAMPP Control Panel sehingga sistem akan menampilkan Halaman XAMPP Control
Panel seperti tampak pada Gambar 1. Pastikan Apache dan MySql dalam status Running, jika belum tekan
Tombol Start
Gambar 1 Halaman XAMPP Control Panel
MEMBUAT DATABASE
Sebagai penyimpan data akan dibuat sebuah database dengan DBMS MySql yang diberi nama pti. Untuk
membuat database tersebut lakukan langkah-langkah sebagai berikut:
1.
Buka browser, ketikkan alamat http://localhost/phpmyadmin/, akan tampil halaman MySql seperti
tampak pada Gambar 2
3
Gambar 2 Halaman MySql
2.
Ketikkan nama database yang akan dibuat (pti) pada Text Create new database lalu tekan Tombol
Create, akan ditampilkan Halaman Database pti seperti tampak pada Gambar 3
Gambar 3 Halaman Database pti
4
3.
Buat tabel dengan memasukkan nama tabel (Mahasiswa) ke Text Name dan jumlah kolom (3) ke Text
Number of fields lalu tekan Tombol Go, sistem akan menampilkan Halaman Create Table Mahasiswa
seperti tampak pada Gambar 4.
Gambar 4 Halaman Create Table Mahasiswa
4.
Isikan nama kolom bada Baris Field, tipe data pada Baris Type dan lebar data pada Baris
Length/Values lalu tekan tombol Save, sistem akan menampilkan Halaman Tabel Mahasiswa seperti
tampak pada Gambar 5.
Gambar 5 Halaman Table Mahasiswa
5
PEMBUATAN INTERFACE
Pada kegiatan ini akan dibuat 5 buah file, yaitu:
1.
2.
3.
4.
5.
File index.php, berfungsi sebagai halaman utama
File database.php, berfungsi sebagai modul penghubung interface dengan database pti
File input.php, berfungsi sebagai interface input data mahasiswa
File simpan.php, berfungsi sebagai script untuk menimpan data sesuai dengan yang diinputkan pada
file input.php
File daftar.php, berfungsi sebagai interface untuk menampilkan data dari tabel mahasiswa
Simpan semua file dalam folde C:\XAMPP\htdocs\pti
INDEX.PHP
<html>
<head>
<title>Latihan</title>
</head>
<body>
<h1>Halaman Utama</h1>
<a href='input.php'>Input Mahasiswa</a><br>
<a href='daftar.php'>Input Mahasiswa</a><br>
</body>
</html>
DATABASE.PHP
<?php
function open_connection()
{
$host="localhost";
$username="root";
$password="";
$databasename="pti";
$link=mysql_connect($host,$username,$password) or die ("Database
tidak dapat dihubungkan!");
mysql_select_db($databasename,$link);
return $link;
}
?>
6
INPUT.PHP
<html>
<head></head>
<body>
<h2>Input Mahasiswa</h2>
<form name="form1" method="post" action="simpan.php">
<table width="200" border="0">
<tr>
<td>NIM</td>
<td>:</td>
<td><input name="nim" id="nim" type="text" maxlength="5"
size="12"></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input name="nama" id="nama" type="text" maxlength="255"
size="30"></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><input name="alamat" id="alamat" type="text"
size="30"></td>
</tr>
</table>
<table width="200" border="0">
<tr>
<td>
<input type="submit" name="Submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</td>
</tr>
</table>
</form>
<a href="index.php" >home</a>
</body>
</html>
SIMPAN.PHP
<?php
require("database.php");
$link=open_connection();
$sqlstr="insert into mahasiswa(NIM, Nama, Alamat)
values (".$_POST['nim']. ", '".$_POST['nama']."',
'".$_POST['alamat']."')";
$result = mysql_query ($sqlstr) or
die ("Kesalahan pada perintah SQL!".$sqlstr);
mysql_close($link);
header("Location: input.php");
?>
7
DAFTAR.PHP
<html>
<head>
<title>Latihan</title>
</head>
<body>
<h2>Daftar Mahasiswa</h2>
<table width="100%" border="1" cellpadding="1" cellspacing="0"
style="empty-cells:show">
<tr>
<th width="10%">NO</th>
<th width="10%">NIM</th>
<th width="20%">NAMA</th>
<th>ALAMAT</th>
</tr>
<?php
require("database.php");
$link=open_connection();
$sqlstr = "select * from mahasiswa";
$nomor = 1;
$query=mysql_query($sqlstr);
while ($row = mysql_fetch_object ($query))
{
echo "
<tr>
<td>".$nomor."</td>
<td>".$row->NIM."</td>
<td>".$row->Nama."</td>
<td>".$row->Alamat."</td>
</tr>";
$nomor++;
}
?>
</table>
<a href="index.php" >home</a>
</body>
</html>
MENJALANKAN APLIKASI
Untuk menjalankan aplikasi lakukan langkah-langkah sebagai berikut:
1.
Buka browser dan ketikkan alamat http://localhost/pti/, akan tampak Halaman Utama seperti tampak
pada Gambar 6
8
Gambar 6 Halaman Utama
2.
Klik Link Input Mahasiswa, akan tampak Halaman Input Mahasiswa seperti tampak pada Gambar 8.
Gambar 7 Halaman Input Mahasiswa
3.
4.
Isikan data Nim, Nama dan alamat pada tempat yang telah disediakan lalu tekan Tombol Simpan
Kembali pada Halaman Utama dengan menekan Link Home
9
5.
Dari Halaman Utama klik Link Daftar Mahasiswa untuk melihat daftar mahasiswa yang sudah
diinputkan seperti tampak pada Gambar 8
Gambar 8 Halaman Daftar Mahasiswa
10