Archive

Archive for January, 2009

PHP инсталл хийх тухай

January 30th, 2009 24 comments

1. http://www.php.net/downloads.php хуудаснаас PHP 5.2.8 installer -ийг татаж авна.
2. Татаж авсан инсталлаа ажиллуулна. Destination folder гэсэн цонхны (зураг 1) Install PHP 5.2.8 to: гэдэг дээр C:\Program Files\PHP\ гэдгийн оронд C:\PHP гэж үүсгээд түүнийгээ зааж өгвөл зүгээр. Учир нь Apache-д хийдэг тохируулга нь PHP -ийн install.txt дотор c:\php гэсэн фолдерт байхаар байдаг тул анх суулгаж байгаа сурч байгаа хүмүүст амар байдаг.

Үүний дараа Apache -ийн httpd.conf файлын зам асуусан бас нэг цонх гарна түүн дээр бол httpd.conf -Ий байрлалыг зааж өгөөд байх хэрэггүй. PHP -installer өөрөө тохируулгаа хийхийн тулд энэ замыг асууж байгаа хэрэг. Харин бид нар өөрсдөө түүнийг нь хийнэ.

Дараагийн нэг цонх бол (зураг 2) ямар веб сервер дээр суухыг асуусан цонх бий. Apache суулгачихсан тэгээд гараар тохируулга хийх гэж байгаа үед энэ бол нэг их чухал зүйл биш. Эндээс Apache 2.2.x module гэдгийг сонгоно. Ер нь бид цаашдаа php-ийг module хэлбэрээр ашиглах юм. Модуль ба CGI -ийн ялгааны талаар дараа жич бичие.

Үүний дараагийн харин нэг чухал цонх бол (зураг 3) PHP -ийн нэмэлт сангуудыг сонгох хэсэг бий. PHP 5-аас эхлэн mysql үндсэн санд байдаггүй болсон тул ядаж mysql, mssql, GD2 энэ тэрийг сонгох шаардлагатай юм.

Ингээд л next next finish гээд дуусгана.

3. Одоо тохиргоо хийе.

PHP ээ суулгасан c:\PHP folder дотор байгаа install.txt файлын Apache 2.0.x on Microsoft Windows доторхи Installing as an Apache module гэсэн хэсгээс доорхи кодыг хуулж авна.

 
# For PHP 5 do something like this:
LoadModule php5_module "c:/php/php5apache2.dll"
AddType application/x-httpd-php .php

# configure the path to php.ini
PHPIniDir "C:/php"

Дээрхи тохируулгын бичлэгт байгаа c:/php/php5apache2.dll -ийг энэ замаар яг ийм нэртэй файл байгаа эсхийг сайтар нягтлана. Ихэвчлэн php5apache2_2.dll гэсэн нэртэй байдаг учир дээрхи тохиргоог доорхи байдлаар хийнэ.

 
# For PHP 5 do something like this:
LoadModule php5_module "c:/php/php5apache2_2.dll"
AddType application/x-httpd-php .php

# configure the path to php.ini
PHPIniDir "C:/php"

Энэ тохиргоог apache -ийн тохируулгын файл болох httpd.conf -ийн хамгийн дор хуулна. Энэ файлруу Start->Apache HTTP Server 2.2->Configure Apache Server->Edit the Apache httpd.conf Configuration File гэж орно.

Үүний дараа apache серверээ рестарт хийнэ. Ингээд вебийнхээ роот фолдерт ямар нэг php өргөтгөлтэй файл үүсгэнэ PHP -ээ ажиллаж байгаа эсхийг шалгана. Жишээ нь info.php гэсэн файлд доорхи байдалтай код бичиж болох юм.

< ?php 
phpinfo();
?>

Үүнийгээ http://localhost/info.php гэж дуудахад PHP -ийн тухай нилээд том хүснэгтэн мэдээлэл гарч байвал чиний Apache, PHP зүгээр ажиллаж байгаа гэсэн үг юм.

Анх сурч байгаа хүмүүс янз бүрийн алдаа гаргадаг бөгөөд тэр алдаа нь харагдахгүй бол юу болоод байгаагаа мэддэггүй иймд PHP -ийн INI файлд дефаулт нь off байдаг алдааны мэдээлэл харуулах тохируулгыг on болгож өгвөл зүгээр. Үүний тулд c:\php\php.ini файлыг нээж display_errors = Off гэдгийг display_errors = On болгоно. Үүнийгээ идэвхжүүлэхийн тулд апачаа дахин рестарт хийнэ.

Эдгээр зүйлүүдийг алхам алхмаар бичсэн Нарангийн инсталл хийх зааврыг энд дарж татаж авна уу. Дэлгэрэнгүй заавар хийж илгээсэнд Наранд маш их баярлалаа.

Зураг 1

Зураг 1


Зураг 2

Зураг 2


Зураг 3

