Category Archives: Ajax

CodeLobster All-in-One Coding Software

CodeLobster PHP Edition Software Review

Written by Ian Lincicome of Jafty Interactive Web Development - Jafty.com

For the past couple of weeks, I have been evaluating CodeLobster's latest release of "CodeLobster PHP Edition" which I'll refer to as simply "CodeLobster" from here on out in this review. The current edition at the time of writing this review was CodeLobster PHP Edition Professional Version 5.4. I am reviewing CodeLobster because I am looking for a tool I can use for my web development business, Jafty Interactive Web Development. Also I was given a break on purchasing the pro version of CodeLobster in exchange for writing a product review on my site, Jafty.com. Please note that I am under no obligation to write a positive review. I will be as brutally honest as ever, I assure you. This review will include both the pros and cons of using CodeLobster rather than a one-sided review like many company's probably hire writers to write. In fact, if that was my intention, I wouldn't have mentioned that the someone had asked me to write this review. My ulterior motive for writing the review is to find the perfect program to do my work for my business. I am also evaluating other products as well because I want to work with the best.

I'm looking for an application that will allow me to seamlessly edit several types of code on several different servers without having to use a separate code editor, FTP program, web browser and Language reference material. To this date, I have been using three separate applications to accomplish my day-to-day work. I used FileZilla to copy files from a client's web server to my desktop. I used Notepad++ to edit the code files. Finally, before using FileZilla again to upload the files back to the client's server, I viewed the file in Firefox to see how it looks in a browser. That is if it is not a server-side language like PHP which I use the most. If I had to edit a PHP file, I had yet another couple of steps to perform because I'd have to upload the file to the server to view it and then repeat the whole entire process again if I had more changes to make to get it perfect. So I used FileZilla, Notepad++ and Firefox mostly up until now. I figure I could probably almost double my productivity with one good tool that does it all.

Technologies CodeLobster Supports

CodeLobster supports a wide range of technologies including:

  • PHP
  • HTML
  • JavaScript
  • CSS
  • SQL
  • MySQL
  • Version control systems such as SVN, Git etc.
  • CakePHP
  • CodeIgniter
  • WordPress
  • Drupal
  • Joomla
  • Facebook
  • jQuery
  • Smarty
  • Symfony
  • Yii

CodeLobster also has a very wide assortment of features including all the standard components you would expect in a code editor and many extras. I found a helpful built-in Help feature that also links to online help if you can't find what you need in the built-in documentation. The online documentation is surprisingly complete for a newer product.

Installing CodeLobster

The installation went smoothly and was very easy and comprehensive. Simply download and click the set up file and the installer will guide you through the simple set up process. Here is the Download Link: http://www.codelobster.com/download.html

When I first installed CodeLobster, it allowed me to select what languages/technologies I wanted to install. I only deselected two that I knew for sure I would most likely never use. I figured if there was even a small chance that I might use one of the items listed, then I should leave it checked. That way I will be prepared in case I need that particular technology in the future.

Pros and Cons

Once I began using CodeLobster I noticed both good and bad points regarding the program. I loved how versatile the program was right out of the box. I did not like the way the word wrap feature worked(View/Word Wrap). It breaks up words rather than splitting lines by the nearest space. I'd prefer it to not break up words at all or at least do so in a more logical manner(by syllables with hyphens for example). From what I understand from reading the forums and talking with my contact, CodeLobster plans to add an option between soft and hard word-wrap. Hard wrap is how it is now and soft wrap would be a word-wrap technique that doesn't break up words. I do hope they add it soon because it was one of the of the first things I noticed.

One of the first features I noticed and liked was the completely configurable hot-keys. You can configure any hot-key by going to Tools/Preferences/IDE/Hot keys. Another nice feature is the Find and Replace feature that is very much like that of Notepad++ including regular expression search and the ability to search and replace text in files, folders and sub-folders. This can be a huge time-saver for coders.

One of the first things I noticed and did not like was the lack of a decent spell checker. I know notepad++ has the option as a plugin, but not as a built-in feature. Either way would be great, but I think it should be a standard built-in feature. I realize that auto-complete helps with this, but not if you are writing a plain text file such as I am doing right now while writing this review. I talked to my contact at CodeLobster Software about this and he assured me that they plan to add a robust spell-checking feature in the near future. He mentioned that they plan on making several additions to the software and will be releasing future editions with new features and improvements ASAP. So, while CodeLobster may not have everything I would like it to have at the moment, I was assured that they are heading in the right direction with future expansion plans.

