Pemrog Tim Koalisi merah putih php

LAPORAN PEMROGRAMAN

KOMPUTER APLIKASI

BERBASIS WEB

“DATABASE TIM KOALISI MERAH PUTIH BERBASIS WEB

DENGAN MENGGUNAKAN PHP MY ADMIN”

Disusun Oleh :

Bayu Adi Saputro21060112060025Abdul Rochman21060112060003

PSD III TEKNIK ELEKTRO

FAKULTAS TEKNIK

UNIVERSITAS DIPONEGORO

SEMARANG

2014

i

KATA PENGANTAR

Puji syukur atas segala rahmat dan karunia yang Allah SWT berikan

kepada penulis, sehingga dapat menyelesaikan makalah yang berjudul Database

Tim Koalisi Merah Putih Berbasis Web Menggunakan phpMyAdmin. Pada

kesempatan ini penulis mengucapkan terima kasih kepada:

1. Arkhan Subari, ST, MKom, selaku dosen pembimbing yang telah banyak

mencurahkan waktu dan pikiran dalam penyusunan makalah ini.

2. Keluarga penulis yang selalu berdoa dan mendukung atas segala penulis

lakukan.

“Tak ada gading yang tak retak”, demikian pula dalam penyusunan

makalah ini, sehingga saran dan kritik dari segala pihak yang bersifat membangun

sangat penulis harapkan demi kesempurnaan penulisan di masa yang akan datang.

Semarang, 06 Juli 2014

Penulis

ii

DAFTAR ISIKATA PENGANTAR ............................................................................................ ii

DAFTAR ISI.......................................................................................................... iii

DAFTAR GAMBAR ............................................................................................. iv

DAFTAR TABEL....................................................................................................v

BAB I PENDAHULUAN........................................................................................1

1.1 Latar Belakang........................................................................................................ 1

1.2 Maksud dan Tujuan ................................................................................................ 1

1.3 Identifikasi Masalah ............................................................................................... 1

BAB II DASAR TEORI ..........................................................................................2

2.1 MySQL .................................................................................................................. 2

2.1.1Apa Itu MySQL ? ............................................................................................. 2

2.1.2 Sejarah Singkat MySQL ......................................Error! Bookmark not defined.

2.1.3 Keistimewaan MySQL....................................................................................... 4

2.1.4 Instal MySQL ................................................................................................... 4

2.2 phpMyAdmin ........................................................................................................ 6

2.2.1 Apa Itu phpMyAdmin? .................................................................................... 6

2.2.2 Panduan Instal phpMyAdmin........................................................................... 6

2.2.3 Konfigurasi....................................................................................................... 7

2.2.4 Instal phpMyAdmin.......................................................................................... 9

2.2.5 Membuka phpMyAdmin .................................................................................. 9

2.2.6 Melindungi Direktori phpMyAdmin ................................................................. 9

2.2.7 Cara Instal phpMyAdmin di Linux ................................................................ 10

2.2.8 phpMyAdmin Themes.................................................................................... 14

2.2.9 Variabel di PHP.............................................................................................. 15

2.3 Notepad ++ .......................................................................................................... 16

2.3.1 Apa Itu Notepad ++ ? .................................................................................... 16

BAB III METODOLOGI.......................................................................................18

3.1 Flowchart.............................................................................................................. 183.1.1 Flowchart Tambah Data, Lihat Data,Edit Data dan Edit Data ....................... 183.1 Flowchart Mencari Data.................................................................................... 19

3.2 Rancangan Database............................................................................................. 19

3.3 Index ..................................................................................................................... 21

iii

3.4 Rancangan Tampilan Login ................................................................................. 24

3.4.1 Tampilan Halaman Login............................................................................... 24

3.4.2 Script Tampilan Halaman Login .................................................................... 25

3.4.3 Script Check Login......................................................................................... 26

3.4.4 Script Otentikasi Login .................................................................................. 273.4.5 Script CSS (Cascading Style Sheet) Login ................................................ 28

3.5 Rancangan Tampilan Home.................................................................................. 30

3.5.1 Tampilan Halaman Home............................................................................... 303.5.2 Script Tampilan Halaman............................................................................... 31

3.5.4 Script CSS (Cascading Style Sheet) ................................................................. 32

3.6. Halaman Form Input Data Tim Koalisi Merah Putih............................................ 34

3.6.1 Tampilan Halaman Input Data ...................................................................... 34

3.6.2 Script Tampilan Halaman Input Data ............................................................ 35

3.6.3 Script Menyimpan Input Data ....................................................................... 37

3.7 Halaman Lihat Data Tim Koalisi Merah Putih ....................................................... 393.7.1 Tampilan Halaman Lihat Data ...................................................................... 39

3.7.2 Script Tampilan Halaman Lihat Data ............................................................ 40

3.8 Halaman Tampilan Edit Data Tim Koalisi Merah Putih ...................................... 42

3.8.1 Tampilan Halaman Edit Data ........................................................................ 423.8.2 Script Tampilan Halaman Edit Data ............................................................. 43

3.9 Halaman Tampilan Delete Data Tim Koalisi Merah Putih .................................. 46

3.9.1 Tampilan Halaman Delete Data .................................................................... 463.9.2 Script Tampilan Halaman Delete Data .......................................................... 48

3.10 Halaman Tampilan About .................................................................................. 49

3.10.1 Tampilan Halaman About ........................................................................... 493.10.2 Script Tampilan Halaman About ................................................................. 49

3.11 Halaman Tampilan Cari....................................................................................... 523.11.1 Tampilan Halaman Cari .............................................................................. 523.11.2 Script Tampilan Halaman Cari .................................................................... 53

3.12 Logout ................................................................................................................ 56

3.12.1 Script Logout ............................................................................................... 56

BAB IV PENUTUP .......................................................................................................... 57

4.1 Simpulan............................................................................................................... 57

4.2 Saran ..................................................................................................................... 57

DAFTAR PUSTAKA ............................................................................................58

iv

DAFTAR GAMBAR

Gambar 1. Server MySQL ......................................................................................5

Gambar 2. Setup Type ............................................................................................5

Gambar 3. Custom Setup ........................................................................................6

Gambar 4. Form Login ..........................................................................................12

Gambar 5. Contoh Tampilan PHP MyAdmin .......................................................15

Gambar 6. Flowchart tambah data,lihat data,edit data,dan delete data .................18

Gambar 7. Flowchart Mencari data .......................................................................19

Gambar 8. Tampilan Login ...................................................................................24Gambar 9. Tampilan Home ...................................................................................31

Gambar 10. Tampilan Input ..................................................................................34

Gambar 11. Tampilan Melihat Data Inputan ........................................................31

Gambar 12. Tampilan Edit Data ............................................................................42

Gambar 13. Tampilan Kotak Dialog Delete .........................................................47Gambar 14. Tampilan Delete Data .......................................................................47

Gambar 15. Tampilan About ................................................................................49Gambar 16. Tampilan Cari Data ...........................................................................52

Gambar 17. Tampilan Hasil Cari Data ..................................................................53

v

DAFTAR TABEL

Tabel 1. Operator Aritmatika ................................................................................16Tabel 2. Database Tabel Timses ...........................................................................20

Tabel 3. Database Tabel User ...............................................................................20

1

BAB I

1.1 Latar Belakang

PENDAHULUAN

Di era kemajuan teknologi seperti sekarang ini, Website menjadi hal yang

sudah tidak asing lagi terdengar pada telinga kita, kususnya dalam dunia internet.

Meskipun sudah banyak orang mempunyai homepage di internet baik yang

menggunakan ISP maupun server web gratis, tetapi pada umumnya homepage

tersebut bersifat statis dan tidak dapat berinteraksi dengan pengunjung web.

Kebanyakan orang pada umumnya hanya berperan sebagai pengguna dan

sebagian kecil saja yang mengetahui proses dibaliknya dikarenakan tidak

menguasai pemrograman web. Pada dasar pembuatanya, sebuah homepage yang

dapat berinteraksi dengan pengunjung website atau homepage dinamis tidak

diperlukan kemampuan pemrograman yang tinggi.

1.2 Maksud dan Tujuan

1. Untuk memberikan sebuah gambaran bahwa dalam mempelajari dan

membuat web menggunakan PHP sebenarnya tidak terlalu sulit.

2. Agar pengguna internet pada khususnya dapat lebih mengembangkan

potensi diri, dan tidak hanya sebagai pengguna saja tetapi dapat berperan

sebagi pembuat suatu alamat web (homepage) yang dinamis.

3. Pembuatan database yang rapih dan terorganisir

1.3 Identifikasi Masalah

Dalam makalah yang telah saya siapkan ini, akan saya bahas beberapa

