運用不同工具 教授開發互聯網 應用及Web應用程 序工作坊
Mr Leung Yiu Tun ICT Teacher St. Stephen’s Girls’ College
01
Rundown of Today
Introduction to XAMPP
How to download and install Key points on XAMPP Setup
Use of MySQL Server and phpMyAdmin Deployment of a SBA Exemplar
PHP Basics 02
03 04 05 06
Introduction to XAMPP 01
XAMPP is a Portable Web Server
XAMPP is the most popular PHP development environment
XAMPP is an abbreviation for cross-platform (X),Apache, MySQL, PHP and Perl
XAMPP is a completely free, easy to install Apache distribution
containing MariaDB, PHP, and Perl. The XAMPP open source package has been set up to be incredibly easy to install and to use.
MySQL is now a product under Oracle Corporation and MariaDB is a branch of MySQL.
Reference: https://www.youtube.com/watch?v=h6DEDm7C37A
It is Multi Cross-Platform, which implies it works on both Windows, Macintosh and Linux. With a single command, you may start and stop the entire web server and
database stack. Both a full and a standard version of XAMPP are available.
Deployment of XAMPP
● It is Easy to Install as compare to other web servers like WAMP.
● It is Multi Cross Platform which means XAMPP is available for Windows and Linux.
● It also comes with a number of other modules including OpenSSL, phpMyAdmin, MediaWiki, Joomla, WordPress and more.
● XAMPP is offered in both a full and a standard version (Smaller version).
● You can start and stop the whole web server+database stack with one command.
Advantages of Using XAMPP
How to download and install 02
Download XAMPP
Visit to https://www.apachefriends.org
For Windows Users
Browse to the “Download” Section and Choose “More Downloads”
Go to the “ XAMPP Windows” / “Latest Version” folder and download “xampp-portable-windows-x64-X.X.X-X-VSXX- installer.exe”
For Mac Users (Non-VM Version)
Browse to the “Download” Section and Choose “More Downloads”
Go to the “XAMPP Mac OS X” / “Latest Version” folder and download “xampp-osx-X.X.X-X-installer.dmg”
XAMPP Demo
Key points on XAMPP Setup (Web Server Setup Experience)
03
Document Root
Windows
DriveLetter:\xampp\apache\conf\httpd.conf MacOS
/Applications/XAMPP/xamppfiles/etc/httpd.conf
Where should I place my web pages?
Enable PHP On Site Debug Message in Apache
Windows
DriveLetter:\xampp\php\php.ini MacOS
/Applications/XAMPP/xamppfiles/etc/php.ini
Why can’t I see debug
messages of my PHP
scripts?
phpMyAdmin Alias
Windows
DriveLetter:\apache\conf\extra\httpd-xampp.conf MacOS
/Applications/XAMPP/xamppfiles/etc/extra/httpd-xampp.conf Why can’t I see the folder phpMyAdmin in Document Root?
MySQL Database
Windows
DriveLetter:\xampp\mysql\data MacOS
/Applications/XAMPP/xamppfiles/var/mysql
Where are my database files stored?
Use of MySQL Server and phpMyAdmin
04
Start MySQL Server
● Firewall?
● Access to Folders?
Grant Necessary Permission
phpMyAdmin is a free software tool written in PHP, intended to handle the administration of MySQL over the Web. phpMyAdmin supports a wide range of
operations on MySQL and MariaDB.
phpMyAdmin
Default Page of XAMPP
http://localhost/phpmyadmin/
Access to phpMyAdmin
phpMyAdmin
Username: root
Password: <empty>
Default Credential for Access to
MySQL Server
Deployment of a SBA Exemplar 05
Download SBA Exemplar
Food Order System - Sushi Shop
https://drive.google.com/file/d/1XcupaxsUxM0K8VSfEYgkvSqCMwtxY0zB/view?usp=sharing
HKACE-Elective_B-SBA-Exemplar.zip
Extract the files into the Document Root
1. Retain the XAMPP files in a backup folder 2. Extract the files in the Document Root
ProFTPD
A FTP Server is available for use.
Use any FTP client to access Host: localhost
Username: daemon Password: xampp
Import the Database of Sushi Shop
1. Open sqls.txt in folder “\db\” (SQLs to be pasted into phpMyAdmin)
2. Go to http://localhost/phpmyadmin/
3. Create a database named “food_order”
using character coding system
“utf8mb4_unicode_ci”
4. Browse to the newly created database and click the “SQL” tab, paste the SQLs into the textarea and Execute
Login the Sushi Shop either by scanning a QR Code or input an
invoice number
Method1: Scanning a QR Code Browse to http://localhost/
Method2: Input an invoice number
Browse to http://localhost/index_style2.php
Welcoming Screen of Sushi Shop
Clear Orders of Sushi Shop
HKDSE ICT 2025 Sample Paper
Elective B
Create client interfaces
Demo Client-side scripts
Setup Simple Network Services
Setup Ethernet/Wireless Networks
Folder/File Permissions (Read, Write, Execute)
Edit Web Pages
Concepts of client-server Communication
Demo Server-side scripts
Differences between Client- side and Server-side
Demo Client-side scripts
Demo Server-side scripts
Develop a simple web application
Code Study
PHPs JavaScripts CSSs
index.php
index_style2.php order.php
/include/libraries.php /include/settings.php
/js/shopping_cart.js /js/multi_tabs.js
/css/style.css
/css/responsive.css /css/shopping_cart.css /css/multi_tabs.css
PHP Basics 06
https://www.w3schools.com/php/
A Good Website worths to have a look
PHP starts with <?php PHP ends with ?>
PHP Scripts Start and End
// This is a single-line comment
# This is also a single-line comment /*
This is a multiple-lines comment block that spans over multiple
lines
*/
PHP - Comments
In PHP, a variable starts with the $ sign, followed by the name of the variable
Indexed arrays - Arrays with a numeric index
$toys[0] = "car";
Associative arrays - Arrays with named keys
$toys['car'] = "100";
Multidimensional arrays - Arrays containing one or more arrays
$toys[0][0] = "car";
PHP - Variables
include_once may be used in cases where the same file might be included and evaluated more than once during a particular execution of a script, so in this case it may help avoid problems such as function redefinitions, variable value reassignments, etc.
<?php include_once($_SERVER['DOCUMENT_ROOT'].'/include/header.php');?>
PHP - include_once
CREDITS:This presentation template was created by Slidesgo, including icons by Flaticon, infographics & images by Freepikand illustrations by
Stories
Thanks!
Do you have any questions?
ytl@hkace.org.hk
Please keep this slide for attribution