Another nice feature I also noticed right away was CodeLobster's tool bars. The tool bars are completely configurable and have a nice drag and drop feature to move tool bar items around as you please. The same can be said for the man different windows that can be added or removed from the work area.

CodeLobster is a code editor first & foremost and it does a wonderful job at editing PHP code which is my code of choice. If you are looking for a word processor, CodeLobster probably won't fit the bill, but it is a very robust code editor that can handle all of the languages I use for web development and several others.

CodeLobster's plugin ability is great to have in a code editing program. The pro version of CodeLobster comes with many plugins that the free version does not include from what I understand, so I think the pro version is definitely worth the cost for those of you who work with frameworks such as WordPress, Joomla, CakePHP, CodeIgniter, etc. I currently own the Pro version and I am happy with its performance so far and will be much happier once some of the additions are made in the near future.

Even the free version would be great for coders who use many different coding languages regularly but don't need the extra plugin abilities that require the pro version. As a full-time web developer, I mostly use PHP, HTML, CSS, JavaScript, WordPress and MySQL. I also occasionally use Joomla, XML, Perl, Python, Drupal, Smarty, Laravel, CakePHP and others, so I require the Pro version of CodeLobster myself. If you only use the most common languages such as PHP, HTML, CSS and JavaScript, you can probably do fine with the free version. Some of the things I require the Pro version for include WordPress support, Smarty, Laravel and CakePHP. Honestly there are to many features to list here. You should visit their web page at http://www.codelobster.com/details_phped.html to figure out which version is best for you. They also have a Lite version which you can read about on their site since I won't be covering CodeLobster Lite here.

As I continue to evaluate the software I am finding there are more and more features that I like. As a web developer, I need a tool that allows me to quickly edit code, test it and upload it to the client's server. So far, CodeLobster seems to be meeting my three main requirements quite well in most cases.

FTP Feature

CodeLobster's FTP ability is a very powerful feature. The FTP feature allows you to set up as many FTP connections as you need. I was able to copy all of my client's FTP connections from FileZilla into CodeLobster. Now I am able to click on a connection, edit a server file, preview it and upload it back to the server seamlessly from within a single application! This is huge for me because I used to use at least three different applications to do the same thing without CodeLobster. I can see that my work will get done a lot faster by using CodeLobster. In fact, I am already getting work done faster after only two days of using it.

The FTP feature is very functional, but for a guy like me who hates to read instructions, it took a little bit of fooling around using trial and error methods to get it set up for the first time with all of my client's 20+ FTP connections and configuring basic settings. Everything I needed to accomplish my FTP tasks is in CodeLobster, but the FTP system does need some improvements. For example it gave me trouble when trying to connect to a SFTP connection. It worked great with all non-secure FTP connections however. As luck would have it, out of over 20 current clients I work with, only one uses SFTP rather than FTP, so I am unable to test it on other secure SFTP servers to see if the problem is just with this one server or not. Unfortunately this is one of my regular clients so it is going to be a problem for me. It did connect using SFTP, but had issues when trying to edit files on the server which I was able to do fine with regular FTP connections. I did bring this issue to the attention of my CodeLobster contact however and he assures me it will be looked into ASAP.

Regarding the GUI set-up for FTP, in my personal opinion, the way the windows are organized in the work area could have been done a little better. For example, when I use FTP, I have to go to Tools/FTP to open the explorer window that lists FTP connections. That alone will allow you to open your FTP connection but won't allow you to see what's going on. If there was an error and the only window you had open in your work area was the explorer window, you wouldn't see that error. This is where I think it could have been done better. I would have programmed it so that when you open the FTP window, the output window opens along with it, right above it, similar to how FileZilla allows you to view console output. Of course this is just my opinion, it may not bother others and actually I am starting to get used to it so it doesn't bother me as much as time passes.

Search Features

The "Find in Files"(Search/Find in Files...) feature is great for finding text in open files. It could be improved to allow file search on the local directory tree files as well, but it is sufficient the way it is. Also I love the regular expression search as I mentioned earlier.

Also, I often use the incremental search feature when I edit code. While I am glad it has this feature, a small nuisance for me is that the incremental search box is not persistent across different views. I think it would be nice if the incremental search box would stay at the bottom of all view tabs once it is opened. I don't think it should close unless you manually close it. Again, this is just my preference, not a bug.

Nice-to-Have Features