masalah tentang pembuatan database berbasis web mengunakan phpmyadmin.

2

BAB 2

DASAR TEORI

2.1 MySQL2.1.1 Apa itu MySQL ?

MySQL adalah sebuah implementasi dari sistem manajemen basisdata

relasional (RDBMS) yang didistribusikan secara gratis dibawah lisensi

GPL (General Public License).Setiap pengguna dapat secara bebas

menggunakan MySQL, namun dengan batasan perangkat lunak tersebut tidak

boleh dijadikan produk turunan yang bersifat komersial. MySQL sebenarnya

merupakan turunan salah satu konsep utama dalam basis data yang telah ada

sebelumnya SQL(Structured QueryLanguage). SQL adalah sebuah konsep

pengoperasian basisdata, terutama untuk pemilihan atau seleksidan

pemasukan data, yang memungkinkan pengoperasian data dikerjakan dengan

mudah secara otomatis.

Tidak sama dengan proyek-proyek seperti Apache, dimana perangkat

lunak dikembangkan oleh komunitas umum, dan hak cipta untuk kode sumber

dimiliki oleh penulisnya masing-masing, MySQL dimiliki dan disponsori oleh

sebuah perusahaan komersial Swedia MySQL AB, dimana memegang hak

cipta hampir atas semua kode sumbernya. Kedua orang Swedia dan satu

orang Finlandia yang mendirikan MySQL AB adalah: David Axmark, Allan

Larsson, dan Michael "Monty" Widenius.

MySQL adalah sebuah perangkat lunak system manajemen basis

data SQL (bahasa Inggris: database management system) atau DBMS

yang multithread,multi-user, dengan sekitar 6 juta instalasi di seluruh

dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak

gratis dibawah lisensi GNU General Public License (GPL), tetapi mereka juga

menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya

tidak cocok dengan penggunaan GPL.

Kehandalan suatu sistem basisdata (DBMS) dapat diketahui dari cara

kerja pengoptimasi-nya dalam melakukan proses perintah-perintah SQL yang

dibuat oleh pengguna maupun program-program aplikasi yang

memanfaatkannya. Sebagai peladen basis data, MySQL mendukung operasi

3

basisdata transaksional maupun operasi basisdata non-transaksional.Pada

modus operasi non-transaksional, MySQL dapat dikatakan unggul dalam hal

unjuk kerja dibandingkan perangkat lunak peladen basisdata kompetitor

lainnya.Namun demikian pada modus non-transaksional tidak ada jaminan

atas reliabilitas terhadap data yang tersimpan, karenanya modus non-

transaksional hanya cocok untuk jenis aplikasi yang tidak membutuhkan

reliabilitas data seperti aplikasi blogging berbasis web (wordpress), CMS, dan

sejenisnya.Untuk kebutuhan sistem yang ditujukan untuk bisnis sangat

disarankan untuk menggunakan modus basisdata transaksional, hanya saja

sebagai konsekuensinya unjuk kerja MySQL pada modus transaksional tidak

secepat unjuk kerja pada modus non-transaksional.

2.1.2 Sejarah Singkat MySQL

MySQL dikembangkan sekitar tahun 1994 oleh pembuat perusahaan

pengembang software dan konsultan database bernama MYSQL AB yang

berada di Swedia. Waktu itu perusahaan tersebut masih bernama TcX

DataKonsult AB, dan tujuan awal dikembangkannya MySQL adalah untuk

mengembangkan aplikasi berbasis web pada client. Awalnya Michael

“Monty” Widenius, pengembang satu-satunya di TxC memiliki sebuah

aplikasi UNIREG dan rutin ISAM buatannya sendiri dan sedang mencari

antarmuka SQL yang cocok untuk diimplementasikan ke dalamnya. Mula-

mula Monty memakai miniSQL (mSQL) pada eksperimennya itu, namun SQL

dirasa kurang sesuai, karena terlalu lambat dalam pemrosesan query.

Akhirnya Monty menghubungi David Hughes, pembuat mSQL yang

sedang merilis versi kedua dari mSQL. Kemudian Monty mencoba membuat

sendiri mesin SQL yamg memiliki antarmuka mirip dengan SQL, tapi dengan

kemampuan yang lebih sesuai sehingga lahirlah MySQL. Tentang

pengambilan nama MySQL, sampai saat ini masih belum jelas asal usulnya.

Ada yang berpendapat nama My diambil dari nama depan dan belakang

Monty, tetapi versi lain mengatakan nama itu diambil dari putri Monty yang

kebetulan juga bernama My.

4

2.1.3 Keistemewaan MySQL

MySQL memiliki beberapa keistimewaan, antara lain :

1. Portabilitas. MySQL dapat berjalan stabil pada berbagai sistem

operasi seperti Windows, Linux, FreeBSD, Mac Os X Server,

Solaris, Amiga, dan masih banyak lagi.

2. Perangkat lunak sumber terbuka. MySQL didistribusikan

sebagai perangkat lunak sumber terbuka, dibawah

lisensi GPL sehingga dapat digunakan secara gratis.

3. Multi-user. MySQL dapat digunakan oleh beberapa pengguna dalam

waktu yang bersamaan tanpa mengalami masalah atau konflik.

4. Performance tuning, MySQL memiliki kecepatan yang menakjubkan

dalam menangani query sederhana, dengan kata lain dapat

memproses lebih banyak SQL per satuan waktu.

5. Ragam tipe data. MySQL memiliki ragam tipe data yang sangat

kaya, seperti signed / unsigned integer, float, double, char, text, date,

timestamp, dan lain-lain.

6. Perintah dan Fungsi. MySQL memiliki operator dan fungsi secara

penuh yang mendukung perintah Select dan Where dalam perintah

(query).

7. Keamanan. MySQL memiliki beberapa lapisan keamanan seperti

level subnetmask, nama host, dan izin akses user dengan sistem

perizinan yang mendetail serta sandi terenkripsi.

2.1.4 Instal MySQL

Download File Installer MySQL

Jadi pastikan anda sudah mengetahui tipe sistem operasi yang

digunakan.Jika sudah, anda bisa mengambil file installer-nya yang terbaru dari

website MySQL.com. Saya mengambil file mysql-5.5.11-win32.msi karena

sistem operasi saya menggunakan versi 32-bit. Jika anda menggunakan versi

64-bit, saya sarankan untuk mengambil file installer yang versi 64-bit juga.

Setelah download selesai double klik file tersebut untuk memulai

penginstalasian.

5

Gambar 1 Server MySQL

Gambar 2 Setup Type

6

Pilih: Custom untuk tipe penginstalasian

Gambar 3 Custom Setup

Masih ada kesempatan untuh mengubah seandainya masih ada yang

kurang tepat, tapi jika semua sudah beres dan anda sudah yakin klik Install.

2.2 phpMyAdmin

2.2.1 Apa itu phpMyAdmin ?

phpMyAdmin adalah alat bantu administrasi database berbasis web

yang dibuat khusus untuk mengelola database MySQL. Jika anda klik

ikon/tautan phpMyAdmin dari halaman utama cPanel® anda, phpMyAdmin

akan muncul dengan jendela baru. Pertama, pilih database yang akan anda

kelola pada pilihan database di sebelah kiri halaman, kemudian anda bisa

mulai menggunakan semua fungsi yang tersedia untuk mengelola database

anda dengan aplikasi yang canggih tetapi mudah digunakan ini.

2.2.2 Panduan Menginstal phpMyAdmin

Alangkah sulitnya bagi para pemula yang terpaksa harus mengelola

database MySQL. Tidak hanya harus tahu perintah-perintah dasar

SQL/MySQL, melainkan harus pula melakukan koneksi melalui telnet/SSH

7

untuk menjalankan client mysql yang berbasis teks.Melelahkan

memang.phpMyAdmin menawarkan kemudahan untuk memanage database

melalui browser. Dengan fasilitas-fasilitasnya Anda akan dimanja. Artikel ini

dimaksudkan sebagai pengantar bagi pemula agar Anda dapat menginstal

phpMyAdmin.

phpMyAdmin membutuhkan PHP4, webserver yang mendukung PHP,

dan MySQL tentunya.. Untuk webserver Anda dapat menggunakan Apache

lalu installah MySQL lalu PHP.Atau pakailah PHPTriad, www.phpgeek.com,

yang sudah membundelkan Apache, PHP, dan MySQL untuk Anda.Semuanya

bisa juga Anda peroleh dari CD majalah.

2.2.3 Konfigurasi

Bukalah filephpMyAdmin.zip atau (phpMyAdmin.tar.gz) dengan WinZip

setelah itu anda akan mendapatkan folder phpMyAdmin.Carilah file