Зураг 3

Categories: Apache, PHP/MySql, Бусад Tags: , ,

AJAX-ийг өөрөө бий болгож ашиглах нь

January 29th, 2009 5 comments

Өмнөх бичлэгт дурдсаны дагуу JS дээр өөрөө AJAX бий болгон ашиглах талаар бичье. Харин дараа нь яг энэ жишээгээ JS -ийн янз бүрийн framework-үүд дээр хэрэгжүүлэийг авч үзнэ. Энэ жишээг арай сoнирхолтой болгох зорилгоор өөрийн ордоо сонгоход тухайн ордын зурхай гардаг байх тийм юм хийлээ. Жишээ хэд хэдэн файлуудаас бүрдэнэ.

zurhai.html Үндсэн веб хуудас.
ajax.js AJAX бий болгож байгаа JS код.
ajax_zurhai.php Хэрэглэгчийн сонгосон ордоос хамааран тухайн ордын мэдээллийг клиентрүү илгээх php code. Энэ кодыг JS дотороос AJAX ашиглан дуудаж байгаа болно.
images/indicator.gif Дуудагдах үед харагдах анимац.
html Энэ фолдерт ордны тухай зурхайн мэдээллүүд html файлаар хадгалагдаж байна.

Ингээд эхнээс тайлбарлая. HTML, JS мэддэг бол ойлгомжтой байна. Харин эдгээрийг мэдэхгүй бол эхлээд энэ талаар ойлголттой болох шаардлагатай юм.

1. zurhai.html

1.1 Энэ html дотор хамгийн гол нь орд сонгох селект байна. Селектийн onchange event дээр бичигдсэн “getZurhai(this.id)” бол ордоо сонгох үед дуудагдах JS функц. this.id гэсэн параметр нь энэ селектийн id. Манай жишээний хувьд zurhai гэж байна. Өөрөөр хэлбэл энэ жишээний хувьд getZurhai(this.id) ba getZurhai(“zurhai”) энэ 2 адил юм.

1.2 <div id=”medeelel_haruulah_div”></div> Энэ бол сонгогдсон ордны зурхайн мэдээллийг харуулах div юм. Веб хуудсыг тэр чигээр нь рефреш хийхгүйгээр сонгогдсон ордны мэдээллийг энэ дотор дуудаад үзүүлчихнэ гэсэн үг. Иймд цаашид яаж ингэж харуулахыг л тайлбарлах тул энэ div -ийн ID -ийг хараад аваарай.

2. ajax.js AJAX техникийг маань бий болгож байгаа JS код. Энэ доторхи хамгийн гол зүйлүүд бий.

2.1 getZurhai(ord_id) функц.

Энэ функц zurhai.html дотор байх селектийн Onchange дээр дуудагдаж байгаагийн хувьд эндээс бүх зүйл эхлэж байна. Параметр нь нөгөө селектийн ID.

function getZurhai(ord_id)
{
var ord=document.getElementById(ord_id).value; // ямар орд сонгогдсоныг авч байна.
xmlHttp=GetXmlHttpObject(); // xmlHttp глобаль зарлагдсан хувьсагч.
 if (xmlHttp==null)  {
alert ("Таны web browser AJAX-ийг дэмжихгүй байна.");
return;
} 
 
var url="ajax_zurhai.php";
url=url+"?ord="+ord;
 
xmlHttp.onreadystatechange=ZurhainMedeelelHaruulah;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
 
}

Дээрх жишээнд байгаа  xmlHttp.onreadystatechange=ZurhainMedeelelHaruulah; гэсэн энэ бичиглэл бол миний өмнөх бичлэг дэхь

xmlHttp.onreadystatechange=function()
{
// Энд үр дүнг боловсруулах функцийн бие бичигдэнэ
}

Энэ хэлбэрийг арай өөрөөр бичсэн байдал. Өөрөөр хэлбэл onreadystatechange гэсэн функцын заагчид ZurhainMedeelelHaruulah гэсэн функцыг олгосон байна. Энэ нь визуаль програмчлал талаас нь хэлбэл эвэнтэд хэрэглэгчийн функц зааж өгсөн байна. Энэ функцийн гол зүйл нь xmlHttp -ийн төлөвийг шалгаад хэрвээ 4 гэсэн утга авсан байвал серверээс мэдээлэл бүрэн татагдаад ирсэн гэж үзээд xmlHttp.responseText -ийг medeelel_haruulah_div гэсэн ID бүхий DIV-д олгож байна. Энэ үйлдлийг document.getElementById(“medeelel_haruulah_div”).innerHTML ашиглан хийсэн байна. document.getElementById болон түүний innerHTML проперти нь HTML DOM -ийн хамгийн өргөн хэрэглэгддэг зүйлүүд юм.

