How to write Facebook

cornawakeSoftware and s/w Development

Nov 4, 2013 (3 years and 11 months ago)

77 views

How to write
Facebook

A hands
-
on introduction to Apache, PHP and
MySQL

Design Workshop lecture by
Jarek

Francik

Kingston University London 2012

Disclaimers


Any resemblance to real web applications,
living or dead, is purely coincidental.


We use the name
Facebook

purely in
educational purposes.


Any infringement of
Facebook

Inc. rights

is unintentional


Have you seen

Social Network
?

What we try to do?

What we try to do?

What we try to do?

What we try to do?

Client & Server

Client

Server

Client & Server

Client

Server

Client & Server

Client

Server

Remote File System

Client & Server

Client

Server

REQUEST: GET

RESPONSE: HTML

Remote File System

Client & Server

CLIENT SIDE
PROCESSING

Client

Server

REQUEST: GET

RESPONSE: HTML

Files served over the network

may contain HTML, CSS, JavaScript,

Flash and may be pretty much complex!

Remote File System

Client & Server

Client

Server

REQUEST: GET

RESPONSE: HTML

Remote File System

Client & Server

Client

Server

REQUEST: GET

RESPONSE: HTML

Remote File System

Client & Server

Client

Server

REQUEST:
POST

RESPONSE: HTML

Remote File System

Client & Server

Client

Server

REQUEST: POST

RESPONSE: HTML

Remote File System

DB

Client & Server

Client

Server

REQUEST: POST

RESPONSE:
PHP

Remote File System

DB

SERVER SIDE
PROCESSING

Client
-
Side Processing

Server
-
Side Processing

DB

Client
-
Side Processing


Executed locally, on client’s
computer


Results visible immediately



Fast & dynamic


Processing within a single
webpage


Information cannot be shared


No Databases*


Keeping things secret is very
difficult


everything is on the
user’s computer


* Limited local database functionality is
available in HTML5, but without sharing

Server
-
Side Processing


Executed remotely, on

a web server


Results must be sent over the
network


Network latency


Pages must be re
-
loaded in
order to view the results*


Information easily shared


Database back
-
end


Flexible and powerful security
control


* AJAX technology allows

for remote
updates without pages being reloaded
but technically it is a combination of
server side and client side technologies

Possible Options


PHP


ASP.NET


Java


Ruby on Rails


Python


Perl



So, which way to go?

PHP


Scripting language for web development


Created by
Rasmus

Lerdorf

16 years ago


Currently phasing out


Easy to learn but time
-
consuming to use

What do we need?


Operating System


Web Server


Database



Scripring

Language

Windows, Linux,
MacOS
...

Appache
, IIS,
WEBrick
...

MySQL
,
Postgres
,
SQLite
, Oracle...

PHP, Perl, Python, Ruby, C#, Java...

DB

What do we need?


Operating System


Web Server


Database



Scripring

Language

W
indows, Linux,
MacOS
...

A
ppache
, IIS,
WEBrick
...

M
ySQL
,
Postgres
,
SQLite
, Oracle...

P
HP, Perl, Python, Ruby, C#, Java...

DB

What do we need?


Operating System


Web Server


Database



Scripring

Language

L
inux, Windows,
MacOS
...

A
ppache
, IIS,
WEBrick
...

M
ySQL
,
Postgres
,
SQLite
, Oracle...

P
HP, Perl, Python, Ruby, C#, Java...

DB

What do we need?


Operating System


Web Server


Database



Scripring

Language

M
acOS
, Windows, Linux...

A
ppache
, IIS,
WEBrick
...

M
ySQL
,
Postgres
,
SQLite
, Oracle...

P
HP, Perl, Python, Ruby, C#, Java...

DB

What do we need?


Operating System


Web Server


Database



Scripring

Language

X
-

Platform

Appache

MySQL


PHP


Perl

DB

What do we need?


Operating System


Web Server


Database



Scripring

Language

X

A

M


P


P

DB

XAMPP

http://www.apachefriends.org/en/xampp.html


or
google

for “
xampp


XAMPP

1.
Download and install


it’s easy

2.
Run XAMPP Control Panel

3.
Start Apache &
MySql

4.
Run in your browser:

http://localhost

5.
Click Explore and go

to
htdocs

to browse

your web files

6.
Use
MySql

Admin to

setup your database

with
mySqlAdmin

phpMyAdmin

phpMyAdmin

phpMyAdmin

phpMyAdmin

KU Server


There is a web server available for you at



http://studentnet.kingston.ac.uk



Find all details there (or check the end of this
presentation)

