�ݺ�ߣ

Membuat Halaman WEB Dinamis Tingkat Lanjut
By : Roseri Sinaga,S.Kom

Konsep Pemrograman WEB
dinamis
Web atau Website atau World Wide Web
(WWW), yaitu sebuah sistem dimana informasi
dalam bentuk teks, gambar, suara dan lain –
lain dipresentasikan dalam bentuk hypertext
dan dapat diakses oleh perangkat lunak yang
disebut browser.

Web dapat menghubungkan dari sembarang
tempat dalam sebuah dokumen atau gambar
ke sembarang tempat di dokumen lain.
Dengan sebuah browser yang memiliki
Graphical User Interface (GUI), link – link dapat
dihubungkan ke tujuannya

Web Dinamis
Web dinamis adalah web yang menampilkan informasi
serta dapat berinteraksi dengan pengguna. Web yang
dinamis memungkinkan pengguna untuk berinteraksi
menggunakan form sehingga dapat mengolah informasi
yang ditampilkan. Web dinamis bersifat interaktif, tidak kaku
dan terlihat lebih indah. Dengan kata lain web dinamis
adalah website dimana halaman yang akan ditampilkan
dibuat pada saat halaman tersebut diminta oleh user /
pemakai, misalnya user / pemakai ingin mengakses
database dan menampilkannya pada halaman website. Web
dinamis biasanya merupakan PHP yang ditulis pada editor
teks dan disimpan dalam bentuk *.php.

Sebagai contoh script file php :
<center>
<font size="3" color="brown"><b>SELAMAT DATANG DI SISTEM
INFORMASI NILAI ONLINE</b></br></font>
<table border="1">
<tr bgcolor="#CC6600">
<td align="center"><b>LOGIN USER</td>
</tr>
<tr bgcolor="#990033">
<td>
<form action="log_proses.php" method="POST">
<table >
<tr>
<td>USERNAME</td>
<td>:</td>
<td><input type="text" name="nim" size="27"></td>
</tr>

<tr>
<td>PASSWORD</td>
<td>:</td>
<td><input type="password" name="password" size="27"></td>
</tr>
<tr>
<td align="center" colspan="3"><input type="submit"
name="log_in" value="Log In"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</center>

Syarat – syarat Web Dinamis
1. Tersedianya web server
Biasanya berupa hardware maupun software. Untuk
hardware yaitu seperangkat komputer yang selalu terhubung
online ke internet. Untuk software selain operating system
harus disediakan juga software untuk web server itu sendiri.
2. Tersedianya software pemrograman web berbasis server
yaitu Text Editor HTML dan PHP, ada banyak macamnya
contoh: Adobe Dreamweaver, EditPlus, Notepad++ , Notepad
dll
3. Tersedianya database
Database merupakan software yang digunakan untuk
menyimpan dan memanajemen data. Contohnya Oracle,
MySQL, dan lain – lain.

Mempersiapkan pembuatan
aplikasi
1. Komputer/Laptop yang sudah terinstall Sistem Operasi
sesuai kebutuhan, digunakan untuk menjalankan
beberapa aplikasi pendukung.
2. Aplikasi WebServer, PHP, dan Database ( contoh pakai
MySQL). Contoh Aplikasi Web Server diantaranya:
WAMPP, XAMPP, AppServ dll.
3. Text Editor HTML dan PHP, ada banyak macamnya
contoh: Adobe Dreamweaver, EditPlus, Notepad++ ,
Notepad dll

Koneksi PHP - MySQL
Kali ini kita akan membuat sebuah aplikasi web dengan
PHP untuk menyimpan data Album.
Berikut ini langkah – langkahnya :
1. Jalankan aplikasi Web Server yang ada di
komputermu. (cth : Wampp, Xampp, Apache dll)
2. Buka Aplikasi Web Browser (Cth : Mozilla Firefox,
Internet explorer dll )
3. masuk ke Link http://localhost/phpmyadmin

Sehingga muncul halaman phpmyadmin seperti berikut
ini :