document.getElementById(“medeelel_haruulah_div”).innerHTML=” түр хүлээнэ үү. “; мөр бол түр хүлээнэ үү гэсэн үгийн хамт эргэлдэж байгаа анимацийг харуулж байна.

function ZurhainMedeelelHaruulah() 
{ 
	if (xmlHttp.readyState==4) { 
		document.getElementById("medeelel_haruulah_div").innerHTML=xmlHttp.responseText;
	}
	if (xmlHttp.readyState==1) {
		document.getElementById("medeelel_haruulah_div").innerHTML="<img src='images/indicator.gif' align='absmiddle'/> түр хүлээнэ үү. ";
	}
	if (xmlHttp.readyState==2) {
		document.getElementById("medeelel_haruulah_div").innerHTML="2 Posting";
	}
	if (xmlHttp.readyState==3) {
		document.getElementById("medeelel_haruulah_div").innerHTML="<img src='images/indicator.gif' align='absmiddle'/> Бичиж байна. ";
	}	
 
}

2.2 xmlHttp=GetXmlHttpObject();  xmlHttp -д XMLHttpRequest –обьектыг бий болгож байгаа хэрэглэгчийн функц.

function GetXmlHttpObject()
{
var xmlHttp=null;
 
	try   {
	  // Firefox, Opera 8.0+, Safari, IE7.0
		xmlHttp=new XMLHttpRequest();
	}
		catch (e)  {
		  // Internet Explorer
		try {
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // IE 6.0+ bol
		}
		catch (e)     {
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); // IE 5.5+ bol
		}
	}
return xmlHttp;
}

3. ajax_zurhai.php Энэ хэрэглэгчийн сонгосон зурхай мэдээллийг клиентэд илгээх зориулалт бүхий хялбар php code юм. Сервер дээр ажиллаж байна. Гаднаас буюу хэрэглэгчийн сонгосон ордыг GET ээр барьж аван түүнд тохирох мэдээллийг файлаас уншин буцааж байна. Буцаах үйлдэл нь дэлгэцэнд хэвлэх echo -оор хийгдэж байна.

< ?php
$ord=$_GET['ord'];
 
echo  FromFile('html/'.$ord.'.html');
 
function FromFile($filename) {
	$fd = fopen ($filename, "r");
	$contents = fread ($fd, filesize ($filename));
	fclose ($fd);
	return $contents;
}
?>

Ажиллуулж үзэх | Энэ жишээг татаж авах

Жич: Web site хийдэг JS болон PHP -ийн дундаж мэдлэгтэй хүмүүст илүү ойлгомжтой байх болно. Харин ойлгохгүй байгаа хүмүүс асуух юмаа комментээр үлдэнэ үү. Жишээ ажиллахад Web server, PHP байх шаардлагтай. Эдгээрийг суулгах талаар энэ блог дээрээс үзнэ үү. FF 3.05, IE 7.0 дээр тестлэв.

Categories: AJAX, Javascript, PHP/MySql Tags: ,

Apache веб сервер суулгах, тохируулах

January 26th, 2009 8 comments

Веб програмчлал эхлэн суралцах гэж байгаа залуучдын хамгийн анхны хийж сурах зүйл бол веб серверээ суулгах явдал юм. Windows XP, Windows 2003 server дээр Apache суулгах бас жаахан тохируулга хийх талаар товч тайлбарлая.

Юны түрүүнд веб сервер гэж юу болох талаар товч тайлбарлая. Веб сайтууд нь бүгд интернетийн ямар нэг сервер компьютер дээр байрлаж байна. Хүмүүс веб сайтын хаягийг өөрийн веб браузер дээр бичээд ентер дарахад уг веб сайтыг үзэх хүсэлтийг (http request) интернетийн холболтоороо дамжуулан уг вебийг байрлуулж байгаа серверт хүргэнэ. Уг сервер дээр саяны хүсэлтийг боловсруулах зориулалттай сервер програм хангамж ажиллаж байх бөгөөд түүнийг веб сервер гэнэ. Одоо бидний суулгах гэж байгаа Apache бол веб сервер юм. Веб сервер хэрэглэгчийн үзэх мэдээллийг сервер дээрээ боловсруулалт хийн тухайн хэрэглэгчийн үзэхийг хүссэн мэдээллийг бүрдүүлнэ. Боловсруулалтыг веб сервер өөрөө дангаараа хийгээд байхгүй харин боловсруулалт хийх сервер талын хэлний ажиллах орчин нь болж өгдөг. Жишээ нь PHP бол сервер талд ажилладаг веб програмчлалын хэл юм. Мэдээлэл нь өгөгдлийн санд хадгалагдсан байвал мөн өгөгдлийн санд холбогдож мэдээллээ авна. Энэ өгөгдлийн сан нь MySQL байж болох юм. Боловсруулалт хийгдсэн мэдээллийг хэрэглэгчид HTML (CSS, JS -тай) хэлбэрээр веб сервер буцаана. Үүнийг нь ерөнхийд нь response гэнэ. Иймэрхүү загвараар л дэлхий дээрхи бүх веб сайт ажиллаж байдаг. Харин веб сервер, сервер талын хэл, өгөгдлийн сан удирдах хэрэгслүүд нь өөр өөр байдаг. Бид нарийн хувьд веб серверээрээ Apache, сервер талын хэлээрээ PHP, өгөгдлийн сангаараа mySQL -ийг сонгон ашиглана. Энэ 3 бол хоорондоо маш нийцтэй ажилладаг ба веб програмчлал сурч байгаа хүмүүс үзэхэд тохиромжтой байдаг.
webserverl

