117048276952d6560f6c1180.56308843_3617e13b

HTML5 VS. NATIVE MOBILE APPLICATIONS – WHO DO YOU BACK?

117048276952d6560f6c1180.56308843_3617e13b

Generally, the answer is completely dependant on an individual project specification and brief although according to a recent Gartner report amongst 478 developers in North America and Europe, 22% of developers are developing hybrid apps, 24% on mobile web-applications and 41% on native app development such as iOS or Android specific applications.



Consequently, the heated topic often leaves developers opting for one over the other, mostly down to personal preferences. However, developers are shifting more towards the significance of striking a balance between the ability to monetise their applications whilst providing a high quality, easily-understandable and friendly user experience.

THE DIFFERENCE IN DEVELOPMENT

Developing native applications is generally considered much easier than finding the perfect balance on a responsive website that suits all types of devices. Languages and their supported IDE’s, such as Objective-C and XCode, make rapid development of native mobile applications much easier to accomplish and typically, developers don’t require much understanding of the underlying principles of the platform and its language.

Developers will often find that bug-fixing in native applications is easier than identifying issues on hybrid or HTML5-specific apps. This is mostly due to the complex debugging tools an IDE will provide you with that can pinpoint the exact root and cause of a bug. However, the major disadvantage in development is the fact that every application is native to its OS, device and platform, so developers often need to release multiple versions to accommodate the wide spread of devices.

In contrast, HTML5 developers will often take a different approach with the development. Typically, the developers are familiar with creating web technologies, giving them the advantage that they have a wider skill base to approach the task, without necessarily needing to learn a new IDE or programming language. Also, HTML5 mobile applications can run on any device or platform that has access to a web browser, immediately increasing the development reach – although – you may end up spending equally as much time testing your application – similar to native applications per device testing – you’ll need to cross-browser check your application. With there being an enormous amount of mobile and tablet devices, you’ll need to strike a balance on the devices you want to target and those you decide not to officially support.

DELIVERING USER EXPERIENCE TO GENERATE A REVENUE STREAM

If we look through a consumers perspective, monetisation and development are two different things entirely. If we take a game as an example, you’ll only be focusing initially on the visual appeal of the application and, once we have purchased the game, how easy it is to play. However, as a developer, you may set in stone additional ways your consumers can turn your app into a revenue stream – are you offering in-app purchases? If you’re using HTML5, how will you integrate the equivalent of in-app purchases to your users, what checkout will you integrate into, is there a charge?



With any application, you want to create something that’s visually appealing, powerful and has a look and feel that’s symbolic to your corporate branding – therefore the user interface (UI) design of your application is hugely important.

With native mobile applications, you have access to higher graphic rendering and better synchronisation that’ll often aid your consumers appeal knowing that the device they’re on can do more than a standalone static HTML5 web-application. Additionally, developing native mobile applications means consumers can take advantage of their devices hardware – you can integrate the camera, GPS, volume, search buttons, etc. directly into your application that can potentially update the UI. Of course this goes without saying, HTML5 has come a long way and developers have a batch of new API’s that allow them to access the devices battery, geolocation, though you’ll have to put the effect in to get these working on par with the native mobile application.

When it comes to HTML5, developers have the normal flexibility they have when designing websites. CSS3 allows you to control pretty much every aspect of your website, and, if it doesn’t support a selector you’re after you can always fallback to a Javascript/jQuery selector. However, if we are addressing games, HTML5 doesn’t provide the same level of sophistication we’d hope to implement (unless you get really dirty programming) although with HTML5 you can put together simple, streamline applications that are low in development cost, yet high in revenue. The less sophisticated an application design and development is, the more profit you’re likely to make and thus potentially the more preferable the option?

PERFORMANCE

Performance is always a huge factor to the success of any application. Consumers want responsive (in the aspect of load times and non-sluggish behaviour), adaptive and flexible applications that are able to handle a high load of requests – in case the person using the application gets ‘click happy’ – you don’t just want the application to crash and ungraciously handle the issues.

Depending on the type of application you’re looking to develop will assess whether or not you need access to an Internet connection which can be the downfall of most web-applications. How do you access it when you’re stuck in a mobile signal dead spot? Native applications will typically aggressively cache all their content and resources, meaning you’re able to continue using the application when you go offline and simply synchronise all your data when you re-connect either through 3G, 4G or Wi-Fi. However, as applications become more socially connected, both types of application will suffer under the wrath of needing an ‘always connected’ device – even with native applications, there is typically something happening in the background, some form of asynchronous update.

Another factor you’ll want to consider is that of memory and optimisation. You always want to develop any application in the strictest standard possible. You want to ensure you’re not leaking memory on native mobile applications, and ensure you’re not hogging shared memory on web-applications. Native applications such as iOS applications have a huge selection of tools and utilities that able you to debug and test your application for leaks and assignment issues. Thankfully, with HTML5 web-applications you tend to bi-pass this issue altogether, or at least they’re not as major as most tablets, laptops and PC’s will have more resources available.



Overall, it’s valid to say that both native and web applications have an equal share of pitfalls when it comes to performance so it simply comes down to a matter of preference and what you know you’ll be able to manage and refactor when an issue does arise.

A QUICK ROUNDUP

As unhelpful as it may seem, I believe a conclusion on the matter is entirely opinion based and therefore biased towards what any developer prefers. If you’re well-versed in Objective-C, C, C++ or Java if you’re not, you may want to learn Objective-C – then you’d most likely enjoy and thus prefer developing native applications. Whilst if you’re already a web designer or developer, you’ll tend to sway towards the HTML5 responsive web-application approach – after all, that’ll cut down your development and provide a platform that can be accessed on all devices that have access to a web browser.

WHAT NEXT?

Every great mobile application, whether HTML5 based or native to any platform, will require an API. We’ve put together some great articles on designing a REST API server for your mobile application and some programming guidelines for setting up and implementing OAuth2 in Objective-C (for iOS apps).

 Original article has been published at madebymagnitude
images

Step-by-Step PHP Tutorials for Beginners

PHP Tutorials for beginners

images

Introduction

Interested in creating your own website? Ever wondered how cool is it to have a website that has a log-in/log-out functionality? Want to learn how to Create, Read, Update or Delete(CRUD) records in a database? Have you lost track on your previous tutorials? Well, I’m going to teach you how to create one from scratch where in you will know every single details on how the code works. If you are new to back-end web development, this tutorial is for you. I’ll explain everything in detail so that you won’t have to research some particular methods being used. We won’t be using any frameworks to keep things simple. Also I won’t be focusing on the websites design since were after the functionalities though, it’s easy to implement the design. What will be doing is a simple item list when the users is logged in.




*Shameless plug*

You can also checkout my ASP.NET MVC 5 version for this one right here.

Pre-requisites

In this tutorial, we will be using some languages that will enhance our development. If you really don’t know any of the things I will mention, it’s ok. Just try to go with the flow. It’s just easy to comprehend them since I’m not into using advanced methods for this one. Off course since this is creating a back-end service for a website, you must know at least the very very very basics of the following:

  1. HTML/CSS – Off course this will never get off the list when it comes to web development. Why did I even bother place this? LOL.
  2. JavaScript – For a redirecting script. No jQuery needed for now
  3. mySQL – the most basic language for querying. We will be using this for our CRUD(Create, Read, Update, Delete) functionalities.

