Manz Web Designs, LLC - Events

Saving CKEditor data to MySQL Database

admin — Fri, 28 Oct 2011 15:21:41 +0000

Yesterday, I needed to give a client a What-You-See-Is-What-You-Get (WYSIWYG) editor for a text-area. So, I’m thinking, “ahhh, no problem, should take about 30 minutes…” I figured I could just whip up some jquery that would call a PHP page to submit the CKEditor information to the database.

While that may have been possible, I decided to look into the CKEditor API documentation and found that there is an easier way. You will also need the jquery.form plugin, which can be downloaded here. Let’s look at the code for the index.php file (I always use the PHP file type instead of htm* because I may need to insert some php code sometime… only for testing pages, though, not production):



    
        Writer

Note that the only purpose for having the form element is to enable the save button, we will be saving this with jQuery, so there will not be an actual form submission.

In the javascript here, we are using the .replace() function from the API to replace the control whose ID is ‘editor’, then setting the editor to be the fullPage width, setting the color for the interface, and telling it to use a custom toolbar named ‘MyToolbar’.

If you haven’t already downloaded the ckeditor, you can get the latest here. Extract the zipped (or tar-gzipped) file into the root of your site directory.

Now for the ckeditor plugin, open to the directory ‘ckeditor/plugins’ and create a new directory called ‘ajaxsave’ and, in that directory, create a new file called ‘plugin.js’. Now let’s put the following code in that file:

CKEDITOR.plugins.add('ajaxsave',
    {
        init: function(editor)
        {
            var pluginName = 'ajaxsave';
            editor.addCommand( pluginName,
            {
                exec : function( editor )
                {
                    $.post("result.php", {
                        data : editor.getSnapshot()
                    } );
                },
                canUndo : true
            });
            editor.ui.addButton('Ajaxsave',
            {
                label: 'Save Ajax',
                command: pluginName,
                className : 'cke_button_save'
            });
        }
    });

Basically, what is happening is we are adding a command to a button known as ‘ajaxsave’ in the toolbar and telling it to post to the file “result.php” the data contained in the editor using the getSnapshot() function from the API.

Now I chose to only give a subset of commands available along with my newly created and defined “Ajax Save” button by modifying the “config.js” file for the CKEditor (found in /ckeditor/):

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';

    config.uiColor = '#AADC6E';
    config.resize_enabled = false;

    config.toolbar = 'MyToolbar';

    config.toolbar_MyToolbar = [
        ['NewPage','Preview','Ajaxsave'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Table','HorizontalRule','Smiley','SpecialChar'],
        '/',
        ['Styles','Format'],
        ['Bold','Italic','Strike'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['Link','Unlink','Anchor'],
        ['Maximize','-','About']
    ];

    config.extraPlugins = 'ajaxsave';

};

For a complete list of all non-custom buttons, see the documentation at the bottom of this page for them.

Now to actually save it to the database. Create a new PHP file, result.php, in the same directory as your index.php file and use the following code as a sample to insert the data into the database…

I hope this helps, please comment below!

Bud Manz
Owner – Manz Web Designs, LLC

http://www.manzwebdesigns.com/

jQuery Move-able Div

admin — Mon, 26 Sep 2011 23:10:18 +0000

Today, I was helping a friend who is learning web development. He was trying to create a way to move a div element using click and drag. Here is how we implemented it…


    jQuery Move-able Div
    
    
    
  
  
    Hello

Let’s break this down and see what is happening!

Create the style sheet to better distinguish the move-able div element contained in the file, “includes/styles.css”:

div#moveableDiv{
   width: 200px;
   height: 100px;
   position: absolute;
   left: 50px;
   top: 50px;
   z-index: 1;
   border: 1px black solid;    
   background-color: #ff9999;
}

then, comes the javascript!

Declare variables used to keep track of the div location:

  var x1,y1,x2,y2,distX,distY;

Then when the DOM is ready…

  $(document).ready(function(){

attach a mouseover event that changes the cursor into a hand pointer…

    $('#moveableDiv').mouseover(function(){
      $(this).css("cursor","pointer");
    });

Bind the mousedown event, assigning the mouse coordinates in x1 and y1…

    $('#moveableDiv').bind('mousedown', function(event){
      x1 = event.clientX;
      y1 = event.clientY;

then assign the original div location in x3 and y3…

      var x3 = parseInt($('#moveableDiv').css('left'));
      var y3 = parseInt($('#moveableDiv').css('top'));

Bind the mousemove event to actually do the move.

      $(this).bind('mousemove', function(event1) {
        x2 = event1.clientX;
        y2 = event1.clientY;

This is accomplished by tracking the location of the mouse as it moves in x2 and y2 and calculating the difference between the original location and the current…

        distX = x2 - x1;
        distY = y2 - y1;

        var newX = x3 + distX;
        var newY = y3 + distY;

then assigning it to the css left and top properties for the div element…

        $(this).css('left', newX);
        $(this).css('top', newY);
      });
    });

Finally, unbind the mousemove event on mouseup to release the mouse…

    $(document).mouseup(function() {
      $(this).unbind('mousemove');
    });
  });

