• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Whenever you search in PBworks or on the Web, Dokkio Sidebar (from the makers of PBworks) will run the same search in your Drive, Dropbox, OneDrive, Gmail, Slack, and browsed web pages. Now you can find what you're looking for wherever it lives. Try Dokkio Sidebar for free.



Page history last edited by Dave Q 11 years, 3 months ago

Look at our student's AWESOME works here >>



  Due Date Topic Assignment (to be done before class starts on due date listed at left)
Intro to WEBDEVT
  1. Buy your Domain Name (yourname.com) - http://www.godaddy.com ~P500
  2. Buy Web hosting - http://www.solidhosting.ph/hosting.php ~P100/month 
  3. (1.1) Google Logo Balls http://rawkes.com/experiments/google-bouncing-balls-canvas/ Fork this to write your name. Always link back (attribute) your sources.


That's it for now. Enjoy and sleep well. You will need it :)

Google Apps  (1.2) Setup your email mail.yourdomain.com at Google Apps Standard (http://www.google.com/apps/intl/en/group/index.html
  1. WOW Philippines Project http://demo.tutorialzine.com/2010/02/photo-shoot-css-jquery/demo.html 
    Fork this demo to show the beauty of the Philippines' 7,107 islands.
  2. Provide at least 4 photos and credit where you got your photos (you can use creative common photos or use your own).
  3. Link back to this demo http://demo.tutorialzine.com/2010/02/photo-shoot-css-jquery/demo.html
  4. Post on Facebook and tag your friends. 
2.2   JQuery/PHP
  1. Download animated-background-image.zip 
  2. Set this up on your website and make something nice with it.  
2.3   JQuery/PHP
  1. Download three.js.-random-particles-demo.zip
  2. Set this up on your website and make something nice with it.  
  1. Make 2 Reaction Blogs for the 2 videos (Revolution OS & History of the Internet
  2. Link your blog entries to your website.  
4 Sept 30 Class Exercises with Codecademy
  1. Go to http://www.codecademy.com 
  2. Go through the whole 16 lessons. 
  3. Sign up using Facebook.  
  4. Tag the Facebook WEBDEVT group & tag me when you finish.
4.2 Oct 7


  1. Create a registration form and output it on screen like the example above.
    • First Name 
    • Last Name
    • Street
    • City
    • Province (Make this a Drop down. Get a list of provinces on the Web.) 
    • ZIP
    • Telephone
    • Email 
Oct 13


1. Create a beautiful registration form and output it on screen like the example above with Validations.
    • First Name
    • Last Name
    • Street
    • City
    • Province (Make this a Drop down. Get a list of provinces on the Web.)  
    • ZIP
    • Telephone
    • Email

2. Send an email to the specified email address. (Research on PHP email.)

BONUS: Write these to a MySQL Database. 

BONUS BONUS: Make an AJAX Validation for a unique username. Use JQuery Validation with PHP http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/

6 Oct 13 Propaganda
  1. Make a Reaction Blog for the movie Pirates of the Silicon Valley as a tribute to a fellow world changer, Steve Jobs.
  2. Link your blog entry to your website.
7 Oct 20 PHP/JQuery
  1. Use this Wufoo form http://wufoo.com/gallery/templates/online-orders/tshirt-order-form/ to start your Tees business. 
  2. Use JQuery Validation with PHP http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/
  3. Store the orders in a MySQL table. 
  4. Create another orders.php page to list all orders. Provide the link.
8 Oct 28 MIDTERMS Exam Upload your MIDTERMS Exam in your website. (localhost) projects will not be checked, sorry.


Make it good class! You can do this! 

Nov 11  PHP/MySQL   Rehash MidTerms -  Create a Tees Order Form to start your Tees business (Write this to the database + orders.php + PHP Mail) 
Nov 11 PHP/MySQL  
Rehash MidTerms -  Create a Tees Order Form to start your Tees business (Write this to the database + rsvp.php + PHP Mail) 
11 Nov 11 
  1. Make this project work on your website.
    Basic Blog using HTML/CSS-PHP-MySQL http://www.devshed.com/c/a/MySQL/Creating-a-Login-Script-for-a-PHPMySQL-Blogging-System/   
  2. Create a user: csb & password: csb  so I can login and check.  
12 Nov 17 PHP/JQuery
  1. Modify this Wufoo form http://wufoo.com/gallery/templates/forms/membership-form/ to start a social network website for the class then CSB. 
  2. It should include a username & password.
  3. Ask for their birthday. 
  4. Use JQuery Validation with PHP http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/
  5. Send a welcome email.
  6. Store the new members in a MySQL table. 
  7. New members should be able to login. 
13 Nov 17
  1. Create a CRUD (Create Retrieve Update Delete) for the table user in item #5 above. 
  2. Make sure this is secure and login is required. 
  3. Logged in user should be able to :
    • Add a new record (Create) 
    • See a list of records (Retrieve)
    • Update an existing record (Update) 
    • Delete a record (Delete)  
  4. Use the same user: csb & password: csb  so I can login and check. 
  5. There are various PHP CRUD implementations online. Use whatever your heart  desires. 
14 Nov 17
  1. Survey the Campus Idol by building a Web Poll program with PHP http://net.tutsplus.com/tutorials/php/creating-a-web-poll-with-php/
  2. Get at least 20 votes from friends by sharing this on Facebook. 
  3. Attribute the tutorial with a link back to NetTuts. 
  1. Setup and install Google Analytics in all the pages of your website. http://www.webresourcesdepot.com/feedcount-like-google-analytics-counter/
  2. Show it using this widget. Install this on all your website pages  
  1. Watch 7 Must See Web Design Videos and Presentations http://www.noupe.com/design/7-must-see-web-design-videos-and-presentations.html  
  2. I want to see 7 blog entries with 100 words each as a reaction to what you watched on the 7 videos. 
  3. Put a link to your blog on your website.   
  1. Make a photo album of your life. Put your photos here like this http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/  
  2. Don't copy the wood image. Put your own background image. 
  3. Tag your friends. Link back to the demo and attribute them. Enjoy! 

BONUS: Super extra points for those who can pull your Facebook photo albums from the Facebook Social Graph.

  1. Watch the Front End Design Conference '09 http://css-tricks.com/front-end-design-conference-09-wrap-up/ 
  2. I want to see 7 blog entries with 100 words each as a reaction to what you watched on the 7 videos. 
  3. Put a link to your blog on your website.     

Build a Complete Blog system based on Exercise #11

  1. Use the Username Check http://papermashup.com/demos/check-username/ to validate usernames in the user table.
  2. Validate all fields using http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/ 
  3. I should be able to post a blog entry and save it to the blog table.
  4. Show the blog entries in descending order.
  5. Use the mail() function to
    1. make Forget password send an email to the user,
    2. email the user when newly registered,
    3. email the user when change password, 
  6. Add a comments table and users should be able to comment on a post.  

Build a beautiful Folio Website www.yourdomain.com. It should have the following sections: 

  1. Frontpage (yourdomain.com/index.html) with Wow! JQuery Awesome effects 
  2. Showcase page of your projects (yourdomain.com/folio) 
  3. About page (about you, sino pa ba?) with Google Maps to your house (yourdomain.com/about) 
  4. Photo Gallery - Exercise #17 (yourdomain.com/gallery) 
  5. Contact me form ala www.Formspring.me (yourdomain.com/contact)
    -A form that consists of Name, Email, Question.
    -It should send an email reply to the site visitor.
    -Save data to a MySQL table. Table name: feedback, Fields are id, Name, Email, Question, Answer, Date Asked, Date Answered
    -Make a CRUD for your table to input your answer.
    -List all questions and answers www.yourdomain.com/contact/responses.php (even if answers are blank). Something like this http://www.formspring.me/LilTwist
  6. Ask your friends to ask a question. Minimum of 3 questions with answers. 


All forms should use validation.js and PHP validation.





1. http://anantgarg.com/2009/05/13/gmail-facebook-style-jquery-chat/ - 10 pts 

2. Facebook integration like writing to your Facebook wall. - 10 pts

3. Use www.fontsquirrel.com for your @font-face


Objective: Make A Web Application that will CHANGE the WORLD. 


Get inspired here : http://www.techcrunch.comhttp://news.cnet.com/8301-13772_3-20001798-52.htmlhttp://www.ysei.org/?q=node/18http://data.worldbank.org/


What you need to do?


  1. Blog in detail on what your Web Application does. Answer the question "Why this web application will change the world?" 
  2. Submit existing competitors and explain why your application is different.
  3. Submit a detailed wireframe of each step. 
  4. Make 1 web design mock-up. 

PASS or FAIL based on a panel of judges (Sir Lawrence, Sir Paul & Sir Ben Uy). We will not have time to have a panel for this so I, David Quitoriano, will be the judge, jury and executioner :) 

Criteria will

40% Product concept

20% Originality 

10% Commercial viability 

30% User Interface Design  

TOTAL of 100 Points 


Let's get this party started! 

Information Architecture 

Build a wireframe fan site of your favorite band or musician using www.gomockingbird.com. It should have a wireframe of the following pages: 

  1. Homepage
  2. About the band 
  3. Discography 
  4. Music Videos 
  5. Booking & Inquiries


We will discuss this in class. 

  1. Create a Gallery of your friends and their Tweets based on this JQuery tutorial http://addyosmani.com/blog/jquery-roundrr/ 
  2. You cannot reuse the images used in the example. It has to be brand new images. 

BONUS: Super extra points for those who can pull your Facebook photo albums from the Facebook Social Graph. 

  1. Create a web page of your favorite poem or song using @font-face & www.fontsquirrel.com
  2. Put a background music on your web page. Link back to the source of your poem/song & mp3 links.
  1. Setup the PayPal IPN using this tutorial http://net.tutsplus.com/tutorials/php/using-paypals-instant-payment-notification-with-php/
  2. Prepare to discuss this in class. 
  1. Redesign the user interface of www.sec.gov.ph using www.gomockingbird.com 
  2. Re-engineer the registration process to simplify and be able to register under 15 minutes. Remove unnecessary steps.
  3. Present this in class.



Based on Assignment #18 (Wireframe design) - create the Fan site of your favorite musician or artist using HTML/CSS including the ff pages: 

  1. Homepage
  2. About the band 
  3. Discography 
  4. Music Videos 
  5. Booking & Inquiries 


Note: Make sure to link back and acknowledge your sources (photos, mp3, etc.) 

  1. Setup WordPress
  2. Setup any WordPress Theme 
  3. Setup the Google Analytics (WordPress Plugin)
  4. Setup the Google Sitemaps (WordPress Plugin)


Google Charts 
  1. Make a pie chart of your budget or time usage (or what you will never do).
  2. Using the Google Charts API http://code.google.com/apis/chart/ 



Facebook API

Do something amazing with the Facebook API http://developers.facebook.com/tools/console/  


like this: Facebook API http://net.tutsplus.com/tutorials/php/how-to-authenticate-your-users-with-facebook-connect/



Get this to work on your website http://anantgarg.com/2009/05/13/gmail-facebook-style-jquery-chat/


Google Maps KML 

Create a Google Maps of Philippine Tourist Spots in tribute to Pilipinas Kay Ganda. A sample peg is the tourist site of Costa Rica http://maps.google.com/maps/ms?ie=UTF8&oe=UTF8&msa=0&msid=104039822954852108123.00000111c5153028120cb&z=8


Choose your favorite destinations here http://www.lonelyplanet.com/philippines 


Bonus: Link the Wow Philippines project (Assignment #2). What would be ideal is to take snapshots of the tourist destinations via your JQuery app. Awesome!



Comments (Show all 61)

Dave Q said

at 7:39 pm on Oct 11, 2010

Fevz, & Rob, sige pwede magpaturo kaso Friday lang ako andyan sa CSB :)

Dave Q said

at 7:39 pm on Oct 11, 2010

Fevz, & Rob, sige pwede magpaturo kaso Friday lang ako andyan sa CSB :)

