1. LAB: WEB-301 Building a Website from a Template
Professor Charles Kaplan

2. Agenda Overview Demonstration Analysis Design LAB Setup
Coding & Testing
Wrap Up
© 2017, Charles Kaplan
WEB Website Template LAB

3. Overview
© 2017, Charles Kaplan
WEB Website Template LAB

4. Overview
Using a Template, we are going design and implement a “My Twitter” website.
Website Features
Home Page
Logon/Logoff/Registration
View Tweets
Send Tweets
Subscribe to (Follow) Tweeters
© 2017, Charles Kaplan
WEB Website Template LAB

5. Template Construction
Website Construction is like Building Construction
The Template is like a pre-fab building with the heating/cooling, electricity and plumbing already installed.
The developer only needs to provide some furnishing and decorate.
© 2017, Charles Kaplan
WEB Website Template LAB

6. Development Environment
Windows Laptop
WAMPServer – Apache, MySQL, PHP, PHPAdmin
Notepad++
MAC or LINUX
XAMPP
© 2017, Charles Kaplan
WEB Website Template LAB

7. Client/Server Environment
PHP Programs
PHP/MySQL
WebServer
(Apache)
Operating System
(LINUX)
Hardware I N T E R
Client
Browser
(IE, Firefox, Opera, etc.)
Operating System
(Windows 7, 10)
Hardware
© BCS350 Fall 2014
Review - 1st Half

8. WAMPServer Environment
Client
PHP Programs
 Notepad++
PHP/MySQL
Apache Web Server
 Browser
Operating System
(Windows 7, 10)
Hardware
(Your Laptop)
Charles Kaplan, Barsa Consulting Group LLC March, Page 8
© BCS350 Fall 2017
Review 2nd Half

9. © 2017, Charles Kaplan
WEB Website Template LAB

10. Demonstration
© 2017, Charles Kaplan
WEB Website Template LAB

11. The Template
© 2017, Charles Kaplan
WEB Website Template LAB

12. Template Landing Page – Website Control and Structure
LOGON/LOGOFF/Registration scripts
Public and Restricted (LOGON required) webpages
User Table
Header/Navigation Bar/Footer
Customization is only needed to the Content area of each webpage
Since all source code is provided, Website appearance can also be customized – logo, colors, structure
© 2017, Charles Kaplan
WEB Website Template LAB

13. Landing Page Review Code Start Session
INCLUDE website variables and functions
Website Offline
Determine Page Content
Show Page – Header, Navigation Bar, Content, Footer
© 2017, Charles Kaplan
WEB Website Template LAB

14. Public Pages Determine if page called from Landing Page Show Content
© 2017, Charles Kaplan
WEB Website Template LAB

15. Restricted Pages Determine if page called from Landing Page
Determine if LOGON
Show Content
© 2017, Charles Kaplan
WEB Website Template LAB

16. Analysis
© 2017, Charles Kaplan
WEB Website Template LAB

17. Requirements Website Features Data © 2017, Charles Kaplan
WEB Website Template LAB

18. Definitions Tweet - 140 character or less text message
Registered User - Someone with website LOGON credentials
Tweeter - A registered user who SEND’s a Tweet
Subscriber - A registered user who Follows a Tweeter
© 2017, Charles Kaplan
WEB Website Template LAB

19. Website Features Home Page Public Logon/Logoff/Registration Public
View Tweets Restricted
Send Tweets Restricted
Subscribe to (Follow) Tweeters Restricted
© 2017, Charles Kaplan
WEB Website Template LAB

20. Data Requirements Tables Users Tweets Subscribers
© 2017, Charles Kaplan
WEB Website Template LAB

21. Users Firstname Lastname Email Userid Password © 2017, Charles Kaplan
WEB Website Template LAB

22. Tweets Sender Tweet © 2017, Charles Kaplan
WEB Website Template LAB

23. Subscribers Subscriber Tweeter © 2017, Charles Kaplan
WEB Website Template LAB

24. Design
© 2017, Charles Kaplan
WEB Website Template LAB

