MODUL PEMBELAJARANREKAYASA PERANGKAT LUNAK

PEMROGRAMAN WEB

Modul I Introduction

Mengetahui konsep websiteSistem informasi merupakan suatu aplikasi yang menjembatani

kebutuhan user terhadap data. Data yang diperoleh melalui system informasi bermacam. Dalam sistem informasi ini terkadang dapat diakses melalui offline(aplikasi desktop) maupun aplikasi online(aplikasi jaringan). Untuk aplikasi desktop dapat dipelajari melalui pemrograman desktop seperti halnya Java, C++, VB maupun pemrograman yang lain.

Pemrograman online cara kerjanya sedikit berbeda dengan kinerja pemrograman desktop. Pemrograman online melibatkan server yang memproses kode pemrograman. Server bisa melalui koneksi internet ataupun dengan menginstall aplikasi server seperti xampp, wamp, ataupun aplikasi lain yang menyediakan server ofline alias tanpa koneksi dengan jaringan.

Hasil dari pemrograman online adalah berupa situs atau website. Website dibentuk berdasarkan bahasa pemrograman script. Bahasa pemrograman yang digunakan adalah dalam bentuk HTML (Hyper Text Markup Language). Hasil dari bentuk pemrograman ini adalah dalam bentuk situs statis atau sebuah halaman web yang disimpan pada server dengan format tertentu untuk dikirim pada browser client.

Tugas1. Jelaskanl bagaimana perbedaan antara pemrograman online dinamis

maupun statis !2. Buatlah flowchart dan dfd untuk membangun aplikasi sesuai dengan

tugasnya masing-masing yang sudah ditentukan sebelumnya(toko, rental mobil, perpustakaan).

Modul II pembelajaran PHP

Dalam pemrograman situs dinamis dapat menggunakan PHP(PHP Hypertext Preprocessor) adalah bahasa pemrograman berbasis server side.

Server side adalah suatu prinsip kerja, dimana untuk mengeksekusi atau menjalankan bahasa pemrograman dibutuhkan web server dalam hal ini php menggunakan Apache. Dalam menginstall apache kita dapat meinstall secara terpisah dan dapat juga include kedalam suatu software semacam xampp, yang menyediakan aplikasi web server sekaligus protokol transfer datanya.

Dalam mengaktifkan dan mengeksekusi php akan disandingkan dengan database MySQL. Berikut akan kita install terlebih dahulu xampp untuk mengaktifkan web server.

Instalasi xamppXampp tidak saja mencakup PHP, mySQL, dan Apache web server tetapi juga kelengkapan pendukung lainnya seperti phpMyAdmin, dan FileZilla FTP Server.

Sebelum membahas lebih lanjut mengenai tata cara install xampp, sangat disarankan untuk menyiapkan file Installer xampp terlebih dahulu sehingga dapat langsung dipraktekkan. Saat tulisan ini dibuat, installer Xampp for windows tersedia dalam versi 1.6.8 dan berukuran sekitar 38 MB, serta dapat diperoleh secara gratis dengan mendownloadnya melalui Menu Download di apachefriends.org.Setelah siap, lakukan install xampp dengan cara seperti berikut:

1. Klik dua-kali file XAMPP yang telah Kita download (contoh yang dipakai di sini adalah xampp-win32-1.7.0-installer.exe, yaitu XAMPP versi 1.7.0). Bila Kita mendapati versi XAMPP yang berbeda, cara instalasi kurang lebih masih sama.

2. Berikutnya klik saja [OK] untuk pilihan bahasa, English.

3. Klik [Next] pada jendela Setup Wizard yang muncul.

4. Berikutnya Kita diminta memilih folder tempat XAMPP dipasang. Untuk mudahnya pilih saja di c:\, seperti default-nya dan klik [Next].

5. Pada jendela yang muncul berikutnya, klik saja [Install], dimana shortcut untuk menjalankan XAMPP akan ada di desktop dan di menu Start.

6. Tunggu beberapa menit sementara XAMPP diinstal.

7. Klik [Finish] setelah XAMPP selesai diinstal.

8. Kita akan mendapati tawaran, apakah akan menjalankan XAMPP Control Panel sekarang atau lain kali. Klik [Yes] bila Kita akan menjalankannya.

9. Setiap kali Kita akan mengelola situs Web Kita di PC lokal, Kita harus menjalankan XAMPP. Menjalankan XAMPP berarti memfungsikan PC Kita sebagai server Web. Untuk menjalankannya, klik ikon XAMPP dan Kita dihadapkan pada XAMPP Control Panel.

10. Klik [Start] masing-masing untuk Apache dan MySql, sehingga muncul tkita Running untuk keduanya. PC lokal Kita kini sudah menjadi server Web lokal.

11. Apakah server Web Kita benar-benar jalan? Coba jalankan browser Kita (misalnya Internet Explorer) dan ketikkan: http://localhost. Bila muncul tampilan seperti di bawah ini, berarti PC Kita sudah berfungsi sebagai server Web. Klik [English] untuk memilih bahasa Inggris.

12. Dari tampilan yang muncul Kita dapat melakukan berbagai administrasi untuk server Kita termasuk membuat database SQL untuk WordPress.

13. Kita tinggal menutup browser untuk menutup tampilan di atas. Untuk menonaktifkan server lokal Kita, keluar dari XAMPP Control Panel. Caranya, pada XAMPP Control Panel, klik [Stop] pada masing-masing [Apache] dan [MySql], lalu tutup jendela kontrol panel (klik X pada pojok kanan atas).

PHPDiatas telah dijelaskan bahwa bahasa pemrograman PHP adalah bahasa scripting alias bahasa yang dijalankan berdasarkan server side. Setelah kita menginstall XAMPP dan telah berjalan dengan baik maka kita bisa belajar PHP. Jika instalasi web server masih belum berjalan dengan baik lakukan lagi cara install XAMPP yang benar.Struktur Script PHPUntuk memulai belajar PHP alangkah baiknya kita mengetahui struktur penulisan kode untuk PHP. Berikut adalah struktur didalam penulisan programnya:

<?php....code program...?> <?....code program...?> <script language=”PHP”>...code program...</script>

