Contributing to ZendFramework - ThinkPHP /dev/blog - PHP


... on contribution

Who hasn't ever started writing his own Framework/CMS? It is considered best practice for learning purposes, but going through all the security stuff can be stressful and boring at the same time. That's where most devs start to contribute to big Open Source-projects like Typo3 or the Zend Framework, because they are already experienced working with it and yet evolving another system on the market or even getting people to contribute seems like an unachievable task. Instead of wasting his time on yet another ACL implementation, the developer is taking part in making a software become even better, no matter if he delivers new features, reports / fixes bugs or works on documentation (another, yet an often underestimated part of contribution). It is also worth noting that every single Blog-entry and every HowTo thats put on the web also is a great deal of contribution that helps the software spreading. Beginners articles are important to put on the web since every one of us had it's beginnings and these are the sort of articles where many people decide to either use the software for a certain project or not.

As you might see, this article is not only a guide on contributing bugfixes, but also I want to motivate you to just give it a try.

... on Zend Framework

Having spent almost a year at the IRC support channel, I can tell they're really fun guys to hang around with. Of course, the Framework itself developed into a great piece of software. I do not want to discuss the up or downsides of a use-at-will framework, neither I want to recommend it over {put your favourite software here}. But what I can talk about is a little summary of the support channel's chatlogs. The widely annouced channel (which is #zftalk on Freenode) includes all kinds of concerns. One kind of people finds bugs, the other do have really clever ideas on improvements, but when you ask them to contribute its all the same: they either think it takes years to get into it, the others think they might be "not good enough for this". We sure won't force or threaten people to contribute, but what I can do is taking the fear out of it and demystify the thing, so later you might see that its actually just a few minutes to spend. Let me just loose a few words to the latter ones before we get into it: You can't destroy anything, and every idea of yours can also lead to a great improvement either realted to your concern or in a completely different area. We're glad that you take your time, even if you are completely new to ZF. Some beginners concerns already caused developers to write guides and articles that are still around and are linked at times in #zftalk...

... on contributing to Zend Framework

Contributing any code to ZF requires signing the CLA, which is an agreement that both you have the right to share any code you supply, and that you will not patent that code. This is to ensure that the frameworks codebase remains business friendly, and free to use for everyone. In fact you have to actually sign a paper, having done this you can just scan and mail or fax it. This is an important step, and none of your code will be used in any official package unless you did this.

The next step will be reading the coding & subversion standards. If you already had a look at actual ZF components code you should be familiar with the standards. Once you took a short insight (you probably wont be able to just remember all of this at once), you can check out the official SVN repository. Notice, that you, even having signed the CLA and being confirmed, do not have commit rights. So you might now ask yourself how to contribute then? All magic is taking place in the bugtracker, ZF's official Jira. All bug tickets, additions and improvements are filed as tickets here. So if you find a bug, report it here, and soon there will be a discussion in the comments section of a ticket.

Mostly all of these people, being listed by their reallife names, are also to be found on different names in the support channel, so feel free to ask them any ticket-related stuff.

The code itself will be submitted as a patch file (svn diff > patchFile), and uploaded in the Jira-Ticket. This might also be done by people who do have commit rights, but one might not be sure how to fix a problem, or any question might be left. This method of code management then leaves it to the original package developer to decide whether a change should be made or it should be thought over again (might have side effects on other packages and so on).

 

The last yet very important point is unit tests. ZF makes heavy use of them and so should you. The best you can do is report bugs as failing tests with a short description, fix them with the code diff and then deliver them with working tests.

 

... in closing

As you might now see, once the problems and the contaminated areas are visible, you can pull out your armory and kill the bugs within minutes. The contribution of new packages for the ZF are made in the Wiki, filed as proposals that later get discussed by the community review team, but I might do another article about that one as its a not so trivial workflow. Whenever you fix a bug or deliver an improvement you will be listed on the official Jiras Overview page of top contributors. Can you make it to the top? ZFs bug hunting days are the place for many contributors to join the battle on a shirt, but you might also see that being an active contributor on an open source project might be a good point of interest on your CV.

Having run out of things to say, I want to call all the devs out there to give it a try. A short quote of Ben Scholzen (ZF Core developer): "I code whenever I feel like it": In closing, remember that neither having an account on JIRA nor Signing the CLA ties you in to any minimum commitment, and you can do as much or as little as you are comfortable with. Just pick the level which feels right for you.

 

 

The Future Of Web Design Is Content Management!

Web development has greatly increased in popularity over the last 5 years. Many new design concepts, code standards, and technology advances have happened in a short amount of time. With that, so has the knowledge and demand for better, more independent and functional web design packages.


More and more we are starting to see a shift in consumer demand for the increasingly popular website content management system.

Most website owner's are typical business entrepreneurs who don't have the time to chase down their web design company for some minor updates that usually cost an arm and a leg. Updates for websites are becoming more and more necessary. It's now a reality and a trend that in order to make something happen with your website online, you need to stay on top of things and create new content to keep visitors coming back.

As entrepreneurs, we all get new creative ideas almost every day on how to improve our products or services. Without the ability to update our own website's, those fresh, new ideas may not become a reality for a long time.

Website Content Management Systems Are The Future:

This is somewhat of a call out to all web design companies. If you cannot offer content management to your clients, you may be left in the dust within a few years. The more affordable content management becomes, the more in demand it will be. Without giving your prospects this crucial option, you may lose a great chunk of your potential clients to the next web design company that has a fully automated system that states: "all the consumer has to do is login and get started."

Granted, there will always be a need for web designers. That is an understatement but with the option of content management, you can also decrease the amount of work needed to put into each project and concentrate more on marketing your business and it's services.

Content Management Gives The Consumer The Freedom They Need!

Without giving too much freedom that may make the website look bad, there is a high demand for the ability to update a website when needed, not when convenient. People like to have power over managing their own company, content management gives them the freedom they need to expand on their own terms, without extra costs.

Here Are Typical Features Of A "CMS":

  • Add/remove/edit pages.
  • Update content within each page.
  • Add images where needed.
  • Update contact information.
  • Show updated listings (i.e. Real estate listings, Mortgage rates).
  • Add new tips on their industry everyday (The spawn of blogging).
  • Many extra features not listed here.

Take The Real Estate Industry For Example:

In the last 2 years, "Real Estate Content Management Systems" are popping up everywhere we look. I can recall reviewing over 50 websites that offer this style of service. And why not! Real estate agents as a whole spend a great deal of money marketing themselves. Just in the last couple of years, real estate agents have seen more value in marketing online than they have through regular print media. Many real estate agents I know would rather spend £4,000 for a website rather than spend £4,000 getting listed in the local telephone book.

In Conclusion:

If you offer web design services and have (CMS) Content Management Systems available to your visitors, this might be the time to consider this ever growing popular service for your company. You won't regret putting in the effort of developing your own system and marketing it, there is a shifting demand for this ever-popular freedom online. 

 

http://www.xtmotion.co.uk/news_article.php?newsID=19

 

Get the most out of your website

In the present market, as businesses feel the pinch, your website should be viewed as ‘an employee' - it costs you to develop and run it, so you must ensure that your company is getting the most from it. A recent report by BT Business found that the vast majority of small businesses are not using their websites effectively enough to attract customers. One in six of the business web sites reviewed had no e-commerce facility to sell to customers and just 11% maintained their website every one to two days.

Here are ten tips to build and maintain a website that will help expand your business:

1. Make sure that your website is built properly, and that you either know what you want, or are willing to spend time planning it with a reputable web agency
The planing stage is by far the most important; once site build begins any changes can cause serious functionality problems. This is because a website is essentially a mass of interlinking threads, and if you change one thread it can have an effect on other threads. It is almost impossible for a web agency that has started build, to provide the resource to properly check all the possible outcomes from all the possible scenarios related to the changed sections at this stage.

2. Actively use your website 
Simple things such as regularly updating content, ensuring links are relevant and working, and using good quality images will make for a more positive user experience. It may be worth hiring someone specifically to manage your website if it is considered a key part of the business. A website could be considered a living thing, or at the very least organic; the more it is used the more it will grow.

3. Don't rely on Search Engine Optimisation to paper over the cracks 
Optimisation is an important consideration when planning the structure and design of your website, but shouldn't be used as a shortcut to improve a site's ranking if it hasn't been built well or is being used incorrectly. Also, you may well be paying out a great deal of cash for very little ROI, and some SEO techniques employed could result in your site being blacklisted by the search engines. 

4. Test, test and test again 
Get your friends to test the site, your family even. Thing is if you're building or working on a site you become accustomed to it, making it difficult to objectively assess usability and accessibility.

5. A website needs to be simple to navigate and interact with
You must make it as easy (and safe) as possible to use a website. There are so many good sites out there that a user will quickly switch off, and probably never return if it is not easy to navigate round your site.

6. Be realistic about monetisation 
For instance, charging for membership is not necessarily the right commercial choice. Web literate people are used to being able to register on most sites for free, and could be put off. However, if you have a large membership/user base it will be more attractive to potential advertisers.

7. Know your audience 
If you can categorise your audience as market segments, this will be attractive to and make it easier to secure advertising from relevant businesses or organisations. It will also enable you to make informed decisions about how to develop your site if you know your user-base.

8. Make sure that your site is designed well 
Functionality is about how the site works, design is about look and feel. Remember that design is subjective, therefore someone will always dislike it. As long as design doesn't offend anyone, then you're doing OK.

9. If your website was built 3 years ago, you may need to accept the fact that you should have a new one
Technology changes rapidly, and an old site with poor functionality may dissuade users from paying you a visit.

10. Know when to stop planning, and start building
Websites are amazing, with an almost infinite range of possibilities. But if you keep on adding and changing things, you could have the worlds best website that no-one will ever see.

 

http://www.xtmotion.co.uk/news_article.php?newsID=34

No Website = No Business

Whether or not you agree, online purchases are the way of the future and if you don't have a web site and means to purchase from your business online, you could find yourself in a troubling position one day.

People who tell you having an online presence isn't necessary are still trying to find the best deal on a new fax machine, drive to video stores to rent movies and card shops to send greeting cards.

Convenience rules and the number of online purchases continues to grow because almost anything you could ever want or need can be purchased with the click of a mouse -- from skin moisturizers to clothing to pet supplies to vehicles, homes and vacations.

We're a society of immediate gratification and time poverty.

Standing in line-ups, being restricted to 9-5 store hours and taking hours out of our over-committed day to drive to a mall, fight for a parking spot and try to maneuver a shopping cart through crowded aisles doesn't make sense any more when we can log into our computer 24/7/365, find what we want within minutes and have it delivered to our door.

Weather isn't an issue, nor is the price of gasoline. Buying is at our fingertips.

Kids these days are searching for toys, sports equipment and clothing online. They're demonstrating the way they will be the consumers of the future.

The trend is undeniable and the important question for you as a home business owner is - What are you doing about it? Are you already online, ensuring you get your piece of the pie, or are you operating in the dark?

You can rest assured that whatever product or service you're selling, it's already available online or will be soon.

What did you purchase online this year? Why did you buy it using the Internet instead of in person?

    Convenience?
    Selection?
    Value?
    Price?

If I want to buy from you at midnight, can I? Have you clearly communicated the value to me, how you can solve my particular problem, make my life easier, sooner? Have you created trust and credibility so I'm willing to enter my credit card info and hit the "purchase" button?

No matter what line of business you're in, if you're not making your products or service available online and communicating the benefits clearly, you're leaving money on the table and placing yourself in a very precarious position.

The success of your business rests on your ability to see into the future and take the necessary steps to ensure you arrive intact and hopefully positioned ahead of the others in your industry.

 

Source: xtmotion

Have a Clear Vision and Goal for your Web Site

 If you don't know what you are trying to achieve with your web site design then you will probably achieve...nothing!

Just as your company (hopefully) has a clear vision of where it wants to be in the future and what it wants to develop into - your web site design also needs to have a clear vision.

The vision for your web site design should be aligned with your company’s overall vision.

Ask yourself:

  • what is the vision for this web site design?
  • why are we getting a web site?
  • what is the purpose of your web site design?

Next, think, what are the goals for this web site design? Be specific. What do you want to achieve through a web site? Think about the following areas:

  • Enquiries
  • Sales
  • Brand development
  • Business efficiency

Put specifics on everything. How many enquiries or sales would you like to generate through your web site? What would make your web site an amazing success? Many people decide to get a web site without defining the reasons behind their decision. Once again, know exactly what you are trying to achieve!

Building a Sleek AJAX Email Signup Form

In this tutorial, we’ll learn how to create a slick email signup form. This form will harness the full power of AJAX, meaning that we will submit data to the server, validate it, and receive a response – all without a single page refresh! Along the way, you should pick up some useful tips related to PHP and JavaScript, as well as general programming best practices.


Step 1: The Plan

So, we want to create an email signup form, but not just any signup form: we want to create a super-responsive, AJAX-powered email signup form. This means no pesky page refreshes, giving the end user real-time status updates, and all the juicy goodness of server side data validation. Here is a flow chart of exactly how we want this to work:

Flow Chart Of Events

To accomplish all this hocus pocus, we’ll need to use some pretty cool web technologies. These include JavaScript (with a little lot of help from jQuery), AJAX, PHP, MySQL and JSON. Heres a rundown of what we will be using each technology for:

  • JavaScript – Submit data to the server and parse messages received from the server. We will be using jQuery to handle our AJAX calls and parse our JSON.
  • PHP – Process the data sent to the server. This will include validating the data (making sure it’s OK to put in the database) and handling the response to send back to the browser.
  • MySQL – Store the signup data.
  • JSON – Glue all of the above together. I will explain more about JSON later in this tutorial.

So we know how we want it to work, and we know what technologies we want to use: it’s time to get started!

Step 2: Setting Up the MySQL Database

Ok, first things first: we need to set up our database. At the moment the only data we want to record is the user’s email address, and the date and time he or she signed up. Open up PHPMyAdmin (or whatever program you use to manage your MySQL database) and create a new table in your database using the following statement:

CREATE TABLE `signups` (
  `signups_id` int(10) NOT NULL AUTO_INCREMENT,
  `signup_email_address` varchar(250) DEFAULT NULL,
  `signup_date` date DEFAULT NULL,
  `signup_time` time DEFAULT NULL,
  PRIMARY KEY (`signups_id`)
) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

The above should be sufficient for what we need. signups_id is an auto incrementing field to assign a unique id to each record, signup_email_address is a varchar field and will be the email address the user uses to sign up with, and signup_date and signup_time are date and time fields which will record when the user signed up. Next, we need to set up the HTML.

Step 3: Setting up the HTML

<form id="newsletter-signup" action="?action=signup" method="post">
    <fieldset>
        <label for="signup-email">Sign up for email offers, news & events:</label>
        <input type="text" name="signup-email" id="signup-email" />
        <input type="submit" id="signup-button" value="Sign Me Up!" />
        <p id="signup-response"></p>
    </fieldset>
</form>

This should be the bare minimum HTML that we need to get this working (I have not included the body tags or header stuff in this snippet just to save space. Do note that you will need to have jQuery loaded on your page). All we need is a text input, a submit button, and a message placeholder. Obviously, you need a label for the input, and I have used a fieldset as I am working with an XHTML strict doctype. The placeholder is where our status message to the user is going to be shown. At the moment it should just be empty.

Unstyled Form

So here’s our form in all its glory. Looks pretty plain, doesn’t it? I’m going to do some CSS for our form to make it look a little less windows95-ish.

* {
    padding:0;
    margin:0;
}

body {
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
}

fieldset {
    border:none;
}

form {
    width:930px;
    margin:20% auto;
    padding:15px;
    border:solid 6px #9FCBFF;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
}

input {
    border:none;
    background-color:none;
}

#signup-email {
    border:1px solid #999999;
    color:#9E9E9E;
    padding:5px;
    margin-left:10px;
    margin-right:4px;
}

