在 Mac M1 上架設網站與資料庫

本文後續將以圖例的方式, 一步一步展示如何利用 XAMPP 軟體, 在 Mac M1 架設網站與資料庫 !

XAMPP (X) Cross platform + Apache Web Server + MySQL (MariaDB) Database + PHP & Perl, 如其名是一個將網頁與資料庫整合在一起的管理軟體, 方便用戶在自己的電腦上快速且輕易建置網站與資料庫伺服器。

***另外, 我還會稍稍的介紹與示範靜態與動態網頁的設計, 供讀者參考 !!

STEP 0: 先檢查一下 CPU 版本 (ARM 或 Intel)

我的是 M1, 表示ARM 64bits 架構的處理器

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

--

--

Maker & Freelancer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store