Dave Q said

at 7:41 pm on Oct 11, 2010

yung CRUD is for your user tables. Yung CRUD, yes basta CRUD on PHP/MySQL.

Xy Peralta said

at 6:01 am on Oct 12, 2010

add new account po ba eto? or blogs po ba ung i-aadd for example?

ian villanueva said

at 3:43 am on Oct 12, 2010

ahh ok sir.. :)

Nikki santos said

at 6:08 am on Oct 12, 2010

sir kailangan ba napapalitan yung password for number5?

Dave Q said

at 10:11 pm on Oct 13, 2010

ok din... will give extra point. remind me. password change

Mhai Voluntarioso said

at 6:26 am on Oct 14, 2010

sir dave panu p0h koh mag pasa db poh ayaw gumana nung wamp skin? panu koh poh maga2wa ng hnd akoh gumagmit ng wamp??

Mhai Voluntarioso said

at 6:34 am on Oct 14, 2010

tska sir d p0h akoh makasunod ng maauz sa last wik na lesson ntin.. pwd p0h mag join sa magpa2turo sa inyo bkas sir? tnx p0h..

Xy Peralta said

at 12:23 am on Oct 15, 2010

hi mhai kumusta ka na? ♥

Mhai Voluntarioso said

at 12:49 am on Oct 20, 2010

