Embed Images in HTML with Base64 Encoding

HTML မွာ ပံုေတြထည့္ရင္ ပံုမွန္အားျဖင့္ img tag ထဲမွာ src ဆိုၿပီး ပံုရဲ႕ တည္ေနရာကို ညႊန္းၾကပါတယ္။ ဥပမာအားျဖင့္

<img src="images/logo.png"/>

အဲဒီနည္းလမ္းအစား နည္းနည္းေလးပိုၿပီးထူးတဲ့ နည္းလမ္းတစ္ခုနဲ႔ ပံုေတြကို HTML စာမ်က္ႏွာထဲမွာ တစ္ပါတည္း ေပါင္းထည့္လို႔ ရပါတယ္။ သေဘာတရားကေတာ့ Base64 Encoding ကိုအသံုးခ်ၿပီး ပံုကို စာသားအျဖစ္ Encode လုပ္ၿပီး ေျပာင္းလဲပါ့မယ္။ ရရွိလာတဲ့ စာသား(String)ဟာ ပံုကို အေျခခံၿပီး ျဖစ္ေပၚလာတဲ့ စာသားေတြ ျဖစ္ပါတယ္။ အဲဒီစာသားကို Decode ျပန္လုပ္လိုက္ရင္ မူလပံုအတိုင္း ျပန္ရမွာျဖစ္ပါတယ္။ ကၽြန္ေတာ္တို႔ရဲ႕ HTML စာမ်က္ႏွာထဲမွာ အရင္လို ပံုရဲ႕ တည္ေနရာကို မညႊန္းေတာ့ပဲ အဲဒီစာသားေတြကို တစ္ခါတည္း ေပါင္းထည့္မွာျဖစ္ပါတယ္။ ပံုဆိုတာ မရွိေတာ့ဘူးေပါ့။ Webpage မွာ ပံုကေနေျပာင္းထားတဲ့ စာသားေတြပဲ ပါပါတယ္။ အဲဒီစာသားေတြကို ပံုအျဖစ္ ျပန္ေျပာင္းၿပီး ျပသမွာပါ။

ႏွစ္သက္ရာပံုကို Base64 Encoding နဲ႔ Encode လုပ္ႏိုင္ဖို႔အတြက္ http://www.opinionatedgeek.com/dotnet/tools/base64encode/ ကိုသြားပါ။ ႏွစ္သက္ရာပံုကို Upload လုပ္ပါ။ အဲဒီအခါ အဲဒီပံုကို Encode လုပ္လို႔ ရရွိလာတဲ့ စာသားေတြကို သူက ထုတ္ေပးပါလိမ့္မယ္။ အဲဒီစာသားေတြကို Copy ကူးထားပါ။ ကၽြန္ေတာ္ကေတာ့ ျမန္မာႏိုင္ငံအလံပံုကို Upload လုပ္ၾကည့္ပါတယ္။ အဲဒီအခါ သူက ေအာက္ပါ စာသားေတြ ထုတ္ေပးပါတယ္။