For the software, you will be needing the following:

  1. Text EditorSublime Text/Notepad++ will do. This will serve as our coding environment.
  2. XAMPP – This will be our web server. This is were we will be saving our website files and save our data to the database.
  3. Web Browser – You can use any browser for as long as it doesn’t eat much of your RAM.
Make sure to have those 3 installed. Do not proceed if your not done installing them. I already provided a hyperlink to make things faster.

For our agenda in this topic:

  1. Utilize CRUD statements in SQL – Create, read, update and delete records in a database.
  2. Simple authentication and security – Logging in and out, handling unauthorized users and restricting access.
  3. Simple time and date manipulation – Displaying time and date postings and monitoring your posts.
  4. Displaying public and private data – Simply display information for logged-in users only and for the public
  5. De-briefing and Summary – Final output and some notes. FAQ’s are also place here.

Topic Contents:

Note: In case you stopped on a certain part or want to search quickly , you can simply resume by pressing ctrl + f and look for the number where you last stopped

  1. Setting up your server

  2. Creating the public HTML Pages

  3. Creating the database and it’s tables

  4. Adding users to the database

  5. User log-in: Authentication

  6. Setting up the home page for Logged-in users and Logging-out

  7. Testing Page Security

  8. Adding data to the list – User Access Only

  9. Displaying data in the home page

  10. Editing Data

  11. Deleting data

  12. Displaying public data

  13. De-briefing and Summary

Make sure you follow chronologically. Don’t proceed without accomplishing the previous part not unless you know the code.

Some reminders before we start:

Note: If the picture seems unclear/blurry, you can click it to view it on it’s larger size. Also, pardon me for using images to display the codes rather than showing you a raw text because it can’t format properly on my WordPress subscription but don’t worry, I’ll be uploading the finished product on the end of this tutorial to double-check your work.

———-Real Tutorials Begin Here———-

1.) Setting up your server

Now that your all set and go, as the basics of programming goes, let’s start by creating a simple shoutout of“hello world” in our server.




First of, go to the directory where you installed your XAMPP (Commonly in C:\xampp). From there go to thehtdocs folder (Commonly in C:\xampp\htdocs) and create a folder named “MyFirstWebsite“.

1 - PHP101

From that part, you have now created a Local URL for your website. That folder will be used to supply in all website files (.html, .php, .css, .js, etc.). Open up your text editor and let’s get started!

I use sublime text as my text editor. If your using Notepad++ or any others, it’s ok. It’s not really a big factor but it’s just a preference on which one would you like to use.

What we will do is a basic HTML page and display “hello world” from the server using a basic PHP syntax. We then type the following syntax:

Hello World

<html>
    <head>
    <title>My first PHP Website</title>
    </head>
    <body>
        <?php
            echo "<p>Hello World!</p>";
        ?>
    </body>
</html>

Save the file to the “MyFirstWebSite” Folder and name it as “index.php“. (Directory as seen on the top part of the image)

Now that you have the file. Let’s now open your XAMPP control panel. In case it doesn’t appear on your desktop, it is located in your XAMPP folder as seen on the image:

Untitled

Untitled

Now that it’s there, Run your Apache and mySQL by clicking the “Start” button on the actions column. You should see a random PID(s) and the default port number. Apache is the name of our web server wherein it will handle all the files as well as serve as the communication to the web browser and MySQL is our database which will store all of our information.

Open up your web browser and in the address bar, type localhost. You should see the menu of your XAMPP.

If it’s the first time you run it, it will ask what language would you prefer, just simply pick and it will lead you to the menu. If you will noticed the directory is localhost/xampp, it’s where the default page leads you even if you type in localhost.

Untitled

If that appears, then it means that your XAMPP server is now running. Now let’s try running the website you just placed. Try typing localhost/MyFirstWebsite. It should be the same as the picture below.

Untitled




If you will notice that the URL is MyFirstWebsite, it is derived from the htdocs folder and it automatically reads files that are named “index”(Be it index.html, index.aspx, etc), which serve as the default page. Typinglocalhost/MyfirstWebsite/index.php is just the same. You can also create your custom name for the URL by simply renaming the folder but let’s just stick to MyFirstWebsite.

Note: If you don’t have a file named index and you entered the URL, you will receive an error 404 for not having the file on the server. If you do have different files that are not named index.<extention>, you have to specify the specific file name. E.x: localhost/MyfirstWebsite/page.php

2.) Creating the public HTML Pages

Next, let’s re-modify our website and add a registration link where our users can register as well as a Log-in page right after getting registered. Let’s modify our home page with the following code:

index.php

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
    <body>
        <?php
            echo "<p>Hello World!</p>";
        ?>
        <a href="login.php"> Click here to login 
        <a href="register.php"> Click here to register 
    </body>
</html>

As you can see, we only added 2 links which are for the Login and register. Let’s create the registration page first:

register.php

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
    <body>
        <h2>Registration Page</h2>
        <a href="index.php">Click here to go back<br/><br/>
        <form action="register.php" method="POST">
           Enter Username: <input type="text" name="username" required="required" /> <br/>
           Enter password: <input type="password" name="password" required="required" /> <br/>
           <input type="submit" value="Register"/>
        </form>
    </body>
</html>

As you can see, it’s just a basic form where the user can input his/her credentials. Now for the login page:




Hint: Just copy-paste the same code to make things faster.

login.php

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
    <body>
        <h2>Login Page</h2>
        <a href="index.php">Click here to go back<br/><br/>
        <form action="checklogin.php" method="POST">
           Enter Username: <input type="text" name="username" required="required" /> <br/>
           Enter password: <input type="password" name="password" required="required" /> <br/>
           <input type="submit" value="Login"/>
        </form>
    </body>
</html>

Basically it’s just the same code as from the register.php but the changes made were the ones underlined.

Click here for the complete login.php code

Try running localhost/MyFirstWebsite again and your pages should look like this:

index.php

Untitled

login.php

Untitled

register.php

Untitled

3.) Creating the database and it’s tables

Now that we have our basic page for the public. Let’s proceed to the database. First, typelocalhost/phpmyadmin. This will lead you to the phpmyadmin homepage:

localhost/phpmyadmin

Untitled

From there, go to the Databases tab located on top then from the text box in the middle, type first_db then click on create. Just leave the Collation as is.

Untitled

You have just successfully created your first database. Now from there, let’s create a table wherein we can register our users and display information. First, click on first_db located on the left side and create a table namedusers with 3 columns then click on Go.

Untitled

For the table’s structure, make sure to have the following fields then click on save:

  • Format: Column Name – Type – Length – Null Property – Other Properties
  • id – INT – N/A – Not Null – Auto Increment
  • username – varchar – 50 – Not null
  • password – varchar – 50 – Not null

Leave everything by default if not specified.

Untitled

Note: You need to scroll right for the auto_increment. I just edited the picture to fit the A_I field




Next, create another table named list with 7 columns and for the table’s structure:

  • id – INT – N/A – Not Null – Auto Increment
  • details – text – Not null
  • date_posted – varchar – 30 – Not null
  • time_posted – Time – Not null
  • date_edited – varchar – 30 – Not null
  • time_edited – Time – Not null
  • public -varchar – 5 – Not null