1. Apache суулгах
http://www.apache.org/dist/httpd/binaries/win32/ Энэ хаягаар ороод апачийн хамгийн сүүлийн үеийн Windows installer MSI Installer Package хэлбэрээр татаж авна. Татаж авсан install-аа ажиллуулан суулгана. Ерөнхийдээ энгийн програм суулгаж байгаа мэт байна. Харин ганц 2 цонхон дээр тохируулга хийнэ. Доорхи цонхон дээр байгаа байдлаар бичиж өгнө. Apache 1

ерөнхийдөө ингээд next next finish. Анхаарах зүйл! Apache инсталл хийгээд дууссны дараа өөрийн сервисээ ачаалах үед виндовс блоклох уу гэж асууна энэ үед мэдээж unblock гэж сонгоно.

2. Ажиллаж байгаа эсэхийг шалгаж үзэх.
Юны түрүүнд виндовсийн цагны хажууд индаинуудын өдны зураг бүхий ажиллаж байгаа итгэх ногоон сумтай айкон гарсан байх ёстой. (Ер нь apache гэдэг бол америкийн индиануудын нэг том овог юм.) Хэрвээ тийм байвал Firefox-oo (FF -ийг хэрэглэцгээе) гаргаж ирээд хаяг бичдэг хэсэг дээр нь http://localhost гэж бичээд дарвал It’s worked гэсэн бичиг гарч байвал инсталл амжилттай боллоо гэсэн үг. Апачийн хуучин хувилбарууд бол мөн л нөгөө лого бүхий нэг хуудас харуулна.

3. Аpache дефаултаараа C:\Program Files\Apache Software Foundation\Apache2.2 фолдерт суусан байдаг. Энэ фолдерт htdocs гэсэн нэртэй фолдер байх бөгөөд энэ бол чиний суулгасан веб серверийн root юм. өөрөөр хэлбэл энэ фолдерт чиний хийж байгаа веб сайтууд байрлах ёстой гэсэн үг. Түрүүний http://localhost гэхэд энэ фолдер луу хандаад уг фолдерт байгаа index хуудсныг нээсэн гэсэн үг. Тэгэхээр энэ фолдерт шинээр нэг веб сайт хийхийн тулд нэг фолдер үүсгээд түүндээ веб сайтын файлуудаа хуулна. Тэгээд http://localhost/mywebsitefolder гэж хандахад чиний веб дуудагдаж гарч ирэх болно. Ингээд чиний компютер веб сервер хэлбэрээр ажиллаж эхлэлээ.

4. Ингээд суулгасны дараа одоо бага сага тохиргоо хийе. Веб хийж байхад htdocs фолдер C:\Program Files\Apache Software Foundation\Apache2.2 гэх мэт олон фолдерийн цаана байх нь хүндрэлтэй байдаг. Гэвч үүнийг сольж болно. Солихын тулд C:\Program Files\Apache Software Foundation\Apache2.2\conf доторхи httpd.conf файлыг нээнэ. Энэ дотороос DocumentRoot “C:\Program Files\Apache Software Foundation\Apache2.2\htdocs” гэсэн мөрийг хайж олоод өөрийн шинээр сонгосон фолдероо зааж өгнө. Жишээ нь DocumentRoot “C:\webserver\htdocs” гэх мэт. Энэ бичлэгийн доохно талд байгаа гэдэг дээр мөн адил сольж өгнө. Эдгээрийн нарийн ширийн учир начрыг цаг нь болохоор ойлгодог болноо.

Мөн үүний доохни байх DirectoryIndex index.html гэсэн мөрийг DirectoryIndex index.php index.html болгож өөрчлөнө. Энэ нь чиний хийж байгаа вебийн дефаулт хуудас нь index.php эсвэл index.html байх юмаа гэдэгийг зааж өгч байгаа юм.

Эдгээр өөрчлөлтүүдийг хийсний дараа идэвхжүүлэхийн тулд цагны хажууд байх нөгөө айкон дээрээ double клик хийж гарч ирсэн цонхон дээрхи рестарт товчийг дарна. Ер нь цаашид Apache -аас өөрөөс нь гадна PHP -ийн тохиргоонд өөрчлөлт ороход энэ үйлдлийг хийдэг байна.