One more thing I liked while test driving CodeLobster is that when editing .html and .css files I could hover over class names in the HTML or CSS code and it would show me the associated style declaration. Also when hovering over items in a .css file, it shows me information regarding the browser compatibility of the CSS code.

The HTML preview feature works very well. It is a built-in browser that shows the results of your code live without having to open a separate browser window. All you do is click on the "preview" tab. I did notice that sometimes you have to hit the refresh button to see your changes, but that is to be expected.

I also enjoyed the code formatting features very much. I tested them on an HTML file that I copied from an online web page. At first the HTML code was ran all together with no line breaks or indents. I simply went to the tool bar and clicked "Tools/Code Format/Format" and it formatted it perfectly. I am sure it will work with other supported languages equally well.

When you double-click on a variable name in the PHP editor, it highlights the variable and the dollar sign, so you can copy the whole thing and paste or search for it easily. Notepad++ wouldn't include the dollar sign and it was a bother to me.

CodeLobster has what they call a "Map" feature(View/Windows/Map) that I've never seen before. It is basically a small window with a tiny view of the document you're working on. It allows you to click anywhere in the Map to quickly jump to a section of the file that you need to work on. It is a great feature for working with large files.

Conclusion

I have concluded that CodeLobster will indeed fill a need in my current web development process. It is not yet developed enough to be the only tool I use simply because of that one SFTP connection it will not work correctly with. However I found that I can combine it with another tool, CyberDuck, as a work-around until the developers of CodeLobster work out the final kinks in the software and add some more nice-to-have type features such as spell-check and . In the end it still gets a thumbs up for all the wonderful features it has and for its robustness in general. Eventually I believe it will make the perfect all-in-one coding tool for my company. The other contender for my new all-in-one coding tool was CyberDuck and I can honestly say that CodeLobster has much more potential. CyberDuck is also in its early stages of development and it needs several improvements to be truly useful. CyberDuck fails in comparison to CodeLobster when it comes to Features. CodeLobster is truly made to be an all-in-one coding solution while CyberDuck is missing many of the necessary features to be a real competitor.

