Tutorial Teknologi dan Komputer: Mei 2016

From Prototyping

Planning to develop an efficient Ajax based application is easier with Prototype.js. This framework was developed specifically to simplify almost any Ajax based function.

It is fast becoming the preferred library by different developers. With prototype.js, almost every function could be used with three main objects only. So it does not need a lot of training and familiarity to get along with this simple yet highly efficient framework. The three objects in proptype.js are Ajax.Updater, Ajax.Request and Ajax.Responders.

Ajax.Request

This object is used to enable XMLHttpRequest. This object wraps every function including XMLHttpRequest in the application. The best thing about this object is that it does the job of browser compatibility. Wrapping up XMLHttpRequest and its related functions is really easy.

Communication with the server to establish client side communication based on server side script is easier. Since its compatibility is almost assured, it can go directly to the server, passing through the cross-browser compatibility only for a short while.

<html>

<head>

<title>Ajax Request</title>

</head>

<body>

Name : <input type="text" name="name" id="name" value="cha" />

</form>

$('btnSubmit').observe('click', function(e){

alert( Form.serialize($("searchForm")) );

new Ajax.Request("hello.php", {

method : 'get',

parameters : Form.serialize($("searchForm")),

onSuccess : function(resp) {

alert(resp.responseText);

onFailure : function(resp) {

alert("Oops, there's been an error.");

}

});

})

</script>

</body>

</html>

and for hello.php

<?php

echo "hello ".$_GET['name'].", nice to see you.";

Ajax.Updater

Ajax.Updater wraps the objects related to functions that could trigger changes in some parts of the webpage. Think of developing an application with Ajax application with ASP.NET’s ControlUpdate. The major difference between these two is the control toolkit is more of a tool instead of a code.

Ajax.Updater uses three parameters: container, url and the additional options for execution. The additional parameter is actually the most important part of the parameter since it specifies which part of the webpage it will be affecting. A variation of Ajax.Updater is Ajax.PeriodicalUpdater. The latter function provides another parameter wherein parts of the webpage will be updated even without the action of the web administrator.

<html>

<head>

<title>Using Ajax Updater</title>

</head>

<body>

function UpdateContect()

{

var myAjax = new Ajax.Updater({ success: 'placeholder' },

'ajaxUpdater.php', {

method: 'get',

parameters: 'someParameter=ABC',

onFailure: reportError

});

}

function reportError(request)

{

alert('Sorry. There was an error.');

}

</script>

</body>

</html>

and for ajaxUpdater.php

<?php

echo "Hallo from ajaxUpdater.php";

echo "<br>And this is your param : ".$_GET['someParameter'];

Ajax.Responder

Ajax.Responder strings everything in the webpage. This functionality “listens” to other applications by logging all the activities in the webpage. Using this function, developers could easily point another function that will respond to the log through Ajax.Responder.

You need not develop a highly complicated function as a response to another function. Ajax.Responder is a general listening tool where every action of the webpage is being logged. For your function to respond to the Ajax.Responder, you just have to trigger Ajax.Responder by registering it to the function. Set up a parameter based on the expected response of the function you target and you are on your way.

These three functions essentially wraps up everything that you need to develop an Ajax based website or application. Ajax.Request ensures communication between the server and the client will be faster with cross-browser compatibility. Ajax.Updater and its relative Ajax.PeriodicalUpdater change some parts of the webpage without refreshing the whole website.

Lastly, Ajax.Responder is used to react to other functions within the website. Because of its simplicity and ease of use, prototype.js is one of the easiest to understand and one of the most efficient frameworks specifically made for Ajax developed.

<html>

<head>

<title>Ajax PeriodicalUpdater</title>

</head>

<body>

Queue : <div id="queue_"></div>

new Ajax.PeriodicalUpdater(

'queue_','queue_.php?st=2',

{

method:'get',frequency:3,decay:2

}

);

</script>

</body>

</html>

and for queue_.php

<?php

echo rand(1, 10);

How well do you know prototype (part II)

From Prototyping

Jump to: navigation, search

1) Detecting key events easily

