Download Surat Ijin Praktek Kerja Lapangan
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Download Surat Ijin Praktek Kerja Lapangan

on

  • 1,182 views

 

Statistics

Views

Total Views
1,182
Views on SlideShare
1,182
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Download Surat Ijin Praktek Kerja Lapangan Document Transcript

  • 1. Posting sebuah form dengan ajax menggunakan frameworks mootools 1. Pengenalan mootools Mootools merupakan sebuah frameworks javascript yang di gunakan untuk mempermudah seorang web developer untuk mengembangkan berbagai macam aplikasi web yang membutuhkan interaksi dengan user. Antara lain mootools sering di gunakan untuk mengirimkan data lewat ajax. Dalam pembahasan kali ini kita akan membahas tentang ajax nya saja :D 2. Struktur file yang di gunakan Pada tutorial kali ini kita akan membutuhkan file file sebagai berikut : • Form.html -> di gunakan sebagai tampilan dari form yang akan dip roses dengan ajax. • Form.js -> menjadi controller / yang memproses perintah untuk mengirim data lewat ajax. • Form.css -> mengatur tampilan dari halaman form yang di buat penting banget coz element yang di akses dengan ajax menggunakan id dari css yang di buat. • Mootools.js -> frameworks mootools yang dapat di download di sini http://mootools.net/download 3. File Form.html File ini berisi tampilan ke user yang merupakan tampilan web, berisi sebuah form dengan dua buah field yang nantinya akan di isi dengan data masukan dari user, dalam hal ini data yang di masukkan adalah data email dan password. Beri nama file ini dengan nama index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Form Login</title> <link href="form.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="moo.js"></script> <script type="text/javascript" src="form.js"></script> </head> <body> <div class="main"> <div class="box"> <h1>Sign in</h1> <p>Do you have an account? Sign in!</p> <form id="myForm" action="ceklogin.php" method="post"> <label><span>E-mail</span> <input type="text"name="email" id="email" class="input-text"/> </label> <label><span>Password</span> <input type="password"name="psw" id="psw" class="input-text"/> </label> <input type="submit" name="button" id="submitter" value="Sign in" /> </form> <div id="log_res"></div>
  • 2. </div> </div> </body> </html> 4. File form.css File css ini di gunakan untuk mengatur tampilan dari halaman html. #form_box { float: left; width: 290px; background: #f8f8f8; border: 1px solid #d6d6d6; border-left-color: #e4e4e4; border-top-color: #e4e4e4; font-size: 11px; font-weight: bold; padding: 0.5em; margin-top: 10px; margin-bottom: 2px; } #form_box div { height: 25px; padding: 0.2em 0.5em; } #form_box div.hr { border-bottom: 2px solid #e2e2e1; height: 0px; margin-top: 0pt; margin-bottom: 7px; } #form_box p { float: left; margin: 4px 0pt; width: 120px; } #log { float: left; padding: 0.5em; margin-left: 10px; width: 290px; border: 1px solid #d6d6d6; border-left-color: #e4e4e4; border-top-color: #e4e4e4; margin-top: 10px; } .log_res { overflow: auto;
  • 3. } .log_res.ajax-loading { padding: 20px 0; background: url(img/spinner.gif) no-repeat center; } 5. File form.js File ini di gunakan untuk mengatur event yang terjadi di halaman index.html window.addEvent('domready', function() { $('myForm').addEvent('submit', function(e) { //mengambil elemen dom ber id myform dan memberikan event ke element tersebut new Event(e).stop(); var log = $('log_res').empty().addClass('ajax-loading'); //jika di submit tambahkan class css ajax-loading ke log_res this.send({ update: log,//jika sudah selesai hilangkan class ajax- loading dari log_res onComplete: function() { log.removeClass('ajax-loading'); } }); }); }); 6 File ceklogin.php File ini yang nantinya di gunakan untuk mengecek masukan yang di berikan dan pada file yang di berikan di bawah ini Cuma mencetak data yang di post dari index.html. <?php print "<pre>".print_r($_POST, true)."</pre>"; ?> Putra Prima A 0410630078
  • 4. Ristie Web Development Division :D