If you are interested in how I combined CodeLobster with CyberDuck to make up for CodeLobster's short-coming when connecting by SFTP, I'll quickly go over how to do it. Create a bookmark(that's what CyberDuck calls their FTP/SFTP connections) in CyberDuck to the SFTP server. CyberDuck allows you to set it up so you can use your own code editor with it in a way that allows you to click on a file from a remote server and open it in that editor. Then when you save it in that editor(CodeLobster), it saves it to the server. That way I still have a seamless process even though I have to combine two tools to get what I truly want.

Creating a Web Development Environment

This week, I decided it was time to upgrade my web development tools. When you reach my age and have been coding for over 20 years, you have to upgrade every once in a while. I am doing this because I know there are faster and better ways to do what I do everyday. I also wanted to document the new system I create for myself as a seasoned web developer so that those of you just starting out can gain some insight.

Defining your Development Needs

First, I had to layout what my needs as a web developer were. I simply made a list of the technologies I use every day and some I use regularly but not every day necessarily and ordered the list in order of priority. The first items on my list are technologies I use the most:

  1. PHP
  2. HTML
  3. CSS
  4. JavaScript
  5. MySQL
  6. WordPress
  7. Woocommerce
  8.  jQuery
  9. Photoshop
  10. SEO
  11. Three.js 3D programming
  12. FTP
  13. Perl
  14. C++
  15. C#
  16. Ajax
  17. Blender
  18. Gimp
  19. Unity 3D Development
  20. XHTML
  21. XML

As you can see, I use over 20 web technologies in my day to day work and I didn't even list them all, but those are the most significant ones off the top of my head that I use. My goal is to put together a work environment with the most important of those technologies in mind. Ultimately I wish to create an environment that focuses on speed and the ability to make the top technologies I use to work together in a more organized fashion. For example an app that allows me to code in many languages and preview server-side code live in a local server would be one of the primary objectives of my new routine.

With that in mind, I am going to narrow down my above list to what I use in my day to day work from which I actually make money from and do the most. Those would be mostly the ones at the top of my list, but this gives me the opportunity to rethink what I need the most and come up with a work environment that best facilitates my needs as a web developer. Here's what I came up with in the end:

 

  • PHP
  • HTML
  • CSS
  • JavaScript
  • MySQL
  • WordPress
  • Woocommerce
  • Graphic Design
  • SEO
  • FTP
  • Perl

 

Several of the items in my first list were related to JavaScript such as jQuery, Three.js and Ajax, so really, my main objective is to just have JavaScript available in my work environment and it will basically cover all the related technologies as well for the most part. There is no way we are going to make an efficient work environment with over 20 technologies, so it is important to narrow your list down as much as is practical. There were also a few different methods of creating graphics on my first list and instead of naming Photoshop, Gimp, Blender, etc, I just put "Graphic Design" on my short-list because that enables me to think in more broad terms about what applications I can use that might be able to accomplish the same tasks as those tools all rolled up in a more advanced tool(if that is possible).

Searching for Applications

My next task was to find programs and applications that will help speed up the web development process. First, I will list the programs and applications I use currently and from there figure out where I can make improvements. So I copy and paste my short-list from above and add after each technology what tool or program I use to accomplish tasks related to each technology:

 

  • PHP ------------------- Notepad++, Filezilla, Firefox, IE, Safari, Chrome
  • HTML ----------------- Notepad++, Filezilla, Firefox, IE, Safari, Chrome
  • CSS -------------------- Notepad++, Filezilla, Firefox, IE, Safari, Chrome
  • JavaScript ----------- Notepad++ , Filezilla, Firefox, IE, Safari, Chrome
  • MySQL ---------------- Notepad++, PHPMyAdmin, Firefox, Putty
  • WordPress ----------- Notepad++, wp-admin, Filezilla, PHPMyAdmin, Firefox, IE, Safari, Chrome, Putty,
  • Woocommerce ----- Notepad++, wp-admin, Filezilla, PHPMyAdmin, Firefox, IE, Safari, Chrome
  • Graphic Design - Photoshop, Gimp, Blender, Unity, MakeHuman, FileZilla, Firefox, Notepad++
  • SEO -------------------- Notepad++, Firefox, Various Service Providers
  • FTP -------------------- Filezilla, Notepad++
  • Perl -------------------- Notepad++, Putty, Filezilla

So from the above exercise, I was able to make a comprehensive list of the programs and applications I use when doing my web development work:

  1. Notepad++
  2. wp-admin
  3. Filezilla
  4. PHPMyAdmin
  5. Firefox
  6. Internet Explorer(IE)
  7. Safari
  8. Chrome
  9. Putty
  10. Photoshop
  11. Gimp
  12. Blender
  13. Unity
  14. MakeHuman

So out of those 14 programs, I don't actually use them all everyday and I use some more than others. For example, I am more of a programmer than a graphic designer. That's why I call myself a "Web Developer" and not a "Web Designer". So numbers 10 - 14 on the list can go into my "Nice to Have" category and do not require crucial changes since I only use them every once in a while and it's not a huge deal to keep using what I use now for those. If you are primarily a web designer however, these applications would be higher up on your list of tools you use and you WOULD want to give more thought to whether you can find better tools and tools that can combine the abilities of several of those. For example, Photoshop can do everything Gimp can do for the most part, so you might want to drop Gimp as a regular tool and use Photoshop more often. Then Unity, Blender and MakeHuman are all 3D modeling tools used more for video game development than web development, but if you use these regularly, you can probably search and find a tool that does most of what you need to do using those tools all rolled up in one good tool. Actually Unity is close. I try to learn to do what models and textures I can right in Unity instead of going to Blender to create them and then import them into Unity which takes more time, but sometimes it is still necessary to do.

Anyway, being first and foremost a web developer and not a designer, the tools most important to me right now are the first ones on my list and can be narrowed down to these:

  1. Notepad++ is what I currently use for most of my coding needs.
  2. PHPMyAdmin is a must have for all of my MySQL database manipulation needs currently.
  3. Filezilla is what I always use to download files from client's web servers. Then I edit them and upload them back to the server using Filezilla once again.
  4. Firefox is my web browser of choice since it is by far the most standards compliant of all the available popular web browsers. The others listed above are only used at the end of a project to check for cross-browser compatibility and there is no real way to get around having to use them all to properly debug your web applications.
  5. Putty is a great tool I also use often to access client's web servers for just about anything that I cannot do through the Filezilla FTP program. Tasks I use Putty for include tweaking PHP settings, changing ownership of files and editing server configuration files.

The next thing I have to ask myself is where can I make improvements in my development process and what tools are involved. After that I can search for better tools to accomplish those goals. From what I gather after examining my own habits and tools that I use, I figure the most improvement can be made in the areas of FTP, Code editing and Previewing the results of the code I write.

I came up with the above conclusion by thinking about where it seems like I waste the most time. Also I kept in mind what is possible to change and I figured that recent developments in developer tools probably will allow me to be able to improve the way I edit code, the way I update files and the way I view server-side scripts while in the process of coding them. Here's my current most common process in my day to day work routine:

  1. I go to Firefox and locate the problem on a client's website or the area of the website that they may want something added to.
  2. Then, I open Filezilla and locate the files involved that need editing on the server and download them to my desktop for editing.
  3. Next, I will normally open Notepad++ and work on the PHP, HTML, CSS and/or JavaScript code until a portion of the solution is accomplished.
  4.  Then I have to use Filezilla again to upload that file back to the web server for testing.
  5. After that, I open the webpage in Firefox to see if it works and to plan what I have to do next.
  6. I go back to Notepad++ and make more changes.
  7. I upload with Filezilla again and again view the progress in Firefox and keep repeating steps 4,5 and 6 until the changes appear correct.
  8. Then finally, I check the progress in all other popular browsers such as IE, Chrome and Safari to make sure it all works. Again here I have to repeat steps four through six some more until all problems are resolved with cross-browser compatibility.

As you can see, there are some seriously repeated functions that can take up a lot of precious development time in my current process. The best way to speed the process up would be to eliminate the process of having to upload the files to he server every time I make a round of changes and view it in a browser then go back to notepad++. With this acknowledgement in mind, I need to find a tool that allows me to do the following important steps in my web development process:

  1. edit several types of code in one place.
  2. get the code to the server seamlessly for testing.
  3. and view the output in a browser.

So the best place for improvement in my process is within those three steps. If I could find the perfect tool to accomplish all three, that would be perfect.

Finding Tools to Improve your Workflow

So, while looking for tools to accomplish these feats, Here is what I found.

CyberDuck

The first one I tried after reading reviews and program descriptions all across the web, was a not-so-well-known application called CyberDuck. After testing CyberDuck for about a week or so, I found that it met most of these needs, but had it's pros and cons like any other application. Let's examine those pros and cons:

CyberDuck Pros:

  • allows for the importing of FTP connection information from Filezille to CyberDuck. This is great because if you have a lot of clients like I do, you have a lot of FTP connections and it would take a lot of time to copy them all manually. In CyberDuck, they call FTP connections "bookmarks" this was strange to me and I didn't know what they were for the first day or so, but once I figured out what they were, I was able to use the application much more efficiently.
  • CyberDuck has an FTP application built in.
  • It allows you to link your favorite text editor or code editor to the FTP function so all you do is click on a file in the server's document tree and it opens in an editor on your local machine! So, it downloads a copy of the file and opens it in your editor in other words. So in my case, I click on a file in the document tree and it opens up in Notepad++ for editing.
  • When I save the file after making changes in Notepad++, it automatically uploads the changes to the remote server without me having to do anything but click on "Save" in Notepad++. This saves a lot of time. Even though I am actually using two programs, CyberDuck and Notepad++, it seems like I'm only using one because there is a nice seamless integration of the two performed within CyberDuck.

Cons of Using CyberDuck

There are not a lot of cons, but the ones that bothered me were:

  1. It drops the connection to the server more often than Filezilla did it seems like.
  2. While it combined two of my three main functnionalities I was seeking, it did not allow for viewing of the code changes live on the server. I still would have to go to Firefox to do that.

All in all, CyberDuck is a great tool. It is still new and has some bugs to work out, but I will definitely follow it and use it while looking for a better solution. Perhaps it will evolve into that perfect solution in a future version. Who knows.

CodeLobster PHP Edition

Next I got an email to let me know of a new program called CodeLobster that was supposed to be the perfect PHP code editor and much more. I am giving it a try right now, so I'll have to come back with most of my review of CodeLobster, but right out of the box I notice that it has a wide range of code editing abilities and features, is expandable and very well made. The only drawbacks I've noticed so far are minor such as the word wrap feature breaks up words in bad places and there is no spell check that I can find for editing plain .txt files. It seems great for editing PHP code so far though.

 

Want to learn more about SEO? Check out these relative books from Amazon:

Edit Files Live on the Server

I've been a web developer for many  years now and I must say I feel a little foolish for not thinking of this earlier. I've been wasting countless amounts of time waiting for files to upload and doing the mundane tasks involved in updating files and uploading them to a server when I didn't really have to. Here's why.

Today I got fed up with editing my file in Notepad++, switching to Filezilla,  finding the file in a folder on my desktop, uploading the file by dragging it to Filezilla and finally testing my online website or app. I decided to Google the term "Edit files live on server" and found https://cyberduck.io/ that has an amazing product which allows you to type in your FTP details, just like I used to in Filezilla, and open a connection to my server. Then it gives me a directory tree on my server. CyberDuck allows me to click on any file on my server and open it in Notepad++ on my desktop, edit it and save it right back to the server without having to click and drag it to another program like I used to do for so many years.

This is the best program for a developer I have found in years. Traditionally I do not favor fancy programs to help you write code or frameworks to make things "easier" because I found that they only complicate matters in the long run, CyberDuck is the exception however. It is great so far, but I've only been using it for an hour now, so if I find any flaws, I will report them here asap. I just wanted to share this. If you are interested in downloading the CyberDuck app for yourself, simply CLICK HERE or the link above and look for the two download links on the left side of the page. Do not use the first download link you see at the top of the page because it is a sponsored ad and will try to trick you into downloading something else. I hate those types of ads, but none-the-less, I still recommend CyberDuck!

Like I said, it's great when used with Notepad++, so if you'd like the experience I had, download Notepad++ too. Just google it, it's easy to find.

The New Ajax

Okay, as a developer, I've been using Ajax for years. To be honest, it gives me a new ulcer every time I have to use it. Well, it still does lol, but not quite as bad. Today Ajax technology mixed with jQuery makes it almost tolerable to code with. Also, what's important, is that it is a very necessary technique if you want to go anywhere at all with your coding skills. Let me demonstrate how to make it easier for everyone. It is not really that hard if you break it down into the simplest form possible and then expand from there. Here is a simple Ajax call to get the results of a PHP script:

Update - I've decided to expand this article to include just about every way possible to send data to a PHP script and get a response, so I've include the JavaScript/Ajax method, the jQuery/Ajax method and the CURL method of sending data to a PHP script and getting back other data or manipulated data.

Simple JavaScript Ajax call to PHP script:

<!DOCTYPE html>
<html>
<head>
<script>
function get_txt(){
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    var returnval=xmlhttp.responseText;
alert(returnval);
    }
  }
