GoodTodo PHP and SQlite App

I really like to keep track of tasks and projects (personal or otherwise) I work on. I used to keep my todos list in notepad or by using some other sticky notes application but I wanted dead simple todos app with beautiful looks and simple to use without irrelevant options or goodies. So here I introduce GoodTodo; a todo app made via PHP and SQlite. I chose SQlite because I wanted to make sure that app is portable and of course since it’s small todo app, choosing SQlite for it makes perfect sense. I have used flightPHP framework and idiorm ORM for it.

Here are its screenshots:

localhost todo home localhost todo settings localhost todo categories

 

How to use:

Make sure you have wamp/xampp or other stack installed. Download the app and put in www/htdocs folder and browse to that folder via browser something like http://localhost/todo. Please make sure you have sqlite extension turned on from php.ini if it isn’t already.

So go ahead and download GoodTodo to keep track of your todos.

 

Save Complete HTML Pages with Pure PHP

screenshot

In order to save complete pages along with all resources such as images, styles and scripts, you could use your browsers, however browsers also save accompanying files in separate folder. For example if you wanted to save some page called sample, browser would save the complete page along with folder named sample_files. Browsers also have their proprietary formats such as MHTML (Mime HTML) for Internet Explorer or MAFF (Mozilla Archive Format) for Firefox but with these you are limited to opening these files in these browsers only which isn’t good or always ideal.

It would be good if one could save all resources of an html page in a single file which can be opened by all browsers which is the html format itself. In order to achieve that, I have created a class that helps you save entire page in a single HTML file along with all its resources, no side folder created, all images, CSS and scripts reside in that single html file which of course can be opened in any browser.

This allows really cool possibilities such as creating your own app allowing to save complete html pages like evernote, creating browser extensions for the same purpose or saving your favorite pages to cloud and more you can put the class to your best use and needs :)

Download Class at PHPClasses

Don’t forget to rate the class :p

My Local Development Workflow with WAMP/XAMPP, GIT and Google Drive

I like to share my local development workflow which has turned out to be extremely useful in that all my projects’ files are versioned and on the cloud. I use git to keep my files versioned and Google Drive so that I can access my projects anywhere. In this post, I will share really cool stuff that you definitely should consider implementing for your own projects.

If you don’t know about git and its benefits, there are numerous compelling reasons why it is useful, you might want to check out:

The benefits of keeping all my files and projects on the cloud like Google Drive should be obvious but if you are still not sure, check out:

Although there are many other cloud storage services such as Microsoft SkyDrive, Dropbox, Box, Bitcasa, etc but I chose Google Drive since it gives 10GB of free space which should be enough for my development needs. If that’s not enough for you, you can create another Gmail account and get another 10GB free. You might want to read their usage policies too if you want.  You may also consider using Bitcasa which gives you unlimited space but since it is new, I can’t personally trust it as yet.

Installing Google Drive

Step 1: Create a new Gmail account to be used with Google Drive client software. Although you can use your existing account but it is good idea to create a new one used for your projects’ backup only.

Step 2: Download Google Drive from here or here. During the installation, you would be asked to specify the folder path which will be synchronized with Google Drive. Make sure that you specify a folder present on any drive other than your OS drive so that even if your system crashes or corrupts, your projects remain intact. For example, I have that folder on path D:/Google Drive/

Step 3:  Once installed, run Google Drive software and specify the credentials of your newly created Gmail account.

Using Google Drive with WAMP/XAMPP

Now that we’ve setup google drive, it is time to setup document root to google drive folder and create virtual host. This would allow you to run your local projects through WAMP/XAMPP from google drive folder. The reason why we do this is that since google drive folder will be sync by google drive software, any project we put in that folder will automatically be uploaded in your google drive account.

Note: I am using XAMPP but if you are using WAMP, some settings or file paths might be different, you should consider reading its documentation.

Step 1: Inside your google drive folder, create a new folder named webroot making whole path X:\Google Drive\webroot where represents your drive letter.

