1) Go to apache and download the latest version of xampp exe file.
2) After download, double click on the file to install it. You will see the xampp installation wizard as below.

Fig 1: xampp-installation-wizard
3) Specify the location to install xampp.
(Note: It is better to install xampp in drive other than c because your operating system is mostly installed in c drive. If your operating system is crashed, there are chances of losing your projects which you would create inside the xampp->htdocs folder. I installed it in F drive).

Fig 2: xampp-install-location
4) Check “Install Apache as a Service” and “Mysql as a Service” to install Apache and MYSQL.

Fig 3: xampp-install-services

5) Click on Install to complete the installation step

Fig 4: xampp-installing-process
6) Congratulations, you have successfully installed XAMPP.
Running Apache and Mysql

1) Double Click on XAMPP Folder. Inside the XAMPP folder, you will see a file xampp-control.exe. Double Click it and verify whether Apache and MYSQL are running. If Apache and MYSQL is running, a green background appears in the XAMPP Control Panel.

Fig 5: xampp-running-verify

Fig 6: xampp-control-panel

The process of creating the menu items is shown in the figures below:
1) Navigate to Menus->Main Menu-> Add New Menu Items
2) Click on Add New Menu Item

Fig 6: Adding a New Menu Item

Fig 7: Selecting a Menu Item Type
3) Click “Select Button” to choose the Menu Item Type i.e. what the menu item will link with (article, category or contact form). A dialog box appears as below where we again click on Single Article to create a menu item that links to “About Us” article.

Fig 8: Selecting a Single Article Menu Item

Fig 9: Writing Menu Title and Selecting Article
4) After clicking on Select/Change Button a screen appears (as below) that allows you to choose the article to link to. Here we choose About Us.

Fig 10: Selecting article “About Us”

5) Make sure that the article title (here “About Us” ) appears in the text box under Select Article. Then click on Save and Close.

Fig 11: Saving the Menu Item
After the Menu Item has been added, the screen below follows.

Fig 11: Displaying Menu Items list
You have added a Menu Item that links to Single Article. You are done.

Open the front End and you can see that “About Us” link appears under Main Menu. Upon clicking the About Us link we see that the About Us article is displayed.

Fig 12: Front End after adding a Menu Item

Steps of Creating Menu Item to link Categories

1) Navigate to Menus->Main Menu-> Add New Menu Items (as in fig 6). Click Add New Menu Item
2) Click on Select Menu Item Type as in Fig 7.
3) A dialog box appears as below and we select Category List Menu Item.

Fig 13: Selecting Category List Menu Item

4) Type the Menu Title as Services and Select the category as Services and click on Save.

Fig 14: Choosing Category and Saving Category
Open the front End and you can see that “Services” link appears under Main Menu. Upon clicking the Services link we see that all the articles under the services category are displayed.

Fig 5: Process of Creating Article inside Category.
Similarly, you can add any number of articles inside the category like Web Designing, Software Development, Search Engine Optimization, etc. We assume that you did that as well.
Though you have created an Article “About Us”, a category “Services” and few articles inside the category Services, yet you don’t see any changes in the home page of the website.
This is because you have created Content but you don’t have link (Menu Items) to open them. We will learn to create Menu in the next topics.

Steps to create an Article

 Navigate to Content-> Article Manager -> Add New Article
 Click on Add New Article

Fig 1: Navigating to Add New Article

After clicking on the “Add New Article”, the interface below appears.

Fig 2: Adding a New Article
 Set the Title of the Article, say “About Us”
 Set the Category as “Uncategorizied”.
 Set the Status as “Published”.
 Set the Access as “Public”. The parameter “Access” defines who can view the article. If we want to display the article to the visitors of the website therefore the option is Public. Access level Private and Protected are other options which we will discuss in the coming lectures.
 After writing the description inside Article Text, we click on “Save” or “Save and Close”.

Fig 3: Navigating to “Add Category Manager”

After clicking on the “Add New Category”, the interface below appears.

Fig 4: Setting the Title, and other Parameters of a New Category

 Set the Title of the Category, say “Services”
 Set the Parent as “No Parent”. The parameter Parent specifies whether the category falls under some other category or not. If No Parent is chosen then this category is a Parent Category itself.
 Set the Status as “Published”.
 Set the Access as “Public”.
 You can also add an Image inside the Category.
 After writing the description of the services, we click on “Save” or “Save and Close”.