config.inc.php dan buka dengan editor teks seperti Notepad, Editpad, dll.

Anda perlu menambahkan dan mengedit beberapa variabel yang ada dalam

file config.inc.php ini:

Pertama, beritahu phpMyAdmin apa URL dari direktori phpMyAdmin,

misalnya: http://www.situsanda.com/phpmyadmin. Jika Anda menaruh

webserver di localhost, maka gantilah sehingga sesuai.

$cfgPmaAbsoluteUri = 'http://www.situsanda.com/phpmyadmin';

Kedua, beritahu phpMyAdmin di mana host dan port dari server MySQL

Anda misalnya localhost. Bila Anda menggunakan database MySQL di host

lain, misalnya db.namauser.f2s.com atau freesql.org, sesuaikanlah. Jika port

tidak default, maka ganti nilai string kosong menjadi nomor port server

MySQL Anda. Untuk socket dan connect_type, biarkan saja sesuai nilai

defaultnya. MySQL dapat menerima koneksi 'socket' dan 'tcp'. Jika Anda

menggunakan koneksi Unix socket, maka isilah connect_type dengan 'socket'

dan isi juga lokasi soketnya. Jika kurang jelas, sebaiknya biarkan apa adanya.

8

$cfgServers[1]['host'] ='localhost';

$cfgServers[1]['port'] ='';

$cfgServers[1]['socket'] ='';

$cfgServers[1]['connect_type'] = 'tcp';

Ketiga, baritahu phpMyAdmin namauser dan password default untuk

melakukan koneksi ke server MySQL. Untuk sementara Anda

kosongkan.Standard user ini digunakan untuk mengeset agar pemakai

phpMyAdmin dibatasi hanya dapat menggunakan user MySQL tertentu.

$cfgServers[1]['stduser'] ='';

$cfgServers[1]['stdpass'] = '';

Keempat, tentukan pilihan otentikasi. Bila Anda ingin menggunakan

advancedauthentication, maka Anda dapat mengubah variabel boolean

manjadi TRUE, bila tidak FALSE. Advanced authentication lebih baik

digunakan bila: 1) phpMyAdmin dijalankan pada server multiuser di mana

tiap pengguna mempunyai akses shell, tetapi Anda ingin masing-masing user

terjaga username dan passwordnya; 2) tiap pengguna MySQL mendapat akses

penuh terhadap database mereka tapi tidak dapat mengakses database lain.

Untuk Anda pengguna pemula disarankan menggunakan basic authentication

(FALSE).

$cfgServers[1]['adv_auth'] = FALSE;

Kelima, masukkan username dan password MySQL.

$cfgServers[1]['user']='username';

$cfgServers[1]['password'] = 'rahasia';

Keenam, jika Anda ingin hanya memanage satu database saja, maka

isikan namadatabase Anda di sini. Database inilah yang satu-satunya akan

Anda lihat di frame kiri tampilan phpMyAdmin. Bila Anda mengosongkan

only_db ini, maka databaseuser lain bisa ikut tampak di frame kiri (namun

9

Anda belum tentu dapat mengaksesnya, bergantung pada setting server

MySQL).

$cfgServers[1]['only_db'] = 'databaseanda';

2.2.4 Instalasi phpMyAdmin

Upload direktori phpMyadmin Anda ke server host dengan metode FTP.

Anda bisa menggunakan CuteFTP atau program client FTP yang lain. Tentu

saja, jika webserver Anda di komputer yang sama, Anda cukup memindahkan

direktori phpMyAdmin ke lokasi yang sesuai agar dapat dibaca webserver.

2.2.5 Membuka phpMyAdmin

Buka alamat di mana Anda meletakkan phpMyAdmin Anda melalui

browser, misalnya:http://localhost/phpMyAdmin/. Bila segala sesuatunya

berjalan dengan baik maka akan tampak tampilan phpMyAdmin.

Catatan: phpMyAdmin sebetulnya dapat menangani lebih dari satu

server MySQL yang berbeda. Bila Anda mempunyai lebih dari satu database

MySQL, variabel konfigurasi di config.inc.php, $cfgServers[2]['host'] dan

lain-lainnya dapat Anda isi juga seperti setting untuk server pertama tadi.

2.2.6 Melindungi Direktori phpMyAdmin

Tentu saja Anda tidak ingin phpMyAdmin Anda diakses oleh sembarang

orang (kecuali mungkin jika Anda menginstal phpMyAdmin di komputer

pribadi, atau Anda menggunakan advanced authentication di mana user dapat

menggunakan phpMyAdmin Anda untuk mengakses databasenya masing-

masing). Jika Anda tak ingin memproteksi direktori phpMyAdmin dengan

password, lewatlah bagian ini.

Di sini kita akan melindungi direktori phpMyAdmin dengan skrip Ace

Password. Skrip ini cukup aman digunakan untuk melindungi direktori situs

Anda. Dasar kerja dari Ace Password adalah akses yang diberikan kepada user

berdasarkan kepada .htaccess dan .htpasswd yang di upload ke direktori yang

diinginkan. Anda dapat mendownloadAce Password di alamat www.ace-

installer.com/files/acepassword.zip. Ukuran file skrip ini hanyalah 6 KB

10

dalam format file .zip. Bila telah didownload ekstrak file tersebut, maka Anda

akan mendapatkan 4 file: .htaccess, .htpasswd, acepassword.cgi, dan

readme.html. Yang pertama Anda lakukan adalah membuka file

acepassword.cgi, di sini anda perlu mengedit letak perl di server, di baris

pertama terdapat:

#!/usr/bin/perl

Bila berbeda, Anda dapat mengontak admin webhosting Anda.

$password = "password"; variabel dalam password ini akan digunakan

dalam setup pertama kali Anda menginstal Ace Password, untuk

selanjutnya password ini tidak digunakan.

Setelah itu upload ke direktori phpMyAdmin dan chmod file .htpasswd

dan .htaccess ke 666 (atau 644, bergantung pada setting di server webhosting

Anda), dan acepassword.cgi ke 755.Setelah itu akses melalui browser URL

Ace Password http:// www.situsanda.com/ phpmyadmin/ acept password.

cgi?action = start. Anda akan diminta memasukkan password yang Anda tulis

di variabel $password, setelah itu ikuti petunjuk selanjutnya yang terdapat di

halaman Web. Bila Anda mengalami kesalahan pada penginstalan pertama

kali, upload ulang .htaccess dan .htpasswd.

Sekarang akses URL http://www.situsanda.com/phpmyadmin/ maka

Anda akan diminta memasukan username dan password, dengan demikian

direktori phpMyAdmin Anda sudah terlindungi dengan aman. Perlindungan

direktori ini menggunakan metode HTTP Basic Authentication di mana data

password dari direktori tersebut disimpan sementara di browser. Bila Anda

telah membuka direktori phpMyAdmin tutuplah browser, bila tidak orang lain

dapat mengakses direktori tersebut dengan menekan Back.

2.2.7 Cara menginstall php Myadmin di linux

Sambil belajar linux server di linux ubuntu biar tidak lupa saya posting

bagiamana cara membuat webserver di ubuntu. saya gunakan linux ubuntu

desktop 10.10 untuk mengistal apache, MySQL, PHP, dan PHPMyadmin.

Langkah-Langkah Cara install webserver di ubuntu sebagai berikut:

Masuk ke Terminal kemudian ketik

11

sudo su

sudo apt-get update

Instal Apache di Ubuntu.

apt-get install apache2 apache2.2-common apache2-doc apache2-mpm-

prefork apache2-utils

Instal PHP di Ubuntu.

apt-get install php5 libapache2-mod-php5 php5-common php5-gd php5-

mysql php5-imap php5-cli php5-cgi php-pear php-auth

Install MySQL di Ubuntu.

apt-get install mysql-server mysql-client

Saat instal MySQL akan dimintai password, masukan pasword MySQL

anda.

Instal PHPMyadmin di Ubuntu.

apt-get install phpmyadmin

Restart apahce dan MySQLnya

/etc/init.d/mysql restart

/etc/init.d/apache2 restart

Test dengan mengetikan http://localhost/ pada browser anda.

Jika ada tulisan seperti di bawah ini maka instalasi sukses.

It works!

This is the default web page for this server.

The web server software is running but no content has been added, yet.

Test PHPMyadmin dengan mengetikan

http://localhost/phpmyadmin

12

Gambar 4. Form Login

phpMyAdmin adalah perangkat lunak bebas ditulis dalam bahasa

pemrograman PHP yang digunakan menangani administrasi MySQL

melaluiJejaring Jagat Jembar (World Wide Web). PhpMyAdmin mendukung

