a web based framework

8/9/2019 A Web Based Framework

http://slidepdf.com/reader/full/a-web-based-framework 1/35

1

A WEB BASED FRAME FOR TECHNICAL LEARNING

CHAPTER I

INTRODUCTION

1.1 MOTIVATION

Right now in the world of the Internet, it is easy for anybody to access any

tools that they want and get benefited by them. But the only drawback is that the

people don’t know about the resources available.

Now a days, Internet provides plenty of services. It is playing vital role in

the e-learning domain. There are many tools available in the World Wide Web

(www) using which the teaching and learning process will be done efficiently. This

project aims to provide a framework where all tools are available at one place with

its details such as (Installation procedure, cost, usage, etc.).

1.2 OBJECTIVE

This framework is facilitated with the best possible resources to help

teachers leverage technology to improve teaching and learning process. It provides

tutorials and useful links, tech tools categorized by skills and subject, app

recommendations for various mobile devices, free live webinars and recordings.

The system also provides information about the various events and workshops that

is going to take place in forth coming weeks.

The collections in our digital library include images, educational activities in

PDF and HTML formats, QuickTime movies, streaming media, and audio files

related to interactive exhibits and scientific phenomena. Educators can search,

select, and download digital files for individual, noncommercial educational use.



2

CHAPTER 2

SYSTEM REQUIREMENTS

2.1. HARDWARE REQUIREMENTS

The Hardware Requirement involved in this project is

Platform : Windows XP/Windows 7

Processor : Pentium IV

CPU Speed : 2.4 GHz

RAM : 512 MB

Hard Disk : 80 GB

VDU : VGA Color Monitor

Disk Drive : CD drive

2.2. SOFTWARE REQUIREMENTS

The software requirements to develop the project are

Operating System : Windows XP, 7, 8

Front-end : PHP, HTML 5.0

Back-end : MySQL



3

CHAPTER 3

SYSTEM ANALYSIS

3.1 EXISTING SYSTEM

The tools are available at different websites. The user will search in different

locations. Sometimes the user may not find the appropriate tool and does not know

how to search it.

3.2 NEED FOR PROPOSED SYSTEM

To overcome the above problems and bring out the ways to reduce thehuman effort and thus make it easy for the users and learners to give access to

various tools from the proposed framework that is developed.

3.3 FEASIBILITY STUDY OF PROPOSED SYSTEM

The proposed system has a complete feature suite that gives full information

about the current trends could be used in the teaching and learning process. This is

also user interactive and contains forums to post queries and suggestions.

3.4 PROPOSED SYSTEM

The collections in our digital library include images, educational activities in

PDF and HTML formats, QuickTime movies, streaming media, and audio files

related to interactive exhibits and scientific phenomena. Educators can search,

select, and download digital files for individual, noncommercial educational use.

The system helps us to comment, rate the article.

The proposed system is a complete system that curates various tools and

computer software in a single location for easy access. On visiting the website you



4

can view the most popular tools used by the people, and the various tools sorted by

relevancy, usefulness and popularity.

When each of these tools is clicked, you will be taken to a separate page

where all the information about the tool is completely given in an easy-to-read

way. Information on the tool page will include a description about the tool, a video

about the tool, version number and a rating system that allows users to rate the tool

according to its popularity.

Upon signing up to the website, you can also get personal automated

recommendations of tools based on your usage patterns. The most used tools will

come up on top, while similar tools will be suggested as well.



5

CHAPTER 4

SYSTEM DESIGN

4.1 ACTIVITY DIAGRAM

Fig. 4.1 Activity Diagram

Stop



6

The first thing the user reaches when accessing the webpage is that an

overall view of technical tools and he can browse around the pages and know the

current events, new software tools available in the market and its cost and

availability. To get a personalized view of the webpages the user should login with

the username and password provided during the time of registration. If the

username/password is incorrect the webpage prompts the user to type password

again with error message.

Once the user has successfully logged in then he will be shown some of the

recommended tools and latest events and trends according to his necessity and

interests. If the user selects a tools, the webpage will display the procedure for

usage and installation and other important links. If the tools requires download

then the webpage takes the user to the publisher website to download the same. Or

else you will be shown the procedure to use the software product.



7

4.2 INPUT AND OUTPUT DESIGN

Fig. 4.2 Input and output Diagram

4.2 MODULE DESCRIPTION

Web Crawler Module

The web crawler module crawls the internet for related tools using specific

keywords. These crawls are done by scraping different search engines and finding

