Website Demo Handout

8/6/2019 Website Demo Handout

1/29

SCHOOL OF INFORMATICS & IT

DIPLOMA IN INFORMATION TECHNOLOGY

AY2010/2011Oct OSAD Web Demo Handout Page 1

Handout for Open Source Application

Development Web Demo

index.php

menu.php header.php footer.php

facebookLogin.php messages.php myProfile.php administration

.php

aboutus.php

messageadd.php viewmessagede

tails.phpmessagedetails.

php

checkLogin.php

add view edit

messagedelete.

php

delete

messageupdate.

php

updat

Figure 1: Architecture of the Open Source Application Development Web Demo


2/29




1) index.php

Things to do:

Create database called: facebookdb

Create table called: usermessage (and create fake data)

You could view the list of message.

For the message created by you, you could edit and delete the message

Understand the sample and apply it to your assignment


3/29




2) menu.php

/* MAIN NAV */

body#home #nav td#home a,body#about #nav td#about a,

body#profile #nav td#profile a,

body#student #nav td#student a,

body#login #nav td#login a { BACKGROUND-COLOR: #666666; color: #FF9900 }

body#logout #nav td#logout a { BACKGROUND-COLOR: #393939; color: #FF9933 }

body#courses #nav td#courses a { BACKGROUND-COLOR: #222222; color: #FF9900 }

table#nav td a {

display: block; color: #FFFF00; text-decoration: none; padding: 3px; font-family: Arial, Helvetica,

sans-serif; font-size: x-small; font-weight: bold;

}table#nav td a:hover {

display: block;

BACKGROUND-COLOR: #FF9900;

color: #0000FF;

}

/* end MAIN NAV */

.style1 {

background-color: #FF9900;

}

Home

About Us

Messages

Administration

Login@Facebook

My Profile

Logout


4/29





5/29




3) header.php

OSAD Student System

Open Source Application

Development

4) footer.php


6/29




5) checkLogin.php


7/29




//print_r($me);

$_SESSION['uid'] = $uid; //this is to make the uid as unique key

$_SESSION['username'] = $me[name];

echo "uid is ".$uid."

";

echo "user name is ".$me[name]."

";if ($uid == "1407886091") //this is the uid of owner. update to your own id

{

$_SESSION['user_role'] = "administrator";

}

else

{

$_SESSION['user_role'] = "user";

}

$_SESSION['me'] = $me; //it stores the user's profile in object "$me".

$_SESSION['friends'] = $friends; //stores the friends' list into SESSION

//which is an array

//type "https://graph.facebook.com/me" to get the full public profile

} catch (FacebookApiException $e) {

error_log($e);

}

}

// login or logout url will be needed depending on current user state.

if ($me) {

$logoutUrl = $facebook->getLogoutUrl();

} else {

$loginUrl = $facebook->getLoginUrl();

}

?>

php-sdk

body {

font-family: 'Lucida Grande', Verdana, Arial, sans-serif;

}

h1 a {text-decoration: none;

color: #3b5998;

}

h1 a:hover {

text-decoration: underline;

}


8/29




window.fbAsyncInit = function() {

FB.init({

appId : '',

session : , // don't refetch the session when PHP already has it

status : true, // check login status

cookie : true, // enable cookies to allow the server to access the session

xfbml : true // parse XFBML

});

// whenever the user logs in, we refresh the page

FB.Event.subscribe('auth.login', function() {

window.location.reload();

});

};

(function() {

var e = document.createElement('script');

e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';

e.async = true;

document.getElementById('fb-root').appendChild(e);

}());


9/29




Login Facebook:

7) message.php

Welcome to Temasek Informatics & IT School


10/29




//TODO 3: Bind the values

//$stmt->bind_param("s", $uid);

//TODO 4: Execute the statement

$stmt->execute();

//Challenge: Display no messages if there are no records

$stmt->store_result();