How do we detect which key was pressed? Prototype provides set of key event aliases so that we don’t have to remember that return is “13″ and escape is “27″. Almost all major keys are aliased: KEY_RETURN, KEY_ESC, KEY_TAB, KEY_LEFT, KEY_UP, KEY_RIGHT, KEY_DOWN. See full list in API docs

<html>

<head>

<title>Using Event</title>

</head>

<body>

$('myInput').observe('keyup', function(e){

if (e.keyCode == Event.KEY_BACKSPACE)

doSomethingCoolWhenKeyIsPressed();

})

function doSomethingCoolWhenKeyIsPressed() {

alert("BACKSPACE pressed");

}

</script>

</body>

</html>

2) You won’t need event capturing (most likely)

<html>

<head>

<title>Using Event Observe</title>

</head>

<body>

<div id='productInfo' style="cursor:pointer">Product Info</div>

$('productInfo').observe('click', displayProductInfo);

function displayProductInfo() {

alert("Product info");

}

</script>

</body>

</html>

3) Form Serialisation
In Prototype terms, serializing a form means reading all the form's elements and turning them into a URL-encoded string (nearly) identical to the one that would be sent if you submitted the form. For example, consider this form:

<html>

<head>

<title>Form Serialization</title>

</head>

<body>

<option value="artistname">Artist Name</option>

<option value="title" selected="selected">Title</option>

</select>

</form>

$('btnSubmit').observe('click', function(e){

alert( Form.serialize($("searchForm")) );

})

</script>

</body>

</html>

4) The Form Object

Generally, methods of the Form object take either an ID or an object reference to an element:

// disables the form making all elements read only

Form.disable(form)

// enables a form again

Form.enable(form)

// clears values from all form elements

Form.reset(form)

// returns an array of all form fields in the form

Form.getElements(form)

// focuses on the first form field

Form.focusFirstElement(form)

5) The Insertion Object

I know what you're thinking: this sounds a bit weird, right? Well, the Insertion object adds chunks of HTML in and around an element. There are 4 types of insertion: Before, After, Top and Bottom. Here's how you'd add some HTML before an element with the ID "myelement":

<html>

<head>

<title>Insertion</title>

</head>

<body>

<div id="myelement">My Element</div>

function before_(){

new Insertion.Before("myelement", "<p style='color:red'>I'm before!</p>");

}

function after_(){

new Insertion.After("myelement", "<p style='color:blue'>I'm After!</p>");

}

</script>

</body>

</html>

Usefull Tips and Tricks for Prototype.js

From Prototyping

Jump to: navigation, search

1. Handle Radio Button

<html>

<head>

<title>Radio</title>

function check() {

typeValue = $('myform').serialize().toQueryParams()['type'];

if (typeValue==undefined) alert("You have to choose");

else alert ( "You choose : "+typeValue );

return false;

}

</script>

</head>

<body>

</form>

</body>

</html>

2. Select All and UnSelect for CheckBox

<html>

<head>

<title>Checkbox</title>

document.observe('dom:loaded', function() {

checkboxes2 = $('options').getInputs('checkbox', 'pilihan[]');

});

function check_all() {

checkboxes2.each(function(e){ e.checked = 1 })

}

</script>

</head>

<body>

</form>

<a href="#" onclick="javascript:check_all()">Select All</a>

<a href="#" onclick="javascript:checkboxes2.each(function(e){ e.checked = 0 });">Remove All</a>

</body>

</html>

3. How to enable disable Form

<html>

<head>

<title>Disable Enable Form</title>

function disable_() {

var form = $('disable-example');

//cycle between calling form.disable() and form.enable()

form[form.disabled ? 'enable' : 'disable']();

form.disabled = !form.disabled;

if (form.disabled == true) $('btnName').value = 'Enable'; else $('btnName').value = 'Disable';

}

</script>

</head>

<body>

</form>

</body>

</html>

