Tuesday, August 7, 2012

Last Day

2 months training comes to the end now. You guys are awesome! I can see the willingness to learn new knowledge in everyone of you. Keep it up, because you're so young.

Ready for your project presentation? Yes please.
If no, it's ok, try your best for whatever effort you've put on your project;
If you are not coming for presentation, please do come to give support to your fellow friends, and you can gain some ideas and input from their presentation; who knows?

All Ze best to you. And ...

"Unless you try to do something beyond what you have already mastered, you will never grow." —Ronald E. Osborn

Sunday, July 29, 2012

Day 36 - 40 : Project Finishing & Assessment

This would be your final week. You should be on your final steps on your project. A few things will be on this week's list:

I need to make sure you guys are in the smooth progress on your shopping cart

form -> php
form -> post & get -> php
form -> ajax / jQuery post or get -> php

Then we'll be looking into checkout process : payment & shipping, paypal sandbox.
MVC, maybe?
CMS, maybe?
Overall Quiz on what we've learned this 2 months
Feedback, Q&A

Sunday, July 22, 2012

PayPal Web Service

- Web Services are application interfaces made available via the World Wide Web; in oo terms, it can be seen as a class that exposes its public methods via the web.

- Example: google, paypal, etc.

- You may continue with the paypal web service when your e-commerce project on the final stage. Which mean the stage of getting the user to submit payment.

download NVP sample code
Integration Wizard - Express Checkout

getting started with Express Checkout

Day 31 - 35 : Shopping Cart

Day 31 - 35

[txtbk Chapter 28] Building a Shopping Cart
Php MySQL Shopping Cart Tutorial <= self exploration

This final 2 weeks would be more time spending on your project; you may voice out any question or if you wish any topics to have further explanation.
For those that haven't start anything on the project, or want to try something other that e-commerce, you may suggest to me what you have on mind, orget some idea from here:

Mail editing and sending system(with PHP)

Project description : Please create a system to send email asynchronously about 100,000. you may consider PEAR or other framework

The system also needs to be able to edit the HTML mail.
Tourist Site

A site similar to http://www.visitmaine.com/

structure and functionality of http://www.visitmaine.com/

Graphic Design similar to http://www.colombia.travel/en/

Using latest versions of PHP and Joomla.

Bilingual skeleton for English and (Chinese/Arab/Malay/Tamil/Spanish). Leave frame for third language in future.

Easy to mantain for Website Manager.

Easy to customize content and images for staff writers.

SEO friendly.

Crossbrowser compatibility. IExplorer, Firefox, Chrome, Safari
To-Do Task List Cloud Offering

Description: build a To-Do task list service offered through the cloud.

We'd like service providers to provide effort and cost estimates for providing design and development services for this service.

High level functional requirements include:

1.            Sign in via Facebook

2.            Create a task

3.            Create a note

4.            Create a “group” of tasks

5.            Assign other individuals to a group

6.            Assign other individual to a task

7.            Change the status of a task

8.            Select a due date for a task

9.            Create dependencies between tasks

Similar websites that we like are the following. Functionality will be similar to these:

http://tadalist.com/

http://todoist.com/
http://www.rememberthemilk.com

Saturday, July 14, 2012

Day 26 - 30 : Accessing MySQL db from the Web with PHP, Authentication

Day 26: [txtbk Chapter 11] connect and process database access: select, insert

$db = new mysqli(...);
check bd connection error? mysqli_connect_errno()
connection ok, $db->real_escape_string()
$db->query(); ex: $result = $db->query()
if the query "SELECT", $result->num_rows;

if "UPDATE / INSERT", $db->affected_rows;

make a loop to retrieve data from db [for / while] 0 to num_rows-1

$row = $result->fetch_assoc();
get the db data ex: $row['id'], $row['name']

$result->free();
$db->close();

Day 27:

update
encryption, date & time Function in MySQL
prevent SQL injection : preparedStatement