if ($stmt->num_rows() > 0) {

//TODO 5: bind results into $messageid, $subject, $message and $uid

$result = $stmt->bind_result($messageid, $subject, $message, $uid, $image);

//TODO 6: Use while loop to fetch result and display $subject

echo "";

echo "SubjectMessageImageAc

tions";

while ($stmt->fetch()) {

echo "";

echo "".$subject."";

echo "".$message."";

$fullimagepath = "images/".$image;

echo " ";

echo "";

if ($uid == $user)

{

//TODO 7: In the loop, display hyperlink to messagedetails.php and pass

query string for messageid

echo "[ Edit ]";

//TODO 8: In the loop, display hyperlink to messagedelete.php and pass

query string for messageid

echo "[ Delete ]";

}else

{

echo "[ View ]";

}

echo "";


11/29




echo "";

}

echo "";

}

else{echo "You have no messages";

}

//TODO 9: close the statement

$stmt->close();

//TODO 10: close $mysqli

$mysqli->close();

?>

Add new message

8) messageadd.php


12/29





13/29




$image="";

echo '

You did not specify any image for this

message!
';
}

// if all data entered, display a message

if ($subject && $message){

$success = TRUE;

//TODO 1: Connect to facebookdb database

$mysqli = new mysqli("localhost", "root", null, "facebookdb");

//TODO 2: Prepare the statement to select userMessage

$stmt = $mysqli->prepare("INSERT INTO usermessage (subject, message, facebookuid,

image) VALUES (?, ?, ?, ?)");


$stmt->bind_param("ssss", $subject, $message, $uid, $image);


$result = $stmt->execute();


$stmt->close();


$mysqli->close();

if ($result){

$success = TRUE;

echo "Thank you";

echo "Thank you, $user_name. You have entered the following details :

";

echo "";

echo "Subject: " . $subject . "";

echo "Message: " . $message . "";

echo "Image: ".$image."";

echo "";}

else

{

echo "Data not saved.";

}

}

else


14/29




{

// at least one form element was not filled out properly

echo '

Please fill out the form again.
';
}

}?>


Add new message

Add a new message in the form below:

Subject:


15/29




Return to Message Listing

9) viewmessagedetails.php


16/29




$stmt->execute();

//TODO 5: bind results into $messageid, $subject, $message and $email

$stmt->bind_result($messageid, $subject, $message, $uid, $image);

//TODO 6: fetch the result$stmt->fetch();


$stmt->close();


$mysqli->close();

?>


View Message

View messages in the form below:

Sent By:


17/29


18/29




//TODO 0: get user's messageid

$messageid = $_GET['messageid'];

$uid = $_SESSION['uid'];



//TODO 2: Prepare the statement to select userMessage

