Scroll page back to the top

Content Management System with Dreamweaver CS4, PHP, MySQL and CKEditor

Content Management System with Dreamweaver CS4, PHP, MySQL and CKEditor

In this tutorial you will learn how to build your very own Content Management System with Adobe Dreamweaver CS4, PHP, MySQL and FCKEditor. Over 2.9h of videos.

With new chapter 'Upgrade to CKEditor'!

Dreamweaver Tutorial

Sebastian Sulinski on 30th Apr 2009

Download Exercise Files
 

01 : Introduction

01 : What you are going to be developing (01:33 min)

1  
 

02 : Preparation

01 : Installing WAMP Server (03:34 min)

2  
 

02 : Securing MySQL Database Server (03:43 min)

3  
 

03 : Creating site definition (02:15 min)

4  
 

04 : Importing and connecting to the database (02:56 min)

5  
 

03 : Control panel login form

01 : Creating login form (04:28 min)

6  
 

02 : Login user server behavior (05:33 min)

7  
 

03 : Login failed page (02:05 min)

8  
 

04 : Pages section

01 : List of pages (06:45 min)

9  
 

02 : Remove and Edit page links (07:07 min)

10  
 

03 : Search engine (03:56 min)

11  
 

04 : Search SQL statement (06:12 min)

12  
 

05 : Sticky form fields and restrict access to page (02:56 min)

13  
 

06 : Remove page (05:28 min)

14  
 

05 : Edit page

01 : Update record form wizard (04:48 min)

15  
 

02 : Formatting table (02:55 min)

16  
 

03 : Form validation (05:05 min)

17  
 

04 : Sticky form fields (03:26 min)

18  
 

05 : Installing FCKEditor (04:46 min)

19  
 

06 : Configuring FCKEditor (05:32 min)

20  
 

07 : Securing FCKEditor filemanager (03:20 min)

21  
 

08 : Redirection page (03:03 min)

22  
 

06 : Navigation

01 : Display navigation list (07:22 min)

23  
 

02 : Update navigation order (05:34 min)

24  
 

07 : Add page

01 : Creating form and adding wysiwyg (08:31 min)

25  
 

02 : Insert record statement (05:43 min)

26  
 

03 : Validation and sticky form fields function (11:28 min)

27  
 

04 : Confirmation page (02:10 min)

28  
 

08 : Email and password

01 : Email and password form (03:29 min)

29  
 

02 : Update record and validate input (10:36 min)

30  
 

03 : Update confirmation page (01:45 min)

31  
 

04 : Logout page (00:53 min)

32  
 

09 : Front end

01 : Creating navigation and content recordsets (03:57 min)

33  
 

02 : Displaying navigation dynamically (06:20 min)

34  
 

03 : Displaying pages dynamically (05:21 min)

35  
 

04 : Active buttons and links (04:08 min)

36  
 

05 : Contact form (02:06 min)

37  
 

06 : Email address for the contact form (02:55 min)

38  
 

10 : Summary

01 : Testing (01:50 min)

39  
 

02 : Things to know (01:17 min)

40  
 

11 : Upgrade to CKEditor

01 : Add page (04:50 min)

41  
 

02 : Edit page (02:40 min)

42  
 

03 : Toolbar setup (02:47 min)

43  
 

04 : File browser (06:35 min)

44  
 

05 : Redirect (02:58 min)

45  
 
 
 
 