Маргааш PHP суулгахыг бичие.

Жич: Энд ашигласан фолдеруудын нэр болон тохируулга миний компьютерт ажиллаж байгаа Apache 2.2.8 гэсэн хувилбарынх болно.

Categories: Apache, HTML, PHP/MySql Tags: ,

Ajax-ийг хэрхэн хэрэгжүүлэх вэ?

January 12th, 2009 6 comments

AJAX -ийг яаж веб хуудсандаа хэрэглэх талаар энд тайлбарлая. Өмнөх бичлэгт үүх түүх, давуу сул тал гэх мэт ерөнхий мэдээлэл багтсан бол одоо харин жаахан дэлгэрүүлнэ. AJAX -ийг ашиглах гэж байгаа бол  юуны түрүүнд вебийн ерөнхий ажиллагааны зарчмыг мэддэг байх хэрэгтэй юм. Бүх веб сайтууд интернетийн серверт байрлаж байх бөгөөд хэрэглэгчид түүнд холбогдон веб сайтуудыг үздэг. Ингэхээр сервер тал хэрэглэгч буюу клиент тал гэсэн 2 хэсэгт хуваагдаж байна. Веб програмчлалын хэлнүүд яг энэ 2 талд хуваагддаг. Жишээ нь Javascript бол серверээс код хэлбэрээр HTML -ийн хамт дуудагдан ирээд хэрэглэгчийн веб броузер дээр ажиллан үр дүнгээ харуулдаг тул клиент талын хэл болж байна. Харин PHP бол клиентын илгээсэн хүсэлтийн дагуу ажиллаад HTML хуудсыг бэлтгэн гаргаж байдаг сервер талын хэл юм.

Ер нь бол хэрэглэгч веб броузер дээрээ ямар нэг веб сайтын хаяг бичээд түүнийг дуудах үйлдэл нь уг веб сайтыг байрлуулж байгаа серверт түүнийг үзэх хүсэлт буюу request илгээж байгаа хэрэг юм. Веб хуудсны бусад линкнүүд дээр дарах, хайлт хийх гэх мэт бүхий л үйлдлийг веб сервер хүсэлт буюу request гэж хүлээж авна. Энэ хүсэлтийн дагуу уг веб сервер (apache, IIS гэх мэт) хэрэглэгчидэд хүссэн үр дүнг буюу response-ийг буцааж байдаг. Энэ reponse нь ихэвчлэн бараг бүгд HTML форматаар хэрэглэгчид очдог. Хэрэглэгчийн броузер түүнийг нь танд веб хуудас болгон харуулдаг байна. Энэ бүх процесст веб хуудас бүхлээрээ дахин дуудагдаж ачаалагдаж (reload) байдаг.

Харин AJAX бол энэ бүхэл хуудасыг дахин дуудахгүйгээр зөвхөн шаардлагатай хэсэг дээр серверээс мэдээлэл аван тэр хэсгийн мэдэллийг шинэчлэх боломжийг бий болгоно. Өөрөөр хэлбэл веб хуудасны нэг хэсэг бие даан веб серверт холбогдон өөртөө хэрэгтэй мэдээллийг харуулах боломжтой болж байгаа хэрэг. Чухамхүү энэ л боломж веб програмистуудад олон сайхан боломжийг нээж өгж байгаа билээ. Жишээ нь хэрэглэгч бүртгэх үед хэрэглэгч сонгосон логин нэрээ бичээд дуусахад уг нэрийг нь серверт илгээн авч болох эсэхийг уг хуудсийг тэр чигээр нь пост хийхээс өмнө мэдэгдэх, зургийн галлери дээр зөвхөн хэрэглэгчийн сонгосон зургийг томоор харуулах гэх мэт маш олон зүйлд хэрэглэж болж байна. Ингэснээрээ л веб сайтыг десктоп програм шиг ажиллах боломжийг бүрдүүлж байгаа юм. Асинхрон гээд байгаагийн учир ч эндээс гарна. Хэрэглэгч уг веб дээр  юм хийж байхад уг хийж байгаа зүйлийг серверт илгээн боловсруулалт хийж л байдаг мөн өөр хэсгүүдийн мэдээллийг өөрчилж байдаг нь байдаг нь асинхрон процесс юм.

Ингээд веб хөгжүүлэлтэнд гарч ирсэн энэ техникийг яаж хэрэгжүүлэх талаар бичие. Жишээ нь веб хуудасны нэг товчин дээр дарахад уг хуудсны нэг хэсэгт (веб хуудас тэр чигээрээ дуудагдаж биш) шинэ мэдээлэл гарч ирдэг байна гэвэл.

1. Клиент талын HTML байна. Үүн дээр хэрэглэгч ажиллана. Нэг товч байна. Түүнтэй хамт мэдээллийг харуулахад зориулсан нэг DIV байгаа гэж үзье.

