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

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

Overview © 2017, Charles Kaplan WEB-301 - Website Template LAB

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-301 - Website Template LAB

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-301 - Website Template LAB

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

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 ©2013 - BCS350 Fall 2014 Review - 1st Half

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, 2009 Page 8 ©2017 - BCS350 Fall 2017 Review 2nd Half

© 2017, Charles Kaplan WEB-301 - Website Template LAB

Demonstration © 2017, Charles Kaplan WEB-301 - Website Template LAB

The Template © 2017, Charles Kaplan WEB-301 - Website Template LAB

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-301 - Website Template LAB

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-301 - Website Template LAB

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

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

Analysis © 2017, Charles Kaplan WEB-301 - Website Template LAB

Requirements Website Features Data © 2017, Charles Kaplan WEB-301 - Website Template LAB

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-301 - Website Template LAB

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

Data Requirements Tables Users Tweets Subscribers © 2017, Charles Kaplan WEB-301 - Website Template LAB

Users Firstname Lastname Email Userid Password © 2017, Charles Kaplan WEB-301 - Website Template LAB

Tweets Sender Tweet © 2017, Charles Kaplan WEB-301 - Website Template LAB

Subscribers Subscriber Tweeter © 2017, Charles Kaplan WEB-301 - Website Template LAB

Design © 2017, Charles Kaplan WEB-301 - Website Template LAB

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-301 - Website Template LAB

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

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

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-301 - Website Template LAB

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-301 - Website Template LAB

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-301 - Website Template LAB

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

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-301 - Website Template LAB

LAB Setup © 2017, Charles Kaplan WEB-301 - Website Template LAB

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

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-301 - Website Template LAB

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

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-301 - Website Template LAB

Coding & Testing © 2017, Charles Kaplan WEB-301 - Website Template LAB

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-301 - Website Template LAB

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-301 - Website Template LAB

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

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

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-301 - Website Template LAB

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

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-301 - Website Template LAB

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-301 - Website Template LAB

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-301 - Website Template LAB

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-301 - Website Template LAB

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-301 - Website Template LAB

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

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

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

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-301 - Website Template LAB

Future Website Enhancements © 2017, Charles Kaplan WEB-301 - Website Template LAB

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-301 - Website Template LAB

Wrap Up © 2017, Charles Kaplan WEB-301 - Website Template LAB