relevant results. These results are curated and related links are found.



8

Content Curator Module

The content curator module is responsible for curating the content found the

web by the web crawler. Using the information found, three different types of

content is curated: the tool name, the tool description and the download link for the

tool

Categorization Module

This module uses predefined keyword definitions to find out the category for

each tool. So each tool is categorized into the various categories so that users can

find them easily.

Ratings Module

This module looks for various signals to identify the popularity of the tool.

These include the traffic to the tool’s webpage, status of public rating systems and

social signals. All the tools are ranked by rating and the highest ranked items are

shown first.

Interface Module

This module is responsible for showing all the information that has been

organized by the other modules. The user directly interacts with this module to find

and use the tools.



9

Background Functionality Module

This module directly interacts with the first four modules and is responsible

for making all of those modules running constantly in the background. Thus in a

24x7 running server, new tools are constantly being found, categorized and rated.



10

CHAPTER 5

SYSTEM IMPLEMENTATION

5.1 SOFTWARE DESCRIPTION

XAMPP Server

XAMPP is a free and open source cross-platform web server solution stack

package, consisting mainly of the Apache HTTP Server, MySQL database, and

interpreters for scripts written in the PHP and Perl programming languages.

XAMPP requires only one zip, tar, 7z, or exe file to be downloaded and run, and

little or no configuration of the various components that make up the web server is

required. XAMPP is regularly updated to incorporate the latest releases of Apache,

MySQL, PHP and Perl. It also comes with a number of other modules including

OpenSSL and phpMyAdmin.

Self-contained, multiple instances of XAMPP can exist on a single

computer, and any given instance can be copied from one computer to another. It is

offered in both a full, standard version and a smaller version. Officially, XAMPP's

designers intended it for use only as a development tool, to allow website designers

and programmers to test their work on their own computers without any access to

the Internet. To make this as easy as possible, many important security features are

disabled by default. In practice, however, XAMPP is sometimes used to actually

serve web pages on the World Wide Web. A special tool is provided to password-

protect the most important parts of the package.

XAMPP also provides support for creating and manipulating databases in

MySQL and SQLite among others. Once XAMPP is installed, it is possible to treat



11

a localhost like a remote host by connecting using an FTP client. Using a program

like FileZilla has many advantages when installing a content management system

(CMS) like Joomla or WordPress. It is also possible to connect to localhost via

FTP with an HTML editor. The default FTP user is "newuser", the default FTP

password is "wampp". The default MySQL user is "root" while there is no default

MySQL password.

The package includes Apache HTTPD (2.2.1.1), Openssl 0.9.8i, MySQL

5.1.33, PHP 5.2.9, among others. It was originally designed as a development

application, so that people could test their scripts, codes and websites on their own

computers without the need of an external server using all the services needed. The

application is very easy to install, just running the installer will allow you to select

the services you want to run on your computer, and when to run them. Once the

program is installed, you can use its Control Panel application to start, stop or

manage the services with ease. It features a very useful graphic interface, but there

are also powerful terminal commands you can use to manage all the services.

The version 1.7 brings the latest versions of all services as well as full

compatibility with Vista. This package is excellent for all those web developers out

there.

XAMPP 1.8.3-5 for Windows including:

Apache 2.4.10

MySQL 5.6.20

PHP 5.5.15

phpMyAdmin 4.2.7.1

FileZilla FTP Server 0.9.41



12

Adobe Dreamweaver

Adobe Dreamweaver is a proprietary web development tool developed by

Adobe Systems. Dreamweaver was created by Macromedia in 1997, and was

maintained by them until Macromedia was acquired by Adobe Systems in 2005.

Adobe Dreamweaver is available for OS X and for Windows. Following Adobe's

acquisition of the Macromedia product suite, releases of Dreamweaver subsequent

to version 8.0 have been more compliant with W3C standards. Recent versions

have improved support for Web technologies such as CSS, JavaScript, and various

server-side scripting languages and frameworks including ASP, ColdFusion,

Scriptlet and PHP.

Adobe Dreamweaver is a web design and development application that

provides a visual WYSIWYG editor (colloquially referred to as the Design view)

and a code editor with standard features such as syntax highlighting, code

completion, and code collapsing as well as more sophisticated features such as

real-time syntax checking and code introspection for generating code hints to assist

the user in writing code.[4] The Design view facilitates rapid layout design and

code generation as it allows users to create and manipulate the layout of HTML

elements. Dreamweaver features an integrated browser for previewing developed

webpages in the program's own preview pane in addition to allowing content to be