Untitled

4.)Adding users to the database

Now that we have our tables. Let’s move on to the fun part, getting your registration page into action. From yourregistration.php, add the following below the html codes:

register.php

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
    <body>
        <h2>Registration Page</h2>
        <a href="index.php">Click here to go back<br/><br/>
        <form action="checklogin.php" method="POST">
           Enter Username: <input type="text" name="username" required="required" /> <br/>
           Enter password: <input type="password" name="password" required="required" /> <br/>
           <input type="submit" value="Register"/>
        </form>
    </body>
</html>

Here’s the explanation to the code:

  • $_SERVER[“REQUEST_METHOD”] == “POST” – checks if the form has received a POST method when thesubmit button has been clicked. The POST method is created in the html from the method=”POST”. Clickhere for the form method reference.
  • $_POST[”] – gets the name coming from a POST method. This just simply gets the input based on the name from the form. In our case it’s username and password.
  • mysql_real_escape_string() – encapsulates the input into a string to prevent inputs from SQL Injections. This ensures that your strings don’t escape from unnecessary characters. Click here to learn more about SQL Injections.

Now try to go to your register.php and try to input anything then click on “Register”. In my case I placed in the username xtian and password as 123456. It should display the inputs below. Here’s my sample:

Untitled

On this part, you should have understood on how to get input from the form. Now to add it to the database. On your register.php, add the following code:

register.php

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
    <body>
        <h2>Registration Page</h2>
        <a href="index.php">Click here to go back<br/><br/>
        <form action="checklogin.php" method="POST">
           Enter Username: <input type="text" name="username" required="required" /> <br/>
           Enter password: <input type="password" name="password" required="required" /> <br/>
           <input type="submit" value="Register"/>
        </form>
    </body>
</html>

alert("Username has been taken!");</script>'; // Prompts the user
           Print '<script>window.location.assign("register.php");</script>'; // redirects to register.php
        }
    }

    if($bool)
    {
        mysql_query("INSERT INTO users (username, password) VALUES ('$username', 'password')"); // inserts value into table users
        Print '<script>alert("Successfully Registered!");</script>'; // Prompts the user
        Print '<script>window.location.assign("register.php");</script>'; // redirects to register.php
    }
}
?>

Click here for the complete register.php file

Here are the explanations to the code:

  • mysql_connect(“Server name”,”Server Username”,”Server Password”) – The syntax used to connect to our XAMPP server. localhost or 127.0.0.1 is the name of the server. The default username is root and no password for default.
  • mysql_select_db(“database name”) – Selects the database to be used.
  • or die(‘Message’) – Displays the error message if the condition wasn’t met.
  • mysql_query(‘sql query’) – does the SQL queries. Click here for some SQL query samples. The again, i’m not here to discuss about mySQL.
  • mysql_fetch_array(‘query’) – fetches all queries in the table to display or manipulate data. It is placed in a while loop so that it would query all rows. Take note that only 1 row is queried per loop that’s why a while loop is necessary.
  • $row[‘row name’] – the value of the column in the current query. It is represented as an array. In our case $row is the name of the variable for our row in the loop.

Try the inputs that you have made earlier and see what happens. It should prompt that you have successfully registered. Try going to phpmyadmin and see your users table:

Untitled

Congratulations! Now you know how to add data into the database with data validations.

5.)User log-in: Authentication

Now for the login page. Let’s create a new file called checklogin.php. The reason is going back to our login.php,our form has an action called “checklogin.php”, particularly <form action = “checklogin.php” method= “POST”>. If you will notice on the register.php, it’s also on register.php because the back-end is done on the same file as well.

Let’s now code the checklogin.php with the following syntax:

checklogin.php

Untitled

<?php
    session_start();
    $username = mysql_real_escape_string($_POST['username']);
    $password = mysql_real_escape_string($_POST['password']);
    $bool = true;

    mysql_connect("localhost", "root", "") or die (mysql_error()); //Connect to server
    mysql_select_db("first_db") or die ("Cannot connect to database"); //Connect to database
    $query = mysql_query("Select * from users WHERE username='$username'"); // Query the users table
    $exists = mysql_num_rows($query); //Checks if username exists
    $table_users = "":
    $table_password = "";
    if($exists > 0) //IF there are no returning rows or no existing username
    {
       while($row = mysql_fetch_assoc($query)) // display all rows from query
       {
          $table_users = $row['username']; // the first username row is passed on to $table_users, and so on until the query is finished
          $table_password = $row['password']; // the first password row is passed on to $table_password, and so on until the query is finished
       }
       if(($username == $table_users) && ($password == $table_password))// checks if there are any matching fields
       {
          if($password == $table_password)
          {
             $_SESSION['user'] = $username; //set the username in a session. This serves as a global variable
             header("location: home.php"); // redirects the user to the authenticated home page
          }
       }
       else
       {
        Print '<script>alert("Incorrect Password!");</script>'; // Prompts the user
        Print '<script>window.location.assign("login.php");</script>'; // redirects to login.php
       }
    }
    else
    {
        Print '<script>alert("Incorrect username!");</script>'; // Prompts the user
        Print '<script>window.location.assign("login.php");</script>'; // redirects to login.php
    }
?>

Click here for the complete checklogin.php code

Here’s the explanation of the code (Some are explained earlier so there’s no need to reiterate):

  • session_start() – Starts the session. This is usually done on authenticated pages. The reason why we used this is because this is required for the $_SESSION[”].
  • mysql_num_rows() – This returns an integer. This counts all the rows depending on the query.
  • $_SESSION[‘name’] – Serves as the session name for the entire session. This is relatively similar to public variables in object-oriented programming. We will be using this for validating whether the user is authenticated or not.

Now try to test your input with a wrong username and password. It should return the desired prompt. After testing, try inputting the correct values. It should lead you to home.php.

Note: home.php does not exist yet so it will produce an error 404.

6.)Setting up the home page for Logged-in users and Logging-out

Now that were authenticated, let now create our home page (home.php) with this following syntax:

home.php

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
   <?php
   session_start(); //starts the session
   if($_SESSION['user']){ // checks if the user is logged in  
   }
   else{
      header("location: index.php"); // redirects if user is not logged in
   }
   $user = $_SESSION['user']; //assigns user value
   ?>
    <body>
        <h2>Home Page</h2>
        
<hello>! 
 <!--Display's user name-->
        <a href="logout.php">Click here to go logout</a><br/><br/>
        <form action="add.php" method="POST">
           Add more to list: <input type="text" name="details" /> <br/>
           Public post? <input type="checkbox" name="public[]" value="yes" /> <br/>
           <input type="submit" value="Add to list"/>
        </form>
    <h2 align="center">My list</h2>
Id Details Edit Delete

</body> </html>




Here’s the explanation to the code:

  • session_start() – Basically starts the session. Required for $_SESSION[”].
  • header() – redirects the user.

Try refreshing your browser and it should look like this:

Untitled

Now that we have our home, let’s try creating our logout.php and test if the user’s session is off. What we would do is that if the user is logged-out, the user shouldn’t access home.php. So here’s the simple syntax to logout.php:

logout.php

Untitled

<?php
    session_start();
    session_destroy();
    header("location:index.php");