/9j/4AAQSkZJRgABAQEASABIAAD/4gv4SUNDX1BST0ZJTEUAAQEAAAvoAAAAAAIAAABtbnRyUkdCIFhZWiAH2QADABsAFQAkAB9hY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAA9tYAAQAAAADTLQAAAAAp+D3er/JVrnhC+uTKgzkNAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABBkZXNjAAABRAAAAHliWFlaAAABwAAAABRiVFJDAAAB1AAACAxkbWRkAAAJ4AAAAIhnWFlaAAAKaAAAABRnVFJDAAAB1AAACAxsdW1pAAAKfAAAABRtZWFzAAAKkAAAACRia3B0AAAKtAAAABRyWFlaAAAKyAAAABRyVFJDAAAB1AAACAx0ZWNoAAAK3AAAAAx2dWVkAAAK6AAAAId3dHB0AAALcAAAABRjcHJ0AAALhAAAADdjaGFkAAALvAAAACxkZXNjAAAAAAAAAB9zUkdCIElFQzYxOTY2LTItMSBibGFjayBzY2FsZWQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAACSgAAAPhAAAts9jdXJ2AAAAAAAABAAAAAAFAAoADwAUABkAHgAjACgALQAyADcAOwBAAEUASgBPAFQAWQBeAGMAaABtAHIAdwB8AIEAhgCLAJAAlQCaAJ8ApACpAK4AsgC3ALwAwQDGAMsA0ADVANsA4ADlAOsA8AD2APsBAQEHAQ0BEwEZAR8BJQErATIBOAE+AUUBTAFSAVkBYAFnAW4BdQF8AYMBiwGSAZoBoQGpAbEBuQHBAckB0QHZAeEB6QHyAfoCAwIMAhQCHQImAi8COAJBAksCVAJdAmcCcQJ6AoQCjgKYAqICrAK2AsECywLVAuAC6wL1AwADCwMWAyEDLQM4A0MDTwNaA2YDcgN+A4oDlgOiA64DugPHA9MD4APsA/kEBgQTBCAELQQ7BEgEVQRjBHEEfgSMBJoEqAS2BMQE0wThBPAE/gUNBRwFKwU6BUkFWAVnBXcFhgWWBaYFtQXFBdUF5QX2BgYGFgYnBjcGSAZZBmoGewaMBp0GrwbABtEG4wb1BwcHGQcrBz0HTwdhB3QHhgeZB6wHvwfSB+UH+AgLCB8IMghGCFoIbgiCCJYIqgi+CNII5wj7CRAJJQk6CU8JZAl5CY8JpAm6Cc8J5Qn7ChEKJwo9ClQKagqBCpgKrgrFCtwK8wsLCyILOQtRC2kLgAuYC7ALyAvhC/kMEgwqDEMMXAx1DI4MpwzADNkM8w0NDSYNQA1aDXQNjg2pDcMN3g34DhMOLg5JDmQOfw6bDrYO0g7uDwkPJQ9BD14Peg+WD7MPzw/sEAkQJhBDEGEQfhCbELkQ1xD1ERMRMRFPEW0RjBGqEckR6BIHEiYSRRJkEoQSoxLDEuMTAxMjE0MTYxODE6QTxRPlFAYUJxRJFGoUixStFM4U8BUSFTQVVhV4FZsVvRXgFgMWJhZJFmwWjxayFtYW+hcdF0EXZReJF64X0hf3GBsYQBhlGIoYrxjVGPoZIBlFGWsZkRm3Gd0aBBoqGlEadxqeGsUa7BsUGzsbYxuKG7Ib2hwCHCocUhx7HKMczBz1HR4dRx1wHZkdwx3sHhYeQB5qHpQevh7pHxMfPh9pH5Qfvx/qIBUgQSBsIJggxCDwIRwhSCF1IaEhziH7IiciVSKCIq8i3SMKIzgjZiOUI8Ij8CQfJE0kfCSrJNolCSU4JWgllyXHJfcmJyZXJocmtyboJxgnSSd6J6sn3CgNKD8ocSiiKNQpBik4KWspnSnQKgIqNSpoKpsqzysCKzYraSudK9EsBSw5LG4soizXLQwtQS12Last4S4WLkwugi63Lu4vJC9aL5Evxy/+MDUwbDCkMNsxEjFKMYIxujHyMioyYzKbMtQzDTNGM38zuDPxNCs0ZTSeNNg1EzVNNYc1wjX9Njc2cjauNuk3JDdgN5w31zgUOFA4jDjIOQU5Qjl/Obw5+To2OnQ6sjrvOy07azuqO+g8JzxlPKQ84z0iPWE9oT3gPiA+YD6gPuA/IT9hP6I/4kAjQGRApkDnQSlBakGsQe5CMEJyQrVC90M6Q31DwEQDREdEikTORRJFVUWaRd5GIkZnRqtG8Ec1R3tHwEgFSEtIkUjXSR1JY0mpSfBKN0p9SsRLDEtTS5pL4kwqTHJMuk0CTUpNk03cTiVObk63TwBPSU+TT91QJ1BxULtRBlFQUZtR5lIxUnxSx1MTU19TqlP2VEJUj1TbVShVdVXCVg9WXFapVvdXRFeSV+BYL1h9WMtZGllpWbhaB1pWWqZa9VtFW5Vb5Vw1XIZc1l0nXXhdyV4aXmxevV8PX2Ffs2AFYFdgqmD8YU9homH1YklinGLwY0Njl2PrZEBklGTpZT1lkmXnZj1mkmboZz1nk2fpaD9olmjsaUNpmmnxakhqn2r3a09rp2v/bFdsr20IbWBtuW4SbmtuxG8eb3hv0XArcIZw4HE6cZVx8HJLcqZzAXNdc7h0FHRwdMx1KHWFdeF2Pnabdvh3VnezeBF4bnjMeSp5iXnnekZ6pXsEe2N7wnwhfIF84X1BfaF+AX5ifsJ/I3+Ef+WAR4CogQqBa4HNgjCCkoL0g1eDuoQdhICE44VHhauGDoZyhteHO4efiASIaYjOiTOJmYn+imSKyoswi5aL/IxjjMqNMY2Yjf+OZo7OjzaPnpAGkG6Q1pE/kaiSEZJ6kuOTTZO2lCCUipT0lV+VyZY0lp+XCpd1l+CYTJi4mSSZkJn8mmia1ZtCm6+cHJyJnPedZJ3SnkCerp8dn4uf+qBpoNihR6G2oiailqMGo3aj5qRWpMelOKWpphqmi6b9p26n4KhSqMSpN6mpqhyqj6sCq3Wr6axcrNCtRK24ri2uoa8Wr4uwALB1sOqxYLHWskuywrM4s660JbSctRO1irYBtnm28Ldot+C4WbjRuUq5wro7urW7LrunvCG8m70VvY++Cr6Evv+/er/1wHDA7MFnwePCX8Lbw1jD1MRRxM7FS8XIxkbGw8dBx7/IPci8yTrJuco4yrfLNsu2zDXMtc01zbXONs62zzfPuNA50LrRPNG+0j/SwdNE08bUSdTL1U7V0dZV1tjXXNfg2GTY6Nls2fHadtr724DcBdyK3RDdlt4c3qLfKd+v4DbgveFE4cziU+Lb42Pj6+Rz5PzlhOYN5pbnH+ep6DLovOlG6dDqW+rl63Dr++yG7RHtnO4o7rTvQO/M8Fjw5fFy8f/yjPMZ86f0NPTC9VD13vZt9vv3ivgZ+Kj5OPnH+lf65/t3/Af8mP0p/br+S/7c/23//2Rlc2MAAAAAAAAALklFQyA2MTk2Ni0yLTEgRGVmYXVsdCBSR0IgQ29sb3VyIFNwYWNlIC0gc1JHQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAAYpkAALeFAAAY2lhZWiAAAAAAAAAAAABQAAAAAAAAbWVhcwAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACWFlaIAAAAAAAAAMWAAADMwAAAqRYWVogAAAAAAAAb6IAADj1AAADkHNpZyAAAAAAQ1JUIGRlc2MAAAAAAAAALVJlZmVyZW5jZSBWaWV3aW5nIENvbmRpdGlvbiBpbiBJRUMgNjE5NjYtMi0xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLXRleHQAAAAAQ29weXJpZ2h0IEludGVybmF0aW9uYWwgQ29sb3IgQ29uc29ydGl1bSwgMjAwOQAAc2YzMgAAAAAAAQxEAAAF3///8yYAAAeUAAD9j///+6H///2iAAAD2wAAwHX/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCADYAXoDASIAAhEBAxEB/8QAHQABAQACAwEBAQAAAAAAAAAAAAgFBwMEBgIJAf/EAD4QAAEDAwEEBgcGBgEFAAAAAAABAgMEBREGBxIhMRNBUWFxkQgYIjJSVdIUFUJigaEWI3KCosEzNHOSseH/xAAdAQEAAgIDAQEAAAAAAAAAAAAABQYEBwIDCAEJ/8QAOhEAAQIDAwkGBAYCAwAAAAAAAAECAwQRBRaiBhIhMUFRY+HiYXGBkaHRExUisQcUMkJSgkPBYnLw/9oADAMBAAIRAxEAPwCnQAeMixAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA++jf0PTY9je3c958GcZSZsnRY9tW7/68/8A4WPJ2wIlsujoz/HDc7vVP0p40U6Y0VIdO1TBgArh3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHLRxdPVRxdTncfDrPUmF09FmWSZU91N1PFTNHoP8AC+zPytlOmnJpiur/AFboT1qpEzr85+buPMV8XQ1kkaJhEdlPA4DLahhw+OdE5+yv+jEmnMqbM+WWvHl0SiI6qf8AV2lPvTwJCA/PhooABXzuAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAByUsSzVMcSfidhfDrO2BBfHithQ0q5yoid6qiJ9z4qoiVUz9ph6GhYipxd7S/qdsIiImE5ID13Z0kyQlIUrD1MaieSa/Far4kA9yucrl2nWucPTUUjUTiibyeKHmj1x5asi6Cqki6kdw8Oo1F+LFmUfAn2prqxfDS30qhnyL9CtOIAGnCRAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIlBfrj8fDzNd394GLpLaBEoFx+Ph5i/vAxdJbQIlAuPx8PMX94GLpLaBEoFx+Ph5i/vAxdJbQIlAuPx8PMX94GLpLaBEoFx+Ph5i/vAxdJbQIlAuPx8PMX94GLpLaBEoFx+Ph5i/vAxdJbQIlAuPx8PMX94GLpLaBEoFx+Ph5i/vAxdJbRk9Pxb075lTgxMJ4qQkWJ6O9g+4dl9vdIzdqLiq1svDqfjc/wRvmpZMk8imwbUhzLomckP6qUpp1JtXatfAz7Pyodab3QUhZqUqq1r/pNZsQAG6yTBhtQxYkjmRPeTdX9DMnhNvVg/iHZhdIY2b1RSNSsh4/ijyrvNm+n6leypsdtsWZEllWi6FRddFbp+1U8T46ZdLMdFa3OVEVaaqndBEoNI3H4+HmV6/vAxdJbQIlAuPx8PMX94GLpLaBEoFx+Ph5i/vAxdJbQIlAuPx8PMX94GLpLaBEoFx+Ph5i/vAxdJbQIlAuPx8PMX94GLpLaBEoFx+Ph5i/vAxdJbQIlAuPx8PMX94GLpLaBEoFx+Ph5i/vAxdJbQIlAuPx8PMX94GLpLaBEoFx+Ph5i/vAxdIABfTXYAAAAAAAAAAAAAABmdIWSC/3ZtulvVBanycIpKxXNjcvw7yIuF8eBtL1ctVfO7L/5S/QaUNsbI9st00p0VpvfS3OyphrMrmamT8ir7zfyr3YVOSyMgsmrsyZaveir6oStmukFdmTbV07UVfVP9mT9XLVXzuy+cv0D1ctVfO7L5y/QUbp292rUNrjudmroaykk5PjXkvWipzRU7F4mQLO2w5FyVaiqneXFuTlnPRHNRVRf+Skxerlqr53ZfOX6B6uWqvndl85foKdBy+Qye5fNT7dqz/4r5qTF6uWqvndl85foHq5aq+d2Xzl+gp0D5DJ7l81F2rP/AIr5qTNTejlqT7TF9pvdp6DfTpNxZFdu544y3ngpWlgipqaKmp40jhiYjI2Jya1EwieRyAzJSQgSlfhJr8SQkbMl5HO+ClK69NQADMM8H8exr2OY9qOa5MORUyip2H9ABNNx9HS/uuFS6gvNqbSLK5YGyLJvpHld1HYavHGMnB6uWqvndl85foKdBDrYUmv7V81IFcm7PVa5q+akxerlqr53ZfOX6B6uWqvndl85foKdA+Qye5fNT5dqz/4r5qTF6uWqvndl85foHq5aq+d2Xzl+gp0D5DJ7l81F2rP/AIr5qTF6uWqvndl85foHq5aq+d2Xzl+go6/3i12G1y3O8VsVHSRJ7cki8O5ETmqr1InFSZNrm2m5amSW06dWa2WhUVsj84mqUXgqOVPdavwpz616jAnZKzZNtXoqrsSukjbRs6yJBlYiKrtiI5ar7J2mvdZ2GHTl3dbGXugus0eUmdRq5zI3fDvKiIq9uM48TBgFWeqK5ValEKZEc1zlVqUTdrAAOJxAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPQ6F1lftGXZtwstWrEVf51O/KxTJ2Ob/tMKnUpVmy7afYdc07YYnJRXZrcy0UrkyuObmL+Nv7p1oRkctLUT0lTHU000kM0TkcySNytc1U5KipyJOQtSLJrRNLd3tuJezLZjyC0TSzd7bvsfoGDQOyPbrHKkNm1vI2N+EbFc0T2XdiSonJfzJw7UTipvyKSOaJksT2yRvajmPauUci8lRetC6yk5Cm2Z0NfDahsOSn4E7Dz4S96bU7z6ABlGYAAAAAAAAAAAAAD+Pc1jHPe5GtamXOVcIidoB/TxO07aVYNDUitqpPtdzc3MNDE7217Fcv4G968exFNe7W9ukFH01m0U9k9T7slxVMxx9qRovvL+ZeHYi80nWtqqmtq5ausqJaiomcr5JZXq5z3LzVVXiqldtG3Gwqw4Gld+xPf7FVtXKNkGsKW0u37E7t6+neZ/X2t7/rW5/bLzVZiYq9BSx5SGFPyt7e1VyqnmgCpRIjojlc9aqpRosV8V6vetVXaoABwOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANi7KtrF90TLHRSq642XPtUkjuMSKvFY3fhXu5L3LxNdA7oMeJAej4a0U7peZiy0RIkJ1FQu7R+qLJq20NudjrWVEK4R7eT4nfC9vNF/99WUM0QbpTUd50vdo7pZK2SlqG8FxxbI34XJycncpaOzi+1updFWy+19HHRz1cSvWJjlVuMqiOTPJFRMonHgqcS62XaiTiZjko5PL/3YbDsa2ktBFY5KPRNO5e3s7j0IAJcnQAAAAAAAYTXl4q9P6Oul6oaJtZUUVO6ZsLnK1qonNVVOpEy7HXjGU5nF70Y1XLqQ4RHpDar3ak0nJqzUll0taX3O+V0dLA3g1F4ukd8LWpxcvgSxtZ2t3nWkklBRrJbbHnCUzXe3MnbKqc+3dTgneqZPHav1PetV3d1zvda+pnVMMTkyNvwtbyRDDFJtG2YkzVkP6W+q9/sa9tW34s5WHC+lnqvf7eYABCleAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAO9YLZUXm+UNopU/n1lQyBnDOFc5Eyvcmcl5W2jgt9upqCmbuwU0LIYk7GtRERPJCWvRYsK3PaI+6yR70Fqp3SZVOHSPyxqeSvX+0q0uGTsvmwXRV/cvonMvmSstmS7oy63LTwTmAAWItQAAAAAAOKsp4qukmpahm/DNG6ORva1UwqeSnKAqVCpXQpBWqbRNYdSXGy1GVkoql8Kqv4kRcI79Uwv6mMNx+ldYloNd016jjxDdKZN5yJzljw13+KxmnDW05A/Lx3w9y+mz0NST8t+WmXwty+mz0AAMYxAAAAAAAAAAAAAAAAAAAAAAAADEgAzT9MQAAAAAAAAAAAAAAAAAAAAAAduzW+pu13o7XRt36isnZBE3tc9yNT91PqIqrRDi97WNVzloiafIrT0TbAlq2Zfekke7Pd6l82VTj0bPYYnhlHKn9Rt86VhttPZrJQ2ikTFPRU7KePPPdY1Gpnv4HdL7LQvgwmw9yHkm2rQW0rQjTa/vcqp3bPREAB0NQXm12C1TXS8VsVHRwpl8ki4TwTtVepE4qdyqiJVSPhw3xHIxiVVdCImlVO+eHl2saEj1h/C773E2s91Zl/6dH5/wCNZOW9+3VnPA0Btk253PVCTWbTPTWyzOy2SXOJ6lO9U9xvcnFeteODTBATVto12bBSqbV9vc21YH4YPjwFi2k5WKqaGpSqdrtn9fNT9HkVFRFRcovJQSDsc233fSbobRqBZbpY0w1qquZqZPyqvvNT4V/RU5LVmm77aNR2qK6WSvhraSVOD43cl7FTm1e5eJJyk9Cmm/Tr3FHyiyVnrBi0jJVi6npqXv3L2L4KpkgAZpWjVPpTaeS97LKitjZvVNplbVsVE4qz3Xp4Ydvf2Ebn6LXOjp7jbqm31TN+nqoXwyt7WORUVPJT8+NSWuex6guNmqf+ahqZKd645qxypnwXGSsW7BzYjYqbdHlyN6fhVafxZSNIuXSxc5O52vEnqdAAECbXAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABtz0U9O/fO05lylZvU9ogdULnl0i+wxPHirv7TUZW/ojaeW17PJ71Kzdmu9SrmqqYXoo8tb/AJdIv6kjZcH4sy2upNPlzKdl5afy+xIqotHP+hP7a8NTc4PmR7I43SSPaxjUVznOXCIic1VSfdsW3+CkSay6EkZPUcWy3NUR0bP+0nJy/mXh2IvNLZMzUOWbnRF91PPtjWFO2zH+DKMrvXY1N6r/AK1rsQ2TtV2o6e0BSKyrf9suj25hoYXJvr2K9fwN7149iKSJtE13qHXV2WuvVVmJir9npY+EMCdjU7e1y5Ve3kedraqprauWrrKiWoqJnK+SWV6uc9y81VV4qpwlTnbRiTS01N3e56DyYyMkrCaj/wBcba5dnY1Nieq7V2AAEcXAHpNA621Doi6pX2KsWNHKnTQP9qKZE6nN/wBphU6lPNg5Me5jkc1aKdMxLQZmE6DGajmrrRUqilvbKNq2nte0rYYpG0F4a3MtBK9N5e1Y14b7f3TrQ2AfnLS1E9LUx1NLPJBPE5HRyRvVrmKnJUVOKKUhsb2/sl6Gya8kRknBkV0RERq9iSonL+tOHaicVLNI2w2JRkfQu/Zy+xpDKr8OIspnTNmIr2a1Zrcnd/JOz9SdpRRInpaad+6do7LxEzdgvFOkqqnLpWYY9PLcX+4riCWKeFk0ErJYntRzHscjmuReSoqc0NTeldp5bxsxdcoWb1RaJ21CYTKrG72Hp4cWuX+kzLUg/GlnU1pp8uRW8g7SWzrbhZy0a/6F8dXk5E8yPQAUs9MgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHPbaOouFxpqCkZ0lRUythiZ8T3KiInmqF111101sy0NQxXStjpaKhp2U8LeckzmtRMNbzc5cZ/dSKdCX5mmNU0d/dQx10lErpIIZHYZ0u6qMc7HHDXKjsJjOOaHxrDVF81beZLrfq6SqqHcGovBkbfhY3k1PDxXKklJTrZSG5yJV6+iFJynyajZQzcGFEdmwIdVWmtzl0UTdRE1rv0Ip7Xa/tivmuZJLfSb9ssSO9mlY725k6llcnP+lOCd6pk1iAYUaM+M7PetVLRZ1mytmwEl5ViNam77qutV7VAAOozgAAAAAAAADZGyPa7f8AQk7KORX3KyOd7dHI/jHnmsTl91evHJe5VyVZY7/pnaRo+rba61lTSVlO+nqYlwksO+1UVr29S8V7l6lUgsy2lNR3rS14jutir5aOqj62r7L0+FzV4OTuUlZK03wEzH/U37d3sUPKfIaWtV35qVX4cdNNU1OVNKZyJtqn6k076nUvNvqbTd6y11jdyoo53wSt7HMcrV/dDqGd17qFNV6nqL+6hjop6trHVEcTssWVGo1z254ojlTOFzxVeKmCI16NRyo3UXWVdFdAY6MlH0Sqblpp9a07KAAHA7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/9k=
ရပါၿပီ။ Notepad ကိုဖြင့္ၿပီး ေအာက္ပါအတိုင္း ရိုက္ထည့္လိုက္ပါ။

