10 Ceneral Cvervlew

20 lnsLallaLlon and ConflguraLlon

30 reparlng for CakeP AppllcaLlon
40 LeL's 8ake!
30 lnLermedlaLe CakeP
W ln Lhls secLlon you wlll be exposed on general
concepLs of aglle web developmenL lncludlng
Model vlew ConLroller (MvC)
Web AppllcaLlon lrameworks
Web uevelopmenL 1ools
W luL
W verslon ConLrol
W 8emoLe ubllshlng
10 Ceneral Cvervlew
20 lnsLallaLlon and ConflguraLlon
30 reparlng for CakeP AppllcaLlon
40 LeL's 8ake!
30 lnLermedlaLe CakeP
W 1hls secLlon Leaches you on how Lo prepare
your compuLer / server for aglle web
developmenL
W ?ou wlll also learn a blL abouL conflgurlng a
web server ln wlndows
uownloads
- Cpen your browser (Coogle Chrome referred)
- vlslL fLp//10020199/ (Lhls ls for who have access Lo lnLernal ul1M Shah Alam's neLwork eg Wlfl and eLc)
- username hero assword zerone
- uownload approprlaLe flles
- wampserver21ewln32exe
- navlcaL091_llLe_enexe [ mysqlworkbenchgpl32331wln32msl
- npp39lnsLallerexe [ pn2342330_mulLllangexe
- wlnscp432zlp
- glL174exe
- cakephpzlp
lnsLallaLlon
- lnsLall all downloaded flles above (excepL cakephpzlp)
- 8un WAM server
- Cllck on W" lcon on sysLem Lray Apache Apache Modules Make sure mod_rewrlLe ls Llcked
- LxLracL Lhe cakephpzlp flle lnLo Crogram llles (or Crogram llles (x86) on wlndows 64blL
- SLarL 8lghL cllck aL CompuLer roperLles Advanced sysLem seLLlngs Advanced LnvlronmenL varlables
- Cn sysLem varlables flnd aLh" and double cllck lL
- add Crogram llles (x86)CakePappConsole" aL Lhe end of Lhe enLry (wlLhouL quoLes)
- cllck Ck Ck Ck
- 1esLlng cakephp sLarL Lype cmd" Lype cake"
- lf cake verslon dlsplayed Lhen Lhe lnsLallaLlon has succeeded
7
10 Ceneral Cvervlew
20 lnsLallaLlon and ConflguraLlon
30 reparlng for CakeP AppllcaLlon
40 LeL's 8ake!
30 lnLermedlaLe CakeP
W 1hls secLlon covers more on daLabase deslgn
Whlch ls requlred Lo generaLe a CakeP
appllcaLlon(s)
W 1herefore you are expecLed Lo already have
baslcs on daLa modelllng
W We wlll be uslng navlcaL or MySCL Workbench
for Lhese
W llrsL sLep ls Lo creaLe ouL our uaLa Model
(LnLlLy 8elaLlonshlp ulagram) by hand
W noLe MySCL workbench has Lhls feaLure
bullLln
W SLarL up navlcaL or Workbench ?ou wlll geL
Lhe followlng
llgure 1 navlcaL LlLe llgure 1 MySCL Workbench
W LeL's creaLe our flrsL daLabase connecLlon
navlcaL MySCL
Workbench
W Workbench daLa modelllng
CoLo llle new Model
ress 1" Lo creaLe new LnLlLy (1able)
Cllck anywhere on Lhe grld appears
uouble cllck Lhe Lable and rename lL Lo users"*
Cllck on Lab
8ename ldusers" lnLo ld" and selecL ln1 for Lhe
Lype and Llck on Lhe
uouble cllck on Lhe nexL row and puL Lhe
followlng aLLrlbuLes accordlngly
W usernamevarchar(20) passwordvarchar(200)
W Workbench daLa modelllng (conLlnued)
selecL edlL schema rename mydb"
lnLo cake"
Cpen uaLabase Menu lorward Lnglneer nexL
nexL nexL LxecuLe
W navlcaL daLa modelllng
Lxpand mydaLabase mydaLabase new
uaLabase
uL cake"* as daLabase name
LesL Cpen daLabase
puL ld" on name lnL" on 1ype and Llck
on Lhe
8epeaL prevlous sLep for Lhese
W usernamevarchar(20) passwordvarchar(200)
Cllck and glve users" as Lable name
10 Ceneral Cvervlew
20 lnsLallaLlon and ConflguraLlon
30 reparlng for CakeP AppllcaLlon
40 LeL's 8ake!
30 lnLermedlaLe CakeP
W SLarL 1ype cmd" LnLer
W cd CWampwww
W mkdlr cake*
W cd cake
W cake bake press enLer 10 Llmes (slowly noLe
Lhe ouLpuL)
W ress y Lhen enLer
W 1ype LesL" for daLabase name enLer 3 Llmes
W ln command prompL Lype cd myapp
W cake bake
W 1ype M for model
W Choose users" Lable by Lyplng ln 1 Lhen enLer
W 1ype y" Lhen enLer
W 1ype 2 Lo choose username" fleld
W 1ype n" Lhen enLer Lo sklp valldaLlon
W ress enLer Lo speclfy relaLlonshlp
W ress enLer 3 Llmes
W cake bake
W 1ype C for conLroller
W Choose users" Lable by Lyplng ln 1 Lhen enLer
W 1ype n" Lhen enLer
W 1ype y" Lhen enLer
W 1ype y" Lhen enLer 4 Llmes (slowly)
W cake bake
W 1ype v for vlew
W Choose users" Lable by Lyplng ln 1 Lhen enLer
W 1ype n" Lhen enLer
W We're done!
W now open your browser (Coogle chrome
preferred)
W navlgaLe Lo hLLp//localhosL/cake/myapp
W ?ou wlll see
W no worrles Lhls ls a conflguraLlon error We'll
recLlfy lL as follows
W Cpen my compuLer Local ulsk C Wamp
www cake myapp webrooL
W lndexphp LdlL wlLh noLepad++ (or
choose Cpen Lhen selecL selecL program from
llsL of lnsLalled programs" and cllck 8rowse"
navlgaLe Lo Crogram llles
(x86)rogrammer's noLepadpnexe and
cllck Ck)
W CoLo llne 39* and remove Lhe //" aL Lhe
beglnnlng of llne
W Save Lhe flle and refresh your browser
W now browse
hLLp//localhosL/cake/myapp/users and you
wlll see
W ln Lhls page you wlll be able Lo add new users
edlL and also vlew Lhem
W lf you wlsh Lo edlL each subpage of Lhe enLlLy
llke add edlL vlew lndex you can edlL Lhe
respecLlve enLlLy's acLlon page eg addcLp
edlLcLp vlewcLp and lndexcLp from Lhe
vlewLnLlLyname folder
W And lf you wlsh Lo change how Lhe appllcaLlon
saves[vlew daLa refer Lo Lhe
LnLlLynameConLrollerphp ln ConLrollers
folder
23
10 Ceneral Cvervlew
20 lnsLallaLlon and ConflguraLlon
30 reparlng for CakeP AppllcaLlon
40 LeL's 8ake!
30 lnLermedlaLe CakeP
W 1hls secLlon Leaches you on more pracLlcal
lmplemenLaLlon of cakephp funcLlons
lncludlng
age CusLomlzaLlons
uslng !Cuery
ln[ecLlng !query luglns (eg nlvoSllder)
W now leL's plmp our web page
W llrsL leL's surf on Lhe neL a blL Lo flnd a nlce P1ML LemplaLe for our
CakeP appllcaLlon (or you mlghL wanL Lo compose your own P1ML) l
found Lhese hLLp//wwwnoupecom/css/30freecssxhLml
LemplaLeshLml qulLe lnLeresLlng
W uownload LemplaLe of your cholce ( l use Lhe followlng )
W Cnce you have all Lhe resources (lncludlng Lhe
P1ML scrlpLs) goLo CWampwwwcakemyapp
uslng wlndows explorer
W now copy your LemplaLe's lndexhLml lnLo
vlewLayouLs folder
W 8ename Lhe defaulLcLp flle lnLo defaulLcLpbak
Lhen rename lndexhLml lnLo defaulLcLp
W navlgaLe back Lo CWampwwwcakemyapp
Lhen copy all lmages lnLo webrooLlmg folder
[avascrlpL flles lnLo webrooL[s folder and CSS
flles lnLo webrooLcss folder
W Cpen hLLp//locahosL/cake/myapp on browser
and you wlll see
W 1hls ls because all Lhe references ln Lhe P1ML
flle does noL yeL been updaLed
W LeL's flx Lhls on Lhe nexL sllde
W Cpen Lhe defaulLcLp flle ln rogrammer's noLepad [ noLepad++
W Conslder Lhe followlng
<head
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /
<titleJrnare - Themeflash.com Free Template</title
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" /
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" /
<!-- Start menu css and js files here --
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen" /
<script type="text/javascript" src="js/jquery-1.3.2.min.js"</script
<script type="text/javascript" src="js/hoverIntent.js"</script
<script type="text/javascript" src="js/superfish.js"</script
<script type="text/javascript"
// initialise plugins
jQuery(function(),
jQuery('ul.sf-menu').superfish();
,);
</script
<!-- End menu css and js files here --
<!-- Begin featured slider css & js files --
<link rel="stylesheet" type="text/css" media="all" href="css/featuredslider.css" /
<script type="text/javascript" src="js/script.js"</script
<!-- End featured slider css & js files --
<!--if IE 6,
<script type='text/javascript' src='js/dd_belated_png.js'</script
<scriptDD_belatedPNG.fix('.pngfix');</script
<!endif,--
</head
W ln CakeP <link rel="stylesheet" type="text/css" media="all" href="css/960.css" / are wrlLLen as
<.php echo $this-Html-css(array('960.css'), 'stylesheet', array('media' = 'all')); .
W As for scrlpLs <script type="text/javascript" src="js/jquery-1.3.2.min.js"</script are wrlLLen as
<.php echo $this-Html-script('jquery-1.3.2.min.js'); .
W So for Lhe head secLlon lL should look llke Lhls
<head
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /
<titleJrnare - Themeflash.com Free Template</title
<.php echo $this-Html-css(array('960.css'), 'stylesheet', array('media' = 'all')); .
<.php echo $this-Html-css(array('style.css'), 'stylesheet', array('media' = 'all')); .
<!-- Start menu css and js files here --
<.php echo $this-Html-css(array('superfish.css'), 'stylesheet', array('media' = 'all')); .
<.php echo $this-Html-script('jquery-1.3.2.min.js'); .
<.php echo $this-Html-script('hoverIntent.js'); .
<.php echo $this-Html-script('superfish.js'); .
<script type="text/javascript"
// initialise plugins
jQuery(function(),
jQuery('ul.sf-menu').superfish();
,);
</script
<!-- End menu css and js files here --
<!-- Begin featured slider css & js files --
<.php echo $this-Html-css(array('featuredslider.css'), 'stylesheet', array('media' = 'all')); .
<script type="text/javascript" src="js/script.js"</script
<!-- End featured slider css & js files --
<!--if IE 6,
<script type='text/javascript' src='js/dd_belated_png.js'</script
<scriptDD_belatedPNG.fix('.pngfix');</script
<!endif,--
</head
W now refresh your browser noLe Lhe changes
W Powever you sLlll see LhaL lmages are noL loaded 1hls ls because Lhe references sLlll noL
correcL
W 1o flx Lhls know LhaL for <img src="images/logo.png" alt="DesignPlus"
class="pngfix logo"/, lL ls wrlLLen as <.php echo $this-Html-
image('logo.png', array('alt' = 'DesignPlus' , 'class' =
'pngfix logo' )); .
W AddlLlonally for css flles we also need Lo updaLe Lhelr references as Lhey sLlll are lncorrecL
1o do Lhls replace /lmages" lnLo /lmg/" and /phoLos/" lnLo /lmg/phoLos/" for each
css flles lnslde Lhe webrooLcss folder
W Save all flles and refresh browser and you
geL Lhe resulL as Lhe rlghL plcLure
W Powever Lhls ls sLlll lncompleLe as you
wlll flnd Lhe conLenL ls always Lhe same
when you open
hLLp//localhosL/cake/myapp/users/ on
your browser
W We'll flx Lhls on Lhe nexL slldes
34
W now go Lo defaulLcLp page of your noLepad++ or
programmer's noLepad
W CuL (C18L+x) conLenL from llne 267 unLll 326 (hlghllghL flrsL)
W 8eplace Lhe copled conLenL lnLo vlewageshomecLp and
save Lhe flle
W now creaLe a new llne on llne 267 of defaulLcLp flle and
puL
<.php echo $this-Session-flash(); .
<.php echo $content_for_layout; .
W Save Lhe flle and refresh browser 1here ls no change 8uL
Lry navlgaLe Lo hLLp//localhosL/cake/myapp/users and
hLLp//localhosL/cake/myapp/users/add you wlll see
someLhlng dlfferenL
W lf you are noL saLlsfled wlLh Lhe form layouL check Lhe class
of Lhe elemenL (uslng lnspecL elemenL) and Lhen declares
Lhem lnslde Lhe sLylecss flles of Lhe webrooLcss folder
W 1hls ls whaL you should be geLLlng
W uslng [Cuery ln CakeP ls relaLlvely easy
W llrsL you have Lo download Lhe [Cuery [avascrlpL
flle from Coogle Cun
hLLp//a[axgoogleaplscom/a[ax/llbs/[query/162
/[querymln[s
W 1hen puL Lhe [querymln[s lnLo webrooL[s folder
W 1hen ln your defaulLcLp flle [usL puL
<.php echo $this-Html-script(`jquery.min.js'); .
lnslde Lhe head secLlon
W uone you already have [query ln your CakeP
appllcaLlon
W now LhaL you have learned on how Lo use [query you may wanL Lo
use cool [query pluglns avallable ouL Lhere such as nlvoSllder and so
on
W 1o do LhaL [usL download Lhe nlvosllder lLself from
hLLp//dev7sLudloscom/downloads/43
W Cnce you flnlshed Lhe download open Lhe zlp flle and exLracL Lhe
[querynlvosllderpack[s lnLo webrooL[s lmages from Lhe archlve
lnLo webrooLlmg and nlvoslldercss lnLo webrooLcss
W ln your defaulLcLp flle (lnslde vlewlayouLs folder) lmporL Lhe
nlvosllder [s flle by
<.php echo $this-Html-script('jquery.nivo.slider.pack.js');
.
<.php echo $this-Html-css(array('nivo-slider.css'),
'stylesheet', array('media' = 'all')); .
ln Lhe head Lag
W 1hen ln your homecLp flle (lnslde vlewages folder) puL Lhe followlng (accordlng Lo where
you wanL Lo place lL)
<div id="wrapper"
<a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios"dev7studios</a
<div class="slider-wrapper theme-default"
<div class="ribbon"</div
<div id="slider" class="nivoSlider"
<img src="images/toystory.jpg" alt="" /
<a href="http://dev7studios.com"<img src="images/up.jpg" alt="" title="This is an
example of a caption" /</a
<img src="images/walle.jpg" alt="" data-transition="slideInLeft" /
<img src="images/nemo.jpg" alt="" title="#htmlcaption" /
</div
<div id="htmlcaption" class="nivo-html-caption"
<strongThis</strong is an example of a <emHTML</em caption with <a href="#"a
link</a.
</div
</div
</div
<script type="text/javascript"
$(window).load(function() ,
$('#slider').nivoSlider();
,);
</script
W lf you would llke Lo learn abouL
LlsL Cb[ecL manlpulaLlon
llle/lmage uploadlng
Access ConLrol LlsL
And more
W vlslL preclousbralnslnfo/allabouLcake (wlll be
updaLed soon)
41