Scribd Logo
Unggah

Selamat datang di Scribd!

  • w03t04 Accepting User Inputs

    Diunggah oleh

    Martin Halomoan
    6 tayangan5 halaman

    Judul Asli

    w03t04_accepting_user_inputs (1)

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    6 tayangan5 halaman

    w03t04 Accepting User Inputs

    Diunggah oleh

    Martin Halomoan

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 5

    INSTITUT TEKNOLOGI DEL

    FAKULTAS INFORMATIKA DAN TEKNIK ELEKTRO


    PROGRAM STUDI SARJANA SISTEM INFORMASI

    RENCANA TUGAS MAHASISWA


    Nama Pemrograman dan Pengujian Aplikasi Web
    Kode 12S3101
    MATA KULIAH Kredit 4 sks
    Semester V
    Pengampu Mario Simaremare (mario@del.ac.id)
    Minggu/sesi 3/1
    TUGAS Bentuk Tugas terstruktur (individu & kelompok)
    MAHASISWA Waktu 2 x 60 menit terstruktur
    Judul Accepting user inputs
    SUBCAPAIAN PEMBELAJARAN MATA KULIAH (SubCPMK)
    SCPMK03 [C3] Mampu menerima dan memproses masukan dari interaksi dengan pengguna
    aplikasi web.
    DESKRIPSI TUGAS
    Pada tugas ini, mahasiswa diminta untuk mengembangkan beberapa halaman PHP untuk menangani
    masukan dari formulir yang sederhana hingga kompleks. Method yang digunakan pada formulir adalah
    post dan get. Tugas kali ini dikerjakan secara mandiri.
    METODE PENGERJAAN TUGAS
    Dengan menggunakan text-editor yang mendukung format HTML dan browser yang kompatibel dengan
    HTML5.
    BENTUK DAN FORMAT LUARAN
    1. Tiga buah halaman HTML dengan ekstensi (.html) berisi formulir berisi formulir-formulir.
    2. Tiga buah halaman PHP dengan ekstensi (.php) berisi penanganan terhadap data yang dikirim
    melalui formulir.
    INDIKATOR, KRITERIA DAN BOBOT PENILAIAN
    Untuk ketiga luaran akan dinilai menggunakan kriteria dan bobot sebagai berikut:
    1. [100%] Ketepatan tata cara penanganan masukan.
    PENGUMPULAN
    Tanggal/ waktu 2 Oktober 2019/ 22.00 WIB
    Tempat https://ecourse.del.ac.id/course/view.php?id=846
    LAIN-LAIN
    Tidak ada
    PUSTAKA
    Utama:
    [1] Deitel, H., Deitel, P. and Deitel, A. (2012). Internet and World Wide Web How to Program. Pearson.
    Pendukung:
    [2] HTML5 Reference https://www.w3schools.com/tags/
    [3] Bootstrap 4 Documentation https://getbootstrap.com/docs/4.0/
    Teknis Pengumpulan:
    Letakkan semua berkas pekerjaan Anda pada sebuah direktori dengan format penamaan
    w03t04_NIM. Sebagai contoh, w03t04_12S17003

    12S3101 – Pemrograman dan Pengujian Aplikasi Web | Halaman 1 dari 5


    Subtugas 1. Accepting input from a simple form
    Untuk dapat mengerjakan bagian ini, anda harus telah memiliki PHP ter-install pada komputer
    anda. Untuk menguji apakah PHP anda telah ter-install dengan baik, silakan untuk mengeksekusi
    perintah berikut.
    php -version

    Jika telah ter-install dengan baik, akan ditampilkan versi dari PHP yang anda gunakan.
    Berikutnya, pada direktori kerja anda buatlah sebuah direktori baru dengan nama
    01_simple_form. Pada direktori baru tersebut buatlah sebuah halaman HTML baru yang
    menggunakan CSS Bootstrap 4. Beri nama berkas HTML tersebut index.html kemudian tuliskan
    kode berikut.
    <!doctype html>
    <html lang="en">

    <head>
    <meta charset="utf-8">
    <meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Profil</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    </head>

    <body>
    <div class="container">
    <form action="simple_action.php" method="post" class="form">
    <h1 class="text-center">Profil</h1>

    <div class="row">
    <div class="col-md-4 offset-md-4">
    <div class="form-group">
    <label for="full_name"><b>Nama Lengkap:</b></label>
    <div class="input-group input-group-sm">
    <input type="text" class="form-control" name="full_name"
    id="full_name" maxlength="60" />
    </div>
    </div>
    <div class="form-group">
    <label for="email"><b>Email:</b></label>
    <div class="input-group input-group-sm">
    <input type="password" class="form-control" name="email" id="email"
    maxlength="60" />
    </div>
    </div>
    </div>
    </div>

    <div class="row">
    <div class="col">
    <div class="text-center">
    <input type="submit" class="btn btn-success" name="command"
    value="Kirim Formulir" />
    &nbsp;
    <input type="submit" class="btn btn-secondary" name="command"
    value="Reset" />
    </div>

    12S3101 – Pemrograman dan Pengujian Aplikasi Web | Halaman 2 dari 5


    </div>
    </div>
    </form>
    </div>

    </body>

    </html>

    Kode HTML di atas akan memberikan tampilan sebagai berikut.

    Perhatikan bahwa atribut action pada form di halaman index.html ditulis “simple_action.php”.
    dan atribut method ditulis “post”. Dengan demikian, ketika formulir di-submit maka data akan
    dikirimkan ke halaman simple_action.php dengan metode post.
    Hal beritkutnya yang perlu dilakukan adalah menulis handler, yaitu halaman simple_action.php
    yang akan menerima data yang dikirimkan oleh formulir. Masih pada direktori kerja yang sama,
    01_simple_form, buat sebuah berkas baru dengan nama simple_action.php. Lalu tuliskan kode
    berikut.
    <?php
    // to read a POST parameter sent by form use the $_POST global array.
    // the index of the $_POST is the name of the HTML element we want to read.
    $full_name = $_POST['full_name'];
    // the above line reads the value in the HTML element named 'full_name'.

    // let's print the value of $full_name variable using echo() function.


    echo("your full name is <b>{$full_name}</b>");

    Pada kode di atas, handler hanya akan membaca masukan dari elemen dengan nama full_name
    kemudian menampilkannya.

    Selanjutnya adalah menguji apakah formulir sudah bekerja dengan baik. Anda akan
    menggunakan built-in web server yang disediakan oleh PHP. Untuk menggunakannya, buka
    direktori kerja anda melalui command line (CMD). Kemudian jalankan perintah berikut.
    php -S localhost:80

    Port yang digunakan adalah default HTTP, 80. Anda dapat menggantinya jika perlu. Jika perintah
    di atas berhasil dijalankan, buka browser anda dan navigasi menuju alamat http://localhost/.
    Anda akan melihat tampilan halaman web yang telah anda desain. Silakan menguji pekerjaan
    anda dengan memasukkan data pada kedua fields (Nama Lengkap dan Email), kemudian submit

    12S3101 – Pemrograman dan Pengujian Aplikasi Web | Halaman 3 dari 5


    dengan menekan tombol Kirim Formulir. Jika semua tahap dilakukan dengan tepat maka anda
    akan melihat tampilan seperti berikut.

    Lengkapi kode anda sehingga simple_action.php menangkap dan menampilkan masukan dari
    field Email.

    Tingkatkan kapabilitas formulir anda sehingga jika field Email tidak diisi maka halaman
    simple_action.php tidak menampilkan informasinya. Berikut adalah contoh tampilannya.

    Jika tidak digunakan lagi, matikan web server dengan menekan Ctrl + C.

    Subtugas 2. Accepting input through GET method


    Pada bagian ini anda akan menggunakan method GET untuk menerima masukan dari pengguna
    aplikasi web. Silakan menduplikasi direktori 01_simple_form kemudian rename dengan nama
    baru 02_using_get_method. Direktori kerja anda kini adalah 02_using_get_method.
    Berikutnya, modifikasi halaman index.html dengan mengganti method pada formulir menjadi
    “get”. Karena formulir akan mengirimkan data dengan menggunakan method get, maka handler,
    simple_action.php, juga harus menyesuaikan. Untuk menangkap data yang dikirim dengan

    12S3101 – Pemrograman dan Pengujian Aplikasi Web | Halaman 4 dari 5


    method get gunakan $_GET global array. Selanjutnya uji pekerjaan anda dengan menjalankan
    built-in web server.
    Dengan menggunakan method get, data yang dikirim akan terlihat pada URL. Perhatikan address
    location pada browser anda ketika men-submit formulir.

    Perilaku dari pengiriman form dengan method get sama dengan sebuah hyperlink biasa. Sebagai
    contoh, anda dapat membuat sebuah link seperti berikut ini dan mendapatkan respon yang sama
    dengan menggunakan formulir dengan method get.
    <a href="simple_action.php?full_name=Wiro+Sableng&email=wiro%40sableng.com">Link
    </a>

    Subtugas 3. Accepting complex input


    Tugas anda adalah memproses halaman Formulir Penerimaan Mahasiswa Baru yang anda
    kerjakan pada tugas sebelumnya. Untuk tugas ini buatlah sebuah direktori baru dengan nama
    03_complex_input. Tulis handler anda pada berkas complex_action.php.

    -EOF-

    12S3101 – Pemrograman dan Pengujian Aplikasi Web | Halaman 5 dari 5

    Anda mungkin juga menyukai