<html>
<body>
<img src="data:image/jpeg;base64,Insert Your Code Here"
</body>
</html>

Insert Your Code Here ဆိုတဲ့ေနရာမွာ အေစာက Encode လုပ္လို႔ရလာတဲ့ String ေတြကို ထည့္ေပးလိုက္ပါ။ ၿပီးရင္ HTML ဖိုင္အေနနဲ႔ သိမ္းလိုက္ပါ။ Browser တစ္ခုခုနဲ႔ အဲဒီ HTML ဖိုင္ကို ဖြင့္ၾကည့္လိုက္ပါ။ ျမန္မာႏိုင္ငံအလံပံု ေပၚေနေတာေတြ႕ရပါလိမ့္မယ္။ လံုၿခံဳေရးပိုင္း ဆိုင္ရာ လိုအပ္တဲ့ပံုေတြအတြက္လည္း အခုလိုနည္းလမ္းနဲ႔ ကြန္ပ်ဴတာထဲမွာ သိမ္းလို႔ရပါတယ္။ ပံုေတြမသိမ္းဘဲ အခုလို string ေတြခ်ည္းပဲ သိမ္းထားမယ္ေပါ့။ လိုအပ္မွာ Decode ျပန္လုပ္ၿပီး ပံုကို ျပန္ေဖာ္ၾကည့္တာမ်ိဳးေတြ စသည္ျဖင့္ ဥာဏ္ ရွိသလို အသံုးခ်ႏိုင္ပါလိမ့္မယ္။ အဆင္ေျပၾကပါေစ။