bind_param variables -i, d, s, b

$db = new mysqli(...);
check bd connection error? mysqli_connect_errno()
ex: $query = "select name from books where isbn=?"; //value replace to ? in query
$db->prepare(); ex: $stmt = $db->prepare($query);
$stmt->bind_param('s', $isbn); //if 1 ? then, parameter type 's' refer to its type, and the $isbn refer to the value of the ?
if the query "SELECT", $stmt->bind_result($name);
$stmt->execute();
if the query "SELECT", $stmt->store_result();
if the query "SELECT", $stmt->num_rows;

if "UPDATE / INSERT", $stmt->affected_rows;

make a loop to retrieve data from db using while : $stmt->fetch()

get the db data ex: $name // as what the parameter we keep for bind_result

$stmt->free_result();
$stmt->close();
$db->close();

Day 28:

[txtbk Chapter 17] Implement Authentication with PHP & MySQL
[txtbk Chapter 23] Using Session Control

Day 29:

[txtbk Chapter 27] Building User Authentication and Personalization

ispell dictionary ->select English -> download collection of word lists for spell-checking
download Ispell English Word Lists .zip

[txtbk Chapter 34] Web 2.0 Applications with Ajax

step to change chapter 27 codes to be ajax :--
insert new_ss.css and new_ajax.js to project chapter27
amend function display_add_bm_form() in output_fns.php
amend do_html_header() in output_fns.php

link external js and css

modify add_bms.php

remove --- do_html_header('Adding bookmarks');
remove --- display_user_menu();
remove --- do_html_footer();
remove --- check_valid_user();
remove --- try block and exception handling to something make sense in ajax environment
add else(s)

modify url_fns.php

in function add_bm() : throw change to echo(s); add else; remove --- return true;

Day 30:

[txtbk Chapter 28] Building a Shopping Cart

Friday, July 13, 2012

MySQL Quiz

create a database "MyDatabase"
create a table "MyTable", with 4 fields[id, name, password,dateCreated]
delete data from "MyTable" which have name begin with 'A'
insert 3 rows of data with this information:

name:Ali, Johan, Frankie; password: ali123, johan123, frankie123

update data from "MyTable", change the name to "Ali Adam", "Johan Harry", "Frankie Tom"
empty the table / delete all data from "MyTable"
Sort "MyTable" in descending order according to "name" field
add a new field "age" to "MyTable"
remove "MyTable" from "MyDatabase"
u have 2 tables user(id, name, password), and activity(id, userid, activityName)

join these 2 table and show the data of user's name and his activity.

Friday, July 6, 2012

Day 21 - 25: MySQL

Day 21: Relational Database Concepts

Database intro
Tables, Columns, Rows, Values, Keys, Schemas
Relationship: 1-1, 1-many, many-many
database diagram, database dictionary
database fundamentals
mySQL monitor : c:\xampp\mysql\bin -> mysql.exe -u root [-p]
create database, drop
php connect to mySQL DB
mySQL Administration DCL: create user, grant ... to, revoke ... from, privileges
Storage Engines/Table Type : myisam, innodb
Data Types :

numeric - tinyint(bool), int
float - float(m,d, double)
date & time: date, time, datetime, timestamp
string: char(fix length char), varchar; text, blob[binary large object:example-image]

DDL: create, alter, drop table

Day 22-23:

DML: insert, update, delete
DQL: select ... where
indexing
keyword:

null, not null, auto_increment, unsigned(int)
distinct, order by asc|desc, limit

operator:

=, >, <, >=, <=, !=,
is null, is not null, between, in, not in, like("%"), not like, regexp

join type: union, inner join, left join
grouping & aggregating

group by... having
avg(), count(), min(), max(), sum()

subqueries: any, in , some, all

Day 24-25:

mySQL functions
mySQL tips
foreign keys(pg315) in innoDB: references tablename(colname)
stored Procedure & Cursors

Thursday, July 5, 2012

