This is an important part of programming a UIWebView iPhone App, the App Store will turn down your app if you cannot check for internet connectivity!

The code below checks for Internet connectivity (from Wi-Fi AND wireless network), and if there is no connection, we throw a UIAlertView notification with a button that closes the app:

(note: we place this code in the viewController.m file)

//No Internet Connection error code -(void)webView:(UIWebView *)myWebView didFailLoadWithError:(NSError *)error { UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Error!" message:@"You have no internet connection!" delegate:self cancelButtonTitle:@"Close" otherButtonTitles:nil, nil]; [alert show]; }

And then we can put this code in right below in order to close the app when the “Close” button is pressed:

//Close app from AlertView - (void)alertView:(UIAlertView *)alertView didDismissWithButtonIndex:(NSInteger)buttonIndex { exit(0); }

And there we have it! This is a very important part of iPhone app development where you will be using the device’s internet! Feel free to ask any questions below!

...

In this series we are using the IndexedDB API to create a basic note-keeping utility within a Web page. In the first part of the series we setup the HTML5 page elements and started IndexedDB processing by attempting to open the database. In this part we will be working on creating the object store, which is how we define the structure of the note database. In the final two parts of the series we will handle inserting, deleting and querying notes. This is part 2 in a series of 4 tutorials:

Setup and opening the note database Creating the object store Adding and deleting notes Querying and presenting notes

Handle Upgrades

If you look back at the code we used last time to attempt opening the database, you will see that we included a version number along with the database name. If the database does not exist yet, or if the version number is greater than the existing version, the “onupgradeneeded” method will fire. In this method, we will specify the database structure and it will be created on first run.

The “onupgradeneeded” method is an issue on Chrome browsers at the time of writing. Unfortunately Chrome is still supporting the older “setVersion” method instead. Hopefully future editions of the browser will add support for the most recent standards.

In your page script section, inside the “init” method, after the “onsuccess” handler function we created last time, add the upgrade method as follows:

//if upgrading - this is where we specify the structure noteRequest.onupgradeneeded = function(event) { };

Notice that the method uses the request object we created and used last time. Inside this method we will specify the structure of the database.

Create the Object Store

In the new upgrade method, first retrieve a reference to the database as follows:

//get the database noteDB = event.target.result;

This is the database variable we declared last time. Now use it to define the database structure:

//create the object store var noteObjectStore = noteDB.createObjectStore("notes", { keyPath: "noteID", autoIncrement: true });

Take a moment to look over this code as understanding it is vital. The first parameter to the “createObjectStore” method is the name you want to use for the data store. Next are the optional parameters, of which we are using two – a key path and a key generator.

IndexedDB stores data in key value pairs. When you create a new object store, you can use either a key path or a key generator, or neither, or both. In this case we are using a key path defined by name and a key generator defined as auto-incrementing. This means that the data store must contain a JavaScript object to represent each user note. The key path is stored as a property within each note object, containing the auto-incremented number generated by the key generator, making each object in the data store unique. You can also choose to make any object property you are using unique with an index, which we will cover below.

When this line executes, supporting browsers should create a store with the specified properties. However, we have not indicated anything yet about the content of items in the note store.

Create Indices

The note database is going to store the time, text content and unique ID for each note. We are going to create an index for the time and text content, although this is not strictly necessary. Creating an index for a database record attribute allows you to search on the values stored for those attributes if you wish to do so. After the line in which we created the object store, add the following:

//create indices in case we want to search on these noteObjectStore.createIndex("when", "when", { unique: false }); noteObjectStore.createIndex("text", "text", { unique: false });

The first line creates an index for the time property of each note and the second for the text content. The parameters represent the index name, key path name and an array of optional parameters. We don’t need the notes to have unique times or content values, so we set the unique constraint to false.

Without an index, you would only be able to look up database items based on the auto-incremented ID key – with these indices, you will be able to query based on the values held for a note’s date and text content. You can also use the index to enforce constraints such as uniqueness, as above. However, you do not need to create indices for your data store so you can omit these two lines of code if you prefer.

Conclusion

That’s all for this part of the series. We have now implemented creating the object store for our user notes and have completed the “init” method. Next time we will add methods to insert and delete notes, before ultimately presenting the notes within the Web page in the final part. If you want to experiment further with IndexedDB for future projects, there are lots of options you can explore for the steps we have carried out in this tutorial, particularly with the structure of the database as well as the keys used within it.