auz lng xy..

Mhai Voluntarioso said

at 5:12 am on Oct 21, 2010

sir hnd p0h akoh maka2pag pass nung sa Assignment ngaun kc sir ung web host koh eh.. nag error kumuha akoh panibago.. aun.. xenxa na sir..

Mhai Voluntarioso said

at 5:23 am on Oct 21, 2010

sir pero mei blog p0h akoh sa wordpress sir.. aun.. ung about sa Revolution OS..

Anna Dy said

at 6:15 am on Oct 21, 2010

Sir Dave, hindi po gumagana yung pag-Create ng database ng web poll sa mga windows hosting... ok lng po b na ipachk nmin tom ung error??? nka upload n nman po yung poll... ayaw lang mag-connect sa database... :)

Randel Ramirez said

at 9:43 am on Oct 25, 2010

Sir dave! hindi po nag rerender ng maayos yung photogallery(Assignment 12 sa chrome) pero sa firefox ok siya.

Dave Q said

at 8:31 am on Oct 26, 2010

maayos naman sa akin dito :)

Randel Ramirez said

at 10:31 am on Oct 26, 2010

waaaaaaaaaaa ang daya sir :)). sakin sa IE8 ok siya tsaka sa firefox.hmmmmmmmmmm

rob said

at 10:48 pm on Oct 25, 2010