open in locally installed web browsers.

It provides transfer and synchronization features, the ability to find andreplace lines of text or code by search terms or regular expressions across the

entire site and a templating feature that allows single-source update of shared code

and layout across entire sites without server-side includes or scripting.



13

The behaviors panel also enables use of basic JavaScript without any coding

knowledge, and integration with Adobe's Spry Ajax framework offers access to

dynamically-generated content and interfaces. Dreamweaver can use third-party

"Extensions" to extend core functionality of the application, which web developers

can write (largely in HTML and JavaScript). Dreamweaver is supported by

extension developers who make commercial and free extensions available.

Dreamweaver, like other HTML editors, edits files locally then uploads

them to the remote web server using FTP, SFTP, or WebDAV. Dreamweaver CS4

now supports the Subversion (SVN) version control system.

Adobe Dreamweaver CS6

The big new features in Dreamweaver are these. First is “fluid grid layouts”

that let you specify exactly how page elements will be arranged when your site is

displayed on a small-screen phone, a midsize tablet, or a full-screen desktop. (Keep

reading for more detail on this). Next is built-in support for PhoneGap Build, an

open-source platform that makes it easy to create a single Web-based app that runs

on multiple phone platforms. Dreamweaver also improved its integration with

Query Mobile, a JavaScript-based platform for building browser-based phone and

tablet apps.

Adobe has improved the fidelity and flexibility of Dreamweaver’s “Live”

preview, and improved its “multiscreen” preview panel that shows what your page

will look like at phone, tablet, and desktop screen sizes. Adobe’s online “browser

lab” makes it possible to test your pages on older browser platforms, though

Microsoft’s comparable SuperPreview feature offers an even wider choice of old

and new browsers to test in.



14

Another Dreamweaver feature that I’ve wanted for years, and which Adobe

scarcely mentions in its PR, is built-in Web font support through a simple dialog

that lets you install fonts to your Web server so you can use them on your pages;

this was always possible through laborious hand-coding but Dreamweaver makes it

easy. Other improvements that I’m glad to see include a completely revamped—

and speedy — FTP module with full support for secure protocols. Built-in support

for the W3C Consortium’s page-validation tool guarantees full compliance with

current Web standards.

The user creates a fluid grid layout by targeting three screen sizes: phone,

tablet, and desktop. First, user arranges the page elements as they want them to

look at one screen size, with each element aligned to the invisible background grid.

Then user clicks an icon to switch to a different screen size, and arrange the

elements in a different way on the grid. So, for example, a phone will display

user’s whole page in a single column with a dropdown navigation menu at the top,

while a tablet will display parts of the page in three columns, with a wide

navigation bar at the top. The underlying CSS automatically switches betweenlayouts according to the screen size of the device displaying the page.



15

CHAPTER 6

CONCLUSION

Thus with the help of the proposed system the educators and learners to

know about the current trends and installation procedures of various software

products in a single place. It also facilitates the usage of suggestion boxes and

opinion polls to get genuine review from the other users. The system can be further

developed by providing various online webinars especially for our website clients

and users. The website will be implemented as an app for various smartphones and

thus enabling they have a handy interface with our course and resources.



16

APPENDIX 1

SOURCE CODE

Login.php

<?php

$loginFormAction = $_SERVER['PHP_SELF'];

if (isset($_GET['accesscheck'])) {

$_SESSION['PrevUrl'] = $_GET['accesscheck']; }

if (isset($_POST['us'])) {

$loginUsername=$_POST['us'];

$password=$_POST['pw'];

$MM_fldUserAuthorization = "";

$MM_redirectLoginSuccess = "index.php";

$MM_redirectLoginFailed = "index.php?faile=1";

$MM_redirecttoReferrer = false;

mysql_select_db($database_toptools, $toptools);

$LoginRS__query=sprintf("SELECT * FROM `user` WHERE email=%s AND w=%s",

GetSQLValueString($loginUsername, "text"), GetSQLValueString($password, "text"));

$LoginRS = mysql_query($LoginRS__query, $toptools) or die(mysql_error());

$result = mysql_fetch_array($LoginRS);

$loginFoundUser = mysql_num_rows($LoginRS);

if ($loginFoundUser) {

$loginStrGroup = "";



17

if (PHP_VERSION >= 5.1) {session_regenerate_id(true);} else

{session_regenerate_id();}

$_SESSION['MM_Username'] = $loginUsername;

$_SESSION['MM_UserGroup'] = $loginStrGroup;

$_SESSION['name'] = $result['name'];

if (isset($_SESSION['PrevUrl']) && false) {

$MM_redirectLoginSuccess = $_SESSION['PrevUrl']; }

header("Location: " . $MM_redirectLoginSuccess ); }

else { header("Location: ". $MM_redirectLoginFailed ); } } ?>