Praktek

1. buatlah folder baru pada C:\Xampp\htdocs\PHP untuk menampung semua jenis file php kita.

2. Bukalah notepad atau phpEditor atau Dreamweaver lalu ketikkan source code berikut :<html><body><!--script php yang pertama dan bagian ini tidak dikompile--><?php echo “Belajar PHP simpel dan mudah…….”; ?></body></html>

3. Simpan file kode pada folder langkah 1 diatas dengan nama terserah disertai extension ‘.php’, sebagai contoh latihan1.php.

4. Buka browser dan ketikkan http://localhost/PHP/latihan1.php. dan akan menampilkan tulisan “Belajar PHP simpel dan mudah…….”pada layar browser kita.

Variabel, Operator dan ExpresiPenulisan dalam setiap pemrograman haruslah memiliki ciri khas

tersendiri dengan perbedaan terhadap baris dan menjoroknya baris. Karena setiap aturan adalah dipakai untuk membedakan kode program mana yang sedang berjalan untuk memudahkan ketika kita melakukan perbaikan. Seperti contoh berikut :<?php //an expression statement 2 + 3;

//another expression statement print("PHP!");

//a control statement if(3 > 2) { //an assignment statement $a = 3; }?>

Penulisan kode program diatas jelas, memiliki perbedaan mana yang anggota IF dan mana yang bukan atau mana fungsi untuk mencetak. Dan juga tingkat spasinya.Variabel

Untuk beroperasi menggunakan tipe data string, integer, float, char, boolean, kita memerlukan kehadiran sebuah variabel. Dengan adanya variabel tersebut kita dapat menggunakannya untuk melakukan proses perhitungan maupun proses logika lainnya. Berikut penamaan yang benar untuk suatu variabel pada pemrograman PHP.

Table 2.3. Contoh Penamaan Variabel

Nama Vari-abel

Validi-tas

Keterangan

I Valid Satu huruf seperti ini bagus untuk proses sementara, contoh untuk looping

1 Invalid Salah karena bukan angka

_1 Valid Masih diperbolehkan karena adanya tkita Underscore

firstName Valid Variabel seperti ini dapat mempermudah kita untuk bekerja, karena jelas fungsinya

7Lucky Invalid Pada awal karakter nama tidak boleh angka

~password Invalid Karakter pertama tidak boleh

Last!Visit Invalid Gunakan saja underscore karena tkita ! tidak termasuk kedalam karakter alpha..

Compute-Mean

Invalid - tidak diperbolehkan dalam php

Berikut adalah contoh tabel penamaan dan penugasan pada variabel. Table 2.4. Contoh penamaan variabel

String Constants Integer Constants Double Constants

$myString = "leon";$myString = "\n";

$myInteger = 1;$myInteger = -256;

$myDouble = 123.456;$myDouble = -98.76e5;

Contoh penggunaan variabel adalah :<?php //create variable $result = 2 + 5;

//create another variable $doubleResult = $result * 2.001;

//print the second variable print($doubleResult);?>

Contoh pencampuran variabel :<?php $name = "toyib";

//toyib print("Hoooooiiiii, $name!\n");

//toyib lagi print <<< EODHoooii piye belajari again, $name!EOD;?>

Untuk membebaskan variabel pada memori haruslah diberikan perintah tambahan sebagai berikut : null, unset,isset, empty. Berikut adalah contoh variabel yang dimasukkan kedalam variabel lain :<?php //create variable $a = "Apple";

//assign $a to $b $b = $a;

//change $a $a = "Ball";

//prints Apple print($b);?>

Untuk menghapus memori variabel pada komputer, seperti contoh berikut :<?php //create variable $a = "Apple";

//create references $b = &$a;

//change value of both $a and $b $a = "Ball";

//remove $a unset($a);

//prints Ball print($b);?> Berikut contoh untuk mengganti sebuah string perkarakter :<?php //mengganti spasi dengan underscore $s = "a string"; $s{1} = "_"; print($s);?>

KonstantaDalam pemrograman akan dijumpai konstanta pada php, berikut adalah contohnya :<?php define("STKITARD_GREETING", "Hello, World!"); print(STKITARD_GREETING);?>

konstanta adalah variabel yang tidak dapat diubah oleh user. OperatorOperator dapat difungsikan ketika kita melakukan fungsi aritmetika. Berikut tabel operator yang diijinkan pada php.

Table 2.6. Operator Arimatika

Operator Operation It Performs Example

+ Addition

Explicit positive sign

12 + 43+13

- Subtraction

Negation

100 - 50-3

* Multiplication 3 * 4

/ Division 5 / 2

% Modulo division 5 % 2

++ Post-increment

Pre-increment

$a++++$a

-- Post-decrement

Pre-decrement

$a----$a

Contoh Penggunaan operator pada PHP :<?php //prints 6 (not 8!) print(2 + 2 * 2); print("<br>\n");

//prints 2.5 print(5 / 2); print("<br>\n");

//prints 1 print(5 % 2); print("<br>\n");

//prints 35 print(" 7 little Indians" * 5);

print("<br>\n");?>Berikut adalah contoh penggunaan dan perbedaan increment dan decrement. Simpan hasilnya untuk dibuat dalam laporan.<?php $VisitorsToday = 1;

//prints 1 print($VisitorsToday++);

//VisitorsToday is now 2 print("<br>\n");

//prints 3 print(++$VisitorsToday); print("<br>\n");

//prints 4.14 $pi = 3.14; $pi++; print($pi); print("<br>\n");

//prints PHQ $php = "PHP"; $php++; print($php); print("<br>\n");

//prints PHP $php = "PHP"; $php--; print($php); print("<br>\n");?>

Berikut adalah tabel untuk penugasan operator

Table 2.7. Penugasan Operator

Opera-tor

Arti operator Contoh

= Assign right side to left side $a = 13

+= Add right side to left side $a += 2

-= Subtract right side from left side $a -= 3

*= Multiply left side by right side $a *= 5

/= Divide left side by right side $a /= 4

%= Set left side to left side modulo right side $a %= 2

&= Set left side to bitwise-AND of left side and right side

$a &= $b