Step 2: Assuming you have specified google drive folder to be  D:/Google Drive/, open httpd.conf (normally located at apache\conf folder) file in notepad or other text editor and find the line Include “conf/extra/httpd-vhosts.conf”. If there is a hash (#) before that line, remove it. Now find the line with <Directory /> and you should see something similar to:

<Directory />
 AllowOverride none
 Require all denied
</Directory>

Change Require all denied  to Require all granted

Or if you see something like:

<Directory />
    Options FollowSymLinks
    AllowOverride None
    Order deny,allow
    Deny from all
</Directory>

Change it to:

<Directory />
    ........
    Allow from all
</Directory>

Now come to bottom of the file and add:

<Directory "D:\Google Drive\webroot">
  Options Indexes MultiViews
  Order Allow,Deny
  Allow from all
</Directory>

Save the file and close it.

Step 3: Open httpd-vhosts.conf (normally located at apache\conf\extra folder) and add these lines at the end of it:

<VirtualHost 127.0.0.1:80>
    DocumentRoot "D:/Google Drive/webroot"
    ServerName gdroot.loc
    ServerAlias gdroot.loc
    ErrorLog "D:/Google Drive/webroot/logs/error.log"
    CustomLog "D:/Google Drive/webroot/logs/access.log" combined
</VirtualHost>

Save the file and close it. Notice that we have specified gdroot.loc as address which actually means google drive root (.loc signals that it is local folder) which actually maps to your google drive webroot folder eg D:/Google Drive/webroot. Notice that you could name it anything you want like mycoolwebsite.com, yourname.com, etc but of course that is local folder running from your own computer.

Step 4: Open hosts file in notepad or other text editor located at X:\Windows\System32\drivers\etc where stands for drive letter where your OS is installed. At the end of that file add this line assuming you specified URL in above step as gdroot.loc:

127.0.0.1       gdroot.loc

Or if you also use port to access your LAMP/XAMPP URLs, specify that as well:

127.0.0.1:PORT_NUMBER_HERE       gdroot.loc
Note: If you can’t edit hosts file, you need to have file owner permission, search on google how to do that.

Restart apache and access the new url by typing gdroot.loc in your browser. You should see screen similar to when you go to http://localhost.

Congratulations ! you have a nice workflow now. You can now put all your existing our new projects inside your new document root which was assumed to be located at D:\Google Drive\webroot and now all your projects are sync with google drive and automatically uploaded to your google account which you can access anywhere. For example, you can now access your projects at office or any other computer by installing google drive client software  there and telling it sync/download your webroot folder. Your projects are now always there and backed up on the cloud :)

Let’s take cool stuff one step further by using git so that our projects file are also versioned. If you don’t know much about git and its benefits consider reading links posted above or below in the Git Resources section.

Using Git with a Central Repository

Creating and using central repository is especially useful in a team. If you just want to keep your projects versioned and are the only developer working on a project, the normal flow is (unless you track your project to remote host such as github):

  • modify files
  • commit your changes
  • repeat

So essentially you can skip this section if you just want to version your project files and are only developer working on a project.

Step 1: Download msysgit from here, choose first link from there. Install it with default settings.

Step 2: Go to your google drive folder (D:\Google Drive\) and create a new folder there named central.git

Step 3: Right click on newly created folder and choose Git Bash Here and type: git init –bare

Step 4: Create a test project folder named myproject inside your normal WAMP/XAMPP webroot/htdocs folder or google drive webroot folder mentioned above (Although you can git-manage any folder anywhere on the drive but naturally we want to git-manage projects that we run from webroot/htdocs folder).

Step 5: Right click on newly created folder, choose Git Bash Here and issue these commands one by one:

git init
git remote add central /e/Google\ Drive/central.git/
git push --all central
git push --set-upstream-to central master

Great! now we’ve setup central repository for all our git-managed projects and we can commit, push, fetch all changes from that central repository. For any new repository, you can now issue commands like:

git clone /e/Google\ Drive/central.git/
git fetch /e/Google\ Drive/central.git/
git push central
and so on

Hope you liked the post and have fun !

Git Resources

PHPExecute – PHP Code Runner

Often times, you quickly need to test some PHP code. To do so, you create a file, put it in web root folder, write some code in it, open its URL and then you see its output. This is kind of lot of work and I often need a way to quickly test my PHP code. This requirement made me create my own code testing tool, PHPExecute.

PHPExecute is the fastest way to test PHP code. You write the code, hit the execute button, an ajax request is triggered and you see the output fast without page refresh. Here are some of the cool things about it:

  • Very fast way to test your code
  • Nice friendly interface
  • Code  Highlighting
  • Useful PHP, system information panel
  • Saving favorite code snippets
  • Adding useful classes
  • Easy to extend as per your needs

Screenshot

Extending PHPExecute

The good thing is that you can download (see below) it, see its source code and extend it however you like according to your needs. For example, you can add classes for testing, performance or any other purpose. One can even integrate bash commands (I am not going into details of that) to make it even more useful tool to work with.

