×
Namespaces

Variants
Actions
Revision as of 08:13, 7 May 2012 by hamishwillee (Talk | contribs)

Creating an actual training Institute website using nokia mobile web templates

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: User:Trecin (30 Oct 2009)
Last edited: hamishwillee (07 May 2012)

Contents

Introduction

Web Templates are resources which we can use to design our websites easily and quickly. Nokia Mobile web templates are a series of web templates provided by Nokia Developer using which we can make good websites for Nokia devices.

This article illustrates a website of a training institute named trecin which provides training for different mobile technologies. The article has heavily used the Nokia mobile web templates for High End devices, with some amount of customization to demonstrate creativity.

Prerequisite Required

Before going through the article the reader is required to have a basic knowledge of developing websites using html and working with web servers. Apart from that a knowledge of server side language like php is recommended as we have used some php functions for some sort of customization in our website.

Website Views

Here we start with the actual stuff, here we will know how we have developed this website.

The following are the views we are going to show for our website, mostly we have used the components provided in the Nokia Mobile web Templates for high end devices except some which we are going to explain explicitly. Here goes the views:

  • Home Page
  • About Us
  • Training
  • Contact Us
  • FeedBack Form

Customized functions

Along using the the default web template components, we have kept some of our very own functionalities in the article which gives an example of upto which extent we can customize the web templates to make an effective website. The following are the couple of functionalities we have added to our website :

  • Visitor counter, to get the number of unique visitors visited this website.
  • Feedback form, to directly contact the institution, for some feedback about the new website.

Details of Views

The following part of the article gives a brief idea about the various views our website contain along with some technical explanation. In each view codes and sceenshots are provided to get a very clear cut idea about designing this sort of website.

Home Page

The home page of the website uses the listbox component of Nokia Mobile web templates, to provide a transactions upto other views. In addition to that the customization with the images provides a good look to the home page.

Home.jpg

We have kept a visitor counter at the home page which counts the visitor number to our website. The visitor counter demonstrates an example of upto what extent we can customize the templates dependent on our need.

AboutUs

This view provides the the details about the institution, this design contains the basic components which are provided in the web template, some modifications are made to provide exact costomization.

Aboutus.jpg

The view contains a Heading and and rounded box view is used to put the content of that heading. The html code helps us to understand the exact view .

 
<h5>Why Outsource With Trecin?</h5>
<div class="box-rounded">
<div class="box-rounded-inner">
<div class="box-rounded-outer">
 
 
<div >
 
<h2></h2>
<p>We are the pioneer in training</p>
<p>Professional Management - Offshore Developers</p>
 
<p>Complete Security and Protection:</p>
<p>Affordable Prices:</p>
<p>Commitment to Quality:</p>
<h2></h2>
</div>
<p></p>
 
</div>
 
</div>
</div>

Training

This is one of the simplest yet effective view provided by the website, this view describes about the courses provided by the institution.

Training.jpg

The design at first uses a rounded box view inside of which an image is placed to give a good look, after that List components are used to display the various type of course provided by the institution.

The html code below show how we can put an image inside an rounded box design:

<div id="content">
<div> <h1>Training</h1>
 
<div class="box-rounded">
<div class="box-rounded-inner">
<div class="box-rounded-outer">
 
<div align="middle">
<h2></h2><a href="../resources/images/training.jpg">
&nbsp;&nbsp;<img src="../resources/images/training.jpg" width="240" height="200" />&nbsp;&nbsp;</a><h2></h2>
 
</div>
<p></p>
 
 
</div>
</div>
</div>

The code presented next in this part gives an idea how we can keep the content of this training page using a list view.

<ul class="list">
<li><a href="../library/course_symbian.html">Symbian OS</a></li>
<li><a href="../library/course_cpp.html">Crash course in C++</a></li>
<li><a href="../library/course_corejava.html">Core Java</a></li>
 
<li><a href="../library/course_j2me.html">J2ME</a></li>
 
</ul>

Contact Us

This view is provided with the contact information of the instituition, here also the built in components of the templates are customized to provide a good look. The screenshot of the view is given below:

Contactus.jpg

At first in the view an image in the rounded box is used, after that all the other contact details like email and phone number are designed using table structure in html, an additional footer is used to navigate back to the options.

Below is the html code which we have used to display the email us link in the contact us view:

<tr class="odd">
<td><a href="mailto:info@yourcompany.com?subject=Sample%20subject%20line">trecinlive@gmail.com</a></td>
</tr>

similarily the code below demonstrates how to handle phone number in the contact us view:

	<tr>
