tag:blogger.com,1999:blog-44476429109543527462024-03-13T11:53:58.863+07:00Learn To ProgramIncrease Your Knowlegde and Build Your Skill!Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.comBlogger542125tag:blogger.com,1999:blog-4447642910954352746.post-16505816214460599702012-05-14T12:37:00.004+07:002012-05-14T12:37:58.204+07:00Positioning Properties<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:TrackMoves/>
<w:TrackFormatting/>
<w:PunctuationKerning/>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:DoNotPromoteQF/>
<w:LidThemeOther>EN-US</w:LidThemeOther>
<w:LidThemeAsian>X-NONE</w:LidThemeAsian>
<w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:DontGrowAutofit/>
<w:SplitPgBreakAndParaMark/>
<w:DontVertAlignCellWithSp/>
<w:DontBreakConstrainedForcedTables/>
<w:DontVertAlignInTxbx/>
<w:Word11KerningPairs/>
<w:CachedColBalance/>
</w:Compatibility>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
<m:mathPr>
<m:mathFont m:val="Cambria Math"/>
<m:brkBin m:val="before"/>
<m:brkBinSub m:val="--"/>
<m:smallFrac m:val="off"/>
<m:dispDef/>
<m:lMargin m:val="0"/>
<m:rMargin m:val="0"/>
<m:defJc m:val="centerGroup"/>
<m:wrapIndent m:val="1440"/>
<m:intLim m:val="subSup"/>
<m:naryLim m:val="undOvr"/>
</m:mathPr></w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" DefUnhideWhenUsed="true"
DefSemiHidden="true" DefQFormat="false" DefPriority="99"
LatentStyleCount="267">
<w:LsdException Locked="false" Priority="0" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Normal"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="heading 1"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 2"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 3"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 4"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 5"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 6"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 7"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 8"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 9"/>
<w:LsdException Locked="false" Priority="39" Name="toc 1"/>
<w:LsdException Locked="false" Priority="39" Name="toc 2"/>
<w:LsdException Locked="false" Priority="39" Name="toc 3"/>
<w:LsdException Locked="false" Priority="39" Name="toc 4"/>
<w:LsdException Locked="false" Priority="39" Name="toc 5"/>
<w:LsdException Locked="false" Priority="39" Name="toc 6"/>
<w:LsdException Locked="false" Priority="39" Name="toc 7"/>
<w:LsdException Locked="false" Priority="39" Name="toc 8"/>
<w:LsdException Locked="false" Priority="39" Name="toc 9"/>
<w:LsdException Locked="false" Priority="35" QFormat="true" Name="caption"/>
<w:LsdException Locked="false" Priority="10" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Title"/>
<w:LsdException Locked="false" Priority="1" Name="Default Paragraph Font"/>
<w:LsdException Locked="false" Priority="11" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtitle"/>
<w:LsdException Locked="false" Priority="22" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Strong"/>
<w:LsdException Locked="false" Priority="20" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Emphasis"/>
<w:LsdException Locked="false" Priority="59" SemiHidden="false"
UnhideWhenUsed="false" Name="Table Grid"/>
<w:LsdException Locked="false" UnhideWhenUsed="false" Name="Placeholder Text"/>
<w:LsdException Locked="false" Priority="1" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="No Spacing"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 1"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 1"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 1"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 1"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 1"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 1"/>
<w:LsdException Locked="false" UnhideWhenUsed="false" Name="Revision"/>
<w:LsdException Locked="false" Priority="34" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="List Paragraph"/>
<w:LsdException Locked="false" Priority="29" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Quote"/>
<w:LsdException Locked="false" Priority="30" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Quote"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 1"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 1"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 1"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 1"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 1"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 1"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 1"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 1"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 2"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 2"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 2"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 2"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 2"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 2"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 2"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 2"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 2"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 2"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 2"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 2"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 2"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 2"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 3"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 3"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 3"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 3"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 3"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 3"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 3"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 3"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 3"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 3"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 3"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 3"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 3"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 3"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 4"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 4"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 4"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 4"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 4"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 4"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 4"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 4"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 4"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 4"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 4"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 4"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 4"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 4"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 5"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 5"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 5"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 5"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 5"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 5"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 5"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 5"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 5"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 5"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 5"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 5"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 5"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 5"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 6"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 6"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 6"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 6"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 6"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 6"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 6"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 6"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 6"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 6"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 6"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 6"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 6"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 6"/>
<w:LsdException Locked="false" Priority="19" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtle Emphasis"/>
<w:LsdException Locked="false" Priority="21" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Emphasis"/>
<w:LsdException Locked="false" Priority="31" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtle Reference"/>
<w:LsdException Locked="false" Priority="32" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Reference"/>
<w:LsdException Locked="false" Priority="33" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Book Title"/>
<w:LsdException Locked="false" Priority="37" Name="Bibliography"/>
<w:LsdException Locked="false" Priority="39" QFormat="true" Name="TOC Heading"/>
</w:LatentStyles>
</xml><![endif]--><!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}
</style>
<![endif]-->
<br />
<div class="MsoListParagraphCxSpFirst" style="margin-left: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo1; text-indent: -18.0pt;">
<span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;"><span style="font: 7.0pt "Times New Roman";"></span></span></span><b style="font-family: "Courier New",Courier,monospace;">Positioning Properties</b></div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt; text-indent: -18pt;">
<span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">1.<span style="-moz-font-feature-settings: normal; -moz-font-language-override: normal; font-size-adjust: none; font-size: 7pt; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
</span></span></span>Static</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt;">
This was default positioning.</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt;">
Top, right, bottom and left don’t make effects</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt;">
Parent=all. Has no effect. Keep everything in order.</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt; text-indent: -18pt;">
<span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">2.<span style="-moz-font-feature-settings: normal; -moz-font-language-override: normal; font-size-adjust: none; font-size: 7pt; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
</span></span></span>Fixed</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt;">
This like absolute positioning. Like absolute but more extreme – it out
of the order even the parent box. It’s work even the parent is relative
positioning.</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt;">
Parent=all. Out of control of the parent box.</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt;">
Display block is broken.</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt;">
It like display:none, but visible.</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt; text-indent: -18pt;">
<span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">3.<span style="-moz-font-feature-settings: normal; -moz-font-language-override: normal; font-size-adjust: none; font-size: 7pt; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
</span></span></span>Relative</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt;">
It’s always placed relative to its normal position. If TRBL is set to
zero, it no effect – coz it’s reference point is its normal position.</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt;">
Parent=all. In the control of the parent box.</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt; text-indent: -18pt;">
<span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">4.<span style="-moz-font-feature-settings: normal; -moz-font-language-override: normal; font-size-adjust: none; font-size: 7pt; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;">
</span></span></span>Absolute</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt;">
Parent=relative. In the control of parent box.</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt;">
Parent=static. Out of control of parent box.</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt;">
Parent=fixed. Out of control of parent box.</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt;">
Parent=absolute. In the control of the parent box.</div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt;">
Display block is broken.</div>
<div class="MsoListParagraphCxSpLast" style="font-family: "Courier New",Courier,monospace; margin-left: 72pt;">
It
like display:none, but visible.</div>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com3tag:blogger.com,1999:blog-4447642910954352746.post-36226677446257690792012-05-10T22:53:00.005+07:002012-05-10T22:53:52.714+07:00Buttoning<h1>Beautiful Look And Feel Of Button</h1><br /><button>A Click</button><br /><br /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;"><style></span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">button</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">{</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">background-image: -moz-linear-gradient(center top,#faf,#555);</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">border: 1px solid #aaa;</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">-moz-border-radius: 5px;</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">height: 30px;</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">width: 100px;</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">color: white;</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">}</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;"></style></span>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com1tag:blogger.com,1999:blog-4447642910954352746.post-15073285000589046162012-05-10T22:52:00.003+07:002012-05-10T22:52:55.433+07:00Triangleling<span style="font-family: "Courier New",Courier,monospace;"><h1>Counter Back Of Triangle</h1></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"><p></span></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;"><style></span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">p</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">{</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">display: block;</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">width: 0px;</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">height: 0px;</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">border-color: #aaa transparent transparent;</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">border-style: solid dashed dashed;</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">border-width: 100px 100px 0px;</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;">}</span><br style="color: #38761d; font-family: "Courier New",Courier,monospace;" /><span style="color: #38761d; font-family: "Courier New",Courier,monospace;"></style></span>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com1tag:blogger.com,1999:blog-4447642910954352746.post-14759130343112305402012-05-09T04:32:00.002+07:002012-05-09T04:32:43.269+07:00Query Suggestion<div style="font-family: "Courier New",Courier,monospace;">
<h1>Drop Drown</h1><br /><input type="text" id="text" onkeyup="show(event)"/><br /><p id="view"></p><br /><br /><br /><script><br />var data = ["apple","banana","mango",</div>
<div style="font-family: "Courier New",Courier,monospace;">
"watermelon","orange","papaya"];<br /><br />function show(event){<br /> var text = document.getElementById('text').value;<br /> var view = document.getElementById('view');<br /> var len = text.length;<br /> var plot = "";<br /><br /> if (len==0){<br /> view.innerHTML = "";<br /> return;<br /> }<br /><br /> // we iterate all the available data to match on </div>
<div style="font-family: "Courier New",Courier,monospace;">
// the server<br /> for(i=0;i<data.length;i++){<br /> // we just take the query that match </div>
<div style="font-family: "Courier New",Courier,monospace;">
// the first main of the saved words on the server.<br /> // for each length of the string.<br /> // we compare if the query from the user </div>
<div style="font-family: "Courier New",Courier,monospace;">
//is match the defined words.<br /> if(text==data[i].substr(0,len)){<br /> plot = plot+"<br/>"+data[i];<br /> }<br /> }<br /><br /> view.innerHTML = plot;<br />}<br /><br /></script></div>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-75441024670830933062011-05-30T00:56:00.001+07:002011-05-30T01:02:59.590+07:00Function Pointer As Struct Member<div style="color: black; font-family: Times,"Times New Roman",serif;">
Function pointer as struct member - with arguments:</div>
<div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">
#include <stdio.h><br />
<br />
struct aritmathic{<br />
int a;<br />
int b;<br />
int (*add)(int, int);<br />
int (*subtract)(int, int);<br />
int (*multiply)(int, int);<br />
};<br />
<br />
int Add(int a, int b){<br />
return (a+b);<br />
}<br />
<br />
int Subtract(int a, int b){<br />
return (a-b);<br />
}<br />
<br />
int Multiply(int a, int b){<br />
return (a*b);<br />
}<br />
<br />
int main(){<br />
<br />
struct aritmathic ar;<br />
ar.a = 4;<br />
ar.b = 5;<br />
<br />
ar.add = Add;<br />
ar.subtract = Subtract;<br />
ar.multiply = Multiply;<br />
<br />
int a = ar.add(ar.a, ar.b);<br />
int b = ar.subtract(ar.a, ar.b);<br />
int c = ar.multiply(ar.a, ar.b); <br />
<br />
printf("%d\n%d\n%d", a, b, c);<br />
<br />
return 0;<br />
}<br />
<br />
<br />
<div style="color: black; font-family: Times,"Times New Roman",serif;">
Simpler version for above:</div>
#include <stdio.h><br /><br />struct aritmathic{<br /> int a;<br /> int b;<br /> int (*add) (struct aritmathic*);<br /> int (*subtract) (struct aritmathic*);<br /> int (*multiply) (struct aritmathic*);<br />};<br /><br />int Add(struct aritmathic* ar){<br /> return (ar->a + ar->b);<br />}<br /><br />int Subtract(struct aritmathic* ar){<br /> return (ar->a - ar->b);<br />}<br /><br />int Multiply(struct aritmathic* ar){<br /> return (ar->a * ar->b);<br />}<br /><br />int main(){<br /><br /> struct aritmathic ar;<br /> ar.a = 4;<br /> ar.b = 5;<br /><br /> ar.add = Add;<br /> ar.subtract = Subtract;<br /> ar.multiply = Multiply;<br /><br /> int a = ar.add(&ar);<br /> int b = ar.subtract(&ar);<br /> int c = ar.multiply(&ar); <br /><br /> printf("%d\n%d\n%d", a, b, c);<br /><br /> return 0;<br />}</div>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com4tag:blogger.com,1999:blog-4447642910954352746.post-81603976124398778362011-05-30T00:46:00.000+07:002011-05-30T00:46:13.747+07:00Below is a simple example of function pointer as a member of struct:<br />
<br />
<div style="color: #0b5394; font-family: "Courier New",Courier,monospace;">
#include <stdio.h><br /><br />struct data{<br /> void(*hello)();<br />};<br /><br />void hello(){<br /> puts("Hello comes from C");<br />}<br /><br />int main(){</div>
<div style="color: #0b5394; font-family: "Courier New",Courier,monospace;">
<span style="color: #6aa84f;"> // the first way</span><br /> struct data d;<br /> d.hello = hello;<br /> d.hello();</div>
<div style="color: #0b5394; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #0b5394; font-family: "Courier New",Courier,monospace;">
</div>
<div style="color: #0b5394; font-family: "Courier New",Courier,monospace;">
<span style="color: #6aa84f;"> // the alternate way</span><br /> struct data dd;<br /> struct data* ptr = &dd;<br /> ptr->hello = *hello;<br /> ptr->hello();<br /> <br /> return 0;<br />}</div>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-7369966333508116782011-05-20T22:04:00.002+07:002011-05-20T22:08:05.513+07:00Better Looking Search Box<div style="color: #88f; font: 14px monospace;">
<div id="search"><br/>
<form><br/>
<input type="text" id="text"/><br/>
<input type="submit" id="submit" value="Search"/><br/>
</form><br/>
</div><br/><br/>
<style><br/>
</div>
<div style="color: #ac0; font: 14px monospace;">
#search{<br/>
border: 1px solid #ccc;<br/>
max-width: -moz-fit-content;<br/>
padding: 1px;<br/>
-moz-border-radius: 5px;<br/>
}<br/>
#text{<br/>
border: 0px solid #ccc;<br/>
-moz-border-radius: 5px 0px 0px 5px;<br/>
padding-left: 10px;<br/>
}<br/>
#submit{<br/>
background: #88f;<br/>
color: #fff;<br/>
font: 14px arial;<br/>
font-weight: bold;<br/>
border: 0px solid #000;<br/>
padding: 1px 5px;<br/>
-moz-border-radius: 0px 5px 5px 0px;<br/>
cursor: pointer;<br/>
}<br/>
#submit:hover{<br/>
background: #55f;<br/>
}<br/>
form{<br/>
margin: 0px;<br/>
padding: 0px;<br/>
}<br/>
</div>
<div style="color: #88f;font: 14px monospace;">
</style><br/>
</div>
<h2>The result:</h2>
<div id="search">
<form>
<input type="text" id="text"/>
<input type="submit" id="submit" value="Search"/>
</form>
</div>
<style>
#search{
border: 1px solid #ccc;
max-width: -moz-fit-content;
padding: 1px;
-moz-border-radius: 5px;
}
#text{
border: 0px solid #ccc;
-moz-border-radius: 5px 0px 0px 5px;
padding-left: 10px;
}
#submit{
background: #88f;
color: #fff;
font: 14px arial;
font-weight: bold;
border: 0px solid #000;
padding: 1px 5px;
-moz-border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
#submit:hover{
background: #55f;
}
form{
margin: 0px;
padding: 0px;
}
</style>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-77507541961284748812011-05-17T03:07:00.000+07:002011-05-17T03:07:55.663+07:00SSL - Generate RSA KeyTo simply generate rsa key to stdout in default 512<br />
<div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">
OpenSSL> genrsa</div>
For 1024<br />
<div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">
OpenSSL> genrsa 1024</div>
For saving it to file<br />
<div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">
OpenSSL> genrsa -out mykey.pem 1024</div>
<br />
To generate public RSA key, use<br />
<span style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">OpenSSL> rsa -in mykey.pem -pubout</span><br />
<br />
Read more on <a href="http://www.madboa.com/geek/openssl/">here</a>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-50139069289667882622011-05-17T02:53:00.001+07:002011-05-17T02:54:33.595+07:00OpenSSL IntroductionTo encrypt a text file use:<br />
<div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">
OpenSSL> enc -base64 -in myfile.txt</div>
or<br />
<span style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">OpenSSL> enc -base64 -in myfile.txt -out myfile.txt.enc</span><br />
or just a test using pipe<br />
<span style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">D:\git\bin>echo "Hello World" | openssl enc -base64</span><br />
To decrypt, use<br />
<span style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">OpenSSL> enc -base64 -d -in myfile.txt.enc</span><br />
To decrypt from pipe, use<br />
<span style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">D:\git\bin>echo "encrypted" | openssl enc -base64 -d</span><br />
Learn more on <a href="http://www.madboa.com/geek/openssl/">here</a>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-87134557148084385982011-05-15T20:36:00.002+07:002011-05-15T20:40:20.159+07:00YUI - Starting<div id="content">
<div class="subcontent">
<h2 class="subtitle">Introduction</h2>
<p>
Here's a sample for how to start using YUI framework.<br/>
First, linking for the API<br/>
<div class="code">
<h3 class="codetitle">Code:</h3>
<div class="codecontent">
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"
charset="utf-8"></script><br/>
</div>
</div>
Second, make your control<br/>
<div class="code">
<h3 class="codetitle">Code:</h3>
<div class="codecontent">
<input type="text" id="ac-input"/><br/>
</div>
</div>
Third, write the code<br/>
<div class="code">
<h3 class="codetitle">Code:</h3>
<div class="codecontent">
<script><br/>
YUI.use('autocomplete', function(Y){<br/>
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {<br/>
source: ['apple','amazon','air','america']<br/>
});<br/>
});<br/>
</script>
</div>
</div>
</p>
</div>
</div>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-11317346492734891512011-05-14T20:39:00.011+07:002011-05-14T21:15:00.165+07:00CSS - Advanced<div id="content">
<div class="subcontent">
<h2 class="subtitle">Introduction</h2>
<p>
Here's some code that show some advanced of CSS that is practical for use.
</p>
</div>
<div class="subcontent">
<h2 class="subtitle">Rounded Box</h2>
<p>
It's easy to make a rounded box. Even you don't need use image for it.
<div class="code">
<h3 class="codetitle">Code</h3>
<div class="codecontent">
<div>You don't need image for making box looks like rounded</div><br/><br/>
<style><br/>
div{ <br/>
border: 1px solid #af0;<br/>
padding: 5px;<br/>
-moz-border-radius: 4px; <br/>
-webkit-border-radius: 4px;<br/>
border-radius: 4px;<br/> }<br/>
</style>
</div>
</div>
The result will be:
<div id="result">
You don't need image for making box looks like rounded
</div>
<style>
#result{ border: 1px solid #af0; padding: 5px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
</style>
</p>
</div>
<a name='more'></a>
<div class="subcontent">
<h2 class="subtitle">Box Shadow</h2>
<p>
May be you ask how to make Apple website's box shadow? It's easy to make it, you just need to add one line: -moz-box-shadow for mozilla gecko, or -webkit-box-shadow for webkit based engine (Safari and Chrome) or just box-shadow for modern browser.
<div class="code">
<h3 class="codetitle">CSS Code</h3>
<div class="codecontent">
<div>Looks, it like apple box</div><br/><br/>
<style><br/>
div{<br/>
border: 1px solid #ccc;<br/>
padding: 5px;<br/>
-moz-box-shadow: 0 0 4px #88f;<br/>
-webkit-box-shadow: 0 0 4px #88f;<br/>
box-shadow: 0 0 4px #88f;<br/>
}<br/>
</style>
</div>
</div>
The result will be:
<div id="boxshadow">
Looks, it like apple box
</div>
<style>
#boxshadow{
border: 1px solid #ccc;
padding: 5px;
-moz-box-shadow: 0 0 4px #88f;
-webkit-box-shadow: 0 0 4px #88f;
box-shadow: 0 0 4px #88f;
}
</style>
</p>
</div>
<div class="subcontent">
<h2 class="subtitle">Nicer ComboBox</h2>
<p>
Here's the code will make the combobox looks nicer.
<div class="code">
<h3 class="codetitle">HTML Code:</h3>
<div class="codecontent">
<select><br/>
<option>Select A Fruit</option><br/>
<option>Apple</option><br/>
<option>Banana</option><br/>
<option>Mango</option><br/>
<option>Orange</option><br/>
</select><br/><br/>
<style><br/>
select{<br/>
border: 1px solid #ccc;<br/>
padding: 1px;<br/>
}<br/>
</style>
</div>
</div>
The above will result:
<select id="nicercombobox">
<option>Select A Fruit</option>
<option>Apple</option>
<option>Banana</option>
<option>Mango</option>
<option>Orange</option>
</select>
<style>
#nicercombobox{
border: 1px solid #ccc;
padding: 1px;
}
</style>
</p>
</div>
</div>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-55816615172558692002011-05-10T23:58:00.004+07:002011-05-11T00:12:03.494+07:00GAE - Template<div id="content">
<div class="subcontent">
<h2 class="subtitle">Introduction</h2>
<p>
Template makes your life easier. it separating between code logic of your program to what should display on the browser. Here's I just show up what the crucial template case that not handled by Django documentation.
</p>
</div>
<div class="subcontent">
<h2 class="subtitle">Displaying List of Articles</h2>
<p>
It's really some often occurance for us to display item list. It's like blog post that consits of title, date, and content. Or it like personal data that consists of name, email, address and more. Here's for example we has some blog post:
<div class="code">
<h3 class="codetitle">Data Content</h3>
<table id="gae">
<tr><th width="20%">Title</th><th>Content</th></tr>
<tr valign="top"><td>GAE Template</td><td>GAE Template is use Django template system. So when you are accustomed for using Django, it's good for you.</td></tr>
<tr valign="top"><td>GAE Runtime</td><td>There are two available runtime for you. The first is Java and the second is Python. Whatever you choose, it should based on your preference for the language and your current skills.</td></tr>
<tr valign="top"><td>GAE Datastore</td><td>In GAE, your data is saved in database, but you never handle it directly, because Google Datastore that handles it, and in all your time, you handle the datastore. The operation for data in datastore is like in native sql, but it's more abstract than it that is called GQL - Google Query Language.</td></tr>
</table>
</div>
For example you want to display the data on the home page, what you need is you main the logic code that retrieves the data using Google datastore query.
<div class="code">
<h3 class="codetitle">Program code: main.py</h3>
<div class="codecontent">
from google.appengine.ext import webapp<br/>
from google.appengine.ext.webapp.util import run_wsgi_app<br/>
from google.appengine.ext import db<br/>
from google.appengine.ext.webapp import template<br/><br/>
class Blog(db.Model):
title = db.StringProperty()<br/>
content = db.TextProperty()<br/><br/>
class MainPage(webapp.RequestHandler):<br/>
blog = Blog()<br/>
query = db.GqlQuery("SELECT * FROM Blog")<br/>
data = []<br/>
for row in query:<br/>
mapp = {}<br/>
mapp['title'] = row.title<br/>
mapp['content'] = row.content<br/>
data.append(mapp)<br/>
</div>
</div>
</p>
</div>
</div>
<style>
#gae{
border-collapse: collapse;
margin: 5px;
}
#gae td, th{
border: 1px solid #af0;
padding: 2px;
}
</style>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-18393190337572987192011-05-10T23:36:00.004+07:002011-05-10T23:41:42.109+07:00GAE - Introduction<div id="content">
<div class="subcontent">
<h2 class="subtitle">Introduction</h2>
<p>
Google App Engine is the platform for building web application. There's a built-in framework and already hosting servince provided by Google. The application environtment is two: Java and Python. Whenever you choose one, it's up to you.
</p>
</div>
<div class="subcontent">
<h2 class="subtitle">How To</h2>
<p>
To starting development, you can download it first from <a href="http://code.google.com">code.google.com</a>. Here we use Python version environment. After finishing for downloading, please install it.
</p>
<p>
The first is create directory, named "Hello" in whatever you want to place it - for example in "D:\\Hello". The second, is create two files: app.yaml and main.py, and then write this code.
<a name='more'></a>
<div class="code">
<h3 class="codetitle" style="text-transform: lowercase;">app.yaml</h3>
<div class="codecontent">
application: hello<br/>
version: one<br/>
runtime: python<br/>
api_version: 1<br/>
<br/>
handlers:<br/>
- url: /.*<br/>
script: main.py<br/>
</div>
</div>
<div class="code">
<h3 class="codetitle" style="text-transform: lowercase;">main.py</h3>
<div class="codecontent">
print 'Content-Type: text/html'<br/>
print ''<br/>
print '<h1>Hello World From GAE!</h1>'<br/>
</div>
</div>
Now run the server by opening command line:
<div class="code">
<h3 class="codetitle">Input: command line</h3>
<div class="codecontent">
C:\\Program Files\\Google\\google_appengine\\dev_appserver.py D:\\Hello
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output: command line</h3>
<div class="outputcontent">
INFO 2011-05-10 16:44:52,967 appengine_rpc.py:158] Server: appengine.google.com<br/>
INFO 2011-05-10 16:44:53,015 appcfg.py:437] Checking for updates to the SDK.<br/>
<br/>
****************************************************************<br/>
There is a new release of the SDK available.<br/>
-----------<br/>
Latest SDK:<br/>
api_versions: ['1']<br/>
release: 1.5.0<br/>
timestamp: 1301428458<br/>
<br/>
-----------<br/>
Your SDK:<br/>
api_versions: ['1']<br/>
release: 1.4.3<br/>
timestamp: 1298921951<br/>
<br/>
-----------<br/>
Please visit http://code.google.com/appengine for the latest SDK<br/>
****************************************************************<br/>
INFO 2011-05-10 16:44:55,812 rdbms_sqlite.py:58] Connecting to SQLite databa<br/>
se '' with file 'c:\\docume~1\\mahasi~1\\locals~1\\temp\\dev_appserver.rdbms'<br/>
WARNING 2011-05-10 16:44:55,828 dev_appserver.py:4394] Could not initialize ima<br/>
ges API; you are likely missing the Python "PIL" module. ImportError: No module<br/>
named _imaging<br/>
INFO 2011-05-10 16:44:55,890 dev_appserver_main.py:543] Running application<br/>
lola on port 8080: http://localhost:8080<br/>
<br/>
</div>
</div>
No open your browser, and directed to http://localhost:8080
</p>
</div>
</div>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-48097778021891003362011-05-09T01:53:00.009+07:002011-05-09T02:38:13.710+07:00JS -- AJAX<div ica="content">
<div class="subcontent">
<p>
<h2 class="subtitle">Introduction</h2>
AJAX is a mechenisme for communicating with server through background. It enables your client web site to load and sending data from and to server respectively without reloading the page.
</p>
</div>
<div class="subcontent">
<h2 class="subtitle">Sending Data To Server</h2>
<p>
Here's a simple example on how to use ajax.
<div class="code">
<h3 class="codetitle">Program Code: Client Side</h3>
<div class="codecontent">
<input type="text" id="name"/><br/>
<input type="button" value="Send" onclick="sending()"/><br/><br/>
<script><br/><br/>
function sending(){<br/><br/>
var name = document.getElementById('name').value;<br/>
var ajax = new XMLHttpRequest();<br/>
ajax.open("GET", "hello.php?name="+name, false);<br/>
ajax.send();<br/><br/>
}<br/><br/>
</script>
</div>
</div>
It's not so complicated. The fisrt, you have the data. The second, you declare an object instance of ajax throught XMLHttpRequest. Then you send your data through ajax. Finish.<br/>
And on the server side, you need to write the code to handle it. Here's a code on PHP.
<div class="code">
<h3 class="codetitle">Program Code: hello.php</h3>
<div class="codecontent">
$name = $_GET['name'];
</div>
</div>
From the above code, you see that you handling the data as it comes from common request.
</p>
</div>
<a name='more'></a>
<div class="subcontent">
<h2 class="subtitle">Receiving Data From Server</h2>
After showing you on how to send data to server, now we are ready to handling the response data from server. Here's a code.
<div class="code">
<h3 class="codetitle">Program Code: hello.php</h3>
<div class="codecontent">
echo "Hello From Server";
</div>
</div>
The above code is the server code for sending to client. Below is the client code.
<div class="code">
<h3 class="codetitle">Program Code: </h3>
<div class="codecontent">
<h1>Message From Server:</h1><br/>
<h2 id="msg"></h2><br/>
<input type="button" value="Send" onclick="receive()"/><br/><br/>
<script><br/><br/>
function receive(){<br/><br/>
var msg = document.getElementById('msg');<br/>
var ajax = new XMLHttpRequest();<br/>
ajax.open('GET', 'hello.php', false);<br/>
ajax.send();<br/>
msg.innerHTML = ajax.responseText;<br/><br/>
}<br/><br/>
</div>
</div>
In the above code, we will get the message from server and then display it.
</div>
<div class="subcontent">
<h2 class="subtitle">Special Case: Ajax For Local File</h2>
<p>
If you have no web server, don't be hopeless. Because you can try simple ajax processing using local file. Here's a step: create a directory on D:\, and name it ajax. Then open an text editor, write this text below, and save it as hello.txt
<div class="code">
<h3 class="codetitle">Text File: hello.txt</h3>
<div class="codecontent">
Hello. This comes from local file.
</div>
</div>
Then make second file, write this code and save it as lola.html
<div class="code">
<h3 class="codetitle">Program Code: lola.html</h3>
<div class="codecontent">
<h1>What the message from a local file?</h1><br/>
<h2 id="msg"></h2><br/>
<input type="button" value="Load..." onclick="load()"/><br/><br/>
<script><br/><br/>
function load(){<br/><br/>
var msg = document.getElementById('msg');<br/><br/>
var ajax = new XMLHttpRequest();<br/>
ajax.open('GET', 'hello.txt', false);<br/>
ajax.send();<br/><br/>
msg.innerHTML = ajax.responseText;<br/><br/>
}<br/><br/>
</script;>
</div>
</div>
</p>
</div>
</div>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-15246322153828738612011-05-09T00:25:00.016+07:002011-05-09T01:38:05.085+07:00JS - JSON<div id="content">
<div class="subcontent">
<h2 class="subtitle">Introduction</h2>
<p>
JSON is a data format for transferring data as an alternative to XML. JSON is ligter than XML. The syntax is like mapping.
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
var data = {<br/>
"name": "Lady Gaga",<br/>
"city": "New York",<br/>
"age": 24<br/>
}
</div>
</div>
In the above example, we have JSON data format.
</p>
</div>
<a name='more'></a>
<!----------------accessing and modifying------------>
<div class="subcontent">
<h2 class="subtitle">Accessing And Modifying</h2>
For accessing JSON data, we use dot operator. For above example, we use
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
var the_name = data.name;<br/>
var the_cityy = data.city;<br/>
var the_age = data.age;<br/>
alert("Name: "+ the_name +"\nCity: "+ the_city +"\nAge: "+ the_age)
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
Name: Lady Gaga<br/>
City: New York<br/>
Age: 24
</div>
</div>
You also use the dot operator for modifying the data.
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
data.name = "Jenifer Lopez";<br/>
alert("Name: "+ data.name);
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
Name: Jenifer Lopez
</div>
</div>
In the above code, we modify the data name from "Lady Gaga" to "Jenifer Lopez"
</div>
<!------------end of accessing and modifying data------------->
<!----------transferring JSON data through Ajax---------->
<div class="subcontent">
<h2 class="subtitle">Transfering JSON Data Through Ajax</h2>
JSON is very suitable for transferring data from client to server. The first step, you encode your data to JSON format, then sending it through AJAX. After it arrived on the server side, then processing it as server code. Here's we will use PHP as server code.
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
<div>Name: <input type="text" id="name"/></div><br/>
<div>City: <input type="text" id="city"/></div><br/>
<input type="button" onclick="sending()" value="Send Data"/><br/><br/>
<script><br/><br/>
function sending(){<br/>
var name = document.getElementById('name').value;<br/>
var city = document.getElementById('city').value;<br/><br/>
var data = {"name":name, "city":city};<br/><br/>
var ajax = new XMLHttpRequest();<br/>
var json_data = JSON.stringify(data);<br/>
ajax.open("GET", "hello.php?data="+ json_data, false);<br/>
ajax.send();<br/>
}<br/><br/>
</script>
</div>
</div>
In the above code we use JSON for transferring data - name and city - to server. The process is follows: After you get your data, you change the data format to json data format. Then you use JSON.strigify(json_data_format_here) to formatting it to string literal. You can try that this is a string literal by writing alert(json_data). And the last section is that you let AJAX to handle the transfer process.
<br/>
On the server side, you need to write this code.
<div class="code">
<h3 class="codetitle">Program Code: hello.php</h3>
<div class="codecontent">
$json_data = $_GET['data'];<br/><br/>
// conver the json data format to associative array<br/>
$data = json_decode($json_data);<br/>
<br/>
// get the name and city<br/>
$name = $data["name"];<br/>
$city = $data["city"];<br/>
</div>
</div>
The above is a code on how to handle json data format from client. The first step, you catch the data value using commong global GET variable. But the data in this stage is till in the form of JSON string, so we need to convert it to PHP array for conveniently handling - here we use json_decode().
</div>
<!--------------- end of transferring data to server through ajax ----------->
<div class="subcontent">
<h2 class="subtitle">Handling JSON Data From Server</h2>
It's also convenient to handling the received data from the server. Here's a practical example using PHP. Write this code in hello.php
<div class="code">
<h3 class="codetitle">Program Code: hello.php</h3>
<div class="codecontent">
$data = {<br/>
"name" => "lady gaga",<br/>
"city" => "new york"<br/>
}<br/>
$json_data = json_oncode($data);<br/>
echo $json_data;
</div>
</div>
In the above code, you see that the data type is associative array. Yes, JSON and associative array, map or dictionary is same. All of them has feature key value pairs. The firstly, we have data in the format of associative array, then we encode it to JSON format through json_encode. After that we display it using echo - sending to client if requested.
<br/>
On the client side, the code is:
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
<h1>Name: <span id="name"></span></h1><br/>
<h1>City: <span id="city"></span></h1><br/>
<input type="button" onclick="load()" value="Load JSON Data"/>
<br/>
<script><br/><br/>
function load(){<br/>
var name = document.getElementById('name');<br/>
var city = document.getElementById('city');<br/><br/>
var ajax = new XMLHttpRequest();<br/>
ajax.send("GET", "hello.php", false);<br/>
var data = eval('('+ ajax.responseText +')');<br/><br/>
name.innerHTML = data.name;<br/>
city.innerHTML = data.city;<br/>
}<br/><br/>
</script>
</div>
</div>
</div>
</div>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-603034730330663732011-05-08T23:45:00.005+07:002011-05-09T00:10:38.887+07:00Python - File Reading And Writing<div id="content">
<div class="subcontent">
<h2 class="subtitle">Introduction</h2>
<p>
File operation is necessary in every programming.In Python, file handling is comparatively easier than the other language.
</p>
</div>
<!------------ reading a file ------------->
<div class="subcontent">
<h2 class="subtitle">Reading A File</h2>
<p>
For reading a file, you can use open built-in method with or without "r" mode as a second arguments.
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
finput = open("lola.txt")<br/>
print finput<br/>
data = finput.read()<br/>
print data<br/>
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
<open file 'none.txt', mode 'r' at 0x00B34440><br/>
Welcome to Python world. Python is a nice language. It's fun to learn. And it's easy to use.
</div>
</div>
In the above code, we open file accesss using open built in method and supply its argument with filename. Then we use read method to read all the contents of the file, and save it in variable data.
</p>
</div>
<!------------ end of reading a file ------->
<a name='more'></a>
<!------------ writing to a file ----------->
<div class="subcontent">
<h2 class="subtitle">Writing To A File</h2>
<p>
For writing to a file, you also use built in open method with the mode "w". For example
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
foutput = open("lola.txt", "w")<br/>
foutput.write("Hello From Python.")<br/>
foutput.write("We love to do what the best.")<br/>
foutput.close()
</div>
</div>
When you write a file in Python, you need to end your code with close method so the buffer will be flushed.
</p>
</div>
</div>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-78842619246798194902011-05-08T23:08:00.008+07:002011-05-08T23:27:19.436+07:00Python - Dictionary<div id="content">
<div class="subcontent">
<h2 class="subtitle">Introduction</h2>
<p>
Python dictionary data structure is like a map in another language like java or associative array in php. It's use a name value pairs.
</p>
</div>
<!------------ introduction ------------->
<div class="subcontent">
<h2 class="subtitle">How To</h2>
<p>
You use bracket for declaring and defining it. Here's a code.
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
data = {"name":"lady gaga", "city":"new york", "age":24}<br/>
print data
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
{"name":"lady gaga", "city":"new york", "age":24}
</div>
</div>
</p>
</div>
<!------------------ end how to -------------------->
<a name='more'></a>
<!------------------ accessing and modifying ------->
<div class="subcontent">
<h2 class="subtitle">Accessing And Modifying Element</h2>
<p>
For accessing a value, you use its name. For example, you want to access name value, so you use its name key.
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
data = {"name":"lady gaga", "city":"new york", "age":24}<br/>
print "Name: ", data["name"]</br>
print "City: ", data["city"]<br/>
print "Age: ", data["age"]<br/>
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
Name: lady gaga<br/>
City: new york<br/>
Age: 24
</div>
</div>
You can also change the value of a map. If you want to change, use the key. Here, for example, we want to change the name to be "jenifer lopez"
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
data = {"name":"lady gaga", "city":"new york", "age":24}<br/>
data["name"] = "jenifer lopez"<br/>
print data
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
{"city":"new york", "name":"jenifer lopez", "age":24}
</div>
</div>
</p>
</div>
<!------------------------ accessing and modifying ------------>
<!----------------------- iterating elements ----------------->
<div class="subcontent">
<h2 class="subtitle">Iterating Elements</h2>
<p>
Here's a code that just iterate for the keys
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
data = {"name":"lady gaga", "city":"new york", "age":24}
for item in data:
print item
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
city<br/>
age<br/>
name<br/>
</div>
</div>
May you ask, why just the keys? I don't know how to answer the reason, but it's not so bad bacause we just can get the keys - we can get the values by the keys.
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
data = {"name":"lady gaga", "city":"new york", "age":24}<br/>
for key in data:<br/>
print data[key]
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
new york<br/>
lady gaga<br/>
24
</div>
</div>
</p>
</div><!----------- end of iterating elements -------------->
</div>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-68805034852733079642011-05-08T21:54:00.004+07:002011-05-08T22:17:28.474+07:00Python - Tuple<div id="content">
<div class="subcontent">
<h2 class="subtitle">Introduction</h2>
<p>
Tuple is like a list. That is it's a container of data. It also can contain different type of data. But the difference of tupple and list is that the tuple data cannot be modified after it's defined. You cannot modify or delete an element in the tuple.
There's some data structure that suitable used tuple than list. For example the day names in a week, the month names in a year, the songs of lady gaga monster ball album. The different things a gain for tuple than list is that tuple definition is using ( and ). Other is same as list.
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
days = ("sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday")<br/>
print days<br/>
print "The length of the days: ", len(days)
</div>
</div>
</p>
</div>
<a name='more'></a>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
("sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday")<br/>
The length of the days: 7
</div>
</div>
<!------------------ end of introduction ----------------------------------->
<!------------------ accessing and slicing elements --------------------------------->
<div class="subcontent">
<h2 class="subtitle">Accessing The Element</h2>
<p>
Because there's no feature for modifying or deleting elements of a tuple, so the one operation we can use it is accessing it. We keep using the above example.
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
print days[0]
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
sunday
</div>
</div>
</p>
</div>
<!------------------ end of accessing elements --------------------------->
<!------------------ for statement --------------------------------------->
<div class="subcontent">
<h2 class="subtitle">For statement in tuple</h2>
<p>
You don't need to iterate just one by by. But there's a feature that you can use for iterating the all elements once. Here's a code.
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
names = ["lady gaga", "selena holmes", "shakira", "jenifer lopez", "barack obama"]<br/>
for item in names:<br/>
print names
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
lady gaga<br/>
selena holmes<br/>
shakira<br/>
jenifer lopez<br/>
barack obama
</div>
</div>
</p>
</div>
<!-------------------------- end of for statement --------------------->
<!-------------------------- if statement ----------------------------->
<div class="subcontent">
<h2 class="subtitle">If Statement In Tuple</h2>
<p>
You can using if to test whether some data exist on tuple or not. For example we can test whether "tony blair" exists or not on the data.
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
names = ["shakira", "selena holmes", "lady gaga"]<br/>
if "tony blair" in names:<br/>
print "Tony Blair exists on data"<br/>
else:<br/>
print "Tony Blair doesn't exists on data"<br/>
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
Tony Blair doesn't exists on data
</div>
</div>
</p>
</div>
<!--------------------------- end of if statement -------------------->
</div>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-63959676105314536982011-05-08T20:25:00.021+07:002011-05-08T22:48:32.449+07:00Python - List<div id="content">
<div class="subcontent">
<!------------------------------ Introduction ---------------->
<h2 class="subtitle">
Introduction</h2>
<p>
List is a data structure in Python. It's like an array in other programming languages. But list in Python is more powerful, because it can contain different data type.
<br />
<div class="code">
<h3 class="codetitle">
Program Code</h3>
<div class="codecontent">
name = ["lady gaga", "luna maya", "aura kasih"]
<br />
print name
</div>
</div>
<div class="output">
<h3 class="outputtitle">
Output</h3>
<div class="outputcontent">
["lady gaga", "luna maya", "aura kasih"]
</div>
</div>
</p>
</div>
<!------------------------------ end of introduction ----------------->
<a name='more'></a>
<!------------------------------ how to ------------------------------>
<div class="subcontent">
<h2 class="subtitle">
How To</h2>
<p>
For declaring the list, you use like the above, then you wrap it with square bracket. You can also make an empty list
<br />
<div class="code">
<h3 class="codetitle">
Program Code</h3>
<div class="codecontent">
names = []
<br />
print names
</div>
</div>
<div class="output">
<h3 class="outputtitle">
Output</h3>
<div class="outputcontent">
[]
</div>
</div>
</p>
</div>
<!---------------------------------- end of how to -------------------->
<!---------------------------------- appending a new element to existing list ---------->
<div class="subcontent">
<h2 class="subtitle">Appending A New Element To Existing One</h2>
<p>
You can append a new element to existing list. For example
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
names = ["lady gaga", "barack obama"]
<br/>
print names
<br/>
names.append("selena holmes")
<br/>
print names
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
["lady gaga", "barack obama"]
<br/>
["lady gaga", "barack obama", "selena holmes"]
</div>
</div>
From the above you see that the append() method will add a new element to the last one. "selena holmes" added to the list.
</p>
</div>
<!---------------------------- end of appending a new element ---------------->
<!---------------------------- removing an element ------------------------------>
<div class="subcontent">
<h2 class="subtitle">Removing an element</h2>
<p>
For removing an element, you need to know an element you want to remove. Here's the code
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
names = ["lady gaga", "barack obama", "selena holmes"]<br/>
print names
names.remove("barack obama")<br/>
print names
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
["lady gaga", "barack obama", "selena holmes"]<br/>
["lady gaga", "selena holmes"]
</div>
</div>
You see that there's nothing the name for "barack obama".
</p>
</div>
<!-------------------------- end of removing ---------------------------->
<!---------------------------- slicing --------------------------------->
<div class="subcontent">
<h2 class="subtitle">Slicing</h2>
<p>
Slicing is one of the most usefule feature of list. Slicing means that when you just need some data you can do it with less of the code.
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
ages = [10, 20, 30, 40, 50]<br/>
print ages<br/>
print "exclude the first one: ", ages[1:]<br/>
print "exclude the first three: ", ages[3:]<br/>
print "just the first one: ", ages[:1]<br/>
print "just from 1st till less than 3rd: ", ages[1:3]<br/>
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
[10, 20, 30, 40, 50]<br/>
exclude the first one: [20, 30, 40, 50]<br/>
exclude the first three: [40, 50]<br/>
just the first one: [10]<br/>
just from 1st till less than 3rd: [20, 30]
</div>
</div>
Keep in mind that the slicing index started from zero. It need sometime to understand this one, but when you have master it, you can make manuver.
</p>
</div>
<!--------------------- end of slicing ---------------------------------->
<!--------------------- for statement ------------------------------------>
<div class="subcontent">
<h2 class="subtitle">For Statement In List</h2>
<p>
It's very easy to iterate all elements in a list using for. Try this code.
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
fruits = ["apple", "melon", "orange", "banana"]<br/>
for item in fruits:<br/>
print item
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
apple<br/>
melon<br/>
orange<br/>
banana
</div>
</div>
</p>
</div>
<!--------------------- end of for ------------------------------------->
<!--------------------- if statement ------------------------------------>
<div class="subcontent">
<h2 class="subtitle">If Statement In List</h2>
<p>
If statement can be also to test whether a list contain specified element of not.
<div class="code">
<h3 class="codetitle">Program Code</h3>
<div class="codecontent">
names = ["lady gaga", "madonna", "selena holmes", "avril"]<br/>
if "shakira" in names:<br/>
print "Okey, \"shakira\" existed on names list"<br/>
else:<br/>
print "Noop, \"shakira\" doesn't exists on names list"
</div>
</div>
<div class="output">
<h3 class="outputtitle">Output</h3>
<div class="outputcontent">
Noop, "shakira" doesn't exists on names list
</div>
</div>
</p>
</div>
</div>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-68741636798555042492011-05-04T01:42:00.001+07:002011-05-04T01:42:44.427+07:00C - Define<div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">#define MODULE_AUTHOR(auth) printf("Author: %s\n",auth)<br />
#define MODULE_DESCRIPTION(desc) printf("Description: %s\n", desc)</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;"><br />
</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">MODULE_AUTHOR("Irfanudin Ridho");<br />
MODULE_DESCRIPTION("File System");</div>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-30655260614415549742011-05-03T21:27:00.000+07:002011-05-03T21:27:30.639+07:00C - String Memory Handling1. memcpy<br />
<div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">char name[] = "lady gaga and barack obama";</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">char data[100];</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">memcpy(data, name, strlen(name)+1);</div><span style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">puts(data);</span><br />
<br />
2. memset<br />
<div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">char name[] = "lady gaga";</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">memset(name, '*', 5);</div><span style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">puts(name);</span><br />
<br />
3. memmove<br />
<div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">char name[] = "lady gaga and luna maya";</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">memmove(name+0, name+5, 4); <span style="color: #6aa84f;">// placed, starting, num</span></div><span style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">puts(name);</span>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-35627299823163589282011-05-03T20:59:00.001+07:002011-05-03T21:33:41.589+07:00C - Iterate Pointer Of CharTo iterate a pointer of char, it's just need like doing with custom looping<br />
<div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">char *data = "lady gaga";</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">for(; *data!='\0'; data++){</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;"> putchar(*data);</div><span style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">}</span><br />
<br />
<div style="color: black; font-family: Times,"Times New Roman",serif;">Or using this one:</div><span style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">while(*data != '\0'){</span><br />
<span style="color: #3d85c6; font-family: "Courier New",Courier,monospace;"> putchar(*data);</span><br />
<span style="color: #3d85c6; font-family: "Courier New",Courier,monospace;"> data++;</span><br />
<span style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">}</span>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com1tag:blogger.com,1999:blog-4447642910954352746.post-16280030858746289262011-05-03T20:49:00.000+07:002011-05-03T20:49:02.325+07:00C - Malloc And CallocWhen we use malloc? We use it when we have a pointer, and we want to initialize it.<br />
<div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">char name[] = "lady gaga";</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">char *ptr;</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">ptr = (char*) malloc(sizeof(name) * sizeof(char))</div><br />
And then it's okey to initialize it through assignment or strcpy<br />
<div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">ptr = name;</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">or </div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">strcpy(ptr, name);</div><br />
Calloc is same as malloc:<br />
<div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">ptr = (char*) calloc(sizeof(name), sizeof(char))</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;"><br />
</div><div style="color: black; font-family: Times,"Times New Roman",serif;">When you need copy an array of char to an array of char, the one way is use strcpy function</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">char name[] = "Indonesia";</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">char data[100];</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">strcpy(data, name);</div>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0tag:blogger.com,1999:blog-4447642910954352746.post-56430480302097033082011-05-03T04:16:00.000+07:002011-05-03T04:16:24.583+07:00Python - Class and Static Methods<div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">class Advanced(object):<br />
def __init__(self, name):<br />
self.name = name<br />
def Description():<br />
return 'This is an advanced class.'<br />
def ClassDescription(cls):<br />
return 'This is advanced class: %s' % repr(cls)<br />
Description = staticmethod(Description)<br />
ClassDescription = classmethod(ClassDescription)</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;"><br />
</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">obj1 = Advanced('Nectarine')<br />
print obj1.Description()<br />
print obj1.ClassDescription()<br />
print '=' * 30<br />
print Advanced.Description()<br />
print Advanced.ClassDescription()</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;"><br />
</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">This is an advanced class.<br />
This is advanced class: <class __main__.Advanced at 0x401c926c><br />
==============================<br />
This is an advanced class.<br />
This is advanced class: <class __main__.Advanced at 0x401c926c></div>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com1tag:blogger.com,1999:blog-4447642910954352746.post-32742573184251781172011-05-03T04:08:00.000+07:002011-05-03T04:08:12.768+07:00Python - Static Data<div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">>> class One:</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">... age = 45</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">... def inc(self):</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">... One.age = One.age + 1</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">... def get(self):</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">... return One.age</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">...</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">>> a = One()</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">>> b = One()</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">>> a.inc()</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">>> b.get()</div><div style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">>> a.inc()</div><span style="color: #3d85c6; font-family: "Courier New",Courier,monospace;">>> b.get()</span>Irfanudin Ridhohttp://www.blogger.com/profile/17795585450344037206noreply@blogger.com0