A litte Explanation about Joomla

Joomla ကိုသိထားခဲ့တာ ၾကာလွၿပီ။ Download ဆဲြ၊ Ebooks ေတြ ရွာထားၿပီးေတာ့မွ မေလ့လာျဖစ္ခဲ့ဘူး။ အခု ေဒါ့ကြန္းရၿပီဆိုေတာ့ Joomla ကို သံုးမွ အဆင္ေျပေတာ့မွာေလ။ အခုလိုက်ေတာ့လည္း Joomla ကို မိုးလင္းထိေအာင္ တစ္ထိုင္တည္း ေလ့လာျဖစ္သြားတယ္။ (တြန္းအားရွိမွ လုပ္ျဖစ္သြားတယ္ဆိုတာ တကယ္ မွန္တာပါပဲ)

Joomla ဆိုတာ ဘာလဲလို႔ေမးလိုက္ရင္ Content Management System ဆိုၿပီး ေျပာၾကမွာပါ။ ကၽြန္ေတာ္က ေတာ့ Joomla ဆိုတာကို လံုး၀မသိေသးတဲ့သူေတြ ပိုစိတ္၀င္စားသြားေအာင္ Joomla ဆိုတာကကြာ Website လုပ္တဲ့ Website လို႔ ေျပာခ်င္ပါတယ္။ အတိအက်မမွန္ကန္ေပမဲ့ အဲဒီလိုသံုးလိုက္တာဟာ ပိုၿပီး စိတ္၀င္စားစရာ ေကာင္းသြားမယ္လို႔ ယူဆမိပါတယ္။

XAMPP တင္၊ Joomla installer ကို joomla.org ကေန download ဆဲြ၊ Documentation ေတြကိုလည္း အဲဒီကေန ဆဲြလိုက္တယ္။ ဒီၾကားထဲ joomla.org က ေပးတဲ့ တခ်ိဳ႕ documentation ေတြက odt format ေတြ ျဖစ္ေနလို႔ ဖြင့္မရဘူး။ odt ဆုိတာ ဘာႀကီးပါလိမ့္လို႔ Google မွာ ရွာလိုက္ေတာ့မွ open document ဆိုတာ သိခဲ့ၿပီး openoffice နဲ႔ ဖြင့္ရမွာဆိုတာ သိသြားပါတယ္။ OpenOffice ႀကီးက File Size ႀကီးေတာ့ down ရမွာ ပ်င္းတာနဲ႔ Online ေပၚကပဲ PDF ေျပာင္းၿပီး ယူခဲ့ရတယ္။

Joomla ကို install လုပ္ၿပီးေတာ့ Control Panel ထဲ ၀င္တဲ့အခါ စိန္ေခၚခံရေတာ့ပဲ။ ဘာေတြမွန္းမသိဘူး။ Articles တဲ့၊ Section တဲ့။ ေသခ်ာ လုပ္ၾကည့္ေတာ့မွ Articles ဟာ blog ေတြရဲ႕ Post နဲ႔ တူတာကို သိသြားပါတယ္။ အဲဒီထဲမွာ Section ကေတာ့ အႀကီးဆံုးေပါ့။ အရင္ဆံုး Section ခြဲရတယ္၊ ၿပီးေတာ့မွ အဲဒီ Section ထဲကို Categories ေတြ ထည့္ရတယ္။ ေနာက္ဆံုးမွ Articles ေတြကို Categories ေတြထဲ ထည့္ရပါတယ္။ ဥပမာ ကြန္ပ်ဴတာအေရာင္းဆိုင္ရဲ႕ Website ဆိုပါေတာ့။ သူ႔မွာ Sales ပိုင္း ရွိမယ္၊ Contact ပိုင္းရွိမယ္။ Sales အတြက္ Sales ဆိုတဲ့ Section ေဆာက္ရပါတယ္။ ၿပီးေတာ့ အေရာင္းပစၥည္းေတြကို အုပ္စုခဲြၾကည့္လိုက္ရင္ Motherboard, Hard Disk, Memory စသည္ျဖင့္ ရွိမွာေပါ့။ အဲဒီေတာ့ Motherboard ဆိုတဲ့ Categories ေဆာက္ၿပီး Sales Section ထဲမွာ ထည့္ရပါတယ္။ ေနာက္ဆံုးက်မွ ဆိုင္ကေရာင္းတဲ့ Motherboard တစ္ခုခ်င္းစီရဲ႕ ပံုေတြနဲ႔ description ေတြကို Articles အေနနဲ႔ ေရးၿပီး Motherboard Categories ထဲမွာ ထည့္ရပါတယ္။ ဒါေၾကာင့္မို႔
Section>Categories>Articles
ဆိုၿပီး ယူဆႏိုင္ပါတယ္။