xmlhttp.open("GET","phpscript.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<input type="button" value="TEST" onclick="get_txt()" />
</body>
</html>

The above Ajax example will only retrieve data from the declared file. It could be altered to send data to it and receive a response, but I'm saving that gem for my next example using jQuery and Ajax to send a variable to a PHP file and get back a response.

Simple jQuery Ajax call to PHP Script that Returns Data:

The following jQuery and Ajax script will send the "user" variable holding the text "Ian" to the PHP script which will read the "user" variable with $_POST['user'] and send the results of the PHP code back to the Ajax script!

<script type="text/javascript" src="jquery.js"></script>
<div id="status"></div><hr>
<div id="rez"></div>
<script>
//var $j = jQuery.noConflict();//use j. instead of $ if needed

$.ajax({               
    type: "POST", // the kind of data we are sending
    url: "update_scores.php", // this is the file that processes the form data
    data: {user:'ian'}, // this is our serialized form-like data to pass to php
    success: function(msg){    // this function runs when the data has been successfully processed
        // this sets up our notification area for error / success messages
        $( document ).ajaxComplete(function( event,request, settings ) {
            $( "#status" ).append( "<p>Request Complete.</p>" );
            preresult = msg;
            $( "#rez" ).append( "<p>"+msg+"</p>" );
        });
            

    }
});
</script>

Sending Data to a PHP script and getting a response using CURL

Note that you could use CURL to do the same thing still using:

        $data = array('username' => 'ian');
        $results= curlPost('http://www.jafty.com/job.php', $data);

function curlPost($url, $data){
// check for URL and data:
    if(empty($url)){
        return 'Error: missing URL';
    }
    if(empty($data)){
        return 'Error: missing Data';
    }
//get the data for the POST and put in URL:
$fields_string = '';
foreach($data as $key=>$value) { $fields_string .= $key.'='.$value.'&'; }
$fields_string = rtrim($fields_string,'&');
//open connection
$ch = curl_init();
//Set the URL, no. of POST vars and POST data:
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_POST,count($data));
curl_setopt($ch,CURLOPT_POSTFIELDS,$fields_string);
//timeout after 10 secs(change as needed):
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,10);
//curl_setopt($ch,CURLOPT_HEADER,false);
//Set to return data instead of printing:
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
//pass user agent:
curl_setopt($ch,  CURLOPT_USERAGENT , "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1)");
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
//execute post:
$result = curl_exec($ch);
//close connection:
curl_close($ch);
return $result;
}//end curlPost function