#signup-email:focus {
    border-color:#9FCBFF;
    background-color:#DFEEFF;
    background-image:none;
    color:#000;
}

#signup-button {
    background-color:#9FCBFF;
    color:#FFF;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    padding:5px;
    text-shadow: 1px 1px 1px #5FA8FF;
}

#signup-button:hover {
    cursor:pointer;
    background-color:#7FB9FF;
}

#signup-response {
    display:inline;
    margin-left:4px;
    padding-left:20px;
}

.response-waiting {
    background:url("loading.gif") no-repeat;
}

.response-success {
   background:url("tick.png") no-repeat;
}

.response-error {
   background:url("cross.png") no-repeat;
}
Styled Form

That’s better. Although our response message is not yet visible (as there in no response yet) it will appear next to the “sign me up” button like so:

Form With Message

Step 4: The Glue

Now that the database access and mark-up have been completed, we need to know how we are going to link the two together.

How is the JavaScript going to be able to send and receive messages from a completely different programming language (PHP)? We are going to use something called JSON.

What is JSON?

JSON (JavaScript Object Notation) is a lightweight, text-based open standard designed for human-readable data interchange (similar to XML in intent). JSON is often used for serializing and transmitting structured data over a network connection. It is primarily used to transmit data between a server and web application, serving as an alternative to XML. JSON is derived from the JavaScript programming language for representing simple data structures and associative arrays, called objects. Despite its relationship to JavaScript, it is language-independent, with parsers available for virtually every programming language. Yep, that includes PHP. Here is a snippet of JSON:

{"hey I'm a key":"and I'm its value!"}

As you can see it’s super-simple. We have encapsulated a key-value pair in some curly braces. The key-value pair relationship is indicated using a colon. The curly braces indicate that this is an object, and everything inside of them is part of that object. You can have multiple key-value pairs in an object:

{"hey I'm a key":"and I'm its value!",
 "hey I'm another key":"and I'm its value!",
 "you guessed it, I'm a key":"and I'm its value!"}

All we have done is split the key-value pairs using a comma. The key-value pairs are actually referred to as members of the object (the JSON object). You can get even more fancy and have an array as a value of a key which holds more objects

{"key1": {
  "key2": "value2",
  "key3": "value3",
  "key4": {
    "value4": [
      {"newobject_1_key_1": "newobject_1_value_1", "newobject_1_key_2": "newobject_1_value_2"},
      {"newobject_2_key_1": "newobject_2_value_1", "newobject_2_key_2": "newobject_2_value_2"},
      {"newobject_3_key_1": "newobject_3_value_1", "newobject_3_key_2": "newobject_3_value_2"}
     ]
  }
}}

Let’s go through this:

  • Key1′s value is an object.
  • Inside that object there are key-value pairs for key2 and key3.
  • Key4 has an object for its value.
  • Value 4 is an array of 3 more objects, which contain 2 key-value pairs each.