25. Website Website Name - My Twitter Webpages - 5
Website Provider - 1and1.com
DNS Registration - 1and1.com (1 included)
FTP credentials and FTP Client - FileZilla
Operations Schedule – Backups and other maintenance - TBD
© 2017, Charles Kaplan
WEB Website Template LAB

26. Database Tables Data Elements and Attributes Relationships
© 2017, Charles Kaplan
WEB Website Template LAB

27. Users rowid Integer, Unsigned, AI, Primary Key firstname Varchar(20)
lastname Varchar(20)
Varchar(80)
userid Varchar(20)
password Varchar(20)
© 2017, Charles Kaplan
WEB Website Template LAB

28. ROWID
Every table needs a unique Primary Key (Updates & Deletes queries)
Cannot change the Primary Key (Delete & Add, messes up relational)
ROWID used if there isn’t a natural Primary Key (ie: SS#, CUSTID, etc.)
Attributes – Integer, Unsigned (positive), AI (Auto Increment), Primary Key
Easily used as a foreign key in other tables
© 2017, Charles Kaplan
WEB Website Template LAB

29. Tweets rowid Integer, Unsigned, AI, Primary Key
timestamp Integer, Unsigned
tweeter Integer, Unsigned, Foreign Key
tweet Varchar(140)
Relationships
Sender is Primary Key from User Profile
© 2017, Charles Kaplan
WEB Website Template LAB

30. Subscribers rowid Integer, Unsigned, AI, Primary Key
subscriber Integer, Unsigned, Foreign Key
tweeter Integer, Unsigned, Foreign Key
Relationships
Subscriber is Primary Key from User Profile
Sender is Primary Key from User Profile
© 2017, Charles Kaplan
WEB Website Template LAB

31. Data Structure Subscribers Rowid Subscriber Tweeter User Profile Rowid
Firstname
Lastname
Userid
Password
Tweets
Rowid
Tweet
Tweeter
© 2017, Charles Kaplan
WEB Website Template LAB

32. Database Implementation
Start WAMPServer
Start PHPMyAdmin Logon: Userid: Root, no password
Create Database mt (for My Twitter)
Create Tables and Elements
Copy exactly, lowercase names
© 2017, Charles Kaplan
WEB Website Template LAB

33. LAB Setup
© 2017, Charles Kaplan
WEB Website Template LAB

34. Notepad++ Open Source (FREE) program editor
Recognizes PHP (and other) language syntax
© 2017, Charles Kaplan
WEB Website Template LAB

35. WAMPServer
Open Source (FREE) stack for Windows of Apache, MySQL and PHP
Includes other utility programs, including PHPMyAdmin which is used for MySQL database administration
© 2017, Charles Kaplan
WEB Website Template LAB

36. Browser
Any browser will do. IE has certain issues, recommend Chrome or Firefox
© 2017, Charles Kaplan
WEB Website Template LAB

37. Template TEMPLATE subdirectory has unedited template
MT subdirectory is a copy of TEMPLATE that we will work on
Copy both to: WAMP64/WWW
© 2017, Charles Kaplan
WEB Website Template LAB

38. Coding & Testing
© 2017, Charles Kaplan
WEB Website Template LAB

39. Using MySQL in PHP Connect to MySQL and a database (Landing Page)
$mysqli = new mysqli($hostname, $userid, $password, $database);
Create a Query
$query = “SELECT firstname, lastname FROM users WHERE rowid = ‘1’”;
Execute Query
$result = mysqli_query($mysqli, $query);
Process Query Results
while (list($firstname, $lastname) = mysqli_fetch_row($result))
echo “$firstname $lastname<br>”;
© 2017, Charles Kaplan
WEB Website Template LAB

40. Page Layout - Content Determine if called from Landing Page
Determined if LOGON, if restricted Page
Setup Resources needed for this webpage
Get input, verify and cleanse
Determine what to do
Do it
Output page
© 2017, Charles Kaplan
WEB Website Template LAB

41. Home Page Display content Hello $username (if LOGON or Guest)
Explain what website is about
Registration/LOGON required
© 2017, Charles Kaplan
WEB Website Template LAB

42. Member Page (View Tweets)
Show 20 most recent tweets
Tweeter
Timestamp
Tweet
© 2017, Charles Kaplan
WEB Website Template LAB

43. Member Page - Query
SELECT tweets.timestamp, tweets.tweet, users.firstname, users.lastname FROM tweets JOIN users ON tweets.tweeter = users.rowid JOIN subscribers ON subscribers.subscriber = users.rowid WHERE subscribers.subscriber = ‘$suser’ ORDER BY tweets.timestamp DESC LIMIT 20
© 2017, Charles Kaplan
WEB Website Template LAB

44. Send a Tweet HTML FORM Show list of Subscribers INPUT FIELD – Tweet
INPUT FIELD – Send Button
Show list of Subscribers
© 2017, Charles Kaplan
WEB Website Template LAB

45. Send a Tweet – Queries Insert a Tweet $query = “INSERT INTO tweets SET
timestamp = ‘$timestamp’, // $timestamp = time();
tweeter = ‘$suser’, // from session.php
tweet = ‘$tweet’”; // from HTML Form
© 2017, Charles Kaplan
WEB Website Template LAB

46. Send a Tweet – Queries List of Subscribers $query = “
SELECT users.firstname, users.lastname
FROM subscribers
JOIN users ON subscribers.subscriber = users.rowid
WHERE subscribers.tweeter = ‘$suser’
ORDER BY users.lastname, users.firstname
© 2017, Charles Kaplan
WEB Website Template LAB

47. Subscribe To Show list of users already subscribed, with REMOVE option
Show dropdown list of available tweeters to subscribe to (not already subscribed to)
FORM INPUT – Subscribe button
© 2017, Charles Kaplan
WEB Website Template LAB

48. Subscribe To - Queries
Show list of users already subscribed SELECT users.rowid, users.firstname, users.lastname FROM subscribers JOIN users ON subscribers.tweeter = users.rowid WHERE subscriber.subscriber = ‘$suser’ ORDER BY users.lastname, users.firstname *create array with rowids of each user subscribed to*
© 2017, Charles Kaplan
WEB Website Template LAB

49. Subscribe To - Queries
Dropdown List of available tweeters SELECT users.rowid, users.firstname, users.lastname FROM users ORDER BY users.lastname, users.firstname
© 2017, Charles Kaplan
WEB Website Template LAB

50. Subscribe To - Queries
Create Subscription INSERT INTO subscribers SET subscriber = ‘$suser’, // From: sessions tweeter = ‘$tweeter’”; // From: FORM
© 2017, Charles Kaplan
WEB Website Template LAB

51. Subscribe To - Queries
Create Subscription INSERT INTO subscribers SET subscriber = ‘$suser’, // From: sessions tweeter = ‘$tweeter’”; // From: FORM
© 2017, Charles Kaplan
WEB Website Template LAB

52. Subscribe To - Queries
Remove Subscription DELETE FROM subscribers WHERE rowid = ‘$rowid’ // From: $_GET[‘r’]
© 2017, Charles Kaplan
WEB Website Template LAB

53. Website - Go Live Get website from ISP
(1and1.com has 1st year specials, starting at $0.99/month)
Register domain name – 1 usually included with website
FTP code and other files from PC to website
Backup MySQL database on PC with PHPMyAdmin
Restore MySQL to website with PHPMyAdmin
GO LIVE!
© 2017, Charles Kaplan
WEB Website Template LAB

54. Future Website Enhancements
© 2017, Charles Kaplan
WEB Website Template LAB

55. Enhancements Attach viewable file (image, video, pdf, etc.) to a tweet
Allow users to mark tweets READ or DELETE a tweet
Allow upload of member pictures with registration and show when viewing tweets
Registrations go to PENDING status, admin script to change to ACTIVE or REJECTED
Script to allow members to update their profile
© 2017, Charles Kaplan
WEB Website Template LAB

56. Wrap Up
© 2017, Charles Kaplan
WEB Website Template LAB