How to write Facebook A hands-on introduction to Apache, PHP and

Transcript How to write Facebook A hands-on introduction to Apache, PHP and

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
Remote File System
Client
Server
Client & Server
Remote File System
REQUEST: GET
RESPONSE: HTML
Client
Server
Client & Server
Remote File System
CLIENT SIDE
PROCESSING
REQUEST: GET
RESPONSE: HTML
Client
Files served over the network
may contain HTML, CSS, JavaScript,
Flash and may be pretty much complex!
Server
Client & Server
Remote File System
REQUEST: GET
RESPONSE: HTML
Client
Server
Client & Server
Remote File System
REQUEST: GET
RESPONSE: HTML
Client
Server
Client & Server
Remote File System
REQUEST: POST
RESPONSE: HTML
Client
Server
Client & Server
Remote File System
REQUEST: POST
RESPONSE: HTML
Client
DB
Server
Client & Server
Remote File System
REQUEST: POST
RESPONSE: PHP
Client
SERVER SIDE
PROCESSING
DB
Server
Client-Side Processing
Server-Side Processing
DB
Client-Side Processing
Server-Side Processing
• Executed locally, on client’s
computer
• Results visible immediately
•
•
•
•
•
• Executed remotely, on
a web server
• Results must be sent over the
network
Fast & dynamic
• Network latency
Processing within a single
• Pages must be re-loaded in
webpage
order to view the results*
Information cannot be shared • Information easily shared
No Databases*
• Database back-end
Keeping things secret is very • Flexible and powerful security
difficult – everything is on the
control
user’s computer
* AJAX technology allows for remote
* Limited local database functionality is
available in HTML5, but without sharing
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
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
Linux, Windows, 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
MacOS, Windows, Linux...
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
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.
2.
3.
4.
Download and install – it’s easy
Run XAMPP Control Panel
Start Apache & MySql
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
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>
$name = $_POST["name"];
$file = $_POST["file"];
</html>
$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
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

How to write Facebook A hands-on introduction to Apache, PHP and

Transcript How to write Facebook A hands-on introduction to Apache, PHP and

Directory