Let me know your thoughts on this tutorial below in the comments, I look forward to hearing from you! You can check out my website at http://www.manzwebdesigns.com/ if you so desire.

Thanks!
Bud Manz

The Power of People

admin — Wed, 31 Aug 2011 01:42:04 +0000

So today, I find myself thinking “what is it that makes things happen?” Many people would say, and perhaps somewhat accurately, all the technological advances, the tool sets, and other sorts of just plain “stuff”. What do you suppose Ken Thompson, Dennis Ritchie, Brian Kernighan, Douglas McIlroy, and Joe Ossanna used to write the UNIX operating system? The C language… hmmm, wonder where the C language came from and what tools were used to create it??? Brian Kernighan and Dennis Ritchie’s brains, of course!

Ok, so they just whipped out their laptops and fired up their favorite IDE, of course, right? Nooooo, I won’t go into a dissertation of what they used for tools, that is beyond the scope of this article. The whole point of that should be obvious… it came from their minds and intellect!

So, now I am thinking, how many coders are patchwork coders? What I mean is the first thing we do when we want to do something is type keywords into our favorite search engine, thinking “man, I know someone out there has had to do this already!” I would guess that at least 99.9% of us would hold up our hands and say, “guilty as charged,” I know I would and that is not all bad.

What is “thinking outside of the box?” Sometimes the experience found in figuring it out on your own can be much more rewarding that simply doing what everyone else is doing… now I know, even as I say that, of the power of community, but really, what makes up community? This is the whole point of this article! YOU do.

I am beginning my path into learning the Zend Framework… I won’t learn it in a day, a week, a month or even a year… I probably won’t ever learn all there is to know about it, because of the power of “you”. Together “we” can be truly great; did you know that if one horse can pull 1000 pounds by itself, 2 can do about ten times that amount?

The thing that makes things work is you, my friend, and me. The balance is found in knowing when you need the help of others, but don’t sell yourself short. If you read and understand this post, you are cognitive enough to understand how to do things on your own and when to enlist the help of others…

Thank you for reading and I look forward to reading your comments below!

Bud Manz
Manz Web Designs, LLC – Owner

Manz Web Designs Press Release

admin — Wed, 18 May 2011 20:30:31 +0000

Railtech Matweld site is online!

admin — Thu, 05 May 2011 19:03:18 +0000

I am pleased to announce that Railtech Matweld’s website, Manz Web Designs, LLC latest project, is finally online and can be seen at http://www.matweld.com/.

Thanks,
Bud

Client Web Hosting Now Available!

admin — Tue, 19 Apr 2011 13:29:47 +0000

I am pleased to announce that as of yesterday, April 18, 2011, Manz Web Designs, LLC is now offering web hosting for new and current clients! For a limited time, we are offering to host your site(s) for the same amount as your current solution.

We also offer negotiated website maintenance contracts that can also include web hosting! Contact us for more details.

Thanks,
Bud

Preparing For a Website

admin — Sat, 02 Oct 2010 23:17:59 +0000

A customer’s guide to first steps

Good web site design should expand your business, providing a good return on your investment. The task that lies between the conception of your need for a web site to a functional web presence can be very daunting with little or no guidance. The purpose of this article is to put you off to at least a good beginning.

The article will address four basic steps that are crucial to your decision and will provide good direction making it.

Research

The first step in preparing, even before looking at web site providers, should be to see what your competitors are doing. Then formulate in your mind (and on paper) what they are doing and pick from them the best ideas to incorporate into your own idea. I recommend performing a Google search for those of your industry. Browse through these sites, and look for the following points:

Functionality
- Informational?
Appearance
- Photographs, etc.?
- Colors
- How does the website communicate with the targeted market?
Size
- How large are the sites?
  - How do they compare with the vision you see for your site?

There are many ways to create an effective web site that will fulfill your needs, so create a chart of likes and dislikes, then make detailed notes about why you feel that way about them. This will be very helpful to your designer as they try to create a site to match your vision for both your business and web presence.

Prepare

Now you should have the necessary tools to determine what your web site should look like and what content it should contain.

Make a list of the information you want to appear on your web site.
- At a minimum, your site should require “Home”, “About us” and “Contact Us” pages.
- Other pages that may be desired would be “Products/Services” (these may be separate pages or just one of them), “Portfolio”, etc.
Write as much of the content as you can before choosing your web designer. This will enable them to more accurately quote your job and can be modified later if necessary.
- They may have some ideas to enhance that content, which will make your site better in the long run!
If you have a corporate image or brand already created (for example, a logo, standard fonts, and standard colors) which are used in currently printed materials and you wish to continue using them, make note of this. Otherwise, the designer will need to create this image or brand identity and you will want to discuss this with the web site designer before they submit a quote.
You may want elements on the site for customers to interact with, such as forms, polls, votes, and/or reviews.
Do you need an ecommerce solution to sell products and/or services?
Will there be any custom programming needed for items like shopping carts, contact forms, etc.