Sir hindi niyo po nalagyan ng grade yung blogs ko, meron po ako andon po sa wordpress lahat.

Dave Q said

at 8:33 am on Oct 26, 2010

di ko nakita nung unang tingin :P dapat makita ko uli

rob said

at 9:02 am on Oct 26, 2010

okay sir, my date naman po don so walang problema:)

Xy Peralta said

at 3:05 am on Oct 29, 2010

Hi sir, I did the photoshoot and some blogs.. nsa gallery and blog tab po un. i thought we will put the polaroid homework in the gallery eh. Sorry sir kung di napansin. nilagyan ko na lang dn sa sidebar para mas easy access.. last 3 days ko pa pu un nagawa d ko lang nalipat. =(

rob said

at 7:21 am on Nov 4, 2010

Sir maawa kayo saamin! ang dami! :(

Mhai Voluntarioso said

at 9:00 am on Nov 4, 2010

sir pacheck naman p0h ng ibang activity koh.. wla p0h kc grade eh.. aun sir.. tnx p0h..

rob said

at 11:59 pm on Nov 4, 2010

Sir all my reaction papers are in my wordpress, my date naman po don as your reference. thank you sir!

Mhai Voluntarioso said

at 10:57 am on Nov 12, 2010

Sir d nio pa poh ncheck ung mga blogs koh,, and ung iba pa po na activity

Melissa C. Ordinado-Yupangco said

at 8:01 pm on Nov 12, 2010

Sir, yung Blog ko po na activity and wireframe may link po sa Folio ko. :)

rob said

at 7:38 am on Nov 13, 2010

Sir! Dami pa po kayo hndi nacchekan sakin:) hehehe dami ko pong blogs nagawa, my dates naman po yon. and yung iba pong activity,.