Discussion (40 comments)

  • downloader

    downloader on Saturday, 9th July 2011

    There are no cms_files to be tested!

    Reply

  • Sebastian

    Sebastian on Saturday, 9th July 2011

    This is a premium tutorial - all exercise files and finished project are available for download after the purchase.

    Reply

  • Tim

    Tim on Monday, 15th August 2011

    Thanks for the update, much appreciated. Though, after completing the implementation of CKEditor, I have two issues;

    1. After visiting the ckeditor site (http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar) and following your last video, my toolbar set isn't changing - it has the same toolbar groups and on the same lines - even if I stretch out the editor area from the bottom-right corner.

    2. The 'image' button does not provide the ability to browse for or even upload a picture/create a folder using the browser that existed within FCKEditor - is there any way of re-enabling this for CKEditor?

    One last question, how do we stretch out the width of the admin area? I was able to change the width from 800px to 1200px via the general.css file for the front end, but the I modified the one for the admin/backend and it's still showing at 800px.

    Thanks Sebastian.

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Monday, 15th August 2011

    Hi Tim,

    The reason why you might not see the changes in your toolbar is the situation which I've explained in the video - when you have a long space between some characters in the config file. Make sure that if you have separator '-' , it doesn't have any space on either side of the hyphen between the single quotes. Givie it a try and let me know if it solved the problem - it did when I was testing as I've came across the same problem.

    As to your second question - CKEditor doesn't come with the default file browser - as it was in the FCKEditor.
    For some reason they've decided not to include it in this version. However, there is a very nice plugin and I'll create a video on how to add it to the installation - will do this either tonight or sometime tomorrow as I'm away for most of the day today.

    Also - to define the width and height of the wysiwyg window you'll need to put the following in the config.js file - somewhere after or before the toolbar definition, changing values to whatever you wish - if it's pixels it's just a number - if it's percentage then you'll have to include percentage sign and the value in quotes:

    config.height = 220;
    config.width = '100%';

    Reply

  • Tim McCarty

    Tim McCarty on Monday, 15th August 2011

    I carefully checked the config.js file content and made sure there were no spaces on each side of the dashes or gaps between the lines.

    I did some reading up on the file browser and learned what you confirmed.... I did however find some information online about implementing the CKFinder but only got so far.... here's some links I was trying to follow...
    http://blog.beamstyle.com.hk/tutorial-on-integrating-ckfinderckeditor-into-cakephp-with-session-authentication/
    http://cksource.com/forums/viewtopic.php?t=7092
    I got as far as putting the CKfinder folder in the admin folder and modifying the 'pages_add.php' file but there's a 'system error' for some reason:

    window.onload = function() {
    CKEDITOR.replace( 'pg_cont',
    {
    filebrowserBrowseUrl : '/site/admin/ckfinder/ckfinder.html',
    filebrowserImageBrowseUrl : '/site/admin/ckfinder/ckfinder.html?type=Images',
    filebrowserFlashBrowseUrl : '/site/admin/ckfinder/ckfinder.html?type=Flash',
    filebrowserUploadUrl : '/site/admin/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',
    filebrowserImageUploadUrl : '/site/admin/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images',
    filebrowserFlashUploadUrl : '/site/admin/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash'
    });
    }

    As for the width, I meant the width of the area of the actual page, not the editor itself. I.e. between the left edge of the grey table background and the right side (same as from the left side of the 'list of changes' button and the right side of the 'logout' button)... I want to match the width of the admin area to match the front end if you look at the link I emailed you :)

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Tuesday, 16th August 2011

    Tim - to change the width of the page container you'll have to go to

    /admin/style/general.css

    and change the width of the #wr to whatever you need.

    As to the file browser I'll be recording the video shortly, but it'll be another one - third party - far better than the default one.

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Tuesday, 16th August 2011

    New videos on how to install File Browser are now added!

    Reply

  • Tim McCarty

    Tim McCarty on Tuesday, 16th August 2011

    Thanks - I modified that (#wr) and #mnv and to get the width I wanted.
    I'll take a look at the filebrowser video, meanwhile any idea why the toolbar is appearing in the 'default' way even though I've customized it while being careful by having no extra spaces/lines?

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Tuesday, 16th August 2011

    Hi Tim,

    Not sure why you're experiencing the problem with the toolbar. Send me the config.js file by email and I'll have a look at it for you.

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Wednesday, 17th August 2011

    Tim - I've checked the file - it's working fine my end. I'm assuming it's the cache in your browser - try to clear cache and refresh the page - that should solve the problem.

    Reply

  • Tim McCarty

    Tim McCarty on Wednesday, 31st August 2011

    I just found that I was loading pages_add instead of pages_edit which I placed the workaround on, so it actually works. After adding this to the pages_add file, the CKEditor works for that page as well :)

    $ck_script = "window.onload = function(){CKEDITOR.replace('pg_cont');}";

    This also resolves a javascript error in IE when other pages [without the ckeditor] are loaded.

    If you have a better solution I'm interested to hear it.

    Reply

  • Tim

    Tim on Wednesday, 31st August 2011

    Hi Sebastian

    After nearly finishing the photogallery tutorial, it turns out the header and footer is split into different files (header.php/footer.php). Because of this, the following code I had in the pages_edit and pages_add php files to load the CKEditor is no more...

    window.onload = function() {
    CKEDITOR.replace('pg_cont');
    }

    I tried to implement a workaround similar to what's already in the tag of the header.php file which relates to the loading of jquery/fancybox by adding a similar line for ckeditor:

    $ck_script = "window.onload = function(){CKEDITOR.replace('pg_cont');}";

    After refreshing the pages_edit page though, the CKEditor will not load..... is the above code a good solution? If not, what do you suggest? Otherwise is there something about the workaround I tried implementing that's not quite right?

    Thanks

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Wednesday, 31st August 2011

    Hi Tim - Yes - this is a good approach, one thing however - you should wrap th window.load line within script tags like so:

    $ck_script = "<script type="type="text/javascript">
    window.onload = function(){
    	CKEDITOR.replace('pg_cont');
    }
    </script>";
    

    Once you've done this - all should be fine.

    Reply

  • Kenwin

    Kenwin on Thursday, 10th November 2011

    Hi sebastian,
    is there a way to add multiple pages nested to current navigation
    e.g. i wanna have the ability to add several pages in the same page that a button is linked to from the navigation
    is that possible?
    also I want my current homepage and certain to be not displayed dynamically from database is there a way to filter out the individual buttons of where its hyperlinked?
    if so how?
    please help
    Thanks
    Kenwin

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Sunday, 13th November 2011

    Hi Kenwin,
    There certainly is a way of doing it, but it would require a bit of work.

    For the navigation to have sub-menus (which is what I'm assuming you're after), you would have to allow to attach specific page to the other page. To do this it would be best for the navigation to have its own table, in which you would store the id of the page you want to link to the id of the page under which you wish to display it (I hope that makes sense).

    For example - say you have page called Services with the id of 3 and you want to display page Insurance under the button of the Services. The new table would have three columns: id | page | master.

    The id would simply be the Primary key of the record, the page is the id of the pages and the master is the id of the page we want to display the current page under (in the sub-menu).

    Once you have all this sorted out you can then loop through the records and for each page which has a master set to 0 (which would be default value) populate pages which have master field with the id of this specific record.

    With pages not being listed in the database, you can also do it by having an array of pages that do not come from database and if url matches the value in array - simply fetch the page and omit the database bit.

    I hope this helps.

    Reply

  • kenwin

    kenwin on Monday, 14th November 2011

    Hi Sebastian thanks for replying,
    Is it possible to have the sub-menus appear as images with links to its own page?
    Sorry for my noob questions i m not that good at php, still learning, but figured out if I want to learn, I'll learn from the best.
    Cheers
    Regards
    Kenwin

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Monday, 14th November 2011

    You can do it by adding an extra field to the pages table with the id of the html element that you can then style using CSS. Something like for home page 'home'. Then when you crate navigation you use this 'style' field to add id="home" to the link and with css you can style it the way you want.

    Reply

  • kenwin

    kenwin on Tuesday, 15th November 2011

    Hi Sebastian, thanks for your help.
    Would buying the Photo gallery with PHP, MySQL, ImageMagick and jQuery help me on what I'm trying to achieve?
    Thanks
    Kenwin

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Tuesday, 15th November 2011

    I'm afraid Photo gallery tutorials isn't really for navigation purposes so it wouldn't help you to achieve this, but as I've mentioned above the solution is pretty simple. You have to create new table, in that table assign page to the page under which you want to display it and one extra field in the same table where you store the id of the button - so that later you can use it to format it with css.

    Reply

  • kenwin

    kenwin on Tuesday, 15th November 2011

    Thanks sebastian, I'll have a crack at it
    Regards
    Kenwin

    Reply

  • kenwin

    kenwin on Friday, 16th December 2011

    Hi sebastian,
    I wanted to ask if is there a way to create a function to upload thumbnails in the "create new page" section in the backend, and display it like the item blocks on your website, clicks on thumbnail then takes users to the page dynamically.
    Is there a tutorial somewhere that teaches that online or its really hard work?
    Thanks
    Kenwin

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Sunday, 18th December 2011

    Hi Kenwin,
    This could be achieved with the Photo Gallery tutorial, which explains how to deal with the upload and resizing of the images that would be associated either with the CMS, E-commerce or Multilingual tutorial - together it should give you the result you're looking for.

    Reply

 
Page 1 of 2
 
 
Add a comment
Add Comment