kk 13 modul
TRANSCRIPT
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