?>

The syntax is simple. session_destroy() simply remove’s all session’s meaning, the value of $_SESSION[”] will be removed and header() will simply redirect it to the home page.

7.)Testing Page Security

Now try refreshing home.php and click on logout. Now try Clicking on the back button of your browser and see what happens:

Untitled

As you can see, it doesn’t direct you to home.php because you are logged-out. Now for the second test, try manually inputting the address localhost/MyFirstWebsite/home.php. The same case should also happen. Since were logged-out, even a manual input of the address doesn’t access an authorized page. What we have done is a simple security mechanism wherein we redirect back unauthorized users into a public page.

Now try logging in again and let’s go back to home.php.

8.) Adding data to the list – User Access Only

In our next step, let’s create the adding of item’s to the list. As you will notice from the form, it is written as <formaction=”add.php” method=”POST”>, meaning our http post request goes to add.php and with that, we create our add.php with the following syntax:

add.php

Untitled

<?php
    session_start();
    if($_SESSION['user']){
    }
    else{ 
       header("location:index.php");
    }

    $details = mysql_real_escape_string($_POST['details']);
    $time = strftime("%X"); //time
    $date = strftime("%B %d, %Y"); //date

    Print "$time - $date - $details";
?>

Take note that this ain’t our official add.php syntax yet, I’m just going to demonstrate the time and date syntax and getting your input.

Now go back to your home.php and try to add an item then click on “Add to list”.

Untitled

This should be the following output on add.php:

Untitled

As you can see, we have our current time, date, and your input. Here’s the explanation to the code:

  • strftime() – get’s the time based on what format your placed.
  • %X – current system time.
  • %B – current system month.
  • %d – current system day.
  • %Y – current system year.

Now let’s modify our add.php and add the following data into the database together with the data from the checkbox:

add.php

Untitled

<?php
    session_start();
    if($_SESSION['user']){
    }
    else{ 
       header("location:index.php");
    }

    if($_SERVER['REQUEST_METHOD'] == "POST")
    {
       $details = mysql_real_escape_string($_POST['details']);
       $time = strftime("%X"); //time
       $date = strftime("%B %d, %Y"); //date
       $decision = "no";
   
       mysql_connect("localhost","root","") or die(mysql_error()); //Connect to server
       mysql_select_db("first_db") or die("Cannot connect to database"); //Conect to database
       foreach($_POST['public'] in $each_check) //gets the data from the checkbox
       {
          if($each_check != null){ //checks if checkbox is checked
             $decision = "yes"; // sets the value
          }
       }

       mysql_query("INSERT INTO list(details, date_posted, time_posted, public) VALUES ('$details','$date','$time','$decision')"); //SQL query
       header("location:home.php");
    }
    else
    {
       header("location:home.php");
    }
?>

Click here for the complete add.php code

Here’s a little explanation:

  • foreach() – gets the value of the checkbox. As you will notice, the checkbox format in the form isname=”checkbox[]”. To get data from checkbox, it has to be instantiated as an array. Doing so would make it possible to get data from multiple checkboxes.

Now try entering some data and click “Add to list”. In my case, I’ll just use fish again. Let’s go to our phpmyadmin and let’s see if the data has been added. Here’s the result of my case:

localhost/phpmyadmin

Untitled

9.)Displaying data in the home page

Now that we have seen that the data has been successfully added. Let’s now display the data in our home page. Let’s modify our home.php and let’s add some columns for the date:

home.php

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
   <?php
   session_start(); //starts the session
   if($_SESSION['user']){ // checks if the user is logged in  
   }
   else{
      header("location: index.php"); // redirects if user is not logged in
   }
   $user = $_SESSION['user']; //assigns user value
   ?>
    <body>
        <h2>Home Page</h2>
        
<hello>! 
 <!--Display's user name-->
        <a href="logout.php">Click here to go logout</a><br/><br/>
        <form action="add.php" method="POST">
           Add more to list: <input type="text" name="details" /> <br/>
           Public post? <input type="checkbox" name="public[]" value="yes" /> <br/>
           <input type="submit" value="Add to list"/>
        </form>
    <h2 align="center">My list</h2>
    ';
             Print '";
             Print '";
             Print '";
             Print '";
             Print '';
             Print '';
             Print '';
          Print '';
       }
    ?>
Id Details Post Time Edit Time Edit Delete Public Post
‘. $row[‘id’] . “ ‘. $row[‘details’] . “ ‘. $row[‘date_posted’] . ” – ” . $row[‘time_posted’] . “ ‘. $row[‘date_edited’] . ” – ” . $row[‘time_edited’] .” edit delete ‘. $row[‘public’] . ‘

</body> </html>

The explanation to the added code is quite simple. It just basically displays the data coming from the while loop. It has been explained earlier in our tutorial so I believe that by this point, you should have understood the process of getting the data in the query. Going back to the browser, try refreshing your home.php and see what happens:

Untitled

It should now display that data. From our CRUD checklist, we have now accomplished Create and Read. Next is to update(edit) and delete information. If you will notice we have edit and delete links displayed on the column. I’ll add another data to the list named “tuna” to have another example and this time, it’s privacy to no:

Untitled

10.) Editing Data

Let’s now try editing our data and to do that we will use a new functionality called “GET“. With our previous methods, we have been using POST as our http request but this time, let’s use GET for editing and deleting records. To start of, let’s modify our home.php and add a little code to 2 columns:




home.php

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
   <?php
   session_start(); //starts the session
   if($_SESSION['user']){ // checks if the user is logged in  
   }
   else{
      header("location: index.php"); // redirects if user is not logged in
   }
   $user = $_SESSION['user']; //assigns user value
   ?>
    <body>
        <h2>Home Page</h2>
        
<hello>! 
 <!--Display's user name-->
        <a href="logout.php">Click here to go logout</a><br/><br/>
        <form action="add.php" method="POST">
           Add more to list: <input type="text" name="details" /> <br/>
           Public post? <input type="checkbox" name="public[]" value="yes" /> <br/>
           <input type="submit" value="Add to list"/>
        </form>
    <h2 align="center">My list</h2>
    ';
             Print '";
             Print '";
             Print '";
             Print '";
             Print '';
             Print '';
             Print '';
          Print '';
       }
    ?>
Id Details Post Time Edit Time Edit Delete Public Post
‘. $row[‘id’] . “ ‘. $row[‘details’] . “ ‘. $row[‘date_posted’] . ” – ” . $row[‘time_posted’] . “ ‘. $row[‘date_edited’] . ” – ” . $row[‘time_edited’] .” edit delete ‘. $row[‘public’] . ‘

</body> </html>

If you have noticed, we only added URL parameter for the edit and delete links namely id. We will be using this later to handle thee data. The reason why we use id is because it’s a unique identifier. It is possible for the person to have enter the same data so it’s not recommended to use the details as a mean for manipulation later on.

Try putting your cursor into the edit link and you will see the value of the id onthe lower left:

Untitled

Now that we have that, let’s try creating our edit.php and let’s try to get the data from there:

edit.php

lines 1 – 42

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
   <?php
   session_start(); //starts the session
   if($_SESSION['user']){ // checks if the user is logged in  
   }
   else{
      header("location: index.php"); // redirects if user is not logged in
   }
   $user = $_SESSION['user']; //assigns user value
   ?>
    <body>
        <h2>Home Page</h2>
        