You are done. You Have Created a Category Named “Services”

Lets see the code for implementing pagination in PHP.

First create a database named php and run the mysql script given below using phpmyadmin.

CREATE TABLE IF NOT EXISTS `tblcountry` (

`id` int(4) unsigned NOT NULL AUTO_INCREMENT,

`countryname` varchar(255) DEFAULT NULL,

`abbreviation` varchar(3) DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=65 ;

INSERT INTO `tblcountry` (`id`, `countryname`, `abbreviation`) VALUES

(1, 'AALBORG', 'AAL'),

(2, 'AARHUS', 'AAR'),

(3, 'ABERDEEN SD', 'ABR'),

(4, 'ABERDEEN UK', 'ABZ'),

(5, 'ABIDJAN', 'ABJ'),

(6, 'ABILENE', 'ABI'),

(7, 'ABU DHABI', 'AUH'),

(8, 'ABU SIMEEL', 'ABS'),

(9, 'ABUJA', 'ABV'),

(10, 'ACAPULCO', 'ACA'),

(11, 'ACCRA', 'ACC'),

(12, 'ADANA', 'ADA'),

(13, 'ADDIS ABABA', 'ADD'),

(14, 'ADELAIDE', 'ADL'),

(15, 'ADEN', 'ADE');

Now lets explore the php code to display the above records in multiple pages using the pagination technique. You can save the below file as pagination.php

<?php

mysql_connect('localhost','root','');

mysql_select_db('php');

$res = mysql_query("select * from tblcountry");

$totrec = mysql_num_rows($res);

$pagesize = 5;

$totalpages = ceil($totrec/$pagesize);

if(isset($_GET['resultpage']) && $_GET['resultpage'] > 1 ) {

$offset = $_GET['resultpage'] * $pagesize - $pagesize;

}else {

$offset = 0;
}

$sql = "select * from tblcountry limit ". $offset . ",". $pagesize;

$result = mysql_query($sql);?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pagination in PHP</title></head>
<body>

<table border="1">

<?php while($data=mysql_fetch_array($result)) {?>

<tr>

<td><?=$data['id'];?></td>

<td><?=$data['countryname'];?></td>

</tr>

<?php }//end of while ?>

</table>

<?php

if($totalpages > 1) {

for($i=1; $i<=$totalpages; $i++) {

?>

<a href="pagination.php?resultpage=<?=$i;?>"><?=$i;?></a>

<?php

}//end of for loop

}//end of if

?></body>

</html>

The variable $totrec holds total number of records that we have in the table.

The variable $pagesize holds the page size i.e. total number of records that we are going to display in a page. It can be changed easily as per our requirement without affecting the code.

The variable $totalpages holds the total number of pages that is required to display the records. Total Pages is obtained by dividing total records with page size.

If we are in the first page then the value of offset will be 0 (zero), Hence first five records will be shown in the first page.

When the user clicks on the page number 2, the value of offset will be 2 (page number) * 5 (pagesize) – 5 (pagesize), Hence records 6 – 10 will be displayed as per the query.

Download the complete code for pagination using php and mysql here: Pagination using PHP/MYSQL (178)

Step 1:

First, create a new blank document in your photoshop canvas and choose shape tool and select Rounded Rectangle Tool.

Selecting Rounded Rectangle Tool

Selecting Rounded Rectangle Tool

Check the options toolbar right below the menu bar where we can change the radius to increase or decrease the roundness of the rectangle.

Also set the foreground color in photoshop before you draw the rectangle so that you get the rectangle in the desired color.

Step 2:

Now, Draw the rectangle on the canvas as per the measurement that you want.

Press Ctrl + J to duplicate the layer or right click on the layer and select duplicate.

Double click on the layer and change the color of it. Select darker version of the active color.

Now press Ctrl + T to transform the shape on the top layer.

Press shift + Alt key and resize the box, it will resize both the edges of the rectangle either vertically or horizontally.

rounded rectangle

Step 3:

Now, After finishing resizing the top layer both horizontally and vertically we will create a shadow below the frame.

To create a shadow, create a rectangle of height 20 pixels and width same as the width of the image frame as a last layer, i.e. the layer for the shadow will be placed below the existing two layers.

shadow for image frame

Step 4:

Now select the shadow layer. Go to Filter, Blur and select Gaussian Blur.

It will display a message to rasterize, press OK, Type 40 pixel in the radius box. You can increase or decrease the size of the blur as per the requirement.

Now after the blur is applied, Press Ctrl + T to transform the shadow layer. Now resize the shadow and move it towards up to fit the shadow as shown in the image below.

image frame for website

Your stylish image frame is ready and it can be used in the website. You can also apply the gradient on the frame to make it even more stylish.

Some of the most common web safe fonts are verdana, serif, arial, georgia, trubuchet ms etc. These days embedding custom font we can publish websites in custom fonts to improve the design of our websites. Thanks to Google web fonts library which we can call directly and embed to display fonts present in Google web http://www.google.com/webfonts. Moreover we can also use CSS3 @font-face and upload fonts directly in our server to display the websites in custom fonts.

Integrating Google web fonts is easy:

link the font family you want to use

<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>

Now after that add the font family in your css for e.g.

font-family: ‘Fjalla One’, sans-serif;

To use @font-face

Download the font-face kit where you will find different versions of fonts which has to be uploaded in the server and it also contains a css file where you will find the way to integrate the font in the css.

for e.g.

@font-face {    font-family: 'CalligraffitiRegular';    src: url('Calligraffiti-webfont.eot');    src: url('Calligraffiti-webfont.eot?#iefix') format('embedded-opentype'),         url('Calligraffiti-webfont.woff') format('woff'),         url('Calligraffiti-webfont.ttf') format('truetype'),         url('Calligraffiti-webfont.svg#CalligraffitiRegular') format('svg');    font-weight: normal;    font-style: normal;
}


Now we can directly use font-family CalligraffitiRegular in our css after uploading font in the directory and putting the above css code.

readymade font-face kits can be directly downloaded from http://www.fontsquirrel.com/fontface

You can also upload custom fonts and generate font-face kit via the url http://www.fontsquirrel.com/fontface/generator.

Please let us know if there are any queries related to font-face or Google web fonts.

There is another alternative method using jquery font replacement technique using cufon.

Developer: Gahendra Ranjit
Project Description: This is a Demo Project for conducting online exam. The system is developed during his internship period.

Project Features:

The project has 3 types of users. One is the system administrator, second one is the college administrator, and last one is the students. User can register in the system as college administrator or student.

System Administrator:
The main features of system administrator is listed below:

i. View Users: This section will display the user who register as college administrator or users. By default all the user are activated first. Administrators have the authority to deactivate the user.

College Administrator:
The main features of college administrator is listed below:

i. Create Exams: Exams are created according to the faculties and semesters. Exams are created between specified dates.
ii. Add Question: Questions are prepared for every subject.
iii. Setting the question papers: Questions are selected from the question bank and a question paper is set. The time duration for each exam paper can be set.
iv. View Question Set: College admin can view their own question set according to the faculty.
v. Manage Students: The student account can be edited, deactivated as required.

Students:
After the students login, he/she can use the following features

i. Exam: Student can give exam if the exam is currently running
ii. Mark sheet: Student can view and print the exam result.
iii. Settings: Student can manage his account information like password.

To view the online examination system,  click on the link:

Online Examination System

College Administrator

Demo Username: demo@ittrainingnepal.com

Demo Password: demoadmin

System Administrator

Demo Username: admin

Demo Password: admin

please check the detailed syllabus of our php training

Features of Online Quiz System

An online quiz system will basically have the following features.

Front End:

• There will be certain number of questions under each categories(subjects).
• User have to answer the question within the defined time limit.
• Different categories have different questions.
• User may be asked to sign up to play the quiz.
• The system will display  the detail grading report of the user after the user plays the quiz.
• User can change his account details like password.

Back End:

The back end of the quiz is administrative panel of the quiz system.

• Adding and editing categories.
• Adding, editing questions under each categories(subjects).
• Setting the time limit for user to answer each questions.

How an online quiz system works ?

In an online quiz system, administrator creates different subjects(categories). He then creates quiz for different subjects. He makes questions and provide multiple option for each questions. Administrator provides login information to students. Students logs in the website and plays the quiz. After the quiz, he can see his scorecard.

Advantages of Online Quiz System

There are following benefits of the quiz system.

• It is a very quick process to taking exams. Result can also be displayed quickly.
• It is cost effective way of taking online examination.

To view a Quiz System developed by students during training session, you can click on the links below.

1. Online Quiz done by Ishwor Bhatta