Praktek Pemrograman Web

Transkripsi

1 Praktek Pemrograman Web dwi sakethi Mei 2012 seratan meniko dipun ketik ngangge L A TEX 1

2 Daftar Isi 1 Praktek #1-Menginstal XAMPP Pendahuluan Langkah Kerja Hasil Proses Catatan Praktek #2-Membuat Basis Data Langkah Kerja Catatan Penting Praktek #3-Membuat Program Input/Hapus Data 9 Daftar Gambar 1 Master XAMPP Ikom XAMPP XAMPP via Start Panel XAMPP Tampilan DOS Prompt Pemasukan Data Saksi

3 1 Praktek #1-Menginstal XAMPP Tujuan dari materi praktek pertama ini adalah untuk memasang perangkat lunak XAMPP ke dalam sistem berbasis Windows. Perangkat lunak XAMPP ini sudah mencakup perangkat lunak Apache, PHP dan MySQL. Alternatif lainnya, bisa juga perangkat lunak Apache, PHP dan MySQL dipasang pada sistem operasi lainnya seperti GNU Linux. 1.1 Pendahuluan Buku ini merupakan buku panduan untuk melakukan praktek pembelajaran materi kuliah Pemrograman Berbasis Web. Dalam materi ini perangkat yang akan digunakan terutama adalah XAMPP. Perangkat lunak yang diperlukan yaitu: program Apache, PHP, dan MySQL yang sudah dipaket dalam bentuk program XAMPP atau PHP Triad atau LAMP. Yang penting dalam sistem tersedia Apache, Mysql, dan PHP. Sedangkan dalam contoh ini, digunakan XAMPP. Jika menggunakan GNU Linux maka paket-paket tersebut sudah tersedia tinggal diinstal saja. Pada contoh di sini digunakan Xampp Versi Paket Xampp ini bisa diunduh di alamat Langkah Kerja Program ApacheFriends XAMPP (Basispaket) version merupakan suatu paket program yang berisi Apache+PHP+MySQL yang merupakan program-program yang dibutuhkan dalam sistem berbasis web. Bisa juga menggunakan versi terbaru dari XAMPP. Selain itu, alternatif lain juga bisa menggunakan paket program AppServ atau PHPTriad. Kedua program ini, mempunyai fungsi yang sama dengan XAMPP. Untuk melakukan instalasi pada contoh ini, carilah berkas bernama xampp-win installer kemudian diklik ganda atau menekan tombol Enter. Gambar 1: Master XAMPP Instalasi program sebaiknya diletakkan pada drive D. Untuk memudahkan proses, ikuti nilai-nilai bawaan (default) pada saat instalasi. Jika ada pertanyaanpertanyaan, tinggal klik tombol Next atau Install, tidak perlu mengklik 3

4 pilihan lain. Pada tahap akhir proses di layar akan ada keterangan Finish, sebagai tanda bahwa proses instalasi sudah selesai. 1.3 Hasil Proses Pada layar Desktop terdapat ikon XAMPP seperti berikut : Gambar 2: Ikom XAMPP Jalankan program XAMPP dengan mengklik ganda ikon XAMPP tersebut sehingga keluar menu Control Panel dari XAMPP. Dengan cara lain, bisa juga dengan mengklik Start-All Programs-Apache Friends-XAMPP dan seterusnya seperti pada gambar berikut : Gambar 3: XAMPP via Start Pada menu Control Panel dari XAMPP, kemudian aktifkan program Apache dan MySQL dengan mengklik tombol Start di samping kanan dari tulisan Apache dan MySQL. 4

5 Gambar 4: Panel XAMPP Untuk GNU Linux instalasi paket Apache+PHP+MySQL bisa dilakukan dengan mudah menggunakan Synaptic Package Manager atau bagi yang terbiasa dengan text based bisa menggunakan perintah apt-get-install. 1.4 Catatan Materi praktek pertama ini tidak boleh dilewati. Materi praktek berikutnya tidak akan bisa dilaksanakan jika materi praktek pertama ini belum dilaksanakan. 5