...to pass a variable to a PHP script and save the PHP script's results in $results.

Best Captcha Scripts

Tonight I decided to evaluate a few different captcha options. I did this mainly for the same reason I do most things on this blog, I have a client that needs a captcha. My situation, as usual, is unique because I have to add a captcha to a PHP page, but that PHP page submits a form to a cgi script. As you may have heard, I am mostly a PHP programmer, so I don't care much for cgi and asp type scripts. I had to find a captcha that would work with both PHP and cgi, which wasn't easy as it turns out.

Here are some of the captcha solutions I tried. If you want my best reccomendation, skip to the last one, Jafty Captcha. It is a custom simple captcha I made from what I learned examining the others.

BotDetech

Botdetct is a captcha solution that offers solution in PHP, ASP, cakePHP, Ajax and others, so I thought it might work for my unique situation. Turns out it wasn't the best for my situation, but it would of been great for pure PHP or HTML web pages that need captcha. I did make a working example which you can see at:

http://jafty.com/BotDetect-PHP-CAPTCHA/samples/php_basic_captcha_sample/ian.php

That is a link to the test I ran with it. The only problem with this is that is does the captcha after the form is submitted and I needed a script that can do the captcha check before form is submitted due to the fact that my client's page submits to a cgi script and I'd rather not mess with the cgi script at all to keep things simple. Back to the drawing board for me, but if you have a PHP only form submission, it would work great for you!