<hello>! 
 <!--Display's user name-->
        <a href="logout.php">Click here to go logout</a><br/><br/>
        <a href="home.php">Return to home page</a>
    <h2 align="center">Currently Selected</h2>
     0)
           {
              while($row = mysql_fetch_array($query))
              {

Some explanations to the code:
  • !empty() – a method that checks if the value is not empty. The syntax can be reversed if you want to check if it’s empty by removing the explanation point (!), therefore it’s syntax would be empty().
  • $_GET[”] – Used to get the value from the parameter. In our case, we use id as our URL parameter so the syntax would be $_GET[‘id’].
  • $id_exists – the variable that checks whether the given id exists.
  • $_SESSION[‘id’] – we place the value of id into session to use it on another file.

lines 42 – 76 Untitled

Print "<tr>";
   Print '

“; Print ‘”; Print ‘”; Print ‘”; Print ‘”; Print “”; } } else { $id_exists = false; } } ?>

Id Details Post Time Edit Time Public Post
‘ . $row[‘id’] . “ ‘ . $row[‘details’] . “ ‘ . $row[‘date_posted’] . ” – ” . $row[‘time_posted’].” ‘ . $row[‘date_edited’] . ” – ” . $row[‘time_edited’].” ‘ . $row[‘public’] . “

<br/> Enter new detail: <input type=”text” name=”details”/> <br/> public post? <input type=”checkbox name=”public[]” value=”yes”/> <input type=”submit” value=”Update List”/> </form> ‘; } else { <h2 align=”center”>There is not data to be edited.</h2> } ?> </body> </html> Click here for the complete edit.php code (Only refer to the front-end part. Github Sourced)

The reason why we are putting the variable $id_exists is because in case the user modifies the URL parameter into a non-existing number(in our case we only have 2 rows/id’s), we can display a prompt in which the data doesn’t exist.




Now try clicking the edit link into the first row and it should display like this:

Untitled

Complete edit.php code:

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
   <?php
   session_start(); //starts the session
   if($_SESSION['user']){ // checks if the user is logged in  
   }
   else{
      header("location: index.php"); // redirects if user is not logged in
   }
   $user = $_SESSION['user']; //assigns user value
   ?>
    <body>
        <h2>Home Page</h2>
        
<hello>! 
 <!--Display's user name-->
        <a href="logout.php">Click here to go logout</a><br/><br/>
        <a href="home.php">Return to home page</a>
    <h2 align="center">Currently Selected</h2>
     0)
           {
              while($row = mysql_fetch_array($query))
              {
                  Print "";
                     Print '";
                     Print '";
                     Print '";
                     Print '";
                     Print '";
                  Print "";
               }
            }
            else
            {
               $id_exists = false;
            }
         }
      ?>
Id Details Post Time Edit Time Public Post
‘ . $row[‘id’] . “ ‘ . $row[‘details’] . “ ‘ . $row[‘date_posted’] . ” – ” . $row[‘time_posted’].” ‘ . $row[‘date_edited’] . ” – ” . $row[‘time_edited’].” ‘ . $row[‘public’] . “

<br/> Enter new detail: <input type=”text” name=”details”/> <br/> public post? <input type=”checkbox name=”public[]” value=”yes”/> <input type=”submit” value=”Update List”/> </form> ‘; } else { <h2 align=”center”>There is not data to be edited.</h2> } ?> </body> </html> Click here for the complete edit.php code (Only refer to the front-end code. Github sourced)

Let’s try modifying the URL parameter by removing ?id=1 and now should result tolocalhost/MyFirstWebsite/edit.php and it should result like this:

Untitled

Now try putting a value that is greater than the id number, in our case, let’s try 5 and it should result like this:

localhost/MyFirstWebsite/edit.php?id=5

Untitled

Now that we secured our URL parameters, lets now place the edit syntax. Let’s go back to edit.php and add some following code to update the information to the database:

edit.php

Untitled

<?php
   if($_SERVER['REQUEST_METHOD'] == "POST")
   {
      mysql_connect("localhost", "root", "") or die (mysql_error()); //Connect to server
      mysql_select_db("first_db") or die ("Cannot connect to database"); //Connect to database
      $details = mysql_real_escape_string($_POST['details']);
      $public = "no";
      $id = $_SESSION['id'];
      $time = strftime("%X"); //time
      $date = strftime("%B %D, %Y"); //date

      foreach($_POST['public'] as $list)
      {
         if($list != null)
         {
            $public = "yes";
         }
      }
      mysql_query("UPDATE list SET details='$details', public='$public', date_edited='$date', time_edited='$time' WHERE id='$id'");
      header("location:home.php");
   }
?>

Click here for the complete edit.php code (Github)

Now try refreshing and go back to the edit page. Let’s try a different data. In my case, I’ll be using “Salmon” and change it to non-public:

edit.php?id=1

Untitled

Go ahead and click Update list and you should be redirected to home.php and see the updated list.

Untitled

Now, we have a time and date of edit displayed on the Edit Time column. Our privacy has been set now to non-public and the value has changed into Salmon.

Congratulations! We have now done the edit function!

11.) Deleting data

Looking back to the CRUD, we have now done creating(adding), reading(displaying), and updating(editing) records. Now for the last part, deleting records. For this part it’s just relatively the same as what we have done on edit but what differs is just the SQL statement. Instead of using UPDATE, we will be using the DELETE syntax. In deleting records, we have to prompt people making sure that they’d really want to delete the record so we will be adding a little javascript in home.php. To do that, let’s modify our code and add some int home.php




home.php

Untitled

<table border="1px" width="100%">
    
       Id
       Details
       Post Time
       Edit Time
       Edit
       Delete
       Public Post
    
    ';
             Print ''. $row['id'] . "";
             Print ''. $row['details'] . "";
             Print ''. $row['date_posted'] . " - " . $row['time_posted'] . "";
             Print ''. $row['date_edited'] . " - " . $row['time_edited'] ."";
             Print '<a href="edit.php?id='.$row['id'].'">edit';
             Print '<a href="#" nclick="myfunction('.$row['id'].')">delete</a>';
             Print ''. $row['public'] . '';
          Print '';
       }
    ?>



<script>
    function myFunction(id)
    {
       var r = confirm("Are you sure you want to delete this record?");
       if(r == true)
       {
          window.location.assign("delete.php?id=" + id);
       }
    }
</script>

Click here for the complete home.php code

As you have noticed, we edited the link for the delete. We changed href into “#” and added and onclick function for Javascript for the method of myFunction and inside it’s parameter is the id of the row. Below the table written is the Javascript syntax wherein it prompts the user if he/she want’s to delete the record. If the user confirms, the page then directs to delete.php together embedded with the value of the id. Now let’s create delete.php and here’s the following syntax:

delete.php

Untitled

<?php
    session_start(); //starts the session
    if($_SESSION['user']){ //checks if user is logged in
    }
    else {
       header("location:index.php"); //redirects if user is not logged in.
    }

    if($_SERVER['REQUEST_METHOD'] == "GET")
    {
       mysql_connect("localhost", "root", "") or die(mysql_error()); //connect to server
       mysql_select_db("first_db") or die("cannot connect to database"); //Connect to database
       $id = $_GET['id'];
       mysql_query("DELETE FROM list WHERE id='$id'");
       header("location:home.php");
    }