2. Товчны onclick event дээр JS хэрэглэгчийн функц дуудагдаж байна. Энэ функц нь AJAX-ийг бий болгон хүсэлтийг серверт илгээн үр дүнг DIV харуулах гол функц юм.

3. Сервер талд ямар нэг сервер талын хэл ажиллаж байх бөгөөд 2 дахь алхамд байгаа JS функцээр дуудагдаж үр дүнгээ (response) буцаана.

4. Буцаж ирсэн үр дүн DIV-д харагдана.

Энэ үйлдлүүдийг гүйцэтгэхэд веб хуудас бүхлээрээ дахин дуудагдахгүй бөгөөд зөвхөн манай жишээн дээр гарсан DIV -ийн л агуулга өөрчлөгх болно. Эдгээр зүйлийг бий болгож байгаа JS -ийн боломжуудын талаар авч үзье.

JS дээр AJAX дээр бий болгох нь

XMLHttpRequest Обьект

Чухамхүү JS -ийн энэ обьект л AJAX-ийг бий болгож хэрэгжүүлж байна. Энэ обьект нь сүүлийн үеийн броузерууд дээр  xmlHttp=new XMLHttpRequest(); гэж бий болох боловч IE ийн хуучин хувилбарууд дээр xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);  xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”); гэх мэтээр үүснэ. Энэ бичиглэлийн new гэдэг оператораар xmlHttp-д шинэ обьект үүсгэж байгааг та бүхэн төвөггүй ойлгож байгаа гэж найдаж байна.

Энэ обьект нь open,send гэсэн 2 чухал method-той. Жишээ нь

xmlHttp.open("GET","ajax_response.php?cid=1",true);
xmlHttp.send(null);

open нь сервер дээр байгаа ajax_response.php -ийг GET ээр дуудаж байгаад send нь серверт илгээж байна.Энэ бол клиент дээрээс серверт хүсэлт илгээж байгаа үйлдэл болно.

Харин серверээс ajax_response.php ажиллаад гарсан үр дүнг барьж авахын тулд XMLHttpRequest-ийн onreadystatechange -property-ийг ашиглана. Энэ маш ач холбогдолтой property. Энэ property серверээс ирэх хариулт буюу response-ийг боловсруулах функцийг агуулж байна. Дээрхи 2 метод дуудагдах үед автоматаар дуудагна. Бичигдэх хэлбэр нь

xmlHttp.onreadystatechange=function()
{
// Энд үр дүнг боловсруулах функцийн бие бичигдэнэ
}

onreadystatechange -ийн функц дотор хэрэглэгдэх XMLHttpRequest -ийн 2 проперти бол readyState, responseText 2 юм.

readyState – нь сервер илгээсэн хүсэлтийн төлөвийг тодорхойлж байдаг.

readyStateд оорхи утгуудыг авна.

Утга Тайлбар
0 Хүсэлт илгээгдээгүй
1 Хүсэлт илгээгдэж байна
2 Хүсэлт илгээгдсэн
3 Хүсэлтийг сервер боловсрууж байна.
4 Хүсэлт биелэсэн

responseText нь серверээс буцаж ирсэн мэдээллийг текст форматаар агуулж байдаг.

xmlHttp.onreadystatechange=function()
{
       if (xmlHttp.readyState==4) {
		document.getElementById("medeelel_haruulah_div").innerHTML=xmlHttp.responseText;
	}
}

Дээрхи жишээнд хэрвээ хүсэлт биелэгдсэн бол серверээс буцаж ирсэн үр дүнг medeelel_haruulah_div гэсэн ID -тай DIV -д харуулж байна. onreadystatechange -ийг дараах хэлбэрээр бичиж болно.

xmlHttp.onreadystatechange=ZurhainMedeelelHaruulah;

function ZurhainMedeelelHaruulah()
{

if (xmlHttp.readyState==4) {
   document.getElementById("medeelel_haruulah_div").innerHTML=xmlHttp.responseText;
}

}

onreadystatechange event бөгөөд обьект хандалтад visual програмчлалын хэлнүүдэд шинээр обьект runtime үүсгээд event-үүдийг тодорхойлж өгж байгаа мэт байна.

Сервер талын ажиллагаа

Сервер талд манай жишээний хувьд ajax_response.php ажиллаж байна. Энэ хуудсанд клиентээс  хувьсагчууд(URL Query) дамжиж ирж байх бөгөөд тэдгээрийн утгаар ямар үр дүн буцаахыг тодорхойлно. Энэ нь сервер дээр ажиллаж байх тул өгөгдлийн санруу холбогдох статик хуудас унших, ямар нэг файлаас мэдээллээ авах гэх мэт олон боломжууд нээлттэй байна. Энэ бүхий үр дүн ямар нэгэн утга буцаадаг байна. Энэ клиент дээр reponse болон очно.

