What should be the design of your WebApp?

Jakob Nielson states: "there are essentially two basic approaches to design: the artistic ideal of expressing yourself and the engineering ideal of solving a problem for a customer." The first approach was very common in the early era of website development, but it is useful only when content is small. When your web app is complex and consists of hundreds or thousands of contents and functions then Nielson's second approach- "the engineering ideal of solving a problem for a customer" becomes more crucial.

Both generic and engineering approach is important when we think about web app design.

Every person has different test when they navigate any page. Some like only text, some low graphics, some heavy graphics and some people may have some other issues. So what kind of tools or things should be used in any website, so that it can be suitable for all type of people.

Jeff Offut mention that the success of any web application depends on 'Reliability, Usability, Security, Availability, Maintainability, Scalability, Performance and Time-to-market'. But this is not the complete list of web app quality.

Jean Kaiser also mention that web site should be -Simple, Consistent, Robust, Navigable, Compatible and should have visual appeal.

Heavy text on web page slow down the reading capacity of user than reading any hardcopy. Avoid under construction pages and make text available in available window, prefer not to use scrollable text. Menus should be consistent.

There is famous line that "beauty exists in the eye of the beholder". So that design should be aesthetic. Emphasis should be on content. 80 percent of website should be consist of content and 20 percent should be on other thing like design, menu and navigation.

Graphic deign is also play a important role in design of any website. Graphic design covers the every aspect of look & feel. In graphic design we should consider the layout of page font type, colour and size.

James Ross - president of Codcow says that web design is not only writing code and design layout, it is also about to satisfying the client and make them understand that you are a web developer. He gives a list of things that what web developer should do, when interact with client.

1. Web design is not only about technical skills, it is also about creativity and inspiration.

Web design requires talent, skills, knowledge and experience and it is not a easy task. Make this clear to the client.

2. Listen to them, but also make them listen to you too.

Web developer should use data and statistics to prove your point with clients. You are the expert of this field an client pay for this and makes rules. 

3. Understand the difference between feedback and impositions.

If any impositions is not good for the site then stop the client to do so. But feedback is always welcome.

4. Fighting with the stereotypes.

Print design and web design are very different from each other.

5. There is no such thing as a minor change.

There is no minor change in web design and it may takes hour of work. Deadline may change because of minor change.

6. Communication is the king.
Communication can solve that what client exactly want.

Another aspect of web design is some more technical. If server goes down, so how long until you realise it. For that you should make necessary arrangement and use tools.

Icons and graphical link should be clickable by bevelling the edge to give the image three dimensional look. For text based link, colour should be used to identify navigation link and visited navigation link should also be indicated. Such kind of rules make navigation user friendly.

Apart from above web developer should also consider about content design, architecture design and component design.

Steve Jobs also stats that "Design is not just what its look like and feel like. Design is how it works"

A picture can speak a thousand words, and choosing the right images for your website can help with brand positioning and connecting with your target audience. But make sure that use of images should not slow down your website  for loading.

Read XML file data with regular expression using PHP.

Reading XML file with regular expression is useful when there is some minor mistake in your XML file.( like code which write the data on XML in my previous post).

<?php $xml = "";

 $f = fopen( 'data.xml', 'r' );

 while( $data = fread( $f, 4096 ) ) { $xml .= $data; } fclose( $f );

 preg_match_all( "/\<book\>(.*?)\<\/book\>/s", $xml, $bookblocks );

?>

 <table>

 <?php 

foreach( $bookblocks[1] as $block ) { 

?>

 <tr><td>

 <?php

 preg_match_all( "/\<textbox\>(.*?)\<\/textbox\>/", $block, $author );

 preg_match_all( "/\<name\>(.*?)\<\/name\>/", $block, $title );

 preg_match_all( "/\<file\>(.*?)\<\/file\>/", $block, $publisher );

 echo( $title[1][0]." - ".$author[1][0]." - ". $publisher[1][0]."\n" ); 

echo "\n";

 ?> 

</td></tr>

</table>

 <?php

 } 

?>

Above code read the file in one string. And using regex function this code reads all book element.

Drawback of regular expression is it does not check the XML is well formed or not. Such kind of code can not be accepted when XML directly come from user.

File upload in a folder and save/write attributes in XML file in PHP.

When we develop a web application without using a database, so it becomes very difficult to save any attributes which can be used later for show any item on page. XML could be better option to save data and read data where database is not available. We can write values in XML file and retrieve from that file.

XML database is document oriented database and fall in NoSql category of database. We don't go into concept of this database. Just look a example of saving data in XML database using PHP as well as how we can upload file in a folder and save its some attribute value in XML file/database.

Let see by an example.

First create a form that can upload a file with some its value.

<form method="post" action="profile.php" enctype="multipart/form-data">
<centet>
    <input type="hidden" name="create_xml" value="true">
    <label for="name">Article Title: </label>&nbsp;&nbsp <input type="text" name="name"><br><br>
    <label for="textbox">Write something: </label>&nbsp;&nbsp <textarea name="textbox" rows="5" cols="40"></textarea><br><br>
    <label for="fileToUpload">Upload a Article(PDF-file:) </label>&nbsp;&nbsp 
    <input type="file" name="file" id="file-select"><br><br>
    <label for="filenane">Article File Name </label><input type="text" name="filename" placeholder="Enter the name of your Article">&nbsp;&nbsp <br><br>