berbagai operasi MySQL, diantaranya (mengelola basis data, tabel-tabel,

bidang (fields), relasi (relations), indeks, pengguna (users), perijinan

(permissions), dan lain-lain).

Pada dasarnya, mengelola basis data dengan MySQL harus dilakukan

dengan cara mengetikkan baris-baris perintah yang sesuai (command line)

untuk setiap maksud tertentu. Jika seseorang ingin membuat basis data

(database), ketikkan baris perintah yang sesuai untuk membuat basis data.

Jika seseorang menghapus tabel, ketikkan baris perintah yang sesuai untuk

menghapus tabel.Hal tersebut tentu saja sangat menyulitkan karena seseorang

harus hafal dan mengetikkan perintahnya satu per satu.

Saat ini banyak sekali perangkat lunak yang dapat dimanfaatkan untuk

mengelola basis data dalam MySQL, salah satunya adalah

phpMyAdmin.Dengan phpMyAdmin, seseorang dapat membuat database,

membuat tabel, mengisi data, dan lain-lain dengan mudah, tanpa harus

menghafal baris perintahnya. PhpMyAdmin merupakan bagian untuk

mengelola basis data MySQL yang ada di komputer. Untuk membukanya,

buka browser lalu ketikkan alamat http://localhost/phpmyadmin, maka akan

muncul halaman phpMyAdmin. Di situ nantinya seseorang bisa membuat

(create) basis data baru, dan mengelolanya.

13

Pengembangan phpMyAdmin dimulai pada tahun 1998 oleh Tobias

Ratschiller seorang konsultan IT.Ratschiller mengerjakan sebuah program

bernama MySQL-Webadmin dengan bebas, yang merupakan produk dari

Petrus Kuppelwieser, yang telah berhenti mengembangkannnya pada saat

itu.Ratschiller menulis kode baru untuk phpmyadmin, dan ditingkatkan pada

konsep dari proyek Kuppelwiesser.Ratschiller meninggalkan proyek

phpMyAdmin pada tahun 2001. Sekarang, Sebuah tim dari delapan

pengembang yang dipimpin oleh Oliver Muller meneruskan pengembangan

phpMyAdmin di SourceForge.net

Beberapa pengembang diantaranya ialah :

1. Marc Delisle

2. Michal Čihař

3. Sebastian Mendel

4. Herman van Rink

Beberapa fitur dalam phpMyAdmin :

1. Antarmuka berbasis web.

Dukungan banyak fitur MySQL:

i. menelusuri dan drop basisdata (database), tabel, pandangan (view),

bidang (fields) dan indeks.

ii. membuat, menyalin, drop, dan mengubah nama basis data, tabel,

kolom dan indeks.

iii. pemeliharaanserver, basis data dan tabel,

dengan server konfigurasi.

iv. melaksanakan, mengedit dan penunjuk pernyataan-SQL,

bahkan batch-queries.

v. mengelola pengguna MySQL dan hak istimewa.

vi. mengelola prosedur penyimpanan.

2. Impor data dari CSV dan SQL

3. Ekspor data ke berbagai format: CSV, SQL, XML, PDF, ISO / IEC 26300

-OpenDocument Text dan Spreadsheet, Word, Excel, LATEKS dan lain-

lain

4. Membuat grafik PDF dari tampilan basis data anda.

14

5. Membuat kompleks query menggunakan Query-by-example. (QBE)

6. Pencarian global dalam basis data.

7. Transformasi data disimpan ke dalam format yang menggunakan satu set

fungsi yang telah ditetapkan, seperti menampilkan data blob-

data atau download-link.

8. Dan banyak lagi.

2.2.8 PHPMyAdmin Themes

Pada dasarnya, mengelola basis data dengan MySQL harus dilakukan

dengan cara mengetikkan baris-baris perintah yang sesuai (command line)

untuk setiap maksud tertentu. Jika seseorang ingin membuat basis data

(database), ketikkan baris perintah yang sesuai untuk membuat basis data.

Jika seseorang menghapus tabel, ketikkan baris perintah yang sesuai untuk

menghapus tabel.Hal tersebut tentu saja sangat menyulitkan karena seseorang

harus hafal dan mengetikkan perintahnya satu per satu.

Saat ini banyak sekali perangkat lunak yang dapat dimanfaatkan untuk

mengelola basis data dalam MySQL, salah satunya adalah

phpMyAdmin.Dengan phpMyAdmin, seseorang dapat membuat database,

membuat tabel, mengisi data, dan lain-lain dengan mudah, tanpa harus

menghafal baris perintahnya.

phpMyAdmin merupakan bagian untuk mengelola basis data MySQL

yang ada di komputer. Untuk membukanya, buka browser lalu ketikkan

alamat http://localhost/phpmyadmin, maka akan muncul halaman

phpMyAdmin. Di situ nantinya seseorang bisa membuat (create) basis data

baru, dan mengelolanya.

15

Gambar 5. contoh tampilan phpMyAdmin

2.2.9 Variabel di PHP

Variabel di PHP diawali dengan tanda dollar ($) diikuti dengan nama

variabel. Nama variabel adalah case-sensitive, artinya huruf besar dan huruf

kecil adalah berbeda.Contoh :

<html>

<body>

<?php

$teks="Hello World";

echo $teks; //Hasilnya Hello World

?>

</body>

</html>

Untuk menggabungkan dua variabel atau lebih gunakan operator titik (.) atau

langsung ditulis diantara tanda kutip, contoh :

<?php

$txt1 = "Hello World";

$txt2 = "1234";

$nama = "Desrizal";

echo $txt1."-".$txt2 ; //Hasilnya Hello World-1234

echo "Nama saya : $nama"; //hasilnya Nama saya : Desrizal

16

2.2.10 Operator di PHP

Tabel 1. Operator Aritmatika

Operator Deskripsi Contoh Hasil

+ Penambahan 3 + 4 7

- Pengurangan 12 - 6 6

* Pengalian 3 * 3 9

/ Pembagian 4 / 2 2

% Modulus (sisa hasil pembagian) 5 % 2

10 % 8

10 % 2

1

2

0

++ Penambahan satu satu x = 6

x++

x = 7

-- Pengurangan satu satu x = 9

x--

x = 8

Contoh :

<?php

$x = 10;

$y = 4;

$a = $x + $y;

echo $a."<br>"; //hasilnya 14

$b = $x - $y;

echo $b."<br>"; //hasilnya 6

$c = $x * $y;

echo $c."<br>"; //hasilnya 40

?>

17

2.3 Notepad ++

2.3.1 Apa itu Notepad ++ ?

Notepad adalah sebuah aplikasi sebuah text editor simple yang sudahada sejak Windows 1.0 di tahun 1985 yang ada di setiap system windows baikxp, vista, seven dan sebagainya.tentu kode ini sangat penting dan justrumungkin paling sering di gunakan oleh para user, baik kepentingan pribadiataupun lainnya, misalnya noteped di gunakan untuk sekedar belajar,mengetik HTML, membuat blog, bahkan ada saja untuk kejailan contohnyamembuat virus. Tentunya di sarankan bagi setiap orang agar tidak di salahgunakan karena dapat merugikan orang lain.

18

3.1 Flowchart

BAB III

METODOLOGI

3.1.1 Flowchart tambah data, lihat data, edit data, dan delete data

Gambar 6. Flowchart tambah data, lihat data, edit data, dan delete data

19

3.1.2 Flowchart Mencari Data

Gambar 7. Flowchart Mencari Data

3.2 Rancangan Database

Database adalah tempat entri atau hapus data yang hanya bisa diakses oleh

orang tertentu yang memiliki otoritas pada data yang ada didalamnya.

20

Database yang kami rancang adalah database dengan nama “dcc”, dan berikut

ini adalah struktur setiap table yang ada pada database tersebut.

a. Struktur Database tabel timsesDatabase untuk daftar buku yang tersedia

Tabel 2. Database tabel timses

Field Type Collation Keteranganid Varchar (10) Latin1_general_ci IDnama Varchar (30) Latin1_general_ci Nama Timsesnamafoto Varchar (50) Latin1_general_ci Nama Fototgllahir Date Tanggal Lahirjenkel Varchar (10) Latin1_general_ci Jenis Kelaminalamat Text Latin1_general_ci Alamat

b. Struktur Database tabel userDatabase untuk administrator yang memiliki hak akses untuk entri databasetim koalisi merah putih

Tabel 3. Database Tabel User

Field Type Collation KeteranganUsername Varchar(25) Latin1_general_ci Username AdminPassword Varchar(25) Latin1_general_ci Password Admin

c. Koneksi ke Server Database MySQL

