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'!
Time: 186:81 min / Price: £59.49
Sebastian Sulinski on 30th Apr 2009
downloader on Saturday, 9th July 2011
There are no cms_files to be tested!
Reply
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 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 : @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 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 : @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 : @designtutorials on Tuesday, 16th August 2011
New videos on how to install File Browser are now added!
Reply
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 : @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 : @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 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
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
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 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 : @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 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 : @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 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 : @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 on Tuesday, 15th November 2011
Thanks sebastian, I'll have a crack at it
Regards
Kenwin
Reply
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 : @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
kenwin on Tuesday, 20th December 2011
Thanks for the help Sebastian
Regards
Kenwin
Reply
kenwin on Sunday, 1st January 2012
Hi Sebastian,
Do you have a tutorial on how to create a commenting system for the cms?
Thanks
Reply
Sebastian Sulinski : @designtutorials on Monday, 2nd January 2012
Hi Kenwin,
I haven't got any at present, but I might create one very soon - so watch this space!
Reply
kenwin on Thursday, 5th January 2012
Thanks :) can't wait
regards
Kenwin
Reply
Sebastian Sulinski : @designtutorials on Friday, 6th January 2012
Hi Kenwin,
I've just published a simple commenting system - I hope this will help you with your project: Simple commenting system with PHP and jQuery.
Reply
Lars Inge Holen on Thursday, 26th April 2012
Is there a way to hide pages instead of deleting them?
Reply
Sebastian Sulinski : @designtutorials on Thursday, 26th April 2012
Hi Lars,
Sure there is :) - you could add a new field to the pages table called for instance 'active' (TINYINT 4 DEFAULT 1) and when you call a page or list of pages - in the sql statement add WHERE clause like so:
If you want to hide a page simply change that flag to 0 and job done.
Reply
Lars Inge Holen on Thursday, 26th April 2012
Thanks.
Is is possible to put a checkbox on the 'pages_list.php' ,in front of the Remove / Edit ,to deceide if the page should be visible or not?
I'm looking for the code :-)
Reply
Sebastian Sulinski : @designtutorials on Friday, 27th April 2012
Ok Lars - in that case - here it is - something like this should do the trick. It's Ajax based using jQuery and a simple link - on click you change the status from visible to invisible page.
First create a link next to each record in a loop:
Next in your JavaScript file use the following:
$('.visible').live('click', function() { var thisObj = $(this); var thisId = thisObj.attr('data-id'); // for this exercise I've created process.php file // directly inside of the root folder jQuery.getJSON('/process.php?id=' + thisId, function(data) { if (data && !data.error) { thisObj.html(data.label); } }); });Now create the process.php file and type the following inside of it:
<?php if (!empty($_GET['id'])) { $id = $_GET['id']; $objDb = new PDO('mysql:host=localhost;dbname=cms', 'root', 'password', array( PDO::ATTR_PERSISTENT => true )); $sql = "SELECT * FROM `pages` WHERE `id` = ?"; $statement = $objDb->prepare($sql); if ($statement !== false) { $statement->execute(array($id)); $page = $statement->fetch(PDO::FETCH_ASSOC); if (!empty($page)) { $active = $page['active'] == 1 ? 0 : 1; $sql = "UPDATE `pages` SET `active` = ? WHERE `id` = ?"; $statement = $objDb->prepare($sql); if ($statement !== false) { if ($statement->execute(array($active, $id))) { $label = empty($active) ? 'No' : 'Yes'; echo json_encode(array('error' => false, 'label' => $label)); } else { echo json_encode(array('error' => true)); } } else { echo json_encode(array('error' => true)); } } else { echo json_encode(array('error' => true)); } } else { echo json_encode(array('error' => true)); } } else { echo json_encode(array('error' => true)); }Now just test it and you should be able to click on the link and change the status from Yes to No and vice versa.
Reply
Lars Inge Holen on Friday, 27th April 2012
Sebastian,
Thank You!
I hope this will be useful not only to me.
Reply