LOGOUT.PHP:

<?php

//initialize the session

if (!isset($_SESSION)) {

session_start();

}

// ** Logout the current user. **

$logoutAction = $_SERVER['PHP_SELF']."?doLogout=true";

$logoutAction .="&". htmlentities($_SERVER['QUERY_STRING']);

//to fully log out a visitor we need to clear the session varialbles

$_SESSION['MM_Username'] = NULL;

$_SESSION['MM_UserGroup'] = NULL;

$_SESSION['PrevUrl'] = NULL;

unset($_SESSION['MM_Username']);



18

unset($_SESSION['MM_UserGroup']);

unset($_SESSION['PrevUrl']);

unset($_SESSION['name']);

$logoutGoTo = "index.php";

if ($logoutGoTo) {

header("Location: $logoutGoTo");

exit;

}?>

AJAX.PHP

<script>

var xmlhttp;

function loadXMLDoc(url,cfunc) {

if (window.XMLHttpRequest) {

xmlhttp=new XMLHttpRequest(); }

else {// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

xmlhttp.onreadystatechange=cfunc;

xmlhttp.open("GET",url,true);

xmlhttp.send(); }

function tools(str) {

if (str=="") {

document.getElementById("result").innerHTML="";

return; }



19

loadXMLDoc("ajax1.php?q="+str ,function() {

if (xmlhttp.readyState==4 && xmlhttp.status==200) {

document.getElementById("result").innerHTML=xmlhttp.responseText;

} }); }

function yesno(str,id) {

if (str=="") {

document.getElementById("rating").innerHTML="";

return; }

loadXMLDoc("rating.php?q="+str+"&id="+id ,function() {

if (xmlhttp.readyState==4 && xmlhttp.status==200) {

document.getElementById("rating").innerHTML=xmlhttp.responseText;

} });}

</script>

TOPTOOLS.PHP

<?php

require_once('Connections/toptools.php');

if (!isset($_SESSION))

{

session_start(); }

$colname_Recordset2 = "-1";

if (isset($_GET['q'])) {

$colname_Recordset2 = $_GET['q'];

}



20


//Query1

$query_Recordset2 = sprintf("SELECT * FROM description WHERE id = %s",

GetSQLValueString($colname_Recordset2, "int"));

$Recordset2 = mysql_query($query_Recordset2, $toptools) or die(mysql_error());

$row_Recordset2 = mysql_fetch_assoc($Recordset2);

$totalRows_Recordset2 = mysql_num_rows($Recordset2);

//Query2

//sed for fetch the tools description

$query_Recordset3 = sprintf("SELECT * FROM tools WHERE id = %s",




?>

RATING.PHP:

<?php require_once('Connections/toptools.php');

$colname_Recordset1 = "-1";

if (isset($_GET['id'])) {

$colname_Recordset1 = $_GET['id']; }








21


$yes = $row_Recordset1['yesrating'];

$no = $row_Recordset1['norating'];

if($_GET['q'] == 1)

{

$yes = $yes + 1;

$query_Recordset2 = sprintf("update tools set yesrating = ". $yes . " where id = ".

$colname_Recordset1);

}

else

{

$no = $no + 1;

$query_Recordset2 = sprintf("update tools set norating = ". $no . " where id = ".

$colname_Recordset1);}





$row_Recordset3 = mysql_fetch_assoc($Recordset3); ?>

IMPORT.PHP

<?php require_once('Connections/toptools.php'); ?>

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "insert")) {

$insertSQL = sprintf("INSERT INTO tools (tool, rank) VALUES (%s, %s)",



22

GetSQLValueString($_POST['tool'], "text"),

GetSQLValueString($_POST['rank'], "int"));


$Result1 = mysql_query($insertSQL, $toptools) or die(mysql_error());

$insertSQL = sprintf("INSERT INTO description (define, description1, description2,

website, cost, availabitity, installation_guide, installation_link, define_link) VALUES

(%s, %s, %s, %s, %s, %s, %s, %s, %s)",

GetSQLValueString($_POST['define'], "text"),

GetSQLValueString($_POST['des1'], "text"),

GetSQLValueString($_POST['des2'], "text"),

GetSQLValueString($_POST['web'], "text"),

GetSQLValueString($_POST['cost'], "text"),

GetSQLValueString($_POST['avail'], "text"),

GetSQLValueString($_POST['installguide'], "text"),

GetSQLValueString($_POST['installlink'], "text"),

GetSQLValueString($_POST['definelink'], "text"));