?>

Click here for the complete delete.php code

The code is just simple and the syntax are also the ones that we used before but noticed we have changed our request method into GET. We are now using the GET request since we have a URL parameter. Now try refreshinghome.php and let’s try deleting the first record. This should be the result:

Prompting:

Untitled

End-result:

Untitled

Congratulations! Now we have now officially completed our CRUD statements!

12.) Displaying public data

Now for the last part, displaying public data. We will be displaying data that’s been set to yes in our index.php, in which is a page for non-authenticated users. It’s very simple. We just have to edit our index.php and add a some php code and table. Here’s our updated index.php:

index.php

Untitled

Now log-out and see your default page. It should look something like this:

Untitled

Note: You won’t see the data yet since we haven’t set any information to public.

Now let’s log-in again and this time, let’s add some more data. In my case I’ve added the following:

  • Salad – public
  • Corn – non-public
  • Pasta – public
  • Chicken – public
  • Spaghetti – non-public

With a total of 6 data’s with 3 of each privacy setting:

home.php

Untitled

Now let’s log-out and see our default page(index.php). It should now look like this:

index.php

Untitled

As you can see, it only display’s data that are set to public.

Congratulations! We have finally finished the tutorials for this session!

13.) De-briefing and Summary

In the end, you should have the following files:

Untitled

As I mentioned earlier, I’ll be uploading the finished product. Click here

I also uploaded the sql file for the database in case you want to use the exact data that I have. To import the sql file, you can just simply click on export and select the sql file but make sure to create the database first. If you like, I can create a separate blog for that. Just let me know in the comments section.

Anticipated questions

Here are the questions that I think you will be asking. I tried to anticipate these to avoid confusions:

  • Whenever I register a new user, the same list appear. I was expecting for each different user, there would be a separate list for them. Did I do something wrong?

That’s actually a good question. As you can see, I’m only teaching BASIC CRUD functionalities, authentication, and security not a membership system. Creating a separate list per user requires a separate table for each of them. So the logic behind it is for each time after you insert data, you will insert it in another table and have it relationships to one another. You can use the CREATE syntax for creating a separate table for the user which goes something like this:

Create table $username (column1 int auto_increment, column2 varchar(50), etc…)

You can click here for the Create table syntax.

The reason why I didn’t do that part is because your gonna have to do a lot of querying and it would make my code look complicating which can consumes a lot of time developing it so it’s definitely out of my scope. It would be better if you just try it out yourself and figure out the way. After all, everything you need is already in this blog.

  • Would it be easier to use master pages? Because i’ve noticed you had to re-write the server and database connection all over again for each page

Yes, it is easier to use master pages. The reason why I didn’t use it is for our readers to easily understand the logic behind it. Maser pages can make it a bit confusing for starters.

  • Why not use a framework? I bet that would look neat and easy.

Then again, I mentioned in the title Creating your First PHP Program FROM SCRATCH. It’s nice to start of from nothing that from a “template” so that our reader would know the code by heart.

  • I know that this is might be an old way of developing PHP. I’ve heard that there are new features released.

I only presented based on my mastery. I’ve been working with PHP for a long time now and I might not heard about the new features. If you think the new one makes it look good then try it out then.

  • Why not create a separate file for the CSS and Javascript?

Simple, i’m only demonstrating you about the functionalities. Were more on the back-end code rather than the front-end. I really didn’t focused on the design. If you ask how to design your code with the PHP, well it’s as easy as styling a regular HTML file.

Well I guess that concludes everything. Thanks guys I hope you learned something from this topic.

Original article has been published at Code project

 

 

html5-and-css3-642x321

10 Great HTML5 and CSS3 Tutorials To Master Web Development

html5-and-css3-642x321HTML5 is the latest version of the amazing markup language. It’s a term for the next generation of web apps, how functionality will be expanded with better markup HTML, better style CSS, and better interactivity JavaScript.

HTML5 was introduced in order to support various features that the modern day websites require. To begin with HTML5 supports the multimedia; in fact this language support both audio and video files to be played in a browser. Furthermore HTML5 offers support for canvas areas like interactive animated infographic.



On top of this, HTML5 supports the Geolocation API to identify user’s location and allows you to add valid data attributes, which helps in storing the data without affecting the web page UI. HTML5 made a breakthrough by allowing web applications to store data in the browser.

These data attributes can be added in a hidden manner from the user and can be later used by JQuery or your JavaScript functions.

Have a look at these step by step tutorials to learn and handle HTML5 and CSS3 markup languages.

1) How to build HTML5/CSS3 Webpages

Nowadays web developers are trying to build highly creative websites that capture the attention of visitors. They are many rooms to explore to understand the new features in HTML5 and CSS3. In this guide you will figure out the basic structure of the HTML5 and CSS3 markup languages, so you will have the skills and the ability to make compelling and beautiful web pages.

guide2

2) HTML5 Cheat Sheet

Web developers often use HTML and CSS Cheat sheet during their work. For frontend development, cheat sheets are especially helpful as most of us cannot commit every snippet and tag to memory. This cheat sheet is a good reference aid for your work because it’s a beautiful visual grid that contains a list of all HTML5 tags and of their related meaning.

html sheet2

3) How to Code a Homepage Template with HTML5 and CSS3

This tutorial has been created to guide you through the process of converting one of a popular PSD homepage template on Media tool into fully coded HTML and CSS. In this tutorial you will learn from setting up the folder structure, exporting the assets dissecting and adding the CSS styles.

simply4

4) Wrapping Content In Shapes With CSS3

CSS Shapes allow web designers to wrap content around custom paths, like circles, and ellipse thus breaking free from the constraints of the rectangle. It will also help you to rapidly create magazine-quality layouts on web pages, with little PhotoShop trickiness required. If you want to wrap your content in a custom shape, but you don’t know how to do it then here is a tutorial to learn the tricks.



magazine-layout2

5) Create Cool Image Captions with CSS3

In this tutorial we will show you how to create a cool image captions with various transitions using CSS3 with a stylish Box style effects that give an awesome look to your website. With CSS3 you can make really nice effects, no need to implement jQuery for that.

caption

6) HTML5 : Positioning with Geolocation

The Geolocation API of HTML5 helps in identifying the user’s location, which can be used to provide location specific information to the user. There are many techniques used to identify the location of the user. In this tutorial you will learn the Geolocation capabilities of HTML5 and the basic principles needed to take advantage of them in your next HTML5 app.

Geolocation-API

7) Turn Your Images Into Polaroids with CSS3

Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Through a combination of browser-specific CSS (2 and 3) integration and some basic styling you will learn how to turn a regular old images into cool looking Polaroid style images.



images-polaroids-final

8) Prism Effect Slider with Canvas

This tutorial will teach you how to construct a simple slider with prism effect. You will be using HTML5 and a plain JavaScript.

prism effect

9) Responsive CSS Timeline with 3D Effect

In this tutorial we will show you how to create an experimental CSS-only timeline with a 3D effect. The idea is to expand a content area when the associated radio input is selected.