<?php

$cid=$_GET[‘cid’];

if ($cid==1) echo ‘ 1-d tohiroh utga ‘;
else echo ‘ 1 ees uur yamar negen utga ‘;

?>

Иймэрхүү логиктой юм сервер дээр байх юм.

Ерөнхийдөө AJAX ийм зарчмаар ажилладаг. Мэдээж энэ бол хамгийн энгийн ажиллах зарчим боловч ихэнх нь иймэрхүү төвшинд л хэрэглэсэн байдаг. Тун удахгүй live жишээ байрлуулах болно.

Ajax-ийн тухай товчхон

January 9th, 2009 7 comments

AJAX бол Asynchronous JavaScript and XML гэсэн үгийн товчлол юм. Веб хуудасны ямар нэг хэсэгт сервэрээс ямар нэг хуудасыг асинхрон дуудаж харуулах боломжийг бүрдүүлсэн техник юм. Одоогоор энэ нь вебийн хөгжүүлэлтийн хамгийн сүүлийн үеийн технологид тооцогдогдож байна.Үүнийг ашигласнаар интерактив веб програм хангамжууд мөн бидний ашигладаг десктоп програм шиг веб програм (Rich Internet Application) хийх боломжийг бүрдүүлж байна. Түүхийн хувьд 2005 онд google өөрийн хайлтын системд suggest (санал болгох- нэг үг бичихэд түүнтэй холбоотой үгнүүд гарах) системдээ анх хэрэглэсэн гэж үздэг боловч бүүр 90-ээд оны дундуур веб хуудас дуудагдсны дараа дахин өөр мэдээлэл серверт илгээх, үр дүн буцааж авдаг зүйлийг java хийсэн байдаг бөгөөд энэ нь java applet юм. 1996 онд Микрософт IFRAME -ийг анх HTML -д оруулж ирсэн нь мөн веб хуудасны тодорхой хэсэгт өөр веб хуудас дуудагдаж гарч ирэх боломжтойг харуулсан зүйл болжээ. 1999 он мөн Микрософт XMLHttpRequest гэх одоо AJAX-ийг бий болгож буй гол обьектийг IE 5.0 -д ActiveX хэлбэрээр ажилладагаар бий болгосон байна. Үүний дараа Mozilla болон бусад веб броузер хөгжүүлэгчид энэ обьектийг бий болгосон хэдийн боловч W3C  дөнгөж саяхан 2006 онд өөрийн албан ёсний стандарт болгох гэж анхны драфт стандартыг гаргасан байх юм.

Өнөөдөр энэ технолгод ашиглагдаж байгаа зүйлүүд

  • XHTML, CSS – мэдээллийг гаргаж харуулахад үндсэн суурь
  • Document Object Model (DOM ) – Мэдээллийг динамикаар эсвэл янз бүрийн байдлаар харуулах боломж бүрдүүлэх
  • XML and XSLT сервер ба клиентийн хооронд мэдээлэл дамжуулах
  • XMLHttpRequest – асинхрон холболт бий болгох
  • Javascrit – дээрхи бүх зүйлийг хооронд холбож ажиллуулах програмчлалын орчин болж өгч байна.
Уламжлалт  ба AJAX ашигласан веб програм хангамжуудын ажиллагааны зарчим

Уламжлалт ба AJAX ашигласан веб програм хангамжуудын ажиллагааны зарчим

Веб сайт бүр заавал AJAX хэрэглэх ёстой юу?

Миний хувьд хариулт бол ҮГҮЙ. AJAX өөрийн гэсэн давуу ба сул талуудтай.

Давуу талууд

  • Веб хуудсанд янз бүрийн агуулгыг ер нь л агуулгыг өөр өөр эх үүсвэрээс нэгтгэн дуудаж харуулах. Зөвхөн шаардлагатай  мэдээллийг харуулах боломжтой. Ингэснээрээ веб сайтыг дахин дахин релоад хийхгүй байх, цаашлаад bandwidth -ийг хэмнэх гэх давуу талуудтай
  • Веб хуудсыг маш интерактив болгох. Хэрэглэгчийн оруулсан мэдээллийг шууд серверт илгээн шалгах гэх мэт
  • Веб серверийн ачааллыг багасгана. JS болон CSS үүд нь нэг удаа дуудагдаад л харин агуулга бүхий хэсэг нь солигдоод байх боломжтой.

Сул талууд

  • Веб броузерын history-д бүртгэхдэхгүй учир буцах товч ажиллахгүй. Энэ асуудлыг нэмэлт юм хийж байж шийддэг.
  • Боокмарк хийж чадахгүй. Тухайн хуудас дуудагдсны дараа агуулга нь солигдоод гараад ирэх боломжтой тэр солигдсон мэдээлэл бүхий хуудсыг хэрэглэгч боокмарй хийж чадахгүй.
  • Хайлтын системүүд бүртгэж чадахгүй. Ихэнх хайлтын системүүд JS -ийг ажилуулж үр дүнг нь бүртгэдэггүй. Гэтэл AJAX хуудас JS -ээр дуудагдаж гарч ирдэг.
  • Зарим хэрэглэгчийн компьютер JS ажиллахыг хаасан байдаг. Энэ тохиолдолд ажиллаж чадахгүй.

