modul pi 2009
TRANSCRIPT
MODUL PRAKTIKUM
PEMROGRAMAN INTERNET
DISUSUN OLEH :
HASANUDDIN, S.T.
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS AHMAD DAHLAN
YOGYAKARTA
2009
KATA PENGANTAR
Assalamualaikum Wr. Wb.
Alhamadulillah, puji syukur kami panjatkan kehadirat Allah SWT yang
telah melimpahkan rahmat-Nya hingga kami dapat menyelesaikan penulisan Modul
Praktikum Pemrograman Internet ini dengan lancar. Modul praktikum ini telah
dilakukan pembaruan pada modul lama dengan tujuan untuk penyesuaian dengan
kebutuhan dan tuntutan perkembangan ilmu pengetahuan di bidang pemrograman
web atau dalam hal ini kita sebut pemrograman internet.
Materi yang disajikan dalam modul praktikum ini merupakan
implementasi dari teori yang disajikan di kelas, dengan harapan para mahasiswa dapat
mengimplementasikan dan menguasai topik-topik seputar pemrograman internet.
Secara umum materi yang disajikan meliputi pemrograman HTML, PHP,
Pemrograman Web Dinamis, dan Pemrograman Web Berbasis Content.
Harapan yang ingin dicapai dengan adanya praktikum ini adalah para
mahasiswa dapat memiliki skill di bidang pemrograman internet sehingga mampu
menghasilkan sistem web atau aplikasi online sesuai standar yang ada menuju
persaingan global di masa mendatang.
Semoga dengan disusunnya modul ini menambah wawasan kita semua,
jika terdapat suatu kekurangan, akan kami update di lain waktu. Mohon maaf jika ada
kekurangan.
Wassalamualaikum Wr. Wb.
Yogyakarta, 4 Februari 2009
Hasanuddin,S.T.
2
DAFTAR ISI
HALAMAN JUDUL .......................................................................................... 1
KATA PENGANTAR ....................................................................................... 2
DAFTAR ISI ...................................................................................................... 3
MODUL I DASAR - DASAR HTML ........................................... 4
MODUL II CSS DAN JAVASCRIPT ............................................ 12
MODUL III DASAR - DASAR PHP ................................................. 18
MODUL IV PHP LANJUTAN .......................................................... 25
MODUL V DASAR-DASAR WEB DINAMIS .............................. 33
MODUL VI WEB BERBASIS CONTENT 1
(PERSIAPAN PROJECT DAN DATABASE) ........... 40
MODUL VII WEB BERBASIS CONTENT 2
(MANAJEMEN USER) ................................................ 43
MODUL VIII WEB BERBASIS CONTENT 3
(MANAGEMENT BERITA) ........................................ 44
MODUL IX WEB BERBASIS CONTENT 4
(MANAJEMEN MODUL) .......................................... 50
MODUL X WEB BERBASIS CONTENT 5
(PERANCANGAN TAMPILAN) ................................ 52
DAFTAR PUSTAKA ........................................................................................ 54
3
MODUL I
DASAR - DASAR HTML
1. Tujuan Praktikum
Mahasiswa dapat mengetahui struktur dasar bahasa HTML
Mahasiswa dapat membuat suatu halaman website berbasis HTML
2. Dasar Teori
Hypertext Markup Language merupkan standard bahasa yang digunakan untuk
menampilkan document web, yang bisa dilakukan dengan HTML adalah :
Mengontrol tampilan dari web page dan contentnya.
Mempublikasikan document secara online sehingga bisa diakses
Membuat online form yang bisa digunakan untuk menangani
pendaftaran, transaksi secara online.
Menambahkan object-object seperti image, audio, video dan juga java
applet dalam document HTML.
Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan
tampilan dari document HTML. :
<BEGIN TAG> </END TAG>
Contoh: Setiap document HTML di awali dan di akhiri dengan tag HTML.
<HTML>
. . .
<HTML>
Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya
menghasilkan output yang sama. Bentuk dari tag HTML sebagai berikut:
<ELEMENT ATTRIBUTE = value>
Element - nama tag
Attribute - atribut dari tag
Value - nilai dari atribut.
Contoh:
4
<BODY BGCOLOR=lavender>
BODY merupakan element, BGCOLOR(Background) merupakan atribut yang
memiliki nilai lavender.
3. Petunjuk Praktikum
Dengan menggunakan tools Editing Web seperti Ms. FrontPage atau Macromedia
Dreamweaver, rancanglah halaman web berbasis HTML seperti berikut :
4. Tugas Praktikum
Setelah merancang halaman web di atas, dalam tools Editing Web,
tampilkan dalam mode ’Kode HTML’ untuk mengetahui HTML dari halaman
web tersebut (perlu diketahui bahwa tools editing web akan membuat kode
HTML secara otomatis ketika anda mendesain halaman web tersebut).
Laporkan hasil HTML yang terbentuk dalam ketegori-kategori yang
telah disediakan pada point Hasil Praktikum di bawah ini..
5. Hasil Praktikum
5
a. Struktur Command/TAG dalam bahasa HTML:
b. Struktur TAG HTML untuk menampilkan Tabel 3 kolom dan
3 baris :
c. TAG HTML untuk menampilkan Header 1 rata tengah :
6
d. TAG HTML untuk menampilkan gambar :
e. TAG HTML untuk membuat List/Daftar :
f. TAG HTML untuk membuat paragraf rata kanan
g. TAG HTML untuk membuat paragraf rata tengah
7
MODUL II
CSS (CASCADING STYLE SHEETS)
1. Tujuan Praktikum
Mahasiswa dapat memahami konsep dan penggunaan CSS
Mahasiswa dapat merancang dan membuat halaman web
menggunakan CSS
2. Dasar Teori
a. CSS (Cascading Style Sheet)
Style Sheets merupakan feature yang sangat penting dalam membuat
Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam
membuat web, akan tetapi penggunaan style sheets merupakan kelebihan
tersendiri.
Suatu style sheet merupakan tempat dimana anda mengontrol dan
memanage style-style yang ada. Style sheet mendeskripsikan bagaiman
tampilan document HTML di layar. Anda juga bias menyebutnya sebagai
template dari documents HTML yang menggunakanya.
Anda juga bisa membuat efek-efek sepesial di web anda dengan
menggunakan style sheet. Sebagai contoh anda bisa membuat style sheet yang
mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna
biru. Atau pada tag <P> yang akan di tampilkan dengan warna kuning dan
menggunakan font verdana dan masih banyak lagi yang bisa anda lakukan
dengan style sheet.
Secara teoritis anda bisa menggunakan style sheet technology dengan
HTML. Akan tetapi pada prakteknya hanya Cascading Style Sheet (CSS)
technology yang support pada hampir semua web Browser. Karena CSS telah
di setandartkan oleh World Wide Web Consortium (W3C) untuk digunakan di
web browser..
Fakta menggunakan CSS :
Telah didukung oleh kebanyakan browser versi baru, tetapi tidak
didukung oleh browser-browser versi lama.
8
Lebih fleksibel dalam penempatan posisi layout. Dalam layout CSS,
kita mengenal Z-index untuk menempatkan objek dalam posisi yang
sama.
Menjaga HTML dalam penggunaan tag yang minimal, hal ini
berpengaruh terhadap ukuran file dan kecepatan downloading.
Dapat menampilkan konten utama terlebih dahulu, sementara gambar
dapat ditampilkan sesudahnya.
Penerjemahan CSS setiap browser berbeda, tata letak akan berubah
jika dilihat di berbagai browser.
CSS adalah layouting ”masa depan” dengan penggabungan bersama
XHTML
Sintaks CSS dibuat atas 3 bagian, yaitu : selector, property dan value. Bentuk
susunannya adalah seperti berikut :
Selector {property : value}
Selector adalah elemen atau tag HTML normal yang ingin didefinisikan.
Property merupakan atribut yang ingin dipilih dan masing-masing property
dapat diberi sebuah nilai (value). Contoh :
body {color : balck}
Maksud perintah di atas adalah jika selector body dipanggil pada HTML,
tampilan halaman web akan berwarna hitam (black).
Jika nilai yang diberikan lebih dari satu kata, gunakan tanda petik ganda (””)
seperti contoh berikut :
P {font-family : ”sans serif”}
3. Petunjuk Praktikum
Buatlah halaman web sederhana berbasis HTML berikut menggunakan
editor web misalnya Macromedia Dreamweaver, selanjutnya simpan dengan
nama latihan2.html.
9
<html><head><title>Latihan 2</title></head><body><H1>Header 1 menggunakan Style</H1><H2>Header 2</H2><H3>Header 3</H3><p>Teks yang ditulis mengikuti sebuah heading dapat menimbulkan akibat tampilan jenis huruf yang berbeda pada beberapa jenis program browser.Anda disarankan segera menutup teks pada paragraf tersebut.</p><div>Teks pada bagian ini menggunakan DIV dan memiliki border yang mengelilingi teks yang ada </div><br><p>Contoh Link adalah sebagai berikut:</p><ul><li><a href="latihan2.html">Link pertama</a></li><li><a href="latihan2.html">Link kedua</a></li><li><a href="latihan2.html">Link ketiga</a></li></ul></body></html>
Amati hasil tampilan web pada browser.
Tambahkan CSS pada halaman tersebut sehingga menjadi seperti kode
berikut:
<html><head><title>Latihan 2</title><style type="text/css">body { font-family: Verdana, sans-serif;color: black; background: white; }p{text-indent: 2em; margin-top: 0; marginbottom: 0;}h2 { font-size: 150%; }h3 { font-size: 100%; }div.box{ border: solid; border-width: thin; width: 100% }a:link { color: rgb(0, 0, 153) } a:visited { color: rgb(153, 0, 153) } a:active { color: rgb(255, 0, 102) } a:hover { color: rgb(0, 96, 255) } </style></head>
<body><H1 style="color:red">Header 1 menggunakan Style</H1>
10
<H2>Header 2</H2><H3>Header 3</H3><p>Teks yang ditulis mengikuti sebuah heading dapat menimbulkan akibat tampilan jenis huruf yang berbeda pada beberapa jenis program browser.Anda disarankan segera menutup teks pada paragraf tersebut.</p><div class="box"> Teks pada bagian ini menggunakan DIV dan memiliki border yang mengelilingi teks yang ada </div><br><p>Contoh Link adalah sebagai berikut:</p><ul><li><a href="latihan2.html">Link pertama</a></li><li><a href="latihan2.html">Link kedua</a></li><li><a href="latihan2.html">Link ketiga</a></li></ul></body></html>
Amati kembali perubahan yang terjadi pada halaman tersebut.
4. Tugas Praktikum
Laporkan hasil pengamatan pada lembar kerja
Lakukan rekayasa dan modifikasi script CSS dan HTML sesuai kreasi
sendiri untuk hal-hal lain dalam pem-formatan halaman web (minimal 10
perubahan/penambahan komponen CSS).
Hasil pekerjaan dilaporkan pada lembar kerja.
5. Hasil Praktikum
Hasil pengamatan pada file latihan2.html, tuliskan apa perbedaan yang terjadi
pada halaman web tersebut setelah ditambahkan CSS :
11
Jelaskan secara singkat 10 rekayasa CSS yang dilakukan serta kegunaan CSS
tersebut.
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
...............................................................................................................................
MODUL III
12
DASAR - DASAR PHP
1. Tujuan Praktikum
Mahasiswa dapat memahami konsep dan sintaks pemrograman PHP
Mahasiswa dapat membuat halaman web berbasis PHP
2. Dasar Teori
PHP adalah bahasa scripting yang menyatu dengan HTML dan dijalankan pada
server side. Artinya semua sintaks yang kita berikan akan sepenuhnya dijalankan
pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja.
Dalam PHP setiap nama variable diawali tanda dollar ($). Misalnya nama
variable a dalam PHP ditulis dengan $a. Jenis suatu variable ditentukan pada saat
jalannya program dan tergantung pada konteks yang digunakan.
Struktur Kontrol:
IF
Konstruksi IF digunakan untuk melakukan eksekusi suatu statement secara
bersyarat. Cara penulisannya adalah sebagai berikut:
if (syarat){ statement }
atau:
if (syarat){ statement } else
{statement lain}
atau:
if (syarat pertama) { statement pertama} elseif (syarat kedua)
{statement kedua}else
{statement lain}
WHILE
13
Bentuk dasar dari statement While adalah sebagai berikut:
while (syarat){statement}
Arti dari statemant While adalah memberikan perintah untuk menjalankan
statement di bawahnya secara berulang-ulang, selama syaratnya terpenuhi.
FOR
Cara penulisan statement FOR adalah sebagai berikut:
for (ekspresi1; ekspresi2 ; ekspresi3)statement
ekspresi1 menunjukkan nilai awal untuk suatu variableekspresi2 menunjukkan syarat yang harus terpenuhi untuk menjalankan statemantekspresi3 menunjukkan pertambahan nilai untuk suatu variable
REQUIRE
Statement Require digunakan untuk membaca nilai variable dan fungsi-fungsi
dari sebuah file lain. Cara penulisan statement Require adalah:
require(namafile);
Statement Require ini tidak dapat dimasukkan diadalam suatu struktur looping
misalnya while atau for. Karena hanya memperbolehkan pemangggilan file
yang sama tersebut hanya sekali saja.
INCLUDE
Statement Include akan menyertakan isi suatu file tertentu. Include dapat
diletakkan di dalam suatu looping misalkan dalam statement for atau while.
3. Petunjuk Praktikum
Aktifkan/jalankan web server
Buat folder pada web root dengan nama folder adalah NIM masing-
masing (folder ini akan digunakan selama praktikum selajutnya).
Buatlah file latihan31.php berikut dan simpan dalam folder anda.
14
<?php$a="5";$b="2";$hasil=$a+$b;Echo($hasil);$hasil=$a.$b;Echo "<br><br>$hasil";Echo "<br><br>";if ($a > $b){echo("a lebih besar dari pada b"); }elseif ($a < $b){echo("a lebih kecil b"); }else{echo("a sama dengan b");}?>
Buatlah file latihan32.php berikut dan simpan dalam folder anda
<?phpfor ($a=0;$a<10;$a++){echo("Nilai A = ");echo("$a, ");
if($a % 2 == 0) { echo "Nilai $a adalah bilangan genap <br>";} else {echo "Nilai $a adalah bilangan ganjil <br>";}}?>
Jalankan kedua file tersebut pada browser dan amati tampilan yang
dihasilkan, dengan mengetikkan contoh alamat URL sebagai berikut :
http://localhost/05018111/latihan31.php
4. Tugas Praktikum
Jalankan 2 file tersebut dan laporkan outputnya
Modifikasi file latihan32.php agar menampilkan isi dari file
latihan31.php menggunakan statement INCLUDE atau REQUIRE selanjutnya
konversikan statement for pada latihan32.php menggunakan statament while
dengan catatan output yang dihasilkan sama. Laporkan hasil kode
programnya.
15
5. Hasil Praktikum
Output file latihan31.php:
Output file latihan32.php:
16
Kode program file latihan32.php hasil modifikasi :
17
MODUL IV
PHP LANJUTAN
1. Tujuan Praktikum
Mahasiswa dapat memahami konsep upload file dan download file
Mahasiswa dapat membuat halaman web interaktif yang melakukan
upload dan download file.
2. Dasar Teori
Sebagian besar aplikasi web dilengkapi dengan fasilitas untuk mengupload
file, yaitu mengirimkan file dari komputer lokal/client ke komputer server. Sebut
saja elearning yang menyertakan file untuk didownload, e-News yang
menyertakan foto peristiwa, attachment file pada email, gallery foto, greeting
card, dan lain-lain. Pada pertemuan ini kita akan mempelajari cara PHP
menangani upload file dan mengupas berbagai problematika yang sering terjadi
pada kasus upload file.
Hal yang perlu diperhatikan ketika mengirimkan file adalah method dari
form harus POST dan tambahan enctype=”multipart/form-data”. Adapun fungsi
untuk melakukan upload file adalah :
move_upload_file(file_sumber, file_tujuan)
Atau
Copy(file_sumber, file_tujuan)
Kebalikan dari upload file adalah download file yang merupakan proses
pengambilan file di server ke komputer lokal. Biasanya aplikasi download file
digunakan untuk menyebarkan file-file kepada khalayak ramai, seperti :
ilmukomputer.com, hotscripts.com, dan lain-lain.
Adapun inti dari aplikasi download file ini hanyalah menyediakan link-
link terhadap file yang akan didownload, dimana apabila link tersebut di-klik,
maka terjadilah proses download.
3. Petunjuk Praktikum
18
Pastikan web server telah aktif, dan dapat menjalankan http://localhost.
Buat file latihan41.php berikut dan simpan dalam folder anda masing-
masing
<form enctype="multipart/form-data" method="post" action="latihan41_upload.php">File yang diupload : <input type="file" name="fupload"><br>Deskripsi File : <br><textarea name="deskripsi" rows="6" cols="20"></textarea><br><input type=submit value=Upload></form>
Untuk melakukan proses upload dibutuhkan file berikut dan simpan
dengan nama latihan41_upload.php (sesuai dengan action pada file
latihan41.php) :
<?php$lokasi_file = $_FILES['fupload']['tmp_name'];$nama_file = $_FILES['fupload']['name'];$deskripsi = $_POST['deskripsi'];
$direktori = "c:/wamp/www/NIM/$nama_file";
if (move_uploaded_file($lokasi_file, $direktori)){echo "Nama File : <b>$nama_file</b> berhasil di upload <br>";echo "Deskripsi File :<br>$deskripsi";}else{ echo "File gagal diupload"; }?>
Jalankan file latihan41.php pada bowser, kemudian upload suatu file .zip
dan amati output hasilnya dan selidiki isi direktori web folder anda apakah file
upload telah tersimpan di web folder anda.
Buat file untuk melakukan proses download sebagai berikut :
<?$myDir = "c:/wamp/www/NIM/";$dir = opendir($myDir);echo "Isi folder (klik link untuk download : <br>";while($tmp = readdir($dir)){echo "<a href='$tmp' target='_blank'>$tmp</a><br>";}
19
closedir($dir);?>
Amati apakah proses download telah berjalan dengan benar.
4. Tugas Praktikum
Modifikasi file latihan41_upload.php agar dapat melakukan filter
terhadap ukuran file dan jenis file yang diupload, lanjutkan dengan menguji
apakah filter dalam upload telah berjalan dengan benar.
Laporkan kode program hasil modifikasi tersebut.
5. Hasil Praktikum
Output file latihan41.php:
Output file latihan41_upload.php:
20
Kode program madifikasi file latihan41_upload.php:
21
MODUL V
DASAR-DASAR WEB DINAMIS
1. Tujuan Praktikum
Mahasiswa dapat merancang dan membuat database MySQL
Mahasiswa dapat membuat halaman web yang berhubungan dengan
database MySQL
2. Dasar Teori
Istilah web dinamis berangkat dari pemisahan antara kode program dengan
data. Data dikumpulkan dan disimpan pada suatu database, sedangkan
pengelolaan dan manipulasi data dalam database dilakukan melalui bahasa
pemrograman server misalnya PHP. Untuk membuat database di MySQL
sebaiknya digunakan PhpMyadmin. Jika anda menggunakan WAMP untuk
mengakses phpmyadmin, pada browser diakses melalui
http://localhost/phpmyadmin/
Langkah-langkah yang dilakukan dalam hal persiapan database untuk
mendukung web dinamis adalah sebagai berikut :
a. Pendokumentasian koneksi antara PHP-MySQL
b. Pembuatan database
c. Pembuatan tabel dengan mempertimbangkan tipe data, primary key
dan foreign key (pelajari kembali materi pada matakuliah Basis Data)
Untuk membangun web dinamis, pada umumnya terbagi menjadi beberapa
kategori yaitu :
a. Input data
b. Menampilkan data
c. Update atau edit data
d. Hapus data
3. Petunjuk Praktikum
Pastikan web server telah aktif, jalankan alamat
http://localhost/phpmyadmin/ pada browser anda.
22
Buatlah database baru dengan nama database adalah NIM anda. Database
ini akan digunakan seterusnya pada praktikum selanjutnya.
Buat tabel bernama anggota dengan ketentuan sebagai berikut :
23
Buka editor PHP dan ketikkan file koneksi.php berikut untuk melakukan
koneksi dengan antara PHP dan MySQL:
<?php$host="localhost";$username="root";$password="";$databasename="05018111";mysql_connect($host,$username,$password);mysql_select_db($databasename);?>
Buat file latihan51.php untuk melakukan insert data.
<?phpecho "<h2>Tambah Anggota</h2><form method=POST action=latihan52.php><table> <tr><td>Nomor</td> <td> : <input type=text name=nomor></td></tr> <tr><td>Nama</td> <td> : <input type=text name=nama></td></tr> <tr><td>E-mail</td> <td> : <input type=text name=email size=30></td></tr> <tr><td>Alamat</td> <td> : <input type=text name=alamat></td></tr> <tr><td>Kota</td> <td> : <input type=text name=kota></td></tr> <tr><td colspan=2><input type=submit value=Simpan></td></tr></table></form>";?>
24
Jalankan file latihan51.php dan amati output hasilnya, amati data pada
phpmyadmin apakah data tersebut sudah tersimpan di database.
Untuk pengelolaan data (menampilkan dan hapus data) buatlah file
latihan52.php sebagai berikut :
<?phpinclude "koneksi.php";
$nomor = $_POST['nomor'];$nama = $_POST['nama'];$email = $_POST['email'];$alamat = $_POST['alamat'];$kota = $_POST['kota'];
mysql_query("insert into anggota (nomor, nama, email, alamat, kota) values ($nomor, '$nama', '$email', '$alamat', '$kota')");
$sqlstr="select * from anggota";$result = mysql_query($sqlstr) or die ("Kesalahan pada perintah SQL!");
echo("<table width=100% cellspacing=1 cellpadding=2 bgcolor=#000000>");echo("<tr><td bgcolor=#CCCCCC>No</td><td bgcolor=#CCCCCC>Nama</td><tdbgcolor=#CCCCCC>E-Mail</td><td bgcolor=#CCCCCC>Alamat</td><tdbgcolor=#CCCCCC>Kota</td></tr>");while ($row = mysql_fetch_array($result)){$nomor=$row['nomor'];$nama=$row['nama'];$email=$row['email'];$alamat=$row['alamat'];$kota=$row['kota'];
echo("<tr><td bgcolor=#FFFFFF>$nomor</td><td bgcolor=#FFFFFF>$nama</td><tdbgcolor=#FFFFFF>$email</td><td bgcolor=#FFFFFF>$alamat</td><tdbgcolor=#FFFFFF>$kota</td></tr>");}echo("</table>");?>
Amati output pada halaman latihan52.php tersebut.
25
4. Tugas Praktikum
Lakukan langkah-langkah yang terdapat dalam petunjuk praktikum baik
pembuatan database, tabel hingga input data.
Laporkan output yang ditampilkan file latihan51.php dan latihan52.php.
Modifikasi file latihan52.php agar dapat melakukan hapus data untuk
record tertentu dengan mengirim variabel trigger bernama hapus=1.
5. Hasil Praktikum
Output file latihan51.php :
Output file latihan52.php :
Kode program hasil modifikasi file latihan52.php :
26
27
MODUL VI
WEB BERBASIS CONTENT 1
(PERSIAPAN PROJECT DAN DATABASE)
1. Tujuan Praktikum
Mahasiswa dapat merancang project pengembangan web.
Mahasiswa dapat menyiapkan manajemen file dan database untuk
suatu project.
2. Petunjuk Praktikum
Buatlah folder bernama project pada web root anda masing-masing,
sebagai contoh (c:/wamp/www/05018111/project)
Dalam folder project tersebut buatlah folder dengan struktur sebagai
berikut :
o admin
foto_berita
images
o config
o images
Folder admin untuk menyimpan file-file skrip admin dalam mengelola
content website, folder images untuk menyimpan file gambar desain web, dan
folder config untuk menyimpan file style (CSS), library (fungsi), koneksi,
JavaScript.
Dengan menggunakan phpmyadmin, buatlah 3 buah tabel berikut dalam
database anda masing-masing (yang telah dibuat pada praktikum sebelumnya),
seperti tampilan berikut :
Tabel ketegori :
28
Tabel user :
Tabel berita :
Buatlah file koneksi.php dan simpan di folder project/config/ sebagai
berikut :
29
<?php$server = "localhost";$username = "root";$password = "";$database = "05018111";
mysql_connect($server,$username,$password) or die("Koneksi gagal");mysql_select_db($database) or die("Database tidak bisa dibuka");?>
Catatan : sesuaikan nama database dengan NIM anda masing-masing.
3. Tugas Praktikum
Kerjakan langkah-langkah pada petunjuk praktikum.
Pastikan bahwa folder project telah sesuai dengan struktur yang ada dan
database memiliki 3 buah tabel sesuai dengan spesifikasi yang ada.
30
MODUL VII
WEB BERBASIS CONTENT 2
(MANAJEMEN USER)
1. Tujuan Praktikum
Mahasiswa dapat merancang dan membuat modul user yang meliputi input, view,
edit dan hapus user.
2. Petunjuk Praktikum
Buat halaman untuk input user dengan script di bawah ini dan simpan
dengan nama file form_user.php pada folder /project/admin/ :
<?phpecho "<h2>Tambah User</h2><form method=post action=input_user.php><table><tr><td>Username</td><td> : <input name='id_user' type='text'></td></tr><tr><td>Password</td><td> : <input name='password' type='text'></td></tr><tr><td>Nama Lengkap</td><td> : <input name='nama_lengkap' type='text'></td></tr><tr><td>Email </td> <td> : <input name='email' type='text'></td></tr><tr><td colspan=2><input type='submit' value='SIMPAN'></td></tr></table></form>";?>
Untuk melakukan penyimpanan data pada database, buat file
input_user.php seperti script di bawah ini dan simpan pada folder
/project/admin/ :
<?phpinclude "../config/koneksi.php";$pass = md5($_POST[password]);mysql_query("insert into user(id_user, password, nama_lengkap, email) values ('$_POST[id_user]',
31
'$pass', '$_POST[nama_lengkap]', '$_POST[email]')");header('location:tampil_user.php');?>
Untuk menampilkan daftar user yang telah diinputkan, buatlah file
tampil_user.php seperti script di bawah ini dan simpan pada folder
/project/admin :
<?phpecho "<h2>User</h2><form method=POST action=form_user.php><input type=submit value='Tambah User'></form><table><tr><th>No</th><th>Username</th><th>Nama Lengkap</th><th>Email</th><th>Aksi</th></tr>";
include "../config/koneksi.php";$tampil = mysql_query("select * from user order by id_user");$no=1;while($r = mysql_fetch_array($tampil)) {echo "<tr><td>$no</td><td>$r[id_user]</td> <td>$r[nama_lengkap]</td> <td>$r[email]</td> <td><a href='hapus_user.php?id=$r[id_user]'>Hapus</a></td> </tr>"; $no++;}echo "</table>";?>
Untuk menghapus data user, buatlah file hapus_user.php seperti script di
bawah ini dan simpan pada folder /project/admin :
<?phpinclude "../config/koneksi.php";mysql_query("delete from user where id_user= '$_GET[id]'");header('location:tampil_user.php');?>
32
3. Tugas Praktikum
Jalankan file form_user.php pada browser, sebagai contoh adalah :
http://localhost/05018111/project/admin/form_user.php dan isikan beberapa
data account user.
Lakukan percobaan untuk hapus data.
Tambahkan script pada file input_user.php agar terdapat validasi terhadap
data yang dimasukkan misal username tidak boleh kosong, password tidak
boleh kosong dan minimal 5 karakter (huruf).
33
MODUL VIII
WEB BERBASIS CONTENT 3
(MANAGEMENT BERITA)
1. Tujuan Praktikum
Mahasiswa dapat merancang dan membuat modul untuk manajemen
berita meliputi input berita, menampilkan berita dan menghapus berita.
Mahasiswa dapat membuat sistem login untuk memasukkan berita.
2. Pendahuluan
Sebelum membuat modul berita, sebaiknya dibuatkan skript untuk login
terlebih dahulu agar user yang mengakses modul berita adalah user yang benar-
benar sudah terdaftar pada sistem.
Adapun login akan dibuat menggunakan teknik session, yaitu suatu teknik
penyimpanan variabel (mendaftarkan/register suatu variabel) ke server. Contoh
yang sering kita jumpai adalah ketika kita akan membuka inbox email, tentu kita
harus menginputkan username dan password, apabila ditemukan datanya di
database (valid), maka akan dibuatkan session username dan password untuk
mengakases inbox dan selama user berada dalam sesi tersebut, maka dia akan
bebas mengakses emailnya sampai dia memutuskan untuk mengakhiri sesi
tersebut dengan mengklik SignOut atau LogOut (logout.php).
3. Petunjuk Praktikum
Buat file form_login.php untuk halaman login user seperti script di
bawah ini dan simpan pada folder /project/admin :
<?phpecho "<h2>Login</h2><form method=post action=cek_login.php><table><tr><td>Username</td><td> : <input name='id_user' type='text'></td></tr><tr><td>Password</td><td> : <input name='password' type='text'></td></tr><tr><td colspan=2><input type='submit' value='LOGIN'></td></tr>
34
</table></form>";?>
Untuk melakukan validasi login, buat file cek_login.php seperti script di
bawah ini dan simpan di folder /project/admin/ :
<?phpinclude "../config/koneksi.php";$pass=md5($_POST[password]);
$login=mysql_query("SELECT * FROM user WHERE id_user='$_POST[username]' AND password='$pass'");$ketemu=mysql_num_rows($login);$r=mysql_fetch_array($login);
if ($ketemu > 0){ session_start(); session_register("namauser"); session_register("passuser");
$_SESSION[namauser] = $r[id_user]; $_SESSION[passuser] = $r[password];
header('location:form_berita.php');}else{ echo "<center>Login gagal! username & password tidak benar<br>"; echo "<a href=form_login.php><b>ULANGI LAGI</b></a></center>";}?>
Untuk proses logout user, buat file logout.php seperti script di bawah ini
dan simpan di folder /project/admin/ :
<?phpsession_start();session_destroy();echo "Anda telah sukses keluar sistem <b>LOGOUT</b>";?>
Buat halaman untuk input berita dengan buat file form_berita.php seperti
script di bawah ini dan simpan di folder /project/admin/ :
35
<?phpsession_start();include "../config/koneksi.php";
if(empty($_SESSION[namauser]) and empty($_SESSION[passuser])){echo "<center> Untuk mengisikan berita, anda harus login <br>";echo "<a href='form_login.php'><b>LOGIN</b></a></center>";} else {
echo "<h2>Tambah Berita</h2><form method=POST action='input_berita.php' enctype='multipart/form-data'><table><tr><td>Judul</td> <td> : <input type=text name='judul' size=60></td></tr><tr><td>Kategori</td> <td> :<select name='kategori'><option value=0 selected>- Pilih -</option>";
$tampil=mysql_query("SELECT * FROM kategori ORDER BY nama_kategori");while($r=mysql_fetch_array($tampil)){echo "<option value=$r[id_kategori]> $r[nama_kategori]</option>"; }
echo "</select></td></tr><tr><td>Isi Berita</td><td> : <textarea name='isi_berita' cols=80 rows=18></textarea></td></tr><tr><td>Gambar</td> <td> : <input type=file name='fupload' size=40></td></tr><tr><td colspan=2><input type=submit value=Simpan><input type=button value=Batal onclick=self.history.back()></td></tr></table></form>";}?>
Untuk melakukan proses penyimpanan ke database, but file
input_berita.php seperti script berikut dan simpan di folder /project/admin/ :
<?phpsession_start();include "../config/koneksi.php";include "../config/library.php";
36
$lokasi_file = $_FILES['fupload']['tmp_name']; $nama_file = $_FILES['fupload']['name'];
// Apabila ada gambar yang diupload if (!empty($lokasi_file)){ move_uploaded_file($lokasi_file,"foto_berita/$nama_file"); mysql_query("INSERT INTO berita(judul, id_kategori, isi_berita, id_user, jam, tanggal, hari, gambar) VALUES('$_POST[judul]', '$_POST[kategori]', '$_POST[isi_berita]', '$_SESSION[namauser]', '$jam_sekarang', '$tgl_sekarang', '$hari_ini', '$nama_file')"); } // Apabila tidak ada gambar yang di upload else{ mysql_query("INSERT INTO berita(judul, id_kategori, isi_berita, id_user, jam, tanggal,hari) VALUES('$_POST[judul]', '$_POST[kategori]', '$_POST[isi_berita]', '$_SESSION[namauser]', '$jam_sekarang', '$tgl_sekarang', '$hari_ini')"); } header('location:tampil_berita.php');
?>
Adapun untuk mengakomodasi fungsi tanggal, buat file library.php dan
simpan di folder /project/config.php :
<?php$seminggu = array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu");$hari = date("w");$hari_ini = $seminggu[$hari];
$tgl_sekarang = date("Ymd");$thn_sekarang = date("Y");$jam_sekarang = date("H:i:s");
$nama_bln=array(1=> "Januari", "Februari", "Maret", "April", "Mei",
37
"Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember");?>
4. Tugas Praktikum
Ikutilah langkah-langkah pada petunjuk paktikum.
Jalankan file form_berita.php pada browser, dan ujicoba dengan
memasukkan berita.
38
MODUL IX
WEB BERBASIS CONTENT 4
(MANAJEMEN MODUL)
1. Tujuan Praktikum
Mahasiswa dapat membuat tabel untuk pengelolaan modul secara
dinamis
Mahasiswa dapat merancang modul-modul yang diperlukan.
2. Petunjuk Praktikum
Pada phpmyadmin, tambahkan sebuah tabel bernama modul, sehingga
akan tampil sebagai berikut :.
Isikan data melalui menu Insert, seperti contoh berikut :
39
Modul – modul yang ditambahkan adalah Manajemen Modul dan Berita,
sehingga akan tampil data sebagai berikut :
3. Tugas Praktikum
Ikuti langkah-langkah pada petunjuk praktikum hingga terdapat suatu tabel
modul yang telah berisi data-data sesuai kebutuhan.
40
MODUL X
WEB BERBASIS CONTENT 5
(PERANCANGAN TAMPILAN)
1. Tujuan Praktikum
Mahasiswa dapat merancang dan membuat tampilan login user dan
admin
Mahasiswa dapat merancang dan membuat tampilan utama user dan
admin
2. Petunjuk Praktikum
Buat file adminstyle.css untuk mengatur tampilan admin, simpan pada
folder /project/config/
body{font-family: Tahoma;
text-align: center; }#header {
position: relative;background-image: url(../admin/images/header.jpg);background-repeat: no-repeat;margin-right: auto;margin-left: auto;width: 780px;border: 2px solid #265180;padding-top: 70px;text-align: left;
}
#content {margin-left: 230px;padding: 20px 10px 0 0;
}#content p {
font-size: 80%;line-height: 1.8em;padding-left: 2em;
}#menu {
position: absolute;top: 90px;left: 0;width: 180px;
}#menu ul {
list-style: none;margin: 0;padding: 0;
41
border: none;}#menu li {
width: 180px;border-bottom: 1px solid #969BA5;margin: 0;padding: 0;font-size: 80%;vertical-align: bottom;
}#menu a:link, #menu a:visited {
display: block;padding: 5px 5px 5px 0.5em;border-left: 12px solid #265180;border-right: 1px solid #265180;background-color: #CAD6EC;color: #265180;text-decoration: none;
}#menu a:hover {
background-color: #265180;color: #FFFFFF;
}
#footer {padding: 20px 0 10px 255px;font-size: 70%;color: #FFFFFF;background-color: #265180;
}
Buat file index.php dan letakkan di /project/admin/ :
<html><head><title>Praktikum PI</title><link href=’../config/adminstyle.css' rel='stylesheet' type='text/css'></head><body><div id="header"> <div id="content"> <h2>Login</h2> <?php include "form_login.php"; ?> </div> <div id="footer"> Copyright 2009 </div></div></body></html>
42
Buat file media.php untuk halaman utama admin dan letakkan di
/project/admin/ :
<?phpsession_start();if (empty($_SESSION[namauser]) AND empty($_SESSION[passuser])){ echo "<link href='../config/adminstyle.css' rel='stylesheet' type='text/css'> <center>Untuk mengakses modul, Anda harus login <br>"; echo "<a href=index.php><b>LOGIN</b></a></center>";}else{?>
<html><head><title>Praktikum PI</title><link href="../config/adminstyle.css" rel="stylesheet" type="text/css" /></head><body>
<div id="header"> <div id="content">
<?php include "content.php"; ?> </div>
<div id="menu"> <ul> <li><a href=?module=home>» Home</a></li> <?php include "menu.php"; ?> <li><a href=logout.php>» Logout</a></li> </ul>
<p> </p> </div>
<div id="footer">Copyright 2009
</div></div></body></html><?}?>
Buat file content.php dan simpan pada folder /project/admin
<?phpinclude "../config/koneksi.php";
if ($_GET[module]=='home'){ echo "<h2>Selamat Datang</h2> <p>Hai <b>$_SESSION[namauser]</b>, silahkan klik menu pilihan yang berada di sebelah kiri untuk mengelola content website. </p> <p> </p><p> </p>
43
<p align=right>Login Hari ini: "; echo tgl_indo(date("Y m d")); echo " | "; echo date("H:i:s"); echo "</p>";}
Buat file menu.php dan simpan pada folder /project/admin
<?phpinclude "../config/koneksi.php";
if ($_SESSION[namauser]=='admin'){ $sql=mysql_query("select * from modul where aktif='Y' order by urutan");}else{ $sql=mysql_query("select * from modul where status='user' and aktif='Y' order by urutan"); } while ($data=mysql_fetch_array($sql)){ echo "<li><a href='$data[link]'>» $data[nama_modul]</a></li>";}?>
3. Tugas Praktikum
Lakukan langkah-langkah yang terdapat dalam petunjuk praktikum
44
DAFTAR PUSTAKA
1. Pupung Budi Purnama, Kiat Preaktis Menjadi Desainer Web Profesional,
Elexmedia Komputindo, Jakarta, 2004.
2. Stephen Wilson, World Wide Web Design Guide : Learn to design professional
web pages, Hayden Books, Indianapolis, 1995.
3. Kemas, Y., Pengantar Content Management System, 2003, Paper Kuliah Umum
Ilmukomputer.com
4. Lukmanul Hakim, Membongkar Trik Rahasia Para Master PHP, 2008, Penerbit
Loko Media, Yogyakarta.
5. http://www.webengineering.com
6. http://www.klik-kanan.com
7. http://www.ilmukomputer.com
45