Celine Tan said

at 12:33 am on Jan 4, 2011

sir panu po un hindi ko ako mkapagupload sa file manager ko cpanel kasi di ako makalogin dahil ip address has changed po lagi error

Dave Q said

at 3:34 am on Jan 5, 2011

Hi Celine,

Report the error with the webhost. try login on another PC or another internet connection.

Glenn Quilon Barrometro said

at 3:28 am on Jan 6, 2011

Sir I have 2 questions for you:

1. sir do we still need to go to the final exams schedule for webdevt tomorrow?
2. sir If I have made an "almost real" mock-up of my final exams project, do I still need to do a wireframe of it?

Thank you sir.... :D

Dave Q said

at 4:21 am on Jan 6, 2011

1. Well, technically you don't need to go. but you need to make sure I see it and I will check it.
2. Hmmm... Yes.

Glenn Quilon Barrometro said

at 6:59 am on Jan 6, 2011

oh ok sir.... I have put up a link directly on my homepage so that you and everybody else can see it.... :)

KennethGuelas said

at 12:49 am on Sep 23, 2011

I Purchased both Web Domain and Hosting.
Domain from GoDaddy
Hosting from Philhost

Currently, I have problem with my website. I search everywhere in the Philhost and can't find the DNS which i need to "point to" to make my domain work. I updated the "zone" but it seems going to take 48hrs.

I put my Google Balls at my old free hosting site Temporarily.

My Website:

Free Web Hosting:

-absent p ako ngaun sa class due to unvoidable circumstances. Tell you na lng p sir next wik. Just Making sure na I submittted my assignment.

Sandy Vistan said

at 12:54 am on Sep 28, 2011

Sir, if own Photo po ba dun sa WOW Philippines, kailangan pa naka-upload sa flickr? Hindi pa po kasi ako familiar dun sa License ng Pictures sa Flickr :D

Kenneth Anthony N. Gomez said

at 8:01 pm on Oct 5, 2011

Good Day Sir!
I'm still having a problem with my DOMAIN & HOSTING. But I'm almost done with my website.
For the meantime, I borrowed the domain and hosting account of my friend, wherein I TEMPORARILY placed my website.

Here's my temporary website: www.michellehilario.com/webdevt

Megan Japzon said

at 10:57 pm on Oct 5, 2011

-sir san ipopost ung domain... tapos ko na po..ipapasa ko na lang.. eto ung akin meganjpzon.com..

Ma.Patricia Cegi Lacosta said

at 12:35 am on Oct 9, 2011

sir dave, yung domain name ko po may problema.. kasi nka block pdin po yung paypal account ko.. kinausap ko na po yung unionbank, pero sabi nila "iconfirm nila immediately". kaso until now, wala pa din confirmation eh.. can you suggest any site para po maging temporary website ko? can i use winx for a while?

Dave Q said

at 12:27 pm on Oct 9, 2011

Please pay using another Paypal account to pay for your domain.

Kenneth Anthony N. Gomez said

at 5:43 am on Oct 20, 2011

Sir, regarding po dun sa form validation (WuFOO), nagkakaproblema po yung .php file kapag isusubmit ko na yung nafill up na form. ano po yung ibang alternatives?

Kenneth Anthony N. Gomez said

at 6:46 am on Oct 20, 2011

Sir, ok na po yung registration form ko, and yung Tees Business form.


You don't have permission to comment on this page.