Tuliskan nama database pada kolom Create New
Database.
Misalkan nama databasenya adalah dbalbum
kemudian klik tombol “Create”

Kemudian buat tabel pada database dbalbum,
Misal : tabelalbum
Isi dengan 3 field. Seperti pada gambar berikut :
Kemudian klik tombol Go

Kita bisa mengisi data pada tabelalbum dengan
mengklik tombol insert.

Database-nya sudah siap,, selanjutnya kita koneksikan
PHP dengan MySQL-nya.
Berikut adalah langkah – langkah nya :
1. Ketik kodingnya bisa menggunakan Dreamweaver
atau pake Notepad juga bisa.
Ketikkan Kode Program 1.

Kode Program 1 .
Koneksi PHP – MySQL
<?php
$host = "localhost";
$username = "root";
$password = "";
$databasename = "dbalbum";
$connection = mysql_connect($host, $username, $password)
or die("Kesalahan Koneksi ... !!");
mysql_select_db($databasename, $connection) or
die("Databasenya Error");
?>

username dan password, cara mengecek-nya klik pada
tab Privileges pada saat pertama kali buka
phpMyAdmin
Simpan Kode Program 1 dengan nama:
db_connect.php
Buat dalam satu folder
(Mis nama folder: album) lalu simpan
pada(c://xampp/htdocs).

Langkah berikutnya, buatlah sebuah file .php yang
nantinya akan di-load pertama.
kali ketika kita membuka aplikasi kita. Caranya ketik
saja Kode Program 2. simpan dengan nama index.php
di folder yang sama.

NB: pada Kode Program 2 pada baris ke 7 terdapat link untuk memanggil file
CSS,
untuk itu tambahkan juga sebuah file CSS. Buka Notepad dan ketikkan
koding berikut :

Simpan File CSS tersebut dengan nama: style.css dan buat dalam folder
album
Selanjutnya kita buat untuk proses Add New Album atau menambahkan
album baru.
Untuk keperluan ini kita membutuhkan sebuah form yang akan digunakan
untuk
memasukkan data albumnya (title dan artist). Untuk itu buatlah sebuah
file.php dan
Ketikkan Kode Program 3.
Form Add New Album
Simpan dengan nama add.php di folder yang sama (folder album)

Jika kalian klik Add New Album, maka akan muncul form untuk menginput
data album ke dalam database.

Jika kalian isikan data dan kalian tekan tombol Add, datanya tidak
akan masuk ke database, karena kita belum membuat koding untuk
melakukan insert ke tabel tabelalbum.
Oleh karena itu kita akan membuat koding untuk memasukkan data.
Simpan dengan nama insert_album.php

Sekarang coba kita tes untuk menginputkan album baru ke
dalam database.
Caranya tinggal ketik aja pada form Add New Album

Kalo kalian lihat, di halaman index kan ada link Delete dan Edit. 2 link
itu ntar buat menghapus dan meng-update album. Kita buat dulu
untuk yang delete ya.
Buat sebuah file .php dan ketikkan Kode Program 5.
Simpan Kode Program 5 dengan nama: delete.php, buat dalam
folder yang sama (folder album)

Jika kita ingin menghapus album, maka kita bisa menggunakan link
Delete (misal kita ingin menghapus album “malam minggu ” dari
artist “Ada Band”, tinggal klik saja link Delete pada baris album
yang akan dihapus.

Untuk edit album, buat lagi 2 file .php dan ketikkan Kode Program 6
dan Kode Program 7.
Kode Program 6 Edit Album

Simpan Kode Program 6 dengan nama: edit.php dan simpan dalam
folder album
Lanjutkan dengan Kode Program 7.
Simpan Kode Program 7 dengan nama: update.php dan simpan
dalam folder album

�ݺ�ߣ

Kk 13 modul

Recommended

More Related Content

What's hot (18)

Viewers also liked (7)

Similar to Kk 13 modul (20)

Recently uploaded (6)

Kk 13 modul