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

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

Which is the Best PHP Framework?

Deleting Table Rows Using JQuery and PHP

jquery_delete_rowsIn this tutorial, I will show you how you can delete table rows from database using JQuery and PHP. The interesting thing here is that we will be able to delete the rows without reloading the page and present some cool animations while deleting those rows. You will also learn table stripping or alternate row coloring technique using JQuery.

Here is the heart of the entire logic coded with JQuery:

$(document).ready(function()
{
	$('table#delTable td a.delete').click(function()
	{
		if (confirm("Are you sure you want to delete this row?"))
		{
			var id = $(this).parent().parent().attr('id');
			var data = 'id=' + id ;
			var parent = $(this).parent().parent();

			$.ajax(
			{
				   type: "POST",
				   url: "delete_row.php",
				   data: data,
				   cache: false,

				   success: function()
				   {
					parent.fadeOut('slow', function() {$(this).remove();});
				   }
			 });
		}
	});

	// style the table with alternate colors
	// sets specified color for every odd row
	$('table#delTable tr:odd').css('background',' #FFFFFF');
});

Let’s find out what’s happening here using divide and rule methodology.

$(document).ready(function()

This is JQuery’s function which runs as soon as document becomes ready. This is similar to onload event but JQuery’s function is far more faster than that. So we want to be able to run this code when page is ready.

$('table#delTable td a.delete').click(function()

If you have worked on CSS selectors then above line should not be much of mystery to you. You can use the same syntax to target elements using JQuery. Basically it says that table with id delTable and TD inside it that has hyperlink with class delete when clicked runs the code specified within this function. So when hyperlink with class named delete within TD within table with id delTable is clicked then code specified will execute.

if (confirm("Are you sure you want to delete this row?"))

We want to be able to confirm if user really wants to delete a row.

var id = $(this).parent().parent().attr('id');
var data = 'id=' + id ;
var parent = $(this).parent().parent();

Please keep in mind that in JQuery, the $(this) always refers to the target element which in our case is hyperlink with class delete. attr is used to get or set attributes of the tags. So the id variable refers to the parent of this hyperlink which is TD and then this TD’s parent which is TR. So here we get the id attribute of this TR. In HTML code, we will assign each row’s primary key field to these TRs to identify and delete records. The data variable makes data to be sent as part of the ajax request made using JQuery. The parent variable refers to each TR containing the target element which is hyperlink with class delete.

$.ajax(
{
	   type: "POST",
	   url: "delete_row.php",
	   data: data,
	   cache: false,

	   success: function()
	   {
		parent.fadeOut('slow', function() {$(this).remove();});
	   }
 });

The $.ajax function is used to send ajax requests. Amongst its arguments, the type refers to method of request whether it POST or GET, url refers to script which will get the ajax request data and return some response, data refers to data to be sent as part of the ajax request similar to query string form, cache controls whether cache will be on or off for the request because in IE requests are cached and success function which is also attribute of the $.ajax function runs the code inside it if the request went successful.

parent.fadeOut('slow', function() {$(this).remove();});

As explained before parent refers to the TRs in our case. fadeOut function needs two arguments; animation speed and function to execute. So what this line does is that it removes parent by fading it out and then the target link by using the remove() method. In this way entire row is gone and with the help of ajax request, the record from database is also deleted. Here we have used the fadeOut animation function of JQuery but there are more animations available.

$('table#delTable tr:odd').css('background',' #FFFFFF');

This line means that apply background style to each odd TR of the table with id delTable. Now because our code executes when page is ready, therefore our table will have alternate colors for each odd row.

So that’s all there is to it.

Wasn’t that awesome? It definitely was ! The good thing is that everything was so easy to implement.

Here is the demo.

You can download it here.

.
tweet_this
.

EZMVC – PHP Framework

When working on a PHP project, you have to choose how you are going to develop the site whether you are going to use some framework to develop the site or use custom development.  Both approaches have some dis-advantages, for example if you are going to use some framework then you know framework is not all that easy, if you are going to change something in your site, you have to first search where this change will be made from but if you are going to use the custom approach then it is time-consuming and sort of boring thing.

So what’s the solution?

The solution would be something that comes up with best of the two approaches discussed above. In simple terms, the solution would be to create your own custom framework with some good software patterns like MVC.

I was in similar dilemma as well, so i decided to come up with my own framework which would be simple, easily customizable and fast with ability to add functionality. So the solution I have come up with is named EZMVC, a very easy-to-use framework that can be extended to more power with PHP classes and libraries.

EZMVCEZMVC is an easy-to-use framework implementing the MVC (Model View Controller) design pattern. It helps you create maintainable, flexible and scalable applications. This release of EZMVC framework is very basic, immature, you won’t see all the features present in frameworks like cakephp, codeigniter or symfony in this particular release but I am looking to continue working on this project and come up with an extremely flexible and scaleable framework. Your feedback and suggestions will be greatly appreciated to make this project better and better.

You can download the EZMVC here. The always updated version can be found here:

http://sourceforge.net/projects/ezphp/

.
tweet_this
.

Dreamweaver Tip: Search & Replace Code Snippets

dw_tip_tagWhile working on a project, I came across a need of deleting a piece of code from a number of pages as per the client’s requirements. Well if I would have done that manually then surely it would have taken a great deal of time, so I thought of creating some regular expression to do the trick and guess what it saved me a lot of time.

.Here is the regex:

<STYLE[^>]*>([\s\S]*?)<\/STYLE[^>]*>

What above means is that delete everything inside the <style></style> tags including the tags themselves. When you do the search-replace using dreamweaver, make sure that you check the Use Regular Expression check box at the Find and Replace dialog box. That’s it !! :)