Joomla ကိုသံုးရင္ ကိုယ့္ Site အတြက္ အဲဒီလိုနည္းနဲ႔ Data ေတြကို စနစ္တက် ထည့္ရပါတယ္။ Data ထည့္တဲ့ အပိုင္းၿပီးသြားရင္ Template ကို ကိုယ္ႀကိဳက္သလို ျပင္လို႔ရပါတယ္။ သူ႔ထဲ built-in ပါလာတာက Template သံုးခုတည္း ပါပါတယ္။ (အဲဒါေတြကလည္း ေတာ္ေတာ္လွပါတယ္) Template ျပင္ႏိုင္ဖို႔ကေတာ့ CSS ရယ္ XHTML ရယ္ကုိ တတ္ထားမွ ရမွာပါ။ တခ်ိဳ႕ကလည္း အင္တာနက္ထဲကေန အသင့္ေရးၿပီးသား Joomla Template ေတြကို သံုးၾကတာရွိပါတယ္။ ဒါေပမဲ့ အဲဒီလိုက် Specific မျဖစ္ေတာ့ဘူးေလ။

Joomla မွာက Web Site ရဲ႕ Home page ကို Front end လို႔ သံုးစြဲပါတယ္။ Front end ေပၚမွာ ဘယ္ Article ကို ေပၚေစခ်င္တယ္ ကိုယ္က သတ္မွတ္ႏိုင္ပါတယ္။
ေနာက္ Menu Manager ကို သံုးၿပီး Menu bar ေတြ ထည့္ႏိုင္တယ္၊ ျပင္ႏိုင္ပါတယ္။ Menu မွာက် Main Menu, Top Menu, User Menu ဆိုၿပီး ထပ္ခဲြထားပါေသးတယ္။ Site မွာ မျဖစ္မေန ထည့္ရမွာကေတာ့ Main Menu ေပါ့။ ကိုယ္က အဲဒီ Main Menu ထဲက Link ကို ႏွိပ္လိုက္ရင္ Section သို႔မဟုတ္ Categories တစ္ခု ေပၚေစခ်င္ပါတယ္ ဆိုၿပီး သတ္မွတ္ႏိုင္သလို External Link ဆီ သြားပါလို႔လည္း သတ္မွတ္ႏိုင္ပါေသးတယ္။ သို႔မဟုတ္ ဘယ္ Module ဆီသြားပါဆုိၿပီး သတ္မွတ္ႏိုင္ပါတယ္။

Module ဆိုတာက Site ေပၚမွာရွိတဲ့ အပိုင္းေလးေတြကို ေခၚတာပါ။ ဥပမာအားျဖင့္ Site တစ္ခုေပၚမွာ ရွိတဲ့ Search ဆိုတဲ့ textbox ေလးဟာလည္း Module တစ္ခုလို႔ ေခၚႏိုင္သလို႔ Site တစ္ခုေပၚမွာရွိေနတဲ့ Navigation bar ဟာလည္း Module တစ္ခုပါပဲ။ Joomla မွာ အဲဒီလို Module ေတြကို ထည့္ႏိုင္တယ္၊ ျဖဳတ္ႏိုင္ပါတယ္။ Module တစ္ခုကို Site ေပၚမွာ တင္ရင္ Site ရဲ႕ ဘယ္ေနရာမွာ တင္မလဲဆိုတာ စဥ္းစားရတာကေတာ့ ကၽြန္ေတာ့္အတြက္ ေတာ္ေတာ္ေခါင္းေျခာက္ရပါတယ္။

Module နဲ႔ တဲြပါလာတာက Component ပါ။ Joomla မွာ ပံုမွန္အားျဖင့္ Articles ေတြရဲ႕ေအာက္မွာ Comments ေရးလို႔ မရပါဘူး။ ရဖို႔အတြက္ JComments ဆိုတဲ့ Component ေလးကို Joomla ထဲ ထည့္သြင္းလိုက္ရင္ Article ေတြရဲ႕ေအာက္မွာ Comments ေပးလို႔ ရသြားပါတယ္။

Module, Component , Plugins နဲ႔ Template ေတြကို Joomla ကိုယ္တိုင္က သူ႔ Site မွာ Extension လို႔ သံုးႏႈန္းထားပါတယ္။ သူ႔ site မွာ Extension ေပါင္း ေျမာက္ျမားစြာေပးထားပါတယ္။ သို႔ေပမဲ့ သူတို႔ကေတာ့ Extension ကို Begineer ေတြအေနနဲ႔ မစမ္းသင့္ေသးပါဘူးလို႔ ေျပာပါတယ္။ တကယ္ေတာ့လည္း ဟုတ္ပါတယ္။ Joomla ရဲ႕ Core ပိုင္းကို ႏိုင္ၿပီဆိုေတာ့မွ Extension ဘက္ကို လွည့္သင့္ပါတယ္။ Joomla ရဲ႕ Core နဲ႔ေတာင္ Site တစ္ခုဟာ လည္ပတ္လို႔ ရေနပါၿပီ။ Registration စနစ္ေတြ တစ္ခါတည္း ထည့္သြင္းေပးၿပီးသား၊ Email Activation ေတာင္ ပါလိုက္ေသးတယ္။ Login လုပ္ရတာေတြကို ကိုယ္က PHP နဲ႔ ေရးစရာေတာင္ မလိုေတာ့ပါဘူး။ သူ႔ထဲမွာ ထည့္ေပးၿပီးသားပါ။ Searching လုပ္လို႔ရေအာင္လည္း သူက တစ္ခါတည္း လုပ္ေပးၿပီးသားပါ။ Polls ေတြ၊ Newsflash ေတြ၊ Feed ထုတ္ေပးတာေတြ၊ Who is online စတာေတြဟာ သူ႔ထဲမွာ တစ္ခါတည္း ပါၿပီးသားပါ။

နိဂံုးခ်ဳပ္ရရင္ေတာ့ Joomla ကိုသံုးစြဲရင္ Site တစ္ခု ဖန္တီးရတယ္ဆိုတာ အခ်ိန္အၾကာႀကီး ယူစရာ မလိုေတာ့ပါဘူး။ ၿပီးေတာ့ Site ထဲမွာထည့္ထားတဲ့ Content ေတြကို Management လုပ္ရတာ အရမ္း လြယ္ကူသြားပါတယ္။ အခုအခ်ိန္ဟာ Dreamweaver ထဲမွာ Site တစ္ခုလံုးကို အစအဆံုး ေရးရတဲ့ ေခတ္မဟုတ္ေတာ့ဘူးလို႔ ကၽြန္ေတာ္ကေတာ့ ျမင္မိပါတယ္။ Joomla ကို Web သင္တန္းေက်ာင္းေတြအေနနဲ႔ Course တစ္ခုအေနနဲ႔ကို ထည့္သြင္းၿပီး သင္ၾကားသင့္တယ္လို႔ေတာင္ ကၽြန္ေတာ္ကေတာ့ ေထာက္ခံလိုက္ခ်င္ပါတယ္။

Hostmonster