Usage Notes

  • PHPExecute uses eval function to run the code. It is strongly recommended that you should use that tool for local testing only and not on production server due to security reasons. If you do, you use it on your own risk.
  • In order to save snippets, PHPExecute uses localStorage feature which is available in latest browsers (and IE9+) only and also it can be around 5MB in size. This isn’t that ideal if you are going to save a lot of snippets but you can always extend PHPExecute to add database support and save your snippets there.
  • The custom functions that can be used in PHPExecute can be found in includes/functions.php file. You can add any functions in that file that you want to use directly inside PHPExecute. The custom functions can also be seen in PHP Info > User Defined Functions.

Download

Download PHPExecute at Github

I hope PHPExecute turns out to be a useful tool for you. Please do share if you add anything to it via comments so that we could know it and integrate ourselves too :)

Introducing WebNote Chrome Extension

I like to read and research and as such I always bookmark interesting articles both locally and online eg Google Bookmarks or some other service. Since we do not always have the time to read an article of our interest the time we come across it, we use online bookmarking services to save and read them later and that’s good.

However, I was looking for a solution which could allow me to save those articles locally on my computer and read them any time later, this is something useful in cases when you are not connected to internet and yet want to be able to have the access to articles you like. I came across Evernote which is pretty cool services you can use to save webpages, videos, voice and a lot more. My primary focus though was to save webpages/articles related to web development. Any page you save to Evernote (via their Web Clipper browser plugin), can be downloaded to your computer via Sync option of that software which is exactly what I was looking for. After using it for a while, it turned out that with FREE account only 60MB is allocated which I consumed within 15 days :(

As a developer, I thought of creating my own solution that could be used to save articles/pages locally rather than buying Evernote. So I went on to creating the Chrome extension named WebNote.

WebNote can be used to save webpages with all their content, images, css, etc locally. WebNote will prove useful for anyone who does research on a particular topic or reads a lot.

How It Works

Once extension is installed and you press its icon on the browser toolbar, it pops up with a window (screenshot below) which pre-fills the URL and Title of the page, allows you to select Folder you want to save the page in along with any optional Comments. The extension pre-fills folders field by reading them from the local database which means for the WebNote to work, you need to have WAMP setup locally. Once you press the Save button, the page’s information is saved in the very database. The page itself is saved on hard disk (folder where WebNote CMS will be installed) in MHT format and if you don’t know about MHT format, it is basically a format which saves all resources of a page including images, css in one single page. Internet Explorer supports this format which means saved pages will open in IE.

I won’t go into details of how I created Chrome extension (there are a lot of resources out there) or how pages are saved in MHT format with all their resources in single page or even the small CMS used to manage the pages saved via WebNote because everything can be downloaded (see Installation guide below) and source code can be viewed.

WebNote Screenshot


All the pages saved are accessed via little CMS that I wrote, here are some screenshots.

CMS Screenshots


Notice that from programming perspective, CMS’s code is ugly in that it does not separate PHP and HTML and CMS password is saved with no encryption (since it will run locally). There are some reasons behind that though:

  • I wanted to write application real quick – too lazy to separate php, html logic
  • It was only meant to be for personal use but today I decided to share it
  • It wasn’t meant to be a professional project in which I take all sorts of care

Anyways, it serves the purpose but you can still go ahead and modify the code however you like.

Installation

Installing Chrome Extension:

  • Download WebNote Chrome extension and extract contents somewhere
  • In Chrome, type “chrome://extensions/” (without quotes) in address bar, Extensions window will open
  • On the right side of Chrome Extension page, there will be a link “Developer mode“, click on that
  • Now click on the button “Load unpacked extension” and specify path where you extracted the WebNote extension
  • You will notice that a Notepad-like icon will be added to Chrome toolbar that is extension is installed

Installing CMS:

  • Download WebNote CMS and extract it in www/root folder of your WAMP installation folder
  • Open PHPMyAdmin or any other MySQL client of your choice and create a database named “webnote” (without quotes)
  • Import the sql file “webnote.sql” present in WebNote CMS folder in that newly created database
  • In the Webnote CMS folder, go to admin/includes/db.php and edit your database settings accordingly
  • Browse the CMS where you installed it in the browser like “http://localhost/foldername/admin“. You should see Admin login panel
  • Enter “admin” as username and “123123” as password without quotes.

Using WebNote

  • Once logged in, create some folders. You should see Add Folder link to the right of Navigation on the My Folders page.
  • To save a page, click the WebNote icon in the browser toolbar and hit the Save Now button
  • You will see ajax loading image, wait until page is saved. A notification will appear telling you that page is saved.
  • Go back to Admin panel, click on “My Folders” link and then click on the folder you saved the page in.
  • Click on the link title and it will open in Internet Explorer (because MHT is supported by it).

Notes & Tips

  • When you create a folder, it does not create a folder physically on your hard disk. Consider it kind of tag for each page.
  • All files are saved in “mht” folder inside CMS.
  • All other page information including title, folder, url, html is saved in database
  • To save pages, you obviously need to have internet connection to be able to save them locally and read them later
  • You can pre-populate “Comments” field by selecting some text on page and then hitting the WebNote icon in toolbar.

Have fun with your readings and research :)