3DTimeline

10) Creating a WordPress Theme From Static HTML

In this tutorial you will learn how to create a WordPress Theme from Static HTML and CSS files. You will learn how to create the template files, how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the valid code and the correct classes were being used. This article is part of a series called creating a WordPress theme from static HTML.



WordPress-HTML5

Original article has been published at designhook

diffuse-shadow-UIs-642x321

10 Fresh Examples of Diffuse Shadow UIs

It seems like some of web design trends aren’t going anywhere soon. We’ve seen Material Design initiation and evolution, advanced animations and microinteractions, vibrant color schemes, beautiful typography, great use of minimalism, new responsive design technique and tools and much more interesting stuff. We also noticed a new trend that is making its way through web design community: diffuse shadow design.diffuse-shadow-UIs-642x321




To better understand and analyze this hot design trend, we’ve comprised a list of 10 fresh UIs with diffuse shadows. Let’s have a look:

Dribbble shots UI by Worawaluns

Dribbble-shots-UI

IKEA Get Growing! by Jason Zigrino

IKEA-Get-Growing

Customize Product by Goutham

customize-product

Movie Streaming by Dwinawan Hariwijaya

Movie-Streaming

Nike Product Page by Ilja Miskov





Nike-Product-Page

Calling Card by Willionaire

calling-cards

Book Store Website by Dwinawan Hariwijaya

Book-Store-Website

Fashion App by Willionaire

Fashion-App

Calendar by Goutham

calendar

Paperpillar Studio Landing Page by Ghani Pradita





Studio-Landing-Page
Have you spotted some other cool examples? Let us know by inserting a link in the comments. Cover image source.
Original article has been published at designhook

28786.pic

The 12 Best and Worst Logo Redesigns of 2015

As we enter into the final few months of the year, some people like to reflect on what they’ve accomplished and how they’ve grown. Me? I’m a logo nerd, so instead of self reflection, I like to look back and think about which brands have changed. Some of the biggest brands in the world updated their logos this year and as always, the reviews are pretty mixed. Let’s take a look.

Be sure to check out our list of the best and worst logo redesigns from 2015 as well.

1. CareerBuilder

Let’s start this off with a bang. CareerBuilder might win the prize for the most universally hated new logo of 2015. Their old logo was a fairly simple, condensed wordmark with a nice color scheme. By contrast, their new logo is somewhat of a mess of colors, icons, typography styles and conflicting ideas.



logos

Reactions

A poll on UnderConsideration allowed respondents to vote on whether the new logo was “Great,” “Fine,” or “Bad.” 93% voted “Bad” for the icon and 89% voted “Bad” for the wordmark (each question had just under 900 votes total). The reactions on Twitter were about the same:

What Happened?

It’s impossible to say for certain what made this redesign go so wrong, but my guess is that it’s a classic example of a company simply expecting way too much from a logo and attempting to pack it so full of meaning that it just becomes cluttered and confusing. The list of things that the logo is meant to represent is pretty long:

  1. The matching of the right talent with the right opportunity
  2. Actionable intelligence and customized insights
  3. The smooth flow of data between systems and platforms
  4. Boldness
  5. Motivating
  6. Dependable
  7. Trustworthy
  8. Professional
  9. “The mark is intended to flip to emphasize the ‘T’ when referring to CareerBuilder’s pre-hire platform components, Talentstream Technologies.”

The creative director on the project even alludes to this idea of too much complexity in her post on the logo: “Yes, this is a lot to include in a single logo. The project constraints, however, called for this level of complexity, requiring key inspirations be equally represented to highlight the company’s transformation.”

Translation: the people in charge wanted too much from one logo.

2. Verizon

Verizon’s logo redesign is kind of the opposite of CareerBuilder’s. It’s a prime example of a strong trend that you’ll see throughout this post and across many top brands. Last year, logo design went flat. This year, designers are going much further than killing gradients and shadows, they’re killing everything. Graphics? Out. Serifs? Who needs ’em? Helvetica Bold? Yes please.

Verizon’s original logo was pretty dynamic. The italics and zooming red lines gave it a sense of motion and excitement. The new one is pretty plain by comparison, which isn’t necessarily a bad thing.

logos

I’ve actually always hated the original and definitely agree that it needed an update. When I look at the new one though, it’s hard to fight that sense of being disappointed in something so generic (even though that’s probably exactly what they need).

Reactions

Reactions were a bit mixed for this one with plenty of people chiming in on all sides. The average response is somewhere between “meh” and “better…” Gizmodo has this to say about the new design:

“The new logo is not particularly interesting—it’s part New York City subway, part nuGap, part check this box to accept terms & conditions. But who cares?”

3. Google

This is the one you’ve been waiting for. I’m not sure any logo redesign in history has received as much press, social media coverage, and debate as Google’s recent overhaul. Here again we see the “undesign” trend going strong.

logos

Personally, I’m a bit sad to see those serifs go and I’m always hesitant to praise any logo design that feels like someone opened Photoshop, picked a font, typed a word, and called it a day. That being said, this new logo grew on me pretty quickly and I’m confident that in five years I’ll look back and think the old version looks dated and awful.




If anyone can argue that they need a simple, timeless, sans-serif wordmark, I think it’s the company that is known for bringing the Internet to the world as a bunch of plain text results on a white page. The new logo is clean and straightforward, with just a little playful disrespect (that’s the part that’s driving typography designers nuts). Now that it’s had some time so sit with me, I really think it nearly perfectly embodies Google as a company.

Reactions

Medium has definitely become the place for thoughtful design posts and critiques, and its faithful users have been cranking out Google logo reviews at full blast.

Gerry Leonidas: “That the logo went from a flawed but characterful modulated style all the way to a geometric sans suggests that the branding agency had neither good ideas, nor typographic expertise.”

Simon Darby: “I think I speak for most of the world, when I say the new logo is out of balance by just one character. The second ‘g’ looks like it was created by a separate design and development team.”

WebDesignerDepot: The new design is a vast improvement aesthetically, but it’s unlikely it will stand the test of time because it’s too now, too of the moment. This is Google’s 2015–2016 logo.

4. Facebook

In theory, Facebook updating their logo is a situation that should be every bit as explosive as the Google change. Any time Facebook changes the slightest thing, literally millions of users threaten revolt and exclaim their undying love to the previous layout (which they hated when it rolled out too).

Facebook played it fairly safe though with a gentle refining that likely went completely unnoticed by 90% of the 1.5 billion people using the site.

logos

Once again, we see a brand abandoning any notions of a unique identity by smoothing out all the quirks and personality present in their logo. The 2015 logo mantra is, without a doubt, “the plainer the better.”

The old logo definitely had some quirkiness to it, but it gave it character. There were some nice touches that I really miss, such as the interplay of the slants on the “f” and “a”.

logos

Confusingly, the new logo keeps the slanted “f”, but without the accompanying “a” for balance, it doesn’t really make sense. Why keep the awkward slant?
logos

Reactions

A lot of the tweets about Facebook’s new logo were aimed at simply getting people to notice the change.

View image on Twitter

View image on Twitter

View image on Twitter

View image on Twitter

5. Life is Good