အိုင္တီမန္းကို .com ျဖစ္လာဖို႔အတြက္ Domain Name ၀ယ္ရပါတယ္။ တစ္ႏွစ္စာကို 10.69 ေဒၚလာနဲ႔ အလွဴရွင္က ငါးႏွစ္စာ ၀ယ္ေပးပါတယ္။ Domain Name ကို လက္ရွိနာမည္ႀကီးေနတဲ့ Godaddy ကေန သူက ၀ယ္ေပးပါတယ္။ Hosting ကိုေတာ့ Hostmonster ကေန သူက ၀ယ္လိုက္ပါတယ္။ Hostmonster ကေန သူက ၀ယ္လိုက္တဲ့အေၾကာင္းေျပာေတာ့ အစပိုင္း သိပ္ဘ၀င္မက်ျဖစ္သြားပါတယ္။ ဘာေၾကာင့္လဲဆိုေတာ့ လက္ရွိ hosting ထဲမွာ နံပါတ္တစ္က justhost ပါ။ အဲဒီေတာ့ ကၽြန္ေတာ္လည္း justhost ကေန ၀ယ္ခ်င္တာေပါ့။ ဒါေပမဲ့ အခုေတာ့ justhost ကို မႀကိဳက္ေတာ့ဘဲ hostmonster မွ hostmonster ျဖစ္ေနပါၿပီ။ ဘာေၾကာင့္ပါလဲ ဆိုေတာ့…

Domain ကို Godday ကေန ၀ယ္လိုက္တာျဖစ္လို႔ hostmonster ကေန hosting ၀ယ္ၿပီးတဲ့အခါမွာ godaddy မွာ login ၀င္ၿပီး hostmonster ရဲ႕ namerserver ကို ေျပာင္းေပးရပါတယ္။ godaddy မွာ hostmonster ရဲ႕ nameserver ကို ရိုက္ထည့္ဖို႔ ရွာလိုက္တာလည္း ေတာ္ေတာ္ေလး ေခါင္းမူးခဲ့ပါတယ္။ ဘယ္လိုမွ ရွာမေတြ႕ဘူး။ ေနာက္မွ godaddy က domain name ကို lock ခ်ထားမွန္းသိတာ။ အဲဒီေတာ့မွ lock ကို ျပန္ျဖဳတ္လိုက္တယ္။ lock ျဖဳတ္လုိက္ေတာ့မွ Nameserver ထည့္တဲ့ textbox က ေပၚလာတာ။ အဲဒီမွာ ေနာက္ထပ္ အဆင္မေျပ ျဖစ္ခဲ့ပါေသးတယ္။ ကၽြန္ေတာ္ထင္တာက nameserver IP ေတြ ထည့္ၿပီးတာနဲ႔ site ကို ခ်က္ခ်င္း access လုပ္ ႏိုင္မယ္ထင္ခဲ့တာပါ။ လက္ေတြ႕မွာေတာ့ ခ်က္ခ်င္းမေျပာင္းခဲ့ပါဘူး။ site ကို ေခၚၾကည့္တယ္။ ဒီ domain ဟာ မရွိဘူးလို႔ပဲ ေျပာေနေတာ့ ေတာ္ေတာ္ေလး စိတ္ပူသြားပါတယ္။ ေနာက္မွ DNS Propagation ေၾကာင့္ အနည္းဆံုး 72 နာရီၾကာမယ္ဆိုတာ သိေတာ့မွ စိတ္ေအးသြားခဲ့ရပါတယ္။ (တကယ္တမ္းေတာ့ ဒီမွာ access ရဖို႔အတြက္ ၂၄ နာရီေလာက္ပဲ ၾကာခဲ့ပါတယ္)

အလွဴရွင္က domain name န႔ဲ hosting သာမကဘဲ Google apps ကိုပါ ၀ယ္ေပးလိုက္ပါတယ္။ ဒါေၾကာင့္မို႔ webmail အတြက္ hostmonster ကေပးတဲ့ webmail ကို သံုးစရာမလုိေတာ့ဘဲ google ရဲ႕ Gmail ကို ကိုယ့္ domain နဲ႔ သံုးစဲြခြင့္ရသြားပါတယ္။ ဒါေတာင္ အလြယ္တကူ ရတာမဟုတ္ေသးပါဘူး။ hostmonster ထဲ ၀င္ၿပီး MX Server ေတြရဲ႕ IP ေတြကို hostmonster ရဲ႕ IP အစား Google ရဲ႕ MX server name ေတြကို ရိုက္ထည့္ေပးလိုက္မွ အဆင္ေျပသြားတာပါ။

Hostmonster ကို သေဘာက်တာက တစ္ခုခု အဆင္မေျပလို႔ ေမးလိုက္ရင္ အမ်ားဆံုး ဆယ္မိနစ္ေလာက္ပဲ။ ခ်က္ခ်င္းျပန္ေျဖေပးတယ္။ ေသေသခ်ာခ်ာ ရွင္းရွင္းလင္းလင္းကို ျပန္ေျပာေပးၾကတာ။ ကၽြန္ေတာ္က Cpanel ကို ၀င္လို႔မရဘူး။ Cpanel က port 2086 ကို သံုးထားတာမို႔ ျမန္မာျပည္ ISP ေတြက Ban ထားတဲ့အေၾကာင္းကို ေျပာျပလိုက္ေတာ့ သူတို႔က Cpanel ကို တျခား port တစ္ခုနဲ႔ access လုပ္ခြင့္ရေအာင္ လုပ္ေပးပါတယ္။ တကယ့္ကို ခ်က္ခ်င္းကို လုပ္ေပးလိုက္တာ။ Justhost ဆိုရင္ Cpanel ကို မေက်ာ္ဘဲ access လုပ္လို႔ မရပါဘူး။ hostmonster က ရတယ္။ Justhost ၀ယ္ထားတဲ့သူေတြ Cpanel ကို access လုပ္ခ်င္ရင္ CpanelProxy ကို သံုးၾကရပါတယ္။

ဒီလင့္ခ္ကေတာ့ hostmonster ကေန ၀ယ္ထားတဲ့ Package description ပါ။ အဲဒါေတြအတြက္ တစ္ႏွစ္ကို 67 ေဒၚလာေပးရပါတယ္။ သုိ႔ေပမဲ့ hosting ၀ယ္တဲ့အတြက္ domain တစ္ခုပါ အလကားရလိုက္ပါေသးတယ္။

Yahoo User Interface

YUI ဟာ Javascript နဲ႔ CSS ေတြနဲ႔ေရးသားထားတဲ့ Utilities ေတြ Control ေတြကို စုစည္းေပးထားျခင္း ျဖစ္ပါတယ္။ AJAX ကိုအေျခခံတဲ့ Web Application ေတြေရးသားဖို႔အတြက္ အရမ္းအသံုးတည့္ပါတယ္။ လက္ရွိ Yahoo ရဲ႕ Home Page ဟာ YUI Library နဲ႔ တည္ေဆာက္ထားျခင္း ျဖစ္ပါတယ္။ ဒါေၾကာင့္မို႔လည္း Web Developer တိုင္း ေလ့လာေနရတဲ့ YUI ျဖစ္ေနတာပါ။

အေသးစိတ္ကိုေတာ့ http://developer.yahoo.com/yui/ မွာသြားၿပီး ေလ့လာႏိုင္ပါတယ္။

Problems With Dremweaver CS3

