Scribd
Unggah
81 tayangan

Modul PI 2009

Diunggah oleh

Beny Std Al-Banjari
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
81 tayangan

Modul PI 2009

Diunggah oleh

Beny Std Al-Banjari
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 45

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.

DAFTAR ISI
HALAMAN JUDUL .......................................................................................... KATA PENGANTAR ....................................................................................... DAFTAR ISI ...................................................................................................... MODUL MODUL MODUL MODUL MODUL MODUL MODUL MODUL MODUL MODUL I II III IV V VI VII VIII IX X DASAR - DASAR HTML ........................................... CSS DAN JAVASCRIPT ............................................ DASAR - DASAR PHP ................................................. PHP LANJUTAN .......................................................... DASAR-DASAR WEB DINAMIS .............................. WEB BERBASIS CONTENT 1 (PERSIAPAN PROJECT DAN DATABASE) ........... WEB BERBASIS CONTENT 2 (MANAJEMEN USER) ................................................ WEB BERBASIS CONTENT 3 (MANAGEMENT BERITA) ........................................ WEB BERBASIS CONTENT 4 (MANAJEMEN MODUL) .......................................... WEB BERBASIS CONTENT 5 (PERANCANGAN TAMPILAN) ................................ DAFTAR PUSTAKA ........................................................................................ 52 54 50 44 43 40 1 2 3 4 12 18 25 33

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: <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 a. Struktur Command/TAG dalam bahasa HTML:

b. 3 baris :

Struktur TAG HTML untuk menampilkan Tabel 3 kolom dan

c.

TAG HTML untuk menampilkan Header 1 rata tengah :

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

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.

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 Dapat menampilkan konten utama terlebih dahulu, sementara gambar Penerjemahan CSS setiap browser berbeda, tata letak akan berubah CSS adalah layouting masa depan dengan penggabungan bersama berpengaruh terhadap ukuran file dan kecepatan downloading. dapat ditampilkan sesudahnya. jika dilihat di berbagai browser. 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.

<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>

10

<body> <H1 style="color:red">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 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 variable ekspresi2 menunjukkan syarat yang harus terpenuhi untuk menjalankan statemant ekspresi3 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 masingBuatlah file latihan31.php berikut dan simpan dalam folder anda. 14 masing (folder ini akan digunakan selama praktikum selajutnya).

<?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 <?php for ($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 linklink terhadap file yang akan didownload, dimana apabila link tersebut di-klik, maka terjadilah proses download.

18

3. Petunjuk Praktikum 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)){ 19

echo "<a href='$tmp' target='_blank'>$tmp</a><br>"; } 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

22

Pastikan

web

server

telah

aktif,

jalankan

alamat

http://localhost/phpmyadmin/ pada browser anda. 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.

<?php echo "<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 Untuk pengelolaan data (menampilkan dan hapus data) buatlah file

phpmyadmin apakah data tersebut sudah tersimpan di database. latihan52.php sebagai berikut : <?php include "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><td bgcolor=#CCCCCC>E-Mail</td><td bgcolor=#CCCCCC>Alamat</td><td bgcolor=#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><td bgcolor=#FFFFFF>$email</td><td bgcolor=#FFFFFF>$alamat</td><td bgcolor=#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 Laporkan output yang ditampilkan file latihan51.php dan latihan52.php. Modifikasi file latihan52.php agar dapat melakukan hapus data untuk pembuatan database, tabel hingga input data.

record tertentu dengan mengirim variabel trigger bernama hapus=1. 5. Hasil Praktikum Output file latihan51.php :

Output file latihan52.php :

26

Kode program hasil modifikasi file latihan52.php :

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, Dalam folder project tersebut buatlah folder dengan struktur sebagai o admin 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 : foto_berita images sebagai contoh (c:/wamp/www/05018111/project) berikut :

28

Tabel user :

Tabel berita :

Buatlah file koneksi.php dan simpan di folder project/config/ sebagai

berikut :

29

<?php $server = $username $password $database

"localhost"; = "root"; = ""; = "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/ : <?php echo "<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/ : <?php include "../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 : <?php echo "<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 : <?php include "../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 Mahasiswa dapat membuat sistem login untuk memasukkan berita. berita meliputi input berita, menampilkan berita dan menghapus berita.

2. Pendahuluan Sebelum membuat modul berita, sebaiknya dibuatkan skript untuk login terlebih dahulu agar user yang mengakses modul berita adalah user yang benarbenar 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 : <?php echo "<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/ : <?php include "../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/ : <?php session_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

<?php session_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/ :


<?php session_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 Mahasiswa dapat merancang modul-modul yang diperlukan. dinamis

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> </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>

<link href=../config/adminstyle.css' rel='stylesheet' type='text/css'>

42

Buat file media.php untuk halaman utama admin dan letakkan di /project/admin/ :
<?php session_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>&#187; Home</a></li> <?php include "menu.php"; ?> <li><a href=logout.php>&#187; Logout</a></li> </ul> <p>&nbsp;</p> </div> <div id="footer"> Copyright 2009 </div>

</div> </body> </html> <? } ?>

Buat file content.php dan simpan pada folder /project/admin


<?php include "../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>&nbsp;</p><p>&nbsp;</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


<?php include "../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]'>&#187; $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. Stephen Wilson, World Wide Web Design Guide : Learn to design professional web pages, Hayden Books, Indianapolis, 1995. Kemas, Y., Pengantar Content Management System, 2003, Paper Kuliah Umum Ilmukomputer.com Lukmanul Hakim, Membongkar Trik Rahasia Para Master PHP, 2008, Penerbit Loko Media, Yogyakarta. http://www.webengineering.com http://www.klik-kanan.com http://www.ilmukomputer.com

2.

3.

4.

5. 6. 7.

45

Anda mungkin juga menyukai