本文後續將以圖例的方式, 一步一步展示如何利用 XAMPP 軟體, 在 Mac M1 架設網站與資料庫 ！
XAMPP (X) Cross platform + Apache Web Server + MySQL (MariaDB) Database + PHP & Perl, 如其名是一個將網頁與資料庫整合在一起的管理軟體, 方便用戶在自己的電腦上快速且輕易建置網站與資料庫伺服器。
＊＊＊另外, 我還會稍稍的介紹與示範靜態與動態網頁的設計, 供讀者參考 !!
STEP 0: 先檢查一下 CPU 版本 (ARM 或 Intel)
STEP 1: 下載 XAMPP 的 .dmg 檔
下載處: https://www.apachefriends.org/download.html
依需求來選擇欲安裝的版本, 如下紅框是我所下載的版本！！
STEP 2: 安裝 XAMPP
點選開啟剛剛下載的 .dmg 檔, 接下來步驟均點選 Next 按鈕
STEP 3: 啟動網頁伺服器 (Apache)
當 XAMPP 一經啟動後, 預設會自動開啟 Apache Web Server, 表示網頁伺服器已能提供服務, 但資料庫的服務 MySQL 是未被啟動的 !!
STEP 4: 啟動資料庫伺服器 (MySQL)
選擇 MySQL Database -> 點選右方的 Start 按鈕 -> 正常啟動後, 狀態將由 Stopped 變成跟 Apache Web Server 一樣的 Running
STEP 5: 檢查網頁伺服器是否已能正常提供服務?
開啟瀏覽器, 直接輸入 localhost 或 127.0.0.1 -> 正常啟動後畫面如下
STEP 6: 檢查資料庫伺服器是否已能正常提供服務?
點選右上角的 phpMyAdmin 選項, 或 瀏覽器直接輸入 localhost/phpmyadmin -> 正常啟動後畫面如下
完成以上幾個簡單步驟, 代表網站與資料庫均已被正常安裝並啟動。 恭喜 ! !
既然要架設網站, 當然目的就是要能提供網頁資訊給你的用戶囉 !! 所以, 接下來您就可以開始設計一些美美的網頁上架了 !!
STEP 7: 靜態網頁
首先, 我們可以先了解一下網頁的存放位置, 如此網頁伺服器才能載入您寫好的網頁程式, 呈現於用戶端的瀏覽器畫面上。
在 XAMPP 的後台管理軟體下方的第二個選項, Open Application Folder -> 電選後, 自動開啟 XAMPP 的主目錄 xamppfiles。
而其中的子目錄 htdocs 就是存放網頁程式的地方。
<html>
<head>
<title>My First HTML page</title>
</head>
<body>
<p><h1>Hello World!!</h1></p>
</body>
</html>開啟任一文字編輯器, 例如 Notepad++, 將上述 HTML 程式碼另存檔名為 test.html, 記得儲存位置為 htdocs 目錄下。
開啟瀏覽器, 直接輸入 localhost/test.html -> 正常啟動後畫面如下
STEP 7: 動態網頁
安裝好 XAMPP, 表示 PHP 與 Perl 也已同時被安裝好了, 可以開啟瀏覽器, 在 XAMPP dashboard 後台管理網頁, 點選 PHPInfo 選項
正常會出現下面的 PHP 版本資訊, 表示您可以開始撰寫 PHP 的動態網頁。
<html>
<head>
<title>My First PHP page</title>
</head>
<body>
<p><h1>Hello <?php echo 'PHP'; ?> !!</h1></p>
</body>
</html>跟撰寫靜態網頁方式無異, 開啟任一文字編輯器, 例如 Notepad++, 將上述 HTML+PHP 的程式碼另存檔名為 test.php, 儲存於 htdocs 目錄下。
開啟瀏覽器, 直接輸入 localhost/text.php -> 正常啟動後畫面如下
再度恭喜 ! 您已順利建置一個可同時能顯示了靜態 HTML 與動態 PHP 語言網頁的線上服務 Apache Web Server !!
利用動態網頁 PHP 語言的強項, 就能很簡單有效率的連上 MySQL Database, 再經過資料的讀寫與運算處理, 結合 UI 設計後, 要呈現圖文並茂, 美美動態資訊網頁給用戶, 此文應該可以幫您邁出無障礙的第一步 ！！
作者：Yungger 勇哥
若覺得此文真對您有幫助, 點點左上方的拍手圖示, 鼓勵一下。若還想 請喝杯咖啡 鼓勵一下勇哥的繼續創作, 也感謝 😘 😘 ！！
Yungger
a Maker & Freelancer