<input type="submit" value="Submit Article" name="submit">
<center>
</form>

Now write PHP code to receive the form data and upload file to folder. (I assume that you are aware of sending and receiving values from form.)

Create a folder "upload" in your project root directory.

To upload folder -

if(isset($_POST['submit']))
{
$name=$_POST['name'];
$textbox=$_POST['textbox'];
$filename=$_POST['filename'];
$file=basename( $_FILES['file']['name']);
        $targetfolder = "upload/";

 $targetfolder = $targetfolder . basename( $_FILES['file']['name']) ;

if(move_uploaded_file($_FILES['file']['tmp_name'], $targetfolder))

 {
                echo "<script>";
  echo "alert('Your file is uploaded succesfully');";
  echo " window.location.href='profile.php';";
  echo "</script>";
         echo "The file ". basename( $_FILES['file']['name']). " is uploaded";
  }
 else {
  echo "<script>";
  echo "alert('Error !!!!! Please try again');";
  echo " window.location.href='profile.php';";
  echo "</script>";
  }

} 

Now PHP code which create XML file to write data in append mode.

$books = array();
$books [] = array(
'name' => $name,
'textbox' => $textbox,
'filename' => $filename,
'file'=> $file
);

$doc = new DOMDocument();
$doc->formatOutput = true;

$r = $doc->createElement( "books" );
$doc->appendChild( $r );

foreach( $books as $book )
{
$b = $doc->createElement( "book" );

$author = $doc->createElement( "textbox" );
$author->appendChild(
$doc->createTextNode( $book['textbox'] )
);
$b->appendChild( $author );

$title = $doc->createElement( "name" );
$title->appendChild(
$doc->createTextNode( $book['name'] )
);
$b->appendChild( $title );

$publisher = $doc->createElement( "filename" );
$publisher->appendChild(
$doc->createTextNode( $book['filename'] )
);
$b->appendChild( $publisher );

$publisher1 = $doc->createElement( "file" );
$publisher1->appendChild(
$doc->createTextNode( $book['file'] )
);
$b->appendChild( $publisher1 );

$r->appendChild( $b );
}

 $handle=fopen("data.xml","a+");
fwrite($handle,$doc->saveXML());
fclose($handle);

Note that this code has a demerit that it always add XML start declaration tag, when we repeatedly write the data on same file. So what is the solution to parse or read this file? Solution is to read this file using regular expression. Read this post. 

Now complete working code -

<form method="post" action="profile.php" enctype="multipart/form-data">

<centet>

<br>

    <input type="hidden" name="create_xml" value="true">

    <label for="name">Article Title: </label>&nbsp;&nbsp <input type="text" name="name"><br><br>

    <label for="textbox">Write something: </label>&nbsp;&nbsp <textarea name="textbox" rows="5" cols="40"></textarea><br><br>

    <label for="fileToUpload">Upload a Article(PDF-file:) </label>&nbsp;&nbsp 

    <input type="file" name="file" id="file-select"><br><br>

    <label for="filenane">Article File Name </label><input type="text" name="filename" placeholder="Enter the name of your Article">&nbsp;&nbsp <br><br>

<input type="submit" value="Submit Article" name="submit">

<center>

</form>

<?php

if(isset($_POST['submit']))

{

$name=$_POST['name'];

$textbox=$_POST['textbox'];

$filename=$_POST['filename'];

$file=basename( $_FILES['file']['name']);

 $targetfolder = "upload/";

 $targetfolder = $targetfolder . basename( $_FILES['file']['name']) ;

if(move_uploaded_file($_FILES['file']['tmp_name'], $targetfolder))

 {

$books = array();

$books [] = array(

'name' => $name,

'textbox' => $textbox,

'filename' => $filename,

'file'=> $file

);

$doc = new DOMDocument();

$doc->formatOutput = true;

$r = $doc->createElement( "books" );

$doc->appendChild( $r );

foreach( $books as $book )

{

$b = $doc->createElement( "book" );

$author = $doc->createElement( "textbox" );

$author->appendChild(

$doc->createTextNode( $book['textbox'] )

);

$b->appendChild( $author );

$title = $doc->createElement( "name" );

$title->appendChild(

$doc->createTextNode( $book['name'] )

);

$b->appendChild( $title );

$publisher = $doc->createElement( "filename" );

$publisher->appendChild(

$doc->createTextNode( $book['filename'] )

);

$b->appendChild( $publisher );

$publisher1 = $doc->createElement( "file" );

$publisher1->appendChild(

$doc->createTextNode( $book['file'] )

);

$b->appendChild( $publisher1 );

$r->appendChild( $b );

}

 $handle=fopen("data.xml","a+");

fwrite($handle,$doc->saveXML());

fclose($handle);

                echo "<script>";

  echo "alert('Your file is uploaded successfully');";

  echo " window.location.href='profile.php';";

  echo "</script>";

        echo "The file ". basename( $_FILES['file']['name']). " is uploaded";

  }

 else {

          echo "<script>";

  echo "alert('Error !!!!! Please try again');";

  echo " window.location.href='profile.php';";

  echo "</script>";

  }

} 

?>

XML file -