<th scope="col">Phone</th>
</tr>
<tr class="odd">
<td><a href="tel:123 456 789">+9199111122889</a></td>
</tr>
<tr class="odd">
<td><a href="tel:123 456 789">+91875363383939</a></td>
</tr>

Feedback Form

The last but not the least view is of the feedback form.

This is one of the customized part in the website, the default form component provided in the web templates are used to create a feedback form, using this form the visitor can contact the author with some feedback about the new website. The feedback form view is shown below:

Feedback.jpg

Along with the default form component a php function is used on the server side using which whenever a visitor fills the feedback for instantly the feedback will be delivered at authors email adrress. The php code descripted below does the job of getting the contents from the the form in the html file and send a email to the author.

<?php
 
 
 
// $mailto - set to the email address you want the form
// sent to, eg
//$mailto = "youremailaddress@example.com" ;
 
$mailto = 'trecinlive@gmail.com' ;
 
// $subject - set to the Subject line of the email, eg
//$subject = "Feedback Form" ;
 
$subject = "Feedback Form" ;
 
$formurl = "http://www.trecin.com//mobile/feedback.html" ;
$errorurl = "http://www.trecin.com//mobile/error.html" ;
$thankyouurl = "http://www.trecin.com//mobile/thankyou.html" ;
 
$email_is_required = 1;
$name_is_required = 1;
$comments_is_required = 1;
$uself = 0;
$use_envsender = 0;
$use_sendmailfrom = 0;
$use_webmaster_email_for_from = 0;
$use_utf8 = 1;
$my_recaptcha_private_key = '' ;
 
 
 
$headersep = (!isset( $uself ) || ($uself == 0)) ? "\r\n" : "\n" ;
$content_type = (!isset( $use_utf8 ) || ($use_utf8 == 0)) ? 'Content-Type: text/plain; charset="iso-8859-1"' : 'Content-Type: text/plain; charset="utf-8"' ;
if (!isset( $use_envsender )) { $use_envsender = 0 ; }
if (isset( $use_sendmailfrom ) && $use_sendmailfrom) {
ini_set( 'sendmail_from', $mailto );
}
$envsender = "-f$mailto" ;
$fullname = (isset($_POST['fullname']))? $_POST['fullname'] : $_POST['name'] ;
$email = $_POST['email'] ;
$comments = $_POST['comments'] ;
$http_referrer = getenv( "HTTP_REFERER" );
 
if (!isset($_POST['email'])) {
header( "Location: $formurl" );
exit ;
}
if (($email_is_required && (empty($email) || !preg_match('/@/', $email))) || ($name_is_required && empty($fullname)) || ($comments_is_required && empty($comments))) {
header( "Location: $errorurl" );
exit ;
}
if ( preg_match( "/[\r\n]/", $fullname ) || preg_match( "/[\r\n]/", $email ) ) {
header( "Location: $errorurl" );
exit ;
}
if (strlen( $my_recaptcha_private_key )) {
require_once( 'recaptchalib.php' );
$resp = recaptcha_check_answer ( $my_recaptcha_private_key, $_SERVER['REMOTE_ADDR'], $_POST['recaptcha_challenge_field'], $_POST['recaptcha_response_field'] );
if (!$resp->is_valid) {
header( "Location: $errorurl" );
exit ;
}
}
if (empty($email)) {
$email = $mailto ;
}
$fromemail = (!isset( $use_webmaster_email_for_from ) || ($use_webmaster_email_for_from == 0)) ? $email : $mailto ;
 
if (function_exists( 'get_magic_quotes_gpc' ) && get_magic_quotes_gpc()) {
$comments = stripslashes( $comments );
}
 
$messageproper =
"This message was sent from:\n" .
"$http_referrer\n" .
"------------------------------------------------------------\n" .
"Name of sender: $fullname\n" .
"Email of sender: $email\n" .
"------------------------- COMMENTS -------------------------\n\n" .
$comments .
"\n\n------------------------------------------------------------\n" ;
 
$headers =
"From: \"$fullname\" <$fromemail>" . $headersep . "Reply-To: \"$fullname\" <$email>" . $headersep . "X-Mailer: chfeedback.php 2.15.0" .
$headersep . 'MIME-Version: 1.0' . $headersep . $content_type ;
 
if ($use_envsender) {
mail($mailto, $subject, $messageproper, $headers, $envsender );
}
else {
mail($mailto, $subject, $messageproper, $headers );
}
header( "Location: $thankyouurl" );
exit ;
 
?>

Conclusion

This article provided a step by step guide of porting an actual website to mobile using the Nokia Web Templates for High End Devices. The article has taken the example of Trecin.

Using this article the readers can port their website easliy and customize that according to their own need.

--Trecin 19:24, 30 October 2009 (UTC)

59 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×