6 2 Praktek #2-Membuat Basis Data Tujuan dari materi praktek kedua ini adalah untuk membuat basis data yang akan digunakan selama praktek. 2.1 Langkah Kerja Untuk membuat basis data ini, maka perangkat Xampp atau alternatifnya sudah terpasang dan siap digunakan. Pada perintah berikut ini, diasumsikan bahwa program Xampp dipasang pada drive D dengan posisi direktori d : \xampp. Selanjutnya perhatikan contoh-contoh berikut : 1. Jalankan DOS Prompt dengan cara klik Start-Run atau Start-All Program-Accecories-Command Prompt. Gambar 5: Tampilan DOS Prompt 2. Melakukan proses pindah drive ke D karena program Xampp ada di D. Perintahnya adalah d: [enter]. Microsoft Windows [Version ] Copyright (c) 2009 Microsoft Corporation. All rights reserved. C:\Users\dwisuketi>d: D:\> 3. Pindah ke direktori tempat program MySQL client disimpan. Perintahnya cd xampp\mysql\bin [enter] 6

7 D:\>cd xampp\mysql\bin D:\xampp\mysql\bin> 4. Menjalankan program MySQL client untuk mengakses MySQL database server. Dengan perintah mysql -u root -p [enter]. D:\xampp\mysql\bin>mysql -u root -p Enter password: Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 1 Server version: MySQL Community Server (GPL) Copyright (c) 2000, 2011, Oracle and/or its affiliates. All rights reserved. Oracle is a registered trademark of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective owners. Type help; or \h for help. Type \c to clear the current input statemen mysql> 5. Membuat basis data. Untuk membuat basis data perintahnya adalah create nama basis data. Pada praktek ini, basis data yang dibuat bernama pilkada. mysql> create database pilkada; Query OK, 1 row affected (0.04 sec) Untuk berikutnya, jika basis data sudah tersedia, maka basis data tersebut tinggal digunakan dengan perintah: mysql> use pilkada; Database changed 6. Membuat tabel-tabel dengan struktur seperti berikut: 7

8 mysql> desc saksi; Field Type Null Key Default Extra nomor_entri int(5) NO PRI NULL auto_increment nama_saksi char(33) YES NULL jenis_kelamin char(1) NO NULL nomor_handphone varchar(17) YES NULL alamat char(100) YES NULL kabupaten char(1) YES NULL mysql> desc kode_kabupaten; Field Type Null Key Default Extra kode char(1) NO PRI NULL nama char(100) YES NULL Mengisi tabel dengan sebanyak 10 buah data untuk data saksi, sedangkan untuk data kabupaten diisi sesuai dengan banyaknya kabupaten yang ada di Lampung. Untuk mengisi data, perintah yang digunakan jelas adalah insert into. 2.2 Catatan Penting Dilarang keras untuk menggunakan perangkat lunak PHP MyAdmin di dalam seluruh pekerjaan ini. 8

9 3 Praktek #3-Membuat Program Input/Hapus Data Untuk membuat pemasukan dan penghapusan data maka dasar-dasar tentang SQL, HTML dan PHP menjadi syarat mutlak. Dengan dasar-dasar yang sudah diberikan pada materi kuliah, maka pada praktek kali ini, mahasiswa bertugas untuk membuat program untuk memasukkan data baru dan menghapus data yang sudah ada. Untuk pemasukan data, sesuai dengan struktur data yang ada pada praktek #2, maka ada pemasukkan yang berupa teks biasa, radio button serta select option. Contoh tampilan bisa dilihat seperti berikut. Karena di dalam basis data terdapat dua buah tabel, maka Gambar 6: Pemasukan Data Saksi program yang dibuat juga mencakup kedua tabel tersebut. program yang mesti dikembangkan meliputi : Jadi jelasnya 1. Pemasukan data saksi. 2. Penghapusan data saksi. 3. Pemasukan data nama-nama kabupaten. 4. Penghapusan data nama-nama kabupaten. 9