Sebelum dapat bekerja dengan database, harus terlebih dahulu melakukan

koneksi dengan server database tersebut. Untuk melakukan koneksi dengan

database MySQL, PHP menggunakan fungsi mysql_connect dengan script

sebagai berikut yang kemudian disimpan dengan nama file “koneksi.php”

pada lokasi (C:\xampp\htdocs\KoalisiMerahPutih.)

<?php//berisi konfigurasi server, pastikan diisi dengan benar$host="localhost"; //Server yang digunakan$user_db="root"; //User yang dipakai$pass_db="";//Password yang digunakan$db="dcc";//Database yang Dipakai$conn_db=mysql_connect($host,$user_db,$pass_db);mysql_select_db($db);?>

21

3.3 Index

Berikut ini script yang kami buat untuk memanggil file dari folder lain (folder

pages) disimpan dengan nama file “index.php” pada lokasi

(C:\xampp\htdocs\KoalisiMerahPutih) :

<?phpinclude('cek-login.php');?><html><head><SCRIPT LANGUAGE="JavaScript"></SCRIPT><title>Indonesia Bangkit</title><link href="style.css" rel="stylesheet" type="text/css"><link rel="shortcut icon" href="image/favicon.jpg" /><style type="text/css"></style></head><body><br><br><table width="959" border="0" align="center" cellpadding="0"cellspacing="0">

<tr><td width="10" bgcolor="red"> </td>

<td width="164" height="90" bgcolor="red"> <div align="center"> <imgsrc="image/1240889050_file-manager.png" width="150" height="240"></div> </td>

22

<td width="9" bgcolor="red"> </td><td width="619" bgcolor="red"> <div align="center"> <br> <imgsrc="image/prabowo.jpg" width="760" height="150"> <br> <spanclass="header"><br>Database Tim Koalisi Merah Putih <br>

</span>JL. Ngesrep Barat 3 Semarang <br><span class="header"><br></span></div></td>

<td width="17" bgcolor="red"><div align="center"><h1 class="header"> </h1>

</div></td></tr><tr bgcolor="#FFFFFF"><td> </td><td> </td><td> </td><td> </td><td> </td>

</tr><tr bgcolor="#FFFFFF"><td> </td>

<td height="27"><div align="center"><strong><?php echo" Tanggal :".date("d - m- Y");?></strong></div></td>

<td> </td><td align="center"><strong><img src="image/house.png" width="16"height="16" > <a href="index.php" title="Balik ke Rumahuy">HOME</a> </strong> <strong><img src="image/add.png"width="16" height="16"> <a href="index.php?page=input" title="Isi dataneh">TAMBAH DATA</a></strong> <strong><imgsrc="image/wrench_orange.png" width="16" height="16"> <ahref="index.php?page=tampil" title="Mau Edit | Hapus" >LIHATDATA</a> <img src="image/user_comment.png" width="16"height="16"> <a href="index.php?page=about" title="Empunya Neh">ABOUT </a> <img src="image/search_48.png" width="16"height="16"><a href="index.php?page=cari" title="EmpunyaNeh">CARI</a> <img src="image/logout-16.png" width="16"height="16"><a href="logout.php">LOGOUT</a></strong></td>

<td> </td></tr><tr bgcolor="#FFFFFF"><td> </td><td height="26" align="center" bgcolor="red"><div align="center">

</div></td><td rowspan="4"> </td>

23

<td rowspan="4" valign="top"><table width="769" border="0"cellspacing="0" cellpadding="0"><tr>

<td width="594" height="89"><?php //DISINI UNTUK SET HALAMAN PHP$page = (isset($_GET['page']))? $_GET['page'] : "main";switch ($page) {

case 'input': include "input.php"; break;case 'edit' : include "edit.php"; break;case 'delete' : include "delete.php"; break;case 'tampil' : include "tampil.php"; break;case 'about' : include "about.php"; break;case 'cari' : include "cari.php"; break;case 'main' :default : include 'utama.php';

}?></td>

</tr></table> </td>

<td rowspan="4"> </td></tr><tr bgcolor="#FFFFFF">

<td height="19"> </td><td rowspan="3" align="center" valign="top" bgcolor="red"> <strong>

Selamat Datang <br> <br> <img src="image/cinta indonesia.jpg"width="120" height="290"> <br> <br> <img src="image/prabowohatta.jpg"width="120" height="150"> <br> <br> Indonesia Bangkit <br> <br></strong> </td>

</tr><tr bgcolor="#FFFFFF">

<td height="24"> </td></tr><tr bgcolor="#FFFFFF">

<td height="12"> </td></tr><tr bgcolor="#FFFFFF">

<td> </td><td height="22"> </td><td> </td><td> </td><td> </td>

</tr>

24

<tr bgcolor="#8BB2D9"><td height="39" colspan="5" bgcolor="red"><div align="center"><br>

Copyright© 2014 by Abdul Rohman dan Bayu Adi Saputro </div><div align="center"></div></td></tr></table><div align="center"></div></body></html>

3.4 Rancangan Tampilan Login

3.4.1 Tampilan Halaman Login

Admin

Admin

Gambar 8. Tampilan Login

25

3.4.2 Script Tampilan Halaman LoginBerikut ini Script yang kami buat untuk design halaman web disimpandengan nama file “login.php” pada lokasi(C:\xampp\htdocs\KoalisiMerahPutih):

<?phpsession_start();if (!empty($_SESSION['username'])) {header('location:index.php');}?><html><head><title>Login</title><link rel="stylesheet" type="text/css" href="style_login.css" /><link rel="shortcut icon" href="image/favicon.jpg" /><script type="text/javascript">function validasi(form){if (form.username.value == ""){alert("Anda belum mengisikan Username");form.username.focus();return (false);}

if (form.password.value == ""){alert("Anda belum mengisikan Password");form.password.focus();return (false);}return (true);}</script></head><body><div id="main">

<div id="header"><img src="image/prabowo1.jpg" width="100%"height="100%" alt="Bangkit"/><center><b>Database Tim Koalisi MerahPutih</b></center></div>

26

<div id="middle"><b>Login dulu ...!</b><br><br><form id="form-login" name="login" method="post" action="otentikasi.php"onSubmit="return validasi(this)">

<img src="image/img_login_user_tunasmedia.png" align="absmiddle"class="img_user" />

<input type="text" name="username" size="29" id="input" /><br />

<img src="image/img_login_pass_tunasmedia.png" align="absmiddle"class="img_pass" />

<input type="password" name="password" size="29" id="input" /><br />

<input name="Submit" type="image" value="login"src="image/img_submit_tunasmedia.png" id="submit" align="absmiddle" /></form></div>

<div class="clear"></div>

<div id="footer">Copyright © 2014 by Abdul Rohman dan Bayu AdiSaputro.</div>

<div id="vertical_effect"> </div>

</body></html>

3.4.3 Script Check Login

Berikut ini Script yang kami buat untuk mengecek kebenaran username

dan password yang di isikan lalu disimpan dengan nama file “cek-

login.php” pada lokasi (C:\xampp\htdocs\KoalisiMerahPutih) :

27

<?phpsession_start();

//jika session username belum dibuat, atau session username kosongif (!isset($_SESSION['username']) || empty($_SESSION['username'])) {

//redirect ke halaman loginheader('location:login.php');

}?>

3.4.4 Script Otentikasi LoginBerikut ini Script yang kami buat untuk otentikasi setelah login berhasil,lalu disimpan dengan nama file “otentikasi.php” pada lokasi(C:\xampp\htdocs\KoalisiMerahPutih) :

<?phpinclude('koneksi.php');

session_start();

//tangkap data dari form login$username = $_POST['username'];$password = $_POST['password'];

//untuk mencegah sql injection//kita gunakan mysql_real_escape_string$username = mysql_real_escape_string($username);$password = mysql_real_escape_string($password);

//cek data yang dikirim, apakah kosong atau tidakif (empty($username) && empty($password)) {

//kalau username dan password kosongheader('location:login.php?error=1');break;

} else if (empty($username)) {//kalau username saja yang kosongheader('location:login.php?error=2');break;

} else if (empty($password)) {//kalau password saja yang kosongheader('location:login.php?error=3');

28

break;}

$q = mysql_query("select * from user where username='$username' andpassword='$password'");

if (mysql_num_rows($q) == 1) {//kalau username dan password sudah terdaftar di database//buat session dengan nama username dengan isi nama user yang login$_SESSION['username'] = $username;

//redirect ke halaman indexheader('location:index.php');

} else {//kalau username ataupun password tidak terdaftar di databaseheader('location:login.php?error=4');

}?>

3.4.5 Script CSS (Cascading Style Sheet) LoginCSS merupakan tingkat dasar untuk menentukan ataupun mengetahui

