website demo handout
TRANSCRIPT
-
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
-
8/6/2019 Website Demo Handout
2/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 2
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
-
8/6/2019 Website Demo Handout
3/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 3
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
-
8/6/2019 Website Demo Handout
4/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 4
-
8/6/2019 Website Demo Handout
5/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 5
3) header.php
OSAD Student System
Open Source Application
Development
4) footer.php
-
8/6/2019 Website Demo Handout
6/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 6
5) checkLogin.php
-
8/6/2019 Website Demo Handout
7/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 7
//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/6/2019 Website Demo Handout
8/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 8
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);
}());
-
8/6/2019 Website Demo Handout
9/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 9
Login Facebook:
7) message.php
Welcome to Temasek Informatics & IT School
-
8/6/2019 Website Demo Handout
10/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 10
//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 "";
-
8/6/2019 Website Demo Handout
11/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 11
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
-
8/6/2019 Website Demo Handout
12/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 12
-
8/6/2019 Website Demo Handout
13/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 13
$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 (?, ?, ?, ?)");
//TODO 3: Bind the values
$stmt->bind_param("ssss", $subject, $message, $uid, $image);
//TODO 4: Execute the statement
$result = $stmt->execute();
//TODO 5: close the statement
$stmt->close();
//TODO 6: close $mysqli
$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
-
8/6/2019 Website Demo Handout
14/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 14
{
// at least one form element was not filled out properly
echo '
Please fill out the form again.
';}
}?>
Welcome to Temasek Informatics & IT School
Add new message
Add a new message in the form below:
Subject:
-
8/6/2019 Website Demo Handout
15/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 15
Return to Message Listing
9) viewmessagedetails.php
-
8/6/2019 Website Demo Handout
16/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 16
$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();
//TODO 7: close the statement
$stmt->close();
//TODO 8: close $mysqli
$mysqli->close();
?>
Welcome to Temasek Informatics & IT School
View Message
View messages in the form below:
Sent By:
-
8/6/2019 Website Demo Handout
17/29
-
8/6/2019 Website Demo Handout
18/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 18
//TODO 0: get user's messageid
$messageid = $_GET['messageid'];
$uid = $_SESSION['uid'];
//TODO 1: Connect to facebookdb database
$mysqli = new mysqli("localhost", "root", null, "facebookdb");
//TODO 2: Prepare the statement to select userMessage
$stmt = $mysqli->prepare("SELECT messageid, subject,message,facebookuid,image FROM
userMessage WHERE messageid=? AND facebookuid=?");
//TODO 3: Bind the values
$stmt->bind_param("is", $messageid, $uid );
//TODO 4: Execute the statement
$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();
//TODO 7: close the statement
$stmt->close();
//TODO 8: close $mysqli
$mysqli->close();
if ($result)
{
?>
Welcome to Temasek Informatics & IT School
Edit message
-
8/6/2019 Website Demo Handout
19/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 19
Edit your message in the form below:
Subject:
-
8/6/2019 Website Demo Handout
20/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 20
//Display the FOOTER.
include 'footer.php';
?>
-
8/6/2019 Website Demo Handout
21/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 21
11) messageupdate.php
Welcome to Temasek Informatics & IT School
Message Update Result
-
8/6/2019 Website Demo Handout
22/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 22
if (!empty($_POST['image'])) {
$image=stripslashes($_POST['image']);
} else {
$image="";
echo '
No image specified for this message!
';}if($subject && $message){
//TODO 1: Connect to facebookdb database
$mysqli = new mysqli("localhost", "root", null, "facebookdb");
//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=?");
//TODO 3: Bind the values
$stmt->bind_param('sssis', $subject, $message,$image, $messageid, $uid);
//TODO 4: Execute the statement
$result = $stmt->execute();
//TODO 5: If execute is successful, display successful, else display error
if($result){
echo '
Your message has been updated!';
}
else{
echo '
Message not updated';}
//TODO 6: close the statement
$stmt->close();
//TODO 7: close $mysqli
$mysqli->close();
}
?>
-
8/6/2019 Website Demo Handout
23/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 23
Back to
12) messagedelete.php
Welcome to Temasek Informatics & IT School
Message Deletion Result
-
8/6/2019 Website Demo Handout
24/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 24
//TODO 4: Execute the statement
$result = $stmt->execute();
//TODO 5: If execute is successful, display successful, else display error
if($result){echo '
Your message has been deleted!';
}
else{
echo '
Message not delete.';
}
//TODO 6: close the statement
$stmt->close();
//TODO 7: close $mysqli
$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.
-
8/6/2019 Website Demo Handout
25/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 25
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
-
8/6/2019 Website Demo Handout
26/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 26
include 'footer.php';
?>
15) myProfile.php
-
8/6/2019 Website Demo Handout
27/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 27
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";
-
8/6/2019 Website Demo Handout
28/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
AY2010/2011Oct OSAD Web Demo Handout Page 28
#
# 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")
-
8/6/2019 Website Demo Handout
29/29
SCHOOL OF INFORMATICS & IT
DIPLOMA IN INFORMATION TECHNOLOGY
) 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);
REPLACE INTO "usermessage" ("messageid", "subject", "message", "facebookuid", "image") VALUES
(18,'Testing Message2','2nd message','1407886091','image2.jpg');
REPLACE INTO "usermessage" ("messageid", "subject", "message", "facebookuid", "image") VALUES
(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;*/