But that’s getting too complicated for our needs.

All we are going to need to do is get the server to send us a JSON response containing two members (key-value pairs): one for the status and one for the message. This will look like so:

{"status":"success","message":"Wahey! You've been signed up!"}

status will indicate whether the signup process was successful or not. message will be the message related to the status. If the status is ‘success’ we want to tell the user they are signed up. If the status is ‘error’, then we want to tell the user what went wrong. So if we’re telling the user what has happened via the message member, why do we need the status member? Well, there are two reasons. The first is that we want to apply a class to the response message holder, so that we display a green tick for success and a red cross for an error. The second reason is there can be only one success message that can be sent back (indicating the user has been signed up), but there are up to four error messages that could be sent back. Error messages will occur in the following cases:

  • The user did not enter an email address.
  • The user entered an invalid email address.
  • The email address the user entered has already been used.
  • There is some kind of technical error and the user can not be validated or added to the database.

This means that we also need to know the exact text responses of each message, in order to assign the correct class to the message holder. This equals one massive headache. What if we wanted to change the message sent back? We would then need to revise the code used to assign the class to the message holder as well. It is so much easier to send back the status.

Don’t worry if you do not understand this JSON malarkey yet; as we work

Premium Members: Download this Video ( Must be logged in)

through the rest of the tutorial, it should start to piece together.

Step 5: Preparing It All

Normally, when you submit a form, the browser is redirected to the action of the form. We don’t want this to happen, as we want to submit data in the form using AJAX. The first thing we need to do is stop the form from redirecting us when the submit button is clicked.

$(document).ready(function(){
   $('#newsletter-signup').submit(function(){

        //do our ajax stuff here

        //prevent form from submitting
        return false;
    })
})

Here, we are saying, “when document is ready and the submit event is triggered for any element with an id of newsletter-signup (which just happens to be our form), execute the code inside the function.” This is where we will be inserting the AJAX call, the JSON response handler, and anything else needed to make our form function the way we wish. The only code in this function at the moment is return false. This will stop the form from submitting, which in turn stops it from redirecting us. The next thing we need to do is set up the variables that we are going to be using.

var form = $(this),
    formData = form.serialize(),
    formUrl = form.attr('action'),
    formMethod = form.attr('method'),
    responseMsg = $('#signup-response')

Here we are declaring multiple variables all at once. It just saves writing the var keyword five times. Good times. Anyhow, here is what each variable is for:

  • form – We use the this keyword wrapped in the jQuery object. this refers to the actual form element. We want to wrap it in the jQuery object so we can use other jQuery DOM functions.
  • formdata – We are using the jQuery serialize() function to get all the form data. In its simplest form serialize() gets all the form fields and all their values and puts them in key-value pairs inside a string. We will then send this string of data to the server.
  • formUrl – This is the URL we want to send our data to.
  • formMethod – This is the method we want to use to send our data.
  • responseMsg – This is the element that we are going to use to display our message to the user.

We get the form URL and form method this way so we don’t have to change the JavaScript if we decide to change where and how we send the data to the server in the HTML. We store the response message element in a variable so we only have to search the DOM for it once. To continuously query the DOM for an element is wasteful.

As we are going to be using AJAX to submit the form, we should provide the end user an indication that we are doing some work behind the scenes, so to speak. To do so, we will set the response message holders text to ‘Please Wait…’ and give it a class of ‘response-waiting’. This will give it a cool loading gif :) .

//show response message - waiting
responseMsg.hide()
           .addClass('response-waiting')
           .text('Please Wait...')
           .fadeIn(200);

We hide the response message holder first so that when we set the text, it does not show straight away. Next, we add the class ‘response-waiting’. After that, we set the text to ‘Please Wait…’ and finally fade it in. All we are doing here is chaining together jQuery functions. The responseMsg code could be wrote on one line; I’ve just split it up to make it easier to read.

responseMsg.hide().addClass('response-waiting').text('Please Wait...').fadeIn(200);

Step 6: Submitting To The Server

Okay, it’s time to get to the juicy bit. Now that we have our data, and have provided some visual feedback to the visitor, we’ll use a jQuery function to submit the data to the server.

