Saturday, June 30, 2012

How can I split the string above to be a list of emails, and display them in a <ul><li> list set?
How can I get the name from the emails above and display them on a list?
Get the email domain from the string above.
replace the domain name to "hotmail" and output the emails in a list.
Join "lynx@aims.com" and "may@aims.com" to be the last items of the list of emails above.

Friday, June 22, 2012

This is the link to the electronic text book we'll be using in our php & mySQL project lessons. For the source inside the book , you may download from phpSource

For Day 11 - 15, We'll be learning the php crash course, arrays, String manipulation and regex, etc.

basic syntax, variable, data type, arithmetic operators, variable functions I [gettype, is_bool, ]
logical operators, ternary operator, Conditionals, loops, variable functions II[isset, unset, empty]

_GET['name'], _POST['name']
break, continue
return

Arrays, array functions, multidimensional arrays

sizeof(), array_push(), array_pop(), array_shift(), array_unshift(), array_filter(), sort(), rsort()

String Manipulation, string / text functions, regex

nl2br(), strlen(), trim(), strtoupper(),strtolower(), explode(),implode(), substr(), strstr(), preg_match(), str_replace(), split()

Function, references(&), global

require(), include(), require_once(), include_once(), return, recursion

Here are some php fundamental tutorial, especially for those that are totally new to php and programming. Check out the videos (eg: Syntax and Variables, Arrays, Modifying Arrays, Conditionals) and they'll definitely help you a lot in understanding the php basic.

Here's The Best Way to Learn PHP, if u keen to master PHP.

Day 10 - Quiz

Refer the question here

pass up your answer in a zip file to my email: irenelim99@gmail.com

Should you have any doubt about the questions, and do not understand the question's requirement, pls make a comment on this post, or comment to my doc, or even email to me. Make sure you get them done by the end of this week. Good luck!

**Q5 is a question regarding ajax, which mean of displaying content from xml dynamically when a button is clicked. The answer should be in javascript. U may try jquery or javascript xmlhttpRequest for this.

Thursday, June 21, 2012

Day 9 - JQuery Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>jQuery Demo here</title>
  <style type="text/css">
   .red{color:red;}
   .blue{color:blue;}
   .green{color:green;}
   .myborder{color:black;border:1px solid red;background-color:yellow;}
   

  </style>
  
  <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
   $(document).ready(function() {
    var arr = ["apple", "orange", "lemon"]; 
    
    function alertMe(){
     alert(1);
    }
    
    $("button").click(function(){
     $(".p1").addClass("red");
     $("#orderedlist > li").removeClass("blue");
     //alertMe();
     //$(".p1").slideToggle();
    }); 

    //$("#orderedlist > li").addClass("blue");
    /*
    $("#orderedlist li:last").hover(function(){
         $(this).addClass("green");
       },function(){
         $(this).removeClass("green");
       });
*/
     $("#orderedlist > li").find("li").each(function(counter) {
         $(this).append( " BAM! " + counter );
     });

     $("#reset").click(function() {
         $("form")[0].reset();
     });

     //$("li").not(":has(ul)").css("border", "1px solid black"); 
     $("li").not(":has(ul)").addClass("myborder"); 

     //$("li").each(function(i){
    //  $(this).text(arr[i]);
     //}); 
    var txt="";
     for(var i=0; i<arr.length; i++){
      txt += "<li>"+arr[i]+"</li>";
     } 
     $("#orderedlist").html(txt);

     $("div").last().hide();
     $("div").css("border", "1px solid black").css("width", "100px")
      .hover(function(){
      $(this).next().slideToggle();
     });
   });   
  </script>
 </head>
 <body>
  <div>this is header</div>
  <div>this is description</div>
 
  <ul id="orderedlist"></ul>
  
  <form class="a">
   <input type="text" value="" />
   <a href="#" id="reset">reset all</a>
  </form>
  <form class="a">
   <input type="text" value="" />   
  </form> 
  
  <button>Toggle Paragraph</button>
  <p class="p1">Try my first jQuery here<br/>
  Try my first jQuery here<br/>
  Try my first jQuery here<br/>
  Try my first jQuery here<br/>
  Try my first jQuery here<br/>
  Try my first jQuery here
  </p>
 </body>