гэх мэт.

Би дараагийн хэсэгт JS дээр өөрөө AJAX үүсгэх мөн хамгийн өргөн хэрэглэгдэж байгаа Prototype JS framework дээр AJAX -ийг яаж хэрэгжүүлэхийг маш ойлгомжтой жишээн дээр тайлбарлана. Миний жишээнүүд энэ веб дээрээ шууд ажилладаг байхаар хийгдэх болно.

Categories: AJAX, Javascript Tags: , ,

WordPress үнэхээр гоё юмаа

January 4th, 2009 14 comments

WordPress үнэхээр гоё юмаа. Яалангуяа сүүлийн хувилбар болох 2.7 нь. Минии энэ блог маань сүүлийн 2.7. WordPress-ийг олон сайхан plugin -үүд нь улам хүчирхэг болгож байна. Би топ хэдэн plugin -ийг нь туршиж үзлээ. Эхнийх нь зургийн галлери. Би энд жишээ болгож ноднин жилийн багш нарын баярын хэдэн зургийг энэ plugin-ээр оруулъя.

Дараагийнх нь cformII. Энэ их дажгүй форм генератор байна. Ер бараг ямар бол ямар форм хийх боломжтой юм. AJAX ашигласан нь хэрэглэхэд их эвтэйхэн болгожээ. Customize хийж байгаа энэ тэр нь маш их таалагдлаа. Энүүгээр хийсэн холбоо барих формыг жишээ болгон үзнэ үү. Үүнийг би 5 минут хүрэхгүй хугацаанд л хийчихсэн.

Бас нэг сайхан plugin байна. Энэ google sitemap үүсгэдэг. Google-ийн сүүлд гаргасан хэрэгсэлүүдийн нэг бол google webmasters билээ. Би лав сайт бүртгүүлээд sitemap-ийг нь хийх гэж баахан XML-ддэг байсан чинь wordpress сайтын sitemap-ийг шуудхан гаргаад өгчихдэг юм байна. Би түүнийг нь google -рүү аплоад хийгээд болоо. Энэ талаар би дараа жаахан дэлгэрэнгүй тайлбарлаж болох юм.

Эдгээр plugin -үүдээс гадна би өөрөө сонгосон энэ хар темплате-ээ жаахан customize хийлээ. Жишээ нь google analytics -аа тавилаа мөн google adsense- ээ тавьчихлаа. одоогоор ямар нэг хүндрэл гарсангүй. Adsense  маань сайхан ажиллаж байна. Харин та бүхэн хааяа ч гэсэн миний сайтын баруун гар талд байгаа реклама от google гэдэгийн дээд талын сурталчилгаан дээр дарчихаж байгаарай эсвэл  хайлт хийсэн ч болно.

Та нар ч гэсэн оролдоод үзээрэй !

Categories: Бусад Tags: ,

PHP For the Absolute Beginner

January 4th, 2009 6 comments

PHP хэлийг анхлан сурч байгаа бол та бүхэн http://devzone.zend.com/node/view/id/627 -д байгаа материалуудийг үзнэ үү. Энэ бүүр эхнээс тайлбарлаад явсан зүйлүүд учир их зүгээр. Zend бол php хэлийг хөгжүүлэгч компани бөгөөөд энэ хэлтэй холбоотой олон бүтээгдэхүүн гаргасан билээ. Сүүлийн үед би өөрийн хийж байгаа ажлуудаа zend framework ашиглахаар шийдээд байна. Гэхдээ яг ашиглаад юм хийгээд эхлээгүй байгаа учир сайн муугиин тухай хэлэх юм алга. Хийгээд ашиглаад үзсэн хүн байвал санал бодлоо хуваалцвал баярлах болно.

Categories: PHP/MySql Tags: ,

Web development timeline

January 2nd, 2009 No comments

Доорхи зурагнаас веб хөгжүүлэлтийн хэл, хэрэгсэлүүд хирхэн яаж үүсэж, хөгжиж одоо ямар хувилбар дээрээ явааг тодорхой сайхан харж болохоор байна. Вебийн үндэс болон веб програмчлал үзэх гэж байгаа оюутнууд юу үзсэн цаашид юу үзэхээ ёстойгоо клиент ба сервер талаар нь ялган харна уу. Зурган дээр дарж томруулж үзнэ үү.

Web Development Timeline by end of 2008

Web Development Timeline by end of 2008

Categories: CSS, HTML, Javascript, PHP/MySql Tags: , ,