$stmt = $mysqli->prepare("SELECT messageid, subject,message,facebookuid,image FROM

userMessage WHERE messageid=? AND facebookuid=?");


$stmt->bind_param("is", $messageid, $uid );


$stmt->execute();

//TODO 5: bind results into $messageid, $subject, $message and $facebookuid, image

$stmt->bind_result($messageid, $subject, $message, $uid, $image);

//TODO 6: fetch the result

$result = $stmt->fetch();


$stmt->close();


$mysqli->close();

if ($result)

{

?>


Edit message


19/29




Edit your message in the form below:

Subject:


20/29




//Display the FOOTER.

include 'footer.php';

?>


21/29




11) messageupdate.php


Message Update Result


22/29




if (!empty($_POST['image'])) {

$image=stripslashes($_POST['image']);

} else {

$image="";

echo '

No image specified for this message!
';}
if($subject && $message){



//TODO 2: Prepare the statement to update subject and message in userMessage

$stmt = $mysqli->prepare("UPDATE usermessage set subject=?, message=?, image=? where

messageid=? AND facebookuid=?");


$stmt->bind_param('sssis', $subject, $message,$image, $messageid, $uid);



//TODO 5: If execute is successful, display successful, else display error

if($result){

echo '

Your message has been updated!';

}

else{

echo '

Message not updated';}


$stmt->close();


$mysqli->close();

}

?>


23/29




Back to

12) messagedelete.php


Message Deletion Result


24/29






//TODO 5: If execute is successful, display successful, else display error

if($result){echo '

Your message has been deleted!';

}

else{

echo '

Message not delete.';

}


$stmt->close();


$mysqli->close();

?>

Return to Message Listing

13) aboutus.php

Open Source Application Development

Subject Code: CIT2E07

Synosis: This subject covers the concepts and implementation of open source

application development. In this subject, students will use an integrated development environment to

design, implement and deploy multi-user software applications using open source technology.


25/29




Technological and design issues of open source application development will be discussed.

This website is purely to demonstrate the use of Apache, PHP and mySQL. The features

that you see in this website are a compilation of the lab practicals available in this subject.

The demo project uses the following:

Database: FACEBOOKDB

Tables: UserMessage

Accounts: Any valid facebook account. However, you need to set an account as administration (the

owner's uid in facebook). Only this account is granted administrative access rights.

This demo has incorporated some simple security measures:

Some webpages are protected from non-logged on users

Deletion and modification of messages will check the uid of the logged on user (facebook login

account) to ensure a valid request from the message's owner.

14) administration.php

Administration


26/29




include 'footer.php';

?>

15) myProfile.php


27/29




16) facebookdb.sql

# HeidiSQL Dump

#

# --------------------------------------------------------

# Host: 127.0.0.1

# Database: facebookdb

# Server version: 5.1.41

# Server OS: Win32

# Target-Compatibility: Standard ANSI SQL

# HeidiSQL version: 3.2 Revision: 1129

# --------------------------------------------------------

/*!40100 SET CHARACTER SET latin1;*/

/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='ANSI';*/

/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0;*/

#

# Database structure for database 'facebookdb'

#

CREATE DATABASE /*!32312 IF NOT EXISTS*/ "facebookdb" /*!40100 DEFAULT CHARACTER SET latin1*/;

USE "facebookdb";


28/29




#

# Table structure for table 'images'

#

CREATE TABLE /*!32312 IF NOT EXISTS*/ "images" (

"Images" blob NOT NULL,

"Medium" mediumblob NOT NULL,

"Long" longblob NOT NULL,

"tiny" tinyblob NOT NULL

) /*!40100 DEFAULT CHARSET=latin1*/;

#

# Table structure for table 'usermessage'

#

CREATE TABLE /*!32312 IF NOT EXISTS*/ "usermessage" (

"messageid" int(11) NOT NULL AUTO_INCREMENT,

"subject" varchar(50) DEFAULT NULL,

"message" varchar(200) DEFAULT NULL,

"facebookuid" varchar(100) DEFAULT NULL,

"image" varchar(500) DEFAULT NULL COMMENT 'the name and path of the image',

PRIMARY KEY ("messageid")


29/29



) AUTO_INCREMENT=20 /*!40100 DEFAULT CHARSET=latin1*/;

#

# Dumping data for table 'usermessage'

#

LOCK TABLES "usermessage" WRITE;

/*!40000 ALTER TABLE "usermessage" DISABLE KEYS;*/

REPLACE INTO "usermessage" ("messageid", "subject", "message", "facebookuid", "image") VALUES

(17,'Testing Message 1','This is the testing message 1 done by David Wang','1407886091',NULL);


(18,'Testing Message2','2nd message','1407886091','image2.jpg');


(19,'blah blah','the red brown fox jumps over the lazy dog','572120948','image3.jpg');

/*!40000 ALTER TABLE "usermessage" ENABLE KEYS;*/

UNLOCK TABLES;

/*!40101 SET SQL_MODE=@OLD_SQL_MODE;*/

/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS;*/

Website Demo Handout

Documents

Transcript of Website Demo Handout