javascript:
String to JSON/MAP (reference:http://jessewth.blogspot.com/2008/10/javascript-string-to-json.html)
string myJSONText = "{ /"name/", /"jessewang/", /"age/", /"18/"}";
var myObject = eval('(' + myJSONtext + ')');JSON/MAP to URI (reference:http://api.jquery.com/jQuery.param/)
$.param();
隨意寫了一個跟jquery及javascript有關的網頁程式碼
他是一個模擬表單發送及獲取回傳結果的程式
例如:
google.com搜尋引擎
我們可以直接從網址打上參數進行搜尋，
http://www.google.com.tw/search?q=欲搜尋文字
於是乎製作了一個網頁，讓使用者可以在網頁上輸入目的網址(ex:http://www.google.com.tw/search)以及參數項目(q=xxxxx)，
有些網頁要求的不只一個參數，所以使用者可以動態的增加/減少參數項目，
最後把回傳內容顯示出來。
程式:
由於程式碼中有用到jquery，所以要先加入jquery的library
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
先看html的部分，
<span onclick="javascript:form_send();">Submit</span> <span id="detials"></span><br />
<div id="form-header">
<input type="text" id="form_action" size="70" title="please input action uri" />
<select id="form_method">
<option value="0">POST</option>
<option value="1">GET</option>
</select>
<select id="data_type">
<option value="0">HTML</option>
<option value="1">TEXT</option>
<option value="2">SCRIPT</option>
<option value="3">JSON</option>
<option value="4">XML</option>
<option value="5">JSONP</option>
</select>
</div>
<span onclick="javascript:form_item();">add</span><br />
<div id="form-items"></div>
<div id="results"></div>
接著css的部分，
<style>
.btn {cursor: pointer; color: blue; padding: 2px; margin: 2px;}
.btn:hover {color: white; background: black;}
#detials {color: gray; font-size: 13px;}
</style>
最後是javascript的部分，(10 functions)
<script>
/***
* 待解決跨網域讀取出現錯誤的問題 ajax
*/
//main attibutes
var form_items, exist_items, form_dels;
var dataTypes = new Array("html", "text", "script", "json", "xml", "jsonp");
//initialize
function init() {
form_items = 0;
exist_items = 0;
form_dels = null;
form_dels = new Array();
}
//call form_item$()
function form_item() {
switch(arguments.length) {
case 1:
form_item2(arguments[0]);
break;
default:
form_item1();
}
}
//add form item function
function form_item1() {
exist_items++;
form_items++;
item_generate(form_items);
show_detial();
}
//delete form item function
function form_item2(item_id) {
exist_items--;
form_dels.push(item_id);
var del_id = '#form-item-' + item_id;
$(del_id).remove();
show_detial();
}
//generate form and get result
function form_send() {
//msg attibutes
var msg_err = "Sorry but there was an error: ";
//codes
// no items
if(exist_items < 1) {
alert('Sorry, there\'s no items.');
return -1;
}
// has items
var resultHeader = "<hr /><span onclick=\"javascript:clearResult();\" class=\"btn\" style=\"float:right;\">Clear</span>";
var form_action_val = $('#form_action').val();
var maps = eval('(' + maps_generate() + ')');
var method = ($('#form_method').val() == '0')? 'POST' : 'GET';
var datatype = $('#data_type').val();
$.ajax({
type: method,
url: form_action_val,
dataType: dataTypes[datatype],
data: $.param(maps),
success: function(response) {
$('#results').html(resultHeader + "<div>" + response + "</div>");
},
error: function(response) {
alert(response);
}
});
/**
$('#results').load(form_action_val, maps, function(response, response_status, xhr) {
if(response_status == "error") {
$(this).html(msg_err + xhr.status + " " + xhr.statusText);
} else {
$(this).html("<hr />" + response);
}
});
*/
}
function clearResult() {
$('#results > div').remove();
}
//generate vars
function maps_generate() {
var codes = "{ ";
var i;
for (i=0; i<exist_items; i++) {
if(search_dels_array(i, form_dels) < 0) {
codes += "'"+$('#form-item-'+i+'_name').val()+"': '"+$('#form-item-'+i+'_value').val()+"'";
}
if((i+1) < exist_items)
codes += ", ";
}
codes += " }";
return codes;
}
//search deleted array
function search_dels_array(item_id, array) {
var dels_len = array.length;
var k;
if(dels_len == 0)
return -1;
for (k=0; k<dels_len; k++) {
if(item_id == form_dels[k]) {
array.shift();
return 1;
}
}
return -1;
}
//generate form item
function item_generate(item_id) {
//items html attibutes
var div_id = "form-item-"+item_id;
var name_id = "form-item-"+item_id+"_name";
var name_class = "form-item_name";
var name_size = "20";
var name_title = "please input item name";
var value_id = "form-item-"+item_id+"_value";
var value_class = "form-item_value";
var value_size = "50";
var value_title = "please input item value";
var btn_click_func = "form_item("+item_id+")";
var btn_onclick="javascript:"+btn_click_func+";";
var btn_class = "btn";
var btn_val = "delete";
//generated code
var codes = "<div id=\""+div_id+"\">\n\t<input type=\"text\" id=\""+name_id+"\" class=\""+name_class+"\" size=\""+name_size+"\" title=\""+name_title+"\" />\n\t<input type=\"text\" id=\""+value_id+"\" class=\""+value_class+"\" size=\""+value_size+"\" title=\""+value_title+"\" />\n\t<span onclick=\""+btn_onclick+"\" class=\""+btn_class+"\">"+btn_val+"</span> item "+(item_id+1)+"</div>";
$('#form-items').append(codes);
}
//show detial about 'how many added or exist items?' or 'who's be deleted?'...
function show_detial() {
form_dels.sort();
$('#detials').html('added <b>'+(form_items+1)+'</b> items; be deleted array: <b>'+form_dels.toString()+'</b>; exist <b>'+exist_items+'</b> items');
}
$(document).ready(function() {
//TO DO
init();
exist_items++;
item_generate(form_items);
show_detial();
});
</script>
As title.
[color]
blue: shell bash instruction
green: instruction's parameters
gray: required value
purple: custom value
my steps:
1. download phpmyadmin-3.3.8.1-all-languages.tar.gz
> wget http://downloads.sourceforge.net/project/phpmyadmin/phpMyAdmin/3.3.8.1/phpMyAdmin-3.3.8.1-all-languages.tar.gz?r=http%3A%2F%2Fwww.phpmyadmin.net%2Fhome_page%2Fdownloads.php&ts=1291266404&use_mirror=nchc
2. uncompress phpmyadmin-3.3.8.1-all-languages.tar.gz
> tar zxf phpmyadmin-3.3.8.1-all-languages.tar.gz
3. (not requirment) copy phpMyAdmin-3.3.8.1-all-languages to another place
> cp -r phpMyAdmin-3.3.8.1-all-languages/* /var/www/phpmyadmin
4. (not requirment) edit httpd configure or .htaccess
> vim /etc/httpd/conf/httpd.conf
at the bottom, add the following:
> alias /phpmyadmin '/var/www/phpmyadmin'
5. copy config.sample.inc.php to config.inc.php
> cd /var/www/phpmyadmin
> cp config.sample.inc.php config.inc.php
6. edit config.inc.php
reference: http://goo.gl/SDSgf
> vim config.inc.php
find $cfg['blowfish_secret'] = ''; /* YOU MUST FILL IN THIS FOR COOKIE AUTH! */, and modify it
> $cfg['blowfish_secret'] = 'mycustomvalue';
find /* Advanced phpMyAdmin features */, and uncomment the following:
> $cfg['Servers'][$i]['pmadb'] = 'phpmyadmin';
> $cfg['Servers'][$i]['bookmarktable'] = 'pma_bookmark';
> $cfg['Servers'][$i]['relation'] = 'pma_relation';
> $cfg['Servers'][$i]['table_info'] = 'pma_table_info';
> $cfg['Servers'][$i]['table_coords'] = 'pma_table_coords';
> $cfg['Servers'][$i]['pdf_pages'] = 'pma_pdf_pages';
> $cfg['Servers'][$i]['column_info'] = 'pma_column_info';
> $cfg['Servers'][$i]['history'] = 'pma_history';
> $cfg['Servers'][$i]['tracking'] = 'pma_tracking';
> $cfg['Servers'][$i]['designer_coords'] = 'pma_designer_coords';
7. import phpmyadmin database
reference: http://myandroid.tw/topic-274-0.htm
> mysql -u root -p your-root-password < /var/www/phpmyadmin/scripts/create_tables.sql
8. finish~~php requirment: php-mcrypt
Requirement PHP Modules: php-mysql, php-mcrypt, php-mbstring