...

Accept it.

Under the particular domain of web development, Python has offered much more than we expected it to in the early 2000’s. It now offers multiple pre-built web frameworks that even a novice coder can utilize for the development of complex applications. Today, we will witness it. Today, we will go through the process of building a dynamic web form using one of its frameworks called Web2Py on a local machine/server.

In the progression of this tutorial, you will be able to learn how dynamic web forms are created, how their field validation schemes work, and how easily they are linked with the database under the hood of Web2Py. This tutorial (however) assumes that:

You have a working Python (2.7+) distribution installed. You have downloaded Web2Py server (preferably .zip) on your machine. You are familiar with the basic concepts of web forms.

Let’s go.

Starting the Server:

In order to start your Web2Py server, cd to the unzipped web2py folder using command line and type:

> web2py.exe localhost:8000 --password [your new password]

You will see a notification message once you hit enter after typing this command. At this point, verify the server initiation by typing http://localhost:8000 in your browser and if you see a welcome page, you are good to go forward.

Creating Form Application:

Browse to the administrative interface on the Web2Py welcome page and create a new application from the right hand section and name it as forms. We will use this application to experiment with our dynamic web form. Now, at this point, you need to understand some basics. The application you just created in Web2Py has only major file (for now) that you need to be concerned of in order to experiment with the web form, which is default.py in the Controller section. This default.py is a Python controller that constructs the back-end operations for your form application and manages the data provided by it.

Building Form:

Begin with the construction of your web form by opening up the default.py file (in the edit mode) and define a new database scheme as follows (at the end of the file):

db = DAL('sqlite://storage.sqlite') db.define_table('registration', Field('firstname', requires=IS_NOT_EMPTY()), Field('lastname', requires=IS_NOT_EMPTY()), Field('gender', requires=IS_IN_SET(['Male', 'Female'])), Field('username', requires=IS_NOT_EMPTY()), Field('password', 'password'), Field('about_you', 'text'), Field('image', 'upload'))

Once this default.py is saved, Web2Py controller reads this database schema, and based on that, constructs a table named ‘registration’ having the following fields:

firstname lastname gender username password about_you