Simple PHP Captcha

Simple PHP Captcha was the next service I evaluated. I like this one better than BotTech for sure, but again, it was a PHP only solution basically offering no JavaScript alternative and the code to check the captcha would have to be on the page you are submitting the form to. This is a good PHP only solution, but if you are not submitting your form to a PHP script, this isn't ideal, so I kept searching. Here is the example I made for this captcha script though:

http://jafty.com/captcha/test.php

Simple JavaScript Captcha You Can Add to Any Form

I found my next Captcha to test at http://www.tothemoon.com/2013/01/simple-javascript-captcha-you-can-add-to-any-form/ and you can see from the URL, it is supposed to be a very simple JavaScript captcha. So I decided to give it a go. I actually took this script and made some adjustments to it and came out with a decent captcha script which I will post the code for anyone else interested here.

Demo: http://jafty.com/simple-js-captcha/JS-captcha.html

HTML & JavaScript code:

<!DOCTYPE html>
<html>
<head><title>JS Captcha by Ian L. of Jafty.com</title>
<style>
body{
background-color: #430000;
}
</style>
</head>
<body>
<form name="review" ACTION="newpg.html" METHOD="POST" onsubmit="return checkform(this);">
<font color="#DD0000">Enter Code ></font> <span id="txtCaptchaDiv" style="background-color:#A51D22;color:#FFF;padding:5px"></span>
<input type="hidden" id="txtCaptcha" />
<input type="text" name="txtInput" id="txtInput" size="15" />
<input type="submit" value="Submit"/>
</form>

<script type="text/javascript">
function checkform(theform){
var why = "";

if(theform.txtInput.value == ""){
why += "- Security code should not be empty.\n";
}
if(theform.txtInput.value != ""){
if(ValidCaptcha(theform.txtInput.value) == false){
why += "- Security code did not match.\n";
}
}
if(why != ""){
alert(why);
return false;
}
}

//Generates the captcha function
var a = Math.ceil(Math.random() * 9)+ '';
var b = Math.ceil(Math.random() * 9)+ '';
var c = Math.ceil(Math.random() * 9)+ '';
var d = Math.ceil(Math.random() * 9)+ '';
var e = Math.ceil(Math.random() * 9)+ '';

var code = a + b + c + d + e;
document.getElementById("txtCaptcha").value = code;
document.getElementById("txtCaptchaDiv").innerHTML = code;

// Validate the Entered input aganist the generated security code function
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
if (str1 == str2){
return true;
}else{
return false;
}
}

// Remove the spaces from the entered and generated code
function removeSpaces(string){
return string.split(' ').join('');
}
</script>

</body>
</html>

BotBoot Captcha