$(document).ready(function(){
    $('#newsletter-signup').submit(function(){

        //setup variables
        var form = $(this),
        formData = form.serialize(),
        formUrl = form.attr('action'),
        formMethod = form.attr('method'),
        responseMsg = $('#signup-response')

        //show response message - waiting
        responseMsg.hide()
                   .addClass('response-waiting')
                   .text('Please Wait...')
                   .fadeIn(200);

        //send data to server
        $.ajax({
            url: formUrl,
            type: formMethod,
            data: formData,
            success:function(data){
                //do something when ajax call is complete
            }
        })

        //prevent form from submitting
        return false;
    })
})

The magic happens here:

$.ajax({
    url: formUrl,
    type: formMethod,
    data: formData,
    success:function(data){
        //do something we ajax call is complete
    }
})

We are using the jQuery function $.ajax() to submit the data to the server. This function handles all the complicated cross browser XML HTTP Request stuff that we’re not really interested in. Notice something here? Looks a lot like a JSON object…

We need to pass some information to the $.ajax() function so it knows what to do and how to do it. You can pass multiple parameters to the $.ajax() function, but for the sake of this tutorial, we only need to pass it the url, type, data and success parameters.

  • url – This is the url we want to send our data to. We saved this in a variable called formURL earlier.
  • type – This is the method we want use to send our data to the server. We saved this in a variable called formMethod earlier.
  • data – This is the data we want to send to the server. We saved this in a variable called code>formDataearlier
  • success - This is a callback function. It is called if the AJAX call is successful. In this function we will process the JSON response we get from the server.

Step 7: The Success Function

Once we have submitted the data to the server, it will send us a response message back. The message will be a well formatted JSON string. Luckily for us, jQuery has a neat function to parse JSON.

success:function(data){

    //setup variables
    var responseData = jQuery.parseJSON(data),
        klass = '';
}

The argument data that is passed to the success function is our JSON response returned from the server. Within this function, the first thing we want to do is setup two variables:

  • responseData - This will hold the parsed JSON response. The $.parseJSON() function will turn our JSON response into a JavaScript object.
  • klass - This will be a variable that we will set later. It will contain the name of the class we want to apply to the response message holder, based on the response we receive from the server. If you are wondering why we are calling the class variable klass, it is because the word 'class' is a reserved word in JavaScript and can not be used as a variable name.

The next thing must do is determine which CSS class we should apply to the response message holder. The class will be based on what status the server returns. If the status is 'success,' we want to give it a class of 'response-success,' and if the status is 'error,' we'll give it a class of 'response-error'

//response conditional
switch(responseData.status){
    case 'error':
        klass = 'response-error';
    break;
    case 'success':
        klass = 'response-success';
    break;
}

The CSS classes that will be applied to the status messages will look like:

Response Classes

The first one is the loading message (.response-loading), the second is the success message (.response-success) and the third is the error message (.response-error).

We are using a switch statement to determine which class to use based on the status. I could have used if statements, but this is a better way of doing it. The condition we want to compare against is responseData.status. responseData is an object and status is a property of that object. This object was created by the $.parseJSON() function and is based on our JSON response. This response will return two members: status and message. These will be converted into properties of the responseData object. In this switch, we have two cases to compare responseData.status against. If responseData.status is equal to the string 'error', then the klass variable will be set to 'response-error'. If responseData.status is equal to the string 'success' , then the klass variable will be set to 'response-success'. Now all that is left to do is actually show the message to the user.

//show reponse message
responseMsg.fadeOut(200,function(){
    $(this).removeClass('response-waiting')
           .addClass(klass)
           .text(responseData.message)
           .fadeIn(200,function(){
               //set timeout to hide response message
               setTimeout(function(){
                   responseMsg.fadeOut(200,function(){
                       $(this).removeClass(klass);
                   });
               },3000)
            })
})

The first task we do is fade out the response message holder, as it is currently set to 'Please Wait...'. Once this has been completed, we remove the class 'response-waiting', add either the 'error' or 'success' class, set the text to be the message sent back from the server, and then finally fade it back in. All of this is done from the callback of the fadeOut() function. Once the message has faded in, we don't want it to stick around forever so we set a timeout to fade the message out again after three seconds. This is all done from the callback of the fadeIn() function.

As you can see, we are making good use of jQuery's callback functions. These ensure that everything is executed in the correct order, at the correct time. If we did not use the callback functions, we would end up in a situation where we fade the message in and immediately tell it the fade out even though it has not finished fading in. Finally, when the response message holder has faded out we want to remove any classes we assigned to it. That's it for the success function!

And that's it for the JavaScript, too. We have set up our variables, set our status message, submitted the data via AJAX, got a JSON response, parsed the JSON, and returned the status of the submission back to the user. Your completed JavaScript code should look like so:

$(document).ready(function(){
    $('#newsletter-signup').submit(function(){

        //setup variables
        var form = $(this),
        formData = form.serialize(),
        formUrl = form.attr('action'),
        formMethod = form.attr('method'),
        responseMsg = $('#signup-response');

        //show response message - waiting
        responseMsg.hide()
                   .addClass('response-waiting')
                   .text('Please Wait...')
                   .fadeIn(200);

        //send data to server for validation
        $.ajax({
            url: formUrl,
            type: formMethod,
            data: formData,
            success:function(data){

                //setup variables
                var responseData = jQuery.parseJSON(data),
                    klass = '';

                //response conditional
                switch(responseData.status){
                    case 'error':
                        klass = 'response-error';
                    break;
                    case 'success':
                        klass = 'response-success';
                    break;
                }

                //show reponse message
                responseMsg.fadeOut(200,function(){
                    $(this).removeClass('response-waiting')
                           .addClass(klass)
                           .text(responseData.message)
                           .fadeIn(200,function(){
                               //set timeout to hide response message
                               setTimeout(function(){
                                   responseMsg.fadeOut(200,function(){
                                       $(this).removeClass(klass);
                                   });
                               },3000);
                            });
                 });
              }
        });

        //prevent form from submitting
        return false;
    });
});