Insert and delete data at database with Prototype.js

From Prototyping

Jump to: navigation, search

index.php

<head>

<title>Insert and delete data at database with Prototype.js</title>

<!--

.style1 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

}

.style2 {

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

}

-->

</style>

function CheckForm() {

if ( $F('name') == '' ) {

alert("data can't empty");

} else {

insertName();

}

</script>

</head>

<body>

<p class="style1">Insert and Delete data Using Ajax.</p>

<p>

<?php include('config.php'); ?>

function UpdateTable(){

var ajaxURL = "ajax_updater_response.php"

var reqParams = ""

var reqMethod = 'post';

var ajaxContainer = 'ajaxContainer';

// Buat instance Ajax.Updater

new Ajax.Updater(ajaxContainer, ajaxURL, {

method: reqMethod, parameters: reqParams

});

}

function insertName(){

new Ajax.Request('insert.php', {

parameters: $('name').serialize(true),

onComplete: UpdateTable

});

}

function confirmation(id_data) {

var answer = confirm("Are you sure want to delete this data ?")

if (answer){

new Ajax.Request('del.php', {

method: 'post',

postBody: 'id_data='+id_data,

onComplete: UpdateTable

});

}

document.observe('dom:loaded',function(){

UpdateTable();

// end dom:loaded

});

</script>

<br />

</p>

<p class="style2">Created by Irwan</p>

</body>

</html>

config.php

<?php

$db_host="localhost";

$db_name="coba";

$username="root";

$password="Zxcv!234";

$db_con=mysql_connect($db_host,$username,$password);

$connection_string=mysql_select_db($db_name);

mysql_connect($db_host,$username,$password);

mysql_select_db($db_name);

del.php

<?php

include('config.php');

$sql="delete FROM test where id_data='".$_POST['id_data']."' ";

mysql_query($sql);

insert.php

<?php

if(isset($_POST['name'])){

include('config.php');

$name = strip_tags($_POST['name']);

$sql = 'INSERT INTO test (test, tgl) VALUES(

"'.$name.'", now() )';

mysql_query($sql);

echo $name;

} else { echo '0'; }

ajax_updater_response.php

<?php

include('config.php');

// pastikan bener-bener hasilnya HTML

header("Content-type: text/html");

$result = mysql_query("SELECT * FROM test order by tgl desc limit 0,5");

echo '<table class="filmTable" border="0" cellpadding="3" cellspacing="1">';

echo '<tr><th align=center>Data</th><th align=center>Tgl</th><th align=center>Action</th></tr>';

while ($sql_d = mysql_fetch_row($result)) {

echo '<tr>';

echo '<td>'.$sql_d[1].'</td>';

echo '<td>'.$sql_d[2].'</td>';

echo '<td align=center><a href="javascript:confirmation('.$sql_d[0].')")><img src=btn_no.gif border=0</a></td>';

echo '</tr>';

}

echo '</table>';

frontend.css

.filmTable{

border-collapse: collapse;

}

.filmTable th, .filmTable td{

border: 1px solid #b8cfd5;

padding: 6px;

}

.filmTable th{

background-color: #f1f5f8;

text-align: left;

}

.filmTable tr{

background-color: #FFFFFF;

}

.filmTable div {

padding: 2px 18px 0 8px;

height: 19px;

white-space: nowrap;

overflow: hidden;

}

and structure for table "test"

CREATE TABLE `test` (

`id_data` SMALLINT(6) NOT NULL AUTO_INCREMENT,

`test` VARCHAR(15) NOT NULL,

`tgl` DATETIME NOT NULL,

KEY `id_data` (`id_data`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Tutorial Teknologi dan Komputer

google3c8452e124cb77db

Selasa, 10 Mei 2016

Javascript

Algoritma

Senin, 09 Mei 2016

Migrate Oracle to PostgreSQL

Minggu, 08 Mei 2016

PHP

Help Desk Management

Senin, 02 Mei 2016

Prototype.js for Easier Ajax Development