building interactive & dynamic websites web-o-lution
TRANSCRIPT
BUILDING INTERACTIVE & DYNAMIC WEBSITES
BUILDING INTERACTIVE & DYNAMIC WEBSITES
WEB-O-LUTIONWEB-O-LUTION
INTRODUCTION
INTRODUCTION
Chris Ilagan
PROFILE/PROFILE/
Our Beginnings
Our Experience
Sample Work
GETTING STARTED/GETTING STARTED/
The Opportunity
Everyday more peopleare experiencing the web
The web has been an indispensable medium for doing business,
marketing,connecting, learning, gathering
information, etc.
Web or being online is the future
Tools and Prog.
ANATOMY OF AN INTERACTIVE
& DYNAMIC WEBSITE
ANATOMY OF AN INTERACTIVE
& DYNAMIC WEBSITE
DISCUSSIONDISCUSSION
DESIGNING ITFROM SCRATCHDESIGNING IT
FROM SCRATCH
ADDING LIFE AND INTELLIGENCE
ADDING LIFE AND INTELLIGENCE
MAKING YOUR CONTENTSDYNAMIC
MAKING YOUR CONTENTSDYNAMIC
WEBSITEWEBSITE{FLASH}{FLASH}WEBSITEWEBSITE{FLASH}{FLASH}
HTMLHTMLHTMLHTML XMLXMLXMLXML SERVERSERVERSERVERSERVER
CONTENT MANAGEMENT SYSTEM USING PHP & mySQL
CONTENT MANAGEMENT SYSTEM USING PHP & mySQL
Ediboy Ilagan
CMSCMS{FLASH}{FLASH}
CMSCMS{FLASH}{FLASH}
PHPPHPPHPPHP
DATABASDATABASEE
{mySQL}{mySQL}
DATABASDATABASEE
{mySQL}{mySQL}
HTMLHTMLHTMLHTML XMLXMLXMLXML
SERVERSERVERSERVERSERVER
ACTIONSCRIPTACTIONSCRIPTfunctionfunction loginCheck() {myData = loginCheck() {myData = new LoadVarsnew LoadVars();myData.userFromFlash ();myData.userFromFlash = status_mc.user_txt.= status_mc.user_txt.texttext;myData.passFromFlash = ;myData.passFromFlash = status_mc.pass_txt.status_mc.pass_txt.texttext;myData.statusToFlash = ;myData.statusToFlash = thisthis.statusToFlash;myData..statusToFlash;myData.onLoadonLoad = = functionfunction() { display_() { display_txt.htmlTexttxt.htmlText = = myData.statusToFlash; index = myData.statusToFlash.myData.statusToFlash; index = myData.statusToFlash.indexOfindexOf(("Login "Login successfully"successfully"); ); ifif (index == 0){ (index == 0){ playplay(); (); status_mc.status_mc._visible_visible==falsefalse; }};myData.; }};myData.sendAndLoadsendAndLoad((""login.php"", myData, , myData, "POST""POST");};);};
ACTIONSCRIPTACTIONSCRIPTfunctionfunction loginCheck() {myData = loginCheck() {myData = new LoadVarsnew LoadVars();myData.userFromFlash ();myData.userFromFlash = status_mc.user_txt.= status_mc.user_txt.texttext;myData.passFromFlash = ;myData.passFromFlash = status_mc.pass_txt.status_mc.pass_txt.texttext;myData.statusToFlash = ;myData.statusToFlash = thisthis.statusToFlash;myData..statusToFlash;myData.onLoadonLoad = = functionfunction() { display_() { display_txt.htmlTexttxt.htmlText = = myData.statusToFlash; index = myData.statusToFlash.myData.statusToFlash; index = myData.statusToFlash.indexOfindexOf(("Login "Login successfully"successfully"); ); ifif (index == 0){ (index == 0){ playplay(); (); status_mc.status_mc._visible_visible==falsefalse; }};myData.; }};myData.sendAndLoadsendAndLoad((""login.php"", myData, , myData, "POST""POST");};);};
PHP CODEPHP CODE<?php<?php$link = $link = mysql_connectmysql_connect(("cms.database.com""cms.database.com", , "username""username", , "password""password"); ); mysql_select_dbmysql_select_db(("database_name""database_name"););$query = $query = "select username and password from users";"select username and password from users";$result = $result = mysql_querymysql_query( $query )( $query ) or die or die (("didn't query""didn't query"); );
if if ($user == . $line[($user == . $line["username""username"] && $pass == . $line[] && $pass == . $line["password""password"])]){ { echoecho "&statusToFlash=""&statusToFlash=".$successFlash;}.$successFlash;}elseelse{ { echoecho "&statusToFlash=""&statusToFlash=".$failedFlash;}.$failedFlash;}?>?>
PHP CODEPHP CODE<?php<?php$link = $link = mysql_connectmysql_connect(("cms.database.com""cms.database.com", , "username""username", , "password""password"); ); mysql_select_dbmysql_select_db(("database_name""database_name"););$query = $query = "select username and password from users";"select username and password from users";$result = $result = mysql_querymysql_query( $query )( $query ) or die or die (("didn't query""didn't query"); );
if if ($user == . $line[($user == . $line["username""username"] && $pass == . $line[] && $pass == . $line["password""password"])]){ { echoecho "&statusToFlash=""&statusToFlash=".$successFlash;}.$successFlash;}elseelse{ { echoecho "&statusToFlash=""&statusToFlash=".$failedFlash;}.$failedFlash;}?>?>
CMSCMSCMSCMS
PHPPHPPHPPHP
DATABASDATABASEE
DATABASDATABASEE
ACTIONSCRIPTACTIONSCRIPTfunction updateContent() {myData = new function updateContent() {myData = new LoadVars();myData.idFromFlash = pageid;myData.contentFromFlash = LoadVars();myData.idFromFlash = pageid;myData.contentFromFlash = holdContent;myData.titleFromFlash = title_txt.text;myData.statusToFlash holdContent;myData.titleFromFlash = title_txt.text;myData.statusToFlash = this.statusToFlash;myData.onLoad = function() { display_txt.htmlText = this.statusToFlash;myData.onLoad = function() { display_txt.htmlText = myData.statusToFlash;};myData.sendAndLoad("update.php", myData, = myData.statusToFlash;};myData.sendAndLoad("update.php", myData, "POST");};"POST");};
ACTIONSCRIPTACTIONSCRIPTfunction updateContent() {myData = new function updateContent() {myData = new LoadVars();myData.idFromFlash = pageid;myData.contentFromFlash = LoadVars();myData.idFromFlash = pageid;myData.contentFromFlash = holdContent;myData.titleFromFlash = title_txt.text;myData.statusToFlash holdContent;myData.titleFromFlash = title_txt.text;myData.statusToFlash = this.statusToFlash;myData.onLoad = function() { display_txt.htmlText = this.statusToFlash;myData.onLoad = function() { display_txt.htmlText = myData.statusToFlash;};myData.sendAndLoad("update.php", myData, = myData.statusToFlash;};myData.sendAndLoad("update.php", myData, "POST");};"POST");};
PHP CODEPHP CODE<?php<?php$link = mysql_connect("cms.database.com", "username", "password"); $link = mysql_connect("cms.database.com", "username", "password"); mysql_select_db("database_name");$query = "UPDATE profiles SET mysql_select_db("database_name");$query = "UPDATE profiles SET content='$content',title='$title' where id='$id'";$result = content='$content',title='$title' where id='$id'";$result = mysql_query( $query );?>mysql_query( $query );?>
PHP CODEPHP CODE<?php<?php$link = mysql_connect("cms.database.com", "username", "password"); $link = mysql_connect("cms.database.com", "username", "password"); mysql_select_db("database_name");$query = "UPDATE profiles SET mysql_select_db("database_name");$query = "UPDATE profiles SET content='$content',title='$title' where id='$id'";$result = content='$content',title='$title' where id='$id'";$result = mysql_query( $query );?>mysql_query( $query );?>
CMSCMSCMSCMS
PHPPHPPHPPHP
DATABASDATABASEE
DATABASDATABASEE
HTMLHTMLHTMLHTML
ACTIONSCRIPTACTIONSCRIPTfunction uploadPhoto() {myData = new LoadVars();myData.idFromFlash function uploadPhoto() {myData = new LoadVars();myData.idFromFlash = photos;myData.statusToFlash = this.statusToFlash;myData.onLoad = = photos;myData.statusToFlash = this.statusToFlash;myData.onLoad = function() { display_txt.htmlText = function() { display_txt.htmlText = myData.statusToFlash;};myData.sendAndLoad("upload.php", myData, myData.statusToFlash;};myData.sendAndLoad("upload.php", myData, "POST");};"POST");};
ACTIONSCRIPTACTIONSCRIPTfunction uploadPhoto() {myData = new LoadVars();myData.idFromFlash function uploadPhoto() {myData = new LoadVars();myData.idFromFlash = photos;myData.statusToFlash = this.statusToFlash;myData.onLoad = = photos;myData.statusToFlash = this.statusToFlash;myData.onLoad = function() { display_txt.htmlText = function() { display_txt.htmlText = myData.statusToFlash;};myData.sendAndLoad("upload.php", myData, myData.statusToFlash;};myData.sendAndLoad("upload.php", myData, "POST");};"POST");};
PHP CODEPHP CODE<?php<?php$storage = 'images';$uploadfile = "$storage/" . $storage = 'images';$uploadfile = "$storage/" . basename( $_FILES['Filedata']['name'] );if basename( $_FILES['Filedata']['name'] );if ( move_uploaded_file( $_FILES['Filedata']['tmp_name'] , $uploadfile ) ) ( move_uploaded_file( $_FILES['Filedata']['tmp_name'] , $uploadfile ) ) { echo( '1 ' . $_FILES['Filedata']['name']);}else{ echo( '0');}?>{ echo( '1 ' . $_FILES['Filedata']['name']);}else{ echo( '0');}?>
PHP CODEPHP CODE<?php<?php$storage = 'images';$uploadfile = "$storage/" . $storage = 'images';$uploadfile = "$storage/" . basename( $_FILES['Filedata']['name'] );if basename( $_FILES['Filedata']['name'] );if ( move_uploaded_file( $_FILES['Filedata']['tmp_name'] , $uploadfile ) ) ( move_uploaded_file( $_FILES['Filedata']['tmp_name'] , $uploadfile ) ) { echo( '1 ' . $_FILES['Filedata']['name']);}else{ echo( '0');}?>{ echo( '1 ' . $_FILES['Filedata']['name']);}else{ echo( '0');}?>
XMLXML<?xml version="1.0"?<?xml version="1.0"?><photos><item><image>ima><photos><item><image>images/boat01.jpg</image><thumbges/boat01.jpg</image><thumbnail></nail></thumbnail><caption></thumbnail><caption></caption></caption></item><item><image>images/item><item><image>images/boat02.jpg</boat02.jpg</image><thumbnail></image><thumbnail></thumbnail><caption></thumbnail><caption></caption></caption></item><item><image>images/item><item><image>images/boat03.jpg</boat03.jpg</image><thumbnail></image><thumbnail></thumbnail><caption></thumbnail><caption></caption></item></photos>caption></item></photos>
XMLXML<?xml version="1.0"?<?xml version="1.0"?><photos><item><image>ima><photos><item><image>images/boat01.jpg</image><thumbges/boat01.jpg</image><thumbnail></nail></thumbnail><caption></thumbnail><caption></caption></caption></item><item><image>images/item><item><image>images/boat02.jpg</boat02.jpg</image><thumbnail></image><thumbnail></thumbnail><caption></thumbnail><caption></caption></caption></item><item><image>images/item><item><image>images/boat03.jpg</boat03.jpg</image><thumbnail></image><thumbnail></thumbnail><caption></thumbnail><caption></caption></item></photos>caption></item></photos>
CMSCMSCMSCMS
PHPPHPPHPPHP
DATABASDATABASEE
DATABASDATABASEE
XMLXMLXMLXMLSERVERSERVERSERVERSERVER
ACTIONSCRIPTACTIONSCRIPTfunction addToCalendar() {myData = new function addToCalendar() {myData = new LoadVars();myData.dateFromFlash = datePHP;myData.statusToFlash = LoadVars();myData.dateFromFlash = datePHP;myData.statusToFlash = this.statusToFlash;myData.onLoad = function() this.statusToFlash;myData.onLoad = function() { _parent._parent.display_txt.htmlText = myData.statusToFlash; { _parent._parent.display_txt.htmlText = myData.statusToFlash; setColor(selDate.dateBG_mc,_color_for_event); setColor(selDate.dateBG_mc,_color_for_event); selDate.total_events_mc._visible = true; selDate.total_events_mc._visible = true; selDate.total_events_mc.theLabel.text = "Booked"; }; selDate.total_events_mc.theLabel.text = "Booked"; }; myData.sendAndLoad("addtocalendar.php", myData, "POST");};myData.sendAndLoad("addtocalendar.php", myData, "POST");};
ACTIONSCRIPTACTIONSCRIPTfunction addToCalendar() {myData = new function addToCalendar() {myData = new LoadVars();myData.dateFromFlash = datePHP;myData.statusToFlash = LoadVars();myData.dateFromFlash = datePHP;myData.statusToFlash = this.statusToFlash;myData.onLoad = function() this.statusToFlash;myData.onLoad = function() { _parent._parent.display_txt.htmlText = myData.statusToFlash; { _parent._parent.display_txt.htmlText = myData.statusToFlash; setColor(selDate.dateBG_mc,_color_for_event); setColor(selDate.dateBG_mc,_color_for_event); selDate.total_events_mc._visible = true; selDate.total_events_mc._visible = true; selDate.total_events_mc.theLabel.text = "Booked"; }; selDate.total_events_mc.theLabel.text = "Booked"; }; myData.sendAndLoad("addtocalendar.php", myData, "POST");};myData.sendAndLoad("addtocalendar.php", myData, "POST");};
PHP CODEPHP CODE<?php<?php$query = "select * from calendar order by date";$result = $query = "select * from calendar order by date";$result = mysql_query( $query ) or die ("didn't query");$xml = '<?xml mysql_query( $query ) or die ("didn't query");$xml = '<?xml version="1.0" encoding="utf-8"?>'."\n";$xml .= '<events>'."\version="1.0" encoding="utf-8"?>'."\n";$xml .= '<events>'."\n";while($line = mysql_fetch_assoc($result)) { $xml .= "\n".'<event>'."\n";while($line = mysql_fetch_assoc($result)) { $xml .= "\n".'<event>'."\n"; $xml .= '<date>' . $line["date"] . '</date>'."\n"; $xml .= '<title><!n"; $xml .= '<date>' . $line["date"] . '</date>'."\n"; $xml .= '<title><![CDATA[ ' . $title . ' ]]></title>'."\n"; $xml .= [CDATA[ ' . $title . ' ]]></title>'."\n"; $xml .= '<image>images/event01.jpg</image>'."\n"; $xml .= '<description><!'<image>images/event01.jpg</image>'."\n"; $xml .= '<description><![CDATA[ ' . $desc . ' ]]></description>'."\n"; $xml .= '<site><![CDATA[ ' . $desc . ' ]]></description>'."\n"; $xml .= '<site><![CDATA[ ' . $site . ' ]]></site>'."\n"; $xml .= '</event>'."\n";}?>[CDATA[ ' . $site . ' ]]></site>'."\n"; $xml .= '</event>'."\n";}?>
PHP CODEPHP CODE<?php<?php$query = "select * from calendar order by date";$result = $query = "select * from calendar order by date";$result = mysql_query( $query ) or die ("didn't query");$xml = '<?xml mysql_query( $query ) or die ("didn't query");$xml = '<?xml version="1.0" encoding="utf-8"?>'."\n";$xml .= '<events>'."\version="1.0" encoding="utf-8"?>'."\n";$xml .= '<events>'."\n";while($line = mysql_fetch_assoc($result)) { $xml .= "\n".'<event>'."\n";while($line = mysql_fetch_assoc($result)) { $xml .= "\n".'<event>'."\n"; $xml .= '<date>' . $line["date"] . '</date>'."\n"; $xml .= '<title><!n"; $xml .= '<date>' . $line["date"] . '</date>'."\n"; $xml .= '<title><![CDATA[ ' . $title . ' ]]></title>'."\n"; $xml .= [CDATA[ ' . $title . ' ]]></title>'."\n"; $xml .= '<image>images/event01.jpg</image>'."\n"; $xml .= '<description><!'<image>images/event01.jpg</image>'."\n"; $xml .= '<description><![CDATA[ ' . $desc . ' ]]></description>'."\n"; $xml .= '<site><![CDATA[ ' . $desc . ' ]]></description>'."\n"; $xml .= '<site><![CDATA[ ' . $site . ' ]]></site>'."\n"; $xml .= '</event>'."\n";}?>[CDATA[ ' . $site . ' ]]></site>'."\n"; $xml .= '</event>'."\n";}?>
XMLXML<?xml version="1.0" encoding="utf-8"?<?xml version="1.0" encoding="utf-8"?><events><event><date>2009-01-><events><event><date>2009-01-01</date><title><![CDATA[ Default 01</date><title><![CDATA[ Default Title Title ]]></title><image>images/event01.jpg<]]></title><image>images/event01.jpg</image><description><![CDATA[ Default /image><description><![CDATA[ Default Description ]]></description><site><!Description ]]></description><site><![CDATA[ Default URL [CDATA[ Default URL ]]></site></event><event><date>2009]]></site></event><event><date>2009-01-02</date><title><![CDATA[ Default -01-02</date><title><![CDATA[ Default Title Title ]]></title><image>images/event01.jpg<]]></title><image>images/event01.jpg</image><description><![CDATA[ Default /image><description><![CDATA[ Default Description ]]></description><site><!Description ]]></description><site><![CDATA[ Default URL [CDATA[ Default URL ]]></site></event><event><date>2009]]></site></event><event><date>2009-01-03</date><title><![CDATA[ Default -01-03</date><title><![CDATA[ Default Title Title ]]></title><image>images/event01.jpg<]]></title><image>images/event01.jpg</image><description><![CDATA[ Default /image><description><![CDATA[ Default Description ]]></description><site><!Description ]]></description><site><![CDATA[ Default URL [CDATA[ Default URL ]]></site></event></events>]]></site></event></events>
XMLXML<?xml version="1.0" encoding="utf-8"?<?xml version="1.0" encoding="utf-8"?><events><event><date>2009-01-><events><event><date>2009-01-01</date><title><![CDATA[ Default 01</date><title><![CDATA[ Default Title Title ]]></title><image>images/event01.jpg<]]></title><image>images/event01.jpg</image><description><![CDATA[ Default /image><description><![CDATA[ Default Description ]]></description><site><!Description ]]></description><site><![CDATA[ Default URL [CDATA[ Default URL ]]></site></event><event><date>2009]]></site></event><event><date>2009-01-02</date><title><![CDATA[ Default -01-02</date><title><![CDATA[ Default Title Title ]]></title><image>images/event01.jpg<]]></title><image>images/event01.jpg</image><description><![CDATA[ Default /image><description><![CDATA[ Default Description ]]></description><site><!Description ]]></description><site><![CDATA[ Default URL [CDATA[ Default URL ]]></site></event><event><date>2009]]></site></event><event><date>2009-01-03</date><title><![CDATA[ Default -01-03</date><title><![CDATA[ Default Title Title ]]></title><image>images/event01.jpg<]]></title><image>images/event01.jpg</image><description><![CDATA[ Default /image><description><![CDATA[ Default Description ]]></description><site><!Description ]]></description><site><![CDATA[ Default URL [CDATA[ Default URL ]]></site></event></events>]]></site></event></events>
CMSCMSCMSCMS
PHPPHPPHPPHP
DATABASDATABASEE
DATABASDATABASEE
XMLXMLXMLXML
ACCESSIBILITYACCESSIBILITY
Chris Ilagan
WEBSITEWEBSITE{FLASH}{FLASH}WEBSITEWEBSITE{FLASH}{FLASH}
HTMLHTMLHTMLHTMLXMLXMLXMLXML
SERVERSERVERSERVERSERVER
DEMODEMO
SUMMARYSUMMARY
Summary
The web or an online presence gives us great potentials and opportunities.
There are available tool and programs that will help us get started and advance on web development.
Creating a website goes beyond what the user sees and experience. There is an amount of logic and dynamic data communication going
Summary
A CMS backed by PHP and mySQL makes our website more intelligent, dynamic and extensible.
A functional website should also be optimized for search engines like Google and can be properly rendered on mobile devices.
In everything you do, you should put your heart on it and enjoy it. Always ask God’s guidance and wisdom!
Q & AQ & A
Q and A
Give advantages of having an online
presence especially for your business.
Give advantages of having an online
presence especially for your business.
Q and A
Give at least 3 programs or tools used on creating interactive and dynamic
websites
Give at least 3 programs or tools used on creating interactive and dynamic
websites
Q and A
As discussed PHP acts as a __________ between user interface and the
database
As discussed PHP acts as a __________ between user interface and the
database
Q and A
What are the sources of dynamic data? Give at
least one.
What are the sources of dynamic data? Give at
least one.
Q and A
What is the term used when making your website visible to search engines
and mobile phones?
What is the term used when making your website visible to search engines
and mobile phones?
Q and A
What does CMS stands for?
What does CMS stands for?
Q and A
What database is usually used to work with PHP?
What database is usually used to work with PHP?