Step 8: Server Side Validation

Now that we have the HTML prepared, and the JavaScript ready to send and receive data, we need to write our server side code to process the data it's given, and send a JSON response back to the JavaScript. For this tutorial, PHP will be our server-side language of choice.

if($_GET['action'] == 'signup'){
    mysql_connect('localhost','YOUR DB USERNAME','YOUR DB PASSWORD');
    mysql_select_db('YOUR DATABASE THAT CONTAINS THE SIGNUPS TABLE');
    $email = mysql_real_escape_string($_POST['signup-email']);

    //do some stuff

    exit;
}

Here we are saying that if, in the querystring, (as we are using the $_GET array) the parameter action is equal to 'signup,' then execute this code. This is a good way to encapsulate our AJAX call. Firstly we define our MySQL connection using PHP's built in mysql_connect() function. To get this connected to our database we need to give it the host, the database user username, and the database user password. We don't have to do any error checking here, as we are going to do that later in the script. Next, we select the database we want to access using mysql_select_db().

Now that we have got our database access code set up, we can use the mysql_real_escape_string() function to sanitize the data we are sending to the server. This makes the data safe for inserting into the database by escaping certain characters that are classed as unsafe. Because we are posting the data to the server, we use the $_POST array to access our email address. $_POST['signup-email'] will get our email address and we will store it in a variable called $email. The last line of code is the exit statement. This will stop the rest of the script from executing. This is useful if we had lots of code in here, as we only want to run the bit we need and ignore the rest. This is important to keep our AJAX calls nice and speedy. The next thing we are going to need to do is validate the data to make sure that we are not inserting any old junk into the database.

//validate email address - check if input was empty
if(empty($email)){
    $status = 'error';
    $message = 'You did not enter an email address!';
}
else if(!preg_match($emailRegex, $email)){ //validate email address - check if is a valid email address
    $status = 'error';
    $message = 'You have entered an invalid email address!';
}
else {
    $existingSignup = mysql_query("SELECT * FROM signups WHERE signup_email_address='$email'");
    if(mysql_num_rows($existingSignup) < 1){

        //database insert code

    }
    else {
        $status = 'error';
        $message = 'This email address has already been registered!';
    }
}

We only need to do three checks on our data:

  1. Make sure the user actually submitted an email address
  2. Make sure the email address submitted is a valid email address
  3. Make sure the email address submitted has not already been used to sign up

We are using a series of if statements to achieve this. The first if uses the PHP function empty() to check if the $email variable actually contains anything. If the variable is equal to an empty string, 0, '0', false or null, it will return true (meaning that we have an empty variable). If we have an empty variable, we set a variable called $status to 'error' and a variable called $message to 'You did not enter an email address!'. If our variable is not empty we can proceed to check that it is a valid email address. To do so, we use a PHP function called preg_match(). We give this function a regular expression (the long string full of weird characters) and our email address. If the email address matches the regular expression, the function returns 1 (which equates to true). If it does not match, it returns 0 (which equates to false). In our case if preg_match() returns false, we know the email address is invalid; so we set our $status variable to equal 'error' and our $message variable to equal 'You have entered an invalid email address!'. Otherwise if preg_match() returns true, we can move on to the next check which requires us querying the database to see if our email address has already been signed up. We can use the PHP function mysql_query(), which accepts a SQL query, queries the database, and returns a resource. We do not need to know anything about the data that mysql_query() returns; we only need to know how many records is returned. If it returns more than 0, this email address has been used to sign up before so we set our $status and $message variables accordingly. If no records are returned, we are good to insert our data into the database.

We use the PHP function mysql_num_rows() to find out how many records the query returned. All we need to do is pass it the resource which we saved in a variable called $existingSignup and it will return a number. We then use an if statement to check that the number is less than 1.

Step 9: Insert Into Database

We have verified our data is OK to be put in the database, so we are going to use the following code to so:

$date = date('Y-m-d');
$time = date('H:i:s');

$insertSignup = mysql_query("INSERT INTO signups (signup_email_address, signup_date, signup_time) VALUES ('$email','$date','$time')");
if($insertSignup){
    $status = 'success';
    $message = 'you have been signed up!';
}
else {
    $status = 'error';
    $message = 'Oops, there's been a technical error! You have not been signed up.';
}

The date and time variables are PHP functions that return the date and time in a specified format. Because we set the signup_date field in the database to be a date field and the signup_time field to be a time field, I am formatting my date and time to suit them. The next thing to do is insert the data into the database. This, again, is done by using the mysql_query() function and passing it an SQL statement. Because this is an INSERT SQL statement, the function will return true on success and false on failure. It will not return a resource as there is no resource to return because we were just executing a statement. We then check if the query was successful or not. If it was, we set our $status variable to 'success' and our $message variable to 'you have been signed up!'. Otherwise, if the query failed, we set $status to 'error' and $message to 'Oops, There's been a technical error! You have not been signed up.' We don't need to tell the user what the error was, just that there's been a problem and they have not been signed up. This will also catch any error caused by the initial connection code (like could not connect to database or could not find table, etc).

Step 10: Send The Response Back

The previous step defined two variables: $status and $message. This is the data we want to encode as JSON to send back to the user. We are going to put these two variables into an associative array, so we can provide meaningful names to the keys of the JSON members.

$data = array(
    'status' => $status,
    'message' => $message
);

You don't have to write your associative array like this; though I personally find it easier to read. All we need to do now is pass this array to a PHP function called json_encode(). This turns our associative array into a well formatted JSON string. Once it has been encoded as JSON, we need to return it back to the clients browser. We do this with a simple echo statement.

echo json_encode($data);

And that's it. That's all the server side code needed. You should have ended up with this:

if($_GET['action'] == 'signup'){
    mysql_connect('localhost','YOUR DB USERNAME','YOUR DB PASSWORD');
    mysql_select_db('YOUR DATABASE THAT CONTAINS THE SIGNUPS TABLE');

    //sanitize data
    $email = mysql_real_escape_string($_POST['signup-email']);

    //validate email address - check if input was empty
    if(empty($email)){
        $status = "error";
        $message = "You did not enter an email address!";
    }
    else if(!preg_match('/^[^\W][a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\@[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4}$/', $email)){ //validate email address - check if is a valid email address
        $status = "error";
        $message = "You have entered an invalid email address!";
    }
    else {
       $existingSignup = mysql_query("SELECT * FROM signups WHERE signup_email_address='$email'");
       if(mysql_num_rows($existingSignup) < 1){

           $date = date('Y-m-d');
           $time = date('H:i:s');

           $insertSignup = mysql_query("INSERT INTO signups (signup_email_address, signup_date, signup_time) VALUES ('$email','$date','$time')");
           if($insertSignup){
               $status = "success";
               $message = "You have been signed up!";
           }
           else {
               $status = "error";
               $message = "Ooops, Theres been a technical error!";
           }
        }
        else {
            $status = "error";
            $message = "This email address has already been registered!";
        }
    }

    //return json response
    $data = array(
        'status' => $status,
        'message' => $message
    );

    echo json_encode($data);

    exit;
}

That is all the code we need for the email signup form to work. Hopefully, if you followed this tutorial step by step you, should be recording email signups now. Although our code works and our form does what it should, there is one last thing that will improve the form.

If the user clicks the submit button more than once before the AJAX call has finished, we are going to get some pretty weird results. The message results holder will fade in and fade out again, but the timeout won't reset. This will look daft, as well as causing unnecessary calls to the server. Really, we should stop the user from submitting the form whilst a submission is currently in progress.

Step 11: Stopping Multiple Form Submissions

Stopping multiple form submissions is actually pretty easy to accomplish. All we need to do is check what the form's status is when it is submitted. If it is currently submitting, we don't want to re-submit the form until it has finished. To do this, we'll store the status of the form, on the form, using jQuery's data() function. This function lets us store and retrieve arbitrary data associated with the matched element in key value format. We will use a key called 'formstatus' and its value will either be 'submitting' or 'idle'. If 'formstatus' equals 'submitting,' the form will not be submitted. If it equals 'idle', it will submit. Once the form is submitted, we will need to set 'formstatus' to 'submitting'. And, when ithas finished submitting, we set 'formstatus' to 'idle'. Here's our final JavaScript.

$(document).ready(function(){
    $('#newsletter-signup').submit(function(){

    //check the form is not currently submitting
    if($(this).data('formstatus') !== 'submitting'){

         //setup variables
         var form = $(this),
         formData = form.serialize(),
         formUrl = form.attr('action'),
         formMethod = form.attr('method'),
         responseMsg = $('#signup-response');

         //add status data to form
         form.data('formstatus','submitting');

         //show response message - waiting
         responseMsg.hide()
                    .addClass('response-waiting')
                    .text('Please Wait...')
                    .fadeIn(200);

         //send data to server for validation
         $.ajax({
             url: formUrl,
             type: formMethod,
             data: formData,
             success:function(data){

                //setup variables
                var responseData = jQuery.parseJSON(data),
                    klass = '';

                //response conditional
                switch(responseData.status){
                    case 'error':
                        klass = 'response-error';
                    break;
                    case 'success':
                        klass = 'response-success';
                    break;
                }

                //show reponse message
                responseMsg.fadeOut(200,function(){
                   $(this).removeClass('response-waiting')
                          .addClass(klass)
                          .text(responseData.message)
                          .fadeIn(200,function(){
                              //set timeout to hide response message
                              setTimeout(function(){
                                  responseMsg.fadeOut(200,function(){
                                      $(this).removeClass(klass);
                                      form.data('formstatus','idle');
                                  });
                               },3000)
                           });
                });
           }
      });
    }

    //prevent form from submitting
    return false;

    });
})

Conclusion

Hopefully, you can apply the techniques you've learned in this tutorial to create more complex projects in the future. Thanks for reading, and, if you have any questions or comments, don't hesitate to leave a comment below.

Styled Form

21 Ridiculously Impressive HTML5 Canvas Experiments

HTML5 is the thing to talk about these day. Today, we have a collection of some ridiculously impressive HTML5 canvas-based experiments that will make you say, “Wow!” Let’s take a peek at some of the latest, cutting edge examples out there.

1. 8 Bit Color Cycle

2. Particle Letter Animation

3. Cloth Experiment

This is one of the best canvas-based experiments.

4. Particle System

This is one of my favorites — absolutely amazing!

5. Strange Attractors

This example generates beautiful fractals, like the ones generated by Apophysis. Be sure to tick the composite :) .

6. Canvas Nebula

7. Bomomo

8. Liquid Particles

9. Fake Floor Reflections

10. Sinous

This is a really fun game; is it not as easy as it looks!

11. Water in HTML5

12. Blob

13. Magnetic System

14. Trail

15. Particles

16. Shattering Box Physics Simulation

This incredible example depicts real world physics in action.

17. Flower Power

Try to guess the word. :P

18. 9Elements Particle Play

This is a beautiful example which demonstrates audio and canvas in action.

19. Beauty of Maths

20. Tree

21. Cloth Simulation

So what do you think? Getting your own ideas for a neat canvas application? Well, now you have more than one reason to create HTML5 apps: CodeCanyon just launched an HTML5 category! Have fun!

10 Popular Design Competition Websites

10 Popular Design Competition Websites

0

Posted on 30 August 2010 by DzineBlog

-->

 