Free Admin Template

While working on a website or your custom CMS, you need to have an admin template and if you are already provided with one by designer or anyone, that’s good but sometimes you don’t have that option or you want to work on your personal project for which you need the admin template but designer isn’t available or you don’t want to buy an admin template or hire a designer. I often come across this requirement where I need an admin template which should have these features:

  • Easy to customize
  • Slick and nice looking interface
  • Can be modified to as many links as needed, suitable for small to big websites
  • Nice button and form styles
  • Nice looking info messages
  • Can be used as admin for any kind of website

Today I share with you guys an admin template that I created for my personal use. That’s free, you can use it for personal or commercial use.

Screenshots:

This slideshow requires JavaScript.

Download

Outputting PHP To Browser Console

Although there exist classes for outputting PHP to browser console such as Google’s PHP Console and certain others, I was looking for a way to output PHP to browser console without including those classes in my PHP files or installing any browsesr plugin to do the same. Currently, I am working on facebook application development in which you have to commit/upload the code to check certain output out of PHP unlike offline development where you check the code output before committing it up. This makes facebook application development a longer process for a developer but you got to live with it because you don’t have a choice.

Anyways, to speed up the code output checking process a little and rather using debug_backtrace, print_r, print/echo, var_dump, etc which you need to remove/comment again, I created a function to get output of PHP on the browser console. One could use error_log function but even that makes you go to your log file and then see the output. Of course, browser needs to support/have the console so that code result is output there. Because IE less than 8 doesn’t have console, this won’t work in IE less than 8, though result won’t be affected in it. Notice that you can see console in IE=>8 by pressing F12 key and then going to Script tab where you need to make sure Console tab is selected on the right side.

Here is the function:

     /**
     * Logs messages/variables/data to browser console from within php
     *
     * @param $name: message to be shown for optional data/vars
     * @param $data: variable (scalar/mixed) arrays/objects, etc to be logged
     * @param $jsEval: whether to apply JS eval() to arrays/objects
     *
     * @return none
     * @author Sarfraz
     */
     function logConsole($name, $data = NULL, $jsEval = FALSE)
     {
          if (! $name) return false;

          $isevaled = false;
          $type = ($data || gettype($data)) ? 'Type: ' . gettype($data) : '';

          if ($jsEval && (is_array($data) || is_object($data)))
          {
               $data = 'eval(' . preg_replace('#[\s\r\n\t\0\x0B]+#', '', json_encode($data)) . ')';
               $isevaled = true;
          }
          else
          {
               $data = json_encode($data);
          }

          # sanitalize
          $data = $data ? $data : '';
          $search_array = array("#'#", '#""#', "#''#", "#\n#", "#\r\n#");
          $replace_array = array('"', '', '', '\\n', '\\n');
          $data = preg_replace($search_array,  $replace_array, $data);
          $data = ltrim(rtrim($data, '"'), '"');
          $data = $isevaled ? $data : ($data[0] === "'") ? $data : "'" . $data . "'";

$js = <<<JSCODE
\n<script>
     // fallback - to deal with IE (or browsers that don't have console)
     if (! window.console) console = {};
     console.log = console.log || function(name, data){};
     // end of fallback

     console.log('$name');
     console.log('------------------------------------------');
     console.log('$type');
     console.log($data);
     console.log('\\n');
</script>
JSCODE;

          echo $js;
     } # end logConsole

Here is an example of how to use it:

$name = 'sarfraz';

$fruits = array("banana", "apple", "strawberry", "pineaple");

$user = new stdClass;
$user->name = "Sarfraz";
$user->desig = "Sr. Software Engineer";
$user->lang = "PHP";

logConsole('$name var', $name, true);
logConsole('An array of fruits', $fruits, true);
logConsole('$user object', $user, true);

Above code will result in what is shown in the image above. Although this does not prevent committing code first to see the code output if you are on facebook application development but it defintely does save some time. I have been using this function successfully so far, please let me know your ideas if any on how to improve this piece of code further. Have fun !