suatu background halaman, gaya text, fonts, links, lists, tables, tata letak, dll.Dan berikut ini adalah script CSS yang kami rancang untuk halaman

login web yang kemudian disimpan dengan nama file “style_login.css” padalokasi (C:\xampp\htdocs\KoalisiMerahPutih):

body{background-color:#CCCCCC;font-family:"Tahoma";font-size:12px;color:#FFFFFF;

}

#main{margin:0 auto;margin-top:80px;width:480px;

}.clearer{

clear:both;float:none;

}

29

#header{background-color:red;padding:15px;padding-left:15px;padding-top:15px;height:100px;-moz-border-radius-topleft:7px;-moz-border-radius-topright:7px;

}

#footer{background-color:red;padding:18px;text-align:center;color:#FFFFFF;

}

#middle{background-color:#FFFFFF;color: black;padding:15px;padding-left:95px;padding-top:20px;

}

#vertical_effect{height:80px;margin-top:2px;

}

#form-login{margin:0;

}

#input{background-color:#FFFFFF;padding:7px;padding-bottom:8px;padding-top:8px;font-family:Verdana;font-size:12px;

30

color:#666666;border:1px solid #2b2448;-moz-border-radius:3px;font-weight:bold

}

#input:focus{border:3px solid #2a2443;margin-left:-2px;-moz-border-radius:5px;

}#submit{margin-top:4px; margin-left:41px; margin-bottom:7px; margin-right:2px;}

.img_user{margin-right:3px; margin-bottom:4px;

}

.img_pass{margin-right:4px; margin-left:2px; margin-bottom:6px; margin-top:1px;}.img_lock{margin-right:4px; margin-bottom:3px; margin-left:4px;}

a.forgot{color:#FFFFFF;text-decoration:none;

}

a.forgot:hover{color:#4b4d77;

}

3.5 Rancangan Tampilan Home

3.5.1 Tampilan Halaman Home

Tampilan berikut ini adalah tampilan sederhana website yang kami

rancang Terdiri dari:

Judul Web yang berada pada banner web

31

Navigasi Link yang mengarahkan user admin ke halaman input data,

lihat data, edit data, cari data, dan delete data.

Sidebar yang bisa diisi

Content yang merupakan isi dari sebuah halaman

Footer

Gambar 9. Tampilan Home

3.5.2 Script Tampilan HalamanBerikut ini Script yang kami buat untuk design halaman web disimpandengan nama file “utama.php”. pada lokasi(C:\xampp\htdocs\KoalisiMerahPutih):

<style type="text/css">

position:absolute;left:761px;top:20px;width:253px;height:244px;z-index:1;

</style><div id="content"><blockquote><h2>

<?phpif (!empty($_GET['message']) && $_GET['message'] == 'success') {echo '<h3>Berhasil menambah data!</h3>';}

echo "Selamat Datang <strong>".$_SESSION['username']."</strong>";?>

</h2><p>Ini adalah sebuah Aplikasi Database Tim Koalisi Merah Putih, Contentyang tersedia di Aplikasi ini sbb:</p><ul><li>Input Data</li>

<li>Input Gambar </li><li>Hapus Data</li>

<li>Edit Data</li><li>About </li>

</ul><p>Dilengkapi dengan validasi menggunakan JavaScript dan CSS untukMempercantik Tampilan</p><p><strong>Regards, Abdul Rohman dan Bayu Adi Saputro. </strong></p>

</blockquote></div>

3.5.3 Script CSS (Cascading Style Sheet)CSS merupakan tingkat dasar untuk menentukan ataupun mengetahui

suatu background halaman, gaya text, fonts, links, lists, tables, tata letak, dll.Dan berikut ini adalah script CSS yang kami rancang untuk halaman

web yang kemudian disimpan dengan nama file “style.css” pada lokasi(C:\xampp\htdocs\KoalisiMerahPutih) :

33

a:link,a:visited,a:active {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;color: #000000;text-decoration: none;}a:hover {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 13px;color: #FF0000;text-decoration: none;}body {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;}table {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;border: 2px solid red}.header {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 18px; color:#FFFFFF;background-color: red;font-weight: bold;}input {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;color: black;height: 18px;border: 1px solid red;}textarea {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;color: black;border: 1px solid red;}img.shadow {

34

background: url(image/shadow-1000x1000.gif) no-repeat right bottom;padding: 5px 10px 10px 5px;}

3.6 Halaman Form Input Data Tim Koalisi Merah Putih

3.6.1 Tampilan Halaman Input Data

Di Halaman ini Administrator (Pengelola web) dapat memasukkan data

tim koalisi merah putih.

Gambar 10. Tampilan Input

35

3.6.2 Script Tampilan Halaman

Berikut ini adalah script tampilan form input data tim koalisi merah putihyang kemudian disimpan dengan nama file “input.php” pada lokasi(C:\xampp\htdocs\KoalisiMerahPutih) :

<FORM ACTION="simpan.php" METHOD="POST" NAME="input"enctype="multipart/form-data"><table width="774" height="300" border="0" align="center" cellpadding="0"cellspacing="0"><tr><td> </td><td> </td><td width="589"> </td>

</tr><tr><td width="20" height="29"> </td>

<td width="165">ID</td><td><input type="text" name="id" size="15" maxlength="10"></td>

</tr><tr>

<td height="30"> </td><td>Nama</td><td><input type="text" name="nama" size="30" maxlength="30"></td>

</tr><tr>

<td height="32"> </td><td>Foto</td><td><input type="file" name="foto"/> </td>

</tr><tr>

<td height="32"> </td><td>Tanggal Lahir</td><td><select name="tgl"><?php //Menampilkan Tanggal dari 1 - 31

for ($i=1; $i<=31; $i++) {$tg = ($i<10) ? "0$i" : $i;

echo "<option value='$tg'>$tg</option>";}

?></select> -<select name="bln"><?php //Menampilkan Bulan 1 - 12

36

for ($i=1; $i<=12; $i++) {$bl = ($i<10) ? "0$i" : $i;

echo "<option value='$bl'>$bl</option>";}

?></select> -<select name="thn"><?php //Menampilkan Tahun 1970 - 2000

for ($i=1970; $i<=2000; $i++) {echo "<option value='$i'>$i</option>";

}?></select></td>

</tr><tr>

<td height="28"> </td><td>Jenis Kelamin</td>

<td><input type="radio" name="jenkel" value="Pria"> Pria

<input type="radio" name="jenkel" value="Wanita"> Wanita</td></tr><tr>

<td> </td><td>Alamat</td><td><textarea name="alamat" cols="40" rows="5"></textarea></td>

</tr><tr>

<td> </td><td> </td><td> </td>

</tr><tr>

<td> </td><td> </td><td>  <input type="submit" name="Submit" value="Submit"> <input type="reset" name="reset" value="Reset"></td>

</tr><tr><td> </td><td> </td><td> </td>

37

<td> </td><td> </td><td> </td><td> </td><td> </td></tr></table></form>

3.6.3 Script Menyimpan Inputan Data

Berikut ini adalah script menyimpan input data tim koalisi merah putih

yang kemudian disimpan dengan nama file “simpan.php” pada lokasi


<?php ini_set('display_errors', 1); ini_set('error_reporting', E_ERROR);//Cek Tombolif ($_POST['Submit'] == "Submit") {//Kirimkan Variabel$id = $_POST['id'];$nama = $_POST['nama'];$tgllahir = $_POST['thn']."-".$_POST['bln']."-".$_POST['tgl'];$jenkel = $_POST['jenkel'];$alamat = $_POST['alamat'];$foto = $_POST['foto'];$namafoto = $_FILES['foto']['name'];//validasi data jika nama dan pesan kosongif (empty($_POST['id'])|| empty($_POST['nama'])){?><script language="JavaScript"> alert('DataHarap Dilengkapi');document.location='index.php?page=input';</script><?php}//Jika Validasi Terpenuhielse{//Memanggil File Koneksi Databaseinclude "koneksi.php";

38

//Cek Photoif (strlen($namafoto)>0) {//upload Photoif (is_uploaded_file($_FILES['foto']['tmp_name'])) {move_uploaded_file ($_FILES['foto']['tmp_name'], "images/".$namafoto);

}}

//Masukan data ke Table timses$tambah="INSERT INTO timsesVALUES('$id','$nama','$namafoto','$tgllahir','$jenkel','$alamat')";$kueri_tbh=mysql_db_query($db,$tambah,$conn_db);if ($kueri_tbh){//Jika Sukses//echo "Data telah diinput";//echo"<meta http-equiv='refresh' content='0;url=index.php?page=tampil'>";?><script language="JavaScript"> alert('DataBerhasil diinput');document.location='index.php?page=tampil';</script><?php}else{//Jika Gagalecho "Data gagal diinput, Silakan Ulangi";}}}?>