|= Set left side to bitwise-OR of left side and right side

$a |= $b

^= Set left side to bitwise-XOR of left side and right side

$a ^= $b

.= Set left side to concatenation of left side and right side

$a .= "more text"

Contoh penggunaan dari tabel diatas :<?php //Add 5 to Count $Count = 0; $Count = $Count + 5;

//Add 5 to Count $Count = 0; $Count += 5;

//prints 13 print($a = $b = 13); print("<br>\n");

//prints 7

$Count = 2; print($Count += 5); print("<br>\n");?>Tugas Praktikum :

1. Praktikkanlah semua contoh yang telah diberikan dan buatlah laporan modulnya.

2. Buatlah dengan pemrograman PHP untuk menghitung luasan dan volume dibawah dengan variabel yang telah didefinisikan :

Luas segitiga Luas persegi panjang Volume balok Volume kubusDan buatlah laporan hasil praktikumnya.

Pernyataan ControlPernyataan IFIf adalah pernyataan yang dipakai untuk mempresentasikan logika jika ...maka...., lihatlah contoh berikut :if(expression1){ //berisi kode apabila pernyataan if bernilai benar }elseif(expression2){ //Pernyataan ini bersambung dengan diatas jika salah maka dikerjakan if berikutnya jika benar.}else{ //blok ini dikerjkana jika kedua pernyataan diatas salah.}Contoh if sederhana :<?php if(date("D") == "Mon") { print("Remember to put the trash out."); }

?>

Berikut adalah contoh dalam pemrograman php. Menggunakana representasi if-else-if.

Contoh :<?php $name = "Leon"; if($name == "") { print("You have no name."); } elseif(($name == "leon") OR ($name == "Leon")) { print("Hello, Leon!"); } else { print("Your name is '$name'."); }?>

Contoh complex if-else-if-else :<?php /* ** Get today's weekday name */ $englishDay = date("l");

/* ** Find the today's German name */ if($englishDay == "Monday") { $deutschDay = "Montag"; } elseif($englishDay == "Tuesday")

{ $deutschDay = "Dienstag"; } elseif($englishDay == "Wednesday") { $deutschDay = "Mittwoch"; } elseif($englishDay == "Thursday") { $deutschDay = "Donnerstag"; } elseif($englishDay == "Friday") { $deutschDay = "Freitag"; } elseif($englishDay == "Saturday") { $deutschDay = "Samstag"; } else { // It must be Sunday $deutschDay = "Sonntag"; } /* ** Print today's English and German names */ print("<h2>German Lesson: Day of the Week</h2>\n" . "<p>\n" . "In English: <b>$englishDay</b>.<br>\n" . "In German: <b>$deutschDay</b>\n" . "</p>\n");?>

Operator Tkita Tanya ‘?’ Selain menggunakan operator IF, kita juga perlu mengenal fungsi dari operator ’?’ agar kita dapat menggunakannya pada saat yang tepat dan pada

kondisi yang pas. Operator tersebut berguna untuk dibandingkan dan mencari kondisi yang memenuhi persyaratan yang diminta sistem. Cara kerjanya seperti orang bertanya, apabila kondisi terpenuhi maka jawaban apa yang harus dikerjakan. Berikut syntax penulisannya.Kondisi yang dicari ? kondisi bila benar : kondisi bila salah;($clientQueue > 0) ? serveClients() : cleanUp();

Ekspresi ‘?’ tersebut sama halnya dengan ekspresi if berikut :if($clientQueue > 0) serveClients();else cleanUp();

Tetapi dari kondisi tersebut dapat dibedakan, sebagai contoh print(true ? "it's true" : "it's false");

dari syntax tersebut akan menghasilkan keluaran “it’s true” sama halnya ketika kita menuliskan print (“it’s true”);. Cara seperti ini tidak bias dilakukan oleh kondisi IF.

Pernyataan SwitchUntuk menangani kondisi if-else-if-else dibutuhkan baris dan waktu

yang banyak. Cara tersebut dapat digantikan dengan menggunakan operator SWITCH. Operator tersebut artinya apabila kondisi terpenuhi maka yang dikerjakan adalah kondisi satu, dua, atau tiga dan seterusnya. Berikut contoh pemrogramannya.<?php /* ** Get today's weekday name */ $englishDay = date("l");

/* ** Find the today's German name */ switch($englishDay) {

case "Monday": $deutschDay = "Montag"; break; case "Tuesday": $deutschDay = "Dienstag"; break; case "Wednesday": $deutschDay = "Mittwoch"; break; case "Thursday": $deutschDay = "Donnerstag"; break; case "Friday": $deutschDay = "Freitag"; break; case "Saturday": $deutschDay = "Samstag"; break; default: // It must be Sunday $deutschDay = "Sonntag"; }

/* ** Print today's English and German names */ print("<h2>German Lesson: Day of the Week</h2>\n" . "<p>\n" . "In English: <b>$englishDay</b>.<br>\n" . "In German: <b>$deutschDay</b>\n" . "</p>\n");?>

Operator LOOPOpeator LOOP artinya perulangan, artinya dengan adanya loop ini kita

mengulang baris sebanyak yang ditentukan atau sebanyak kondisi yang terulang menjadi terpenuhi.

Berikut adalah syntax dalam penanganan switch :while(expression){ Zero or more statements}

Sebagai contoh kita menggunakan logika switch untuk mencetak nama hari. Kode programnya adalah sebagai berikut :<?php //get the current date in number of seconds $currentDate = time();

//print some text explaining the output print("Days left before Friday:\n"); print("<ol>\n");

while(date("l", $currentDate) != "Friday") { //print day name print("<li>" . date("l", $currentDate) . "</li>\n");

//add 24 hours to currentDate $currentDate += (60 * 60 * 24); }

print("</ol>\n");?> Apabila terjadi perulangan terus menerus maka itu disebut infinte loops. Dalam pemrograman php apabila itu terjadi dapat diatur dan dibatasi dengan menggunakan set_time_limit, tetapi php akan dengan otomatis mematikan apabila 30 detik.Break

Pernyataan break terletak didalam switch sebagai pemberhenti dari proses perulangan dan beralih ke proses lainnya. Contoh break sederhana :<?php while(TRUE) {

print("This line is printed."); break; print("This line will never be printed."); }?>Contoh break bersarang :<?php while(TRUE) { while(TRUE) { print("This line is printed."); break 2; } print("This line will never be printed."); }?>

ContinuePernyataan continue adalah pernyataan dimana setelah adanya

break aka dilakukan kondisi berikutnya yaitu setelah pernyataan continue. Berikut contoh dari operator tersebut :Contoh continue<?php /* ** get ten random numbers, ** each greater than the next */ //init variables $count = 0; $max = 0; //get ten random numbers while($count < 10) { $value = rand(1,100);

//try again if $value is too small

if($value < $max) { continue; }

$count++; $max = $value;

print("$value <br>\n"); }?>

Do…WhileSelain while terdapat jenis perulangan dimana dalam kondisi peru-

langan tersebut dikerjakan, lalu diperiksa apakah kondisinya masih memenuhi persyaratan, jika masih memenuhi memenuhi maka do dikerjakan sampai kondisi dinyatakan salah.Contoh do…while<?php /* ** get the current date in number of seconds */ $currentDate = time();

//print some text explaining the output print("Days left before next Friday:\n"); print("<ol>\n");

do { /* ** print day name */ print("<li>" . date("l", $currentDate) . "</li>\n");

/* ** add 24 hours to currentDate

*/ $currentDate += (60 * 60 * 24); } while(date("l", $currentDate) != "Friday");

print("</ol>\n");?>

For Perulangan menggunakan for adalah digunakan ketika perulangan

tersebut memiliki batas yang jelas dan batas yang telah ditentukan oleh programmer.

Berikut adalah syntax program for :for(initialization; continue; increment){ Zero or more statements}

Contoh For Sederhana<?php for($counter = 1; $counter <= 10; $counter++) { print("counter is $counter<br>\n"); }?>

Contoh For mencetak hari<?php /* ** print some text explaining the output */ print("Days left before Friday:\n"); print("<ol>\n");

for($currentDate = date("U"); date("l", $currentDate) != "Friday"; $currentDate += (60 * 60 * 24))

{ /* ** print day name */ print("<li>" . date("l", $currentDate) . "</li>\n"); }

print("</ol>\n");?>

ForeachPernyataan yang digunakan untuk perulangan dengan kondisi array.

Berikut adalah syntax programnya :foreach(array as key=>value){ Zero or more statements}

Tugas Praktikum :1. Praktikkanlah semua contoh yang telah diberikan dan buatlah

laporan modulnya.2. Buatlah dengan pemrograman PHP untuk mengerjakan

pemrograman berikut : Cetak

******Sampai 10 kali

Cetak hasil dari 25 dengan menggunakan logika FOR Cetak $a =$a * 23 sampai $>1000, jika $a lebih dari

1000 maka looping selesai. Gunakan swtich...case untuk mencetak nama hari.Dan buatlah laporan hasil praktikumnya.

Modul III Pembangunan aplikasi berbasis webPenentuan flowchart

Sistem Informasi Rental Mobil

Registrasi Pemesanan Pilih Mobil Masukkan ID Pengembalian

Sistem Informasi dkdkdkdkdfdddjdjkjkdjfkdjkddkkddjddddkdoidkdoiddkddkdkdkjiumshOpPppPerPerPerpustakaan

Registrasi Peminjaman Pengembalian Masukkan ID Pencarian

Sistem Informasi Toko

Registrasi Pembelian Stok barang Masukkan ID Penjualan

Dalam Pembuatan suatu aplikasi diperlukan adanya planning atau perencanaan yang matang. Perencanaan tersebut meliputi sistem, alur kerja, segala sesuatu yang dibutuhkan untuk menyelesaikan sebuah sistem. Perencanaan dan alur kerja diperlukan agar sistem dapat selesai tepat waktu, dan dengan kondisi sesuai yang diinginkan.

Dalam pembuatan sistem aplikasi berbasis website, selain menggunakan flowchart dan algoritma juga diperlukan adanya sitemap. Sitemap ini menekankan pada halaman atau form apa saja yang dibutuhkan dalam pembuatan suatu aplikasi.

Contoh sitemap adalah sebagai berikut :

Gambar 1. contoh sitemap untuk sistem informasi rental online

Gambar 2. contoh sitemap untuk sistem informasi perpustakaan online

Gambar 3. contoh sitemap untuk sistem informasi tokoSetelah kita menentukan pembuatan sitemap, itu berarti kita sudah

ada gambaran tampilan interface yang akan kita buat nantinya. Tampilan interface dapat kita buat menggunakan bahasa pemrograman html atau sejenisnya. Dalam menangani event yang terjadi pada form tampilan tersebut dapat menggunakan script php atau javascript. Selain itu untuk operasi database dapat digunakan database mysql.

Pembangunan aplikasi

Gambar 4. mendesain tampilan situs menggunakan DreamweaverPada gambar diatas adalah salah satu contoh langkah untuk membuat

halam depan situs. Pembuatan tersebut dapat menggunakan kombinasi antara photoshop dan dreamweaver. Bukalah photoshop dan buat file baru dengan menerapkan lebar(width) dan panjang(heigh) bergantung pada kesukaan. Untuk contoh kasus berikut adalah menggunakan lebar 900 dan panjang 600.Untuk desain photoshop :

1. mendesain background

Gambar mendesain background melalui photoshop2. mendesain footer(catatan kaki), header(kepala situs)

Gambar mendesain footer(catatan kaki)Catatan kaki itu juga termasuk penting karena dengan kita

memberikan catatan kaki, maka kita memberitahukan identitas siapa yang telah memiliki hak dalam sistem informasi web tersebut.3. mendesain isi

Gambar mendesain bagian isiDalam website terdapat bagian halaman yang harus memang diisi oleh

badan dari sebuah sistem. Biasanya terdapat pada sisi sebelah kanan atau sisi sebelah kiri, dan tengah. Untuk kasus contoh diatas kita menggunakan letak sebelah kiri untuk menampung isi dari sebuah website.

4. menggunakan teknik slicing(pemotongan gambar dan save as web)

Gambar menggunakan fasilitas slice toolsFasilitas berupa slice tools diatas dipakai untuk memotong gambar

yang telah diseleksi. Setelah memotong beberapa bagian file yang ada pada gambar tersebut, langkah berikutnya adalah klik file save as web untuk kemudian memilih potongan tersebut menjadi bagian dari website. Pembuatan halaman muka index.php dapat dilakukan dengan mempraktekkan file tutorial yang telah saya berikan. Tugas Praktikum :1. Buatlah halaman index.php yang menampung semua menu transaksi sesuai dengan jenis tugas kelompok yang saya berikan. Kumpulkan satu minggu setelah file ini diberikan.

Modul IV Koneksi Database Suatu aplikasi membutuhkan simpanan data yang terorganisir agar

tidak terjadi redundancy(data gkita), data teratur, dapat di manfaatkan kapanpun dan keadaan bagaimanapun, mengurangi kehilangan data. Dari beberapa keuntunngan pemakaian data dalam bentuk digital maka database akan sangat membantu mencapainya.

slicing

Aplikasi sistem informasi akan menjadi powerful apabila disandingkan dengan pemakaian sistem database yang memadahi. Untuk itu kita perlu membuat dan manajemen basisdata yang bagus. Pertanyaan akan muncul untuk mencapainya. Pada pembuatan database diperlukan penyesuaian terhadap kondisi aplikasi yang akan dibuat. Misalnya apabila kita menggunakan aplikasi desktop maka manajemen sistem basis data yang cocok dapat menggunakan SQL Server atau Microsoft Access. Dan apabila kita membuat sistem aplikasi berbasis php atau aplikasi online lain sebaiknya menggunakan MySQL.

Pembuatan database sesuai sitemapSesuai dengan tujuan kita dari awal, untuk membuat sistem informasi

berbasis php maka kita akan menggunakan database MySQL. Karena memang mudah dan diperuntukkan dalam pemakaian database aplikasi online. Terlebih dahulu kita harus menginstall software XAMPP sebagai server ofline. Dengan menggunakan software tersebut biasanya dengan otomatis akan terinstall tempat untuk menyimpan dan memproses database secara online.

Pada sitemap yang telah dibuat perlu diberikan rincian data dalam bentuk database. Sitemap tersebut dapat dijadikan sebagai langkah acuan dalam membuat database.

Langkah dalam menentukan database adalah :1. Tentukan jenis transaksi yang ada2. Tentukan dalam transaksi tersebut membutuhkan data apa saja.

Misalnya dalam transaksi login kita perlu identitas user dan password. Atau pada saat persewaan, peminjaman, pembelian kita membutuhkan data apa saja.

3. Setelah didefinisikan barulah kita menentukan akan membuat tabel database seperti apa. Pada contoh diatas terdapat form login yang membutuhkan identitas user untuk memasuki wilayah admin misalnya. Maka dalam hal ini kita akan membuat tabel dengan nama user yang isi field-nya adalah sebagai berikut : nama, password, level, alamat, id. Pada pembuatan tabel diata kita menentukan nama dengan tipe data (varchar). Selanjutnya seperti tabel dibawah.

Tabel UserNama variabel Type dataNama Varchar(40)

Password Varchar(12)Level Varchar(10)Id Varchar(5)Primary key

4. Setelah membuat tabel untuk keseluruhan data maka langkah berikutnya adalah membuat form pada file.php. Untuk menghubungkan database dengan user maka diperlukan sebuah interface sebagai pengantar transaksi data. Untuk itu kita harus membuat masing-masing halaman situs diisi dengan form. Form tersebut harus sesuai dengan tabel secara keseluruhan. Sebagai contoh untuk membuat interface dari user diatas maka kita akan membuat file tersebut menggunakan dreamweaver. Jalankan dreamweaver lalu klik file new pilih php letakkan kursor didalam tag body pilih menu insert form. Seperti pada contoh gambar dibawah, lakukan hal yang sama pada keseluruhan tabel.

Gambar membuat interface untuk tabel userTugas Praktikum :1. Buatlah keseluruhan tabel database yang kita perlukan (sesuai

tugas kelompok : toko, rental, perpustakaan). Untuk membuatnya

kita dapat membuka browser lalu ketikkan pada address localhost/phpmyadmin.

2. Buatlah keseluruhan interface sesuai tabel.Tugas dikumpulkan pada saat tatap muka dan diperiksa bersama.

Database dengan mysqlAgar kita semakin paham mengenai database mysql maka tidak ada

salahnya kita belajar mysql dan menjalankannya. Berikut akan disajikan kasus pada pembuatan katalog buku perpustakaan.

KASUS 1Kasus berikut membahas tentang operasi dasar pada mysql dengan

php, menggunakan studi kasus operasi buku. Perhatikan dan ikuti dengan baik ulasan berikut akan memberikan tentang teori dasar mysql.

MySQL adalah database yang menghubungkan script PHP menggunakan perintah query dan escaps character yang sama dengan PHP. MySQL mempunyai tampilan client yang mempermudah Kita dalam mengakses database.

Gambar 1 Logo MySQLPada kasus berikut akan diberikan contoh tentang operasi pada buku

dengan memberi nam database maxi. Berikut langkah-langkah dalam studi kasus ini, semoga bermanfaat.1. Pastikan Kita masih berada pada halaman phpMyAdmin. Lihat Gambar 7.

Gambar 7 Halaman phpMyAdmin2. Untuk membuat database baru, caranya pada kotak teks Ciptakan database baru Kita ketik nama maxi setelah itu klik tombol Ciptakan. Lihat Gambar 8.

Gambar 8 Membuat database baru3. Apabila proses pembuatan database berhasil, maka akan tercipta database baru pada phpMyAdmin seperti pada Gambar 9.

Gambar 9 Pembuatan database berhasil

Membuat TabelSetelah Kita membuat database. Tahap selanjutnya adalah membuat table . Table ini nantinya akan digunakan untuk menyimpan data - data yang akan ditampilkan pada halaman web. Adapun cara-cara pembuatan table adalah sebagai berikut.1. Pastikan Kita telah membuka halaman phpMyAdmin dan mengaktifkan database maxi. Perhatikan Gambar 10.

Gambar 10 Halaman phpMyAdmin

2. Perhatikan Gambar 11. Klik pada tab SQL ,kemudian akan tampil area input perintah SQL. Ketiklah perintah di bawah ini , setelah itu klik tombol Go.

Keterangan Kode :• Baris 1 - 2 Perintah di atas akan membuat tabel dengan nama buku, field pertama yaitu field id. field ini adalah field sebagai primary key ( unik) dengan auto_increment ( penomoran secara otomatis ).• Baris 3 - 5 Perintah berikutnya akan membuat field judul dengan tipe data varchar ( 50 ) , field pengarang tipe data varchar (50) , penerbit tipe data varchar ( 30 ) dan not null ( tidak boleh kosong ) .• Baris 6 - 7 Perintah berikutnya membuat field tahun dengan tipe int dan not null ( tidak boleh kosong).3. Untuk melihat hasil pembuatan tabel , Kita dapat melihat penambahan tabel di bawah combo database. Perhatikan Gambar 12. Klik buku.4.Struktur tabel yag Kita buat akan tampil pada halaman phpMyAdmin. Lihat Gambar 13.

Gambar 11 Membuat tabel dengan perintah SQL

CREATE TABLE buku (id INT NOT NULL primary key auto_increment,judul VARCHAR ( 50 ) NOT NULL ,pengarang VARCHAR ( 50 ) NOT NULL ,penerbit VARCHAR ( 30 ) NOT NULL ,tahun INT ( 4 ) NOT NULL) ;

Gambar 12 Melihat tabel buku

Gambar 13 Menampilkan hasil pembuatan tabelMenambah data pada tabela. Perintah INSERTSetelah Kita membuat tabel, Kita akan menggunakan perintah INSERT untuk menambah data baru ke dalam tabel. Sintaks:INSERT INTO nama_tabel ( fields) VALUES ( nilai_fields); 1. Buka jendela browser Kita, ketik http://localhost/phpmyadmin pada textbox address.2. Aktifkan database maxi, kemudian aktifkan tab SQL dan ketiklah perintah di bawah untuk menambah data ke dalam tabel buku dan klik tombol Go. Perhatikan Gambar 14.INSERT INTO buku values

(1,’pemrograman java’,’Irawan’,’maxikom’,2009),(2, ‘pemrograman Visual Basic’, ‘M.Sadeli’, ‘maxikom’,2009),(3, ‘Manipulasi Photoshop CS4’, ‘Jayan’, ‘maxikom’, 2009),(4, ‘Pemrograman PHP’, ‘Rulianto Kurniawan’, ‘maxikom’,2009),(5, ‘Desain Grafis’, ‘Fandi’, ‘maxikom’, 2009) ;

Keterangan Kode :• Baris 1 Perintah Insert di atas adalah menyisipkan atau menambah data pada tabel buku.• Baris 2 Menambahkan record atau data dengan id “1”.• Baris 3 - 4 Menambahkan record atau data dengan id “2”.• Baris 5 Menambahkan record atau data dengan id “3”.• Baris 6 -7 Menambahkan record atau data dengan id “4”.• Baris 8 Menambahkan record atau data dengan id “5”.3. Untuk melihat hasil peng-inputan data, klik tabel buku. Setelah itu , klik tab Browse .Lihat Gambar 15.

Gambar 14 Perintah memasukkan data

Gambar 15 Hasil memasukkan dataMenghubungkan script php ke mysqlA. MEMBUKA KONEKSI KE SERVERUntuk melakukan koneksi ke server, Kita perlu membuat file khusus yang berfungsi sebagai panghubung antara script dan database. Untuk membuka koneksi ke server Kita harus memerlukan alamat server , username dan password. Adapun langkah-langkahnya adalah sebagai berikut:1. Kita buka aplikasi Macromedia Dreamweaver 8 . Klik Tombol Start pada Start menu. Kemudian Kita pilih menu All Programs > Macromedia > Macromedia Dreamweaver 8.2. Setelah tampil jendela Start page Kita Klik icon dengan tulisan PHP , Perhatikan Gambar 16.3. Setelah diklik icon maka akan tampil jendela dokumen baru seperti Gambar 17.

Gambar 16 Memilih PHP

Gambar 17 Tampilan Jendela dokumen PHP4. Selanjutnya Kita pastikan tab yang aktif pada Code . Lihat Gambar 18.

Gambar 18 Mengaktifkan tab Code5. Kemudian Kita hapus semua kode, lalu ketikkan kode di bawah ini.

<?php$host = “localhost”;$user = “root”;$pass = “”;$koneksi = mysql_connect($host, $user,$pass);if (!$koneksi) {echo “Koneksi ke database gagal”;};?>

Keterangan Kode :• Baris 1 Awal tag PHP.• Baris 2 - 6 Variabel host , user , password pada server dan koneksi.• Baris 7 -9 Jika koneksi database gagal , maka akan tampilkan pesan bahwa koneksi ke database gagal.• Baris 10 Akhiri Tag PHP.6. Simpan ke dalam lokasi c:/xampp/htdocs/xampp, lalu Kita buat folder baru dengan nama koneksi_PHP dan simpan file dengan nama koneksi.php. Per hatikan Gambar 19.

Gambar 19 Menyimpan dengan nama file koneksi.phpB. MENYELEKSI DATABASESetelah data terhubung ke dalam Server, Kita diizinkan untuk menghubungkan databse yang akan digunakan. Perintah untuk menyeleksi database adalah mysql_select_db( ). Adapun langkah-langkahnya adalah sebagai berikut;1. Pastikan jendela Dreamweaver Kita masih aktif. Buatlah halaman PHP yang baru.2. Ketiklah perintah di bawah ini untuk menyeleksi database maxi yang telah Kita buat sebelumnya.

<?phpinclude (“koneksi.php”);$database = “maxi”;$selek_db = mysql_select_db ($database);if (!$selek_db) {die (“Database tidak terseleksi”);}?>

Keterangan Kode :• Baris 1 Awal tag PHP.• Baris 2 Memanggil file koneksi.php.• Baris 3-4 Variabel database diisi dengan nama database yang akan dipanggil dan variabel unutk penyeleksian database.• Baris 5-7 Jika Penyeleksian database tidak berhasil maka tampilkan pesan Databse tidak terseleksi.• Baris 8 Akhiri Tag PHP.3. Simpan ke dalam lokasi c:/xampp/htdocs/xampp/koneksi_PHP dan simpan file dengan nama seleksi_db.php. Perhatikan Gambar 20.

Gambar 21 Menyimpan file dengan nama seleksi_db.phpC. MENAMPILKAN HASIL QUERYUntuk menampilkan seluruh data di dalam tabel. Kita dapat menampilkannya melalui halaman PHP yang akan Kita buat. Adapun langkah-langkahnya adalah sebagai berikut;1. Bukalah Program Dreamweaver Kita dan pilihlah jenis halaman PHP.2. Kemudian ketiklah perintah di bawah ini untuk menampilkan semua data pada tabel buku.

<html><title>Menampilkan data ke dalam tabel</title><body><table border=”1”><tr><th>Kode Buku</th><th>Judul Buku</th><th>Pengarang<th><th>Penerbit</th><th>tahun</th></tr><?phpinclude (“koneksi.php”);include (“seleksi_db.php”);$seleksi = “SELECT * FROM buku”;$hasil_seleksi = mysql_query ($seleksi);if (!$hasil_seleksi){echo “Proses penyeleksian tabelbuku gagal !!!”;

Keterangan Kode :• Baris 1-2 Awal tag HTML dan membuat title atau judul halaman.• Baris 3 - 9 Pada bagian body, dibuat perintah pembuatan tabel dengan tag <th> untuk memasukkan judul masing-masing kolom.• Baris 10 - 13 Awal tag PHP, perintah Include akan menghubungkan dan menyeleksi database dengan memanggil file koneksi.php dan seleksi_db.php yang telah Kita buat sebelumnya.• Baris 14 Variabel $seleksi diisi dengan perintah untuk menyeleksi seluruh data di dalam tabel buku, sedangkan variabel $hasil_seleksi diisi dengan perintah untuk meng-eksekusi query penyeleksian tabel.• Baris 15 - 29 Apabila proses penyeleksian gagal , maka akan ditampilkan pesan bahwa proses penyeleksian tabel gagal dan apabila berhasil dilakukan perintah pengulangan WHILE sebanyak baris yang terdapat di dalam tabel buku. Kemudian, hasil dari perintahmysql_fetch_array ditampilkan ke dalam tabel. Penulisan nama array harus sesuai dengan nama field yang terdapat pada tabel buku.• Baris 30 Akhiri dan tutup tag PHP.• Baris 31-33 Akhiri tag tabel body dan HTML.3. Simpan ke dalam lokasi c:/xampp/htdocs/xampp/koneksi_PHP dan simpan file dengan nama index.php. Perhatikan Gambar 21.

<html><title>Menampilkan data ke dalam tabel</title><body><table border=”1”><tr><th>Kode Buku</th><th>Judul Buku</th><th>Pengarang<th><th>Penerbit</th><th>tahun</th></tr><?phpinclude (“koneksi.php”);include (“seleksi_db.php”);$seleksi = “SELECT * FROM buku”;$hasil_seleksi = mysql_query ($seleksi);if (!$hasil_seleksi){echo “Proses penyeleksian tabelbuku gagal !!!”;

Gambar 21 Menyimpan file dengan nama index.phpSetelah itu Kita Ketik dialamat address pada browser Mozila Firefox yaitu http:/Localhost/xampp/koneksi_PHP lalu tekan Enter,

KASUS 2Adapun langkah-langkah untuk membuatnya adalah sebagai berikut.

1. Terlebih dahulu Kita buka Web browser yang ada pada komputercaranya klik Start | Programs | Internet Explorer atau web browserlain seperti Mozila Firefox atau opera.2. Kemudian pada kotak alamat address. Kita ketikhttp://localhost/phpmyadmin, lalu tekan Enter pada keyboard.3. Maka akan tampil halaman phpMyAdmin seperti pada Gambar 1.

Gambar 1 Halaman phpMyAdmin4. Apabila Halaman phpMyAdmin tidak muncul seperti gambardi atas maka Kita harus mengeceknya dengan cara Klik Start |All Programs | Apache Friends | XAMPP | XAMPP Control Panel.Perhatikan Gambar 2.

Gambar 2 Membuka Aplikasi xampp control panel5. Selanjutnya Kita Klik Start pada bagian Apache dan MySQL , makaakan tampil status menjadi running. Lihat Gambar 6.

Gambar 3 Apache dan MySQL telah diaktifkan

Membuat Database1. Pastikan Kita masih berada pada halaman phpMyAdmin. LihatGambar 4.

Gambar 4 Halaman phpMyAdmin2. Untuk membuat database baru, caranya pada kotak teksCiptakan database baru Kita ketik nama katalog setelah itu kliktombol Ciptakan. Lihat Gambar 5.

Gambar 5 Membuat database baru3. Apabila proses pembuatan database berhasil, maka akan terciptadatabase baru pada phpMyAdmin seperti pada Gambar 6.

Gambar 6 Pembuatan database berhasilMembuat Tabel

Setelah Kita membuat database. Tahap selanjutnya adalahmembuat table . Table ini nantinya akan digunakan untuk menyimpan

data - data yang akan ditampilkan pada halaman web.Adapun cara-cara pembuatan table adalah sebagai berikut.1. Pastikan Kita telah membuka halaman phpMyAdmin danmengaktifkan database katalog. Perhatikan Gambar 7.

Gambar 7 Halaman phpMyAdmin2. Perhatikan Gambar 8. Klik pada tab SQL ,kemudian akantampil area input perintah SQL. Ketiklah perintah di bawah ini ,setelah itu klik tombol Go.

CREATE TABLE IF NOT EXISTS katalog (id int(27) NOT NULL PRIMARY KEY AUTO_INCREMENT,foto varchar(100) DEFAULT NULL,judul text NOT NULL) ;

Keterangan kode diatas :* Baris 1 - 2 Perintah di atas akan membuat tabel dengan namakatalog, field pertama yaitu field id. field ini adalah field sebagaiprimary key ( unik) dengan auto_increment ( penomoran secaraotomatis ).* Baris 3 - 5 Perintah berikutnya akan membuat field Fotodengantipe data varchar ( 100 ) , field judul tipe data text dan not null (

tidak boleh kosong ) .

Gambar 8 Membuat tabel dengan perintah SQL3. Untuk melihat hasil pembuatan tabel , Kita dapat melihat penambahan tabel di bawah combo database. Perhatikan Gambar 9. Klik katalog.

Gambar 9 Tabel yang baru tercipta4. Struktur tabel yag Kita buat akan tampil pada halaman phpMyAdmin. Lihat Gambar 10.

Gambar 10 Struktur tabel katalogMenambah Data

a. Perintah INSERTSetelah Kita membuat tabel, Kita akan menggunakan perintahINSERT untuk menambah data baru ke dalam tabel.Sintaks:INSERT INTO nama_tabel ( fields) VALUES ( nilai_fields); 1. Buka jendela browser Kita, ketik http://localhost/phpmyadminpada textbox address.2. Aktifkan database katalog, kemudian aktifkan tab SQL dan ketiklah perintah di bawah untuk menambah data ke dalam tabelkatalog dan klik tombol Go. Perhatikan Gambar 11.

Keterangan Kode :• Baris 1 Perintah Insert di atas adalah menyisipkan atau menambahdata pada tabel katalog.• Baris 2 Menambahkan record atau data dengan id “1”.• Baris 3 - 4 Menambahkan record atau data dengan id “2”.• Baris 5 Menambahkan record atau data dengan id “3”.• Baris 6 -7 Menambahkan record atau data dengan id “4”.• Baris 8 Menambahkan record atau data dengan id “5”.

Gambar 11 Perintah memasukkan data3. Untuk melihat hasil peng-inputan data, klik tabel buku. Setelah itu ,klik tab Browse .Lihat Gambar 15.

INSERT INTO katalog VALUES(1, ‘after.jpg’, ‘After Effect CS4 untuk Orang Awam’),(2, ‘vb.jpg’, ‘Aplikasi Mini Market dengan Visual Basic6.0’),(3, ‘autocad.jpg’, ‘7 Jam Belajar Interaktif AutoCAD 2009untuk 3D’),(4, ‘facebook.jpg’, ‘Facebook untuk Orang Awam’),(5, ‘excel.jpg’, ‘Excel 2007 untuk Akuntansi ‘);

Gambar 12 Hasil memasukkan dataUntuk melakukan koneksi ke server, Kita perlu membuat file khusus yang berfungsi sebagai panghubung antara script PHP dan database. Untuk membuka koneksi ke server Kita harus memerlukan alamat server , username dan password.Adapun langkah-langkahnya adalah sebagai berikut:1. Kita buka aplikasi Macromedia Dreamweaver 8 . Klik Tombol Start pada Start menu. Kemudian Kita pilih menu All Programs > Macromedia > Macro-media Dreamweaver 8.Lihat Gambar 13.2. Setelah tampil jendela Start page Kita Klik icon dengan tulisan PHP , Per-hatikan Gambar 14.3. Setelah diklik icon maka akan tampil jendela dokumenbaru seperti Gambar 15.

Gambar 13 Membuka Program aplikasi Macromedia Dreaweaver 8

Gambar 14 Memilih PHP

Gambar 15 Tampilan Jendela dokumen PHP4. Selanjutnya Kita pastikan tab yang aktif pada Code . Lihat Gambar 16.

Gambar 16 Mengaktifkan tab Code

5. Kemudian Kita hapus semua kode, lalu ketikkan kode di bawah ini.<?php$q=$_GET[“maxi”];$con = mysql_connect(‘localhost’, ‘root’, ‘’);if (!$con){ die(‘Koneksi gagal: ‘ . mysql_error());}mysql_select_db(“katalog”, $con);$sql=”SELECT * FROM katalog WHERE Id = ‘”.$q.”’”;$result = mysql_query($sql);echo “<table border=’1’><tr><th>Cover</th><th>Judul buku</th></tr>”;while($baris = mysql_fetch_array($result)){echo “<tr><td><img src=\”$baris[foto]\” /></td><td align=’justify’>$baris[judul]</td><tr>”;}echo “</table>”;mysql_close($con);?>

Keterangan kode :• Baris 1 - 3 Awal tag PHP, perintah berikutnya adalah variabelget dengan nama maxi lalu membuat variabel untuk menghubungkankoneksi database ke server• Baris 4 - 5 Suatu kondisi apabila gagal tampilkan pesan.• Baris 6 - 8 Perintah untuk menyeleksi data, kemudian membuatvariabel untuk menampilkan data dan variabel hasil query.• Baris 9 - 13 perintah untuk membuat tabel , kolom dan barisdengan nama cover dan judul .• Baris 14 - 20 Perintah pengulangan WHILE sebanyak baris yangterdapat di dalam tabel katalog. Kemudian, hasil dari perintahmysql_fetch_array ditampilkan ke dalam tabel. Penulisan nama arrayharus sesuai dengan nama field yang terdapat pada tabel katalog.

• Baris 21 -23 Akhiri tag tabel dan koneksi mysql kemudian tutuptag php.

6. Simpan ke dalam lokasi c:/xampp/htdocs/xampp, lalu Kita buat folder baru dengan nama ajax_database dan simpan file dengan nama get_katalog.php. Perhatikan Gambar 17.

Gambar 17 Menyimpan dengan nama file get_katalog.phpTugas Praktikum :1. Buatlah form interface dan masukkan data kedalam semua tabel yang telah kalian buat. Laporan dikumpulkan pada saat tatap muka untuk diperiksa.

DAFTAR PUSTAKA[1]___Website. ”http://www.Cangkruk.com”, diakses pada November 2010.

[2]___Katalog. ”http://www.wikipedia.com”, diakses pada November 2010.[3] Anas, Dedi. ”Database MySQL”.Maxicom.2010[4] Atkinson, Leon. ”Core PHP Programming, Third Edition”. Prentice Hall PTR.2003