The irony of any website design is that the name of the designer is relegated right down to the bottom of the page and that too in small font sizes that are barely legible. And in some cases, the name of the designer is simply not there or is taken over by the client. Designers spend days and months designing websites for their clients and what they get in return, most of the time, is payment for their work.

10 Popular Design Competition Websites

 

So, how does a designer like you show the world what you are capable of? There is a simple but highly effective method to brand your work – enter a design competition. Using the popular search engines will give you an enormous list of design competitions that can help you getting hunted by prospective clients rather than you hunting for them.

 Listed below are, what we believe, 10 most popular design competition websites that you must make use of. There are other competitions as well and you would do well to keep a track of them. But these 10 should be good as starting points.

1. Dandad.org

D&D Awards are very much cherished by web designers across the world. The Yellow Pencil, D&D’s famous annual award, goes to some of the best creative designers of the world. This UK-based charity organization receives more than 25,000 entries a year and the competition is fierce. You earn your name simply by making a cut to the shortlist. The entries are accepted around February of every year and you can get the details by visiting their website www.dandad.org.

2. Design Museum London

One of the most prestigious designer awards is given by the Design Museum. Design Museum offers the Designer of the Year Award that is a sure shot way to propel you towards receiving great acclaims from the web designing community. However, in order to be eligible for the £25,000 prize, you really need to work hard on creating a fantastic profile because the nominations for this award are only through invitation. You can visit www.designmuseum.org for more details.

3. Webby Awards

If you are looking at the ultimate prize in website designing then it is, in all probability, the Webby Award. It was in 1996 when the International Academy of Digital Arts and Sciences launched this initiative in New York and over 500 jury members comprising of entrepreneurs, creative designers and established web designers together decide winners from more than 60 categories. Some of the areas that are looked into include visual design, interactivity, functionality, navigation, structure and the overall impact of the design. There is an additional public vote for the People’s Voice Award. The entries are accepted in October every year and the details can be found at www.webbyawards.com.

4. Comm Arts

On 20th January 2011, you can enter your work for the Communication Arts Interactive Design Annual. This award has been there since 1997 and prizes are given for categories like information design, self promotion, entertainment, advertising and business. To enter into this award, you need to create content for the web, handheld devices, interactive kiosks or CD-ROMs. More information is available at www.commarts.com/ca/interactive.

5. Bafta

 

 

The BAFTA is not only a film and TV award but much beyond that. The BAFTA Interactive Awards focuses on the industry of new media and there are awards presented in several categories like DVD and design, interactive TV and online entertainment. This award is almost 10 years old now. To get a feel of what it takes to enter your work for this award, you can visit their website bafta.org/awards. Entries are accepted around October every year.

6. Macromedia

Macromedia has a biannual award for budding student designers where two winners are selected from four categories - Art Projects, Digital Communication, Interactive Media and Portfolios and Video. This award is called the Macromedia Innovation Award for Students. There are also additional awards where four winners of the People’s Choice Award receive an iPod each and the four winners of the Editorial Award receive $1,000 in cash. The next entries will be accepted in September 2010 and you can visit www.macromedia.com for details.

7. Computer Arts

If you are looking to earn some well earned respect at the start of your designing career then one award that you should look to win is the Computer Arts Graduate Showcase. Once you are successful, your work is displayed in supplements in large formats and globally distributed. The next entry date is in March 2011 and details can be found in www.computerarts.co.uk/news/graduateshowcase.

>

8. Design Week

The shortlisted entrants for the Design Week Award winners are normally treated to an outstanding ceremony and a lavish dinner. Awards are given in categories like branded packaging, editorial design, furniture design, logos and letterheads, retail interiors, TV, film and video graphics and workplace environment, among others. A respected and celebrated panel of judges gets together to decide the winners in each category. The entries for this year are expected to be accepted in October. For more information, visit www.designweek.co.uk.

9. Flash Forward

Lynda.com and United Digital Artists together created Flashforward, an award aimed to promote and expose the works of some of the best flash designers around. Entries are accepted in May of every year and the awards are given for the most creative, original, compelling and innovative website designs using flash technology. There are as many as 15 categories of awards and they cover almost everything – animation, sound editing, designing and programming. The panel of judges is carefully picked and they are considered some of the best in the industry in their respective roles. www.flashforwardconference.com gives all the necessary information on these awards.

10. Adobe

When it comes to graphic designing, one name that cannot escape attention is Adobe. The Adobe Design Achievement Awards are given every year to the most promising and talented students in various areas of designing. With more than nine award categories, this award is given to those students who excel in areas of digital filmmaking, computer artistry, graphic designing, animations, broadcast designing, illustrations and photography. The winners get a cash prize award of $5,000 every year. Entries are accepted around April of every year and information is available on www.adobe.com/education/adaa.

 

Google Doodle - Mary Shelley’s 213th birthday

The search engine’s multi-coloured logo has been replaced with an image of a darkened room, with a series of four ghostly portraits on the wall and a shadowy figure looming through an open door in place of the letters in Google’s name.

"Shelley, who was born in 1797, was among the pre-eminent British Gothic novelists. She began writing Frankenstein at the age of 18 and the novel was published in 1818. The title refers to a scientist, Victor Frankenstein, who creates a horrifying monster in the likeness of man.As well as being a classic Gothic novel,Frankenstein is indebted to the Romantic movement and is considered one of the earliest examples of science fiction."

Google Doodles have been produced for the birthdays of several noted authors, including JM Barrie and Hans Christian Anderson.

 Last year a series of Doodles showing UFOs and crop circles caused lengthy speculation before it was revealed that they were celebrating the birthday of HG Wells, the science fiction author.Born not far from our offices, in Bromley.

Artists and scientists have also been honoured, such as Isaac Einstein, Albert Einstein and Leonardo da Vinci.

The first Google Doodle was of the Burning Man Festival of 1998.

http://www.google.com/logos/