Kk 13 modul

KK 13Membuat 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>

Hasilnya :

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 aplikasi1. 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 : tabelalbumIsi 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 untukmemasukkan 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 tidakakan 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 albumLanjutkan dengan Kode Program 7.

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

Terimakasih…

Aplikasi CRUD telah selesai