The first line in the above code (db = DAL(‘sqlite://storage.sqlite’) defines the database abstraction layer (DAL()) for the Web2Py controller, and based on the input parameters provided, it establishes the connection with the defined database. Since SQLite comes by default with Web2Py, so we will utilize it (although this can be replaced by any type of DBMS like MySQL, etc.). On the other hand, the function right below it (db.define_table()) defines the structure of the newly created database table.

Once you are there, now its time to create the form fields. In the same default.py, enter this new function at the end of the file (right below the database code):

def form_a(): form = SQLFORM(db.registration) return dict(form=form)

You have just created a nice looking registration form using the SQLFORM() function in Web2Py, which simply extracts all the input fields defined in the ‘registration’ table (isn’t it cool?). All you need to do now is to call it all in an html template/page.

Calling the Form:

In the Views section of the forms application page, create a new html file named default/form_a.html (it is recommended that you keep the html file name as default/[name of the function] that you specified in default.py). Open this newly created html file and make it read like this:

<h5> User Registration Form </h5> <br /> {{=form}} <br />

This is it! Browse to http://127.0.0.1:8000/forms/default/form_a.html to see your handy work.

So-called ‘Dynamism’:

Alright, lets add some ‘dynamism’ to our web form so that it notifies the user about what fields are mandatory and additionally, shows the submitted data to the user. To do so, make your form_a() function look something like this:

def display_form(): form = SQLFORM(db.registration) if form.process().accepted: response.flash = ‘You have successfully submitted the form’ elif form.errors: response.flash = 'Please check your form for errors'...

Do you work on multiple sites at a time? Then no doubt you would love to improve your speed and your overall development workflow. Think of what it takes to set up WordPress the old school way:

Downloading the latest version. Extracting the downloaded zip file. Creating a new database. Creating wp-config.php file.

Developing WordPress sites has never been easier with WAMP and Simple WordPress Auto Installer.  The Auto Installer script is now available that allows you to add a WordPress install within the WampServer together with a database, all in one shot, thereby speeding up your local WordPress development.

To make this happen, you will need to download WampServer and the Simple WordPress Auto Installer, both of which are open source and available as free downloads. You will need to install the WampServer first and ensure that it is working. This is usually straight-forward and quick.

Upon downloading the Simple WordPress Auto Installer, you will notice 3 files: installer.php, license and readme.md. To install, simply drop a copy of the “installer.php” file into the root directory of WampServer designated as “www”.

When you open the “installer.php” file, you will see these lines of code:

array( 'label' => 'Latest version', 'url' => 'http://wordpress.org/latest.zip', 'description' => 'Download the latest stable English version' ), array( 'label' => 'Last nightly', 'url' => 'http://wordpress.org/nightly-builds/wordpress-latest.zip', 'description' => 'Download the latest beta version'

You can configure these settings to change the WordPress version as well as the build to your own preferences.

You can also add more languages by including an array like the one below:

array( 'label' => 'French', 'url' => 'http://fr.wordpress.org/wordpress-'.$last_v_doted.'-fr_FR.zip', 'description' => 'Download the latest stable French version' ),

Other global settings you can configure include the default username, database, password and CSS parameters.

Fire up your WampServer and navigate to the installer file we just uploaded using the link below:

http://localhost/installer.php

The Auto Installer will then allow you to configure your local site settings that include; the folder where you want WordPress to go, the database server (which by default should be localhost), the DB name, DB username and DB user password.  From here click `GO` and

the script will then download the latest copy of WordPress, extract the files to the directory you named and will create a new database.

Set your site’s name, username and password and you are ready to roll.

Whenever you need to start a new development project, you will simply fire up the installer using the above link and configure the settings for the new site as we have done. You will no longer need to download WordPress again, set up a database in phpMyAdmin or make any other configuration settings. Everything has been done for you.

...

I recently developed an application that sent variables into a mathematic function. This function needed to have a numeric count of the exactly how many zeros there were in a certain array. For this snippet, we can use both numeric and text based arrays.

I printed it using this code:

Our two example arrays will be:

$array_num = array(1, 1, 1, 2, 3, 4, 4, 4, 4, 4, 5, 6); $array_text = array(apple, apple, apple, orange, banana, banana);

We then put this array into array_count_values()

$count_array_num = array_count_values($array_num); $count_array_text = array_count_values($array_text);

If we print $count_array_num we get this result:

Array ( [1] => 3 [2] => 1 [3] => 1 [4] => 5 [5] => 1 [6] => 1 )

if we print $count_array_text we get:

Array ( [apple] => 3 [orange] => 1 [banana] => 2 )

From these results, we see the exact number of each value in the respective array.

Then we can define the values that we want to know:

$value_num = '4'; $value_text = "banana";

Finally, we can use this code to get the count for how many times the number 4 shows up in our $array_num and how many times ‘banana’ is listed in $array_text.

$result_num = $count_array_num[$value_num]; $result_text = $count_array_text[$value_text];

And of course, echo the results!

echo $result_num; echo '<br/>'; echo $result_text;

Now our page result will be:

5

2

And there we have it, now you can plug those variables in any where you’d like! Feel free to ask any questions below!

...

With hundreds of millions of users entering hundreds of billions of queries into major search engines such as Google, Yahoo and Bing, the importance of designing a site to be search-engine friendly cannot be underestimated. However, even the most experienced designers and developers can make simple mistakes that can cost their site thousands of views and (potentially) uncounted revenues.

HTML Issues

Sometimes, the “old-fashioned” methods are still the most effective. While many SEO experts have debated the degree of effectiveness of old-school metatags and how they affect search engine rankings, the common belief is that their presence is helpful, especially since spiders often crawl through much of the text content of each page they index.

Page Title

The first place most spiders crawl through is the page’s title tag. When a search engine finds a word in a title tag that matches the search terms, the results page displays that title in bold text. The bold text catches the reader’s eye and causes a nearly instinctive compulsion to click on that link. As the specificity of the search terms increase, so does the importance of the title tag.

Description Metatag

The next area of the page that the spiders will visit is the content within the “description” metatag. Unfortunately, many so-called “black hat” SEO specialists take advantage of this situation by spamming the title and description tags with keywords that are either tangentially related to the page’s content, or completely irrelevant but filled with “hot” keywords in order to boost traffic. Description content should be relevant, clear and precise.

Headlines and Subheaders

In HTML4, the header (<h1>,<h2>, etc.) tags specify the headlines and subheaders within content. Not only do search engine crawlers view the content within these tags as important, the tags also help the viewer find the the information they need without scrolling through the entire article. Wikipedia uses this technique to great effect when breaking down its lengthy and specific content.

Architecture Factors

While content is an important component of search engine optimization, the other key part lies in the design and architecture of the site itself. Spiders must be able to navigate through a site and index all its relevant pages quickly and efficiently. Also, the URLs that link pages together within the site can be used as search engine material.

Navigation

Since search engines view pages in much the same way as the least sophisticated browser, an overly complicated navigation scheme (or one that his highly dependent on user input) will hamper the spider’s ability to index pages. Most site architects believe that a site’s navigation structure should resemble that of a cake: two layers is good, three is better, four or more is too much.

Speed

Search engines also place a high priority on how fast a page loads. While Flash-heavy pages can produce stunning animations and eye-catching designs, they also slow down a page’s load speed. Search engines, like users, won’t wait forever for a beautiful presentation: they both want content and they want it now (if not sooner).

URL

Which link tells you more about a product? www.blahtech.com/product.asp?id=234 www.blahtech.com/moisture-balance-il-160.html Most developers understand how to assign a URL to a dynamic page. These links will enable the spiders to collect content and index the page much more quickly.

In a future article, we will address how the new tags in HTML5 will help with search engine optimization.

...

Web developers have a fond love for open source tools not only because these tools are generally free of cost, but they can be modified in any way the developer sees fit. That is actually where the free in free/open source software comes from.

While .NET and other paid technologies and tools do have their place on the Web, it really is open source tools and applications that power it. There are thousands of great open source applications and picking the best among them is really hard since so many people have their own personal favorites. The list prepared for you represents 10 open source tools almost any Web developer can use every day:

1. KompoZer

All the fans of Dreamweaver might consider KompoZer the poor man’s choice but actually this isn’t so. KompoZer, the former Nvu, is a WISYWIG HTML editor that, unlike Dreamweaver, doesn’t require an ultra powerful PC just to open a file. KompoZer is a light-weight application but it is a good choice even for advanced programming tasks.

2. Eclipse

Java developers do have a lot of IDEs to choose from. Many of them choose Eclipse because it is convenient to work with. Additionally, it has a PHP plug-in so if you have occasional PHP programming tasks, you can still work in Eclipse.

3. Komodo Edit

Komodo Edit is an editor for Perl, Python, Tcl, PHP, Ruby, Javascript, etc. It is the little brother of their paid Komodo IDE, but even this kind of limited edition has all the perks you will need in your daily work.

4. Apache

Apache is the Web server that no Web developer can go without. Apache is fast and reliable but mastering it can be a bit hard, especially for a beginner.

5. XAMPP

If you want to write Web applications, a Web server is only the foundation. You need other tools, such as the relational MySQL database and the PHP language framework. Installing and configuring them one by one is not rocket science but it is much easier when you get XAMPP – a bundle with Apache, PHP, and MySQL. XAMPP is very easy to install.

6. PostgreSQL

MySQL is a good choice for a relational DB but if you have some reasons not to use it, you could consider an alternative, such as PostgreSQL.

7. phpMyAdmin

phpMyAdmin is another open source application many Web developers can’t live without. It is a GUI  used to administer MySQL databases and it makes the entire  process much easier.

8. Firefox Web Developer Toolbar

Firebug is cute, but if you want something really big and powerful then you should try the Firefox web developer toolbar. It has even more functions than the Firebug plug-in and with it you can literally dissect any Web page to see what’s inside its code.

And for you Chrome addicts out there, there is a version available for you as well.

9. OpenSTA

Once you finish coding your application you are not done yet. You need to test it. While there are tons of tests you can (and should) do, one of the tests you shouldn’t skip under any circumstances is load testing. With the help of OpenSTA you can perform the necessary tests to make sure that your application doesn’t misbehave under stress.

10. Browsershots.org

Unlike the other tools and applications on the list, this one isn’t an application/tool but rather a free service. However, since it is a great helper, I have included it in the list. Browsershots.org allows to you see how your site is viewed in any possible browser. The list of browsers includes almost any browser you can imagine and this saves you the hassle to manually test your site for browser compatibility.

Of course, if I left your favorite tool off this list please share it with our readers in the comment section below!

...