39

3.7 Halaman Lihat Data Tim Koalisi Merah Putih

3.7.1 Tampilan Halaman Lihat Data

Di Halaman ini Administrator (Pengelola web) dapat melihat data tim

koalisi merah putih :

Gambar 11. Tampilan Melihat Data Inputan

40

3.7.2 Script Tampilan Lihat Data

Berikut ini adalah script tampilan form input data tim koalisi merah putih

yang kemudian disimpan dengan nama file “tampil.php” pada lokasi


<div id="content"><br><h2 align="center">Data Tim Koalisi Merah Putih</h2>

<table width="100%" border="0" align="center" cellpadding="0"cellspacing="0" id="tabel">

<tr bgcolor="red"><th width="4%" height="39">No</td><th width="9%">ID</td><th width="13%"> Nama</td><th width="13%">Foto<th width="11%">Tgl Lahir</td><th width="15%">Jenis Kelamin</td><th width="18%">Alamat</td>

<th width="17%">Action</td> </tr><?php ini_set('display_errors', 1); ini_set('error_reporting', E_ERROR);

include "koneksi.php";$sql="SELECT * FROM timses ORDER BY id";$tampil = mysql_query($sql);while ($hasil = mysql_fetch_array ($tampil)) {

$id = stripslashes ($hasil['id']);$nama = stripslashes ($hasil['nama']);$namafoto = stripslashes ($hasil['namafoto']);$foto = $hasil['namafoto'];$tgllhr = stripslashes ($hasil['tgllahir']);$jenkel = stripslashes ($hasil['jenkel']);$alamat = stripslashes ($hasil['alamat']);

{$no++;

?><tr align="center"><td> </td><td> </td><td> </td><td> </td><td> </td>

<td> </td><td> </td>

41

<td bgcolor="#CCCCCC"> </td></tr>

<tr align="center"><td><?=$no?><div align="center"></div></td>

<td><?=$id?><div align="center"></div></td><td><?=$nama?><div align="center"></div></td><td><?php

if (empty($foto))echo "<strong><img src='images/nopic.gif' width='50' height='50'> <br> NoImage </strong>";

elseecho"<img class='shadow' src='images/$foto' width=75 heigth=25/

title='Foto $nama' >"?> </td>

<td><?=$tgllhr?><div align="center"></div></td>

<td><?=$jenkel?><div align="center"></div></td><td><?=$alamat?>

<div align="center"></div></td><td bgcolor="#CCCCCC"><div align="center"><ahref="index.php?page=edit&id=<?=$id?>">Edit</a> | <ahref="index.php?page=delete&id=<?=$id?>" OnClick="returnconfirm('Yakin Data <?=$nama?> akan dihapus');">Delete</a></div></td></tr>

</tr><?php}}?>

<tr align="center"><td> </td>

<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td bgcolor="#CCCCCC"> </td>

42

</table></div>

3.7 Halaman Tampilan Edit Data Tim Koalisi Merah Putih

3.8.1 Tampilan Halaman Edit Data

Di Halaman ini Administrator (Pengelola web) dapat mengedit data tim


Gambar 12. Tampilan Edit Data

43

3.8.2 Script Tampilan Halaman Edit Data

Berikut ini adalah script tampilan edit data tim koalisi merah putih yang

kemudian disimpan dengan nama file “edit.php” pada lokasi


<?phpinclude "koneksi.php";

if (isset($_GET['id'])) {$id = $_GET['id'];

} else {die ("Error. No id Selected! ");

}//Tampilkan datanya$query = "SELECT id,nama,namafoto,tgllahir,jenkel,alamat FROM timsesWHERE id='$id'";$sql = mysql_query ($query);$hasil = mysql_fetch_array ($sql);$id = $hasil['id'];$nama = $hasil['nama'];$jenkel = $hasil['jenkel'];$namafoto = stripslashes ($hasil['namafoto']);$foto = $hasil['namafoto'];//Memecah tanggal Lahirlist($thn,$bln,$tgl) = explode ("-",$hasil['tgllahir']);$alamat = $hasil['alamat'];//proses editif (isset($_POST['Edit'])) {

$id = $_POST['hid'];$nama = $_POST['nama'];$tgllahir = $_POST['thn']."-".$_POST['bln']."-".$_POST['tgl'];$jenkel = $_POST['jenkel'];$alamat = $_POST['alamat'];$namafoto = $_FILES['foto']['name'];//Cek Photoif (strlen($namafoto)>0) {

//upload Photoif (is_uploaded_file($_FILES['foto']['tmp_name'])) {

move_uploaded_file ($_FILES['foto']['tmp_name'], "images/".$namafoto);mysql_query ("UPDATE timses SET namafoto='$namafoto' WHERE

id='$id'");

44

}}//update data$query = "UPDATE timses SET

nama='$nama',tgllahir='$tgllahir',jenkel='$jenkel',alamat='$alamat' WHERE id='$id'";

$sql = mysql_query ($query);if ($sql) {

echo "<h2><font color=#8BB2D9><center>Data Tim Koalisi Merah Putihtelah berhasil diedit</center></font></h2>";

} else {echo "<h2><font color=red><center>Data Tim Koalisi Merah

Putih gagal diedit</center></font></h2>";}

}?><div id="content">

<h2 align="center">Edit Data Tim Koalisi Merah Putih</h2><FORM ACTION="" METHOD="POST" NAME="input"

enctype="multipart/form-data"><table cellpadding="0" cellspacing="0" border="0" width="700">

<tr><td width="18"> </td>

<td width="132" height="24">ID</td><td width="550">:<b><?=$id?>

<input type="hidden" name="hid" value="<?=$id?>"></b></td>

</tr><tr>

<td> </td><td height="29">Nama</td>

<td><input type="text" name="nama" size="30" maxlength="30"value="<?=$nama?>"></td>

</tr><tr>

<td> </td><td height="35">Foto</td><td><?php if (empty($foto))

echo "<strong><img src='images/nopic.gif' width='50' height='50'> <br> NoImage </strong>";

else

45

echo"<img class='shadow' align=left src='images/$foto' width=100heigth=50/>"

?>

/><?=$namafoto?><br /><br /><br /><br /><br /><br /><br

<input type="file" name="foto"/></td></tr>

<tr><td> </td>

<td height="35">Tanggal Lahir</td><td><select name="tgl"><?php

for ($i=1; $i<=31; $i++) {$tg = ($i<10) ? "0$i" : $i;$sele = ($tg==$tgl)? "selected" : "";

echo "<option value='$tg' $sele>$tg</option>";}?></select> -<select name="bln"><?php

for ($i=1; $i<=12; $i++) {$bl = ($i<10) ? "0$i" : $i;$sele = ($bl==$bln)?"selected" : "";

echo "<option value='$bl' $sele>$bl</option>";}?></select> -<select name="thn"><?php

for ($i=1970; $i<=2000; $i++) {$sele = ($i==$thn)?"selected" : "";

echo "<option value='$i' $sele>$i</option>";}?></select> </td>

</tr><tr>

<td> </td><td height="28">Jenis Kelamin</td>

46

<td><input type="radio" name="jenkel" value="Pria" <?echo ($jenkel==Pria)?"checked":""; ?>>

Pria   <input type="radio" name="jenkel" value="Wanita" <?

echo ($jenkel==Wanita)?"checked":""; ?>>Wanita</td>

</tr><tr><td> </td>

<td>Alamat</td><td><textarea name="alamat" cols="40"rows="5"><?=$alamat?></textarea></td>

</tr><tr>

<td> </td><td> </td><td> </td>

</tr><tr>

<td> </td><td> </td><td>

<input type="submit" name="Edit" value="Edit Data"> <input type="reset" name="reset" value="Reset"></td>

</tr></table>

</FORM></div>

3.9 Halaman Tampilan Delete Data Tim Koalisi Merah Putih

3.9.1 Tampilan Halaman Delete Data

Di Halaman ini Administrator (Pengelola web) dapat mengedit data tim


47

Gambar 13. Kotak Dialog Delete

Gambar 14. Tampilan Delete Data

48

3.9.2 Script Tampilan Halaman Delete Data

Berikut ini adalah script tampilan delete data tim koalisi merah putih yang

kemudian disimpan dengan nama file “delete.php” pada lokasi


<?php//Panggil Koneksiinclude "koneksi.php";

// Cek idif (isset($_GET['id'])) {

