Upgrade Modul
Posted in Mercubuana on December 10th, 2007 by Rapelino – Be the first to commentBerikut ini ada perbaikan dari modul sebelumnya..
7100601_hypermedia_modul_007.pdf
Silahkan di download.. thx
Berikut ini ada perbaikan dari modul sebelumnya..
7100601_hypermedia_modul_007.pdf
Silahkan di download.. thx
Untuk Mahasiswa Hypermedia, PBW1, PBW2 PKK nilai sudah diserahkan ke bagian TU Menteng.
Untuk Mahasiswa PBW1 Reguller, mohon maaf nilai blum bisa ditampilkan disini. InsyaAllah dalam waktu dekat akan ditampilkan. atau selambat-lambatnya akan dibagikan di kelas.
Studi kasus :
Buatlah situs web secara lengkap, mulai dari visi dan misi, kegiatan –kegiatan, arti lambang, dll sesuai dengan tema yang anda ambil. Tema web adalah segala sesuatu yang berhubungan dengan kampus. Bisa Organisasi kampus, jurusan, kegiatan-kegiatan kampus, profile angkatan dll. Setiap tema web tidak boleh sama kelompok yang satu dengan kelompok lainya. Apabila ada yang sama, maka nilai = 0.
Ketentuan tugas sebagai berikut :
1. Tiap halaman situs web harus link (tersambung dengan halaman lainnya dan link tanpa garis), jumlah halaman situs harus lengkap dan sebanyak mungkin.
2. Mengandung unsur gambar / image.
3. Terdapat Gallery.
4. Menyertakan lambang organisasi (apabila ada)
5. Terdapat Banner, Footer dan Menu.
6. Memakai Frame.
7. Memiliki ruang iklan (sponsor).
8. Wajib menggunakan HTML dan CSS.
9. Dilarang menggunakan tools WYSIWYG.
10. Struktur file/folder tersusun dengan rapi.
11. Terdapat site map.
Pengumpulan hasil karya :
1. Dalam bentuk CD/DVD, pada pertemuan ke-12, 2 minggu sebelum UAS. (dan siapkan power point berdurasi 10 menit untuk dipresentasikan di depan kelas).
Penilaian :
1. Unsur tata letak/layout dan struktur menu (30%)
2. Keseimbangan dan pewarnaan (20%)
3. Originalitas content/isi (30%)
4. Kompatibilitas (20%)
Kita ketahui di dalam HTML dapat menyajikan sebuah FORM dengan penulisan sebagai
berikut :
<input name="firstname" type="text" /> <input name="textfield" type="password" /> <input name="hiddenField" type="hidden" /> <textarea name="textarea"></textarea> <input name="vehicle" value="Bike" type="checkbox" /> <input name="sex" value="male" type="radio" /> <select name="select"> <option value="1">oprion1</option> <option value="2">option2</option> </select> <input name="file" type="file" /> <input name="Reset" value="Reset" type="reset" /> <input name="Submit2" value="Submit" type="submit" />
Sebagai latihan kita coba contoh berikut :
Pertama-tama, kita buat dulu halaman formnya, halaman ini adalah
halaman HTML biasa dengan FORM di dalamnya. Sesudah ini kita akan buat
sebuah halaman lain (PHP) untuk memproses apa yang diinputkan dari
halaman HTML kita ini. Kita namai dengan form_saya.html
<html> <head> <title>Form Saya</title> </head> <body> <form action="hasil_form_saya.php" method="post"> Nama saya adalah: <br> <input type="text" name="NamaAnda"> <p> Nama orang yang saya sukai: <br> <input type="text" name="NamaDia"> <p> <input type="submit" name="submit" value="Cocokkan!"> </form> </body> </html>
Ini adalah sebuah form HTML biasa tapi mengandung beberapa hal penting
yang perlu semua pahami. Bagian-bagian pentingnya adalah:
Baris 7: HTML membaca action=”hasil_form_saya.php” yang menunjukkan
pada browser file PHP mana yang akan memproses hasil form kita.
Implikasinya, beberapa saat lagi anda harus membuat sebuah file yang
bernama hasil_form_saya.php yang merupakan mesin kecil yang bertugas
untuk menampilkan hasil input di form kita. (Jangan khawatir, kita akan
membahas method=post belakangan)
Baris 10: input type=”text” menentukan jenis elemen form apa yang kita
inginkan,dalam kasus kita ini adalah sebuah inputan teks atau text box
(kita juga bisa mendefinisikannya sebagai radio button, check box,
dll); name=”NamaAnda” artinya adalah bahwa apapun yang kita ketikkan ke
dalam text box kita tadi akan mengisi sebuah variabel yang bernama
“NamaAnda”. Inilah yang menghubungkan antara form dan variabel – setiap
field dalam sebuah form dapat digunakan untuk mengisi variabel untuk
kemudian kita gunakan sesuka kita.
Baris 13: di baris ini, kita memiliki sebuah teks input yang akan kita
gunakan untuk mengisi variabel lain yang kita beri nama “NamaDia” yang
merupakan nama orang yang kita sukai.
Baris 16, 17: Kode ini membuat sebuah tombol submit dengan tulisan
“Cocokkan!” (maksudnya adalah coba cocokkan nama anda dengan nama orang
yang anda sukai). Dan berakhirlah form kita.
Sekarang kita buat file hasil_form_saya.php
<html> <head> <title>Sayang Sekali!</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <? $NamaAnda = $_POST['NamaAnda']; $NamaDia = $_POST['NamaDia']; ?> <p> Kayaknya <?php print $NamaAnda; ?> <p> gak bakalan bisa jadian sama <b> <?php print $NamaDia; ?> deh!?! </b> <p>Cobalah berusaha lebih keras ya...siapa tahu ada kesempatan. </body> </html>
Baris 8 dan 9 :
Perhatikan method yang digunakan di halaman saya.html yaitu menggunakan
POST. Maka untuk mendapatkan informasi yang diberikan kita harus
menggunakan $_POST[‘nama_variable’] sesuai dengan methodnya.
Baris 12 dan 15:
Menampilkan variable $NamaAnda dan $NamaDia
Pengambilan informasi dari variable yang dikirimkan bisa menggunakan
$_GET, $_POST, $_REQUEST
$_GET mengambil dengan method GET
$_POST mengambil dengan method POST
$_REQUEST mengambil dengan method GET atau POST
Get vs Post
Kita sudah menggunakan metode “Post” untuk mengirimkan data form dengan
cara yang berbeda menggunakan metode lain yaitu “Get”. Ingat, ini
merupakan bagian dari form kita di mana tertulis
action=”hasil_form_saya.php” method=post>.
Perbedaan antara kedua metode ini adalah bahwa metode post secara
transparan mengirimkan semua informasi yang sudah dikumpulkan oleh
halaman form kita, sedangkan metode Get akan mengirimkan semua
informasi itu sebagai bagian dari URL (dalam contoh form kita tadi,
akan seperti ini: http://localhost/hasil_form_saya.php?NamaAnda=panjul&
NamaDia=cinta&submit=Cocokkan%21 —
Perhatikan bagaimana informasi yang sudah dimasukkan user mengenai
namanya dan nama orang yang disukainya ditambahkan pada URL? Ini akan
sangat membantu nanti jika anda sudah mempelajari cara pengiriman
variabel antar halaman lebih lanjut).
Setelah kita berhasil melakukan instalasi, selanjutnya adalah bagaimana kita membuat dan menjalankan file php tersebut.
Seperti kita ketahui file *.php merupakan server-side, jadi untuk menjalankannya service (apache) harus berjaan..
posisi server Root
ServerRoot “C:/Program Files/xampp/apache”
oke, kita sekarang buat sebuah folder yang diletakan di :
C:/Program Files/xampp/htdocs/
folder htdocs merupakan default dari xampp yang dipergunakan sebagai DocumentRoot
sekarang buat folder pbw2.
jika sudah masuk ke folder tersebut.
buka editor, saya menyarankan untuk menggunakan EditPlus.. dapat di download disini atau kalian bisa menggunakan editor lainnya..
bikin file versi.php
isi dari file tersebut :
<?
phpinfo();
?>
coba sekarang jalankan di browser :
http://localhost/pbw2/versi.php
*sampe sini dulu nanti di tambah*
PHP (PHP Hypertext Preprocessor) merupakan bahasa pemrograman server-side yang dapat digunakan secara optimal di dalam pembangunan sebuah aplikasi berbasis web.
untuk menjalankan sebuah aplikasi berbasis web diperlukan sebuah service. salah satunya adalah XAMPP
berikut link untuk mendonload XAMPP
XAMPP dapat digunakan untuk Linux, Mac, Solaris Maupun windwos.
tetapi untuk materi Perkuliahan Pemrograman Berbasis Web II akan menggunakan OS berbasis Windows. Silahkan download versi windowsnya.
Setelah kita berhasil mendownload, langkah selanjutnya adalah melakukan instalasi..
penjelasan mengenai instalasi XAMPP dapat dilihat disini
Oke.. sudah berhasil.. ? bisa lanjutnyah..
untuk menjalankan service Apache bisa melalui xampp control panel..

Tulisan running menandakan service sudah berjalan..
Sekarang coba buka Browsernya..
tulis di address bar -> http://localhost atau http://127.0.0.1
apabila berhasil maka akan muncul tampilan seperti berikut :

Oke, sampai sini kita sudah berhasil…
* ada pertanyaan ? *
Silahkan di download materi untuk PBW1.. (pemrograman Web 1)
modul
1. Buat aplikasi dengan javascript untuk membuat n faktorial
catatan untuk n inputan dari user
2. Buat aplikasi untuk perkalian matrix 2 x 2
catatan inputan dari user
contoh :
[1,1] = 1
[1,2] = 2
[2,1] = 3
[2,2] = 4
1,2,3,4 merupakan inputan dari user..
3. Aplikasi untuk menghitung nilai konversi rupiah menjadi mata uang dollar, yen, euro
catatan nilai rupiah dari user
1 dollar = Rp. 8.800
1 yen = Rp. 750
1 euro = Rp. 12.500
Tugas, dikumpulkan dalam ketikan. (Minggu depan)