Website တစ္ခုေရးဖို႔ လာအပ္တာနဲ႔ မလုပ္တာၾကာၿပီျဖစ္တဲ့ Web ပိုင္းကို ျပန္လည္ ေျခဦးလွည့္ျဖစ္ပါတယ္။ Web ကို အရူးအမူးလုပ္ခဲ့တုန္းက Dreamweaver က Version 8 အခုဆိုရင္ CS4 (ver 10) ေတာင္ ေရာက္ေနပါေရာ။ CS3 ေရာ CS4 ေရာ ေခြသာ၀ယ္ထားတာ။ တစ္ခါမွ မတင္ရေသးဘူး။ အဲဒါနဲ႔ပဲ ကဲ ဒီ Website ကိုေတာ့ CS3 နဲ႔ လုပ္မယ္ဆိုၿပီး Dreamweaver CS3 ကို ေကာက္တင္ပါေလေရာ။ Install လုပ္ခ်ိန္က အရင္ကထက္ ပိုၾကာသြားတယ္ဆိုတာ သတိထားမိတယ္။ Install ၿပီးေတာ့ Crack ျဖည္ၿပီး သံုးဖို႔ စဖြင့္တယ္။ ေနာက္ သီခ်င္းနားေထာင္ဦးမယ္ဆိုၿပီး Windows Media Player ကို ဖြင့္တယ္။ WMP ဖြင့္ခ်ိန္ဟာ ေတာ္ေတာ္ေလးၾကာသြားတယ္ဆိုတာ သတိျပဳမိတယ္။ မသကၤာတာနဲ႔ Task Manager ကို ဖြင့္ၾကည့္ေတာ့ Dreamweaver CS3 ဟာ CPU Usage 100% ျပေနတာကို ေတြ႔ရပါတယ္။ CS3 ဟာ အဲဒီေလာက္ ယူသံုးသလားဆိုတာ မေတြးတတ္ေအာင္ကို ျဖစ္ရပါတယ္။ Install လုပ္တဲ့စက္က Celeron D, 512 MB ပါ။

Crack ေၾကာင့္ ျဖစ္တာလားဆိုၿပီး Dreamweaver ကိုျဖဳတ္၊ ျပန္တင္၊ Crack မျဖည္ဘဲ Trial Version နဲ႔ run လည္း CPU Usage က 100% ကေန က်ကိုမက်ေတာ့ဘူး။ အဲဒါနဲ႔ပဲ Dual Core စက္တစ္လံုးမွာ သြားတင္ၾကည့္တယ္။ Dual Core မွာေတာ့ 50% ထိပဲ သူက သံုးတယ္။ ဒါေပမဲ့ 50% သံုးတယ္ဆိုတာ နည္းနည္းေနာေနာမွ မဟုတ္တာ။

ေနာက္တစ္ခ်က္ စဥ္းစားမိတာက Installer ထဲမွာ အေကာင္ေတြဘာေတြ ပါလို႔မ်ားလားလို႔ ေတြးမိေသးတယ္။ Kaspersky နဲ႔ေတာ့ စစ္ေသးတယ္။ မေတြ႕ဘူး။ ေနာက္ အားတဲ့ရက္က်မွ Dreamweaver CS3 ကို Adobe ကေန Download ဆဲြၿပီး တင္ၾကည့္ရဦးမယ္။ အဲဒါမွ အေျဖေပၚမွာပဲ။

အခုေတာ့ CS4 ကို တင္ၿပီး လုပ္ေနတယ္။ လက္ရွိသံုးေနသေလာက္ကေတာ့ ေတာ္ေတာ္ေကာင္းတယ္။ CSS ပိုင္းမွာ အရမ္းျပည့္စံုသြားတယ္။ ၿပီးေတာ့ Ajax ပိုင္း။ Ajax အတြက္ Adobe က သူတို႔ရဲ႕ Spry ကို တစ္ခါတည္း ထည့္ေပးလိုက္တယ္။ Marketing ဆင္းတာနဲ႔တူပါတယ္။ ကၽြန္ေတာ္ေတာင္ တျခား Ajax Framework ေတြကို ေလ့လာမလို႔။ သူက အခုလို Spry ကိုပဲ ထည့္ေပးလိုက္ေတာ့ Spry ပဲ သံုးျဖစ္ေတာ့မယ္နဲ႔ တူပါတယ္။ မွတ္မိေသးတယ္။ Spry ထြက္ခါစက ေန႔ေန႔ညည စမ္းသပ္ၿပီးေရးၾကည့္ခဲ့တဲ့ coding ေတြက အခုက် built-in ေတြျဖစ္သြားေရာ။ ရင္နာလိုက္တာ။

XMAPP

အသိေနာက္က်ေလျခင္းဗ်ာ။ XMAPP ကို အခုမွသိတယ္။ အရင္တုန္းက PHP ေလး run ဖို႔အတြက္ IIS တင္ရတယ္၊ PHP ကို တင္ရတယ္၊ Database ပါသံုးမယ္ဆိုရင္ MySQL ပါတင္ရတယ္။ သံုးခုေတာင္တင္ရတယ္ဗ်ာ။ install လုပ္ရံုနဲ႔လည္း မၿပီးဘူး။ Configuration ေတြလည္း လုပ္ရေသးတယ္။ ေဟာ အခု XMAPP ကေတာ့ One Click တည္းနဲ႔ Apache ေရာ PHP ေရာ MySQL ပါ အကုန္တင္ေပးသြားတယ္။ ခ်က္ခ်င္း run ရံုပဲ။ Web Server က IIS ေတာ့ မဟုတ္ဘူးေပါ့။ Apache ကို တင္ေပးသြားတယ္။ ကၽြန္ေတာ္ကေတာ့ Apache ကို ပိုႀကိဳက္တယ္။ Free ေပးတာေၾကာင့္ေလ။ ၿပီးေတာ့ Log ေတြ ၾကည့္လို႔ရတယ္။
ကဲ စာဖတ္သူလည္း PHP ကို ေလ့လာခ်င္တယ္ဆိုရင္ XMAPP ကိုသာ သံုးလိုက္ေတာ့ဗ်ာ။

Inserting a Button in Blog Post (2)

ဟိုတစ္ေန႔က Blog Post ထဲ button ထည့္နည္းကို ေရးခဲ့တာ code ေတြ မမွန္လို႔ အလုပ္မလုပ္ခဲ့ပါဘူး။ အခု အမွန္ကို ျပင္လိုက္ပါၿပီ။ ၿပီးေတာ့ အဲဒီတုန္းကလို javascript မွာ function ေၾကျငာစရာမလိုပါဘူး။ ကိုယ္ button ထည့္ခ်င္တဲ့ ေနရာမွာ ေအာက္က code ေလး တစ္ၾကာင္းတည္းကိုပဲ ရိုက္ထည့္လိုက္ပါ။
<input type="button" onclick="window.location='Insert your URL'" value="Enter Button Name">

ဒါဆိုရင္ေတာ့ ေသခ်ာေပါက္ ရသြားၿပီေပါ့ဗ်ာ။

Inserting a Button in Blog Post

ေတာ္ေတာ္ေလးေတာ့ ၾကာခဲ့ပါၿပီ။

ကၽြန္ေတာ့္ဆီကို အီးေမးလ္တစ္ေစာင္ ေရာက္လာခဲ့ဖူးတယ္။ သူေမးတာက ထူးထူးျခားျခား။ Blog တင္တဲ့အခါမွာ Post ထဲကို button ေလးေတြ ထည့္လို႔မရဘူးလားတဲ့။ ျဖစ္ခ်င္တာက အဲဒီ button ေလးကို ႏွိပ္လိုက္ရင္ browser မွာ Link တစ္ခုခုကို new window နဲ႔ ပြင့္သြားေစခ်င္တယ္တဲ့။ လုပ္လို႔ရလား။ ရရင္ေကာ ဘယ္လို လုပ္ရမွာလဲဆိုၿပီး ေမးခဲ့ဖူးပါတယ္။

အဲဒီတုန္းကေတာ့ ကၽြန္ေတာ္က Link ခ်ိတ္တာမ်ား Text Link လုပ္လို႔ရေနတာပဲ ဘာျဖစ္လို႔ အလုပ္ရႈပ္ခံၿပီး button ႀကီးနဲ႔ ခ်ိတ္ေနမွာလဲဗ်ာဆိုၿပီး ျပန္ေျပာမိပါတယ္။ ၿပီးေတာ့ စိတ္ထဲမွာ မျဖစ္ႏိုင္ေလာက္ဘူးလို႔လည္း ထင္မိခဲ့ပါတယ္။ Post ေတြထဲမွာ စာေတြ၊ ပံုေတြ၊ ဗီြဒီယိုေတြပဲ ထည့္လို႔ရမယ္လို႔ ထင္ခဲ့တာေလ။

