1  

Integrate  jQuery,  PHP,  MySQL  project  into  a  Joomla  Web  Site    Step  1)    Ensure  that  the  JOOMLA  website  has  been  setup  and  working  properly.    Step  2)    Download  the  Joomla  extensions  to  enable  the  integration.  

 Step  3)    Login  to  Joomla  web  site  via  administrator.  

     

 

   

2  

Step  4)    Select  Extensions  >  Extension  Manager            Then  browse  the  downloaded  sourcerer  zip  file,  upload  and  install.  

 

     

 

   

3  

Step  5)    Copy  the  completed  project  folder  from  htdoc  to  Joomla  folder.  

     

 

   

4  

Step  6)    Create  a  new  article:  Content  >  Article  Manager                Click  on  New                Give  the  article  a  title:  Task  Manager                Select  Insert  Code.  

 

     

 

   

5  

 Step  7)    Add  php  code  to  include  the  project  index  file.  

 

     

 

   

6  

Step  8)    View  the  page  on  the  Joomla  web  site.      Observe  that  although  the  page  is  loaded,  we  need  to  modify  the  followings:    1)  extra  footer,  2)  missing  images  and  3)  CSS  formatting  not  correct.  Also  the  Joomla  login  module  is  blocking  part  of  the  page.  

 

     

 

   

7  

Step  9)    Use  Joomla  Administrator  to  change  the  position  of  the  login  module.                      Depends  on  the  site,  you  may  need  to  use  a  different  position  from  the  guide.  

     

 

   

8  

Step  10)    View  the  Joomla  web  site  >  Task  Manager  

     

 

   

9  

 Step  11)    Start  Dreamweaver  

           Open  index.php  file  from  the  joomla/project  folder  that  we  have  copied  in  step  Step  5)    

    Save  index.php,  view  the  Joomla  >  Task  Manager  

     

 

   

10  

Step  12)    Make  our  CSS  style  unique.    

 

      :  

    :  and  the  rest  of  the  CSS  styles….        

 

   

11  

View  Joomla  >  Task  Manager  page  

       

 

   

12  

Step  13)    Update  the  correct  path  for  the  jquery  and  jquery  ui  script  

 View  Joomla  >  Task  Manager  page    Test  the  jquery  ui  drag  and  drop  to  confirm  that  now  it  is  working.      Step  14)    Update  the  correct  path  for  the  CSS  images.    Depending  on  the  site  configuration,  the  path  to  be  updated  may  varies  from  just  adding  ‘../project/’  to  ‘../../project/’.  

 :  

 :  

 

   

13  

         

 

   

14  

View  Joomla  >  Task  Manager  page  Test  its  functionality    

   (Note:  The  email  addresses  has  complication  with  the  Joomla  stop  spam  functionality,  one  temporary  solution  is  to  update  all  the  email  addresses  to  add  a  space  before  and  after  the  @)    

===  The  End  ===