A very simple captcha that requires that the use answer a simple math question. It is not quite secure enough to use for the client I have right now, but might be good for sites with less traffic and spam issues. It would be more secure if it would use questions like "six + one = ?" instead of "6 + 1 = ?" so the math could not be calculated by a bot, but it is a start. I might develop this out in the future to include words instead of numbers or a combination of both as I have seen on many sites and works great. Here is the simple version right out of the box I found:

http://jafty.com/botboot-captcha/

 Jafty Simple Captcha

Okay from everything I've learned examining the available simple captcha solutions around the web, I decided to make my own since none of the above quite met my client's specific requirements. I would consider this to be the ultimate simple captcha. It is HTML5 compliant, cross browser capable, Works on both Windows and Mac and is still relatively simple and very easy to install.

DEMO: http://jafty.com/Jafty-Captcha/simple-captcha.html

DOWNLOAD: Click Here to Download

cURL & PHP

Scraping with Curl using Cookies

Okay, I got a much needed lesson in scaping today using curl and cookies. I quickly discovered that you can not get the contents of some webpages without using cookies because some pages use cookies to validate requests for pages or other data.

My mission was to scrape the following URL from expireddomains.com:

http://member.expireddomains.net/domains/expiredcom/?start=0&o=changes&r=d

If you knew anything about expireddomains.com, you might know that the URL above is for members only, so the goal of this exercise is to make the web server at expireddomains.com think that you are a logged in user. Here is how:

So, first I tried this:

$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, $url);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
$html = curl_exec($ch);
curl_close($ch);

echo "HTML:<br>$html<hr>";

That returned nothing but a redirect to the login page of expireddomains.com. So then I read online how to use curl while sending a cookie with the page request and found that this worked:

$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, $url);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
// cookies to be sent
curl_setopt($ch, CURLOPT_COOKIE, "PUT_COOKIE_HERE");
$html = curl_exec($ch);
curl_close($ch);

echo "HTML:<br>$html<hr>";

That worked! so I was home free, but more importantly here are the steps I took to get the value to replace PUT_COOKIE_HERE:

  1. First, I signed up for a free membership at expireddomains.com.
  2. Then I went to the page I wanted to scrape and made a note of the exact URL which was:  http://member.expireddomains.net/domains/expiredcom/?start=8550&o=changes&r=d
  3. So I copied the URL to my clipboard from step two above and pasted it into the Firefox address bar. Don't hit Enter yet.
  4. Then I opened Firebug and allowed the URL to resolve while Firebug was open so I could monitor the HTML headers sent.
  5. Look for a header that reads: "Cookie" and copy the value and paste it in place of PUT_COOKIE_HERE in the code above. Make sure the value is in parentheses.
  6. Now run your code again and you'll get results as long as that's all the webpage is looking for. I have had some that want a referrer set as well which you can also do with curl. Hint, Google curl set referrer for more information.

 

 

Buy Scripts, Applications and Web Tools at Jafty.com/products

Yes, I finally am starting to sell some of my products that I have been developing for over 12 years now. I am only putting together the best tools I have made and remaking certain ones I find the most useful for sale on my website, Jafty.com/products

Types of Products for sale on Jafty.com/products

  • Email Marketing tools
  • Domain name tools
  • DNS tools
  • Server administration tools
  • webmaster tools
  • PHP tools
  • Customized tools for business
  • Have me build one custom for you if you don't see what you need

CLICK HERE TO VISIT Jafty.com/products/ and see what's listed for sale now. However, I do not have them all listed yet, so drop me an email or give me a phone call at 330-903-6074 or 330-417-3617 to find out how I can help you.

jafty0

Want to learn more about SEO? Check out these relative books from Amazon:

Be sure to visit Jafty.com to view my portfolio and see the web development services I offer! You an also email me at linian11@yahoo.com if you need anything.

Simple Ajax Example

Here is a simple Ajax example to grab a value from a PHP file. The same method would be used for a .txt file or a json request value.

JavaScript Code:

function get_txt(){
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    var returnval=xmlhttp.responseText;
alert(returnval);
    }
  }
xmlhttp.open("GET","phpscript.php",true);
xmlhttp.send();
}

PHP Code:

<?php

echo "This text came from a PHP file!";

?>

To test, simply save the JavaScript code in an HTML file in the header and save the PHP code in a PHP file named phpscript.php. Then add the following button in the body of the HTML file:

<input type="button" value="TEST" onclick="get_txt()" />