</html>

Wednesday, June 20, 2012

Day 9 - 10 : jQuery, test

Day 9

Full List of jQuery Tutorial

1. Getting Started with jQuery

2. How jQuery Works

3. $(document).ready()

4. Live Example

Day 10

test on

html form and common elements
css styling for table
javascript -function, array, object and regular expression for validation
write a xml accordingly

pics Stack - try and see
jQuery Cycle - one of a jQuery plugin slideshow
ColorBox - overlay box plugin

Day 7 - RegExp Discussion

I prefer this as my reference sheet. And the tester helped alot for understanding the matching set.

Here's some explanation for some regex on the email validation patterns you found during the class:

[A-z0-9_%+-] : matching for all alphanumeric or the symbols (eg: _%+- ) in the set.
[\w-] : Matches any word character for \w also it's equivalent to [A-Za-z0-9_], or matching of symbol 'dash'(eg: -)
\. : matches for dot(.); Besides dot(.), characters/symbols that need escapes include: $ ^ { [ ( | ) ] } * + ? \ which mean that if i want to find matches of + in a certain string, i'll need the pattern / \+ /, for matches of dollar sign, i may need this pattern / \$ / with the backslash in front of the symbol. For the other symbols that are not listed above eg:% ! @ < > / # ~ - _ ; : " ' ` backslash is not necessary in the pattern.
[a-zA-Z0-9_-] == [-A-Za-z0-9_] == [0-9_A-Za-z-] : if we split the patterns in the set, we can found a-z, A-Z, 0-9, underscore(_), dash(-); when we have them writing in a set, there would be no order for which should be written first.
[^<>()[\]\\.,;:\s@\"] :

the most complicated case above all
the ^(caret) that occur on the 1st place after the square bracket([]) has different meaning with the ^(caret) that place on the 1st place of a pattern.
eg: [^aeiou] : Matches any single character not in the specified set of characters.
which means if the string doesn't not have these symbols ( < >( )[ ] . , ; @ \ " ) , it fulfills the match.
\s : matches any white-space character. or it's equivalent to [ \f\n\r\t\v] (eg: space, feed, new line, carriage return, tab, vertical tab)

Tuesday, June 19, 2012

Day 6 js Demo

<script type="text/javascript">
  var a=8;
  //document.write("<br/><b class=\"alignright\">keep your mouth shut.</b><br/>");
  if (a==='8')
   document.write(a);

  function displayAlert(){
   alert('this is a link');
  }

  function printIt(text){
   var i=0;
   for(i=0; i<text.length; i++){
   document.write("<span style=\"color:" + randomColorCode() + ";\">" + text[i] + "</span>");
    //html:<span style="color:#343434;">wifi</span>
    document.write("&nbsp;");
   }
  }

  function randomColorCode(){
   var colorCode = 0;
   colorCode = Math.floor(Math.random()*1000000);
   if (colorCode<100000)
    colorCode = colorCode + 100000; 
   return "#" + colorCode;
  }
  
  
 </script>

//call function (inside html body if the content is to be displayed in your html doc)

<script type="text/javascript">
 printIt("text");
 </script>
 <a href="#" onclick="displayAlert();"><img src="../images/sample.jpg" width="20%"/></a>

Day 9

ajax Tutorial

Day 8

xml Tutorial

This link u could get more understanding on XML

xml Basic - intro, syntax
XSLT
Namespaces
xml http Request - ajax

Sunday, June 17, 2012

Day 6, Day 7 - Javascript

W3School Javascript Tutorial

Day 6 -

JS Basic

exercise - random()

Day 7 -

JS Objects

RegExp, RegExp-Ref, RegExp Helpsheet from Reglib
try some regular expression, and test here
Form Validation -( input type="text")

check if a required fields left empty
validate username - allows alphabets only and character between 4 to 20
validate email
validate password to be at least 6 characters, only alphanumeric & underscore symbol allowed
validate Malaysia zipcode

JS Advance, Browser Objects

Window - link using img/button/a/div/etc
History - create a 'prev page' and 'next page' button which will backward or forward user's navigated pages.

Day 5 , Day 6 - CSS

Day 6 - CSS Table Styling, Print Styling

table styling for the table we've been created during html lessons.
do a simple styling for your html form (registration form/feedback form); and add another printing style to it, which mean that when the user try to print the form, it may looks different from the screen styling.

css styling example

sample of external css sheet styling

ul li{
 list-style-type:none;
 float:left;
 margin:10px;
}

a{ text-decoration:none; background-color:yellow;}
a:link { color: red; } 
a:hover{text-decoration:underline; cursor: default;}
a:active { color: blue; font-size: 125%; } 
a:visited { color: green; font-size: 85%; }

#imgFrame{
 background-color:black;
 padding:0px;
}

img{
 width:26%;
 margin:8px;
 border:2px dotted red;
}

CSS Demo

Syntax
General - id, class, span, div
font
text
border
position
background

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>Insert title here</title>
  
  <style type="text/css">
  
   body{position:relative;}
   div{
    width:200px;height:200px;
    float:left;
   }
  
   .mydiv{
    width:100px;
    height:50px;
    overflow:scroll;
   }
  
   em, span { background: yellow; }
   
   a{ text-decoration:none;}
   a:link { color: red; } 
   a:hover{text-decoration:underline; cursor: default;}
   a:active { color: blue; font-size: 125%; } 
   a:visited { color: green; font-size: 85%; } 
   
   span{
   /*
    font-variant:small-caps;
    font-style:italic;
    font-weight:bold;
    font-size:12px;
    font-family: verdana;   
   */ 
    font: normal italic bold 16px 'Arial';
   }
   
   p{
    letter-spacing: 0px;
    word-spacing:5px;
    line-height:36px;
    text-align:center;
    text-transform:capitalize;
    
    
   }    
   img{ 
   /*
    border-style:solid;    
    border-width:1px;
    border-color:#EAF5F5;
   */ 
    border:dotted 8px #8168FF;    
    vertical-align:top;
    width:30%;
   }
   
   table, td{border:1px solid;}
   td{
    width:30px;    
   }
   
   #box3{
    width:1000px; height:500px;
    clear:both;
    /*
    background-image:url('../images/sample.jpg');
    background-color:black;
    background-position:center center;
    background-repeat:repeat;    
    */
    background:url('../images/sample.jpg') black top right repeat;
   }
   
  </style>
 </head>
 <body>
  <!--<h1>This is a <em>header</em></h1>-->  
  <div class="mydiv">
   <p>this is a <em>paragraph</em>.<span>this is span</span>
   This is a This is a 
   This is a This is a<br/>
   this is a this is a 
   <img src="../images/sample.jpg" />this beside the image.
   This is a this is a.help me. help me.
   </p>   
   <a href="mypage.html">a link here</a>
  </div>
  <div id="box1" style="position:absolute;background-color:red;width:50%;z-index:0;">box 1</div>
  <div id="box2" style="position:absolute;background-color:green;width:20%;z-index:1;">box 2</div>
  
  
  <div style="clear:both;">
   <table>
    <tr>
     <td>item 1item 1item 1</td>
     <td>item 1</td>
    </tr>
    <tr>
     <td>item 1</td>
     <td>item 1</td>
    </tr>
   </table>
  </div>
  <div id="box3" style="">box 3</div>
 </body>
</html>

Wednesday, June 13, 2012

HTML Form

Day 4 -

<form>, <input> with attribute type of "text", "password", "radio", "checkbox", "reset", "submit"
<select> -> <option>, <textarea> with attributes cols, rows
name: sex: email: new password:Birthday:
add on attribute such as: name, maxlength, value, checked, readonly, disabled
<label> with attribute for, and refer to form's elements according to its attribute id
arrange your form elements in a table so that label and input can be aligned nicely

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>Insert title here</title>
 </head>
 <body>
  <form>
   <table border="1">
    <tr>
     <td><label for="username">Name:</label></td>
     <td colspan="6"><input type="text" value="your name here" id="username"/></td>
    </tr>
    <tr>
     <td><label for="userpwd">Password:</label></td>
     <td colspan="6"><input type="password" value="" id="userpwd"/></td>
    </tr>
    <tr>
     <td><label for="male">Gender:</label></td>
     <td colspan="3"><input type="radio" name="gender" value="M" id="male" checked/><label for="male">Male</label></td>
     <td colspan="3"><input type="radio" name="gender" value="F" id="female" /><label for="female">Female</label></td>
    </tr>
    <tr>
     <td><label for="twitter">Account:</label></td>
     <td colspan="2"><input type="checkbox" name="account" value="T" id="twitter"/><label for="twitter">Twitter</label></td>
     <td colspan="2"><input type="checkbox" name="account" value="Y" id="yahoo"/><label for="yahoo">Yahoo</label></td>
     <td colspan="2"><input type="checkbox" name="account" value="Hot" id="hotmail"/><label for="hotmail">Hotmail</label></td>
    </tr>
    <tr>
     <td><label for="day">BirthDate:</label></td>
     <td colspan="2">
      <select multiple="multiple" id="day">
       <option value="0">Select a few Days</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5"  selected="selected">5</option>
       <option value="6">6</option>
       <option value="7">7</option>
       <option value="8">8</option>
      </select>
     </td>
     <td colspan="2">
      <select id="month">
       <option value="0">Select a month</option>
       <option value="1">Jan</option>
       <option value="2">Feb</option>
       <option value="3">Mar</option>
       <option value="4">Apr</option>
       <option value="5">May</option>
       <option value="6">Jun</option>
       <option value="7">Jul</option>
       <option value="8">Aug</option>
      </select>
     </td>
     <td colspan="2"><input type="text" value="1988" maxlength="4" id="year" readonly="readonly"/></td>
    </tr>
    <tr>
     <td><label for="findUs">How you find us?</label></td>
     <td colspan="6"><textarea rows="3" cols="50" id="findUs"></textarea></td>
    </tr>
    <tr>
     <td colspan="7" align="right"><input type="submit" value="Submit!" id=SubmitBtn" />
      &nbsp;&nbsp;
      <input type="reset" value="Reset" id="resetBtn"/>
     </td>
    </tr>
   </table>
  </form>
 </body>
</html>

HTML Table

Day 3 -

<table>, <tr>, <td>
attribute to <td> : colspan, rowspan
<thead></thead>, <tbody></tbody>, <tfoot></tfoot>

Saturday, June 9, 2012

CSS Pseudo-Classes

How To Use Structural Pseudo Classes and Pseudo Element Selectors

ul li{
    display:block;
    background-color: blue;
}

ul li:nth-child(odd){background-color: red;}

HTML

html basic template
doctype
<tag>, attribute, "value"
foundation tags, escape sequences
commonly used tags:- h1, p, ol/ul, a, span, div, img
table
form
iframe

Day 2 demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>Insert title here</title>
 </head>
 <body>
  <h1>here am i</h1>
  <h3>here you are</h3>
  <hr/>
  <p>i am &lt;tall&gt;</p>
  <p>This is &frasl;you&frasl;?</p>
  <p>How about &nbsp;&nbsp;&nbsp;this.</p>
  <hr width="2px" color="rgb(255,0,0)" />
  
  
  <a href="#c">ccc</a>
  <a href="#d">dddd</a>
  <a href="../page2.html">external</a>
  
  
  
  <p>I am no <sup>body</sup>.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.</p>  
  <img src="building-up-your-credit-score.jpg" />  
  <p>Who m i?</p>
  <p>I am who.</p>
  <p>I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.</p>
  <p>I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.</p>
  <p>I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.</p>
  <a id="c"><h5>here</h5></a>
   <p>I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
   I am no body.I am no body.I am no body.I am no body.I am no body.
   I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
   I am no body.I am no body.I am no body.I am no body.I am no body.</p><p>I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
   I am no body.I am no body.I am no body.I am no body.I am no body.
   I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
   I am no body.I am no body.I am no body.I am no body.I am no body.</p>
  
  <p>I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.</p>
  <p>I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.</p>
  <p>I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.</p>
  <p>I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.I am no body.
  I am no body.I am no body.I am no body.I am no body.I am no body.</p>
  <a id="d">
   <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
   </ul>
  </a>
  
 </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>This is my shop</title>
 </head>
 <body>
  <div>
   <ul>
    <li><a href="myshop.html">Home</a></li>
    <li>Shop</li>
   </ul>
  </div>
  
  <div>
   <a href="contact.htm">Contact Page</a>
   <a href="http://www.facebook.com">Find Us in FB</a>
  </div>
  
  <div>
   <a href="sample1.jpg" target="_blank"><img src="sample1.jpg" /></a>
   <img src="sample2.jpg" alt="sample 2"/>
   <img src="sample3.jpg" />
   <img src="sample4.jpg" />
   <img src="sample5.jpg" />
  </div>
  
  <div>2012&copy; Irene Copyright</div>
  
 </body>
</html>

HTML IFrame

iFrame

HTML Escape Sequence

Character Entities Ref

Images in Web Pages

Here are some commerce websites for our reference.
There are mix of dynamic and static websites on the list.

<Day 1>Which are the dynamic ones?And which are the static ones?
<Day 2>Let's check what are the elements commonly use in a website.

Thursday, June 7, 2012

Setup Development Environment

Web Browser [at least 2]

Mozilla Firefox
Google Chrome
IE
Safari
Opera

Editor Software

Notepad2 / Notepad++

Web Server Package ( Apache HTTP Server, mySQL database, PHP Programming )

XAMPP

IDE

{* Make sure to install Java before eclipse}

Web Browser Plugin / Extension

Firebug

FTP/SFTP client

Filezilla Client

* security setting for xampp and access to phpMyAdmin
* http://localhost/
* create simple .php from notepad2

<?php
  phpinfo();
?>

* A few simple tests to make sure IDE with shortcut keys working - ctrl + space
* create html file: <html>, <body>, <h1>
* create php file:<?php, echo, ;

My Coding World

Search This Blog

Saturday, June 30, 2012

Day 16-20 --- PHP Oo, Error Handling, PEAR

Friday, June 29, 2012

Day 15 Exe PHP: Function

Thursday, June 28, 2012

Day 14 Exe PHP: String, Array

Friday, June 22, 2012

Day 11 OnWards --- PHP

Day 10 - Quiz

Thursday, June 21, 2012

Day 9 - JQuery Demo

Wednesday, June 20, 2012

Day 9 - 10 : jQuery, test

Day 7 - RegExp Discussion

Tuesday, June 19, 2012

Day 6 js Demo

Day 9

Day 8

Sunday, June 17, 2012

Day 6, Day 7 - Javascript

Day 5 , Day 6 - CSS

Friday, June 15, 2012

css styling example

CSS Demo

Wednesday, June 13, 2012

HTML Form

HTML Table

Saturday, June 9, 2012

CSS Pseudo-Classes

How To Use Structural Pseudo Classes and Pseudo Element Selectors

HTML

HTML IFrame

HTML Escape Sequence

Images in Web Pages

Thursday, June 7, 2012

Setup Development Environment