The First PHP File

<!DOCTYPE
html>


<html>


<head>


<
title>KU
Facebook
</
title>


<meta http
-
equiv="Content
-
Type" content="text/html;
charset
=UTF
-
8" />

</head>


<body>


<
h1>
Facebook
</
h1>


<?
php



?>

<p><a
href
="add.php">Add yourself</a></p>

</body>

</html
>

index
.
php

The First PHP File

<!DOCTYPE
html>



<html>


<head>


<
title>KU
Facebook
</
title>


<meta http
-
equiv="Content
-
Type" content="text/html;
charset
=UTF
-
8" />

</head>



<body>


<
h1>
Facebook
</
h1>


<?
php


echo "Hello, world!";


?>

</body>

</html>


index
.
php

<!DOCTYPE html>

<html>

<head>


<title>
KUFacebook
</title>

</head>

<body>


<h1>
Facebook
</h1>




<?
php


$hostname = '
localhost
'; //
localhost

is the URL of the server


$username = 'root'; // the username in this example is root


$password = ''; // put here your
MySQL

root password (maybe '' if none)




// connect to the database server


$con =
mysql_connect
($hostname, $username, $password)


or die ('Could not connect: ' .
mysql_error
()); // display if connection failed


mysql_select_db
("test", $con); // choose the test database



$result =
mysql_query
("SELECT * FROM faces");


while ($row =
mysql_fetch_array
($result))


{


$name = $row['name'];


$file = $row['file'];


echo "<div style='float:left;margin
-
right:1em'>";


echo "<
img

src
='images/$file' />";


echo "<p style='text
-
align:center
'>$name</p>";


echo "</div>";


}


?>


<p style='
clear:both
'><a
href
="add.php">Add yourself</a></p>

</body>

</html>

index
.
php

<!DOCTYPE html>

<html>

<head>


<title>
KUFacebook
</title>

</head>

<body>


<h1>
Facebook
</h1>




<?
php


if($_SERVER['REQUEST_METHOD'] == "POST")


{


$hostname = '
localhost
'; //
localhost

is the URL of the server


$username = 'root'; // the username in this example is root


$password = ''; // put here your
MySQL

root password (maybe '' if none)




// connect to the database server


$con =
mysql_connect
($hostname, $username, $password)


or die ('Could not connect: ' .
mysql_error
()); // display if connection failed


mysql_select_db
("test", $con); // choose the test database




$name = $_POST["name"];


$file = $_POST["file"];




$result =
mysql_query
("INSERT INTO faces (name, file) VALUES ('$name',
'$file')");


mysql_close
($con);




echo "<p>Name: $name</p>";


echo "<p>File: $file</p>";


echo "<p>Inserted!</p>";


}

add
.
php

else


{

?>


<form method="post" action="add.php">


<p><label for="name">Name: </label>



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



<p><label for="file">Profile photo: </label>



<input type="text" name="file" /></p>


<p><input type="submit" name="submit" value="Send" /></p>

</form>


<?
php


}

?>


<p style='
clear:both
'><a
href
="index.php">Go back to faces</a></p>


</body>


</html>

How to use
studentnet

How to use
studentnet


Your personal website is
http://studentnet.kingston.ac.uk/~k01234567

(provide your correct k
-
number)



To upload files, you will need a FTP client program to
send your files to the server.


Here are configuration settings for
Filezilla
:


Host: studentnet.kingston.ac.uk


Protocol: SFTP


User: k01234567 (your normal k number)


Password: ******** (your normal password)


How to use
studentnet


To configure your database:

go to
Database Management Tool
(link available at the main page
http://studentnet.kingston.ac.uk
, login with your standard KU
knumber

and password).



First time, you will be asked to configure the name of your database
and the password


remember them!



You will then be able to
Manage Database.
Use your KU k
-
number
and the database password (you created it in the previous point).



You will find yourself in
phpMyAdmin
. Use it to create
faces
table and
populate it with data, exactly the same as we did it with XAMPP

How to use
studentnet


Before uploading your application you have to setup the
connection for the new server


see the example below (do it for
each PHP file that connects to the DB):



$hostname = '
studentnet.kingston.ac.uk
'; // URL of the server

$username = ‘
k01234567
'; // replace with your real username

$password = ‘
elvis
'; // your
MySQL

database password should go here



// connect to the database server

$con =
mysql_connect
($hostname, $username, $password)


or die ('Could not connect: ' .
mysql_error
()); // display if connection failed

mysql_select_db
("
db_k01234567
", $con
);
// replace with your real db name