$insertGoTo = "import.php?value=1";

if (isset($_SERVER['QUERY_STRING'])) {

$insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";

$insertGoTo .= $_SERVER['QUERY_STRING'];

}

header(sprintf("Location: %s", $insertGoTo));}




23

$query_Recordset1 = "SELECT * FROM tools ORDER BY rank ASC";




?>

<?php include("include/header.php");

include("title.php");

?>

<div class="wrapper row4">

<div id="container" class="clear">

<div id="left_column">

<div class="holder">

<h2 class="title">Top 100 Tools</h2>

<ul class="nostart">

<?php }

?>

REGISTRATION.PHP

<?php require_once('Connections/toptools.php'); ?>

<?php

if (!function_exists("GetSQLValueString"))

{

function GetSQLValueString($theValue, $theType, $theDefinedValue = "",

$theNotDefinedValue = "")

{



24

if (PHP_VERSION < 6) {

$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

}

$theValue = function_exists("mysql_real_escape_string") ?

mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {

case "text":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "long":

case "int":

$theValue = ($theValue != "") ? intval($theValue) : "NULL";

break;

case "double":

$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";

break;

case "date":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "defined":

$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;

break;

}

return $theValue;



25

}}

$editFormAction = $_SERVER['PHP_SELF'];


$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);

}

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "insert")) {

$insertSQL = sprintf("INSERT INTO user (name, email, pw, prof) VALUES (%s, %s,

s,%s)",

GetSQLValueString($_POST['name'], "text"),

GetSQLValueString($_POST['email'], "text"),

GetSQLValueString($_POST['definelink'], "text"),

GetSQLValueString($_POST['prof'], "text"));



$insertGoTo = "registration.php?value=1";


$insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";

$insertGoTo .= $_SERVER['QUERY_STRING'];

}

header(sprintf("Location: %s", $insertGoTo));

}

?>

<?php include("include/header.php");

include("title.php");



26

?>


<div id="topnav">

<ul>

<li ><a href="index.php">Homepage</a></li>

<li><a href="style-demo.html">Registration</a></li>

</ul>

<div class="clear"></div>

</div>

</div>


<div id="container" class="clear">

<h1>REGISTATION</h1>

<?php

if(isset($_GET['value']) && $_GET['value'] == 1)

{

echo "<h1> Thank You For you registration.</h1>"; }

else{ ?>

<p>

<form action="<?php echo $editFormAction; ?>" method="POST"

enctype="application/x-www-form-urlencoded" name="insert" target="_self">

<table width="429" height="189" cellpadding="1" border="1" align="center"

summary="Insert" style="outline:none;" >

<caption>

</caption>



27

<tr>

<th width="190" height="26" align="center"> Name</th>

<td width="191" align="left" valign="middle">

<input type="text" name="name" id="name">

</td>

</tr>

<tr>

<th height="26" align="center">Email ID</th>

<td align="left" valign="middle">

<input type="email" name="email" id="email" tabindex="2">

</td>

</tr>

<tr>

<th height="26" align="center">Password</th>

<td align="left" valign="middle"><input name="definelink" type="password"></td>

</tr>

<tr>

<th height="26" align="center">Re-Enter Password</th>

<td align="left" valign="middle"><input name="pw2" type="password"></td>

</tr>

<tr>

<th height="26" align="center">Profession</th>

<td align="left" valign="middle"><input name="prof" type="text"></td>

</tr>



28

<tr>

<th height="43" align="center"><input type="reset" name="button2" id="button2"

value="Reset"></th>

<td align="left" valign="middle"><input type="submit" name="button" id="button"value="Register"> </td>

</tr>

</table>

<input type="hidden" name="MM_insert" value="insert">

</form>

</p>

div class="clear"></div>

</div>

</div>

<?php include("include/footer.php"); ?>



29

APPENDIX 2

SCREEN SHOTS

DESCRIPTION TABLE

TOOLS TABLE



30

USER TABLE

REGISTRATION PAGE



31

FORGET PASSWORD PAGE

RATING PAGE



32

INDEX PAGE 1



33

INDEX PAGE 2



34

TOPTOOLS PAGE



TOP TOOLS

a web based framework

Documents