အခုေနာက္ပိုင္းမွာမွ Post ေတြတင္ရင္း သတိထားမိတာက Post ေရးတဲ့အခါ Edit HTML ရယ္ Compose ရယ္ ဆိုၿပီး View ႏွစ္ခုရွိတဲ့ေနရာမွာ Edit HTML ထဲမွာ ကိုယ္ႀကိဳက္တဲ့ HTML code ေတြပါ ထပ္ထည့္လို႔ ရတာဆိုတာကို ေတြ႕ရပါတယ္။ ၿပီးေတာ့ Javascript ေရာ ရသလားဆိုၿပီး ကၽြန္ေတာ္စမ္းၾကည့္တယ္။ ရတယ္။

ဒါေၾကာင့္ အခု Post မွာ button ထည့္ၿပီး Link ခ်ိတ္နည္းေလးကို Share ေပးလိုက္ပါတယ္။ Blogger ေတြ အတြက္ေတာ့ အသံုးက်မွာပါ။

ပထမဆံုး ေအာက္က script ေလးကို Post ေရးတဲ့ေနရာမွာ Edit HTML ကို ေျပာင္းၿပီး ထည့္လိုက္ပါ။

<br /><script type="text/javascript"> var newwindow=null; function openlink(){window.location="Enter you link h ere";}</script>

Enter your link here ေနရာမွာေတာ့ ကိုယ္ခ်ိတ္မယ့္ link ကို ထည့္ေပးရမွာေပါ့။ ၿပီးေတာ့ ေအာက္ကေန ဒါမ်ိဳးေလး ဆက္ေရးလိုက္ပါ။

<input type="button" onclick="openlink()" value="Enter button name here">

Enter button name ေနရာမွာေတာ့ button မွာေပၚခ်င္တဲ့ နာမည္ကုိ ထည့္ေပးရပါမယ္။

ကဲၿပီးရင္ ကိုယ္တင္မယ့္ Post ကို ဆက္ေရးၿပီး Publish လုပ္လိုက္တဲ့အခါမွာ Post ထဲမွာ button ေလးတစ္ခု ေရာက္ေနမွာျဖစ္ၿပီး အဲဒီ button ကို ႏွိပ္လုိက္ရင္ ကိုယ္ေပးထားတဲ့ Link အတိုင္း Browser က new window နဲ႔ ဖြင့္ေပးပါလိမ့္မယ္။

နမူနာအေနနဲ႔ ေအာက္က button ေလးကို ႏွိပ္ၾကည့္လိုက္ပါဦးဗ်ာ။ google ကို ေနာက္ထပ္ new window နဲ႔ ဖြင့္ေပးပါလိမ့္မယ္။

ေနာက္ရက္က်ရင္ Textarea ထည့္နည္းေလးပါ တင္ေပးထားပါဦးမယ္။

ႏွိပ္လည္း Google ကို ေရာက္မွာမဟုတ္ေသးဘူးဗ်ိဳ႕။ Code ျပင္ရဦးမွာ။ အခုေတာ့ သြားစရာရွိလို႔ သြားလိုက္ဦးမယ္။ ေနာက္ရက္မွ ျပင္ထားလိုက္မယ္။

Check Google Analytics for Today

Blog ေတြမွာ Google Analytics ကို အေတာ္မ်ားမ်ား သံုးၾကမယ္ ထင္ပါတယ္။ သူရဲ႕ ေနာက္ဆံုး ရက္ 30 ၾကည္႕ႏိုင္တဲ့ default view မွာ ယေန႔ အန္နာလိုက္စ္ လုပ္ထားတာ ၾကည္႕လို႔မရပါဘူး။ ဒီေန႔ အတြက္ ၾကည္႕မယ္ဆို ဖန္တီး ရပါတယ္။

အရင္ဆံုး Google Analytics မွာ login ၀င္ၿပီး မိမိ ID ယူရပါမယ္။ Dashboard ထိ သြားၿပီး browser address bar မွာ ?reset=1&id= ကုဒ္ကို ရွာလိုက္ပါ။ အဲဒီကုဒ္ရဲ႕ေနာက္က ဂဏာန္းဟာ မိမိ ID ပါဘဲ။

javascript:var%20d=new%20Date();var%20pad='';var%20padm='';if(d.getDate()<10){pad='0';};if(d.getMonth()<10){padm='0';};var%20t=''+d.getFullYear()+padm+(d.getMonth()+1)+pad+d.getDate();location.href='https://www.google.com/analytics/reporting/dashboard?id=YOURID&pdr='+t+'-'+t+'&cmp=average'

Google မွာ login ၀င္ၿပီး အထက္က ကုဒ္ေတြကို address bar မွာ copy/paste နဲ႔ ဖြင့္လိုက္ပါ။ အဆိုပါ လင့္ကို bookmark toolsbar ေပါ ္ သိမ္းဆည္းပါမယ္။ Toolsbar ေပါ ္က today analytics icon ေပါ ္ right click \properties သို႔ သြားၿပီး Location ရဲ႕ ?reset=1&id= ေနာက္က YOURID ေနရာမွာ မိမိ ID အစား သြင္းေပးၿပီး ok ေပါ့။

ေနာက္ပိုင္း Toolsbar က icon ကို ႏိွပ္ၿပီး မိမိ web blog ေတြရဲ႕ ေရာက္ဆဲ analytics ကို ၾကည္႕ႏိုင္ပါၿပီ။ IE နဲ႕ firefox ႏွစ္မ်ိဳးလံုး မွာ သံုးႏိုင္ပါတယ္။ Google ခ်စ္သူေတြ ေပ်ာ္ရႊင္ ၾကပါေစ....

Website တစ္ခုကို Customize လုပ္ၾကည့္ျခင္း

ဘာရယ္ေတာ့မဟုတ္ပါဘူး။ အေပ်ာ္သေဘာေလးအေနနဲ႔ လုပ္ၾကည့္ရေအာင္။

ကြၽန္ေတာ္တို႔ေတြ Website ေတြ၊ Blog ေတြၾကည့္ရင္ ဒီအတိုင္းလိုက္ၾကည့္ေနရတာ ပ်င္းစရာေကာင္းတယ္ဗ်ာ။ အဲဒီ Website ဒါမွမဟုတ္ Blog ကိုယ္ဖ်က္ခ်င္တဲ့စာေတြ၊ ပံုေတြ လိုက္ဖ်က္ၾကည့္ရေအာင္။ Google နဲ႔ ကြၽန္ေတာ္ နမူနာလုပ္ျပမယ္။

၁။ Browser ကို ဖြင့္ၿပီး Address Bar မွာ www.google.com လို႔ ရိုက္ၿပီး Enter ေခါက္ပါ။
၂။ Done သြားရင္ အဲဒီ Address Bar မွာပဲ ေအာက္မွာ ျပထားတဲ့ javascript code ေလးကို copy ကူး၊ paste လုပ္ၿပီး Enter ေခါက္လုိက္ပါ။

javascript: document.body.contentEditable= 'true'; document.designMode='on'; void 0

၃။ ဒါဆိုရင္ Google စာမ်က္ႏွာမွာ ရိွေနတဲ့ ပံုေတြ၊ စာေတြကို select လိုက္လုပ္ၿပီး Delete key ႏိွပ္ ဖ်က္ႏိုင္ပါၿပီ။ ေအာက္မွာ ကြၽန္ေတာ္ Google Page မွာ ရိွေနတဲ့ စာေတြ၊ ပံုေတြကို ကြၽန္ေတာ္လိုက္ဖ်က္ထားတယ္။ ၾကည့္လုိက္ပါဦး။