Day 19 : Quickform2 tutorial

// Load the main class
require_once 'HTML/QuickForm2.php';

// Instantiate the HTML_QuickForm2 object
$form = new HTML_QuickForm2('tutorial');

// Set defaults for the form elements
$form->addDataSource(new HTML_QuickForm2_DataSource_Array(array(
    'name' => 'Joe User',
 'Gender'  => '1', 
 'status' =>'1'
)));

// Add some elements to the form
$fieldset = $form->addElement('fieldset')->setLabel('QuickForm2 tutorial example');
$name = $fieldset->addElement('text', 'name', array('size' => 50, 'maxlength' => 255))
                 ->setLabel('Your name:');
$email = $fieldset->addElement('text', 'email', array('size' => 50, 'maxlength' => 255))
                 ->setLabel('Your Email:');  

$gender1= $fieldset->addElement('radio', 'gender[]', array('value' => 1), 
        array('content' => 'male', 'label' => 'male'));                 
$gender2= $fieldset->addElement('radio', 'gender[]', array('value' => 2), 
        array('content' => 'female', 'label' => 'female')); 
                        
$options = array('KL','Melaka','Sabah', 'Srwk');
$location= $fieldset->addElement('select', 'location', array('multiple' => 'multiple', 'size' => 4),
    array('options' => $options, 'label' => 'Multiple select Location:'));
        
$status1= $fieldset->addElement('checkbox', 'status[]', array('value' => 1), 
        array('content' => 'single')); 
$status2= $fieldset->addElement('checkbox', 'status[]', array('value' => 2), 
        array('content' => 'married')); 
$fieldset->addElement('submit', null, array('value' => 'Send!'));

// Define filters and validation rules
$name->addFilter('trim');
$name->addRule('required', 'Please enter your name');
$email->addFilter('trim');
$email->addRule('required', 'Please enter your email');
$email->addRule('regex', 'valid email address please','/^(\w+[\-\.])*\w+@(\w+\.)+[A-Za-z]+$/');

// Try to validate a form
if ($form->validate()) {
    echo '<h1>Hello, ' . htmlspecialchars($name->getValue()) . '!</h1>';
    //echo "<br/>".$email->getValue()."<br/>";
    //var_dump($form->getValue());
    //echo "<br/>".$form->getValue('name')."<br/>";
    //echo "<br/>".$form['status']->getValue()."<br/>";
    $post = $form->getValue();
    //var_dump($post);
    //var_dump($location->getValue();
    var_dump($post['status']);
    exit;
}

// Output the form
echo $form;

Wednesday, July 4, 2012

Exercise on Object-Oriented

click for the doc

Saturday, June 30, 2012

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

Day 16 - include, require, date functions, storing/retrieving data, mail(), group assignment

require, require_once(<==amat diperlukan) ; include, include_once
date(), getdate(), strtotime(), mktime(), strftime()
mail(to, subject, msg[, from])
fopen, flock, fwrite, fgets, feof, fclose
_GET

Day 17 - Object Oriented PHP

oo concept video1, oo concept video2
class, property, method, $this->property
inheritance, __construct, __destruct, __CLASS__
__set, __get
encapsulation : public, protected, private
another OO php tutorial link

Day 18 - Object Oriented PHP

polymorphism - overriding, parent::operation(), final
static
abstract, interface

Day 19 - OO, Error & Exception Handling

try, throw, catch
PEAR: HTML_quickform2, rule-list example:basic-element,buitlin-rules

Day 20 -con PEAR

log - tutorial link
auth - tutorial example

Friday, June 29, 2012

Day 15 Exe PHP: Function

1. Create a function that can receive array as argument, and populate a html list as the output.

Thursday, June 28, 2012

Day 14 Exe PHP: String, Array

Exercise on String / Array Functions:

irene@example.com, felix@example.com, tony@example.com

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

Day 11 OnWards --- PHP

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, ;

Search This Blog