A list of these items is crucial; additionally a brief company description, information about your target audience, a paragraph or two about what you wish to accomplish with your site, and what features on your list are required versus not essential but desirable. These will save you money in the short and long term. The more you can share about your method of business will not only put the designer “on the same page”, but will also help you think about how you do your business and where it can be done better.

Be sure that you have a business plan in place; it is nearly impossible to give clear direction to a designer if you have no clear direction for your business!

Compare

Using an online web designer directory (Xemion.com’s Web Design Company Directory, for example) is a very easy way to find a local designer. Additionally, you can check with a website that you are impressed with by email or phone (if the link for the designer isn’t already there) and ask them who did their site.

Check out different web site designers’ portfolio pages to help determine if they are a good fit, having the skill sets necessary to provide for your need. Then pick out two or three designers and ask for a proposal and estimate for the entire project.

Take notice of the following metrics:

Were they timely with their response
- If they are too busy to respond in 24 hours or less (12 hours is poor response, in my opinion), are they going to be too busy to finish the job in a timely fashion?
Was their response professional?
- Were there spelling or grammatical errors if they responded by email
- Were they confident in the communication (verbal and/or written)
How thorough is it?
- Require a line by line account of the quote.
- Have they addressed all of your requirements?
Be sure there are no “hidden” fees such as graphic design, etc.
Are the payment terms in place and manageable?
Ensure that all on-going costs are accounted for
- Site hosting
- Security updates
- Content management
Will you retain the website copyrights?

Making the choice

Effective website design companies provide a combination of graphic, technical, marketing, and consultative skills. Make sure the company has the skill sets you need to support your current and future needs.

You must keep in mind that your website is your company’s identity on the web; you may be able to get it done cheaper, but I have found that you usually get what you pay for. If the person doing the quoting is vague or unclear, you will be able to expect that right on through to the website they provide for you.

It would be a good thing for you to meet in person at least once before selecting a designer and that should be in their location. That way you can take in the environment that they work under. If they have a sloppy desk/room that has obviously not been cleaned in a reasonable period of time, you can probably expect at least a bit of laxness in some part of your experience with them.

Remember that you could potentially be working with this designer for a long time and your company will be associated with them. Be sure that you want that relationship. Also, please keep in mind that while you are asking yourself these questions; the designer, if they are “worth their salt”, will be doing a similar analysis of you.

After selecting your designer, you may want to check with your designer periodically, especially if they aren’t keeping you posted on the project’s progress. If they are not communicating with you every week (or two at the most) you may want to start looking around for a new designer. Again, you must ask yourself this question: “Do I have confidence that this person or team is dependable to be dedicated to fulfilling my needs now and in the future?”

New Websites Completed!

admin — Tue, 14 Sep 2010 23:52:45 +0000

Manz Web Designs is excited to announce the completion of 2 new websites for the Railtech International: Railtech Boutet, Inc and Railwel Canada! Visit them for all your railway welding and repair supplies.

Dynamic Page Content Replacement using AJAX and PHP Tutorial

admin — Wed, 28 Jul 2010 00:45:58 +0000

In this tutorial, I will show you how to use PHP and jQuery to dynamically change webpage content.

All this code should be done in the portion of your index page:

Include the various javascript files needed:

Create a PHP multi-dimensional array of all pages:


$pages = Array(
Array(page => ‘main.php’, title => ‘Home’, hash => ‘main’),
Array(page => ‘portfolio.php’, title => ‘Portfolio’, hash => ‘portfolio’),
Array(page => ‘templates.php’, title => ‘Templates’, hash => ‘templates’),
Array(page => ‘price.php’, title => ‘Pricing’, hash => ‘price’),
Array(page => ‘contact.php’, title => ‘Contact Us’, hash => ‘contact’),
Array(page => ‘policy.php’, title => ‘Privacy Policy’, hash => ‘policy’)
);
?>
Since PHP is pre-processed at the server, we can use the array created above to populate a javascript associative array:


For more info on the jQuery  Library, visit their website at http://jquery.com/.
Now for the html part…


/*construct the menu from the item array built in the head section */
foreach ($pages as $item) {
echo “
{$item['title']}
\n”;
}
?>


MWD Events



New Service Soon Available!
admin — Tue, 27 Jul 2010 02:03:01 +0000
Manz Web Designs is soon to offer a low-cost web hosting/maintenance package to all new and current clients!  Watch here for more information!!