If you live in the U.S., Life is Good is a brand that you’re probably familiar with, even if you don’t know it. From t-shirts to Jeep stickers, you’ve no doubt seen these happy little stick figures chilling out or engaging in various outdoor activities:

logos

As you can see, this is a brand that is absolutely built on a fun, messy aesthetic. Even such an openly wacky brand couldn’t resist the lure of the 2015 undesign trend. They’ve traded in their messy text and are trying to look more like just about everyone else with a bold sans-serif typeface.

logos

Obviously, their old logo is kind of ugly, but it was sort of an intentional ugly that played up the friendly aspect. The new logo admittedly attempts to retain a bit of this personality with the messy circle and heavily rounded text.

Personally, I really like the imperfect circle and the new color scheme. They’re both a big improvement. I do find myself wishing the typography honored the old brand a bit more though.

Here’s what the Life is Good Twitter account had to say about the “optimistic” new logo.

This one received some pretty brutal ratings on UnderConsideration with over 77% of respondents putting it in the “bad” category. A cursory read through reveals that most (but not all) tweets about the update were negative as well.

6. Los Angeles Clippers

The new Clippers logo drops the serifs, but they’ve done anything but simplify the rest. The old logo has a nice, compact badge quality to it with a retro vibe that’s attractive without feeling ancient. Conceptually, it’s pretty simple: a flying basketball with some text over it.




By contrast, the new logo has quite a few things going on. In addition to the super condensed and slightly distorted Clippers text, there’s the basketball with the “LAC” in it. The big lines under the ball give it a sense of motion, like it’s bouncing. But it’s not just a bouncing basketball, it’s also cleverly styled to look like a basketball court.

logos

I actually really like all the ideas behind the various pieces new logo without necessarily loving the end result as a whole. It’s not terrible by any means, but I think some further refinement could’ve made it great.

Reactions

I’ll be honest, I laughed at the new IHOP logo when I first saw it. It felt like some creepy clown face concept that just went all wrong. That being said, this one has really grown on me. Now when I look at it, it feels happy and reminds me of a smiley face pancake, which is exactly what they were going for.

logos

This teaches us an important lesson. Change can be jarring. If you hate a new logo design, it could simply be your brain grappling with something new. Try waiting a few weeks before you make a firm decision about hating or loving it. You might find yourself warming up to a concept that you previously couldn’t stand.

Reactions

If you make your logo in any way resemble a clown, you have to accept the fact that people think clowns are creepy, and that’s certainly the direction you get from a lot of the Twitter reviews for IHOP’s new logo.

View image on Twitter

8. Tokyo 2020 Olympics

This one isn’t technically a redesign of an old logo, but it was such a disaster that it is now getting its own redesign, so I’m tossing it in as an honorable mention.

The back story here is that each round of Olympics gets its own logo. From my perspective, these logos are almost always dreadful (remember that London 2012 mess?). For this reason, when I saw the Tokyo 2020 logo, I was pleasantly surprised. The modern art vibe won me over instantly. The shape is all at once reminiscent of a “T”, a “2”, and with the circle, a “0” (Tokyo 2020, get it?). I thought it was beautiful.



Unfortunately, Théâtre de Liège in Belgium also loved the unique shape… when they put it in their logo years before.

logos

It’s tricky to say whether we’re seeing inspiration, coincidence, or outright plagiarism. The obvious similarities are striking though, and that caused quite the uproar in the design community. It quickly led to a lawsuit and a complete scrapping of the Olympic logo.

Reactions

Photo published for Tokyo’s Olympics Logo Is a Confusing Geometric Mess

Tokyo’s Olympics Logo Is a Confusing Geometric Mess

It’s stiff, bland, and spiritless. More than that, it’s unclear what it’s meant to symbolize.

wired.com

Photo published for Tokyo’s Olympics Logo Is a Confusing Geometric Mess

Tokyo’s Olympics Logo Is a Confusing Geometric Mess

It’s stiff, bland, and spiritless. More than that, it’s unclear what it’s meant to symbolize.

View image on Twitter

View image on Twitter

9. Microsoft Expl.. Err… Edge

Microsoft is killing their infamous browser with the little “e” logo… and launching a new browser with a little “e” logo. They’ve gone from Explorer to Edge. I’m counting that as a rebrand.

I actually wrote a whole post about the new edge logo, titled “Why The Ugly New Microsoft Edge Logo Is Genius.” The idea here is simple: yes, Edge’s logo is awkward and ugly, but it’s just familiar enough to prevent confusion with literally millions of users who only one thing about their computer: “the e icon = the Internet.” Just think of all the customer support phone calls that won’t have to happen.



logos

Reactions

10. Opera

While we’re on the subject of browser logos, Opera just rolled out a significant update to their iconic “O” logo. In recent years, they’ve played around with various levels of shading, shadows, and bevel while maintaining the same basic O shape. This time around, they’ve gone with a 3D ring shape with a very subtle (intentional?) nod to the original O in the negative space.

logos

The new logo comes with a full new brand system with lots of supporting graphics and usage guidelines. Taking it all in, it seems like a well executed update.

logos

As a bonus, my wife noticed that the new Opera logo looks a lot less like the “Oprah” Magazine logo than the previous version. As soon as I compared the two, I realized that her observation was pretty dead on.

logos

Reactions

Photo published for Meet Opera's new brand identity

Meet Opera’s new brand identity

Today Opera is announcing its new brand identity. Meet the new Opera logo and read what else is part of the rebranding.

opera.com

Photo published for Meet Opera's new brand identity

Meet Opera’s new brand identity

Today Opera is announcing its new brand identity. Meet the new Opera logo and read what else is part of the rebranding.

opera.com

 11. SpotifyIn June, Spotify changed their brand green… and broke the Internet.

logos

The seemingly subtle update was actually part of some really great branding exploration that included lots of bold color experiments.

logos
logos



Pretty cool right? It doesn’t matter though. All people saw was that new green, and they freaked out.

Reactions

The new green was the topic of the week, getting tons of coverage on social media and tech blogs:

12. OpenTable

To end on a positive note, we’ll take a look at one final 2015 logo design: OpenTable. This is one redesign where I think the undesign trend paid off nicely. The old logo was pretty rough around the edges. Even though it nicely communicated the concept of the app, the 3D effect and quirky condensed type really feel like a dated aesthetic from the early days of when iPhone apps were just taking off.

The new logo feels simpler and more professional while still managing to steer clear of generic.

logos

The O shape that doubles as a table with someone sitting at it works well. Their new brand direction and language is all about bringing people together around a table, a concept played out nicely in the animated version of the logo.

logos

Reactions

The reviews on Twitter are pretty mixed for the OpenTable rebrand, with lots of people going the “it looks like…” route.

Pro Tip: Give Logo Designers a Break

Here’s the deal: logo design is hard. Really, really hard. I know because I’m tackling two logo design projects at the moment and I fully admit that it is far easier to critique someone else’s logo work than to build a great logo, or heck even a decent logo, yourself.

So even as we scratch our heads at projects like Career Builder’s and wonder what went wrong, let’s all admit that summing up an entire brand in one nice little icon or wordmark that pleases both your client and the social media firing squad is nearly impossible. All the designers behind the projects above faced a lot of challenges and I commend them all for tackling projects that are so open to the scrutiny of others.

Note:- Original article has been published at Creative bloq