$id = $_GET['id'];// membaca nama file yang akan dihapus berdasarkan id$query = "SELECT * FROM timses WHERE id ='$id'";$hasil = mysql_query($query);$data = mysql_fetch_array($hasil);$namafoto = $data['namafoto'];} else {

die ("Error. Tak ada id yang dipilih Silakan cek kembali! ");}

//proses delete dataif (!empty($id) && $id != "") {

//Hapus data$query = "DELETE FROM timses WHERE id='$id'";$sql = mysql_query ($query);// menghapus file dalam folder sesuai namanyaunlink("images/".$namafoto);if ($sql) {

?><script language="JavaScript"> alert('DataBerhasil dihapus');document.location='index.php?page=tampil';</script>

<?php} else {echo "<h2><font color=red><center>Data Tim Koalisi Merah Putih

gagal dihapus</center></font></h2>";}}?>

</div>

49

3.10 Halaman Tampilan About

3.10.1 Tampilan Halaman About

Di Halaman ini menampilkan mengenai data diri administrator :

Gambar 15. Tampilan About

3.10.2 Script Tampilan Halaman About

Berikut ini adalah script tampilan tentang admin yang kemudian disimpan

dengan nama file “about.php” pada lokasi


</div><style type="text/css">

font-weight: bold;

</style><div id="content">

<h2> </h2><table width="385" border="0" align="center" cellpadding="0"

cellspacing="0"><tr bgcolor="red">

<td height="29" colspan="5"><div align="center" class="style1"><imgsrc="image/user_comment.png" width="16" height="16">ABOUT US ?</div></td>

</tr><tr>

<td width="14"> </td><td width="103"> </td><td width="12"> </td><td width="243"> </td><td width="13"> </td>

</tr><tr>

<td> </td><td>Nama</td><td>:</td><td>Abdul Rohman</td><td> </td>

</tr><tr><td> </td><td>NIM</td><td>:</td><td>21060112060003</td><td> </td>

</tr><tr><td> </td><td>Telpon</td><td>:</td><td>085713524834</td><td> </td>

</tr><tr>

51

<td> </td><td>Email</td><td>:</td><td>[email protected]</td><td> </td>

</tr><tr>

<td> </td><td> </td><td> </td><td> </td><td> </td>

</tr><tr>

<td> </td><td>Nama</td><td>:</td><td>Bayu Adi Saputro</td><td> </td>

</tr><tr>

<td> </td><td>NIM</td><td>:</td><td>21060112060025</td><td> </td>

</tr><tr>

<td> </td><td>Telpon</td><td>:</td><td>081226414026</td><td> </td>

</tr><tr>

<td> </td><td>Email</td><td>:</td><td>[email protected]</td><td> </td>

</tr><tr>

52

<td> </td><td> </td><td> </td><td> </td><td> </td>

</tr></table>

<p> </p><p> <br/>

</p>

3.11 Halaman Tampilan Cari Data

3.11.1 Tampilan Halaman Cari Data

Di Halaman ini menampilkan mengenai mencari data tim koalisi merah

putih untuk mempermudah administrator :

Gambar 16. Tampilan Cari

53

Gambar 17. Hasil Cari Data

3.11.2 Script Tampilan Halaman Cari Data

Berikut ini adalah script tampilan mencari data tim koalisi merah putih

yang kemudian disimpan dengan nama file “cari.php” pada lokasi


<strong>Mencari Data Tim Koalisi Merah Putih :</strong><br><br><form action="" method="post" name="pencarian" id="pencarian">

<input type="text" name="search" id="search"><input type="submit" name="submit" id="submit" value="CARI">

</form>

<?phpinclude"koneksi.php";

54

// menampilkan dataif ((isset($_POST['submit'])) AND ($_POST['search'] <> "")) {$search = $_POST['search'];$sql = mysql_query("SELECT * FROM timses WHERE nama LIKE

'$search%' ") or die(mysql_error());//menampilkan jumlah hasil pencarian$jumlah = mysql_num_rows($sql);if ($jumlah > 0) {echo '<p>Ada '.$jumlah.' data yang sesuai.</p>';

while ( $hasil = mysql_fetch_array ($sql)) {$id = stripslashes ($hasil['id']);$nama = stripslashes ($hasil['nama']);$namafoto = stripslashes ($hasil['namafoto']);$foto = $hasil['namafoto'];$tgllhr = stripslashes ($hasil['tgllahir']);$jenkel = stripslashes ($hasil['jenkel']);$alamat = stripslashes ($hasil['alamat']);@$no++;

//tampilkan data siswa dan photo?>

<table width="102%" border="0" align="center" cellpadding="0"cellspacing="0" id="tabel">

<tr bgcolor="red"><th width="4%" height="39">No

</td></th><th width="9%">id

</td></th><th width="13%"> Nama

</td></th><th width="13%">Foto </th><th width="11%">Tgl Lahir

</td></th><th width="15%">Jenis Kelamin

</td></th><th width="18%">Alamat

</td>

55

</th><th width="17%">Action

</td></th>

</tr><tr align="center">

<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td bgcolor="#CCCCCC"> </td>


<td><?=$no?><div align="center"></div></td>

<td><?=$id?><div align="center"></div></td>

<td><?=$nama?><div align="center"></div></td>

<td><?php

if (empty($foto))echo "<strong><img src='images/nopic.gif' width='50' height='50'> <br>

No Image </strong>";else

echo"<img class='shadow' src='images/$foto' width=75 heigth=25/ title='Foto$nama'>"

?> </td>

<td><?=$tgllhr?><div align="center"></div></td>

<td><?=$jenkel?><div align="center"></div></td>

<td><?=$alamat?><div align="center"></div></td>

<td bgcolor="#CCCCCC"><div align="center"><ahref="index.php?page=edit&id=<?php=$id?>">Edit</a> | <ahref="index.php?page=delete&id=<?php=$id?>">Delete</a></div></td>

56


<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td bgcolor="#CCCCCC"> </td>

</tr></table><center> <?php

}}else {// menampilkan pesan zero dataecho 'Maaf, hasil pencarian tidak ditemukan.';

}}else { echo 'Masukkan Nama Seseorang';}?></center>

3.12 Logout

3.12.1 Script Logout

Berikut ini adalah script untuk keluar sebagai administrator dan kembali

ke halaman login yang kemudian disimpan dengan nama file

“logout.php” pada lokasi (C:\xampp\htdocs\KoalisiMerahPutih) :

<?php//lanjutkan session yang sudah dibuat sebelumnyasession_start();//hapus session yang sudah dibuatsession_destroy();//redirect ke halaman loginheader('location:login.php');?>

57

BAB IVPENUTUP

4.1 Kesimpulan

Pembuatan web menggunakan pemrograman PHP mempunyai berbagai

macam kelebihan dan keunggulan bila dibandingkan dengan menggunakan

program lain yang sejenis. Berbagai macam kemudahan yang ada pada program

PHP sangat fleksibel dan akan memberikan kemudahan dalam aplikasinya.

Sebagai contoh, data masukkan dalam suatu form html secara otomotis di-

variabel-kan dan dapat digunakan langsung, sehingga tidak perlu memparsing apa

yang disebut query string.

Konektivitas Database cukup kuat dengan dukungan native-driver untuk

sekitar 15 database paling populer plus ODBC. PHP mendukung sejumlah besar

protokol seperti POP3, IMAP dan LDAP. PHP 4 juga mempunyai dukungan baru

untuk Java dan arsitektur pendistribusian objek (COM dan CORBA), membuat n-

kali pengembangan untuk pertama kali. PHP tidak mendukung closed-source.

Sebagai contoh komputer Apple dan Microsoft tidak dapat bekerjasama dengan

proyek open source seperti PHP.

Berbagai keunggulan yang dimiliki oleh PHP sangat berperan penting dalam

perkembangan dunia teknologi khususnya dalam bidang internet dan penyebaran

informasi. Secara tidak langsung perkembangan tersebut juga akan mempengaruhi

terhadap berbagai aspek kehidupan manusia.

4.2 Saran

Sebelum membuat sebuah script di dalam PHP sebaiknya terlebih dahulu

memahami tentang HTML dan dasar-dasar pemrograman (C/C++) karena

pemahan yang cukup dalam pemrograman dasar(C/C++) akan lebih

mempermudah dalam aplikasi pembuatan sebuah scipt di dalam program PHP.

58

DAFTAR PUSTAKA

1. Arief, 2007. Pemrograman Web dengan PHP dan MySQL. Jakarta :

PT. Elex Media Komputindo.

2. Miftakhul, 2008. Membuat Aplikasi Database dengan Java, MySQL,

dan NetBeans. Jakarta : PT. Elex Media Komputindo.

Documents

Pemrog Tim Koalisi merah putih php